1 | @use './variables.scss' as *;
|
2 | @use './mixins.scss';
|
3 |
|
4 | @mixin TimeInput() {
|
5 | .rw-time-input {
|
6 | display: inline-flex;
|
7 | min-height: $input-height;
|
8 | align-items: center;
|
9 | background-color: $input-bg;
|
10 | border: $input-border-color $input-border-width solid;
|
11 | border-radius: $input-border-radius;
|
12 | outline: none;
|
13 | cursor: text;
|
14 | }
|
15 |
|
16 | .rw-time-part-input {
|
17 | @include mixins.btn-input-reset;
|
18 | @include mixins.input-base;
|
19 |
|
20 | padding: 0 0.5em;
|
21 |
|
22 |
|
23 | &,
|
24 | &::placeholder {
|
25 | text-align: center;
|
26 | }
|
27 | }
|
28 |
|
29 | .rw-time-part-meridiem {
|
30 | @include mixins.btn-input-reset;
|
31 |
|
32 | padding: 0 0.5em;
|
33 | text-transform: lowercase;
|
34 | font-variant: small-caps;
|
35 |
|
36 | & :focus {
|
37 | outline: none;
|
38 | }
|
39 | }
|
40 |
|
41 | .rw-time-input-clear {
|
42 | padding: 0 0.4em;
|
43 | outline: none;
|
44 | opacity: 0;
|
45 | margin-left: auto;
|
46 |
|
47 | [dir='rtl'] & {
|
48 | margin-left: revert;
|
49 | margin-right: auto;
|
50 | }
|
51 |
|
52 | .rw-time-input:hover &.rw-show,
|
53 | .rw-time-input.rw-state-focus &.rw-show {
|
54 | opacity: 1;
|
55 | }
|
56 | }
|
57 | }
|