app: Initial tabs impl (#28436)
This commit is contained in:
Brendan Allan
GitHub
parent
4702cddb3e
commit
38b406fb35
86 changed files with 10780 additions and 598 deletions
187
packages/ui/src/v2/components/checkbox-v2.css
Normal file
187
packages/ui/src/v2/components/checkbox-v2.css
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
[data-slot="checkbox-v2"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
cursor: default;
|
||||
|
||||
&:where([data-disabled]) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-error"] {
|
||||
color: var(--state-fg-danger);
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: 12px;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-normal);
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-error"]:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-row"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
gap: 8px;
|
||||
|
||||
[data-slot="checkbox-v2-input"] {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-control-stack"] {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-control"] {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: none;
|
||||
flex-shrink: 0;
|
||||
left: 0;
|
||||
top: calc(50% - 16px / 2);
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
|
||||
|
||||
background:
|
||||
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
|
||||
var(--background-bg-base);
|
||||
transition:
|
||||
background 170ms ease-out,
|
||||
opacity 170ms ease-out,
|
||||
outline-color 170ms ease-out;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-indicator"] {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-text"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-label"] {
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
color: inherit;
|
||||
font-family: var(--font-family-sans);
|
||||
font-style: normal;
|
||||
font-weight: 440;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-variation-settings: "slnt" 0;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-label-text"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
color: var(--text-text-base);
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.04px;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2-description"] {
|
||||
color: var(--text-text-muted);
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: 11px;
|
||||
font-weight: 440;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where(:not([data-readonly]))
|
||||
[data-slot="checkbox-v2-input"]:focus-visible
|
||||
~ [data-slot="checkbox-v2-control-stack"]
|
||||
[data-slot="checkbox-v2-control"] {
|
||||
outline: 2px solid var(--border-border-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where(:hover):where(:not([data-disabled], [data-readonly], [data-invalid])):where(
|
||||
:not([data-checked], [data-indeterminate])
|
||||
)
|
||||
[data-slot="checkbox-v2-control"] {
|
||||
background:
|
||||
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
|
||||
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
|
||||
var(--background-bg-base);
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
|
||||
background:
|
||||
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
|
||||
var(--background-bg-accent);
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
|
||||
:not([data-disabled], [data-readonly])
|
||||
)
|
||||
[data-slot="checkbox-v2-control"] {
|
||||
background:
|
||||
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
|
||||
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
|
||||
var(--background-bg-accent);
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
|
||||
[data-slot="checkbox-v2-control"] {
|
||||
background: var(--state-bg-danger);
|
||||
box-shadow: inset 0 0 0 0.5px #b82d35;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"] .checkbox-v2-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where([data-checked]):where(:not([data-indeterminate])) .checkbox-v2-icon--check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where([data-indeterminate]) .checkbox-v2-icon--minus {
|
||||
display: block;
|
||||
}
|
||||
|
||||
[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-label"],
|
||||
[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-description"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue