You are here

Home » API reference » Open Social 8.9

navbar.css in Open Social 8.9

Same filename in this branch
  1. 8.9 themes/socialblue/assets/css/navbar.css
  2. 8.9 themes/socialbase/assets/css/navbar.css
Same filename and directory in other branches
  1. 8 themes/socialbase/assets/css/navbar.css
  2. 8.2 themes/socialbase/assets/css/navbar.css
  3. 8.3 themes/socialbase/assets/css/navbar.css
  4. 8.4 themes/socialbase/assets/css/navbar.css
  5. 8.5 themes/socialbase/assets/css/navbar.css
  6. 8.6 themes/socialbase/assets/css/navbar.css
  7. 8.7 themes/socialbase/assets/css/navbar.css
  8. 8.8 themes/socialbase/assets/css/navbar.css
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.nav > li > a,
.nav > li > button {
  position: relative;
  display: block;
  padding: 0.5em 10px;
  border: none;
}

.nav > li > a:hover, .nav > li > a:focus,
.nav > li > button:hover,
.nav > li > button:focus {
  text-decoration: none;
}

.nav > li > button {
  background-color: transparent;
}

.nav > li.disabled > a:hover, .nav > li.disabled > a:focus,
.nav > li.disabled > button:hover,
.nav > li.disabled > button:focus {
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}

.page-preview .navbar-default {
  position: relative;
  z-index: 10;
}

.page-preview .main-container {
  padding-top: 0;
}

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 0;
  font-size: 0.875rem;
}

.container--navbar {
  display: flex;
}

.navbar-user {
  margin-left: auto;
  order: 1;
}

.navbar-header {
  order: 0;
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
}

.navbar-nav > li > a, .navbar-nav > li > button {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 24px;
}

.navbar-nav > li > ul > li.expanded {
  position: relative;
}

.navbar-nav > li > ul > li.expanded .caret {
  transform: rotate(0);
}

.navbar-nav > li > ul > li.expanded > .dropdown-menu {
  margin-top: 0;
  padding-top: 5px;
}

.navbar-nav > li > ul > li.expanded > .dropdown-menu.open {
  display: none;
}

.navbar-user > li > a,
.navbar-user > li > button,
.navbar-user .navbar-nav > li > a,
.navbar-user .navbar-nav > li > button {
  padding: 13px 10px 8px;
  height: 50px;
}

.navbar-collapse {
  overflow-x: visible;
  border-top: 1px solid transparent;
  -webkit-overflow-scrolling: touch;
  order: 2;
  max-height: 340px;
}

.navbar-collapse.in {
  overflow-y: auto;
}

.navbar-fixed-top {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.navbar-fixed-top .navbar-user .dropdown-menu {
  right: 0;
  left: auto;
}

.navbar-brand {
  display: inline-block;
  vertical-align: top;
  height: 50px;
  max-width: 200px;
  overflow: hidden;
}

.navbar-brand > img {
  display: block;
  pointer-events: none;
  width: auto;
  height: 50px;
}

.navbar-toggle {
  position: relative;
  display: inline-block;
  background-color: transparent;
  background-image: none;
  border: 0;
  color: white;
  font-weight: 500;
  padding: 8px 10px;
  height: 50px;
  min-width: 50px;
  line-height: 32px;
}

.navbar-toggle:focus {
  outline: 0;
}

.navbar-nav__icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  pointer-events: none;
}

.navbar-nav__icon + .badge {
  position: absolute;
  top: 8px;
  right: 0;
}

.navbar-nav > .dropdown > .dropdown-menu {
  margin-top: 0;
}

.navbar-nav > .dropup > .dropdown-menu {
  margin-bottom: 0;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > button, .navbar-default .navbar-nav > .open > button:focus, .navbar-default .navbar-nav > .open > button:hover {
  transition: color .2s ease, background-color .2s ease;
}

.navbar__open-search-control {
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
}

.navbar__open-search-block {
  display: block;
  border: 0;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  padding: 0;
  transform-origin: 50%;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.navbar-nav__icon--search {
  position: absolute;
  top: 14px;
  left: 13px;
  transition: 0.2s ease-in-out;
  pointer-events: none;
}

.navbar-search .search-content-form {
  padding: 10px 10px 5px;
  border: 0;
  position: relative;
}

.navbar-search .search-content-form .form-group {
  margin-bottom: 0;
}

.navbar-search .form-control {
  padding: 6px 38px 6px 12px;
  max-width: none;
  border: 0;
}

.navbar-search .form-submit {
  width: 38px;
  height: 38px;
  display: block;
  position: absolute;
  overflow: hidden;
  right: 0;
  top: 0;
  line-height: 38px;
  cursor: pointer;
  font-size: 0;
  padding: 0;
  background-color: transparent;
}

.navbar-search .form-submit svg {
  width: 30px;
  height: 30px;
}

.navbar-secondary {
  box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  z-index: 1;
  min-height: 46px;
}

.navbar-secondary .navbar-nav {
  justify-content: center;
  flex-wrap: nowrap;
  font-size: 16px;
}

.navbar-secondary .navbar-nav a, .navbar-secondary .navbar-nav button {
  transition: all 0.3s;
  white-space: nowrap;
  opacity: 0.75;
  border-bottom: 2px solid transparent;
}

.navbar-secondary .navbar-nav li.active a, .navbar-secondary .navbar-nav li.active button {
  border-bottom: 2px solid transparent;
  opacity: 1;
}

.navbar-secondary .navbar-nav li.active a:hover, .navbar-secondary .navbar-nav li.active a:focus, .navbar-secondary .navbar-nav li.active button:hover, .navbar-secondary .navbar-nav li.active button:focus {
  cursor: default;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {
    padding-left: 30px;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {
    background: #fff;
  }
}

@media (min-width: 900px) {
  .navbar-user {
    order: 10;
  }
  .block-social-language,
  .block-language {
    order: 4;
    margin-left: auto;
  }
  .block-social-language a.dropdown-toggle,
  .block-language a.dropdown-toggle {
    height: 50px;
  }
  .block-social-language ~ .navbar-user,
  .block-language ~ .navbar-user {
    margin-left: 0;
  }
  .navbar-search {
    display: none;
  }
  .navbar-nav > li > a, .navbar-nav > li > button {
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .navbar-collapse {
    width: auto;
    border-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .navbar-collapse.collapse {
    display: flex !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-nav {
    padding-left: 10px;
  }
  .navbar-toggle {
    display: none;
  }
  .not-logged-in.dropdown.profile .dropdown-toggle {
    display: none;
  }
  .search-take-over {
    display: none;
    height: 50px;
    position: fixed;
    top: 20%;
    left: 0;
    width: 100%;
    z-index: 1050;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
  }
  .search-take-over .form-group {
    margin: auto;
    width: 80%;
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
  }
  .search-take-over .form-text {
    font-size: 1.625em;
    height: 54px;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    outline: 0;
    border-radius: 0;
    border-bottom: 2px solid;
    font-weight: 500;
    max-width: none;
    flex: 1 1 80%;
    min-width: 0;
  }
  .search-take-over .form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    min-width: 60px;
    background-color: transparent;
    margin-left: 20px;
    padding: 0;
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer;
    flex: 0 0 60px;
  }
  .search-take-over .form-submit svg {
    width: 50px;
    height: 50px;
  }
  .search-take-over .social-search-suggestions {
    flex-basis: 100%;
  }
  .btn--close-search-take-over {
    background-color: transparent;
    border: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    position: fixed;
    top: 80px;
    right: 80px;
    opacity: 0;
    transform: translate(10px, 0) rotate(90deg);
    transition: all 0.5s ease-in-out 0.5s;
    outline: 0;
  }
  .btn--close-search-take-over svg {
    height: 48px;
    width: 100%;
  }
  .mode-search {
    overflow: hidden;
  }
  .mode-search .search-take-over {
    display: initial;
    pointer-events: all;
  }
  .mode-search .navbar__open-search-block {
    transform: scale(70);
    -moz-transform: scale(70) rotate(0.02deg);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  }
  .mode-search .navbar-nav__icon {
    opacity: 0;
  }
  .mode-search .main-container {
    z-index: auto;
    pointer-events: none;
  }
  .mode-search .btn--close-search-take-over {
    transform: none;
    opacity: 1;
    pointer-events: all;
  }
}

@media (min-width: 976px) {
  .toolbar-fixed[data-toolbar-menu='open'] .navbar-fixed-top {
    left: 240px;
  }
  .gin--vertical-toolbar.user-logged-in .navbar-fixed-top {
    left: 80px;
  }
}

@media (min-width: 1025px) {
  .navbar-nav > li > ul > li.expanded > a:hover:not(.is-active) + .dropdown-menu {
    display: block;
  }
  .navbar-nav > li > ul > li.expanded .caret {
    position: absolute;
    top: 44%;
    right: 10px;
    transform: rotate(-90deg) translateY(-50%);
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu {
    display: none;
    top: 0;
    left: 100%;
    padding-top: 0;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu:hover {
    display: block;
  }
}

@media (max-width: 599px) {
  .nav > li.desktop {
    display: none;
  }
  .navbar-scrollable {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 46px;
  }
  .navbar-scrollable .navbar-nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    justify-content: flex-start;
  }
  .navbar-scrollable .navbar-nav::-webkit-scrollbar {
    display: none;
  }
  .navbar-scrollable:after {
    content: '';
    display: block;
    position: absolute;
    width: 24px;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2;
  }
}

@media (max-width: 899px) {
  .container--navbar {
    flex-wrap: wrap;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {
    padding-left: 45px;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {
    background: #e6e6e6;
    color: #4d4d4d;
  }
  .navbar-fixed-top .navbar-nav .open .dropdown-menu {
    background-color: #fff;
    border: 0;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
    position: fixed;
    top: auto;
    margin: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    max-height: 100%;
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .navbar-collapse {
    flex: 1 0 100%;
  }
  .navbar-collapse .navbar-nav {
    margin: 6.5px 0;
    flex-direction: column;
    order: 1;
  }
  .navbar-collapse .navbar-nav > li > a {
    padding: 5px 15px;
  }
  .navbar-collapse .navbar-nav > li > a.dropdown-toggle {
    pointer-events: none;
  }
  .navbar-collapse .dropdown-menu {
    display: block;
    position: relative;
    width: 100%;
    background-color: transparent;
    float: none;
    max-width: none;
    padding-top: 0;
    box-shadow: none;
  }
  .navbar-collapse .dropdown-menu li a,
  .navbar-collapse .dropdown-menu li button {
    padding: 5px 15px 5px 30px;
  }
  .navbar__open-search-control {
    display: none;
  }
  .region--content-top .search-take-over,
  .btn--close-search-take-over {
    display: none;
  }
  html:not(.js) .navbar-header:focus + .navbar-collapse, html:not(.js) .navbar-header:hover + .navbar-collapse {
    display: block;
  }
  html:not(.js) .navbar-collapse:focus, html:not(.js) .navbar-collapse:hover {
    display: block;
  }
}

@media (max-width: 1024px) {
  .navbar-nav > li > ul > li.expanded > .dropdown-menu {
    position: static !important;
    display: block !important;
    box-shadow: none;
    background: #f5f5f5;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .navbar-nav > li > ul > li.expanded > .dropdown-menu {
    position: static !important;
    display: block !important;
    box-shadow: none;
    background: #f5f5f5;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {
    padding-left: 30px;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {
    background: #fff;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .navbar-nav > li > ul > li.expanded > .dropdown-menu {
    position: static !important;
    display: block !important;
    box-shadow: none;
    background: #f5f5f5;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {
    padding-left: 30px;
  }
  .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {
    background: #fff;
  }
}

@media screen and (max-height: 480px) {
  .navbar-collapse {
    max-height: 420px;
  }
}

File

themes/socialbase/assets/css/navbar.css
View source 
  1. .nav {

  2.   margin-bottom: 0;

  3.   padding-left: 0;

  4.   list-style: none;

  5. }

  6. 

  7. .nav > li > a,

  8. .nav > li > button {

  9.   position: relative;

  10.   display: block;

  11.   padding: 0.5em 10px;

  12.   border: none;

  13. }

  14. 

  15. .nav > li > a:hover, .nav > li > a:focus,

  16. .nav > li > button:hover,

  17. .nav > li > button:focus {

  18.   text-decoration: none;

  19. }

  20. 

  21. .nav > li > button {

  22.   background-color: transparent;

  23. }

  24. 

  25. .nav > li.disabled > a:hover, .nav > li.disabled > a:focus,

  26. .nav > li.disabled > button:hover,

  27. .nav > li.disabled > button:focus {

  28.   text-decoration: none;

  29.   background-color: transparent;

  30.   cursor: not-allowed;

  31. }

  32. 

  33. .page-preview .navbar-default {

  34.   position: relative;

  35.   z-index: 10;

  36. }

  37. 

  38. .page-preview .main-container {

  39.   padding-top: 0;

  40. }

  41. 

  42. .navbar {

  43.   position: relative;

  44.   min-height: 50px;

  45.   margin-bottom: 0;

  46.   font-size: 0.875rem;

  47. }

  48. 

  49. .container--navbar {

  50.   display: flex;

  51. }

  52. 

  53. .navbar-user {

  54.   margin-left: auto;

  55.   order: 1;

  56. }

  57. 

  58. .navbar-header {

  59.   order: 0;

  60. }

  61. 

  62. .navbar-nav {

  63.   display: flex;

  64.   flex-wrap: wrap;

  65. }

  66. 

  67. .navbar-nav > li > a, .navbar-nav > li > button {

  68.   padding-top: 10px;

  69.   padding-bottom: 10px;

  70.   line-height: 24px;

  71. }

  72. 

  73. .navbar-nav > li > ul > li.expanded {

  74.   position: relative;

  75. }

  76. 

  77. .navbar-nav > li > ul > li.expanded .caret {

  78.   transform: rotate(0);

  79. }

  80. 

  81. .navbar-nav > li > ul > li.expanded > .dropdown-menu {

  82.   margin-top: 0;

  83.   padding-top: 5px;

  84. }

  85. 

  86. .navbar-nav > li > ul > li.expanded > .dropdown-menu.open {

  87.   display: none;

  88. }

  89. 

  90. .navbar-user > li > a,

  91. .navbar-user > li > button,

  92. .navbar-user .navbar-nav > li > a,

  93. .navbar-user .navbar-nav > li > button {

  94.   padding: 13px 10px 8px;

  95.   height: 50px;

  96. }

  97. 

  98. .navbar-collapse {

  99.   overflow-x: visible;

  100.   border-top: 1px solid transparent;

  101.   -webkit-overflow-scrolling: touch;

  102.   order: 2;

  103.   max-height: 340px;

  104. }

  105. 

  106. .navbar-collapse.in {

  107.   overflow-y: auto;

  108. }

  109. 

  110. .navbar-fixed-top {

  111.   box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

  112.   position: fixed;

  113.   top: 0;

  114.   right: 0;

  115.   left: 0;

  116.   z-index: 1030;

  117. }

  118. 

  119. .navbar-fixed-top .navbar-user .dropdown-menu {

  120.   right: 0;

  121.   left: auto;

  122. }

  123. 

  124. .navbar-brand {

  125.   display: inline-block;

  126.   vertical-align: top;

  127.   height: 50px;

  128.   max-width: 200px;

  129.   overflow: hidden;

  130. }

  131. 

  132. .navbar-brand > img {

  133.   display: block;

  134.   pointer-events: none;

  135.   width: auto;

  136.   height: 50px;

  137. }

  138. 

  139. .navbar-toggle {

  140.   position: relative;

  141.   display: inline-block;

  142.   background-color: transparent;

  143.   background-image: none;

  144.   border: 0;

  145.   color: white;

  146.   font-weight: 500;

  147.   padding: 8px 10px;

  148.   height: 50px;

  149.   min-width: 50px;

  150.   line-height: 32px;

  151. }

  152. 

  153. .navbar-toggle:focus {

  154.   outline: 0;

  155. }

  156. 

  157. .navbar-nav__icon {

  158.   width: 24px;

  159.   height: 24px;

  160.   display: inline-block;

  161.   pointer-events: none;

  162. }

  163. 

  164. .navbar-nav__icon + .badge {

  165.   position: absolute;

  166.   top: 8px;

  167.   right: 0;

  168. }

  169. 

  170. .navbar-nav > .dropdown > .dropdown-menu {

  171.   margin-top: 0;

  172. }

  173. 

  174. .navbar-nav > .dropup > .dropdown-menu {

  175.   margin-bottom: 0;

  176. }

  177. 

  178. .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > button, .navbar-default .navbar-nav > .open > button:focus, .navbar-default .navbar-nav > .open > button:hover {

  179.   transition: color .2s ease, background-color .2s ease;

  180. }

  181. 

  182. .navbar__open-search-control {

  183.   width: 50px;

  184.   height: 50px;

  185.   position: relative;

  186.   cursor: pointer;

  187. }

  188. 

  189. .navbar__open-search-block {

  190.   display: block;

  191.   border: 0;

  192.   border-radius: 100%;

  193.   width: 50px;

  194.   height: 50px;

  195.   padding: 0;

  196.   transform-origin: 50%;

  197.   transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);

  198.   z-index: 10;

  199. }

  200. 

  201. .navbar-nav__icon--search {

  202.   position: absolute;

  203.   top: 14px;

  204.   left: 13px;

  205.   transition: 0.2s ease-in-out;

  206.   pointer-events: none;

  207. }

  208. 

  209. .navbar-search .search-content-form {

  210.   padding: 10px 10px 5px;

  211.   border: 0;

  212.   position: relative;

  213. }

  214. 

  215. .navbar-search .search-content-form .form-group {

  216.   margin-bottom: 0;

  217. }

  218. 

  219. .navbar-search .form-control {

  220.   padding: 6px 38px 6px 12px;

  221.   max-width: none;

  222.   border: 0;

  223. }

  224. 

  225. .navbar-search .form-submit {

  226.   width: 38px;

  227.   height: 38px;

  228.   display: block;

  229.   position: absolute;

  230.   overflow: hidden;

  231.   right: 0;

  232.   top: 0;

  233.   line-height: 38px;

  234.   cursor: pointer;

  235.   font-size: 0;

  236.   padding: 0;

  237.   background-color: transparent;

  238. }

  239. 

  240. .navbar-search .form-submit svg {

  241.   width: 30px;

  242.   height: 30px;

  243. }

  244. 

  245. .navbar-secondary {

  246.   box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);

  247.   z-index: 1;

  248.   min-height: 46px;

  249. }

  250. 

  251. .navbar-secondary .navbar-nav {

  252.   justify-content: center;

  253.   flex-wrap: nowrap;

  254.   font-size: 16px;

  255. }

  256. 

  257. .navbar-secondary .navbar-nav a, .navbar-secondary .navbar-nav button {

  258.   transition: all 0.3s;

  259.   white-space: nowrap;

  260.   opacity: 0.75;

  261.   border-bottom: 2px solid transparent;

  262. }

  263. 

  264. .navbar-secondary .navbar-nav li.active a, .navbar-secondary .navbar-nav li.active button {

  265.   border-bottom: 2px solid transparent;

  266.   opacity: 1;

  267. }

  268. 

  269. .navbar-secondary .navbar-nav li.active a:hover, .navbar-secondary .navbar-nav li.active a:focus, .navbar-secondary .navbar-nav li.active button:hover, .navbar-secondary .navbar-nav li.active button:focus {

  270.   cursor: default;

  271. }

  272. 

  273. @media (min-width: 768px) and (max-width: 1024px) {

  274.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {

  275.     padding-left: 30px;

  276.   }

  277.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {

  278.     background: #fff;

  279.   }

  280. }

  281. 

  282. @media (min-width: 900px) {

  283.   .navbar-user {

  284.     order: 10;

  285.   }

  286.   .block-social-language,

  287.   .block-language {

  288.     order: 4;

  289.     margin-left: auto;

  290.   }

  291.   .block-social-language a.dropdown-toggle,

  292.   .block-language a.dropdown-toggle {

  293.     height: 50px;

  294.   }

  295.   .block-social-language ~ .navbar-user,

  296.   .block-language ~ .navbar-user {

  297.     margin-left: 0;

  298.   }

  299.   .navbar-search {

  300.     display: none;

  301.   }

  302.   .navbar-nav > li > a, .navbar-nav > li > button {

  303.     padding-top: 13px;

  304.     padding-bottom: 13px;

  305.   }

  306.   .navbar-collapse {

  307.     width: auto;

  308.     border-top: 0;

  309.     padding-left: 0;

  310.     padding-right: 0;

  311.   }

  312.   .navbar-collapse.collapse {

  313.     display: flex !important;

  314.     height: auto !important;

  315.     padding-bottom: 0;

  316.     overflow: visible !important;

  317.   }

  318.   .navbar-collapse.in {

  319.     overflow-y: visible;

  320.   }

  321.   .navbar-fixed-top .navbar-nav {

  322.     padding-left: 10px;

  323.   }

  324.   .navbar-toggle {

  325.     display: none;

  326.   }

  327.   .not-logged-in.dropdown.profile .dropdown-toggle {

  328.     display: none;

  329.   }

  330.   .search-take-over {

  331.     display: none;

  332.     height: 50px;

  333.     position: fixed;

  334.     top: 20%;

  335.     left: 0;

  336.     width: 100%;

  337.     z-index: 1050;

  338.     pointer-events: none;

  339.     transition: all 0.3s ease-in-out;

  340.   }

  341.   .search-take-over .form-group {

  342.     margin: auto;

  343.     width: 80%;

  344.     max-width: 600px;

  345.     display: flex;

  346.     flex-wrap: wrap;

  347.   }

  348.   .search-take-over .form-text {

  349.     font-size: 1.625em;

  350.     height: 54px;

  351.     border: 0;

  352.     background: transparent;

  353.     -webkit-appearance: none;

  354.     outline: 0;

  355.     border-radius: 0;

  356.     border-bottom: 2px solid;

  357.     font-weight: 500;

  358.     max-width: none;

  359.     flex: 1 1 80%;

  360.     min-width: 0;

  361.   }

  362.   .search-take-over .form-submit {

  363.     display: flex;

  364.     align-items: center;

  365.     justify-content: center;

  366.     width: 60px;

  367.     height: 60px;

  368.     min-width: 60px;

  369.     background-color: transparent;

  370.     margin-left: 20px;

  371.     padding: 0;

  372.     font-size: 0;

  373.     text-indent: -9999px;

  374.     cursor: pointer;

  375.     flex: 0 0 60px;

  376.   }

  377.   .search-take-over .form-submit svg {

  378.     width: 50px;

  379.     height: 50px;

  380.   }

  381.   .search-take-over .social-search-suggestions {

  382.     flex-basis: 100%;

  383.   }

  384.   .btn--close-search-take-over {

  385.     background-color: transparent;

  386.     border: 0;

  387.     width: 48px;

  388.     height: 48px;

  389.     padding: 0;

  390.     position: fixed;

  391.     top: 80px;

  392.     right: 80px;

  393.     opacity: 0;

  394.     transform: translate(10px, 0) rotate(90deg);

  395.     transition: all 0.5s ease-in-out 0.5s;

  396.     outline: 0;

  397.   }

  398.   .btn--close-search-take-over svg {

  399.     height: 48px;

  400.     width: 100%;

  401.   }

  402.   .mode-search {

  403.     overflow: hidden;

  404.   }

  405.   .mode-search .search-take-over {

  406.     display: initial;

  407.     pointer-events: all;

  408.   }

  409.   .mode-search .navbar__open-search-block {

  410.     transform: scale(70);

  411.     -moz-transform: scale(70) rotate(0.02deg);

  412.     box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

  413.   }

  414.   .mode-search .navbar-nav__icon {

  415.     opacity: 0;

  416.   }

  417.   .mode-search .main-container {

  418.     z-index: auto;

  419.     pointer-events: none;

  420.   }

  421.   .mode-search .btn--close-search-take-over {

  422.     transform: none;

  423.     opacity: 1;

  424.     pointer-events: all;

  425.   }

  426. }

  427. 

  428. @media (min-width: 976px) {

  429.   .toolbar-fixed[data-toolbar-menu='open'] .navbar-fixed-top {

  430.     left: 240px;

  431.   }

  432.   .gin--vertical-toolbar.user-logged-in .navbar-fixed-top {

  433.     left: 80px;

  434.   }

  435. }

  436. 

  437. @media (min-width: 1025px) {

  438.   .navbar-nav > li > ul > li.expanded > a:hover:not(.is-active) + .dropdown-menu {

  439.     display: block;

  440.   }

  441.   .navbar-nav > li > ul > li.expanded .caret {

  442.     position: absolute;

  443.     top: 44%;

  444.     right: 10px;

  445.     transform: rotate(-90deg) translateY(-50%);

  446.   }

  447.   .navbar-nav > li > ul > li.expanded > .dropdown-menu {

  448.     display: none;

  449.     top: 0;

  450.     left: 100%;

  451.     padding-top: 0;

  452.   }

  453.   .navbar-nav > li > ul > li.expanded > .dropdown-menu:hover {

  454.     display: block;

  455.   }

  456. }

  457. 

  458. @media (max-width: 599px) {

  459.   .nav > li.desktop {

  460.     display: none;

  461.   }

  462.   .navbar-scrollable {

  463.     overflow: hidden;

  464.     position: relative;

  465.     width: 100%;

  466.     height: 46px;

  467.   }

  468.   .navbar-scrollable .navbar-nav {

  469.     position: absolute;

  470.     left: 0;

  471.     top: 0;

  472.     width: 100%;

  473.     -webkit-overflow-scrolling: touch;

  474.     -webkit-user-select: none;

  475.        -moz-user-select: none;

  476.         -ms-user-select: none;

  477.             user-select: none;

  478.     overflow-x: scroll;

  479.     overflow-y: hidden;

  480.     display: flex;

  481.     justify-content: flex-start;

  482.   }

  483.   .navbar-scrollable .navbar-nav::-webkit-scrollbar {

  484.     display: none;

  485.   }

  486.   .navbar-scrollable:after {

  487.     content: '';

  488.     display: block;

  489.     position: absolute;

  490.     width: 24px;

  491.     height: 100%;

  492.     top: 0;

  493.     right: 0;

  494.     z-index: 2;

  495.   }

  496. }

  497. 

  498. @media (max-width: 899px) {

  499.   .container--navbar {

  500.     flex-wrap: wrap;

  501.   }

  502.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {

  503.     padding-left: 45px;

  504.   }

  505.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {

  506.     background: #e6e6e6;

  507.     color: #4d4d4d;

  508.   }

  509.   .navbar-fixed-top .navbar-nav .open .dropdown-menu {

  510.     background-color: #fff;

  511.     border: 0;

  512.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);

  513.     position: fixed;

  514.     top: auto;

  515.     margin: 0;

  516.     left: 0;

  517.     right: 0;

  518.     width: 100%;

  519.     max-width: none;

  520.     max-height: 100%;

  521.     height: calc(100% - 50px);

  522.     overflow-x: hidden;

  523.     overflow-y: auto;

  524.     -webkit-backface-visibility: hidden;

  525.             backface-visibility: hidden;

  526.   }

  527.   .navbar-collapse {

  528.     flex: 1 0 100%;

  529.   }

  530.   .navbar-collapse .navbar-nav {

  531.     margin: 6.5px 0;

  532.     flex-direction: column;

  533.     order: 1;

  534.   }

  535.   .navbar-collapse .navbar-nav > li > a {

  536.     padding: 5px 15px;

  537.   }

  538.   .navbar-collapse .navbar-nav > li > a.dropdown-toggle {

  539.     pointer-events: none;

  540.   }

  541.   .navbar-collapse .dropdown-menu {

  542.     display: block;

  543.     position: relative;

  544.     width: 100%;

  545.     background-color: transparent;

  546.     float: none;

  547.     max-width: none;

  548.     padding-top: 0;

  549.     box-shadow: none;

  550.   }

  551.   .navbar-collapse .dropdown-menu li a,

  552.   .navbar-collapse .dropdown-menu li button {

  553.     padding: 5px 15px 5px 30px;

  554.   }

  555.   .navbar__open-search-control {

  556.     display: none;

  557.   }

  558.   .region--content-top .search-take-over,

  559.   .btn--close-search-take-over {

  560.     display: none;

  561.   }

  562.   html:not(.js) .navbar-header:focus + .navbar-collapse, html:not(.js) .navbar-header:hover + .navbar-collapse {

  563.     display: block;

  564.   }

  565.   html:not(.js) .navbar-collapse:focus, html:not(.js) .navbar-collapse:hover {

  566.     display: block;

  567.   }

  568. }

  569. 

  570. @media (max-width: 1024px) {

  571.   .navbar-nav > li > ul > li.expanded > .dropdown-menu {

  572.     position: static !important;

  573.     display: block !important;

  574.     box-shadow: none;

  575.     background: #f5f5f5;

  576.   }

  577. }

  578. 

  579. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

  580.   .navbar-nav > li > ul > li.expanded > .dropdown-menu {

  581.     position: static !important;

  582.     display: block !important;

  583.     box-shadow: none;

  584.     background: #f5f5f5;

  585.   }

  586.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {

  587.     padding-left: 30px;

  588.   }

  589.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {

  590.     background: #fff;

  591.   }

  592. }

  593. 

  594. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

  595.   .navbar-nav > li > ul > li.expanded > .dropdown-menu {

  596.     position: static !important;

  597.     display: block !important;

  598.     box-shadow: none;

  599.     background: #f5f5f5;

  600.   }

  601.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button {

  602.     padding-left: 30px;

  603.   }

  604.   .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > a.is-active, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button:hover, .navbar-nav > li > ul > li.expanded > .dropdown-menu > li > button.is-active {

  605.     background: #fff;

  606.   }

  607. }

  608. 

  609. @media screen and (max-height: 480px) {

  610.   .navbar-collapse {

  611.     max-height: 420px;

  612.   }

  613. }