diff --git a/src/styles/applied.css b/src/styles/applied.css index db6b0cab4..75870f55d 100644 --- a/src/styles/applied.css +++ b/src/styles/applied.css @@ -2,7 +2,6 @@ @import url('native/content.css'); @import url('native/code.css'); @import url('native/forms.css'); -@import url('native/form-control.css'); @import url('native/button.css'); @import url('native/checkbox.css'); @import url('native/color-picker.css'); diff --git a/src/styles/native/form-control.css b/src/styles/native/form-control.css deleted file mode 100644 index 1e03a8888..000000000 --- a/src/styles/native/form-control.css +++ /dev/null @@ -1,12 +0,0 @@ -label { - display: inline-block; - color: var(--wa-form-control-label-color); - font-weight: var(--wa-form-control-label-font-weight); - line-height: var(--wa-form-control-label-line-height); - position: relative; -} - -label + :is(input:not([type='checkbox'], [type='radio']), textarea, select), -label > :is(input:not([type='checkbox'], [type='radio']), textarea, select) { - margin-block-start: var(--wa-space-xs); -} diff --git a/src/styles/native/forms.css b/src/styles/native/forms.css index 984ff2963..ecd53e1c0 100644 --- a/src/styles/native/forms.css +++ b/src/styles/native/forms.css @@ -1,3 +1,17 @@ +/* Labels */ +label { + display: inline-block; + color: var(--wa-form-control-label-color); + font-weight: var(--wa-form-control-label-font-weight); + line-height: var(--wa-form-control-label-line-height); + position: relative; +} + +label + :is(input:not([type='checkbox'], [type='radio']), textarea, select), +label > :is(input:not([type='checkbox'], [type='radio']), textarea, select) { + margin-block-start: var(--wa-space-xs); +} + /* Fieldsets */ fieldset { border: solid 1px var(--wa-color-surface-border); diff --git a/src/styles/native/slider.css b/src/styles/native/slider.css index ec84cf7ad..0ddcf254f 100644 --- a/src/styles/native/slider.css +++ b/src/styles/native/slider.css @@ -55,7 +55,6 @@ input[type='range'] { 0 0 0 var(--thumb-gap) var(--wa-color-surface-default); -webkit-appearance: none; margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2); - cursor: pointer; } &:enabled { @@ -64,6 +63,10 @@ input[type='range'] { outline-offset: var(--wa-focus-ring-offset); } + &::-webkit-slider-thumb { + cursor: pointer; + } + &::-webkit-slider-thumb:active { cursor: grabbing; } @@ -98,7 +101,6 @@ input[type='range'] { transition-property: background-color, border-color, box-shadow, color; transition-duration: var(--wa-transition-normal); transition-timing-function: var(--wa-transition-easing); - cursor: pointer; } &:enabled { @@ -107,19 +109,30 @@ input[type='range'] { outline-offset: var(--wa-focus-ring-offset); } + &::-moz-range-thumb { + cursor: pointer; + } + &::-moz-range-thumb:active { cursor: grabbing; } } +} - /* States */ +/* States */ +/* nesting these styles yields broken results in Safari */ - &:focus-visible { - outline: none; - } +input[type='range']:focus { + outline: none; +} - &:disabled { - opacity: 0.5; +:host :has(:disabled) input[type='range'], +input[type='range']:not(:host *):disabled { + opacity: 0.5; + cursor: not-allowed; + + &::-moz-range-thumb, + &::-webkit-slider-thumb { cursor: not-allowed; } } diff --git a/src/styles/shadow/form-control.css b/src/styles/shadow/form-control.css index c6dadbb95..5aff69722 100644 --- a/src/styles/shadow/form-control.css +++ b/src/styles/shadow/form-control.css @@ -1,5 +1,5 @@ /* Label */ -[part~='form-control-label'] { +:is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) { display: block; color: var(--wa-form-control-label-color); font-weight: var(--wa-form-control-label-font-weight); diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css index e7c81abc9..39b74b7eb 100644 --- a/src/styles/themes/default.css +++ b/src/styles/themes/default.css @@ -18,4 +18,5 @@ .wa-theme-default-dark, .wa-theme-default-dark :host { color-scheme: dark; + color: var(--wa-color-text-normal); }