Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
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;
|
||||
}
|
||||
}
|
||||
|
||||
144
public/scss/components/ui/_ui-ribbon.scss
Normal file
144
public/scss/components/ui/_ui-ribbon.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
&__one {
|
||||
top: 0.9375rem;
|
||||
#{$dlab-pos-left}: -0.6875rem;
|
||||
min-height: 1.25rem;
|
||||
min-width: 3.25rem;
|
||||
text-align: center;
|
||||
padding: 0.1875rem 0.625rem;
|
||||
background: #3AB54B;
|
||||
color: #fff;
|
||||
font-size: 0.625rem;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 0.625rem solid #239132;
|
||||
border-#{$dlab-pos-left}: 0.6875rem solid transparent;
|
||||
#{$dlab-pos-left}: 0;
|
||||
content: "";
|
||||
bottom: -0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__two {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
display: inline-block;
|
||||
background: $warning;
|
||||
line-height: 3.125rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
color: $white;
|
||||
#{$dlab-pos-right}: 0.9375rem;
|
||||
top: 0.9375rem;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
&__three {
|
||||
#{$dlab-pos-left}: -1.875rem;
|
||||
top: 0.875rem;
|
||||
width: 6.875rem;
|
||||
height: 1.5625rem;
|
||||
background-color: $danger;
|
||||
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(-45deg);
|
||||
color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&__four {
|
||||
#{$dlab-pos-left}: 0.5rem;
|
||||
top: -0.5rem;
|
||||
width: 6.875rem;
|
||||
height: 3.125rem;
|
||||
background-color: var(--primary);
|
||||
z-index: auto;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:after {
|
||||
#{$dlab-pos-right}: -0.3125rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
#{$dlab-pos-left}: -0.3125rem;
|
||||
}
|
||||
|
||||
&:after, &:before {
|
||||
z-index: -1;
|
||||
background-color: var(--rgba-primary-1);
|
||||
top: 0.1875rem;
|
||||
transform: rotate(45deg);
|
||||
content: "";
|
||||
height: 0.625rem;
|
||||
width: 0.625rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&__five {
|
||||
#{$dlab-pos-left}: -1.875rem;
|
||||
top: 0.625rem;
|
||||
width: 6.875rem;
|
||||
height: 1.875rem;
|
||||
background-color: var(--primary);
|
||||
transform: rotate(-45deg);
|
||||
font-size: 0.75rem;
|
||||
color: $white;
|
||||
padding-bottom: 0.3125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 3.125rem 3.125rem 3.125rem;
|
||||
border-color: transparent transparent var(--primary) transparent;
|
||||
#{$dlab-pos-left}: 0.25rem;
|
||||
top: -2.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__six {
|
||||
#{$dlab-pos-left}: 0;
|
||||
top: 1.125rem;
|
||||
width: 6.875rem;
|
||||
height: 2.375rem;
|
||||
background-color: var(--primary);
|
||||
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
|
||||
display: flex;
|
||||
font-size: 1.25rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-curve {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$dlab-pos-right}: -0.375rem;
|
||||
width: 0.625rem;
|
||||
height: 0.6875rem;
|
||||
border-top: 0.6875rem solid #3AB54B;
|
||||
border-bottom: 0.625rem solid #3AB54B;
|
||||
border-#{$dlab-pos-right}: 0.3125rem solid transparent;
|
||||
}
|
||||
}
|
||||
21
public/scss/components/ui/_ui-scrollbar.scss
Normal file
21
public/scss/components/ui/_ui-scrollbar.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
.jsgrid-grid-body,
|
||||
.dataTables_scrollBody,
|
||||
.table-responsive {
|
||||
&::-webkit-scrollbar {
|
||||
background-color: #f5f5f5;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,0.3);
|
||||
border-radius: 0.625rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 0.625rem;
|
||||
-webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,.3);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
98
public/scss/components/ui/_ui-step.scss
Normal file
98
public/scss/components/ui/_ui-step.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
|
||||
|
||||
|
||||
%remain-steps {
|
||||
&:before {
|
||||
content: counter(stepNum);
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-steps {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
>li {
|
||||
counter-increment: stepNum;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: var(--primary);
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\2713';
|
||||
display: block;
|
||||
margin: 0 auto 0.25rem;
|
||||
background-color: $white;
|
||||
width: 1.5625rem;
|
||||
height: 1.5625rem;
|
||||
line-height: 1.375rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 1.5625rem;
|
||||
height: 1.5625rem;
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
border: {
|
||||
width: 0.125rem;
|
||||
style: solid;
|
||||
color: var(--primary);
|
||||
radius: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
height: 0.125rem;
|
||||
width: 100%;
|
||||
background-color: var(--primary);
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
#{$dlab-pos-left}: 50%;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
top: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
@extend %remain-steps;
|
||||
|
||||
&:before {
|
||||
background-color: $white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
~li {
|
||||
color: $body-color;
|
||||
@extend %remain-steps;
|
||||
|
||||
&:before {
|
||||
background-color: $border;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
112
public/scss/components/ui/_ui-tab.scss
Normal file
112
public/scss/components/ui/_ui-tab.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
.nav-tabs{
|
||||
--bs-nav-tabs-border-color: var(--border);
|
||||
.nav-link{
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
border-radius: $radius;
|
||||
padding: 0.75rem 1.25rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.default-tab{
|
||||
.nav-link{
|
||||
background: transparent;
|
||||
border-radius: 0rem;
|
||||
font-weight: 500;
|
||||
border-radius: $radius $radius 0 0;
|
||||
i{
|
||||
display:inline-block;
|
||||
transform:scale(1.3);
|
||||
color:var(--primary);
|
||||
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active{
|
||||
color: #495057;
|
||||
background-color: transparent;
|
||||
border-color: var(--border) var(--border) var(--card) var(--border);
|
||||
color:var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-tabs.style-1{
|
||||
border:0;
|
||||
border-radius:$radius;
|
||||
background-color:var(--light);
|
||||
padding: 4px;
|
||||
.nav-item{
|
||||
.nav-link{
|
||||
border:0;
|
||||
border-radius:$radius;
|
||||
margin: 0;
|
||||
color: var(--text-gray);
|
||||
padding: 0.5rem 1.125rem;
|
||||
font-weight: 500;
|
||||
&.active{
|
||||
background:var(--primary);
|
||||
color:$white;
|
||||
&:hover{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color:var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.custom-tab-1{
|
||||
.nav-link{
|
||||
background: transparent;
|
||||
border-radius: 0rem;
|
||||
font-weight: 500;
|
||||
border-bottom:0.1875rem solid transparent;
|
||||
border-width: 0 0rem 0.1875rem 0;
|
||||
|
||||
i{
|
||||
display:inline-block;
|
||||
transform:scale(1.5);
|
||||
color:var(--primary);
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active{
|
||||
color: #495057;
|
||||
background-color: transparent;
|
||||
border-color:var(--primary) ;
|
||||
border-radius:0;
|
||||
color: var(--primary);
|
||||
border-width: 0 0rem 0.1875rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.nav-pills{
|
||||
|
||||
&.light{
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link{
|
||||
background:var(--rgba-primary-1);
|
||||
color:var(--primary);
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
}
|
||||
.nav-link.active,
|
||||
.show > .nav-link{
|
||||
background-color:var(--primary);
|
||||
box-shadow:0 0 1.25rem 0 var(--rgba-primary-2);
|
||||
}
|
||||
}
|
||||
|
||||
286
public/scss/components/ui/_ui-timeline.scss
Normal file
286
public/scss/components/ui/_ui-timeline.scss
Normal file
@@ -0,0 +1,286 @@
|
||||
|
||||
.widget-timeline{
|
||||
|
||||
.timeline {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
&:before {
|
||||
top: 1.25rem;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 0.1875rem;
|
||||
#{$dlab-pos-left}: 0.5625rem;
|
||||
margin-#{$dlab-pos-right}: -0.0938rem;
|
||||
background: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-border;
|
||||
}
|
||||
|
||||
}
|
||||
> li {
|
||||
margin-bottom: 0.9375rem;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
> {
|
||||
.timeline-panel {
|
||||
border-radius: $radius;
|
||||
padding: 0.9375rem 1.25rem;
|
||||
position: relative;
|
||||
display:block;
|
||||
margin-#{$dlab-pos-left}: 2.5rem;
|
||||
border-width:0.0625rem;
|
||||
border-style:solid;
|
||||
span{
|
||||
font-size: 0.75rem;
|
||||
display: block;
|
||||
margin-bottom: 0.3125rem;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 0.0625rem;
|
||||
}
|
||||
p{
|
||||
font-size:0.875rem;
|
||||
}
|
||||
&:after{
|
||||
content: "";
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
background: inherit;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0rem 0rem 0.0625rem 0.0625rem;
|
||||
display: block;
|
||||
position: absolute;
|
||||
#{$dlab-pos-left}: -0.3125rem;
|
||||
transform: rotate(45deg);
|
||||
top: 0.9375rem;
|
||||
}
|
||||
}
|
||||
.timeline-badge {
|
||||
border-radius: 50%;
|
||||
height: 1.375rem;
|
||||
#{$dlab-pos-left}: 0;
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
width: 1.375rem;
|
||||
border-width: 0.125rem;
|
||||
border-style: solid;
|
||||
background:$white;
|
||||
padding:0.25rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-card;
|
||||
}
|
||||
&:after{
|
||||
content:"";
|
||||
width:0.625rem;
|
||||
height:0.625rem;
|
||||
border-radius:100%;
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-body > p {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
&.primary{
|
||||
border-color: var(--rgba-primary-1);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: var(--rgba-primary-1);
|
||||
}
|
||||
&:after{
|
||||
background-color: var(--primary);
|
||||
box-shadow:0 0.3125rem 0.625rem 0 var(--rgba-primary-2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:var(--rgba-primary-1);
|
||||
border-color:var(--rgba-primary-1);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: transparent;
|
||||
background-color: var(--rgba-primary-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
border-color:$success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $success-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $success !important;
|
||||
box-shadow:0 0.3125rem 0.625rem 0 rgba($success, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$success-light;
|
||||
border-color:$success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
border-color:$warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $warning-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $warning !important;
|
||||
box-shadow:0 0.3125rem 0.625rem 0 rgba($warning, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$warning-light;
|
||||
border-color:$warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger{
|
||||
border-color:$danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $danger-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $danger !important;
|
||||
box-shadow:0 0.3125rem 0.625rem 0 rgba($danger, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$danger-light;
|
||||
border-color:$danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.info{
|
||||
border-color:$info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $info-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $info !important;
|
||||
box-shadow:0 0.3125rem 0.625rem 0 rgba($info, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$info-light;
|
||||
border-color:$info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark{
|
||||
border-color:$dark-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $dark-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $dark !important;
|
||||
box-shadow:0 0.3125rem 0.625rem 0 rgba($dark, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$dark-light;
|
||||
border-color:$dark-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-1{
|
||||
.timeline-panel{
|
||||
background:transparent;
|
||||
}
|
||||
.timeline {
|
||||
.timeline-badge {
|
||||
&.timeline-badge{
|
||||
& + .timeline-panel{
|
||||
background: transparent !important;
|
||||
border: 0;
|
||||
border-#{$dlab-pos-left} : 0.3125rem solid;
|
||||
border-radius: 0;
|
||||
padding: 0.3125rem 0.625rem 0.3125rem 0.9375rem;
|
||||
&:after{
|
||||
border:0;
|
||||
#{$dlab-pos-left}: -0.5625rem;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.primary{
|
||||
& + .timeline-panel{
|
||||
border-color:var(--primary);
|
||||
&:after{
|
||||
background:var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
& + .timeline-panel{
|
||||
border-color:$success;
|
||||
&:after{
|
||||
background:$success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
& + .timeline-panel{
|
||||
border-color:$warning;
|
||||
&:after{
|
||||
background:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger{
|
||||
& + .timeline-panel{
|
||||
border-color:$danger;
|
||||
&:after{
|
||||
background:$danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.info{
|
||||
& + .timeline-panel{
|
||||
border-color:$info;
|
||||
&:after{
|
||||
background:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark{
|
||||
& + .timeline-panel{
|
||||
border-color:$dark;
|
||||
&:after{
|
||||
background:$dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
85
public/scss/components/ui/_ui-tooltip.scss
Normal file
85
public/scss/components/ui/_ui-tooltip.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
.tooltip{
|
||||
margin-bottom: 6px!important;
|
||||
&-wrapper{
|
||||
|
||||
button:not(:last-child){
|
||||
margin-#{$dlab-pos-right}: 0.5rem;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
background: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
button{
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inner{
|
||||
border-radius: 0;
|
||||
background: #333333;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 300;
|
||||
padding: 0.35rem 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before{
|
||||
// border-width: 0 0.6rem 0.6rem;
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before{
|
||||
border-right-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before{
|
||||
border-left-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before{
|
||||
border-top-color: #333333;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
background-color:var(--rgba-primary-1);
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
color: var(--primary);
|
||||
font-weight:400;
|
||||
width:auto;
|
||||
border-radius:$radius;
|
||||
&:before{
|
||||
background-color:$white!important;
|
||||
}
|
||||
|
||||
}
|
||||
.tooltip .arrow{
|
||||
border-top-color: #008ec3!important;
|
||||
background-color:$white!important;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-top .tooltip-arrow::before {
|
||||
border-top-color:var(--primary); /* Set arrow color to red */
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
|
||||
border-bottom-color: var(--primary); /* Set arrow color to red */
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-start .tooltip-arrow::before {
|
||||
border-left-color:var(--primary); /* Set arrow color to red */
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-end .tooltip-arrow::before {
|
||||
border-right-color:var(--primary); /* Set arrow color to red */
|
||||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
|
||||
}
|
||||
Reference in New Issue
Block a user