Skip to content

Commit

Permalink
make internal CSS easily overridable (sveltejs/svelte#6859)
Browse files Browse the repository at this point in the history
  • Loading branch information
@janosh
janosh committed Oct 21, 2021
1 parent 3a6b432 commit d15a445
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 40 deletions.
6 changes: 6 additions & 0 deletions .pre-commit-config.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,9 @@ repos:
- prettier
- prettier-plugin-svelte
- svelte

- repo: https://github.com/codespell-project/codespell
rev: v2.1.0
hooks:
- id: codespell
exclude: yarn.lock
8 changes: 4 additions & 4 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,12 +77,12 @@ Full list of props/bindable variables for this component:

| name | default | description |
| :---------------- | :---------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `options` | [required] | Array of strings (or numbers) that will be listed in the dropdown selection. |
| `options` | [required] | Array of strings that will be listed in the dropdown selection. |
| `maxSelect` | `null` | `null` or positive integer to allow users to select as many as they like or a maximum number of options, respectively. |
| `selected` | `[]` (or `''` if `maxSelect === 1`) | Array of currently/pre-selected options when binding/passing as props respectively. |
| `readonly` | `false` | Disables the input. User won't be able to interact with it. |
| `placeholder` | `''` | String shown when no option is selected. |
| `disabledOptions` | `[]` | Array of strings (or numbers) that will be disabled in the dropdown selection. |
| `disabledOptions` | `[]` | Array of strings that will be disabled in the dropdown selection. |
| `required` | `false` | Prevents submission in an HTML form when true. |
| `input` | `undefined` | Handle to the DOM node storing the currently selected options in JSON format as its `value` attribute. |
| `name` | `''` | Used as `name` reference for associating HTML form `<label>`s with this component as well as for the `<input>`'s `id`. That is, the same DOM node bindable through `<MultiSelect bind:input />` is also retrievable via `document.getElementByID(name)` e.g. for use in a JS file outside a Svelte component. |
Expand Down Expand Up @@ -148,7 +148,7 @@ The first, if you only want to make small adjustments, allows you to pass the fo
For example, to change the background color of the options dropdown:

```svelte
<MultiSelect --sms-options-bg="var(--my-css-var, white)" />
<MultiSelect --sms-options-bg="white" />
```

### With CSS frameworks
Expand Down Expand Up @@ -178,7 +178,7 @@ This simplified version of the DOM structure of this component shows where these

### Granular control through global CSS

You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. **Note**: Overriding properties that the component already sets internally requires the `!important` keyword.
You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors.

```css
:global(.multiselect) {
Expand Down
18 changes: 4 additions & 14 deletions src/components/GitHubCorner.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,13 @@
</a>

<style>
svg {
fill: var(--ghc-bg, black);
color: var(--ghc-color, white);
width: var(--ghc-size, 50pt);
height: var(--ghc-size, 50pt);
a {
position: fixed;
top: 0;
border: 0;
right: 0;
width: var(--ghc-size, 50pt);
fill: var(--ghc-bg, black);
color: var(--ghc-color, white);
}
a:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
Expand All @@ -47,12 +45,4 @@
transform: rotate(10deg);
}
}
@media (max-width: 500px) {
a:hover .octo-arm {
animation: none;
}
a .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
</style>
42 changes: 20 additions & 22 deletions src/lib/MultiSelect.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
export let maxSelect: number | null = null // null means any number of options are selectable
export let readonly = false
export let placeholder = ``
export let options: (string | number)[]
export let disabledOptions: (string | number)[] = []
export let options: string[]
export let disabledOptions: string[] = []
export let input: HTMLInputElement | null = null
export let noOptionsMsg = `No matching options`
Expand Down Expand Up @@ -134,7 +134,7 @@
}
</script>

<!-- z-index: 2 when showOptions is ture ensures the ul.tokens of one <MultiSelect /> display above those of another following shortly after it -->
<!-- z-index: 2 when showOptions is true ensures the ul.tokens of one <MultiSelect /> display above those of another following shortly after it -->
<div
class="multiselect {outerDivClass}"
class:readonly
Expand Down Expand Up @@ -215,7 +215,7 @@
</div>

<style>
.multiselect {
:where(.multiselect) {
position: relative;
margin: 1em 0;
border: var(--sms-border, 1pt solid lightgray);
Expand All @@ -225,14 +225,14 @@
display: flex;
cursor: text;
}
.multiselect:focus-within {
:where(.multiselect:focus-within) {
border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
}
.multiselect.readonly {
:where(.multiselect.readonly) {
background: var(--sms-readonly-bg, lightgray);
}
ul.tokens > li {
:where(ul.tokens > li) {
background: var(--sms-token-bg, var(--sms-active-color, cornflowerblue));
align-items: center;
border-radius: 4pt;
Expand All @@ -243,19 +243,17 @@
white-space: nowrap;
height: 16pt;
}
ul.tokens > li button,
button.remove-all {
:where(ul.tokens > li button, button.remove-all) {
align-items: center;
border-radius: 50%;
display: flex;
cursor: pointer;
transition: 0.2s;
}
ul.tokens > li button:hover,
button.remove-all:hover {
:where(ul.tokens > li button:hover, button.remove-all:hover) {
color: var(--sms-remove-x-hover-color, lightgray);
}
button {
:where(button) {
color: inherit;
background: transparent;
border: none;
Expand All @@ -264,7 +262,7 @@
padding: 0 2pt;
}
.multiselect input {
:where(.multiselect input) {
border: none;
outline: none;
background: none;
Expand All @@ -274,15 +272,15 @@
flex: 1;
}
ul.tokens {
:where(ul.tokens) {
display: flex;
padding: 0;
margin: 0;
flex-wrap: wrap;
flex: 1;
}
ul.options {
:where(ul.options) {
list-style: none;
max-height: 50vh;
padding: 0;
Expand All @@ -293,37 +291,37 @@
overflow: auto;
background: var(--sms-options-bg, white);
}
ul.options.hidden {
:where(ul.options.hidden) {
visibility: hidden;
}
ul.options li {
:where(ul.options li) {
padding: 3pt 2ex;
cursor: pointer;
}
ul.options li.selected {
:where(ul.options li.selected) {
border-left: var(
--sms-li-selected-border-left,
3pt solid var(--sms-selected-color, green)
);
background: var(--sms-li-selected-bg, inherit);
color: var(--sms-li-selected-color, inherit);
}
ul.options li:not(.selected):hover {
:where(ul.options li:not(.selected):hover) {
border-left: var(
--sms-li-not-selected-hover-border-left,
3pt solid var(--sms-active-color, cornflowerblue)
);
border-left: 3pt solid var(--blue);
}
ul.options li.active {
:where(ul.options li.active) {
background: var(--sms-li-active-bg, var(--sms-active-color, cornflowerblue));
}
ul.options li.disabled {
:where(ul.options li.disabled) {
background: var(--sms-li-disabled-bg, #f5f5f6);
color: var(--sms-li-disabled-text, #b8b8b8);
cursor: not-allowed;
}
ul.options li.disabled:hover {
:where(ul.options li.disabled:hover) {
border-left: unset;
}
</style>

0 comments on commit d15a445

Please sign in to comment.