kopia lustrzana https://github.com/shoelace-style/shoelace
Add panel tokens
rodzic
2f56622b42
commit
ae5af1edb7
|
@ -80,9 +80,7 @@ One of the most common use cases for badges is attaching them to buttons. To mak
|
|||
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 240px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-label>Messages</sl-menu-label>
|
||||
<sl-menu-item>Comments <sl-badge slot="suffix" pill>4</sl-badge></sl-menu-item>
|
||||
<sl-menu-item>Replies <sl-badge slot="suffix" pill>12</sl-badge></sl-menu-item>
|
||||
|
|
|
@ -125,7 +125,7 @@ Custom icons can be loaded by setting the `src` attribute. Only SVG images are s
|
|||
|
||||
<style>
|
||||
.icon-search {
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border: solid 1px var(--sl-panel-border-color);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
padding: var(--sl-spacing-medium);
|
||||
}
|
||||
|
@ -180,6 +180,10 @@ Custom icons can be loaded by setting the `src` attribute. Only SVG images are s
|
|||
color: var(--sl-color-primary-50);
|
||||
}
|
||||
|
||||
.sl-theme-dark .icon-list-item:hover {
|
||||
background-color: var(--sl-color-primary-15);
|
||||
}
|
||||
|
||||
.icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@ Menu dividers are used to visually group menu items.
|
|||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item value="1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="2">Option 2</sl-menu-item>
|
||||
|
|
|
@ -6,7 +6,7 @@ Menu items provide options for the user to pick from in a menu.
|
|||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item>Option 1</sl-menu-item>
|
||||
<sl-menu-item>Option 2</sl-menu-item>
|
||||
|
|
|
@ -6,7 +6,7 @@ Menu labels are used to describe a group of menu items.
|
|||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-label>Fruits</sl-menu-label>
|
||||
<sl-menu-item value="apple">Apple</sl-menu-item>
|
||||
|
|
|
@ -8,7 +8,7 @@ Use [menu items](/components/menu-item.md), [menu dividers](/components/menu-div
|
|||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item value="undo">Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--color);
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: var(--sl-panel-background-color);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
width: var(--width);
|
||||
max-width: calc(100% - var(--sl-spacing-xx-large));
|
||||
max-height: calc(100% - var(--sl-spacing-xx-large));
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: var(--sl-panel-background-color);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--sl-shadow-x-large);
|
||||
opacity: 0;
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
z-index: 2;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-color: var(--sl-color-white);
|
||||
background-color: var(--sl-panel-background-color);
|
||||
box-shadow: var(--sl-shadow-x-large);
|
||||
transition: var(--sl-transition-medium) transform;
|
||||
overflow: auto;
|
||||
|
|
|
@ -20,8 +20,8 @@
|
|||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--color);
|
||||
background-color: var(--sl-color-white);
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
background-color: var(--sl-panel-background-color);
|
||||
border: solid 1px var(--sl-panel-border-color);
|
||||
border-radius: var(--sl-border-radius-medium);
|
||||
box-shadow: var(--sl-shadow-large);
|
||||
opacity: 0;
|
||||
|
|
|
@ -4,12 +4,10 @@
|
|||
* @prop --color: The color of the divider.
|
||||
*/
|
||||
:host {
|
||||
--color: var(--sl-color-gray-90);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
border-top: solid 1px var(--color);
|
||||
border-top: solid 1px var(--sl-panel-border-color);
|
||||
margin: var(--sl-spacing-x-small) 0;
|
||||
}
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
}
|
||||
|
||||
.menu {
|
||||
background-color: var(--sl-color-white);
|
||||
padding: var(--sl-spacing-x-small) 0;
|
||||
|
||||
&:focus {
|
||||
|
|
|
@ -229,6 +229,13 @@
|
|||
|
||||
--sl-overlay-background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%, 0.5);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Panels
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-panel-background-color: var(--sl-color-white);
|
||||
--sl-panel-border-color: var(--sl-color-gray-90);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Tooltip tokens
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
Ładowanie…
Reference in New Issue