Initial Commit
The initial public commit of MVGL website code.
This commit is contained in:
commit
b39ecf1638
2043 changed files with 215154 additions and 0 deletions
11
resources/assets/core/sass/base/_functions.scss
vendored
Normal file
11
resources/assets/core/sass/base/_functions.scss
vendored
Normal file
|
@ -0,0 +1,11 @@
|
|||
//
|
||||
// Functions
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "functions/get";
|
||||
@import "functions/set";
|
||||
@import "functions/math";
|
||||
@import "functions/valueif";
|
||||
@import "functions/theme-colors";
|
||||
@import "functions/mode";
|
11
resources/assets/core/sass/base/_mixins.scss
vendored
Normal file
11
resources/assets/core/sass/base/_mixins.scss
vendored
Normal file
|
@ -0,0 +1,11 @@
|
|||
//
|
||||
// Mixins
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "mixins/attr";
|
||||
@import "mixins/browsers";
|
||||
@import "mixins/fixes";
|
||||
@import "mixins/reset";
|
||||
@import "mixins/placeholder";
|
||||
@import "mixins/breakpoints";
|
82
resources/assets/core/sass/base/functions/_get.scss
vendored
Normal file
82
resources/assets/core/sass/base/functions/_get.scss
vendored
Normal file
|
@ -0,0 +1,82 @@
|
|||
//
|
||||
// Get
|
||||
//
|
||||
|
||||
@function get($map, $keys...) {
|
||||
@if length($keys) == 1 {
|
||||
$keys: nth($keys, 1);
|
||||
}
|
||||
|
||||
@if type-of($map) != 'map' or $map == null {
|
||||
//@return false;
|
||||
}
|
||||
|
||||
$warn: "#{nth($keys, 1)}";
|
||||
$length: length($keys);
|
||||
$get: map-get($map, nth($keys, 1));
|
||||
|
||||
@if $length > 1 {
|
||||
@for $i from 2 through $length {
|
||||
@if $get != null and type-of($get) == 'map' {
|
||||
$warn: $warn + "->#{nth($keys, $i)}";
|
||||
$get: map-get($get, nth($keys, $i));
|
||||
|
||||
@if $get == null {
|
||||
@return null;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@return get-warning($warn, $get, nth($keys, $i));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $get;
|
||||
}
|
||||
|
||||
@function has($map, $keys...) {
|
||||
@if length($keys) == 1 {
|
||||
$keys: nth($keys, 1);
|
||||
}
|
||||
|
||||
@if type-of($map) != 'map' or $map == null {
|
||||
//@return false;
|
||||
}
|
||||
|
||||
$warn: "#{nth($keys, 1)}";
|
||||
$length: length($keys);
|
||||
$get: map-get($map, nth($keys, 1));
|
||||
|
||||
@if $length > 1 {
|
||||
@for $i from 2 through $length {
|
||||
@if $get != null and type-of($get) == 'map' {
|
||||
$warn: $warn + "->#{nth($keys, $i)}";
|
||||
$get: map-get($get, nth($keys, $i));
|
||||
|
||||
@if $get == null {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $get != null {
|
||||
@return true;
|
||||
}
|
||||
@else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@function get-warning($warn, $get, $key) {
|
||||
@if $get == null {
|
||||
@warn "Map has no value for key search `#{$warn}`";
|
||||
}
|
||||
@else if type-of($get) != 'map' {
|
||||
@warn "Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`";
|
||||
}
|
||||
@return null;
|
||||
}
|
15
resources/assets/core/sass/base/functions/_math.scss
vendored
Normal file
15
resources/assets/core/sass/base/functions/_math.scss
vendored
Normal file
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Math
|
||||
//
|
||||
|
||||
@function sqrt($r) {
|
||||
$x0: 1;
|
||||
$x1: $x0;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
|
||||
$x0: $x1;
|
||||
}
|
||||
|
||||
@return $x1;
|
||||
}
|
27
resources/assets/core/sass/base/functions/_mode.scss
vendored
Normal file
27
resources/assets/core/sass/base/functions/_mode.scss
vendored
Normal file
|
@ -0,0 +1,27 @@
|
|||
//
|
||||
// Get Mode
|
||||
//
|
||||
|
||||
@function getMode() {
|
||||
@if (variable-exists(mode)) {
|
||||
@return $mode;
|
||||
} @else {
|
||||
@return default;
|
||||
}
|
||||
}
|
||||
|
||||
@function isDarkMode() {
|
||||
@if (getMode() == dark) {
|
||||
@return true;
|
||||
} @else {
|
||||
@return false;
|
||||
}
|
||||
}
|
||||
|
||||
@function isDefaultMode() {
|
||||
@if (getMode() == default) {
|
||||
@return true;
|
||||
} @else {
|
||||
@return false;
|
||||
}
|
||||
}
|
43
resources/assets/core/sass/base/functions/_set.scss
vendored
Normal file
43
resources/assets/core/sass/base/functions/_set.scss
vendored
Normal file
|
@ -0,0 +1,43 @@
|
|||
/// Deep set function to set a value in nested maps
|
||||
|
||||
@function set($map, $keys, $value) {
|
||||
$maps: ($map,);
|
||||
$result: null;
|
||||
|
||||
// If the last key is a map already
|
||||
// Warn the user we will be overriding it with $value
|
||||
@if type-of(nth($keys, -1)) == "map" {
|
||||
@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
|
||||
}
|
||||
|
||||
// If $keys is a single key
|
||||
// Just merge and return
|
||||
@if length($keys) == 1 {
|
||||
@return map-merge($map, ($keys: $value));
|
||||
}
|
||||
|
||||
// Loop from the first to the second to last key from $keys
|
||||
// Store the associated map to this key in the $maps list
|
||||
// If the key doesn't exist, throw an error
|
||||
@for $i from 1 through length($keys) - 1 {
|
||||
$current-key: nth($keys, $i);
|
||||
$current-map: nth($maps, -1);
|
||||
$current-get: map-get($current-map, $current-key);
|
||||
@if $current-get == null {
|
||||
@error "Key `#{$key}` doesn't exist at current level in map.";
|
||||
}
|
||||
$maps: append($maps, $current-get);
|
||||
}
|
||||
|
||||
// Loop from the last map to the first one
|
||||
// Merge it with the previous one
|
||||
@for $i from length($maps) through 1 {
|
||||
$current-map: nth($maps, $i);
|
||||
$current-key: nth($keys, $i);
|
||||
$current-val: if($i == length($maps), $value, $result);
|
||||
$result: map-merge($current-map, ($current-key: $current-val));
|
||||
}
|
||||
|
||||
// Return result
|
||||
@return $result;
|
||||
}
|
15
resources/assets/core/sass/base/functions/_theme-colors.scss
vendored
Normal file
15
resources/assets/core/sass/base/functions/_theme-colors.scss
vendored
Normal file
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Bootstrap extended functions
|
||||
//
|
||||
|
||||
@function theme-inverse-color($key: "primary") {
|
||||
@return get($theme-inverse-colors, $key);
|
||||
}
|
||||
|
||||
@function theme-active-color($key: "primary") {
|
||||
@return get($theme-active-colors, $key);
|
||||
}
|
||||
|
||||
@function theme-light-color($key: "primary") {
|
||||
@return get($theme-light-colors, $key);
|
||||
}
|
13
resources/assets/core/sass/base/functions/_valueif.scss
vendored
Normal file
13
resources/assets/core/sass/base/functions/_valueif.scss
vendored
Normal file
|
@ -0,0 +1,13 @@
|
|||
//
|
||||
// valueif
|
||||
//
|
||||
|
||||
@function valueif($check, $trueValue, $falseValue: null) {
|
||||
@if $check {
|
||||
@return $trueValue;
|
||||
} @else if $falseValue != null {
|
||||
@return $falseValue;
|
||||
} @else {
|
||||
@return null;
|
||||
}
|
||||
}
|
9
resources/assets/core/sass/base/mixins/_attr.scss
vendored
Normal file
9
resources/assets/core/sass/base/mixins/_attr.scss
vendored
Normal file
|
@ -0,0 +1,9 @@
|
|||
//
|
||||
// CSS Attribute
|
||||
//
|
||||
|
||||
@mixin attr($attr, $value, $important: '') {
|
||||
@if $value != null and $value != false {
|
||||
#{$attr}: #{$value} #{$important};
|
||||
}
|
||||
}
|
25
resources/assets/core/sass/base/mixins/_breakpoints.scss
vendored
Normal file
25
resources/assets/core/sass/base/mixins/_breakpoints.scss
vendored
Normal file
|
@ -0,0 +1,25 @@
|
|||
// Media of at most the maximum and minimum breakpoint widths. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint.
|
||||
|
||||
@mixin media-breakpoint-direction($direction, $name, $breakpoints: $grid-breakpoints) {
|
||||
@if $direction == up {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
|
||||
} @else if $direction == down {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
10
resources/assets/core/sass/base/mixins/_browsers.scss
vendored
Normal file
10
resources/assets/core/sass/base/mixins/_browsers.scss
vendored
Normal file
|
@ -0,0 +1,10 @@
|
|||
//
|
||||
// Browsers
|
||||
//
|
||||
|
||||
@mixin for-edge {
|
||||
// Microsoft Edge
|
||||
@supports (-ms-ime-align:auto) {
|
||||
@content;
|
||||
}
|
||||
}
|
15
resources/assets/core/sass/base/mixins/_fixes.scss
vendored
Normal file
15
resources/assets/core/sass/base/mixins/_fixes.scss
vendored
Normal file
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Fixes
|
||||
//
|
||||
|
||||
|
||||
@mixin fix-fixed-position-lags() {
|
||||
// webkit hack for smooth font view on fixed positioned elements
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
}
|
||||
|
||||
@mixin fix-animation-lags() {
|
||||
transform: translateZ(0);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
16
resources/assets/core/sass/base/mixins/_placeholder.scss
vendored
Normal file
16
resources/assets/core/sass/base/mixins/_placeholder.scss
vendored
Normal file
|
@ -0,0 +1,16 @@
|
|||
//
|
||||
// Input placeholder color
|
||||
//
|
||||
|
||||
@mixin placeholder($color) {
|
||||
// Chrome, Firefox, Opera, Safari 10.1+
|
||||
&::placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
23
resources/assets/core/sass/base/mixins/_reset.scss
vendored
Normal file
23
resources/assets/core/sass/base/mixins/_reset.scss
vendored
Normal file
|
@ -0,0 +1,23 @@
|
|||
//
|
||||
// Reset
|
||||
//
|
||||
|
||||
@mixin button-reset() {
|
||||
appearance: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
outline: none !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@mixin input-reset() {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
62
resources/assets/core/sass/components/_accordion.scss
vendored
Normal file
62
resources/assets/core/sass/components/_accordion.scss
vendored
Normal file
|
@ -0,0 +1,62 @@
|
|||
//
|
||||
// Accordion
|
||||
//
|
||||
|
||||
// Base
|
||||
.accordion {
|
||||
// According heading
|
||||
.accordion-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Icon toggle mode
|
||||
&.accordion-icon-toggle {
|
||||
// Accordion icon expaned mode
|
||||
.accordion-icon {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
transition: $transition-base;
|
||||
transform: rotate(90deg);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i,
|
||||
.svg-icon {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon collapsed mode
|
||||
.collapsed {
|
||||
.accordion-icon {
|
||||
transition: $transition-base;
|
||||
transform: rotate(0);
|
||||
|
||||
i,
|
||||
.svg-icon {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset accordion item border
|
||||
&.accordion-borderless {
|
||||
// According item
|
||||
.accordion-item {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset accordion item border, border radiues and background color
|
||||
&.accordion-flush {
|
||||
// According item
|
||||
.accordion-item {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
37
resources/assets/core/sass/components/_anchor.scss
vendored
Normal file
37
resources/assets/core/sass/components/_anchor.scss
vendored
Normal file
|
@ -0,0 +1,37 @@
|
|||
//
|
||||
// Anchor
|
||||
//
|
||||
|
||||
.anchor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content:flex-start;
|
||||
height: 1em;
|
||||
width: 1.25em;
|
||||
margin-left: -1.25em;
|
||||
font-weight: 500;
|
||||
font-size: 0.8em;
|
||||
color: $text-muted;
|
||||
transition: $transition-base;
|
||||
|
||||
&:before {
|
||||
content: '#';
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
81
resources/assets/core/sass/components/_animation.scss
vendored
Normal file
81
resources/assets/core/sass/components/_animation.scss
vendored
Normal file
|
@ -0,0 +1,81 @@
|
|||
//
|
||||
// Animation
|
||||
//
|
||||
|
||||
// Base
|
||||
.animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
// Slide In Down
|
||||
@keyframes animationSlideInDown {
|
||||
from {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.animation-slide-in-down {
|
||||
animation-name: animationSlideInDown;
|
||||
}
|
||||
|
||||
// Slide In Up
|
||||
@keyframes animationSlideInUp {
|
||||
from {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.animation-slide-in-up {
|
||||
animation-name: animationSlideInUp;
|
||||
}
|
||||
|
||||
// Fade In
|
||||
@keyframes animationFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-fade-in {
|
||||
animation-name: animationFadeIn;
|
||||
}
|
||||
|
||||
// Fade Out
|
||||
@keyframes animationFadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.animation-fade-out {
|
||||
animation-name: animationFadeOut;
|
||||
}
|
||||
|
||||
// Blink
|
||||
.animation-blink {
|
||||
animation: animationBlink 1s steps(5, start) infinite;
|
||||
}
|
||||
|
||||
@keyframes animationBlink {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
69
resources/assets/core/sass/components/_badge.scss
vendored
Normal file
69
resources/assets/core/sass/components/_badge.scss
vendored
Normal file
|
@ -0,0 +1,69 @@
|
|||
//
|
||||
// Badge
|
||||
//
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
// Fixed size
|
||||
&.badge-circle,
|
||||
&.badge-square {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $badge-size;
|
||||
min-width: $badge-size;
|
||||
padding: 0 0.1rem;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
// Circle
|
||||
&.badge-circle {
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
min-width: unset;
|
||||
width: $badge-size;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.badge-sm {
|
||||
min-width: $badge-size-sm;
|
||||
font-size: $badge-font-size-sm;
|
||||
|
||||
&.badge-square {
|
||||
height: $badge-size-sm;
|
||||
}
|
||||
|
||||
&.badge-circle {
|
||||
width: $badge-size-sm;
|
||||
height: $badge-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-lg {
|
||||
min-width: $badge-size-lg;
|
||||
font-size: $badge-font-size-lg;
|
||||
|
||||
&.badge-square {
|
||||
height: $badge-size-lg;
|
||||
}
|
||||
|
||||
&.badge-circle {
|
||||
width: $badge-size-lg;
|
||||
height: $badge-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in $theme-colors {
|
||||
.badge-#{$name} {
|
||||
color: theme-inverse-color($name);
|
||||
background-color: $value;
|
||||
}
|
||||
|
||||
.badge-light-#{$name} {
|
||||
color: $value;
|
||||
background-color: theme-light-color($name);
|
||||
}
|
||||
}
|
43
resources/assets/core/sass/components/_blockui.scss
vendored
Normal file
43
resources/assets/core/sass/components/_blockui.scss
vendored
Normal file
|
@ -0,0 +1,43 @@
|
|||
//
|
||||
// BlockUI
|
||||
//
|
||||
|
||||
|
||||
.blockui {
|
||||
position: relative;
|
||||
|
||||
.blockui-overlay {
|
||||
transition: all 0.3s ease;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: get($blockui, overlay-bg);
|
||||
|
||||
.spinner-border {
|
||||
height: 1.35rem;
|
||||
width: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blockui-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include border-radius($border-radius);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
background-color: $tooltip-bg;
|
||||
color: if(isDarkMode(), $gray-700, $gray-600);
|
||||
font-weight: $font-weight-bold;
|
||||
margin: 0 !important;
|
||||
width: auto;
|
||||
padding: 0.85rem 1.75rem !important;
|
||||
|
||||
.spinner-border {
|
||||
margin-right: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
66
resources/assets/core/sass/components/_breadcrumb.scss
vendored
Normal file
66
resources/assets/core/sass/components/_breadcrumb.scss
vendored
Normal file
|
@ -0,0 +1,66 @@
|
|||
//
|
||||
// Breadcrumb
|
||||
//
|
||||
|
||||
// Breadcrumb
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// Item breadcrumb
|
||||
.breadcrumb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
padding-right: $breadcrumb-item-padding-x;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "/";
|
||||
padding-left: $breadcrumb-item-padding-x;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb line style
|
||||
.breadcrumb-line {
|
||||
.breadcrumb-item {
|
||||
&:after {
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb dot style
|
||||
.breadcrumb-dot {
|
||||
.breadcrumb-item {
|
||||
&:after {
|
||||
content: "\2022";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb separatorless style
|
||||
.breadcrumb-separatorless {
|
||||
.breadcrumb-item {
|
||||
&:after {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
33
resources/assets/core/sass/components/_bullet.scss
vendored
Normal file
33
resources/assets/core/sass/components/_bullet.scss
vendored
Normal file
|
@ -0,0 +1,33 @@
|
|||
//
|
||||
// Bullet
|
||||
//
|
||||
|
||||
// Base
|
||||
.bullet {
|
||||
display: inline-block;
|
||||
background-color: get($bullet, bg-color);
|
||||
@include border-radius(get($bullet, bar-border-radius));
|
||||
width: get($bullet, bar-width);
|
||||
height: get($bullet, bar-height);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Dot bullet
|
||||
.bullet-dot {
|
||||
width: get($bullet, dot-size);
|
||||
height: get($bullet, dot-size);
|
||||
border-radius: 100% !important;
|
||||
}
|
||||
|
||||
// Vertical bullet
|
||||
.bullet-vertical {
|
||||
width: get($bullet, bar-height);
|
||||
height: get($bullet, bar-width);
|
||||
}
|
||||
|
||||
// Vertical line
|
||||
.bullet-line {
|
||||
width: get($bullet, line-width);
|
||||
height: get($bullet, line-height);
|
||||
border-radius: 0;
|
||||
}
|
7
resources/assets/core/sass/components/_buttons.scss
vendored
Normal file
7
resources/assets/core/sass/components/_buttons.scss
vendored
Normal file
|
@ -0,0 +1,7 @@
|
|||
//
|
||||
// Buttons
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "buttons/base";
|
||||
@import "buttons/theme";
|
271
resources/assets/core/sass/components/_card.scss
vendored
Normal file
271
resources/assets/core/sass/components/_card.scss
vendored
Normal file
|
@ -0,0 +1,271 @@
|
|||
//
|
||||
// Card
|
||||
//
|
||||
|
||||
// Base
|
||||
.card {
|
||||
@if ($card-border-enabled) {
|
||||
border: $card-border-width $card-border-style $card-border-color;
|
||||
} @else {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
box-shadow: $card-box-shadow;
|
||||
|
||||
// Header
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
min-height: $card-header-height;
|
||||
padding: 0 $card-px;
|
||||
background-color: transparent;
|
||||
border-bottom: $card-border-width $card-border-style $card-border-color;
|
||||
|
||||
// Title
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: $card-header-py;
|
||||
margin-left: 0;
|
||||
|
||||
&.flex-column {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
margin-right: 0.75rem;
|
||||
line-height: 0;
|
||||
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
color: $gray-600;
|
||||
line-height: 0;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: $gray-600;
|
||||
@include svg-icon-size(24px);
|
||||
}
|
||||
}
|
||||
|
||||
&,
|
||||
.card-label {
|
||||
font-weight: 500;
|
||||
font-size: 1.275rem;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
margin: 0 0.75rem 0 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// Description
|
||||
small {
|
||||
color: $text-muted;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
.card-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: $card-header-py 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
.card-body {
|
||||
padding: $card-py $card-px;
|
||||
}
|
||||
|
||||
// Footer
|
||||
.card-footer {
|
||||
padding: $card-py $card-px;
|
||||
background-color: transparent;
|
||||
border-top: $card-border-width $card-border-style $card-border-color;
|
||||
}
|
||||
|
||||
// Scroll
|
||||
.card-scroll {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Reset padding x
|
||||
&.card-px-0 {
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-py-0 {
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-p-0 {
|
||||
.card-header,
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dashed style
|
||||
&.card-dashed {
|
||||
box-shadow: none;
|
||||
border: $card-border-width dashed $card-border-dashed-color;
|
||||
|
||||
> .card-header {
|
||||
border-bottom: 1px dashed $card-border-dashed-color;
|
||||
}
|
||||
|
||||
> .card-footer {
|
||||
border-top: 1px dashed $card-border-dashed-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered style
|
||||
&.card-bordered {
|
||||
box-shadow: none;
|
||||
border: $card-border-width $card-border-style $card-border-color;
|
||||
}
|
||||
|
||||
// Flush header and footer borders
|
||||
&.card-flush {
|
||||
> .card-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
> .card-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-shadow {
|
||||
box-shadow: $card-box-shadow;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive stretch heights
|
||||
.card {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Stretch
|
||||
&.card#{$infix}-stretch {
|
||||
height: calc(100% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 75
|
||||
&.card#{$infix}-stretch-75 {
|
||||
height: calc(75% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 50
|
||||
&.card#{$infix}-stretch-50 {
|
||||
height: calc(50% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 33
|
||||
&.card#{$infix}-stretch-33 {
|
||||
height: calc(33.333% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Stretch 25
|
||||
&.card#{$infix}-stretch-25 {
|
||||
height: calc(25% - var(--bs-gutter-y));
|
||||
}
|
||||
|
||||
// Header stretch
|
||||
.card-header#{$infix}-stretch {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
align-items: stretch;
|
||||
|
||||
.card-toolbar {
|
||||
margin: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
.card-p {
|
||||
padding: $card-py $card-px !important;
|
||||
}
|
||||
|
||||
.card-px {
|
||||
padding-left: $card-px !important;
|
||||
padding-right: $card-px !important;
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
|
||||
.card-py {
|
||||
padding-top: $card-py !important;
|
||||
padding-bottom: $card-py !important;
|
||||
}
|
||||
|
||||
.card-rounded {
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-start {
|
||||
border-top-left-radius: $card-border-radius;
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-end {
|
||||
border-top-right-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-top {
|
||||
border-top-left-radius: $card-border-radius;
|
||||
border-top-right-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
.card-rounded-bottom {
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
// Mobile mode
|
||||
@include media-breakpoint-down(md) {
|
||||
.card {
|
||||
> .card-header:not(.flex-nowrap) {
|
||||
padding-top: $card-header-py;
|
||||
padding-bottom: $card-header-py;
|
||||
}
|
||||
}
|
||||
}
|
130
resources/assets/core/sass/components/_carousel.scss
vendored
Normal file
130
resources/assets/core/sass/components/_carousel.scss
vendored
Normal file
|
@ -0,0 +1,130 @@
|
|||
//
|
||||
// Carousel
|
||||
//
|
||||
|
||||
|
||||
.carousel.carousel-custom {
|
||||
// Indicators
|
||||
.carousel-indicators {
|
||||
align-items: center;
|
||||
position: static;
|
||||
z-index: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
|
||||
&.active {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Dots style
|
||||
&.carousel-indicators-dots {
|
||||
li {
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
height: $carousel-custom-dots-indicator-active-size;
|
||||
width: $carousel-custom-dots-indicator-active-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
@include border-radius(50%);
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: $carousel-custom-indicator-default-bg-color;
|
||||
height: $carousel-custom-dots-indicator-default-size;
|
||||
width: $carousel-custom-dots-indicator-default-size;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
|
||||
&:after {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
height: $carousel-custom-dots-indicator-active-size;
|
||||
width: $carousel-custom-dots-indicator-active-size;
|
||||
background-color: $carousel-custom-indicator-active-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bullet style
|
||||
&.carousel-indicators-bullet {
|
||||
li {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: transparent;
|
||||
border-radius: $carousel-custom-bullet-indicator-default-size;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-default-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: $carousel-custom-bullet-indicator-default-bg-color;
|
||||
border-radius: $carousel-custom-bullet-indicator-default-size;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-default-size;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
background-color: transparent;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-active-width;
|
||||
|
||||
&:after {
|
||||
transition: all $carousel-custom-indicator-transition-speed ease;
|
||||
height: $carousel-custom-bullet-indicator-default-size;
|
||||
width: $carousel-custom-bullet-indicator-active-width;
|
||||
background-color: $carousel-custom-bullet-indicator-active-bg-color
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Theme colors
|
||||
@each $name, $value in $theme-colors {
|
||||
.carousel-indicators-active-#{$name} {
|
||||
li.active:after {
|
||||
background-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch mode
|
||||
&.carousel-stretch {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.carousel-inner {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.carousel-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
15
resources/assets/core/sass/components/_code.scss
vendored
Normal file
15
resources/assets/core/sass/components/_code.scss
vendored
Normal file
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
code:not([class*="language-"]) {
|
||||
font-weight: $code-font-weight;
|
||||
color: $code-color;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
background-color: $code-bg;
|
||||
padding: $code-padding;
|
||||
margin: $code-margin;
|
||||
box-shadow: $code-box-shadow;
|
||||
@include border-radius($code-border-radius);
|
||||
}
|
21
resources/assets/core/sass/components/_container.scss
vendored
Normal file
21
resources/assets/core/sass/components/_container.scss
vendored
Normal file
|
@ -0,0 +1,21 @@
|
|||
//
|
||||
// Container
|
||||
//
|
||||
|
||||
// Desktop Mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
// Containers
|
||||
.container-custom {
|
||||
padding-left: get($container, padding, lg) !important;
|
||||
padding-right: get($container, padding, lg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
.container-custom {
|
||||
max-width: none;
|
||||
padding-left: get($container, padding, default) !important;
|
||||
padding-right: get($container, padding, default) !important;
|
||||
}
|
||||
}
|
8
resources/assets/core/sass/components/_cookiealert.scss
vendored
Normal file
8
resources/assets/core/sass/components/_cookiealert.scss
vendored
Normal file
|
@ -0,0 +1,8 @@
|
|||
//
|
||||
// Cookie Alert
|
||||
//
|
||||
|
||||
.cookiealert{
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
62
resources/assets/core/sass/components/_drawer.scss
vendored
Normal file
62
resources/assets/core/sass/components/_drawer.scss
vendored
Normal file
|
@ -0,0 +1,62 @@
|
|||
//
|
||||
// Drawer
|
||||
//
|
||||
|
||||
// Drawer
|
||||
.drawer {
|
||||
display: flex !important;
|
||||
overflow: auto;
|
||||
z-index: get($drawer, z-index);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: get($drawer, bg-color);
|
||||
transition: transform get($drawer, transition-speed) ease-in-out;
|
||||
|
||||
&.drawer-start {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
&.drawer-end {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&.drawer-on {
|
||||
transform: none;
|
||||
box-shadow: get($drawer, box-shadow);
|
||||
transition: transform get($drawer, transition-speed) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
// Drawer Overlay
|
||||
.drawer-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
z-index: get($drawer, z-index) - 1;
|
||||
background-color: get($drawer, overlay-bg-color);
|
||||
animation: animation-drawer-fade-in get($drawer, overlay-animation-speed) ease-in-out 1;
|
||||
}
|
||||
|
||||
// Initial state
|
||||
[data-kt-drawer="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Animation
|
||||
@keyframes animation-drawer-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
// Tablet & Mobile Modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
body[data-kt-drawer="on"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
104
resources/assets/core/sass/components/_explore.scss
vendored
Normal file
104
resources/assets/core/sass/components/_explore.scss
vendored
Normal file
|
@ -0,0 +1,104 @@
|
|||
//
|
||||
// Explore(used for demo product demo)
|
||||
//
|
||||
|
||||
$explore-primary: #00B2FF;
|
||||
$explore-primary-light: #F1FAFF;
|
||||
$explore-primary-active: #0098DA;
|
||||
$explore-primary-inverse: $white;
|
||||
|
||||
$explore-success: #50CD89;
|
||||
$explore-success-light: #E8FFF3;
|
||||
$explore-success-active: #47BE7D;
|
||||
$explore-success-inverse: $white;
|
||||
|
||||
$explore-warning: #FFC700;
|
||||
$explore-warning-inverse: $white;
|
||||
|
||||
$explore-danger: #F1416C;
|
||||
$explore-warning-inverse: $white;
|
||||
|
||||
.explore-btn-toggle {
|
||||
color: $gray-600;
|
||||
background-color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $explore-primary-inverse;
|
||||
background-color: $explore-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-dismiss {
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
i,
|
||||
.svg-icon {
|
||||
color: $explore-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-primary {
|
||||
border: 0;
|
||||
color: $explore-primary-inverse;
|
||||
background-color: $explore-primary;
|
||||
|
||||
&:hover {
|
||||
color: $explore-primary-inverse;
|
||||
background-color: $explore-primary-active;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-secondary {
|
||||
border: 0;
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
|
||||
&:hover {
|
||||
color: $gray-800;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-btn-outline {
|
||||
border: 1px dashed $gray-300 !important;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border: 1px dashed $explore-success !important;
|
||||
background-color: $explore-success-light;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-link {
|
||||
color: $explore-primary;
|
||||
|
||||
&:hover {
|
||||
color: $explore-primary-active;
|
||||
}
|
||||
}
|
||||
|
||||
.explore-link-hover:hover {
|
||||
color: $explore-primary !important;
|
||||
}
|
||||
|
||||
.explore-icon-success {
|
||||
color: $explore-success;
|
||||
}
|
||||
|
||||
.explore-icon-danger {
|
||||
color: $explore-danger;
|
||||
}
|
||||
|
||||
.explore-label-free {
|
||||
color: $explore-warning-inverse;
|
||||
background-color: $explore-warning;
|
||||
}
|
||||
|
||||
.explore-label-pro {
|
||||
color: $explore-success-inverse;
|
||||
background-color: $explore-success;
|
||||
}
|
34
resources/assets/core/sass/components/_feedback.scss
vendored
Normal file
34
resources/assets/core/sass/components/_feedback.scss
vendored
Normal file
|
@ -0,0 +1,34 @@
|
|||
//
|
||||
// Loading
|
||||
//
|
||||
|
||||
.feedback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.feedback-popup {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
z-index: get($feedback, popup, z-index);
|
||||
box-shadow: get($feedback, popup, box-shadow);
|
||||
background-color: get($feedback, popup, background-color);
|
||||
border-radius: get($feedback, popup, border-radius);
|
||||
padding: get($feedback, popup, padding);
|
||||
}
|
||||
|
||||
// Placement
|
||||
.feedback-top-center {
|
||||
display: flex;
|
||||
transition: top get($feedback, popup, transition-speed) ease;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@include border-top-start-radius(0);
|
||||
@include border-top-end-radius(0);
|
||||
|
||||
&.feedback-shown {
|
||||
top: 0px;
|
||||
transition: top get($feedback, popup, transition-speed) ease;
|
||||
}
|
||||
}
|
18
resources/assets/core/sass/components/_fixed.scss
vendored
Normal file
18
resources/assets/core/sass/components/_fixed.scss
vendored
Normal file
|
@ -0,0 +1,18 @@
|
|||
//
|
||||
// Fixed
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.fixed-top#{$infix} {
|
||||
position: fixed;
|
||||
z-index: get($fixed, z-index);
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
11
resources/assets/core/sass/components/_forms.scss
vendored
Normal file
11
resources/assets/core/sass/components/_forms.scss
vendored
Normal file
|
@ -0,0 +1,11 @@
|
|||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "forms/form-control";
|
||||
@import "forms/form-select";
|
||||
@import "forms/form-check";
|
||||
@import "forms/floating-labels";
|
||||
@import "forms/input-group";
|
||||
@import "forms/required";
|
12
resources/assets/core/sass/components/_helpers.scss
vendored
Normal file
12
resources/assets/core/sass/components/_helpers.scss
vendored
Normal file
|
@ -0,0 +1,12 @@
|
|||
//
|
||||
// Helpers
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "helpers/background";
|
||||
@import "helpers/borders";
|
||||
@import "helpers/flex";
|
||||
@import "helpers/shadow";
|
||||
@import "helpers/text";
|
||||
@import "helpers/opacity";
|
||||
@import "helpers/transform";
|
111
resources/assets/core/sass/components/_image-input.scss
vendored
Normal file
111
resources/assets/core/sass/components/_image-input.scss
vendored
Normal file
|
@ -0,0 +1,111 @@
|
|||
//
|
||||
// Avatar
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.image-input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@include border-radius($border-radius);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
// Empty state
|
||||
&:not(.image-input-empty) {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.image-input-wrapper {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
@include border-radius($border-radius);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// Actions
|
||||
[data-kt-image-input-action] {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
// Change Button
|
||||
[data-kt-image-input-action="change"] {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
|
||||
input {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Cancel & Remove Buttons
|
||||
[data-kt-image-input-action="cancel"],
|
||||
[data-kt-image-input-action="remove"] {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
[data-kt-image-input-action="cancel"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Input Changed State
|
||||
&.image-input-changed {
|
||||
[data-kt-image-input-action="cancel"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-kt-image-input-action="remove"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Input Empty State
|
||||
&.image-input-empty {
|
||||
[data-kt-image-input-action="remove"],
|
||||
[data-kt-image-input-action="cancel"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Circle style
|
||||
&.image-input-circle {
|
||||
border-radius: 50%;
|
||||
|
||||
// Wrapper
|
||||
.image-input-wrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Change Control
|
||||
[data-kt-image-input-action="change"] {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
transform: translate(-100%, 0%);
|
||||
}
|
||||
|
||||
// Cancel & Remove Buttons
|
||||
[data-kt-image-input-action="cancel"],
|
||||
[data-kt-image-input-action="remove"] {
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
transform: translate(-100%,-100%);
|
||||
}
|
||||
}
|
||||
|
||||
// Bordered style
|
||||
&.image-input-outline {
|
||||
.image-input-wrapper {
|
||||
border: 3px solid $body-bg;
|
||||
box-shadow: if(isDarkMode(), $box-shadow, $box-shadow-sm);
|
||||
}
|
||||
}
|
||||
}
|
17
resources/assets/core/sass/components/_indicator.scss
vendored
Normal file
17
resources/assets/core/sass/components/_indicator.scss
vendored
Normal file
|
@ -0,0 +1,17 @@
|
|||
//
|
||||
// Indicator
|
||||
//
|
||||
|
||||
.indicator-progress {
|
||||
display: none;
|
||||
|
||||
[data-kt-indicator="on"] > & {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-label {
|
||||
[data-kt-indicator="on"] > & {
|
||||
display: none;
|
||||
}
|
||||
}
|
7
resources/assets/core/sass/components/_menu.scss
vendored
Normal file
7
resources/assets/core/sass/components/_menu.scss
vendored
Normal file
|
@ -0,0 +1,7 @@
|
|||
//
|
||||
// Menu
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "menu/base";
|
||||
@import "menu/theme";
|
15
resources/assets/core/sass/components/_mixins.scss
vendored
Normal file
15
resources/assets/core/sass/components/_mixins.scss
vendored
Normal file
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Mixins
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "mixins/menu";
|
||||
@import "mixins/tooltip";
|
||||
@import "mixins/popover";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/ki";
|
||||
@import "mixins/symbol";
|
||||
@import "mixins/svg-icon";
|
||||
@import "mixins/svg-bg-icon";
|
||||
@import "mixins/scroll";
|
||||
@import "mixins/shape";
|
30
resources/assets/core/sass/components/_modal.scss
vendored
Normal file
30
resources/assets/core/sass/components/_modal.scss
vendored
Normal file
|
@ -0,0 +1,30 @@
|
|||
//
|
||||
// Modal
|
||||
//
|
||||
|
||||
// Base
|
||||
.modal {
|
||||
// Mobile header
|
||||
.modal-header {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@include border-top-radius($modal-content-border-radius);
|
||||
|
||||
// Headings
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile dialog
|
||||
.modal-dialog {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities
|
||||
.modal-rounded {
|
||||
@if $enable-rounded {
|
||||
border-radius: $modal-content-border-radius !important;
|
||||
}
|
||||
}
|
83
resources/assets/core/sass/components/_nav-pills-custom.scss
vendored
Normal file
83
resources/assets/core/sass/components/_nav-pills-custom.scss
vendored
Normal file
|
@ -0,0 +1,83 @@
|
|||
//
|
||||
// Custom Nav Pills
|
||||
//
|
||||
|
||||
.nav.nav-pills.nav-pills-custom {
|
||||
// States
|
||||
.show > .nav-link,
|
||||
.nav-link{
|
||||
border: 1px dashed $border-dashed-color;
|
||||
border-radius: 12px;
|
||||
|
||||
.nav-icon {
|
||||
img {
|
||||
width: 30px;
|
||||
transition: $transition-link;
|
||||
|
||||
&.default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: transparent;
|
||||
border: 1px solid $border-dashed-color;
|
||||
transition-duration: 1ms;
|
||||
position: relative;
|
||||
|
||||
.nav-text {
|
||||
color: $gray-800 !important;
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
.bullet-custom {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-custom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-pills-active-custom {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&:not(:active) {
|
||||
span:nth-child(1) {
|
||||
color: #B5B5C3;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #3F4254;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span:nth-child(1) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
span:nth-child(1) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
136
resources/assets/core/sass/components/_nav.scss
vendored
Normal file
136
resources/assets/core/sass/components/_nav.scss
vendored
Normal file
|
@ -0,0 +1,136 @@
|
|||
//
|
||||
// Nav
|
||||
//
|
||||
|
||||
// Line tabs
|
||||
.nav-line-tabs {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $border-color;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -1px;
|
||||
|
||||
// Base link
|
||||
.nav-link {
|
||||
color: $gray-500;
|
||||
border: 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: $transition-link;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
// First Item
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Last Item
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Hover States
|
||||
.nav-item .nav-link.active,
|
||||
.nav-item.show .nav-link,
|
||||
.nav-item .nav-link:hover:not(.disabled) {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $primary;
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
// 2x Line
|
||||
&.nav-line-tabs-2x {
|
||||
border-bottom-width: 2px;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -2px;
|
||||
|
||||
.nav-link {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Hover States
|
||||
.nav-item .nav-link.active,
|
||||
.nav-item.show .nav-link,
|
||||
.nav-item .nav-link:hover:not(.disabled) {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav Pills
|
||||
.nav-pills {
|
||||
.nav-item {
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch items
|
||||
.nav-stretch {
|
||||
align-items: stretch;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav group
|
||||
.nav-group {
|
||||
padding: 0.35rem;
|
||||
@include border-radius($border-radius);
|
||||
background-color: $gray-100;
|
||||
|
||||
// Outline nav group
|
||||
&.nav-group-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
// Fluid option
|
||||
&.nav-group-fluid {
|
||||
display: flex;
|
||||
|
||||
> label,
|
||||
> .btn {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
> label {
|
||||
margin-right: 0.1rem;
|
||||
|
||||
> .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
13
resources/assets/core/sass/components/_notice.scss
vendored
Normal file
13
resources/assets/core/sass/components/_notice.scss
vendored
Normal file
|
@ -0,0 +1,13 @@
|
|||
//
|
||||
// Notice
|
||||
//
|
||||
|
||||
.notice {
|
||||
@if (isDarkMode()) {
|
||||
@each $color, $value in $theme-colors {
|
||||
&.border-#{$color} {
|
||||
border-color: rgba($value, 0.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
39
resources/assets/core/sass/components/_overlay.scss
vendored
Normal file
39
resources/assets/core/sass/components/_overlay.scss
vendored
Normal file
|
@ -0,0 +1,39 @@
|
|||
//
|
||||
// Demo
|
||||
//
|
||||
|
||||
|
||||
.overlay {
|
||||
position: relative;
|
||||
|
||||
.overlay-wrapper {
|
||||
|
||||
}
|
||||
|
||||
.overlay-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: get($overlay, bg);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.overlay-show,
|
||||
&.overlay-block,
|
||||
&:hover {
|
||||
.overlay-layer {
|
||||
transition: all 0.3s ease;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay-block {
|
||||
cursor: wait;
|
||||
}
|
||||
}
|
26
resources/assets/core/sass/components/_page-loader.scss
vendored
Normal file
26
resources/assets/core/sass/components/_page-loader.scss
vendored
Normal file
|
@ -0,0 +1,26 @@
|
|||
//
|
||||
// Page loader
|
||||
//
|
||||
|
||||
// CSS3 Transitions only after page load(.page-loading class added to body tag and remove with JS on page load)
|
||||
.page-loading * {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
// Base
|
||||
.page-loader {
|
||||
background: $body-bg;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
|
||||
.page-loading & {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
178
resources/assets/core/sass/components/_pagination.scss
vendored
Normal file
178
resources/assets/core/sass/components/_pagination.scss
vendored
Normal file
|
@ -0,0 +1,178 @@
|
|||
//
|
||||
// Pagination
|
||||
//
|
||||
|
||||
.pagination {
|
||||
display:flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
|
||||
// Pagination circle
|
||||
&.pagination-circle {
|
||||
.page-link {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination outline
|
||||
&.pagination-outline {
|
||||
.page-link {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:hover,
|
||||
&.active {
|
||||
.page-link {
|
||||
border-color: $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
margin-right: $pagination-item-space;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $btn-border-radius;
|
||||
height: $pagination-item-height;
|
||||
min-width: $pagination-item-height;
|
||||
font-weight: $pagination-font-weight;
|
||||
font-size: $pagination-font-size;
|
||||
|
||||
i {
|
||||
font-size: $pagination-icon-font-size;
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.previous,
|
||||
.next {
|
||||
display: block;
|
||||
height: $pagination-icon-height;
|
||||
width: $pagination-icon-height;
|
||||
|
||||
/*rtl:raw:transform: rotateZ(-180deg);*/
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, $pagination-color);
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, $pagination-color);
|
||||
}
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
&.next,
|
||||
&.previous {
|
||||
.page-link {
|
||||
background-color: $pagination-item-bg;
|
||||
color: $pagination-color;
|
||||
|
||||
i {
|
||||
color: $pagination-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.page-link {
|
||||
color: $pagination-focus-color;
|
||||
|
||||
i {
|
||||
color: $pagination-focus-color;
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, $pagination-focus-color);
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, $pagination-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.offset) {
|
||||
.page-link {
|
||||
color: $pagination-hover-color;
|
||||
|
||||
i {
|
||||
color: $pagination-hover-color;
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, $pagination-hover-color);
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, $pagination-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
color: $pagination-active-color;
|
||||
|
||||
i {
|
||||
color: $pagination-active-color;
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, $pagination-active-color);
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, $pagination-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.page-link {
|
||||
color: $pagination-disabled-color;
|
||||
|
||||
i {
|
||||
color: $pagination-disabled-color;
|
||||
}
|
||||
|
||||
.previous {
|
||||
@include svg-bg-icon(arrow-start, $pagination-disabled-color);
|
||||
}
|
||||
|
||||
/*rtl:options:{"autoRename":false}*/
|
||||
.next {
|
||||
@include svg-bg-icon(arrow-end, $pagination-disabled-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*rtl:end:ignore*/
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
.page-item {
|
||||
margin-right: $pagination-item-space-tablet-and-mobile;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
37
resources/assets/core/sass/components/_popover.scss
vendored
Normal file
37
resources/assets/core/sass/components/_popover.scss
vendored
Normal file
|
@ -0,0 +1,37 @@
|
|||
//
|
||||
// Popover
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.popover {
|
||||
.popover-header {
|
||||
font-size: $popover-header-font-size;
|
||||
font-weight: $popover-header-font-weight;
|
||||
border-bottom: 1px solid $popover-header-border-color;
|
||||
}
|
||||
|
||||
.popover-dismiss {
|
||||
position: absolute;
|
||||
top: $popover-dissmis-btn-top;
|
||||
right: $popover-dissmis-btn-end;
|
||||
height: $popover-dissmis-btn-height;
|
||||
width: $popover-dissmis-btn-height;
|
||||
@include svg-bg-icon(close, $gray-500);
|
||||
background-size: 45%;
|
||||
|
||||
&:hover {
|
||||
@include svg-bg-icon(close, $primary);
|
||||
}
|
||||
|
||||
& + .popover-header {
|
||||
padding-right: $popover-body-padding-x + $popover-dissmis-btn-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Mode
|
||||
.popover-dark {
|
||||
@include popover-theme($gray-900, $gray-800, $gray-900, $gray-200, $gray-400, $gray-100, $gray-900);
|
||||
// $bg-color, $border-color, $header-bg-color, $header-color, $body-color, $arrow-outer-color, $arrow-color
|
||||
}
|
34
resources/assets/core/sass/components/_print.scss
vendored
Normal file
34
resources/assets/core/sass/components/_print.scss
vendored
Normal file
|
@ -0,0 +1,34 @@
|
|||
//
|
||||
// Print Mode
|
||||
//
|
||||
|
||||
// Add .print-content-only class to body element in order to allow printing only the content area
|
||||
@media print {
|
||||
.print-content-only {
|
||||
padding: 0 !important;
|
||||
background: none !important;
|
||||
|
||||
.wrapper,
|
||||
.page,
|
||||
.page-title
|
||||
.content,
|
||||
.container,
|
||||
.container-xxl,
|
||||
.container-fluid {
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.aside,
|
||||
.sidebar,
|
||||
.scrolltop,
|
||||
.header,
|
||||
.footer,
|
||||
.toolbar,
|
||||
.drawer,
|
||||
.btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
27
resources/assets/core/sass/components/_progress.scss
vendored
Normal file
27
resources/assets/core/sass/components/_progress.scss
vendored
Normal file
|
@ -0,0 +1,27 @@
|
|||
//
|
||||
// Progress
|
||||
//
|
||||
|
||||
// Vertical Position
|
||||
.progress-vertical {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
@include border-radius($border-radius);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 8px;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
}
|
39
resources/assets/core/sass/components/_pulse.scss
vendored
Normal file
39
resources/assets/core/sass/components/_pulse.scss
vendored
Normal file
|
@ -0,0 +1,39 @@
|
|||
//
|
||||
// Pulse
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.pulse {
|
||||
position: relative;
|
||||
|
||||
// Theme Colors
|
||||
@each $name, $color in $theme-colors {
|
||||
&.pulse-#{$name} {
|
||||
.pulse-ring {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-ring {
|
||||
display: block;
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
animation: animation-pulse 3.5s ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
opacity: 0;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: $gray-500;
|
||||
}
|
||||
|
||||
@keyframes animation-pulse {
|
||||
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
|
||||
60% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
|
||||
65% {opacity: 1;}
|
||||
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
|
||||
}
|
62
resources/assets/core/sass/components/_rating.scss
vendored
Normal file
62
resources/assets/core/sass/components/_rating.scss
vendored
Normal file
|
@ -0,0 +1,62 @@
|
|||
//
|
||||
// Rating
|
||||
//
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rating-input {
|
||||
position: absolute !important;
|
||||
left: -9999px !important;
|
||||
|
||||
&[disabled] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
line-height: 1;
|
||||
color: get($rating, color, default);
|
||||
}
|
||||
}
|
||||
|
||||
label.rating-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.rating-label.checked,
|
||||
label.rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: get($rating, color, active);
|
||||
}
|
||||
}
|
||||
|
||||
.rating-input:checked ~ .rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: get($rating, color, default);
|
||||
}
|
||||
}
|
||||
|
||||
.rating:hover label.rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: get($rating, color, active);
|
||||
}
|
||||
}
|
||||
|
||||
label.rating-label:hover ~ .rating-label {
|
||||
& > i,
|
||||
& > .svg-icon {
|
||||
color: get($rating, color, default);
|
||||
}
|
||||
color: get($rating, color, default);
|
||||
}
|
195
resources/assets/core/sass/components/_ribbon.scss
vendored
Normal file
195
resources/assets/core/sass/components/_ribbon.scss
vendored
Normal file
|
@ -0,0 +1,195 @@
|
|||
//
|
||||
// Ribbon
|
||||
//
|
||||
|
||||
// Base
|
||||
.ribbon {
|
||||
position: relative;
|
||||
|
||||
// Ribbon target
|
||||
.ribbon-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: $primary;
|
||||
box-shadow: 0px -1px 5px 0px rgba(#000, 0.1);
|
||||
color: theme-inverse-color("primary");
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateX(5px) translateY(-50%);
|
||||
|
||||
> .ribbon-inner {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: darken($primary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical aligment
|
||||
&-vertical {
|
||||
.ribbon-label {
|
||||
padding: 5px 10px;
|
||||
min-width: 36px;
|
||||
min-height: 46px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-top {
|
||||
.ribbon-label {
|
||||
top: 0;
|
||||
transform: translateX(-15px) translateY(-4px);
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-bottom {
|
||||
.ribbon-label {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-start {
|
||||
.ribbon-label {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
transform: translateX(-5px) translateY(-50%);
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-end {
|
||||
.ribbon-label {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clip style
|
||||
.ribbon.ribbon-clip {
|
||||
&.ribbon-start {
|
||||
.ribbon-label {
|
||||
left: -5px;
|
||||
|
||||
.ribbon-inner {
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color: transparent !important;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-width: 0 10px 10px 0;
|
||||
border-right-color: if(isDarkMode(), $light, $dark) !important;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-end {
|
||||
.ribbon-label {
|
||||
right: -5px;
|
||||
|
||||
.ribbon-inner {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-color: transparent !important;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-width: 0 0 10px 10px;
|
||||
border-left-color: if(isDarkMode(), $light, $dark) !important;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Triangle style
|
||||
.ribbon.ribbon-triangle {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
// Top start position
|
||||
&.ribbon-top-start {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem transparent !important;
|
||||
border-left: solid 2rem red;
|
||||
border-right: solid 2rem transparent !important;
|
||||
border-top: solid 2rem red;
|
||||
}
|
||||
|
||||
// Top end position
|
||||
&.ribbon-top-end {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem transparent !important;
|
||||
border-left: solid 2rem transparent !important;
|
||||
border-right: solid 2rem red;
|
||||
border-top: solid 2rem red;
|
||||
}
|
||||
|
||||
// Botton start position
|
||||
&.ribbon-bottom-start {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem red;
|
||||
border-left: solid 2rem red;
|
||||
border-right: solid 2rem transparent !important;
|
||||
border-top: solid 2rem transparent !important;
|
||||
}
|
||||
|
||||
// Botton end position
|
||||
&.ribbon-bottom-end {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-bottom: solid 2rem red;
|
||||
border-right: solid 2rem red;
|
||||
border-left: solid 2rem transparent !important;
|
||||
border-top: solid 2rem transparent !important;
|
||||
}
|
||||
}
|
||||
|
27
resources/assets/core/sass/components/_root.scss
vendored
Normal file
27
resources/assets/core/sass/components/_root.scss
vendored
Normal file
|
@ -0,0 +1,27 @@
|
|||
//
|
||||
// Root CSS Variables
|
||||
//
|
||||
|
||||
:root {
|
||||
// Theme colors
|
||||
@each $name, $value in $theme-colors {
|
||||
@if ( theme-light-color($name) ) {
|
||||
--#{$variable-prefix}light-#{$name}:#{theme-light-color($name)};
|
||||
--#{$variable-prefix}active-#{$name}:#{theme-active-color($name)};
|
||||
}
|
||||
}
|
||||
|
||||
// Gray colors
|
||||
@each $name, $value in $grays {
|
||||
--#{$variable-prefix}gray-#{$name}:#{$value};
|
||||
}
|
||||
|
||||
// Breakpoints
|
||||
@each $breakpoint, $value in $grid-breakpoints {
|
||||
--#{$variable-prefix}#{$breakpoint}:#{$value};
|
||||
}
|
||||
|
||||
// Border
|
||||
--#{$variable-prefix}border-color:#{$border-color};
|
||||
--#{$variable-prefix}border-dashed-color:#{$border-dashed-color};
|
||||
}
|
45
resources/assets/core/sass/components/_rotate.scss
vendored
Normal file
45
resources/assets/core/sass/components/_rotate.scss
vendored
Normal file
|
@ -0,0 +1,45 @@
|
|||
//
|
||||
// Rotate
|
||||
//
|
||||
|
||||
|
||||
$rotate-transition: transform 0.3s ease;
|
||||
|
||||
.rotate {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@each $value in (90, 180, 270) {
|
||||
.rotate-#{$value} {
|
||||
transition: $rotate-transition;
|
||||
backface-visibility: hidden;
|
||||
|
||||
.collapsible:not(.collapsed)> & ,
|
||||
.show > &,
|
||||
.active > & {
|
||||
transform: rotateZ(#{$value}deg);
|
||||
transition: $rotate-transition;
|
||||
|
||||
[direction="rtl"] & {
|
||||
transform: rotateZ(-#{$value}deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rotate-n#{$value} {
|
||||
transition: $rotate-transition;
|
||||
backface-visibility: hidden;
|
||||
|
||||
.collapsible:not(.collapsed)> &,
|
||||
.show > &,
|
||||
.active > & {
|
||||
transform: rotateZ(-#{$value}deg);
|
||||
transition: $rotate-transition;
|
||||
|
||||
[direction="rtl"] & {
|
||||
transform: rotateZ(#{$value}deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
203
resources/assets/core/sass/components/_scroll.scss
vendored
Normal file
203
resources/assets/core/sass/components/_scroll.scss
vendored
Normal file
|
@ -0,0 +1,203 @@
|
|||
//
|
||||
// Scroll
|
||||
//
|
||||
|
||||
|
||||
// Customize native scrollbars only for desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
main,
|
||||
span,
|
||||
ol,
|
||||
ul,
|
||||
pre,
|
||||
div {
|
||||
// Firefox
|
||||
scrollbar-width: thin;
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar {
|
||||
width: get($scrollbar, width);
|
||||
height: get($scrollbar, height);
|
||||
}
|
||||
|
||||
// Default color
|
||||
@include scrollbar-color(get($scrollbar, color), get($scrollbar, hover-color));
|
||||
}
|
||||
}
|
||||
|
||||
// Overflow scroll
|
||||
.scroll {
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-x {
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-y {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow scroll
|
||||
.hover-scroll {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow: hidden;
|
||||
|
||||
border-right: get($scrollbar, width) solid transparent;
|
||||
border-bottom: get($scrollbar, height) solid transparent;
|
||||
margin-right: -#{get($scrollbar, width)};
|
||||
margin-bottom: -#{get($scrollbar, height)};
|
||||
|
||||
&:hover {
|
||||
overflow: scroll;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow scroll y
|
||||
.hover-scroll-y {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-y: hidden;
|
||||
border-right: get($scrollbar, width) solid transparent;
|
||||
margin-right: -#{get($scrollbar, width)};
|
||||
|
||||
&:hover {
|
||||
overflow-y: scroll;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow scroll x
|
||||
.hover-scroll-x {
|
||||
position: relative;
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
overflow-x: hidden;
|
||||
border-bottom: get($scrollbar, height) solid transparent;
|
||||
|
||||
&:hover {
|
||||
overflow-x: scroll;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover overflow overlay
|
||||
.hover-scroll-overlay-y {
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
|
||||
--scrollbar-space: #{get($scrollbar, space)};
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar {
|
||||
width: calc(#{get($scrollbar, width)} + var(--scrollbar-space));
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-clip: content-box;
|
||||
border-right: var(--scrollbar-space) solid transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
// Firefox hack
|
||||
@-moz-document url-prefix() {
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
.scroll-ps {
|
||||
padding-left: get($scrollbar, width) !important;
|
||||
}
|
||||
|
||||
.scroll-ms {
|
||||
margin-left: get($scrollbar, width) !important;
|
||||
}
|
||||
|
||||
.scroll-pe {
|
||||
padding-right: get($scrollbar, width) !important;
|
||||
}
|
||||
|
||||
.scroll-me {
|
||||
margin-right: get($scrollbar, width) !important;
|
||||
}
|
||||
|
||||
.scroll-px {
|
||||
padding-left: get($scrollbar, width) !important;
|
||||
padding-right: get($scrollbar, width) !important;
|
||||
}
|
||||
|
||||
.scroll-mx {
|
||||
margin-left: get($scrollbar, width) !important;
|
||||
margin-right: get($scrollbar, width) !important;
|
||||
}
|
68
resources/assets/core/sass/components/_scrolltop.scss
vendored
Normal file
68
resources/assets/core/sass/components/_scrolltop.scss
vendored
Normal file
|
@ -0,0 +1,68 @@
|
|||
//
|
||||
// Scrolltop
|
||||
//
|
||||
|
||||
.scrolltop {
|
||||
position: fixed;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: get($scrolltop, size, desktop);
|
||||
height: get($scrolltop, size, desktop);
|
||||
bottom: get($scrolltop, bottom, desktop);
|
||||
right: get($scrolltop, right, desktop);
|
||||
background-color: get($scrolltop, bg-color, default);
|
||||
box-shadow: $box-shadow;
|
||||
opacity: get($scrolltop, opacity, default);
|
||||
transition: $transition-link;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
.svg-icon {
|
||||
@include svg-icon-size(24px);
|
||||
color: get($scrolltop, icon-color, default);
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 1.3rem;
|
||||
color: get($scrolltop, icon-color, default);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: get($scrolltop, bg-color, hover);
|
||||
|
||||
> i {
|
||||
color: get($scrolltop, icon-color, hover);
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: get($scrolltop, icon-color, hover);
|
||||
}
|
||||
}
|
||||
|
||||
[data-kt-scrolltop="on"] & {
|
||||
opacity: get($scrolltop, opacity, on);
|
||||
animation: animation-scrolltop .4s ease-out 1;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
transition: $transition-link;
|
||||
opacity: get($scrolltop, opacity, hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & Mobile Modess
|
||||
@include media-breakpoint-down(lg) {
|
||||
bottom: get($scrolltop, bottom, tablet-and-mobile);
|
||||
right: get($scrolltop, right, tablet-and-mobile);
|
||||
width: get($scrolltop, size, tablet-and-mobile);
|
||||
height: get($scrolltop, size, tablet-and-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes animation-scrolltop {
|
||||
from { margin-bottom: -15px; }
|
||||
to { margin-bottom: 0; }
|
||||
}
|
66
resources/assets/core/sass/components/_separator.scss
vendored
Normal file
66
resources/assets/core/sass/components/_separator.scss
vendored
Normal file
|
@ -0,0 +1,66 @@
|
|||
//
|
||||
// Separator
|
||||
//
|
||||
|
||||
.separator {
|
||||
display: block;
|
||||
height: 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&.separator-dotted {
|
||||
border-bottom-style: dotted;
|
||||
border-bottom-color: $border-dashed-color;
|
||||
}
|
||||
|
||||
&.separator-dashed {
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-color: $border-dashed-color;
|
||||
}
|
||||
|
||||
&.separator-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: " ";
|
||||
width: 50%;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&::before{
|
||||
margin-right: 1.25rem;
|
||||
}
|
||||
|
||||
&::after{
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
&.separator-dotted {
|
||||
&::before,
|
||||
&::after {
|
||||
border-bottom-style: dotted;
|
||||
border-bottom-color: $border-dashed-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator-dashed {
|
||||
&::before,
|
||||
&::after {
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-color: $border-dashed-color;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.border-#{$color}{
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
13
resources/assets/core/sass/components/_shape.scss
vendored
Normal file
13
resources/assets/core/sass/components/_shape.scss
vendored
Normal file
|
@ -0,0 +1,13 @@
|
|||
//
|
||||
// Shape
|
||||
//
|
||||
|
||||
.xehagon {
|
||||
//$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
|
||||
@include shape(6);
|
||||
}
|
||||
|
||||
.octagon {
|
||||
//$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
|
||||
@include shape(8);
|
||||
}
|
8
resources/assets/core/sass/components/_stepper.scss
vendored
Normal file
8
resources/assets/core/sass/components/_stepper.scss
vendored
Normal file
|
@ -0,0 +1,8 @@
|
|||
//
|
||||
// Stepper
|
||||
//
|
||||
|
||||
// Import Dependencies
|
||||
@import "stepper/base";
|
||||
@import "stepper/pills";
|
||||
@import "stepper/links";
|
30
resources/assets/core/sass/components/_svg-icon.scss
vendored
Normal file
30
resources/assets/core/sass/components/_svg-icon.scss
vendored
Normal file
|
@ -0,0 +1,30 @@
|
|||
//
|
||||
// SVG Icon
|
||||
//
|
||||
|
||||
.svg-icon {
|
||||
line-height: 1;
|
||||
color: $text-muted;
|
||||
@include svg-icon-size(get($font-sizes, 5));
|
||||
|
||||
// Theme colors
|
||||
@each $name, $color in $theme-text-colors {
|
||||
&.svg-icon-#{$name} {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive icon sizes
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Sizes
|
||||
@each $name, $value in $font-sizes {
|
||||
&.svg-icon#{$infix}-#{$name} {
|
||||
@include svg-icon-size($value, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
105
resources/assets/core/sass/components/_symbol.scss
vendored
Normal file
105
resources/assets/core/sass/components/_symbol.scss
vendored
Normal file
|
@ -0,0 +1,105 @@
|
|||
//
|
||||
// symbol
|
||||
//
|
||||
|
||||
// Base
|
||||
.symbol {
|
||||
display: inline-block;;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Label
|
||||
.symbol-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
color: $gray-800;
|
||||
background-color: $gray-100;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Badge
|
||||
.symbol-badge {
|
||||
position: absolute;
|
||||
border: 2px solid $body-bg;
|
||||
border-radius: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) !important;
|
||||
}
|
||||
|
||||
// Image
|
||||
> img {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
// Square
|
||||
&.symbol-square {
|
||||
&,
|
||||
> img,
|
||||
.symbol-label {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Circle
|
||||
&.symbol-circle {
|
||||
&,
|
||||
> img,
|
||||
.symbol-label {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@include symbol-size(get($symbol-sizes, default));
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $name, $value in $symbol-sizes {
|
||||
@if ($name != 'default') {
|
||||
&.symbol#{$infix}-#{$name} {
|
||||
@include symbol-size($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Group
|
||||
.symbol-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.symbol {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
margin-left: -10px;
|
||||
border: 2px solid $body-bg;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.symbol-hover {
|
||||
.symbol {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
227
resources/assets/core/sass/components/_tables.scss
vendored
Normal file
227
resources/assets/core/sass/components/_tables.scss
vendored
Normal file
|
@ -0,0 +1,227 @@
|
|||
//
|
||||
// Table
|
||||
//
|
||||
|
||||
// Table
|
||||
.table {
|
||||
// Fix for BS 5.1.2 update
|
||||
& > :not(:first-child) {
|
||||
border-color: transparent;
|
||||
border-width: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
>:not(:last-child)>:last-child>* {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
tr, th, td {
|
||||
border-color: inherit;
|
||||
border-width: inherit;
|
||||
border-style: inherit;
|
||||
text-transform: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
height: inherit;
|
||||
min-height: inherit;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot,
|
||||
tbody {
|
||||
tr:last-child {
|
||||
border-bottom: 0 !important;
|
||||
|
||||
th, td {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
th, td {
|
||||
border-top: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded
|
||||
&.table-rounded {
|
||||
border-radius: $border-radius;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
// Flush
|
||||
&.table-flush {
|
||||
tr, th, td {
|
||||
padding: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Row bordered
|
||||
&.table-row-bordered {
|
||||
tr {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
th, td {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Row dashed
|
||||
&.table-row-dashed {
|
||||
tr {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
th, td {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Row border colors
|
||||
@each $color, $value in $grays {
|
||||
&.table-row-gray-#{$color} {
|
||||
tr {
|
||||
border-bottom-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sorting
|
||||
.table-sort {
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sort,
|
||||
.table-sort-asc,
|
||||
.table-sort-desc {
|
||||
vertical-align: middle;
|
||||
|
||||
&:after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
content: " ";
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
left: auto;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sort-asc {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
@include svg-bg-icon(arrow-top, $text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.table-sort-desc {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
@include svg-bg-icon(arrow-bottom, $text-muted);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
.table-loading-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include border-radius($border-radius);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
background-color: $tooltip-bg;
|
||||
color: if(isDarkMode(), $gray-700, $gray-600);
|
||||
font-weight: $font-weight-bold;
|
||||
margin: 0 !important;
|
||||
width: auto;
|
||||
padding: 1rem 2rem !important;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.table-loading {
|
||||
position: relative;
|
||||
|
||||
.table-loading-message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Cell gutters
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $name, $value in $gutters {
|
||||
.table.g#{$infix}-#{$name} {
|
||||
th, td {
|
||||
padding: $value;
|
||||
|
||||
// Datatables responsive mode fix
|
||||
&.dtr-control {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table.gy#{$infix}-#{$name} {
|
||||
th, td {
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.table.gx#{$infix}-#{$name} {
|
||||
th, td {
|
||||
padding-left: $value;
|
||||
padding-right: $value;
|
||||
|
||||
// Datatables responsive mode fix
|
||||
&.dtr-control {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table.gs#{$infix}-#{$name} {
|
||||
th, td {
|
||||
&:first-child {
|
||||
padding-left: $value;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $value;
|
||||
}
|
||||
|
||||
// Datatables responsive mode fix
|
||||
&.dtr-control:first-child {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
68
resources/assets/core/sass/components/_timeline-label.scss
vendored
Normal file
68
resources/assets/core/sass/components/_timeline-label.scss
vendored
Normal file
|
@ -0,0 +1,68 @@
|
|||
//
|
||||
// Timeline Label
|
||||
//
|
||||
|
||||
|
||||
.timeline-label {
|
||||
position: relative;
|
||||
|
||||
$label-width: 50px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: $label-width + 1px;
|
||||
width: 3px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
|
||||
//
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
margin-bottom: 1.7rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
width: $label-width;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
flex-shrink: 0;
|
||||
background: $body-bg;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin-top: 1px;
|
||||
margin-left: -0.5rem;
|
||||
padding: 3px !important;
|
||||
border: 6px solid $body-bg !important;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
70
resources/assets/core/sass/components/_timeline.scss
vendored
Normal file
70
resources/assets/core/sass/components/_timeline.scss
vendored
Normal file
|
@ -0,0 +1,70 @@
|
|||
//
|
||||
// Timeline
|
||||
//
|
||||
|
||||
// Base
|
||||
.timeline {
|
||||
// Item
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&:last-child {
|
||||
.timeline-line {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Line
|
||||
.timeline-line {
|
||||
display: block;
|
||||
content: " ";
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
transform: translate(50%);
|
||||
border-left-width: 1px;
|
||||
border-left-style: dashed;
|
||||
border-left-color: $gray-300;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.timeline-icon {
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
// Content
|
||||
.timeline-content {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
// Vertical center
|
||||
&.timeline-center {
|
||||
.timeline-item {
|
||||
align-items: center;
|
||||
|
||||
&:first-child {
|
||||
.timeline-line {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.timeline-line {
|
||||
bottom: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
3
resources/assets/core/sass/components/_toasts.scss
vendored
Normal file
3
resources/assets/core/sass/components/_toasts.scss
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
//
|
||||
// Toast
|
||||
//
|
19
resources/assets/core/sass/components/_toggle.scss
vendored
Normal file
19
resources/assets/core/sass/components/_toggle.scss
vendored
Normal file
|
@ -0,0 +1,19 @@
|
|||
//
|
||||
// Toggle
|
||||
//
|
||||
|
||||
.toggle {
|
||||
&.collapsible:not(.collapsed), // Integration with Bootstrap Collapse
|
||||
&.active {
|
||||
.toggle-off {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsible.collapsed, // Integration with Bootstrap Collapse
|
||||
&:not(.collapsible):not(.active) {
|
||||
.toggle-on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
23
resources/assets/core/sass/components/_tooltip.scss
vendored
Normal file
23
resources/assets/core/sass/components/_tooltip.scss
vendored
Normal file
|
@ -0,0 +1,23 @@
|
|||
//
|
||||
// Tooltip
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
.tooltip {
|
||||
.tooltip-inner {
|
||||
box-shadow: $tooltip-box-shadow;
|
||||
}
|
||||
|
||||
&.tooltop-auto-width {
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Theme
|
||||
&.tooltip-dark {
|
||||
@include tooltip-theme($dark, $dark-inverse, $dark);
|
||||
}
|
||||
}
|
125
resources/assets/core/sass/components/_utilities.scss
vendored
Normal file
125
resources/assets/core/sass/components/_utilities.scss
vendored
Normal file
|
@ -0,0 +1,125 @@
|
|||
//
|
||||
// Custom utilities
|
||||
//
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"position": (
|
||||
property: position,
|
||||
responsive: true,
|
||||
values: static relative absolute fixed sticky
|
||||
),
|
||||
"opacity": (
|
||||
property: opacity,
|
||||
class: opacity,
|
||||
values: $opacity-values
|
||||
),
|
||||
"opacity-hover": (
|
||||
property: opacity,
|
||||
state: hover,
|
||||
class: opacity,
|
||||
values: $opacity-values
|
||||
),
|
||||
"font-size": (
|
||||
rfs: true,
|
||||
responsive: true,
|
||||
property: font-size,
|
||||
class: fs,
|
||||
values: $font-sizes
|
||||
),
|
||||
"width": (
|
||||
responsive: true,
|
||||
property: width,
|
||||
class: w,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"max-width": (
|
||||
responsive: true,
|
||||
property: max-width,
|
||||
class: mw,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"min-width": (
|
||||
responsive: true,
|
||||
property: min-width,
|
||||
class: min-w,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"height": (
|
||||
responsive: true,
|
||||
property: height,
|
||||
class: h,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"max-height": (
|
||||
responsive: true,
|
||||
property: max-height,
|
||||
class: mh,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"min-height": (
|
||||
responsive: true,
|
||||
property: min-height,
|
||||
class: min-h,
|
||||
values: $custom-sizes
|
||||
),
|
||||
"z-index": (
|
||||
property: z-index,
|
||||
class: z-index,
|
||||
values: $zindex-values
|
||||
),
|
||||
"border-top-width": (
|
||||
property: border-top-width,
|
||||
class: border-top,
|
||||
values: $border-widths
|
||||
),
|
||||
"border-bottom-width": (
|
||||
property: border-bottom-width,
|
||||
class: border-bottom,
|
||||
values: $border-widths
|
||||
),
|
||||
"border-right-width": (
|
||||
property: border-right-width,
|
||||
class: border-right,
|
||||
values: $border-widths
|
||||
),
|
||||
"border-left-width": (
|
||||
property: border-left-width,
|
||||
class: border-left,
|
||||
values: $border-widths
|
||||
),
|
||||
"line-height": (
|
||||
property: line-height,
|
||||
class: lh,
|
||||
values: (
|
||||
0: 0,
|
||||
1: 1,
|
||||
sm: $line-height-sm,
|
||||
base: $line-height-base,
|
||||
lg: $line-height-lg,
|
||||
xl: $line-height-xl,
|
||||
xxl: $line-height-xxl
|
||||
)
|
||||
),
|
||||
"letter-spacing": (
|
||||
property: letter-spacing,
|
||||
class: ls,
|
||||
values: $letter-spacing-values
|
||||
),
|
||||
"rounded": (
|
||||
property: border-radius,
|
||||
class: rounded,
|
||||
values: (
|
||||
null: $border-radius,
|
||||
0: 0,
|
||||
1: $border-radius-sm,
|
||||
2: $border-radius,
|
||||
3: $border-radius-lg,
|
||||
4: $border-radius-xl,
|
||||
circle: 50%,
|
||||
pill: $border-radius-pill
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
1301
resources/assets/core/sass/components/_variables.scss
vendored
Normal file
1301
resources/assets/core/sass/components/_variables.scss
vendored
Normal file
File diff suppressed because it is too large
Load diff
165
resources/assets/core/sass/components/buttons/_base.scss
vendored
Normal file
165
resources/assets/core/sass/components/buttons/_base.scss
vendored
Normal file
|
@ -0,0 +1,165 @@
|
|||
//
|
||||
// Buttons Base
|
||||
//
|
||||
|
||||
// Button
|
||||
.btn {
|
||||
// Reset outline
|
||||
outline: none !important;
|
||||
|
||||
// Reset focus shadow
|
||||
&:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Remove border
|
||||
&:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
|
||||
border: 0;
|
||||
padding: calc(#{$btn-padding-y} + #{$btn-border-width}) calc(#{$btn-padding-x} + #{$btn-border-width});
|
||||
|
||||
&.btn-lg {
|
||||
padding: calc(#{$btn-padding-y-lg} + #{$btn-border-width}) calc(#{$btn-padding-x-lg} + #{$btn-border-width});
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
padding: calc(#{$btn-padding-y-sm} + #{$btn-border-width}) calc(#{$btn-padding-x-sm} + #{$btn-border-width});
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
&.btn-link {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
text-decoration: none;
|
||||
font-weight: $btn-font-weight;
|
||||
}
|
||||
|
||||
// Outline dashed
|
||||
&.btn-outline-dashed {
|
||||
border: 1px dashed $border-dashed-color;
|
||||
}
|
||||
|
||||
// Outline default
|
||||
&.btn-outline-default {
|
||||
border: 1px solid $input-border-color;
|
||||
}
|
||||
|
||||
// Flush
|
||||
&.btn-flush {
|
||||
@include button-reset();
|
||||
}
|
||||
|
||||
// Flex
|
||||
&.btn-flex {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Align start
|
||||
&.btn-trim-start {
|
||||
justify-content: flex-start !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
// Align start
|
||||
&.btn-trim-end {
|
||||
justify-content: flex-end !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Icons
|
||||
.btn {
|
||||
// Font icon
|
||||
i {
|
||||
display: inline-flex;
|
||||
font-size: $font-size-base;
|
||||
padding-right: 0.35rem;
|
||||
vertical-align: middle;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
// Svg icon
|
||||
.svg-icon {
|
||||
flex-shrink: 0;
|
||||
line-height: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
// Icon only button
|
||||
&.btn-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
height: $input-height;
|
||||
width: $input-height;
|
||||
|
||||
// Remove border
|
||||
&:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.btn-sm {
|
||||
height: $input-height-sm;
|
||||
width: $input-height-sm;
|
||||
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
height: $input-height-lg;
|
||||
width: $input-height-lg;
|
||||
}
|
||||
|
||||
&.btn-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
i,
|
||||
.svg-icon {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover effects
|
||||
.btn.btn-hover-rise {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-10%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-hover-scale {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-hover-rotate-end {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(4deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-hover-rotate-start {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-4deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
253
resources/assets/core/sass/components/buttons/_theme.scss
vendored
Normal file
253
resources/assets/core/sass/components/buttons/_theme.scss
vendored
Normal file
|
@ -0,0 +1,253 @@
|
|||
//
|
||||
// Buttons Theme
|
||||
//
|
||||
|
||||
// Theme colors
|
||||
@each $name, $value in $theme-colors {
|
||||
// Base
|
||||
.btn.btn-#{$name} {
|
||||
$color: theme-inverse-color($name);
|
||||
$icon-color: theme-inverse-color($name);
|
||||
$border-color: $value;
|
||||
$bg-color: $value;
|
||||
|
||||
$color-active: theme-inverse-color($name);
|
||||
$icon-color-active: theme-inverse-color($name);
|
||||
$border-color-active: theme-active-color($name);
|
||||
$bg-color-active: theme-active-color($name);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Light
|
||||
@if (theme-light-color($name)) {
|
||||
.btn.btn-light-#{$name} {
|
||||
$color: $value;
|
||||
$icon-color: $value;
|
||||
$border-color: theme-light-color($name);
|
||||
$bg-color: theme-light-color($name);
|
||||
|
||||
$color-active: theme-inverse-color($name);
|
||||
$icon-color-active: theme-inverse-color($name);
|
||||
$border-color-active: $value;
|
||||
$bg-color-active: $value;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
@if ( $btn-extended-variants == true or $name == primary or $name == light ) {
|
||||
.btn.btn-bg-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: $value;
|
||||
$bg-color: $value;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
.btn.btn-active-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;
|
||||
|
||||
$color-active: theme-inverse-color($name);
|
||||
$icon-color-active: theme-inverse-color($name);
|
||||
$border-color-active: $value;
|
||||
$bg-color-active: $value;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
@if (theme-light-color($name)) {
|
||||
.btn.btn-active-light-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;
|
||||
|
||||
$color-active: $value;
|
||||
$icon-color-active: $value;
|
||||
$border-color-active: theme-light-color($name);
|
||||
$bg-color-active: theme-light-color($name);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
|
||||
// Don't change the border color for outline style
|
||||
&.btn-outline:not(.btn-outline-default) {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Theme text colors
|
||||
@each $name, $value in $theme-text-colors {
|
||||
@if ( $btn-extended-variants == true or $name == primary or $name == muted ) {
|
||||
// Text and icon colors
|
||||
.btn.btn-color-#{$name} {
|
||||
$color: $value;
|
||||
$icon-color: $value;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Text and icon colors active state
|
||||
.btn.btn-active-color-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;
|
||||
|
||||
$color-active: $value;
|
||||
$icon-color-active: $value;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Icon colors
|
||||
.btn.btn-icon-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: $value;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Icon colors active state
|
||||
.btn.btn-active-icon-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: $value;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Text colors
|
||||
.btn.btn-text-#{$name} {
|
||||
$color: $value;
|
||||
$icon-color: null;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Text colors active state
|
||||
.btn.btn-active-text-#{$name} {
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$bg-color: null;
|
||||
$border-color: null;
|
||||
|
||||
$color-active: $value;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: null;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Social colors
|
||||
@each $name, $value in $social-colors {
|
||||
// Base
|
||||
.btn.btn-#{$name} {
|
||||
$color: get($value, inverse);
|
||||
$icon-color: get($value, inverse);
|
||||
$border-color: get($value, base);
|
||||
$bg-color: get($value, base);
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: get($value, active);
|
||||
$bg-color-active: get($value, active);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Light
|
||||
.btn.btn-light-#{$name} {
|
||||
$color: get($value, base);
|
||||
$icon-color: get($value, base);
|
||||
$bg-color: get($value, light);
|
||||
$border-color: get($value, light);
|
||||
|
||||
$color-active: get($value, inverse);
|
||||
$icon-color-active: get($value, inverse);
|
||||
$bg-color-active: get($value, base);
|
||||
$border-color-active: get($value, base);
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline dashed basic style
|
||||
.btn.btn-outline.btn-outline-dashed {
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
|
||||
$color: null;
|
||||
$icon-color: null;
|
||||
$border-color: null;
|
||||
$bg-color: null;;
|
||||
|
||||
$color-active: null;
|
||||
$icon-color-active: null;
|
||||
$border-color-active: $primary;
|
||||
$bg-color-active: null;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
||||
|
||||
// Outline dashed default style
|
||||
.btn.btn-outline.btn-outline-dashed.btn-outline-default {
|
||||
border-width: 1px;
|
||||
border-style: dashed;
|
||||
|
||||
$color: $light-inverse;
|
||||
$icon-color: $light-inverse;
|
||||
$border-color: $gray-300;
|
||||
$bg-color: null;
|
||||
|
||||
$color-active: $primary;
|
||||
$icon-color-active: $primary;
|
||||
$border-color-active: $primary;
|
||||
$bg-color-active: $primary-light;
|
||||
|
||||
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
|
||||
}
|
94
resources/assets/core/sass/components/components.scss
vendored
Normal file
94
resources/assets/core/sass/components/components.scss
vendored
Normal file
|
@ -0,0 +1,94 @@
|
|||
//
|
||||
// Components
|
||||
//
|
||||
|
||||
// Bootstrap components
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/containers";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/accordion";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/toasts";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/spinners";
|
||||
|
||||
// Bootstrap helpers
|
||||
@import "~bootstrap/scss/helpers";
|
||||
|
||||
// Bootstrap utilities
|
||||
@import "utilities";
|
||||
@import "~bootstrap/scss/utilities/api";
|
||||
|
||||
// Custom components
|
||||
@import "root";
|
||||
@import "helpers";
|
||||
@import "animation";
|
||||
@import "nav";
|
||||
@import "nav-pills-custom";
|
||||
@import "pagination";
|
||||
@import "separator";
|
||||
@import "carousel";
|
||||
@import "menu";
|
||||
@import "anchor";
|
||||
@import "card";
|
||||
@import "toasts";
|
||||
@import "breadcrumb";
|
||||
@import "buttons";
|
||||
@import "code";
|
||||
@import "forms";
|
||||
@import "modal";
|
||||
@import "progress";
|
||||
@import "tables";
|
||||
@import "popover";
|
||||
@import "tooltip";
|
||||
@import "accordion";
|
||||
@import "feedback";
|
||||
@import "image-input";
|
||||
@import "symbol";
|
||||
@import "pulse";
|
||||
@import "page-loader";
|
||||
@import "scrolltop";
|
||||
@import "svg-icon";
|
||||
@import "fixed";
|
||||
@import "timeline";
|
||||
@import "timeline-label";
|
||||
@import "overlay";
|
||||
@import "bullet";
|
||||
@import "drawer";
|
||||
@import "badge";
|
||||
@import "indicator";
|
||||
@import "rotate";
|
||||
@import "scroll";
|
||||
@import "rating";
|
||||
@import "stepper";
|
||||
@import "toggle";
|
||||
@import "shape";
|
||||
@import "ribbon";
|
||||
@import "blockui";
|
||||
@import "notice";
|
||||
@import "explore";
|
||||
@import "cookiealert";
|
||||
@import "print";
|
||||
@import "container";
|
||||
|
12
resources/assets/core/sass/components/forms/_floating-labels.scss
vendored
Normal file
12
resources/assets/core/sass/components/forms/_floating-labels.scss
vendored
Normal file
|
@ -0,0 +1,12 @@
|
|||
//
|
||||
// Floating label
|
||||
//
|
||||
|
||||
.form-floating {
|
||||
.form-control.form-control-solid {
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
134
resources/assets/core/sass/components/forms/_form-check.scss
vendored
Normal file
134
resources/assets/core/sass/components/forms/_form-check.scss
vendored
Normal file
|
@ -0,0 +1,134 @@
|
|||
//
|
||||
// Form Check
|
||||
//
|
||||
|
||||
.form-check {
|
||||
// Label
|
||||
.form-check-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Input
|
||||
.form-check-input {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
// Custom
|
||||
&.form-check-custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
.form-check-input {
|
||||
margin: 0;
|
||||
float: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
margin-left: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.form-switch) {
|
||||
.form-check-input {
|
||||
&[type="checkbox"] {
|
||||
background-size: $form-check-input-bg-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Solid
|
||||
&.form-check-solid {
|
||||
.form-check-input {
|
||||
border: 0;
|
||||
background-color: $form-check-input-bg-solid;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
filter: none;
|
||||
background-color: $form-check-input-bg-solid;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Success state
|
||||
&.form-check-success {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Danger state
|
||||
&.form-check-danger {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Warning state
|
||||
&.form-check-warning {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing
|
||||
.form-check.form-check-custom {
|
||||
&.form-check-sm {
|
||||
.form-check-input {
|
||||
height: $form-check-input-width-sm;
|
||||
width: $form-check-input-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-check-lg {
|
||||
.form-check-input {
|
||||
height: $form-check-input-width-lg;
|
||||
width: $form-check-input-width-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form switch
|
||||
.form-switch.form-check-solid {
|
||||
.form-check-input {
|
||||
height: $form-switch-height;
|
||||
background-image: escape-svg($form-switch-bg-image-solid);
|
||||
border-radius: $form-switch-border-radius;
|
||||
|
||||
&:checked {
|
||||
filter: none;
|
||||
background-image: escape-svg($form-switch-checked-bg-image);
|
||||
}
|
||||
}
|
||||
|
||||
&.form-switch-sm {
|
||||
.form-check-input {
|
||||
height: $form-switch-height-sm;
|
||||
width: $form-switch-width-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-switch-lg {
|
||||
.form-check-input {
|
||||
height: $form-switch-height-lg;
|
||||
width: $form-switch-width-lg;
|
||||
}
|
||||
}
|
||||
}
|
80
resources/assets/core/sass/components/forms/_form-control.scss
vendored
Normal file
80
resources/assets/core/sass/components/forms/_form-control.scss
vendored
Normal file
|
@ -0,0 +1,80 @@
|
|||
//
|
||||
// Form Control
|
||||
//
|
||||
|
||||
|
||||
// Form control
|
||||
.form-control {
|
||||
box-shadow: none !important;
|
||||
|
||||
// Dropdown shown state
|
||||
.dropdown.show > & {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
// Readonly state
|
||||
&[readonly] {
|
||||
background-color: $input-readonly-bg;
|
||||
}
|
||||
|
||||
// Solid style
|
||||
&.form-control-solid {
|
||||
background-color: $input-solid-bg;
|
||||
border-color: $input-solid-bg;
|
||||
@include placeholder($input-solid-placeholder-color);
|
||||
color: $input-solid-color;
|
||||
transition: $transition-input;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: $input-solid-bg-focus;
|
||||
border-color: $input-solid-bg-focus;
|
||||
color: $input-solid-color;
|
||||
transition: $transition-input;
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent style
|
||||
&.form-control-transparent {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Flush
|
||||
&.form-control-flush {
|
||||
@include input-reset();
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder colors
|
||||
.placeholder-gray-500 {
|
||||
@include placeholder($gray-500);
|
||||
}
|
||||
|
||||
.placeholder-white {
|
||||
@include placeholder($white);
|
||||
}
|
||||
|
||||
// Textarea reset resize
|
||||
.resize-none {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// Form control solid bg
|
||||
.form-control-solid-bg {
|
||||
background-color: $input-solid-bg;
|
||||
}
|
45
resources/assets/core/sass/components/forms/_form-select.scss
vendored
Normal file
45
resources/assets/core/sass/components/forms/_form-select.scss
vendored
Normal file
|
@ -0,0 +1,45 @@
|
|||
//
|
||||
// Form Select
|
||||
//
|
||||
|
||||
.form-select {
|
||||
box-shadow: none !important;
|
||||
|
||||
// Solid style
|
||||
&.form-select-solid {
|
||||
@include placeholder($input-solid-placeholder-color);
|
||||
background-color: $input-solid-bg;
|
||||
border-color: $input-solid-bg;
|
||||
color: $input-solid-color;
|
||||
transition: $transition-input;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: $input-solid-bg-focus;
|
||||
border-color: $input-solid-bg-focus !important;
|
||||
color: $input-solid-color;
|
||||
transition: $transition-input;
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent style
|
||||
&.form-select-transparent {
|
||||
@include placeholder($input-placeholder-color);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $input-color;
|
||||
|
||||
.dropdown.show > &,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: transparent;
|
||||
border-color: transparent !important;
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
}
|
36
resources/assets/core/sass/components/forms/_input-group.scss
vendored
Normal file
36
resources/assets/core/sass/components/forms/_input-group.scss
vendored
Normal file
|
@ -0,0 +1,36 @@
|
|||
//
|
||||
// Input Group
|
||||
//
|
||||
|
||||
// Form control
|
||||
.input-group {
|
||||
&.input-group-solid {
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
&.input-group-sm {
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
&.input-group-lg {
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: $input-solid-bg;
|
||||
border-color: $input-solid-bg;
|
||||
|
||||
& + .form-control {
|
||||
border-left-color: $input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: $input-solid-bg;
|
||||
border-color: $input-solid-bg;
|
||||
|
||||
& + .input-group-text {
|
||||
border-left-color: $input-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
14
resources/assets/core/sass/components/forms/_required.scss
vendored
Normal file
14
resources/assets/core/sass/components/forms/_required.scss
vendored
Normal file
|
@ -0,0 +1,14 @@
|
|||
//
|
||||
// Required Label
|
||||
//
|
||||
|
||||
.required {
|
||||
&:after {
|
||||
content: "*";
|
||||
position: relative;
|
||||
font-size: inherit;
|
||||
color: $danger;
|
||||
padding-left: 0.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
223
resources/assets/core/sass/components/helpers/_background.scss
vendored
Normal file
223
resources/assets/core/sass/components/helpers/_background.scss
vendored
Normal file
|
@ -0,0 +1,223 @@
|
|||
//
|
||||
// Custom background helpers
|
||||
//
|
||||
|
||||
// Background theme light colors
|
||||
@each $color, $value in $theme-colors {
|
||||
@if (theme-light-color($color)) {
|
||||
.bg-light-#{$color} {
|
||||
background-color: theme-light-color($color) !important;
|
||||
|
||||
&.hoverable:hover {
|
||||
background-color: darken(theme-light-color($color), 6%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-#{$color} {
|
||||
background-color: $value !important;
|
||||
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)} !important;
|
||||
|
||||
&.hoverable:hover {
|
||||
background-color: theme-active-color($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if (theme-light-color($color)) {
|
||||
.bg-hover-light-#{$color} {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: theme-light-color($color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-state-light-#{$color} {
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: theme-light-color($color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-hover-#{$color} {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)};
|
||||
background-color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-active-#{$color} {
|
||||
&.active {
|
||||
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)};
|
||||
background-color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-state-#{$color} {
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
--bg-color: #{red($value)}, #{green($value)}, #{blue($value)};
|
||||
background-color: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background gray colors
|
||||
@each $color, $value in $grays {
|
||||
.bg-gray-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@each $name, $value in $opacity-values {
|
||||
.bg-opacity-#{$name} {
|
||||
background-color: rgba(var(--bg-color), #{$value}) !important;
|
||||
}
|
||||
|
||||
.bg-hover-opacity-#{$name}:hover {
|
||||
background-color: rgba(var(--bg-color), #{$value}) !important;
|
||||
}
|
||||
|
||||
.bg-active-opacity-#{$name}.active {
|
||||
background-color: rgba(var(--bg-color), #{$value}) !important;
|
||||
}
|
||||
|
||||
.bg-state-opacity-#{$name} {
|
||||
.active,
|
||||
&:hover {
|
||||
background-color: rgba(var(--bg-color), #{$value}) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background black color
|
||||
.bg-black {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
// Background body color
|
||||
.bg-body {
|
||||
--bg-color: #{red($body-bg)}, #{green($body-bg)}, #{blue($body-bg)};
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
// Lighten bg states
|
||||
.bg-lighten {
|
||||
background-color: $lighten;
|
||||
}
|
||||
|
||||
.bg-hover-lighten {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $lighten;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-active-lighten {
|
||||
&.active {
|
||||
background-color: $lighten;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-state-lighten {
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: $lighten;
|
||||
}
|
||||
}
|
||||
|
||||
// Hoverable
|
||||
.hoverable {
|
||||
cursor: pointer;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Background image helpers
|
||||
// Background repeat
|
||||
.bgi-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// Background positions
|
||||
.bgi-position-y-top {
|
||||
background-position-y: top;
|
||||
}
|
||||
|
||||
.bgi-position-y-bottom {
|
||||
background-position-y: bottom;
|
||||
}
|
||||
|
||||
.bgi-position-y-center {
|
||||
background-position-y: center;
|
||||
}
|
||||
|
||||
.bgi-position-x-start {
|
||||
background-position-x: left;
|
||||
}
|
||||
|
||||
.bgi-position-x-end {
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
.bgi-position-x-center {
|
||||
background-position-x: center;
|
||||
}
|
||||
|
||||
.bgi-position-top {
|
||||
background-position: 0 top;
|
||||
}
|
||||
|
||||
.bgi-position-bottom {
|
||||
background-position: 0 bottom;
|
||||
}
|
||||
|
||||
.bgi-position-center {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
// Responsive helpers
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
// Background sizes
|
||||
.bgi-size#{$infix}-auto {
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
.bgi-size#{$infix}-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bgi-size#{$infix}-contain {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
// Background attachment
|
||||
.bgi-attachment#{$infix}-fixed {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.bgi-attachment#{$infix}-scroll {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
114
resources/assets/core/sass/components/helpers/_borders.scss
vendored
Normal file
114
resources/assets/core/sass/components/helpers/_borders.scss
vendored
Normal file
|
@ -0,0 +1,114 @@
|
|||
//
|
||||
// Border
|
||||
//
|
||||
|
||||
.border-active:not(.active):not(:active):not(:hover):not(:focus) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.border-hover:not(:hover):not(:focus):not(.active):not(:active) {
|
||||
cursor: pointer;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
// Gray border colors
|
||||
@each $color, $value in $grays {
|
||||
// Initial
|
||||
.border-gray-#{$color} {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover border colors
|
||||
@each $color, $value in $theme-colors {
|
||||
.border-hover-#{$color}:hover {
|
||||
border-color: $value !important;
|
||||
}
|
||||
|
||||
.border-active-#{$color}.active {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover transparent
|
||||
.border-hover-transparent:hover {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
// Dashed style
|
||||
.border-dashed {
|
||||
border-style: dashed !important;
|
||||
border-color: $border-dashed-color;
|
||||
}
|
||||
|
||||
.border-top-dashed {
|
||||
border-top-style: dashed !important;
|
||||
}
|
||||
|
||||
.border-bottom-dashed {
|
||||
border-bottom-style: dashed !important;
|
||||
}
|
||||
|
||||
.border-start-dashed {
|
||||
border-left-style: dashed !important;
|
||||
}
|
||||
|
||||
.border-end-dashed {
|
||||
border-right-style: dashed !important;
|
||||
}
|
||||
|
||||
// Dotted style
|
||||
.border-dotted {
|
||||
border-style: dotted !important;
|
||||
}
|
||||
|
||||
.border-top-dotted {
|
||||
border-top-style: dotted !important;
|
||||
}
|
||||
|
||||
.border-bottom-dotted {
|
||||
border-bottom-style: dotted !important;
|
||||
}
|
||||
|
||||
.border-start-dotted {
|
||||
border-left-style: dotted !important;
|
||||
}
|
||||
|
||||
.border-end-dotted {
|
||||
border-right-style: dotted !important;
|
||||
}
|
||||
|
||||
// Border transparent
|
||||
.border-transparent {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
// Border body
|
||||
.border-body {
|
||||
border-color: $body-bg !important;
|
||||
}
|
||||
|
||||
// Border radiuses
|
||||
.rounded-top-0 {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.rounded-bottom-0 {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.rounded-start-0 {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.rounded-end-0 {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
47
resources/assets/core/sass/components/helpers/_flex.scss
vendored
Normal file
47
resources/assets/core/sass/components/helpers/_flex.scss
vendored
Normal file
|
@ -0,0 +1,47 @@
|
|||
//
|
||||
// Flex Utilities
|
||||
//
|
||||
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.flex#{$infix}-root {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex#{$infix}-column-auto {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.flex#{$infix}-column-fluid {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.flex#{$infix}-row-auto {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.flex#{$infix}-row-fluid {
|
||||
flex: 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.flex#{$infix}-center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex#{$infix}-stack {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-equal {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
18
resources/assets/core/sass/components/helpers/_opacity.scss
vendored
Normal file
18
resources/assets/core/sass/components/helpers/_opacity.scss
vendored
Normal file
|
@ -0,0 +1,18 @@
|
|||
//
|
||||
// Opacity
|
||||
//
|
||||
|
||||
@each $name, $value in $opacity-values {
|
||||
// Active state
|
||||
.opacity-active-#{$name}.active {
|
||||
opacity: #{$value} !important;
|
||||
}
|
||||
|
||||
// Active and hover states
|
||||
.opacity-state-#{$name} {
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: #{$value} !important;
|
||||
}
|
||||
}
|
||||
}
|
7
resources/assets/core/sass/components/helpers/_shadow.scss
vendored
Normal file
7
resources/assets/core/sass/components/helpers/_shadow.scss
vendored
Normal file
|
@ -0,0 +1,7 @@
|
|||
//
|
||||
// Shadow
|
||||
//
|
||||
|
||||
.shadow-xs {
|
||||
box-shadow: $box-shadow-xs;
|
||||
}
|
161
resources/assets/core/sass/components/helpers/_text.scss
vendored
Normal file
161
resources/assets/core/sass/components/helpers/_text.scss
vendored
Normal file
|
@ -0,0 +1,161 @@
|
|||
//
|
||||
// Text
|
||||
//
|
||||
|
||||
// Text colors
|
||||
@each $name, $color in $theme-text-colors {
|
||||
// Base color
|
||||
.text-#{$name} {
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
// Inverse color
|
||||
@if (theme-inverse-color($name)) {
|
||||
.text-inverse-#{$name} {
|
||||
color: theme-inverse-color($name) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if (theme-light-color($name)) {
|
||||
// Light colors
|
||||
.text-light-#{$name} {
|
||||
color: theme-light-color($name) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
.text-hover-#{$name} {
|
||||
transition: $transition-link;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: $transition-link;
|
||||
color: $color !important;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hover inverse
|
||||
@if (theme-inverse-color($name)) {
|
||||
.text-hover-inverse-#{$name} {
|
||||
transition: $transition-link;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: $transition-link;
|
||||
color: theme-inverse-color($name) !important;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
color: theme-inverse-color($name) !important;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: theme-inverse-color($name) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active
|
||||
.text-active-#{$name} {
|
||||
transition: $transition-link;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transition: $transition-link;
|
||||
color: $color !important;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active inverse
|
||||
@if (theme-inverse-color($name)) {
|
||||
.text-active-inverse-#{$name} {
|
||||
transition: $transition-link;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
&.active {
|
||||
transition: $transition-link;
|
||||
color: theme-inverse-color($name) !important;
|
||||
|
||||
i {
|
||||
transition: $transition-link;
|
||||
color: theme-inverse-color($name) !important;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
color: theme-inverse-color($name) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text transparent
|
||||
.fw-boldest {
|
||||
font-weight: $font-weight-boldest !important;
|
||||
}
|
||||
|
||||
// Text transparent
|
||||
.text-transparent {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
// Cursor pointer
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Cursor default
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
// Cursor move
|
||||
.cursor-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
// Icons
|
||||
i {
|
||||
line-height: 1;
|
||||
font-size: 1rem;
|
||||
//color: $text-muted;
|
||||
}
|
||||
|
||||
// Link transition
|
||||
a {
|
||||
transition: $transition-link;
|
||||
|
||||
&:hover {
|
||||
transition:$transition-link;
|
||||
}
|
||||
}
|
8
resources/assets/core/sass/components/helpers/_transform.scss
vendored
Normal file
8
resources/assets/core/sass/components/helpers/_transform.scss
vendored
Normal file
|
@ -0,0 +1,8 @@
|
|||
//
|
||||
// Transform
|
||||
//
|
||||
|
||||
.transform-90 {
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right top;
|
||||
}
|
274
resources/assets/core/sass/components/menu/_base.scss
vendored
Normal file
274
resources/assets/core/sass/components/menu/_base.scss
vendored
Normal file
|
@ -0,0 +1,274 @@
|
|||
//
|
||||
// Menu Base
|
||||
//
|
||||
|
||||
// Menu group
|
||||
.menu-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Menu & wrapper
|
||||
.menu,
|
||||
.menu-wrapper {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Sub inner
|
||||
.menu-inner {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// Sub menu
|
||||
.menu-sub {
|
||||
display: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Menu item
|
||||
.menu-item {
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
// Menu Link
|
||||
.menu-link {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
flex: 0 0 100%;
|
||||
padding: get($menu, link, self, padding-y) get($menu, link, self, padding-x);
|
||||
transition: none;
|
||||
outline: none !important;
|
||||
|
||||
// Menu Icon
|
||||
.menu-icon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: get($menu, link, icon, width);
|
||||
margin-right: get($menu, link, icon, space);
|
||||
|
||||
.svg-icon {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Icon
|
||||
.menu-bullet {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: get($menu, link, bullet, width);
|
||||
margin-right: get($menu, link, bullet, space);
|
||||
}
|
||||
|
||||
// Menu Label
|
||||
.menu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
// Menu Label
|
||||
.menu-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: get($menu, link, badge, space);
|
||||
}
|
||||
|
||||
// Menu Arrow
|
||||
.menu-arrow {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-left: get($menu, link, arrow, space);
|
||||
width: get($menu, link, arrow, width);
|
||||
height: get($menu, link, arrow, height);
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
content: " ";
|
||||
@include svg-bg-icon(arrow-start, $text-muted);
|
||||
/*rtl:begin:remove*/
|
||||
@include svg-bg-icon(arrow-end, $text-muted);
|
||||
/*rtl:end:remove*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Content
|
||||
.menu-content {
|
||||
padding: get($menu, link, self, padding-y) get($menu, link, self, padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion arrows
|
||||
.menu-item {
|
||||
&.show {
|
||||
.menu-link {
|
||||
.menu-arrow:after {
|
||||
backface-visibility: hidden;
|
||||
transition: get($menu, accordion, arrow-transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Center alignment
|
||||
.menu-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@each $direction in (up, down) {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@if $infix and $direction == down {
|
||||
$infix: $infix + "-" + $direction;
|
||||
}
|
||||
|
||||
@include media-breakpoint-direction($direction, $breakpoint) {
|
||||
// Accordion arrow
|
||||
.menu-item.menu#{$infix}-accordion {
|
||||
&.showing:not(.menu-dropdown),
|
||||
&.show:not(.hiding):not(.menu-dropdown) {
|
||||
> .menu-link {
|
||||
.menu-arrow:after {
|
||||
@include menu-link-arrow-rotate(90deg, -90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sub dropdown
|
||||
.menu-sub#{$infix}-dropdown {
|
||||
display: none;
|
||||
border-radius: get($menu, dropdown, border-radius);
|
||||
background-color: get($menu, dropdown, background-color);
|
||||
box-shadow: get($menu, dropdown, box-shadow);
|
||||
z-index: get($menu, dropdown, z-index);
|
||||
|
||||
// Dropdown show
|
||||
.show.menu-dropdown > &,
|
||||
&.menu.show,
|
||||
&.show[data-popper-placement] {
|
||||
display: flex;
|
||||
|
||||
// Animation
|
||||
@if (get($menu, dropdown, animation) == true) {
|
||||
// Move up
|
||||
animation: menu-sub-dropdown-animation-fade-in #{get($menu, dropdown, animation-speed)} ease 1, menu-sub-dropdown-animation-move-up #{get($menu, dropdown, animation-speed)} ease 1;
|
||||
|
||||
// Move down
|
||||
&[data-popper-placement="top"],
|
||||
&[data-popper-placement="top-start"],
|
||||
&[data-popper-placement="top-end"] {
|
||||
animation: menu-sub-dropdown-animation-fade-in #{get($menu, dropdown, animation-speed)} ease 1, menu-sub-dropdown-animation-move-down #{get($menu, dropdown, animation-speed)} ease 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sub accordion
|
||||
.menu-sub#{$infix}-accordion {
|
||||
display: none;
|
||||
|
||||
.show:not(.menu-dropdown) > &,
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline
|
||||
.menu#{$infix}-inline {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Reset link left & right paddings of level 1 menu links
|
||||
.menu#{$infix}-fit {
|
||||
> .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu#{$infix}-column {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu#{$infix}-row {
|
||||
flex-direction: row;
|
||||
|
||||
> .menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .menu-link {
|
||||
.menu-arrow:after {
|
||||
@include menu-link-arrow-rotate(90deg, -90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Border radiuses
|
||||
.menu#{$infix}-rounded {
|
||||
.menu-link {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Border radiuses
|
||||
.menu#{$infix}-pill {
|
||||
.menu-link {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset border radiuses
|
||||
.menu#{$infix}-rounded-0 {
|
||||
.menu-link {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu indention
|
||||
@include menu-link-indention(get($menu, accordion, indention), get($menu, link, self, padding-x));
|
||||
|
||||
// Menu animations
|
||||
@keyframes menu-sub-dropdown-animation-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes menu-sub-dropdown-animation-move-up {
|
||||
from { margin-top: #{get($menu, dropdown, animation-move-offset)} }
|
||||
to { margin-top: 0 }
|
||||
}
|
||||
|
||||
@keyframes menu-sub-dropdown-animation-move-down {
|
||||
from { margin-bottom: #{get($menu, dropdown, animation-move-offset)} }
|
||||
to { margin-bottom: 0 }
|
||||
}
|
324
resources/assets/core/sass/components/menu/_theme.scss
vendored
Normal file
324
resources/assets/core/sass/components/menu/_theme.scss
vendored
Normal file
|
@ -0,0 +1,324 @@
|
|||
//
|
||||
// Menu Theme
|
||||
//
|
||||
|
||||
// Theme text colors
|
||||
@each $name, $color in $theme-text-colors {
|
||||
.menu-#{$name} {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-default-state( $color, $color, $color, $color, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-title-#{$name} {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-default-state( $color, null, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon-#{$name} {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-default-state( null, $color, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bullet-#{$name} {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-default-state( null, null, $color, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-arrow-#{$name} {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-default-state( null, null, null, $color, null );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default background states
|
||||
.menu-hover-bg {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( null, null, null, null, get($menu, link, self, bg-color, hover) );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-bg {
|
||||
.menu-item {
|
||||
@include menu-link-here-state( null, null, null, null, get($menu, link, self, bg-color, here) );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-show-bg {
|
||||
.menu-item {
|
||||
@include menu-link-show-state( null, null, null, null, get($menu, link, self, bg-color, show) );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-bg {
|
||||
.menu-item {
|
||||
@include menu-link-active-state( null, null, null, null, get($menu, link, self, bg-color, active) );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-bg {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( null, null, null, null, get($menu, link, self, bg-color, hover) );
|
||||
@include menu-link-here-state( null, null, null, null, get($menu, link, self, bg-color, here) );
|
||||
@include menu-link-show-state( null, null, null, null, get($menu, link, self, bg-color, show) );
|
||||
@include menu-link-active-state( null, null, null, null, get($menu, link, self, bg-color, active) );
|
||||
}
|
||||
}
|
||||
|
||||
// Primary background states
|
||||
.menu-hover-bg-primary {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-show-bg-primary {
|
||||
.menu-item {
|
||||
@include menu-link-show-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-bg-primary {
|
||||
.menu-item {
|
||||
@include menu-link-here-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-bg-primary {
|
||||
.menu-item {
|
||||
@include menu-link-active-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-bg-primary {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
@include menu-link-show-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
@include menu-link-here-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
@include menu-link-active-state( $primary-inverse, $primary-inverse, $primary-inverse, $primary-inverse, $primary );
|
||||
}
|
||||
}
|
||||
|
||||
// Light primary background states
|
||||
.menu-show-bg-light-primary {
|
||||
.menu-item {
|
||||
@include menu-link-show-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-bg-light-primary {
|
||||
.menu-item {
|
||||
@include menu-link-here-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-hover-bg-light-primary {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-bg-light-primary {
|
||||
.menu-item {
|
||||
@include menu-link-active-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-bg-light-primary {
|
||||
.menu-item {
|
||||
@include menu-link-show-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
@include menu-link-here-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
@include menu-link-hover-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
@include menu-link-active-state( $primary, $primary, $primary, $primary, $primary-light );
|
||||
}
|
||||
}
|
||||
|
||||
// Primary color states
|
||||
.menu-hover-primary {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( $primary, $primary, $primary, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-show-primary {
|
||||
.menu-item {
|
||||
@include menu-link-show-state( $primary, $primary, $primary, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-primary {
|
||||
.menu-item {
|
||||
@include menu-link-here-state( $primary, $primary, $primary, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-primary {
|
||||
.menu-item {
|
||||
@include menu-link-active-state( $primary, $primary, $primary, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-primary {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( $primary, $primary, $primary, $primary, null );
|
||||
@include menu-link-show-state( $primary, $primary, $primary, $primary, null );
|
||||
@include menu-link-here-state( $primary, $primary, $primary, $primary, null );
|
||||
@include menu-link-active-state( $primary, $primary, $primary, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
// Primary title color states
|
||||
.menu-hover-title-primary {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( $primary, null, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-title-primary {
|
||||
.menu-item {
|
||||
@include menu-link-here-state( $primary, null, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-show-title-primary {
|
||||
.menu-item {
|
||||
@include menu-link-show-state( $primary, null, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-title-primary {
|
||||
.menu-item {
|
||||
@include menu-link-active-state( $primary, null, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-title-primary {
|
||||
.menu-item {
|
||||
@include menu-link-hover-state( $primary, null, null, null, null );
|
||||
@include menu-link-show-state( $primary, null, null, null, null );
|
||||
@include menu-link-active-state( $primary, null, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
// Primary icon color states
|
||||
.menu-hover-icon-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-hover-state( null, $primary, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-icon-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-here-state( null, $primary, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-show-icon-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-show-state( null, $primary, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-icon-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-active-state( null, $primary, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-icon-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-hover-state( null, $primary, null, null, null );
|
||||
@include menu-link-show-state( null, $primary, null, null, null );
|
||||
@include menu-link-active-state( null, $primary, null, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
// Primary bullet color states
|
||||
.menu-hover-bullet-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-hover-state( null, null, $primary, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-show-bullet-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-show-state( null, null, $primary, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-bullet-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-here-state( null, null, $primary, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-bullet-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-active-state( null, null, $primary, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-bullet-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-hover-state( null, null, $primary, null, null );
|
||||
@include menu-link-show-state( null, null, $primary, null, null );
|
||||
@include menu-link-active-state( null, null, $primary, null, null );
|
||||
}
|
||||
}
|
||||
|
||||
// Primary arrow color states
|
||||
.menu-hover-arrow-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-hover-state( null, null, null, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-here-arrow-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-here-state( null, null, null, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-show-arrow-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-show-state( null, null, null, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-active-arrow-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-active-state( null, null, null, $primary, null );
|
||||
}
|
||||
}
|
||||
|
||||
.menu-state-arrow-primary {
|
||||
.menu-item {
|
||||
//$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
|
||||
@include menu-link-hover-state( null, null, null, $primary, null );
|
||||
@include menu-link-show-state( null, null, null, $primary, null );
|
||||
@include menu-link-active-state( null, null, null, $primary, null );
|
||||
}
|
||||
}
|
71
resources/assets/core/sass/components/mixins/_buttons.scss
vendored
Normal file
71
resources/assets/core/sass/components/mixins/_buttons.scss
vendored
Normal file
|
@ -0,0 +1,71 @@
|
|||
//
|
||||
// Button Mixins
|
||||
//
|
||||
|
||||
// Custom variant
|
||||
@mixin button-custom-variant(
|
||||
$color,
|
||||
$icon-color,
|
||||
$border-color,
|
||||
$bg-color,
|
||||
$color-active,
|
||||
$icon-color-active,
|
||||
$border-color-active,
|
||||
$bg-color-active
|
||||
) {
|
||||
|
||||
@if ( $color != null ) {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
@if ( $icon-color != null ) {
|
||||
i,
|
||||
.svg-icon {
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
&.dropdown-toggle:after {
|
||||
color: $icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
@if ( $border-color != null ) {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
@if ( $bg-color != null ) {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:focus:not(.btn-active),
|
||||
&:hover:not(.btn-active),
|
||||
&:active:not(.btn-active),
|
||||
&.active,
|
||||
&.show,
|
||||
.show > & {
|
||||
@if ( $color-active != null ) {
|
||||
color: $color-active;
|
||||
}
|
||||
|
||||
@if ( $icon-color-active != null ) {
|
||||
i,
|
||||
.svg-icon {
|
||||
color: $icon-color-active;
|
||||
}
|
||||
|
||||
&.dropdown-toggle:after {
|
||||
color: $icon-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
@if ( $border-color-active != null ) {
|
||||
border-color: $border-color-active;
|
||||
}
|
||||
|
||||
@if ( $bg-color-active != null ) {
|
||||
background-color: $bg-color-active !important;
|
||||
}
|
||||
}
|
||||
}
|
18
resources/assets/core/sass/components/mixins/_ki.scss
vendored
Normal file
18
resources/assets/core/sass/components/mixins/_ki.scss
vendored
Normal file
|
@ -0,0 +1,18 @@
|
|||
//
|
||||
// Keenthemes Icons
|
||||
//
|
||||
|
||||
@mixin ki($icon) {
|
||||
font-family: Ki;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-decoration: inherit;
|
||||
text-rendering: optimizeLegibility;
|
||||
text-transform: none;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
content: "#{$icon}";
|
||||
}
|
296
resources/assets/core/sass/components/mixins/_menu.scss
vendored
Normal file
296
resources/assets/core/sass/components/mixins/_menu.scss
vendored
Normal file
|
@ -0,0 +1,296 @@
|
|||
//
|
||||
// Label
|
||||
//
|
||||
|
||||
// Set arrow direction
|
||||
@mixin menu-link-arrow-rotate($angle, $angleRtl) {
|
||||
/*rtl:ignore*/
|
||||
transform: rotateZ($angle);
|
||||
transition: get($menu, accordion, arrow-transition);
|
||||
|
||||
[direction="rtl"] & {
|
||||
/*rtl:ignore*/
|
||||
transform: rotateZ($angleRtl);
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link padding x
|
||||
@mixin menu-link-padding-x($value) {
|
||||
// Menu item
|
||||
.menu-item {
|
||||
.menu-link,
|
||||
.menu-content {
|
||||
padding-left: $value;
|
||||
padding-right: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link padding y
|
||||
@mixin menu-link-padding-y($value) {
|
||||
// Menu item
|
||||
.menu-item {
|
||||
.menu-link,
|
||||
.menu-content {
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu indention
|
||||
@mixin menu-link-indention($value, $offset) {
|
||||
// Accordion mode
|
||||
.menu-sub:not([data-popper-placement]) {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: calc(#{1 * $value} + #{$offset});
|
||||
}
|
||||
|
||||
> .menu-sub:not([data-popper-placement]) {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: calc(#{2 * $value} + #{$offset});
|
||||
}
|
||||
|
||||
> .menu-sub:not([data-popper-placement]) {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: calc(#{3 * $value} + #{$offset});
|
||||
}
|
||||
|
||||
> .menu-sub:not([data-popper-placement]) {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: calc(#{4 * $value} + #{$offset});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-fit & {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: #{$value};
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> .menu-sub:not([data-popper-placement]) {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: calc(#{2 * $value});
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> .menu-sub:not([data-popper-placement]) {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: calc(#{3 * $value});
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> .menu-sub:not([data-popper-placement]) {
|
||||
> .menu-item,
|
||||
> .menu-inner > .menu-item {
|
||||
> .menu-content,
|
||||
> .menu-link {
|
||||
padding-left: calc(#{4 * $value});
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link theme
|
||||
@mixin menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null) {
|
||||
@if ( $bg-color != null ) {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
@if ( $title-color != null ) {
|
||||
color: $title-color;
|
||||
|
||||
.menu-title {
|
||||
color: $title-color;
|
||||
}
|
||||
}
|
||||
|
||||
@if ( $icon-color != null ) {
|
||||
.menu-icon {
|
||||
&,
|
||||
.svg-icon,
|
||||
i {
|
||||
color: $icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ( $bullet-color != null ) {
|
||||
.menu-bullet {
|
||||
.bullet {
|
||||
background-color: $bullet-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ( $arrow-color != null ) {
|
||||
// Arrow
|
||||
.menu-arrow:after {
|
||||
@include svg-bg-icon(arrow-start, $arrow-color);
|
||||
/*rtl:begin:remove*/
|
||||
@include svg-bg-icon(arrow-end, $arrow-color);
|
||||
/*rtl:end:remove*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link default state
|
||||
@mixin menu-link-default-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
|
||||
$sel: '';
|
||||
|
||||
@if ($all-links == false) {
|
||||
$sel: '& > ';
|
||||
}
|
||||
|
||||
#{$sel}.menu-link {
|
||||
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link hover state
|
||||
@mixin menu-link-hover-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
|
||||
$sel: '&:not(.here) ';
|
||||
|
||||
@if ($all-links == false) {
|
||||
$sel: '&:not(.here) > ';
|
||||
}
|
||||
|
||||
&.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
|
||||
#{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
|
||||
transition: $transition-link;
|
||||
|
||||
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link active state
|
||||
@mixin menu-link-active-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
|
||||
$sel: '';
|
||||
|
||||
@if ($all-links == false) {
|
||||
$sel: '& > ';
|
||||
}
|
||||
|
||||
#{$sel}.menu-link.active {
|
||||
transition: $transition-link;
|
||||
|
||||
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link show state
|
||||
@mixin menu-link-show-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
|
||||
//&.here > .menu-link,
|
||||
&.show > .menu-link {
|
||||
transition: $transition-link;
|
||||
|
||||
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link here state
|
||||
@mixin menu-link-here-state($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color: null, $all-links: true) {
|
||||
&.here > .menu-link {
|
||||
transition: $transition-link;
|
||||
|
||||
@include menu-link-theme($title-color, $icon-color, $bullet-color, $arrow-color, $bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link default
|
||||
@mixin menu-link-default($all-links: true) {
|
||||
$sel: '';
|
||||
|
||||
@if ($all-links == false) {
|
||||
$sel: '& > ';
|
||||
}
|
||||
|
||||
#{$sel}.menu-link {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link hover
|
||||
@mixin menu-link-hover($all-links: true) {
|
||||
$sel: '&:not(.here) ';
|
||||
|
||||
@if ($all-links == false) {
|
||||
$sel: '&:not(.here) > ';
|
||||
}
|
||||
|
||||
&.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
|
||||
#{$sel}.menu-link:hover:not(.disabled):not(.active):not(.here) {
|
||||
transition: $transition-link;
|
||||
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link active
|
||||
@mixin menu-link-active($all-links: true) {
|
||||
$sel: '';
|
||||
|
||||
@if ($all-links == false) {
|
||||
$sel: '& > ';
|
||||
}
|
||||
|
||||
#{$sel}.menu-link.active {
|
||||
transition: $transition-link;
|
||||
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link show
|
||||
@mixin menu-link-show($all-links: true) {
|
||||
//&.here > .menu-link,
|
||||
&.show > .menu-link {
|
||||
transition: $transition-link;
|
||||
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Set menu link here
|
||||
@mixin menu-link-here($all-links: true) {
|
||||
&.here > .menu-link {
|
||||
transition: $transition-link;
|
||||
|
||||
@content;
|
||||
}
|
||||
}
|
74
resources/assets/core/sass/components/mixins/_popover.scss
vendored
Normal file
74
resources/assets/core/sass/components/mixins/_popover.scss
vendored
Normal file
|
@ -0,0 +1,74 @@
|
|||
//
|
||||
// Popover Mixin
|
||||
//
|
||||
|
||||
@mixin popover-theme($bg-color, $border-color, $header-bg-color, $header-color, $body-color, $arrow-outer-color, $arrow-color) {
|
||||
background-color: $bg-color;
|
||||
border: 0;
|
||||
|
||||
// Header
|
||||
.popover-header {
|
||||
background-color: $header-bg-color;
|
||||
color: $header-color;
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
|
||||
// Body
|
||||
.popover-body {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
&.bs-popover-top {
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-top-color: $arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-top-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-end {
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-right-color: $arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-bottom {
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-bottom-color: $arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
// This will remove the popover-header's border just below the arrow
|
||||
.popover-header::before {
|
||||
border-bottom-color: $header-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-start {
|
||||
> .popover-arrow {
|
||||
&::before {
|
||||
border-left-color: $arrow-outer-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-left-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
26
resources/assets/core/sass/components/mixins/_scroll.scss
vendored
Normal file
26
resources/assets/core/sass/components/mixins/_scroll.scss
vendored
Normal file
|
@ -0,0 +1,26 @@
|
|||
//
|
||||
// Scroll mixins
|
||||
//
|
||||
|
||||
@mixin scrollbar-color($color, $hover-color: null) {
|
||||
// Firefox
|
||||
scrollbar-color: $color transparent;
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@if ($hover-color != null) {
|
||||
// Hover state
|
||||
&:hover {
|
||||
// Firefox
|
||||
scrollbar-color: $hover-color transparent;
|
||||
|
||||
// Webkit
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
29
resources/assets/core/sass/components/mixins/_shape.scss
vendored
Normal file
29
resources/assets/core/sass/components/mixins/_shape.scss
vendored
Normal file
|
@ -0,0 +1,29 @@
|
|||
|
||||
@use 'sass:math';
|
||||
|
||||
@mixin shape($edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20) {
|
||||
$central-angle: divide(360deg, $edges-number);
|
||||
$angle: ($edges-number - 2) * divide(180deg, $edges-number);
|
||||
$max-var-angle: 2 * (90deg - divide($angle, 2));
|
||||
$precision: 6;
|
||||
$unit-var-angle: divide($max-var-angle, $precision);
|
||||
$r-diff: $main-radius + $rounding-radius;
|
||||
|
||||
$points: ();
|
||||
|
||||
@for $i from 0 to $edges-number {
|
||||
$vertex-angle: $i * $central-angle + if($rotated, -90deg, 0deg);
|
||||
$vertex-x: 50% + $r-diff * math.cos($vertex-angle);
|
||||
$vertex-y: 50% + $r-diff * math.sin($vertex-angle);
|
||||
|
||||
@for $j from 0 through $precision {
|
||||
$curr-angle: $vertex-angle + ($j - 0.5 * $precision) * $unit-var-angle;
|
||||
$x: $vertex-x + $rounding-radius * math.cos($curr-angle);
|
||||
$y: $vertex-y + $rounding-radius * math.sin($curr-angle);
|
||||
|
||||
$points: $points, $x $y;
|
||||
}
|
||||
}
|
||||
|
||||
clip-path: polygon($points);
|
||||
}
|
54
resources/assets/core/sass/components/mixins/_svg-bg-icon.scss
vendored
Normal file
54
resources/assets/core/sass/components/mixins/_svg-bg-icon.scss
vendored
Normal file
|
@ -0,0 +1,54 @@
|
|||
//
|
||||
// SVG Bg Icons
|
||||
//
|
||||
|
||||
@mixin svg-bg-icon($type, $color, $update: false) {
|
||||
$bg-image: '';
|
||||
|
||||
// Icon type;
|
||||
@if ($type == close) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == check) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path fill='#{$color}' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == arrow-top) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.42111 2.06463C4.22088 1.96161 3.9637 1.9809 3.78597 2.12863L0.177181 5.12847C-0.046034 5.31402 -0.0602611 5.63049 0.145404 5.83532C0.351069 6.04015 0.698744 6.05578 0.921959 5.87023L4.14137 3.19406L7.06417 5.84414C7.27904 6.03896 7.62686 6.03835 7.84105 5.84278C8.05524 5.64721 8.05469 5.33073 7.83982 5.13591L4.54449 2.14806C4.50704 2.1141 4.46541 2.08629 4.42111 2.06463Z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == arrow-bottom) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.42111 5.93537C4.22088 6.03839 3.9637 6.0191 3.78597 5.87137L0.177181 2.87153C-0.046034 2.68598 -0.060261 2.36951 0.145404 2.16468C0.351069 1.95985 0.698744 1.94422 0.921959 2.12977L4.14137 4.80594L7.06417 2.15586C7.27904 1.96104 7.62686 1.96165 7.84105 2.15722C8.05524 2.35279 8.05469 2.66927 7.83982 2.86409L4.54449 5.85194C4.50704 5.8859 4.46541 5.91371 4.42111 5.93537Z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == arrow-start) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == arrow-end) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.93537 4.57889C6.03839 4.77912 6.0191 5.0363 5.87137 5.21403L2.87153 8.82282C2.68598 9.04603 2.36951 9.06026 2.16468 8.8546C1.95985 8.64893 1.94422 8.30126 2.12977 8.07804L4.80594 4.85863L2.15586 1.93583C1.96104 1.72096 1.96165 1.37314 2.15722 1.15895C2.35279 0.944757 2.66927 0.945311 2.86409 1.16018L5.85194 4.45551C5.8859 4.49296 5.91371 4.53459 5.93537 4.57889Z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == sort) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == sort-asc) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
|
||||
}
|
||||
|
||||
@if ($type == sort-desc) {
|
||||
$bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='#{$color}'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/></svg>");
|
||||
}
|
||||
|
||||
// Icon style
|
||||
@if $update == false {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
background-image: escape-svg($bg-image);
|
||||
}
|
||||
|
11
resources/assets/core/sass/components/mixins/_svg-icon.scss
vendored
Normal file
11
resources/assets/core/sass/components/mixins/_svg-icon.scss
vendored
Normal file
|
@ -0,0 +1,11 @@
|
|||
//
|
||||
// SVG Icon
|
||||
//
|
||||
|
||||
|
||||
@mixin svg-icon-size($size, $important: false) {
|
||||
svg {
|
||||
height: $size valueif($important, !important, null);
|
||||
width: $size valueif($important, !important, null);
|
||||
}
|
||||
}
|
42
resources/assets/core/sass/components/mixins/_symbol.scss
vendored
Normal file
42
resources/assets/core/sass/components/mixins/_symbol.scss
vendored
Normal file
|
@ -0,0 +1,42 @@
|
|||
//
|
||||
// Symbol
|
||||
//
|
||||
|
||||
@mixin symbol-size($size) {
|
||||
> img {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.symbol-label {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
&.symbol-fixed {
|
||||
.symbol-label {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
> img {
|
||||
width: $size;
|
||||
height: $size;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Ratios
|
||||
&.symbol-2by3 {
|
||||
.symbol-label {
|
||||
height: $size;
|
||||
width: $size * divide(3, 2);
|
||||
}
|
||||
|
||||
> img {
|
||||
height: $size;
|
||||
width: $size * divide(3, 2);
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
43
resources/assets/core/sass/components/mixins/_tooltip.scss
vendored
Normal file
43
resources/assets/core/sass/components/mixins/_tooltip.scss
vendored
Normal file
|
@ -0,0 +1,43 @@
|
|||
//
|
||||
// Tooltip Mixin
|
||||
//
|
||||
|
||||
@mixin tooltip-theme($bg-color, $color, $arrow-color) {
|
||||
.tooltip-inner {
|
||||
color: $color;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
&.bs-tooltip-top {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-top-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-tooltip-end {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-right-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-tooltip-bottom {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-bottom-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-tooltip-start {
|
||||
.tooltip-arrow {
|
||||
&::before {
|
||||
border-left-color: $arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
82
resources/assets/core/sass/components/stepper/_base.scss
vendored
Normal file
82
resources/assets/core/sass/components/stepper/_base.scss
vendored
Normal file
|
@ -0,0 +1,82 @@
|
|||
//
|
||||
// Stepper
|
||||
//
|
||||
|
||||
// Base
|
||||
.stepper {
|
||||
// Content
|
||||
[data-kt-stepper-element="info"],
|
||||
[data-kt-stepper-element="content"] {
|
||||
display: none;
|
||||
|
||||
&.current {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Enable cursor pointer on clickable steppers
|
||||
.stepper-item[data-kt-stepper-action="step"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// States
|
||||
& {
|
||||
[data-kt-stepper-action="previous"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="next"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="submit"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.first {
|
||||
[data-kt-stepper-action="previous"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="next"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="submit"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.between {
|
||||
[data-kt-stepper-action="previous"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="next"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="submit"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.last {
|
||||
[data-kt-stepper-action="previous"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="next"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="submit"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-kt-stepper-action="submit"].btn-flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
56
resources/assets/core/sass/components/stepper/_links.scss
vendored
Normal file
56
resources/assets/core/sass/components/stepper/_links.scss
vendored
Normal file
|
@ -0,0 +1,56 @@
|
|||
//
|
||||
// Stepper Links
|
||||
//
|
||||
|
||||
// Base
|
||||
.stepper.stepper-links {
|
||||
.stepper-nav {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.stepper-item {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin: 1rem 1.5rem;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 2.3rem;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
transition: $transition-link;
|
||||
}
|
||||
|
||||
.stepper-title {
|
||||
color: $dark;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
// Current
|
||||
&.current {
|
||||
transition: $transition-link;
|
||||
|
||||
.stepper-title {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.completed {
|
||||
.stepper-title {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
172
resources/assets/core/sass/components/stepper/_pills.scss
vendored
Normal file
172
resources/assets/core/sass/components/stepper/_pills.scss
vendored
Normal file
|
@ -0,0 +1,172 @@
|
|||
//
|
||||
// Stepper Pills
|
||||
//
|
||||
|
||||
// Base
|
||||
.stepper.stepper-pills {
|
||||
$pills-size: 40px;
|
||||
|
||||
// Nav
|
||||
.stepper-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Item
|
||||
.stepper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: $transition-link;
|
||||
|
||||
// Icon
|
||||
.stepper-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: $transition-link;
|
||||
width: $pills-size;
|
||||
height: $pills-size;
|
||||
border-radius: $border-radius;
|
||||
background-color: $primary-light;
|
||||
margin-right: 1.5rem;
|
||||
|
||||
.stepper-check {
|
||||
display: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stepper-number {
|
||||
font-weight: $font-weight-bolder;
|
||||
color: $primary !important;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
.stepper-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.stepper-title {
|
||||
color: $gray-800;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.stepper-desc {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Current
|
||||
&.current {
|
||||
transition: $transition-link;
|
||||
|
||||
.stepper-icon {
|
||||
transition: $transition-link;
|
||||
background-color: $primary;
|
||||
|
||||
.stepper-check {
|
||||
color: $primary;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stepper-number {
|
||||
color: $white !important;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-label {
|
||||
.stepper-title {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.stepper-desc {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Completed
|
||||
&.current:last-child,
|
||||
&.completed {
|
||||
.stepper-icon {
|
||||
transition: $transition-link;
|
||||
background-color: $primary-light;
|
||||
|
||||
.stepper-check {
|
||||
color: $primary !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.stepper-number {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stepper-label {
|
||||
.stepper-title {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.stepper-desc {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Column
|
||||
&.stepper-column {
|
||||
// Nav
|
||||
.stepper-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Item
|
||||
.stepper-item {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.stepper-icon {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Line
|
||||
.stepper-line {
|
||||
display: block;
|
||||
content: " ";
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
top:0;
|
||||
bottom: 0;
|
||||
width: $pills-size;
|
||||
transform: translate(50%);
|
||||
border-left-width: 1px;
|
||||
border-left-style: dashed;
|
||||
border-left-color: $gray-300;
|
||||
}
|
||||
|
||||
// First item
|
||||
.stepper-item:first-child {
|
||||
.stepper-line {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Last item
|
||||
.stepper-item:last-child {
|
||||
.stepper-line {
|
||||
bottom: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
48
resources/assets/core/sass/layout/_base.scss
vendored
Normal file
48
resources/assets/core/sass/layout/_base.scss
vendored
Normal file
|
@ -0,0 +1,48 @@
|
|||
html {
|
||||
font-family: sans-serif;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: $root-font-size !important;
|
||||
font-weight: $font-weight-base;
|
||||
font-family: $font-family-sans-serif;
|
||||
|
||||
// Tablet mode
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: $root-font-size-lg !important;
|
||||
}
|
||||
|
||||
// Mobile mode
|
||||
@include media-breakpoint-down(md) {
|
||||
font-size: $root-font-size-md !important;
|
||||
}
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
// Angular integration
|
||||
router-outlet {
|
||||
display: none;
|
||||
}
|
||||
|
||||
canvas {
|
||||
user-select: none;
|
||||
}
|
25
resources/assets/core/sass/layout/app/_container.scss
vendored
Normal file
25
resources/assets/core/sass/layout/app/_container.scss
vendored
Normal file
|
@ -0,0 +1,25 @@
|
|||
//
|
||||
// Container
|
||||
//
|
||||
|
||||
// General mode
|
||||
.app-container {
|
||||
|
||||
}
|
||||
|
||||
// Desktop mode
|
||||
@include media-breakpoint-up(lg) {
|
||||
.app-container {
|
||||
padding-left: $app-container-padding-x !important;
|
||||
padding-right: $app-container-padding-x !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & mobile modes
|
||||
@include media-breakpoint-down(lg) {
|
||||
.app-container {
|
||||
max-width: none;
|
||||
padding-left: $app-container-padding-x-mobile !important;
|
||||
padding-right: $app-container-padding-x-mobile !important;
|
||||
}
|
||||
}
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue