kicap/barcode_barang_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project done before

Browse Source
This commit is contained in:
kicap1992
2021-06-23 17:54:22 +08:00
commit ad3474d27d
509 changed files with 252588 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
assets/scss/paper-dashboard.scss Normal file
View File

@ -0,0 +1,53 @@
/*!
=========================================================
* Paper Dashboard 2 - v2.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/paper-dashboard-2
* 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 'paper-dashboard/variables';
@import 'paper-dashboard/mixins';
// Plugins CSS
@import "paper-dashboard/plugins/plugin-animate-bootstrap-notify";
@import "paper-dashboard/plugins/plugin-perfect-scrollbar";
// Core CSS
@import "paper-dashboard/buttons";
@import "paper-dashboard/inputs";
@import "paper-dashboard/typography";
@import "paper-dashboard/misc";
@import "paper-dashboard/checkboxes-radio";
// components
@import "paper-dashboard/navbar";
@import "paper-dashboard/page-header";
@import "paper-dashboard/dropdown";
@import "paper-dashboard/alerts";
@import "paper-dashboard/images";
@import "paper-dashboard/nucleo-outline";
@import "paper-dashboard/tables";
@import "paper-dashboard/sidebar-and-main-panel";
@import "paper-dashboard/footers";
@import "paper-dashboard/fixed-plugin";
// cards
@import "paper-dashboard/cards";
@import "paper-dashboard/cards/card-plain";
@import "paper-dashboard/cards/card-chart";
@import "paper-dashboard/cards/card-user";
@import "paper-dashboard/cards/card-map";
@import "paper-dashboard/cards/card-stats";
@import "paper-dashboard/responsive";

74
assets/scss/paper-dashboard/_alerts.scss Normal file
View 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-success{
background-color: lighten($success-color, 5%);
}
&.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%);
}
.close{
color: $white-color;
opacity: .9;
text-shadow: none;
line-height: 0;
outline: 0;
i.fa,
i.nc-icon{
font-size: 14px !important;
}
&:hover,
&:focus {
opacity: 1;
}
}
span[data-notify="icon"]{
font-size: 27px;
display: block;
left: 19px;
position: absolute;
top: 50%;
margin-top: -11px;
}
button.close{
position: absolute;
right: 10px;
top: 50%;
margin-top: -13px;
width: 25px;
height: 25px;
padding: 3px;
}
.close ~ span{
display: block;
max-width: 89%;
}
&.alert-with-icon{
padding-left: 65px;
}
}

71
assets/scss/paper-dashboard/_animated-buttons.scss Normal file
View File

@ -0,0 +1,71 @@
//animations
.icon-property{
@include transition($slow-transition-time, $transition-bezier);
position: relative;
display: inline-block;
}
#animated-buttons{
.btn{
i{
position: relative;
top: 3px;
margin-top: -3px;
}
}
}
.btn-rotate{
i{
@extend .icon-property;
}
&:hover,
&:focus{
i{
@include rotate-53();
}
}
}
.btn-magnify{
i{
@extend .icon-property;
}
&:hover,
&:focus{
i{
@include transform-scale(1.22);
}
}
}
.btn-move-left{
i{
@extend .icon-property;
margin-right: 0;
}
&:hover,
&:focus{
i{
@include transform-translate-x(-5px);
}
}
}
.btn-move-right{
i{
@extend .icon-property;
margin-right: 0;
}
&:hover,
&:focus{
i{
@include transform-translate-x(5px);
}
}
}

234
assets/scss/paper-dashboard/_buttons.scss Normal file
View File

@ -0,0 +1,234 @@
.btn,
.navbar .navbar-nav > a.btn{
border-width: $border-thick;
font-weight: $font-weight-semi;
font-size: $font-size-small;
line-height: $line-height;
text-transform: uppercase;
border: none;
margin: 10px 1px;
border-radius: $border-radius-small;
padding: $padding-btn-vertical $padding-btn-horizontal;
cursor: pointer;
@include btn-styles($default-color, $default-states-color);
@include transition($fast-transition-time, linear);
&: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,
.nc-icon{
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,
.nc-icon{
font-size: $btn-icon-font-size-lg;
}
}
&:not(.btn-footer) .nc-icon,
&:not(.btn-footer) .fa,
&:not(.btn-footer) .far,
&:not(.btn-footer) .fas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-12px, -12px);
line-height: 1.5626rem;
width: 24px;
}
&.btn-neutral {
font-size: 20px;
}
}
&:not(.btn-icon) .nc-icon{
position: relative;
top: 1px;
}
}
// 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); }
.btn-danger { @include btn-styles($danger-color, $danger-states-color); }
// .btn-neutral { @include btn-styles($white-color, $white-color); }
.btn-outline-default { @include btn-outline-styles($default-color, $default-states-color); }
.btn-outline-primary { @include btn-outline-styles($primary-color, $primary-states-color); }
.btn-outline-success { @include btn-outline-styles($success-color, $success-states-color); }
.btn-outline-info { @include btn-outline-styles($info-color, $info-states-color); }
.btn-outline-warning { @include btn-outline-styles($warning-color, $warning-states-color); }
.btn-outline-danger { @include btn-outline-styles($danger-color, $danger-states-color); }
.btn-outline-neutral { @include btn-outline-styles($white-color, $default-states-color);
&:hover,
&:focus{
color: $default-states-color;
background-color: $white-color;
}
}
.btn-neutral {
@include btn-styles($white-color, $white-color);
color: $default-color;
&:hover,
&:focus{
color: $default-states-color;
}
&.btn-border{
&:hover,
&:focus{
color: $default-color;
}
&:active,
&.active,
.open > &.dropdown-toggle{
background-color: $white-color;
color: $default-color;
}
}
&.btn-link:active,
&.btn-link.active{
background-color: transparent;
}
}
.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-color: $transparent-bg;
}
}
}
.btn-link{
border: $none;
padding: $padding-base-vertical $padding-base-horizontal;
background-color: $transparent-bg;
}
.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-small, $border-radius-small);
}
.btn-wd {
min-width: 140px;
}
.btn-group.select{
width: 100%;
}
.btn-group.select .btn{
text-align: left;
}
.btn-group.select .caret{
position: absolute;
top: 50%;
margin-top: -1px;
right: 8px;
}
.btn-group {
.btn + .btn {
margin-left: -3px;
}
.btn {
&:focus {
background-color: $info-color !important;
}
}
}
.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;
}
}

140
assets/scss/paper-dashboard/_cards.scss Normal file
View File

@ -0,0 +1,140 @@
.card{
border-radius: $border-radius-extreme;
box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
background-color: #FFFFFF;
color: $card-black-color;
margin-bottom: 20px;
position: relative;
border: 0 none;
-webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
-moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
-o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
-ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
.card-body{
padding: 15px 15px 10px 15px;
&.table-full-width{
padding-left: 0;
padding-right: 0;
}
}
.card-header{
&:not([data-background-color]){
background-color: transparent;
}
padding: 15px 15px 0;
border: 0;
.card-title{
margin-top: 10px;
}
}
.map{
border-radius: $border-radius-small;
&.map-big{
height: 400px;
}
}
&[data-background-color="orange"]{
background-color: $primary-color;
.card-header{
background-color: $primary-color;
}
.card-footer{
.stats{
color: $white-color;
}
}
}
&[data-background-color="red"]{
background-color: $danger-color;
}
&[data-background-color="yellow"]{
background-color: $warning-color;
}
&[data-background-color="blue"]{
background-color: $info-color;
}
&[data-background-color="green"]{
background-color: $success-color;
}
.image{
overflow: hidden;
height: 200px;
position: relative;
}
.avatar{
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-bottom: 15px;
}
.numbers {
font-size: 2em;
}
.big-title {
font-size: 12px;
text-align: center;
font-weight: 500;
padding-bottom: 15px;
}
label{
font-size: $font-size-small;
margin-bottom: 5px;
color: $dark-gray;
}
.card-footer{
background-color: transparent;
border: 0;
.stats{
i{
margin-right: 5px;
position: relative;
top: 0px;
color: $default-color;
}
}
.btn{
margin: 0;
}
}
&.card-plain{
background-color: transparent;
box-shadow: none;
border-radius: 0;
.card-body{
padding-left: 5px;
padding-right: 5px;
}
img{
border-radius: $border-radius-extreme;
}
}
}

142
assets/scss/paper-dashboard/_checkboxes-radio.scss Normal file
View File

@ -0,0 +1,142 @@
.from-check,
.form-check-radio {
margin-bottom: 12px;
position: relative;
}
.form-check {
padding-left: 0;
margin-bottom: .5rem;
.form-check-label{
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 35px;
line-height: 26px;
margin-bottom: 0;
}
.form-check-sign::before,
.form-check-sign::after {
content: " ";
display: inline-block;
position: absolute;
width: 24px;
height: 24px;
left: 0;
cursor: pointer;
border-radius: 6px;
top: 0;
background-color: #AAA7A4;
-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-sign::after {
font-family: 'FontAwesome';
content: "\f00c";
top: -1px;
text-align: center;
font-size: 15px;
opacity: 0;
color: #FFF;
border: 0;
background-color: inherit;
}
&.disabled{
.form-check-label{
color: $dark-gray;
opacity: .5;
cursor: not-allowed;
}
}
}
.form-check.disabled .form-check-label,
.form-check.disabled .form-check-label {
}
.form-check input[type="checkbox"],
.form-check-radio input[type="radio"]{
opacity: 0;
position: absolute;
visibility: hidden;
}
.form-check input[type="checkbox"]:checked + .form-check-sign::after{
opacity: 1;
}
.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
cursor: not-allowed;
}
.form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign,
.form-check-radio input[type="radio"]:disabled + .form-check-sign{
pointer-events: none !important;
}
.form-check-radio{
margin-left: -3px;
.form-check-label{
padding-left: 2rem;
}
&.disabled{
.form-check-label{
color: $dark-gray;
opacity: .5;
cursor: not-allowed;
}
}
}
.form-check-radio .form-check-sign::before{
font-family: 'FontAwesome';
content: "\f10c";
font-size: 22px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
position: absolute;
opacity: .50;
left: 5px;
top: -5px;
}
.form-check-label input[type="checkbox"]:checked + .form-check-sign:before{
background-color: #66615B;
}
.form-check-radio input[type="radio"] + .form-check-sign:after,
.form-check-radio input[type="radio"] {
opacity: 0;
@include transition-opacity(0.3s, linear);
content:" ";
display: block;
}
.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
font-family: 'FontAwesome';
content: "\f192";
top: -5px;
position: absolute;
left: 5px;
opacity: 1;
font-size: 22px;
}
.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
opacity: 1;
}
.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;
}

480
assets/scss/paper-dashboard/_dropdown.scss Normal file
View File

@ -0,0 +1,480 @@
.dropdown,
.dropup,
.bootstrap-select{
.dropdown-menu{
display: block;
@include opacity(0);
@include box-shadow($dropdown-shadow);
visibility: hidden;
position: absolute;
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
&[x-placement="top-start"]{
@include transform-translate-y-dropdown(0px);
}
&[x-placement="bottom-start"]{
@include transform-translate-y-dropdown(0px);
}
}
&.show .dropdown-menu{
@include opacity(1);
visibility: visible;
&[x-placement="top-start"]{
@include transform-translate-y-dropdown(-50px);
top: auto !important;
bottom: 0 !important;
}
&[x-placement="bottom-start"]{
@include transform-translate-y-dropdown(50px);
bottom: auto !important;
top: 0 !important;
}
}
}
.dropup .dropdown-menu,
.dropdown-btn .dropdown-menu{
@include transform-translate-y-dropdown(0px);
top: auto !important;
bottom: 0 !important;
}
.dropup.show .dropdown-menu,
.dropdown-btn.show .dropdown-menu{
opacity: 1;
visibility: visible;
.dropdown-menu.inner{
@include transform-translate-y(0px);
}
}
.bootstrap-select.show{
.dropdown-menu.show{
&[x-placement="top-start"]{
@include transform-translate-y-dropdown(-60px);
top: auto !important;
bottom: 0 !important;
}
li:last-child {
a:hover{
border-radius: 0 0 12px 12px;
}
}
}
}
.bootstrap-select.dropup.show{
&:before {
top: -1px !important;
}
&:after {
top: -2px !important;
}
}
.dropdown-menu{
background-color: $white-color;
border: 0 none;
border-radius: $border-radius-extreme;
margin-top: 10px;
padding: 0px;
.divider{
background-color: $medium-pale-bg;
margin: 0px;
}
.dropdown-header{
color: $dark-gray;
font-size: $font-size-small;
padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
}
.no-notification{
color: #9A9A9A;
font-size: 1.2em;
padding: 30px 30px;
text-align: center;
}
.dropdown-item{
color: $font-color;
font-size: $font-size-base;
padding: 10px 45px 10px 15px;
clear: both;
white-space: nowrap;
width: 100%;
display: block;
img{
margin-top: -3px;
}
}
.dropdown-item:focus{
outline: 0 !important;
}
.btn-group.select &{
min-width: 100%;
}
.dropdown-item:first-child{
border-top-left-radius: $border-radius-extreme;
border-top-right-radius: $border-radius-extreme;
}
.dropdown-item:last-child{
border-bottom-left-radius: $border-radius-extreme;
border-bottom-right-radius: $border-radius-extreme;
}
.select & .dropdown-item:first-child{
border-radius: 0;
border-bottom: 0 none;
}
.dropdown-item:hover,
.dropdown-item:focus{
color: $white-color !important;
opacity: 1;
text-decoration: none;
}
.dropdown-item:hover,
.dropdown-item:focus{
background-color: $default-color;
}
&.dropdown-primary .dropdown-item:hover,
&.dropdown-primary .dropdown-item:focus{
background-color: $bg-primary;
}
&.dropdown-info .dropdown-item:hover,
&.dropdown-info .dropdown-item:focus{
background-color: $bg-info;
}
&.dropdown-success .dropdown-item:hover,
&.dropdown-success .dropdown-item:focus{
background-color: $bg-success;
}
&.dropdown-warning .dropdown-item:hover,
&.dropdown-warning .dropdown-item:focus{
background-color: $bg-warning;
}
&.dropdown-danger .dropdown-item:hover,
&.dropdown-danger .dropdown-item:focus{
background-color: $bg-danger;
}
}
.dropdown-divider{
margin: 0 !important;
}
//fix bug for the select items in btn-group
.btn-group.select{
// overflow: hidden;
}
.btn-group.select.open{
overflow: visible;
}
.dropdown-menu-right{
right: -2px;
left: auto;
}
.navbar-nav .dropdown-menu:before,
.dropdown .dropdown-menu[x-placement="bottom-start"]:before,
.dropdown .dropdown-menu[x-placement="bottom-end"]:before,
.card.card-just-text .dropdown .dropdown-menu:before,
.card-just-text .dropdown .dropdown-menu:before,
.dropdown-btn .dropdown-menu:before{
border-bottom: 11px solid $medium-pale-bg;
border-left: 11px solid rgba(0, 0, 0, 0);
border-right: 11px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
position: absolute;
right: 12px;
top: -12px;
}
.navbar-nav .dropdown-menu:after,
.dropdown .dropdown-menu[x-placement="bottom-start"]:after,
.dropdown .dropdown-menu[x-placement="bottom-end"]:after,
.card.card-just-text .dropdown .dropdown-menu:after,
.card-just-text .dropdown .dropdown-menu:after,
.dropdown-btn .dropdown-menu:after{
border-bottom: 11px solid $white-color;
border-left: 11px solid rgba(0, 0, 0, 0);
border-right: 11px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
position: absolute;
right: 12px;
top: -11px;
}
.dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:before,
.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:before{
left: 30px !important;
right: auto;
}
.dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:after,
.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:after{
left: 30px !important;
right: auto;
}
// the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file
// code from _responsive.scss
@media screen and (min-width: 768px){
.navbar-form {
margin-top: 21px;
margin-bottom: 21px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-search-form{
display: none;
}
.navbar-nav .dropdown-item .dropdown-menu,
.dropdown .dropdown-menu,
.dropdown-btn .dropdown-menu{
transform: translate3d(0px, -40px, 0px);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
}
.navbar-nav .dropdown-item.show .dropdown-menu,
.dropdown.show .dropdown-menu,
.dropdown-btn.show .dropdown-menu{
transform: translate3d(0px, 0px, 0px);
visibility: visible !important;
}
.bootstrap-select .dropdown-menu{
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-o-transition: all 150ms linear;
-ms-transition: all 150ms linear;
transition: all 150ms linear;
}
.bootstrap-datetimepicker-widget{
visibility: visible !important;
}
.bootstrap-select .show .dropdown-menu{
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
transform: translate3d(0px, 0px, 0px);
}
.navbar-nav.navbar-right li .dropdown-menu:before,
.navbar-nav.navbar-right li .dropdown-menu:after{
left: auto;
right: 12px;
}
.footer:not(.footer-big){
nav ul{
li:first-child{
margin-left: 0;
}
}
}
// no dragging the others navs in page
body > .navbar-collapse.collapse{
display: none !important;
}
}
.dropdown-sharing{
.dropup-item{
color: $font-color;
font-size: $font-size-base;
.social-line{
line-height: 28px;
padding: 10px 20px 5px 20px !important;
[class*="icon-"]{
font-size: 20px;
}
}
&:last-child{
margin: 0 13px;
display: block;
}
.btn{
margin: 10px;
}
}
.dropup-item:hover,
.dropup-item:focus{
.social-line,
.action-line{
background-color: $white-color;
color: $font-color;
opacity: 1;
text-decoration: none;
}
}
}
.show .dropdown-sharing,
.show .dropdown-actions{
margin-bottom: 1px;
}
.dropdown-actions{
.dropdown-item{
margin: -15px 35px;
.action-line{
padding: 5px 10px;
line-height: 24px;
font-weight: bold;
[class*="icon-"]{
font-size: 24px;
}
.col-sm-9{
line-height: 34px;
}
}
.link-danger{
color: $danger-color;
&:hover, &:active, &:focus{
color: $danger-color;
}
}
}
li:hover,
li:focus{
a{
color: $font-color;
opacity: 1;
text-decoration: none;
}
}
.action-line{
.icon-simple{
margin-left: -15px;
}
}
}
.dropdown .dropdown-menu[x-placement="top-start"]:before,
.dropdown .dropdown-menu[x-placement="top-end"]:before,
.dropup .dropdown-menu:before{
border-top: 11px solid #DCD9D1;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: 12px;
bottom: -12px;
}
.dropdown .dropdown-menu[x-placement="top-start"]:after,
.dropdown .dropdown-menu[x-placement="top-end"]:after,
.dropup .dropdown-menu:after{
border-top: 11px solid #FFF;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: 12px;
bottom: -11px;
}
.dropup,
.dropdown{
.dropdown-toggle:after{
margin-left: 0;
}
}
.dropdown-notification{
.dropdown-notification-list{
.notification-item{
border-bottom: 1px solid #F1EAE0;
font-size: 16px;
color: #66615b;
.notification-text{
padding-left: 40px;
position: relative;
min-width: 330px;
min-height: 70px;
white-space: normal;
.label{
display: block;
position: absolute;
top: 50%;
margin-top: -12px;
left: 7px;
}
.message{
font-size: 0.9em;
line-height: 0.7;
margin-left: 10px;
}
.time{
color: #9A9A9A;
font-size: 0.7em;
margin-left: 10px;
}
}
.read-notification{
font-size: 12px;
opacity: 0;
position: absolute;
right: 5px;
top: 50%;
margin-top: -12px;
}
&:hover{
text-decoration: none;
.notification-text{
color: #66615b;
background-color: #F0EFEB !important;
}
.read-notification{
opacity: 1 !important;
}
}
}
}
.dropdown-footer{
background-color: #E8E7E3;
border-radius: 0 0 8px 8px;
.dropdown-footer-menu{
list-style: outside none none;
padding: 0px 5px;
li{
display: inline-block;
text-align: left;
padding: 0 10px;
a{
color: #9C9B99;
font-size: 0.9em;
line-height: 35px;
}
}
}
}
}

342
assets/scss/paper-dashboard/_fixed-plugin.scss Normal file
View File

@ -0,0 +1,342 @@
.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: 10px;
padding: 0 10px;
}
.dropdown .dropdown-menu .nc-icon{
top: 2px;
right: 10px;
font-size: 14px;
}
.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: 3px solid #FFFFFF;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 23px;
margin-right: 5px;
position: relative;
width: 23px;
&.badge-light {
border: 1px solid $light-gray;
&.active,
&:hover {
border: 3px solid #0bf;
}
}
}
.badge.active,
.badge:hover{
border-color: #00bbff;
}
.badge-blue{
background-color: $brand-info;
}
.badge-green{
background-color: $brand-success;
}
.badge-orange{
background-color: $brand-primary;
}
.badge-yellow{
background-color: $brand-warning;
}
.badge-red{
background-color: $brand-danger;
}
h5{
font-size: 14px;
margin: 10px;
}
.dropdown-menu li{
display: block;
padding: 15px 2px;
width: 25%;
float: left;
}
li.adjustments-line,
li.header-title,
li.button-container{
width: 100%;
height: 35px;
min-height: inherit;
}
li.button-container{
height: auto;
div{
margin-bottom: 5px;
}
}
#sharrreTitle{
text-align: center;
padding: 10px 0;
height: 50px;
}
li.header-title{
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: $default-color;
&.label-right{
left: 10px;
}
}
.toggle{
margin-right: 0;
}
}
.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{
transform-origin: 0 0;
&:before{
border-bottom: 16px solid rgba(0, 0, 0, 0);
border-left: 16px solid rgba(0,0,0,0.2);
border-top: 16px solid rgba(0,0,0,0);
right: -27px;
bottom: 425px;
}
&:after{
border-bottom: 16px solid rgba(0, 0, 0, 0);
border-left: 16px solid #FFFFFF;
border-top: 16px solid rgba(0,0,0,0);
right: -26px;
bottom: 425px;
}
&:before,
&:after{
content: "";
display: inline-block;
position: absolute;
width: 16px;
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
}
}
&.show-dropdown .show{
.dropdown-menu .show{
transform: translate3d(0, -60px, 0)!important;
bottom: auto!important;
top: 0!important;
}
}
}
.bootstrap-switch{
margin:0;
}
}
.fixed-plugin {
.show-dropdown {
.dropdown-menu[x-placement=bottom-start] {
@include transform-translate-y-fixed-plugin (-100px);
&:before,
&:after {
top: 100px;
}
}
.dropdown-menu[x-placement=top-start] {
@include transform-translate-y-fixed-plugin (100px);
}
&.show {
.dropdown-menu.show[x-placement=bottom-start] {
@include transform-translate-y-fixed-plugin (-60px);
}
.dropdown-menu.show[x-placement=top-start] {
@include transform-translate-y-fixed-plugin (470px);
}
}
}
}

46
assets/scss/paper-dashboard/_footers.scss Normal file
View File

@ -0,0 +1,46 @@
.footer{
padding: 24px 0;
&.footer-default{
background-color: #f2f2f2;
}
nav{
display: inline-block;
float: left;
padding-left: 0;
}
ul{
margin-bottom: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
color: inherit;
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;
}
&:after{
display: table;
clear: both;
content: " ";
}
}

7
assets/scss/paper-dashboard/_images.scss Normal file
View File

@ -0,0 +1,7 @@
img{
max-width: 100%;
border-radius: $border-radius-small;
}
.img-raised{
box-shadow: $box-shadow-raised;
}

403
assets/scss/paper-dashboard/_inputs.scss Normal file
View File

@ -0,0 +1,403 @@
@include placeholder() {
color: $dark-gray;
};
.form-control {
background-color: $white-color;
border: 1px solid $medium-gray;
border-radius: $border-radius-base;
color: $font-color;
line-height: normal;
font-size: $font-size-base;
@include transition-input-focus-color();
@include box-shadow(none);
&:focus{
border: 1px solid $dark-gray;
@include box-shadow(none);
outline: 0 !important;
color: $default-color;
& + .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 #ccc;
border-left: none;
background-color: $transparent-bg;
}
}
.has-success &,
.has-error &,
.has-success &:focus,
.has-error &:focus{
@include box-shadow(none);
}
.has-success &{
border: 1px solid $table-line-color;
color: $font-color;
&.form-control-success{
padding-right: 2.5em !important;
}
}
.has-success &:focus{
border: 1px solid $success-color;
color: $success-color;
}
.has-danger &{
background-color: $danger-input-bg;
border: 1px solid $danger-color;
color: $danger-color;
&.form-control-danger{
padding-right: 2.5em !important;
}
}
.has-danger &:focus{
background-color: $white-color;
border: 1px solid $danger-color;
}
& + .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;
}
}
@include form-control-lg-padding($padding-large-vertical, $padding-input-horizontal);
@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
.input-group {
&.has-success {
.input-group-prepend,
.input-group-append {
.input-group-text {
border: 1px solid $table-line-color;
color: $font-color;
background-color: $white-color;
border-right: none;
}
}
}
}
.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: $opacity-gray-3;
border: medium none;
&:focus,
&:active,
&:active{
border: medium none;
background-color: $opacity-gray-5;
}
}
.form-control{
&:focus{
& + .input-group-prepend .input-group-text,
& + .input-group-append .input-group-text{
background-color: $opacity-gray-5;
}
}
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $opacity-gray-3;
border: none;
}
}
.has-error{
.form-control-feedback, .control-label{
color: $danger-color;
}
}
.has-success{
.form-control-feedback, .control-label{
color: $success-color;
}
}
.input-group.has-danger {
.input-group-prepend {
border-radius: $border-radius-base;
.input-group-text {
border: 1px solid $danger-color;
border-right: none;
}
}
.error {
display: block;
width: 100%;
color: $danger-color;
margin-top: 3px;
}
}
.input-group.has-success {
.input-group-prepend {
border-radius: $border-radius-base;
.input-group-text {
// border: 1px solid $success-color;
border-right: none;
}
}
}
.input-group-focus{
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $white-bg;
border-color: $dark-gray;
}
&.no-border{
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $opacity-gray-5;
}
}
&.has-danger {
.input-group-append,
.input-group-prepend {
.input-group-text {
background-color: $danger-input-bg;
}
}
}
&.has-success {
.input-group-append,
.input-group-prepend {
.input-group-text {
background-color: $success-input-bg;
border: 1px solid $success-color;
border-right: none;
}
}
}
}
.input-group-append .input-group-text,
.input-group-prepend .input-group-text {
background-color: transparent;
border: 1px solid $light-gray;
color: $default-color;
border-top-right-radius: $border-radius-base;
border-bottom-right-radius: $border-radius-base;
& i{
opacity: .5;
}
@include transition-input-focus-color();
.has-danger &{
background-color: $danger-input-bg;
}
.has-success &{
background-color: $success-input-bg;
}
.has-danger.input-group-focus &{
background-color: $white-color;
color: $danger-color;
}
.has-success.input-group-focus &{
background-color: $white-color;
color: $success-color;
}
.has-danger .form-control:focus + &{
color: $danger-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,
.form-group{
margin-bottom: 10px;
position: relative;
.form-control-static{
margin-top: 9px;
}
&.has-danger {
.error {
color: $danger-color;
}
}
}
.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-base;
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: $light-gray;
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: 1px solid $light-gray;
border-radius: $border-radius-base;
line-height: 2;
}
.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;
}
.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;
}
}

150
assets/scss/paper-dashboard/_misc.scss Normal file
View File

@ -0,0 +1,150 @@
body{
color: $black-color;
font-size: $font-size-base;
font-family: $sans-serif-family;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.main{
position: relative;
background: $white-color;
}
/* Animations */
.nav-pills .nav-link,
.navbar,
.nav-tabs .nav-link,
.sidebar .nav a,
.sidebar .nav a i,
.animation-transition-general,
.tag,
.tag [data-role="remove"],
.animation-transition-general{
@include transition($general-transition-time, $transition-ease);
}
//transition for dropdown caret
.dropdown-toggle:after,
.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{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.offline-doc {
.navbar.navbar-transparent{
padding-top: 25px;
border-bottom: none;
.navbar-minimize {
display: none;
}
.navbar-brand,
.collapse .navbar-nav .nav-link {
color: $white-color !important;
}
}
.footer {
z-index: 3 !important;
}
.page-header{
.container {
z-index: 3;
}
&:after {
background-color: rgba(0, 0, 0, 0.5);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
}
}
.fixed-plugin {
.dropdown-menu li {
padding: 2px !important;
}
}
// badge color
.badge{
&.badge-default{
@include badge-color($default-color);
}
&.badge-primary{
@include badge-color($primary-color);
}
&.badge-info{
@include badge-color($info-color);
}
&.badge-success{
@include badge-color($success-color);
}
&.badge-warning{
@include badge-color($warning-color);
}
&.badge-danger{
@include badge-color($danger-color);
}
&.badge-neutral{
@include badge-color($white-color);
color: inherit;
}
}
.card-user {
form {
.form-group {
margin-bottom: 20px;
}
}
}

8
assets/scss/paper-dashboard/_mixins.scss Normal file
View 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";

310
assets/scss/paper-dashboard/_navbar.scss Normal file
View File

@ -0,0 +1,310 @@
.navbar{
padding-top: $navbar-padding-base;
padding-bottom: $navbar-padding-base;
min-height: 53px;
margin-bottom: 20px;
a{
vertical-align: middle;
&:not(.btn):not(.dropdown-item){
color: $white-color;
}
&.dropdown-item{
color: $default-color;
}
}
&.bg-white{
.input-group .form-control,
.input-group.no-border .form-control{
color: $default-color;
@include placeholder(){
color: $default-color;
};
}
.input-group-prepend .input-group-text i,
.input-group-append .input-group-text i{
color: $default-color;
opacity: .5;
}
}
.form-group,
.input-group{
margin: 0;
margin-left: -3px;
margin-right: 5px;
.form-group-addon,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
color: $default-color;
i {
opacity: 1;
}
}
&.no-border{
.form-control{
color: $default-color;
@include placeholder(){
color: $default-color;
};
}
}
}
p{
display: inline-block;
margin: 0;
line-height: 1.8em;
font-size: 1em;
font-weight: 400;
}
&.navbar-absolute{
position: absolute;
width: 100%;
padding-top: 10px;
z-index: 1029;
}
.documentation &{
&.fixed-top{
left: 0;
width: initial;
}
}
.navbar-wrapper{
display: inline-flex;
align-items: center;
.navbar-minimize{
padding-right: 10px;
.btn{
margin: 0;
}
}
.navbar-toggle{
.navbar-toggler{
padding-left: 0;
}
&:hover{
& .navbar-toggler-bar.bar2{
width: 22px;
}
}
}
}
.navbar-nav{
&.navbar-logo{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 49px;
top: -4px;
}
.nav-link.btn{
padding: $padding-btn-vertical $padding-btn-horizontal;
&.btn-lg{
padding: $padding-large-vertical $padding-large-horizontal;
}
&.btn-sm{
padding: $padding-small-vertical $padding-small-horizontal;
}
}
.nav-link{
text-transform: uppercase;
font-size: $font-size-mini;
padding: $padding-base-vertical $padding-base-horizontal;
line-height: $line-height-nav-link;
margin-right: 3px;
i.fa + p,
i.nc-icon + p{
margin-left: 3px;
}
i.fa,
i.nc-icon{
font-size: 18px;
position: relative;
top: 3px;
text-align: center;
width: 21px;
}
i.nc-icon{
top: 4px;
font-size: 16px;
}
&.profile-photo{
.profile-photo-small{
width: 27px;
height: 27px;
}
}
&.disabled{
opacity: .5;
color: $white-color;
}
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
border-radius: $border-radius-small;
color: $default-color;
}
}
.logo-container{
width: 27px;
height: 27px;
overflow: hidden;
margin: 0 auto;
border-radius: 50%;
border: 1px solid transparent;
}
.navbar-brand{
text-transform: capitalize;
font-size: $font-size-large-navbar;
padding-top: $padding-base-vertical;
padding-bottom: $padding-base-vertical;
line-height: $line-height-nav-link;
}
.navbar-toggler{
width: 37px;
height: 27px;
vertical-align: middle;
outline: 0;
cursor: pointer;
& .navbar-toggler-bar.navbar-kebab{
width: 3px;
height: 3px;
border-radius: 50%;
margin: 0 auto;
}
}
.button-dropdown{
.navbar-toggler-bar:nth-child(2){
width: 17px;
}
}
&.navbar-transparent{
background-color: $transparent-bg !important;
box-shadow: none;
border-bottom: 1px solid #ddd;
a:not(.dropdown-item):not(.btn){
color: $default-color;
&.disabled{
opacity: .5;
color: $default-color;
}
}
.button-bar{
background: $default-color;
}
.nav-item .nav-link:not(.btn){
color: $default-color;
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):focus:hover,
.nav-item .nav-link:not(.btn):active {
color: $primary-color;
}
}
&.bg-white {
a:not(.dropdown-item):not(.btn){
color: $default-color;
&.disabled{
opacity: .5;
color: $default-color;
}
}
.button-bar{
background: $default-color;
}
.nav-item.active .nav-link:not(.btn),
.nav-item .nav-link:not(.btn):focus,
.nav-item .nav-link:not(.btn):hover,
.nav-item .nav-link:not(.btn):active{
color: $info-color;
}
.logo-container{
border: 1px solid $default-color;
}
}
.navbar-collapse {
.nav-item {
a {
font-size: $font-size-base;
}
}
}
}
.bg-default{
background-color: $default-color !important;
}
.bg-primary{
background-color: $primary-color !important;
}
.bg-info{
background-color: $info-color !important;
}
.bg-success{
background-color: $success-color !important;
}
.bg-danger{
background-color: $danger-color !important;
}
.bg-warning{
background-color: $warning-color !important;
}
.bg-white{
background-color: $white-color !important;
}

566
assets/scss/paper-dashboard/_nucleo-outline.scss Normal file
View File

@ -0,0 +1,566 @@
/*--------------------------------
nucleo-icons Web Font - built using nucleoapp.com
License - nucleoapp.com/license/
-------------------------------- */
@font-face {
font-family: 'nucleo-icons';
src: url('../fonts/nucleo-icons.eot');
src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*------------------------
base class definition
-------------------------*/
.nc-icon {
display: inline-block;
font: normal normal normal 14px/1 'nucleo-icons';
font-size: inherit;
speak: none;
text-transform: none;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*------------------------
change icon size
-------------------------*/
.nc-icon.lg {
font-size: 1.33333333em;
vertical-align: -16%;
}
.nc-icon.x2 {
font-size: 2em;
}
.nc-icon.x3 {
font-size: 3em;
}
/*----------------------------------
add a square/circle background
-----------------------------------*/
.nc-icon.square,
.nc-icon.circle {
padding: 0.33333333em;
vertical-align: -16%;
background-color: #eee;
}
.nc-icon.circle {
border-radius: 50%;
}
/*------------------------
list icons
-------------------------*/
.nc-icon-ul {
padding-left: 0;
margin-left: 2.14285714em;
list-style-type: none;
}
.nc-icon-ul > li {
position: relative;
}
.nc-icon-ul > li > .nc-icon {
position: absolute;
left: -1.57142857em;
top: 0.14285714em;
text-align: center;
}
.nc-icon-ul > li > .nc-icon.lg {
top: 0;
left: -1.35714286em;
}
.nc-icon-ul > li > .nc-icon.circle,
.nc-icon-ul > li > .nc-icon.square {
top: -0.19047619em;
left: -1.9047619em;
}
/*------------------------
spinning icons
-------------------------*/
.nc-icon.spin {
-webkit-animation: nc-icon-spin 2s infinite linear;
-moz-animation: nc-icon-spin 2s infinite linear;
animation: nc-icon-spin 2s infinite linear;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*------------------------
rotated/flipped icons
-------------------------*/
.nc-icon.rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.nc-icon.rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.nc-icon.rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.nc-icon.flip-y {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.nc-icon.flip-x {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/*------------------------
font icons
-------------------------*/
.nc-air-baloon::before {
content: "\ea01";
}
.nc-album-2::before {
content: "\ea02";
}
.nc-alert-circle-i::before {
content: "\ea04";
}
.nc-align-center::before {
content: "\ea03";
}
.nc-align-left-2::before {
content: "\ea05";
}
.nc-ambulance::before {
content: "\ea06";
}
.nc-app::before {
content: "\ea07";
}
.nc-atom::before {
content: "\ea08";
}
.nc-badge::before {
content: "\ea09";
}
.nc-bag-16::before {
content: "\ea0a";
}
.nc-bank::before {
content: "\ea0b";
}
.nc-basket::before {
content: "\ea0c";
}
.nc-bell-55::before {
content: "\ea0d";
}
.nc-bold::before {
content: "\ea0e";
}
.nc-book-bookmark::before {
content: "\ea0f";
}
.nc-bookmark-2::before {
content: "\ea10";
}
.nc-box-2::before {
content: "\ea11";
}
.nc-box::before {
content: "\ea12";
}
.nc-briefcase-24::before {
content: "\ea13";
}
.nc-bulb-63::before {
content: "\ea14";
}
.nc-bullet-list-67::before {
content: "\ea15";
}
.nc-bus-front-12::before {
content: "\ea16";
}
.nc-button-pause::before {
content: "\ea17";
}
.nc-button-play::before {
content: "\ea18";
}
.nc-button-power::before {
content: "\ea19";
}
.nc-calendar-60::before {
content: "\ea1a";
}
.nc-camera-compact::before {
content: "\ea1b";
}
.nc-caps-small::before {
content: "\ea1c";
}
.nc-cart-simple::before {
content: "\ea1d";
}
.nc-chart-bar-32::before {
content: "\ea1e";
}
.nc-chart-pie-36::before {
content: "\ea1f";
}
.nc-chat-33::before {
content: "\ea20";
}
.nc-check-2::before {
content: "\ea21";
}
.nc-circle-10::before {
content: "\ea22";
}
.nc-cloud-download-93::before {
content: "\ea23";
}
.nc-cloud-upload-94::before {
content: "\ea24";
}
.nc-compass-05::before {
content: "\ea25";
}
.nc-controller-modern::before {
content: "\ea26";
}
.nc-credit-card::before {
content: "\ea27";
}
.nc-delivery-fast::before {
content: "\ea28";
}
.nc-diamond::before {
content: "\ea29";
}
.nc-email-85::before {
content: "\ea2a";
}
.nc-favourite-28::before {
content: "\ea2b";
}
.nc-glasses-2::before {
content: "\ea2c";
}
.nc-globe-2::before {
content: "\ea2d";
}
.nc-globe::before {
content: "\ea2e";
}
.nc-hat-3::before {
content: "\ea2f";
}
.nc-headphones::before {
content: "\ea30";
}
.nc-html5::before {
content: "\ea31";
}
.nc-image::before {
content: "\ea32";
}
.nc-istanbul::before {
content: "\ea33";
}
.nc-key-25::before {
content: "\ea34";
}
.nc-laptop::before {
content: "\ea35";
}
.nc-layout-11::before {
content: "\ea36";
}
.nc-lock-circle-open::before {
content: "\ea37";
}
.nc-map-big::before {
content: "\ea38";
}
.nc-minimal-down::before {
content: "\ea39";
}
.nc-minimal-left::before {
content: "\ea3a";
}
.nc-minimal-right::before {
content: "\ea3b";
}
.nc-minimal-up::before {
content: "\ea3c";
}
.nc-mobile::before {
content: "\ea3d";
}
.nc-money-coins::before {
content: "\ea3e";
}
.nc-note-03::before {
content: "\ea3f";
}
.nc-palette::before {
content: "\ea40";
}
.nc-paper::before {
content: "\ea41";
}
.nc-pin-3::before {
content: "\ea42";
}
.nc-planet::before {
content: "\ea43";
}
.nc-refresh-69::before {
content: "\ea44";
}
.nc-ruler-pencil::before {
content: "\ea45";
}
.nc-satisfied::before {
content: "\ea46";
}
.nc-scissors::before {
content: "\ea47";
}
.nc-send::before {
content: "\ea48";
}
.nc-settings-gear-65::before {
content: "\ea49";
}
.nc-settings::before {
content: "\ea4a";
}
.nc-share-66::before {
content: "\ea4b";
}
.nc-shop::before {
content: "\ea4c";
}
.nc-simple-add::before {
content: "\ea4d";
}
.nc-simple-delete::before {
content: "\ea4e";
}
.nc-simple-remove::before {
content: "\ea4f";
}
.nc-single-02::before {
content: "\ea50";
}
.nc-single-copy-04::before {
content: "\ea51";
}
.nc-sound-wave::before {
content: "\ea52";
}
.nc-spaceship::before {
content: "\ea53";
}
.nc-sun-fog-29::before {
content: "\ea54";
}
.nc-support-17::before {
content: "\ea55";
}
.nc-tablet-2::before {
content: "\ea56";
}
.nc-tag-content::before {
content: "\ea57";
}
.nc-tap-01::before {
content: "\ea58";
}
.nc-tie-bow::before {
content: "\ea59";
}
.nc-tile-56::before {
content: "\ea5a";
}
.nc-time-alarm::before {
content: "\ea5b";
}
.nc-touch-id::before {
content: "\ea5c";
}
.nc-trophy::before {
content: "\ea5d";
}
.nc-tv-2::before {
content: "\ea5e";
}
.nc-umbrella-13::before {
content: "\ea5f";
}
.nc-user-run::before {
content: "\ea60";
}
.nc-vector::before {
content: "\ea61";
}
.nc-watch-time::before {
content: "\ea62";
}
.nc-world-2::before {
content: "\ea63";
}
.nc-zoom-split::before {
content: "\ea64";
}
/* all icon font classes list here */

85
assets/scss/paper-dashboard/_page-header.scss Normal file
View File

@ -0,0 +1,85 @@
.page-header{
min-height: 100vh;
max-height: 1000px;
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));
}
}

550
assets/scss/paper-dashboard/_responsive.scss Normal file
View File

@ -0,0 +1,550 @@
@media screen and (max-width: 991px){
.navbar {
padding: 0;
&.navbar-absolute {
padding-top: 0;
}
.navbar-brand {
font-size: 16px;
margin-right: 0;
}
}
.profile-photo .profile-photo-small{
margin-left: -2px;
}
.button-dropdown{
display: none;
}
#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;
}
}
.dropdown.show .dropdown-menu{
display: block;
}
.dropdown .dropdown-menu{
display: none;
}
.dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{
border: 0;
transition: none;
-webkit-box-shadow: none;
width: auto;
margin: 0px 1rem;
margin-top: 0px;
box-shadow: none;
position: static;
padding-left: 10px;
&: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;
}
.navbar-toggler-bar{
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: $default-color;
& + .navbar-toggler-bar{
margin-top: 7px;
}
& + .navbar-toggler-bar.navbar-kebab{
margin-top: 3px;
}
&.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;
}
}
}
.wrapper{
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.nav-open{
.main-panel{
right: 0;
@include transform-translate-x(260px);
}
.sidebar{
@include transform-translate-x(0px);
}
body{
position: relative;
overflow-x: hidden;
}
.menu-on-right{
.main-panel{
@include transform-translate-x(-260px);
}
.navbar-collapse,
.sidebar{
@include transform-translate-x(0px);
}
.navbar-translate{
@include transform-translate-x(-300px);
}
#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.nc-icon{
opacity: .5;
}
}
}
.sidebar,
.bootstrap-navbar {
position: fixed;
display: block;
top: 0;
height: 100%;
width: 260px;
right: auto;
left: 0;
z-index: 1032;
visibility: visible;
overflow-y: visible;
padding: 0;
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
@include transform-translate-x(-260px);
}
.main-panel{
width: 100%;
}
.timeline{
&:before{
left: 5% !important;
}
> li > .timeline-badge{
left: 5% !important;
}
> li > .timeline-panel{
float: right !important;
width: 82% !important;
&:before{
border-left-width: 0 !important;
border-right-width: 15px !important;
left: -15px !important;
right: auto !important;
}
&:after{
border-left-width: 0 !important;
border-right-width: 14px !important;
left: -14px !important;
right: auto !important;
}
}
}
}
@media (max-width: 991px) and (min-width: 768px){
.nav-tabs-navigation.verical-navs {
padding: 0px 2px;
}
}
@media screen and (min-width: 768px){
.footer {
.footer-nav {
padding-left: 21px;
}
.credits {
padding-right: 15px;
}
}
}
@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: inherit;
}
.footer{
.copyright{
float: right;
padding-right: 15px;
}
}
.sidebar{
.sidebar-wrapper{
li.active{
> a:not([data-toggle="collapse"]),
> [data-toggle="collapse"] + div .nav li {
&:before{
border-right: 17px solid $medium-gray;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: -16px;
opacity: 1;
top: 7px;
transition: opacity 150ms ease-in;
}
&:after{
border-right: 17px solid $default-body-bg;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: -17px;
opacity: 1;
top: 7px;
transition: opacity 150ms ease-in;
}
}
>[data-toggle="collapse"] + div .nav li {
a{
&:before,
&:after {
top: 0;
}
}
}
}
}
}
}
@media screen and (max-width: 768px){
.card-stats [class*="col-"] .statistics::after {
display: none;
}
.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 {
.form-horizontal {
.col-md-3.col-form-label {
text-align: left;
}
}
}
}
@media screen and (max-width: 767px){
.nav-tabs-navigation.verical-navs{
padding: 0 28px;
}
.typography-line {
padding-left: 23% !important;
span {
width: 60px !important;
}
}
.login-page,
.lock-page,
.register-page {
.navbar{
padding: .5rem 1rem;
}
}
.footer {
.footer-nav,
.credits {
margin: 0 auto !important;
}
.footer-nav {
margin-bottom: 10px !important;
}
}
.register-page {
.content {
padding-top: 5vh;
}
.footer {
position: relative;
}
.info-area.info-horizontal {
margin-top: 0;
}
}
}
@media screen and (max-width: 374px){
.login-page {
.content {
padding-top: 10vh;
}
}
}
@media screen and (max-width: 413px){
.fixed-plugin {
.dropdown.show-dropdown.show{
.dropdown-menu.show {
width: 225px !important;
&[x-placement=top-start] {
transform: translate3d(0,400px,0)!important;
}
&:before,
&:after {
bottom: 360px !important;
}
}
}
}
}
@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%;
}
}
.card-timeline .timeline {
.timeline-panel {
width: 38%;
padding: 15px;
}
}
}

361
assets/scss/paper-dashboard/_sidebar-and-main-panel.scss Normal file
View File

@ -0,0 +1,361 @@
.wrapper{
position: relative;
top: 0;
height: 100vh;
&.wrapper-full-page{
min-height: 100vh;
height: auto;
}
}
.sidebar,
.off-canvas-sidebar{
position: fixed;
top: 0;
height: 100%;
bottom: 0;
width: 260px;
left: 0;
z-index: 1030;
border-right: 1px solid #ddd;
.sidebar-wrapper{
position: relative;
height: calc(100vh - 75px);
overflow: auto;
width: 260px;
z-index: 4;
padding-bottom: 100px;
.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;
color: $white-color;
display: block;
text-decoration: none;
position: relative;
text-transform: uppercase;
cursor: pointer;
font-size: 12px;
padding: 10px 8px;
line-height: 30px;
opacity: .7;
}
.nav > li > a{
padding: 5px 8px;
}
&.active > a,
&.active > a > i {
opacity: 1;
}
&:hover:not(.active) > a,
&:focus:not(.active) > a {
opacity: 1;
}
}
i{
font-size: 24px;
float: left;
margin-right: 12px;
line-height: 30px;
width: 34px;
text-align: center;
color: $opacity-5;
position: relative;
}
p {
margin-bottom: 0;
}
.collapse,
.collapsing {
.nav {
margin-top: 0;
}
}
}
.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: 7px $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;
padding: 11px 0 8px;
@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;
}
}
&:before,
&:after{
display: block;
content: "";
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&:after{
@include icon-gradient($default-color);
z-index: 3;
}
&[data-color="white"]{
@include sidebar-color($white-color);
@include sidebar-text-color($default-color);
}
&[data-color="black"]{
@include sidebar-color($dark-color);
}
// Active color changing
&[data-active-color="primary"]{
@include sidebar-active-color($primary-color);
}
&[data-active-color="info"]{
@include sidebar-active-color($info-color);
}
&[data-active-color="success"]{
@include sidebar-active-color($success-color);
}
&[data-active-color="warning"]{
@include sidebar-active-color($warning-color);
}
&[data-active-color="danger"]{
@include sidebar-active-color($danger-color);
}
}
.visible-on-sidebar-regular{
display: inline-block !important;
}
.visible-on-sidebar-mini{
display: none !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: $sidebar-width;
background-color: #f4f3ef;;
@include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
> .content{
padding: 0 30px 30px;
min-height: calc(100vh - 123px);
margin-top: 93px;
}
> .navbar{
margin-bottom: 0;
}
.header{
margin-bottom: 50px;
}
}
.perfect-scrollbar-on{
.sidebar,
.main-panel{
height: 100%;
max-height: 100%;
}
}
.panel-header {
height: 260px;
padding-top: 80px;
padding-bottom: 45px;
background: #141E30; /* fallback for old browsers */
background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788));
background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
position: relative;
overflow: hidden;
.header{
.title{
color: $white-color;
}
.category{
max-width: 600px;
color: $opacity-5;
margin: 0 auto;
font-size: 13px;
a{
color: $white-color;
}
}
}
}
.panel-header-sm{
height: 135px;
}
.panel-header-lg{
height: 380px
}

173
assets/scss/paper-dashboard/_tables.scss Normal file
View File

@ -0,0 +1,173 @@
.table{
.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;
& 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: 0;
padding-bottom: 0;
}
}
> thead > tr > th{
font-size: 14px;
font-weight: $font-weight-bold;
padding-bottom: 0;
text-transform: uppercase;
border: 0;
}
.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{
padding: 12px 7px;
vertical-align: middle;
}
.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;
}
}
.table-shopping{
> thead > tr > th{
font-size: $font-size-h6;
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;
font-size: $font-size-h4;
}
.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-hover>tbody>tr:hover{
background-color: #f5f5f5;
}

173
assets/scss/paper-dashboard/_typography.scss Normal file
View File

@ -0,0 +1,173 @@
button,
input,
optgroup,
select,
textarea{
font-family: $sans-serif-family;
}
h1,h2,h3,h4,h5,h6{
font-weight: $font-weight-normal;
}
a{
color: $primary-color;
&:hover,
&:focus{
color: $primary-color;
}
}
h1, .h1 {
font-size: $font-size-h1;
line-height: 1.15;
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;
}
h3, .h3{
font-size: $font-size-h3;
margin-bottom: $margin-base-vertical * 2;
line-height: 1.4em;
}
h4, .h4{
font-size: $font-size-h4;
line-height: 1.45em;
margin-top: $margin-base-vertical * 2;
margin-bottom: $margin-base-vertical;
& + .category,
&.title + .category{
margin-top: -10px;
}
}
h5, .h5 {
font-size: $font-size-h5;
line-height: 1.4em;
margin-bottom: 15px;
}
h6, .h6{
font-size: $font-size-h6;
font-weight: $font-weight-bold;
text-transform: uppercase;
}
p{
&.description{
font-size: 1.14em;
}
}
// i.fa{
// font-size: 18px;
// position: relative;
// top: 1px;
// }
.title{
font-weight: $font-weight-bold;
&.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: $dark-gray;
font-size: $font-size-mini;
}
.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;
}
}
}

404
assets/scss/paper-dashboard/_variables.scss Normal file
View File

@ -0,0 +1,404 @@
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$font-color: #66615b !default;
$fill-font-color: rgba(255, 255, 255, 0.8);
$font-family-sans-serif: 'Montserrat', "Helvetica", Arial, sans-serif;
$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
$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: #2c2c2c !default;
$black-hr: #444444 !default;
$hr-line: rgba(0,0,0, .1) !default;
$light-gray: #E3E3E3 !default;
$medium-gray: #DDDDDD !default;
$dark-gray: #9A9A9A !default;
$table-line-color: #ccc !default;
$muted-color: #a49e93 !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;
$gray-input-bg: #fffcf5 !default;
$danger-input-bg: #FFC0A4 !default;
$success-input-bg: #ABF3CB !default;
$other-medium-gray: #A49E93 !default;
$transparent-bg: transparent !default;
$placeholder-gray: rgba(210, 210, 210, 1) !default;
$default-color: #66615B !default;
$default-bg: #66615B !default;
$default-states-color: #403D39 !default;
$smoke-bg: #F5F5F5 !default;
$pale-bg: #FFFCF5 !default;
$medium-pale-bg: #F1EAE0 !default;
$default-body-bg: #f4f3ef !default;
$primary-color: #51cbce !default;
$primary-states-color: darken($primary-color, 10%) !default;
$success-color: #6bd098 !default;
$success-states-color: darken($success-color, 10%) !default;
$info-color: #51bcda !default;
$info-states-color: darken($info-color, 10%) !default;
$warning-color: #fbc658 !default;
$warning-states-color: darken($warning-color, 10%) !default;
$danger-color: #ef8157 !default;
$danger-states-color: darken($danger-color, 8%) !default;
$link-disabled-color: #666666 !default;
$purple-color: #c178c1 !default;
$purple-states-color: darken($purple-color, 8%) !default;
$medium-pale-bg: #F1EAE0 !default;
$brown-color: #dcb285 !default;
$default-color-opacity: rgba(182, 182, 182, .6) !default;
$primary-color-opacity: rgba(249, 99, 50, .3) !default;
$success-color-opacity: rgba(24, 206, 15, .3) !default;
$info-color-opacity: rgba(44, 168, 255, .3) !default;
$warning-color-opacity: rgba(255, 178, 54, .3) !default;
$danger-color-opacity: rgba(255, 54, 54, .3) !default;
$new-blue: #1DC7EA;
$new-purple: #9368E9;
$new-red: #FB404B;
$new-green: #87CB16;
$new-orange: #FFA534;
$new-dark-blue: #1F77D0;
$new-black: #5e5e5e;
$orange-color: #f96332 !default;
$color-red-error: rgb(185, 74, 72) !default;
$color-grey-arrow: rgba(204, 204, 204, 0.2) !default;
$bg-nude: #FFFCF5 !default;
$bg-primary: lighten($primary-color, 7%) !default;
$bg-info: lighten($info-color, 7%) !default;
$bg-success: lighten($success-color, 7%) !default;
$bg-warning: lighten($warning-color, 7%) !default;
$bg-danger: lighten($danger-color, 7%) !default;
$bg-brown: lighten($brown-color, 7%) !default;
$bg-purple: lighten($purple-color, 7%) !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;
$dark-color: #212120 !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);
// padding for links inside dropdown menu
$padding-dropdown-vertical: 10px !default;
$padding-dropdown-horizontal: 15px !default;
$margin-large-vertical: 30px !default;
$margin-base-vertical: 15px !default;
// border radius for buttons
$border-radius-none: 0px !default;
$border-radius-btn-small: 26px !default;
$border-radius-btn-base: 20px !default;
$border-radius-btn-large: 50px !default;
$margin-bottom: 0 0 10px 0 !default;
$border-radius-small: 3px !default;
$border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-x-large: 8px !default;
$border-radius-extreme: 12px !default;
//variables used in cards
$card-black-color: #252422 !default;
$card-muted-color: #ccc5b9 !default;
$card-background-blue: #b8d8d8 !default;
$card-font-blue: #506568 !default;
$card-subtitle-blue: #7a9e9f !default;
$card-background-green: #d5e5a3 !default;
$card-font-green: #60773d !default;
$card-subtitle-green: #92ac56 !default;
$card-background-yellow: #ffe28c !default;
$card-font-yellow: #b25825 !default;
$card-subtitle-yellow: #d88715 !default;
$card-background-brown: #d6c1ab !default;
$card-font-brown: #75442e !default;
$card-subtitle-brown: #a47e65 !default;
$card-background-purple: #baa9ba !default;
$card-font-purple: #3a283d !default;
$card-subtitle-purple: #5a283d !default;
$card-background-orange: #ff8f5e !default;
$card-font-orange: #772510 !default;
$card-subtitle-orange: #e95e37 !default;
//== Components
//
$padding-input-vertical: 11px !default;
$padding-input-horizontal: 11px !default;
$padding-btn-vertical: 11px !default;
$padding-btn-horizontal: 22px !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.125rem !default;
$border-radius-small: 0.1875rem !default;
$border-radius-large: 0.25rem !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: 40px !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: 3.5em !default; // ~ 49px
$font-size-h2: 2.5em !default; // ~ 35px
$font-size-h3: 2em !default; // ~ 28px
$font-size-h4: 1.714em !default; // ~ 24px
$font-size-h5: 1.57em !default; // ~ 22px
$font-size-h6: 1em !default; // ~ 14px
$font-paragraph: 1em !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: 1rem !default;
$font-size-large-navbar: 20px !default;
$font-size-blockquote: 1.1em !default; // ~ 15px
$font-size-medium: 16px !default;
$font-size-xs: 12px !default;
$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 7px 1px rgba(0,0,0,.125);
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
$box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
$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: nc !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;
// Sidebar variables
$sidebar-width: calc(100% - 260px) !default;
$sidebar-mini-width: calc(100% - 80px) !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: lighten(#333333, 6%) !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;
// Placeholder text color
$input-color-placeholder: #999 !default;
$zindex-select-dropdown: 1060 !default; // must be higher than a modal background (1050)

48
assets/scss/paper-dashboard/cards/_card-chart.scss Normal file
View File

@ -0,0 +1,48 @@
.card-chart {
.card-header{
.card-title{
margin-top: 10px;
margin-bottom: 0;
}
.card-category{
margin-bottom: 5px;
}
}
.table{
margin-bottom: 0;
td{
border-top: none;
border-bottom: 1px solid #e9ecef;
}
}
.card-progress {
margin-top: 30px;
}
.chart-area {
height: 190px;
width: calc(100% + 30px);
margin-left: -15px;
margin-right: -15px;
}
.card-footer {
margin-top: 15px;
.stats{
color: $dark-gray;
}
}
.dropdown{
position: absolute;
right: 20px;
top: 20px;
.btn{
margin: 0;
}
}
}

3
assets/scss/paper-dashboard/cards/_card-map.scss Normal file
View File

@ -0,0 +1,3 @@
.map{
height: 500px;
}

17
assets/scss/paper-dashboard/cards/_card-plain.scss Normal file
View 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;
}
}

48
assets/scss/paper-dashboard/cards/_card-stats.scss Normal file
View File

@ -0,0 +1,48 @@
%card-stats{
hr{
margin: 5px 15px;
}
}
.card-stats{
.card-body{
padding: 15px 15px 0px;
.numbers{
text-align: right;
font-size: 2em;
p{
margin-bottom: 0;
}
.card-category {
color: $dark-gray;
font-size: 16px;
line-height: 1.4em;
}
}
}
.card-footer{
padding: 0px 15px 15px;
.stats{
color: $dark-gray;
}
hr{
margin-top: 10px;
margin-bottom: 15px;
}
}
.icon-big {
font-size: 3em;
min-height: 64px;
i{
line-height: 59px;
}
}
}

50
assets/scss/paper-dashboard/cards/_card-user.scss Normal file
View File

@ -0,0 +1,50 @@
.card-user{
.image{
height: 130px;
img {
border-radius: 12px;
}
}
.author{
text-align: center;
text-transform: none;
margin-top: -77px;
a + p.description{
margin-top: -7px;
}
}
.avatar{
width: 124px;
height: 124px;
border: 1px solid $white-color;
position: relative;
}
.card-body{
min-height: 240px;
}
hr{
margin: 5px 15px 15px;
}
.card-body + .card-footer {
padding-top: 0;
}
.card-footer {
h5 {
font-size: 1.25em;
margin-bottom: 0;
}
}
.button-container{
margin-bottom: 6px;
text-align: center;
}
}

212
assets/scss/paper-dashboard/mixins/_buttons.scss Normal file
View File

@ -0,0 +1,212 @@
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
background-color: $btn-color;
&:hover,
&:focus,
&:active,
&.active,
&:active:focus,
&:active:hover,
&.active:focus,
&.active:hover,
.show > &.dropdown-toggle,
.show > &.dropdown-toggle:focus,
.show > &.dropdown-toggle:hover {
background-color: $btn-states-color !important;
color: $white-color !important;
box-shadow: none !important;
}
&:not([data-action]):hover{
box-shadow: none;
}
&.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 !important;
}
}
&.btn-info{
color: $info-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $info-states-color !important;
}
}
&.btn-warning{
color: $warning-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $warning-states-color !important;
}
}
&.btn-success{
color: $success-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $success-states-color !important;
}
}
&.btn-default{
color: $default-color !important;
&:hover,
&:focus,
&:active,
&:active:focus{
color: $default-states-color !important;
}
}
&.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 !important;
color: $primary-states-color !important;
box-shadow: none !important;
}
&:hover,
&:focus{
color: $primary-states-color !important;
&:not(.nav-link){
box-shadow: none;
}
}
} @else {
color: $white-color;
}
&.btn-simple{
color: $btn-color;
border-color: $btn-color;
&:hover,
&:focus,
&:active{
background-color: $transparent-bg;
color: $btn-states-color;
border-color: $btn-states-color;
box-shadow: none;
}
}
&.btn-link{
color: $btn-color;
&:hover,
&:focus,
&:active,
&:active:focus {
background-color: $transparent-bg;
color: $btn-states-color;
text-decoration: none;
box-shadow: none;
}
}
}
@mixin btn-outline-styles($btn-color, $btn-states-color){
background: $transparent-bg;
border: 2px solid $btn-color !important;
color: $btn-color;
@include opacity(1);
&:hover,
&:focus,
&:active,
&:focus:active,
&.active,
.open > &.dropdown-toggle {
background-color: $btn-color !important;
color: $fill-font-color !important;
border-color: $btn-color !important;
.caret{
border-top-color: $fill-font-color !important;
}
}
.caret{
border-top-color: $white-color !important;
}
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
background-color: $transparent-bg !important;
border-color: $btn-color !important;
}
}
}
@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;
}
}
@mixin rotate-180(){
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

4
assets/scss/paper-dashboard/mixins/_cards.scss Normal file
View File

@ -0,0 +1,4 @@
@mixin icon-color($color) {
box-shadow: 0px 9px 30px -6px $color;
color: $color;
}

24
assets/scss/paper-dashboard/mixins/_dropdown.scss Normal file
View File

@ -0,0 +1,24 @@
@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;
}
}

232
assets/scss/paper-dashboard/mixins/_inputs.scss Normal file
View File

@ -0,0 +1,232 @@
@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(darken($color2, 8%), 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: $color4;
border-color: $color1;
color: $color2;
}
.input-group-focus{
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $color4;
border-color: $color3;
color: $color3;
}
}
.form-group.no-border,
.input-group.no-border{
.form-control{
background-color: $color5;
color: $color2;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control + .input-group-prepend .input-group-text,
.form-control + .input-group-append .input-group-text{
background-color: $color5;
&:focus,
&:active,
&:active{
background-color: $color6;
color: $color3;
}
}
.form-control{
&:focus{
& + .input-group-prepend .input-group-text,
& + .input-group-append .input-group-text{
background-color: $color6;
color: $color3;
}
}
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $color5;
border: none;
color: $color2;
}
&.input-group-focus{
.input-group-prepend .input-group-text,
.input-group-append .input-group-text{
background-color: $color6;
color: $color3;
}
}
}
}
@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;
}

7
assets/scss/paper-dashboard/mixins/_page-header.scss Normal file
View 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 */
}

8
assets/scss/paper-dashboard/mixins/_transparency.scss Normal file
View File

@ -0,0 +1,8 @@
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}

228
assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss Normal file
View File

@ -0,0 +1,228 @@
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
box-shadow: $shadow;
}
@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 sidebar-color($color){
&:after{
background: $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 sidebar-active-color($font-color){
.nav {
li {
&.active > a,
&.active > a i,
&.active > a[data-toggle="collapse"],
&.active > a[data-toggle="collapse"] i,
&.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon,
&.active > a[data-toggle="collapse"] ~ div > ul > li.active > a {
color: $font-color;
opacity: 1;
}
}
}
}
@mixin transition-opacity($time, $type){
-webkit-transition: opacity $time $type;
-moz-transition: opacity $time $type;
-o-transition: opacity $time $type;
-ms-transition: opacity $time $type;
transition: opacity $time $type;
}
@mixin transform-translate-y-dropdown($value) {
-webkit-transform: translate3d(-20px,$value,0) !important;
-moz-transform: translate3d(-20px,$value,0) !important;
-o-transform: translate3d(-20px,$value,0) !important;
-ms-transform: translate3d(-20px,$value,0) !important;
transform: translate3d(-20px,$value,0) !important;
}
@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) !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 transform-translate-y-fixed-plugin($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 icon-gradient($color, $bottomColor: #000){
background: $color;
background: -webkit-linear-gradient($color 0%, $bottomColor 80%);
background: -o-linear-gradient($color 0%, $bottomColor 80%);
background: -moz-linear-gradient($color 0%, $bottomColor 80%);
background: linear-gradient($color 0%, $bottomColor 80%);
}
@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 sidebar-text-color($text-color){
.nav {
li {
a,
a i,
a[data-toggle="collapse"],
a[data-toggle="collapse"] i,
a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon,
a[data-toggle="collapse"] ~ div > ul > li > a {
color: $text-color;
opacity: .7;
}
&:hover:not(.active) > a,
&:focus:not(.active) > a {
opacity: 1;
}
}
}
.logo {
.simple-text {
color: $text-color;
}
&:after {
background-color: $text-color;
opacity: .4;
}
}
.user {
.info a span,
.nav .sidebar-mini-icon,
.nav .sidebar-normal {
color: $text-color !important;
}
&:after {
background-color: $text-color;
opacity: .4;
}
}
}
@mixin badge-color($color) {
border-color: $color;
background-color: $color;
}

227
assets/scss/paper-dashboard/plugins/_plugin-animate-bootstrap-notify.scss Normal file
View File

@ -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;
}

113
assets/scss/paper-dashboard/plugins/_plugin-perfect-scrollbar.scss Normal file
View File

@ -0,0 +1,113 @@
/* perfect-scrollbar v0.6.13 */
.ps-container {
-ms-touch-action: auto;
touch-action: auto;
overflow: hidden !important;
-ms-overflow-style: none; }
@supports (-ms-overflow-style: none) {
.ps-container {
overflow: auto !important; } }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps-container {
overflow: auto !important; } }
.ps-container.ps-active-x > .ps-scrollbar-x-rail,
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
display: block;
background-color: transparent; }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999;
height: 11px; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999;
width: 11px; }
.ps-container > .ps-scrollbar-x-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 0;
-webkit-transition: background-color .2s linear, opacity .2s linear;
-o-transition: background-color .2s linear, opacity .2s linear;
-moz-transition: background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear;
bottom: 0px;
/* there must be 'bottom' for ps-scrollbar-x-rail */
height: 15px; }
.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
position: absolute;
/* please don't change 'position' */
background-color: #aaa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
-moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
bottom: 2px;
/* there must be 'bottom' for ps-scrollbar-x */
height: 6px; }
.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
height: 11px; }
.ps-container > .ps-scrollbar-y-rail {
display: none;
position: absolute;
/* please don't change 'position' */
opacity: 0;
-webkit-transition: background-color .2s linear, opacity .2s linear;
-o-transition: background-color .2s linear, opacity .2s linear;
-moz-transition: background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear;
right: 0;
/* there must be 'right' for ps-scrollbar-y-rail */
width: 15px; }
.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
position: absolute;
/* please don't change 'position' */
background-color: #aaa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
-o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
-moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
right: 2px;
/* there must be 'right' for ps-scrollbar-y */
width: 6px; }
.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
width: 11px; }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
background-color: #999;
height: 11px; }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
background-color: #999;
width: 11px; }
.ps-container:hover > .ps-scrollbar-x-rail,
.ps-container:hover > .ps-scrollbar-y-rail {
opacity: 0.6; }
.ps-container:hover > .ps-scrollbar-x-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
background-color: #999; }
.ps-container:hover > .ps-scrollbar-y-rail:hover {
background-color: #eee;
opacity: 0.9; }
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
background-color: #999; }