Skip to content

Commit

Permalink
style(KtFieldToggle*/KtFieldRadioGroup): update hover/active/focus st…
Browse files Browse the repository at this point in the history 
…ates

make individual items focusable via tab
  • Loading branch information
@Isokaeder
Isokaeder committed Feb 26, 2025
1 parent 87409fd commit 640ffa1
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 119 deletions.
44 changes: 39 additions & 5 deletions packages/kotti-ui/source/kotti-field-radio-group/KtFieldRadioGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,24 @@
}"
:data-test="optionDataTest(option)"
>
<input
v-bind="inputProps(option, index)"
@change="onChange(option.value)"
/>
<div
class="kt-field-radio-group__radio"
:class="{
'kt-field-radio-group__radio--checked':
field.currentValue === option.value,
'kt-field-radio-group__radio--is-disabled':
field.isDisabled || Boolean(option.isDisabled),
}"
>
<div class="kt-field-radio-group__radio-inside" />
</div>
<slot name="header" :option="option">
<div v-text="option.label" />
</slot>
<input
v-bind="inputProps(option, index)"
@change="onChange(option.value)"
/>
</label>
<FieldHelpText
v-if="option.tooltip"
Expand Down Expand Up @@ -191,7 +193,17 @@ export default defineComponent({
}
&__input {
display: none;
width: 0;
height: 0;
&:focus + .kt-field-radio-group__radio {
outline: 1px solid var(--primary-50);
outline-offset: 3px;
}
&:focus:not(:focus-visible) + .kt-field-radio-group__radio {
outline: none;
}
}
&__radio {
Expand All @@ -212,10 +224,32 @@ export default defineComponent({
// > (-var(--radio-size) * 0.5) Put it up half the height of the radio height
transform: translateY(calc(0.75em - var(--radio-size) * 0.5));
&:hover {
border-color: var(--interactive-01-hover);
}
&:active {
border-color: var(--interactive-01-active);
}
&--checked {
background-color: var(--interactive-01);
border-color: var(--interactive-01);
box-shadow: var(--shadow-base);
&:hover {
background-color: var(--interactive-01-hover);
border-color: var(--interactive-01-hover);
}
&:active {
background-color: var(--interactive-01-active);
border-color: var(--interactive-01-active);
}
}
&--is-disabled {
pointer-events: none;
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/kotti-ui/source/kotti-style/tokens.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
--text-05: var(--gray-30);
--interactive-01: var(--primary-60);
--interactive-01-hover: var(--primary-70);
--interactive-01-active: var(--primary-90);
--interactive-02: var(--gray-10);
--interactive-02-hover: var(--primary-10);
--interactive-03: var(--primary-50);
Expand Down
176 changes: 83 additions & 93 deletions packages/kotti-ui/source/shared-components/toggle-inner/ToggleBox.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,29 @@
<template>
<div class="kt-field-toggle-box">
<div class="kt-field-toggle-box__inner">
<svg
<svg
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<rect
class="kt-field-toggle-box__empty"
height="15"
rx="0.5"
width="15"
x="0.5"
y="0.5"
/>
<path
class="kt-field-toggle-box__indeterminate"
d="M15 0H1C0.45 0 0 0.45 0 1V15C0 15.55 0.45 16 1 16H15C15.55 16 16 15.55 16 15V1C16 0.45 15.55 0 15 0ZM12 9H4C3.45 9 3 8.55 3 8C3 7.45 3.45 7 4 7H12C12.55 7 13 7.45 13 8C13 8.55 12.55 9 12 9Z"
/>
<path
class="kt-field-toggle-box__check"
fill="none"
height="8"
viewBox="0 0 9 8"
width="9"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 3.92761L2.92242 6L8 1"
stroke-linecap="round"
stroke-width="2"
/>
</svg>
</div>
d="M15 0H1C0.45 0 0 0.45 0 1V15C0 15.55 0.45 16 1 16H15C15.55 16 16 15.55 16 15V1C16 0.45 15.55 0 15 0ZM12.71 5.71L6.5 11.92L3.29 8.71C2.9 8.32 2.9 7.69 3.29 7.3C3.68 6.91 4.31 6.91 4.7 7.3L6.49 9.09L11.28 4.3C11.67 3.91 12.3 3.91 12.69 4.3C13.08 4.69 13.08 5.32 12.69 5.71H12.71Z"
/>
</svg>
</div>
</template>

Expand All @@ -30,20 +38,14 @@ export default defineComponent({
<style lang="scss">
@import '../../kotti-field/mixins';
@mixin toggle-colors($border-color, $shadow-main, $background-color) {
border-color: $border-color;
box-shadow:
var(--shadow-base),
0 0 0 1px $shadow-main inset;
.kt-field-toggle-box__check {
path {
stroke: var(--interactive-02);
}
@mixin toggle-colors($fill-color) {
.kt-field-toggle-box__empty {
stroke: $fill-color;
}
.kt-field-toggle-box__inner {
background-color: $background-color;
.kt-field-toggle-box__check,
.kt-field-toggle-box__indeterminate {
fill: $fill-color;
}
}
Expand All @@ -55,11 +57,11 @@ export default defineComponent({
width: 0.8rem;
height: 0.8rem;
background: var(--ui-background);
border: 1px solid var(--ui-02);
border-radius: var(--toggle-border-radius);
border: 1px solid transparent;
transition: border-color ease-in-out var(--transition-short);
&__check {
&__check,
&__indetermiate {
transition: all ease-in-out var(--transition-short);
}
Expand All @@ -72,66 +74,76 @@ export default defineComponent({
background-color: transparent;
transition: all ease-in-out var(--transition-short);
}
&:focus {
background-color: red;
}
}
.kt-field-toggle-inner {
&--is-indeterminate {
&--is-off {
.kt-field-toggle-box {
@include toggle-colors(
var(--interactive-01),
var(--interactive-01),
var(--interactive-04)
);
@include toggle-colors(var(--text-05));
&:hover {
@include toggle-colors(
var(--interactive-01-hover),
var(--interactive-01),
var(--interactive-01-hover)
);
@include toggle-colors(var(--interactive-01-hover));
}
&:active {
@include toggle-colors(var(--interactive-01-active));
}
&__check {
opacity: 0;
transform: scale(0);
}
&__indeterminate {
display: none;
}
}
}
&--is-off {
&--is-on {
.kt-field-toggle-box {
@include toggle-colors(var(--interactive-03));
&:hover {
@include toggle-colors(
var(--interactive-01-hover),
var(--interactive-01),
transparent
);
@include toggle-colors(var(--interactive-01-hover));
}
&:active {
@include toggle-colors(var(--interactive-01-active));
}
&__check {
opacity: 0;
transform: scale(0);
opacity: 1;
transform: scale(1);
}
&__indeterminate {
display: none;
}
}
}
&--is-on {
&--is-indeterminate {
.kt-field-toggle-box {
@include toggle-colors(
var(--interactive-01),
var(--interactive-01),
var(--interactive-03)
);
@include toggle-colors(var(--interactive-03));
&:hover {
@include toggle-colors(
var(--interactive-01-hover),
var(--interactive-01),
var(--interactive-01-hover)
);
@include toggle-colors(var(--interactive-01-hover));
}
&:active {
@include toggle-colors(var(--interactive-01-active));
}
&__check {
display: none;
}
&__indeterminate {
opacity: 1;
transform: scale(1);
}
Expand All @@ -145,55 +157,31 @@ export default defineComponent({
.kt-field-toggle-inner {
&--is-indeterminate:not(.kt-field-toggle-inner--is-disabled) {
.kt-field-toggle-box {
@include toggle-colors(
var(--support-#{$type}),
var(--support-#{$type}-light),
var(--support-#{$type}-light)
);
@include toggle-colors(var(--support-#{$type}-light));
&:hover {
@include toggle-colors(
var(--support-#{$type}),
var(--support-#{$type}-light),
var(--support-#{$type}-dark)
);
@include toggle-colors(var(--support-#{$type}-dark));
}
}
}
&--is-off:not(.kt-field-toggle-inner--is-disabled) {
.kt-field-toggle-box {
@include toggle-colors(
var(--support-#{$type}),
var(--support-#{$type}-light),
transparent
);
@include toggle-colors(transparent);
&:hover {
@include toggle-colors(
var(--support-#{$type}-dark),
var(--support-#{$type}-light),
transparent
);
@include toggle-colors(transparent);
}
}
}
&--is-on:not(.kt-field-toggle-inner--is-disabled) {
.kt-field-toggle-box {
/* stylelint-disable */
@include toggle-colors(
var(--support-#{$type}),
var(--support-#{$type}-light),
var(--support-#{$type})
);
@include toggle-colors(var(--support-#{$type}));
&:hover {
@include toggle-colors(
var(--support-#{$type}),
var(--support-#{$type}-light),
var(--support-#{$type}-dark)
);
@include toggle-colors(var(--support-#{$type}-dark));
}
}
}
Expand All @@ -206,15 +194,17 @@ export default defineComponent({
.kt-field-toggle-inner--is-disabled {
&.kt-field-toggle-inner {
&--is-indeterminate .kt-field-toggle-box {
@include toggle-colors(var(--ui-01), var(--ui-02), var(--ui-02));
@include toggle-colors(var(--text-05));
}
&--is-off .kt-field-toggle-box {
@include toggle-colors(var(--ui-02), var(--ui-01), transparent);
@include toggle-colors(var(--text-05));
background-color: var(--ui-01);
}
&--is-on .kt-field-toggle-box {
@include toggle-colors(var(--ui-02), var(--ui-01), var(--ui-02));
@include toggle-colors(var(--text-05));
}
}
}
Expand Down
Loading

0 comments on commit 640ffa1

Please sign in to comment.