v2 first commit

This commit is contained in:
denisdulici
2019-11-16 10:21:14 +03:00
parent 5b23e9c2c4
commit 6d50fa8442
3075 changed files with 3451681 additions and 65594 deletions

View File

@ -0,0 +1,48 @@
//
// Dismissible alert
//
.alert-dismissible {
.close {
top: 50%;
right: $alert-padding-x;
transform: translateY(-50%);
padding: 0;
opacity: 1;
@include media-breakpoint-down(xs) {
top: 1rem;
right: .5rem;
}
&>span:not(.sr-only) {
font-size: 1.5rem;
background-color: transparent;
color: rgba($white, .6);
}
&:hover,
&:focus {
&>span:not(.sr-only) {
background-color: transparent;
color: rgba($white, 1);
}
}
}
}
.alert-secondary {
.close {
&>span:not(.sr-only) {
color: rgba(theme-color("default"), .6);
}
&:hover,
&:focus {
&>span:not(.sr-only) {
color: rgba(theme-color("default"), 1);
}
}
}
}

View File

@ -0,0 +1,47 @@
//
// Alert notify
// work together with Bootstrap alerts and bootstrap-notify plugin
//
.alert-notify {
display: flex !important;
max-width: 600px;
width: calc(100% - 30px);
padding-right: 80px;
box-shadow: 0 3px 10px rgba($black, 0.15);
color: rgba($white, 0.85);
&:hover {
z-index: 1081 !important;
}
&:not(.alert-info):not(.alert-success):not(.alert-warning):not(.alert-danger) {
background-color: rgba($black, .95);
.alert-notify-close {
color: $yellow;
&:hover {
opacity: .8;
}
}
}
.alert-icon.ni {
position: relative;
top: 4px;
}
.alert-title {
display: block;
font-size: $font-size-base;
font-weight: $font-weight-bold;
}
.close {
top: $alert-padding-y !important;
right: $alert-padding-x !important;
transform: translateY(0);
}
}

View File

@ -0,0 +1,49 @@
//
// Alert
//
.alert {
font-size: $font-size-sm;
}
// Alert heading
.alert-heading {
font-weight: $font-weight-bold;
font-size: $h4-font-size;
margin-top: .15rem;
}
// Alert icon
.alert-icon {
font-size: 1.25rem;
margin-right: 1.25rem;
display: inline-block;
vertical-align: middle;
i.ni {
position: relative;
top: 2px;
}
}
// Alert text next to an alert icon
.alert-text {
display: inline-block;
vertical-align: middle;
}
// Alert links
[class*="alert-"] {
.alert-link {
color: $white;
border-bottom: 1px dotted rgba($white, .5);
}
}

View File

@ -0,0 +1,22 @@
//
// Avatar group
//
// General styles
.avatar-group {
.avatar {
position: relative;
z-index: 2;
border: 2px solid $card-bg;
&:hover {
z-index: 3;
}
}
.avatar + .avatar {
margin-left: -1rem;
}
}

View File

@ -0,0 +1,59 @@
//
// Avatar
//
// General styles
.avatar {
color: $white;
background-color: $gray-500;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: $border-radius;
height: 48px;
width: 48px;
img {
width: 100%;
border-radius: $border-radius;
}
&.rounded-circle {
img {
@extend .rounded-circle;
}
}
+ .avatar-content {
display: inline-block;
margin-left: .75rem;
}
}
// Avatar size variations
.avatar-xl {
width: 74px;
height: 74px;
}
.avatar-lg {
width: 58px;
height: 58px;
font-size: $font-size-sm;
}
.avatar-sm {
width: 36px;
height: 36px;
font-size: $font-size-sm;
}
.avatar-xs {
width: 24px;
height: 24px;
font-size: $font-size-xs;
}

View File

@ -0,0 +1,29 @@
//
// Circle badge
//
// General styles
.badge-circle {
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0 !important;
width: 1.25rem;
height: 1.25rem;
font-size: .75rem;
font-weight: 600;
&.badge-md {
width: 1.5rem;
height: 1.5rem;
}
&.badge-lg {
width: 2rem;
height: 2rem;
}
}

View File

@ -0,0 +1,42 @@
//
// Dot badge
//
// General styles
.badge-dot {
padding-left: 0;
padding-right: 0;
background: transparent;
font-weight: $font-weight-normal;
font-size: $font-size-sm;
text-transform: none;
strong {
color: $gray-800;
}
i {
display: inline-block;
vertical-align: middle;
width: .375rem;
height: .375rem;
border-radius: 50%;
margin-right: .375rem;
}
&.badge-md {
i {
width: .5rem;
height: .5rem;
}
}
&.badge-lg {
i {
width: .625rem;
height: .625rem;
}
}
}

View File

@ -0,0 +1,18 @@
//
// Badge floating
//
.btn {
.badge-floating {
position: absolute;
top: -50%;
transform: translateY(50%);
border: 3px solid;
right: -12px;
&.badge:not(.badge-circle) {
transform: translate(-20%, 50%);
}
}
}

View File

@ -0,0 +1,67 @@
//
// Badge
//
// General styles
.badge {
text-transform: $badge-text-transfom;
a {
color: $white;
}
}
// Size variations
.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;
}
}
}
// Color fixes
.badge-default {
color: $white;
}
.badge-secondary {
background-color: theme-color("secondary");
color: color-yiq(theme-color("secondary"));
}
// Badge spacing inside a btn with some text
.btn {
.badge {
&:not(:first-child) {
margin-left: .5rem;
}
&:not(:last-child) {
margin-right: .5rem;
}
}
}

View File

@ -0,0 +1,42 @@
//
// Breadcrumb
//
.breadcrumb-item {
font-size: $font-size-sm;
}
.breadcrumb-dark {
background-color: $breadcrumb-dark-bg;
.breadcrumb-item {
font-weight: 600;
a {
color: $breadcrumb-dark-color;
&:hover {
color: $breadcrumb-dark-hover-color;
}
}
+ .breadcrumb-item {
&::before {
color: $breadcrumb-dark-divider-color;
}
}
&.active {
color: $breadcrumb-dark-active-color;
}
}
}
// Links
.breadcrumb-links {
padding: 0;
margin: 0;
background: transparent;
}

View File

@ -0,0 +1,12 @@
//
// Brand buttons
//
// Color variations
@each $color, $value in $brand-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}

View File

@ -0,0 +1,79 @@
//
// Button group
//
// General
.btn-group {
.btn {
box-shadow: none;
}
}
// Colors
[data-toggle="buttons"]:not(.btn-group-colors) {
& > .btn {
background-color: $gray-100;
cursor: pointer;
box-shadow: none;
border: 0;
margin: 0;
&:not(.active) {
color: $body-color;
}
&.active {
background-color: theme-color("primary");
color: color-yiq(theme-color("primary"));
}
}
}
.btn-group-colors {
& > .btn {
box-shadow: none;
border-radius: 50% !important;
width: 30px;
height: 30px;
padding: 0;
margin-right: .5rem;
margin-bottom: .25rem;
position: relative;
&:not([class*="bg-"]) {
border-color: $gray-100 !important;
}
&:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 28px;
color: $white;
transform: scale(0);
opacity: 0;
@include icon-font('\ea26', 14px);
@include transition(transform 200ms, opacity 200ms);
}
&.btn:not([class*="bg-"]) {
border: 1px solid darken($input-border-color, 5%);
&:before {
color: $body-color;
}
}
&.active {
&:before {
transform: scale(1);
opacity: 1;
}
}
}
}

View File

@ -0,0 +1,92 @@
//
// Icon buttons
//
.btn-icon {
.btn-inner--icon {
img {
width: 20px;
}
}
.btn-inner--text:not(:first-child) {
margin-left: 0.75em;
}
.btn-inner--text:not(:last-child) {
margin-right: 0.75em;
}
}
// Button only with icon and NO text
.btn-icon-only {
width: 2.375rem;
height: 2.375rem;
padding: 0;
}
a.btn-icon-only {
line-height: 2.5;
}
.btn-icon-only.btn-sm {
width: 2rem;
height: 2rem;
}
//
// Clipboard button
// dedicated element for copying icons
//
.btn-icon-clipboard {
margin: 0;
padding: 1.5rem;
font-size: $font-size-base;
font-weight: $font-weight-normal;
line-height: 1.25;
color: $gray-800;
background-color: $gray-100;
border-radius: $border-radius;
border: 0;
text-align: left;
font-family: inherit;
display: inline-block;
vertical-align: middle;
text-decoration: none;
-moz-appearance: none;
cursor: pointer;
width: 100%;
margin: .5rem 0;
&:hover {
background-color: $white;
box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px, rgba(0, 0, 0, .1) 0 4px 16px;
}
> div {
align-items: center;
display: flex;
}
i {
box-sizing: content-box;
color: theme-color("primary");
vertical-align: middle;
font-size: 1.5rem;
}
span {
display: inline-block;
font-size: 0.875rem;
line-height: 1.5;
margin-left: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
}
}

View File

@ -0,0 +1,90 @@
//
// Icon buttons
//
// General styles
.btn {
position: relative;
text-transform: $btn-text-transform;
transition: $transition-base;
letter-spacing: $btn-letter-spacing;
font-size: $input-btn-font-size;
will-change: transform;
&:hover {
@include box-shadow($btn-hover-box-shadow);
transform: translateY($btn-hover-translate-y);
}
&:not(:last-child) {
margin-right: .5rem;
}
// Icons
i:not(:first-child),
svg:not(:first-child) {
margin-left: .5rem;
}
i:not(:last-child),
svg:not(:last-child) {
margin-right: .5rem;
}
}
// Remove translateY and margin animation when btn is included in a btn-group or input-group
.btn-group,
.input-group {
.btn {
margin-right: 0;
transform: translateY(0);
}
}
// Size variations
.btn-sm {
font-size: $input-btn-font-size-sm;
}
.btn-lg {
font-size: $input-btn-font-size-lg;
}
// Some quick fixes (to revise)
// Fixes
[class*="btn-outline-"] {
border-width: 1px;
}
.btn-outline-secondary {
color: darken(theme-color("secondary"), 50%);
}
.btn-inner--icon {
i:not(.fas):not(.fab) {
position: relative;
top: 2px;
}
}
.btn-link {
font-weight: $btn-font-weight;
box-shadow: none;
&:hover {
box-shadow: none;
transform: none;
}
}
.btn-neutral {
color: theme-color("primary");
}

View File

@ -0,0 +1,10 @@
//
// Card with hover animations
//
.card-lift--hover {
&:hover {
transform: translateY(-20px);
@include transition($transition-base);
}
}

View File

@ -0,0 +1,17 @@
//
// Card with blockquote
//
.card-blockquote {
padding: 2rem;
position: relative;
.svg-bg {
display: block;
width: 100%;
height: 95px;
position: absolute;
top: -94px;
left: 0;
}
}

View File

@ -0,0 +1,27 @@
//
// Money card
// A visual representation of a credit/debit card
//
.card-serial-number {
display: flex;
justify-content: space-between;
font-size: $h1-font-size;
> div:not(:last-child) {
display: flex;
flex: 1 1 auto;
&:after {
content: "-";
flex: 1 1 auto;
text-align: center;
position: relative;
left: -2px;
}
}
@include media-breakpoint-down(xs) {
font-size: $h3-font-size;
}
}

View File

@ -0,0 +1,26 @@
//
// Pricing card
//
.card-pricing {
.card-header {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.list-unstyled li {
padding: .5rem 0;
color: $gray-600;
}
}
.card-pricing.popular {
z-index: 1;
border: 3px solid theme-color("primary") !important;
}
@include media-breakpoint-up(md) {
.card-pricing.zoom-in {
z-index: 1;
transform: scale(1.1);
}
}

View File

@ -0,0 +1,49 @@
//
// Profile card
//
.card-profile-image {
position: relative;
img {
max-width: 140px;
border-radius: $border-radius;
border: 3px solid $card-bg;
transform: translate(-50%,-50%) scale(1);
position: absolute;
left: 50%;
transition: $transition-base;
&:hover {
transform: translate(-50%,-50%) scale(1.03);
}
}
}
.card-profile-stats {
padding: 1rem 0;
> div {
text-align: center;
margin-right: 1rem;
padding: .875rem;
&:last-child {
margin-right: 0;
}
.heading {
font-size: 1.1rem;
font-weight: bold;
display: block;
}
.description {
font-size: .875rem;
color: $gray-500;
}
}
}
.card-profile-actions {
padding: .875rem;
}

View File

@ -0,0 +1,16 @@
//
// Card stats
//
.card-stats {
.card-body {
padding: 1rem 1.5rem;
}
.card-status-bullet {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
}

View File

@ -0,0 +1,69 @@
//
// Card
//
.card {
margin-bottom: $grid-gutter-width;
@if $enable-shadows {
box-shadow: $card-box-shadow;
border: 0;
}
}
.card-translucent {
background-color: rgba(18, 91, 152, 0.08);
}
.card-img-top {
@if ($enable-shadows == false) {
width: calc(100% + 2px);
margin-left: -1px;
margin-top: -1px;
}
}
.card-img-bottom {
@if ($enable-shadows == false) {
width: calc(100% + 2px);
margin-left: -1px;
margin-bottom: -1px;
}
}
// Card decks
.card-deck {
.card {
margin-bottom: $grid-gutter-width;
}
}
// Card with shdadow
.card {
&.shadow {
border: 0 !important;
}
}
//
// Columns
//
.card-columns {
@include media-breakpoint-up(sm) {
column-count: 1;
}
@include media-breakpoint-up(md) {
column-count: 2;
}
@include media-breakpoint-up(xl) {
column-count: $card-columns-count;
column-gap: $card-columns-gap;
}
}

View File

@ -0,0 +1,69 @@
//
// Chart
//
.chart {
position: relative;
height: $chart-height;
}
// Size variations
.chart-sm {
height: $chart-height-sm;
}
// Legend
.chart-legend {
display: flex;
justify-content: center;
margin-top: $chart-legend-margin-top;
font-size: $chart-legend-font-size;
text-align: center;
color: $chart-legend-color;
}
.chart-legend-item {
display: inline-flex;
align-items: center;
+ .chart-legend-item {
margin-left: 1rem;
}
}
.chart-legend-indicator {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-right: 0.375rem;
border-radius: 50%;
}
// Tooltip
#chart-tooltip {
z-index: 0;
.arrow {
top: 100%;
left: 50%;
transform: translateX(-50%) translateX(-.5rem);
}
}
// Chart info overlay
.chart-info-overlay {
position: absolute;
top: 0;
left: 5%;
max-width: 350px;
padding: 20px;
z-index: 1;
}

View File

@ -0,0 +1,47 @@
//
// Close
//
.close {
@if $enable-transitions {
transition: $transition-base;
}
&>span:not(.sr-only) {
background-color: $close-bg;
color: $close-color;
line-height: 17px;
height: 1.25rem;
width: 1.25rem;
border-radius: 50%;
font-size: 1.25rem;
display: block;
@if $enable-transitions {
transition: $transition-base;
}
}
&:hover,
&:focus {
background-color: $close-hover-bg;
color: $close-hover-color;
outline: none;
span:not(.sr-only) {
background-color: $close-hover-bg;
}
}
}
.close-dark {
&>span:not(.sr-only) {
color: rgba(255, 255, 255, .8);
}
&:hover,
&:focus {
&>span:not(.sr-only) {
color: rgba(255, 255, 255, 1);
}
}
}

View File

@ -0,0 +1,38 @@
//
// Accordion
//
.accordion {
.card-header {
position: relative;
cursor: pointer;
&:after {
content: "\ea0f";
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
font: normal normal normal 14px/1 NucleoIcons;
line-height: 0;
@include transition($transition-cubic-bezier);
}
}
.card-header[aria-expanded="false"] {
&:after {
content: "\ea0f";
}
}
.card-header[aria-expanded="true"] {
&:after {
transform: rotate(180deg);
}
.heading {
color: theme-color("primary");
}
}
}

View File

@ -0,0 +1,17 @@
.main-content {
position: relative;
// Navbar
.navbar-top {
padding-left: 0 !important;
padding-right: 0 !important;
}
// Container
.container-fluid {
@include media-breakpoint-up(md) {
padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important;
padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important;
}
}
}

View File

@ -0,0 +1,47 @@
//
// Custom checkbox
//
.custom-checkbox {
.custom-control-input ~ .custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
height: $custom-control-indicator-size;
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}
// Color variations
@each $color, $value in $theme-colors {
.custom-checkbox-#{$color} {
@include custom-checkbox-variant($value);
}
}

View File

@ -0,0 +1,58 @@
//
// Custom control
// additional styles for custom checkboxes, radios and other
//
.custom-control-label {
// Background-color and (when enabled) gradient
&::before {
border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
@include transition($input-transition);
top:($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size - 1rem);
}
&::after{
top:($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
left: -($custom-control-gutter + $custom-control-indicator-size - 1rem);
}
span {
position: relative;
top: 2px;
}
}
.custom-control-label {
margin-bottom: 0;
}
// Alternative style
.custom-control-alternative {
.custom-control-label {
// Background-color and (when enabled) gradient
&::before {
border: 0;
box-shadow: $input-alternative-box-shadow;
}
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
box-shadow: $input-focus-alternative-box-shadow;
}
}
}
&:active~.custom-control-label::before,
&:focus~.custom-control-label::before {
box-shadow: $input-alternative-box-shadow;
}
}
}

View File

@ -0,0 +1,45 @@
//
// Custom checkbox
//
.custom-control {
padding-left: 1.75rem;
}
.custom-checkbox {
.custom-control-input ~ .custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
&:after,
&:before {
left: -1.75rem
}
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-checkbox-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}

View File

@ -0,0 +1,38 @@
//
// Custom radio
//
.custom-radio {
.custom-control-input ~ .custom-control-label {
cursor: pointer;
font-size: $font-size-sm;
height: $custom-control-indicator-size;
}
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
background-image: $custom-radio-indicator-icon-checked;
}
}
}
&:disabled {
~ .custom-control-label {
&::before {
border-color: $custom-control-indicator-disabled-bg;
}
}
&:checked {
&::before {
border-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
}
}

View File

@ -0,0 +1,122 @@
//
// Custom toggle
//
.custom-toggle {
position: relative;
display: inherit;
width: $custom-toggle-width;
height: 1.5rem;
margin: 0;
display: inline-block;
input {
display: none;
&:checked {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
&:before {
background: $custom-toggle-checked-bg;
transform: translateX(28px);
}
}
}
&:disabled {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
}
&:checked {
+ .custom-toggle-slider {
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
&:before {
background-color: lighten($custom-control-indicator-checked-bg, 10%);
}
}
}
}
}
}
.custom-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: $custom-control-indicator-border-width solid $custom-toggle-border-color;
border-radius: 34px !important;
background-color: transparent;
&:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
border-radius: 50% !important;
background-color: $custom-toggle-slider-bg;
transition: $input-transition;
}
}
.custom-toggle-wrapper {
.custom-toggle + .custom-toggle {
margin-left: 1rem !important;
}
}
// Labeled toggles
.custom-toggle {
input {
&:checked {
+ .custom-toggle-slider {
&:after {
content: attr(data-label-on);
color: $custom-control-indicator-checked-border-color;
right: auto;
left: 0;
}
}
}
}
}
.custom-toggle-slider {
&:after {
color: $custom-toggle-border-color;
content: attr(data-label-off);
display: block;
font-family: inherit;
font-weight: 600;
font-size: .75rem;
line-height: 24px;
position: absolute;
right: 0;
margin: 0 .21667rem;
top: 0;
text-align: center;
min-width: 1.66667rem;
overflow: hidden;
@include transition($transition-base);
}
}
// Color variations
@each $color, $value in $theme-colors {
.custom-toggle-#{$color} {
@include custom-toggle-variant($value);
}
}

View File

@ -0,0 +1,89 @@
//
// Dropdown
//
// General styles
.dropdown,
.dropup,
.dropright,
.dropleft {
display: inline-block;
}
.dropdown-menu {
min-width: 12rem;
.dropdown-item {
padding: .5rem 1rem;
font-size: $font-size-sm;
> i,
> svg {
margin-right: 1rem;
font-size: 1rem;
vertical-align: -17%;
}
img {
margin-right: .5rem;
}
}
}
.dropdown-header {
padding-left: 1rem;
padding-right: 1rem;
// color: $gray-100;
font-size: .625rem;
text-transform: uppercase;
font-weight: 700;
}
// Media components inside dropdown link
.dropdown-menu {
a.media {
> div {
&:first-child {
line-height: 1;
}
}
p {
color: $gray-600;
}
&:hover {
.heading,
p {
color: theme-color("default") !important;
}
}
}
}
.dropdown-menu-dark {
.h1, .h2, .h3, .h4, .h5, .h6, a {
color: white;
}
}
// Size variations
.dropdown-menu-sm {
min-width: 100px;
border: $border-radius-lg;
}
.dropdown-menu-lg {
min-width: 320px;
border-radius: $border-radius-lg;
}
.dropdown-menu-xl {
min-width: 420px;
border-radius: $border-radius-lg;
}

View File

@ -0,0 +1,107 @@
//
// Footer
//
// General styles
.footer {
background: $footer-bg;
padding: $footer-padding-y $footer-padding-x;
.col-footer {
.heading {
color: $footer-heading-color;
letter-spacing: 0;
font-size: $footer-heading-font-size;
text-transform: uppercase;
font-weight: $font-weight-bold;
margin-bottom: 1rem;
}
}
.nav .nav-item .nav-link,
.footer-link {
color: $footer-link-color !important;
&:hover {
color: $footer-link-hover-color !important;
}
}
.list-unstyled li a {
display: inline-block;
padding: .125rem 0;
color: $footer-link-color;
font-size: $footer-link-font-size;
&:hover {
color: $footer-link-hover-color;
}
}
.copyright {
font-size: $font-size-sm;
}
}
// Dark footer
.footer-dark {
.col-footer .heading {
color: $white;
}
}
// Footer nav used for copyright and some links, but not limited to this
.nav-footer {
.nav-link {
font-size: $font-size-sm;
}
.nav-item:last-child {
.nav-link {
padding-right: 0;
}
}
}
// Footer with cards over
.footer.has-cards {
overflow: hidden;
padding-top: 500px;
margin-top: -420px;
position: relative;
background: transparent;
pointer-events: none;
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 600px;
height: 2000px;
background: theme-color("secondary");
transform: skew(0,-8deg);
}
.container {
pointer-events: auto;
position: relative;
}
}
// Position the footer at the bottom of the page if the body is smaller than the window
.footer-auto-bottom {
position: absolute;
bottom: 0;
width: 100%;
}

View File

@ -0,0 +1,38 @@
//
// Form extend
//
// Color variations
.form-primary {
.form-control {
color: color-yiq(theme-color("primary"));
background-color: transparentize(darken(theme-color("primary"), 10%), .5);
border-color: darken(theme-color("primary"), 10%);
&:focus {
background-color: transparentize(darken(theme-color("primary"), 12%), .3);
border: $input-border-width solid darken(theme-color("primary"), 12%);
}
// Placeholder
&::placeholder {
color: transparentize(color-yiq(theme-color("primary")), .2);
}
}
.input-group-text {
color: color-yiq(theme-color("primary"));
background-color: transparentize(darken(theme-color("primary"), 10%), .5);
border-color: darken(theme-color("primary"), 10%);
}
.focused {
.input-group-text {
color: color-yiq(theme-color("primary"));
background-color: transparentize(darken(theme-color("primary"), 12%), .3);
border-color: darken(theme-color("primary"), 12%);
}
}
}

View File

@ -0,0 +1,78 @@
//
// Form validation
//
// Validation
.has-success,
.has-danger {
position: relative;
&:after {
display: none; // remove in v1.1
//display: inline-block;
width: 19px;
height: 19px;
line-height: 19px;
text-align: center;
font-family: 'NucleoIcons';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
font-size: 9px;
opacity: 1;
}
.input-group-prepend{
.input-group-text{
border-color: red;
}
}
}
.has-success {
&:after {
content: "\ea26";
color: darken($form-feedback-valid-color, 18%);
background-color: $form-feedback-valid-bg;
}
.form-control {
background-color: $input-focus-bg;
&:focus {
//border-color: $input-focus-border-color;
}
// Placeholder
&::placeholder {
color: $form-feedback-valid-color;
}
}
}
.has-danger {
&:after {
content: "\ea53";
color: darken($form-feedback-invalid-color, 18%);
background-color: $form-feedback-invalid-bg;
}
.form-control {
background-color: $input-focus-bg;
&:focus {
//border-color: $input-focus-border-color;
}
// Placeholder
&::placeholder {
color: $form-feedback-invalid-color;
}
}
}

View File

@ -0,0 +1,109 @@
//
// Forms
//
// Labels
.form-control-label {
color: $gray-700;
font-size: $font-size-sm;
font-weight: $font-weight-bold;
}
// Text inputs
.form-control {
font-size: $input-btn-font-size;
@include transition($transition-ease-in-out);
height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border * 2.5});
&:focus {
&::placeholder {
color: $input-focus-placeholder-color;
}
}
}
.form-control-lg{
height: calc(#{$input-line-height * 1.5em} + #{$input-padding-y * 2} + #{$input-height-border * 2.5});
}
.form-control-sm{
height: calc(#{$input-line-height * .3em} + #{$input-padding-y * 2} + #{$input-height-border * 2.5});
}
// 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;
}
// Form input variations
// Muted input
.form-control-muted {
background-color: $input-muted-bg;
border-color: $input-muted-bg;
box-shadow: none;
&:focus {
background-color: $input-focus-muted-bg;
}
}
// Alternative input
.form-control-alternative {
box-shadow: $input-alternative-box-shadow;
border: 0;
transition: box-shadow .15s ease;
&:focus {
box-shadow: $input-focus-alternative-box-shadow;
}
}
// Size variations: Fixes to the bootstrap defaults
.form-control-lg,
.input-group-lg .form-control,
.input-group-text {
font-size: $font-size-base !important;
}

View File

@ -0,0 +1,136 @@
//
// Input group
//
.custom-control{
padding-left: $custom-control-gutter + $custom-control-indicator-size - 1rem;
}
.input-group {
box-shadow: $input-box-shadow;
border-radius: $input-border-radius;
@include transition($transition-ease-in-out);
.form-control {
box-shadow: none;
&:focus {
box-shadow: none;
}
}
}
.input-group-text {
@include transition($input-transition);
i {
font-size: $font-size-sm;
}
.custom-control {
line-height: 1;
}
}
.input-group-prepend {
// Should add the value of border right in variables.scss
.input-group-text {
border-right: 0;
}
}
.input-group-append {
// Should add the value of border right in variables.scss
.input-group-text {
border-left: 0;
}
}
// Merged input group
.input-group-merge {
.form-control {
&:not(:first-child) {
border-left: 0;
padding-left: 0;
}
&:not(:last-child) {
border-right: 0;
padding-right: 0;
}
}
}
// Alternative input groups related to .form-control-alternative
.input-group-alternative {
box-shadow: $input-alternative-box-shadow;
border: 0;
transition: box-shadow .15s ease;
.form-control,
.input-group-text {
border: 0;
box-shadow: none;
}
}
.focused {
.input-group-alternative {
box-shadow: $input-focus-alternative-box-shadow !important;
}
}
// Remove borders and paddings
.input-group-flush {
box-shadow: none;
> .form-control {
padding: 0;
border-width: 0;
background-color: transparent;
}
> .input-group-prepend,
> .input-group-append {
> .input-group-text {
padding: 0;
padding-right: 1rem;
border-width: 0;
background-color: transparent;
}
}
}
// .focus class is applied dinamycally from theme.js
.focused {
.input-group {
box-shadow: $input-focus-box-shadow;
}
.input-group-text {
color: $input-group-addon-focus-color;
background-color: $input-group-addon-focus-bg;
border-color: $input-group-addon-focus-border-color;
}
.form-control {
border-color: $input-group-addon-focus-border-color;
}
.input-group-flush {
box-shadow: none;
}
}

View File

@ -0,0 +1,31 @@
//
// Grid
//
// Example row
.row-example {
> .col,
> [class^="col-"] {
span {
display: block;
padding: .75rem;
color: rgb(57, 63, 73);
background-color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
font-size: $font-size-sm;
border-radius: .25rem;
margin: 1rem 0;
}
}
}
.no-gutters {
> .col,
> [class^="col-"] {
span {
border-radius: 0;
}
}
}

View File

@ -0,0 +1,7 @@
//
// Header
//
.header {
position: relative;
}

View File

@ -0,0 +1,57 @@
//
// Icon action
//
.icon-actions {
> a {
display: inline-block;
margin-right: .75rem;
color: $gray-600;
font-size: .875rem;
&:last-of-type {
margin-right: 0;
}
span {
margin-left: .1875rem;
font-weight: $font-weight-bold;
color: $text-muted;
}
&:hover {
span {
color: darken($text-muted, 10%);
}
}
}
> a,
> a:hover,
> a.active {
color: $gray-800;
}
> .favorite:hover,
> .favorite.active {
color: $favorite-color;
}
> .love:hover,
> .love.active {
color: $love-color;
}
> .like:hover,
> .like.active {
color: $like-color;
}
}
.icon-actions-lg {
a {
font-size: 1.25rem;
margin-right: .875rem;
}
}

View File

@ -0,0 +1,48 @@
//
// Icon shape
//
.icon-shape {
padding: 12px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
i, svg {
font-size: 1.25rem;
}
&.icon-lg {
i, svg {
font-size: 1.625rem;
}
}
&.icon-sm {
i, svg {
font-size: .875rem;
}
}
&.icon-xs {
i, svg {
font-size: .6rem;
}
}
svg {
width: 30px;
height: 30px;
}
}
@each $color, $value in $theme-colors {
.icon-shape-#{$color} {
@include icon-shape-variant(theme-color($color));
}
}

View File

@ -0,0 +1,80 @@
//
// Icon
//
.icon {
width: $icon-size;
height: $icon-size;
i, svg {
font-size: $icon-size - .75;
}
+ .icon-text {
padding-left: 1rem;
width: calc(100% - #{$icon-size} - 1);
}
}
// Extra large icons
.icon-xl {
width: $icon-size-xl;
height: $icon-size-xl;
i, svg {
font-size: $icon-size-xl - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-xl} - 1);
}
}
// Large icons
.icon-lg {
width: $icon-size-lg;
height: $icon-size-lg;
i, svg {
font-size: $icon-size-lg - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-lg} - 1);
}
}
// Small icon
.icon-sm {
width: $icon-size-sm;
height: $icon-size-sm;
i, svg {
font-size: $icon-size-sm - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-sm} - 1);
}
}
// Extra Small icon
.icon-xs {
width: $icon-size-xs;
height: $icon-size-xs;
i, svg {
font-size: $icon-size-xs - .75;
}
+ .icon-text {
width: calc(100% - #{$icon-size-xs} - 1);
}
}

View File

@ -0,0 +1,52 @@
//
// Checklist
// works with the [data-toggle="checklist"] which inits the JS for item selection
//
// Checklist entry
// is used in JS to get each entry and verify if it checked
.checklist-entry {
}
// Checklist item
// contains the checklist entry info and checkbox
.checklist-item {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding-left: .75rem;
&:before {
content: "";
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 0;
background-color: theme-color("primary");
border-radius: 8px;
}
}
.checklist-item-checked {
.checklist-info * {
text-decoration: line-through;
}
}
// Color variations
@each $color, $value in $theme-colors {
.checklist-item-#{$color} {
&:before {
background-color: theme-color($color);
}
}
}

View File

@ -0,0 +1,46 @@
//
// List group
//
// Space list items
.list-group-space {
.list-group-item {
margin-bottom: 1.5rem;
@include border-radius($list-group-border-radius);
}
}
// Extended list group components
.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 {
color: $gray-500;
line-height: 1.5;
margin: .2rem 0 0;
}
}
.list-group-heading {
font-size: $font-size-base;
color: $gray-800;
> small {
float: right;
color: $gray-500;
font-weight: 500;
}
}

View File

@ -0,0 +1,10 @@
//
// Map
//
.map-canvas {
position: relative;
width: 100%;
height: $map-height;
border-radius: $border-radius;
}

View File

@ -0,0 +1,33 @@
//
// Mask
//
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include transition($transition-base);
}
// Backdrop
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 1040; // navbar fixed has a z-index of 1030
}
.backdrop-dark {
background: rgba($black, .3);
}
.backdrop-light {
background: rgba($white, .3);
}

View File

@ -0,0 +1,33 @@
//
// Media comment
//
.media-comment {
margin-top: 2rem;
}
.media-comment-avatar {
margin-top: -1rem;
margin-right: -2rem;
position: relative;
z-index: 1;
border: 4px solid $white;
@include transition($transition-base);
}
.media-comment-text {
border-radius: $border-radius-lg;
border-top-left-radius: 0;
position: relative;
background-color: $gray-100;
padding: 1rem 1.25rem 1rem 2.5rem;
}
.media-comment {
&:hover {
.media-comment-avatar {
transform: scale(1.1);
}
}
}

View File

@ -0,0 +1,3 @@
//
// Media
//

View File

@ -0,0 +1,22 @@
@mixin alert-variant($background, $border, $color) {
color: color-yiq($background);
border-color: $border;
@include gradient-bg($background);
a {
color: darken($background, 30%);
font-weight: 600;
&:hover {
color: color-yiq($background);
}
}
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($color, 10%);
}
}

View File

@ -0,0 +1,30 @@
// Contextual backgrounds
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color !important;
}
a#{$parent},
button#{$parent} {
@include hover-focus {
background-color: darken($color, 10%) !important;
}
}
}
@mixin bg-gradient-variant($parent, $color) {
#{$parent} {
background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
}
}
@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;
}
}
}

View File

@ -0,0 +1,12 @@
@mixin badge-variant($bg) {
color: saturate(darken($bg, 10%), 10);
background-color: lighten($bg, 32%);
&[href] {
@include hover-focus {
color: color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 12%);
}
}
}

View File

@ -0,0 +1,105 @@
@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
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 0 $btn-focus-width rgba($border, .5);
}
@else {
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
}
} // Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
color: color-yiq($background);
background-color: $background;
border-color: $border;
}
&: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 {
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
}
@else {
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
}
}
}
}
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
color: $color;
background-color: transparent;
background-image: none;
border-color: $color;
&:hover {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
}
&:focus,
&.focus {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
&.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 0 $btn-focus-width rgba($color, .5);
}
@else {
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height; // Manually declare to provide an override to the browser default
@if $enable-rounded {
border-radius: $border-radius;
}
@else {
border-radius: 0;
}
}

View File

@ -0,0 +1,47 @@
@mixin custom-checkbox-variant($color) {
.custom-control-input {
&:checked {
~ .custom-control-label {
&::before {
border-color: $color;
@include gradient-bg($color);
}
&::after {
background-image: $color;
}
}
}
}
}
@mixin custom-toggle-variant($color) {
input {
&:checked {
+ .custom-toggle-slider {
border-color: $color;
&:before {
background: $color;
}
&:after {
color: $color;
}
}
}
&:disabled {
&:checked {
+ .custom-toggle-slider {
border-color: $color;
&:before {
background-color: lighten($color, 10%);
}
}
}
}
}
}

View File

@ -0,0 +1,127 @@
@mixin form-control-focus() {
&:focus {
color: $input-focus-color;
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
box-shadow: $input-focus-box-shadow;
} @else {
box-shadow: $input-focus-box-shadow;
}
}
}
@mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
font-size: $form-feedback-font-size;
color: $color;
}
.#{$state}-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
padding: .5rem;
margin-top: .1rem;
font-size: .875rem;
line-height: 1;
color: #fff;
background-color: rgba($color, .8);
border-radius: .2rem;
}
.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
&:focus {
border-color: $color;
//box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
.form-check-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .form-check-label {
color: $color;
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
.custom-control-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-label {
color: $color;
&::before {
background-color: lighten($color, 25%);
border-color: lighten($color, 25%);
}
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:checked {
~ .custom-control-label::before {
@include gradient-bg(lighten($color, 10%));
border-color: lighten($color, 25%);
}
}
&:focus {
~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
}
// custom file
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-file-label {
border-color: $color;
&::before { border-color: inherit; }
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:focus {
~ .custom-file-label {
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
}
}

View File

@ -0,0 +1,10 @@
@mixin icon-shape-variant($color) {
color: saturate(darken($color, 10%), 10);
background-color: transparentize(lighten($color, 10%), .5);
}
@mixin icon-font($content, $font-size) {
content: $content;
font-family: $icon-font-family;
font-size: $font-size;
}

View File

@ -0,0 +1,25 @@
@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;
}
}
}

View File

@ -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;
}
}
}

View File

@ -0,0 +1,31 @@
//
// Modal
//
.modal-title {
font-size: $modal-title-font-size;
}
// Fluid modal
.modal-fluid {
.modal-dialog {
margin-top: 0;
margin-bottom: 0;
}
.modal-content {
border-radius: 0;
}
}
// Background color variations
@each $color, $value in $theme-colors {
.modal-#{$color} {
@include modal-variant($value);
}
}

View File

@ -0,0 +1,37 @@
//
// Navabar collapse
//
// Collapse
.navbar-collapse-header {
display: none;
}
@keyframes show-navbar-collapse {
0% {
opacity: 0;
transform: scale(.95);
transform-origin: 100% 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide-navbar-collapse {
from {
opacity: 1;
transform: scale(1);
transform-origin: 100% 0;
}
to {
opacity: 0;
transform: scale(.95);
}
}

View File

@ -0,0 +1,104 @@
//
// Navbar dropdown
//
.navbar {
.dropdown-menu {
opacity: 0;
pointer-events: none;
margin: 0;
}
.dropdown-menu-arrow {
&:before {
background: $dropdown-bg;
box-shadow: none;
content: '';
display: block;
height: 12px;
width: 12px;
left: 20px;
position: absolute;
bottom: 100%;
transform: rotate(-45deg) translateY(12px);
z-index: -5;
border-radius: 2px;
}
}
.dropdown-menu-right {
&:before {
right: 20px;
left: auto;
}
}
&:not(.navbar-nav-hover) {
.dropdown-menu {
&.show {
opacity: 1;
pointer-events: auto;
animation: show-navbar-dropdown .25s ease forwards;
}
&.close {
display: block;
animation: hide-navbar-dropdown .15s ease backwards;
}
}
}
&.navbar-nav-hover {
.dropdown-menu {
opacity: 0;
display: block;
pointer-events: none;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
.nav-item.dropdown:hover > .dropdown-menu {
display: block;
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate(0, 0);
animation: none;
}
}
.dropdown-menu-inner {
position: relative;
padding: 1rem;
}
// Keyframes
@keyframes show-navbar-dropdown {
0% {
opacity: 0;
// transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transform: translate(0, 10px) perspective(200px);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes hide-navbar-dropdown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate(0, 10px)
// transform: translate(0, 10px) perspective(0) rotateX(0);
}
}
}

View File

@ -0,0 +1,17 @@
//
// Floating navbar
//
.navbar-floating-wrapper {
padding-top: 1rem;
padding-bottom: 1rem;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
.navbar {
border-radius: $border-radius;
}
}

View File

@ -0,0 +1,216 @@
//
// Navbar search
//
.navbar-search {
.input-group {
border-radius: $navbar-search-border-radius;
border: $navbar-search-border-width solid;
@include transition($transition-bg);
transition-delay: $transition-base-time;
.input-group-text {
background-color: transparent;
padding-left: 1rem;
border: 0;
}
}
.form-control {
width: $navbar-search-width;
background-color: transparent;
border: 0;
@include transition($navbar-search-transition);
}
.focused {
.input-group {
.form-control {
width: $navbar-search-focus-width;
}
}
}
.close {
display: none;
}
}
// Search variations
.navbar-search-dark {
.input-group {
background-color: $navbar-search-dark-bg;
border-color: $navbar-search-dark-border-color;
}
.input-group-text {
color: $navbar-search-dark-color;
}
.form-control {
color: $navbar-search-dark-focus-color;
&::placeholder {
color: $navbar-search-dark-color;
}
}
.focused {
.input-group {
background-color: $navbar-search-dark-focus-bg;
border-color: $navbar-search-dark-focus-border-color;
}
}
}
.navbar-search-light {
.input-group {
background-color: $navbar-search-light-bg;
border-color: $navbar-search-light-border-color;
}
.input-group-text {
color: $navbar-search-light-color;
}
.form-control {
color: $navbar-search-light-focus-color;
&::placeholder {
color: $navbar-search-light-color;
}
}
.focused {
.input-group {
background-color: $navbar-search-light-focus-bg;
border-color: $navbar-search-light-focus-border-color;
}
}
}
// When navbar search is open on xs
@include media-breakpoint-down(xs) {
.navbar-search {
display: none;
width: 100%;
transform: translateX(-150%);
@include transition($transition-cubic-bezier);
.form-group {
width: 100%;
}
.form-control {
width: auto;
}
.focused {
.input-group {
.form-control {
width: auto;
}
}
}
.close {
display: none;
opacity: 0;
span {
width: auto;
height: auto;
}
}
}
.navbar-top {
.navbar-nav {
@include transition($transition-base);
}
}
.g-navbar-search-showing {
.navbar-search {
.close {
display: block;
}
}
.navbar-top {
.navbar-nav {
display: flex;
opacity: 1;
transform: translateX(150%);
}
}
}
.g-navbar-search-show {
// Search
.navbar-search {
display: block;
.form-control {
width: auto;
}
.close {
color: white;
position: absolute;
top: 0;
right: 0;
width: 46px;
height: 46px;
text-align: center;
line-height: 46px;
cursor: pointer;
}
}
// Navbar
.navbar-top {
.navbar-nav {
display: none;
}
// Collapse
.navbar-collapse {
width: 100%;
}
}
}
.g-navbar-search-shown {
.navbar-search {
transform: translateX(0);
.close {
display: block;
opacity: 1;
}
}
}
.g-navbar-search-hiding {
// Navbar
.navbar-top {
.navbar-nav {
display: flex;
opacity: 0;
transform: translateX(150%);
}
}
}
.g-navbar-search-hidden {
.navbar-top {
.navbar-nav {
opacity: 1;
transform: translateX(0);
}
}
}
}

View File

@ -0,0 +1,58 @@
//
// Navbar top (Topbar)
//
.navbar-top {
border: 0;
padding-left: 1rem;
padding-right: 1rem;
.container,
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
@include media-breakpoint-up(sm) {
.navbar-brand {
display: none;
}
}
@include media-breakpoint-down(xs) {
.navbar-collapse {
width: 100%;
}
.nav-item {
position: static;
.dropdown-menu {
position: absolute;
width: 94%;
min-width: auto;
left: 3%;
right: auto;
}
}
}
&.border-bottom {
&.navbar-dark {
border-color: rgba(255, 255, 255, .08) !important;
}
&.navbar-light {
border-color: rgba(0, 0, 0, .04) !important;
}
}
}
.sidenav-pinned {
.navbar-top {
.navbar-brand {
display: none;
}
}
}

View File

@ -0,0 +1,507 @@
//
// Vertical navbar + Sidenav
//
.navbar-vertical {
padding-top: 0;
border-width: 0 0 1px 0;
border-style: solid;
@if $enable-shadows {
box-shadow: $navbar-vertical-box-shadow;
}
// Navbar light
&.navbar-light {
background-color: $navbar-light-bg;
border-color: $navbar-light-border-color;
}
// Navbar dark
&.navbar-dark {
background-color: $navbar-dark-bg;
border-color: $navbar-dark-border-color;
}
// Navbar brand
.navbar-brand {
margin-right: 0;
}
.navbar-brand-img,
.navbar-brand > img {
max-width: 100%;
max-height: 2rem;
}
// Navbar collapse
@include media-breakpoint-up(md) {
.navbar-collapse {
margin-left: -$navbar-padding-x;
margin-right: -$navbar-padding-x;
&:before {
content: '';
display: block;
margin: $navbar-padding-y / 2;
}
}
}
// Navbar navigaton
.navbar-nav {
margin-left: -$navbar-padding-x;
margin-right: -$navbar-padding-x;
// Navbar link
.nav-link {
padding-left: $navbar-padding-x;
padding-right: $navbar-padding-x;
font-size: $navbar-nav-link-font-size;
font-weight: $navbar-nav-link-font-weight;
&.active {
position: relative;
}
// Icon
> i {
min-width: $navbar-icon-min-width;
font-size: .9375rem;
line-height: ($font-size-base * $line-height-base);
}
// Dropdown
.dropdown-menu {
border: none;
.dropdown-menu {
margin-left: $dropdown-item-padding-x / 2;
}
}
}
.nav-sm {
.nav-link {
font-size: .8125rem;
}
}
}
// Navbar navigation
.navbar-nav .nav-link {
display: flex;
align-items: center;
}
.navbar-nav .nav-link[data-toggle="collapse"] {
&:after {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: 'Font Awesome 5 Free';
font-weight: 700;
content: "\f105";
margin-left: auto;
color: $gray-400;
@include transition($transition-base);
}
// Expanded
&[aria-expanded="true"] {
&:after {
color: theme-color("primary");
transform: rotate(90deg);
}
}
}
// Second level
.navbar-nav .nav .nav-link {
padding-left: $navbar-padding-x + $navbar-icon-min-width;
}
// Third level
.navbar-nav .nav .nav .nav-link {
padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width;
}
// Navbar heading
.navbar-heading {
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
font-size: $font-size-xs;
text-transform: uppercase;
letter-spacing: .04em;
}
// Expanded navbar specific styles
&.navbar-expand {
@each $breakpoint, $dimension in $grid-breakpoints {
&-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) {
display: block;
position: fixed;
top: 0;
bottom: 0;
width: 100%;
max-width: $navbar-vertical-width;
overflow-y: auto;
padding-left: 0;
padding-right: 0;
.navbar-inner {
padding-left: $navbar-vertical-padding-x;
padding-right: $navbar-vertical-padding-x;
}
// Container
>[class*="container"] {
flex-direction: column;
align-items: stretch;
min-height: 100%;
padding-left: 0;
padding-right: 0; // Target IE 10 & 11
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
min-height: none;
height: 100%;
}
}
// Fixes the vertical navbar to the left
&.fixed-left {
left: 0;
border-width: 0 1px 0 0;
}
// Fixed the vertical navbar to the right
&.fixed-right {
right: 0;
border-width: 0 0 0 1px;
}
// Navbar collapse
.navbar-collapse {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
margin-left: -$navbar-vertical-padding-x;
margin-right: -$navbar-vertical-padding-x;
padding-left: $navbar-vertical-padding-x;
padding-right: $navbar-vertical-padding-x;
> * {
min-width: 100%;
}
}
// Navbar navigation
.navbar-nav {
flex-direction: column;
margin-left: -$navbar-vertical-padding-x;
margin-right: -$navbar-vertical-padding-x;
}
.navbar-nav .nav-link {
padding: $navbar-vertical-nav-link-padding-y $navbar-vertical-nav-link-padding-x;
}
.navbar-nav > .nav-item {
margin-top: 2px;
> .nav-link {
&.active {
background: $gray-100;
margin-right: .5rem;
margin-left: .5rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: $border-radius;
}
}
}
.lavalamp-object {
width: calc(100% - 1rem) !important;
background: theme-color("primary");
color: color-yiq($primary);
margin-right: .5rem;
margin-left: .5rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: $border-radius;
}
// Second level
.navbar-nav .nav .nav-link {
padding-top: $navbar-vertical-nav-link-padding-y / 1.5;
padding-bottom: $navbar-vertical-nav-link-padding-y / 1.5;
padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width;
}
// Third level
.navbar-nav .nav .nav .nav-link {
padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width;
}
}
}
}
}
}
// Offsets the main content depending on the sidebar positioning
.navbar-vertical.navbar-expand {
@each $breakpoint, $dimension in $grid-breakpoints {
&-#{$breakpoint} {
@include media-breakpoint-up(#{$breakpoint}) {
&.fixed-left + .main-content {
margin-left: $navbar-vertical-width;
}
&.fixed-right + .main-content {
margin-right: $navbar-vertical-width;
}
}
}
}
}
.sidenav {
&.fixed-left + .main-content {
margin-left: $navbar-vertical-width;
@include transition($transition-base);
}
&.fixed-right + .main-content {
margin-right: $navbar-vertical-width;
@include transition($transition-base);
}
}
.g-sidenav-pinned {
.sidenav {
@include media-breakpoint-up(xl) {
&.fixed-left + .main-content {
margin-left: $navbar-vertical-open-width;
}
&.fixed-right + .main-content {
margin-right: $navbar-vertical-open-width;
}
}
}
}
//
// Sidenav
//
.sidenav {
z-index: 1050;
@include transition($transition-base);
@include media-breakpoint-up(xl) {
&:hover {
max-width: $navbar-vertical-open-width;
}
.sidenav-toggler {
padding: 1.5rem;
}
}
.navbar-brand,
.navbar-heading {
padding: 1.5rem;
display: none;
}
}
.sidenav-header {
height: 78px;
}
// Sidenav states
.g-sidenav-show {
.sidenav {
.navbar-brand,
.navbar-heading {
display: block;
}
.nav-item .collapse {
height: auto;
@include transition($transition-base);
}
}
}
.g-sidenav-pinned {
.sidenav {
max-width: $navbar-vertical-open-width !important;
.navbar-brand,
.navbar-heading {
display: block;
}
}
}
.g-sidenav-hidden:not(.g-sidenav-show) {
.sidenav {
.navbar-nav > .nav-item {
> .nav-link {
&:after {
content: '';
}
}
}
.nav-item .collapse {
display: none !important;
}
.nav-link-text {
display: none !important;
}
}
}
.g-sidenav-hide {
.sidenav {
.navbar-nav > .nav-item {
> .nav-link {
&:after {
content: '';
}
}
}
.nav-item .collapse {
display: none !important;
}
.nav-link-text {
display: none !important;
}
}
}
// Media fixes for iPhone 5 like resolutions
@include media-breakpoint-down(lg) {
.sidenav {
transform: translateX(-$navbar-vertical-width);
&.fixed-left + .main-content {
margin-left: 0 !important;
}
}
.g-sidenav-pinned {
.sidenav {
transform: translateX(0);
}
}
}
// Sidenav toggler
.sidenav-toggler-inner,
.sidenav-toggler-line {
width: 18px;
@include transition($transition-base);
}
.sidenav-toggler-inner {
position: relative;
&:before {
content: '';
position: absolute;
width: 40px;
height: 40px;
left: -11px;
top: -14px;
// background-color: rgba($primary, .15);
border-radius: 50%;
transform: scale(0);
@include transition($transition-cubic-bezier);
}
}
.sidenav-toggler-line {
height: 2px;
background-color: theme-color("default");
display: block;
position: relative;
&:not(:last-child) {
margin-bottom: 3px;
}
}
.sidenav-toggler-dark {
.sidenav-toggler-line {
background-color: $white;
}
}
.sidenav-toggler {
cursor: pointer;
&.active {
.sidenav-toggler-inner {
&:before {
transform: scale(1);
}
}
.sidenav-toggler-line {
background-color: theme-color("primary]");
&:first-child {
width: 13px;
transform: translateX(5px);
}
&:last-child {
width: 13px;
transform: translateX(5px);
}
}
}
}

View File

@ -0,0 +1,368 @@
//
// Navbar
//
// Navbar links
.navbar-horizontal {
.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);
.nav-link-inner--text {
margin-left: .25rem;
}
}
}
.navbar-brand {
font-size: $font-size-sm;
font-weight: 600;
text-transform: uppercase;
font-size: .875rem;
letter-spacing: .05px;
img {
height: 30px;
}
}
.navbar-dark {
.navbar-brand {
color: $white;
}
}
.navbar-light {
.navbar-brand {
color: $gray-800;
}
}
.navbar-nav {
.nav-item {
.media:not(:last-child){
margin-bottom: 1.5rem;
}
}
}
@include media-breakpoint-up(lg) {
// .navbar-main {
// padding: 1rem 0;
// }
.navbar-nav {
.nav-item {
margin-right: .5rem;
[data-toggle="dropdown"]::after {
transition: $transition-base;
}
&.show {
[data-toggle="dropdown"]::after {
transform: rotate(180deg);
}
}
}
.nav-link {
padding-top: $navbar-nav-link-padding-y;
padding-bottom: $navbar-nav-link-padding-y;
border-radius: $navbar-nav-link-border-radius;
i {
margin-right: .625rem;
}
}
.nav-link-icon {
padding-left: .5rem !important;
padding-right: .5rem !important;
font-size: 1rem;
border-radius: $navbar-nav-link-border-radius;
i {
margin-right: 0;
}
}
// Dropdown menu
.dropdown-menu {
opacity: 0;
pointer-events: none;
margin: 0;
&:before {
background: $dropdown-bg;
box-shadow: none;
content: '';
display: block;
height: 16px;
width: 16px;
left: 20px;
position: absolute;
bottom: 100%;
transform: rotate(-45deg) translateY(1rem);
z-index: -5;
border-radius: $border-radius-sm;
}
}
.dropdown-menu-right {
&:before {
right: 20px;
left: auto;
}
}
&:not(.navbar-nav-hover) {
.dropdown-menu {
&.show {
opacity: 1;
pointer-events: auto;
animation: show-navbar-dropdown .25s ease forwards;
}
&.close {
display: block;
animation: hide-navbar-dropdown .15s ease backwards;
}
}
}
&.navbar-nav-hover {
.dropdown-menu {
opacity: 0;
display: block;
pointer-events: none;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
.nav-item.dropdown:hover > .dropdown-menu {
display: block;
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate(0, 0);
animation: none;
}
}
.dropdown-menu-inner {
position: relative;
padding: 1rem;
}
}
}
// Transparent navbar
&.navbar-transparent {
position: absolute;
top: 0;
width: 100%;
z-index: 100;
background-color: transparent;
border: 0;
box-shadow: none;
.navbar-brand {
color: rgba(255, 255, 255, 1);
}
.navbar-toggler {
color: rgba(255, 255, 255, 1);
}
.navbar-toggler-icon {
background-image: $navbar-dark-toggler-icon-bg;
}
}
@include media-breakpoint-up(md) {
&.navbar-transparent {
.navbar-nav {
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-dark-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
}
.navbar-brand {
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-dark-color;
}
}
}
}
// Collapse
.navbar-collapse-header {
display: none;
}
@include media-breakpoint-down(md) {
.navbar-nav {
.nav-link {
padding: .625rem 0;
color: theme-color("default") !important;
}
.dropdown-menu {
box-shadow: none;
min-width: auto;
.media {
svg {
width: 30px;
}
}
}
}
.navbar-collapse {
width: calc(100% - 1.4rem);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1050;
margin: .7rem;
overflow-y: auto;
height: auto !important;
opacity: 0;
.navbar-toggler {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
display: inline-block;
padding: 0;
span {
display: block;
position: absolute;
width: 100%;
height: 2px;
border-radius: 2px;
opacity: 1;
background: #283448;
}
:nth-child(1) {
transform: rotate(135deg);
}
:nth-child(2) {
transform: rotate(-135deg);
}
}
.navbar-collapse-header {
display: block;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.collapse-brand {
img {
height: 36px;
}
}
.collapse-close {
text-align: right;
}
}
.navbar-collapse.collapsing,
.navbar-collapse.show {
padding: 1.5rem;
border-radius: $border-radius;
background: #FFF;
box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1);
animation: show-navbar-collapse .2s ease forwards;
}
.navbar-collapse.collapsing-out {
animation: hide-navbar-collapse .2s ease forwards;
}
}
// Keyframes
@keyframes show-navbar-collapse {
0% {
opacity: 0;
transform: scale(.95);
transform-origin: 100% 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes hide-navbar-collapse {
from {
opacity: 1;
transform: scale(1);
transform-origin: 100% 0;
}
to {
opacity: 0;
transform: scale(.95);
}
}
@keyframes show-navbar-dropdown {
0% {
opacity: 0;
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes hide-navbar-dropdown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate(0, 10px);
}
}
}

View File

@ -0,0 +1,66 @@
//
// Nav pills
//
// General styles
.nav-pills {
.nav-item:not(:last-child) {
padding-right: $nav-pills-space-x;
}
.nav-link {
padding: $nav-pills-padding-y $nav-pills-padding-x;
color: $nav-pills-link-color;
font-weight: 500;
font-size: $font-size-sm;
box-shadow: $nav-pills-box-shadow;
background-color: $nav-pills-bg;
transition: $transition-base;
&:hover {
color: $nav-pills-link-hover-color;
}
}
.nav-link.active,
.show > .nav-link {
color: $nav-pills-link-active-color;
background-color: $nav-pills-link-active-bg;
}
@include media-breakpoint-down(xs) {
.nav-item {
margin-bottom: $spacer;
}
}
}
@include media-breakpoint-down(sm) {
.nav-pills:not(.nav-pills-circle) {
.nav-item {
padding-right: 0;
}
}
}
// Rounded circle nav pills
.nav-pills-circle {
.nav-link {
text-align: center;
height: 60px;
width: 60px;
padding: 0;
line-height: 60px;
border-radius: 50%;
}
.nav-link-icon {
i, svg {
font-size: 1rem;
}
}
}

View File

@ -0,0 +1,33 @@
//
// Nav
//
// Nav wrapper (container)
// Nav wrapper
.nav-wrapper {
padding: 1rem 0;
@include border-top-radius($card-border-radius);
+ .card {
@include border-top-radius(0);
@include border-bottom-radius($card-border-radius);
}
}
// Nav links
.nav-link {
color: $nav-link-color;
&:hover {
color: $nav-link-hover-color;
}
i.ni {
position: relative;
top: 2px;
}
}

View File

@ -0,0 +1,48 @@
//
// Pagination
//
.page-item {
&.active .page-link {
box-shadow: $pagination-active-box-shadow;
}
.page-link,
span {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0 3px;
border-radius: 50% !important;
width: 36px;
height: 36px;
font-size: $font-size-sm;
}
}
// Size variations
.pagination-lg {
.page-item {
.page-link,
span {
width: 46px;
height: 46px;
line-height: 46px;
}
}
}
.pagination-sm {
.page-item {
.page-link,
span {
width: 30px;
height: 30px;
line-height: 30px;
}
}
}

View File

@ -0,0 +1,21 @@
//
// Popover
//
.popover {
border: 0;
}
.popover-header {
font-weight: $font-weight-bold;
}
// Alternative colors
@each $color, $value in $theme-colors {
.popover-#{$color} {
@include popover-variant($value);
}
}

View File

@ -0,0 +1,89 @@
//
// Progress
//
// Progress container
.progress-wrapper {
position: relative;
padding-top: 1.5rem;
}
// General styles
.progress {
height: 8px;
margin-bottom: $spacer;
overflow: hidden;
border-radius: $border-radius-sm;
background-color: $progress-bg;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
.sr-only {
width: auto;
height: 20px;
margin: 0 0 0 30px;
left: 0;
clip: auto;
line-height: 20px;
font-size: 13px;
}
}
// Size variations
.progress-sm {
height: 5px;
}
.progress-xs {
height: 3px;
}
// Progress inner elements
.progress-heading {
font-size: 14px;
font-weight: 500;
margin: 0 0 2px;
padding: 0;
}
.progress-bar {
box-shadow: none;
border-radius: 0;
height: auto;
}
.progress-info{
margin-bottom: .5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.progress-label {
span {
display: inline-block;
color: $primary;
font-size: .625rem;
font-weight: 600;
text-transform: uppercase;
background: rgba($primary, .1);
padding: .25rem 1rem;
border-radius: 30px;
}
}
.progress-percentage {
text-align: right;
span {
display: inline-block;
color: $gray-600;
font-size: .875rem;
font-weight: 600;
}
}

View File

@ -0,0 +1,13 @@
iframe {
border: 0;
}
figcaption,
figure,
main {
display: block;
}
main {
overflow: hidden;
}

View File

@ -0,0 +1,117 @@
.section-nucleo-icons {
--icon-size: 5rem;
--icon-sm-size: 3.75rem;
--gutter: 7rem;
.icons-container {
position: relative;
max-width: 100%;
height: 360px;
margin: 0 auto;
z-index: 1;
i {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: $white;
z-index: 1;
transform: translate(-50%, -50%);
@include box-shadow($box-shadow);
transition: all .2s cubic-bezier(.25,.65,.9,.75);
&.icon {
width: var(--icon-size);
height: var(--icon-size);
font-size: 1.7em;
}
&.icon-sm {
width: var(--icon-sm-size);
height: var(--icon-sm-size);
font-size: 1.5em;
}
&:nth-child(1) {
font-size: 42px;
color: theme-color("warning");
z-index: 2;
}
}
i {
opacity: 1;
&:nth-child(1) {
left: 50%;
top: 50%;
font-size: 42px;
color: theme-color("warning");
}
&:nth-child(2) {
left: calc(50% + (var(--gutter) * 1.7));
top: 50%;
}
&:nth-child(3) {
left: calc(50% + var(--gutter));
top: calc(50% + var(--gutter));
}
&:nth-child(4) {
left: calc(50% + var(--gutter));
top: calc(50% - var(--gutter));
}
&:nth-child(5) {
left: calc(50% + (var(--gutter) * 4));
top: 50%;
}
&:nth-child(6) {
left: calc(50% + (var(--gutter) * 2.7));
top: calc(50% + (var(--gutter) * 1.5));
}
&:nth-child(7) {
left: calc(50% + (var(--gutter) * 2.7));
top: calc(50% - (var(--gutter) * 1.5));
}
&:nth-child(8) {
left: calc(50% - (var(--gutter) * 1.7));
top: 50%;
}
&:nth-child(9) {
left: calc(50% - var(--gutter));
top: calc(50% + var(--gutter));
}
&:nth-child(10) {
left: calc(50% - var(--gutter));
top: calc(50% - var(--gutter));
}
&:nth-child(11) {
left: calc(50% - (var(--gutter) * 4));
top: 50%;
}
&:nth-child(12) {
left: calc(50% - (var(--gutter) * 2.7));
top: calc(50% + (var(--gutter) * 1.5));
}
&:nth-child(13) {
left: calc(50% - (var(--gutter) * 2.7));
top: calc(50% - (var(--gutter) * 1.5));
}
}
}
}

View File

@ -0,0 +1,54 @@
//
// Separator
// add svg on top or bottom of a section for a more stylish visual
//
.separator {
position: absolute;
top: auto;
left: 0;
right: 0;
width: 100%;
height: 150px;
transform: translateZ(0);
overflow: hidden;
pointer-events: none;
svg {
position: absolute;
pointer-events: none;
}
}
.separator-top {
top: 0;
bottom: auto;
svg {
top: 0;
}
}
.separator-bottom {
top: auto;
bottom: 0;
svg {
bottom: 0;
}
}
.separator-inverse {
transform: rotate(180deg);
}
// Styles
.separator-skew {
height: 60px;
@include media-breakpoint-up(xl) {
height: 70px;
}
}

View File

@ -0,0 +1,30 @@
//
// Shortcut
//
.shortcuts {
}
.shortcut-media {
@include transition($transition-cubic-bezier);
}
.shortcut-item {
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
small {
display: block;
margin-top: .75rem;
font-size: $h5-font-size;
font-weight: $heading-font-weight;
}
&:hover {
.shortcut-media {
transform: scale(1.1);
}
}
}

View File

@ -0,0 +1,25 @@
//
// Table actions
//
.table-action {
font-size: $font-size-sm;
color: $table-action-color;
margin: 0 .25rem;
&:hover {
color: darken($table-action-color, 10%);
}
}
.table-action-delete {
&:hover {
color: theme-color("danger");
}
}
.table-dark {
.table-action {
color: $table-dark-action-color;
}
}

View File

@ -0,0 +1,28 @@
//
// Sortable tables with list.js
//
.table,
.el-table {
[data-sort] {
cursor: pointer;
}
.thead-dark {
[data-sort] {
&::after {
content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$table-dark-head-color}'/></svg>"), "#", "%23");
margin-left: .25rem;
}
}
}
.thead-light {
[data-sort] {
&::after {
content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$table-head-color}'/></svg>"), "#", "%23");
margin-left: .25rem;
}
}
}
}

View File

@ -0,0 +1,153 @@
//
// Table
//
// General styles
.table,
.el-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;
border-bottom: $table-border-width solid $table-border-color;
border-top: $table-border-width solid $table-border-color;
}
th {
font-weight: $table-head-font-weight;
}
td {
.progress {
height: 3px;
width: 120px;
margin: 0;
}
}
td,
th {
color: $table-color;
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
.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);
}
}
.el-table.table-dark,
.table-dark {
color: $body-bg;
tbody .cell {
color: $body-bg;
}
thead th,
th,td {
border-color: #1f3a68;
}
}
// 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,
.el-table{
margin-bottom: 0;
td,
th {
padding-left: $card-spacer-x;
padding-right: $card-spacer-x;
}
}
}
// Fixes for custom elements inside tables
.table,
.el-table {
.custom-toggle {
display: block;
}
}

View File

@ -0,0 +1,182 @@
//
// Timeline
//
.timeline {
position: relative;
// Axis
&:before {
content: '';
position: absolute;
top: 0;
left: 1rem;
height: 100%;
border-right: $timeline-axis-width solid $timeline-axis-color;
}
}
// Axis style variations
[data-timeline-axis-style="dashed"] {
&:before {
border-right-style: dashed !important;
}
}
[data-timeline-axis-style="dotted"] {
&:before {
border-right-style: dotted !important;
}
}
// Timeline blocks
.timeline-block {
position: relative;
margin: 2em 0;
&:after {
content: "";
display: table;
clear: both;
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
// Timeline steps
.timeline-step {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
left: 0;
width: 33px;
height: 33px;
border-radius: 50%;
// background: $timeline-step-bg;
// border: $timeline-step-border-width solid $timeline-step-border-color;
text-align: center;
transform: translateX(-50%);
font-size: 1rem;
font-weight: $font-weight-bold;
z-index: 1;
svg, i {
line-height: 1.4;
}
}
.timeline-step-icon {
background: $white;
border: $timeline-step-border-width solid $timeline-step-border-color;
}
.timeline-step-xs {
width: 17px;
height: 17px;
font-size: .75rem;
}
.timeline-step-sm {
width: 23px;
height: 23px;
font-size: .75rem;
}
.timeline-step-lg {
width: 47px;
height: 47px;
font-size: 1.75rem;
}
// Timeline content and body
.timeline-content {
position: relative;
margin-left: 60px;
padding-top: .5rem;
position: relative;
top: -6px;
&:after {
content: "";
display: table;
clear: both;
}
}
.timeline-body {
padding: 1.5rem;
}
@include media-breakpoint-up(lg) {
.timeline {
&:before {
left: 50%;
margin-left: -2px;
}
}
.timeline-step {
left: 50%;
}
.timeline-content {
width: 38%;
}
.timeline-body {
padding: 1.5rem;
}
.timeline-block:nth-child(even) .timeline-content {
float: right;
}
// Timeline axis colors
@each $color, $value in $theme-colors {
[data-timeline-axis-color="#{$color}"] {
&:before {
border-color: $value;
}
}
}
}
// One side timeline
.timeline-one-side {
&:before {
left: 1rem;
}
.timeline-step {
left: 1rem;
}
.timeline-content {
width: auto;
}
@include media-breakpoint-up(lg) {
.timeline-content {
max-width: 30rem;
}
}
}
.timeline-one-side .timeline-block:nth-child(even) .timeline-content {
float: none;
}

View File

@ -0,0 +1,22 @@
//
// Article
//
article {
h4:not(:first-child),
h5:not(:first-child) {
margin-top: 3rem;
}
h4, h5 {
margin-bottom: 1.5rem;
}
figure {
margin: 3rem 0;
}
h5 + figure {
margin-top: 0;
}
}

View File

@ -0,0 +1,14 @@
//
// Display
//
.display-1,
.display-2,
.display-3,
.display-4 {
span {
display: block;
font-weight: $font-weight-light;
}
}

View File

@ -0,0 +1,65 @@
//
// Heading
//
// General styles
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a {
color: inherit;
}
.heading {
letter-spacing: $heading-letter-spacing;
font-size: $heading-font-size;
text-transform: $heading-text-transform;
font-weight: $heading-font-weight;
}
// Heading variations
.heading-small {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.heading-title {
letter-spacing: $heading-title-letter-spacing;
font-size: $heading-title-font-size;
font-weight: $heading-title-font-weight;
text-transform: $heading-title-text-transform;
}
.heading-section {
letter-spacing: $heading-section-letter-spacing;
font-size: $heading-section-font-size;
font-weight: $heading-section-font-weight;
text-transform: $heading-section-text-transform;
img {
display: block;
width: 72px;
height: 72px;
margin-bottom: 1.5rem;
}
&.text-center {
img {
margin-left: auto;
margin-right: auto;
}
}
}
// Surtitles
.surtitle {
text-transform: uppercase;
color: $gray-600;
letter-spacing: 2px;
margin-bottom: 0;
}

View File

@ -0,0 +1,27 @@
//
// Type
//
// Paragraphs
p {
font-size: $paragraph-font-size;
font-weight: $paragraph-font-weight;
line-height: $paragraph-line-height;
}
.lead {
font-size: $lead-font-size;
font-weight: $lead-font-weight;
line-height: $paragraph-line-height;
margin-top: 1.5rem;
+ .btn-wrapper {
margin-top: 3rem;
}
}
.description {
font-size: $font-size-sm;
}

View File

@ -0,0 +1,51 @@
//
// Backgrounds
//
@each $color, $value in $colors {
@include bg-variant(".bg-#{$color}", $value);
}
@each $color, $value in $theme-colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
@each $color, $value in $colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
// Background colors with transparency
@each $color, $value in $theme-colors {
@include bg-translucent-variant(".bg-translucent-#{$color}", $value);
}
// Sections backgrounds
@each $color, $value in $section-colors {
@include bg-variant(".section-#{$color}", $value);
}
@each $color, $value in $theme-colors {
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
}
// Shape (svg) fill colors
@each $color, $value in $theme-colors {
.fill-#{$color} {
fill: $value;
}
.stroke-#{$color} {
stroke: $value;
}
}
.fill-opacity-8 {
fill-opacity: .8;
}

View File

@ -0,0 +1,37 @@
//
// Blurable
// add a blue effect on hover on any element with .blur--hover class
//
.blur--hover {
position: relative;
.blur-item {
transition: 1s cubic-bezier(.19,1,.22,1);
will-change: transform;
filter: blur(0);
opacity: 1;
}
.blur-hidden {
position: absolute;
top: calc(50% + 7px);
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: $transition-base;
z-index: 100;
}
&:hover {
.blur-item {
opacity: .8;
filter: blur(10px);
transform: scale(.95);
z-index: 1;
}
.blur-hidden {
opacity: 1;
top: 50%;
}
}
}

View File

@ -0,0 +1,64 @@
//
// Floating
// floating animation utility class
//
.floating {
animation: floating 3s ease infinite;
will-change: transform;
&:hover {
animation-play-state: paused;
}
}
// Size variations
.floating-lg {
animation: floating-lg 3s ease infinite;
}
.floating-sm {
animation: floating-sm 3s ease infinite;
}
// Keyframes
@keyframes floating-lg {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(15px)
}
100% {
transform: translateY(0px)
}
}
@keyframes floating {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(10px)
}
100% {
transform: translateY(0px)
}
}
@keyframes floating-sm {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(5px)
}
100% {
transform: translateY(0px)
}
}

View File

@ -0,0 +1,18 @@
//
// Helper
// helper classes for different cases
//
// Clearfix for sections that use float property
.floatfix {
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
}

View File

@ -0,0 +1,9 @@
//
// Image
//
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}

View File

@ -0,0 +1,35 @@
//
// Opacity
// modify the transparency of an element with this quick modifier classes
//
.opacity-1 {
opacity: .1 !important;
}
.opacity-2 {
opacity: .2 !important;
}
.opacity-3 {
opacity: .3 !important;
}
.opacity-4 {
opacity: .4 !important;
}
.opacity-5 {
opacity: .5 !important;
}
.opacity-6 {
opacity: .6 !important;
}
.opacity-7 {
opacity: .7 !important;
}
.opacity-8 {
opacity: .8 !important;
}
.opacity-8 {
opacity: .9 !important;
}
.opacity-10 {
opacity: 1 !important;
}

View File

@ -0,0 +1,11 @@
//
// Overflow
//
.overflow-visible {
overflow: visible !important;
}
.overflow-hidden {
overflow: hidden !important;
}

View File

@ -0,0 +1,25 @@
//
// Position
// modifier classes to be applied on an abosolute positioned element
// use it next to .position-absolute class
//
@each $size, $value in $spacers {
.top-#{$size} {
top: $value;
}
.right-#{$size} {
right: $value;
}
.bottom-#{$size} {
bottom: $value;
}
.left-#{$size} {
left: $value;
}
}
.center {
left: 50%;
transform: translateX(-50%);
}

View File

@ -0,0 +1,28 @@
//
// Shadows
//
// General styles
[class*="shadow"] {
@if $enable-transitions {
transition: $transition-base;
}
}
// Size variations
.shadow-sm--hover:hover {
box-shadow: $box-shadow-sm !important;
}
.shadow--hover:hover {
box-shadow: $box-shadow !important;
}
.shadow-lg--hover:hover {
box-shadow: $box-shadow-lg !important;
}
.shadow-none--hover:hover {
box-shadow: none !important;
}

View File

@ -0,0 +1,7 @@
//
// Height
//
.h-100vh {
height: 100vh !important;
}

View File

@ -0,0 +1,107 @@
//
// Spacing
//
.row.row-grid > [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;
}
}
.row-grid + .row-grid {
margin-top: 3rem;
}
// Negative margins and paddings
@media(min-width: 992px) {
[class*="mt--"],
[class*="mr--"],
[class*="mb--"],
[class*="ml--"] {
}
// Large negative margins in pixels
.mt--100 {
margin-top: -100px !important;
}
.mr--100 {
margin-right: -100px !important;
}
.mb--100 {
margin-bottom: -100px !important;
}
.ml--100 {
margin-left: -100px !important;
}
.mt--150 {
margin-top: -150px !important;
}
.mb--150 {
margin-bottom: -150px !important;
}
.mt--200 {
margin-top: -200px !important;
}
.mb--200 {
margin-bottom: -200px !important;
}
.mt--300 {
margin-top: -300px !important;
}
.mb--300 {
margin-bottom: -300px !important;
}
// Large margins in pixels
.pt-100 {
padding-top: 100px !important;
}
.pb-100 {
padding-bottom: 100px !important;
}
.pt-150 {
padding-top: 150px !important;
}
.pb-150 {
padding-bottom: 150px !important;
}
.pt-200 {
padding-top: 200px !important;
}
.pb-200 {
padding-bottom: 200px !important;
}
.pt-250 {
padding-top: 250px !important;
}
.pb-250 {
padding-bottom: 250px !important;
}
.pt-300 {
padding-top: 300px!important;
}
.pb-300 {
padding-bottom: 300px!important;
}
}

View File

@ -0,0 +1,49 @@
// 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; }
// Text decorations
.text-underline { text-decoration: underline; }
.text-through { text-decoration: line-through; }
// 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; }
.lh-110 { line-height: 1.1; }
.lh-120 { line-height: 1.2; }
.lh-130 { line-height: 1.3; }
.lh-140 { line-height: 1.4; }
.lh-150 { line-height: 1.5; }
.lh-160 { line-height: 1.6; }
.lh-170 { line-height: 1.7; }
.lh-180 { line-height: 1.8; }
// Letter spacings
.ls-1 { letter-spacing: .0625rem; }
.ls-15 { letter-spacing: .09375rem; }
.ls-2 { letter-spacing: 0.125rem; }
// Color variations
@each $color, $value in $colors {
@include text-emphasis-variant(".text-#{$color}", $value);
}

View File

@ -0,0 +1,13 @@
//
// Tranform
//
@include media-breakpoint-up(lg) {
.transform-perspective-right {
transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
}
.transform-perspective-left{
transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
}
}

View File

@ -0,0 +1,279 @@
//
// Bootstrap datepicker
//
.datepicker {
border-radius: $datepicker-border-radius;
&-inline {
width: 220px;
}
direction: ltr;
&-rtl {
direction: rtl;
&.dropdown-menu {
left: auto;
}
table tr td span {
float: right;
}
}
&-dropdown {
top: 0;
left: 0;
padding: $datepicker-dropdown-padding;
@include box-shadow($dropdown-box-shadow);
&.datepicker-orient-left:before {
left: 6px;
}
&.datepicker-orient-left:after {
left: 7px;
}
&.datepicker-orient-right:before {
right: 6px;
}
&.datepicker-orient-right:after {
right: 7px;
}
&.datepicker-orient-bottom:before {
top: -7px;
}
&.datepicker-orient-bottom:after {
top: -6px;
}
&.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid $datepicker-dropdown-border;
}
&.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid $datepicker-dropdown-bg;
}
}
table {
margin: 0;
-webkit-touch-callout: none;
user-select: none;
tr {
td {
border-radius: $datepicker-cell-border-radius;
}
th {
border-radius: $datepicker-header-cell-border-radius;
font-weight: 500;
}
td,
th {
transition: $datepicker-cell-transition;
width: $datepicker-cell-width;
height: $datepicker-cell-height;
border: none;
text-align: center;
font-size: $font-size-sm;
}
}
}
// Inline display inside a table presents some problems with
// border and background colors.
.table-striped & table tr {
td,
th {
background-color: transparent;
}
}
table tr td {
&.old,
&.new {
color: $datepicker-disabled-old-new-color;
}
&.day:hover,
&.focused {
background: $datepicker-cell-hover-background;
cursor: pointer;
}
&.disabled,
&.disabled:hover {
background: none;
color: $datepicker-disabled-cell-color;
cursor: default;
}
&.highlighted {
border-radius: 0;
&.focused {
background: $datepicker-highlighted-bg
}
&.disabled,
&.disabled:active {
background: $datepicker-highlighted-bg;
color: $gray-400;
}
}
&.today {
background: lighten($datepicker-active-background, 45%);
&.focused {
background: lighten($gray-400, 58%);
}
&.disabled,
&.disabled:active {
background: lighten($gray-400, 58%);
color: $btn-link-disabled-color;
}
}
// Range selection
&.range {
background: $datepicker-range-background;
color: $datepicker-range-color;
border-radius: 0;
&.focused {
background: darken($datepicker-range-cell-focused-background, 3%);
}
&.disabled,
&.disabled:active,
&.day.disabled:hover {
background: darken($datepicker-active-background, 10%);
color: lighten($datepicker-active-background, 10%);
}
}
&.range.highlighted {
&.focused {
background: darken($datepicker-range-highlighted-bg, 10%);
}
&.disabled,
&.disabled:active {
background: $datepicker-range-highlighted-bg;
color: $datepicker-disabled-cell-color;
}
}
&.range.today {
&.disabled,
&.disabled:active {
background: $blue;
color: $white;
}
}
&.day.range-start {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.day.range-end {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.day.range-start.range-end {
border-radius: $datepicker-cell-border-radius;
}
&.selected,
&.selected.highlighted,
&.selected:hover,
&.selected.highlighted:hover,
&.day.range:hover {
background: $datepicker-active-background;
color: $datepicker-active-color;
}
&.active,
&.active.highlighted,
&.active:hover,
&.active.highlighted:hover {
background: $datepicker-active-background;
color: $datepicker-active-color;
box-shadow: $datepicker-active-box-shadow;
}
span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
border-radius: 4px;
&:hover,
&.focused {
background: $gray-200;
}
&.disabled,
&.disabled:hover {
background: none;
color: $datepicker-disabled-cell-color;
cursor: default;
}
&.active,
&.active:hover,
&.active.disabled,
&.active.disabled:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
}
&.old,
&.new {
color: $btn-link-disabled-color;
}
}
}
.datepicker-switch {
width: 145px;
}
.datepicker-switch,
.prev,
.next,
tfoot tr th {
cursor: pointer;
&:hover {
background: $gray-200;
}
}
.prev,
.next {
&.disabled {
visibility: hidden;
}
}
// Basic styling for calendar-week cells
.cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
}

View File

@ -0,0 +1,67 @@
//
// Bootstrap tags input
//
.bootstrap-tagsinput {
background-color: $input-bg;
border: $tags-input-border-width solid $tags-input-border-color;
display: inline-block;
padding: .25rem;
color: $tags-input-color;
vertical-align: middle;
border-radius: $input-border-radius;
max-width: 100%;
cursor: text;
input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
&::placeholder {
color: $input-placeholder-color;
opacity: 1;
}
&:focus {
border: none;
box-shadow: none;
}
}
.badge {
position: relative;
padding: .625rem .625rem .5rem;
margin: .125rem;
border-radius: $input-border-radius;
background: $tag-bg;
color: $tag-color;
line-height: 1.5;
@include box-shadow($tag-box-shadow);
@include transition($transition-base);
&:hover {
padding-right: 1.5rem;
}
}
[data-role="remove"] {
margin-left: 10px;
cursor: pointer;
color: $tag-close-color;
position: absolute;
top: 50%;
transform: translate(0, -50%);
&:after {
content: "×";
font-size: 16px;
}
}
}

View File

@ -0,0 +1,22 @@
//
// Chart.js
//
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
border-radius: 3px;
transition: all .1s ease;
pointer-events: none;
transform: translate(-50%, 0);
}
.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}

View File

@ -0,0 +1,74 @@
//
// Dropzone
//
.dropzone {
position: relative;
display: flex;
flex-direction: column;
}
.dz-message {
padding: 5rem 1rem;
background-color: $input-bg;
border: $input-border-width dashed $input-border-color;
border-radius: $border-radius;
text-align: center;
color: $text-muted;
transition: $transition-base;
order: -1;
cursor: pointer;
z-index: 999;
&:hover {
border-color: $text-muted;
color: $body-color;
}
}
.dz-drag-hover .dz-message {
border-color: theme-color("primary");
color: theme-color("primary");
}
.dropzone-multiple .dz-message {
padding-top: 2rem;
padding-bottom: 2rem;
}
.dropzone-single.dz-max-files-reached .dz-message {
background-color: fade-out($black, .1);
color: white;
opacity: 0;
&:hover {
opacity: 1;
}
}
.dz-preview-single {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border-radius: $border-radius;
}
.dz-preview-cover {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border-radius: $border-radius;
}
.dz-preview-img {
object-fit: cover;
width: 100%; height: 100%;
border-radius: $border-radius;
}
.dz-preview-multiple .list-group-item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
[data-dz-size] strong {
font-weight: $font-weight-normal;
}

View File

@ -0,0 +1,26 @@
.el-checkbox {
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: theme-color('primary');
border-color: theme-color('primary');
}
.el-checkbox__input .el-checkbox__inner {
width: 16px;
height: 16px;
font-size: 16px;
border-radius: 3px;
&::before {
top: 6px;
border-color: $custom-control-indicator-checked-border-color;
}
&::after {
height: 9px;
left: 5px;
}
&:hover {
border-color: theme-color('primary');
}
}
}

View File

@ -0,0 +1,64 @@
.el-table .el-table__header-wrapper {
thead th {
padding-top: 0;
padding-bottom: 0;
.cell {
min-height: 40px;
display: flex;
align-items: center;
}
}
.sort-caret {
border: 4px solid transparent;
}
.sort-caret.ascending {
top: 7px;
}
.ascending .sort-caret.ascending {
border-bottom-color: theme-color("default");
}
.sort-caret.descending {
bottom: 9px;
}
.descending .sort-caret.descending {
border-top-color: theme-color("default");
}
}
div.el-table {
background: transparent;
tbody td,
thead th {
padding: $table-cell-padding;
}
.el-table-column--selection .cell {
min-width: 100px;
overflow: visible;
text-overflow: initial;
.el-checkbox {
margin-bottom: 0;
}
}
.el-table__row {
background: transparent;
&:hover {
background: transparent;
}
}
&.el-table--enable-row-hover .el-table__body tr:hover>td {
background: transparent;
}
.el-table__row .cell,
.el-table__header .cell{
padding: 0;
}
}

Some files were not shown because too many files have changed in this diff Show More