buttons.bootstrap4.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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-button-collection.dropdown-menu {
  55. display: block;
  56. z-index: 2002;
  57. -webkit-column-gap: 8px;
  58. -moz-column-gap: 8px;
  59. -ms-column-gap: 8px;
  60. -o-column-gap: 8px;
  61. column-gap: 8px;
  62. }
  63. ul.dt-button-collection.dropdown-menu.fixed {
  64. position: fixed;
  65. top: 50%;
  66. left: 50%;
  67. margin-left: -75px;
  68. border-radius: 0;
  69. }
  70. ul.dt-button-collection.dropdown-menu.fixed.two-column {
  71. margin-left: -150px;
  72. }
  73. ul.dt-button-collection.dropdown-menu.fixed.three-column {
  74. margin-left: -225px;
  75. }
  76. ul.dt-button-collection.dropdown-menu.fixed.four-column {
  77. margin-left: -300px;
  78. }
  79. ul.dt-button-collection.dropdown-menu > * {
  80. -webkit-column-break-inside: avoid;
  81. break-inside: avoid;
  82. }
  83. ul.dt-button-collection.dropdown-menu.two-column {
  84. width: 300px;
  85. padding-bottom: 1px;
  86. -webkit-column-count: 2;
  87. -moz-column-count: 2;
  88. -ms-column-count: 2;
  89. -o-column-count: 2;
  90. column-count: 2;
  91. }
  92. ul.dt-button-collection.dropdown-menu.three-column {
  93. width: 450px;
  94. padding-bottom: 1px;
  95. -webkit-column-count: 3;
  96. -moz-column-count: 3;
  97. -ms-column-count: 3;
  98. -o-column-count: 3;
  99. column-count: 3;
  100. }
  101. ul.dt-button-collection.dropdown-menu.four-column {
  102. width: 600px;
  103. padding-bottom: 1px;
  104. -webkit-column-count: 4;
  105. -moz-column-count: 4;
  106. -ms-column-count: 4;
  107. -o-column-count: 4;
  108. column-count: 4;
  109. }
  110. ul.dt-button-collection.dropdown-menu .dt-button {
  111. border-radius: 0;
  112. }
  113. ul.dt-button-collection {
  114. -webkit-column-gap: 8px;
  115. -moz-column-gap: 8px;
  116. -ms-column-gap: 8px;
  117. -o-column-gap: 8px;
  118. column-gap: 8px;
  119. }
  120. ul.dt-button-collection.fixed {
  121. position: fixed;
  122. top: 50%;
  123. left: 50%;
  124. margin-left: -75px;
  125. border-radius: 0;
  126. }
  127. ul.dt-button-collection.fixed.two-column {
  128. margin-left: -150px;
  129. }
  130. ul.dt-button-collection.fixed.three-column {
  131. margin-left: -225px;
  132. }
  133. ul.dt-button-collection.fixed.four-column {
  134. margin-left: -300px;
  135. }
  136. ul.dt-button-collection > * {
  137. -webkit-column-break-inside: avoid;
  138. break-inside: avoid;
  139. }
  140. ul.dt-button-collection.two-column {
  141. width: 300px;
  142. padding-bottom: 1px;
  143. -webkit-column-count: 2;
  144. -moz-column-count: 2;
  145. -ms-column-count: 2;
  146. -o-column-count: 2;
  147. column-count: 2;
  148. }
  149. ul.dt-button-collection.three-column {
  150. width: 450px;
  151. padding-bottom: 1px;
  152. -webkit-column-count: 3;
  153. -moz-column-count: 3;
  154. -ms-column-count: 3;
  155. -o-column-count: 3;
  156. column-count: 3;
  157. }
  158. ul.dt-button-collection.four-column {
  159. width: 600px;
  160. padding-bottom: 1px;
  161. -webkit-column-count: 4;
  162. -moz-column-count: 4;
  163. -ms-column-count: 4;
  164. -o-column-count: 4;
  165. column-count: 4;
  166. }
  167. ul.dt-button-collection .dt-button {
  168. border-radius: 0;
  169. }
  170. ul.dt-button-collection.fixed {
  171. max-width: none;
  172. }
  173. ul.dt-button-collection.fixed:before, ul.dt-button-collection.fixed:after {
  174. display: none;
  175. }
  176. div.dt-button-background {
  177. position: fixed;
  178. top: 0;
  179. left: 0;
  180. width: 100%;
  181. height: 100%;
  182. z-index: 999;
  183. }
  184. @media screen and (max-width: 767px) {
  185. div.dt-buttons {
  186. float: none;
  187. width: 100%;
  188. text-align: center;
  189. margin-bottom: 0.5em;
  190. }
  191. div.dt-buttons a.btn {
  192. float: none;
  193. }
  194. }
  195. div.dt-buttons button.btn.processing,
  196. div.dt-buttons div.btn.processing,
  197. div.dt-buttons a.btn.processing {
  198. color: rgba(0, 0, 0, 0.2);
  199. }
  200. div.dt-buttons button.btn.processing:after,
  201. div.dt-buttons div.btn.processing:after,
  202. div.dt-buttons a.btn.processing:after {
  203. position: absolute;
  204. top: 50%;
  205. left: 50%;
  206. width: 16px;
  207. height: 16px;
  208. margin: -8px 0 0 -8px;
  209. box-sizing: border-box;
  210. display: block;
  211. content: ' ';
  212. border: 2px solid #282828;
  213. border-radius: 50%;
  214. border-left-color: transparent;
  215. border-right-color: transparent;
  216. animation: dtb-spinner 1500ms infinite linear;
  217. -o-animation: dtb-spinner 1500ms infinite linear;
  218. -ms-animation: dtb-spinner 1500ms infinite linear;
  219. -webkit-animation: dtb-spinner 1500ms infinite linear;
  220. -moz-animation: dtb-spinner 1500ms infinite linear;
  221. }