diff options
Diffstat (limited to 'examples/pick-time.css')
-rw-r--r-- | examples/pick-time.css | 88 |
1 files changed, 39 insertions, 49 deletions
diff --git a/examples/pick-time.css b/examples/pick-time.css index cb10278..0731d07 100644 --- a/examples/pick-time.css +++ b/examples/pick-time.css | |||
@@ -1,44 +1,35 @@ | |||
1 | .rc-time-picker { | 1 | .rc-time-picker { |
2 | display: inline; | 2 | display: inline-block; |
3 | box-sizing: border-box; | 3 | box-sizing: border-box; |
4 | } | 4 | } |
5 | .rc-time-picker * { | 5 | .rc-time-picker * { |
6 | box-sizing: border-box; | 6 | box-sizing: border-box; |
7 | } | 7 | } |
8 | @font-face { | 8 | .rc-time-picker-input { |
9 | font-family: 'anticon'; | 9 | width: 100%; |
10 | src: url('//at.alicdn.com/t/font_1434092639_4910953.eot'); | 10 | position: relative; |
11 | /* IE9*/ | 11 | display: inline-block; |
12 | src: url('//at.alicdn.com/t/font_1434092639_4910953.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1434092639_4910953.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1434092639_4910953.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1434092639_4910953.svg#iconfont') format('svg'); | 12 | padding: 4px 7px; |
13 | /* iOS 4.1- */ | 13 | height: 28px; |
14 | cursor: text; | ||
15 | font-size: 12px; | ||
16 | line-height: 1.5; | ||
17 | color: #666; | ||
18 | background-color: #fff; | ||
19 | background-image: none; | ||
20 | border: 1px solid #d9d9d9; | ||
21 | border-radius: 6px; | ||
22 | -webkit-transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); | ||
23 | transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); | ||
14 | } | 24 | } |
15 | .rc-time-picker-panel { | 25 | .rc-time-picker-panel { |
16 | z-index: 1070; | 26 | z-index: 1070; |
27 | width: 170px; | ||
17 | position: absolute; | 28 | position: absolute; |
29 | box-sizing: border-box; | ||
18 | } | 30 | } |
19 | .rc-time-picker-panel.slide-up-enter.slide-up-enter-active.rc-time-picker-panel-placement-topLeft, | 31 | .rc-time-picker-panel * { |
20 | .rc-time-picker-panel.slide-up-enter.slide-up-enter-active.rc-time-picker-panel-placement-topRight, | 32 | box-sizing: border-box; |
21 | .rc-time-picker-panel.slide-up-appear.slide-up-appear-active.rc-time-picker-panel-placement-topLeft, | ||
22 | .rc-time-picker-panel.slide-up-appear.slide-up-appear-active.rc-time-picker-panel-placement-topRight { | ||
23 | -webkit-animation-name: antSlideDownIn; | ||
24 | animation-name: antSlideDownIn; | ||
25 | } | ||
26 | .rc-time-picker-panel.slide-up-enter.slide-up-enter-active.rc-time-picker-panel-placement-bottomLeft, | ||
27 | .rc-time-picker-panel.slide-up-enter.slide-up-enter-active.rc-time-picker-panel-placement-bottomRight, | ||
28 | .rc-time-picker-panel.slide-up-appear.slide-up-appear-active.rc-time-picker-panel-placement-bottomLeft, | ||
29 | .rc-time-picker-panel.slide-up-appear.slide-up-appear-active.rc-time-picker-panel-placement-bottomRight { | ||
30 | -webkit-animation-name: antSlideUpIn; | ||
31 | animation-name: antSlideUpIn; | ||
32 | } | ||
33 | .rc-time-picker-panel.slide-up-leave.slide-up-leave-active.rc-time-picker-panel-placement-topLeft, | ||
34 | .rc-time-picker-panel.slide-up-leave.slide-up-leave-active.rc-time-picker-panel-placement-topRight { | ||
35 | -webkit-animation-name: antSlideDownOut; | ||
36 | animation-name: antSlideDownOut; | ||
37 | } | ||
38 | .rc-time-picker-panel.slide-up-leave.slide-up-leave-active.rc-time-picker-panel-placement-bottomLeft, | ||
39 | .rc-time-picker-panel.slide-up-leave.slide-up-leave-active.rc-time-picker-panel-placement-bottomRight { | ||
40 | -webkit-animation-name: antSlideUpOut; | ||
41 | animation-name: antSlideUpOut; | ||
42 | } | 33 | } |
43 | .rc-time-picker-panel-inner { | 34 | .rc-time-picker-panel-inner { |
44 | display: inline-block; | 35 | display: inline-block; |
@@ -54,26 +45,25 @@ | |||
54 | border: 1px solid #ccc; | 45 | border: 1px solid #ccc; |
55 | line-height: 1.5; | 46 | line-height: 1.5; |
56 | } | 47 | } |
57 | .rc-time-picker-input { | 48 | .rc-time-picker-panel-input { |
58 | margin: 0; | 49 | margin: 0; |
59 | padding: 0; | 50 | padding: 0; |
60 | border: 0; | ||
61 | width: 100%; | 51 | width: 100%; |
62 | cursor: auto; | 52 | cursor: auto; |
63 | line-height: 1.5; | 53 | line-height: 1.5; |
64 | outline: 0; | 54 | outline: 0; |
65 | border: 1px solid transparent; | 55 | border: 1px solid transparent; |
66 | } | 56 | } |
67 | .rc-time-picker-input-wrap { | 57 | .rc-time-picker-panel-input-wrap { |
68 | box-sizing: border-box; | 58 | box-sizing: border-box; |
69 | position: relative; | 59 | position: relative; |
70 | padding: 6px; | 60 | padding: 6px; |
71 | border-bottom: 1px solid #e9e9e9; | 61 | border-bottom: 1px solid #e9e9e9; |
72 | } | 62 | } |
73 | .rc-time-picker-input-invalid { | 63 | .rc-time-picker-panel-input-invalid { |
74 | border-color: red; | 64 | border-color: red; |
75 | } | 65 | } |
76 | .rc-time-picker-clear-btn { | 66 | .rc-time-picker-panel-clear-btn { |
77 | position: absolute; | 67 | position: absolute; |
78 | right: 6px; | 68 | right: 6px; |
79 | cursor: pointer; | 69 | cursor: pointer; |
@@ -85,7 +75,7 @@ | |||
85 | top: 6px; | 75 | top: 6px; |
86 | margin: 0; | 76 | margin: 0; |
87 | } | 77 | } |
88 | .rc-time-picker-clear-btn:after { | 78 | .rc-time-picker-panel-clear-btn:after { |
89 | content: "x"; | 79 | content: "x"; |
90 | font-size: 12px; | 80 | font-size: 12px; |
91 | color: #aaa; | 81 | color: #aaa; |
@@ -95,30 +85,30 @@ | |||
95 | -webkit-transition: color 0.3s ease; | 85 | -webkit-transition: color 0.3s ease; |
96 | transition: color 0.3s ease; | 86 | transition: color 0.3s ease; |
97 | } | 87 | } |
98 | .rc-time-picker-clear-btn:hover:after { | 88 | .rc-time-picker-panel-clear-btn:hover:after { |
99 | color: #666; | 89 | color: #666; |
100 | } | 90 | } |
101 | .narrow .rc-time-picker-input-wrap { | 91 | .rc-time-picker-panel-select { |
102 | max-width: 111px; | ||
103 | } | ||
104 | .rc-time-picker-select { | ||
105 | float: left; | 92 | float: left; |
106 | overflow-y: auto; | ||
107 | font-size: 12px; | 93 | font-size: 12px; |
108 | border: 1px solid #e9e9e9; | 94 | border: 1px solid #e9e9e9; |
109 | border-width: 0 1px; | 95 | border-width: 0 1px; |
110 | margin-left: -1px; | 96 | margin-left: -1px; |
111 | box-sizing: border-box; | 97 | box-sizing: border-box; |
112 | width: 56px; | 98 | width: 56px; |
99 | overflow: hidden; | ||
113 | } | 100 | } |
114 | .rc-time-picker-select:first-child { | 101 | .rc-time-picker-panel-select:hover { |
102 | overflow-y: auto; | ||
103 | } | ||
104 | .rc-time-picker-panel-select:first-child { | ||
115 | border-left: 0; | 105 | border-left: 0; |
116 | margin-left: 0; | 106 | margin-left: 0; |
117 | } | 107 | } |
118 | .rc-time-picker-select:last-child { | 108 | .rc-time-picker-panel-select:last-child { |
119 | border-right: 0; | 109 | border-right: 0; |
120 | } | 110 | } |
121 | .rc-time-picker-select ul { | 111 | .rc-time-picker-panel-select ul { |
122 | list-style: none; | 112 | list-style: none; |
123 | box-sizing: border-box; | 113 | box-sizing: border-box; |
124 | margin: 0; | 114 | margin: 0; |
@@ -126,7 +116,7 @@ | |||
126 | width: 100%; | 116 | width: 100%; |
127 | max-height: 144px; | 117 | max-height: 144px; |
128 | } | 118 | } |
129 | .rc-time-picker-select li { | 119 | .rc-time-picker-panel-select li { |
130 | list-style: none; | 120 | list-style: none; |
131 | box-sizing: border-box; | 121 | box-sizing: border-box; |
132 | margin: 0; | 122 | margin: 0; |
@@ -141,12 +131,12 @@ | |||
141 | -ms-user-select: none; | 131 | -ms-user-select: none; |
142 | user-select: none; | 132 | user-select: none; |
143 | } | 133 | } |
144 | .rc-time-picker-select li.selected { | 134 | .rc-time-picker-panel-select li:hover { |
145 | background: #edfaff; | 135 | background: #edfaff; |
146 | color: #2db7f5; | ||
147 | } | 136 | } |
148 | .rc-time-picker-select li:hover { | 137 | .rc-time-picker-panel-select-option-selected { |
149 | background: #edfaff; | 138 | background: #edfaff; |
139 | color: #2db7f5; | ||
150 | } | 140 | } |
151 | 141 | ||
152 | /*# sourceMappingURL=pick-time.css.map*/ \ No newline at end of file | 142 | /*# sourceMappingURL=pick-time.css.map*/ \ No newline at end of file |