anki/sass/base.scss

99 lines
1.7 KiB
SCSS

@use "vars" as *;
@use "root-vars";
@use "button-mixins" as button;
@use "sass/scrollbar";
$body-color: color(fg);
$body-bg: color(canvas);
$link-hover-color: color(fg-link);
$link-hover-decoration: none;
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
);
@import "bootstrap/scss/bootstrap-reboot";
@import "bootstrap/scss/bootstrap-utilities";
/* Bootstrap "extensions" */
.flex-basis-100 {
flex-basis: 100%;
}
.flex-basis-75 {
flex-basis: 75%;
}
html,
body {
height: 100%;
}
html {
overscroll-behavior: none;
}
body {
overflow-x: hidden;
&:not(.isMac),
&:not(.isMac) * {
@include scrollbar.custom;
}
&.reduce-motion,
&.reduce-motion *:not(.no-reduce-motion) {
transition: none !important;
animation: none !important;
}
&.no-blur * {
backdrop-filter: none !important;
}
&:not(.fancy),
&:not(.fancy) * {
box-shadow: none !important;
backdrop-filter: none !important;
}
}
button {
/* override transition for instant hover response */
transition: color var(--transition) ease-in-out, box-shadow var(--transition) ease-in-out !important;
border-radius: prop(border-radius);
@include button.base;
}
pre,
code,
kbd,
samp {
unicode-bidi: normal !important;
}
.reduce-motion * {
transition: none !important;
animation: none !important;
}
label,
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
input[type="text"] {
border-radius: prop(border-radius);
outline: none;
border: 1px solid color(border);
&:focus {
border-color: color(border-focus);
}
}