miscellaneous.less 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. /*
  2. * General: Miscellaneous
  3. * ----------------------
  4. */
  5. // 10px padding and margins
  6. .pad {
  7. padding: 10px;
  8. }
  9. .margin {
  10. margin: 10px;
  11. }
  12. .margin-bottom {
  13. margin-bottom: 20px;
  14. }
  15. // Display inline
  16. .inline {
  17. display: inline;
  18. }
  19. // Description Blocks
  20. .description-block {
  21. display: block;
  22. margin: 10px 0;
  23. text-align: center;
  24. &.margin-bottom {
  25. margin-bottom: 25px;
  26. }
  27. > .description-header {
  28. margin: 0;
  29. padding: 0;
  30. font-weight: 600;
  31. font-size: 16px;
  32. }
  33. > .description-text {
  34. text-transform: uppercase;
  35. }
  36. }
  37. // Background colors
  38. .bg-red,
  39. .bg-yellow,
  40. .bg-aqua,
  41. .bg-blue,
  42. .bg-light-blue,
  43. .bg-green,
  44. .bg-navy,
  45. .bg-teal,
  46. .bg-olive,
  47. .bg-lime,
  48. .bg-orange ,
  49. .bg-fuchsia,
  50. .bg-purple,
  51. .bg-maroon,
  52. .bg-black,
  53. .bg-red-active,
  54. .bg-yellow-active,
  55. .bg-aqua-active,
  56. .bg-blue-active,
  57. .bg-light-blue-active,
  58. .bg-green-active,
  59. .bg-navy-active,
  60. .bg-teal-active,
  61. .bg-olive-active,
  62. .bg-lime-active,
  63. .bg-orange-active,
  64. .bg-fuchsia-active,
  65. .bg-purple-active,
  66. .bg-maroon-active,
  67. .bg-black-active {
  68. color: #fff !important;
  69. }
  70. .bg-gray {
  71. color: #000;
  72. background-color: @gray!important;
  73. }
  74. .bg-black {
  75. background-color: @black!important;
  76. }
  77. .bg-red {
  78. background-color: @red !important;
  79. }
  80. .bg-yellow {
  81. background-color: @yellow !important;
  82. }
  83. .bg-aqua {
  84. background-color: @aqua !important;
  85. }
  86. .bg-blue {
  87. background-color: @blue !important;
  88. }
  89. .bg-light-blue {
  90. background-color: @light-blue !important;
  91. }
  92. .bg-green {
  93. background-color: @green !important;
  94. }
  95. .bg-navy {
  96. background-color: @navy !important;
  97. }
  98. .bg-teal {
  99. background-color: @teal !important;
  100. }
  101. .bg-olive {
  102. background-color: @olive !important;
  103. }
  104. .bg-lime {
  105. background-color: @lime !important;
  106. }
  107. .bg-orange {
  108. background-color: @orange !important;
  109. }
  110. .bg-fuchsia {
  111. background-color: @fuchsia !important;
  112. }
  113. .bg-purple {
  114. background-color: @purple !important;
  115. }
  116. .bg-maroon {
  117. background-color: @maroon !important;
  118. }
  119. //Set of Active Background Colors
  120. .bg-gray-active {
  121. color: #000;
  122. background-color: darken(@gray,10%)!important;
  123. }
  124. .bg-black-active {
  125. background-color: darken(@black, 10%)!important;
  126. }
  127. .bg-red-active {
  128. background-color: darken(@red , 6%)!important;
  129. }
  130. .bg-yellow-active {
  131. background-color: darken(@yellow , 6%)!important;
  132. }
  133. .bg-aqua-active {
  134. background-color: darken(@aqua , 6%)!important;
  135. }
  136. .bg-blue-active {
  137. background-color: darken(@blue , 10%)!important;
  138. }
  139. .bg-light-blue-active {
  140. background-color: darken(@light-blue , 6%)!important;
  141. }
  142. .bg-green-active {
  143. background-color: darken(@green , 5%)!important;
  144. }
  145. .bg-navy-active {
  146. background-color: darken(@navy , 2%)!important;
  147. }
  148. .bg-teal-active {
  149. background-color: darken(@teal , 5%)!important;
  150. }
  151. .bg-olive-active {
  152. background-color: darken(@olive , 5%)!important;
  153. }
  154. .bg-lime-active {
  155. background-color: darken(@lime , 5%)!important;
  156. }
  157. .bg-orange-active {
  158. background-color: darken(@orange , 5%)!important;
  159. }
  160. .bg-fuchsia-active {
  161. background-color: darken(@fuchsia , 5%)!important;
  162. }
  163. .bg-purple-active {
  164. background-color: darken(@purple , 5%)!important;
  165. }
  166. .bg-maroon-active {
  167. background-color: darken(@maroon , 3%)!important;
  168. }
  169. //Disabled!
  170. [class^="bg-"].disabled {
  171. .opacity(.65);
  172. }
  173. // Text colors
  174. .text-red {
  175. color: @red !important;
  176. }
  177. .text-yellow {
  178. color: @yellow !important;
  179. }
  180. .text-aqua {
  181. color: @aqua !important;
  182. }
  183. .text-blue {
  184. color: @blue !important;
  185. }
  186. .text-black {
  187. color: @black!important;
  188. }
  189. .text-light-blue {
  190. color: @light-blue !important;
  191. }
  192. .text-green {
  193. color: @green !important;
  194. }
  195. .text-gray {
  196. color: @gray !important;
  197. }
  198. .text-navy {
  199. color: @navy !important;
  200. }
  201. .text-teal {
  202. color: @teal !important;
  203. }
  204. .text-olive {
  205. color: @olive !important;
  206. }
  207. .text-lime {
  208. color: @lime !important;
  209. }
  210. .text-orange {
  211. color: @orange !important;
  212. }
  213. .text-fuchsia {
  214. color: @fuchsia !important;
  215. }
  216. .text-purple {
  217. color: @purple !important;
  218. }
  219. .text-maroon {
  220. color: @maroon !important;
  221. }
  222. // Hide elements by display none only
  223. .hide {
  224. display: none !important;
  225. }
  226. // Remove borders
  227. .no-border {
  228. border: 0 !important;
  229. }
  230. // Remove padding
  231. .no-padding {
  232. padding: 0 !important;
  233. }
  234. // Remove margins
  235. .no-margin {
  236. margin: 0 !important;
  237. }
  238. // Remove box shadow
  239. .no-shadow {
  240. box-shadow: none!important;
  241. }
  242. // Unstyled List
  243. .list-unstyled {
  244. list-style: none;
  245. margin: 0;
  246. padding: 0;
  247. }
  248. // Remove border radius
  249. .flat {
  250. .border-radius(0)!important;
  251. }
  252. .text-bold {
  253. &, &.table td, &.table th {
  254. font-weight: 700;
  255. }
  256. }
  257. // _fix for sparkline tooltip
  258. .jqstooltip{
  259. padding: 5px!important;
  260. width:auto!important;
  261. height:auto!important;
  262. }
  263. // Gradient Background colors
  264. .bg-teal-gradient {
  265. .gradient(@teal; @teal; lighten(@teal, 16%))!important;
  266. color: #fff;
  267. }
  268. .bg-light-blue-gradient {
  269. .gradient(@light-blue; @light-blue; lighten(@light-blue, 12%))!important;
  270. color: #fff;
  271. }
  272. .bg-blue-gradient {
  273. .gradient(@blue; @blue; lighten(@blue, 7%))!important;
  274. color: #fff;
  275. }
  276. .bg-aqua-gradient {
  277. .gradient(@aqua; @aqua; lighten(@aqua, 7%))!important;
  278. color: #fff;
  279. }
  280. .bg-yellow-gradient {
  281. .gradient(@yellow; @yellow; lighten(@yellow, 16%))!important;
  282. color: #fff;
  283. }
  284. .bg-purple-gradient {
  285. .gradient(@purple; @purple; lighten(@purple, 16%))!important;
  286. color: #fff;
  287. }
  288. .bg-green-gradient {
  289. .gradient(@green; @green; lighten(@green, 7%))!important;
  290. color: #fff;
  291. }
  292. .bg-red-gradient {
  293. .gradient(@red; @red; lighten(@red, 10%))!important;
  294. color: #fff;
  295. }
  296. .bg-black-gradient {
  297. .gradient(@black; @black; lighten(@black, 10%))!important;
  298. color: #fff;
  299. }
  300. .bg-maroon-gradient {
  301. .gradient(@maroon; @maroon; lighten(@maroon, 10%))!important;
  302. color: #fff;
  303. }
  304. .connectedSortable {
  305. min-height: 100px;
  306. }
  307. .ui-helper-hidden-accessible {
  308. border: 0;
  309. clip: rect(0 0 0 0);
  310. height: 1px;
  311. margin: -1px;
  312. overflow: hidden;
  313. padding: 0;
  314. position: absolute;
  315. width: 1px;
  316. }
  317. .sort-highlight {
  318. background: #f4f4f4;
  319. border: 1px dashed #ddd;
  320. margin-bottom: 10px;
  321. }
  322. .full-opacity-hover {
  323. .opacity(.65);
  324. &:hover {
  325. .opacity(1);
  326. }
  327. }
  328. // Charts
  329. .chart {
  330. position: relative;
  331. overflow: hidden;
  332. width: 100%;
  333. svg,
  334. canvas {
  335. width: 100%!important;
  336. }
  337. }