140 lines
2.2 KiB
SCSS
140 lines
2.2 KiB
SCSS
@import "vars";
|
|
|
|
@mixin darkMode() {
|
|
@media (prefers-color-scheme: dark) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin surface($shadowStrength: 0) {
|
|
background-color: var(--surface);
|
|
color: var(--on-surface);
|
|
|
|
a {
|
|
color: var(--primary-on-surface);
|
|
|
|
&:hover {
|
|
color: var(--primary-light-on-surface);
|
|
}
|
|
}
|
|
|
|
:global(a) {
|
|
color: var(--primary-on-surface);
|
|
|
|
&:hover {
|
|
color: var(--primary-light-on-surface);
|
|
}
|
|
}
|
|
|
|
|
|
// Buttons
|
|
button, .button {
|
|
&:not(.bold) {
|
|
--background-color: var(--surface);
|
|
|
|
&:hover::after {
|
|
--background-color: var(--on-surface);
|
|
|
|
:global(&) {
|
|
--background-color: var(--on-surface);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// States modifiers
|
|
.primary:not(.bold) {
|
|
--color: var(--primary-on-surface);
|
|
--background-color: var(--surface);
|
|
}
|
|
.info:not(.bold) {
|
|
--color: var(--info-on-surface);
|
|
--background-color: var(--surface);
|
|
}
|
|
.success:not(.bold) {
|
|
--color: var(--success-on-surface);
|
|
--background-color: var(--surface);
|
|
}
|
|
.warning:not(.bold) {
|
|
--color: var(--warning-on-surface);
|
|
--background-color: var(--surface);
|
|
}
|
|
.error:not(.bold), .danger:not(.bold) {
|
|
--color: var(--error-on-surface);
|
|
--background-color: var(--surface);
|
|
}
|
|
|
|
@if ($shadowStrength > 0) {
|
|
box-shadow: 0 #{$shadowStrength}px #{$shadowStrength}px #00000045;
|
|
}
|
|
}
|
|
|
|
@mixin subsurface($shadowStrength: 0) {
|
|
@include surface($shadowStrength);
|
|
|
|
background-color: var(--subsurface);
|
|
color: var(--on-subsurface);
|
|
}
|
|
|
|
|
|
// --- Responsivity ---
|
|
@mixin mobile-le {
|
|
@media (max-width: $mobileThreshold - 1px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin mobile-ge {
|
|
@content;
|
|
}
|
|
|
|
@mixin medium-le {
|
|
@media (max-width: $desktopThreshold - 1px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin medium-ge {
|
|
@media (min-width: $mobileThreshold) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin large-le {
|
|
@content;
|
|
}
|
|
|
|
@mixin large-ge {
|
|
@media (min-width: $desktopThreshold) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
|
|
@include medium-ge {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
@include large-ge {
|
|
width: $desktopThreshold;
|
|
}
|
|
}
|
|
|
|
@mixin fake-hide {
|
|
width: 0.1px;
|
|
height: 0.1px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|