602 lines
13 KiB
SCSS
602 lines
13 KiB
SCSS
// import google font
|
||
// no need to import font; such font has been imported in App.vue
|
||
// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
|
||
$fontFamily-NotoSansTC: 'Noto Sans TC', sans-serif;
|
||
$fontFamily: 'Noto Sans TC', sans-serif;
|
||
// Color
|
||
// dont define private color if these are common ones
|
||
@import '../color';
|
||
// $white: #ffffff;
|
||
// $mid-blue: #226bb4;
|
||
|
||
//Screen breakpoint
|
||
$max-width-big-0: 1800px;
|
||
$max-width-big: 1500px;
|
||
$max-width-medium-0: 1100px;
|
||
$max-width-medium-1: 900px;
|
||
$max-width-small-0: 750px;
|
||
$max-width-small-1: 500px;
|
||
$max-width-small-2: 410px;
|
||
$max-width-small-3: 360px;
|
||
|
||
// .info-container
|
||
@mixin infoContainer() {
|
||
max-width: 80%;
|
||
@media screen and (max-width: 1365px) {
|
||
margin: 0 120px;
|
||
}
|
||
|
||
@media screen and (max-width: 1023px) {
|
||
margin: 0 100px;
|
||
}
|
||
|
||
@media screen and (max-width: $max-width-small-0) {
|
||
margin: 0;
|
||
max-width: 100%;
|
||
padding-left: 40px;
|
||
padding-right: 40px;
|
||
}
|
||
}
|
||
|
||
// .info-section
|
||
@mixin sectionH1Fontsize() {
|
||
font-size: 32pt;
|
||
@media only screen and (min-width: $max-width-big-0) {
|
||
font-size: 36pt;
|
||
margin-bottom: 50px;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
font-size: 28pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
font-size: 24pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
font-size: 21pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
font-size: 19pt;
|
||
}
|
||
}
|
||
|
||
@mixin sectionH2Fontsize() {
|
||
font-size: 24pt;
|
||
@media only screen and (min-width: $max-width-big-0) {
|
||
font-size: 27pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
font-size: 22pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
font-size: 19pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
font-size: 18pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
font-size: 18pt;
|
||
}
|
||
}
|
||
|
||
//.info-section__content
|
||
@mixin sectionContentParagraphWidth() {
|
||
// width: 92%;
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
width: 100%;
|
||
margin-left: 0;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
width: 100%;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
@mixin sectionContentParagraphFontsize() {
|
||
font-size: 15pt;
|
||
@media only screen and (max-width: $max-width-big-0) {
|
||
font-size: 14pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
font-size: 13pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
font-size: 12pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
font-size: 11pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
font-size: 10pt;
|
||
}
|
||
}
|
||
|
||
@mixin ulPadding {
|
||
padding: 0 0 0 20px;
|
||
@media only screen and (max-width: $max-width-big) {
|
||
padding: 0 0 0 5px;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
@mixin sectionContentSubExtendWidth {
|
||
width: 107%;
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
// .info-kind
|
||
@mixin kind() {
|
||
@media only screen and (min-width: $max-width-big-0) {
|
||
padding-bottom: 330px;
|
||
&__itemBox {
|
||
height: 305px;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
&-title {
|
||
margin-top: 30px;
|
||
}
|
||
&-text {
|
||
padding-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
width: 100%;
|
||
&__itemBox {
|
||
width: 100%;
|
||
height: 201px;
|
||
margin-bottom: 20px;
|
||
margin-right: 0;
|
||
padding: 0;
|
||
&-title {
|
||
margin-top: 20px;
|
||
}
|
||
&-text {
|
||
width: 86%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@mixin kindTitleFontsize() {
|
||
font-size: 27pt;
|
||
@media only screen and (max-width: $max-width-big-0) {
|
||
font-size: 21pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-big) {
|
||
font-size: 19pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
font-size: 15pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
font-size: 12pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
font-size: 21pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
font-size: 15pt;
|
||
}
|
||
}
|
||
|
||
@mixin kindTextFontsize() {
|
||
font-size: 15pt;
|
||
@media only screen and (max-width: $max-width-big-0) {
|
||
font-size: 13pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-big) {
|
||
font-size: 12pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
font-size: 11pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
font-size: 9pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
font-size: 13pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
font-size: 11pt;
|
||
}
|
||
}
|
||
|
||
// .info-qa
|
||
@mixin qaLayout {
|
||
width: 86%;
|
||
margin-bottom: 120px;
|
||
@media only screen and (max-width: $max-width-big) {
|
||
width: 90%;
|
||
margin-bottom: 25px;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
width: 100%;
|
||
margin-bottom: 0px;
|
||
}
|
||
}
|
||
|
||
@mixin qaTitleFontsize() {
|
||
font-size: 18pt;
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
font-size: 16pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
font-size: 14pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
font-size: 11pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
font-size: 9pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-2) {
|
||
font-size: 8pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-3) {
|
||
font-size: 7pt;
|
||
}
|
||
}
|
||
|
||
@mixin qaTextFontsize() {
|
||
font-size: 15pt;
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
font-size: 14pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
font-size: 12pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
font-size: 11pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
font-size: 9pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-2) {
|
||
font-size: 8pt;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-3) {
|
||
font-size: 6.5pt;
|
||
}
|
||
}
|
||
|
||
@mixin qaTitleHeight {
|
||
height: 57px;
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
height: 45px;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
height: 36px;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-2) {
|
||
height: 32px;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-3) {
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
@mixin qaTitleMarginTop {
|
||
margin-top: 15px;
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
margin-top: 10px;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-2) {
|
||
margin-top: 9px;
|
||
}
|
||
}
|
||
@mixin qaTextMarginTop {
|
||
margin-top: 25px;
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
|
||
@mixin qaQdisplay {
|
||
margin-left: 25px;
|
||
|
||
&::before {
|
||
content: "Q：";
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
margin-left: 18px;
|
||
&::before {
|
||
content: "";
|
||
}
|
||
}
|
||
}
|
||
|
||
@mixin qaIconSize {
|
||
height: 25px;
|
||
width: 30px;
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
height: 16px;
|
||
width: 19px;
|
||
}
|
||
}
|
||
|
||
@mixin qaIcon {
|
||
background-image: url("../../assets/images/CFP/Polygon-big.svg");
|
||
|
||
@media only screen and (max-width: $max-width-medium-1) {
|
||
background-image: url("../../assets/images/CFP/Polygon-small.svg");
|
||
}
|
||
}
|
||
|
||
@mixin sitconImg {
|
||
float: right;
|
||
margin-top: 382px;
|
||
margin-right: 15%;
|
||
margin-bottom: 30px;
|
||
@media only screen and (max-width: $max-width-big) {
|
||
margin-top: 0;
|
||
margin-right: 80%;
|
||
}
|
||
@media only screen and (max-width: $max-width-medium-0) {
|
||
width: 108px;
|
||
height: 135px;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-0) {
|
||
margin-right: 15%;
|
||
}
|
||
|
||
@media only screen and (max-width: $max-width-small-1) {
|
||
width: 86px;
|
||
height: 107px;
|
||
}
|
||
|
||
@media only screen and (max-width: $max-width-small-2) {
|
||
width: 69px;
|
||
height: 86px;
|
||
}
|
||
@media only screen and (max-width: $max-width-small-3) {
|
||
width: 55px;
|
||
height: 68px;
|
||
}
|
||
}
|
||
|
||
//cfp-sub-information <subInformation>
|
||
.info {
|
||
position: relative;
|
||
width: 100%;
|
||
font-family: $fontFamily;
|
||
float: left;
|
||
|
||
&-container {
|
||
@include infoContainer();
|
||
margin: 0 280px;
|
||
// float: left;
|
||
}
|
||
|
||
&-section {
|
||
float: left;
|
||
clear: both;
|
||
width: 100%;
|
||
|
||
h1 {
|
||
@include sectionH1Fontsize();
|
||
height: 70px;
|
||
font-weight: 900;
|
||
font-stretch: normal;
|
||
font-style: normal;
|
||
line-height: 1.9;
|
||
letter-spacing: normal;
|
||
text-align: left;
|
||
color: $mid-blue;
|
||
margin-block-start: 0.83em;
|
||
margin-block-end: 0.83em;
|
||
}
|
||
&__content {
|
||
width: 100%;
|
||
|
||
p {
|
||
@include sectionContentParagraphWidth();
|
||
@include sectionContentParagraphFontsize();
|
||
|
||
font-weight: 500;
|
||
font-stretch: normal;
|
||
font-style: normal;
|
||
line-height: 2.1;
|
||
letter-spacing: 0.2px;
|
||
text-align: left;
|
||
color: $mid-blue;
|
||
}
|
||
|
||
strong {
|
||
font-weight: 900;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
li {
|
||
@include ulPadding();
|
||
margin: 0;
|
||
span {
|
||
display: inline-block;
|
||
height: 4px;
|
||
width: 4px;
|
||
transform: translate(-200%, -150%);
|
||
background-color: $mid-blue;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
&--sub {
|
||
h2 {
|
||
@include sectionH2Fontsize();
|
||
height: 60px;
|
||
font-weight: 900;
|
||
font-stretch: normal;
|
||
font-style: normal;
|
||
line-height: 2.2;
|
||
letter-spacing: normal;
|
||
text-align: left;
|
||
color: $mid-blue;
|
||
margin-block-start: 0.83em;
|
||
margin-block-end: 0.83em;
|
||
}
|
||
|
||
&-extend {
|
||
@include sectionContentSubExtendWidth();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&-sitcon-img {
|
||
&__box {
|
||
float: right;
|
||
}
|
||
|
||
@include sitconImg();
|
||
}
|
||
|
||
//cfp-sub-information <subInformation> kind, qa components
|
||
&-kind {
|
||
width: 100%;
|
||
margin-top: 45px;
|
||
padding-bottom: 300px;
|
||
&__itemBox {
|
||
float: left;
|
||
padding: 25px 1.5% 35px 1.5%;
|
||
border-radius: 13px;
|
||
background-color: $mid-blue;
|
||
width: 30%;
|
||
&:not(:last-child) {
|
||
margin-right: 5%;
|
||
}
|
||
|
||
&-title {
|
||
@include kindTitleFontsize();
|
||
width: 100%;
|
||
color: $white;
|
||
display: inline-block;
|
||
text-align: center;
|
||
font-weight: 900;
|
||
font-stretch: normal;
|
||
font-style: normal;
|
||
letter-spacing: normal;
|
||
text-align: center;
|
||
margin-top: 25px;
|
||
}
|
||
&-text {
|
||
width: 100%;
|
||
height: 172px;
|
||
margin: 0 auto;
|
||
text-align: left;
|
||
|
||
p {
|
||
@include kindTextFontsize();
|
||
margin: 10px auto;
|
||
color: $white;
|
||
font-weight: 500;
|
||
font-stretch: normal;
|
||
font-style: normal;
|
||
line-height: 2.1;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
strong {
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
}
|
||
//RWD for kind
|
||
@include kind();
|
||
}
|
||
|
||
&-qa {
|
||
@include qaLayout();
|
||
margin-bottom: 120px;
|
||
float: left;
|
||
// margin: 0 auto;
|
||
&__itemBox {
|
||
border-radius: 29px;
|
||
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
|
||
background-color: $white;
|
||
margin: 0 0 30px 0;
|
||
|
||
position: relative;
|
||
&-title {
|
||
@include qaTitleHeight();
|
||
display: block;
|
||
width: 100%;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
|
||
p {
|
||
@include qaTitleFontsize();
|
||
@include qaTitleMarginTop();
|
||
|
||
@include qaQdisplay();
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
font-style: normal;
|
||
line-height: 1.25;
|
||
letter-spacing: normal;
|
||
text-align: left;
|
||
color: $mid-blue;
|
||
}
|
||
span {
|
||
@include qaIcon();
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
top: 15px;
|
||
top: 50%;
|
||
transform: translateY(-45%);
|
||
right: 3.5%;
|
||
}
|
||
}
|
||
|
||
&-input {
|
||
position: absolute;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
&-input:checked ~ &-text {
|
||
display: block;
|
||
width: 88%;
|
||
margin: 0 auto;
|
||
padding-bottom: 20px;
|
||
|
||
p {
|
||
width: 100%;
|
||
@include qaTextFontsize();
|
||
}
|
||
}
|
||
|
||
&-input:checked ~ &-title {
|
||
p {
|
||
@include qaTextMarginTop();
|
||
}
|
||
span {
|
||
transform: rotate(180deg);
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 3.5%;
|
||
}
|
||
}
|
||
|
||
&-text {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&-icon {
|
||
@include qaIconSize();
|
||
}
|
||
}
|
||
}
|