alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
163 lines
4.7 KiB
SCSS
163 lines
4.7 KiB
SCSS
input::placeholder {
|
|
text-align: right;
|
|
direction: rtl;
|
|
}
|
|
|
|
/* Digit order stays LTR. Empty (placeholder) aligns right; typed value aligns left. */
|
|
input[type='tel'] {
|
|
direction: ltr !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
input[type='tel']:placeholder-shown {
|
|
text-align: right !important;
|
|
}
|
|
|
|
input[type='tel']::placeholder {
|
|
text-align: right;
|
|
direction: rtl;
|
|
}
|
|
|
|
[data-slot='input-field'] {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
[data-slot='input'] {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Digit order for number fields stays LTR (same idea as tel). Alignment stays overridable (e.g. centered fee fields). */
|
|
[data-slot='number-field-input'] {
|
|
direction: ltr !important;
|
|
}
|
|
|
|
/* Kill HeroUI focus-field-ring / invalid-field-ring so fields show a single border only.
|
|
* invalid-field-ring draws outline-1 when invalid + unfocused (looks like a black ring).
|
|
* Cover every HeroUI field shell that applies status-invalid-field / status-focused-field.
|
|
* Legacy input-wrapper kept for older HeroUI markup. */
|
|
[data-slot='input-wrapper'],
|
|
[data-slot='input-group'],
|
|
[data-slot='textarea'],
|
|
[data-slot='select-trigger'],
|
|
[data-slot='autocomplete-trigger'],
|
|
[data-slot='input-otp-slot'],
|
|
[data-slot='input-otp-group'],
|
|
[data-slot='number-field-group'],
|
|
[data-slot='search-field-group'],
|
|
[data-slot='date-input-group'],
|
|
[data-slot='color-input-group'],
|
|
.input,
|
|
.textarea,
|
|
.input-group,
|
|
.number-field__group,
|
|
.search-field__group,
|
|
.date-input-group,
|
|
.color-input-group,
|
|
.input-otp__slot,
|
|
.select__trigger,
|
|
.autocomplete__trigger,
|
|
.radio__control,
|
|
.checkbox__control {
|
|
outline: none !important;
|
|
--tw-ring-offset-width: 0px !important;
|
|
|
|
&[data-focus='true'],
|
|
&[data-focused='true'],
|
|
&[data-focus-within='true'],
|
|
&[data-focus-visible='true'],
|
|
&[data-active='true'],
|
|
&[data-invalid='true'],
|
|
&[aria-invalid='true'],
|
|
&:focus,
|
|
&:focus-visible,
|
|
&:focus-within {
|
|
outline: none !important;
|
|
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
|
--tw-ring-offset-width: 0px !important;
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
|
|
}
|
|
}
|
|
|
|
/* Parent-invalid → trigger shells (Select / Autocomplete) */
|
|
.select[data-invalid='true'] [data-slot='select-trigger'],
|
|
.select[aria-invalid='true'] [data-slot='select-trigger'],
|
|
.select[data-invalid='true'] .select__trigger,
|
|
.select[aria-invalid='true'] .select__trigger,
|
|
.autocomplete[data-invalid='true'] [data-slot='autocomplete-trigger'],
|
|
.autocomplete[aria-invalid='true'] [data-slot='autocomplete-trigger'],
|
|
.autocomplete[data-invalid='true'] .autocomplete__trigger,
|
|
.autocomplete[aria-invalid='true'] .autocomplete__trigger,
|
|
.radio[data-invalid='true'] .radio__control,
|
|
.radio[aria-invalid='true'] .radio__control,
|
|
.checkbox[data-invalid='true'] .checkbox__control,
|
|
.checkbox[aria-invalid='true'] .checkbox__control {
|
|
outline: none !important;
|
|
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
|
--tw-ring-offset-width: 0px !important;
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
|
|
}
|
|
|
|
.labelClass {
|
|
font-weight: 400 !important;
|
|
font-size: 1rem !important;
|
|
line-height: 1.25rem !important;
|
|
color: var(--color-text) !important;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
-moz-osx-font-smoothing: auto;
|
|
}
|
|
|
|
.rmdp-input::placeholder,
|
|
.rmdp-input input::placeholder,
|
|
.date-picker-input .rmdp-input::placeholder,
|
|
.date-picker-input input::placeholder,
|
|
.date-picker-input input[type='text']::placeholder {
|
|
font-size: 13px;
|
|
color: var(--color-secondary-30) !important;
|
|
}
|
|
|
|
.rmdp-input {
|
|
color: var(--color-primary-1000) !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.rmdp-input:hover {
|
|
border-color: var(--color-primary-300) !important;
|
|
}
|
|
|
|
.rmdp-input:focus {
|
|
border-color: var(--color-primary) !important;
|
|
box-shadow: 0 0 0 0px var(--color-primary) !important;
|
|
}
|
|
|
|
.date-picker-input--in-wrapper .rmdp-input,
|
|
.date-picker-input--in-wrapper .rmdp-input:hover,
|
|
.date-picker-input--in-wrapper .rmdp-input:focus {
|
|
border-color: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Match HeroUI invalid Input border (no extra ring) */
|
|
.date-picker-input--invalid .rmdp-input,
|
|
.date-picker-input--invalid input.rmdp-input {
|
|
border-color: var(--color-fourth) !important;
|
|
}
|
|
|
|
.date-picker-input--invalid .rmdp-input:hover,
|
|
.date-picker-input--invalid .rmdp-input:focus,
|
|
.date-picker-input--invalid input.rmdp-input:hover,
|
|
.date-picker-input--invalid input.rmdp-input:focus {
|
|
border-color: var(--color-fourth) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
|
input,
|
|
textarea {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|