61 lines
1.5 KiB
CSS
61 lines
1.5 KiB
CSS
@define-mixin border-l $width: var(--size-1), $style: solid,
|
|
$color: var(--color-surface-inverse) {
|
|
border-left: $width $style $color;
|
|
}
|
|
|
|
@define-mixin border-r $width: var(--size-1), $style: solid,
|
|
$color: var(--color-surface-inverse) {
|
|
border-right: $width $style $color;
|
|
}
|
|
|
|
@define-mixin border-t $width: var(--size-1), $style: solid,
|
|
$color: var(--color-surface-inverse) {
|
|
border-top: $width $style $color;
|
|
}
|
|
|
|
@define-mixin border-b $width: var(--size-1), $style: solid,
|
|
$color: var(--color-surface-inverse) {
|
|
border-bottom: $width $style $color;
|
|
}
|
|
|
|
@define-mixin border-x $width: var(--size-1), $style: solid,
|
|
$color: var(--color-surface-inverse) {
|
|
border-right: $width $style $color;
|
|
border-left: $width $style $color;
|
|
}
|
|
|
|
@define-mixin border-y $width: var(--size-1), $style: solid,
|
|
$color: var(--color-surface-inverse) {
|
|
border-top: $width $style $color;
|
|
border-bottom: $width $style $color;
|
|
}
|
|
|
|
@define-mixin rounded-top $radius {
|
|
border-top-left-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
}
|
|
|
|
@define-mixin rounded-bottom $radius {
|
|
border-bottom-right-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
}
|
|
|
|
@define-mixin rounded-left $radius {
|
|
border-top-left-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
}
|
|
|
|
@define-mixin rounded-right $radius {
|
|
border-top-left-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
}
|
|
|
|
@define-mixin circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@define-mixin focus-ring $width: 2px, $color: var(--color-focus-ring), $offset: 2px {
|
|
outline: $width solid $color;
|
|
outline-offset: $offset;
|
|
}
|