boxes.less 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. /*
  2. * Component: Box
  3. * --------------
  4. */
  5. .box {
  6. position: relative;
  7. .border-radius(@box-border-radius);
  8. background: #ffffff;
  9. border-top: 3px solid @box-default-border-top-color;
  10. margin-bottom: 20px;
  11. width: 100%;
  12. box-shadow: @box-boxshadow;
  13. // Box color variations
  14. &.box-primary {
  15. border-top-color: @light-blue;
  16. }
  17. &.box-info {
  18. border-top-color: @aqua;
  19. }
  20. &.box-danger {
  21. border-top-color: @red;
  22. }
  23. &.box-warning {
  24. border-top-color: @yellow;
  25. }
  26. &.box-success {
  27. border-top-color: @green;
  28. }
  29. &.box-default {
  30. border-top-color: @gray;
  31. }
  32. // collapsed mode
  33. &.collapsed-box {
  34. .box-body,
  35. .box-footer {
  36. display: none;
  37. }
  38. }
  39. .nav-stacked {
  40. > li {
  41. border-bottom: 1px solid @box-border-color;
  42. margin: 0;
  43. &:last-of-type {
  44. border-bottom: none;
  45. }
  46. }
  47. }
  48. // fixed height to 300px
  49. &.height-control {
  50. .box-body {
  51. max-height: 300px;
  52. overflow: auto;
  53. }
  54. }
  55. .border-right {
  56. border-right: 1px solid @box-border-color;
  57. }
  58. .border-left {
  59. border-left: 1px solid @box-border-color;
  60. }
  61. //SOLID BOX
  62. //---------
  63. //use this class to get a colored header and borders
  64. &.box-solid {
  65. border-top: 0;
  66. > .box-header {
  67. .btn.btn-default {
  68. background: transparent;
  69. }
  70. .btn,
  71. a {
  72. &:hover {
  73. background: rgba(0, 0, 0, 0.1);
  74. }
  75. }
  76. }
  77. // Box color variations
  78. &.box-default {
  79. .box-solid-variant(@gray, #444);
  80. }
  81. &.box-primary {
  82. .box-solid-variant(@light-blue);
  83. }
  84. &.box-info {
  85. .box-solid-variant(@aqua);
  86. }
  87. &.box-danger {
  88. .box-solid-variant(@red);
  89. }
  90. &.box-warning {
  91. .box-solid-variant(@yellow);
  92. }
  93. &.box-success {
  94. .box-solid-variant(@green);
  95. }
  96. > .box-header > .box-tools .btn {
  97. border: 0;
  98. box-shadow: none;
  99. }
  100. // Fix font color for tiles
  101. &[class*='bg'] {
  102. > .box-header {
  103. color: #fff;
  104. }
  105. }
  106. }
  107. //BOX GROUP
  108. .box-group {
  109. > .box {
  110. margin-bottom: 5px;
  111. }
  112. }
  113. // jQuery Knob in a box
  114. .knob-label {
  115. text-align: center;
  116. color: #333;
  117. font-weight: 100;
  118. font-size: 12px;
  119. margin-bottom: 0.3em;
  120. }
  121. }
  122. .box,
  123. .overlay-wrapper {
  124. // Box overlay for LOADING STATE effect
  125. > .overlay,
  126. > .loading-img {
  127. position: absolute;
  128. top: 0;
  129. left: 0;
  130. width: 100%;
  131. height: 100%;
  132. }
  133. .overlay {
  134. z-index: 50;
  135. background: rgba(255, 255, 255, 0.7);
  136. .border-radius(@box-border-radius);
  137. > .fa {
  138. position: absolute;
  139. top: 50%;
  140. left: 50%;
  141. margin-left: -15px;
  142. margin-top: -15px;
  143. color: #000;
  144. font-size: 30px;
  145. }
  146. }
  147. .overlay.dark {
  148. background: rgba(0, 0, 0, 0.5);
  149. }
  150. }
  151. //Add clearfix to header, body and footer
  152. .box-header,
  153. .box-body,
  154. .box-footer {
  155. .clearfix();
  156. }
  157. //Box header
  158. .box-header {
  159. color: #444;
  160. display: block;
  161. padding: @box-padding;
  162. position: relative;
  163. //Add bottom border
  164. &.with-border {
  165. border-bottom: 1px solid @box-border-color;
  166. .collapsed-box & {
  167. border-bottom: none;
  168. }
  169. }
  170. //Icons and box title
  171. > .fa,
  172. > .glyphicon,
  173. > .ion,
  174. .box-title {
  175. display: inline-block;
  176. font-size: 18px;
  177. margin: 0;
  178. line-height: 1;
  179. }
  180. > .fa,
  181. > .glyphicon,
  182. > .ion {
  183. margin-right: 5px;
  184. }
  185. > .box-tools {
  186. position: absolute;
  187. right: 10px;
  188. top: 5px;
  189. [data-toggle="tooltip"] {
  190. position: relative;
  191. }
  192. &.pull-right {
  193. .dropdown-menu {
  194. right: 0;
  195. left: auto;
  196. }
  197. }
  198. }
  199. }
  200. //Box Tools Buttons
  201. .btn-box-tool {
  202. padding: 5px;
  203. font-size: 12px;
  204. background: transparent;
  205. color: darken(@box-default-border-top-color, 20%);
  206. .open &,
  207. &:hover {
  208. color: darken(@box-default-border-top-color, 40%);
  209. }
  210. &.btn:active {
  211. box-shadow: none;
  212. }
  213. }
  214. //Box Body
  215. .box-body {
  216. .border-radius(0; 0; @box-border-radius; @box-border-radius);
  217. padding: @box-padding;
  218. .no-header & {
  219. .border-top-radius(@box-border-radius);
  220. }
  221. // Tables within the box body
  222. > .table {
  223. margin-bottom: 0;
  224. }
  225. // Calendar within the box body
  226. .fc {
  227. margin-top: 5px;
  228. }
  229. .full-width-chart {
  230. margin: -19px;
  231. }
  232. &.no-padding .full-width-chart {
  233. margin: -9px;
  234. }
  235. .box-pane {
  236. .border-radius(0; 0; @box-border-radius; 0);
  237. }
  238. .box-pane-right {
  239. .border-radius(0; 0; 0; @box-border-radius);
  240. }
  241. }
  242. //Box footer
  243. .box-footer {
  244. .border-radius(0; 0; @box-border-radius; @box-border-radius);
  245. border-top: 1px solid @box-border-color;
  246. padding: @box-padding;
  247. background-color: @box-footer-bg;
  248. }
  249. .chart-legend {
  250. &:extend(.list-unstyled);
  251. margin: 10px 0;
  252. > li {
  253. @media (max-width: @screen-sm-max) {
  254. float: left;
  255. margin-right: 10px;
  256. }
  257. }
  258. }
  259. //Comment Box
  260. .box-comments {
  261. background: #f7f7f7;
  262. .box-comment {
  263. .clearfix();
  264. padding: 8px 0;
  265. border-bottom: 1px solid #eee;
  266. &:last-of-type {
  267. border-bottom: 0;
  268. }
  269. &:first-of-type {
  270. padding-top: 0;
  271. }
  272. img {
  273. &:extend(.img-sm);
  274. float: left;
  275. }
  276. }
  277. .comment-text {
  278. margin-left: 40px;
  279. color: #555;
  280. }
  281. .username {
  282. color: #444;
  283. display: block;
  284. font-weight: 600;
  285. }
  286. .text-muted {
  287. font-weight: 400;
  288. font-size: 12px;
  289. }
  290. }
  291. //Widgets
  292. //-----------
  293. /* Widget: TODO LIST */
  294. .todo-list {
  295. margin: 0;
  296. padding: 0;
  297. list-style: none;
  298. overflow: auto;
  299. // Todo list element
  300. > li {
  301. .border-radius(2px);
  302. padding: 10px;
  303. background: #f4f4f4;
  304. margin-bottom: 2px;
  305. border-left: 2px solid #e6e7e8;
  306. color: #444;
  307. &:last-of-type {
  308. margin-bottom: 0;
  309. }
  310. > input[type='checkbox'] {
  311. margin: 0 10px 0 5px;
  312. }
  313. .text {
  314. display: inline-block;
  315. margin-left: 5px;
  316. font-weight: 600;
  317. }
  318. // Time labels
  319. .label {
  320. margin-left: 10px;
  321. font-size: 9px;
  322. }
  323. // Tools and options box
  324. .tools {
  325. display: none;
  326. float: right;
  327. color: @red;
  328. // icons
  329. > .fa, > .glyphicon, > .ion {
  330. margin-right: 5px;
  331. cursor: pointer;
  332. }
  333. }
  334. &:hover .tools {
  335. display: inline-block;
  336. }
  337. &.done {
  338. color: #999;
  339. .text {
  340. text-decoration: line-through;
  341. font-weight: 500;
  342. }
  343. .label {
  344. background: @gray !important;
  345. }
  346. }
  347. }
  348. // Color varaity
  349. .danger {
  350. border-left-color: @red;
  351. }
  352. .warning {
  353. border-left-color: @yellow;
  354. }
  355. .info {
  356. border-left-color: @aqua;
  357. }
  358. .success {
  359. border-left-color: @green;
  360. }
  361. .primary {
  362. border-left-color: @light-blue;
  363. }
  364. .handle {
  365. display: inline-block;
  366. cursor: move;
  367. margin: 0 5px;
  368. }
  369. }
  370. // END TODO WIDGET
  371. /* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
  372. .chat {
  373. padding: 5px 20px 5px 10px;
  374. .item {
  375. .clearfix();
  376. margin-bottom: 10px;
  377. // The image
  378. > img {
  379. width: 40px;
  380. height: 40px;
  381. border: 2px solid transparent;
  382. .border-radius(50%);
  383. }
  384. > .online {
  385. border: 2px solid @green;
  386. }
  387. > .offline {
  388. border: 2px solid @red;
  389. }
  390. // The message body
  391. > .message {
  392. margin-left: 55px;
  393. margin-top: -40px;
  394. > .name {
  395. display: block;
  396. font-weight: 600;
  397. }
  398. }
  399. // The attachment
  400. > .attachment {
  401. .border-radius(@attachment-border-radius);
  402. background: #f4f4f4;
  403. margin-left: 65px;
  404. margin-right: 15px;
  405. padding: 10px;
  406. > h4 {
  407. margin: 0 0 5px 0;
  408. font-weight: 600;
  409. font-size: 14px;
  410. }
  411. > p, > .filename {
  412. font-weight: 600;
  413. font-size: 13px;
  414. font-style: italic;
  415. margin: 0;
  416. }
  417. .clearfix();
  418. }
  419. }
  420. }
  421. //END CHAT WIDGET
  422. //Input in box
  423. .box-input {
  424. max-width: 200px;
  425. }
  426. //A fix for panels body text color when placed within
  427. // a modal
  428. .modal {
  429. .panel-body {
  430. color: #444;
  431. }
  432. }