You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
747 lines
15 KiB
747 lines
15 KiB
// ---------------------------------------------------------
|
|
// BASE CSS
|
|
// ---------------------------------------------------------
|
|
|
|
html, html a, body {
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
body {
|
|
font-family: $font-primary;
|
|
font-size: 14px;
|
|
color: $default-text-color;
|
|
line-height: 1.5;
|
|
letter-spacing: 0.2px;
|
|
overflow-x: hidden;
|
|
background: $page-background;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: $font-secondary;
|
|
letter-spacing: 0.5px;
|
|
line-height: 1.5;
|
|
|
|
a {
|
|
font-family: $font-secondary;
|
|
}
|
|
|
|
small {
|
|
font-weight: 300;
|
|
color: lighten($default-dark, 5%);
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: $font-primary;
|
|
line-height: 1.9;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 18px;
|
|
}
|
|
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
a {
|
|
color: $default-link;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
color: darken($default-link, 20%);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&.text-gray {
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
color: $default-dark !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
:focus {
|
|
outline: none;
|
|
}
|
|
|
|
hr {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
|
|
.btn-create-one{
|
|
border-color: #b8daff;
|
|
background-color: #cce5ff;
|
|
color: #004085 !important;
|
|
}
|
|
.btn-create-two{
|
|
border-color: #c3e6cb;
|
|
background-color: #d4edda;
|
|
color: #155724 !important;
|
|
}
|
|
.btn-create-three{
|
|
border-color: #cecece;
|
|
background-color: #ffffff;
|
|
color: #374548 !important;
|
|
}
|
|
|
|
/** BTN BUTTONS COLORS **/
|
|
.btn{
|
|
.btn-fw {
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
.btn-primary {
|
|
color: #fff;
|
|
background-color: #308ee0;
|
|
border-color: #308ee0;
|
|
&:hover{
|
|
background-color: #1e7bcb;
|
|
border-color: #1d74c0;
|
|
}
|
|
}
|
|
.btn-secondary {
|
|
color: #212529;
|
|
background-color: #e5e5e5;
|
|
border-color: #e5e5e5;
|
|
&:hover{
|
|
background-color: #d2d2d2;
|
|
border-color: #cccccc;
|
|
}
|
|
}
|
|
.btn-success {
|
|
color: #fff;
|
|
background-color: #00ce68;
|
|
border-color: #00ce68;
|
|
&:hover{
|
|
background-color: #00a855;
|
|
border-color: #009b4e;
|
|
}
|
|
}
|
|
.btn-danger {
|
|
color: #fff;
|
|
background-color: #e65251;
|
|
border-color: #e65251;
|
|
&:hover{
|
|
background-color: #e13130;
|
|
border-color: #e02624;
|
|
}
|
|
}
|
|
.btn-warning {
|
|
color: #FFF;
|
|
background-color: #ffaf00;
|
|
border-color: #ffaf00;
|
|
&:hover{
|
|
background-color: #d99500;
|
|
border-color: #cc8c00;
|
|
}
|
|
}
|
|
.btn-info {
|
|
color: #fff;
|
|
background-color: #8862e0;
|
|
border-color: #8862e0;
|
|
&:hover{
|
|
background-color: #7042da;
|
|
border-color: #6837d8;
|
|
}
|
|
}
|
|
.btn-light {
|
|
color: #212529;
|
|
background-color: #f3f5f6;
|
|
border-color: #f3f5f6;
|
|
&:hover{
|
|
background-color: #dde3e6;
|
|
border-color: #d6dde0;
|
|
}
|
|
}
|
|
.btn-dark {
|
|
color: #fff;
|
|
background-color: #424964;
|
|
border-color: #424964;
|
|
&:hover{
|
|
background-color: #33384d;
|
|
border-color: #2e3345;
|
|
}
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: #308ee0;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: #308ee0;
|
|
}
|
|
.btn-outline-secondary {
|
|
color: rgba(0, 0, 0, 0.5);
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: #e5e5e5;
|
|
}
|
|
.btn-outline-success {
|
|
color: #00ce68;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: #00ce68;
|
|
}
|
|
.btn-outline-danger {
|
|
color: #e65251;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: #e65251;
|
|
}
|
|
.btn-outline-warning {
|
|
color: #ffaf00;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: #ffaf00;
|
|
}
|
|
.btn-outline-info {
|
|
color: #8862e0;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: #8862e0;
|
|
}
|
|
|
|
.footer p{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.footer{
|
|
padding: 18px;
|
|
background-color: $default-white;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
/** SELECT */
|
|
|
|
.btn-select{
|
|
color: #495057;
|
|
background-color: white;
|
|
border-color: $select-color;
|
|
&.bs-placeholder{
|
|
color: $select-color !important;
|
|
}
|
|
}
|
|
|
|
.select2-container--default{
|
|
.select2-selection--single {
|
|
background-color: #fff;
|
|
border: 1px solid $select-color;
|
|
border-radius: 4px;
|
|
height: 40px !important;
|
|
line-height: 40px;
|
|
.select2-selection__rendered{
|
|
line-height: 40px;
|
|
}
|
|
.select2-selection__arrow{
|
|
height: 40px;
|
|
b{
|
|
border-color: #495057 transparent transparent transparent;
|
|
border-width: 6px 5px 0 5px;
|
|
left: 20%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.help-block{
|
|
font-size: 12px;
|
|
margin-bottom: 0;
|
|
}
|
|
// ---------------------------------------------------------
|
|
// PAGE CONTAINER
|
|
// ---------------------------------------------------------
|
|
|
|
.page-container {
|
|
min-height: 100vh;
|
|
padding-left: $offscreen-size;
|
|
transition: all 0.2s ease;
|
|
|
|
@include between($breakpoint-md, $breakpoint-xl) {
|
|
padding-left: $collapsed-size;
|
|
}
|
|
|
|
@include to($breakpoint-md) {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// MAIN CONTAINER
|
|
// ---------------------------------------------------------
|
|
|
|
.main-content {
|
|
padding: 75px 20px 20px;
|
|
min-height: calc(100vh - 61px);
|
|
&.bg-content{
|
|
background-color: $page-background;
|
|
}
|
|
.box-body{
|
|
background-color: transparent;
|
|
}
|
|
@include to($breakpoint-md) {
|
|
padding: 85px 5px 5px;
|
|
}
|
|
}
|
|
|
|
.remain-height {
|
|
height: calc(100vh - 126px);
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// FULL CONTAINER
|
|
// ---------------------------------------------------------
|
|
|
|
.full-container {
|
|
left: $offscreen-size;
|
|
min-height: calc(100vh - #{$header-height});
|
|
position: absolute;
|
|
right: 0;
|
|
top: $header-height;
|
|
transition: all 0.2s ease;
|
|
|
|
@include between($breakpoint-md, $breakpoint-xl) {
|
|
left: 0;
|
|
padding-left: $collapsed-size;
|
|
}
|
|
|
|
@include to($breakpoint-md) {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// COLLAPSE STATE
|
|
// ---------------------------------------------------------
|
|
|
|
.is-collapsed {
|
|
.page-container {
|
|
padding-left: $collapsed-size;
|
|
|
|
@include to($breakpoint-md) {
|
|
padding-left: 0;
|
|
}
|
|
|
|
@include between($breakpoint-md, $breakpoint-xl) {
|
|
padding-left: $offscreen-size;
|
|
}
|
|
}
|
|
|
|
.full-container {
|
|
left: $collapsed-size;
|
|
|
|
@include to($breakpoint-md) {
|
|
left: 0;
|
|
}
|
|
|
|
@include between($breakpoint-md, $breakpoint-xl) {
|
|
left: $offscreen-size;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// FOOTER
|
|
// ---------------------------------------------------------
|
|
|
|
footer {
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// @Text Align
|
|
// ---------------------------------------------------------
|
|
|
|
.ta-c { text-align: center !important; }
|
|
.ta-l { text-align: left !important; }
|
|
.ta-r { text-align: right !important; }
|
|
|
|
// ---------------------------------------------------------
|
|
// @Font Size
|
|
// ---------------------------------------------------------
|
|
|
|
.fsz-xs { font-size: 0.75rem !important; }
|
|
.fsz-sm { font-size: 0.87rem !important; }
|
|
.fsz-def { font-size: 1rem !important; }
|
|
.fsz-md { font-size: 1.15rem !important; }
|
|
.fsz-lg { font-size: 1.4rem !important; }
|
|
.fsz-xl { font-size: 1.7rem !important; }
|
|
|
|
// ---------------------------------------------------------
|
|
// @Font Weight
|
|
// ---------------------------------------------------------
|
|
|
|
.fw-100 { font-weight: 100 !important; }
|
|
.fw-200 { font-weight: 200 !important; }
|
|
.fw-300 { font-weight: 300 !important; }
|
|
.fw-400 { font-weight: 400 !important; }
|
|
.fw-500 { font-weight: 500 !important; }
|
|
.fw-600 { font-weight: 600 !important; }
|
|
.fw-700 { font-weight: 700 !important; }
|
|
.fw-800 { font-weight: 800 !important; }
|
|
.fw-900 { font-weight: 900 !important; }
|
|
|
|
// ---------------------------------------------------------
|
|
// @Line Height
|
|
// ---------------------------------------------------------
|
|
|
|
.lh-0 { line-height: 0 !important; }
|
|
.lh-1 { line-height: 1 !important; }
|
|
.lh-3\/2 { line-height: 1.5 !important; }
|
|
|
|
.box-header{
|
|
color: $grey-900;
|
|
display: block;
|
|
padding: 0;
|
|
position: relative;
|
|
.box-title{
|
|
font-weight: 500;
|
|
color: #404852;
|
|
margin-bottom: 22px;
|
|
font-size: 14px;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
.carousel-item img{
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.card{
|
|
border: 0;
|
|
border-radius: 2px;
|
|
.card-body{
|
|
padding: 1.88rem 1.81rem;
|
|
@include landscape($breakpoint-sm) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
/* CATEGORY CLASSIC */
|
|
.category-list{
|
|
display: grid;
|
|
grid-gap: 1rem;
|
|
grid-row-gap: 16px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
@include portrait($breakpoint-sm, $breakpoint-md){
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
@include landscape($breakpoint-sm) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
.card-category{
|
|
border: 1px solid #dee2e6;
|
|
border-bottom-width: 5px;
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-gap: 10px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
.card-body{
|
|
padding: 0;
|
|
.image-container{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
margin: auto;
|
|
.thumbnail{
|
|
&:before{
|
|
content: "";
|
|
background-color: #000;
|
|
z-index: 1;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: .35;
|
|
}
|
|
}
|
|
&:hover img{
|
|
transform: scale(1.2);
|
|
}
|
|
img{
|
|
position: absolute;
|
|
top: -50%;
|
|
left: 0;
|
|
bottom: 25%;
|
|
right: 0;
|
|
transition: all 1s ease;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.image-content{
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
.title{
|
|
font-size: 18px;
|
|
}
|
|
.courses{
|
|
font-size: 12px;
|
|
}
|
|
a{
|
|
color: $default-white;
|
|
display: block;
|
|
width: 100%;
|
|
padding-top: 5%;
|
|
padding-bottom: 5%;
|
|
}
|
|
}
|
|
}
|
|
@include portrait($breakpoint-sm, $breakpoint-md){
|
|
padding: 0;
|
|
}
|
|
.title{
|
|
font-size: 16px;
|
|
a{
|
|
color: $grey-800;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* COURSE CLASSIC */
|
|
.course-list{
|
|
display: grid;
|
|
grid-gap: 1rem;
|
|
grid-row-gap: 16px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
@include portrait($breakpoint-sm, $breakpoint-md){
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
@include landscape($breakpoint-sm) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
}
|
|
.card-course-classic{
|
|
border: 1px solid #dee2e6;
|
|
border-bottom-width: 5px;
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-gap: 10px;
|
|
align-items: center;
|
|
.card-body{
|
|
padding: 1rem 1.2rem;
|
|
.card-icon{
|
|
text-align: center;
|
|
}
|
|
@include portrait($breakpoint-sm, $breakpoint-md){
|
|
padding: 0.8rem;
|
|
}
|
|
.title{
|
|
font-size: 16px;
|
|
a{
|
|
color: $grey-800;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* COURSE GRID */
|
|
.card-course{
|
|
transform: perspective(1px) translateZ(0);
|
|
transition-property: box-shadow;
|
|
transition-duration: 0.3s;
|
|
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.15);
|
|
&:hover,
|
|
&:focus{
|
|
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.20);
|
|
}
|
|
&.card-category{
|
|
.card-subtitle{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.category{
|
|
position: absolute;
|
|
border-radius: 10px;
|
|
background-color: $default-yellow;
|
|
color: $default-black;
|
|
font-weight: bold;
|
|
padding: 0.2rem 0.8rem;
|
|
top: -0.8rem;
|
|
left: 0.5rem;
|
|
font-size: 12px;
|
|
}
|
|
.card-body{
|
|
padding: 0.5rem 0.25rem;
|
|
.card-title{
|
|
margin-bottom: 0.5rem;
|
|
.title{
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
.card-author{
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
.list-name{
|
|
font-size: 12px;
|
|
color: $grey-700;
|
|
cursor: pointer;
|
|
}
|
|
.name{
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
color: $grey-700;
|
|
display: inline-block;
|
|
&:after{
|
|
content: ", ";
|
|
}
|
|
&:last-child{
|
|
&:after{
|
|
content: " ";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/******************* Accordion B4 *****************/
|
|
|
|
.accordion-b4 {
|
|
.card {
|
|
border: 0 none;
|
|
box-shadow: none;
|
|
}
|
|
.card-header {
|
|
padding: 0;
|
|
background: #fff;
|
|
border: none;
|
|
}
|
|
.card-title a {
|
|
display: block;
|
|
position: relative;
|
|
background: transparent;
|
|
color: $menu-background;
|
|
font-size: 14px;
|
|
font-weight: bolder;
|
|
text-transform: uppercase;
|
|
margin-bottom: 15px;
|
|
padding: 15px 50px;
|
|
border-bottom: 2px solid $menu-background;
|
|
border-radius: 0 15px 0 15px;
|
|
transition: all 0.10s linear 0s;
|
|
cursor: pointer;
|
|
&.collapsed {
|
|
color: #808080;
|
|
border-bottom: 1px solid #d3d3d3;
|
|
margin: 0;
|
|
}
|
|
i {
|
|
color: $menu-background;
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 20px;
|
|
font-size: 20px;
|
|
}
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 36px;
|
|
border: 7px solid transparent;
|
|
border-top: 7px solid $menu-background;
|
|
}
|
|
&.collapsed {
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 36px;
|
|
border: 0 none;
|
|
}
|
|
&:hover {
|
|
color: #6a6060;
|
|
}
|
|
}
|
|
&:after {
|
|
content: "\f106";
|
|
font-family: "Font Awesome 5 Free", serif;
|
|
font-weight: 900;
|
|
color: $menu-secondary;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 25px;
|
|
}
|
|
&.collapsed:after {
|
|
font-family: "Font Awesome 5 Free", serif;
|
|
font-weight: 900;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 25px;
|
|
content: "\f107";
|
|
color: #808080;
|
|
}
|
|
}
|
|
.card-body {
|
|
border-top: 0 none;
|
|
color: #808080;
|
|
.tools{
|
|
width: 160px;
|
|
height: 160px;
|
|
display: block;
|
|
float: left;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
background-color: transparent;
|
|
.big_icon{
|
|
position: absolute;
|
|
width: 84px;
|
|
height: 84px;
|
|
top: 40%;
|
|
margin-top: -50px;
|
|
left: 44%;
|
|
margin-left: -32px;
|
|
text-align: center;
|
|
border: 1px solid rgba(0, 0, 0, 0.125) ;
|
|
border-radius: 50%;
|
|
background-color: #def5ff;
|
|
img{
|
|
transition: transform .2s ease-in;
|
|
&:hover{
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
a{
|
|
display: block;
|
|
padding-top: 10px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.content{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|