components.less 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772
  1. /* Blockquote */
  2. blockquote.primary {
  3. border-color: @skinColor;
  4. }
  5. /* Nav Pills */
  6. .nav-pills-primary {
  7. > li {
  8. a:hover,
  9. a:focus {
  10. color: @skinColor;
  11. background-color: lighten(@skinColor, 50%);
  12. }
  13. }
  14. > li.active {
  15. > a {
  16. &,
  17. &:hover,
  18. &:active,
  19. &:focus {
  20. background-color: @skinColor;
  21. }
  22. }
  23. }
  24. }
  25. /* Dropdown Menu */
  26. .dropdown-menu & >.active & > a,
  27. .dropdown-menu & >.active & > a:hover,
  28. .dropdown-menu & >.active & > a:focus {
  29. background-color: @skinColor;
  30. }
  31. .open > .dropdown-toggle.btn-primary {
  32. background: @skinColor;
  33. border-color: darken(@skinColor, 5%);
  34. }
  35. body .btn-primary.dropdown-toggle {
  36. border-left-color: lighten(@skinColor, 8%);
  37. }
  38. /* Buttons */
  39. body {
  40. .btn-primary {
  41. .buttonBackground(@color-primary, spin(@color-primary, 20%));
  42. }
  43. .btn-success {
  44. .buttonBackground(@color-success, spin(@color-success, 20%));
  45. }
  46. .btn-warning {
  47. .buttonBackground(@color-warning, spin(@color-warning, 20%));
  48. }
  49. .btn-danger {
  50. .buttonBackground(@color-danger, spin(@color-danger, 20%));
  51. }
  52. .btn-info {
  53. .buttonBackground(@color-info, spin(@color-info, 20%));
  54. }
  55. .btn-dark {
  56. .buttonBackground(@color-dark, spin(@color-dark, 20%));
  57. }
  58. }
  59. /* Switch*/
  60. .switch {
  61. &.switch-primary {
  62. .ios-switch .on-background {
  63. background: @skinColor;
  64. }
  65. }
  66. }
  67. /* Label */
  68. .label-primary {
  69. background: @skinColor;
  70. }
  71. /* Text Primary */
  72. .text-primary {
  73. color: @skinColor !important;
  74. }
  75. /* BG Primary */
  76. .bg-primary {
  77. background: @skinColor;
  78. }
  79. /* Alternative Font Style */
  80. .alternative-font {
  81. color: @skinColor;
  82. }
  83. /* Hightlight */
  84. .highlight {
  85. background-color: @skinColor;
  86. }
  87. /* Drop Caps */
  88. p.drop-caps {
  89. &.colored:first-child:first-letter {
  90. color: @skinColor;
  91. }
  92. &.colored.secundary:first-child:first-letter {
  93. background-color: @skinColor;
  94. }
  95. }
  96. /* Well */
  97. .well.primary {
  98. background: @skinColor;
  99. border-color: darken( @skinColor, 10% );
  100. }
  101. /* Form */
  102. .form-control:focus {
  103. border-color: lighten(@skinColor, 20%);
  104. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(red(@skinColor), green(@skinColor), blue(@skinColor), 0.3);
  105. }
  106. /* Header */
  107. .header {
  108. .toggle-sidebar-left {
  109. background: @skinColor;
  110. }
  111. }
  112. /* Page Header */
  113. .page-header {
  114. h2 {
  115. border-bottom-color: @skinColor;
  116. }
  117. .sidebar-right-toggle {
  118. &:hover {
  119. color: @skinColor;
  120. }
  121. }
  122. }
  123. /* Navigation */
  124. ul.nav-main {
  125. & > li {
  126. &.nav-active {
  127. > a {
  128. box-shadow: 2px 0 0 @skinColor inset;
  129. }
  130. & > i {
  131. color: @skinColor;
  132. }
  133. }
  134. }
  135. li {
  136. .nav-children {
  137. li {
  138. &.nav-active {
  139. > a {
  140. color: @skinColor;
  141. }
  142. }
  143. }
  144. }
  145. }
  146. }
  147. /* Nano Scroller Plugin */
  148. html.no-overflowscrolling {
  149. .nano {
  150. > .nano-pane {
  151. > .nano-slider {
  152. background: @skinColor;
  153. }
  154. }
  155. }
  156. }
  157. /* Nav Pills */
  158. .nav-pills > .active {
  159. a {
  160. &,
  161. &:hover,
  162. &:focus {
  163. background-color: @skinColor;
  164. }
  165. }
  166. }
  167. /* Pagination */
  168. .pagination {
  169. > li {
  170. a {
  171. color: @skinColor;
  172. &:hover,
  173. &:focus {
  174. color: lighten(@skinColor, 5%);
  175. }
  176. }
  177. &.active {
  178. a,
  179. span {
  180. &,
  181. &:hover,
  182. &:focus {
  183. background-color: @skinColor;
  184. border-color: @skinColor;
  185. }
  186. }
  187. a {
  188. background-color: @skinColor;
  189. }
  190. }
  191. }
  192. }
  193. html,
  194. html.dark {
  195. .pagination > li.active {
  196. a,
  197. span {
  198. &,
  199. &:hover,
  200. &:focus {
  201. background-color: @skinColor;
  202. border-color: @skinColor;
  203. }
  204. }
  205. a {
  206. background-color: @skinColor;
  207. }
  208. }
  209. }
  210. /* Fullcalendar */
  211. .fc {
  212. .fc-widget-header {
  213. background: @skinColor;
  214. border-color: @skinColor;
  215. }
  216. .fc-header-title {
  217. h2 {
  218. &:before {
  219. color: @skinColor;
  220. }
  221. }
  222. }
  223. }
  224. .fc-event {
  225. background: @skinColor;
  226. border-color: @skinColor;
  227. }
  228. .fc-event.fc-event-primary {
  229. background: @skinColor;
  230. border-color: @skinColor;
  231. }
  232. /* Maps */
  233. .jqvmap-zoomin,
  234. .jqvmap-zoomout {
  235. background: @skinColor;
  236. }
  237. /* Timeline */
  238. .timeline {
  239. .tm-items {
  240. & > li {
  241. .tm-datetime {
  242. .tm-datetime-time {
  243. color: @skinColor;
  244. }
  245. }
  246. .tm-icon {
  247. border-color: @skinColor;
  248. color: @skinColor;
  249. }
  250. }
  251. }
  252. &.timeline-simple {
  253. .tm-body {
  254. .tm-items {
  255. & > li {
  256. &:before {
  257. background: @skinColor;
  258. box-shadow: 0 0 0 3px #FFF, 0 0 0 6px @skinColor;
  259. }
  260. }
  261. }
  262. }
  263. }
  264. }
  265. html.dark .timeline.timeline-simple .tm-body .tm-items > li:before {
  266. background: @skinColor;
  267. box-shadow: 0 0 0 3px lighten(#1d2127, 8%), 0 0 0 6px @skinColor;
  268. }
  269. /* Princing Table */
  270. .pricing-table {
  271. h3 {
  272. span {
  273. color: @skinColor;
  274. }
  275. }
  276. .most-popular {
  277. h3 {
  278. background-color: @skinColor !important;
  279. color: #FFF !important
  280. }
  281. }
  282. }
  283. /* Data Tables Loading */
  284. .dataTables_processing {
  285. background-color: @skinColor;
  286. }
  287. /* Accordion */
  288. .panel-group {
  289. .panel-accordion {
  290. .panel-heading {
  291. a {
  292. color: @skinColor;
  293. }
  294. }
  295. }
  296. }
  297. /* Alerts */
  298. .alert-primary {
  299. background-color: @skinColor;
  300. border-color: darken(@skinColor, 3%);
  301. .alert-link {
  302. color: darken(@skinColor, 20%);
  303. }
  304. }
  305. /* Nestable */
  306. .dd-handle {
  307. &:hover {
  308. color: @skinColor !important;
  309. }
  310. }
  311. .dd-placeholder {
  312. background: lighten(@skinColor, 55%);
  313. border-color: @skinColor;
  314. }
  315. /* Panels */
  316. .panel-highlight {
  317. .panel-heading {
  318. background-color: @skinColor;
  319. border-color: @skinColor;
  320. }
  321. .panel-body {
  322. background-color: @skinColor;
  323. }
  324. }
  325. html .panel-primary {
  326. .panel-heading {
  327. background: @skinColor;
  328. border-color: @skinColor;
  329. }
  330. }
  331. .panel-heading {
  332. &.bg-primary {
  333. background: @skinColor;
  334. }
  335. }
  336. .panel-body {
  337. &.bg-primary {
  338. background: @skinColor;
  339. }
  340. }
  341. .panel-featured-primary {
  342. border-color: @skinColor;
  343. .panel-title {
  344. color: @skinColor;
  345. }
  346. }
  347. .panel-heading-icon {
  348. &.bg-primary {
  349. background: @skinColor;
  350. }
  351. }
  352. .panel-group .panel-accordion-primary {
  353. .panel-heading .panel-title a {
  354. background: @skinColor;
  355. }
  356. }
  357. /* Progress Bar */
  358. .progress-bar {
  359. background-color: @skinColor;
  360. }
  361. .progress {
  362. .progress-bar-primary {
  363. background-color: @skinColor;
  364. }
  365. }
  366. /* Toggle */
  367. .toggle {
  368. &> {
  369. label {
  370. border-left-color: @skinColor;
  371. color: @skinColor;
  372. }
  373. }
  374. &.active {
  375. > label {
  376. background: @skinColor !important;
  377. border-color: @skinColor;
  378. }
  379. }
  380. }
  381. /* Treeview */
  382. .jstree-default {
  383. .jstree-hovered {
  384. background-color: lighten(@skinColor, 55%) !important;
  385. }
  386. .jstree-clicked {
  387. background-color: lighten(@skinColor, 45%) !important;
  388. }
  389. .colored {
  390. color: @skinColor !important;
  391. .jstree-icon {
  392. color: @skinColor !important;
  393. }
  394. }
  395. .colored-icon {
  396. .jstree-icon {
  397. color: @skinColor !important;
  398. }
  399. }
  400. }
  401. /* Widgets */
  402. .sidebar-widget {
  403. &.widget-tasks {
  404. ul {
  405. li {
  406. &:before {
  407. border-color: @skinColor;
  408. }
  409. }
  410. }
  411. }
  412. }
  413. .widget-twitter-profile {
  414. background-color: @skinColor;
  415. .profile-quote {
  416. background-color: lighten(@skinColor, 4%);
  417. .quote-footer {
  418. border-top-color: rgba(red(lighten(@skinColor, 10%)), green(lighten(@skinColor, 10%)), blue(lighten(@skinColor, 10%)), 0.7);
  419. }
  420. }
  421. }
  422. .widget-profile-info {
  423. .profile-info {
  424. .profile-footer {
  425. border-top-color: rgba(red(lighten(@skinColor, 10%)), green(lighten(@skinColor, 10%)), blue(lighten(@skinColor, 10%)), 0.7);
  426. }
  427. }
  428. }
  429. /* Thumb Info */
  430. .thumb-info {
  431. .thumb-info-type {
  432. background-color: @skinColor;
  433. }
  434. }
  435. /* Social Icons */
  436. .social-icons-list {
  437. a {
  438. background: @skinColor;
  439. }
  440. }
  441. /* Notifications */
  442. .notifications {
  443. .notification-menu {
  444. .notification-title {
  445. background: @skinColor;
  446. .label-default {
  447. background-color: darken(@skinColor, 10%);
  448. }
  449. }
  450. }
  451. }
  452. .notifications .notification-menu,
  453. .notifications .notification-icon {
  454. &:before {
  455. border-bottom-color: @skinColor;
  456. }
  457. }
  458. .ui-pnotify {
  459. .notification-primary {
  460. background: rgba(red(@skinColor), green(@skinColor), blue(@skinColor), 0.95);
  461. }
  462. &.stack-bar-top,
  463. &.stack-bar-bottom {
  464. .notification-primary {
  465. background: @skinColor;
  466. }
  467. }
  468. }
  469. .ui-pnotify.notification-primary {
  470. .notification,
  471. .notification-primary {
  472. background: rgba(red(@skinColor), green(@skinColor), blue(@skinColor), 0.95);
  473. }
  474. &.stack-bar-top,
  475. &.stack-bar-bottom {
  476. .notification,
  477. .notification-primary {
  478. background: @skinColor;
  479. }
  480. }
  481. }
  482. /* Modal */
  483. .modal-block-primary {
  484. .fa {
  485. color: @skinColor;
  486. }
  487. &.modal-header-color {
  488. .panel-heading {
  489. background-color: @skinColor;
  490. }
  491. }
  492. &.modal-full-color {
  493. .panel {
  494. background-color: lighten(@skinColor, 8%);
  495. }
  496. .panel-heading {
  497. background-color: @skinColor;
  498. }
  499. .panel-footer {
  500. background-color: lighten(@skinColor, 8%);
  501. }
  502. }
  503. }
  504. /* Modal Icon */
  505. .modal-block-primary .modal-icon {
  506. .fa {
  507. color: @skinColor;
  508. }
  509. }
  510. /* Tabs */
  511. html,
  512. html.dark {
  513. body {
  514. .tabs-primary {
  515. .nav-tabs {
  516. &,
  517. &.nav-justified {
  518. li {
  519. a {
  520. &,
  521. &:hover {
  522. color: @skinColor;
  523. }
  524. &:hover {
  525. border-top-color: @skinColor;
  526. }
  527. }
  528. &.active {
  529. a,
  530. a:hover,
  531. a:focus {
  532. border-top-color: @skinColor;
  533. color: @skinColor;
  534. }
  535. }
  536. }
  537. }
  538. }
  539. &.tabs-bottom {
  540. .nav-tabs {
  541. &,
  542. &.nav-justified {
  543. li {
  544. a {
  545. &:hover {
  546. border-bottom-color: @skinColor;
  547. }
  548. }
  549. &.active {
  550. a,
  551. a:hover,
  552. a:focus {
  553. border-top-color: #FFF;
  554. border-bottom-color: @skinColor;
  555. }
  556. }
  557. }
  558. }
  559. }
  560. }
  561. &.tabs-vertical {
  562. &.tabs-left {
  563. li {
  564. a {
  565. &:hover {
  566. border-left-color: @skinColor;
  567. }
  568. }
  569. &.active {
  570. a,
  571. a:hover,
  572. a:focus {
  573. border-left-color: @skinColor;
  574. }
  575. }
  576. }
  577. }
  578. &.tabs-right {
  579. li {
  580. a {
  581. &:hover {
  582. border-right-color: @skinColor;
  583. }
  584. }
  585. &.active {
  586. a,
  587. a:hover,
  588. a:focus {
  589. border-right-color: @skinColor;
  590. }
  591. }
  592. }
  593. }
  594. }
  595. }
  596. }
  597. }
  598. /* Simple List */
  599. ul.simple-bullet-list {
  600. li {
  601. &:before {
  602. border-color: @skinColor;
  603. }
  604. }
  605. }
  606. /* Simple Card List */
  607. .simple-card-list {
  608. li.primary {
  609. background: @skinColor;
  610. }
  611. }
  612. /* Search Results */
  613. .search-content {
  614. .search-toolbar {
  615. .nav-pills {
  616. li.active {
  617. a {
  618. color: @skinColor;
  619. border-bottom-color: @skinColor;
  620. }
  621. }
  622. }
  623. }
  624. }
  625. .search-results-list {
  626. .result-thumb {
  627. .fa {
  628. background: @skinColor;
  629. }
  630. }
  631. }
  632. html.dark {
  633. .search-content {
  634. .search-toolbar {
  635. .nav-pills {
  636. li.active {
  637. a {
  638. &,
  639. &:hover,
  640. &:focus {
  641. color: @skinColor;
  642. border-bottom-color: @skinColor;
  643. }
  644. }
  645. }
  646. }
  647. }
  648. }
  649. }
  650. /* Time Picker */
  651. .bootstrap-timepicker-widget table td a:hover {
  652. background-color: @skinColor;
  653. }