189 lines
3.8 KiB
Stylus
189 lines
3.8 KiB
Stylus
header-padding-normal = 10px
|
|
header-padding-max = 30px
|
|
logo-size = 50px
|
|
|
|
#header
|
|
position: relative
|
|
padding: header-padding-normal 0
|
|
@media print
|
|
display: none
|
|
|
|
#header-inner
|
|
display: flex
|
|
flex-flow: row nowrap
|
|
align-items: center
|
|
width: 1190px
|
|
margin-left: -120px
|
|
@media mq-mobile
|
|
justify-content: center
|
|
|
|
.button--header
|
|
margin-top: 7px
|
|
|
|
#logo-wrap-page
|
|
flex: 0
|
|
-webkit-flex: none
|
|
margin-top: 8px
|
|
width: 200px
|
|
|
|
#logo
|
|
hide-text()
|
|
display: block
|
|
width: 56px;
|
|
height: 56px;
|
|
background-image: url(../img/logo_ogn.png);
|
|
text-decoration: none;
|
|
margin: -20px 0 0 30px;
|
|
background-color: rgba(255,255,255,1);
|
|
border-radius: 50%;
|
|
background-size: 22px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
.dropdown
|
|
display: flex
|
|
align-items: center
|
|
margin-left: 32px
|
|
nav
|
|
ul
|
|
li
|
|
float: left
|
|
margin: 8px
|
|
position: relative
|
|
a
|
|
color: #FFFFFF
|
|
text-decoration: none
|
|
font-weight: bold
|
|
&:hover
|
|
opacity: .7
|
|
&:focus
|
|
color: rgba(255, 255,255,1)
|
|
a
|
|
color: rgba(255,255,255,0.7)
|
|
&:hover
|
|
& > ul
|
|
display: block
|
|
z-index: 1
|
|
ul
|
|
background: #ffffff
|
|
border-radius: 5px
|
|
left: 0
|
|
padding: 10px 5px 5px 5px
|
|
position: absolute
|
|
top: 100%
|
|
li
|
|
float: none
|
|
width: 8.125em
|
|
a
|
|
&:hover
|
|
color #000
|
|
|
|
.dropdown:before,
|
|
.dropdown:after
|
|
clear: both
|
|
content: ""
|
|
display: table
|
|
|
|
.dropdown nav ul li ul li a:link,
|
|
.dropdown nav ul li ul li a:visited
|
|
color: #8d99a4
|
|
|
|
#search-input-wrap
|
|
display: none
|
|
height: 40px
|
|
width: 180px
|
|
background-color: #ff9c00
|
|
border-radius: 22px
|
|
padding: 0 12px
|
|
align-items: center
|
|
transition: 0.2s
|
|
&.on
|
|
display: flex
|
|
@media mq-mobile
|
|
width: 40px
|
|
cursor: pointer
|
|
&.standalone
|
|
position: absolute
|
|
right: 20px
|
|
&.active
|
|
width: 180px
|
|
background-color: color-background-light
|
|
|
|
#search-input-icon
|
|
color: rgba(255, 255, 255, 1)
|
|
height: 24px
|
|
width: 24px
|
|
margin: 0 2px 0 0
|
|
display: inline-block
|
|
opacity: 1
|
|
@media mq-mobile
|
|
height: auto;
|
|
|
|
#search-input-wrap.active #search-input-icon
|
|
color: color-navy
|
|
|
|
#search-input-wrap.active #search-input
|
|
color: color-navy
|
|
|
|
#search-input
|
|
background: none
|
|
width: 126px
|
|
height: 24px
|
|
font-size: 15px
|
|
color: color-main-link
|
|
outline: none
|
|
-webkit-appearance: none
|
|
@media mq-mobile
|
|
display: none
|
|
|
|
#search-input-wrap.active #search-input
|
|
display: inline;
|
|
|
|
#search-input::-webkit-input-placeholder {
|
|
color:rgba(255, 255, 255, .4)
|
|
}
|
|
|
|
#search-input::-moz-placeholder {
|
|
color:rgba(255, 255, 255, .4)
|
|
}
|
|
|
|
#search-input:-ms-input-placeholder {
|
|
color:rgba(255, 255, 255, .4)
|
|
}
|
|
|
|
#search-input:-moz-placeholder {
|
|
color:rgba(255, 255, 255, .4)
|
|
}
|
|
|
|
#search-input-wrap .algolia-autocomplete .ds-dropdown-menu
|
|
@media (max-width: 560px)
|
|
min-width: 400px
|
|
@media (max-width: 470px)
|
|
min-width: 300px
|
|
|
|
#lang-select-wrap
|
|
display: none
|
|
position: relative
|
|
@media mq-normal
|
|
display: block
|
|
|
|
#lang-select-label
|
|
color: color-main-link
|
|
opacity: 0.7
|
|
font-family: font-title
|
|
line-height: logo-size
|
|
span
|
|
padding-left: 8px
|
|
i
|
|
opacity: 0.7
|
|
|
|
#lang-select
|
|
opacity: 0
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
-webkit-appearance: menulist-button
|
|
font-size: inherit
|