1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
// Drawer.
.bmd-layout-drawer {
position: absolute;
z-index: 5; // over a header and content
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
max-height: 100%;
overflow: visible;
overflow-y: auto;
font-size: .875rem;
//color: $bmd-layout-drawer-text-color;
//background: $bmd-layout-drawer-bg-color;
// Transform offscreen.
transition: transform;
will-change: transform;
transform-style: preserve-3d;
@include box-shadow($bmd-shadow-2dp);
@include material-animation-default();
> * {
flex-shrink: 0;
}
// Placement of common components within the drawer
// You might say this is opinionated - feedback welcome.
> header {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1rem;
.navbar-brand {
padding-left: 1.5rem;
font-size: 1.25rem;
}
}
> .list-group {
padding-top: 1rem;
.list-group-item {
padding-right: 2.5rem;
padding-left: 2.5rem;
font-size: .8125rem;
font-weight: 500;
}
}
}
//----------------
// Sizing and positioning below here
// for left or right drawers, setup widths, heights and positions
@include bmd-drawer-x-out($bmd-drawer-x-size);
// for top or bottom drawers, setup widths, heights and positions
@include bmd-drawer-y-out($bmd-drawer-y-size);
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
// as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px).
//
//
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-in`
// without a size (for triggered openings). Since the xs size is 0, instead of using `bmd-drawer-in-xs`
// (which is mostly meaningless), we create `bmd-drawer-in` meaning always open.
//
// NOTE: bmd-drawer-in-* uses media-breakpoint-up()
//
// bmd-drawer-out
// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
// strange reason) both bmd-drawer-out and bmd-drawer-in are present, it appears that the closed option wins.
//
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-overlay`.
// Since the xs size is 0, instead of using `bmd-drawer-overlay-xs`, we create `bmd-drawer-overlay` meaning always overlay.
//
// NOTE: bmd-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios.
//
//
// Drawer open positioning, and style options (push is default, overlay is optional)
:not(.bmd-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
@each $breakpoint in map-keys($grid-breakpoints) {
@include bmd-drawer-x-in-up($bmd-drawer-x-size, $breakpoint);
@include bmd-drawer-y-in-up($bmd-drawer-y-size, $breakpoint);
@include bmd-drawer-x-overlay-down($breakpoint);
@include bmd-drawer-y-overlay-down($breakpoint);
}
}
////----
//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with bmd-drawer-in-lg and allows for the bmd-drawer-in trigger
//.kitchen-sink-drawer {
// $custom-size: 500px;
// @include bmd-drawer-x-out($custom-size);
// &:not(.bmd-drawer-out) {
// @each $breakpoint in map-keys($grid-breakpoints) {
// @include bmd-drawer-x-in-up($custom-size, $breakpoint);
// }
// }
//}
//
////
////----
//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the bmd-drawer-in trigger
//.kitchen-sink-drawer-static {
// $custom-size: 500px;
// @include bmd-drawer-x-out($custom-size); // closed by default
// @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in
// @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
//}
|
