| 1 | ////
|
| 2 | /// @module drawer: 抽屉
|
| 3 | /// @tag Drawer
|
| 4 | /// @category component
|
| 5 | /// @family feedback
|
| 6 | /// @varPrefix $drawer-
|
| 7 | /// @classPrefix {prefix}-drawer
|
| 8 | ////
|
| 9 |
|
| 10 | // drawer variables
|
| 11 | // --------------------------------------------------
|
| 12 |
|
| 13 | // unconfigurable
|
| 14 | $drawer-prefix: ".#{$css-prefix}drawer";
|
| 15 |
|
| 16 | // Size
|
| 17 | // ----------------------------------------
|
| 18 |
|
| 19 | /// text
|
| 20 | /// @namespace size/title
|
| 21 | $drawer-title-font-size: $font-size-subhead !default;
|
| 22 | /// padding (t)
|
| 23 | /// @namespace size/title
|
| 24 | $drawer-title-padding-top: $s-3 !default;
|
| 25 | /// padding (b)
|
| 26 | /// @namespace size/title
|
| 27 | $drawer-title-padding-bottom: $s-3 !default;
|
| 28 | /// padding (l, r)
|
| 29 | /// @namespace size/title
|
| 30 | $drawer-title-padding-left-right: $s-5 !default;
|
| 31 | /// divider
|
| 32 | /// @namespace size/title
|
| 33 | $drawer-title-border-width: $line-1 !default;
|
| 34 |
|
| 35 | /// text
|
| 36 | /// @namespace size/content
|
| 37 | $drawer-content-font-size: $font-size-body-1 !default;
|
| 38 | /// padding (t)
|
| 39 | /// @namespace size/content
|
| 40 | $drawer-content-padding-top: $s-5 !default;
|
| 41 | /// padding (b)
|
| 42 | /// @namespace size/content
|
| 43 | $drawer-content-padding-bottom: $s-5 !default;
|
| 44 | /// padding (l, r)
|
| 45 | /// @namespace size/content
|
| 46 | $drawer-content-padding-left-right: $s-5 !default;
|
| 47 | /// position (t)
|
| 48 | /// @namespace size/close
|
| 49 | $drawer-close-top: $s-3 !default;
|
| 50 | /// position (r)
|
| 51 | /// @namespace size/close
|
| 52 | $drawer-close-right: $s-3 !default;
|
| 53 | $drawer-close-width: $s-4 !default;
|
| 54 | /// icon
|
| 55 | /// @namespace size/close
|
| 56 | $drawer-close-size: $icon-xs !default;
|
| 57 |
|
| 58 |
|
| 59 |
|
| 60 | // Statement:Normal
|
| 61 | // ----------------------------------------
|
| 62 |
|
| 63 | /// background
|
| 64 | /// @namespace statement/normal/bounding
|
| 65 | $drawer-bg: $color-white !default;
|
| 66 | /// border width
|
| 67 | /// @namespace size/bounding
|
| 68 | $drawer-border-width: $line-1 !default;
|
| 69 | /// border
|
| 70 | /// @namespace statement/normal/bounding
|
| 71 | $drawer-border-color: $color-line1-2 !default;
|
| 72 | /// border style
|
| 73 | /// @namespace statement/normal/bounding
|
| 74 | $drawer-border-style: $line-solid !default;
|
| 75 | /// corner
|
| 76 | /// @namespace statement/normal/bounding
|
| 77 | $drawer-corner: $corner-1 !default;
|
| 78 | /// shadow
|
| 79 | /// @namespace statement/normal/bounding
|
| 80 | $drawer-shadow: $shadow-2-down !default;
|
| 81 | /// text
|
| 82 | /// @namespace statement/normal/title
|
| 83 | $drawer-title-color: $color-text1-4 !default;
|
| 84 | /// background
|
| 85 | /// @namespace statement/normal/title
|
| 86 | $drawer-title-bg-color: $color-white !default;
|
| 87 | /// divider
|
| 88 | /// @namespace statement/normal/title
|
| 89 | $drawer-title-border-color: $color-line1-2 !default;
|
| 90 | /// text
|
| 91 | /// @namespace statement/normal/content
|
| 92 | $drawer-content-color: $color-text1-3 !default;
|
| 93 | /// icon
|
| 94 | /// @namespace statement/normal/close
|
| 95 | $drawer-close-color: $color-text1-2 !default;
|
| 96 |
|
| 97 | // Statement:Hover
|
| 98 | // ----------------------------------------
|
| 99 |
|
| 100 | /// icon
|
| 101 | /// @namespace statement/hover/close
|
| 102 | $drawer-close-color-hovered: $color-text1-4 !default;
|
| 103 | /// background
|
| 104 | /// @namespace statement/hover/close
|
| 105 | $drawer-close-bg-hovered: $color-transparent !default;
|