skin-black-pink.less 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. /*
  2. * Skin: Black pink
  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. @primary: #f5549f;
  10. @sidebar-dark-submenu-bg: darken(@sidebar-dark-bg, 5%);
  11. .skin-black-pink {
  12. .main-header {
  13. background: @sidebar-dark-bg;
  14. .box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
  15. .navbar {
  16. .navbar-variant(#fff; #666; #333; rgba(0, 0, 0, .02));
  17. .navbar-nav {
  18. > li > a {
  19. border-right: none;
  20. }
  21. }
  22. .navbar-custom-menu .navbar-nav, .navbar-right {
  23. > li {
  24. > a {
  25. border-left: none;
  26. border-right-width: 0;
  27. }
  28. }
  29. }
  30. @media (max-width: @screen-header-collapse) {
  31. .navbar-variant(@sidebar-dark-submenu-bg; #fff);
  32. }
  33. }
  34. .logo {
  35. .logo-variant(@sidebar-dark-bg; #fff);
  36. border-right: 1px solid @sidebar-dark-bg;
  37. @media (max-width: @screen-header-collapse) {
  38. .logo-variant(@sidebar-dark-submenu-bg, #fff);
  39. border-right: none;
  40. }
  41. }
  42. li.user-header {
  43. background-color: @sidebar-dark-bg;
  44. }
  45. .nav-addtabs > li > a, .nav-addtabs > li.active > a {
  46. border-right-color: transparent;
  47. }
  48. }
  49. .content-header {
  50. background: transparent;
  51. box-shadow: none;
  52. }
  53. .skin-dark-sidebar(#fff);
  54. .treeview-menu {
  55. > li {
  56. > a {
  57. padding-left: 18px;
  58. }
  59. &.active > a {
  60. background-color: @primary;
  61. }
  62. }
  63. }
  64. .sidebar-menu {
  65. > li {
  66. > a {
  67. //border-left: 3px solid transparent;
  68. }
  69. &.active > a {
  70. color: @sidebar-dark-hover-color;
  71. background: @primary;
  72. border-left-color: @primary;
  73. }
  74. &:hover > a {
  75. border-left-color: transparent;
  76. }
  77. }
  78. li.treeview > a {
  79. background: transparent;
  80. border-left-color: transparent;
  81. }
  82. li.treeview {
  83. &.active > a,&.treeview-open > a {
  84. background-color: @sidebar-dark-submenu-bg;
  85. border-left-color: @sidebar-dark-submenu-bg;
  86. }
  87. }
  88. .treeview-menu {
  89. padding-left: 0;
  90. .treeview-menu {
  91. padding-left: 0;
  92. > li > a {
  93. padding-left: 30px;
  94. }
  95. }
  96. li.treeview > a {
  97. background: transparent;
  98. border-left-color: transparent;
  99. }
  100. }
  101. }
  102. &.sidebar-collapse {
  103. .sidebar-menu {
  104. li:hover > a, li.active > a {
  105. color: @sidebar-dark-hover-color;
  106. background: @primary;
  107. }
  108. .treeview-menu {
  109. li.active > a {
  110. color: @sidebar-dark-hover-color;
  111. background: @primary;
  112. }
  113. li.treeview > a {
  114. background: transparent;
  115. border-left-color: transparent;
  116. }
  117. }
  118. }
  119. }
  120. &.multiplenav {
  121. @media (max-width: @screen-header-collapse) {
  122. .sidebar .mobilenav a.btn-app {
  123. background: lighten(@sidebar-dark-bg, 10%);
  124. color: #fff;
  125. &.active {
  126. background: @primary;
  127. color: #fff;
  128. }
  129. }
  130. }
  131. }
  132. }