_main-header.scss 2.5 KB

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