1 |
|
2 |
|
3 |
|
4 | @import "~@blueprintjs/core/src/components/forms/common";
|
5 | @import "~@blueprintjs/core/src/components/icon/icon-mixins";
|
6 | @import "./common";
|
7 |
|
8 | $timepicker-input-row-height: $pt-grid-size * 3 !default;
|
9 |
|
10 | $timepicker-input-row-inner-height: $timepicker-input-row-height - 2 !default;
|
11 |
|
12 | $timepicker-row-padding: 0 1px !default;
|
13 | $timepicker-divider-width: $pt-grid-size * 1.1 !default;
|
14 | $timepicker-control-width: $pt-grid-size * 3.3 !default;
|
15 |
|
16 | .#{$ns}-timepicker {
|
17 | white-space: nowrap;
|
18 |
|
19 | .#{$ns}-timepicker-arrow-row {
|
20 | padding: $timepicker-row-padding;
|
21 | }
|
22 |
|
23 | .#{$ns}-timepicker-arrow-button {
|
24 | @include pt-icon-colors();
|
25 | display: inline-block;
|
26 | padding: ($pt-grid-size * 0.4) 0;
|
27 | text-align: center;
|
28 | width: $timepicker-control-width;
|
29 |
|
30 | + .#{$ns}-timepicker-arrow-button {
|
31 | margin-left: $timepicker-divider-width;
|
32 | }
|
33 |
|
34 | &:hover {
|
35 | cursor: pointer;
|
36 | }
|
37 | }
|
38 |
|
39 | .#{$ns}-timepicker-input-row {
|
40 | background: $input-background-color;
|
41 | border-radius: $pt-border-radius;
|
42 | box-shadow: $pt-input-box-shadow;
|
43 | display: inline-block;
|
44 | height: $timepicker-input-row-height;
|
45 | line-height: $timepicker-input-row-inner-height;
|
46 | padding: $timepicker-row-padding;
|
47 | vertical-align: middle;
|
48 | }
|
49 |
|
50 | .#{$ns}-timepicker-divider-text {
|
51 | color: $pt-text-color-muted;
|
52 | display: inline-block;
|
53 | font-size: $pt-font-size-large;
|
54 | text-align: center;
|
55 | width: $timepicker-divider-width;
|
56 | }
|
57 |
|
58 | .#{$ns}-timepicker-input {
|
59 | background: transparent;
|
60 | border: 0;
|
61 | border-radius: $pt-border-radius;
|
62 | box-shadow: input-transition-shadow($input-shadow-color-focus);
|
63 | color: $pt-text-color;
|
64 | height: $timepicker-input-row-inner-height;
|
65 | outline: 0;
|
66 | padding: 0;
|
67 | text-align: center;
|
68 | transition: $input-transition;
|
69 | width: $timepicker-control-width;
|
70 |
|
71 | &:focus {
|
72 | box-shadow: input-transition-shadow($input-shadow-color-focus, true);
|
73 | }
|
74 |
|
75 | @each $intent, $color in $pt-intent-colors {
|
76 | &.#{$ns}-intent-#{$intent} {
|
77 | @include pt-input-intent($color);
|
78 |
|
79 | .#{$ns}-dark & {
|
80 | @include pt-dark-input-intent(map-get($pt-dark-input-intent-box-shadow-colors, $intent));
|
81 | }
|
82 | }
|
83 | }
|
84 | }
|
85 |
|
86 | .#{$ns}-timepicker-ampm-select {
|
87 | margin-left: $pt-grid-size * 0.5;
|
88 | }
|
89 |
|
90 | &.#{$ns}-disabled {
|
91 | .#{$ns}-timepicker-input-row {
|
92 | @include pt-input-disabled();
|
93 | }
|
94 |
|
95 | .#{$ns}-timepicker-input,
|
96 | .#{$ns}-timepicker-divider-text {
|
97 | color: $input-color-disabled;
|
98 | cursor: not-allowed;
|
99 | }
|
100 |
|
101 | .#{$ns}-timepicker-arrow-button,
|
102 | .#{$ns}-timepicker-arrow-button:hover {
|
103 | color: $input-color-disabled;
|
104 | cursor: not-allowed;
|
105 | }
|
106 | }
|
107 | }
|
108 |
|
109 | .#{$ns}-dark .#{$ns}-timepicker {
|
110 | .#{$ns}-timepicker-input-row {
|
111 | background: $dark-input-background-color;
|
112 | box-shadow: $pt-dark-input-box-shadow;
|
113 | }
|
114 |
|
115 | .#{$ns}-timepicker-divider-text {
|
116 | color: $pt-dark-text-color-muted;
|
117 | }
|
118 |
|
119 | .#{$ns}-timepicker-input {
|
120 | color: $pt-dark-text-color;
|
121 | }
|
122 | }
|
123 |
|
124 | .#{$ns}-datepicker .#{$ns}-timepicker {
|
125 | margin-bottom: $datepicker-padding * 2;
|
126 | margin-top: $datepicker-padding;
|
127 |
|
128 |
|
129 | &:last-child {
|
130 | margin-bottom: $datepicker-padding;
|
131 | }
|
132 | }
|