102 lines
2.0 KiB
SCSS
102 lines
2.0 KiB
SCSS
.hover\:bg-passive-3:hover {
|
|
background-color: var(--sn-stylekit-passive-color-3);
|
|
}
|
|
|
|
.hover\:brightness-130:hover {
|
|
filter: brightness(130%);
|
|
}
|
|
|
|
.focus\:brightness-130:focus {
|
|
filter: brightness(130%);
|
|
}
|
|
|
|
.hover\:bg-highlight:hover {
|
|
background-color: var(--sn-stylekit-passive-color-5);
|
|
}
|
|
|
|
.focus\:bg-highlight:focus {
|
|
background-color: var(--sn-stylekit-passive-color-5);
|
|
}
|
|
|
|
.hover\:bg-contrast:hover {
|
|
@extend .bg-contrast;
|
|
}
|
|
|
|
.hover\:bg-info-dark:hover {
|
|
@extend .bg-info-dark;
|
|
}
|
|
.focus\:bg-info-dark:focus {
|
|
@extend .bg-info-dark;
|
|
}
|
|
|
|
.focus\:padded-ring-info:focus {
|
|
box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
|
|
}
|
|
|
|
.focus\:border-bottom:focus {
|
|
border-bottom: 2px solid var(--sn-stylekit-info-color);
|
|
}
|
|
|
|
.focus-within\:padded-ring-info:focus-within {
|
|
box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color);
|
|
}
|
|
|
|
.focus-within\:border-background:focus-within {
|
|
border-color: var(--sn-stylekit-background-color);
|
|
}
|
|
|
|
.box-shadow,
|
|
.box-shadow:focus,
|
|
.box-shadow:focus-within {
|
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.focus\:bg-contrast:focus {
|
|
@extend .bg-contrast;
|
|
}
|
|
|
|
.hover\:color-text:hover {
|
|
@extend .color-text;
|
|
}
|
|
|
|
.focus\:color-text:focus {
|
|
@extend .color-text;
|
|
}
|
|
|
|
.hover\:bg-secondary-contrast:hover {
|
|
@extend .bg-secondary-contrast;
|
|
}
|
|
|
|
.focus\:bg-secondary-contrast:focus {
|
|
@extend .bg-secondary-contrast;
|
|
}
|
|
|
|
.focus\:inner-ring-info:focus {
|
|
@extend .inner-ring-info;
|
|
}
|
|
|
|
.focus\:ring-info:focus {
|
|
@extend .ring-info;
|
|
}
|
|
|
|
.focus-within\:ring-info:focus-within {
|
|
@extend .ring-info;
|
|
}
|
|
|
|
/**
|
|
* Do not use these rules without explicitly handling focus in a different
|
|
* way, otherwise keyboard focus will break.
|
|
*/
|
|
.focus\:outline-none:focus {
|
|
outline: none;
|
|
}
|
|
.focus\:shadow-none:focus {
|
|
box-shadow: none;
|
|
}
|
|
.focus-within\:outline-none:focus-within {
|
|
outline: none;
|
|
}
|
|
.focus-within\:shadow-none:focus-within {
|
|
box-shadow: none;
|
|
}
|