Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
BIN
public/scss/.DS_Store
vendored
Normal file
BIN
public/scss/.DS_Store
vendored
Normal file
Binary file not shown.
160
public/scss/_bs_rtl.scss
Normal file
160
public/scss/_bs_rtl.scss
Normal file
@@ -0,0 +1,160 @@
|
||||
$spacer: 1rem;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: $spacer * .25,
|
||||
2: $spacer * .5,
|
||||
3: $spacer,
|
||||
4: $spacer * 1.5,
|
||||
5: $spacer * 3,
|
||||
);
|
||||
|
||||
$position-values: (
|
||||
0: 0,
|
||||
50: 50%,
|
||||
100: 100%
|
||||
);
|
||||
|
||||
$enable-negative-margins: false !default;
|
||||
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
||||
|
||||
$prefix: bs-;
|
||||
|
||||
$dlab-right: l;
|
||||
$dlab-left: r;
|
||||
|
||||
|
||||
|
||||
$dlab-pos-right:left;
|
||||
$dlab-pos-left:right;
|
||||
$dlab-row : row-reverse wrap;
|
||||
$dlab-tx: 50%;
|
||||
|
||||
|
||||
$utilities: () !default;
|
||||
$utilities: map-merge(
|
||||
(
|
||||
"margin-end": (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: me,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
"margin-start": (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: ms,
|
||||
values: map-merge($spacers, (auto: auto))
|
||||
),
|
||||
|
||||
// scss-docs-end utils-vertical-align
|
||||
// scss-docs-start utils-float
|
||||
"float": (
|
||||
responsive: true,
|
||||
property: float,
|
||||
values: (
|
||||
start: right,
|
||||
end: left,
|
||||
none: none,
|
||||
)
|
||||
),
|
||||
|
||||
"start": (
|
||||
property: right,
|
||||
class: start,
|
||||
values: $position-values
|
||||
),
|
||||
"end": (
|
||||
property: left,
|
||||
class: end,
|
||||
values: $position-values
|
||||
),
|
||||
|
||||
"border-end": (
|
||||
property: border-left,
|
||||
class: border-end,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"border-start": (
|
||||
property: border-right,
|
||||
class: border-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
)
|
||||
),
|
||||
"negative-margin-end": (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: me,
|
||||
values: $negative-spacers
|
||||
),
|
||||
|
||||
"negative-margin-start": (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: ms,
|
||||
values: $negative-spacers
|
||||
),
|
||||
|
||||
"padding-end": (
|
||||
responsive: true,
|
||||
property: padding-left,
|
||||
class: pe,
|
||||
values: $spacers
|
||||
),
|
||||
|
||||
"padding-start": (
|
||||
responsive: true,
|
||||
property: padding-right,
|
||||
class: ps,
|
||||
values: $spacers
|
||||
),
|
||||
|
||||
"text-align": (
|
||||
responsive: true,
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: (
|
||||
start: right,
|
||||
end: left,
|
||||
center: center,
|
||||
)
|
||||
),
|
||||
|
||||
"rounded-end": (
|
||||
property: border-top-right-radius border-bottom-right-radius,
|
||||
class: rounded-end,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
),
|
||||
|
||||
"rounded-start": (
|
||||
property: border-bottom-left-radius border-top-left-radius,
|
||||
class: rounded-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill)
|
||||
)
|
||||
),
|
||||
),$utilities
|
||||
);
|
||||
|
||||
54
public/scss/_preloader.scss
Normal file
54
public/scss/_preloader.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
/* Editable */
|
||||
|
||||
#preloader{
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
width: 100%;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.lds-ripple {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.lds-ripple div {
|
||||
position: absolute;
|
||||
border: 4px solid var(--primary);
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
||||
}
|
||||
.lds-ripple div:nth-child(2) {
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
@keyframes lds-ripple {
|
||||
0% {
|
||||
top: 36px;
|
||||
left: 36px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-theme-version="dark"] {
|
||||
#preloader{
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
4
public/scss/abstracts/_abstracts.scss
Normal file
4
public/scss/abstracts/_abstracts.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import './variable';
|
||||
@import './inheritance';
|
||||
@import './mixin';
|
||||
@import './maps';
|
||||
193
public/scss/abstracts/_bs-custom.scss
Normal file
193
public/scss/abstracts/_bs-custom.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
//to ignore cli warning about deprecated mixin
|
||||
$enable-deprecation-messages: false;
|
||||
$ignore-warning : true;
|
||||
|
||||
// Custom class not bootstrap
|
||||
$fn:'HelveticaNeue'; // fn = font normal
|
||||
$fm:'HelveticaNeueMed'; // fm = font Medium
|
||||
$border-radius: 0.75rem;
|
||||
// Body
|
||||
$body-bg : #f5f5f5;
|
||||
$body-color: #888888;
|
||||
$headings-color: #000;
|
||||
// Typography
|
||||
$font-family-base: 'Roboto', sans-serif;
|
||||
$headings-font-weight : 600;
|
||||
// $headings-font-family: $fm;
|
||||
|
||||
$font-size-base : 0.875rem !default;
|
||||
$font-weight-base : 400 !default;
|
||||
// $line-height-base: 1.6;
|
||||
$h1-font-size : 2.25rem;
|
||||
$h2-font-size : 1.875rem;
|
||||
$h3-font-size : 1.5rem;
|
||||
$h4-font-size : 1.125rem;
|
||||
$h5-font-size : 1rem;
|
||||
$h6-font-size : 0.938rem;
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
$white : #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black : #000 !default;
|
||||
|
||||
|
||||
$blue : #5e72e4;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink : #e83e8c !default;
|
||||
$red : #EE3232;
|
||||
$orange: #ff9900 !default;
|
||||
$yellow: #FFFA6F;
|
||||
$green : #297F00;
|
||||
$teal : #20c997 !default;
|
||||
$cyan : #3065D0;
|
||||
|
||||
|
||||
|
||||
$grays: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$grays: map-merge((
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900),
|
||||
$grays);
|
||||
|
||||
|
||||
$muted : #89879f;
|
||||
$text-muted: #89879f;
|
||||
$mine-shaft: #262626;
|
||||
$ebony-clay: #232833;
|
||||
|
||||
$colors: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$colors: map-merge((
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800),
|
||||
$colors);
|
||||
|
||||
|
||||
|
||||
$primary : #F93A0B !default;
|
||||
$secondary: #145650 !default;
|
||||
$success : #2adb7b !default;
|
||||
$info : #D653C1 !default;
|
||||
$warning : #ffa755 !default;
|
||||
$danger : #f72b50 !default;
|
||||
$light : #e8e8e8 !default;
|
||||
$dark : #6e6e6e;
|
||||
|
||||
|
||||
:root{
|
||||
--primary: #{$primary};
|
||||
--secondary: #{$secondary};
|
||||
--primary-hover: #{darken($primary, 10)};
|
||||
--primary-dark: #{darken($primary, 30)};
|
||||
--rgba-primary-1: #{rgba($primary, 0.1)};
|
||||
--rgba-primary-2: #{rgba($primary, 0.2)};
|
||||
--rgba-primary-3: #{rgba($primary, 0.3)};
|
||||
--rgba-primary-4: #{rgba($primary, 0.4)};
|
||||
--rgba-primary-5: #{rgba($primary, 0.5)};
|
||||
--rgba-primary-6: #{rgba($primary, 0.6)};
|
||||
--rgba-primary-7: #{rgba($primary, 0.7)};
|
||||
--rgba-primary-8: #{rgba($primary, 0.8)};
|
||||
--rgba-primary-9: #{rgba($primary, 0.9)};
|
||||
--font-family-base: #{$font-family-base};
|
||||
--font-family-title: #{$font-family-base};
|
||||
--title: #{$headings-color};
|
||||
|
||||
|
||||
|
||||
// sidebar header
|
||||
--dz-sidebar-width: 16.5rem;
|
||||
--dz-header-height: 4.5rem;
|
||||
--dz-sidebar-pos : absolute;
|
||||
--dz-header-pos : relative;
|
||||
--dz-side-nav-padding : .85rem 1.5rem;
|
||||
--dz-side-nav-margin : 0 0;
|
||||
--dz-side-nav-size : 0.9375rem;
|
||||
--dz-side-ico-size : 1.2rem;
|
||||
--dz-side-ico-height : auto;
|
||||
--dz-side-ico-width : auto;
|
||||
--dz-side-sub_nav-padding : .4rem 1rem .4rem 4rem;
|
||||
--dz-side-sub_nav-size : 0.85rem;
|
||||
--dz-head-title-size : 1.25rem;
|
||||
--dz-side-menu-direction : column;
|
||||
--dz-side-menu-padding : 0 0;
|
||||
--dz-side-profile : block;
|
||||
--dz-side-info : block;
|
||||
--dz-side-copyright : block;
|
||||
|
||||
|
||||
// list
|
||||
|
||||
--dz-list-space-x : 1.25rem;
|
||||
--dz-list-space-y : .5rem;
|
||||
--dz-list-size : .875rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
$theme-colors: () !default;
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$theme-colors: map-merge(("primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark),
|
||||
$theme-colors);
|
||||
|
||||
|
||||
// $base-font-size : 0.8125rem !default;
|
||||
$heading-primary-size: 1.8rem;
|
||||
$sub-heading-size : 1.6rem !default;
|
||||
|
||||
$grid-gutter-width: 30px;
|
||||
|
||||
$dropdown-lik-color: $body-color;
|
||||
|
||||
|
||||
$border-color : #EEEEEE;
|
||||
$headings-color:#3d4465 !default;
|
||||
$rounded : 1.75rem ;
|
||||
|
||||
$radius-sm:0.375rem;
|
||||
|
||||
$grid-breakpoints: (xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1440);
|
||||
154
public/scss/abstracts/_inheritance.scss
Normal file
154
public/scss/abstracts/_inheritance.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
%gradient_one {
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
}
|
||||
|
||||
%gradient-1 {
|
||||
background: #f0a907;
|
||||
background: -moz-linear-gradient(top, #f0a907 0%, #f53c79 100%);
|
||||
background: -webkit-linear-gradient(top, #f0a907 0%,#f53c79 100%);
|
||||
background: linear-gradient(to bottom, #f0a907 0%,#f53c79 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0a907', endColorstr='#f53c79',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-2 {
|
||||
background: #4dedf5;
|
||||
background: -moz-linear-gradient(top, #4dedf5 0%, #480ceb 100%);
|
||||
background: -webkit-linear-gradient(top, #4dedf5 0%,#480ceb 100%);
|
||||
background: linear-gradient(to bottom, #4dedf5 0%,#480ceb 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dedf5', endColorstr='#480ceb',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-3 {
|
||||
background: #51f5ae;
|
||||
background: -moz-linear-gradient(top, #51f5ae 0%, #3fbcda 100%);
|
||||
background: -webkit-linear-gradient(top, #51f5ae 0%,#3fbcda 100%);
|
||||
background: linear-gradient(to bottom, #51f5ae 0%,#3fbcda 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51f5ae', endColorstr='#3fbcda',GradientType=0 );
|
||||
}
|
||||
|
||||
%gradient-4 {
|
||||
background: #f25521;
|
||||
background: -moz-linear-gradient(left, #f25521 0%, #f9c70a 100%);
|
||||
background: -webkit-linear-gradient(left, #f25521 0%,#f9c70a 100%);
|
||||
background: linear-gradient(to right, #f25521 0%,#f9c70a 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25521', endColorstr='#f9c70a',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-5 {
|
||||
background: #f53c79;
|
||||
background: -moz-linear-gradient(left, #f53c79 0%, #f0a907 100%);
|
||||
background: -webkit-linear-gradient(left, #f53c79 0%,#f0a907 100%);
|
||||
background: linear-gradient(to right, #f53c79 0%,#f0a907 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f53c79', endColorstr='#f0a907',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-6 {
|
||||
background: #36b9d8;
|
||||
background: -moz-linear-gradient(left, #36b9d8 0%, #4bffa2 100%);
|
||||
background: -webkit-linear-gradient(left, #36b9d8 0%,#4bffa2 100%);
|
||||
background: linear-gradient(to right, #36b9d8 0%,#4bffa2 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36b9d8', endColorstr='#4bffa2',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-7 {
|
||||
background: #4400eb;
|
||||
background: -moz-linear-gradient(left, #4400eb 0%, #44e7f5 100%);
|
||||
background: -webkit-linear-gradient(left, #4400eb 0%,#44e7f5 100%);
|
||||
background: linear-gradient(to right, #4400eb 0%,#44e7f5 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4400eb', endColorstr='#44e7f5',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-8 {
|
||||
background: #F7B00F;
|
||||
background: -moz-linear-gradient(top, #F7B00F 0%, #F25521 100%);
|
||||
background: -webkit-linear-gradient(top, #F7B00F 0%,#F25521 100%);
|
||||
background: linear-gradient(to bottom, #F7B00F 0%,#F25521 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7B00F', endColorstr='#F25521',GradientType=1 );
|
||||
|
||||
// background: linear-gradient(top, #f25521 0%, #f9c70a 100%);
|
||||
}
|
||||
|
||||
%gradient-9 {
|
||||
background: #f31e7a !important;
|
||||
background: -moz-linear-gradient(left, #f31e7a 0%, #fd712c 100%);
|
||||
background: -webkit-linear-gradient(left, #f31e7a 0%,#fd712c 100%);
|
||||
background: linear-gradient(to right, #f31e7a 0%,#fd712c 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f31e7a', endColorstr='#fd712c',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-10 {
|
||||
background: #f25521 !important;
|
||||
background: -moz-linear-gradient(left, #f25521 0%, #f9c70a 100%);
|
||||
background: -webkit-linear-gradient(left, #f25521 0%,#f9c70a 100%);
|
||||
background: linear-gradient(to top, #f25521 0%,#f9c70a 100%) !important;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25521', endColorstr='#f9c70a',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-11 {
|
||||
background: #3398fb;
|
||||
background: -moz-linear-gradient(left, #3398fb 0%, #8553ee 100%);
|
||||
background: -webkit-linear-gradient(left, #3398fb 0%,#8553ee 100%);
|
||||
background: linear-gradient(to right, #3398fb 0%,#8553ee 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3398fb', endColorstr='#8553ee',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-12 {
|
||||
background: #36e1b4;
|
||||
background: -moz-linear-gradient(left, #36e1b4 0%, #11cae7 100%);
|
||||
background: -webkit-linear-gradient(left, #36e1b4 0%,#11cae7 100%);
|
||||
background: linear-gradient(to right, #36e1b4 0%,#11cae7 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36e1b4', endColorstr='#11cae7',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-13 {
|
||||
background: #ffbf31;
|
||||
background: -moz-linear-gradient(left, #ffbf31 0%, #ff890e 100%);
|
||||
background: -webkit-linear-gradient(left, #ffbf31 0%,#ff890e 100%);
|
||||
background: linear-gradient(to right, #ffbf31 0%,#ff890e 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf31', endColorstr='#ff890e',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-14 {
|
||||
background: #23bdb8;
|
||||
background: -moz-linear-gradient(-45deg, #23bdb8 0%, #43e794 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #23bdb8 0%,#43e794 100%);
|
||||
background: linear-gradient(135deg, #23bdb8 0%,#43e794 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23bdb8', endColorstr='#43e794',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-15 {
|
||||
background: #9a56ff;
|
||||
background: -moz-linear-gradient(-45deg, #9a56ff 0%, #e36cd9 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #9a56ff 0%,#e36cd9 100%);
|
||||
background: linear-gradient(135deg, #9a56ff 0%,#e36cd9 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a56ff', endColorstr='#e36cd9',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-16 {
|
||||
background: #f48665;
|
||||
background: -moz-linear-gradient(-45deg, #f48665 0%, #fda23f 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #f48665 0%,#fda23f 100%);
|
||||
background: linear-gradient(135deg, #f48665 0%,#fda23f 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f48665', endColorstr='#fda23f',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-17 {
|
||||
background: #e36cd9;
|
||||
background: -moz-linear-gradient(-45deg, #e36cd9 0%, #fe60ae 100%);
|
||||
background: -webkit-linear-gradient(-45deg, #e36cd9 0%,#fe60ae 100%);
|
||||
background: linear-gradient(135deg, #e36cd9 0%,#fe60ae 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e36cd9', endColorstr='#fe60ae',GradientType=1 );
|
||||
}
|
||||
|
||||
%gradient-18 {
|
||||
background: #a15cff;
|
||||
background: -moz-linear-gradient(left, #a15cff 0%, #ce82fd 100%);
|
||||
background: -webkit-linear-gradient(left, #a15cff 0%,#ce82fd 100%);
|
||||
background: linear-gradient(to right, #a15cff 0%,#ce82fd 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a15cff', endColorstr='#ce82fd',GradientType=1 );
|
||||
}
|
||||
|
||||
%text-gradient {
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
22
public/scss/abstracts/_maps.scss
Normal file
22
public/scss/abstracts/_maps.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
$borders: (
|
||||
"right", "left", "top", "bottom", ""
|
||||
);
|
||||
|
||||
|
||||
$theme_backgrounds: (
|
||||
"color_1": $color_pallate_1,
|
||||
"color_2": $color_pallate_2,
|
||||
"color_3": $color_pallate_3,
|
||||
"color_4": $color_pallate_4,
|
||||
"color_5": $color_pallate_5,
|
||||
"color_6": $color_pallate_6,
|
||||
"color_7": $color_pallate_7,
|
||||
"color_8": $color_pallate_8,
|
||||
"color_9": $color_pallate_9,
|
||||
"color_10": $color_pallate_10,
|
||||
"color_11": $color_pallate_11,
|
||||
"color_12": $color_pallate_12,
|
||||
"color_13": $color_pallate_13,
|
||||
"color_14": $color_pallate_14,
|
||||
"color_15": $color_pallate_15
|
||||
);
|
||||
112
public/scss/abstracts/_mixin.scss
Normal file
112
public/scss/abstracts/_mixin.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
//MEDIA QUERY MANAGER
|
||||
|
||||
/*
|
||||
0 - 600: Phone
|
||||
600 - 900: Tablet portrait
|
||||
900 - 1200: Tablet landscape
|
||||
1200 - 1800: Normal styles
|
||||
1800+ : Big Desktop
|
||||
1em = 16px
|
||||
The smaller device rules always should write below the bigger device rules
|
||||
Fixing Order => Base + Typography >> General Layout + Grid >> Page Layout + Component
|
||||
*/
|
||||
|
||||
@mixin respond($breakpoint) {
|
||||
|
||||
@if($breakpoint == "phone") {
|
||||
|
||||
@media only screen and (max-width: 35.9375rem) { @content; } //575
|
||||
}
|
||||
|
||||
@if($breakpoint == "phone-land") {
|
||||
|
||||
@media only screen and (max-width: 47.9375rem) { @content; } //767
|
||||
}
|
||||
|
||||
@if($breakpoint == "tab-port") {
|
||||
|
||||
@media only screen and (max-width: 61.9375rem) { @content; } //991
|
||||
}
|
||||
|
||||
@if($breakpoint == "tab-land") {
|
||||
|
||||
@media only screen and (max-width: 74.9375rem) { @content; } //1199
|
||||
}
|
||||
|
||||
@if ($breakpoint == "laptop") {
|
||||
@media only screen and (max-width: 1480px) { @content; } //1480
|
||||
}
|
||||
|
||||
@if ($breakpoint == "desktop") {
|
||||
|
||||
@media only screen and (min-width: 75rem) { @content; } //1200
|
||||
}
|
||||
|
||||
@if($breakpoint == "big-desktop") {
|
||||
|
||||
@media only screen and (min-width: 112.5rem) { @content; } //1800
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
//don't use it untill you need this too much
|
||||
@mixin custommq($min: null, $max: null) {
|
||||
@if ($min != null and $max != null) {
|
||||
@media only screen and (min-width: $min) and (max-width: $max) { @content; }
|
||||
}
|
||||
|
||||
@if ($min == null and $max != null) {
|
||||
@media only screen and (max-width: $max) { @content; }
|
||||
}
|
||||
|
||||
@if ($min != null and $max == null) {
|
||||
@media only screen and (min-width: $min) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
// transition
|
||||
@mixin transitionSlow{
|
||||
-webkit-transition: all 0.8s;
|
||||
-ms-transition: all 0.8s;
|
||||
transition: all 0.8s;
|
||||
}
|
||||
@mixin transitionMedium{
|
||||
-webkit-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
@mixin transitionFast{
|
||||
-webkit-transition: all 0.2s;
|
||||
-ms-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@mixin transformScale{
|
||||
transform:scale(1);
|
||||
-moz-transform:scale(1);
|
||||
-webkit-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
}
|
||||
@mixin transformScaleXS{
|
||||
transform:scale(0.8);
|
||||
-moz-transform:scale(0.8);
|
||||
-webkit-transform:scale(0.8);
|
||||
-ms-transform:scale(0.8);
|
||||
-o-transform:scale(0.8);
|
||||
}
|
||||
@mixin transformScaleSM{
|
||||
transform:scale(1.2);
|
||||
-moz-transform:scale(1.2);
|
||||
-webkit-transform:scale(1.2);
|
||||
-ms-transform:scale(1.2);
|
||||
-o-transform:scale(1.2);
|
||||
}
|
||||
@mixin transformScaleMD{
|
||||
transform:scale(1.5);
|
||||
-moz-transform:scale(1.5);
|
||||
-webkit-transform:scale(1.5);
|
||||
-ms-transform:scale(1.5);
|
||||
-o-transform:scale(1.5);
|
||||
}
|
||||
171
public/scss/abstracts/_variable.scss
Normal file
171
public/scss/abstracts/_variable.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
//customize bootstrap
|
||||
@import './bs-custom';
|
||||
|
||||
$strong:#646c9a;
|
||||
//$border: #e6e6e6;
|
||||
$shadow: 0rem 0rem 2.5rem 0rem rgba(82,63,105,0.1);
|
||||
//$body-bg: #f5f5f5;
|
||||
|
||||
|
||||
///////////////
|
||||
// Solid Color
|
||||
///////////////
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$charade: #23252F;
|
||||
|
||||
/////////////////////////
|
||||
// Light Version Color
|
||||
/////////////////////////
|
||||
|
||||
$text-dark: #312a2a;
|
||||
$text-gray: #737B8B;
|
||||
$text: #888888;
|
||||
$border: #e6e6e6;
|
||||
$body-bg: #f5f5f5;
|
||||
$card: #fff;
|
||||
//$dark_bg_lighter: #1E2A4A;
|
||||
|
||||
|
||||
/////////////////////////
|
||||
// Dark Version Color
|
||||
/////////////////////////
|
||||
$d-ctd: #ddd;
|
||||
$d-ctl: #828690;
|
||||
$d-text-dark : #fff;
|
||||
$d-text-gray : #b3b3b3;
|
||||
$d-text : #828690;
|
||||
$d-border: #2e2e42;
|
||||
$d-bg: #17171E;
|
||||
$dark-card: #212130;
|
||||
$dark_bg_lighter: #1E2A4A;
|
||||
|
||||
/////////////////////////
|
||||
// Primary Light
|
||||
/////////////////////////
|
||||
$primary-light: lighten($primary, 65%);
|
||||
$secondary-light: lighten($secondary, 70%);
|
||||
$success-light: lighten($success, 42%);
|
||||
$warning-light: lighten($warning, 25%);
|
||||
$danger-light: lighten($danger, 38%);
|
||||
$info-light: lighten($info, 38%);
|
||||
$dark-light: lighten($dark, 50%);
|
||||
|
||||
/////////////////////////
|
||||
// Opacity
|
||||
/////////////////////////
|
||||
$primary-opacity: rgba($primary, 0.1);
|
||||
$secondary-opacity: rgba($secondary, 0.15);
|
||||
$success-opacity: rgba($success, 0.1);
|
||||
$warning-opacity: rgba($warning, 0.1);
|
||||
$danger-opacity: rgba($danger, 0.15);
|
||||
$info-opacity: rgba($info, 0.1);
|
||||
$dark-opacity: rgba($dark, 0.15);
|
||||
|
||||
////////////////////////
|
||||
// Light Version Color
|
||||
////////////////////////
|
||||
$l-ctd: #464a53;
|
||||
$l-ctl: #828690;
|
||||
$l-border: #eaeaea;
|
||||
$l-bg: #f2f4fa;
|
||||
$heading: #333;
|
||||
|
||||
///////////////////
|
||||
// Material Colors
|
||||
///////////////////
|
||||
$dusty-gray: #999999;
|
||||
$gallery: #EEEEEE;
|
||||
$gray: #898989;
|
||||
$input-border-color: $border;
|
||||
|
||||
|
||||
///////////////////
|
||||
// Social Colors
|
||||
///////////////////
|
||||
$facebook: #3b5998;
|
||||
$twitter: #1da1f2;
|
||||
$youtube: #FF0000;
|
||||
$google-plus: #db4439;
|
||||
$linkedin: #007bb6;
|
||||
$instagram: #c32aa3;
|
||||
$pinterest: #bd081c;
|
||||
$google: #4285f4;
|
||||
$snapchat: #fffc00;
|
||||
$whatsapp: #25d366;
|
||||
$tumblr: #35465d;
|
||||
$reddit: #ff4500;
|
||||
$spotify: #1ed760;
|
||||
$yahoo: #430297;
|
||||
$dribbble: #ea4c89;
|
||||
$skype: #00aff0;
|
||||
$quora: #aa2200;
|
||||
$riverBed: #4C585C;
|
||||
$vimeo: #1ab7ea;
|
||||
|
||||
|
||||
///////////////////
|
||||
// Misc Colors
|
||||
///////////////////
|
||||
$iron: #DDDFE1;
|
||||
$grey: #D2D6DE;
|
||||
$pale-sky: #6a707e;
|
||||
$athensGray: #F0F0F2;
|
||||
$sky: #2290FF;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$color_pallate_1: $white;
|
||||
$color_pallate_2: #6610f2;
|
||||
$color_pallate_3: $primary;
|
||||
$color_pallate_4: #4d06a5;
|
||||
$color_pallate_5: #dc3545;
|
||||
$color_pallate_6: #fd7e14;
|
||||
$color_pallate_7: #ffc107;
|
||||
$color_pallate_8: #fff;
|
||||
$color_pallate_9: #20c997;
|
||||
$color_pallate_10: #17a2b8;
|
||||
$color_pallate_11: #94618E;
|
||||
$color_pallate_12:#343a40 ;
|
||||
$color_pallate_13: #2a2a2a;
|
||||
$color_pallate_14: #4885ed;
|
||||
$color_pallate_15: #4cb32b;
|
||||
|
||||
//utility variables
|
||||
$radius: 0.5rem;
|
||||
|
||||
|
||||
$loader--width: 15.625rem;
|
||||
$loader-dot--size: 1.25rem;
|
||||
$dlab-pos-right: right;
|
||||
$dlab-pos-left: left;
|
||||
$dlab-row : row wrap;
|
||||
|
||||
:root{
|
||||
--card : #{$card};
|
||||
--text-dark : #{$text-dark};
|
||||
--text-gray : #{$text-gray};
|
||||
--text : #{$text};
|
||||
--body-bg : #{$body-bg};
|
||||
--light : #{$body-bg};
|
||||
--border : #{$border};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6
public/scss/base/_base.scss
Normal file
6
public/scss/base/_base.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import './fonts';
|
||||
@import './helper';
|
||||
@import './reset';
|
||||
@import './colors';
|
||||
@import './custom-grid';
|
||||
|
||||
61
public/scss/base/_colors.scss
Normal file
61
public/scss/base/_colors.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
.gradient_one {
|
||||
@extend %gradient_one;
|
||||
}
|
||||
|
||||
|
||||
.gradient {
|
||||
&-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
&-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
&-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
&-4 {
|
||||
@extend %gradient-4;
|
||||
}
|
||||
&-5 {
|
||||
@extend %gradient-5;
|
||||
}
|
||||
&-6 {
|
||||
@extend %gradient-6;
|
||||
}
|
||||
&-7 {
|
||||
@extend %gradient-7;
|
||||
}
|
||||
&-8 {
|
||||
@extend %gradient-8;
|
||||
}
|
||||
&-9 {
|
||||
@extend %gradient-9;
|
||||
}
|
||||
&-10 {
|
||||
@extend %gradient-10;
|
||||
}
|
||||
&-11 {
|
||||
@extend %gradient-11;
|
||||
}
|
||||
&-12 {
|
||||
@extend %gradient-12;
|
||||
}
|
||||
&-13 {
|
||||
@extend %gradient-13;
|
||||
}
|
||||
&-14 {
|
||||
@extend %gradient-14;
|
||||
}
|
||||
&-15 {
|
||||
@extend %gradient-15;
|
||||
}
|
||||
&-16 {
|
||||
@extend %gradient-16;
|
||||
}
|
||||
&-17 {
|
||||
@extend %gradient-17;
|
||||
}
|
||||
&-18 {
|
||||
@extend %gradient-18;
|
||||
}
|
||||
}
|
||||
27
public/scss/base/_custom-grid.scss
Normal file
27
public/scss/base/_custom-grid.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
$grid-columns: 12;
|
||||
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
flex: 0 0 percentage($size / $columns);
|
||||
// Add a `max-width` to ensure content within each column does not blow out
|
||||
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
||||
// do not appear to require this.
|
||||
max-width: percentage($size / $columns);
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
|
||||
@for $i from 1 through $grid-columns {
|
||||
.col-xxl-#{$i} {
|
||||
flex: 0 0 percentage($i / $grid-columns);
|
||||
max-width: percentage($i / $grid-columns);
|
||||
}
|
||||
}
|
||||
.mb-xxl-4{
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
27
public/scss/base/_fonts.scss
Normal file
27
public/scss/base/_fonts.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
//Google font
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800');
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700');
|
||||
|
||||
|
||||
@import url('./../icons/simple-line-icons/css/simple-line-icons.css');
|
||||
@import url('./../icons/font-awesome/css/all.min.css');
|
||||
@import url('./../icons/material-design-iconic-font/css/materialdesignicons.min.css');
|
||||
@import url('./../icons/themify-icons/css/themify-icons.css');
|
||||
@import url('./../icons/line-awesome/css/line-awesome.min.css');
|
||||
@import url('./../icons/flaticon/flaticon.css');
|
||||
@import url('./../icons/flaticon_1/flaticon_1.css');
|
||||
@import url('./../icons/icomoon/icomoon.css');
|
||||
@import url('./../icons/bootstrap-icons/font/bootstrap-icons.css');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3
public/scss/base/_helper.scss
Normal file
3
public/scss/base/_helper.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.c-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
553
public/scss/base/_reset.scss
Normal file
553
public/scss/base/_reset.scss
Normal file
@@ -0,0 +1,553 @@
|
||||
@import "../abstracts/maps";
|
||||
@import "./../vendor/metismenu/css/metisMenu.min.css";
|
||||
* {
|
||||
outline: none;
|
||||
padding: 0;
|
||||
&::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
&::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include custommq($max: 100rem) {
|
||||
:root{
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
font-size:0.875rem;
|
||||
color: var(--text);
|
||||
background-color: var(--body-bg);
|
||||
@include respond('tab-port') {
|
||||
font-size:0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.box-shadow-none {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
.overflow-unset{
|
||||
overflow:unset !important;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
opacity: 0;
|
||||
transition: all 0.25s ease-in;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// background: $body-bg;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.rounded-lg{
|
||||
border-radius:$radius;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $body-color;
|
||||
text-decoration:none;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.btn-link{
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active{
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
|
||||
.ltr{
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--primary) !important;
|
||||
}
|
||||
.text-primary {
|
||||
color:var(--primary) !important;
|
||||
}
|
||||
.border-end {
|
||||
border-color : var(--border) !important;
|
||||
}
|
||||
.border-bottom{
|
||||
border-color: var(--border)!important;
|
||||
}
|
||||
|
||||
.fs-12{font-size:0.75rem !important; line-height:1.5; }
|
||||
.fs-13{font-size:0.8125rem !important; line-height:1.5; }
|
||||
.fs-14{font-size:0.875rem !important; line-height:1.6; }
|
||||
.fs-15{font-size:0.875rem !important; line-height:1.5; }
|
||||
.fs-16{
|
||||
font-size:1rem !important;
|
||||
line-height:1.6;
|
||||
@include respond ('phone'){
|
||||
font-size:0.875rem !important;
|
||||
}
|
||||
}
|
||||
.fs-18{
|
||||
font-size:1.125rem !important;
|
||||
line-height:1.5;
|
||||
@include respond ('phone'){
|
||||
font-size:1rem !important;
|
||||
}
|
||||
}
|
||||
.fs-20{font-size:1.25rem !important; line-height:1.5; }
|
||||
.fs-22{font-size:1.375rem !important; line-height:1.5; }
|
||||
.fs-24{font-size:1.5rem !important; line-height:1.4; }
|
||||
.fs-26{font-size:1.625rem !important; line-height:1.4; }
|
||||
.fs-28{
|
||||
font-size:1.75rem !important;
|
||||
line-height:1.4;
|
||||
@include respond ('phone'){
|
||||
font-size:1.5rem !important;
|
||||
}
|
||||
}
|
||||
.fs-30{font-size:1.875rem !important; line-height:1.4; }
|
||||
.fs-32{font-size:2rem !important; line-height:1.25; }
|
||||
.fs-34{font-size:2.125rem !important; line-height:1.25; }
|
||||
.fs-35{font-size:2.1875rem !important; line-height:1.25; }
|
||||
.fs-36{font-size:2.25rem !important; line-height:1.25; }
|
||||
.fs-38{font-size:2.375rem !important; line-height:1.25; }
|
||||
.fs-46{font-size:2.875rem !important; line-height:1.25; }
|
||||
.fs-48{font-size:3rem !important; line-height:1.25; }
|
||||
.font-w100{font-weight:100;}
|
||||
.font-w200{font-weight:200;}
|
||||
.font-w300{font-weight:300;}
|
||||
.font-w400{font-weight:400;}
|
||||
.font-w500{font-weight:500;}
|
||||
.font-w600{font-weight:600;}
|
||||
.font-w700{font-weight:700;}
|
||||
.font-w800{font-weight:800;}
|
||||
.font-w900{font-weight:900;}
|
||||
|
||||
|
||||
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
|
||||
line-height:1.5;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
|
||||
.w-space-no{
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
|
||||
.text-dark{
|
||||
color: var(--text-dark)!important;
|
||||
}
|
||||
.bg-card{
|
||||
background-color: var(--card)!important;
|
||||
}
|
||||
.content-body {
|
||||
.container {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.container-fluid {
|
||||
padding-top: 1.875rem;
|
||||
padding-right: 1.875rem;
|
||||
padding-left: 1.875rem;
|
||||
|
||||
@include custommq($max: 47.9375rem) {
|
||||
padding-top: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
@include custommq($max: 35.9375rem) {
|
||||
padding-top: 0.9375rem;
|
||||
padding-right: 0.9375rem;
|
||||
padding-left: 0.9375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-list{
|
||||
li{
|
||||
list-style:unset;
|
||||
}
|
||||
}
|
||||
.unorder-list {
|
||||
padding-left: 2rem;
|
||||
li{
|
||||
list-style:unset;
|
||||
}
|
||||
}
|
||||
/*sp*/
|
||||
.row.sp4,
|
||||
.sp4{
|
||||
margin-left:-0.125rem;
|
||||
margin-right:-0.125rem;
|
||||
[class*="col-"]{
|
||||
padding-left:0.125rem;
|
||||
padding-right:0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.op1{opacity:0.1;}
|
||||
.op2{opacity:0.2;}
|
||||
.op3{opacity:0.3;}
|
||||
.op4{opacity:0.4;}
|
||||
.op5{opacity:0.5;}
|
||||
.op6{opacity:0.6;}
|
||||
.op7{opacity:0.7;}
|
||||
.op8{opacity:0.8;}
|
||||
.op9{opacity:0.9;}
|
||||
|
||||
|
||||
.content-heading {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.875rem;
|
||||
margin-top: 3.125rem;
|
||||
border-bottom: 0.0625rem solid $border;
|
||||
padding-bottom: 0.625rem;
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
//change bootstrap default button behaviour on :focus:active 😢
|
||||
.btn {
|
||||
&-primary {
|
||||
&:not(:disabled):not(.disabled) {
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border{
|
||||
border-color: var(--border)!important;
|
||||
}
|
||||
.border-top{
|
||||
border-top-color: var(--border)!important;
|
||||
}
|
||||
.border-left-end {
|
||||
border-top-#{$dlab-pos-right}-radius: 0.625rem !important;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0.625rem !important;
|
||||
}
|
||||
.border-right-end {
|
||||
border-top-#{$dlab-pos-left}-radius: 0.625rem !important;
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0.625rem !important;
|
||||
}
|
||||
hr{
|
||||
border-color: var(--border);
|
||||
opacity: 1;
|
||||
}
|
||||
.vh-100{
|
||||
height:100vh !important;
|
||||
}
|
||||
// Support ticket btn
|
||||
.support-ticket {
|
||||
position: fixed;
|
||||
bottom: 1.875rem;
|
||||
right: 0.9375rem;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.support-ticket-btn {
|
||||
width: 6.25rem;
|
||||
background: #7CB442;
|
||||
animation: 0.7s ease-in-out 0s infinite alternate none running crescendo;
|
||||
border-radius: 3.125rem;
|
||||
color: #fff;
|
||||
font-size: 0.5rem;
|
||||
font-size: 1rem;
|
||||
padding: 0.3125rem 0.625rem 0.4375rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
box-shadow: rgba(124, 180, 66, 0.7) 0rem 0.5rem 2.1875rem 0rem;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.text-blue { color:$blue ;}
|
||||
.text-indigo{ color:$indigo;}
|
||||
.text-purple{ color:$purple;}
|
||||
.text-pink { color:$pink ;}
|
||||
.text-red { color:$red ;}
|
||||
.text-orange{ color:$orange;}
|
||||
.text-yellow{ color:$yellow;}
|
||||
.text-green { color:$green ;}
|
||||
.text-teal { color:$teal ;}
|
||||
.text-cyan { color:$cyan ;}
|
||||
|
||||
.bg-blue{
|
||||
background:#496ecc!important;
|
||||
}
|
||||
.bg-orange{
|
||||
background:#ed8030!important;
|
||||
}
|
||||
.bg-green{
|
||||
background:#299e4a!important;
|
||||
}
|
||||
.bg-purpel{
|
||||
background:#9517c1!important;
|
||||
}
|
||||
.bg-dark-blue{
|
||||
background:#251e71!important;
|
||||
}
|
||||
|
||||
.bg-black{
|
||||
background:$black;
|
||||
}
|
||||
.text-black{
|
||||
color:$black !important;
|
||||
}
|
||||
.dlab-scroll{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.scale1{
|
||||
transform:scale(1.1);
|
||||
-moz-transform:scale(1.1);
|
||||
-webkit-transform:scale(1.1);
|
||||
-ms-transform:scale(1.1);
|
||||
-o-transform:scale(1.1);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale2{
|
||||
transform:scale(1.2);
|
||||
-moz-transform:scale(1.2);
|
||||
-webkit-transform:scale(1.2);
|
||||
-ms-transform:scale(1.2);
|
||||
-o-transform:scale(1.2);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale3{
|
||||
transform:scale(1.3);
|
||||
-moz-transform:scale(1.3);
|
||||
-webkit-transform:scale(1.3);
|
||||
-ms-transform:scale(1.3);
|
||||
-o-transform:scale(1.3);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale4{
|
||||
transform:scale(1.4);
|
||||
-moz-transform:scale(1.4);
|
||||
-webkit-transform:scale(1.4);
|
||||
-ms-transform:scale(1.4);
|
||||
-o-transform:scale(1.4);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale5{
|
||||
transform:scale(1.5);
|
||||
-moz-transform:scale(1.5);
|
||||
-webkit-transform:scale(1.5);
|
||||
-ms-transform:scale(1.5);
|
||||
-o-transform:scale(1.5);
|
||||
display:inline-block;
|
||||
}
|
||||
.scale-2{
|
||||
transform:scale(2);
|
||||
-moz-transform:scale(2);
|
||||
-webkit-transform:scale(2);
|
||||
-ms-transform:scale(2);
|
||||
-o-transform:scale(2);
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes crescendo {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.height10 { height:0.625rem; }
|
||||
.height20 { height:1.25rem; }
|
||||
.height30 { height:1.875rem; }
|
||||
.height40 { height:2.5rem; }
|
||||
.height50 { height:3.125rem; }
|
||||
.height60 { height:3.75rem; }
|
||||
.height70 { height:4.375rem; }
|
||||
.height80 { height:5rem; }
|
||||
.height90 { height:5.625rem; }
|
||||
.height100{ height:6.25rem; }
|
||||
.height110 { height:6.875rem; }
|
||||
.height120 { height:7.5rem; }
|
||||
.height130 { height:8.125rem; }
|
||||
.height140 { height:8.75rem; }
|
||||
.height150 { height:9.375rem; }
|
||||
.height160 { height:10rem; }
|
||||
.height170 { height:10.625rem; }
|
||||
.height180 { height:11.25rem; }
|
||||
.height190 { height:11.875rem; }
|
||||
.height200{ height:12.5rem; }
|
||||
.height210 { height:13.125rem; }
|
||||
.height220 { height:13.75rem; }
|
||||
.height230 { height:14.375rem; }
|
||||
.height240 { height:15rem; }
|
||||
.height250 { height:15.625rem; }
|
||||
.height260 { height:16.25rem; }
|
||||
.height270 { height:16.875rem; }
|
||||
.height280 { height:17.5rem; }
|
||||
.height290 { height:18.125rem; }
|
||||
.height300{ height:18.75rem; }
|
||||
.height310 { height:19.375rem; }
|
||||
.height320 { height:20rem; }
|
||||
.height330 { height:20.625rem; }
|
||||
.height340 { height:21.25rem; }
|
||||
.height350 { height:21.875rem; }
|
||||
.height360 { height:22.5rem; }
|
||||
.height370 { height:23.125rem; }
|
||||
.height380 { height:23.75rem; }
|
||||
.height390 { height:24.375rem; }
|
||||
.height400{ height:25rem; }
|
||||
.height415{ height:25.9375rem; }
|
||||
.height500{ height:31.25rem; }
|
||||
.height550{ height:34.375rem; }
|
||||
.height600{ height:37.5rem; }
|
||||
.height630{ height:39.375rem; }
|
||||
.height720{ height:45rem; }
|
||||
.height750{ height:46.875rem; }
|
||||
.height800{ height:50rem; }
|
||||
.width10 { width:0.625rem; }
|
||||
.width20 { width:1.25rem; }
|
||||
.width30 { width:1.875rem; }
|
||||
.width40 { width:2.5rem; }
|
||||
.width50 { width:3.125rem; }
|
||||
.width60 { width:3.75rem; }
|
||||
.width70 { width:4.375rem; }
|
||||
.width80 { width:5rem; }
|
||||
.width90 { width:5.625rem; }
|
||||
.width100 { width:6.25rem; }
|
||||
.width110 { width:6.875rem; }
|
||||
.width120 { width:7.5rem; }
|
||||
.width130 { width:8.125rem; }
|
||||
.width140 { width:8.75rem; }
|
||||
.width150 { width:9.375rem; }
|
||||
.width160 { width:10rem; }
|
||||
.width170 { width:10.625rem; }
|
||||
.width180 { width:11.25rem; }
|
||||
.width190 { width:11.875rem; }
|
||||
.width200 { width:12.5rem; }
|
||||
.width210 { width:13.125rem; }
|
||||
.width220 { width:13.75rem; }
|
||||
.width230 { width:14.375rem; }
|
||||
.width240 { width:15rem; }
|
||||
.width250 { width:15.625rem; }
|
||||
.width260 { width:16.25rem; }
|
||||
.width270 { width:16.875rem; }
|
||||
.width280 { width:17.5rem; }
|
||||
.width290 { width:18.125rem; }
|
||||
.width300 { width:18.75rem; }
|
||||
.width310 { width:19.375rem; }
|
||||
.width320 { width:20rem; }
|
||||
.width330 { width:20.625rem; }
|
||||
.width340 { width:21.25rem; }
|
||||
.width350 { width:21.875rem; }
|
||||
.width360 { width:22.5rem; }
|
||||
.width370 { width:23.125rem; }
|
||||
.width380 { width:23.75rem; }
|
||||
.width390 { width:24.375rem; }
|
||||
.width400 { width:25rem; }
|
||||
|
||||
|
||||
|
||||
.rounded{border-radius:$radius!important;}
|
||||
|
||||
label{
|
||||
margin-bottom:0.5rem;
|
||||
}
|
||||
|
||||
@keyframes gXGDoR {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crescendo {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gXGDoR {
|
||||
from {
|
||||
-webkit-transform: translateY(5px) scale(.8);
|
||||
-ms-transform: translateY(5px) scale(.8);
|
||||
transform: translateY(5px) scale(.8);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translateY(0px) scale(1);
|
||||
-ms-transform: translateY(0px) scale(1);
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dlab-scroll{
|
||||
position:relative;
|
||||
}
|
||||
textarea.form-control {
|
||||
min-height: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
div, span, ol, ul{
|
||||
scrollbar-width:thin;
|
||||
}
|
||||
|
||||
BIN
public/scss/components/.DS_Store
vendored
Normal file
BIN
public/scss/components/.DS_Store
vendored
Normal file
Binary file not shown.
9
public/scss/components/_components.scss
Normal file
9
public/scss/components/_components.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import "./app/apps";
|
||||
@import "./charts/charts";
|
||||
@import "./forms/forms";
|
||||
@import "./map/maps";
|
||||
@import "./uc/addons";
|
||||
@import "./ui/interfaces";
|
||||
@import "./widget/widgets";
|
||||
@import "./tables/table";
|
||||
|
||||
0
public/scss/components/app/_app-calender-date.scss
Normal file
0
public/scss/components/app/_app-calender-date.scss
Normal file
274
public/scss/components/app/_app-calender-event.scss
Normal file
274
public/scss/components/app/_app-calender-event.scss
Normal file
@@ -0,0 +1,274 @@
|
||||
/* =============
|
||||
Calendar
|
||||
============= */
|
||||
|
||||
.app-fullcalender {
|
||||
button {
|
||||
border-radius: 0rem;
|
||||
color: $dark;
|
||||
}
|
||||
td{
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
float : #{$dlab-pos-left};
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fc-view {
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
margin-bottom: 0.3125rem;
|
||||
margin-top : 0.9375rem;
|
||||
|
||||
& .fc-left {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.625rem;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .fc-right {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
float: none;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .fc-center {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
* {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-size : 1rem;
|
||||
font-weight : 600;
|
||||
line-height : 1.875rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.fc-toolbar .fc-state-active,
|
||||
.fc-toolbar .ui-state-active,
|
||||
.fc-toolbar .ui-state-hover,
|
||||
.fc-toolbar button:focus,
|
||||
.fc-toolbar button:hover {
|
||||
z-index: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fc-widget-header {
|
||||
border: 0.0625rem solid $border;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.fc th.fc-widget-header {
|
||||
background : $border!important;
|
||||
font-size : 0.875rem;
|
||||
line-height : 1.25rem;
|
||||
padding : 0.625rem 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
border : 0.0625rem solid $border;
|
||||
text-transform: capitalize;
|
||||
&.active{
|
||||
box-shadow: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-text-arrow {
|
||||
font-family: inherit;
|
||||
font-size : 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fc-event ,
|
||||
.external-event{
|
||||
border-radius: 0.125rem;
|
||||
border : none;
|
||||
cursor : move;
|
||||
font-size : 0.8125rem;
|
||||
margin : 0.3125rem 0.4375rem;
|
||||
padding : 0.3125rem;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.external-event {
|
||||
cursor : move;
|
||||
margin : 0.625rem 0;
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.fc-basic-view td.fc-week-number span {
|
||||
padding-#{$dlab-pos-right}: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-basic-view td.fc-day-number {
|
||||
padding-#{$dlab-pos-right}: 0.3125rem;
|
||||
}
|
||||
|
||||
#drop-remove {
|
||||
margin-#{$dlab-pos-right}: 0.5rem;
|
||||
top : 0.1875rem;
|
||||
}
|
||||
|
||||
#add-category,
|
||||
#event-modal {
|
||||
|
||||
.modal-dialog {
|
||||
max-width: 37.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.fc th.fc-widget-header {
|
||||
background: transparent !important;
|
||||
}
|
||||
.fc-button {
|
||||
background: $white;
|
||||
}
|
||||
.fc-state-hover {
|
||||
background: $white!important;
|
||||
}
|
||||
.fc-state-highlight {
|
||||
background: $l-bg!important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
.fc-cell-overlay {
|
||||
background: $white!important;
|
||||
}
|
||||
.fc-unthemed .fc-today {
|
||||
background: $l-bg!important;
|
||||
}
|
||||
|
||||
.fc-day-top{
|
||||
color: $dark !important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
|
||||
.external-event {
|
||||
color: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
.fc-basic-view .fc-body .fc-row {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.fc-scroller.fc-day-grid-container {
|
||||
height: 30.625rem !important;
|
||||
}
|
||||
|
||||
.fc-row.fc-week.fc-widget-content.fc-rigid {
|
||||
height: 5.0625rem !important;
|
||||
}
|
||||
|
||||
.email_left_pane {
|
||||
@include custommq($max: 90rem) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#external-events{
|
||||
|
||||
.external-event:before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0.875rem;
|
||||
min-width:0.875rem;
|
||||
height: 0.875rem;
|
||||
border-radius: 50%;
|
||||
margin-#{$dlab-pos-right}: .9rem;
|
||||
position: relative;
|
||||
top: 0.125rem;
|
||||
}
|
||||
[data-class="bg-primary"]{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
&::before{
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
[data-class="bg-success"]{
|
||||
|
||||
&::before{
|
||||
background: $success;
|
||||
}
|
||||
}
|
||||
[data-class="bg-warning"]{
|
||||
&::before{
|
||||
background: $warning;
|
||||
}
|
||||
}
|
||||
[data-class="bg-dark"]{
|
||||
&::before{
|
||||
background: $dark;
|
||||
}
|
||||
}
|
||||
[data-class="bg-danger"]{
|
||||
&::before{
|
||||
background: $danger;
|
||||
}
|
||||
}
|
||||
[data-class="bg-info"]{
|
||||
&::before{
|
||||
background: $info;
|
||||
}
|
||||
}
|
||||
[data-class="bg-pink"]{
|
||||
&::before{
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
[data-class="bg-secondary"]{
|
||||
&::before{
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fc .fc-row .fc-content-skeleton table,
|
||||
.fc .fc-row .fc-content-skeleton td,
|
||||
.fc .fc-row .fc-helper-skeleton td {
|
||||
border-color: $border;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
6
public/scss/components/app/_apps.scss
Normal file
6
public/scss/components/app/_apps.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@import "app-calender-date";
|
||||
@import "app-calender-event";
|
||||
@import "email";
|
||||
@import "profile";
|
||||
@import "chat";
|
||||
@import "edit-profile";
|
||||
208
public/scss/components/app/_chat.scss
Normal file
208
public/scss/components/app/_chat.scss
Normal file
@@ -0,0 +1,208 @@
|
||||
|
||||
.event-chat-ryt{
|
||||
|
||||
.chat-area{
|
||||
.chat-reciver,
|
||||
.chat-sender {
|
||||
margin-bottom: 1.875rem;
|
||||
padding: 0;
|
||||
img{
|
||||
border-radius: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
|
||||
&-body {
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
// max-width: 60%;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
top: 103%;
|
||||
position: relative;
|
||||
border: 0.0625rem solid $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-reciver{
|
||||
padding: .5rem 1rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.media {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
.media-body {
|
||||
margin-#{$dlab-pos-right}: 2rem;
|
||||
text-align: #{$dlab-pos-right};
|
||||
|
||||
p {
|
||||
background: $white;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0.3125rem 0.3125rem 0 0.3125rem;
|
||||
|
||||
span {
|
||||
text-align: #{$dlab-pos-left};
|
||||
border: 0.0625rem solid $border;
|
||||
|
||||
&::after{
|
||||
content: "";
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-bottom: 0.0625rem solid $border;
|
||||
border-#{$dlab-pos-right}: 0.0625rem solid $border;
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: 0;
|
||||
bottom: 0;
|
||||
background: $white;
|
||||
-webkit-transform: rotate(-45deg) translateX(15px);
|
||||
transform: rotate(-45deg) translateX(15px);
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
-webkit-transform: rotate(135deg) translateY(15px);
|
||||
transform: rotate(135deg) translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
font-size: 0.75rem;
|
||||
color: $body-color;
|
||||
font-weight: 400;
|
||||
bottom: 0;
|
||||
#{$dlab-pos-left}: -5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-sender{
|
||||
text-align: #{$dlab-pos-left};
|
||||
padding: .5rem 1rem;
|
||||
|
||||
.media {
|
||||
|
||||
.media-body {
|
||||
margin-#{$dlab-pos-left}: 2rem;
|
||||
|
||||
p {
|
||||
background-color: $white;
|
||||
margin-bottom: 0;
|
||||
span {
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-bottom: 0.0625rem solid $border;
|
||||
border-#{$dlab-pos-left}: 0.0625rem solid $border;
|
||||
position: absolute;
|
||||
#{$dlab-pos-left}: 0;
|
||||
bottom: 0;
|
||||
background: $white;
|
||||
-webkit-transform: rotate(45deg) translateX(-15px);
|
||||
transform: rotate(45deg) translateX(-15px);
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
-webkit-transform: rotate(-135deg) translateY(15px);
|
||||
transform: rotate(-135deg) translateY(15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
font-size: 0.625rem;
|
||||
color: $body-color;
|
||||
font-weight: 400;
|
||||
bottom: 0;
|
||||
#{$dlab-pos-right}: -5rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.char-type{
|
||||
padding-top: 1.875rem;
|
||||
padding-bottom: 1.875rem;
|
||||
|
||||
form{
|
||||
|
||||
.form-control{
|
||||
height: 2.8125rem;
|
||||
// border-radius: 1.875rem;
|
||||
padding-#{$dlab-pos-left}: 1.125rem;
|
||||
background: $body-bg;
|
||||
border-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
|
||||
.input-group{
|
||||
|
||||
&-append{
|
||||
i{
|
||||
color: $gray;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.input-group-text{
|
||||
padding-#{$dlab-pos-left}: .7rem;
|
||||
padding-#{$dlab-pos-right}: .7rem;
|
||||
background: $body-bg;
|
||||
border-color: $border;
|
||||
border-#{$dlab-pos-left}: 0;
|
||||
|
||||
&:last-child{
|
||||
// border-bottom-#{$dlab-pos-right}-radius: 1.875rem;
|
||||
// border-bottom-#{$dlab-pos-right}-radius: 1.875rem;
|
||||
padding-#{$dlab-pos-right}: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-avatar{
|
||||
padding: 1.5625rem 0;
|
||||
border-bottom: 0.0625rem solid $border;
|
||||
&:last-child{
|
||||
border-bottom: 0rem;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.avatar-status{
|
||||
position: relative;
|
||||
i{
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
158
public/scss/components/app/_edit-profile.scss
Normal file
158
public/scss/components/app/_edit-profile.scss
Normal file
@@ -0,0 +1,158 @@
|
||||
.profile-form{
|
||||
|
||||
.card-header{
|
||||
border-color: $border-color;
|
||||
padding: 30px;
|
||||
.title{
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
color: $dark;
|
||||
&:after{
|
||||
content: "";
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-color: var(--primary);
|
||||
position: absolute;
|
||||
bottom: -31px;
|
||||
#{$dlab-pos-left}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-b30{
|
||||
margin-bottom:30px;
|
||||
}
|
||||
.card-body{
|
||||
padding: 40px 40px 10px;
|
||||
}
|
||||
.card-footer{
|
||||
padding: 35px 40px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.btn-lg{
|
||||
padding: 18px 50px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.btn-link{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
@include respond('phone'){
|
||||
.card-header{
|
||||
padding: 25px;
|
||||
.title{
|
||||
&:after{
|
||||
bottom: -26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
padding: 25px 25px 0;
|
||||
}
|
||||
.card-footer{
|
||||
padding: 25px 25px 25px;
|
||||
.btn-lg{
|
||||
padding: 18px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.author-profile{
|
||||
text-align:center;
|
||||
.card-body{
|
||||
padding: 0;
|
||||
}
|
||||
.author-media{
|
||||
position: relative;
|
||||
margin-#{$dlab-pos-left}: auto;
|
||||
margin-#{$dlab-pos-right}: auto;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
img{
|
||||
width: 130px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
.author-info{
|
||||
.title{
|
||||
font-size:15px;
|
||||
font-weight:500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
span{
|
||||
display:block;
|
||||
color: $body-color;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-list{
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 18px 30px;
|
||||
color: $dark;
|
||||
a{
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
span{
|
||||
color: $body-color;
|
||||
font-weight: 500;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-top: 1px solid $d-border;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-footer {
|
||||
padding: 30px;
|
||||
display: block;
|
||||
.form-control {
|
||||
height: 45px;
|
||||
border-color: $border-color;
|
||||
overflow:hidden;
|
||||
line-height: 30px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-card;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload-link {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 32px;
|
||||
background: var(--primary);
|
||||
bottom: 0;
|
||||
#{$dlab-pos-right}: 0px;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 24, 128, 0.1);
|
||||
border-radius: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
border: 2px solid #fff;
|
||||
.update-flie {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
#{$dlab-pos-left}: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
538
public/scss/components/app/_email.scss
Normal file
538
public/scss/components/app/_email.scss
Normal file
@@ -0,0 +1,538 @@
|
||||
.email-left-box {
|
||||
width: 15rem;
|
||||
float : #{$dlab-pos-left};
|
||||
padding: 0 1.25rem 1.25rem 1rem;
|
||||
border-top: 0;
|
||||
border-#{$dlab-pos-left}: 0;
|
||||
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
width: 100%;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 100%;
|
||||
float: none;
|
||||
border: none;
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-title{
|
||||
background: var(--rgba-primary-1);
|
||||
padding: 1rem;
|
||||
margin: 1.875rem 0 1.25rem 0;
|
||||
|
||||
h5{
|
||||
margin-bottom: 0;
|
||||
color: var(--primary);
|
||||
font-size: 14px;
|
||||
|
||||
i{
|
||||
font-size: 0.75rem;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
color: var(--rgba-primary-1);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.email-right-box {
|
||||
// padding-top: 1.875rem;
|
||||
padding-#{$dlab-pos-left}: 15rem;
|
||||
padding-#{$dlab-pos-right}: 1rem;
|
||||
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
padding-#{$dlab-pos-left}: 0;
|
||||
padding-#{$dlab-pos-right}:0;
|
||||
margin-#{$dlab-pos-left}: 0!important;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
padding-#{$dlab-pos-left}: 0;
|
||||
padding-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
|
||||
.right-box-border{
|
||||
border-#{$dlab-pos-right}: 2px solid var(--rgba-primary-1);
|
||||
}
|
||||
|
||||
.right-box-padding{
|
||||
|
||||
@media screen and (min-width: 649px) and (max-width: 1200px){
|
||||
padding-#{$dlab-pos-left}: 1.25rem;
|
||||
}
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-#{$dlab-pos-left}: 0.9375rem;
|
||||
}
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
padding-#{$dlab-pos-left}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
.btn-group {
|
||||
.btn {
|
||||
border: 0;
|
||||
}
|
||||
input{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.read-content {
|
||||
textarea {
|
||||
height:150px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
&-email{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
h5{
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
p{
|
||||
|
||||
strong{
|
||||
color: #6a707e;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
|
||||
p{
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-attachment{
|
||||
padding: 0.5rem 0;
|
||||
|
||||
h6{
|
||||
font-size: 1.125rem;
|
||||
color: #6a707e;
|
||||
|
||||
i{
|
||||
padding-#{$dlab-pos-right}: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment{
|
||||
|
||||
& > div:not(:last-child){
|
||||
border-#{$dlab-pos-right}: 1px solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-content {
|
||||
.wysihtml5-toolbar {
|
||||
border-color: $l-border;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
background: $l-bg!important;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: 1.0625rem;
|
||||
color: #6a707e;
|
||||
|
||||
i{
|
||||
font-size: 1.125rem;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone{
|
||||
border: 1px dashed #DDDFE1;
|
||||
min-height: 13.125rem;
|
||||
position: relative;
|
||||
border-radius:$radius;
|
||||
|
||||
.dlab-message{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
#{$dlab-pos-left}: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-list {
|
||||
display: block;
|
||||
padding-#{$dlab-pos-left}: 0;
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 3.125rem;
|
||||
line-height: 3.125rem;
|
||||
cursor: default;
|
||||
transition-duration: 0.3s;
|
||||
a {
|
||||
color: $l-ctl;
|
||||
}
|
||||
|
||||
&-single{
|
||||
.custom-checkbox{
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
i{
|
||||
color: $muted;
|
||||
font-size: 1.125rem;
|
||||
padding-#{$dlab-pos-left}: .4rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
transition-duration: 0.05s;
|
||||
background: rgba(152, 166, 173, 0.15);
|
||||
}
|
||||
|
||||
.col-mail {
|
||||
float : #{$dlab-pos-left};
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-mail-1 {
|
||||
width: 5.625rem;
|
||||
|
||||
.star-toggle {
|
||||
display: block;
|
||||
float : #{$dlab-pos-left};
|
||||
margin-top: 1.125rem;
|
||||
font-size: 1rem;
|
||||
margin-#{$dlab-pos-left}: 0.3125rem;
|
||||
}
|
||||
|
||||
.email-checkbox {
|
||||
display: block;
|
||||
float : #{$dlab-pos-left};
|
||||
margin: 0.9375rem 0.625rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: block;
|
||||
float : #{$dlab-pos-left};
|
||||
border: .4rem solid transparent;
|
||||
border-radius: 6.25rem;
|
||||
margin: 1.375rem 1.625rem 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col-mail-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$dlab-pos-left}: 5.625rem;
|
||||
#{$dlab-pos-right}: 0;
|
||||
bottom: 0;
|
||||
|
||||
.subject {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$dlab-pos-left}: 0;
|
||||
#{$dlab-pos-right}: 5.5rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$dlab-pos-right}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-checkbox {
|
||||
cursor: pointer;
|
||||
height: 0.9375rem;
|
||||
width: 0.9375rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: .1rem;
|
||||
position: relative;
|
||||
top: 0.3125rem;
|
||||
box-shadow: inset 0 0 0 .1rem $l-ctl;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked {
|
||||
label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: .3rem;
|
||||
#{$dlab-pos-left}: .3rem;
|
||||
#{$dlab-pos-right}: .3rem;
|
||||
bottom: .3rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
margin-bottom: 0 !important;
|
||||
transition-duration: 0.05s;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-list {
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
padding: 0.625rem 0.9375rem;
|
||||
display: block;
|
||||
background: transparent;
|
||||
color: $l-ctd;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.list-group-item{
|
||||
color: #6a707e;
|
||||
padding: 0.75rem 1.0625rem;
|
||||
&:hover{
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 1rem;
|
||||
padding-#{$dlab-pos-right}: 0.625rem;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: $white;
|
||||
background-color:var(--primary);
|
||||
border-color:var(--primary);
|
||||
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-wrap{
|
||||
padding: 1.0625rem 1.875rem;
|
||||
|
||||
.media{
|
||||
|
||||
.media-body{
|
||||
|
||||
h6{
|
||||
font-size: 1.0625rem;
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-filter{
|
||||
|
||||
@media (min-width: 648px){
|
||||
padding-#{$dlab-pos-left}: 1.25rem;
|
||||
}
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-#{$dlab-pos-left}: 1.875rem;
|
||||
}
|
||||
|
||||
.input-group{
|
||||
|
||||
&-prepend{
|
||||
|
||||
i{
|
||||
font-size: 0.875rem;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.input-group-text{
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDDFE1 !important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
padding: 0 0 0 0.3125rem;
|
||||
border: 0;
|
||||
font-size: 0.875rem;
|
||||
height: 1.875rem;
|
||||
color: $muted;
|
||||
border-bottom: 1px solid #DDDFE1;
|
||||
|
||||
&::placeholder{
|
||||
font-size: 0.875rem;
|
||||
color: $muted;
|
||||
}
|
||||
}
|
||||
|
||||
& > .form-control{
|
||||
min-height: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-mail{
|
||||
display: block;
|
||||
padding: 1.5625rem 0;
|
||||
|
||||
.media{
|
||||
padding-#{$dlab-pos-left}: 1.25rem;
|
||||
padding-#{$dlab-pos-right}: 1.25rem;
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-#{$dlab-pos-left}: 1.875rem;
|
||||
padding-#{$dlab-pos-right}: 1.875rem;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
margin-#{$dlab-pos-right}: 0.9375rem;
|
||||
|
||||
@media(min-width: 1700px){
|
||||
margin-#{$dlab-pos-right}: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
|
||||
h6{
|
||||
color: #abafb3;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
color: #6a707e;
|
||||
|
||||
button{
|
||||
|
||||
i{
|
||||
font-size: 1.125rem;
|
||||
color: #abafb3;
|
||||
font-weight: bold;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 0.875rem;
|
||||
color: #abafb3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
background: var(--primary);
|
||||
|
||||
h6,h4,p,i{
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.email-list .message-single i.yellow{
|
||||
color:$warning!important;
|
||||
}
|
||||
|
||||
@include respond ('phone'){
|
||||
.email-left-body{
|
||||
width: 18rem;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
transition: all 0.5s;
|
||||
#{$dlab-pos-left}: -22rem;
|
||||
top: 0px;
|
||||
z-index: 999;
|
||||
&.active{
|
||||
#{$dlab-pos-left}:0;
|
||||
background: $white;
|
||||
transition:all 0.5s;
|
||||
overflow-y:scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-tools-box{
|
||||
display:inline-block;
|
||||
width:40px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
text-align:center;
|
||||
background-color:var(--rgba-primary-1);
|
||||
border-radius:$radius;
|
||||
color:var(--primary);
|
||||
|
||||
&.active{
|
||||
background-color:var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
|
||||
display:none!important;
|
||||
@include respond ('phone'){
|
||||
display:inline-block!important;
|
||||
margin-#{$dlab-pos-left}:auto;
|
||||
}
|
||||
&.active{
|
||||
&:before{
|
||||
content: '';
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
#{$dlab-pos-left}: 0;
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
border-radius:0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.email-left-box{
|
||||
margin-bottom: 20px;
|
||||
@include respond ('tab-land'){
|
||||
margin-#{$dlab-pos-right}:-10px;
|
||||
}
|
||||
@include respond ('tab-port'){
|
||||
margin:0;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
0
public/scss/components/app/_invoice.scss
Normal file
0
public/scss/components/app/_invoice.scss
Normal file
207
public/scss/components/app/_profile.scss
Normal file
207
public/scss/components/app/_profile.scss
Normal file
@@ -0,0 +1,207 @@
|
||||
.photo-content{
|
||||
position: relative;
|
||||
.cover-photo{
|
||||
background: url(../images/profile/cover.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 15.625rem;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.profile .profile-photo {
|
||||
max-width: 6.25rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -4.5rem;
|
||||
margin-#{$dlab-pos-right}: 0.625rem;
|
||||
|
||||
@include respond('phone') {
|
||||
margin-top: -2.5rem;
|
||||
width: 5rem;
|
||||
margin-#{$dlab-pos-left}: auto;
|
||||
margin-#{$dlab-pos-right}: auto;
|
||||
margin-bottom:1.25rem;
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
|
||||
.profile .profile-photo {
|
||||
#{$dlab-pos-left}: auto;
|
||||
#{$dlab-pos-right}: 0;
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
margin-#{$dlab-pos-left}: 0.9375rem;
|
||||
|
||||
@include respond('tab-land') {
|
||||
#{$dlab-pos-right}: 0.9375rem;
|
||||
}
|
||||
@include respond('phone') {
|
||||
width: 5rem;
|
||||
#{$dlab-pos-right}: calc(50% - 2.5rem);
|
||||
top: -6.25rem;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-info{
|
||||
padding: 0.9375rem 1.25rem;
|
||||
// margin-bottom: 1.875rem;
|
||||
@include respond('phone') {
|
||||
padding: 0 0 1.25rem;
|
||||
text-align:center;
|
||||
}
|
||||
h4 {
|
||||
color: $l-ctd!important;
|
||||
}
|
||||
|
||||
h4.text-primary {
|
||||
color: var(--primary)!important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $l-ctl;
|
||||
}
|
||||
|
||||
.prf-col{
|
||||
min-width: 15.625rem;
|
||||
padding: 0.625rem 3.125rem 0;
|
||||
}
|
||||
}
|
||||
.profile-interest{
|
||||
.row{
|
||||
margin: 0 -0.0437rem;
|
||||
.int-col{
|
||||
padding: 0 0.0437rem;
|
||||
.interest-cat{
|
||||
margin-bottom: 0.0875rem;
|
||||
position: relative;
|
||||
display: block;
|
||||
&:after{
|
||||
background: $black;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
#{$dlab-pos-left}: 0;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
p{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.3125rem;
|
||||
#{$dlab-pos-left}: 0;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
color:white;
|
||||
font-size: 0.075rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-tab{
|
||||
.nav-item{
|
||||
.nav-link{
|
||||
font-size: 1rem;
|
||||
margin-#{$dlab-pos-right}: 1.875rem;
|
||||
transition: all 0.5s ease-in-out;
|
||||
border: none;
|
||||
border-bottom: 0.0125rem solid transparent;
|
||||
color: $l-ctl;
|
||||
|
||||
&:hover, &.active{
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
border-bottom: 0.0125rem solid var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
@include respond ('phone'){
|
||||
margin-#{$dlab-pos-right}:0rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.profile-info{
|
||||
display:flex;
|
||||
@include respond('phone') {
|
||||
display:block;
|
||||
}
|
||||
.profile-details {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@include respond('phone') {
|
||||
display:block;
|
||||
.dropdown{
|
||||
position: absolute;
|
||||
top: 1.875rem;
|
||||
#{$dlab-pos-right}: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-input{
|
||||
margin-bottom: 1.875rem;
|
||||
.form-control{
|
||||
/* height: 4.6875rem; */
|
||||
font-weight: 400;
|
||||
margin: 0.9375rem 0;
|
||||
}
|
||||
.btn-social{
|
||||
font-size: 1.25rem;
|
||||
height: 3.4375rem;
|
||||
display:inline-block;
|
||||
padding: 0;
|
||||
text-align:center;
|
||||
border-radius:$radius;
|
||||
color:$white;
|
||||
width: 3.4375rem;
|
||||
line-height: 3.375rem;
|
||||
&.facebook{
|
||||
background-color: #3B5998;
|
||||
}
|
||||
&.google-plus{
|
||||
background-color: #DE4E43;
|
||||
}
|
||||
&.linkedin{
|
||||
background-color: #007BB6;
|
||||
}
|
||||
&.instagram{
|
||||
background-color: #8A5A4E;
|
||||
}
|
||||
&.twitter{
|
||||
background-color: #1EA1F3;
|
||||
}
|
||||
&.youtube{
|
||||
background-color: #CE201F;
|
||||
}
|
||||
&.whatsapp{
|
||||
background-color: #01C854;
|
||||
}
|
||||
i{
|
||||
margin:0!important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.profile-uoloaded-post{
|
||||
|
||||
img{
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
a{
|
||||
h4{
|
||||
margin-bottom: 0.625rem;
|
||||
color: $l-ctd;
|
||||
}
|
||||
}
|
||||
}
|
||||
176
public/scss/components/charts/_chart-amchart.scss
Normal file
176
public/scss/components/charts/_chart-amchart.scss
Normal file
@@ -0,0 +1,176 @@
|
||||
#revenue-chart {
|
||||
height: 27.7rem;
|
||||
}
|
||||
|
||||
|
||||
#duration-value-axis {
|
||||
height: 27.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#combined-bullet {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#zoomable-chart {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#chartMap {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#professional-candlesticks {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#comparing-stock-indices {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#multiple-panel-data {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#depth-chart {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
.amcharts-export-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.amcharts-data-set-selector-div {
|
||||
position: absolute;
|
||||
#{$dlab-pos-left}: 0;
|
||||
#{$dlab-pos-right}: 0;
|
||||
text-align: center;
|
||||
width: 16.875rem;
|
||||
margin: 0 auto;
|
||||
select {
|
||||
border: 0;
|
||||
margin-#{$dlab-pos-left}: 0.625rem;
|
||||
background: #ddd;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.amChartsInputField {
|
||||
border: 0;
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
padding: 0.3125rem 0.9375rem;
|
||||
margin: 0 0.9375rem;
|
||||
}
|
||||
|
||||
.amcharts-data-set-select {
|
||||
border: 0;
|
||||
background: #ddd;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.amcharts-period-input,
|
||||
.amcharts-period-input-selected {
|
||||
border: 0;
|
||||
margin-#{$dlab-pos-left}: 0.625rem;
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
padding: 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// CSS Animation
|
||||
///////////////////
|
||||
.amcharts-graph-g2 .amcharts-graph-stroke {
|
||||
stroke-dasharray: 0.1875rem 0.1875rem;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
-webkit-animation: am-moving-dashes 1s linear infinite;
|
||||
animation: am-moving-dashes 1s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-moving-dashes {
|
||||
100% {
|
||||
stroke-dashoffset: -1.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-moving-dashes {
|
||||
100% {
|
||||
stroke-dashoffset: -1.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lastBullet {
|
||||
-webkit-animation: am-pulsating 1s ease-out infinite;
|
||||
animation: am-pulsating 1s ease-out infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-pulsating {
|
||||
0% {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
stroke-width: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-pulsating {
|
||||
0% {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
stroke-width: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.amcharts-graph-column-front {
|
||||
-webkit-transition: all .3s .3s ease-out;
|
||||
transition: all .3s .3s ease-out;
|
||||
}
|
||||
|
||||
.amcharts-graph-column-front:hover {
|
||||
fill: #496375;
|
||||
stroke: #496375;
|
||||
-webkit-transition: all .3s ease-out;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-draw {
|
||||
0% {
|
||||
stroke-dashoffset: 500%;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-draw {
|
||||
0% {
|
||||
stroke-dashoffset: 500%;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.amChartsPeriodSelector {
|
||||
&>fieldset>div {
|
||||
@include respond('tab-port') {
|
||||
float: none !important;
|
||||
display: block !important;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/scss/components/charts/_chart-c3.scss
Normal file
13
public/scss/components/charts/_chart-c3.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
|
||||
.c3{
|
||||
height: 15.625rem;
|
||||
}
|
||||
.c3-legend-item {
|
||||
fill: #9fabb1;
|
||||
}
|
||||
|
||||
.c3 .c3-axis-x path,
|
||||
.c3 .c3-axis-x line,
|
||||
.c3 .c3-axis-y path,
|
||||
.c3 .c3-axis-y line,
|
||||
.tick text { stroke: $white; }
|
||||
128
public/scss/components/charts/_chart-chartist.scss
Normal file
128
public/scss/components/charts/_chart-chartist.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
|
||||
|
||||
|
||||
.ct-golden-section:before {
|
||||
float: none;
|
||||
}
|
||||
.ct-chart {
|
||||
max-height: 15.7rem;
|
||||
}
|
||||
.ct-chart .ct-label {
|
||||
fill: #a3afb7;
|
||||
color: #a3afb7;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.ct-grid {
|
||||
stroke: rgba(49, 58, 70, 0.1);
|
||||
}
|
||||
.ct-chart.simple-pie-chart-chartist .ct-label {
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-a .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-a .ct-line,
|
||||
.ct-chart .ct-series.ct-series-a .ct-point,
|
||||
.ct-chart .ct-series.ct-series-a .ct-slice-donut {
|
||||
stroke: var(--primary);
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-b .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-b .ct-line,
|
||||
.ct-chart .ct-series.ct-series-b .ct-point,
|
||||
.ct-chart .ct-series.ct-series-b .ct-slice-donut {
|
||||
stroke: $success;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-c .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-c .ct-line,
|
||||
.ct-chart .ct-series.ct-series-c .ct-point,
|
||||
.ct-chart .ct-series.ct-series-c .ct-slice-donut {
|
||||
stroke: $warning;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-d .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-d .ct-line,
|
||||
.ct-chart .ct-series.ct-series-d .ct-point,
|
||||
.ct-chart .ct-series.ct-series-d .ct-slice-donut {
|
||||
stroke: $danger;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-e .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-e .ct-line,
|
||||
.ct-chart .ct-series.ct-series-e .ct-point,
|
||||
.ct-chart .ct-series.ct-series-e .ct-slice-donut {
|
||||
stroke: $info;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-f .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-f .ct-line,
|
||||
.ct-chart .ct-series.ct-series-f .ct-point,
|
||||
.ct-chart .ct-series.ct-series-f .ct-slice-donut {
|
||||
stroke: $dark;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-g .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-g .ct-line,
|
||||
.ct-chart .ct-series.ct-series-g .ct-point,
|
||||
.ct-chart .ct-series.ct-series-g .ct-slice-donut {
|
||||
stroke: #8d6e63;
|
||||
}
|
||||
.ct-series-a .ct-area,
|
||||
.ct-series-a .ct-slice-pie {
|
||||
fill: $secondary;
|
||||
}
|
||||
.ct-series-b .ct-area,
|
||||
.ct-series-b .ct-slice-pie {
|
||||
fill: #00A2FF;
|
||||
}
|
||||
.ct-series-c .ct-area,
|
||||
.ct-series-c .ct-slice-pie {
|
||||
fill: #ff9800;
|
||||
}
|
||||
.ct-series-d .ct-area,
|
||||
.ct-series-d .ct-slice-pie {
|
||||
fill: #ff9800;
|
||||
}
|
||||
.chartist-tooltip {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
min-width: 0.625rem;
|
||||
padding: 0.125rem 0.625rem;
|
||||
border-radius: 0.125rem;
|
||||
background: #313a46;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
-webkit-transition: opacity .2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
-o-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
}
|
||||
.chartist-tooltip.tooltip-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#donught_graph {
|
||||
.ct-series.ct-series-a .ct-slice-donut {
|
||||
stroke: #3FC6D4;
|
||||
}
|
||||
|
||||
.ct-series.ct-series-b .ct-slice-donut {
|
||||
stroke: #333333;
|
||||
}
|
||||
|
||||
.ct-series.ct-series-c .ct-slice-donut {
|
||||
stroke: #F63465;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#pie-chart .ct-label{
|
||||
@include respond ('phone-land'){
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
92
public/scss/components/charts/_chart-chartjs.scss
Normal file
92
public/scss/components/charts/_chart-chartjs.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
|
||||
#visitor_graph {
|
||||
height: 15.8125rem !important;
|
||||
}
|
||||
|
||||
#user_rating_graph {
|
||||
height: 17.5rem !important;
|
||||
}
|
||||
|
||||
#activity {
|
||||
height: 20rem !important;
|
||||
}
|
||||
|
||||
#visitorOnline{
|
||||
height: 4.5rem !important;
|
||||
}
|
||||
#trendMeter{
|
||||
height: 4.5rem !important;
|
||||
}
|
||||
#widget-revenue1,
|
||||
#widget-revenue2,
|
||||
#widget-revenue3{
|
||||
height: 7.3125rem !important;
|
||||
}
|
||||
#widget-profit1,
|
||||
#widget-profit2,
|
||||
#widget-profit3{
|
||||
height: 10rem !important;
|
||||
}
|
||||
|
||||
#comparison-rate{
|
||||
height: 14.375rem;
|
||||
}
|
||||
#session_day{
|
||||
height: 10.9375rem;
|
||||
width: auto!important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#walet-status {
|
||||
height: 8.75rem;
|
||||
}
|
||||
#bar1 {
|
||||
height: 9.375rem;
|
||||
}
|
||||
#sold-product {
|
||||
height: 14.375rem;
|
||||
}
|
||||
|
||||
|
||||
#chart-venue-expenses,
|
||||
#chart-online-sale,
|
||||
#chart-gross-sale{
|
||||
height: 9.375rem !important;
|
||||
}
|
||||
|
||||
|
||||
#areaChart_3{
|
||||
height: 18.4375rem !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.chart-point{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
|
||||
.check-point-area{
|
||||
width:6.25rem;
|
||||
height: 6.25rem;
|
||||
margin-top: -0.625rem;
|
||||
margin-#{$dlab-pos-left}: -0.625rem;
|
||||
}
|
||||
.chart-point-list{
|
||||
margin:0;
|
||||
padding-#{$dlab-pos-left}: 0.3125rem;
|
||||
|
||||
li{
|
||||
list-style:none;
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.125rem 0;
|
||||
|
||||
i{
|
||||
margin-#{$dlab-pos-right}: 0.3125rem;
|
||||
font-size: 0.6875rem;
|
||||
position: relative;
|
||||
top: -0.0625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
39
public/scss/components/charts/_chart-flot.scss
Normal file
39
public/scss/components/charts/_chart-flot.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
|
||||
|
||||
.flot-chart{
|
||||
height: 15.7rem;
|
||||
}
|
||||
|
||||
.tooltipflot {
|
||||
background-color: transparent;
|
||||
font-size: 1.4rem;
|
||||
padding: .5rem 1rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: .2rem; }
|
||||
|
||||
.legendColorBox > div {
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.legendLabel {
|
||||
font-size: 0.825rem;
|
||||
padding-#{$dlab-pos-left}: .5rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.flotTip {
|
||||
background: $black;
|
||||
border: 0.0625rem solid $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.legend > div{
|
||||
background: transparent!important;
|
||||
}
|
||||
|
||||
#balance_graph {
|
||||
height: 16.25rem;
|
||||
}
|
||||
11
public/scss/components/charts/_chart-highcharts.scss
Normal file
11
public/scss/components/charts/_chart-highcharts.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.highcharts-root {
|
||||
text {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.highcharts-credits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
54
public/scss/components/charts/_chart-morris.scss
Normal file
54
public/scss/components/charts/_chart-morris.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.morris-hover {
|
||||
position: absolute;
|
||||
z-index : 1;
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.morris-hover .morris-hover-point {
|
||||
color: $white !important;
|
||||
margin: 0.1875rem 0;
|
||||
text-align: center;
|
||||
padding: 0 1.5625rem;
|
||||
}
|
||||
|
||||
.morris-hover .morris-hover-row-label {
|
||||
background-color: $dark;
|
||||
text-align: center;
|
||||
padding: 0.3125rem;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
.morris-hover.morris-default-style {
|
||||
border-radius: 0.3125rem;
|
||||
padding : 0;
|
||||
margin: 0;
|
||||
border : none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
#morris_donught,
|
||||
#morris_donught_2,
|
||||
#line_chart_2,
|
||||
#morris_bar,
|
||||
#morris_bar_stalked,
|
||||
#morris_bar_2,
|
||||
#morris_area_2,
|
||||
#morris_area {
|
||||
height: 15rem !important;
|
||||
}
|
||||
|
||||
#morris_line {
|
||||
height: 17.375rem !important;
|
||||
}
|
||||
|
||||
|
||||
#crypto-btc-card,
|
||||
#crypto-eth-card,
|
||||
#crypto-rpl-card,
|
||||
#crypto-ltc-card {
|
||||
height: 9.375rem;
|
||||
}
|
||||
|
||||
|
||||
25
public/scss/components/charts/_chart-sparkline.scss
Normal file
25
public/scss/components/charts/_chart-sparkline.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
#daily-sales, #comparison-rate, #usage-chart, #walet-status {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
canvas {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sparkline-composite-chart,
|
||||
#composite-bar,
|
||||
#sparkline11,
|
||||
#StackedBarChart,
|
||||
#spark-bar,
|
||||
#tristate {
|
||||
canvas {
|
||||
height: 6.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sparkline11 canvas {
|
||||
width: 6.25rem !important;
|
||||
}
|
||||
10
public/scss/components/charts/_charts.scss
Normal file
10
public/scss/components/charts/_charts.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "./chart-chartist";
|
||||
@import "./chart-chartjs";
|
||||
@import "./chart-c3";
|
||||
@import "./chart-flot";
|
||||
@import "./chart-morris";
|
||||
@import "./chart-sparkline";
|
||||
@import "./easy-pie-chart";
|
||||
@import "./chart-amchart";
|
||||
@import "./chart-highcharts";
|
||||
@import "./echarts";
|
||||
23
public/scss/components/charts/_easy-pie-chart.scss
Normal file
23
public/scss/components/charts/_easy-pie-chart.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.easy-pie-chart {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
#{$dlab-pos-left}: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 4.6875rem;
|
||||
height: 4.6875rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
4
public/scss/components/charts/_echarts.scss
Normal file
4
public/scss/components/charts/_echarts.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
#chart_employee_gender, #chart_employee_status {
|
||||
width: auto;
|
||||
height: 21.875rem;
|
||||
}
|
||||
46
public/scss/components/forms/_form-addons-cropper.scss
Normal file
46
public/scss/components/forms/_form-addons-cropper.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
#image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.docs-options {
|
||||
.dropdown-menu {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-preview {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.img-preview {
|
||||
float : #{$dlab-pos-left};
|
||||
margin-#{$dlab-pos-right}: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
overflow: hidden;
|
||||
max-width: 100% !important;
|
||||
|
||||
&>img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&.preview-lg {
|
||||
width: 16rem;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
&.preview-md {
|
||||
width: 8rem;
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
&.preview-sm {
|
||||
width: 4rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
&.preview-xs {
|
||||
width: 2rem;
|
||||
height: 1.125rem;
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
238
public/scss/components/forms/_form-addons-select2.scss
Normal file
238
public/scss/components/forms/_form-addons-select2.scss
Normal file
@@ -0,0 +1,238 @@
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
border-radius: $radius;
|
||||
border: 1px solid var(--border);
|
||||
height: 2.8rem;
|
||||
background: var(--card);
|
||||
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 2.8rem;
|
||||
color:$body-color;
|
||||
padding-#{$dlab-pos-left}: 15px;
|
||||
min-height: 2.8rem;
|
||||
text-align: #{$dlab-pos-left};
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border-color: $border;
|
||||
border-radius: 0;
|
||||
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||
border-color: var(--border);
|
||||
background: var(--card);
|
||||
color: var(--text-dark);
|
||||
text-align: #{$dlab-pos-left} !important;
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
top: 10px;
|
||||
#{$dlab-pos-left}: auto;
|
||||
#{$dlab-pos-right}: 15px;
|
||||
}
|
||||
.select2-container .select2-selection--multiple{
|
||||
min-height: 2.8rem;
|
||||
color:var(--text);
|
||||
border-radius: $radius;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--card);
|
||||
}
|
||||
|
||||
.select2-dropdown{
|
||||
border-color: var(--border);
|
||||
background-color: var(--card);
|
||||
}
|
||||
.swal2-popup .swal2-content{
|
||||
color:var(--text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.select2-selection__clear{
|
||||
display:none;
|
||||
}
|
||||
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{
|
||||
background-color:var(--primary);
|
||||
}
|
||||
.select2-container--classic.select2-container--open .select2-selection--multiple,.select2-container--classic.select2-container--open .select2-dropdown{
|
||||
border-color:var(--primary);
|
||||
}
|
||||
.select2-container--open .select2-dropdown{
|
||||
background-color:var(--card);
|
||||
border-radius: $radius;
|
||||
padding:1rem 0;
|
||||
box-shadow:0px 0px 50px 0px rgba(82, 63, 105, 0.15);
|
||||
&.select2-dropdown--above{
|
||||
border-radius:$radius $radius 0 0;
|
||||
}
|
||||
&.select2-dropdown--below{
|
||||
border-radius:0 0 $radius $radius;
|
||||
}
|
||||
}
|
||||
.select2-container--default .select2-search--dropdown .select2-search__field{
|
||||
border-radius:$radius;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-color: var(--border);
|
||||
margin: 0 0 0.5rem 0;
|
||||
background-color: var(--card);
|
||||
color: var(--text-dark);
|
||||
text-align: #{$dlab-pos-left};
|
||||
}
|
||||
.select2-search--dropdown{
|
||||
padding: 0.5rem 1.25rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
.select2-results__options{
|
||||
li{
|
||||
padding: var(--dz-list-space-y) var(--dz-list-space-x);
|
||||
font-size: var(--dz-list-size);
|
||||
margin: 0 0;
|
||||
background-color:var(--card);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--selected{
|
||||
background-color: var(--light);
|
||||
color: var(--primary);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected]{
|
||||
background-color:var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
.select2-container .select2-search--inline .select2-search__field{
|
||||
background:transparent;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__clear{
|
||||
display:none;
|
||||
}
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice,
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice{
|
||||
border-radius: $radius;
|
||||
border: 0;
|
||||
background-color: var(--rgba-primary-1);
|
||||
font-size: .85rem;
|
||||
color: var(--primary);
|
||||
padding: 5px 0;
|
||||
padding-#{$dlab-pos-right}: 8px;
|
||||
padding-#{$dlab-pos-left}: 32px;
|
||||
position: relative;
|
||||
}
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
|
||||
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{
|
||||
height: 100%;
|
||||
padding: 0 6px 0 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-#{$dlab-pos-right}: 1px solid;
|
||||
border-color: #fff;
|
||||
color: var(--primary);
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: auto;
|
||||
#{$dlab-pos-left}: 0;
|
||||
top: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: rgba(255,255,255,.1);
|
||||
}
|
||||
}
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
|
||||
display: block;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
padding-#{$dlab-pos-left}: 2px;
|
||||
padding-#{$dlab-pos-right}: 5px;
|
||||
}
|
||||
|
||||
.select2-label{
|
||||
margin-bottom:0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--bs-heading-color);
|
||||
font-size: 15px;
|
||||
}
|
||||
.select2-container--default.select2-container--disabled .select2-selection__choice{
|
||||
padding: 5px 8px 5px 8px;
|
||||
}
|
||||
.select2-container--classic.select2-container--open .select2-selection--single,
|
||||
.select2-container--classic .select2-selection--single:focus{
|
||||
border-color:var(--primary);
|
||||
}
|
||||
.select2-container {
|
||||
width: 100%!important;
|
||||
}
|
||||
.select2-container--default .select2-results__option--selectable{
|
||||
.select2-result-repository__avatar{
|
||||
height:50px;
|
||||
width : 50px;
|
||||
margin-#{$dlab-pos-right}:12px;
|
||||
img{
|
||||
width : 100%;
|
||||
height:100%;
|
||||
border-radius:$radius;
|
||||
}
|
||||
}
|
||||
&.select2-results__option--highlighted{
|
||||
.select2-result-repository__title{
|
||||
color : $white;
|
||||
}
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers,
|
||||
.select2-result-repository__watchers{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.select2-result-repository{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
|
||||
}
|
||||
.select2-result-repository__meta{
|
||||
flex:1;
|
||||
}
|
||||
.select2-result-repository__title{
|
||||
font-size:.95rem;
|
||||
color:#000;
|
||||
}
|
||||
.select2-result-repository__description{
|
||||
font-size:.75rem;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.select2-result-repository__statistics{
|
||||
display:flex;
|
||||
}
|
||||
.select2-result-repository__forks,
|
||||
.select2-result-repository__stargazers,
|
||||
.select2-result-repository__watchers{
|
||||
margin-#{$dlab-pos-right}:12px;
|
||||
font-size:.75rem;
|
||||
color:$headings-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tagify.form-control{
|
||||
@include respond('laptop'){
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
.tagify__tag > div::before {
|
||||
box-shadow: 0 0 0 20px var(--tag-bg) inset;
|
||||
}
|
||||
.tagify__tag__removeBtn:hover + div::before{
|
||||
box-shadow: 0 0 0 20px var(--tag-remove-bg,rgba(211,148,148,.3)) inset !important;
|
||||
}
|
||||
.select2-results__options{
|
||||
text-align: #{$dlab-pos-left};
|
||||
}
|
||||
60
public/scss/components/forms/_form-advance-taginput.scss
Normal file
60
public/scss/components/forms/_form-advance-taginput.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
|
||||
|
||||
.tagsinput {
|
||||
overflow-y : auto;
|
||||
display : block;
|
||||
width : 100%;
|
||||
height : 3.4rem;
|
||||
padding : .6rem 1.2rem;
|
||||
font-size : 1.4rem;
|
||||
line-height : 1.42857143;
|
||||
background-image : none;
|
||||
-webkit-border-radius: .4rem;
|
||||
border-radius : .4rem;
|
||||
|
||||
span.tag {
|
||||
display : block;
|
||||
float : left;
|
||||
padding : .3rem .8rem;
|
||||
text-decoration : none;
|
||||
margin-right : .5rem;
|
||||
margin-bottom : .5rem;
|
||||
font-size : 1.3rem;
|
||||
-webkit-border-radius: .3rem;
|
||||
border-radius : .3rem;
|
||||
|
||||
a {
|
||||
font-weight : bold;
|
||||
text-decoration: none;
|
||||
font-size : 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width : 8rem;
|
||||
margin : 0;
|
||||
font-size : 1.3rem;
|
||||
border : 1px solid transparent;
|
||||
padding : .5rem;
|
||||
background : transparent;
|
||||
outline : 0;
|
||||
margin-right : .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
float : left;
|
||||
}
|
||||
}
|
||||
|
||||
.tags_clear {
|
||||
clear : both;
|
||||
width : 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.not_valid {
|
||||
background: #FBD8DB !important;
|
||||
color : #90111A !important;
|
||||
}
|
||||
398
public/scss/components/forms/_form-basic.scss
Normal file
398
public/scss/components/forms/_form-basic.scss
Normal file
@@ -0,0 +1,398 @@
|
||||
|
||||
// Basic Input
|
||||
|
||||
.form-check{
|
||||
padding: 0;
|
||||
padding-#{$dlab-pos-left}: 1.5em;
|
||||
.form-check-input{
|
||||
float: #{$dlab-pos-left};
|
||||
margin-#{$dlab-pos-left}: -1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.3125rem 1.25rem;
|
||||
color: var(--text-dark);
|
||||
height: 2.85rem;
|
||||
background-color: var(--card);
|
||||
border-radius:$radius;
|
||||
&::placeholder{
|
||||
color: var(--text);
|
||||
}
|
||||
@include respond('laptop') {
|
||||
height: 2.8rem;
|
||||
}
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
background: var(--card);
|
||||
color: var(--text-dark);
|
||||
}
|
||||
&.solid{
|
||||
background-color: var(--light);
|
||||
border: 1px solid var(--light);
|
||||
&:hover,&:focus,&.active{
|
||||
background-color: var(--light);
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
border-color:var(--rgba-primary-5);
|
||||
}
|
||||
&-lg {
|
||||
min-height: 3.75rem;
|
||||
padding: 0.5rem 1.1rem;
|
||||
font-size: 1.09375rem;
|
||||
border-radius: $radius ;
|
||||
line-height: 2.8125rem;
|
||||
}
|
||||
&-sm{
|
||||
min-height: 2.5rem;
|
||||
height: auto;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
}
|
||||
.basic-form{
|
||||
.btn.btn-primary{
|
||||
flex: 0 0 auto;
|
||||
|
||||
@media only screen and (max-width: 1699px) and (min-width: 1600px){
|
||||
padding: 0.688rem 0.675rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@media only screen and (max-width: 1490px) and (min-width: 1199px){
|
||||
padding: 0.688rem 0.5rem;
|
||||
font-size: 0.675rem;
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.nice-select.form-control{
|
||||
line-height: 2.2rem;
|
||||
&-lg{
|
||||
line-height:2.8125rem;
|
||||
}
|
||||
&-sm{
|
||||
line-height:1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[type="file"] {
|
||||
line-height: 2.2rem;
|
||||
padding-#{$dlab-pos-left}: 10px;
|
||||
}
|
||||
.form-control-sm[type="file"] {
|
||||
line-height: 2rem;
|
||||
padding-#{$dlab-pos-left}: 8px;
|
||||
}
|
||||
.form-control-lg[type="file"] {
|
||||
line-height: 2.6rem;
|
||||
padding-#{$dlab-pos-left}: 8px;
|
||||
}
|
||||
|
||||
.input-rounded {
|
||||
border-radius: 6.25rem;
|
||||
}
|
||||
.input-group-append .input-group-text {
|
||||
border-radius: 0;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
|
||||
.input-group.input-group-sm {
|
||||
.form-control.form-control-sm{
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
|
||||
.input-group-text{
|
||||
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
||||
}
|
||||
}
|
||||
.input-group.input-group-lg{
|
||||
.form-control.form-control-lg{
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
|
||||
.input-group-text{
|
||||
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Input Color
|
||||
[data-theme-version="light"],
|
||||
[data-theme-version="dark"] {
|
||||
.input-primary{
|
||||
.form-control{
|
||||
border-color:var(--primary);
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-danger{
|
||||
.form-control{
|
||||
border-color:$danger;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$danger;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-info{
|
||||
.form-control{
|
||||
border-color:$info;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$info;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-success{
|
||||
.form-control{
|
||||
border-color:$success;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$success;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-warning{
|
||||
.form-control{
|
||||
border-color:$warning;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$warning;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Input Outline
|
||||
[data-theme-version="light"],
|
||||
[data-theme-version="dark"] {
|
||||
.input-primary-o{
|
||||
.form-control{
|
||||
border-color:var(--primary);
|
||||
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:var(--primary);
|
||||
color:var(--primary);
|
||||
}
|
||||
}
|
||||
.input-danger-o{
|
||||
.form-control{
|
||||
border-color:$danger;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$danger;
|
||||
color:$danger;
|
||||
}
|
||||
}
|
||||
.input-info-o{
|
||||
.form-control{
|
||||
border-color:$info;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$info;
|
||||
color:$info;
|
||||
}
|
||||
}
|
||||
.input-success-o{
|
||||
.form-control{
|
||||
border-color:$success;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$success;
|
||||
color:$success;
|
||||
}
|
||||
}
|
||||
.input-warning-o{
|
||||
.form-control{
|
||||
border-color:$warning;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$warning;
|
||||
color:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-control-sm{
|
||||
min-height: 2.25rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Input Group
|
||||
.input-group-text{
|
||||
background-color:var(--light);
|
||||
border: 0.0625rem solid transparent;
|
||||
min-width: 3.125rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.532rem 0.75rem;
|
||||
border-radius:$radius;
|
||||
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-label{
|
||||
height: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
.input-group-prepend .btn,
|
||||
.input-group-append .btn {
|
||||
z-index: 0;
|
||||
}
|
||||
.custom-select{
|
||||
background: none;
|
||||
border-color: $border;
|
||||
color: $dark;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
.form-file-label{
|
||||
background: #656C73;
|
||||
white-space: nowrap;
|
||||
color: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-border;
|
||||
border-color: $d-border;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.custom_file_input {
|
||||
.form-file-label::after {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background: var(--light);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-file{
|
||||
border: 0.0625rem solid $border;
|
||||
background: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.input-group{
|
||||
> .form-control-plaintext,
|
||||
> .form-select,
|
||||
> .form-file {
|
||||
position: relative; // For focus state's z-index
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
||||
width: 1%;
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
&> .form-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.select2-container--default
|
||||
.select2-selection--multiple
|
||||
.select2-selection__choice{
|
||||
border-radius:$radius;
|
||||
}
|
||||
|
||||
.form-file{
|
||||
.form-control{
|
||||
margin:0;
|
||||
border-radius:0;
|
||||
border:0;
|
||||
height:auto;
|
||||
}
|
||||
.form-control[type="file"] {
|
||||
line-height: 28px;
|
||||
padding-#{$dlab-pos-left}: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label{
|
||||
font-size: .8375rem;
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
&.required{
|
||||
color: var(--text-dark);
|
||||
&::after{
|
||||
content: "*";
|
||||
color: $danger;
|
||||
margin-#{$dlab-pos-left}: 3px;
|
||||
transform: scale(1.3);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col-form-label{
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.input-hasicon{
|
||||
position: relative;
|
||||
.icon{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
#{$dlab-pos-right}: 0;
|
||||
top: 0;
|
||||
width: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
|
||||
#{$dlab-pos-right}: 15px;
|
||||
#{$dlab-pos-left} : auto;
|
||||
}
|
||||
|
||||
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){
|
||||
border-top-#{$dlab-pos-right}-radius: 0 !important;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0 !important;
|
||||
border-top-#{$dlab-pos-left}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
||||
}
|
||||
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
|
||||
margin-#{$dlab-pos-left}: calc(var(--bs-border-width) * -1);
|
||||
border-top-#{$dlab-pos-left}-radius: 0;
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0;
|
||||
border-top-#{$dlab-pos-right}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3){
|
||||
border-top-#{$dlab-pos-right}-radius: 0;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
border-top-#{$dlab-pos-left}-radius: $radius;
|
||||
border-bottom-#{$dlab-pos-left}-radius: $radius;
|
||||
}
|
||||
.input-group button.dropdown-toggle.dropdown-toggle-split:nth-child(2){
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
278
public/scss/components/forms/_form-checkbox.scss
Normal file
278
public/scss/components/forms/_form-checkbox.scss
Normal file
@@ -0,0 +1,278 @@
|
||||
|
||||
.form-check-label{
|
||||
margin-#{$dlab-pos-left}: 0.3125rem;
|
||||
margin-top: 0.1875rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.radio{
|
||||
label{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio.disabled{
|
||||
label{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$d-ctl;
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio-inline{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.form-check-input{
|
||||
top:0.125rem;
|
||||
border-width:0.125rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-color: #e7e7e7;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.rtl .form-check-label{
|
||||
&:before,
|
||||
&:after{
|
||||
#{$dlab-pos-right}: -1.5rem !important;
|
||||
#{$dlab-pos-left}: inherit;
|
||||
}
|
||||
}
|
||||
.form-check {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Toggle Switch
|
||||
.toggle-switch{
|
||||
padding-#{$dlab-pos-left}:3.125rem;
|
||||
line-height: 1.25;
|
||||
display:inline-block;
|
||||
color:$black;
|
||||
font-weight: 600;
|
||||
.form-check-input{
|
||||
border: 0;
|
||||
cursor:pointer;
|
||||
background: #d8d8d8;
|
||||
width: 2.3125rem;
|
||||
border-radius: 1.25rem !important;
|
||||
height: 0.875rem;
|
||||
position:relative;
|
||||
#{$dlab-pos-left}: -0.3125rem;
|
||||
@include transitionFast;
|
||||
background-image:none;
|
||||
&:focus{
|
||||
background-image:none!important;
|
||||
}
|
||||
&:checked{
|
||||
background:var(--rgba-primary-2);
|
||||
background-image:none!important;
|
||||
&:after{
|
||||
#{$dlab-pos-left}:1.25rem;
|
||||
background:var(--primary);
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
box-shadow:none;
|
||||
}
|
||||
&:after{
|
||||
width: 1.25rem;
|
||||
background:#909090;
|
||||
height: 1.25rem;
|
||||
content:"";
|
||||
position:absolute;
|
||||
border-radius: 1.5rem;
|
||||
top: -0.1875rem;
|
||||
#{$dlab-pos-left}: 0;
|
||||
box-shadow:0 0 0.3125rem rgba(0,0,0,0.3);
|
||||
@include transitionFast;
|
||||
}
|
||||
}
|
||||
&.text-end{
|
||||
padding-#{$dlab-pos-right}:0rem;
|
||||
padding-#{$dlab-pos-left}:0;
|
||||
.form-check-input{
|
||||
#{$dlab-pos-left}: auto;
|
||||
margin-#{$dlab-pos-left}: 0;
|
||||
float:right;
|
||||
#{$dlab-pos-right}: 0rem;
|
||||
}
|
||||
.form-check-label{
|
||||
margin-#{$dlab-pos-right}: 0.9375rem;
|
||||
margin-#{$dlab-pos-left}:0;
|
||||
}
|
||||
}
|
||||
.form-check-label{
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// CheckBox
|
||||
.form-check-input:focus ~ .form-check-label::before{
|
||||
box-shadow:none !important;
|
||||
}
|
||||
.form-check-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $light;
|
||||
border-width: 0.125rem;
|
||||
border-radius: 0.125rem !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.check-xs{
|
||||
.form-check-input{
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
}
|
||||
.check-lg{
|
||||
.form-check-input{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
.check-xl{
|
||||
.form-check-input{
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
.checkbox{
|
||||
&-info{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $info;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($info , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-danger {
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $danger;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($danger , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-success{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $success;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($success , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $warning;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($warning , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-secondary{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $secondary;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($secondary , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//Check Switch
|
||||
.check-switch{
|
||||
padding-#{$dlab-pos-left}: 2.5rem;
|
||||
.form-check-label{
|
||||
line-height: 1.875rem;
|
||||
font-weight: 500;
|
||||
span{
|
||||
line-height: 1;
|
||||
}
|
||||
&:after,&:before{
|
||||
height:1.5rem;
|
||||
width:1.5rem;
|
||||
#{$dlab-pos-left}: -2rem;
|
||||
border-radius: 3rem!important;
|
||||
border-color:var(--rgba-primary-3);
|
||||
}
|
||||
}
|
||||
.form-check-input:checked ~ .form-check-label::after{
|
||||
background-image:url('../images/svg/check.svg');
|
||||
}
|
||||
.form-check-input:checked ~ .form-check-label::before{
|
||||
background:$white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
39
public/scss/components/forms/_form-ckeditor.scss
Normal file
39
public/scss/components/forms/_form-ckeditor.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
.custom-ekeditor{
|
||||
ul{
|
||||
padding-#{$dlab-pos-left}:1.25rem;
|
||||
li{
|
||||
list-style:unset;
|
||||
}
|
||||
}
|
||||
ol{
|
||||
li{
|
||||
list-style:decimal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ck.ck-toolbar{
|
||||
&>.ck-toolbar__items{
|
||||
flex-flow: #{$dlab-row} !important;
|
||||
}
|
||||
.ck-button{
|
||||
justify-content: #{$dlab-pos-left} !important;
|
||||
}
|
||||
}
|
||||
.ck.ck-media-form {
|
||||
flex-flow: #{$dlab-row} !important;
|
||||
.ck.ck-label,.ck.ck-input{
|
||||
text-align: #{$dlab-pos-left} !important;
|
||||
}
|
||||
.ck.ck-label{
|
||||
#{$dlab-pos-left}: 0 !important;
|
||||
#{$dlab-pos-right}:auto !important;
|
||||
}
|
||||
}
|
||||
.ck.ck-content{
|
||||
text-align: #{$dlab-pos-left} !important;
|
||||
}
|
||||
.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se {
|
||||
#{$dlab-pos-left}: 0 !important;
|
||||
#{$dlab-pos-right}: auto !important;
|
||||
}
|
||||
3
public/scss/components/forms/_form-dropzone.scss
Normal file
3
public/scss/components/forms/_form-dropzone.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
|
||||
|
||||
|
||||
3
public/scss/components/forms/_form-editor-quill.scss
Normal file
3
public/scss/components/forms/_form-editor-quill.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.ql-container{
|
||||
height: 25rem;
|
||||
}
|
||||
321
public/scss/components/forms/_form-pickers.scss
Normal file
321
public/scss/components/forms/_form-pickers.scss
Normal file
@@ -0,0 +1,321 @@
|
||||
|
||||
|
||||
.asColorPicker-dropdown {
|
||||
max-width: 26rem;
|
||||
}
|
||||
.asColorPicker-trigger {
|
||||
overflow: hidden;
|
||||
border-top-#{$dlab-pos-right}-radius: 0.5rem !important;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0.5rem !important;
|
||||
}
|
||||
.asColorPicker-trigger {
|
||||
border : 0 none;
|
||||
height : 100%;
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: -8px;
|
||||
#{$dlab-pos-left}:auto;
|
||||
top : 0;
|
||||
width : 2.1875rem;
|
||||
}
|
||||
.asColorPicker-clear {
|
||||
display : none;
|
||||
position : absolute;
|
||||
#{$dlab-pos-right}: 1rem;
|
||||
#{$dlab-pos-left}:auto;
|
||||
text-decoration: none;
|
||||
top : .5rem;
|
||||
}
|
||||
.asColorPicker-buttons{
|
||||
float: #{$dlab-pos-right};
|
||||
}
|
||||
|
||||
.daterangepicker {
|
||||
td.active {
|
||||
background-color: var(--primary);
|
||||
color:$white!important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
button.applyBtn {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
&.datepicker-dropdown {
|
||||
padding:1rem;
|
||||
border-radius: $radius;
|
||||
border: 0;
|
||||
cursor:pointer;
|
||||
td.day, th.next, th.prev {
|
||||
height: 33px;
|
||||
width: 33px !important;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
border-radius: $radius-sm;
|
||||
color: var(--text-dark);
|
||||
&.old,&.new{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
th.datepicker-switch, th.next, th.prev {
|
||||
font-weight: 500;
|
||||
font-size:14px;
|
||||
color: $heading;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
th.dow {
|
||||
font-weight: 400;
|
||||
font-size: .75rem;
|
||||
height: 2rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
}
|
||||
table {
|
||||
|
||||
tr td.selected, tr td.active.active {
|
||||
border: 0;
|
||||
background:var(--primary) !important;
|
||||
color:$white;
|
||||
&:hover{
|
||||
background: var(--primary)!important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
td.today {
|
||||
background: var(--primary)!important;
|
||||
color : #ffffff!important;
|
||||
&:hover {
|
||||
background: var(--primary)!important;
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
td.today.disabled {
|
||||
box-shadow: 0rem 0rem 1.875rem 0.3125rem rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0rem 0rem 1.875rem 0.3125rem rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.picker {
|
||||
&__select--month, &__select--year {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
&__input {
|
||||
background-color: transparent !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent !important;
|
||||
border: 0.0625rem solid $d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-wrap{
|
||||
.form-control{
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
}
|
||||
}
|
||||
// .daterangepicker td.available:hover, .daterangepicker th.available:hover{
|
||||
// color:var(--primary);
|
||||
// background-color:#f9f9f9;
|
||||
// }
|
||||
.daterangepicker .drp-calendar.left,
|
||||
.daterangepicker .drp-calendar.right{
|
||||
padding:1rem 1rem;
|
||||
}
|
||||
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td{
|
||||
width:33px;
|
||||
height:33px;
|
||||
// border-radius:$radius-sm!important;
|
||||
color:var(--text-dark);
|
||||
}
|
||||
// .daterangepicker td.in-range{
|
||||
// background-color:transparent;
|
||||
// color:#5E6278!important;
|
||||
// }
|
||||
.daterangepicker .calendar-table {
|
||||
background-color: var(--card);
|
||||
border-color: var(--border);
|
||||
th{
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
color:var(--text);
|
||||
}
|
||||
}
|
||||
button.cancelBtn.btn.btn-sm.btn-inverse{
|
||||
background-color:var(--light);
|
||||
&:active{
|
||||
color: var(--text-dark);
|
||||
}
|
||||
}
|
||||
.daterangepicker{
|
||||
background-color: var(--card);
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
||||
border:0;
|
||||
border-radius: $radius;
|
||||
|
||||
.drp-buttons{
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span{
|
||||
border-width:0 1.9px 1.9px 0;
|
||||
border-color:$light;
|
||||
}
|
||||
|
||||
.daterangepicker td.in-range{
|
||||
background-color: var(--light);
|
||||
&.end-date{
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{
|
||||
background-color: var(--card);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dtp .dtp-close{
|
||||
top: 1rem;
|
||||
}
|
||||
.dtp > .dtp-content{
|
||||
border-radius: $radius;
|
||||
background-color: var(--card);
|
||||
max-height: 570px;
|
||||
& > .dtp-date-view{
|
||||
& > header.dtp-header{
|
||||
background-color: var(--primary-dark);
|
||||
padding: .75rem 1rem;
|
||||
border-top-#{$dlab-pos-left}-radius: $radius;
|
||||
border-top-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
}
|
||||
.dtp-buttons{
|
||||
.btn{
|
||||
font-size: .85rem;
|
||||
padding: .35rem 1rem;
|
||||
}
|
||||
.dtp-btn-ok{
|
||||
background: var(--rgba-primary-1);
|
||||
color: var(--primary);
|
||||
}
|
||||
.dtp-btn-cancel{
|
||||
&:hover{
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dtp{
|
||||
direction: ltr;
|
||||
div.dtp-date,div.dtp-time{
|
||||
background-color: var(--primary);
|
||||
}
|
||||
div.dtp-actual-year{
|
||||
color: rgba($white,.8);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.p10 > a{
|
||||
color: $white;
|
||||
}
|
||||
div.dtp-actual-num{
|
||||
font-weight: 600;
|
||||
}
|
||||
div.dtp-date > div{
|
||||
padding: 5px 0;
|
||||
}
|
||||
table.dtp-picker-days tr > td{
|
||||
font-weight: 500;
|
||||
font-size: .75rem;
|
||||
&:last-child{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
div.dtp-picker-month{
|
||||
padding-bottom: 10px!important;
|
||||
}
|
||||
table.dtp-picker-days tr > td > a, .dtp .dtp-picker-time > a{
|
||||
color: var(--text-dark);
|
||||
display: inline-block;
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
table.dtp-picker-days tr > th{
|
||||
color: var(--text-gray);
|
||||
font-weight: 600;
|
||||
font-size: .875rem;
|
||||
&:last-child{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
table.dtp-picker-days tr > td > a.selected{
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover,
|
||||
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover{
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.clockpicker-popover{
|
||||
.clockpicker-button{
|
||||
border-color: var(--border)!important;
|
||||
&:active{
|
||||
color: var(--text-dark)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-gradient-control {
|
||||
float: #{$dlab-pos-right};
|
||||
}
|
||||
|
||||
.picker__footer{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
button{
|
||||
transition: 0.4s;
|
||||
&:last-child{
|
||||
&:hover{
|
||||
&::before{
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
top: 0em !important;
|
||||
transition: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picker__button--today{
|
||||
background-color: var(--primary);
|
||||
color: $white !important;
|
||||
|
||||
&:before{
|
||||
content: none!important
|
||||
}
|
||||
}
|
||||
}
|
||||
11
public/scss/components/forms/_form-radio-button.scss
Normal file
11
public/scss/components/forms/_form-radio-button.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
.form-check-input{
|
||||
&:checked {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
background-size: cover;
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--rgba-primary-1);
|
||||
}
|
||||
}
|
||||
192
public/scss/components/forms/_form-steps.scss
Normal file
192
public/scss/components/forms/_form-steps.scss
Normal file
@@ -0,0 +1,192 @@
|
||||
|
||||
|
||||
// form-wizard
|
||||
.form-wizard{
|
||||
border: 0;
|
||||
.nav-wizard{
|
||||
box-shadow: none!important;
|
||||
margin-bottom: 2rem;
|
||||
li{
|
||||
.nav-link{
|
||||
position: relative;
|
||||
span{
|
||||
border-radius: 3.125rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 0.125rem solid var(--primary);
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
color: var(--primary);
|
||||
font-size: 1.125rem;
|
||||
margin: auto;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&:after{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
#{$dlab-pos-left}: 50%;
|
||||
height: 0.1875rem;
|
||||
transform: translateY(-50%);
|
||||
background: $dark-light;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.active{
|
||||
&:after{
|
||||
background: var(--primary)!important;
|
||||
}
|
||||
span{
|
||||
background:var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&.done{
|
||||
&:after{
|
||||
background: var(--primary)!important;
|
||||
}
|
||||
span{
|
||||
background-color: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.nav-link{
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-bottom{
|
||||
.btn{
|
||||
background-color: var(--primary);
|
||||
border: 0;
|
||||
padding: 0.75rem 1.125rem;
|
||||
}
|
||||
}
|
||||
.tab-content{
|
||||
.tab-pane{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// emial-setup
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
.nav-wizard{
|
||||
flex-direction: unset!important;
|
||||
}
|
||||
.tab-content{
|
||||
height: 100%!important;
|
||||
}
|
||||
}
|
||||
@include respond('phone') {
|
||||
.nav-wizard{
|
||||
li{
|
||||
.nav-link{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
102
public/scss/components/forms/_form-switch.scss
Normal file
102
public/scss/components/forms/_form-switch.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.js-switch {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 3.125rem;
|
||||
margin-#{$dlab-pos-right}: 4rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-#{$dlab-pos-right}: 1rem;
|
||||
}
|
||||
|
||||
&>small {
|
||||
top: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-lg {
|
||||
& + .switchery {
|
||||
height: 2rem;
|
||||
width: 4.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-md {
|
||||
& + .switchery {
|
||||
height: 1.5rem;
|
||||
width: 3.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-sm {
|
||||
& + .switchery {
|
||||
height: 1rem;
|
||||
width: 2.2rem;
|
||||
|
||||
&>small {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
top: 0.0625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-square {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 0;
|
||||
|
||||
&>small {
|
||||
border-radius: 0;
|
||||
top: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-lg {
|
||||
& + .switchery {
|
||||
height: 2rem;
|
||||
width: 4.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-md {
|
||||
& + .switchery {
|
||||
height: 1.5rem;
|
||||
width: 3.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-sm {
|
||||
& + .switchery {
|
||||
height: 1rem;
|
||||
width: 2.2rem;
|
||||
|
||||
&>small {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
top: 0.0625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
18
public/scss/components/forms/_form-touchspin.scss
Normal file
18
public/scss/components/forms/_form-touchspin.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
.bootstrap-touchspin .input-group-btn-vertical>.btn {
|
||||
height: 51%;
|
||||
|
||||
&.bootstrap-touchspin-up {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-touchspin {
|
||||
button.btn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
67
public/scss/components/forms/_form-validation.scss
Normal file
67
public/scss/components/forms/_form-validation.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
/////////////////////////////
|
||||
// Bootstrap validation
|
||||
/////////////////////////////
|
||||
.form-control.is-valid {
|
||||
border-color: $success !important;
|
||||
border-#{$dlab-pos-right}: 0rem !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-warning {
|
||||
border-color: $warning !important;
|
||||
border-#{$dlab-pos-right}: 0rem !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: $danger !important;
|
||||
border-#{$dlab-pos-right}: 0rem !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////
|
||||
// Jquery Validation
|
||||
////////////////////////
|
||||
.is-valid {
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
i {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
i {
|
||||
color: var(--rgba-primary-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show Pass
|
||||
.show-pass{
|
||||
cursor:pointer;
|
||||
|
||||
.fa-eye{
|
||||
display:none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
.fa-eye-slash{
|
||||
display:none;
|
||||
}
|
||||
.fa-eye{
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/scss/components/forms/_forms.scss
Normal file
13
public/scss/components/forms/_forms.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@import "./form-basic";
|
||||
@import "./form-checkbox";
|
||||
@import "./form-radio-button";
|
||||
@import "./form-switch";
|
||||
@import "./form-validation";
|
||||
@import "./form-pickers";
|
||||
@import "./form-addons-cropper";
|
||||
@import "./form-addons-select2";
|
||||
@import "./form-steps";
|
||||
@import "./form-dropzone";
|
||||
@import "./form-ckeditor";
|
||||
@import "./form-editor-quill";
|
||||
|
||||
23
public/scss/components/map/_map-datamap.scss
Normal file
23
public/scss/components/map/_map-datamap.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
#world-datamap {
|
||||
padding-bottom: 46% !important;
|
||||
}
|
||||
|
||||
.datamaps-hoverover {
|
||||
background: $white;
|
||||
padding: 0.3125rem;
|
||||
border-radius: 0.3125rem;
|
||||
font-family: 'Roboto' !important;
|
||||
color: var(--primary);
|
||||
border: 0.0625rem solid var(--rgba-primary-3);
|
||||
}
|
||||
|
||||
.world_map_card {
|
||||
ul.list-group {
|
||||
@include custommq($max: 90rem) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
margin-top: 2.1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
public/scss/components/map/_map-jqvmap.scss
Normal file
22
public/scss/components/map/_map-jqvmap.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
line-height: 0.875rem;
|
||||
background-color: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.jqvmap-zoomout {
|
||||
top: 2.1875rem;
|
||||
}
|
||||
|
||||
#world-map, #usa {
|
||||
height: 25rem;
|
||||
@include respond ('tab-port'){
|
||||
height:21.875rem;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
height:14.375rem;
|
||||
}
|
||||
}
|
||||
2
public/scss/components/map/_maps.scss
Normal file
2
public/scss/components/map/_maps.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import "./map-datamap";
|
||||
@import "./map-jqvmap";
|
||||
332
public/scss/components/tables/_table-basic.scss
Normal file
332
public/scss/components/tables/_table-basic.scss
Normal file
@@ -0,0 +1,332 @@
|
||||
//style for all basic tables
|
||||
.table-hover > tbody > tr:hover > * {
|
||||
--bs-table-color-state: var(--text-dark);
|
||||
--bs-table-bg-state: var(--light);
|
||||
}
|
||||
.table {
|
||||
--bs-table-bg : var(--card);
|
||||
strong{
|
||||
color:$dark;
|
||||
}
|
||||
th, td {
|
||||
border-color: var(--border);
|
||||
padding: 0.9375rem 0.625rem;
|
||||
}
|
||||
|
||||
&.shadow-hover tbody tr:hover{
|
||||
background-color:$white;
|
||||
box-shadow: 0 0rem 1.875rem var(--rgba-primary-2);
|
||||
}
|
||||
&.tr-rounded{
|
||||
tr{
|
||||
td,th{
|
||||
&:first-child{
|
||||
border-radius:2.8125rem 0 0 2.8125rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius:0 2.8125rem 2.8125rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-hover{
|
||||
tr{
|
||||
td{
|
||||
border-width:0.0625rem 0 0.0625rem 0;
|
||||
border-bottom:0.0625rem solid transparent;
|
||||
border-color:transparent;
|
||||
&:first-child{
|
||||
border-width:0.0625rem 0 0.0625rem 0.0625rem;
|
||||
}
|
||||
&:last-child{
|
||||
border-width:0.0625rem 0.0625rem 0.0625rem 0;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
td{
|
||||
border-color:$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-primary-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-secondary-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:$secondary;
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-info-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:$info;
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-warning-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
td{
|
||||
color:$black;
|
||||
}
|
||||
th{
|
||||
color:#6C6C6C;
|
||||
}
|
||||
tr:hover{
|
||||
td,th{
|
||||
background:$warning;
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.border-no{
|
||||
td{
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
&.short-one{
|
||||
tr{
|
||||
td,th{
|
||||
&:first-child{
|
||||
width:3.75rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thead th {
|
||||
border-bottom:1px solid var(--border);
|
||||
text-transform: capitalize;
|
||||
color: var(--text-dark) ;
|
||||
font-size: 1rem;
|
||||
white-space:nowrap;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.0313rem;
|
||||
border-color: var(--border)!important;
|
||||
}
|
||||
tbody tr td {
|
||||
vertical-align: middle;
|
||||
border-color: var(--border);
|
||||
&:last-child{
|
||||
text-align: #{$dlab-pos-right};
|
||||
}
|
||||
}
|
||||
|
||||
//delete header borders without '.borders tables'
|
||||
&:not(.table-bordered) {
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
//heading background
|
||||
.thead-primary th {
|
||||
background-color: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
.thead-info th {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
.thead-warning th {
|
||||
background-color: $warning;
|
||||
color: $white;
|
||||
}
|
||||
.thead-danger th {
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
}
|
||||
.thead-success th {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
//table border
|
||||
&.primary-table-bordered {
|
||||
border: 0.0625rem solid var(--border);
|
||||
}
|
||||
|
||||
//table hover
|
||||
&.primary-table-bg-hover {
|
||||
thead th {
|
||||
background-color: var(--primary-dark);
|
||||
color: $white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
background-color: var(--primary);
|
||||
transition: all .1s ease;
|
||||
td,th{
|
||||
background-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--rgba-primary-8);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
td, th {
|
||||
border-bottom: 0.0625rem solid var(--primary-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//responsive table width
|
||||
&-responsive {
|
||||
&-tiny {
|
||||
min-width: 18.75rem;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
min-width: 30rem !important;
|
||||
}
|
||||
|
||||
&-md {
|
||||
min-width: 36rem !important;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
min-width: 60.9375rem !important;
|
||||
}
|
||||
|
||||
&-xl {
|
||||
min-width: 70.9375rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-primary,
|
||||
.table-primary > th,
|
||||
.table-primary > td {
|
||||
background-color: var(--rgba-primary-1);
|
||||
color: var(--primary);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: var(--rgba-primary-1);
|
||||
}
|
||||
}
|
||||
.table-success,
|
||||
.table-success > th,
|
||||
.table-success > td {
|
||||
background-color: $success-light;
|
||||
color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
.table-info,
|
||||
.table-info > th,
|
||||
.table-info > td {
|
||||
background-color: $info-light;
|
||||
color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
.table-warning,
|
||||
.table-warning > th,
|
||||
.table-warning > td {
|
||||
background-color: $warning-light;
|
||||
color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
.table-danger,
|
||||
.table-danger > th,
|
||||
.table-danger > td {
|
||||
background-color: $danger-light;
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
.table-active,
|
||||
.table-active > th,
|
||||
.table-active > td {
|
||||
background-color: $l-bg;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-table{
|
||||
th, td{
|
||||
&:first-child,
|
||||
&:last-child{
|
||||
padding-#{$dlab-pos-left}:1.875rem;
|
||||
padding-#{$dlab-pos-right}:1.875rem;
|
||||
@include respond('phone') {
|
||||
padding-#{$dlab-pos-left}: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.table thead tr th:last-child {
|
||||
text-align: #{$dlab-pos-right} !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
14
public/scss/components/tables/_table-bootgrid.scss
Normal file
14
public/scss/components/tables/_table-bootgrid.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.bootgrid-header {
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
.actionBar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 0 0.625rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
327
public/scss/components/tables/_table-datatable.scss
Normal file
327
public/scss/components/tables/_table-datatable.scss
Normal file
@@ -0,0 +1,327 @@
|
||||
//demo styles
|
||||
table#example{
|
||||
padding: 0rem 0 2rem 0;
|
||||
}
|
||||
table.dataTable{
|
||||
font-size: 0.875rem;
|
||||
color:var(--text-gray);
|
||||
.form-check{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
#example2_wrapper {
|
||||
.dataTables_scrollBody {
|
||||
max-height: 33.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#employees, #custommers {
|
||||
padding: .5rem 0 1rem 0;
|
||||
}
|
||||
//////////
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
@include respond ('phone'){
|
||||
justify-content:start!important;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc::after {
|
||||
content: "";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
background-image: none;
|
||||
margin-#{$dlab-pos-left}: 5px;
|
||||
font-size: calc(100% - 2px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting{
|
||||
&::after {
|
||||
content: "\f0dc";
|
||||
}
|
||||
&.sorting_desc::after {
|
||||
content: "\f0dd";
|
||||
opacity: 0.5;
|
||||
}
|
||||
&.sorting_asc::after {
|
||||
content: "\f0de";
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
table.dataTable thead > tr > th.sorting::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table.dataTable thead th, table.dataTable thead td{
|
||||
border-bottom: 0.125rem solid $border-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table.dataTable tfoot th, table.dataTable tfoot td{
|
||||
border-top: 0;
|
||||
}
|
||||
table.dataTable tbody tr.selected > *{
|
||||
color: var(--text-dark);
|
||||
background: var(--light)!important;
|
||||
border-color: var(--border)!important;
|
||||
}
|
||||
table.dataTable tbody tr, table.dataTable tbody td{
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > *{
|
||||
box-shadow: unset!important;
|
||||
}
|
||||
|
||||
table.dataTable thead th{
|
||||
color: var(--text-dark);
|
||||
white-space:nowrap;
|
||||
font-size:.9375rem;
|
||||
text-transform:capitalize;
|
||||
font-weight: 500;
|
||||
padding: 1.25rem 0.9375rem;
|
||||
|
||||
}
|
||||
table.dataTable{
|
||||
& > thead > tr > th{
|
||||
padding: 1rem 0.9375rem;
|
||||
padding-#{$dlab-pos-right}: 26px;
|
||||
padding-#{$dlab-pos-left}: 0.9375rem !important;
|
||||
text-align: #{$dlab-pos-left};
|
||||
background-color: transparent;
|
||||
@include respond ('phone'){
|
||||
padding-#{$dlab-pos-left}: 0.3125rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_info{
|
||||
padding-top: 1rem;
|
||||
@include respond ('phone'){
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
padding: .85rem 0.9375rem;
|
||||
font-size:.875rem;
|
||||
font-weight: 400;
|
||||
border-bottom:0;
|
||||
@include respond('phone') {
|
||||
padding: 0.5rem 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tr.selected{
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
table.dataTable tfoot th{
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
font-size: .9375rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
table.dataTable > tfoot > tr > th, table.dataTable > tfoot > tr > td{
|
||||
padding: 1rem 0.9375rem;
|
||||
@include respond ('phone'){
|
||||
padding: 0.5rem 0.3125rem;
|
||||
}
|
||||
}
|
||||
td.text-ov {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow:wrap;
|
||||
justify-content:center;
|
||||
@include respond ('phone'){
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
.paginate_button.previous,.paginate_button.next{
|
||||
font-size: 1rem;
|
||||
height:2.5rem;
|
||||
width: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
border:0.0625rem solid var(--primary);
|
||||
border-radius:2.8125rem;
|
||||
padding:0 0.85rem;
|
||||
line-height:2.5rem;
|
||||
margin:0 0.625rem;
|
||||
display:inline-block;
|
||||
color:var(--primary)!important;
|
||||
&.current:hover,
|
||||
&.previous:hover,
|
||||
&.next:hover{
|
||||
color:$white!important;
|
||||
background:var(--primary)!important;
|
||||
}
|
||||
&.disabled{
|
||||
color:var(--primary)!important;
|
||||
}
|
||||
}
|
||||
span{
|
||||
.paginate_button{
|
||||
height:2.5rem;
|
||||
width:2.5rem;
|
||||
padding:0;
|
||||
margin-#{$dlab-pos-left}: 0rem;
|
||||
margin:0 0.125rem;
|
||||
line-height:2.5rem;
|
||||
text-align:center;
|
||||
font-size:1.125rem;
|
||||
border-radius:2.8125rem;
|
||||
color:var(--primary)!important;
|
||||
background:var(--rgba-primary-1);
|
||||
&.current,&:hover{
|
||||
color: #fff !important;
|
||||
background:var(--primary);
|
||||
border:1px solid transparent;
|
||||
&:hover{
|
||||
color:$white!important;
|
||||
background:var(--primary)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper {
|
||||
input[type="search"], input[type="text"], select {
|
||||
border: 1px solid var(--border);
|
||||
padding: .3rem 0.5rem;
|
||||
height: 2.5rem;
|
||||
color: var(--text-dark);
|
||||
border-radius: $radius;
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom: 0.9375rem;
|
||||
.bootstrap-select{
|
||||
width: 5rem!important;
|
||||
margin: 0 0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.no-footer{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.rounded-lg{
|
||||
min-width:1.875rem;
|
||||
}
|
||||
.dataTables_scroll{
|
||||
padding: 1rem 0;
|
||||
|
||||
&Foot{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dataTablesCard{
|
||||
background-color:$white;
|
||||
border-radius:$radius;
|
||||
&.border-no{
|
||||
td{
|
||||
border-top:0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
|
||||
@include media-breakpoint-down(md) {
|
||||
text-align: #{$dlab-pos-left};
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
|
||||
color: $body-color !important;
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_processing,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
color: $body-color;
|
||||
border-radius:1rem;
|
||||
padding:0.125rem 0;
|
||||
margin-bottom:1.25rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$d-ctl;
|
||||
}
|
||||
}
|
||||
.paging_simple_numbers.dataTables_paginate {
|
||||
padding: 0.3125rem 0.3125rem;
|
||||
@include respond ('phone'){
|
||||
margin: 10px -10px;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button{
|
||||
color: $body-color !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
table.dataTable.row-border tbody th,
|
||||
table.dataTable.row-border tbody td,
|
||||
table.dataTable.display tbody th,
|
||||
table.dataTable.display tbody td {
|
||||
border-color: $border-color;
|
||||
box-shadow: none!important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
color:rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper{
|
||||
.dataTables_length{
|
||||
.bootstrap-select{
|
||||
.dropdown-toggle{
|
||||
font-size: 0.813rem !important;
|
||||
padding: 0.625rem 1rem;
|
||||
}
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$d-ctl;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_paginate.paging_simple_numbers{
|
||||
span{
|
||||
@include respond ('phone'){
|
||||
display:flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #example_wrapper.dataTables_wrapper{
|
||||
.paginate_button.previous,.paginate_button.next{
|
||||
@include respond ('phone'){
|
||||
min-width:7rem;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
table.dataTable.row-border > tbody > tr > th,
|
||||
table.dataTable.row-border > tbody > tr > td,
|
||||
table.dataTable.display > tbody > tr > th,
|
||||
table.dataTable.display > tbody > tr > td{
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > th.sorting_desc::after, table.dataTable thead > tr > th.sorting_asc_disabled::before, table.dataTable thead > tr > th.sorting_asc_disabled::after, table.dataTable thead > tr > th.sorting_desc_disabled::before, table.dataTable thead > tr > th.sorting_desc_disabled::after, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > td.sorting::after, table.dataTable thead > tr > td.sorting_asc::before, table.dataTable thead > tr > td.sorting_asc::after, table.dataTable thead > tr > td.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::after, table.dataTable thead > tr > td.sorting_asc_disabled::before, table.dataTable thead > tr > td.sorting_asc_disabled::after, table.dataTable thead > tr > td.sorting_desc_disabled::before, table.dataTable thead > tr > td.sorting_desc_disabled::after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
#{$dlab-pos-right}: 0;
|
||||
}
|
||||
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td,
|
||||
table.dataTable > tfoot > tr > th, table.dataTable > tfoot > tr > td{
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting_disabled::before{
|
||||
content: none;
|
||||
}
|
||||
4
public/scss/components/tables/_table-footable.scss
Normal file
4
public/scss/components/tables/_table-footable.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
.fooicon {
|
||||
font-size: 1.25rem;
|
||||
color: $dark;
|
||||
}
|
||||
25
public/scss/components/tables/_table-jsgrid.scss
Normal file
25
public/scss/components/tables/_table-jsgrid.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.jsgrid-table{
|
||||
|
||||
.jsgrid-header-row{
|
||||
|
||||
& > .jsgrid-header-cell{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody > tr > td{
|
||||
padding: 1.2em;
|
||||
}
|
||||
|
||||
.jsgrid-insert-row, .jsgrid-edit-row{
|
||||
|
||||
input, select{
|
||||
border: 0.0625rem solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsgrid .jsgrid-button{
|
||||
border: 0 !important;
|
||||
margin-#{$dlab-pos-left}: 0.625rem;
|
||||
}
|
||||
5
public/scss/components/tables/_table.scss
Normal file
5
public/scss/components/tables/_table.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "table-basic";
|
||||
@import "table-bootgrid";
|
||||
@import "table-datatable";
|
||||
@import "table-footable";
|
||||
@import "table-jsgrid";
|
||||
26
public/scss/components/uc/_addons.scss
Normal file
26
public/scss/components/uc/_addons.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@import "uc-blockui";
|
||||
@import "uc-bootstrap-select";
|
||||
@import "uc-clipboard";
|
||||
@import "uc-ticker";
|
||||
@import "uc-typeahead";
|
||||
@import "uc-weather";
|
||||
@import "uc-noui-slider";
|
||||
@import "uc-nestable";
|
||||
@import "uc-pignose-calender";
|
||||
@import "uc-horizontal-timeline";
|
||||
@import "uc-toastr";
|
||||
@import "uc-lightgallery";
|
||||
@import "jqvmap";
|
||||
@import "perfect-scroll";
|
||||
@import "dropzone";
|
||||
@import "uc-calendar";
|
||||
@import "_uc-ckeditor";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
0
public/scss/components/uc/_dropzone.scss
Normal file
0
public/scss/components/uc/_dropzone.scss
Normal file
27
public/scss/components/uc/_jqvmap.scss
Normal file
27
public/scss/components/uc/_jqvmap.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
.jqvmap-zoomin, .jqvmap-zoomout
|
||||
{
|
||||
position: absolute;
|
||||
#{$dlab-pos-left}: 0.625rem;
|
||||
-webkit-border-radius: 0.1875rem;
|
||||
-moz-border-radius: 0.1875rem;
|
||||
border-radius: 0.1875rem;
|
||||
background: #000000;
|
||||
padding: 0.1875rem;
|
||||
color: white;
|
||||
width: 1.0625rem;
|
||||
height: 1.0625rem;
|
||||
cursor: pointer;
|
||||
line-height: 0.625rem;
|
||||
text-align: center;
|
||||
}
|
||||
.jqvmap-zoomin
|
||||
{
|
||||
top: 0.625rem;
|
||||
}
|
||||
.jqvmap-zoomout
|
||||
{
|
||||
top: 1.875rem;
|
||||
}
|
||||
|
||||
|
||||
68
public/scss/components/uc/_perfect-scroll.scss
Normal file
68
public/scss/components/uc/_perfect-scroll.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-x.ps--clicking,
|
||||
.ps__rail-y.ps--clicking {
|
||||
background-color: transparent;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover>.ps__thumb-y,
|
||||
.ps__rail-y:focus>.ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
background-color: #DAE2F3;
|
||||
width: 0.25rem;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: #DAE2F3;
|
||||
width: 0.25rem;
|
||||
}
|
||||
|
||||
.total-average {
|
||||
position: relative;
|
||||
height: 18.75rem;
|
||||
}
|
||||
|
||||
.widget-chat {
|
||||
position: relative;
|
||||
height: 15.625rem;
|
||||
}
|
||||
|
||||
.widget-todo {
|
||||
position: relative;
|
||||
height: 13.125rem;
|
||||
}
|
||||
|
||||
.widget-team {
|
||||
position: relative;
|
||||
height: 17.8125rem;
|
||||
}
|
||||
|
||||
.widget-timeline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-comments {
|
||||
position: relative;
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
.sidebar-right-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.widget-team {
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y:hover,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-y.ps--clicking {
|
||||
background-color: transparent!important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
17
public/scss/components/uc/_uc-blockui.scss
Normal file
17
public/scss/components/uc/_uc-blockui.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.blockUI.blockMsg.blockPage {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
#loginForm {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.blockMsg {
|
||||
border: 0rem;
|
||||
width: 20%!important;
|
||||
h1{
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
48
public/scss/components/uc/_uc-bootstrap-select.scss
Normal file
48
public/scss/components/uc/_uc-bootstrap-select.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.bootstrap-select{
|
||||
margin-bottom: 0;
|
||||
&.solid{
|
||||
.btn{
|
||||
border: 0!important;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
border: 1px solid var(--border) !important;
|
||||
background-color: transparent !important;
|
||||
font-weight:400;
|
||||
color: $body-color !important;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none !important;
|
||||
outline-offset: 0;
|
||||
}
|
||||
}
|
||||
.dropdown-menu{
|
||||
border-color: $border !important;
|
||||
box-shadow:$shadow;
|
||||
|
||||
.dropdown-item{
|
||||
padding: var(--dz-list-space-y) var(--dz-list-space-x);
|
||||
font-size: var(--dz-list-size);
|
||||
}
|
||||
}
|
||||
&.dashboard-select{
|
||||
width: auto!important;
|
||||
.dropdown-toggle{
|
||||
background-color: var(--rgba-primary-1)!important;
|
||||
color: var(--primary)!important;
|
||||
border: 0 !important;
|
||||
&:after {
|
||||
margin-#{$dlab-pos-left}: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group > .bootstrap-select:not(:first-child) .dropdown-toggle{
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0;
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0;
|
||||
}
|
||||
.input-group > .bootstrap-select:not(:last-child) .dropdown-toggle{
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
}
|
||||
159
public/scss/components/uc/_uc-calendar.scss
Normal file
159
public/scss/components/uc/_uc-calendar.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
.fc-h-event,.fc-v-event{
|
||||
background:var(--primary);
|
||||
border-radius: .42rem;
|
||||
}
|
||||
.fc-h-event .fc-event-title{
|
||||
color:$white;
|
||||
}
|
||||
.fc-theme-standard td, .fc-theme-standard th{
|
||||
border-color: var(--border);
|
||||
|
||||
}
|
||||
.fc-unthemed .fc-h-event, .fc-unthemed .fc-event-dot {
|
||||
padding: 0;
|
||||
border-radius: .42rem;
|
||||
}
|
||||
.fc-theme-standard th{
|
||||
padding: .75rem .5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: #b5b5c3;
|
||||
@include respond ('phone'){
|
||||
font-size:14px;
|
||||
font-weight:400;
|
||||
padding:3px 0px;
|
||||
}
|
||||
}
|
||||
.fc-theme-standard .fc-scrollgrid.fc-scrollgrid-liquid,.fc-scrollgrid ,table{
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.fc-daygrid-dot-event{
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
.fc-daygrid-event-dot{
|
||||
border-color:var(--primary);
|
||||
}
|
||||
}
|
||||
.fc-daygrid-dot-event .fc-event-title{
|
||||
font-weight:500;
|
||||
}
|
||||
.fc-event.bg-primary
|
||||
,.fc-event.bg-success
|
||||
,.fc-event.bg-warning
|
||||
,.fc-event.bg-secondary
|
||||
,.fc-event.bg-dark
|
||||
,.fc-event.bg-info{
|
||||
color:$white!important;
|
||||
border-radius: 8px;
|
||||
.fc-daygrid-event-dot{
|
||||
border-color:$white;
|
||||
}
|
||||
}
|
||||
|
||||
.fc .fc-scroller-liquid-absolute,.fc-scroller{
|
||||
position:relative;
|
||||
overflow: visible!important;
|
||||
}
|
||||
|
||||
.fc .fc-button-group{
|
||||
&>.fc-button{
|
||||
color: #b5b5c3;
|
||||
background: 0 0;
|
||||
border: 1px solid #ebedf3;
|
||||
text-shadow: none!important;
|
||||
-webkit-box-shadow: none!important;
|
||||
box-shadow: none!important;
|
||||
&:focus,&:active,&:hover,&.fc-button-active{
|
||||
background:var(--primary);
|
||||
color:$white;
|
||||
border-color:var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-button.fc-button-primary.fc-today-button{
|
||||
background:var(--primary);
|
||||
color:$white;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
.fc-unthemed .fc-toolbar .fc-button.fc-button-active, .fc-unthemed .fc-toolbar .fc-button:active, .fc-unthemed .fc-toolbar .fc-button:focus{
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border: 1px solid var(--primary);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.external-event{
|
||||
padding: 8px 10px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
border-radius: 5px;
|
||||
&:hover{
|
||||
&:before{
|
||||
background:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-event{
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.fc .fc-view-harness{
|
||||
height: 800px!important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.fc .fc-toolbar.fc-header-toolbar{
|
||||
@include respond ('phone'){
|
||||
display:block;
|
||||
.fc-toolbar-chunk{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
&:first-child{
|
||||
justify-content:space-between;
|
||||
}
|
||||
}
|
||||
.fc-toolbar-title{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#external-events{
|
||||
.external-event{
|
||||
text-align: #{$dlab-pos-left};
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc.app-fullcalendar{
|
||||
@include respond ('phone'){
|
||||
.fc-timegrid-slot-label{
|
||||
width:40px!important;
|
||||
font-size: 10px;
|
||||
}
|
||||
.fc-event, .external-event{
|
||||
font-size: 10px;
|
||||
margin:0;
|
||||
padding: 2px 0;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.fc-col-header-cell-cushion {
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
129
public/scss/components/uc/_uc-ckeditor.scss
Normal file
129
public/scss/components/uc/_uc-ckeditor.scss
Normal file
@@ -0,0 +1,129 @@
|
||||
// Ckeditor
|
||||
.ck.ck-editor{
|
||||
.ck.ck-button{
|
||||
padding: 8px 12px;
|
||||
background-color: var(--card);
|
||||
color: var(--text-gray);
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
.ck-button__label{
|
||||
line-height: 1.2;
|
||||
}
|
||||
@include respond('laptop'){
|
||||
padding: 6px 8px;
|
||||
.ck-icon{
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.ck-dropdown__arrow{
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ck.ck-toolbar{
|
||||
background-color: var(--light);
|
||||
border: 0;
|
||||
padding: 5px 10px;
|
||||
.ck.ck-button:not(.ck-on){
|
||||
&:hover{
|
||||
background-color: var(--rgba-primary-1);
|
||||
span:not(.ck-tooltip__text){
|
||||
color: var(--primary);
|
||||
}
|
||||
svg{
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ck.ck-toolbar__separator{
|
||||
display: none !important;
|
||||
}
|
||||
.ck-content{
|
||||
background-color: #f7f7f7;
|
||||
border-width: 1px 0 0;
|
||||
border-color: #e7e5ef;
|
||||
}
|
||||
.ck-reset.ck-list {
|
||||
.ck-list__item{
|
||||
.ck.ck-button{
|
||||
border-radius: 0;
|
||||
|
||||
}
|
||||
.ck-button.ck-on {
|
||||
background: $primary;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover{
|
||||
background-color: var(--card)!important;
|
||||
.ck-button__label{
|
||||
color: var(--text-dark);
|
||||
}
|
||||
}
|
||||
.ck.ck-toolbar > .ck.ck-toolbar__grouped-dropdown > .ck.ck-button.ck-dropdown__button {
|
||||
padding-#{$dlab-pos-left}: 12px!important;
|
||||
@include respond('laptop'){
|
||||
padding-#{$dlab-pos-left}: 8px!important;
|
||||
}
|
||||
}
|
||||
.ck-editor__editable{
|
||||
background :$body-bg !important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color:$d-bg!important;
|
||||
}
|
||||
}
|
||||
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
|
||||
border-color: $border-color;
|
||||
padding: 0.865rem var(--ck-spacing-standard);
|
||||
}
|
||||
.ck.ck-toolbar .ck-toolbar__items .ck.ck-toolbar__separator {
|
||||
background: $border-color;
|
||||
}
|
||||
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
|
||||
min-height: 12.375rem;
|
||||
background: $body-bg ;
|
||||
@include respond('phone'){
|
||||
min-height: 8rem;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
background: $d-bg;
|
||||
}
|
||||
}
|
||||
button.ck.ck-button.ck-off:hover {
|
||||
background-color: $border-color;
|
||||
}
|
||||
.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{
|
||||
min-height: 12.375rem;
|
||||
border-color: var(--rgba-primary-4)!important;
|
||||
@include respond('phone'){
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ck.ck-button.ck-on:not(.ck-disabled):hover,
|
||||
a.ck.ck-button.ck-on:not(.ck-disabled):hover {
|
||||
background-color: $primary ;
|
||||
}
|
||||
.ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_se.ck-dropdown__panel-visible {
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:first-child .ck-button {
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0 !important;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius !important;
|
||||
}
|
||||
.ck.ck-dropdown .ck-dropdown__panel .ck-list .ck-list__item:last-child .ck-button {
|
||||
border-bottom-#{$dlab-pos-left}-radius: $radius !important;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius !important;
|
||||
}
|
||||
|
||||
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners,
|
||||
.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__main > .ck-editor__editable.ck-rounded-corners{
|
||||
--ck-border-radius : #{$radius};
|
||||
}
|
||||
10
public/scss/components/uc/_uc-clipboard.scss
Normal file
10
public/scss/components/uc/_uc-clipboard.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
|
||||
|
||||
.clipboard-btn {
|
||||
transition: all .1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
9
public/scss/components/uc/_uc-counterup.scss
Normal file
9
public/scss/components/uc/_uc-counterup.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.counter-wrapper {
|
||||
.counter {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
250
public/scss/components/uc/_uc-horizontal-timeline.scss
Normal file
250
public/scss/components/uc/_uc-horizontal-timeline.scss
Normal file
@@ -0,0 +1,250 @@
|
||||
.cd-h-timeline {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.cd-h-timeline--loaded { // show the timeline after dates position has been set (using JavaScript)
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cd-h-timeline__container {
|
||||
position: relative;
|
||||
height: 6.25rem;
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.cd-h-timeline__dates {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin: 0 2.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
&::after, &::before { // these are used to create a shadow effect at the sides of the timeline
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
#{$dlab-pos-left}: 0;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
#{$dlab-pos-right}: 0;
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__line { // grey line
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
#{$dlab-pos-left}: 0;
|
||||
top: 3.0625rem;
|
||||
height: 0.125rem; // width will be set using JavaScript
|
||||
background-color: var(--primary);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__filling-line { // green filling line
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
#{$dlab-pos-left}: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $success;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__date {
|
||||
position: absolute;
|
||||
bottom: 0; // left position will be set using JavaScript
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
padding-bottom: var(--space-sm);
|
||||
color: var(--cd-color-1);
|
||||
user-select: none; // improve swipe
|
||||
text-decoration: none;
|
||||
|
||||
&::after { // this is used to create the event spot
|
||||
content: '';
|
||||
position: absolute;
|
||||
#{$dlab-pos-left}: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -0.3125rem;
|
||||
height: 0.75rem;
|
||||
width: 0.75rem;
|
||||
border-radius: 50%;
|
||||
border-width: 0.125rem;
|
||||
border-style: solid;
|
||||
border-color: var(--rgba-primary-6);
|
||||
background-color: var(--primary);
|
||||
transition: background-color 0.3s, border-color .3s;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cd-h-timeline__date--selected {
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__date--older-event::after {
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation { // arrows to navigate the timeline
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 2.125rem;
|
||||
width: 2.125rem;
|
||||
border-radius: 50%;
|
||||
border-width: 0.125rem;
|
||||
border-style: solid;
|
||||
border-color: var(--rgba-primary-6);
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&::after { // arrow icon
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
top: 50%;
|
||||
#{$dlab-pos-left}: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background: url(../images/svg/cd-arrow.svg) no-repeat 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--prev {
|
||||
#{$dlab-pos-left}: 0;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--next {
|
||||
#{$dlab-pos-right}: 0;
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--inactive {
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
background-position: 0 -1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--rgba-primary-6);
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__events { // container of events info
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: height .4s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event { // single event info
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
#{$dlab-pos-left}: 0;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
padding: 0.0625rem 5%;
|
||||
opacity: 0;
|
||||
animation-duration: 0.4s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--selected { // selected event info
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--enter-right,
|
||||
.cd-h-timeline__event--leave-right { // animate event info
|
||||
animation-name: cd-enter-right;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--enter-left,
|
||||
.cd-h-timeline__event--leave-left { // animate event info
|
||||
animation-name: cd-enter-left;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--leave-right,
|
||||
.cd-h-timeline__event--leave-left {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-content {
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-title {
|
||||
color: var(--cd-color-1);
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-xxxl);
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-date {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin: var(--space-xs) auto;
|
||||
|
||||
&::before {
|
||||
content: '- ';
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cd-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cd-enter-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
46
public/scss/components/uc/_uc-lightgallery.scss
Normal file
46
public/scss/components/uc/_uc-lightgallery.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
/* Light Gallery */
|
||||
.lg-actions .lg-next,
|
||||
.lg-actions .lg-prev,
|
||||
.lg-sub-html,
|
||||
.lg-toolbar{
|
||||
background-color: rgba(30, 30, 30, .6);
|
||||
}
|
||||
.lg-outer{
|
||||
.lg-toogle-thumb,
|
||||
.lg-thumb-outer,
|
||||
.lg-img-wrap,
|
||||
.lg-item{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.lg-thumb-outer.lg-grab,
|
||||
.lg-toogle-thumb.lg-icon{
|
||||
background-color: rgba(30, 30, 30, .6);
|
||||
}
|
||||
.lg-backdrop {
|
||||
background-color: rgba(30, 30, 30, 0.9);
|
||||
}
|
||||
.lg-outer .lg-toogle-thumb,
|
||||
.lg-actions .lg-next,
|
||||
.lg-actions .lg-prev,
|
||||
.lg-toolbar .lg-icon,
|
||||
#lg-counter{
|
||||
color: $white;
|
||||
}
|
||||
.lg-outer{
|
||||
.lg-thumb-item{
|
||||
&.active,
|
||||
&:hover{
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.lightimg{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[dir='rtl']{
|
||||
.lg-outer.lg-visible{
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
31
public/scss/components/uc/_uc-nestable.scss
Normal file
31
public/scss/components/uc/_uc-nestable.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
|
||||
|
||||
.nestable-cart {
|
||||
overflow: hidden;
|
||||
}
|
||||
.dd-handle {
|
||||
color: $white;
|
||||
background: var(--primary);
|
||||
border-radius: 0.3125rem;
|
||||
padding: 0.5rem 1rem;
|
||||
height:auto;
|
||||
border: 1px solid $border;
|
||||
cursor:all-scroll;
|
||||
}
|
||||
.dd-handle:hover {
|
||||
color: $white;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.dd3-content:hover {
|
||||
color: $white;
|
||||
background: var(--primary);
|
||||
}
|
||||
.dd3-content {
|
||||
color: $white;
|
||||
}
|
||||
.dd-item>button{
|
||||
line-height:28px;
|
||||
color:$white;
|
||||
float: #{$dlab-pos-left};
|
||||
}
|
||||
110
public/scss/components/uc/_uc-noui-slider.scss
Normal file
110
public/scss/components/uc/_uc-noui-slider.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
|
||||
.noUi-target {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.noUi-connect {
|
||||
background-color: var(--primary);
|
||||
|
||||
&s {
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
&.c-1-color {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.c-2-color {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
&.c-3-color {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&.c-4-color {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-vertical {
|
||||
width: 0.375rem;
|
||||
}
|
||||
|
||||
.noUi-horizontal {
|
||||
height: 0.375rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background-color: var(--primary);
|
||||
|
||||
&::after, &::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
right: -4px;
|
||||
bottom: -11px;
|
||||
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
top: -4px;
|
||||
}
|
||||
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
|
||||
#{$dlab-pos-right}: -6px;
|
||||
}
|
||||
#slider-toggle {
|
||||
height: 50px;
|
||||
}
|
||||
#slider-toggle.off .noUi-handle {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
.colorpicker-slider {
|
||||
.sliders.noUi-target {
|
||||
|
||||
|
||||
&#red, &#green, &#blue {
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&#red .noUi-connect {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
&#green .noUi-connect {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
&#blue .noUi-connect {
|
||||
background: #2980b9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#result {
|
||||
margin: 60px 26px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: rgb(127, 127, 127);
|
||||
background: rgb(127, 127, 127);
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-vertical {
|
||||
height: 18rem;
|
||||
}
|
||||
32
public/scss/components/uc/_uc-pignose-calender.scss
Normal file
32
public/scss/components/uc/_uc-pignose-calender.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.pignose-calendar {
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
border-color: var(--primary);
|
||||
|
||||
.pignose-calendar-top-date {
|
||||
background-color: var(--primary);
|
||||
|
||||
.pignose-calendar-top-month {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
|
||||
background-color: var(--primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pignose-calendar .pignose-calendar-top {
|
||||
box-shadow: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.pignose-calendar.pignose-calendar-blue {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.pignose-calendar .pignose-calendar-unit {
|
||||
height: 4.8em;
|
||||
}
|
||||
30
public/scss/components/uc/_uc-tagsinput.scss
Normal file
30
public/scss/components/uc/_uc-tagsinput.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-#{$dlab-pos-left}: .5rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
background-color: $white;
|
||||
width: 100%;
|
||||
|
||||
.tag {
|
||||
font-size: 0.875rem;
|
||||
background-color: var(--primary);
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
border: 0.0625rem solid $border;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
height: 2.1rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
label{
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
30
public/scss/components/uc/_uc-ticker.scss
Normal file
30
public/scss/components/uc/_uc-ticker.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-#{$dlab-pos-left}: .5rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
background-color: $white;
|
||||
width: 100%;
|
||||
|
||||
.tag {
|
||||
font-size: 0.875rem;
|
||||
background-color: var(--primary);
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
border: 0.0625rem solid $border;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
height: 2.1rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
label{
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
63
public/scss/components/uc/_uc-toastr.scss
Normal file
63
public/scss/components/uc/_uc-toastr.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
.toast {
|
||||
&-success {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&-error {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
|
||||
&>div {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
max-width: 15.625rem;
|
||||
opacity: 1;
|
||||
border-radius: $radius;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
padding: 0.9375rem 3.125rem 0.9375rem 0.9375rem;
|
||||
background-position: calc(100% - 0.9375rem);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
margin-bottom: 0.3125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.toast-close-button {
|
||||
opacity: 1;
|
||||
font-size: 1.25rem;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
[direction="rtl"] {
|
||||
.toast-top-right.demo_rtl_class {
|
||||
#{$dlab-pos-left}: 0.75rem;
|
||||
#{$dlab-pos-right}: auto;
|
||||
}
|
||||
}
|
||||
25
public/scss/components/uc/_uc-typeahead.scss
Normal file
25
public/scss/components/uc/_uc-typeahead.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
|
||||
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
|
||||
.tt-dataset.tt-dataset-states {
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 0.625rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
33
public/scss/components/uc/_uc-weather.scss
Normal file
33
public/scss/components/uc/_uc-weather.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
// Variable.scss
|
||||
|
||||
.weather-one {
|
||||
i {
|
||||
font-size: 8rem;
|
||||
position : relative;
|
||||
top : .5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display : inline-block;
|
||||
float : right;
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
|
||||
.city {
|
||||
position : relative;
|
||||
text-align: #{$dlab-pos-right};
|
||||
top : -2.5rem;
|
||||
}
|
||||
|
||||
.currently {
|
||||
font-size : 1.6rem;
|
||||
font-weight: 400;
|
||||
position : relative;
|
||||
top : 2.5rem;
|
||||
}
|
||||
|
||||
.celcious {
|
||||
text-align: #{$dlab-pos-right};
|
||||
font-size : 2rem;
|
||||
}
|
||||
}
|
||||
26
public/scss/components/ui/_interfaces.scss
Normal file
26
public/scss/components/ui/_interfaces.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@import "./ui-accordion";
|
||||
@import "./ui-alert";
|
||||
@import "./ui-badge";
|
||||
@import "./ui-breadcrumb";
|
||||
@import "./ui-button";
|
||||
@import "./ui-card";
|
||||
@import "./ui-carousel";
|
||||
@import "./ui-dropdown";
|
||||
@import "./ui-grid";
|
||||
@import "./ui-label";
|
||||
@import "./ui-list-group";
|
||||
@import "./ui-media";
|
||||
@import "./ui-menu";
|
||||
@import "./ui-modal";
|
||||
@import "./ui-pagination";
|
||||
@import "./ui-popover";
|
||||
@import "./ui-preloader";
|
||||
@import "./ui-progressbar";
|
||||
@import "./ui-ribbon";
|
||||
@import "./ui-scrollbar";
|
||||
@import "./ui-step";
|
||||
@import "./ui-tab";
|
||||
@import "./ui-tooltip";
|
||||
@import "./ui-timeline";
|
||||
|
||||
|
||||
470
public/scss/components/ui/_ui-accordion.scss
Normal file
470
public/scss/components/ui/_ui-accordion.scss
Normal file
@@ -0,0 +1,470 @@
|
||||
.accordion-button:not(.collapsed) {
|
||||
color: inherit;
|
||||
background: var(--card);
|
||||
|
||||
}
|
||||
.accordion-button.collapsed {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
// accordion primary
|
||||
&-primary{
|
||||
.accordion-button {
|
||||
&.collapsed{
|
||||
background: var(--rgba-primary-1);
|
||||
border-color:var(--rgba-primary-1);
|
||||
color: var(--primary);
|
||||
box-shadow:none;
|
||||
}
|
||||
background:var(--primary);
|
||||
border-color:var(--primary);
|
||||
color: $white;
|
||||
box-shadow: var(--rgba-primary-2) 0px 8px 24px;
|
||||
|
||||
}
|
||||
}
|
||||
&-primary-solid{
|
||||
.accordion-button {
|
||||
&.collapsed{
|
||||
background:var(--rgba-primary-1);
|
||||
border-color:var(--rgba-primary-1);
|
||||
color: var(--primary);
|
||||
box-shadow:none;
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
background:var(--primary);
|
||||
border-color:var(--primary);
|
||||
color: $white;
|
||||
box-shadow:0 -0.625rem 1.25rem 0 var(--rgba-primary-1);
|
||||
border-bottom-#{$dlab-pos-left}-radius:0;
|
||||
border-bottom-#{$dlab-pos-right}-radius:0;
|
||||
}
|
||||
.accordion-body {
|
||||
border: 0.125rem solid var(--primary);
|
||||
border-top: none;
|
||||
box-shadow:0 0.9375rem 1.25rem 0 var(--rgba-primary-1);
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
&-danger{
|
||||
.accordion-button {
|
||||
&.collapsed{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
}
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
color: $white;
|
||||
box-shadow:0 0.9375rem 1.25rem 0 rgba($danger, 0.15);
|
||||
}
|
||||
}
|
||||
&-danger-solid{
|
||||
.accordion-button {
|
||||
&.collapsed{
|
||||
background: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
color: var(--text-dark);
|
||||
box-shadow:none;
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
color: $white;
|
||||
box-shadow:0 -0.625rem 1.25rem 0 rgba($danger, 0.15);
|
||||
border-bottom-#{$dlab-pos-left}-radius:0;
|
||||
border-bottom-#{$dlab-pos-right}-radius:0;
|
||||
}
|
||||
.accordion-body {
|
||||
border: 0.125rem solid $danger;
|
||||
border-top: none;
|
||||
box-shadow:0 0.2rem 1rem 0 rgba($danger, 0.15);
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//a single accrodion
|
||||
&-item {
|
||||
margin-bottom: 1.25rem;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&:first-of-type {
|
||||
.accordion-button {
|
||||
border-top-#{$dlab-pos-left}-radius : $radius;
|
||||
border-top-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
.accordion-button.collapsed {
|
||||
border-bottom-#{$dlab-pos-left}-radius : $radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//accrodion header styles
|
||||
&-button {
|
||||
padding:.75rem 1.75rem;
|
||||
border: 0.0625rem solid var(--border);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
color: var(--text-dark);
|
||||
font-weight: 400;
|
||||
border-radius:$radius;
|
||||
--bs-accordion-btn-bg : var(--card);
|
||||
@include transitionMedium;
|
||||
&:focus{
|
||||
z-index: 2;
|
||||
}
|
||||
@include respond('laptop'){
|
||||
padding:.75rem 1.75rem;
|
||||
}
|
||||
|
||||
|
||||
//set the indicator font family
|
||||
&-indicator {
|
||||
&.indicator_bordered {
|
||||
display: inline-block;
|
||||
width: 1.5625rem;
|
||||
text-align: center;
|
||||
height: 1.5625rem;
|
||||
border: 0.0625rem solid var(--border);
|
||||
border-radius: 50%;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.collapsed){
|
||||
&::after {
|
||||
content: "\e622";
|
||||
background-image:none;
|
||||
transform: rotate(0) translateY(-50%);
|
||||
|
||||
}
|
||||
|
||||
//icon style
|
||||
&.style_two {
|
||||
&::after {
|
||||
content: "\e648";
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: "\e61a";
|
||||
font-family: 'themify';
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: 1.5625rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-image: none !important;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
&.collapsed {
|
||||
|
||||
|
||||
//icon style
|
||||
&.style_two {
|
||||
&::after {
|
||||
content: "\e64b";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//accordion body styles
|
||||
&-body {
|
||||
padding: 0.875rem 1.25rem;
|
||||
|
||||
}
|
||||
&-collapse{
|
||||
border: 0;
|
||||
}
|
||||
//accrodion with border
|
||||
&-bordered {
|
||||
.accordion-body {
|
||||
border: 0.0625rem solid var(--border);
|
||||
border-top: none;
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
.accordion-button.collapsed{
|
||||
border-radius:$radius;
|
||||
}
|
||||
.accordion-button{
|
||||
border-bottom-#{$dlab-pos-left}-radius:0;
|
||||
border-bottom-#{$dlab-pos-right}-radius:0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//accrodion without space
|
||||
&-no-gutter {
|
||||
.accordion-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.accordion-button {
|
||||
&.collapsed {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.accordion-button {
|
||||
border-bottom: 0.0625rem solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//not gutter and bordered
|
||||
&-no-gutter.accordion-bordered {
|
||||
|
||||
.accordion-item {
|
||||
&:not(:last-child) {
|
||||
.accordion-body {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.accordion-button{
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//indicator in left positon
|
||||
&-left-indicator {
|
||||
.accordion-button {
|
||||
box-shadow:none;
|
||||
&-text {
|
||||
padding-#{$dlab-pos-left}: 2.5rem;
|
||||
}
|
||||
|
||||
|
||||
&:after {
|
||||
#{$dlab-pos-left}: 1rem;
|
||||
#{$dlab-pos-right}: auto;
|
||||
}
|
||||
.accordion-header-text{
|
||||
padding-#{$dlab-pos-left}:2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-bordered{
|
||||
.accordion-button {
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
|
||||
//with icon
|
||||
&-with-icon {
|
||||
.accordion-button {
|
||||
box-shadow:none;
|
||||
&-text {
|
||||
padding-#{$dlab-pos-left}: 2.5rem;
|
||||
}
|
||||
|
||||
.accordion-header-icon {
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: auto;
|
||||
#{$dlab-pos-left}: 1.5625rem;
|
||||
font-family: 'themify';
|
||||
&::before {
|
||||
content: "\e645";
|
||||
}
|
||||
}
|
||||
.accordion-header-text{
|
||||
padding-#{$dlab-pos-left}:2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//with header background
|
||||
&-header-bg {
|
||||
.accordion-header {
|
||||
.accordion-button{
|
||||
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
|
||||
&-primary {
|
||||
.accordion-button{
|
||||
background-color: var(--primary);
|
||||
color: $white;
|
||||
border-color:var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
.accordion-button{
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
border-color:$info;
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
.accordion-button{
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
border-color:$success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//with header background and no space
|
||||
&-header-bg.accordion-no-gutter {
|
||||
.accordion-button {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow:none;
|
||||
}
|
||||
.accordion-item{
|
||||
&:first-child{
|
||||
.accordion-button{
|
||||
border-top-#{$dlab-pos-left}-radius:$radius;
|
||||
border-top-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.accordion-button{
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-no-gutter {
|
||||
.accordion-button {
|
||||
border-radius: 0;
|
||||
box-shadow:none;
|
||||
}
|
||||
.accordion-button.collapsed {
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion-body{
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion-item{
|
||||
&:first-child{
|
||||
.accordion-button{
|
||||
border-top-#{$dlab-pos-left}-radius:$radius;
|
||||
border-top-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.accordion-button.collapsed{
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
.accordion-body{
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//with solid background
|
||||
&-solid-bg {
|
||||
.accordion-button {
|
||||
box-shadow:none;
|
||||
border-color: transparent;
|
||||
background-color:var(--rgba-primary-1);
|
||||
border-bottom-#{$dlab-pos-left}-radius:0;
|
||||
border-bottom-#{$dlab-pos-right}-radius:0;
|
||||
|
||||
&.collapsed{
|
||||
border-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
border-color: transparent;
|
||||
background-color:var(--rgba-primary-1);
|
||||
border-bottom-#{$dlab-pos-left}-radius:$radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
//active header styles
|
||||
&-active-header {
|
||||
.accordion-button {
|
||||
box-shadow:none;
|
||||
&:not(.collapsed) {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//shadow in header
|
||||
&-header-shadow {
|
||||
.accordion-button {
|
||||
border: none;
|
||||
box-shadow: 0 0 0.9375rem -0.1875rem rgba($color: $black, $alpha: .3);
|
||||
}
|
||||
}
|
||||
|
||||
//stylishly rounded borders
|
||||
&-rounded-stylish {
|
||||
.accordion-button {
|
||||
border-top-#{$dlab-pos-left}-radius: 0.375rem;
|
||||
border-top-#{$dlab-pos-right}-radius: 0.375rem;
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0.375rem;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
//smothly rounded accrodion header
|
||||
&-rounded {
|
||||
.accordion-button {
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
//accordion gradient
|
||||
&-gradient {
|
||||
.accordion-button {
|
||||
color: $white;
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
border-color: transparent;
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0;
|
||||
box-shadow:none;
|
||||
&.collapsed{
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0.375rem;
|
||||
border-bottom-#{$dlab-pos-right}-radius:0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
color: $white;
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&-body{
|
||||
font-size: .85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-button:focus{
|
||||
border-color: var(--rgba-primary-3);
|
||||
}
|
||||
358
public/scss/components/ui/_ui-alert.scss
Normal file
358
public/scss/components/ui/_ui-alert.scss
Normal file
@@ -0,0 +1,358 @@
|
||||
|
||||
|
||||
.alert{
|
||||
border-radius: $radius;
|
||||
padding: .75rem 0;
|
||||
padding-#{$dlab-pos-left}: 1.2rem;
|
||||
padding-#{$dlab-pos-right}: 2.5rem;
|
||||
p{
|
||||
line-height:1.5;
|
||||
}
|
||||
}
|
||||
.alert-square{
|
||||
border-radius:0!important;
|
||||
}
|
||||
|
||||
.alert-rounded{
|
||||
border-radius: 1.875rem;
|
||||
}
|
||||
|
||||
// Basic Alert
|
||||
|
||||
|
||||
.alert-primary{
|
||||
background: var(--rgba-primary-1);
|
||||
border-color: var(--rgba-primary-1);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.alert-secondary{
|
||||
background: $secondary-opacity;
|
||||
border-color: $secondary-opacity;
|
||||
color: $secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alert-success{
|
||||
background: $success-opacity;
|
||||
border-color: $success-opacity;
|
||||
color: darken($success,25%);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning{
|
||||
background: $warning-opacity;
|
||||
border-color: $warning-opacity;
|
||||
color: darken($warning,25%);
|
||||
}
|
||||
|
||||
.alert-danger{
|
||||
background: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.alert-info{
|
||||
background: $info-opacity;
|
||||
border-color: $info-opacity;
|
||||
color: $info;
|
||||
}
|
||||
|
||||
.alert-dark{
|
||||
background: $dark-opacity;
|
||||
border-color: $dark-opacity;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.alert-light{
|
||||
background: $light;
|
||||
border-color: $light;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: rgba($light, 0.3);
|
||||
border-color: rgba($light, 0.3);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Alert alt
|
||||
|
||||
.alert-alt.alert-primary{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid var(--primary);
|
||||
}
|
||||
|
||||
.alert-alt.alert-secondary{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid $secondary;
|
||||
}
|
||||
|
||||
|
||||
.alert-alt.alert-success{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid $success
|
||||
}
|
||||
|
||||
.alert-alt.alert-warning{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid $warning;
|
||||
}
|
||||
|
||||
.alert-alt.alert-danger{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid $danger;
|
||||
}
|
||||
|
||||
.alert-alt.alert-info{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid $info;
|
||||
}
|
||||
|
||||
.alert-alt.alert-dark{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid $dark;
|
||||
}
|
||||
.alert-alt.alert-light{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($light,15%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alert alt with solid color
|
||||
|
||||
.alert-alt.alert-primary.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid var(--primary-dark)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-secondary.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($secondary,25%)!important;
|
||||
}
|
||||
|
||||
|
||||
.alert-alt.alert-success.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($success, 25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-warning.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($warning,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-danger.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($danger,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-info.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($info,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-dark.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($dark,25%)!important;
|
||||
}
|
||||
.alert-alt.alert-light.solid{
|
||||
border-#{$dlab-pos-left}: 0.25rem solid darken($light,25%)!important;
|
||||
}
|
||||
|
||||
|
||||
//Alert dismissable with solid color
|
||||
.alert-dismissible.solid:not(.alert-light),
|
||||
.alert-social{
|
||||
.btn-close{
|
||||
color: $white;
|
||||
opacity: 1;
|
||||
// &:hover{
|
||||
// color: $white;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.alert-dismissible .btn-close{
|
||||
padding: .85rem 1rem;
|
||||
}
|
||||
|
||||
.alert-icon{
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
margin-#{$dlab-pos-right}: .25rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alert Solid
|
||||
.alert.alert-primary.solid{
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.alert.alert-secondary.solid{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
border-color: $secondary;
|
||||
}
|
||||
.alert.alert-success.solid{
|
||||
background: $success;
|
||||
color: $white;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.alert.alert-warning.solid{
|
||||
background: $warning;
|
||||
color: $white;
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
.alert.alert-danger.solid{
|
||||
background: $danger;
|
||||
color: $white;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.alert.alert-info.solid{
|
||||
background: $info;
|
||||
color: $white;
|
||||
border-color: $info;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-dark.solid{
|
||||
background: $dark;
|
||||
color: $white;
|
||||
border-color: $dark;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-light.solid{
|
||||
background: $light;
|
||||
color: $dark;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Alert right icon
|
||||
|
||||
.alert-right-icon{
|
||||
&>span i{
|
||||
font-size: 1.125rem;
|
||||
margin-#{$dlab-pos-right}: 0.3125rem;
|
||||
}
|
||||
.close{
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alert Outline
|
||||
.alert.alert-outline-primary{
|
||||
background: transparent;
|
||||
color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-secondary{
|
||||
background: transparent;
|
||||
color: $body-color;
|
||||
border-color: $secondary;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-success{
|
||||
background: transparent;
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-info{
|
||||
background: transparent;
|
||||
color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-warning{
|
||||
background: transparent;
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
.alert.alert-outline-danger{
|
||||
background: transparent;
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.alert.alert-outline-dark{
|
||||
background: transparent;
|
||||
color: $body-color;
|
||||
border-color: $dark;
|
||||
}
|
||||
|
||||
.alert.alert-outline-light{
|
||||
background: transparent;
|
||||
color: $dark;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alert Social
|
||||
.alert-social{
|
||||
color: $white;
|
||||
.alert-social-icon{
|
||||
align-self: center;
|
||||
margin-#{$dlab-pos-right}: 0.9375rem;
|
||||
i{
|
||||
font-size: 2.625rem;
|
||||
}
|
||||
}
|
||||
&.facebook{
|
||||
background-color: $facebook;
|
||||
}
|
||||
&.twitter{
|
||||
background-color: $twitter;
|
||||
}
|
||||
&.linkedin{
|
||||
background-color: $linkedin;
|
||||
}
|
||||
&.google-plus{
|
||||
background-color: $google-plus;
|
||||
}
|
||||
.close{
|
||||
&:hover{
|
||||
opacity: 1!important;
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alert left icon
|
||||
|
||||
.left-icon-big{
|
||||
.alert-left-icon-big{
|
||||
align-self: center;
|
||||
margin-#{$dlab-pos-right}: 0.9375rem;
|
||||
i{
|
||||
font-size: 2.1875rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
div:where(.swal2-container) div:where(.swal2-popup){
|
||||
background: var(--card)!important;
|
||||
color: var(--text-dark)!important;
|
||||
}
|
||||
|
||||
.alert-dismissible .btn-close{
|
||||
top: 0;
|
||||
#{$dlab-pos-right}: 0;
|
||||
#{$dlab-pos-left}: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
205
public/scss/components/ui/_ui-badge.scss
Normal file
205
public/scss/components/ui/_ui-badge.scss
Normal file
@@ -0,0 +1,205 @@
|
||||
.badge{
|
||||
line-height: 1.5;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border:0.0625rem solid transparent;
|
||||
min-width: 23px;
|
||||
min-height: 23px;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.badge-rounded{
|
||||
border-radius: 1.25rem;
|
||||
padding:0.1875rem 0.8125rem ;
|
||||
}
|
||||
.badge-circle{
|
||||
border-radius: 6.25rem;
|
||||
padding: 0.1875rem 0.4375rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.badge-outline-primary{
|
||||
border: 0.0625rem solid var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
.badge-outline-secondary{
|
||||
border: 0.0625rem solid $secondary;
|
||||
color: $secondary;
|
||||
}
|
||||
.badge-outline-success{
|
||||
border: 0.0625rem solid $success;
|
||||
color: $success;
|
||||
}
|
||||
.badge-outline-info{
|
||||
border: 0.0625rem solid $info;
|
||||
color: $info;
|
||||
}
|
||||
.badge-outline-warning{
|
||||
border: 0.0625rem solid $warning;
|
||||
color: $warning;
|
||||
}
|
||||
.badge-outline-danger{
|
||||
border: 0.0625rem solid $danger;
|
||||
color: $danger;
|
||||
}
|
||||
.badge-outline-light{
|
||||
border: 0.0625rem solid $border;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.badge-outline-dark{
|
||||
border: 0.0625rem solid $dark;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.badge-xs {
|
||||
padding: 0px 8px;
|
||||
line-height: 14px;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
height: 16px;
|
||||
min-height: 16px;
|
||||
font-size: .58rem;
|
||||
|
||||
&.style-1{
|
||||
margin-#{$dlab-pos-left}:6px;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-sm {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
line-height: 0.6rem;
|
||||
min-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
font-size: 0.875rem;
|
||||
padding: 0rem 0.625rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
|
||||
|
||||
.badge-xl {
|
||||
font-size: 1rem;
|
||||
padding: 0rem 0.9375rem;
|
||||
line-height: 2.1875rem;
|
||||
}
|
||||
.badge-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
.badge-success {
|
||||
background-color: $success;
|
||||
}
|
||||
.badge-secondary {
|
||||
background-color: $secondary;
|
||||
}
|
||||
.badge-info {
|
||||
background-color: $info;
|
||||
}
|
||||
.badge-primary {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
.badge-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
.badge-danger {
|
||||
background-color: $danger;
|
||||
}
|
||||
.badge-dark {
|
||||
background-color: $dark;
|
||||
}
|
||||
.badge-light {
|
||||
background-color: $light;
|
||||
color: $text-dark;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.light.badge-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
.light.badge-success {
|
||||
background-color: $success-opacity;
|
||||
color:$success;
|
||||
}
|
||||
.light.badge-info {
|
||||
background-color: $info-opacity;
|
||||
color:$info;
|
||||
}
|
||||
.light.badge-primary {
|
||||
background-color: var(--rgba-primary-1);
|
||||
color:var(--primary);
|
||||
}
|
||||
.light.badge-secondary {
|
||||
background-color: $secondary-light;
|
||||
color:$secondary;
|
||||
}
|
||||
.light.badge-warning {
|
||||
background-color: $warning-opacity;
|
||||
color:$warning;
|
||||
}
|
||||
.light.badge-danger {
|
||||
background-color: $danger-opacity;
|
||||
color:$danger;
|
||||
}
|
||||
.light.badge-dark {
|
||||
background-color: $dark-opacity;
|
||||
color:$dark;
|
||||
}
|
||||
.light.badge-light {
|
||||
background-color: $light;
|
||||
color:$text-dark;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
|
||||
.bootstrap-label{
|
||||
.label{
|
||||
display: inline-block;
|
||||
margin-#{$dlab-pos-right}: 1rem;
|
||||
|
||||
&:last-child{
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-demo{
|
||||
|
||||
.badge{
|
||||
margin-#{$dlab-pos-right}: 0.3125rem;
|
||||
margin-bottom: 0.3125rem;
|
||||
|
||||
&:last-child{
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-badge-buttons{
|
||||
|
||||
button{
|
||||
margin-#{$dlab-pos-right}: .2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child{
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
98
public/scss/components/ui/_ui-breadcrumb.scss
Normal file
98
public/scss/components/ui/_ui-breadcrumb.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
.breadcrumb{
|
||||
font-size:1.1875rem;
|
||||
.breadcrumb-item{
|
||||
&.active{
|
||||
a{
|
||||
color:var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-item + .breadcrumb-item{
|
||||
padding-#{$dlab-pos-left}: 0.5rem;
|
||||
&::before{
|
||||
color:var(--primary);
|
||||
float: #{$dlab-pos-left};
|
||||
padding-#{$dlab-pos-right} : 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-titles {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--card);
|
||||
margin-bottom: 1.875rem;
|
||||
border-radius: $radius;
|
||||
margin-top: 0;
|
||||
margin-#{$dlab-pos-left}: 0;
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
|
||||
@include respond ('phone'){
|
||||
padding:0.75rem 1.075rem;
|
||||
}
|
||||
|
||||
.justify-content-sm-end{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
color: var(--primary);
|
||||
font-size: 1.25rem;
|
||||
span {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
li {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
a{
|
||||
color: $l-ctl;
|
||||
@include respond ('phone'){
|
||||
font-size:0.875rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.active{
|
||||
color:var(--primary);
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-datepicker{
|
||||
font-size: 0.75rem;
|
||||
color: $muted;
|
||||
|
||||
&__icon{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-widget{
|
||||
.border-dark{
|
||||
border-color: $gray-300!important;
|
||||
}
|
||||
h4{
|
||||
color: $strong;
|
||||
font-weight: 600;
|
||||
}
|
||||
@include respond('phone') {
|
||||
text-align: #{$dlab-pos-left}!important;
|
||||
margin-bottom: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
1064
public/scss/components/ui/_ui-button.scss
Normal file
1064
public/scss/components/ui/_ui-button.scss
Normal file
File diff suppressed because it is too large
Load Diff
239
public/scss/components/ui/_ui-card.scss
Normal file
239
public/scss/components/ui/_ui-card.scss
Normal file
@@ -0,0 +1,239 @@
|
||||
.card {
|
||||
margin-bottom: 1.875rem;
|
||||
background-color: var(--card);
|
||||
transition: all .5s ease-in-out;
|
||||
position: relative;
|
||||
border: 0rem solid transparent;
|
||||
border-radius: $radius;
|
||||
box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgba(82,63,105,0.05);
|
||||
height: calc(100% - 30px);
|
||||
|
||||
@include custommq($max: 35.9375rem) {
|
||||
margin-bottom:0.938rem;
|
||||
height: calc(100% - 0.938rem);
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding: 1.875rem;
|
||||
@include respond('phone') {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dark);
|
||||
text-transform: capitalize;
|
||||
|
||||
&--large{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&--medium{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&--small{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
border-color: var(--border);
|
||||
position: relative;
|
||||
background: transparent;
|
||||
padding:1.5rem 1.875rem 1.25rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@include respond('phone') {
|
||||
padding: 1.25rem 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
.subtitle{
|
||||
padding-top: 0.3125rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-color: var(--border);
|
||||
background: transparent;
|
||||
padding: 1.25rem 1.875rem 1.25rem;
|
||||
@include respond('phone') {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
&-link{
|
||||
&:hover{
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-card{
|
||||
&.card{
|
||||
background: transparent;
|
||||
border: 0.0625rem solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////
|
||||
// Card action
|
||||
///////////////////
|
||||
.card-action {
|
||||
> a {
|
||||
display: inline-block;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
line-height: 1.875rem;
|
||||
border-radius: 0.3125rem;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
background: var(--primary-dark);
|
||||
color: $white;
|
||||
margin-#{$dlab-pos-right}: 0.5rem;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
&:hover,&:focus{
|
||||
background: var(--primary-dark);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
i,span{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
border-radius: 0.3125rem;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
margin-#{$dlab-pos-right}: 0.5rem;
|
||||
top: -0.125rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: var(--primary-dark);
|
||||
color: var(--primary);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
|
||||
&:hover,&:focus{
|
||||
background: var(--primary-dark);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
padding: 0;
|
||||
line-height: 1.6875rem;
|
||||
color: $white;
|
||||
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
#{$dlab-pos-left}: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99999999;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$dlab-pos-left}: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 999
|
||||
}
|
||||
|
||||
.card-loader i {
|
||||
margin: 0 auto;
|
||||
background: var(--primary-dark);
|
||||
padding: 0.625rem;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.rotate-refresh {
|
||||
-webkit-animation: mymove 0.8s infinite linear;
|
||||
animation: mymove 0.8s infinite linear;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.date_picker {
|
||||
display: inline-block;
|
||||
padding: 0.5rem;
|
||||
border: 0.0625rem solid $border;
|
||||
cursor: pointer;
|
||||
border-radius: .375rem;
|
||||
}
|
||||
.border-0{
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes mymove {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mymove {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
53
public/scss/components/ui/_ui-carousel.scss
Normal file
53
public/scss/components/ui/_ui-carousel.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
.carousel-custom{
|
||||
|
||||
&-prev, &-next{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: $white;
|
||||
text-align: center;
|
||||
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: linear-gradient(to right, rgba(245, 60, 121, 0.99) 0%, rgba(246, 104, 47, 0.99) 100%);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&-next{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
#{$dlab-pos-right}: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&-prev{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
#{$dlab-pos-left}: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.carousel-caption{
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.78);
|
||||
z-index:1;
|
||||
background: rgba($black,0.6);
|
||||
h5{
|
||||
color: $white;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.carousel-indicators{
|
||||
z-index:1;
|
||||
}
|
||||
123
public/scss/components/ui/_ui-dropdown.scss
Normal file
123
public/scss/components/ui/_ui-dropdown.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
.dropdown-toggle:focus {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
.dropdown-outline{
|
||||
border: .1rem solid var(--primary);
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
z-index: 3;
|
||||
overflow:hidden;
|
||||
border-radius:$radius;
|
||||
box-shadow: 0 0 3.125rem 0 rgba(82, 63, 105, 0.15);
|
||||
margin-top:0;
|
||||
padding: 0.5rem 0rem;
|
||||
background-color: var(--card);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
box-shadow: 0rem 2rem 2.5rem 0rem rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.dropdown-item{
|
||||
font-size: var(--dz-list-size);
|
||||
color:var(--text);
|
||||
padding: var(--dz-list-space-y) var(--dz-list-space-x);
|
||||
text-align: #{$dlab-pos-left};
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active{
|
||||
color: var(--text-gray);
|
||||
background-color: var(--light);
|
||||
}
|
||||
&.active,
|
||||
&:active{
|
||||
color: var(--primary);
|
||||
background:var(--rgba-primary-1);
|
||||
}
|
||||
}
|
||||
&.show{
|
||||
#{$dlab-pos-right}: 0;
|
||||
#{$dlab-pos-left}: auto;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Custom Dropdown
|
||||
///////////////////
|
||||
.dropdown-toggle-split {
|
||||
padding: 0 0.625rem;
|
||||
opacity: 0.85;
|
||||
&:after{
|
||||
margin-#{$dlab-pos-left}:0 !important;
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropright .dropdown-toggle::after {
|
||||
content:none;
|
||||
}
|
||||
.custom-dropdown{
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.dropdown-menu{
|
||||
border: 0rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
}
|
||||
.card-action{
|
||||
.custom-dropdown{
|
||||
margin: 0rem;
|
||||
background: var(--rgba-primary-1);
|
||||
&.show,&:focus,&:hover{
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
i{
|
||||
display: inline-block;
|
||||
padding-top: 0.5625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
.dropdown-dots{
|
||||
position: relative;
|
||||
height: 0.3125rem;
|
||||
width: 0.3125rem;
|
||||
background: rgba($dark, 0.4);
|
||||
border-radius: 0.3125rem;
|
||||
display: block;
|
||||
&:after,
|
||||
&:before{
|
||||
content: "";
|
||||
height: 0.3125rem;
|
||||
width: 0.3125rem;
|
||||
background: rgba($dark, 0.4);
|
||||
position: absolute;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
&:after{
|
||||
#{$dlab-pos-right}: -0.5rem;
|
||||
}
|
||||
&:before{
|
||||
#{$dlab-pos-left}: -0.5rem;
|
||||
}
|
||||
|
||||
&.text-white{
|
||||
background: rgba($white, 0.7);
|
||||
&:after,
|
||||
&:before{
|
||||
background: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
public/scss/components/ui/_ui-grid.scss
Normal file
19
public/scss/components/ui/_ui-grid.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.grid-col {
|
||||
padding: 0.5rem !important;
|
||||
background:$l-bg;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row.grid {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row.grid .grid-col:first-child{
|
||||
text-align: #{$dlab-pos-left};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
154
public/scss/components/ui/_ui-label.scss
Normal file
154
public/scss/components/ui/_ui-label.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
.label {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
padding: .2rem .8rem;
|
||||
|
||||
&-fixed {
|
||||
width: 7.5rem;
|
||||
padding: .6rem 0;
|
||||
|
||||
&-lg {
|
||||
width: 9.5rem;
|
||||
padding: .6rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-big {
|
||||
width: 16.8rem;
|
||||
font-size: 1.4rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-xl {
|
||||
width: 10.5rem;
|
||||
padding: 1.1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
width: 9.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-md {
|
||||
width: 8.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
width: 7.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
|
||||
.label-primary{
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-secondary{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-info{
|
||||
background: $info;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-success{
|
||||
background: $success;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-warning{
|
||||
background: $warning;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-danger{
|
||||
background: $danger;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.label-light{
|
||||
background: $light;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
|
||||
.label-dark{
|
||||
background: $dark;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
code{
|
||||
word-break: break-word;
|
||||
padding: 0.125rem 0.3125rem;
|
||||
border-radius: 0.1875rem;
|
||||
background-color:var(--rgba-primary-1);
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: rgba($danger, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.heading-labels{
|
||||
color: #333333;
|
||||
|
||||
& > *{
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
|
||||
h1{
|
||||
.label{
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
padding: .4rem .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
.label{
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
padding: 0.3rem .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3{
|
||||
.label{
|
||||
font-size: 0.875rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h4{
|
||||
.label{
|
||||
font-size: 0.75rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h5{
|
||||
.label{
|
||||
font-size: 0.75rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h6{
|
||||
.label{
|
||||
font-size: 0.75rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
public/scss/components/ui/_ui-list-group.scss
Normal file
46
public/scss/components/ui/_ui-list-group.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
.list-group-item {
|
||||
background-color: rgba(255,255,255,0);
|
||||
border: 1px solid var(--border);
|
||||
padding: 1rem 1.5rem;
|
||||
--bs-list-group-color : var(--text-dark);
|
||||
&.active{
|
||||
background-color :var(--primary);
|
||||
border-color :var(--primary);
|
||||
}
|
||||
}
|
||||
.list-group{
|
||||
border-radius: $radius;
|
||||
}
|
||||
.list-group-item.disabled, .list-group-item:disabled {
|
||||
color: #fff;
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
[class*="bg-"]{
|
||||
.list-group-item{
|
||||
border-color:rgba($white, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-warning{
|
||||
.list-group-item{
|
||||
border-color:rgba($black, 0.05);
|
||||
}
|
||||
}
|
||||
.list-group-item-primary{
|
||||
color: var(--primary);
|
||||
}
|
||||
.list-group-item-secondary{
|
||||
color: $secondary;
|
||||
}
|
||||
.list-group-item-success{
|
||||
color: $success;
|
||||
}
|
||||
.list-group-item-danger{
|
||||
color: $danger;
|
||||
}
|
||||
.list-group-item-warning{
|
||||
color: $warning;
|
||||
}
|
||||
.list-group-item-info{
|
||||
color: $info;
|
||||
}
|
||||
5
public/scss/components/ui/_ui-media.scss
Normal file
5
public/scss/components/ui/_ui-media.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.media{
|
||||
img{
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
}
|
||||
136
public/scss/components/ui/_ui-menu.scss
Normal file
136
public/scss/components/ui/_ui-menu.scss
Normal file
@@ -0,0 +1,136 @@
|
||||
.vertical-card__menu {
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&--image {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-bottom-#{$dlab-pos-left}-radius: 0.25rem;
|
||||
border-bottom-#{$dlab-pos-right}-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--status {
|
||||
&.closed {
|
||||
background: $danger;
|
||||
|
||||
&:after {
|
||||
border-top: 0.625rem solid $danger;
|
||||
}
|
||||
|
||||
.ribbon-curve {
|
||||
border-top: 0.6875rem solid $danger;
|
||||
border-bottom: 0.625rem solid $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--desc {
|
||||
|
||||
p {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--price {
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--rating {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--button {
|
||||
button {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-footer {
|
||||
padding: 0.9375rem 1.25rem;
|
||||
background-color: $border;
|
||||
border-top: none;
|
||||
|
||||
@include custommq($min: 75rem, $max: 90rem) {
|
||||
padding: 0.9375rem;
|
||||
}
|
||||
|
||||
span{
|
||||
color: $dark;
|
||||
margin-#{$dlab-pos-right}: 0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-card__menu {
|
||||
box-shadow: 0 0 0.4375rem rgba(173, 173, 173, 0.32);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
padding: 1.25rem 1.875rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--image {
|
||||
flex-basis: 30%;
|
||||
max-width: 30%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
max-width: unset;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
&--fav {
|
||||
margin-#{$dlab-pos-right}: 0.5rem;
|
||||
}
|
||||
|
||||
&--price {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--rating {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
&--footer {
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.prev_price {
|
||||
text-decoration: line-through;
|
||||
font-size: 80%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
31
public/scss/components/ui/_ui-modal.scss
Normal file
31
public/scss/components/ui/_ui-modal.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
|
||||
.modal-header{
|
||||
padding: 1rem 1.875rem;
|
||||
|
||||
.close{
|
||||
padding: 0.875rem 1.815rem;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
#{$dlab-pos-right}: 0;
|
||||
float: none;
|
||||
top: 0;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: 1.875rem;
|
||||
}
|
||||
.modal-footer{
|
||||
padding: 1rem 1.875rem;
|
||||
}
|
||||
.modal-content{
|
||||
border-radius:$radius;
|
||||
background-color: var(--card);
|
||||
}
|
||||
.modal-backdrop{
|
||||
z-index: 10!important;
|
||||
}
|
||||
.modal .required:not(.form-label) {
|
||||
color:$danger;
|
||||
}
|
||||
310
public/scss/components/ui/_ui-pagination.scss
Normal file
310
public/scss/components/ui/_ui-pagination.scss
Normal file
@@ -0,0 +1,310 @@
|
||||
.pagination .page-item{
|
||||
.page-link{
|
||||
&:hover{
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&.active .page-link{
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
.page-item {
|
||||
&:first-child{
|
||||
.page-link{
|
||||
border-radius: 0;
|
||||
border-top-#{$dlab-pos-left}-radius : $radius;
|
||||
border-bottom-#{$dlab-pos-left}-radius : $radius;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.page-link{
|
||||
border-radius: 0;
|
||||
border-top-#{$dlab-pos-right}-radius : $radius;
|
||||
border-bottom-#{$dlab-pos-right}-radius : $radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-indicator .page-link {
|
||||
padding: .65rem .8rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&.page-indicator:hover{
|
||||
.page-link{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
text-align: center;
|
||||
z-index:1;
|
||||
padding: 0.55rem 1rem;
|
||||
font-size: 1rem;
|
||||
background-color:var(--card);
|
||||
color: var(--text-gray);
|
||||
border: 0.0625rem solid var(--border);
|
||||
&:hover i,span{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus{
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: $white;
|
||||
box-shadow:0 0.625rem 1.25rem 0rem var(--rgba-primary-2);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: $dark;
|
||||
@include transitionMedium;
|
||||
}
|
||||
|
||||
&:last-child .page-link{
|
||||
margin-#{$dlab-pos-right}: 0;
|
||||
}
|
||||
}
|
||||
&.no-bg{
|
||||
li:not(.page-indicator):not(.active) .page-link{
|
||||
background:transparent;
|
||||
border-color:transparent;
|
||||
|
||||
}
|
||||
&.pagination-primary{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:var(--primary);
|
||||
border-color:var(--primary);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:var(--primary);
|
||||
border-color:var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-danger{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-info{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-warning{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-primary{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:var(--rgba-primary-1);
|
||||
border-color:var(--rgba-primary-1);
|
||||
color:var(--primary);
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:var(--primary);
|
||||
border-color:var(--primary);
|
||||
box-shadow:0 0.625rem 1.25rem 0rem var(--rgba-primary-2);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-danger{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$danger-opacity;
|
||||
border-color:$danger-opacity;
|
||||
color:$danger;
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
color: $white;
|
||||
box-shadow:0 0.625rem 1.25rem 0rem rgba($danger, 0.2);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$info-opacity;
|
||||
border-color:$info-opacity;
|
||||
color:$info;
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
color: $white;
|
||||
box-shadow:0 0.625rem 1.25rem 0rem rgba($info, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$warning-opacity;
|
||||
border-color:$warning-opacity;
|
||||
color:$warning;
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
color: $white;
|
||||
box-shadow:0 0.625rem 1.25rem 0rem rgba($warning, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gutter{
|
||||
|
||||
.page-item{
|
||||
margin-#{$dlab-pos-right}: 0.4375rem;
|
||||
|
||||
.page-link{
|
||||
border-radius: $radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-circle{
|
||||
.page-item{
|
||||
margin-#{$dlab-pos-right}: 0.4375rem;
|
||||
|
||||
.page-link, .page-link{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0;
|
||||
line-height: 2.5rem;
|
||||
border-radius: 50% !important;
|
||||
padding: 0;
|
||||
}
|
||||
&.page-indicator{
|
||||
.page-link{
|
||||
width: 2.5rem;
|
||||
border: 1px solid var(--rgba-primary-1);
|
||||
border-radius: 22px!important;
|
||||
line-height: 1.2rem;
|
||||
height: 2.5rem;
|
||||
background:var(--rgba-primary-1);
|
||||
color:var(--primary);
|
||||
&:hover{
|
||||
color:$white;
|
||||
background:var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-md{
|
||||
|
||||
.page-item{
|
||||
|
||||
.page-link{
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
line-height: 1.875rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-sm{
|
||||
|
||||
.page-item{
|
||||
|
||||
&.page-indicator .page-link {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.page-link{
|
||||
padding: 0;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
line-height: 1.775rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-xs{
|
||||
|
||||
.page-item{
|
||||
|
||||
&.page-indicator .page-link {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.page-link{
|
||||
padding: 0;
|
||||
width: 1.5625rem;
|
||||
height: 1.5625rem;
|
||||
line-height: 1.4625rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
73
public/scss/components/ui/_ui-popover.scss
Normal file
73
public/scss/components/ui/_ui-popover.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
.popover{
|
||||
border: 0.125rem solid rgba($secondary, 0.1);
|
||||
min-width: 13.125rem;
|
||||
box-shadow: 0 0 1.875rem 0 rgba(0,0,0,0.1);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
&-header{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
font-weight: 300;
|
||||
|
||||
&::before{
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
font-size: 0.75rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:#828690 ;
|
||||
}
|
||||
}
|
||||
.popover-header{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $dark-card;
|
||||
}
|
||||
}
|
||||
@include respond ('phone-land'){
|
||||
z-index:1;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-popover-wrapper{
|
||||
.bootstrap-popover:not(:last-child){
|
||||
margin-#{$dlab-pos-right}: 0.5rem;
|
||||
}
|
||||
|
||||
.bootstrap-popover{
|
||||
margin-bottom: .5rem;
|
||||
|
||||
button:hover,button:focus{
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
|
||||
bottom: 0rem;
|
||||
border-top-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
|
||||
#{$dlab-pos-right}: 0rem;
|
||||
border-left-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
|
||||
#{$dlab-pos-left}: 0rem;
|
||||
border-right-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
|
||||
top: 0rem;
|
||||
border-bottom-color: $secondary;
|
||||
}
|
||||
|
||||
.note-popover{
|
||||
display: none;
|
||||
}
|
||||
0
public/scss/components/ui/_ui-preloader.scss
Normal file
0
public/scss/components/ui/_ui-preloader.scss
Normal file
183
public/scss/components/ui/_ui-pricing.scss
Normal file
183
public/scss/components/ui/_ui-pricing.scss
Normal file
@@ -0,0 +1,183 @@
|
||||
.pricing-wrapper {
|
||||
margin-top: 7rem;
|
||||
|
||||
.pricing-heading-text {
|
||||
text-align: center;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
h2 {
|
||||
font-size: 4.5rem;
|
||||
line-height: 1.2;
|
||||
color: $pale-sky;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $pale-sky;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.plan-swither {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
margin-top: 3rem;
|
||||
|
||||
&>* {
|
||||
margin-#{$dlab-pos-left}: 1rem;
|
||||
margin-#{$dlab-pos-right}: 1rem;
|
||||
}
|
||||
|
||||
.switch label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
height: 5.5rem;
|
||||
width: 5.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.single-pricing-table {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-height: 89rem;
|
||||
|
||||
.upper-border {
|
||||
height: 1.5rem;
|
||||
border-bottom-#{$dlab-pos-right}-radius: .5rem;
|
||||
border-bottom-#{$dlab-pos-left}-radius: .5rem;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
margin-top: 2rem;
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
padding: 2.8rem 0;
|
||||
margin: 3rem 0;
|
||||
display: flex;
|
||||
color: $white;
|
||||
justify-content: center;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 6rem;
|
||||
color: $white;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.currency-timeplan {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-icon {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.plan-specification {
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 2.5rem 0;
|
||||
|
||||
del{
|
||||
color: $athensGray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
border: .1rem solid $border;
|
||||
margin-top: 4.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2290ff;
|
||||
transition: all .2s;
|
||||
padding: 0.9rem 1.8rem;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-footer-text {
|
||||
margin-bottom: 7rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
b{
|
||||
border-bottom: 1px solid $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
padding: .95rem 2.5rem;
|
||||
|
||||
i{
|
||||
padding-#{$dlab-pos-right}: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
81
public/scss/components/ui/_ui-progressbar.scss
Normal file
81
public/scss/components/ui/_ui-progressbar.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
// Variable.scss
|
||||
.progress-bar {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.progress-bar-primary {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.progress-bar-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.progress-bar-info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
.progress-bar-danger {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.progress-bar-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.progress-bar-pink {
|
||||
background-color: $pink;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 6px;
|
||||
background-color:var(--light);
|
||||
overflow: hidden;
|
||||
&-bar{
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-vertical {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-#{$dlab-pos-right}: 2rem;
|
||||
min-height: 17rem;
|
||||
position: relative;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-#{$dlab-pos-right}: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-vertical-bottom {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-#{$dlab-pos-right}: 2rem;
|
||||
min-height: 17rem;
|
||||
position: relative;
|
||||
transform: rotate(180deg);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-#{$dlab-pos-right}: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-animated {
|
||||
animation-duration: 5s;
|
||||
animation-name: myanimation;
|
||||
transition: all 5s ease 0s;
|
||||
}
|
||||
|
||||
@keyframes myanimation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes myanimation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user