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

input, textarea, and more button styles

Browse Source
This commit is contained in:
Cory LaViska
2023-09-06 12:32:57 -04:00
parent 2c053b6fd3
commit 67bfbed308
4 changed files with 109 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/button/button.styles.ts
View File

@@ -167,7 +167,7 @@ export default css`
.button--outline {
background: none;
border: solid 1px;
border: solid max(1px, var(--wa-form-controls-border-width));
}
/* Brand */
@@ -206,6 +206,18 @@ export default css`
border-color: color-mix(in oklch, var(--wa-color-success-element-fill-vivid), black 6%);
}
.button--outline.button--small {
line-height: calc(var(--wa-form-controls-height-s) - max(1px, var(--wa-form-controls-border-width)) * 2);
}
.button--outline.button--medium {
line-height: calc(var(--wa-form-controls-height-m) - max(1px, var(--wa-form-controls-border-width)) * 2);
}
.button--outline.button--large {
line-height: calc(var(--wa-form-controls-height-l) - max(1px, var(--wa-form-controls-border-width)) * 2);
}
/* Neutral */
.button--outline.button--neutral {
border-color: var(--wa-color-neutral-element-outline-vivid);
@@ -290,20 +302,23 @@ export default css`
*/
.button--small {
height: auto;
height: var(--wa-form-controls-height-s);
font-size: var(--wa-font-size-s);
line-height: var(--wa-form-controls-height-s);
border-radius: var(--wa-corners-1x);
}
.button--medium {
height: auto;
height: var(--wa-form-controls-height-m);
font-size: var(--wa-font-size-m);
line-height: var(--wa-form-controls-height-m);
border-radius: var(--wa-corners-1x);
}
.button--large {
height: auto;
height: var(--wa-form-controls-height-l);
font-size: var(--wa-font-size-l);
line-height: var(--wa-form-controls-height-l);
border-radius: var(--wa-corners-1x);
}
@@ -385,15 +400,15 @@ export default css`
*/
.button--has-label.button--small .button__label {
padding: var(--wa-space-xs) var(--wa-space-m);
padding: 0 var(--wa-space-s);
}
.button--has-label.button--medium .button__label {
padding: var(--wa-space-s) var(--wa-space-l);
padding: 0 var(--wa-space-m);
}
.button--has-label.button--large .button__label {
padding: var(--wa-space-m) var(--wa-space-xl);
padding: 0 var(--wa-space-l);
}
.button--has-prefix.button--small {

140
src/components/input/input.styles.ts
View File

@@ -17,83 +17,59 @@ export default css`
justify-content: start;
position: relative;
width: 100%;
font-family: var(--sl-input-font-family);
font-weight: var(--sl-input-font-weight);
letter-spacing: var(--sl-input-letter-spacing);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
vertical-align: middle;
overflow: hidden;
cursor: text;
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
var(--sl-transition-fast) background-color;
transition: var(--wa-transition-fast) color, var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
}
/* Standard inputs */
.input--standard {
background-color: var(--sl-input-background-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
}
.input--standard:hover:not(.input--disabled) {
background-color: var(--sl-input-background-color-hover);
border-color: var(--sl-input-border-color-hover);
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-color-resting);
}
.input--standard.input--focused:not(.input--disabled) {
background-color: var(--sl-input-background-color-focus);
border-color: var(--sl-input-border-color-focus);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
}
.input--standard.input--focused:not(.input--disabled) .input__control {
color: var(--sl-input-color-focus);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
border-color: var(--wa-form-controls-color-activated);
}
.input--standard.input--disabled {
background-color: var(--sl-input-background-color-disabled);
border-color: var(--sl-input-border-color-disabled);
opacity: 0.5;
cursor: not-allowed;
}
.input--standard.input--disabled .input__control {
color: var(--sl-input-color-disabled);
}
.input--standard.input--disabled .input__control::placeholder {
color: var(--sl-input-placeholder-color-disabled);
}
/* Filled inputs */
.input--filled {
border: none;
background-color: var(--sl-input-filled-background-color);
color: var(--sl-input-color);
}
.input--filled:hover:not(.input--disabled) {
background-color: var(--sl-input-filled-background-color-hover);
background-color: var(--wa-color-neutral-container-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.input--filled.input--focused:not(.input--disabled) {
background-color: var(--sl-input-filled-background-color-focus);
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: 0;
}
.input--filled.input--disabled {
background-color: var(--sl-input-filled-background-color-disabled);
opacity: 0.5;
cursor: not-allowed;
}
.input__control {
flex: 1 1 auto;
min-width: 0;
height: 100%;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
min-width: 0;
height: 100%;
color: var(--sl-input-color);
line-height: var(----wa-form-controls-font-line-height);
color: var(--wa-form-controls-color-text);
border: none;
background: inherit;
box-shadow: none;
@@ -114,27 +90,23 @@ export default css`
.input__control:-webkit-autofill:hover,
.input__control:-webkit-autofill:focus,
.input__control:-webkit-autofill:active {
box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
-webkit-text-fill-color: var(--sl-color-primary-500);
caret-color: var(--sl-input-color);
box-shadow: none;
-webkit-text-fill-color: var(--wa-color-brand-text-on-muted);
caret-color: var(--wa-form-controls-color-text);
}
.input--filled .input__control:-webkit-autofill,
.input--filled .input__control:-webkit-autofill:hover,
.input--filled .input__control:-webkit-autofill:focus,
.input--filled .input__control:-webkit-autofill:active {
box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-filled-background-color) inset !important;
box-shadow: none;
}
.input__control::placeholder {
color: var(--sl-input-placeholder-color);
color: var(--wa-form-controls-placeholder-color);
user-select: none;
}
.input:hover:not(.input--disabled) .input__control {
color: var(--sl-input-color-hover);
}
.input__control:focus {
outline: none;
}
@@ -149,7 +121,7 @@ export default css`
.input__prefix ::slotted(sl-icon),
.input__suffix ::slotted(sl-icon) {
color: var(--sl-input-icon-color);
color: var(--wa-color-neutral-text-on-surface);
}
/*
@@ -157,75 +129,75 @@ export default css`
*/
.input--small {
border-radius: var(--sl-input-border-radius-small);
font-size: var(--sl-input-font-size-small);
height: var(--sl-input-height-small);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-s);
height: var(--wa-form-controls-height-s);
}
.input--small .input__control {
height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
padding: 0 var(--sl-input-spacing-small);
height: calc(var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) * 2);
padding: 0 var(--wa-space-s);
}
.input--small .input__clear,
.input--small .input__password-toggle {
width: calc(1em + var(--sl-input-spacing-small) * 2);
width: calc(1em + var(--wa-space-s) * 2);
}
.input--small .input__prefix ::slotted(*) {
margin-inline-start: var(--sl-input-spacing-small);
margin-inline-start: var(--wa-space-s);
}
.input--small .input__suffix ::slotted(*) {
margin-inline-end: var(--sl-input-spacing-small);
margin-inline-end: var(--wa-space-s);
}
.input--medium {
border-radius: var(--sl-input-border-radius-medium);
font-size: var(--sl-input-font-size-medium);
height: var(--sl-input-height-medium);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-m);
height: var(--wa-form-controls-height-m);
}
.input--medium .input__control {
height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
padding: 0 var(--sl-input-spacing-medium);
height: calc(var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) * 2);
padding: 0 var(--wa-space-m);
}
.input--medium .input__clear,
.input--medium .input__password-toggle {
width: calc(1em + var(--sl-input-spacing-medium) * 2);
width: calc(1em + var(--wa-space-m) * 2);
}
.input--medium .input__prefix ::slotted(*) {
margin-inline-start: var(--sl-input-spacing-medium);
margin-inline-start: var(--wa-space-m);
}
.input--medium .input__suffix ::slotted(*) {
margin-inline-end: var(--sl-input-spacing-medium);
margin-inline-end: var(--wa-space-m);
}
.input--large {
border-radius: var(--sl-input-border-radius-large);
font-size: var(--sl-input-font-size-large);
height: var(--sl-input-height-large);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-l);
height: var(--wa-form-controls-height-l);
}
.input--large .input__control {
height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
padding: 0 var(--sl-input-spacing-large);
height: calc(var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) * 2);
padding: 0 var(--wa-space-l);
}
.input--large .input__clear,
.input--large .input__password-toggle {
width: calc(1em + var(--sl-input-spacing-large) * 2);
width: calc(1em + var(--wa-space-l) * 2);
}
.input--large .input__prefix ::slotted(*) {
margin-inline-start: var(--sl-input-spacing-large);
margin-inline-start: var(--wa-space-l);
}
.input--large .input__suffix ::slotted(*) {
margin-inline-end: var(--sl-input-spacing-large);
margin-inline-end: var(--wa-space-l);
}
/*
@@ -233,15 +205,15 @@ export default css`
*/
.input--pill.input--small {
border-radius: var(--sl-input-height-small);
border-radius: var(--wa-corners-pill);
}
.input--pill.input--medium {
border-radius: var(--sl-input-height-medium);
border-radius: var(--wa-corners-pill);
}
.input--pill.input--large {
border-radius: var(--sl-input-height-large);
border-radius: var(--wa-corners-pill);
}
/*
@@ -258,17 +230,17 @@ export default css`
align-items: center;
justify-content: center;
font-size: inherit;
color: var(--sl-input-icon-color);
color: var(--wa-form-controls-color-activated);
border: none;
background: none;
padding: 0;
transition: var(--sl-transition-fast) color;
transition: var(--wa-transition-fast) color;
cursor: pointer;
}
.input__clear:hover,
.input__password-toggle:hover {
color: var(--sl-input-icon-color-hover);
.input__clear:active,
.input__password-toggle:active {
color: color-mix(in oklch, currentColor, black 12%);
}
.input__clear:focus,

82
src/components/textarea/textarea.styles.ts
View File

@@ -15,75 +15,47 @@ export default css`
align-items: center;
position: relative;
width: 100%;
font-family: var(--sl-input-font-family);
font-weight: var(--sl-input-font-weight);
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-input-letter-spacing);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-form-controls-color-text);
line-height: var(--wa-form-controls-font-line-height);
vertical-align: middle;
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
var(--sl-transition-fast) background-color;
transition: var(--wa-transition-fast) color, var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
cursor: text;
}
/* Standard textareas */
.textarea--standard {
background-color: var(--sl-input-background-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
}
.textarea--standard:hover:not(.textarea--disabled) {
background-color: var(--sl-input-background-color-hover);
border-color: var(--sl-input-border-color-hover);
}
.textarea--standard:hover:not(.textarea--disabled) .textarea__control {
color: var(--sl-input-color-hover);
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-color-resting);
}
.textarea--standard.textarea--focused:not(.textarea--disabled) {
background-color: var(--sl-input-background-color-focus);
border-color: var(--sl-input-border-color-focus);
color: var(--sl-input-color-focus);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
}
.textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
color: var(--sl-input-color-focus);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
border-color: var(--wa-form-controls-color-activated);
}
.textarea--standard.textarea--disabled {
background-color: var(--sl-input-background-color-disabled);
border-color: var(--sl-input-border-color-disabled);
opacity: 0.5;
cursor: not-allowed;
}
.textarea--standard.textarea--disabled .textarea__control {
color: var(--sl-input-color-disabled);
}
.textarea--standard.textarea--disabled .textarea__control::placeholder {
color: var(--sl-input-placeholder-color-disabled);
}
/* Filled textareas */
.textarea--filled {
border: none;
background-color: var(--sl-input-filled-background-color);
color: var(--sl-input-color);
}
.textarea--filled:hover:not(.textarea--disabled) {
background-color: var(--sl-input-filled-background-color-hover);
background-color: var(--wa-color-neutral-container-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.textarea--filled.textarea--focused:not(.textarea--disabled) {
background-color: var(--sl-input-filled-background-color-focus);
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: 0;
}
.textarea--filled.textarea--disabled {
background-color: var(--sl-input-filled-background-color-disabled);
opacity: 0.5;
cursor: not-allowed;
}
@@ -94,7 +66,7 @@ export default css`
font-size: inherit;
font-weight: inherit;
line-height: 1.4;
color: var(--sl-input-color);
color: var(--wa-form-controls-color-text);
border: none;
background: none;
box-shadow: none;
@@ -110,7 +82,7 @@ export default css`
}
.textarea__control::placeholder {
color: var(--sl-input-placeholder-color);
color: var(--wa-form-controls-placeholder-color);
user-select: none;
}
@@ -123,30 +95,30 @@ export default css`
*/
.textarea--small {
border-radius: var(--sl-input-border-radius-small);
font-size: var(--sl-input-font-size-small);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-s);
}
.textarea--small .textarea__control {
padding: 0.5em var(--sl-input-spacing-small);
padding: 0.5em var(--wa-space-s);
}
.textarea--medium {
border-radius: var(--sl-input-border-radius-medium);
font-size: var(--sl-input-font-size-medium);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-m);
}
.textarea--medium .textarea__control {
padding: 0.5em var(--sl-input-spacing-medium);
padding: 0.5em var(--wa-space-m);
}
.textarea--large {
border-radius: var(--sl-input-border-radius-large);
font-size: var(--sl-input-font-size-large);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-l);
}
.textarea--large .textarea__control {
padding: 0.5em var(--sl-input-spacing-large);
padding: 0.5em var(--wa-space-l);
}
/*

4
src/themes/default.css
View File

@@ -263,11 +263,15 @@
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-corners: var(--wa-corners-1x);
--wa-form-controls-color-text: var(--wa-color-neutral-text-on-surface);
--wa-form-controls-color-resting: var(--wa-color-neutral-element-outline-muted);
--wa-form-controls-color-activated: var(--wa-color-brand-action-vivid);
--wa-form-controls-font-line-height: var(--wa-font-height-compact);
--wa-form-controls-padding: var(--wa-space-square-s);
--wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
--wa-form-controls-height-s: 2rem;
--wa-form-controls-height-m: 2.75rem;
--wa-form-controls-height-l: 3.5rem;
/**
* From 2.x