215 lines
4.0 KiB
CSS
215 lines
4.0 KiB
CSS
.root {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 4;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: var(--dsh-trajectory-toolbar-height);
|
|
border-bottom: 1px solid var(--dsw-alias-border-l2);
|
|
background: var(--dsw-alias-bg-layer-1);
|
|
}
|
|
|
|
.inner {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 6px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.toggle {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
height: 20px;
|
|
padding: 0 7px;
|
|
gap: 4px;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font: var(--dsw-font-xxs-12);
|
|
}
|
|
|
|
.toggle:hover {
|
|
color: var(--dsw-alias-label-primary);
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
.toggle[aria-pressed='true'] {
|
|
color: var(--dsw-alias-label-primary);
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
.toggle:focus-visible {
|
|
outline: 1px solid var(--dsw-alias-state-business-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.toggleIcon {
|
|
flex: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
stroke: currentColor;
|
|
stroke-width: 1.25;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.control {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: 88px;
|
|
height: 20px;
|
|
padding: 0 5px;
|
|
gap: 4px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font: var(--dsw-font-xxs-12);
|
|
}
|
|
|
|
.control[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.control:hover:not(:disabled),
|
|
.control[aria-checked='true'],
|
|
.control[aria-pressed='true'] {
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.control:focus-visible {
|
|
outline: 1px solid var(--dsw-alias-state-business-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.control:disabled {
|
|
color: var(--dsw-alias-label-dimmed);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.controlTrack {
|
|
position: relative;
|
|
display: inline-block;
|
|
flex: none;
|
|
width: 20px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background: var(--dsw-alias-border-l2);
|
|
transition: background-color 120ms var(--ds-ease-in-out);
|
|
}
|
|
|
|
.controlThumb {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--dsw-alias-bg-layer-1);
|
|
transition: transform 120ms var(--ds-ease-in-out);
|
|
}
|
|
|
|
.controlTrack[data-on='true'] {
|
|
background: var(--dsw-alias-state-business-primary);
|
|
}
|
|
|
|
.controlTrack[data-on='true'] .controlThumb {
|
|
transform: translateX(10px);
|
|
}
|
|
|
|
.action {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
height: 20px;
|
|
padding: 0 5px;
|
|
gap: 4px;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font: var(--dsw-font-xxs-12);
|
|
}
|
|
|
|
.action:hover {
|
|
color: var(--dsw-alias-label-primary);
|
|
background: var(--dsw-alias-interactive-bg-hover);
|
|
}
|
|
|
|
.action:focus-visible {
|
|
outline: 1px solid var(--dsw-alias-state-business-primary);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.actionIcon {
|
|
color: var(--dsw-alias-label-tertiary);
|
|
font: 14px/14px var(--ds-font-family-code);
|
|
}
|
|
|
|
.search {
|
|
display: flex;
|
|
flex: 0 1 164px;
|
|
align-items: center;
|
|
min-width: 84px;
|
|
height: 22px;
|
|
margin-left: auto;
|
|
padding: 0 6px;
|
|
gap: 4px;
|
|
border: 1px solid var(--dsw-alias-border-l2);
|
|
border-radius: 4px;
|
|
color: var(--dsw-alias-label-caption);
|
|
background: var(--dsw-alias-bg-layer-2);
|
|
}
|
|
|
|
.search:hover {
|
|
border-color: var(--dsw-alias-label-caption);
|
|
}
|
|
|
|
.search:focus-within {
|
|
border-color: var(--dsw-alias-state-business-primary);
|
|
background: var(--dsw-alias-bg-layer-1);
|
|
}
|
|
|
|
.searchIcon {
|
|
flex: none;
|
|
}
|
|
|
|
.searchInput {
|
|
min-width: 0;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
color: var(--dsw-alias-label-primary);
|
|
background: transparent;
|
|
font: var(--dsw-font-xxs-12);
|
|
}
|
|
|
|
.searchInput::placeholder {
|
|
color: var(--dsw-alias-label-caption);
|
|
}
|
|
|
|
.searchInput::-webkit-search-cancel-button {
|
|
width: 12px;
|
|
height: 12px;
|
|
cursor: pointer;
|
|
}
|