_main-header.scss 2.7 KB

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