60 lines
1.6 KiB
CSS
60 lines
1.6 KiB
CSS
:root {
|
|
/** Light Background */
|
|
--shadow-small: -2px -2px 5px rgba(255, 255, 255, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.07);
|
|
--shadow-medium: -5px -5px 15px rgba(255, 255, 255, 0.6), 5px 5px 15px rgba(0, 0, 0, 0.07);
|
|
--shadow-large: -15px -15px 20px rgba(255, 255, 255, 0.6), 15px 15px 20px rgba(0, 0, 0, 0.07);
|
|
/** Dark Background*/
|
|
--shadow-small-dark: -2px -2px 5px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
--shadow-medium-dark: -5px -5px 15px rgba(255, 255, 255, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.3);
|
|
--shadow-large-dark: -15px -15px 20px rgba(255, 255, 255, 0.05), 15px 15px 20px rgba(0, 0, 0, 0.3);
|
|
/** Modifiers */
|
|
--shadow-inset: inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(0, 0, 0, 0.1);
|
|
--shadow-default: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark {
|
|
--shadow-small: var(--shadow-small-dark);
|
|
--shadow-medium: var(--shadow-medium-dark);
|
|
--shadow-large: var(--shadow-large-dark);
|
|
}
|
|
|
|
.uk-box-shadow-small {
|
|
box-shadow: var(--shadow-small);
|
|
}
|
|
|
|
.uk-box-shadow-medium {
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.uk-box-shadow-large {
|
|
box-shadow: var(--shadow-large);
|
|
}
|
|
|
|
.uk-box-shadow-default {
|
|
box-shadow: var(--shadow-default);
|
|
}
|
|
|
|
.uk-box-shadow-hover-small:hover {
|
|
box-shadow: var(--shadow-small);
|
|
}
|
|
|
|
.uk-box-shadow-hover-medium:hover {
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.uk-box-shadow-hover-large:hover {
|
|
box-shadow: var(--shadow-large);
|
|
}
|
|
|
|
.uk-box-shadow-default-hover:hover {
|
|
box-shadow: var(--shadow-default);
|
|
}
|
|
|
|
.uk-box-shadow-inner {
|
|
box-shadow: var(--shadow-inset);
|
|
}
|
|
|
|
.uk-box-no-shadow {
|
|
box-shadow: none;
|
|
}
|