aboutsummaryrefslogtreecommitdiffhomepage
path: root/examples/pick-time.css
diff options
context:
space:
mode:
Diffstat (limited to 'examples/pick-time.css')
-rw-r--r--examples/pick-time.css83
1 files changed, 48 insertions, 35 deletions
diff --git a/examples/pick-time.css b/examples/pick-time.css
index 2c9304c..cb10278 100644
--- a/examples/pick-time.css
+++ b/examples/pick-time.css
@@ -1,35 +1,44 @@
1.rc-time-picker { 1.rc-time-picker {
2 display: inline-block; 2 display: inline;
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.rc-time-picker-input { 8@font-face {
9 width: 100%; 9 font-family: 'anticon';
10 position: relative; 10 src: url('//at.alicdn.com/t/font_1434092639_4910953.eot');
11 display: inline-block; 11 /* IE9*/
12 padding: 4px 7px; 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');
13 height: 28px; 13 /* iOS 4.1- */
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);
24} 14}
25.rc-time-picker-panel { 15.rc-time-picker-panel {
26 z-index: 1070; 16 z-index: 1070;
27 width: 170px;
28 position: absolute; 17 position: absolute;
29 box-sizing: border-box;
30} 18}
31.rc-time-picker-panel * { 19.rc-time-picker-panel.slide-up-enter.slide-up-enter-active.rc-time-picker-panel-placement-topLeft,
32 box-sizing: border-box; 20.rc-time-picker-panel.slide-up-enter.slide-up-enter-active.rc-time-picker-panel-placement-topRight,
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;
33} 42}
34.rc-time-picker-panel-inner { 43.rc-time-picker-panel-inner {
35 display: inline-block; 44 display: inline-block;
@@ -45,25 +54,26 @@
45 border: 1px solid #ccc; 54 border: 1px solid #ccc;
46 line-height: 1.5; 55 line-height: 1.5;
47} 56}
48.rc-time-picker-panel-input { 57.rc-time-picker-input {
49 margin: 0; 58 margin: 0;
50 padding: 0; 59 padding: 0;
60 border: 0;
51 width: 100%; 61 width: 100%;
52 cursor: auto; 62 cursor: auto;
53 line-height: 1.5; 63 line-height: 1.5;
54 outline: 0; 64 outline: 0;
55 border: 1px solid transparent; 65 border: 1px solid transparent;
56} 66}
57.rc-time-picker-panel-input-wrap { 67.rc-time-picker-input-wrap {
58 box-sizing: border-box; 68 box-sizing: border-box;
59 position: relative; 69 position: relative;
60 padding: 6px; 70 padding: 6px;
61 border-bottom: 1px solid #e9e9e9; 71 border-bottom: 1px solid #e9e9e9;
62} 72}
63.rc-time-picker-panel-input-invalid { 73.rc-time-picker-input-invalid {
64 border-color: red; 74 border-color: red;
65} 75}
66.rc-time-picker-panel-clear-btn { 76.rc-time-picker-clear-btn {
67 position: absolute; 77 position: absolute;
68 right: 6px; 78 right: 6px;
69 cursor: pointer; 79 cursor: pointer;
@@ -75,7 +85,7 @@
75 top: 6px; 85 top: 6px;
76 margin: 0; 86 margin: 0;
77} 87}
78.rc-time-picker-panel-clear-btn:after { 88.rc-time-picker-clear-btn:after {
79 content: "x"; 89 content: "x";
80 font-size: 12px; 90 font-size: 12px;
81 color: #aaa; 91 color: #aaa;
@@ -85,10 +95,13 @@
85 -webkit-transition: color 0.3s ease; 95 -webkit-transition: color 0.3s ease;
86 transition: color 0.3s ease; 96 transition: color 0.3s ease;
87} 97}
88.rc-time-picker-panel-clear-btn:hover:after { 98.rc-time-picker-clear-btn:hover:after {
89 color: #666; 99 color: #666;
90} 100}
91.rc-time-picker-panel-select { 101.narrow .rc-time-picker-input-wrap {
102 max-width: 111px;
103}
104.rc-time-picker-select {
92 float: left; 105 float: left;
93 overflow-y: auto; 106 overflow-y: auto;
94 font-size: 12px; 107 font-size: 12px;
@@ -98,14 +111,14 @@
98 box-sizing: border-box; 111 box-sizing: border-box;
99 width: 56px; 112 width: 56px;
100} 113}
101.rc-time-picker-panel-select:first-child { 114.rc-time-picker-select:first-child {
102 border-left: 0; 115 border-left: 0;
103 margin-left: 0; 116 margin-left: 0;
104} 117}
105.rc-time-picker-panel-select:last-child { 118.rc-time-picker-select:last-child {
106 border-right: 0; 119 border-right: 0;
107} 120}
108.rc-time-picker-panel-select ul { 121.rc-time-picker-select ul {
109 list-style: none; 122 list-style: none;
110 box-sizing: border-box; 123 box-sizing: border-box;
111 margin: 0; 124 margin: 0;
@@ -113,7 +126,7 @@
113 width: 100%; 126 width: 100%;
114 max-height: 144px; 127 max-height: 144px;
115} 128}
116.rc-time-picker-panel-select li { 129.rc-time-picker-select li {
117 list-style: none; 130 list-style: none;
118 box-sizing: border-box; 131 box-sizing: border-box;
119 margin: 0; 132 margin: 0;
@@ -128,12 +141,12 @@
128 -ms-user-select: none; 141 -ms-user-select: none;
129 user-select: none; 142 user-select: none;
130} 143}
131.rc-time-picker-panel-select li:hover { 144.rc-time-picker-select li.selected {
132 background: #edfaff; 145 background: #edfaff;
146 color: #2db7f5;
133} 147}
134.rc-time-picker-panel-select-option-selected { 148.rc-time-picker-select li:hover {
135 background: #edfaff; 149 background: #edfaff;
136 color: #2db7f5;
137} 150}
138 151
139/*# sourceMappingURL=pick-time.css.map*/ \ No newline at end of file 152/*# sourceMappingURL=pick-time.css.map*/ \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 03:37:41 +0000