148 lines
2.7 KiB
SCSS
148 lines
2.7 KiB
SCSS
@import "./color.scss";
|
|
@import "./breakpoint.scss";
|
|
|
|
$font-header-link: "Noto Serif CJK TC -Bold";
|
|
$font-header-apply: "Noto Serif CJK TC -Black";
|
|
|
|
@mixin headerLinksFontSize {
|
|
font-size: 12pt;
|
|
@media screen and (min-width: $max-width-big) {
|
|
font-size: 13.5pt;
|
|
}
|
|
@media screen and (min-width: $max-width-big-0) {
|
|
font-size: 15pt;
|
|
}
|
|
}
|
|
@mixin headerLinksWidth {
|
|
width: 600px;
|
|
|
|
@media screen and (min-width: $max-width-big) {
|
|
width: 630px;
|
|
}
|
|
@media screen and (min-width: $max-width-big-0) {
|
|
width: 680px;
|
|
}
|
|
}
|
|
|
|
@mixin headerLinksMarginRight {
|
|
margin-right: 92px;
|
|
@media screen and (max-width: $max-width-medium-0) {
|
|
margin-right: -20px;
|
|
}
|
|
}
|
|
@mixin headerLinksLiPadding {
|
|
padding: 22px 20px;
|
|
@media screen and (max-width: $max-width-medium-0) {
|
|
padding: 22px 8px;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
z-index: 99;
|
|
position: relative;
|
|
top: 35px;
|
|
left: 6%;
|
|
width: 88%;
|
|
height: 62px;
|
|
border-radius: 73px;
|
|
box-shadow: 0 6px 18px 0 rgba(0, 0, 255, 0.22);
|
|
background-color: $white;
|
|
|
|
&--sticky {
|
|
position: sticky;
|
|
z-index: 99;
|
|
left: 6%;
|
|
margin-top: 60px;
|
|
}
|
|
&__left {
|
|
float: left;
|
|
width: 20%;
|
|
}
|
|
|
|
&-logo {
|
|
position: absolute;
|
|
left: 35px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 150px;
|
|
}
|
|
|
|
&__right {
|
|
float: right;
|
|
width: 80%;
|
|
}
|
|
|
|
&-links {
|
|
&--mobile {
|
|
@media screen and (min-width: $max-width-medium-1) {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
@media screen and (max-width: $max-width-medium-1) {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
font-family: $font-header-link;
|
|
float: right;
|
|
@include headerLinksWidth;
|
|
@include headerLinksMarginRight;
|
|
height: 100%;
|
|
height: 50px;
|
|
top: 6px;
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
li {
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
display: block;
|
|
text-align: left;
|
|
@include headerLinksLiPadding;
|
|
|
|
a {
|
|
@include headerLinksFontSize;
|
|
color: $black;
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-link--active {
|
|
border-bottom: $indigo-blue solid 3.5px;
|
|
}
|
|
|
|
&-apply {
|
|
font-family: $font-header-apply;
|
|
width: 92px;
|
|
height: 38px;
|
|
border-radius: 38px;
|
|
background-color: $indigo-blue;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
|
|
a {
|
|
font-size: 13pt;
|
|
color: $white;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 40%;
|
|
transform: translateX(-35%) translateY(-50%);
|
|
}
|
|
}
|
|
}
|