İlk temizlik tamamlandı bir önceki projeden
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// Badge
|
||||
// --------------------------------------------------
|
||||
|
||||
.badge-secondary {
|
||||
@include badge-variant(rgba(0,0,0,.33));
|
||||
}
|
||||
@@ -0,0 +1,463 @@
|
||||
//
|
||||
// Blocks
|
||||
// --------------------------------------------------
|
||||
|
||||
.block {
|
||||
margin-bottom: $space-base;
|
||||
background-color: $white;
|
||||
box-shadow: 0 1px 1px $body-bg-dark;
|
||||
|
||||
& &,
|
||||
.content-side & {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.block-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px $space-block;
|
||||
transition: opacity .2s ease-out;
|
||||
|
||||
&.block-header-rtl {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.block-title {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.block-options {
|
||||
padding-right: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-default {
|
||||
background-color: $body-bg-light;
|
||||
}
|
||||
}
|
||||
|
||||
.block-title {
|
||||
flex: 1 1 auto;
|
||||
min-height: 28px;
|
||||
margin: 0;
|
||||
font-size: $font-size-md;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
|
||||
small {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: $headings-small-color;
|
||||
}
|
||||
}
|
||||
|
||||
.block-content {
|
||||
transition: opacity .2s ease-out;
|
||||
@include content-layout($space-block, $space-block);
|
||||
|
||||
&.block-content-sm {
|
||||
padding-top: ($space-block / 2);
|
||||
|
||||
.pull-t,
|
||||
.pull-t-b,
|
||||
.pull-all {
|
||||
margin-top: -($space-block / 2);
|
||||
}
|
||||
|
||||
&.block-content-full {
|
||||
padding-bottom: ($space-block / 2);
|
||||
|
||||
.pull-b,
|
||||
.pull-t-b,
|
||||
.pull-all {
|
||||
margin-bottom: -($space-block / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-table {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
.block-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.block-cell {
|
||||
display: table-cell;
|
||||
padding: $space-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Block Variations
|
||||
.block {
|
||||
&.block-bordered {
|
||||
border: 1px solid $body-bg-dark;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.block-rounded {
|
||||
border-radius: 4px;
|
||||
|
||||
> .block-header {
|
||||
@include border-top-radius(3px);
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius(3px);
|
||||
}
|
||||
}
|
||||
|
||||
> .block-content {
|
||||
&:first-child {
|
||||
@include border-top-radius(3px);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.block-themed > .block-header {
|
||||
border-bottom: none;
|
||||
color: $white;
|
||||
background-color: $brand-primary;
|
||||
|
||||
> .block-title {
|
||||
color: rgba($white, .9);
|
||||
|
||||
small {
|
||||
color: rgba($white, .7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.block-transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.block-shadow {
|
||||
box-shadow: 0 15px 30px rgba($gray-900, .05);
|
||||
}
|
||||
}
|
||||
|
||||
// Block Modes
|
||||
.block {
|
||||
&.block-mode-hidden {
|
||||
&.block-bordered > .block-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> .block-content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.block-mode-loading {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> .block-header,
|
||||
> .block-content,
|
||||
> .nav-tabs {
|
||||
opacity: .05;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -25px 0 0 -25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: $brand-dark;
|
||||
font-family: Simple-Line-Icons;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
content: '\e09a';
|
||||
animation: fa-spin 1.75s infinite linear;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 0 15px 15px rgba($brand-dark,.05);
|
||||
}
|
||||
|
||||
&.block-mode-hidden::after {
|
||||
margin: -15px 0 0 -15px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
box-shadow: 0 0 8px 8px rgba($brand-dark,.05);
|
||||
}
|
||||
|
||||
&.block-mode-loading-inverse::after {
|
||||
background-color: $brand-dark;
|
||||
color: $white;
|
||||
box-shadow: 0 0 15px 15px rgba($white,.5);
|
||||
}
|
||||
|
||||
&.block-mode-loading-location::after {
|
||||
content: '\e06e';
|
||||
}
|
||||
|
||||
&.block-mode-loading-energy::after {
|
||||
content: '\e020';
|
||||
}
|
||||
|
||||
&.block-mode-loading-refresh::after {
|
||||
font-family: $font-family-fontawesome;
|
||||
font-weight: 900;
|
||||
content: '\f021';
|
||||
}
|
||||
|
||||
&.block-mode-loading-sun::after {
|
||||
font-family: $font-family-fontawesome;
|
||||
content: '\f185';
|
||||
}
|
||||
|
||||
&.block-mode-loading-repeat::after {
|
||||
font-family: $font-family-fontawesome;
|
||||
font-weight: 900;
|
||||
content: '\f01e';
|
||||
}
|
||||
}
|
||||
|
||||
&.block-mode-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-block-fullscreen;
|
||||
margin-bottom: 0;
|
||||
overflow-y: auto;
|
||||
backface-visibility: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.block-bordered {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.block-rounded {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.block-transparent {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.block-mode-pinned {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
margin-bottom: 0 !important;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
z-index: $zindex-block-pinned;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,.1);
|
||||
|
||||
> .block-content {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Block Links
|
||||
a.block {
|
||||
display: block;
|
||||
color: $body-color;
|
||||
font-weight: normal;
|
||||
transition: all .12s ease-out;
|
||||
|
||||
@include hover {
|
||||
color: $body-color;
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.block-link-rotate {
|
||||
&:hover {
|
||||
transform: rotate(1deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.block-link-pop {
|
||||
&:hover {
|
||||
box-shadow: 0 2px 30px darken($body-bg, 8%);
|
||||
transform: translateY(-3px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 2px 10px darken($body-bg, 1%);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.block-link-shadow {
|
||||
&:hover {
|
||||
box-shadow: 0 0 36px darken($body-bg, 8%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 10px darken($body-bg, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Block Effects
|
||||
.block {
|
||||
&.block-fx-rotate {
|
||||
transform: rotate(1deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.block-fx-pop {
|
||||
box-shadow: 0 2px 30px darken($body-bg, 8%);
|
||||
transform: translateY(-3px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.block-fx-shadow {
|
||||
box-shadow: 0 0 36px darken($body-bg, 8%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Block Options
|
||||
.block-options {
|
||||
flex: 0 0 auto;
|
||||
padding-left: 10px;
|
||||
min-height: 28px;
|
||||
|
||||
.block-options-item {
|
||||
padding: 6px 5px;
|
||||
line-height: 1.2;
|
||||
|
||||
.block.block-themed > .block-header & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.block-options-item,
|
||||
.dropdown,
|
||||
.dropup,
|
||||
.dropright,
|
||||
.dropleft {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.block-sticky-options {
|
||||
position: relative;
|
||||
|
||||
.block-options {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: $space-block;
|
||||
|
||||
&.block-options-left {
|
||||
right: auto;
|
||||
left: $space-block;
|
||||
padding-right: 10px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-block-option {
|
||||
display: inline-block;
|
||||
padding: 6px 5px;
|
||||
line-height: 1.2;
|
||||
color: $gray-dark;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
.si {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
text-decoration: none;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
@at-root {
|
||||
a#{&}:focus,
|
||||
.active > a#{&},
|
||||
.show > button#{&} {
|
||||
text-decoration: none;
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
@at-root {
|
||||
a#{&}:focus,
|
||||
.active > a#{&},
|
||||
.show > button#{&} {
|
||||
text-decoration: none;
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block.block-themed > .block-header > .block-options,
|
||||
.block.block-themed > .block-content > .block-options {
|
||||
.btn-block-option {
|
||||
color: $white;
|
||||
opacity: .7;
|
||||
|
||||
@include hover {
|
||||
color: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $white;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn-block-option:focus,
|
||||
.active > a.btn-block-option,
|
||||
.show > button.btn-block-option {
|
||||
color: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// Breadcrumb
|
||||
// --------------------------------------------------
|
||||
|
||||
.breadcrumb-item {
|
||||
+ .breadcrumb-item::before {
|
||||
font-family: $font-family-fontawesome;
|
||||
font-weight: 900;
|
||||
content: '\f105';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn {
|
||||
height: $pbf-height;
|
||||
font-family: $font-family-base;
|
||||
font-weight: 600;
|
||||
|
||||
&.btn-square {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
&.btn-rounded {
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
|
||||
.si {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
.btn-group-sm > .btn {
|
||||
height: $pbf-height-sm;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-group-lg > .btn {
|
||||
height: $pbf-height-lg;
|
||||
}
|
||||
|
||||
.btn.btn-hero {
|
||||
@include button-size($btn-hero-padding-y, $btn-hero-padding-x, $font-size-base, $pbf-line-height, 3px);
|
||||
height: auto;
|
||||
|
||||
&.btn-sm {
|
||||
@include button-size($btn-hero-padding-y-sm, $btn-hero-padding-x-sm, $font-size-base, $pbf-line-height-sm, 3px);
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
@include button-size($btn-hero-padding-y-lg, $btn-hero-padding-x-lg, $font-size-md, $pbf-line-height-lg, 3px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-circle {
|
||||
@include button-size(9px, 0, $font-size-base, 1, inherit);
|
||||
min-width: $pbf-height;
|
||||
height: $pbf-height;
|
||||
text-align: center;
|
||||
border-radius: 50% !important;
|
||||
|
||||
&.btn-sm {
|
||||
@include button-size(6px, 0, $font-size-base, 1, inherit);
|
||||
min-width: $pbf-height-sm;
|
||||
height: $pbf-height-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
@include button-size(12px, 0, $font-size-base, 1, inherit);
|
||||
min-width: $pbf-height-lg;
|
||||
height: $pbf-height-lg;
|
||||
}
|
||||
|
||||
> .si {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@include button-variant($body-bg, $body-bg);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
@include button-outline-variant(darken($body-bg-dark, 40%));
|
||||
}
|
||||
|
||||
.btn-alt-primary {
|
||||
@include button-alt-variant($brand-primary, $brand-lighter);
|
||||
}
|
||||
|
||||
.btn-alt-secondary {
|
||||
@include button-alt-variant($body-color, $body-bg-dark);
|
||||
}
|
||||
|
||||
.btn-alt-success {
|
||||
@include button-alt-variant($brand-success, $brand-success-light);
|
||||
}
|
||||
|
||||
.btn-alt-info {
|
||||
@include button-alt-variant($brand-info, $brand-info-light);
|
||||
}
|
||||
|
||||
.btn-alt-warning {
|
||||
@include button-alt-variant($brand-warning, $brand-warning-light);
|
||||
}
|
||||
|
||||
.btn-alt-danger {
|
||||
@include button-alt-variant($brand-danger, $brand-danger-light);
|
||||
}
|
||||
|
||||
// Used for buttons that adapt to light/dark header and sidebar variations
|
||||
.btn-dual-secondary {
|
||||
@include button-dual-variant(darken($body-color, 22%), darken($body-bg, 10%));
|
||||
}
|
||||
|
||||
.page-header-inverse #page-header .btn-dual-secondary,
|
||||
.sidebar-inverse #sidebar .btn-dual-secondary {
|
||||
@include button-dual-variant($white, $brand-darker);
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
//
|
||||
// Custom Form Elements
|
||||
// --------------------------------------------------
|
||||
|
||||
.custom-control-label::before,
|
||||
.custom-control-label::after {
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
// Base class
|
||||
.css-control {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 6px 0;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: $pbf-font-size;
|
||||
cursor: pointer;
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
|
||||
&:focus ~ .css-control-indicator {
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
~ .css-control-indicator {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: -3px;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.css-control-sm {
|
||||
padding: 3px 0 4px;
|
||||
font-size: $pbf-font-size-sm;
|
||||
}
|
||||
|
||||
&.css-control-lg {
|
||||
padding: 7px 0;
|
||||
font-size: $pbf-font-size-lg;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// CSS Radios
|
||||
.css-radio {
|
||||
.css-control-input {
|
||||
~ .css-control-indicator {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
|
||||
&::after {
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity .15s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked ~ .css-control-indicator::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .css-control-input ~ .css-control-indicator {
|
||||
border-color: $body-bg-dark;
|
||||
}
|
||||
|
||||
// Size Variations
|
||||
&.css-control-sm {
|
||||
.css-control-input ~ .css-control-indicator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.css-control-lg {
|
||||
.css-control-input ~ .css-control-indicator {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
// Color Variations
|
||||
&.css-control-primary .css-control-input:checked ~ .css-control-indicator::after { background-color: $brand-primary; }
|
||||
&.css-control-secondary .css-control-input:checked ~ .css-control-indicator::after { background-color: $gray-dark; }
|
||||
&.css-control-info .css-control-input:checked ~ .css-control-indicator::after { background-color: $brand-info; }
|
||||
&.css-control-success .css-control-input:checked ~ .css-control-indicator::after { background-color: $brand-success; }
|
||||
&.css-control-warning .css-control-input:checked ~ .css-control-indicator::after { background-color: $brand-warning; }
|
||||
&.css-control-danger .css-control-input:checked ~ .css-control-indicator::after { background-color: $brand-danger; }
|
||||
}
|
||||
|
||||
// CSS Checkboxes
|
||||
.css-checkbox {
|
||||
.css-control-input ~ .css-control-indicator {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $white;
|
||||
border: 1px solid #ddd;
|
||||
transition: background-color .15s;
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-family: $font-family-fontawesome;
|
||||
font-weight: 900;
|
||||
font-size: 10px;
|
||||
color: $white;
|
||||
line-height: 18px;
|
||||
content: '\f00c';
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .css-control-input ~ .css-control-indicator {
|
||||
border-color: $body-bg-dark;
|
||||
}
|
||||
|
||||
// Size Variations
|
||||
&.css-control-sm {
|
||||
.css-control-input ~ .css-control-indicator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&::after {
|
||||
font-size: 8px;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.css-control-lg {
|
||||
padding: 6px 0 7px;
|
||||
|
||||
.css-control-input ~ .css-control-indicator {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
&::after {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shape Variations
|
||||
&.css-checkbox-rounded .css-control-input ~ .css-control-indicator {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// Color Variations
|
||||
&.css-control-primary .css-control-input:checked ~ .css-control-indicator {
|
||||
background-color: $brand-primary;
|
||||
border-color: darken($brand-primary, 15%);
|
||||
}
|
||||
|
||||
&.css-control-secondary .css-control-input:checked ~ .css-control-indicator {
|
||||
background-color: $gray-dark;
|
||||
border-color: darken($gray-dark, 15%);
|
||||
}
|
||||
|
||||
&.css-control-info .css-control-input:checked ~ .css-control-indicator {
|
||||
background-color: $brand-info;
|
||||
border-color: darken($brand-info, 15%);
|
||||
}
|
||||
|
||||
&.css-control-success .css-control-input:checked ~ .css-control-indicator {
|
||||
background-color: $brand-success;
|
||||
border-color: darken($brand-success, 15%);
|
||||
}
|
||||
|
||||
&.css-control-warning .css-control-input:checked ~ .css-control-indicator {
|
||||
background-color: $brand-warning;
|
||||
border-color: darken($brand-warning, 15%);
|
||||
}
|
||||
|
||||
&.css-control-danger .css-control-input:checked ~ .css-control-indicator {
|
||||
background-color: $brand-danger;
|
||||
border-color: darken($brand-danger, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
// CSS Switches
|
||||
.css-switch {
|
||||
padding: 3px 0;
|
||||
|
||||
.css-control-input {
|
||||
~ .css-control-indicator {
|
||||
width: 51px;
|
||||
height: 30px;
|
||||
background-color: #eee;
|
||||
border-radius: 30px;
|
||||
transition: background-color .3s;
|
||||
|
||||
&::after {
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
width: 26px;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 1px 0 3px rgba(0,0,0,.1);
|
||||
transition: transform .15s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked ~ .css-control-indicator {
|
||||
background-color: #ddd;
|
||||
|
||||
&::after {
|
||||
box-shadow: -2px 0 3px rgba(0,0,0,.3);
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Size Variations
|
||||
&.css-control-sm {
|
||||
padding: 3px 0;
|
||||
|
||||
.css-control-input {
|
||||
~ .css-control-indicator {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
|
||||
&::after {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked ~ .css-control-indicator::after {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.css-control-lg {
|
||||
padding: 4px 0;
|
||||
|
||||
.css-control-input {
|
||||
~ .css-control-indicator {
|
||||
width: 65px;
|
||||
height: 34px;
|
||||
|
||||
&::after {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked ~ .css-control-indicator::after {
|
||||
transform: translateX(30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shape Variations
|
||||
&.css-switch-square .css-control-input ~ .css-control-indicator,
|
||||
&.css-switch-square .css-control-input ~ .css-control-indicator::after {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Color Variations
|
||||
&.css-control-primary .css-control-input:checked ~ .css-control-indicator { background-color: $brand-primary; }
|
||||
&.css-control-secondary .css-control-input:checked ~ .css-control-indicator { background-color: $gray-dark; }
|
||||
&.css-control-info .css-control-input:checked ~ .css-control-indicator { background-color: $brand-info; }
|
||||
&.css-control-success .css-control-input:checked ~ .css-control-indicator { background-color: $brand-success; }
|
||||
&.css-control-warning .css-control-input:checked ~ .css-control-indicator { background-color: $brand-warning; }
|
||||
&.css-control-danger .css-control-input:checked ~ .css-control-indicator { background-color: $brand-danger; }
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
//
|
||||
// Dropdown
|
||||
// --------------------------------------------------
|
||||
|
||||
.dropdown-menu {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
margin-bottom: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
//
|
||||
// Material Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
.form-material {
|
||||
position: relative;
|
||||
padding-top: 26px;
|
||||
|
||||
// Labels
|
||||
> label {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.floating > label {
|
||||
font-size: $font-size-md;
|
||||
font-weight: 400;
|
||||
cursor: text;
|
||||
z-index: 2;
|
||||
transition: all .2s ease-out;
|
||||
transform: translateY(25px);
|
||||
}
|
||||
|
||||
&.form-material-sm.floating > label {
|
||||
font-size: $font-size-base;
|
||||
transform: translateY(22px);
|
||||
}
|
||||
|
||||
&.form-material-lg.floating > label {
|
||||
font-size: $font-size-lg;
|
||||
transform: translateY(27px);
|
||||
}
|
||||
|
||||
> label,
|
||||
& > .form-control:focus + label,
|
||||
&.floating.open > label {
|
||||
font-size: $font-size-base;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
// :-webkit-autofill Use it separately because it causes issues with non webkit browsers when it is used along with the other selectors
|
||||
&.floating > .form-control:-webkit-autofill + label {
|
||||
font-size: $font-size-base;
|
||||
font-weight: 600;
|
||||
cursor: default;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.floating > .form-control[disabled] + label,
|
||||
&.floating > .form-control[readonly] + label,
|
||||
fieldset[disabled] &.floating > label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Form controls and input addons
|
||||
> .form-control {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: 0 1px 0 $input-border-color;
|
||||
transition: box-shadow .3s ease-out;
|
||||
|
||||
~ .input-group-append {
|
||||
box-shadow: 0 1px 0 $input-border-color;
|
||||
transition: box-shadow .3s ease-out;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 2px 0 $input-focus-border-color;
|
||||
|
||||
+ label {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
~ .input-group-append {
|
||||
box-shadow: 0 2px 0 $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> select.form-control {
|
||||
border-radius: 1px; // Fixes an Opera bug (border not transparent as set but black)
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
background-color: $white;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.input-group .input-group-text {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Form Focus Variations
|
||||
&.form-material-primary > .form-control {
|
||||
@include form-control-material-focus-variant($brand-primary);
|
||||
}
|
||||
|
||||
&.form-material-success > .form-control {
|
||||
@include form-control-material-focus-variant($brand-success);
|
||||
}
|
||||
|
||||
&.form-material-info > .form-control {
|
||||
@include form-control-material-focus-variant($brand-info);
|
||||
}
|
||||
|
||||
&.form-material-warning > .form-control {
|
||||
@include form-control-material-focus-variant($brand-warning);
|
||||
}
|
||||
|
||||
&.form-material-danger > .form-control {
|
||||
@include form-control-material-focus-variant($brand-danger);
|
||||
}
|
||||
}
|
||||
|
||||
// Form State Variations
|
||||
@include form-validation-state-material("valid", $brand-success);
|
||||
@include form-validation-state-material("invalid", $brand-danger);
|
||||
@@ -0,0 +1,88 @@
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
height: $pbf-height;
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
height: auto;
|
||||
|
||||
&:not([size]):not([multiple]) {
|
||||
padding-top: $pbf-padding-y - 2;
|
||||
padding-bottom: $pbf-padding-y - 2;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control-sm {
|
||||
&:not([size]):not([multiple]) {
|
||||
padding-top: $pbf-padding-y-sm - 2;
|
||||
padding-bottom: $pbf-padding-y-sm - 2;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control-lg {
|
||||
&:not([size]):not([multiple]) {
|
||||
padding-top: $pbf-padding-y-lg - 2;
|
||||
padding-bottom: $pbf-padding-y-lg - 2;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
padding: $input-btn-padding-x;
|
||||
|
||||
&.form-control-sm {
|
||||
padding: $input-btn-padding-x-sm;
|
||||
}
|
||||
|
||||
&.form-control-lg {
|
||||
padding: $input-btn-padding-x-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-lg,
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-prepend > .input-group-text,
|
||||
.input-group-lg > .input-group-append > .input-group-text,
|
||||
.input-group-lg > .input-group-prepend > .btn,
|
||||
.input-group-lg > .input-group-append > .btn {
|
||||
height: $pbf-height-lg;
|
||||
font-size: $pbf-font-size-lg;
|
||||
line-height: $pbf-line-height-lg;
|
||||
}
|
||||
|
||||
.form-control-sm,
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-prepend > .input-group-text,
|
||||
.input-group-sm > .input-group-append > .input-group-text,
|
||||
.input-group-sm > .input-group-prepend > .btn,
|
||||
.input-group-sm > .input-group-append > .btn {
|
||||
height: $pbf-height-sm;
|
||||
font-size: $pbf-font-size-sm;
|
||||
line-height: $pbf-line-height-sm;
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
font-size: $pbf-font-size-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
font-size: $pbf-font-size-sm;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Temporary fix for custom form controls when labels are empty (bug introduced in Bootstrap 4.1.1)
|
||||
.custom-control-label {
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
//
|
||||
// Grid
|
||||
// --------------------------------------------------
|
||||
|
||||
// Tiny grid gutters
|
||||
.row.gutters-tiny {
|
||||
margin-right: (-($space-row-gutter-tiny / 2));
|
||||
margin-left: (-($space-row-gutter-tiny / 2));
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-left: ($space-row-gutter-tiny / 2);
|
||||
padding-right: ($space-row-gutter-tiny / 2);
|
||||
}
|
||||
|
||||
.push,
|
||||
.block {
|
||||
margin-bottom: $space-row-gutter-tiny;
|
||||
}
|
||||
}
|
||||
|
||||
// Equal height of elements inside columns
|
||||
.row.row-deck > div {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
> .block {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
//
|
||||
// Header
|
||||
// --------------------------------------------------
|
||||
|
||||
#page-header {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
background-color: $header-bg;
|
||||
}
|
||||
|
||||
// Header overlay (used for various reasons eg: loading or search)
|
||||
.overlay-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $white;
|
||||
opacity: 0;
|
||||
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
|
||||
transform: translateY(-100%);
|
||||
will-change: opacity, transform;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Inner header sections
|
||||
.content-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
padding: (($header-height - $pbf-height) / 2) $space-side;
|
||||
height: $header-height;
|
||||
|
||||
&.content-header-fullrow {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&-section {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.content-header-section-wrap {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: inline-block;
|
||||
height: $pbf-height;
|
||||
line-height: $pbf-height;
|
||||
vertical-align: middle;
|
||||
|
||||
&-align {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
height: $pbf-height;
|
||||
}
|
||||
|
||||
@at-root #page-header > & {
|
||||
padding-left: $space-mobile;
|
||||
padding-right: $space-mobile;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: $space-base;
|
||||
padding-right: $space-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
//
|
||||
// Hero
|
||||
// --------------------------------------------------
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 500px;
|
||||
|
||||
&.hero-sm {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
&.hero-lg {
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-static {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.hero-promo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: -500px;
|
||||
bottom: -500px;
|
||||
left: 0;
|
||||
height: 640px;
|
||||
content: '';
|
||||
background: rgba(255,255,255,.2);
|
||||
transform: skewY(-20deg);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
//
|
||||
// Image (links and hover options)
|
||||
// --------------------------------------------------
|
||||
|
||||
// Avatar
|
||||
.img-avatar {
|
||||
display: inline-block !important;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.img-avatar16 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.img-avatar20 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.img-avatar32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.img-avatar48 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
&.img-avatar96 {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
&.img-avatar128 {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
margin: 5px;
|
||||
box-shadow: 0 0 0 5px rgba(255,255,255,.4);
|
||||
}
|
||||
|
||||
&.img-avatar-rounded {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&.img-avatar-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Image Thumb
|
||||
.img-thumb {
|
||||
padding: 6px;
|
||||
background-color: $white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
// Image Link
|
||||
.img-link {
|
||||
display: inline-block;
|
||||
transition: transform .25s ease-out, opacity .25s ease-out;
|
||||
|
||||
@include hover {
|
||||
transform: scale(1.04);
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.img-link-simple:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.img-link-zoom-in {
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
// Responsive
|
||||
.img-fluid.img-fluid-100,
|
||||
.img-fluid-100 .img-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
//
|
||||
// Item
|
||||
// --------------------------------------------------
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
line-height: 60px;
|
||||
|
||||
@at-root {
|
||||
a#{&} {
|
||||
@include hover-focus {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.item-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.item-rounded {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&.item-rounded-big {
|
||||
border-radius: 24px;
|
||||
|
||||
&.item-2x {
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
&.item-3x {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.item-2x {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
&.item-3x {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
//
|
||||
// Layout Variations
|
||||
// --------------------------------------------------
|
||||
|
||||
#page-container {
|
||||
// Main content related
|
||||
@include media-breakpoint-up(xl) {
|
||||
&.main-content-narrow > #page-header .content-header,
|
||||
&.main-content-narrow > #page-header .content,
|
||||
&.main-content-narrow > #main-container .content,
|
||||
&.main-content-narrow > #page-footer .content {
|
||||
max-width: $space-narrow;
|
||||
}
|
||||
}
|
||||
|
||||
&.main-content-boxed > #page-header .content-header,
|
||||
&.main-content-boxed > #page-header .content,
|
||||
&.main-content-boxed > #main-container .content,
|
||||
&.main-content-boxed > #page-footer .content {
|
||||
max-width: $space-boxed;
|
||||
}
|
||||
|
||||
// Page header related
|
||||
@include media-breakpoint-up(lg) {
|
||||
&.page-header-modern #page-header {
|
||||
background-color: $body-bg;
|
||||
box-shadow: none !important;
|
||||
|
||||
> .content-header {
|
||||
padding-top: $header-height - 36px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.page-header-inverse #page-header {
|
||||
color: darken($body-color-light, 8%);
|
||||
background-color: $header-inverse-bg;
|
||||
}
|
||||
|
||||
&.page-header-glass {
|
||||
#page-header {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.page-header-fixed {
|
||||
#page-header {
|
||||
transition: background-color .2s linear;
|
||||
will-change: background-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.page-header-scroll #page-header {
|
||||
background-color: $header-bg;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.02);
|
||||
}
|
||||
|
||||
&.page-header-scroll.page-header-inverse #page-header {
|
||||
background-color: $header-inverse-bg;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
#main-container,
|
||||
&.page-header-fixed #main-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-header-fixed {
|
||||
#page-header {
|
||||
position: fixed;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.02);
|
||||
|
||||
> .content-header {
|
||||
padding-top: (($header-height - $pbf-height) / 2);
|
||||
padding-bottom: (($header-height - $pbf-height) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&.page-header-inverse #page-header {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
padding-top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-header-fixed,
|
||||
&.page-header-glass {
|
||||
#page-header {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-fixed;
|
||||
min-width: 320px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&.sidebar-o #page-header {
|
||||
left: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-r.sidebar-o #page-header {
|
||||
right: $sidebar-width;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Mini Sidebar
|
||||
&.sidebar-o.sidebar-mini #page-header {
|
||||
left: $sidebar-mini-width;
|
||||
}
|
||||
|
||||
&.sidebar-r.sidebar-o.sidebar-mini #page-header {
|
||||
right: $sidebar-mini-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar and side overlay related
|
||||
@include media-breakpoint-up(lg) {
|
||||
&.page-header-modern #sidebar {
|
||||
box-shadow: 5px 0 10px $body-bg-dark;
|
||||
}
|
||||
|
||||
&.page-header-modern.sidebar-r #sidebar {
|
||||
box-shadow: -5px 0 10px $body-bg-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-inverse #sidebar {
|
||||
color: $body-color-light;
|
||||
background-color: $sidebar-inverse-bg;
|
||||
box-shadow: none;
|
||||
|
||||
.content-side-user {
|
||||
background-color: darken($sidebar-inverse-bg, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&.sidebar-o {
|
||||
padding-left: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-r.sidebar-o {
|
||||
padding-right: $sidebar-width;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
// Mini Sidebar
|
||||
&.sidebar-o.sidebar-mini {
|
||||
padding-left: $sidebar-mini-width;
|
||||
}
|
||||
|
||||
&.sidebar-r.sidebar-o.sidebar-mini {
|
||||
padding-right: $sidebar-mini-width;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
// Side Scroll (Disable native scrolling, slimScroll will be enabled with JS)
|
||||
&.side-scroll #sidebar,
|
||||
&.side-scroll #side-overlay {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
// Main Structure
|
||||
#page-container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
#page-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
background: rgba(darken($brand-primary, 45%), .4);
|
||||
background: linear-gradient(to right, rgba(darken($brand-primary, 45%),0), rgba(darken($brand-primary, 45%),.6));
|
||||
z-index: $zindex-page-overlay;
|
||||
opacity: 0;
|
||||
transition: opacity $side-transition, transform $side-transition;
|
||||
transform: translateX(100%);
|
||||
|
||||
.sidebar-r & {
|
||||
background: linear-gradient(to right, rgba(darken($brand-primary, 45%),.6), rgba(darken($brand-primary, 45%),0));
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.side-overlay-o.enable-page-overlay & {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-container,
|
||||
#page-footer {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// Content
|
||||
.content {
|
||||
@include content-layout($space-mobile, $space-mobile);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include content-layout($space-base, $space-base);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&.content-narrow { max-width: $space-narrow; }
|
||||
}
|
||||
|
||||
&.content-boxed { max-width: $space-boxed; }
|
||||
}
|
||||
|
||||
.content-side {
|
||||
@include content-layout($space-side, $space-side, hidden);
|
||||
|
||||
&-user {
|
||||
height: 136px;
|
||||
background-color: $body-bg-light;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.content.content-top {
|
||||
padding-top: $header-height + $space-mobile;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $header-height + $space-base;
|
||||
}
|
||||
}
|
||||
|
||||
.section-top {
|
||||
padding-top: $header-height;
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
//
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
// Base List
|
||||
.list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.list-simple > li,
|
||||
&-li-push > li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&.list-simple-mini > li,
|
||||
&-li-push-sm > li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Timeline
|
||||
.list-timeline {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
|
||||
> li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.list-timeline-time {
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
min-height: 50px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
line-height: 30px;
|
||||
font-style: italic;
|
||||
background-color: $body-bg-light;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.list-timeline-icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
width: $pbf-height;
|
||||
height: $pbf-height;
|
||||
line-height: $pbf-height;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.list-timeline-content {
|
||||
padding: 10px 10px 1px;
|
||||
|
||||
> p:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.list-timeline-modern {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 119px;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 6px;
|
||||
content: '';
|
||||
background-color: $body-bg-light;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
> li {
|
||||
min-height: 40px;
|
||||
z-index: 2;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-timeline-time {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
width: 90px;
|
||||
font-size: $font-size-sm;
|
||||
line-height: normal;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.list-timeline-icon {
|
||||
top: 3px;
|
||||
left: 105px;
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
.list-timeline-content {
|
||||
padding-left: 155px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Activity
|
||||
.list-activity {
|
||||
> li {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 7px;
|
||||
padding-left: 35px;
|
||||
border-bottom: 1px solid $body-bg;
|
||||
|
||||
> i:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
> li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Events
|
||||
.list-events > li {
|
||||
margin-bottom: 7px;
|
||||
padding: 10px 30px 10px 7px;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 600;
|
||||
background-color: $brand-info-light;
|
||||
border-left: 3px dotted rgba(0,0,0,.1);
|
||||
transition: transform .25s ease-out;
|
||||
|
||||
&::before {
|
||||
@include vertical-align;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
font-family: $font-family-fontawesome;
|
||||
color: rgba(0,0,0,.3);
|
||||
content: '\f073';
|
||||
}
|
||||
|
||||
@include hover {
|
||||
cursor: move;
|
||||
border-left-color: rgba(0,0,0,.3);
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
// Codebase mixins and Bootstrap overrides
|
||||
@import 'mixins/buttons';
|
||||
@import 'mixins/forms';
|
||||
@import 'mixins/text-emphasis';
|
||||
|
||||
// Codebase mixins
|
||||
@import 'mixins/background-variant';
|
||||
@import 'mixins/content';
|
||||
@import 'mixins/ribbon';
|
||||
@import 'mixins/theme';
|
||||
@import 'mixins/valign';
|
||||
@@ -0,0 +1,83 @@
|
||||
//
|
||||
// Modal
|
||||
// --------------------------------------------------
|
||||
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
background-color: darken($brand-primary, 45%);
|
||||
}
|
||||
|
||||
// Top position
|
||||
.modal-dialog {
|
||||
&.modal-dialog-top {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Transitions
|
||||
.modal {
|
||||
&.fade .modal-dialog {
|
||||
transition-duration: .35s;
|
||||
|
||||
&.modal-dialog-popin {
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
|
||||
&.modal-dialog-popout {
|
||||
transform: scale(.8, .8);
|
||||
}
|
||||
|
||||
&.modal-dialog-slideup {
|
||||
transform: translate(0, 25%);
|
||||
}
|
||||
|
||||
&.modal-dialog-slideright {
|
||||
transform: translate(-25%, 0);
|
||||
}
|
||||
|
||||
&.modal-dialog-slideleft {
|
||||
transform: translate(25%, 0);
|
||||
}
|
||||
|
||||
&.modal-dialog-fromright {
|
||||
transform: translateX(25%) rotate(15deg) scale(.8);
|
||||
}
|
||||
|
||||
&.modal-dialog-fromleft {
|
||||
transform: translateX(-25%) rotate(-15deg) scale(.8);
|
||||
}
|
||||
}
|
||||
|
||||
&.show .modal-dialog {
|
||||
&.modal-dialog-popin,
|
||||
&.modal-dialog-popout {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
&.modal-dialog-slideup,
|
||||
&.modal-dialog-slideright,
|
||||
&.modal-dialog-slideleft {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
&.modal-dialog-fromright,
|
||||
&.modal-dialog-fromleft {
|
||||
transform: translateX(0) rotate(0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,362 @@
|
||||
//
|
||||
// Main Navigation
|
||||
// --------------------------------------------------
|
||||
|
||||
// Sidebar
|
||||
.nav-main {
|
||||
margin: 0 (-$space-side);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
// Headings
|
||||
.nav-main-heading {
|
||||
padding: 30px $space-side 6px $space-side;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
// Default links
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 9px $space-side 9px ($space-side + 22);
|
||||
font-weight: 600;
|
||||
color: rgba($body-color, .9);
|
||||
|
||||
@at-root .sidebar-inverse #sidebar & {
|
||||
color: rgba($body-color-light, .75);
|
||||
}
|
||||
|
||||
> i {
|
||||
@include vertical-align(49%, auto, $space-side);
|
||||
font-size: 14px;
|
||||
color: rgba($brand-dark, .75);
|
||||
|
||||
@at-root .sidebar-inverse #sidebar & {
|
||||
color: $body-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $black;
|
||||
|
||||
@at-root .sidebar-inverse #sidebar & {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
> i {
|
||||
color: $brand-primary;
|
||||
|
||||
@at-root .sidebar-inverse #sidebar & {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-submenu {
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
&.nav-submenu::before,
|
||||
&.nav-submenu::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
margin-top: -11px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-family: $font-family-fontawesome;
|
||||
font-size: 14px;
|
||||
transition: all $main-nav-transition;
|
||||
}
|
||||
|
||||
&.nav-submenu::before {
|
||||
content: '\f104';
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&.nav-submenu::after {
|
||||
content: '\f103';
|
||||
opacity: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Sub menus
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 ($space-side + 22);
|
||||
height: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
|
||||
> li {
|
||||
opacity: 0;
|
||||
transition: all $main-nav-transition;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
.nav-main-heading {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 7px 8px 7px 0;
|
||||
font-size: 13px;
|
||||
color: rgba($body-color, .6);
|
||||
|
||||
@include hover-focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Active sub menu
|
||||
li.open {
|
||||
> a.nav-submenu {
|
||||
color: $black;
|
||||
|
||||
@at-root .sidebar-inverse #sidebar & {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
> i {
|
||||
color: $brand-primary;
|
||||
|
||||
@at-root .sidebar-inverse #sidebar & {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
opacity: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: .4;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
height: auto;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
background-color: $body-bg-light;
|
||||
|
||||
@at-root .sidebar-inverse #sidebar & {
|
||||
background-color: darken($sidebar-inverse-bg, 3%);
|
||||
}
|
||||
|
||||
> li {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
.nav-main-header {
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: 0 -3px;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
vertical-align: middle;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
// Default links
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: ($pbf-padding-y + 1) 14px;
|
||||
font-weight: 600;
|
||||
line-height: $pbf-line-height;
|
||||
border-radius: 3px;
|
||||
|
||||
> i {
|
||||
margin-right: 8px;
|
||||
|
||||
&.si {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-submenu {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
&.nav-submenu::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
margin-top: -10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-family: $font-family-fontawesome;
|
||||
}
|
||||
|
||||
&.nav-submenu::before {
|
||||
content: '\f107';
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
// Sub menu list
|
||||
ul {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 15px 0;
|
||||
display: none;
|
||||
z-index: $zindex-sidebar;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
min-width: 160px;
|
||||
|
||||
&.nav-submenu::before {
|
||||
content: '\f105';
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
top: -15px;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Open sub menus on hover
|
||||
li:hover {
|
||||
> a.nav-submenu {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Flip last child’s sub menus
|
||||
> li:last-child {
|
||||
ul {
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
||||
a.nav-submenu::before {
|
||||
content: '\f104';
|
||||
}
|
||||
|
||||
ul {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle menu colors
|
||||
a {
|
||||
color: lighten($body-color, 10%);
|
||||
}
|
||||
|
||||
ul a {
|
||||
color: lighten($body-color, 22%);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a.active,
|
||||
li.open > a.nav-submenu,
|
||||
li:hover > a.nav-submenu {
|
||||
color: $black;
|
||||
background-color: $body-bg-dark;
|
||||
}
|
||||
|
||||
ul,
|
||||
> li:hover > a.nav-submenu {
|
||||
background-color: darken($body-bg-dark, 3%);
|
||||
}
|
||||
|
||||
@at-root {
|
||||
.page-header-inverse #page-header &,
|
||||
.page-header-inverse.page-header-glass.page-header-scroll #page-header & {
|
||||
a {
|
||||
color: darken($body-color-light, 9%);
|
||||
}
|
||||
|
||||
ul a {
|
||||
color: darken($body-color-light, 18%);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a.active,
|
||||
li.open > a.nav-submenu,
|
||||
li:hover > a.nav-submenu {
|
||||
color: $white;
|
||||
background-color: rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
ul,
|
||||
> li:hover > a.nav-submenu {
|
||||
background-color: $brand-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .page-header-inverse.page-header-glass #page-header & {
|
||||
ul,
|
||||
> li:hover > a.nav-submenu {
|
||||
background-color: darken($brand-dark, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
.nav-main-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide icons from menu links
|
||||
&.nav-main-header-no-icons a > i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
//
|
||||
// Nav
|
||||
// --------------------------------------------------
|
||||
|
||||
// Links
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
font-weight: 600;
|
||||
|
||||
@include hover-focus {
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs block variation
|
||||
.nav-tabs-block {
|
||||
background-color: $body-bg-light;
|
||||
border-bottom: none;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
|
||||
@include hover-focus {
|
||||
color: $brand-primary;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $body-color;
|
||||
background-color: $white;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs block alternative variation
|
||||
.nav-tabs-alt {
|
||||
background-color: transparent;
|
||||
border-bottom-color: $body-bg-dark;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
@include hover-focus {
|
||||
color: $brand-primary;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 -2px $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 -2px $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Users Navigation
|
||||
.nav-users {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> li:last-child > a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
padding: 12px 8px 8px 71px;
|
||||
display: block;
|
||||
min-height: 62px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid $body-bg;
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 10px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
> i {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 40px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
background-color: $body-bg-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
//
|
||||
// Options Overlay
|
||||
// --------------------------------------------------
|
||||
|
||||
.options-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
|
||||
.options-item {
|
||||
transition: transform .35s ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.options-overlay {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
z-index: 2;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all .3s ease-in;
|
||||
will-change: opacity, transform;
|
||||
|
||||
&-content {
|
||||
@include vertical-align;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include hover {
|
||||
.options-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.options-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .options-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Item hover effects
|
||||
.fx-item-zoom-in:hover .options-item {
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
|
||||
.fx-item-rotate-r:hover .options-item {
|
||||
transform: scale(1.4) rotate(8deg);
|
||||
}
|
||||
|
||||
.fx-item-rotate-l:hover .options-item {
|
||||
transform: scale(1.4) rotate(-8deg);
|
||||
}
|
||||
|
||||
// Overlay hover effects
|
||||
.fx-overlay-slide-top {
|
||||
.options-overlay {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&:hover .options-overlay {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fx-overlay-slide-right {
|
||||
.options-overlay {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&:hover .options-overlay {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fx-overlay-slide-down {
|
||||
.options-overlay {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&:hover .options-overlay {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fx-overlay-slide-left {
|
||||
.options-overlay {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&:hover .options-overlay {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fx-overlay-zoom-in {
|
||||
.options-overlay {
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
|
||||
&:hover .options-overlay {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.fx-overlay-zoom-out {
|
||||
.options-overlay {
|
||||
transform: scale(2, 2);
|
||||
}
|
||||
|
||||
&:hover .options-overlay {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
//
|
||||
// Page Loader
|
||||
// --------------------------------------------------
|
||||
|
||||
#page-loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $brand-primary;
|
||||
z-index: 999998;
|
||||
transition: transform .35s ease-out;
|
||||
transform: translateY(-100%);
|
||||
will-change: transform;
|
||||
|
||||
&.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-top: -100px;
|
||||
margin-left: -100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: rgba(255,255,255,.5);
|
||||
border: 3px solid rgba(255,255,255,.75);
|
||||
-webkit-animation: page-loader-inner 1.5s infinite ease-out;
|
||||
animation: page-loader-inner 1.5s infinite ease-out;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-top: -30px;
|
||||
margin-left: -30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: rgba(255,255,255,1);
|
||||
-webkit-animation: page-loader-outer 1.5s infinite ease-in;
|
||||
animation: page-loader-outer 1.5s infinite ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes page-loader-inner {
|
||||
0%, 40% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes page-loader-inner {
|
||||
0%, 40% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes page-loader-outer {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
40%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes page-loader-outer {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
40%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
//
|
||||
// Pagination
|
||||
// --------------------------------------------------
|
||||
|
||||
.page-link {
|
||||
height: $pbf-height;
|
||||
line-height: $pbf-line-height;
|
||||
font-size: $pbf-font-size;
|
||||
font-weight: 600;
|
||||
|
||||
&:focus {
|
||||
color: $body-color-dark;
|
||||
background-color: $body-bg-dark;
|
||||
border-color: $body-bg-dark;
|
||||
}
|
||||
|
||||
.pagination-lg & {
|
||||
height: $pbf-height-lg;
|
||||
line-height: $pbf-line-height-lg;
|
||||
font-size: $pbf-font-size-lg;
|
||||
}
|
||||
|
||||
.pagination-sm & {
|
||||
height: $pbf-height-sm;
|
||||
line-height: $pbf-line-height-sm;
|
||||
font-size: $pbf-font-size-sm;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
//
|
||||
// Popover
|
||||
// --------------------------------------------------
|
||||
|
||||
.popover-header {
|
||||
padding-bottom: 1px;
|
||||
font-family: $headings-font-family;
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// Print
|
||||
// --------------------------------------------------
|
||||
|
||||
@media print {
|
||||
#page-container,
|
||||
#main-container {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#page-header,
|
||||
#page-footer,
|
||||
#page-loader,
|
||||
#sidebar,
|
||||
#side-overlay,
|
||||
.block-options {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// Reboot
|
||||
// --------------------------------------------------
|
||||
|
||||
html, body {
|
||||
font-size: $font-size-root;
|
||||
}
|
||||
|
||||
html.no-focus *:focus {
|
||||
// Disabling default focus outline is not a good practice for accessibility reasons
|
||||
// Elements have their own focus styles but consider enabling the default outline
|
||||
// in production by removing .no-focus class from <html> tag
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
transition: color .12s ease-out;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&.link-effect {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background-color: $link-color;
|
||||
visibility: hidden;
|
||||
transform: translateY(6px);
|
||||
transform-origin: 50% 50%;
|
||||
opacity: 0;
|
||||
transition: transform .12s ease-out, opacity .12s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include hover {
|
||||
&.link-effect::before {
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: $space-base;
|
||||
}
|
||||
|
||||
.nice-copy p,
|
||||
p.nice-copy {
|
||||
line-height: 1.8;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
.nice-copy-story p,
|
||||
p.nice-copy-story {
|
||||
line-height: 1.8;
|
||||
font-size: $font-size-lg;
|
||||
color: #626262;
|
||||
}
|
||||
|
||||
.nice-copy-story {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
//
|
||||
// Ribbon
|
||||
// --------------------------------------------------
|
||||
|
||||
.ribbon {
|
||||
position: relative;
|
||||
min-height: 52px;
|
||||
|
||||
&-box {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
&-bookmark {
|
||||
.ribbon-box {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.ribbon-box::before {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
height: 32px;
|
||||
border: 16px solid;
|
||||
border-left-width: 8px;
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-modern {
|
||||
.ribbon-box {
|
||||
top: 10px;
|
||||
right: -8px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.ribbon-box::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Position
|
||||
&-left {
|
||||
.ribbon-box {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.ribbon-bookmark {
|
||||
.ribbon-box {
|
||||
padding-left: 12px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.ribbon-box::before {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
border-left-width: 0;
|
||||
border-right-width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-modern {
|
||||
.ribbon-box {
|
||||
left: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
.ribbon-box {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
&-primary {
|
||||
@include ribbon-variation($brand-primary);
|
||||
}
|
||||
|
||||
&-success {
|
||||
@include ribbon-variation($brand-success);
|
||||
}
|
||||
|
||||
&-info {
|
||||
@include ribbon-variation($brand-info);
|
||||
}
|
||||
|
||||
&-warning {
|
||||
@include ribbon-variation($brand-warning);
|
||||
}
|
||||
|
||||
&-danger {
|
||||
@include ribbon-variation($brand-danger);
|
||||
}
|
||||
|
||||
&-crystal {
|
||||
.ribbon-box {
|
||||
background-color: rgba(255,255,255,.35);
|
||||
}
|
||||
|
||||
&.ribbon-bookmark {
|
||||
.ribbon-box::before {
|
||||
border-color: rgba(255,255,255,.35);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&.ribbon-left .ribbon-box::before {
|
||||
border-color: rgba(255,255,255,.35);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
//
|
||||
// Scrum Board
|
||||
// --------------------------------------------------
|
||||
|
||||
.scrumboard {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
opacity: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: $space-mobile $space-mobile 1px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: $space-base $space-base 1px;
|
||||
}
|
||||
|
||||
.scrumboard-col {
|
||||
flex: 0 0 auto;
|
||||
width: 320px;
|
||||
margin-right: $space-mobile;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: $space-base;
|
||||
}
|
||||
}
|
||||
|
||||
.scrumboard-item {
|
||||
position: relative;
|
||||
min-height: 42px;
|
||||
padding: 10px 87px 10px 10px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
color: darken($brand-warning, 25%);
|
||||
background-color: $brand-warning-light;
|
||||
border-bottom: 1px solid rgba(darken($brand-warning, 25%), .1);
|
||||
box-shadow: 0 5px 8px rgba(darken($brand-warning, 25%), .05);
|
||||
}
|
||||
|
||||
.scrumboard-item-options {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
.scrumboard-item-handler {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.scrumboard-item-placeholder {
|
||||
min-height: 42px;
|
||||
border: 1px dashed $brand-warning;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
//
|
||||
// Side Overlay
|
||||
// --------------------------------------------------
|
||||
|
||||
#side-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-side-overlay;
|
||||
width: 100%;
|
||||
background-color: $side-overlay-bg;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%) translateY(0) translateZ(0);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: transform;
|
||||
|
||||
.side-trans-enabled & {
|
||||
transition: transform $side-transition;
|
||||
}
|
||||
|
||||
.sidebar-r & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translateX(-100%) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.side-overlay-o & {
|
||||
transform: translateX(0) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: $side-overlay-width;
|
||||
box-shadow: 0 0 25px rgba(0,0,0,.15);
|
||||
transform: translateX(110%) translateY(0) translateZ(0);
|
||||
|
||||
.sidebar-r & {
|
||||
transform: translateX(-110%) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.side-overlay-hover & {
|
||||
transform: translateX($side-overlay-width - $space-side) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.sidebar-r.side-overlay-hover & {
|
||||
transform: translateX(-($side-overlay-width - $space-side)) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.side-overlay-hover &:hover,
|
||||
.side-overlay-o &,
|
||||
.side-overlay-o.side-overlay-hover & {
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.15);
|
||||
transform: translateX(0) translateY(0) translateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
//
|
||||
// Sidebar
|
||||
// --------------------------------------------------
|
||||
|
||||
// Mini Sidebar display helper classes
|
||||
.sidebar-mini-visible,
|
||||
.sidebar-mini-visible-b {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-mini-show {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-mini-show,
|
||||
.sidebar-mini-hide {
|
||||
transition: opacity $side-transition;
|
||||
}
|
||||
|
||||
.sidebar-mini-show.sidebar-mini-notrans,
|
||||
.sidebar-mini-hide.sidebar-mini-notrans {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sidebar;
|
||||
width: 100%;
|
||||
background-color: $sidebar-bg;
|
||||
overflow-y: auto;
|
||||
transform: translateX(-100%) translateY(0) translateZ(0);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: transform;
|
||||
|
||||
.side-trans-enabled & {
|
||||
transition: transform $side-transition;
|
||||
}
|
||||
|
||||
.sidebar-r & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translateX(100%) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.sidebar-o-xs & {
|
||||
transform: translateX(0) translateY(0) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: $sidebar-width;
|
||||
|
||||
.sidebar-o & {
|
||||
transform: translateX(0) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
// Mini Sidebar
|
||||
.sidebar-o.sidebar-mini & {
|
||||
overflow-x: hidden;
|
||||
transform: translateX(-($sidebar-width - $sidebar-mini-width)) translateY(0) translateZ(0);
|
||||
transition: transform $side-transition;
|
||||
}
|
||||
|
||||
.sidebar-r.sidebar-o.sidebar-mini & {
|
||||
transform: translateX($sidebar-width - $sidebar-mini-width) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.sidebar-o.sidebar-mini & .sidebar-content {
|
||||
width: $sidebar-width;
|
||||
transform: translateX(($sidebar-width - $sidebar-mini-width)) translateY(0) translateZ(0);
|
||||
transition: transform $side-transition;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.sidebar-o.sidebar-mini &:hover,
|
||||
.sidebar-o.sidebar-mini &:hover .sidebar-content,
|
||||
.sidebar-r.sidebar-o.sidebar-mini & .sidebar-content {
|
||||
transform: translateX(0) translateY(0) translateZ(0);
|
||||
}
|
||||
|
||||
.sidebar-o.sidebar-mini & {
|
||||
.sidebar-mini-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-mini-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-mini-hidden,
|
||||
.sidebar-mini-hidden-b {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-mini-visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-mini-visible-b {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-main > li.open > ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-o.sidebar-mini &:hover {
|
||||
.sidebar-mini-hide {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sidebar-mini-show {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-mini-hidden {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-mini-hidden-b {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-mini-visible,
|
||||
.sidebar-mini-visible-b {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.nav-main > li.open > ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
//
|
||||
// Tables
|
||||
// --------------------------------------------------
|
||||
|
||||
.table {
|
||||
thead th {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.table-vcenter {
|
||||
th,
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Table Responsive
|
||||
.table-responsive,
|
||||
[class*="table-responsive-"] {
|
||||
> .table.table-bordered thead th {
|
||||
border-top: 1px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Table backgrounds
|
||||
@include table-row-variant(active, $body-bg);
|
||||
@include table-row-variant(primary, $brand-lighter);
|
||||
@include table-row-variant(success, $brand-success-light);
|
||||
@include table-row-variant(info, $brand-info-light);
|
||||
@include table-row-variant(warning, $brand-warning-light);
|
||||
@include table-row-variant(danger, $brand-danger-light);
|
||||
|
||||
// Table tools
|
||||
.js-table-checkable tbody tr,
|
||||
.js-table-sections-header > tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.js-table-sections-header {
|
||||
> tr > td:first-child > i {
|
||||
transition: transform .2s ease-in-out;
|
||||
}
|
||||
|
||||
+ tbody {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show {
|
||||
> tr > td:first-child > i {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
+ tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
//
|
||||
// Themes
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default
|
||||
@include text-emphasis-variant('.text-default', $brand-primary);
|
||||
@include text-emphasis-variant('.text-default-dark', $brand-dark);
|
||||
@include text-emphasis-variant('.text-default-darker', $brand-darker);
|
||||
@include text-emphasis-variant('.text-default-light', $brand-light);
|
||||
@include text-emphasis-variant('.text-default-lighter', $brand-lighter);
|
||||
|
||||
@include bg-variant('.bg-default', $brand-primary);
|
||||
@include bg-variant('.bg-default-op', rgba($brand-primary, .75));
|
||||
@include bg-variant('.bg-default-dark', $brand-dark);
|
||||
@include bg-variant('.bg-default-dark-op', rgba($brand-dark, .83));
|
||||
@include bg-variant('.bg-default-darker', $brand-darker);
|
||||
@include bg-variant('.bg-default-light', $brand-light);
|
||||
@include bg-variant('.bg-default-lighter', $brand-lighter);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-default', 135deg, darken($brand-primary, 15%), lighten($brand-primary, 5%));
|
||||
|
||||
// Elegance
|
||||
@include text-emphasis-variant('.text-elegance', $theme-elegance-primary);
|
||||
@include text-emphasis-variant('.text-elegance-dark', $theme-elegance-dark);
|
||||
@include text-emphasis-variant('.text-elegance-darker', $theme-elegance-darker);
|
||||
@include text-emphasis-variant('.text-elegance-light', $theme-elegance-light);
|
||||
@include text-emphasis-variant('.text-elegance-lighter', $theme-elegance-lighter);
|
||||
|
||||
@include bg-variant('.bg-elegance', $theme-elegance-primary);
|
||||
@include bg-variant('.bg-elegance-op', rgba($theme-elegance-primary, .75));
|
||||
@include bg-variant('.bg-elegance-dark', $theme-elegance-dark);
|
||||
@include bg-variant('.bg-elegance-dark-op', rgba($theme-elegance-dark, .83));
|
||||
@include bg-variant('.bg-elegance-darker', $theme-elegance-darker);
|
||||
@include bg-variant('.bg-elegance-light', $theme-elegance-light);
|
||||
@include bg-variant('.bg-elegance-lighter', $theme-elegance-lighter);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-elegance', 135deg, darken($theme-elegance-primary, 15%), lighten($theme-elegance-primary, 5%));
|
||||
|
||||
// Pulse
|
||||
@include text-emphasis-variant('.text-pulse', $theme-pulse-primary);
|
||||
@include text-emphasis-variant('.text-pulse-dark', $theme-pulse-dark);
|
||||
@include text-emphasis-variant('.text-pulse-darker', $theme-pulse-darker);
|
||||
@include text-emphasis-variant('.text-pulse-light', $theme-pulse-light);
|
||||
@include text-emphasis-variant('.text-pulse-lighter', $theme-pulse-lighter);
|
||||
|
||||
@include bg-variant('.bg-pulse', $theme-pulse-primary);
|
||||
@include bg-variant('.bg-pulse-op', rgba($theme-pulse-primary, .75));
|
||||
@include bg-variant('.bg-pulse-dark', $theme-pulse-dark);
|
||||
@include bg-variant('.bg-pulse-dark-op', rgba($theme-pulse-dark, .83));
|
||||
@include bg-variant('.bg-pulse-darker', $theme-pulse-darker);
|
||||
@include bg-variant('.bg-pulse-light', $theme-pulse-light);
|
||||
@include bg-variant('.bg-pulse-lighter', $theme-pulse-lighter);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-pulse', 135deg, darken($theme-pulse-primary, 15%), lighten($theme-pulse-primary, 5%));
|
||||
|
||||
// Flat
|
||||
@include text-emphasis-variant('.text-flat', $theme-flat-primary);
|
||||
@include text-emphasis-variant('.text-flat-dark', $theme-flat-dark);
|
||||
@include text-emphasis-variant('.text-flat-darker', $theme-flat-darker);
|
||||
@include text-emphasis-variant('.text-flat-light', $theme-flat-light);
|
||||
@include text-emphasis-variant('.text-flat-lighter', $theme-flat-lighter);
|
||||
|
||||
@include bg-variant('.bg-flat', $theme-flat-primary);
|
||||
@include bg-variant('.bg-flat-op', rgba($theme-flat-primary, .75));
|
||||
@include bg-variant('.bg-flat-dark', $theme-flat-dark);
|
||||
@include bg-variant('.bg-flat-dark-op', rgba($theme-flat-dark, .83));
|
||||
@include bg-variant('.bg-flat-darker', $theme-flat-darker);
|
||||
@include bg-variant('.bg-flat-light', $theme-flat-light);
|
||||
@include bg-variant('.bg-flat-lighter', $theme-flat-lighter);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-flat', 135deg, darken($theme-flat-primary, 15%), lighten($theme-flat-primary, 5%));
|
||||
|
||||
// Corporate
|
||||
@include text-emphasis-variant('.text-corporate', $theme-corporate-primary);
|
||||
@include text-emphasis-variant('.text-corporate-dark', $theme-corporate-dark);
|
||||
@include text-emphasis-variant('.text-corporate-darker', $theme-corporate-darker);
|
||||
@include text-emphasis-variant('.text-corporate-light', $theme-corporate-light);
|
||||
@include text-emphasis-variant('.text-corporate-lighter', $theme-corporate-lighter);
|
||||
|
||||
@include bg-variant('.bg-corporate', $theme-corporate-primary);
|
||||
@include bg-variant('.bg-corporate-op', rgba($theme-corporate-primary, .75));
|
||||
@include bg-variant('.bg-corporate-dark', $theme-corporate-dark);
|
||||
@include bg-variant('.bg-corporate-dark-op', rgba($theme-corporate-dark, .83));
|
||||
@include bg-variant('.bg-corporate-darker', $theme-corporate-darker);
|
||||
@include bg-variant('.bg-corporate-light', $theme-corporate-light);
|
||||
@include bg-variant('.bg-corporate-lighter', $theme-corporate-lighter);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-corporate', 135deg, darken($theme-corporate-primary, 15%), lighten($theme-corporate-primary, 5%));
|
||||
|
||||
// Earth
|
||||
@include text-emphasis-variant('.text-earth', $theme-earth-primary);
|
||||
@include text-emphasis-variant('.text-earth-dark', $theme-earth-dark);
|
||||
@include text-emphasis-variant('.text-earth-darker', $theme-earth-darker);
|
||||
@include text-emphasis-variant('.text-earth-light', $theme-earth-light);
|
||||
@include text-emphasis-variant('.text-earth-lighter', $theme-earth-lighter);
|
||||
|
||||
@include bg-variant('.bg-earth', $theme-earth-primary);
|
||||
@include bg-variant('.bg-earth-op', rgba($theme-earth-primary, .75));
|
||||
@include bg-variant('.bg-earth-dark', $theme-earth-dark);
|
||||
@include bg-variant('.bg-earth-dark-op', rgba($theme-earth-dark, .83));
|
||||
@include bg-variant('.bg-earth-darker', $theme-earth-darker);
|
||||
@include bg-variant('.bg-earth-light', $theme-earth-light);
|
||||
@include bg-variant('.bg-earth-lighter', $theme-earth-lighter);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-earth', 135deg, darken($theme-earth-primary, 15%), lighten($theme-earth-primary, 5%));
|
||||
@@ -0,0 +1,34 @@
|
||||
//
|
||||
// Transitions
|
||||
// --------------------------------------------------
|
||||
|
||||
.fade {
|
||||
transition: opacity .15s ease-out; // Summernote editor tooltips have issues if we add transform in transition
|
||||
|
||||
&.fade-up {
|
||||
transition: opacity .15s ease-out, transform .3s ease-out;
|
||||
transform: translateY(100px);
|
||||
|
||||
&.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.fade-right {
|
||||
transition: opacity .15s ease-out, transform .3s ease-out;
|
||||
transform: translateX(-100px);
|
||||
|
||||
&.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.fade-left {
|
||||
transition: opacity .15s ease-out, transform .3s ease-out;
|
||||
transform: translateX(100px);
|
||||
|
||||
&.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
//
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
// Headings
|
||||
.font-size-h1 { font-size: $h1-font-size; }
|
||||
.font-size-h2 { font-size: $h2-font-size; }
|
||||
.font-size-h3 { font-size: $h3-font-size; }
|
||||
.font-size-h4 { font-size: $h4-font-size; }
|
||||
.font-size-h5 { font-size: $h5-font-size; }
|
||||
.font-size-h6 { font-size: $h6-font-size; }
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.display-1 { font-size: 3.429rem; }
|
||||
.display-2 { font-size: 3.143rem; }
|
||||
.display-3 { font-size: 2.857rem; }
|
||||
.display-4 { font-size: $h1-font-size; }
|
||||
|
||||
h1, .h1, .font-size-h1 { font-size: $h2-font-size; }
|
||||
h2, .h2, .font-size-h2 { font-size: $h3-font-size; }
|
||||
h3, .h3, .font-size-h3 { font-size: $h4-font-size; }
|
||||
h4, .h4, .font-size-h4 { font-size: $h5-font-size; }
|
||||
|
||||
h5, .h5, .font-size-h5,
|
||||
h6, .h6, .font-size-h6 {
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.content-heading {
|
||||
margin-bottom: 20px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 8px;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
border-bottom: 1px solid $body-bg-dark;
|
||||
|
||||
small {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-bottom: 25px;
|
||||
padding-top: 40px;
|
||||
|
||||
small {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Emphasis
|
||||
small,
|
||||
.small {
|
||||
font-weight: inherit;
|
||||
color: $headings-small-color;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// Utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
@import 'utilities/background';
|
||||
@import 'utilities/borders';
|
||||
@import 'utilities/display';
|
||||
@import 'utilities/effects';
|
||||
@import 'utilities/sizing';
|
||||
@import 'utilities/spacing';
|
||||
@import 'utilities/text';
|
||||
@import 'utilities/valign';
|
||||
@@ -0,0 +1,263 @@
|
||||
//
|
||||
// Bootstrap variables (overrides only)
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Color system
|
||||
$theme-colors: (
|
||||
primary: $brand-primary,
|
||||
secondary: $gray-600,
|
||||
success: $brand-success,
|
||||
info: $brand-info,
|
||||
warning: $brand-warning,
|
||||
danger: $brand-danger
|
||||
) !default;
|
||||
|
||||
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
|
||||
$yiq-contrasted-threshold: 200 !default;
|
||||
|
||||
// Components
|
||||
$line-height-lg: $pbf-line-height-lg !default;
|
||||
$line-height-sm: $pbf-line-height-sm !default;
|
||||
|
||||
$border-width: 1px !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: theme-color("primary") !default;
|
||||
|
||||
$caret-width: .25em !default;
|
||||
|
||||
|
||||
// Fonts
|
||||
$display-line-height: $headings-line-height !default;
|
||||
|
||||
$lead-font-size: 1.5rem !default;
|
||||
|
||||
$hr-border-color: $body-bg-dark !default;
|
||||
|
||||
|
||||
// Navs
|
||||
$nav-tabs-border-color: $body-bg-dark !default;
|
||||
$nav-tabs-link-hover-border-color: $body-bg-dark !default;
|
||||
$nav-tabs-link-active-color: $body-color !default;
|
||||
$nav-tabs-link-active-bg: $white !default;
|
||||
$nav-tabs-link-active-border-color: $body-bg-dark !default;
|
||||
|
||||
$nav-pills-link-active-color: $white !default;
|
||||
$nav-pills-link-active-bg: $component-active-bg !default;
|
||||
|
||||
|
||||
// Tables
|
||||
$table-cell-padding: 10px !default;
|
||||
$table-cell-padding-sm: 5px !default;
|
||||
|
||||
$table-accent-bg: rgba(0,0,0,.02) !default;
|
||||
$table-hover-bg: rgba(0,0,0,.04) !default;
|
||||
$table-active-bg: $table-hover-bg !default;
|
||||
|
||||
$table-border-color: $body-bg-dark !default;
|
||||
|
||||
$table-head-bg: $body-bg-dark !default;
|
||||
$table-head-color: $body-color !default;
|
||||
|
||||
$table-dark-bg: $brand-dark !default;
|
||||
$table-dark-accent-bg: rgba(0,0,0,.1) !default;
|
||||
$table-dark-hover-bg: rgba(0,0,0,.18) !default;
|
||||
$table-dark-border-color: lighten($brand-dark, 5%) !default;
|
||||
$table-dark-color: $body-color-light !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
$input-btn-padding-y: $pbf-padding-y !default;
|
||||
$input-btn-padding-x: 14px !default;
|
||||
$input-btn-line-height: $pbf-line-height !default;
|
||||
|
||||
$input-btn-padding-y-sm: $pbf-padding-y-sm !default;
|
||||
$input-btn-padding-x-sm: 9px !default;
|
||||
$input-btn-line-height-sm: $pbf-line-height-sm !default;
|
||||
|
||||
$input-btn-padding-y-lg: $pbf-padding-y-lg !default;
|
||||
$input-btn-padding-x-lg: 18px !default;
|
||||
$input-btn-line-height-lg: $pbf-line-height-lg !default;
|
||||
|
||||
$input-btn-focus-box-shadow: none !default;
|
||||
|
||||
$btn-font-weight: 600 !default;
|
||||
$btn-focus-box-shadow: none !default;
|
||||
$btn-active-box-shadow: none !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$label-margin-bottom: 5px !default;
|
||||
|
||||
$input-bg: $white !default;
|
||||
|
||||
$input-color: $body-color !default;
|
||||
$input-border-color: darken($body-bg-dark, 5%) !default;
|
||||
$input-btn-border-width: $border-width !default;
|
||||
$input-box-shadow: none !default;
|
||||
|
||||
$input-focus-bg: $input-bg !default;
|
||||
$input-focus-border-color: darken($body-bg-dark, 25%) !default;
|
||||
$input-focus-box-shadow: none !default;
|
||||
|
||||
$input-height-border: $input-btn-border-width * 2 !default;
|
||||
|
||||
$input-height-inner: $pbf-height - 2px !default;
|
||||
$input-height: $pbf-height !default;
|
||||
|
||||
$input-height-inner-sm: $pbf-height-sm - 2px !default;
|
||||
$input-height-sm: $pbf-height-sm !default;
|
||||
|
||||
$input-height-inner-lg: $pbf-height-lg - 2px !default;
|
||||
$input-height-lg: $pbf-height-lg !default;
|
||||
|
||||
$input-transition: border-color ease-in-out .15s !default;
|
||||
|
||||
$form-group-margin-bottom: 16px !default;
|
||||
|
||||
$input-group-addon-bg: $body-bg-light !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
$custom-control-gutter: 24px !default;
|
||||
$custom-control-spacer-x: 16px !default;
|
||||
|
||||
$custom-control-indicator-size: 1.143rem !default;
|
||||
|
||||
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
|
||||
|
||||
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
||||
|
||||
$custom-select-font-size-sm: 75% !default;
|
||||
$custom-select-height-sm: $input-height-sm !default;
|
||||
|
||||
$custom-file-color: $body-color !default;
|
||||
$custom-file-bg: $white !default;
|
||||
$custom-file-border-color: $input-border-color !default;
|
||||
$custom-file-button-color: $custom-file-color !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
$dropdown-padding-y: 8px !default;
|
||||
$dropdown-border-color: $body-bg-dark !default;
|
||||
$dropdown-border-radius: 2px !default;
|
||||
$dropdown-divider-bg: $body-bg-dark !default;
|
||||
$dropdown-box-shadow: 0 15px 25px rgba(0,0,0,.05) !default;
|
||||
|
||||
$dropdown-link-color: $body-color !default;
|
||||
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
||||
$dropdown-link-hover-bg: $body-bg !default;
|
||||
|
||||
$dropdown-link-active-color: $body-color !default;
|
||||
$dropdown-link-active-bg: $body-bg-dark !default;
|
||||
|
||||
$dropdown-item-padding-y: 5px !default;
|
||||
$dropdown-item-padding-x: 10px !default;
|
||||
|
||||
$dropdown-header-color: $headings-color !default;
|
||||
|
||||
|
||||
// Pagination
|
||||
$pagination-padding-y: $pbf-padding-y !default;
|
||||
$pagination-padding-x: 10px !default;
|
||||
$pagination-padding-y-sm: $pbf-padding-y-sm !default;
|
||||
$pagination-padding-x-sm: 7px !default;
|
||||
$pagination-padding-y-lg: $pbf-padding-y-lg !default;
|
||||
$pagination-padding-x-lg: 20px !default;
|
||||
$pagination-line-height: $pbf-line-height !default;
|
||||
|
||||
$pagination-color: $body-color-dark !default;
|
||||
$pagination-bg: $body-bg !default;
|
||||
$pagination-border-color: $body-bg !default;
|
||||
|
||||
$pagination-hover-color: $body-color-dark !default;
|
||||
$pagination-hover-bg: darken($body-bg-dark, 10%) !default;
|
||||
$pagination-hover-border-color: darken($body-bg-dark, 10%) !default;
|
||||
|
||||
$pagination-active-bg: theme-color("primary") !default;
|
||||
$pagination-active-border-color: theme-color("primary") !default;
|
||||
|
||||
$pagination-disabled-bg: $white !default;
|
||||
$pagination-disabled-border-color: $white !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
$tooltip-bg: $brand-dark !default;
|
||||
$tooltip-padding-y: 4px !default;
|
||||
$tooltip-padding-x: 10px !default;
|
||||
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
$popover-inner-padding: 10px !default;
|
||||
$popover-border-color: $body-bg-dark !default;
|
||||
$popover-box-shadow: 0 15px 25px rgba(0,0,0,.05) !default;
|
||||
|
||||
$popover-header-bg: $white !default;
|
||||
$popover-header-padding-y: 12px !default;
|
||||
$popover-header-padding-x: 10px !default;
|
||||
|
||||
$popover-body-padding-y: 10px !default;
|
||||
$popover-body-padding-x: 10px !default;
|
||||
|
||||
|
||||
// Badges
|
||||
$badge-font-size: 85% !default;
|
||||
$badge-font-weight: 600 !default;
|
||||
$badge-padding-y: 3px !default;
|
||||
$badge-padding-x: 5px !default;
|
||||
|
||||
|
||||
// Modals
|
||||
$modal-inner-padding: $space-block !default;
|
||||
|
||||
$modal-content-border-width: 0 !default;
|
||||
$modal-content-box-shadow-xs: none !default;
|
||||
$modal-content-box-shadow-sm-up: none !default;
|
||||
|
||||
$modal-backdrop-opacity: .5 !default !default;
|
||||
$modal-header-border-color: $body-bg-dark !default;
|
||||
$modal-footer-border-color: $body-bg-dark !default;
|
||||
$modal-header-padding: $space-base !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
$alert-margin-bottom: $space-base !default;
|
||||
$alert-link-font-weight: 600 !default;
|
||||
$alert-border-width: 0 !default;
|
||||
|
||||
|
||||
// Progress bars
|
||||
$progress-height: 20px !default;
|
||||
$progress-font-size: 1rem !default;
|
||||
$progress-bar-bg: theme-color("primary") !default;
|
||||
|
||||
|
||||
// List group
|
||||
$list-group-border-color: $body-bg-dark !default;
|
||||
|
||||
$list-group-hover-bg: $body-bg-light !default;
|
||||
$list-group-active-color: $white !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border-color: theme-color("primary") !default;
|
||||
|
||||
$list-group-action-color: $body-color !default;
|
||||
$list-group-action-hover-color: $body-color !default;
|
||||
|
||||
$list-group-action-active-color: $body-color !default;
|
||||
$list-group-action-active-bg: $body-bg-dark !default;
|
||||
|
||||
|
||||
// Breadcrumbs
|
||||
$breadcrumb-padding-y: 9px !default;
|
||||
$breadcrumb-padding-x: 14px !default;
|
||||
|
||||
$breadcrumb-bg: $body-bg !default;
|
||||
$breadcrumb-active-color: $body-color-dark !default;
|
||||
@@ -0,0 +1,177 @@
|
||||
//
|
||||
// Codebase themes variables
|
||||
// --------------------------------------------------
|
||||
|
||||
// Elegance Theme
|
||||
$theme-elegance-primary: #d262e3 !default;
|
||||
$theme-elegance-light: lighten($theme-elegance-primary, 12%) !default;
|
||||
$theme-elegance-lighter: lighten($theme-elegance-primary, 22%) !default;
|
||||
$theme-elegance-dark: #403537 !default;
|
||||
$theme-elegance-darker: #332a2c !default;
|
||||
|
||||
$theme-elegance-body-bg: #f4f2f5 !default;
|
||||
$theme-elegance-body-bg-dark: darken($theme-elegance-body-bg, 4%) !default;
|
||||
$theme-elegance-body-bg-light: lighten($theme-elegance-body-bg, 2%) !default;
|
||||
|
||||
$theme-elegance-body-color: $body-color !default;
|
||||
$theme-elegance-body-color-dark: $body-color-dark !default;
|
||||
$theme-elegance-body-color-light: $theme-elegance-body-bg-dark !default;
|
||||
|
||||
$theme-elegance-link-color: $theme-elegance-primary !default;
|
||||
$theme-elegance-link-hover-color: darken($theme-elegance-primary, 20%) !default;
|
||||
|
||||
$theme-elegance-headings-color: $theme-elegance-body-color-dark !default;
|
||||
$theme-elegance-headings-small-color: lighten($theme-elegance-body-color-dark, 30%) !default;
|
||||
|
||||
$theme-elegance-header-bg: $white !default;
|
||||
$theme-elegance-header-inverse-bg: $theme-elegance-dark !default;
|
||||
$theme-elegance-sidebar-bg: $white !default;
|
||||
$theme-elegance-sidebar-inverse-bg: $theme-elegance-dark !default;
|
||||
$theme-elegance-side-overlay-bg: $white !default;
|
||||
|
||||
$theme-elegance-input-color: $theme-elegance-body-color !default;
|
||||
$theme-elegance-input-focus-color: $theme-elegance-body-color-dark !default;
|
||||
$theme-elegance-input-border-color: darken($theme-elegance-body-bg-dark, 5%) !default;
|
||||
$theme-elegance-input-focus-border-color: darken($theme-elegance-body-bg-dark, 25%) !default;
|
||||
$theme-elegance-input-bg: $white !default;
|
||||
$theme-elegance-input-focus-bg: $white !default;
|
||||
|
||||
|
||||
// Pulse Theme
|
||||
$theme-pulse-primary: #e74c3c !default;
|
||||
$theme-pulse-light: lighten($theme-pulse-primary, 8%) !default;
|
||||
$theme-pulse-lighter: lighten($theme-pulse-primary, 22%) !default;
|
||||
$theme-pulse-dark: #383838 !default;
|
||||
$theme-pulse-darker: #232323 !default;
|
||||
|
||||
$theme-pulse-body-bg: #f2f2f2 !default;
|
||||
$theme-pulse-body-bg-dark: darken($theme-pulse-body-bg, 4%) !default;
|
||||
$theme-pulse-body-bg-light: lighten($theme-pulse-body-bg, 2%) !default;
|
||||
|
||||
$theme-pulse-body-color: $body-color !default;
|
||||
$theme-pulse-body-color-dark: $body-color-dark !default;
|
||||
$theme-pulse-body-color-light: $theme-pulse-body-bg-dark !default;
|
||||
|
||||
$theme-pulse-link-color: $theme-pulse-primary !default;
|
||||
$theme-pulse-link-hover-color: darken($theme-pulse-primary, 20%) !default;
|
||||
|
||||
$theme-pulse-headings-color: $theme-pulse-body-color-dark !default;
|
||||
$theme-pulse-headings-small-color: lighten($theme-pulse-body-color-dark, 30%) !default;
|
||||
|
||||
$theme-pulse-header-bg: $white !default;
|
||||
$theme-pulse-header-inverse-bg: $theme-pulse-dark !default;
|
||||
$theme-pulse-sidebar-bg: $white !default;
|
||||
$theme-pulse-sidebar-inverse-bg: $theme-pulse-dark !default;
|
||||
$theme-pulse-side-overlay-bg: $white !default;
|
||||
|
||||
$theme-pulse-input-color: $theme-pulse-body-color !default;
|
||||
$theme-pulse-input-focus-color: $theme-pulse-body-color-dark !default;
|
||||
$theme-pulse-input-border-color: darken($theme-pulse-body-bg-dark, 5%) !default;
|
||||
$theme-pulse-input-focus-border-color: darken($theme-pulse-body-bg-dark, 25%) !default;
|
||||
$theme-pulse-input-bg: $white !default;
|
||||
$theme-pulse-input-focus-bg: $white !default;
|
||||
|
||||
|
||||
// Flat Theme
|
||||
$theme-flat-primary: #70b29c !default;
|
||||
$theme-flat-light: lighten($theme-flat-primary, 18%) !default;
|
||||
$theme-flat-lighter: lighten($theme-flat-primary, 28%) !default;
|
||||
$theme-flat-dark: #113f4c !default;
|
||||
$theme-flat-darker: #0b2830 !default;
|
||||
|
||||
$theme-flat-body-bg: #f2f5f5 !default;
|
||||
$theme-flat-body-bg-dark: darken($theme-flat-body-bg, 4%) !default;
|
||||
$theme-flat-body-bg-light: lighten($theme-flat-body-bg, 2%) !default;
|
||||
|
||||
$theme-flat-body-color: $body-color !default;
|
||||
$theme-flat-body-color-dark: $body-color-dark !default;
|
||||
$theme-flat-body-color-light: $theme-flat-body-bg-dark !default;
|
||||
|
||||
$theme-flat-link-color: $theme-flat-primary !default;
|
||||
$theme-flat-link-hover-color: darken($theme-flat-primary, 20%) !default;
|
||||
|
||||
$theme-flat-headings-color: $theme-flat-body-color-dark !default;
|
||||
$theme-flat-headings-small-color: lighten($theme-flat-body-color-dark, 30%) !default;
|
||||
|
||||
$theme-flat-header-bg: $white !default;
|
||||
$theme-flat-header-inverse-bg: $theme-flat-dark !default;
|
||||
$theme-flat-sidebar-bg: $white !default;
|
||||
$theme-flat-sidebar-inverse-bg: $theme-flat-dark !default;
|
||||
$theme-flat-side-overlay-bg: $white !default;
|
||||
|
||||
$theme-flat-input-color: $theme-flat-body-color !default;
|
||||
$theme-flat-input-focus-color: $theme-flat-body-color-dark !default;
|
||||
$theme-flat-input-border-color: darken($theme-flat-body-bg-dark, 5%) !default;
|
||||
$theme-flat-input-focus-border-color: darken($theme-flat-body-bg-dark, 25%) !default;
|
||||
$theme-flat-input-bg: $white !default;
|
||||
$theme-flat-input-focus-bg: $white !default;
|
||||
|
||||
|
||||
// Corporate Theme
|
||||
$theme-corporate-primary: #2facb2 !default;
|
||||
$theme-corporate-light: lighten($theme-corporate-primary, 15%) !default;
|
||||
$theme-corporate-lighter: lighten($theme-corporate-primary, 45%) !default;
|
||||
$theme-corporate-dark: #323d4c !default;
|
||||
$theme-corporate-darker: #252d38 !default;
|
||||
|
||||
$theme-corporate-body-bg: #f2f5f5 !default;
|
||||
$theme-corporate-body-bg-dark: darken($theme-corporate-body-bg, 4%) !default;
|
||||
$theme-corporate-body-bg-light: lighten($theme-corporate-body-bg, 2%) !default;
|
||||
|
||||
$theme-corporate-body-color: $body-color !default;
|
||||
$theme-corporate-body-color-dark: $body-color-dark !default;
|
||||
$theme-corporate-body-color-light: $theme-corporate-body-bg-dark !default;
|
||||
|
||||
$theme-corporate-link-color: $theme-corporate-primary !default;
|
||||
$theme-corporate-link-hover-color: darken($theme-corporate-primary, 20%) !default;
|
||||
|
||||
$theme-corporate-headings-color: $theme-corporate-body-color-dark !default;
|
||||
$theme-corporate-headings-small-color: lighten($theme-corporate-body-color-dark, 30%) !default;
|
||||
|
||||
$theme-corporate-header-bg: $white !default;
|
||||
$theme-corporate-header-inverse-bg: $theme-corporate-dark !default;
|
||||
$theme-corporate-sidebar-bg: $white !default;
|
||||
$theme-corporate-sidebar-inverse-bg: $theme-corporate-dark !default;
|
||||
$theme-corporate-side-overlay-bg: $white !default;
|
||||
|
||||
$theme-corporate-input-color: $theme-corporate-body-color !default;
|
||||
$theme-corporate-input-focus-color: $theme-corporate-body-color-dark !default;
|
||||
$theme-corporate-input-border-color: darken($theme-corporate-body-bg-dark, 5%) !default;
|
||||
$theme-corporate-input-focus-border-color: darken($theme-corporate-body-bg-dark, 25%) !default;
|
||||
$theme-corporate-input-bg: $white !default;
|
||||
$theme-corporate-input-focus-bg: $white !default;
|
||||
|
||||
|
||||
// Earth Theme
|
||||
$theme-earth-primary: #6eab4d !default;
|
||||
$theme-earth-light: lighten($theme-earth-primary, 18%) !default;
|
||||
$theme-earth-lighter: lighten($theme-earth-primary, 42%) !default;
|
||||
$theme-earth-dark: #424242 !default;
|
||||
$theme-earth-darker: #222 !default;
|
||||
|
||||
$theme-earth-body-bg: #f2f2f2 !default;
|
||||
$theme-earth-body-bg-dark: darken($theme-earth-body-bg, 4%) !default;
|
||||
$theme-earth-body-bg-light: lighten($theme-earth-body-bg, 2%) !default;
|
||||
|
||||
$theme-earth-body-color: $body-color !default;
|
||||
$theme-earth-body-color-dark: $body-color-dark !default;
|
||||
$theme-earth-body-color-light: $theme-earth-body-bg-dark !default;
|
||||
|
||||
$theme-earth-link-color: $theme-earth-primary !default;
|
||||
$theme-earth-link-hover-color: darken($theme-earth-primary, 20%) !default;
|
||||
|
||||
$theme-earth-headings-color: $theme-earth-body-color-dark !default;
|
||||
$theme-earth-headings-small-color: lighten($theme-earth-body-color-dark, 30%) !default;
|
||||
|
||||
$theme-earth-header-bg: $white !default;
|
||||
$theme-earth-header-inverse-bg: $theme-earth-dark !default;
|
||||
$theme-earth-sidebar-bg: $white !default;
|
||||
$theme-earth-sidebar-inverse-bg: $theme-earth-dark !default;
|
||||
$theme-earth-side-overlay-bg: $white !default;
|
||||
|
||||
$theme-earth-input-color: $theme-earth-body-color !default;
|
||||
$theme-earth-input-focus-color: $theme-earth-body-color-dark !default;
|
||||
$theme-earth-input-border-color: darken($theme-earth-body-bg-dark, 5%) !default;
|
||||
$theme-earth-input-focus-border-color: darken($theme-earth-body-bg-dark, 25%) !default;
|
||||
$theme-earth-input-bg: $white !default;
|
||||
$theme-earth-input-focus-bg: $white !default;
|
||||
@@ -0,0 +1,191 @@
|
||||
//
|
||||
// Codebase variables and Bootstrap overrides
|
||||
// --------------------------------------------------
|
||||
|
||||
// Colors
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$gray-lighter: $gray-100 !default;
|
||||
$gray-light: $gray-200 !default;
|
||||
$gray: $gray-400 !default;
|
||||
$gray-dark: $gray-600 !default;
|
||||
$gray-darker: $gray-800 !default;
|
||||
|
||||
$brand-primary: #3f9ce8 !default;
|
||||
$brand-light: lighten($brand-primary, 15%) !default;
|
||||
$brand-lighter: lighten($brand-primary, 30%) !default;
|
||||
$brand-dark: $gray-800 !default;
|
||||
$brand-darker: $gray-900 !default;
|
||||
|
||||
$brand-success: #9ccc65 !default;
|
||||
$brand-success-light: #ebf5df !default;
|
||||
$brand-info: #26c6da !default;
|
||||
$brand-info-light: #e3f4fc !default;
|
||||
$brand-warning: #ffca28 !default;
|
||||
$brand-warning-light: #fcf7e6 !default;
|
||||
$brand-danger: #ef5350 !default;
|
||||
$brand-danger-light: #fae9e8 !default;
|
||||
$brand-inverse: $brand-dark !default;
|
||||
|
||||
|
||||
// Scaffolding
|
||||
$body-bg: #f0f2f5 !default;
|
||||
$body-bg-dark: darken($body-bg, 4%) !default;
|
||||
$body-bg-light: lighten($body-bg, 2%) !default;
|
||||
|
||||
$body-color: #575757 !default;
|
||||
$body-color-dark: #171717 !default;
|
||||
$body-color-light: $body-bg-dark !default;
|
||||
|
||||
$link-color: $brand-primary !default;
|
||||
$link-hover-color: darken($link-color, 20%) !default;
|
||||
$link-hover-decoration: none !default;
|
||||
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "Muli", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
|
||||
$font-family-fontawesome: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
|
||||
|
||||
$font-size-root: 14px !default;
|
||||
$font-size-base: 1rem !default;
|
||||
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$h1-font-size: 2.571428571rem !default; // 36px (with 14px base)
|
||||
$h2-font-size: 2.142857142rem !default; // 30px (with 14px base)
|
||||
$h3-font-size: 1.857142857rem !default; // 26px (with 14px base)
|
||||
$h4-font-size: 1.571428571rem !default; // 22px (with 14px base)
|
||||
$h5-font-size: 1.285714286rem !default; // 18px (with 14px base)
|
||||
$h6-font-size: 1rem !default;
|
||||
|
||||
$font-size-xl: 1.428571429rem !default; // 20px (with 14px base)
|
||||
$font-size-lg: 1.285714286rem !default; // 18px (with 14px base)
|
||||
$font-size-md: 1.142857143rem !default; // 16px (with 14px base)
|
||||
$font-size-sm: 0.928571429rem !default; // 13px (with 14px base)
|
||||
$font-size-xs: 0.857142857rem !default; // 12px (with 14px base)
|
||||
|
||||
$headings-margin-bottom: 20px !default;
|
||||
$headings-font-family: $font-family-base !default;
|
||||
$headings-font-weight: 600 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: $body-color-dark !default;
|
||||
$headings-small-color: lighten($body-color-dark, 30%) !default;
|
||||
|
||||
|
||||
// Z-index master list additions
|
||||
$zindex-block-pinned: 1031 !default;
|
||||
$zindex-sidebar: 1032 !default;
|
||||
$zindex-page-overlay: 1033 !default;
|
||||
$zindex-side-overlay: 1034 !default;
|
||||
$zindex-block-fullscreen: 1035 !default;
|
||||
|
||||
|
||||
// Pagination, Buttons and Forms
|
||||
$pbf-height: 34px !default;
|
||||
$pbf-height-sm: 28px !default;
|
||||
$pbf-height-lg: 40px !default;
|
||||
|
||||
$pbf-line-height: 16px !default;
|
||||
$pbf-line-height-sm: 16px !default;
|
||||
$pbf-line-height-lg: 20px !default;
|
||||
|
||||
$pbf-font-size: $font-size-base !default;
|
||||
$pbf-font-size-sm: $font-size-base !default;
|
||||
$pbf-font-size-lg: $font-size-md !default;
|
||||
|
||||
$pbf-padding-y: ($pbf-height - $pbf-line-height - 2px) / 2 !default;
|
||||
$pbf-padding-y-sm: ($pbf-height-sm - $pbf-line-height-sm - 2px) / 2 !default;
|
||||
$pbf-padding-y-lg: ($pbf-height-lg - $pbf-line-height-lg - 2px) / 2 !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
$btn-hero-padding-x: 38px !default;
|
||||
$btn-hero-padding-y: 14px !default;
|
||||
$btn-hero-padding-x-sm: 34px !default;
|
||||
$btn-hero-padding-y-sm: 11px !default;
|
||||
$btn-hero-padding-x-lg: 42px !default;
|
||||
$btn-hero-padding-y-lg: 15px !default;
|
||||
|
||||
|
||||
// Header
|
||||
$header-height: 68px !default; // Best values > 50px and < 80px
|
||||
$header-bg: $white !default;
|
||||
$header-inverse-bg: $brand-dark !default;
|
||||
|
||||
|
||||
// Sidebar and Side Overlay
|
||||
$sidebar-bg: $white !default;
|
||||
$sidebar-inverse-bg: $brand-dark !default;
|
||||
$sidebar-width: 230px !default;
|
||||
$sidebar-mini-width: 54px !default;
|
||||
|
||||
$side-overlay-bg: $white !default;
|
||||
$side-overlay-width: 320px !default;
|
||||
|
||||
$side-transition: .26s cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
|
||||
$main-nav-transition: .2s cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
|
||||
|
||||
|
||||
// Layout Spaces
|
||||
$space-base: 24px !default; // Content padding
|
||||
$space-mobile: 12px !default; // Content padding in mobile
|
||||
$space-side: 18px !default; // Content padding in side sections
|
||||
$space-row-gutter-tiny: 6px !default; // Row with tiny gutter, even number: 2, 4, 6.. etc
|
||||
$space-block: 20px !default; // Block padding
|
||||
$space-boxed: 1200px !default; // Boxed content max width
|
||||
$space-narrow: 92% !default; // Narrow content max width
|
||||
$space-breaks: (
|
||||
5: (
|
||||
x: 5px,
|
||||
y: 5px
|
||||
),
|
||||
10: (
|
||||
x: 10px,
|
||||
y: 10px
|
||||
),
|
||||
15: (
|
||||
x: 15px,
|
||||
y: 15px
|
||||
),
|
||||
20: (
|
||||
x: 20px,
|
||||
y: 20px
|
||||
),
|
||||
30: (
|
||||
x: 30px,
|
||||
y: 30px
|
||||
),
|
||||
50: (
|
||||
x: 50px,
|
||||
y: 50px
|
||||
),
|
||||
100: (
|
||||
x: 100px,
|
||||
y: 100px
|
||||
),
|
||||
150: (
|
||||
x: 150px,
|
||||
y: 150px
|
||||
),
|
||||
200: (
|
||||
x: 200px,
|
||||
y: 200px
|
||||
),
|
||||
300: (
|
||||
x: 300px,
|
||||
y: 300px
|
||||
)
|
||||
) !default;
|
||||
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// Backgrounds
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin bg-gradient-variant($parent, $deg, $color1, $color2) {
|
||||
#{$parent} {
|
||||
background: $color1;
|
||||
background: linear-gradient($deg, $color1 0%, $color2 100%) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
//
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-variant($background, $border, $active-background: darken($background, 12%), $active-border: darken($border, 22%)) {
|
||||
$border-default: darken($border, 12%);
|
||||
|
||||
color: color-yiq($background);
|
||||
background-color: $background;
|
||||
border-color: $border-default;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: color-yiq($background);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $background;
|
||||
border-color: $border-default;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background-color: $background;
|
||||
border-color: $border-default;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-color: $active-background;
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&.btn-noborder {
|
||||
border-color: $background;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: $active-background;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
border-color: $background;
|
||||
}
|
||||
|
||||
.show > &.dropdown-toggle {
|
||||
border-color: $active-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color, $color-hover: #fff) {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&.btn-noborder {
|
||||
border-color: transparent;
|
||||
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-alt-variant($color, $background) {
|
||||
$active-color: darken($color, 25%);
|
||||
$active-background: darken($background, 10%);
|
||||
|
||||
color: $active-color;
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-background;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
color: $active-color;
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-background;
|
||||
}
|
||||
}
|
||||
|
||||
// Used for buttons that adapt to light/dark header and sidebar variations
|
||||
@mixin button-dual-variant($color, $background) {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
//
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin content-layout($x, $y, $overflow: visible) {
|
||||
margin: 0 auto;
|
||||
padding: $y $x 1px;
|
||||
width: 100%;
|
||||
overflow-x: $overflow;
|
||||
|
||||
.pull-t {
|
||||
margin-top: -$y;
|
||||
}
|
||||
|
||||
.pull-b {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.pull-t-b {
|
||||
margin-top: -$y;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.pull-r-l {
|
||||
margin-right: -$x;
|
||||
margin-left: -$x;
|
||||
}
|
||||
|
||||
.pull-all {
|
||||
margin: (-$y) (-$x) (-1px);
|
||||
}
|
||||
|
||||
@at-root {
|
||||
#{&}#{&}-full {
|
||||
padding-bottom: $y;
|
||||
|
||||
.pull-b,
|
||||
.pull-t-b,
|
||||
.pull-all {
|
||||
margin-bottom: -$y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
.push,
|
||||
.block,
|
||||
.items-push > div {
|
||||
margin-bottom: $y;
|
||||
}
|
||||
|
||||
.items-push-2x > div {
|
||||
margin-bottom: $y*2;
|
||||
}
|
||||
|
||||
.items-push-3x > div {
|
||||
margin-bottom: $y*3;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
//
|
||||
// Forms
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin form-validation-state($state, $color) {
|
||||
.#{$state}-feedback {
|
||||
display: none;
|
||||
margin-top: .25rem;
|
||||
font-size: .875rem;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.#{$state}-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
width: 250px;
|
||||
padding: .5rem;
|
||||
margin-top: .1rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
background-color: rgba($color,.8);
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.custom-select {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
border-color: $color;
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
+ .form-check-label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom radios and checks
|
||||
.custom-control-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-control-label {
|
||||
color: $color;
|
||||
|
||||
&::before {
|
||||
background-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
@include gradient-bg(lighten($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom file
|
||||
.custom-file-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
|
||||
&::before { border-color: inherit; }
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom
|
||||
.is-#{$state} {
|
||||
.form-control {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
.form-check-input ~ .form-check-label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.custom-control-input ~ .custom-control-label {
|
||||
color: $color;
|
||||
|
||||
&::before {
|
||||
background-color: rgba($color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$state}-feedback,
|
||||
.#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin form-control-material-focus-variant($color) {
|
||||
&:focus {
|
||||
box-shadow: 0 2px $color;
|
||||
|
||||
+ label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
~ .input-group-append {
|
||||
color: $color;
|
||||
box-shadow: 0 2px $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin form-validation-state-material($state, $color) {
|
||||
.is-#{$state} .form-material {
|
||||
> .form-control {
|
||||
box-shadow: 0 1px 0 $color;
|
||||
|
||||
~ .input-group-append {
|
||||
color: $color;
|
||||
box-shadow: 0 1px 0 $color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 2px $color;
|
||||
|
||||
+ label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
~ .input-group-append {
|
||||
color: $color;
|
||||
box-shadow: 0 2px $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
~ .invalid-feedback,
|
||||
~ .invalid-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
//
|
||||
// Ribbon
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ribbon-variation($color) {
|
||||
.ribbon-box {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&.ribbon-bookmark {
|
||||
.ribbon-box::before {
|
||||
border-color: $color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&.ribbon-left .ribbon-box::before {
|
||||
border-color: $color;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-modern {
|
||||
.ribbon-box::before {
|
||||
border-color: $color;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&.ribbon-bottom .ribbon-box::before {
|
||||
border-color: $color;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&.ribbon-left .ribbon-box::before {
|
||||
border-color: $color;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&.ribbon-left.ribbon-bottom .ribbon-box::before {
|
||||
border-color: $color;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// Text emphasis
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin text-emphasis-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
a#{$parent} {
|
||||
&.link-effect::before {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
color: darken($color, 20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,11 @@
|
||||
//
|
||||
// Vertical align
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin vertical-align($top: 50%, $right: auto, $left: auto, $transX: 0, $transY: -50%) {
|
||||
position: absolute;
|
||||
top: $top;
|
||||
right: $right;
|
||||
left: $left;
|
||||
transform: translateX($transX) translateY($transY);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// Color Theme - Corporate
|
||||
// --------------------------------------------------
|
||||
|
||||
// Bootstrap functions (original)
|
||||
@import '../../bootstrap/functions';
|
||||
|
||||
// Codebase variables and Bootstrap variable overrides
|
||||
@import '../variables';
|
||||
@import '../variables-themes';
|
||||
@import '../variables-bootstrap';
|
||||
|
||||
// Bootstrap variables and mixins (original)
|
||||
@import '../../bootstrap/variables';
|
||||
@import '../../bootstrap/mixins';
|
||||
|
||||
// Codebase mixins and Bootstrap overrides
|
||||
@import '../mixins';
|
||||
|
||||
// Generate color theme
|
||||
@include color-theme($theme-corporate-primary,
|
||||
$theme-corporate-light,
|
||||
$theme-corporate-lighter,
|
||||
$theme-corporate-dark,
|
||||
$theme-corporate-darker,
|
||||
$theme-corporate-body-bg,
|
||||
$theme-corporate-body-bg-dark,
|
||||
$theme-corporate-body-bg-light,
|
||||
$theme-corporate-body-color,
|
||||
$theme-corporate-body-color-dark,
|
||||
$theme-corporate-body-color-light,
|
||||
$theme-corporate-link-color,
|
||||
$theme-corporate-link-hover-color,
|
||||
$theme-corporate-headings-color,
|
||||
$theme-corporate-headings-small-color,
|
||||
$theme-corporate-header-bg,
|
||||
$theme-corporate-header-inverse-bg,
|
||||
$theme-corporate-sidebar-bg,
|
||||
$theme-corporate-sidebar-inverse-bg,
|
||||
$theme-corporate-side-overlay-bg,
|
||||
$theme-corporate-input-color,
|
||||
$theme-corporate-input-focus-color,
|
||||
$theme-corporate-input-border-color,
|
||||
$theme-corporate-input-focus-border-color,
|
||||
$theme-corporate-input-bg,
|
||||
$theme-corporate-input-focus-bg);
|
||||
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// Color Theme - Earth
|
||||
// --------------------------------------------------
|
||||
|
||||
// Bootstrap functions (original)
|
||||
@import '../../bootstrap/functions';
|
||||
|
||||
// Codebase variables and Bootstrap variable overrides
|
||||
@import '../variables';
|
||||
@import '../variables-themes';
|
||||
@import '../variables-bootstrap';
|
||||
|
||||
// Bootstrap variables and mixins (original)
|
||||
@import '../../bootstrap/variables';
|
||||
@import '../../bootstrap/mixins';
|
||||
|
||||
// Codebase mixins and Bootstrap overrides
|
||||
@import '../mixins';
|
||||
|
||||
// Generate color theme
|
||||
@include color-theme($theme-earth-primary,
|
||||
$theme-earth-light,
|
||||
$theme-earth-lighter,
|
||||
$theme-earth-dark,
|
||||
$theme-earth-darker,
|
||||
$theme-earth-body-bg,
|
||||
$theme-earth-body-bg-dark,
|
||||
$theme-earth-body-bg-light,
|
||||
$theme-earth-body-color,
|
||||
$theme-earth-body-color-dark,
|
||||
$theme-earth-body-color-light,
|
||||
$theme-earth-link-color,
|
||||
$theme-earth-link-hover-color,
|
||||
$theme-earth-headings-color,
|
||||
$theme-earth-headings-small-color,
|
||||
$theme-earth-header-bg,
|
||||
$theme-earth-header-inverse-bg,
|
||||
$theme-earth-sidebar-bg,
|
||||
$theme-earth-sidebar-inverse-bg,
|
||||
$theme-earth-side-overlay-bg,
|
||||
$theme-earth-input-color,
|
||||
$theme-earth-input-focus-color,
|
||||
$theme-earth-input-border-color,
|
||||
$theme-earth-input-focus-border-color,
|
||||
$theme-earth-input-bg,
|
||||
$theme-earth-input-focus-bg);
|
||||
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// Color Theme - Elegance
|
||||
// --------------------------------------------------
|
||||
|
||||
// Bootstrap functions (original)
|
||||
@import '../../bootstrap/functions';
|
||||
|
||||
// Codebase variables and Bootstrap variable overrides
|
||||
@import '../variables';
|
||||
@import '../variables-themes';
|
||||
@import '../variables-bootstrap';
|
||||
|
||||
// Bootstrap variables and mixins (original)
|
||||
@import '../../bootstrap/variables';
|
||||
@import '../../bootstrap/mixins';
|
||||
|
||||
// Codebase mixins and Bootstrap overrides
|
||||
@import '../mixins';
|
||||
|
||||
// Generate color theme
|
||||
@include color-theme($theme-elegance-primary,
|
||||
$theme-elegance-light,
|
||||
$theme-elegance-lighter,
|
||||
$theme-elegance-dark,
|
||||
$theme-elegance-darker,
|
||||
$theme-elegance-body-bg,
|
||||
$theme-elegance-body-bg-dark,
|
||||
$theme-elegance-body-bg-light,
|
||||
$theme-elegance-body-color,
|
||||
$theme-elegance-body-color-dark,
|
||||
$theme-elegance-body-color-light,
|
||||
$theme-elegance-link-color,
|
||||
$theme-elegance-link-hover-color,
|
||||
$theme-elegance-headings-color,
|
||||
$theme-elegance-headings-small-color,
|
||||
$theme-elegance-header-bg,
|
||||
$theme-elegance-header-inverse-bg,
|
||||
$theme-elegance-sidebar-bg,
|
||||
$theme-elegance-sidebar-inverse-bg,
|
||||
$theme-elegance-side-overlay-bg,
|
||||
$theme-elegance-input-color,
|
||||
$theme-elegance-input-focus-color,
|
||||
$theme-elegance-input-border-color,
|
||||
$theme-elegance-input-focus-border-color,
|
||||
$theme-elegance-input-bg,
|
||||
$theme-elegance-input-focus-bg);
|
||||
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// Color Theme - Flat
|
||||
// --------------------------------------------------
|
||||
|
||||
// Bootstrap functions (original)
|
||||
@import '../../bootstrap/functions';
|
||||
|
||||
// Codebase variables and Bootstrap variable overrides
|
||||
@import '../variables';
|
||||
@import '../variables-themes';
|
||||
@import '../variables-bootstrap';
|
||||
|
||||
// Bootstrap variables and mixins (original)
|
||||
@import '../../bootstrap/variables';
|
||||
@import '../../bootstrap/mixins';
|
||||
|
||||
// Codebase mixins and Bootstrap overrides
|
||||
@import '../mixins';
|
||||
|
||||
// Generate color theme
|
||||
@include color-theme($theme-flat-primary,
|
||||
$theme-flat-light,
|
||||
$theme-flat-lighter,
|
||||
$theme-flat-dark,
|
||||
$theme-flat-darker,
|
||||
$theme-flat-body-bg,
|
||||
$theme-flat-body-bg-dark,
|
||||
$theme-flat-body-bg-light,
|
||||
$theme-flat-body-color,
|
||||
$theme-flat-body-color-dark,
|
||||
$theme-flat-body-color-light,
|
||||
$theme-flat-link-color,
|
||||
$theme-flat-link-hover-color,
|
||||
$theme-flat-headings-color,
|
||||
$theme-flat-headings-small-color,
|
||||
$theme-flat-header-bg,
|
||||
$theme-flat-header-inverse-bg,
|
||||
$theme-flat-sidebar-bg,
|
||||
$theme-flat-sidebar-inverse-bg,
|
||||
$theme-flat-side-overlay-bg,
|
||||
$theme-flat-input-color,
|
||||
$theme-flat-input-focus-color,
|
||||
$theme-flat-input-border-color,
|
||||
$theme-flat-input-focus-border-color,
|
||||
$theme-flat-input-bg,
|
||||
$theme-flat-input-focus-bg);
|
||||
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// Color Theme - Pulse
|
||||
// --------------------------------------------------
|
||||
|
||||
// Bootstrap functions (original)
|
||||
@import '../../bootstrap/functions';
|
||||
|
||||
// Codebase variables and Bootstrap variable overrides
|
||||
@import '../variables';
|
||||
@import '../variables-themes';
|
||||
@import '../variables-bootstrap';
|
||||
|
||||
// Bootstrap variables and mixins (original)
|
||||
@import '../../bootstrap/variables';
|
||||
@import '../../bootstrap/mixins';
|
||||
|
||||
// Codebase mixins and Bootstrap overrides
|
||||
@import '../mixins';
|
||||
|
||||
// Generate color theme
|
||||
@include color-theme($theme-pulse-primary,
|
||||
$theme-pulse-light,
|
||||
$theme-pulse-lighter,
|
||||
$theme-pulse-dark,
|
||||
$theme-pulse-darker,
|
||||
$theme-pulse-body-bg,
|
||||
$theme-pulse-body-bg-dark,
|
||||
$theme-pulse-body-bg-light,
|
||||
$theme-pulse-body-color,
|
||||
$theme-pulse-body-color-dark,
|
||||
$theme-pulse-body-color-light,
|
||||
$theme-pulse-link-color,
|
||||
$theme-pulse-link-hover-color,
|
||||
$theme-pulse-headings-color,
|
||||
$theme-pulse-headings-small-color,
|
||||
$theme-pulse-header-bg,
|
||||
$theme-pulse-header-inverse-bg,
|
||||
$theme-pulse-sidebar-bg,
|
||||
$theme-pulse-sidebar-inverse-bg,
|
||||
$theme-pulse-side-overlay-bg,
|
||||
$theme-pulse-input-color,
|
||||
$theme-pulse-input-focus-color,
|
||||
$theme-pulse-input-border-color,
|
||||
$theme-pulse-input-focus-border-color,
|
||||
$theme-pulse-input-bg,
|
||||
$theme-pulse-input-focus-bg);
|
||||
@@ -0,0 +1,128 @@
|
||||
//
|
||||
// Background
|
||||
// --------------------------------------------------
|
||||
|
||||
// Contextual colors
|
||||
@include bg-variant('.bg-primary-op', rgba($brand-primary, .75));
|
||||
@include bg-variant('.bg-primary-dark', $brand-dark);
|
||||
@include bg-variant('.bg-primary-dark-op', rgba($brand-dark, .8));
|
||||
@include bg-variant('.bg-primary-darker', $brand-darker);
|
||||
@include bg-variant('.bg-primary-light', $brand-light);
|
||||
@include bg-variant('.bg-primary-lighter', $brand-lighter);
|
||||
@include bg-variant('.bg-body', $body-bg);
|
||||
@include bg-variant('.bg-body-light', $body-bg-light);
|
||||
@include bg-variant('.bg-body-dark', $body-bg-dark);
|
||||
@include bg-variant('.bg-muted', $gray-dark);
|
||||
@include bg-variant('.bg-success-light ', $brand-success-light);
|
||||
@include bg-variant('.bg-warning-light ', $brand-warning-light);
|
||||
@include bg-variant('.bg-info-light ', $brand-info-light);
|
||||
@include bg-variant('.bg-danger-light ', $brand-danger-light);
|
||||
@include bg-variant('.bg-white', $white);
|
||||
@include bg-variant('.bg-black', $black);
|
||||
@include bg-variant('.bg-gray', $gray);
|
||||
@include bg-variant('.bg-gray-dark', $gray-dark);
|
||||
@include bg-variant('.bg-gray-darker', $gray-darker);
|
||||
@include bg-variant('.bg-gray-light', $gray-light);
|
||||
@include bg-variant('.bg-gray-lighter', $gray-lighter);
|
||||
|
||||
// Gradients
|
||||
@include bg-gradient-variant('.bg-gd-primary', 135deg, darken($brand-primary, 15%), lighten($brand-primary, 5%));
|
||||
@include bg-gradient-variant('.bg-gd-dusk', 135deg, $theme-elegance-primary, $brand-primary);
|
||||
@include bg-gradient-variant('.bg-gd-cherry', 135deg, lighten($theme-pulse-primary, 5%), darken($theme-pulse-primary, 10%));
|
||||
@include bg-gradient-variant('.bg-gd-aqua', 135deg, $theme-corporate-primary, $theme-flat-primary);
|
||||
@include bg-gradient-variant('.bg-gd-emerald', 135deg, $theme-earth-primary, $theme-corporate-primary);
|
||||
@include bg-gradient-variant('.bg-gd-sea', 135deg, darken($brand-primary, 7%), $brand-info);
|
||||
@include bg-gradient-variant('.bg-gd-leaf', 135deg, $brand-warning, $brand-success);
|
||||
@include bg-gradient-variant('.bg-gd-lake', 135deg, $brand-info, $brand-success);
|
||||
@include bg-gradient-variant('.bg-gd-sun', 135deg, $brand-danger, $brand-warning);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-light', 0deg, $body-bg-light, $white);
|
||||
|
||||
// Black/White with opacity
|
||||
.bg-black-op {
|
||||
background-color: rgba(0,0,0,.5) !important;
|
||||
|
||||
&-5 {
|
||||
background-color: rgba(0,0,0,.05) !important;
|
||||
}
|
||||
|
||||
&-10 {
|
||||
background-color: rgba(0,0,0,.1) !important;
|
||||
}
|
||||
|
||||
&-25 {
|
||||
background-color: rgba(0,0,0,.25) !important;
|
||||
}
|
||||
|
||||
&-75 {
|
||||
background-color: rgba(0,0,0,.75) !important;
|
||||
}
|
||||
|
||||
&-90 {
|
||||
background-color: rgba(0,0,0,.9) !important;
|
||||
}
|
||||
|
||||
&-95 {
|
||||
background-color: rgba(0,0,0,.95) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-white-op {
|
||||
background-color: rgba(255,255,255,.5) !important;
|
||||
|
||||
&-5 {
|
||||
background-color: rgba(255,255,255,.05) !important;
|
||||
}
|
||||
|
||||
&-10 {
|
||||
background-color: rgba(255,255,255,.1) !important;
|
||||
}
|
||||
|
||||
&-25 {
|
||||
background-color: rgba(255,255,255,.25) !important;
|
||||
}
|
||||
|
||||
&-75 {
|
||||
background-color: rgba(255,255,255,.75) !important;
|
||||
}
|
||||
|
||||
&-90 {
|
||||
background-color: rgba(255,255,255,.9) !important;
|
||||
}
|
||||
|
||||
&-95 {
|
||||
background-color: rgba(255,255,255,.95) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Image Background
|
||||
.bg-image {
|
||||
background-color: $gray-lighter;
|
||||
background-position: 0% 50%;
|
||||
background-size: cover;
|
||||
|
||||
&-top {
|
||||
background-position-y: 0%;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
background-position-y: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&-fixed {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern Image
|
||||
.bg-pattern {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
// Video Background
|
||||
.bg-video {
|
||||
width: 100%;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// Borders
|
||||
// --------------------------------------------------
|
||||
|
||||
.border {
|
||||
border: 1px solid $body-bg-dark !important;
|
||||
|
||||
&-t { border-top: 1px solid $body-bg-dark !important; }
|
||||
&-r { border-right: 1px solid $body-bg-dark !important; }
|
||||
&-b { border-bottom: 1px solid $body-bg-dark !important; }
|
||||
&-l { border-left: 1px solid $body-bg-dark !important; }
|
||||
}
|
||||
|
||||
.border-light {
|
||||
border: 1px solid $body-bg-light !important;
|
||||
|
||||
&-t { border-top: 1px solid $body-bg-light !important; }
|
||||
&-r { border-right: 1px solid $body-bg-light !important; }
|
||||
&-b { border-bottom: 1px solid $body-bg-light !important; }
|
||||
&-l { border-left: 1px solid $body-bg-light !important; }
|
||||
}
|
||||
|
||||
.border-white-op {
|
||||
border: 1px solid rgba(255,255,255,.1) !important;
|
||||
|
||||
&-t { border-top: 1px solid rgba(255,255,255,.1) !important; }
|
||||
&-r { border-right: 1px solid rgba(255,255,255,.1) !important; }
|
||||
&-b { border-bottom: 1px solid rgba(255,255,255,.1) !important; }
|
||||
&-l { border-left: 1px solid rgba(255,255,255,.1) !important; }
|
||||
}
|
||||
|
||||
.border-black-op {
|
||||
border: 1px solid rgba(0,0,0,.1) !important;
|
||||
|
||||
&-t { border-top: 1px solid rgba(0,0,0,.1) !important; }
|
||||
&-r { border-right: 1px solid rgba(0,0,0,.1) !important; }
|
||||
&-b { border-bottom: 1px solid rgba(0,0,0,.1) !important; }
|
||||
&-l { border-left: 1px solid rgba(0,0,0,.1) !important; }
|
||||
}
|
||||
|
||||
.border-2x { border-width: 2px !important; }
|
||||
.border-3x { border-width: 3px !important; }
|
||||
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// Display
|
||||
// --------------------------------------------------
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.opacity-1 {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// Effects
|
||||
// --------------------------------------------------
|
||||
|
||||
// Ripple effect (mostly for buttons usage)
|
||||
.click-ripple {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, .5);
|
||||
border-radius: 100%;
|
||||
transform: scale(0);
|
||||
|
||||
&.animate {
|
||||
animation: click-ripple .9s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes click-ripple {
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(3);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
//
|
||||
// Sizing
|
||||
// --------------------------------------------------
|
||||
|
||||
// Width
|
||||
.min-width-20 { min-width: 20px !important; }
|
||||
.min-width-30 { min-width: 30px !important; }
|
||||
.min-width-50 { min-width: 50px !important; }
|
||||
.min-width-75 { min-width: 75px !important; }
|
||||
.min-width-100 { min-width: 100px !important; }
|
||||
.min-width-125 { min-width: 125px !important; }
|
||||
.min-width-150 { min-width: 150px !important; }
|
||||
.min-width-175 { min-width: 175px !important; }
|
||||
.min-width-200 { min-width: 200px !important; }
|
||||
.min-width-300 { min-width: 300px !important; }
|
||||
.min-width-320 { min-width: 320px !important; }
|
||||
|
||||
// Height
|
||||
.min-height-20 { min-height: 20px !important; }
|
||||
.min-height-30 { min-height: 30px !important; }
|
||||
.min-height-50 { min-height: 50px !important; }
|
||||
.min-height-75 { min-height: 75px !important; }
|
||||
.min-height-100 { min-height: 100px !important; }
|
||||
.min-height-125 { min-height: 125px !important; }
|
||||
.min-height-150 { min-height: 150px !important; }
|
||||
.min-height-175 { min-height: 175px !important; }
|
||||
.min-height-200 { min-height: 200px !important; }
|
||||
.min-height-300 { min-height: 300px !important; }
|
||||
.min-height-400 { min-height: 400px !important; }
|
||||
.min-height-500 { min-height: 500px !important; }
|
||||
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// Spacing
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $lengths in $space-breaks {
|
||||
$length-x: map-get($lengths, x);
|
||||
$length-y: map-get($lengths, y);
|
||||
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; }
|
||||
|
||||
.#{$abbrev}t-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length-y !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}r-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length-x !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}b-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-bottom: $length-y !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}l-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-left: $length-x !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.push,
|
||||
.items-push > div {
|
||||
margin-bottom: $space-base;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
//
|
||||
// Text
|
||||
// --------------------------------------------------
|
||||
|
||||
// Font weight
|
||||
.font-w300 { font-weight: 300 !important; }
|
||||
.font-w400 { font-weight: 400 !important; }
|
||||
.font-w600 { font-weight: 600 !important; }
|
||||
.font-w700 { font-weight: 700 !important; }
|
||||
|
||||
// Font sizes
|
||||
.font-size-default { font-size: $font-size-base !important; }
|
||||
.font-size-xl { font-size: $font-size-xl !important; }
|
||||
.font-size-lg { font-size: $font-size-lg !important; }
|
||||
.font-size-md { font-size: $font-size-md !important; }
|
||||
.font-size-sm { font-size: $font-size-sm !important; }
|
||||
.font-size-xs { font-size: $font-size-xs !important; }
|
||||
|
||||
// Line height
|
||||
.line-height-base { line-height: $line-height-base !important; }
|
||||
|
||||
// Helpers
|
||||
.text-wrap-break-word { word-wrap: break-word; }
|
||||
.text-uppercase { letter-spacing: .0625rem; }
|
||||
|
||||
// Contextual colors
|
||||
@include text-emphasis-variant('.text-primary-dark', $brand-dark);
|
||||
@include text-emphasis-variant('.text-primary-darker', $brand-darker);
|
||||
@include text-emphasis-variant('.text-primary-light', $brand-light);
|
||||
@include text-emphasis-variant('.text-primary-lighter', $brand-lighter);
|
||||
@include text-emphasis-variant('.text-body-bg', $body-bg);
|
||||
@include text-emphasis-variant('.text-body-bg-dark', $body-bg-dark);
|
||||
@include text-emphasis-variant('.text-body-bg-light', $body-bg-light);
|
||||
@include text-emphasis-variant('.text-body-color', $body-color);
|
||||
@include text-emphasis-variant('.text-body-color-dark', $body-color-dark);
|
||||
@include text-emphasis-variant('.text-body-color-light', $body-color-light);
|
||||
@include text-emphasis-variant('.text-muted', $gray-dark);
|
||||
@include text-emphasis-variant('.text-success-light', $brand-success-light);
|
||||
@include text-emphasis-variant('.text-warning-light', $brand-warning-light);
|
||||
@include text-emphasis-variant('.text-info-light', $brand-info-light);
|
||||
@include text-emphasis-variant('.text-danger-light', $brand-danger-light);
|
||||
@include text-emphasis-variant('.text-white', $white);
|
||||
@include text-emphasis-variant('.text-white-op', rgba(255,255,255,.8));
|
||||
@include text-emphasis-variant('.text-black', $black);
|
||||
@include text-emphasis-variant('.text-black-op', rgba(0,0,0,.5));
|
||||
@include text-emphasis-variant('.text-gray', $gray);
|
||||
@include text-emphasis-variant('.text-gray-dark', $gray-dark);
|
||||
@include text-emphasis-variant('.text-gray-darker', $gray-darker);
|
||||
@include text-emphasis-variant('.text-gray-light', $gray-light);
|
||||
@include text-emphasis-variant('.text-gray-lighter', $gray-lighter);
|
||||
|
||||
// Contextual dual text colors (for inverse header/sidebar)
|
||||
@include text-emphasis-variant('.text-dual-primary-dark', $brand-dark);
|
||||
|
||||
.page-header-inverse #page-header,
|
||||
.sidebar-inverse #sidebar {
|
||||
@include text-emphasis-variant('.text-dual-primary-dark', $body-color-light);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
//
|
||||
// Vertical Align
|
||||
// --------------------------------------------------
|
||||
|
||||
.align-parent { position: relative; }
|
||||
|
||||
.align-v {
|
||||
@include vertical-align(50%, auto, auto, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-r {
|
||||
@include vertical-align(50%, 0, auto, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-l {
|
||||
@include vertical-align(50%, auto, 0, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-r {
|
||||
@include vertical-align(50%, 0, auto, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-h {
|
||||
@include vertical-align(50%, auto, 50%, -50%, -50%);
|
||||
}
|
||||
Reference in New Issue
Block a user