applicant-site/public/scssold/components/_offcanvas.scss

127 lines
2.6 KiB
SCSS

@use '../utils' as *;
/*----------------------------------------*/
/* OFFCANVAS CSS START
/*----------------------------------------*/
.offcanvas {
&__logo{
& img {
max-width: 128px;
}
}
&__area {
position: fixed;
right: -490px;
top: 0;
width: 450px;
height: 100%;
transition-duration: .5s;
z-index: 999;
-ms-overflow-style: none;
/* for Internet Explorer, Edge */
scrollbar-width: none;
/* for Firefox */
overflow-y: scroll;
min-width: 300px;
min-height: 768px;
background-size: cover;
&::-webkit-scrollbar {
display: none;
/* for Chrome, Safari, and Opera */
}
background-color: var(--tp-grey-1);
&.offcanvas-opened {
right: 0px;
}
@media #{$xs} {
width: 290px;
}
}
&__wrapper {
position: relative;
padding: 45px;
overflow: auto;
width: 100%;
height: 100%;
scrollbar-width: none;
& .tp-btn{
height: 45px;
line-height: 45px;
}
@media #{$xs} {
padding: 20px;
}
}
&__close {
&-btn {
display: inline-block;
font-size: 16px;
height: 40px;
width: 40px;
line-height: 36px;
background: var(--tp-theme-primary);
color: #fff;
&:hover {
background: var(--tp-theme-secondary);
}
}
}
&-info{
& p {
margin-bottom: 40px;
color: var(--tp-common-black);
}
}
&__top {
padding-bottom: 20px;
@media #{$xs,$sm,$md} {
margin-bottom: 0;
}
}
&__cta {
&-2{
position: static;
}
position: absolute;
bottom: 0;
@media #{$xs,$sm,$md} {
position: static;
}
&-title {
color: var(--tp-common-black);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
line-height: 22px;
margin-bottom: 20px;
}
& span {
display: block;
font-size: 16px;
color: var(--tp-common-black);
margin-bottom: 15px;
& a {
&:hover {
color:var(--tp-theme-primary) ;
}
}
}
}
}