_main-header.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. //
  2. // Component: Main Header
  3. //
  4. .main-header {
  5. border-bottom: $main-header-bottom-border;
  6. z-index: $zindex-main-header;
  7. .nav-link {
  8. height: $nav-link-height;
  9. position: relative;
  10. }
  11. .text-sm &,
  12. &.text-sm {
  13. .nav-link {
  14. height: $nav-link-sm-height;
  15. padding: $nav-link-sm-padding-y $nav-link-padding-x;
  16. > .fa,
  17. > .fas,
  18. > .far,
  19. > .fab,
  20. > .glyphicon,
  21. > .ion {
  22. font-size: $font-size-sm;
  23. }
  24. }
  25. }
  26. .navbar-nav {
  27. .nav-item {
  28. margin: 0;
  29. }
  30. &[class*='-right'] {
  31. .dropdown-menu {
  32. left: auto;
  33. margin-top: -3px;
  34. right: 0;
  35. @media (max-width: breakpoint-max(xs)) {
  36. left: 0;
  37. right: auto;
  38. }
  39. }
  40. }
  41. }
  42. }
  43. // Add this class to images within a nav-link
  44. .navbar-img {
  45. height: $main-header-height / 2;
  46. width: auto;
  47. }
  48. // Navbar badge
  49. .navbar-badge {
  50. font-size: .6rem;
  51. font-weight: 300;
  52. padding: 2px 4px;
  53. position: absolute;
  54. right: 5px;
  55. top: 9px;
  56. }
  57. .btn-navbar {
  58. background-color: transparent;
  59. border-left-width: 0;
  60. }
  61. .form-control-navbar {
  62. border-right-width: 0;
  63. & + .input-group-append {
  64. margin-left: 0;
  65. }
  66. }
  67. .form-control-navbar,
  68. .btn-navbar {
  69. transition: none;
  70. }
  71. .navbar-dark {
  72. .form-control-navbar,
  73. .btn-navbar {
  74. background-color: $main-header-dark-form-control-bg;
  75. border: $main-header-dark-form-control-border;
  76. }
  77. .form-control-navbar {
  78. &::placeholder {
  79. color: $main-header-dark-placeholder-color;
  80. }
  81. + .input-group-append > .btn-navbar {
  82. color: $main-header-dark-placeholder-color;
  83. }
  84. &:focus {
  85. &,
  86. & + .input-group-append .btn-navbar {
  87. background-color: $main-header-dark-form-control-focused-bg;
  88. border: $main-header-dark-form-control-focused-border !important;
  89. color: $main-header-dark-form-control-focused-color;
  90. }
  91. }
  92. }
  93. }
  94. .navbar-light {
  95. .form-control-navbar,
  96. .btn-navbar {
  97. background-color: $main-header-light-form-control-bg;
  98. border: $main-header-light-form-control-border;
  99. }
  100. .form-control-navbar {
  101. &::placeholder {
  102. color: $main-header-light-placeholder-color;
  103. }
  104. + .input-group-append > .btn-navbar {
  105. color: $main-header-light-placeholder-color;
  106. }
  107. &:focus {
  108. &,
  109. & + .input-group-append .btn-navbar {
  110. background-color: $main-header-light-form-control-focused-bg;
  111. border: $main-header-light-form-control-focused-border !important;
  112. color: $main-header-light-form-control-focused-color;
  113. }
  114. }
  115. }
  116. }