toolbar.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  1. .btn-toolbar {
  2. display: block;
  3. width: 20px;
  4. height: 20px;
  5. padding: 10px;
  6. text-align: center;
  7. background: #76838f;
  8. border-radius: 6px;
  9. transition: none; }
  10. .btn-toolbar > i {
  11. font-size: 16px;
  12. color: #76838f; }
  13. .btn-toolbar:hover {
  14. cursor: pointer;
  15. background: #589ffc; }
  16. .btn-toolbar:hover > i {
  17. color: white; }
  18. .btn-toolbar-primary {
  19. background-color: #3e8ef7; }
  20. .btn-toolbar-primary.pressed {
  21. background-color: #589ffc; }
  22. .btn-toolbar-primary:hover {
  23. background-color: #589ffc; }
  24. .btn-toolbar-primary > i {
  25. color: white; }
  26. .btn-toolbar-danger {
  27. background-color: #ff4c52; }
  28. .btn-toolbar-danger.pressed {
  29. background-color: #ff666b; }
  30. .btn-toolbar-danger:hover {
  31. background-color: #ff666b; }
  32. .btn-toolbar-danger > i {
  33. color: white; }
  34. .btn-toolbar-warning {
  35. background-color: #eb6709; }
  36. .btn-toolbar-warning.pressed {
  37. background-color: #f57d1b; }
  38. .btn-toolbar-warning:hover {
  39. background-color: #f57d1b; }
  40. .btn-toolbar-warning > i {
  41. color: white; }
  42. .btn-toolbar-info {
  43. background-color: #0bb2d4; }
  44. .btn-toolbar-info.pressed {
  45. background-color: #28c0de; }
  46. .btn-toolbar-info:hover {
  47. background-color: #28c0de; }
  48. .btn-toolbar-info > i {
  49. color: white; }
  50. .btn-toolbar-success {
  51. background-color: #11c26d; }
  52. .btn-toolbar-success.pressed {
  53. background-color: #28d17c; }
  54. .btn-toolbar-success:hover {
  55. background-color: #28d17c; }
  56. .btn-toolbar-success > i {
  57. color: white; }
  58. .btn-toolbar-info-o {
  59. background-color: #526069; }
  60. .btn-toolbar-info-o.pressed {
  61. background-color: #76838f; }
  62. .btn-toolbar-info-o:hover {
  63. background-color: #76838f; }
  64. .btn-toolbar-info-o > i {
  65. color: white; }
  66. .btn-toolbar-light {
  67. background-color: #f3f7f9; }
  68. .btn-toolbar-light.pressed {
  69. background-color: #e4eaec; }
  70. .btn-toolbar-light:hover {
  71. background-color: #e4eaec; }
  72. .btn-toolbar-light > i {
  73. color: white; }
  74. .btn-toolbar-dark {
  75. background-color: #76838f; }
  76. .btn-toolbar-dark.pressed {
  77. background-color: #526069; }
  78. .btn-toolbar-dark:hover {
  79. background-color: #526069; }
  80. .btn-toolbar-dark > i {
  81. color: white; }
  82. .tool-container {
  83. position: absolute;
  84. box-sizing: content-box;
  85. background-color: #e4eaec;
  86. background-size: 100% 100%;
  87. border-radius: 6px; }
  88. .tool-container.tool-top, .tool-container.tool-bottom {
  89. height: 40px;
  90. border-bottom: 0 solid #beb8b8; }
  91. .tool-container.tool-top .tool-item, .tool-container.tool-bottom .tool-item {
  92. float: left;
  93. border-right: 0;
  94. border-left: 0; }
  95. .tool-item {
  96. box-sizing: content-box;
  97. display: block;
  98. width: 20px;
  99. height: 100%;
  100. height: 20px;
  101. padding: 10px;
  102. text-align: center;
  103. transition: none; }
  104. .tool-item > .icon {
  105. color: #76838f; }
  106. .tool-item.selected, .tool-item:hover {
  107. background: #589ffc; }
  108. .tool-item.selected > .icon, .tool-item:hover > .icon {
  109. color: white; }
  110. .tool-top .tool-item:first-child:hover, .tool-bottom .tool-item:first-child:hover {
  111. border-top-left-radius: 6px;
  112. border-bottom-left-radius: 6px; }
  113. .tool-top .tool-item:last-child:hover, .tool-bottom .tool-item:last-child:hover {
  114. border-top-right-radius: 6px;
  115. border-bottom-right-radius: 6px; }
  116. .tool-vertical-top .tool-item:first-child:hover, .tool-vertical-bottom .tool-item:first-child:hover, .tool-right .tool-item:first-child:hover, .tool-left .tool-item:first-child:hover {
  117. border-top-left-radius: 6px;
  118. border-top-right-radius: 6px; }
  119. .tool-vertical-top .tool-item:last-child:hover, .tool-vertical-bottom .tool-item:last-child:hover, .tool-right .tool-item:last-child:hover, .tool-left .tool-item:last-child:hover {
  120. border-bottom-right-radius: 6px;
  121. border-bottom-left-radius: 6px; }
  122. .tool-container .arrow {
  123. position: absolute;
  124. width: 0;
  125. height: 0;
  126. border-style: solid;
  127. border-width: 7px; }
  128. .tool-container.tool-top .arrow {
  129. bottom: -14px;
  130. left: 50%;
  131. margin-left: -7px;
  132. border-color: #e4eaec transparent transparent; }
  133. .tool-container.tool-bottom .arrow {
  134. top: -14px;
  135. left: 50%;
  136. margin-left: -7px;
  137. border-color: transparent transparent #e4eaec; }
  138. .tool-container.tool-left .arrow {
  139. top: 50%;
  140. right: -14px;
  141. margin-top: -7px;
  142. border-color: transparent transparent transparent #e4eaec; }
  143. .tool-container.tool-right .arrow {
  144. top: 50%;
  145. left: -14px;
  146. margin-top: -7px;
  147. border-color: transparent #e4eaec transparent transparent; }
  148. .toolbar-primary {
  149. background-color: #589ffc; }
  150. .toolbar-primary.tool-top .arrow {
  151. border-color: #589ffc transparent transparent; }
  152. .toolbar-primary.tool-bottom .arrow {
  153. border-color: transparent transparent #589ffc; }
  154. .toolbar-primary.tool-left .arrow {
  155. border-color: transparent transparent transparent #589ffc; }
  156. .toolbar-primary.tool-right .arrow {
  157. border-color: transparent #589ffc transparent transparent; }
  158. .toolbar-primary .tool-item > .icon {
  159. color: white; }
  160. .toolbar-primary .tool-item.selected, .toolbar-primary .tool-item:hover {
  161. color: white;
  162. background: #3e8ef7; }
  163. .toolbar-danger {
  164. background-color: #ff666b; }
  165. .toolbar-danger.tool-top .arrow {
  166. border-color: #ff666b transparent transparent; }
  167. .toolbar-danger.tool-bottom .arrow {
  168. border-color: transparent transparent #ff666b; }
  169. .toolbar-danger.tool-left .arrow {
  170. border-color: transparent transparent transparent #ff666b; }
  171. .toolbar-danger.tool-right .arrow {
  172. border-color: transparent #ff666b transparent transparent; }
  173. .toolbar-danger .tool-item > .icon {
  174. color: white; }
  175. .toolbar-danger .tool-item.selected, .toolbar-danger .tool-item:hover {
  176. color: white;
  177. background: #ff4c52; }
  178. .toolbar-warning {
  179. background-color: #eb6709; }
  180. .toolbar-warning.tool-top .arrow {
  181. border-color: #eb6709 transparent transparent; }
  182. .toolbar-warning.tool-bottom .arrow {
  183. border-color: transparent transparent #eb6709; }
  184. .toolbar-warning.tool-left .arrow {
  185. border-color: transparent transparent transparent #eb6709; }
  186. .toolbar-warning.tool-right .arrow {
  187. border-color: transparent #eb6709 transparent transparent; }
  188. .toolbar-warning .tool-item > .icon {
  189. color: white; }
  190. .toolbar-warning .tool-item.selected, .toolbar-warning .tool-item:hover {
  191. color: white;
  192. background: #f57d1b; }
  193. .toolbar-info {
  194. background-color: #0bb2d4; }
  195. .toolbar-info.tool-top .arrow {
  196. border-color: #0bb2d4 transparent transparent; }
  197. .toolbar-info.tool-bottom .arrow {
  198. border-color: transparent transparent #0bb2d4; }
  199. .toolbar-info.tool-left .arrow {
  200. border-color: transparent transparent transparent #0bb2d4; }
  201. .toolbar-info.tool-right .arrow {
  202. border-color: transparent #0bb2d4 transparent transparent; }
  203. .toolbar-info .tool-item > .icon {
  204. color: white; }
  205. .toolbar-info .tool-item.selected, .toolbar-info .tool-item:hover {
  206. color: white;
  207. background: #28c0de; }
  208. .toolbar-success {
  209. background-color: #11c26d; }
  210. .toolbar-success.tool-top .arrow {
  211. border-color: #11c26d transparent transparent; }
  212. .toolbar-success.tool-bottom .arrow {
  213. border-color: transparent transparent #11c26d; }
  214. .toolbar-success.tool-left .arrow {
  215. border-color: transparent transparent transparent #11c26d; }
  216. .toolbar-success.tool-right .arrow {
  217. border-color: transparent #11c26d transparent transparent; }
  218. .toolbar-success .tool-item > .icon {
  219. color: white; }
  220. .toolbar-success .tool-item.selected, .toolbar-success .tool-item:hover {
  221. color: white;
  222. background: #28d17c; }
  223. .toolbar-info-o {
  224. background-color: #526069; }
  225. .toolbar-info-o.tool-top .arrow {
  226. border-color: #526069 transparent transparent; }
  227. .toolbar-info-o.tool-bottom .arrow {
  228. border-color: transparent transparent #526069; }
  229. .toolbar-info-o.tool-left .arrow {
  230. border-color: transparent transparent transparent #526069; }
  231. .toolbar-info-o.tool-right .arrow {
  232. border-color: transparent #526069 transparent transparent; }
  233. .toolbar-info-o .tool-item > .icon {
  234. color: white; }
  235. .toolbar-info-o .tool-item.selected, .toolbar-info-o .tool-item:hover {
  236. color: white;
  237. background: #76838f; }
  238. .toolbar-light {
  239. background-color: #f3f7f9; }
  240. .toolbar-light.tool-top .arrow {
  241. border-color: #f3f7f9 transparent transparent; }
  242. .toolbar-light.tool-bottom .arrow {
  243. border-color: transparent transparent #f3f7f9; }
  244. .toolbar-light.tool-left .arrow {
  245. border-color: transparent transparent transparent #f3f7f9; }
  246. .toolbar-light.tool-right .arrow {
  247. border-color: transparent #f3f7f9 transparent transparent; }
  248. .toolbar-light .tool-item > .icon {
  249. color: white; }
  250. .toolbar-light .tool-item.selected, .toolbar-light .tool-item:hover {
  251. color: white;
  252. background: #e4eaec; }
  253. .toolbar-dark {
  254. background-color: #76838f; }
  255. .toolbar-dark.tool-top .arrow {
  256. border-color: #76838f transparent transparent; }
  257. .toolbar-dark.tool-bottom .arrow {
  258. border-color: transparent transparent #76838f; }
  259. .toolbar-dark.tool-left .arrow {
  260. border-color: transparent transparent transparent #76838f; }
  261. .toolbar-dark.tool-right .arrow {
  262. border-color: transparent #76838f transparent transparent; }
  263. .toolbar-dark .tool-item > .icon {
  264. color: white; }
  265. .toolbar-dark .tool-item.selected, .toolbar-dark .tool-item:hover {
  266. color: white;
  267. background: #526069; }
  268. .animate-standard {
  269. -webkit-animation: standardAnimate .3s 1 ease; }
  270. .animate-flyin {
  271. -webkit-animation: rotateAnimate .5s 1 ease; }
  272. .animate-grow {
  273. -webkit-animation: growAnimate .4s 1 ease; }
  274. .animate-flip {
  275. -webkit-animation: flipAnimate .4s 1 ease; }
  276. .animate-bounce {
  277. -webkit-animation: bounceAnimate .4s 1 ease-out; }
  278. @-webkit-keyframes rotateAnimate {
  279. from {
  280. opacity: 0;
  281. -webkit-transform: rotate(180deg) translate(-120px);
  282. transform: rotate(180deg) translate(-120px); }
  283. to {
  284. opacity: 1;
  285. -webkit-transform: rotate(0deg) translate(0);
  286. transform: rotate(0deg) translate(0); } }
  287. @-webkit-keyframes standardAnimate {
  288. from {
  289. opacity: 0;
  290. -webkit-transform: translateY(20px);
  291. transform: translateY(20px); }
  292. to {
  293. opacity: 1;
  294. -webkit-transform: translateY(0);
  295. transform: translateY(0); } }
  296. @-webkit-keyframes growAnimate {
  297. 0% {
  298. opacity: 0;
  299. -webkit-transform: scale(0) translateY(40px);
  300. transform: scale(0) translateY(40px); }
  301. 70% {
  302. -webkit-transform: scale(1.5) translate(0);
  303. transform: scale(1.5) translate(0); }
  304. 100% {
  305. opacity: 1;
  306. -webkit-transform: scale(1) translate(0);
  307. transform: scale(1) translate(0); } }
  308. @-webkit-keyframes rotate2Animate {
  309. from {
  310. opacity: 0;
  311. -webkit-transform: rotate(-90deg);
  312. transform: rotate(-90deg);
  313. -webkit-transform-origin: 0% 100%;
  314. transform-origin: 0% 100%; }
  315. to {
  316. opacity: 1;
  317. -webkit-transform: rotate(0deg);
  318. transform: rotate(0deg); } }
  319. @-webkit-keyframes flipAnimate {
  320. from {
  321. opacity: 0;
  322. -webkit-transform: rotate3d(2, 2, 2, 180deg);
  323. transform: rotate3d(2, 2, 2, 180deg); }
  324. to {
  325. opacity: 1;
  326. -webkit-transform: rotate3d(0, 0, 0, 0deg);
  327. transform: rotate3d(0, 0, 0, 0deg); } }
  328. @-webkit-keyframes bounceAnimate {
  329. 0% {
  330. opacity: 0;
  331. -webkit-transform: translateY(40px);
  332. transform: translateY(40px); }
  333. 30% {
  334. -webkit-transform: translateY(-40px);
  335. transform: translateY(-40px); }
  336. 70% {
  337. -webkit-transform: translateY(20px);
  338. transform: translateY(20px); }
  339. 100% {
  340. opacity: 1;
  341. -webkit-transform: translateY(0);
  342. transform: translateY(0); } }
  343. .hidden {
  344. display: none; }