integarting admin dashboard
This commit is contained in:
UronShrestha
11
public/Dashboard/scss/common/dark/_background.scss
Normal file
11
public/Dashboard/scss/common/dark/_background.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@each $color, $value in $social-colors {
|
||||
.bg-#{$color} {
|
||||
background: social-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-gradient-colors {
|
||||
.bg-gradient-#{$color} {
|
||||
background: $value;
|
||||
}
|
||||
}
|
||||
62
public/Dashboard/scss/common/dark/_dashboard.scss
Normal file
62
public/Dashboard/scss/common/dark/_dashboard.scss
Normal file
@ -0,0 +1,62 @@
|
||||
.card-people {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
color: $black;
|
||||
img {
|
||||
border-radius:20px;
|
||||
width:100%;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
.weather-info {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 24px;
|
||||
sup {
|
||||
font-size: 18px;
|
||||
}
|
||||
.location {
|
||||
font-size: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fs-30 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.chartjs-legend {
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
li {
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
span {
|
||||
width: 1.562rem ;
|
||||
height: 0.312rem;
|
||||
margin-right: .4rem;
|
||||
display: inline-block;
|
||||
font-size: $default-font-size;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rtl & {
|
||||
ul {
|
||||
padding-right: 0;
|
||||
li {
|
||||
margin-right: 0;
|
||||
margin-left: 8%;
|
||||
span {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.analytics-legend {
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
404
public/Dashboard/scss/common/dark/_demo.scss
Normal file
404
public/Dashboard/scss/common/dark/_demo.scss
Normal file
@ -0,0 +1,404 @@
|
||||
/* Demo Styles */
|
||||
// Add spacing to Boostrap components for demo purpose
|
||||
.template-demo {
|
||||
> .btn {
|
||||
@extend .mt-3;
|
||||
@extend .mr-2;
|
||||
}
|
||||
|
||||
.slider-wrap {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
> .btn-toolbar {
|
||||
@extend .mt-3;
|
||||
@extend .mr-3;
|
||||
}
|
||||
|
||||
> .btn-group,
|
||||
> .btn-group-vertical {
|
||||
@extend .mt-2;
|
||||
@extend .mr-2;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
@extend .mt-2;
|
||||
}
|
||||
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
> h5,
|
||||
> h6,
|
||||
> h1 {
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.ul-slider {
|
||||
&.noUi-horizontal {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
&.noUi-vertical {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .dropdown {
|
||||
display: inline-block;
|
||||
@extend .mr-2;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
.breadcrumb {
|
||||
margin-bottom: 1.375rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.breadcrumb {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editable-form {
|
||||
> .form-group {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 0.8rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.circle-progress-block {
|
||||
@extend .mb-3;
|
||||
@extend .px-2;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-modal {
|
||||
position: static;
|
||||
display: block;
|
||||
|
||||
.modal-dialog {
|
||||
@extend .mt-0;
|
||||
|
||||
&.modal-lg {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader-demo-box {
|
||||
@extend .border;
|
||||
@extend .border-secondary;
|
||||
@extend .rounded;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@extend .d-flex;
|
||||
@extend .align-items-center;
|
||||
}
|
||||
|
||||
.dropdown-menu-static-demo {
|
||||
height: 250px;
|
||||
margin-bottom: 20px;
|
||||
.dropdown-menu {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-legend {
|
||||
ul {
|
||||
li {
|
||||
list-style-type: none;
|
||||
color: $text-muted;
|
||||
font-size: .75rem;
|
||||
.legend-dots {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: .5rem;
|
||||
.rtl & {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.legend-horizontal {
|
||||
@include display-flex;
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 1.5rem;
|
||||
.rtl & {
|
||||
margin-right: auto;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.legend-top-right {
|
||||
ul {
|
||||
float: right;
|
||||
.rtl & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.legend-vertical {
|
||||
ul {
|
||||
li {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-chart {
|
||||
height: 300px;
|
||||
@media (max-width: 767px) {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.chartjs-legend {
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
@include display-flex;
|
||||
@include flex-direction(column);
|
||||
@include flex-wrap(wrap);
|
||||
li {
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
span {
|
||||
width: 2.25rem;
|
||||
height: 1rem;
|
||||
margin-right: .4rem;
|
||||
display: inline-block;
|
||||
font-size: $default-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rtl & {
|
||||
ul {
|
||||
padding-right: 0;
|
||||
li {
|
||||
margin-right: 0;
|
||||
margin-left: 8%;
|
||||
span {
|
||||
margin-right: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.analytics-legend {
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documentation {
|
||||
padding-top: 0;
|
||||
max-width: 100%;
|
||||
.content-wrapper {
|
||||
padding-top: 0;
|
||||
min-height: calc(100vh - #{$footer-height});
|
||||
}
|
||||
}
|
||||
.doc-table-contents,
|
||||
.doc-header {
|
||||
position: fixed;
|
||||
}
|
||||
.doc-header {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
z-index: 10;
|
||||
background: $content-bg;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
padding-top: 157px;
|
||||
}
|
||||
|
||||
.doc-table-contents {
|
||||
overflow: auto;
|
||||
max-height: calc(100% - 157px);
|
||||
ul {
|
||||
li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc-credits {
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-vector-map {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.sparkline-demo-chart {
|
||||
canvas{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.performance-overview-carousel {
|
||||
.carousel-inner {
|
||||
.item {
|
||||
&::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 60px;
|
||||
background: theme-color(info);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25%;
|
||||
@media(max-width: 767px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
&::before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
&.icon-a {
|
||||
&::before {
|
||||
content: url('../../images/dashboard/shape-1.svg');
|
||||
}
|
||||
}
|
||||
&.icon-b {
|
||||
&::before {
|
||||
content: url('../../images/dashboard/shape-1.svg');
|
||||
}
|
||||
}
|
||||
&.icon-c {
|
||||
&::before {
|
||||
content: url('../../images/dashboard/shape-3.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next{
|
||||
top: 1.3rem;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
background: #3698fc;
|
||||
border-radius: 0.375rem;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: auto;
|
||||
right: 4rem;
|
||||
.carousel-control-prev-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
font-family: "themify";
|
||||
content: '\e64a';
|
||||
font-size: .875rem;
|
||||
color: $white;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
.carousel-control-next {
|
||||
left: auto;
|
||||
right: 1.681rem;
|
||||
.carousel-control-next-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
font-family: "themify";
|
||||
content: '\e649';
|
||||
font-size: .875rem;
|
||||
color: $white;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-report-carousel {
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next{
|
||||
top: 1.3rem;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.375rem;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: auto;
|
||||
right: 4rem;
|
||||
.carousel-control-prev-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
font-family: "themify";
|
||||
content: '\e64a';
|
||||
font-size: .875rem;
|
||||
color: #6c7383;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
.carousel-control-next {
|
||||
left: auto;
|
||||
right: 1.681rem;
|
||||
.carousel-control-next-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
font-family: "themify";
|
||||
content: '\e649';
|
||||
font-size: .875rem;
|
||||
color: #6c7383;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.charts-data {
|
||||
.progress {
|
||||
background: transparent;
|
||||
.progress-bar {
|
||||
border-radius: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
public/Dashboard/scss/common/dark/_fonts.scss
Normal file
45
public/Dashboard/scss/common/dark/_fonts.scss
Normal file
@ -0,0 +1,45 @@
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url('../../fonts/Nunito/Nunito-Light.eot');
|
||||
src: url('../../fonts/Nunito/Nunito-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../fonts/Nunito/Nunito-Light.woff2') format('woff2'),
|
||||
url('../../fonts/Nunito/Nunito-Light.woff') format('woff'),
|
||||
url('../../fonts/Nunito/Nunito-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url('../../fonts/Nunito/Nunito-Bold.eot');
|
||||
src: url('../../fonts/Nunito/Nunito-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../fonts/Nunito/Nunito-Bold.woff2') format('woff2'),
|
||||
url('../../fonts/Nunito/Nunito-Bold.woff') format('woff'),
|
||||
url('../../fonts/Nunito/Nunito-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url('../../fonts/Nunito/Nunito-SemiBold.eot');
|
||||
src: url('../../fonts/Nunito/Nunito-SemiBold.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../fonts/Nunito/Nunito-SemiBold.woff2') format('woff2'),
|
||||
url('../../fonts/Nunito/Nunito-SemiBold.woff') format('woff'),
|
||||
url('../../fonts/Nunito/Nunito-SemiBold.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
src: url('../../fonts/Nunito/Nunito-Regular.eot');
|
||||
src: url('../../fonts/Nunito/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../fonts/Nunito/Nunito-Regular.woff2') format('woff2'),
|
||||
url('../../fonts/Nunito/Nunito-Regular.woff') format('woff'),
|
||||
url('../../fonts/Nunito/Nunito-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
23
public/Dashboard/scss/common/dark/_footer.scss
Normal file
23
public/Dashboard/scss/common/dark/_footer.scss
Normal file
@ -0,0 +1,23 @@
|
||||
/* Footer */
|
||||
|
||||
.footer {
|
||||
background: $footer-bg;
|
||||
color: $footer-color;
|
||||
padding: 30px 2.45rem;
|
||||
transition: all $action-transition-duration $action-transition-timing-function;
|
||||
-moz-transition: all $action-transition-duration $action-transition-timing-function;
|
||||
-webkit-transition: all $action-transition-duration $action-transition-timing-function;
|
||||
-ms-transition: all $action-transition-duration $action-transition-timing-function;
|
||||
font-size: calc(#{$default-font-size} - 0.05rem);
|
||||
font-family: $type1;
|
||||
font-weight: 400;
|
||||
border-top: 1px solid rgba($black, .06);
|
||||
a {
|
||||
color: theme-color(primary);
|
||||
font-size: inherit;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
4
public/Dashboard/scss/common/dark/_functions.scss
Normal file
4
public/Dashboard/scss/common/dark/_functions.scss
Normal file
@ -0,0 +1,4 @@
|
||||
// Functions
|
||||
@function social-color($key: "twitter") {
|
||||
@return map-get($social-colors, $key);
|
||||
}
|
||||
31
public/Dashboard/scss/common/dark/_misc.scss
Normal file
31
public/Dashboard/scss/common/dark/_misc.scss
Normal file
@ -0,0 +1,31 @@
|
||||
/* Miscellanoeous */
|
||||
body,
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
padding-right: 0 !important; // resets padding right added by Bootstrap modal
|
||||
}
|
||||
|
||||
*:-moz-full-screen,
|
||||
*:-webkit-full-screen,
|
||||
*:fullscreen *:-ms-fullscreen {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.container-scroller {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: color(gray-lighter);
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 5px;
|
||||
color: theme-color(danger);
|
||||
font-family: $type1;
|
||||
font-weight: 300;
|
||||
font-size: $default-font-size;
|
||||
border-radius: 4px;
|
||||
}
|
||||
131
public/Dashboard/scss/common/dark/_reset.scss
Normal file
131
public/Dashboard/scss/common/dark/_reset.scss
Normal file
@ -0,0 +1,131 @@
|
||||
/* Reset Styles */
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&,
|
||||
&:focus {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
div,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
span {
|
||||
text-shadow: none
|
||||
}
|
||||
|
||||
[type=button]:focus,
|
||||
a:active,
|
||||
a:focus,
|
||||
a:visited,
|
||||
button::-moz-focus-inner,
|
||||
input[type=reset]::-moz-focus-inner,
|
||||
input[type=button]::-moz-focus-inner,
|
||||
input[type=submit]::-moz-focus-inner,
|
||||
input[type=file]>input[type=button]::-moz-focus-inner,
|
||||
select::-moz-focus-inner {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
input,
|
||||
.form-control:focus,
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus,
|
||||
button:focus {
|
||||
outline: none;
|
||||
outline-width: 0;
|
||||
outline-color: transparent;
|
||||
box-shadow: none;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-group.open .dropdown-toggle,
|
||||
.btn:active,
|
||||
.btn:focus,
|
||||
.btn:hover,
|
||||
.btn:visited,
|
||||
a,
|
||||
a:active,
|
||||
a:checked,
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:visited,
|
||||
body,
|
||||
button,
|
||||
button:active,
|
||||
button:hover,
|
||||
button:visited,
|
||||
div,
|
||||
input,
|
||||
input:active,
|
||||
input:focus,
|
||||
input:hover,
|
||||
input:visited,
|
||||
select,
|
||||
select:active,
|
||||
select:focus,
|
||||
select:visited,
|
||||
textarea,
|
||||
textarea:active,
|
||||
textarea:focus,
|
||||
textarea:hover,
|
||||
textarea:visited {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.btn.active.focus,
|
||||
.btn.active:focus,
|
||||
.btn.focus,
|
||||
.btn:active.focus,
|
||||
.btn:active:focus,
|
||||
.btn:focus,
|
||||
button,
|
||||
button:active,
|
||||
button:checked,
|
||||
button:focus,
|
||||
button:hover,
|
||||
button:visited {
|
||||
outline: 0;
|
||||
outline-offset: 0
|
||||
}
|
||||
|
||||
.bootstrap-select .dropdown-toggle:focus {
|
||||
outline: 0 ;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu>li>a:active,
|
||||
.dropdown-menu>li>a:focus,
|
||||
.dropdown-menu>li>a:hover,
|
||||
.dropdown-menu>li>a:visited {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
input:focus {
|
||||
border-color: transparent;
|
||||
outline: none
|
||||
}
|
||||
128
public/Dashboard/scss/common/dark/_typography.scss
Normal file
128
public/Dashboard/scss/common/dark/_typography.scss
Normal file
@ -0,0 +1,128 @@
|
||||
/* Typography */
|
||||
|
||||
body {
|
||||
font-size: 1rem;
|
||||
font-family: $type1;
|
||||
font-weight: initial;
|
||||
line-height: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
p {
|
||||
font-size: $default-font-size;
|
||||
margin-bottom: .5rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 3.125rem;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 2.187rem;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 1.525rem;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: .9375rem;
|
||||
}
|
||||
.display-1 {
|
||||
font-size: 3.75rem;
|
||||
@media (max-width: 991px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
.display-2 {
|
||||
font-size: 3.125rem;
|
||||
@media (max-width: 991px) {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.display-3 {
|
||||
font-size: 2.5rem;
|
||||
@media (max-width: 991px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
.display-4 {
|
||||
font-size: 1.875rem;
|
||||
@media (max-width: 991px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
.display-5 {
|
||||
font-size: 1.25rem;
|
||||
@media (max-width: 991px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.blockquote {
|
||||
padding: 1.25rem;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
address {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//blockqoute color variations
|
||||
@each $color, $value in $theme-colors {
|
||||
.blockquote-#{$color} {
|
||||
@include blockquote($value);
|
||||
}
|
||||
}
|
||||
.error-page {
|
||||
h1 {
|
||||
font-size: 12rem;
|
||||
@media (max-width: 991px) {
|
||||
font-size: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Social Color
|
||||
@each $color, $value in $social-colors {
|
||||
.text-#{$color} {
|
||||
color: social-color($color);
|
||||
}
|
||||
}
|
||||
|
||||
// Page header
|
||||
.page-header {
|
||||
margin-bottom: 2.5rem;
|
||||
.page-title {
|
||||
margin-bottom: 0;
|
||||
line-height: .85;
|
||||
}
|
||||
}
|
||||
|
||||
.font-weight-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
104
public/Dashboard/scss/common/dark/_utilities.scss
Normal file
104
public/Dashboard/scss/common/dark/_utilities.scss
Normal file
@ -0,0 +1,104 @@
|
||||
/* Utilities */
|
||||
|
||||
.grid-margin {
|
||||
margin-bottom: $card-spacing-y;
|
||||
}
|
||||
.grid-margin-sm-0 {
|
||||
@media (min-width: 576px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.grid-margin-md-0 {
|
||||
@media (min-width: 768px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.grid-margin-lg-0 {
|
||||
@media (min-width: 992px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.grid-margin-xl-0 {
|
||||
@media (min-width: 1200px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.img-lg {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
}
|
||||
.img-sm {
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
.img-xs {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
.img-ss {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.stretch-card {
|
||||
@include display-flex;
|
||||
@include align-items(stretch);
|
||||
@include justify-content(stretch);
|
||||
>.card{
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.border-right-sm {
|
||||
@media (min-width: 576px) {
|
||||
border-right: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
.border-right-md {
|
||||
@media (min-width: 768px) {
|
||||
border-right: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
.border-right-lg {
|
||||
@media (min-width: 992px) {
|
||||
border-right: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.border-left-sm {
|
||||
@media (min-width: 576px) {
|
||||
border-left: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
.border-left-md {
|
||||
@media (min-width: 768px) {
|
||||
border-left: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
.border-left-lg {
|
||||
@media (min-width: 992px) {
|
||||
border-left: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.hover-cursor {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
330
public/Dashboard/scss/common/dark/_variables.scss
Normal file
330
public/Dashboard/scss/common/dark/_variables.scss
Normal file
@ -0,0 +1,330 @@
|
||||
|
||||
////////// COLOR SYSTEM //////////
|
||||
|
||||
$blue: #5E50F9;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6a008a;
|
||||
$pink: #E91E63;
|
||||
$red: #f96868;
|
||||
$orange: #f2a654;
|
||||
$yellow: #f6e84e;
|
||||
$green: #46c35f;
|
||||
$teal: #58d8a3;
|
||||
$cyan: #57c7d4;
|
||||
$black: #000;
|
||||
$white: #ffffff;
|
||||
$white-smoke: #f2f7f8;
|
||||
$violet: #41478a;
|
||||
$darkslategray : #2e383e;
|
||||
$dodger-blue : #3498db;
|
||||
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: #434a54,
|
||||
gray-light: #aab2bd,
|
||||
gray-lighter: #e8eff4,
|
||||
gray-lightest: #e6e9ed,
|
||||
gray-dark: #0f1531,
|
||||
black: #000000
|
||||
);
|
||||
|
||||
|
||||
$theme-colors: (
|
||||
primary: #4B49AC,
|
||||
secondary: #a3a4a5,
|
||||
success: #57B657,
|
||||
info: #248AFD,
|
||||
warning: #FFC100,
|
||||
danger: #FF4747,
|
||||
light: #f8f9fa,
|
||||
dark: #282f3a
|
||||
);
|
||||
|
||||
$theme-gradient-colors: (
|
||||
primary: linear-gradient(230deg, #759bff, #843cf6),
|
||||
secondary: linear-gradient(to right, #e7ebf0, #868e96),
|
||||
success: linear-gradient(45deg, #7bffce, #30c93e),
|
||||
info: linear-gradient(to bottom, #0e4cfd, #6a8eff),
|
||||
warning: linear-gradient(135deg, #ffc480, #ff763b),
|
||||
danger: linear-gradient(316deg, #fc5286, #fbaaa2),
|
||||
light: linear-gradient(to right, #cfd9df 0%, #e2ebf0 100%),
|
||||
dark: linear-gradient(to right, #7d7979 0%, #000000 100%)
|
||||
);
|
||||
|
||||
|
||||
////////// COLOR SYSTEM //////////
|
||||
|
||||
////////// COLOR VARIABLES //////////
|
||||
$content-bg: #151419;
|
||||
$border-color: #575757;
|
||||
$border-radius: 8px;
|
||||
|
||||
////////// COLOR VARIABLES //////////
|
||||
|
||||
|
||||
|
||||
////////// SOCIAL COLORS //////////
|
||||
|
||||
$social-colors: (
|
||||
twitter: #2caae1,
|
||||
facebook: #3b579d,
|
||||
google: #dc4a38,
|
||||
linkedin: #0177b5,
|
||||
pinterest: #cc2127,
|
||||
youtube: #e52d27,
|
||||
github: #333333,
|
||||
behance: #1769ff,
|
||||
dribbble: #ea4c89,
|
||||
reddit: #ff4500
|
||||
);
|
||||
|
||||
////////// SOCIAL COLORS //////////
|
||||
|
||||
////////// FONTS//
|
||||
|
||||
$type1: 'Nunito', sans-serif;
|
||||
|
||||
$default-font-size: .875rem; // 14px as base font size
|
||||
|
||||
$text-muted: #9c9fa6;
|
||||
$body-color: #fff;
|
||||
|
||||
$color-light-blue: #52C4FF;
|
||||
|
||||
////////// FONT VARIABLES //////////
|
||||
|
||||
///////// FOOTER ////////
|
||||
$footer-height: 75px;
|
||||
$footer-bg: $content-bg;
|
||||
$footer-color: color(dark);
|
||||
///////// FOOTER ////////
|
||||
|
||||
///////// BUTTONS ////////
|
||||
|
||||
$button-fixed-width: 150px;
|
||||
$btn-padding-y: .875rem;
|
||||
$btn-padding-x: 1.5rem;
|
||||
$btn-line-height: 1;
|
||||
|
||||
$btn-padding-y-xs: .5rem;
|
||||
$btn-padding-x-xs: .75rem;
|
||||
|
||||
$btn-padding-y-sm: .50rem;
|
||||
$btn-padding-x-sm: .81rem;
|
||||
|
||||
$btn-padding-y-lg: 1rem;
|
||||
$btn-padding-x-lg: 3rem;
|
||||
|
||||
$btn-font-size: .875rem;
|
||||
$btn-font-size-xs: .625rem;
|
||||
$btn-font-size-sm: .875rem;
|
||||
$btn-font-size-lg: .875rem;
|
||||
|
||||
$btn-border-radius: .1875rem;
|
||||
$btn-border-radius-xs: .1875rem;
|
||||
$btn-border-radius-sm: .1875rem;
|
||||
$btn-border-radius-lg: .1875rem;
|
||||
|
||||
///////// BUTTONS ////////
|
||||
|
||||
|
||||
|
||||
////////// TOOLTIP VARIABLES //////////
|
||||
|
||||
//default styles
|
||||
$tooltip-font-size: .75rem;
|
||||
$tooltip-padding-y: .4rem;
|
||||
$tooltip-padding-x: .75rem;
|
||||
$tooltip-border-radius: .375rem;
|
||||
|
||||
////////// TOOLTIP VARIABLES //////////
|
||||
|
||||
////////// POPOVER ///////////////
|
||||
$popover-bg: #636877;
|
||||
$popover-header-bg: $popover-bg;
|
||||
$popover-header-color: $black;
|
||||
$popover-body-color: $black;
|
||||
$popover-arrow-color: $popover-bg;
|
||||
////////// POPOVER ///////////////
|
||||
|
||||
|
||||
|
||||
///////// FORMS /////////
|
||||
|
||||
$input-bg: #2b2e4c;
|
||||
$input-focus-bg: $input-bg;
|
||||
$input-border-radius: 2px;
|
||||
$input-placeholder-color: #aaa7a7;
|
||||
$input-color: #e9e6e6;
|
||||
$input-focus-color: $input-color;
|
||||
$input-font-size: .875rem;
|
||||
|
||||
$input-padding-y: .875rem;
|
||||
$input-padding-x: 1.375rem;
|
||||
$input-line-height: 1;
|
||||
|
||||
$input-padding-y-xs: .5rem;
|
||||
$input-padding-x-xs: .75rem;
|
||||
|
||||
$input-padding-y-sm: .50rem;
|
||||
$input-padding-x-sm: .81rem;
|
||||
|
||||
$input-padding-y-lg: .94rem;
|
||||
$input-padding-x-lg: 1.94rem;
|
||||
|
||||
$input-height: 2.875rem;
|
||||
$input-height-sm: 2.575rem;
|
||||
$input-height-lg: 3.175rem;
|
||||
|
||||
///////// FORMS /////////
|
||||
|
||||
//////// TABLES ////////
|
||||
|
||||
$table-color: $body-color;
|
||||
$table-accent-bg: #2A292C;
|
||||
$table-hover-bg: $content-bg;
|
||||
$table-cell-padding: 1.25rem .9375rem;
|
||||
$table-border-color: $border-color;
|
||||
|
||||
$table-inverse-bg: #2a2b32;
|
||||
$table-inverse-color: color(white);
|
||||
$expanded-table-cell-color:#fff;
|
||||
$alpha-orange:#FE5C83;
|
||||
|
||||
//////// TABLES ////////
|
||||
|
||||
|
||||
|
||||
////////// MEASUREMENT AND PROPERTY VARIABLES //////////
|
||||
|
||||
$border-property: 1px solid $border-color;
|
||||
$card-bg: #1f1e23;
|
||||
$card-spacing-y: 1.875rem;
|
||||
$card-padding-y: 1.25rem;
|
||||
$card-padding-x: 1.437rem;
|
||||
$card-border-radius: 20px;
|
||||
$card-border-color: #313452;
|
||||
$card-box-shadow: 0 1px 20px 0 rgba(0,0,0,.1);
|
||||
$card-description-color: #76838f;
|
||||
$grid-gutter-width: 30px;
|
||||
$action-transition-duration: 0.25s;
|
||||
$action-transition-timing-function: ease;
|
||||
$card-tale:#7DA0FA;
|
||||
$card-dark-blue:#4747A1;
|
||||
$card-light-blue:#7978E9;
|
||||
$card-light-danger:#F3797E;
|
||||
////////// OTHER VARIABLES //////////
|
||||
|
||||
//////// DROPDOWNS ///////
|
||||
|
||||
$dropdown-bg: $card-bg;
|
||||
$dropdown-border-color: $border-color;
|
||||
$dropdown-divider-bg: $border-color;
|
||||
$dropdown-link-color: $body-color;
|
||||
$dropdown-header-color: $body-color;
|
||||
$dropdown-link-hover-bg: theme-color(dark);
|
||||
//////// DROPDOWNS ///////
|
||||
|
||||
|
||||
////////// BREAD CRUMBS VARIABLES //////////
|
||||
|
||||
// default styles
|
||||
$breadcrumb-padding-y: 0.56rem;
|
||||
$breadcrumb-padding-x: 1.13rem;
|
||||
$breadcrumb-item-padding: .5rem;
|
||||
$breadcrumb-margin-bottom: 1rem;
|
||||
$breadcrumb-font-size: $default-font-size;
|
||||
$breadcrumb-bg: transparent;
|
||||
$breadcrumb-border-color: $border-color;
|
||||
$breadcrumb-divider-color: $gray-600;
|
||||
$breadcrumb-active-color: $gray-700;
|
||||
$breadcrumb-divider: "/";
|
||||
|
||||
// custom styles
|
||||
$breadcrumb-custom-padding-y: 0;
|
||||
$breadcrumb-custom-padding-x: 0;
|
||||
$breadcrumb-custom-item-padding-y: 0.56rem;
|
||||
$breadcrumb-custom-item-padding-x: 12px;
|
||||
$breadcrumb-custom-item-color: inherit;
|
||||
$breadcrumb-item-bg: #555b71;
|
||||
|
||||
////////// BREAD CRUMBS VARIABLES //////////
|
||||
|
||||
|
||||
|
||||
////////// MODALS VARIABLES //////////
|
||||
|
||||
$modal-inner-padding: 0.9375rem;
|
||||
$modal-dialog-margin: 10px;
|
||||
$modal-dialog-margin-y-sm-up: 30px;
|
||||
$modal-title-line-height: $line-height-base;
|
||||
$modal-content-bg: #323748;
|
||||
$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5);
|
||||
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5);
|
||||
|
||||
$modal-backdrop-bg: $black;
|
||||
$modal-backdrop-opacity: .5;
|
||||
|
||||
$modal-header-border-color: $border-color;
|
||||
$modal-content-border-color: $border-color;
|
||||
$modal-footer-border-color: $border-color;
|
||||
|
||||
$modal-header-border-width: $border-width;
|
||||
$modal-content-border-width: $border-width;
|
||||
$modal-footer-border-width: $border-width;
|
||||
|
||||
$modal-header-padding-x: 26px;
|
||||
$modal-header-padding-y: 25px;
|
||||
|
||||
$modal-body-padding-x: 26px;
|
||||
$modal-body-padding-y: 35px;
|
||||
|
||||
$modal-footer-padding-x: 31px;
|
||||
$modal-footer-padding-y: 15px;
|
||||
|
||||
$modal-lg: 90%;
|
||||
$modal-md: 500px;
|
||||
$modal-sm: 300px;
|
||||
$modal-transition: transform .4s ease;
|
||||
|
||||
////////// MODALS VARIABLES //////////
|
||||
|
||||
///////// TABS VARIABLES //////////
|
||||
$nav-tabs-border-color: #ebedf2;
|
||||
$nav-tabs-link-bg: #292f42;
|
||||
$nav-tabs-link-color: $body-color;
|
||||
$nav-tabs-border-color: $border-color;
|
||||
$nav-tabs-link-hover-border-color: #828494 #828494 #828494;
|
||||
$nav-tabs-link-active-color: $body-color;
|
||||
$nav-tabs-link-active-bg: $card-bg;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color $nav-tabs-link-active-bg;
|
||||
$nav-pills-custom-bg: #fcfcfd;
|
||||
//////// TABS VARIABLES /////////
|
||||
|
||||
//////// CALENDAR //////////////
|
||||
$fullcalendar-color: #a8b2b9;
|
||||
//////// CALENDAR //////////////
|
||||
|
||||
//////// PAGINATION //////////////
|
||||
$pagination-bg: theme-color(dark);
|
||||
$pagination-disabled-bg: #8b8d91;
|
||||
//////// PAGINATION //////////////
|
||||
|
||||
//////// PROGRESS BAR ///////////
|
||||
$progress-bg: #878c9e;
|
||||
//////// PROGRESS BAR ///////////
|
||||
|
||||
//////// NOUI SLIDER ////////////
|
||||
$noui-base-bg: theme-color(dark);
|
||||
//////// NOUI SLIDER ////////////
|
||||
241
public/Dashboard/scss/common/dark/common.scss
Normal file
241
public/Dashboard/scss/common/dark/common.scss
Normal file
@ -0,0 +1,241 @@
|
||||
/*------------------------------------------------------------------
|
||||
[Master Stylesheet]
|
||||
|
||||
Project: SkyDash Admin
|
||||
Version: 1.2.1
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
|
||||
|
||||
/*-------------------------------------------------------------------
|
||||
===== Table of Contents =====
|
||||
|
||||
* Bootstrap functions
|
||||
* Template variables
|
||||
* SCSS Compass Functions
|
||||
* Boostrap Main SCSS
|
||||
* Template mixins
|
||||
+ Animation Mixins
|
||||
+ Badge Mixins
|
||||
+ Button Mixins
|
||||
+ Miscellaneous Mixins
|
||||
+ BlockQuote Mixins
|
||||
+ Cards Mixins
|
||||
+ Color Functions Mixins
|
||||
+ Tooltips
|
||||
+ popovers
|
||||
* Core Styles
|
||||
+ Reset Styles
|
||||
+ Fonts
|
||||
+ Functions
|
||||
+ Backgrounds
|
||||
+ Sidebar
|
||||
+ Navbar
|
||||
+ Typography
|
||||
+ Miscellaneous
|
||||
+ Footer
|
||||
+ Layouts
|
||||
+ Utilities
|
||||
+ Demo styles
|
||||
* Components
|
||||
+ Accordions
|
||||
+ Badges
|
||||
+ Bootstrap Alerts
|
||||
+ Boostrap Progress
|
||||
+ Buttons
|
||||
+ Breadcrumbs
|
||||
+ Cards
|
||||
+ Checkboxes and Radios
|
||||
+ Dropdowns
|
||||
+ Forms
|
||||
+ Google maps
|
||||
+ Icons
|
||||
+ Loaders
|
||||
+ Lists
|
||||
+ Modals
|
||||
+ Pagination
|
||||
+ Popover
|
||||
+ Portfolio
|
||||
+ Preview
|
||||
+ Tables
|
||||
+ Tabs
|
||||
+ Timeline
|
||||
+ Todo List
|
||||
+ Tooltips
|
||||
+ User Profile
|
||||
+ Pricing table
|
||||
+ Settings Panel
|
||||
* Email
|
||||
+ Mail Sidebar
|
||||
+ Mail List Container
|
||||
+ Message Content
|
||||
* Plugin Overrides
|
||||
+ Ace Editor
|
||||
+ Avgrund Popup
|
||||
+ Bootstrap Tour
|
||||
+ Chartist
|
||||
+ CodeMirror
|
||||
+ Colcade
|
||||
+ Colorpicker
|
||||
+ Context Menu
|
||||
+ Data Tables
|
||||
+ Datepicker
|
||||
+ Dropify
|
||||
+ Dropzone
|
||||
+ Flot chart
|
||||
+ Full Calendar
|
||||
+ Google Charts
|
||||
+ Icheck
|
||||
+ Jquery File Upload
|
||||
+ Js-grid
|
||||
+ Jvectormap
|
||||
+ Light Gallery
|
||||
+ Listify
|
||||
+ No-ui-slider
|
||||
+ Owl-carousel
|
||||
+ Progressbar-js
|
||||
+ Pws-tabs
|
||||
+ Quill Editor
|
||||
+ Rating
|
||||
+ Select2
|
||||
+ Summernote Editor
|
||||
+ SweetAlert
|
||||
+ Switchery
|
||||
+ Tags
|
||||
+ TinyMCE Editor
|
||||
+ Toast
|
||||
+ Typeahead
|
||||
+ Wysi Editor
|
||||
+ X-editable
|
||||
+ Wizard
|
||||
* Landing screens
|
||||
+ Auth
|
||||
* Horizontal Menu
|
||||
+ Horizontal
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Import Bootstrap functions and variables === */
|
||||
@import "../../../node_modules/bootstrap/scss/functions";
|
||||
@import "../../../node_modules/bootstrap/scss/variables";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Import template variables === */
|
||||
@import "variables";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === SCSS Compass Functions === */
|
||||
@import "../../../node_modules/compass-mixins/lib/compass";
|
||||
@import "../../../node_modules/compass-mixins/lib/animate";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Boostrap Main SCSS === */
|
||||
@import "../../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Template mixins === */
|
||||
@import "mixins/misc";
|
||||
@import "mixins/animation";
|
||||
@import "mixins/badges";
|
||||
@import "mixins/blockqoute";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/breadcrumbs";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/no-ui-slider";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/popovers";
|
||||
@import "mixins/tooltips";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Core Styles === */
|
||||
@import "reset";
|
||||
@import "fonts";
|
||||
@import "functions";
|
||||
@import "background";
|
||||
@import "typography";
|
||||
@import "misc";
|
||||
@import "footer";
|
||||
@import "utilities";
|
||||
@import "demo";
|
||||
@import "dashboard";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Components === */
|
||||
@import "components/accordions";
|
||||
@import "components/badges";
|
||||
@import "components/bootstrap-alerts";
|
||||
@import "components/bootstrap-progress";
|
||||
@import "components/buttons";
|
||||
@import "components/breadcrumbs";
|
||||
@import "components/cards";
|
||||
@import "components/checkbox-radio";
|
||||
@import "components/dropdown";
|
||||
@import "components/forms";
|
||||
@import "components/google-maps";
|
||||
@import "components/icons";
|
||||
@import "components/loaders/loaders";
|
||||
@import "components/lists";
|
||||
@import "components/modals";
|
||||
@import "components/pagination";
|
||||
@import "components/popover";
|
||||
@import "components/portfolio";
|
||||
@import "components/preview";
|
||||
@import "components/tables";
|
||||
@import "components/tabs";
|
||||
@import "components/timeline";
|
||||
@import "components/todo-list";
|
||||
@import "components/tooltips";
|
||||
@import "components/user-profile";
|
||||
@import "components/pricing-table";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Email === */
|
||||
@import "components/mail-components/mail-sidebar";
|
||||
@import "components/mail-components/mail-list-container";
|
||||
@import "components/mail-components/messagecontent";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Plugin overrides === */
|
||||
@import "components/plugin-overrides/ace";
|
||||
@import "components/plugin-overrides/avgrund";
|
||||
@import "components/plugin-overrides/chartist";
|
||||
@import "components/plugin-overrides/codemirror";
|
||||
@import "components/plugin-overrides/colcade";
|
||||
@import "components/plugin-overrides/colorpicker";
|
||||
@import "components/plugin-overrides/context-menu";
|
||||
@import "components/plugin-overrides/data-tables";
|
||||
@import "components/plugin-overrides/datepicker";
|
||||
@import "components/plugin-overrides/dropify";
|
||||
@import "components/plugin-overrides/dropzone";
|
||||
@import "components/plugin-overrides/flot-chart";
|
||||
@import "components/plugin-overrides/full-calendar";
|
||||
@import "components/plugin-overrides/google-charts";
|
||||
@import "components/plugin-overrides/icheck";
|
||||
@import "components/plugin-overrides/jquery-file-upload";
|
||||
@import "components/plugin-overrides/js-grid";
|
||||
@import "components/plugin-overrides/jvectormap";
|
||||
@import "components/plugin-overrides/light-gallery";
|
||||
@import "components/plugin-overrides/listify";
|
||||
@import "components/plugin-overrides/mapael";
|
||||
@import "components/plugin-overrides/no-ui-slider";
|
||||
@import "components/plugin-overrides/owl-carousel";
|
||||
@import "components/plugin-overrides/progressbar-js";
|
||||
@import "components/plugin-overrides/pws-tabs";
|
||||
@import "components/plugin-overrides/quill";
|
||||
@import "components/plugin-overrides/rating";
|
||||
@import "components/plugin-overrides/select2";
|
||||
@import "components/plugin-overrides/summernote";
|
||||
@import "components/plugin-overrides/sweet-alert";
|
||||
@import "components/plugin-overrides/switchery";
|
||||
@import "components/plugin-overrides/tags";
|
||||
@import "components/plugin-overrides/tinymce";
|
||||
@import "components/plugin-overrides/toast";
|
||||
@import "components/plugin-overrides/typeahead";
|
||||
@import "components/plugin-overrides/wysieditor";
|
||||
@import "components/plugin-overrides/x-editable";
|
||||
@import "components/plugin-overrides/wizard";
|
||||
|
||||
/*-------------------------------------------------------------------*/
|
||||
/* === Landing screens === */
|
||||
@import "landing-screens/auth";
|
||||
233
public/Dashboard/scss/common/dark/components/_accordions.scss
Normal file
233
public/Dashboard/scss/common/dark/components/_accordions.scss
Normal file
@ -0,0 +1,233 @@
|
||||
/* Accordions */
|
||||
|
||||
.accordion {
|
||||
.card {
|
||||
margin-bottom: .75rem;
|
||||
box-shadow: 0px 1px 7px 1px rgba($white, 0.08);
|
||||
border-radius: .25rem;
|
||||
.card-header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 2rem;
|
||||
* {
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
position: relative;
|
||||
@include transition(color .5s ease);
|
||||
padding-right: 1.5rem;
|
||||
&:before {
|
||||
font-family:"themify";
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 0;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
color: theme-color(primary);
|
||||
&:before {
|
||||
content: "\e622";
|
||||
}
|
||||
}
|
||||
&[aria-expanded="false"] {
|
||||
&:before{
|
||||
content: "\e61a";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
font-size: 14px;
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-bordered {
|
||||
background: $card-bg;
|
||||
box-shadow: 0px 1px 7px 1px rgba($white, 0.08);
|
||||
.card {
|
||||
margin: 0 2rem;
|
||||
border-top: 1px solid $border-color;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
.card-header,
|
||||
.card-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.card-header {
|
||||
a {
|
||||
&:before {
|
||||
color: theme-color(danger);
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
color: inherit;
|
||||
&:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
}
|
||||
&[aria-expanded="false"] {
|
||||
&:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-filled {
|
||||
.card {
|
||||
padding: 0;
|
||||
.card-header {
|
||||
padding: 0;
|
||||
a {
|
||||
padding: 2rem 4.5rem 2rem 2rem;
|
||||
@include transition(all .2s linear);
|
||||
&:before {
|
||||
top: 40%;
|
||||
right: 40px;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
background: theme-color(primary);
|
||||
color: $white;
|
||||
&:before {
|
||||
content: "\e648";
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&[aria-expanded="false"] {
|
||||
&:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
padding: 0 2rem 2rem 2rem;
|
||||
background: theme-color(primary);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-solid-header {
|
||||
.card {
|
||||
padding: 0;
|
||||
.card-header {
|
||||
padding: 0;
|
||||
a {
|
||||
padding: 2rem 4.5rem 2rem 2rem;
|
||||
@include transition(all .2s linear);
|
||||
&:before {
|
||||
top: 40%;
|
||||
right: 40px;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
background: theme-color(primary);
|
||||
color: $white;
|
||||
&:before {
|
||||
content: "\e648";
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&[aria-expanded="false"] {
|
||||
&:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-solid-content {
|
||||
.card {
|
||||
padding: 0;
|
||||
.card-header {
|
||||
padding: 0;
|
||||
a {
|
||||
padding: 2rem 4.5rem 2rem 2rem;
|
||||
@include transition(all .2s linear);
|
||||
&:before {
|
||||
top: 40%;
|
||||
right: 40px;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
color: inherit;
|
||||
&:before {
|
||||
content: "\e648";
|
||||
}
|
||||
}
|
||||
&[aria-expanded="false"] {
|
||||
&:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
padding: 2rem;
|
||||
background: theme-color(success);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-multi-colored {
|
||||
.card {
|
||||
.card-header,
|
||||
.card-body {
|
||||
background: transparent;
|
||||
color: $white;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
background: theme-color(primary);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background: theme-color(success);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background: theme-color(danger);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
background: theme-color(warning);
|
||||
}
|
||||
&:nth-child(5) {
|
||||
background: theme-color(info);
|
||||
}
|
||||
.card-header {
|
||||
a {
|
||||
&[aria-expanded="true"] {
|
||||
color: inherit;
|
||||
&:before {
|
||||
content: "\e648";
|
||||
}
|
||||
}
|
||||
&[aria-expanded="false"] {
|
||||
&:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
public/Dashboard/scss/common/dark/components/_badges.scss
Normal file
19
public/Dashboard/scss/common/dark/components/_badges.scss
Normal file
@ -0,0 +1,19 @@
|
||||
/* Badges */
|
||||
|
||||
.badge {
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: .375rem .5625rem;
|
||||
font-weight: normal;
|
||||
&.badge-pill {
|
||||
border-radius: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*Badge outlined variations*/
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge-outline-#{$color} {
|
||||
@include badge-outline-variations($value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
/* Bootstrap Alerts */
|
||||
|
||||
.alert {
|
||||
font-size: $default-font-size;
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
margin-right: 1.25rem;
|
||||
vertical-align: middle;
|
||||
line-height: .5;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(theme-color($color), theme-color-level($color, 1), theme-color-level($color, 3));
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-fill-#{$color} {
|
||||
@include alert-variant(theme-color($color), theme-color($color), color(white));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
/* Bootstrap Progress */
|
||||
|
||||
.progress {
|
||||
@include border-radius(7px);
|
||||
height: 8px;
|
||||
.progress-bar {
|
||||
@include border-radius(7px);
|
||||
}
|
||||
|
||||
&.progress-sm{
|
||||
height: 0.375rem;
|
||||
}
|
||||
&.progress-md {
|
||||
height: 11px;
|
||||
}
|
||||
&.progress-lg {
|
||||
height: 15px;
|
||||
}
|
||||
&.progress-xl {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
/* Breadcrumbs */
|
||||
|
||||
.breadcrumb {
|
||||
border: $border-width solid $border-color;
|
||||
|
||||
.breadcrumb-item {
|
||||
font-size: $breadcrumb-font-size;
|
||||
|
||||
&.active {}
|
||||
}
|
||||
|
||||
&.breadcrumb-custom {
|
||||
padding: $breadcrumb-custom-padding-y $breadcrumb-custom-padding-x;
|
||||
border-color: $breadcrumb-item-bg;
|
||||
.breadcrumb-item {
|
||||
font-size: $breadcrumb-font-size;
|
||||
background: $breadcrumb-item-bg;
|
||||
padding: $breadcrumb-custom-item-padding-y $breadcrumb-custom-item-padding-x;
|
||||
color: $breadcrumb-custom-item-color;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
&:last-child {
|
||||
background: transparent;
|
||||
}
|
||||
&:before{
|
||||
content: "";
|
||||
padding-right: 0;
|
||||
}
|
||||
a{
|
||||
position: relative;
|
||||
color: inherit;
|
||||
border: 1px solid $breadcrumb-item-bg;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
&:before,&:after{
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: 21px solid transparent;
|
||||
border-bottom: 21px solid transparent;
|
||||
}
|
||||
&:before{
|
||||
right: -22px;
|
||||
z-index: 3;
|
||||
border-left-color: $breadcrumb-item-bg;
|
||||
border-left-style: solid;
|
||||
border-left-width: 12px;
|
||||
}
|
||||
&:after{
|
||||
border-top: 21px solid transparent;
|
||||
border-bottom: 22px solid transparent;
|
||||
border-left: 12px solid $border-color;
|
||||
top: -9px;
|
||||
right: -23px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
&.active {}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-success,&.bg-dark,&.bg-danger,&.bg-warning,&.bg-primary,&.bg-info{
|
||||
border: none;
|
||||
.breadcrumb-item{
|
||||
color: $white;
|
||||
&:before{
|
||||
color: inherit;
|
||||
}
|
||||
a,span{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* inverse breadcrumb */
|
||||
@each $color, $value in $theme-colors {
|
||||
.bg-inverse-#{$color} {
|
||||
@include breadcrumb-inverse-variant($value);
|
||||
}
|
||||
}
|
||||
79
public/Dashboard/scss/common/dark/components/_buttons.scss
Normal file
79
public/Dashboard/scss/common/dark/components/_buttons.scss
Normal file
@ -0,0 +1,79 @@
|
||||
/* Buttons */
|
||||
|
||||
.btn {
|
||||
font-size: $btn-font-size;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
&.btn-rounded {
|
||||
@include border-radius(50px);
|
||||
}
|
||||
&.btn-sm {
|
||||
font-size: $btn-font-size-sm;
|
||||
}
|
||||
&.btn-lg {
|
||||
font-size: $btn-font-size-lg;
|
||||
padding: 1.375rem 3.4rem;
|
||||
}
|
||||
&.btn-xs {
|
||||
padding: $btn-padding-y-xs $btn-padding-x-xs;
|
||||
font-size: $btn-font-size-xs;
|
||||
}
|
||||
/* Buttons with only icons */
|
||||
&.btn-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 0;
|
||||
}
|
||||
/* Buttons with icon and text */
|
||||
&.btn-icon-text {
|
||||
.btn-icon-prepend {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.btn-icon-append {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
&.btn-social-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn {
|
||||
+ .btn {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toolbar {
|
||||
.btn-group {
|
||||
+.btn-group {
|
||||
@extend .ml-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*social buttons*/
|
||||
@each $color, $value in $social-colors {
|
||||
.btn-#{$color} {
|
||||
@include social-button(social-color($color));
|
||||
}
|
||||
.btn-outline-#{$color} {
|
||||
@include social-outline-button(social-color($color));
|
||||
}
|
||||
}
|
||||
/* inverse buttons */
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-inverse-#{$color} {
|
||||
@include button-inverse-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
border-color: #424351;
|
||||
}
|
||||
145
public/Dashboard/scss/common/dark/components/_cards.scss
Normal file
145
public/Dashboard/scss/common/dark/components/_cards.scss
Normal file
@ -0,0 +1,145 @@
|
||||
/* Cards */
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: $card-box-shadow;
|
||||
-webkit-box-shadow: $card-box-shadow;
|
||||
-moz-box-shadow: $card-box-shadow;
|
||||
-ms-box-shadow: $card-box-shadow;
|
||||
&.tale-bg {
|
||||
background: #DAE7FF;
|
||||
}
|
||||
.card-body {
|
||||
padding: $card-padding-y $card-padding-x;
|
||||
+ .card-body {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
color: $body-color;
|
||||
margin-bottom: 1.2rem;
|
||||
text-transform: capitalize;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-subtitle {
|
||||
@extend .text-gray;
|
||||
font-weight: 400;
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
|
||||
}
|
||||
.card-description {
|
||||
margin-bottom: .875rem;
|
||||
font-weight: 400;
|
||||
color: $card-description-color;
|
||||
}
|
||||
&.card-outline-success {
|
||||
border: 1px solid theme-color("success");
|
||||
}
|
||||
&.card-outline-primary {
|
||||
border: 1px solid theme-color("primary");
|
||||
}
|
||||
&.card-outline-warning {
|
||||
border: 1px solid theme-color("warning");
|
||||
}
|
||||
&.card-outline-danger {
|
||||
border: 1px solid theme-color("danger");
|
||||
}
|
||||
&.card-rounded {
|
||||
@include border-radius(5px);
|
||||
}
|
||||
|
||||
&.card-faded {
|
||||
background: #b5b0b2;
|
||||
border-color: #b5b0b2;
|
||||
}
|
||||
&.card-circle-progress {
|
||||
color: $white;
|
||||
text-align: center;
|
||||
}
|
||||
&.card-img-holder {
|
||||
position: relative;
|
||||
.card-img-absolute {
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.card-weather {
|
||||
.weather-daily {
|
||||
.weather-day {
|
||||
opacity: .5;
|
||||
font-weight: 900;
|
||||
}
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.weather-temp {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: 0;
|
||||
opacity: .5;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.card-tale {
|
||||
background: $card-tale;
|
||||
color: $white;
|
||||
&:hover {
|
||||
background: lighten($card-tale, 5%)
|
||||
}
|
||||
}
|
||||
|
||||
&.card-dark-blue {
|
||||
background: $card-dark-blue;
|
||||
color: $white;
|
||||
&:hover {
|
||||
background: lighten($card-dark-blue, 5%)
|
||||
}
|
||||
}
|
||||
&.card-light-blue {
|
||||
background: $card-light-blue;
|
||||
color: $white;
|
||||
&:hover {
|
||||
background: lighten($card-light-blue, 5%)
|
||||
}
|
||||
}
|
||||
&.card-light-danger {
|
||||
background: $card-light-danger;
|
||||
color: $white;
|
||||
&:hover {
|
||||
background: lighten($card-light-danger, 5%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.card-inverse-#{$color} {
|
||||
@include card-inverse-variant(rgba(theme-color($color), .2), theme-color-level($color, 1), theme-color-level($color, 3));
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.data-icon-card-#{$color} {
|
||||
background: $value;
|
||||
color: $white;
|
||||
.card-title {
|
||||
color: $white;
|
||||
}
|
||||
.background-icon {
|
||||
@extend .d-flex;
|
||||
@extend .justify-content-end;
|
||||
&::before{
|
||||
content: url('../../images/dashboard/shape-4.svg');
|
||||
position: absolute;
|
||||
}
|
||||
i {
|
||||
z-index: 1;
|
||||
@extend .icon-lg;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,235 @@
|
||||
/* Checkboxes and Radios */
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 0;
|
||||
|
||||
.form-check-label {
|
||||
min-height: 18px;
|
||||
display: block;
|
||||
margin-left: 1.75rem;
|
||||
font-size: $default-font-size;
|
||||
line-height: 1.5;
|
||||
.rtl & {
|
||||
margin-left: 0;
|
||||
margin-right: 1.75rem;
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.rtl & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
+ .input-helper {
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.rtl & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
border: solid theme-color(primary);
|
||||
border-width: 2px;
|
||||
@include transition(all);
|
||||
transition-duration: 0s;
|
||||
-webkit-transition-duration: 250ms;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transition(all);
|
||||
transition-duration: 0s;
|
||||
-webkit-transition-duration: 250ms;
|
||||
transition-duration: 250ms;
|
||||
font-family: themify;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
content: '\e64c';
|
||||
font-size: .9375rem;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
+.input-helper {
|
||||
&:before {
|
||||
background: theme-color(primary);
|
||||
border-width: 0;
|
||||
}
|
||||
&:after {
|
||||
width: 18px;
|
||||
opacity: 1;
|
||||
line-height: 18px;
|
||||
filter: alpha(opacity=100);
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ .input-helper {
|
||||
&:before {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .input-helper {
|
||||
&:after {
|
||||
background: $border-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
+.input-helper {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
.rtl & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
border: solid theme-color(primary);
|
||||
border-width: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
@include transition(all);
|
||||
transition-duration: 0s;
|
||||
-webkit-transition-duration: 250ms;
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: $white;
|
||||
border-radius: 50%;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
.rtl & {
|
||||
left: auto;
|
||||
right: 6px;
|
||||
}
|
||||
-webkit-transition: all;
|
||||
-o-transition: all;
|
||||
transition: all;
|
||||
transition-duration: 0s;
|
||||
-webkit-transition-duration: 250ms;
|
||||
transition-duration: 250ms;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+.input-helper {
|
||||
&:before {
|
||||
background: theme-color(primary);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
line-height: 1.5;
|
||||
filter: alpha(opacity=100);
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ .input-helper {
|
||||
&:before {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .input-helper {
|
||||
&:before {
|
||||
background: $border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.form-check-#{$color} {
|
||||
&.form-check {
|
||||
label {
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
+.input-helper {
|
||||
&:before {
|
||||
border-color: theme-color($color);
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
+.input-helper {
|
||||
&:before {
|
||||
background: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.form-inline .form-check {
|
||||
|
||||
}
|
||||
}
|
||||
35
public/Dashboard/scss/common/dark/components/_dropdown.scss
Normal file
35
public/Dashboard/scss/common/dark/components/_dropdown.scss
Normal file
@ -0,0 +1,35 @@
|
||||
/* Dropdowns */
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
&:after {
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
font: normal normal normal 24px/1 "themify";
|
||||
content: "\e64b";
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
line-height: .625rem;
|
||||
font-size: .875rem;
|
||||
margin-left: .3rem;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-top: 2px;
|
||||
font-size: $default-font-size;
|
||||
box-shadow: 0 1px 20px 0 rgba(0,0,0,.1);
|
||||
.dropdown-item {
|
||||
font-size: .875rem;
|
||||
padding: .25rem 1.5rem;
|
||||
&:hover {
|
||||
background-color: $body-color;
|
||||
}
|
||||
&:active {
|
||||
background: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
63
public/Dashboard/scss/common/dark/components/_forms.scss
Normal file
63
public/Dashboard/scss/common/dark/components/_forms.scss
Normal file
@ -0,0 +1,63 @@
|
||||
/* Forms */
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.input-group-append,
|
||||
.input-group-prepend {
|
||||
color: $input-placeholder-color;
|
||||
width: auto;
|
||||
border: none;
|
||||
|
||||
.input-group-text {
|
||||
background: darken($input-bg, 5%);
|
||||
border-color: $border-color;
|
||||
padding: $input-padding-y .75rem;
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
border: 1px solid $border-color;
|
||||
font-weight: 400;
|
||||
font-size: $input-font-size;
|
||||
}
|
||||
|
||||
select {
|
||||
&.form-control {
|
||||
padding: .4375rem .75rem;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: $input-placeholder-color;
|
||||
&:focus {
|
||||
outline: 1px solid $border-color;
|
||||
}
|
||||
@each $color, $value in $theme-colors {
|
||||
&.border-#{$color} {
|
||||
outline: 1px solid $value;
|
||||
&:focus {
|
||||
outline: 1px solid $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group {
|
||||
label {
|
||||
font-size: $default-font-size;
|
||||
line-height: 1.4rem;
|
||||
vertical-align: top;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
&.has-danger {
|
||||
.form-control {
|
||||
border-color: theme-color(danger);
|
||||
}
|
||||
}
|
||||
.file-upload-default {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.file-upload-info {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
.map-container{
|
||||
position: relative;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
padding: 35% 0;
|
||||
overflow: hidden;
|
||||
@include border-radius(5px);
|
||||
.google-map{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.no-controls{
|
||||
.gmnoprint,.gm-style-cc{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
public/Dashboard/scss/common/dark/components/_icons.scss
Normal file
45
public/Dashboard/scss/common/dark/components/_icons.scss
Normal file
@ -0,0 +1,45 @@
|
||||
/* Icons */
|
||||
|
||||
.icons-list {
|
||||
border-left: 1px solid $border-color;
|
||||
border-top: 1px solid $border-color;
|
||||
> div {
|
||||
background: transparent;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
padding: 15px 15px;
|
||||
font-weight: 400;
|
||||
font-size: $default-font-size;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
width: 40px;
|
||||
text-align: left;
|
||||
color: theme-color(primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-in-bg {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
text-align: center;
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
font-size: 2.875rem;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
font-size: 1rem;
|
||||
}
|
||||
162
public/Dashboard/scss/common/dark/components/_lists.scss
Normal file
162
public/Dashboard/scss/common/dark/components/_lists.scss
Normal file
@ -0,0 +1,162 @@
|
||||
/* Lists */
|
||||
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
padding-left: 1rem;
|
||||
font-size: $default-font-size;
|
||||
li {
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.list-ticked,
|
||||
.list-arrow,
|
||||
.list-star {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
li {
|
||||
padding-left: 1.5rem;
|
||||
&:before {
|
||||
font-family: "themify";
|
||||
margin-left: -1.5rem;
|
||||
width: 1.5rem;
|
||||
margin-right: .5rem;
|
||||
font-size: .6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-ticked {
|
||||
li {
|
||||
&:before {
|
||||
content: '\e64c';
|
||||
color: theme-color(danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-arrow {
|
||||
li {
|
||||
&:before {
|
||||
content: '\e649';
|
||||
color: theme-color(success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-star {
|
||||
li {
|
||||
&:before {
|
||||
content: '\e60a';
|
||||
color: theme-color(warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.solid-bullet-list {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
.rtl & {
|
||||
padding-right: 0;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
padding-left: 25px;
|
||||
line-height: 1;
|
||||
padding-bottom: 2.125rem;
|
||||
* {
|
||||
line-height: .8;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content:"";
|
||||
position: absolute;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
background: theme-color(primary);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
border: 1px solid $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 4px;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bullet-line-list {
|
||||
padding-left: 30px;
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
.rtl & {
|
||||
padding-left: unset;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: -30px;
|
||||
top: 0;
|
||||
border: 4px solid theme-color(primary);
|
||||
margin-right: 15px;
|
||||
z-index: 2;
|
||||
background: color(white);
|
||||
|
||||
.rtl & {
|
||||
left: unset;
|
||||
right: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
border: 1px solid $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 7px;
|
||||
.rtl & {
|
||||
left: unset;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-data-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
font-family: $type1;
|
||||
li {
|
||||
margin-bottom:1rem;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
border-radius:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
public/Dashboard/scss/common/dark/components/_modals.scss
Normal file
37
public/Dashboard/scss/common/dark/components/_modals.scss
Normal file
@ -0,0 +1,37 @@
|
||||
/* Modals */
|
||||
|
||||
.modal{
|
||||
.modal-dialog{
|
||||
margin-top: 100px;
|
||||
.modal-content{
|
||||
.modal-header{
|
||||
padding: $modal-header-padding-y $modal-header-padding-x;
|
||||
.close{
|
||||
span{
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #6a6a6a;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: $modal-body-padding-y $modal-body-padding-x;
|
||||
}
|
||||
.modal-footer{
|
||||
padding: $modal-footer-padding-y $modal-footer-padding-x;
|
||||
@media(max-width: 400px) {
|
||||
padding-left: .25rem;
|
||||
padding-right: .25rem;
|
||||
flex-direction: column;
|
||||
>:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: .7rem;
|
||||
}
|
||||
>:not(:first-child) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
110
public/Dashboard/scss/common/dark/components/_pagination.scss
Normal file
110
public/Dashboard/scss/common/dark/components/_pagination.scss
Normal file
@ -0,0 +1,110 @@
|
||||
/* Pagination */
|
||||
|
||||
.pagination{
|
||||
.page-item {
|
||||
.page-link {
|
||||
border-color: $border-color;
|
||||
color: $white;
|
||||
font-size: .875rem;
|
||||
@include transition-duration(0.3s);
|
||||
&:focus {
|
||||
background: inherit;
|
||||
}
|
||||
i {
|
||||
&:before {
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.page-link {
|
||||
background: theme-color("primary");
|
||||
border-color: theme-color("primary");
|
||||
color: color(white);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-flat {
|
||||
.page-item {
|
||||
margin: 0 .25rem;
|
||||
.page-link {
|
||||
border: none;
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-separated {
|
||||
.page-item {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.page-link{
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-rounded {
|
||||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-radius(25px 0 0 25px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-radius(0 25px 25px 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-rounded-flat {
|
||||
.page-item {
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
.page-link {
|
||||
border: none;
|
||||
@include border-radius(50px);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-rounded-separated {
|
||||
.page-item {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
.page-link {
|
||||
@include border-radius(10px 0 0 10px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
.page-link {
|
||||
@include border-radius(0 10px 10px 0);
|
||||
}
|
||||
}
|
||||
.page-link {
|
||||
@include border-radius(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* pagination variations */
|
||||
@each $color, $value in $theme-colors {
|
||||
.pagination-#{$color} {
|
||||
@include pagination-variants($value);
|
||||
}
|
||||
}
|
||||
125
public/Dashboard/scss/common/dark/components/_popover.scss
Normal file
125
public/Dashboard/scss/common/dark/components/_popover.scss
Normal file
@ -0,0 +1,125 @@
|
||||
/* Popovers */
|
||||
|
||||
.popover-static-demo {
|
||||
.popover {
|
||||
width: 185px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 1rem .5rem;
|
||||
z-index: 10;
|
||||
&.bs-popover-bottom-demo,
|
||||
&.bs-popover-top-demo {
|
||||
.arrow {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
&.bs-popover-left-demo,
|
||||
&.bs-popover-right-demo{
|
||||
.arrow {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
z-index: 1029;
|
||||
&.bs-popover-top-demo {
|
||||
.arrow {
|
||||
&:before{
|
||||
border-top-color: $popover-border-color;
|
||||
}
|
||||
&:after{
|
||||
border-top-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bs-popover-right-demo{
|
||||
.arrow {
|
||||
&:before{
|
||||
border-right-color: $popover-border-color;
|
||||
}
|
||||
&:after{
|
||||
border-right-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bs-popover-bottom-demo{
|
||||
.arrow {
|
||||
&:before{
|
||||
border-bottom-color: $popover-border-color;
|
||||
}
|
||||
&:after{
|
||||
border-bottom-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
.popover-header {
|
||||
&:before {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bs-popover-left-demo{
|
||||
.arrow {
|
||||
&:before{
|
||||
border-left-color: $popover-border-color;
|
||||
}
|
||||
&:after{
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popover-header {
|
||||
font-size: .9375rem;
|
||||
border-bottom: 0;
|
||||
color: $popover-header-color;
|
||||
border-bottom: 1px solid $popover-border-color;
|
||||
}
|
||||
&.left {
|
||||
.arrow {
|
||||
&:before {
|
||||
border-left-color: $popover-border-color;
|
||||
}
|
||||
&:after {
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
.arrow {
|
||||
&:before {
|
||||
border-right-color: $popover-border-color;
|
||||
}
|
||||
&:after {
|
||||
border-right-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.top {
|
||||
.arrow {
|
||||
&:before {
|
||||
border-top-color: $popover-border-color;
|
||||
}
|
||||
&:after {
|
||||
border-top-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bottom {
|
||||
.arrow {
|
||||
&:before {
|
||||
border-bottom-color: $popover-border-color;
|
||||
}
|
||||
&:after {
|
||||
border-bottom-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.popover-#{$color} {
|
||||
@include popover-variant($color);
|
||||
}
|
||||
}
|
||||
92
public/Dashboard/scss/common/dark/components/_portfolio.scss
Normal file
92
public/Dashboard/scss/common/dark/components/_portfolio.scss
Normal file
@ -0,0 +1,92 @@
|
||||
/* Portfolio */
|
||||
.portfolio-grid {
|
||||
figure {
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: theme-color(primary);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
padding: 2em;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.25em;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.effect-text-in {
|
||||
border-radius: 0.25rem;
|
||||
|
||||
h4,
|
||||
img {
|
||||
-webkit-transition: -webkit-transform 0.35s;
|
||||
transition: transform 0.35s;
|
||||
}
|
||||
|
||||
img {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
h4,
|
||||
p {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
text-transform: none;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
-webkit-transform: translate3d(0,50px,0);
|
||||
transform: translate3d(0,50px,0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
-webkit-transform: translate3d(0,-80px,0);
|
||||
transform: translate3d(0,-80px,0);
|
||||
}
|
||||
|
||||
h4 {
|
||||
-webkit-transform: translate3d(0,-100px,0);
|
||||
transform: translate3d(0,-100px,0);
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
118
public/Dashboard/scss/common/dark/components/_preview.scss
Normal file
118
public/Dashboard/scss/common/dark/components/_preview.scss
Normal file
@ -0,0 +1,118 @@
|
||||
/* Preview */
|
||||
|
||||
.preview-list {
|
||||
.preview-item {
|
||||
@include display-flex;
|
||||
@include flex-direction(row);
|
||||
@include align-items(flex-start);
|
||||
padding: 1.25rem 0;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.form-check {
|
||||
margin-top: 8px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.preview-thumbnail {
|
||||
color: $white;
|
||||
position: relative;
|
||||
img,
|
||||
.preview-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.preview-icon {
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
i {
|
||||
font-size: 1.125rem;
|
||||
margin: 0;
|
||||
.rtl & {
|
||||
@extend .ml-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
border: 2px solid color(white);
|
||||
border-radius: 100%;
|
||||
bottom: 5px;
|
||||
display: block;
|
||||
height: 14px;
|
||||
left: -5px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
&.badge-online {
|
||||
@extend .badge-success;
|
||||
}
|
||||
&.badge-offline {
|
||||
@extend .badge-info;
|
||||
}
|
||||
&.badge-busy {
|
||||
@extend .badge-warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-item-content {
|
||||
line-height: 1;
|
||||
padding-left: 15px;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
.content-category {
|
||||
font-family: 'source-sans-pro-semibold', sans-serif;
|
||||
padding-right: 15px;
|
||||
border-right: 1px solid $border-color;
|
||||
@extend .text-muted;
|
||||
}
|
||||
}
|
||||
.rtl & {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.preview-actions {
|
||||
@include display-flex;
|
||||
@include flex-direction(row);
|
||||
i {
|
||||
width: 29px;
|
||||
color: color(gray-lightest);
|
||||
height: 29px;
|
||||
border: 2px solid color(gray-lightest);
|
||||
border-radius: 100%;
|
||||
padding: 3px 6px;
|
||||
display: inline-block;
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.comment-preview {
|
||||
.preview-item {
|
||||
padding: .87rem 0;
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bordered {
|
||||
.preview-item {
|
||||
border-bottom: 1px solid $border-color;
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/* Pricing table */
|
||||
|
||||
.pricing-table {
|
||||
.pricing-card {
|
||||
.pricing-card-body {
|
||||
padding: 50px 56px 43px 56px;
|
||||
.plan-features {
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
li {
|
||||
text-align: left;
|
||||
padding: 4px 0px;
|
||||
font-weight: 400;
|
||||
font-size: $default-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
public/Dashboard/scss/common/dark/components/_tables.scss
Normal file
44
public/Dashboard/scss/common/dark/components/_tables.scss
Normal file
@ -0,0 +1,44 @@
|
||||
/* Tables */
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
thead {
|
||||
th {
|
||||
border-top: 0;
|
||||
border-bottom-width: 1px;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
i {
|
||||
margin-left: 0.325rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
th,
|
||||
td {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td {
|
||||
font-size: $default-font-size;
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.badge {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.table-borderless {
|
||||
border: none;
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&.table-bordered {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
131
public/Dashboard/scss/common/dark/components/_tabs.scss
Normal file
131
public/Dashboard/scss/common/dark/components/_tabs.scss
Normal file
@ -0,0 +1,131 @@
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
background: $nav-tabs-link-bg;
|
||||
color: $nav-tabs-link-color;
|
||||
border-radius: 0;
|
||||
border: 1px solid $nav-tabs-border-color;
|
||||
padding: .75rem 1.5rem;
|
||||
@media (max-width: 767px) {
|
||||
padding: .75rem .5rem;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
border-radius: 4px 0 0 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs-vertical {
|
||||
@extend .flex-column;
|
||||
border-bottom: 0;
|
||||
.nav-link {
|
||||
&.active {
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs-vertical-custom {
|
||||
@extend .nav-tabs-vertical;
|
||||
background: theme-color(primary);
|
||||
border-radius: 4px;
|
||||
.nav-link {
|
||||
background: transparent;
|
||||
border-color: rgba($white, .2);
|
||||
color: darken(theme-color(primary), 30%);
|
||||
font-weight: 600;
|
||||
padding: 1.75rem;
|
||||
&.active {
|
||||
color: $white;
|
||||
border-color: rgba($white, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 1rem;
|
||||
.nav-link {
|
||||
border: 1px solid $border-color;
|
||||
padding: .5rem 1.75rem;
|
||||
@media (max-width: 767px) {
|
||||
padding: .5rem .5rem;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
margin-right: 1rem;
|
||||
@media (max-width: 767px) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
&.nav-pills-vertical {
|
||||
@extend .flex-column;
|
||||
border-bottom: 0;
|
||||
.nav-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&.nav-pills-custom {
|
||||
border-bottom: 0;
|
||||
.nav-link {
|
||||
border-radius: 20px;
|
||||
padding: .5rem 2.5rem;
|
||||
background: $nav-pills-custom-bg;
|
||||
color: $black;
|
||||
&.active {
|
||||
background: theme-color(danger);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Pills color variations */
|
||||
@each $color, $value in $theme-colors {
|
||||
.nav-pills-#{$color} {
|
||||
.nav-link {
|
||||
color: $value;
|
||||
&.active {
|
||||
background: theme-color($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-content {
|
||||
border: 1px solid $border-color;
|
||||
border-top: 0;
|
||||
padding: 2rem 1rem;
|
||||
text-align: justify;
|
||||
&.tab-content-vertical {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
&.tab-content-vertical-custom {
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
&.tab-content-custom-pill {
|
||||
border: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
154
public/Dashboard/scss/common/dark/components/_timeline.scss
Normal file
154
public/Dashboard/scss/common/dark/components/_timeline.scss
Normal file
@ -0,0 +1,154 @@
|
||||
/* Timeline */
|
||||
|
||||
.timeline {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&:before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
background-color: $border-color;
|
||||
left: 50%;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
.timeline-wrapper {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 90px;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.timeline-panel {
|
||||
border-radius: 2px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
@include border-radius(6px);
|
||||
box-shadow: 1px -1px 24px 0 rgba($white, 0.09);
|
||||
width: 35%;
|
||||
margin-left: 15%;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: "";
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top:10px;
|
||||
right: -14px;
|
||||
display: inline-block;
|
||||
border-top: 14px solid transparent;
|
||||
border-left: 14px solid $card-bg;
|
||||
border-right: 0 solid $card-bg;
|
||||
border-bottom: 14px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
.timeline-title {
|
||||
margin-top: 0;
|
||||
color: theme-color(dark);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.timeline-body {
|
||||
p {
|
||||
&+p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.timeline-footer {
|
||||
span {
|
||||
font-size: .6875rem;
|
||||
}
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeline-badge {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: calc(50% - 7px);
|
||||
z-index: 10;
|
||||
border-top-right-radius: 50%;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
border: 2px solid $border-color;
|
||||
i {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&.timeline-inverted {
|
||||
padding-right: 0;
|
||||
padding-left: 90px;
|
||||
.timeline-panel {
|
||||
margin-left: auto;
|
||||
margin-right: 15%;
|
||||
&:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 14px;
|
||||
left: -14px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.timeline {
|
||||
.timeline-wrapper {
|
||||
padding-right: 150px;
|
||||
&.timeline-inverted {
|
||||
padding-left: 150px;
|
||||
}
|
||||
.timeline-panel {
|
||||
width: 60%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.timeline {
|
||||
.timeline-wrapper {
|
||||
.timeline-panel {
|
||||
width: 68%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.timeline-wrapper-#{$color} {
|
||||
.timeline-panel {
|
||||
&:before {
|
||||
background: theme-color($color);
|
||||
}
|
||||
}
|
||||
.timeline-badge {
|
||||
background: theme-color($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
88
public/Dashboard/scss/common/dark/components/_todo-list.scss
Normal file
88
public/Dashboard/scss/common/dark/components/_todo-list.scss
Normal file
@ -0,0 +1,88 @@
|
||||
/* Tabs */
|
||||
|
||||
.add-items {
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding-left: 0;
|
||||
@include placeholder {
|
||||
font-size: 1rem;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-left: .5rem;
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.rtl & {
|
||||
margin-left: auto;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
height: 100%;
|
||||
max-height: 390px;
|
||||
overflow: scroll;
|
||||
ul {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
li {
|
||||
@extend .d-flex;
|
||||
@extend .align-items-center;
|
||||
@extend .justify-content-start;
|
||||
font-size: .9375rem;
|
||||
padding: 1.063rem 1.4rem;
|
||||
border: none;
|
||||
margin-bottom: 0.812rem;
|
||||
border-radius: 7px;
|
||||
background: $table-accent-bg;
|
||||
.form-check{
|
||||
@extend %ellipsor;
|
||||
max-width: 90%;
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
.form-check-label{
|
||||
@extend%ellipsor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.remove {
|
||||
@extend .ml-auto;
|
||||
@extend .text-secondary;
|
||||
.rtl & {
|
||||
@extend .ml-0;
|
||||
@extend .mr-auto;
|
||||
}
|
||||
cursor: pointer;
|
||||
font-size: .7rem;
|
||||
font-weight: 600;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.completed {
|
||||
.form-check {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: theme-color(info);
|
||||
}
|
||||
.remove {
|
||||
@extend .text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
public/Dashboard/scss/common/dark/components/_tooltips.scss
Normal file
41
public/Dashboard/scss/common/dark/components/_tooltips.scss
Normal file
@ -0,0 +1,41 @@
|
||||
/* Tooltips */
|
||||
|
||||
.tooltip-static-demo {
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
margin: 0 10px 10px 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.bs-tooltip-bottom-demo,
|
||||
.bs-tooltip-top-demo {
|
||||
.arrow {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
.bs-tooltip-right-demo,
|
||||
.bs-tooltip-left-demo {
|
||||
.arrow {
|
||||
&:before {
|
||||
top: calc((100%-#{$tooltip-arrow-width})/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
font-size: $tooltip-font-size;
|
||||
min-width: 5.625rem;
|
||||
.tooltip-inner {
|
||||
font-weight: 400;
|
||||
}
|
||||
z-index: 1029;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.tooltip-#{$color} {
|
||||
@include tooltip-variant($color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
.profile-navbar {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
&.active {
|
||||
color: theme-color(primary);
|
||||
}
|
||||
i {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-feed-item {
|
||||
padding: 1.5rem 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/* Bar loader */
|
||||
.bar-loader{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bar-loader span{
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 30px;
|
||||
background-color: rgba(theme-color(danger), .7);
|
||||
}
|
||||
|
||||
.bar-loader span:nth-child(1){
|
||||
animation: grow 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.bar-loader span:nth-child(2){
|
||||
animation: grow 1s ease-in-out 0.15s infinite;
|
||||
}
|
||||
|
||||
.bar-loader span:nth-child(3){
|
||||
animation: grow 1s ease-in-out 0.30s infinite;
|
||||
}
|
||||
|
||||
.bar-loader span:nth-child(4){
|
||||
animation: grow 1s ease-in-out 0.45s infinite;
|
||||
}
|
||||
|
||||
@keyframes grow{
|
||||
0%, 100%{
|
||||
-webkit-transform: scaleY(1);
|
||||
-ms-transform: scaleY(1);
|
||||
-o-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
50%{
|
||||
-webkit-transform: scaleY(1.8);
|
||||
-ms-transform: scaleY(1.8);
|
||||
-o-transform: scaleY(1.8);
|
||||
transform: scaleY(1.8);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
/* Circle loader */
|
||||
.circle-loader {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.circle-loader:before, .circle-loader:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
border: 10px solid transparent;
|
||||
border-top-color: theme-color(warning);
|
||||
}
|
||||
|
||||
.circle-loader:before{
|
||||
z-index: 10;
|
||||
animation: spin 1s infinite;
|
||||
}
|
||||
|
||||
.circle-loader:after{
|
||||
border: 10px solid theme-color(secondary);
|
||||
}
|
||||
|
||||
@keyframes spin{
|
||||
0%{
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,116 @@
|
||||
#pgloading {
|
||||
position: static;
|
||||
.bokeh {
|
||||
font-size: 100px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
border: .01em solid $border-color;
|
||||
list-style: none;
|
||||
padding:0;
|
||||
li {
|
||||
position: absolute;
|
||||
width: .2em;
|
||||
height: .2em;
|
||||
border-radius: 50%;
|
||||
&:nth-child(1) {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin: 0 0 0 -.1em;
|
||||
background: theme-color(success);
|
||||
-webkit-transform-origin: 50% 250%;
|
||||
transform-origin: 50% 250%;
|
||||
-webkit-animation:
|
||||
rota 1.13s linear infinite,
|
||||
opa 3.67s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.13s linear infinite,
|
||||
opa 3.67s ease-in-out infinite alternate;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin: -.1em 0 0 0;
|
||||
background: theme-color(danger);
|
||||
-webkit-transform-origin: -150% 50%;
|
||||
transform-origin: -150% 50%;
|
||||
-webkit-animation:
|
||||
rota 1.86s linear infinite,
|
||||
opa 4.29s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.86s linear infinite,
|
||||
opa 4.29s ease-in-out infinite alternate;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
margin: 0 0 0 -.1em;
|
||||
background: theme-color(warning);
|
||||
-webkit-transform-origin: 50% -150%;
|
||||
transform-origin: 50% -150%;
|
||||
-webkit-animation:
|
||||
rota 1.45s linear infinite,
|
||||
opa 5.12s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.45s linear infinite,
|
||||
opa 5.12s ease-in-out infinite alternate;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin: -.1em 0 0 0;
|
||||
background: theme-color(primary);
|
||||
-webkit-transform-origin: 250% 50%;
|
||||
transform-origin: 250% 50%;
|
||||
-webkit-animation:
|
||||
rota 1.72s linear infinite,
|
||||
opa 5.25s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.72s linear infinite,
|
||||
opa 5.25s ease-in-out infinite alternate;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rota {
|
||||
from { }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes rota {
|
||||
from { }
|
||||
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes opa {
|
||||
0% { }
|
||||
12.0% { opacity: 0.80; }
|
||||
19.5% { opacity: 0.88; }
|
||||
37.2% { opacity: 0.64; }
|
||||
40.5% { opacity: 0.52; }
|
||||
52.7% { opacity: 0.69; }
|
||||
60.2% { opacity: 0.60; }
|
||||
66.6% { opacity: 0.52; }
|
||||
70.0% { opacity: 0.63; }
|
||||
79.9% { opacity: 0.60; }
|
||||
84.2% { opacity: 0.75; }
|
||||
91.0% { opacity: 0.87; }
|
||||
}
|
||||
|
||||
@keyframes opa {
|
||||
0% { }
|
||||
12.0% { opacity: 0.80; }
|
||||
19.5% { opacity: 0.88; }
|
||||
37.2% { opacity: 0.64; }
|
||||
40.5% { opacity: 0.52; }
|
||||
52.7% { opacity: 0.69; }
|
||||
60.2% { opacity: 0.60; }
|
||||
66.6% { opacity: 0.52; }
|
||||
70.0% { opacity: 0.63; }
|
||||
79.9% { opacity: 0.60; }
|
||||
84.2% { opacity: 0.75; }
|
||||
91.0% { opacity: 0.87; }
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
/* Dot opacity loader */
|
||||
|
||||
.dot-opacity-loader {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dot-opacity-loader span{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
background-color: theme-color(primary);
|
||||
margin: 35px 5px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dot-opacity-loader span:nth-child(1){
|
||||
animation: opacitychange 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.dot-opacity-loader span:nth-child(2){
|
||||
animation: opacitychange 1s ease-in-out 0.33s infinite;
|
||||
}
|
||||
|
||||
.dot-opacity-loader span:nth-child(3){
|
||||
animation: opacitychange 1s ease-in-out 0.66s infinite;
|
||||
}
|
||||
|
||||
@keyframes opacitychange{
|
||||
0%, 100%{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
/* Flip square */
|
||||
|
||||
.flip-square-loader{
|
||||
-webkit-perspective: 120px;
|
||||
-moz-perspective: 120px;
|
||||
-ms-perspective: 120px;
|
||||
perspective: 120px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.flip-square-loader:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: rgba(theme-color(success), .7);
|
||||
animation: flip 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateY(180deg) rotateX(180deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,137 @@
|
||||
.glowing-loader {
|
||||
position: relative;
|
||||
}
|
||||
.s2 {
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
top: 50px;
|
||||
background-color: transparent;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.s1 {
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
left: 50%;
|
||||
top: 50px;
|
||||
transform-origin: center;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bigcon {
|
||||
position: absolute;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
left: 50%;
|
||||
top: 50px;
|
||||
transform-origin: center;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
background-color: transparent;
|
||||
animation: bigcon 2s infinite linear;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
.b {
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.s {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation: small 2s infinite ease;
|
||||
box-shadow: 0px 2px rgba($black, .3);
|
||||
background-color: theme-color(primary);
|
||||
}
|
||||
|
||||
.s:nth-child(1) {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
.s:nth-child(2) {
|
||||
top: 0%;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
.s:nth-child(3) {
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
}
|
||||
|
||||
.s:nth-child(4) {
|
||||
bottom: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
.big {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 15px;
|
||||
box-shadow:0px 0px 10px theme-color(primary), 0px 0px 20px theme-color(primary), 0px 0px 30px theme-color(primary), 0px 0px 50px theme-color(primary), 0px 0px 60px theme-color(primary) ;
|
||||
z-index: 1;
|
||||
background-color: theme-color(primary);
|
||||
animation: bigball 1s infinite linear;
|
||||
}
|
||||
|
||||
.sb1{
|
||||
animation-delay: -1.75s;
|
||||
}
|
||||
.sb6{
|
||||
animation-delay: -1.5s;
|
||||
}
|
||||
.sb2{
|
||||
animation-delay: -1.25s;
|
||||
}
|
||||
.sb7{
|
||||
animation-delay: -1s;
|
||||
}
|
||||
.sb3{
|
||||
animation-delay: -0.75s;
|
||||
}
|
||||
.sb8{
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.sb4{
|
||||
animation-delay: -0.25s;
|
||||
}
|
||||
.sb5{
|
||||
animation-delay: -0s;
|
||||
}
|
||||
|
||||
@keyframes bigcon {
|
||||
0% {
|
||||
transform-origin: center;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
transform-origin: center;
|
||||
transform: translate(-50%, -50%) rotate(405deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes small {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
background-color: lighten(theme-color(primary), 20%);
|
||||
}
|
||||
10% {
|
||||
transform: scale(1.3);
|
||||
background-color: theme-color(primary);
|
||||
}
|
||||
15% {
|
||||
transform: scale(1);
|
||||
}
|
||||
25%{
|
||||
transform: scale(1);
|
||||
background-color: theme-color(primary);
|
||||
}
|
||||
100%{
|
||||
transform: scale(1);
|
||||
background-color: theme-color(primary);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
/* Jumping dots loader */
|
||||
.jumping-dots-loader {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.jumping-dots-loader span{
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(theme-color(danger), .8);
|
||||
margin: 35px 5px;
|
||||
}
|
||||
|
||||
.jumping-dots-loader span:nth-child(1){
|
||||
animation: bounce 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.jumping-dots-loader span:nth-child(2){
|
||||
animation: bounce 1s ease-in-out 0.33s infinite;
|
||||
}
|
||||
|
||||
.jumping-dots-loader span:nth-child(3){
|
||||
animation: bounce 1s ease-in-out 0.66s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0%, 75%, 100%{
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
25%{
|
||||
-webkit-transform: translateY(-20px);
|
||||
-ms-transform: translateY(-20px);
|
||||
-o-transform: translateY(-20px);
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
/* Loaders */
|
||||
|
||||
@import "variables";
|
||||
@import "colored-balls";
|
||||
@import "glowing-ball";
|
||||
@import "pixel-loader";
|
||||
@import "square-box";
|
||||
@import "circle-loader";
|
||||
@import "jumping-dots-loader";
|
||||
@import "bar-loader";
|
||||
@import "square-path-loader";
|
||||
@import "dot-opacity-loader";
|
||||
@import "flip-square-loader";
|
||||
@import "moving-square-loader";
|
||||
@ -0,0 +1,36 @@
|
||||
/* Moving square loader */
|
||||
|
||||
.moving-square-loader {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.moving-square-loader:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: calc(50% - 10px);
|
||||
left: 0px;
|
||||
background-color: rgba(theme-color(danger), .7);
|
||||
animation: rotatemove 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes rotatemove{
|
||||
0%{
|
||||
-webkit-transform: scale(1) translateX(0px);
|
||||
-ms-transform: scale(1) translateX(0px);
|
||||
-o-transform: scale(1) translateX(0px);
|
||||
transform: scale(1) translateX(0px);
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-transform: scale(2) translateX(45px);
|
||||
-ms-transform: scale(2) translateX(45px);
|
||||
-o-transform: scale(2) translateX(45px);
|
||||
transform: scale(2) translateX(45px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
/* Pixel loader */
|
||||
.pixel-loader {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: theme-color(warning);
|
||||
color: theme-color(warning);
|
||||
margin: 80px auto;
|
||||
box-shadow: 15px 15px 0 0,
|
||||
-15px -15px 0 0,
|
||||
15px -15px 0 0,
|
||||
-15px 15px 0 0,
|
||||
0 15px 0 0,
|
||||
15px 0 0 0,
|
||||
-15px 0 0 0,
|
||||
0 -15px 0 0;
|
||||
animation: anim 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% {
|
||||
-webkit-filter: hue-rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 20px 20px 0 0,
|
||||
-20px -20px 0 0,
|
||||
20px -20px 0 0,
|
||||
-20px 20px 0 0,
|
||||
0 10px 0 0,
|
||||
10px 0 0 0,
|
||||
-10px 0 0 0,
|
||||
0 -10px 0 0;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: 20px 20px 0 0,
|
||||
-20px -20px 0 0,
|
||||
20px -20px 0 0,
|
||||
-20px 20px 0 0,
|
||||
0 10px 0 0,
|
||||
10px 0 0 0,
|
||||
-10px 0 0 0,
|
||||
0 -10px 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
-webkit-filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,90 @@
|
||||
/* Square box loader */
|
||||
|
||||
@keyframes dyinglight {
|
||||
15% {
|
||||
transform: scale(1.6)
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-89deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-90deg)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.square-box-loader {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.square-box-loader-square {
|
||||
display: block;
|
||||
width: $square-size;
|
||||
height: $square-size;
|
||||
background: theme-color(primary);
|
||||
}
|
||||
|
||||
|
||||
.square-box-loader-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform-origin: 50% 50% 0;
|
||||
animation: dyinglight 1s ease infinite;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.square-box-loader-corner-top:before,
|
||||
.square-box-loader-corner-top:after,
|
||||
.square-box-loader-corner-bottom:before,
|
||||
.square-box-loader-corner-bottom:after {
|
||||
position: absolute;
|
||||
width: $square-corner-size;
|
||||
height: $square-corner-size;
|
||||
color: theme-color(primary);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
.square-box-loader-corner-top {
|
||||
&:before {
|
||||
border-left: 1px solid;
|
||||
border-top: 1px solid;
|
||||
top: -$square-corner-position;
|
||||
left: -$square-corner-position;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-right: 1px solid;
|
||||
border-top: 1px solid;
|
||||
top: -$square-corner-position;
|
||||
right: -$square-corner-position;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.square-box-loader-corner-bottom {
|
||||
&:before {
|
||||
border-left: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
bottom: -$square-corner-position;
|
||||
left: -$square-corner-position;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-right: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
bottom: -$square-corner-position;
|
||||
right: -$square-corner-position;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
/* Square path loader */
|
||||
|
||||
.square-path-loader {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.square-path-loader:before, .square-path-loader:after{
|
||||
content: "";
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - 10px);
|
||||
background-color: rgba(theme-color(success), .7);
|
||||
animation: squaremove 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.square-path-loader:after{
|
||||
bottom: 0;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes squaremove{
|
||||
0%, 100%{
|
||||
-webkit-transform: translate(0,0) rotate(0);
|
||||
-ms-transform: translate(0,0) rotate(0);
|
||||
-o-transform: translate(0,0) rotate(0);
|
||||
transform: translate(0,0) rotate(0);
|
||||
}
|
||||
|
||||
25%{
|
||||
-webkit-transform: translate(40px,40px) rotate(45deg);
|
||||
-ms-transform: translate(40px,40px) rotate(45deg);
|
||||
-o-transform: translate(40px,40px) rotate(45deg);
|
||||
transform: translate(40px,40px) rotate(45deg);
|
||||
}
|
||||
|
||||
50%{
|
||||
-webkit-transform: translate(0px,80px) rotate(0deg);
|
||||
-ms-transform: translate(0px,80px) rotate(0deg);
|
||||
-o-transform: translate(0px,80px) rotate(0deg);
|
||||
transform: translate(0px,80px) rotate(0deg);
|
||||
}
|
||||
|
||||
75%{
|
||||
-webkit-transform: translate(-40px,40px) rotate(45deg);
|
||||
-ms-transform: translate(-40px,40px) rotate(45deg);
|
||||
-o-transform: translate(-40px,40px) rotate(45deg);
|
||||
transform: translate(-40px,40px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
$square-box-scale: 3;
|
||||
$square-size: 30px;
|
||||
$square-corner-size: ceil($square-size / $square-box-scale);
|
||||
$square-corner-position: ceil($square-corner-size / $square-box-scale);
|
||||
@ -0,0 +1,87 @@
|
||||
/* Mail List Container */
|
||||
|
||||
.email-wrapper {
|
||||
.mail-list-container {
|
||||
background: $card-bg;
|
||||
border-left: 1px solid $border-color;
|
||||
height: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mail-list {
|
||||
border-bottom: 1px solid $border-color;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.form-check {
|
||||
margin-top: 12px;
|
||||
width: 11%;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 83%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.sender-name {
|
||||
font-size: $default-font-size;
|
||||
font-weight: 400;
|
||||
@extend %ellipsor;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.message_text {
|
||||
margin: 0;
|
||||
max-width: 93%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@extend .text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
@extend .d-flex;
|
||||
@extend .justify-content-end;
|
||||
width: 5.5%;
|
||||
|
||||
.date {
|
||||
text-align: right;
|
||||
margin: auto 15px auto 0;
|
||||
white-space: nowrap;
|
||||
@extend .text-muted;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: auto 0;
|
||||
color: #ddd;
|
||||
|
||||
&.favorite {
|
||||
color: theme-color(warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.new_mail {
|
||||
background: rgba($white, .2);
|
||||
|
||||
.details {
|
||||
.date {
|
||||
color: color(black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,180 @@
|
||||
/* Mail Sidebar */
|
||||
|
||||
.email-wrapper {
|
||||
.mail-sidebar {
|
||||
background: $card-bg;
|
||||
@media (max-width:769px) {
|
||||
position: relative;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
background: color(white);
|
||||
width: 45%;
|
||||
min-width: 300px;
|
||||
left: -100%;
|
||||
display: block;
|
||||
transition: 0.4s ease;
|
||||
-webkit-transition: 0.4s ease;
|
||||
-moz-transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
width: 100%;
|
||||
float: right;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
@include media-breakpoint-down(sm) {
|
||||
min-height: 100vh;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
height: auto;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
padding: 10px 15px;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
@include justify-content(space-between);
|
||||
|
||||
&:hover {
|
||||
background: rgba($white, 0.2);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $body-color;
|
||||
font-size: $default-font-size;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: $default-font-size;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($white, .2);
|
||||
@include border-radius(4px);
|
||||
}
|
||||
|
||||
&.compose {
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.online-status {
|
||||
margin-top: 1rem;
|
||||
|
||||
.chat {
|
||||
font-size: $default-font-size;
|
||||
color: theme-color(primary);
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
@include border-radius(100%);
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
transform: translateX(-43px) translateY(2px);
|
||||
|
||||
&:after {
|
||||
font-size: 12px;
|
||||
color: $body-color;
|
||||
margin: 0 0 0 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.status.offline {
|
||||
background: theme-color(danger);
|
||||
|
||||
&:after {
|
||||
content: "Offline";
|
||||
}
|
||||
}
|
||||
|
||||
.status.online {
|
||||
background: theme-color(success);
|
||||
|
||||
&:after {
|
||||
content: "Online";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-list {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.profile-list-item {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 6px 0;
|
||||
display: block;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@extend .d-flex;
|
||||
|
||||
.pro-pic {
|
||||
@include display-flex;
|
||||
@include align-items(center);
|
||||
padding: 0;
|
||||
width: 20%;
|
||||
max-width: 40px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
@include border-radius(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
width: 100%;
|
||||
@extend .d-flex;
|
||||
@extend .flex-column;
|
||||
padding: 5px 10px 0 15px;
|
||||
|
||||
.u-name {
|
||||
font-weight: 400;
|
||||
font-size: $default-font-size;
|
||||
line-height: 1;
|
||||
@extend %ellipsor;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.u-designation {
|
||||
font-size: calc(#{$default-font-size} - 0.1rem);
|
||||
@extend %ellipsor;
|
||||
@extend .text-muted;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
/* Message Content */
|
||||
.email-wrapper {
|
||||
.mail-view {
|
||||
background: $card-bg;
|
||||
.message-body {
|
||||
.sender-details {
|
||||
padding: 20px 15px 0;
|
||||
border-bottom: $border-property;
|
||||
@include display-flex;
|
||||
|
||||
.details {
|
||||
padding-bottom: 0;
|
||||
|
||||
.msg-subject {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sender-email {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 400;
|
||||
|
||||
i {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 1px 0 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
padding: 50px 15px;
|
||||
}
|
||||
|
||||
.attachments-sections {
|
||||
ul {
|
||||
list-style: none;
|
||||
border-top: $border-property;
|
||||
padding: 30px 15px 20px;
|
||||
|
||||
li {
|
||||
padding: 10px;
|
||||
margin-right: 20px;
|
||||
border: $border-property;
|
||||
@include border-radius(5px);
|
||||
@extend .d-inline-flex;
|
||||
@extend .flex-row;
|
||||
@extend .align-items-stretch;
|
||||
|
||||
.thumb {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
@extend .d-flex;
|
||||
@extend .justify-content-center;
|
||||
@extend .align-items-center;
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
p.file-name {
|
||||
display: block;
|
||||
@extend %ellipsor;
|
||||
margin-bottom: 0;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@extend .d-flex;
|
||||
@extend .align-items-center;
|
||||
|
||||
.file-size {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/* Ace Editor */
|
||||
|
||||
.ace_editor {
|
||||
margin: auto;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
font: 14px/normal SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
.ace_content{
|
||||
font-size: $default-font-size;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,132 @@
|
||||
/* Avgrund Popup */
|
||||
|
||||
.avgrund-popin {
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
padding: 37px 33px;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
top: 50%;
|
||||
left: 53%;
|
||||
z-index: 1000;
|
||||
font-size: $default-font-size;
|
||||
font-weight: 400;
|
||||
font-weight: initial;
|
||||
line-height: 1.85;
|
||||
@include border-radius(10px);
|
||||
|
||||
-webkit-transform: scale(0.8);
|
||||
-moz-transform: scale(0.8);
|
||||
-ms-transform: scale(0.8);
|
||||
-o-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
p{
|
||||
font-size: $default-font-size;
|
||||
font-weight: 400;
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.avgrund-overlay {
|
||||
background: $modal-backdrop-bg;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
body.avgrund-ready,
|
||||
.avgrund-ready .avgrund-popin,
|
||||
.avgrund-ready .avgrund-overlay {
|
||||
-webkit-transform-origin: 50% 50%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
-webkit-transition: 0.3s all ease-out;
|
||||
-moz-transition: 0.3s all ease-out;
|
||||
-ms-transition: 0.3s all ease-out;
|
||||
-o-transition: 0.3s all ease-out;
|
||||
transition: 0.3s all ease-out;
|
||||
}
|
||||
|
||||
body.avgrund-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avgrund-active .avgrund-popin {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
@media(max-width: 767px) {
|
||||
-webkit-transform: scale(0.8);
|
||||
-moz-transform: scale(0.8);
|
||||
-ms-transform: scale(0.8);
|
||||
-o-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.avgrund-active .avgrund-overlay {
|
||||
visibility: visible;
|
||||
opacity: .5;
|
||||
filter: alpha(opacity=50);
|
||||
height: 20000px;
|
||||
}
|
||||
|
||||
.avgrund-popin.stack {
|
||||
-webkit-transform: scale(1.5);
|
||||
-moz-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
-o-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.avgrund-active .avgrund-popin.stack {
|
||||
-webkit-transform: scale(1.1);
|
||||
-moz-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
-o-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.avgrund-active .avgrund-blur {
|
||||
}
|
||||
|
||||
/* Optional close button styles */
|
||||
.avgrund-close {
|
||||
display: block;
|
||||
color:#fff;
|
||||
background: $body-color;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
text-align:center;
|
||||
line-height: 16px;
|
||||
|
||||
@include border-radius(50px);
|
||||
&:hover{
|
||||
color: #fff;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,154 @@
|
||||
/* Chartist */
|
||||
|
||||
// Line Charts Starts
|
||||
// Data -1
|
||||
|
||||
.ct-series-a .ct-line {
|
||||
stroke: lighten($blue, 15);
|
||||
stroke-width: 3px;
|
||||
stroke-dasharray: 10px 20px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-point {
|
||||
stroke: lighten($blue, 1);
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
// Data -2
|
||||
|
||||
.ct-series-b .ct-line {
|
||||
stroke: lighten($green, 15);
|
||||
stroke-width: 3px;
|
||||
stroke-dasharray: 10px 20px;
|
||||
}
|
||||
|
||||
.ct-series-b .ct-point {
|
||||
stroke: lighten($green, 1);
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
// Data -3
|
||||
|
||||
.ct-series-c .ct-line {
|
||||
stroke: lighten($orange, 15);
|
||||
stroke-width: 3px;
|
||||
stroke-dasharray: 10px 20px;
|
||||
}
|
||||
|
||||
.ct-series-c .ct-point {
|
||||
stroke: lighten($orange, 1);
|
||||
stroke-width: 10px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
// Line Charts Ends
|
||||
// Bar Charts Starts
|
||||
// Data -1
|
||||
|
||||
.ct-series-a .ct-bar {
|
||||
stroke: lighten($blue, 15);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
// Data -2
|
||||
|
||||
.ct-series-b .ct-bar {
|
||||
stroke: lighten($green, 15);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
// Data -3
|
||||
|
||||
.ct-series-c .ct-bar {
|
||||
stroke: lighten($orange, 15);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
// Data -4
|
||||
|
||||
.ct-series-d .ct-bar {
|
||||
stroke: lighten($red, 15);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
// Bar Charts Ends
|
||||
// Pie Chart Starts
|
||||
// Data -1
|
||||
.ct-series-a .ct-slice-pie {
|
||||
fill: lighten($blue, 15);
|
||||
stroke-width: 4px;
|
||||
}
|
||||
// Data -2
|
||||
|
||||
.ct-series-b .ct-slice-pie {
|
||||
fill: lighten($green, 15);
|
||||
stroke-width: 4px;
|
||||
}
|
||||
// Data 3
|
||||
|
||||
.ct-series-c .ct-slice-pie {
|
||||
fill: lighten($red, 15);
|
||||
stroke-width: 4px;
|
||||
}
|
||||
// Data -4
|
||||
|
||||
.ct-series-d .ct-slice-pie {
|
||||
fill: lighten($orange, 15);
|
||||
stroke-width: 4px;
|
||||
}
|
||||
// Pie Chart Starts
|
||||
// Donut chart Starts
|
||||
// Data -1
|
||||
.ct-series-a .ct-slice-donut-solid {
|
||||
fill: lighten($blue, 15);
|
||||
}
|
||||
|
||||
// Data -2
|
||||
.ct-series-b .ct-slice-donut-solid {
|
||||
fill: lighten($green, 15);
|
||||
}
|
||||
|
||||
// Data -3
|
||||
.ct-series-c .ct-slice-donut-solid {
|
||||
fill: lighten($red, 15);
|
||||
}
|
||||
|
||||
// Data -d
|
||||
.ct-series-a .ct-slice-donut-solid {
|
||||
fill: lighten($orange, 15);
|
||||
}
|
||||
|
||||
// E-commerce Dashboard Chart
|
||||
#ct-chart-dash-barChart {
|
||||
// Data -1
|
||||
.ct-series-a .ct-bar {
|
||||
stroke: lighten($red, 10);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
// Data -2
|
||||
.ct-series-b .ct-bar {
|
||||
stroke: lighten($blue, 10);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
// Data -3
|
||||
.ct-series-c .ct-bar {
|
||||
stroke: lighten($blue, 15);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
// Data -4
|
||||
.ct-series-d .ct-bar {
|
||||
stroke: lighten($blue, 20);
|
||||
stroke-width: 20px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: squre;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/* CodeMirror */
|
||||
|
||||
.CodeMirror {
|
||||
font-size: $default-font-size;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
min-height: auto;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
min-height: auto;
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
/* Colcade */
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.grid {
|
||||
border: 1px solid color(gray-light)est;
|
||||
}
|
||||
|
||||
.grid:after {
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.grid-col {
|
||||
float: left;
|
||||
width: 49%;
|
||||
margin-right: 2%;
|
||||
background: rgba(theme-color(primary), .2);
|
||||
}
|
||||
|
||||
.grid-col--4 { margin-right: 0; }
|
||||
|
||||
/* hide two middle */
|
||||
.grid-col--2, .grid-col--3 { display: none; }
|
||||
|
||||
@media ( min-width: 768px ) {
|
||||
.grid-col { width: 32%; }
|
||||
.grid-col--2 { display: block; }
|
||||
}
|
||||
|
||||
@media ( min-width: 1200px ) {
|
||||
.grid-col { width: 23.5%; }
|
||||
.grid-col--2, .grid-col--3 { display: block; }
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background: theme-color(primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid-item--a { height: 80px; }
|
||||
.grid-item--b { height: 140px; }
|
||||
.grid-item--c { height: 300px; }
|
||||
@ -0,0 +1,21 @@
|
||||
/* Colorpicker */
|
||||
|
||||
.asColorPicker-dropdown {
|
||||
max-width: initial;
|
||||
}
|
||||
.asColorPicker-trigger{
|
||||
height: auto;
|
||||
border: 0;
|
||||
span {
|
||||
border-radius: 2px;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-input {
|
||||
@extend .form-control;
|
||||
}
|
||||
|
||||
.asColorPicker-wrap {
|
||||
@extend .input-group;
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
/* Context Menu */
|
||||
|
||||
.context-menu-icon {
|
||||
&:before {
|
||||
color: $body-color;
|
||||
font: normal normal normal 15px/1 "themify";
|
||||
}
|
||||
&.context-menu-icon-cut {
|
||||
&:before {
|
||||
content: '\e613';
|
||||
}
|
||||
}
|
||||
&.context-menu-icon-edit {
|
||||
&:before {
|
||||
content: '\e61c';
|
||||
}
|
||||
}
|
||||
&.context-menu-icon-copy {
|
||||
&:before {
|
||||
content: '\e6a3';
|
||||
}
|
||||
}
|
||||
&.context-menu-icon-paste {
|
||||
&:before {
|
||||
content: '\e6c8';
|
||||
}
|
||||
}
|
||||
&.context-menu-icon-delete {
|
||||
&:before {
|
||||
content: '\e605';
|
||||
}
|
||||
}
|
||||
&.context-menu-icon-quit {
|
||||
&:before {
|
||||
content: '\e646';
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu-list {
|
||||
background: $card-bg;
|
||||
box-shadow: none;
|
||||
border: 1px solid $border-color;
|
||||
.context-menu-item {
|
||||
background: $card-bg;
|
||||
span {
|
||||
color: $body-color;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
&.context-menu-hover {
|
||||
background: rgba($white, .3);
|
||||
span {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu-separator {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,212 @@
|
||||
/* Data Tables */
|
||||
|
||||
.dataTables_wrapper {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
label {
|
||||
font-size: .8125rem;
|
||||
}
|
||||
select {
|
||||
@extend .form-control;
|
||||
padding: .4rem;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.dataTables_length {
|
||||
select {
|
||||
min-width: 70px;
|
||||
margin-left: .25rem;
|
||||
margin-right: .25rem;
|
||||
width: -webkit-fill-available;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.dataTable {
|
||||
.btn {
|
||||
padding: 0.1rem 1rem;
|
||||
vertical-align: top;
|
||||
i {
|
||||
font-size: .875rem;
|
||||
margin-right: .3rem;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
.sorting,
|
||||
.sorting_asc,
|
||||
.sorting_desc,
|
||||
.sorting_asc_disabled,
|
||||
.sorting_desc_disabled {
|
||||
&:before,
|
||||
&:after {
|
||||
line-height: 2.5;
|
||||
font-family: 'themify';
|
||||
font-size: .65rem;
|
||||
}
|
||||
&:before {
|
||||
content: "\e627";
|
||||
right: 1.2em;
|
||||
}
|
||||
&:after {
|
||||
content: "\e62a";
|
||||
right: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_paginate {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.dataTables_info {
|
||||
font-size: $default-font-size;
|
||||
@media(max-width: 576px) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.expandable-table {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
background: theme-color(primary);
|
||||
padding: 10px;
|
||||
color: $white;
|
||||
font-size: 14px;
|
||||
&:first-child {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tr {
|
||||
&.odd,
|
||||
&.even {
|
||||
box-shadow: 0px 0px 8px rgba(12, 12, 14, 1);
|
||||
border-radius: 4px;
|
||||
background: $table-accent-bg;
|
||||
td {
|
||||
|
||||
&:first-child {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
&.select-checkbox{
|
||||
padding-left: 26px;
|
||||
&:after {
|
||||
top: 2rem;
|
||||
}
|
||||
&:before {
|
||||
top: 2rem;
|
||||
}
|
||||
}
|
||||
padding: 14px;
|
||||
font-size: 14px;
|
||||
.cell-hilighted {
|
||||
background-color: theme-color(primary);
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
color: $color-light-blue;
|
||||
}
|
||||
p {
|
||||
opacity: .6;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: $color-light-blue;
|
||||
}
|
||||
}
|
||||
.expanded-table-normal-cell {
|
||||
padding: 10px;
|
||||
p {
|
||||
font-size: 11px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h6 {
|
||||
color: $expanded-table-cell-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
.highlighted-alpha {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 100%;
|
||||
background: $alpha-orange;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
padding-top: 7px;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 100%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
&.details-control {
|
||||
&:before {
|
||||
content: '\e64b';
|
||||
font-family: "themify";
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
background:$table-accent-bg;
|
||||
}
|
||||
&.details-control {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.row-bg {
|
||||
background:$card-bg;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
&.shown {
|
||||
td {
|
||||
&.details-control {
|
||||
&:before {
|
||||
content: '\e648';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.expanded-row {
|
||||
background: $card-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
table {
|
||||
&.dataTable {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 2px;
|
||||
tbody {
|
||||
td{
|
||||
&.select-checkbox {
|
||||
&:before {
|
||||
top: 1.4rem;
|
||||
left: 20px;
|
||||
border: 1px solid $border-color;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
&:after {
|
||||
top: 1.5rem;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,247 @@
|
||||
/* Datepicker */
|
||||
.datepicker.datepicker-dropdown,
|
||||
.datepicker.datepicker-inline {
|
||||
padding: 0;
|
||||
width: 30%;
|
||||
max-width: 500px;
|
||||
min-width: 250px;
|
||||
|
||||
.datepicker-days {
|
||||
padding: 0;
|
||||
|
||||
table.table-condensed {
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
&.prev {
|
||||
color: color(gray);
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.datepicker-switch {
|
||||
color: color(gray);
|
||||
background: transparent;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.next {
|
||||
color: grey;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.dow {
|
||||
font-family: $type1;
|
||||
color: color(gray);
|
||||
font-size: 0.875rem;
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
position: relative;
|
||||
top: 13px;
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
|
||||
&.day {
|
||||
font-size: 0.9375rem;
|
||||
padding: 0.5rem 0;
|
||||
color: $body-color;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: theme-color(success);
|
||||
@include border-radius(4px);
|
||||
display: block;
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.today {
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: theme-color(primary);
|
||||
@include border-radius(4px);
|
||||
display: block;
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.old.day {
|
||||
color: #464b57;
|
||||
}
|
||||
|
||||
&.new.day {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&.range-start,
|
||||
&.range-end {
|
||||
background: transparent;
|
||||
position: relative;
|
||||
color: theme-color(success);
|
||||
&::before {
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(theme-color(success), .2);
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&.range {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
&::before {
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #1b1b1b;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker.datepicker-inline {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 250px;
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
&.prev {
|
||||
color: grey;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
&.datepicker-switch {
|
||||
color: theme-color(primary);
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
&.next {
|
||||
color: grey;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
&.dow {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
> div {
|
||||
display: initial;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&.input-group {
|
||||
border: 1px solid $border-color;
|
||||
padding: 0;
|
||||
|
||||
.form-control {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-dropdown {
|
||||
&:after {
|
||||
border-bottom-color: $dropdown-bg;
|
||||
}
|
||||
&:before {
|
||||
border-bottom-color: $border-color;
|
||||
}
|
||||
&.datepicker-orient-top {
|
||||
&:before,
|
||||
&:after {
|
||||
top: auto;
|
||||
}
|
||||
&:after {
|
||||
border-top-color: $dropdown-bg;
|
||||
}
|
||||
&:before {
|
||||
border-top-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
/* Dropify */
|
||||
|
||||
.dropify-wrapper {
|
||||
border: 2px dashed $border-color;
|
||||
background: transparent;
|
||||
@include border-radius(7px);
|
||||
&:hover {
|
||||
background-size: 30px 30px;
|
||||
background-image: -webkit-linear-gradient(135deg,#F2F7F8 25%,transparent 25%,transparent 50%,#F2F7F8 50%,#F2F7F8 75%,transparent 75%,transparent);
|
||||
background-image: linear-gradient(135deg,#F2F7F8 25%,transparent 25%,transparent 50%,#F2F7F8 50%,#F2F7F8 75%,transparent 75%,transparent);
|
||||
-webkit-animation: stripes 2s linear infinite;
|
||||
animation: stripes 2s linear infinite;
|
||||
}
|
||||
.dropify-message {
|
||||
span.file-icon {
|
||||
&:before {
|
||||
display: inline-block;
|
||||
font: normal normal normal 24px/1 "themify";
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
line-height: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: '\e66b';
|
||||
color: $body-color;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: .8125rem;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
.dropify-preview {
|
||||
.dropify-infos {
|
||||
background: rgba(255,255,255,.9);
|
||||
.dropify-infos-inner {
|
||||
.dropify-filename {
|
||||
color: theme-color(primary);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.dropify-infos-message {
|
||||
color :#333;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropify-render {
|
||||
img {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropify-clear {
|
||||
background: #fff;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
color: color(gray);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
/* Dropzone */
|
||||
|
||||
.dropzone {
|
||||
border: 1px solid $border-color;
|
||||
min-height: 200px;
|
||||
background: $content-bg;
|
||||
.dz-message {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
span {
|
||||
font-size: .8125rem;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
.dz-preview {
|
||||
margin: 5px;
|
||||
&.dz-image-preview {
|
||||
background: $content-bg;
|
||||
}
|
||||
.dz-image {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.dz-error-message {
|
||||
top: 80px;
|
||||
left: -35px;
|
||||
}
|
||||
.dz-success-mark,
|
||||
.dz-error-mark {
|
||||
margin-left: -17px;
|
||||
svg {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
/* Flot chart */
|
||||
|
||||
.flot-chart-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.flot-chart {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
canvas {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
max-width: none;
|
||||
height: 400px;
|
||||
}
|
||||
@ -0,0 +1,158 @@
|
||||
/* Full Calendar */
|
||||
|
||||
.fc {
|
||||
button {
|
||||
@extend .btn;
|
||||
@extend .btn-sm;
|
||||
height: auto;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
font-weight: 400;
|
||||
background-color: theme-color(dark);
|
||||
border-color: $border-color;
|
||||
text-transform: capitalize;
|
||||
color: $fullcalendar-color;
|
||||
.fc-icon-right-single-arrow,
|
||||
.fc-icon-left-single-arrow {
|
||||
&:after {
|
||||
color: $fullcalendar-color;
|
||||
font: normal normal normal 15px/1 "themify";
|
||||
}
|
||||
}
|
||||
.fc-icon-right-single-arrow {
|
||||
&:after {
|
||||
content: "\e649";
|
||||
}
|
||||
}
|
||||
.fc-icon-left-single-arrow {
|
||||
&:after {
|
||||
content: "\e64a";
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-button-group {
|
||||
@extend .btn-group;
|
||||
.fc-button {
|
||||
background-color: theme-color(dark);
|
||||
margin: 0;
|
||||
&.fc-state-active {
|
||||
color: theme-color(danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-header-toolbar {
|
||||
margin-top: 2rem;
|
||||
.fc-center {
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.fc-left,
|
||||
.fc-right,
|
||||
.fc-center {
|
||||
float: none;
|
||||
margin-bottom: 10px;
|
||||
&:after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.fc-left {
|
||||
.fc-today-button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.fc-right {
|
||||
.fc-button-group {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-widget-header {
|
||||
border: 0;
|
||||
table {
|
||||
tr {
|
||||
th {
|
||||
border-width: 0 0 1px 0;
|
||||
text-align: right;
|
||||
padding: 1rem;
|
||||
span {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
color: $fullcalendar-color;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fc-unthemed {
|
||||
.fc-row,
|
||||
td {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
.fc-content-skeleton {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
padding: .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-event {
|
||||
border: 0;
|
||||
color: $white;
|
||||
padding: .5rem;
|
||||
&.fc-start {
|
||||
background: theme-color(primary);
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid theme-color(primary);
|
||||
}
|
||||
&.fc-not-start,
|
||||
&.fc-not-end {
|
||||
background: theme-color(danger);
|
||||
border-left: 4px solid theme-color(danger);
|
||||
padding-left: .5rem;
|
||||
}
|
||||
&.fc-not-end {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.fc-title,
|
||||
.fc-time {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-external-events {
|
||||
.fc-event {
|
||||
background: $card-bg;
|
||||
color: $body-color;
|
||||
border-width: 0 0 0 4px;
|
||||
padding: 16px;
|
||||
border-radius: 0;
|
||||
margin-bottom: 10px;
|
||||
&:nth-child(1) {
|
||||
border-color: theme-color(primary);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
border-color: theme-color(danger);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
border-color: theme-color(success);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
border-color: theme-color(info);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
border-color: theme-color(warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/* Google Charts */
|
||||
|
||||
.google-chart-container {
|
||||
.google-charts {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/* Icheck */
|
||||
|
||||
.icheck,
|
||||
.icheck-flat,
|
||||
.icheck-square,
|
||||
.icheck-line {
|
||||
margin-bottom: .5rem;
|
||||
label {
|
||||
font-size: .8125rem;
|
||||
line-height: 1.5;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
/* Jquery File Upload */
|
||||
|
||||
.ajax-upload-dragdrop {
|
||||
border-color: $border-color;
|
||||
border-style: dotted;
|
||||
max-width:100%;
|
||||
span {
|
||||
b {
|
||||
font-size: .8125rem;
|
||||
color: $body-color;
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
.ajax-file-upload {
|
||||
background: theme-color(info);
|
||||
box-shadow: none;
|
||||
height: auto;
|
||||
@extend .btn;
|
||||
}
|
||||
}
|
||||
|
||||
.ajax-file-upload-container {
|
||||
min-height: 100px;
|
||||
.ajax-file-upload-statusbar {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
/* Js-grid */
|
||||
|
||||
.jsgrid {
|
||||
.jsgrid-button {
|
||||
background-image: url(../../images/sprites/jsgrid-icons.png);
|
||||
}
|
||||
.jsgrid-grid-header {
|
||||
background: transparent;
|
||||
border: 1px solid $border-color;
|
||||
border-top: 0;
|
||||
.jsgrid-header-row {
|
||||
> .jsgrid-header-cell {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jsgrid-grid-body {
|
||||
border-color: $border-color;
|
||||
}
|
||||
.jsgrid-table {
|
||||
@extend .table;
|
||||
th {
|
||||
background: transparent;
|
||||
font-weight: initial;
|
||||
font-weight: 600;
|
||||
}
|
||||
.jsgrid-filter-row {
|
||||
input[type=text],
|
||||
select {
|
||||
@extend .form-control;
|
||||
}
|
||||
input[type=number] {
|
||||
@extend .form-control;
|
||||
padding: .56rem 0;
|
||||
}
|
||||
>.jsgrid-cell {
|
||||
background: transparent;
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-row {
|
||||
>.jsgrid-cell {
|
||||
background: transparent;
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-alt-row {
|
||||
>.jsgrid-cell {
|
||||
background: $table-accent-bg;
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jsgrid-header-sort {
|
||||
&:before {
|
||||
margin-top: 10px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.jsgrid-header-sort-asc {
|
||||
&:before {
|
||||
border-color: transparent transparent $body-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-header-sort-desc {
|
||||
&:before {
|
||||
border-color: $body-color transparent transparent
|
||||
}
|
||||
}
|
||||
.jsgrid-pager {
|
||||
line-height: 2;
|
||||
@extend .pagination;
|
||||
@extedn .flex-wrap;
|
||||
.jsgrid-pager-nav-button,
|
||||
.jsgrid-pager-page {
|
||||
@extend .page-item;
|
||||
a {
|
||||
@extend .page-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
.jsgrid-pager-current-page {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: initial;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
/* Jvectormap */
|
||||
|
||||
.jvectormap-container {
|
||||
background: $white;
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
/* Light Gallery */
|
||||
|
||||
.lightGallery{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.image-tile{
|
||||
position: relative;
|
||||
@extend .col-xl-3;
|
||||
@extend .col-lg-3;
|
||||
@extend .col-md-3;
|
||||
@extend .col-md-4;
|
||||
@extend .col-6;
|
||||
margin-bottom: 30px;
|
||||
.demo-gallery-poster{
|
||||
@extend .d-flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
img{
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40%;
|
||||
max-width: 60px;
|
||||
min-width: 20px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
/* Listify */
|
||||
|
||||
.listify-list{
|
||||
input{
|
||||
border: 1px solid $white-smoke;
|
||||
color: color(gray-light);
|
||||
background: #fff;
|
||||
}
|
||||
button{
|
||||
|
||||
}
|
||||
ul.list{
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
li{
|
||||
display: block;
|
||||
border-bottom: $border-property;
|
||||
padding: 15px 10px;
|
||||
h5{
|
||||
color: theme-color("primary");
|
||||
}
|
||||
p{
|
||||
color: color(gray-light);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
.mapael {
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
/* No-ui-slider */
|
||||
|
||||
.noUi-target {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
@include border-radius(0px);
|
||||
&.noUi-horizontal{
|
||||
height: 0.25rem;
|
||||
.noUi-handle {
|
||||
left: -17px;
|
||||
}
|
||||
}
|
||||
&.noUi-vertical{
|
||||
width: 0.25rem;
|
||||
height: 156px;
|
||||
display: inline-block;
|
||||
.noUi-handle {
|
||||
left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-base {
|
||||
background: $noui-base-bg;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
.noUi-connect {
|
||||
background: theme-color(primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.noUi-origin {
|
||||
background: theme-color(success);
|
||||
|
||||
.noUi-handle {
|
||||
background: $white;
|
||||
@include border-radius(100%);
|
||||
border:$border-width solid $border-color;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: -7px;
|
||||
outline: none;
|
||||
@include transition-duration(0.4s);
|
||||
box-shadow: none;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: theme-color(primary);
|
||||
@include border-radius(100%);
|
||||
}
|
||||
.noUi-tooltip {
|
||||
font-weight: 600;
|
||||
@include border-radius(4px);
|
||||
border: none;
|
||||
line-height: 1;
|
||||
font-size: $default-font-size;
|
||||
padding: 13px 12px;
|
||||
bottom: 190%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-pips {
|
||||
.noUi-marker-horizontal,
|
||||
.noUi-marker-vertical {
|
||||
background: $border-color;
|
||||
}
|
||||
.noUi-marker-horizontal {
|
||||
height: 9px;
|
||||
width: 1px;
|
||||
background: $body-color;
|
||||
}
|
||||
.noUi-marker-vertical {
|
||||
height: 1px;
|
||||
width: 9px;
|
||||
}
|
||||
.noUi-value {
|
||||
color: $body-color;
|
||||
font-size: 0.94rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Slider Color variations */
|
||||
@each $color, $value in $theme-colors {
|
||||
.slider-#{$color} {
|
||||
@include slider-color-variant($value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
/* Owl-carousel */
|
||||
|
||||
.owl-carousel {
|
||||
img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
&.full-width {
|
||||
.owl-nav {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
.owl-prev,
|
||||
.owl-next {
|
||||
background: transparent;
|
||||
color: $white;
|
||||
i {
|
||||
&:before {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba($black, .5);
|
||||
border-radius: 100%;
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
line-height: 2;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.owl-prev {
|
||||
float: left;
|
||||
}
|
||||
.owl-next {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.owl-dots {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.item-video {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/* Progressbar-js */
|
||||
|
||||
.progress-bar-js-line {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.progressbar-js-circle {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
@ -0,0 +1,142 @@
|
||||
/* Pws-tabs */
|
||||
|
||||
.pws_tabs_container {
|
||||
ul.pws_tabs_controll {
|
||||
li {
|
||||
&:first-child {
|
||||
a {
|
||||
@include border-radius(5px 0px 0px 0px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
a {
|
||||
border-right: 1px solid theme-color(primary);
|
||||
@include border-radius(0px 5px 0px 0px);
|
||||
}
|
||||
}
|
||||
a {
|
||||
border: 1px solid theme-color(primary);
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
background: #fff;
|
||||
color: theme-color(primary);
|
||||
padding: 0.6em 1.3em;
|
||||
margin-right: 0;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
color: theme-color(primary);
|
||||
}
|
||||
|
||||
&.pws_tab_active {
|
||||
background: theme-color(primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-tabs {
|
||||
border: 1px solid theme-color(primary);
|
||||
@include border-radius(0px 5px 5px 5px);
|
||||
overflow: hidden;
|
||||
background: color(white-smoke);
|
||||
margin-bottom: 45px;
|
||||
padding-top: 3.5rem;
|
||||
|
||||
.CodeMirror {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
// Styles for vertical Tab
|
||||
&.pws_tabs_vertical {
|
||||
.pws_tabs_controll {
|
||||
border-right: none;
|
||||
border-bottom:none;
|
||||
li {
|
||||
&:first-child {
|
||||
a {
|
||||
@include border-radius(5px 0px 0px 0px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
a {
|
||||
border-bottom: 1px solid theme-color(primary);
|
||||
@include border-radius(0px 0px 0px 5px);
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
@include border-radius(0px);
|
||||
border: 1px solid theme-color(primary);
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styles for vertical Tab
|
||||
|
||||
// Styles for horizontal Tab
|
||||
&.pws_tabs_horizontal_bottom {
|
||||
.pws_tabs_list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.pws_tabs_controll {
|
||||
border-top: 1px solid theme-color(primary);
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
li {
|
||||
&:first-child {
|
||||
a {
|
||||
@include border-radius(0px 0px 0px 5px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
a {
|
||||
@include border-radius(0px 0px 5px 0px);
|
||||
border-right: 1px solid theme-color(primary);
|
||||
}
|
||||
}
|
||||
a {
|
||||
@include border-radius(0px);
|
||||
border: 1px solid theme-color(primary);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styles for vertical Tab
|
||||
|
||||
// Styles for RTL Tab
|
||||
&.pws_tabs_rtl {
|
||||
.pws_tabs_controll {
|
||||
li {
|
||||
&:first-child {
|
||||
a {
|
||||
@include border-radius(0px 5px 0px 0px);
|
||||
border-right: 1px solid theme-color(primary);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
a {
|
||||
border-right: none;
|
||||
@include border-radius(5px 0px 0px 0px);
|
||||
}
|
||||
}
|
||||
a {
|
||||
border: 1px solid theme-color(primary);
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styles for RTL Tab
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/* Quill Editor */
|
||||
|
||||
.quill-container {
|
||||
height: 300px;
|
||||
}
|
||||
.ql-toolbar,
|
||||
.quill-container {
|
||||
&.ql-snow {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
/* Rating */
|
||||
|
||||
.br-theme-fontawesome-stars,
|
||||
.br-theme-css-stars {
|
||||
.br-widget {
|
||||
a {
|
||||
font-size: 20px;
|
||||
&.br-selected,
|
||||
&.br-active {
|
||||
&:after {
|
||||
color: theme-color(primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.br-theme-bars-1to10,
|
||||
.br-theme-bars-movie,
|
||||
.br-theme-bars-pill,
|
||||
.br-theme-bars-reversed,
|
||||
.br-theme-bars-horizontal {
|
||||
.br-widget {
|
||||
a {
|
||||
background-color: rgba(theme-color(primary), .6);
|
||||
color: theme-color(primary);
|
||||
&.br-selected,
|
||||
&.br-active {
|
||||
background-color: theme-color(primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.br-theme-bars-square {
|
||||
.br-widget {
|
||||
a {
|
||||
background: lighten(theme-color(dark), 30%);
|
||||
border-color: rgba(theme-color(primary), .5);
|
||||
color: rgba(theme-color(primary), .5);
|
||||
&.br-selected,
|
||||
&.br-active {
|
||||
border-color: theme-color(primary);
|
||||
color: theme-color(primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.br-theme-bars-movie,
|
||||
.br-theme-bars-reversed,
|
||||
.br-theme-bars-1to10,
|
||||
.br-theme-bars-horizontal {
|
||||
.br-widget {
|
||||
.br-current-rating {
|
||||
color: $body-color;
|
||||
font-size: $default-font-size;
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.br-theme-bars-1to10 {
|
||||
height: 26px;
|
||||
.br-widget {
|
||||
height: 24px;
|
||||
.br-current-rating {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.br-theme-bars-pill {
|
||||
.br-widget {
|
||||
a {
|
||||
line-height: 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
/* Select2 */
|
||||
|
||||
.select2-container--default {
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background: theme-color(primary);
|
||||
}
|
||||
.select2-selection--single,
|
||||
.select2-dropdown,
|
||||
.select2-selection--multiple {
|
||||
border-color: $border-color;
|
||||
}
|
||||
.select2-selection--single {
|
||||
height: auto;
|
||||
@extend .form-control;
|
||||
.select2-search__field {
|
||||
@extend .form-control;
|
||||
}
|
||||
.select2-selection__rendered {
|
||||
line-height: 14px;
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
.select2-dropdown {
|
||||
background: $dropdown-bg;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
&.select2-container--focus {
|
||||
.select2-selection--multiple {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
.select2-selection--multiple {
|
||||
background: $input-bg;
|
||||
.select2-selection__choice {
|
||||
color: color(white);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 6px;
|
||||
font-size: .625rem;
|
||||
font-family: inherit;
|
||||
line-height: 1;
|
||||
.select2-selection__choice__remove {
|
||||
color: color(white);
|
||||
}
|
||||
&:nth-child(5n+1) {
|
||||
background: theme-color(primary);
|
||||
}
|
||||
&:nth-child(5n+2) {
|
||||
background: theme-color(success);
|
||||
}
|
||||
&:nth-child(5n+3) {
|
||||
background: theme-color(info);
|
||||
}
|
||||
&:nth-child(5n+4) {
|
||||
background: theme-color(danger);
|
||||
}
|
||||
&:nth-child(5n+5) {
|
||||
background: theme-color(warning);
|
||||
}
|
||||
}
|
||||
.select2-selection__rendered {
|
||||
background: $input-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
/* Summernote Editor */
|
||||
|
||||
.note-editor{
|
||||
&.note-frame {
|
||||
border: 1px solid $border-color;
|
||||
.note-editing-area {
|
||||
.note-editable {
|
||||
background: transparent;
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.note-popover {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
/* SweetAlert */
|
||||
|
||||
.swal2-container {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.swal2-modal {
|
||||
min-height: 315px;
|
||||
@extend .d-flex;
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
@include flex-direction(column);
|
||||
@include border-radius(10px);
|
||||
|
||||
.swal2-title {
|
||||
font-size: 25px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
color: $body-color;
|
||||
font-weight: initial;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.swal2-icon,
|
||||
.swal2-success-ring {
|
||||
margin-top: 0;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.swal2-buttonswrapper {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
|
||||
.swal2-styled {
|
||||
@extend .btn;
|
||||
margin-top: 0;
|
||||
font-weight: initial;
|
||||
|
||||
&.swal2-confirm {
|
||||
@extend .btn;
|
||||
@extend .bg-success;
|
||||
@extend .border-success;
|
||||
font-weight: initial;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
&.swal2-cancel {
|
||||
@extend .btn;
|
||||
margin-top: 32px;
|
||||
border: 1px solid $border-color;
|
||||
color: $white;
|
||||
font-weight: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-content {
|
||||
font-size: $default-font-size;
|
||||
font-weight: 600;
|
||||
color: $body-color;
|
||||
font-weight: initial;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.swal2-close {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.swal2-success-ring {
|
||||
left: -30px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
/* Switchery */
|
||||
|
||||
.switchery {
|
||||
width: 35px;
|
||||
height: 21px;
|
||||
border-radius: 11px;
|
||||
>small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.switchery-small {
|
||||
width: 25px;
|
||||
height: 13px;
|
||||
>small {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.switchery-large {
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
>small {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/* Tags */
|
||||
|
||||
div.tagsinput {
|
||||
padding: 15px 15px 10px;
|
||||
border-color: $border-color;
|
||||
background: transparent;
|
||||
span.tag {
|
||||
background: theme-color(primary);
|
||||
border: 0;
|
||||
color: color(white);
|
||||
padding: 6px 14px;
|
||||
font-size: .8125rem;
|
||||
font-family: inherit;
|
||||
line-height: 1;
|
||||
a {
|
||||
color: color(white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
/* TinyMCE Editor */
|
||||
|
||||
.mce-tinymce {
|
||||
&.mce-panel,
|
||||
.mce-panel {
|
||||
border-color: $border-color;
|
||||
}
|
||||
.mce-panel {
|
||||
background: $input-bg;
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
/* Toast */
|
||||
|
||||
.jq-toast-wrap {
|
||||
.jq-icon-success {
|
||||
background-color: theme-color("success");
|
||||
}
|
||||
.jq-icon-info {
|
||||
background-color: theme-color("info");
|
||||
}
|
||||
.jq-icon-warning {
|
||||
background-color: theme-color("warning");
|
||||
}
|
||||
.jq-icon-error {
|
||||
background-color: theme-color("danger");
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
/* Typeahead */
|
||||
|
||||
.tt-menu,
|
||||
.gist {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.twitter-typeahead {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.typeahead,
|
||||
.tt-query,
|
||||
.tt-hint {
|
||||
@extend .form-control;
|
||||
}
|
||||
|
||||
.typeahead {
|
||||
background-color: $input-bg;
|
||||
&:focus {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tt-query {
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.tt-hint {
|
||||
color: color(gray)
|
||||
}
|
||||
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
margin: 12px 0;
|
||||
padding: 8px 0;
|
||||
background-color: $dropdown-bg;
|
||||
border: 1px solid $border-color;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 3px 20px;
|
||||
font-size: inherit;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: color(white);
|
||||
background-color: theme-color(primary);
|
||||
}
|
||||
.tt-cursor {
|
||||
color: color(white);
|
||||
background-color: theme-color(primary);
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,256 @@
|
||||
/* Wizard */
|
||||
|
||||
.wizard {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
a {
|
||||
outline: 0;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
>li {
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
>.steps {
|
||||
.current-info {
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
.number {
|
||||
font-size: $default-font-size;
|
||||
}
|
||||
>ul {
|
||||
>li {
|
||||
width: 25%;
|
||||
@media (max-width: 767px) {
|
||||
width: 50%;
|
||||
}
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0 0.5em 0.5em;
|
||||
padding: 1em 1em;
|
||||
text-decoration: none;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
font-size: $default-font-size;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0 0.5em 0.5em;
|
||||
padding: 1em;
|
||||
text-decoration: none;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
&:active {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin: 0 0.5em 0.5em;
|
||||
padding: 1em;
|
||||
text-decoration: none;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.disabled {
|
||||
a {
|
||||
background: theme-color(secondary);
|
||||
color: color(gray);
|
||||
cursor: default;
|
||||
&:hover {
|
||||
background: color(gray-lightest);
|
||||
color: color(gray);
|
||||
cursor: default;
|
||||
}
|
||||
&:active {
|
||||
background: color(gray-lightest)e;
|
||||
color: color(gray);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.current {
|
||||
a {
|
||||
background: theme-color(primary);
|
||||
color: color(white);
|
||||
cursor: default;
|
||||
&:hover {
|
||||
background: theme-color(primary);
|
||||
color: color(white);
|
||||
cursor: default;
|
||||
}
|
||||
&:active {
|
||||
background: theme-color(primary);
|
||||
color: color(white);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.done {
|
||||
a {
|
||||
background: lighten(theme-color(primary), 20%);
|
||||
color: color(white);
|
||||
&:hover {
|
||||
background: lighten(theme-color(primary), 20%);
|
||||
color: color(white);
|
||||
}
|
||||
&:active {
|
||||
background: lighten(theme-color(primary), 20%);
|
||||
color: color(white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.error {
|
||||
a {
|
||||
background: theme-color(danger);
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: theme-color(danger);
|
||||
color: #fff;
|
||||
}
|
||||
&:active {
|
||||
background: theme-color(danger);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
>.content {
|
||||
>.title {
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
background: transparent;
|
||||
display: block;
|
||||
margin: 0.5em;
|
||||
min-height: 24em;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
width: auto;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $border-color;
|
||||
>.body {
|
||||
float: left;
|
||||
position: absolute;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
padding: 2.5%;
|
||||
ul {
|
||||
list-style: disc;
|
||||
>li {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
>iframe {
|
||||
border: 0 none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
input {
|
||||
display: block;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
}
|
||||
input.error {
|
||||
background: rgb(251, 227, 228);
|
||||
border: 1px solid lighten(theme-color(danger), 20%);
|
||||
color: theme-color(danger);
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
label.error {
|
||||
color: theme-color(danger);
|
||||
display: inline-block;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.actions {
|
||||
padding-top: 20px;
|
||||
>ul {
|
||||
>li {
|
||||
float: left;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
a {
|
||||
@extend .btn;
|
||||
@extend .btn-primary;
|
||||
}
|
||||
.disabled {
|
||||
a {
|
||||
@extend .btn-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
>.steps {
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 30%;
|
||||
@media (max-width: 767px) {
|
||||
width: 42%;
|
||||
}
|
||||
>ul {
|
||||
>li {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
>.content {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin: 0 2.5% 0.5em 2.5%;
|
||||
width: 65%;
|
||||
@media (max-width: 767px) {
|
||||
width: 52%;
|
||||
}
|
||||
}
|
||||
>.actions {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin: 0 2.5%;
|
||||
width: 95%;
|
||||
@media (max-width: 767px) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
>ul {
|
||||
>li {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,150 @@
|
||||
/* Wysi Editor */
|
||||
|
||||
.wysi-editor {
|
||||
#toolbar [data-wysihtml-action] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#toolbar,
|
||||
textarea {
|
||||
width: 920px;
|
||||
padding: 5px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 280px;
|
||||
border: 1px solid $border-color;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
color: black;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.wysihtml-action-active,
|
||||
.wysihtml-command-active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[data-wysihtml-dialog] {
|
||||
margin: 5px 0 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
a[data-wysihtml-command-value="red"] {
|
||||
color: theme-color(danger);
|
||||
}
|
||||
|
||||
a[data-wysihtml-command-value="green"] {
|
||||
color: theme-color(success);
|
||||
}
|
||||
|
||||
a[data-wysihtml-command-value="blue"] {
|
||||
color: theme-color(info);
|
||||
}
|
||||
|
||||
.wysihtml-editor,
|
||||
.wysihtml-editor table td {
|
||||
outline: 1px dotted $border-color;
|
||||
}
|
||||
|
||||
code {
|
||||
background: #ddd;
|
||||
padding: 10px;
|
||||
white-space: pre;
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #fff;
|
||||
margin-bottom: 9px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.toolbar a {
|
||||
display: inline-block;
|
||||
height: 1.5em;
|
||||
border-radius: 3px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
background: color(white);
|
||||
border: 1px solid $border-color;
|
||||
padding: 0 0.2em;
|
||||
margin: 1px 0;
|
||||
color: theme-color(primary);
|
||||
}
|
||||
|
||||
.toolbar .wysihtml-action-active,
|
||||
.toolbar a.wysihtml-command-active {
|
||||
background: #222;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toolbar .block {
|
||||
padding: 1px;
|
||||
display: inline-block;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
margin: 0 1px 1px 0;
|
||||
}
|
||||
|
||||
div[data-wysihtml-dialog="createTable"] {
|
||||
position: absolute;
|
||||
background: white;
|
||||
}
|
||||
|
||||
div[data-wysihtml-dialog="createTable"] td {
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.wysihtml-editor table td.wysiwyg-tmp-selected-cell {
|
||||
outline: 2px solid theme-color(success);
|
||||
}
|
||||
|
||||
.editor-container-tag {
|
||||
padding: 5px 10px;
|
||||
position: absolute;
|
||||
color: white;
|
||||
background: rgba(0,0,0,0.8);
|
||||
width: 100px;
|
||||
margin-left: -50px;
|
||||
-webkit-transition: 0.1s left, 0.1s top;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 700px;
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
.editable .wysihtml-uneditable-container {
|
||||
outline: 1px dotted $border-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editable .wysihtml-uneditable-container-right {
|
||||
float: right;
|
||||
width: 50%;
|
||||
margin-left: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.editable .wysihtml-uneditable-container-left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-right: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
/* X-editable */
|
||||
|
||||
.editable-form {
|
||||
.editable {
|
||||
color: $body-color;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
.editable-click {
|
||||
border-color: $body-color;
|
||||
}
|
||||
}
|
||||
.editable-container {
|
||||
&.editable-inline {
|
||||
max-width: 100%;
|
||||
.editableform {
|
||||
max-width: 100%;
|
||||
.control-group {
|
||||
max-width: 100%;
|
||||
white-space: initial;
|
||||
>div {
|
||||
max-width: 100%;
|
||||
}
|
||||
.editable-input {
|
||||
// max-width: 50%;
|
||||
input,
|
||||
textarea {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.combodate {
|
||||
.form-control {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.editable-buttons {
|
||||
@media (max-width: 991px) {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.editable-submit {
|
||||
@extend .btn-outline-success;
|
||||
@extend .btn-xs;
|
||||
@extend .mt-1;
|
||||
}
|
||||
.editable-cancel {
|
||||
@extend .btn-outline-secondary;
|
||||
@extend .btn-xs;
|
||||
@extend .mt-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
87
public/Dashboard/scss/common/dark/landing-screens/_auth.scss
Normal file
87
public/Dashboard/scss/common/dark/landing-screens/_auth.scss
Normal file
@ -0,0 +1,87 @@
|
||||
/* Auth */
|
||||
|
||||
.auth {
|
||||
.login-half-bg {
|
||||
background: url("../../images/auth/login-bg.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.register-half-bg {
|
||||
background: url("../../images/auth/register-bg.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
&.lock-full-bg {
|
||||
background: url("../../images/auth/lockscreen-bg.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.lock-profile-img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.auth-form-light {
|
||||
background: $white;
|
||||
select {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
.input-group {
|
||||
.form-control {
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.auth-form-transparent {
|
||||
background: transparent;
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border-color: theme-color(secondary);
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: theme-color(secondary);
|
||||
}
|
||||
}
|
||||
select {
|
||||
outline-color: theme-color(secondary);
|
||||
}
|
||||
}
|
||||
&.auth-img-bg {
|
||||
padding: 0;
|
||||
.auth-form-transparent {
|
||||
@media (min-width:768px) {
|
||||
width: 55%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-logo {
|
||||
margin-bottom: 2rem;
|
||||
img {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
form {
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
label {
|
||||
font-size: .8125rem;
|
||||
}
|
||||
.form-control {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
font-size: .9375rem;
|
||||
}
|
||||
}
|
||||
.auth-form-btn {
|
||||
padding: 1rem 3rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.auth-link {
|
||||
font-size: $default-font-size;
|
||||
&:hover {
|
||||
color: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
70
public/Dashboard/scss/common/dark/mixins/_animation.scss
Normal file
70
public/Dashboard/scss/common/dark/mixins/_animation.scss
Normal file
@ -0,0 +1,70 @@
|
||||
/* Animation Mixins */
|
||||
@keyframes dropdownAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -30px, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transform: translate3d(0, 0px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownAnimation {
|
||||
animation-name: dropdownAnimation;
|
||||
@include animation-duration($action-transition-duration);
|
||||
@include animation-fill-mode(both);
|
||||
}
|
||||
@mixin transition($settings) {
|
||||
-webkit-transition: $settings;
|
||||
-moz-transition: $settings;
|
||||
-ms-transition: $settings;
|
||||
-o-transition: $settings;
|
||||
transition: $settings;
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
.infinite-spin {
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
animation-name: spin;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
7
public/Dashboard/scss/common/dark/mixins/_badges.scss
Normal file
7
public/Dashboard/scss/common/dark/mixins/_badges.scss
Normal file
@ -0,0 +1,7 @@
|
||||
//Badge Mixins
|
||||
|
||||
// Badge outlined variations
|
||||
@mixin badge-outline-variations($color) {
|
||||
color: $color;
|
||||
border: 1px solid $color;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
// BlockQuote Mixins //
|
||||
|
||||
@mixin blockquote($color) {
|
||||
border-color: $color;
|
||||
.blockquote-footer {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
42
public/Dashboard/scss/common/dark/mixins/_breadcrumbs.scss
Normal file
42
public/Dashboard/scss/common/dark/mixins/_breadcrumbs.scss
Normal file
@ -0,0 +1,42 @@
|
||||
// Breadcrumb color variations
|
||||
@mixin breadcrumb-inverse-variant($color) {
|
||||
background: lighten($color, 25%);
|
||||
border-color: $color;
|
||||
|
||||
.breadcrumb-item {
|
||||
color: $color;
|
||||
|
||||
&:before {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.breadcrumb-custom {
|
||||
background: transparent;
|
||||
|
||||
.breadcrumb-item {
|
||||
background: lighten($color, 25%);
|
||||
|
||||
a {
|
||||
color: $color;
|
||||
border: none;
|
||||
|
||||
&:before {
|
||||
border-left-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
62
public/Dashboard/scss/common/dark/mixins/_buttons.scss
Normal file
62
public/Dashboard/scss/common/dark/mixins/_buttons.scss
Normal file
@ -0,0 +1,62 @@
|
||||
@mixin social-button($color) {
|
||||
background: $color;
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: darken($color, 10%);
|
||||
color: $white;
|
||||
}
|
||||
&.btn-social-icon-text {
|
||||
padding: 0 1.5rem 0 0;
|
||||
background: lighten($color, 10%);
|
||||
i {
|
||||
background: $color;
|
||||
padding: .75rem;
|
||||
display: inline-block;
|
||||
margin-right: 1.5rem;
|
||||
border-radius: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin social-outline-button($color) {
|
||||
border: 1px solid $color;
|
||||
background: transparent;
|
||||
color: $color;
|
||||
&:hover {
|
||||
background: $color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
@mixin button-inverse-variant($color, $color-hover: $white) {
|
||||
background-color: rgba($color, 0.2);
|
||||
background-image: none;
|
||||
border-color: rgba($color, 0);
|
||||
&:not(.btn-inverse-light) {
|
||||
color: $color;
|
||||
}
|
||||
@include hover {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($color, .5);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
7
public/Dashboard/scss/common/dark/mixins/_cards.scss
Normal file
7
public/Dashboard/scss/common/dark/mixins/_cards.scss
Normal file
@ -0,0 +1,7 @@
|
||||
// Cards Mixins
|
||||
|
||||
@mixin card-inverse-variant($bg, $border, $color) {
|
||||
background: $bg;
|
||||
border: 1px solid $border;
|
||||
color: $color;
|
||||
}
|
||||
72
public/Dashboard/scss/common/dark/mixins/_misc.scss
Normal file
72
public/Dashboard/scss/common/dark/mixins/_misc.scss
Normal file
@ -0,0 +1,72 @@
|
||||
/* Miscellaneous Mixins */
|
||||
|
||||
// general transform
|
||||
@mixin transform($transforms) {
|
||||
-moz-transform: $transforms;
|
||||
-o-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
|
||||
// rotate
|
||||
@mixin rotate ($deg) {
|
||||
@include transform(rotate(#{$deg}deg));
|
||||
}
|
||||
|
||||
// scale
|
||||
@mixin scale($scale) {
|
||||
@include transform(scale($scale));
|
||||
}
|
||||
// translate
|
||||
@mixin translate ($x, $y) {
|
||||
@include transform(translate($x, $y));
|
||||
}
|
||||
// skew
|
||||
@mixin skew ($x, $y) {
|
||||
@include transform(skew(#{$x}deg, #{$y}deg));
|
||||
}
|
||||
//transform origin
|
||||
@mixin transform-origin ($origin) {
|
||||
moz-transform-origin: $origin;
|
||||
-o-transform-origin: $origin;
|
||||
-ms-transform-origin: $origin;
|
||||
-webkit-transform-origin: $origin;
|
||||
transform-origin: $origin;
|
||||
}
|
||||
//Ellipsis
|
||||
%ellipsor{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width:100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
%ellipsor {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@mixin ellipsor {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
24
public/Dashboard/scss/common/dark/mixins/_no-ui-slider.scss
Normal file
24
public/Dashboard/scss/common/dark/mixins/_no-ui-slider.scss
Normal file
@ -0,0 +1,24 @@
|
||||
|
||||
// Sider color variations
|
||||
@mixin slider-color-variant($color) {
|
||||
.noUi-base {
|
||||
.noUi-connect {
|
||||
background: $color;
|
||||
}
|
||||
|
||||
.noUi-origin {
|
||||
background: $color;
|
||||
|
||||
.noUi-handle {
|
||||
&:after {
|
||||
background: $color;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
background: $color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user