diff --git a/API-Style.md b/API-Style.md index 0a11dec..8f278fa 100644 --- a/API-Style.md +++ b/API-Style.md @@ -25,6 +25,9 @@ Misc sizes: * `--tsmb-size-edge`: Line thickness of edges, e.g. border-width. * `--tsmb-size-radius`: Roundness, e.g. border-radius. * `--tsmb-size-highlight`: Line thickness of cursor highlight, e.g. border-left-width. +* `--tsmb-size-listbox-width`: The maximum width of the listbox. The minimum is the width of the input field. +* `--tsmb-size-listbox-max-height`: The maximum height of the listbox. +* `--tsmb-size-listbox-right`: Set to `0` to create a right-aligned listbox that expands to the left. Base layout, for idle or inactive input field: * `--tsmb-color-base-background`: Background color, e.g. white in lightmode. @@ -34,12 +37,12 @@ Base layout, for idle or inactive input field: Active layout, for active input field and result box. Defaults to the same colors as above. * `--tsmb-color-focus-background`: Background color, e.g. white in lightmode. -* `--tsmb-color-focus30`: Hard contrast (focussed input text). -* `--tsmb-color-focus50`: Medium contrast (for search result excerpt, focussed placeholder, footer). +* `--tsmb-color-focus30`: Hard contrast (focussed input text). +* `--tsmb-color-focus50`: Medium contrast (for search result excerpt, focussed placeholder, footer). * `--tsmb-color-focus90`: Subtle contrast (for result borders). Primary colors, by default only used in the active layout: -* `--tsmb-color-primary30`: Hard contrast, for colorful dark background or dark text. +* `--tsmb-color-primary30`: Hard contrast, for colorful dark background or dark text. * `--tsmb-color-primary50`: Medium contrast, for colorful links or buttons. * `--tsmb-color-primary90`: Subtle contrast, for selection background. diff --git a/demo/demo-theme.css b/demo/demo-theme.css index edae602..c6ebb6d 100644 --- a/demo/demo-theme.css +++ b/demo/demo-theme.css @@ -17,19 +17,19 @@ header > * { align-self: center; } -header h2 { - order: 1; -} - .demo-logo { background-image: url(../assets/logo-text-dark.svg); } header .tsmb-form { + width: 30em; + margin-left: auto; --tsmb-color-base-background: #691c69; --tsmb-color-base30: var(--tsmb-color-primary90); --tsmb-color-base50: #c090c0; --tsmb-color-base90: #c090c0; + --tsmb-size-listbox-right: 0; + --tsmb-size-listbox-width: calc(min(50rem, 80vw)); } header .tsmb-form:not(:focus-within)::before { filter: invert(); diff --git a/demo/demo.css b/demo/demo.css index d27106a..5e41f48 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -62,13 +62,9 @@ main { .demo-right-form { margin-left: auto; + --tsmb-size-listbox-right: 0; } -.demo-right-form [role="listbox"] { - right: 0; -} - - .demo-stylecontrol fieldset { background: #fff; } diff --git a/demo/index.html b/demo/index.html index 705b3c1..67bd157 100644 --- a/demo/index.html +++ b/demo/index.html @@ -11,7 +11,7 @@
- +