gnousdoteu-v3/static/stylesheets/sass/uikit_fix.scss

154 lines
No EOL
3.6 KiB
SCSS

@import "variables";
@mixin render_theme($theme) {
.uk-offcanvas {
.uk-nav > li > a {
&.active {
color: map_get(map_get($themes, $theme), 'primary');
}
}
}
.uk-logo img {
height: 38px;
border-radius: 50%;
}
.uk-button, .uk-input {
border: none;
color: map_get(map_get($themes, $theme), 'primary-text');
text-transform: none;
border-radius: 5px;
text-decoration: none;
background-color: map_get(map_get($themes, $theme), 'primary');
box-shadow: map_get(map_get($themes, $theme), 'shadow');
font-weight: bolder;
}
.uk-button-link {
color: lighten(map_get(map_get($themes, $theme), 'primary-text'), 20%);
font-weight: bolder;
text-decoration: underline;
}
.uk-card {
border-radius: 5px;
box-shadow: map_get(map_get($themes, $theme), 'shadow');
.uk-card-header {
border-bottom: 1px solid darken(map_get(map_get($themes, $theme), 'primary'), 10%)
}
.uk-card-footer {
border-top: 1px solid darken(map_get(map_get($themes, $theme), 'primary'), 10%)
}
.uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.uk-border-circle {
box-shadow: map_get(map_get($themes, $theme), 'shadow');
}
@for $i from 1 through 6 {
.uk-h#{$i}, h#{$i} {
color: map_get(map_get($themes, $theme), 'primary-text-h')
}
}
@for $i from 10 through 100 {
@if $i % 10 == 0 {
.min-height-#{$i}vh {
min-height: #{$i}vh;
}
.max-height-#{$i}vh {
max-height: #{$i}vh;
}
.min-width-#{$i}vw {
max-width: #{$i}vw;
}
.max-width-#{$i}vw {
max-width: #{$i}vw;
}
}
}
.uk-switch {
position: relative;
display: inline-block;
height: 24px;
width: 42px;
input {
display: none;
}
}
.uk-switch-slider {
background-color: rgba(0, 0, 0, 0.22);
position: absolute;
top: 0;
left: 0;
right: 0;
border-radius: 500px;
bottom: 0;
cursor: pointer;
transition-property: background-color;
transition-duration: .05s;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
&:before {
content: '';
background-color: #fff;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
bottom: 2px;
border-radius: 50%;
transition-property: transform, box-shadow;
transition-duration: .05s;
}
}
input:checked + .uk-switch-slider {
background-color: #39f !important;
}
input:checked + .uk-switch-slider:before {
transform: translateX(18px);
}
.uk-switch-slider.uk-switch-on-off {
background-color: #f0506e;
}
input:checked + .uk-switch-slider.uk-switch-on-off {
background-color: #32d296 !important;
}
.uk-switch-slider.uk-switch-big:before {
transform: scale(1.2);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}
.uk-switch-slider.uk-switch-small:before {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}
input:checked + .uk-switch-slider.uk-switch-big:before {
transform: translateX(18px) scale(1.2);
}
}
html[data-theme="dark"] {
@include render_theme('dark')
}
html[data-theme="light"] {
@include render_theme('light')
}