_main-header.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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. + .input-group-append > .btn-navbar {
  80. color: $main-header-dark-placeholder-color;
  81. }
  82. &:focus {
  83. &,
  84. & + .input-group-append .btn-navbar {
  85. background-color: $main-header-dark-form-control-focused-bg;
  86. border: $main-header-dark-form-control-focused-border !important;
  87. color: $main-header-dark-form-control-focused-color;
  88. }
  89. }
  90. }
  91. }
  92. .navbar-light {
  93. .form-control-navbar,
  94. .btn-navbar {
  95. background-color: $main-header-light-form-control-bg;
  96. border: $main-header-light-form-control-border;
  97. }
  98. .form-control-navbar {
  99. &:ms-placeholder,
  100. &:moz-placeholder,
  101. &::moz-placeholder,
  102. &::placeholder,
  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. }