update
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
/**=====================
|
||||
According CSS start
|
||||
==========================**/
|
||||
.default-according {
|
||||
.avatar-showcase {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&+.card {
|
||||
margin-top: $according-card-top-margin;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
font-weight: $according-btn-weight;
|
||||
color: $theme-body-font-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: $according-card-header-padding;
|
||||
border: $card-border-color;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
font-size: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
border: $card-border-color;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.default-according.style-1 {
|
||||
button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
right: 20px;
|
||||
position: absolute;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
font-size: 20px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
@media (max-width: 575px) {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
&:before {
|
||||
content: $according-open-icon;
|
||||
font-family: $according-card-header-icon;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="false"] {
|
||||
&:before {
|
||||
content: $according-close-icon;
|
||||
font-family: $according-card-header-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
.svg-color {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 20px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-image: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
background-color: unset;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
background-image: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: unset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
$accordion-light-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
danger,
|
||||
dark;
|
||||
|
||||
$accordion-light-color: $light-primary,
|
||||
$light-secondary,
|
||||
$light-success,
|
||||
$light-warning,
|
||||
$light-info,
|
||||
$light-white,
|
||||
$light-danger,
|
||||
$light-dark;
|
||||
|
||||
@each $var in $accordion-light-name {
|
||||
$i: index($accordion-light-name, $var);
|
||||
|
||||
.accordion-button {
|
||||
&.accordion-light-#{$var} {
|
||||
&:not(.collapsed) {
|
||||
background-color: nth($accordion-light-color, $i);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: nth($accordion-light-color, $i);
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multi-collapse {
|
||||
&.show {
|
||||
.collapse-wrapper {
|
||||
&.accordion-light-#{$var} {
|
||||
background-color: nth($accordion-light-color, $i) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
.accordion-button {
|
||||
.svg-wrapper {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-wrapper {
|
||||
&:active {
|
||||
border: 1px solid $primary-color;
|
||||
border-top: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-border {
|
||||
.accordion-item {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
According CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,389 @@
|
||||
/**=====================
|
||||
Alert CSS start
|
||||
==========================**/
|
||||
|
||||
.notify-alert {
|
||||
.close {
|
||||
background: unset;
|
||||
border: none;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: $alert-border-radious;
|
||||
padding: 15px;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: $alert-padding;
|
||||
}
|
||||
|
||||
[data-notify='icon'] {
|
||||
margin-right: 10px;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
[data-notify='message'] {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: $alert-msg-icon-size;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
opacity: 1;
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
text-shadow: none;
|
||||
padding: 0 5px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: 2.5rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 15px;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
padding: 10px 1.25rem;
|
||||
top: 4px;
|
||||
padding-right: 13px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s ease;
|
||||
opacity: 1;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
|
||||
&~p {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
|
||||
&~p {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
$alert-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
dark;
|
||||
|
||||
$alert-color : $primary-color,
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$warning-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color;
|
||||
|
||||
@each $var in $alert-name {
|
||||
$i: index($alert-name, $var);
|
||||
|
||||
.alert-#{$var} {
|
||||
background-color: rgba(nth($alert-color, $i), 0.8);
|
||||
border-color: rgba(nth($alert-color, $i), 0.9);
|
||||
color: $white;
|
||||
|
||||
.progress {
|
||||
height: 5px;
|
||||
background-color: darken(nth($alert-color, $i), 1%);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: lighten(nth($alert-color, $i), 50%);
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: brightness(1) invert(1);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: nth($alert-color, $i);
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
background-color: $light-color;
|
||||
|
||||
.btn-close {
|
||||
filter: unset;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top-color: nth($alert-color, $i);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.border-#{$var} {
|
||||
border-color: nth($alert-color, $i) !important;
|
||||
}
|
||||
|
||||
.list-group-horizontal {
|
||||
|
||||
&-sm,
|
||||
&-md,
|
||||
&-lg,
|
||||
&-xl,
|
||||
&-xxl {
|
||||
.list-group-item {
|
||||
&.border-left-#{$var} {
|
||||
border-left: 4px solid nth($alert-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
|
||||
.form-check-input:checked[type=checkbox],
|
||||
[type=radio] {
|
||||
&.checkbox-#{$var} {
|
||||
background-color: unset;
|
||||
border-color: nth($alert-color, $i);
|
||||
outline: 0;
|
||||
background-color: unset;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
border-color: nth($alert-color, $i);
|
||||
outline: 0;
|
||||
background-color: nth($alert-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-#{$var}.light {
|
||||
background-color: rgba(nth($alert-color, $i), 0.4);
|
||||
border-color: rgba(nth($alert-color, $i), 0.7);
|
||||
}
|
||||
|
||||
.alert-#{$var}.dark {
|
||||
.alert-link {
|
||||
color: $white;
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: nth($alert-color, $i);
|
||||
border-color: nth($alert-color, $i);
|
||||
color: $auth-bg-color;
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-#{$var}.outline,
|
||||
.alert-#{$var}.outline-2x {
|
||||
background-color: $transparent-color;
|
||||
border-color: nth($alert-color, $i);
|
||||
color: nth($alert-color, $i);
|
||||
|
||||
.btn-close {
|
||||
filter: unset;
|
||||
}
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-#{$var}.inverse {
|
||||
&:before {
|
||||
top: 16px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 54px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid nth($alert-color, $i);
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
left: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
padding: 13px 20px 13px 65px;
|
||||
border-color: nth($alert-color, $i);
|
||||
color: $theme-body-font-color;
|
||||
|
||||
i {
|
||||
padding: 17px 20px;
|
||||
display: inline-block;
|
||||
background-color: nth($alert-color, $i);
|
||||
color: $white;
|
||||
border-radius: 3px 0 0 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding: 17px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: unset;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outline-2x {
|
||||
border-width: 2px;
|
||||
padding: 11px 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.alert-icons {
|
||||
&.outline-2x {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute !important;
|
||||
top: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dark,
|
||||
.alert-info {
|
||||
.btn-close {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.border-left-wrapper {
|
||||
border-left: 4px solid $dark-color;
|
||||
}
|
||||
|
||||
$alert-light-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
danger,
|
||||
dark;
|
||||
|
||||
$alert-light-color: $light-primary,
|
||||
$light-secondary,
|
||||
$light-success,
|
||||
$light-warning,
|
||||
$light-info,
|
||||
$light-white,
|
||||
$light-danger,
|
||||
$light-dark;
|
||||
|
||||
@each $var in $alert-light-name {
|
||||
$i: index($alert-light-name, $var);
|
||||
|
||||
.alert-light-#{$var} {
|
||||
background-color: nth($alert-light-color, $i);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-arrow {
|
||||
min-width: 55px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.ellipsis.content {
|
||||
@media (max-width:576px) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 294px;
|
||||
}
|
||||
|
||||
@media (max-width:575px) {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Alert CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,134 @@
|
||||
/**=====================
|
||||
Avatars CSS start
|
||||
==========================**/
|
||||
.avatars {
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
width: auto;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.b-r-30 {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.b-r-35 {
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
.b-r-25 {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.b-r-15 {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&.ratio {
|
||||
img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
height: 12%;
|
||||
width: 12%;
|
||||
border-radius: 100%;
|
||||
bottom: 12%;
|
||||
right: 4%;
|
||||
}
|
||||
|
||||
.img-100 {
|
||||
width: calc(75px + (100 - 75) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(75px + (100 - 75) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
|
||||
.img-90 {
|
||||
width: calc(65px + (90 - 65) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(65px + (90 - 65) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
|
||||
.img-80 {
|
||||
width: calc(55px + (80 - 55) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(55px + (80 - 55) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
|
||||
.img-70 {
|
||||
width: calc(45px + (70 - 45) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(45px + (70 - 45) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
background-color: $success-color ;
|
||||
}
|
||||
|
||||
.status-dnd {
|
||||
background-color: $warning-color ;
|
||||
}
|
||||
|
||||
.customers {
|
||||
ul {
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
img {
|
||||
border: 2px solid $white;
|
||||
transition: 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
+li {
|
||||
margin-left: -7%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.avatar-group {
|
||||
margin-right: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-showcase {
|
||||
margin-bottom: -10px;
|
||||
|
||||
.avatars {
|
||||
.avatar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
>* {
|
||||
position: relative;
|
||||
top: unset;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
80. avatars CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,121 @@
|
||||
/**=====================
|
||||
Badge CSS start
|
||||
==========================**/
|
||||
|
||||
.badge-spacing {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
.badge {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
|
||||
&.badge {
|
||||
svg {
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.rounded-circle {
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.badge-p-space {
|
||||
padding: 10px 13px;
|
||||
}
|
||||
|
||||
&+.badge {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&.btn-p-space {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.badge {
|
||||
&:hover {
|
||||
color: inherit;
|
||||
|
||||
&.badge-dark {
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: $badge-padding;
|
||||
font-family: $font-roboto, $font-serif;
|
||||
font-weight: 500;
|
||||
|
||||
&+.badge {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $badge-svg-size;
|
||||
height: $badge-svg-size;
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@each $pill-badge-name,
|
||||
$pill-badge-color in (primary, var(--theme-deafult)),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.pill-badge-#{$pill-badge-name} {
|
||||
background-color: $pill-badge-color;
|
||||
box-shadow: -0.5px 4.33px 16px 0px rgba($pill-badge-color, 0.25);
|
||||
color: $white;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pill-badge-primary {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.pill-badge-secondary {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
@each $round-badge-name,
|
||||
$round-badge-color in (primary, var(--theme-deafult)),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.round-badge-#{$round-badge-name} {
|
||||
border-radius: 6px;
|
||||
background-color: $round-badge-color;
|
||||
box-shadow: -0.5px -6.67px 14px 0px rgba($round-badge-color, 0.18);
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.round-badge-primary {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.round-badge-secondary {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Badge CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,107 @@
|
||||
/**=====================
|
||||
81. Bookmark CSS start
|
||||
==========================**/
|
||||
.bookmark {
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
.search-form {
|
||||
position: absolute;
|
||||
bottom: 53px;
|
||||
z-index: 1;
|
||||
.form-control-search {
|
||||
top: 65px;
|
||||
position: absolute;
|
||||
transition: all linear 0.3s;
|
||||
right: -20px;
|
||||
transform: translateY(-35px) scaleY(0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
input {
|
||||
width: 240px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 5px 21px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
&.open {
|
||||
transform: translateY(0px) scaleY(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: all linear 0.3s;
|
||||
z-index: 100;
|
||||
}
|
||||
&:after {
|
||||
top: 12px;
|
||||
left: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
&:before {
|
||||
left: 50px;
|
||||
top: 9px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
position: relative;
|
||||
color: $theme-body-font-color;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
+ li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
a {
|
||||
border-radius: 5px;
|
||||
svg {
|
||||
color: #ff9f40;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.offcanvas-bookmark {
|
||||
&.page-wrapper.horizontal-wrapper {
|
||||
.page-body-wrapper {
|
||||
.page-body {
|
||||
.bookmark {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
z-index: 99999;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: fixed;
|
||||
content: '';
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
body.modal-open {
|
||||
.select2-container--open {
|
||||
width: unset !important;
|
||||
display: block;
|
||||
.select2-dropdown {
|
||||
z-index: 1076;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
81. Bookmark CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,45 @@
|
||||
/**=====================
|
||||
57. breadcrumb CSS Start
|
||||
==========================**/
|
||||
.breadcrumb-colored{
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
li{
|
||||
a{
|
||||
color: $breadcrumb-ancher-color;
|
||||
}
|
||||
&.active{
|
||||
color: $breadcrumb-ancher-color;
|
||||
opacity:0.7;
|
||||
}
|
||||
}
|
||||
.breadcrumb-item{
|
||||
&:before{
|
||||
color: $breadcrumb-ancher-color;
|
||||
}
|
||||
}
|
||||
.breadcrumb-item.txt-dark{
|
||||
&:before{
|
||||
color: $breadcrumb-ancher-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-icon {
|
||||
--bs-breadcrumb-divider: '>';
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-no-divider {
|
||||
--bs-breadcrumb-divider: '';
|
||||
}
|
||||
.breadcrumb-item{
|
||||
&.active{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
57. breadcrumb CSS ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,31 @@
|
||||
/**=====================
|
||||
35. Form builder css start
|
||||
==========================**/
|
||||
.form-builder{
|
||||
.help-block {
|
||||
margin-bottom: 0;
|
||||
color: $gray-60;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.btn-light {
|
||||
color: $gray-60;
|
||||
}
|
||||
.copy-btn{
|
||||
padding: 8px;
|
||||
}
|
||||
.nav-primary {
|
||||
.nav-link.active, .nav-primary .show > .nav-link, .nav-pills.nav-primary .nav-link.active, .nav-pills.nav-primary .show > .nav-link{
|
||||
border-radius: 5px;
|
||||
}
|
||||
.nav-link, .nav-pills.nav-primary .nav-link {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.theme-form{
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
35. Form builder css Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,397 @@
|
||||
/**=====================
|
||||
06. Button CSS start
|
||||
==========================**/
|
||||
.btn-link {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.purchase-btn {
|
||||
background: linear-gradient(90deg, var(--theme-deafult) -18.33%, #563EE0 62.78%);
|
||||
padding: 12px 20px;
|
||||
min-width: 200px;
|
||||
border: none;
|
||||
transition: 0.5s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #563EE0 -18.33%, var(--theme-deafult) 62.78%);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
min-width: 140px;
|
||||
padding: 10px 17px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
&:not([disabled]):not(.disabled).active.active {
|
||||
color: $theme-body-font-color;
|
||||
background-color: darken($light-color, 2%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-gradien($deg, $leftcolor, $leftcolor-per, $rightcolor, $rightcolor-per, $font-color) {
|
||||
background-image: linear-gradient(to right, $leftcolor 0%, $rightcolor 51%, $leftcolor 100%);
|
||||
border: none;
|
||||
color: $font-color;
|
||||
background-size: auto 200%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary-gradien {
|
||||
@include btn-gradien(60, lighten($primary-color, 8%), 0%, darken($primary-color, 8%), 100%, $white);
|
||||
color: $white;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($primary-color, 8%), 0%, darken($primary-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary-gradien {
|
||||
@include btn-gradien(60, lighten($secondary-color, 8%), 0%, darken($secondary-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($secondary-color, 8%), 0%, darken($secondary-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success-gradien {
|
||||
@include btn-gradien(60, lighten($success-color, 8%), 0%, darken($success-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($success-color, 8%), 0%, darken($success-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger-gradien {
|
||||
@include btn-gradien(60, lighten($danger-color, 8%), 0%, darken($danger-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($danger-color, 8%), 0%, darken($danger-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning-gradien {
|
||||
@include btn-gradien(60, lighten($warning-color, 8%), 0%, darken($warning-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($warning-color, 8%), 0%, darken($warning-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info-gradien {
|
||||
@include btn-gradien(60, lighten($info-color, 8%), 0%, darken($info-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($info-color, 8%), 0%, darken($info-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light-gradien {
|
||||
@include btn-gradien(60, lighten($light-color, 8%), 0%, darken($light-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($light-color, 8%), 0%, darken($light-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dark-gradien {
|
||||
@include btn-gradien(60, lighten($dark-color, 8%), 0%, darken($dark-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($dark-color, 8%), 0%, darken($dark-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin btn-squre($border-radius) {
|
||||
border-radius: $border-radius+px;
|
||||
}
|
||||
|
||||
@mixin btn-pill($border-radius) {
|
||||
border-radius: $border-radius+px;
|
||||
}
|
||||
|
||||
@mixin btn-pill-first($radius) {
|
||||
border-radius: $radius+px 0 0 $radius+px;
|
||||
}
|
||||
|
||||
@mixin btn-pill-last($radius) {
|
||||
border-radius: 0 $radius+px $radius+px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: $btn-padding;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: $btn-lg-font-size;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: $btn-sm-font-size;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: $btn-xs-padding;
|
||||
font-size: $btn-xs-font-size;
|
||||
}
|
||||
|
||||
.large-btn {
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
.btn-outline-white {
|
||||
border: 1px solid $white;
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// outline buttons//
|
||||
@each $btn-name,
|
||||
$btn-color in (primary, $primary-color),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.btn-air-#{$btn-name} {
|
||||
box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background-color: darken($btn-color, 10%);
|
||||
border-color: darken($btn-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.input-air-#{$btn-name} {
|
||||
box-shadow: 0 3px 5px 1px rgba($btn-color , 0.10) !important;
|
||||
|
||||
&:focus {
|
||||
border-color: $btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
color: $white !important;
|
||||
font-weight: 500;
|
||||
padding: 10px 30px;
|
||||
border-radius: 5px;
|
||||
background: $gradient-primary;
|
||||
letter-spacing: 0.06rem;
|
||||
|
||||
&:hover {
|
||||
background-size: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&.disabled {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='-gradien'] {
|
||||
&:hover {
|
||||
background-size: 50% 100%;
|
||||
transition: all 0.3s ease;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
@include btn-squre(0);
|
||||
}
|
||||
|
||||
.btn-pill {
|
||||
@include btn-squre(60);
|
||||
}
|
||||
|
||||
.btn-group-pill {
|
||||
.btn {
|
||||
&:first-child {
|
||||
@include btn-pill-first(60);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include btn-pill-last(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-square {
|
||||
.btn {
|
||||
&:first-child {
|
||||
@include btn-pill-first(0);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include btn-pill-last(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-showcase {
|
||||
.btn {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
margin-bottom:-10px;
|
||||
}
|
||||
|
||||
.btn-dropdown-showcase {
|
||||
.dropdown {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
margin-bottom:-10px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.radio {
|
||||
label {
|
||||
&::before {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
label {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-showcase {
|
||||
>div {
|
||||
margin-bottom: -20px;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltiptext {
|
||||
visibility: visible;
|
||||
width: 120px;
|
||||
background-color: #555;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**=====================
|
||||
06. Button CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,400 @@
|
||||
/**=====================
|
||||
03. Card CSS Start
|
||||
==========================**/
|
||||
//Card css
|
||||
.card {
|
||||
margin-bottom: $card-margin-bottom;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: $card-border-radious;
|
||||
box-shadow: $card-box-shadow;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $card-hover-box-shadow;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: $card-header-bg-color;
|
||||
padding: $card-padding;
|
||||
border-bottom: $card-border-color;
|
||||
border-top-left-radius: $card-border-radious;
|
||||
border-top-right-radius: $card-border-radious;
|
||||
position: relative;
|
||||
|
||||
&.card-no-border {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
||||
&:not(.mb-0),
|
||||
&:not(.m-0) {
|
||||
margin-bottom: 0;
|
||||
text-transform: $card-header-font-transform;
|
||||
}
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: $card-header-span-size;
|
||||
color: $card-header-span-color;
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-header-right {
|
||||
border-radius: 0 0 0 7px;
|
||||
right: 35px;
|
||||
top: 24px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 8px 0;
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
z-index: 1;
|
||||
|
||||
.card-option {
|
||||
text-align: right;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
transition: 0.3s ease-in-out;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:first-child {
|
||||
i {
|
||||
transition: 1s;
|
||||
font-size: 16px;
|
||||
color: var(--theme-deafult);
|
||||
|
||||
&.icofont {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
color: $dark-color;
|
||||
line-height: 20px;
|
||||
|
||||
&.icofont-refresh {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: $card-padding;
|
||||
background-color: $card-body-bg-color;
|
||||
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-bottom: 12px;
|
||||
// margin-bottom: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: $card-footer-bg-color;
|
||||
border-top: $card-border-color;
|
||||
padding: $card-padding;
|
||||
border-bottom-left-radius: $card-border-radious;
|
||||
border-bottom-right-radius: $card-border-radious;
|
||||
}
|
||||
|
||||
&.card-load {
|
||||
.card-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
z-index: 8;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
margin: 0 auto;
|
||||
color: var(--theme-deafult);
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full-card {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
box-shadow: none;
|
||||
right: 0;
|
||||
border-radius: 0;
|
||||
border: 1px solid $light-semi-gray;
|
||||
width: calc(100vw - 12px);
|
||||
height: calc(100vh);
|
||||
|
||||
.card-body {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
.card {
|
||||
.sub-title {
|
||||
font-family: $font-rubik, $font-serif;
|
||||
font-weight: normal;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-absolute {
|
||||
margin-top: 20px;
|
||||
|
||||
.card-header {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 15px;
|
||||
border-radius: 0.25rem;
|
||||
padding: 10px 15px;
|
||||
|
||||
h5 {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.border-tab {
|
||||
margin-bottom: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
overflow: hidden;
|
||||
padding: 30px;
|
||||
|
||||
.card-header {
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
margin-top: -100px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 110px;
|
||||
padding: 7px;
|
||||
background-color: $white;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.card-social {
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 15px 0;
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0;
|
||||
margin-right: 15px;
|
||||
color: rgb(188, 198, 222);
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
h6 {
|
||||
margin-bottom: 30px;
|
||||
margin-top: 10px;
|
||||
color: $theme-body-sub-title-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 0;
|
||||
|
||||
>div {
|
||||
+div {
|
||||
border-left: 1px solid $light-semi-gray;
|
||||
}
|
||||
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.m-b-card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
&-profile {
|
||||
text-align: center;
|
||||
background-image: url(../images/dashboard-5/profile-bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.card-body {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
@media (max-width: 1399px) {
|
||||
padding: 23px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-details {
|
||||
margin-top: 15px;
|
||||
|
||||
h5 {
|
||||
a {
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.social-follow {
|
||||
column-count: 3;
|
||||
column-gap: 30px;
|
||||
margin-top: 25px;
|
||||
|
||||
@media (max-width: 1399px) {
|
||||
column-gap: 23px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
+li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: var(--recent-dashed-border);
|
||||
left: -15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-img-wrap {
|
||||
background: linear-gradient(253deg, var(--theme-deafult) 11.51%, rgba(115, 102, 255, 0) 82.07%);
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
|
||||
.edit-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--white);
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-img {
|
||||
padding: 5px;
|
||||
background: var(--white);
|
||||
border-radius: 100%;
|
||||
|
||||
img {
|
||||
height: 68px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
03. Card CSS End
|
||||
==========================**/
|
||||
@@ -0,0 +1,23 @@
|
||||
/**=====================
|
||||
07. Color CSS Start
|
||||
==========================**/
|
||||
.color-box {
|
||||
margin-bottom: -10px;
|
||||
|
||||
button {
|
||||
margin-bottom: 10px;
|
||||
|
||||
+button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.light-font {
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
|
||||
/**=====================
|
||||
07. Color CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,370 @@
|
||||
/**=====================
|
||||
30. Data-table CSS Start
|
||||
==========================**/
|
||||
div{
|
||||
&.dt-button-background{
|
||||
display: none !important;
|
||||
}
|
||||
&.DTS {
|
||||
div {
|
||||
&.dataTables_scrollBody {
|
||||
table {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-avtar{
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-right: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.action{
|
||||
display: flex;
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
.pdf{
|
||||
i{
|
||||
font-size: 20px;
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
.edit{
|
||||
margin-right: 5px;
|
||||
i{
|
||||
color: $success-color;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.delete{
|
||||
i{
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#auto-generate-content_wrapper{
|
||||
&.dataTables_wrapper{
|
||||
button{
|
||||
background-color: white;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper{
|
||||
width: calc(100% - 1px);
|
||||
&.no-footer {
|
||||
.dataTables_scrollBody {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
}
|
||||
}
|
||||
.dt-buttons{
|
||||
.btn{
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
}
|
||||
padding: 0;
|
||||
.btn-group{
|
||||
button{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
button{
|
||||
font-weight: 400;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 14px;
|
||||
border-radius: 0.25rem;
|
||||
color: $white;
|
||||
}
|
||||
&+.dataTables_wrapper{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.dataTables_paginate{
|
||||
margin-left: 15px !important;
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 0.25rem;
|
||||
padding-top: 0;
|
||||
.paginate_button{
|
||||
margin: 0;
|
||||
&.current,&:active{
|
||||
background: var(--theme-deafult);
|
||||
color: $white !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover{
|
||||
border:1px solid var(--theme-deafult);
|
||||
color: $dark-color !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom: 30px;
|
||||
select{
|
||||
border-color: $light-color;
|
||||
color: $dark-color;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
height:2.7142em;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
table.dataTable{
|
||||
border:1px solid $light-semi-gray;
|
||||
tbody {
|
||||
td, th {
|
||||
&.select-checkbox {
|
||||
padding-right: 40px !important;
|
||||
&:before {
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
left: unset;
|
||||
}
|
||||
&:after {
|
||||
margin-top: -5px;
|
||||
margin-left: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thead{
|
||||
th,td{
|
||||
border-bottom:2px solid $light-semi-gray;
|
||||
}
|
||||
}
|
||||
th,td{
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
.dataTables_filter{
|
||||
margin-bottom: 25px;
|
||||
margin-left: 15px;
|
||||
input[type="search"]{
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding: 0 10px;
|
||||
margin-left: 10px;
|
||||
height: 37px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_scrollHeadInner{
|
||||
width: 100% !important;
|
||||
}
|
||||
table{
|
||||
.fixedHeader-floating {
|
||||
position: fixed!important;
|
||||
background-color: $white;
|
||||
}
|
||||
.box{
|
||||
>div{
|
||||
padding: 5px 15px;
|
||||
background-color: var(--theme-deafult);
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
&.dataTable{
|
||||
&.fixedHeader-locked,&.fixedHeader-floating{
|
||||
width: calc(100vw - 250px) !important;
|
||||
max-width: calc(100vw - 250px) !important;
|
||||
overflow: hidden !important;
|
||||
right: 0 !important;
|
||||
z-index: 99;
|
||||
left: 260px !important;
|
||||
}
|
||||
&:not(.fixedHeader-locked){
|
||||
&:not(.fixedHeader-floating){
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dataTable{
|
||||
border-collapse: collapse!important;
|
||||
margin-top: 0 !important;
|
||||
thead{
|
||||
.sorting,.sorting_asc,.sorting_desc,.sorting_asc_disabled,.sorting_desc_disabled{
|
||||
&:before,&:after{
|
||||
bottom: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
input,select{
|
||||
border: 1px solid $light-semi-gray;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-datatable {
|
||||
tr {
|
||||
td,th {
|
||||
&:first-child {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.jsgrid {
|
||||
.jsgrid-button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.jsgrid-delete-button {
|
||||
background-position: 0 -78px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.jsgrid-edit-button {
|
||||
background-position: -2px -122px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.jsgrid-insert-mode-button {
|
||||
background-position: -2px -160px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
.jsgrid-insert-button {
|
||||
background-position: -3px -202px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.toolbar{
|
||||
padding: 5px 15px;
|
||||
background-color: var(--theme-deafult);
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
code{
|
||||
&.option{
|
||||
color: $danger-color !important;
|
||||
}
|
||||
&.api{
|
||||
color: $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Datatable extension
|
||||
.dt-ext{
|
||||
.dataTables_wrapper{
|
||||
.page-item{
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: var(--theme-deafult) !important;
|
||||
border-color: var(--theme-deafult) !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_paginate{
|
||||
border: none;
|
||||
.paginate_button{
|
||||
padding: 0;
|
||||
border: none;
|
||||
&.disabled,&.hover,&.active{
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
.page-link{
|
||||
margin-left: 0px;
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
button.dt-button, div.dt-button, a.dt-button, button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), button.dt-button:active:not(.disabled), button.dt-button.active:not(.disabled), div.dt-button:active:not(.disabled), div.dt-button.active:not(.disabled), a.dt-button:active:not(.disabled), a.dt-button.active:not(.disabled){
|
||||
background-color: var(--theme-deafult);
|
||||
border-color:var(--theme-deafult);
|
||||
border-radius: 2px;
|
||||
color: $white;
|
||||
background-image: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
button.dt-button.btn-success, div.dt-button.btn-success, a.dt-button.btn-success{
|
||||
background-color: $success-color;
|
||||
border-color:$success-color;
|
||||
}
|
||||
button.dt-button.btn-primary, div.dt-button.btn-primary, a.dt-button.btn-primary{
|
||||
background-color: var(--theme-deafult);
|
||||
border-color:var(--theme-deafult);
|
||||
}
|
||||
button.dt-button.btn-danger, div.dt-button.btn-danger, a.dt-button.btn-danger{
|
||||
background-color: $danger-color;
|
||||
border-color:$danger-color
|
||||
}
|
||||
table.dataTable th.focus, table.dataTable td.focus{
|
||||
outline: 3px solid var(--theme-deafult);
|
||||
}
|
||||
table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
|
||||
}
|
||||
table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
}
|
||||
table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
}
|
||||
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.highlight {
|
||||
background-color: $light-color !important;
|
||||
}
|
||||
td.details-control {
|
||||
background: url('../images/details_open.png') no-repeat center center;
|
||||
cursor: pointer;
|
||||
}
|
||||
tr.shown td.details-control {
|
||||
background: url('../images/details_close.png') no-repeat center center;
|
||||
}
|
||||
.dataTables_scroll{
|
||||
&~.dataTables_paginate{
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
}
|
||||
.product-table{
|
||||
th{
|
||||
&:last-child{
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
h6{
|
||||
font-weight: 600;
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
table{
|
||||
&.dataTable{
|
||||
&.display {
|
||||
tbody {
|
||||
tr{
|
||||
&.odd {
|
||||
> .sorting_1{
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
30. Data-table CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,249 @@
|
||||
/**=====================
|
||||
52. Datepicker CSS Start
|
||||
==========================**/
|
||||
//colors
|
||||
.clockpicker-canvas {
|
||||
line {
|
||||
stroke: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-fg, .clockpicker-canvas-bearing {
|
||||
fill: var(--theme-deafult);
|
||||
}
|
||||
.daterangepicker {
|
||||
border: none;
|
||||
box-shadow: $card-box-shadow;
|
||||
td, th {
|
||||
&.available {
|
||||
&:hover {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.datepicker{
|
||||
z-index: 99;
|
||||
}
|
||||
.datepicker--day-name {
|
||||
color: $primary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.datepicker--cell {
|
||||
&.-current- {
|
||||
color: $black;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
border: 2px solid var(--theme-deafult);
|
||||
}
|
||||
&.-focus- {
|
||||
background: var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
&.-selected- {
|
||||
background: var(--theme-deafult) !important;
|
||||
}
|
||||
&-day {
|
||||
width: 14.2857142857%;
|
||||
}
|
||||
}
|
||||
.daterangepicker.ltr {
|
||||
color: $dark-gray;
|
||||
z-index: 8;
|
||||
tr {
|
||||
font-size: 13px;
|
||||
td {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
&.in-range {
|
||||
background-color: $auth-bg-color;
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranges {
|
||||
float: none;
|
||||
li {
|
||||
color: var(--theme-deafult);
|
||||
&:hover {
|
||||
background-color: var(--theme-deafult);
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--theme-deafult);
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.calendar-time select {
|
||||
color: $dark-gray;
|
||||
border-color: #efefef;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
.datepickers-container, .bootstrap-datetimepicker-widget {
|
||||
z-index: 7;
|
||||
}
|
||||
.datetime-picker {
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
.input-group-text i {
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
.date-range-picker{
|
||||
.theme-form{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
> div{
|
||||
&:last-child{
|
||||
.theme-form{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.daterangepicker{
|
||||
&:before {
|
||||
border-bottom: 7px solid $light-semi-gray;
|
||||
}
|
||||
.daterangepicker_input {
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.input-mini{
|
||||
border-color: $light-semi-gray !important;
|
||||
font-size: 14px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
th,td{
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
&:hover{
|
||||
color: $dark-color;
|
||||
}
|
||||
&.prev,&.next{
|
||||
color: $white;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
&.month{
|
||||
color: var(--theme-deafult);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
// timepicker css
|
||||
.clockpicker-popover {
|
||||
border: none;
|
||||
box-shadow: $card-box-shadow;
|
||||
z-index: 7;
|
||||
.popover-content {
|
||||
background-color: rgba($primary-color, 0.05);
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
fill: lighten($primary-color, 38%);
|
||||
}
|
||||
.clockpicker-tick {
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background-color: lighten($primary-color, 38%);
|
||||
}
|
||||
}
|
||||
|
||||
// calendar css
|
||||
.calendar-basic{
|
||||
.md-sidebar-aside {
|
||||
background-color: $white;
|
||||
}
|
||||
#external-events{
|
||||
padding: 20px;
|
||||
border: 1px solid $light-background;
|
||||
h4{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
p{
|
||||
margin-top: 12px;
|
||||
}
|
||||
.fc-h-event{
|
||||
padding: 12px;
|
||||
background-color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
+ .fc-h-event{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.fc-event-main{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.calendar-default{
|
||||
.fc-daygrid-dot-event{
|
||||
.fc-event-title{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.fc{
|
||||
td[role="presentation"]{
|
||||
border: 0;
|
||||
}
|
||||
.fc-daygrid-day-number,
|
||||
.fc-col-header-cell-cushion{
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
.fc-button{
|
||||
.fc-icon{
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-h-event{
|
||||
padding: 2px;
|
||||
background-color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
}
|
||||
.fc-toolbar-chunk{
|
||||
.fc-button-group{
|
||||
~ .fc-today-button{
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-event-dragging {
|
||||
padding: 10px;
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
.fc {
|
||||
.fc-toolbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.fc-button-primary {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba($primary-color, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
52. Datepicker CSS End
|
||||
==========================**/
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,386 @@
|
||||
/**=====================
|
||||
Dropdown CSS Start
|
||||
==========================**/
|
||||
.dropdown-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
background-color: rgba(115, 102, 255, 0.08);
|
||||
color: $primary-color;
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
content: "\f107";
|
||||
border: none;
|
||||
font-family: "FontAwesome";
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-family: $font-rubik, $font-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-toggles {
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
width: 120px;
|
||||
|
||||
@media only screen and (max-width: 575.98px) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-dropdown {
|
||||
.dropdown-toggle {
|
||||
background: transparent;
|
||||
color: $theme-body-sub-title-color;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-basic {
|
||||
margin-bottom: -10px;
|
||||
|
||||
.btn-group {
|
||||
|
||||
.btn-round {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.separated-btn {
|
||||
margin-left: -6px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
max-height: 43px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.dropbtn {
|
||||
color: white;
|
||||
padding: 12px 35px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 175px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 45px;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup-basic {
|
||||
.dropup {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.dropbtn {
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropup-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 170px;
|
||||
bottom: 45px;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropup .dropup-content a:hover {
|
||||
background-color: $light-gray;
|
||||
}
|
||||
|
||||
.dropup:hover .dropup-content {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
&.active {
|
||||
background-color: $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.dropdown-block {
|
||||
li {
|
||||
.dropdown-item {
|
||||
&:hover {
|
||||
background-color: $gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-truncate {
|
||||
&:hover {
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-basic {
|
||||
.dropdown {
|
||||
.dropdown-content {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: $gray-60 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.input-group {
|
||||
background-color: unset;
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
background-color: $white;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $gray-60;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: unset;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
vertical-align: 4px;
|
||||
content: '';
|
||||
border-top: 4px solid;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropstart {
|
||||
.dropdown-toggle {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
content: '';
|
||||
border-top: 4px solid transparent;
|
||||
border-right: 4px solid;
|
||||
border-bottom: 4px solid transparent;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 8px;
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropup {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
vertical-align: 4px;
|
||||
border-top: 0;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropend {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
content: '';
|
||||
border-top: 4px solid transparent;
|
||||
border-right: 0;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 4px solid;
|
||||
margin-left: 8px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.helper-truncate {
|
||||
@media (max-width:400px) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-dropdown {
|
||||
.dropdown-block {
|
||||
li {
|
||||
.dropdown-item {
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $dark-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
btn-group {
|
||||
.dropdown-wrapper {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl-dropdown {
|
||||
.dropdown-menu {
|
||||
li {
|
||||
.dropdown-item {
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.dropdown-menu {
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Dropdown CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,174 @@
|
||||
/**=====================
|
||||
11. Form Builder 1 CSS Start
|
||||
==========================**/
|
||||
.form-builder {
|
||||
.drag-box {
|
||||
user-select: none;
|
||||
fieldset {
|
||||
border: 1px dotted $light-gray;
|
||||
min-height: 655px;
|
||||
padding: 30px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.pl-md-radios {
|
||||
@media (max-width: 576px) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
.component {
|
||||
cursor: pointer;
|
||||
label{
|
||||
padding-top: 8px;
|
||||
}
|
||||
.form-group{
|
||||
input,textarea,select{
|
||||
border-radius: 4px;
|
||||
}
|
||||
.input-group{
|
||||
#prependedcheckbox, #prependedtext{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
#appendedcheckbox{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
#appendedtext, #buttondropdown{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
#buttondropdown{
|
||||
margin-right: -1px;
|
||||
}
|
||||
.input-group-btn{
|
||||
button{
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
.input-group-prepend{
|
||||
.btn-right,.checkbox-radius{
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pl-md-radios{
|
||||
padding-left: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
.popover {
|
||||
z-index: 8;
|
||||
opacity: 1;
|
||||
left: -290px !important;
|
||||
top: 95px !important;
|
||||
.control-group {
|
||||
cursor: default;
|
||||
}
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.render {
|
||||
min-height: 500px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.popover {
|
||||
.controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
.control-label {
|
||||
text-align: left;
|
||||
}
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
.fade.left.in
|
||||
{
|
||||
left: -215px;
|
||||
}
|
||||
}
|
||||
.target{
|
||||
&:after{
|
||||
float: left;
|
||||
content: " ";
|
||||
height: 77px;
|
||||
margin-top: 3px;
|
||||
background: $light-color;
|
||||
width: 100%;
|
||||
border: 1px dashed $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.drag {
|
||||
form {
|
||||
padding: 10px 5px;
|
||||
border: 1px dotted $light-gray;
|
||||
position: absolute;
|
||||
background: $white;
|
||||
box-shadow: 0 0 30px $light-gray;
|
||||
overflow: hidden;
|
||||
input{
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-builder-header-1{
|
||||
background-color: $light-color;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
min-height: 67px;
|
||||
h6{
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.form-builder{
|
||||
.help-block{
|
||||
font-size: 12px;
|
||||
}
|
||||
input{
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.form-group{
|
||||
.col-md-12{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.popover{
|
||||
width: 300px;
|
||||
}
|
||||
.popover-header{
|
||||
background-color: var(--theme-deafult);
|
||||
padding: 15px;
|
||||
}
|
||||
.popover-body{
|
||||
padding: 15px;
|
||||
.form-group{
|
||||
&.row{
|
||||
padding: 0 15px;
|
||||
.col-lg-12{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
11. Form Builder 1 CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,87 @@
|
||||
/**=====================
|
||||
29. Form Input CSS Start
|
||||
==========================**/
|
||||
%input-mixin1 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 10px;
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
margin-left: -2.5px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
top: 1px;
|
||||
}
|
||||
%input-mixin2 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 10px;
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
margin-left: -2.5px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
top: 1px;
|
||||
}
|
||||
.input-group-square {
|
||||
.input-group-text ,.form-control{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.input-group-solid {
|
||||
.input-group-text ,.form-control{
|
||||
background: $light-color;
|
||||
}
|
||||
}
|
||||
.input-group-air {
|
||||
box-shadow: 0 3px 20px 0 $light-semi-gray;
|
||||
}
|
||||
.icon-addon {
|
||||
position: relative;
|
||||
color: $color-scarpa;
|
||||
display: block;
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
&:before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.addon-md {
|
||||
.form-control {
|
||||
padding-left: 30px;
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
.glyphicon {
|
||||
@extend %input-mixin1;
|
||||
}
|
||||
.fa {
|
||||
@extend %input-mixin1;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
padding-left: 30px;
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
.glyphicon,.fa {
|
||||
@extend %input-mixin2;
|
||||
}
|
||||
}
|
||||
.pill-input-group span {
|
||||
&:last-child {
|
||||
border-top-right-radius: 1.3rem;
|
||||
border-bottom-right-radius: 1.3rem;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 1.3rem;
|
||||
border-bottom-left-radius: 1.3rem;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
29. Form Input CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,397 @@
|
||||
/**=====================
|
||||
48. Form Wizard CSS Start
|
||||
==========================**/
|
||||
/*Form Wizard One Start*/
|
||||
|
||||
.form-wizard {
|
||||
.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-mb {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.step {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: 0 2px;
|
||||
background-color: var(--theme-deafult);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.finish {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*Form Wizard One ends*/
|
||||
|
||||
/*Form Wizard Two Start*/
|
||||
.stepwizard {
|
||||
display: table;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.stepwizard-row {
|
||||
display: table-row;
|
||||
|
||||
&:before {
|
||||
top: 16px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $light-gray;
|
||||
}
|
||||
|
||||
.stepwizard-step {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 1 !important;
|
||||
filter: alpha(opacity=100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*Form Wizard Two Ends*/
|
||||
|
||||
|
||||
/*Form Wizard Three Start*/
|
||||
.f1 {
|
||||
fieldset {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
border-color: $danger-color;
|
||||
}
|
||||
|
||||
.f1-steps {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.f1-progress {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $dark-gray;
|
||||
|
||||
.f1-progress-line {
|
||||
height: 1px;
|
||||
background: var(--theme-deafult);
|
||||
width: 16%;
|
||||
}
|
||||
}
|
||||
|
||||
.f1-step {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 33.333333%;
|
||||
text-align: center;
|
||||
|
||||
&.activated {
|
||||
.f1-step-icon {
|
||||
background: $white;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.f1-step-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--theme-deafult);
|
||||
font-size: 22px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.f1-step-icon {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $dark-gray;
|
||||
font-size: 16px;
|
||||
color: $white;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f1-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/*Form Wizard Three ends*/
|
||||
|
||||
|
||||
/*Form Wizard Four Start*/
|
||||
.wizard-4 {
|
||||
.action-bar {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
.btn {
|
||||
float: right;
|
||||
margin: 0 5px;
|
||||
background-color: #e3e0ff !important;
|
||||
border-color: #e3e0ff !important;
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.buttonDisabled {
|
||||
color: $semi-dark;
|
||||
background-color: rgba($semi-dark, 0.05) !important;
|
||||
border: 1px solid rgba($semi-dark, 0.05) !important;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.step-container {
|
||||
background: #f8f9fe;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid #e8ebf2;
|
||||
overflow: hidden;
|
||||
clear: right;
|
||||
width: 70%;
|
||||
div.content {
|
||||
display: block;
|
||||
position: absolute;
|
||||
float: left;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
.wizard-title {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msg-box {
|
||||
position: fixed;
|
||||
display: none;
|
||||
padding: 5px 10px;
|
||||
background-color: lighten($primary-color, 10%);
|
||||
top: 30px;
|
||||
border-radius: 5px;
|
||||
right: 60px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.content {
|
||||
padding: 0;
|
||||
float: left;
|
||||
padding-top: 3px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: $white;
|
||||
margin-left: 10px;
|
||||
opacity: 1;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
ul.anchor {
|
||||
float: left;
|
||||
width: 30%;
|
||||
height: calc(100vh - 300px);
|
||||
padding: 40px 30px;
|
||||
overflow: auto;
|
||||
|
||||
.disabled {
|
||||
opacity: 0.7;
|
||||
color: $semi-dark;
|
||||
|
||||
h4 {
|
||||
background-color: rgba($semi-dark, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 19px;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 0;
|
||||
|
||||
&+li {
|
||||
a {
|
||||
padding-left: 80px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
width: auto;
|
||||
padding-bottom: 0;
|
||||
left: 9%;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 9%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 300px;
|
||||
@media (max-width: 1199px) {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
background-color: rgba($primary-color, 0.2);
|
||||
padding: 16px 23px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
outline-style: none;
|
||||
z-index: 1;
|
||||
font-size: 18px;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stepNumber {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.done {
|
||||
h4 {
|
||||
color: $white;
|
||||
background: var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: -3px;
|
||||
content: "\e64c";
|
||||
font-family: 'themify';
|
||||
background-color: $white;
|
||||
color: var(--theme-deafult);
|
||||
border-radius: 15px;
|
||||
padding: 2px;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: $dark-gray;
|
||||
background: $pitch-color;
|
||||
border: 1px solid $danger-color;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*Form Wizard Four Ends*/
|
||||
/**=====================
|
||||
48. Form Wizard CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,177 @@
|
||||
/**=====================
|
||||
12. Form Builder 2 CSS Start
|
||||
==========================**/
|
||||
.form-builder-column {
|
||||
#pills-tabContent {
|
||||
.theme-form {
|
||||
|
||||
.form-group,
|
||||
.ui-draggable {
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
.checkbox {
|
||||
label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
#prependedcheckbox {
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.m-t-help-block {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pills-button {
|
||||
.theme-form {
|
||||
button {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.droppable-active {
|
||||
background-color: rgba($primary-color, 0.2) !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
min-height: 540px;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.drag-bx {
|
||||
border: 1px dotted $light-gray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tools {
|
||||
a {
|
||||
cursor: pointer;
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
textarea {
|
||||
font-family: $font-rubik, $font-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-builder-2 {
|
||||
.form-group {
|
||||
.checkbox {
|
||||
label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
#prependedcheckbox {
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.m-t-help-block {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-builder-2-header {
|
||||
background-color: $light-color;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
|
||||
>div {
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
|
||||
nav {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggable {
|
||||
input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
12. Form Builder 2 CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,204 @@
|
||||
/**=====================
|
||||
26. Form CSS Start
|
||||
==========================**/
|
||||
.form-label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.col-form-label {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.form-space {
|
||||
margin-bottom: -10px;
|
||||
|
||||
>div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.theme-form {
|
||||
.form-control {
|
||||
:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(171, 140, 228, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-color: $form-input-border-color;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $form-placeholder-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
letter-spacing: $form-placeholder-letter-spacing;
|
||||
font-weight: $form-placeholder-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=search],
|
||||
input[type=password],
|
||||
input[type=number],
|
||||
input[type=tel],
|
||||
input[type=date],
|
||||
input[type=datetime-local],
|
||||
input[type=time],
|
||||
input[type=datetime-local],
|
||||
input[type=month],
|
||||
input[type=week],
|
||||
input[type=url],
|
||||
input[type=file],
|
||||
textarea,
|
||||
select {
|
||||
border-color: $form-input-border-color;
|
||||
background-color: $form-input-bg-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
color: $form-placeholder-color;
|
||||
padding: 12px 10px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&::-webkit-input-placeholder {
|
||||
color: $form-placeholder-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
letter-spacing: $form-placeholder-letter-spacing;
|
||||
font-weight: $form-placeholder-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
select.form-control:not([size]):not([multiple]) {
|
||||
border-color: $form-input-border-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
}
|
||||
.checkbox {
|
||||
label {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-divider {
|
||||
position: relative;
|
||||
clear: both;
|
||||
height: 0;
|
||||
margin: 30px 0;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 40%;
|
||||
margin-left: -10px;
|
||||
padding: 0 5px;
|
||||
content: "Or Signup With";
|
||||
color: $theme-font-color;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
position: relative;
|
||||
clear: both;
|
||||
height: 0;
|
||||
margin: 30px 0;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 40%;
|
||||
margin-left: -10px;
|
||||
padding: 0 5px;
|
||||
color: $theme-font-color;
|
||||
background: $white;
|
||||
content: "Or Login With";
|
||||
}
|
||||
}
|
||||
|
||||
.btn-fb,
|
||||
.btn-twitter,
|
||||
.btn-google,
|
||||
.btn-linkedin {
|
||||
color: $white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-fb {
|
||||
background-color: $fb;
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
background-color: $twitter;
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background-color: $google-plus;
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
background-color: $linkedin;
|
||||
}
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
display: flex;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
flex-flow: row wrap;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
.col-form-label {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
.form-group {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background: #e8ebf2;
|
||||
left: 82px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: "\f002";
|
||||
font-family: "FontAwesome";
|
||||
top: 53px;
|
||||
left: 53px;
|
||||
color: #8e8e8e;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding: 10px 10px 10px 70px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba($light-color, 0.3);
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-label-align-right {
|
||||
label {
|
||||
text-align: right;
|
||||
padding-top: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
26. Form CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,157 @@
|
||||
/**=====================
|
||||
10. ICON CSS Start
|
||||
==========================**/
|
||||
.icon-lists{
|
||||
div{
|
||||
cursor: pointer;
|
||||
line-height: 60px;
|
||||
white-space: nowrap;
|
||||
border-radius:4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover{
|
||||
background-color: $auth-bg-color;
|
||||
}
|
||||
i{
|
||||
margin: 0 15px 0 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
&.whether-icon{
|
||||
svg{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
&.feather-icons{
|
||||
.media{
|
||||
svg{
|
||||
margin: 0 15px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.feather-icon{
|
||||
.icon-first{
|
||||
h6{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flag-icons, .feather-icons{
|
||||
margin-bottom: -15px;
|
||||
margin-top: -15px;
|
||||
div{
|
||||
line-height: 1;
|
||||
word-wrap: break-word;
|
||||
overflow: auto;
|
||||
.flag-icon{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.media{
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.media-body{
|
||||
h6{
|
||||
margin-bottom: 0;
|
||||
font-size:14px;
|
||||
font-weight: 400;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
h5{
|
||||
background-color: var(--theme-deafult);
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-hover-bottom{
|
||||
background-color: $light;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0px 0px 1px 1px $light-color;
|
||||
z-index: 999;
|
||||
.icon-popup{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
width:100%;
|
||||
.close-icon{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 20px;
|
||||
color: $gray-60;
|
||||
cursor:pointer;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
padding: 20px;
|
||||
>
|
||||
div{
|
||||
display: inline-block;
|
||||
.flag-icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.icon-class{
|
||||
margin: 0 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-last {
|
||||
.form-inline {
|
||||
.form-group {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-title{
|
||||
display: block;
|
||||
color: $dark-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
span, label , .btn {
|
||||
font-family: $font-roboto, $font-serif;
|
||||
}
|
||||
.form-group{
|
||||
input{
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
background-color: $white;
|
||||
font-family: $font-roboto, $font-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-fa-icon-show-div,.icons-show-div{
|
||||
display:none;
|
||||
}
|
||||
.icon-first{
|
||||
i{
|
||||
color: $dark-gray;
|
||||
}
|
||||
h6{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
10. ICON CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,166 @@
|
||||
/**=====================
|
||||
List CSS Start
|
||||
==========================**/
|
||||
.list-group-item.active {
|
||||
background-color: var(--theme-deafult);
|
||||
border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.list-group {
|
||||
i {
|
||||
margin-right: $list-group-margin;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: $list-group-margin;
|
||||
}
|
||||
}
|
||||
|
||||
$list-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
danger,
|
||||
dark;
|
||||
|
||||
$list-light-color: $light-primary,
|
||||
$light-secondary,
|
||||
$light-success,
|
||||
$light-warning,
|
||||
$light-info,
|
||||
$light-white,
|
||||
$light-danger,
|
||||
$light-dark;
|
||||
|
||||
@each $var in $list-name {
|
||||
$i: index($list-name, $var);
|
||||
|
||||
.list-light-#{$var} {
|
||||
background-color: nth($list-light-color, $i);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: nth($list-light-color, $i);
|
||||
}
|
||||
}
|
||||
|
||||
.list-hover-#{$var} {
|
||||
background-color: unset;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus {
|
||||
background-color: nth($list-light-color, $i);
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-list-wrapper {
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 414px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 366px) {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.list-img {
|
||||
width: calc(40px + (55 - 40) * ((100vw - 320px) / (1920 - 320)));
|
||||
height: calc(40px + (55 - 40) * ((100vw - 320px) / (1920 - 320)));
|
||||
margin-bottom: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
max-height: 270px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main-lists-content {
|
||||
small {
|
||||
@media (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-behavior-1 {
|
||||
@media (max-width: 1199px) {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.flex-grow-1 {
|
||||
margin-left: 16px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 16px;
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-behavior-2 {
|
||||
@media (max-width: 1199px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-grow-1 {
|
||||
margin-right: 16px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 16px;
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
padding: 11px 16px;
|
||||
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
[dir="rtl"] & {
|
||||
margin-left: 10px;
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
List CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,145 @@
|
||||
/**=====================
|
||||
04. Loader CSS Start
|
||||
==========================**/
|
||||
.loader-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
background-color: $white;
|
||||
z-index: 11;
|
||||
top: 0;
|
||||
|
||||
/*Color Loader*/
|
||||
.loader-index {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
filter: url("#goo");
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background: var(--theme-deafult);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
animation: grow 2s cubic-bezier(.14, 0.05, 0.55, 0.5) infinite alternate;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: var(--theme-secondary);
|
||||
border-radius: 50%;
|
||||
margin-right: 2em;
|
||||
position: relative;
|
||||
transform: translateX(7em);
|
||||
animation: move 4s ease-in-out infinite;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: var(--theme-deafult);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 3em;
|
||||
transform: translateX(0em);
|
||||
animation: shrink 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: $info-color;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 3em;
|
||||
transform: translateX(0em);
|
||||
animation: shrink 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
background: $info-color;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
background: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: translateX(7em);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-5em)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shrink {
|
||||
0% {
|
||||
transform: translateX(0em)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-1em)
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*Color Loader*/
|
||||
|
||||
body {
|
||||
font-family: sans;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
background: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 2em;
|
||||
letter-spacing: 3px;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, var(--theme-secondary), var(--theme-deafult), $info-color);
|
||||
color: #fff;
|
||||
top: 2.75em;
|
||||
left: 0.75em;
|
||||
width: 2.5em;
|
||||
font-weight: 400;
|
||||
font-variant: small-caps;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
04. Loader CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,97 @@
|
||||
/**=====================
|
||||
Modal CSS start
|
||||
==========================**/
|
||||
|
||||
.modal-toggle-wrapper {
|
||||
padding: 40px;
|
||||
|
||||
@media (max-width:768px) {
|
||||
padding: calc(14px + (40 - 14) * ((100vw - 320px) / (768 - 320)));
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&::placeholder {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
@media (max-width:992px) {
|
||||
width: calc(136px + (200 - 136) * ((100vw - 320px) / (992 - 320)));
|
||||
height: calc(136px + (200 - 136) * ((100vw - 320px) / (992 - 320)));
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
@media (max-width:992px) {
|
||||
width: calc(75px + (100 - 75) * ((100vw - 320px) / (992 - 320)));
|
||||
height: calc(75px + (100 - 75) * ((100vw - 320px) / (992 - 320)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li+li {
|
||||
margin-left: -39px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.large-modal-header,
|
||||
.large-modal-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $dark-color;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-padding-space {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.svg-modal {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
stroke: $secondary-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
.modal-heading {
|
||||
h5 {
|
||||
font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1400 - 320)));
|
||||
}
|
||||
}
|
||||
|
||||
.balance-modal {
|
||||
@media (min-width:750px) and (max-width:1200px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Modal CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,25 @@
|
||||
/**=====================
|
||||
Popover CSS Start
|
||||
==========================**/
|
||||
.popover-header {
|
||||
background-color: $dark-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.popover-main {
|
||||
.btn-showcase {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
button {
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Popover CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,49 @@
|
||||
/**=====================
|
||||
77. Print CSS Start
|
||||
==========================**/
|
||||
@media print {
|
||||
.sidebar-wrapper, .page-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
margin: 0;
|
||||
}
|
||||
.page-wrapper {
|
||||
.page-title {
|
||||
visibility: hidden;
|
||||
}
|
||||
.page-body-wrapper {
|
||||
.page-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.compact-wrapper {
|
||||
.page-body-wrapper {
|
||||
.page-body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
table.fixedHeader-floating {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.invoice-table{
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.invoice{
|
||||
.text-right{
|
||||
input{
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.media {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
77. Print CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,340 @@
|
||||
/**=====================
|
||||
28. Radio CSS Start
|
||||
==========================**/
|
||||
.animate-chk{
|
||||
label{
|
||||
line-height: 1.6;
|
||||
cursor: pointer;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox_animated {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 0 1rem 0 0;
|
||||
&:before {
|
||||
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
|
||||
transform: rotate(-45deg) scale(0, 0);
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0.25rem;
|
||||
top: 0.225rem;
|
||||
z-index: 1;
|
||||
width: 0.75rem;
|
||||
height: 0.375rem;
|
||||
border: 2px solid var(--theme-deafult);
|
||||
border-top-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -0.125rem;
|
||||
left: 0;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
background: $white;
|
||||
border: 2px solid $light-gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:checked:before {
|
||||
transform: rotate(-45deg) scale(1, 1);
|
||||
}
|
||||
}
|
||||
.radio_animated {
|
||||
position: relative;
|
||||
margin: 0 1rem 0 0;
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
|
||||
transform: scale(0, 0);
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.125rem;
|
||||
z-index: 1;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--theme-deafult);
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
left: -0.125rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: $white;
|
||||
border: 2px solid $light-gray;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:checked:before {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox{
|
||||
label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 0;
|
||||
margin-left: -16px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
border-radius: 3px;
|
||||
background-color: $white;
|
||||
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
font-size: 11px;
|
||||
color: $theme-font-color;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
opacity: 0;
|
||||
&:focus{
|
||||
outline-offset: -2px;
|
||||
& + label{
|
||||
&::before{
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
font-family: $font-themify;
|
||||
content: "\e64c";
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
& + label{
|
||||
opacity: 0.65;
|
||||
&::before{
|
||||
background-color: $light-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-circle{
|
||||
label{
|
||||
&::before{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.m-squar{
|
||||
label {
|
||||
&::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.checkbox-circle{
|
||||
label{
|
||||
&::before{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@each $btn-name, $btn-color in (primary, var(--theme-deafult)),
|
||||
(secondary, $secondary-color) ,
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.checkbox-#{$btn-name}{
|
||||
label{
|
||||
&::before{
|
||||
border-color:$btn-color;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
border-color: $btn-color;
|
||||
color: $btn-color;
|
||||
}
|
||||
&::after{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-solid-#{$btn-name}{
|
||||
label{
|
||||
&:before{
|
||||
background-color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
background-color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
color: $white;
|
||||
}
|
||||
&::after{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio-#{$btn-name}{
|
||||
input[type="radio"]
|
||||
{
|
||||
& + label{
|
||||
&::before{
|
||||
border-color: $btn-color;
|
||||
}
|
||||
&::after{
|
||||
background-color: $btn-color;
|
||||
}
|
||||
}
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
border-color: $btn-color;
|
||||
}
|
||||
&::after{
|
||||
background-color: $btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-checkbox-inline{
|
||||
.checkbox{
|
||||
display: inline-block;
|
||||
}
|
||||
.radio{
|
||||
display: inline-block;
|
||||
}
|
||||
label{
|
||||
margin-right:20px;
|
||||
}
|
||||
}
|
||||
.radio{
|
||||
label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
-webkit-transition: border 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out;
|
||||
}
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
background-color: $dark-gray;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-ms-transform: scale(0, 0);
|
||||
-o-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
}
|
||||
}
|
||||
input[type="radio"]{
|
||||
opacity: 0;
|
||||
&:focus{
|
||||
& + label{
|
||||
&::before{
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:checked{
|
||||
& + label{
|
||||
&::after{
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
& + label{
|
||||
opacity: 0.65;
|
||||
&::before{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
28. Radio CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,230 @@
|
||||
/**=====================
|
||||
56. Ribbon CSS Start
|
||||
==========================**/
|
||||
[class*="ribbon-wrapper"]{
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
}
|
||||
.ribbon {
|
||||
padding: 0 20px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
clear: left;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
color: $white;
|
||||
z-index:2;
|
||||
}
|
||||
.ribbon-clip{
|
||||
left: -14px;
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon-vertical-left-wrapper {
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ribbon-vertical-right-wrapper{
|
||||
padding-right: 40px;
|
||||
}
|
||||
.ribbon-wrapper-bottom {
|
||||
padding-bottom: 40px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.ribbon-wrapper-right-bottom {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.ribbon-space-bottom{
|
||||
top:0px;
|
||||
}
|
||||
|
||||
.ribbon-bookmark{
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
border: 15px solid $dark-color;
|
||||
border-right: 10px solid transparent;
|
||||
}
|
||||
}
|
||||
.ribbon-right {
|
||||
left: auto;
|
||||
right: -2px;
|
||||
}
|
||||
.ribbon-clip-right{
|
||||
right: -14px;
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
.ribbon-clip-bottom{
|
||||
left: -14px;
|
||||
bottom:12px;
|
||||
top:auto;
|
||||
&:before{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
.ribbon-clip-bottom-right{
|
||||
right: -14px;
|
||||
left:auto;
|
||||
bottom:12px;
|
||||
top:auto;
|
||||
&:before{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
.ribbon-bookmark.ribbon-right:before {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
border-right: 15px solid $dark-color;
|
||||
border-left: 10px solid transparent;
|
||||
}
|
||||
.ribbon-vertical-left {
|
||||
clear: none;
|
||||
padding: 0 5px;
|
||||
height: 70px;
|
||||
width: 30px;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
left: 12px;
|
||||
top: -2px;
|
||||
}
|
||||
.ribbon-vertical-right {
|
||||
clear: none;
|
||||
padding: 0 5px;
|
||||
height: 70px;
|
||||
width: 30px;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
top: -2px;
|
||||
left: auto;
|
||||
right: 12px;
|
||||
}
|
||||
.ribbon-bookmark {
|
||||
&.ribbon-vertical-left:before, &.ribbon-vertical-right:before {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: -14px;
|
||||
border-right: 15px solid $dark-color;
|
||||
border-bottom: 10px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@each $ribbon-name, $ribbon-color in (primary, $primary-color),
|
||||
(secondary, $secondary-color) ,
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.ribbon-#{$ribbon-name}{
|
||||
background: $ribbon-color;
|
||||
}
|
||||
.ribbon-#{$ribbon-name} {
|
||||
background: $ribbon-color;
|
||||
}
|
||||
.ribbon-bookmark {
|
||||
&.ribbon-#{$ribbon-name}:before {
|
||||
border-color: $ribbon-color;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
&.ribbon-right.ribbon-#{$ribbon-name}:before {
|
||||
border-right-color: $ribbon-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.ribbon-vertical-left.ribbon-#{$ribbon-name}:before, &.ribbon-vertical-right.ribbon-#{$ribbon-name}:before {
|
||||
border-right-color: $ribbon-color;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-corner {
|
||||
&:before {
|
||||
border-top-color: $ribbon-color;
|
||||
border-left-color: $ribbon-color;
|
||||
}
|
||||
&.ribbon-right:before {
|
||||
border-right-color: $ribbon-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.ribbon-bottom:before {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: $ribbon-color;
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip{
|
||||
&:before{
|
||||
border-color: transparent;
|
||||
border-top-color: darken($ribbon-color, 10%);
|
||||
border-right-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip-right{
|
||||
&:before{
|
||||
border-right-color: transparent;
|
||||
border-top-color: darken($ribbon-color, 10%);
|
||||
border-left-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip-bottom{
|
||||
&:before{
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: darken($ribbon-color, 10%);
|
||||
border-right-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip-bottom-right{
|
||||
&:before{
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: darken($ribbon-color, 10%);
|
||||
border-right-color: transparent;
|
||||
border-left-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
56. Ribbon CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,27 @@
|
||||
/**=====================
|
||||
Scrollbar CSS Start
|
||||
==========================**/
|
||||
[data-simplebar] {
|
||||
position: unset;
|
||||
}
|
||||
.simplebar-mask {
|
||||
top: 100px;
|
||||
}
|
||||
.simplebar-track {
|
||||
right: -2px;
|
||||
&.simplebar-vertical {
|
||||
top: 100px;
|
||||
width: 10px;
|
||||
}
|
||||
&.simplebar-horizontal {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
.simplebar-scrollbar {
|
||||
&:before {
|
||||
background: rgba($primary-color, 0.2);
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
Scrollbar CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,372 @@
|
||||
/**=====================
|
||||
18. Switch CSS Start
|
||||
==========================**/
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+.switch-state {
|
||||
background-color: var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus+.switch-state {
|
||||
box-shadow: 0 0 1px var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state {
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $light-color;
|
||||
transition: .4s;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: $white;
|
||||
transition: .4s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-state {
|
||||
.switch-state {
|
||||
&:after {
|
||||
content: "\efb8";
|
||||
font-family: $font-ICO;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
color: $dark-color;
|
||||
transition: .4s;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:after {
|
||||
content: "\efad";
|
||||
left: 36px;
|
||||
opacity: 1;
|
||||
transition: .4s;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-lg {
|
||||
.switch {
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
|
||||
.switch-state {
|
||||
&:before {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
left: 7px;
|
||||
bottom: 5px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-lg.icon-state {
|
||||
.switch {
|
||||
.switch-state {
|
||||
&:after {
|
||||
left: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:after {
|
||||
left: 47px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: translateX(32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-sm {
|
||||
&.icon-state {
|
||||
.switch {
|
||||
.switch-state {
|
||||
&:after {
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:after {
|
||||
left: 13px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
|
||||
.switch-state {
|
||||
&:before {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:before {
|
||||
left: -13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-outline {
|
||||
.switch-state {
|
||||
background-color: $white;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
transition: .4s;
|
||||
|
||||
&:before {
|
||||
background-color: $light-color;
|
||||
bottom: 3px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-outline {
|
||||
.switch {
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+.switch-state {
|
||||
background-color: $transparent-color;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-deafult);
|
||||
bottom: 3px;
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
&:after {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-outline {
|
||||
.switch-state.bg-primary {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-primary {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-dark {
|
||||
border: 1px solid $dark-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-dark {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $dark-color;
|
||||
|
||||
&:before {
|
||||
background-color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-warning {
|
||||
border: 1px solid $warning-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-warning {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $warning-color;
|
||||
|
||||
&:before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-success {
|
||||
border: 1px solid $success-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-success {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $success-color;
|
||||
|
||||
&:before {
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-info {
|
||||
border: 1px solid $info-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-info {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $info-color;
|
||||
|
||||
&:before {
|
||||
background-color: $info-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-danger {
|
||||
border: 1px solid $danger-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-danger {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $danger-color;
|
||||
|
||||
&:before {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-primary {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-primary {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-secondary {
|
||||
border: 1px solid var(--theme-secondary);
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-secondary {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid var(--theme-secondary);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-showcase {
|
||||
margin-bottom: -8px;
|
||||
|
||||
.media {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.form-check {
|
||||
.form-check-input {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-switch {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: var(--theme-deafult);
|
||||
border-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
18. Switch CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,494 @@
|
||||
/**=====================
|
||||
Tabs CSS Start
|
||||
==========================**/
|
||||
.nav-pills {
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
$nav-name: theme,
|
||||
primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
info,
|
||||
light,
|
||||
dark,
|
||||
warning;
|
||||
$nav-color: var(--theme-deafult),
|
||||
var(--theme-deafult),
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color,
|
||||
$warning-color;
|
||||
|
||||
@each $var in $nav-name {
|
||||
$i: index($label-name, $var);
|
||||
|
||||
.nav-#{$var},
|
||||
.nav-pills.nav-#{$var} {
|
||||
.nav-link {
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: nth($nav-color, $i);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs.nav-bottom {
|
||||
.nav-item {
|
||||
|
||||
.nav-link.active,
|
||||
.nav-link.focus,
|
||||
.nav-link.hover {
|
||||
border-color: $white #dee2e6 #dee2e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
~.nav-tabs {
|
||||
&.border-tab {
|
||||
margin-bottom: 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
color: $dark-color;
|
||||
text-align: center;
|
||||
padding: 10px 25px;
|
||||
border: none;
|
||||
border-bottom: none;
|
||||
transition: 0.3s;
|
||||
|
||||
@media (min-width: 576px) and (max-width: 1920px) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-left {
|
||||
.nav-link {
|
||||
transition: all 0.3s ease;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: transparent;
|
||||
border-left-color: var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
border-radius: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-right {
|
||||
.nav-link {
|
||||
border-right: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
color: $dark-color;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: transparent;
|
||||
border-right-color: var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
border-radius: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
$m-nav-name: theme,
|
||||
primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
info,
|
||||
light,
|
||||
dark,
|
||||
warning;
|
||||
$nav-color: var(--theme-deafult),
|
||||
var(--theme-deafult),
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color,
|
||||
$warning-color;
|
||||
|
||||
@each $var in $m-nav-name {
|
||||
$i: index($label-name, $var);
|
||||
|
||||
.border-tab.nav-#{$var} {
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show,
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
color: nth($nav-color, $i);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
transition: 0.3s;
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus {
|
||||
border-bottom: 2px solid nth($nav-color, $i);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-left.nav-#{$var} {
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
border-left-color: nth($nav-color, $i);
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-right.nav-#{$var} {
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
border-right-color: nth($nav-color, $i);
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabbed-card {
|
||||
ul {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
top: 23px;
|
||||
border-bottom: none;
|
||||
|
||||
&.border-tab {
|
||||
&.nav-tabs {
|
||||
top: 12px;
|
||||
|
||||
.nav-item {
|
||||
float: right;
|
||||
|
||||
.nav-link {
|
||||
padding: 23px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-space {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width:576px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tab-img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.navlink-title {
|
||||
background-color: unset;
|
||||
padding: 8px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.simple-wrapper {
|
||||
.dropdown-collection {
|
||||
.dropdown-item {
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $gray-60 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-wrapper {
|
||||
.blog-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.designer-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width:1400px) {
|
||||
gap: calc(14px + (35 - 14) * ((100vw - 320px) / (1400 - 320)));
|
||||
}
|
||||
|
||||
.designer-profile {
|
||||
display: inline-block;
|
||||
|
||||
.designer-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
|
||||
.designer-img {
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.designer-content {
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-border {
|
||||
color: $black;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ico-color {
|
||||
color: $warning-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-inbox {
|
||||
.header-inbox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $light-text;
|
||||
padding-bottom: 8px;
|
||||
|
||||
.header-left-inbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.inbox-img {
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right-inbox {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 560px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-inbox {
|
||||
.body-h-wrapper {
|
||||
display: flex;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-space {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
$tabs-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
dark;
|
||||
|
||||
$tab-color : $primary-color,
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$warning-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color;
|
||||
|
||||
@each $var in $tabs-name {
|
||||
$i: index($tabs-name, $var);
|
||||
|
||||
#bottom-tab {
|
||||
.nav-border {
|
||||
&.tab-#{$var} {
|
||||
&:hover {
|
||||
color: nth($tab-color, $i);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: nth($tab-color, $i);
|
||||
border-bottom: 2px solid nth($tab-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sideline-tab {
|
||||
.nav-effect {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
width: 80%;
|
||||
border-bottom: 1px solid;
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-responsive-side {
|
||||
.border-tab {
|
||||
&.nav-secondary {
|
||||
&.nav-left {
|
||||
.nav-link {
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: unset;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pills-blogger {
|
||||
@media (max-width: 576px) {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.material-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width:576px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Tabs CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,326 @@
|
||||
/**=====================
|
||||
39. Table CSS Start
|
||||
==========================**/
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.pills-component {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: $table-b-margin;
|
||||
|
||||
> :not(:last-child) {
|
||||
> :last-child {
|
||||
>* {
|
||||
border-bottom-color: $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-padding;
|
||||
}
|
||||
|
||||
&.table-primary {
|
||||
th {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
thead.bg-primary {
|
||||
tr {
|
||||
th {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: $table-heading-color;
|
||||
font-weight: 500;
|
||||
|
||||
&.f-light {
|
||||
color: var(--chart-text-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: $table-row-color;
|
||||
}
|
||||
|
||||
[class*='bg-'] {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
font-weight: $table-footer-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
th {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.table-inverse {
|
||||
color: $white;
|
||||
background-color: $table-inverse-bg-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table[class*='bg-'] {
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.table-hover {
|
||||
>tbody {
|
||||
>tr:hover {
|
||||
--bs-table-accent-bg: #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
}
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
td {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table border-bottom removes in particular typography page
|
||||
.typography-table {
|
||||
tr {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-double {
|
||||
border-left: 4px double #dee2e6;
|
||||
border-right: 4px double #dee2e6;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-style: double;
|
||||
border-width: 4px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dotted {
|
||||
border-left: 2px dotted #dee2e6;
|
||||
border-right: 2px dotted #dee2e6;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-style: dotted !important;
|
||||
border-width: 2px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dashed {
|
||||
border-left: 2px dashed #dee2e6;
|
||||
border-right: 2px dashed #dee2e6;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-style: dashed !important;
|
||||
border-width: 2px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//Sizing class
|
||||
.table-xl {
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: $table-xl-padding;
|
||||
font-size: $table-xl-font;
|
||||
}
|
||||
}
|
||||
|
||||
.table-lg {
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: $table-lg-padding;
|
||||
font-size: $table-lg-font;
|
||||
}
|
||||
}
|
||||
|
||||
.table-de {
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: $table-de-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sm {
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-sm-padding;
|
||||
font-size: $table-sm-font;
|
||||
}
|
||||
}
|
||||
|
||||
.table-xs {
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-xs-padding;
|
||||
font-size: $table-xs-font;
|
||||
}
|
||||
}
|
||||
|
||||
//Table Border
|
||||
.table-border-horizontal {
|
||||
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
border-top: 1px solid $horizontal-border-color;
|
||||
padding: $horizontal-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.table-border-vertical {
|
||||
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
border-top: 0;
|
||||
border-right: 1px solid $horizontal-border-color;
|
||||
}
|
||||
|
||||
tr {
|
||||
td {
|
||||
border-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordernone {
|
||||
td {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-s-tb {
|
||||
padding: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
tbody {
|
||||
tr {
|
||||
&:nth-of-type(odd) {
|
||||
background-color: var(--light-background);
|
||||
--bs-table-accent-bg: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: rgba($light-text, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
39.Table CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,62 @@
|
||||
/**=====================
|
||||
20. Touchspin CSS Start
|
||||
==========================**/
|
||||
.bootstrap-touchspin {
|
||||
input{
|
||||
&.touchspin {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.input-group .btn{
|
||||
padding: 0.5rem 1.75rem;
|
||||
}
|
||||
.touchspin-vertical-tab {
|
||||
.input-group {
|
||||
.input-group-btn-vertical {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
.bootstrap-touchspin-down {
|
||||
margin-top: -2px;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
> .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 9px;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group{
|
||||
font-family: $font-rubik, $font-serif;
|
||||
.btn{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
.dropdown-basic{
|
||||
.dropdown{
|
||||
.dropbtn{
|
||||
padding: 9px 30px;
|
||||
}
|
||||
.dropdown-content{
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
20. Touchspin CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,140 @@
|
||||
/**=====================
|
||||
54. Tour CSS Start
|
||||
==========================**/
|
||||
|
||||
.introjs-helperLayer {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.introjs-tooltipReferenceLayer {
|
||||
background-color: transparent;
|
||||
}
|
||||
.introjs-helperNumberLayer {
|
||||
color: $white;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
background: $danger-color;
|
||||
background: linear-gradient(to bottom, $tour-color 0%, $tour-color 100%);
|
||||
border: 3px solid $white;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.introjs-arrow {
|
||||
border: 12px solid $white;
|
||||
&.top {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $tour-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.top-right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $tour-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.top-middle {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $tour-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: $tour-color;
|
||||
}
|
||||
&.right-bottom {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: $tour-color;
|
||||
}
|
||||
&.bottom {
|
||||
border-top-color: $tour-color;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.left {
|
||||
border-top-color: transparent;
|
||||
border-right-color: $tour-color;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.left-bottom {
|
||||
border-top-color: transparent;
|
||||
border-right-color: $tour-color;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
.introjs-tooltip {
|
||||
background-color: $tour-color;
|
||||
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
|
||||
color: $white;
|
||||
border-color: $tour-color;
|
||||
}
|
||||
.introjs-button {
|
||||
border: 1px solid $light-semi-gray;
|
||||
text-shadow: 1px 1px 0 $white;
|
||||
color: $theme-body-font-color !important;
|
||||
background-color: $white;
|
||||
background-image: linear-gradient($white, $white);
|
||||
&:hover {
|
||||
border-color: $light-semi-gray;
|
||||
}
|
||||
&:focus, &:active {
|
||||
background-image: linear-gradient($light-gray, $light-semi-gray);
|
||||
}
|
||||
}
|
||||
.introjs-skipbutton {
|
||||
color: $tour-color;
|
||||
}
|
||||
.introjs-prevbutton {
|
||||
&.introjs-fullbutton {
|
||||
border: 1px solid $light-semi-gray;
|
||||
}
|
||||
}
|
||||
.introjs-disabled {
|
||||
color: $tour-color;
|
||||
border-color: $light-semi-gray;
|
||||
&:hover, &:focus {
|
||||
color: $tour-color;
|
||||
border-color: $light-semi-gray;
|
||||
}
|
||||
}
|
||||
.introjs-bullets {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
background: $light-gray;
|
||||
&:hover {
|
||||
background: $white;
|
||||
}
|
||||
&.active {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.introjs-progress {
|
||||
background-color: $light-color;
|
||||
}
|
||||
.introjs-progressbar {
|
||||
background-color: $tour-color;
|
||||
}
|
||||
.introjs-hint:hover > .introjs-hint-pulse {
|
||||
border: 5px solid rgba(60, 60, 60, 0.57);
|
||||
}
|
||||
.introjs-hint-pulse {
|
||||
border: 5px solid rgba(60, 60, 60, 0.27);
|
||||
background-color: rgba(136, 136, 136, 0.24);
|
||||
}
|
||||
.introjs-hint-dot {
|
||||
border: 10px solid rgba(146, 146, 146, 0.36);
|
||||
}
|
||||
/**=====================
|
||||
54. Tour CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,32 @@
|
||||
/**=====================
|
||||
50. Tree CSS Start
|
||||
==========================**/
|
||||
.jstree-default{
|
||||
.jstree-clicked{
|
||||
background-color: lighten($primary-color , 42%);
|
||||
box-shadow: none;
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
.vakata-context, .vakata-context ul{
|
||||
background-color: $white;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px 2px $light-semi-gray;
|
||||
li{
|
||||
a{
|
||||
.vakata-contextmenu-sep{
|
||||
display: none;
|
||||
}
|
||||
&:hover{
|
||||
background-color: lighten($primary-color , 45%);
|
||||
box-shadow: None;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vakata-context-separator{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
50. Tree CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,213 @@
|
||||
/**=====================
|
||||
typahead-search CSS Start
|
||||
==========================**/
|
||||
.Typeahead {
|
||||
width: 100%;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.tt-hint {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-cf {
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.u-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.u-posRelative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Typeahead-spinner {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 18px;
|
||||
display: none;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
|
||||
.ProfileCard-avatar {
|
||||
svg {
|
||||
height: 18px;
|
||||
vertical-align: bottom;
|
||||
|
||||
path {
|
||||
color: #7e7c7c !important;
|
||||
}
|
||||
|
||||
polygon {
|
||||
color: #7e7c7c !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Typeahead-hint {
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
border: 1px solid #024e6a;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #ccd6dd;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.Typeahead-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
padding: 15px;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: $white;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.Typeahead-menu.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Typeahead-selectable {
|
||||
cursor: pointer;
|
||||
|
||||
+ {
|
||||
.Typeahead-selectable {
|
||||
border-top: 1px solid #ccd6dd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProfileCard {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border: 1px solid $gray-60 !important;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
&:hover {
|
||||
.ProfileCard-avatar {
|
||||
border-color: #f5f8fa;
|
||||
}
|
||||
|
||||
color: #414345;
|
||||
background: #f8f8f8;
|
||||
|
||||
.ProfileCard-screenName {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.ProfileCard-stat-label {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProfileCard-avatar {
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ProfileCard-details {
|
||||
padding-left: 35px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ProfileCard-realName {
|
||||
display: inline-block;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.ProfileCard-screenName {
|
||||
display: inline-block;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.ProfileCard-description {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.ProfileCard-stats {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ProfileCard-stat {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
+ {
|
||||
.ProfileCard-stat {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProfileCard-stat-label {
|
||||
color: $dark-gray;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ProfileCard.is-active {
|
||||
color: $white;
|
||||
background: var(--theme-deafult);
|
||||
|
||||
.ProfileCard-screenName {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.ProfileCard-stat-label {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.EmptyMessage {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Typeahead-spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/**=====================
|
||||
typahead-search CSS Ends
|
||||
==========================**/
|
||||
Reference in New Issue
Block a user