1 | @import "../core/index-noreset.scss";
|
2 | @import "../input/scss/variable.scss";
|
3 | @import "../input/scss/mixin.scss";
|
4 | @import "../date-picker2/scss/variable.scss";
|
5 | @import "../date-picker2/scss/footer.scss";
|
6 |
|
7 | @import "./scss/variable";
|
8 | @import "./scss/menu.scss";
|
9 | @import "./scss/panel.scss";
|
10 | @import "./scss/footer.scss";
|
11 | @import "./rtl.scss";
|
12 |
|
13 | #{$time-picker2-prefix} {
|
14 | @include box-sizing;
|
15 |
|
16 | display: inline-block;
|
17 |
|
18 | &-trigger .#{$css-prefix}input {
|
19 | width: 100%;
|
20 | }
|
21 |
|
22 | &-wrapper {
|
23 | padding: $s-1 0;
|
24 | }
|
25 |
|
26 | &-body {
|
27 | display: block;
|
28 | overflow: hidden;
|
29 | border: $popup-local-border-width $popup-local-border-style $popup-local-border-color;
|
30 | border-radius: $popup-local-corner;
|
31 | background: $color-white;
|
32 | box-shadow: $popup-local-shadow;
|
33 | }
|
34 |
|
35 | &-symbol-clock-icon::before {
|
36 | content: $icon-content-clock;
|
37 | }
|
38 |
|
39 |
|
40 | &-input {
|
41 | display: inline-flex;
|
42 | align-items: center;
|
43 | outline: none;
|
44 | box-sizing: border-box;
|
45 | border: $input-border-width solid $input-border-color;
|
46 | vertical-align: middle;
|
47 | width: inherit;
|
48 |
|
49 | #{$input-prefix} {
|
50 | border: none;
|
51 | width: 100%;
|
52 | height: 100%;
|
53 | input {
|
54 | height: 100%;
|
55 | }
|
56 | }
|
57 |
|
58 | &#{$time-picker2-prefix}-input-small {
|
59 | @include input-size(
|
60 | $form-element-small-height,
|
61 | $input-s-padding,
|
62 | $form-element-small-font-size,
|
63 | $input-s-label-padding-left,
|
64 | $input-s-icon-padding-right
|
65 | );
|
66 | @include input-icon-size($form-element-small-icon-size);
|
67 | @include input-border-radius($form-element-small-corner);
|
68 | }
|
69 |
|
70 | &#{$time-picker2-prefix}-input-medium {
|
71 | @include input-size(
|
72 | $form-element-medium-height,
|
73 | $input-m-padding,
|
74 | $form-element-medium-font-size,
|
75 | $input-m-label-padding-left,
|
76 | $input-m-icon-padding-right
|
77 | );
|
78 | @include input-icon-size($form-element-medium-icon-size);
|
79 | @include input-border-radius($form-element-medium-corner);
|
80 | }
|
81 |
|
82 | &#{$time-picker2-prefix}-input-large {
|
83 | @include input-size(
|
84 | $form-element-large-height,
|
85 | $input-l-padding,
|
86 | $form-element-large-font-size,
|
87 | $input-l-label-padding-left,
|
88 | $input-l-icon-padding-right
|
89 | );
|
90 | @include input-icon-size($form-element-large-icon-size);
|
91 | @include input-border-radius($form-element-large-corner);
|
92 | }
|
93 |
|
94 | &:hover {
|
95 | border-color: $input-hover-border-color;
|
96 | background-color: $input-hover-bg-color;
|
97 | }
|
98 |
|
99 | &#{$time-picker2-prefix}-input-focus {
|
100 | border-color: $input-focus-border-color;
|
101 | background-color: $input-focus-bg-color;
|
102 | box-shadow: 0 0 0 $input-focus-shadow-spread $color-calculate-input-focus-shadow;
|
103 | }
|
104 |
|
105 | &#{$time-picker2-prefix}-input-noborder {
|
106 | border-color: transparent !important;
|
107 | box-shadow: none !important;
|
108 | }
|
109 |
|
110 | &#{$time-picker2-prefix}-input-disabled {
|
111 | @include input-disabled();
|
112 | }
|
113 | }
|
114 |
|
115 | &-input-separator {
|
116 | color: $input-border-color;
|
117 | font-size: 12px;
|
118 | display: inline-block;
|
119 | min-width: 16px;
|
120 | text-align: center;
|
121 | }
|
122 | }
|