説明なし

default.time.css 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /* ==========================================================================
  2. $BASE-TIME-PICKER
  3. ========================================================================== */
  4. /**
  5. * The list of times.
  6. */
  7. .um .picker__list {
  8. list-style: none;
  9. list-style: none !important;
  10. padding: 5px !important;
  11. margin: 0px !important;
  12. }
  13. /**
  14. * The times on the clock.
  15. */
  16. .um .picker__list-item {
  17. position: relative;
  18. border-radius: 2px;
  19. display: inline-block;
  20. width: 25%;
  21. text-align: center;
  22. box-sizing: border-box;
  23. padding: 6px 0px !important;
  24. margin: 5px 0 !important;
  25. }
  26. @media (min-height: 46.75em) {
  27. .um .picker__list-item {
  28. }
  29. }
  30. /* Hovered time */
  31. .um .picker__list-item:hover {
  32. cursor: pointer;
  33. z-index: 10;
  34. }
  35. /* Highlighted and hovered/focused time */
  36. .um .picker__list-item--highlighted {
  37. z-index: 10;
  38. }
  39. .um .picker__list-item--highlighted:hover,
  40. .um .picker--focused .picker__list-item--highlighted {
  41. cursor: pointer;
  42. font-weight: bold;
  43. }
  44. /* Selected and hovered/focused time */
  45. .um .picker__list-item--selected,
  46. .um .picker__list-item--selected:hover,
  47. .um .picker--focused .picker__list-item--selected {
  48. z-index: 10;
  49. }
  50. /* Disabled time */
  51. .um .picker__list-item--disabled,
  52. .um .picker__list-item--disabled:hover,
  53. .um .picker--focused .picker__list-item--disabled {
  54. color: #a9e792;
  55. cursor: default;
  56. background: transparent;
  57. z-index: auto;
  58. }
  59. /**
  60. * The clear button
  61. */
  62. .um .picker--time .picker__button--clear {
  63. width: 100%;
  64. display: inline-block;
  65. background: none;
  66. box-shadow: none !important;
  67. border: 0!important;
  68. outline: 0 !important;
  69. background: none !important;
  70. border-radius: 0 0 2px 2px;
  71. color: #fff !important;
  72. }
  73. .um .picker--time .picker__button--clear:hover,
  74. .um .picker--time .picker__button--clear:focus {
  75. cursor: pointer;
  76. }
  77. /* ==========================================================================
  78. $DEFAULT-TIME-PICKER
  79. ========================================================================== */
  80. /**
  81. * The frame the bounds the time picker.
  82. */
  83. .um .picker--time .picker__frame {
  84. min-width: 256px;
  85. max-width: 400px;
  86. }
  87. /**
  88. * The picker box.
  89. */
  90. .um .picker--time .picker__box {
  91. font-size: 15px;
  92. padding: 0;
  93. border-radius: 2px !important;
  94. }
  95. .um .picker__box ul li[role="presentation"] {
  96. margin: 10px 0 0 0;
  97. }
  98. @media (min-height: 40.125em) {
  99. .um .picker--time .picker__frame {
  100. margin-bottom: 10% !important;
  101. }
  102. }