forked from UKSOURCE/hailearning.edu.vn
Initial commit
This commit is contained in:
r2xrzh9q2z-lab
501
public/assets/scss/_helping.scss
Normal file
501
public/assets/scss/_helping.scss
Normal file
@@ -0,0 +1,501 @@
|
||||
|
||||
//page scroll bar add
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px $bg-color;
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $theme-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
//page scroll bar add
|
||||
|
||||
//Basic Code Start
|
||||
.fix {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ralt{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
//Basic Code End
|
||||
|
||||
//Video Css Start
|
||||
.ripple {
|
||||
position: relative;
|
||||
|
||||
&::before,&::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6);
|
||||
-webkit-animation: rippleOne 3s infinite;
|
||||
animation: rippleOne 3s infinite;
|
||||
}
|
||||
|
||||
&::before {
|
||||
-webkit-animation-delay: 0.9s;
|
||||
animation-delay: 0.9s;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
-webkit-animation-delay: 0.6s;
|
||||
animation-delay: 0.6s;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
//Video Css End
|
||||
|
||||
.array-buttons {
|
||||
@include flex;
|
||||
gap: 20px;
|
||||
|
||||
@include breakpoint (max-xl) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.array-prev {
|
||||
width: 110px;
|
||||
height: 48px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: $header-color;
|
||||
@include transition;
|
||||
border-radius: 100px;
|
||||
border: 1px solid $header-color;
|
||||
font-weight: 600;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $theme-color-2;
|
||||
color: $header-color;
|
||||
border: 1px solid $theme-color-2;
|
||||
}
|
||||
}
|
||||
|
||||
.array-next {
|
||||
width: 110px;
|
||||
height: 48px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
background-color: $theme-color-2;
|
||||
color: $header-color;
|
||||
@include transition;
|
||||
border-radius: 100px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $header-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.array-buttons-2 {
|
||||
@include flex;
|
||||
gap: 20px;
|
||||
|
||||
@include breakpoint (max-xl) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.array-prev {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
background-color: $header-color;
|
||||
color: #00E5FF;
|
||||
@include transition;
|
||||
border-radius: 100%;
|
||||
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.array-next {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
background: #2ADDC8;
|
||||
color: $header-color;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background: $theme-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.array-buttons-4 {
|
||||
@include flex;
|
||||
gap: 20px;
|
||||
|
||||
@include breakpoint (max-xl) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.array-prev {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
background: $bg-color;
|
||||
color: $white;
|
||||
@include transition;
|
||||
border-radius: 100%;
|
||||
|
||||
}
|
||||
|
||||
.array-next {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
border: 1px solid rgba(65, 65, 65, 1);
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
color: $white;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background: $bg-color;
|
||||
border: 1px none;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
//pagination default
|
||||
|
||||
//pagination default
|
||||
|
||||
.swiper-dot {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transition: 0.6s;
|
||||
border-radius: 30px;
|
||||
background-color: $theme-color-2;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
&:not(:last-child){
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
background-color: $theme-color;
|
||||
transition: 0.6s;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 30px;
|
||||
|
||||
&::before {
|
||||
@include before;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.swiper-dot-2 {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: 0.6s;
|
||||
border-radius: 30px;
|
||||
background-color: transparent;
|
||||
border: 2px solid $header-color;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
&:not(:last-child){
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
||||
border: 2px solid $header-color;
|
||||
transition: 0.6s;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 30px;
|
||||
|
||||
&::before {
|
||||
@include before;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.slide-transtion {
|
||||
-webkit-transition-timing-function: linear;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
.brand-slide-element {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.page-nav-wrap {
|
||||
margin-top: 60px;
|
||||
|
||||
@include breakpoint (max-xl) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
.page-numbers {
|
||||
&.current {
|
||||
background: linear-gradient(180deg, #1539EE 0%, #2ADDC8 100%);
|
||||
color: $white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid $theme-color-2;
|
||||
color: $header-color;
|
||||
@include transition;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease-in-out;
|
||||
margin: 0 2px;
|
||||
|
||||
&.style-2 {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background-color: $theme-color-2;
|
||||
color: $white;
|
||||
@include transition;
|
||||
border-radius: 10px;
|
||||
border: 1px solid $header-color;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
margin-top: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-top: 2px;
|
||||
color: $white;
|
||||
@include transition;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $theme-color-2;
|
||||
color: $white;
|
||||
border: 1px solid $theme-color-2;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.sticky-style {
|
||||
position: sticky !important;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
|
||||
.custom-container {
|
||||
max-width: 1700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bw-img-anim-left,
|
||||
.bw-img-anim-right {
|
||||
transition: clip-path 0.5s ease-out;
|
||||
}
|
||||
|
||||
|
||||
.split-text {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.split-text .line {
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
html.lenis, html.lenis body {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.smooth-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lenis.lenis-smooth {
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
|
||||
//>>>>> Nice Select Css Start <<<<<//
|
||||
.nice-select {
|
||||
background-color: transparent;
|
||||
width: unset;
|
||||
outline: none;
|
||||
// border-bottom: 2px solid $border-color !important;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nice-select .current {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.nice-select.open .list {
|
||||
background: $bg-color;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
text-transform: capitalize;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.nice-select .option.selected.focus {
|
||||
background: $bg-color;
|
||||
outline: none;
|
||||
color: $text-color;
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nice-select .option {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nice-select .option:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//>>>>> Nice Select Css End <<<<<//
|
||||
|
||||
.p-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tp-clip-anim {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transform: scale(1.1);
|
||||
opacity: 0;
|
||||
animation: reveal 1s forwards;
|
||||
}
|
||||
|
||||
// delay for each slice
|
||||
@for $i from 1 through 9 {
|
||||
.mask-#{$i} {
|
||||
clip-path: inset(0 #{(9 - $i) * 11.1%} 0 #{($i - 1) * 11.1%});
|
||||
animation-delay: #{$i * 0.1}s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user