diff options
Diffstat (limited to 'scss/uikit/components/inverse.scss')
| -rw-r--r-- | scss/uikit/components/inverse.scss | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/scss/uikit/components/inverse.scss b/scss/uikit/components/inverse.scss new file mode 100644 index 00000000..c1b0c07c --- /dev/null +++ b/scss/uikit/components/inverse.scss @@ -0,0 +1,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(){}
\ No newline at end of file |