first commit
This commit is contained in:
101
resources/assets/vendor/scss/_bootstrap-extended/mixins/_alert.scss
vendored
Normal file
101
resources/assets/vendor/scss/_bootstrap-extended/mixins/_alert.scss
vendored
Normal file
@ -0,0 +1,101 @@
|
||||
// Alerts
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin alert-variant($background: null, $border: null, $color: null) {
|
||||
}
|
||||
|
||||
// Basic Alerts
|
||||
@mixin template-alert-variant($parent, $background) {
|
||||
$border: if(
|
||||
$dark-style,
|
||||
shift-color($background, -$alert-border-scale, $card-bg),
|
||||
shift-color($background, $alert-border-scale, $card-bg)
|
||||
);
|
||||
$color: $background;
|
||||
$background: if(
|
||||
$dark-style,
|
||||
shade-color($background, $alert-bg-scale, $card-bg),
|
||||
tint-color($background, $alert-bg-tint-scale, $card-bg)
|
||||
);
|
||||
|
||||
#{$parent} {
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
color: $color;
|
||||
.btn-close {
|
||||
background-image: str-replace(str-replace($btn-close-bg, '#{$btn-close-color}', $color), '#', '%23');
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent} {
|
||||
hr {
|
||||
color: $color !important;
|
||||
}
|
||||
.alert-icon {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Solid Alerts
|
||||
@mixin template-alert-solid-variant($parent, $background, $color: null) {
|
||||
$color: if($color, $color, color-contrast($background));
|
||||
|
||||
#{$parent} {
|
||||
@include gradient-bg($background);
|
||||
color: $color;
|
||||
|
||||
.btn-close {
|
||||
background-image: str-replace(str-replace($btn-close-bg, '#{$btn-close-color}', $color), '#', '%23');
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent} {
|
||||
hr {
|
||||
color: $color !important;
|
||||
}
|
||||
.alert-icon {
|
||||
color: $background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline Alerts
|
||||
@mixin template-alert-outline-variant($parent, $background, $color: null) {
|
||||
$color: $background;
|
||||
$icon-bg: if(
|
||||
$dark-style,
|
||||
shade-color($background, $alert-bg-scale, $card-bg),
|
||||
tint-color($background, $alert-bg-tint-scale, $card-bg)
|
||||
);
|
||||
|
||||
#{$parent} {
|
||||
border-color: $background;
|
||||
color: $color;
|
||||
.btn-close {
|
||||
background-image: str-replace(str-replace($btn-close-bg, '#{$btn-close-color}', $background), '#', '%23');
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent} {
|
||||
hr {
|
||||
color: $color !important;
|
||||
}
|
||||
.alert-icon {
|
||||
color: $color !important;
|
||||
background-color: $icon-bg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
resources/assets/vendor/scss/_bootstrap-extended/mixins/_badge.scss
vendored
Normal file
9
resources/assets/vendor/scss/_bootstrap-extended/mixins/_badge.scss
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
// Badges
|
||||
// *******************************************************************************
|
||||
|
||||
// Size
|
||||
@mixin badge-size($badge-height, $badge-width, $badge-font-size) {
|
||||
height: $badge-height;
|
||||
width: $badge-width;
|
||||
@include font-size($badge-font-size);
|
||||
}
|
||||
360
resources/assets/vendor/scss/_bootstrap-extended/mixins/_buttons.scss
vendored
Normal file
360
resources/assets/vendor/scss/_bootstrap-extended/mixins/_buttons.scss
vendored
Normal file
@ -0,0 +1,360 @@
|
||||
// Buttons
|
||||
// *******************************************************************************
|
||||
|
||||
// Basic
|
||||
@mixin button-variant(
|
||||
$background: null,
|
||||
$border: null,
|
||||
$hover-background: null,
|
||||
$hover-border: null,
|
||||
$active-background: null,
|
||||
$active-border: null
|
||||
) {
|
||||
}
|
||||
@mixin template-button-variant($parent, $background, $color: null, $border: null) {
|
||||
$background: $background;
|
||||
$border: $background;
|
||||
$color: if($color, $color, color-contrast($background));
|
||||
$hover-background: if(
|
||||
$color == $color-contrast-light,
|
||||
shade-color($background, $btn-hover-bg-shade-amount),
|
||||
tint-color($background, $btn-hover-bg-tint-amount)
|
||||
);
|
||||
$hover-border: if(
|
||||
$color == $color-contrast-light,
|
||||
shade-color($border, $btn-hover-border-shade-amount),
|
||||
tint-color($border, $btn-hover-border-tint-amount)
|
||||
);
|
||||
$hover-color: color-contrast($hover-background);
|
||||
|
||||
$active-background: if(
|
||||
$color == $color-contrast-light,
|
||||
shade-color($background, $btn-active-bg-shade-amount),
|
||||
tint-color($background, $btn-active-bg-tint-amount)
|
||||
);
|
||||
$active-border: if(
|
||||
$color == $color-contrast-light,
|
||||
shade-color($border, $btn-active-border-shade-amount),
|
||||
tint-color($border, $btn-active-border-tint-amount)
|
||||
);
|
||||
$active-color: color-contrast($active-background);
|
||||
|
||||
#{$parent} {
|
||||
color: $color;
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
&.btn[class*='btn-']:not([class*='btn-label-']):not([class*='btn-outline-']):not([class*='btn-text-']):not(
|
||||
.btn-icon
|
||||
):not(:disabled):not(.disabled) {
|
||||
box-shadow: 0 0.125rem 0.375rem 0 rgba($background, 0.3);
|
||||
}
|
||||
&:hover {
|
||||
color: $hover-color !important;
|
||||
@include gradient-bg($hover-background !important);
|
||||
border-color: $hover-border !important;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $hover-color;
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
&.show.dropdown-toggle,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $active-color !important;
|
||||
background-color: $active-background !important;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none !important, null);
|
||||
border-color: $active-border !important;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color !important;
|
||||
background-color: $background !important;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none !important, null);
|
||||
border-color: $border !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Button groups
|
||||
.btn-group #{$parent},
|
||||
.input-group #{$parent} {
|
||||
border-right: $input-btn-border-width solid $active-background;
|
||||
border-left: $input-btn-border-width solid $active-background;
|
||||
}
|
||||
.btn-group-vertical #{$parent} {
|
||||
border-top-color: $active-background;
|
||||
border-bottom-color: $active-background;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-button-text-variant($parent, $background, $color: null, $border: null) {
|
||||
$border: transparent;
|
||||
$label-color: if($color, $color, $background);
|
||||
$hover-color: $background;
|
||||
$hover-background: $background;
|
||||
$hover-background: if(
|
||||
$hover-color == $color-contrast-light,
|
||||
shade-color($background, $btn-text-hover-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-text-hover-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
$focus-background: if(
|
||||
$hover-color == $color-contrast-light,
|
||||
shade-color($background, $btn-text-focus-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-text-focus-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
$active-color: $hover-color;
|
||||
$active-background: if(
|
||||
$active-color == $color-contrast-light,
|
||||
shade-color($background, $btn-text-active-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-text-active-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
#{$parent} {
|
||||
color: $label-color;
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($background, 0.2) 0,
|
||||
rgba($background, 0.3) 40%,
|
||||
rgba($background, 0.4) 50%,
|
||||
rgba($background, 0.5) 60%,
|
||||
rgba($white, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $border;
|
||||
background: $hover-background;
|
||||
color: $hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $hover-color;
|
||||
background: $focus-background;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
&.show.dropdown-toggle,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $active-color !important;
|
||||
background: $active-background !important;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none !important, null);
|
||||
border-color: $border !important;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $label-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Button groups
|
||||
.btn-group #{$parent},
|
||||
.input-group #{$parent} {
|
||||
border-right: $input-btn-border-width solid $background !important;
|
||||
border-left: $input-btn-border-width solid $background !important;
|
||||
}
|
||||
.btn-group-vertical #{$parent} {
|
||||
border-top: $input-btn-border-width solid $background !important;
|
||||
border-bottom: $input-btn-border-width solid $background !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
@mixin button-label-variant($background: null, $border: null, $active-background: null, $active-border: null) {
|
||||
}
|
||||
|
||||
@mixin template-button-label-variant($parent, $background, $color: null, $border: null) {
|
||||
// Using the $dark-style variable for condition as in label style text color can't compare with $color-contrast-light/dark
|
||||
$border: transparent;
|
||||
|
||||
$label-color: if($color, $color, $background);
|
||||
$hover-color: if($color, $color, color-contrast($background));
|
||||
|
||||
$label-background: if(
|
||||
$hover-color == $color-contrast-light,
|
||||
shade-color($background, $btn-label-bg-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-label-bg-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
$hover-color: $background;
|
||||
$hover-background: $background;
|
||||
$hover-background: if(
|
||||
$hover-color == $color-contrast-light,
|
||||
shade-color($background, $btn-label-hover-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-label-hover-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
$active-color: $hover-color;
|
||||
$active-background: $hover-background;
|
||||
|
||||
$disabled-background: if(
|
||||
$hover-color == $color-contrast-light,
|
||||
shade-color($background, $btn-label-disabled-bg-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-label-disabled-bg-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
$border-color: if(
|
||||
$dark-style,
|
||||
shade-color($background, $btn-label-border-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-label-border-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
#{$parent} {
|
||||
color: $label-color !important;
|
||||
border-color: $border !important;
|
||||
background: $label-background !important;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($background, 0.2) 0,
|
||||
rgba($background, 0.3) 40%,
|
||||
rgba($background, 0.4) 50%,
|
||||
rgba($background, 0.5) 60%,
|
||||
rgba($white, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $border !important;
|
||||
background: $hover-background !important;
|
||||
color: $hover-color !important;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $hover-color;
|
||||
background: $hover-background;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
&.show.dropdown-toggle,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $active-color !important;
|
||||
background-color: $active-background !important;
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if($enable-gradients, none !important, null);
|
||||
border-color: $border !important;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $label-color !important;
|
||||
border-color: $border !important;
|
||||
background: $label-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Button groups
|
||||
.btn-group #{$parent},
|
||||
.input-group #{$parent} {
|
||||
border-right: $input-btn-border-width solid $border-color !important;
|
||||
border-left: $input-btn-border-width solid $border-color !important;
|
||||
}
|
||||
.btn-group-vertical #{$parent} {
|
||||
border-top: $input-btn-border-width solid $border-color !important;
|
||||
border-bottom: $input-btn-border-width solid $border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Outline
|
||||
@mixin button-outline-variant($color: null, $color-hover: null, $hover-color: null) {
|
||||
}
|
||||
|
||||
@mixin template-button-outline-variant($parent, $color, $hover-color: null) {
|
||||
$color: $color;
|
||||
$color-hover: $color;
|
||||
|
||||
$hover-background: if(
|
||||
$color-hover == $color-contrast-light,
|
||||
shade-color($color, $btn-outline-hover-bg-shade-amount, $card-bg),
|
||||
tint-color($color, $btn-outline-hover-bg-tint-amount, $card-bg)
|
||||
);
|
||||
|
||||
$focus-background: $color;
|
||||
$active-background: if(
|
||||
$color == $color-contrast-light,
|
||||
shade-color($color, $btn-outline-active-bg-shade-amount, $card-bg),
|
||||
tint-color($color, $btn-outline-active-bg-tint-amount, $card-bg)
|
||||
);
|
||||
$active-border: $color;
|
||||
$active-color: $color;
|
||||
|
||||
#{$parent} {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
background: transparent;
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($color, 0.2) 0,
|
||||
rgba($color, 0.3) 40%,
|
||||
rgba($color, 0.4) 50%,
|
||||
rgba($color, 0.5) 60%,
|
||||
rgba($white, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-hover !important;
|
||||
background-color: $hover-background !important;
|
||||
border-color: $active-border !important;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
color: $color-hover;
|
||||
background-color: $hover-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
&.dropdown-toggle.show {
|
||||
color: $active-color !important;
|
||||
background-color: $active-background !important;
|
||||
border-color: $active-border !important;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent} .badge {
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
color: color-contrast($color);
|
||||
}
|
||||
|
||||
#{$parent}:hover .badge,
|
||||
#{$parent}:focus:hover .badge,
|
||||
#{$parent}:active .badge,
|
||||
#{$parent}.active .badge,
|
||||
.show > #{$parent}.dropdown-toggle .badge {
|
||||
background: $color-hover;
|
||||
border-color: $color-hover;
|
||||
}
|
||||
}
|
||||
32
resources/assets/vendor/scss/_bootstrap-extended/mixins/_card.scss
vendored
Normal file
32
resources/assets/vendor/scss/_bootstrap-extended/mixins/_card.scss
vendored
Normal file
@ -0,0 +1,32 @@
|
||||
// Cards
|
||||
// *******************************************************************************
|
||||
|
||||
// color border bottom and shadow in card
|
||||
@mixin template-card-border-shadow-variant($parent, $background) {
|
||||
$border-color: shade-color($background, $card-border-color-scale, $card-bg);
|
||||
.card {
|
||||
&#{$parent} {
|
||||
&::after {
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
border-bottom-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// card hover border color
|
||||
@mixin template-card-hover-border-variant($parent, $background) {
|
||||
$border-color: shade-color($background, $card-hover-border-scale, $card-bg);
|
||||
.card {
|
||||
&#{$parent},
|
||||
#{$parent} {
|
||||
&:hover {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
64
resources/assets/vendor/scss/_bootstrap-extended/mixins/_caret.scss
vendored
Normal file
64
resources/assets/vendor/scss/_bootstrap-extended/mixins/_caret.scss
vendored
Normal file
@ -0,0 +1,64 @@
|
||||
// * Carets
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin caret-up($caret-width) {
|
||||
margin-top: 0.97 * divide($caret-width, 2);
|
||||
margin-left: 0.8em;
|
||||
width: $caret-width;
|
||||
height: $caret-width;
|
||||
border: 2px solid;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(-45deg);
|
||||
@include rtl-style {
|
||||
margin-right: 0.8em !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin caret-down($caret-width) {
|
||||
margin-top: -1.08 * divide($caret-width, 2);
|
||||
margin-left: 0.8em;
|
||||
width: $caret-width;
|
||||
height: $caret-width;
|
||||
border: 2px solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg);
|
||||
@include rtl-style {
|
||||
margin-right: 0.8em !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin caret-left($caret-width) {
|
||||
margin-top: 0;
|
||||
margin-right: 0.5em;
|
||||
width: $caret-width;
|
||||
height: $caret-width;
|
||||
border: 2px solid;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
transform: rotate(45deg);
|
||||
@include rtl-style {
|
||||
margin-right: 0 !important;
|
||||
margin-left: $caret-spacing !important;
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin caret-right($caret-width) {
|
||||
margin-top: 0;
|
||||
margin-right: 0.5em;
|
||||
width: $caret-width;
|
||||
height: $caret-width;
|
||||
border: 2px solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(-45deg);
|
||||
@include rtl-style {
|
||||
margin-left: 0 !important;
|
||||
margin-right: $caret-spacing !important;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
33
resources/assets/vendor/scss/_bootstrap-extended/mixins/_dropdown.scss
vendored
Normal file
33
resources/assets/vendor/scss/_bootstrap-extended/mixins/_dropdown.scss
vendored
Normal file
@ -0,0 +1,33 @@
|
||||
// * Dropdowns
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-dropdown-variant($parent, $background, $color: null) {
|
||||
#{$parent} .dropdown-item {
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($color, 0.2) 0,
|
||||
rgba($color, 0.3) 40%,
|
||||
rgba($color, 0.4) 50%,
|
||||
rgba($color, 0.5) 60%,
|
||||
rgba($white, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
&:not(.disabled).active,
|
||||
&:not(.disabled):active {
|
||||
background-color: $background;
|
||||
color: if($color, $color, color-contrast($background)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent}.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
|
||||
#{$parent}.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
|
||||
background-color: $background;
|
||||
color: if($color, $color, color-contrast($background)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-dropdown-theme($background, $color: null) {
|
||||
@include template-dropdown-variant('', $background, $color);
|
||||
}
|
||||
361
resources/assets/vendor/scss/_bootstrap-extended/mixins/_forms.scss
vendored
Normal file
361
resources/assets/vendor/scss/_bootstrap-extended/mixins/_forms.scss
vendored
Normal file
@ -0,0 +1,361 @@
|
||||
// * Form controls
|
||||
// *******************************************************************************
|
||||
|
||||
// Form control
|
||||
@mixin template-form-control-theme($color) {
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
border-color: $color !important;
|
||||
}
|
||||
|
||||
// Using :focus-within to apply focus border color to default and merged input-group
|
||||
.input-group {
|
||||
&:focus-within {
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border-color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Float labels
|
||||
@mixin template-float-label-theme($color) {
|
||||
.form-floating {
|
||||
> .form-control:focus,
|
||||
> .form-control:focus:not(:placeholder-shown),
|
||||
> .form-select:focus,
|
||||
> .form-select:focus:not(:placeholder-shown) {
|
||||
~ label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form Switch
|
||||
@mixin template-form-switch-theme($background) {
|
||||
$focus-color: $background;
|
||||
$focus-bg-image: str-replace(str-replace($form-switch-focus-bg-image, '#{$form-switch-color}', $white), '#', '%23');
|
||||
|
||||
$checked-color: $component-active-color;
|
||||
$checked-bg-image: str-replace(
|
||||
str-replace($form-switch-checked-bg-image, '#{$form-switch-checked-color}', $checked-color),
|
||||
'#',
|
||||
'%23'
|
||||
);
|
||||
|
||||
.form-switch {
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
background-image: escape-svg($focus-bg-image);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
@if $enable-gradients {
|
||||
background-image: escape-svg($checked-bg-image), var(--#{$variable-prefix}gradient);
|
||||
} @else {
|
||||
background-image: escape-svg($checked-bg-image);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// File Input
|
||||
@mixin template-file-input-theme($color) {
|
||||
.form-control:focus ~ .form-label {
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form Check
|
||||
@mixin template-form-check-variant($parent, $background, $color: null) {
|
||||
$color: if($color, $color, color-contrast($background));
|
||||
$focus-border: $background;
|
||||
$focus-color: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity);
|
||||
|
||||
#{$parent} .form-check-input {
|
||||
&:checked {
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
box-shadow: 0 2px 6px 0 rgba($background, 0.3);
|
||||
}
|
||||
|
||||
&[type='checkbox']:indeterminate {
|
||||
background-color: $background;
|
||||
border-color: $background;
|
||||
box-shadow: 0 2px 6px 0 rgba($background, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// Custom options
|
||||
#{$parent}.custom-option {
|
||||
&.checked {
|
||||
border: $input-focus-border-width solid $background !important;
|
||||
margin: 0;
|
||||
.custom-option-body,
|
||||
.custom-option-header {
|
||||
i {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.custom-option-label {
|
||||
&.checked {
|
||||
background-color: rgba($background, 0.12);
|
||||
color: $background;
|
||||
.custom-option-header span,
|
||||
.custom-option-title {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-form-check-theme($background, $color: null) {
|
||||
@include template-form-check-variant('', $background, $color);
|
||||
}
|
||||
|
||||
// Form Validation
|
||||
|
||||
@mixin form-validation-state(
|
||||
$state: null,
|
||||
$color: null,
|
||||
$icon: null,
|
||||
$tooltip-color: null,
|
||||
$tooltip-bg-color: null,
|
||||
$focus-box-shadow: null,
|
||||
$border-color: null
|
||||
) {
|
||||
}
|
||||
|
||||
@mixin template-form-validation-state(
|
||||
$state,
|
||||
$color,
|
||||
$icon,
|
||||
$tooltip-color: color-contrast($color),
|
||||
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
||||
$focus-box-shadow: none,
|
||||
$border-color: $color
|
||||
) {
|
||||
.#{$state}-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: $form-feedback-margin-top;
|
||||
@include font-size($form-feedback-font-size);
|
||||
font-style: $form-feedback-font-style;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.#{$state}-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
max-width: 100%; // Contain to parent when possible
|
||||
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
||||
margin-top: 0.1rem;
|
||||
@include font-size($form-feedback-tooltip-font-size);
|
||||
line-height: $form-feedback-tooltip-line-height;
|
||||
color: $tooltip-color;
|
||||
background-color: $tooltip-bg-color;
|
||||
@include border-radius($form-feedback-tooltip-border-radius);
|
||||
}
|
||||
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color !important;
|
||||
border-width: $input-focus-border-width;
|
||||
~ .input-group-text {
|
||||
border-width: $input-focus-border-width;
|
||||
}
|
||||
|
||||
.dark-style & {
|
||||
border-color: $color !important;
|
||||
}
|
||||
|
||||
@if $enable-validation-icons {
|
||||
background-image: escape-svg($icon);
|
||||
background-repeat: no-repeat;
|
||||
background-size: $input-height-inner-half $input-height-inner-half;
|
||||
|
||||
@include ltr-style {
|
||||
padding-right: $input-height-inner;
|
||||
background-position: right $input-height-inner-quarter center;
|
||||
}
|
||||
@include rtl-style {
|
||||
padding-left: $input-height-inner;
|
||||
background-position: left $input-height-inner-quarter center;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $color !important;
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// StyleLint-disable-next-line selector-no-qualifying-type
|
||||
textarea.form-control {
|
||||
@include form-validation-state-selector($state) {
|
||||
@if $enable-validation-icons {
|
||||
@include ltr-style {
|
||||
padding-right: $input-height-inner;
|
||||
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
||||
}
|
||||
@include rtl-style {
|
||||
padding-left: $input-height-inner;
|
||||
background-position: top $input-height-inner-quarter left $input-height-inner-quarter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color !important;
|
||||
background-image: escape-svg($form-select-indicator), escape-svg($icon);
|
||||
border-width: $input-focus-border-width;
|
||||
~ .input-group-text {
|
||||
border-width: $input-focus-border-width;
|
||||
}
|
||||
@include ltr-style {
|
||||
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
||||
}
|
||||
@include rtl-style {
|
||||
background-position:
|
||||
left $form-select-padding-x center,
|
||||
center left $form-select-indicator-padding; // RTL
|
||||
}
|
||||
|
||||
@if $enable-validation-icons {
|
||||
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
||||
@include ltr-style {
|
||||
background-image: escape-svg($form-select-indicator), escape-svg($icon);
|
||||
padding-right: $form-select-feedback-icon-padding-end;
|
||||
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
||||
}
|
||||
@include rtl-style {
|
||||
background-image: escape-svg($form-select-indicator), escape-svg($icon);
|
||||
padding-left: $form-select-feedback-icon-padding-end;
|
||||
background-position:
|
||||
left $form-select-padding-x center,
|
||||
center left $form-select-indicator-padding; // RTL
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
box-shadow: $focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-switch .form-check-input {
|
||||
@include form-validation-state-selector($state) {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
.form-check-input {
|
||||
@include form-validation-state-selector($state) {
|
||||
border-color: $color;
|
||||
|
||||
&:checked {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $focus-box-shadow;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
~ .form-check-label {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-check-inline .form-check-input {
|
||||
~ .#{$state}-feedback {
|
||||
@include ltr-style {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
@include rtl-style {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
// On validation .input-group & .input-group-merged, setup proper border color & box-shadow
|
||||
.input-group {
|
||||
.form-control {
|
||||
@include form-validation-state-selector($state) {
|
||||
~ .input-group-text {
|
||||
border-color: $color !important;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $color !important;
|
||||
box-shadow: none;
|
||||
// ? .input-group has .input-group-text last/sibling
|
||||
~ .input-group-text {
|
||||
border-color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@include form-validation-state-selector($state) {
|
||||
&:focus {
|
||||
.input-group & {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group .form-control,
|
||||
.input-group .form-select {
|
||||
@include form-validation-state-selector($state) {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($state == 'invalid') {
|
||||
.was-validated .input-group:has(.input-group-text):has(.form-control:invalid) .input-group-text,
|
||||
.input-group:has(.input-group-text):has(.form-control.is-invalid) .input-group-text {
|
||||
border-color: $color;
|
||||
}
|
||||
.was-validated .input-group:has(input:invalid) {
|
||||
.#{$state}-feedback,
|
||||
.#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if ($state == 'valid') {
|
||||
.was-validated .input-group:has(.input-group-text):has(.form-control:valid) .input-group-text,
|
||||
.input-group:has(.input-group-text):has(.form-control.is-valid) .input-group-text {
|
||||
border-color: $color;
|
||||
}
|
||||
.was-validated .input-group:has(input:valid) {
|
||||
.#{$state}-feedback,
|
||||
.#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
86
resources/assets/vendor/scss/_bootstrap-extended/mixins/_list-group.scss
vendored
Normal file
86
resources/assets/vendor/scss/_bootstrap-extended/mixins/_list-group.scss
vendored
Normal file
@ -0,0 +1,86 @@
|
||||
// List groups
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin list-group-item-variant($state: null, $background: null, $color: null) {
|
||||
}
|
||||
|
||||
// Basic List groups
|
||||
@mixin template-list-group-item-variant($parent, $background, $color: null) {
|
||||
$border-color: if(
|
||||
$dark-style,
|
||||
shift-color($background, -$list-group-item-border-scale, $card-bg),
|
||||
shift-color($background, $list-group-item-border-scale, $card-bg)
|
||||
);
|
||||
$background-color: if(
|
||||
$dark-style,
|
||||
shift-color($background, -$list-group-item-bg-scale, $card-bg),
|
||||
shift-color($background, $list-group-item-bg-scale, $card-bg)
|
||||
);
|
||||
$border-color: if(
|
||||
$dark-style,
|
||||
if(
|
||||
$parent == '.list-group-item-dark',
|
||||
color-contrast($background),
|
||||
shift-color($background, -$list-group-item-color-scale, $card-bg)
|
||||
),
|
||||
shift-color($background, $list-group-item-color-scale, $card-bg)
|
||||
);
|
||||
$color: shift-color($background, $list-group-item-color-scale);
|
||||
$hover-background: shade-color($background-color, $list-group-item-bg-hover-scale);
|
||||
#{$parent} {
|
||||
border-color: $border-color;
|
||||
background-color: $background-color;
|
||||
color: $color !important;
|
||||
}
|
||||
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
color: $color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $border-color;
|
||||
background-color: $hover-background;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $border-color !important;
|
||||
background-color: $background !important;
|
||||
// color: if($color, $color, color-contrast($background));
|
||||
color: color-contrast($background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-list-group-theme($background, $color: null) {
|
||||
@include template-list-group-item-variant('.list-group-item-primary', $background);
|
||||
|
||||
.list-group-item.active {
|
||||
background-color: rgba-to-hex(rgba($background, 0.16), $card-bg);
|
||||
color: $background;
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($background, 0.2) 0,
|
||||
rgba($background, 0.3) 40%,
|
||||
rgba($background, 0.4) 50%,
|
||||
rgba($background, 0.5) 60%,
|
||||
rgba($black, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-list-group-timeline-variant($parent, $background) {
|
||||
.list-group {
|
||||
&.list-group-timeline {
|
||||
#{$parent} {
|
||||
&:before {
|
||||
border-color: $background;
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
158
resources/assets/vendor/scss/_bootstrap-extended/mixins/_misc.scss
vendored
Normal file
158
resources/assets/vendor/scss/_bootstrap-extended/mixins/_misc.scss
vendored
Normal file
@ -0,0 +1,158 @@
|
||||
// * Light/Dark layout
|
||||
// *******************************************************************************
|
||||
@mixin light-layout-only() {
|
||||
@if $dark-style {
|
||||
html:not(.dark-style) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dark-layout-only() {
|
||||
@if $dark-style {
|
||||
.dark-style {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * RTL/LTR
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin ltr-only() {
|
||||
@if $rtl-support {
|
||||
html:not([dir='rtl']) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-only() {
|
||||
@if $rtl-support {
|
||||
[dir='rtl'] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr-style() {
|
||||
@if $rtl-support {
|
||||
html:not([dir='rtl']) & {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl-style() {
|
||||
@if $rtl-support {
|
||||
[dir='rtl'] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * Keyframes
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin keyframes($name) {
|
||||
@-webkit-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// * Colors
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin bg-color-variant($parent, $color, $rth-color: #000) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
a#{$parent} {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba-to-hex(rgba($color, 0.95), $background: $rth-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//! Fix: Dropdown notification read badge bg color
|
||||
.dropdown-notifications-item:not(.mark-as-read) {
|
||||
.dropdown-notifications-read span {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-variant($parent, $color, $rth-color: #000) {
|
||||
@include bg-color-variant($parent, $color);
|
||||
}
|
||||
@mixin bg-glow-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
&.bg-glow {
|
||||
box-shadow: 0px 2px 3px 0px rgba($color, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// BG Label
|
||||
@mixin bg-label-variant($parent, $background, $color: $background) {
|
||||
$label-background: if(
|
||||
$dark-style,
|
||||
shade-color($background, $btn-label-bg-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-label-bg-tint-amount, $card-bg)
|
||||
);
|
||||
#{$parent} {
|
||||
background-color: $label-background !important;
|
||||
color: if($color, $color, color-contrast($bg)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// BG hover: label to solid
|
||||
@mixin bg-label-hover-variant($parent, $background, $color: $background) {
|
||||
$label-background: if(
|
||||
$dark-style,
|
||||
shade-color($background, $btn-label-bg-shade-amount, $card-bg),
|
||||
tint-color($background, $btn-label-bg-tint-amount, $card-bg)
|
||||
);
|
||||
#{$parent} {
|
||||
background-color: $label-background !important;
|
||||
color: if($color, $color, color-contrast($bg)) !important;
|
||||
&:hover {
|
||||
background-color: $background !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-gradient-variant($parent, $background, $deg: 45deg) {
|
||||
#{$parent} {
|
||||
background-image: linear-gradient($deg, $background, rgba-to-hex(rgba($background, 0.5))) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
color: $color !important;
|
||||
}
|
||||
//! Fix: text-body hover color
|
||||
.text-body,
|
||||
.text-heading {
|
||||
&[href]:hover {
|
||||
color: shift-color($color, $link-shade-percentage) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
resources/assets/vendor/scss/_bootstrap-extended/mixins/_modal.scss
vendored
Normal file
20
resources/assets/vendor/scss/_bootstrap-extended/mixins/_modal.scss
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
// Modal
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-modal-onboarding-theme($background, $color) {
|
||||
.modal-onboarding {
|
||||
.carousel-indicators {
|
||||
[data-bs-target] {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
color: $background;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
101
resources/assets/vendor/scss/_bootstrap-extended/mixins/_navs.scss
vendored
Normal file
101
resources/assets/vendor/scss/_bootstrap-extended/mixins/_navs.scss
vendored
Normal file
@ -0,0 +1,101 @@
|
||||
// Navs
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-nav-size($padding-y, $padding-x, $font-size, $line-height) {
|
||||
> .nav .nav-link,
|
||||
&.nav .nav-link {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-nav-variant($parent, $background, $color: null) {
|
||||
$pills-selector: if($parent== '', '.nav-pills', '#{$parent}.nav-pills, #{$parent} > .nav-pills');
|
||||
|
||||
#{$pills-selector} .nav-link.active {
|
||||
box-shadow: 0 0.125rem 0.375rem 0 rgba($background, 0.3);
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $background;
|
||||
color: if($color, $color, color-contrast($background));
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent}.nav-tabs {
|
||||
.nav-link {
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($background, 0.2) 0,
|
||||
rgba($background, 0.3) 40%,
|
||||
rgba($background, 0.4) 50%,
|
||||
rgba($background, 0.5) 60%,
|
||||
rgba($white, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$parent}.nav-tabs .nav-link.active,
|
||||
#{$parent}.nav-tabs .nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 -2px 0 $background inset;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-align-bottom .nav-tabs .nav-link.active,
|
||||
.nav-align-bottom .nav-tabs .nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 2px 0 $background inset;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-align-left .nav-tabs .nav-link.active,
|
||||
.nav-align-left .nav-tabs .nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: -2px 0px 0 $background inset;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-align-right .nav-tabs .nav-link.active,
|
||||
.nav-align-right .nav-tabs .nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 2px 0px 0 $background inset;
|
||||
}
|
||||
}
|
||||
|
||||
@include rtl-only {
|
||||
.nav-align-left .nav-tabs .nav-link.active,
|
||||
.nav-align-left .nav-tabs .nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 2px 0px 0 $background inset;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-align-right .nav-tabs .nav-link.active,
|
||||
.nav-align-right .nav-tabs .nav-link.active {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: -2px 0px 0 $background inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-nav-theme($background, $color: null) {
|
||||
@include template-nav-variant('', $background, $color);
|
||||
}
|
||||
73
resources/assets/vendor/scss/_bootstrap-extended/mixins/_pagination.scss
vendored
Normal file
73
resources/assets/vendor/scss/_bootstrap-extended/mixins/_pagination.scss
vendored
Normal file
@ -0,0 +1,73 @@
|
||||
// Pagination
|
||||
// *******************************************************************************
|
||||
|
||||
// Basic Pagination
|
||||
@mixin template-pagination-variant($parent, $background, $color: null) {
|
||||
$hover-background: if(
|
||||
$dark-style,
|
||||
shade-color($background, $pagination-hover-bg-scale, $rgba-to-hex-bg),
|
||||
tint-color($background, $pagination-hover-bg-scale, $rgba-to-hex-bg)
|
||||
);
|
||||
#{$parent} .page-item .page-link,
|
||||
#{$parent}.pagination li > a:not(.page-link) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $hover-background;
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
#{$parent} .page-item.active .page-link,
|
||||
#{$parent}.pagination li.active > a:not(.page-link) {
|
||||
box-shadow: 0 0.125rem 0.375rem 0 rgba($background, 0.3);
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $background;
|
||||
background-color: $background;
|
||||
color: if($color, $color, color-contrast($background));
|
||||
}
|
||||
}
|
||||
#{$parent} .page-item .page-link,
|
||||
#{$parent}.pagination li > a:not(.page-link) {
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($background, 0.2) 0,
|
||||
rgba($background, 0.3) 40%,
|
||||
rgba($background, 0.4) 50%,
|
||||
rgba($background, 0.5) 60%,
|
||||
rgba($black, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination Outline Variant
|
||||
@mixin template-pagination-outline-variant($parent, $background, $color: null) {
|
||||
#{$parent} .page-item.active .page-link,
|
||||
#{$parent}.pagination li.active > a:not(.page-link) {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $background !important;
|
||||
color: $background !important;
|
||||
background-color: rgba-to-hex(rgba($background, 0.16), $card-bg) !important;
|
||||
}
|
||||
&.waves-effect {
|
||||
.waves-ripple {
|
||||
background: radial-gradient(
|
||||
rgba($background, 0.2) 0,
|
||||
rgba($background, 0.3) 40%,
|
||||
rgba($background, 0.4) 50%,
|
||||
rgba($background, 0.5) 60%,
|
||||
rgba($black, 0) 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-pagination-theme($background, $color: null) {
|
||||
@include template-pagination-variant('', $background, $color);
|
||||
}
|
||||
53
resources/assets/vendor/scss/_bootstrap-extended/mixins/_popover.scss
vendored
Normal file
53
resources/assets/vendor/scss/_bootstrap-extended/mixins/_popover.scss
vendored
Normal file
@ -0,0 +1,53 @@
|
||||
// Popovers
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-popover-variant($parent, $background, $color: null) {
|
||||
$color: if($color, $color, color-contrast($background));
|
||||
|
||||
#{$parent} {
|
||||
border-color: transparent;
|
||||
background: $background;
|
||||
|
||||
.popover-header {
|
||||
border-color: $background;
|
||||
background: transparent;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
background: transparent;
|
||||
color: rgba($color, 0.8);
|
||||
}
|
||||
|
||||
> .popover-arrow::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
&.bs-popover-auto {
|
||||
&[data-popper-placement='top'] > .popover-arrow::after {
|
||||
border-top-color: $background !important;
|
||||
}
|
||||
|
||||
&[data-popper-placement='right'] > .popover-arrow::after {
|
||||
border-right-color: $background !important;
|
||||
@include rtl-style {
|
||||
border-left-color: $background !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-popper-placement='bottom'] > .popover-arrow::after {
|
||||
border-bottom-color: $background !important;
|
||||
}
|
||||
|
||||
&[data-popper-placement='left'] > .popover-arrow::after {
|
||||
border-left-color: $background !important;
|
||||
@include rtl-style {
|
||||
border-right-color: $background !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-popper-placement='bottom'] .popover-header::before {
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
resources/assets/vendor/scss/_bootstrap-extended/mixins/_progress.scss
vendored
Normal file
14
resources/assets/vendor/scss/_bootstrap-extended/mixins/_progress.scss
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
// Progress bars
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-progress-bar-theme($background, $color: null) {
|
||||
.progress-bar {
|
||||
background-color: $background;
|
||||
color: if($color, $color, color-contrast($background));
|
||||
}
|
||||
}
|
||||
@mixin template-progress-shadow-theme($parent, $background) {
|
||||
#{$parent} {
|
||||
box-shadow: 0 0.125rem 0.375rem 0 rgba($background, 0.3);
|
||||
}
|
||||
}
|
||||
26
resources/assets/vendor/scss/_bootstrap-extended/mixins/_table-variants.scss
vendored
Normal file
26
resources/assets/vendor/scss/_bootstrap-extended/mixins/_table-variants.scss
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
// Tables
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-table-variant($parent, $background, $layout-color: $white) {
|
||||
.table-#{$parent} {
|
||||
$color: color-contrast(opaque($body-bg, $background));
|
||||
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
|
||||
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
|
||||
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
|
||||
|
||||
--#{$variable-prefix}table-bg: #{$background};
|
||||
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
|
||||
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
|
||||
--#{$variable-prefix}table-active-bg: #{$active-bg};
|
||||
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
|
||||
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
|
||||
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
|
||||
|
||||
color: $color;
|
||||
border-color: mix($color, $background, percentage($table-border-factor));
|
||||
.btn-icon,
|
||||
.btn {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
35
resources/assets/vendor/scss/_bootstrap-extended/mixins/_tooltip.scss
vendored
Normal file
35
resources/assets/vendor/scss/_bootstrap-extended/mixins/_tooltip.scss
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
// Tooltips
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-tooltip-variant($parent, $background, $color: null) {
|
||||
#{$parent} {
|
||||
.tooltip-inner {
|
||||
background: $background;
|
||||
color: if($color, $color, color-contrast($background));
|
||||
}
|
||||
|
||||
&.bs-tooltip-auto {
|
||||
&[data-popper-placement='top'] .tooltip-arrow::before {
|
||||
border-top-color: $background;
|
||||
}
|
||||
|
||||
&[data-popper-placement='left'] .tooltip-arrow::before {
|
||||
border-left-color: $background;
|
||||
@include rtl-style {
|
||||
border-right-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-popper-placement='bottom'] .tooltip-arrow::before {
|
||||
border-bottom-color: $background;
|
||||
}
|
||||
|
||||
&[data-popper-placement='right'] .tooltip-arrow::before {
|
||||
border-right-color: $background;
|
||||
@include rtl-style {
|
||||
border-left-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user