@scania/tegel-lite 1.7.0 → 1.8.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/components.css +970 -152
- package/dist/global.css +4 -0
- package/dist/tl-dropdown.css +28 -43
- package/dist/tl-folder-tabs.css +0 -1
- package/dist/tl-popover-menu.css +1 -1
- package/dist/tl-table.css +878 -0
- package/dist/tl-text-field.css +46 -70
- package/dist/tl-textarea.css +30 -37
- package/package.json +4 -3
package/dist/components.css
CHANGED
|
@@ -3048,16 +3048,6 @@
|
|
|
3048
3048
|
--dropdown-icon: var(--component-dropdown-icon-default);
|
|
3049
3049
|
--dropdown-clear-icon: var(--component--input-icon-control-default);
|
|
3050
3050
|
--dropdown-error: var(--component--input-text-error-default);
|
|
3051
|
-
--dropdown-border-bottom-width: calc(var(--component--input-border-width-bottom) * 1px);
|
|
3052
|
-
--dropdown-border-left-width: calc(var(--component--input-border-width-left) * 1px);
|
|
3053
|
-
--dropdown-border-right-width: calc(var(--component--input-border-width-right) * 1px);
|
|
3054
|
-
--dropdown-border-top-width: calc(var(--component--input-border-width-top) * 1px);
|
|
3055
|
-
--dropdown-border: var(--component--input-border-default);
|
|
3056
|
-
--dropdown-border-hover: var(--component--input-border-hover);
|
|
3057
|
-
--dropdown-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
3058
|
-
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
3059
|
-
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
3060
|
-
calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3061
3051
|
--dropdown-list-border-radius: calc(var(--component-dropdown-border-radius-default) * 1px);
|
|
3062
3052
|
--dropdown-list-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
|
|
3063
3053
|
--dropdown-option-background: var(--component-dropdown-background-item-default);
|
|
@@ -3129,16 +3119,14 @@ body {
|
|
|
3129
3119
|
font-weight: var(--type-system-body-01-font-weight);
|
|
3130
3120
|
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
3131
3121
|
text-transform: var(--type-system-body-01-text-transform);
|
|
3132
|
-
border-
|
|
3133
|
-
border-
|
|
3134
|
-
border-
|
|
3135
|
-
border-
|
|
3136
|
-
border-radius: var(--dropdown-border-radius);
|
|
3122
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3123
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3124
|
+
border-style: solid;
|
|
3125
|
+
border-color: var(--component--input-border-default);
|
|
3137
3126
|
width: 100%;
|
|
3138
3127
|
appearance: none;
|
|
3139
3128
|
background: var(--dropdown-background);
|
|
3140
3129
|
color: var(--dropdown-text);
|
|
3141
|
-
border-radius: var(--dropdown-border-radius);
|
|
3142
3130
|
position: relative;
|
|
3143
3131
|
outline: none;
|
|
3144
3132
|
text-align: left;
|
|
@@ -3150,11 +3138,10 @@ body {
|
|
|
3150
3138
|
justify-content: flex-start;
|
|
3151
3139
|
}
|
|
3152
3140
|
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):hover {
|
|
3153
|
-
border-
|
|
3154
|
-
border-
|
|
3155
|
-
border-
|
|
3156
|
-
border-
|
|
3157
|
-
border-radius: var(--dropdown-border-radius);
|
|
3141
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3142
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3143
|
+
border-style: solid;
|
|
3144
|
+
border-color: var(--component--input-border-hover);
|
|
3158
3145
|
}
|
|
3159
3146
|
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):focus {
|
|
3160
3147
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -3163,18 +3150,16 @@ body {
|
|
|
3163
3150
|
z-index: 1;
|
|
3164
3151
|
}
|
|
3165
3152
|
.tl-dropdown--error :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
|
|
3166
|
-
border-
|
|
3167
|
-
border-
|
|
3168
|
-
border-
|
|
3169
|
-
border-
|
|
3170
|
-
border-radius: var(--dropdown-border-radius);
|
|
3153
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3154
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3155
|
+
border-style: solid;
|
|
3156
|
+
border-color: var(--component--input-text-error-default);
|
|
3171
3157
|
}
|
|
3172
3158
|
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):disabled {
|
|
3173
|
-
border-
|
|
3174
|
-
border-
|
|
3175
|
-
border-
|
|
3176
|
-
border-
|
|
3177
|
-
border-radius: var(--dropdown-border-radius);
|
|
3159
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3160
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3161
|
+
border-style: solid;
|
|
3162
|
+
border-color: var(--component--input-border-default);
|
|
3178
3163
|
box-shadow: none;
|
|
3179
3164
|
cursor: not-allowed;
|
|
3180
3165
|
pointer-events: none;
|
|
@@ -3785,7 +3770,6 @@ body {
|
|
|
3785
3770
|
.tl-dropdown__input::placeholder,
|
|
3786
3771
|
.tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
|
|
3787
3772
|
color: var(--dropdown-placeholder);
|
|
3788
|
-
border-radius: var(--dropdown-border-radius);
|
|
3789
3773
|
box-shadow: none;
|
|
3790
3774
|
transition: box-shadow 0.2s;
|
|
3791
3775
|
}
|
|
@@ -3811,11 +3795,10 @@ body {
|
|
|
3811
3795
|
box-shadow: none;
|
|
3812
3796
|
}
|
|
3813
3797
|
:is(.traton, .scania) .tl-dropdown__select:hover:not(:disabled) {
|
|
3814
|
-
border-
|
|
3815
|
-
border-
|
|
3816
|
-
border-
|
|
3817
|
-
border-
|
|
3818
|
-
border-radius: var(--dropdown-border-radius);
|
|
3798
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3799
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3800
|
+
border-style: solid;
|
|
3801
|
+
border-color: var(--component--input-border-hover);
|
|
3819
3802
|
}
|
|
3820
3803
|
:is(.traton, .scania) .tl-dropdown__select:focus-visible {
|
|
3821
3804
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -3825,15 +3808,17 @@ body {
|
|
|
3825
3808
|
}
|
|
3826
3809
|
|
|
3827
3810
|
.tl-dropdown__select {
|
|
3828
|
-
border-
|
|
3829
|
-
border-
|
|
3830
|
-
border-
|
|
3831
|
-
border-
|
|
3832
|
-
border-radius: var(--dropdown-border-radius);
|
|
3811
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3812
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3813
|
+
border-style: solid;
|
|
3814
|
+
border-color: var(--component--input-border-default);
|
|
3833
3815
|
}
|
|
3834
3816
|
|
|
3835
3817
|
:is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select {
|
|
3836
|
-
border-
|
|
3818
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3819
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3820
|
+
border-style: solid;
|
|
3821
|
+
border-color: var(--component--input-text-error-default);
|
|
3837
3822
|
}
|
|
3838
3823
|
:is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select:disabled {
|
|
3839
3824
|
border-color: transparent;
|
|
@@ -7485,7 +7470,7 @@ body {
|
|
|
7485
7470
|
background-color: var(--popover-menu-background-hover);
|
|
7486
7471
|
}
|
|
7487
7472
|
.tl-popover-menu__item:focus-visible {
|
|
7488
|
-
outline: 2px solid var(--
|
|
7473
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
7489
7474
|
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
7490
7475
|
outline-offset: -2px;
|
|
7491
7476
|
z-index: 1;
|
|
@@ -8933,6 +8918,871 @@ body {
|
|
|
8933
8918
|
gap: 36px;
|
|
8934
8919
|
}
|
|
8935
8920
|
|
|
8921
|
+
/**
|
|
8922
|
+
* Do not edit directly, this file was auto-generated.
|
|
8923
|
+
*/
|
|
8924
|
+
:root,
|
|
8925
|
+
.tds-mode-light,
|
|
8926
|
+
.scania .tds-mode-light,
|
|
8927
|
+
.scania.tds-mode-light,
|
|
8928
|
+
.scania .tl-mode-light,
|
|
8929
|
+
.scania.tl-mode-light {
|
|
8930
|
+
--component-table-background-footer-default: var(--scania-color-grey-150);
|
|
8931
|
+
--component-table-background-header-default: var(--scania-color-grey-150);
|
|
8932
|
+
--component-table-background-header-hover: var(--scania-color-grey-200);
|
|
8933
|
+
--component-table-background-toolbar-default: var(--scania-color-grey-200);
|
|
8934
|
+
--component-table-background-cell-primary-default: var(--scania-color-grey-50);
|
|
8935
|
+
--component-table-background-cell-primary-hover: var(--scania-color-grey-100);
|
|
8936
|
+
--component-table-background-cell-secondary-default: var(--scania-color-base-white);
|
|
8937
|
+
--component-table-background-cell-secondary-hover: var(--scania-color-grey-100);
|
|
8938
|
+
--component-table-background-cell-selected-default: var(--scania-color-grey-150);
|
|
8939
|
+
--component-table-background-cell-selected-hover: var(--scania-color-grey-200);
|
|
8940
|
+
--component-table-background-cell-expanded-default: var(
|
|
8941
|
+
--component-table-background-cell-selected-default
|
|
8942
|
+
);
|
|
8943
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
8944
|
+
--component-table-border-divider-hover: var(--scania-color-transparent-250);
|
|
8945
|
+
--component-table-border-radius-default: var(--scania-unit-4);
|
|
8946
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
8947
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
8948
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
8949
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
8950
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
8951
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
8952
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
8953
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
8954
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
8955
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
8956
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
8957
|
+
}
|
|
8958
|
+
|
|
8959
|
+
.traton .tds-mode-light,
|
|
8960
|
+
.traton.tds-mode-light,
|
|
8961
|
+
.traton .tl-mode-light,
|
|
8962
|
+
.traton.tl-mode-light {
|
|
8963
|
+
--component-table-background-footer-default: var(--traton-color-grey-200);
|
|
8964
|
+
--component-table-background-header-default: var(--traton-color-grey-300);
|
|
8965
|
+
--component-table-background-header-hover: var(--traton-color-grey-400);
|
|
8966
|
+
--component-table-background-toolbar-default: var(--traton-color-grey-400);
|
|
8967
|
+
--component-table-background-cell-primary-default: var(--color-background-layer-01);
|
|
8968
|
+
--component-table-background-cell-primary-hover: var(--traton-color-grey-200);
|
|
8969
|
+
--component-table-background-cell-secondary-default: var(--color-background-layer-02);
|
|
8970
|
+
--component-table-background-cell-secondary-hover: var(--traton-color-grey-200);
|
|
8971
|
+
--component-table-background-cell-selected-default: var(--traton-color-grey-300);
|
|
8972
|
+
--component-table-background-cell-selected-hover: var(--traton-color-grey-400);
|
|
8973
|
+
--component-table-background-cell-expanded-default: var(
|
|
8974
|
+
--component-table-background-cell-selected-default
|
|
8975
|
+
);
|
|
8976
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
8977
|
+
--component-table-border-divider-hover: var(--traton-color-transparent-400);
|
|
8978
|
+
--component-table-border-radius-default: var(--traton-unit-4);
|
|
8979
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
8980
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
8981
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
8982
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
8983
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
8984
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
8985
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
8986
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
8987
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
8988
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
8989
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
8990
|
+
}
|
|
8991
|
+
|
|
8992
|
+
.tds-mode-dark,
|
|
8993
|
+
.scania .tds-mode-dark,
|
|
8994
|
+
.scania.tds-mode-dark,
|
|
8995
|
+
.scania .tl-mode-dark,
|
|
8996
|
+
.scania.tl-mode-dark {
|
|
8997
|
+
--component-table-background-footer-default: var(--scania-color-grey-700);
|
|
8998
|
+
--component-table-background-header-default: var(--scania-color-grey-700);
|
|
8999
|
+
--component-table-background-header-hover: var(--scania-color-grey-650);
|
|
9000
|
+
--component-table-background-toolbar-default: var(--scania-color-grey-650);
|
|
9001
|
+
--component-table-background-cell-primary-default: var(--scania-color-grey-850);
|
|
9002
|
+
--component-table-background-cell-primary-hover: var(--scania-color-grey-750);
|
|
9003
|
+
--component-table-background-cell-secondary-default: var(--scania-color-grey-800);
|
|
9004
|
+
--component-table-background-cell-secondary-hover: var(--scania-color-grey-750);
|
|
9005
|
+
--component-table-background-cell-selected-default: var(--scania-color-grey-700);
|
|
9006
|
+
--component-table-background-cell-selected-hover: var(--scania-color-grey-650);
|
|
9007
|
+
--component-table-background-cell-expanded-default: var(
|
|
9008
|
+
--component-table-background-cell-selected-default
|
|
9009
|
+
);
|
|
9010
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
9011
|
+
--component-table-border-divider-hover: var(--scania-color-transparent-inverse-500);
|
|
9012
|
+
--component-table-border-radius-default: var(--scania-unit-4);
|
|
9013
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
9014
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
9015
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
9016
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
9017
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
9018
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
9019
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
9020
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
9021
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
9022
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
9023
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
9024
|
+
}
|
|
9025
|
+
|
|
9026
|
+
.traton .tds-mode-dark,
|
|
9027
|
+
.traton.tds-mode-dark,
|
|
9028
|
+
.traton .tl-mode-dark,
|
|
9029
|
+
.traton.tl-mode-dark {
|
|
9030
|
+
--component-table-background-footer-default: var(--traton-color-blue-800);
|
|
9031
|
+
--component-table-background-header-default: var(--traton-color-blue-800);
|
|
9032
|
+
--component-table-background-header-hover: var(--traton-color-blue-700);
|
|
9033
|
+
--component-table-background-toolbar-default: var(--traton-color-blue-700);
|
|
9034
|
+
--component-table-background-cell-primary-default: var(--color-background-layer-01);
|
|
9035
|
+
--component-table-background-cell-primary-hover: var(--traton-color-blue-850);
|
|
9036
|
+
--component-table-background-cell-secondary-default: var(--color-background-layer-02);
|
|
9037
|
+
--component-table-background-cell-secondary-hover: var(--traton-color-blue-800);
|
|
9038
|
+
--component-table-background-cell-selected-default: var(--traton-color-blue-800);
|
|
9039
|
+
--component-table-background-cell-selected-hover: var(--traton-color-blue-700);
|
|
9040
|
+
--component-table-background-cell-expanded-default: var(
|
|
9041
|
+
--component-table-background-cell-selected-default
|
|
9042
|
+
);
|
|
9043
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
9044
|
+
--component-table-border-divider-hover: var(--traton-color-transparent-inverse-400);
|
|
9045
|
+
--component-table-border-radius-default: var(--traton-unit-4);
|
|
9046
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
9047
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
9048
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
9049
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
9050
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
9051
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
9052
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
9053
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
9054
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
9055
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
9056
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
9057
|
+
}
|
|
9058
|
+
|
|
9059
|
+
.tl-table {
|
|
9060
|
+
--table-background: var(--table-body-row);
|
|
9061
|
+
--table-cell-background: var(--table-body-row);
|
|
9062
|
+
/* Table-header */
|
|
9063
|
+
--table-header: var(--component-table-background-header-default);
|
|
9064
|
+
--table-header-hover: var(--component-table-background-header-hover);
|
|
9065
|
+
--table-header-text-color: var(--component-table-text-header-default);
|
|
9066
|
+
/* Table-toolbar */
|
|
9067
|
+
--table-toolbar: var(--component-table-background-toolbar-default);
|
|
9068
|
+
--table-toolbar-text-color: var(--component-table-text-toolbar-default);
|
|
9069
|
+
/* Table-footer */
|
|
9070
|
+
--table-footer: var(--component-table-background-footer-default);
|
|
9071
|
+
--table-footer-text-color: var(--component-table-text-footer-default);
|
|
9072
|
+
--table-footer-page-selector-input-background: var(--component--input-background-secondary);
|
|
9073
|
+
/* Divider */
|
|
9074
|
+
--table-divider: var(--component-table-border-divider-default);
|
|
9075
|
+
--table-divider-hover: var(--component-table-border-divider-hover);
|
|
9076
|
+
--table-border-radius: calc(var(--component-table-border-radius-default) * 1px);
|
|
9077
|
+
/* Table-body-cell */
|
|
9078
|
+
--table-body-cell-hover: var(--component-table-background-cell-primary-hover);
|
|
9079
|
+
--table-body-cell-text-color: var(--component-table-text-cell-default);
|
|
9080
|
+
/* Table-body-row */
|
|
9081
|
+
--table-body-row: var(--component-table-background-cell-primary-default);
|
|
9082
|
+
--table-body-row-hover: var(--component-table-background-cell-primary-hover);
|
|
9083
|
+
--table-zebra-mode: var(--component-table-background-cell-secondary-default);
|
|
9084
|
+
--table-body-row-selected: var(--component-table-background-cell-selected-default);
|
|
9085
|
+
--table-body-row-expanded: var(--component-table-background-cell-expanded-default);
|
|
9086
|
+
--table-body-row-selected-hover: var(--component-table-background-cell-selected-hover);
|
|
9087
|
+
/* Table input body */
|
|
9088
|
+
--table-input-placeholder-text-color: var(--component-table-text-placeholder-default);
|
|
9089
|
+
--table-input-value-text-color: var(--component-table-text-value-default);
|
|
9090
|
+
--table-input-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
|
|
9091
|
+
/* Table-icons */
|
|
9092
|
+
--table-edit-icon-color: var(--component-table-icon-edit-default);
|
|
9093
|
+
--table-expand-icon-color: var(--component-table-icon-expand-default);
|
|
9094
|
+
--table-filter-icon-color: var(--component-table-icon-filter-default);
|
|
9095
|
+
--table-prefix-icon-color: var(--component-table-icon-prefix-default);
|
|
9096
|
+
--table-sort-icon-color: var(--component-table-icon-sort-default);
|
|
9097
|
+
}
|
|
9098
|
+
.tl-table.tl-table--primary {
|
|
9099
|
+
--table-body-row: var(--component-table-background-cell-primary-default);
|
|
9100
|
+
--table-body-row-hover: var(--component-table-background-cell-primary-hover);
|
|
9101
|
+
--table-body-cell-hover: var(--component-table-background-cell-primary-hover);
|
|
9102
|
+
--table-zebra-mode: var(--component-table-background-cell-secondary-default);
|
|
9103
|
+
}
|
|
9104
|
+
.tl-table.tl-table--secondary {
|
|
9105
|
+
--table-body-row: var(--component-table-background-cell-secondary-default);
|
|
9106
|
+
--table-body-row-hover: var(--component-table-background-cell-secondary-hover);
|
|
9107
|
+
--table-body-cell-hover: var(--component-table-background-cell-secondary-hover);
|
|
9108
|
+
--table-zebra-mode: var(--component-table-background-cell-primary-default);
|
|
9109
|
+
}
|
|
9110
|
+
|
|
9111
|
+
.tl-table__footer {
|
|
9112
|
+
display: table-footer-group;
|
|
9113
|
+
height: var(--unit-48);
|
|
9114
|
+
}
|
|
9115
|
+
.tl-table--compact .tl-table__footer {
|
|
9116
|
+
height: var(--unit-32);
|
|
9117
|
+
}
|
|
9118
|
+
|
|
9119
|
+
.tl-table__footer .tl-dropdown__text {
|
|
9120
|
+
max-width: calc(100% - 20px);
|
|
9121
|
+
}
|
|
9122
|
+
|
|
9123
|
+
.tl-table__footer-row {
|
|
9124
|
+
display: table-row;
|
|
9125
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9126
|
+
background-color: var(--table-footer);
|
|
9127
|
+
color: var(--table-footer-text-color);
|
|
9128
|
+
transition: background-color 200ms ease;
|
|
9129
|
+
}
|
|
9130
|
+
|
|
9131
|
+
.tl-table__footer-cell {
|
|
9132
|
+
padding: 0 var(--unit-16);
|
|
9133
|
+
}
|
|
9134
|
+
|
|
9135
|
+
.tl-table__pagination {
|
|
9136
|
+
height: var(--unit-48);
|
|
9137
|
+
display: flex;
|
|
9138
|
+
align-items: center;
|
|
9139
|
+
justify-content: space-between;
|
|
9140
|
+
}
|
|
9141
|
+
.tl-table__pagination .tl-dropdown__button,
|
|
9142
|
+
.tl-table__pagination .tl-dropdown__select,
|
|
9143
|
+
.tl-table__pagination .tl-dropdown__input {
|
|
9144
|
+
background-color: var(--table-footer-page-selector-input-background);
|
|
9145
|
+
}
|
|
9146
|
+
|
|
9147
|
+
.tl-table__row-selector,
|
|
9148
|
+
.tl-table__page-selector {
|
|
9149
|
+
display: flex;
|
|
9150
|
+
align-items: center;
|
|
9151
|
+
}
|
|
9152
|
+
|
|
9153
|
+
.tl-table__rows-per-page {
|
|
9154
|
+
margin-right: var(--unit-16);
|
|
9155
|
+
display: flex;
|
|
9156
|
+
align-items: center;
|
|
9157
|
+
}
|
|
9158
|
+
.tl-table__rows-per-page .tl-dropdown {
|
|
9159
|
+
width: 77px;
|
|
9160
|
+
}
|
|
9161
|
+
|
|
9162
|
+
.tl-table__rows-per-page-label {
|
|
9163
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9164
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9165
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9166
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9167
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9168
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9169
|
+
margin-right: var(--unit-8);
|
|
9170
|
+
}
|
|
9171
|
+
|
|
9172
|
+
.tl-table__page-selector .tl-text-field {
|
|
9173
|
+
min-width: unset;
|
|
9174
|
+
width: 87px;
|
|
9175
|
+
}
|
|
9176
|
+
.tl-table__page-selector .tl-text-field .tl-text-field__input {
|
|
9177
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9178
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9179
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9180
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9181
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9182
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9183
|
+
background-color: var(--table-footer-page-selector-input-background);
|
|
9184
|
+
color: var(--table-footer-text-color);
|
|
9185
|
+
margin-right: var(--unit-10);
|
|
9186
|
+
width: 77px;
|
|
9187
|
+
height: 40px;
|
|
9188
|
+
padding-left: 16px;
|
|
9189
|
+
}
|
|
9190
|
+
.tl-table__page-selector .tl-text-field .tl-text-field__input:hover {
|
|
9191
|
+
background-color: var(--table-footer-page-selector-input-background);
|
|
9192
|
+
}
|
|
9193
|
+
.tl-table__page-selector .tl-text-field .tl-text-field__input:disabled {
|
|
9194
|
+
opacity: var(--table-input-opacity-disabled);
|
|
9195
|
+
}
|
|
9196
|
+
|
|
9197
|
+
.tl-table__footer-text {
|
|
9198
|
+
padding: 1px 10px 0 0;
|
|
9199
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9200
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9201
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9202
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9203
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9204
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9205
|
+
}
|
|
9206
|
+
|
|
9207
|
+
.tl-table {
|
|
9208
|
+
box-sizing: border-box;
|
|
9209
|
+
}
|
|
9210
|
+
.tl-table * {
|
|
9211
|
+
box-sizing: border-box;
|
|
9212
|
+
}
|
|
9213
|
+
.tl-table {
|
|
9214
|
+
border-collapse: collapse;
|
|
9215
|
+
display: table;
|
|
9216
|
+
color: var(--table-body-cell-text-color);
|
|
9217
|
+
background-color: var(--table-header);
|
|
9218
|
+
border-top-left-radius: var(--table-border-radius);
|
|
9219
|
+
border-top-right-radius: var(--table-border-radius);
|
|
9220
|
+
}
|
|
9221
|
+
.tl-table--responsive {
|
|
9222
|
+
width: 100%;
|
|
9223
|
+
}
|
|
9224
|
+
.tl-table--horizontal-scroll {
|
|
9225
|
+
display: block;
|
|
9226
|
+
overflow-x: auto;
|
|
9227
|
+
white-space: nowrap;
|
|
9228
|
+
}
|
|
9229
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar {
|
|
9230
|
+
height: var(--tl-scrollbar-height);
|
|
9231
|
+
}
|
|
9232
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-track {
|
|
9233
|
+
background: var(--tl-scrollbar-track-color);
|
|
9234
|
+
}
|
|
9235
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
|
|
9236
|
+
border-radius: var(--tl-scrollbar-thumb-border-radius);
|
|
9237
|
+
background: var(--tl-scrollbar-thumb-color);
|
|
9238
|
+
border-width: var(--tl-scrollbar-thumb-border-width);
|
|
9239
|
+
border-style: solid;
|
|
9240
|
+
border-color: transparent;
|
|
9241
|
+
background-clip: padding-box;
|
|
9242
|
+
}
|
|
9243
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
|
|
9244
|
+
border-width: var(--tl-scrollbar-thumb-border-hover-width);
|
|
9245
|
+
border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
|
|
9246
|
+
}
|
|
9247
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-button {
|
|
9248
|
+
height: 0;
|
|
9249
|
+
width: 0;
|
|
9250
|
+
}
|
|
9251
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
9252
|
+
.tl-table--horizontal-scroll {
|
|
9253
|
+
scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
|
|
9254
|
+
scrollbar-width: var(--tl-scrollbar-width-standard);
|
|
9255
|
+
}
|
|
9256
|
+
}
|
|
9257
|
+
|
|
9258
|
+
.tl-table__header {
|
|
9259
|
+
display: table-header-group;
|
|
9260
|
+
}
|
|
9261
|
+
|
|
9262
|
+
.tl-table__body {
|
|
9263
|
+
display: table-row-group;
|
|
9264
|
+
}
|
|
9265
|
+
|
|
9266
|
+
.tl-table__row {
|
|
9267
|
+
display: table-row;
|
|
9268
|
+
background-color: var(--table-background);
|
|
9269
|
+
transition: background-color 200ms ease;
|
|
9270
|
+
color: var(--table-body-cell-text-color);
|
|
9271
|
+
}
|
|
9272
|
+
.tl-table__row:not(.tl-table__row--expanded) {
|
|
9273
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9274
|
+
}
|
|
9275
|
+
.tl-table__row:hover:not(.tl-table__row--expanded, .tl-table__row--selected) {
|
|
9276
|
+
--table-background: var(--table-body-row-hover);
|
|
9277
|
+
--table-cell-background: var(--table-body-row-hover);
|
|
9278
|
+
}
|
|
9279
|
+
.tl-table__row--expanded {
|
|
9280
|
+
--table-cell-background: var(--table-body-row-expanded);
|
|
9281
|
+
}
|
|
9282
|
+
.tl-table--zebra-columns-odd .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded) .tl-table__body-cell:not(.tl-table__body-cell--column-highlight):nth-child(odd) {
|
|
9283
|
+
--table-background: var(--table-zebra-mode);
|
|
9284
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9285
|
+
}
|
|
9286
|
+
.tl-table--zebra-columns-even .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded) .tl-table__body-cell:not(.tl-table__body-cell--column-highlight):nth-child(even) {
|
|
9287
|
+
--table-background: var(--table-zebra-mode);
|
|
9288
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9289
|
+
}
|
|
9290
|
+
.tl-table--zebra-rows-odd .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded):nth-child(odd of .tl-table__row) {
|
|
9291
|
+
--table-background: var(--table-zebra-mode);
|
|
9292
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9293
|
+
}
|
|
9294
|
+
.tl-table--zebra-rows-even .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded):nth-child(even of .tl-table__row) {
|
|
9295
|
+
--table-background: var(--table-zebra-mode);
|
|
9296
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9297
|
+
}
|
|
9298
|
+
.tl-table__row--selected {
|
|
9299
|
+
--table-background: var(--table-body-row-selected);
|
|
9300
|
+
--table-cell-background: var(--table-body-row-selected);
|
|
9301
|
+
}
|
|
9302
|
+
.tl-table__row--selected:hover {
|
|
9303
|
+
--table-background: var(--table-body-row-selected-hover);
|
|
9304
|
+
--table-cell-background: var(--table-body-row-selected-hover);
|
|
9305
|
+
}
|
|
9306
|
+
.tl-table--clickable .tl-table__row, .tl-table__row--clickable {
|
|
9307
|
+
cursor: pointer;
|
|
9308
|
+
}
|
|
9309
|
+
.tl-table__row--clickable:focus-visible {
|
|
9310
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9311
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9312
|
+
outline-offset: -2px;
|
|
9313
|
+
z-index: 1;
|
|
9314
|
+
}
|
|
9315
|
+
.tl-table__header .tl-table__row {
|
|
9316
|
+
background-color: var(--table-header);
|
|
9317
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9318
|
+
}
|
|
9319
|
+
|
|
9320
|
+
.tl-table__header-cell {
|
|
9321
|
+
display: table-cell;
|
|
9322
|
+
padding: 16px;
|
|
9323
|
+
font-family: var(--type-system-title-01-font-family);
|
|
9324
|
+
font-size: calc(var(--type-system-title-01-font-size) * 1px);
|
|
9325
|
+
line-height: calc(var(--type-system-title-01-line-height) * 1px);
|
|
9326
|
+
font-weight: var(--type-system-title-01-font-weight);
|
|
9327
|
+
letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
|
|
9328
|
+
color: var(--table-header-text-color);
|
|
9329
|
+
text-align: left;
|
|
9330
|
+
transition: background-color 200ms ease;
|
|
9331
|
+
min-width: 192px;
|
|
9332
|
+
}
|
|
9333
|
+
.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
|
|
9334
|
+
background-color: var(--table-header-hover);
|
|
9335
|
+
}
|
|
9336
|
+
.tl-table__header-cell:first-of-type {
|
|
9337
|
+
border-top-left-radius: var(--table-border-radius);
|
|
9338
|
+
}
|
|
9339
|
+
.tl-table__header-cell:last-of-type {
|
|
9340
|
+
border-top-right-radius: var(--table-border-radius);
|
|
9341
|
+
}
|
|
9342
|
+
.tl-table--vertical-dividers .tl-table__header-cell:not(:last-child) {
|
|
9343
|
+
border-right: 1px solid var(--table-divider);
|
|
9344
|
+
}
|
|
9345
|
+
.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:first-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):first-of-type {
|
|
9346
|
+
border-top-left-radius: 0;
|
|
9347
|
+
}
|
|
9348
|
+
.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:last-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):last-of-type {
|
|
9349
|
+
border-top-right-radius: 0;
|
|
9350
|
+
}
|
|
9351
|
+
.tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
|
|
9352
|
+
padding: 0;
|
|
9353
|
+
}
|
|
9354
|
+
.tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
|
|
9355
|
+
min-width: 48px;
|
|
9356
|
+
width: 48px;
|
|
9357
|
+
padding: 0;
|
|
9358
|
+
text-align: center;
|
|
9359
|
+
}
|
|
9360
|
+
.tl-table--compact .tl-table__header-cell {
|
|
9361
|
+
height: 32px;
|
|
9362
|
+
padding: 8px 16px;
|
|
9363
|
+
}
|
|
9364
|
+
.tl-table--compact .tl-table__header-cell--sortable {
|
|
9365
|
+
padding: 0;
|
|
9366
|
+
}
|
|
9367
|
+
.tl-table--compact .tl-table__header-cell--checkbox, .tl-table--compact .tl-table__header-cell--expand, .tl-table--compact .tl-table__header-cell:has(.tl-table__header-input-wrapper) {
|
|
9368
|
+
width: 32px;
|
|
9369
|
+
min-width: 32px;
|
|
9370
|
+
padding: 0;
|
|
9371
|
+
}
|
|
9372
|
+
.tl-table--no-min-width .tl-table__header-cell {
|
|
9373
|
+
min-width: unset;
|
|
9374
|
+
}
|
|
9375
|
+
.tl-table--header-text-align-left .tl-table__header-cell {
|
|
9376
|
+
text-align: left;
|
|
9377
|
+
}
|
|
9378
|
+
.tl-table--header-text-align-start .tl-table__header-cell {
|
|
9379
|
+
text-align: start;
|
|
9380
|
+
}
|
|
9381
|
+
.tl-table--header-text-align-center .tl-table__header-cell {
|
|
9382
|
+
text-align: center;
|
|
9383
|
+
}
|
|
9384
|
+
.tl-table--header-text-align-right .tl-table__header-cell {
|
|
9385
|
+
text-align: right;
|
|
9386
|
+
}
|
|
9387
|
+
.tl-table--header-text-align-end .tl-table__header-cell {
|
|
9388
|
+
text-align: end;
|
|
9389
|
+
}
|
|
9390
|
+
|
|
9391
|
+
.tl-table__header-button {
|
|
9392
|
+
display: flex;
|
|
9393
|
+
align-items: center;
|
|
9394
|
+
gap: 8px;
|
|
9395
|
+
justify-content: start;
|
|
9396
|
+
flex-direction: row;
|
|
9397
|
+
width: 100%;
|
|
9398
|
+
height: 100%;
|
|
9399
|
+
padding: 16px;
|
|
9400
|
+
background-color: transparent;
|
|
9401
|
+
border: none;
|
|
9402
|
+
cursor: pointer;
|
|
9403
|
+
transition: background-color 200ms ease;
|
|
9404
|
+
font-family: var(--type-system-title-01-font-family);
|
|
9405
|
+
font-size: calc(var(--type-system-title-01-font-size) * 1px);
|
|
9406
|
+
line-height: calc(var(--type-system-title-01-line-height) * 1px);
|
|
9407
|
+
font-weight: var(--type-system-title-01-font-weight);
|
|
9408
|
+
letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
|
|
9409
|
+
color: var(--table-header-text-color);
|
|
9410
|
+
text-align: left;
|
|
9411
|
+
}
|
|
9412
|
+
.tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
|
|
9413
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9414
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9415
|
+
outline-offset: -2px;
|
|
9416
|
+
z-index: 1;
|
|
9417
|
+
}
|
|
9418
|
+
.tl-table--compact .tl-table__header-button {
|
|
9419
|
+
height: 32px;
|
|
9420
|
+
}
|
|
9421
|
+
|
|
9422
|
+
.tl-table__header-button-text {
|
|
9423
|
+
color: var(--table-header-text-color);
|
|
9424
|
+
text-align: left;
|
|
9425
|
+
}
|
|
9426
|
+
|
|
9427
|
+
.tl-table__header-button-icon {
|
|
9428
|
+
flex: 0 0 16px;
|
|
9429
|
+
height: 16px;
|
|
9430
|
+
width: 16px;
|
|
9431
|
+
opacity: 0;
|
|
9432
|
+
transform-origin: center;
|
|
9433
|
+
transition: opacity 200ms ease-in, transform 200ms ease;
|
|
9434
|
+
color: var(--table-sort-icon-color);
|
|
9435
|
+
}
|
|
9436
|
+
|
|
9437
|
+
.tl-table__header-button:focus-visible .tl-table__header-button-icon,
|
|
9438
|
+
.tl-table__header-button:focus .tl-table__header-button-icon,
|
|
9439
|
+
.tl-table__header-button:active .tl-table__header-button-icon,
|
|
9440
|
+
.tl-table__header-button:hover .tl-table__header-button-icon {
|
|
9441
|
+
opacity: 1;
|
|
9442
|
+
}
|
|
9443
|
+
|
|
9444
|
+
.tl-table__header-cell--is-sorted .tl-table__header-button-icon {
|
|
9445
|
+
opacity: 1;
|
|
9446
|
+
}
|
|
9447
|
+
|
|
9448
|
+
.tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
|
|
9449
|
+
transform: rotate(180deg);
|
|
9450
|
+
}
|
|
9451
|
+
|
|
9452
|
+
.tl-table__body-cell {
|
|
9453
|
+
display: table-cell;
|
|
9454
|
+
padding: 16px;
|
|
9455
|
+
background-color: var(--table-cell-background);
|
|
9456
|
+
color: var(--table-body-cell-text-color);
|
|
9457
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9458
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9459
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9460
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9461
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9462
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9463
|
+
transition: background-color 200ms ease;
|
|
9464
|
+
min-width: 192px;
|
|
9465
|
+
}
|
|
9466
|
+
.tl-table__body-cell:has(.tl-table__expand-control) {
|
|
9467
|
+
min-width: unset;
|
|
9468
|
+
width: 48px;
|
|
9469
|
+
height: 48px;
|
|
9470
|
+
padding: 0;
|
|
9471
|
+
}
|
|
9472
|
+
.tl-table__body-cell:has(.tl-checkbox) {
|
|
9473
|
+
min-width: 48px;
|
|
9474
|
+
width: 48px;
|
|
9475
|
+
padding: 0;
|
|
9476
|
+
text-align: center;
|
|
9477
|
+
padding: 8px 16px;
|
|
9478
|
+
}
|
|
9479
|
+
.tl-table__body-cell:focus {
|
|
9480
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9481
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9482
|
+
outline-offset: -2px;
|
|
9483
|
+
z-index: 1;
|
|
9484
|
+
}
|
|
9485
|
+
.tl-table__body-cell--column-highlight {
|
|
9486
|
+
--table-cell-background: var(--table-body-cell-hover);
|
|
9487
|
+
}
|
|
9488
|
+
.tl-table__row--selected .tl-table__body-cell--column-highlight {
|
|
9489
|
+
--table-cell-background: var(--table-body-row-selected-hover);
|
|
9490
|
+
}
|
|
9491
|
+
.tl-table__row--expanded .tl-table__body-cell--column-highlight {
|
|
9492
|
+
--table-cell-background: var(--table-body-row-selected-hover);
|
|
9493
|
+
}
|
|
9494
|
+
.tl-table--compact .tl-table__body-cell {
|
|
9495
|
+
height: 32px;
|
|
9496
|
+
padding: 8px 16px;
|
|
9497
|
+
}
|
|
9498
|
+
.tl-table--compact .tl-table__body-cell:has(.tl-checkbox) {
|
|
9499
|
+
height: 32px;
|
|
9500
|
+
width: 32px;
|
|
9501
|
+
padding: 4px;
|
|
9502
|
+
min-width: unset;
|
|
9503
|
+
}
|
|
9504
|
+
.tl-table--compact .tl-table__body-cell:has(.tl-table__expand-control) {
|
|
9505
|
+
min-width: unset;
|
|
9506
|
+
width: 32px;
|
|
9507
|
+
height: 32px;
|
|
9508
|
+
padding: 0;
|
|
9509
|
+
}
|
|
9510
|
+
.tl-table--no-min-width .tl-table__body-cell {
|
|
9511
|
+
min-width: unset;
|
|
9512
|
+
}
|
|
9513
|
+
.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child) {
|
|
9514
|
+
border-right: 1px solid var(--table-divider);
|
|
9515
|
+
}
|
|
9516
|
+
.tl-table--vertical-dividers .tl-table__row--expanded .tl-table__body-cell:not(:has(.tl-table__expand-control)) {
|
|
9517
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9518
|
+
}
|
|
9519
|
+
.tl-table--cell-text-align-left .tl-table__body-cell {
|
|
9520
|
+
text-align: left;
|
|
9521
|
+
}
|
|
9522
|
+
.tl-table--cell-text-align-start .tl-table__body-cell {
|
|
9523
|
+
text-align: start;
|
|
9524
|
+
}
|
|
9525
|
+
.tl-table--cell-text-align-center .tl-table__body-cell {
|
|
9526
|
+
text-align: center;
|
|
9527
|
+
}
|
|
9528
|
+
.tl-table--cell-text-align-right .tl-table__body-cell {
|
|
9529
|
+
text-align: right;
|
|
9530
|
+
}
|
|
9531
|
+
.tl-table--cell-text-align-end .tl-table__body-cell {
|
|
9532
|
+
text-align: end;
|
|
9533
|
+
}
|
|
9534
|
+
.tl-table--no-padding .tl-table__body-cell {
|
|
9535
|
+
padding: 0;
|
|
9536
|
+
}
|
|
9537
|
+
|
|
9538
|
+
.tl-table__toolbar {
|
|
9539
|
+
box-sizing: border-box;
|
|
9540
|
+
}
|
|
9541
|
+
.tl-table__toolbar * {
|
|
9542
|
+
box-sizing: border-box;
|
|
9543
|
+
}
|
|
9544
|
+
.tl-table__toolbar {
|
|
9545
|
+
display: table-caption;
|
|
9546
|
+
position: relative;
|
|
9547
|
+
background-color: var(--table-toolbar);
|
|
9548
|
+
color: var(--table-toolbar-text-color);
|
|
9549
|
+
padding: 0 var(--unit-16);
|
|
9550
|
+
height: 64px;
|
|
9551
|
+
border-top-left-radius: var(--table-border-radius);
|
|
9552
|
+
border-top-right-radius: var(--table-border-radius);
|
|
9553
|
+
}
|
|
9554
|
+
.tl-table--compact .tl-table__toolbar {
|
|
9555
|
+
height: 56px;
|
|
9556
|
+
}
|
|
9557
|
+
|
|
9558
|
+
.tl-table__upper-bar {
|
|
9559
|
+
width: 100%;
|
|
9560
|
+
height: 100%;
|
|
9561
|
+
display: flex;
|
|
9562
|
+
justify-content: space-between;
|
|
9563
|
+
}
|
|
9564
|
+
|
|
9565
|
+
.tl-table__actionbar-left {
|
|
9566
|
+
display: flex;
|
|
9567
|
+
align-items: center;
|
|
9568
|
+
}
|
|
9569
|
+
|
|
9570
|
+
.tl-table__title {
|
|
9571
|
+
font-family: var(--type-system-title-01-font-family);
|
|
9572
|
+
font-size: calc(var(--type-system-title-01-font-size) * 1px);
|
|
9573
|
+
line-height: calc(var(--type-system-title-01-line-height) * 1px);
|
|
9574
|
+
font-weight: var(--type-system-title-01-font-weight);
|
|
9575
|
+
letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
|
|
9576
|
+
display: flex;
|
|
9577
|
+
align-self: baseline;
|
|
9578
|
+
text-align: left;
|
|
9579
|
+
padding-top: var(--unit-16);
|
|
9580
|
+
margin-right: var(--unit-8);
|
|
9581
|
+
}
|
|
9582
|
+
|
|
9583
|
+
.tl-table__actionbar-right {
|
|
9584
|
+
display: flex;
|
|
9585
|
+
align-self: center;
|
|
9586
|
+
column-gap: 8px;
|
|
9587
|
+
position: relative;
|
|
9588
|
+
}
|
|
9589
|
+
|
|
9590
|
+
.tl-table__header-input-wrapper {
|
|
9591
|
+
position: relative;
|
|
9592
|
+
width: 100%;
|
|
9593
|
+
height: 100%;
|
|
9594
|
+
}
|
|
9595
|
+
|
|
9596
|
+
.tl-table__header-input-wrapper .tl-icon {
|
|
9597
|
+
color: var(--table-filter-icon-color);
|
|
9598
|
+
position: absolute;
|
|
9599
|
+
left: 15px;
|
|
9600
|
+
top: 50%;
|
|
9601
|
+
transform: translateY(-50%);
|
|
9602
|
+
z-index: 1;
|
|
9603
|
+
pointer-events: none;
|
|
9604
|
+
}
|
|
9605
|
+
|
|
9606
|
+
.tl-table__header-input {
|
|
9607
|
+
box-sizing: border-box;
|
|
9608
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9609
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9610
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9611
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9612
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9613
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9614
|
+
color: var(--table-input-value-text-color);
|
|
9615
|
+
padding: 0 var(--unit-16);
|
|
9616
|
+
width: 100%;
|
|
9617
|
+
border-radius: 0;
|
|
9618
|
+
background-color: transparent;
|
|
9619
|
+
border: none;
|
|
9620
|
+
outline: none;
|
|
9621
|
+
}
|
|
9622
|
+
.tl-table--compact .tl-table__header-input {
|
|
9623
|
+
height: 32px;
|
|
9624
|
+
}
|
|
9625
|
+
.tl-table__header-input {
|
|
9626
|
+
padding-left: 35px;
|
|
9627
|
+
height: 48px;
|
|
9628
|
+
}
|
|
9629
|
+
.tl-table__header-input::placeholder {
|
|
9630
|
+
color: var(--table-input-placeholder-text-color);
|
|
9631
|
+
}
|
|
9632
|
+
.tl-table__header-input:focus {
|
|
9633
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9634
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9635
|
+
outline-offset: -2px;
|
|
9636
|
+
z-index: 1;
|
|
9637
|
+
}
|
|
9638
|
+
|
|
9639
|
+
.tl-table__body-cell .tl-text-field {
|
|
9640
|
+
height: 48px;
|
|
9641
|
+
min-width: auto;
|
|
9642
|
+
padding-bottom: 0;
|
|
9643
|
+
cursor: pointer;
|
|
9644
|
+
}
|
|
9645
|
+
|
|
9646
|
+
.tl-table--compact .tl-table__body-cell .tl-text-field {
|
|
9647
|
+
height: 32px;
|
|
9648
|
+
}
|
|
9649
|
+
|
|
9650
|
+
.tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
|
|
9651
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9652
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9653
|
+
outline-offset: -2px;
|
|
9654
|
+
z-index: 1;
|
|
9655
|
+
}
|
|
9656
|
+
|
|
9657
|
+
.tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
|
|
9658
|
+
height: 32px;
|
|
9659
|
+
}
|
|
9660
|
+
|
|
9661
|
+
.tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
|
|
9662
|
+
display: none;
|
|
9663
|
+
}
|
|
9664
|
+
|
|
9665
|
+
.tl-table__body-cell .tl-text-field:hover:not(.tl-text-field:has(.tl-text-field__input:disabled)) .tl-text-field__suffix--icon,
|
|
9666
|
+
.tl-table__body-cell .tl-text-field:has(.tl-text-field__input:not(:disabled):focus) .tl-text-field__suffix--icon {
|
|
9667
|
+
display: inline-block;
|
|
9668
|
+
}
|
|
9669
|
+
|
|
9670
|
+
.tl-table__expand-control {
|
|
9671
|
+
background-color: transparent;
|
|
9672
|
+
border: none;
|
|
9673
|
+
display: inline-flex;
|
|
9674
|
+
align-items: center;
|
|
9675
|
+
justify-content: center;
|
|
9676
|
+
box-shadow: none;
|
|
9677
|
+
position: relative;
|
|
9678
|
+
text-decoration: none;
|
|
9679
|
+
cursor: pointer;
|
|
9680
|
+
height: 48px;
|
|
9681
|
+
width: 48px;
|
|
9682
|
+
color: var(--table-expand-icon-color);
|
|
9683
|
+
}
|
|
9684
|
+
.tl-table--compact .tl-table__expand-control {
|
|
9685
|
+
padding: 0;
|
|
9686
|
+
height: 32px;
|
|
9687
|
+
width: 32px;
|
|
9688
|
+
}
|
|
9689
|
+
.tl-table__expand-control:focus, .tl-table__expand-control:focus-visible, .tl-table__expand-control:active {
|
|
9690
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9691
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9692
|
+
outline-offset: -2px;
|
|
9693
|
+
z-index: 1;
|
|
9694
|
+
}
|
|
9695
|
+
|
|
9696
|
+
.tl-table__expand-icon {
|
|
9697
|
+
transition: transform 200ms ease;
|
|
9698
|
+
transform: rotate(0);
|
|
9699
|
+
color: var(--table-expand-icon-color);
|
|
9700
|
+
}
|
|
9701
|
+
|
|
9702
|
+
.tl-table__row--expanded .tl-table__expand-icon {
|
|
9703
|
+
transform: rotate(180deg);
|
|
9704
|
+
}
|
|
9705
|
+
|
|
9706
|
+
.tl-table__expand-row {
|
|
9707
|
+
display: none;
|
|
9708
|
+
transition: background-color 200ms ease;
|
|
9709
|
+
}
|
|
9710
|
+
.tl-table__expand-row--expanded {
|
|
9711
|
+
background-color: var(--table-body-row-expanded);
|
|
9712
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9713
|
+
display: table-row;
|
|
9714
|
+
}
|
|
9715
|
+
|
|
9716
|
+
.tl-table__expand-row-cell {
|
|
9717
|
+
max-width: 1px;
|
|
9718
|
+
overflow: auto;
|
|
9719
|
+
padding: 16px 16px 16px 66px;
|
|
9720
|
+
color: var(--table-body-cell-text-color);
|
|
9721
|
+
}
|
|
9722
|
+
.tl-table__expand-row-cell::-webkit-scrollbar {
|
|
9723
|
+
height: var(--tl-scrollbar-height);
|
|
9724
|
+
}
|
|
9725
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-track {
|
|
9726
|
+
background: var(--tl-scrollbar-track-color);
|
|
9727
|
+
}
|
|
9728
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-thumb {
|
|
9729
|
+
border-radius: var(--tl-scrollbar-thumb-border-radius);
|
|
9730
|
+
background: var(--tl-scrollbar-thumb-color);
|
|
9731
|
+
border-width: var(--tl-scrollbar-thumb-border-width);
|
|
9732
|
+
border-style: solid;
|
|
9733
|
+
border-color: transparent;
|
|
9734
|
+
background-clip: padding-box;
|
|
9735
|
+
}
|
|
9736
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
|
|
9737
|
+
border-width: var(--tl-scrollbar-thumb-border-hover-width);
|
|
9738
|
+
border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
|
|
9739
|
+
}
|
|
9740
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-button {
|
|
9741
|
+
height: 0;
|
|
9742
|
+
width: 0;
|
|
9743
|
+
}
|
|
9744
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
9745
|
+
.tl-table__expand-row-cell {
|
|
9746
|
+
scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
|
|
9747
|
+
scrollbar-width: var(--tl-scrollbar-width-standard);
|
|
9748
|
+
}
|
|
9749
|
+
}
|
|
9750
|
+
.tl-table--compact .tl-table__expand-row-cell {
|
|
9751
|
+
padding: 8px 16px 8px 66px;
|
|
9752
|
+
}
|
|
9753
|
+
.tl-table__expand-row-cell--overflow-visible {
|
|
9754
|
+
overflow: visible;
|
|
9755
|
+
}
|
|
9756
|
+
.tl-table__expand-row-cell--overflow-hidden {
|
|
9757
|
+
overflow: hidden;
|
|
9758
|
+
}
|
|
9759
|
+
|
|
9760
|
+
.tl-table__body .tl-text-field__input {
|
|
9761
|
+
border: none;
|
|
9762
|
+
border-radius: 0;
|
|
9763
|
+
background-color: var(--table-cell-background);
|
|
9764
|
+
}
|
|
9765
|
+
.tl-table__body .tl-text-field__input:disabled {
|
|
9766
|
+
background-color: var(--table-cell-background);
|
|
9767
|
+
}
|
|
9768
|
+
.tl-table__body .tl-text-field__input:hover {
|
|
9769
|
+
border: none;
|
|
9770
|
+
border-radius: 0;
|
|
9771
|
+
}
|
|
9772
|
+
|
|
9773
|
+
.tl-table__body .tl-text-field:hover .tl-text-field__input {
|
|
9774
|
+
border: none !important;
|
|
9775
|
+
border-radius: 0;
|
|
9776
|
+
}
|
|
9777
|
+
|
|
9778
|
+
.tl-table--compact .tl-table__header-cell--checkbox {
|
|
9779
|
+
padding: 4px;
|
|
9780
|
+
}
|
|
9781
|
+
|
|
9782
|
+
.tl-table__header-cell--checkbox {
|
|
9783
|
+
padding: 8px 16px;
|
|
9784
|
+
}
|
|
9785
|
+
|
|
8936
9786
|
/* tl-folder-tabs.scss (overlay buttons, no JS) */
|
|
8937
9787
|
/**
|
|
8938
9788
|
* Do not edit directly, this file was auto-generated.
|
|
@@ -9080,7 +9930,6 @@ body {
|
|
|
9080
9930
|
--folder-tab-background-selected: var(--component-tabs-background-item-secondary-current-default);
|
|
9081
9931
|
}
|
|
9082
9932
|
|
|
9083
|
-
/* tl-folder-tabs.scss (overlay buttons, no JS) */
|
|
9084
9933
|
.tl-folder-tabs__tab {
|
|
9085
9934
|
all: unset;
|
|
9086
9935
|
font-family: var(--type-system-title-01-font-family);
|
|
@@ -9578,7 +10427,7 @@ body {
|
|
|
9578
10427
|
--text-field-label-disabled: var(--color-text-disabled);
|
|
9579
10428
|
--text-field-affix-disabled: var(--color-text-disabled);
|
|
9580
10429
|
--text-field-textcounter: var(--component--input-text-counter-default);
|
|
9581
|
-
--text-field-opacity-disabled: var(--component--input-opacity-disabled);
|
|
10430
|
+
--text-field-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
|
|
9582
10431
|
--text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
9583
10432
|
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
9584
10433
|
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
@@ -9615,7 +10464,7 @@ body {
|
|
|
9615
10464
|
.tl-text-field:has(.tl-text-field__input:disabled) {
|
|
9616
10465
|
cursor: not-allowed;
|
|
9617
10466
|
}
|
|
9618
|
-
.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
|
|
10467
|
+
.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__bottom {
|
|
9619
10468
|
opacity: var(--text-field-opacity-disabled);
|
|
9620
10469
|
}
|
|
9621
10470
|
.tl-text-field .tl-icon {
|
|
@@ -9625,7 +10474,8 @@ body {
|
|
|
9625
10474
|
.tl-text-field__input-wrapper {
|
|
9626
10475
|
position: relative;
|
|
9627
10476
|
}
|
|
9628
|
-
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)
|
|
10477
|
+
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
|
|
10478
|
+
.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
|
|
9629
10479
|
content: "";
|
|
9630
10480
|
position: absolute;
|
|
9631
10481
|
top: 50%;
|
|
@@ -9685,11 +10535,17 @@ body {
|
|
|
9685
10535
|
outline-offset: 1px;
|
|
9686
10536
|
z-index: 1;
|
|
9687
10537
|
}
|
|
9688
|
-
.tl-text-field:hover .tl-text-field__input:not(:focus
|
|
9689
|
-
border-
|
|
10538
|
+
.tl-text-field:hover .tl-text-field__input:not(:focus, :disabled) {
|
|
10539
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10540
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10541
|
+
border-style: solid;
|
|
10542
|
+
border-color: var(--component--input-border-hover);
|
|
9690
10543
|
}
|
|
9691
10544
|
.tl-text-field--error .tl-text-field__input {
|
|
9692
|
-
border-
|
|
10545
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10546
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10547
|
+
border-style: solid;
|
|
10548
|
+
border-color: var(--component--input-text-error-default);
|
|
9693
10549
|
}
|
|
9694
10550
|
.tl-text-field--error .tl-text-field__input:focus {
|
|
9695
10551
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -9697,18 +10553,28 @@ body {
|
|
|
9697
10553
|
outline-offset: 1px;
|
|
9698
10554
|
z-index: 1;
|
|
9699
10555
|
}
|
|
9700
|
-
.tl-text-field--error:hover .tl-text-field__input:not(:focus
|
|
9701
|
-
border-
|
|
10556
|
+
.tl-text-field--error:hover .tl-text-field__input:not(:focus, :disabled) {
|
|
10557
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10558
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10559
|
+
border-style: solid;
|
|
10560
|
+
border-color: var(--component--input-text-error-default);
|
|
9702
10561
|
}
|
|
9703
|
-
.tl-text-field--success:not(:has(.tl-text-field__input[readonly])
|
|
9704
|
-
|
|
10562
|
+
.tl-text-field--success:not(:has(.tl-text-field__input[readonly]),
|
|
10563
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
|
|
10564
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10565
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10566
|
+
border-style: solid;
|
|
10567
|
+
border-color: var(--component--input-border-success-default);
|
|
9705
10568
|
}
|
|
9706
10569
|
.tl-text-field__input:disabled {
|
|
9707
10570
|
cursor: not-allowed;
|
|
9708
10571
|
pointer-events: none;
|
|
9709
10572
|
}
|
|
9710
10573
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
9711
|
-
border-
|
|
10574
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10575
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10576
|
+
border-style: solid;
|
|
10577
|
+
border-color: var(--color-border-defined);
|
|
9712
10578
|
}
|
|
9713
10579
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
|
|
9714
10580
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -9717,7 +10583,10 @@ body {
|
|
|
9717
10583
|
z-index: 1;
|
|
9718
10584
|
}
|
|
9719
10585
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
|
|
9720
|
-
border-
|
|
10586
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10587
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10588
|
+
border-style: solid;
|
|
10589
|
+
border-color: var(--component--input-border-hover);
|
|
9721
10590
|
}
|
|
9722
10591
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
9723
10592
|
user-select: auto;
|
|
@@ -9725,31 +10594,32 @@ body {
|
|
|
9725
10594
|
cursor: default;
|
|
9726
10595
|
pointer-events: none;
|
|
9727
10596
|
}
|
|
9728
|
-
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)
|
|
10597
|
+
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
|
|
10598
|
+
.tl-text-field--hide-readonly-icon) .tl-text-field__input {
|
|
9729
10599
|
padding-right: 54px;
|
|
9730
10600
|
}
|
|
9731
10601
|
.tl-text-field--lg .tl-text-field__input {
|
|
9732
|
-
padding: var(--
|
|
10602
|
+
padding: var(--unit-20) var(--unit-16);
|
|
9733
10603
|
height: 56px;
|
|
9734
10604
|
}
|
|
9735
10605
|
.tl-text-field--md .tl-text-field__input {
|
|
9736
|
-
padding: var(--
|
|
10606
|
+
padding: var(--unit-16);
|
|
9737
10607
|
height: 48px;
|
|
9738
10608
|
}
|
|
9739
10609
|
.tl-text-field--sm .tl-text-field__input {
|
|
9740
|
-
padding: var(--
|
|
10610
|
+
padding: var(--unit-12) var(--unit-16);
|
|
9741
10611
|
height: 40px;
|
|
9742
10612
|
}
|
|
9743
10613
|
.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
|
|
9744
|
-
padding-top: var(--
|
|
10614
|
+
padding-top: var(--unit-24);
|
|
9745
10615
|
padding-bottom: 15px;
|
|
9746
10616
|
}
|
|
9747
10617
|
.tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
|
|
9748
|
-
padding-top: var(--
|
|
10618
|
+
padding-top: var(--unit-20);
|
|
9749
10619
|
padding-bottom: 11px;
|
|
9750
10620
|
}
|
|
9751
10621
|
.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
|
|
9752
|
-
padding-top: var(--
|
|
10622
|
+
padding-top: var(--unit-16);
|
|
9753
10623
|
padding-bottom: 7px;
|
|
9754
10624
|
}
|
|
9755
10625
|
.tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
|
|
@@ -9767,9 +10637,6 @@ body {
|
|
|
9767
10637
|
.tl-text-field--label-inside .tl-text-field__input::placeholder {
|
|
9768
10638
|
color: transparent !important;
|
|
9769
10639
|
}
|
|
9770
|
-
.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
|
|
9771
|
-
color: var(--text-field-placeholder-disabled) !important;
|
|
9772
|
-
}
|
|
9773
10640
|
|
|
9774
10641
|
.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
|
|
9775
10642
|
font-family: var(--detail-05-font-family);
|
|
@@ -9826,12 +10693,6 @@ body {
|
|
|
9826
10693
|
opacity: 0;
|
|
9827
10694
|
visibility: hidden;
|
|
9828
10695
|
}
|
|
9829
|
-
.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
|
|
9830
|
-
color: var(--text-field-label-disabled);
|
|
9831
|
-
}
|
|
9832
|
-
.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
|
|
9833
|
-
color: var(--text-field-label-disabled);
|
|
9834
|
-
}
|
|
9835
10696
|
|
|
9836
10697
|
.tl-text-field__bottom {
|
|
9837
10698
|
display: flex;
|
|
@@ -9849,9 +10710,6 @@ body {
|
|
|
9849
10710
|
color: var(--text-field-helper);
|
|
9850
10711
|
position: relative;
|
|
9851
10712
|
}
|
|
9852
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__helper {
|
|
9853
|
-
color: var(--color-text-disabled);
|
|
9854
|
-
}
|
|
9855
10713
|
.tl-text-field--error .tl-text-field__helper {
|
|
9856
10714
|
padding-left: 24px;
|
|
9857
10715
|
}
|
|
@@ -9874,12 +10732,10 @@ body {
|
|
|
9874
10732
|
.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
|
|
9875
10733
|
display: none;
|
|
9876
10734
|
}
|
|
9877
|
-
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])
|
|
10735
|
+
.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
|
|
10736
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
|
|
9878
10737
|
color: var(--text-field-error);
|
|
9879
10738
|
}
|
|
9880
|
-
.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
|
|
9881
|
-
background-color: var(--color-text-disabled);
|
|
9882
|
-
}
|
|
9883
10739
|
|
|
9884
10740
|
.tl-text-field__charcounter {
|
|
9885
10741
|
font-family: var(--detail-05-font-family);
|
|
@@ -9891,20 +10747,15 @@ body {
|
|
|
9891
10747
|
margin-left: auto;
|
|
9892
10748
|
color: var(--text-field-textcounter);
|
|
9893
10749
|
}
|
|
9894
|
-
|
|
9895
|
-
|
|
9896
|
-
}
|
|
9897
|
-
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
|
|
10750
|
+
.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
|
|
10751
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
|
|
9898
10752
|
color: var(--text-field-error);
|
|
9899
10753
|
}
|
|
9900
|
-
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])
|
|
10754
|
+
.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
|
|
10755
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
|
|
9901
10756
|
color: var(--text-field-error);
|
|
9902
10757
|
}
|
|
9903
10758
|
|
|
9904
|
-
.tl-text-field__charcounter-divider {
|
|
9905
|
-
color: var(--color-text-disabled);
|
|
9906
|
-
}
|
|
9907
|
-
|
|
9908
10759
|
.tl-text-field__prefix {
|
|
9909
10760
|
font-family: var(--detail-02-font-family);
|
|
9910
10761
|
font-size: var(--detail-02-font-size);
|
|
@@ -9926,18 +10777,6 @@ body {
|
|
|
9926
10777
|
transform: translateY(-50%);
|
|
9927
10778
|
z-index: 1;
|
|
9928
10779
|
}
|
|
9929
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
|
|
9930
|
-
color: var(--text-field-affix-disabled);
|
|
9931
|
-
}
|
|
9932
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon > * {
|
|
9933
|
-
color: var(--text-field-affix-disabled);
|
|
9934
|
-
}
|
|
9935
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
|
|
9936
|
-
background-color: var(--text-field-affix-disabled);
|
|
9937
|
-
}
|
|
9938
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
|
|
9939
|
-
background-color: var(--text-field-affix-disabled);
|
|
9940
|
-
}
|
|
9941
10780
|
|
|
9942
10781
|
.tl-text-field__suffix {
|
|
9943
10782
|
font-family: var(--detail-02-font-family);
|
|
@@ -9964,20 +10803,6 @@ body {
|
|
|
9964
10803
|
transform: translateY(-50%);
|
|
9965
10804
|
z-index: 1;
|
|
9966
10805
|
}
|
|
9967
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
|
|
9968
|
-
color: var(--text-field-affix-disabled);
|
|
9969
|
-
}
|
|
9970
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
|
|
9971
|
-
color: var(--text-field-affix-disabled);
|
|
9972
|
-
}
|
|
9973
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
|
|
9974
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
|
|
9975
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
|
|
9976
|
-
background-color: var(--text-field-affix-disabled) !important;
|
|
9977
|
-
}
|
|
9978
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
|
|
9979
|
-
background-color: var(--text-field-affix-disabled);
|
|
9980
|
-
}
|
|
9981
10806
|
|
|
9982
10807
|
.tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
|
|
9983
10808
|
.tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
|
|
@@ -10072,16 +10897,7 @@ body {
|
|
|
10072
10897
|
--textarea-error-icon: var(--component--input-icon-error-default);
|
|
10073
10898
|
--textarea-textcounter: var(--component--input-text-counter-default);
|
|
10074
10899
|
--textarea-resize-icon: var(--component-textarea-icon-resize-default);
|
|
10075
|
-
--textarea-opacity-disabled: var(--component--input-opacity-disabled);
|
|
10076
|
-
--textarea-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
10077
|
-
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
10078
|
-
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
10079
|
-
calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10080
|
-
--textarea-border-color: var(--component--input-border-default);
|
|
10081
|
-
--textarea-border-color-hover: var(--component--input-border-hover);
|
|
10082
|
-
--textarea-border-color-success: var(--component--input-border-success-default);
|
|
10083
|
-
--textarea-border-color-error: var(--component--input-border-error-default);
|
|
10084
|
-
--textarea-border-color-readonly: var(--color-border-strong);
|
|
10900
|
+
--textarea-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
|
|
10085
10901
|
--textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
|
|
10086
10902
|
}
|
|
10087
10903
|
.tl-textarea--primary {
|
|
@@ -10211,10 +11027,14 @@ body {
|
|
|
10211
11027
|
font-weight: var(--detail-02-font-weight);
|
|
10212
11028
|
letter-spacing: var(--detail-02-letter-spacing);
|
|
10213
11029
|
text-transform: var(--detail-02-text-transform);
|
|
11030
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
11031
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
11032
|
+
border-style: solid;
|
|
11033
|
+
border-color: var(--component--input-border-default);
|
|
10214
11034
|
display: block;
|
|
10215
11035
|
position: relative;
|
|
10216
11036
|
width: 100%;
|
|
10217
|
-
padding: var(--
|
|
11037
|
+
padding: var(--unit-20) var(--unit-16);
|
|
10218
11038
|
color: var(--textarea-text);
|
|
10219
11039
|
resize: vertical;
|
|
10220
11040
|
z-index: 0;
|
|
@@ -10232,10 +11052,16 @@ body {
|
|
|
10232
11052
|
display: none;
|
|
10233
11053
|
}
|
|
10234
11054
|
.tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
10235
|
-
border-
|
|
11055
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
11056
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
11057
|
+
border-style: solid;
|
|
11058
|
+
border-color: var(--component--input-border-hover);
|
|
10236
11059
|
}
|
|
10237
11060
|
.tl-textarea--error .tl-textarea__input {
|
|
10238
|
-
border-
|
|
11061
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
11062
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
11063
|
+
border-style: solid;
|
|
11064
|
+
border-color: var(--component--input-text-error-default);
|
|
10239
11065
|
}
|
|
10240
11066
|
.tl-textarea--error .tl-textarea__input:focus {
|
|
10241
11067
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -10244,17 +11070,26 @@ body {
|
|
|
10244
11070
|
z-index: 1;
|
|
10245
11071
|
}
|
|
10246
11072
|
.tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
10247
|
-
border-
|
|
11073
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
11074
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
11075
|
+
border-style: solid;
|
|
11076
|
+
border-color: var(--component--input-text-error-default);
|
|
10248
11077
|
}
|
|
10249
11078
|
.tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
|
|
10250
|
-
border-
|
|
11079
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
11080
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
11081
|
+
border-style: solid;
|
|
11082
|
+
border-color: var(--component--input-border-success-default);
|
|
10251
11083
|
}
|
|
10252
11084
|
.tl-textarea__input:disabled {
|
|
10253
11085
|
cursor: not-allowed;
|
|
10254
11086
|
pointer-events: none;
|
|
10255
11087
|
}
|
|
10256
11088
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
|
|
10257
|
-
border-
|
|
11089
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
11090
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
11091
|
+
border-style: solid;
|
|
11092
|
+
border-color: var(--color-border-defined);
|
|
10258
11093
|
}
|
|
10259
11094
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
|
|
10260
11095
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -10263,7 +11098,10 @@ body {
|
|
|
10263
11098
|
z-index: 1;
|
|
10264
11099
|
}
|
|
10265
11100
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
|
|
10266
|
-
border-
|
|
11101
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
11102
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
11103
|
+
border-style: solid;
|
|
11104
|
+
border-color: var(--component--input-border-hover);
|
|
10267
11105
|
}
|
|
10268
11106
|
.tl-textarea--label-inside .tl-textarea__input {
|
|
10269
11107
|
padding-top: 26px;
|
|
@@ -10273,9 +11111,6 @@ body {
|
|
|
10273
11111
|
color: transparent;
|
|
10274
11112
|
transform: translateY(1px);
|
|
10275
11113
|
}
|
|
10276
|
-
.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
|
|
10277
|
-
color: var(--textarea-placeholder-disabled) !important;
|
|
10278
|
-
}
|
|
10279
11114
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
|
|
10280
11115
|
user-select: auto;
|
|
10281
11116
|
caret-color: transparent;
|
|
@@ -10322,12 +11157,8 @@ body {
|
|
|
10322
11157
|
letter-spacing: var(--detail-07-letter-spacing);
|
|
10323
11158
|
text-transform: var(--detail-07-text-transform);
|
|
10324
11159
|
top: 8px;
|
|
10325
|
-
color: var(--textarea-label-disabled);
|
|
10326
11160
|
transform: translateY(0);
|
|
10327
11161
|
}
|
|
10328
|
-
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
|
|
10329
|
-
color: var(--textarea-label-disabled);
|
|
10330
|
-
}
|
|
10331
11162
|
|
|
10332
11163
|
.tl-textarea__bottom {
|
|
10333
11164
|
display: flex;
|
|
@@ -10345,9 +11176,6 @@ body {
|
|
|
10345
11176
|
color: var(--textarea-helper);
|
|
10346
11177
|
position: relative;
|
|
10347
11178
|
}
|
|
10348
|
-
:has(.tl-textarea__input:disabled) .tl-textarea__helper {
|
|
10349
|
-
color: var(--color-text-disabled);
|
|
10350
|
-
}
|
|
10351
11179
|
.tl-textarea--error .tl-textarea__helper {
|
|
10352
11180
|
padding-left: 24px;
|
|
10353
11181
|
}
|
|
@@ -10373,9 +11201,6 @@ body {
|
|
|
10373
11201
|
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
|
|
10374
11202
|
color: var(--textarea-error);
|
|
10375
11203
|
}
|
|
10376
|
-
.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
|
|
10377
|
-
background-color: var(--color-text-disabled);
|
|
10378
|
-
}
|
|
10379
11204
|
|
|
10380
11205
|
.tl-textarea__charcounter {
|
|
10381
11206
|
font-family: var(--detail-05-font-family);
|
|
@@ -10387,9 +11212,6 @@ body {
|
|
|
10387
11212
|
margin-left: auto;
|
|
10388
11213
|
color: var(--textarea-textcounter);
|
|
10389
11214
|
}
|
|
10390
|
-
:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
|
|
10391
|
-
color: var(--color-text-disabled);
|
|
10392
|
-
}
|
|
10393
11215
|
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
|
|
10394
11216
|
color: var(--textarea-error);
|
|
10395
11217
|
}
|
|
@@ -10397,10 +11219,6 @@ body {
|
|
|
10397
11219
|
color: var(--textarea-error);
|
|
10398
11220
|
}
|
|
10399
11221
|
|
|
10400
|
-
.tl-textarea__charcounter-divider {
|
|
10401
|
-
color: var(--color-text-disabled);
|
|
10402
|
-
}
|
|
10403
|
-
|
|
10404
11222
|
.tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
|
|
10405
11223
|
.tl-textarea--label-inside:has(.tl-textarea__input:not(:placeholder-shown)) .tl-textarea__label {
|
|
10406
11224
|
font-family: var(--detail-07-font-family);
|