v1
This commit is contained in:
s-lnk
@@ -0,0 +1,39 @@
|
||||
//
|
||||
// Bootstrap components
|
||||
// imports of the used Bootstrap components in Purpose's UI Kits
|
||||
//
|
||||
|
||||
@import "../../../node_modules/bootstrap/scss/root";
|
||||
@import "../../../node_modules/bootstrap/scss/reboot";
|
||||
@import "../../../node_modules/bootstrap/scss/type";
|
||||
@import "../../../node_modules/bootstrap/scss/images";
|
||||
@import "../../../node_modules/bootstrap/scss/code";
|
||||
@import "../../../node_modules/bootstrap/scss/grid";
|
||||
@import "../../../node_modules/bootstrap/scss/tables";
|
||||
@import "../../../node_modules/bootstrap/scss/forms";
|
||||
@import "../../../node_modules/bootstrap/scss/buttons";
|
||||
@import "../../../node_modules/bootstrap/scss/transitions";
|
||||
@import "../../../node_modules/bootstrap/scss/dropdown";
|
||||
@import "../../../node_modules/bootstrap/scss/button-group";
|
||||
@import "../../../node_modules/bootstrap/scss/input-group";
|
||||
@import "../../../node_modules/bootstrap/scss/custom-forms";
|
||||
@import "../../../node_modules/bootstrap/scss/nav";
|
||||
@import "../../../node_modules/bootstrap/scss/navbar";
|
||||
@import "../../../node_modules/bootstrap/scss/card";
|
||||
@import "../../../node_modules/bootstrap/scss/breadcrumb";
|
||||
@import "../../../node_modules/bootstrap/scss/pagination";
|
||||
@import "../../../node_modules/bootstrap/scss/badge";
|
||||
@import "../../../node_modules/bootstrap/scss/jumbotron";
|
||||
@import "../../../node_modules/bootstrap/scss/alert";
|
||||
@import "../../../node_modules/bootstrap/scss/progress";
|
||||
@import "../../../node_modules/bootstrap/scss/media";
|
||||
@import "../../../node_modules/bootstrap/scss/list-group";
|
||||
@import "../../../node_modules/bootstrap/scss/close";
|
||||
@import "../../../node_modules/bootstrap/scss/toasts";
|
||||
@import "../../../node_modules/bootstrap/scss/modal";
|
||||
@import "../../../node_modules/bootstrap/scss/tooltip";
|
||||
@import "../../../node_modules/bootstrap/scss/popover";
|
||||
@import "../../../node_modules/bootstrap/scss/carousel";
|
||||
@import "../../../node_modules/bootstrap/scss/spinners";
|
||||
@import "../../../node_modules/bootstrap/scss/utilities";
|
||||
@import "../../../node_modules/bootstrap/scss/print";
|
||||
@@ -0,0 +1,51 @@
|
||||
//
|
||||
// Global components
|
||||
// core components used in all the our UI Kits
|
||||
//
|
||||
|
||||
@import "components/root/root";
|
||||
@import "components/root/reboot";
|
||||
@import "components/alerts/alert";
|
||||
@import "components/avatars/avatar";
|
||||
@import "components/badges/badge";
|
||||
@import "components/breadcrumbs/breadcrumb";
|
||||
@import "components/buttons/button";
|
||||
@import "components/buttons/button-icon";
|
||||
@import "components/cards/card";
|
||||
@import "components/cards/card-accordion";
|
||||
@import "components/closes/close";
|
||||
@import "components/custom-forms/custom-forms";
|
||||
@import "components/custom-forms/custom-checkbox";
|
||||
@import "components/custom-forms/custom-radio";
|
||||
@import "components/dropdowns/dropdown";
|
||||
@import "components/footers/footer";
|
||||
@import "components/forms/form";
|
||||
@import "components/headers/header";
|
||||
@import "components/icons/icon";
|
||||
@import "components/icons/icon-shape";
|
||||
@import "components/input-groups/input-group";
|
||||
@import "components/jumbotrons/jumbotron";
|
||||
@import "components/layout/docs";
|
||||
@import "components/list-groups/list-group";
|
||||
@import "components/masks/mask";
|
||||
@import "components/modals/modal";
|
||||
@import "components/navs/nav";
|
||||
@import "components/navbars/navbar";
|
||||
@import "components/paginations/pagination";
|
||||
@import "components/popovers/popover";
|
||||
@import "components/progresses/progress";
|
||||
@import "components/tables/table";
|
||||
@import "components/type/type";
|
||||
@import "components/type/icons";
|
||||
|
||||
|
||||
//
|
||||
// Quick Website UI Kit (FREE) components (only)
|
||||
// components used in this UI Kit only
|
||||
//
|
||||
|
||||
|
||||
@import "components/navbars/navbar";
|
||||
@import "components/navbars/navbar-dropdown";
|
||||
@import "components/sections/section";
|
||||
@import "components/shapes/shape";
|
||||
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// Functions
|
||||
// overrides or extension after the Bootstrap's defaults
|
||||
//
|
||||
|
||||
|
||||
// Retrieve color Sass maps
|
||||
@function section-color($key: "primary") {
|
||||
@return map-get($section-colors, $key);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
//
|
||||
// Libs
|
||||
//
|
||||
|
||||
@import "libs/highlightjs";
|
||||
@@ -0,0 +1,15 @@
|
||||
//
|
||||
// Mixins
|
||||
//
|
||||
|
||||
|
||||
@import "mixins/gradients";
|
||||
@import "mixins/alert";
|
||||
@import "mixins/badge";
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/caret";
|
||||
@import "mixins/icon";
|
||||
@import "mixins/link";
|
||||
@import "mixins/modals";
|
||||
@import "mixins/popover";
|
||||
@@ -0,0 +1,13 @@
|
||||
//
|
||||
// Utilities
|
||||
//
|
||||
|
||||
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/image";
|
||||
@import "utilities/sizing";
|
||||
@import "utilities/spacing";
|
||||
@import "utilities/shadows";
|
||||
@import "utilities/text";
|
||||
@import "utilities/zindex";
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,110 @@
|
||||
//
|
||||
// Alert
|
||||
// bootstrap overrides
|
||||
//
|
||||
|
||||
|
||||
.alert {
|
||||
font-size: $alert-font-size;
|
||||
|
||||
strong {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: $alert-padding-y 0;
|
||||
}
|
||||
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $h4-font-size;
|
||||
margin-top: .15rem;
|
||||
}
|
||||
|
||||
|
||||
// Flush alert
|
||||
|
||||
.alert-flush {
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
// Modern alert
|
||||
|
||||
.alert-modern {
|
||||
display: inline-block;
|
||||
padding: .275rem 1rem .375rem .375rem;
|
||||
@include border-radius($rounded-pill);
|
||||
@include caret(right);
|
||||
|
||||
.badge + .alert-content {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
content: ""
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
display: block;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark alert
|
||||
|
||||
.alert-dark {
|
||||
background-color: $alert-dark-bg;
|
||||
color: $alert-dark-color;
|
||||
border: 0;
|
||||
|
||||
.alert-link {
|
||||
color: $alert-dark-color;
|
||||
}
|
||||
|
||||
.close {
|
||||
&>span:not(.sr-only) {
|
||||
color: lighten($alert-dark-color, 15%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&>span:not(.sr-only) {
|
||||
color: $alert-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: rgba(invert($alert-dark-bg), .1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Outline alerts
|
||||
|
||||
[class*="alert-outline-"] {
|
||||
border-right: 1px solid;
|
||||
|
||||
.alert-group-prepend {
|
||||
padding-right: $alert-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-outline-#{$color} {
|
||||
@include alert-outline-variant(theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
//
|
||||
// Avatar
|
||||
//
|
||||
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
color: $avatar-color;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
font-size: $avatar-font-size;
|
||||
font-weight: $avatar-font-weight;
|
||||
height: $avatar-width;
|
||||
width: $avatar-width;
|
||||
@include border-radius($avatar-border-radius);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@include border-radius($avatar-border-radius);
|
||||
}
|
||||
|
||||
&.rounded-circle {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: $avatar-bg;
|
||||
}
|
||||
|
||||
+ .avatar {
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
+ .avatar-content {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
.avatar-2xl {
|
||||
width: $avatar-width-2xl;
|
||||
height: $avatar-width-2xl;
|
||||
font-size: $avatar-font-size-2xl;
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
width: $avatar-width-xl;
|
||||
height: $avatar-width-xl;
|
||||
font-size: $avatar-font-size-xl;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: $avatar-width-lg;
|
||||
height: $avatar-width-lg;
|
||||
font-size: $avatar-font-size-lg;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: $avatar-width-sm;
|
||||
height: $avatar-width-sm;
|
||||
font-size: $avatar-font-size-sm;
|
||||
@include border-radius($avatar-border-radius-sm);
|
||||
}
|
||||
|
||||
.avatar-xs {
|
||||
width: $avatar-width-xs;
|
||||
height: $avatar-width-xs;
|
||||
font-size: $avatar-font-size-xs;
|
||||
@include border-radius($avatar-border-radius-xs);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
//
|
||||
// Badge
|
||||
//
|
||||
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
text-transform: $badge-text-transfom;
|
||||
|
||||
i:not(:last-child),
|
||||
svg {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-group {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-top: .125rem;
|
||||
margin-bottom: .125rem;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
// Size variations
|
||||
|
||||
.badge-xs {
|
||||
padding: .25rem .5rem;
|
||||
font-size: 60%;
|
||||
}
|
||||
|
||||
.badge-md {
|
||||
padding: .65em 1em;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
padding: .85em 1.375em;
|
||||
}
|
||||
|
||||
|
||||
// Multiple inline badges
|
||||
|
||||
.badge-inline {
|
||||
margin-right: .625rem;
|
||||
|
||||
+ span {
|
||||
top: 2px;
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Badge spacing inside a btn with some text
|
||||
|
||||
.btn {
|
||||
.badge {
|
||||
&:not(:first-child) {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Soft color variation
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge-soft-#{$color} {
|
||||
@include badge-soft-variant(theme-color-level($color, $badge-soft-bg-level), $value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
//
|
||||
// Breadcrumb
|
||||
//
|
||||
|
||||
// Bootstrap Overrides
|
||||
|
||||
.breadcrumb {
|
||||
border: $breadcrumb-border;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Custom
|
||||
//
|
||||
|
||||
// Size Variations
|
||||
|
||||
.breadcrumb-sm {
|
||||
font-size: $breadcrumb-font-size-sm;
|
||||
}
|
||||
|
||||
|
||||
.breadcrumb-links {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
@include border-radius(0);
|
||||
|
||||
.breadcrumb-item {
|
||||
|
||||
// Separator
|
||||
|
||||
+ .breadcrumb-item::before {
|
||||
content: "";
|
||||
width: .3rem;
|
||||
height: .6rem;
|
||||
margin-right: $breadcrumb-item-padding;
|
||||
-webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
|
||||
mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxMCAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iY2hldnJvbi1yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDIuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIuNSI+ICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJTaGFwZSIgcG9pbnRzPSIwIDEyIDYgNiAwIDAiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=) no-repeat 50% 50%;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
background: $breadcrumb-divider-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-dark {
|
||||
.breadcrumb-item {
|
||||
a {
|
||||
color: rgba($white, .8);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: rgba($white, .6);
|
||||
}
|
||||
|
||||
+ .breadcrumb-item {
|
||||
&::before {
|
||||
color: rgba($white, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-light {
|
||||
.breadcrumb-item {
|
||||
a {
|
||||
color: rgba($dark, .8);
|
||||
|
||||
&:hover {
|
||||
color: rgba($dark, 1);
|
||||
}
|
||||
}
|
||||
|
||||
+.breadcrumb-item {
|
||||
&::before {
|
||||
color: rgba($dark, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
//
|
||||
// Icon button
|
||||
//
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
.btn svg:not(:first-child),
|
||||
.btn i:not(:first-child) {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.btn svg:not(:last-child),
|
||||
.btn i:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
.btn-icon {
|
||||
.btn-inner--text:not(:first-child) {
|
||||
margin-left: .75em;
|
||||
}
|
||||
.btn-inner--text:not(:last-child) {
|
||||
margin-right: .75em;
|
||||
}
|
||||
|
||||
.btn-inner--icon {
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon only buttons (no text)
|
||||
|
||||
.btn-icon-only {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
padding: 0;
|
||||
|
||||
&.btn-xs {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
&.btn-sm {
|
||||
width: 2.4375rem;
|
||||
height: 2.4375rem;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
//
|
||||
// General
|
||||
//
|
||||
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
@include transition($transition-base);
|
||||
|
||||
+ .btn {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
> .btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixes
|
||||
|
||||
.btn-neutral {
|
||||
background-color: transparent;
|
||||
color: color-yiq(theme-color("neutral"));
|
||||
border: 2px solid $border-color;
|
||||
|
||||
&:hover {
|
||||
border-color: lighten(theme-color("primary"), 15%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):focus,
|
||||
&:not(:disabled):not(.disabled):active {
|
||||
border-color: lighten(theme-color("primary"), 15%);
|
||||
color: theme-color("primary");
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled).active {
|
||||
border-color: theme-color("primary");
|
||||
color: theme-color("primary");
|
||||
background-color: theme-color("neutral");
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
.btn-xs {
|
||||
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $btn-line-height-xs, $btn-border-radius-xs);
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
@include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
|
||||
}
|
||||
|
||||
|
||||
// Transparent buttons (remove horizontal paddings)
|
||||
|
||||
.btn-nobg {
|
||||
padding: 0;
|
||||
background: transparent !important;
|
||||
|
||||
&:hover {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-nobg--hover:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Soft color variation
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-soft-#{$color} {
|
||||
@include button-soft-variant(theme-color-level($color, $btn-soft-bg-level), $value);
|
||||
}
|
||||
}
|
||||
|
||||
// Brand buttons
|
||||
|
||||
@each $color, $value in $brand-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
//
|
||||
// Accordion
|
||||
//
|
||||
|
||||
.accordion {
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: '+';
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-family: $font-family-base;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header[aria-expanded="false"] {
|
||||
&:after {
|
||||
content: '+';
|
||||
}
|
||||
}
|
||||
|
||||
.card-header[aria-expanded="true"] {
|
||||
&:after {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: theme-color("primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-spaced {
|
||||
.card {
|
||||
margin-bottom: 1.5rem;
|
||||
@include border-radius($card-border-radius !important);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
//
|
||||
// Card
|
||||
//
|
||||
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
margin-bottom: $grid-gutter-width;
|
||||
|
||||
@if $enable-shadows {
|
||||
// border: 0;
|
||||
@include box-shadow($card-shadow);
|
||||
}
|
||||
|
||||
&.hover-scale-110:hover {
|
||||
z-index: 2;
|
||||
@include border-radius($card-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-top-right {
|
||||
@include border-radius($card-border-radius $jumbotron-border-radius $jumbotron-border-radius $card-border-radius $card-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-top-left {
|
||||
@include border-radius($jumbotron-border-radius $card-border-radius $card-border-radius $card-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-bottom-right {
|
||||
@include border-radius($card-border-radius $card-border-radius $jumbotron-border-radius $card-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-bottom-left {
|
||||
@include border-radius($card-border-radius $card-border-radius $card-border-radius $jumbotron-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-diagonal-left {
|
||||
@include border-radius($jumbotron-border-radius $card-border-radius $jumbotron-border-radius $card-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-diagonal-right {
|
||||
@include border-radius($card-border-radius $jumbotron-border-radius $card-border-radius $jumbotron-border-radius !important);
|
||||
}
|
||||
}
|
||||
|
||||
.card-fluid {
|
||||
height: calc(100% - #{$grid-gutter-width});
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@if $enable-card-cap-border {
|
||||
border-bottom: $card-cap-border-width solid $card-cap-border-color;
|
||||
} @else {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
@include border-top-radius(0 !important);
|
||||
@include border-bottom-radius($card-border-radius !important);
|
||||
}
|
||||
|
||||
.card-deck + .row {
|
||||
margin-top: $grid-gutter-width;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
.card:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Images as card backgrounds
|
||||
|
||||
.card-img-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-size: cover;
|
||||
border-radius: $card-border-radius;
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transition($transition-base);
|
||||
|
||||
& ~ .card-body {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&:hover {
|
||||
.card-img-bg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// IE fixes
|
||||
|
||||
.card {
|
||||
.card-image,
|
||||
.animate-this,
|
||||
> a {
|
||||
min-height: 1px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// Close
|
||||
//
|
||||
|
||||
|
||||
.close {
|
||||
&>span:not(.sr-only) {
|
||||
color: rgba($black, .5);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&>span:not(.sr-only) {
|
||||
color: rgba($black, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// Custom checkbox
|
||||
//
|
||||
|
||||
|
||||
.checklist {
|
||||
.custom-control-input {
|
||||
&:checked ~ .custom-control-label {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Custom forms
|
||||
//
|
||||
|
||||
|
||||
.custom-control-label {
|
||||
line-height: 1.8;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
//
|
||||
// Custom radio
|
||||
//
|
||||
@@ -0,0 +1,234 @@
|
||||
.dropdown,
|
||||
.dropup,
|
||||
.dropright,
|
||||
.dropleft {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: $dropdown-font-size;
|
||||
|
||||
.dropdown-item {
|
||||
> i,
|
||||
> svg {
|
||||
margin-right: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
height: 14px;
|
||||
margin-right: .5rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.icon-flag {
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
// Media entires
|
||||
.list-group-item .media {
|
||||
p {
|
||||
color: $gray-700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.heading {
|
||||
color: theme-color("primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Inverse dropdown menu
|
||||
|
||||
.dropdown-menu-dark {
|
||||
background: #282f37;
|
||||
border: 0;
|
||||
|
||||
.dropdown-item {
|
||||
color: rgba($white, .9);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: rgba($white, 1);
|
||||
background: rgba($gray-800, .1);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
background: rgba($black, .2);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.dropdown-menu-arrow {
|
||||
&:before {
|
||||
content: '';
|
||||
background: $dropdown-bg;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 1.25rem;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
transform: rotate(-45deg) translateY(1rem);
|
||||
z-index: -5;
|
||||
@include border-radius($border-radius-sm);
|
||||
}
|
||||
|
||||
&[x-placement="bottom-end"] {
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
transform: rotate(-45deg) translateY(1rem);
|
||||
}
|
||||
}
|
||||
&[x-placement="top-end"] {
|
||||
&:before {
|
||||
bottom: 0;
|
||||
transform: rotate(-45deg) translateY(.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-menu-right {
|
||||
&:before {
|
||||
right: 2.5rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-sm {
|
||||
min-width: $dropdown-min-width-sm !important;
|
||||
border: $border-radius-sm;
|
||||
|
||||
&.dropdown-menu-arrow {
|
||||
&.dropdown-menu-right {
|
||||
&:before {
|
||||
right: 2rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-md {
|
||||
min-width: $dropdown-min-width-md !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
min-width: $dropdown-min-width-lg !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.dropdown-menu-xl {
|
||||
min-width: $dropdown-min-width-xl !important;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown: Fluid
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.dropdown-fluid {
|
||||
position: static;
|
||||
|
||||
.dropdown-menu {
|
||||
width: calc(100% - #{$grid-gutter-width});
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
left: ($grid-gutter-width / 2);
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu-right {
|
||||
right: ($grid-gutter-width / 2);
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.dropdown-animate {
|
||||
> .dropdown-menu {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown animation on click
|
||||
.dropdown-animate:not([data-toggle="hover"]) {
|
||||
.dropdown-menu {
|
||||
&.show {
|
||||
pointer-events: auto;
|
||||
animation: show-dropdown .3s ease forwards;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: block;
|
||||
animation: hide-dropdown .3s ease backwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown animation on hover
|
||||
.dropdown-animate[data-toggle="hover"] {
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
margin: 0;
|
||||
left: $dropdown-left-offset;
|
||||
transform: $dropdown-transform;
|
||||
@include transition($transition-base);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .dropdown-menu {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
transform: $dropdown-hover-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
@keyframes show-dropdown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(0) translateY(-3px) scale(.97);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0) translateY(-3px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-dropdown {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0) translateY(-3px) scale(1);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(0) translateY(-3px) scale(.97);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
|
||||
.footer {
|
||||
background-color: section-color("primary");
|
||||
padding-top: 3rem;
|
||||
|
||||
.nav-link {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.list-unstyled li a {
|
||||
display: inline-block;
|
||||
padding: .125rem 0;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-light {
|
||||
p {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
.list-unstyled li a {
|
||||
color: $gray-500;
|
||||
|
||||
&:hover {
|
||||
color: $gray-700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
a {
|
||||
color: $gray-700;
|
||||
|
||||
&:hover {
|
||||
color: theme-color("primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-dark {
|
||||
p {
|
||||
color: rgba($white, .8);
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: rgba($white, 1);
|
||||
}
|
||||
|
||||
.list-unstyled li a {
|
||||
color: rgba($white, .8);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, .9);
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
a {
|
||||
color: rgba($white, .9);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-dark {
|
||||
background-color: $footer-dark-bg;
|
||||
color: $footer-dark-color;
|
||||
|
||||
.heading {
|
||||
color: $footer-dark-heading-color;
|
||||
}
|
||||
|
||||
.nav .nav-item .nav-link,
|
||||
.list-unstyled li a,
|
||||
.footer-link {
|
||||
color: $footer-dark-link-color;
|
||||
|
||||
&:hover {
|
||||
color: $footer-dark-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: rgba(invert($footer-dark-bg), .1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
//
|
||||
// Form
|
||||
//
|
||||
|
||||
|
||||
// Form control
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
&::placeholder {
|
||||
color: $input-focus-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-muted {
|
||||
background-color: $input-muted-bg;
|
||||
border-color: $input-muted-bg;
|
||||
|
||||
&:focus {
|
||||
background-color: $input-muted-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-emphasized {
|
||||
background-color: $input-emphasized-bg;
|
||||
border-color: $input-emphasized-bg;
|
||||
box-shadow: $input-emphasized-box-shadow;
|
||||
|
||||
&:focus {
|
||||
background-color: $input-emphasized-focus-bg;
|
||||
border-color: $input-emphasized-focus-border-color;
|
||||
box-shadow: $input-emphasized-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control flush
|
||||
// Removes borders and paddings from inputs and text areas
|
||||
|
||||
.form-control-flush {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Textarea
|
||||
|
||||
textarea[resize="none"] {
|
||||
resize: none!important;
|
||||
}
|
||||
|
||||
textarea[resize="both"] {
|
||||
resize: both!important;
|
||||
}
|
||||
|
||||
textarea[resize="vertical"] {
|
||||
resize: vertical!important;
|
||||
}
|
||||
|
||||
textarea[resize="horizontal"] {
|
||||
resize: horizontal!important;
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.form-control-xl {
|
||||
padding: $input-padding-y-xl $input-padding-x-xl;
|
||||
font-size: $font-size-xl;
|
||||
line-height: $input-line-height-xl;
|
||||
@include border-radius($input-border-radius-xl);
|
||||
}
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
.form-primary {
|
||||
.form-control {
|
||||
color: color-yiq(theme-color("primary"));
|
||||
background-color: darken(theme-color("primary"), 12%);
|
||||
border: $input-border-width solid darken(theme-color("primary"), 12%);
|
||||
|
||||
&:focus {
|
||||
background-color: darken(theme-color("primary"), 16%);
|
||||
border: $input-border-width solid darken(theme-color("primary"), 16%);
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: transparentize(color-yiq(theme-color("primary")), .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-warning {
|
||||
.form-control {
|
||||
color: color-yiq(theme-color("warning"));
|
||||
background-color: darken(theme-color("warning"), 12%);
|
||||
border: $input-border-width solid darken(theme-color("warning"), 12%);
|
||||
|
||||
&:focus {
|
||||
background-color: darken(theme-color("warning"), 16%);
|
||||
border: $input-border-width solid darken(theme-color("warning"), 16%);
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: transparentize(color-yiq(theme-color("warning")), .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-danger {
|
||||
.form-control {
|
||||
color: color-yiq(theme-color("danger"));
|
||||
background-color: darken(theme-color("danger"), 12%);
|
||||
border: $input-border-width solid darken(theme-color("danger"), 12%);
|
||||
|
||||
&:focus {
|
||||
background-color: darken(theme-color("danger"), 16%);
|
||||
border: $input-border-width solid darken(theme-color("danger"), 16%);
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: transparentize(color-yiq(theme-color("danger")), .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
//
|
||||
// Header
|
||||
//
|
||||
|
||||
|
||||
.header-transparent {
|
||||
+ section {
|
||||
padding-top: 7rem !important;
|
||||
}
|
||||
|
||||
+ .header-1 {
|
||||
padding-top: 14rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header-account-page {
|
||||
.btn-group-nav {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Header application
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.header-web-app .row:last-of-type {
|
||||
margin-bottom: -12rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
.header-web-app + section {
|
||||
padding-top: 12rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
//
|
||||
// Icon shapes
|
||||
//
|
||||
|
||||
|
||||
.icon-shape {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-radius: $border-radius;
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
i {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $icon-size/ 2.5;
|
||||
height: $icon-size/ 2.5;
|
||||
}
|
||||
|
||||
|
||||
&.icon-xl {
|
||||
width: $icon-size-xl;
|
||||
height: $icon-size-xl;
|
||||
|
||||
i {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $icon-size-xl/ 2.5;
|
||||
height: $icon-size-xl/ 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.icon-lg {
|
||||
width: $icon-size-lg;
|
||||
height: $icon-size-lg;
|
||||
|
||||
i {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $icon-size-lg/ 2.5;
|
||||
height: $icon-size-lg/ 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-sm {
|
||||
width: $icon-size-sm;
|
||||
height: $icon-size-sm;
|
||||
|
||||
i {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $icon-size-sm/ 2.5;
|
||||
height: $icon-size-sm/ 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-xs {
|
||||
width: $icon-size-xs;
|
||||
height: $icon-size-xs;
|
||||
|
||||
i {
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $icon-size-xs/ 2.5;
|
||||
height: $icon-size-xs/ 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.icon-#{$color} {
|
||||
@include icon-variant(theme-color-level($color, $icon-bg-level), $value);
|
||||
}
|
||||
|
||||
.icon-outline-#{$color} {
|
||||
@include icon-outline-variant($icon-border-width, $value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
//
|
||||
// Icon
|
||||
//
|
||||
|
||||
|
||||
.icon {
|
||||
i, svg {
|
||||
font-size: $icon-size / 1.75;
|
||||
}
|
||||
|
||||
&:not(.icon-shape) svg {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.icon + .icon-text {
|
||||
padding-left: 1rem;
|
||||
width: calc(100% - #{$icon-size} - 1);
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.icon-xl {
|
||||
i, svg {
|
||||
font-size: $icon-size-xl / 1.75;
|
||||
}
|
||||
|
||||
&:not(.icon-shape) svg {
|
||||
width: $icon-size-xl;
|
||||
height: $icon-size-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xl + .icon-text {
|
||||
width: calc(100% - #{$icon-size-xl} - 1);
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
i, svg {
|
||||
font-size: $icon-size-lg / 1.75;
|
||||
}
|
||||
|
||||
&:not(.icon-shape) svg {
|
||||
width: $icon-size-lg;
|
||||
height: $icon-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-lg + .icon-text {
|
||||
width: calc(100% - #{$icon-size-lg} - 1);
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
i, svg {
|
||||
font-size: $icon-size-sm / 1.75;
|
||||
}
|
||||
|
||||
&:not(.icon-shape) svg {
|
||||
width: $icon-size-sm;
|
||||
height: $icon-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-sm + .icon-text {
|
||||
width: calc(100% - #{$icon-size-sm} - 1);
|
||||
}
|
||||
|
||||
.icon-xs {
|
||||
i, svg {
|
||||
font-size: $icon-size-xs / 1.75;
|
||||
}
|
||||
|
||||
&:not(.icon-shape) svg {
|
||||
width: $icon-size-xs;
|
||||
height: $icon-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xs + .icon-text {
|
||||
width: calc(100% - #{$icon-size-xs} - 1);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
//
|
||||
// Input group
|
||||
//
|
||||
|
||||
|
||||
.input-group-text {
|
||||
transition: $input-transition;
|
||||
}
|
||||
|
||||
|
||||
// Flush
|
||||
|
||||
.input-group-flush {
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Focused state
|
||||
|
||||
.focused {
|
||||
// Add shadow on the input group (not on .form-control)
|
||||
.input-group {
|
||||
@if $enable-shadows {
|
||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
||||
} @else {
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional styles for the input addon element
|
||||
.input-group-text {
|
||||
color: $input-group-addon-focus-color;
|
||||
background-color: $input-group-addon-focus-bg;
|
||||
border-color: $input-group-addon-focus-border-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
//
|
||||
// Jumbotron
|
||||
//
|
||||
|
||||
.jumbotron {
|
||||
position: relative;
|
||||
|
||||
&:not([class*="rounded-"]) {
|
||||
@include border-radius($jumbotron-border-radius);
|
||||
|
||||
> img {
|
||||
@include border-radius($jumbotron-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&.rounded-right {
|
||||
@include border-radius(0 $jumbotron-border-radius $jumbotron-border-radius 0 !important);
|
||||
}
|
||||
|
||||
&.rounded-left {
|
||||
@include border-radius($jumbotron-border-radius 0 0 $jumbotron-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-top-right {
|
||||
@include border-radius(0 $jumbotron-border-radius 0 0 !important);
|
||||
}
|
||||
|
||||
&.rounded-top-left {
|
||||
@include border-radius($jumbotron-border-radius 0 0 0 !important);
|
||||
}
|
||||
|
||||
&.rounded-bottom-right {
|
||||
@include border-radius(0 0 $jumbotron-border-radius 0 !important);
|
||||
}
|
||||
|
||||
&.rounded-bottom-left {
|
||||
@include border-radius(0 0 0 $jumbotron-border-radius !important);
|
||||
}
|
||||
|
||||
&.rounded-diagonal-left {
|
||||
@include border-radius($jumbotron-border-radius 0 $jumbotron-border-radius 0 !important);
|
||||
}
|
||||
|
||||
&.rounded-diagonal-right {
|
||||
@include border-radius(0 $jumbotron-border-radius 0 $jumbotron-border-radius !important);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
//
|
||||
// Docs layout
|
||||
//
|
||||
|
||||
.docs {
|
||||
|
||||
.header .navbar {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
// Container
|
||||
|
||||
.container-fluid {
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding-left: $grid-gutter-width;
|
||||
padding-right: $grid-gutter-width;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-left: $grid-gutter-width / 2;
|
||||
padding-right: $grid-gutter-width / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.container-docs {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
// Main content
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-left: $navbar-vertical-open-width;
|
||||
}
|
||||
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content-title {
|
||||
+.row,
|
||||
+.card {
|
||||
margin-top: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
margin-top: 80px;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 0 70px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-title {
|
||||
padding: 2.5rem;
|
||||
margin: 2.5rem 0px;
|
||||
border: 2px solid $border-color;
|
||||
@include border-radius($border-radius-lg)
|
||||
}
|
||||
|
||||
// Sidenav
|
||||
|
||||
.sidenav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
z-index: 900;
|
||||
@include border-radius($navbar-vertical-border-radius);
|
||||
@include transition($transition-base);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: $navbar-vertical-open-width !important;
|
||||
height: 100vh;
|
||||
transform: translateX(0);
|
||||
border-right: 1px solid $border-color;
|
||||
@include border-radius($navbar-vertical-open-border-radius);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
max-width: $navbar-vertical-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
transform: translateX(-150%);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.show {
|
||||
max-width: $navbar-vertical-open-width !important;
|
||||
transform: translateX(0);
|
||||
border-right: 1px solid $border-color;
|
||||
z-index: 900;
|
||||
@include border-radius($navbar-vertical-open-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Sidenav header
|
||||
|
||||
.sidenav-header {
|
||||
padding: 1.5rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.navbar-brand {
|
||||
img {
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main content title
|
||||
|
||||
.main-content-title {
|
||||
+ .nav-tabs {
|
||||
margin-bottom: $grid-gutter-width;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
//
|
||||
// List group
|
||||
//
|
||||
|
||||
.list-group {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
// Spaces list items
|
||||
|
||||
.list-group-space {
|
||||
.list-group-item {
|
||||
margin-bottom: 1.5rem;
|
||||
@include border-radius($list-group-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// List group components
|
||||
|
||||
.list-group-item {
|
||||
font-size: $list-group-item-font-size
|
||||
}
|
||||
|
||||
.list-group-img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
margin: -.1rem 1.2rem 0 -.2rem;
|
||||
}
|
||||
|
||||
.list-group-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin: .2rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-heading {
|
||||
color: $gray-800;
|
||||
|
||||
> small {
|
||||
float: right;
|
||||
color: $gray-500;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.list-group-sm {
|
||||
.list-group-item {
|
||||
padding: .675rem 1.25rem;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// Mask
|
||||
//
|
||||
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition($transition-base);
|
||||
|
||||
& + .container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Animated mask transparency
|
||||
|
||||
.card {
|
||||
.mask {
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.hover-mask {
|
||||
opacity: 0;
|
||||
transition-delay: 150ms;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover-mask {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
//
|
||||
// Modal
|
||||
//
|
||||
|
||||
|
||||
.modal-content {
|
||||
border: 0;
|
||||
@if $enable-rounded {
|
||||
border-radius: $modal-content-border-radius;
|
||||
} @else {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modal-fluid {
|
||||
.modal-dialog {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
// Positions
|
||||
|
||||
.modal-dialog-aside {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.modal-#{$color} {
|
||||
@include modal-variant($value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
//
|
||||
// Navbar dropdown
|
||||
//
|
||||
|
||||
|
||||
.navbar {
|
||||
.dropdown-menu {
|
||||
min-width: $navbar-dropdown-menu-width;
|
||||
padding: $navbar-dropdown-padding-y $navbar-dropdown-padding-x;
|
||||
background-color: $navbar-dropdown-bg;
|
||||
border: $navbar-dropdown-border-width solid $navbar-dropdown-border-color;
|
||||
@include border-radius($navbar-dropdown-border-radius);
|
||||
@include box-shadow($navbar-dropdown-box-shadow);
|
||||
|
||||
|
||||
// List group
|
||||
|
||||
.list-group {
|
||||
// For items wrapped in divs
|
||||
.list-group-item {
|
||||
background: transparent;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&:hover {
|
||||
.heading {
|
||||
color: $navbar-dropdown-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown items
|
||||
|
||||
.dropdown-header {
|
||||
padding: 0;
|
||||
color: $navbar-dropdown-heading-color;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: $navbar-dropdown-item-padding-y $navbar-dropdown-item-padding-x;
|
||||
color: $navbar-dropdown-link-color;
|
||||
font-size: $navbar-dropdown-link-font-size;
|
||||
font-weight: $navbar-dropdown-link-font-weight;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($navbar-dropdown-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($navbar-dropdown-border-radius);
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $navbar-dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
@include gradient-bg($navbar-dropdown-link-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowm xl elements
|
||||
|
||||
.dropdown-img-left {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1.625rem 1.75rem;
|
||||
background: no-repeat center center/cover;
|
||||
@include border-left-radius($dropdown-border-radius);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(theme-color("primary"), .8);
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-xl,
|
||||
.dropdown-menu-lg {
|
||||
padding: 2rem 2.5rem;
|
||||
|
||||
.dropdown-header {
|
||||
padding-top: $navbar-dropdown-heading-padding-y;
|
||||
padding-bottom: $navbar-dropdown-heading-padding-y;
|
||||
color: theme-color("primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
|
||||
.navbar-collapse {
|
||||
.dropdown-menu {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background: transparent;
|
||||
@include border-radius(0);
|
||||
|
||||
&.show {
|
||||
border-bottom: 1px solid $navbar-dropdown-divider-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-single {
|
||||
padding-left: 1rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-left: 3px solid theme-color("primary");
|
||||
|
||||
}
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
font-size: $navbar-nav-link-font-size;
|
||||
font-weight: $navbar-nav-link-font-weight;
|
||||
}
|
||||
|
||||
.dropdown-img-left {
|
||||
@include border-radius($dropdown-border-radius);
|
||||
}
|
||||
|
||||
.dropdown-submenu {
|
||||
&.show {
|
||||
.dropdown-toggle:after {
|
||||
transform: rotate(90deg);
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delimiter {
|
||||
border-top: 1px solid $border-color;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem 1.75rem;
|
||||
background-color: transparent;
|
||||
color: theme-color("primary");
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
.nav-item.dropdown {
|
||||
.dropdown-toggle {
|
||||
&.nav-link {
|
||||
&:after {
|
||||
transform: rotate(-90deg);
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: .75rem;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
.dropdown-toggle {
|
||||
&.nav-link {
|
||||
&:after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
.dropdown:not(.dropdown-submenu):not(.dropdown-fluid) {
|
||||
> .dropdown-menu:not(.dropdown-menu-right) {
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
> .dropdown-menu-right {
|
||||
margin-right: -1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
.list-group-emphasized > li {
|
||||
.list-group-item {
|
||||
transform: scale(1);
|
||||
@include transition($transition-base);
|
||||
}
|
||||
|
||||
.media-body * {
|
||||
@include transition($transition-base);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.list-group-item {
|
||||
z-index: 11;
|
||||
transform: scale(1.05);
|
||||
background-color: $navbar-dropdown-link-hover-bg;
|
||||
@include box-shadow($box-shadow);
|
||||
@include border-radius($navbar-dropdown-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List group
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
&:first-child {
|
||||
@include border-top-radius($navbar-dropdown-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($navbar-dropdown-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// For items wrapped in list items
|
||||
> li {
|
||||
&:first-child {
|
||||
.list-group-item {
|
||||
@include border-top-radius($navbar-dropdown-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.list-group-item {
|
||||
@include border-bottom-radius($navbar-dropdown-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Additional dropdown background
|
||||
|
||||
.bg-dropdown-secondary {
|
||||
background-color: darken($navbar-dropdown-bg, 2%);
|
||||
}
|
||||
|
||||
.dropdown-body-left {
|
||||
@include border-left-radius($dropdown-border-radius);
|
||||
}
|
||||
|
||||
.dropdown-body-right {
|
||||
@include border-right-radius($dropdown-border-radius);
|
||||
}
|
||||
|
||||
// Dropdown submenu
|
||||
.dropdown-submenu {
|
||||
.dropdown-menu {
|
||||
min-width: 16rem;
|
||||
margin-left: 1rem;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
border-left: 1.5rem solid transparent;
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
&:after {
|
||||
right: $navbar-dropdown-item-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inner elements
|
||||
.dropdown-body {
|
||||
padding: 2rem 2.5rem;
|
||||
}
|
||||
|
||||
.delimiter {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,430 @@
|
||||
//
|
||||
// Navbar
|
||||
//
|
||||
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
|
||||
// Container
|
||||
.container {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding-left: $grid-gutter-width / 2;
|
||||
padding-right: $grid-gutter-width / 2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
font-size: $navbar-nav-link-font-size;
|
||||
font-weight: $navbar-nav-link-font-weight;
|
||||
text-transform: $navbar-nav-link-text-transform;
|
||||
letter-spacing: $navbar-nav-link-letter-spacing;
|
||||
@include transition($navbar-transition);
|
||||
|
||||
i, svg, img {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media-pill {
|
||||
.avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
> img,
|
||||
> svg {
|
||||
height: 14px;
|
||||
margin-right: .5rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.icon-flag {
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
font-size: $navbar-nav-link-font-size;
|
||||
}
|
||||
|
||||
.navbar-user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.navbar-img-brand {
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
// Modifiers
|
||||
|
||||
.navbar-shadow {
|
||||
@include box-shadow($navbar-box-shadow);
|
||||
}
|
||||
|
||||
// Transition to main navbar to topbar
|
||||
|
||||
.header,
|
||||
.navbar,
|
||||
.navbar-top {
|
||||
@include transition($transition-base);
|
||||
}
|
||||
|
||||
// Borders
|
||||
.navbar-border {
|
||||
&.navbar-dark {
|
||||
border-bottom: 1px solid rgba($white, .1) !important;
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid rgba($white, .1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-light {
|
||||
border-bottom: 1px solid rgba($black, .04) !important;
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid rgba($black, .1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-dark {
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid rgba($white, .1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid rgba($black, .1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent navbar
|
||||
.header-transparent {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-fixed;
|
||||
|
||||
.navbar-main {
|
||||
.container:not(.border-0) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -$navbar-padding-y;
|
||||
left: 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-top {
|
||||
background-color: transparent !important;
|
||||
border: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.navbar:not(.sticky) {
|
||||
background-color: transparent !important;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
+ main section:first-child:not([data-spotlight]) {
|
||||
.container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
// class used to create a fullscreen container for the main navs
|
||||
|
||||
.header-collapse-show {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
// position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
// Sticky navbar
|
||||
.navbar-sticky {
|
||||
position: -webkit-sticky;
|
||||
|
||||
&.sticky {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: -100px;
|
||||
transform: translateY(100px);
|
||||
z-index: $zindex-fixed;
|
||||
border-top: 0;
|
||||
@include box-shadow($box-shadow-lg);
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
|
||||
// Top navbar
|
||||
.navbar-top {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
|
||||
.nav-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: .5rem .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
|
||||
// Brand
|
||||
.navbar-brand {
|
||||
img {
|
||||
height: $navbar-brand-size;
|
||||
}
|
||||
|
||||
&.dropdown-toggle {
|
||||
&:after {
|
||||
float: none;
|
||||
font-size: 1rem;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar nav
|
||||
.navbar-nav {
|
||||
&:not(.flex-row) {
|
||||
.nav-link {
|
||||
padding: .625rem 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: none;
|
||||
min-width: auto;
|
||||
|
||||
.media {
|
||||
svg {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.flex-row {
|
||||
.nav-link {
|
||||
padding-left: .675rem;
|
||||
padding-right: .675rem;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: calc(100% - #{$grid-gutter-width});
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: $grid-gutter-width / 2;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:not(.dropdown-submenu) {
|
||||
> .dropdown-menu {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar collapse
|
||||
|
||||
.navbar-collapse {
|
||||
background: $navbar-collapse-bg;
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $navbar-collapse-nav-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-spaced {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: $navbar-collapse-dropdown-item-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: .5rem;
|
||||
color: $navbar-collapse-nav-link-color;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
// Fading collapse
|
||||
|
||||
.navbar-collapse-fade {
|
||||
z-index: 1050;
|
||||
height: auto !important;
|
||||
opacity: 0;
|
||||
|
||||
&.collapsing,
|
||||
&.show {
|
||||
animation: show-navbar-collapse .2s ease forwards;
|
||||
animation-delay: .15s;
|
||||
}
|
||||
|
||||
&.collapsing-out {
|
||||
opacity: 0;
|
||||
transition: opacity .3s linear;
|
||||
animation-delay: 0;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlayed collapse
|
||||
|
||||
.navbar-collapse-overlay {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
left: 1rem;
|
||||
max-height: calc(100vh - 2rem) !important;
|
||||
z-index: 100;
|
||||
padding: 1rem 0;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
transition-property: opacity,transform;
|
||||
transform-origin: top center;
|
||||
@include transition(all $transition-base-duration ease-in-out);
|
||||
@include box-shadow($box-shadow-lg);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@include transition(all $transition-base-duration ease-in-out);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
|
||||
// Brand
|
||||
.navbar-brand {
|
||||
img {
|
||||
height: $navbar-brand-size;
|
||||
}
|
||||
|
||||
&.dropdown-toggle {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar nav
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding-top: $navbar-nav-link-padding-y;
|
||||
padding-bottom: $navbar-nav-link-padding-y;
|
||||
border-radius: $navbar-nav-link-border-radius;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
padding-left: .75rem;
|
||||
padding-right: .75rem;
|
||||
border-radius: $navbar-nav-link-border-radius;
|
||||
|
||||
i {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar collapse
|
||||
|
||||
.navbar-collapse {
|
||||
.collapse-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navabr toggler
|
||||
|
||||
.navbar-toggler-icon {
|
||||
width: $navbar-toggler-icon-width;
|
||||
height: $navbar-toggler-icon-height;
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
|
||||
@keyframes show-navbar-collapse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
//
|
||||
// Nav
|
||||
//
|
||||
|
||||
.nav-link {
|
||||
color: $nav-link-color;
|
||||
font-size: $nav-link-font-size;
|
||||
|
||||
&:hover {
|
||||
color: $nav-link-active-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $nav-link-active-color;
|
||||
font-weight: $nav-link-active-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.nav-link-badge {
|
||||
position: relative;
|
||||
|
||||
.badge {
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.nav-link-text {
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -7px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: auto;
|
||||
content: '';
|
||||
transform: translate(-50%, -50%) rotate(100deg);
|
||||
border-left: 1px dashed #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overflow nav
|
||||
|
||||
.nav {
|
||||
&.overflow-x {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 1px;
|
||||
|
||||
.nav-item {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav used inside containers
|
||||
|
||||
.nav-header {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
//
|
||||
// Pagination
|
||||
//
|
||||
|
||||
|
||||
.pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
.page-link,
|
||||
& > span {
|
||||
margin: 0 3px;
|
||||
border-radius: $border-radius-sm;
|
||||
text-align: center;
|
||||
font-size: $pagination-font-size;
|
||||
@include box-shadow($pagination-box-shadow)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
//
|
||||
// Popover
|
||||
//
|
||||
|
||||
|
||||
.popover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.popover-#{$color} {
|
||||
@include popover-variant($value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
//
|
||||
// Progress
|
||||
//
|
||||
|
||||
|
||||
.progress-wrapper {
|
||||
position: relative;
|
||||
padding-top: 1.5rem;
|
||||
|
||||
.progress {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-inverse {
|
||||
background-color: inverse($progress-bg);
|
||||
}
|
||||
|
||||
.progress-heading {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
margin: 0 0 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
|
||||
.progress-lg {
|
||||
height: 1rem;
|
||||
}
|
||||
.progress-md {
|
||||
height: .75rem;
|
||||
}
|
||||
.progress-sm {
|
||||
height: .375rem;
|
||||
}
|
||||
.progress-xs {
|
||||
height: .125rem;
|
||||
}
|
||||
|
||||
|
||||
// Progress prepend icons
|
||||
|
||||
.progress-group {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.progress-prepend-icon {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
font-size: 20px;
|
||||
top: 50%;
|
||||
|
||||
&:not(:first-child) {
|
||||
right: -17px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
left: -17px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
body,
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
max-width: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.img-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
:root {
|
||||
@each $color, $value in $theme-colors {
|
||||
--#{$color}-dark: #{darken($value, 10%)};
|
||||
--#{$color}-light: #{lighten($value, 10%)};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
//
|
||||
// Section
|
||||
//
|
||||
|
||||
|
||||
section {
|
||||
background-color: section-color("primary");
|
||||
}
|
||||
|
||||
.slice {
|
||||
position: relative;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
.slice-xl {
|
||||
padding-top: $spacer * 8;
|
||||
padding-bottom: $spacer * 8;
|
||||
}
|
||||
|
||||
.slice-lg {
|
||||
padding-top: $spacer * 6;
|
||||
padding-bottom: $spacer * 6;
|
||||
}
|
||||
|
||||
.slice-sm {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
.slice:not(.border-top):not(.border-bottom):not(.delimiter-bottom):not([class*="bg-"]):not(.section-rotate) {
|
||||
& + .slice:not(.border-top):not(.border-bottom):not(.delimiter-top):not([class*="bg-"]) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slice-video {
|
||||
min-height: 600px;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
// SVG shapes used as separators or illustrations
|
||||
|
||||
.shape-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
transform: translateZ(0);
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
fill: $body-bg;
|
||||
pointer-events: none;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-position-top {
|
||||
top: 0;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.shape-position-bottom {
|
||||
bottom: 0;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.shape-orientation-inverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// Shapes
|
||||
|
||||
.shape-line {
|
||||
min-height: 19px;
|
||||
}
|
||||
|
||||
// IE fixes
|
||||
|
||||
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
|
||||
.ie-shape-line {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.ie-shape-wave-1 {
|
||||
height: 504px;
|
||||
}
|
||||
.ie-shape-wave-3 {
|
||||
height: 231px;
|
||||
}
|
||||
.ie-shape-clouds {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
//
|
||||
// Table
|
||||
//
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.table {
|
||||
thead th {
|
||||
padding-top: $table-head-spacer-y;
|
||||
padding-bottom: $table-head-spacer-y;
|
||||
font-size: $table-head-font-size;
|
||||
text-transform: $table-head-text-transform;
|
||||
letter-spacing: $table-head-letter-spacing;
|
||||
background-color: $table-head-bg;
|
||||
border-bottom-width: $table-border-width;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $table-head-font-weight;
|
||||
}
|
||||
|
||||
td {
|
||||
.progress {
|
||||
height: 3px;
|
||||
width: 120px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
font-size: $table-body-font-size;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
// Vetical align table content
|
||||
|
||||
&.align-items-center {
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styles for dark table
|
||||
|
||||
&.table-dark thead,
|
||||
.thead-dark {
|
||||
th {
|
||||
background-color: $table-dark-head-bg;
|
||||
color: $table-dark-head-color;
|
||||
|
||||
a {
|
||||
color: $table-dark-head-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styles for light table
|
||||
|
||||
.thead-light {
|
||||
th {
|
||||
background-color: $table-head-bg;
|
||||
color: $table-head-color;
|
||||
|
||||
a {
|
||||
color: $table-head-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add transition for hover state
|
||||
|
||||
.table-hover {
|
||||
tr {
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush tables
|
||||
|
||||
.table-flush {
|
||||
td,
|
||||
th {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:first-child {
|
||||
td,
|
||||
th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tables inside cards
|
||||
|
||||
.card {
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding-left: $card-spacer-x;
|
||||
padding-right: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fixes for custom elements inside tables
|
||||
|
||||
.table {
|
||||
.custom-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.feather {
|
||||
width: $svg-icon-size;
|
||||
height: $svg-icon-size;
|
||||
fill: none;
|
||||
stroke: currentcolor;
|
||||
stroke-width: $svg-icon-stroke-width;
|
||||
stroke-linecap: $svg-icon-stroke-linecap;
|
||||
stroke-linejoin: $svg-icon-stroke-linecap;
|
||||
}
|
||||
|
||||
.svg-text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
// bottom: .125rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
// Headings
|
||||
|
||||
h1, h2, h3,
|
||||
.h1, .h2, .h3 {
|
||||
font-weight: $large-headings-font-weight;
|
||||
}
|
||||
|
||||
h4, h5, h6,
|
||||
.h4, .h5, .h6 {
|
||||
font-weight: $small-headings-font-weight;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
a {
|
||||
color: $headings-color;
|
||||
|
||||
&:hover {
|
||||
color: theme-color("primary");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
@include transition($transition-base);
|
||||
}
|
||||
|
||||
// Surtitle
|
||||
|
||||
.surtitle {
|
||||
color: $surtitle-color;
|
||||
font-size: $surtitle-font-size;
|
||||
font-weight: $surtitle-font-weight;
|
||||
text-transform: $surtitle-text-transform;
|
||||
}
|
||||
|
||||
// Fluid paragraph
|
||||
|
||||
.fluid-paragraph {
|
||||
width: 680px;
|
||||
margin: auto;
|
||||
padding: 0 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fluid-paragraph-sm {
|
||||
width: 580px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.fluid-paragraph {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Text highlight
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.text-highlight-#{$color} {
|
||||
background-image: linear-gradient(transparent 66%, rgba($value, .15) 34%);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
|
||||
.link {
|
||||
@include transition($transition-base);
|
||||
}
|
||||
|
||||
[class*="link-underline-"] {
|
||||
padding-bottom: 8px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
@include border-radius($rounded-pill);
|
||||
@include transition($transition-cubic-bezier);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
width: calc(100% + 8px);
|
||||
left: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.link-underline-#{$color} {
|
||||
@include link-underline-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
|
||||
.blockquote {
|
||||
.quote {
|
||||
position: absolute;
|
||||
|
||||
&:before {
|
||||
font-family: Arial;
|
||||
content: "\201C";
|
||||
color: theme-color("primary");
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.quote + .quote-text {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.blockquote-border-left {
|
||||
border-left: .5rem solid theme-color("primary");
|
||||
}
|
||||
|
||||
.blockquote-card {
|
||||
padding: 1.2em 30px 1.2em 75px;
|
||||
border-left: .5rem solid theme-color("primary");
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
font-family: Arial;
|
||||
content: "\201C";
|
||||
color: theme-color("primary");
|
||||
font-size: 4em;
|
||||
position: absolute;
|
||||
left: .875rem;
|
||||
top: -.875rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
|
||||
.list-icons {
|
||||
li {
|
||||
i, svg {
|
||||
margin-right: 1rem;
|
||||
font-size: 8px;
|
||||
transform: translateY(-50%);
|
||||
top: 2px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Articles
|
||||
|
||||
article {
|
||||
h4:not(:first-child),
|
||||
h5:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
h4, h5 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 3rem 0;
|
||||
|
||||
+ h5 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
h5 + figure {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: $article-text-line-height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
//
|
||||
// Highlight.js
|
||||
//
|
||||
|
||||
|
||||
.highlight {
|
||||
background-color: darken(theme-color("dark"), 3%);
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
margin-bottom: 0;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #DCDCDC;
|
||||
|
||||
pre {
|
||||
code {
|
||||
color: #DCDCDC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-name {
|
||||
color: #569CD6;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
color: #569CD6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-type {
|
||||
color: #4EC9B0;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-class {
|
||||
color: #B8D7A3;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-meta-string {
|
||||
color: #D69D85;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-template-tag {
|
||||
color: #9A5334;
|
||||
}
|
||||
|
||||
.hljs-subst,
|
||||
.hljs-function,
|
||||
.hljs-title,
|
||||
.hljs-params,
|
||||
.hljs-formula {
|
||||
color: #DCDCDC;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #57A64A;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-doctag {
|
||||
color: #608B4E;
|
||||
}
|
||||
|
||||
.hljs-meta,
|
||||
.hljs-meta-keyword,
|
||||
.hljs-tag {
|
||||
color: #9B9B9B;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: #BD63C5;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-builtin-name {
|
||||
color: #9CDCFE;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #D7BA7D;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background-color: #144212;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background-color: #600;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@mixin alert-variant($background, $border, $color) {
|
||||
color: color-yiq($background);
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
|
||||
hr {
|
||||
border-top-color: darken($border, 5%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: color-yiq($background);
|
||||
font-weight: $font-weight-bold;
|
||||
border-bottom: 1px dashed color-yiq($background);
|
||||
}
|
||||
|
||||
.close > span:not(.sr-only) {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alert outline variant
|
||||
//
|
||||
|
||||
@mixin alert-outline-variant($border, $color) {
|
||||
background: transparent;
|
||||
color: $color;
|
||||
border-color: $border;
|
||||
|
||||
hr {
|
||||
border-top-color: lighten($border, 5%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.alert-group-prepend {
|
||||
border-right: 1px solid $border;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@mixin bg-variant($parent, $color, $ignore-warning: false) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus() {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
|
||||
}
|
||||
|
||||
// Gradient background variations
|
||||
|
||||
@mixin bg-gradient-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background: linear-gradient(50deg, $color 0, adjust-hue($color, 18%) 100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Translucent background variations
|
||||
|
||||
@mixin bg-translucent-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-soft-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
@include gradient-bg($color);
|
||||
}
|
||||
}
|
||||
|
||||
// SVG color classes
|
||||
|
||||
@mixin fill-soft-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
@include gradient-fill($color);
|
||||
}
|
||||
}
|
||||
|
||||
// Section background variations
|
||||
|
||||
@mixin bg-section-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// Badge Mixins
|
||||
// This is a custom mixin for badge-soft-#{color} variant of Bootstrap's .badge class
|
||||
//
|
||||
|
||||
@mixin badge-soft-variant($bg, $color) {
|
||||
color: $color;
|
||||
background-color: $bg;
|
||||
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
color: $color;
|
||||
text-decoration: none;
|
||||
background-color: darken($bg, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
// Button variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
|
||||
color: color-yiq($background);
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
@include hover {
|
||||
color: color-yiq($hover-background);
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-box-shadow, 0 0 $btn-focus-width rgba($background, .35);
|
||||
} @else {
|
||||
box-shadow: 0 0 $btn-focus-width rgba($background, .35);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: color-yiq($background);
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
// Remove CSS gradients if they're enabled
|
||||
@if $enable-gradients {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: color-yiq($active-background);
|
||||
background-color: $active-background;
|
||||
@if $enable-gradients {
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
}
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 $btn-focus-width rgba($background, .35);
|
||||
} @else {
|
||||
box-shadow: 0 0 $btn-focus-width rgba($background, .35);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button outline variants
|
||||
//
|
||||
|
||||
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
|
||||
@include hover {
|
||||
color: $color-hover;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: $btn-box-shadow, 0 0 $btn-focus-width rgba($color, .35);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: color-yiq($active-background);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows and $btn-active-box-shadow != none {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 $btn-focus-width rgba($color, .35);
|
||||
} @else {
|
||||
box-shadow: 0 0 $btn-focus-width rgba($color, .35);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button soft variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
@mixin button-soft-variant($background, $color, $hover-background: $color, $hover-color: color-yiq($color), $active-background: $color, $active-color: color-yiq($color)) {
|
||||
color: $color;
|
||||
@include gradient-bg($background);
|
||||
border-color: $background;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
@include hover {
|
||||
color: $hover-color;
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-background;
|
||||
@include box-shadow(0 4px 11px rgba($background, .35));
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $color, 15%), .5);
|
||||
} @else {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $color, 15%), .5);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
// Remove CSS gradients if they're enabled
|
||||
@if $enable-gradients {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $active-color;
|
||||
background-color: $active-background;
|
||||
@if $enable-gradients {
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
}
|
||||
border-color: $active-background;
|
||||
|
||||
&:focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $color, 15%), .5);
|
||||
} @else {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $color, 15%), .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
@mixin caret-down {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
@mixin caret-up {
|
||||
content: "\f106";
|
||||
}
|
||||
|
||||
@mixin caret-right {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
@mixin caret-left {
|
||||
content: "\f104";
|
||||
}
|
||||
|
||||
@mixin caret($direction: down) {
|
||||
@if $enable-caret {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: $icon-font-family;
|
||||
font-weight: 700;
|
||||
font-size: $caret-font-size;
|
||||
|
||||
@if $direction == down {
|
||||
@include caret-down;
|
||||
} @else if $direction == up {
|
||||
@include caret-up;
|
||||
} @else if $direction == right {
|
||||
@include caret-right;
|
||||
}
|
||||
}
|
||||
|
||||
@if $direction == left {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-family: $icon-font-family;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
margin-right: .5rem;
|
||||
@include caret-left;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@mixin gradient-fill($color) {
|
||||
@if $enable-gradients {
|
||||
fill: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
|
||||
} @else {
|
||||
fill: $color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@mixin icon-variant($bg, $color) {
|
||||
color: $color;
|
||||
background-color: $bg;
|
||||
}
|
||||
|
||||
@mixin icon-outline-variant($border-width, $color) {
|
||||
color: saturate(darken($color, 14%), 5);
|
||||
border: $border-width solid transparentize(lighten($color, 10%), .5);
|
||||
}
|
||||
|
||||
@mixin icon-font($content, $font-size) {
|
||||
content: $content;
|
||||
font-family: $icon-font-family;
|
||||
font-size: $font-size;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@mixin link-underline-variant($color) {
|
||||
color: $color;
|
||||
|
||||
&:after {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@mixin modal-variant($background) {
|
||||
.modal-title {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
border-color: rgba(color-yiq($background), .075);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
|
||||
.heading {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
&>span:not(.sr-only) {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@mixin popover-variant($background) {
|
||||
|
||||
background-color: $background;
|
||||
|
||||
.popover-header {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
.popover-header{
|
||||
border-color: rgba(color-yiq($background), .2);
|
||||
}
|
||||
&.bs-popover-top {
|
||||
.arrow::after {
|
||||
border-top-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-right {
|
||||
.arrow::after {
|
||||
border-right-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-bottom {
|
||||
.arrow::after {
|
||||
border-bottom-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-left {
|
||||
.arrow::after {
|
||||
border-left-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
// Pre-defined background colors based on variables
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-variant(".bg-light-#{$color}", lighten($value, 10%));
|
||||
@include bg-variant(".bg-dark-#{$color}", darken($value, 10%));
|
||||
@include bg-soft-variant(".bg-soft-#{$color}", theme-color-level($color, $bg-soft-bg-level));
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
@include bg-translucent-variant(".bg-translucent-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@include bg-variant(".bg-#{$color}", $value);
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $section-colors {
|
||||
@include bg-section-variant(".bg-section-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $brand-colors {
|
||||
@include bg-variant(".bg-brand-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $grays {
|
||||
@include bg-variant(".bg-gray-#{$color}", $value);
|
||||
}
|
||||
|
||||
@include bg-variant(".bg-black", $black);
|
||||
|
||||
// Fill, stroke and other svg color utilities
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
// Solid colors
|
||||
.fill-#{$color} {
|
||||
fill: $value !important;
|
||||
}
|
||||
|
||||
.fill-light-#{$color} {
|
||||
fill: lighten($value, 10%) !important;
|
||||
}
|
||||
|
||||
.fill-dark-#{$color} {
|
||||
fill: darken($value, 10%) !important;
|
||||
}
|
||||
|
||||
.stroke-#{$color} {
|
||||
stroke: $value !important;
|
||||
}
|
||||
|
||||
// Soft solid colors
|
||||
@include fill-soft-variant(".fill-soft-#{$color}", theme-color-level($color, $bg-soft-bg-level));
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
.fill-#{$color} {
|
||||
fill: $value !important;
|
||||
}
|
||||
|
||||
.stroke-#{$color} {
|
||||
stroke: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional shades for the $primary color
|
||||
|
||||
|
||||
.fill-primary-100 {
|
||||
fill: lighten($primary, 50%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-200 {
|
||||
fill: lighten($primary, 40%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-300 {
|
||||
fill: lighten($primary, 30%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-400 {
|
||||
fill: lighten($primary, 20%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-500 {
|
||||
fill: lighten($primary, 10%) !important;
|
||||
}
|
||||
|
||||
.fill-primary-600 {
|
||||
fill: lighten($primary, 5%) !important;
|
||||
}
|
||||
|
||||
|
||||
.stroke-primary-100 {
|
||||
stroke: lighten($primary, 50%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-200 {
|
||||
stroke: lighten($primary, 40%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-300 {
|
||||
stroke: lighten($primary, 30%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-400 {
|
||||
stroke: lighten($primary, 20%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-500 {
|
||||
stroke: lighten($primary, 10%) !important;
|
||||
}
|
||||
|
||||
.stroke-primary-600 {
|
||||
stroke: lighten($primary, 5%) !important;
|
||||
}
|
||||
|
||||
// SVG colors used for section backgrounds
|
||||
|
||||
@each $color, $value in $section-colors {
|
||||
.fill-section-#{$color} {
|
||||
fill: $value !important;
|
||||
}
|
||||
|
||||
.stroke-section-#{$color} {
|
||||
stroke: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Section gradieent bg
|
||||
|
||||
.bg-section-fade {
|
||||
background: linear-gradient(177.86deg, section-color("secondary") 0%, rgba(255, 255, 255, 0) 100%)
|
||||
}
|
||||
|
||||
// Image background - Covers
|
||||
|
||||
.bg-cover {
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.bg-absolute-cover {
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
|
||||
svg {
|
||||
height: 1000px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.bg-lg-cover {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.bg-md-cover {
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-size--cover {
|
||||
background: no-repeat center center/cover;
|
||||
}
|
||||
|
||||
.bg-size--contain {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
// Text background
|
||||
|
||||
.bg-text {
|
||||
color: rgba(255, 255, 255, .2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
white-space: nowrap;
|
||||
transform: translate(0%, -50%);
|
||||
text-transform: uppercase;
|
||||
font-size: 40rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bg-inner--text {
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
transition: 2s 0s;
|
||||
display: block;
|
||||
animation: text_slide 40s linear infinite;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
// Background image holder
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.bg-img-holder {
|
||||
background-image: none !important;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.bg-img-holder {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
min-height: 20rem;
|
||||
background-repeat: no-repeat;
|
||||
z-index: -1;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Image backshapes
|
||||
|
||||
.img-bg {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: none no-repeat 50%;
|
||||
background-image: none;
|
||||
background-size: auto auto;
|
||||
background-size: contain;
|
||||
width: 783px;
|
||||
height: 725px;
|
||||
left: 31px;
|
||||
top: -168px;
|
||||
z-index: 1;
|
||||
background-image: str-replace(url("data:image/svg+xml;charset=utf-8,%3Csvg width='783' height='726' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M606.14 725.179c144.64-.87 225.447-587.194 144.64-694.046-73.915-97.74-579.852 50.733-716.756 222.443-12.763 16.009-22.32 32.22-28.019 48.451-66.83 190.337 442.822 424.098 600.136 423.152z' fill='#{$secondary}' fill-rule='evenodd'/%3E%3C/svg%3E"), "#", "%23");
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Images as backgrounds
|
||||
|
||||
.img-as-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Blend modes
|
||||
|
||||
.blend-mode {
|
||||
&--multiply {
|
||||
mix-blend-mode: multiply;
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
&:after{
|
||||
content:'';
|
||||
background: transparentize(darken(blue, 8), .5);
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--color-burn {
|
||||
mix-blend-mode: color-burn;
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
&:after{
|
||||
content:'';
|
||||
background: transparentize(darken(blue, 8), .5);
|
||||
position: absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
//
|
||||
// Border
|
||||
//
|
||||
|
||||
|
||||
.border-sm { border-width: $border-width-sm !important;}
|
||||
.border-md { border-width: $border-width-md !important;}
|
||||
.border-lg { border-width: $border-width-lg !important;}
|
||||
|
||||
// Border style
|
||||
|
||||
.border-dashed { border-style: dashed !important; }
|
||||
.border-dotted { border-style: dotted !important; }
|
||||
.border-groove { border-style: groove !important; }
|
||||
|
||||
// Border radius
|
||||
|
||||
.rounded-xl {
|
||||
@include border-radius($border-radius-xl !important);
|
||||
}
|
||||
|
||||
.rounded-left-pill {
|
||||
@include border-left-radius($rounded-pill !important);
|
||||
}
|
||||
|
||||
.rounded-right-pill {
|
||||
@include border-right-radius($rounded-pill !important);
|
||||
}
|
||||
|
||||
.rounded-bottom-left {
|
||||
border-bottom-left-radius: 90px;
|
||||
}
|
||||
|
||||
// Border color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.border-soft-#{$color} {
|
||||
border-color: lighten($value, 20%) !important;
|
||||
}
|
||||
|
||||
.border-dark-#{$color} {
|
||||
border-color: darken($value, 5%) !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// Image alignment
|
||||
.img-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Image filters
|
||||
.img-grayscale {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.img-saturate {
|
||||
filter: saturate(150%)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
[class*="shadow"] {
|
||||
@if $enable-transitions {
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional shadow classes
|
||||
.shadow-xl { box-shadow: $box-shadow-xl !important; }
|
||||
.shadow-2xl { box-shadow: $box-shadow-2xl !important; }
|
||||
|
||||
// Shadow classes for hover
|
||||
.hover-shadow-sm:hover { box-shadow: $box-shadow-sm !important; }
|
||||
.hover-shadow:hover { box-shadow: $box-shadow !important; }
|
||||
.hover-shadow-lg:hover { box-shadow: $box-shadow-lg !important; }
|
||||
.hover-shadow-xl:hover { box-shadow: $box-shadow-xl !important; }
|
||||
.hover-shadow-2xl:hover { box-shadow: $box-shadow-2xl !important; }
|
||||
.shadow-none,
|
||||
.hover-shadow-none:hover { box-shadow: none !important; }
|
||||
|
||||
// Colored shadow classes
|
||||
@each $color, $value in $theme-colors {
|
||||
.shadow-#{$color}-sm {
|
||||
@include box-shadow(0 .125rem .25rem rgba(theme-color($color), .4) !important);
|
||||
}
|
||||
|
||||
.shadow-#{$color} {
|
||||
@include box-shadow(0 .5rem 1rem rgba(theme-color($color), .4) !important);
|
||||
}
|
||||
|
||||
.shadow-#{$color}-lg {
|
||||
@include box-shadow(0 1rem 3rem rgba(theme-color($color), .4) !important);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
// Height values in vh
|
||||
|
||||
.h-100vh {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (top: top) {
|
||||
@each $size, $length in $sizes {
|
||||
|
||||
// Spacing (for elements with absolute position)
|
||||
.mw#{$infix}-#{$size} {
|
||||
max-width: $length !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
// Spacing columns vertically
|
||||
|
||||
.row-grid {
|
||||
+ .row-grid {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
> [class*="col-"] + [class*="col-"] {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.row.row-grid {
|
||||
> [class*="col-lg-"] + [class*="col-lg-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.row.row-grid {
|
||||
> [class*="col-md-"] + [class*="col-md-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(sm) {
|
||||
.row.row-grid {
|
||||
> [class*="col-sm-"] + [class*="col-sm-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Spacing for elements with absolute position
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (top: top) {
|
||||
@each $size, $length in $spacers {
|
||||
|
||||
// Spacing (for elements with absolute position)
|
||||
.top#{$infix}-#{$size} {
|
||||
top: $length !important;
|
||||
}
|
||||
.right#{$infix}-#{$size} {
|
||||
right: $length !important;
|
||||
}
|
||||
.bottom#{$infix}-#{$size} {
|
||||
bottom: $length !important;
|
||||
}
|
||||
.left#{$infix}-#{$size} {
|
||||
left: $length !important;
|
||||
}
|
||||
|
||||
// Negative spacing
|
||||
.top#{$infix}-n#{$size} {
|
||||
top: -$length !important;
|
||||
}
|
||||
.right#{$infix}-n#{$size} {
|
||||
right: -$length !important;
|
||||
}
|
||||
.bottom#{$infix}-n#{$size} {
|
||||
bottom: -$length !important;
|
||||
}
|
||||
.left#{$infix}-n#{$size} {
|
||||
left: -$length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.middle {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Negative margin: works with negative-margin.js
|
||||
|
||||
[data-negative-margin] {
|
||||
&.is_stuck {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
// Weight and italics
|
||||
|
||||
.font-weight-300 { font-weight: 300 !important; }
|
||||
.font-weight-400 { font-weight: 400 !important; }
|
||||
.font-weight-500 { font-weight: 500 !important; }
|
||||
.font-weight-600 { font-weight: 600 !important; }
|
||||
.font-weight-700 { font-weight: 700 !important; }
|
||||
.font-weight-800 { font-weight: 800 !important; }
|
||||
.font-weight-900 { font-weight: 900 !important; }
|
||||
|
||||
.font-weight-bolder { font-weight: $font-weight-bolder !important; }
|
||||
|
||||
// Text decorations
|
||||
|
||||
.text-underline {
|
||||
text-decoration: underline !important;
|
||||
|
||||
&--dashed {
|
||||
border-bottom: 1px dashed !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text-line-through { text-decoration: line-through !important; }
|
||||
|
||||
// Contextual colors
|
||||
|
||||
a.text-muted {
|
||||
&:hover {
|
||||
color: $text-muted-hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Text size
|
||||
|
||||
.text-xs { font-size: $font-size-xs !important; }
|
||||
.text-sm { font-size: $font-size-sm !important; }
|
||||
.text-lg { font-size: $font-size-lg !important; }
|
||||
.text-xl { font-size: $font-size-xl !important; }
|
||||
|
||||
// Line heights
|
||||
|
||||
.lh-100 { line-height: 1 !important; }
|
||||
.lh-110 { line-height: 1.1 !important; }
|
||||
.lh-120 { line-height: 1.2 !important; }
|
||||
.lh-130 { line-height: 1.3 !important; }
|
||||
.lh-140 { line-height: 1.4 !important; }
|
||||
.lh-150 { line-height: 1.5 !important; }
|
||||
.lh-160 { line-height: 1.6 !important; }
|
||||
.lh-170 { line-height: 1.7 !important; }
|
||||
.lh-180 { line-height: 1.8 !important; }
|
||||
.lh-190 { line-height: 1.9 !important; }
|
||||
.lh-200 { line-height: 2 !important; }
|
||||
|
||||
|
||||
// Letter spacings
|
||||
|
||||
.ls-1 { letter-spacing: .0625rem !important; }
|
||||
.ls-15 { letter-spacing: .09375rem !important; }
|
||||
.ls-2 { letter-spacing: 0.125rem !important; }
|
||||
|
||||
|
||||
// Fluid title with elipsis ending
|
||||
|
||||
.text-limit {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.zindex-0 {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
.zindex-100 {
|
||||
z-index: 100 !important;
|
||||
}
|
||||
.zindex-101 {
|
||||
z-index: 101 !important;
|
||||
}
|
||||
.zindex-102 {
|
||||
z-index: 102 !important;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
//
|
||||
// Fonts
|
||||
//
|
||||
|
||||
|
||||
// Import fonts from Google
|
||||
//
|
||||
// Using the $font variable you can import any font family from Google Fonts.
|
||||
// go to https://fonts.google.com copy and paste the URL of the selected font from the @import tab
|
||||
// (e.g: https://fonts.googleapis.com/css?family=Nunito) and peste it in the _variables.scss from the custom folder
|
||||
|
||||
@import url(#{$font});
|
||||
|
||||
// Create font from local font
|
||||
//
|
||||
// if you want to create a custom font family, first comment the @import from line 12.
|
||||
// copy and paste you font files in assets/fonts (you might need to create the folder)
|
||||
//
|
||||
// use this file to create the @font-face
|
||||
// open custom/_variables.scss uncomment and replace the $font-family-custom-sans-serif value with the CUSTOM_FONT face you created
|
||||
|
||||
// Font face example
|
||||
|
||||
// @font-face {
|
||||
// font-family: "CUSTOM_FONT";
|
||||
// src: url("CUSTOM_FONT.eot");
|
||||
// src: url("CUSTOM_FONT.woff") format("woff"),
|
||||
// url("CUSTOM_FONT.otf") format("opentype"),
|
||||
// url("CUSTOM_FONT.svg#filename") format("svg");
|
||||
// }
|
||||
@@ -0,0 +1,4 @@
|
||||
// User styles
|
||||
//
|
||||
// This is the place where you should place all additional styles and imports.
|
||||
// This will allow you to take advantage of future updates with lower time consumed on the upgrade process.
|
||||
@@ -0,0 +1,29 @@
|
||||
// Variables
|
||||
//
|
||||
// Variables should follow the `$component-state-property-size` formula for
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
|
||||
// Skins
|
||||
//
|
||||
// We recommend that all the variables that are staying at the core of your product's styleguide (colors, typography) to be separated in a custom skin
|
||||
// you can start by using one of the pre-built ones or, simply, create a new one
|
||||
// learn more about how to create your skin by reading the theme's documentation.
|
||||
//
|
||||
// Below you can find 3 pre-defined skins. You can uncomment any one of them and compile Sass using the build tools
|
||||
|
||||
// @import "../skins/green/light";
|
||||
// @import "../skins/green/dark";
|
||||
|
||||
// Fonts
|
||||
//
|
||||
// uncomment and replace the $font and $font-family-custom-sans-serif value with any URL and font family name from Google Fonts
|
||||
//
|
||||
|
||||
// $font: "https://fonts.googleapis.com/css?family=Nunito:300,400,600,700" !default;
|
||||
// $font-family-custom-sans-serif: "Nunito", sans-serif !default;
|
||||
// $font-family-base: $font-family-custom-sans-serif !default;
|
||||
|
||||
// Custom variables
|
||||
//
|
||||
// Need additional variables? Simply create it here and make sure you follow the naming formula explained at the top of this file.
|
||||
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
|
||||
Theme: Quick – Website UI Kit (FREE)
|
||||
Version: 1.1.0
|
||||
Product Page: https://webpixels.io/themes/quick-website-ui-kit
|
||||
License: MIT
|
||||
Author: Webpixels
|
||||
Author URI: https://webpixels.io
|
||||
|
||||
---
|
||||
|
||||
Copyright 2020 Webpixels
|
||||
|
||||
*/
|
||||
|
||||
// Bootstrap functions
|
||||
@import "../../../node_modules/bootstrap/scss/functions";
|
||||
|
||||
// Custom variables
|
||||
@import "custom/variables";
|
||||
|
||||
// Quick functions
|
||||
@import "core/functions";
|
||||
|
||||
@import "core/variables";
|
||||
|
||||
// Custom fonts
|
||||
@import "custom/fonts";
|
||||
|
||||
// Bootstrap core
|
||||
@import "../../../node_modules/bootstrap/scss/functions";
|
||||
@import "../../../node_modules/bootstrap/scss/variables";
|
||||
@import "../../../node_modules/bootstrap/scss/mixins";
|
||||
|
||||
// Quick mixins
|
||||
@import "core/mixins";
|
||||
|
||||
// Bootstrap components
|
||||
@import "core/bootstrap";
|
||||
|
||||
// Quick utilities
|
||||
@import "core/utilities";
|
||||
|
||||
// Quick components
|
||||
@import "core/components";
|
||||
|
||||
// Quick libs
|
||||
@import "core/libs";
|
||||
|
||||
// Custom styles (User's file)
|
||||
@import "custom/styles";
|
||||
@@ -0,0 +1,186 @@
|
||||
//
|
||||
// Skin: Blue
|
||||
// Mode: Dark
|
||||
//
|
||||
|
||||
$white: #FFFFFF !default;
|
||||
$gray-100: #F9FBFD !default;
|
||||
$gray-200: #EDF2F9 !default;
|
||||
$gray-300: #E3EBF6 !default;
|
||||
$gray-400: #D2DDEC !default;
|
||||
$gray-500: #B1C2D9 !default;
|
||||
$gray-600: #95AAC9 !default;
|
||||
$gray-700: #6E84A3 !default;
|
||||
$gray-800: #3B506C !default;
|
||||
$gray-900: #283E59 !default;
|
||||
$black: #12263F !default;
|
||||
|
||||
// Gray shades for dark mode
|
||||
|
||||
$gray-600-dark: lighten($black, 6.5%) !default;
|
||||
$gray-700-dark: lighten($black, 7.5%) !default;
|
||||
$gray-800-dark: lighten($black, 3.5%) !default;
|
||||
$gray-900-dark: lighten($black, 2%) !default;
|
||||
$black-dark: $black !default;
|
||||
|
||||
// Colors
|
||||
|
||||
$green: #2DCA8C !default;
|
||||
|
||||
// Theme colors
|
||||
|
||||
$primary: $green !default;
|
||||
$secondary: $gray-700 !default;
|
||||
$neutral: $gray-900 !default;
|
||||
$light: $gray-600-dark !default;
|
||||
$dark: $gray-800-dark !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $black-dark !default;
|
||||
$body-color: $gray-600 !default;
|
||||
|
||||
|
||||
// Sections
|
||||
|
||||
$section-colors: () !default;
|
||||
$section-colors: map-merge((
|
||||
"primary": $body-bg,
|
||||
"secondary": darken($body-bg, 1.5%),
|
||||
"light": $gray-800-dark,
|
||||
"dark": darken($body-bg, 2%)
|
||||
), $section-colors);
|
||||
|
||||
// Border
|
||||
|
||||
$border-color: $gray-700-dark !default;
|
||||
|
||||
// Components
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: darken($primary, 5%) !default;
|
||||
$component-active-border-color: darken($primary, 5%) !default;
|
||||
|
||||
$component-hover-color: $gray-900 !default;
|
||||
$component-hover-bg: $gray-900 !default;
|
||||
$component-hover-border-color: $gray-900 !default;
|
||||
|
||||
// Headings
|
||||
|
||||
$headings-color: $gray-300 !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-box-shadow: inset 0 1px 0 rgba($black, .15) !default;
|
||||
$btn-active-box-shadow: $btn-box-shadow !default;
|
||||
|
||||
// Inputs
|
||||
|
||||
$input-bg: $gray-700-dark !default;
|
||||
$input-disabled-bg: $gray-200 !default;
|
||||
|
||||
$input-color: $white !default;
|
||||
$input-border-color: $gray-900-dark !default;
|
||||
|
||||
$input-placeholder-color: $gray-600 !default;
|
||||
|
||||
$custom-control-indicator-bg: $gray-600-dark !default;
|
||||
|
||||
// Card
|
||||
|
||||
$card-bg: $gray-800-dark !default;
|
||||
$card-border-color: $border-color !default;
|
||||
$card-color: $body-color !default;
|
||||
|
||||
// Avatar
|
||||
|
||||
$avatar-stack-border-color: $gray-800-dark !default;
|
||||
|
||||
// Dropdown
|
||||
|
||||
$dropdown-bg: $dark !default;
|
||||
$dropdown-border-color: $border-color !default;
|
||||
$dropdown-divider-bg: $black !default;
|
||||
$dropdown-heading-color: $gray-500 !default;
|
||||
|
||||
$dropdown-link-color: $gray-700 !default;
|
||||
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: transparent !default;
|
||||
|
||||
// Divider
|
||||
|
||||
$divider-border-color: $white !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dropdown-bg: $dark !default;
|
||||
$navbar-dropdown-heading-color: lighten($gray-300, 7%) !default;
|
||||
|
||||
$navbar-dropdown-link-color: $gray-500 !default;
|
||||
$navbar-dropdown-link-bg: transparent !default;
|
||||
|
||||
$navbar-dropdown-link-hover-color: lighten($navbar-dropdown-link-color, 20%) !default;
|
||||
$navbar-dropdown-link-hover-bg: lighten($navbar-dropdown-bg, 3%) !default;
|
||||
|
||||
$navbar-dropdown-link-active-color: $navbar-dropdown-link-hover-color !default;
|
||||
$navbar-dropdown-link-active-bg: transparent !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-bg: $gray-900-dark !default;
|
||||
$list-group-border-color: rgba(lighten($list-group-bg, 15%), .3) !default;
|
||||
|
||||
$list-group-hover-bg: lighten($list-group-bg, 3%) !default;
|
||||
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border-color: $list-group-active-bg !default;
|
||||
|
||||
$list-group-disabled-color: $gray-600 !default;
|
||||
$list-group-disabled-bg: $list-group-bg !default;
|
||||
|
||||
$list-group-action-color: $gray-700 !default;
|
||||
$list-group-action-hover-color: $list-group-action-color !default;
|
||||
|
||||
$list-group-action-active-color: $list-group-action-color !default;
|
||||
$list-group-action-active-bg: darken($list-group-bg, 3%) !default;
|
||||
|
||||
// Modal
|
||||
|
||||
$modal-content-bg: $card-bg !default;
|
||||
$modal-header-border-color: $card-border-color !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $gray-300 !default;
|
||||
$pagination-bg: $gray-900 !default;
|
||||
$pagination-border-color: $gray-900 !default;
|
||||
|
||||
$pagination-hover-color: $gray-200 !default;
|
||||
$pagination-hover-bg: $gray-800 !default;
|
||||
$pagination-hover-border-color: $gray-800 !default;
|
||||
|
||||
$pagination-active-color: $component-active-color !default;
|
||||
$pagination-active-bg: $component-active-bg !default;
|
||||
$pagination-active-border-color: $pagination-active-bg !default;
|
||||
|
||||
$pagination-disabled-color: $gray-500 !default;
|
||||
$pagination-disabled-bg: $gray-800 !default;
|
||||
$pagination-disabled-border-color: $gray-800 !default;
|
||||
|
||||
// Progress
|
||||
|
||||
$progress-bg: $gray-800 !default;
|
||||
|
||||
// Table
|
||||
|
||||
$table-bg: transparent !default;
|
||||
$table-accent-bg: rgba($black, .3) !default;
|
||||
$table-hover-bg: $black !default;
|
||||
$table-active-bg: $table-hover-bg !default;
|
||||
$table-border-color: $black !default;
|
||||
|
||||
// Tooltip
|
||||
|
||||
$tooltip-bg: $gray-800 !default;
|
||||
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Skin: Green
|
||||
// Mode: Light
|
||||
//
|
||||
|
||||
$green: #2DCA8C !default;
|
||||
|
||||
$primary: $green !default;
|
||||
Reference in New Issue
Block a user