Нет описания

default.css 3.8KB

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