ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/date_time_picker.css

   1 /**
   2  * @license angular-circular-timepicker  version: 0.1.0
   3  * Copyright 2016 sidaudhi.com, Inc. http://www.sidaudhi.com
   4  * License: MIT
   5  *
   6  * @author        Siddharth Audhinarayanan
   7  * @since        2016-Jan-31
   8  */
   9
  10 .datetimepicker {
  11   font-family: Arial;
  12 }
  13
  14 .datetimepicker div,
  15 .datetimepicker span,
  16 .datetimepicker object,
  17 .datetimepicker iframe,
  18 .datetimepicker h1,
  19 .datetimepicker h2,
  20 .datetimepicker h3,
  21 .datetimepicker h4,
  22 .datetimepicker h5,
  23 .datetimepicker h6,
  24 .datetimepicker p,
  25 .datetimepicker pre,
  26 .datetimepicker a,
  27 .datetimepicker abbr,
  28 .datetimepicker acronym,
  29 .datetimepicker address,
  30 .datetimepicker code,
  31 .datetimepicker del,
  32 .datetimepicker dfn,
  33 .datetimepicker em,
  34 .datetimepicker img,
  35 .datetimepicker dl,
  36 .datetimepicker dt,
  37 .datetimepicker dd,
  38 .datetimepicker ol,
  39 .datetimepicker ul,
  40 .datetimepicker li,
  41 .datetimepicker fieldset,
  42 .datetimepicker form,
  43 .datetimepicker label,
  44 .datetimepicker legend,
  45 .datetimepicker caption,
  46 .datetimepicker tbody,
  47 .datetimepicker tfoot,
  48 .datetimepicker thead,
  49 .datetimepicker tr {
  50   margin: 0;
  51   padding: 0;
  52   border: 0;
  53   outline: 0;
  54   font-weight: inherit;
  55   font-style: inherit;
  56   font-family: inherit;
  57   font-size: 100%;
  58   vertical-align: baseline;
  59 }
  60
  61 .datetimepicker table {
  62   border-collapse: separate;
  63   border-spacing: 0;
  64   vertical-align: middle;
  65 }
  66
  67 .datetimepicker caption,
  68 .datetimepicker th,
  69 .datetimepicker td {
  70   text-align: left;
  71   font-weight: normal;
  72   vertical-align: middle;
  73 }
  74
  75 .datetimepicker a img {
  76   border: none;
  77 }
  78
  79 .datetimepicker .left {
  80   float: left;
  81 }
  82
  83 .datetimepicker .right {
  84   float: right;
  85 }
  86
  87 .datetimepicker .datetimepicker-display {
  88   padding: 6px 12px;
  89   border: 1px solid rgba(0,0,0,0.15);
  90   font-size: 15px;
  91   min-height: 34px;
  92 }
  93
  94 .datetimepicker .datetimepicker-toggle {
  95   float: right;
  96   padding: 7px;
  97   border: 0px;
  98   cursor: pointer;
  99 }
 100
 101 .datetimepicker .datetimepicker-modal {
 102   top: 0;
 103   bottom: 0;
 104   left: 0;
 105   right: 0;
 106   background-color: rgba(0,0,0,0.5);
 107   position: fixed;
 108   z-index: 990;
 109 }
 110
 111 .datetimepicker .datetimepicker-close {
 112   position: fixed;
 113   right: 10px;
 114   top: 5px;
 115   color: #fff;
 116   font-size: 24px;
 117   cursor: pointer;
 118   z-index: 999;
 119 }
 120
 121 .datetimepicker .datetimepicker-preview {
 122   padding: 5px;
 123   text-align: center;
 124   cursor: pointer;
 125   font-size: 18px;
 126   background-color: #0574AC;
 127   color: #fff;
 128 }
 129
 130 .datetimepicker .datetimepicker-content {
 131   min-height: 300px;
 132   background-color: #fff;
 133   border: 1px solid rgba(0,0,0,0.15);
 134   border-top: 0px;
 135   position: relative;
 136   width: 290px;
 137   z-index: 998;
 138 }
 139
 140 .datetimepicker .datetimepicker-content.datetimepicker-absolute {
 141   position: fixed;
 142   top: calc(30% - 100px);
 143   left: calc(50% - 145px);
 144   border: 0px;
 145   -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
 146   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
 147 }
 148
 149 .datetimepicker .datetimepicker-content .datetimepicker-tabs {
 150   background-color: #0574AC;
 151 }
 152
 153 .datetimepicker .datetimepicker-content .datetimepicker-tabs .datetimepicker-tab {
 154   width: 50%;
 155   display: inline-block;
 156   -webkit-box-sizing: border-box;
 157   -moz-box-sizing: border-box;
 158   box-sizing: border-box;
 159   padding: 5px;
 160   text-align: center;
 161   font-size: 13px;
 162   text-transform: uppercase;
 163   color: #fff;
 164   cursor: pointer;
 165   background-color: #f3f3f4;
 166   color: #0574AC;
 167 }
 168
 169 .datetimepicker .datetimepicker-content .datetimepicker-tabs .datetimepicker-tab.active {
 170   background-color: #0574AC;
 171   color: #f3f3f4;
 172   font-weight: bold;
 173 }
 174
 175 .datetimepicker .datetimepicker-content .datetimepicker-month {
 176   border-bottom: 1px solid rgba(0,0,0,0.2);
 177   background-color: #fff;
 178 }
 179
 180 .datetimepicker .datetimepicker-content .datetimepicker-month .datetimepicker-current-month {
 181   text-align: center;
 182   padding: 10px 10px;
 183 }
 184
 185 .datetimepicker .datetimepicker-calendar {
 186   text-align: center;
 187   padding: 10px 0px;
 188 }
 189
 190 .datetimepicker .datetimepicker-calendar .datetimepicker-day {
 191   width: 38px;
 192   display: inline-block;
 193   text-align: center;
 194   padding: 10px;
 195   -webkit-box-sizing: border-box;
 196   -moz-box-sizing: border-box;
 197   box-sizing: border-box;
 198   font-weight: bold;
 199   color: #0574AC;
 200   font-size: 15px;
 201 }
 202
 203 .datetimepicker .datetimepicker-calendar .datetimepicker-day.datetimepicker-leading-day,
 204 .datetimepicker .datetimepicker-calendar .datetimepicker-day.datetimepicker-trailing-day {
 205   font-weight: normal;
 206   color: rgba(0,0,0,0.25);
 207 }
 208
 209 .datetimepicker .datetimepicker-calendar .datetimepicker-day.datetimepicker-active-day {
 210   font-weight: normal;
 211   color: rgba(0,0,0,0.75);
 212   font-size: 14px;
 213 }
 214
 215 .datetimepicker .datetimepicker-calendar .datetimepicker-day.datetimepicker-active-day.selected,
 216 .datetimepicker .datetimepicker-calendar .datetimepicker-day.datetimepicker-active-day:hover {
 217   color: #fff;
 218   background-color: #0574AC;
 219   cursor: pointer;
 220 }
 221
 222 .datetimepicker .time-circle-outer {
 223   width: 240px;
 224   height: 240px;
 225   border: 3px dashed rgba(0,0,0,0.1);
 226   -webkit-border-radius: 50%;
 227   border-radius: 50%;
 228   margin: 30px auto;
 229   -webkit-box-sizing: border-box;
 230   -moz-box-sizing: border-box;
 231   box-sizing: border-box;
 232   position: relative;
 233 }
 234
 235 .datetimepicker .time-circle-outer .time-circle-center {
 236   position: absolute;
 237   top: calc(50% - 10px);
 238   left: calc(50% - 10px);
 239   width: 20px;
 240   height: 20px;
 241   background-color: #0574AC;
 242   -webkit-border-radius: 50%;
 243   border-radius: 50%;
 244 }
 245
 246 .datetimepicker .time-circle-outer .time-meridian {
 247   position: absolute;
 248   top: -70px;
 249   width: 30px;
 250   height: 30px;
 251   padding: 7px 5px;
 252   -webkit-border-radius: 50%;
 253   border-radius: 50%;
 254   font-size: 13px;
 255   font-weight: bold;
 256   cursor: pointer;
 257   color: #0574AC;
 258   text-align: center;
 259 }
 260
 261 .datetimepicker .time-circle-outer .time-meridian.time-left {
 262   left: -15px;
 263 }
 264
 265 .datetimepicker .time-circle-outer .time-meridian.time-right {
 266   right: -15px;
 267 }
 268
 269 .datetimepicker .time-circle-outer .time-meridian.selected {
 270   background-color: #0574AC;
 271   color: #fff;
 272 }
 273
 274 .datetimepicker .time-circle-outer .time-circle-hand {
 275   width: 6px;
 276   height: 82px;
 277   position: absolute;
 278   left: calc(50% - 3px);
 279   top: calc(50% - 82px);
 280   -webkit-transform-origin: 50% 100%;
 281   -moz-transform-origin: 50% 100%;
 282   -o-transform-origin: 50% 100%;
 283   -ms-transform-origin: 50% 100%;
 284   transform-origin: 50% 100%;
 285   background-color: #0574AC;
 286 }
 287
 288 .datetimepicker .time-circle-outer .time-circle-hand.deg-1 {
 289   -webkit-transform: rotate(30deg);
 290   -moz-transform: rotate(30deg);
 291   -o-transform: rotate(30deg);
 292   -ms-transform: rotate(30deg);
 293   transform: rotate(30deg);
 294 }
 295
 296 .datetimepicker .time-circle-outer .time-circle-hand.deg-2 {
 297   -webkit-transform: rotate(60deg);
 298   -moz-transform: rotate(60deg);
 299   -o-transform: rotate(60deg);
 300   -ms-transform: rotate(60deg);
 301   transform: rotate(60deg);
 302 }
 303
 304 .datetimepicker .time-circle-outer .time-circle-hand.deg-3 {
 305   -webkit-transform: rotate(90deg);
 306   -moz-transform: rotate(90deg);
 307   -o-transform: rotate(90deg);
 308   -ms-transform: rotate(90deg);
 309   transform: rotate(90deg);
 310 }
 311
 312 .datetimepicker .time-circle-outer .time-circle-hand.deg-4 {
 313   -webkit-transform: rotate(120deg);
 314   -moz-transform: rotate(120deg);
 315   -o-transform: rotate(120deg);
 316   -ms-transform: rotate(120deg);
 317   transform: rotate(120deg);
 318 }
 319
 320 .datetimepicker .time-circle-outer .time-circle-hand.deg-5 {
 321   -webkit-transform: rotate(150deg);
 322   -moz-transform: rotate(150deg);
 323   -o-transform: rotate(150deg);
 324   -ms-transform: rotate(150deg);
 325   transform: rotate(150deg);
 326 }
 327
 328 .datetimepicker .time-circle-outer .time-circle-hand.deg-6 {
 329   -webkit-transform: rotate(180deg);
 330   -moz-transform: rotate(180deg);
 331   -o-transform: rotate(180deg);
 332   -ms-transform: rotate(180deg);
 333   transform: rotate(180deg);
 334 }
 335
 336 .datetimepicker .time-circle-outer .time-circle-hand.deg-7 {
 337   -webkit-transform: rotate(210deg);
 338   -moz-transform: rotate(210deg);
 339   -o-transform: rotate(210deg);
 340   -ms-transform: rotate(210deg);
 341   transform: rotate(210deg);
 342 }
 343
 344 .datetimepicker .time-circle-outer .time-circle-hand.deg-8 {
 345   -webkit-transform: rotate(240deg);
 346   -moz-transform: rotate(240deg);
 347   -o-transform: rotate(240deg);
 348   -ms-transform: rotate(240deg);
 349   transform: rotate(240deg);
 350 }
 351
 352 .datetimepicker .time-circle-outer .time-circle-hand.deg-9 {
 353   -webkit-transform: rotate(270deg);
 354   -moz-transform: rotate(270deg);
 355   -o-transform: rotate(270deg);
 356   -ms-transform: rotate(270deg);
 357   transform: rotate(270deg);
 358 }
 359
 360 .datetimepicker .time-circle-outer .time-circle-hand.deg-10 {
 361   -webkit-transform: rotate(300deg);
 362   -moz-transform: rotate(300deg);
 363   -o-transform: rotate(300deg);
 364   -ms-transform: rotate(300deg);
 365   transform: rotate(300deg);
 366 }
 367
 368 .datetimepicker .time-circle-outer .time-circle-hand.deg-11 {
 369   -webkit-transform: rotate(330deg);
 370   -moz-transform: rotate(330deg);
 371   -o-transform: rotate(330deg);
 372   -ms-transform: rotate(330deg);
 373   transform: rotate(330deg);
 374 }
 375
 376 .datetimepicker .time-circle-outer .time-circle-hand.deg-12 {
 377   -webkit-transform: rotate(360deg);
 378   -moz-transform: rotate(360deg);
 379   -o-transform: rotate(360deg);
 380   -ms-transform: rotate(360deg);
 381   transform: rotate(360deg);
 382 }
 383
 384 .datetimepicker .time-circle-outer .time-circle-hand-large {
 385   height: 120px;
 386   top: calc(50% - 120px);
 387 }
 388
 389 .datetimepicker .time-circle-outer .time {
 390   position: absolute;
 391   margin-top: -15px;
 392   margin-left: -15px;
 393   background-color: #b4b4b4;
 394   -webkit-border-radius: 50%;
 395   border-radius: 50%;
 396   padding: 5px;
 397   height: 28px;
 398   width: 28px;
 399   -webkit-box-sizing: border-box;
 400   -moz-box-sizing: border-box;
 401   box-sizing: border-box;
 402   text-align: center;
 403   font-size: 13px;
 404   cursor: pointer;
 405   color: rgba(0,0,0,0.75);
 406 }
 407
 408 .datetimepicker .time-circle-outer .time:hover,
 409 .datetimepicker .time-circle-outer .time.selected {
 410   background-color: #0574AC;
 411   color: #fff;
 412 }
 413
 414 .datetimepicker .time-circle-outer .time-1 {
 415   left: calc(50% + 60px);
 416   top: 16.076951545867374px;
 417 }
 418
 419 .datetimepicker .time-circle-outer .time-2 {
 420   left: calc(50% + 103.92304845413263px);
 421   top: 60px;
 422 }
 423
 424 .datetimepicker .time-circle-outer .time-3 {
 425   left: calc(50% + 120px);
 426   top: 120px;
 427 }
 428
 429 .datetimepicker .time-circle-outer .time-4 {
 430   left: calc(50% + 103.92304845413263px);
 431   top: 180px;
 432 }
 433
 434 .datetimepicker .time-circle-outer .time-5 {
 435   left: calc(50% + 60px);
 436   top: 223.92304845413264px;
 437 }
 438
 439 .datetimepicker .time-circle-outer .time-6 {
 440   left: 50%;
 441   top: 240px;
 442 }
 443
 444 .datetimepicker .time-circle-outer .time-11 {
 445   left: calc(50% - 60px);
 446   top: 16.076951545867374px;
 447 }
 448
 449 .datetimepicker .time-circle-outer .time-10 {
 450   left: calc(50% - 103.92304845413263px);
 451   top: 60px;
 452 }
 453
 454 .datetimepicker .time-circle-outer .time-9 {
 455   left: calc(50% - 120px);
 456   top: 120px;
 457 }
 458
 459 .datetimepicker .time-circle-outer .time-8 {
 460   left: calc(50% - 103.92304845413263px);
 461   top: 180px;
 462 }
 463
 464 .datetimepicker .time-circle-outer .time-7 {
 465   left: calc(50% - 60px);
 466   top: 223.92304845413264px;
 467 }
 468
 469 .datetimepicker .time-circle-outer .time-12 {
 470   left: 50%;
 471   top: 0px;
 472 }
 473
 474 .datetimepicker .time-circle-outer .time-circle-inner {
 475   width: 164px;
 476   height: 164px;
 477   border: 3px dashed rgba(0,0,0,0.1);
 478   -webkit-border-radius: 50%;
 479   border-radius: 50%;
 480   margin: 35px auto;
 481   -webkit-box-sizing: border-box;
 482   -moz-box-sizing: border-box;
 483   box-sizing: border-box;
 484   position: relative;
 485 }
 486
 487 .datetimepicker .time-circle-outer .time-circle-inner .time-1 {
 488   left: calc(50% + 41px);
 489   top: 10.985916889676034px;
 490 }
 491
 492 .datetimepicker .time-circle-outer .time-circle-inner .time-2 {
 493   left: calc(50% + 71.01408311032397px);
 494   top: 41px;
 495 }
 496
 497 .datetimepicker .time-circle-outer .time-circle-inner .time-3 {
 498   left: calc(50% + 82px);
 499   top: 82px;
 500 }
 501
 502 .datetimepicker .time-circle-outer .time-circle-inner .time-4 {
 503   left: calc(50% + 71.01408311032397px);
 504   top: 123px;
 505 }
 506
 507 .datetimepicker .time-circle-outer .time-circle-inner .time-5 {
 508   left: calc(50% + 41px);
 509   top: 153.01408311032395px;
 510 }
 511
 512 .datetimepicker .time-circle-outer .time-circle-inner .time-6 {
 513   left: 50%;
 514   top: 164px;
 515 }
 516
 517 .datetimepicker .time-circle-outer .time-circle-inner .time-11 {
 518   left: calc(50% - 41px);
 519   top: 10.985916889676034px;
 520 }
 521
 522 .datetimepicker .time-circle-outer .time-circle-inner .time-10 {
 523   left: calc(50% - 71.01408311032397px);
 524   top: 41px;
 525 }
 526
 527 .datetimepicker .time-circle-outer .time-circle-inner .time-9 {
 528   left: calc(50% - 82px);
 529   top: 82px;
 530 }
 531
 532 .datetimepicker .time-circle-outer .time-circle-inner .time-8 {
 533   left: calc(50% - 71.01408311032397px);
 534   top: 123px;
 535 }
 536
 537 .datetimepicker .time-circle-outer .time-circle-inner .time-7 {
 538   left: calc(50% - 41px);
 539   top: 153.01408311032395px;
 540 }
 541
 542 .datetimepicker .time-circle-outer .time-circle-inner .time-12 {
 543   left: 50%;
 544   top: 0px;
 545 }
 546
 547 .datetimepicker .datetimepicker-action {
 548   cursor: pointer;
 549   font-weight: bold;
 550   line-height: 18px;
 551   padding: 10px 10px;
 552 }
 553
 554 .datetimepicker .datetimepicker-action:hover {
 555   background-color: rgba(5, 116, 172, 1);
 556   cursor: pointer;
 557 }