buttons.bootstrap4.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  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.dataTables_wrapper {
  31. position: relative;
  32. }
  33. div.dt-buttons {
  34. position: initial;
  35. }
  36. div.dt-button-info {
  37. position: fixed;
  38. top: 50%;
  39. left: 50%;
  40. width: 400px;
  41. margin-top: -100px;
  42. margin-left: -200px;
  43. background-color: white;
  44. border: 2px solid #111;
  45. box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.3);
  46. border-radius: 3px;
  47. text-align: center;
  48. z-index: 21;
  49. }
  50. div.dt-button-info h2 {
  51. padding: 0.5em;
  52. margin: 0;
  53. font-weight: normal;
  54. border-bottom: 1px solid #ddd;
  55. background-color: #f3f3f3;
  56. }
  57. div.dt-button-info > div {
  58. padding: 1em;
  59. }
  60. div.dtb-popover-close {
  61. position: absolute;
  62. top: 10px;
  63. right: 10px;
  64. width: 22px;
  65. height: 22px;
  66. border: 1px solid #eaeaea;
  67. background-color: #f9f9f9;
  68. text-align: center;
  69. border-radius: 3px;
  70. cursor: pointer;
  71. z-index: 12;
  72. }
  73. button.dtb-hide-drop {
  74. display: none !important;
  75. }
  76. div.dt-button-collection-title {
  77. text-align: center;
  78. padding: 0.3em 0 0.5em;
  79. margin-left: 0.5em;
  80. margin-right: 0.5em;
  81. font-size: 0.9em;
  82. }
  83. div.dt-button-collection-title:empty {
  84. display: none;
  85. }
  86. span.dt-button-spacer {
  87. display: inline-block;
  88. margin: 0.5em;
  89. white-space: nowrap;
  90. }
  91. span.dt-button-spacer.bar {
  92. border-left: 1px solid rgba(0, 0, 0, 0.3);
  93. vertical-align: middle;
  94. padding-left: 0.5em;
  95. }
  96. span.dt-button-spacer.bar:empty {
  97. height: 1em;
  98. width: 1px;
  99. padding-left: 0;
  100. }
  101. div.dt-button-collection span.dt-button-spacer {
  102. width: 100%;
  103. font-size: 0.9em;
  104. text-align: center;
  105. margin: 0.5em 0;
  106. }
  107. div.dt-button-collection span.dt-button-spacer:empty {
  108. height: 0;
  109. width: 100%;
  110. }
  111. div.dt-button-collection span.dt-button-spacer.bar {
  112. border-left: none;
  113. border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  114. padding-left: 0;
  115. }
  116. div.dt-button-collection {
  117. position: absolute;
  118. z-index: 2001;
  119. background-color: white;
  120. border: 1px solid rgba(0, 0, 0, 0.15);
  121. border-radius: 4px;
  122. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  123. padding: 0.5rem 0;
  124. width: 200px;
  125. }
  126. div.dt-button-collection div.dropdown-menu {
  127. position: relative;
  128. display: block;
  129. z-index: 2002;
  130. min-width: 100%;
  131. background-color: transparent;
  132. border: none;
  133. box-shadow: none;
  134. padding: 0;
  135. border-radius: 0;
  136. }
  137. div.dt-button-collection.fixed {
  138. position: fixed;
  139. display: block;
  140. top: 50%;
  141. left: 50%;
  142. margin-left: -75px;
  143. border-radius: 5px;
  144. background-color: white;
  145. }
  146. div.dt-button-collection.fixed.two-column {
  147. margin-left: -200px;
  148. }
  149. div.dt-button-collection.fixed.three-column {
  150. margin-left: -225px;
  151. }
  152. div.dt-button-collection.fixed.four-column {
  153. margin-left: -300px;
  154. }
  155. div.dt-button-collection.fixed.columns {
  156. margin-left: -409px;
  157. }
  158. @media screen and (max-width: 1024px) {
  159. div.dt-button-collection.fixed.columns {
  160. margin-left: -308px;
  161. }
  162. }
  163. @media screen and (max-width: 640px) {
  164. div.dt-button-collection.fixed.columns {
  165. margin-left: -203px;
  166. }
  167. }
  168. @media screen and (max-width: 460px) {
  169. div.dt-button-collection.fixed.columns {
  170. margin-left: -100px;
  171. }
  172. }
  173. div.dt-button-collection.fixed > :last-child {
  174. max-height: 100vh;
  175. overflow: auto;
  176. }
  177. div.dt-button-collection.two-column > :last-child, div.dt-button-collection.three-column > :last-child, div.dt-button-collection.four-column > :last-child {
  178. display: block !important;
  179. -webkit-column-gap: 8px;
  180. -moz-column-gap: 8px;
  181. -ms-column-gap: 8px;
  182. -o-column-gap: 8px;
  183. column-gap: 8px;
  184. }
  185. div.dt-button-collection.two-column > :last-child > *, div.dt-button-collection.three-column > :last-child > *, div.dt-button-collection.four-column > :last-child > * {
  186. -webkit-column-break-inside: avoid;
  187. break-inside: avoid;
  188. }
  189. div.dt-button-collection.two-column {
  190. width: 400px;
  191. }
  192. div.dt-button-collection.two-column > :last-child {
  193. padding-bottom: 1px;
  194. column-count: 2;
  195. }
  196. div.dt-button-collection.three-column {
  197. width: 450px;
  198. }
  199. div.dt-button-collection.three-column > :last-child {
  200. padding-bottom: 1px;
  201. column-count: 3;
  202. }
  203. div.dt-button-collection.four-column {
  204. width: 600px;
  205. }
  206. div.dt-button-collection.four-column > :last-child {
  207. padding-bottom: 1px;
  208. column-count: 4;
  209. }
  210. div.dt-button-collection .dt-button {
  211. border-radius: 0;
  212. }
  213. div.dt-button-collection.columns {
  214. width: auto;
  215. }
  216. div.dt-button-collection.columns > :last-child {
  217. display: flex;
  218. flex-wrap: wrap;
  219. justify-content: flex-start;
  220. align-items: center;
  221. gap: 6px;
  222. width: 818px;
  223. padding-bottom: 1px;
  224. }
  225. div.dt-button-collection.columns > :last-child .dt-button {
  226. min-width: 200px;
  227. flex: 0 1;
  228. margin: 0;
  229. }
  230. div.dt-button-collection.columns.dtb-b3 > :last-child, div.dt-button-collection.columns.dtb-b2 > :last-child, div.dt-button-collection.columns.dtb-b1 > :last-child {
  231. justify-content: space-between;
  232. }
  233. div.dt-button-collection.columns.dtb-b3 .dt-button {
  234. flex: 1 1 32%;
  235. }
  236. div.dt-button-collection.columns.dtb-b2 .dt-button {
  237. flex: 1 1 48%;
  238. }
  239. div.dt-button-collection.columns.dtb-b1 .dt-button {
  240. flex: 1 1 100%;
  241. }
  242. @media screen and (max-width: 1024px) {
  243. div.dt-button-collection.columns > :last-child {
  244. width: 612px;
  245. }
  246. }
  247. @media screen and (max-width: 640px) {
  248. div.dt-button-collection.columns > :last-child {
  249. width: 406px;
  250. }
  251. div.dt-button-collection.columns.dtb-b3 .dt-button {
  252. flex: 0 1 32%;
  253. }
  254. }
  255. @media screen and (max-width: 460px) {
  256. div.dt-button-collection.columns > :last-child {
  257. width: 200px;
  258. }
  259. }
  260. div.dt-button-collection.fixed:before, div.dt-button-collection.fixed:after {
  261. display: none;
  262. }
  263. div.dt-button-collection .btn-group {
  264. flex: 1 1 auto;
  265. }
  266. div.dt-button-collection .dt-button {
  267. min-width: 200px;
  268. }
  269. div.dt-button-collection div.dt-btn-split-wrapper {
  270. width: 100%;
  271. padding-left: 5px;
  272. padding-right: 5px;
  273. }
  274. div.dt-button-collection button.dt-btn-split-drop-button {
  275. width: 100%;
  276. color: #212529;
  277. border: none;
  278. background-color: white;
  279. border-radius: 0px;
  280. margin-left: 0px !important;
  281. }
  282. div.dt-button-collection button.dt-btn-split-drop-button:focus {
  283. border: none;
  284. border-radius: 0px;
  285. outline: none;
  286. }
  287. div.dt-button-collection button.dt-btn-split-drop-button:hover {
  288. background-color: #e9ecef;
  289. }
  290. div.dt-button-collection button.dt-btn-split-drop-button:active {
  291. background-color: #007bff !important;
  292. }
  293. div.dt-button-background {
  294. position: fixed;
  295. top: 0;
  296. left: 0;
  297. width: 100%;
  298. height: 100%;
  299. z-index: 999;
  300. }
  301. @media screen and (max-width: 767px) {
  302. div.dt-buttons {
  303. float: none;
  304. width: 100%;
  305. text-align: center;
  306. margin-bottom: 0.5em;
  307. }
  308. div.dt-buttons a.btn {
  309. float: none;
  310. }
  311. }
  312. div.dt-buttons button.btn.processing,
  313. div.dt-buttons div.btn.processing,
  314. div.dt-buttons a.btn.processing {
  315. color: rgba(0, 0, 0, 0.2);
  316. }
  317. div.dt-buttons button.btn.processing:after,
  318. div.dt-buttons div.btn.processing:after,
  319. div.dt-buttons a.btn.processing:after {
  320. position: absolute;
  321. top: 50%;
  322. left: 50%;
  323. width: 16px;
  324. height: 16px;
  325. margin: -8px 0 0 -8px;
  326. box-sizing: border-box;
  327. display: block;
  328. content: " ";
  329. border: 2px solid #282828;
  330. border-radius: 50%;
  331. border-left-color: transparent;
  332. border-right-color: transparent;
  333. animation: dtb-spinner 1500ms infinite linear;
  334. -o-animation: dtb-spinner 1500ms infinite linear;
  335. -ms-animation: dtb-spinner 1500ms infinite linear;
  336. -webkit-animation: dtb-spinner 1500ms infinite linear;
  337. -moz-animation: dtb-spinner 1500ms infinite linear;
  338. }
  339. div.dt-buttons div.btn-group {
  340. position: initial;
  341. }
  342. div.dt-btn-split-wrapper:active:not(.disabled) button, div.dt-btn-split-wrapper.active:not(.disabled) button {
  343. background-color: #5a6268;
  344. border-color: #545b62;
  345. }
  346. div.dt-btn-split-wrapper:active:not(.disabled) button.dt-btn-split-drop, div.dt-btn-split-wrapper.active:not(.disabled) button.dt-btn-split-drop {
  347. box-shadow: none;
  348. background-color: #6c757d;
  349. border-color: #6c757d;
  350. }
  351. div.dt-btn-split-wrapper:active:not(.disabled) button:hover, div.dt-btn-split-wrapper.active:not(.disabled) button:hover {
  352. background-color: #5a6268;
  353. border-color: #545b62;
  354. }
  355. div.dataTables_wrapper div.dt-buttons.btn-group div.btn-group {
  356. border-radius: 4px !important;
  357. }
  358. div.dataTables_wrapper div.dt-buttons.btn-group div.btn-group:last-child {
  359. border-top-left-radius: 0px !important;
  360. border-bottom-left-radius: 0px !important;
  361. }
  362. div.dataTables_wrapper div.dt-buttons.btn-group div.btn-group:first-child {
  363. border-top-right-radius: 0px !important;
  364. border-bottom-right-radius: 0px !important;
  365. }
  366. div.dataTables_wrapper div.dt-buttons.btn-group div.btn-group:last-child:first-child {
  367. border-top-left-radius: 4px !important;
  368. border-bottom-left-radius: 4px !important;
  369. border-top-right-radius: 4px !important;
  370. border-bottom-right-radius: 4px !important;
  371. }
  372. div.dataTables_wrapper div.dt-buttons.btn-group div.btn-group button.dt-btn-split-drop:last-child {
  373. border: 1px solid #6c757d;
  374. }
  375. div.dataTables_wrapper div.dt-buttons.btn-group div.btn-group div.dt-btn-split-wrapper {
  376. border: none;
  377. }
  378. div.dt-button-collection div.btn-group {
  379. border-radius: 4px !important;
  380. }
  381. div.dt-button-collection div.btn-group button {
  382. border-radius: 4px;
  383. }
  384. div.dt-button-collection div.btn-group button:last-child {
  385. border-top-left-radius: 0px !important;
  386. border-bottom-left-radius: 0px !important;
  387. }
  388. div.dt-button-collection div.btn-group button:first-child {
  389. border-top-right-radius: 0px !important;
  390. border-bottom-right-radius: 0px !important;
  391. }
  392. div.dt-button-collection div.btn-group button:last-child:first-child {
  393. border-top-left-radius: 4px !important;
  394. border-bottom-left-radius: 4px !important;
  395. border-top-right-radius: 4px !important;
  396. border-bottom-right-radius: 4px !important;
  397. }
  398. div.dt-button-collection div.btn-group button.dt-btn-split-drop:last-child {
  399. border: 1px solid #6c757d;
  400. }
  401. div.dt-button-collection div.btn-group div.dt-btn-split-wrapper {
  402. border: none;
  403. }
  404. span.dt-button-spacer.bar:empty {
  405. height: inherit;
  406. }
  407. div.dt-button-collection span.dt-button-spacer {
  408. padding-left: 1rem !important;
  409. text-align: left;
  410. }