itcn/backend_parkir
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Penambahan FrontEnd All-New-Manufacture

Browse Source
This commit is contained in:
pand03
2026-01-31 14:23:04 +07:00
parent 1b2e320b2b
commit 4feb21dcbc
2891 changed files with 426849 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/scss/components/forms/_form-addons-cropper.scss Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1,3 @@

3
public/scss/components/forms/_form-editor-quill.scss Normal file
View File

@@ -0,0 +1,3 @@
.ql-container{
height: 25rem;
}

321
public/scss/components/forms/_form-pickers.scss Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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";