Rebranding and adjust scss
This commit is contained in:
lupacescueduard
parent
d488c09c4c
commit
385d1e7be9
56
src/assets/sass/black-dashboard.scss
Normal file
56
src/assets/sass/black-dashboard.scss
Normal file
@ -0,0 +1,56 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Black Dashboard - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/black-dashboard
|
||||
* Copyright 2018 Creative Tim (http://www.creative-tim.com)
|
||||
|
||||
* Designed by www.invisionapp.com Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
@import 'black-dashboard/variables';
|
||||
@import 'black-dashboard/mixins';
|
||||
|
||||
// Plugins CSS
|
||||
@import "black-dashboard/plugins/plugin-animate-bootstrap-notify";
|
||||
@import "black-dashboard/plugins/plugin-perfect-scrollbar";
|
||||
|
||||
// Core CSS
|
||||
@import "black-dashboard/buttons";
|
||||
@import "black-dashboard/inputs";
|
||||
@import "black-dashboard/typography";
|
||||
@import "black-dashboard/misc";
|
||||
@import "black-dashboard/checkboxes-radio";
|
||||
|
||||
// components
|
||||
@import "black-dashboard/navbar";
|
||||
@import "black-dashboard/page-header";
|
||||
@import "black-dashboard/dropdown";
|
||||
@import "black-dashboard/alerts";
|
||||
@import "black-dashboard/images";
|
||||
@import "black-dashboard/tables";
|
||||
@import "black-dashboard/sidebar-and-main-panel";
|
||||
@import "black-dashboard/footers";
|
||||
@import "black-dashboard/fixed-plugin";
|
||||
@import "black-dashboard/rtl";
|
||||
|
||||
// cards
|
||||
@import "black-dashboard/cards";
|
||||
@import "black-dashboard/cards/card-plain";
|
||||
@import "black-dashboard/cards/card-chart";
|
||||
@import "black-dashboard/cards/card-user";
|
||||
@import "black-dashboard/cards/card-map";
|
||||
@import "black-dashboard/cards/card-task";
|
||||
|
||||
@import "black-dashboard/responsive";
|
||||
|
||||
// Dashboard white class
|
||||
|
||||
@import 'black-dashboard/white-content';
|
||||
74
src/assets/sass/black-dashboard/_alerts.scss
Normal file
74
src/assets/sass/black-dashboard/_alerts.scss
Normal file
@ -0,0 +1,74 @@
|
||||
.alert{
|
||||
border: 0;
|
||||
border-radius: $border-radius-small;
|
||||
color: $white-color;
|
||||
padding-top: .9rem;
|
||||
padding-bottom: .9rem;
|
||||
position: relative;
|
||||
|
||||
.alert-link{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
&.alert-success{
|
||||
background-color: darken($success-color, 10%);
|
||||
}
|
||||
|
||||
&.alert-danger{
|
||||
background-color: lighten($danger-color, 5%);
|
||||
}
|
||||
|
||||
&.alert-warning{
|
||||
background-color: lighten($warning-color, 5%);
|
||||
}
|
||||
|
||||
&.alert-info{
|
||||
background-color: lighten($info-color, 5%);
|
||||
}
|
||||
|
||||
&.alert-primary{
|
||||
background-color: lighten($primary-color, 5%);
|
||||
}
|
||||
|
||||
|
||||
i.fa,
|
||||
i.tim-icons{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.close{
|
||||
color: $white-color;
|
||||
opacity: .9;
|
||||
text-shadow: none;
|
||||
line-height: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
span[data-notify="icon"]{
|
||||
font-size: 22px;
|
||||
display: block;
|
||||
left: 19px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
button.close{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
margin-top: -13px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.close ~ span{
|
||||
display: block;
|
||||
max-width: 89%;
|
||||
}
|
||||
|
||||
&.alert-with-icon{
|
||||
padding-left: 65px;
|
||||
}
|
||||
}
|
||||
216
src/assets/sass/black-dashboard/_buttons.scss
Normal file
216
src/assets/sass/black-dashboard/_buttons.scss
Normal file
@ -0,0 +1,216 @@
|
||||
.btn,
|
||||
.navbar .navbar-nav > a.btn{
|
||||
border-width: $border-thick;
|
||||
font-weight: $font-weight-semi;
|
||||
font-size: $font-size-large;
|
||||
line-height: $line-height;
|
||||
border: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin:4px 1px;
|
||||
border-radius: $border-radius-large;
|
||||
padding: $padding-btn-vertical $padding-btn-horizontal;
|
||||
cursor: pointer;
|
||||
animation: rotation 0.3s infinite;
|
||||
|
||||
@include btn-styles($default-color, $default-states-color);
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
@include opacity(1);
|
||||
outline: 0 !important;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
@include box-shadow(none);
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.badge{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.btn-icon {
|
||||
// see above for color variations
|
||||
height: $btn-icon-size-regular;
|
||||
min-width: $btn-icon-size-regular;
|
||||
width: $btn-icon-size-regular;
|
||||
padding: 0;
|
||||
font-size: $btn-icon-font-size-regular;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
|
||||
&.btn-simple{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.btn-sm{
|
||||
height: $btn-icon-size-small;
|
||||
min-width: $btn-icon-size-small;
|
||||
width: $btn-icon-size-small;
|
||||
|
||||
.fa,
|
||||
.far,
|
||||
.fas,
|
||||
.tim-icons{
|
||||
font-size: $btn-icon-font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-lg{
|
||||
height: $btn-icon-size-lg;
|
||||
min-width: $btn-icon-size-lg;
|
||||
width: $btn-icon-size-lg;
|
||||
|
||||
.fa,
|
||||
.far,
|
||||
.fas,
|
||||
.tim-icons{
|
||||
font-size: $btn-icon-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.btn-footer) .tim-icons,
|
||||
&:not(.btn-footer) .fa,
|
||||
&:not(.btn-footer) .far,
|
||||
&:not(.btn-footer) .fas{
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-12px, -12px);
|
||||
line-height: 1.5626rem;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:not(.btn-icon) .tim-icons{
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.btn-link.dropdown-toggle {
|
||||
color: #9a9a9a;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the mixin to the buttons
|
||||
// .btn-default { @include btn-styles($default-color, $default-states-color); }
|
||||
.btn-primary { @include btn-styles($primary-color, $primary-states-color);
|
||||
|
||||
}
|
||||
.btn-success { @include btn-styles($success-color, $success-states-color);
|
||||
|
||||
}
|
||||
.btn-info { @include btn-styles($info-color, $info-states-color);
|
||||
|
||||
}
|
||||
.btn-warning { @include btn-styles($warning-color, $warning-states-color);
|
||||
&:not(:disabled):not(.disabled):active{
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
.btn-danger { @include btn-styles($danger-color, $danger-states-color);
|
||||
|
||||
}
|
||||
.btn-neutral { @include btn-styles($white-color, $white-color); }
|
||||
|
||||
.btn{
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&.disabled{
|
||||
@include opacity(.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.btn-simple{
|
||||
border: $border;
|
||||
border-color: $default-color;
|
||||
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
|
||||
.btn-simple,
|
||||
.btn-link{
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: $transparent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link{
|
||||
border: $none;
|
||||
padding: $padding-base-vertical $padding-base-horizontal;
|
||||
background: $transparent-bg;
|
||||
color: $light-gray;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-lg{
|
||||
@include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
|
||||
}
|
||||
.btn-sm{
|
||||
@include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, $border-radius-small);
|
||||
}
|
||||
|
||||
.btn-wd {
|
||||
min-width: 140px;
|
||||
}
|
||||
.btn-group.select{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-group .btn.active{
|
||||
box-shadow: 2px 2px 6px rgba(0,0,0,.4);
|
||||
transform: translateY(-1px);
|
||||
-webkit-transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-group.select .btn{
|
||||
text-align: left;
|
||||
}
|
||||
.btn-group.select .caret{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.btn-round{
|
||||
border-width: $border-thin;
|
||||
border-radius: $btn-round-radius;
|
||||
// padding-right: $padding-round-horizontal;
|
||||
// padding-left: $padding-round-horizontal;
|
||||
|
||||
|
||||
&.btn-simple{
|
||||
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-caret {
|
||||
&.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
108
src/assets/sass/black-dashboard/_cards.scss
Normal file
108
src/assets/sass/black-dashboard/_cards.scss
Normal file
@ -0,0 +1,108 @@
|
||||
.card{
|
||||
background: $card-black-background;
|
||||
border: 0;
|
||||
border-radius: $border-radius-small;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
label{
|
||||
color: rgba($white-color, 0.6);
|
||||
}
|
||||
.card-body{
|
||||
padding: 15px;
|
||||
|
||||
&.table-full-width{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
|
||||
color: $white-color;
|
||||
text-transform: inherit;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
.card-description, .card-category{
|
||||
color: rgba($white-color, 0.6);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-header{
|
||||
&:not([data-background-color]){
|
||||
background-color: transparent;
|
||||
}
|
||||
padding: 15px 15px 0;
|
||||
border: 0;
|
||||
color: rgba($white-color,0.8);
|
||||
|
||||
.card-title{
|
||||
color: $white-color;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.card-category{
|
||||
color: $dark-gray;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.map{
|
||||
border-radius: $border-radius-small;
|
||||
|
||||
&.map-big{
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.card-plain {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.image{
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label{
|
||||
font-size: $font-size-small;
|
||||
margin-bottom: 5px;
|
||||
|
||||
}
|
||||
|
||||
.card-footer{
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 15px;
|
||||
|
||||
|
||||
.stats{
|
||||
i{
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h6{
|
||||
margin-bottom: 0;
|
||||
padding: 7px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
154
src/assets/sass/black-dashboard/_checkboxes-radio.scss
Normal file
154
src/assets/sass/black-dashboard/_checkboxes-radio.scss
Normal file
@ -0,0 +1,154 @@
|
||||
.form-check{
|
||||
margin-top: .5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-check .form-check-label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-left: 25px;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0;
|
||||
-webkit-transition: color 0.3s linear;
|
||||
-moz-transition: color 0.3s linear;
|
||||
-o-transition: color 0.3s linear;
|
||||
-ms-transition: color 0.3s linear;
|
||||
transition: color 0.3s linear;
|
||||
}
|
||||
.radio .form-check-sign{
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.form-check-radio.form-check-inline .form-check-label {
|
||||
padding-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-check .form-check-sign::before,
|
||||
.form-check .form-check-sign::after{
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
top: 0;
|
||||
border: 1px solid darken($dark-gray,10%);
|
||||
-webkit-transition: opacity 0.3s linear;
|
||||
-moz-transition: opacity 0.3s linear;
|
||||
-o-transition: opacity 0.3s linear;
|
||||
-ms-transition: opacity 0.3s linear;
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"]:checked + .form-check-sign::before,
|
||||
.form-check input[type="checkbox"]:checked + .form-check-sign::before{
|
||||
border: none;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
.form-check .form-check-sign::after{
|
||||
font-family: 'nucleo';
|
||||
content: "\ea1b";
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
color: $white-color;
|
||||
font-weight: $font-weight-bold;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.form-check.disabled .form-check-label,
|
||||
.form-check.disabled .form-check-label {
|
||||
color: $dark-gray;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"],
|
||||
.radio input[type="radio"]{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
.form-check input[type="checkbox"]:checked + .form-check-sign::after{
|
||||
opacity: 1;
|
||||
font-size: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.form-check input[type="checkbox"]+ .form-check-sign::after{
|
||||
opacity: 0;
|
||||
font-size: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
|
||||
.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"]:disabled + .form-check-sign,
|
||||
.form-check input[type="radio"]:disabled + .form-check-sign{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.form-check-radio .form-check-label{
|
||||
padding-top: 3px;
|
||||
}
|
||||
.form-check-radio .form-check-sign::before,
|
||||
.form-check-radio .form-check-sign::after{
|
||||
content: " ";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid darken($dark-gray,10%);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 3px;
|
||||
padding: 1px;
|
||||
-webkit-transition: opacity 0.3s linear;
|
||||
-moz-transition: opacity 0.3s linear;
|
||||
-o-transition: opacity 0.3s linear;
|
||||
-ms-transition: opacity 0.3s linear;
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"] + .form-check-sign:after,
|
||||
.form-check-radio input[type="radio"] {
|
||||
opacity: 0;
|
||||
}
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
top: 9px;
|
||||
left: 6px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::before {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
|
||||
color: $dark-gray;
|
||||
}
|
||||
316
src/assets/sass/black-dashboard/_dropdown.scss
Normal file
316
src/assets/sass/black-dashboard/_dropdown.scss
Normal file
@ -0,0 +1,316 @@
|
||||
.dropdown-menu{
|
||||
border: 0;
|
||||
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: $border-radius-extra-small;
|
||||
@include transition($fast-transition-time, $transition-linear);
|
||||
font-size: $font-size-base;
|
||||
|
||||
&.dropdown-menu-right{
|
||||
&:before, &:after{
|
||||
left:auto;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-black{
|
||||
background: linear-gradient(to bottom, $black-color 0%, $black-states-color 100%);
|
||||
border: 1px solid $default-color;
|
||||
.dropdown-item {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.dropdown-divider{
|
||||
border-color: $default-color;
|
||||
}
|
||||
&:before{
|
||||
color: $black-color;
|
||||
z-index: 2;
|
||||
}
|
||||
&:after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: -6px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
color: $default-color;
|
||||
border-bottom: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
}
|
||||
|
||||
&.dropdown-menu-right{
|
||||
&:after{
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup &{
|
||||
&:after{
|
||||
color: $black-states-color;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:before{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: auto;
|
||||
bottom: -6px;
|
||||
right: auto;
|
||||
left: 10px;
|
||||
color: #555;
|
||||
border-top: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
border-bottom: none;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
i{
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.tim-icons{
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
font-size: 18px;
|
||||
margin-top: -5px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.dropdown-item{
|
||||
&.active,
|
||||
&:active{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup &{
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: auto;
|
||||
bottom: -5px;
|
||||
right: auto;
|
||||
left: 10px;
|
||||
color: $white-color;
|
||||
border-top: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.dropdown-menu-right{
|
||||
&:after, &:before{
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:before{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: -5px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
color: $white-color;
|
||||
border-bottom: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.dropdown-menu-right{
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.dropdown-item,
|
||||
.bootstrap-select &.inner li a{
|
||||
font-size: $font-size-small;
|
||||
padding-top: .6rem;
|
||||
padding-bottom: .6rem;
|
||||
margin-top: 5px;
|
||||
@include transition($fast-transition-time, $transition-linear);
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: $opacity-gray-3;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled{
|
||||
color: $default-color-opacity;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dropdown-divider{
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
|
||||
.dropdown-header:not([href]):not([tabindex]){
|
||||
color: $default-color-opacity;
|
||||
font-size: $font-size-mini;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
&.dropdown-primary{
|
||||
@include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-info{
|
||||
@include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-danger{
|
||||
@include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-success{
|
||||
@include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-warning{
|
||||
@include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2);
|
||||
}
|
||||
|
||||
.dropdown &,
|
||||
.dropup:not(.bootstrap-select) &,
|
||||
.bootstrap-select &:not(.inner),
|
||||
&.bootstrap-datetimepicker-widget.top,
|
||||
&.bootstrap-datetimepicker-widget.bottom{
|
||||
@include transform-translate-y-dropdown(-20px);
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
@include opacity(0);
|
||||
top: 100% !important;
|
||||
}
|
||||
|
||||
&.bootstrap-datetimepicker-widget.top,
|
||||
&.bootstrap-datetimepicker-widget.bottom{
|
||||
@include transform-translate-y-dropdown(-20px);
|
||||
}
|
||||
|
||||
.bootstrap-select.dropup &:not(.inner){
|
||||
@include transform-translate-y-dropdown(25px);
|
||||
}
|
||||
|
||||
.dropup:not(.bootstrap-select) &{
|
||||
@include transform-translate-y-dropdown(20px);
|
||||
top: auto !important;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.dropdown.show &,
|
||||
.bootstrap-select.show &:not(.inner),
|
||||
&.bootstrap-datetimepicker-widget.top.open,
|
||||
&.bootstrap-datetimepicker-widget.bottom.open,
|
||||
.dropup.show:not(.bootstrap-select) &,
|
||||
.navbar .dropdown.show &{
|
||||
@include opacity(1);
|
||||
visibility: visible;
|
||||
@include transform-translate-y-dropdown(1px);
|
||||
}
|
||||
|
||||
&.bootstrap-datetimepicker-widget.top.open,
|
||||
&.bootstrap-datetimepicker-widget.bottom.open{
|
||||
@include transform-translate-y-dropdown(0px);
|
||||
}
|
||||
|
||||
.dropup.show:not(.bootstrap-select) &{
|
||||
@include transform-translate-y-dropdown(-2px);
|
||||
}
|
||||
|
||||
&.dropdown-navbar{
|
||||
left: -80px;
|
||||
&:before, &:after{
|
||||
left: auto;
|
||||
right: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn{
|
||||
cursor: pointer;
|
||||
|
||||
&.dropdown-toggle{
|
||||
padding:10px;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.bs-caret{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.btn-link{
|
||||
&.dropdown-toggle{
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle:after{
|
||||
|
||||
content: unset;
|
||||
|
||||
}
|
||||
|
||||
.btn:not(:disabled):not(.disabled).active:focus,
|
||||
.btn:not(:disabled):not(.disabled):active:focus,
|
||||
.show>.btn.dropdown-toggle:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
350
src/assets/sass/black-dashboard/_fixed-plugin.scss
Normal file
350
src/assets/sass/black-dashboard/_fixed-plugin.scss
Normal file
@ -0,0 +1,350 @@
|
||||
.fixed-plugin{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: 64px;
|
||||
background: rgba(0,0,0,.3);
|
||||
z-index: 1031;
|
||||
border-radius: 8px 0 0 8px;
|
||||
text-align: center;
|
||||
top: 120px;
|
||||
|
||||
li > a,
|
||||
.badge{
|
||||
transition: all .34s;
|
||||
-webkit-transition: all .34s;
|
||||
-moz-transition: all .34s;
|
||||
}
|
||||
|
||||
.fa-cog{
|
||||
color: #FFFFFF;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
right: 80px;
|
||||
left: auto !important;
|
||||
top: -52px !important;
|
||||
width: 290px;
|
||||
border-radius: 0.1875rem;
|
||||
padding: 0 10px;
|
||||
background: linear-gradient($black-color, $black-states-color);
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu .tim-icons{
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.dropdown-menu:after,
|
||||
.dropdown-menu:before{
|
||||
right: 10px;
|
||||
margin-left: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.fa-circle-thin{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.active .fa-circle-thin{
|
||||
color: #00bbff;
|
||||
}
|
||||
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus{
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img{
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dropdown-menu li > a:hover,
|
||||
.dropdown-menu li > a:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.badge{
|
||||
border: 2px solid #FFFFFF;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 23px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
width: 23px;
|
||||
}
|
||||
|
||||
.badge.active,
|
||||
.badge:hover{
|
||||
border-color: $black-states-color;
|
||||
}
|
||||
|
||||
.badge-primary{
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
|
||||
.badge-blue{
|
||||
background-color: $brand-info;
|
||||
}
|
||||
.badge-green{
|
||||
background-color: $brand-success;
|
||||
}
|
||||
.badge-orange{
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.badge-red{
|
||||
background-color: $brand-danger;
|
||||
}
|
||||
|
||||
.light-badge, .dark-badge{
|
||||
margin:0;
|
||||
border: 1px solid $info-color;
|
||||
&:hover{
|
||||
border: 1px solid $info-color;
|
||||
}
|
||||
}
|
||||
|
||||
.light-badge{
|
||||
background: $white-color;
|
||||
&:hover{
|
||||
background: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-badge{
|
||||
background: $black-color;
|
||||
&:hover{
|
||||
background: $black-color;
|
||||
}
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: 14px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu li{
|
||||
display: block;
|
||||
padding: 18px 2px;
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
li.adjustments-line,
|
||||
li.header-title,
|
||||
li.button-container{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
li.button-container{
|
||||
height: auto;
|
||||
|
||||
div{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#sharrreTitle{
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
li.header-title{
|
||||
color: $white-color;
|
||||
height: 30px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.adjustments-line{
|
||||
p{
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
font-size: 1em;
|
||||
color: #3C4858;
|
||||
}
|
||||
|
||||
a{
|
||||
color: transparent;
|
||||
|
||||
.badge-colors{
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus{
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.togglebutton{
|
||||
text-align: center;
|
||||
|
||||
.label-switch{
|
||||
position: relative;
|
||||
left: -10px;
|
||||
font-size: $font-size-mini;
|
||||
color: $white-color;
|
||||
|
||||
&.label-right{
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-label{
|
||||
position: relative;
|
||||
top: -7px;
|
||||
font-size: $font-size-mini;
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
.dropdown-menu > li.adjustments-line > a{
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-menu{
|
||||
> li{
|
||||
& > a.img-holder{
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: #FFF;
|
||||
border: 3px solid #FFF;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
img{
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
a.switch-trigger:hover,
|
||||
& > a.switch-trigger:focus{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
> a.img-holder{
|
||||
border-color: rgba(0, 187, 255, 0.53);;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a.img-holder,
|
||||
> .active > a.img-holder{
|
||||
border-color: #00bbff;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-social{
|
||||
width: 50%;
|
||||
display: block;
|
||||
width: 48%;
|
||||
float: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-social{
|
||||
i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
margin-right: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
.dropdown-menu{
|
||||
-webkit-transform: translateY(-15%);
|
||||
-moz-transform: translateY(-15%);
|
||||
-o-transform: translateY(-15%);
|
||||
-ms-transform: translateY(-15%);
|
||||
transform: translateY(-15%);
|
||||
top: 27px;
|
||||
opacity: 0;
|
||||
|
||||
transform-origin: 0 0;
|
||||
|
||||
&:before{
|
||||
border-bottom: .4em solid rgba(0, 0, 0, 0);
|
||||
border-left: .4em solid rgba(0,0,0,0.2);
|
||||
border-top: .4em solid rgba(0,0,0,0);
|
||||
right: -16px;
|
||||
top: 46px;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-bottom: .4em solid rgba(0, 0, 0, 0);
|
||||
border-left: .4em solid $black-color;
|
||||
border-top: .4em solid rgba(0,0,0,0);
|
||||
right: -16px;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 74px;
|
||||
width: 16px;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.show .dropdown-menu{
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: translateY(-13%);
|
||||
-moz-transform: translateY(-13%);
|
||||
-o-transform: translateY(-13%);
|
||||
-ms-transform: translateY(-13%);
|
||||
transform: translateY(-13%);
|
||||
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-switch{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
47
src/assets/sass/black-dashboard/_footers.scss
Normal file
47
src/assets/sass/black-dashboard/_footers.scss
Normal file
@ -0,0 +1,47 @@
|
||||
.footer{
|
||||
padding: 24px 0 24px 250px;
|
||||
|
||||
&.footer-default{
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
nav{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
ul{
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
|
||||
a{
|
||||
color: $white-color;
|
||||
padding: $padding-base-vertical;
|
||||
font-size: $font-size-small;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright{
|
||||
font-size: $font-size-small;
|
||||
line-height: 1.8;
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
&:after{
|
||||
display: table;
|
||||
clear: both;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
7
src/assets/sass/black-dashboard/_images.scss
Normal file
7
src/assets/sass/black-dashboard/_images.scss
Normal file
@ -0,0 +1,7 @@
|
||||
img{
|
||||
max-width: 100%;
|
||||
border-radius: $border-radius-small;
|
||||
}
|
||||
.img-raised{
|
||||
box-shadow: $box-shadow-raised;
|
||||
}
|
||||
461
src/assets/sass/black-dashboard/_inputs.scss
Normal file
461
src/assets/sass/black-dashboard/_inputs.scss
Normal file
@ -0,0 +1,461 @@
|
||||
@include form-control-placeholder(rgba($white-color,0.2), 1);
|
||||
|
||||
.form-control {
|
||||
border-color: lighten($black-color,5%);
|
||||
background-color: $transparent-bg;
|
||||
border-radius: $border-radius-large;
|
||||
color: rgba($white-color,0.8);
|
||||
line-height: normal;
|
||||
font-size: $font-size-small;
|
||||
@include transition-input-focus-color();
|
||||
@include box-shadow(none);
|
||||
|
||||
|
||||
|
||||
&:focus{
|
||||
border-color:$primary-color ;
|
||||
background: $transparent-bg;
|
||||
@include box-shadow(none);
|
||||
outline: 0 !important;
|
||||
color: rgba($white-color,0.8);
|
||||
|
||||
& + .input-group-append .input-group-text,
|
||||
& ~ .input-group-append .input-group-text,
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& ~ .input-group-prepend .input-group-text{
|
||||
border: 1px solid $primary-color;
|
||||
border-left: none;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success &,
|
||||
.has-error &,
|
||||
.has-success &:focus,
|
||||
.has-error &:focus{
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.has-danger &,
|
||||
.has-success &{
|
||||
&.form-control-success,
|
||||
&.form-control-danger{
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + .form-control-feedback{
|
||||
border-radius: $border-radius-large;
|
||||
font-size: $font-size-base;
|
||||
margin-top: -7px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.open &{
|
||||
border-radius: $border-radius-large $border-radius-large 0 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
& + .input-group-append .input-group-text,
|
||||
& + .input-group-prepend .input-group-text{
|
||||
background-color: $white-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success .input-group-append .input-group-text,
|
||||
.has-success .input-group-prepend .input-group-text,
|
||||
.has-success .form-control{
|
||||
border-color: lighten($black-color,5%);
|
||||
}
|
||||
|
||||
.has-success .form-control:focus,
|
||||
.has-success.input-group-focus .input-group-append .input-group-text,
|
||||
.has-success.input-group-focus .input-group-prepend .input-group-text{
|
||||
border-color: darken($success-color, 10%);
|
||||
}
|
||||
|
||||
.has-danger .form-control,
|
||||
.has-danger .input-group-append .input-group-text,
|
||||
.has-danger .input-group-prepend .input-group-text,
|
||||
.has-danger.input-group-focus .input-group-prepend .input-group-text,
|
||||
.has-danger.input-group-focus .input-group-append .input-group-text{
|
||||
border-color: lighten($danger-states-color,5%);
|
||||
color: $danger-states-color;
|
||||
background-color: rgba(222,222,222, .1);
|
||||
|
||||
&:focus{
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger{
|
||||
&:after{
|
||||
font-family: 'nucleo';
|
||||
content: "\ea1b";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 13px;
|
||||
color: $success-color;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&.form-control-lg{
|
||||
&:after{
|
||||
font-size: 13px;
|
||||
top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-label{
|
||||
&:after{
|
||||
top: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.form-check:after{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.form-check .form-check-label{
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger{
|
||||
&:after{
|
||||
content: "\ea48";
|
||||
color: $danger-states-color;
|
||||
}
|
||||
|
||||
&.form-check .form-check-label{
|
||||
color: $danger-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.has-danger .error,
|
||||
.input-group.has-danger .error {
|
||||
color: $danger-states-color;
|
||||
}
|
||||
|
||||
.form-group.has-success .error,
|
||||
.input-group.has-success .error {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
@include form-control-lg-padding($padding-large-vertical, $padding-input-horizontal);
|
||||
@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
|
||||
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control,
|
||||
.form-control + .input-group-prepend .input-group-text,
|
||||
.form-control + .input-group-append .input-group-text{
|
||||
|
||||
background-color: lighten($black-color,1%);
|
||||
border: medium none;
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
border: medium none;
|
||||
background-color: lighten($black-color,2%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
background-color: lighten($black-color,2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: lighten($black-color,1%);;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error{
|
||||
.form-control-feedback, .control-label{
|
||||
color: $danger-states-color;
|
||||
}
|
||||
}
|
||||
.has-success{
|
||||
.form-control-feedback, .control-label{
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append .input-group-text,
|
||||
.input-group-prepend .input-group-text {
|
||||
background-color: transparent;
|
||||
border: 1px solid lighten($black-color,5%);
|
||||
border-radius: $border-radius-large;
|
||||
color: $white-color;
|
||||
|
||||
& i{
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
@include transition-input-focus-color();
|
||||
|
||||
.has-danger.input-group-focus &{
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
|
||||
.has-success &{
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
.has-danger .form-control:focus + &{
|
||||
color: $danger-states-color;
|
||||
}
|
||||
.has-success .form-control:focus + &{
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
& + .form-control,
|
||||
& ~ .form-control{
|
||||
@include input-size($padding-base-vertical - 1, $padding-base-horizontal);
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
i{
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append,
|
||||
.input-group-prepend{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.input-group-append .input-group-text{
|
||||
border-left: none;
|
||||
}
|
||||
.input-group-prepend .input-group-text{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $white-bg;
|
||||
border-color: $primary-color;
|
||||
background-color: $transparent-bg;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&.no-border{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: lighten($black-color,2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group,
|
||||
.form-group{
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
.form-control-static{
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
.input-group[disabled]{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){
|
||||
border-radius: $border-radius-large;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||
border-right: 0 none;
|
||||
}
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child) {
|
||||
border-left: 0 none;
|
||||
}
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
background-color: $black-states-color;
|
||||
color: $default-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.input-group-btn .btn{
|
||||
border-width: $border-thin;
|
||||
padding: $padding-btn-vertical $padding-base-horizontal;
|
||||
}
|
||||
.input-group-btn .btn-default:not(.btn-fill){
|
||||
border-color: $medium-gray;
|
||||
}
|
||||
|
||||
.input-group-btn:last-child > .btn{
|
||||
margin-left: 0;
|
||||
}
|
||||
textarea.form-control{
|
||||
max-width: 100%;
|
||||
max-height: 80px;
|
||||
padding: 10px 10px 0 0;
|
||||
resize: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid lighten($black-color,5%);
|
||||
border-radius: 0;
|
||||
line-height: 2;
|
||||
|
||||
&:focus,
|
||||
&:active{
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger{
|
||||
|
||||
&.form-group .form-control,
|
||||
&.form-group.no-border .form-control{
|
||||
padding-right: $padding-input-horizontal + 21;
|
||||
}
|
||||
}
|
||||
|
||||
.form.form-newsletter .form-group{
|
||||
float: left;
|
||||
width: 78%;
|
||||
margin-right: 2%;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.input-group .input-group-btn{
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
// Input files - hide actual input - requires specific markup in the sample.
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.form-text{
|
||||
font-size: $font-size-small;
|
||||
color: rgba($white-color,0.8);
|
||||
}
|
||||
|
||||
.form-control-lg{
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
line-height: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-horizontal{
|
||||
.col-form-label,
|
||||
.label-on-right{
|
||||
padding: 10px 5px 0 15px;
|
||||
text-align: right;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.checkbox-radios{
|
||||
margin-bottom: 15px;
|
||||
|
||||
.form-check:first-child{
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-on-right{
|
||||
text-align: left;
|
||||
padding: 10px 15px 0 5px;
|
||||
}
|
||||
|
||||
.form-check-inline{
|
||||
margin-top: 6px;
|
||||
.form-check-label{
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar{
|
||||
margin-left: $margin-large-vertical;
|
||||
.btn{
|
||||
margin: 0;
|
||||
}
|
||||
&.input-group{
|
||||
border-radius: 25px;
|
||||
z-index: 4;
|
||||
margin-bottom: 0;
|
||||
height: 43px;
|
||||
.input-group-addon{
|
||||
padding: $padding-simple-vertical;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
input{
|
||||
background: transparent;
|
||||
border:none !important;
|
||||
border-radius: 0;
|
||||
padding: 12px !important;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
&:focus{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.form-control{
|
||||
opacity: 1;
|
||||
color: $white-color;
|
||||
&::placeholder{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#searchModal .modal-dialog{
|
||||
max-width: 1000px;
|
||||
margin: 20px auto;
|
||||
.form-control{
|
||||
border: none;
|
||||
color: $black-color;
|
||||
&::placeholder{
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
198
src/assets/sass/black-dashboard/_misc.scss
Normal file
198
src/assets/sass/black-dashboard/_misc.scss
Normal file
@ -0,0 +1,198 @@
|
||||
body{
|
||||
background: #1e1e2d;
|
||||
color: $black-color;
|
||||
font-size: $font-size-base;
|
||||
font-family: $sans-serif-family;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
&.dashboard-white{
|
||||
.main-panel{
|
||||
background: $opacity-gray-3;
|
||||
}
|
||||
|
||||
.footer ul li a{
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.footer .copyright{
|
||||
color: $black-color;
|
||||
}
|
||||
.navbar-minimize button i{
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.navbar .navbar-brand{
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.main{
|
||||
position: relative;
|
||||
background: $white-color;
|
||||
}
|
||||
/* Animations */
|
||||
.nav-pills .nav-link,
|
||||
.navbar,
|
||||
.nav-tabs .nav-link,
|
||||
.sidebar .nav a,
|
||||
.sidebar .nav a i,
|
||||
.navbar-collapse .navbar-nav .nav-link,
|
||||
.animation-transition-general,
|
||||
.tag,
|
||||
.tag [data-role="remove"],
|
||||
.animation-transition-general{
|
||||
@include transition($general-transition-time, $transition-ease);
|
||||
}
|
||||
|
||||
//transition for dropdown caret
|
||||
.bootstrap-switch-label:before,
|
||||
.caret{
|
||||
@include transition($fast-transition-time, $transition-ease);
|
||||
}
|
||||
|
||||
.dropdown-toggle[aria-expanded="true"]:after,
|
||||
a[data-toggle="collapse"][aria-expanded="true"] .caret,
|
||||
.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
|
||||
.card-collapse .card a[data-toggle="collapse"].expanded i{
|
||||
@include rotate-180();
|
||||
}
|
||||
|
||||
.button-bar{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
background: $white-bg;
|
||||
|
||||
& + .button-bar{
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
&:nth-child(2){
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.caret{
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
border-top: 4px dashed;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
margin-top: -5px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.pull-left{
|
||||
float: left;
|
||||
}
|
||||
.pull-right{
|
||||
float: right;
|
||||
}
|
||||
.sidebar, .main-panel{
|
||||
-webkit-transition-property: top,bottom,width;
|
||||
transition-property: top,bottom, width;
|
||||
-webkit-transition-duration: .2s,.2s, .35s;
|
||||
transition-duration: .2s,.2s, .35s;
|
||||
-webkit-transition-timing-function: linear,linear,ease;
|
||||
transition-timing-function: linear,linear,ease;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
// card user profile page
|
||||
|
||||
.card {
|
||||
form {
|
||||
label + .form-control {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// offline documentation
|
||||
|
||||
.offline-doc {
|
||||
.page-header:before {
|
||||
background: rgba(0,0,0,.75);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
color: $white-color;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
//documentation
|
||||
|
||||
.bd-docs {
|
||||
|
||||
h1,h2,h3,h4,h5,h6,p,ul li,ol li{
|
||||
color:#2c2c2c;
|
||||
}
|
||||
|
||||
.navbar .navbar-brand{
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
background: linear-gradient(#1e1e2f,#1e1e24);
|
||||
|
||||
.tim-icons{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
color: hsla(0,0%,100%,.8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-top: none;
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: rgba(255,255,255,.8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card.card-body,
|
||||
.card .card-body {
|
||||
color: hsla(0,0%,100%,.8);
|
||||
}
|
||||
|
||||
.card{
|
||||
p{
|
||||
color: rgba($white-color,0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.blockquote, .blockquote p, .card p{
|
||||
color: rgba($white-color,0.8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// footer align
|
||||
|
||||
.footer {
|
||||
.container-fluid > nav {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
src/assets/sass/black-dashboard/_mixins.scss
Normal file
8
src/assets/sass/black-dashboard/_mixins.scss
Normal file
@ -0,0 +1,8 @@
|
||||
//Components
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/vendor-prefixes";
|
||||
@import "mixins/inputs";
|
||||
@import "mixins/page-header";
|
||||
@import "mixins/dropdown";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/transparency";
|
||||
176
src/assets/sass/black-dashboard/_navbar.scss
Normal file
176
src/assets/sass/black-dashboard/_navbar.scss
Normal file
@ -0,0 +1,176 @@
|
||||
|
||||
|
||||
.navbar{
|
||||
padding: 10px 30px 10px 15px;
|
||||
width: 100%;
|
||||
z-index: 1050;
|
||||
min-height: 70px;
|
||||
background: $navbar-color;
|
||||
border-top: 2px solid $primary-color;
|
||||
.photo{
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
.btn{
|
||||
margin: 0 5px 0 10px;
|
||||
}
|
||||
|
||||
&.navbar-absolute{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
&[data-color="blue"]{
|
||||
border-top: 2px solid $info-color;
|
||||
}
|
||||
|
||||
&[data-color="green"]{
|
||||
border-top: 2px solid $success-color;
|
||||
}
|
||||
|
||||
&[data-color="orange"]{
|
||||
border-top: 2px solid $warning-color;
|
||||
}
|
||||
|
||||
&[data-color="red"]{
|
||||
border-top: 2px solid $danger-color;
|
||||
}
|
||||
|
||||
&[data-color="primary"]{
|
||||
border-top: 2px solid $primary-color;
|
||||
}
|
||||
|
||||
|
||||
&.navbar-transparent{
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.bg-white{
|
||||
.navbar-nav{
|
||||
.search-bar.input-group{
|
||||
i{
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar.input-group .form-control{
|
||||
background: rgba($black-color,0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
a.nav-link{
|
||||
color: $black-color !important;
|
||||
p{
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-text, .navbar-brand{
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
color: $black-color !important;
|
||||
}
|
||||
|
||||
.form-control::placeholder{
|
||||
color: $dark-gray !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.bg-dark{
|
||||
background: $black-color !important;
|
||||
}
|
||||
|
||||
&.bg-primary{
|
||||
background-color: $primary-color !important;
|
||||
}
|
||||
|
||||
&.bg-warning{
|
||||
background-color: $warning-color !important;
|
||||
}
|
||||
|
||||
&.bg-info{
|
||||
background-color: $info-color !important;
|
||||
}
|
||||
|
||||
&.bg-success{
|
||||
background-color: darken($success-color, 10%) !important;
|
||||
}
|
||||
|
||||
&.bg-danger{
|
||||
background-color: $danger-color !important;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
position: fixed;
|
||||
color: $white-color;
|
||||
margin-left: 17px;
|
||||
margin-top: -15px;
|
||||
text-transform: uppercase;
|
||||
font-size: $font-paragraph;
|
||||
}
|
||||
|
||||
.navbar-toggle button:focus, .navbar-toggler{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-minimize-fixed{
|
||||
position: fixed;
|
||||
margin-left: 40px;
|
||||
margin-top: 14px;
|
||||
transition: 0.3s ease;
|
||||
color: white;
|
||||
z-index: 20;
|
||||
opacity: 0;
|
||||
transition: 0.2s ease;
|
||||
button{
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification{
|
||||
background:$danger-color;
|
||||
color: white;
|
||||
border-radius: $border-radius-extreme;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border: 1px solid $danger-color;
|
||||
}
|
||||
|
||||
.navbar-nav li{
|
||||
padding: 0 10px;
|
||||
a{
|
||||
color: $white-color;
|
||||
}
|
||||
i{
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
85
src/assets/sass/black-dashboard/_page-header.scss
Normal file
85
src/assets/sass/black-dashboard/_page-header.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.page-header{
|
||||
min-height: 100vh;
|
||||
max-height: 999px;
|
||||
padding: 0;
|
||||
color: $white-color;
|
||||
position: relative;
|
||||
|
||||
.page-header-image{
|
||||
position: absolute;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.content-center{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
padding: 0 15px;
|
||||
width: 100%;
|
||||
max-width: 880px;
|
||||
|
||||
}
|
||||
|
||||
footer{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container{
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.category,
|
||||
.description{
|
||||
color: $opacity-8;
|
||||
}
|
||||
|
||||
&.page-header-small{
|
||||
min-height: 60vh;
|
||||
max-height: 440px;
|
||||
}
|
||||
|
||||
&.page-header-mini{
|
||||
min-height: 40vh;
|
||||
max-height: 340px;
|
||||
}
|
||||
|
||||
.title{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.title + h4{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before{
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:before{
|
||||
background-color: rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
&[filter-color="orange"]{
|
||||
@include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6));
|
||||
}
|
||||
}
|
||||
510
src/assets/sass/black-dashboard/_responsive.scss
Normal file
510
src/assets/sass/black-dashboard/_responsive.scss
Normal file
@ -0,0 +1,510 @@
|
||||
@media screen and (max-width: 991px){
|
||||
.profile-photo .profile-photo-small{
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.button-dropdown{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#searchModal .modal-dialog{
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#minimizeSidebar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
.container-fluid{
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-collapse{
|
||||
.input-group{
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
.nav-item:first-child{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.nav-item:not(:last-child){
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a.nav-link{
|
||||
i{
|
||||
opacity: 1;
|
||||
margin-left: 5px;
|
||||
}
|
||||
p{
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#searchModal .modal-dialog{
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.show .dropdown-menu{
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu{
|
||||
display: none;
|
||||
li a{
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.show .dropdown-menu,
|
||||
.dropdown .dropdown-menu{
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
transition: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
width: auto;
|
||||
margin: 0px 1rem;
|
||||
margin-top: 0px;
|
||||
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item:focus,
|
||||
.dropdown-menu .dropdown-item:hover{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
&.bg-white .dropdown-menu .dropdown-item:focus,
|
||||
&.bg-white .dropdown-menu .dropdown-item:hover{
|
||||
color: $default-color;
|
||||
}
|
||||
|
||||
button.navbar-toggler[data-target="#navigation"]{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.navbar-toggler-bar{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
background: $white-bg;
|
||||
|
||||
&.navbar-kebab{
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
& + .navbar-toggler-bar{
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
& + .navbar-toggler-bar.navbar-kebab{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
&.bar2{
|
||||
width: 17px;
|
||||
transition: width .2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
|
||||
background-color: $default-color;
|
||||
}
|
||||
|
||||
& .toggled .navbar-toggler-bar{
|
||||
width: 24px;
|
||||
|
||||
& + .navbar-toggler-bar{
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.rtl .navbar > .container-fluid .navbar-brand{
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 260px;
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
z-index: 1032;
|
||||
visibility: visible;
|
||||
overflow-y: visible;
|
||||
padding: 0;
|
||||
@include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
@include transform-translate-x(-260px);
|
||||
}
|
||||
.nav-open{
|
||||
.main-panel{
|
||||
right: 0;
|
||||
@include transform-translate-x(260px);
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
|
||||
@include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
@include transform-translate-x(0px);
|
||||
&:before{
|
||||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.menu-on-right{
|
||||
|
||||
.main-panel{
|
||||
@include transform-translate-x(-260px);
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.sidebar{
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
|
||||
#bodyClick{
|
||||
right: 260px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu-on-right{
|
||||
.sidebar{
|
||||
left: auto;
|
||||
right: 0;
|
||||
@include transform-translate-x(260px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
.bar1 {
|
||||
top: 0px;
|
||||
@include bar-animation($topbar-back);
|
||||
}
|
||||
.bar2 {
|
||||
opacity: 1;
|
||||
}
|
||||
.bar3 {
|
||||
bottom: 0px;
|
||||
@include bar-animation($bottombar-back);
|
||||
}
|
||||
.toggled .bar1 {
|
||||
top: 6px;
|
||||
@include bar-animation($topbar-x);
|
||||
}
|
||||
.toggled .bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
.toggled .bar3 {
|
||||
bottom: 6px;
|
||||
@include bar-animation($bottombar-x);
|
||||
}
|
||||
|
||||
@include topbar-x-rotation();
|
||||
@include topbar-back-rotation();
|
||||
@include bottombar-x-rotation();
|
||||
@include bottombar-back-rotation();
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
#bodyClick{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 260px;
|
||||
content: "";
|
||||
z-index: 9999;
|
||||
overflow-x: hidden;
|
||||
background-color: transparent;
|
||||
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
}
|
||||
|
||||
.footer{
|
||||
.copyright{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.section-nucleo-icons .icons-container{
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
.nav-link{
|
||||
i.fa,
|
||||
i.tim-icons{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
width: 100%;
|
||||
.content{
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle:after{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: .255em;
|
||||
vertical-align: .255em;
|
||||
content: "";
|
||||
border-top: .3em solid;
|
||||
border-right: .3em solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: .3em solid transparent;
|
||||
|
||||
}
|
||||
|
||||
.footer{
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.rtl .footer{
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px){
|
||||
.navbar-collapse{
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.navbar .navbar-toggle{
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
.nav-link{
|
||||
&.profile-photo{
|
||||
padding: 0;
|
||||
margin: 7px $padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-nucleo-icons .icons-container{
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item{
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.footer{
|
||||
.copyright{
|
||||
float: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar{
|
||||
.caret{
|
||||
position: absolute;
|
||||
left: 80%;
|
||||
top: 55%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
.nav-tabs{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
text-align: center;
|
||||
|
||||
.nav-item > .nav-link{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-stats [class*="col-"] .statistics::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-panel .content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.rtl .main-panel .content{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.footer{
|
||||
nav{
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-page .section-story-overview .image-container:nth-child(2){
|
||||
margin-left: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.card-timeline {
|
||||
.timeline{
|
||||
&:before{
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
> li > .timeline-badge{
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
> li > .timeline-panel{
|
||||
float: right;
|
||||
width: 86%;
|
||||
|
||||
&:before{
|
||||
border-left-width: 0;
|
||||
border-right-width: 15px;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-left-width: 0;
|
||||
border-right-width: 14px;
|
||||
left: -14px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px){
|
||||
.navbar[class*='navbar-toggleable-'] .container{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.card-contributions .card-stats{
|
||||
flex-direction: column;
|
||||
|
||||
.bootstrap-switch{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
.copyright{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.section-nucleo-icons{
|
||||
.icons-container{
|
||||
i{
|
||||
font-size: 30px;
|
||||
|
||||
&:nth-child(6){
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header{
|
||||
.container h6.category-absolute{
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-horizontal .col-form-label, .form-horizontal .label-on-right{
|
||||
text-align: inherit;
|
||||
padding-top: 0;
|
||||
code{
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-wizard .card-footer .pull-left{
|
||||
padding-left: 0;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-wizard .card-footer .pull-right{
|
||||
padding-right: 0;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
73
src/assets/sass/black-dashboard/_rtl.scss
Normal file
73
src/assets/sass/black-dashboard/_rtl.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.rtl{
|
||||
.sidebar,
|
||||
.bootstrap-navbar{
|
||||
right: 0;
|
||||
left: auto;
|
||||
margin-right: 20px;
|
||||
margin-left: 0;
|
||||
|
||||
.nav{
|
||||
i{
|
||||
float: right;
|
||||
margin-left: 15px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-right: 45px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.caret{
|
||||
left: 11px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.logo{
|
||||
a.logo-mini{
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.simple-text{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.dropdown-toggle:after{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.main-panel .content{
|
||||
padding: 80px 280px 30px 30px;
|
||||
}
|
||||
|
||||
.footer{
|
||||
padding: 24px 300px 24px 0;
|
||||
}
|
||||
|
||||
.search-bar{
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.card.card-tasks .dropdown-menu{
|
||||
margin-right: -115px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px){
|
||||
|
||||
.sidebar{
|
||||
margin-right: 0;
|
||||
}
|
||||
.main-panel .content{
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
323
src/assets/sass/black-dashboard/_sidebar-and-main-panel.scss
Normal file
323
src/assets/sass/black-dashboard/_sidebar-and-main-panel.scss
Normal file
@ -0,0 +1,323 @@
|
||||
.wrapper{
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
|
||||
&.wrapper-full-page{
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar,
|
||||
.off-canvas-sidebar{
|
||||
height: calc(100vh - 90px);
|
||||
width: 230px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
display: block;
|
||||
background: linear-gradient(to bottom, $primary-color 0%, $primary-states-color 100%);
|
||||
box-shadow:0px 0px 45px 0px rgba(0,0,0,0.6);
|
||||
margin-top: 80px;
|
||||
margin-left: 20px;
|
||||
border-radius: 5px;
|
||||
|
||||
&[data-color="blue"]{
|
||||
@include linear-gradient($info-states-color, $info-color);
|
||||
&:before{
|
||||
border-bottom-color: $info-color;
|
||||
}
|
||||
}
|
||||
&[data-color="green"]{
|
||||
@include linear-gradient($success-states-color, $success-color);
|
||||
&:before{
|
||||
border-bottom-color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-wrapper{
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
max-height: calc(100vh - 705px);
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
.dropdown .dropdown-backdrop{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar-form{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-minimize{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 2px;
|
||||
opacity: 1;
|
||||
|
||||
@extend .animation-transition-general;
|
||||
|
||||
}
|
||||
.logo-tim{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333;
|
||||
display: block;
|
||||
height: 61px;
|
||||
width: 61px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav{
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
|
||||
.caret{
|
||||
top: 14px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
li{
|
||||
> a + div .nav li > a{
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
> a{
|
||||
margin: 10px 15px 0;
|
||||
border-radius: $btn-round-radius;
|
||||
color: $white-color;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-mini;
|
||||
padding: 10px 8px;
|
||||
line-height: $line-height-nav-link;
|
||||
}
|
||||
|
||||
&:first-child > a{
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
&:hover:not(.active) > a,
|
||||
&:focus:not(.active) > a{
|
||||
|
||||
|
||||
i,p{
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a{
|
||||
i,p{
|
||||
color: $white-color;
|
||||
}
|
||||
&:before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
top: 22px;
|
||||
left: -4px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
@extend .animation-transition-general;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 20px;
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
line-height: 30px;
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
color: rgba($white-color,0.8);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-background{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #FFFFFF;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.logo{
|
||||
position: relative;
|
||||
padding: $padding-base-vertical $padding-base-horizontal;
|
||||
z-index: 4;
|
||||
|
||||
a.logo-mini,
|
||||
a.logo-normal{
|
||||
@extend .animation-transition-general;
|
||||
}
|
||||
|
||||
a.logo-mini{
|
||||
opacity: 1;
|
||||
float: left;
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
a.logo-normal{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15px;
|
||||
height: 1px;
|
||||
width: calc(100% - 30px);
|
||||
background-color: $opacity-5;
|
||||
|
||||
}
|
||||
|
||||
p{
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
margin: 10px 10px;
|
||||
color: $white-color;
|
||||
line-height: 20px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.simple-text{
|
||||
text-transform: uppercase;
|
||||
padding: $padding-base-vertical 0;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-large;
|
||||
color: $white-color;
|
||||
text-decoration: none;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-tim{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333;
|
||||
display: block;
|
||||
height: 61px;
|
||||
width: 61px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.visible-on-sidebar-regular{
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
|
||||
.off-canvas-sidebar{
|
||||
.nav {
|
||||
> li > a,
|
||||
> li > a:hover{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
> li > a:focus{
|
||||
background: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-panel{
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient($background-black, $background-states-black);
|
||||
|
||||
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
|
||||
> .navbar{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.header{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.content{
|
||||
padding: 80px 30px 30px 280px;
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
.navbar-minimize{
|
||||
button{
|
||||
margin-left: 25px;
|
||||
i{
|
||||
color: $white-color;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.perfect-scrollbar-on{
|
||||
.sidebar,
|
||||
.main-panel{
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
234
src/assets/sass/black-dashboard/_tables.scss
Normal file
234
src/assets/sass/black-dashboard/_tables.scss
Normal file
@ -0,0 +1,234 @@
|
||||
.table{
|
||||
|
||||
> tbody > tr > td {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
|
||||
.photo {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr.table-success > td{
|
||||
background-color: darken($success-color,10%);
|
||||
}
|
||||
|
||||
> tbody > tr.table-info > td{
|
||||
background-color: $info-color;
|
||||
}
|
||||
|
||||
> tbody > tr.table-primary > td{
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
> tbody > tr.table-warning > td{
|
||||
background-color: $warning-color;
|
||||
}
|
||||
> tbody > tr.table-danger > td{
|
||||
background-color: $danger-color;
|
||||
}
|
||||
|
||||
|
||||
.img-wrapper{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.img-row{
|
||||
max-width: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.form-check{
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
|
||||
& label .form-check-sign::before,
|
||||
& label .form-check-sign::after{
|
||||
top: -17px;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
small,.small{
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.card-tasks .card-body &{
|
||||
margin-bottom: 0;
|
||||
|
||||
> thead > tr > th,
|
||||
> tbody > tr > th,
|
||||
> tfoot > tr > th,
|
||||
> thead > tr > td,
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > td{
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
> thead > tr > th{
|
||||
border-bottom-width: 1px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
border: 0;
|
||||
color: rgba($white-color, 0.7);
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox{
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
width: 15px;
|
||||
|
||||
.icons{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label{
|
||||
&:after,
|
||||
&:before{
|
||||
top: -17px;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> thead > tr > th,
|
||||
> tbody > tr > th,
|
||||
> tfoot > tr > th,
|
||||
> thead > tr > td,
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > td{
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 12px 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.table-shopping tbody tr:last-child td{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.th-description{
|
||||
max-width: 150px;
|
||||
}
|
||||
.td-price{
|
||||
font-size: 26px;
|
||||
font-weight: $font-weight-light;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
.td-total{
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $font-size-h5;
|
||||
padding-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.td-actions .btn{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
> tbody > tr{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> tfoot > tr {
|
||||
color: hsla(0,0%,100%,.7);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-shopping{
|
||||
> thead > tr > th{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
> tbody > tr > td{
|
||||
font-size: $font-paragraph;
|
||||
|
||||
b{
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.td-name{
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: 1.5em;
|
||||
small{
|
||||
color: $dark-gray;
|
||||
font-size: 0.75em;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
.td-number{
|
||||
font-weight: $font-weight-light;
|
||||
|
||||
.btn-group {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
.td-name{
|
||||
min-width: 200px;
|
||||
}
|
||||
.td-number{
|
||||
text-align: right;
|
||||
min-width: 170px;
|
||||
|
||||
small{
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.img-container{
|
||||
width: 120px;
|
||||
max-height: 160px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive{
|
||||
overflow: scroll;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#tables .table-responsive{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
table.tablesorter thead tr .header{
|
||||
//background-image: url("../../../assets/img/dashboard/pro/bg.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table.tablesorter thead tr .headerSortUp {
|
||||
//background-image: url("../../../assets/img/dashboard/pro/asc.gif");
|
||||
}
|
||||
table.tablesorter thead tr .headerSortDown {
|
||||
//background-image: url("../../../assets/img/dashboard/pro/desc.gif");
|
||||
}
|
||||
198
src/assets/sass/black-dashboard/_typography.scss
Normal file
198
src/assets/sass/black-dashboard/_typography.scss
Normal file
@ -0,0 +1,198 @@
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea{
|
||||
font-family: $sans-serif-family;
|
||||
}
|
||||
.card{
|
||||
h1,h2,h3,h4,h5,h6,p{
|
||||
color: rgba($white-color,0.8);
|
||||
}
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-weight: $font-weight-normal;
|
||||
color: rgba($white-color,0.8);
|
||||
}
|
||||
|
||||
a{
|
||||
color: $primary-states-color;
|
||||
font-weight: $font-weight-light;
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
h1, .h1 {
|
||||
font-size: $font-size-h1;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 1.05;
|
||||
margin-bottom: $margin-base-vertical * 2;
|
||||
|
||||
small{
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
}
|
||||
h2, .h2{
|
||||
font-size: $font-size-h2;
|
||||
margin-bottom: $margin-base-vertical * 2;
|
||||
font-weight: $font-weight-normal;
|
||||
|
||||
}
|
||||
h3, .h3{
|
||||
font-size: $font-size-h3;
|
||||
margin-bottom: $margin-base-vertical * 2;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
h4, .h4{
|
||||
font-size: $font-size-h4;
|
||||
line-height: 1.45em;
|
||||
margin-bottom: $margin-base-vertical;
|
||||
font-weight: $font-weight-normal;
|
||||
|
||||
& + .category,
|
||||
&.title + .category{
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
h5, .h5 {
|
||||
font-size: $font-size-h5;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 15px;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
h6, .h6{
|
||||
font-size: $font-size-h6;
|
||||
font-weight: $font-weight-normal;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-semi;
|
||||
}
|
||||
p{
|
||||
color: rgba($white-color,0.8);
|
||||
font-weight: $font-weight-light;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.description{
|
||||
font-size: 1.14em;
|
||||
}
|
||||
}
|
||||
|
||||
// i.fa{
|
||||
// font-size: 18px;
|
||||
// position: relative;
|
||||
// top: 1px;
|
||||
// }
|
||||
|
||||
.title{
|
||||
font-weight: $font-weight-semi;
|
||||
&.title-up{
|
||||
text-transform: uppercase;
|
||||
|
||||
a{
|
||||
color: $black-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
& + .category{
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.description,
|
||||
.card-description,
|
||||
.footer-big p,
|
||||
.card .footer .stats{
|
||||
color: $dark-gray;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
.category,
|
||||
.card-category{
|
||||
text-transform: capitalize;
|
||||
font-weight: $font-weight-normal;
|
||||
color: rgba($white-color, 0.6);
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.card-category{
|
||||
font-size: $font-size-h6;
|
||||
}
|
||||
|
||||
.text-primary,
|
||||
a.text-primary:focus, a.text-primary:hover {
|
||||
color: $brand-primary !important;
|
||||
}
|
||||
.text-info,
|
||||
a.text-info:focus, a.text-info:hover {
|
||||
color: $brand-info !important;
|
||||
}
|
||||
.text-success,
|
||||
a.text-success:focus, a.text-success:hover {
|
||||
color: $brand-success !important;
|
||||
}
|
||||
.text-warning,
|
||||
a.text-warning:focus, a.text-warning:hover {
|
||||
color: $brand-warning !important;
|
||||
}
|
||||
.text-danger,
|
||||
a.text-danger:focus, a.text-danger:hover {
|
||||
color: $brand-danger !important;
|
||||
}
|
||||
|
||||
.text-gray,
|
||||
a.text-gray:focus, a.text-gray:hover{
|
||||
color: $light-gray !important;
|
||||
}
|
||||
|
||||
|
||||
.blockquote{
|
||||
border-left: none;
|
||||
border: 1px solid $default-color;
|
||||
padding: 20px;
|
||||
font-size: $font-size-blockquote;
|
||||
line-height: 1.8;
|
||||
|
||||
small{
|
||||
color: $default-color;
|
||||
font-size: $font-size-small;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.blockquote-primary{
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
|
||||
small{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-danger{
|
||||
border-color: $danger-color;
|
||||
color: $danger-color;
|
||||
|
||||
small{
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-white{
|
||||
border-color: $opacity-8;
|
||||
color: $white-color;
|
||||
|
||||
small{
|
||||
color: $opacity-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li, ol li{
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
pre{
|
||||
color: rgba($white-color,0.8);
|
||||
}
|
||||
310
src/assets/sass/black-dashboard/_variables.scss
Normal file
310
src/assets/sass/black-dashboard/_variables.scss
Normal file
@ -0,0 +1,310 @@
|
||||
//== Buttons
|
||||
//
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$sans-serif-family: 'Poppins';
|
||||
|
||||
$none: 0 !default;
|
||||
$border-thin: 1px !default;
|
||||
$border-thick: 2px !default;
|
||||
|
||||
$white-color: #FFFFFF !default;
|
||||
$white-bg: #FFFFFF !default;
|
||||
$orange-bg: #e95e38 !default;
|
||||
|
||||
$smoke-bg: #F5F5F5 !default;
|
||||
$light-black: #444 !default;
|
||||
|
||||
$black-bg: rgba(30,30,30,.97) !default;
|
||||
|
||||
$black-color: #222a42 !default;
|
||||
$black-states-color: #1d253b !default;
|
||||
$black-hr: #444444 !default;
|
||||
|
||||
$hr-line: rgba(0,0,0, .1) !default;
|
||||
|
||||
$dark-blue: #1c2236;
|
||||
|
||||
$light-gray: #E3E3E3 !default;
|
||||
$medium-gray: #DDDDDD !default;
|
||||
$dark-gray: #9A9A9A !default;
|
||||
|
||||
$opacity-gray-3: rgba(222,222,222, .3) !default;
|
||||
$opacity-gray-5: rgba(222,222,222, .5) !default;
|
||||
$opacity-gray-8: rgba(222,222,222, .8) !default;
|
||||
|
||||
|
||||
$opacity-5: rgba(255,255,255, .5) !default;
|
||||
$opacity-8: rgba(255,255,255, .8) !default;
|
||||
|
||||
$datepicker-color-days: rgba(255,255,255, .8) !default;
|
||||
$datepicker-color-old-new-days: rgba(255,255,255, .4) !default;
|
||||
|
||||
|
||||
$opacity-1: rgba(255,255,255, .1) !default;
|
||||
$opacity-2: rgba(255,255,255, .2) !default;
|
||||
|
||||
$transparent-bg: transparent !default;
|
||||
$dark-background: #555555 !default;
|
||||
|
||||
$background-white: #f5f6fa !default;
|
||||
|
||||
$background-black: #1e1e2f !default;
|
||||
$background-states-black: #1e1e24 !default;
|
||||
|
||||
$card-black-background: #27293d !default;
|
||||
|
||||
$default-color: #344675 !default;
|
||||
$default-states-color: #263148 !default;
|
||||
$default-color-opacity: rgba(182, 182, 182, .6) !default;
|
||||
|
||||
$primary-color: #e14eca !default;
|
||||
$primary-states-color: #ba54f5 !default;
|
||||
$primary-color-opacity: rgba(249, 99, 50, .3) !default;
|
||||
$primary-color-alert: rgba(249, 99, 50, .8) !default;
|
||||
|
||||
$success-color: #00f2c3 !default;
|
||||
$success-states-color: #0098f0 !default;
|
||||
$success-color-opacity: rgba(24, 206, 15, .3) !default;
|
||||
$success-color-alert: rgba(24, 206, 15, .8) !default;
|
||||
|
||||
$info-color: #1d8cf8 !default;
|
||||
$info-states-color: #3358f4 !default;
|
||||
$info-color-opacity: rgba(44, 168, 255, .3) !default;
|
||||
$info-color-alert: rgba(44, 168, 255, .8) !default;
|
||||
|
||||
$warning-color: #ff8d72 !default;
|
||||
$warning-states-color: #ff6491 !default;
|
||||
$warning-color-opacity: rgba(255, 178, 54, .3) !default;
|
||||
$warning-color-alert: rgba(255, 178, 54, .8) !default;
|
||||
|
||||
$danger-color: #fd5d93 !default;
|
||||
$danger-states-color: #ec250d !default;
|
||||
$danger-color-opacity: rgba(255, 54, 54, .3) !default;
|
||||
$danger-color-alert: rgba(255, 54, 54, .8) !default;
|
||||
|
||||
$orange-color: #f96332 !default;
|
||||
|
||||
/* navbar color */
|
||||
|
||||
$navbar-color: #1a1e34 !default;
|
||||
/* brand Colors */
|
||||
$brand-primary: $primary-color !default;
|
||||
$brand-info: $info-color !default;
|
||||
$brand-success: $success-color !default;
|
||||
$brand-warning: $warning-color !default;
|
||||
$brand-danger: $danger-color !default;
|
||||
$brand-inverse: $black-color !default;
|
||||
|
||||
$link-disabled-color: #666666 !default;
|
||||
|
||||
/* light colors */
|
||||
$light-blue: rgba($primary-color, .2);
|
||||
$light-azure: rgba($info-color, .2);
|
||||
$light-green: rgba($success-color, .2);
|
||||
$light-orange: rgba($warning-color, .2);
|
||||
$light-red: rgba($danger-color, .2);
|
||||
|
||||
//== Components
|
||||
//
|
||||
|
||||
$padding-input-vertical: 11px !default;
|
||||
$padding-input-horizontal: 19px !default;
|
||||
|
||||
$padding-btn-vertical: 11px !default;
|
||||
$padding-btn-horizontal: 40px !default;
|
||||
|
||||
$padding-base-vertical: .5rem !default;
|
||||
$padding-base-horizontal: .7rem !default;
|
||||
|
||||
$padding-round-horizontal: 23px !default;
|
||||
|
||||
$padding-simple-vertical: 10px !default;
|
||||
$padding-simple-horizontal: 17px !default;
|
||||
|
||||
$padding-large-vertical: 15px !default;
|
||||
$padding-large-horizontal: 48px !default;
|
||||
|
||||
$padding-small-vertical: 5px !default;
|
||||
$padding-small-horizontal: 15px !default;
|
||||
|
||||
// $padding-xs-vertical: 1px !default;
|
||||
// $padding-xs-horizontal: 5px !default;
|
||||
|
||||
$padding-label-vertical: 2px !default;
|
||||
$padding-label-horizontal: 12px !default;
|
||||
|
||||
$margin-large-vertical: 30px !default;
|
||||
$margin-base-vertical: 15px !default;
|
||||
|
||||
$margin-base-horizontal: 15px !default;
|
||||
|
||||
$margin-bottom: 10px !default;
|
||||
$border: 1px solid !default;
|
||||
$border-radius-extra-small: 0.1428rem !default;
|
||||
$border-radius-small: 0.2857rem !default;
|
||||
$border-radius-large: 0.4285rem !default;
|
||||
$border-radius-extreme: 0.875rem !default;
|
||||
|
||||
$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
|
||||
$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
|
||||
|
||||
$btn-round-radius: 30px !default;
|
||||
|
||||
$height-base: 55px !default;
|
||||
|
||||
$btn-icon-size: 3.5rem !default;
|
||||
$btn-icon-size-regular: 2.375rem !default;
|
||||
$btn-icon-font-size-regular: 0.9375rem !default;
|
||||
$btn-icon-font-size-small: 0.6875rem !default;
|
||||
$btn-icon-size-small: 1.875rem !default;
|
||||
$btn-icon-font-size-lg: 1.325rem !default;
|
||||
$btn-icon-size-lg: 3.6rem !default;
|
||||
|
||||
$font-size-h1: 2.0625rem !default; // ~ 33px
|
||||
$font-size-h2: 1.6875rem !default; // ~ 27px
|
||||
$font-size-h3: 1.4375rem !default; // ~ 23px
|
||||
$font-size-h4: 1.0625rem !default; // ~ 17px
|
||||
$font-size-h5: 0.8125rem !default; // ~ 13px
|
||||
$font-size-h6: 0.75rem !default; // ~ 12px
|
||||
|
||||
$font-paragraph: 1rem !default;
|
||||
$font-size-navbar: 1em !default;
|
||||
$font-size-mini: 0.7142em !default;
|
||||
$font-size-small: 0.8571em !default;
|
||||
$font-size-base: 14px !default;
|
||||
$font-size-large: 1em !default;
|
||||
$font-size-large-navbar: 20px !default;
|
||||
$font-size-blockquote: 1.1em !default; // ~ 15px
|
||||
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-semi: 600 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
|
||||
$line-height-general: 1.5 !default;
|
||||
$line-height-nav-link: 1.625rem !default;
|
||||
$btn-icon-line-height: 2.4em !default;
|
||||
$line-height: 1.35em !default;
|
||||
$line-height-lg: 54px !default;
|
||||
|
||||
|
||||
$border-radius-top: 10px 10px 0 0 !default;
|
||||
$border-radius-bottom: 0 0 10px 10px !default;
|
||||
|
||||
$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125);
|
||||
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
|
||||
$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);
|
||||
|
||||
$general-transition-time: 300ms !default;
|
||||
|
||||
$slow-transition-time: 370ms !default;
|
||||
$dropdown-coordinates: 29px -50px !default;
|
||||
|
||||
$fast-transition-time: 150ms !default;
|
||||
$select-coordinates: 50% -40px !default;
|
||||
|
||||
$transition-linear: linear !default;
|
||||
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
|
||||
$transition-ease: ease 0s;
|
||||
|
||||
|
||||
//$navbar-padding-a: 9px 13px;
|
||||
$navbar-margin-a: 15px 0px;
|
||||
|
||||
$padding-social-a: 10px 5px;
|
||||
|
||||
$navbar-margin-a-btn: 15px 0px;
|
||||
$navbar-margin-a-btn-round: 16px 0px;
|
||||
|
||||
$navbar-padding-a-icons: 6px 15px;
|
||||
$navbar-margin-a-icons: 6px 3px;
|
||||
|
||||
$navbar-padding-base: 0.625rem;
|
||||
//$navbar-margin-brand: 5px 0px;
|
||||
|
||||
$navbar-margin-brand-icons: 12px auto;
|
||||
$navbar-margin-btn: 15px 3px;
|
||||
|
||||
$height-icon-sm: 32px;
|
||||
$width-icon-sm: 32px;
|
||||
$padding-icon-sm: 4px;
|
||||
$border-radius-icon-sm: 7px;
|
||||
|
||||
$height-icon-message: 40px;
|
||||
$width-icon-message: 40px;
|
||||
|
||||
$height-icon-message-sm: 20px;
|
||||
$width-icon-message-sm: 20px;
|
||||
|
||||
$white-navbar: rgba(#FFFFFF, .96);
|
||||
$primary-navbar: rgba(#34ACDC, .98);
|
||||
$info-navbar: rgba(#5BCAFF, .98);
|
||||
$success-navbar: rgba(#4CD964, .98);
|
||||
$warning-navbar: rgba(#FF9500, .98);
|
||||
$danger-navbar: rgba(#FF4C40, .98);
|
||||
|
||||
$topbar-x: topbar-x !default;
|
||||
$topbar-back: topbar-back !default;
|
||||
$bottombar-x: bottombar-x !default;
|
||||
$bottombar-back: bottombar-back !default;
|
||||
|
||||
//Nucleo Icons
|
||||
|
||||
$nc-font-path: '../fonts' !default;
|
||||
$nc-font-size-base: 14px !default;
|
||||
$nc-css-prefix: tim !default;
|
||||
$nc-background-color: #eee !default;
|
||||
$nc-li-width: (30em / 14) !default;
|
||||
$nc-padding-width: (1em/3) !default;
|
||||
|
||||
// Social icons color
|
||||
$social-twitter: #55acee !default;
|
||||
$social-twitter-state-color: darken(#55acee, 5%) !default;
|
||||
|
||||
$social-facebook: #3b5998 !default;
|
||||
$social-facebook-state-color: darken(#3b5998, 5%) !default;
|
||||
|
||||
$social-google: #dd4b39 !default;
|
||||
$social-google-state-color: darken(#dd4b39, 5%) !default;
|
||||
|
||||
$social-linkedin: #0077B5 !default;
|
||||
$social-linkedin-state-color: darken(#0077B5, 5%) !default;
|
||||
|
||||
// Social icons color
|
||||
$social-twitter: #55acee !default;
|
||||
$social-twitter-state-color: lighten(#55acee, 6%) !default;
|
||||
|
||||
$social-facebook: #3b5998 !default;
|
||||
$social-facebook-state-color: lighten(#3b5998, 6%) !default;
|
||||
|
||||
$social-google: #dd4b39 !default;
|
||||
$social-google-state-color: lighten(#dd4b39, 6%) !default;
|
||||
|
||||
$social-linkedin: #0077B5 !default;
|
||||
$social-linkedin-state-color: lighten(#0077B5, 6%) !default;
|
||||
|
||||
$social-pinterest: #cc2127 !default;
|
||||
$social-pinterest-state-color: lighten(#cc2127, 6%) !default;
|
||||
|
||||
$social-dribbble: #ea4c89 !default;
|
||||
$social-dribbble-state-color: lighten(#ea4c89, 6%) !default;
|
||||
|
||||
$social-github: #333333 !default;
|
||||
$social-github-state-color: #ccc !default;
|
||||
|
||||
$social-youtube: #e52d27 !default;
|
||||
$social-youtube-state-color: lighten(#e52d27, 6%) !default;
|
||||
|
||||
$social-instagram: #125688 !default;
|
||||
$social-instagram-state-color: lighten(#125688, 6%) !default;
|
||||
|
||||
$social-reddit: #ff4500 !default;
|
||||
$social-reddit-state-color: lighten(#ff4500, 6%) !default;
|
||||
|
||||
$social-tumblr: #35465c !default;
|
||||
$social-tumblr-state-color: lighten(#35465c, 6%) !default;
|
||||
|
||||
$social-behance: #1769ff !default;
|
||||
$social-behance-state-color: lighten(#1769ff, 6%) !default;
|
||||
286
src/assets/sass/black-dashboard/_white-content.scss
Normal file
286
src/assets/sass/black-dashboard/_white-content.scss
Normal file
@ -0,0 +1,286 @@
|
||||
.white-content{
|
||||
background: $background-white;
|
||||
|
||||
.navbar.navbar-transparent .navbar-brand{
|
||||
color: $black-states-color;
|
||||
}
|
||||
|
||||
.navbar.navbar-transparent .navbar-toggler-bar{
|
||||
background: $black-states-color;
|
||||
}
|
||||
.navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) {
|
||||
color: $black-states-color;
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
background: #f5f6fa;
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
|
||||
color: $black-states-color;
|
||||
}
|
||||
|
||||
.navbar.navbar-transparent .navbar-minimize button i{
|
||||
color: $black-states-color;
|
||||
}
|
||||
|
||||
.navbar.navbar-transparent .search-bar.input-group i{
|
||||
color: $black-states-color;
|
||||
}
|
||||
.navbar.navbar-transparent .search-bar.input-group .form-control{
|
||||
color: $default-color;
|
||||
&::placeholder{
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.font-icon-detail i{
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
.btn:not([data-action]):hover{
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
.btn-neutral.btn-link{
|
||||
color: rgba($black-color, 0.7);
|
||||
}
|
||||
|
||||
//style for inputs
|
||||
|
||||
@include form-control-placeholder(rgba($black-color,0.4), 1);
|
||||
.has-danger{
|
||||
.form-control, .input-group-prepend .input-group-text{
|
||||
border-color: $danger-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text{
|
||||
border-color: rgba($black-states-color,0.5);
|
||||
color: $black-states-color;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
color: $black-color;
|
||||
border-color: rgba($black-states-color,0.5);
|
||||
&:focus{
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control,
|
||||
.form-control + .input-group-prepend .input-group-text,
|
||||
.form-control + .input-group-append .input-group-text,
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $opacity-gray-3;
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.input-group[disabled]{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $black-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
|
||||
background: $light-gray;
|
||||
border-color: rgba($black-states-color,0.3);
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text,
|
||||
.form-control{
|
||||
background-color: $white-bg;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&.no-border{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group-prepend .input-group-text {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.input-group-append .input-group-text {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
|
||||
border-color: $danger-states-color;
|
||||
}
|
||||
|
||||
.has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
|
||||
border-color: darken($success-color, 10%);
|
||||
}
|
||||
|
||||
|
||||
.btn.btn-link{
|
||||
&:hover,&:active, &:focus{
|
||||
color: $dark-gray !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group .btn.active{
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
|
||||
background: darken($background-white,10%);
|
||||
}
|
||||
|
||||
.bootstrap-switch-off:before{
|
||||
background: rgba(darken($background-white,10%),0.5);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.card:not(.card-pricing){
|
||||
background: $white-color;
|
||||
box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05);
|
||||
.card-header{
|
||||
color: $black-color;
|
||||
a[data-toggle="collapse"]{
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
.card-header .card-title, .card-body .card-title{
|
||||
color: $black-states-color;
|
||||
}
|
||||
|
||||
.card-body{
|
||||
.card-category, .card-description{
|
||||
color: $black-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
label:not(.btn){
|
||||
color: $default-color;
|
||||
}
|
||||
|
||||
.pagination .page-item:not(.active) .page-link{
|
||||
color: $black-states-color;
|
||||
&:hover{
|
||||
background: rgba($dark-gray,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.card-wizard).nav-pills .nav-item .nav-link {
|
||||
color: #444;
|
||||
background-color: hsla(0,0%,87%,.3);
|
||||
&:not(.active):hover{
|
||||
background: hsla(0,0%,87%,.5);
|
||||
}
|
||||
&.active{
|
||||
color: $white-color;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content .tab-pane {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
|
||||
.card{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-collapse{
|
||||
.card{
|
||||
.card-body{
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-contributions{
|
||||
span{
|
||||
color: $dark-gray;
|
||||
}
|
||||
.bootstrap-switch-container{
|
||||
span{
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.card-plain{
|
||||
background: $transparent-bg;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.card-tasks{
|
||||
.card-body{
|
||||
i{
|
||||
color: rgba(34,42,66,0.7);
|
||||
&:hover{
|
||||
color: #222a42;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table{
|
||||
|
||||
> tbody > tr > td {
|
||||
color: rgba($black-color, 0.7) !important;
|
||||
|
||||
}
|
||||
|
||||
> thead > tr > th,
|
||||
> tbody > tr > th,
|
||||
> tfoot > tr > th,
|
||||
> thead > tr > td,
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > td{
|
||||
border-color: rgba($black-color, 0.2);
|
||||
padding: 12px 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> thead > tr > th, button.btn-neutral.btn-link{
|
||||
color: rgba($black-color, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.footer ul li a{
|
||||
color: $black-states-color;
|
||||
}
|
||||
|
||||
.footer .copyright{
|
||||
color: $black-states-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
|
||||
.card-animation-on-hover{
|
||||
transition: all .3s cubic-bezier(.34,1.61,.7,1);
|
||||
&:hover{
|
||||
transform: translate3d(0,-5px,0);
|
||||
transition: all .3s cubic-bezier(.34,1.61,.7,1);
|
||||
}
|
||||
}
|
||||
74
src/assets/sass/black-dashboard/cards/_card-chart.scss
Normal file
74
src/assets/sass/black-dashboard/cards/_card-chart.scss
Normal file
@ -0,0 +1,74 @@
|
||||
.card-chart {
|
||||
overflow: hidden;
|
||||
.card-header{
|
||||
.card-title{
|
||||
color: $white-color;
|
||||
i{
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
.card-category{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
.tab-space{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.table{
|
||||
margin-bottom: 0;
|
||||
|
||||
td{
|
||||
border-top: none;
|
||||
border-bottom: 1px solid rgba($white-color,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-progress {
|
||||
margin-top: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
}
|
||||
.card-footer {
|
||||
margin-top: 15px;
|
||||
|
||||
.stats{
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
|
||||
.btn{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-chart-pie{
|
||||
.chart-area{
|
||||
padding: 10px 0 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
margin-bottom: 10px;
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
3
src/assets/sass/black-dashboard/cards/_card-map.scss
Normal file
3
src/assets/sass/black-dashboard/cards/_card-map.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.map{
|
||||
height: 500px;
|
||||
}
|
||||
17
src/assets/sass/black-dashboard/cards/_card-plain.scss
Normal file
17
src/assets/sass/black-dashboard/cards/_card-plain.scss
Normal file
@ -0,0 +1,17 @@
|
||||
|
||||
.card-plain{
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.card-header,
|
||||
.card-footer{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(.card-subcategories).card-body{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
33
src/assets/sass/black-dashboard/cards/_card-task.scss
Normal file
33
src/assets/sass/black-dashboard/cards/_card-task.scss
Normal file
@ -0,0 +1,33 @@
|
||||
.card-tasks{
|
||||
height: 473px;
|
||||
|
||||
.table-full-width {
|
||||
max-height: 410px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header{
|
||||
.title{
|
||||
margin-right: 20px;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
float: right;
|
||||
color: darken($white-color, 20%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-body{
|
||||
i{
|
||||
color: $dark-gray;
|
||||
font-size: 1.4em;
|
||||
&:hover{
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
77
src/assets/sass/black-dashboard/cards/_card-user.scss
Normal file
77
src/assets/sass/black-dashboard/cards/_card-user.scss
Normal file
@ -0,0 +1,77 @@
|
||||
.card-user{
|
||||
overflow: hidden;
|
||||
.image{
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.author{
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
margin-top: 25px;
|
||||
|
||||
a + p.description{
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.block{
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
width: 250px;
|
||||
&.block-one{
|
||||
@include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0));
|
||||
@include nc-rotate(150deg,10);
|
||||
margin-top: -90px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
&.block-two{
|
||||
@include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0));
|
||||
@include nc-rotate(30deg,10);
|
||||
margin-top: -40px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
&.block-three{
|
||||
@include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0));
|
||||
@include nc-rotate(170deg,10);
|
||||
margin-top: -70px;
|
||||
right: -45px;
|
||||
|
||||
}
|
||||
|
||||
&.block-four{
|
||||
@include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0));
|
||||
@include nc-rotate(150deg,10);
|
||||
margin-top: -25px;
|
||||
right: -45px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar{
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
border: 5px solid lighten($black-color,5%);
|
||||
border-bottom-color: $transparent-bg;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.card-body{
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
hr{
|
||||
margin: 5px 15px;
|
||||
}
|
||||
|
||||
.button-container{
|
||||
margin-bottom: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
203
src/assets/sass/black-dashboard/mixins/_buttons.scss
Normal file
203
src/assets/sass/black-dashboard/mixins/_buttons.scss
Normal file
@ -0,0 +1,203 @@
|
||||
// Mixin for generating new styles
|
||||
@mixin btn-styles($btn-color, $btn-states-color) {
|
||||
@include diagonal-gradient($btn-color, $btn-states-color);
|
||||
background-color: $btn-color;
|
||||
transition:all 0.15s ease;
|
||||
|
||||
&.animation-on-hover:hover{
|
||||
background-position: bottom left;
|
||||
transition:0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover
|
||||
{
|
||||
background-color: $btn-states-color !important;
|
||||
background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
color: $white-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active{
|
||||
box-shadow: none !important;
|
||||
transform: translateY(1px) !important;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
|
||||
&:not([data-action]):hover{
|
||||
|
||||
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
|
||||
transform: translateY(-1px);
|
||||
-webkit-transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
// btn-neutral style
|
||||
@if $btn-color == $white-color{
|
||||
color: $primary-color;
|
||||
|
||||
&.btn-danger{
|
||||
color: $danger-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $danger-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-info{
|
||||
color: $info-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $info-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-warning{
|
||||
color: $warning-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $warning-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success{
|
||||
color: $success-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $success-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-default{
|
||||
color: $default-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $default-states-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover,
|
||||
.show > &.dropdown-toggle,
|
||||
.show > &.dropdown-toggle:focus,
|
||||
.show > &.dropdown-toggle:hover {
|
||||
background-color: $white-color;
|
||||
color: $primary-states-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: $primary-states-color;
|
||||
|
||||
&:not(.nav-link){
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} @else {
|
||||
color: $white-color;
|
||||
}
|
||||
|
||||
&.btn-simple{
|
||||
color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
background: $transparent-bg;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:not(:disabled):not(.disabled):active{
|
||||
color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
background-color: $transparent-bg !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
border-color: $btn-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:not(:disabled):not(.disabled):active{
|
||||
color: $white-color;
|
||||
border-color: $btn-color;
|
||||
background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-color: $btn-states-color !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link{
|
||||
color: $btn-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
background-color: $transparent-bg !important;
|
||||
background-image: none !important;
|
||||
color: $white-color !important;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
|
||||
font-size: $font-size;
|
||||
border-radius: $border;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
&.btn-simple{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
}
|
||||
|
||||
}
|
||||
4
src/assets/sass/black-dashboard/mixins/_cards.scss
Normal file
4
src/assets/sass/black-dashboard/mixins/_cards.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@mixin icon-color($color) {
|
||||
box-shadow: 0px 9px 30px -6px $color;
|
||||
color: $color;
|
||||
}
|
||||
26
src/assets/sass/black-dashboard/mixins/_dropdown.scss
Normal file
26
src/assets/sass/black-dashboard/mixins/_dropdown.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
|
||||
background-color: $brand-color;
|
||||
|
||||
&:before{
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.dropdown-header:not([href]):not([tabindex]){
|
||||
color: $dropdown-header-color;
|
||||
}
|
||||
|
||||
.dropdown-item{
|
||||
color: $dropdown-color;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider{
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
229
src/assets/sass/black-dashboard/mixins/_inputs.scss
Normal file
229
src/assets/sass/black-dashboard/mixins/_inputs.scss
Normal file
@ -0,0 +1,229 @@
|
||||
@mixin input-size($padding-vertical, $padding-horizontal){
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
@mixin form-control-placeholder($color, $opacity){
|
||||
.form-control::-moz-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-moz-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control::-webkit-input-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-ms-input-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder() {
|
||||
&::-moz-placeholder {@content; } // Firefox
|
||||
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
||||
}
|
||||
|
||||
@mixin light-form(){
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.no-border.form-control-lg,
|
||||
.input-group.no-border.form-control-lg{
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.form-control-lg,
|
||||
.input-group.form-control-lg{
|
||||
.form-control{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
|
||||
|
||||
& + .form-control{
|
||||
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control{
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group,
|
||||
.input-group{
|
||||
.form-control{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .form-control,
|
||||
& ~ .form-control{
|
||||
padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//color1 = $opacity-5
|
||||
//color2 = $opacity-8
|
||||
//color3 = $white-color
|
||||
//color4 = $transparent-bg
|
||||
//color5 = $opacity-1
|
||||
//color6 = $opacity-2
|
||||
|
||||
|
||||
@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
|
||||
@include form-control-placeholder(rgba($white-color,0.4), 1);
|
||||
|
||||
.form-control{
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
|
||||
&:focus{
|
||||
border-color: $color3;
|
||||
background-color: $color4;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger{
|
||||
&:after{
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger{
|
||||
.form-control{
|
||||
background-color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.2);
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.3);
|
||||
border-color: $color3;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control{
|
||||
background-color: rgba($background-black,0.2);
|
||||
color: $color2;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
background-color: rgba($background-black,0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control + .input-group-prepend .input-group-text,
|
||||
.form-control + .input-group-append .input-group-text{
|
||||
background-color: rgba($background-black,0.2);;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
background-color: rgba($background-black,0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.2);
|
||||
border: none;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
&.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
7
src/assets/sass/black-dashboard/mixins/_page-header.scss
Normal file
7
src/assets/sass/black-dashboard/mixins/_page-header.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@mixin linear-gradient($color1, $color2){
|
||||
background: $color1; /* For browsers that do not support gradients */
|
||||
background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
|
||||
background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
|
||||
background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
|
||||
background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
// Opacity
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: #{alpha(opacity=$opacity-ie)};
|
||||
}
|
||||
208
src/assets/sass/black-dashboard/mixins/_vendor-prefixes.scss
Normal file
208
src/assets/sass/black-dashboard/mixins/_vendor-prefixes.scss
Normal file
@ -0,0 +1,208 @@
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@mixin transition-input-focus-color() {
|
||||
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
@mixin transition($time, $type){
|
||||
-webkit-transition: all $time $type;
|
||||
-moz-transition: all $time $type;
|
||||
-o-transition: all $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin rotate-180(){
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
@mixin transform-translate-x($value){
|
||||
-webkit-transform: translate3d($value, 0, 0);
|
||||
-moz-transform: translate3d($value, 0, 0);
|
||||
-o-transform: translate3d($value, 0, 0);
|
||||
-ms-transform: translate3d($value, 0, 0);
|
||||
transform: translate3d($value, 0, 0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value){
|
||||
-webkit-transform: translate3d(0,$value,0);
|
||||
-moz-transform: translate3d(0,$value,0);
|
||||
-o-transform: translate3d(0,$value,0);
|
||||
-ms-transform: translate3d(0,$value,0);
|
||||
transform: translate3d(0,$value,0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y-dropdown($value) {
|
||||
-webkit-transform: translate3d(0,$value,0) !important;
|
||||
-moz-transform: translate3d(0,$value,0) !important;
|
||||
-o-transform: translate3d(0,$value,0) !important;
|
||||
-ms-transform: translate3d(0,$value,0) !important;
|
||||
transform: translate3d(0,$value,0) !important;
|
||||
}
|
||||
|
||||
@mixin linear-gradient($color, $states-color){
|
||||
background: $color;
|
||||
background: -webkit-linear-gradient(to bottom, $color 0%, $states-color 100%);
|
||||
background: -o-linear-gradient(to bottom, $color 0%, $states-color 100%);
|
||||
background: -moz-linear-gradient(to bottom, $color 0%, $states-color 100%);
|
||||
background: linear-gradient(to bottom, $color 0%, $states-color 100%);
|
||||
}
|
||||
|
||||
@mixin linear-gradient-right($color, $states-color){
|
||||
background: $color;
|
||||
background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
background: -o-linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
background: -moz-linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
background: linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
}
|
||||
|
||||
@mixin sidebar-color($color){
|
||||
&:after{
|
||||
background: $color;
|
||||
}
|
||||
|
||||
.nav li.active > a{
|
||||
color: $color;
|
||||
|
||||
i{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bar-animation($type){
|
||||
-webkit-animation: $type 500ms linear 0s;
|
||||
-moz-animation: $type 500ms linear 0s;
|
||||
animation: $type 500ms 0s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@mixin topbar-x-rotation(){
|
||||
@keyframes topbar-x {
|
||||
0% {top: 0px; transform: rotate(0deg); }
|
||||
45% {top: 6px; transform: rotate(145deg); }
|
||||
75% {transform: rotate(130deg); }
|
||||
100% {transform: rotate(135deg); }
|
||||
}
|
||||
@-webkit-keyframes topbar-x {
|
||||
0% {top: 0px; -webkit-transform: rotate(0deg); }
|
||||
45% {top: 6px; -webkit-transform: rotate(145deg); }
|
||||
75% {-webkit-transform: rotate(130deg); }
|
||||
100% { -webkit-transform: rotate(135deg); }
|
||||
}
|
||||
@-moz-keyframes topbar-x {
|
||||
0% {top: 0px; -moz-transform: rotate(0deg); }
|
||||
45% {top: 6px; -moz-transform: rotate(145deg); }
|
||||
75% {-moz-transform: rotate(130deg); }
|
||||
100% { -moz-transform: rotate(135deg); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin topbar-back-rotation(){
|
||||
@keyframes topbar-back {
|
||||
0% { top: 6px; transform: rotate(135deg); }
|
||||
45% { transform: rotate(-10deg); }
|
||||
75% { transform: rotate(5deg); }
|
||||
100% { top: 0px; transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes topbar-back {
|
||||
0% { top: 6px; -webkit-transform: rotate(135deg); }
|
||||
45% { -webkit-transform: rotate(-10deg); }
|
||||
75% { -webkit-transform: rotate(5deg); }
|
||||
100% { top: 0px; -webkit-transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-moz-keyframes topbar-back {
|
||||
0% { top: 6px; -moz-transform: rotate(135deg); }
|
||||
45% { -moz-transform: rotate(-10deg); }
|
||||
75% { -moz-transform: rotate(5deg); }
|
||||
100% { top: 0px; -moz-transform: rotate(0); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-x-rotation(){
|
||||
@keyframes bottombar-x {
|
||||
0% {bottom: 0px; transform: rotate(0deg);}
|
||||
45% {bottom: 6px; transform: rotate(-145deg);}
|
||||
75% {transform: rotate(-130deg);}
|
||||
100% {transform: rotate(-135deg);}
|
||||
}
|
||||
@-webkit-keyframes bottombar-x {
|
||||
0% {bottom: 0px; -webkit-transform: rotate(0deg);}
|
||||
45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
|
||||
75% {-webkit-transform: rotate(-130deg);}
|
||||
100% {-webkit-transform: rotate(-135deg);}
|
||||
}
|
||||
@-moz-keyframes bottombar-x {
|
||||
0% {bottom: 0px; -moz-transform: rotate(0deg);}
|
||||
45% {bottom: 6px; -moz-transform: rotate(-145deg);}
|
||||
75% {-moz-transform: rotate(-130deg);}
|
||||
100% {-moz-transform: rotate(-135deg);}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-back-rotation{
|
||||
@keyframes bottombar-back {
|
||||
0% { bottom: 6px;transform: rotate(-135deg);}
|
||||
45% { transform: rotate(10deg);}
|
||||
75% { transform: rotate(-5deg);}
|
||||
100% { bottom: 0px;transform: rotate(0);}
|
||||
}
|
||||
@-webkit-keyframes bottombar-back {
|
||||
0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
|
||||
45% {-webkit-transform: rotate(10deg);}
|
||||
75% {-webkit-transform: rotate(-5deg);}
|
||||
100% {bottom: 0px;-webkit-transform: rotate(0);}
|
||||
}
|
||||
@-moz-keyframes bottombar-back {
|
||||
0% {bottom: 6px;-moz-transform: rotate(-135deg);}
|
||||
45% {-moz-transform: rotate(10deg);}
|
||||
75% {-moz-transform: rotate(-5deg);}
|
||||
100% {bottom: 0px;-moz-transform: rotate(0);}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin nc-rotate($degrees, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: rotate($degrees);
|
||||
-moz-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees);
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
|
||||
@mixin nc-flip($horiz, $vert, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: scale($horiz, $vert);
|
||||
-moz-transform: scale($horiz, $vert);
|
||||
-ms-transform: scale($horiz, $vert);
|
||||
-o-transform: scale($horiz, $vert);
|
||||
transform: scale($horiz, $vert);
|
||||
}
|
||||
|
||||
@mixin diagonal-gradient($start-color, $end-color){
|
||||
background: $start-color;
|
||||
background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-size: 200% 200%;
|
||||
background-position: top right;
|
||||
}
|
||||
@ -0,0 +1,227 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
/*!
|
||||
Animate.css - http://daneden.me/animate
|
||||
Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
|
||||
Copyright (c) 2015 Daniel Eden
|
||||
*/
|
||||
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
-webkit-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
.animated.bounceIn,
|
||||
.animated.bounceOut {
|
||||
-webkit-animation-duration: .75s;
|
||||
animation-duration: .75s;
|
||||
}
|
||||
|
||||
.animated.flipOutX,
|
||||
.animated.flipOutY {
|
||||
-webkit-animation-duration: .75s;
|
||||
animation-duration: .75s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes shake {
|
||||
from, to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 40%, 60%, 80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
from, to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 40%, 60%, 80% {
|
||||
-webkit-transform: translate3d(10px, 0, 0);
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.shake {
|
||||
-webkit-animation-name: shake;
|
||||
animation-name: shake;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDown {
|
||||
-webkit-animation-name: fadeOutDown;
|
||||
animation-name: fadeOutDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutUp {
|
||||
-webkit-animation-name: fadeOutUp;
|
||||
animation-name: fadeOutUp;
|
||||
}
|
||||
@ -0,0 +1,116 @@
|
||||
/*
|
||||
* Container style
|
||||
*/
|
||||
.ps {
|
||||
overflow: hidden !important;
|
||||
overflow-anchor: none;
|
||||
-ms-overflow-style: none;
|
||||
touch-action: auto;
|
||||
-ms-touch-action: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar rail styles
|
||||
*/
|
||||
.ps__rail-x {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
height: 15px;
|
||||
/* there must be 'bottom' or 'top' for ps__rail-x */
|
||||
bottom: 0px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
width: 15px;
|
||||
/* there must be 'right' or 'left' for ps__rail-y */
|
||||
right: 0;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps--active-x > .ps__rail-x,
|
||||
.ps--active-y > .ps__rail-y {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ps:hover > .ps__rail-x,
|
||||
.ps:hover > .ps__rail-y,
|
||||
.ps--focus > .ps__rail-x,
|
||||
.ps--focus > .ps__rail-y,
|
||||
.ps--scrolling-x > .ps__rail-x,
|
||||
.ps--scrolling-y > .ps__rail-y {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y:hover,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-y.ps--clicking {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar thumb styles
|
||||
*/
|
||||
.ps__thumb-x {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, height .2s ease-in-out;
|
||||
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
|
||||
height: 6px;
|
||||
/* there must be 'bottom' for ps__thumb-x */
|
||||
bottom: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, width .2s ease-in-out;
|
||||
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
|
||||
width: 6px;
|
||||
/* there must be 'right' for ps__thumb-y */
|
||||
right: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-x:focus > .ps__thumb-x,
|
||||
.ps__rail-x.ps--clicking .ps__thumb-x {
|
||||
background-color: #999;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
background-color: #999;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
/* MS supports */
|
||||
@supports (-ms-overflow-style: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Paper Dashboard - v1.1.2
|
||||
=========================================================
|
||||
|
||||
* Product Page: http://www.creative-tim.com/product/paper-dashboard
|
||||
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
@import "paper/variables";
|
||||
@import "paper/mixins";
|
||||
@import "paper/typography";
|
||||
// Core CSS
|
||||
@import "paper/misc";
|
||||
@import "paper/sidebar-and-main-panel";
|
||||
@import "paper/buttons";
|
||||
@import "paper/inputs";
|
||||
@import "paper/alerts";
|
||||
@import "paper/tables";
|
||||
@import "paper/checkbox-radio";
|
||||
@import "paper/navbars";
|
||||
@import "paper/footers";
|
||||
// Fancy Stuff
|
||||
@import "paper/dropdown";
|
||||
@import "paper/cards";
|
||||
@import "paper/chartist";
|
||||
@import "paper/responsive";
|
||||
|
||||
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ $ct-series-colors: (
|
||||
rgba($primary-color, .6)
|
||||
) !default;
|
||||
|
||||
// Paper Kit Colors
|
||||
// Black Kit Colors
|
||||
|
||||
.ct-blue {
|
||||
stroke: $primary-color !important;
|
||||
|
||||
@ -43,7 +43,7 @@ export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "Paper Dashboard"
|
||||
default: "Black Dashboard"
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
|
||||
@ -2,10 +2,10 @@ import Vue from "vue";
|
||||
import App from "./App";
|
||||
import router from "./router/index";
|
||||
|
||||
import PaperDashboard from "./plugins/paperDashboard";
|
||||
import BlackDashboard from "./plugins/blackDashboard";
|
||||
import "vue-notifyjs/themes/default.css";
|
||||
|
||||
Vue.use(PaperDashboard);
|
||||
Vue.use(BlackDashboard);
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
|
||||
@ -50,8 +50,8 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="copyright pull-right">
|
||||
© 2017, made with
|
||||
<i class="fa fa-heart heart"></i> by Paper admin
|
||||
© 2018, made with
|
||||
<i class="fa fa-heart heart"></i> by Black admin
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span>Welcome to <b>Paper Dashboard</b> - a beautiful freebie for every web developer.</span>
|
||||
<span>Welcome to <b>Black Dashboard</b> - a beautiful freebie for every web developer.</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -3,34 +3,34 @@
|
||||
<div class="col-md-12">
|
||||
<card>
|
||||
<template slot="header">
|
||||
<h4 class="card-title">Paper Dashboard Headings</h4>
|
||||
<h4 class="card-title">Black Dashboard Headings</h4>
|
||||
<p class="card-category">Created using
|
||||
<a href="https://www.google.com/fonts/specimen/Muli">Muli</a> Font Family</p>
|
||||
</template>
|
||||
<div class="content">
|
||||
<div class="typo-line">
|
||||
<h1>
|
||||
<p class="category">Header 1</p>Paper Dashboard Heading </h1>
|
||||
<p class="category">Header 1</p>Black Dashboard Heading </h1>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h2>
|
||||
<p class="category">Header 2</p>Paper Dashboard Heading </h2>
|
||||
<p class="category">Header 2</p>Black Dashboard Heading </h2>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h3>
|
||||
<p class="category">Header 3</p>Paper Dashboard Heading </h3>
|
||||
<p class="category">Header 3</p>Black Dashboard Heading </h3>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h4>
|
||||
<p class="category">Header 4</p>Paper Dashboard Heading </h4>
|
||||
<p class="category">Header 4</p>Black Dashboard Heading </h4>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h5>
|
||||
<p class="category">Header 5</p>Paper Dashboard Heading </h5>
|
||||
<p class="category">Header 5</p>Black Dashboard Heading </h5>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<h6>
|
||||
<p class="category">Header 6</p>Paper Dashboard Heading </h6>
|
||||
<p class="category">Header 6</p>Black Dashboard Heading </h6>
|
||||
</div>
|
||||
<div class="typo-line">
|
||||
<p>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<fg-input type="text"
|
||||
label="Company"
|
||||
:disabled="true"
|
||||
placeholder="Paper dashboard"
|
||||
placeholder="Black dashboard"
|
||||
v-model="user.company">
|
||||
</fg-input>
|
||||
</div>
|
||||
@ -108,7 +108,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
company: "Paper Dashboard",
|
||||
company: "Black Dashboard",
|
||||
username: "michael23",
|
||||
email: "",
|
||||
lastName: "Faker",
|
||||
|
||||
@ -6,7 +6,7 @@ import "es6-promise/auto";
|
||||
|
||||
//css assets
|
||||
import "bootstrap/dist/css/bootstrap.css";
|
||||
import "@/assets/sass/paper-dashboard.scss";
|
||||
import "@/assets/sass/black-dashboard.scss";
|
||||
import "@/assets/css/themify-icons.css";
|
||||
|
||||
export default {
|
||||
Loading…
x
Reference in New Issue
Block a user