mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Merge pull request #155 from shoelace-style/91-design-tweaks-and-improvements
Fix component alignment
This commit is contained in:
Cory LaViska
@@ -176,79 +176,81 @@ layout: page
|
||||
## Tests
|
||||
|
||||
```html {.example}
|
||||
<wa-button size="medium" style="width: 100%;" caret>Medium</wa-button>
|
||||
<br /><br />
|
||||
<wa-select>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
</wa-select>
|
||||
<br /><br />
|
||||
<wa-input placeholder="Small" size="small">
|
||||
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
|
||||
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
Settings
|
||||
</wa-button>
|
||||
<br /><br />
|
||||
<wa-input placeholder="Medium" size="medium">
|
||||
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
|
||||
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button size="medium">
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
Settings
|
||||
</wa-button>
|
||||
<br /><br />
|
||||
<wa-input placeholder="Large" size="large">
|
||||
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
|
||||
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button size="large">
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
Settings
|
||||
</wa-button>
|
||||
<br /><br />
|
||||
<wa-button size="medium">
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
</wa-button>
|
||||
<br /><br />
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button appearance="outlined" variant="brand">Left</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Center</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button appearance="outlined" variant="success">Left</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Center</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button appearance="outlined">Left</wa-button>
|
||||
<wa-button appearance="outlined">Center</wa-button>
|
||||
<wa-button appearance="outlined">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button appearance="outlined" variant="warning">Left</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Center</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button appearance="outlined" variant="danger">Left</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Center</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Right</wa-button>
|
||||
</wa-button-group>
|
||||
<style>
|
||||
div.test-cases > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
div.alignment {
|
||||
background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
div.alignment::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - 0.5px);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="test-cases">
|
||||
<div class="alignment">
|
||||
<wa-switch size="small">OCBS</wa-switch>
|
||||
<wa-checkbox size="small">OCBS</wa-checkbox>
|
||||
<wa-radio value="1" size="small">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch>OCBS</wa-switch>
|
||||
<wa-checkbox>OCBS</wa-checkbox>
|
||||
<wa-radio value="1">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch size="large">OCBS</wa-switch>
|
||||
<wa-checkbox size="large">OCBS</wa-checkbox>
|
||||
<wa-radio value="1" size="large">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="small"></wa-input>
|
||||
<wa-select size="small" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="small"></wa-color-picker>
|
||||
<wa-button size="small">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="medium"></wa-input>
|
||||
<wa-select size="medium" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="medium"></wa-color-picker>
|
||||
<wa-button size="medium">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="large"></wa-input>
|
||||
<wa-select size="large" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="large"></wa-color-picker>
|
||||
<wa-button size="large">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-badge>OCBS</wa-badge>
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-range></wa-range>
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
<wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input label="AaBbCc" help-text="Lorem ipsum dolor"></wa-input>
|
||||
<wa-select label="AaBbCc" value="ocbs" multiple help-text="Lorem ipsum dolor">
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker label="AaBbCc" help-text="Lorem ipsum dolor"></wa-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -20,7 +20,7 @@ export default css`
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font: inherit;
|
||||
color: var(--wa-form-control-value-color);
|
||||
@@ -43,7 +43,7 @@ export default css`
|
||||
.checkbox__control {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--toggle-size);
|
||||
|
||||
@@ -268,6 +268,10 @@ export default css`
|
||||
* Color dropdown
|
||||
*/
|
||||
|
||||
.color-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.color-dropdown::part(panel) {
|
||||
max-height: none;
|
||||
background-color: var(--background-color);
|
||||
@@ -277,7 +281,7 @@ export default css`
|
||||
}
|
||||
|
||||
.color-dropdown__trigger {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@@ -337,16 +341,6 @@ export default css`
|
||||
|
||||
.form-control.form-control--has-label .form-control__label {
|
||||
cursor: pointer;
|
||||
padding-bottom: 0.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-control__input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.color-dropdown__container {
|
||||
margin: 0 1em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -21,7 +21,7 @@ export default css`
|
||||
}
|
||||
|
||||
.radio {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: top;
|
||||
font: inherit;
|
||||
color: var(--wa-form-control-value-color);
|
||||
@@ -42,7 +42,7 @@ export default css`
|
||||
}
|
||||
|
||||
.radio__checked-icon {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
fill: currentColor;
|
||||
width: var(--toggle-size);
|
||||
height: var(--toggle-size);
|
||||
@@ -52,7 +52,7 @@ export default css`
|
||||
.radio__control {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--toggle-size);
|
||||
|
||||
@@ -6,7 +6,7 @@ export default css`
|
||||
--thumb-gap: calc(var(--thumb-size) * 0.125);
|
||||
--thumb-shadow: initial;
|
||||
--thumb-size: calc(1rem * var(--wa-form-control-value-line-height));
|
||||
--tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 2.5);
|
||||
--tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 1.375);
|
||||
--track-color-active: var(--wa-color-neutral-fill-normal);
|
||||
--track-color-inactive: var(--wa-color-neutral-fill-normal);
|
||||
--track-active-offset: 0%;
|
||||
@@ -17,6 +17,9 @@ export default css`
|
||||
|
||||
.range {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: max(var(--thumb-size), var(--track-height));
|
||||
}
|
||||
|
||||
.range__control {
|
||||
@@ -176,7 +179,7 @@ export default css`
|
||||
|
||||
/* Tooltip on top */
|
||||
.range--tooltip-top .range__tooltip {
|
||||
top: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
|
||||
bottom: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
|
||||
}
|
||||
|
||||
.range--tooltip-top .range__tooltip:after {
|
||||
@@ -188,7 +191,7 @@ export default css`
|
||||
|
||||
/* Tooltip on bottom */
|
||||
.range--tooltip-bottom .range__tooltip {
|
||||
bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
|
||||
top: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
|
||||
}
|
||||
|
||||
.range--tooltip-bottom .range__tooltip:after {
|
||||
|
||||
@@ -44,7 +44,7 @@ import type { CSSResultGroup } from 'lit';
|
||||
* @cssproperty --thumb-gap - The visual gap between the edges of the thumb and the track.
|
||||
* @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb.
|
||||
* @cssproperty --thumb-size - The size of the thumb.
|
||||
* @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the track.
|
||||
* @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the thumb.
|
||||
* @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
|
||||
* @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
|
||||
* @cssproperty --track-height - The height of the track.
|
||||
|
||||
@@ -33,7 +33,7 @@ export default css`
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font: inherit;
|
||||
color: var(--wa-form-control-value-color);
|
||||
@@ -44,7 +44,7 @@ export default css`
|
||||
.switch__control {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--width);
|
||||
|
||||
Reference in New Issue
Block a user