1 | @import "mixins/settings.global";
|
2 | @import "mixins/objects.grid";
|
3 | @import "mixins/utilities.boxing";
|
4 |
|
5 | .o-drawer {
|
6 | position: absolute;
|
7 | background-color: $drawer-background-color;
|
8 | color: $drawer-color;
|
9 | z-index: $drawer-z-index;
|
10 | overflow-x: hidden;
|
11 | overflow-y: auto;
|
12 | -webkit-overflow-scrolling: touch;
|
13 |
|
14 | > .c-card {
|
15 | background-color: transparent;
|
16 | box-shadow: none;
|
17 | }
|
18 |
|
19 | .c-card--menu {
|
20 | display: block;
|
21 | margin: 0;
|
22 | border-right: 0;
|
23 | border-left: 0;
|
24 | border-radius: 0;
|
25 | }
|
26 | }
|
27 |
|
28 | .o-drawer--bottom,
|
29 | .o-drawer--top {
|
30 | left: 0;
|
31 | width: $drawer-width-horizontal;
|
32 | height: auto;
|
33 | margin-left: (100% - $drawer-width-horizontal) / 2;
|
34 | transform: translate(0, 0);
|
35 | }
|
36 |
|
37 | .o-drawer--bottom {
|
38 | top: 100%;
|
39 | border-radius: $drawer-border-radius $drawer-border-radius 0 0;
|
40 | }
|
41 |
|
42 | .o-drawer--bottom.o-drawer--visible {
|
43 | transform: translateY(-99%);
|
44 | }
|
45 |
|
46 | .o-drawer--top {
|
47 | bottom: 100%;
|
48 | border-radius: 0 0 $drawer-border-radius $drawer-border-radius;
|
49 | }
|
50 |
|
51 | .o-drawer--top.o-drawer--visible {
|
52 | transform: translateY(99%);
|
53 | }
|
54 |
|
55 | .o-drawer--left,
|
56 | .o-drawer--right {
|
57 | top: 0;
|
58 | width: $drawer-width-vertical;
|
59 | height: 100%;
|
60 |
|
61 | .c-card__footer--block {
|
62 | position: absolute;
|
63 | bottom: 0;
|
64 | width: 100%;
|
65 |
|
66 | .c-button {
|
67 | border-radius: 0;
|
68 | }
|
69 | }
|
70 | }
|
71 |
|
72 | .o-drawer--left {
|
73 | left: 0;
|
74 | transform: translateX(-100%);
|
75 | }
|
76 |
|
77 | .o-drawer--left.o-drawer--visible {
|
78 | transform: translateX(-1%);
|
79 | }
|
80 |
|
81 | .o-drawer--right {
|
82 | left: 100%;
|
83 | transform: translate(0, 0);
|
84 | }
|
85 |
|
86 | .o-drawer--right.o-drawer--visible {
|
87 | transform: translateX(-99%);
|
88 | }
|