_navbar.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. .navbar {
  2. font-family: $navbar-font-family;
  3. @include border-radius(0);
  4. @include box-shadow(0 1px 5px rgba(0,0,0,.3));
  5. border: none;
  6. position: fixed;
  7. top: 0;
  8. left: 0;
  9. z-index: 12;
  10. width: 100%;
  11. .navbar-brand {
  12. @include three-dots-overflow();
  13. }
  14. .navbar-custom-right-menu {
  15. float: right;
  16. }
  17. .navbar-toggle {
  18. text-decoration: none;
  19. color: #fff;
  20. width: 20px;
  21. height: 20px;
  22. margin-top: -4px;
  23. margin-right: 17px;
  24. &:before {
  25. content: '\E8D5';
  26. font-family: 'Material Icons';
  27. font-size: 26px;
  28. }
  29. }
  30. .navbar-collapse {
  31. &.in {
  32. overflow: visible;
  33. }
  34. }
  35. }
  36. .ls-closed {
  37. .sidebar {
  38. margin-left: -300px;
  39. }
  40. section.content {
  41. margin-left: 15px;
  42. }
  43. .bars {
  44. &:after,
  45. &:before {
  46. font-family: 'Material Icons';
  47. font-size: 24px;
  48. position: absolute;
  49. top: 18px;
  50. left: 20px;
  51. margin-right: 10px;
  52. @include transform(scale(0));
  53. @include transition(all .3s);
  54. }
  55. &:before {
  56. content: '\E5D2';
  57. @include transform(scale(1));
  58. }
  59. &:after {
  60. content: '\E5C4';
  61. @include transform(scale(0));
  62. }
  63. }
  64. .navbar-brand {
  65. margin-left: 30px;
  66. }
  67. }
  68. .overlay-open {
  69. .bars {
  70. &:before {
  71. @include transform(scale(0));
  72. }
  73. &:after {
  74. @include transform(scale(1));
  75. }
  76. }
  77. }
  78. .navbar-header {
  79. padding: 10px 7px;
  80. .bars {
  81. float: left;
  82. text-decoration: none;
  83. }
  84. }
  85. .navbar-nav {
  86. > li {
  87. > a {
  88. padding: 7px 7px 2px 7px;
  89. margin-top: 17px;
  90. margin-left: 5px;
  91. }
  92. }
  93. .dropdown-menu {
  94. margin-top: -40px !important;
  95. }
  96. }
  97. .label-count {
  98. position: absolute;
  99. top: 2px;
  100. right: 6px;
  101. font-size: 10px;
  102. line-height: 15px;
  103. background-color: #000;
  104. padding: 0 4px;
  105. @include border-radius(3px);
  106. }
  107. @each $key, $val in $colors {
  108. .col-#{$key} {
  109. .navbar {
  110. @include navbar-link-color(#fff, #000, .95);
  111. // @include navbar-link-color(rgba(0,0,0,0.85), #000, .95);
  112. }
  113. }
  114. }