feat
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
@import '../mixins/alert'; /** =====================
|
||||
Alert css start
|
||||
========================== **/
|
||||
|
||||
/* Base styles */
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: 15px 20px;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* Provide class for links that match alerts */
|
||||
|
||||
.alert-link {
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: 40px;
|
||||
.close {
|
||||
padding: 14px 10px;
|
||||
}
|
||||
}
|
||||
/* Alternate styles
|
||||
Generate contextual modifier classes for colorizing the alert. */
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant-pc(
|
||||
theme-color-level($color, $alert-bg-level),
|
||||
theme-color-level($color, $alert-border-level),
|
||||
theme-color-level($color, $alert-color-level)
|
||||
);
|
||||
}
|
||||
}
|
||||
/**====== Alert css end ======**/
|
||||
@@ -0,0 +1,282 @@
|
||||
/** =====================
|
||||
Authentication css start
|
||||
========================== **/
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');
|
||||
|
||||
.auth-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
min-width: 100%;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
a,
|
||||
p > a {
|
||||
color: $theme-heading-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-auth-gen {
|
||||
.btn-icon {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 45px;
|
||||
|
||||
small {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group {
|
||||
background: transparent;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
position: relative;
|
||||
width: 390px;
|
||||
padding: 15px;
|
||||
z-index: 5;
|
||||
font-family: 'Poppins';
|
||||
&.multyform,
|
||||
&.subscribe {
|
||||
width: 750px;
|
||||
}
|
||||
.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
.login_form {
|
||||
margin-top: 61px;
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 20px 2px 55px;
|
||||
border-radius: 24px;
|
||||
border: 0;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.input-group i svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 15px;
|
||||
transform: translateY(-50%);
|
||||
color: #6c757d52;
|
||||
}
|
||||
.input-group input {
|
||||
height: 48px;
|
||||
border: none;
|
||||
font-family: 'Poppins';
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.input-group input::placeholder {
|
||||
color: #6c757d52;
|
||||
}
|
||||
.input-group input:focus {
|
||||
outline: none !important;
|
||||
outline-width: 0 !important;
|
||||
box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.checkbox.checkbox-fill input[type='checkbox'] + .cr:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox.checkbox-fill input[type='checkbox'] + .cr:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox.checkbox-fill input[type='checkbox']:checked + .cr:before {
|
||||
background: #ffc11a;
|
||||
border: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form-check-label + label {
|
||||
background-image: url(../../images/btn-check-box-default.svg);
|
||||
background-position: left;
|
||||
background-size: contain;
|
||||
padding-left: 23px !important;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-check-label:checked + label {
|
||||
background-image: url(../../images/btn-check-box-active.svg);
|
||||
background-position: left;
|
||||
background-size: contain;
|
||||
padding-left: 23px !important;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
background: #ffc11a !important;
|
||||
border: 1px solid #ffc11a !important;
|
||||
-webkit-background-clip: text;
|
||||
box-shadow: none;
|
||||
border-radius: 50rem;
|
||||
margin-top: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
max-width: 360px;
|
||||
}
|
||||
@media only screen and (max-width: 575px) {
|
||||
.card {
|
||||
.card-body {
|
||||
padding: 30px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-icon {
|
||||
font-size: 30px;
|
||||
&:before {
|
||||
background: $theme-color;
|
||||
background-clip: inherit;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background-image: none;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-bg {
|
||||
.r {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
|
||||
&:first-child {
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
background: $theme-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
left: -100px;
|
||||
bottom: -100px;
|
||||
background: $theme-color2;
|
||||
}
|
||||
|
||||
&.s {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
&:nth-child(2) {
|
||||
top: 150px;
|
||||
right: -150px;
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
left: -150px;
|
||||
bottom: 150px;
|
||||
background: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
animation: floating 7s infinite;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
animation: floating 9s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* image variant start */
|
||||
.aut-bg-img {
|
||||
background-size: cover;
|
||||
/*background-image: url('../../../images/bg-images/bg4.jpg');*/ // amit images
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.aut-bg-img-side {
|
||||
p {
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
.aut-bg-img,
|
||||
.aut-bg-img-side {
|
||||
.custom-select,
|
||||
.form-control {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.auth-tabs {
|
||||
.card {
|
||||
// border-right: 10px;
|
||||
}
|
||||
.nav-pills {
|
||||
// margin-top: -80px;
|
||||
}
|
||||
.tab-content {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.tab-pane > * {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
.auth-icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 180px;
|
||||
transform: rotate(-30deg);
|
||||
z-index: 1;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* image varient start */
|
||||
@keyframes floating {
|
||||
from {
|
||||
transform: rotate(0deg) translate(-10px) rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg) translate(-10px) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
/**====== Authentication css end ======**/
|
||||
@@ -0,0 +1,33 @@
|
||||
/** =====================
|
||||
Breadcrumbs & Pagination css start
|
||||
========================== **/
|
||||
/* Breadcrumbs */
|
||||
|
||||
.breadcrumb {
|
||||
background-color: $theme-background;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
+ .breadcrumb-item {
|
||||
color: $primary-color;
|
||||
&::before {
|
||||
/* content: $breadcrumb-divider; */
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $theme-heading-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* pagination */
|
||||
|
||||
.page-item {
|
||||
&.active .page-link {
|
||||
color: #fff;
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
/**====== Breadcrumbs & Pagination css end ======**/
|
||||
@@ -0,0 +1,236 @@
|
||||
@import '../mixins/buttons';
|
||||
/** =====================
|
||||
Button css start
|
||||
========================== **/
|
||||
.btn-theme,
|
||||
a.btn-theme {
|
||||
background: $theme-color;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||
border-color: #1de1c2;
|
||||
border-radius: 0.25rem;
|
||||
padding: 11px 25px;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:not(:disabled):not(.disabled):active {
|
||||
background-image: $theme-color;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-image: #fff !important;
|
||||
color: $default-color;
|
||||
border: 1px solid $theme-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-theme {
|
||||
background-image: #fff !important;
|
||||
color: $default-color;
|
||||
border: 1px solid $theme-border;
|
||||
box-shadow: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:not(:disabled):not(.disabled):active {
|
||||
background-image: #fff;
|
||||
color: $default-color;
|
||||
border: 1px solid $theme-border;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $theme-color !important;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-theme2 {
|
||||
background: $theme-color2;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
padding: 14px 25px;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:not(:disabled):not(.disabled):active {
|
||||
background-image: $theme-color2;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-image: #fff !important;
|
||||
color: $default-color;
|
||||
border: 1px solid $theme-border;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-theme2 {
|
||||
background-image: #fff !important;
|
||||
color: $default-color;
|
||||
border: 1px solid $theme-border;
|
||||
box-shadow: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:not(:disabled):not(.disabled):active {
|
||||
background-image: #fff;
|
||||
color: $default-color;
|
||||
border: 1px solid $theme-border;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $theme-color2 !important;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 10px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
> i {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
&.btn-icon,
|
||||
&.drp-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 10px 12px;
|
||||
|
||||
> i {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.drp-icon {
|
||||
&.dropdown-toggle:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+ .dropdown-menu {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
&-rounded {
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-sm > .btn,
|
||||
.btn-sm {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-group-lg > .btn,
|
||||
.btn-lg {
|
||||
padding: 13px 23px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shadow-1 {
|
||||
box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
|
||||
}
|
||||
|
||||
.shadow-2 {
|
||||
box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2);
|
||||
}
|
||||
|
||||
.shadow-3 {
|
||||
box-shadow: 0 14px 24px 0 rgba(62, 57, 107, 0.26);
|
||||
}
|
||||
|
||||
.shadow-4 {
|
||||
box-shadow: 0 16px 28px 0 rgba(62, 57, 107, 0.3);
|
||||
}
|
||||
|
||||
.shadow-5 {
|
||||
box-shadow: 0 20px 24px 0 rgba(62, 57, 107, 0.36);
|
||||
}
|
||||
/* Alternate buttons */
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant-pc($value, $value);
|
||||
}
|
||||
}
|
||||
/* outline buttons */
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
@include button-outline-variant-pc($value);
|
||||
}
|
||||
}
|
||||
/* glow buttons */
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-glow-#{$color} {
|
||||
@include button-glow-variant-pc($value);
|
||||
}
|
||||
}
|
||||
/**====== Button css end ======**/
|
||||
|
||||
.drp-icon {
|
||||
.btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 10px 12px;
|
||||
|
||||
> i {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.dropdown-toggle:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
+ .dropdown-menu {
|
||||
margin-left: -10px;
|
||||
}
|
||||
&.btn-rounded {
|
||||
.btn {
|
||||
&.dropdown-toggle {
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
/** =====================
|
||||
Data Tables css start
|
||||
========================== **/
|
||||
.table {
|
||||
color: #888;
|
||||
td,
|
||||
th {
|
||||
border-top: 1px solid $theme-border;
|
||||
white-space: nowrap;
|
||||
padding: 1.05rem 0.75rem;
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-bottom: 1px solid $theme-border;
|
||||
}
|
||||
|
||||
tbody + tbody {
|
||||
border-top: 2px solid $theme-border;
|
||||
}
|
||||
|
||||
&.table-sm {
|
||||
th,
|
||||
td {
|
||||
padding: 0.35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Border versions */
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid $theme-border;
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid $theme-border;
|
||||
}
|
||||
}
|
||||
/* Zebra-striping */
|
||||
|
||||
.table-striped {
|
||||
tbody tr:nth-of-type(2n + 1) {
|
||||
background-color: transparentize($primary-color, 0.95);
|
||||
}
|
||||
}
|
||||
/* Hover effect */
|
||||
|
||||
.table-hover {
|
||||
tbody tr {
|
||||
&:hover {
|
||||
background-color: transparentize($primary-color, 0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Table backgrounds */
|
||||
|
||||
.table {
|
||||
.thead-dark {
|
||||
th {
|
||||
color: #fff;
|
||||
background-color: $dark-color;
|
||||
border-color: darken($dark-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
color: #fff;
|
||||
background-color: $dark-color;
|
||||
|
||||
td,
|
||||
th,
|
||||
thead th {
|
||||
border-color: darken($dark-color, 10%);
|
||||
}
|
||||
|
||||
&.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: darken($dark-color, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
tbody tr {
|
||||
&:hover {
|
||||
background-color: darken($dark-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* fixed header position */
|
||||
|
||||
table.dataTable.fixedHeader-floating {
|
||||
top: 0 !important;
|
||||
@media screen and (max-width: 992px) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
.fixedHeader-locked {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** =====================
|
||||
Foo-table css start
|
||||
========================== **/
|
||||
|
||||
.footable .pagination > {
|
||||
.active > {
|
||||
a,
|
||||
span {
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li > {
|
||||
a,
|
||||
span {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footable-details.table,
|
||||
.footable.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
&.footable > tfoot > tr.footable-paging > td > span.label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.footable-paging-center > tfoot > tr.footable-paging > td {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-columned > {
|
||||
tbody > {
|
||||
tr > {
|
||||
td {
|
||||
border: 0;
|
||||
border-left: 1px solid $theme-border;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**====== Foo-table css end ======**/
|
||||
/**====== Data Tables css end ======**/
|
||||
@@ -0,0 +1,143 @@
|
||||
/** =====================
|
||||
Form Componant css start
|
||||
========================== **/
|
||||
|
||||
// .custom-select,
|
||||
// .form-control {
|
||||
// background: $theme-background;
|
||||
// padding: 10px 20px;
|
||||
// font-size: 14px;
|
||||
// height: auto;
|
||||
|
||||
// &.form-control-lg {
|
||||
// font-size: 1.25rem;
|
||||
// }
|
||||
|
||||
// &.form-control-sm {
|
||||
// height: calc(1.8125rem + 2px);
|
||||
// font-size: .875rem;
|
||||
// }
|
||||
|
||||
// &.form-control-range {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
|
||||
// &:focus {
|
||||
// background: $theme-background;
|
||||
// }
|
||||
|
||||
// &::-moz-placeholder {
|
||||
// color: #aaaeb3;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
// &:-ms-input-placeholder {
|
||||
// color: #aaaeb3;
|
||||
// }
|
||||
|
||||
// &::-webkit-input-placeholder {
|
||||
// color: #aaaeb3;
|
||||
// }
|
||||
// }
|
||||
// /* input group start */
|
||||
|
||||
// // .input-group {
|
||||
// // background: $theme-background;
|
||||
|
||||
// // .input-group-text {
|
||||
// // padding-left: 15px;
|
||||
// // padding-right: 15px;
|
||||
// // background: transparent;
|
||||
// // i {
|
||||
// // font-size: 20px;
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // .custom-file-label {
|
||||
// // margin-bottom: 0;
|
||||
// // }
|
||||
|
||||
// // .btn {
|
||||
// // margin-bottom: 0;
|
||||
// // margin-right: 0;
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// .cust-file-button {
|
||||
// .custom-file-label {
|
||||
// height: calc(2.25rem + 8px);
|
||||
// line-height: 2.5;
|
||||
|
||||
// &::after {
|
||||
// padding: 0.775rem 0.75rem;
|
||||
// height: 2.65rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .custom-select{
|
||||
// height: calc(2.25rem + 9px);
|
||||
// }
|
||||
// /* input group End */
|
||||
// /**====== Form Componant css end ======**/
|
||||
// select.form-control:not([size]):not([multiple]) {
|
||||
// height: calc(2.55rem + 2px);
|
||||
// }
|
||||
// .input-group-lg > .input-group-append > select.btn:not([size]):not([multiple]),
|
||||
// .input-group-lg > .input-group-append > select.input-group-text:not([size]):not([multiple]),
|
||||
// .input-group-lg > .input-group-prepend > select.btn:not([size]):not([multiple]),
|
||||
// .input-group-lg > .input-group-prepend > select.input-group-text:not([size]):not([multiple]),
|
||||
// .input-group-lg > select.form-control:not([size]):not([multiple]),
|
||||
// select.form-control-lg:not([size]):not([multiple]) {
|
||||
// height: calc(3.375rem + 2px);
|
||||
// }
|
||||
|
||||
// .minicolors {
|
||||
// .form-control {
|
||||
// padding: 6px 12px 5px 44px;
|
||||
// }
|
||||
// }
|
||||
// /* form-select */
|
||||
|
||||
// .select2-container {
|
||||
// width: 100% !important;
|
||||
// }
|
||||
// .tt-menu {
|
||||
// position: absolute;
|
||||
// top: 100%;
|
||||
// left: 0;
|
||||
// z-index: 1000;
|
||||
// display: none;
|
||||
// float: left;
|
||||
// min-width: 160px;
|
||||
// padding: 5px 0;
|
||||
// margin: 2px 0 0;
|
||||
// list-style: none;
|
||||
// font-size: 14px;
|
||||
// background-color: #ffffff;
|
||||
// border: 1px solid #cccccc;
|
||||
// border-radius: 4px;
|
||||
// box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
// background-clip: padding-box;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// .bootstrap-tagsinput {
|
||||
// width: 100%;
|
||||
// }
|
||||
// .custom-file-label{
|
||||
// height: auto;
|
||||
// &:after{
|
||||
// height: auto;
|
||||
// padding: 0.550rem 0.75rem;
|
||||
// }
|
||||
// }
|
||||
// .form-control.is-invalid, .was-validated .form-control:invalid,
|
||||
// .was-validated .form-control:valid, .form-control.is-valid {
|
||||
// background-position: calc(100% - 10px) calc(.375em + 0.4875rem);
|
||||
// }
|
||||
|
||||
// .was-validated .form-control:invalid~.invalid-feedback {
|
||||
// background: #fff;
|
||||
// margin-top: 0;
|
||||
// padding-top: 0.25em;
|
||||
// }
|
||||
@@ -0,0 +1,20 @@
|
||||
/** =====================
|
||||
Label & Badges css start
|
||||
========================== **/
|
||||
|
||||
.label {
|
||||
padding: 4px 10px;
|
||||
min-height: auto;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
@each $value in $color-bt-name {
|
||||
$i: index($color-bt-name, $value);
|
||||
|
||||
&.label-#{$value} {
|
||||
background: nth($color-bt-color, $i);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**====== Label & Badges css end ======**/
|
||||
@@ -0,0 +1,9 @@
|
||||
@media screen and (max-width: 480px) {
|
||||
.modal-footer {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
z-index: 1073;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 10px 24px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* ======================== Tabs =============================== */
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
.nav-link {
|
||||
border: none;
|
||||
color: $theme-font-color;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item.show .nav-link,
|
||||
.nav-link.active {
|
||||
border: none;
|
||||
color: $theme-heading-color;
|
||||
box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
/* ======================= Pills ================== */
|
||||
|
||||
.nav-pills {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
|
||||
.nav-link {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: #fff;
|
||||
background: $primary-color;
|
||||
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== Justified variants ===================*/
|
||||
|
||||
.nav-fill {
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-justified {
|
||||
.nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
/* Tabbable tabs */
|
||||
|
||||
/* Hide tabbable panes to start, show them when `.active` */
|
||||
|
||||
.tab-content {
|
||||
padding: 35px 30px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/** =====================
|
||||
tooltip css start
|
||||
========================== **/
|
||||
.popover {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: none;
|
||||
box-shadow: 0 0 15px #dcdcdc;
|
||||
border-radius: 15px;
|
||||
|
||||
.arrow {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\6d';
|
||||
top: -1px;
|
||||
left: 0;
|
||||
font-family: 'pct';
|
||||
font-size: 20px;
|
||||
line-height: 0.3;
|
||||
color: #fff;
|
||||
border: none;
|
||||
text-shadow: 0 2px 3px rgba(220, 220, 220, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
background: transparent;
|
||||
border-bottom-color: $theme-background;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-top {
|
||||
.arrow {
|
||||
&::before {
|
||||
content: '\6d';
|
||||
text-shadow: 0 2px 3px rgba(220, 220, 220, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-right {
|
||||
.arrow::before {
|
||||
content: '\6a';
|
||||
left: -4px;
|
||||
top: 2.6px;
|
||||
border: none;
|
||||
text-shadow: -2px 0 3px rgba(220, 220, 220, 0.46);
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-bottom {
|
||||
.arrow:before {
|
||||
content: '\6c';
|
||||
top: 3px;
|
||||
border: none;
|
||||
text-shadow: 0 -2px 3px rgba(220, 220, 220, 0.46);
|
||||
}
|
||||
|
||||
.popover-header::before {
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-left {
|
||||
.arrow::before {
|
||||
content: '\6b';
|
||||
left: -8px;
|
||||
top: 3.6px;
|
||||
border: none;
|
||||
text-shadow: 2px 0 3px rgba(220, 220, 220, 0.46);
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-auto {
|
||||
&[x-placement^='top'] {
|
||||
@extend .bs-popover-top;
|
||||
}
|
||||
|
||||
&[x-placement^='right'] {
|
||||
@extend .bs-popover-right;
|
||||
}
|
||||
|
||||
&[x-placement^='bottom'] {
|
||||
@extend .bs-popover-bottom;
|
||||
}
|
||||
|
||||
&[x-placement^='left'] {
|
||||
@extend .bs-popover-left;
|
||||
}
|
||||
}
|
||||
|
||||
/**====== tooltip css end ======**/
|
||||
@@ -0,0 +1,39 @@
|
||||
/** =====================
|
||||
Progress css start
|
||||
========================== **/
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 16px 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 12px;
|
||||
font-size: 10px;
|
||||
background-color: $theme-background;
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: $primary-color;
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
@each $value in $color-name {
|
||||
$i: index($color-name, $value);
|
||||
|
||||
&.progress-#{$value} {
|
||||
background: nth($color-color, $i);
|
||||
}
|
||||
}
|
||||
&.progress-c-theme {
|
||||
background: $theme-color;
|
||||
}
|
||||
&.progress-c-theme2 {
|
||||
background: $theme-color2;
|
||||
}
|
||||
}
|
||||
/**====== Progress css end ======**/
|
||||
@@ -0,0 +1,269 @@
|
||||
/** =====================
|
||||
Radio & Checked css start
|
||||
========================== **/
|
||||
.checkbox {
|
||||
padding: 10px 0;
|
||||
min-height: auto;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin: 0;
|
||||
display: none;
|
||||
width: 22px;
|
||||
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
content: '\e83f';
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
border: 2px solid #e9eaec;
|
||||
border-radius: 3px;
|
||||
font: {
|
||||
size: 15px;
|
||||
family: 'feather';
|
||||
weight: 400;
|
||||
}
|
||||
line-height: 19px;
|
||||
vertical-align: bottom;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + .form-check-label:before,
|
||||
&:checked + .cr:before {
|
||||
background: #1dd5d2;
|
||||
border-color: #1dd5d2;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.disabled + .form-check-label,
|
||||
&:disabled + .form-check-label,
|
||||
&.disabled + .cr,
|
||||
&:disabled + .cr {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.disabled + .form-check-label:before,
|
||||
&:disabled + .form-check-label:before,
|
||||
&.disabled + .cr:before,
|
||||
&:disabled + .cr:before {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox-fill {
|
||||
input[type='checkbox'] {
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
&:after {
|
||||
content: '';
|
||||
width: 22.5px;
|
||||
height: 22.5px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
border: 2px solid #e9eaec;
|
||||
border-radius: 2px;
|
||||
vertical-align: bottom;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: absolute;
|
||||
top: 8.5px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 0;
|
||||
content: '\e840';
|
||||
font-size: 27px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
background: transparent;
|
||||
color: #1dd5d2;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $value in $color-bt-name {
|
||||
$i: index($color-bt-name, $value);
|
||||
|
||||
&.checkbox-#{$value} input[type='checkbox']:checked + .form-check-label:before,
|
||||
&.checkbox-#{$value} input[type='checkbox']:checked + .cr:before {
|
||||
background: nth($color-bt-color, $i);
|
||||
border-color: nth($color-bt-color, $i);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&.checkbox-fill.checkbox-#{$value} input[type='checkbox']:checked + .form-check-label:before,
|
||||
&.checkbox-fill.checkbox-#{$value} input[type='checkbox']:checked + .cr:before {
|
||||
background: transparent;
|
||||
color: nth($color-bt-color, $i);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label,
|
||||
.cr {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
padding: 10px 0;
|
||||
min-height: auto;
|
||||
position: relative;
|
||||
margin-right: 5px;
|
||||
|
||||
input[type='radio'] {
|
||||
margin: 0;
|
||||
display: none;
|
||||
width: 22px;
|
||||
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
padding-left: 0;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
vertical-align: bottom;
|
||||
background: #fff;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid #e9eaec;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
&:before {
|
||||
border-color: #1dd5d2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-fill {
|
||||
input[type='radio'] {
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
&:after {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 10px;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $value in $color-bt-name {
|
||||
$i: index($color-bt-name, $value);
|
||||
|
||||
&.radio-#{$value} input[type='radio']:checked + .form-check-label,
|
||||
&.radio-#{$value} input[type='radio']:checked + .cr {
|
||||
&:before {
|
||||
border-color: nth($color-bt-color, $i);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: nth($color-bt-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label,
|
||||
.cr {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
.radio input[type='radio'] + .form-check-label::after,
|
||||
.radio input[type='radio'] + .cr::after {
|
||||
top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-controls-stacked {
|
||||
.radio {
|
||||
input[type='radio'] {
|
||||
+ .form-check-label,
|
||||
+ .cr {
|
||||
&:after {
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**====== Radio & Checked css end ======**/
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
.form-check {
|
||||
padding-left: 0;
|
||||
margin-bottom: 6px;
|
||||
|
||||
input[type='radio'] + .form-check-label:after {
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/** =====================
|
||||
tooltip css start
|
||||
========================== **/
|
||||
.tooltip {
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '\6d';
|
||||
left: 0;
|
||||
font-family: 'pct';
|
||||
font-size: 20px;
|
||||
line-height: 0.3;
|
||||
color: #000;
|
||||
border: none;
|
||||
text-shadow: 0 2px 3px rgba(220, 220, 220, 0.46);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bs-tooltip-right {
|
||||
.arrow {
|
||||
&::before {
|
||||
content: '\6a';
|
||||
left: -7px;
|
||||
top: 2.6px;
|
||||
border: none;
|
||||
text-shadow: -2px 0 3px rgba(220, 220, 220, 0.46);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
border-radius: 15px 20px 20px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-bottom {
|
||||
.arrow {
|
||||
&::before {
|
||||
content: '\6c';
|
||||
border: none;
|
||||
text-shadow: 0 -2px 3px rgba(220, 220, 220, 0.46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-tooltip-left {
|
||||
.arrow {
|
||||
&::before {
|
||||
content: '\6b';
|
||||
left: -8px;
|
||||
top: 3.6px;
|
||||
border: none;
|
||||
text-shadow: 2px 0 3px rgba(220, 220, 220, 0.46);
|
||||
}
|
||||
}
|
||||
.tooltip-inner {
|
||||
border-radius: 20px 15px 15px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
border-radius: 20px;
|
||||
padding: 6px 15px;
|
||||
box-shadow: 0 0 15px #dcdcdc;
|
||||
}
|
||||
/**====== tooltip css end ======**/
|
||||
Reference in New Issue
Block a user