v2 first commit
This commit is contained in:
48
resources/assets/sass/core/alerts/_alert-dismissible.scss
vendored
Normal file
48
resources/assets/sass/core/alerts/_alert-dismissible.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
47
resources/assets/sass/core/alerts/_alert-notify.scss
vendored
Normal file
47
resources/assets/sass/core/alerts/_alert-notify.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
49
resources/assets/sass/core/alerts/_alert.scss
vendored
Normal file
49
resources/assets/sass/core/alerts/_alert.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
22
resources/assets/sass/core/avatars/_avatar-group.scss
vendored
Normal file
22
resources/assets/sass/core/avatars/_avatar-group.scss
vendored
Normal 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;
|
||||
|
||||
}
|
||||
}
|
59
resources/assets/sass/core/avatars/_avatar.scss
vendored
Normal file
59
resources/assets/sass/core/avatars/_avatar.scss
vendored
Normal 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;
|
||||
}
|
29
resources/assets/sass/core/badges/_badge-circle.scss
vendored
Normal file
29
resources/assets/sass/core/badges/_badge-circle.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
42
resources/assets/sass/core/badges/_badge-dot.scss
vendored
Normal file
42
resources/assets/sass/core/badges/_badge-dot.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
18
resources/assets/sass/core/badges/_badge-floating.scss
vendored
Normal file
18
resources/assets/sass/core/badges/_badge-floating.scss
vendored
Normal 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%);
|
||||
}
|
||||
}
|
||||
}
|
67
resources/assets/sass/core/badges/_badge.scss
vendored
Normal file
67
resources/assets/sass/core/badges/_badge.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
42
resources/assets/sass/core/breadcrumbs/_breadcrumb.scss
vendored
Normal file
42
resources/assets/sass/core/breadcrumbs/_breadcrumb.scss
vendored
Normal 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;
|
||||
}
|
12
resources/assets/sass/core/buttons/_button-brand.scss
vendored
Normal file
12
resources/assets/sass/core/buttons/_button-brand.scss
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
//
|
||||
// Brand buttons
|
||||
//
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
@each $color, $value in $brand-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
79
resources/assets/sass/core/buttons/_button-group.scss
vendored
Normal file
79
resources/assets/sass/core/buttons/_button-group.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
92
resources/assets/sass/core/buttons/_button-icon.scss
vendored
Normal file
92
resources/assets/sass/core/buttons/_button-icon.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
90
resources/assets/sass/core/buttons/_button.scss
vendored
Normal file
90
resources/assets/sass/core/buttons/_button.scss
vendored
Normal 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");
|
||||
}
|
10
resources/assets/sass/core/cards/_card-animations.scss
vendored
Normal file
10
resources/assets/sass/core/cards/_card-animations.scss
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
//
|
||||
// Card with hover animations
|
||||
//
|
||||
|
||||
.card-lift--hover {
|
||||
&:hover {
|
||||
transform: translateY(-20px);
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
17
resources/assets/sass/core/cards/_card-blockquote.scss
vendored
Normal file
17
resources/assets/sass/core/cards/_card-blockquote.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
27
resources/assets/sass/core/cards/_card-money.scss
vendored
Normal file
27
resources/assets/sass/core/cards/_card-money.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
26
resources/assets/sass/core/cards/_card-pricing.scss
vendored
Normal file
26
resources/assets/sass/core/cards/_card-pricing.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
49
resources/assets/sass/core/cards/_card-profile.scss
vendored
Normal file
49
resources/assets/sass/core/cards/_card-profile.scss
vendored
Normal 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;
|
||||
}
|
16
resources/assets/sass/core/cards/_card-stats.scss
vendored
Normal file
16
resources/assets/sass/core/cards/_card-stats.scss
vendored
Normal 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%);
|
||||
}
|
||||
}
|
69
resources/assets/sass/core/cards/_card.scss
vendored
Normal file
69
resources/assets/sass/core/cards/_card.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
69
resources/assets/sass/core/charts/_chart.scss
vendored
Normal file
69
resources/assets/sass/core/charts/_chart.scss
vendored
Normal 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;
|
||||
}
|
47
resources/assets/sass/core/close/_close.scss
vendored
Normal file
47
resources/assets/sass/core/close/_close.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
38
resources/assets/sass/core/collapse/_accordion.scss
vendored
Normal file
38
resources/assets/sass/core/collapse/_accordion.scss
vendored
Normal 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");
|
||||
}
|
||||
}
|
||||
}
|
17
resources/assets/sass/core/content/_main-content.scss
vendored
Normal file
17
resources/assets/sass/core/content/_main-content.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
47
resources/assets/sass/core/custom-forms/_custom-checkbox.scss
vendored
Normal file
47
resources/assets/sass/core/custom-forms/_custom-checkbox.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
58
resources/assets/sass/core/custom-forms/_custom-control.scss
vendored
Normal file
58
resources/assets/sass/core/custom-forms/_custom-control.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
45
resources/assets/sass/core/custom-forms/_custom-form.scss
vendored
Normal file
45
resources/assets/sass/core/custom-forms/_custom-form.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
38
resources/assets/sass/core/custom-forms/_custom-radio.scss
vendored
Normal file
38
resources/assets/sass/core/custom-forms/_custom-radio.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
122
resources/assets/sass/core/custom-forms/_custom-toggle.scss
vendored
Normal file
122
resources/assets/sass/core/custom-forms/_custom-toggle.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
89
resources/assets/sass/core/dropdowns/_dropdown.scss
vendored
Normal file
89
resources/assets/sass/core/dropdowns/_dropdown.scss
vendored
Normal 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;
|
||||
}
|
107
resources/assets/sass/core/footers/_footer.scss
vendored
Normal file
107
resources/assets/sass/core/footers/_footer.scss
vendored
Normal 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%;
|
||||
}
|
38
resources/assets/sass/core/forms/_form-extend.scss
vendored
Normal file
38
resources/assets/sass/core/forms/_form-extend.scss
vendored
Normal 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%);
|
||||
}
|
||||
}
|
||||
}
|
78
resources/assets/sass/core/forms/_form-validation.scss
vendored
Normal file
78
resources/assets/sass/core/forms/_form-validation.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
109
resources/assets/sass/core/forms/_form.scss
vendored
Normal file
109
resources/assets/sass/core/forms/_form.scss
vendored
Normal 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;
|
||||
}
|
136
resources/assets/sass/core/forms/_input-group.scss
vendored
Normal file
136
resources/assets/sass/core/forms/_input-group.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
31
resources/assets/sass/core/grid/_grid.scss
vendored
Normal file
31
resources/assets/sass/core/grid/_grid.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
7
resources/assets/sass/core/headers/_header.scss
vendored
Normal file
7
resources/assets/sass/core/headers/_header.scss
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
//
|
||||
// Header
|
||||
//
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
57
resources/assets/sass/core/icons/_icon-actions.scss
vendored
Normal file
57
resources/assets/sass/core/icons/_icon-actions.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
48
resources/assets/sass/core/icons/_icon-shape.scss
vendored
Normal file
48
resources/assets/sass/core/icons/_icon-shape.scss
vendored
Normal 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));
|
||||
}
|
||||
}
|
80
resources/assets/sass/core/icons/_icon.scss
vendored
Normal file
80
resources/assets/sass/core/icons/_icon.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
52
resources/assets/sass/core/list-groups/_list-check.scss
vendored
Normal file
52
resources/assets/sass/core/list-groups/_list-check.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
46
resources/assets/sass/core/list-groups/_list-group.scss
vendored
Normal file
46
resources/assets/sass/core/list-groups/_list-group.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
10
resources/assets/sass/core/maps/_map.scss
vendored
Normal file
10
resources/assets/sass/core/maps/_map.scss
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
//
|
||||
// Map
|
||||
//
|
||||
|
||||
.map-canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: $map-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
33
resources/assets/sass/core/masks/_mask.scss
vendored
Normal file
33
resources/assets/sass/core/masks/_mask.scss
vendored
Normal 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);
|
||||
}
|
33
resources/assets/sass/core/medias/_media-comment.scss
vendored
Normal file
33
resources/assets/sass/core/medias/_media-comment.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
3
resources/assets/sass/core/medias/_media.scss
vendored
Normal file
3
resources/assets/sass/core/medias/_media.scss
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
//
|
||||
// Media
|
||||
//
|
22
resources/assets/sass/core/mixins/_alert.scss
vendored
Normal file
22
resources/assets/sass/core/mixins/_alert.scss
vendored
Normal 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%);
|
||||
}
|
||||
}
|
30
resources/assets/sass/core/mixins/_background-variant.scss
vendored
Normal file
30
resources/assets/sass/core/mixins/_background-variant.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
12
resources/assets/sass/core/mixins/_badge.scss
vendored
Normal file
12
resources/assets/sass/core/mixins/_badge.scss
vendored
Normal 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%);
|
||||
}
|
||||
}
|
||||
}
|
105
resources/assets/sass/core/mixins/_buttons.scss
vendored
Normal file
105
resources/assets/sass/core/mixins/_buttons.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
47
resources/assets/sass/core/mixins/_custom-forms.scss
vendored
Normal file
47
resources/assets/sass/core/mixins/_custom-forms.scss
vendored
Normal 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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
127
resources/assets/sass/core/mixins/_forms.scss
vendored
Normal file
127
resources/assets/sass/core/mixins/_forms.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
10
resources/assets/sass/core/mixins/_icon.scss
vendored
Normal file
10
resources/assets/sass/core/mixins/_icon.scss
vendored
Normal 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;
|
||||
}
|
25
resources/assets/sass/core/mixins/_modals.scss
vendored
Normal file
25
resources/assets/sass/core/mixins/_modals.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
36
resources/assets/sass/core/mixins/_popover.scss
vendored
Normal file
36
resources/assets/sass/core/mixins/_popover.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
31
resources/assets/sass/core/modals/_modal.scss
vendored
Normal file
31
resources/assets/sass/core/modals/_modal.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
37
resources/assets/sass/core/navbars/_navbar-collapse.scss
vendored
Normal file
37
resources/assets/sass/core/navbars/_navbar-collapse.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
104
resources/assets/sass/core/navbars/_navbar-dropdown.scss
vendored
Normal file
104
resources/assets/sass/core/navbars/_navbar-dropdown.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
17
resources/assets/sass/core/navbars/_navbar-floating.scss
vendored
Normal file
17
resources/assets/sass/core/navbars/_navbar-floating.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
216
resources/assets/sass/core/navbars/_navbar-search.scss
vendored
Normal file
216
resources/assets/sass/core/navbars/_navbar-search.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
58
resources/assets/sass/core/navbars/_navbar-top.scss
vendored
Normal file
58
resources/assets/sass/core/navbars/_navbar-top.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
507
resources/assets/sass/core/navbars/_navbar-vertical.scss
vendored
Normal file
507
resources/assets/sass/core/navbars/_navbar-vertical.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
368
resources/assets/sass/core/navbars/_navbar.scss
vendored
Normal file
368
resources/assets/sass/core/navbars/_navbar.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
66
resources/assets/sass/core/navs/_nav-pills.scss
vendored
Normal file
66
resources/assets/sass/core/navs/_nav-pills.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
33
resources/assets/sass/core/navs/_nav.scss
vendored
Normal file
33
resources/assets/sass/core/navs/_nav.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
48
resources/assets/sass/core/paginations/_pagination.scss
vendored
Normal file
48
resources/assets/sass/core/paginations/_pagination.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
21
resources/assets/sass/core/popovers/_popover.scss
vendored
Normal file
21
resources/assets/sass/core/popovers/_popover.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
89
resources/assets/sass/core/progresses/_progress.scss
vendored
Normal file
89
resources/assets/sass/core/progresses/_progress.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
13
resources/assets/sass/core/reboot/_reboot.scss
vendored
Normal file
13
resources/assets/sass/core/reboot/_reboot.scss
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow: hidden;
|
||||
}
|
117
resources/assets/sass/core/sections/_nucleo-icons.scss
vendored
Normal file
117
resources/assets/sass/core/sections/_nucleo-icons.scss
vendored
Normal 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));
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
54
resources/assets/sass/core/separators/_separator.scss
vendored
Normal file
54
resources/assets/sass/core/separators/_separator.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
30
resources/assets/sass/core/shortcuts/_shortcut.scss
vendored
Normal file
30
resources/assets/sass/core/shortcuts/_shortcut.scss
vendored
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
25
resources/assets/sass/core/tables/_table-actions.scss
vendored
Normal file
25
resources/assets/sass/core/tables/_table-actions.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
28
resources/assets/sass/core/tables/_table-sortable.scss
vendored
Normal file
28
resources/assets/sass/core/tables/_table-sortable.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
153
resources/assets/sass/core/tables/_table.scss
vendored
Normal file
153
resources/assets/sass/core/tables/_table.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
182
resources/assets/sass/core/timeline/_timeline.scss
vendored
Normal file
182
resources/assets/sass/core/timeline/_timeline.scss
vendored
Normal 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;
|
||||
}
|
22
resources/assets/sass/core/type/_article.scss
vendored
Normal file
22
resources/assets/sass/core/type/_article.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
14
resources/assets/sass/core/type/_display.scss
vendored
Normal file
14
resources/assets/sass/core/type/_display.scss
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
//
|
||||
// Display
|
||||
//
|
||||
|
||||
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4 {
|
||||
span {
|
||||
display: block;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
65
resources/assets/sass/core/type/_heading.scss
vendored
Normal file
65
resources/assets/sass/core/type/_heading.scss
vendored
Normal 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;
|
||||
}
|
27
resources/assets/sass/core/type/_type.scss
vendored
Normal file
27
resources/assets/sass/core/type/_type.scss
vendored
Normal 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;
|
||||
}
|
51
resources/assets/sass/core/utilities/_backgrounds.scss
vendored
Normal file
51
resources/assets/sass/core/utilities/_backgrounds.scss
vendored
Normal 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;
|
||||
}
|
37
resources/assets/sass/core/utilities/_blurable.scss
vendored
Normal file
37
resources/assets/sass/core/utilities/_blurable.scss
vendored
Normal 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%;
|
||||
}
|
||||
}
|
||||
}
|
64
resources/assets/sass/core/utilities/_floating.scss
vendored
Normal file
64
resources/assets/sass/core/utilities/_floating.scss
vendored
Normal 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)
|
||||
}
|
||||
}
|
18
resources/assets/sass/core/utilities/_helper.scss
vendored
Normal file
18
resources/assets/sass/core/utilities/_helper.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
9
resources/assets/sass/core/utilities/_image.scss
vendored
Normal file
9
resources/assets/sass/core/utilities/_image.scss
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
//
|
||||
// Image
|
||||
//
|
||||
|
||||
.img-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
35
resources/assets/sass/core/utilities/_opacity.scss
vendored
Normal file
35
resources/assets/sass/core/utilities/_opacity.scss
vendored
Normal 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;
|
||||
}
|
11
resources/assets/sass/core/utilities/_overflow.scss
vendored
Normal file
11
resources/assets/sass/core/utilities/_overflow.scss
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
//
|
||||
// Overflow
|
||||
//
|
||||
|
||||
.overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
25
resources/assets/sass/core/utilities/_position.scss
vendored
Normal file
25
resources/assets/sass/core/utilities/_position.scss
vendored
Normal 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%);
|
||||
}
|
28
resources/assets/sass/core/utilities/_shadows.scss
vendored
Normal file
28
resources/assets/sass/core/utilities/_shadows.scss
vendored
Normal 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;
|
||||
}
|
7
resources/assets/sass/core/utilities/_sizing.scss
vendored
Normal file
7
resources/assets/sass/core/utilities/_sizing.scss
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
//
|
||||
// Height
|
||||
//
|
||||
|
||||
.h-100vh {
|
||||
height: 100vh !important;
|
||||
}
|
107
resources/assets/sass/core/utilities/_spacing.scss
vendored
Normal file
107
resources/assets/sass/core/utilities/_spacing.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
49
resources/assets/sass/core/utilities/_text.scss
vendored
Normal file
49
resources/assets/sass/core/utilities/_text.scss
vendored
Normal 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);
|
||||
}
|
13
resources/assets/sass/core/utilities/_transform.scss
vendored
Normal file
13
resources/assets/sass/core/utilities/_transform.scss
vendored
Normal 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)
|
||||
}
|
||||
}
|
279
resources/assets/sass/core/vendors/_bootstrap-datepicker.scss
vendored
Normal file
279
resources/assets/sass/core/vendors/_bootstrap-datepicker.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
67
resources/assets/sass/core/vendors/_bootstrap-tagsinput.scss
vendored
Normal file
67
resources/assets/sass/core/vendors/_bootstrap-tagsinput.scss
vendored
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
22
resources/assets/sass/core/vendors/_chartjs.scss
vendored
Normal file
22
resources/assets/sass/core/vendors/_chartjs.scss
vendored
Normal 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;
|
||||
}
|
74
resources/assets/sass/core/vendors/_dropzone.scss
vendored
Normal file
74
resources/assets/sass/core/vendors/_dropzone.scss
vendored
Normal 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;
|
||||
}
|
26
resources/assets/sass/core/vendors/_element-checkbox.scss
vendored
Normal file
26
resources/assets/sass/core/vendors/_element-checkbox.scss
vendored
Normal 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');
|
||||
}
|
||||
}
|
||||
}
|
64
resources/assets/sass/core/vendors/_element-tables.scss
vendored
Normal file
64
resources/assets/sass/core/vendors/_element-tables.scss
vendored
Normal 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
Reference in New Issue
Block a user