blob: c1b0c07c786f4148be3e4499b2d1ca96b0998d79 (
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
|
// Name: Inverse
// Description: Inverse component style for light or dark backgrounds
//
// Component: `uk-light`
// `uk-dark`
//
// ========================================================================
// Variables
// ========================================================================
$inverse-global-color-mode: light !default;
$inverse-global-color: rgba($global-inverse-color, 0.7) !default;
$inverse-global-emphasis-color: $global-inverse-color !default;
$inverse-global-muted-color: rgba($global-inverse-color, 0.5) !default;
$inverse-global-inverse-color: $global-color !default;
$inverse-global-primary-background: $global-inverse-color !default;
$inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
$inverse-global-border: rgba($global-inverse-color, 0.2) !default;
/* ========================================================================
Component: Inverse
========================================================================== */
/*
* Implemented class depends on the general theme color
* `uk-light` is for light colors on dark backgrounds
* `uk-dark` is or dark colors on light backgrounds
*/
@if ($inverse-global-color-mode == light) { .uk-light { @if(mixin-exists(hook-inverse)) {@include hook-inverse();}}}
@if ($inverse-global-color-mode == dark) { .uk-dark { @if(mixin-exists(hook-inverse)) {@include hook-inverse();}}}
// Hooks
// ========================================================================
// @mixin hook-inverse(){}
|
