@seed-design/css 0.2.1 → 0.2.3
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/all.css +308 -180
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/checkbox.css +5 -112
- package/recipes/checkbox.d.ts +1 -5
- package/recipes/checkbox.mjs +1 -31
- package/recipes/checkmark.css +105 -0
- package/recipes/checkmark.d.ts +28 -0
- package/recipes/checkmark.mjs +65 -0
- package/recipes/chip-tabs.css +42 -10
- package/recipes/chip-tabs.d.ts +5 -1
- package/recipes/chip-tabs.mjs +6 -0
- package/recipes/list-item.css +102 -0
- package/recipes/list-item.d.ts +24 -0
- package/recipes/list-item.mjs +59 -0
- package/recipes/radio.css +29 -50
- package/recipes/radio.d.ts +5 -1
- package/recipes/radio.mjs +8 -3
- package/recipes/radiomark.css +68 -0
- package/recipes/radiomark.d.ts +24 -0
- package/recipes/radiomark.mjs +43 -0
- package/recipes/select-box.css +0 -68
- package/recipes/select-box.d.ts +1 -1
- package/recipes/select-box.mjs +0 -16
- package/recipes/text-field.css +8 -9
- package/vars/component/checkbox.d.ts +5 -123
- package/vars/component/checkbox.mjs +5 -123
- package/vars/component/checkmark.d.ts +121 -0
- package/vars/component/checkmark.mjs +121 -0
- package/vars/component/chip-tab.d.ts +70 -10
- package/vars/component/chip-tab.mjs +70 -10
- package/vars/component/chip-tablist.d.ts +10 -2
- package/vars/component/chip-tablist.mjs +10 -2
- package/vars/component/index.d.ts +3 -0
- package/vars/component/index.mjs +3 -0
- package/vars/component/list-item.d.ts +72 -0
- package/vars/component/list-item.mjs +72 -0
- package/vars/component/radio.d.ts +28 -52
- package/vars/component/radio.mjs +28 -52
- package/vars/component/radiomark.d.ts +77 -0
- package/vars/component/radiomark.mjs +77 -0
- package/vars/component/select-box.d.ts +0 -47
- package/vars/component/select-box.mjs +0 -47
package/all.css
CHANGED
|
@@ -2648,13 +2648,52 @@
|
|
|
2648
2648
|
cursor: not-allowed;
|
|
2649
2649
|
}
|
|
2650
2650
|
|
|
2651
|
-
.seed-
|
|
2651
|
+
.seed-checkbox__label {
|
|
2652
|
+
color: var(--seed-color-fg-neutral);
|
|
2653
|
+
}
|
|
2654
|
+
|
|
2655
|
+
.seed-checkbox__label:is(:disabled, [disabled], [data-disabled]) {
|
|
2656
|
+
color: var(--seed-color-fg-disabled);
|
|
2657
|
+
}
|
|
2658
|
+
|
|
2659
|
+
.seed-checkbox__label--weight_default {
|
|
2660
|
+
font-weight: var(--seed-font-weight-regular);
|
|
2661
|
+
}
|
|
2662
|
+
|
|
2663
|
+
.seed-checkbox__label--weight_stronger {
|
|
2664
|
+
font-weight: var(--seed-font-weight-bold);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
.seed-checkbox__root--size_large {
|
|
2668
|
+
min-height: var(--seed-dimension-x9);
|
|
2669
|
+
--checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
|
|
2670
|
+
}
|
|
2671
|
+
|
|
2672
|
+
.seed-checkbox__label--size_large {
|
|
2673
|
+
font-size: var(--seed-font-size-t5);
|
|
2674
|
+
line-height: var(--seed-line-height-t5);
|
|
2675
|
+
margin-block-start: calc(18px - .65625rem);
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2678
|
+
.seed-checkbox__root--size_medium {
|
|
2679
|
+
min-height: var(--seed-dimension-x8);
|
|
2680
|
+
--checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
|
|
2681
|
+
}
|
|
2682
|
+
|
|
2683
|
+
.seed-checkbox__label--size_medium {
|
|
2684
|
+
font-size: var(--seed-font-size-t4);
|
|
2685
|
+
line-height: var(--seed-line-height-t4);
|
|
2686
|
+
margin-block-start: calc(16px - .59375rem);
|
|
2687
|
+
}
|
|
2688
|
+
|
|
2689
|
+
.seed-checkmark__root {
|
|
2652
2690
|
box-sizing: border-box;
|
|
2691
|
+
margin-top: var(--checkmark-margin-top, 0);
|
|
2653
2692
|
flex-shrink: 0;
|
|
2654
2693
|
position: relative;
|
|
2655
2694
|
}
|
|
2656
2695
|
|
|
2657
|
-
.seed-
|
|
2696
|
+
.seed-checkmark__icon {
|
|
2658
2697
|
content: "";
|
|
2659
2698
|
text-align: center;
|
|
2660
2699
|
overflow: initial;
|
|
@@ -2664,139 +2703,101 @@
|
|
|
2664
2703
|
inset: 0;
|
|
2665
2704
|
}
|
|
2666
2705
|
|
|
2667
|
-
.seed-
|
|
2668
|
-
color: var(--seed-color-fg-neutral);
|
|
2669
|
-
}
|
|
2670
|
-
|
|
2671
|
-
.seed-checkbox__label--weight_default {
|
|
2672
|
-
font-weight: var(--seed-font-weight-regular);
|
|
2673
|
-
}
|
|
2674
|
-
|
|
2675
|
-
.seed-checkbox__label--weight_stronger {
|
|
2676
|
-
font-weight: var(--seed-font-weight-bold);
|
|
2677
|
-
}
|
|
2678
|
-
|
|
2679
|
-
.seed-checkbox__control--variant_square {
|
|
2706
|
+
.seed-checkmark__root--variant_square {
|
|
2680
2707
|
border-style: solid;
|
|
2681
2708
|
border-width: 1px;
|
|
2682
2709
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
2683
2710
|
}
|
|
2684
2711
|
|
|
2685
|
-
.seed-
|
|
2712
|
+
.seed-checkmark__root--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2686
2713
|
background: var(--seed-color-bg-brand-solid);
|
|
2687
2714
|
border-width: 0;
|
|
2688
2715
|
}
|
|
2689
2716
|
|
|
2690
|
-
.seed-
|
|
2717
|
+
.seed-checkmark__root--variant_square:is(:active, [data-active]) {
|
|
2691
2718
|
background: var(--seed-color-bg-layer-default-pressed);
|
|
2692
2719
|
}
|
|
2693
2720
|
|
|
2694
|
-
.seed-
|
|
2721
|
+
.seed-checkmark__root--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2695
2722
|
background: var(--seed-color-bg-brand-solid-pressed);
|
|
2696
2723
|
}
|
|
2697
2724
|
|
|
2698
|
-
.seed-
|
|
2725
|
+
.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
|
|
2699
2726
|
background: var(--seed-color-bg-disabled);
|
|
2700
2727
|
border-color: var(--seed-color-stroke-neutral-muted);
|
|
2701
2728
|
}
|
|
2702
2729
|
|
|
2703
|
-
.seed-
|
|
2730
|
+
.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
|
|
2704
2731
|
background: var(--seed-color-bg-disabled);
|
|
2705
2732
|
}
|
|
2706
2733
|
|
|
2707
|
-
.seed-
|
|
2734
|
+
.seed-checkmark__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2708
2735
|
color: var(--seed-color-palette-static-white);
|
|
2709
2736
|
display: block;
|
|
2710
2737
|
}
|
|
2711
2738
|
|
|
2712
|
-
.seed-
|
|
2739
|
+
.seed-checkmark__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2713
2740
|
color: var(--seed-color-fg-disabled);
|
|
2714
2741
|
display: block;
|
|
2715
2742
|
}
|
|
2716
2743
|
|
|
2717
|
-
.seed-
|
|
2718
|
-
color: var(--seed-color-fg-disabled);
|
|
2719
|
-
}
|
|
2720
|
-
|
|
2721
|
-
.seed-checkbox__control--variant_ghost, .seed-checkbox__control--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2744
|
+
.seed-checkmark__root--variant_ghost, .seed-checkmark__root--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2722
2745
|
background: none;
|
|
2723
2746
|
}
|
|
2724
2747
|
|
|
2725
|
-
.seed-
|
|
2748
|
+
.seed-checkmark__root--variant_ghost:is(:active, [data-active]) {
|
|
2726
2749
|
background: var(--seed-color-bg-layer-default-pressed);
|
|
2727
2750
|
}
|
|
2728
2751
|
|
|
2729
|
-
.seed-
|
|
2752
|
+
.seed-checkmark__root--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2730
2753
|
background: var(--seed-color-palette-carrot-200);
|
|
2731
2754
|
}
|
|
2732
2755
|
|
|
2733
|
-
.seed-
|
|
2756
|
+
.seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
|
|
2734
2757
|
background: none;
|
|
2735
2758
|
}
|
|
2736
2759
|
|
|
2737
|
-
.seed-
|
|
2760
|
+
.seed-checkmark__icon--variant_ghost {
|
|
2738
2761
|
color: var(--seed-color-fg-placeholder);
|
|
2739
2762
|
display: block;
|
|
2740
2763
|
}
|
|
2741
2764
|
|
|
2742
|
-
.seed-
|
|
2765
|
+
.seed-checkmark__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
|
|
2743
2766
|
color: var(--seed-color-fg-brand);
|
|
2744
2767
|
}
|
|
2745
2768
|
|
|
2746
|
-
.seed-
|
|
2769
|
+
.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
|
|
2747
2770
|
color: var(--seed-color-fg-disabled);
|
|
2748
2771
|
}
|
|
2749
2772
|
|
|
2750
|
-
.seed-
|
|
2751
|
-
min-height: var(--seed-dimension-x9);
|
|
2752
|
-
}
|
|
2753
|
-
|
|
2754
|
-
.seed-checkbox__control--size_large {
|
|
2773
|
+
.seed-checkmark__root--size_large {
|
|
2755
2774
|
border-radius: var(--seed-radius-r1);
|
|
2756
2775
|
width: var(--seed-dimension-x6);
|
|
2757
2776
|
height: var(--seed-dimension-x6);
|
|
2758
|
-
margin: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2) 0;
|
|
2759
|
-
}
|
|
2760
|
-
|
|
2761
|
-
.seed-checkbox__label--size_large {
|
|
2762
|
-
font-size: var(--seed-font-size-t5);
|
|
2763
|
-
line-height: var(--seed-line-height-t5);
|
|
2764
|
-
margin-block-start: calc(18px - .65625rem);
|
|
2765
|
-
}
|
|
2766
|
-
|
|
2767
|
-
.seed-checkbox__root--size_medium {
|
|
2768
|
-
min-height: var(--seed-dimension-x8);
|
|
2769
2777
|
}
|
|
2770
2778
|
|
|
2771
|
-
.seed-
|
|
2779
|
+
.seed-checkmark__root--size_medium {
|
|
2772
2780
|
border-radius: var(--seed-radius-r1);
|
|
2773
2781
|
width: var(--seed-dimension-x5);
|
|
2774
2782
|
height: var(--seed-dimension-x5);
|
|
2775
|
-
margin: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2) 0;
|
|
2776
2783
|
}
|
|
2777
2784
|
|
|
2778
|
-
.seed-
|
|
2779
|
-
font-size: var(--seed-font-size-t4);
|
|
2780
|
-
line-height: var(--seed-line-height-t4);
|
|
2781
|
-
margin-block-start: calc(16px - .59375rem);
|
|
2782
|
-
}
|
|
2783
|
-
|
|
2784
|
-
.seed-checkbox__icon--size_medium-variant_ghost {
|
|
2785
|
+
.seed-checkmark__icon--size_medium-variant_ghost {
|
|
2785
2786
|
width: 14px;
|
|
2786
2787
|
height: 14px;
|
|
2787
2788
|
}
|
|
2788
2789
|
|
|
2789
|
-
.seed-
|
|
2790
|
+
.seed-checkmark__icon--size_large-variant_ghost {
|
|
2790
2791
|
width: 18px;
|
|
2791
2792
|
height: 18px;
|
|
2792
2793
|
}
|
|
2793
2794
|
|
|
2794
|
-
.seed-
|
|
2795
|
+
.seed-checkmark__icon--size_medium-variant_square {
|
|
2795
2796
|
width: 12px;
|
|
2796
2797
|
height: 12px;
|
|
2797
2798
|
}
|
|
2798
2799
|
|
|
2799
|
-
.seed-
|
|
2800
|
+
.seed-checkmark__icon--size_large-variant_square {
|
|
2800
2801
|
width: 14px;
|
|
2801
2802
|
height: 14px;
|
|
2802
2803
|
}
|
|
@@ -3067,25 +3068,41 @@
|
|
|
3067
3068
|
box-sizing: border-box;
|
|
3068
3069
|
white-space: nowrap;
|
|
3069
3070
|
border-radius: var(--seed-radius-full);
|
|
3070
|
-
padding: var(--seed-dimension-x2)
|
|
3071
|
-
|
|
3071
|
+
padding-top: var(--seed-dimension-x2);
|
|
3072
|
+
padding-bottom: var(--seed-dimension-x2);
|
|
3072
3073
|
font-family: inherit;
|
|
3073
|
-
font-
|
|
3074
|
-
font-weight: var(--seed-font-weight-bold);
|
|
3074
|
+
font-weight: var(--seed-font-weight-medium);
|
|
3075
3075
|
border: none;
|
|
3076
3076
|
justify-content: center;
|
|
3077
3077
|
align-items: center;
|
|
3078
3078
|
display: flex;
|
|
3079
3079
|
}
|
|
3080
3080
|
|
|
3081
|
-
.seed-chip-tabs__list--
|
|
3082
|
-
gap:
|
|
3081
|
+
.seed-chip-tabs__list--size_medium {
|
|
3082
|
+
gap: 8px;
|
|
3083
|
+
}
|
|
3084
|
+
|
|
3085
|
+
.seed-chip-tabs__trigger--size_medium {
|
|
3086
|
+
min-height: 36px;
|
|
3087
|
+
font-size: var(--seed-font-size-t4);
|
|
3088
|
+
padding-left: var(--seed-dimension-x3_5);
|
|
3089
|
+
padding-right: var(--seed-dimension-x3_5);
|
|
3090
|
+
}
|
|
3091
|
+
|
|
3092
|
+
.seed-chip-tabs__list--size_large {
|
|
3093
|
+
gap: 8px;
|
|
3094
|
+
}
|
|
3095
|
+
|
|
3096
|
+
.seed-chip-tabs__trigger--size_large {
|
|
3097
|
+
min-height: 40px;
|
|
3098
|
+
font-size: var(--seed-font-size-t4);
|
|
3099
|
+
padding-left: var(--seed-dimension-x4);
|
|
3100
|
+
padding-right: var(--seed-dimension-x4);
|
|
3083
3101
|
}
|
|
3084
3102
|
|
|
3085
3103
|
.seed-chip-tabs__trigger--variant_neutralSolid {
|
|
3104
|
+
background-color: var(--seed-color-bg-neutral-weak);
|
|
3086
3105
|
color: var(--seed-color-fg-neutral);
|
|
3087
|
-
font-weight: var(--seed-font-weight-bold);
|
|
3088
|
-
background-color: #0000;
|
|
3089
3106
|
}
|
|
3090
3107
|
|
|
3091
3108
|
.seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) {
|
|
@@ -3111,20 +3128,44 @@
|
|
|
3111
3128
|
color: var(--seed-color-fg-disabled);
|
|
3112
3129
|
}
|
|
3113
3130
|
|
|
3114
|
-
.seed-chip-
|
|
3115
|
-
|
|
3131
|
+
.seed-chip-tabs__trigger--variant_neutralOutline {
|
|
3132
|
+
border: 1px solid var(--seed-color-stroke-neutral-muted);
|
|
3133
|
+
color: var(--seed-color-fg-neutral);
|
|
3134
|
+
background-color: #0000;
|
|
3135
|
+
}
|
|
3136
|
+
|
|
3137
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]) {
|
|
3138
|
+
background-color: var(--seed-color-bg-neutral-inverted);
|
|
3139
|
+
color: var(--seed-color-fg-neutral-inverted);
|
|
3140
|
+
border-color: #0000;
|
|
3141
|
+
}
|
|
3142
|
+
|
|
3143
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
|
|
3144
|
+
background-color: var(--seed-color-bg-layer-default-pressed);
|
|
3145
|
+
}
|
|
3146
|
+
|
|
3147
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]):is(:active, [data-active]) {
|
|
3148
|
+
background-color: var(--seed-color-bg-neutral-inverted-pressed);
|
|
3149
|
+
}
|
|
3150
|
+
|
|
3151
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
|
|
3152
|
+
cursor: not-allowed;
|
|
3153
|
+
color: var(--seed-color-fg-disabled);
|
|
3154
|
+
}
|
|
3155
|
+
|
|
3156
|
+
.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
|
|
3157
|
+
background-color: var(--seed-color-bg-disabled);
|
|
3158
|
+
color: var(--seed-color-fg-disabled);
|
|
3116
3159
|
}
|
|
3117
3160
|
|
|
3118
3161
|
.seed-chip-tabs__trigger--variant_brandSolid {
|
|
3119
3162
|
background-color: var(--seed-color-bg-neutral-weak);
|
|
3120
3163
|
color: var(--seed-color-fg-neutral-muted);
|
|
3121
|
-
font-weight: var(--seed-font-weight-medium);
|
|
3122
3164
|
}
|
|
3123
3165
|
|
|
3124
3166
|
.seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]) {
|
|
3125
3167
|
background-color: var(--seed-color-bg-brand-solid);
|
|
3126
3168
|
color: var(--seed-color-palette-static-white);
|
|
3127
|
-
font-weight: var(--seed-font-weight-bold);
|
|
3128
3169
|
}
|
|
3129
3170
|
|
|
3130
3171
|
.seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
|
|
@@ -4164,6 +4205,119 @@
|
|
|
4164
4205
|
--seed-suffix-icon-size: var(--seed-dimension-x3);
|
|
4165
4206
|
}
|
|
4166
4207
|
|
|
4208
|
+
.seed-list-item__root {
|
|
4209
|
+
box-sizing: border-box;
|
|
4210
|
+
-webkit-font-smoothing: antialiased;
|
|
4211
|
+
-moz-osx-font-smoothing: grayscale;
|
|
4212
|
+
z-index: 0;
|
|
4213
|
+
width: 100%;
|
|
4214
|
+
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
|
|
4215
|
+
padding-block: var(--seed-dimension-x2_5);
|
|
4216
|
+
--seed-box-align-items: center;
|
|
4217
|
+
align-items: var(--seed-box-align-items);
|
|
4218
|
+
transition-property: background-color;
|
|
4219
|
+
transition-duration: var(--seed-duration-d3);
|
|
4220
|
+
transition-timing-function: var(--seed-timing-function-easing);
|
|
4221
|
+
border: none;
|
|
4222
|
+
font-family: inherit;
|
|
4223
|
+
display: flex;
|
|
4224
|
+
position: relative;
|
|
4225
|
+
}
|
|
4226
|
+
|
|
4227
|
+
.seed-list-item__prefix {
|
|
4228
|
+
--seed-box-padding-right: var(--seed-dimension-x3);
|
|
4229
|
+
padding-right: var(--seed-box-padding-right);
|
|
4230
|
+
--seed-icon-size: 22px;
|
|
4231
|
+
--seed-icon-color: var(--seed-color-fg-neutral);
|
|
4232
|
+
flex-shrink: 0;
|
|
4233
|
+
align-items: center;
|
|
4234
|
+
display: inline-flex;
|
|
4235
|
+
}
|
|
4236
|
+
|
|
4237
|
+
.seed-list-item__prefix:is(:disabled, [disabled], [data-disabled]) {
|
|
4238
|
+
--seed-icon-color: var(--seed-color-fg-disabled);
|
|
4239
|
+
}
|
|
4240
|
+
|
|
4241
|
+
.seed-list-item__suffix {
|
|
4242
|
+
--seed-box-position: initial;
|
|
4243
|
+
position: var(--seed-box-position);
|
|
4244
|
+
--seed-box-gap: var(--seed-dimension-x1);
|
|
4245
|
+
align-items: center;
|
|
4246
|
+
gap: var(--seed-box-gap);
|
|
4247
|
+
font-size: var(--seed-font-size-t5);
|
|
4248
|
+
line-height: var(--seed-line-height-t5);
|
|
4249
|
+
font-weight: var(--seed-font-weight-regular);
|
|
4250
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
4251
|
+
--seed-icon-size: 18px;
|
|
4252
|
+
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
|
|
4253
|
+
flex-shrink: 0;
|
|
4254
|
+
display: inline-flex;
|
|
4255
|
+
}
|
|
4256
|
+
|
|
4257
|
+
.seed-list-item__suffix:is(:disabled, [disabled], [data-disabled]) {
|
|
4258
|
+
--seed-icon-color: var(--seed-color-fg-disabled);
|
|
4259
|
+
}
|
|
4260
|
+
|
|
4261
|
+
.seed-list-item__content {
|
|
4262
|
+
box-sizing: border-box;
|
|
4263
|
+
text-align: start;
|
|
4264
|
+
--seed-box-gap: var(--seed-dimension-x0_5);
|
|
4265
|
+
align-items: flex-start;
|
|
4266
|
+
gap: var(--seed-box-gap);
|
|
4267
|
+
--seed-box-padding-right: var(--seed-dimension-x2_5);
|
|
4268
|
+
padding-right: var(--seed-box-padding-right);
|
|
4269
|
+
flex-direction: column;
|
|
4270
|
+
flex-grow: 1;
|
|
4271
|
+
display: inline-flex;
|
|
4272
|
+
}
|
|
4273
|
+
|
|
4274
|
+
.seed-list-item__content:after {
|
|
4275
|
+
content: "";
|
|
4276
|
+
position: absolute;
|
|
4277
|
+
inset: 0;
|
|
4278
|
+
}
|
|
4279
|
+
|
|
4280
|
+
.seed-list-item__content:before {
|
|
4281
|
+
content: "";
|
|
4282
|
+
z-index: -1;
|
|
4283
|
+
transition-property: background-color;
|
|
4284
|
+
transition-duration: var(--seed-duration-d3);
|
|
4285
|
+
transition-timing-function: var(--seed-timing-function-easing);
|
|
4286
|
+
position: absolute;
|
|
4287
|
+
inset: 0;
|
|
4288
|
+
}
|
|
4289
|
+
|
|
4290
|
+
.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before, .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
|
|
4291
|
+
background-color: var(--seed-color-bg-layer-default-pressed);
|
|
4292
|
+
}
|
|
4293
|
+
|
|
4294
|
+
.seed-list-item__title {
|
|
4295
|
+
font-size: var(--seed-font-size-t5);
|
|
4296
|
+
line-height: var(--seed-line-height-t5);
|
|
4297
|
+
font-weight: var(--seed-font-weight-medium);
|
|
4298
|
+
color: var(--seed-color-fg-neutral);
|
|
4299
|
+
flex-shrink: 0;
|
|
4300
|
+
}
|
|
4301
|
+
|
|
4302
|
+
.seed-list-item__title:is(:disabled, [disabled], [data-disabled]) {
|
|
4303
|
+
color: var(--seed-color-fg-disabled);
|
|
4304
|
+
}
|
|
4305
|
+
|
|
4306
|
+
.seed-list-item__detail {
|
|
4307
|
+
font-size: var(--seed-font-size-t3);
|
|
4308
|
+
line-height: var(--seed-line-height-t3);
|
|
4309
|
+
font-weight: var(--seed-font-weight-regular);
|
|
4310
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
4311
|
+
}
|
|
4312
|
+
|
|
4313
|
+
.seed-list-item__detail:is(:disabled, [disabled], [data-disabled]) {
|
|
4314
|
+
color: var(--seed-color-fg-neutral-subtle);
|
|
4315
|
+
}
|
|
4316
|
+
|
|
4317
|
+
.seed-list-item__root--highlighted_true {
|
|
4318
|
+
background-color: var(--seed-color-palette-carrot-100);
|
|
4319
|
+
}
|
|
4320
|
+
|
|
4167
4321
|
.seed-manner-temp {
|
|
4168
4322
|
box-sizing: border-box;
|
|
4169
4323
|
justify-content: flex-start;
|
|
@@ -4782,80 +4936,136 @@
|
|
|
4782
4936
|
}
|
|
4783
4937
|
|
|
4784
4938
|
.seed-radio__root {
|
|
4939
|
+
vertical-align: top;
|
|
4940
|
+
isolation: isolate;
|
|
4941
|
+
cursor: pointer;
|
|
4942
|
+
align-items: flex-start;
|
|
4943
|
+
gap: var(--seed-dimension-x2);
|
|
4944
|
+
max-inline-size: 100%;
|
|
4945
|
+
display: inline-flex;
|
|
4946
|
+
position: relative;
|
|
4947
|
+
}
|
|
4948
|
+
|
|
4949
|
+
.seed-radio__root:is(:disabled, [disabled], [data-disabled]) {
|
|
4950
|
+
cursor: not-allowed;
|
|
4951
|
+
}
|
|
4952
|
+
|
|
4953
|
+
.seed-radio__label {
|
|
4954
|
+
color: var(--seed-color-fg-neutral);
|
|
4955
|
+
}
|
|
4956
|
+
|
|
4957
|
+
.seed-radio__label:is(:disabled, [disabled], [data-disabled]) {
|
|
4958
|
+
color: var(--seed-color-fg-disabled);
|
|
4959
|
+
}
|
|
4960
|
+
|
|
4961
|
+
.seed-radio__label--weight_default {
|
|
4962
|
+
font-weight: var(--seed-font-weight-regular);
|
|
4963
|
+
}
|
|
4964
|
+
|
|
4965
|
+
.seed-radio__label--weight_stronger {
|
|
4966
|
+
font-weight: var(--seed-font-weight-bold);
|
|
4967
|
+
}
|
|
4968
|
+
|
|
4969
|
+
.seed-radio__root--size_large {
|
|
4970
|
+
min-height: var(--seed-dimension-x9);
|
|
4971
|
+
--radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
|
|
4972
|
+
}
|
|
4973
|
+
|
|
4974
|
+
.seed-radio__label--size_large {
|
|
4975
|
+
font-size: var(--seed-font-size-t5);
|
|
4976
|
+
line-height: var(--seed-line-height-t5);
|
|
4977
|
+
margin-block-start: calc(18px - .65625rem);
|
|
4978
|
+
}
|
|
4979
|
+
|
|
4980
|
+
.seed-radio__root--size_medium {
|
|
4981
|
+
min-height: var(--seed-dimension-x8);
|
|
4982
|
+
--radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4985
|
+
.seed-radio__label--size_medium {
|
|
4986
|
+
font-size: var(--seed-font-size-t4);
|
|
4987
|
+
line-height: var(--seed-line-height-t4);
|
|
4988
|
+
margin-block-start: calc(16px - .59375rem);
|
|
4989
|
+
}
|
|
4990
|
+
|
|
4991
|
+
.seed-radiomark__root {
|
|
4785
4992
|
box-sizing: border-box;
|
|
4786
4993
|
background-color: var(--seed-color-bg-layer-default);
|
|
4787
4994
|
border-style: solid;
|
|
4788
4995
|
border-width: 1px;
|
|
4789
4996
|
border-color: var(--seed-color-stroke-neutral-weak);
|
|
4790
4997
|
border-radius: var(--seed-radius-full);
|
|
4998
|
+
margin-top: var(--radiomark-margin-top, 0);
|
|
4791
4999
|
flex: none;
|
|
4792
5000
|
justify-content: center;
|
|
4793
5001
|
align-items: center;
|
|
4794
5002
|
display: flex;
|
|
5003
|
+
position: relative;
|
|
4795
5004
|
}
|
|
4796
5005
|
|
|
4797
|
-
.seed-
|
|
5006
|
+
.seed-radiomark__root:is(:active, [data-active]) {
|
|
4798
5007
|
background-color: var(--seed-color-bg-layer-default-pressed);
|
|
4799
5008
|
}
|
|
4800
5009
|
|
|
4801
|
-
.seed-
|
|
5010
|
+
.seed-radiomark__root:is(:checked, [data-checked]) {
|
|
4802
5011
|
background-color: var(--seed-color-bg-brand-solid);
|
|
4803
5012
|
border-width: 0;
|
|
4804
5013
|
}
|
|
4805
5014
|
|
|
4806
|
-
.seed-
|
|
5015
|
+
.seed-radiomark__root:is(:active, [data-active]):is(:checked, [data-checked]) {
|
|
4807
5016
|
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
4808
5017
|
}
|
|
4809
5018
|
|
|
4810
|
-
.seed-
|
|
5019
|
+
.seed-radiomark__root:is(:disabled, [disabled], [data-disabled]) {
|
|
4811
5020
|
background-color: var(--seed-color-palette-gray-300);
|
|
4812
5021
|
}
|
|
4813
5022
|
|
|
4814
|
-
.seed-
|
|
4815
|
-
|
|
5023
|
+
.seed-radiomark__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
|
|
5024
|
+
border-width: 1px;
|
|
4816
5025
|
border-color: var(--seed-color-palette-gray-300);
|
|
5026
|
+
background: none;
|
|
4817
5027
|
}
|
|
4818
5028
|
|
|
4819
|
-
.seed-
|
|
5029
|
+
.seed-radiomark__icon {
|
|
4820
5030
|
border-radius: var(--seed-radius-full);
|
|
4821
5031
|
display: none;
|
|
4822
5032
|
}
|
|
4823
5033
|
|
|
4824
|
-
.seed-
|
|
4825
|
-
|
|
5034
|
+
.seed-radiomark__icon:is(:checked, [data-checked]) {
|
|
5035
|
+
color: var(--seed-color-palette-static-white);
|
|
4826
5036
|
display: block;
|
|
4827
5037
|
}
|
|
4828
5038
|
|
|
4829
|
-
.seed-
|
|
4830
|
-
|
|
5039
|
+
.seed-radiomark__icon:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
|
|
5040
|
+
color: var(--seed-color-palette-gray-300);
|
|
4831
5041
|
}
|
|
4832
5042
|
|
|
4833
|
-
.seed-
|
|
5043
|
+
.seed-radiomark__root--size_large {
|
|
4834
5044
|
width: var(--seed-dimension-x6);
|
|
4835
5045
|
height: var(--seed-dimension-x6);
|
|
4836
5046
|
}
|
|
4837
5047
|
|
|
4838
|
-
.seed-
|
|
5048
|
+
.seed-radiomark__icon--size_large {
|
|
4839
5049
|
width: var(--seed-dimension-x2_5);
|
|
4840
5050
|
height: var(--seed-dimension-x2_5);
|
|
4841
5051
|
}
|
|
4842
5052
|
|
|
4843
|
-
.seed-
|
|
5053
|
+
.seed-radiomark__icon--size_large:is(:disabled, [disabled], [data-disabled]) {
|
|
4844
5054
|
width: var(--seed-dimension-x3);
|
|
4845
5055
|
height: var(--seed-dimension-x3);
|
|
4846
5056
|
}
|
|
4847
5057
|
|
|
4848
|
-
.seed-
|
|
5058
|
+
.seed-radiomark__root--size_medium {
|
|
4849
5059
|
width: var(--seed-dimension-x5);
|
|
4850
5060
|
height: var(--seed-dimension-x5);
|
|
4851
5061
|
}
|
|
4852
5062
|
|
|
4853
|
-
.seed-
|
|
5063
|
+
.seed-radiomark__icon--size_medium {
|
|
4854
5064
|
width: var(--seed-dimension-x2);
|
|
4855
5065
|
height: var(--seed-dimension-x2);
|
|
4856
5066
|
}
|
|
4857
5067
|
|
|
4858
|
-
.seed-
|
|
5068
|
+
.seed-radiomark__icon--size_medium:is(:disabled, [disabled], [data-disabled]) {
|
|
4859
5069
|
width: var(--seed-dimension-x2_5);
|
|
4860
5070
|
height: var(--seed-dimension-x2_5);
|
|
4861
5071
|
}
|
|
@@ -5053,86 +5263,6 @@
|
|
|
5053
5263
|
display: flex;
|
|
5054
5264
|
}
|
|
5055
5265
|
|
|
5056
|
-
.seed-select-box__checkboxControl {
|
|
5057
|
-
box-sizing: border-box;
|
|
5058
|
-
width: var(--seed-dimension-x6);
|
|
5059
|
-
height: var(--seed-dimension-x6);
|
|
5060
|
-
background-color: var(--seed-color-bg-layer-default);
|
|
5061
|
-
border-style: solid;
|
|
5062
|
-
border-width: 1px;
|
|
5063
|
-
border-color: var(--seed-color-stroke-neutral-weak);
|
|
5064
|
-
border-radius: var(--seed-radius-r1);
|
|
5065
|
-
flex: none;
|
|
5066
|
-
justify-content: center;
|
|
5067
|
-
align-items: center;
|
|
5068
|
-
display: flex;
|
|
5069
|
-
}
|
|
5070
|
-
|
|
5071
|
-
.seed-select-box__checkboxControl:is(:active, [data-active]) {
|
|
5072
|
-
background-color: var(--seed-color-bg-layer-default-pressed);
|
|
5073
|
-
}
|
|
5074
|
-
|
|
5075
|
-
.seed-select-box__checkboxControl:is(:checked, [data-checked]) {
|
|
5076
|
-
background-color: var(--seed-color-bg-brand-solid);
|
|
5077
|
-
border-width: 0;
|
|
5078
|
-
}
|
|
5079
|
-
|
|
5080
|
-
.seed-select-box__checkboxControl:is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
5081
|
-
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
5082
|
-
}
|
|
5083
|
-
|
|
5084
|
-
.seed-select-box__checkboxIcon {
|
|
5085
|
-
width: var(--seed-dimension-x3_5);
|
|
5086
|
-
height: var(--seed-dimension-x3_5);
|
|
5087
|
-
display: none;
|
|
5088
|
-
}
|
|
5089
|
-
|
|
5090
|
-
.seed-select-box__checkboxIcon:is(:checked, [data-checked]) {
|
|
5091
|
-
color: var(--seed-color-palette-static-white);
|
|
5092
|
-
display: block;
|
|
5093
|
-
}
|
|
5094
|
-
|
|
5095
|
-
.seed-select-box__radioControl {
|
|
5096
|
-
box-sizing: border-box;
|
|
5097
|
-
width: var(--seed-dimension-x6);
|
|
5098
|
-
height: var(--seed-dimension-x6);
|
|
5099
|
-
background-color: var(--seed-color-bg-layer-default);
|
|
5100
|
-
border-style: solid;
|
|
5101
|
-
border-width: 1px;
|
|
5102
|
-
border-color: var(--seed-color-stroke-neutral-weak);
|
|
5103
|
-
border-radius: var(--seed-radius-full);
|
|
5104
|
-
flex: none;
|
|
5105
|
-
justify-content: center;
|
|
5106
|
-
align-items: center;
|
|
5107
|
-
display: flex;
|
|
5108
|
-
}
|
|
5109
|
-
|
|
5110
|
-
.seed-select-box__radioControl:is(:active, [data-active]) {
|
|
5111
|
-
background-color: var(--seed-color-bg-layer-default-pressed);
|
|
5112
|
-
}
|
|
5113
|
-
|
|
5114
|
-
.seed-select-box__radioControl:is(:checked, [data-checked]) {
|
|
5115
|
-
background-color: var(--seed-color-bg-brand-solid);
|
|
5116
|
-
border-width: 0;
|
|
5117
|
-
}
|
|
5118
|
-
|
|
5119
|
-
.seed-select-box__radioControl:is(:checked, [data-checked]):is(:active, [data-active]) {
|
|
5120
|
-
background-color: var(--seed-color-bg-brand-solid-pressed);
|
|
5121
|
-
}
|
|
5122
|
-
|
|
5123
|
-
.seed-select-box__radioIcon {
|
|
5124
|
-
width: var(--seed-dimension-x2_5);
|
|
5125
|
-
height: var(--seed-dimension-x2_5);
|
|
5126
|
-
border-radius: var(--seed-radius-full);
|
|
5127
|
-
display: none;
|
|
5128
|
-
}
|
|
5129
|
-
|
|
5130
|
-
.seed-select-box__radioIcon:is(:checked, [data-checked]) {
|
|
5131
|
-
background-color: var(--seed-color-palette-static-white);
|
|
5132
|
-
color: var(--seed-color-palette-static-white);
|
|
5133
|
-
display: block;
|
|
5134
|
-
}
|
|
5135
|
-
|
|
5136
5266
|
.seed-select-box__label {
|
|
5137
5267
|
color: var(--seed-color-fg-neutral);
|
|
5138
5268
|
font-weight: var(--seed-font-weight-bold);
|
|
@@ -5924,9 +6054,17 @@
|
|
|
5924
6054
|
.seed-text-field__value {
|
|
5925
6055
|
box-sizing: border-box;
|
|
5926
6056
|
font: inherit;
|
|
6057
|
+
resize: none;
|
|
6058
|
+
height: 100%;
|
|
6059
|
+
color: var(--seed-color-fg-neutral);
|
|
6060
|
+
background: none;
|
|
6061
|
+
border: none;
|
|
6062
|
+
outline: none;
|
|
6063
|
+
flex-grow: 1;
|
|
5927
6064
|
}
|
|
5928
6065
|
|
|
5929
6066
|
.seed-text-field__value:is(input) {
|
|
6067
|
+
width: 0;
|
|
5930
6068
|
padding-inline: 0;
|
|
5931
6069
|
}
|
|
5932
6070
|
|
|
@@ -5936,16 +6074,6 @@
|
|
|
5936
6074
|
padding-inline: 0;
|
|
5937
6075
|
}
|
|
5938
6076
|
|
|
5939
|
-
.seed-text-field__value {
|
|
5940
|
-
resize: none;
|
|
5941
|
-
height: 100%;
|
|
5942
|
-
color: var(--seed-color-fg-neutral);
|
|
5943
|
-
background: none;
|
|
5944
|
-
border: none;
|
|
5945
|
-
outline: none;
|
|
5946
|
-
flex-grow: 1;
|
|
5947
|
-
}
|
|
5948
|
-
|
|
5949
6077
|
.seed-text-field__value::placeholder {
|
|
5950
6078
|
color: var(--seed-color-fg-placeholder);
|
|
5951
6079
|
}
|