buttons.bootstrap4.css 4.1 KB

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