skin-blue.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /*
  2. * Skin: Blue
  3. * -----------
  4. */
  5. @import "../bootstrap-less/mixins.less";
  6. @import "../bootstrap-less/variables.less";
  7. @import "../fastadmin/variables.less";
  8. @import "../fastadmin/mixins.less";
  9. @blue: #4e73df;
  10. @sidebar-dark-bg: #4e73df;
  11. @sidebar-dark-color: #ccd9ff;
  12. @sidebar-dark-submenu-color: #ccd9ff;
  13. @sidebar-dark-submenu-bg: darken(@sidebar-dark-bg, 3%);
  14. .skin-blue {
  15. .main-header {
  16. .navbar-toggle {
  17. color: #333;
  18. }
  19. .navbar-brand {
  20. color: #333;
  21. border-right: 1px solid #eee;
  22. }
  23. .navbar {
  24. .navbar-variant(#fff; #444; @blue; rgba(0, 0, 0, .02));
  25. > .sidebar-toggle {
  26. color: #333;
  27. border-right: 1px solid #eee;
  28. }
  29. .navbar-nav {
  30. > li > a {
  31. border-right: 1px solid #eee;
  32. }
  33. }
  34. .navbar-custom-menu .navbar-nav,
  35. .navbar-right {
  36. > li {
  37. > a {
  38. border-left: 1px solid #eee;
  39. border-left: none;
  40. border-right-width: 0;
  41. }
  42. }
  43. }
  44. }
  45. > .logo {
  46. .logo-variant(@blue; #fff);
  47. border-right: 1px solid @blue;
  48. box-shadow: none;
  49. @media (max-width: @screen-header-collapse) {
  50. .logo-variant(#fff; #222);
  51. border-right: none;
  52. }
  53. }
  54. li.user-header {
  55. background-color: @blue;
  56. }
  57. .nav-addtabs > li > a, .nav-addtabs > li.active > a {
  58. border-right-color: transparent;
  59. }
  60. }
  61. .content-header {
  62. background: transparent;
  63. box-shadow: none;
  64. }
  65. .skin-dark-sidebar(#fff);
  66. .sidebar-form input[type="text"] {
  67. .placeholder(#fff);
  68. }
  69. .sidebar-form input[type="text"], .sidebar-form .btn {
  70. color: #fff;
  71. }
  72. &.multiplenav {
  73. @media (max-width: @screen-header-collapse) {
  74. .main-header {
  75. .navbar {
  76. .navbar-variant(@sidebar-dark-bg; #fff);
  77. }
  78. > .logo {
  79. .logo-variant(@sidebar-dark-bg; #fff);
  80. }
  81. }
  82. .sidebar .mobilenav a.btn-app {
  83. background: lighten(@sidebar-dark-bg, 10%);
  84. color: #fff;
  85. &.active {
  86. background: #fff;
  87. color: lighten(@sidebar-dark-bg, 10%);
  88. }
  89. }
  90. }
  91. }
  92. }