mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-11-28 13:26:16 +03:00
Style: Checkbox indeterminate state
Make it so that the indeterminate state of the checkbox matches the selected style
This commit is contained in:
estib
parent
5a3d788927
commit
d3c1ed8ed4
@ -49,6 +49,7 @@
|
||||
small
|
||||
{checked}
|
||||
{indeterminate}
|
||||
style={indeterminate ? 'neutral' : 'default'}
|
||||
onchange={(e: Event & { currentTarget: EventTarget & HTMLInputElement; }) => {
|
||||
const isChecked = e.currentTarget.checked;
|
||||
if (isChecked) {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts" module>
|
||||
export type CheckboxStyle = 'default' | 'blue' | 'neutral';
|
||||
export interface CheckboxProps {
|
||||
name?: string;
|
||||
small?: boolean;
|
||||
@ -6,6 +7,7 @@
|
||||
checked?: boolean;
|
||||
value?: string;
|
||||
indeterminate?: boolean;
|
||||
style?: CheckboxStyle;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
onchange?: (
|
||||
e: Event & {
|
||||
@ -25,6 +27,7 @@
|
||||
checked = $bindable(),
|
||||
value = '',
|
||||
indeterminate = false,
|
||||
style = 'default',
|
||||
onclick,
|
||||
onchange
|
||||
}: CheckboxProps = $props();
|
||||
@ -46,7 +49,7 @@
|
||||
onchange?.(e);
|
||||
}}
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
class={`checkbox ${style}`}
|
||||
class:small
|
||||
{value}
|
||||
id={name}
|
||||
@ -90,23 +93,19 @@
|
||||
border-color: none;
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background-color: var(--clr-bg-2);
|
||||
/* indeterminate */
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: var(--clr-scale-ntrl-30);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&:indeterminate::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* checked */
|
||||
&:checked {
|
||||
&.default:indeterminate {
|
||||
background-color: var(--clr-theme-pop-element);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-element);
|
||||
|
||||
@ -114,6 +113,38 @@
|
||||
background-color: var(--clr-theme-pop-element-hover);
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.neutral:indeterminate {
|
||||
background-color: var(--clr-bg-2);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-bg-3);
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--clr-scale-ntrl-30);
|
||||
}
|
||||
}
|
||||
|
||||
&.blue:indeterminate {
|
||||
background-color: var(--clr-diff-selected-checkbox);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-diff-selected-checkbox);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-diff-selected-checkbox-hover);
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
/* checked */
|
||||
&:checked {
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
@ -127,6 +158,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.default:checked {
|
||||
background-color: var(--clr-theme-pop-element);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-theme-pop-element);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-theme-pop-element-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.neutral:checked {
|
||||
background-color: var(--clr-bg-2);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-scale-ntrl-30);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-bg-3);
|
||||
}
|
||||
}
|
||||
|
||||
&.blue:checked {
|
||||
background-color: var(--clr-diff-selected-checkbox);
|
||||
box-shadow: inset 0 0 0 1px var(--clr-diff-selected-checkbox);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-diff-selected-checkbox-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
@ -293,7 +293,7 @@
|
||||
},
|
||||
"50": {
|
||||
"$type": "color",
|
||||
"$value": "#48a8a3",
|
||||
"$value": "#3cb4ae",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -309,7 +309,7 @@
|
||||
},
|
||||
"60": {
|
||||
"$type": "color",
|
||||
"$value": "#97cecb",
|
||||
"$value": "#8fd6d2",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -325,7 +325,7 @@
|
||||
},
|
||||
"70": {
|
||||
"$type": "color",
|
||||
"$value": "#c6e7e5",
|
||||
"$value": "#c1ebe9",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -341,7 +341,7 @@
|
||||
},
|
||||
"80": {
|
||||
"$type": "color",
|
||||
"$value": "#daf1f0",
|
||||
"$value": "#d7f4f2",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -357,7 +357,7 @@
|
||||
},
|
||||
"90": {
|
||||
"$type": "color",
|
||||
"$value": "#e9f7f6",
|
||||
"$value": "#e7f8f7",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -373,7 +373,7 @@
|
||||
},
|
||||
"95": {
|
||||
"$type": "color",
|
||||
"$value": "#f4fbfa",
|
||||
"$value": "#f3fcfb",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -859,7 +859,7 @@
|
||||
},
|
||||
"70": {
|
||||
"$type": "color",
|
||||
"$value": "#bef4da",
|
||||
"$value": "#c2f0da",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -875,7 +875,7 @@
|
||||
},
|
||||
"80": {
|
||||
"$type": "color",
|
||||
"$value": "#d0f7e5",
|
||||
"$value": "#d2f4e4",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -891,7 +891,7 @@
|
||||
},
|
||||
"90": {
|
||||
"$type": "color",
|
||||
"$value": "#e5faf0",
|
||||
"$value": "#e7f9f0",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {},
|
||||
@ -3652,12 +3652,12 @@
|
||||
"selected": {
|
||||
"count-bg": {
|
||||
"$type": "color",
|
||||
"$value": "#378bf2",
|
||||
"$value": "#e1eeff",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {
|
||||
"light": "#378bf2",
|
||||
"dark": "#044289"
|
||||
"light": "#e1eeff",
|
||||
"dark": "#133161"
|
||||
},
|
||||
"figma": {
|
||||
"variableId": "VariableID:3935:251",
|
||||
@ -3671,12 +3671,12 @@
|
||||
},
|
||||
"count-border": {
|
||||
"$type": "color",
|
||||
"$value": "#265dd4",
|
||||
"$value": "#9dc3f5",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {
|
||||
"light": "#265dd4",
|
||||
"dark": "#005cc5"
|
||||
"light": "#9dc3f5",
|
||||
"dark": "#2464ae"
|
||||
},
|
||||
"figma": {
|
||||
"variableId": "VariableID:3935:253",
|
||||
@ -3690,12 +3690,12 @@
|
||||
},
|
||||
"count-text": {
|
||||
"$type": "color",
|
||||
"$value": "#ffffff",
|
||||
"$value": "#6187dc",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {
|
||||
"light": "#ffffff",
|
||||
"dark": "#d6e8ff"
|
||||
"light": "#6187dc",
|
||||
"dark": "#6aaeff"
|
||||
},
|
||||
"figma": {
|
||||
"variableId": "VariableID:3935:254",
|
||||
@ -3706,6 +3706,44 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"checkbox": {
|
||||
"$type": "color",
|
||||
"$value": "#378bf2",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {
|
||||
"light": "#378bf2",
|
||||
"dark": "#2581f3"
|
||||
},
|
||||
"figma": {
|
||||
"variableId": "VariableID:4469:4018",
|
||||
"collection": {
|
||||
"id": "VariableCollectionId:8:1868",
|
||||
"name": "clr",
|
||||
"defaultModeId": "8:5"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"checkbox-hover": {
|
||||
"$type": "color",
|
||||
"$value": "#196dd4",
|
||||
"$description": "",
|
||||
"$extensions": {
|
||||
"mode": {
|
||||
"light": "#196dd4",
|
||||
"dark": "#1165cc"
|
||||
},
|
||||
"figma": {
|
||||
"variableId": "VariableID:4499:8368",
|
||||
"collection": {
|
||||
"id": "VariableCollectionId:8:1868",
|
||||
"name": "clr",
|
||||
"defaultModeId": "8:5"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"count-text": {
|
||||
@ -4137,7 +4175,7 @@
|
||||
"useDTCGKeys": true,
|
||||
"colorMode": "hex",
|
||||
"variableCollections": ["clr-core", "clr", "size", "radius"],
|
||||
"createdAt": "2024-08-31T23:16:13.487Z"
|
||||
"createdAt": "2024-09-10T12:38:43.089Z"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,12 +21,12 @@
|
||||
--clr-core-pop-20: color(srgb 0.10980392156862745 0.32941176470588235 0.3176470588235294);
|
||||
--clr-core-pop-30: color(srgb 0.1450980392156863 0.43529411764705883 0.4196078431372549);
|
||||
--clr-core-pop-40: color(srgb 0.16470588235294117 0.5725490196078431 0.5529411764705883);
|
||||
--clr-core-pop-50: color(srgb 0.2823529411764706 0.6588235294117647 0.6392156862745098);
|
||||
--clr-core-pop-60: color(srgb 0.592156862745098 0.807843137254902 0.796078431372549);
|
||||
--clr-core-pop-70: color(srgb 0.7764705882352941 0.9058823529411765 0.8980392156862745);
|
||||
--clr-core-pop-80: color(srgb 0.8549019607843137 0.9450980392156862 0.9411764705882353);
|
||||
--clr-core-pop-90: color(srgb 0.9137254901960784 0.9686274509803922 0.9647058823529412);
|
||||
--clr-core-pop-95: color(srgb 0.9568627450980393 0.984313725490196 0.9803921568627451);
|
||||
--clr-core-pop-50: color(srgb 0.23529411764705882 0.7058823529411765 0.6823529411764706);
|
||||
--clr-core-pop-60: color(srgb 0.5607843137254902 0.8392156862745098 0.8235294117647058);
|
||||
--clr-core-pop-70: color(srgb 0.7568627450980392 0.9215686274509803 0.9137254901960784);
|
||||
--clr-core-pop-80: color(srgb 0.8431372549019608 0.9568627450980393 0.9490196078431372);
|
||||
--clr-core-pop-90: color(srgb 0.9058823529411765 0.9725490196078431 0.9686274509803922);
|
||||
--clr-core-pop-95: color(srgb 0.9529411764705882 0.9882352941176471 0.984313725490196);
|
||||
--clr-core-err-5: color(srgb 0.14901960784313725 0.050980392156862744 0.058823529411764705);
|
||||
--clr-core-err-10: color(srgb 0.2980392156862745 0.10196078431372549 0.12156862745098039);
|
||||
--clr-core-err-20: color(srgb 0.4196078431372549 0.1411764705882353 0.16862745098039217);
|
||||
@ -56,9 +56,9 @@
|
||||
--clr-core-succ-40: color(srgb 0.23529411764705882 0.6039215686274509 0.43529411764705883);
|
||||
--clr-core-succ-50: color(srgb 0.2901960784313726 0.7098039215686275 0.5098039215686274);
|
||||
--clr-core-succ-60: color(srgb 0.5725490196078431 0.8666666666666667 0.7294117647058823);
|
||||
--clr-core-succ-70: color(srgb 0.7450980392156863 0.9568627450980393 0.8549019607843137);
|
||||
--clr-core-succ-80: color(srgb 0.8156862745098039 0.9686274509803922 0.8980392156862745);
|
||||
--clr-core-succ-90: color(srgb 0.8980392156862745 0.9803921568627451 0.9411764705882353);
|
||||
--clr-core-succ-70: color(srgb 0.7607843137254902 0.9411764705882353 0.8549019607843137);
|
||||
--clr-core-succ-80: color(srgb 0.8235294117647058 0.9568627450980393 0.8941176470588236);
|
||||
--clr-core-succ-90: color(srgb 0.9058823529411765 0.9764705882352941 0.9411764705882353);
|
||||
--clr-core-succ-95: color(srgb 0.9647058823529412 0.9882352941176471 0.984313725490196);
|
||||
--clr-core-purp-5: color(srgb 0.1568627450980392 0.11372549019607843 0.26666666666666666);
|
||||
--clr-core-purp-10: color(srgb 0.24705882352941178 0.17254901960784313 0.40784313725490196);
|
||||
@ -203,13 +203,19 @@
|
||||
--clr-diff-line-bg: var(--clr-bg-1);
|
||||
--clr-diff-count-bg: color(srgb 0.9686274509803922 0.9686274509803922 0.9647058823529412);
|
||||
--clr-diff-count-border: var(--clr-border-2);
|
||||
--clr-diff-selected-count-bg: color(
|
||||
--clr-diff-selected-count-bg: color(srgb 0.8823529411764706 0.9333333333333333 1);
|
||||
--clr-diff-selected-count-border: color(
|
||||
srgb 0.615686274509804 0.7647058823529411 0.9607843137254902
|
||||
);
|
||||
--clr-diff-selected-count-text: color(
|
||||
srgb 0.3803921568627451 0.5294117647058824 0.8627450980392157
|
||||
);
|
||||
--clr-diff-selected-checkbox: color(
|
||||
srgb 0.21568627450980393 0.5450980392156862 0.9490196078431372
|
||||
);
|
||||
--clr-diff-selected-count-border: color(
|
||||
srgb 0.14901960784313725 0.36470588235294116 0.8313725490196079
|
||||
--clr-diff-selected-checkbox-hover: color(
|
||||
srgb 0.09803921568627451 0.42745098039215684 0.8313725490196079
|
||||
);
|
||||
--clr-diff-selected-count-text: color(srgb 1 1 1);
|
||||
--clr-diff-count-text: var(--clr-text-3);
|
||||
--clr-diff-deletion-line-bg: color(srgb 1 0.9411764705882353 0.9490196078431372);
|
||||
--clr-diff-deletion-line-highlight: color(
|
||||
@ -386,10 +392,16 @@
|
||||
--clr-diff-count-bg: color(srgb 0.18823529411764706 0.17254901960784313 0.16862745098039217);
|
||||
--clr-diff-count-border: var(--clr-border-2);
|
||||
--clr-diff-selected-count-bg: color(
|
||||
srgb 0.01568627450980392 0.25882352941176473 0.5372549019607843
|
||||
srgb 0.07450980392156863 0.19215686274509805 0.3803921568627451
|
||||
);
|
||||
--clr-diff-selected-count-border: color(srgb 0 0.3607843137254902 0.7725490196078432);
|
||||
--clr-diff-selected-count-text: color(srgb 0.8392156862745098 0.9098039215686274 1);
|
||||
--clr-diff-selected-count-border: color(
|
||||
srgb 0.1411764705882353 0.39215686274509803 0.6823529411764706
|
||||
);
|
||||
--clr-diff-selected-count-text: color(srgb 0.41568627450980394 0.6823529411764706 1);
|
||||
--clr-diff-selected-checkbox: color(
|
||||
srgb 0.1450980392156863 0.5058823529411764 0.9529411764705882
|
||||
);
|
||||
--clr-diff-selected-checkbox-hover: color(srgb 0.06666666666666667 0.396078431372549 0.8);
|
||||
--clr-diff-count-text: var(--clr-text-3);
|
||||
--clr-diff-deletion-line-bg: color(
|
||||
srgb 0.23529411764705882 0.07450980392156863 0.10588235294117647
|
||||
|
||||
Loading…
Reference in New Issue
Block a user