default.time.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /* ==========================================================================
  2. $BASE-TIME-PICKER
  3. ========================================================================== */
  4. /**
  5. * The list of times.
  6. */
  7. .picker__list {
  8. list-style: none;
  9. padding: 0.75em 0 4.2em;
  10. margin: 0;
  11. }
  12. /**
  13. * The times on the clock.
  14. */
  15. .picker__list-item {
  16. border-bottom: 1px solid #ddd;
  17. border-top: 1px solid #ddd;
  18. margin-bottom: -1px;
  19. position: relative;
  20. background: #fff;
  21. padding: .75em 1.25em;
  22. }
  23. @media (min-height: 46.75em) {
  24. .picker__list-item {
  25. padding: .5em 1em;
  26. }
  27. }
  28. /* Hovered time */
  29. .picker__list-item:hover {
  30. cursor: pointer;
  31. color: #000;
  32. background: #b1dcfb;
  33. border-color: #0089ec;
  34. z-index: 10;
  35. }
  36. /* Highlighted and hovered/focused time */
  37. .picker__list-item--highlighted {
  38. border-color: #0089ec;
  39. z-index: 10;
  40. }
  41. .picker__list-item--highlighted:hover,
  42. .picker--focused .picker__list-item--highlighted {
  43. cursor: pointer;
  44. color: #000;
  45. background: #b1dcfb;
  46. }
  47. /* Selected and hovered/focused time */
  48. .picker__list-item--selected,
  49. .picker__list-item--selected:hover,
  50. .picker--focused .picker__list-item--selected {
  51. background: #0089ec;
  52. color: #fff;
  53. z-index: 10;
  54. }
  55. /* Disabled time */
  56. .picker__list-item--disabled,
  57. .picker__list-item--disabled:hover,
  58. .picker--focused .picker__list-item--disabled {
  59. background: #f5f5f5;
  60. border-color: #f5f5f5;
  61. color: #ddd;
  62. cursor: default;
  63. border-color: #ddd;
  64. z-index: auto;
  65. }
  66. /**
  67. * The clear button
  68. */
  69. .picker--time .picker__button--clear {
  70. display: block;
  71. width: 80%;
  72. margin: 1em auto 0;
  73. padding: 1em 1.25em;
  74. background: none;
  75. border: 0;
  76. font-weight: 500;
  77. font-size: .67em;
  78. text-align: center;
  79. text-transform: uppercase;
  80. color: #666;
  81. }
  82. .picker--time .picker__button--clear:hover,
  83. .picker--time .picker__button--clear:focus {
  84. color: #000;
  85. background: #b1dcfb;
  86. background: #e20;
  87. border-color: #e20;
  88. cursor: pointer;
  89. color: #fff;
  90. outline: none;
  91. }
  92. .picker--time .picker__button--clear:before {
  93. top: -0.25em;
  94. color: #666;
  95. font-size: 1.25em;
  96. font-weight: bold;
  97. }
  98. .picker--time .picker__button--clear:hover:before,
  99. .picker--time .picker__button--clear:focus:before {
  100. color: #fff;
  101. border-color: #fff;
  102. }
  103. /* ==========================================================================
  104. $DEFAULT-TIME-PICKER
  105. ========================================================================== */
  106. /**
  107. * The frame the bounds the time picker.
  108. */
  109. .picker--time .picker__frame {
  110. min-width: 256px;
  111. max-width: 320px;
  112. }
  113. /**
  114. * The picker box.
  115. */
  116. .picker--time .picker__box {
  117. font-size: 1em;
  118. background: #f2f2f2;
  119. padding: 0;
  120. }
  121. @media (min-height: 40.125em) {
  122. .picker--time .picker__box {
  123. margin-bottom: 5em;
  124. }
  125. }