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 | }
|