_miscellaneous.scss 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  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. .margin-bottom-none {
  16. margin-bottom: 0;
  17. }
  18. .margin-r-5 {
  19. margin-right: 5px;
  20. }
  21. // Display inline
  22. .inline {
  23. display: inline;
  24. }
  25. // Description Blocks
  26. .description-block {
  27. display: block;
  28. margin: 10px 0;
  29. text-align: center;
  30. &.margin-bottom {
  31. margin-bottom: 25px;
  32. }
  33. > .description-header {
  34. margin: 0;
  35. padding: 0;
  36. font-weight: 600;
  37. font-size: 16px;
  38. }
  39. > .description-text {
  40. text-transform: uppercase;
  41. }
  42. }
  43. // Background colors
  44. .bg-red,
  45. .bg-yellow,
  46. .bg-aqua,
  47. .bg-blue,
  48. .bg-light-blue,
  49. .bg-green,
  50. .bg-navy,
  51. .bg-teal,
  52. .bg-olive,
  53. .bg-lime,
  54. .bg-orange,
  55. .bg-fuchsia,
  56. .bg-purple,
  57. .bg-maroon,
  58. .bg-black,
  59. .bg-red-active,
  60. .bg-yellow-active,
  61. .bg-aqua-active,
  62. .bg-blue-active,
  63. .bg-light-blue-active,
  64. .bg-green-active,
  65. .bg-navy-active,
  66. .bg-teal-active,
  67. .bg-olive-active,
  68. .bg-lime-active,
  69. .bg-orange-active,
  70. .bg-fuchsia-active,
  71. .bg-purple-active,
  72. .bg-maroon-active,
  73. .bg-black-active {
  74. color: #fff;
  75. }
  76. .bg-gray {
  77. color: #000;
  78. background-color: $gray;
  79. }
  80. .bg-gray-light {
  81. background-color: #f7f7f7;
  82. }
  83. .bg-black {
  84. background-color: $black;
  85. }
  86. .bg-red {
  87. background-color: $brand-danger;
  88. }
  89. .bg-yellow {
  90. background-color: $brand-warning;
  91. }
  92. .bg-aqua {
  93. background-color: $brand-info;
  94. }
  95. .bg-blue {
  96. background-color: $blue;
  97. }
  98. .bg-light-blue {
  99. background-color: $brand-primary;
  100. }
  101. .bg-green {
  102. background-color: $brand-success;
  103. }
  104. .bg-navy {
  105. background-color: $navy;
  106. }
  107. .bg-teal {
  108. background-color: $teal;
  109. }
  110. .bg-olive {
  111. background-color: $olive;
  112. }
  113. .bg-lime {
  114. background-color: $lime;
  115. }
  116. .bg-orange {
  117. background-color: $orange;
  118. }
  119. .bg-fuchsia {
  120. background-color: $fuchsia;
  121. }
  122. .bg-purple {
  123. background-color: $purple;
  124. }
  125. .bg-maroon {
  126. background-color: $maroon;
  127. }
  128. //Set of Active Background Colors
  129. .bg-gray-active {
  130. color: #000;
  131. background-color: darken($gray, 10%);
  132. }
  133. .bg-black-active {
  134. background-color: darken($black, 10%);
  135. }
  136. .bg-red-active {
  137. background-color: darken($brand-danger, 6%);
  138. }
  139. .bg-yellow-active {
  140. background-color: darken($brand-warning, 6%);
  141. }
  142. .bg-aqua-active {
  143. background-color: darken($brand-info, 6%);
  144. }
  145. .bg-blue-active {
  146. background-color: darken($blue, 10%);
  147. }
  148. .bg-light-blue-active {
  149. background-color: darken($brand-primary, 6%);
  150. }
  151. .bg-green-active {
  152. background-color: darken($brand-success, 5%);
  153. }
  154. .bg-navy-active {
  155. background-color: darken($navy, 2%);
  156. }
  157. .bg-teal-active {
  158. background-color: darken($teal, 5%);
  159. }
  160. .bg-olive-active {
  161. background-color: darken($olive, 5%);
  162. }
  163. .bg-lime-active {
  164. background-color: darken($lime, 5%);
  165. }
  166. .bg-orange-active {
  167. background-color: darken($orange, 5%);
  168. }
  169. .bg-fuchsia-active {
  170. background-color: darken($fuchsia, 5%);
  171. }
  172. .bg-purple-active {
  173. background-color: darken($purple, 5%);
  174. }
  175. .bg-maroon-active {
  176. background-color: darken($maroon, 3%);
  177. }
  178. .bg-white {
  179. background-color: #fff;
  180. }
  181. //Disabled!
  182. [class^="bg-"].disabled {
  183. opacity: .65;
  184. }
  185. // Text colors
  186. .text-red {
  187. color: $brand-danger;
  188. }
  189. .text-yellow {
  190. color: $brand-warning;
  191. }
  192. .text-aqua {
  193. color: $brand-info;
  194. }
  195. .text-blue {
  196. color: $blue;
  197. }
  198. .text-black {
  199. color: $black;
  200. }
  201. .text-light-blue {
  202. color: $brand-primary;
  203. }
  204. .text-green {
  205. color: $brand-success;
  206. }
  207. .text-gray {
  208. color: $gray;
  209. }
  210. .text-navy {
  211. color: $navy;
  212. }
  213. .text-teal {
  214. color: $teal;
  215. }
  216. .text-olive {
  217. color: $olive;
  218. }
  219. .text-lime {
  220. color: $lime;
  221. }
  222. .text-orange {
  223. color: $orange;
  224. }
  225. .text-fuchsia {
  226. color: $fuchsia;
  227. }
  228. .text-purple {
  229. color: $purple;
  230. }
  231. .text-maroon {
  232. color: $maroon;
  233. }
  234. .link-muted {
  235. color: darken($gray, 30%);
  236. &:hover,
  237. &:focus {
  238. color: darken($gray, 40%);
  239. }
  240. }
  241. .link-black {
  242. color: #666;
  243. &:hover,
  244. &:focus {
  245. color: #999;
  246. }
  247. }
  248. // Hide elements by display none only
  249. .hide {
  250. display: none !important;
  251. }
  252. // Remove borders
  253. .no-border {
  254. border: 0 !important;
  255. }
  256. // Remove padding
  257. .no-padding {
  258. padding: 0 !important;
  259. }
  260. // Remove margins
  261. .no-margin {
  262. margin: 0 !important;
  263. }
  264. // Remove box shadow
  265. .no-shadow {
  266. box-shadow: none !important;
  267. }
  268. // Unstyled List
  269. .list-unstyled {
  270. list-style: none;
  271. margin: 0;
  272. padding: 0;
  273. }
  274. .list-group-unbordered {
  275. > .list-group-item {
  276. border-left: 0;
  277. border-right: 0;
  278. border-radius: 0;
  279. padding-left: 0;
  280. padding-right: 0;
  281. }
  282. }
  283. // Remove border radius
  284. .flat {
  285. @include border-radius(0 !important);
  286. }
  287. .text-bold {
  288. &, &.table td, &.table th {
  289. font-weight: 700;
  290. }
  291. }
  292. .text-sm {
  293. font-size: 12px;
  294. }
  295. // _fix for sparkline tooltip
  296. .jqstooltip {
  297. padding: 5px !important;
  298. width: auto !important;
  299. height: auto !important;
  300. }
  301. // Gradient Background colors
  302. .bg-teal-gradient {
  303. @include gradient($teal, $teal, lighten($teal, 16%));
  304. color: #fff;
  305. }
  306. .bg-light-blue-gradient {
  307. @include gradient($brand-primary, $brand-primary, lighten($brand-primary, 12%));
  308. color: #fff;
  309. }
  310. .bg-blue-gradient {
  311. @include gradient($blue, $blue, lighten($blue, 7%));
  312. color: #fff;
  313. }
  314. .bg-aqua-gradient {
  315. @include gradient($brand-info, $brand-info, lighten($brand-info, 7%));
  316. color: #fff;
  317. }
  318. .bg-yellow-gradient {
  319. @include gradient($brand-warning, $brand-warning, lighten($brand-warning, 16%));
  320. color: #fff;
  321. }
  322. .bg-purple-gradient {
  323. @include gradient($purple, $purple, lighten($purple, 16%));
  324. color: #fff;
  325. }
  326. .bg-green-gradient {
  327. @include gradient($brand-success, $brand-success, lighten($brand-success, 7%));
  328. color: #fff;
  329. }
  330. .bg-red-gradient {
  331. @include gradient($brand-danger, $brand-danger, lighten($brand-danger, 10%));
  332. color: #fff;
  333. }
  334. .bg-black-gradient {
  335. @include gradient($black, $black, lighten($black, 10%));
  336. color: #fff;
  337. }
  338. .bg-maroon-gradient {
  339. @include gradient($maroon, $maroon, lighten($maroon, 10%));
  340. color: #fff;
  341. }
  342. //Description Block Extension
  343. .description-block {
  344. .description-icon {
  345. font-size: 16px;
  346. }
  347. }
  348. //Remove top padding
  349. .no-pad-top {
  350. padding-top: 0;
  351. }
  352. //Make position static
  353. .position-static {
  354. position: static !important;
  355. }
  356. //List utility classes
  357. .list-header {
  358. font-size: 15px;
  359. padding: 10px 4px;
  360. font-weight: bold;
  361. color: #666;
  362. }
  363. .list-seperator {
  364. height: 1px;
  365. background: $box-border-color;
  366. margin: 15px 0 9px 0;
  367. }
  368. .list-link {
  369. > a {
  370. padding: 4px;
  371. color: #777;
  372. &:hover {
  373. color: #222;
  374. }
  375. }
  376. }
  377. //Light font weight
  378. .font-light {
  379. font-weight: 300;
  380. }
  381. //User block
  382. .user-block {
  383. @include clearfix();
  384. img {
  385. width: 40px;
  386. height: 40px;
  387. float: left;
  388. }
  389. .username,
  390. .description,
  391. .comment {
  392. display: block;
  393. margin-left: 50px;
  394. }
  395. .username {
  396. font-size: 16px;
  397. font-weight: 600;
  398. }
  399. .description {
  400. color: #999;
  401. font-size: 13px;
  402. }
  403. &.user-block-sm {
  404. img {
  405. @extend .img-sm;
  406. }
  407. .username,
  408. .description,
  409. .comment {
  410. margin-left: 40px;
  411. }
  412. .username {
  413. font-size: 14px;
  414. }
  415. }
  416. }
  417. //Image sizes
  418. .img-sm,
  419. .img-md,
  420. .img-lg {
  421. float: left;
  422. }
  423. .img-sm {
  424. width: 30px !important;
  425. height: 30px !important;
  426. + .img-push {
  427. margin-left: 40px;
  428. }
  429. }
  430. .img-md {
  431. width: 60px;
  432. height: 60px;
  433. + .img-push {
  434. margin-left: 70px;
  435. }
  436. }
  437. .img-lg {
  438. width: 100px;
  439. height: 100px;
  440. + .img-push {
  441. margin-left: 110px;
  442. }
  443. }
  444. // Image bordered
  445. .img-bordered {
  446. border: 3px solid $gray;
  447. padding: 3px;
  448. }
  449. .img-bordered-sm {
  450. border: 2px solid $gray;
  451. padding: 2px;
  452. }
  453. //General attachemnt block
  454. .attachment-block {
  455. border: 1px solid $box-border-color;
  456. padding: 5px;
  457. margin-bottom: 10px;
  458. background: #f7f7f7;
  459. .attachment-img {
  460. max-width: 100px;
  461. max-height: 100px;
  462. height: auto;
  463. float: left;
  464. }
  465. .attachment-pushed {
  466. margin-left: 110px;
  467. }
  468. .attachment-heading {
  469. margin: 0;
  470. }
  471. .attachment-text {
  472. color: #555;
  473. }
  474. }
  475. .connectedSortable {
  476. min-height: 100px;
  477. }
  478. .ui-helper-hidden-accessible {
  479. border: 0;
  480. clip: rect(0 0 0 0);
  481. height: 1px;
  482. margin: -1px;
  483. overflow: hidden;
  484. padding: 0;
  485. position: absolute;
  486. width: 1px;
  487. }
  488. .sort-highlight {
  489. background: #f4f4f4;
  490. border: 1px dashed #ddd;
  491. margin-bottom: 10px;
  492. }
  493. .full-opacity-hover {
  494. opacity: .65;
  495. &:hover {
  496. opacity: 1;
  497. }
  498. }
  499. // Charts
  500. .chart {
  501. position: relative;
  502. overflow: hidden;
  503. width: 100%;
  504. svg,
  505. canvas {
  506. width: 100% !important;
  507. }
  508. }