v1
This commit is contained in:
s-lnk
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user