_main-header.scss 2.5 KB

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