Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /*
  2. FLEXBOX
  3. Media Query Extensions:
  4. -ns = not-small
  5. -m = medium
  6. -l = large
  7. */
  8. .flex { display: flex; }
  9. .inline-flex { display: inline-flex; }
  10. /* 1. Fix for Chrome 44 bug.
  11. * https://code.google.com/p/chromium/issues/detail?id=506893 */
  12. .flex-auto {
  13. flex: 1 1 auto;
  14. min-width: 0; /* 1 */
  15. min-height: 0; /* 1 */
  16. }
  17. .flex-none { flex: none; }
  18. .flex-column { flex-direction: column; }
  19. .flex-row { flex-direction: row; }
  20. .flex-wrap { flex-wrap: wrap; }
  21. .flex-column-reverse { flex-direction: column-reverse; }
  22. .flex-row-reverse { flex-direction: row-reverse; }
  23. .flex-wrap-reverse { flex-wrap: wrap-reverse; }
  24. .items-start { align-items: flex-start; }
  25. .items-end { align-items: flex-end; }
  26. .items-center { align-items: center; }
  27. .items-baseline { align-items: baseline; }
  28. .items-stretch { align-items: stretch; }
  29. .self-start { align-self: flex-start; }
  30. .self-end { align-self: flex-end; }
  31. .self-center { align-self: center; }
  32. .self-baseline { align-self: baseline; }
  33. .self-stretch { align-self: stretch; }
  34. .justify-start { justify-content: flex-start; }
  35. .justify-end { justify-content: flex-end; }
  36. .justify-center { justify-content: center; }
  37. .justify-between { justify-content: space-between; }
  38. .justify-around { justify-content: space-around; }
  39. .content-start { align-content: flex-start; }
  40. .content-end { align-content: flex-end; }
  41. .content-center { align-content: center; }
  42. .content-between { align-content: space-between; }
  43. .content-around { align-content: space-around; }
  44. .content-stretch { align-content: stretch; }
  45. .order-0 { order: 0; }
  46. .order-1 { order: 1; }
  47. .order-2 { order: 2; }
  48. .order-3 { order: 3; }
  49. .order-4 { order: 4; }
  50. .order-5 { order: 5; }
  51. .order-6 { order: 6; }
  52. .order-7 { order: 7; }
  53. .order-8 { order: 8; }
  54. .order-last { order: 99999; }
  55. @media (--breakpoint-not-small) {
  56. .flex-ns { display: flex; }
  57. .inline-flex-ns { display: inline-flex; }
  58. .flex-auto-ns {
  59. flex: 1 1 auto;
  60. min-width: 0; /* 1 */
  61. min-height: 0; /* 1 */
  62. }
  63. .flex-none-ns { flex: none; }
  64. .flex-column-ns { flex-direction: column; }
  65. .flex-row-ns { flex-direction: row; }
  66. .flex-wrap-ns { flex-wrap: wrap; }
  67. .flex-column-reverse-ns { flex-direction: column-reverse; }
  68. .flex-row-reverse-ns { flex-direction: row-reverse; }
  69. .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
  70. .items-start-ns { align-items: flex-start; }
  71. .items-end-ns { align-items: flex-end; }
  72. .items-center-ns { align-items: center; }
  73. .items-baseline-ns { align-items: baseline; }
  74. .items-stretch-ns { align-items: stretch; }
  75. .self-start-ns { align-self: flex-start; }
  76. .self-end-ns { align-self: flex-end; }
  77. .self-center-ns { align-self: center; }
  78. .self-baseline-ns { align-self: baseline; }
  79. .self-stretch-ns { align-self: stretch; }
  80. .justify-start-ns { justify-content: flex-start; }
  81. .justify-end-ns { justify-content: flex-end; }
  82. .justify-center-ns { justify-content: center; }
  83. .justify-between-ns { justify-content: space-between; }
  84. .justify-around-ns { justify-content: space-around; }
  85. .content-start-ns { align-content: flex-start; }
  86. .content-end-ns { align-content: flex-end; }
  87. .content-center-ns { align-content: center; }
  88. .content-between-ns { align-content: space-between; }
  89. .content-around-ns { align-content: space-around; }
  90. .content-stretch-ns { align-content: stretch; }
  91. .order-0-ns { order: 0; }
  92. .order-1-ns { order: 1; }
  93. .order-2-ns { order: 2; }
  94. .order-3-ns { order: 3; }
  95. .order-4-ns { order: 4; }
  96. .order-5-ns { order: 5; }
  97. .order-6-ns { order: 6; }
  98. .order-7-ns { order: 7; }
  99. .order-8-ns { order: 8; }
  100. .order-last-ns { order: 99999; }
  101. }
  102. @media (--breakpoint-medium) {
  103. .flex-m { display: flex; }
  104. .inline-flex-m { display: inline-flex; }
  105. .flex-auto-m {
  106. flex: 1 1 auto;
  107. min-width: 0; /* 1 */
  108. min-height: 0; /* 1 */
  109. }
  110. .flex-none-m { flex: none; }
  111. .flex-column-m { flex-direction: column; }
  112. .flex-row-m { flex-direction: row; }
  113. .flex-wrap-m { flex-wrap: wrap; }
  114. .flex-column-reverse-m { flex-direction: column-reverse; }
  115. .flex-row-reverse-m { flex-direction: row-reverse; }
  116. .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
  117. .items-start-m { align-items: flex-start; }
  118. .items-end-m { align-items: flex-end; }
  119. .items-center-m { align-items: center; }
  120. .items-baseline-m { align-items: baseline; }
  121. .items-stretch-m { align-items: stretch; }
  122. .self-start-m { align-self: flex-start; }
  123. .self-end-m { align-self: flex-end; }
  124. .self-center-m { align-self: center; }
  125. .self-baseline-m { align-self: baseline; }
  126. .self-stretch-m { align-self: stretch; }
  127. .justify-start-m { justify-content: flex-start; }
  128. .justify-end-m { justify-content: flex-end; }
  129. .justify-center-m { justify-content: center; }
  130. .justify-between-m { justify-content: space-between; }
  131. .justify-around-m { justify-content: space-around; }
  132. .content-start-m { align-content: flex-start; }
  133. .content-end-m { align-content: flex-end; }
  134. .content-center-m { align-content: center; }
  135. .content-between-m { align-content: space-between; }
  136. .content-around-m { align-content: space-around; }
  137. .content-stretch-m { align-content: stretch; }
  138. .order-0-m { order: 0; }
  139. .order-1-m { order: 1; }
  140. .order-2-m { order: 2; }
  141. .order-3-m { order: 3; }
  142. .order-4-m { order: 4; }
  143. .order-5-m { order: 5; }
  144. .order-6-m { order: 6; }
  145. .order-7-m { order: 7; }
  146. .order-8-m { order: 8; }
  147. .order-last-m { order: 99999; }
  148. }
  149. @media (--breakpoint-large) {
  150. .flex-l { display: flex; }
  151. .inline-flex-l { display: inline-flex; }
  152. .flex-auto-l {
  153. flex: 1 1 auto;
  154. min-width: 0; /* 1 */
  155. min-height: 0; /* 1 */
  156. }
  157. .flex-none-l { flex: none; }
  158. .flex-column-l { flex-direction: column; }
  159. .flex-row-l { flex-direction: row; }
  160. .flex-wrap-l { flex-wrap: wrap; }
  161. .flex-column-reverse-l { flex-direction: column-reverse; }
  162. .flex-row-reverse-l { flex-direction: row-reverse; }
  163. .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
  164. .items-start-l { align-items: flex-start; }
  165. .items-end-l { align-items: flex-end; }
  166. .items-center-l { align-items: center; }
  167. .items-baseline-l { align-items: baseline; }
  168. .items-stretch-l { align-items: stretch; }
  169. .self-start-l { align-self: flex-start; }
  170. .self-end-l { align-self: flex-end; }
  171. .self-center-l { align-self: center; }
  172. .self-baseline-l { align-self: baseline; }
  173. .self-stretch-l { align-self: stretch; }
  174. .justify-start-l { justify-content: flex-start; }
  175. .justify-end-l { justify-content: flex-end; }
  176. .justify-center-l { justify-content: center; }
  177. .justify-between-l { justify-content: space-between; }
  178. .justify-around-l { justify-content: space-around; }
  179. .content-start-l { align-content: flex-start; }
  180. .content-end-l { align-content: flex-end; }
  181. .content-center-l { align-content: center; }
  182. .content-between-l { align-content: space-between; }
  183. .content-around-l { align-content: space-around; }
  184. .content-stretch-l { align-content: stretch; }
  185. .order-0-l { order: 0; }
  186. .order-1-l { order: 1; }
  187. .order-2-l { order: 2; }
  188. .order-3-l { order: 3; }
  189. .order-4-l { order: 4; }
  190. .order-5-l { order: 5; }
  191. .order-6-l { order: 6; }
  192. .order-7-l { order: 7; }
  193. .order-8-l { order: 8; }
  194. .order-last-l { order: 99999; }
  195. }