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 color picker and range alignment

Browse Source
This commit is contained in:
lindsaym-fa
2024-07-03 17:32:43 -04:00
parent 76e55f840a
commit 7474a80ff9
3 changed files with 67 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -177,7 +177,11 @@ layout: page
```html {.example}
<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;
@@ -186,41 +190,65 @@ layout: page
div.alignment::after {
content: '';
position: absolute;
top: calc(50% - 1px);
top: calc(50% - 0.5px);
width: 100%;
height: 2px;
height: 1px;
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 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>
</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>
<wa-range style="--track-height: 2rem; --thumb-size: 1.5rem; --track-color-active: slateblue;"></wa-range>
</div>
```

12
src/components/color-picker/color-picker.styles.ts
View File

@@ -277,7 +277,7 @@ export default css`
}
.color-dropdown__trigger {
display: inline-block;
display: block;
position: relative;
background-color: transparent;
border: none;
@@ -337,16 +337,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;
}
`;

8
src/components/range/range.styles.ts
View File

@@ -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: var(--wa-tooltip-arrow-size);
--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,8 @@ export default css`
/* Tooltip on top */
.range--tooltip-top .range__tooltip {
top: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
/*top: calc(-1 * var(--thumb-size) - (var(--wa-tooltip-arrow-size) * 1.5) - var(--tooltip-offset));*/
top: calc(-1 * (var(--thumb-size) * 0.5) - var(--tooltip-offset));
}
.range--tooltip-top .range__tooltip:after {