| @import '../../variables.scss'; |
| .ant-menu { |
| background: none; |
| } |
| .ant-menu-horizontal { |
| border-bottom: 0; |
| } |
| .ant-menu-submenu-title { |
| padding: 0 15px !important; |
| } |
| |
| .header-container { |
| position: fixed; |
| left: 0; |
| top: 0; |
| width: 100%; |
| z-index: 1000; |
| background-color: #fff; |
| &-primary { |
| background-color: transparent; |
| } |
| &-dark { |
| background-color:#000F20; |
| } |
| &-normal { |
| background-color: #fff; |
| box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08); |
| } |
| .meetup-container{ |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| width: 100%; |
| height: 30px; |
| font-family: Avenir-Medium; |
| font-size: 16px; |
| font-weight: bold; |
| text-align: center; |
| &-primary { |
| background-color: #000F20; |
| p{ |
| color: #fff; |
| } |
| } |
| &-dark { |
| background-color: #fff; |
| p{ |
| // margin-top: 5px; |
| color: #000F20; |
| } |
| } |
| &-normal { |
| background-color: #000F20; |
| p{ |
| // margin-top: 5px; |
| color: #fff; |
| } |
| } |
| } |
| .header-body { |
| max-width: $contentWidth; |
| margin: 0 auto; |
| height: $headerHeight; |
| line-height: $headerHeight; |
| .logo { |
| margin-top: 10px; |
| margin-left: 40px; |
| width: 156px; |
| vertical-align: sub; |
| } |
| .header-menu { |
| margin-top: 10px; |
| float: right; |
| .header-menu-toggle { |
| display: none; |
| width: 19px; |
| margin-right: 20px; |
| margin-top: $headerHeight / 2 - 15px; |
| cursor: pointer; |
| } |
| } |
| ul { |
| padding: 0; |
| margin: 0; |
| } |
| li { |
| display: inline-block; |
| margin-right: 20px; |
| } |
| .menu-item { |
| font-family: Avenir-Heavy; |
| font-size: 14px; |
| vertical-align: bottom; |
| } |
| .whiteClass{ |
| .ant-menu-item { |
| a { |
| color: #fff; |
| opacity: 0.6; |
| font-family: Avenir-Medium; |
| } |
| } |
| } |
| .blackClass { |
| .ant-menu-item { |
| a { |
| color: #333; |
| font-family: Avenir-Medium; |
| } |
| } |
| } |
| .submenu-title-wrapper { |
| a { |
| color: #333; |
| } |
| } |
| .whiteClass { |
| .ant-menu-submenu-title { |
| .submenu-title-wrapper { |
| a { |
| color: #fff; |
| opacity:0.6; |
| font-family: Avenir-Medium; |
| } |
| } |
| } |
| } |
| .blackClass { |
| .ant-menu-submenu-title { |
| .submenu-title-wrapper { |
| a { |
| color: #333; |
| font-family: Avenir-Medium; |
| } |
| } |
| } |
| } |
| .menu-item-primary { |
| a { |
| color: #fff; |
| opacity: 0.6; |
| font-family: Avenir-Medium; |
| } |
| &:hover { |
| a { |
| // font-family: Avenir-Heavy; |
| opacity: 1; |
| } |
| } |
| &-active { |
| a { |
| // font-family: Avenir-Heavy; |
| opacity: 1; |
| } |
| } |
| } |
| .menu-item-dark { |
| a { |
| color: #fff; |
| opacity: 0.6; |
| font-family: Avenir-Medium; |
| } |
| &:hover { |
| a { |
| // font-family: Avenir-Heavy; |
| opacity: 1; |
| } |
| } |
| &-active { |
| a { |
| // font-family: Avenir-Heavy; |
| opacity: 1; |
| } |
| } |
| } |
| .menu-item-normal { |
| a { |
| color: #333; |
| opacity: 0.6; |
| font-family: Avenir-Medium; |
| } |
| &:hover { |
| a { |
| // font-family: Avenir-Heavy; |
| opacity: 1; |
| } |
| } |
| &-active { |
| a { |
| // font-family: Avenir-Heavy; |
| opacity: 1; |
| } |
| } |
| } |
| .language-switch { |
| float: right; |
| box-sizing: border-box; |
| width: 24px; |
| height: 24px; |
| line-height: 20px; |
| margin-top: $headerHeight / 2 - 12px; |
| margin-right: 20px; |
| text-align: center; |
| border-radius: 2px; |
| cursor: pointer; |
| font-family: PingFangSC-Medium; |
| font-size: 14px; |
| opacity: 0.6; |
| &:hover { |
| opacity: 1; |
| } |
| } |
| .language-switch-primary { |
| border: 1px solid #FFF; |
| color: #FFF; |
| } |
| .language-switch-dark { |
| border: 1px solid #FFF; |
| color: #FFF; |
| } |
| .language-switch-normal { |
| border: 1px solid #333; |
| color: #333; |
| } |
| .search { |
| float: right; |
| width: 24px; |
| height: 24px; |
| margin-top: 21px; |
| margin-right: 40px; |
| line-height: normal; |
| position: relative; |
| .icon-search { |
| display: inline-block; |
| cursor: pointer; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| border:2px solid; |
| position: relative; |
| &::before { |
| content: ''; |
| transform: rotate(45deg); |
| width:8px; |
| height: 2px; |
| position: absolute; |
| top:13px; |
| left:11px; |
| } |
| } |
| &-primary { |
| .icon-search { |
| border-color: #fff; |
| opacity: 0.6; |
| &::before { |
| background-color: #fff; |
| } |
| &:hover { |
| opacity: 1; |
| } |
| } |
| } |
| &-dark { |
| .icon-search { |
| border-color: #fff; |
| opacity: 0.6; |
| &::before { |
| background-color: #fff; |
| } |
| &:hover { |
| opacity: 1; |
| } |
| } |
| } |
| &-normal { |
| .icon-search { |
| border-color: #333; |
| opacity: 0.6; |
| &::before { |
| background-color: #333; |
| } |
| &:hover { |
| opacity: 1; |
| } |
| } |
| } |
| .search-input { |
| position: absolute; |
| left: -172px; |
| top: 28px; |
| background: #fff; |
| border-radius: 4px; |
| overflow: hidden; |
| box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.05), 0 -8px 16px 0 rgba(0, 0, 0, 0.05); |
| img { |
| width: 28px; |
| height: 28px; |
| cursor: pointer; |
| vertical-align: middle; |
| } |
| input { |
| padding: 0 4px; |
| border: none; |
| outline: none; |
| width: 160px; |
| height: 24px; |
| vertical-align: middle; |
| } |
| } |
| } |
| } |
| } |
| |
| @media screen and (max-width: $mobileWidth) { |
| .header-container { |
| .header-body { |
| .logo { |
| margin-left: 20px; |
| } |
| .language-switch { |
| margin-right: 20px; |
| } |
| .header-menu { |
| ul { |
| display: none; |
| } |
| .header-menu-toggle { |
| display: inline-block; |
| margin-right: 20px; |
| } |
| } |
| .header-menu-open { |
| ul { |
| background-color: $headerMenuBgColor; |
| display: inline-block; |
| position: absolute; |
| right: 0; |
| top: $headerHeight; |
| z-index: 100; |
| } |
| li { |
| width: 200px; |
| display: list-item; |
| padding-left: 30px; |
| list-style: none; |
| line-height: 40px; |
| margin-right: 20px; |
| a { |
| color: #333; |
| display: inline-block; |
| width: 100%; |
| } |
| &:hover { |
| background: $endColor; |
| a { |
| color: #fff; |
| opacity: 1; |
| } |
| } |
| } |
| .menu-item-primary-active, .menu-item-normal-active, .menu-item-dark-active { |
| background: $endColor; |
| a { |
| color: #fff; |
| opacity: 1; |
| } |
| } |
| } |
| } |
| } |
| } |
