github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert LESS to SASS

pull/945/head
Abdullah Almsaeed 2015-10-31 17:00:16 -04:00
parent 03746096a5
commit 1acadbe382
52 changed files with 5902 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
build/scss/AdminLTE.scss Normal file
View File

@ -0,0 +1,64 @@
/*!
* AdminLTE v3.0.0-alpha
* Author: Abdullah Almsaeed
* Website: Almsaeed Studio <http://almsaeedstudio.com>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
!*/
// Bootstrap
@import "../../bower_components/bootstrap/scss/bootstrap";
// MISC
// ----
@import "variables";
@import "mixins";
// Core
// ----
@import "core";
// COMPONENTS
// ----------
@import "header";
@import "sidebar";
@import "sidebar-mini";
@import "control-sidebar";
@import "dropdown";
@import "forms";
@import "progress-bars";
@import "small-box";
@import "boxes";
@import "info-box";
@import "timeline";
@import "buttons";
@import "callout";
@import "alerts";
@import "navs";
@import "products";
@import "table";
@import "labels";
@import "direct-chat";
@import "users-list";
@import "carousel";
@import "modal";
@import "social-widgets";
// PAGES
// -----
@import "mailbox";
@import "lockscreen";
@import "login_and_register";
@import "404_500_errors";
@import "invoice";
@import "profile";
// Plugins
// -------
@import "bootstrap-social";
@import "fullcalendar";
@import "select2";
// Miscellaneous
// -------------
@import "miscellaneous";
@import "print";

36
build/scss/_404_500_errors.scss Normal file
View File

@ -0,0 +1,36 @@
/*
* Page: 400 and 500 error pages
* ------------------------------
*/
.error-page {
width: 600px;
margin: 20px auto 0 auto;
@media (max-width: map-get($grid-breakpoints, sm)) {
width: 100%;
}
//For the error number e.g: 404
> .headline {
float: left;
font-size: 100px;
font-weight: 300;
@media (max-width: map-get($grid-breakpoints, sm)) {
float: none;
text-align: center;
}
}
//For the message
> .error-content {
margin-left: 190px;
@media (max-width: map-get($grid-breakpoints, sm)) {
margin-left: 0;
}
> h3 {
font-weight: 300;
font-size: 25px;
@media (max-width: map-get($grid-breakpoints, sm)) {
text-align: center;
}
}
display: block;
}
}

47
build/scss/_alerts.scss Normal file
View File

@ -0,0 +1,47 @@
/*
* Component: alert
* ----------------
*/
.alert {
@include border-radius(3px);
h4 {
font-weight: 600;
}
.icon {
margin-right: 10px;
}
.close {
color: #000;
opacity: .2;
&:hover {
opacity: .5;
}
}
a {
color: #fff;
text-decoration: underline;
}
}
//Alert Variants
.alert-success {
@extend .bg-green;
border-color: darken($green, 5%);
}
.alert-danger,
.alert-error {
@extend .bg-red;
border-color: darken($red, 5%);
}
.alert-warning {
@extend .bg-yellow;
border-color: darken($yellow, 5%);
}
.alert-info {
@extend .bg-aqua;
border-color: darken($aqua, 5%);
}

172
build/scss/_bootstrap-social.scss Normal file
View File

@ -0,0 +1,172 @@
/*
* Social Buttons for Bootstrap
*
* Copyright 2013-2015 Panayiotis Lipiridis
* Licensed under the MIT License
*
* https://github.com/lipis/bootstrap-social
*/
$bs-height-base: ($line-height + $input-padding-y * 2);
$bs-height-lg: (floor($font-size-lg * $line-height) + $input-padding-y-lg * 2);
$bs-height-sm: (floor($font-size-sm * 1.5) + $input-padding-y-sm * 2);
$bs-height-xs: (floor($font-size-sm * 1.2) + $input-padding-y-sm + 1);
.btn-social {
position: relative;
padding-left: ($bs-height-base + $input-padding-x);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
> :first-child {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: $bs-height-base;
line-height: ($bs-height-base + 2);
font-size: 1.6em;
text-align: center;
border-right: 1px solid rgba(0, 0, 0, 0.2);
}
&.btn-lg {
padding-left: ($bs-height-lg + $input-padding-y-lg);
> :first-child {
line-height: $bs-height-lg;
width: $bs-height-lg;
font-size: 1.8em;
}
}
&.btn-sm {
padding-left: ($bs-height-sm + $input-padding-y-sm);
> :first-child {
line-height: $bs-height-sm;
width: $bs-height-sm;
font-size: 1.4em;
}
}
&.btn-xs {
padding-left: ($bs-height-xs + $input-padding-y-sm);
> :first-child {
line-height: $bs-height-xs;
width: $bs-height-xs;
font-size: 1.2em;
}
}
}
.btn-social-icon {
//@include btn-social;
height: ($bs-height-base + 2);
width: ($bs-height-base + 2);
padding: 0;
> :first-child {
border: none;
text-align: center;
width: 100%;
}
&.btn-lg {
height: $bs-height-lg;
width: $bs-height-lg;
padding-left: 0;
padding-right: 0;
}
&.btn-sm {
height: ($bs-height-sm + 2);
width: ($bs-height-sm + 2);
padding-left: 0;
padding-right: 0;
}
&.btn-xs {
height: ($bs-height-xs + 2);
width: ($bs-height-xs + 2);
padding-left: 0;
padding-right: 0;
}
}
@mixin btn-social($color-bg, $color: #fff) {
background-color: $color-bg;
@include button-variant($color, $color-bg, rgba(0, 0, 0, .2));
}
.btn-adn {
@include btn-social(#d87a68);
}
.btn-bitbucket {
@include btn-social(#205081);
}
.btn-dropbox {
@include btn-social(#1087dd);
}
.btn-facebook {
@include btn-social(#3b5998);
}
.btn-flickr {
@include btn-social(#ff0084);
}
.btn-foursquare {
@include btn-social(#f94877);
}
.btn-github {
@include btn-social(#444444);
}
.btn-google {
@include btn-social(#dd4b39);
}
.btn-instagram {
@include btn-social(#3f729b);
}
.btn-linkedin {
@include btn-social(#007bb6);
}
.btn-microsoft {
@include btn-social(#2672ec);
}
.btn-openid {
@include btn-social(#f7931e);
}
.btn-pinterest {
@include btn-social(#cb2027);
}
.btn-reddit {
@include btn-social(#eff7ff, #000);
}
.btn-soundcloud {
@include btn-social(#ff5500);
}
.btn-tumblr {
@include btn-social(#2c4762);
}
.btn-twitter {
@include btn-social(#55acee);
}
.btn-vimeo {
@include btn-social(#1ab7ea);
}
.btn-vk {
@include btn-social(#587ea3);
}
.btn-yahoo {
@include btn-social(#720e9e);
}

1
build/scss/_bootstrap_variables.scss Normal file
View File

@ -0,0 +1 @@
$var1: 3;

485
build/scss/_boxes.scss Normal file
View File

@ -0,0 +1,485 @@
/*
* Component: Box
* --------------
*/
.box {
position: relative;
@include border-radius($box-border-radius);
background: #ffffff;
border-top: 3px solid $box-default-border-top-color;
margin-bottom: 20px;
width: 100%;
box-shadow: $box-boxshadow;
// Box color variations
&.box-primary {
border-top-color: $light-blue;
}
&.box-info {
border-top-color: $aqua;
}
&.box-danger {
border-top-color: $red;
}
&.box-warning {
border-top-color: $yellow;
}
&.box-success {
border-top-color: $green;
}
&.box-default {
border-top-color: $gray;
}
// collapsed mode
&.collapsed-box {
.box-body,
.box-footer {
display: none;
}
}
.nav-stacked {
> li {
border-bottom: 1px solid $box-border-color;
margin: 0;
&:last-of-type {
border-bottom: none;
}
}
}
// fixed height to 300px
&.height-control {
.box-body {
max-height: 300px;
overflow: auto;
}
}
.border-right {
border-right: 1px solid $box-border-color;
}
.border-left {
border-left: 1px solid $box-border-color;
}
//SOLID BOX
//---------
//use this class to get a colored header and borders
&.box-solid {
border-top: 0;
> .box-header {
.btn.btn-default {
background: transparent;
}
.btn,
a {
&:hover {
background: rgba(0, 0, 0, 0.1);
}
}
}
// Box color variations
&.box-default {
@include box-solid-variant($gray, #444);
}
&.box-primary {
@include box-solid-variant($light-blue);
}
&.box-info {
@include box-solid-variant($aqua);
}
&.box-danger {
@include box-solid-variant($red);
}
&.box-warning {
@include box-solid-variant($yellow);
}
&.box-success {
@include box-solid-variant($green);
}
> .box-header > .box-tools .btn {
border: 0;
box-shadow: none;
}
// Fix font color for tiles
&[class*='bg'] {
> .box-header {
color: #fff;
}
}
}
//BOX GROUP
.box-group {
> .box {
margin-bottom: 5px;
}
}
// jQuery Knob in a box
.knob-label {
text-align: center;
color: #333;
font-weight: 100;
font-size: 12px;
margin-bottom: 0.3em;
}
}
.box,
.overlay-wrapper {
// Box overlay for LOADING STATE effect
> .overlay,
> .loading-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay {
z-index: 50;
background: rgba(255, 255, 255, 0.7);
@include border-radius($box-border-radius);
> .fa {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -15px;
color: #000;
font-size: 30px;
}
}
.overlay.dark {
background: rgba(0, 0, 0, 0.5);
}
}
//Add clearfix to header, body and footer
.box-header,
.box-body,
.box-footer {
@include clearfix();
}
//Box header
.box-header {
color: #444;
display: block;
padding: $box-padding;
position: relative;
//Add bottom border
&.with-border {
border-bottom: 1px solid $box-border-color;
.collapsed-box & {
border-bottom: none;
}
}
//Icons and box title
> .fa,
> .glyphicon,
> .ion,
.box-title {
display: inline-block;
font-size: 18px;
margin: 0;
line-height: 1;
}
> .fa,
> .glyphicon,
> .ion {
margin-right: 5px;
}
> .box-tools {
position: absolute;
right: 10px;
top: 5px;
[data-toggle="tooltip"] {
position: relative;
}
&.pull-right {
.dropdown-menu {
right: 0;
left: auto;
}
}
}
}
//Box Tools Buttons
.btn-box-tool {
padding: 5px;
font-size: 12px;
background: transparent;
color: darken($box-default-border-top-color, 20%);
.open &,
&:hover {
color: darken($box-default-border-top-color, 40%);
}
&.btn:active {
box-shadow: none;
}
}
//Box Body
.box-body {
@include border-radius-sides(0, 0, $box-border-radius, $box-border-radius);
padding: $box-padding;
.no-header & {
@include border-top-radius($box-border-radius);
}
// Tables within the box body
> .table {
margin-bottom: 0;
}
// Calendar within the box body
.fc {
margin-top: 5px;
}
.full-width-chart {
margin: -19px;
}
&.no-padding .full-width-chart {
margin: -9px;
}
.box-pane {
@include border-radius-sides(0, 0, $box-border-radius, 0);
}
.box-pane-right {
@include border-radius-sides(0, 0, 0, $box-border-radius);
}
}
//Box footer
.box-footer {
@include border-radius-sides(0, 0, $box-border-radius, $box-border-radius);
border-top: 1px solid $box-border-color;
padding: $box-padding;
background-color: $box-footer-bg;
}
.chart-legend {
@extend .list-unstyled;
margin: 10px 0;
> li {
@media (max-width: map-get($grid-breakpoints, sm)) {
float: left;
margin-right: 10px;
}
}
}
//Comment Box
.box-comments {
background: #f7f7f7;
.box-comment {
@include clearfix();
padding: 8px 0;
border-bottom: 1px solid #eee;
&:last-of-type {
border-bottom: 0;
}
&:first-of-type {
padding-top: 0;
}
img {
@extend .img-sm;
float: left;
}
}
.comment-text {
margin-left: 40px;
color: #555;
}
.username {
color: #444;
display: block;
font-weight: 600;
}
.text-muted {
font-weight: 400;
font-size: 12px;
}
}
//Widgets
//-----------
/* Widget: TODO LIST */
.todo-list {
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
// Todo list element
> li {
@include border-radius(2px);
padding: 10px;
background: #f4f4f4;
margin-bottom: 2px;
border-left: 2px solid #e6e7e8;
color: #444;
&:last-of-type {
margin-bottom: 0;
}
> input[type='checkbox'] {
margin: 0 10px 0 5px;
}
.text {
display: inline-block;
margin-left: 5px;
font-weight: 600;
}
// Time labels
.label {
margin-left: 10px;
font-size: 9px;
}
// Tools and options box
.tools {
display: none;
float: right;
color: $red;
// icons
> .fa, > .glyphicon, > .ion {
margin-right: 5px;
cursor: pointer;
}
}
&:hover .tools {
display: inline-block;
}
&.done {
color: #999;
.text {
text-decoration: line-through;
font-weight: 500;
}
.label {
background: $gray !important;
}
}
}
// Color varaity
.danger {
border-left-color: $red;
}
.warning {
border-left-color: $yellow;
}
.info {
border-left-color: $aqua;
}
.success {
border-left-color: $green;
}
.primary {
border-left-color: $light-blue;
}
.handle {
display: inline-block;
cursor: move;
margin: 0 5px;
}
}
// END TODO WIDGET
/* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
.chat {
padding: 5px 20px 5px 10px;
.item {
@include clearfix();
margin-bottom: 10px;
// The image
> img {
width: 40px;
height: 40px;
border: 2px solid transparent;
@include border-radius(50%);
}
> .online {
border: 2px solid $green;
}
> .offline {
border: 2px solid $red;
}
// The message body
> .message {
margin-left: 55px;
margin-top: -40px;
> .name {
display: block;
font-weight: 600;
}
}
// The attachment
> .attachment {
@include border-radius($attachment-border-radius);
background: #f4f4f4;
margin-left: 65px;
margin-right: 15px;
padding: 10px;
> h4 {
margin: 0 0 5px 0;
font-weight: 600;
font-size: 14px;
}
> p, > .filename {
font-weight: 600;
font-size: 13px;
font-style: italic;
margin: 0;
}
@include clearfix();
}
}
}
//END CHAT WIDGET
//Input in box
.box-input {
max-width: 200px;
}
//A fix for panels body text color when placed within
// a modal
.modal {
.panel-body {
color: #444;
}
}

168
build/scss/_buttons.scss Normal file
View File

@ -0,0 +1,168 @@
/*
* Component: Button
* -----------------
*/
.btn {
@include border-radius($btn-border-radius);
@include box-shadow($btn-boxshadow);
border: 1px solid transparent;
&.uppercase {
text-transform: uppercase
}
// Flat buttons
&.btn-flat {
@include border-radius(0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-width: 1px;
}
// Active state
&:active {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
&:focus {
outline: none;
}
// input file btn
&.btn-file {
position: relative;
overflow: hidden;
> input[type='file'] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
}
}
//Button color variations
.btn-default {
background-color: #f4f4f4;
color: #444;
border-color: #ddd;
&:hover,
&:active,
&.hover {
background-color: darken(#f4f4f4, 5%);
}
}
.btn-primary {
background-color: $light-blue;
border-color: darken($light-blue, 5%);
&:hover, &:active, &.hover {
background-color: darken($light-blue, 5%);
}
}
.btn-success {
background-color: $green;
border-color: darken($green, 5%);
&:hover, &:active, &.hover {
background-color: darken($green, 5%);
}
}
.btn-info {
background-color: $aqua;
border-color: darken($aqua, 5%);
&:hover, &:active, &.hover {
background-color: darken($aqua, 5%);
}
}
.btn-danger {
background-color: $red;
border-color: darken($red, 5%);
&:hover, &:active, &.hover {
background-color: darken($red, 5%);
}
}
.btn-warning {
background-color: $yellow;
border-color: darken($yellow, 5%);
&:hover, &:active, &.hover {
background-color: darken($yellow, 5%);
}
}
.btn-outline {
border: 1px solid #fff;
background: transparent;
color: #fff;
&:hover,
&:focus,
&:active {
color: rgba(255, 255, 255, 0.7);
border-color: rgba(255, 255, 255, 0.7);
}
}
.btn-link {
@include box-shadow(none);
}
//General .btn with bg class
.btn[class*='bg-']:hover {
@include box-shadow(inset 0 0 100px rgba(0, 0, 0, 0.2));
}
// Application buttons
.btn-app {
@include border-radius(3px);
position: relative;
padding: 15px 5px;
margin: 0 0 10px 10px;
min-width: 80px;
height: 60px;
text-align: center;
color: #666;
border: 1px solid #ddd;
background-color: #f4f4f4;
font-size: 12px;
//Icons within the btn
> .fa, > .glyphicon, > .ion {
font-size: 20px;
display: block;
}
&:hover {
background: #f4f4f4;
color: #444;
border-color: #aaa;
}
&:active, &:focus {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
//The badge
> .badge {
position: absolute;
top: -3px;
right: -10px;
font-size: 10px;
font-weight: 400;
}
}

48
build/scss/_callout.scss Normal file
View File

@ -0,0 +1,48 @@
/*
* Component: Callout
* ------------------
*/
// Base styles (regardless of theme)
.callout {
@include border-radius(3px);
margin: 0 0 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
a {
color: #fff;
text-decoration: underline;
&:hover {
color: #eee;
}
}
h4 {
margin-top: 0;
font-weight: 600;
}
p:last-child {
margin-bottom: 0;
}
code,
.highlight {
background-color: #fff;
}
// Themes for different contexts
&.callout-danger {
@extend .bg-red;
border-color: darken($red, 10%);
}
&.callout-warning {
@extend .bg-yellow;
border-color: darken($yellow, 10%);
}
&.callout-info {
@extend .bg-aqua;
border-color: darken($aqua, 10%);
}
&.callout-success {
@extend .bg-green;
border-color: darken($green, 10%);
}
}

18
build/scss/_carousel.scss Normal file
View File

@ -0,0 +1,18 @@
/*
* Component: Carousel
* -------------------
*/
.carousel-control {
&.left,
&.right {
background-image: none;
}
> .fa {
font-size: 40px;
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
margin-top: -20px;
}
}

289
build/scss/_control-sidebar.scss Normal file
View File

@ -0,0 +1,289 @@
/*
* Component: Control sidebar. By default, this is the right sidebar.
*/
//The sidebar's background control class
//This is a hack to make the background visible while scrolling
.control-sidebar-bg {
position: fixed;
z-index: 1000;
bottom: 0;
}
//Transitions
.control-sidebar-bg,
.control-sidebar {
top: 0;
right: -$control-sidebar-width;
width: $control-sidebar-width;
transition: right $transition-speed ease-in-out
}
//The sidebar
.control-sidebar {
position: absolute;
//padding-top: $navbar-height;
z-index: 1010;
//Fix position after header collapse
@media (max-width: map-get($grid-breakpoints, sm)) {
//padding-top: $navbar-height + 50;
}
//Tab panes
> .tab-content {
padding: 10px 15px;
}
//Open state with slide over content effect
&.control-sidebar-open {
&,
+ .control-sidebar-bg {
right: 0;
}
}
}
//Open without slide over content
.control-sidebar-open {
.control-sidebar-bg,
.control-sidebar {
right: 0;
}
@media (min-width: map-get($grid-breakpoints, sm)) {
.content-wrapper,
.right-side,
.main-footer {
margin-right: $control-sidebar-width;
}
}
}
//Control sidebar tabs
.nav-tabs.control-sidebar-tabs {
> li {
&:first-of-type > a {
&,
&:hover,
&:focus {
border-left-width: 0;
}
}
> a {
@include border-radius(0);
//Hover and active states
&,
&:hover {
border-top: none;
border-right: none;
border-left: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.icon {
font-size: 16px;
}
}
//Active state
&.active {
> a {
&,
&:hover,
&:focus,
&:active {
border-top: none;
border-right: none;
border-bottom: none;
}
}
}
}
//Remove responsiveness on small screens
@media (max-width: map-get($grid-breakpoints, sm)) {
display: table;
> li {
display: table-cell;
}
}
}
//Headings in the sidebar content
.control-sidebar-heading {
font-weight: 400;
font-size: 16px;
padding: 10px 0;
margin-bottom: 10px;
}
//Subheadings
.control-sidebar-subheading {
display: block;
font-weight: 400;
font-size: 14px;
}
//Control Sidebar Menu
.control-sidebar-menu {
list-style: none;
padding: 0;
margin: 0 -15px;
> li > a {
@include clearfix();
display: block;
padding: 10px 15px;
> .control-sidebar-subheading {
margin-top: 0;
}
}
.menu-icon {
float: left;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
line-height: 35px;
}
.menu-info {
margin-left: 45px;
margin-top: 3px;
> .control-sidebar-subheading {
margin: 0;
}
> p {
margin: 0;
font-size: 11px;
}
}
.progress {
margin: 0;
}
}
//Dark skin
.control-sidebar-dark {
color: $sidebar-dark-color;
// Background
&,
+ .control-sidebar-bg {
background: $sidebar-dark-bg;
}
// Sidebar tabs
.nav-tabs.control-sidebar-tabs {
border-bottom: darken($sidebar-dark-bg, 3%);
> li {
> a {
background: darken($sidebar-dark-bg, 5%);
color: $sidebar-dark-color;
//Hover and active states
&,
&:hover,
&:focus {
border-left-color: darken($sidebar-dark-bg, 7%);
border-bottom-color: darken($sidebar-dark-bg, 7%);
}
&:hover,
&:focus,
&:active {
background: darken($sidebar-dark-bg, 3%);
}
&:hover {
color: #fff;
}
}
//Active state
&.active {
> a {
&,
&:hover,
&:focus,
&:active {
background: $sidebar-dark-bg;
color: #fff;
}
}
}
}
}
//Heading & subheading
.control-sidebar-heading,
.control-sidebar-subheading {
color: #fff;
}
//Sidebar list
.control-sidebar-menu {
> li {
> a {
&:hover {
background: $sidebar-dark-hover-bg;
}
.menu-info {
> p {
color: $sidebar-dark-color;
}
}
}
}
}
}
//Light skin
.control-sidebar-light {
color: lighten($sidebar-light-color, 10%);
// Background
&,
+ .control-sidebar-bg {
background: $sidebar-light-bg;
border-left: 1px solid $gray;
}
// Sidebar tabs
.nav-tabs.control-sidebar-tabs {
border-bottom: $gray;
> li {
> a {
background: darken($sidebar-light-bg, 5%);
color: $sidebar-light-color;
//Hover and active states
&,
&:hover,
&:focus {
border-left-color: $gray;
border-bottom-color: $gray;
}
&:hover,
&:focus,
&:active {
background: darken($sidebar-light-bg, 3%);
}
}
//Active state
&.active {
> a {
&,
&:hover,
&:focus,
&:active {
background: $sidebar-light-bg;
color: #111;
}
}
}
}
}
//Heading & subheading
.control-sidebar-heading,
.control-sidebar-subheading {
color: #111;
}
//Sidebar list
.control-sidebar-menu {
margin-left: -14px;
> li {
> a {
&:hover {
background: $sidebar-light-hover-bg;
}
.menu-info {
> p {
color: lighten($sidebar-light-color, 10%);
}
}
}
}
}
}

174
build/scss/_core.scss Normal file
View File

@ -0,0 +1,174 @@
/*
* Core: General Layout Style
* -------------------------
*/
html,
body {
min-height: 100%;
.layout-boxed & {
height: 100%;
}
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
overflow-x: hidden;
overflow-y: auto;
}
/* Layout */
.wrapper {
@include clearfix();
min-height: 100%;
position: relative;
overflow: hidden;
.layout-boxed & {
max-width: 1250px;
margin: 0 auto;
min-height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
position: relative;
}
}
.layout-boxed {
background: url('${boxed-layout-bg-image-path}') repeat fixed;
}
/*
* Content Wrapper - contains the main content
* ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper ```
*/
.content-wrapper,
.right-side,
.main-footer {
//Using disposable variable to join statements with a comma
$transition-rule: $transition-speed $transition-fn,
margin $transition-speed $transition-fn;
transition: transform $transition-rule;
margin-left: $sidebar-width;
z-index: 820;
//Top nav layout
.layout-top-nav & {
margin-left: 0;
}
@media (max-width: map-get($grid-breakpoints, xs)) {
margin-left: 0;
}
//When opening the sidebar on large screens
.sidebar-collapse & {
@media (min-width: map-get($grid-breakpoints, sm)) {
margin-left: 0;
}
}
//When opening the sidebar on small screens
.sidebar-open & {
@media (max-width: map-get($grid-breakpoints, xs)) {
@include translate($sidebar-width, 0);
}
}
}
.content-wrapper,
.right-side {
min-height: 100%;
background-color: $body-bg;
z-index: 800;
}
.main-footer {
background: #fff;
padding: 15px;
color: #444;
border-top: 1px solid $gray;
}
/* Fixed layout */
.fixed {
.main-header,
.main-sidebar,
.left-side {
position: fixed;
}
.main-header {
top: 0;
right: 0;
left: 0;
}
.content-wrapper,
.right-side {
padding-top: 50px;
@media (max-width: $screen-header-collapse) {
padding-top: 100px;
}
}
&.layout-boxed {
.wrapper {
max-width: 100%;
}
}
}
body.hold-transition {
.content-wrapper,
.right-side,
.main-footer,
.main-sidebar,
.left-side,
.main-header > .navbar,
.main-header .logo {
/* Fix for IE */
transition: none;
}
}
/* Content */
.content {
min-height: 250px;
padding: 15px;
// @include container-fixed($grid-gutter-width);
}
/* H1 - H6 font */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Source Sans Pro', sans-serif;
}
/* General Links */
a {
color: $link-color;
}
a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
color: $link-hover-color;
}
/* Page Header */
.page-header {
margin: 10px 0 20px 0;
font-size: 22px;
> small {
color: #666;
display: block;
margin-top: 5px;
}
}

194
build/scss/_direct-chat.scss Normal file
View File

@ -0,0 +1,194 @@
/*
* Component: Direct Chat
* ----------------------
*/
.direct-chat {
.box-body {
@include border-bottom-radius(0);
position: relative;
overflow-x: hidden;
padding: 0;
}
&.chat-pane-open {
.direct-chat-contacts {
@include translate(0, 0);
}
}
}
.direct-chat-messages {
@include translate(0, 0);
padding: 10px;
height: 250px;
overflow: auto;
}
.direct-chat-msg,
.direct-chat-text {
display: block;
}
.direct-chat-msg {
@include clearfix();
margin-bottom: 10px;
}
.direct-chat-messages,
.direct-chat-contacts {
transition: transform .5s ease-in-out;
}
.direct-chat-text {
@include border-radius(5px);
position: relative;
padding: 5px 10px;
background: $direct-chat-default-msg-bg;
border: 1px solid $direct-chat-default-msg-border-color;
margin: 5px 0 0 50px;
color: $direct-chat-default-font-color;
//Create the arrow
&:after,
&:before {
position: absolute;
right: 100%;
top: 15px;
border: solid transparent;
border-right-color: $direct-chat-default-msg-border-color;
content: ' ';
height: 0;
width: 0;
pointer-events: none;
}
&:after {
border-width: 5px;
margin-top: -5px;
}
&:before {
border-width: 6px;
margin-top: -6px;
}
.right & {
margin-right: 50px;
margin-left: 0;
&:after,
&:before {
right: auto;
left: 100%;
border-right-color: transparent;
border-left-color: $direct-chat-default-msg-border-color;
}
}
}
.direct-chat-img {
@include border-radius(50%);
float: left;
width: 40px;
height: 40px;
.right & {
float: right;
}
}
.direct-chat-info {
display: block;
margin-bottom: 2px;
font-size: 12px;
}
.direct-chat-name {
font-weight: 600;
}
.direct-chat-timestamp {
color: #999;
}
//Direct chat contacts pane
.direct-chat-contacts-open {
.direct-chat-contacts {
@include translate(0, 0);
}
}
.direct-chat-contacts {
@include translate(101%, 0);
position: absolute;
top: 0;
bottom: 0;
height: 250px;
width: 100%;
background: #222d32;
color: #fff;
overflow: auto;
}
//Contacts list -- for displaying contacts in direct chat contacts pane
.contacts-list {
@extend .list-unstyled;
> li {
@include clearfix();
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px;
margin: 0;
&:last-of-type {
border-bottom: none;
}
}
}
.contacts-list-img {
@include border-radius(50%);
width: 40px;
float: left;
}
.contacts-list-info {
margin-left: 45px;
color: #fff;
}
.contacts-list-name,
.contacts-list-status {
display: block;
}
.contacts-list-name {
font-weight: 600;
}
.contacts-list-status {
font-size: 12px;
}
.contacts-list-date {
color: #aaa;
font-weight: normal;
}
.contacts-list-msg {
color: #999;
}
//Direct Chat Variants
.direct-chat-danger {
@include direct-chat-variant($red);
}
.direct-chat-primary {
@include direct-chat-variant($light-blue);
}
.direct-chat-warning {
@include direct-chat-variant($yellow);
}
.direct-chat-info {
@include direct-chat-variant($aqua);
}
.direct-chat-success {
@include direct-chat-variant($green);
}

350
build/scss/_dropdown.scss Normal file
View File

@ -0,0 +1,350 @@
/*
* Component: Dropdown menus
* -------------------------
*/
/*Dropdowns in general*/
.dropdown-menu {
box-shadow: none;
border-color: #eee;
> li > a {
color: #777;
}
> li > a > .glyphicon,
> li > a > .fa,
> li > a > .ion {
margin-right: 10px;
}
> li > a:hover {
background-color: lighten($gray, 5%);
color: #333;
}
> .divider {
background-color: #eee;
}
}
//Navbar custom dropdown menu
.navbar-nav > .notifications-menu,
.navbar-nav > .messages-menu,
.navbar-nav > .tasks-menu {
//fix width and padding
> .dropdown-menu {
> li {
position: relative;
}
width: 280px;
//Remove padding and margins
padding: 0 0 0 0;
margin: 0;
top: 100%;
}
//Define header class
> .dropdown-menu > li.header {
@include border-radius-sides(4px, 4px, 0, 0);
background-color: #ffffff;
padding: 7px 10px;
border-bottom: 1px solid #f4f4f4;
color: #444444;
font-size: 14px;
}
//Define footer class
> .dropdown-menu > li.footer > a {
@include border-radius-sides(0, 0, 4px, 4px);
font-size: 12px;
background-color: #fff;
padding: 7px 10px;
border-bottom: 1px solid #eeeeee;
color: #444 !important;
@media (max-width: map-get($grid-breakpoints, sm)) {
background: #fff !important;
color: #444 !important;
}
text-align: center;
//Hover state
&:hover {
text-decoration: none;
font-weight: normal;
}
}
//Clear inner menu padding and margins
> .dropdown-menu > li .menu {
max-height: 200px;
margin: 0;
padding: 0;
list-style: none;
overflow-x: hidden;
> li > a {
display: block;
white-space: nowrap; /* Prevent text from breaking */
border-bottom: 1px solid #f4f4f4;
// Hove state
&:hover {
background: #f4f4f4;
text-decoration: none;
}
}
}
}
//Notifications menu
.navbar-nav > .notifications-menu {
> .dropdown-menu > li .menu {
// Links inside the menu
> li > a {
color: #444444;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px;
// Icons inside the menu
> .glyphicon,
> .fa,
> .ion {
width: 20px;
}
}
}
}
//Messages menu
.navbar-nav > .messages-menu {
//Inner menu
> .dropdown-menu > li .menu {
// Messages menu item
> li > a {
margin: 0;
//line-height: 20px;
padding: 10px 10px;
// User image
> div > img {
margin: auto 10px auto auto;
width: 40px;
height: 40px;
}
// Message heading
> h4 {
padding: 0;
margin: 0 0 0 45px;
color: #444444;
font-size: 15px;
position: relative;
// Small for message time display
> small {
color: #999999;
font-size: 10px;
position: absolute;
top: 0;
right: 0;
}
}
> p {
margin: 0 0 0 45px;
font-size: 12px;
color: #888888;
}
@include clearfix();
}
}
}
//Tasks menu
.navbar-nav > .tasks-menu {
> .dropdown-menu > li .menu {
> li > a {
padding: 10px;
> h3 {
font-size: 14px;
padding: 0;
margin: 0 0 10px 0;
color: #666666;
}
> .progress {
padding: 0;
margin: 0;
}
}
}
}
//User menu
.navbar-nav > .user-menu {
> .dropdown-menu {
@include border-top-radius(0);
padding: 1px 0 0 0;
border-top-width: 0;
width: 280px;
&,
> .user-body {
@include border-bottom-radius(4px);
}
// Header menu
> li.user-header {
height: 175px;
padding: 10px;
text-align: center;
// User image
> img {
z-index: 5;
height: 90px;
width: 90px;
border: 3px solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0.2);
}
> p {
z-index: 5;
color: #fff;
color: rgba(255, 255, 255, 0.8);
font-size: 17px;
//text-shadow: 2px 2px 3px #333333;
margin-top: 10px;
> small {
display: block;
font-size: 12px;
}
}
}
// Menu Body
> .user-body {
padding: 15px;
border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #dddddd;
@include clearfix();
a {
color: #444 !important;
@media (max-width: map-get($grid-breakpoints, sm)) {
background: #fff !important;
color: #444 !important;
}
}
}
// Menu Footer
> .user-footer {
background-color: #f9f9f9;
padding: 10px;
@include clearfix();
.btn-default {
color: #666666;
&:hover {
@media (max-width: map-get($grid-breakpoints,sm)) {
background-color: #f9f9f9;
}
}
}
}
}
.user-image {
float: left;
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 10px;
margin-top: -2px;
@media (max-width: map-get($grid-breakpoints, xs)) {
float: none;
margin-right: 0;
margin-top: -8px;
line-height: 10px;
}
}
}
/* Add fade animation to dropdown menus by appending
the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
.open:not(.dropup) > .animated-dropdown-menu {
backface-visibility: visible !important;
@include animation(flipInX .7s both);
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
transform: perspective(400px);
}
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
}
}
/* Fix dropdown menu in navbars */
.navbar-custom-menu > .navbar-nav {
> li {
position: relative;
> .dropdown-menu {
position: absolute;
right: 0;
left: auto;
}
}
}
@media (max-width: map-get($grid-breakpoints, sm)) {
.navbar-custom-menu > .navbar-nav {
float: right;
> li {
position: static;
> .dropdown-menu {
position: absolute;
right: 5%;
left: auto;
border: 1px solid #ddd;
background: #fff;
}
}
}
}

96
build/scss/_forms.scss Normal file
View File

@ -0,0 +1,96 @@
/*
* Component: Form
* ---------------
*/
.form-control {
@include border-radius($input-radius);
box-shadow: none;
border-color: $gray;
&:focus {
border-color: $light-blue;
box-shadow: none;
}
&::-moz-placeholder,
&:-ms-input-placeholder,
&::-webkit-input-placeholder {
color: #bbb;
opacity: 1;
}
&:not(select) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
.form-group {
&.has-success {
label {
color: $green;
}
.form-control {
border-color: $green;
box-shadow: none;
}
}
&.has-warning {
label {
color: $yellow;
}
.form-control {
border-color: $yellow;
box-shadow: none;
}
}
&.has-error {
label {
color: $red;
}
.form-control {
border-color: $red;
box-shadow: none;
}
}
}
/* Input group */
.input-group {
.input-group-addon {
@include border-radius($input-radius);
border-color: $gray;
background-color: #fff;
}
}
/* button groups */
.btn-group-vertical {
.btn {
&.btn-flat:first-of-type, &.btn-flat:last-of-type {
@include border-radius(0);
}
}
}
.icheck > label {
padding-left: 0;
}
/* support Font Awesome icons in form-control */
.form-control-feedback.fa {
line-height: $input-height;
}
.input-lg + .form-control-feedback.fa,
.input-group-lg + .form-control-feedback.fa,
.form-group-lg .form-control + .form-control-feedback.fa {
line-height: $input-height-lg;
}
.input-sm + .form-control-feedback.fa,
.input-group-sm + .form-control-feedback.fa,
.form-group-sm .form-control + .form-control-feedback.fa {
line-height: $input-height-sm;
}

100
build/scss/_fullcalendar.scss Normal file
View File

@ -0,0 +1,100 @@
/*
* Plugin: Full Calendar
* ---------------------
*/
//Fullcalendar buttons
.fc-button {
background: #f4f4f4;
background-image: none;
color: #444;
border-color: #ddd;
border-bottom-color: #ddd;
&:hover,
&:active,
&.hover {
background-color: #e9e9e9;
}
}
// Calendar title
.fc-header-title h2 {
font-size: 15px;
line-height: 1.6em;
color: #666;
margin-left: 10px;
}
.fc-header-right {
padding-right: 10px;
}
.fc-header-left {
padding-left: 10px;
}
// Calendar table header cells
.fc-widget-header {
background: #fafafa;
}
.fc-grid {
width: 100%;
border: 0;
}
.fc-widget-header:first-of-type,
.fc-widget-content:first-of-type {
border-left: 0;
border-right: 0;
}
.fc-widget-header:last-of-type,
.fc-widget-content:last-of-type {
border-right: 0;
}
.fc-toolbar {
padding: $box-padding;
margin: 0;
}
.fc-day-number {
font-size: 20px;
font-weight: 300;
padding-right: 10px;
}
.fc-color-picker {
list-style: none;
margin: 0;
padding: 0;
> li {
float: left;
font-size: 30px;
margin-right: 5px;
line-height: 30px;
.fa {
transition: transform linear .3s;
&:hover {
@include rotate(30deg);
}
}
}
}
#add-new-event {
transition: all linear .3s;
}
.external-event {
padding: 5px 10px;
font-weight: bold;
margin-bottom: 4px;
box-shadow: $box-boxshadow;
text-shadow: $box-boxshadow;
border-radius: $box-border-radius;
cursor: move;
&:hover {
box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.2);
}
}

247
build/scss/_header.scss Normal file
View File

@ -0,0 +1,247 @@
/*
* Component: Main Header
* ----------------------
*/
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
//Navbar
> .navbar {
transition: margin-left $transition-speed $transition-fn;
margin-bottom: 0;
margin-left: $sidebar-width;
border: none;
padding: $navbar-padding-vertical $navbar-padding-horizontal;
border-radius: 0;
.layout-top-nav & {
margin-left: 0;
}
}
//Navbar search text input
#navbar-search-input.form-control {
background: rgba(255, 255, 255, 0.2);
border-color: transparent;
&:focus,
&:active {
border-color: rgba(0, 0, 0, 1);
background: rgba(255, 255, 255, 1);
}
&::-moz-placeholder {
color: #ccc;
opacity: 1;
}
&:-ms-input-placeholder {
color: #ccc;
}
&::-webkit-input-placeholder {
color: #ccc;
}
}
//Navbar Right Menu
.navbar-custom-menu,
.navbar-right {
float: right;
@media (max-width: map-get($grid-breakpoints, sm)) {
a {
color: inherit;
background: transparent;
}
}
}
.navbar-right {
@media (max-width: $screen-header-collapse) {
float: none;
.navbar-collapse & {
margin: 7.5px -15px;
}
> li {
color: inherit;
border: 0;
}
}
}
//Navbar toggle button
.sidebar-toggle {
float: left;
background-color: transparent;
background-image: none;
padding: $navbar-padding-vertical $navbar-padding-horizontal;
//Add the fontawesome bars icon
font-family: fontAwesome;
&:before {
content: "\f0c9";
}
&:hover {
color: #fff;
}
&:focus,
&:active {
background: transparent;
}
}
.sidebar-toggle .icon-bar {
display: none;
}
//Navbar User Menu
.navbar .nav > li.user > a {
> .fa,
> .glyphicon,
> .ion {
margin-right: 5px;
}
}
//Labels in navbar
.navbar .nav > li > a > .label {
position: absolute;
top: 9px;
right: 7px;
text-align: center;
font-size: 9px;
padding: 2px 3px;
line-height: 9px;
}
//Logo bar
.logo {
transition: width $transition-speed $transition-fn;
display: block;
float: left;
font-size: 20px;
line-height: 50px;
text-align: center;
width: $sidebar-width;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: $navbar-padding-vertical $navbar-padding-horizontal;
font-weight: 300;
overflow: hidden;
//Add support to sidebar mini by allowing the user to create
//2 logo designs. mini and lg
.logo-lg {
//should be visibile when sidebar isn't collapsed
display: block;
}
.logo-mini {
display: none;
}
}
//Navbar Brand. Alternative logo with layout-top-nav
.navbar-brand {
color: #fff;
}
}
// Content Header
.content-header {
position: relative;
padding: 15px 15px 0 15px;
// Header Text
> h1 {
margin: 0;
font-size: 24px;
> small {
font-size: 15px;
display: inline-block;
padding-left: 4px;
font-weight: 300;
}
}
> .breadcrumb {
float: right;
background: transparent;
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
padding: 7px 5px;
position: absolute;
top: 15px;
right: 10px;
@include border-radius(2px);
> li > a {
color: #444;
text-decoration: none;
display: inline-block;
> .fa, > .glyphicon, > .ion {
margin-right: 5px;
}
}
> li + li:before {
content: '>\00a0';
}
}
@media (max-width: map-get($grid-breakpoints, sm)) {
> .breadcrumb {
position: relative;
margin-top: 5px;
top: 0;
right: 0;
float: none;
background: $gray;
padding-left: 10px;
li:before {
color: darken($gray, 20%);
}
}
}
}
.navbar-toggle {
color: #fff;
border: 0;
margin: 0;
padding: $navbar-padding-vertical $navbar-padding-horizontal;
}
//Control navbar scaffolding on x-small screens
@media (max-width: map-get($grid-breakpoints, sm)) {
.navbar-custom-menu .navbar-nav > li {
float: left;
}
//Dont't let links get full width
.navbar-custom-menu .navbar-nav {
margin: 0;
float: left;
}
.navbar-custom-menu .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
// Collapse header
@media (max-width: $screen-header-collapse) {
.main-header {
position: relative;
.logo,
.navbar {
width: 100%;
float: none;
}
.navbar {
margin: 0;
}
.navbar-custom-menu {
float: right;
}
}
}
.navbar-collapse.pull-left {
@media (max-width: map-get($grid-breakpoints, sm)) {
float: none !important;
+ .navbar-custom-menu {
display: block;
position: absolute;
top: 0;
right: 40px;
}
}
}

75
build/scss/_info-box.scss Normal file
View File

@ -0,0 +1,75 @@
/*
* Component: Info Box
* -------------------
*/
.info-box {
display: block;
min-height: 90px;
background: #fff;
width: 100%;
box-shadow: $box-boxshadow;
@include border-radius(2px);
margin-bottom: 15px;
small {
font-size: 14px;
}
.progress {
background: rgba(0, 0, 0, 0.125);
margin: 5px -10px 5px -10px;
height: 2px;
&,
& .progress-bar {
@include border-radius(0);
}
.progress-bar {
background: #fff;
}
}
}
.info-box-icon {
@include border-radius-sides(2px, 0, 2px, 0);
display: block;
float: left;
height: 90px;
width: 90px;
text-align: center;
font-size: 45px;
line-height: 90px;
background: rgba(0, 0, 0, 0.2);
> img {
max-width: 100%;
}
}
.info-box-content {
padding: 5px 10px;
margin-left: 90px;
}
.info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
.progress-description,
.info-box-text {
display: block;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-box-text {
text-transform: uppercase;
}
.info-box-more {
display: block;
}
.progress-description {
margin: 0;
}

16
build/scss/_invoice.scss Normal file
View File

@ -0,0 +1,16 @@
/*
* Page: Invoice
* -------------
*/
.invoice {
position: relative;
background: #fff;
border: 1px solid #f4f4f4;
padding: 20px;
margin: 10px 25px;
}
.invoice-title {
margin-top: 0;
}

28
build/scss/_labels.scss Normal file
View File

@ -0,0 +1,28 @@
/*
* Component: Label
* ----------------
*/
.label-default {
background-color: $gray;
color: #444;
}
.label-danger {
@extend .bg-red;
}
.label-info {
@extend .bg-aqua;
}
.label-warning {
@extend .bg-yellow;
}
.label-primary {
@extend .bg-light-blue;
}
.label-success {
@extend .bg-green;
}

73
build/scss/_lockscreen.scss Normal file
View File

@ -0,0 +1,73 @@
/*
* Page: Lock Screen
* -----------------
*/
/* ADD THIS CLASS TO THE <BODY> TAG */
.lockscreen {
background: $gray;
}
.lockscreen-logo {
font-size: 35px;
text-align: center;
margin-bottom: 25px;
font-weight: 300;
a {
color: #444;
}
}
.lockscreen-wrapper {
max-width: 400px;
margin: 0 auto;
margin-top: 10%;
}
/* User name [optional] */
.lockscreen .lockscreen-name {
text-align: center;
font-weight: 600;
}
/* Will contain the image and the sign in form */
.lockscreen-item {
@include border-radius(4px);
padding: 0;
background: #fff;
position: relative;
margin: 10px auto 30px auto;
width: 290px;
}
/* User image */
.lockscreen-image {
@include border-radius(50%);
position: absolute;
left: -10px;
top: -25px;
background: #fff;
padding: 5px;
z-index: 10;
> img {
@include border-radius(50%);
width: 70px;
height: 70px;
}
}
/* Contains the password input and the login button */
.lockscreen-credentials {
margin-left: 70px;
.form-control {
border: 0;
}
.btn {
background-color: #fff;
border: 0;
padding: 0 10px;
}
}
.lockscreen-footer {
margin-top: 10px;
}

52
build/scss/_login_and_register.scss Normal file
View File

@ -0,0 +1,52 @@
/*
* Page: Login & Register
* ----------------------
*/
.login-logo,
.register-logo {
font-size: 35px;
text-align: center;
margin-bottom: 25px;
font-weight: 300;
a {
color: #444;
}
}
.login-page,
.register-page {
background: $gray;
}
.login-box,
.register-box {
width: 360px;
margin: 7% auto;
@media (max-width: map-get($grid-breakpoints, sm)) {
width: 90%;
margin-top: 20px;
}
}
.login-box-body,
.register-box-body {
background: #fff;
padding: 20px;
border-top: 0;
color: #666;
.form-control-feedback {
color: #777;
}
}
.login-box-msg,
.register-box-msg {
margin: 0;
text-align: center;
padding: 0 20px 20px 20px;
}
.social-auth-links {
margin: 10px 0;
}

88
build/scss/_mailbox.scss Normal file
View File

@ -0,0 +1,88 @@
/*
* Page: Mailbox
* -------------
*/
.mailbox-messages {
> .table {
margin: 0;
}
}
.mailbox-controls {
padding: 5px;
&.with-border {
border-bottom: 1px solid $box-border-color;
}
}
.mailbox-read-info {
border-bottom: 1px solid $box-border-color;
padding: 10px;
h3 {
font-size: 20px;
margin: 0;
}
h5 {
margin: 0;
padding: 5px 0 0 0;
}
}
.mailbox-read-time {
color: #999;
font-size: 13px;
}
.mailbox-read-message {
padding: 10px;
}
.mailbox-attachments {
@extend .list-unstyled;
li {
float: left;
width: 200px;
border: 1px solid #eee;
margin-bottom: 10px;
margin-right: 10px;
}
}
.mailbox-attachment-name {
font-weight: bold;
color: #666;
}
.mailbox-attachment-icon,
.mailbox-attachment-info,
.mailbox-attachment-size {
display: block;
}
.mailbox-attachment-info {
padding: 10px;
background: #f4f4f4;
}
.mailbox-attachment-size {
color: #999;
font-size: 12px;
}
.mailbox-attachment-icon {
text-align: center;
font-size: 65px;
color: #666;
padding: 20px 10px;
&.has-img {
padding: 0;
> img {
max-width: 100%;
height: auto;
}
}
}
.mailbox-attachment-close {
@extend .close;
}

606
build/scss/_miscellaneous.scss Normal file
View File

@ -0,0 +1,606 @@
/*
* General: Miscellaneous
* ----------------------
*/
// 10px padding and margins
.pad {
padding: 10px;
}
.margin {
margin: 10px;
}
.margin-bottom {
margin-bottom: 20px;
}
.margin-bottom-none {
margin-bottom: 0;
}
.margin-r-5 {
margin-right: 5px;
}
// Display inline
.inline {
display: inline;
}
// Description Blocks
.description-block {
display: block;
margin: 10px 0;
text-align: center;
&.margin-bottom {
margin-bottom: 25px;
}
> .description-header {
margin: 0;
padding: 0;
font-weight: 600;
font-size: 16px;
}
> .description-text {
text-transform: uppercase;
}
}
// Background colors
.bg-red,
.bg-yellow,
.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-green,
.bg-navy,
.bg-teal,
.bg-olive,
.bg-lime,
.bg-orange,
.bg-fuchsia,
.bg-purple,
.bg-maroon,
.bg-black,
.bg-red-active,
.bg-yellow-active,
.bg-aqua-active,
.bg-blue-active,
.bg-light-blue-active,
.bg-green-active,
.bg-navy-active,
.bg-teal-active,
.bg-olive-active,
.bg-lime-active,
.bg-orange-active,
.bg-fuchsia-active,
.bg-purple-active,
.bg-maroon-active,
.bg-black-active {
color: #fff !important;
}
.bg-gray {
color: #000;
background-color: $gray !important;
}
.bg-gray-light {
background-color: #f7f7f7;
}
.bg-black {
background-color: $black !important;
}
.bg-red {
background-color: $red !important;
}
.bg-yellow {
background-color: $yellow !important;
}
.bg-aqua {
background-color: $aqua !important;
}
.bg-blue {
background-color: $blue !important;
}
.bg-light-blue {
background-color: $light-blue !important;
}
.bg-green {
background-color: $green !important;
}
.bg-navy {
background-color: $navy !important;
}
.bg-teal {
background-color: $teal !important;
}
.bg-olive {
background-color: $olive !important;
}
.bg-lime {
background-color: $lime !important;
}
.bg-orange {
background-color: $orange !important;
}
.bg-fuchsia {
background-color: $fuchsia !important;
}
.bg-purple {
background-color: $purple !important;
}
.bg-maroon {
background-color: $maroon !important;
}
//Set of Active Background Colors
.bg-gray-active {
color: #000;
background-color: darken($gray, 10%) !important;
}
.bg-black-active {
background-color: darken($black, 10%) !important;
}
.bg-red-active {
background-color: darken($red , 6%) !important;
}
.bg-yellow-active {
background-color: darken($yellow , 6%) !important;
}
.bg-aqua-active {
background-color: darken($aqua , 6%) !important;
}
.bg-blue-active {
background-color: darken($blue , 10%) !important;
}
.bg-light-blue-active {
background-color: darken($light-blue , 6%) !important;
}
.bg-green-active {
background-color: darken($green , 5%) !important;
}
.bg-navy-active {
background-color: darken($navy , 2%) !important;
}
.bg-teal-active {
background-color: darken($teal , 5%) !important;
}
.bg-olive-active {
background-color: darken($olive , 5%) !important;
}
.bg-lime-active {
background-color: darken($lime , 5%) !important;
}
.bg-orange-active {
background-color: darken($orange , 5%) !important;
}
.bg-fuchsia-active {
background-color: darken($fuchsia , 5%) !important;
}
.bg-purple-active {
background-color: darken($purple , 5%) !important;
}
.bg-maroon-active {
background-color: darken($maroon , 3%) !important;
}
//Disabled!
[class^="bg-"].disabled {
opacity: .65;
}
// Text colors
.text-red {
color: $red !important;
}
.text-yellow {
color: $yellow !important;
}
.text-aqua {
color: $aqua !important;
}
.text-blue {
color: $blue !important;
}
.text-black {
color: $black !important;
}
.text-light-blue {
color: $light-blue !important;
}
.text-green {
color: $green !important;
}
.text-gray {
color: $gray !important;
}
.text-navy {
color: $navy !important;
}
.text-teal {
color: $teal !important;
}
.text-olive {
color: $olive !important;
}
.text-lime {
color: $lime !important;
}
.text-orange {
color: $orange !important;
}
.text-fuchsia {
color: $fuchsia !important;
}
.text-purple {
color: $purple !important;
}
.text-maroon {
color: $maroon !important;
}
.link-muted {
color: darken($gray, 30%);
&:hover,
&:focus {
color: darken($gray, 40%);
}
}
.link-black {
color: #666;
&:hover,
&:focus {
color: #999;
}
}
// Hide elements by display none only
.hide {
display: none !important;
}
// Remove borders
.no-border {
border: 0 !important;
}
// Remove padding
.no-padding {
padding: 0 !important;
}
// Remove margins
.no-margin {
margin: 0 !important;
}
// Remove box shadow
.no-shadow {
box-shadow: none !important;
}
// Unstyled List
.list-unstyled {
list-style: none;
margin: 0;
padding: 0;
}
.list-group-unbordered {
> .list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
}
// Remove border radius
.flat {
@include border-radius(0 !important);
}
.text-bold {
&, &.table td, &.table th {
font-weight: 700;
}
}
.text-sm {
font-size: 12px;
}
// _fix for sparkline tooltip
.jqstooltip {
padding: 5px !important;
width: auto !important;
height: auto !important;
}
// Gradient Background colors
.bg-teal-gradient {
@include gradient($teal, $teal, lighten($teal, 16%));
color: #fff;
}
.bg-light-blue-gradient {
@include gradient($light-blue, $light-blue, lighten($light-blue, 12%));
color: #fff;
}
.bg-blue-gradient {
@include gradient($blue, $blue, lighten($blue, 7%));
color: #fff;
}
.bg-aqua-gradient {
@include gradient($aqua, $aqua, lighten($aqua, 7%));
color: #fff;
}
.bg-yellow-gradient {
@include gradient($yellow, $yellow, lighten($yellow, 16%));
color: #fff;
}
.bg-purple-gradient {
@include gradient($purple, $purple, lighten($purple, 16%));
color: #fff;
}
.bg-green-gradient {
@include gradient($green, $green, lighten($green, 7%));
color: #fff;
}
.bg-red-gradient {
@include gradient($red, $red, lighten($red, 10%));
color: #fff;
}
.bg-black-gradient {
@include gradient($black, $black, lighten($black, 10%));
color: #fff;
}
.bg-maroon-gradient {
@include gradient($maroon, $maroon, lighten($maroon, 10%));
color: #fff;
}
//Description Block Extension
.description-block {
.description-icon {
font-size: 16px;
}
}
//Remove top padding
.no-pad-top {
padding-top: 0;
}
//Make position static
.position-static {
position: static !important;
}
//List utility classes
.list-header {
font-size: 15px;
padding: 10px 4px;
font-weight: bold;
color: #666;
}
.list-seperator {
height: 1px;
background: $box-border-color;
margin: 15px 0 9px 0;
}
.list-link {
> a {
padding: 4px;
color: #777;
&:hover {
color: #222;
}
}
}
//Light font weight
.font-light {
font-weight: 300;
}
//User block
.user-block {
@include clearfix();
img {
width: 40px;
height: 40px;
float: left;
}
.username,
.description,
.comment {
display: block;
margin-left: 50px;
}
.username {
font-size: 16px;
font-weight: 600;
}
.description {
color: #999;
font-size: 13px;
}
&.user-block-sm {
img {
@extend .img-sm;
}
.username,
.description,
.comment {
margin-left: 40px;
}
.username {
font-size: 14px;
}
}
}
//Image sizes
.img-sm,
.img-md,
.img-lg {
float: left;
}
.img-sm {
width: 30px !important;
height: 30px !important;
+ .img-push {
margin-left: 40px;
}
}
.img-md {
width: 60px;
height: 60px;
+ .img-push {
margin-left: 70px;
}
}
.img-lg {
width: 100px;
height: 100px;
+ .img-push {
margin-left: 110px;
}
}
// Image bordered
.img-bordered {
border: 3px solid $gray;
padding: 3px;
}
.img-bordered-sm {
border: 2px solid $gray;
padding: 2px;
}
//General attachemnt block
.attachment-block {
border: 1px solid $box-border-color;
padding: 5px;
margin-bottom: 10px;
background: #f7f7f7;
.attachment-img {
max-width: 100px;
max-height: 100px;
height: auto;
float: left;
}
.attachment-pushed {
margin-left: 110px;
}
.attachment-heading {
margin: 0;
}
.attachment-text {
color: #555;
}
}
.connectedSortable {
min-height: 100px;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.sort-highlight {
background: #f4f4f4;
border: 1px dashed #ddd;
margin-bottom: 10px;
}
.full-opacity-hover {
opacity: .65;
&:hover {
opacity: 1;
}
}
// Charts
.chart {
position: relative;
overflow: hidden;
width: 100%;
svg,
canvas {
width: 100% !important;
}
}

304
build/scss/_mixins.scss Normal file
View File

@ -0,0 +1,304 @@
//AdminLTE mixins
//===============
//Changes the color and the hovering properties of the navbar
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
background-color: $color;
//Navbar links
.nav > li > a {
color: $font-color;
}
.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.nav > .active > a {
background: $hover-bg;
color: $hover-color;
}
//Add color to the sidebar toggle button
.sidebar-toggle {
color: $font-color;
&:hover {
color: $hover-color;
background: $hover-bg;
}
}
}
//Logo color variation
@mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
background-color: $bg-color;
color: $color;
border-bottom: $border-bottom-width solid $border-bottom-color;
&:hover {
background-color: darken($bg-color, 1%);
}
}
//Box solid color variantion creator
@mixin box-solid-variant($color, $text-color: #fff) {
border: 1px solid $color;
> .box-header {
color: $text-color;
background: $color;
background-color: $color;
a,
.btn {
color: $text-color;
}
}
}
//Direct Chat Variant
@mixin direct-chat-variant($bg-color, $color: #fff) {
.right > .direct-chat-text {
background: $bg-color;
border-color: $bg-color;
color: $color;
&:after,
&:before {
border-left-color: $bg-color;
}
}
}
//border radius creator
@mixin border-radius($radius) {
border-radius: $radius;
}
@mixin translate($x, $y) {
-ms-transform: translate($x, $y); // IE9 only
transform: translate($x, $y);
}
//Different radius each side
@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right)
{
border-radius: $top-left $top-right $bottom-left $bottom-right;
}
@mixin rotate($value) {
-ms-transform: rotate($value);
transform: rotate($value);
}
@mixin animation($animation) {
animation: $animation;
}
//Gradient background
@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
background: $color;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
background: -ms-linear-gradient(bottom, $start, $stop);
background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
background: -o-linear-gradient($stop, $start);
}
//Added 2.1.0
//Skins Mixins
//Dark Sidebar Mixin
@mixin skin-dark-sidebar($link-hover-border-color) {
// Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
.wrapper,
.main-sidebar,
.left-side {
background-color: $sidebar-dark-bg;
}
//User Panel (resides in the sidebar)
.user-panel {
> .info, > .info > a {
color: #fff;
}
}
//Sidebar Menu. First level links
.sidebar-menu > li {
//Section Headning
&.header {
color: lighten($sidebar-dark-bg, 20%);
background: darken($sidebar-dark-bg, 4%);
}
//links
> a {
border-left: 3px solid transparent;
}
//Hover and active states
&:hover > a, &.active > a {
color: $sidebar-dark-hover-color;
background: $sidebar-dark-hover-bg;
border-left-color: $link-hover-border-color;
}
//First Level Submenu
> .treeview-menu {
margin: 0 1px;
background: $sidebar-dark-submenu-bg;
}
}
//All links within the sidebar menu
.sidebar a {
color: $sidebar-dark-color;
&:hover {
text-decoration: none;
}
}
//All submenus
.treeview-menu {
> li {
> a {
color: $sidebar-dark-submenu-color;
}
&.active > a, > a:hover {
color: $sidebar-dark-submenu-hover-color;
}
}
}
//The sidebar search form
.sidebar-form {
@include border-radius(3px);
border: 1px solid lighten($sidebar-dark-bg, 10%);
margin: 10px 10px;
input[type="text"], .btn {
box-shadow: none;
background-color: lighten($sidebar-dark-bg, 10%);
border: 1px solid transparent;
height: 35px;
transition: all $transition-speed $transition-fn;
}
input[type="text"] {
color: #666;
@include border-radius(2px, 0, 2px, 0);
&:focus, &:focus + .input-group-btn .btn {
background-color: #fff;
color: #666;
}
&:focus + .input-group-btn .btn {
border-left-color: #fff;
}
}
.btn {
color: #999;
@include border-radius(0, 2px, 0, 2px);
}
}
}
//Light Sidebar Mixin
@mixin skin-light-sidebar($icon-active-color) {
// Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
.wrapper,
.main-sidebar,
.left-side {
background-color: $sidebar-light-bg;
}
.content-wrapper,
.main-footer {
border-left: 1px solid $gray;
}
//User Panel (resides in the sidebar)
.user-panel {
> .info, > .info > a {
color: $sidebar-light-color;
}
}
//Sidebar Menu. First level links
.sidebar-menu > li {
transition: border-left-color .3s ease;
//border-left: 3px solid transparent;
//Section Headning
&.header {
color: lighten($sidebar-light-color, 25%);
background: $sidebar-light-bg;
}
//links
> a {
border-left: 3px solid transparent;
font-weight: 600;
}
//Hover and active states
&:hover > a,
&.active > a {
color: $sidebar-light-hover-color;
background: $sidebar-light-hover-bg;
}
&:hover > a {
}
&.active {
border-left-color: $icon-active-color;
> a {
font-weight: 600;
}
}
//First Level Submenu
> .treeview-menu {
background: $sidebar-light-submenu-bg;
}
}
//All links within the sidebar menu
.sidebar a {
color: $sidebar-light-color;
&:hover {
text-decoration: none;
}
}
//All submenus
.treeview-menu {
> li {
> a {
color: $sidebar-light-submenu-color;
}
&.active > a,
> a:hover {
color: $sidebar-light-submenu-hover-color;
}
&.active > a {
font-weight: 600;
}
}
}
//The sidebar search form
.sidebar-form {
@include border-radius(3px);
border: 1px solid $gray; //darken($sidebar-light-bg, 5%);
margin: 10px 10px;
input[type="text"],
.btn {
box-shadow: none;
background-color: #fff; //darken($sidebar-light-bg, 3%);
border: 1px solid transparent;
height: 35px;
transition: all $transition-speed $transition-fn;
}
input[type="text"] {
color: #666;
@include border-radius(2px, 0, 2px, 0);
&:focus,
&:focus + .input-group-btn .btn {
background-color: #fff;
color: #666;
}
&:focus + .input-group-btn .btn {
border-left-color: #fff;
}
}
.btn {
color: #999;
@include border-radius(0, 2px, 0, 2px);
}
}
@media (min-width: map-get($grid-breakpoints, sm)) {
&.sidebar-mini.sidebar-collapse {
.sidebar-menu > li > .treeview-menu {
border-left: 1px solid $gray;
}
}
}
}

80
build/scss/_modal.scss Normal file
View File

@ -0,0 +1,80 @@
/*
* Component: modal
* ----------------
*/
.modal {
background: rgba(0, 0, 0, 0.3);
}
.modal-content {
@include border-radius(0);
@include box-shadow(0 2px 3px rgba(0, 0, 0, .125));
border: 0;
@media (min-width: map-get($grid-breakpoints, sm)) {
@include box-shadow(0 2px 3px rgba(0, 0, 0, .125));
}
}
.modal-header {
border-bottom-color: $box-border-color;
}
.modal-footer {
border-top-color: $box-border-color;
}
//Modal variants
.modal-primary {
.modal-body {
@extend .bg-light-blue;
}
.modal-header,
.modal-footer {
@extend .bg-light-blue-active;
border-color: darken($light-blue, 10%);
}
}
.modal-warning {
.modal-body {
@extend .bg-yellow;
}
.modal-header,
.modal-footer {
@extend .bg-yellow-active;
border-color: darken($yellow, 10%);
}
}
.modal-info {
.modal-body {
@extend .bg-aqua;
}
.modal-header,
.modal-footer {
@extend .bg-aqua-active;
border-color: darken($aqua, 10%);
}
}
.modal-success {
.modal-body {
@extend .bg-green;
}
.modal-header,
.modal-footer {
@extend .bg-green-active;
border-color: darken($green, 10%);
}
}
.modal-danger {
.modal-body {
@extend .bg-red;
}
.modal-header,
.modal-footer {
@extend .bg-red-active;
border-color: darken($red, 10%);
}
}

226
build/scss/_navs.scss Normal file
View File

@ -0,0 +1,226 @@
/*
* Component: Nav
* --------------
*/
.nav {
> li > a:hover,
> li > a:active,
> li > a:focus {
color: #444;
background: #f7f7f7;
}
}
/* NAV PILLS */
.nav-pills {
> li > a {
@include border-radius(0);
border-top: 3px solid transparent;
color: #444;
> .fa,
> .glyphicon,
> .ion {
margin-right: 5px;
}
}
> li.active > a,
> li.active > a:hover,
> li.active > a:focus {
border-top-color: $light-blue;
}
> li.active > a {
font-weight: 600;
}
}
/* NAV STACKED */
.nav-stacked {
> li > a {
@include border-radius(0);
border-top: 0;
border-left: 3px solid transparent;
color: #444;
}
> li.active > a,
> li.active > a:hover {
background: transparent;
color: #444;
border-top: 0;
border-left-color: $light-blue;
}
> li.header {
border-bottom: 1px solid #ddd;
color: #777;
margin-bottom: 10px;
padding: 5px 10px;
text-transform: uppercase;
}
}
/* NAV TABS */
.nav-tabs-custom {
margin-bottom: 20px;
background: #fff;
box-shadow: $box-boxshadow;
border-radius: $box-border-radius;
> .nav-tabs {
margin: 0;
border-bottom-color: #f4f4f4;
@include border-top-radius($box-border-radius);
> li {
border-top: 3px solid transparent;
margin-bottom: -2px;
> a {
color: #444;
@include border-radius(0);
&.text-muted {
color: #999;
}
&,
&:hover {
background: transparent;
margin: 0;
}
&:hover {
color: #999;
}
}
&:not(.active) {
> a:hover,
> a:focus,
> a:active {
border-color: transparent;
}
}
margin-right: 5px;
}
> li.active {
border-top-color: $light-blue;
& > a,
&:hover > a {
background-color: #fff;
color: #444;
}
> a {
border-top-color: transparent;
border-left-color: #f4f4f4;
border-right-color: #f4f4f4;
}
}
> li:first-of-type {
margin-left: 0;
&.active {
> a {
border-left-color: transparent;
}
}
}
//Pulled to the right
&.pull-right {
float: none !important;
> li {
float: right;
}
> li:first-of-type {
margin-right: 0;
> a {
border-left-width: 1px;
}
&.active {
> a {
border-left-color: #f4f4f4;
border-right-color: transparent;
}
}
}
}
> li.header {
line-height: 35px;
padding: 0 10px;
font-size: 20px;
color: #444;
> .fa,
> .glyphicon,
> .ion {
margin-right: 5px;
}
}
}
> .tab-content {
background: #fff;
padding: 10px;
@include border-bottom-radius($box-border-radius);
}
.dropdown.open > a {
&:active,
&:focus {
background: transparent;
color: #999;
}
}
// Tab color variations
&.tab-primary {
> .nav-tabs {
> li.active {
border-top-color: $light-blue;
}
}
}
&.tab-info {
> .nav-tabs {
> li.active {
border-top-color: $aqua;
}
}
}
&.tab-danger {
> .nav-tabs {
> li.active {
border-top-color: $red;
}
}
}
&.tab-warning {
> .nav-tabs {
> li.active {
border-top-color: $yellow;
}
}
}
&.tab-success {
> .nav-tabs {
> li.active {
border-top-color: $green;
}
}
}
&.tab-default {
> .nav-tabs {
> li.active {
border-top-color: $gray;
}
}
}
}
/* PAGINATION */
.pagination {
> li > a {
background: #fafafa;
color: #666;
}
&.pagination-flat {
> li > a {
@include border-radius(0 !important);
}
}
}

54
build/scss/_print.scss Normal file
View File

@ -0,0 +1,54 @@
/*
* Misc: print
* -----------
*/
@media print {
//Add to elements that you do not want to show when printing
.no-print {
display: none !important;
}
//Elements that we want to hide when printing
.main-sidebar,
.left-side,
.main-header,
.content-header {
@extend .no-print;
}
//This is the only element that should appear, so let's remove the margins
.content-wrapper,
.right-side,
.main-footer {
margin-left: 0 !important;
min-height: 0 !important;
@include translate(0, 0);
}
.fixed .content-wrapper,
.fixed .right-side {
padding-top: 0 !important;
}
//Invoice printing
.invoice {
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
.invoice-col {
float: left;
width: 33.3333333%;
}
//Make sure table content displays properly
.table-responsive {
overflow: auto;
> .table tr th,
> .table tr td {
white-space: normal !important;
}
}
}

45
build/scss/_products.scss Normal file
View File

@ -0,0 +1,45 @@
/*
* Component: Products List
* ------------------------
*/
.products-list {
list-style: none;
margin: 0;
padding: 0;
> .item {
@include border-radius($box-border-radius);
@include box-shadow($box-boxshadow);
@include clearfix();
padding: 10px 0;
background: #fff;
}
.product-img {
float: left;
img {
width: 50px;
height: 50px;
}
}
.product-info {
margin-left: 60px;
}
.product-title {
font-weight: 600;
}
.product-description {
display: block;
color: #999;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.product-list-in-box > .item {
@include box-shadow(none);
@include border-radius(0);
border-bottom: 1px solid $box-border-color;
&:last-of-type {
border-bottom-width: 0;
}
}

31
build/scss/_profile.scss Normal file
View File

@ -0,0 +1,31 @@
/*
* Page: Profile
* -------------
*/
.profile-user-img {
margin: 0 auto;
width: 100px;
padding: 3px;
border: 3px solid $gray;
}
.profile-username {
font-size: 21px;
margin-top: 5px;
}
.post {
border-bottom: 1px solid $gray;
margin-bottom: 15px;
padding-bottom: 15px;
color: #666;
&:last-of-type {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.user-block {
margin-bottom: 15px;
}
}

112
build/scss/_progress-bars.scss Normal file
View File

@ -0,0 +1,112 @@
/*
* Component: Progress Bar
* -----------------------
*/
//General CSS
.progress,
.progress > .progress-bar {
@include box-shadow(none);
&, .progress-bar {
@include border-radius($progress-bar-border-radius);
}
}
/* size variation */
.progress.sm,
.progress-sm {
height: 10px;
&, .progress-bar {
@include border-radius($progress-bar-sm-border-radius);
}
}
.progress.xs,
.progress-xs {
height: 7px;
&, .progress-bar {
@include border-radius($progress-bar-xs-border-radius);
}
}
.progress.xxs,
.progress-xxs {
height: 3px;
&, .progress-bar {
@include border-radius($progress-bar-xs-border-radius);
}
}
/* Vertical bars */
.progress.vertical {
position: relative;
width: 30px;
height: 200px;
display: inline-block;
margin-right: 10px;
> .progress-bar {
width: 100%;
position: absolute;
bottom: 0;
}
//Sizes
&.sm,
&.progress-sm {
width: 20px;
}
&.xs,
&.progress-xs {
width: 10px;
}
&.xxs,
&.progress-xxs {
width: 3px;
}
}
//Progress Groups
.progress-group {
.progress-text {
font-weight: 600;
}
.progress-number {
float: right;
}
}
/* Remove margins from progress bars when put in a table */
.table {
tr > td .progress {
margin: 0;
}
}
/*
// Variations
// -------------------------
.progress-bar-light-blue,
.progress-bar-primary {
@include progress-bar-variant($light-blue);
}
.progress-bar-green,
.progress-bar-success {
@include progress-bar-variant($green);
}
.progress-bar-aqua,
.progress-bar-info {
@include progress-bar-variant($aqua);
}
.progress-bar-yellow,
.progress-bar-warning {
@include progress-bar-variant($yellow);
}
.progress-bar-red,
.progress-bar-danger {
@include progress-bar-variant($red);
}
*/

117
build/scss/_select2.scss Normal file
View File

@ -0,0 +1,117 @@
/*
* Plugin: Select2
* ---------------
*/
//Signle select
.select2-container--default,
.select2-selection {
&.select2-container--focus,
&:focus,
&:active {
outline: none;
}
.select2-selection--single {
border: 1px solid $gray;
border-radius: $input-radius;
padding: 6px 12px;
height: 34px;
}
}
.select2-container--default.select2-container--open {
border-color: $light-blue;
}
.select2-dropdown {
border: 1px solid $gray;
border-radius: $input-radius;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: $light-blue;
color: white;
}
.select2-results__option {
padding: 6px 12px;
user-select: none;
-webkit-user-select: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 0;
padding-right: 0;
height: auto;
margin-top: -4px;
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-right: 6px;
padding-left: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 28px;
right: 3px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
margin-top: 0;
}
.select2-dropdown,
.select2-search--inline {
.select2-search__field {
border: 1px solid $gray;
&:focus {
outline: none;
border: 1px solid $light-blue;
}
}
}
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd;
&,
&:hover {
color: #444;
}
}
//Multiple select
.select2-container--default {
.select2-selection--multiple {
border: 1px solid $gray;
border-radius: $input-radius;
&:focus {
border-color: $light-blue;
}
}
&.select2-container--focus .select2-selection--multiple {
border-color: $gray;
}
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: $light-blue;
border-color: darken($light-blue, 5%);
padding: 1px 10px;
color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
margin-right: 5px;
color: rgba(255, 255, 255, 0.7);
&:hover {
color: #fff;
}
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-right: 10px;
}

141
build/scss/_sidebar-mini.scss Normal file
View File

@ -0,0 +1,141 @@
/*
* Component: Sidebar Mini
*/
//Add sidebar-mini class to the body tag to activate this feature
.sidebar-mini {
//Sidebar mini should work only on devices larger than $screen-sm
@media (min-width: map-get($grid-breakpoints, sm)) {
//When the sidebar is collapsed...
&.sidebar-collapse {
//Apply the new margining to the main content and footer
.content-wrapper,
.right-side,
.main-footer {
margin-left: 50px !important;
z-index: 840;
}
//Modify the sidebar to shrink instead of disappearing
.main-sidebar {
//Don't go away! Just shrink
@include translate(0, 0);
width: 50px !important;
z-index: 850;
}
.sidebar-menu {
> li {
position: relative;
> a {
margin-right: 0;
}
> a > span {
border-top-right-radius: 4px;
}
&:not(.treeview) {
> a > span {
border-bottom-right-radius: 4px;
}
}
> .treeview-menu {
//Add some padding to the treeview menu
padding-top: 5px;
padding-bottom: 5px;
border-bottom-right-radius: 4px;
}
//Show menu items on hover
&:hover {
> a {
//overflow: visible;
}
> a > span:not(.pull-right),
> .treeview-menu {
display: block !important;
position: absolute;
width: $sidebar-width - 50;
left: 50px;
}
//position the header & treeview menus
> a > span {
top: 0;
margin-left: -3px;
padding: 12px 5px 12px 20px;
background-color: inherit;
}
> .treeview-menu {
top: 44px;
margin-left: 0;
}
}
}
}
//Make the sidebar links, menus, labels, badges
//and angle icons disappear
.main-sidebar .user-panel > .info,
.sidebar-form,
.sidebar-menu > li > a > span,
.sidebar-menu > li > .treeview-menu,
.sidebar-menu > li > a > .pull-right,
.sidebar-menu li.header {
display: none !important;
-webkit-transform: translateZ(0);
}
.main-header {
//Let's make the logo also shrink and the mini logo to appear
.logo {
width: 50px;
> .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
> .logo-lg {
display: none;
}
}
//Since the logo got smaller, we need to fix the navbar's position
.navbar {
margin-left: 50px;
}
}
}
}
}
//A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu,
.main-sidebar .user-panel,
.sidebar-menu > li.header {
white-space: nowrap;
overflow: hidden;
}
.sidebar-menu:hover {
overflow: visible;
}
.sidebar-form,
.sidebar-menu > li.header {
overflow: hidden;
text-overflow: clip;
}
.sidebar-menu li > a {
position: relative;
> .pull-right {
position: absolute;
right: 10px;
top: 50%;
margin-top: -7px;
}
}

158
build/scss/_sidebar.scss Normal file
View File

@ -0,0 +1,158 @@
/*
* Component: Sidebar
* ------------------
*/
//Main Sidebar
// ``` .left-side has been deprecated as of 2.0.0 in favor of .main-sidebar ```
.main-sidebar,
.left-side {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
min-height: 100%;
width: $sidebar-width;
z-index: 810;
//Using disposable variable to join statements with a comma
$transition-rule: $transition-speed $transition-fn,
width $transition-speed $transition-fn;
transition: transform $transition-rule;
@media (max-width: $screen-header-collapse) {
padding-top: 100px;
}
@media (max-width: map-get($grid-breakpoints, xs)) {
@include translate(-$sidebar-width, 0);
}
.sidebar-collapse & {
@media (min-width: map-get($grid-breakpoints, sm)) {
@include translate(-$sidebar-width, 0);
}
}
.sidebar-open & {
@media (max-width: map-get($grid-breakpoints, xs)) {
@include translate(0, 0);
}
}
}
.sidebar {
padding-bottom: 10px;
}
// remove border from form
.sidebar-form {
input:focus {
border-color: transparent;
}
}
//Sidebar user panel
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
@include clearfix();
> .image > img {
width: 100%;
max-width: 45px;
height: auto;
}
> .info {
padding: 5px 5px 5px 15px;
line-height: 1;
position: absolute;
left: 55px;
> p {
font-weight: 600;
margin-bottom: 9px;
}
> a {
text-decoration: none;
padding-right: 5px;
margin-top: 3px;
font-size: 11px;
> .fa,
> .ion,
> .glyphicon {
margin-right: 3px;
}
}
}
}
// Sidebar menu
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
//First Level
> li {
position: relative;
margin: 0;
padding: 0;
> a {
padding: 12px 5px 12px 15px;
display: block;
> .fa,
> .glyphicon,
> .ion {
width: 20px;
}
}
.label,
.badge {
margin-top: 3px;
margin-right: 5px;
}
}
li.header {
padding: 10px 25px 10px 15px;
font-size: 12px;
}
li > a > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px;
}
li.active {
> a > .fa-angle-left {
@include rotate(-90deg);
}
> .treeview-menu {
display: block;
}
}
// Tree view menu
.treeview-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
padding-left: 5px;
.treeview-menu {
padding-left: 20px;
}
> li {
margin: 0;
> a {
padding: 5px 5px 5px 15px;
display: block;
font-size: 14px;
> .fa,
> .glyphicon,
> .ion {
width: 20px;
}
> .fa-angle-left,
> .fa-angle-down {
width: auto;
}
}
}
}
}

89
build/scss/_small-box.scss Normal file
View File

@ -0,0 +1,89 @@
/*
* Component: Small Box
* --------------------
*/
.small-box {
@include border-radius(2px);
position: relative;
display: block;
margin-bottom: 20px;
box-shadow: $box-boxshadow;
// content wrapper
> .inner {
padding: 10px;
}
> .small-box-footer {
position: relative;
text-align: center;
padding: 3px 0;
color: #fff;
color: rgba(255, 255, 255, 0.8);
display: block;
z-index: 10;
background: rgba(0, 0, 0, 0.1);
text-decoration: none;
&:hover {
color: #fff;
background: rgba(0, 0, 0, 0.15);
}
}
h3 {
font-size: 38px;
font-weight: bold;
margin: 0 0 10px 0;
white-space: nowrap;
padding: 0;
}
p {
font-size: 15px;
> small {
display: block;
color: #f9f9f9;
font-size: 13px;
margin-top: 5px;
}
}
h3, p {
z-index: 5px;
}
// the icon
.icon {
transition: all $transition-speed linear;
position: absolute;
top: -10px;
right: 10px;
z-index: 0;
font-size: 90px;
color: rgba(0, 0, 0, 0.15);
}
// Small box hover state
&:hover {
text-decoration: none;
color: #f9f9f9;
// Animate icons on small box hover
.icon {
font-size: 95px;
}
}
}
@media (max-width: map-get($grid-breakpoints, xs)) {
// No need for icons on very small devices
.small-box {
text-align: center;
.icon {
display: none;
}
p {
font-size: 12px;
}
}
}

78
build/scss/_social-widgets.scss Normal file
View File

@ -0,0 +1,78 @@
/*
* Component: Social Widgets
* -------------------------
*/
//General widget style
.box-widget {
border: none;
position: relative;
}
//User Widget Style 1
.widget-user {
//User name container
.widget-user-header {
padding: 20px;
height: 120px;
@include border-top-radius($box-border-radius);
}
//User name
.widget-user-username {
margin-top: 0;
margin-bottom: 5px;
font-size: 25px;
font-weight: 300;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
//User single line description
.widget-user-desc {
margin-top: 0;
}
//User image container
.widget-user-image {
position: absolute;
top: 65px;
left: 50%;
margin-left: -45px;
> img {
width: 90px;
height: auto;
border: 3px solid #fff;
}
}
.box-footer {
padding-top: 30px;
}
}
//User Widget Style 2
.widget-user-2 {
//User name container
.widget-user-header {
padding: 20px;
@include border-top-radius($box-border-radius);
}
//User name
.widget-user-username {
margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 300;
}
//User single line description
.widget-user-desc {
margin-top: 0;
}
.widget-user-username,
.widget-user-desc {
margin-left: 75px;
}
//User image container
.widget-user-image {
> img {
width: 65px;
height: auto;
float: left;
}
}
}

71
build/scss/_table.scss Normal file
View File

@ -0,0 +1,71 @@
/*
* Component: Table
* ----------------
*/
.table {
//Cells
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border-top: 1px solid $box-border-color;
}
}
}
//thead cells
> thead > tr > th {
border-bottom: 2px solid $box-border-color;
}
//progress bars in tables
tr td .progress {
margin-top: 5px;
}
}
//Bordered Table
.table-bordered {
border: 1px solid $box-border-color;
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
border: 1px solid $box-border-color;
}
}
}
> thead > tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
.table.no-border {
&,
td,
th {
border: 0;
}
}
/* .text-center in tables */
table.text-center {
&, td, th {
text-align: center;
}
}
.table.align {
th {
text-align: left;
}
td {
text-align: right;
}
}

110
build/scss/_timeline.scss Normal file
View File

@ -0,0 +1,110 @@
/*
* Component: Timeline
* -------------------
*/
.timeline {
position: relative;
margin: 0 0 30px 0;
padding: 0;
list-style: none;
// The line
&:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: #ddd;
left: 31px;
margin: 0;
@include border-radius(2px);
}
> li {
position: relative;
margin-right: 10px;
margin-bottom: 15px;
@include clearfix();
// The content
> .timeline-item {
@include box-shadow($box-boxshadow);
@include border-radius($box-border-radius);
margin-top: 0;
background: #fff;
color: #444;
margin-left: 60px;
margin-right: 15px;
padding: 0;
position: relative;
// The time and header
> .time {
color: #999;
float: right;
padding: 10px;
font-size: 12px;
}
> .timeline-header {
margin: 0;
color: #555;
border-bottom: 1px solid $box-border-color;
padding: 10px;
font-size: 16px;
line-height: 1.1;
> a {
font-weight: 600;
}
}
// Item body and footer
> .timeline-body, > .timeline-footer {
padding: 10px;
}
}
// The icons
> .fa,
> .glyphicon,
> .ion {
width: 30px;
height: 30px;
font-size: 15px;
line-height: 30px;
position: absolute;
color: #666;
background: $gray;
border-radius: 50%;
text-align: center;
left: 18px;
top: 0;
}
}
// Time label
> .time-label {
> span {
font-weight: 600;
padding: 5px;
display: inline-block;
background-color: #fff;
@include border-radius(4px);
}
}
}
.timeline-inverse {
> li {
> .timeline-item {
background: #f0f0f0;
border: 1px solid #ddd;
@include box-shadow(none);
> .timeline-header {
border-bottom-color: #ddd;
}
}
}
}

42
build/scss/_users-list.scss Normal file
View File

@ -0,0 +1,42 @@
/*
* Component: Users List
* ---------------------
*/
.users-list {
@extend .list-unstyled;
> li {
width: 25%;
float: left;
padding: 10px;
text-align: center;
img {
@include border-radius(50%);
max-width: 100%;
height: auto;
}
> a:hover {
&,
.users-list-name {
color: #999;
}
}
}
}
.users-list-name,
.users-list-date {
display: block;
}
.users-list-name {
font-weight: 600;
color: #444;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.users-list-date {
color: #999;
font-size: 12px;
}

123
build/scss/_variables.scss Normal file
View File

@ -0,0 +1,123 @@
//AdminLTE 2 Variables.less
//=========================
//PATHS
//--------------------------------------------------------
$path-to-bootstrap-sass: "../../bower_components/bootstrap/scss";
$boxed-layout-bg-image-path: "../img/boxed-bg.jpg";
//COLORS
//--------------------------------------------------------
//Primary
$light-blue: #3c8dbc;
//Danger
$red: #dd4b39;
//Success
$green: #00a65a;
//Info
$aqua: #00c0ef;
//Warning
$yellow: #f39c12;
$blue: #0073b7;
$navy: #001F3F;
$teal: #39CCCC;
$olive: #3D9970;
$lime: #01FF70;
$orange: #FF851B;
$fuchsia: #F012BE;
$purple: #605ca8;
$maroon: #D81B60;
$black: #111;
$gray: #d2d6de;
//LAYOUT
//--------------------------------------------------------
//Side bar and logo width
$sidebar-width: 230px;
//Boxed layout maximum width
$boxed-layout-max-width: 1024px;
//When the logo should go to the top of the screen
$screen-header-collapse: map-get($grid-breakpoints, xs);
//Link colors (Aka: <a> tags)
$link-color: $light-blue;
$link-hover-color: lighten($link-color, 15%);
//Body background (Affects main content background only)
$body-bg: #ecf0f5;
//SIDEBAR SKINS
//--------------------------------------------------------
//Dark sidebar
$sidebar-dark-bg: #222d32;
$sidebar-dark-hover-bg: darken($sidebar-dark-bg, 2%);
$sidebar-dark-color: lighten($sidebar-dark-bg, 60%);
$sidebar-dark-hover-color: #fff;
$sidebar-dark-submenu-bg: lighten($sidebar-dark-bg, 5%);
$sidebar-dark-submenu-color: lighten($sidebar-dark-submenu-bg, 40%);
$sidebar-dark-submenu-hover-color: #fff;
//Light sidebar
$sidebar-light-bg: #f9fafc;
$sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%);
$sidebar-light-color: #444;
$sidebar-light-hover-color: #000;
$sidebar-light-submenu-bg: $sidebar-light-hover-bg;
$sidebar-light-submenu-color: #777;
$sidebar-light-submenu-hover-color: #000;
//CONTROL SIDEBAR
//--------------------------------------------------------
$control-sidebar-width: $sidebar-width;
//BOXES
//--------------------------------------------------------
$box-border-color: #f4f4f4;
$box-border-radius: 3px;
$box-footer-bg: #fff;
$box-boxshadow: 0 1px 1px rgba(0, 0, 0, 0.125);
$box-padding: 10px;
//Box variants
$box-default-border-top-color: #d2d6de;
//BUTTONS
//--------------------------------------------------------
$btn-boxshadow: none;
//PROGRESS BARS
//--------------------------------------------------------
$progress-bar-border-radius: 1px;
$progress-bar-sm-border-radius: 1px;
$progress-bar-xs-border-radius: 1px;
//FORMS
//--------------------------------------------------------
$input-radius: 0;
//BUTTONS
//--------------------------------------------------------
//Border radius for non flat buttons
$btn-border-radius: 3px;
//DIRECT CHAT
//--------------------------------------------------------
$direct-chat-height: 250px;
$direct-chat-default-msg-bg: $gray;
$direct-chat-default-font-color: #444;
$direct-chat-default-msg-border-color: $gray;
//CHAT WIDGET
//--------------------------------------------------------
$attachment-border-radius: 3px;
//TRANSITIONS SETTINGS
//--------------------------------------------------------
//Transition global options
$transition-speed: 3s;
$transition-fn: ease-in-out;
//cubic-bezier(0.32,1.25,0.375,1.15);

13
build/scss/skins/_all-skins.scss Normal file
View File

@ -0,0 +1,13 @@
//All skins in one file
@import "skin-blue.less";
@import "skin-blue-light.less";
@import "skin-black.less";
@import "skin-black-light.less";
@import "skin-green.less";
@import "skin-green-light.less";
@import "skin-red.less";
@import "skin-red-light.less";
@import "skin-yellow.less";
@import "skin-yellow-light.less";
@import "skin-purple.less";
@import "skin-purple-light.less";

64
build/scss/skins/skin-black-light.scss Normal file
View File

@ -0,0 +1,64 @@
/*
* Skin: Black
* -----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
/* skin-black navbar */
.skin-black-light {
//Navbar & Logo
.main-header {
@include box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
.navbar-toggle {
color: #333;
}
.navbar-brand {
color: #333;
border-right: 1px solid #eee;
}
> .navbar {
@include navbar-variant(#fff; #333; #999; #fff);
> .sidebar-toggle {
color: #333;
border-right: 1px solid #eee;
}
.navbar-nav {
> li > a {
border-right: 1px solid #eee;
}
}
.navbar-custom-menu .navbar-nav,
.navbar-right {
> li {
> a {
border-left: 1px solid #eee;
border-right-width: 0;
}
}
}
}
> .logo {
@include logo-variant(#fff; #333);
border-right: 1px solid #eee;
@media (max-width: $screen-header-collapse) {
@include logo-variant(#222; #fff);
border-right: none;
}
}
li.user-header {
background-color: #222;
}
}
//Content Header
.content-header {
background: transparent;
box-shadow: none;
}
//Create the sidebar skin
@include skin-light-sidebar(#fff);
}

64
build/scss/skins/skin-black.scss Normal file
View File

@ -0,0 +1,64 @@
/*
* Skin: Black
* -----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
/* skin-black navbar */
.skin-black {
//Navbar & Logo
.main-header {
@include box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
.navbar-toggle {
color: #333;
}
.navbar-brand {
color: #333;
border-right: 1px solid #eee;
}
> .navbar {
@include navbar-variant(#fff; #333; #999; #fff);
> .sidebar-toggle {
color: #333;
border-right: 1px solid #eee;
}
.navbar-nav {
> li > a {
border-right: 1px solid #eee;
}
}
.navbar-custom-menu .navbar-nav,
.navbar-right {
> li {
> a {
border-left: 1px solid #eee;
border-right-width: 0;
}
}
}
}
> .logo {
@include logo-variant(#fff; #333);
border-right: 1px solid #eee;
@media (max-width: $screen-header-collapse) {
@include logo-variant(#222; #fff);
border-right: none;
}
}
li.user-header {
background-color: #222;
}
}
//Content Header
.content-header {
background: transparent;
box-shadow: none;
}
//Create the sidebar skin
@include skin-dark-sidebar(#fff);
}

61
build/scss/skins/skin-blue-light.scss Normal file
View File

@ -0,0 +1,61 @@
/*
* Skin: Blue
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-blue-light {
//Navbar
.main-header {
.navbar {
@include navbar-variant($light-blue; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($light-blue, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($light-blue, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant($light-blue);
}
li.user-header {
background-color: $light-blue;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-light-sidebar($light-blue);
.main-footer {
border-top-color: $gray;
}
}
.skin-blue.layout-top-nav .main-header > .logo {
@include logo-variant($light-blue);
}

58
build/scss/skins/skin-blue.scss Normal file
View File

@ -0,0 +1,58 @@
/*
* Skin: Blue
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-blue {
//Navbar
.main-header {
.navbar {
@include navbar-variant($light-blue; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($light-blue, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($light-blue, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant(darken($light-blue, 5%));
}
li.user-header {
background-color: $light-blue;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-dark-sidebar($light-blue);
}
.skin-blue.layout-top-nav .main-header > .logo {
@include logo-variant($light-blue);
}

55
build/scss/skins/skin-green-light.scss Normal file
View File

@ -0,0 +1,55 @@
/*
* Skin: Green
* -----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-green-light {
//Navbar
.main-header {
.navbar {
@include navbar-variant($green; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($green, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($green, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant($green);
}
li.user-header {
background-color: $green;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-light-sidebar($green);
}

55
build/scss/skins/skin-green.scss Normal file
View File

@ -0,0 +1,55 @@
/*
* Skin: Green
* -----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-green {
//Navbar
.main-header {
.navbar {
@include navbar-variant($green; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($green, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($green, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant(darken($green, 5%));
}
li.user-header {
background-color: $green;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-dark-sidebar($green);
}

54
build/scss/skins/skin-purple-light.scss Normal file
View File

@ -0,0 +1,54 @@
/*
* Skin: Purple
* ------------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-purple-light {
//Navbar
.main-header {
.navbar {
@include navbar-variant($purple; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($purple, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($purple, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant($purple);
}
li.user-header {
background-color: $purple;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-light-sidebar($purple);
}

54
build/scss/skins/skin-purple.scss Normal file
View File

@ -0,0 +1,54 @@
/*
* Skin: Purple
* ------------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-purple {
//Navbar
.main-header {
.navbar {
@include navbar-variant($purple; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($purple, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($purple, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant(darken($purple, 5%));
}
li.user-header {
background-color: $purple;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-dark-sidebar($purple);
}

54
build/scss/skins/skin-red-light.scss Normal file
View File

@ -0,0 +1,54 @@
/*
* Skin: Red
* ---------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-red-light {
//Navbar
.main-header {
.navbar {
@include navbar-variant($red; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($red, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($red, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant($red);
}
li.user-header {
background-color: $red;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-light-sidebar($red);
}

54
build/scss/skins/skin-red.scss Normal file
View File

@ -0,0 +1,54 @@
/*
* Skin: Red
* ---------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-red {
//Navbar
.main-header {
.navbar {
@include navbar-variant($red; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($red, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($red, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant(darken($red, 5%));
}
li.user-header {
background-color: $red;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-dark-sidebar($red);
}

54
build/scss/skins/skin-yellow-light.scss Normal file
View File

@ -0,0 +1,54 @@
/*
* Skin: Yellow
* ------------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-yellow-light {
//Navbar
.main-header {
.navbar {
@include navbar-variant($yellow; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($yellow, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($yellow, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant($yellow);
}
li.user-header {
background-color: $yellow;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-light-sidebar($yellow);
}

54
build/scss/skins/skin-yellow.scss Normal file
View File

@ -0,0 +1,54 @@
/*
* Skin: Yellow
* ------------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@import "../mixins.less";
.skin-yellow {
//Navbar
.main-header {
.navbar {
@include navbar-variant($yellow; #fff);
.sidebar-toggle {
color: #fff;
&:hover {
background-color: darken($yellow, 5%);
}
}
@media (max-width: $screen-header-collapse) {
.dropdown-menu {
li {
&.divider {
background-color: rgba(255, 255, 255, 0.1);
}
a {
color: #fff;
&:hover {
background: darken($yellow, 5%);
}
}
}
}
}
}
//Logo
.logo {
@include logo-variant(darken($yellow, 5%));
}
li.user-header {
background-color: $yellow;
}
}
//Content Header
.content-header {
background: transparent;
}
//Create the sidebar skin
@include skin-dark-sidebar($yellow);
}