@scattered-light/loomiere-mojave 0.14.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/exports/AGENTS.md +1 -1
- package/dist/exports/catalog.json +1 -0
- package/dist/exports/design-system/README.md +1 -1
- package/dist/exports/design-system/components/PickerButton/README.md +1 -1
- package/dist/exports/design-system/components/PickerButton/preview.html +1 -1
- package/dist/exports/design-system/components/PickerSplit/README.md +18 -0
- package/dist/exports/design-system/components/bundle.css +193 -63
- package/dist/exports/design-system/components/bundle.js +7 -7
- package/dist/exports/design-system/components/index.d.ts +1 -1
- package/dist/exports/design-system/tokens.json +5 -0
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tailwind.css +4 -0
- package/dist/exports/tokens.dtcg.json +10 -0
- package/dist/tokens.css +5 -0
- package/dist/tokens.d.ts +2 -0
- package/dist/tokens.js +3 -1
- package/dist/tokens.json +18 -0
- package/package.json +2 -2
|
@@ -795,6 +795,7 @@
|
|
|
795
795
|
--sl-navigation-menu-popup-min-width: 400px; /** Narrowest a navigation panel gets on wider screens, and the widest a single column of links grows. */
|
|
796
796
|
--sl-navigation-menu-column-width: 12rem; /** Width of each column in a two-column link list. */
|
|
797
797
|
--sl-picker-button-max-width: 18rem; /** Widest the button grows. A longer choice is cut with an ellipsis; the label never is. */
|
|
798
|
+
--sl-picker-button-text-offset: 0px; /** Nudges the label and choice down together, for a typeface whose text sits high in the button. Zero keeps the baseline where the line box puts it. */
|
|
798
799
|
--sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
|
|
799
800
|
--sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
|
|
800
801
|
--sl-sheet-tab-text-offset: 0px; /** Nudges the tab label down, for a typeface whose caps sit high in the line box. Zero centers the line box. */
|
|
@@ -2431,6 +2432,7 @@
|
|
|
2431
2432
|
--sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
|
|
2432
2433
|
--sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
|
|
2433
2434
|
--sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
|
|
2435
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color); /** The line above a grand total row. The total rule color by default; a brand can quiet it so the double rule under the figures leads. */
|
|
2434
2436
|
--sl-collection-tree-parent-row-hover: var(--sl-table-row-hover); /** A parent row under the pointer, with treeLines. A brand sets it a step darker than table.row-hover so a parent still stands out when hovered. */
|
|
2435
2437
|
}
|
|
2436
2438
|
|
|
@@ -5913,6 +5915,7 @@
|
|
|
5913
5915
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
5914
5916
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
5915
5917
|
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
5918
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
|
|
5916
5919
|
--sl-table-total-background: var(--sl-table-background);
|
|
5917
5920
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
5918
5921
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
@@ -6102,6 +6105,7 @@
|
|
|
6102
6105
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
6103
6106
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
6104
6107
|
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
6108
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
|
|
6105
6109
|
--sl-table-total-background: var(--sl-table-background);
|
|
6106
6110
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6107
6111
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
@@ -6291,6 +6295,7 @@
|
|
|
6291
6295
|
--sl-table-range-background: var(--sl-interactive-tint);
|
|
6292
6296
|
--sl-table-range-border: var(--sl-focus-ring);
|
|
6293
6297
|
--sl-table-total-rule-color: var(--sl-rule-color);
|
|
6298
|
+
--sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
|
|
6294
6299
|
--sl-table-total-background: var(--sl-table-background);
|
|
6295
6300
|
--sl-app-bar-background: var(--sl-surface-raised);
|
|
6296
6301
|
--sl-app-bar-border-color: var(--sl-rule-color);
|
|
@@ -6688,7 +6693,7 @@
|
|
|
6688
6693
|
}
|
|
6689
6694
|
|
|
6690
6695
|
|
|
6691
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6696
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
6692
6697
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6693
6698
|
Loomiere theme. Load the theme first:
|
|
6694
6699
|
@import '<your theme>/tokens.css';
|
|
@@ -6698,7 +6703,7 @@
|
|
|
6698
6703
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6699
6704
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6700
6705
|
@layer reset {
|
|
6701
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
6706
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
6702
6707
|
/* CSS Reset - Mojave Theme */
|
|
6703
6708
|
|
|
6704
6709
|
/* ============================================
|
|
@@ -7142,7 +7147,7 @@ hr {
|
|
|
7142
7147
|
}
|
|
7143
7148
|
}
|
|
7144
7149
|
@layer reset {
|
|
7145
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7150
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7146
7151
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7147
7152
|
|
|
7148
7153
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7255,7 +7260,7 @@ main:focus {
|
|
|
7255
7260
|
|
|
7256
7261
|
}
|
|
7257
7262
|
@layer reset {
|
|
7258
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7263
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7259
7264
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7260
7265
|
|
|
7261
7266
|
:focus-visible {
|
|
@@ -7323,7 +7328,7 @@ button,
|
|
|
7323
7328
|
|
|
7324
7329
|
}
|
|
7325
7330
|
/* Component styles */
|
|
7326
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7331
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7327
7332
|
/* Accordion - Mojave Theme
|
|
7328
7333
|
*
|
|
7329
7334
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7444,7 +7449,7 @@ button,
|
|
|
7444
7449
|
overflow: hidden;
|
|
7445
7450
|
}
|
|
7446
7451
|
|
|
7447
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7452
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7448
7453
|
/* Alert Dialog - Mojave Theme
|
|
7449
7454
|
*
|
|
7450
7455
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7453,7 +7458,7 @@ button,
|
|
|
7453
7458
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7454
7459
|
*/
|
|
7455
7460
|
|
|
7456
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7461
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7457
7462
|
/* Autocomplete - Mojave Theme
|
|
7458
7463
|
*
|
|
7459
7464
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7655,7 +7660,7 @@ button,
|
|
|
7655
7660
|
(reset-accessibility.css).
|
|
7656
7661
|
============================================ */
|
|
7657
7662
|
|
|
7658
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7663
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7659
7664
|
/* Avatar - Mojave Theme
|
|
7660
7665
|
*
|
|
7661
7666
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7763,7 +7768,7 @@ button,
|
|
|
7763
7768
|
}
|
|
7764
7769
|
}
|
|
7765
7770
|
|
|
7766
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7771
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7767
7772
|
/* Button - Mojave Theme
|
|
7768
7773
|
*
|
|
7769
7774
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7913,7 +7918,7 @@ button,
|
|
|
7913
7918
|
font-size: var(--sl-icon-size-maximize);
|
|
7914
7919
|
}
|
|
7915
7920
|
|
|
7916
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
7921
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
7917
7922
|
/* Checkbox - Mojave Theme
|
|
7918
7923
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7919
7924
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8070,7 +8075,7 @@ button,
|
|
|
8070
8075
|
border-radius: var(--sl-radius-pill);
|
|
8071
8076
|
}
|
|
8072
8077
|
|
|
8073
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8078
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8074
8079
|
/* Checkbox Group - Mojave Theme */
|
|
8075
8080
|
|
|
8076
8081
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8086,7 +8091,7 @@ button,
|
|
|
8086
8091
|
pointer-events: none;
|
|
8087
8092
|
}
|
|
8088
8093
|
|
|
8089
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8094
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8090
8095
|
/* Collapsible - Mojave Theme
|
|
8091
8096
|
*
|
|
8092
8097
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8202,7 +8207,7 @@ button,
|
|
|
8202
8207
|
background: var(--sl-surface-raised);
|
|
8203
8208
|
}
|
|
8204
8209
|
|
|
8205
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8210
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8206
8211
|
/* Combobox - Mojave Theme
|
|
8207
8212
|
*
|
|
8208
8213
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8687,7 +8692,7 @@ button,
|
|
|
8687
8692
|
color: var(--sl-text-tertiary);
|
|
8688
8693
|
}
|
|
8689
8694
|
|
|
8690
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8695
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8691
8696
|
/* Context Menu - Mojave Theme
|
|
8692
8697
|
*
|
|
8693
8698
|
* No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
|
|
@@ -8856,7 +8861,7 @@ button,
|
|
|
8856
8861
|
stroke-width: var(--sl-stroke-default);
|
|
8857
8862
|
}
|
|
8858
8863
|
|
|
8859
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
8864
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
8860
8865
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8861
8866
|
*
|
|
8862
8867
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -9002,7 +9007,7 @@ button,
|
|
|
9002
9007
|
margin-top: var(--sl-modal-actions-spacing);
|
|
9003
9008
|
}
|
|
9004
9009
|
|
|
9005
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9010
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9006
9011
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
9007
9012
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
9008
9013
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9135,7 +9140,7 @@ button,
|
|
|
9135
9140
|
color: var(--sl-modal-description-color);
|
|
9136
9141
|
}
|
|
9137
9142
|
|
|
9138
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9143
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9139
9144
|
/* Field - Mojave Theme
|
|
9140
9145
|
*
|
|
9141
9146
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9196,7 +9201,7 @@ textarea.FieldControl {
|
|
|
9196
9201
|
height: auto;
|
|
9197
9202
|
}
|
|
9198
9203
|
|
|
9199
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9204
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9200
9205
|
/* Fieldset - Mojave Theme
|
|
9201
9206
|
*
|
|
9202
9207
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9238,7 +9243,7 @@ textarea.FieldControl {
|
|
|
9238
9243
|
color: var(--sl-text-secondary);
|
|
9239
9244
|
}
|
|
9240
9245
|
|
|
9241
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9246
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9242
9247
|
/* Form - Mojave Theme
|
|
9243
9248
|
*
|
|
9244
9249
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9258,7 +9263,7 @@ textarea.FieldControl {
|
|
|
9258
9263
|
margin-top: var(--sl-space-block-md);
|
|
9259
9264
|
}
|
|
9260
9265
|
|
|
9261
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9266
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9262
9267
|
/* Input - Mojave Theme
|
|
9263
9268
|
*
|
|
9264
9269
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9395,7 +9400,7 @@ textarea.FieldControl {
|
|
|
9395
9400
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9396
9401
|
}
|
|
9397
9402
|
|
|
9398
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9403
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9399
9404
|
/* Menu - Mojave Theme
|
|
9400
9405
|
*
|
|
9401
9406
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9544,7 +9549,7 @@ textarea.FieldControl {
|
|
|
9544
9549
|
color: var(--sl-text-tertiary);
|
|
9545
9550
|
}
|
|
9546
9551
|
|
|
9547
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9552
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9548
9553
|
/* Menubar - Mojave Theme
|
|
9549
9554
|
*
|
|
9550
9555
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -9737,7 +9742,7 @@ textarea.FieldControl {
|
|
|
9737
9742
|
color: var(--sl-text-tertiary);
|
|
9738
9743
|
}
|
|
9739
9744
|
|
|
9740
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9745
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9741
9746
|
/* Meter - Mojave Theme
|
|
9742
9747
|
*
|
|
9743
9748
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9800,7 +9805,7 @@ textarea.FieldControl {
|
|
|
9800
9805
|
height: var(--sl-gauge-height-lg);
|
|
9801
9806
|
}
|
|
9802
9807
|
|
|
9803
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
9808
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
9804
9809
|
/* Navigation Menu - Mojave Theme
|
|
9805
9810
|
*
|
|
9806
9811
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10220,7 +10225,7 @@ textarea.FieldControl {
|
|
|
10220
10225
|
width: 100%;
|
|
10221
10226
|
}
|
|
10222
10227
|
|
|
10223
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10228
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10224
10229
|
/* Number Field - Mojave Theme
|
|
10225
10230
|
*
|
|
10226
10231
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10311,7 +10316,7 @@ textarea.FieldControl {
|
|
|
10311
10316
|
user-select: none;
|
|
10312
10317
|
}
|
|
10313
10318
|
|
|
10314
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10319
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10315
10320
|
/* OTP Field - Mojave Theme
|
|
10316
10321
|
*
|
|
10317
10322
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10374,7 +10379,7 @@ textarea.FieldControl {
|
|
|
10374
10379
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10375
10380
|
}
|
|
10376
10381
|
|
|
10377
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10382
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10378
10383
|
/* Popover - Mojave Theme */
|
|
10379
10384
|
|
|
10380
10385
|
/* ============================================
|
|
@@ -10539,7 +10544,7 @@ textarea.FieldControl {
|
|
|
10539
10544
|
fill: var(--sl-popup-arrow-stroke);
|
|
10540
10545
|
}
|
|
10541
10546
|
|
|
10542
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10547
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10543
10548
|
/* Preview Card - Mojave Theme
|
|
10544
10549
|
*
|
|
10545
10550
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10656,7 +10661,7 @@ textarea.FieldControl {
|
|
|
10656
10661
|
fill: var(--sl-popup-arrow-stroke);
|
|
10657
10662
|
}
|
|
10658
10663
|
|
|
10659
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10664
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10660
10665
|
/* Progress - Mojave Theme
|
|
10661
10666
|
*
|
|
10662
10667
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10733,7 +10738,7 @@ textarea.FieldControl {
|
|
|
10733
10738
|
height: var(--sl-gauge-height-lg);
|
|
10734
10739
|
}
|
|
10735
10740
|
|
|
10736
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10741
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10737
10742
|
/* Radio - Mojave Theme
|
|
10738
10743
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10739
10744
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10885,7 +10890,7 @@ textarea.FieldControl {
|
|
|
10885
10890
|
gap: var(--sl-gap-stack-sm);
|
|
10886
10891
|
}
|
|
10887
10892
|
|
|
10888
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10893
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10889
10894
|
/* Scroll Area - Mojave Theme
|
|
10890
10895
|
*
|
|
10891
10896
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -10967,7 +10972,7 @@ textarea.FieldControl {
|
|
|
10967
10972
|
background: transparent;
|
|
10968
10973
|
}
|
|
10969
10974
|
|
|
10970
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
10975
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
10971
10976
|
/* Select - Mojave Theme
|
|
10972
10977
|
*
|
|
10973
10978
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11252,7 +11257,7 @@ textarea.FieldControl {
|
|
|
11252
11257
|
stroke-width: var(--sl-stroke-default);
|
|
11253
11258
|
}
|
|
11254
11259
|
|
|
11255
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11260
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11256
11261
|
/* Separator - Mojave Theme
|
|
11257
11262
|
*
|
|
11258
11263
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11280,7 +11285,7 @@ textarea.FieldControl {
|
|
|
11280
11285
|
margin-inline: var(--sl-space-4);
|
|
11281
11286
|
}
|
|
11282
11287
|
|
|
11283
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11288
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11284
11289
|
/* Slider - Mojave Theme
|
|
11285
11290
|
*
|
|
11286
11291
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11446,7 +11451,7 @@ textarea.FieldControl {
|
|
|
11446
11451
|
transform: translate(-50%, 50%);
|
|
11447
11452
|
}
|
|
11448
11453
|
|
|
11449
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11454
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11450
11455
|
/* Switch - Mojave Theme
|
|
11451
11456
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11452
11457
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11612,7 +11617,7 @@ textarea.FieldControl {
|
|
|
11612
11617
|
color: var(--sl-text-disabled);
|
|
11613
11618
|
}
|
|
11614
11619
|
|
|
11615
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11620
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11616
11621
|
/* Tabs - Mojave Theme
|
|
11617
11622
|
*
|
|
11618
11623
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11748,7 +11753,7 @@ textarea.FieldControl {
|
|
|
11748
11753
|
padding: var(--sl-space-6);
|
|
11749
11754
|
}
|
|
11750
11755
|
|
|
11751
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11756
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11752
11757
|
/* Toast - Mojave Theme
|
|
11753
11758
|
*
|
|
11754
11759
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -11984,7 +11989,7 @@ textarea.FieldControl {
|
|
|
11984
11989
|
flex-shrink: 0;
|
|
11985
11990
|
}
|
|
11986
11991
|
|
|
11987
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
11992
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
11988
11993
|
/* Toggle - Mojave Theme
|
|
11989
11994
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
11990
11995
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12096,7 +12101,7 @@ textarea.FieldControl {
|
|
|
12096
12101
|
height: var(--sl-icon-size-maximize);
|
|
12097
12102
|
}
|
|
12098
12103
|
|
|
12099
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12104
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12100
12105
|
/* Toggle Group - Mojave Theme
|
|
12101
12106
|
*
|
|
12102
12107
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12158,7 +12163,7 @@ textarea.FieldControl {
|
|
|
12158
12163
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12159
12164
|
}
|
|
12160
12165
|
|
|
12161
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12166
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12162
12167
|
/* Toolbar - Mojave Theme
|
|
12163
12168
|
*
|
|
12164
12169
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12220,7 +12225,7 @@ textarea.FieldControl {
|
|
|
12220
12225
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12221
12226
|
}
|
|
12222
12227
|
|
|
12223
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12228
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12224
12229
|
/* Tooltip - Mojave Theme
|
|
12225
12230
|
*
|
|
12226
12231
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12281,7 +12286,7 @@ textarea.FieldControl {
|
|
|
12281
12286
|
}
|
|
12282
12287
|
|
|
12283
12288
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12284
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12289
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12285
12290
|
/* Badge
|
|
12286
12291
|
*
|
|
12287
12292
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12386,7 +12391,7 @@ textarea.FieldControl {
|
|
|
12386
12391
|
height: var(--sl-badge-dot-base);
|
|
12387
12392
|
}
|
|
12388
12393
|
|
|
12389
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12394
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12390
12395
|
/*
|
|
12391
12396
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12392
12397
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -12959,7 +12964,7 @@ textarea.FieldControl {
|
|
|
12959
12964
|
flex-basis: 100%;
|
|
12960
12965
|
}
|
|
12961
12966
|
|
|
12962
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
12967
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
12963
12968
|
/* Money field
|
|
12964
12969
|
*
|
|
12965
12970
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13304,7 +13309,7 @@ textarea.FieldControl {
|
|
|
13304
13309
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13305
13310
|
}
|
|
13306
13311
|
|
|
13307
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13312
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13308
13313
|
/* ListDetail
|
|
13309
13314
|
*
|
|
13310
13315
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13431,7 +13436,7 @@ textarea.FieldControl {
|
|
|
13431
13436
|
background: transparent;
|
|
13432
13437
|
}
|
|
13433
13438
|
|
|
13434
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13439
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13435
13440
|
/* Splitter
|
|
13436
13441
|
*
|
|
13437
13442
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13639,7 +13644,7 @@ textarea.FieldControl {
|
|
|
13639
13644
|
background: var(--sl-border-default);
|
|
13640
13645
|
}
|
|
13641
13646
|
|
|
13642
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13647
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13643
13648
|
/* EmptyState
|
|
13644
13649
|
*
|
|
13645
13650
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13895,7 +13900,7 @@ textarea.FieldControl {
|
|
|
13895
13900
|
color: inherit;
|
|
13896
13901
|
}
|
|
13897
13902
|
|
|
13898
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
13903
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
13899
13904
|
/* Table - Mojave Theme
|
|
13900
13905
|
*
|
|
13901
13906
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -14109,6 +14114,15 @@ textarea.FieldControl {
|
|
|
14109
14114
|
border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14110
14115
|
}
|
|
14111
14116
|
|
|
14117
|
+
/* The grand total's top line can be a quieter color than the subtotal's: table.grand-total-top-color. */
|
|
14118
|
+
.Table :is(tbody, tfoot) tr[data-total='grand'] > * {
|
|
14119
|
+
border-top-color: var(--sl-table-grand-total-top-color);
|
|
14120
|
+
}
|
|
14121
|
+
|
|
14122
|
+
.Table tfoot tr[data-total='grand'] > [data-rule='none'] {
|
|
14123
|
+
border-top-color: var(--sl-table-grand-total-top-color);
|
|
14124
|
+
}
|
|
14125
|
+
|
|
14112
14126
|
@media (hover: hover) {
|
|
14113
14127
|
.Table tbody tr[data-total]:hover > * {
|
|
14114
14128
|
background: var(--sl-table-total-background);
|
|
@@ -14146,7 +14160,7 @@ textarea.FieldControl {
|
|
|
14146
14160
|
color: inherit;
|
|
14147
14161
|
}
|
|
14148
14162
|
|
|
14149
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14163
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14150
14164
|
/* Collection
|
|
14151
14165
|
*
|
|
14152
14166
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14157,7 +14171,7 @@ textarea.FieldControl {
|
|
|
14157
14171
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14158
14172
|
*/
|
|
14159
14173
|
|
|
14160
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14174
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14161
14175
|
/* Collection toolbar
|
|
14162
14176
|
*
|
|
14163
14177
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14323,7 +14337,7 @@ textarea.FieldControl {
|
|
|
14323
14337
|
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14324
14338
|
}
|
|
14325
14339
|
|
|
14326
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14340
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14327
14341
|
/* DataTable additions on top of .Table.
|
|
14328
14342
|
*
|
|
14329
14343
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14522,7 +14536,7 @@ textarea.FieldControl {
|
|
|
14522
14536
|
}
|
|
14523
14537
|
}
|
|
14524
14538
|
|
|
14525
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14539
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14526
14540
|
/* DataList
|
|
14527
14541
|
*
|
|
14528
14542
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14664,7 +14678,7 @@ textarea.FieldControl {
|
|
|
14664
14678
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14665
14679
|
}
|
|
14666
14680
|
|
|
14667
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14681
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14668
14682
|
/* Pagination
|
|
14669
14683
|
*
|
|
14670
14684
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14689,7 +14703,7 @@ textarea.FieldControl {
|
|
|
14689
14703
|
margin: 0;
|
|
14690
14704
|
}
|
|
14691
14705
|
|
|
14692
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14706
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14693
14707
|
/* EditableList
|
|
14694
14708
|
*
|
|
14695
14709
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14788,7 +14802,7 @@ textarea.FieldControl {
|
|
|
14788
14802
|
}
|
|
14789
14803
|
}
|
|
14790
14804
|
|
|
14791
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14805
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14792
14806
|
/* Sheet
|
|
14793
14807
|
*
|
|
14794
14808
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14875,13 +14889,19 @@ textarea.FieldControl {
|
|
|
14875
14889
|
border-radius: 0;
|
|
14876
14890
|
}
|
|
14877
14891
|
|
|
14892
|
+
/* And its fill: rows rest on the sheet, so a row's hover tint shows against it. */
|
|
14893
|
+
.SheetBody > .Table,
|
|
14894
|
+
.SheetBody > .CollectionView .Table {
|
|
14895
|
+
background: transparent;
|
|
14896
|
+
}
|
|
14897
|
+
|
|
14878
14898
|
.SheetBody > .Table > thead > tr:first-child > *,
|
|
14879
14899
|
.SheetBody > .Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > *,
|
|
14880
14900
|
.SheetBody > .DataList ul > li:first-child {
|
|
14881
14901
|
border-top: 0;
|
|
14882
14902
|
}
|
|
14883
14903
|
|
|
14884
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14904
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14885
14905
|
/* StatFigure
|
|
14886
14906
|
*
|
|
14887
14907
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -14942,7 +14962,7 @@ textarea.FieldControl {
|
|
|
14942
14962
|
color: var(--sl-stat-figure-caption-color);
|
|
14943
14963
|
}
|
|
14944
14964
|
|
|
14945
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
14965
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
14946
14966
|
/* DescriptionList
|
|
14947
14967
|
*
|
|
14948
14968
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -15018,7 +15038,7 @@ textarea.FieldControl {
|
|
|
15018
15038
|
text-align: end;
|
|
15019
15039
|
}
|
|
15020
15040
|
|
|
15021
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15041
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15022
15042
|
/* AppBar
|
|
15023
15043
|
*
|
|
15024
15044
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -15052,13 +15072,14 @@ textarea.FieldControl {
|
|
|
15052
15072
|
background: var(--sl-app-bar-divider-color);
|
|
15053
15073
|
}
|
|
15054
15074
|
|
|
15055
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15075
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15056
15076
|
/* PickerButton
|
|
15057
15077
|
*
|
|
15058
15078
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
15059
15079
|
* look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
|
|
15060
15080
|
* the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
|
|
15061
|
-
* its popup is open.
|
|
15081
|
+
* its popup is open. Label and choice share a baseline, so caps beside lowercase read as one line;
|
|
15082
|
+
* picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
|
|
15062
15083
|
*/
|
|
15063
15084
|
|
|
15064
15085
|
.PickerButton {
|
|
@@ -15074,8 +15095,15 @@ textarea.FieldControl {
|
|
|
15074
15095
|
font-weight: var(--sl-font-body-base-font-weight);
|
|
15075
15096
|
line-height: var(--sl-font-body-base-line-height);
|
|
15076
15097
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
15077
|
-
|
|
15078
|
-
|
|
15098
|
+
/* A grid, not a flex row: label and choice share a baseline, and align-content centers that
|
|
15099
|
+
pair in the button's height. The choice column shrinks so a long choice gets its ellipsis. */
|
|
15100
|
+
display: inline-grid;
|
|
15101
|
+
grid-auto-flow: column;
|
|
15102
|
+
grid-template-columns: max-content minmax(0, max-content);
|
|
15103
|
+
grid-auto-columns: max-content;
|
|
15104
|
+
align-items: baseline;
|
|
15105
|
+
align-content: center;
|
|
15106
|
+
justify-content: start;
|
|
15079
15107
|
gap: var(--sl-gap-control);
|
|
15080
15108
|
max-width: var(--sl-picker-button-max-width);
|
|
15081
15109
|
min-width: 0;
|
|
@@ -15109,11 +15137,15 @@ textarea.FieldControl {
|
|
|
15109
15137
|
line-height: var(--sl-font-caps-condense-line-height);
|
|
15110
15138
|
letter-spacing: var(--sl-font-caps-condense-letter-spacing);
|
|
15111
15139
|
text-transform: var(--sl-font-caps-condense-text-transform);
|
|
15140
|
+
position: relative;
|
|
15141
|
+
top: var(--sl-picker-button-text-offset);
|
|
15112
15142
|
flex: none;
|
|
15113
15143
|
color: var(--sl-picker-button-label-color);
|
|
15114
15144
|
}
|
|
15115
15145
|
|
|
15116
15146
|
.PickerButtonValue {
|
|
15147
|
+
position: relative;
|
|
15148
|
+
top: var(--sl-picker-button-text-offset);
|
|
15117
15149
|
flex: 0 1 auto;
|
|
15118
15150
|
min-width: 0;
|
|
15119
15151
|
overflow: hidden;
|
|
@@ -15127,6 +15159,7 @@ textarea.FieldControl {
|
|
|
15127
15159
|
|
|
15128
15160
|
.PickerButtonIcon {
|
|
15129
15161
|
flex: none;
|
|
15162
|
+
align-self: center;
|
|
15130
15163
|
width: var(--sl-icon-size-base);
|
|
15131
15164
|
height: var(--sl-icon-size-base);
|
|
15132
15165
|
color: var(--sl-text-tertiary);
|
|
@@ -15138,7 +15171,104 @@ textarea.FieldControl {
|
|
|
15138
15171
|
transform: rotate(180deg);
|
|
15139
15172
|
}
|
|
15140
15173
|
|
|
15141
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
15174
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15175
|
+
/* PickerSplit
|
|
15176
|
+
*
|
|
15177
|
+
* A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
|
|
15178
|
+
* and a square trigger beside it, divided by a hairline, opens the list. The root carries the
|
|
15179
|
+
* field look so a popup anchors to the whole control; each part fills on hover and the border
|
|
15180
|
+
* darkens for the control as a whole. Label, choice and chevron reuse the PickerButton parts and
|
|
15181
|
+
* tokens (picker-button.*), so the two read as one family.
|
|
15182
|
+
*/
|
|
15183
|
+
|
|
15184
|
+
.PickerSplit {
|
|
15185
|
+
box-sizing: border-box;
|
|
15186
|
+
color: var(--sl-field-color);
|
|
15187
|
+
background: var(--sl-field-background);
|
|
15188
|
+
border: var(--sl-field-border-width) solid var(--sl-field-border-color);
|
|
15189
|
+
border-radius: var(--sl-field-radius);
|
|
15190
|
+
transition: var(--sl-field-transition);
|
|
15191
|
+
outline: none;
|
|
15192
|
+
display: inline-grid;
|
|
15193
|
+
grid-template-columns: minmax(0, 1fr) var(--sl-control-height-md);
|
|
15194
|
+
box-sizing: border-box;
|
|
15195
|
+
max-width: var(--sl-picker-button-max-width);
|
|
15196
|
+
min-width: 0;
|
|
15197
|
+
height: var(--sl-control-height-md);
|
|
15198
|
+
padding: 0;
|
|
15199
|
+
overflow: hidden;
|
|
15200
|
+
}
|
|
15201
|
+
|
|
15202
|
+
.PickerSplit:hover:not(:has(:disabled)) {
|
|
15203
|
+
border-color: var(--sl-field-border-color-hover);
|
|
15204
|
+
}
|
|
15205
|
+
|
|
15206
|
+
.PickerSplitMain,
|
|
15207
|
+
.PickerSplitTrigger {
|
|
15208
|
+
font-family: var(--sl-font-body-base-font-family);
|
|
15209
|
+
font-size: var(--sl-font-body-base-font-size);
|
|
15210
|
+
font-weight: var(--sl-font-body-base-font-weight);
|
|
15211
|
+
line-height: var(--sl-font-body-base-line-height);
|
|
15212
|
+
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
15213
|
+
box-sizing: border-box;
|
|
15214
|
+
height: 100%;
|
|
15215
|
+
margin: 0;
|
|
15216
|
+
border: 0;
|
|
15217
|
+
border-radius: 0;
|
|
15218
|
+
background: transparent;
|
|
15219
|
+
color: var(--sl-field-color);
|
|
15220
|
+
cursor: pointer;
|
|
15221
|
+
}
|
|
15222
|
+
|
|
15223
|
+
.PickerSplitMain {
|
|
15224
|
+
display: grid;
|
|
15225
|
+
grid-auto-flow: column;
|
|
15226
|
+
grid-template-columns: max-content minmax(0, max-content);
|
|
15227
|
+
grid-auto-columns: max-content;
|
|
15228
|
+
align-items: baseline;
|
|
15229
|
+
align-content: center;
|
|
15230
|
+
justify-content: start;
|
|
15231
|
+
gap: var(--sl-gap-control);
|
|
15232
|
+
min-width: 0;
|
|
15233
|
+
padding-block: var(--sl-control-padding-block);
|
|
15234
|
+
padding-inline: var(--sl-control-padding-inline);
|
|
15235
|
+
white-space: nowrap;
|
|
15236
|
+
}
|
|
15237
|
+
|
|
15238
|
+
.PickerSplitTrigger {
|
|
15239
|
+
display: inline-flex;
|
|
15240
|
+
align-items: center;
|
|
15241
|
+
justify-content: center;
|
|
15242
|
+
padding: 0;
|
|
15243
|
+
border-inline-start: var(--sl-stroke-default) solid var(--sl-field-border-color);
|
|
15244
|
+
}
|
|
15245
|
+
|
|
15246
|
+
@media (hover: hover) {
|
|
15247
|
+
.PickerSplitMain:hover:not(:disabled),
|
|
15248
|
+
.PickerSplitTrigger:hover:not(:disabled) {
|
|
15249
|
+
background: var(--sl-fill-subtle);
|
|
15250
|
+
}
|
|
15251
|
+
}
|
|
15252
|
+
|
|
15253
|
+
/* The focus ring sits inside each part, since the root clips its edges. */
|
|
15254
|
+
.PickerSplitMain:focus-visible,
|
|
15255
|
+
.PickerSplitTrigger:focus-visible {
|
|
15256
|
+
outline: var(--sl-stroke-strong) solid var(--sl-field-border-color-focus);
|
|
15257
|
+
outline-offset: calc(var(--sl-stroke-strong) * -1);
|
|
15258
|
+
}
|
|
15259
|
+
|
|
15260
|
+
.PickerSplitMain:disabled,
|
|
15261
|
+
.PickerSplitTrigger:disabled {
|
|
15262
|
+
color: var(--sl-field-color-disabled);
|
|
15263
|
+
cursor: not-allowed;
|
|
15264
|
+
}
|
|
15265
|
+
|
|
15266
|
+
.PickerSplitTrigger[aria-expanded='true'] .PickerButtonIcon,
|
|
15267
|
+
.PickerSplitTrigger[data-popup-open] .PickerButtonIcon {
|
|
15268
|
+
transform: rotate(180deg);
|
|
15269
|
+
}
|
|
15270
|
+
|
|
15271
|
+
/* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
|
|
15142
15272
|
/* SideNav
|
|
15143
15273
|
*
|
|
15144
15274
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|