RomanGolienko
/
Roman-website-applicant
forked from aslan/website_applicants
1
0
Fork 0
Code Pull Requests Activity
Roman-website-applicant/tutorgo/assets/scssold/components/_theme.scss

502 lines
8.0 KiB
SCSS
Raw Normal View History

project init
2023-12-28 11:59:50 +03:00
@use '../utils' as *;
/*-----------------------------------------------------------------------------------
Theme Name: Tutorgo - Online Learning and Education HTML Template
Author: Theme Pure
Support: https://themepure.net/help/support/login
Description: Tutorgo – Education Template is a clean and modern HTML5 , Bootstrap Education Template.
Version: 1.0
-----------------------------------------------------------------------------------
/************ TABLE OF CONTENTS ***************
01. THEME DEFAULT CSS
02. HEADER CSS
03. MEAN MENU CSS
04. SLIDER CSS
05. HERO CSS
06. ABOUT CSS
07. TEAM CSS
08. SERVICES CSS
09. PORTFOLIO CSS
10. COURSES CSS
11. EVENT CSS
12. CTA CSS
13. COUNTER CSS
14. FEATURE CSS
15. TESTIMONIAL CSS
16. BRAND CSS
17. BLOG CSS
18. CHECKOUT CSS
19. CART CSS
20. LOGIN CSS
21. FOOTER CSS
**********************************************/
/*----------------------------------------*/
/* 01. THEME DEFAULT CSS START
/*----------------------------------------*/
@import url($font-url);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*---------------------------------
typography css start
---------------------------------*/
body {
font-family: var(--tp-ff-body);
font-size: var(--tp-fz-body);
font-weight: normal;
color: var(--tp-text-body);
line-height: 26px;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--tp-ff-heading);
color: var(--tp-heading-primary);
margin-top: 0px;
font-weight: 700;
line-height: 1.2;
@include transition(.3s);
}
h1 {
font-size: var(--tp-fz-h1);
}
h2 {
font-size: var(--tp-fz-h2);
}
h3 {
font-size: var(--tp-fz-h3);
}
h4 {
font-size: var(--tp-fz-h4);
}
h5 {
font-size: var(--tp-fz-h5);
}
h6 {
font-size: var(--tp-fz-h6);
}
ul {
margin: 0px;
padding: 0px;
}
p {
font-family: var(--tp-ff-p);
font-size: var(--tp-fz-p);
font-weight: var(--tp-fw-normal);
color: var(--tp-text-body);
margin-bottom: 15px;
line-height: 26px;
}
a,
button,
p,
input,
select,
textarea,
li,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
@include transition(.3s);
}
a:focus,
.button:focus {
text-decoration: none;
outline: none;
}
a:focus,
a:hover {
color: inherit;
text-decoration: none;
}
a,
button {
color: inherit;
outline: none;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
button:focus {
outline: 0;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
input {
outline: none;
@include tp-placeholder {
color: var(--tp-text-3);
}
}
input[type="color"] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: none;
border: 0;
cursor: pointer;
height: 100%;
width: 100%;
padding: 0;
border-radius: 50%;
}
*::-moz-selection {
background: var(--tp-common-black);
color: var(--tp-common-white);
text-shadow: none;
}
::-moz-selection {
background: var(--tp-common-black);
color: var(--tp-common-white);
text-shadow: none;
}
::selection {
background: var(--tp-common-black);
color: var(--tp-common-white);
text-shadow: none;
}
*::-moz-placeholder {
color: var(--tp-common-black);
font-size: var(--tp-fz-body);
opacity: 1;
@include tp-placeholder {
color: var(--tp-text-3);
}
}
*::placeholder {
color: var(--tp-common-black);
font-size: var(--tp-fz-body);
opacity: 1;
@include tp-placeholder {
color: var(--tp-text-3);
}
}
/*---------------------------------
common classes css start
---------------------------------*/
.w-img {
& img {
width: 100%;
}
}
.m-img {
& img {
max-width: 100%;
}
}
.fix {
overflow: hidden
}
.clear {
clear: both;
}
.z-index-1 {
z-index: 1;
}
.z-index-11 {
z-index: 11;
}
.overflow-y-visible {
overflow-x: hidden;
overflow-y: visible;
}
.p-relative {
position: relative;
}
.p-absolute {
position: absolute;
}
.include-bg {
@include background();
}
/*----------------------------------------
Body Overlay
-----------------------------------------*/
.body-overlay {
background-color: var(--tp-common-black);
height: 100%;
width: 100%;
position: fixed;
top: 0;
z-index: 98;
right: 0;
opacity: 0;
visibility: hidden;
@include transition(.3s);
&:hover {
cursor: url(../img/icons/cross-out.png), pointer;
}
}
.body-overlay.opened {
opacity: .7;
visibility: visible;
}
/*----------------------------------------
Progress Wrap
-----------------------------------------*/
.progress-wrap {
@media #{$xs} {
right: 15px;
bottom: 15px;
}
}
// basic pagination
.basic-pagination {
& ul {
& li {
display: inline-block;
margin-bottom: 30px;
&:not(:last-child) {
margin-right: 10px;
@media #{$xs} {
margin-right: 3px;
}
}
& a,
& span {
display: inline-block;
width: 50px;
height: 50px;
line-height: 46px;
text-align: center;
@include border-radius(7px);
border: 2px solid #f1f1f1;
font-size: 18px;
font-weight: 600;
&:hover,
&.current {
background: var(--tp-theme-primary);
border-color: var(--tp-theme-primary);
color: var(--tp-common-white);
}
}
}
}
}
// nice select arrow
.nice-select {
&::after {
border: none;
background-color: transparent;
@include transform(translateY(-50%));
margin-top: 0;
right: 0;
content: '\f107';
font-family: var(--tp-ff-fontawesome);
transform-origin: center;
color: var(--tp-common-black);
font-weight: 500;
height: auto;
width: auto;
}
&.open {
&::after {
@include transform(translateY(-50%) rotate(-180deg));
;
}
}
}
/* cart plus minus default style css */
// back to top
.tp-backtotop {
position: fixed;
bottom: 0;
right: 40px;
background: var(--tp-theme-primary);
z-index: 6;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 16px;
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
opacity: 0;
transition: .6s;
z-index: 99;
font-size: 20px;
border-radius: 5px;
&.show {
top: auto;
bottom: 40px;
opacity: 1;
}
&:hover {
background-color: var(--tp-theme-secondary);
}
}
.cart-plus,
.cart-minus{
width: 25px;
height: 30px;
line-height: 30px;
// border: 2px solid var(--tp-border-1);
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 14px;
@include transition(.3s);
& input {
}
&:hover{
cursor: pointer;
// color: var(--tp-common-white);
// background: var(--tp-theme-primary);
// border-color: var(--tp-theme-primary);
}
}
.product-quantity input {
color: #000;
font-size: 14px;
font-weight: normal;
text-align: center;
width: 40px;
}
.cart-input{
height:30px;
width: 32px;
text-align: center;
font-size: 14px;
border: none;
border-top: 2px solid var(--tp-border-1);
border-bottom: 2px solid var(--tp-border-1);
display: inline-block;
vertical-align: middle;
margin: 0 -3px;
padding-bottom: 0px;
&:focus{
outline: none;
}
}
/* dropcap */
.tp-dropcap {
display: inline-block;
font-size: 50px;
font-weight: 700;
float: left;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
color: var(--tp-common-black);
background-color: var(--tp-common-white);
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.06);
margin-right: 20px;
}
.course__view h4 {
font-size: 15px;
font-weight: 500;
color: #53545b;
display: inline-block;
margin-bottom: 0;
}
.course__sort-inner {
& .nice-select{
background-color: var(--tp-grey-2);
&::after{
right: 10px;
background-color: var(--tp-grey-2);
}
}
}