buttons.foundation.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. @keyframes dtb-spinner {
  2. 100% {
  3. transform: rotate(360deg);
  4. }
  5. }
  6. @-o-keyframes dtb-spinner {
  7. 100% {
  8. -o-transform: rotate(360deg);
  9. transform: rotate(360deg);
  10. }
  11. }
  12. @-ms-keyframes dtb-spinner {
  13. 100% {
  14. -ms-transform: rotate(360deg);
  15. transform: rotate(360deg);
  16. }
  17. }
  18. @-webkit-keyframes dtb-spinner {
  19. 100% {
  20. -webkit-transform: rotate(360deg);
  21. transform: rotate(360deg);
  22. }
  23. }
  24. @-moz-keyframes dtb-spinner {
  25. 100% {
  26. -moz-transform: rotate(360deg);
  27. transform: rotate(360deg);
  28. }
  29. }
  30. div.dt-button-info {
  31. position: fixed;
  32. top: 50%;
  33. left: 50%;
  34. width: 400px;
  35. margin-top: -100px;
  36. margin-left: -200px;
  37. background-color: white;
  38. border: 2px solid #111;
  39. box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  40. border-radius: 3px;
  41. text-align: center;
  42. z-index: 21;
  43. }
  44. div.dt-button-info h2 {
  45. padding: 0.5em;
  46. margin: 0;
  47. font-weight: normal;
  48. border-bottom: 1px solid #ddd;
  49. background-color: #f3f3f3;
  50. }
  51. div.dt-button-info > div {
  52. padding: 1em;
  53. }
  54. ul.dt-buttons li {
  55. margin: 0;
  56. }
  57. ul.dt-buttons li.active a {
  58. box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
  59. }
  60. ul.dt-buttons.button-group a {
  61. margin-bottom: 0;
  62. }
  63. ul.dt-button-collection.f-dropdown {
  64. -webkit-column-gap: 8px;
  65. -moz-column-gap: 8px;
  66. -ms-column-gap: 8px;
  67. -o-column-gap: 8px;
  68. column-gap: 8px;
  69. }
  70. ul.dt-button-collection.f-dropdown.fixed {
  71. position: fixed;
  72. top: 50%;
  73. left: 50%;
  74. margin-left: -75px;
  75. border-radius: 0;
  76. }
  77. ul.dt-button-collection.f-dropdown.fixed.two-column {
  78. margin-left: -150px;
  79. }
  80. ul.dt-button-collection.f-dropdown.fixed.three-column {
  81. margin-left: -225px;
  82. }
  83. ul.dt-button-collection.f-dropdown.fixed.four-column {
  84. margin-left: -300px;
  85. }
  86. ul.dt-button-collection.f-dropdown > * {
  87. -webkit-column-break-inside: avoid;
  88. break-inside: avoid;
  89. }
  90. ul.dt-button-collection.f-dropdown.two-column {
  91. width: 300px;
  92. padding-bottom: 1px;
  93. -webkit-column-count: 2;
  94. -moz-column-count: 2;
  95. -ms-column-count: 2;
  96. -o-column-count: 2;
  97. column-count: 2;
  98. }
  99. ul.dt-button-collection.f-dropdown.three-column {
  100. width: 450px;
  101. padding-bottom: 1px;
  102. -webkit-column-count: 3;
  103. -moz-column-count: 3;
  104. -ms-column-count: 3;
  105. -o-column-count: 3;
  106. column-count: 3;
  107. }
  108. ul.dt-button-collection.f-dropdown.four-column {
  109. width: 600px;
  110. padding-bottom: 1px;
  111. -webkit-column-count: 4;
  112. -moz-column-count: 4;
  113. -ms-column-count: 4;
  114. -o-column-count: 4;
  115. column-count: 4;
  116. }
  117. ul.dt-button-collection.f-dropdown .dt-button {
  118. border-radius: 0;
  119. }
  120. ul.dt-button-collection.f-dropdown.fixed {
  121. max-width: none;
  122. }
  123. ul.dt-button-collection.f-dropdown.fixed:before, ul.dt-button-collection.f-dropdown.fixed:after {
  124. display: none;
  125. }
  126. div.dt-button-background {
  127. position: fixed;
  128. top: 0;
  129. left: 0;
  130. width: 100%;
  131. height: 100%;
  132. z-index: 88;
  133. }
  134. @media screen and (max-width: 767px) {
  135. ul.dt-buttons {
  136. float: none;
  137. width: 100%;
  138. text-align: center;
  139. margin-bottom: 0.5rem;
  140. }
  141. ul.dt-buttons li {
  142. float: none;
  143. }
  144. }
  145. div.button-group.stacked.dropdown-pane {
  146. margin-top: 2px;
  147. padding: 1px;
  148. z-index: 89;
  149. }
  150. div.button-group.stacked.dropdown-pane a.button {
  151. margin-bottom: 1px;
  152. border-right: none;
  153. }
  154. div.button-group.stacked.dropdown-pane a.button:last-child {
  155. margin-bottom: 0;
  156. }
  157. div.dt-buttons button.button.processing,
  158. div.dt-buttons div.button.processing,
  159. div.dt-buttons a.button.processing {
  160. color: rgba(0, 0, 0, 0.2);
  161. color: rgba(255, 255, 255, 0.2);
  162. border-top-color: white;
  163. border-bottom-color: white;
  164. }
  165. div.dt-buttons button.button.processing:after,
  166. div.dt-buttons div.button.processing:after,
  167. div.dt-buttons a.button.processing:after {
  168. position: absolute;
  169. top: 50%;
  170. left: 50%;
  171. width: 16px;
  172. height: 16px;
  173. margin: -8px 0 0 -8px;
  174. box-sizing: border-box;
  175. display: block;
  176. content: ' ';
  177. border: 2px solid #282828;
  178. border-radius: 50%;
  179. border-left-color: transparent;
  180. border-right-color: transparent;
  181. animation: dtb-spinner 1500ms infinite linear;
  182. -o-animation: dtb-spinner 1500ms infinite linear;
  183. -ms-animation: dtb-spinner 1500ms infinite linear;
  184. -webkit-animation: dtb-spinner 1500ms infinite linear;
  185. -moz-animation: dtb-spinner 1500ms infinite linear;
  186. }