UNPKG

2.35 kBSCSSView Raw
1@charset "UTF-8";
2@import "../core/index-noreset.scss";
3@import "./scss/mixin.scss";
4@import "./scss/variable.scss";
5
6@import "./rtl.scss";
7
8#{$drawer-prefix} {
9 @include box-sizing;
10 position: fixed;
11 z-index: 1001;
12 background: $drawer-bg;
13 border: $drawer-border-width $drawer-border-style $drawer-border-color;
14 box-shadow: $drawer-shadow;
15 overflow: auto;
16 animation-duration: $motion-duration-standard;
17 animation-timing-function: $motion-ease-in-out;
18
19 &-right {
20 height: 100%;
21 max-width: 80%;
22 width: 240px;
23 }
24
25 &-left {
26 height: 100%;
27 max-width: 80%;
28 width: 240px;
29 }
30
31 &-top {
32 width: 100%;
33 }
34
35 &-bottom {
36 width: 100%;
37 }
38
39 &-header {
40 padding: $drawer-title-padding-top $drawer-title-padding-left-right $drawer-title-padding-bottom $drawer-title-padding-left-right;
41 border-bottom: $drawer-title-border-width $line-solid $drawer-title-border-color;
42 font-size: $drawer-title-font-size;
43 background: $drawer-title-bg-color;
44 color: $drawer-title-color;
45 }
46
47 &-no-title {
48 padding: 0;
49 border-bottom: 0;
50 }
51
52 &-body {
53 padding: $drawer-content-padding-top $drawer-content-padding-left-right $drawer-content-padding-bottom $drawer-content-padding-left-right;
54 font-size: $drawer-content-font-size;
55 line-height: $font-lineheight-2;
56 color: $drawer-content-color;
57 }
58
59 &-close {
60 position: absolute;
61 top: $drawer-close-top;
62 right: $drawer-close-right;
63 width: $drawer-close-width;
64 height: $drawer-close-width;
65 color: $drawer-close-color;
66 cursor: pointer;
67
68 &:link,
69 &:visited {
70 height: $drawer-close-width;
71 color: $drawer-close-color;
72 }
73
74 &:hover {
75 background: $drawer-close-bg-hovered;
76 color: $drawer-close-color-hovered;
77 }
78
79 & &-icon.#{$css-prefix}icon {
80 position: absolute;
81 top: 50%;
82 left: 50%;
83 @include icon-square-size(
84 $size: $drawer-close-size,
85 $marginTop: calc(0px - #{$drawer-close-size} / 2),
86 $marginLeft: calc(0px - #{$drawer-close-size} / 2)
87 );
88 }
89 }
90}