You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
5.3 KiB
169 lines
5.3 KiB
[data-toolbar] {
|
|
--_toolbar-gap: var(--toolbar-gap-md);
|
|
--_toolbar-padding-inline: var(--toolbar-padding-inline-md);
|
|
--_toolbar-padding-block: var(--toolbar-padding-block-md);
|
|
--_toolbar-control-height: var(--toolbar-control-height-md);
|
|
--_toolbar-control-px: var(--toolbar-control-px-md);
|
|
--_toolbar-control-gap: var(--toolbar-control-gap-md);
|
|
--_toolbar-font-size: var(--toolbar-font-size-md);
|
|
--_toolbar-bg: var(--toolbar-bg);
|
|
--_toolbar-border: var(--toolbar-border);
|
|
--_toolbar-shadow: var(--toolbar-shadow);
|
|
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--_toolbar-gap);
|
|
min-inline-size: 0;
|
|
padding-block: var(--_toolbar-padding-block);
|
|
padding-inline: var(--_toolbar-padding-inline);
|
|
border: var(--toolbar-border-width) solid var(--_toolbar-border);
|
|
border-radius: var(--toolbar-radius);
|
|
background: var(--_toolbar-bg);
|
|
box-shadow: var(--_toolbar-shadow);
|
|
color: var(--toolbar-color);
|
|
font-family: var(--toolbar-font-family);
|
|
font-size: var(--_toolbar-font-size);
|
|
line-height: var(--toolbar-line-height);
|
|
}
|
|
|
|
[data-toolbar][data-size='xs'] {
|
|
--_toolbar-gap: var(--toolbar-gap-xs);
|
|
--_toolbar-padding-inline: var(--toolbar-padding-inline-xs);
|
|
--_toolbar-padding-block: var(--toolbar-padding-block-xs);
|
|
--_toolbar-control-height: var(--toolbar-control-height-xs);
|
|
--_toolbar-control-px: var(--toolbar-control-px-xs);
|
|
--_toolbar-control-gap: var(--toolbar-control-gap-xs);
|
|
--_toolbar-font-size: var(--toolbar-font-size-xs);
|
|
}
|
|
|
|
[data-toolbar][data-size='sm'] {
|
|
--_toolbar-gap: var(--toolbar-gap-sm);
|
|
--_toolbar-padding-inline: var(--toolbar-padding-inline-sm);
|
|
--_toolbar-padding-block: var(--toolbar-padding-block-sm);
|
|
--_toolbar-control-height: var(--toolbar-control-height-sm);
|
|
--_toolbar-control-px: var(--toolbar-control-px-sm);
|
|
--_toolbar-control-gap: var(--toolbar-control-gap-sm);
|
|
--_toolbar-font-size: var(--toolbar-font-size-sm);
|
|
}
|
|
|
|
[data-toolbar][data-size='lg'] {
|
|
--_toolbar-gap: var(--toolbar-gap-lg);
|
|
--_toolbar-padding-inline: var(--toolbar-padding-inline-lg);
|
|
--_toolbar-padding-block: var(--toolbar-padding-block-lg);
|
|
--_toolbar-control-height: var(--toolbar-control-height-lg);
|
|
--_toolbar-control-px: var(--toolbar-control-px-lg);
|
|
--_toolbar-control-gap: var(--toolbar-control-gap-lg);
|
|
--_toolbar-font-size: var(--toolbar-font-size-lg);
|
|
}
|
|
|
|
/* outline: transparent fill, border + shadow stay visible. */
|
|
[data-toolbar][data-variant='outline'] {
|
|
--_toolbar-bg: transparent;
|
|
--_toolbar-shadow: none;
|
|
}
|
|
|
|
[data-toolbar][data-variant='ghost'] {
|
|
--_toolbar-bg: transparent;
|
|
--_toolbar-border: transparent;
|
|
--_toolbar-shadow: none;
|
|
}
|
|
|
|
[data-toolbar][data-orientation='vertical'] {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
[data-toolbar-group] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--toolbar-group-gap);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-toolbar-group][data-orientation='vertical'] {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
[data-toolbar-button],
|
|
[data-toolbar-link],
|
|
[data-toolbar-group-item] {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--_toolbar-control-gap);
|
|
min-inline-size: var(--_toolbar-control-height);
|
|
block-size: var(--_toolbar-control-height);
|
|
padding-inline: var(--_toolbar-control-px);
|
|
border: var(--toolbar-control-border-width) solid var(--toolbar-control-border);
|
|
border-radius: var(--toolbar-control-radius);
|
|
background: var(--toolbar-control-bg);
|
|
color: var(--toolbar-control-color);
|
|
font: inherit;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition:
|
|
background var(--toolbar-transition-duration) var(--toolbar-transition-ease),
|
|
border-color var(--toolbar-transition-duration) var(--toolbar-transition-ease),
|
|
color var(--toolbar-transition-duration) var(--toolbar-transition-ease),
|
|
box-shadow var(--toolbar-transition-duration) var(--toolbar-transition-ease);
|
|
}
|
|
|
|
[data-toolbar-button]:hover:not([data-disabled]),
|
|
[data-toolbar-link]:hover,
|
|
[data-toolbar-group-item]:hover:not([data-disabled]) {
|
|
border-color: var(--toolbar-control-border-hover);
|
|
background: var(--toolbar-control-bg-hover);
|
|
color: var(--toolbar-control-color-hover);
|
|
}
|
|
|
|
[data-toolbar-button]:focus-visible,
|
|
[data-toolbar-link]:focus-visible,
|
|
[data-toolbar-group-item]:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
[data-toolbar-group-item][data-state='on'] {
|
|
border-color: var(--toolbar-control-border-active);
|
|
background: var(--toolbar-control-bg-active);
|
|
color: var(--toolbar-control-color-active);
|
|
}
|
|
|
|
[data-toolbar-button][data-disabled],
|
|
[data-toolbar-group][data-disabled],
|
|
[data-toolbar-group-item][data-disabled] {
|
|
cursor: default;
|
|
opacity: var(--toolbar-disabled-opacity);
|
|
}
|
|
|
|
[data-toolbar-separator] {
|
|
flex: 0 0 auto;
|
|
border-radius: var(--toolbar-separator-radius);
|
|
background: var(--toolbar-separator-bg);
|
|
}
|
|
|
|
[data-toolbar-separator][data-orientation='vertical'] {
|
|
inline-size: var(--toolbar-separator-thickness);
|
|
align-self: stretch;
|
|
min-block-size: var(--toolbar-separator-length);
|
|
}
|
|
|
|
[data-toolbar-separator][data-orientation='horizontal'] {
|
|
block-size: var(--toolbar-separator-thickness);
|
|
inline-size: 100%;
|
|
min-inline-size: var(--toolbar-separator-length);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-toolbar-button],
|
|
[data-toolbar-link],
|
|
[data-toolbar-group-item] {
|
|
transition: none;
|
|
}
|
|
}
|