_toolbar.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. // TOOLBAR
  2. // -----------------------------------------------------------------------------
  3. /* Toolbar */
  4. .inner-toolbar {
  5. background: $sidebar-background;
  6. margin: -40px -40px 30px;
  7. padding: 0;
  8. border-left: 1px solid #121418;
  9. & > ul {
  10. list-style: none;
  11. padding: 0;
  12. margin: 0;
  13. & > li {
  14. display: inline-block;
  15. padding: 15px;
  16. font-size: 13px;
  17. border-right: 1px solid #121418;
  18. & > a {
  19. display: inline-block;
  20. padding: 0;
  21. color: #abb4be;
  22. &:hover, &:focus {
  23. color: #fff;
  24. text-decoration: none;
  25. }
  26. }
  27. &.right {
  28. float: right;
  29. padding-right: 10px;
  30. }
  31. i.fa {
  32. font-size: 14px;
  33. }
  34. > .btn {
  35. margin-top: -6px;
  36. }
  37. }
  38. }
  39. .nav-pills {
  40. margin-top: -8px;
  41. > li > label {
  42. margin-bottom: 0;
  43. margin-right: 12px;
  44. margin-top: 8px;
  45. }
  46. a {
  47. color: $menu-item-text-color;
  48. padding-top: 8px;
  49. padding-bottom: 8px;
  50. }
  51. a:hover {
  52. background: $color-dark;
  53. color: #FFF;
  54. }
  55. .active {
  56. a {
  57. color: #FFF;
  58. }
  59. }
  60. }
  61. }
  62. /* Toolbar - Responsive */
  63. @media only screen and (max-width: 767px) {
  64. .inner-toolbar {
  65. padding: 0 15px;
  66. margin: -40px -15px 30px;
  67. ul {
  68. & > li {
  69. border-right: 0;
  70. }
  71. & > li:first-child {
  72. padding-left: 0;
  73. }
  74. & > li.right {
  75. float: none;
  76. padding-left: 0;
  77. padding-right: 0;
  78. }
  79. }
  80. }
  81. }
  82. @media only screen and (max-width: 480px) {
  83. .inner-toolbar {
  84. .nav-pills a {
  85. padding-left: 10px;
  86. padding-right: 10px;
  87. }
  88. }
  89. }
  90. /* Toolbar + Layout Fixed */
  91. @media only screen and (min-width: 768px) {
  92. html.fixed {
  93. .inner-toolbar {
  94. left: $sidebar-left-full-width;
  95. right: 0;
  96. margin: 0;
  97. padding: 0;
  98. position: fixed;
  99. top: $header-height + $page-header-height + 4;
  100. z-index: $inner-toolbar-z-index;
  101. }
  102. }
  103. }
  104. // DARK
  105. // -----------------------------------------------------------------------------
  106. /* dark */
  107. html.dark {
  108. .inner-toolbar {
  109. border-left: none;
  110. border-bottom: 1px solid darken($dark-color-4, 5%);
  111. > ul > li {
  112. border-color: darken($dark-color-4, 5%);
  113. }
  114. }
  115. }