default.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /* ==========================================================================
  2. $BASE-PICKER
  3. ========================================================================== */
  4. /**
  5. * Note: the root picker element should *NOT* be styled more than what’s here.
  6. */
  7. .picker {
  8. font-size: 16px;
  9. text-align: left;
  10. line-height: 1.2;
  11. color: #000;
  12. position: absolute;
  13. z-index: 10000;
  14. -webkit-user-select: none;
  15. -moz-user-select: none;
  16. -ms-user-select: none;
  17. user-select: none;
  18. outline: none;
  19. }
  20. /**
  21. * The picker input element.
  22. */
  23. .picker__input {
  24. cursor: default;
  25. }
  26. /**
  27. * When the picker is opened, the input element is “activated”.
  28. */
  29. .picker__input.picker__input--active {
  30. border-color: #0089ec;
  31. }
  32. /**
  33. * The holder is the only “scrollable” top-level container element.
  34. */
  35. .picker__holder {
  36. width: 100%;
  37. overflow-y: auto;
  38. -webkit-overflow-scrolling: touch;
  39. }
  40. /*!
  41. * Default mobile-first, responsive styling for pickadate.js
  42. * Demo: http://amsul.github.io/pickadate.js
  43. */
  44. /**
  45. * Note: the root picker element should *NOT* be styled more than what’s here.
  46. */
  47. /**
  48. * Make the holder and frame fullscreen.
  49. */
  50. .picker__holder,
  51. .picker__frame {
  52. top: 0;
  53. bottom: 0;
  54. left: 0;
  55. right: 0;
  56. -ms-transform: translateY(100%);
  57. transform: translateY(100%);
  58. }
  59. /**
  60. * The holder should overlay the entire screen.
  61. */
  62. .picker__holder {
  63. position: fixed;
  64. transition: background 0.15s ease-out, transform 0s 0.15s;
  65. -webkit-backface-visibility: hidden;
  66. }
  67. /**
  68. * The frame that bounds the box contents of the picker.
  69. */
  70. .picker__frame {
  71. position: absolute;
  72. margin: 0 auto;
  73. min-width: 256px;
  74. max-width: 666px;
  75. width: 100%;
  76. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  77. filter: alpha(opacity=0);
  78. -moz-opacity: 0;
  79. opacity: 0;
  80. transition: all 0.15s ease-out;
  81. }
  82. @media (min-height: 33.875em) {
  83. .picker__frame {
  84. overflow: visible;
  85. top: auto;
  86. bottom: -100%;
  87. max-height: 80%;
  88. }
  89. }
  90. @media (min-height: 40.125em) {
  91. .picker__frame {
  92. margin-bottom: 7.5%;
  93. }
  94. }
  95. /**
  96. * The wrapper sets the stage to vertically align the box contents.
  97. */
  98. .picker__wrap {
  99. display: table;
  100. width: 100%;
  101. height: 100%;
  102. }
  103. @media (min-height: 33.875em) {
  104. .picker__wrap {
  105. display: block;
  106. }
  107. }
  108. /**
  109. * The box contains all the picker contents.
  110. */
  111. .picker__box {
  112. background: #fff;
  113. display: table-cell;
  114. vertical-align: middle;
  115. }
  116. @media (min-height: 26.5em) {
  117. .picker__box {
  118. font-size: 1.25em;
  119. }
  120. }
  121. @media (min-height: 33.875em) {
  122. .picker__box {
  123. display: block;
  124. font-size: 1.33em;
  125. border: 1px solid #777;
  126. border-top-color: #898989;
  127. border-bottom-width: 0;
  128. border-radius: 5px 5px 0 0;
  129. box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
  130. }
  131. }
  132. @media (min-height: 40.125em) {
  133. .picker__box {
  134. font-size: 1.5em;
  135. border-bottom-width: 1px;
  136. border-radius: 5px;
  137. }
  138. }
  139. /**
  140. * When the picker opens...
  141. */
  142. .picker--opened .picker__holder {
  143. -ms-transform: translateY(0);
  144. transform: translateY(0);
  145. background: transparent;
  146. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
  147. zoom: 1;
  148. background: rgba(0, 0, 0, 0.32);
  149. transition: background 0.15s ease-out;
  150. }
  151. .picker--opened .picker__frame {
  152. -ms-transform: translateY(0);
  153. transform: translateY(0);
  154. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  155. filter: alpha(opacity=100);
  156. -moz-opacity: 1;
  157. opacity: 1;
  158. }
  159. @media (min-height: 33.875em) {
  160. .picker--opened .picker__frame {
  161. top: auto;
  162. bottom: 0;
  163. }
  164. }