| 1 | ////
|
| 2 | /// @module card: 卡片
|
| 3 | /// @tag Card
|
| 4 | /// @category component
|
| 5 | /// @family data-display
|
| 6 | /// @varPrefix $card-
|
| 7 | /// @classPrefix {prefix}-card
|
| 8 | /// @order {"size/bounding":10,"size/divider":11,"size/header":12,"size/content":13,"size/footer":14,"statement/normal":10,"statement/normal/bounding":100,"statement/normal/header":101,"statement/normal/footer":102}
|
| 9 | ////
|
| 10 |
|
| 11 | $card-prefix: '.' + $css-prefix + 'card';
|
| 12 |
|
| 13 | // animation
|
| 14 | $ease-out: cubic-bezier(.23, 1, .32, 1);
|
| 15 | $ease-in: cubic-bezier(.755, .05, .855, .06);
|
| 16 |
|
| 17 | /// corner
|
| 18 | /// @namespace size/bounding
|
| 19 | $card-corner: $corner-1 !default;
|
| 20 |
|
| 21 | /// padding (l, r)
|
| 22 | /// @namespace size/bounding
|
| 23 | $card-padding-lr: $s-4 !default;
|
| 24 |
|
| 25 | /// border width
|
| 26 | /// @namespace size/bounding
|
| 27 | $card-border-width: $line-1 !default;
|
| 28 |
|
| 29 | /// padding (t)
|
| 30 | /// @namespace size/divider
|
| 31 | $card-head-padding-bottom: $s-3 !default;
|
| 32 |
|
| 33 | /// border width (b)
|
| 34 | /// @namespace size/divider
|
| 35 | $card-head-bottom-border-width: $line-1 !default;
|
| 36 |
|
| 37 | /// height
|
| 38 | /// @namespace size/header
|
| 39 | $card-head-main-height: $s-10 !default;
|
| 40 |
|
| 41 | /// margin (t)
|
| 42 | /// @namespace size/header
|
| 43 | $card-head-main-margin-top: $s-2 !default;
|
| 44 |
|
| 45 | /// margin (b)
|
| 46 | /// @namespace size/header
|
| 47 | $card-head-main-margin-bottom: $s-zero !default;
|
| 48 |
|
| 49 | /// title text
|
| 50 | /// @namespace size/header
|
| 51 | $card-title-font-size: $font-size-subhead !default;
|
| 52 |
|
| 53 | /// title text weight
|
| 54 | /// @namespace size/header
|
| 55 | $card-title-font-weight: $font-weight-2 !default;
|
| 56 |
|
| 57 | /// sub title text
|
| 58 | /// @namespace size/header
|
| 59 | $card-sub-title-font-size: $font-size-caption !default;
|
| 60 |
|
| 61 | /// extra text
|
| 62 | /// @namespace size/header
|
| 63 | $card-title-extra-font-size: $font-size-body-1 !default;
|
| 64 |
|
| 65 | /// line width
|
| 66 | /// @namespace size/header
|
| 67 | $card-title-bullet-width: $line-3 !default;
|
| 68 |
|
| 69 | /// line height
|
| 70 | /// @namespace size/header
|
| 71 | $card-title-bullet-height: $s-4 !default;
|
| 72 |
|
| 73 | /// title padding (l)
|
| 74 | /// @namespace size/header
|
| 75 | $card-title-padding-left: $s-2 !default;
|
| 76 |
|
| 77 | /// sub title padding (l)
|
| 78 | /// @namespace size/header
|
| 79 | $card-sub-title-padding-left: $s-2 !default;
|
| 80 |
|
| 81 | /// padding (t)
|
| 82 | /// @namespace size/content
|
| 83 | $card-body-show-divider-padding-top: $s-3 !default;
|
| 84 |
|
| 85 | /// padding (t)
|
| 86 | /// @namespace size/content
|
| 87 | $card-body-hide-divider-padding-top: $s-zero !default;
|
| 88 |
|
| 89 | /// font size
|
| 90 | /// @namespace size/content
|
| 91 | $card-content-font-size: $font-size-body-1 !default;
|
| 92 |
|
| 93 | // [deprecated in 2.x] should fix to linehgiht-2, do not need to config
|
| 94 | /// line height
|
| 95 | /// @namespace size/content
|
| 96 | $card-content-line-height: $font-lineheight-2 !default;
|
| 97 |
|
| 98 | /// padding (b)
|
| 99 | /// @namespace size/content
|
| 100 | $card-body-padding-bottom: $s-3 !default;
|
| 101 |
|
| 102 | /// more button height
|
| 103 | /// @namespace size/footer
|
| 104 | $card-more-btn-height: $s-4 !default;
|
| 105 |
|
| 106 | /// padding (t)
|
| 107 | /// @namespace size/footer
|
| 108 | $card-more-btn-padding-top: $s-2 !default;
|
| 109 |
|
| 110 | /// expand button size
|
| 111 | /// @namespace size/footer
|
| 112 | $card-more-btn-font-size: $font-size-body-1 !default;
|
| 113 |
|
| 114 | /// shadow
|
| 115 | /// @namespace statement/normal/bounding
|
| 116 | $card-shadow: $shadow-zero !default;
|
| 117 |
|
| 118 | /// border style
|
| 119 | /// @namespace statement/normal/bounding
|
| 120 | $card-border-style: $line-solid !default;
|
| 121 |
|
| 122 | /// border color
|
| 123 | /// @namespace statement/normal/bounding
|
| 124 | $card-border-color: $color-line1-2 !default;
|
| 125 |
|
| 126 | /// background
|
| 127 | /// @namespace statement/normal/bounding
|
| 128 | $card-background: $color-white !default;
|
| 129 |
|
| 130 | /// background
|
| 131 | /// @namespace statement/normal/header
|
| 132 | $card-header-background: $color-white !default;
|
| 133 |
|
| 134 | /// title color
|
| 135 | /// @namespace statement/normal/header
|
| 136 | $card-title-color: $color-text1-4 !default;
|
| 137 |
|
| 138 | /// sub title color
|
| 139 | /// @namespace statement/normal/header
|
| 140 | $card-sub-title-color: $color-text1-3 !default;
|
| 141 |
|
| 142 | /// extra color
|
| 143 | /// @namespace statement/normal/header
|
| 144 | $card-title-extra-color: $color-link-1 !default;
|
| 145 |
|
| 146 | /// line color
|
| 147 | /// @namespace statement/normal/header
|
| 148 | $card-title-bullet-color: $color-brand1-6 !default;
|
| 149 |
|
| 150 | /// color
|
| 151 | /// @namespace statement/normal/content
|
| 152 | $card-content-color: $color-text1-3 !default;
|
| 153 |
|
| 154 | /// divider color
|
| 155 | /// @namespace statement/normal/header
|
| 156 | $card-head-bottom-border-color: $color-line1-1 !default;
|
| 157 |
|
| 158 | /// expand button color
|
| 159 | /// @namespace statement/normal/footer
|
| 160 | $card-more-btn-color: $color-link-1 !default;
|
| 161 |
|
| 162 | /// background
|
| 163 | /// @namespace statement/normal/footer
|
| 164 | $card-more-btn-background: $color-white !default;
|