changes
This commit is contained in:
Xuan Loi
335
assets/styles/main.scss
Executable file
335
assets/styles/main.scss
Executable file
@@ -0,0 +1,335 @@
|
||||
|
||||
@use "bulma/sass/utilities/initial-variables.scss" as *;
|
||||
@use "bulma/sass/utilities/mixins.scss" as *;
|
||||
|
||||
$color:(
|
||||
primary: #3392ec, //#008000,
|
||||
findata: #ff8829,
|
||||
danger: #f14668,
|
||||
dark: #686868,
|
||||
twitter: #3392ec
|
||||
);
|
||||
$size: (
|
||||
one: 10px,
|
||||
two: 17px,
|
||||
three: 30px,
|
||||
four: 40px,
|
||||
five: 50px,
|
||||
six: 60px
|
||||
);
|
||||
|
||||
@mixin cbox($width, $height, $font, $background) {
|
||||
display:flex;
|
||||
width: $width;
|
||||
height: $height;
|
||||
border: 1.5px solid #ff8829;
|
||||
font-size: $font;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-ms-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
color: #ff8829;
|
||||
font-weight: bold;
|
||||
background-color: $background;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@each $name, $hex in $color {
|
||||
@each $n, $v in $size {
|
||||
.cbox-#{$name}-#{$n}{
|
||||
@include cbox($v*2, $v*2, $v*1.1, white);
|
||||
border-color: $hex ;
|
||||
color: $hex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $name, $hex in $color {
|
||||
@each $n, $v in $size {
|
||||
.cbox-fill-#{$name}-#{$n}{
|
||||
@include cbox($v*2, $v*2, $v, $hex);
|
||||
border-color: $hex ;
|
||||
color: findColorInvert($hex);
|
||||
}
|
||||
}
|
||||
}
|
||||
@for $i from 10 through 40 {
|
||||
.fs-#{$i} {
|
||||
font-size: $i + px;
|
||||
}
|
||||
}
|
||||
@for $i from 10 through 40 {
|
||||
.fsb-#{$i} {
|
||||
font-size: $i + px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.fullheight {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.textsize {
|
||||
@include mobile {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
background: url('/logo.svg') no-repeat center center;
|
||||
background-size: 140px;
|
||||
width: 170px
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid hsl(0, 0%, 90%);
|
||||
}
|
||||
|
||||
.carousel-height {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
@include mobile {
|
||||
height: 110vh;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-mt20 {
|
||||
@include mobile {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-px10 {
|
||||
@include mobile {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-pt10 {
|
||||
@include mobile {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-pt80 {
|
||||
padding-top: 120px;
|
||||
@include mobile {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.fullhd-pt30 {
|
||||
padding-top: 30px;
|
||||
@include until($fullhd) {
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-width {
|
||||
width: 120px !important;
|
||||
@include mobile {
|
||||
width: 112px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hideon-mobile {
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.maintext {
|
||||
margin-top: 20px;
|
||||
font-size: 40px;
|
||||
line-height:3rem;
|
||||
font-weight: 600;
|
||||
@include mobile {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtext {
|
||||
margin-top: 30px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
@include mobile {
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 10 through 50 {
|
||||
.fs-#{$i} {
|
||||
font-size: $i + px;
|
||||
}
|
||||
};
|
||||
|
||||
@for $i from 10 through 50 {
|
||||
.fsb-#{$i} {
|
||||
font-size: $i + px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.dotslide {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.activetab {
|
||||
border: 2px solid #3392ec; //#008000; // #0AB412
|
||||
border-radius: 8px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
color: white;
|
||||
background-color: #3392ec; //#008000;
|
||||
}
|
||||
|
||||
.blockdiv {
|
||||
max-width: 1900px !important;
|
||||
background-color: #FFFFFF;
|
||||
height: 100vh;
|
||||
//margin-top: 40px !important;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
@include until($desktop) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 65px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding-left: 16px;
|
||||
padding-right:16px;
|
||||
padding-top: 65px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.columns .column {
|
||||
@include mobile {
|
||||
padding-left: 0px;
|
||||
padding-right:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-desktop {
|
||||
@media screen and (min-width: $desktop) {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.padding-text {
|
||||
padding-left: 15%;
|
||||
padding-right: 5%;
|
||||
@include until($desktop) {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
@include until($fullhd) {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-image{
|
||||
padding-left: 5%;
|
||||
padding-right: 15%;
|
||||
@include until($fullhd) {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
@include until($desktop) {
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
}
|
||||
@include mobile {
|
||||
padding-left: 0%;
|
||||
padding-right: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.imgcontainer {
|
||||
position: relative;
|
||||
width: 100% !important;
|
||||
max-width: 500px;
|
||||
}
|
||||
.centered {
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
margin-left: 0px;
|
||||
z-index: 999;
|
||||
bottom: 110%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.to-left {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
@mixin tooltipshow() {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
min-width: 300px;
|
||||
z-index: 999;
|
||||
background-color: #F7F18A;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
@include tooltipshow()
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext .to-left {
|
||||
@include tooltipshow()
|
||||
}
|
||||
|
||||
@mixin dot($background) {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: $background;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@each $name, $hex in $color {
|
||||
.dot-#{$name} {
|
||||
@include dot($hex);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user