Added scss
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,209 @@
|
||||
// NOTE: This file contains Accordion SCSS.
|
||||
|
||||
.accordion {
|
||||
.acd-group {
|
||||
.card-header {
|
||||
padding: 0rem;
|
||||
.acd-heading {
|
||||
font-weight: $font-medium;
|
||||
font-size: $font-base;
|
||||
position: relative;
|
||||
color: $dark-gray;
|
||||
line-height: normal;
|
||||
padding: 1.25rem;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
margin-bottom: 0px;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
text-transform: capitalize;
|
||||
padding-right: 30px;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&:before {
|
||||
font-family: "themify-icons";
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
display: block;
|
||||
font-size: $font-base;
|
||||
content:'\e622';
|
||||
padding:1.4rem;
|
||||
}
|
||||
&.collapsed {
|
||||
&:before {
|
||||
font-family: "themify-icons";
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
display: block;
|
||||
font-size: $font-base;
|
||||
content:'\e61a';
|
||||
padding:1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.acd-des {
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
}
|
||||
.acd-active {
|
||||
.acd-heading {
|
||||
color: $primary;
|
||||
|
||||
&:before {
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*plus-icon*/
|
||||
.accordion.plus-icon {
|
||||
|
||||
.acd-group.acd-active {
|
||||
|
||||
.acd-heading {
|
||||
|
||||
&:before {
|
||||
content: "\f068";
|
||||
font-size: $font-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
.acd-group {
|
||||
.acd-heading {
|
||||
|
||||
&:before {
|
||||
content: "\f067";
|
||||
font-size: $font-md;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*plus-icon.round*/
|
||||
.accordion.plus-icon.round {
|
||||
.acd-group.acd-active {
|
||||
.acd-heading {
|
||||
&:before {
|
||||
content: "\f056";
|
||||
font-size: $font-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.acd-group {
|
||||
.acd-heading{
|
||||
&:before {
|
||||
content: "\f055";
|
||||
font-size: $font-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*gray*/
|
||||
.accordion.gray {
|
||||
.acd-heading {
|
||||
background-color: $light-gray;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 24px;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
.acd-des {
|
||||
padding: 0 30px 20px;
|
||||
}
|
||||
|
||||
.acd-group.acd-active {
|
||||
.acd-heading {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*shadow*/
|
||||
.accordion.shadow {
|
||||
.acd-heading {
|
||||
background: $white;
|
||||
@include box-shadow(0px, 5px, 10px, rgba(0, 0, 0, 0.1));
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.acd-des {
|
||||
padding: 0 30px 20px;
|
||||
}
|
||||
|
||||
.acd-group.acd-active {
|
||||
.acd-heading {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.acd-group {
|
||||
.acd-heading {
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*border*/
|
||||
.accordion.accordion-border {
|
||||
.acd-heading {
|
||||
background: transparent;
|
||||
border:1px solid $light-gray;
|
||||
box-shadow: none;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
.acd-des {
|
||||
padding: 0 30px 20px;
|
||||
}
|
||||
|
||||
.acd-group.acd-active {
|
||||
.acd-heading {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.acd-group {
|
||||
.acd-heading {
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*no-radius*/
|
||||
.accordion.no-radius {
|
||||
.acd-heading {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.card .card-header.border-radius-10 {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
.alert {
|
||||
padding:1rem 3rem 1rem 1rem;
|
||||
margin:0;
|
||||
&.alert-primary {
|
||||
background-color:$primary2;
|
||||
border-color:$primary2;
|
||||
color:$white;
|
||||
}
|
||||
&.alert-secondary {
|
||||
background-color:$secondary;
|
||||
border-color:$secondary;
|
||||
color:$white;
|
||||
}
|
||||
&.alert-info {
|
||||
background-color:$info;
|
||||
border-color:$info;
|
||||
color:$white;
|
||||
}
|
||||
&.alert-warning {
|
||||
background-color:$warning;
|
||||
border-color:$warning;
|
||||
color:$white;
|
||||
}
|
||||
&.alert-danger {
|
||||
background-color:$danger;
|
||||
border-color:$danger;
|
||||
color:$white;
|
||||
}
|
||||
&.alert-success {
|
||||
background-color:$success;
|
||||
border-color:$success;
|
||||
color:$white;
|
||||
}
|
||||
&.alert-light {
|
||||
background-color:$light-gray;
|
||||
border-color:$light-gray;
|
||||
color:$dark-gray;
|
||||
}
|
||||
&.alert-dark {
|
||||
background-color:$dark-gray;
|
||||
border-color:$dark-gray;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
&.alert-outline {
|
||||
background-color:transparent;
|
||||
&-primary {
|
||||
border-color:$primary2;
|
||||
color:$primary2;
|
||||
}
|
||||
&-secondary {
|
||||
border-color:$secondary;
|
||||
color:$secondary;
|
||||
}
|
||||
&-info {
|
||||
border-color:$info;
|
||||
color:$info;
|
||||
}
|
||||
&-warning {
|
||||
border-color:$warning;
|
||||
color:$warning;
|
||||
}
|
||||
&-danger {
|
||||
border-color:$danger;
|
||||
color:$danger;
|
||||
}
|
||||
&-success {
|
||||
border-color:$success;
|
||||
color:$success;
|
||||
}
|
||||
&-light {
|
||||
border-color:darken($light-gray, 20%);
|
||||
color:darken($light-gray, 20%);
|
||||
}
|
||||
&-dark {
|
||||
border-color:$dark-gray;
|
||||
color:$dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
&.alert-inverse {
|
||||
border-color:transparent;
|
||||
|
||||
&-primary {
|
||||
@include hex-rgba($primary2, 0.3);
|
||||
color:$primary2;
|
||||
}
|
||||
&-secondary {
|
||||
@include hex-rgba($secondary, 0.3);
|
||||
color:$secondary;
|
||||
}
|
||||
&-info {
|
||||
@include hex-rgba($info, 0.3);
|
||||
color:$info;
|
||||
}
|
||||
&-warning {
|
||||
@include hex-rgba($warning, 0.3);
|
||||
color:$warning;
|
||||
}
|
||||
&-danger {
|
||||
@include hex-rgba($danger, 0.3);
|
||||
color:$danger;
|
||||
}
|
||||
&-success {
|
||||
@include hex-rgba($success, 0.3);
|
||||
color:$success;
|
||||
}
|
||||
&-light {
|
||||
@include hex-rgba($light-gray, 0.7);
|
||||
color:$dark-gray;
|
||||
}
|
||||
&-dark {
|
||||
@include hex-rgba($dark-gray, 0.3);
|
||||
color:$dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
&.alert-icon {
|
||||
i {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
&.alert-dismissible {
|
||||
.close {
|
||||
opacity:1;
|
||||
text-shadow:none;
|
||||
font-size: 1rem;
|
||||
padding: 1.25rem;
|
||||
height: 100%;
|
||||
@include transition(all, 0.3s, ease-in-out);
|
||||
&:not(:disabled):not(.disabled):hover {
|
||||
color:$white;
|
||||
}
|
||||
&:not(:disabled):not(.disabled):focus {
|
||||
color:$white;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
.badge {
|
||||
padding: .4em .8em;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
&-primary {
|
||||
background-color:$primary;
|
||||
color:$white;
|
||||
&[href]:hover {
|
||||
background-color:$primary;
|
||||
color:$white;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$primary;
|
||||
color:$white;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($primary, 0.10);
|
||||
color:$primary;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background-color:$secondary;
|
||||
color:$white;
|
||||
&[href]:hover {
|
||||
background-color:$secondary;
|
||||
color:$white;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$secondary;
|
||||
color:$white;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($secondary, 0.10);
|
||||
color:$secondary;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
background-color:$info;
|
||||
color:$white;
|
||||
&[href]:hover {
|
||||
background-color:$info;
|
||||
color:$white;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$info;
|
||||
color:$white;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($info, 0.10);
|
||||
color:$info;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-warning {
|
||||
background-color:$warning;
|
||||
color:$white;
|
||||
&[href]:hover {
|
||||
background-color:$warning;
|
||||
color:$white;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$warning;
|
||||
color:$white;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($warning, 0.10);
|
||||
color:$warning;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-danger {
|
||||
background-color:$danger;
|
||||
color:$white;
|
||||
&[href]:hover {
|
||||
background-color:$danger;
|
||||
color:$white;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$danger;
|
||||
color:$white;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($danger, 0.10);
|
||||
color:$danger;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-light {
|
||||
background-color:$light-gray;
|
||||
color:$dark-gray;
|
||||
&[href]:hover {
|
||||
background-color:$light-gray;
|
||||
color:$dark-gray;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$light-gray;
|
||||
color:$dark-gray;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($light-gray, 0.60);
|
||||
color:$dark-gray;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-dark {
|
||||
background-color:$dark-gray;
|
||||
color:$white;
|
||||
&[href]:hover {
|
||||
background-color:$dark-gray;
|
||||
color:$white;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$dark-gray;
|
||||
color:$white;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($dark-gray, 0.10);
|
||||
color:$dark-gray;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-success {
|
||||
background-color:$success;
|
||||
color:$white;
|
||||
&[href]:hover {
|
||||
background-color:$success;
|
||||
color:$white;
|
||||
}
|
||||
&[href]:focus {
|
||||
background-color:$success;
|
||||
color:$white;
|
||||
}
|
||||
&-inverse {
|
||||
@include hex-rgba($success, 0.10);
|
||||
color:$success;
|
||||
|
||||
&:hover, &:focus {
|
||||
color:$success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,45 @@
|
||||
.card {
|
||||
background:$white;
|
||||
border:none;
|
||||
margin-bottom:30px;
|
||||
@include box-shadow(0px, 0px, 20px, rgba(115, 105, 215, 0.15));
|
||||
border-radius: 0rem;
|
||||
padding:0;
|
||||
.card-header {
|
||||
background:none;
|
||||
padding: 1.25rem;
|
||||
border-radius:0;
|
||||
border-color: #ebedf2;
|
||||
.card-title {
|
||||
text-transform:capitalize;
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
&-primary {
|
||||
border:1px solid $primary;
|
||||
}
|
||||
&-secondary {
|
||||
border:1px solid $secondary;
|
||||
}
|
||||
&-success {
|
||||
border:1px solid $success;
|
||||
}
|
||||
&-danger {
|
||||
border:1px solid $danger;
|
||||
}
|
||||
&-warning {
|
||||
border:1px solid $warning;
|
||||
}
|
||||
&-dark {
|
||||
border:1px solid $dark;
|
||||
}
|
||||
&-light {
|
||||
border:1px solid $border-color;
|
||||
}
|
||||
&-info {
|
||||
border:1px solid $info;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.grid-sistema{
|
||||
.row {
|
||||
div{
|
||||
padding: 1rem 1.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.mfp-bg {
|
||||
z-index: 1052;
|
||||
}
|
||||
.mfp-wrap {
|
||||
z-index: 1052;
|
||||
}
|
||||
.mfp-no-margins{
|
||||
img.mfp-img {
|
||||
padding: 0;
|
||||
}
|
||||
.mfp-figure{
|
||||
&:after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.mfp-container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-arrow{
|
||||
&:hover, &:focus {
|
||||
outline:0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.list-group-contant {
|
||||
.list-group-item{
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:hover {
|
||||
background-color:lighten($light-gray, 2%);
|
||||
}
|
||||
&.active {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
.list-group-1{
|
||||
.list-group-item{
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-group-item{
|
||||
&-primary{
|
||||
background: $primary;
|
||||
}
|
||||
&-secondary{
|
||||
background: $secondary;
|
||||
}
|
||||
&-success{
|
||||
background: $success;
|
||||
}
|
||||
&-danger{
|
||||
background: $danger;
|
||||
}
|
||||
&-warning{
|
||||
background: $warning;
|
||||
}
|
||||
&-info{
|
||||
background: $info;
|
||||
}
|
||||
&-light{
|
||||
background: $light;
|
||||
}
|
||||
&-dark{
|
||||
background: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
@media (max-width: 479px) and (min-width: 320px){
|
||||
.media-contant .media {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
.modal-backdrop {
|
||||
z-index: 1051;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&.active {
|
||||
color:$primary;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
&.active {
|
||||
color:$primary;
|
||||
}
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-pills{
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&.active{
|
||||
color: $white;
|
||||
background-color:$primary;
|
||||
}
|
||||
&.disabled {
|
||||
color:$muted;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
margin-right:3px;
|
||||
&.active{
|
||||
color: $white;
|
||||
background-color:$primary;
|
||||
}
|
||||
&.disabled {
|
||||
color:$muted;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
.show{
|
||||
> .nav-link {
|
||||
color: $white;
|
||||
background-color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.nestable-contant {
|
||||
.dd-handle{
|
||||
background: transparent;
|
||||
border-color:$border-color;
|
||||
height:40px;
|
||||
padding: 10px 10px;
|
||||
&:hover, &:focus{
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
.dd3-content {
|
||||
height: 40px;
|
||||
padding: 10px 10px 10px 40px;
|
||||
&:hover {
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
#nestable2{
|
||||
.dd-handle{
|
||||
background: $primary;
|
||||
border: 1px solid $primary;
|
||||
color:$white;
|
||||
}
|
||||
.dd-item{
|
||||
> button{
|
||||
&:before {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dd-item{
|
||||
> button{
|
||||
&:before {
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dd3-handle{
|
||||
font-size: 0;
|
||||
&:before {
|
||||
top:8px;
|
||||
}
|
||||
}
|
||||
.dd {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.page-link{
|
||||
color: $primary;
|
||||
&:hover, &:focus{
|
||||
box-shadow:none;
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item.active{
|
||||
.page-link{
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
/* Progress Bar */
|
||||
.progress-bar {
|
||||
background-color:$primary;
|
||||
}
|
||||
|
||||
|
||||
.progressbar-contant{
|
||||
.progress{
|
||||
height:20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.swal2-actions {
|
||||
.swal2 {
|
||||
&-confirm {
|
||||
background-color:$success !important;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.swal2-popup {
|
||||
.swal2-close {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,375 @@
|
||||
/*switch*/
|
||||
.checkbox.checbox-switch {
|
||||
padding-left: 0;
|
||||
label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
input{
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
width: 55px;
|
||||
border-radius: 20px;
|
||||
height: 28px;
|
||||
border: 1px solid #eeeeee;
|
||||
background-color: $white;
|
||||
border-color: #eeeeee;
|
||||
box-shadow: #dfdfdf 0px 0px 0px 0px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
&::before{
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: $white;
|
||||
content: " ";
|
||||
top: 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
@include transition;
|
||||
@include box-shadow(0, 1px, 4px, rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
}
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #b4b6b7;
|
||||
border-color: #b4b6b7;
|
||||
box-shadow: #b4b6b7 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
&:before{
|
||||
left: 26px;
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
+ span{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
box-shadow: $secondary 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
> input:disabled {
|
||||
+ span {
|
||||
background-color: #e8ebee;
|
||||
border-color: $white;
|
||||
&:before{
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f3f3f3;
|
||||
@include box-shadow(0, 1px, 4px, rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-light{
|
||||
label{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f8f9fa;
|
||||
box-shadow: #f8f9fa 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-dark{
|
||||
label{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
box-shadow: #343a40 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled{
|
||||
+ span{
|
||||
background-color: #646668;
|
||||
border-color: #646668;
|
||||
box-shadow: #646668 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-success{
|
||||
label{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
box-shadow: #28a745 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #99d9a8;
|
||||
border-color: #99d9a8;
|
||||
box-shadow: #99d9a8 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-danger{
|
||||
label{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #c82333;
|
||||
border-color: #c82333;
|
||||
box-shadow: #c82333 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #d87781;
|
||||
border-color: #d87781;
|
||||
box-shadow: #d87781 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-primary{
|
||||
label{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #0069d9;
|
||||
border-color: #0069d9;
|
||||
box-shadow: #0069d9 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #6da3dd;
|
||||
border-color: #6da3dd;
|
||||
box-shadow: #6da3dd 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-info{
|
||||
label{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #17a2b8;
|
||||
border-color: #17a2b8;
|
||||
box-shadow: #17a2b8 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #66c0ce;
|
||||
border-color: #66c0ce;
|
||||
box-shadow: #66c0ce 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-warning{
|
||||
label{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107;
|
||||
box-shadow: #ffc107 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #e2c366;
|
||||
border-color: #e2c366;
|
||||
box-shadow: #e2c366 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************ checkbox inline *********/
|
||||
|
||||
.checkbox-inline.checbox-switch {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
input{
|
||||
display: none;
|
||||
}
|
||||
span {
|
||||
width: 55px;
|
||||
border-radius: 20px;
|
||||
height: 28px;
|
||||
border: 1px solid #eeeeee;
|
||||
background-color: $white;
|
||||
border-color: #eeeeee;
|
||||
box-shadow: #dfdfdf 0px 0px 0px 0px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
&::before{
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: $white;
|
||||
content: " ";
|
||||
top: 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
@include transition;
|
||||
@include box-shadow(0, 1px, 4px, rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
}
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #b4b6b7;
|
||||
border-color: #b4b6b7;
|
||||
box-shadow: #b4b6b7 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
&:before{
|
||||
left: 26px;
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
+ span{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
box-shadow: $secondary 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
> input:disabled {
|
||||
+ span {
|
||||
background-color: #e8ebee;
|
||||
border-color: $white;
|
||||
&:before{
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f3f3f3;
|
||||
@include box-shadow(0, 1px, 4px, rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-light{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f8f9fa;
|
||||
box-shadow: #f8f9fa 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-dark{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
box-shadow: #343a40 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled{
|
||||
+ span{
|
||||
background-color: #646668;
|
||||
border-color: #646668;
|
||||
box-shadow: #646668 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-success{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
box-shadow: #28a745 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #99d9a8;
|
||||
border-color: #99d9a8;
|
||||
box-shadow: #99d9a8 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-danger{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #c82333;
|
||||
border-color: #c82333;
|
||||
box-shadow: #c82333 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #d87781;
|
||||
border-color: #d87781;
|
||||
box-shadow: #d87781 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-primary{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #0069d9;
|
||||
border-color: #0069d9;
|
||||
box-shadow: #0069d9 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #6da3dd;
|
||||
border-color: #6da3dd;
|
||||
box-shadow: #6da3dd 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-info{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #17a2b8;
|
||||
border-color: #17a2b8;
|
||||
box-shadow: #17a2b8 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #66c0ce;
|
||||
border-color: #66c0ce;
|
||||
box-shadow: #66c0ce 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.switch-warning{
|
||||
> input:checked{
|
||||
+ span{
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107;
|
||||
box-shadow: #ffc107 0px 0px 0px 8px inset;
|
||||
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
|
||||
}
|
||||
&:disabled {
|
||||
+ span{
|
||||
background-color: #e2c366;
|
||||
border-color: #e2c366;
|
||||
box-shadow: #e2c366 0px 0px 0px 8px inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
.tab{
|
||||
.nav.nav-tabs{
|
||||
border-bottom:0;
|
||||
@include mobile-portrait-sm {
|
||||
display: block;
|
||||
}
|
||||
@include mobile-portrait-xs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
|
||||
@include mobile-portrait-sm {
|
||||
display: block;
|
||||
}
|
||||
@include mobile-portrait-xs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
border: none;
|
||||
line-height: normal;
|
||||
border-radius: 0px;
|
||||
padding: 12px 30px;
|
||||
background: #f6f7f8;
|
||||
color: #323232;
|
||||
border: 1px solid #eeeeee;
|
||||
&.active {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
&:focus, &:hover {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*nav-border*/
|
||||
.nav-border{
|
||||
.nav.nav-tabs{
|
||||
li{
|
||||
a {
|
||||
margin-right: 0;
|
||||
border: 1px solid #eeeeee;
|
||||
background: transparent;
|
||||
&.active {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
&:hover, &:focus {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*tab-border*/
|
||||
.tab-border {
|
||||
.nav.nav-tabs {
|
||||
margin-bottom: 0;
|
||||
li{
|
||||
a{
|
||||
&.active{
|
||||
color: $primary;
|
||||
background: $white !important;
|
||||
border-color: #eeeeee;
|
||||
border-bottom: 1px solid $white;
|
||||
&:hover, &:focus {
|
||||
color: $primary;
|
||||
background: $white !important;
|
||||
border-color: #eeeeee;
|
||||
border-bottom: 1px solid $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
padding: 20px;
|
||||
border: 1px solid #eeeeee;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
/*nav-center*/
|
||||
.nav-center{
|
||||
.nav.nav-tabs {
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.nav-right {
|
||||
.nav.nav-tabs {
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
.tab-content {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/*round*/
|
||||
.round{
|
||||
.nav.nav-tabs{
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
a {
|
||||
border: none;
|
||||
line-height: normal;
|
||||
margin-right: 10px;
|
||||
border-radius: 90px;
|
||||
padding: 12px 30px;
|
||||
background: #f6f7f8;
|
||||
color: #323232; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*round*/
|
||||
.shadow{
|
||||
.nav.nav-tabs{
|
||||
li{
|
||||
a{
|
||||
&.active {
|
||||
color: $primary;
|
||||
background: #ffffff !important;
|
||||
border-color: #eeeeee;
|
||||
border-bottom: 0;
|
||||
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
|
||||
&:focus, &:hover{
|
||||
color: $primary;
|
||||
background: $white !important;
|
||||
border-color: #eeeeee;
|
||||
border-bottom: 0;
|
||||
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*tab-vertical*/
|
||||
.tab-vertical{
|
||||
.nav-tabs {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
.nav.nav-tabs{
|
||||
li{
|
||||
display: block;
|
||||
width: 100%;
|
||||
a {
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
padding: 14px 30px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
&:focus, &:hover {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
a {
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
background-color: $white;
|
||||
border: 1px solid #eeeeee;
|
||||
padding: 40px 30px;
|
||||
margin-left: 25%;
|
||||
line-height: 30px;
|
||||
margin-top: 0;
|
||||
p {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********
|
||||
13/11/2018
|
||||
********/
|
||||
.tabs-contant {
|
||||
.tab{
|
||||
.nav.nav-tabs{
|
||||
li{
|
||||
a{
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab.nav-bt {
|
||||
.nav.nav-tabs {
|
||||
li {
|
||||
a.active {
|
||||
background: #fff;
|
||||
border-top:3px solid $primary;
|
||||
color:$primary;
|
||||
&:first-child {
|
||||
border-left:1px solid #eee;
|
||||
}
|
||||
&:last-child {
|
||||
border-right:1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab.nav-center {
|
||||
.nav.nav-tabs {
|
||||
li {
|
||||
margin-left:-4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab.nav-right {
|
||||
.nav.nav-tabs {
|
||||
li {
|
||||
margin-left:-4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab.nav-border-bottom {
|
||||
.nav.nav-tabs {
|
||||
border-bottom: 1px solid $border-color;
|
||||
li {
|
||||
a{
|
||||
background: transparent; border:0;
|
||||
border-bottom: 2px solid transparent;
|
||||
&.active, &:hover {
|
||||
border-color: $primary;
|
||||
background: transparent;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) and (min-width: 320px){
|
||||
.tabs-contant {
|
||||
.tab{
|
||||
.nav.nav-tabs{
|
||||
li{
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-vertical{
|
||||
.nav-tabs{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.tab-content{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
#toastrOptions {
|
||||
background: #f6f7f8;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.toast{
|
||||
&-success{
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&-error{
|
||||
background-color: $danger;
|
||||
}
|
||||
&-info{
|
||||
background-color: $info;
|
||||
}
|
||||
&-warning{
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user