styles.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed,
  11. figure, figcaption, footer, header, hgroup,
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14. margin: 0;
  15. padding: 0;
  16. border: 0;
  17. font-size: 100%;
  18. font: inherit;
  19. vertical-align: baseline;
  20. }
  21. /* HTML5 display-role reset for older browsers */
  22. article, aside, details, figcaption, figure,
  23. footer, header, hgroup, menu, nav, section {
  24. display: block;
  25. }
  26. body {
  27. line-height: 1;
  28. }
  29. ol, ul {
  30. list-style: none;
  31. }
  32. blockquote, q {
  33. quotes: none;
  34. }
  35. blockquote:before, blockquote:after,
  36. q:before, q:after {
  37. content: '';
  38. content: none;
  39. }
  40. table {
  41. border-collapse: collapse;
  42. border-spacing: 0;
  43. }
  44. body {
  45. background: #eee;
  46. }
  47. .mixitup-control,
  48. .mixitup-pager {
  49. cursor: pointer;
  50. display: inline-block;
  51. padding: .5rem;
  52. background: #eee;
  53. }
  54. .mixitup-control-active,
  55. .mixitup-pager-active {
  56. font-weight: bold;
  57. }
  58. .mixitup-pager-disabled {
  59. opacity: .8;
  60. }
  61. .mix {
  62. vertical-align: top;
  63. background: skyblue;
  64. border-radius: 5px;
  65. margin: 2rem;
  66. color: transparent;
  67. transition: opacity 300ms;
  68. -webkit-user-select: none;
  69. }
  70. .mix,
  71. .gap {
  72. display: inline-block;
  73. width: 6%;
  74. margin: 0 2rem;
  75. }
  76. .mix {
  77. margin: 2rem;
  78. }
  79. .mix:before {
  80. content: '';
  81. display: inline-block;
  82. padding-top: 100%;
  83. }
  84. .mixitup-target-placeholder {
  85. background: transparent !important;
  86. border: 2px dashed #ccc;
  87. box-sizing: border-box;
  88. }
  89. .mixitup-target-dragging {
  90. opacity: .5;
  91. }
  92. .mixitup-target-closest {
  93. border: 3px solid orange;
  94. }
  95. .sandbox {
  96. overflow: hidden;
  97. text-align: justify;
  98. background: #333;
  99. min-height: 2rem;
  100. }
  101. .sandbox:after {
  102. content: '';
  103. width: 100%;
  104. display: inline-block;
  105. }
  106. .sandbox__mixitup .mix {
  107. }
  108. .mix.cat-2 {
  109. background: violet;
  110. }
  111. .mix.cat-3 {
  112. background: yellow;
  113. }
  114. .mix.cat-4 {
  115. background: aquamarine;
  116. }