Add a pagination partial
This commit is contained in:
kbe
80
static/assets/css/scss/basic/_background.scss
Normal file
80
static/assets/css/scss/basic/_background.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
//
|
||||
// Background Styles //
|
||||
//
|
||||
.bg-image {
|
||||
position: relative;
|
||||
background-position: center center;
|
||||
background-attachment: scroll;
|
||||
@include background-size(cover);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bg-fade-white-top {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to top, white, get-color("white", 0.2));
|
||||
}
|
||||
}
|
||||
.bg-fade-white-bottom {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, white, get-color("white", 0.2));
|
||||
}
|
||||
}
|
||||
.bg-fade-black-top {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to top, black, rgba(0,0,0,0.2));
|
||||
}
|
||||
}
|
||||
.bg-fade-black-bottom {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to bottom, black, rgba(0,0,0,0.2));
|
||||
}
|
||||
}
|
||||
|
||||
.bg-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
video {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
655
static/assets/css/scss/basic/_base.scss
Normal file
655
static/assets/css/scss/basic/_base.scss
Normal file
@@ -0,0 +1,655 @@
|
||||
//
|
||||
// Base Styles //
|
||||
//
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
//
|
||||
// Container, Row //
|
||||
//
|
||||
.container, .container-fluid {
|
||||
position: relative;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
//
|
||||
// Positioning //
|
||||
//
|
||||
.position-middle {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
margin: 0 auto;
|
||||
}
|
||||
.position-top, .position-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.position-top {
|
||||
top: 30px;
|
||||
}
|
||||
.position-bottom {
|
||||
bottom: 30px;
|
||||
}
|
||||
.container, .container-fluid {
|
||||
.position-top, .position-bottom {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Mark //
|
||||
//
|
||||
mark {
|
||||
background: $bg-gray;
|
||||
color: get-color("dark");
|
||||
}
|
||||
|
||||
//
|
||||
// iframe //
|
||||
//
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Pre(Preformatted text) //
|
||||
//
|
||||
pre {
|
||||
border: 1px solid get-color("dark", 0.1);
|
||||
border-radius: 0.375em;
|
||||
padding: 6px 20px;
|
||||
color: $color-primary;
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
pre {
|
||||
border-color: get-color("white", 0.2);
|
||||
color: get-color("white", 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Blockquote Styles //
|
||||
//
|
||||
.blockquote {
|
||||
background: transparent;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid get-color("dark", 0.1);
|
||||
padding: 16px 30px;
|
||||
@include breakpoint-less(sm) {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
&.font-small {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
}
|
||||
&.font-large {
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.blockquote-footer {
|
||||
margin-top: 10px;
|
||||
color: get-color("dark");
|
||||
&:before {
|
||||
padding-right: 5px;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 20px 20px 20px 40px;
|
||||
@include breakpoint-less(sm) {
|
||||
padding: 16px 16px 16px 36px;
|
||||
}
|
||||
&:before {
|
||||
content: '\f10d';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: get-color("dark", 0.1);
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.blockquote {
|
||||
background: get-color("white", 0.1);
|
||||
border-color: get-color("white", 0.2);
|
||||
.blockquote-footer {
|
||||
color: white;
|
||||
}
|
||||
&.style-2 {
|
||||
background: transparent;
|
||||
border-color: get-color("white", 0.2);
|
||||
}
|
||||
&.style-3 {
|
||||
background: transparent;
|
||||
&:before {
|
||||
color: get-color("white", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Breadcrumb Styles //
|
||||
//
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
margin: 0 0 -10px;
|
||||
padding: 0;
|
||||
.breadcrumb-item {
|
||||
display: inline-block;
|
||||
font: 400 13px $font-family-primary;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
&:before {
|
||||
color: get-color("dark", 0.2);
|
||||
}
|
||||
&.active {
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
a {
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.breadcrumb {
|
||||
.breadcrumb-item {
|
||||
&:before {
|
||||
color: get-color("white", 0.3);
|
||||
}
|
||||
&.active {
|
||||
color: get-color("white", 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Card //
|
||||
//
|
||||
.card {
|
||||
border: 1px solid get-color("dark", 0.1);
|
||||
}
|
||||
|
||||
//
|
||||
// Dropdown Styles //
|
||||
//
|
||||
.dropdown, .btn-group {
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@include box-shadow(0 6px 36px -4px rgba(22,24,26,0.14));
|
||||
padding: 15px 20px;
|
||||
.dropdown-item {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: get-color("dark");
|
||||
font: 300 15px $font-family-primary;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
@include transition(linear 0.1s);
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
&:hover, &:focus, &:active {
|
||||
background: transparent;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Modal Styles //
|
||||
//
|
||||
.modal {
|
||||
&.fade {
|
||||
.modal-dialog {
|
||||
@include transition(ease-out 0.2s);
|
||||
@include transform(translate(0) scale(0.98));
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
@include transform(translate(0) scale(1.0));
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
@include box-shadow(0 6px 36px -4px rgba(22,24,26,0.3));
|
||||
border: 0;
|
||||
.modal-header { border-bottom: 1px solid get-color("dark", 0.1); }
|
||||
.modal-footer { border-top: 1px solid get-color("dark", 0.1); }
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Nav Styles //
|
||||
//
|
||||
.nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.nav-item {
|
||||
margin: 0 30px 0 0;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
color: $color-primary;
|
||||
@include transition(linear 0.1s);
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
color: $color-primary;
|
||||
@include transition(linear 0.1s);
|
||||
}
|
||||
&.active, &:hover {
|
||||
color: get-color("dark");
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: get-color("dark");
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs {
|
||||
border-bottom: 1px solid $border-gray;
|
||||
.nav-item {
|
||||
margin: 0 0 -1px;
|
||||
.nav-link {
|
||||
background: transparent;
|
||||
padding: 10px 20px;
|
||||
color: $color-primary;
|
||||
&:hover {
|
||||
border-color: $border-gray;
|
||||
}
|
||||
&.active {
|
||||
border-color: $border-gray $border-gray white;
|
||||
color: get-color("dark");
|
||||
}
|
||||
&.disabled {
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills {
|
||||
.nav-item {
|
||||
margin: 0;
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.nav-link.active,
|
||||
.show .nav-link {
|
||||
background: get-color("dark");
|
||||
color: white;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tabs {
|
||||
display: inline-block;
|
||||
border: 1px solid $border-gray;
|
||||
border-radius: 0.375em;
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
border-right: 1px solid $border-gray;
|
||||
}
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-custom {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
background: get-color("dark");
|
||||
height: 1px;
|
||||
@include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||
}
|
||||
&.active {
|
||||
&:after {
|
||||
width: 100%;
|
||||
@include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: get-color("white", 0.8);
|
||||
&.active, &:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs {
|
||||
border-color: get-color("white", 0.2);
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: get-color("white", 0.8);
|
||||
&.active, &:hover {
|
||||
border-color: get-color("white", 0.2) get-color("white", 0.2) transparent;
|
||||
}
|
||||
&.active {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills {
|
||||
.nav-item {
|
||||
.nav-link.active,
|
||||
.show .nav-link {
|
||||
background: white;
|
||||
color: get-color("dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tabs {
|
||||
border: 1px solid get-color("white", 0.2);
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
border-right: 1px solid get-color("white", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-custom {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&:after { background: white; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Pagination Styles //
|
||||
//
|
||||
.pagination {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.page-item {
|
||||
margin: 0 6px 0 0;
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.page-link {
|
||||
background: transparent;
|
||||
min-width: 31px;
|
||||
height: 31px;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
color: $color-primary;
|
||||
font-size: 14px;
|
||||
line-height: 31px;
|
||||
@include transition(ease-out 0.12s);
|
||||
&:hover {
|
||||
background: $button-gray;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: $button-gray;
|
||||
color: get-color("dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-sm {
|
||||
.page-item {
|
||||
.page-link {
|
||||
min-width: 27px;
|
||||
height: 27px;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-lg {
|
||||
.page-item {
|
||||
.page-link {
|
||||
min-width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Pagination - Hover style 2 //
|
||||
//
|
||||
&.hover-style-2 {
|
||||
.page-item {
|
||||
.page-link {
|
||||
&:hover {
|
||||
background: $border-gray;
|
||||
border-color: $border-gray;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: get-color("dark");
|
||||
border-color: get-color("dark");
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
.pagination {
|
||||
.page-item {
|
||||
.page-link {
|
||||
color: get-color("white", 0.7);
|
||||
&:hover {
|
||||
background: get-color("white", 0.1);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: get-color("white", 0.1);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.hover-style-2 {
|
||||
.page-item {
|
||||
.page-link {
|
||||
&:hover {
|
||||
background: white;
|
||||
border-color: white;
|
||||
color: get-color("dark", 0.9);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.page-link {
|
||||
background: white;
|
||||
border-color: white;
|
||||
color: get-color("dark", 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Popover Styles //
|
||||
//
|
||||
.popover {
|
||||
border: 0;
|
||||
@include box-shadow(0 0 12px 0 rgba(0,0,0,0.08));
|
||||
.arrow {
|
||||
&:before { border: 0; }
|
||||
}
|
||||
.popover-header {
|
||||
background: transparent;
|
||||
padding: 15px 20px;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.popover-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Table Styles //
|
||||
//
|
||||
.table {
|
||||
td, th { border-top: 1px solid $border-gray; }
|
||||
thead {
|
||||
th { border-bottom: 2px solid $border-gray; }
|
||||
}
|
||||
|
||||
&.table-dark {
|
||||
background: $bg-dark-lighter;
|
||||
thead {
|
||||
th { border-bottom: 2px solid get-color("white", 0.1); }
|
||||
}
|
||||
td, th { border-top: 1px solid get-color("white", 0.1); }
|
||||
}
|
||||
&.table-bordered {
|
||||
td, th { border: 1px solid $border-gray; }
|
||||
&.table-dark {
|
||||
td, th { border: 1px solid get-color("white", 0.1); }
|
||||
}
|
||||
}
|
||||
|
||||
.thead-dark {
|
||||
th { background: $bg-dark-lighter; border-color: get-color("white", 0.1); }
|
||||
}
|
||||
.thead-light {
|
||||
th { background: $button-gray-lighter; }
|
||||
}
|
||||
|
||||
.table-active {
|
||||
td, th { background: $button-gray-darker; }
|
||||
}
|
||||
.table-secondary {
|
||||
td, th { background: $button-gray; }
|
||||
}
|
||||
.table-light {
|
||||
td, th { background: $bg-gray-lighter; }
|
||||
}
|
||||
.table-dark {
|
||||
td, th { background: $button-gray; }
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Scroll To Top button //
|
||||
//
|
||||
.scrolltotop {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
@include transform(translateY(20px));
|
||||
z-index: 992;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
@include transition(ease-out 0.12s);
|
||||
&.scrolltotop-show {
|
||||
@include transform(translateY(0));
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Cursor //
|
||||
//
|
||||
@include breakpoint-above(lg) {
|
||||
#cursor {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
@include transform(translate(-50%, -50%));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
mix-blend-mode: difference;
|
||||
pointer-events: none;
|
||||
@include transition(linear 0.06s);
|
||||
&.scale-cursor {
|
||||
@include transform(translate(-50%, -50%) scale(2.4));
|
||||
opacity: 0.12;
|
||||
}
|
||||
&.cursor-style-2 {
|
||||
opacity: 0.2;
|
||||
background: white;
|
||||
border: 0;
|
||||
&.scale-cursor {
|
||||
opacity: 0.08;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
215
static/assets/css/scss/basic/_form.scss
Normal file
215
static/assets/css/scss/basic/_form.scss
Normal file
@@ -0,0 +1,215 @@
|
||||
//
|
||||
// Form Styles //
|
||||
//
|
||||
input:not(.form-check-input),
|
||||
textarea {
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
border: 1px solid get-color("dark", 0.1);
|
||||
margin-bottom: 1rem;
|
||||
padding: 15px 20px;
|
||||
box-shadow: none;
|
||||
font: 400 15px $font-family-primary;
|
||||
line-height: 1.4;
|
||||
@include transition(ease-out 0.16s);
|
||||
&:focus, &:active {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
height: 140px;
|
||||
}
|
||||
input:not(.form-check-input), textarea, .form-control {
|
||||
color: $color-primary;
|
||||
&::-webkit-input-placeholder { color: $color-primary-lighter; }
|
||||
&::-moz-placeholder { color: $color-primary-lighter; }
|
||||
&:-ms-placeholder { color: $color-primary-lighter; }
|
||||
&::-ms-placeholder { color: $color-primary-lighter; }
|
||||
&::placeholder { color: $color-primary-lighter; }
|
||||
&:focus {
|
||||
border-color: get-color("dark", 0.2);
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
background: transparent;
|
||||
height: auto;
|
||||
border: 1px solid get-color("dark", 0.1);
|
||||
border-radius: 0;
|
||||
padding: 15px 20px;
|
||||
font: 400 15px $font-family-primary;
|
||||
line-height: 1.4;
|
||||
&:focus {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:read-only {
|
||||
background: $button-gray;
|
||||
border: 0;
|
||||
}
|
||||
&.form-control-sm {
|
||||
padding: 10px 15px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
&.form-control-lg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.form-control-plaintext {
|
||||
border: 0;
|
||||
}
|
||||
.form-check-input:disabled ~ .form-check-label {
|
||||
color: $color-primary-lighter;
|
||||
}
|
||||
.required {
|
||||
&:after {
|
||||
content: '*';
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Select //
|
||||
//
|
||||
select {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.custom-select {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
min-width: 160px;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
padding: 15px 20px;
|
||||
border-color: get-color("dark", 0.1);
|
||||
color: $color-primary;
|
||||
font: 400 15px $font-family-primary;
|
||||
line-height: 1.4;
|
||||
@include transition(ease-out 0.16s);
|
||||
&:focus {
|
||||
border-color: get-color("dark", 0.2);
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.custom-select-sm {
|
||||
height: auto;
|
||||
padding: 10px 15px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
&.custom-select-lg {
|
||||
height: auto;
|
||||
padding: 15px 20px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
&.select-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
//
|
||||
// Form Styles 2,3,4 //
|
||||
//
|
||||
.form-style-3,
|
||||
.form-style-4 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 0 10px;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
.form-style-2,
|
||||
.form-style-4 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
&:focus {
|
||||
border-color: get-color("dark", 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Form Style 5 //
|
||||
//
|
||||
.form-style-5 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
background: $bg-gray;
|
||||
border: 0;
|
||||
&:focus {
|
||||
background: $button-gray-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
[class*='bg-gray'] {
|
||||
.form-style-5 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
background: white;
|
||||
&:focus {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Forms on Dark background //
|
||||
//
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
input, textarea, .form-control {
|
||||
background: transparent;
|
||||
border-color: get-color("white", 0.2);
|
||||
color: get-color("white", 0.7);
|
||||
&::-webkit-input-placeholder { color: get-color("white", 0.5); }
|
||||
&::-moz-placeholder { color: get-color("white", 0.5); }
|
||||
&:-ms-placeholder { color: get-color("white", 0.5); }
|
||||
&::-ms-placeholder { color: get-color("white", 0.5); }
|
||||
&::placeholder { color: get-color("white", 0.5); }
|
||||
&:focus {
|
||||
border-color: get-color("white", 0.3);
|
||||
}
|
||||
}
|
||||
.custom-select {
|
||||
background: transparent;
|
||||
border-color: get-color("white", 0.2);
|
||||
color: get-color("white", 0.7);
|
||||
&:focus {
|
||||
border-color: get-color("white", 0.3);
|
||||
}
|
||||
}
|
||||
.form-style-2,
|
||||
.form-style-4 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
&:focus {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-style-5 {
|
||||
input, textarea, .custom-select, .form-control {
|
||||
background: get-color("white", 0.1);
|
||||
border: 0;
|
||||
&:focus {
|
||||
background: get-color("white", 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Contact Form Styles //
|
||||
//
|
||||
.submit-result {
|
||||
span {
|
||||
display: none;
|
||||
@include transition(ease-out 0.2s);
|
||||
&.show-result {
|
||||
margin-top: 30px;
|
||||
display: block;
|
||||
}
|
||||
&#success { color: $color-green; }
|
||||
&#error { color: $color-red; }
|
||||
}
|
||||
}
|
||||
125
static/assets/css/scss/basic/_image.scss
Normal file
125
static/assets/css/scss/basic/_image.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
//
|
||||
// Image Styles //
|
||||
//
|
||||
img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
//
|
||||
// Avatar mask //
|
||||
//
|
||||
&[class*='img-mask-avatar'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.img-mask-avatar-xs {
|
||||
min-width: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
&.img-mask-avatar-sm {
|
||||
min-width: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
&.img-mask-avatar-md {
|
||||
min-width: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
&.img-mask-avatar-lg {
|
||||
min-width: 120px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
&.img-mask-avatar-xl {
|
||||
min-width: 140px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
&.img-mask-avatar-2xl {
|
||||
min-width: 160px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
&.img-mask-avatar-3xl {
|
||||
min-width: 180px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Blob Shape Mask //
|
||||
//
|
||||
[class*='img-mask-blob'] {
|
||||
display: inline-block;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
.img-mask-blob-1 {
|
||||
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODguNSw2My41UTg3LDc3LDc2LDg2LjVRNjUsOTYsNTEsOTIuNVEzNyw4OSwyNyw4MS41UTE3LDc0LDEyLDYyUTcsNTAsMTEuNSwzOFExNiwyNiwyNS41LDE0LjVRMzUsMyw0OSw2LjVRNjMsMTAsNzUuNSwxNlE4OCwyMiw4OSwzNlE5MCw1MCw4OC41LDYzLjVaIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
|
||||
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODguNSw2My41UTg3LDc3LDc2LDg2LjVRNjUsOTYsNTEsOTIuNVEzNyw4OSwyNyw4MS41UTE3LDc0LDEyLDYyUTcsNTAsMTEuNSwzOFExNiwyNiwyNS41LDE0LjVRMzUsMyw0OSw2LjVRNjMsMTAsNzUuNSwxNlE4OCwyMiw4OSwzNlE5MCw1MCw4OC41LDYzLjVaIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
|
||||
}
|
||||
|
||||
.img-mask-blob-2 {
|
||||
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjZRODgsODIsNzMsODkuNVE1OCw5Nyw0My41LDkxLjVRMjksODYsMTgsNzZRNyw2Niw3LDUwUTcsMzQsMTgsMjMuNVEyOSwxMyw0My41LDlRNTgsNSw3MC41LDEzLjVRODMsMjIsODguNSwzNlE5NCw1MCw5MSw2NloiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
|
||||
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjZRODgsODIsNzMsODkuNVE1OCw5Nyw0My41LDkxLjVRMjksODYsMTgsNzZRNyw2Niw3LDUwUTcsMzQsMTgsMjMuNVEyOSwxMyw0My41LDlRNTgsNSw3MC41LDEzLjVRODMsMjIsODguNSwzNlE5NCw1MCw5MSw2NloiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
|
||||
}
|
||||
.img-mask-blob-3 {
|
||||
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjRRODgsNzgsNzUuNSw4NC41UTYzLDkxLDUwLDkxLjVRMzcsOTIsMjYsODMuNVExNSw3NSwxMS41LDYyLjVROCw1MCw5LDM1LjVRMTAsMjEsMjMuNSwxNlEzNywxMSw1MSw3UTY1LDMsNzcsMTIuNVE4OSwyMiw5MS41LDM2UTk0LDUwLDkxLDY0WiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjRRODgsNzgsNzUuNSw4NC41UTYzLDkxLDUwLDkxLjVRMzcsOTIsMjYsODMuNVExNSw3NSwxMS41LDYyLjVROCw1MCw5LDM1LjVRMTAsMjEsMjMuNSwxNlEzNywxMSw1MSw3UTY1LDMsNzcsMTIuNVE4OSwyMiw5MS41LDM2UTk0LDUwLDkxLDY0WiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||
}
|
||||
.img-mask-blob-4 {
|
||||
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODkuNSw2M1E4MSw3Niw2OS41LDg2UTU4LDk2LDQ0LDkwLjVRMzAsODUsMTYuNSw3NlEzLDY3LDUuNSw1MVE4LDM1LDE3LDIyUTI2LDksNDEuNSw4LjVRNTcsOCw3MSwxNC41UTg1LDIxLDkxLjUsMzUuNVE5OCw1MCw4OS41LDYzWiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODkuNSw2M1E4MSw3Niw2OS41LDg2UTU4LDk2LDQ0LDkwLjVRMzAsODUsMTYuNSw3NlEzLDY3LDUuNSw1MVE4LDM1LDE3LDIyUTI2LDksNDEuNSw4LjVRNTcsOCw3MSwxNC41UTg1LDIxLDkxLjUsMzUuNVE5OCw1MCw4OS41LDYzWiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
//
|
||||
// Image Link box //
|
||||
//
|
||||
.img-link-box {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@include transform(translate3d(0,0,0));
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||
}
|
||||
&:hover, &:focus {
|
||||
img {
|
||||
@include transform(scale(1.04));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Avatars Group //
|
||||
//
|
||||
.avatar-group {
|
||||
display: block;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
margin-left: -12px;
|
||||
padding: 0;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
@include box-shadow(0 3px 16px 0 rgba(0,0,0,0.13));
|
||||
border: 3px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aspect-ratio-2x1 {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/0.5;
|
||||
object-fit: cover;
|
||||
}
|
||||
263
static/assets/css/scss/basic/_list.scss
Normal file
263
static/assets/css/scss/basic/_list.scss
Normal file
@@ -0,0 +1,263 @@
|
||||
//
|
||||
// List styles //
|
||||
//
|
||||
ul {
|
||||
margin: 0 0 -7px;
|
||||
li {
|
||||
margin: 0 0 7px;
|
||||
ul, ol {
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
&[class*='list-'] {
|
||||
padding: 0;
|
||||
}
|
||||
&.list-unstyled,
|
||||
&.list-dash {
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
&.animate-links {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.list-dash {
|
||||
li {
|
||||
&:before {
|
||||
content: '-';
|
||||
padding-right: 7px;
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Horizontal List //
|
||||
//
|
||||
&[class*='list-inline'] {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.list-inline {
|
||||
margin-right: -7px;
|
||||
margin-left: -7px;
|
||||
li {
|
||||
padding: 0 7px;
|
||||
}
|
||||
}
|
||||
&.list-inline-sm {
|
||||
margin-right: -3px;
|
||||
margin-left: -3px;
|
||||
li {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
&.list-inline-lg {
|
||||
margin-right: -14px;
|
||||
margin-left: -14px;
|
||||
li {
|
||||
padding: 0 14px;
|
||||
}
|
||||
}
|
||||
&.list-inline-dash {
|
||||
li { &:after { content: '-'; } }
|
||||
}
|
||||
&.list-inline-slash {
|
||||
li { &:after { content: '/'; } }
|
||||
}
|
||||
&.list-inline-dash,
|
||||
&.list-inline-slash {
|
||||
li {
|
||||
&:after {
|
||||
padding: 0 3px 0 6px;
|
||||
}
|
||||
&:last-child {
|
||||
&:after {
|
||||
content: '';
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ol {
|
||||
margin: 0 0 -7px;
|
||||
li {
|
||||
margin: 0 0 7px;
|
||||
}
|
||||
li {
|
||||
ul, ol {
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
&.list-ordered {
|
||||
list-style: none;
|
||||
counter-reset: custom-counter;
|
||||
padding-left: 0;
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 34px;
|
||||
counter-increment: custom-counter;
|
||||
&::before {
|
||||
content: counter(custom-counter);
|
||||
}
|
||||
ol {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.style-2,
|
||||
&.style-3,
|
||||
&.style-4,
|
||||
&.style-5 {
|
||||
li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
li {
|
||||
&::before {
|
||||
background: get-color("dark", 0.1);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
li {
|
||||
&::before {
|
||||
background: get-color("dark", 0.9);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
li {
|
||||
&::before {
|
||||
border: 1px solid get-color("dark", 0.2);
|
||||
color: get-color("dark", 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-5 {
|
||||
li {
|
||||
&::before {
|
||||
border: 1px solid get-color("dark", 0.9);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-black,
|
||||
[class*='bg-dark'],
|
||||
[class*='bg-gradient-'],
|
||||
[class*='bg-color-'] {
|
||||
ol {
|
||||
&.list-ordered {
|
||||
&.style-2 {
|
||||
li {
|
||||
&::before {
|
||||
background: get-color("white", 0.2);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-3 {
|
||||
li {
|
||||
&::before {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-4 {
|
||||
li {
|
||||
&::before {
|
||||
border-color: get-color("white", 0.3);
|
||||
color: get-color("white", 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-5 {
|
||||
li {
|
||||
&::before {
|
||||
border-color: white;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint-less(md) {
|
||||
ol {
|
||||
margin: 0 0 -5px;
|
||||
li {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 0 0 -5px;
|
||||
li {
|
||||
margin: 0 0 5px;
|
||||
ul, ol {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
&.list-dash {
|
||||
li {
|
||||
&:before {
|
||||
content: '-';
|
||||
padding-right: 6px;
|
||||
}
|
||||
a {
|
||||
&:hover {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.list-inline-lg {
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
li {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
&.list-inline {
|
||||
margin-right: -6px;
|
||||
margin-left: -6px;
|
||||
li {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
&.list-inline-sm {
|
||||
margin-right: -2px;
|
||||
margin-left: -2px;
|
||||
li {
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
108
static/assets/css/scss/basic/_typography.scss
Normal file
108
static/assets/css/scss/basic/_typography.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
//
|
||||
// Typography Styles //
|
||||
//
|
||||
body {
|
||||
color: $color-primary;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
@include breakpoint-less(md) {
|
||||
font-size: 0.938rem;
|
||||
}
|
||||
&.theme-font-nunito {
|
||||
font-family: $font-family-nunito;
|
||||
}
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
letter-spacing: -0.3px;
|
||||
line-height: 1.4;
|
||||
color: get-color("dark");
|
||||
font-family: $font-family-poppins;
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
.theme-font-nunito {
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: $font-family-nunito;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.74; /* 26px */
|
||||
@include breakpoint-less(md) {
|
||||
line-height: 1.6; /* 24px */
|
||||
}
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.font-small {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.7;
|
||||
@include breakpoint-less(md) {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
}
|
||||
.font-large {
|
||||
font-size: 1.063em;
|
||||
line-height: 1.6;
|
||||
@include breakpoint-less(md) {
|
||||
font-size: 1.063em;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Letter Spacing //
|
||||
//
|
||||
.letter-spacing-1 { letter-spacing: 1px; }
|
||||
.letter-spacing-2 { letter-spacing: 2px; }
|
||||
.letter-spacing-3 { letter-spacing: 3px; }
|
||||
.letter-spacing-4 { letter-spacing: 4px; }
|
||||
|
||||
//
|
||||
// Line Heights //
|
||||
//
|
||||
.line-height-100 { line-height: 100%; }
|
||||
.line-height-110 { line-height: 110%; }
|
||||
.line-height-120 { line-height: 120%; }
|
||||
.line-height-130 { line-height: 130%; }
|
||||
.line-height-140 { line-height: 140%; }
|
||||
.line-height-150 { line-height: 150%; }
|
||||
.line-height-160 { line-height: 160%; }
|
||||
|
||||
//
|
||||
// Font Icon Styles //
|
||||
//
|
||||
i {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
//
|
||||
// Icon sizes //
|
||||
//
|
||||
.icon-5xl {
|
||||
i { font-size: 2.8em; }
|
||||
}
|
||||
.icon-4xl {
|
||||
i { font-size: 2.4em; }
|
||||
}
|
||||
.icon-3xl {
|
||||
i { font-size: 2.13em; }
|
||||
}
|
||||
.icon-2xl {
|
||||
i { font-size: 1.86em; }
|
||||
}
|
||||
.icon-xl {
|
||||
i { font-size: 1.6em; }
|
||||
}
|
||||
.icon-lg {
|
||||
i { font-size: 1.33em; }
|
||||
}
|
||||
.icon-sm {
|
||||
i { font-size: 0.9em; }
|
||||
}
|
||||
Reference in New Issue
Block a user