145 lines
3.1 KiB
SCSS
145 lines
3.1 KiB
SCSS
@use '../../styles/settings';
|
|
@use '../../styles/tools';
|
|
@use './variables' as *;
|
|
|
|
@include tools.layer('components') {
|
|
.v-icon-btn {
|
|
@include tools.border($icon-btn-border...);
|
|
@include tools.rounded($icon-btn-border-radius);
|
|
@include tools.states('.v-icon-btn__overlay');
|
|
@include tools.variant($icon-btn-variants...);
|
|
|
|
& {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
flex: none;
|
|
font-size: $icon-btn-font-size;
|
|
font-weight: $icon-btn-font-weight;
|
|
line-height: $icon-btn-line-height;
|
|
height: #{$icon-btn-height};
|
|
justify-content: center;
|
|
outline: none;
|
|
position: relative;
|
|
transition-property: width, height, transform;
|
|
transition: 0.2s settings.$standard-easing;
|
|
vertical-align: middle;
|
|
width: #{$icon-btn-width};
|
|
|
|
@supports selector(:focus-visible) {
|
|
&::after {
|
|
pointer-events: none;
|
|
border: 2px solid currentColor;
|
|
border-radius: inherit;
|
|
opacity: 0;
|
|
transition: opacity .2s ease-in-out;
|
|
@include tools.absolute(true);
|
|
}
|
|
|
|
&:focus-visible::after {
|
|
opacity: calc(.25 * var(--v-theme-overlay-multiplier));
|
|
}
|
|
}
|
|
}
|
|
|
|
&--disabled,
|
|
&--loading,
|
|
&--readonly {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&--disabled {
|
|
opacity: $icon-btn-disabled-opacity;
|
|
}
|
|
|
|
&--start {
|
|
margin-inline-end: $icon-btn-margin-start;
|
|
}
|
|
|
|
&--end {
|
|
margin-inline-start: $icon-btn-margin-end;
|
|
}
|
|
}
|
|
|
|
.v-icon-btn__content {
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: inline-flex;
|
|
transition: inherit;
|
|
transition-property: transform;
|
|
transform: rotate(var(--v-icon-btn-rotate, 0deg));
|
|
|
|
.v-icon-btn--loading & {
|
|
opacity: 0;
|
|
}
|
|
|
|
.v-icon {
|
|
transition: 0.2s settings.$standard-easing;
|
|
transition-property: opacity, font-size, width, height;
|
|
transform-origin: center;
|
|
}
|
|
}
|
|
|
|
.v-icon-btn__loader {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.v-icon-btn__overlay,
|
|
.v-icon-btn__underlay {
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
|
|
@include tools.absolute();
|
|
}
|
|
|
|
.v-icon-btn__overlay {
|
|
background-color: currentColor;
|
|
opacity: 0;
|
|
transition: opacity .2s ease-in-out;
|
|
|
|
.v-icon-btn--active:not(:hover) & {
|
|
--v-activated-opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include tools.layer('trumps') {
|
|
@media (forced-colors: active) {
|
|
.v-icon-btn {
|
|
&:focus-visible {
|
|
outline: 2px solid;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&:not(&--active):hover,
|
|
&:not(&--active):focus {
|
|
color: highlight;
|
|
}
|
|
|
|
&--active:not(&--disabled),
|
|
&--active:not(&--disabled)[class*="bg-"] {
|
|
outline-color: canvastext;
|
|
background: highlight;
|
|
color: highlighttext;
|
|
}
|
|
|
|
&--disabled {
|
|
color: graytext;
|
|
}
|
|
|
|
&__overlay,
|
|
&__underlay,
|
|
.v-icon {
|
|
forced-color-adjust: preserve-parent-color;
|
|
}
|
|
}
|
|
}
|
|
}
|