Project

General

Profile

1
// Name:            Off-canvas
2
// Description:     Component to create an off-canvas sidebar
3
//
4
// Component:       `uk-offcanvas`
5
//
6
// Sub-objects:     `uk-offcanvas-bar`
7
//                  `uk-offcanvas-container`
8
//                  `uk-offcanvas-content`
9
//                  `uk-offcanvas-page`
10
//
11
// Adopted:         `uk-offcanvas-close`
12
//
13
// Modifiers:       `uk-offcanvas-flip`
14
//                  `uk-offcanvas-bar-animation`
15
//                  `uk-offcanvas-reveal`
16
//                  `uk-offcanvas-overlay`
17
//                  `uk-offcanvas-content-animation`
18
//
19
// States:          `uk-open`
20
//
21
// ========================================================================
22

    
23

    
24
// Variables
25
// ========================================================================
26

    
27
@offcanvas-z-index:                             @global-z-index;
28

    
29
@offcanvas-bar-width:                           270px;
30
@offcanvas-bar-padding-vertical:                @global-margin;
31
@offcanvas-bar-padding-horizontal:              @global-margin;
32
@offcanvas-bar-background:                      @global-secondary-background;
33
@offcanvas-bar-color-mode:                      light;
34

    
35
@offcanvas-bar-width-m:                         350px;
36
@offcanvas-bar-padding-vertical-m:              @global-medium-gutter;
37
@offcanvas-bar-padding-horizontal-m:            @global-medium-gutter;
38

    
39
@offcanvas-close-position:                      20px;
40
@offcanvas-close-padding:                       5px;
41

    
42
@offcanvas-overlay-background:                  rgba(0,0,0,0.1);
43

    
44

    
45
/* ========================================================================
46
   Component: Off-canvas
47
 ========================================================================== */
48

    
49
/*
50
 * 1. Hide by default
51
 * 2. Set position
52
 */
53

    
54
.uk-offcanvas {
55
    /* 1 */
56
    display: none;
57
    /* 2 */
58
    position: fixed;
59
    top: 0;
60
    bottom: 0;
61
    left: 0;
62
    z-index: @offcanvas-z-index;
63
}
64

    
65
/*
66
 * Flip modifier
67
 */
68

    
69
.uk-offcanvas-flip .uk-offcanvas {
70
    right: 0;
71
    left: auto;
72
}
73

    
74

    
75
/* Bar
76
 ========================================================================== */
77

    
78
/*
79
 * 1. Set position
80
 * 2. Size and style
81
 * 3. Allow scrolling
82
 * 4. Transform
83
 */
84

    
85
.uk-offcanvas-bar {
86
    /* 1 */
87
    position: absolute;
88
    top: 0;
89
    bottom: 0;
90
    left: 0;
91
    /* 2 */
92
    box-sizing: border-box;
93
    width: @offcanvas-bar-width;
94
    padding: @offcanvas-bar-padding-vertical @offcanvas-bar-padding-horizontal;
95
    background: @offcanvas-bar-background;
96
    /* 3 */
97
    overflow-y: auto;
98
    -webkit-overflow-scrolling: touch;
99
    /* 4 */
100
    -webkit-transform: translateX(-100%);
101
    transform: translateX(-100%);
102
    .hook-offcanvas-bar;
103
}
104

    
105
/* Tablet landscape and bigger */
106
@media (min-width: @breakpoint-medium) {
107

    
108
    .uk-offcanvas-bar {
109
        width: @offcanvas-bar-width-m;
110
        padding: @offcanvas-bar-padding-vertical-m @offcanvas-bar-padding-horizontal-m;
111
    }
112

    
113
}
114

    
115
// Color Mode
116
.uk-offcanvas-bar:extend(.uk-light all) when (@offcanvas-bar-color-mode = light) {}
117
.uk-offcanvas-bar:extend(.uk-dark all) when (@offcanvas-bar-color-mode = dark) {}
118

    
119
/* Flip modifier */
120
.uk-offcanvas-flip .uk-offcanvas-bar {
121
    left: auto;
122
    right: 0;
123
    -webkit-transform: translateX(100%);
124
    transform: translateX(100%);
125
}
126

    
127
/*
128
 * Open
129
 */
130

    
131
.uk-open > .uk-offcanvas-bar {
132
    -webkit-transform: translateX(0);
133
    transform: translateX(0);
134
}
135

    
136
/*
137
 * Slide Animation (Used in slide and push mode)
138
 */
139

    
140
.uk-offcanvas-bar-animation {
141
    -webkit-transition: -webkit-transform 0.3s ease-out;
142
    transition: transform 0.3s ease-out;
143
}
144

    
145
/*
146
 * Reveal Animation
147
 * 1. Set position
148
 * 2. Clip the bar
149
 * 3. Animation
150
 * 4. Reset transform
151
 */
152

    
153
.uk-offcanvas-reveal {
154
    /* 1 */
155
    position: absolute;
156
    top: 0;
157
    bottom: 0;
158
    left: 0;
159
    /* 2 */
160
    width: 0;
161
    overflow: hidden;
162
    /* 3 */
163
    -webkit-transition: width 0.3s ease-out;
164
    transition: width 0.3s ease-out;
165
}
166

    
167
.uk-offcanvas-reveal .uk-offcanvas-bar {
168
    /* 4 */
169
    -webkit-transform: translateX(0);
170
    transform: translateX(0);
171
}
172

    
173
.uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width; }
174

    
175
/* Tablet landscape and bigger */
176
@media (min-width: @breakpoint-medium) {
177

    
178
    .uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width-m; }
179

    
180
}
181

    
182
/*
183
 * Flip modifier
184
 */
185

    
186
.uk-offcanvas-flip .uk-offcanvas-reveal {
187
    right: 0;
188
    left: auto;
189
}
190

    
191

    
192
/* Close
193
 * Adopts `uk-close`
194
 ========================================================================== */
195

    
196
.uk-offcanvas-close {
197
    position: absolute;
198
    z-index: @offcanvas-z-index;
199
    top: @offcanvas-close-position;
200
    right: @offcanvas-close-position;
201
    padding: @offcanvas-close-padding;
202
    .hook-offcanvas-close;
203
}
204

    
205

    
206
/* Overlay
207
 ========================================================================== */
208

    
209
/*
210
 * Overlay the whole page. Needed for the `::before`
211
 * 1. Using `100vw` so no modification is needed when off-canvas is flipped
212
 * 2. Allow for closing with swipe gesture on devices with pointer events.
213
 */
214

    
215
.uk-offcanvas-overlay {
216
    /* 1 */
217
    width: 100vw;
218
    /* 2 */
219
    touch-action: none;
220
}
221

    
222
/*
223
 * 1. Mask the whole page
224
 * 2. Fade-in transition
225
 */
226

    
227
.uk-offcanvas-overlay::before {
228
    /* 1 */
229
    content: "";
230
    position: absolute;
231
    top: 0;
232
    bottom: 0;
233
    left: 0;
234
    right: 0;
235
    background: @offcanvas-overlay-background;
236
    /* 2 */
237
    opacity: 0;
238
    -webkit-transition: opacity 0.15s linear;
239
    transition: opacity 0.15s linear;
240
    .hook-offcanvas-overlay;
241
}
242

    
243
.uk-offcanvas-overlay.uk-open::before { opacity: 1; }
244

    
245

    
246
/* Container
247
 ========================================================================== */
248

    
249
/*
250
 * Prevent horizontal scrollbar when the content is slide-out
251
 * Has to be on the `html` element too to make it work on the `body`
252
 */
253

    
254
.uk-offcanvas-page,
255
.uk-offcanvas-container { overflow-x: hidden; }
256

    
257
/*
258
 * Prevent all scrollbars if overlay is used
259
 */
260

    
261
.uk-offcanvas-container-overlay { overflow: hidden; }
262

    
263

    
264
/* Content
265
 ========================================================================== */
266

    
267
/*
268
 * Prepare slide-out animation (Used in reveal and push mode)
269
 * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars
270
 * lose their fixed state and behaves like `absolute` within a transformed container
271
 * Note: JS sets a fixed width and height so the page can slide-out without shrinking
272
 * 1. Smooth scrolling
273
 */
274

    
275
.uk-offcanvas-container .uk-offcanvas-content {
276
    position: relative;
277
    left: 0;
278
    -webkit-transition: left 0.3s ease-out;
279
    transition: left 0.3s ease-out;
280
    /* 1 */
281
    -webkit-overflow-scrolling: touch;
282
}
283

    
284
/* Disable scrolling if overlay mode */
285
.uk-offcanvas-overlay .uk-offcanvas-content { overflow-y: hidden; }
286

    
287
/*
288
 * Activate slide-out animation
289
 */
290

    
291
:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: @offcanvas-bar-width; }
292

    
293
.uk-offcanvas-flip > .uk-offcanvas-content-animation { left: -@offcanvas-bar-width; }
294

    
295
/* Tablet landscape and bigger */
296
@media (min-width: @breakpoint-medium) {
297

    
298
    :not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { left: @offcanvas-bar-width-m; }
299

    
300
    .uk-offcanvas-flip > .uk-offcanvas-content-animation { left: -@offcanvas-bar-width-m; }
301

    
302
}
303

    
304

    
305
// Hooks
306
// ========================================================================
307

    
308
.hook-offcanvas-misc;
309

    
310
.hook-offcanvas-bar() {}
311
.hook-offcanvas-close() {}
312
.hook-offcanvas-overlay() {}
313
.hook-offcanvas-misc() {}
(40-40/66)