2021/src/assets/scss/news/agenda.scss

602 lines
13 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 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();
}
}
}