js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add native checkbox styles and share with <wa-checkbox>

Browse Source
This commit is contained in:
lindsaym-fa
2024-12-18 14:09:09 -05:00
parent fa415005eb
commit c8db30fa0f
5 changed files with 103 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/checkbox/checkbox.css
View File

@@ -1,76 +1,9 @@
:host {
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--wa-form-control-activated-color);
--border-radius: min(
calc(var(--toggle-size) * 0.375),
var(--wa-border-radius-xs)
); /* min so it doesn't look like a circle/radio */
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-color-brand-on-loud);
--toggle-size: calc(1em * var(--wa-form-control-value-line-height));
display: inline-block;
}
[part~='base'] {
position: relative;
display: flex;
align-items: flex-start;
color: var(--wa-form-control-value-color);
vertical-align: middle;
cursor: pointer;
/* Disabled */
&:has(input:disabled) {
opacity: 0.5;
cursor: not-allowed;
}
}
.control {
flex: 0 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--wa-form-control-value-color);
transition:
background var(--wa-transition-normal),
border-color var(--wa-transition-fast),
box-shadow var(--wa-transition-fast),
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
/* Focus */
&:has(> input:focus-visible:not(:checked, :disabled)) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Checked/indeterminate */
&:has(:checked, :indeterminate) {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background-color: var(--background-color-checked);
}
/* Checked/indeterminate + focus */
&:has(> input:focus-visible:is(:checked, :indeterminate):not(:disabled)) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
}
input {
@@ -94,7 +27,6 @@ input {
[part~='label'] {
display: inline-block;
line-height: var(--toggle-size);
margin-inline-start: var(--wa-space-xs);
user-select: none;
-webkit-user-select: none;
}

3
src/components/checkbox/checkbox.ts
View File

@@ -12,6 +12,7 @@ import { HasSlotController } from '../../internal/slot.js';
import { RequiredValidator } from '../../internal/validators/required-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import nativeStyles from '../../styles/native/checkbox.css';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/utilities/size.css';
import '../icon/icon.js';
@@ -59,7 +60,7 @@ import styles from './checkbox.css';
*/
@customElement('wa-checkbox')
export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
static shadowStyle = [formControlStyles, sizeStyles, styles];
static shadowStyle = [formControlStyles, sizeStyles, nativeStyles, styles];
static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };

1
src/styles/native.css
View File

@@ -1,3 +1,4 @@
@import url('./native/button.css');
@import url('./native/checkbox.css');
@import url('./native/form-control.css');
@import url('./native/input.css');

93
src/styles/native/checkbox.css Normal file
View File

@@ -0,0 +1,93 @@
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)),
label:has(input[type='checkbox']):where(:not(:host *, .wa-off, .wa-off-deep *)),
:host {
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--wa-form-control-activated-color);
--border-radius: min(
calc(var(--toggle-size) * 0.375),
var(--wa-border-radius-xs)
); /* min prevents entirely circular checkbox */
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-color-brand-on-loud);
--toggle-size: 1lh;
display: inline-flex;
line-height: var(--wa-form-control-value-line-height);
}
/* Replace native checkbox styles */
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)) {
appearance: none;
margin: 0;
&:checked::after {
background-color: currentColor;
content: '';
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
center no-repeat;
position: absolute;
height: 100%;
width: 100%;
}
}
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)),
:host .control {
flex: 0 0 auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--wa-form-control-value-color);
transition:
background var(--wa-transition-normal),
border-color var(--wa-transition-fast),
box-shadow var(--wa-transition-fast),
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
margin-inline-end: var(--wa-space-xs);
}
/* Set cursor for input and labels */
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)),
label:has(input[type='checkbox']):where(:not(:host *, .wa-off, .wa-off-deep *)),
input[type='checkbox']:where(:not(:host *, .wa-off, .wa-off-deep *)) + label,
:host [part~='base'] {
cursor: pointer;
}
/* Checked */
input[type='checkbox']:is(:checked, :indeterminate):where(:not(:host *, .wa-off, .wa-off-deep *)),
[part~='base'] .control:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background-color: var(--background-color-checked);
}
/* Focus */
input[type='checkbox']:focus-visible:where(:not(:host *, .wa-off, .wa-off-deep *)),
[part~='base'] .control:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Disabled */
input[type='checkbox']:disabled:where(:not(:host *, .wa-off, .wa-off-deep *)),
label:has(input[type='checkbox']:disabled):where(:not(:host *, .wa-off, .wa-off-deep *)),
:host [part~='base']:has(input:disabled) {
opacity: 0.5;
cursor: not-allowed;
}

8
src/styles/native/form-control.css
View File

@@ -6,7 +6,13 @@ label {
margin-bottom: var(--wa-space-xs);
}
label:has(+ input:required)::after {
input:is([type='checkbox'], [type='radio']) + label,
label:has(input:is([type='checkbox'], [type='radio'])) {
margin-bottom: 0;
}
label:has(+ input:required)::after,
label:has(input:required)::after {
content: var(--wa-form-control-required-content);
margin-inline-start: var(--wa-form-control-required-content-offset);
color: var(--wa-form-control-required-content-color);