@idds/styles 1.5.30 → 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 +789 -566
- 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 {
|
|
@@ -8278,43 +8432,46 @@ dialog.bottom-sheet-dropdown {
|
|
|
8278
8432
|
}
|
|
8279
8433
|
}
|
|
8280
8434
|
/* Status-based input wrapper colors */
|
|
8281
|
-
.ina-password-input__wrapper--neutral {
|
|
8435
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--neutral {
|
|
8282
8436
|
border-color: var(--ina-stroke-primary);
|
|
8283
8437
|
}
|
|
8284
|
-
.ina-password-input__wrapper--neutral:focus-within {
|
|
8285
|
-
border-color: var(--ina-content-primary);
|
|
8438
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--neutral:focus-within {
|
|
8439
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8440
|
+
box-shadow:
|
|
8441
|
+
0 0 0 2px #fff,
|
|
8442
|
+
0 0 0 3px var(--ina-primary-primary, #141414) !important;
|
|
8286
8443
|
}
|
|
8287
|
-
.ina-password-input__wrapper--error {
|
|
8444
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--error {
|
|
8288
8445
|
border-color: var(--ina-negative-500);
|
|
8289
8446
|
}
|
|
8290
|
-
.ina-password-input__wrapper--error:focus-within {
|
|
8291
|
-
border-color: var(--ina-negative-600);
|
|
8447
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--error:focus-within {
|
|
8448
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
8292
8449
|
box-shadow:
|
|
8293
|
-
0 0 0
|
|
8294
|
-
0 0 0
|
|
8450
|
+
0 0 0 2px #fff,
|
|
8451
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
|
|
8295
8452
|
}
|
|
8296
|
-
.ina-password-input__wrapper--warning {
|
|
8453
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--warning {
|
|
8297
8454
|
border-color: var(--ina-warning-500);
|
|
8298
8455
|
}
|
|
8299
|
-
.ina-password-input__wrapper--warning:focus-within {
|
|
8300
|
-
border-color: var(--ina-warning-600);
|
|
8456
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--warning:focus-within {
|
|
8457
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
8301
8458
|
box-shadow:
|
|
8302
|
-
0 0 0
|
|
8303
|
-
0 0 0
|
|
8459
|
+
0 0 0 2px #fff,
|
|
8460
|
+
0 0 0 3px var(--ina-warning-500, #eebb04) !important;
|
|
8304
8461
|
}
|
|
8305
|
-
.ina-password-input__wrapper--success {
|
|
8462
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--success {
|
|
8306
8463
|
border-color: var(--ina-positive-600);
|
|
8307
8464
|
}
|
|
8308
|
-
.ina-password-input__wrapper--success:focus-within {
|
|
8309
|
-
border-color: var(--ina-positive-600);
|
|
8465
|
+
.ina-password-input__wrapper.ina-password-input__wrapper--success:focus-within {
|
|
8466
|
+
border-color: var(--ina-positive-600, #288034);
|
|
8310
8467
|
box-shadow:
|
|
8311
|
-
0 0 0
|
|
8312
|
-
0 0 0
|
|
8468
|
+
0 0 0 2px #fff,
|
|
8469
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
|
|
8313
8470
|
}
|
|
8314
8471
|
/* Prefix icon */
|
|
8315
8472
|
.ina-password-input__prefix-icon {
|
|
8316
8473
|
flex-shrink: 0;
|
|
8317
|
-
color: var(--ina-content-secondary);
|
|
8474
|
+
color: var(--ina-content-secondary, #525252);
|
|
8318
8475
|
}
|
|
8319
8476
|
/* Input field */
|
|
8320
8477
|
.ina-password-input__input {
|
|
@@ -8322,14 +8479,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
8322
8479
|
border: none;
|
|
8323
8480
|
outline: none;
|
|
8324
8481
|
background: transparent;
|
|
8325
|
-
font-size: var(--ina-font-sm);
|
|
8326
|
-
color: var(--ina-content-primary);
|
|
8482
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8483
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8327
8484
|
}
|
|
8328
8485
|
.ina-password-input__input::-moz-placeholder {
|
|
8329
|
-
color: var(--ina-content-tertiary);
|
|
8486
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8330
8487
|
}
|
|
8331
8488
|
.ina-password-input__input::placeholder {
|
|
8332
|
-
color: var(--ina-content-tertiary);
|
|
8489
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8333
8490
|
}
|
|
8334
8491
|
.ina-password-input__input:disabled {
|
|
8335
8492
|
cursor: not-allowed;
|
|
@@ -8349,12 +8506,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
8349
8506
|
border: none;
|
|
8350
8507
|
background: transparent;
|
|
8351
8508
|
cursor: pointer;
|
|
8352
|
-
border-radius: var(--ina-radius-base);
|
|
8353
|
-
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);
|
|
8354
8511
|
display: flex;
|
|
8355
8512
|
align-items: center;
|
|
8356
8513
|
justify-content: center;
|
|
8357
|
-
color: var(--ina-content-dark-secondary);
|
|
8514
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
8358
8515
|
}
|
|
8359
8516
|
.ina-password-input__action-button:hover:not(:disabled) {
|
|
8360
8517
|
color: var(--ina-content-secondary);
|
|
@@ -8400,10 +8557,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
8400
8557
|
}
|
|
8401
8558
|
/* Character count */
|
|
8402
8559
|
.ina-password-input__character-count {
|
|
8403
|
-
color: var(--ina-content-secondary);
|
|
8404
|
-
font-size: var(--ina-font-xs);
|
|
8405
|
-
font-weight: var(--ina-font-medium);
|
|
8406
|
-
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);
|
|
8407
8564
|
}
|
|
8408
8565
|
.ina-password-input__character-count--warning {
|
|
8409
8566
|
color: var(--ina-warning-500);
|
|
@@ -8468,11 +8625,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
8468
8625
|
}
|
|
8469
8626
|
.ina-password-input__wrapper--disabled
|
|
8470
8627
|
> .ina-password-input__input::-moz-placeholder {
|
|
8471
|
-
color: var(--ina-content-tertiary) !important;
|
|
8628
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8472
8629
|
}
|
|
8473
8630
|
.ina-password-input__wrapper--disabled
|
|
8474
8631
|
> .ina-password-input__input::placeholder {
|
|
8475
|
-
color: var(--ina-content-tertiary) !important;
|
|
8632
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8476
8633
|
}
|
|
8477
8634
|
.ina-password-input__wrapper--disabled .ina-password-input__input {
|
|
8478
8635
|
cursor: not-allowed;
|
|
@@ -8493,15 +8650,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
8493
8650
|
/* Focus styles - Sesuai design Figma */
|
|
8494
8651
|
.ina-password-input__wrapper:focus-within {
|
|
8495
8652
|
box-shadow:
|
|
8496
|
-
0 0 0
|
|
8497
|
-
0 0 0
|
|
8653
|
+
0 0 0 2px #fff,
|
|
8654
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
8498
8655
|
outline: none;
|
|
8499
|
-
background-color: var(--ina-background-primary);
|
|
8500
|
-
border-color: var(--ina-content-primary);
|
|
8656
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
8657
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8501
8658
|
}
|
|
8502
8659
|
/* Hover styles - Sesuai design Figma */
|
|
8503
8660
|
.ina-password-input__wrapper:hover {
|
|
8504
|
-
background-color: var(--ina-neutral-50);
|
|
8661
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
8505
8662
|
}
|
|
8506
8663
|
/* Strength indicator */
|
|
8507
8664
|
.ina-password-input__strength-indicator {
|
|
@@ -8656,25 +8813,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
8656
8813
|
}
|
|
8657
8814
|
/* Label */
|
|
8658
8815
|
.ina-phone-input__label {
|
|
8659
|
-
font-size: var(--ina-font-sm);
|
|
8660
|
-
font-weight: var(--ina-font-medium);
|
|
8661
|
-
color: var(--ina-content-primary);
|
|
8662
|
-
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);
|
|
8663
8820
|
}
|
|
8664
8821
|
.ina-phone-input__label--required .ina-phone-input__asterisk {
|
|
8665
|
-
color: var(--ina-error-500);
|
|
8666
|
-
margin-left: var(--ina-spacing-1);
|
|
8822
|
+
color: var(--ina-error-500, #f02d2d);
|
|
8823
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
8667
8824
|
}
|
|
8668
8825
|
/* Input wrapper */
|
|
8669
8826
|
.ina-phone-input__wrapper {
|
|
8670
8827
|
display: flex;
|
|
8671
8828
|
align-items: center;
|
|
8672
|
-
gap: var(--ina-spacing-2);
|
|
8673
|
-
border-radius: var(--ina-radius-lg);
|
|
8674
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8675
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
8676
|
-
background-color: var(--ina-background-primary);
|
|
8677
|
-
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);
|
|
8678
8835
|
position: relative;
|
|
8679
8836
|
}
|
|
8680
8837
|
/* Size variants - match TextField */
|
|
@@ -8695,7 +8852,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
8695
8852
|
object-fit: contain;
|
|
8696
8853
|
box-shadow:
|
|
8697
8854
|
0 1px 2px 0 rgba(31, 31, 31, 0.1),
|
|
8698
|
-
0 0 0 2px var(--ina-neutral-25) !important;
|
|
8855
|
+
0 0 0 2px var(--ina-neutral-25, #ffffff) !important;
|
|
8699
8856
|
}
|
|
8700
8857
|
/* Responsive adjustments */
|
|
8701
8858
|
@media (max-width: 767px) {
|
|
@@ -8778,17 +8935,17 @@ dialog.bottom-sheet-dropdown {
|
|
|
8778
8935
|
border: none;
|
|
8779
8936
|
cursor: pointer;
|
|
8780
8937
|
padding: 0;
|
|
8781
|
-
color: var(--ina-content-primary);
|
|
8782
|
-
font-size: var(--ina-font-sm);
|
|
8938
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8939
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8783
8940
|
height: 100%;
|
|
8784
8941
|
}
|
|
8785
8942
|
.ina-phone-input__country-code {
|
|
8786
|
-
font-weight: var(--ina-font-medium);
|
|
8943
|
+
font-weight: var(--ina-font-medium, 500);
|
|
8787
8944
|
white-space: nowrap;
|
|
8788
8945
|
}
|
|
8789
8946
|
.ina-phone-input__country-chevron {
|
|
8790
|
-
color: var(--ina-content-secondary);
|
|
8791
|
-
transition: transform var(--ina-transition-base);
|
|
8947
|
+
color: var(--ina-content-secondary, #525252);
|
|
8948
|
+
transition: transform var(--ina-transition-base, 200ms ease-in-out);
|
|
8792
8949
|
}
|
|
8793
8950
|
.ina-phone-input__country-chevron--open {
|
|
8794
8951
|
transform: rotate(180deg);
|
|
@@ -8797,8 +8954,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8797
8954
|
.ina-phone-input__divider {
|
|
8798
8955
|
width: 1px;
|
|
8799
8956
|
height: 20px;
|
|
8800
|
-
background-color: var(--ina-stroke-primary);
|
|
8801
|
-
margin-right: var(--ina-spacing-2);
|
|
8957
|
+
background-color: var(--ina-stroke-primary, #e5e5e5);
|
|
8958
|
+
margin-right: var(--ina-spacing-2, 0.5rem);
|
|
8802
8959
|
flex-shrink: 0;
|
|
8803
8960
|
}
|
|
8804
8961
|
/* Input field */
|
|
@@ -8807,22 +8964,22 @@ dialog.bottom-sheet-dropdown {
|
|
|
8807
8964
|
background: transparent;
|
|
8808
8965
|
border: none;
|
|
8809
8966
|
outline: none;
|
|
8810
|
-
font-size: var(--ina-font-sm);
|
|
8967
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8811
8968
|
font-family: inherit;
|
|
8812
|
-
color: var(--ina-content-primary);
|
|
8969
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8813
8970
|
min-width: 0;
|
|
8814
8971
|
}
|
|
8815
8972
|
.ina-phone-input__input::-moz-placeholder {
|
|
8816
|
-
color: var(--ina-content-tertiary);
|
|
8973
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8817
8974
|
}
|
|
8818
8975
|
.ina-phone-input__input::placeholder {
|
|
8819
|
-
color: var(--ina-content-tertiary);
|
|
8976
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8820
8977
|
}
|
|
8821
8978
|
/* Helper text / Status message */
|
|
8822
8979
|
.ina-phone-input__helper-text {
|
|
8823
|
-
font-size: var(--ina-font-xs);
|
|
8824
|
-
padding-top: var(--ina-spacing-1);
|
|
8825
|
-
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);
|
|
8826
8983
|
}
|
|
8827
8984
|
.ina-phone-input__helper-text--error {
|
|
8828
8985
|
color: var(--ina-negative-500);
|
|
@@ -8844,8 +9001,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8844
9001
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-error:focus-within {
|
|
8845
9002
|
border-color: var(--ina-negative-500);
|
|
8846
9003
|
box-shadow:
|
|
8847
|
-
0 0 0
|
|
8848
|
-
0 0 0
|
|
9004
|
+
0 0 0 2px #fff,
|
|
9005
|
+
0 0 0 3px var(--ina-negative-50) !important;
|
|
8849
9006
|
}
|
|
8850
9007
|
.ina-phone-input__wrapper--status-warning {
|
|
8851
9008
|
border-color: var(--ina-warning-500);
|
|
@@ -8853,8 +9010,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
8853
9010
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-warning:focus-within {
|
|
8854
9011
|
border-color: var(--ina-warning-500);
|
|
8855
9012
|
box-shadow:
|
|
8856
|
-
0 0 0
|
|
8857
|
-
0 0 0
|
|
9013
|
+
0 0 0 2px #fff,
|
|
9014
|
+
0 0 0 3px var(--ina-warning-50) !important;
|
|
8858
9015
|
}
|
|
8859
9016
|
.ina-phone-input__wrapper--status-success {
|
|
8860
9017
|
border-color: var(--ina-positive-600);
|
|
@@ -8862,21 +9019,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
8862
9019
|
.ina-phone-input__wrapper.ina-phone-input__wrapper--status-success:focus-within {
|
|
8863
9020
|
border-color: var(--ina-positive-600);
|
|
8864
9021
|
box-shadow:
|
|
8865
|
-
0 0 0
|
|
8866
|
-
0 0 0
|
|
9022
|
+
0 0 0 2px #fff,
|
|
9023
|
+
0 0 0 3px var(--ina-positive-50) !important;
|
|
8867
9024
|
}
|
|
8868
9025
|
/* Focus styles */
|
|
8869
9026
|
.ina-phone-input__wrapper:focus-within {
|
|
8870
9027
|
box-shadow:
|
|
8871
|
-
0 0 0
|
|
8872
|
-
0 0 0
|
|
9028
|
+
0 0 0 2px #fff,
|
|
9029
|
+
0 0 0 3px var(--ina-primary-primary);
|
|
8873
9030
|
outline: none;
|
|
8874
9031
|
background-color: var(--ina-background-primary);
|
|
8875
9032
|
border-color: var(--ina-content-primary);
|
|
8876
9033
|
}
|
|
8877
9034
|
/* Hover states */
|
|
8878
9035
|
.ina-phone-input__wrapper:hover:not(.ina-phone-input__wrapper--disabled) {
|
|
8879
|
-
background-color: var(--ina-neutral-50);
|
|
9036
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
8880
9037
|
}
|
|
8881
9038
|
/* Disabled state */
|
|
8882
9039
|
.ina-phone-input__wrapper--disabled {
|
|
@@ -8888,14 +9045,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
8888
9045
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input {
|
|
8889
9046
|
cursor: not-allowed;
|
|
8890
9047
|
color: var(
|
|
8891
|
-
--ina-content-tertiary
|
|
9048
|
+
--ina-content-tertiary,
|
|
9049
|
+
#a3a3a3
|
|
8892
9050
|
); /* Use content-tertiary for text color to act as disabled */
|
|
8893
9051
|
}
|
|
8894
9052
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input::-moz-placeholder {
|
|
8895
|
-
color: var(--ina-content-tertiary) !important;
|
|
9053
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8896
9054
|
}
|
|
8897
9055
|
.ina-phone-input__wrapper--disabled .ina-phone-input__input::placeholder {
|
|
8898
|
-
color: var(--ina-content-tertiary) !important;
|
|
9056
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
8899
9057
|
}
|
|
8900
9058
|
.ina-phone-input__wrapper--disabled .ina-phone-input__country-button {
|
|
8901
9059
|
cursor: not-allowed;
|
|
@@ -8907,10 +9065,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
8907
9065
|
top: 100%;
|
|
8908
9066
|
left: calc(-1 * var(--ina-spacing-3, 12px));
|
|
8909
9067
|
margin-top: var(--ina-spacing-3, 12px) !important;
|
|
8910
|
-
background: var(--ina-background-primary);
|
|
8911
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8912
|
-
border-radius: var(--ina-radius-lg);
|
|
8913
|
-
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
|
+
);
|
|
8914
9076
|
z-index: 100;
|
|
8915
9077
|
width: 324px; /* Or min-content depending on design */
|
|
8916
9078
|
max-height: 348px;
|
|
@@ -8920,21 +9082,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
8920
9082
|
padding: var(--ina-spacing-2);
|
|
8921
9083
|
}
|
|
8922
9084
|
.ina-phone-input__country-search {
|
|
8923
|
-
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;
|
|
8924
9086
|
}
|
|
8925
9087
|
.ina-phone-input__country-search-input {
|
|
8926
9088
|
width: 100%;
|
|
8927
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
8928
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
8929
|
-
border-radius: var(--ina-radius-md);
|
|
8930
|
-
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);
|
|
8931
9093
|
}
|
|
8932
9094
|
.ina-phone-input__country-search-input:focus {
|
|
8933
9095
|
outline: none;
|
|
8934
|
-
border-color: var(--ina-content-primary);
|
|
9096
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
8935
9097
|
box-shadow:
|
|
8936
|
-
0 0 0
|
|
8937
|
-
0 0 0
|
|
9098
|
+
0 0 0 2px #fff,
|
|
9099
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
8938
9100
|
}
|
|
8939
9101
|
.ina-phone-input__country-list {
|
|
8940
9102
|
overflow-y: auto;
|
|
@@ -8944,13 +9106,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
8944
9106
|
display: flex;
|
|
8945
9107
|
align-items: center;
|
|
8946
9108
|
width: 100%;
|
|
8947
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
9109
|
+
padding: var(--ina-spacing-2, 0.5rem) var(--ina-spacing-3, 0.75rem);
|
|
8948
9110
|
border: none;
|
|
8949
9111
|
background: none;
|
|
8950
9112
|
cursor: pointer;
|
|
8951
9113
|
text-align: left;
|
|
8952
|
-
transition: background-color var(--ina-transition-base);
|
|
8953
|
-
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);
|
|
8954
9116
|
}
|
|
8955
9117
|
.ina-phone-input__country-option:hover {
|
|
8956
9118
|
background-color: var(--ina-background-secondary, #f5f5f5);
|
|
@@ -8962,16 +9124,16 @@ dialog.bottom-sheet-dropdown {
|
|
|
8962
9124
|
}
|
|
8963
9125
|
.ina-phone-input__country-name {
|
|
8964
9126
|
flex: 1;
|
|
8965
|
-
font-size: var(--ina-font-sm);
|
|
9127
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
8966
9128
|
font-weight: 400;
|
|
8967
|
-
color: var(--ina-content-primary);
|
|
9129
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
8968
9130
|
white-space: nowrap;
|
|
8969
9131
|
overflow: hidden;
|
|
8970
9132
|
text-overflow: ellipsis;
|
|
8971
9133
|
}
|
|
8972
9134
|
.ina-phone-input__country-dial-code {
|
|
8973
|
-
font-size: var(--ina-font-sm);
|
|
8974
|
-
color: var(--ina-content-secondary);
|
|
9135
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9136
|
+
color: var(--ina-content-secondary, #525252);
|
|
8975
9137
|
}
|
|
8976
9138
|
/**
|
|
8977
9139
|
* ProgressBar Component Styles
|
|
@@ -9376,33 +9538,33 @@ dialog.bottom-sheet-dropdown {
|
|
|
9376
9538
|
/* Base container styling */
|
|
9377
9539
|
display: flex;
|
|
9378
9540
|
flex-direction: column;
|
|
9379
|
-
gap: var(--ina-spacing-2);
|
|
9541
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9380
9542
|
}
|
|
9381
9543
|
/* Label styling */
|
|
9382
9544
|
.ina-radio-input__main-label {
|
|
9383
9545
|
display: block;
|
|
9384
|
-
font-size: var(--ina-font-sm);
|
|
9385
|
-
color: var(--ina-content-color-181717);
|
|
9386
|
-
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);
|
|
9387
9549
|
}
|
|
9388
9550
|
/* Radio group container */
|
|
9389
9551
|
.ina-radio-input__group {
|
|
9390
9552
|
display: flex;
|
|
9391
9553
|
flex-direction: column;
|
|
9392
|
-
gap: var(--ina-spacing-2);
|
|
9554
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9393
9555
|
}
|
|
9394
9556
|
/* Individual radio option */
|
|
9395
9557
|
.ina-radio-input__option {
|
|
9396
9558
|
display: flex;
|
|
9397
9559
|
align-items: center;
|
|
9398
|
-
gap: var(--ina-spacing-2);
|
|
9560
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
9399
9561
|
cursor: pointer;
|
|
9400
|
-
transition: background-color var(--ina-transition-base);
|
|
9401
|
-
padding: var(--ina-spacing-2);
|
|
9402
|
-
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);
|
|
9403
9565
|
}
|
|
9404
9566
|
.ina-radio-input__option:hover {
|
|
9405
|
-
background-color: var(--ina-neutral-50);
|
|
9567
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
9406
9568
|
}
|
|
9407
9569
|
.ina-radio-input__option--disabled {
|
|
9408
9570
|
cursor: not-allowed;
|
|
@@ -9419,10 +9581,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
9419
9581
|
height: 20px;
|
|
9420
9582
|
border: 1px solid var(--ina-stroke-tertiary, #141414);
|
|
9421
9583
|
border-radius: 50%;
|
|
9422
|
-
background-color: var(--ina-background-primary,
|
|
9584
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9423
9585
|
cursor: pointer;
|
|
9424
9586
|
position: relative;
|
|
9425
|
-
transition: all var(--ina-transition-base);
|
|
9587
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
9426
9588
|
flex-shrink: 0;
|
|
9427
9589
|
}
|
|
9428
9590
|
/* Hover state - Add drop shadow */
|
|
@@ -9435,8 +9597,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9435
9597
|
.ina-radio-input__field:focus:not(:disabled) {
|
|
9436
9598
|
outline: none;
|
|
9437
9599
|
box-shadow:
|
|
9438
|
-
0 0 0
|
|
9439
|
-
0 0 0
|
|
9600
|
+
0 0 0 2px #fff,
|
|
9601
|
+
0 0 0 3px var(--ina-primary-primary, #141414) !important;
|
|
9440
9602
|
}
|
|
9441
9603
|
/* Active state - Add drop shadow */
|
|
9442
9604
|
.ina-radio-input__field:active:not(:disabled) {
|
|
@@ -9445,7 +9607,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9445
9607
|
/* Selected state */
|
|
9446
9608
|
.ina-radio-input__field:checked {
|
|
9447
9609
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9448
|
-
background-color: var(--ina-background-primary,
|
|
9610
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
9449
9611
|
}
|
|
9450
9612
|
.ina-radio-input__field:checked::after {
|
|
9451
9613
|
content: '';
|
|
@@ -9467,7 +9629,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9467
9629
|
/* Disabled states */
|
|
9468
9630
|
.ina-radio-input__field:disabled {
|
|
9469
9631
|
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9470
|
-
background-color: var(--ina-background-secondary,
|
|
9632
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
9471
9633
|
cursor: not-allowed;
|
|
9472
9634
|
opacity: 1;
|
|
9473
9635
|
filter: none;
|
|
@@ -9494,8 +9656,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9494
9656
|
}
|
|
9495
9657
|
/* Radio option label */
|
|
9496
9658
|
.ina-radio-input__option-label {
|
|
9497
|
-
font-size: var(--ina-font-sm);
|
|
9498
|
-
color: var(--ina-content-primary);
|
|
9659
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9660
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9499
9661
|
cursor: pointer;
|
|
9500
9662
|
-webkit-user-select: none;
|
|
9501
9663
|
-moz-user-select: none;
|
|
@@ -9510,7 +9672,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9510
9672
|
/* Size variants */
|
|
9511
9673
|
.ina-radio-input--size-sm .ina-radio-input__main-label,
|
|
9512
9674
|
.ina-radio-input--size-sm .ina-radio-input__option-label {
|
|
9513
|
-
font-size: var(--ina-font-xs);
|
|
9675
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9514
9676
|
}
|
|
9515
9677
|
.ina-radio-input--size-sm .ina-radio-input__field {
|
|
9516
9678
|
width: 16px;
|
|
@@ -9522,7 +9684,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
9522
9684
|
}
|
|
9523
9685
|
.ina-radio-input--size-lg .ina-radio-input__main-label,
|
|
9524
9686
|
.ina-radio-input--size-lg .ina-radio-input__option-label {
|
|
9525
|
-
font-size: var(--ina-font-base);
|
|
9687
|
+
font-size: var(--ina-font-base, 1rem);
|
|
9526
9688
|
}
|
|
9527
9689
|
.ina-radio-input--size-lg .ina-radio-input__field {
|
|
9528
9690
|
width: 24px;
|
|
@@ -9536,14 +9698,14 @@ dialog.bottom-sheet-dropdown {
|
|
|
9536
9698
|
.ina-radio-input--orientation-horizontal .ina-radio-input__group {
|
|
9537
9699
|
flex-direction: row;
|
|
9538
9700
|
flex-wrap: wrap;
|
|
9539
|
-
gap: var(--ina-spacing-4);
|
|
9701
|
+
gap: var(--ina-spacing-4, 1rem);
|
|
9540
9702
|
align-items: center;
|
|
9541
9703
|
}
|
|
9542
9704
|
/* Status variants */
|
|
9543
9705
|
.ina-radio-input__main-label--required::after {
|
|
9544
9706
|
content: '*';
|
|
9545
|
-
color: var(--ina-danger-5);
|
|
9546
|
-
margin-left: var(--ina-spacing-1);
|
|
9707
|
+
color: var(--ina-danger-5, #f02d2d);
|
|
9708
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
9547
9709
|
}
|
|
9548
9710
|
/* Focus indicators */
|
|
9549
9711
|
/* Focus indicators */
|
|
@@ -9553,13 +9715,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
9553
9715
|
}
|
|
9554
9716
|
/* Error state */
|
|
9555
9717
|
.ina-radio-input--error .ina-radio-input__main-label {
|
|
9556
|
-
color: var(--ina-negative-500);
|
|
9718
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9557
9719
|
}
|
|
9558
9720
|
.ina-radio-input--error .ina-radio-input__field {
|
|
9559
|
-
border-color: var(--ina-negative-500);
|
|
9721
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
9560
9722
|
}
|
|
9561
9723
|
.ina-radio-input--error .ina-radio-input__field:focus-visible {
|
|
9562
|
-
outline-color: var(--ina-negative-500);
|
|
9724
|
+
outline-color: var(--ina-negative-500, #f02d2d);
|
|
9563
9725
|
}
|
|
9564
9726
|
/* Loading state */
|
|
9565
9727
|
.ina-radio-input--loading .ina-radio-input__option {
|
|
@@ -9570,12 +9732,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
9570
9732
|
}
|
|
9571
9733
|
/* Help text */
|
|
9572
9734
|
.ina-radio-input__help-text {
|
|
9573
|
-
font-size: var(--ina-font-xs);
|
|
9574
|
-
color: var(--ina-content-secondary);
|
|
9575
|
-
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);
|
|
9576
9738
|
}
|
|
9577
9739
|
.ina-radio-input__help-text--error {
|
|
9578
|
-
color: var(--ina-negative-500);
|
|
9740
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9579
9741
|
}
|
|
9580
9742
|
/* Responsive adjustments */
|
|
9581
9743
|
@media (max-width: 640px) {
|
|
@@ -9656,27 +9818,27 @@ dialog.bottom-sheet-dropdown {
|
|
|
9656
9818
|
/* Base container styling */
|
|
9657
9819
|
position: relative;
|
|
9658
9820
|
display: inline-block;
|
|
9659
|
-
font-size: var(--ina-font-xs);
|
|
9821
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9660
9822
|
}
|
|
9661
9823
|
.ina-select-dropdown:focus-visible {
|
|
9662
9824
|
outline: none;
|
|
9663
9825
|
}
|
|
9664
9826
|
@media (min-width: 768px) {
|
|
9665
9827
|
.ina-select-dropdown {
|
|
9666
|
-
font-size: var(--ina-font-sm);
|
|
9828
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9667
9829
|
}
|
|
9668
9830
|
}
|
|
9669
9831
|
/* Label Styles */
|
|
9670
9832
|
.ina-select-dropdown__label {
|
|
9671
|
-
font-size: var(--ina-font-sm);
|
|
9672
|
-
font-weight: var(--ina-font-medium);
|
|
9673
|
-
color: var(--ina-content-primary);
|
|
9674
|
-
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);
|
|
9675
9837
|
display: block;
|
|
9676
9838
|
}
|
|
9677
9839
|
.ina-select-dropdown__required {
|
|
9678
|
-
color: var(--ina-negative-500);
|
|
9679
|
-
margin-left: var(--ina-spacing-1);
|
|
9840
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
9841
|
+
margin-left: var(--ina-spacing-1, 0.25rem);
|
|
9680
9842
|
}
|
|
9681
9843
|
/* Trigger button */
|
|
9682
9844
|
.ina-select-dropdown__trigger {
|
|
@@ -9684,15 +9846,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
9684
9846
|
display: flex;
|
|
9685
9847
|
align-items: center;
|
|
9686
9848
|
justify-content: space-between;
|
|
9687
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
9688
|
-
border-radius: var(--ina-radius-lg);
|
|
9689
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-4);
|
|
9690
|
-
background-color: var(--ina-background-primary);
|
|
9691
|
-
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);
|
|
9692
9854
|
cursor: pointer;
|
|
9693
9855
|
font-size: inherit;
|
|
9694
9856
|
outline: none;
|
|
9695
|
-
transition: all var(--ina-transition-base);
|
|
9857
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
9696
9858
|
position: relative;
|
|
9697
9859
|
}
|
|
9698
9860
|
/* NEW: Trigger Input for Search */
|
|
@@ -9709,10 +9871,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
9709
9871
|
cursor: text;
|
|
9710
9872
|
}
|
|
9711
9873
|
.ina-select-dropdown__trigger-input::-moz-placeholder {
|
|
9712
|
-
color: var(--ina-content-tertiary);
|
|
9874
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9713
9875
|
}
|
|
9714
9876
|
.ina-select-dropdown__trigger-input::placeholder {
|
|
9715
|
-
color: var(--ina-content-tertiary);
|
|
9877
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9716
9878
|
}
|
|
9717
9879
|
.ina-select-dropdown__trigger-input:disabled {
|
|
9718
9880
|
cursor: not-allowed;
|
|
@@ -9745,52 +9907,52 @@ dialog.bottom-sheet-dropdown {
|
|
|
9745
9907
|
}
|
|
9746
9908
|
}
|
|
9747
9909
|
.ina-select-dropdown__trigger:hover {
|
|
9748
|
-
background-color: var(--ina-background-secondary);
|
|
9910
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
9749
9911
|
}
|
|
9750
9912
|
/* Focus state for trigger when it acts as container */
|
|
9751
9913
|
.ina-select-dropdown__trigger:focus-within {
|
|
9752
9914
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9753
|
-
background: var(--ina-background-primary, #
|
|
9915
|
+
background: var(--ina-background-primary, #ffffff);
|
|
9754
9916
|
box-shadow:
|
|
9755
|
-
0 0 0
|
|
9756
|
-
0 0 0
|
|
9917
|
+
0 0 0 2px #fff,
|
|
9918
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
9757
9919
|
}
|
|
9758
9920
|
/* Status variants */
|
|
9759
9921
|
.ina-select-dropdown__trigger--status-neutral {
|
|
9760
|
-
border-color: var(--ina-stroke-primary);
|
|
9922
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9761
9923
|
}
|
|
9762
9924
|
.ina-select-dropdown__trigger--status-neutral:focus-within {
|
|
9763
|
-
border-color: var(--ina-stroke-tertiary);
|
|
9925
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
9764
9926
|
box-shadow:
|
|
9765
|
-
0 0 0
|
|
9766
|
-
0 0 0
|
|
9927
|
+
0 0 0 2px #fff,
|
|
9928
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
9767
9929
|
}
|
|
9768
9930
|
.ina-select-dropdown__trigger--status-error {
|
|
9769
|
-
border-color: var(--ina-negative-500);
|
|
9931
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
9770
9932
|
}
|
|
9771
9933
|
.ina-select-dropdown__trigger--status-error:focus-within {
|
|
9772
|
-
border-color: var(--ina-negative-600);
|
|
9934
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
9773
9935
|
box-shadow:
|
|
9774
|
-
0 0 0
|
|
9775
|
-
0 0 0
|
|
9936
|
+
0 0 0 2px #fff,
|
|
9937
|
+
0 0 0 3px var(--ina-negative-50, #fffafa);
|
|
9776
9938
|
}
|
|
9777
9939
|
.ina-select-dropdown__trigger--status-warning {
|
|
9778
|
-
border-color: var(--ina-warning-500);
|
|
9940
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
9779
9941
|
}
|
|
9780
9942
|
.ina-select-dropdown__trigger--status-warning:focus-within {
|
|
9781
|
-
border-color: var(--ina-warning-600);
|
|
9943
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
9782
9944
|
box-shadow:
|
|
9783
|
-
0 0 0
|
|
9784
|
-
0 0 0
|
|
9945
|
+
0 0 0 2px #fff,
|
|
9946
|
+
0 0 0 3px var(--ina-warning-50, #fffefa);
|
|
9785
9947
|
}
|
|
9786
9948
|
.ina-select-dropdown__trigger--status-success {
|
|
9787
|
-
border-color: var(--ina-positive-500);
|
|
9949
|
+
border-color: var(--ina-positive-500, #3cc14e);
|
|
9788
9950
|
}
|
|
9789
9951
|
.ina-select-dropdown__trigger--status-success:focus-within {
|
|
9790
|
-
border-color: var(--ina-positive-600);
|
|
9952
|
+
border-color: var(--ina-positive-600, #288034);
|
|
9791
9953
|
box-shadow:
|
|
9792
|
-
0 0 0
|
|
9793
|
-
0 0 0
|
|
9954
|
+
0 0 0 2px #fff,
|
|
9955
|
+
0 0 0 3px var(--ina-positive-50, #fafffa);
|
|
9794
9956
|
}
|
|
9795
9957
|
.ina-select-dropdown__trigger--disabled {
|
|
9796
9958
|
background-color: transparent;
|
|
@@ -9816,23 +9978,23 @@ dialog.bottom-sheet-dropdown {
|
|
|
9816
9978
|
white-space: nowrap;
|
|
9817
9979
|
}
|
|
9818
9980
|
.ina-select-dropdown__trigger-text--placeholder {
|
|
9819
|
-
color: var(--ina-content-tertiary);
|
|
9981
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
9820
9982
|
}
|
|
9821
9983
|
.ina-select-dropdown__trigger-text--selected {
|
|
9822
|
-
color: var(--ina-content-primary);
|
|
9984
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9823
9985
|
}
|
|
9824
9986
|
.ina-select-dropdown__trigger-text--disabled {
|
|
9825
|
-
color: var(--ina-neutral-400);
|
|
9987
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
9826
9988
|
}
|
|
9827
9989
|
/* Trigger icon (chevron) */
|
|
9828
9990
|
.ina-select-dropdown__trigger-icon {
|
|
9829
9991
|
flex-shrink: 0;
|
|
9830
|
-
margin-left: var(--ina-spacing-2);
|
|
9831
|
-
color: var(--ina-content-secondary);
|
|
9832
|
-
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);
|
|
9833
9995
|
}
|
|
9834
9996
|
.ina-select-dropdown__trigger-icon--disabled {
|
|
9835
|
-
color: var(--ina-neutral-400);
|
|
9997
|
+
color: var(--ina-neutral-400, #a3a3a3);
|
|
9836
9998
|
}
|
|
9837
9999
|
/* Panel container */
|
|
9838
10000
|
.ina-select-dropdown__panel {
|
|
@@ -9842,12 +10004,13 @@ dialog.bottom-sheet-dropdown {
|
|
|
9842
10004
|
left: 0;
|
|
9843
10005
|
width: 100%; /* Match trigger width by default */
|
|
9844
10006
|
min-width: 100%;
|
|
9845
|
-
margin-top: var(--ina-spacing-1);
|
|
10007
|
+
margin-top: var(--ina-spacing-1, 0.25rem);
|
|
9846
10008
|
background-color: var(
|
|
9847
|
-
--ina-background-primary
|
|
10009
|
+
--ina-background-primary,
|
|
10010
|
+
#ffffff
|
|
9848
10011
|
) !important; /* Ensure solid background */
|
|
9849
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
9850
|
-
border-radius: var(--ina-radius-lg);
|
|
10012
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
10013
|
+
border-radius: var(--ina-radius-lg, 0.5rem);
|
|
9851
10014
|
box-shadow:
|
|
9852
10015
|
0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
9853
10016
|
0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
@@ -9871,28 +10034,28 @@ dialog.bottom-sheet-dropdown {
|
|
|
9871
10034
|
}
|
|
9872
10035
|
/* Search input section */
|
|
9873
10036
|
.ina-select-dropdown__search {
|
|
9874
|
-
padding: var(--ina-spacing-2) 12px;
|
|
9875
|
-
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);
|
|
9876
10039
|
}
|
|
9877
10040
|
.ina-select-dropdown__search-input {
|
|
9878
10041
|
width: 100%;
|
|
9879
10042
|
border: none;
|
|
9880
|
-
font-size: var(--ina-font-sm);
|
|
10043
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
9881
10044
|
background-color: transparent;
|
|
9882
|
-
color: var(--ina-content-primary);
|
|
10045
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9883
10046
|
outline: none;
|
|
9884
|
-
transition: border-color var(--ina-transition-base);
|
|
10047
|
+
transition: border-color var(--ina-transition-base, 200ms ease-in-out);
|
|
9885
10048
|
}
|
|
9886
10049
|
.ina-select-dropdown__search-input::-moz-placeholder {
|
|
9887
|
-
color: var(--ina-content-tertiary);
|
|
9888
|
-
font-size: var(--ina-font-xs);
|
|
10050
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
10051
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9889
10052
|
}
|
|
9890
10053
|
.ina-select-dropdown__search-input::placeholder {
|
|
9891
|
-
color: var(--ina-content-tertiary);
|
|
9892
|
-
font-size: var(--ina-font-xs);
|
|
10054
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
10055
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
9893
10056
|
}
|
|
9894
10057
|
.ina-select-dropdown__search-input:focus {
|
|
9895
|
-
border-bottom-color: var(--ina-stroke-primary);
|
|
10058
|
+
border-bottom-color: var(--ina-stroke-primary, #e5e5e5);
|
|
9896
10059
|
}
|
|
9897
10060
|
.ina-select-dropdown__search-input--disabled {
|
|
9898
10061
|
background-color: transparent;
|
|
@@ -9902,48 +10065,48 @@ dialog.bottom-sheet-dropdown {
|
|
|
9902
10065
|
}
|
|
9903
10066
|
/* Selected preview section */
|
|
9904
10067
|
.ina-select-dropdown__preview {
|
|
9905
|
-
padding: var(--ina-spacing-3);
|
|
9906
|
-
border-bottom: 1px solid var(--ina-stroke-primary);
|
|
9907
|
-
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);
|
|
9908
10071
|
}
|
|
9909
10072
|
.ina-select-dropdown__preview-label {
|
|
9910
|
-
font-size: var(--ina-font-xs);
|
|
9911
|
-
color: var(--ina-content-secondary);
|
|
9912
|
-
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);
|
|
9913
10076
|
}
|
|
9914
10077
|
.ina-select-dropdown__preview-content {
|
|
9915
10078
|
display: flex;
|
|
9916
10079
|
flex-wrap: wrap;
|
|
9917
|
-
gap: var(--ina-spacing-1);
|
|
10080
|
+
gap: var(--ina-spacing-1, 0.25rem);
|
|
9918
10081
|
}
|
|
9919
10082
|
.ina-select-dropdown__preview-item {
|
|
9920
10083
|
display: inline-flex;
|
|
9921
10084
|
align-items: center;
|
|
9922
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
9923
|
-
font-size: var(--ina-font-xs);
|
|
9924
|
-
border-radius: var(--ina-radius-md);
|
|
9925
|
-
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);
|
|
9926
10089
|
}
|
|
9927
10090
|
.ina-select-dropdown__preview-item--multiple,
|
|
9928
10091
|
.ina-select-dropdown__preview-item--single {
|
|
9929
|
-
background-color: var(--ina-background-secondary);
|
|
9930
|
-
color: var(--ina-content-primary);
|
|
10092
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
10093
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
9931
10094
|
}
|
|
9932
10095
|
.ina-select-dropdown__preview-item-text {
|
|
9933
|
-
margin-right: var(--ina-spacing-1);
|
|
10096
|
+
margin-right: var(--ina-spacing-1, 0.25rem);
|
|
9934
10097
|
}
|
|
9935
10098
|
.ina-select-dropdown__preview-item-count {
|
|
9936
|
-
font-weight: var(--ina-font-medium);
|
|
10099
|
+
font-weight: var(--ina-font-medium, 500);
|
|
9937
10100
|
}
|
|
9938
10101
|
.ina-select-dropdown__preview-more {
|
|
9939
10102
|
display: inline-flex;
|
|
9940
10103
|
align-items: center;
|
|
9941
|
-
padding: var(--ina-spacing-1) var(--ina-spacing-2);
|
|
10104
|
+
padding: var(--ina-spacing-1, 0.25rem) var(--ina-spacing-2, 0.5rem);
|
|
9942
10105
|
|
|
9943
|
-
font-size: var(--ina-font-xs);
|
|
9944
|
-
background-color: var(--ina-neutral-100);
|
|
9945
|
-
color: var(--ina-neutral-600);
|
|
9946
|
-
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);
|
|
9947
10110
|
}
|
|
9948
10111
|
/* Remove button */
|
|
9949
10112
|
.ina-select-dropdown__preview-remove {
|
|
@@ -9952,8 +10115,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
9952
10115
|
border: none;
|
|
9953
10116
|
background: none;
|
|
9954
10117
|
cursor: pointer;
|
|
9955
|
-
border-radius: var(--ina-radius-full);
|
|
9956
|
-
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);
|
|
9957
10120
|
color: inherit;
|
|
9958
10121
|
display: flex;
|
|
9959
10122
|
align-items: center;
|
|
@@ -9969,45 +10132,46 @@ dialog.bottom-sheet-dropdown {
|
|
|
9969
10132
|
}
|
|
9970
10133
|
.ina-select-dropdown__preview-remove--multiple:hover,
|
|
9971
10134
|
.ina-select-dropdown__preview-remove--single:hover {
|
|
9972
|
-
background-color: var(--ina-background-tertiary);
|
|
10135
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
9973
10136
|
}
|
|
9974
10137
|
/* Options container */
|
|
9975
10138
|
.ina-select-dropdown__options {
|
|
9976
10139
|
overflow-y: auto;
|
|
9977
10140
|
scrollbar-width: thin;
|
|
9978
|
-
scrollbar-color: var(--ina-neutral-400
|
|
9979
|
-
|
|
10141
|
+
scrollbar-color: var(--ina-neutral-400, #a3a3a3)
|
|
10142
|
+
var(--ina-neutral-100, #f5f5f5);
|
|
10143
|
+
padding: var(--ina-spacing-1, 0.25rem);
|
|
9980
10144
|
}
|
|
9981
10145
|
.ina-select-dropdown__options::-webkit-scrollbar {
|
|
9982
10146
|
width: 6px;
|
|
9983
10147
|
}
|
|
9984
10148
|
.ina-select-dropdown__options::-webkit-scrollbar-track {
|
|
9985
|
-
background: var(--ina-neutral-100);
|
|
10149
|
+
background: var(--ina-neutral-100, #f5f5f5);
|
|
9986
10150
|
}
|
|
9987
10151
|
.ina-select-dropdown__options::-webkit-scrollbar-thumb {
|
|
9988
|
-
background-color: var(--ina-neutral-400);
|
|
9989
|
-
border-radius: var(--ina-radius-full);
|
|
10152
|
+
background-color: var(--ina-neutral-400, #a3a3a3);
|
|
10153
|
+
border-radius: var(--ina-radius-full, 9999px);
|
|
9990
10154
|
}
|
|
9991
10155
|
.ina-select-dropdown__options::-webkit-scrollbar-thumb:hover {
|
|
9992
|
-
background-color: var(--ina-neutral-500);
|
|
10156
|
+
background-color: var(--ina-neutral-500, #737373);
|
|
9993
10157
|
}
|
|
9994
10158
|
/* Individual option */
|
|
9995
10159
|
.ina-select-dropdown__option {
|
|
9996
10160
|
width: 100%;
|
|
9997
10161
|
display: flex;
|
|
9998
10162
|
align-items: center;
|
|
9999
|
-
gap: var(--ina-spacing-3);
|
|
10163
|
+
gap: var(--ina-spacing-3, 0.75rem);
|
|
10000
10164
|
padding: 10px 12px;
|
|
10001
10165
|
text-align: left;
|
|
10002
10166
|
background: none;
|
|
10003
10167
|
border: none;
|
|
10004
10168
|
cursor: pointer;
|
|
10005
10169
|
outline: none;
|
|
10006
|
-
transition: background-color var(--ina-transition-base);
|
|
10007
|
-
border-radius: var(--ina-radius-base);
|
|
10008
|
-
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);
|
|
10009
10173
|
min-height: 40px;
|
|
10010
|
-
font-size: var(--ina-font-xs);
|
|
10174
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10011
10175
|
}
|
|
10012
10176
|
@media (min-width: 768px) {
|
|
10013
10177
|
.ina-select-dropdown__option {
|
|
@@ -10015,25 +10179,25 @@ dialog.bottom-sheet-dropdown {
|
|
|
10015
10179
|
}
|
|
10016
10180
|
}
|
|
10017
10181
|
.ina-select-dropdown__option:hover {
|
|
10018
|
-
background-color: var(--ina-background-tertiary);
|
|
10182
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10019
10183
|
}
|
|
10020
10184
|
.ina-select-dropdown__option:focus-visible {
|
|
10021
|
-
background-color: var(--ina-background-tertiary);
|
|
10022
|
-
outline: 2px solid var(--ina-content-tertiary);
|
|
10185
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10186
|
+
outline: 2px solid var(--ina-content-tertiary, #a3a3a3);
|
|
10023
10187
|
outline-offset: -2px;
|
|
10024
10188
|
}
|
|
10025
10189
|
/* Selected state untuk multiple mode */
|
|
10026
10190
|
.ina-select-dropdown__option--selected-multiple:not(:disabled),
|
|
10027
10191
|
.ina-select-dropdown__option--selected-single:not(:disabled) {
|
|
10028
|
-
background-color: var(--ina-background-secondary);
|
|
10192
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
10029
10193
|
}
|
|
10030
10194
|
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover,
|
|
10031
10195
|
.ina-select-dropdown__option--selected-single:not(:disabled):hover,
|
|
10032
10196
|
.ina-select-dropdown__option--selected-multiple:not(:disabled):hover {
|
|
10033
|
-
background-color: var(--ina-background-tertiary);
|
|
10197
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10034
10198
|
}
|
|
10035
10199
|
.ina-select-dropdown__option--disabled {
|
|
10036
|
-
color: var(--ina-content-tertiary);
|
|
10200
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10037
10201
|
cursor: not-allowed;
|
|
10038
10202
|
}
|
|
10039
10203
|
.ina-select-dropdown__option--disabled:hover {
|
|
@@ -10052,31 +10216,31 @@ dialog.bottom-sheet-dropdown {
|
|
|
10052
10216
|
width: 16px;
|
|
10053
10217
|
height: 16px;
|
|
10054
10218
|
flex-shrink: 0;
|
|
10055
|
-
border: 1px solid var(--ina-stroke-secondary);
|
|
10056
|
-
border-radius: var(--ina-radius-base);
|
|
10057
|
-
background-color: var(--ina-neutral-25);
|
|
10058
|
-
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);
|
|
10059
10223
|
display: flex;
|
|
10060
10224
|
align-items: center;
|
|
10061
10225
|
justify-content: center;
|
|
10062
10226
|
}
|
|
10063
10227
|
.ina-select-dropdown__option-checkbox--checked {
|
|
10064
|
-
background-color: var(--ina-content-primary);
|
|
10065
|
-
border-color: var(--ina-stroke-primary);
|
|
10066
|
-
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);
|
|
10067
10231
|
}
|
|
10068
10232
|
.ina-select-dropdown__option-radio {
|
|
10069
10233
|
width: 16px;
|
|
10070
10234
|
height: 16px;
|
|
10071
10235
|
flex-shrink: 0;
|
|
10072
|
-
border: 1px solid var(--ina-content-primary);
|
|
10236
|
+
border: 1px solid var(--ina-content-primary, #1f1f1f);
|
|
10073
10237
|
border-radius: 50%;
|
|
10074
10238
|
background-color: transparent;
|
|
10075
|
-
transition: all var(--ina-transition-base);
|
|
10239
|
+
transition: all var(--ina-transition-base, 200ms ease-in-out);
|
|
10076
10240
|
position: relative;
|
|
10077
10241
|
}
|
|
10078
10242
|
.ina-select-dropdown__option-radio--checked {
|
|
10079
|
-
border-color: var(--ina-content-primary);
|
|
10243
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
10080
10244
|
}
|
|
10081
10245
|
.ina-select-dropdown__option-radio-dot {
|
|
10082
10246
|
position: absolute;
|
|
@@ -10085,7 +10249,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
10085
10249
|
transform: translate(-50%, -50%);
|
|
10086
10250
|
width: 8px;
|
|
10087
10251
|
height: 8px;
|
|
10088
|
-
background-color: var(--ina-content-primary);
|
|
10252
|
+
background-color: var(--ina-content-primary, #1f1f1f);
|
|
10089
10253
|
border-radius: 50%;
|
|
10090
10254
|
}
|
|
10091
10255
|
/* Option content */
|
|
@@ -10100,51 +10264,51 @@ dialog.bottom-sheet-dropdown {
|
|
|
10100
10264
|
white-space: nowrap;
|
|
10101
10265
|
overflow: hidden;
|
|
10102
10266
|
text-overflow: ellipsis;
|
|
10103
|
-
line-height: var(--ina-line-height-normal);
|
|
10267
|
+
line-height: var(--ina-line-height-normal, 1.5);
|
|
10104
10268
|
}
|
|
10105
10269
|
/* Option check indicator (right side) */
|
|
10106
10270
|
.ina-select-dropdown__option-check-indicator {
|
|
10107
10271
|
flex-shrink: 0;
|
|
10108
|
-
color: var(--ina-content-primary);
|
|
10272
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10109
10273
|
display: flex;
|
|
10110
10274
|
align-items: center;
|
|
10111
10275
|
justify-content: center;
|
|
10112
10276
|
}
|
|
10113
10277
|
.ina-select-dropdown__option-check-icon {
|
|
10114
|
-
color: var(--ina-content-primary);
|
|
10278
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
10115
10279
|
}
|
|
10116
10280
|
/* Empty state */
|
|
10117
10281
|
.ina-select-dropdown__empty {
|
|
10118
|
-
padding: var(--ina-spacing-3);
|
|
10282
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10119
10283
|
text-align: center;
|
|
10120
|
-
color: var(--ina-content-secondary);
|
|
10121
|
-
font-size: var(--ina-font-sm);
|
|
10284
|
+
color: var(--ina-content-secondary, #525252);
|
|
10285
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10122
10286
|
font-style: italic;
|
|
10123
10287
|
}
|
|
10124
10288
|
/* Load more button */
|
|
10125
10289
|
.ina-select-dropdown__load-more {
|
|
10126
|
-
padding: var(--ina-spacing-3);
|
|
10127
|
-
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);
|
|
10128
10292
|
}
|
|
10129
10293
|
.ina-select-dropdown__load-more-button {
|
|
10130
10294
|
width: 100%;
|
|
10131
10295
|
display: flex;
|
|
10132
10296
|
align-items: center;
|
|
10133
10297
|
justify-content: center;
|
|
10134
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
10135
|
-
font-size: var(--ina-font-sm);
|
|
10136
|
-
color: var(--ina-content-primary);
|
|
10137
|
-
background-color: var(--ina-background-secondary);
|
|
10138
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
10139
|
-
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);
|
|
10140
10304
|
cursor: pointer;
|
|
10141
10305
|
transition:
|
|
10142
|
-
background-color var(--ina-transition-base),
|
|
10143
|
-
border-color var(--ina-transition-base),
|
|
10144
|
-
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);
|
|
10145
10309
|
}
|
|
10146
10310
|
.ina-select-dropdown__load-more-button:hover {
|
|
10147
|
-
background-color: var(--ina-background-tertiary);
|
|
10311
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
10148
10312
|
}
|
|
10149
10313
|
.ina-select-dropdown__load-more-button:focus-visible {
|
|
10150
10314
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
@@ -10154,22 +10318,22 @@ dialog.bottom-sheet-dropdown {
|
|
|
10154
10318
|
cursor: not-allowed;
|
|
10155
10319
|
}
|
|
10156
10320
|
.ina-select-dropdown__load-more-button:disabled:hover {
|
|
10157
|
-
background-color: var(--ina-background-tertiary);
|
|
10158
|
-
color: var(--ina-content-tertiary);
|
|
10159
|
-
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);
|
|
10160
10324
|
}
|
|
10161
10325
|
/* Loading state */
|
|
10162
10326
|
.ina-select-dropdown__loading {
|
|
10163
|
-
padding: var(--ina-spacing-3);
|
|
10164
|
-
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);
|
|
10165
10329
|
display: flex;
|
|
10166
10330
|
align-items: center;
|
|
10167
10331
|
justify-content: center;
|
|
10168
|
-
gap: var(--ina-spacing-2);
|
|
10332
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
10169
10333
|
}
|
|
10170
10334
|
.ina-select-dropdown__loading-spinner {
|
|
10171
10335
|
animation: spin 1s linear infinite;
|
|
10172
|
-
color: var(--ina-content-secondary);
|
|
10336
|
+
color: var(--ina-content-secondary, #525252);
|
|
10173
10337
|
}
|
|
10174
10338
|
@keyframes spin {
|
|
10175
10339
|
to {
|
|
@@ -10177,8 +10341,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
10177
10341
|
}
|
|
10178
10342
|
}
|
|
10179
10343
|
.ina-select-dropdown__loading-text {
|
|
10180
|
-
font-size: var(--ina-font-sm);
|
|
10181
|
-
color: var(--ina-content-secondary);
|
|
10344
|
+
font-size: var(--ina-font-sm, 0.875rem);
|
|
10345
|
+
color: var(--ina-content-secondary, #525252);
|
|
10182
10346
|
}
|
|
10183
10347
|
/* Size variants - Font size and padding */
|
|
10184
10348
|
/* Small size */
|
|
@@ -10207,13 +10371,6 @@ dialog.bottom-sheet-dropdown {
|
|
|
10207
10371
|
.ina-select-dropdown--size-sm .ina-select-dropdown__search-input {
|
|
10208
10372
|
font-size: 12px;
|
|
10209
10373
|
}
|
|
10210
|
-
/* Medium size (default) - keep existing font-size 14px */
|
|
10211
|
-
.ina-select-dropdown--size-md .ina-select-dropdown__trigger {
|
|
10212
|
-
/* padding sudah ada di base style */
|
|
10213
|
-
}
|
|
10214
|
-
.ina-select-dropdown--size-md .ina-select-dropdown__option {
|
|
10215
|
-
/* padding sudah ada di base style */
|
|
10216
|
-
}
|
|
10217
10374
|
/* Large size - keep existing font-size 14px */
|
|
10218
10375
|
.ina-select-dropdown--size-lg .ina-select-dropdown__trigger {
|
|
10219
10376
|
padding: var(--ina-spacing-3) var(--ina-spacing-4);
|
|
@@ -10228,11 +10385,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
10228
10385
|
@media (max-width: 639px) {
|
|
10229
10386
|
.ina-select-dropdown__option {
|
|
10230
10387
|
min-height: 48px;
|
|
10231
|
-
padding: var(--ina-spacing-3);
|
|
10388
|
+
padding: var(--ina-spacing-3, 0.75rem);
|
|
10232
10389
|
}
|
|
10233
10390
|
|
|
10234
10391
|
.ina-select-dropdown__preview-content {
|
|
10235
|
-
gap: var(--ina-spacing-2);
|
|
10392
|
+
gap: var(--ina-spacing-2, 0.5rem);
|
|
10236
10393
|
}
|
|
10237
10394
|
|
|
10238
10395
|
.ina-select-dropdown__trigger--size-sm {
|
|
@@ -10247,18 +10404,18 @@ dialog.bottom-sheet-dropdown {
|
|
|
10247
10404
|
height: 40px !important;
|
|
10248
10405
|
}
|
|
10249
10406
|
.ina-select-dropdown__load-more-button {
|
|
10250
|
-
font-size: var(--ina-font-xs);
|
|
10407
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
10251
10408
|
}
|
|
10252
10409
|
|
|
10253
10410
|
.ina-select-dropdown__label,
|
|
10254
10411
|
.ina-select-dropdown__trigger,
|
|
10255
10412
|
.ina-select-dropdown__trigger-text {
|
|
10256
|
-
font-size: var(--ina-font-xs) !important;
|
|
10413
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
10257
10414
|
}
|
|
10258
10415
|
}
|
|
10259
10416
|
/* Accessibility improvements */
|
|
10260
10417
|
.ina-select-dropdown__trigger:focus-visible {
|
|
10261
|
-
outline: 2px solid var(--ina-content-primary);
|
|
10418
|
+
outline: 2px solid var(--ina-content-primary, #1f1f1f);
|
|
10262
10419
|
outline-offset: 2px;
|
|
10263
10420
|
}
|
|
10264
10421
|
/* High contrast mode */
|
|
@@ -10290,7 +10447,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
10290
10447
|
padding: 8px 12px;
|
|
10291
10448
|
font-size: 12px;
|
|
10292
10449
|
font-weight: 600;
|
|
10293
|
-
color: var(--ina-content-tertiary);
|
|
10450
|
+
color: var(--ina-content-tertiary, #a3a3a3);
|
|
10294
10451
|
line-height: 1.33; /* 16px / 12px */
|
|
10295
10452
|
pointer-events: none;
|
|
10296
10453
|
}
|
|
@@ -12707,21 +12864,21 @@ dialog.bottom-sheet-dropdown {
|
|
|
12707
12864
|
}
|
|
12708
12865
|
/* Label */
|
|
12709
12866
|
.ina-text-area__label {
|
|
12710
|
-
font-size: var(--ina-font-sm);
|
|
12711
|
-
font-weight: var(--ina-font-medium);
|
|
12712
|
-
color: var(--ina-content-primary);
|
|
12713
|
-
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);
|
|
12714
12871
|
}
|
|
12715
12872
|
/* Input wrapper */
|
|
12716
12873
|
.ina-text-area__wrapper {
|
|
12717
12874
|
display: flex;
|
|
12718
12875
|
align-items: flex-start;
|
|
12719
|
-
gap: var(--ina-spacing-2);
|
|
12720
|
-
border-radius: var(--ina-radius-lg);
|
|
12721
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
12722
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
12723
|
-
background-color: var(--ina-background-primary);
|
|
12724
|
-
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);
|
|
12725
12882
|
}
|
|
12726
12883
|
/* Input field */
|
|
12727
12884
|
.ina-text-area__input {
|
|
@@ -12735,10 +12892,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
12735
12892
|
line-height: 1.5;
|
|
12736
12893
|
}
|
|
12737
12894
|
.ina-text-area__input::-moz-placeholder {
|
|
12738
|
-
color: var(--ina-content-tertiary);
|
|
12895
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12739
12896
|
}
|
|
12740
12897
|
.ina-text-area__input::placeholder {
|
|
12741
|
-
color: var(--ina-content-tertiary);
|
|
12898
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12742
12899
|
}
|
|
12743
12900
|
/* Prefix/suffix icons */
|
|
12744
12901
|
.ina-text-area__prefix-icon,
|
|
@@ -12757,8 +12914,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12757
12914
|
display: inline-flex;
|
|
12758
12915
|
align-items: center;
|
|
12759
12916
|
justify-content: center;
|
|
12760
|
-
color: var(--ina-content-secondary);
|
|
12761
|
-
transition: color var(--ina-transition-base);
|
|
12917
|
+
color: var(--ina-content-secondary, #525252);
|
|
12918
|
+
transition: color var(--ina-transition-base, 200ms ease-in-out);
|
|
12762
12919
|
}
|
|
12763
12920
|
.ina-text-area__clear-button:hover:not(:disabled) {
|
|
12764
12921
|
color: var(--ina-content-secondary);
|
|
@@ -12778,22 +12935,34 @@ dialog.bottom-sheet-dropdown {
|
|
|
12778
12935
|
margin-top: var(--ina-spacing-1);
|
|
12779
12936
|
}
|
|
12780
12937
|
.ina-text-area__helper-text--neutral {
|
|
12781
|
-
color: var(--ina-content-secondary);
|
|
12938
|
+
color: var(--ina-content-secondary, #525252);
|
|
12782
12939
|
}
|
|
12783
12940
|
.ina-text-area__helper-text--error {
|
|
12784
|
-
color: var(--ina-negative-500);
|
|
12941
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
12785
12942
|
}
|
|
12786
12943
|
.ina-text-area__helper-text--warning {
|
|
12787
|
-
color: var(--ina-warning-500);
|
|
12944
|
+
color: var(--ina-warning-500, #eebb04);
|
|
12788
12945
|
}
|
|
12789
12946
|
.ina-text-area__helper-text--success {
|
|
12790
|
-
color: var(--ina-positive-600);
|
|
12947
|
+
color: var(--ina-positive-600, #288034);
|
|
12791
12948
|
}
|
|
12792
12949
|
/* Character count */
|
|
12793
12950
|
.ina-text-area__char-count {
|
|
12794
|
-
font-size: var(--ina-font-xs);
|
|
12795
|
-
color: var(--ina-content-secondary);
|
|
12796
|
-
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);
|
|
12797
12966
|
}
|
|
12798
12967
|
/* Status variants */
|
|
12799
12968
|
.ina-text-area__wrapper--status-neutral {
|
|
@@ -12808,8 +12977,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12808
12977
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
|
|
12809
12978
|
border-color: var(--ina-negative-600);
|
|
12810
12979
|
box-shadow:
|
|
12811
|
-
0 0 0
|
|
12812
|
-
0 0 0
|
|
12980
|
+
0 0 0 2px #fff,
|
|
12981
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
12813
12982
|
}
|
|
12814
12983
|
.ina-text-area__wrapper--status-warning {
|
|
12815
12984
|
border-color: var(--ina-warning-500);
|
|
@@ -12817,8 +12986,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12817
12986
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
|
|
12818
12987
|
border-color: var(--ina-warning-600);
|
|
12819
12988
|
box-shadow:
|
|
12820
|
-
0 0 0
|
|
12821
|
-
0 0 0
|
|
12989
|
+
0 0 0 2px #fff,
|
|
12990
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
12822
12991
|
}
|
|
12823
12992
|
.ina-text-area__wrapper--status-success {
|
|
12824
12993
|
border-color: var(--ina-positive-600);
|
|
@@ -12826,8 +12995,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
12826
12995
|
.ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
|
|
12827
12996
|
border-color: var(--ina-positive-600);
|
|
12828
12997
|
box-shadow:
|
|
12829
|
-
0 0 0
|
|
12830
|
-
0 0 0
|
|
12998
|
+
0 0 0 2px #fff,
|
|
12999
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
12831
13000
|
}
|
|
12832
13001
|
/* Disabled state */
|
|
12833
13002
|
.ina-text-area__wrapper--disabled {
|
|
@@ -12836,27 +13005,15 @@ dialog.bottom-sheet-dropdown {
|
|
|
12836
13005
|
cursor: not-allowed;
|
|
12837
13006
|
}
|
|
12838
13007
|
.ina-text-area__wrapper--disabled > .ina-text-area__input::-moz-placeholder {
|
|
12839
|
-
color: var(--ina-content-tertiary) !important;
|
|
13008
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12840
13009
|
}
|
|
12841
13010
|
.ina-text-area__wrapper--disabled > .ina-text-area__input::placeholder {
|
|
12842
|
-
color: var(--ina-content-tertiary) !important;
|
|
13011
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12843
13012
|
}
|
|
12844
13013
|
.ina-text-area__input:disabled {
|
|
12845
13014
|
cursor: not-allowed;
|
|
12846
13015
|
opacity: 0.6;
|
|
12847
13016
|
}
|
|
12848
|
-
/* Focus styles - Sesuai design Figma */
|
|
12849
|
-
.ina-text-area__wrapper:focus-within {
|
|
12850
|
-
box-shadow:
|
|
12851
|
-
0 0 0 2px #fff,
|
|
12852
|
-
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
12853
|
-
outline: none;
|
|
12854
|
-
background-color: var(--ina-background-primary);
|
|
12855
|
-
}
|
|
12856
|
-
/* hover styles - Sesuai design Figma */
|
|
12857
|
-
.ina-text-area__wrapper:hover {
|
|
12858
|
-
background-color: var(--ina-neutral-50);
|
|
12859
|
-
}
|
|
12860
13017
|
/* Responsive adjustments */
|
|
12861
13018
|
@media (max-width: 639px) {
|
|
12862
13019
|
.ina-text-area__wrapper {
|
|
@@ -12913,7 +13070,7 @@ dialog.bottom-sheet-dropdown {
|
|
|
12913
13070
|
.ina-text-field__label {
|
|
12914
13071
|
font-size: var(--ina-font-sm);
|
|
12915
13072
|
font-weight: var(--ina-font-medium);
|
|
12916
|
-
color: var(--ina-content-primary);
|
|
13073
|
+
color: var(--ina-content-primary, #1f1f1f);
|
|
12917
13074
|
margin-bottom: var(--ina-spacing-2);
|
|
12918
13075
|
}
|
|
12919
13076
|
/* Input wrapper */
|
|
@@ -12922,9 +13079,9 @@ dialog.bottom-sheet-dropdown {
|
|
|
12922
13079
|
align-items: center;
|
|
12923
13080
|
gap: var(--ina-spacing-2);
|
|
12924
13081
|
border-radius: var(--ina-radius-lg);
|
|
12925
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13082
|
+
border: 1px solid var(--ina-stroke-primary, #e5e5e5);
|
|
12926
13083
|
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
12927
|
-
background-color: var(--ina-background-primary);
|
|
13084
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
12928
13085
|
transition: all var(--ina-transition-base);
|
|
12929
13086
|
}
|
|
12930
13087
|
/* Size variants */
|
|
@@ -12977,10 +13134,10 @@ dialog.bottom-sheet-dropdown {
|
|
|
12977
13134
|
font-family: inherit;
|
|
12978
13135
|
}
|
|
12979
13136
|
.ina-text-field__input::-moz-placeholder {
|
|
12980
|
-
color: var(--ina-content-tertiary);
|
|
13137
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12981
13138
|
}
|
|
12982
13139
|
.ina-text-field__input::placeholder {
|
|
12983
|
-
color: var(--ina-content-tertiary);
|
|
13140
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
12984
13141
|
}
|
|
12985
13142
|
/* Prefix/suffix icons */
|
|
12986
13143
|
.ina-text-field__prefix-icon,
|
|
@@ -12997,11 +13154,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
12997
13154
|
display: inline-flex;
|
|
12998
13155
|
align-items: center;
|
|
12999
13156
|
justify-content: center;
|
|
13000
|
-
color: var(--ina-content-dark-secondary);
|
|
13157
|
+
color: var(--ina-content-dark-secondary, #737373);
|
|
13001
13158
|
transition: color var(--ina-transition-base);
|
|
13002
13159
|
}
|
|
13003
13160
|
.ina-text-field__clear-button:hover:not(:disabled) {
|
|
13004
|
-
color: var(--ina-content-secondary);
|
|
13161
|
+
color: var(--ina-content-secondary, #525252);
|
|
13005
13162
|
}
|
|
13006
13163
|
.ina-text-field__clear-button:disabled {
|
|
13007
13164
|
cursor: not-allowed;
|
|
@@ -13025,67 +13182,67 @@ dialog.bottom-sheet-dropdown {
|
|
|
13025
13182
|
padding-top: var(--ina-spacing-1);
|
|
13026
13183
|
}
|
|
13027
13184
|
.ina-text-field__helper-text--neutral {
|
|
13028
|
-
color: var(--ina-content-secondary);
|
|
13185
|
+
color: var(--ina-content-secondary, #525252);
|
|
13029
13186
|
}
|
|
13030
13187
|
.ina-text-field__helper-text--error {
|
|
13031
|
-
color: var(--ina-negative-500);
|
|
13188
|
+
color: var(--ina-negative-500, #f02d2d);
|
|
13032
13189
|
}
|
|
13033
13190
|
.ina-text-field__helper-text--warning {
|
|
13034
|
-
color: var(--ina-warning-500);
|
|
13191
|
+
color: var(--ina-warning-500, #eebb04);
|
|
13035
13192
|
}
|
|
13036
13193
|
.ina-text-field__helper-text--success {
|
|
13037
|
-
color: var(--ina-positive-600);
|
|
13194
|
+
color: var(--ina-positive-600, #288034);
|
|
13038
13195
|
}
|
|
13039
13196
|
/* Character count */
|
|
13040
13197
|
.ina-text-field__char-count {
|
|
13041
13198
|
font-size: var(--ina-font-xs);
|
|
13042
|
-
color: var(--ina-content-secondary);
|
|
13199
|
+
color: var(--ina-content-secondary, #525252);
|
|
13043
13200
|
}
|
|
13044
13201
|
/* Status variants */
|
|
13045
13202
|
.ina-text-field__wrapper--status-neutral {
|
|
13046
|
-
border-color: var(--ina-stroke-primary);
|
|
13203
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13047
13204
|
}
|
|
13048
13205
|
.ina-text-field__wrapper--status-neutral:focus-within {
|
|
13049
|
-
border-color: var(--ina-content-primary);
|
|
13206
|
+
border-color: var(--ina-content-primary, #1f1f1f);
|
|
13050
13207
|
}
|
|
13051
13208
|
.ina-text-field__wrapper--status-error {
|
|
13052
|
-
border-color: var(--ina-negative-500);
|
|
13209
|
+
border-color: var(--ina-negative-500, #f02d2d);
|
|
13053
13210
|
}
|
|
13054
13211
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
|
|
13055
|
-
border-color: var(--ina-negative-600);
|
|
13212
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13056
13213
|
box-shadow:
|
|
13057
|
-
0 0 0
|
|
13058
|
-
0 0 0
|
|
13214
|
+
0 0 0 2px #fff,
|
|
13215
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
13059
13216
|
}
|
|
13060
13217
|
.ina-text-field__wrapper--status-warning {
|
|
13061
|
-
border-color: var(--ina-warning-500);
|
|
13218
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
13062
13219
|
}
|
|
13063
13220
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
|
|
13064
|
-
border-color: var(--ina-warning-600);
|
|
13221
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
13065
13222
|
box-shadow:
|
|
13066
|
-
0 0 0
|
|
13067
|
-
0 0 0
|
|
13223
|
+
0 0 0 2px #fff,
|
|
13224
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
13068
13225
|
}
|
|
13069
13226
|
.ina-text-field__wrapper--status-success {
|
|
13070
|
-
border-color: var(--ina-positive-600);
|
|
13227
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13071
13228
|
}
|
|
13072
13229
|
.ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
|
|
13073
|
-
border-color: var(--ina-positive-600);
|
|
13230
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13074
13231
|
box-shadow:
|
|
13075
|
-
0 0 0
|
|
13076
|
-
0 0 0
|
|
13232
|
+
0 0 0 2px #fff,
|
|
13233
|
+
0 0 0 3px var(--ina-positive-500, #3cc14e);
|
|
13077
13234
|
}
|
|
13078
13235
|
/* Disabled state */
|
|
13079
13236
|
.ina-text-field__wrapper--disabled {
|
|
13080
|
-
background-color: var(--ina-background-tertiary);
|
|
13081
|
-
border-color: var(--ina-stroke-primary) !important;
|
|
13237
|
+
background-color: var(--ina-background-tertiary, #f5f5f5);
|
|
13238
|
+
border-color: var(--ina-stroke-primary, #e5e5e5) !important;
|
|
13082
13239
|
cursor: not-allowed;
|
|
13083
13240
|
}
|
|
13084
13241
|
.ina-text-field__wrapper--disabled > .ina-text-field__input::-moz-placeholder {
|
|
13085
|
-
color: var(--ina-content-tertiary) !important;
|
|
13242
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13086
13243
|
}
|
|
13087
13244
|
.ina-text-field__wrapper--disabled > .ina-text-field__input::placeholder {
|
|
13088
|
-
color: var(--ina-content-tertiary) !important;
|
|
13245
|
+
color: var(--ina-content-tertiary, #a3a3a3) !important;
|
|
13089
13246
|
}
|
|
13090
13247
|
.ina-text-field__input:disabled {
|
|
13091
13248
|
cursor: not-allowed;
|
|
@@ -13097,12 +13254,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
13097
13254
|
0 0 0 2px #fff,
|
|
13098
13255
|
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13099
13256
|
outline: none;
|
|
13100
|
-
background-color: var(--ina-background-primary);
|
|
13257
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13101
13258
|
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13102
13259
|
}
|
|
13103
13260
|
/* hover styles - Sesuai design Figma */
|
|
13104
13261
|
.ina-text-field__wrapper:hover {
|
|
13105
|
-
background-color: var(--ina-neutral-50);
|
|
13262
|
+
background-color: var(--ina-neutral-50, #f8f8f7);
|
|
13106
13263
|
}
|
|
13107
13264
|
/* Responsive adjustments */
|
|
13108
13265
|
@media (max-width: 639px) {
|
|
@@ -13393,11 +13550,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13393
13550
|
position: relative;
|
|
13394
13551
|
display: flex;
|
|
13395
13552
|
align-items: center;
|
|
13396
|
-
background-color: var(--ina-background-primary);
|
|
13397
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13398
|
-
border-radius: var(--ina-radius-lg);
|
|
13399
|
-
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
13400
|
-
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);
|
|
13401
13558
|
}
|
|
13402
13559
|
/* Size variants */
|
|
13403
13560
|
.ina-time-picker--size-sm .ina-time-picker__wrapper {
|
|
@@ -13440,45 +13597,107 @@ dialog.bottom-sheet-dropdown {
|
|
|
13440
13597
|
}
|
|
13441
13598
|
}
|
|
13442
13599
|
.ina-time-picker__wrapper:hover {
|
|
13443
|
-
|
|
13600
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13601
|
+
border-color: var(--ina-stroke-primary, #e5e5e5);
|
|
13444
13602
|
}
|
|
13445
13603
|
.ina-time-picker--open .ina-time-picker__wrapper {
|
|
13446
13604
|
box-shadow:
|
|
13447
|
-
|
|
13448
|
-
|
|
13605
|
+
0 0 0 2px #fff,
|
|
13606
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13449
13607
|
outline: none;
|
|
13450
|
-
background-color: var(--ina-background-primary);
|
|
13451
|
-
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);
|
|
13452
13659
|
}
|
|
13453
|
-
/* ... existing code ... */
|
|
13454
13660
|
/* Status Variants */
|
|
13455
13661
|
.ina-time-picker--status-error .ina-time-picker__wrapper {
|
|
13456
|
-
border-color: var(--ina-
|
|
13662
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13457
13663
|
}
|
|
13458
13664
|
.ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
|
|
13665
|
+
border-color: var(--ina-negative-600, #d50b0b);
|
|
13459
13666
|
box-shadow:
|
|
13460
|
-
0 0 0
|
|
13461
|
-
0 0 0
|
|
13667
|
+
0 0 0 2px #fff,
|
|
13668
|
+
0 0 0 3px var(--ina-negative-500, #f02d2d);
|
|
13462
13669
|
}
|
|
13463
13670
|
.ina-time-picker--status-warning .ina-time-picker__wrapper {
|
|
13464
|
-
border-color: var(--ina-warning-500);
|
|
13671
|
+
border-color: var(--ina-warning-500, #eebb04);
|
|
13465
13672
|
}
|
|
13466
13673
|
.ina-time-picker--status-warning.ina-time-picker--open
|
|
13467
13674
|
.ina-time-picker__wrapper {
|
|
13675
|
+
border-color: var(--ina-warning-600, #855f00);
|
|
13468
13676
|
box-shadow:
|
|
13469
|
-
0 0 0
|
|
13470
|
-
0 0 0
|
|
13677
|
+
0 0 0 2px #fff,
|
|
13678
|
+
0 0 0 3px var(--ina-warning-500, #eebb04);
|
|
13471
13679
|
}
|
|
13472
13680
|
.ina-time-picker--status-success .ina-time-picker__wrapper {
|
|
13473
|
-
border-color: var(--ina-
|
|
13681
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13474
13682
|
}
|
|
13475
13683
|
.ina-time-picker--status-success.ina-time-picker--open
|
|
13476
13684
|
.ina-time-picker__wrapper {
|
|
13685
|
+
border-color: var(--ina-positive-600, #288034);
|
|
13477
13686
|
box-shadow:
|
|
13478
|
-
0 0 0
|
|
13479
|
-
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);
|
|
13480
13700
|
}
|
|
13481
|
-
/* ... existing code ... */
|
|
13482
13701
|
/* Panel */
|
|
13483
13702
|
.ina-time-picker__panel {
|
|
13484
13703
|
position: absolute;
|
|
@@ -13487,26 +13706,30 @@ dialog.bottom-sheet-dropdown {
|
|
|
13487
13706
|
width: 100%;
|
|
13488
13707
|
min-width: 100%; /* Match trigger width by default */
|
|
13489
13708
|
z-index: 1000;
|
|
13490
|
-
background-color: var(--ina-background-primary);
|
|
13491
|
-
border: 1px solid var(--ina-stroke-primary);
|
|
13492
|
-
border-radius: var(--ina-radius-lg);
|
|
13493
|
-
box-shadow: var(
|
|
13494
|
-
|
|
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);
|
|
13495
13718
|
overflow: hidden;
|
|
13496
13719
|
animation: time-picker-fade-in 0.15s ease-out;
|
|
13497
13720
|
}
|
|
13498
|
-
/* ... existing code ... */
|
|
13499
13721
|
/* Focus styles - Sesuai design Figma */
|
|
13500
13722
|
.ina-time-picker__wrapper:focus-within {
|
|
13501
13723
|
box-shadow:
|
|
13502
|
-
|
|
13503
|
-
|
|
13724
|
+
0 0 0 2px #fff,
|
|
13725
|
+
0 0 0 3px var(--ina-primary-primary, #141414);
|
|
13504
13726
|
outline: none;
|
|
13505
|
-
background-color: var(--ina-background-primary);
|
|
13727
|
+
background-color: var(--ina-background-primary, #ffffff);
|
|
13728
|
+
border-color: var(--ina-stroke-tertiary, #141414);
|
|
13506
13729
|
}
|
|
13507
13730
|
/* hover styles - Sesuai design Figma */
|
|
13508
13731
|
.ina-time-picker__wrapper:hover {
|
|
13509
|
-
background-color: var(--ina-
|
|
13732
|
+
background-color: var(--ina-background-secondary, #f8f8f7);
|
|
13510
13733
|
}
|
|
13511
13734
|
/* High Contrast Mode */
|
|
13512
13735
|
@media (prefers-contrast: high) {
|
|
@@ -13548,12 +13771,12 @@ dialog.bottom-sheet-dropdown {
|
|
|
13548
13771
|
|
|
13549
13772
|
.ina-time-picker__option {
|
|
13550
13773
|
min-height: 28px;
|
|
13551
|
-
font-size: var(--ina-font-xs);
|
|
13552
|
-
padding: var(--ina-spacing-2);
|
|
13774
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13775
|
+
padding: var(--ina-spacing-2, 0.5rem);
|
|
13553
13776
|
}
|
|
13554
13777
|
|
|
13555
13778
|
.ina-time-picker__wrapper {
|
|
13556
|
-
padding: 0.375rem var(--ina-spacing-2); /* 6px 8px */
|
|
13779
|
+
padding: 0.375rem var(--ina-spacing-2, 0.5rem); /* 6px 8px */
|
|
13557
13780
|
gap: 0.375rem; /* 6px */
|
|
13558
13781
|
}
|
|
13559
13782
|
|
|
@@ -13565,11 +13788,11 @@ dialog.bottom-sheet-dropdown {
|
|
|
13565
13788
|
.ina-time-picker--size-sm .ina-time-picker__input,
|
|
13566
13789
|
.ina-time-picker--size-md .ina-time-picker__input,
|
|
13567
13790
|
.ina-time-picker--size-lg .ina-time-picker__input {
|
|
13568
|
-
font-size: var(--ina-font-xs) !important;
|
|
13791
|
+
font-size: var(--ina-font-xs, 0.75rem) !important;
|
|
13569
13792
|
}
|
|
13570
13793
|
|
|
13571
13794
|
.ina-time-picker__label {
|
|
13572
|
-
font-size: var(--ina-font-xs);
|
|
13795
|
+
font-size: var(--ina-font-xs, 0.75rem);
|
|
13573
13796
|
}
|
|
13574
13797
|
|
|
13575
13798
|
.ina-time-picker__prefix-icon,
|
|
@@ -13590,8 +13813,8 @@ dialog.bottom-sheet-dropdown {
|
|
|
13590
13813
|
|
|
13591
13814
|
.ina-time-picker__action-button,
|
|
13592
13815
|
.ina-time-picker__confirm-button {
|
|
13593
|
-
font-size: var(--ina-font-xs);
|
|
13594
|
-
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);
|
|
13595
13818
|
}
|
|
13596
13819
|
}
|
|
13597
13820
|
/* Toast Component Styles */
|