@idds/styles 1.5.31 → 1.5.32
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/index.css +780 -560
- package/dist/index.min.css +21 -13
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1902,6 +1902,133 @@ dfn {
|
|
|
1902
1902
|
color: var(--ina-error-400);
|
|
1903
1903
|
}
|
|
1904
1904
|
} */
|
|
1905
|
+
/**
|
|
1906
|
+
* BasicDropdown Component Styles
|
|
1907
|
+
* Menggunakan BEM naming convention dengan prefix "ina-"
|
|
1908
|
+
*/
|
|
1909
|
+
.ina-basic-dropdown {
|
|
1910
|
+
position: relative;
|
|
1911
|
+
display: inline-block;
|
|
1912
|
+
width: auto;
|
|
1913
|
+
}
|
|
1914
|
+
/* Trigger Container */
|
|
1915
|
+
.ina-basic-dropdown__trigger {
|
|
1916
|
+
display: inline-block;
|
|
1917
|
+
width: 100%;
|
|
1918
|
+
}
|
|
1919
|
+
/* Default Trigger Button (Matches SelectDropdown) */
|
|
1920
|
+
.ina-basic-dropdown__trigger-button {
|
|
1921
|
+
width: 100%;
|
|
1922
|
+
display: flex;
|
|
1923
|
+
align-items: center;
|
|
1924
|
+
justify-content: space-between;
|
|
1925
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
1926
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
1927
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-4, 1rem);
|
|
1928
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
1929
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
1930
|
+
cursor: pointer;
|
|
1931
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
1932
|
+
outline: none;
|
|
1933
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
1934
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
1935
|
+
min-height: 40px;
|
|
1936
|
+
}
|
|
1937
|
+
.ina-basic-dropdown__trigger-button:hover {
|
|
1938
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
1939
|
+
}
|
|
1940
|
+
/* Active/Open State for Trigger Button */
|
|
1941
|
+
.ina-basic-dropdown__trigger-button--open,
|
|
1942
|
+
.ina-basic-dropdown__trigger-button:focus-visible {
|
|
1943
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
1944
|
+
background: var(--ina-background-primary, #ffffff);
|
|
1945
|
+
box-shadow:
|
|
1946
|
+
0 0 0 1px #fff,
|
|
1947
|
+
0 0 0 2px var(--ina-primary-primary, #141414);
|
|
1948
|
+
}
|
|
1949
|
+
.ina-basic-dropdown__trigger-content {
|
|
1950
|
+
flex: 1;
|
|
1951
|
+
text-align: left;
|
|
1952
|
+
overflow: hidden;
|
|
1953
|
+
text-overflow: ellipsis;
|
|
1954
|
+
white-space: nowrap;
|
|
1955
|
+
}
|
|
1956
|
+
.ina-basic-dropdown__trigger-icon {
|
|
1957
|
+
flex-shrink: 0;
|
|
1958
|
+
color: var(--ina-content-secondary, #525252);
|
|
1959
|
+
transition: transform var(--ina-transition-base, 200ms ease-in-out);
|
|
1960
|
+
}
|
|
1961
|
+
.ina-basic-dropdown__trigger-button--open .ina-basic-dropdown__trigger-icon {
|
|
1962
|
+
transform: rotate(180deg);
|
|
1963
|
+
}
|
|
1964
|
+
.ina-basic-dropdown__trigger-button:disabled {
|
|
1965
|
+
background-color: transparent;
|
|
1966
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
1967
|
+
cursor: not-allowed;
|
|
1968
|
+
opacity: 0.6;
|
|
1969
|
+
}
|
|
1970
|
+
/* Panel Container */
|
|
1971
|
+
.ina-basic-dropdown__panel {
|
|
1972
|
+
position: absolute;
|
|
1973
|
+
z-index: 10004;
|
|
1974
|
+
min-width: 100%;
|
|
1975
|
+
width: -moz-max-content;
|
|
1976
|
+
width: max-content;
|
|
1977
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
1978
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
1979
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
1980
|
+
box-shadow:
|
|
1981
|
+
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
1982
|
+
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
1983
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
1984
|
+
margin: var(--ina-spacing-1, 0.25rem) 0;
|
|
1985
|
+
animation: basicDropdownFadeIn var(--ina-transition-duration-200) ease-out;
|
|
1986
|
+
}
|
|
1987
|
+
@keyframes basicDropdownFadeIn {
|
|
1988
|
+
from {
|
|
1989
|
+
opacity: 0;
|
|
1990
|
+
transform: translateY(-4px);
|
|
1991
|
+
}
|
|
1992
|
+
to {
|
|
1993
|
+
opacity: 1;
|
|
1994
|
+
transform: translateY(0);
|
|
1995
|
+
}
|
|
1996
|
+
}
|
|
1997
|
+
/* Positioning variants */
|
|
1998
|
+
.ina-basic-dropdown__panel--bottom-start {
|
|
1999
|
+
top: 100%;
|
|
2000
|
+
left: 0;
|
|
2001
|
+
}
|
|
2002
|
+
.ina-basic-dropdown__panel--bottom-end {
|
|
2003
|
+
top: 100%;
|
|
2004
|
+
right: 0;
|
|
2005
|
+
}
|
|
2006
|
+
.ina-basic-dropdown__panel--top-start {
|
|
2007
|
+
bottom: 100%;
|
|
2008
|
+
left: 0;
|
|
2009
|
+
}
|
|
2010
|
+
.ina-basic-dropdown__panel--top-end {
|
|
2011
|
+
bottom: 100%;
|
|
2012
|
+
right: 0;
|
|
2013
|
+
}
|
|
2014
|
+
.ina-basic-dropdown__panel--bottom {
|
|
2015
|
+
top: 100%;
|
|
2016
|
+
left: 50%;
|
|
2017
|
+
transform: translateX(-50%);
|
|
2018
|
+
}
|
|
2019
|
+
.ina-basic-dropdown__panel--top {
|
|
2020
|
+
bottom: 100%;
|
|
2021
|
+
left: 50%;
|
|
2022
|
+
transform: translateX(-50%);
|
|
2023
|
+
}
|
|
2024
|
+
/* Responsive adjustments */
|
|
2025
|
+
@media (max-width: 767px) {
|
|
2026
|
+
.ina-basic-dropdown__trigger-button {
|
|
2027
|
+
height: 36px;
|
|
2028
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
2029
|
+
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
2030
|
+
}
|
|
2031
|
+
}
|
|
1905
2032
|
dialog.bottom-sheet-dropdown {
|
|
1906
2033
|
position: fixed;
|
|
1907
2034
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
@@ -3066,7 +3193,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
3066
3193
|
/* Main container - label wrapper */
|
|
3067
3194
|
display: flex;
|
|
3068
3195
|
align-items: center;
|
|
3069
|
-
gap: var(--ina-spacing-3);
|
|
3196
|
+
gap: var(--ina-spacing-3, 0.75rem);
|
|
3070
3197
|
}
|
|
3071
3198
|
.ina-checkbox.ina-checkbox--with-subtext {
|
|
3072
3199
|
/* Align items to flex-start when subtext is present */
|
|
@@ -3085,10 +3212,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
3085
3212
|
height: 1rem; /* h-4 */
|
|
3086
3213
|
max-width: 1rem;
|
|
3087
3214
|
max-height: 1rem;
|
|
3088
|
-
font-size: var(--ina-font-2xs);
|
|
3089
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
3090
|
-
background-color: var(--ina-background-primary);
|
|
3091
|
-
border-radius: var(--ina-radius-base);
|
|
3215
|
+
font-size: var(--ina-font-2xs, 0.625rem);
|
|
3216
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
3217
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
3218
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
3092
3219
|
display: flex;
|
|
3093
3220
|
align-items: center;
|
|
3094
3221
|
justify-content: center;
|
|
@@ -3108,8 +3235,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
3108
3235
|
flex-direction: column;
|
|
3109
3236
|
}
|
|
3110
3237
|
.ina-checkbox__label {
|
|
3111
|
-
font-size: var(--ina-font-sm);
|
|
3112
|
-
color: var(--ina-content-primary);
|
|
3238
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
3239
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3113
3240
|
margin: 0;
|
|
3114
3241
|
}
|
|
3115
3242
|
@media (min-width: 768px) {
|
|
@@ -3118,8 +3245,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
3118
3245
|
}
|
|
3119
3246
|
}
|
|
3120
3247
|
.ina-checkbox__subtext {
|
|
3121
|
-
font-size: var(--ina-font-xs);
|
|
3122
|
-
color: var(--ina-content-secondary);
|
|
3248
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
3249
|
+
color: var(--ina-content-secondary, #525252);
|
|
3123
3250
|
margin-top: 0.125rem;
|
|
3124
3251
|
margin: 0;
|
|
3125
3252
|
}
|
|
@@ -3130,19 +3257,19 @@ dialog.bottom-sheet-dropdown {
|
|
|
3130
3257
|
}
|
|
3131
3258
|
/* Modifier for checked state */
|
|
3132
3259
|
.ina-checkbox__box--checked {
|
|
3133
|
-
background-color: var(--ina-content-primary);
|
|
3134
|
-
border-color: var(--ina-content-primary);
|
|
3260
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
3261
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
3135
3262
|
}
|
|
3136
3263
|
/* Modifier for indeterminate state */
|
|
3137
3264
|
.ina-checkbox__box--indeterminate {
|
|
3138
|
-
background-color: var(--ina-content-primary);
|
|
3139
|
-
border-color: var(--ina-content-primary);
|
|
3265
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
3266
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
3140
3267
|
}
|
|
3141
3268
|
/* Modifier for invalid state */
|
|
3142
3269
|
.ina-checkbox__box--invalid {
|
|
3143
3270
|
border-color: var(
|
|
3144
3271
|
--ina-sentiment-negative-500,
|
|
3145
|
-
var(--ina-error-500)
|
|
3272
|
+
var(--ina-error-500, #f02d2d)
|
|
3146
3273
|
) !important;
|
|
3147
3274
|
}
|
|
3148
3275
|
/* Modifier for disabled state */
|
|
@@ -3152,33 +3279,33 @@ dialog.bottom-sheet-dropdown {
|
|
|
3152
3279
|
.ina-checkbox--disabled .ina-checkbox__box--unchecked,
|
|
3153
3280
|
.ina-checkbox--disabled .ina-checkbox__box--checked,
|
|
3154
3281
|
.ina-checkbox--disabled .ina-checkbox__box--indeterminate {
|
|
3155
|
-
background-color: var(--ina-background-tertiary);
|
|
3156
|
-
border-color: var(--ina-stroke-secondary);
|
|
3282
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
3283
|
+
border-color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3157
3284
|
}
|
|
3158
3285
|
.ina-checkbox--disabled .ina-checkbox__box--unchecked {
|
|
3159
|
-
background-color: var(--ina-background-tertiary);
|
|
3160
|
-
border-color: var(--ina-stroke-secondary);
|
|
3286
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
3287
|
+
border-color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3161
3288
|
}
|
|
3162
3289
|
.ina-checkbox--disabled .ina-checkbox__label {
|
|
3163
|
-
color: var(--ina-content-primary);
|
|
3290
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3164
3291
|
}
|
|
3165
3292
|
.ina-checkbox--disabled .ina-checkbox__icon {
|
|
3166
|
-
color: var(--ina-stroke-secondary);
|
|
3293
|
+
color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3167
3294
|
}
|
|
3168
3295
|
/* Default unchecked state hover effect */
|
|
3169
3296
|
.ina-checkbox__box--unchecked:hover {
|
|
3170
|
-
border-color: var(--ina-stroke-secondary);
|
|
3297
|
+
border-color: var(--ina-stroke-secondary, #a3a3a3);
|
|
3171
3298
|
}
|
|
3172
3299
|
/* Icon styling */
|
|
3173
3300
|
.ina-checkbox__icon {
|
|
3174
|
-
color: var(--ina-neutral-25); /* white */
|
|
3301
|
+
color: var(--ina-neutral-25, #ffffff); /* white */
|
|
3175
3302
|
display: flex;
|
|
3176
3303
|
align-items: center;
|
|
3177
3304
|
justify-content: center;
|
|
3178
3305
|
}
|
|
3179
3306
|
/* Disabled icon color */
|
|
3180
3307
|
.ina-checkbox--disabled .ina-checkbox__icon {
|
|
3181
|
-
color: var(--ina-neutral-400);
|
|
3308
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
3182
3309
|
}
|
|
3183
3310
|
/* Focus state menggunakan peer selector untuk accessibility */
|
|
3184
3311
|
/* Focus state menggunakan peer selector untuk accessibility */
|
|
@@ -3204,7 +3331,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
3204
3331
|
}
|
|
3205
3332
|
/* Invalid state yang tidak disabled */
|
|
3206
3333
|
.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
|
|
3207
|
-
border-color: var(--ina-negative-600, var(--ina-error-600));
|
|
3334
|
+
border-color: var(--ina-negative-600, var(--ina-error-600, #f02d2d));
|
|
3208
3335
|
}
|
|
3209
3336
|
/* Interactive states */
|
|
3210
3337
|
.ina-checkbox:not(.ina-checkbox--disabled) {
|
|
@@ -3699,31 +3826,31 @@ dialog.bottom-sheet-dropdown {
|
|
|
3699
3826
|
.ina-date-picker {
|
|
3700
3827
|
position: relative;
|
|
3701
3828
|
display: inline-block;
|
|
3702
|
-
background-color: var(--ina-white);
|
|
3829
|
+
background-color: var(--ina-white, #ffffff);
|
|
3703
3830
|
}
|
|
3704
3831
|
/* Trigger Button - Same layout as TextField wrapper */
|
|
3705
3832
|
.ina-date-picker__trigger {
|
|
3706
3833
|
display: flex;
|
|
3707
3834
|
align-items: center;
|
|
3708
|
-
gap: var(--ina-spacing-2);
|
|
3835
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
3709
3836
|
width: 100%;
|
|
3710
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
3711
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
3712
|
-
border-radius: var(--ina-radius-lg);
|
|
3713
|
-
background-color: var(--ina-background-primary);
|
|
3837
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
3838
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
3839
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
3840
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
3714
3841
|
cursor: pointer;
|
|
3715
|
-
transition: all var(--ina-transition-base);
|
|
3842
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
3716
3843
|
}
|
|
3717
3844
|
.ina-date-picker__label {
|
|
3718
|
-
font-size: var(--ina-font-sm);
|
|
3719
|
-
font-weight: var(--ina-font-medium);
|
|
3720
|
-
color: var(--ina-content-primary);
|
|
3721
|
-
margin-bottom: var(--ina-spacing-2);
|
|
3845
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
3846
|
+
font-weight: var(--ina-font-medium, 500);
|
|
3847
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3848
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
3722
3849
|
display: block;
|
|
3723
3850
|
}
|
|
3724
3851
|
.ina-date-picker__required {
|
|
3725
|
-
color: var(--ina-negative-500);
|
|
3726
|
-
margin-left: var(--ina-spacing-1);
|
|
3852
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
3853
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
3727
3854
|
}
|
|
3728
3855
|
/* Size variants */
|
|
3729
3856
|
.ina-date-picker__trigger--size-sm {
|
|
@@ -3753,52 +3880,52 @@ dialog.bottom-sheet-dropdown {
|
|
|
3753
3880
|
}
|
|
3754
3881
|
}
|
|
3755
3882
|
.ina-date-picker__trigger:hover {
|
|
3756
|
-
background-color: var(--ina-background-secondary);
|
|
3883
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3757
3884
|
}
|
|
3758
3885
|
.ina-date-picker__trigger:focus {
|
|
3759
3886
|
box-shadow:
|
|
3760
|
-
0 0 0
|
|
3761
|
-
0 0 0
|
|
3887
|
+
0 0 0 2px #fff,
|
|
3888
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
3762
3889
|
outline: none;
|
|
3763
|
-
background-color: var(--ina-background-primary);
|
|
3890
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
3764
3891
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
3765
3892
|
}
|
|
3766
3893
|
.ina-date-picker__trigger--disabled {
|
|
3767
|
-
background-color: var(--ina-background-secondary);
|
|
3894
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3768
3895
|
cursor: not-allowed;
|
|
3769
3896
|
opacity: 0.6;
|
|
3770
3897
|
}
|
|
3771
3898
|
.ina-date-picker__trigger--disabled:hover {
|
|
3772
|
-
background-color: var(--ina-background-secondary);
|
|
3773
|
-
border-color: var(--ina-stroke-primary);
|
|
3899
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3900
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
3774
3901
|
}
|
|
3775
3902
|
.ina-date-picker__trigger--readonly {
|
|
3776
|
-
background-color: var(--ina-background-secondary);
|
|
3903
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3777
3904
|
cursor: default;
|
|
3778
3905
|
}
|
|
3779
3906
|
.ina-date-picker__trigger--readonly:hover {
|
|
3780
|
-
background-color: var(--ina-background-secondary);
|
|
3781
|
-
border-color: var(--ina-stroke-primary);
|
|
3907
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
3908
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
3782
3909
|
}
|
|
3783
3910
|
/* Trigger Icon - Same as prefix icon in TextField */
|
|
3784
3911
|
.ina-date-picker__trigger-icon {
|
|
3785
|
-
color: var(--ina-content-tertiary);
|
|
3912
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
3786
3913
|
flex-shrink: 0;
|
|
3787
3914
|
}
|
|
3788
3915
|
/* Trigger Text - Same as input field in TextField */
|
|
3789
3916
|
.ina-date-picker__trigger-text {
|
|
3790
3917
|
flex: 1;
|
|
3791
|
-
font-size: var(--ina-font-sm);
|
|
3792
|
-
font-weight: var(--ina-font-normal);
|
|
3793
|
-
color: var(--ina-content-primary);
|
|
3918
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
3919
|
+
font-weight: var(--ina-font-normal, 400);
|
|
3920
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3794
3921
|
white-space: nowrap;
|
|
3795
3922
|
overflow: hidden;
|
|
3796
3923
|
text-overflow: ellipsis;
|
|
3797
3924
|
text-align: left;
|
|
3798
3925
|
}
|
|
3799
3926
|
.ina-date-picker__trigger-text--placeholder {
|
|
3800
|
-
color: var(--ina-content-tertiary);
|
|
3801
|
-
font-size: var(--ina-font-sm);
|
|
3927
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
3928
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
3802
3929
|
}
|
|
3803
3930
|
/* Clear Button - Same styling as TextField */
|
|
3804
3931
|
.ina-date-picker__clear-button {
|
|
@@ -3810,11 +3937,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
3810
3937
|
display: inline-flex;
|
|
3811
3938
|
align-items: center;
|
|
3812
3939
|
justify-content: center;
|
|
3813
|
-
color: var(--ina-content-dark-secondary);
|
|
3814
|
-
transition: color var(--ina-transition-base);
|
|
3940
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
3941
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
3815
3942
|
}
|
|
3816
3943
|
.ina-date-picker__clear-button:hover:not(:disabled) {
|
|
3817
|
-
color: var(--ina-content-secondary);
|
|
3944
|
+
color: var(--ina-content-secondary, #525252);
|
|
3818
3945
|
}
|
|
3819
3946
|
.ina-date-picker__clear-button:disabled {
|
|
3820
3947
|
cursor: not-allowed;
|
|
@@ -3830,14 +3957,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
3830
3957
|
z-index: 10004; /* Higher than YearPicker panel */
|
|
3831
3958
|
top: 100%;
|
|
3832
3959
|
left: 0;
|
|
3833
|
-
margin-top: var(--ina-spacing-1);
|
|
3834
|
-
background-color: var(--ina-background-primary);
|
|
3835
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
3836
|
-
border-radius: var(--ina-radius-xl);
|
|
3960
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
3961
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
3962
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
3963
|
+
border-radius: var(--ina-radius-xl, 0.75rem);
|
|
3837
3964
|
box-shadow:
|
|
3838
3965
|
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
3839
3966
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
3840
|
-
padding: var(--ina-spacing-4);
|
|
3967
|
+
padding: var(--ina-spacing-4, 1rem);
|
|
3841
3968
|
animation: date-picker-panel-fade-in 0.15s ease-out;
|
|
3842
3969
|
/* Width and height follow content */
|
|
3843
3970
|
width: -moz-fit-content;
|
|
@@ -3881,9 +4008,24 @@ dialog.bottom-sheet-dropdown {
|
|
|
3881
4008
|
}
|
|
3882
4009
|
/* Dynamic right positioning to prevent overflow */
|
|
3883
4010
|
.ina-date-picker__panel--right-aligned {
|
|
4011
|
+
left: auto !important;
|
|
3884
4012
|
left: auto !important;
|
|
3885
4013
|
right: 0;
|
|
3886
4014
|
}
|
|
4015
|
+
/* Panel only mode (static positioning) */
|
|
4016
|
+
.ina-date-picker--panel-only .ina-date-picker__panel {
|
|
4017
|
+
position: static;
|
|
4018
|
+
margin: 0;
|
|
4019
|
+
transform: none;
|
|
4020
|
+
animation: none;
|
|
4021
|
+
z-index: 1;
|
|
4022
|
+
box-shadow: none; /* Remove shadow for embedded view, usually handled by container */
|
|
4023
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
4024
|
+
}
|
|
4025
|
+
.ina-date-picker--panel-only {
|
|
4026
|
+
width: -moz-fit-content;
|
|
4027
|
+
width: fit-content;
|
|
4028
|
+
}
|
|
3887
4029
|
/* Panel Content */
|
|
3888
4030
|
.ina-date-picker__panel-content {
|
|
3889
4031
|
display: flex;
|
|
@@ -3909,7 +4051,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
3909
4051
|
flex-direction: column;
|
|
3910
4052
|
}
|
|
3911
4053
|
.ina-date-picker__day.ina-date-picker__day--other-month.ina-date-picker__day--range-in.ina-date-picker__day--in-range {
|
|
3912
|
-
color: var(--ina-content-tertiary) !important;
|
|
4054
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
3913
4055
|
}
|
|
3914
4056
|
@media (min-width: 1280px) {
|
|
3915
4057
|
.ina-date-picker__panel-content--responsive {
|
|
@@ -3974,25 +4116,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
3974
4116
|
min-height: 40px; /* Ensure consistent height */
|
|
3975
4117
|
}
|
|
3976
4118
|
.ina-date-picker__calendar-title {
|
|
3977
|
-
font-size: var(--ina-font-lg);
|
|
3978
|
-
font-weight: var(--ina-font-semibold);
|
|
3979
|
-
color: var(--ina-content-primary);
|
|
4119
|
+
font-size: var(--ina-font-lg, 1.125rem);
|
|
4120
|
+
font-weight: var(--ina-font-semibold, 600);
|
|
4121
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3980
4122
|
}
|
|
3981
4123
|
.ina-date-picker__nav-button {
|
|
3982
4124
|
display: flex;
|
|
3983
4125
|
align-items: center;
|
|
3984
4126
|
justify-content: center;
|
|
3985
|
-
padding: var(--ina-spacing-1);
|
|
4127
|
+
padding: var(--ina-spacing-1, 0.25rem);
|
|
3986
4128
|
border: none;
|
|
3987
4129
|
background-color: transparent;
|
|
3988
|
-
color: var(--ina-text-secondary);
|
|
4130
|
+
color: var(--ina-text-secondary, #525252);
|
|
3989
4131
|
cursor: pointer;
|
|
3990
|
-
border-radius: var(--ina-radius-base);
|
|
4132
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
3991
4133
|
transition: all var(--ina-transition-fast);
|
|
3992
4134
|
}
|
|
3993
4135
|
.ina-date-picker__nav-button:hover {
|
|
3994
|
-
background-color: var(--ina-background-tertiary);
|
|
3995
|
-
color: var(--ina-content-primary);
|
|
4136
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4137
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
3996
4138
|
}
|
|
3997
4139
|
.ina-date-picker__nav-icon {
|
|
3998
4140
|
color: inherit;
|
|
@@ -4013,10 +4155,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
4013
4155
|
display: flex;
|
|
4014
4156
|
align-items: center;
|
|
4015
4157
|
justify-content: center;
|
|
4016
|
-
padding: var(--ina-spacing-2);
|
|
4017
|
-
font-size: var(--ina-font-xs);
|
|
4018
|
-
font-weight: var(--ina-font-medium);
|
|
4019
|
-
color: var(--ina-content-tertiary);
|
|
4158
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
4159
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
4160
|
+
font-weight: var(--ina-font-medium, 500);
|
|
4161
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
4020
4162
|
text-align: center;
|
|
4021
4163
|
width: 100%;
|
|
4022
4164
|
max-width: 40px;
|
|
@@ -4034,72 +4176,72 @@ dialog.bottom-sheet-dropdown {
|
|
|
4034
4176
|
align-items: center;
|
|
4035
4177
|
justify-content: center;
|
|
4036
4178
|
padding: 0;
|
|
4037
|
-
font-size: var(--ina-font-xs);
|
|
4038
|
-
font-weight: var(--ina-font-medium);
|
|
4039
|
-
color: var(--ina-content-primary);
|
|
4040
|
-
background-color: var(--ina-background-primary);
|
|
4179
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
4180
|
+
font-weight: var(--ina-font-medium, 500);
|
|
4181
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
4182
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
4041
4183
|
cursor: pointer;
|
|
4042
4184
|
border: none;
|
|
4043
|
-
border-radius: var(--ina-radius-lg);
|
|
4044
|
-
transition: all var(--ina-transition-fast);
|
|
4185
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4186
|
+
transition: all var(--ina-transition-fast, 150ms ease-in-out);
|
|
4045
4187
|
height: 40px;
|
|
4046
4188
|
max-width: 40px;
|
|
4047
4189
|
width: 100%;
|
|
4048
4190
|
}
|
|
4049
4191
|
.ina-date-picker__day:hover {
|
|
4050
|
-
background-color: var(--ina-background-tertiary);
|
|
4192
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4051
4193
|
}
|
|
4052
4194
|
.ina-date-picker__day--selected {
|
|
4053
|
-
background-color: var(--ina-content-primary);
|
|
4054
|
-
color: var(--ina-white);
|
|
4055
|
-
border-radius: var(--ina-radius-lg);
|
|
4195
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
4196
|
+
color: var(--ina-white, #ffffff);
|
|
4197
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4056
4198
|
}
|
|
4057
4199
|
.ina-date-picker__day--other-month.ina-date-picker__day--selected {
|
|
4058
|
-
color: var(--ina-white);
|
|
4200
|
+
color: var(--ina-white, #ffffff);
|
|
4059
4201
|
}
|
|
4060
4202
|
.ina-date-picker__day--selected:hover {
|
|
4061
|
-
background-color: var(--ina-content-primary);
|
|
4203
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
4062
4204
|
}
|
|
4063
4205
|
.ina-date-picker__day.ina-date-picker__day--range-start {
|
|
4064
|
-
background-color: var(--ina-content-primary) !important;
|
|
4065
|
-
color: var(--ina-white) !important;
|
|
4066
|
-
border-radius: var(--ina-radius-lg);
|
|
4206
|
+
background-color: var(--ina-content-primary, #1f1f1f) !important;
|
|
4207
|
+
color: var(--ina-white, #ffffff) !important;
|
|
4208
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4067
4209
|
}
|
|
4068
4210
|
.ina-date-picker__day.ina-date-picker__day--range-end {
|
|
4069
|
-
background-color: var(--ina-content-primary) !important;
|
|
4070
|
-
color: var(--ina-white) !important;
|
|
4071
|
-
border-radius: var(--ina-radius-lg);
|
|
4211
|
+
background-color: var(--ina-content-primary, #1f1f1f) !important;
|
|
4212
|
+
color: var(--ina-white, #ffffff) !important;
|
|
4213
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4072
4214
|
}
|
|
4073
4215
|
.ina-date-picker__day--range-in {
|
|
4074
|
-
background-color: var(--ina-background-tertiary) !important;
|
|
4075
|
-
color: var(--ina-text-primary) !important;
|
|
4216
|
+
background-color: var(--ina-background-tertiary, #f5f5f5) !important;
|
|
4217
|
+
color: var(--ina-text-primary, #1f1f1f) !important;
|
|
4076
4218
|
border-radius: 0;
|
|
4077
4219
|
}
|
|
4078
4220
|
.ina-date-picker__day--start {
|
|
4079
|
-
background-color: var(--ina-content-primary);
|
|
4080
|
-
border-radius: var(--ina-radius-lg);
|
|
4221
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
4222
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4081
4223
|
}
|
|
4082
4224
|
.ina-date-picker__day--end {
|
|
4083
|
-
border-radius: var(--ina-radius-lg);
|
|
4225
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4084
4226
|
}
|
|
4085
4227
|
.ina-date-picker__day.ina-date-picker__day--end:hover {
|
|
4086
|
-
background-color: var(--ina-background-tertiary);
|
|
4228
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4087
4229
|
}
|
|
4088
4230
|
.ina-date-picker__day--in-range {
|
|
4089
|
-
background-color: var(--ina-background-tertiary);
|
|
4231
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4090
4232
|
border-radius: 0;
|
|
4091
4233
|
}
|
|
4092
4234
|
.ina-date-picker__day.ina-date-picker__day--disabled {
|
|
4093
|
-
color: var(--ina-content-tertiary);
|
|
4235
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
4094
4236
|
cursor: not-allowed;
|
|
4095
|
-
background-color: var(--ina-background-secondary);
|
|
4237
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4096
4238
|
border-radius: 0;
|
|
4097
4239
|
}
|
|
4098
4240
|
.ina-date-picker__day.ina-date-picker__day--disabled:hover {
|
|
4099
4241
|
opacity: 0.4;
|
|
4100
4242
|
}
|
|
4101
4243
|
.ina-date-picker__day.ina-date-picker__day--disabled.ina-date-picker__day--selected {
|
|
4102
|
-
border-radius: var(--ina-radius-lg);
|
|
4244
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
4103
4245
|
}
|
|
4104
4246
|
.ina-date-picker__day.ina-date-picker__day--today {
|
|
4105
4247
|
display: flex;
|
|
@@ -4108,12 +4250,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
4108
4250
|
justify-content: center;
|
|
4109
4251
|
}
|
|
4110
4252
|
.ina-date-picker__day.ina-date-picker__day--today .ina-date-picker__day-number {
|
|
4111
|
-
border-top: 2px solid var(--ina-content-primary);
|
|
4112
|
-
font-weight: var(--ina-font-bold);
|
|
4253
|
+
border-top: 2px solid var(--ina-content-primary, #1f1f1f);
|
|
4254
|
+
font-weight: var(--ina-font-bold, 700);
|
|
4113
4255
|
}
|
|
4114
4256
|
.ina-date-picker__day.ina-date-picker__day--today.ina-date-picker__day--selected
|
|
4115
4257
|
.ina-date-picker__day-number {
|
|
4116
|
-
border-top: 2px solid var(--ina-white);
|
|
4258
|
+
border-top: 2px solid var(--ina-white, #ffffff);
|
|
4117
4259
|
}
|
|
4118
4260
|
/* .ina-date-picker__day--today::before {
|
|
4119
4261
|
content: 'Hari Ini';
|
|
@@ -4126,51 +4268,51 @@ dialog.bottom-sheet-dropdown {
|
|
|
4126
4268
|
color: var(--ina-white);
|
|
4127
4269
|
} */
|
|
4128
4270
|
.ina-date-picker__day--other-month {
|
|
4129
|
-
color: var(--ina-content-tertiary);
|
|
4271
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
4130
4272
|
}
|
|
4131
4273
|
/* Month/Year Selector */
|
|
4132
4274
|
.ina-date-picker__month-selector {
|
|
4133
4275
|
display: flex;
|
|
4134
4276
|
align-items: center;
|
|
4135
4277
|
justify-content: space-between;
|
|
4136
|
-
margin-bottom: var(--ina-spacing-3);
|
|
4278
|
+
margin-bottom: var(--ina-spacing-3, 0.75rem);
|
|
4137
4279
|
}
|
|
4138
4280
|
.ina-date-picker__month-text {
|
|
4139
|
-
font-size: var(--ina-font-base);
|
|
4140
|
-
font-weight: var(--ina-font-semibold);
|
|
4141
|
-
color: var(--ina-content-primary);
|
|
4281
|
+
font-size: var(--ina-font-base, 1rem);
|
|
4282
|
+
font-weight: var(--ina-font-semibold, 600);
|
|
4283
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
4142
4284
|
cursor: pointer;
|
|
4143
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
4144
|
-
border-radius: var(--ina-radius-base);
|
|
4145
|
-
transition: all var(--ina-transition-fast);
|
|
4285
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
4286
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
4287
|
+
transition: all var(--ina-transition-fast, 150ms ease-in-out);
|
|
4146
4288
|
}
|
|
4147
4289
|
.ina-date-picker__month-text:hover {
|
|
4148
|
-
background-color: var(--ina-background-tertiary);
|
|
4290
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
4149
4291
|
}
|
|
4150
4292
|
/* Range Display */
|
|
4151
4293
|
.ina-date-picker__range-display {
|
|
4152
|
-
border-top: 1px solid var(--ina-stroke-primary);
|
|
4153
|
-
padding-top: var(--ina-spacing-3);
|
|
4154
|
-
margin-top: var(--ina-spacing-3);
|
|
4294
|
+
border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
4295
|
+
padding-top: var(--ina-spacing-3, 0.75rem);
|
|
4296
|
+
margin-top: var(--ina-spacing-3, 0.75rem);
|
|
4155
4297
|
}
|
|
4156
4298
|
.ina-date-picker__range-text {
|
|
4157
|
-
font-size: var(--ina-font-sm);
|
|
4158
|
-
color: var(--ina-text-secondary);
|
|
4299
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
4300
|
+
color: var(--ina-text-secondary, #525252);
|
|
4159
4301
|
text-align: center;
|
|
4160
4302
|
}
|
|
4161
4303
|
/* Disabled State */
|
|
4162
4304
|
.ina-date-picker--disabled .ina-date-picker__trigger {
|
|
4163
|
-
background-color: var(--ina-background-secondary);
|
|
4305
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4164
4306
|
cursor: not-allowed;
|
|
4165
4307
|
opacity: 0.6;
|
|
4166
4308
|
}
|
|
4167
4309
|
.ina-date-picker--disabled .ina-date-picker__trigger:hover {
|
|
4168
|
-
background-color: var(--ina-background-secondary);
|
|
4169
|
-
border-color: var(--ina-stroke-primary);
|
|
4310
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
4311
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
4170
4312
|
}
|
|
4171
4313
|
/* Focus Visible */
|
|
4172
4314
|
.ina-date-picker__trigger:focus-visible {
|
|
4173
|
-
outline: 2px solid var(--ina-content-primary);
|
|
4315
|
+
outline: 2px solid var(--ina-content-primary, #1f1f1f);
|
|
4174
4316
|
outline-offset: 2px;
|
|
4175
4317
|
}
|
|
4176
4318
|
/* High Contrast Mode */
|
|
@@ -6463,14 +6605,17 @@ dialog.bottom-sheet-dropdown {
|
|
|
6463
6605
|
/* Label styling */
|
|
6464
6606
|
.ina-input-search__label {
|
|
6465
6607
|
display: block;
|
|
6466
|
-
font-size: var(--ina-font-sm);
|
|
6467
|
-
font-weight: var(--ina-font-medium);
|
|
6468
|
-
color: var(
|
|
6469
|
-
|
|
6608
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
6609
|
+
font-weight: var(--ina-font-medium, 500);
|
|
6610
|
+
color: var(
|
|
6611
|
+
--ina-content-primary,
|
|
6612
|
+
#1f1f1f
|
|
6613
|
+
); /* Changed to primary to match TextField */
|
|
6614
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
6470
6615
|
}
|
|
6471
6616
|
.ina-input-search__label--required .ina-input-search__asterisk {
|
|
6472
|
-
color: var(--ina-error-500);
|
|
6473
|
-
margin-left: var(--ina-spacing-1);
|
|
6617
|
+
color: var(--ina-error-500, #f02d2d);
|
|
6618
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
6474
6619
|
}
|
|
6475
6620
|
/* Input wrapper */
|
|
6476
6621
|
.ina-input-search__wrapper {
|
|
@@ -6491,20 +6636,23 @@ dialog.bottom-sheet-dropdown {
|
|
|
6491
6636
|
}
|
|
6492
6637
|
/* Hover state */
|
|
6493
6638
|
.ina-input-search__wrapper:hover {
|
|
6494
|
-
background-color: var(--ina-neutral-50);
|
|
6639
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
6495
6640
|
}
|
|
6496
6641
|
/* Focus state */
|
|
6497
6642
|
.ina-input-search__wrapper:focus-within {
|
|
6498
|
-
box-shadow:
|
|
6643
|
+
box-shadow:
|
|
6644
|
+
0 0 0 2px #fff,
|
|
6645
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
6499
6646
|
outline: none;
|
|
6500
|
-
background-color: var(--ina-background-primary);
|
|
6501
|
-
border-color: var(--ina-content-primary);
|
|
6647
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
6648
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
6502
6649
|
}
|
|
6503
6650
|
.ina-input-search__wrapper--disabled {
|
|
6504
6651
|
background-color: var(
|
|
6505
|
-
--ina-background-tertiary
|
|
6652
|
+
--ina-background-tertiary,
|
|
6653
|
+
#f5f5f5
|
|
6506
6654
|
); /* Changed to match TextField */
|
|
6507
|
-
border-color: var(--ina-stroke-primary) !important;
|
|
6655
|
+
border-color: var(--ina-stroke-primary, #e5e5e5) !important;
|
|
6508
6656
|
cursor: not-allowed;
|
|
6509
6657
|
opacity: 1; /* Reset opacity control fully via vars */
|
|
6510
6658
|
}
|
|
@@ -6513,7 +6661,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
6513
6661
|
flex-shrink: 0;
|
|
6514
6662
|
width: 20px;
|
|
6515
6663
|
height: 20px;
|
|
6516
|
-
color: var(--ina-content-secondary);
|
|
6664
|
+
color: var(--ina-content-secondary, #525252);
|
|
6517
6665
|
}
|
|
6518
6666
|
/* Input field */
|
|
6519
6667
|
.ina-input-search__input {
|
|
@@ -6522,16 +6670,16 @@ dialog.bottom-sheet-dropdown {
|
|
|
6522
6670
|
border: none;
|
|
6523
6671
|
outline: none;
|
|
6524
6672
|
background: transparent;
|
|
6525
|
-
font-size: var(--ina-font-sm);
|
|
6673
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
6526
6674
|
font-family: inherit;
|
|
6527
|
-
color: var(--ina-content-color-181717);
|
|
6528
|
-
font-weight: var(--ina-font-normal);
|
|
6675
|
+
color: var(--ina-content-color-181717, #1f1f1f);
|
|
6676
|
+
font-weight: var(--ina-font-normal, 400);
|
|
6529
6677
|
}
|
|
6530
6678
|
.ina-input-search__input::-moz-placeholder {
|
|
6531
|
-
color: var(--ina-content-tertiary);
|
|
6679
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
6532
6680
|
}
|
|
6533
6681
|
.ina-input-search__input::placeholder {
|
|
6534
|
-
color: var(--ina-content-tertiary);
|
|
6682
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
6535
6683
|
}
|
|
6536
6684
|
.ina-input-search__input:disabled {
|
|
6537
6685
|
cursor: not-allowed;
|
|
@@ -6543,17 +6691,20 @@ dialog.bottom-sheet-dropdown {
|
|
|
6543
6691
|
cursor: pointer;
|
|
6544
6692
|
width: 20px;
|
|
6545
6693
|
height: 20px;
|
|
6546
|
-
color: var(
|
|
6694
|
+
color: var(
|
|
6695
|
+
--ina-content-dark-secondary,
|
|
6696
|
+
#737373
|
|
6697
|
+
); /* Match TextField clear button */
|
|
6547
6698
|
display: flex;
|
|
6548
6699
|
align-items: center;
|
|
6549
6700
|
justify-content: center;
|
|
6550
|
-
border-radius: var(--ina-radius-base);
|
|
6551
|
-
transition: color var(--ina-transition-base);
|
|
6701
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
6702
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
6552
6703
|
background: none;
|
|
6553
6704
|
padding: 0;
|
|
6554
6705
|
}
|
|
6555
6706
|
.ina-input-search__clear-button:hover {
|
|
6556
|
-
color: var(--ina-content-secondary);
|
|
6707
|
+
color: var(--ina-content-secondary, #525252);
|
|
6557
6708
|
background-color: transparent; /* TextField doesn't have bg on hover for clear btn */
|
|
6558
6709
|
}
|
|
6559
6710
|
.ina-input-search__clear-button--hidden {
|
|
@@ -6568,12 +6719,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
6568
6719
|
@media (max-width: 639px) {
|
|
6569
6720
|
.ina-input-search__wrapper {
|
|
6570
6721
|
height: 36px; /* Match md size */
|
|
6571
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
6722
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
6572
6723
|
}
|
|
6573
6724
|
|
|
6574
6725
|
.ina-input-search__input,
|
|
6575
6726
|
.ina-input-search__label {
|
|
6576
|
-
font-size: var(--ina-font-xs) !important;
|
|
6727
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
6577
6728
|
}
|
|
6578
6729
|
}
|
|
6579
6730
|
/**
|
|
@@ -7711,7 +7862,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
7711
7862
|
display: flex;
|
|
7712
7863
|
flex-direction: column;
|
|
7713
7864
|
border-radius: var(--ina-rounded-lg, 8px);
|
|
7714
|
-
background-color: var(--ina-background-primary);
|
|
7865
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
7715
7866
|
width: 100%;
|
|
7716
7867
|
max-width: 100%;
|
|
7717
7868
|
overflow-x: auto;
|
|
@@ -7720,14 +7871,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
7720
7871
|
.ina-one-time-password__title {
|
|
7721
7872
|
font-size: 20px;
|
|
7722
7873
|
font-weight: 600; /* semibold */
|
|
7723
|
-
color: var(--ina-content-primary);
|
|
7874
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
7724
7875
|
margin-bottom: 16px;
|
|
7725
7876
|
}
|
|
7726
7877
|
/* Description */
|
|
7727
7878
|
.ina-one-time-password__description {
|
|
7728
7879
|
font-size: 14px;
|
|
7729
7880
|
font-weight: 400; /* normal */
|
|
7730
|
-
color: var(--ina-content-secondary);
|
|
7881
|
+
color: var(--ina-content-secondary, #525252);
|
|
7731
7882
|
margin-bottom: 16px;
|
|
7732
7883
|
}
|
|
7733
7884
|
/* Input container */
|
|
@@ -7745,61 +7896,64 @@ dialog.bottom-sheet-dropdown {
|
|
|
7745
7896
|
flex: 0 0 auto;
|
|
7746
7897
|
width: 44px; /* Auto width based on content */
|
|
7747
7898
|
height: 44px;
|
|
7748
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
7899
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
7749
7900
|
border-radius: var(--ina-rounded-lg, 8px);
|
|
7750
|
-
background-color: var(--ina-background-primary);
|
|
7901
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
7751
7902
|
font-size: 24px;
|
|
7752
7903
|
font-weight: 500;
|
|
7753
|
-
color: var(--ina-content-primary);
|
|
7904
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
7754
7905
|
text-align: center;
|
|
7755
7906
|
outline: none;
|
|
7756
|
-
transition: all var(--ina-transition-base);
|
|
7907
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
7757
7908
|
font-family: inherit;
|
|
7758
7909
|
}
|
|
7759
7910
|
/* Hover state */
|
|
7760
7911
|
.ina-one-time-password__input:hover:not(:disabled):not(:-moz-read-only) {
|
|
7761
|
-
background-color: var(--ina-neutral-50);
|
|
7912
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
7762
7913
|
}
|
|
7763
7914
|
.ina-one-time-password__input:hover:not(:disabled):not(:read-only) {
|
|
7764
|
-
background-color: var(--ina-neutral-50);
|
|
7915
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
7765
7916
|
}
|
|
7766
7917
|
/* Focus state */
|
|
7767
7918
|
.ina-one-time-password__input:focus {
|
|
7768
|
-
border-color: var(--ina-content-primary);
|
|
7769
|
-
box-shadow:
|
|
7770
|
-
|
|
7919
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
7920
|
+
box-shadow:
|
|
7921
|
+
0 0 0 2px #fff,
|
|
7922
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
7923
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
7771
7924
|
}
|
|
7772
7925
|
/* Error/Invalid state */
|
|
7773
7926
|
.ina-one-time-password__input--error {
|
|
7774
|
-
border-color: var(--ina-negative-500);
|
|
7927
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
7775
7928
|
}
|
|
7776
7929
|
.ina-one-time-password__input--error:focus {
|
|
7777
|
-
border-color: var(--ina-negative-500);
|
|
7778
|
-
box-shadow:
|
|
7779
|
-
0 0 0
|
|
7930
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
7931
|
+
box-shadow:
|
|
7932
|
+
0 0 0 2px #fff,
|
|
7933
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
|
|
7780
7934
|
}
|
|
7781
7935
|
/* Disabled state */
|
|
7782
7936
|
.ina-one-time-password__input:disabled {
|
|
7783
|
-
background-color: var(--ina-background-tertiary);
|
|
7784
|
-
border-color: var(--ina-stroke-primary) !important;
|
|
7937
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
7938
|
+
border-color: var(--ina-stroke-primary, #e5e5e5) !important;
|
|
7785
7939
|
cursor: not-allowed;
|
|
7786
7940
|
opacity: 0.6;
|
|
7787
|
-
color: var(--ina-content-tertiary);
|
|
7941
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
7788
7942
|
}
|
|
7789
7943
|
/* Readonly state */
|
|
7790
7944
|
.ina-one-time-password__input[readonly] {
|
|
7791
|
-
background-color: var(--ina-background-tertiary);
|
|
7945
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
7792
7946
|
cursor: default;
|
|
7793
7947
|
}
|
|
7794
7948
|
/* Helper text */
|
|
7795
7949
|
.ina-one-time-password__helper-text {
|
|
7796
7950
|
font-size: 14px;
|
|
7797
7951
|
font-weight: 400; /* normal */
|
|
7798
|
-
color: var(--ina-content-primary);
|
|
7952
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
7799
7953
|
}
|
|
7800
7954
|
/* Helper text error state */
|
|
7801
7955
|
.ina-one-time-password__helper-text--error {
|
|
7802
|
-
color: var(--ina-negative-500);
|
|
7956
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
7803
7957
|
}
|
|
7804
7958
|
/* Responsive adjustments */
|
|
7805
7959
|
@media (max-width: 640px) {
|
|
@@ -8215,27 +8369,27 @@ dialog.bottom-sheet-dropdown {
|
|
|
8215
8369
|
}
|
|
8216
8370
|
/* Label styling */
|
|
8217
8371
|
.ina-password-input__label {
|
|
8218
|
-
font-size: var(--ina-font-sm);
|
|
8219
|
-
font-weight: var(--ina-font-medium);
|
|
8220
|
-
color: var(--ina-content-primary);
|
|
8221
|
-
margin-bottom: var(--ina-spacing-2);
|
|
8372
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8373
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8374
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8375
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
8222
8376
|
}
|
|
8223
8377
|
.ina-password-input__label--required .ina-password-input__asterisk {
|
|
8224
|
-
color: var(--ina-negative-500);
|
|
8225
|
-
margin-left: var(--ina-spacing-1);
|
|
8378
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
8379
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
8226
8380
|
}
|
|
8227
8381
|
/* Input wrapper */
|
|
8228
8382
|
.ina-password-input__wrapper {
|
|
8229
8383
|
display: flex;
|
|
8230
8384
|
align-items: center;
|
|
8231
|
-
gap: var(--ina-spacing-2);
|
|
8232
|
-
border-radius: var(--ina-radius-lg);
|
|
8233
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8234
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
8235
|
-
background-color: var(--ina-background-primary);
|
|
8385
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
8386
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
8387
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
8388
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
8389
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
8236
8390
|
transition:
|
|
8237
|
-
border-color var(--ina-transition-base),
|
|
8238
|
-
box-shadow var(--ina-transition-base);
|
|
8391
|
+
border-color var(--ina-transition-base, 200ms ease-in-out),
|
|
8392
|
+
box-shadow var(--ina-transition-base, 200ms ease-in-out);
|
|
8239
8393
|
}
|
|
8240
8394
|
/* Size variants */
|
|
8241
8395
|
.ina-password-input__wrapper--size-sm {
|
|
@@ -8282,42 +8436,42 @@ dialog.bottom-sheet-dropdown {
|
|
|
8282
8436
|
border-color: var(--ina-stroke-primary);
|
|
8283
8437
|
}
|
|
8284
8438
|
.ina-password-input__wrapper.ina-password-input__wrapper--neutral:focus-within {
|
|
8285
|
-
border-color: var(--ina-content-primary);
|
|
8439
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8286
8440
|
box-shadow:
|
|
8287
|
-
0 0 0
|
|
8288
|
-
0 0 0
|
|
8441
|
+
0 0 0 2px #fff,
|
|
8442
|
+
0 0 0 3px var(--ina-primary-primary, #141414) !important;
|
|
8289
8443
|
}
|
|
8290
8444
|
.ina-password-input__wrapper.ina-password-input__wrapper--error {
|
|
8291
8445
|
border-color: var(--ina-negative-500);
|
|
8292
8446
|
}
|
|
8293
8447
|
.ina-password-input__wrapper.ina-password-input__wrapper--error:focus-within {
|
|
8294
|
-
border-color: var(--ina-negative-600);
|
|
8448
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
8295
8449
|
box-shadow:
|
|
8296
|
-
0 0 0
|
|
8297
|
-
0 0 0
|
|
8450
|
+
0 0 0 2px #fff,
|
|
8451
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
|
|
8298
8452
|
}
|
|
8299
8453
|
.ina-password-input__wrapper.ina-password-input__wrapper--warning {
|
|
8300
8454
|
border-color: var(--ina-warning-500);
|
|
8301
8455
|
}
|
|
8302
8456
|
.ina-password-input__wrapper.ina-password-input__wrapper--warning:focus-within {
|
|
8303
|
-
border-color: var(--ina-warning-600);
|
|
8457
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
8304
8458
|
box-shadow:
|
|
8305
|
-
0 0 0
|
|
8306
|
-
0 0 0
|
|
8459
|
+
0 0 0 2px #fff,
|
|
8460
|
+
0 0 0 3px var(--ina-warning-500, #eebb04) !important;
|
|
8307
8461
|
}
|
|
8308
8462
|
.ina-password-input__wrapper.ina-password-input__wrapper--success {
|
|
8309
8463
|
border-color: var(--ina-positive-600);
|
|
8310
8464
|
}
|
|
8311
8465
|
.ina-password-input__wrapper.ina-password-input__wrapper--success:focus-within {
|
|
8312
|
-
border-color: var(--ina-positive-600);
|
|
8466
|
+
border-color: var(--ina-positive-600, #288034);
|
|
8313
8467
|
box-shadow:
|
|
8314
|
-
0 0 0
|
|
8315
|
-
0 0 0
|
|
8468
|
+
0 0 0 2px #fff,
|
|
8469
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
|
|
8316
8470
|
}
|
|
8317
8471
|
/* Prefix icon */
|
|
8318
8472
|
.ina-password-input__prefix-icon {
|
|
8319
8473
|
flex-shrink: 0;
|
|
8320
|
-
color: var(--ina-content-secondary);
|
|
8474
|
+
color: var(--ina-content-secondary, #525252);
|
|
8321
8475
|
}
|
|
8322
8476
|
/* Input field */
|
|
8323
8477
|
.ina-password-input__input {
|
|
@@ -8325,14 +8479,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
8325
8479
|
border: none;
|
|
8326
8480
|
outline: none;
|
|
8327
8481
|
background: transparent;
|
|
8328
|
-
font-size: var(--ina-font-sm);
|
|
8329
|
-
color: var(--ina-content-primary);
|
|
8482
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8483
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8330
8484
|
}
|
|
8331
8485
|
.ina-password-input__input::-moz-placeholder {
|
|
8332
|
-
color: var(--ina-content-tertiary);
|
|
8486
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8333
8487
|
}
|
|
8334
8488
|
.ina-password-input__input::placeholder {
|
|
8335
|
-
color: var(--ina-content-tertiary);
|
|
8489
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8336
8490
|
}
|
|
8337
8491
|
.ina-password-input__input:disabled {
|
|
8338
8492
|
cursor: not-allowed;
|
|
@@ -8352,12 +8506,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
8352
8506
|
border: none;
|
|
8353
8507
|
background: transparent;
|
|
8354
8508
|
cursor: pointer;
|
|
8355
|
-
border-radius: var(--ina-radius-base);
|
|
8356
|
-
transition: color var(--ina-transition-base);
|
|
8509
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
8510
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
8357
8511
|
display: flex;
|
|
8358
8512
|
align-items: center;
|
|
8359
8513
|
justify-content: center;
|
|
8360
|
-
color: var(--ina-content-dark-secondary);
|
|
8514
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
8361
8515
|
}
|
|
8362
8516
|
.ina-password-input__action-button:hover:not(:disabled) {
|
|
8363
8517
|
color: var(--ina-content-secondary);
|
|
@@ -8403,10 +8557,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
8403
8557
|
}
|
|
8404
8558
|
/* Character count */
|
|
8405
8559
|
.ina-password-input__character-count {
|
|
8406
|
-
color: var(--ina-content-secondary);
|
|
8407
|
-
font-size: var(--ina-font-xs);
|
|
8408
|
-
font-weight: var(--ina-font-medium);
|
|
8409
|
-
margin-left: var(--ina-spacing-2);
|
|
8560
|
+
color: var(--ina-content-secondary, #525252);
|
|
8561
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
8562
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8563
|
+
margin-left: var(--ina-spacing-2, 0.5rem);
|
|
8410
8564
|
}
|
|
8411
8565
|
.ina-password-input__character-count--warning {
|
|
8412
8566
|
color: var(--ina-warning-500);
|
|
@@ -8471,11 +8625,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
8471
8625
|
}
|
|
8472
8626
|
.ina-password-input__wrapper--disabled
|
|
8473
8627
|
> .ina-password-input__input::-moz-placeholder {
|
|
8474
|
-
color: var(--ina-content-tertiary) !important;
|
|
8628
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8475
8629
|
}
|
|
8476
8630
|
.ina-password-input__wrapper--disabled
|
|
8477
8631
|
> .ina-password-input__input::placeholder {
|
|
8478
|
-
color: var(--ina-content-tertiary) !important;
|
|
8632
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8479
8633
|
}
|
|
8480
8634
|
.ina-password-input__wrapper--disabled .ina-password-input__input {
|
|
8481
8635
|
cursor: not-allowed;
|
|
@@ -8496,15 +8650,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
8496
8650
|
/* Focus styles - Sesuai design Figma */
|
|
8497
8651
|
.ina-password-input__wrapper:focus-within {
|
|
8498
8652
|
box-shadow:
|
|
8499
|
-
0 0 0
|
|
8500
|
-
0 0 0
|
|
8653
|
+
0 0 0 2px #fff,
|
|
8654
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
8501
8655
|
outline: none;
|
|
8502
|
-
background-color: var(--ina-background-primary);
|
|
8503
|
-
border-color: var(--ina-content-primary);
|
|
8656
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
8657
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8504
8658
|
}
|
|
8505
8659
|
/* Hover styles - Sesuai design Figma */
|
|
8506
8660
|
.ina-password-input__wrapper:hover {
|
|
8507
|
-
background-color: var(--ina-neutral-50);
|
|
8661
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
8508
8662
|
}
|
|
8509
8663
|
/* Strength indicator */
|
|
8510
8664
|
.ina-password-input__strength-indicator {
|
|
@@ -8659,25 +8813,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
8659
8813
|
}
|
|
8660
8814
|
/* Label */
|
|
8661
8815
|
.ina-phone-input__label {
|
|
8662
|
-
font-size: var(--ina-font-sm);
|
|
8663
|
-
font-weight: var(--ina-font-medium);
|
|
8664
|
-
color: var(--ina-content-primary);
|
|
8665
|
-
margin-bottom: var(--ina-spacing-2);
|
|
8816
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8817
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8818
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8819
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
8666
8820
|
}
|
|
8667
8821
|
.ina-phone-input__label--required .ina-phone-input__asterisk {
|
|
8668
|
-
color: var(--ina-error-500);
|
|
8669
|
-
margin-left: var(--ina-spacing-1);
|
|
8822
|
+
color: var(--ina-error-500, #f02d2d);
|
|
8823
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
8670
8824
|
}
|
|
8671
8825
|
/* Input wrapper */
|
|
8672
8826
|
.ina-phone-input__wrapper {
|
|
8673
8827
|
display: flex;
|
|
8674
8828
|
align-items: center;
|
|
8675
|
-
gap: var(--ina-spacing-2);
|
|
8676
|
-
border-radius: var(--ina-radius-lg);
|
|
8677
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8678
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
8679
|
-
background-color: var(--ina-background-primary);
|
|
8680
|
-
transition: all var(--ina-transition-base);
|
|
8829
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
8830
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
8831
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
8832
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
8833
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
8834
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
8681
8835
|
position: relative;
|
|
8682
8836
|
}
|
|
8683
8837
|
/* Size variants - match TextField */
|
|
@@ -8698,7 +8852,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
8698
8852
|
object-fit: contain;
|
|
8699
8853
|
box-shadow:
|
|
8700
8854
|
0 1px 2px 0 rgba(31, 31, 31, 0.1),
|
|
8701
|
-
0 0 0 2px var(--ina-neutral-25) !important;
|
|
8855
|
+
0 0 0 2px var(--ina-neutral-25, #ffffff) !important;
|
|
8702
8856
|
}
|
|
8703
8857
|
/* Responsive adjustments */
|
|
8704
8858
|
@media (max-width: 767px) {
|
|
@@ -8781,17 +8935,17 @@ dialog.bottom-sheet-dropdown {
|
|
|
8781
8935
|
border: none;
|
|
8782
8936
|
cursor: pointer;
|
|
8783
8937
|
padding: 0;
|
|
8784
|
-
color: var(--ina-content-primary);
|
|
8785
|
-
font-size: var(--ina-font-sm);
|
|
8938
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8939
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8786
8940
|
height: 100%;
|
|
8787
8941
|
}
|
|
8788
8942
|
.ina-phone-input__country-code {
|
|
8789
|
-
font-weight: var(--ina-font-medium);
|
|
8943
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8790
8944
|
white-space: nowrap;
|
|
8791
8945
|
}
|
|
8792
8946
|
.ina-phone-input__country-chevron {
|
|
8793
|
-
color: var(--ina-content-secondary);
|
|
8794
|
-
transition: transform var(--ina-transition-base);
|
|
8947
|
+
color: var(--ina-content-secondary, #525252);
|
|
8948
|
+
transition: transform var(--ina-transition-base, 200ms ease-in-out);
|
|
8795
8949
|
}
|
|
8796
8950
|
.ina-phone-input__country-chevron--open {
|
|
8797
8951
|
transform: rotate(180deg);
|
|
@@ -8800,8 +8954,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8800
8954
|
.ina-phone-input__divider {
|
|
8801
8955
|
width: 1px;
|
|
8802
8956
|
height: 20px;
|
|
8803
|
-
background-color: var(--ina-stroke-primary);
|
|
8804
|
-
margin-right: var(--ina-spacing-2);
|
|
8957
|
+
background-color: var(--ina-stroke-primary, #e5e5e5);
|
|
8958
|
+
margin-right: var(--ina-spacing-2, 0.5rem);
|
|
8805
8959
|
flex-shrink: 0;
|
|
8806
8960
|
}
|
|
8807
8961
|
/* Input field */
|
|
@@ -8810,22 +8964,22 @@ dialog.bottom-sheet-dropdown {
|
|
|
8810
8964
|
background: transparent;
|
|
8811
8965
|
border: none;
|
|
8812
8966
|
outline: none;
|
|
8813
|
-
font-size: var(--ina-font-sm);
|
|
8967
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8814
8968
|
font-family: inherit;
|
|
8815
|
-
color: var(--ina-content-primary);
|
|
8969
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8816
8970
|
min-width: 0;
|
|
8817
8971
|
}
|
|
8818
8972
|
.ina-phone-input__input::-moz-placeholder {
|
|
8819
|
-
color: var(--ina-content-tertiary);
|
|
8973
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8820
8974
|
}
|
|
8821
8975
|
.ina-phone-input__input::placeholder {
|
|
8822
|
-
color: var(--ina-content-tertiary);
|
|
8976
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8823
8977
|
}
|
|
8824
8978
|
/* Helper text / Status message */
|
|
8825
8979
|
.ina-phone-input__helper-text {
|
|
8826
|
-
font-size: var(--ina-font-xs);
|
|
8827
|
-
padding-top: var(--ina-spacing-1);
|
|
8828
|
-
color: var(--ina-content-secondary);
|
|
8980
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
8981
|
+
padding-top: var(--ina-spacing-1, 0.25rem);
|
|
8982
|
+
color: var(--ina-content-secondary, #525252);
|
|
8829
8983
|
}
|
|
8830
8984
|
.ina-phone-input__helper-text--error {
|
|
8831
8985
|
color: var(--ina-negative-500);
|
|
@@ -8847,8 +9001,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8847
9001
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-error:focus-within {
|
|
8848
9002
|
border-color: var(--ina-negative-500);
|
|
8849
9003
|
box-shadow:
|
|
8850
|
-
0 0 0
|
|
8851
|
-
0 0 0
|
|
9004
|
+
0 0 0 2px #fff,
|
|
9005
|
+
0 0 0 3px var(--ina-negative-50) !important;
|
|
8852
9006
|
}
|
|
8853
9007
|
.ina-phone-input__wrapper--status-warning {
|
|
8854
9008
|
border-color: var(--ina-warning-500);
|
|
@@ -8856,8 +9010,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8856
9010
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-warning:focus-within {
|
|
8857
9011
|
border-color: var(--ina-warning-500);
|
|
8858
9012
|
box-shadow:
|
|
8859
|
-
0 0 0
|
|
8860
|
-
0 0 0
|
|
9013
|
+
0 0 0 2px #fff,
|
|
9014
|
+
0 0 0 3px var(--ina-warning-50) !important;
|
|
8861
9015
|
}
|
|
8862
9016
|
.ina-phone-input__wrapper--status-success {
|
|
8863
9017
|
border-color: var(--ina-positive-600);
|
|
@@ -8865,21 +9019,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
8865
9019
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-success:focus-within {
|
|
8866
9020
|
border-color: var(--ina-positive-600);
|
|
8867
9021
|
box-shadow:
|
|
8868
|
-
0 0 0
|
|
8869
|
-
0 0 0
|
|
9022
|
+
0 0 0 2px #fff,
|
|
9023
|
+
0 0 0 3px var(--ina-positive-50) !important;
|
|
8870
9024
|
}
|
|
8871
9025
|
/* Focus styles */
|
|
8872
9026
|
.ina-phone-input__wrapper:focus-within {
|
|
8873
9027
|
box-shadow:
|
|
8874
|
-
0 0 0
|
|
8875
|
-
0 0 0
|
|
9028
|
+
0 0 0 2px #fff,
|
|
9029
|
+
0 0 0 3px var(--ina-primary-primary);
|
|
8876
9030
|
outline: none;
|
|
8877
9031
|
background-color: var(--ina-background-primary);
|
|
8878
9032
|
border-color: var(--ina-content-primary);
|
|
8879
9033
|
}
|
|
8880
9034
|
/* Hover states */
|
|
8881
9035
|
.ina-phone-input__wrapper:hover:not(.ina-phone-input__wrapper--disabled) {
|
|
8882
|
-
background-color: var(--ina-neutral-50);
|
|
9036
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
8883
9037
|
}
|
|
8884
9038
|
/* Disabled state */
|
|
8885
9039
|
.ina-phone-input__wrapper--disabled {
|
|
@@ -8891,14 +9045,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
8891
9045
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input {
|
|
8892
9046
|
cursor: not-allowed;
|
|
8893
9047
|
color: var(
|
|
8894
|
-
--ina-content-tertiary
|
|
9048
|
+
--ina-content-tertiary,
|
|
9049
|
+
#a3a3a3
|
|
8895
9050
|
); /* Use content-tertiary for text color to act as disabled */
|
|
8896
9051
|
}
|
|
8897
9052
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input::-moz-placeholder {
|
|
8898
|
-
color: var(--ina-content-tertiary) !important;
|
|
9053
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8899
9054
|
}
|
|
8900
9055
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input::placeholder {
|
|
8901
|
-
color: var(--ina-content-tertiary) !important;
|
|
9056
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8902
9057
|
}
|
|
8903
9058
|
.ina-phone-input__wrapper--disabled .ina-phone-input__country-button {
|
|
8904
9059
|
cursor: not-allowed;
|
|
@@ -8910,10 +9065,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
8910
9065
|
top: 100%;
|
|
8911
9066
|
left: calc(-1 * var(--ina-spacing-3, 12px));
|
|
8912
9067
|
margin-top: var(--ina-spacing-3, 12px) !important;
|
|
8913
|
-
background: var(--ina-background-primary);
|
|
8914
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8915
|
-
border-radius: var(--ina-radius-lg);
|
|
8916
|
-
box-shadow: var(
|
|
9068
|
+
background: var(--ina-background-primary, #ffffff);
|
|
9069
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9070
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
9071
|
+
box-shadow: var(
|
|
9072
|
+
--ina-shadow-lg,
|
|
9073
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
9074
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.1)
|
|
9075
|
+
);
|
|
8917
9076
|
z-index: 100;
|
|
8918
9077
|
width: 324px; /* Or min-content depending on design */
|
|
8919
9078
|
max-height: 348px;
|
|
@@ -8923,21 +9082,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
8923
9082
|
padding: var(--ina-spacing-2);
|
|
8924
9083
|
}
|
|
8925
9084
|
.ina-phone-input__country-search {
|
|
8926
|
-
padding: var(--ina-spacing-1) 0 var(--ina-spacing-2) 0;
|
|
9085
|
+
padding: var(--ina-spacing-1, 0.25rem) 0 var(--ina-spacing-2, 0.5rem) 0;
|
|
8927
9086
|
}
|
|
8928
9087
|
.ina-phone-input__country-search-input {
|
|
8929
9088
|
width: 100%;
|
|
8930
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
8931
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8932
|
-
border-radius: var(--ina-radius-md);
|
|
8933
|
-
font-size: var(--ina-font-xs);
|
|
9089
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
9090
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9091
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
9092
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
8934
9093
|
}
|
|
8935
9094
|
.ina-phone-input__country-search-input:focus {
|
|
8936
9095
|
outline: none;
|
|
8937
|
-
border-color: var(--ina-content-primary);
|
|
9096
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8938
9097
|
box-shadow:
|
|
8939
|
-
0 0 0
|
|
8940
|
-
0 0 0
|
|
9098
|
+
0 0 0 2px #fff,
|
|
9099
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
8941
9100
|
}
|
|
8942
9101
|
.ina-phone-input__country-list {
|
|
8943
9102
|
overflow-y: auto;
|
|
@@ -8947,13 +9106,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
8947
9106
|
display: flex;
|
|
8948
9107
|
align-items: center;
|
|
8949
9108
|
width: 100%;
|
|
8950
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
9109
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
8951
9110
|
border: none;
|
|
8952
9111
|
background: none;
|
|
8953
9112
|
cursor: pointer;
|
|
8954
9113
|
text-align: left;
|
|
8955
|
-
transition: background-color var(--ina-transition-base);
|
|
8956
|
-
gap: var(--ina-spacing-2);
|
|
9114
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9115
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
8957
9116
|
}
|
|
8958
9117
|
.ina-phone-input__country-option:hover {
|
|
8959
9118
|
background-color: var(--ina-background-secondary, #f5f5f5);
|
|
@@ -8965,16 +9124,16 @@ dialog.bottom-sheet-dropdown {
|
|
|
8965
9124
|
}
|
|
8966
9125
|
.ina-phone-input__country-name {
|
|
8967
9126
|
flex: 1;
|
|
8968
|
-
font-size: var(--ina-font-sm);
|
|
9127
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8969
9128
|
font-weight: 400;
|
|
8970
|
-
color: var(--ina-content-primary);
|
|
9129
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8971
9130
|
white-space: nowrap;
|
|
8972
9131
|
overflow: hidden;
|
|
8973
9132
|
text-overflow: ellipsis;
|
|
8974
9133
|
}
|
|
8975
9134
|
.ina-phone-input__country-dial-code {
|
|
8976
|
-
font-size: var(--ina-font-sm);
|
|
8977
|
-
color: var(--ina-content-secondary);
|
|
9135
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9136
|
+
color: var(--ina-content-secondary, #525252);
|
|
8978
9137
|
}
|
|
8979
9138
|
/**
|
|
8980
9139
|
* ProgressBar Component Styles
|
|
@@ -9379,33 +9538,33 @@ dialog.bottom-sheet-dropdown {
|
|
|
9379
9538
|
/* Base container styling */
|
|
9380
9539
|
display: flex;
|
|
9381
9540
|
flex-direction: column;
|
|
9382
|
-
gap: var(--ina-spacing-2);
|
|
9541
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9383
9542
|
}
|
|
9384
9543
|
/* Label styling */
|
|
9385
9544
|
.ina-radio-input__main-label {
|
|
9386
9545
|
display: block;
|
|
9387
|
-
font-size: var(--ina-font-sm);
|
|
9388
|
-
color: var(--ina-content-color-181717);
|
|
9389
|
-
font-weight: var(--ina-font-medium);
|
|
9546
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9547
|
+
color: var(--ina-content-color-181717, #1f1f1f);
|
|
9548
|
+
font-weight: var(--ina-font-medium, 500);
|
|
9390
9549
|
}
|
|
9391
9550
|
/* Radio group container */
|
|
9392
9551
|
.ina-radio-input__group {
|
|
9393
9552
|
display: flex;
|
|
9394
9553
|
flex-direction: column;
|
|
9395
|
-
gap: var(--ina-spacing-2);
|
|
9554
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9396
9555
|
}
|
|
9397
9556
|
/* Individual radio option */
|
|
9398
9557
|
.ina-radio-input__option {
|
|
9399
9558
|
display: flex;
|
|
9400
9559
|
align-items: center;
|
|
9401
|
-
gap: var(--ina-spacing-2);
|
|
9560
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9402
9561
|
cursor: pointer;
|
|
9403
|
-
transition: background-color var(--ina-transition-base);
|
|
9404
|
-
padding: var(--ina-spacing-2);
|
|
9405
|
-
border-radius: var(--ina-radius-md);
|
|
9562
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9563
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
9564
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
9406
9565
|
}
|
|
9407
9566
|
.ina-radio-input__option:hover {
|
|
9408
|
-
background-color: var(--ina-neutral-50);
|
|
9567
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
9409
9568
|
}
|
|
9410
9569
|
.ina-radio-input__option--disabled {
|
|
9411
9570
|
cursor: not-allowed;
|
|
@@ -9422,10 +9581,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
9422
9581
|
height: 20px;
|
|
9423
9582
|
border: 1px solid var(--ina-stroke-tertiary, #141414);
|
|
9424
9583
|
border-radius: 50%;
|
|
9425
|
-
background-color: var(--ina-background-primary,
|
|
9584
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9426
9585
|
cursor: pointer;
|
|
9427
9586
|
position: relative;
|
|
9428
|
-
transition: all var(--ina-transition-base);
|
|
9587
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
9429
9588
|
flex-shrink: 0;
|
|
9430
9589
|
}
|
|
9431
9590
|
/* Hover state - Add drop shadow */
|
|
@@ -9438,8 +9597,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9438
9597
|
.ina-radio-input__field:focus:not(:disabled) {
|
|
9439
9598
|
outline: none;
|
|
9440
9599
|
box-shadow:
|
|
9441
|
-
0 0 0
|
|
9442
|
-
0 0 0
|
|
9600
|
+
0 0 0 2px #fff,
|
|
9601
|
+
0 0 0 3px var(--ina-primary-primary, #141414) !important;
|
|
9443
9602
|
}
|
|
9444
9603
|
/* Active state - Add drop shadow */
|
|
9445
9604
|
.ina-radio-input__field:active:not(:disabled) {
|
|
@@ -9448,7 +9607,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9448
9607
|
/* Selected state */
|
|
9449
9608
|
.ina-radio-input__field:checked {
|
|
9450
9609
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9451
|
-
background-color: var(--ina-background-primary,
|
|
9610
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9452
9611
|
}
|
|
9453
9612
|
.ina-radio-input__field:checked::after {
|
|
9454
9613
|
content: '';
|
|
@@ -9470,7 +9629,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9470
9629
|
/* Disabled states */
|
|
9471
9630
|
.ina-radio-input__field:disabled {
|
|
9472
9631
|
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9473
|
-
background-color: var(--ina-background-secondary,
|
|
9632
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
9474
9633
|
cursor: not-allowed;
|
|
9475
9634
|
opacity: 1;
|
|
9476
9635
|
filter: none;
|
|
@@ -9497,8 +9656,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9497
9656
|
}
|
|
9498
9657
|
/* Radio option label */
|
|
9499
9658
|
.ina-radio-input__option-label {
|
|
9500
|
-
font-size: var(--ina-font-sm);
|
|
9501
|
-
color: var(--ina-content-primary);
|
|
9659
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9660
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9502
9661
|
cursor: pointer;
|
|
9503
9662
|
-webkit-user-select: none;
|
|
9504
9663
|
-moz-user-select: none;
|
|
@@ -9513,7 +9672,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9513
9672
|
/* Size variants */
|
|
9514
9673
|
.ina-radio-input--size-sm .ina-radio-input__main-label,
|
|
9515
9674
|
.ina-radio-input--size-sm .ina-radio-input__option-label {
|
|
9516
|
-
font-size: var(--ina-font-xs);
|
|
9675
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9517
9676
|
}
|
|
9518
9677
|
.ina-radio-input--size-sm .ina-radio-input__field {
|
|
9519
9678
|
width: 16px;
|
|
@@ -9525,7 +9684,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9525
9684
|
}
|
|
9526
9685
|
.ina-radio-input--size-lg .ina-radio-input__main-label,
|
|
9527
9686
|
.ina-radio-input--size-lg .ina-radio-input__option-label {
|
|
9528
|
-
font-size: var(--ina-font-base);
|
|
9687
|
+
font-size: var(--ina-font-base, 1rem);
|
|
9529
9688
|
}
|
|
9530
9689
|
.ina-radio-input--size-lg .ina-radio-input__field {
|
|
9531
9690
|
width: 24px;
|
|
@@ -9539,14 +9698,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
9539
9698
|
.ina-radio-input--orientation-horizontal .ina-radio-input__group {
|
|
9540
9699
|
flex-direction: row;
|
|
9541
9700
|
flex-wrap: wrap;
|
|
9542
|
-
gap: var(--ina-spacing-4);
|
|
9701
|
+
gap: var(--ina-spacing-4, 1rem);
|
|
9543
9702
|
align-items: center;
|
|
9544
9703
|
}
|
|
9545
9704
|
/* Status variants */
|
|
9546
9705
|
.ina-radio-input__main-label--required::after {
|
|
9547
9706
|
content: '*';
|
|
9548
|
-
color: var(--ina-danger-5);
|
|
9549
|
-
margin-left: var(--ina-spacing-1);
|
|
9707
|
+
color: var(--ina-danger-5, #f02d2d);
|
|
9708
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
9550
9709
|
}
|
|
9551
9710
|
/* Focus indicators */
|
|
9552
9711
|
/* Focus indicators */
|
|
@@ -9556,13 +9715,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
9556
9715
|
}
|
|
9557
9716
|
/* Error state */
|
|
9558
9717
|
.ina-radio-input--error .ina-radio-input__main-label {
|
|
9559
|
-
color: var(--ina-negative-500);
|
|
9718
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9560
9719
|
}
|
|
9561
9720
|
.ina-radio-input--error .ina-radio-input__field {
|
|
9562
|
-
border-color: var(--ina-negative-500);
|
|
9721
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
9563
9722
|
}
|
|
9564
9723
|
.ina-radio-input--error .ina-radio-input__field:focus-visible {
|
|
9565
|
-
outline-color: var(--ina-negative-500);
|
|
9724
|
+
outline-color: var(--ina-negative-500, #f02d2d);
|
|
9566
9725
|
}
|
|
9567
9726
|
/* Loading state */
|
|
9568
9727
|
.ina-radio-input--loading .ina-radio-input__option {
|
|
@@ -9573,12 +9732,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
9573
9732
|
}
|
|
9574
9733
|
/* Help text */
|
|
9575
9734
|
.ina-radio-input__help-text {
|
|
9576
|
-
font-size: var(--ina-font-xs);
|
|
9577
|
-
color: var(--ina-content-secondary);
|
|
9578
|
-
margin-top: var(--ina-spacing-1);
|
|
9735
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9736
|
+
color: var(--ina-content-secondary, #525252);
|
|
9737
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
9579
9738
|
}
|
|
9580
9739
|
.ina-radio-input__help-text--error {
|
|
9581
|
-
color: var(--ina-negative-500);
|
|
9740
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9582
9741
|
}
|
|
9583
9742
|
/* Responsive adjustments */
|
|
9584
9743
|
@media (max-width: 640px) {
|
|
@@ -9659,27 +9818,27 @@ dialog.bottom-sheet-dropdown {
|
|
|
9659
9818
|
/* Base container styling */
|
|
9660
9819
|
position: relative;
|
|
9661
9820
|
display: inline-block;
|
|
9662
|
-
font-size: var(--ina-font-xs);
|
|
9821
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9663
9822
|
}
|
|
9664
9823
|
.ina-select-dropdown:focus-visible {
|
|
9665
9824
|
outline: none;
|
|
9666
9825
|
}
|
|
9667
9826
|
@media (min-width: 768px) {
|
|
9668
9827
|
.ina-select-dropdown {
|
|
9669
|
-
font-size: var(--ina-font-sm);
|
|
9828
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9670
9829
|
}
|
|
9671
9830
|
}
|
|
9672
9831
|
/* Label Styles */
|
|
9673
9832
|
.ina-select-dropdown__label {
|
|
9674
|
-
font-size: var(--ina-font-sm);
|
|
9675
|
-
font-weight: var(--ina-font-medium);
|
|
9676
|
-
color: var(--ina-content-primary);
|
|
9677
|
-
margin-bottom: var(--ina-spacing-2);
|
|
9833
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9834
|
+
font-weight: var(--ina-font-medium, 500);
|
|
9835
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9836
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
9678
9837
|
display: block;
|
|
9679
9838
|
}
|
|
9680
9839
|
.ina-select-dropdown__required {
|
|
9681
|
-
color: var(--ina-negative-500);
|
|
9682
|
-
margin-left: var(--ina-spacing-1);
|
|
9840
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9841
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
9683
9842
|
}
|
|
9684
9843
|
/* Trigger button */
|
|
9685
9844
|
.ina-select-dropdown__trigger {
|
|
@@ -9687,15 +9846,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
9687
9846
|
display: flex;
|
|
9688
9847
|
align-items: center;
|
|
9689
9848
|
justify-content: space-between;
|
|
9690
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
9691
|
-
border-radius: var(--ina-radius-lg);
|
|
9692
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
9693
|
-
background-color: var(--ina-background-primary);
|
|
9694
|
-
color: var(--ina-content-primary);
|
|
9849
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9850
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
9851
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-4, 1rem);
|
|
9852
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9853
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9695
9854
|
cursor: pointer;
|
|
9696
9855
|
font-size: inherit;
|
|
9697
9856
|
outline: none;
|
|
9698
|
-
transition: all var(--ina-transition-base);
|
|
9857
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
9699
9858
|
position: relative;
|
|
9700
9859
|
}
|
|
9701
9860
|
/* NEW: Trigger Input for Search */
|
|
@@ -9712,10 +9871,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
9712
9871
|
cursor: text;
|
|
9713
9872
|
}
|
|
9714
9873
|
.ina-select-dropdown__trigger-input::-moz-placeholder {
|
|
9715
|
-
color: var(--ina-content-tertiary);
|
|
9874
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9716
9875
|
}
|
|
9717
9876
|
.ina-select-dropdown__trigger-input::placeholder {
|
|
9718
|
-
color: var(--ina-content-tertiary);
|
|
9877
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9719
9878
|
}
|
|
9720
9879
|
.ina-select-dropdown__trigger-input:disabled {
|
|
9721
9880
|
cursor: not-allowed;
|
|
@@ -9748,52 +9907,52 @@ dialog.bottom-sheet-dropdown {
|
|
|
9748
9907
|
}
|
|
9749
9908
|
}
|
|
9750
9909
|
.ina-select-dropdown__trigger:hover {
|
|
9751
|
-
background-color: var(--ina-background-secondary);
|
|
9910
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
9752
9911
|
}
|
|
9753
9912
|
/* Focus state for trigger when it acts as container */
|
|
9754
9913
|
.ina-select-dropdown__trigger:focus-within {
|
|
9755
9914
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9756
|
-
background: var(--ina-background-primary, #
|
|
9915
|
+
background: var(--ina-background-primary, #ffffff);
|
|
9757
9916
|
box-shadow:
|
|
9758
|
-
0 0 0
|
|
9759
|
-
0 0 0
|
|
9917
|
+
0 0 0 2px #fff,
|
|
9918
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
9760
9919
|
}
|
|
9761
9920
|
/* Status variants */
|
|
9762
9921
|
.ina-select-dropdown__trigger--status-neutral {
|
|
9763
|
-
border-color: var(--ina-stroke-primary);
|
|
9922
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9764
9923
|
}
|
|
9765
9924
|
.ina-select-dropdown__trigger--status-neutral:focus-within {
|
|
9766
|
-
border-color: var(--ina-stroke-tertiary);
|
|
9925
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9767
9926
|
box-shadow:
|
|
9768
|
-
0 0 0
|
|
9769
|
-
0 0 0
|
|
9927
|
+
0 0 0 2px #fff,
|
|
9928
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
9770
9929
|
}
|
|
9771
9930
|
.ina-select-dropdown__trigger--status-error {
|
|
9772
|
-
border-color: var(--ina-negative-500);
|
|
9931
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
9773
9932
|
}
|
|
9774
9933
|
.ina-select-dropdown__trigger--status-error:focus-within {
|
|
9775
|
-
border-color: var(--ina-negative-600);
|
|
9934
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
9776
9935
|
box-shadow:
|
|
9777
|
-
0 0 0
|
|
9778
|
-
0 0 0
|
|
9936
|
+
0 0 0 2px #fff,
|
|
9937
|
+
0 0 0 3px var(--ina-negative-50, #fffafa);
|
|
9779
9938
|
}
|
|
9780
9939
|
.ina-select-dropdown__trigger--status-warning {
|
|
9781
|
-
border-color: var(--ina-warning-500);
|
|
9940
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
9782
9941
|
}
|
|
9783
9942
|
.ina-select-dropdown__trigger--status-warning:focus-within {
|
|
9784
|
-
border-color: var(--ina-warning-600);
|
|
9943
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
9785
9944
|
box-shadow:
|
|
9786
|
-
0 0 0
|
|
9787
|
-
0 0 0
|
|
9945
|
+
0 0 0 2px #fff,
|
|
9946
|
+
0 0 0 3px var(--ina-warning-50, #fffefa);
|
|
9788
9947
|
}
|
|
9789
9948
|
.ina-select-dropdown__trigger--status-success {
|
|
9790
|
-
border-color: var(--ina-positive-500);
|
|
9949
|
+
border-color: var(--ina-positive-500, #3cc14e);
|
|
9791
9950
|
}
|
|
9792
9951
|
.ina-select-dropdown__trigger--status-success:focus-within {
|
|
9793
|
-
border-color: var(--ina-positive-600);
|
|
9952
|
+
border-color: var(--ina-positive-600, #288034);
|
|
9794
9953
|
box-shadow:
|
|
9795
|
-
0 0 0
|
|
9796
|
-
0 0 0
|
|
9954
|
+
0 0 0 2px #fff,
|
|
9955
|
+
0 0 0 3px var(--ina-positive-50, #fafffa);
|
|
9797
9956
|
}
|
|
9798
9957
|
.ina-select-dropdown__trigger--disabled {
|
|
9799
9958
|
background-color: transparent;
|
|
@@ -9819,23 +9978,23 @@ dialog.bottom-sheet-dropdown {
|
|
|
9819
9978
|
white-space: nowrap;
|
|
9820
9979
|
}
|
|
9821
9980
|
.ina-select-dropdown__trigger-text--placeholder {
|
|
9822
|
-
color: var(--ina-content-tertiary);
|
|
9981
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9823
9982
|
}
|
|
9824
9983
|
.ina-select-dropdown__trigger-text--selected {
|
|
9825
|
-
color: var(--ina-content-primary);
|
|
9984
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9826
9985
|
}
|
|
9827
9986
|
.ina-select-dropdown__trigger-text--disabled {
|
|
9828
|
-
color: var(--ina-neutral-400);
|
|
9987
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
9829
9988
|
}
|
|
9830
9989
|
/* Trigger icon (chevron) */
|
|
9831
9990
|
.ina-select-dropdown__trigger-icon {
|
|
9832
9991
|
flex-shrink: 0;
|
|
9833
|
-
margin-left: var(--ina-spacing-2);
|
|
9834
|
-
color: var(--ina-content-secondary);
|
|
9835
|
-
transition: transform var(--ina-transition-base);
|
|
9992
|
+
margin-left: var(--ina-spacing-2, 0.5rem);
|
|
9993
|
+
color: var(--ina-content-secondary, #525252);
|
|
9994
|
+
transition: transform var(--ina-transition-base, 200ms ease-in-out);
|
|
9836
9995
|
}
|
|
9837
9996
|
.ina-select-dropdown__trigger-icon--disabled {
|
|
9838
|
-
color: var(--ina-neutral-400);
|
|
9997
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
9839
9998
|
}
|
|
9840
9999
|
/* Panel container */
|
|
9841
10000
|
.ina-select-dropdown__panel {
|
|
@@ -9845,12 +10004,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
9845
10004
|
left: 0;
|
|
9846
10005
|
width: 100%; /* Match trigger width by default */
|
|
9847
10006
|
min-width: 100%;
|
|
9848
|
-
margin-top: var(--ina-spacing-1);
|
|
10007
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
9849
10008
|
background-color: var(
|
|
9850
|
-
--ina-background-primary
|
|
10009
|
+
--ina-background-primary,
|
|
10010
|
+
#ffffff
|
|
9851
10011
|
) !important; /* Ensure solid background */
|
|
9852
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
9853
|
-
border-radius: var(--ina-radius-lg);
|
|
10012
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10013
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
9854
10014
|
box-shadow:
|
|
9855
10015
|
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
9856
10016
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
@@ -9874,28 +10034,28 @@ dialog.bottom-sheet-dropdown {
|
|
|
9874
10034
|
}
|
|
9875
10035
|
/* Search input section */
|
|
9876
10036
|
.ina-select-dropdown__search {
|
|
9877
|
-
padding: var(--ina-spacing-2) 12px;
|
|
9878
|
-
border-bottom: 1px solid var(--ina-stroke-primary);
|
|
10037
|
+
padding: var(--ina-spacing-2, 0.5rem) 12px;
|
|
10038
|
+
border-bottom: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
9879
10039
|
}
|
|
9880
10040
|
.ina-select-dropdown__search-input {
|
|
9881
10041
|
width: 100%;
|
|
9882
10042
|
border: none;
|
|
9883
|
-
font-size: var(--ina-font-sm);
|
|
10043
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9884
10044
|
background-color: transparent;
|
|
9885
|
-
color: var(--ina-content-primary);
|
|
10045
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9886
10046
|
outline: none;
|
|
9887
|
-
transition: border-color var(--ina-transition-base);
|
|
10047
|
+
transition: border-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9888
10048
|
}
|
|
9889
10049
|
.ina-select-dropdown__search-input::-moz-placeholder {
|
|
9890
|
-
color: var(--ina-content-tertiary);
|
|
9891
|
-
font-size: var(--ina-font-xs);
|
|
10050
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
10051
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9892
10052
|
}
|
|
9893
10053
|
.ina-select-dropdown__search-input::placeholder {
|
|
9894
|
-
color: var(--ina-content-tertiary);
|
|
9895
|
-
font-size: var(--ina-font-xs);
|
|
10054
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
10055
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9896
10056
|
}
|
|
9897
10057
|
.ina-select-dropdown__search-input:focus {
|
|
9898
|
-
border-bottom-color: var(--ina-stroke-primary);
|
|
10058
|
+
border-bottom-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9899
10059
|
}
|
|
9900
10060
|
.ina-select-dropdown__search-input--disabled {
|
|
9901
10061
|
background-color: transparent;
|
|
@@ -9905,48 +10065,48 @@ dialog.bottom-sheet-dropdown {
|
|
|
9905
10065
|
}
|
|
9906
10066
|
/* Selected preview section */
|
|
9907
10067
|
.ina-select-dropdown__preview {
|
|
9908
|
-
padding: var(--ina-spacing-3);
|
|
9909
|
-
border-bottom: 1px solid var(--ina-stroke-primary);
|
|
9910
|
-
background-color: var(--ina-white);
|
|
10068
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10069
|
+
border-bottom: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10070
|
+
background-color: var(--ina-white, #ffffff);
|
|
9911
10071
|
}
|
|
9912
10072
|
.ina-select-dropdown__preview-label {
|
|
9913
|
-
font-size: var(--ina-font-xs);
|
|
9914
|
-
color: var(--ina-content-secondary);
|
|
9915
|
-
margin-bottom: var(--ina-spacing-1);
|
|
10073
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10074
|
+
color: var(--ina-content-secondary, #525252);
|
|
10075
|
+
margin-bottom: var(--ina-spacing-1, 0.25rem);
|
|
9916
10076
|
}
|
|
9917
10077
|
.ina-select-dropdown__preview-content {
|
|
9918
10078
|
display: flex;
|
|
9919
10079
|
flex-wrap: wrap;
|
|
9920
|
-
gap: var(--ina-spacing-1);
|
|
10080
|
+
gap: var(--ina-spacing-1, 0.25rem);
|
|
9921
10081
|
}
|
|
9922
10082
|
.ina-select-dropdown__preview-item {
|
|
9923
10083
|
display: inline-flex;
|
|
9924
10084
|
align-items: center;
|
|
9925
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
9926
|
-
font-size: var(--ina-font-xs);
|
|
9927
|
-
border-radius: var(--ina-radius-md);
|
|
9928
|
-
gap: var(--ina-spacing-2);
|
|
10085
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
10086
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10087
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
10088
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9929
10089
|
}
|
|
9930
10090
|
.ina-select-dropdown__preview-item--multiple,
|
|
9931
10091
|
.ina-select-dropdown__preview-item--single {
|
|
9932
|
-
background-color: var(--ina-background-secondary);
|
|
9933
|
-
color: var(--ina-content-primary);
|
|
10092
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
10093
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9934
10094
|
}
|
|
9935
10095
|
.ina-select-dropdown__preview-item-text {
|
|
9936
|
-
margin-right: var(--ina-spacing-1);
|
|
10096
|
+
margin-right: var(--ina-spacing-1, 0.25rem);
|
|
9937
10097
|
}
|
|
9938
10098
|
.ina-select-dropdown__preview-item-count {
|
|
9939
|
-
font-weight: var(--ina-font-medium);
|
|
10099
|
+
font-weight: var(--ina-font-medium, 500);
|
|
9940
10100
|
}
|
|
9941
10101
|
.ina-select-dropdown__preview-more {
|
|
9942
10102
|
display: inline-flex;
|
|
9943
10103
|
align-items: center;
|
|
9944
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
10104
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
9945
10105
|
|
|
9946
|
-
font-size: var(--ina-font-xs);
|
|
9947
|
-
background-color: var(--ina-neutral-100);
|
|
9948
|
-
color: var(--ina-neutral-600);
|
|
9949
|
-
border-radius: var(--ina-radius-md);
|
|
10106
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10107
|
+
background-color: var(--ina-neutral-100, #f5f5f5);
|
|
10108
|
+
color: var(--ina-neutral-600, #525252);
|
|
10109
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
9950
10110
|
}
|
|
9951
10111
|
/* Remove button */
|
|
9952
10112
|
.ina-select-dropdown__preview-remove {
|
|
@@ -9955,8 +10115,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9955
10115
|
border: none;
|
|
9956
10116
|
background: none;
|
|
9957
10117
|
cursor: pointer;
|
|
9958
|
-
border-radius: var(--ina-radius-full);
|
|
9959
|
-
transition: background-color var(--ina-transition-base);
|
|
10118
|
+
border-radius: var(--ina-radius-full, 9999px);
|
|
10119
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9960
10120
|
color: inherit;
|
|
9961
10121
|
display: flex;
|
|
9962
10122
|
align-items: center;
|
|
@@ -9972,45 +10132,46 @@ dialog.bottom-sheet-dropdown {
|
|
|
9972
10132
|
}
|
|
9973
10133
|
.ina-select-dropdown__preview-remove--multiple:hover,
|
|
9974
10134
|
.ina-select-dropdown__preview-remove--single:hover {
|
|
9975
|
-
background-color: var(--ina-background-tertiary);
|
|
10135
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
9976
10136
|
}
|
|
9977
10137
|
/* Options container */
|
|
9978
10138
|
.ina-select-dropdown__options {
|
|
9979
10139
|
overflow-y: auto;
|
|
9980
10140
|
scrollbar-width: thin;
|
|
9981
|
-
scrollbar-color: var(--ina-neutral-400
|
|
9982
|
-
|
|
10141
|
+
scrollbar-color: var(--ina-neutral-400, #a3a3a3)
|
|
10142
|
+
var(--ina-neutral-100, #f5f5f5);
|
|
10143
|
+
padding: var(--ina-spacing-1, 0.25rem);
|
|
9983
10144
|
}
|
|
9984
10145
|
.ina-select-dropdown__options::-webkit-scrollbar {
|
|
9985
10146
|
width: 6px;
|
|
9986
10147
|
}
|
|
9987
10148
|
.ina-select-dropdown__options::-webkit-scrollbar-track {
|
|
9988
|
-
background: var(--ina-neutral-100);
|
|
10149
|
+
background: var(--ina-neutral-100, #f5f5f5);
|
|
9989
10150
|
}
|
|
9990
10151
|
.ina-select-dropdown__options::-webkit-scrollbar-thumb {
|
|
9991
|
-
background-color: var(--ina-neutral-400);
|
|
9992
|
-
border-radius: var(--ina-radius-full);
|
|
10152
|
+
background-color: var(--ina-neutral-400, #a3a3a3);
|
|
10153
|
+
border-radius: var(--ina-radius-full, 9999px);
|
|
9993
10154
|
}
|
|
9994
10155
|
.ina-select-dropdown__options::-webkit-scrollbar-thumb:hover {
|
|
9995
|
-
background-color: var(--ina-neutral-500);
|
|
10156
|
+
background-color: var(--ina-neutral-500, #737373);
|
|
9996
10157
|
}
|
|
9997
10158
|
/* Individual option */
|
|
9998
10159
|
.ina-select-dropdown__option {
|
|
9999
10160
|
width: 100%;
|
|
10000
10161
|
display: flex;
|
|
10001
10162
|
align-items: center;
|
|
10002
|
-
gap: var(--ina-spacing-3);
|
|
10163
|
+
gap: var(--ina-spacing-3, 0.75rem);
|
|
10003
10164
|
padding: 10px 12px;
|
|
10004
10165
|
text-align: left;
|
|
10005
10166
|
background: none;
|
|
10006
10167
|
border: none;
|
|
10007
10168
|
cursor: pointer;
|
|
10008
10169
|
outline: none;
|
|
10009
|
-
transition: background-color var(--ina-transition-base);
|
|
10010
|
-
border-radius: var(--ina-radius-base);
|
|
10011
|
-
color: var(--ina-content-primary);
|
|
10170
|
+
transition: background-color var(--ina-transition-base, 200ms ease-in-out);
|
|
10171
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
10172
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10012
10173
|
min-height: 40px;
|
|
10013
|
-
font-size: var(--ina-font-xs);
|
|
10174
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10014
10175
|
}
|
|
10015
10176
|
@media (min-width: 768px) {
|
|
10016
10177
|
.ina-select-dropdown__option {
|
|
@@ -10018,25 +10179,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
10018
10179
|
}
|
|
10019
10180
|
}
|
|
10020
10181
|
.ina-select-dropdown__option:hover {
|
|
10021
|
-
background-color: var(--ina-background-tertiary);
|
|
10182
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10022
10183
|
}
|
|
10023
10184
|
.ina-select-dropdown__option:focus-visible {
|
|
10024
|
-
background-color: var(--ina-background-tertiary);
|
|
10025
|
-
outline: 2px solid var(--ina-content-tertiary);
|
|
10185
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10186
|
+
outline: 2px solid var(--ina-content-tertiary, #a3a3a3);
|
|
10026
10187
|
outline-offset: -2px;
|
|
10027
10188
|
}
|
|
10028
10189
|
/* Selected state untuk multiple mode */
|
|
10029
10190
|
.ina-select-dropdown__option--selected-multiple:not(:disabled),
|
|
10030
10191
|
.ina-select-dropdown__option--selected-single:not(:disabled) {
|
|
10031
|
-
background-color: var(--ina-background-secondary);
|
|
10192
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
10032
10193
|
}
|
|
10033
10194
|
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover,
|
|
10034
10195
|
.ina-select-dropdown__option--selected-single:not(:disabled):hover,
|
|
10035
10196
|
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover {
|
|
10036
|
-
background-color: var(--ina-background-tertiary);
|
|
10197
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10037
10198
|
}
|
|
10038
10199
|
.ina-select-dropdown__option--disabled {
|
|
10039
|
-
color: var(--ina-content-tertiary);
|
|
10200
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10040
10201
|
cursor: not-allowed;
|
|
10041
10202
|
}
|
|
10042
10203
|
.ina-select-dropdown__option--disabled:hover {
|
|
@@ -10055,31 +10216,31 @@ dialog.bottom-sheet-dropdown {
|
|
|
10055
10216
|
width: 16px;
|
|
10056
10217
|
height: 16px;
|
|
10057
10218
|
flex-shrink: 0;
|
|
10058
|
-
border: 1px solid var(--ina-stroke-secondary);
|
|
10059
|
-
border-radius: var(--ina-radius-base);
|
|
10060
|
-
background-color: var(--ina-neutral-25);
|
|
10061
|
-
transition: all var(--ina-transition-base);
|
|
10219
|
+
border: 1px solid var(--ina-stroke-secondary, #a3a3a3);
|
|
10220
|
+
border-radius: var(--ina-radius-base, 0.25rem);
|
|
10221
|
+
background-color: var(--ina-neutral-25, #ffffff);
|
|
10222
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
10062
10223
|
display: flex;
|
|
10063
10224
|
align-items: center;
|
|
10064
10225
|
justify-content: center;
|
|
10065
10226
|
}
|
|
10066
10227
|
.ina-select-dropdown__option-checkbox--checked {
|
|
10067
|
-
background-color: var(--ina-content-primary);
|
|
10068
|
-
border-color: var(--ina-stroke-primary);
|
|
10069
|
-
color: var(--ina-white);
|
|
10228
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
10229
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
10230
|
+
color: var(--ina-white, #ffffff);
|
|
10070
10231
|
}
|
|
10071
10232
|
.ina-select-dropdown__option-radio {
|
|
10072
10233
|
width: 16px;
|
|
10073
10234
|
height: 16px;
|
|
10074
10235
|
flex-shrink: 0;
|
|
10075
|
-
border: 1px solid var(--ina-content-primary);
|
|
10236
|
+
border: 1px solid var(--ina-content-primary, #1f1f1f);
|
|
10076
10237
|
border-radius: 50%;
|
|
10077
10238
|
background-color: transparent;
|
|
10078
|
-
transition: all var(--ina-transition-base);
|
|
10239
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
10079
10240
|
position: relative;
|
|
10080
10241
|
}
|
|
10081
10242
|
.ina-select-dropdown__option-radio--checked {
|
|
10082
|
-
border-color: var(--ina-content-primary);
|
|
10243
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
10083
10244
|
}
|
|
10084
10245
|
.ina-select-dropdown__option-radio-dot {
|
|
10085
10246
|
position: absolute;
|
|
@@ -10088,7 +10249,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
10088
10249
|
transform: translate(-50%, -50%);
|
|
10089
10250
|
width: 8px;
|
|
10090
10251
|
height: 8px;
|
|
10091
|
-
background-color: var(--ina-content-primary);
|
|
10252
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
10092
10253
|
border-radius: 50%;
|
|
10093
10254
|
}
|
|
10094
10255
|
/* Option content */
|
|
@@ -10103,51 +10264,51 @@ dialog.bottom-sheet-dropdown {
|
|
|
10103
10264
|
white-space: nowrap;
|
|
10104
10265
|
overflow: hidden;
|
|
10105
10266
|
text-overflow: ellipsis;
|
|
10106
|
-
line-height: var(--ina-line-height-normal);
|
|
10267
|
+
line-height: var(--ina-line-height-normal, 1.5);
|
|
10107
10268
|
}
|
|
10108
10269
|
/* Option check indicator (right side) */
|
|
10109
10270
|
.ina-select-dropdown__option-check-indicator {
|
|
10110
10271
|
flex-shrink: 0;
|
|
10111
|
-
color: var(--ina-content-primary);
|
|
10272
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10112
10273
|
display: flex;
|
|
10113
10274
|
align-items: center;
|
|
10114
10275
|
justify-content: center;
|
|
10115
10276
|
}
|
|
10116
10277
|
.ina-select-dropdown__option-check-icon {
|
|
10117
|
-
color: var(--ina-content-primary);
|
|
10278
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10118
10279
|
}
|
|
10119
10280
|
/* Empty state */
|
|
10120
10281
|
.ina-select-dropdown__empty {
|
|
10121
|
-
padding: var(--ina-spacing-3);
|
|
10282
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10122
10283
|
text-align: center;
|
|
10123
|
-
color: var(--ina-content-secondary);
|
|
10124
|
-
font-size: var(--ina-font-sm);
|
|
10284
|
+
color: var(--ina-content-secondary, #525252);
|
|
10285
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10125
10286
|
font-style: italic;
|
|
10126
10287
|
}
|
|
10127
10288
|
/* Load more button */
|
|
10128
10289
|
.ina-select-dropdown__load-more {
|
|
10129
|
-
padding: var(--ina-spacing-3);
|
|
10130
|
-
border-top: 1px solid var(--ina-stroke-primary);
|
|
10290
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10291
|
+
border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10131
10292
|
}
|
|
10132
10293
|
.ina-select-dropdown__load-more-button {
|
|
10133
10294
|
width: 100%;
|
|
10134
10295
|
display: flex;
|
|
10135
10296
|
align-items: center;
|
|
10136
10297
|
justify-content: center;
|
|
10137
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
10138
|
-
font-size: var(--ina-font-sm);
|
|
10139
|
-
color: var(--ina-content-primary);
|
|
10140
|
-
background-color: var(--ina-background-secondary);
|
|
10141
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
10142
|
-
border-radius: var(--ina-radius-md);
|
|
10298
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
10299
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10300
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10301
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
10302
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10303
|
+
border-radius: var(--ina-radius-md, 0.375rem);
|
|
10143
10304
|
cursor: pointer;
|
|
10144
10305
|
transition:
|
|
10145
|
-
background-color var(--ina-transition-base),
|
|
10146
|
-
border-color var(--ina-transition-base),
|
|
10147
|
-
box-shadow var(--ina-transition-base);
|
|
10306
|
+
background-color var(--ina-transition-base, 200ms ease-in-out),
|
|
10307
|
+
border-color var(--ina-transition-base, 200ms ease-in-out),
|
|
10308
|
+
box-shadow var(--ina-transition-base, 200ms ease-in-out);
|
|
10148
10309
|
}
|
|
10149
10310
|
.ina-select-dropdown__load-more-button:hover {
|
|
10150
|
-
background-color: var(--ina-background-tertiary);
|
|
10311
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10151
10312
|
}
|
|
10152
10313
|
.ina-select-dropdown__load-more-button:focus-visible {
|
|
10153
10314
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
@@ -10157,22 +10318,22 @@ dialog.bottom-sheet-dropdown {
|
|
|
10157
10318
|
cursor: not-allowed;
|
|
10158
10319
|
}
|
|
10159
10320
|
.ina-select-dropdown__load-more-button:disabled:hover {
|
|
10160
|
-
background-color: var(--ina-background-tertiary);
|
|
10161
|
-
color: var(--ina-content-tertiary);
|
|
10162
|
-
border-color: var(--ina-content-tertiary);
|
|
10321
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10322
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10323
|
+
border-color: var(--ina-content-tertiary, #a3a3a3);
|
|
10163
10324
|
}
|
|
10164
10325
|
/* Loading state */
|
|
10165
10326
|
.ina-select-dropdown__loading {
|
|
10166
|
-
padding: var(--ina-spacing-3);
|
|
10167
|
-
border-top: 1px solid var(--ina-stroke-primary);
|
|
10327
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10328
|
+
border-top: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10168
10329
|
display: flex;
|
|
10169
10330
|
align-items: center;
|
|
10170
10331
|
justify-content: center;
|
|
10171
|
-
gap: var(--ina-spacing-2);
|
|
10332
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
10172
10333
|
}
|
|
10173
10334
|
.ina-select-dropdown__loading-spinner {
|
|
10174
10335
|
animation: spin 1s linear infinite;
|
|
10175
|
-
color: var(--ina-content-secondary);
|
|
10336
|
+
color: var(--ina-content-secondary, #525252);
|
|
10176
10337
|
}
|
|
10177
10338
|
@keyframes spin {
|
|
10178
10339
|
to {
|
|
@@ -10180,8 +10341,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
10180
10341
|
}
|
|
10181
10342
|
}
|
|
10182
10343
|
.ina-select-dropdown__loading-text {
|
|
10183
|
-
font-size: var(--ina-font-sm);
|
|
10184
|
-
color: var(--ina-content-secondary);
|
|
10344
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10345
|
+
color: var(--ina-content-secondary, #525252);
|
|
10185
10346
|
}
|
|
10186
10347
|
/* Size variants - Font size and padding */
|
|
10187
10348
|
/* Small size */
|
|
@@ -10210,13 +10371,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
10210
10371
|
.ina-select-dropdown--size-sm .ina-select-dropdown__search-input {
|
|
10211
10372
|
font-size: 12px;
|
|
10212
10373
|
}
|
|
10213
|
-
/* Medium size (default) - keep existing font-size 14px */
|
|
10214
|
-
.ina-select-dropdown--size-md .ina-select-dropdown__trigger {
|
|
10215
|
-
/* padding sudah ada di base style */
|
|
10216
|
-
}
|
|
10217
|
-
.ina-select-dropdown--size-md .ina-select-dropdown__option {
|
|
10218
|
-
/* padding sudah ada di base style */
|
|
10219
|
-
}
|
|
10220
10374
|
/* Large size - keep existing font-size 14px */
|
|
10221
10375
|
.ina-select-dropdown--size-lg .ina-select-dropdown__trigger {
|
|
10222
10376
|
padding: var(--ina-spacing-3) var(--ina-spacing-4);
|
|
@@ -10231,11 +10385,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
10231
10385
|
@media (max-width: 639px) {
|
|
10232
10386
|
.ina-select-dropdown__option {
|
|
10233
10387
|
min-height: 48px;
|
|
10234
|
-
padding: var(--ina-spacing-3);
|
|
10388
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10235
10389
|
}
|
|
10236
10390
|
|
|
10237
10391
|
.ina-select-dropdown__preview-content {
|
|
10238
|
-
gap: var(--ina-spacing-2);
|
|
10392
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
10239
10393
|
}
|
|
10240
10394
|
|
|
10241
10395
|
.ina-select-dropdown__trigger--size-sm {
|
|
@@ -10250,18 +10404,18 @@ dialog.bottom-sheet-dropdown {
|
|
|
10250
10404
|
height: 40px !important;
|
|
10251
10405
|
}
|
|
10252
10406
|
.ina-select-dropdown__load-more-button {
|
|
10253
|
-
font-size: var(--ina-font-xs);
|
|
10407
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10254
10408
|
}
|
|
10255
10409
|
|
|
10256
10410
|
.ina-select-dropdown__label,
|
|
10257
10411
|
.ina-select-dropdown__trigger,
|
|
10258
10412
|
.ina-select-dropdown__trigger-text {
|
|
10259
|
-
font-size: var(--ina-font-xs) !important;
|
|
10413
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
10260
10414
|
}
|
|
10261
10415
|
}
|
|
10262
10416
|
/* Accessibility improvements */
|
|
10263
10417
|
.ina-select-dropdown__trigger:focus-visible {
|
|
10264
|
-
outline: 2px solid var(--ina-content-primary);
|
|
10418
|
+
outline: 2px solid var(--ina-content-primary, #1f1f1f);
|
|
10265
10419
|
outline-offset: 2px;
|
|
10266
10420
|
}
|
|
10267
10421
|
/* High contrast mode */
|
|
@@ -10293,7 +10447,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
10293
10447
|
padding: 8px 12px;
|
|
10294
10448
|
font-size: 12px;
|
|
10295
10449
|
font-weight: 600;
|
|
10296
|
-
color: var(--ina-content-tertiary);
|
|
10450
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10297
10451
|
line-height: 1.33; /* 16px / 12px */
|
|
10298
10452
|
pointer-events: none;
|
|
10299
10453
|
}
|
|
@@ -12710,21 +12864,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
12710
12864
|
}
|
|
12711
12865
|
/* Label */
|
|
12712
12866
|
.ina-text-area__label {
|
|
12713
|
-
font-size: var(--ina-font-sm);
|
|
12714
|
-
font-weight: var(--ina-font-medium);
|
|
12715
|
-
color: var(--ina-content-primary);
|
|
12716
|
-
margin-bottom: var(--ina-spacing-2);
|
|
12867
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
12868
|
+
font-weight: var(--ina-font-medium, 500);
|
|
12869
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
12870
|
+
margin-bottom: var(--ina-spacing-2, 0.5rem);
|
|
12717
12871
|
}
|
|
12718
12872
|
/* Input wrapper */
|
|
12719
12873
|
.ina-text-area__wrapper {
|
|
12720
12874
|
display: flex;
|
|
12721
12875
|
align-items: flex-start;
|
|
12722
|
-
gap: var(--ina-spacing-2);
|
|
12723
|
-
border-radius: var(--ina-radius-lg);
|
|
12724
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
12725
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
12726
|
-
background-color: var(--ina-background-primary);
|
|
12727
|
-
transition: all var(--ina-transition-base);
|
|
12876
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
12877
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
12878
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
12879
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
12880
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
12881
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
12728
12882
|
}
|
|
12729
12883
|
/* Input field */
|
|
12730
12884
|
.ina-text-area__input {
|
|
@@ -12738,10 +12892,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
12738
12892
|
line-height: 1.5;
|
|
12739
12893
|
}
|
|
12740
12894
|
.ina-text-area__input::-moz-placeholder {
|
|
12741
|
-
color: var(--ina-content-tertiary);
|
|
12895
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12742
12896
|
}
|
|
12743
12897
|
.ina-text-area__input::placeholder {
|
|
12744
|
-
color: var(--ina-content-tertiary);
|
|
12898
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12745
12899
|
}
|
|
12746
12900
|
/* Prefix/suffix icons */
|
|
12747
12901
|
.ina-text-area__prefix-icon,
|
|
@@ -12760,8 +12914,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12760
12914
|
display: inline-flex;
|
|
12761
12915
|
align-items: center;
|
|
12762
12916
|
justify-content: center;
|
|
12763
|
-
color: var(--ina-content-secondary);
|
|
12764
|
-
transition: color var(--ina-transition-base);
|
|
12917
|
+
color: var(--ina-content-secondary, #525252);
|
|
12918
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
12765
12919
|
}
|
|
12766
12920
|
.ina-text-area__clear-button:hover:not(:disabled) {
|
|
12767
12921
|
color: var(--ina-content-secondary);
|
|
@@ -12781,22 +12935,34 @@ dialog.bottom-sheet-dropdown {
|
|
|
12781
12935
|
margin-top: var(--ina-spacing-1);
|
|
12782
12936
|
}
|
|
12783
12937
|
.ina-text-area__helper-text--neutral {
|
|
12784
|
-
color: var(--ina-content-secondary);
|
|
12938
|
+
color: var(--ina-content-secondary, #525252);
|
|
12785
12939
|
}
|
|
12786
12940
|
.ina-text-area__helper-text--error {
|
|
12787
|
-
color: var(--ina-negative-500);
|
|
12941
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
12788
12942
|
}
|
|
12789
12943
|
.ina-text-area__helper-text--warning {
|
|
12790
|
-
color: var(--ina-warning-500);
|
|
12944
|
+
color: var(--ina-warning-500, #eebb04);
|
|
12791
12945
|
}
|
|
12792
12946
|
.ina-text-area__helper-text--success {
|
|
12793
|
-
color: var(--ina-positive-600);
|
|
12947
|
+
color: var(--ina-positive-600, #288034);
|
|
12794
12948
|
}
|
|
12795
12949
|
/* Character count */
|
|
12796
12950
|
.ina-text-area__char-count {
|
|
12797
|
-
font-size: var(--ina-font-xs);
|
|
12798
|
-
color: var(--ina-content-secondary);
|
|
12799
|
-
margin-top: var(--ina-spacing-1);
|
|
12951
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
12952
|
+
color: var(--ina-content-secondary, #525252);
|
|
12953
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
12954
|
+
}
|
|
12955
|
+
/* Focus styles - Sesuai design Figma */
|
|
12956
|
+
.ina-text-area__wrapper:focus-within {
|
|
12957
|
+
box-shadow:
|
|
12958
|
+
0 0 0 2px #fff,
|
|
12959
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
12960
|
+
outline: none;
|
|
12961
|
+
background-color: var(--ina-background-primary, #ffffff) !important;
|
|
12962
|
+
}
|
|
12963
|
+
/* hover styles - Sesuai design Figma */
|
|
12964
|
+
.ina-text-area__wrapper:hover {
|
|
12965
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
12800
12966
|
}
|
|
12801
12967
|
/* Status variants */
|
|
12802
12968
|
.ina-text-area__wrapper--status-neutral {
|
|
@@ -12811,8 +12977,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12811
12977
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
|
|
12812
12978
|
border-color: var(--ina-negative-600);
|
|
12813
12979
|
box-shadow:
|
|
12814
|
-
0 0 0
|
|
12815
|
-
0 0 0
|
|
12980
|
+
0 0 0 2px #fff,
|
|
12981
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
12816
12982
|
}
|
|
12817
12983
|
.ina-text-area__wrapper--status-warning {
|
|
12818
12984
|
border-color: var(--ina-warning-500);
|
|
@@ -12820,8 +12986,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12820
12986
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
|
|
12821
12987
|
border-color: var(--ina-warning-600);
|
|
12822
12988
|
box-shadow:
|
|
12823
|
-
0 0 0
|
|
12824
|
-
0 0 0
|
|
12989
|
+
0 0 0 2px #fff,
|
|
12990
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
12825
12991
|
}
|
|
12826
12992
|
.ina-text-area__wrapper--status-success {
|
|
12827
12993
|
border-color: var(--ina-positive-600);
|
|
@@ -12829,8 +12995,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12829
12995
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
|
|
12830
12996
|
border-color: var(--ina-positive-600);
|
|
12831
12997
|
box-shadow:
|
|
12832
|
-
0 0 0
|
|
12833
|
-
0 0 0
|
|
12998
|
+
0 0 0 2px #fff,
|
|
12999
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
12834
13000
|
}
|
|
12835
13001
|
/* Disabled state */
|
|
12836
13002
|
.ina-text-area__wrapper--disabled {
|
|
@@ -12839,27 +13005,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
12839
13005
|
cursor: not-allowed;
|
|
12840
13006
|
}
|
|
12841
13007
|
.ina-text-area__wrapper--disabled > .ina-text-area__input::-moz-placeholder {
|
|
12842
|
-
color: var(--ina-content-tertiary) !important;
|
|
13008
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12843
13009
|
}
|
|
12844
13010
|
.ina-text-area__wrapper--disabled > .ina-text-area__input::placeholder {
|
|
12845
|
-
color: var(--ina-content-tertiary) !important;
|
|
13011
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12846
13012
|
}
|
|
12847
13013
|
.ina-text-area__input:disabled {
|
|
12848
13014
|
cursor: not-allowed;
|
|
12849
13015
|
opacity: 0.6;
|
|
12850
13016
|
}
|
|
12851
|
-
/* Focus styles - Sesuai design Figma */
|
|
12852
|
-
.ina-text-area__wrapper:focus-within {
|
|
12853
|
-
box-shadow:
|
|
12854
|
-
0 0 0 2px #fff,
|
|
12855
|
-
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
12856
|
-
outline: none;
|
|
12857
|
-
background-color: var(--ina-background-primary);
|
|
12858
|
-
}
|
|
12859
|
-
/* hover styles - Sesuai design Figma */
|
|
12860
|
-
.ina-text-area__wrapper:hover {
|
|
12861
|
-
background-color: var(--ina-neutral-50);
|
|
12862
|
-
}
|
|
12863
13017
|
/* Responsive adjustments */
|
|
12864
13018
|
@media (max-width: 639px) {
|
|
12865
13019
|
.ina-text-area__wrapper {
|
|
@@ -12916,7 +13070,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
12916
13070
|
.ina-text-field__label {
|
|
12917
13071
|
font-size: var(--ina-font-sm);
|
|
12918
13072
|
font-weight: var(--ina-font-medium);
|
|
12919
|
-
color: var(--ina-content-primary);
|
|
13073
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
12920
13074
|
margin-bottom: var(--ina-spacing-2);
|
|
12921
13075
|
}
|
|
12922
13076
|
/* Input wrapper */
|
|
@@ -12925,9 +13079,9 @@ dialog.bottom-sheet-dropdown {
|
|
|
12925
13079
|
align-items: center;
|
|
12926
13080
|
gap: var(--ina-spacing-2);
|
|
12927
13081
|
border-radius: var(--ina-radius-lg);
|
|
12928
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13082
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
12929
13083
|
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
12930
|
-
background-color: var(--ina-background-primary);
|
|
13084
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
12931
13085
|
transition: all var(--ina-transition-base);
|
|
12932
13086
|
}
|
|
12933
13087
|
/* Size variants */
|
|
@@ -12980,10 +13134,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
12980
13134
|
font-family: inherit;
|
|
12981
13135
|
}
|
|
12982
13136
|
.ina-text-field__input::-moz-placeholder {
|
|
12983
|
-
color: var(--ina-content-tertiary);
|
|
13137
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12984
13138
|
}
|
|
12985
13139
|
.ina-text-field__input::placeholder {
|
|
12986
|
-
color: var(--ina-content-tertiary);
|
|
13140
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12987
13141
|
}
|
|
12988
13142
|
/* Prefix/suffix icons */
|
|
12989
13143
|
.ina-text-field__prefix-icon,
|
|
@@ -13000,11 +13154,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13000
13154
|
display: inline-flex;
|
|
13001
13155
|
align-items: center;
|
|
13002
13156
|
justify-content: center;
|
|
13003
|
-
color: var(--ina-content-dark-secondary);
|
|
13157
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
13004
13158
|
transition: color var(--ina-transition-base);
|
|
13005
13159
|
}
|
|
13006
13160
|
.ina-text-field__clear-button:hover:not(:disabled) {
|
|
13007
|
-
color: var(--ina-content-secondary);
|
|
13161
|
+
color: var(--ina-content-secondary, #525252);
|
|
13008
13162
|
}
|
|
13009
13163
|
.ina-text-field__clear-button:disabled {
|
|
13010
13164
|
cursor: not-allowed;
|
|
@@ -13028,67 +13182,67 @@ dialog.bottom-sheet-dropdown {
|
|
|
13028
13182
|
padding-top: var(--ina-spacing-1);
|
|
13029
13183
|
}
|
|
13030
13184
|
.ina-text-field__helper-text--neutral {
|
|
13031
|
-
color: var(--ina-content-secondary);
|
|
13185
|
+
color: var(--ina-content-secondary, #525252);
|
|
13032
13186
|
}
|
|
13033
13187
|
.ina-text-field__helper-text--error {
|
|
13034
|
-
color: var(--ina-negative-500);
|
|
13188
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
13035
13189
|
}
|
|
13036
13190
|
.ina-text-field__helper-text--warning {
|
|
13037
|
-
color: var(--ina-warning-500);
|
|
13191
|
+
color: var(--ina-warning-500, #eebb04);
|
|
13038
13192
|
}
|
|
13039
13193
|
.ina-text-field__helper-text--success {
|
|
13040
|
-
color: var(--ina-positive-600);
|
|
13194
|
+
color: var(--ina-positive-600, #288034);
|
|
13041
13195
|
}
|
|
13042
13196
|
/* Character count */
|
|
13043
13197
|
.ina-text-field__char-count {
|
|
13044
13198
|
font-size: var(--ina-font-xs);
|
|
13045
|
-
color: var(--ina-content-secondary);
|
|
13199
|
+
color: var(--ina-content-secondary, #525252);
|
|
13046
13200
|
}
|
|
13047
13201
|
/* Status variants */
|
|
13048
13202
|
.ina-text-field__wrapper--status-neutral {
|
|
13049
|
-
border-color: var(--ina-stroke-primary);
|
|
13203
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13050
13204
|
}
|
|
13051
13205
|
.ina-text-field__wrapper--status-neutral:focus-within {
|
|
13052
|
-
border-color: var(--ina-content-primary);
|
|
13206
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
13053
13207
|
}
|
|
13054
13208
|
.ina-text-field__wrapper--status-error {
|
|
13055
|
-
border-color: var(--ina-negative-500);
|
|
13209
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
13056
13210
|
}
|
|
13057
13211
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
|
|
13058
|
-
border-color: var(--ina-negative-600);
|
|
13212
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13059
13213
|
box-shadow:
|
|
13060
|
-
0 0 0
|
|
13061
|
-
0 0 0
|
|
13214
|
+
0 0 0 2px #fff,
|
|
13215
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
13062
13216
|
}
|
|
13063
13217
|
.ina-text-field__wrapper--status-warning {
|
|
13064
|
-
border-color: var(--ina-warning-500);
|
|
13218
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
13065
13219
|
}
|
|
13066
13220
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
|
|
13067
|
-
border-color: var(--ina-warning-600);
|
|
13221
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
13068
13222
|
box-shadow:
|
|
13069
|
-
0 0 0
|
|
13070
|
-
0 0 0
|
|
13223
|
+
0 0 0 2px #fff,
|
|
13224
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
13071
13225
|
}
|
|
13072
13226
|
.ina-text-field__wrapper--status-success {
|
|
13073
|
-
border-color: var(--ina-positive-600);
|
|
13227
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13074
13228
|
}
|
|
13075
13229
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
|
|
13076
|
-
border-color: var(--ina-positive-600);
|
|
13230
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13077
13231
|
box-shadow:
|
|
13078
|
-
0 0 0
|
|
13079
|
-
0 0 0
|
|
13232
|
+
0 0 0 2px #fff,
|
|
13233
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
13080
13234
|
}
|
|
13081
13235
|
/* Disabled state */
|
|
13082
13236
|
.ina-text-field__wrapper--disabled {
|
|
13083
|
-
background-color: var(--ina-background-tertiary);
|
|
13084
|
-
border-color: var(--ina-stroke-primary) !important;
|
|
13237
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
13238
|
+
border-color: var(--ina-stroke-primary, #e5e5e5) !important;
|
|
13085
13239
|
cursor: not-allowed;
|
|
13086
13240
|
}
|
|
13087
13241
|
.ina-text-field__wrapper--disabled > .ina-text-field__input::-moz-placeholder {
|
|
13088
|
-
color: var(--ina-content-tertiary) !important;
|
|
13242
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13089
13243
|
}
|
|
13090
13244
|
.ina-text-field__wrapper--disabled > .ina-text-field__input::placeholder {
|
|
13091
|
-
color: var(--ina-content-tertiary) !important;
|
|
13245
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13092
13246
|
}
|
|
13093
13247
|
.ina-text-field__input:disabled {
|
|
13094
13248
|
cursor: not-allowed;
|
|
@@ -13100,12 +13254,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
13100
13254
|
0 0 0 2px #fff,
|
|
13101
13255
|
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13102
13256
|
outline: none;
|
|
13103
|
-
background-color: var(--ina-background-primary);
|
|
13257
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13104
13258
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13105
13259
|
}
|
|
13106
13260
|
/* hover styles - Sesuai design Figma */
|
|
13107
13261
|
.ina-text-field__wrapper:hover {
|
|
13108
|
-
background-color: var(--ina-neutral-50);
|
|
13262
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
13109
13263
|
}
|
|
13110
13264
|
/* Responsive adjustments */
|
|
13111
13265
|
@media (max-width: 639px) {
|
|
@@ -13396,11 +13550,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13396
13550
|
position: relative;
|
|
13397
13551
|
display: flex;
|
|
13398
13552
|
align-items: center;
|
|
13399
|
-
background-color: var(--ina-background-primary);
|
|
13400
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13401
|
-
border-radius: var(--ina-radius-lg);
|
|
13402
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
13403
|
-
transition: all var(--ina-transition-base);
|
|
13553
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13554
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
13555
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
13556
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
13557
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
13404
13558
|
}
|
|
13405
13559
|
/* Size variants */
|
|
13406
13560
|
.ina-time-picker--size-sm .ina-time-picker__wrapper {
|
|
@@ -13443,45 +13597,107 @@ dialog.bottom-sheet-dropdown {
|
|
|
13443
13597
|
}
|
|
13444
13598
|
}
|
|
13445
13599
|
.ina-time-picker__wrapper:hover {
|
|
13446
|
-
|
|
13600
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13601
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13447
13602
|
}
|
|
13448
13603
|
.ina-time-picker--open .ina-time-picker__wrapper {
|
|
13449
13604
|
box-shadow:
|
|
13450
|
-
|
|
13451
|
-
|
|
13605
|
+
0 0 0 2px #fff,
|
|
13606
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13452
13607
|
outline: none;
|
|
13453
|
-
background-color: var(--ina-background-primary);
|
|
13454
|
-
border-color: var(--ina-
|
|
13608
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13609
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13610
|
+
}
|
|
13611
|
+
/* Input */
|
|
13612
|
+
.ina-time-picker__input {
|
|
13613
|
+
flex: 1;
|
|
13614
|
+
border: none;
|
|
13615
|
+
outline: none;
|
|
13616
|
+
background: transparent;
|
|
13617
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
13618
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
13619
|
+
font-weight: var(--ina-font-normal, 400);
|
|
13620
|
+
padding: 0;
|
|
13621
|
+
width: 100%;
|
|
13622
|
+
cursor: pointer;
|
|
13623
|
+
}
|
|
13624
|
+
.ina-time-picker__input:disabled {
|
|
13625
|
+
cursor: not-allowed;
|
|
13626
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
13627
|
+
}
|
|
13628
|
+
.ina-time-picker__input::-moz-placeholder {
|
|
13629
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13630
|
+
}
|
|
13631
|
+
.ina-time-picker__input::placeholder {
|
|
13632
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13633
|
+
}
|
|
13634
|
+
/* Prefix Icon */
|
|
13635
|
+
.ina-time-picker__prefix-icon {
|
|
13636
|
+
display: flex;
|
|
13637
|
+
align-items: center;
|
|
13638
|
+
justify-content: center;
|
|
13639
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
13640
|
+
margin-right: var(--ina-spacing-2, 0.5rem);
|
|
13641
|
+
}
|
|
13642
|
+
/* Suffix Icon / Clear Button */
|
|
13643
|
+
.ina-time-picker__suffix-icon,
|
|
13644
|
+
.ina-time-picker__clear-button {
|
|
13645
|
+
display: flex;
|
|
13646
|
+
align-items: center;
|
|
13647
|
+
justify-content: center;
|
|
13648
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
13649
|
+
margin-left: var(--ina-spacing-2, 0.5rem);
|
|
13650
|
+
}
|
|
13651
|
+
.ina-time-picker__clear-button {
|
|
13652
|
+
background: none;
|
|
13653
|
+
border: none;
|
|
13654
|
+
padding: 0;
|
|
13655
|
+
cursor: pointer;
|
|
13656
|
+
}
|
|
13657
|
+
.ina-time-picker__clear-button:hover {
|
|
13658
|
+
color: var(--ina-content-secondary, #525252);
|
|
13455
13659
|
}
|
|
13456
|
-
/* ... existing code ... */
|
|
13457
13660
|
/* Status Variants */
|
|
13458
13661
|
.ina-time-picker--status-error .ina-time-picker__wrapper {
|
|
13459
|
-
border-color: var(--ina-
|
|
13662
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13460
13663
|
}
|
|
13461
13664
|
.ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
|
|
13665
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13462
13666
|
box-shadow:
|
|
13463
|
-
0 0 0
|
|
13464
|
-
0 0 0
|
|
13667
|
+
0 0 0 2px #fff,
|
|
13668
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
13465
13669
|
}
|
|
13466
13670
|
.ina-time-picker--status-warning .ina-time-picker__wrapper {
|
|
13467
|
-
border-color: var(--ina-warning-500);
|
|
13671
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
13468
13672
|
}
|
|
13469
13673
|
.ina-time-picker--status-warning.ina-time-picker--open
|
|
13470
13674
|
.ina-time-picker__wrapper {
|
|
13675
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
13471
13676
|
box-shadow:
|
|
13472
|
-
0 0 0
|
|
13473
|
-
0 0 0
|
|
13677
|
+
0 0 0 2px #fff,
|
|
13678
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
13474
13679
|
}
|
|
13475
13680
|
.ina-time-picker--status-success .ina-time-picker__wrapper {
|
|
13476
|
-
border-color: var(--ina-
|
|
13681
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13477
13682
|
}
|
|
13478
13683
|
.ina-time-picker--status-success.ina-time-picker--open
|
|
13479
13684
|
.ina-time-picker__wrapper {
|
|
13685
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13480
13686
|
box-shadow:
|
|
13481
|
-
0 0 0
|
|
13482
|
-
0 0 0
|
|
13687
|
+
0 0 0 2px #fff,
|
|
13688
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
13689
|
+
}
|
|
13690
|
+
/* Disabled */
|
|
13691
|
+
.ina-time-picker--disabled .ina-time-picker__wrapper {
|
|
13692
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13693
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13694
|
+
cursor: not-allowed;
|
|
13695
|
+
opacity: 0.6;
|
|
13696
|
+
}
|
|
13697
|
+
.ina-time-picker--disabled .ina-time-picker__wrapper:hover {
|
|
13698
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13699
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13483
13700
|
}
|
|
13484
|
-
/* ... existing code ... */
|
|
13485
13701
|
/* Panel */
|
|
13486
13702
|
.ina-time-picker__panel {
|
|
13487
13703
|
position: absolute;
|
|
@@ -13490,26 +13706,30 @@ dialog.bottom-sheet-dropdown {
|
|
|
13490
13706
|
width: 100%;
|
|
13491
13707
|
min-width: 100%; /* Match trigger width by default */
|
|
13492
13708
|
z-index: 1000;
|
|
13493
|
-
background-color: var(--ina-background-primary);
|
|
13494
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13495
|
-
border-radius: var(--ina-radius-lg);
|
|
13496
|
-
box-shadow: var(
|
|
13497
|
-
|
|
13709
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13710
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
13711
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
13712
|
+
box-shadow: var(
|
|
13713
|
+
--ina-shadow-lg,
|
|
13714
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
13715
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.1)
|
|
13716
|
+
);
|
|
13717
|
+
margin-top: var(--ina-spacing-2, 0.5rem);
|
|
13498
13718
|
overflow: hidden;
|
|
13499
13719
|
animation: time-picker-fade-in 0.15s ease-out;
|
|
13500
13720
|
}
|
|
13501
|
-
/* ... existing code ... */
|
|
13502
13721
|
/* Focus styles - Sesuai design Figma */
|
|
13503
13722
|
.ina-time-picker__wrapper:focus-within {
|
|
13504
13723
|
box-shadow:
|
|
13505
|
-
|
|
13506
|
-
|
|
13724
|
+
0 0 0 2px #fff,
|
|
13725
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13507
13726
|
outline: none;
|
|
13508
|
-
background-color: var(--ina-background-primary);
|
|
13727
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13728
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13509
13729
|
}
|
|
13510
13730
|
/* hover styles - Sesuai design Figma */
|
|
13511
13731
|
.ina-time-picker__wrapper:hover {
|
|
13512
|
-
background-color: var(--ina-
|
|
13732
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13513
13733
|
}
|
|
13514
13734
|
/* High Contrast Mode */
|
|
13515
13735
|
@media (prefers-contrast: high) {
|
|
@@ -13551,12 +13771,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
13551
13771
|
|
|
13552
13772
|
.ina-time-picker__option {
|
|
13553
13773
|
min-height: 28px;
|
|
13554
|
-
font-size: var(--ina-font-xs);
|
|
13555
|
-
padding: var(--ina-spacing-2);
|
|
13774
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13775
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
13556
13776
|
}
|
|
13557
13777
|
|
|
13558
13778
|
.ina-time-picker__wrapper {
|
|
13559
|
-
padding: 0.375rem var(--ina-spacing-2); /* 6px 8px */
|
|
13779
|
+
padding: 0.375rem var(--ina-spacing-2, 0.5rem); /* 6px 8px */
|
|
13560
13780
|
gap: 0.375rem; /* 6px */
|
|
13561
13781
|
}
|
|
13562
13782
|
|
|
@@ -13568,11 +13788,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13568
13788
|
.ina-time-picker--size-sm .ina-time-picker__input,
|
|
13569
13789
|
.ina-time-picker--size-md .ina-time-picker__input,
|
|
13570
13790
|
.ina-time-picker--size-lg .ina-time-picker__input {
|
|
13571
|
-
font-size: var(--ina-font-xs) !important;
|
|
13791
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
13572
13792
|
}
|
|
13573
13793
|
|
|
13574
13794
|
.ina-time-picker__label {
|
|
13575
|
-
font-size: var(--ina-font-xs);
|
|
13795
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13576
13796
|
}
|
|
13577
13797
|
|
|
13578
13798
|
.ina-time-picker__prefix-icon,
|
|
@@ -13593,8 +13813,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
13593
13813
|
|
|
13594
13814
|
.ina-time-picker__action-button,
|
|
13595
13815
|
.ina-time-picker__confirm-button {
|
|
13596
|
-
font-size: var(--ina-font-xs);
|
|
13597
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
13816
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13817
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
13598
13818
|
}
|
|
13599
13819
|
}
|
|
13600
13820
|
/* Toast Component Styles */
|