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 radio styles and share with <wa-radio>

Browse Source
This commit is contained in:
lindsaym-fa
2024-12-19 01:43:56 -05:00
parent 491533e09c
commit 197aedcc70
4 changed files with 5 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/docs/essentials/input.md
View File

@@ -54,20 +54,9 @@ wa-code-demo::part(preview) {
<label><input type="checkbox"> Input (checkbox)</label>
<wa-checkbox>WA Checkbox</wa-checkbox>
<fieldset>
<legend>Radio Group:</legend>
<label><input type="radio" name="radio" value="radio-1" checked> Radio 1</label>
<label><input type="radio"name="radio" value="radio-2" /> Radio 2</label>
<label><input type="radio" name="radio" value="radio-3" /> Radio 3</label>
</fieldset>
<label><input type="radio" name="radio" value="radio-1" checked>Radio</label>
<fieldset>
<wa-radio-group label="WA Radio Group:" name="wa-radio" value="radio-1">
<wa-radio value="radio-1">Radio</wa-radio>
<wa-radio value="radio-2">Radio</wa-radio>
<wa-radio value="radio-3">Radio</wa-radio>
</wa-radio-group>
</fieldset>
<wa-radio value="radio-1">WA Radio</wa-radio>
```
## Color picker

74
src/components/radio/radio.css
View File

@@ -1,18 +1,3 @@
:host {
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--background-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--wa-form-control-activated-color);
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-form-control-activated-color);
--checked-icon-scale: 0.75;
--toggle-size: calc(1em * var(--wa-form-control-value-line-height));
display: inline-block;
}
:host(:focus-visible) {
outline: none;
}
@@ -21,7 +6,6 @@
display: flex;
align-items: top;
font: inherit;
color: var(--wa-form-control-value-color);
vertical-align: middle;
cursor: pointer;
}
@@ -34,65 +18,7 @@
scale: var(--checked-icon-scale);
}
.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-style: var(--border-style);
border-width: var(--border-width);
border-radius: 50%;
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: transparent;
transition:
background var(--wa-transition-normal) var(--wa-transition-easing),
border-color var(--wa-transition-normal) var(--wa-transition-easing),
box-shadow var(--wa-transition-normal) var(--wa-transition-easing),
color var(--wa-transition-normal) var(--wa-transition-easing);
}
.input {
position: absolute;
opacity: 0;
padding: 0;
margin: 0;
pointer-events: none;
}
/* Checked */
.radio--checked .control {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background-color: var(--background-color-checked);
}
/* Checked + focus */
:host(:focus-visible) .control {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Disabled */
[part='radio']:has(:disabled) {
opacity: 0.5;
cursor: not-allowed;
}
/* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
.radio:not(.radio--checked) svg circle {
opacity: 0;
}
.label {
display: inline-block;
color: var(--wa-form-control-value-color);
line-height: var(--toggle-size);
margin-inline-start: 0.5em;
user-select: none;
-webkit-user-select: none;
}

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

@@ -5,6 +5,7 @@ import { WaBlurEvent } from '../../events/blur.js';
import { WaFocusEvent } from '../../events/focus.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import nativeStyles from '../../styles/native/radio.css';
import sizeStyles from '../../styles/utilities/size.css';
import '../icon/icon.js';
import styles from './radio.css';
@@ -43,7 +44,7 @@ import styles from './radio.css';
*/
@customElement('wa-radio')
export default class WaRadio extends WebAwesomeFormAssociatedElement {
static shadowStyle = [sizeStyles, styles];
static shadowStyle = [sizeStyles, nativeStyles, styles];
@state() checked = false;

1
src/styles/applied.css
View File

@@ -10,6 +10,7 @@
@import url('native/tables.css');
@import url('native/blockquote.css');
@import url('native/dialog.css');
@import url('native/radio.css');
@import url('native/slider.css');
/* Web Awesome components */