mirror of https://github.com/Abi476/Ta.git
1166 lines
20 KiB
SCSS
1166 lines
20 KiB
SCSS
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! General SCSS Start !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
body {
|
|
line-height: 1.6;
|
|
color: $brand-body;
|
|
overflow-x: hidden;
|
|
font-size: $font-body;
|
|
scroll-behavior: smooth;
|
|
font-family: $font-inter;
|
|
transition: all 0.3s ease;
|
|
-webkit-font-smoothing: antialiased;
|
|
background-color: rgba(243, 244, 246);
|
|
}
|
|
|
|
* {
|
|
&:focus {
|
|
outline: none;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: $brand-dark;
|
|
text-decoration: none;
|
|
font-weight: $font-600;
|
|
transition: all 0.3s ease;
|
|
&:hover {
|
|
color: $primary;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:not([href]) {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.c-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.h1,
|
|
.h2,
|
|
.h3,
|
|
.h4,
|
|
.h5,
|
|
.h6,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: $brand-dark;
|
|
font-weight: $font-700;
|
|
}
|
|
|
|
img {
|
|
border-radius: $radius-xs;
|
|
}
|
|
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Avatar !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.avatar-text,
|
|
.avatar-image {
|
|
width: 40px;
|
|
height: 40px;
|
|
max-width: 40px;
|
|
max-height: 40px;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
overflow: hidden;
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: $font-700;
|
|
background-color: $white;
|
|
border: 1px solid $border-color-2;
|
|
}
|
|
.avatar-xs {
|
|
width: 12px;
|
|
height: 12px;
|
|
max-width: 12px;
|
|
max-height: 12px;
|
|
min-width: 12px;
|
|
min-height: 12px;
|
|
* {
|
|
font-size: $font-8;
|
|
}
|
|
}
|
|
.avatar-sm {
|
|
width: 20px;
|
|
height: 20px;
|
|
max-width: 20px;
|
|
max-height: 20px;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
* {
|
|
font-size: $font-10;
|
|
}
|
|
}
|
|
.avatar-md {
|
|
width: 30px;
|
|
height: 30px;
|
|
max-width: 30px;
|
|
max-height: 30px;
|
|
min-width: 30px;
|
|
min-height: 30px;
|
|
* {
|
|
font-size: $font-12;
|
|
}
|
|
}
|
|
.avatar-lg {
|
|
width: 50px;
|
|
height: 50px;
|
|
max-width: 50px;
|
|
max-height: 50px;
|
|
min-width: 50px;
|
|
min-height: 50px;
|
|
}
|
|
.avatar-xl {
|
|
width: 65px;
|
|
height: 65px;
|
|
max-width: 65px;
|
|
max-height: 65px;
|
|
min-width: 65px;
|
|
min-height: 65px;
|
|
}
|
|
.avatar-xxl {
|
|
width: 80px;
|
|
height: 80px;
|
|
max-width: 80px;
|
|
max-height: 80px;
|
|
min-width: 80px;
|
|
min-height: 80px;
|
|
}
|
|
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Sizing !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.font-body {
|
|
font-size: $font-body;
|
|
}
|
|
.fs-5 {
|
|
font-size: $font-5;
|
|
}
|
|
.fs-6 {
|
|
font-size: $font-6;
|
|
}
|
|
.fs-7 {
|
|
font-size: $font-7;
|
|
}
|
|
.fs-8 {
|
|
font-size: $font-8;
|
|
}
|
|
.fs-9 {
|
|
font-size: $font-9;
|
|
}
|
|
.fs-10 {
|
|
font-size: $font-10;
|
|
}
|
|
.fs-11 {
|
|
font-size: $font-11;
|
|
}
|
|
.fs-12 {
|
|
font-size: $font-12;
|
|
}
|
|
.fs-13 {
|
|
font-size: $font-13;
|
|
}
|
|
.fs-14 {
|
|
font-size: $font-14;
|
|
}
|
|
.fs-15 {
|
|
font-size: $font-15;
|
|
}
|
|
.fs-16 {
|
|
font-size: $font-16;
|
|
}
|
|
.fs-17 {
|
|
font-size: $font-17;
|
|
}
|
|
.fs-18 {
|
|
font-size: $font-18;
|
|
}
|
|
.fs-19 {
|
|
font-size: $font-19;
|
|
}
|
|
.fs-20 {
|
|
font-size: $font-20;
|
|
}
|
|
.fs-22 {
|
|
font-size: $font-22;
|
|
}
|
|
.fs-24 {
|
|
font-size: $font-24;
|
|
}
|
|
.fs-26 {
|
|
font-size: $font-26;
|
|
}
|
|
.fs-28 {
|
|
font-size: $font-28;
|
|
}
|
|
.fs-30 {
|
|
font-size: $font-30;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Family !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.font-lato {
|
|
font-family: $font-lato;
|
|
}
|
|
.font-rubik {
|
|
font-family: $font-rubik;
|
|
}
|
|
.font-inter {
|
|
font-family: $font-inter;
|
|
}
|
|
.font-cinzel {
|
|
font-family: $font-cinzel;
|
|
}
|
|
.font-nunito {
|
|
font-family: $font-nunito;
|
|
}
|
|
.font-roboto {
|
|
font-family: $font-roboto;
|
|
}
|
|
.font-ubuntu {
|
|
font-family: $font-ubuntu;
|
|
}
|
|
.font-poppins {
|
|
font-family: $font-poppins;
|
|
}
|
|
.font-raleway {
|
|
font-family: $font-raleway;
|
|
}
|
|
.font-system-ui {
|
|
font-family: $font-system-ui;
|
|
}
|
|
.font-noto-sans {
|
|
font-family: $font-noto-sans;
|
|
}
|
|
.font-fira-sans {
|
|
font-family: $font-fira-sans;
|
|
}
|
|
.font-work-sans {
|
|
font-family: $font-work-sans;
|
|
}
|
|
.font-open-sans {
|
|
font-family: $font-open-sans;
|
|
}
|
|
.font-maven-pro {
|
|
font-family: $font-maven-pro;
|
|
}
|
|
.font-quicksand {
|
|
font-family: $font-quicksand;
|
|
}
|
|
.font-montserrat {
|
|
font-family: $font-montserrat;
|
|
}
|
|
.font-josefin-sans {
|
|
font-family: $font-josefin-sans;
|
|
}
|
|
.font-ibm-plex-sans {
|
|
font-family: $font-ibm-plex-sans;
|
|
}
|
|
.font-source-sans-pro {
|
|
font-family: $font-source-sans-pro;
|
|
}
|
|
.font-montserrat-alt {
|
|
font-family: $font-montserrat-alt;
|
|
}
|
|
.font-roboto-slab {
|
|
font-family: $font-roboto-slab;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Colors !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.text-primary {
|
|
color: $primary !important;
|
|
}
|
|
.text-success {
|
|
color: $success !important;
|
|
}
|
|
.text-danger {
|
|
color: $danger !important;
|
|
}
|
|
.text-info {
|
|
color: $info !important;
|
|
}
|
|
.text-warning {
|
|
color: $warning !important;
|
|
}
|
|
.text-teal {
|
|
color: $teal !important;
|
|
}
|
|
.text-indigo {
|
|
color: $indigo !important;
|
|
}
|
|
.text-dark {
|
|
color: $dark !important;
|
|
}
|
|
.text-gray-100 {
|
|
color: $gray-100 !important;
|
|
}
|
|
.text-gray-200 {
|
|
color: $gray-200 !important;
|
|
}
|
|
.text-gray-300 {
|
|
color: $gray-300 !important;
|
|
}
|
|
.text-gray-400 {
|
|
color: $gray-400 !important;
|
|
}
|
|
.text-gray-500 {
|
|
color: $gray-500 !important;
|
|
}
|
|
.text-gray-600 {
|
|
color: $gray-600 !important;
|
|
}
|
|
.text-soft-primary {
|
|
color: lighten($primary, 35) !important;
|
|
}
|
|
.text-soft-success {
|
|
color: lighten($success, 35) !important;
|
|
}
|
|
.text-soft-danger {
|
|
color: lighten($danger, 35) !important;
|
|
}
|
|
.text-soft-info {
|
|
color: lighten($info, 35) !important;
|
|
}
|
|
.text-soft-warning {
|
|
color: lighten($warning, 35) !important;
|
|
}
|
|
.text-soft-teal {
|
|
color: lighten($teal, 35) !important;
|
|
}
|
|
.text-soft-indigo {
|
|
color: lighten($indigo, 35) !important;
|
|
}
|
|
.text-soft-dark {
|
|
color: lighten($dark, 35) !important;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Spacing !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.text-spacing-1 {
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.text-spacing-2 {
|
|
letter-spacing: 1px;
|
|
}
|
|
.text-spacing-3 {
|
|
letter-spacing: 1.5px;
|
|
}
|
|
.text-spacing-4 {
|
|
letter-spacing: 2px;
|
|
}
|
|
.text-spacing-5 {
|
|
letter-spacing: 2.5px;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Background Solid Color !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.bg-white {
|
|
background-color: $white !important;
|
|
}
|
|
.bg-primary {
|
|
background-color: $primary !important;
|
|
}
|
|
.bg-secondary {
|
|
background-color: $secondary !important;
|
|
}
|
|
.bg-success {
|
|
background-color: $success !important;
|
|
}
|
|
.bg-info {
|
|
background-color: $info !important;
|
|
}
|
|
.bg-danger {
|
|
background-color: $danger !important;
|
|
}
|
|
.bg-dark {
|
|
background-color: $dark !important;
|
|
}
|
|
.bg-warning {
|
|
background-color: $warning !important;
|
|
}
|
|
.bg-black {
|
|
background-color: $black !important;
|
|
}
|
|
.bg-muted {
|
|
background-color: $brand-muted !important;
|
|
}
|
|
.bg-light {
|
|
background-color: $light !important;
|
|
}
|
|
.bg-blue {
|
|
background-color: $blue !important;
|
|
}
|
|
.bg-teal {
|
|
background-color: $teal !important;
|
|
}
|
|
.bg-indigo {
|
|
background-color: $indigo !important;
|
|
}
|
|
.bg-cyan {
|
|
background-color: $cyan !important;
|
|
}
|
|
.bg-green {
|
|
background-color: $green !important;
|
|
}
|
|
.bg-red {
|
|
background-color: $red !important;
|
|
}
|
|
.bg-orange {
|
|
background-color: $orange !important;
|
|
}
|
|
.bg-darken {
|
|
background-color: $darken !important;
|
|
}
|
|
.bg-gray-100 {
|
|
background-color: $gray-100 !important;
|
|
}
|
|
.bg-gray-200 {
|
|
background-color: $gray-200 !important;
|
|
}
|
|
.bg-gray-300 {
|
|
background-color: $gray-300 !important;
|
|
}
|
|
.bg-gray-400 {
|
|
background-color: $gray-400 !important;
|
|
}
|
|
.bg-gray-500 {
|
|
background-color: $gray-500 !important;
|
|
}
|
|
.bg-gray-600 {
|
|
background-color: $gray-600 !important;
|
|
}
|
|
.bg-gray-700 {
|
|
background-color: $gray-700 !important;
|
|
}
|
|
.bg-gray-800 {
|
|
background-color: $gray-800 !important;
|
|
}
|
|
.bg-gray-900 {
|
|
background-color: $gray-900 !important;
|
|
}
|
|
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Background Soft Color !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.bg-soft-100 {
|
|
background-color: lighten($gray-100, 1) !important;
|
|
}
|
|
.bg-soft-200 {
|
|
background-color: lighten($gray-200, 2) !important;
|
|
}
|
|
.bg-soft-300 {
|
|
background-color: lighten($gray-300, 3) !important;
|
|
}
|
|
.bg-soft-400 {
|
|
background-color: lighten($gray-400, 4) !important;
|
|
}
|
|
.bg-soft-500 {
|
|
background-color: lighten($gray-500, 5) !important;
|
|
}
|
|
.bg-soft-primary {
|
|
background-color: lighten($primary, 44) !important;
|
|
}
|
|
.bg-soft-success {
|
|
background-color: lighten($success, 50) !important;
|
|
}
|
|
.bg-soft-danger {
|
|
background-color: lighten($danger, 35) !important;
|
|
}
|
|
.bg-soft-info {
|
|
background-color: lighten($info, 40) !important;
|
|
}
|
|
.bg-soft-warning {
|
|
background-color: lighten($warning, 35) !important;
|
|
}
|
|
.bg-soft-teal {
|
|
background-color: lighten($teal, 40) !important;
|
|
}
|
|
.bg-soft-indigo {
|
|
background-color: lighten($indigo, 45) !important;
|
|
}
|
|
.bg-soft-dark {
|
|
background-color: lighten($dark, 70) !important;
|
|
}
|
|
.bg-soft-darken {
|
|
background-color: lighten($darken, 80) !important;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Border Gray Color !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.border-gray-1 {
|
|
border-color: darken($gray-200, 1) !important;
|
|
}
|
|
.border-gray-2 {
|
|
border-color: darken($gray-200, 2) !important;
|
|
}
|
|
.border-gray-3 {
|
|
border-color: darken($gray-200, 3) !important;
|
|
}
|
|
.border-gray-4 {
|
|
border-color: darken($gray-200, 4) !important;
|
|
}
|
|
.border-gray-5 {
|
|
border-color: darken($gray-200, 5) !important;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Border Soft Color !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.border-soft-primary {
|
|
border-color: lighten($primary, 40) !important;
|
|
}
|
|
.border-soft-success {
|
|
border-color: lighten($success, 40) !important;
|
|
}
|
|
.border-soft-danger {
|
|
border-color: lighten($danger, 32) !important;
|
|
}
|
|
.border-soft-info {
|
|
border-color: lighten($info, 34) !important;
|
|
}
|
|
.border-soft-warning {
|
|
border-color: lighten($warning, 28) !important;
|
|
}
|
|
.border-soft-teal {
|
|
border-color: lighten($teal, 32) !important;
|
|
}
|
|
.border-soft-indigo {
|
|
border-color: lighten($indigo, 40) !important;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Border Style !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.border-dashed {
|
|
border-style: dashed !important;
|
|
}
|
|
.border-start-dashed {
|
|
border-left-style: dashed !important;
|
|
}
|
|
.border-end-dashed {
|
|
border-right-style: dashed !important;
|
|
}
|
|
.border-top-dashed {
|
|
border-top-style: dashed !important;
|
|
}
|
|
.border-bottom-dashed {
|
|
border-bottom-style: dashed !important;
|
|
}
|
|
.border-dotted {
|
|
border-style: dotted !important;
|
|
}
|
|
.border-start-dotted {
|
|
border-left-style: dotted !important;
|
|
}
|
|
.border-end-dotted {
|
|
border-right-style: dotted !important;
|
|
}
|
|
.border-top-dotted {
|
|
border-top-style: dotted !important;
|
|
}
|
|
.border-bottom-dotted {
|
|
border-bottom-style: dotted !important;
|
|
}
|
|
.border-double {
|
|
border-style: double !important;
|
|
}
|
|
.border-start-double {
|
|
border-left-style: double !important;
|
|
}
|
|
.border-end-double {
|
|
border-right-style: double !important;
|
|
}
|
|
.border-top-double {
|
|
border-top-style: double !important;
|
|
}
|
|
.border-bottom-double {
|
|
border-bottom-style: double !important;
|
|
}
|
|
.border-groove {
|
|
border-style: groove !important;
|
|
}
|
|
.border-start-groove {
|
|
border-left-style: groove !important;
|
|
}
|
|
.border-end-groove {
|
|
border-right-style: groove !important;
|
|
}
|
|
.border-top-groove {
|
|
border-top-style: groove !important;
|
|
}
|
|
.border-bottom-groove {
|
|
border-bottom-style: groove !important;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Border Color !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.border-primary {
|
|
border-color: $primary !important;
|
|
}
|
|
.border-secondary {
|
|
border-color: $secondary !important;
|
|
}
|
|
.border-success {
|
|
border-color: $success !important;
|
|
}
|
|
.border-danger {
|
|
border-color: $danger !important;
|
|
}
|
|
.border-warning {
|
|
border-color: $warning !important;
|
|
}
|
|
.border-teal {
|
|
border-color: $teal !important;
|
|
}
|
|
.border-info {
|
|
border-color: $info !important;
|
|
}
|
|
.border-indigo {
|
|
border-color: $indigo !important;
|
|
}
|
|
.border-dark {
|
|
border-color: $dark !important;
|
|
}
|
|
.border-black {
|
|
border-color: $black !important;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Width !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.wd-1 {
|
|
width: 1px;
|
|
max-width: 1px;
|
|
min-width: 1px;
|
|
}
|
|
.wd-2 {
|
|
width: 2px;
|
|
max-width: 2px;
|
|
min-width: 2px;
|
|
}
|
|
.wd-3 {
|
|
width: 3px;
|
|
max-width: 3px;
|
|
min-width: 3px;
|
|
}
|
|
.wd-4 {
|
|
width: 4px;
|
|
max-width: 4px;
|
|
min-width: 4px;
|
|
}
|
|
.wd-5 {
|
|
width: 5px;
|
|
max-width: 5px;
|
|
min-width: 5px;
|
|
}
|
|
.wd-6 {
|
|
width: 6px;
|
|
max-width: 6px;
|
|
min-width: 6px;
|
|
}
|
|
.wd-7 {
|
|
width: 7px;
|
|
max-width: 7px;
|
|
min-width: 7px;
|
|
}
|
|
.wd-8 {
|
|
width: 8px;
|
|
max-width: 8px;
|
|
min-width: 8px;
|
|
}
|
|
.wd-9 {
|
|
width: 9px;
|
|
max-width: 9px;
|
|
min-width: 9px;
|
|
}
|
|
.wd-10 {
|
|
width: 10px;
|
|
max-width: 10px;
|
|
min-width: 10px;
|
|
}
|
|
.wd-15 {
|
|
width: 15px;
|
|
max-width: 15px;
|
|
min-width: 15px;
|
|
}
|
|
.wd-20 {
|
|
width: 20px;
|
|
max-width: 20px;
|
|
min-width: 20px;
|
|
}
|
|
.wd-30 {
|
|
width: 30px;
|
|
max-width: 30px;
|
|
min-width: 30px;
|
|
}
|
|
.wd-40 {
|
|
width: 40px;
|
|
max-width: 40px;
|
|
min-width: 40px;
|
|
}
|
|
.wd-50 {
|
|
width: 50px;
|
|
max-width: 50px;
|
|
min-width: 50px;
|
|
}
|
|
.wd-60 {
|
|
width: 60px;
|
|
max-width: 60px;
|
|
min-width: 60px;
|
|
}
|
|
.wd-70 {
|
|
width: 70px;
|
|
max-width: 70px;
|
|
min-width: 70px;
|
|
}
|
|
.wd-80 {
|
|
width: 80px;
|
|
max-width: 80px;
|
|
min-width: 80px;
|
|
}
|
|
.wd-90 {
|
|
width: 90px;
|
|
max-width: 90px;
|
|
min-width: 90px;
|
|
}
|
|
.wd-100 {
|
|
width: 100px;
|
|
max-width: 100px;
|
|
min-width: 100px;
|
|
}
|
|
.wd-150 {
|
|
width: 150px;
|
|
max-width: 150px;
|
|
min-width: 150px;
|
|
}
|
|
.wd-200 {
|
|
width: 200px;
|
|
max-width: 200px;
|
|
min-width: 200px;
|
|
}
|
|
.wd-250 {
|
|
width: 250px;
|
|
max-width: 250px;
|
|
min-width: 250px;
|
|
}
|
|
.wd-300 {
|
|
width: 300px;
|
|
max-width: 300px;
|
|
min-width: 300px;
|
|
}
|
|
.wd-350 {
|
|
width: 350px;
|
|
max-width: 350px;
|
|
min-width: 350px;
|
|
}
|
|
.wd-400 {
|
|
width: 400px;
|
|
max-width: 400px;
|
|
min-width: 400px;
|
|
}
|
|
.wd-450 {
|
|
width: 450px;
|
|
max-width: 450px;
|
|
min-width: 450px;
|
|
}
|
|
.wd-500 {
|
|
width: 500px;
|
|
max-width: 500px;
|
|
min-width: 500px;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Height !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.ht-1 {
|
|
height: 1px;
|
|
max-height: 1px;
|
|
min-height: 1px;
|
|
}
|
|
.ht-2 {
|
|
height: 2px;
|
|
max-height: 2px;
|
|
min-height: 2px;
|
|
}
|
|
.ht-3 {
|
|
height: 3px;
|
|
max-height: 3px;
|
|
min-height: 3px;
|
|
}
|
|
.ht-4 {
|
|
height: 4px;
|
|
max-height: 4px;
|
|
min-height: 4px;
|
|
}
|
|
.ht-5 {
|
|
height: 5px;
|
|
max-height: 5px;
|
|
min-height: 5px;
|
|
}
|
|
.ht-5 {
|
|
height: 5px;
|
|
max-height: 5px;
|
|
min-height: 5px;
|
|
}
|
|
.ht-6 {
|
|
height: 6px;
|
|
max-height: 6px;
|
|
min-height: 6px;
|
|
}
|
|
.ht-7 {
|
|
height: 7px;
|
|
max-height: 7px;
|
|
min-height: 7px;
|
|
}
|
|
.ht-8 {
|
|
height: 8px;
|
|
max-height: 8px;
|
|
min-height: 8px;
|
|
}
|
|
.ht-9 {
|
|
height: 9px;
|
|
max-height: 9px;
|
|
min-height: 9px;
|
|
}
|
|
.ht-10 {
|
|
height: 10px;
|
|
max-height: 10px;
|
|
min-height: 10px;
|
|
}
|
|
.ht-15 {
|
|
height: 15px;
|
|
max-height: 15px;
|
|
min-height: 15px;
|
|
}
|
|
.ht-20 {
|
|
height: 20px;
|
|
max-height: 20px;
|
|
min-height: 20px;
|
|
}
|
|
.ht-30 {
|
|
height: 30px;
|
|
max-height: 30px;
|
|
min-height: 30px;
|
|
}
|
|
.ht-40 {
|
|
height: 40px;
|
|
max-height: 40px;
|
|
min-height: 40px;
|
|
}
|
|
.ht-50 {
|
|
height: 50px;
|
|
max-height: 50px;
|
|
min-height: 50px;
|
|
}
|
|
.ht-60 {
|
|
height: 60px;
|
|
max-height: 60px;
|
|
min-height: 60px;
|
|
}
|
|
.ht-70 {
|
|
height: 70px;
|
|
max-height: 70px;
|
|
min-height: 70px;
|
|
}
|
|
.ht-80 {
|
|
height: 80px;
|
|
max-height: 80px;
|
|
min-height: 80px;
|
|
}
|
|
.ht-90 {
|
|
height: 90px;
|
|
max-height: 90px;
|
|
min-height: 90px;
|
|
}
|
|
.ht-100 {
|
|
height: 100px;
|
|
max-height: 100px;
|
|
min-height: 100px;
|
|
}
|
|
.ht-150 {
|
|
height: 150px;
|
|
max-height: 150px;
|
|
min-height: 150px;
|
|
}
|
|
.ht-200 {
|
|
height: 200px;
|
|
max-height: 200px;
|
|
min-height: 200px;
|
|
}
|
|
.ht-250 {
|
|
height: 250px;
|
|
max-height: 250px;
|
|
min-height: 250px;
|
|
}
|
|
.ht-300 {
|
|
height: 300px;
|
|
max-height: 300px;
|
|
min-height: 300px;
|
|
}
|
|
.ht-350 {
|
|
height: 350px;
|
|
max-height: 350px;
|
|
min-height: 350px;
|
|
}
|
|
.ht-400 {
|
|
height: 400px;
|
|
max-height: 400px;
|
|
min-height: 400px;
|
|
}
|
|
.ht-450 {
|
|
height: 450px;
|
|
max-height: 450px;
|
|
min-height: 450px;
|
|
}
|
|
.ht-500 {
|
|
height: 500px;
|
|
max-height: 500px;
|
|
min-height: 500px;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Shadows !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.shadow-none {
|
|
box-shadow: $shadow-none;
|
|
}
|
|
.shadow-sm {
|
|
box-shadow: $shadow-sm;
|
|
}
|
|
.shadow-md {
|
|
box-shadow: $shadow-md;
|
|
}
|
|
.shadow-lg {
|
|
box-shadow: $shadow-lg;
|
|
}
|
|
.shadow-xl {
|
|
box-shadow: $shadow-xl;
|
|
}
|
|
.shadow-xxl {
|
|
box-shadow: $shadow-xxl;
|
|
}
|
|
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Stretch Height !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.stretch {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
&.stretch-full {
|
|
height: calc(100% - 24px);
|
|
}
|
|
&.stretch-onethird {
|
|
height: calc(75% - 24px);
|
|
}
|
|
&.stretch-half {
|
|
height: calc(50% - 24px);
|
|
}
|
|
&.stretch-quarter {
|
|
height: calc(25% - 24px);
|
|
}
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Miscellaneous !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
.tooltip {
|
|
font-size: $font-10;
|
|
font-family: inherit;
|
|
font-weight: $font-500;
|
|
text-transform: $font-uppercase;
|
|
.tooltip-inner {
|
|
padding: 5px 10px;
|
|
letter-spacing: 0.35px;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
.popover {
|
|
border-color: $border-color;
|
|
}
|
|
hr {
|
|
margin: 25px auto;
|
|
border-color: $gray-500;
|
|
}
|
|
.dropdown-dividar {
|
|
margin: 10px auto;
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
.text-truncate-1-line {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
@supports (-webkit-line-clamp: 1) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: initial;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
.text-truncate-2-line {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
@supports (-webkit-line-clamp: 2) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: initial;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
.text-truncate-3-line {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
@supports (-webkit-line-clamp: 3) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: initial;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
.text-truncate-4-line {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
@supports (-webkit-line-clamp: 4) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: initial;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
.text-truncate-5-line {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
@supports (-webkit-line-clamp: 5) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: initial;
|
|
display: -webkit-box !important;
|
|
-webkit-line-clamp: 5;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! FullScreen Switcher !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
body {
|
|
.full-screen-switcher {
|
|
a {
|
|
.maximize {
|
|
display: block;
|
|
}
|
|
.minimize {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.full-screen-helper {
|
|
.full-screen-switcher {
|
|
a {
|
|
.maximize {
|
|
display: none;
|
|
}
|
|
.minimize {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:not(:root):fullscreen::backdrop {
|
|
background: transparent;
|
|
}
|
|
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Scrollbar !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 15px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background-color: $white;
|
|
border-radius: 15px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: $gray-300;
|
|
border-radius: 15px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
&:hover {
|
|
background-color: $darken;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|