| 1 | .rc-color-picker-panel-inner {
|
| 2 | position: relative;
|
| 3 | border-radius: 4px;
|
| 4 | box-shadow: 0 1px 5px #ccc;
|
| 5 | border: 1px solid #ccc;
|
| 6 | padding: 8px;
|
| 7 | }
|
| 8 | .rc-color-picker-panel-wrap {
|
| 9 | margin: 5px 0 0;
|
| 10 | height: 30px;
|
| 11 | width: 100%;
|
| 12 | position: relative;
|
| 13 | }
|
| 14 | .rc-color-picker-panel-wrap-preview {
|
| 15 | position: absolute;
|
| 16 | right: 0px;
|
| 17 | }
|
| 18 | .rc-color-picker-panel-wrap-ribbon {
|
| 19 | position: absolute;
|
| 20 | left: 0px;
|
| 21 | top: 0;
|
| 22 | right: 35px;
|
| 23 | height: 12.5px;
|
| 24 | }
|
| 25 | .rc-color-picker-panel-wrap-alpha {
|
| 26 | position: absolute;
|
| 27 | left: 0px;
|
| 28 | right: 35px;
|
| 29 | bottom: 0;
|
| 30 | height: 12.5px;
|
| 31 | }
|
| 32 | .rc-color-picker-trigger {
|
| 33 | border: 1px solid #999;
|
| 34 | display: inline-block;
|
| 35 | padding: 2px;
|
| 36 | border-radius: 2px;
|
| 37 | -webkit-user-select: none;
|
| 38 | -moz-user-select: none;
|
| 39 | -ms-user-select: none;
|
| 40 | user-select: none;
|
| 41 | width: 20px;
|
| 42 | height: 20px;
|
| 43 | cursor: pointer;
|
| 44 | box-shadow: 0 0 0 2px #fff inset;
|
| 45 | }
|
| 46 | .rc-color-picker-trigger-open {
|
| 47 | box-shadow: 0px 0px 3px #999;
|
| 48 | }
|
| 49 | .rc-color-picker-panel {
|
| 50 | width: 218px;
|
| 51 | background-color: #fff;
|
| 52 | box-sizing: border-box;
|
| 53 | outline: none;
|
| 54 | z-index: 9;
|
| 55 | -moz-user-select: none;
|
| 56 | -khtml-user-select: none;
|
| 57 | -webkit-user-select: none;
|
| 58 | -ms-user-select: none;
|
| 59 | user-select: none;
|
| 60 | }
|
| 61 | .rc-color-picker-panel * {
|
| 62 | box-sizing: border-box;
|
| 63 | }
|
| 64 | .rc-color-picker-panel-open {
|
| 65 | display: block;
|
| 66 | }
|
| 67 | .rc-color-picker-panel-close {
|
| 68 | display: none;
|
| 69 | }
|
| 70 | .rc-color-picker-panel-preview {
|
| 71 | height: 30px;
|
| 72 | width: 30px;
|
| 73 | overflow: hidden;
|
| 74 | border-radius: 2px;
|
| 75 | box-shadow: 0 0 2px #808080 inset;
|
| 76 | background-image: url('data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==');
|
| 77 | }
|
| 78 | .rc-color-picker-panel-preview span,
|
| 79 | .rc-color-picker-panel-preview input[type=color] {
|
| 80 | position: absolute;
|
| 81 | display: block;
|
| 82 | height: 100%;
|
| 83 | width: 30px;
|
| 84 | border-radius: 2px;
|
| 85 | }
|
| 86 | .rc-color-picker-panel-preview input[type=color] {
|
| 87 | opacity: 0;
|
| 88 | }
|
| 89 | .rc-color-picker-panel-board {
|
| 90 | position: relative;
|
| 91 | font-size: 0;
|
| 92 | -webkit-user-select: none;
|
| 93 | -moz-user-select: none;
|
| 94 | -ms-user-select: none;
|
| 95 | user-select: none;
|
| 96 | }
|
| 97 | .rc-color-picker-panel-board span {
|
| 98 | position: absolute;
|
| 99 | border-radius: 10px;
|
| 100 | border: 1px solid #fff;
|
| 101 | width: 9px;
|
| 102 | height: 9px;
|
| 103 | left: -999px;
|
| 104 | top: -999px;
|
| 105 | box-shadow: 0 0 1px rgba(120, 120, 120, 0.7);
|
| 106 | z-index: 2;
|
| 107 | }
|
| 108 | .rc-color-picker-panel-board-hsv {
|
| 109 | width: 200px;
|
| 110 | height: 150px;
|
| 111 | position: relative;
|
| 112 | z-index: 1;
|
| 113 | border-radius: 2px;
|
| 114 | }
|
| 115 | .rc-color-picker-panel-board-value {
|
| 116 | border-radius: 2px;
|
| 117 | position: absolute;
|
| 118 | width: 100%;
|
| 119 | height: 100%;
|
| 120 | left: 0;
|
| 121 | top: 0;
|
| 122 | z-index: 2;
|
| 123 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigwLDAsMCkiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
|
| 124 | background-image: linear-gradient(to bottom, transparent 0%, #000000 100%);
|
| 125 | }
|
| 126 | .rc-color-picker-panel-board-saturation {
|
| 127 | border-radius: 2px;
|
| 128 | position: absolute;
|
| 129 | width: 100%;
|
| 130 | height: 100%;
|
| 131 | left: 0;
|
| 132 | top: 0;
|
| 133 | z-index: 1;
|
| 134 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDAsMCwwKSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
|
| 135 | background-image: linear-gradient(to right, #ffffff 0%, transparent 100%);
|
| 136 | }
|
| 137 | .rc-color-picker-panel-board-handler {
|
| 138 | box-shadow: 0 0 2px #808080 inset;
|
| 139 | border-radius: 2px;
|
| 140 | cursor: crosshair;
|
| 141 | -webkit-user-select: none;
|
| 142 | -moz-user-select: none;
|
| 143 | -ms-user-select: none;
|
| 144 | user-select: none;
|
| 145 | position: absolute;
|
| 146 | top: 0;
|
| 147 | left: 0;
|
| 148 | width: 100%;
|
| 149 | height: 100%;
|
| 150 | z-index: 3;
|
| 151 | }
|
| 152 | .rc-color-picker-panel-ribbon {
|
| 153 | position: relative;
|
| 154 | height: 100%;
|
| 155 | border-radius: 2px;
|
| 156 | box-shadow: 0 0 2px #808080 inset;
|
| 157 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjZmY5OTAwIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2NkZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiMzNWZmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMDBmZjY2IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZCIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMwMDY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjMzIwMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2NkMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiNmZjAwOTkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
|
| 158 | background-image: linear-gradient(to right, #ff0000 0%, #ff9900 10%, #cdff00 20%, #35ff00 30%, #00ff66 40%, #00fffd 50%, #0066ff 60%, #3200ff 70%, #cd00ff 80%, #ff0099 90%, #ff0000 100%);
|
| 159 | }
|
| 160 | .rc-color-picker-panel-ribbon span {
|
| 161 | position: absolute;
|
| 162 | top: 0;
|
| 163 | height: 100%;
|
| 164 | width: 4px;
|
| 165 | border: 1px solid #000000;
|
| 166 | padding: 1px 0;
|
| 167 | margin-left: -2px;
|
| 168 | background-color: #fff;
|
| 169 | border-radius: 3px;
|
| 170 | }
|
| 171 | .rc-color-picker-panel-ribbon-handler {
|
| 172 | position: absolute;
|
| 173 | width: 104%;
|
| 174 | height: 100%;
|
| 175 | left: -2%;
|
| 176 | cursor: pointer;
|
| 177 | }
|
| 178 | .rc-color-picker-panel-alpha {
|
| 179 | position: relative;
|
| 180 | height: 100%;
|
| 181 | width: 100%;
|
| 182 | border-radius: 2px;
|
| 183 | background-image: url('data:image/png;base64,R0lGODdhCgAKAPAAAOXl5f///ywAAAAACgAKAEACEIQdqXt9GxyETrI279OIgwIAOw==');
|
| 184 | background-repeat: repeat;
|
| 185 | -webkit-user-select: none;
|
| 186 | -moz-user-select: none;
|
| 187 | -ms-user-select: none;
|
| 188 | user-select: none;
|
| 189 | }
|
| 190 | .rc-color-picker-panel-alpha-bg {
|
| 191 | position: absolute;
|
| 192 | width: 100%;
|
| 193 | height: 100%;
|
| 194 | border-radius: 2px;
|
| 195 | box-shadow: 0 0 2px #808080 inset;
|
| 196 | }
|
| 197 | .rc-color-picker-panel-alpha span {
|
| 198 | position: absolute;
|
| 199 | top: 0;
|
| 200 | height: 100%;
|
| 201 | width: 4px;
|
| 202 | border: 1px solid #000000;
|
| 203 | padding: 1px 0;
|
| 204 | margin-left: -2px;
|
| 205 | background-color: #fff;
|
| 206 | border-radius: 3px;
|
| 207 | }
|
| 208 | .rc-color-picker-panel-alpha-handler {
|
| 209 | position: absolute;
|
| 210 | width: 104%;
|
| 211 | height: 100%;
|
| 212 | left: -2%;
|
| 213 | cursor: pointer;
|
| 214 | }
|
| 215 | .rc-color-picker-panel-params {
|
| 216 | font-size: 12px;
|
| 217 | }
|
| 218 | .rc-color-picker-panel-params-input {
|
| 219 | overflow: hidden;
|
| 220 | padding: 2px 0;
|
| 221 | }
|
| 222 | .rc-color-picker-panel-params input {
|
| 223 | -webkit-user-select: text;
|
| 224 | -moz-user-select: text;
|
| 225 | -ms-user-select: text;
|
| 226 | user-select: text;
|
| 227 | text-align: center;
|
| 228 | padding: 1px;
|
| 229 | margin: 0;
|
| 230 | float: left;
|
| 231 | border-radius: 2px;
|
| 232 | border: 1px solid #CACACA;
|
| 233 | font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
| 234 | }
|
| 235 | .rc-color-picker-panel-params-hex {
|
| 236 | width: 52px;
|
| 237 | }
|
| 238 | .rc-color-picker-panel-params input[type=number] {
|
| 239 | margin-left: 5px;
|
| 240 | width: 32px;
|
| 241 | }
|
| 242 | .rc-color-picker-panel-params input[type=number]::-webkit-inner-spin-button {
|
| 243 | -webkit-appearance: none;
|
| 244 | }
|
| 245 | .rc-color-picker-panel-params-lable {
|
| 246 | padding: 2px 0;
|
| 247 | height: 22px;
|
| 248 | line-height: 18px;
|
| 249 | -webkit-user-select: none;
|
| 250 | -moz-user-select: none;
|
| 251 | -ms-user-select: none;
|
| 252 | user-select: none;
|
| 253 | }
|
| 254 | .rc-color-picker-panel-params-lable label {
|
| 255 | float: left;
|
| 256 | text-align: center;
|
| 257 | }
|
| 258 | .rc-color-picker-panel-params-lable-hex {
|
| 259 | width: 52px;
|
| 260 | }
|
| 261 | .rc-color-picker-panel-params-lable-number,
|
| 262 | .rc-color-picker-panel-params-lable-alpha {
|
| 263 | margin-left: 5px;
|
| 264 | width: 32px;
|
| 265 | }
|
| 266 | .rc-color-picker-panel-params-lable-number:hover {
|
| 267 | border-radius: 2px;
|
| 268 | background-color: #eee;
|
| 269 | box-shadow: 0 0 0 1px #ccc inset;
|
| 270 | cursor: pointer;
|
| 271 | }
|
| 272 | .rc-color-picker {
|
| 273 | position: absolute;
|
| 274 | left: -9999px;
|
| 275 | top: -9999px;
|
| 276 | z-index: 1000;
|
| 277 | }
|
| 278 | .rc-color-picker-wrap {
|
| 279 | display: inline-block;
|
| 280 | }
|
| 281 | .rc-color-picker-slide-up-enter {
|
| 282 | -webkit-animation-duration: .3s;
|
| 283 | animation-duration: .3s;
|
| 284 | -webkit-animation-fill-mode: both;
|
| 285 | animation-fill-mode: both;
|
| 286 | -webkit-transform-origin: 0 0;
|
| 287 | transform-origin: 0 0;
|
| 288 | display: block !important;
|
| 289 | opacity: 0;
|
| 290 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
| 291 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
| 292 | -webkit-animation-play-state: paused;
|
| 293 | animation-play-state: paused;
|
| 294 | }
|
| 295 | .rc-color-picker-slide-up-appear {
|
| 296 | -webkit-animation-duration: .3s;
|
| 297 | animation-duration: .3s;
|
| 298 | -webkit-animation-fill-mode: both;
|
| 299 | animation-fill-mode: both;
|
| 300 | -webkit-transform-origin: 0 0;
|
| 301 | transform-origin: 0 0;
|
| 302 | display: block !important;
|
| 303 | opacity: 0;
|
| 304 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
| 305 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
|
| 306 | -webkit-animation-play-state: paused;
|
| 307 | animation-play-state: paused;
|
| 308 | }
|
| 309 | .rc-color-picker-slide-up-leave {
|
| 310 | -webkit-animation-duration: .3s;
|
| 311 | animation-duration: .3s;
|
| 312 | -webkit-animation-fill-mode: both;
|
| 313 | animation-fill-mode: both;
|
| 314 | -webkit-transform-origin: 0 0;
|
| 315 | transform-origin: 0 0;
|
| 316 | display: block !important;
|
| 317 | opacity: 1;
|
| 318 | -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
| 319 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
| 320 | -webkit-animation-play-state: paused;
|
| 321 | animation-play-state: paused;
|
| 322 | }
|
| 323 | .rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomLeft,
|
| 324 | .rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-bottomRight,
|
| 325 | .rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomLeft,
|
| 326 | .rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-bottomRight {
|
| 327 | -webkit-animation-name: rcColorPickerSlideUpIn;
|
| 328 | animation-name: rcColorPickerSlideUpIn;
|
| 329 | -webkit-animation-play-state: running;
|
| 330 | animation-play-state: running;
|
| 331 | }
|
| 332 | .rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topLeft,
|
| 333 | .rc-color-picker-slide-up-enter.rc-color-picker-slide-up-enter-active.rc-color-picker-placement-topRight,
|
| 334 | .rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topLeft,
|
| 335 | .rc-color-picker-slide-up-appear.rc-color-picker-slide-up-appear-active.rc-color-picker-placement-topRight {
|
| 336 | -webkit-animation-name: rcColorPickerSlideDownIn;
|
| 337 | animation-name: rcColorPickerSlideDownIn;
|
| 338 | -webkit-animation-play-state: running;
|
| 339 | animation-play-state: running;
|
| 340 | }
|
| 341 | .rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomLeft,
|
| 342 | .rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-bottomRight {
|
| 343 | -webkit-animation-name: rcColorPickerSlideUpOut;
|
| 344 | animation-name: rcColorPickerSlideUpOut;
|
| 345 | -webkit-animation-play-state: running;
|
| 346 | animation-play-state: running;
|
| 347 | }
|
| 348 | .rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topLeft,
|
| 349 | .rc-color-picker-slide-up-leave.rc-color-picker-slide-up-leave-active.rc-color-picker-placement-topRight {
|
| 350 | -webkit-animation-name: rcColorPickerSlideDownOut;
|
| 351 | animation-name: rcColorPickerSlideDownOut;
|
| 352 | -webkit-animation-play-state: running;
|
| 353 | animation-play-state: running;
|
| 354 | }
|
| 355 | @-webkit-keyframes rcColorPickerSlideUpIn {
|
| 356 | 0% {
|
| 357 | opacity: 0;
|
| 358 | -webkit-transform-origin: 0% 0%;
|
| 359 | transform-origin: 0% 0%;
|
| 360 | -webkit-transform: scaleY(0);
|
| 361 | transform: scaleY(0);
|
| 362 | }
|
| 363 | 100% {
|
| 364 | opacity: 1;
|
| 365 | -webkit-transform-origin: 0% 0%;
|
| 366 | transform-origin: 0% 0%;
|
| 367 | -webkit-transform: scaleY(1);
|
| 368 | transform: scaleY(1);
|
| 369 | }
|
| 370 | }
|
| 371 | @keyframes rcColorPickerSlideUpIn {
|
| 372 | 0% {
|
| 373 | opacity: 0;
|
| 374 | -webkit-transform-origin: 0% 0%;
|
| 375 | transform-origin: 0% 0%;
|
| 376 | -webkit-transform: scaleY(0);
|
| 377 | transform: scaleY(0);
|
| 378 | }
|
| 379 | 100% {
|
| 380 | opacity: 1;
|
| 381 | -webkit-transform-origin: 0% 0%;
|
| 382 | transform-origin: 0% 0%;
|
| 383 | -webkit-transform: scaleY(1);
|
| 384 | transform: scaleY(1);
|
| 385 | }
|
| 386 | }
|
| 387 | @-webkit-keyframes rcColorPickerSlideUpOut {
|
| 388 | 0% {
|
| 389 | opacity: 1;
|
| 390 | -webkit-transform-origin: 0% 0%;
|
| 391 | transform-origin: 0% 0%;
|
| 392 | -webkit-transform: scaleY(1);
|
| 393 | transform: scaleY(1);
|
| 394 | }
|
| 395 | 100% {
|
| 396 | opacity: 0;
|
| 397 | -webkit-transform-origin: 0% 0%;
|
| 398 | transform-origin: 0% 0%;
|
| 399 | -webkit-transform: scaleY(0);
|
| 400 | transform: scaleY(0);
|
| 401 | }
|
| 402 | }
|
| 403 | @keyframes rcColorPickerSlideUpOut {
|
| 404 | 0% {
|
| 405 | opacity: 1;
|
| 406 | -webkit-transform-origin: 0% 0%;
|
| 407 | transform-origin: 0% 0%;
|
| 408 | -webkit-transform: scaleY(1);
|
| 409 | transform: scaleY(1);
|
| 410 | }
|
| 411 | 100% {
|
| 412 | opacity: 0;
|
| 413 | -webkit-transform-origin: 0% 0%;
|
| 414 | transform-origin: 0% 0%;
|
| 415 | -webkit-transform: scaleY(0);
|
| 416 | transform: scaleY(0);
|
| 417 | }
|
| 418 | }
|
| 419 | @-webkit-keyframes rcColorPickerSlideDownIn {
|
| 420 | 0% {
|
| 421 | opacity: 0;
|
| 422 | -webkit-transform-origin: 100% 100%;
|
| 423 | transform-origin: 100% 100%;
|
| 424 | -webkit-transform: scaleY(0);
|
| 425 | transform: scaleY(0);
|
| 426 | }
|
| 427 | 100% {
|
| 428 | opacity: 1;
|
| 429 | -webkit-transform-origin: 100% 100%;
|
| 430 | transform-origin: 100% 100%;
|
| 431 | -webkit-transform: scaleY(1);
|
| 432 | transform: scaleY(1);
|
| 433 | }
|
| 434 | }
|
| 435 | @keyframes rcColorPickerSlideDownIn {
|
| 436 | 0% {
|
| 437 | opacity: 0;
|
| 438 | -webkit-transform-origin: 100% 100%;
|
| 439 | transform-origin: 100% 100%;
|
| 440 | -webkit-transform: scaleY(0);
|
| 441 | transform: scaleY(0);
|
| 442 | }
|
| 443 | 100% {
|
| 444 | opacity: 1;
|
| 445 | -webkit-transform-origin: 100% 100%;
|
| 446 | transform-origin: 100% 100%;
|
| 447 | -webkit-transform: scaleY(1);
|
| 448 | transform: scaleY(1);
|
| 449 | }
|
| 450 | }
|
| 451 | @-webkit-keyframes rcColorPickerSlideDownOut {
|
| 452 | 0% {
|
| 453 | opacity: 1;
|
| 454 | -webkit-transform-origin: 100% 100%;
|
| 455 | transform-origin: 100% 100%;
|
| 456 | -webkit-transform: scaleY(1);
|
| 457 | transform: scaleY(1);
|
| 458 | }
|
| 459 | 100% {
|
| 460 | opacity: 0;
|
| 461 | -webkit-transform-origin: 100% 100%;
|
| 462 | transform-origin: 100% 100%;
|
| 463 | -webkit-transform: scaleY(0);
|
| 464 | transform: scaleY(0);
|
| 465 | }
|
| 466 | }
|
| 467 | @keyframes rcColorPickerSlideDownOut {
|
| 468 | 0% {
|
| 469 | opacity: 1;
|
| 470 | -webkit-transform-origin: 100% 100%;
|
| 471 | transform-origin: 100% 100%;
|
| 472 | -webkit-transform: scaleY(1);
|
| 473 | transform: scaleY(1);
|
| 474 | }
|
| 475 | 100% {
|
| 476 | opacity: 0;
|
| 477 | -webkit-transform-origin: 100% 100%;
|
| 478 | transform-origin: 100% 100%;
|
| 479 | -webkit-transform: scaleY(0);
|
| 480 | transform: scaleY(0);
|
| 481 | }
|
| 482 | }
|