first commit
This commit is contained in:
46
public/style/scss/components/forms/_form-addons-cropper.scss
Normal file
46
public/style/scss/components/forms/_form-addons-cropper.scss
Normal file
@ -0,0 +1,46 @@
|
||||
#image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.docs-options {
|
||||
.dropdown-menu {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-preview {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.img-preview {
|
||||
float: left;
|
||||
margin-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-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
public/style/scss/components/forms/_form-addons-select2.scss
Normal file
100
public/style/scss/components/forms/_form-addons-select2.scss
Normal file
@ -0,0 +1,100 @@
|
||||
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
border-radius: $radius;
|
||||
border: 1px solid $light;
|
||||
height: 40px;
|
||||
background: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
|
||||
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 40px;
|
||||
color:$body-color;
|
||||
padding-left: 15px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.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: $primary;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||
border-color: $border;
|
||||
background: $white;
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
top: 6px;
|
||||
right: 15px;
|
||||
}
|
||||
.select2-container .select2-selection--multiple{
|
||||
min-height: 40px;
|
||||
color:$body-color;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.select2-search--dropdown .select2-search__field{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$dark-card;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.select2-dropdown{
|
||||
border-color: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.swal2-popup .swal2-content{
|
||||
color:$body-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
223
public/style/scss/components/forms/_form-basic.scss
Normal file
223
public/style/scss/components/forms/_form-basic.scss
Normal file
@ -0,0 +1,223 @@
|
||||
|
||||
// Basic Input
|
||||
|
||||
.form-control{
|
||||
border-radius: $radius;
|
||||
background: $white;
|
||||
border: 1px solid $border;
|
||||
// height: 45px;
|
||||
color: $dark;
|
||||
height: 56px;
|
||||
@include respond('laptop') {
|
||||
height: 41px;
|
||||
}
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
background: $white;
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-rounded {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
|
||||
// Input Color
|
||||
[data-theme-version="light"],
|
||||
[data-theme-version="dark"] {
|
||||
.input-primary{
|
||||
.form-control{
|
||||
border-color:$primary;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$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:$primary;
|
||||
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$primary;
|
||||
color:$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input Size/
|
||||
// .form-control{
|
||||
// min-height: 40px;
|
||||
// }
|
||||
// .form-control-sm{
|
||||
// min-height: 36px;
|
||||
// }
|
||||
// .form-control-lg{
|
||||
// min-height: 52px;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// Input Group
|
||||
.input-group-text{
|
||||
background: #d7dae3;
|
||||
border: 1px solid transparent;
|
||||
min-width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.532rem 0.75rem;
|
||||
border-radius: $radius;
|
||||
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.custom-file-label{
|
||||
height: 40px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-group-prepend .btn,
|
||||
.input-group-append .btn {
|
||||
z-index: 0;
|
||||
}
|
||||
.custom-select{
|
||||
background: none;
|
||||
// height: 45px;
|
||||
border-color: $border;
|
||||
color: $dark;
|
||||
// border-radius: 0px!important;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
border-color: $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.custom-file-label{
|
||||
// height: 45px;
|
||||
// border-radius: 0px!important;
|
||||
|
||||
&:after{
|
||||
background: #656C73;
|
||||
border: 1px solid $border;
|
||||
color: $white;
|
||||
border-radius: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-border;
|
||||
border-color: $d-border;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom_file_input {
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
// height: 45px;
|
||||
}
|
||||
|
||||
.custom-file-label::after {
|
||||
height: 100%;
|
||||
// line-height: 2.4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.custom-file-label{
|
||||
background: $white;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
266
public/style/scss/components/forms/_form-checkbox.scss
Normal file
266
public/style/scss/components/forms/_form-checkbox.scss
Normal file
@ -0,0 +1,266 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
input[type="checkbox"] {
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0px;
|
||||
margin-left: -1px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background: #d4d7da;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&:checked:after{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
content: "\f00c";
|
||||
font-family: 'FontAwesome';
|
||||
color: $white;
|
||||
font-weight: 100;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
.form-check-label{
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
|
||||
.form-check-inline {
|
||||
.form-check-input {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
.custom-control-label{
|
||||
&:before,
|
||||
&:after{
|
||||
top:2px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.rtl .custom-control-label{
|
||||
&:before,
|
||||
&:after{
|
||||
right: -1.5rem !important;
|
||||
left: inherit;
|
||||
}
|
||||
}
|
||||
.custom-control {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
color: #fff;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
// CheckBox
|
||||
.custom-control-input:focus ~ .custom-control-label::before{
|
||||
box-shadow:none !important;
|
||||
}
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: #BEBEBE;
|
||||
border-width: 2px;
|
||||
border-radius: 5px !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.check-xs{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.check-lg{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.check-xl{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
.checkbox{
|
||||
&-info{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
&-danger {
|
||||
.custom-control-label::before{
|
||||
background-color:transparent;
|
||||
border-color: $danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
&-success{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
}
|
||||
&-secondary{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $secondary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Toggle Switch
|
||||
.toggle-switch{
|
||||
padding-left:50px;
|
||||
line-height: 1.25;
|
||||
.custom-control-label{
|
||||
|
||||
font-weight: 500;
|
||||
&:after{
|
||||
width: 24px;
|
||||
background:#959595;
|
||||
height: 24px;
|
||||
border-radius: 24px;
|
||||
top: -2px;
|
||||
left: -50px;
|
||||
@include transitionMedium;
|
||||
}
|
||||
&:before{
|
||||
border: 0;
|
||||
background: #D8D8D8;
|
||||
width: 40px;
|
||||
border-radius: 20px !important;
|
||||
height: 16px;
|
||||
left: -50px;
|
||||
@include transitionMedium
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label{
|
||||
&:after{
|
||||
left: -43px;
|
||||
background:$primary;
|
||||
}
|
||||
&:before{
|
||||
background: $primary-light;
|
||||
}
|
||||
}
|
||||
&.text-right{
|
||||
padding-left:0;
|
||||
padding-right:50px;
|
||||
.custom-control-label{
|
||||
&:after{
|
||||
left: auto;
|
||||
right: -30px;
|
||||
}
|
||||
&:before{
|
||||
left: auto;
|
||||
right: -50px;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label{
|
||||
&:after{
|
||||
left: auto;
|
||||
right: -43px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Check Switch
|
||||
.check-switch{
|
||||
padding-left: 40px;
|
||||
.custom-control-label{
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
&:after,&:before{
|
||||
height:1.5rem;
|
||||
width:1.5rem;
|
||||
left: -2rem;
|
||||
border-radius: 3rem!important;
|
||||
border-color:rgba($primary,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3
public/style/scss/components/forms/_form-dropzone.scss
Normal file
3
public/style/scss/components/forms/_form-dropzone.scss
Normal file
@ -0,0 +1,3 @@
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.ql-container{
|
||||
height: 25rem;
|
||||
}
|
||||
134
public/style/scss/components/forms/_form-pickers.scss
Normal file
134
public/style/scss/components/forms/_form-pickers.scss
Normal file
@ -0,0 +1,134 @@
|
||||
|
||||
|
||||
.asColorPicker-dropdown {
|
||||
max-width: 26rem;
|
||||
}
|
||||
|
||||
.asColorPicker-trigger {
|
||||
border : 0 none;
|
||||
height : 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top : 0;
|
||||
width : 2.1875rem;
|
||||
}
|
||||
[direction="rtl"] .asColorPicker-trigger{
|
||||
right: 99%;
|
||||
left: auto;
|
||||
}
|
||||
.asColorPicker-clear {
|
||||
display : none;
|
||||
position : absolute;
|
||||
right : 1rem;
|
||||
text-decoration: none;
|
||||
top : .5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.daterangepicker {
|
||||
td.active {
|
||||
background-color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
button.applyBtn {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
|
||||
&.datepicker-dropdown {
|
||||
background: $l-bg;
|
||||
border-radius: 1px;
|
||||
border: 1px solid $gallery;
|
||||
|
||||
td.day, th.next, th.prev {
|
||||
height: 30px;
|
||||
width: 30px !important;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
border-radius: 50px;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
th.datepicker-switch, th.next, th.prev {
|
||||
font-weight: 300;
|
||||
color: $heading;
|
||||
}
|
||||
|
||||
th.dow {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
table {
|
||||
|
||||
|
||||
|
||||
tr td.selected, tr td.active.active {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
td.today {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
td.today.disabled {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px 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: 1px solid $d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-wrap{
|
||||
.form-control{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
574
public/style/scss/components/forms/_form-steps.scss
Normal file
574
public/style/scss/components/forms/_form-steps.scss
Normal file
@ -0,0 +1,574 @@
|
||||
@import "../../abstracts/variable";
|
||||
@import "../../abstracts/mixin";
|
||||
|
||||
|
||||
/* .wizard > .content > .body input.error {
|
||||
position: absolute;
|
||||
top: 100% !important;
|
||||
}
|
||||
|
||||
.wizard {
|
||||
position: relative;
|
||||
|
||||
&>.steps {
|
||||
width: 100%;
|
||||
// padding-left: 3%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media(min-width: 1200px){
|
||||
width: 100%;
|
||||
// margin-left: 3%;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
&.current {
|
||||
a {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &.done {
|
||||
a {
|
||||
background-color: $white;
|
||||
color: $heading;
|
||||
|
||||
&:hover {
|
||||
margin: 0;
|
||||
background-color: $white;
|
||||
border-radius: 0;
|
||||
color: $heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $white;
|
||||
|
||||
&:hover {
|
||||
margin: 0;
|
||||
background-color: $white;
|
||||
border-radius: 0;
|
||||
color: $heading;
|
||||
}
|
||||
|
||||
@include respond(phone-land) {
|
||||
padding: 1em 4px;
|
||||
}
|
||||
|
||||
.number {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 32rem;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
min-height: 41rem;
|
||||
}
|
||||
|
||||
& > .body {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// background-color: $l-bg;
|
||||
border: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
input.error {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label.error {
|
||||
margin-top: 5px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 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: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skip-email {
|
||||
margin-top: 6rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&>.actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 2rem;
|
||||
|
||||
li:not(.disabled) {
|
||||
a {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard .actions ul li{
|
||||
&.disabled a{
|
||||
color: #333333 !important;
|
||||
background: #F7FAFC !important;
|
||||
border: 1px solid #EEEEEE;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg !important;
|
||||
border-color: $d-border;
|
||||
color:$white !important;
|
||||
}
|
||||
}
|
||||
|
||||
& a{
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0.55em 2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{
|
||||
padding: 0.55em 2em;
|
||||
}
|
||||
|
||||
// .wizard > .steps > ul > li{
|
||||
|
||||
// @media(max-width: 680px){
|
||||
// width: 100%;
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .wizard > .steps{
|
||||
|
||||
// @media(max-width: 680px){
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.wizard > .content{
|
||||
background: transparent;
|
||||
// box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wizard, .tabcontrol{
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.step-form-horizontal {
|
||||
.wizard {
|
||||
padding-top: 3.5rem;
|
||||
|
||||
.steps {
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&.done {
|
||||
a {
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
color: $body-color;
|
||||
}
|
||||
&:hover {
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
border-color: transparent;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current a, &.disabled a {
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.current a {
|
||||
.number {
|
||||
color: $primary;
|
||||
background: $white;
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled a {
|
||||
.number {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 0.75rem;
|
||||
padding-top: 0.9375rem;
|
||||
}
|
||||
|
||||
.number {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
border: 3px solid #d7dae3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 3rem;
|
||||
border-radius: 50px;
|
||||
width: 3rem;
|
||||
|
||||
// @include respond(phone) {
|
||||
// width: 4rem;
|
||||
// height: 4rem;
|
||||
// }
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
@include respond('phone') {
|
||||
top: -45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0.375rem;
|
||||
content: "";
|
||||
left: 50%;
|
||||
top: -2.1rem;
|
||||
background-color: $primary;
|
||||
z-index: -1;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
height: 0.375rem;
|
||||
top: -1.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
&::after {
|
||||
background-color: #F3F3F3;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&~li {
|
||||
&::after {
|
||||
background-color: #F3F3F3;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// form-wizard
|
||||
.form-wizard{
|
||||
border: 0;
|
||||
.nav-wizard{
|
||||
box-shadow: none!important;
|
||||
margin-bottom: 2rem;
|
||||
li{
|
||||
.nav-link{
|
||||
position: relative;
|
||||
span{
|
||||
border-radius: 50px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 2px solid $primary;
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
color: $primary;
|
||||
font-size: 18px;
|
||||
margin: auto;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&:after{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 3px;
|
||||
transform: translateY(-50%);
|
||||
background: $dark-light!important;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.active{
|
||||
&:after{
|
||||
background: $dark-light!important;
|
||||
}
|
||||
}
|
||||
&.done{
|
||||
&:after{
|
||||
background: $primary!important;
|
||||
}
|
||||
span{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.nav-link{
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-bottom{
|
||||
.btn{
|
||||
background-color: $primary;
|
||||
border: 0;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
}
|
||||
.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: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
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: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
public/style/scss/components/forms/_form-summernote.scss
Normal file
30
public/style/scss/components/forms/_form-summernote.scss
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
|
||||
.note-icon-caret,
|
||||
.note-popover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.note-editor.note-frame .panel-heading {
|
||||
padding : .6rem 1rem 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.note-editor.note-frame {
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-editing-area .note-editable {
|
||||
background-color: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
102
public/style/scss/components/forms/_form-switch.scss
Normal file
102
public/style/scss/components/forms/_form-switch.scss
Normal file
@ -0,0 +1,102 @@
|
||||
.js-switch {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 50px;
|
||||
margin-right: 4rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&>small {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.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: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-square {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 0;
|
||||
|
||||
&>small {
|
||||
border-radius: 0;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.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: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
18
public/style/scss/components/forms/_form-touchspin.scss
Normal file
18
public/style/scss/components/forms/_form-touchspin.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.bootstrap-touchspin .input-group-btn-vertical>.btn {
|
||||
height: 51%;
|
||||
|
||||
&.bootstrap-touchspin-up {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-touchspin {
|
||||
button.btn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
67
public/style/scss/components/forms/_form-validation.scss
Normal file
67
public/style/scss/components/forms/_form-validation.scss
Normal file
@ -0,0 +1,67 @@
|
||||
/////////////////////////////
|
||||
// Bootstrap validation
|
||||
/////////////////////////////
|
||||
.form-control.is-valid {
|
||||
border-color: $success !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-warning {
|
||||
border-color: $warning !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: $danger !important;
|
||||
border-right: 0px !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: lighten($primary, 15%)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show Pass
|
||||
.show-pass{
|
||||
cursor:pointer;
|
||||
|
||||
.fa-eye{
|
||||
display:none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
.fa-eye-slash{
|
||||
display:none;
|
||||
}
|
||||
.fa-eye{
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/style/scss/components/forms/_forms.scss
Normal file
13
public/style/scss/components/forms/_forms.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "./form-basic";
|
||||
@import "./form-checkbox";
|
||||
@import "./form-radio-button";
|
||||
@import "./form-switch";
|
||||
@import "./form-validation";
|
||||
@import "./form-pickers";
|
||||
@import "./form-addons-cropper";
|
||||
@import "./form-addons-select2";
|
||||
@import "./form-steps";
|
||||
@import "./form-dropzone";
|
||||
@import "./form-summernote";
|
||||
@import "./form-editor-quill";
|
||||
|
||||
Reference in New Issue
Block a user