Skip to content

Commit

Permalink
feat(ld-select): visual modes and customization options
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed Jul 8, 2021
1 parent 4e9acfd commit 4c7f3b0
Show file tree
Hide file tree
Showing 18 changed files with 886 additions and 160 deletions.
12 changes: 10 additions & 2 deletions src/docs/components/docs-example/docs-example.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
.docs-example__tools {
stroke: var(--ld-col-rblck-default);

.ld-button {
.ld-button,
.ld-select__btn-trigger {
filter: none;
}
}
Expand All @@ -29,8 +30,15 @@
.docs-example__tools {
stroke: var(--ld-col-wht);

.ld-button {
.ld-button,
.ld-select__btn-trigger {
filter: invert(1) hue-rotate(180deg);

&:focus:focus-visible:not(:active) {
.ld-icon {
filter: invert(1) hue-rotate(180deg);
}
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/docs/components/docs-main/docs-main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@
--ld-typo-code-m: 1rem / 160% 'Source Code Pro', Consolas, Monaco,
'Ubuntu Mono', monospace;
padding: var(--ld-sp-24) var(--ld-sp-40) var(--ld-sp-40);
min-width: 20rem;

main {
> header,
Expand Down
234 changes: 227 additions & 7 deletions src/docs/components/docs-pick-theme/docs-pick-theme.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,232 @@
.docs-pick-theme__fieldset {
display: grid;
grid-auto-flow: column;
gap: var(--ld-sp-8);
border: 0;
padding: 0 var(--ld-sp-4);
}

.docs-pick-theme .ld-select__btn-trigger-text,
.docs-pick-theme__option .ld-option__label {
text-transform: capitalize;
.docs-pick-theme__icon {
width: var(--ld-sp-24);
height: var(--ld-sp-24);
}

.docs-pick-theme {
.ld-select {
min-height: 0;
}

.ld-select__btn-trigger {
padding: var(--ld-sp-8);
}

.ld-select__btn-trigger-text {
display: none;
}
}

.docs-pick-theme__popper.ld-select__popper {
.ld-select__scroll-container {
border-top: 0;
}
}

.docs-pick-theme__option-pattern-wrapper {
position: absolute;
left: 0.1rem;
right: 0.1rem;
top: 0.1rem;
bottom: 0.1rem;
border-radius: var(--ld-br-m);
}

.docs-pick-theme__option-pattern {
position: absolute;
transform: translateX(50%);
}

.docs-pick-theme__option.ld-option {
color: var(--ld-col-wht);
font-weight: bold;
overflow: hidden;

&:not(:last-of-type) {
border: 0;
}

.ld-option__check {
color: var(--ld-col-wht);
}

&:focus:focus-visible {
.docs-pick-theme__option-pattern-wrapper {
overflow: hidden;
}
}

&.ld-theme-ocean {
background-color: var(--ld-thm-ocean-bg-primary);

@media (hover: hover) {
&:hover {
background-color: var(--ld-col-rb-hover);

.docs-pick-theme__option-pattern {
color: var(--ld-col-vc-hover);
}
}
}
&:focus:focus-visible {
background-color: var(--ld-col-rb-focus);
color: var(--ld-col-rb6);

.ld-option__check {
color: var(--ld-col-rb6);
}

.docs-pick-theme__option-pattern {
color: var(--ld-col-vc-focus);
}
}
&:active,
&:active:focus-visible {
background-color: var(--ld-col-rb-active);
}

.docs-pick-theme__option-pattern {
color: var(--ld-thm-ocean-accent);
}
}

&.ld-theme-bubblegum {
background-color: var(--ld-thm-bubblegum-bg-primary);

@media (hover: hover) {
&:hover {
background-color: var(--ld-col-rp-hover);

.docs-pick-theme__option-pattern {
color: var(--ld-col-vc-hover);
}
}
}
&:focus:focus-visible {
background-color: var(--ld-col-rp-focus);
color: var(--ld-col-rp6);

.ld-option__check {
color: var(--ld-col-rp6);
}

.docs-pick-theme__option-pattern {
color: var(--ld-col-vc-focus);
}
}
&:active,
&:active:focus-visible {
background-color: var(--ld-col-rp-active);
}

.docs-pick-theme__option-pattern {
color: var(--ld-thm-bubblegum-accent);
}
}

&.ld-theme-shake {
background-color: var(--ld-thm-shake-bg-primary);

@media (hover: hover) {
&:hover {
background-color: var(--ld-col-rp-hover);

.docs-pick-theme__option-pattern {
color: var(--ld-col-vm-hover);
}
}
}
&:focus:focus-visible {
background-color: var(--ld-col-rp-focus);
color: var(--ld-col-rp6);

.ld-option__check {
color: var(--ld-col-rp6);
}

.docs-pick-theme__option-pattern {
color: var(--ld-col-vm-focus);
}
}
&:active,
&:active:focus-visible {
background-color: var(--ld-col-rp-active);
}

.docs-pick-theme__option-pattern {
color: var(--ld-thm-shake-accent);
}
}

&.ld-theme-solvent {
background-color: var(--ld-thm-solvent-bg-primary);

@media (hover: hover) {
&:hover {
background-color: var(--ld-col-rp-hover);

.docs-pick-theme__option-pattern {
color: var(--ld-col-vg-hover);
}
}
}
&:focus:focus-visible {
background-color: var(--ld-col-rp-focus);
color: var(--ld-col-rp6);

.ld-option__check {
color: var(--ld-col-rp6);
}

.docs-pick-theme__option-pattern {
color: var(--ld-col-vg-focus);
}
}
&:active,
&:active:focus-visible {
background-color: var(--ld-col-rp-active);
}

.docs-pick-theme__option-pattern {
color: var(--ld-thm-solvent-accent);
}
}

&.ld-theme-tea {
background-color: var(--ld-thm-tea-bg-primary);

@media (hover: hover) {
&:hover {
background-color: var(--ld-col-rg-hover);

.docs-pick-theme__option-pattern {
color: var(--ld-col-vg-hover);
}
}
}
&:focus:focus-visible {
background-color: var(--ld-col-rg-focus);
color: var(--ld-col-rg6);

.ld-option__check {
color: var(--ld-col-rg6);
}

.docs-pick-theme__option-pattern {
color: var(--ld-col-vg-focus);
}
}
&:active,
&:active:focus-visible {
background-color: var(--ld-col-rg-active);
}

.docs-pick-theme__option-pattern {
color: var(--ld-thm-tea-accent);
}
}
}
77 changes: 58 additions & 19 deletions src/docs/components/docs-pick-theme/docs-pick-theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@ export class DocsPickTheme {
]

render() {
let cl = 'docs-pick-theme'
cl += ` ld-theme-${this.currentTheme.toLowerCase()}`

return (
<Host class="docs-pick-theme">
<Host class={cl}>
<form>
<fieldset class="docs-pick-theme__fieldset">
<ld-sr-only>
Expand All @@ -40,32 +43,68 @@ export class DocsPickTheme {
class="docs-pick-theme__select"
onInput={this.handleChange.bind(this)}
preventDeselection
mode="ghost"
tetherOptions={JSON.stringify({
attachment: 'top right',
targetAttachment: 'bottom right',
offset: '-2px -8px',
})}
popperClass="docs-pick-theme__popper"
>
{this.themes.map((theme) => (
<ld-option
value={theme.toLowerCase()}
class="docs-pick-theme__option"
class={`docs-pick-theme__option ld-theme-${theme.toLowerCase()}`}
selected={theme === this.currentTheme}
>
{theme.toLowerCase()}
{theme.charAt(0).toUpperCase() + theme.slice(1).toLowerCase()}

<span
role="presentation"
class="docs-pick-theme__option-pattern-wrapper"
>
<svg
class="docs-pick-theme__option-pattern"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 108 95"
>
<path
fill="currentColor"
d="M6.65 25.4C.2 29.83.77 30.9.22 34-.32 37.13.3 67.55.3 67.55c-.18 5.02.22 7.99 3.63 9.76l29.49 15.75c3.45 1.81 9.19 2.1 12.75.65l56.66-22.47a8.02 8.02 0 004.68-9.33L98.8 30.47c-1.01-3.69-4.68-8.17-8.13-9.87L51.26.9C47.8-.82 42.71 0 39.98 2.72L6.65 25.41z"
/>
</svg>
</span>
</ld-option>
// <label
// class={`docs-pick-theme__label docs-pick-theme__label--${theme.toLowerCase()}${
// this.currentTheme === theme
// ? ' docs-pick-theme__label--checked'
// : ''
// }`}
// >
// <ld-sr-only>{theme.toLowerCase()}</ld-sr-only>
// <input
// onInput={(event) => this.handleChange(event)}
// type="radio"
// name="theme"
// value={theme}
// checked={this.currentTheme === theme}
// />
// </label>
))}
<span slot="icon">
<ld-icon>
<svg
class="docs-pick-theme__icon"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 32 32"
>
<path
fill="currentColor"
stroke="currentColor"
d="M9 20l-.7-.7a1 1 0 00-.3.7h1zm3.5 3.5v1a1 1 0 00.7-.3l-.7-.7zm9-9l.7.7a1 1 0 000-1.4l-.7.7zM18 11l.7-.7a1 1 0 00-1.4 0l.7.7zM8 20v2.5h2V20H8zm2 4.5h2.5v-2H10v2zm3.2-.3l9-9-1.4-1.4-9 9 1.4 1.4zm9-10.4l-3.5-3.5-1.4 1.4 3.5 3.5 1.4-1.4zm-4.9-3.5l-9 9 1.4 1.4 9-9-1.4-1.4zM8 22.5c0 1.1.9 2 2 2v-2H8z"
/>
<path
fill="currentColor"
stroke="currentColor"
d="M17.58 10.33L19.92 8a2 2 0 012.83 0l1.79 1.79a2 2 0 010 2.83l-2.35 2.34-4.61-4.62zM9 23v-4l4 4H9z"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M23 16l-6.5-6.5"
/>
</svg>
</ld-icon>
</span>
</ld-select>
</fieldset>
</form>
Expand Down
2 changes: 1 addition & 1 deletion src/liquid/components/ld-button/ld-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ ld-button {
-webkit-touch-callout: none;

&:where(:disabled),
&:where([aria-disabled]) {
&:where([aria-disabled='true']) {
opacity: 0.2;
}

Expand Down
2 changes: 1 addition & 1 deletion src/liquid/components/ld-checkbox/ld-checkbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
}

&:where(:disabled),
&:where([aria-disabled]) {
&:where([aria-disabled='true']) {
~ .ld-checkbox__check {
color: var(--ld-col-rblck2);
}
Expand Down
Loading

0 comments on commit 4c7f3b0

Please sign in to comment.