blob: c3eb0a57114c81d2ddea02c03c6bff2880b551a0 (
plain) (
blame)
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
|
// Name: Overlay
// Description: Component to create content areas overlaying an image
//
// Component: `uk-overlay`
//
// Adopted: `uk-overlay-icon`
//
// Modifier: `uk-overlay-default`
// `uk-overlay-primary`
//
// ========================================================================
// Variables
// ========================================================================
$overlay-padding-horizontal: $global-gutter !default;
$overlay-padding-vertical: $global-gutter !default;
$overlay-default-background: rgba($global-background, 0.8) !default;
$overlay-primary-background: rgba($global-secondary-background, 0.8) !default;
$overlay-primary-color-mode: light !default;
/* ========================================================================
Component: Overlay
========================================================================== */
.uk-overlay {
padding: $overlay-padding-vertical $overlay-padding-horizontal;
@if(mixin-exists(hook-overlay)) {@include hook-overlay();}
}
/*
* Remove margin from the last-child
*/
.uk-overlay > :last-child { margin-bottom: 0; }
/* Icon
========================================================================== */
.uk-overlay-icon {
@if(mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();}
}
/* Style modifiers
========================================================================== */
/*
* Default
*/
.uk-overlay-default {
background: $overlay-default-background;
@if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
}
/*
* Primary
*/
.uk-overlay-primary {
background: $overlay-primary-background;
@if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
}
// Color Mode
@if ( $overlay-primary-color-mode == light ) { .uk-overlay-primary { @extend .uk-light !optional;} }
@if ( $overlay-primary-color-mode == dark ) { .uk-overlay-primary { @extend .uk-dark !optional;} }
// Hooks
// ========================================================================
@if(mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();}
// @mixin hook-overlay(){}
// @mixin hook-overlay-icon(){}
// @mixin hook-overlay-default(){}
// @mixin hook-overlay-primary(){}
// @mixin hook-overlay-misc(){}
|
