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

progress on vertical alignment of inline-block elements

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-27 17:50:03 -04:00
parent c8e534de0b
commit 76e55f840a
4 changed files with 54 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
docs/docs/experimental/sandbox.md
View File

@@ -176,79 +176,51 @@ 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.alignment {
position: relative;
display: flex;
gap: 1rem;
align-items: center;
}
div.alignment::after {
content: '';
position: absolute;
top: calc(50% - 1px);
width: 100%;
height: 2px;
background-color: red;
}
</style>
<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>
<wa-button size="small">OCBS</wa-button>
</div>
<div class="alignment">
<wa-switch>OCBS</wa-switch>
<wa-checkbox>OCBS</wa-checkbox>
<wa-radio value="1">OCBS</wa-radio>
<wa-button>OCBS</wa-button>
</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>
<wa-button size="large">OCBS</wa-button>
</div>
<div class="alignment">
<wa-input size="small"></wa-input>
<wa-button size="small">OCBS</wa-button>
</div>
<div class="alignment">
<wa-badge>OCBS</wa-badge>
<wa-button>OCBS</wa-button>
<wa-avatar style="--size: var(--wa-form-control-height-m)"></wa-avatar>
</div>
<div class="alignment">
<wa-badge size="large">OCBS</wa-badge>
<wa-button size="large">OCBS</wa-button>
</div>
```

4
src/components/checkbox/checkbox.styles.ts
View File

@@ -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);

6
src/components/radio/radio.styles.ts
View File

@@ -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);

4
src/components/switch/switch.styles.ts
View File

@@ -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);