Project

General

Profile

1
// Name:            Overlay
2
// Description:     Component to create content areas overlaying an image
3
//
4
// Component:       `uk-overlay`
5
//
6
// Adopted:         `uk-overlay-icon`
7
//
8
// Modifier:        `uk-overlay-default`
9
//                  `uk-overlay-primary`
10
//
11
// ========================================================================
12

    
13

    
14
// Variables
15
// ========================================================================
16

    
17
$overlay-padding-horizontal:                     $global-gutter !default;
18
$overlay-padding-vertical:                       $global-gutter !default;
19

    
20
$overlay-default-background:                     rgba($global-background, 0.8) !default;
21

    
22
$overlay-primary-background:                     rgba($global-secondary-background, 0.8) !default;
23
$overlay-primary-color-mode:                     light !default;
24

    
25

    
26
/* ========================================================================
27
   Component: Overlay
28
 ========================================================================== */
29

    
30
.uk-overlay {
31
    padding: $overlay-padding-vertical $overlay-padding-horizontal;
32
    @if(mixin-exists(hook-overlay)) {@include hook-overlay();}
33
}
34

    
35
/*
36
 * Remove margin from the last-child
37
 */
38

    
39
.uk-overlay > :last-child { margin-bottom: 0; }
40

    
41

    
42
/* Icon
43
 ========================================================================== */
44

    
45
.uk-overlay-icon {
46
    @if(mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();}
47
}
48

    
49

    
50
/* Style modifiers
51
 ========================================================================== */
52

    
53
/*
54
 * Default
55
 */
56

    
57
.uk-overlay-default {
58
    background: $overlay-default-background;
59
    @if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
60
}
61

    
62
/*
63
 * Primary
64
 */
65

    
66
.uk-overlay-primary {
67
    background: $overlay-primary-background;
68
    @if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
69
}
70

    
71
// Color Mode
72
@if ( $overlay-primary-color-mode == light ) { .uk-overlay-primary { @extend .uk-light;} }
73
@if ( $overlay-primary-color-mode == dark ) { .uk-overlay-primary { @extend .uk-dark;} }
74

    
75

    
76
// Hooks
77
// ========================================================================
78

    
79
@if(mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();}
80

    
81
// @mixin hook-overlay(){}
82
// @mixin hook-overlay-icon(){}
83
// @mixin hook-overlay-default(){}
84
// @mixin hook-overlay-primary(){}
85
// @mixin hook-overlay-misc(){}
(41-41/66)