Laravel 11, Vuexy Admin 10.3, by admin@koneko.mx
This commit is contained in:
75
modules/Admin/Resources/assets/vendor/scss/_components/_app-brand.scss
vendored
Normal file
75
modules/Admin/Resources/assets/vendor/scss/_components/_app-brand.scss
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
// App Brand
|
||||
// *******************************************************************************
|
||||
|
||||
@import 'mixins/app-brand';
|
||||
|
||||
.app-brand {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
min-height: 1px;
|
||||
align-items: center;
|
||||
}
|
||||
// For cover auth pages
|
||||
.auth-cover-brand {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 2.5rem;
|
||||
inset-inline-start: $spacer * 1.5;
|
||||
}
|
||||
.app-brand-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.app-brand-logo {
|
||||
display: block;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
min-height: 1px;
|
||||
|
||||
img,
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.app-brand-text {
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
transition: opacity $menu-animation-duration ease-in-out;
|
||||
margin-inline-start: 0.75rem !important;
|
||||
}
|
||||
|
||||
.app-brand-img-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-brand .layout-menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// App brand with vertical menu
|
||||
.menu-vertical .app-brand {
|
||||
padding-right: $menu-vertical-link-padding-x + 0.25rem;
|
||||
padding-left: $menu-vertical-link-padding-x + 0.625rem;
|
||||
}
|
||||
|
||||
// App brand with vertical menu
|
||||
.menu-horizontal .app-brand,
|
||||
.menu-horizontal .app-brand + .menu-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:not(.layout-menu) > .menu-vertical.menu-collapsed:not(.layout-menu):not(:hover) {
|
||||
@include template-app-brand-collapsed();
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($menu-collapsed-layout-breakpoint) {
|
||||
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas)
|
||||
.layout-menu {
|
||||
@include template-app-brand-collapsed();
|
||||
}
|
||||
}
|
||||
157
modules/Admin/Resources/assets/vendor/scss/_components/_avatar.scss
vendored
Normal file
157
modules/Admin/Resources/assets/vendor/scss/_components/_avatar.scss
vendored
Normal file
@ -0,0 +1,157 @@
|
||||
// Avatar
|
||||
// *******************************************************************************
|
||||
|
||||
// Avatar Styles
|
||||
.avatar {
|
||||
position: relative;
|
||||
width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
// Avatar Initials if no images added
|
||||
.avatar-initial {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $component-active-color;
|
||||
background-color: $avatar-bg;
|
||||
font-size: $avatar-initial;
|
||||
}
|
||||
// Avatar Status indication
|
||||
&.avatar-online,
|
||||
&.avatar-offline,
|
||||
&.avatar-away,
|
||||
&.avatar-busy {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 0 2px $avatar-group-border;
|
||||
}
|
||||
}
|
||||
&.avatar-online:after {
|
||||
background-color: $success;
|
||||
}
|
||||
&.avatar-offline:after {
|
||||
background-color: $secondary;
|
||||
}
|
||||
&.avatar-away:after {
|
||||
background-color: $warning;
|
||||
}
|
||||
&.avatar-busy:after {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Pull up avatar style
|
||||
.pull-up {
|
||||
transition: all 0.25s ease;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: $box-shadow;
|
||||
z-index: 30;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Avatar Sizes
|
||||
.avatar-xs {
|
||||
@include template-avatar-style($avatar-size-xs, $avatar-size-xs, $avatar-initial-xs, 1px);
|
||||
}
|
||||
.avatar-sm {
|
||||
@include template-avatar-style($avatar-size-sm, $avatar-size-sm, $avatar-initial-sm, 2px);
|
||||
}
|
||||
.avatar-md {
|
||||
@include template-avatar-style($avatar-size-md, $avatar-size-md, $avatar-initial-md, 4px);
|
||||
}
|
||||
.avatar-lg {
|
||||
@include template-avatar-style($avatar-size-lg, $avatar-size-lg, $avatar-initial-lg, 5px);
|
||||
}
|
||||
.avatar-xl {
|
||||
@include template-avatar-style($avatar-size-xl, $avatar-size-xl, $avatar-initial-xl, 6px);
|
||||
}
|
||||
|
||||
// Avatar Group SCSS
|
||||
.avatar-group {
|
||||
.avatar {
|
||||
transition: all 0.25s ease;
|
||||
img,
|
||||
.avatar-initial {
|
||||
border: 2px solid $avatar-group-border;
|
||||
// box-shadow: 0 0 0 2px $avatar-group-border, inset 0 0 0 1px rgba($black, 0.07); //0 2px 10px 0 rgba($secondary,.3);
|
||||
}
|
||||
.avatar-initial {
|
||||
background-color: $avatar-bg;
|
||||
color: $headings-color;
|
||||
}
|
||||
&:hover {
|
||||
z-index: 30 !important;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Avatar Group LTR only with sizing
|
||||
@include ltr-only {
|
||||
.avatar-group {
|
||||
// Avatar Group Sizings
|
||||
.avatar {
|
||||
margin-left: -0.8rem;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.avatar-xs {
|
||||
margin-left: -0.65rem;
|
||||
}
|
||||
.avatar-sm {
|
||||
margin-left: -0.75rem;
|
||||
}
|
||||
.avatar-md {
|
||||
margin-left: -0.9rem;
|
||||
}
|
||||
.avatar-lg {
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
.avatar-xl {
|
||||
margin-left: -1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Avatar Group RTL with sizing
|
||||
@include rtl-only {
|
||||
.avatar-group {
|
||||
// Avatar Group Sizings
|
||||
.avatar {
|
||||
margin-right: -0.8rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.avatar-xs {
|
||||
margin-right: -0.65rem;
|
||||
}
|
||||
.avatar-sm {
|
||||
margin-right: -0.75rem;
|
||||
}
|
||||
.avatar-md {
|
||||
margin-right: -0.9rem;
|
||||
}
|
||||
.avatar-lg {
|
||||
margin-right: -1.5rem;
|
||||
}
|
||||
.avatar-xl {
|
||||
margin-right: -1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
183
modules/Admin/Resources/assets/vendor/scss/_components/_base.scss
vendored
Normal file
183
modules/Admin/Resources/assets/vendor/scss/_components/_base.scss
vendored
Normal file
@ -0,0 +1,183 @@
|
||||
// Base
|
||||
// *******************************************************************************
|
||||
|
||||
body {
|
||||
text-rendering: optimizeLegibility;
|
||||
font-smoothing: antialiased;
|
||||
-moz-font-feature-settings: 'liga' on;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
button.list-group-item {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// * App Overlay
|
||||
// *******************************************************************************
|
||||
|
||||
.app-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
visibility: hidden;
|
||||
z-index: 3;
|
||||
transition: all 0.25s ease;
|
||||
&.show {
|
||||
visibility: visible;
|
||||
}
|
||||
@if not $dark-style {
|
||||
.light-style & {
|
||||
background-color: rgba($black, 0.5);
|
||||
}
|
||||
}
|
||||
@if $dark-style {
|
||||
.dark-style & {
|
||||
background-color: rgba($modal-backdrop-bg, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * Containers
|
||||
// *******************************************************************************
|
||||
|
||||
.container,
|
||||
.container-fluid,
|
||||
.container-xxl {
|
||||
padding-right: $container-padding-x-sm;
|
||||
padding-left: $container-padding-x-sm;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-right: $container-padding-x;
|
||||
padding-left: $container-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// * Thumbnails
|
||||
// *******************************************************************************
|
||||
|
||||
.img-thumbnail {
|
||||
position: relative;
|
||||
display: block;
|
||||
img {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.img-thumbnail-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.img-thumbnail:hover &,
|
||||
.img-thumbnail:focus & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay effect
|
||||
.img-thumbnail-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
.img-thumbnail:not(:hover):not(:focus) & {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.img-thumbnail-shadow {
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: 0 5px 20px rgba($black, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom-in effect
|
||||
.img-thumbnail-zoom-in {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: translate3d(0);
|
||||
}
|
||||
|
||||
.img-thumbnail-content {
|
||||
transform: translate(-50%, -50%) scale(0.6);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.img-thumbnail-content {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * IE Fixes
|
||||
// *******************************************************************************
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
// Fix IE parent container height bug when containing image with fluid width
|
||||
.card,
|
||||
.card-body,
|
||||
.media,
|
||||
.flex-column,
|
||||
.tab-content {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
min-height: 1px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// * RTL
|
||||
// *******************************************************************************
|
||||
|
||||
@if $rtl-support {
|
||||
[dir='rtl'] body {
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
// * Buy now section
|
||||
// *******************************************************************************
|
||||
.buy-now {
|
||||
.btn-buy-now {
|
||||
position: fixed;
|
||||
bottom: 3rem;
|
||||
|
||||
right: $container-padding-x;
|
||||
@include rtl-style() {
|
||||
left: $container-padding-x;
|
||||
right: inherit;
|
||||
}
|
||||
z-index: $zindex-menu-fixed;
|
||||
box-shadow: 0 1px 20px 1px $danger !important;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
modules/Admin/Resources/assets/vendor/scss/_components/_blockui.scss
vendored
Normal file
10
modules/Admin/Resources/assets/vendor/scss/_components/_blockui.scss
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
// Block UI
|
||||
// *******************************************************************************
|
||||
|
||||
.blockUI {
|
||||
&.blockOverlay,
|
||||
&.blockMsg {
|
||||
z-index: $zindex-modal + 1 !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
255
modules/Admin/Resources/assets/vendor/scss/_components/_common.scss
vendored
Normal file
255
modules/Admin/Resources/assets/vendor/scss/_components/_common.scss
vendored
Normal file
@ -0,0 +1,255 @@
|
||||
// * Common
|
||||
// *******************************************************************************
|
||||
|
||||
@use '../_bootstrap-extended/include' as light;
|
||||
|
||||
.ui-square,
|
||||
.ui-rect,
|
||||
.ui-rect-30,
|
||||
.ui-rect-60,
|
||||
.ui-rect-67,
|
||||
.ui-rect-75 {
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
padding-top: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.ui-square {
|
||||
padding-top: 100% !important;
|
||||
}
|
||||
|
||||
.ui-rect {
|
||||
padding-top: 50% !important;
|
||||
}
|
||||
|
||||
.ui-rect-30 {
|
||||
padding-top: 30% !important;
|
||||
}
|
||||
|
||||
.ui-rect-60 {
|
||||
padding-top: 60% !important;
|
||||
}
|
||||
|
||||
.ui-rect-67 {
|
||||
padding-top: 67% !important;
|
||||
}
|
||||
|
||||
.ui-rect-75 {
|
||||
padding-top: 75% !important;
|
||||
}
|
||||
|
||||
.ui-square-content,
|
||||
.ui-rect-content {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.text-strike-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
// * Line Clamp with ellipsis
|
||||
// *******************************************************************************
|
||||
|
||||
$clamp-numbers: (
|
||||
'1': 1,
|
||||
'2': 2,
|
||||
'3': 3
|
||||
) !default;
|
||||
|
||||
@each $clamp-class, $clamp-value in $clamp-numbers {
|
||||
.line-clamp-#{$clamp-class} {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $clamp-value;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// * Stars
|
||||
// *******************************************************************************
|
||||
|
||||
.ui-stars,
|
||||
.ui-star,
|
||||
.ui-star > * {
|
||||
height: $ui-star-size;
|
||||
|
||||
// Disable dragging
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
.ui-stars {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-star {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
width: $ui-star-size;
|
||||
height: $ui-star-size;
|
||||
text-decoration: none !important;
|
||||
font-size: $ui-star-size;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
|
||||
@include rtl-style {
|
||||
float: right;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: $ui-stars-spacer;
|
||||
|
||||
@include rtl-style {
|
||||
margin-right: $ui-stars-spacer;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> *,
|
||||
> *::before,
|
||||
> *::after {
|
||||
position: absolute;
|
||||
left: $ui-star-size * 0.5;
|
||||
height: 100%;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@include rtl-style {
|
||||
right: $ui-star-size * 0.5;
|
||||
left: auto;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
z-index: 10;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
color: $ui-star-filled-color;
|
||||
}
|
||||
|
||||
// Default icon
|
||||
> *:last-child {
|
||||
z-index: 5;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.half-filled > *:first-child {
|
||||
width: 50%;
|
||||
transform: translateX(-100%);
|
||||
|
||||
@include rtl-style {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.filled > *:first-child,
|
||||
&.half-filled > *:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.filled > *:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hoverable
|
||||
|
||||
.ui-stars.hoverable .ui-star > *:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Empty stars if first star is not filled
|
||||
.ui-stars.hoverable .ui-star:first-child:not(.filled),
|
||||
.ui-stars.hoverable .ui-star:first-child:not(.half-filled) {
|
||||
> *:first-child,
|
||||
~ .ui-star > *:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-stars.hoverable .ui-star.filled > *:first-child,
|
||||
.ui-stars.hoverable .ui-star.half-filled > *:first-child {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ui-stars.hoverable:hover .ui-star > *:first-child {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
|
||||
@include rtl-style {
|
||||
transform: translateX(50%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-stars.hoverable .ui-star:hover ~ .ui-star {
|
||||
> *:first-child {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
// * Background
|
||||
// *******************************************************************************
|
||||
|
||||
.ui-bg-cover {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.ui-bg-overlay-container,
|
||||
.ui-bg-video-container {
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-bg-overlay-container .ui-bg-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// * Styles
|
||||
// *******************************************************************************
|
||||
@if not $dark-style {
|
||||
.light-style {
|
||||
$ui-star-empty-color: light.$gray-200;
|
||||
|
||||
.ui-bordered {
|
||||
border: 1px solid light.$border-color;
|
||||
}
|
||||
|
||||
.ui-star > *:last-child {
|
||||
color: $ui-star-empty-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
161
modules/Admin/Resources/assets/vendor/scss/_components/_custom-options.scss
vendored
Normal file
161
modules/Admin/Resources/assets/vendor/scss/_components/_custom-options.scss
vendored
Normal file
@ -0,0 +1,161 @@
|
||||
// Custom Options
|
||||
// *******************************************************************************
|
||||
|
||||
// Custom option
|
||||
.custom-option {
|
||||
padding-left: 0;
|
||||
border: $custom-option-border-width solid $custom-option-border-color;
|
||||
border-radius: $border-radius;
|
||||
margin: subtract($input-focus-border-width, $custom-option-border-width);
|
||||
&:hover {
|
||||
border-width: $custom-option-border-width;
|
||||
border-color: $custom-option-border-hover-color;
|
||||
}
|
||||
&.custom-option-image {
|
||||
border-width: $custom-option-image-border-width !important;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
border-width: $custom-option-image-border-width !important;
|
||||
border-color: $custom-option-border-hover-color;
|
||||
}
|
||||
}
|
||||
.custom-option-content {
|
||||
cursor: $custom-option-cursor;
|
||||
width: 100%;
|
||||
}
|
||||
.form-check-input {
|
||||
background-color: transparent;
|
||||
margin-inline-start: $form-check-padding-start * -1.12;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom option basic
|
||||
.custom-option-basic {
|
||||
.custom-option-content {
|
||||
padding: $custom-option-padding;
|
||||
padding-left: $custom-option-padding + $form-check-padding-start + 0.65em;
|
||||
}
|
||||
.custom-option-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.4375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-option-body {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
// Custom option with icon
|
||||
.custom-option-icon {
|
||||
overflow: hidden;
|
||||
&.checked {
|
||||
i,
|
||||
svg {
|
||||
color: $component-active-bg;
|
||||
}
|
||||
}
|
||||
&:not(.checked) svg {
|
||||
color: $headings-color;
|
||||
}
|
||||
.custom-option-content {
|
||||
text-align: center;
|
||||
padding: $custom-option-padding;
|
||||
}
|
||||
.custom-option-body {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
i {
|
||||
color: $headings-color;
|
||||
&::before {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
svg {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.custom-option-title {
|
||||
display: block;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-medium;
|
||||
color: $headings-color;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
.form-check-input {
|
||||
float: none !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom option with image
|
||||
.custom-option-image {
|
||||
border-width: $custom-option-image-border-width;
|
||||
.custom-option-content {
|
||||
padding: 0;
|
||||
}
|
||||
.custom-option-body {
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
//radio
|
||||
&.custom-option-image-radio {
|
||||
.form-check-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
//check
|
||||
&.custom-option-image-check {
|
||||
position: relative;
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
border: 1px solid transparent;
|
||||
&:checked {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.form-check-input {
|
||||
border-color: $form-check-input-focus-border;
|
||||
border-width: 1px;
|
||||
opacity: 1;
|
||||
&:checked {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL Style
|
||||
|
||||
@include rtl-only {
|
||||
.custom-option {
|
||||
padding-right: 0;
|
||||
}
|
||||
.custom-option-basic {
|
||||
.custom-option-content {
|
||||
padding-right: $custom-option-padding + $form-check-padding-start;
|
||||
padding-left: $custom-option-padding;
|
||||
}
|
||||
}
|
||||
.custom-option-image.custom-option-image-check {
|
||||
.form-check-input {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
modules/Admin/Resources/assets/vendor/scss/_components/_drag-drop.scss
vendored
Normal file
13
modules/Admin/Resources/assets/vendor/scss/_components/_drag-drop.scss
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// * RTL
|
||||
// *******************************************************************************
|
||||
|
||||
@include rtl-only {
|
||||
#sortable-cards {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
#image-list-1,
|
||||
#image-list-2 {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
78
modules/Admin/Resources/assets/vendor/scss/_components/_footer.scss
vendored
Normal file
78
modules/Admin/Resources/assets/vendor/scss/_components/_footer.scss
vendored
Normal file
@ -0,0 +1,78 @@
|
||||
// Footer
|
||||
// *******************************************************************************
|
||||
|
||||
.footer-link {
|
||||
display: inline-block;
|
||||
}
|
||||
.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .content-footer .footer-container {
|
||||
padding-inline: 1.5rem;
|
||||
@include border-top-radius($border-radius);
|
||||
}
|
||||
.content-footer .footer-container {
|
||||
block-size: 54px;
|
||||
}
|
||||
// Light footer
|
||||
.footer-light {
|
||||
color: $navbar-light-color;
|
||||
|
||||
.footer-text {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .footer-link,
|
||||
.active > .footer-link,
|
||||
.footer-link.show,
|
||||
.footer-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: $menu-light-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark footer
|
||||
.footer-dark {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
.footer-text {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .footer-link,
|
||||
.active > .footer-link,
|
||||
.footer-link.show,
|
||||
.footer-link.active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: $menu-dark-border-color;
|
||||
}
|
||||
}
|
||||
13
modules/Admin/Resources/assets/vendor/scss/_components/_include-dark.scss
vendored
Normal file
13
modules/Admin/Resources/assets/vendor/scss/_components/_include-dark.scss
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
// Include Dark
|
||||
// *******************************************************************************
|
||||
|
||||
@import '../_bootstrap-extended/include-dark';
|
||||
|
||||
// Mixins
|
||||
@import './_mixins'; // Components mixins
|
||||
|
||||
//Variables
|
||||
@import '../_custom-variables/components-dark'; // Components custom dark variable (for customization purpose)
|
||||
@import '../_custom-variables/components'; // Components custom variable (for customization purpose)
|
||||
@import 'variables-dark'; // Components dark variable
|
||||
@import 'variables'; // Components variable
|
||||
11
modules/Admin/Resources/assets/vendor/scss/_components/_include.scss
vendored
Normal file
11
modules/Admin/Resources/assets/vendor/scss/_components/_include.scss
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
// Include
|
||||
// *******************************************************************************
|
||||
|
||||
@import '../_bootstrap-extended/include';
|
||||
|
||||
//Mixins
|
||||
@import './_mixins'; // Components mixins
|
||||
|
||||
//Components variables
|
||||
@import '../_custom-variables/components'; // Components variable (for customization purpose)
|
||||
@import 'variables'; // Components variable
|
||||
1181
modules/Admin/Resources/assets/vendor/scss/_components/_layout.scss
vendored
Normal file
1181
modules/Admin/Resources/assets/vendor/scss/_components/_layout.scss
vendored
Normal file
File diff suppressed because it is too large
Load Diff
784
modules/Admin/Resources/assets/vendor/scss/_components/_menu.scss
vendored
Normal file
784
modules/Admin/Resources/assets/vendor/scss/_components/_menu.scss
vendored
Normal file
@ -0,0 +1,784 @@
|
||||
// Menu
|
||||
// *******************************************************************************
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
.app-brand {
|
||||
width: 100%;
|
||||
transition: padding 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
//PS Scrollbar
|
||||
.ps__thumb-y,
|
||||
.ps__rail-y {
|
||||
width: 0.125rem !important;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
right: 0.25rem !important;
|
||||
left: auto !important;
|
||||
background: none !important;
|
||||
|
||||
@include rtl-style {
|
||||
right: auto !important;
|
||||
left: 0.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-y.ps--clicking,
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
width: 0.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-inner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.menu-inner-shadow {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: $navbar-height - (($navbar-height - 3rem) * 0.5);
|
||||
@include media-breakpoint-up($menu-collapsed-layout-breakpoint) {
|
||||
height: 3rem;
|
||||
}
|
||||
@include media-breakpoint-down($menu-collapsed-layout-breakpoint) {
|
||||
height: 1.5rem;
|
||||
}
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
// Hide menu inner shadow in static layout
|
||||
html:not(.layout-menu-fixed) & {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu item
|
||||
|
||||
.menu-item {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.menu-item-animating {
|
||||
transition: height $menu-animation-duration ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item,
|
||||
.menu-header,
|
||||
.menu-divider,
|
||||
.menu-block {
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.menu-header {
|
||||
opacity: 1;
|
||||
transition: opacity $menu-animation-duration ease-in-out;
|
||||
.menu-header-text {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
white-space: nowrap;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Icon
|
||||
.menu-icon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right: $menu-icon-expanded-spacer;
|
||||
line-height: 1;
|
||||
font-size: $menu-icon-expanded-font-size;
|
||||
.menu:not(.menu-no-animation) & {
|
||||
transition: margin-right $menu-animation-duration ease;
|
||||
}
|
||||
|
||||
@include rtl-style {
|
||||
margin-right: 0;
|
||||
margin-left: $menu-icon-expanded-spacer;
|
||||
.menu:not(.menu-no-animation) & {
|
||||
transition: margin-left $menu-animation-duration ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu link
|
||||
.menu-link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 1 auto;
|
||||
margin: 0;
|
||||
|
||||
.menu-item.disabled & {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
// link hover animation
|
||||
.menu:not(.menu-no-animation) & {
|
||||
transition-duration: $menu-animation-duration;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
> :not(.menu-icon) {
|
||||
flex: 0 1 auto;
|
||||
opacity: 1;
|
||||
.menu:not(.menu-no-animation) & {
|
||||
transition: opacity $menu-animation-duration ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sub menu
|
||||
.menu-sub {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.menu:not(.menu-no-animation) & {
|
||||
transition: background-color $menu-animation-duration;
|
||||
}
|
||||
|
||||
.menu-item.open > & {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu toggle open/close arrow
|
||||
.menu-toggle::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
font-family: 'tabler-icons';
|
||||
font-size: $menu-icon-expanded-font-size;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@include ltr-style {
|
||||
content: '\ea61';
|
||||
}
|
||||
@include rtl-style {
|
||||
content: '\ea60';
|
||||
}
|
||||
|
||||
.menu:not(.menu-no-animation) & {
|
||||
transition-duration: $menu-animation-duration;
|
||||
transition-property: -webkit-transform, transform;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu divider
|
||||
.menu-divider {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
// Vertical Menu
|
||||
// *******************************************************************************
|
||||
|
||||
.menu-vertical {
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
// menu expand collapse animation
|
||||
&:not(.menu-no-animation) {
|
||||
transition: width $menu-animation-duration;
|
||||
}
|
||||
|
||||
&,
|
||||
.menu-block,
|
||||
.menu-inner > .menu-item,
|
||||
.menu-inner > .menu-header {
|
||||
width: $menu-width;
|
||||
}
|
||||
|
||||
.menu-inner {
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
|
||||
> .menu-item {
|
||||
margin: $menu-item-spacer 0 0;
|
||||
// menu-link spacing
|
||||
.menu-link {
|
||||
margin: 0 $menu-vertical-link-margin-x;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
padding: $menu-vertical-header-margin-x calc($menu-vertical-link-margin-x * 2) 0.375rem;
|
||||
}
|
||||
.menu-item .menu-link,
|
||||
.menu-block {
|
||||
padding: $menu-vertical-menu-link-padding-y $menu-vertical-link-padding-x;
|
||||
}
|
||||
.menu-item .menu-link {
|
||||
font-size: $menu-font-size;
|
||||
min-height: 38px;
|
||||
> div:not(.badge) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.467;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item .menu-toggle {
|
||||
padding-right: calc(#{$menu-vertical-link-padding-x} + #{$caret-width * 3.2});
|
||||
|
||||
@include rtl-style {
|
||||
padding-right: $menu-vertical-link-padding-x;
|
||||
padding-left: calc(#{$menu-vertical-link-padding-x} + #{$caret-width * 3.2});
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: $menu-vertical-link-padding-x;
|
||||
|
||||
@include rtl-style {
|
||||
right: auto;
|
||||
left: $menu-vertical-link-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item.open:not(.menu-item-closing) > .menu-link:after {
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
|
||||
@include rtl-style {
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
margin-top: $menu-link-spacer-x;
|
||||
margin-bottom: $menu-link-spacer-x;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-sub {
|
||||
.menu-link {
|
||||
padding-top: $menu-vertical-menu-link-padding-y;
|
||||
padding-bottom: $menu-vertical-menu-link-padding-y;
|
||||
}
|
||||
.menu-item {
|
||||
margin: $menu-item-spacer 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: $menu-icon-expanded-width;
|
||||
}
|
||||
|
||||
.menu-sub .menu-icon {
|
||||
margin-right: 0;
|
||||
|
||||
@include rtl-style {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-horizontal-wrapper {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// Levels
|
||||
//
|
||||
|
||||
$menu-first-level-spacer: $menu-vertical-link-padding-x + $menu-icon-expanded-width + $menu-icon-expanded-spacer;
|
||||
|
||||
.menu-sub .menu-link {
|
||||
padding-left: $menu-first-level-spacer;
|
||||
|
||||
@include rtl-style {
|
||||
padding-right: $menu-first-level-spacer;
|
||||
padding-left: $menu-vertical-link-padding-x;
|
||||
}
|
||||
}
|
||||
// Menu levels loop for padding left/right
|
||||
@for $i from 2 through $menu-max-levels {
|
||||
$selector: '';
|
||||
|
||||
@for $l from 1 through $i {
|
||||
$selector: '#{$selector} .menu-sub';
|
||||
}
|
||||
.layout-wrapper:not(.layout-horizontal) & {
|
||||
.menu-inner > .menu-item {
|
||||
#{$selector} .menu-link {
|
||||
padding-left: $menu-first-level-spacer + ($menu-vertical-menu-level-spacer * ($i)) - 0.225;
|
||||
&::before {
|
||||
left: $menu-icon-expanded-left-spacer + ($menu-vertical-menu-level-spacer * $i) - 1.5;
|
||||
@include rtl-style {
|
||||
right: $menu-icon-expanded-left-spacer + ($menu-vertical-menu-level-spacer * $i) - 1.5;
|
||||
left: inherit;
|
||||
}
|
||||
}
|
||||
@include rtl-style {
|
||||
padding-right: $menu-first-level-spacer + ($menu-vertical-menu-level-spacer * ($i)) - 0.225;
|
||||
padding-left: $menu-vertical-link-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical Menu Collapsed
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin layout-menu-collapsed() {
|
||||
width: $menu-collapsed-width;
|
||||
|
||||
.menu-inner > .menu-item {
|
||||
width: $menu-collapsed-width;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-header,
|
||||
.menu-block {
|
||||
position: relative;
|
||||
margin-left: $menu-collapsed-width;
|
||||
padding-right: ($menu-vertical-link-padding-x * 2) - $menu-icon-expanded-spacer;
|
||||
padding-left: $menu-icon-expanded-spacer;
|
||||
width: $menu-width;
|
||||
.menu-header-text {
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1 * ($menu-collapsed-width * 0.66);
|
||||
height: 1px;
|
||||
width: 1.375rem;
|
||||
background-color: $border-color;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
padding-left: $menu-vertical-link-padding-x + 0.38rem;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item div:not(.menu-block) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
}
|
||||
.menu-inner > .menu-item > .menu-sub,
|
||||
.menu-inner > .menu-item.open > .menu-sub {
|
||||
display: none;
|
||||
}
|
||||
.menu-inner > .menu-item > .menu-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.layout-menu-hover) {
|
||||
.menu-inner > .menu-item > .menu-link,
|
||||
.menu-inner > .menu-block,
|
||||
.menu-inner > .menu-header {
|
||||
padding-right: calc(#{$menu-vertical-link-padding-x} + #{$caret-width * 1.2});
|
||||
}
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item > .menu-link .menu-icon {
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin layout-menu-collapsed-rtl() {
|
||||
.menu-block {
|
||||
width: $menu-collapsed-width !important;
|
||||
}
|
||||
.menu-inner > .menu-item > .menu-link {
|
||||
padding-left: $menu-vertical-link-padding-x;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-header,
|
||||
.menu-block {
|
||||
margin-right: $menu-collapsed-width;
|
||||
margin-left: 0;
|
||||
padding-right: $menu-icon-expanded-spacer;
|
||||
padding-left: ($menu-vertical-link-padding-x * 2) - $menu-icon-expanded-spacer;
|
||||
|
||||
&::before {
|
||||
right: -1 * ($menu-collapsed-width * 0.66);
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.layout-menu-hover) {
|
||||
.menu-inner > .menu-item > .menu-link,
|
||||
.menu-inner > .menu-block,
|
||||
.menu-inner > .menu-header {
|
||||
padding-inline: $menu-vertical-link-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item > .menu-link .menu-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
// Only for menu example
|
||||
.menu-collapsed:not(:hover) {
|
||||
@include layout-menu-collapsed();
|
||||
|
||||
@include rtl-style {
|
||||
@include layout-menu-collapsed-rtl();
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
// *******************************************************************************
|
||||
|
||||
.menu-horizontal {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
.menu-inner {
|
||||
overflow: hidden;
|
||||
flex-direction: row;
|
||||
flex: 0 1 100%;
|
||||
> .menu-item.active > .menu-link.menu-toggle {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
.menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item .menu-link {
|
||||
padding: $menu-horizontal-link-padding-y $menu-horizontal-link-padding-x;
|
||||
}
|
||||
|
||||
.menu-item .menu-toggle {
|
||||
padding-right: calc(#{$menu-horizontal-link-padding-x} + #{$caret-width * 3});
|
||||
|
||||
@include rtl-style {
|
||||
padding-right: $menu-horizontal-link-padding-x;
|
||||
padding-left: calc(#{$menu-horizontal-link-padding-x} + #{$caret-width * 3});
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: calc(#{$menu-horizontal-link-padding-x} - #{0.2rem});
|
||||
|
||||
@include rtl-style {
|
||||
right: auto;
|
||||
left: calc(#{$menu-horizontal-link-padding-x} - #{0.2rem});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item > .menu-toggle {
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
|
||||
@include rtl-style {
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
block-size: $menu-vertical-header-margin-y;
|
||||
content: '';
|
||||
inline-size: 100%;
|
||||
inset-block-start: 100%;
|
||||
inset-inline-start: 0;
|
||||
z-index: 2;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.menu-inner > .menu-item > .menu-sub {
|
||||
margin-top: $menu-vertical-header-margin-y;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item:not(.menu-item-closing).open .menu-item.open {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-header,
|
||||
.menu-divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.menu-sub {
|
||||
position: absolute;
|
||||
width: $menu-sub-width;
|
||||
padding: calc($menu-horizontal-item-spacer + $menu-item-spacer) 0;
|
||||
box-shadow: $box-shadow-lg;
|
||||
.menu-item {
|
||||
padding: 1px $menu-link-spacer-x;
|
||||
&.open .menu-link > div::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
z-index: 2;
|
||||
pointer-events: auto;
|
||||
width: 1.0625rem;
|
||||
height: 100%;
|
||||
right: -1.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-sub {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
@include rtl-style {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
padding-top: $menu-horizontal-menu-link-padding-y;
|
||||
padding-bottom: $menu-horizontal-menu-link-padding-y;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item {
|
||||
.menu-sub {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
> .menu-sub {
|
||||
.menu-sub {
|
||||
margin: 0 $menu-horizontal-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.menu-no-animation) .menu-inner .menu-item.open .menu-sub {
|
||||
animation: menuDropdownShow $menu-animation-duration ease-in-out;
|
||||
}
|
||||
|
||||
// Sub menu link padding left
|
||||
.menu-sub .menu-link {
|
||||
padding-left: $menu-horizontal-menu-level-spacer;
|
||||
min-height: 2.375rem;
|
||||
|
||||
@include rtl-style {
|
||||
padding-right: $menu-horizontal-menu-level-spacer;
|
||||
padding-left: $menu-horizontal-link-padding-x;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(lg) {
|
||||
& {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-horizontal-wrapper {
|
||||
overflow: hidden;
|
||||
flex: 0 1 100%;
|
||||
width: 0;
|
||||
|
||||
.menu:not(.menu-no-animation) & .menu-inner {
|
||||
transition: margin $menu-animation-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-horizontal-prev,
|
||||
.menu-horizontal-next {
|
||||
position: relative;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
width: $menu-control-width;
|
||||
|
||||
&::after {
|
||||
content: '\ea61';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
font-family: 'tabler-icons';
|
||||
font-size: $menu-icon-expanded-font-size;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-horizontal-prev::after {
|
||||
border-right: 0;
|
||||
transform: translate(0, -50%) rotate(180deg);
|
||||
|
||||
@include rtl-style {
|
||||
transform: translate(0, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-horizontal-next::after {
|
||||
border-left: 0;
|
||||
transform: translate(50%, -50%) rotate(360deg);
|
||||
|
||||
@include rtl-style {
|
||||
transform: translate(-50%, -50%) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(menuDropdownShow) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-0.5rem);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Menu light/dark color mode
|
||||
// *******************************************************************************
|
||||
|
||||
.menu-light {
|
||||
color: $navbar-light-color;
|
||||
|
||||
.menu-link,
|
||||
.menu-horizontal-prev,
|
||||
.menu-horizontal-next {
|
||||
color: $navbar-light-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item.disabled .menu-link {
|
||||
color: $navbar-light-disabled-color !important;
|
||||
}
|
||||
|
||||
.menu-item.open:not(.menu-item-closing) > .menu-toggle,
|
||||
.menu-item.active > .menu-link {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
|
||||
.menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background: $menu-light-menu-bg;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub,
|
||||
.menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
|
||||
color: $navbar-light-color;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
color: $navbar-light-color;
|
||||
}
|
||||
|
||||
hr,
|
||||
.menu-divider,
|
||||
.menu-inner > .menu-item.open > .menu-sub::before {
|
||||
border-color: $menu-light-border-color !important;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-header::before,
|
||||
.menu-block::before {
|
||||
background-color: $navbar-light-disabled-color;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
|
||||
background-color: $menu-light-border-color;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
|
||||
background-color: $navbar-light-active-color;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background: $navbar-light-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dark {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
.menu-link,
|
||||
.menu-horizontal-prev,
|
||||
.menu-horizontal-next {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item.disabled .menu-link {
|
||||
color: $navbar-dark-disabled-color !important;
|
||||
}
|
||||
|
||||
.menu-item.open:not(.menu-item-closing) > .menu-toggle,
|
||||
.menu-item.active > .menu-link {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
.menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background: $menu-dark-menu-bg;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub,
|
||||
.menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
hr,
|
||||
.menu-divider,
|
||||
.menu-inner > .menu-item.open > .menu-sub::before {
|
||||
border-color: $menu-dark-border-color !important;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-header::before,
|
||||
.menu-block::before {
|
||||
background-color: $navbar-dark-disabled-color;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
|
||||
background-color: $menu-dark-border-color;
|
||||
}
|
||||
|
||||
.menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
|
||||
background-color: $navbar-dark-active-color;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background: $navbar-dark-color !important;
|
||||
}
|
||||
}
|
||||
9
modules/Admin/Resources/assets/vendor/scss/_components/_mixins.scss
vendored
Normal file
9
modules/Admin/Resources/assets/vendor/scss/_components/_mixins.scss
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
@import 'mixins/navbar';
|
||||
@import 'mixins/footer';
|
||||
@import 'mixins/menu';
|
||||
@import 'mixins/avatar';
|
||||
@import 'mixins/text-divider';
|
||||
@import 'mixins/timeline';
|
||||
@import 'mixins/treeview';
|
||||
@import 'mixins/switch';
|
||||
@import 'mixins/misc';
|
||||
239
modules/Admin/Resources/assets/vendor/scss/_components/_switch.scss
vendored
Normal file
239
modules/Admin/Resources/assets/vendor/scss/_components/_switch.scss
vendored
Normal file
@ -0,0 +1,239 @@
|
||||
// Switches
|
||||
// *******************************************************************************
|
||||
|
||||
.switch {
|
||||
margin-right: $switch-spacer-x;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
border-radius: $switch-border-radius;
|
||||
cursor: pointer;
|
||||
|
||||
@include template-switch-size-base(
|
||||
'',
|
||||
$switch-width,
|
||||
$switch-height,
|
||||
$switch-font-size,
|
||||
$switch-label-font-size,
|
||||
$switch-label-line-height,
|
||||
$switch-inner-spacer
|
||||
);
|
||||
|
||||
@include rtl-style {
|
||||
margin-left: $switch-spacer-x;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Input
|
||||
// *******************************************************************************
|
||||
|
||||
.switch-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
// Toggle slider
|
||||
// *******************************************************************************
|
||||
|
||||
.switch-toggle-slider {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
border-radius: $switch-border-radius;
|
||||
background: $switch-off-bg;
|
||||
color: $switch-off-color;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: left, right, background, box-shadow;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-shadow: $form-switch-box-shadow;
|
||||
&::after {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Label switch
|
||||
// *******************************************************************************
|
||||
|
||||
.switch-label {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
color: $switch-label-color;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Checked / Unchecked states
|
||||
.switch-off,
|
||||
.switch-on {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: left, right;
|
||||
}
|
||||
|
||||
.switch-on {
|
||||
left: -100%;
|
||||
|
||||
@include rtl-style {
|
||||
left: auto;
|
||||
right: -100%;
|
||||
}
|
||||
|
||||
.switch-input:not(:checked) ~ .switch-toggle-slider & {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-off {
|
||||
left: 0;
|
||||
|
||||
@include rtl-style {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Checked state
|
||||
.switch-input:checked ~ .switch-toggle-slider {
|
||||
.switch-on {
|
||||
left: 0;
|
||||
|
||||
@include rtl-style {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-off {
|
||||
left: 100%;
|
||||
color: transparent;
|
||||
|
||||
@include rtl-style {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toggler
|
||||
// *******************************************************************************
|
||||
|
||||
.switch-toggle-slider::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: block;
|
||||
border-radius: 999px;
|
||||
background: $switch-holder-bg;
|
||||
box-shadow: $switch-holder-shadow;
|
||||
transition-duration: 0.2s;
|
||||
transition-property: left, right, background;
|
||||
|
||||
@include rtl-style {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Stacked switches
|
||||
// *******************************************************************************
|
||||
|
||||
.switches-stacked {
|
||||
@include clearfix;
|
||||
|
||||
.switch {
|
||||
display: block;
|
||||
@include ltr-style {
|
||||
margin-right: 0;
|
||||
}
|
||||
@include rtl-style {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $switch-spacer-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Square
|
||||
// *******************************************************************************
|
||||
|
||||
.switch-square,
|
||||
.switch-square .switch-toggle-slider {
|
||||
@if $enable-rounded {
|
||||
border-radius: $switch-square-border-radius;
|
||||
} @else {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-square .switch-toggle-slider::after {
|
||||
@if $enable-rounded {
|
||||
border-radius: calc(#{$switch-square-border-radius} - 2px);
|
||||
} @else {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
// *******************************************************************************
|
||||
|
||||
.switch-input:disabled {
|
||||
~ .switch-toggle-slider {
|
||||
opacity: $switch-disabled-opacity;
|
||||
}
|
||||
|
||||
~ .switch-label {
|
||||
color: $switch-label-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Switch Sizes
|
||||
// *******************************************************************************
|
||||
|
||||
@include template-switch-size(
|
||||
'sm',
|
||||
$switch-width-sm,
|
||||
$switch-height-sm,
|
||||
$switch-font-size,
|
||||
$switch-label-font-size-sm,
|
||||
$switch-label-line-height-sm,
|
||||
$switch-inner-spacer-sm
|
||||
);
|
||||
@include template-switch-size(
|
||||
'lg',
|
||||
$switch-width-lg,
|
||||
$switch-height-lg,
|
||||
$switch-font-size,
|
||||
$switch-label-font-size-lg,
|
||||
$switch-label-line-height-lg
|
||||
);
|
||||
|
||||
// Variations
|
||||
// *******************************************************************************
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color != primary and $color != light {
|
||||
@include template-switch-variant('.switch-#{$color}', $value);
|
||||
}
|
||||
}
|
||||
|
||||
// Validation states
|
||||
// *******************************************************************************
|
||||
|
||||
.switch .valid-feedback,
|
||||
.switch .invalid-feedback {
|
||||
padding-left: $switch-gutter;
|
||||
}
|
||||
|
||||
@include template-switch-validation-state('valid', $form-feedback-valid-color);
|
||||
@include template-switch-validation-state('invalid', $form-feedback-invalid-color);
|
||||
180
modules/Admin/Resources/assets/vendor/scss/_components/_text-divider.scss
vendored
Normal file
180
modules/Admin/Resources/assets/vendor/scss/_components/_text-divider.scss
vendored
Normal file
@ -0,0 +1,180 @@
|
||||
// Divider
|
||||
// *******************************************************************************
|
||||
|
||||
@import '../../scss/_custom-variables/libs';
|
||||
|
||||
.divider {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: $divider-margin-y $divider-margin-x;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.divider-text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: $divider-font-size;
|
||||
padding: $divider-text-padding-y $divider-text-padding-x;
|
||||
color: $divider-text-color;
|
||||
|
||||
i {
|
||||
font-size: $divider-icon-size;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100vw;
|
||||
border-top: 1px solid $divider-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
&.text-start {
|
||||
.divider-text {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.text-end {
|
||||
.divider-text {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&.text-start-center {
|
||||
.divider-text {
|
||||
left: -25%;
|
||||
}
|
||||
}
|
||||
&.text-end-center {
|
||||
.divider-text {
|
||||
right: -25%;
|
||||
}
|
||||
}
|
||||
// Dotted Divider
|
||||
&.divider-dotted .divider-text:before,
|
||||
&.divider-dotted .divider-text:after,
|
||||
&.divider-dotted:before,
|
||||
&.divider-dotted:after {
|
||||
border-style: dotted;
|
||||
border-width: 0 1px 1px;
|
||||
border-color: $divider-color;
|
||||
}
|
||||
|
||||
// Dashed Divider
|
||||
&.divider-dashed .divider-text:before,
|
||||
&.divider-dashed .divider-text:after,
|
||||
&.divider-dashed:before,
|
||||
&.divider-dashed:after {
|
||||
border-style: dashed;
|
||||
border-width: 0 1px 1px;
|
||||
border-color: $divider-color;
|
||||
}
|
||||
|
||||
// For Vertical Divider
|
||||
&.divider-vertical {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
margin: unset;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 48%;
|
||||
border-left: 1px solid $divider-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
bottom: 50%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Dashed Vertical Divider
|
||||
&.divider-dashed {
|
||||
&:before,
|
||||
&:after {
|
||||
border-width: 1px 1px 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dotted Vertical Divider
|
||||
&.divider-dotted {
|
||||
&:before,
|
||||
&:after {
|
||||
border-width: 1px 1px 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// For Vertical Divider text
|
||||
.divider-text {
|
||||
background-color: $card-bg;
|
||||
z-index: 1;
|
||||
padding: 0.5125rem;
|
||||
&:before,
|
||||
&:after {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
// For card statistics Sales Overview divider
|
||||
.badge-divider-bg {
|
||||
padding: $divider-text-padding-x - 0.687rem $divider-text-padding-x - 0.748rem;
|
||||
border-radius: 50%;
|
||||
font-size: $divider-font-size - 0.1875rem;
|
||||
background-color: $gray-50;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL
|
||||
@include rtl-only {
|
||||
.divider {
|
||||
&.text-start-center {
|
||||
.divider-text {
|
||||
right: -25%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
&.text-end-center {
|
||||
.divider-text {
|
||||
left: -25%;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
&.text-start {
|
||||
.divider-text {
|
||||
padding-right: 0;
|
||||
padding-left: $divider-text-padding-x;
|
||||
}
|
||||
}
|
||||
&.text-end {
|
||||
.divider-text {
|
||||
padding-left: 0;
|
||||
padding-right: $divider-text-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For Contextual Colors
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color !=primary and $color !=light {
|
||||
@include template-text-divider-variant('.divider-#{$color}', $value);
|
||||
}
|
||||
}
|
||||
363
modules/Admin/Resources/assets/vendor/scss/_components/_timeline.scss
vendored
Normal file
363
modules/Admin/Resources/assets/vendor/scss/_components/_timeline.scss
vendored
Normal file
@ -0,0 +1,363 @@
|
||||
// Timeline
|
||||
// *******************************************************************************
|
||||
|
||||
@import '../../scss/_custom-variables/libs';
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.timeline-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
> *:first-child {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
// End Indicator
|
||||
.timeline-end-indicator {
|
||||
position: absolute;
|
||||
bottom: -1.35rem;
|
||||
left: -0.65rem;
|
||||
|
||||
i {
|
||||
font-size: $timeline-end-indicator-font-size;
|
||||
color: $timeline-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Timeline Item
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 1.4rem;
|
||||
|
||||
.timeline-event {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: $timeline-item-min-height;
|
||||
background-color: $timeline-item-bg-color;
|
||||
border-radius: $timeline-item-border-radius;
|
||||
padding: $timeline-item-padding-y $timeline-item-padding-x $timeline-item-padding-y - 0.1625;
|
||||
|
||||
.timeline-event-time {
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
font-size: $timeline-event-time-size;
|
||||
color: $timeline-event-time-color;
|
||||
}
|
||||
}
|
||||
// Timeline Point Indicator
|
||||
|
||||
.timeline-indicator,
|
||||
.timeline-indicator-advanced {
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
top: 0.64rem;
|
||||
z-index: 2;
|
||||
height: $timeline-indicator-size;
|
||||
width: $timeline-indicator-size;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.timeline-indicator {
|
||||
box-shadow: 0 0 0 10px $body-bg;
|
||||
}
|
||||
|
||||
//For advanced Timeline Indicator Background
|
||||
.timeline-indicator-advanced {
|
||||
background-color: $card-bg;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timeline-point {
|
||||
position: absolute;
|
||||
left: -0.38rem;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
height: $timeline-point-size;
|
||||
width: $timeline-point-size;
|
||||
border-radius: 50%;
|
||||
background-color: $timeline-point-color;
|
||||
box-shadow: 0 0 0 10px $card-bg;
|
||||
}
|
||||
|
||||
// Transparent Timeline Item
|
||||
&.timeline-item-transparent {
|
||||
.timeline-event {
|
||||
top: -0.9rem;
|
||||
background-color: transparent;
|
||||
|
||||
@include ltr-style {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.timeline-event-shadow {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Timeline outline
|
||||
&.timeline-outline {
|
||||
.timeline-item {
|
||||
.timeline-point {
|
||||
outline: unset;
|
||||
background-color: $card-bg !important;
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Timeline Center
|
||||
&.timeline-center {
|
||||
.timeline-end-indicator {
|
||||
bottom: -1.4rem;
|
||||
left: 50%;
|
||||
margin-left: 0.55rem;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
width: 50%;
|
||||
clear: both;
|
||||
&.timeline-item-left,
|
||||
&:nth-of-type(odd):not(.timeline-item-left):not(.timeline-item-right) {
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
padding-right: 2.25rem;
|
||||
padding-bottom: 2.5rem;
|
||||
border-left: 0;
|
||||
border-right: 1px solid $timeline-border-color;
|
||||
.timeline-event {
|
||||
.timeline-event-time {
|
||||
right: -10.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-point {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-item-right,
|
||||
&:nth-of-type(even):not(.timeline-item-left):not(.timeline-item-right) {
|
||||
float: right;
|
||||
right: 1px;
|
||||
padding-left: 2.25rem;
|
||||
padding-bottom: 2.5rem;
|
||||
border-left: 1px solid $timeline-border-color;
|
||||
|
||||
.timeline-event {
|
||||
.timeline-event-time {
|
||||
left: -10.2rem;
|
||||
}
|
||||
.timeline-point {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-point {
|
||||
left: 50%;
|
||||
margin-left: -0.6875rem;
|
||||
}
|
||||
.timeline-point-indicator {
|
||||
left: 50%;
|
||||
margin-left: -0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// To remove arrows (visible while switching tabs) in widgets
|
||||
&.timeline-advance {
|
||||
.timeline-item {
|
||||
.timeline-event {
|
||||
&:before,
|
||||
&:after {
|
||||
border: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LTR only
|
||||
@include ltr-only {
|
||||
.timeline:not(.timeline-center) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.timeline-item {
|
||||
border-left: 1px solid $timeline-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// RTL
|
||||
@include rtl-only {
|
||||
.timeline:not(.timeline-center) {
|
||||
padding-right: 0.5rem;
|
||||
.timeline-item {
|
||||
border-right: 1px solid $timeline-border-color;
|
||||
}
|
||||
|
||||
.timeline-end-indicator {
|
||||
left: auto;
|
||||
right: -0.75rem;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding-left: 0;
|
||||
padding-right: 2rem;
|
||||
border-right: 1px solid $timeline-border-color;
|
||||
|
||||
&.timeline-item-transparent {
|
||||
.timeline-event {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-point {
|
||||
right: -0.38rem;
|
||||
left: auto;
|
||||
}
|
||||
.timeline-indicator {
|
||||
right: -0.75rem;
|
||||
left: auto;
|
||||
}
|
||||
.timeline-indicator-advanced {
|
||||
right: -1rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.timeline.timeline-center .timeline-item {
|
||||
&.timeline-item-left,
|
||||
&:nth-of-type(odd):not(.timeline-item-left):not(.timeline-item-right) {
|
||||
.timeline-indicator {
|
||||
left: calc(100% - calc(#{$timeline-indicator-size}/ 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// To Change Timeline Center's Alignment om small Screen
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.timeline {
|
||||
&.timeline-center {
|
||||
.timeline-end-indicator {
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
border-right: 0 !important;
|
||||
left: 1rem;
|
||||
&:not(:last-child) {
|
||||
border-left: 1px solid $timeline-border-color !important;
|
||||
}
|
||||
float: left !important;
|
||||
width: 100%;
|
||||
padding-left: 3rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
|
||||
.timeline-event {
|
||||
.timeline-event-time {
|
||||
top: -1.7rem;
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
}
|
||||
}
|
||||
.timeline-point {
|
||||
left: -0.7rem !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.timeline-point-indicator {
|
||||
left: 0 !important;
|
||||
margin-left: -0.3125rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// RTL: Timeline Center's Alignment om small Screen
|
||||
@include rtl-only {
|
||||
.timeline {
|
||||
&.timeline-center {
|
||||
.timeline-item {
|
||||
border-left: 0 !important;
|
||||
right: 1rem !important;
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid $timeline-border-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
float: right !important;
|
||||
width: 100%;
|
||||
padding-right: 3.5rem !important;
|
||||
padding-left: 1.5rem !important;
|
||||
.timeline-event {
|
||||
.timeline-event-time {
|
||||
top: -1.2rem;
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
.timeline-point {
|
||||
right: -0.7rem !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.timeline .timeline-item .timeline-indicator,
|
||||
.timeline .timeline-item .timeline-indicator-advanced {
|
||||
@include rtl-style {
|
||||
left: auto;
|
||||
right: -0.6875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include rtl-only {
|
||||
.timeline-center {
|
||||
.timeline-item {
|
||||
padding-left: 0;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
.timeline {
|
||||
.timeline-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
// For Contextual Colors
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color !=primary and $color !=light {
|
||||
@include template-timeline-point-variant(
|
||||
'.timeline-point-#{$color}',
|
||||
if($color== 'dark' and $dark-style, $light, $value)
|
||||
);
|
||||
@include template-timeline-indicator-variant(
|
||||
'.timeline-indicator-#{$color}',
|
||||
if($color== 'dark' and $dark-style, $light, $value)
|
||||
);
|
||||
}
|
||||
}
|
||||
25
modules/Admin/Resources/assets/vendor/scss/_components/_variables-dark.scss
vendored
Normal file
25
modules/Admin/Resources/assets/vendor/scss/_components/_variables-dark.scss
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
// Dark Layout Variables
|
||||
|
||||
// ! _variable-dark.scss file overrides _variable.scss file.
|
||||
|
||||
// Avatar
|
||||
// *******************************************************************************
|
||||
$avatar-bg: #373b50 !default; // (C)
|
||||
|
||||
// Menu
|
||||
// *******************************************************************************
|
||||
$menu-horizontal-box-shadow: 0px 1px 4px 0px rgba($shadow-bg, 0.1) !default;
|
||||
|
||||
// switch
|
||||
// *******************************************************************************
|
||||
$switch-off-color: rgba-to-hex($gray-600, $rgba-to-hex-bg) !default;
|
||||
$switch-off-bg: rgba-to-hex(rgba($base, 0.1), $rgba-to-hex-bg) !default;
|
||||
$switch-off-border: rgba-to-hex(rgba($base, 0.1), $rgba-to-hex-bg) !default;
|
||||
// Timeline
|
||||
// *******************************************************************************
|
||||
$timeline-border-color: rgba-to-hex(rgba($base, 0.12), $rgba-to-hex-bg) !default;
|
||||
$timeline-event-time-color: $body-color !default;
|
||||
|
||||
// Text Divider
|
||||
// *******************************************************************************
|
||||
$divider-color: $border-color !default;
|
||||
168
modules/Admin/Resources/assets/vendor/scss/_components/_variables.scss
vendored
Normal file
168
modules/Admin/Resources/assets/vendor/scss/_components/_variables.scss
vendored
Normal file
@ -0,0 +1,168 @@
|
||||
// Common
|
||||
// *******************************************************************************
|
||||
|
||||
$ui-star-size: 1.1em !default;
|
||||
$ui-stars-spacer: -0.1em !default;
|
||||
$ui-star-filled-color: $yellow !default;
|
||||
|
||||
// Navbar (custom navbar)
|
||||
// *******************************************************************************
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-suggestion-width: 100% !default;
|
||||
$navbar-suggestion-height: 28rem !default;
|
||||
$navbar-suggestion-border-radius: $border-radius !default;
|
||||
$navbar-dropdown-width: 22rem !default;
|
||||
$navbar-dropdown-content-height: 24.08rem !default;
|
||||
$navbar-notifications-dropdown-item-padding-y: 0.75rem !default;
|
||||
$navbar-notifications-dropdown-item-padding-x: 1rem !default;
|
||||
|
||||
// Menu
|
||||
// *******************************************************************************
|
||||
|
||||
$menu-width: 16.25rem !default;
|
||||
$menu-collapsed-width: 4.375rem !default;
|
||||
$menu-collapsed-layout-breakpoint: xl !default;
|
||||
|
||||
$menu-font-size: $font-size-base !default;
|
||||
|
||||
$menu-item-spacer: 0.375rem !default;
|
||||
|
||||
$menu-vertical-link-margin-x: 0.75rem !default;
|
||||
$menu-link-spacer-x: 0.5rem !default;
|
||||
|
||||
$menu-vertical-link-padding-y: 0.5rem !default;
|
||||
$menu-vertical-link-padding-x: 0.75rem !default;
|
||||
$menu-vertical-menu-link-padding-y: 0.5rem !default;
|
||||
$menu-vertical-menu-level-spacer: 0.5rem !default;
|
||||
|
||||
$menu-vertical-header-margin-y: 0.5rem !default;
|
||||
$menu-vertical-header-margin-x: 1.25rem !default;
|
||||
|
||||
$menu-horizontal-spacer-x: 0.375rem !default;
|
||||
$menu-horizontal-item-spacer: 0.25rem !default;
|
||||
$menu-horizontal-link-padding-y: 0.5rem !default;
|
||||
$menu-horizontal-link-padding-x: 1rem !default;
|
||||
$menu-horizontal-menu-link-padding-y: 0.5rem !default;
|
||||
$menu-horizontal-menu-level-spacer: 2.75rem !default;
|
||||
$menu-horizontal-box-shadow: 0px 1px 4px 0px rgba($black, 0.1) !default;
|
||||
|
||||
$menu-sub-width: $menu-width !default;
|
||||
$menu-control-width: 2.25rem !default;
|
||||
$menu-control-arrow-size: 0.5rem !default;
|
||||
|
||||
$menu-icon-expanded-width: 1.375rem !default;
|
||||
$menu-icon-expanded-left-spacer: 2.25rem !default;
|
||||
$menu-icon-expanded-font-size: 1.375rem !default;
|
||||
$menu-icon-expanded-spacer: 0.5rem !default;
|
||||
|
||||
$menu-animation-duration: 0.3s !default;
|
||||
$menu-max-levels: 5 !default;
|
||||
|
||||
$menu-dark-border-color: rgba(255, 255, 255, 0.2) !default;
|
||||
$menu-dark-menu-bg: rgba(0, 0, 0, 0.06) !default;
|
||||
$menu-light-border-color: rgba(0, 0, 0, 0.06) !default;
|
||||
$menu-light-menu-bg: rgba(0, 0, 0, 0.05) !default;
|
||||
|
||||
// Custom Options
|
||||
// *******************************************************************************
|
||||
|
||||
$custom-option-padding: 1.067em !default;
|
||||
$custom-option-cursor: pointer !default;
|
||||
$custom-option-border-color: $border-color !default;
|
||||
$custom-option-border-width: 1px !default;
|
||||
$custom-option-image-border-width: 2px !default;
|
||||
$custom-option-border-hover-color: $input-border-hover-color !default;
|
||||
|
||||
// Switches
|
||||
// *******************************************************************************
|
||||
|
||||
$switch-font-size: 0.625rem !default;
|
||||
$switch-border-radius: 30rem !default;
|
||||
|
||||
$switch-width: 2.5rem !default;
|
||||
$switch-width-sm: 1.875rem !default;
|
||||
$switch-width-lg: 3.25rem !default;
|
||||
|
||||
$switch-height: 1.35rem !default;
|
||||
$switch-height-sm: 1.125rem !default;
|
||||
$switch-height-lg: 1.75rem !default;
|
||||
|
||||
$switch-label-font-size: $font-size-base !default;
|
||||
$switch-label-font-size-sm: $font-size-xs !default;
|
||||
$switch-label-font-size-lg: $font-size-lg !default;
|
||||
|
||||
$switch-label-line-height: 1.4 !default;
|
||||
$switch-label-line-height-sm: 1.6 !default;
|
||||
$switch-label-line-height-lg: 1.47 !default;
|
||||
|
||||
$switch-spacer-x: 0.75rem !default;
|
||||
$switch-spacer-y: 0.75rem !default;
|
||||
$switch-gutter: 0.5rem !default;
|
||||
$switch-inner-spacer: 0.25rem !default;
|
||||
$switch-inner-spacer-sm: 0.17rem !default;
|
||||
|
||||
$switch-square-border-radius: $border-radius !default;
|
||||
|
||||
$switch-label-color: $headings-color !default;
|
||||
$switch-label-disabled-color: $text-muted !default;
|
||||
$switch-disabled-opacity: 0.45 !default;
|
||||
|
||||
$switch-off-color: $gray-400 !default;
|
||||
$switch-off-bg: rgba-to-hex($gray-100, $rgba-to-hex-bg) !default;
|
||||
$switch-off-border: rgba-to-hex($gray-100, $rgba-to-hex-bg) !default;
|
||||
$switch-holder-bg: $white !default;
|
||||
$switch-holder-shadow: $box-shadow-xs !default;
|
||||
$switch-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||
|
||||
// Avatars
|
||||
// *******************************************************************************
|
||||
|
||||
$avatar-size-xl: 4rem !default;
|
||||
$avatar-size-lg: 3.5rem !default;
|
||||
$avatar-size-md: 3rem !default;
|
||||
$avatar-size: 2.5rem !default; // Default
|
||||
$avatar-size-sm: 2rem !default;
|
||||
$avatar-size-xs: 1.5rem !default;
|
||||
|
||||
$avatar-initial-xl: 1.875rem !default;
|
||||
$avatar-initial-lg: 1.5rem !default;
|
||||
$avatar-initial-md: 1.125rem !default;
|
||||
$avatar-initial: $font-size-base !default;
|
||||
$avatar-initial-sm: 0.8125rem !default;
|
||||
$avatar-initial-xs: 0.625rem !default;
|
||||
|
||||
$avatar-group-border: $card-bg !default;
|
||||
$avatar-bg: #eeedf0 !default; // (C)
|
||||
|
||||
// Timeline
|
||||
// *******************************************************************************
|
||||
|
||||
$timeline-border-color: $border-color !default;
|
||||
|
||||
$timeline-indicator-size: 2rem !default;
|
||||
$timeline-point-size: 0.75rem !default;
|
||||
$timeline-point-color: $primary !default;
|
||||
$timeline-point-indicator-color: $primary !default;
|
||||
$timeline-end-indicator-font-size: 1.5rem !default;
|
||||
$timeline-item-min-height: 4rem !default;
|
||||
$timeline-item-padding-x: 0 !default;
|
||||
$timeline-item-padding-y: 0.5rem !default;
|
||||
$timeline-item-bg-color: $card-bg !default;
|
||||
$timeline-item-border-radius: $border-radius !default;
|
||||
|
||||
$timeline-event-time-size: 0.85rem !default;
|
||||
$timeline-event-time-color: $text-muted !default;
|
||||
|
||||
// Text Divider
|
||||
// *******************************************************************************
|
||||
$divider-color: $gray-200 !default;
|
||||
|
||||
$divider-margin-y: 1rem !default;
|
||||
$divider-margin-x: 0 !default;
|
||||
|
||||
$divider-text-padding-y: 0rem !default;
|
||||
$divider-text-padding-x: 1rem !default;
|
||||
|
||||
$divider-font-size: $font-size-base !default;
|
||||
$divider-text-color: $headings-color !default;
|
||||
$divider-icon-size: 1.25rem !default;
|
||||
29
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_app-brand.scss
vendored
Normal file
29
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_app-brand.scss
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
// Within menu
|
||||
@mixin template-app-brand-collapsed() {
|
||||
.app-brand {
|
||||
width: $menu-collapsed-width;
|
||||
}
|
||||
|
||||
.app-brand-logo,
|
||||
.app-brand-link,
|
||||
.app-brand-text {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.app-brand-logo ~ .app-brand-text,
|
||||
.app-brand .layout-menu-toggle {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.app-brand-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-brand-img-collapsed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
22
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_avatar.scss
vendored
Normal file
22
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_avatar.scss
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
// Avatar
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-avatar-style($height, $width, $font-size, $status-indicator-position: 2px) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
.avatar-initial {
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
&.avatar-online,
|
||||
&.avatar-offline,
|
||||
&.avatar-away,
|
||||
&.avatar-busy {
|
||||
&:after {
|
||||
width: $width * 0.2;
|
||||
height: $height * 0.2;
|
||||
right: $status-indicator-position;
|
||||
}
|
||||
}
|
||||
}
|
||||
47
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_footer.scss
vendored
Normal file
47
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_footer.scss
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
// Footer
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-footer-style($parent, $bg, $color: null, $active-color: null, $border: null) {
|
||||
$colors: get-navbar-prop($bg, $active-color, $color, $border);
|
||||
|
||||
#{$parent} {
|
||||
color: map-get($colors, color);
|
||||
.layout-footer-fixed .layout-horizontal & {
|
||||
background-color: map-get($colors, bg) !important;
|
||||
}
|
||||
|
||||
.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) & {
|
||||
.footer-container {
|
||||
background-color: map-get($colors, bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: map-get($colors, color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: map-get($colors, disabled-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
|
||||
.show > .footer-link,
|
||||
.active > .footer-link,
|
||||
.footer-link.show,
|
||||
.footer-link.active {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: map-get($colors, border);
|
||||
}
|
||||
}
|
||||
}
|
||||
133
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_menu.scss
vendored
Normal file
133
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_menu.scss
vendored
Normal file
@ -0,0 +1,133 @@
|
||||
// Menu
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-menu-style($parent, $bg, $color: null, $active-color: null, $border: null, $active-bg: null) {
|
||||
$colors: get-navbar-prop($bg, $active-color, $color, $border);
|
||||
$contrast-percent: map-get($colors, contrast-percent);
|
||||
|
||||
@if not $active-bg {
|
||||
$active-bg: rgba-to-hex(
|
||||
rgba(map-get($colors, bg), 1 - if($contrast-percent < 0.75, 0.025, 0.05)),
|
||||
if($contrast-percent > 0.25, #fff, #000)
|
||||
);
|
||||
}
|
||||
|
||||
$menu-active-bg: linear-gradient(270deg, rgba($active-bg, 0.7) 0%, $active-bg 100%);
|
||||
$menu-active-bg-rtl: linear-gradient(-270deg, rgba($active-bg, 0.7) 0%, $active-bg 100%);
|
||||
$horizontal-active-bg: rgba-to-hex(rgba($active-bg, 0.16), $bg);
|
||||
|
||||
#{$parent} {
|
||||
background-color: map-get($colors, bg) !important;
|
||||
&.menu-horizontal {
|
||||
background-color: rgba(map-get($colors, bg), 0.95) !important;
|
||||
}
|
||||
color: map-get($colors, color);
|
||||
|
||||
.menu-link,
|
||||
.menu-horizontal-prev,
|
||||
.menu-horizontal-next {
|
||||
color: map-get($colors, color);
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
}
|
||||
.menu-toggle::after {
|
||||
color: map-get($colors, color);
|
||||
}
|
||||
|
||||
.menu-item.disabled .menu-link,
|
||||
.menu-horizontal-prev.disabled,
|
||||
.menu-horizontal-next.disabled {
|
||||
color: map-get($colors, disabled-color) !important;
|
||||
}
|
||||
|
||||
.menu-item.open:not(.menu-item-closing) > .menu-toggle,
|
||||
.menu-item.active > .menu-link {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
|
||||
//vertical menu active item bg color
|
||||
&.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background: $menu-active-bg;
|
||||
box-shadow: 0px 2px 6px 0px rgba($active-bg, 0.3);
|
||||
color: color-contrast($active-bg) !important;
|
||||
&.menu-toggle::after {
|
||||
color: color-contrast($active-bg) !important;
|
||||
}
|
||||
@if $rtl-support {
|
||||
[dir='rtl'] & {
|
||||
background: $menu-active-bg-rtl !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//-
|
||||
&.menu-horizontal {
|
||||
.menu-inner > .menu-item.active > .menu-link.menu-toggle {
|
||||
background: $menu-active-bg;
|
||||
color: color-contrast($active-bg) !important;
|
||||
box-shadow: 0px 2px 6px 0px rgba($active-bg, 0.3);
|
||||
&.menu-toggle::after {
|
||||
color: color-contrast($active-bg) !important;
|
||||
}
|
||||
@if $rtl-support {
|
||||
[dir='rtl'] & {
|
||||
background: $menu-active-bg-rtl;
|
||||
box-shadow: 0px 2px 6px 0px rgba($active-bg, 0.3);
|
||||
color: color-contrast($active-bg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-inner .menu-item:not(.menu-item-closing) > .menu-sub,
|
||||
.menu-inner .menu-item.open > .menu-toggle {
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
.menu-item.active > .menu-link:not(.menu-toggle) {
|
||||
background: $horizontal-active-bg;
|
||||
color: $active-bg !important;
|
||||
}
|
||||
}
|
||||
.menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub,
|
||||
.menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
|
||||
background: transparent;
|
||||
color: color-contrast($active-bg);
|
||||
}
|
||||
|
||||
.menu-inner-shadow {
|
||||
background: linear-gradient($bg 41%, rgba($bg, 0.11) 95%, rgba($bg, 0));
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
color: map-get($colors, muted-color);
|
||||
}
|
||||
|
||||
hr,
|
||||
.menu-divider,
|
||||
.menu-inner > .menu-item.open > .menu-sub::before {
|
||||
border-color: map-get($colors, border) !important;
|
||||
}
|
||||
|
||||
.menu-block::before {
|
||||
background-color: map-get($colors, muted-color);
|
||||
}
|
||||
|
||||
.ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking > .ps__thumb-y {
|
||||
background: rgba(
|
||||
map-get($colors, active-color),
|
||||
if($contrast-percent > 0.75, map-get($colors, opacity) - 0.4, map-get($colors, opacity) - 0.2)
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_misc.scss
vendored
Normal file
6
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_misc.scss
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
// SVG Color
|
||||
@mixin template-svg-color($background) {
|
||||
.svg-illustration svg {
|
||||
fill: $background;
|
||||
}
|
||||
}
|
||||
90
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_navbar.scss
vendored
Normal file
90
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_navbar.scss
vendored
Normal file
@ -0,0 +1,90 @@
|
||||
// Navbar
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-navbar-style($parent, $bg, $color: null, $active-color: null, $border: null) {
|
||||
$colors: get-navbar-prop($bg, $active-color, $color, $border);
|
||||
|
||||
#{$parent} {
|
||||
background-color: rgba(map-get($colors, bg), 0.88) !important;
|
||||
color: map-get($colors, color);
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-brand a {
|
||||
color: map-get($colors, active-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar search color
|
||||
.navbar-search-wrapper {
|
||||
.navbar-search-icon,
|
||||
.search-input {
|
||||
color: map-get($colors, color);
|
||||
}
|
||||
}
|
||||
.search-input-wrapper {
|
||||
.search-input,
|
||||
.search-toggler {
|
||||
background-color: $bg !important;
|
||||
color: map-get($colors, color);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
> .nav-link,
|
||||
> .nav-item > .nav-link,
|
||||
> .nav > .nav-item > .nav-link {
|
||||
color: map-get($colors, color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: map-get($colors, disabled-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: map-get($colors, color);
|
||||
border-color: map-get($colors, border);
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: if(
|
||||
map-get($colors, contrast-percent) > 0.75,
|
||||
$navbar-light-toggler-icon-bg,
|
||||
$navbar-dark-toggler-icon-bg
|
||||
);
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: map-get($colors, color);
|
||||
|
||||
a {
|
||||
color: map-get($colors, active-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: map-get($colors, active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: map-get($colors, border);
|
||||
}
|
||||
}
|
||||
}
|
||||
179
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_switch.scss
vendored
Normal file
179
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_switch.scss
vendored
Normal file
@ -0,0 +1,179 @@
|
||||
// * Switches
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-switch-size-base(
|
||||
$size,
|
||||
$width,
|
||||
$height,
|
||||
$font-size,
|
||||
$form-label-font-size,
|
||||
$label-line-height,
|
||||
$inner-spacer
|
||||
) {
|
||||
min-height: $height;
|
||||
|
||||
font-size: $form-label-font-size;
|
||||
line-height: $label-line-height;
|
||||
|
||||
$delta: 0;
|
||||
$line-height-computed: $form-label-font-size * $label-line-height;
|
||||
.switch-label:first-child {
|
||||
padding-right: $switch-gutter;
|
||||
}
|
||||
.switch-input ~ .switch-label {
|
||||
padding-left: $width + $switch-gutter;
|
||||
}
|
||||
|
||||
.switch-toggle-slider {
|
||||
width: $width;
|
||||
height: $height - ($delta * 2);
|
||||
font-size: $font-size;
|
||||
line-height: $height;
|
||||
border: 1px solid transparent;
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
font-size: $form-label-font-size;
|
||||
@if ($size== 'lg') {
|
||||
top: -2px;
|
||||
} @else if ($size== 'sm') {
|
||||
top: -2px;
|
||||
} @else {
|
||||
top: -1.35px;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($line-height-computed>$height) {
|
||||
top: (($line-height-computed - $height) * 0.5) + $delta;
|
||||
} @else {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
@if ($line-height-computed < $height) {
|
||||
top: ($height - $line-height-computed) * 0.5;
|
||||
} @else {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-toggle-slider::after {
|
||||
left: $width - $height - 0.1;
|
||||
}
|
||||
|
||||
.switch-toggle-slider::after {
|
||||
margin-left: $inner-spacer;
|
||||
width: ceil(rem-to-px($height - $inner-spacer * 2));
|
||||
height: ceil(rem-to-px($height - $inner-spacer * 2));
|
||||
}
|
||||
|
||||
.switch-on {
|
||||
padding-left: $inner-spacer;
|
||||
padding-right: $height - $inner-spacer;
|
||||
}
|
||||
|
||||
.switch-off {
|
||||
padding-left: $height - $inner-spacer;
|
||||
padding-right: $inner-spacer;
|
||||
}
|
||||
|
||||
@if $rtl-support {
|
||||
[dir='rtl'] & .switch-label {
|
||||
padding-right: $width + $switch-gutter;
|
||||
padding-left: 0;
|
||||
}
|
||||
[dir='rtl'] & .switch-input:checked ~ .switch-toggle-slider::after {
|
||||
left: auto;
|
||||
right: $width - $height - 0.15;
|
||||
}
|
||||
|
||||
[dir='rtl'] & .switch-toggle-slider {
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
margin-right: $inner-spacer;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] & .switch-on {
|
||||
padding-left: $height - $inner-spacer;
|
||||
padding-right: $inner-spacer;
|
||||
}
|
||||
|
||||
[dir='rtl'] & .switch-off {
|
||||
padding-left: $inner-spacer;
|
||||
padding-right: $height - $inner-spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Switch size
|
||||
@mixin template-switch-size(
|
||||
$size,
|
||||
$width,
|
||||
$height,
|
||||
$font-size,
|
||||
$form-label-font-size,
|
||||
$label-line-height,
|
||||
$inner-spacer: $switch-inner-spacer
|
||||
) {
|
||||
.switch-#{$size} {
|
||||
@include template-switch-size-base(
|
||||
$size,
|
||||
$width,
|
||||
$height,
|
||||
$font-size,
|
||||
$form-label-font-size,
|
||||
$label-line-height,
|
||||
$inner-spacer
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Switch variant
|
||||
@mixin template-switch-variant($parent, $background, $color: null) {
|
||||
$selector: if($parent== '', '', '#{$parent}.switch');
|
||||
$color: if($color, $color, color-contrast($background));
|
||||
|
||||
#{$selector} .switch-input:checked ~ .switch-toggle-slider {
|
||||
background: $background;
|
||||
color: $color;
|
||||
box-shadow: 0 2px 6px 0 rgba($background, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// Switch theme
|
||||
@mixin template-switch-theme($parent, $background, $color: null) {
|
||||
@include template-switch-variant($parent, $background, $color);
|
||||
}
|
||||
|
||||
// Switch validation
|
||||
@mixin template-switch-validation-state($state, $color) {
|
||||
.switch-input {
|
||||
//BS & jQuery validation
|
||||
.was-validated &:#{$state},
|
||||
&.invalid,
|
||||
//jq
|
||||
&.is-#{$state} {
|
||||
~ .switch-label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
~ .switch-toggle-slider {
|
||||
border: 1px solid $color !important;
|
||||
}
|
||||
|
||||
&:checked ~ .switch-toggle-slider {
|
||||
background: $color;
|
||||
color: color-contrast($color);
|
||||
box-shadow: 0 2px 6px 0 rgba($color, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_text-divider.scss
vendored
Normal file
17
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_text-divider.scss
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
// Text Divider
|
||||
// *******************************************************************************
|
||||
|
||||
@mixin template-text-divider-variant($divider-color, $background) {
|
||||
$divider-selector: if($divider-color== '', '', '#{$divider-color}');
|
||||
.divider {
|
||||
&#{$divider-selector} {
|
||||
&.divider-vertical,
|
||||
.divider-text {
|
||||
&:before,
|
||||
&:after {
|
||||
border-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_timeline.scss
vendored
Normal file
33
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_timeline.scss
vendored
Normal file
@ -0,0 +1,33 @@
|
||||
// Timeline
|
||||
// *******************************************************************************
|
||||
|
||||
// Timeline point
|
||||
@mixin template-timeline-point-variant($point-color, $background) {
|
||||
.timeline {
|
||||
#{$point-color} {
|
||||
background-color: $background !important;
|
||||
outline: 3px solid rgba($background, 0.12);
|
||||
}
|
||||
|
||||
// Timeline-outline styles
|
||||
&.timeline-outline {
|
||||
#{$point-color} {
|
||||
border: 2px solid $background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin template-timeline-indicator-variant($indicator-color, $background) {
|
||||
$color: $background;
|
||||
$background: rgba-to-hex(rgba($background, 0.16), $rgba-to-hex-bg);
|
||||
|
||||
.timeline {
|
||||
#{$indicator-color} {
|
||||
background-color: $background;
|
||||
i {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_treeview.scss
vendored
Normal file
30
modules/Admin/Resources/assets/vendor/scss/_components/mixins/_treeview.scss
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
// Treeview
|
||||
// *******************************************************************************
|
||||
|
||||
// Treeview click
|
||||
@mixin template-treeview-clicked-bg($background) {
|
||||
.jstree-default {
|
||||
.jstree-wholerow-hovered,
|
||||
.jstree-hovered {
|
||||
background: $component-hover-bg;
|
||||
color: $component-hover-color;
|
||||
}
|
||||
.jstree-wholerow-clicked,
|
||||
.jstree-clicked {
|
||||
background: $component-hover-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.jstree-default-dark {
|
||||
.jstree-wholerow-hovered,
|
||||
.jstree-hovered {
|
||||
background: $component-hover-bg;
|
||||
color: $component-hover-color;
|
||||
}
|
||||
.jstree-wholerow-clicked,
|
||||
.jstree-clicked {
|
||||
background: $component-hover-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user