mirror of https://github.com/lukechilds/lnbits.git
Arc
5 years ago
committed by
GitHub
GitHub
75 changed files with 6766 additions and 0 deletions
@ -0,0 +1,68 @@ |
|||
'use strict'; |
|||
module.exports = function (grunt) { |
|||
// load all grunt tasks
|
|||
grunt.loadNpmTasks('grunt-contrib-less'); |
|||
grunt.loadNpmTasks('grunt-contrib-watch'); |
|||
grunt.loadNpmTasks('grunt-contrib-uglify'); |
|||
grunt.initConfig({ |
|||
watch: { |
|||
// if any .less file changes in directory "build/less/" run the "less"-task.
|
|||
files: ["build/less/*.less", "build/less/skins/*.less", "dist/js/app.js"], |
|||
tasks: ["less", "uglify"] |
|||
}, |
|||
// "less"-task configuration
|
|||
//this task will compile all less files upon saving to create both AdminLTE.css and AdminLTE.min.css
|
|||
less: { |
|||
//Development not compressed
|
|||
development: { |
|||
options: { |
|||
//Wether to compress or not
|
|||
compress: false |
|||
}, |
|||
files: { |
|||
// compilation.css : source.less
|
|||
"dist/css/AdminLTE.css": "build/less/AdminLTE.less", |
|||
"dist/css/skins/skin-blue.css": "build/less/skins/skin-blue.less", |
|||
"dist/css/skins/skin-black.css": "build/less/skins/skin-black.less", |
|||
"dist/css/skins/skin-yellow.css": "build/less/skins/skin-yellow.less", |
|||
"dist/css/skins/skin-green.css": "build/less/skins/skin-green.less", |
|||
"dist/css/skins/skin-red.css": "build/less/skins/skin-red.less", |
|||
"dist/css/skins/skin-purple.css": "build/less/skins/skin-purple.less", |
|||
"dist/css/skins/_all-skins.css": "build/less/skins/_all-skins.less" |
|||
} |
|||
}, |
|||
//production compresses version
|
|||
production: { |
|||
options: { |
|||
//Wether to compress or not
|
|||
compress: true |
|||
}, |
|||
files: { |
|||
// compilation.css : source.less
|
|||
"dist/css/AdminLTE.min.css": "build/less/AdminLTE.less", |
|||
"dist/css/skins/skin-blue.min.css": "build/less/skins/skin-blue.less", |
|||
"dist/css/skins/skin-black.min.css": "build/less/skins/skin-black.less", |
|||
"dist/css/skins/skin-yellow.min.css": "build/less/skins/skin-yellow.less", |
|||
"dist/css/skins/skin-green.min.css": "build/less/skins/skin-green.less", |
|||
"dist/css/skins/skin-red.min.css": "build/less/skins/skin-red.less", |
|||
"dist/css/skins/skin-purple.min.css": "build/less/skins/skin-purple.less", |
|||
"dist/css/skins/_all-skins.min.css": "build/less/skins/_all-skins.less" |
|||
} |
|||
} |
|||
}, |
|||
//Uglify task info. Compress the js files.
|
|||
uglify: { |
|||
options: { |
|||
mangle: true, |
|||
preserveComments: 'some' |
|||
}, |
|||
my_target: { |
|||
files: { |
|||
'dist/js/app.min.js': ['dist/js/app.js'] |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
// the default task (running "grunt" in console) is "watch"
|
|||
grunt.registerTask('default', ['watch']); |
|||
}; |
|||
@ -0,0 +1,145 @@ |
|||
Introduction |
|||
============ |
|||
|
|||
**AdminLTE** -- is a fully responsive admin template. Based on **Bootstrap 3** framework. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops. Check out the live preview now and see for yourself. |
|||
|
|||
**Download & Preview on [Almsaeed Studio](http://almsaeedstudio.com)** |
|||
|
|||
Looking for Premium Templates? |
|||
------------------------------ |
|||
**Almsaeed studio just opened a new premium templates page. Hand picked to insure the best quality and the most affordable prices. Visit http://almsaeedstudio.com/premium for more information.** |
|||
|
|||
|
|||
!["AdminLTE Presentation"] (http://almsaeedstudio.com/AdminLTE2.png "AdminLTE Presentation") |
|||
|
|||
**AdminLTE** has been carefully coded with clear comments in all of its JS, LESS and HTML files. LESS has been used to increase code customizability. |
|||
|
|||
Installation |
|||
------------ |
|||
There are multiple ways to install AdminLTE. |
|||
|
|||
####Download: |
|||
|
|||
Download from Github or [visit Almsaeed Studio](http://almsaeedstudio.com) and download the lateset release. |
|||
|
|||
####Using The Command Line: |
|||
|
|||
**Github** |
|||
|
|||
- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)). |
|||
- Clone to your machine |
|||
``` |
|||
git clone https://github.com/YOUR_USERNAME/AdminLTE.git" |
|||
``` |
|||
|
|||
**Bower** |
|||
|
|||
``` |
|||
bower install git://github.com/almasaeed2010/AdminLTE.git |
|||
``` |
|||
|
|||
**Composer** |
|||
|
|||
``` |
|||
composer require "almasaeed2010/adminlte=~2.0" |
|||
``` |
|||
|
|||
Documentation |
|||
------------- |
|||
Visit the [online documentation](http://almsaeedstudio.com/themes/AdminLTE/documentation/index.html) for the most |
|||
updated guide. Information will be added on a weekly basis. |
|||
|
|||
Browser Support |
|||
--------------- |
|||
- IE 9+ |
|||
- Firefox (latest) |
|||
- Chrome (latest) |
|||
- Safari (latest) |
|||
- Opera (latest) |
|||
|
|||
Contribution |
|||
------------ |
|||
Contribution are always **welcome and recommended**! Here is how: |
|||
|
|||
- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)). |
|||
- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git" |
|||
- Make your changes |
|||
- Create a pull request |
|||
|
|||
#### Contribution Requirements: |
|||
|
|||
- When you contribute, you agree to give a non-exclusive license to Almsaeed Studio to use that contribution in any context as we (Almsaeed Studio) see appropriate. |
|||
- If you use content provided by another party, it must be appropriately licensed using an [open source](http://opensource.org/licenses) license. |
|||
- Contributions are only accepted through Github pull requests. |
|||
- Finally, contributed code must work in all supported browsers (see above for browser support). |
|||
|
|||
License |
|||
------- |
|||
AdminLTE is an open source project by [Almsaeed Studio](http://almsaeedstudio.com) that is licensed under [MIT](http://opensource.org/licenses/MIT). Almsaeed Studio |
|||
reserves the right to change the license of future releases. |
|||
|
|||
Legacy Realeases |
|||
---------------- |
|||
AdminLTE 1.x can be easily upgraded to 2.x using [this guide](http://almsaeedstudio.com/themes/AdminLTE/documentation/index.html#browsers), but if you intend to keep using AdminLTE 1.x, you can download the latest release from the [releases](https://github.com/almasaeed2010/AdminLTE/releases) section above. |
|||
|
|||
Change log |
|||
---------- |
|||
**v2.0:** |
|||
|
|||
- Major layout bug fixes |
|||
- Change in layout mark up |
|||
- Added transitions to the sidebar |
|||
- New skins and modified previous skins |
|||
- Change in color scheme to a more complementing scheme |
|||
- Added footer support |
|||
- Removed pace.js from the main app.js |
|||
- Added support for collapsed sidebar as an initial state (add .sidebar-collapse to the body tag) |
|||
- Added boxed layout (.layout-boxed) |
|||
- Enhanced consistency in padding and margining |
|||
- Updated Bootstrap to 3.3.2 |
|||
- Fixed navbar dropdown menu on small screens positioning issues. |
|||
- Updated Ion Icons to 2.0.0 |
|||
- Updated FontAwesome to 4.3.0 |
|||
- Added ChartJS 1.0.1 |
|||
- Removed iCheck dependency |
|||
- Created Dashboard 2.0 |
|||
- Created new Chat widget (DirectChat) |
|||
- Added transitions to DirectChat |
|||
- Added contacts pane to DirectChat |
|||
- Changed .right-side to .content-wrapper |
|||
- Changed .navbar-right to .navbar-custom-menu |
|||
- Removed unused files |
|||
- Updated lockscreen style (HTML markup changed!) |
|||
- Updated Login & Registration pages (HTML markup changed!) |
|||
- Updated buttons style. |
|||
- Enhanced border-radius consistency |
|||
- Added mailbox: inbox, read, and compose pages |
|||
- Bootstrap & jQuery are now hosted locally |
|||
- Created documentation. |
|||
|
|||
**ver 1.2:** |
|||
|
|||
- Fixed the sidebar scroll issue when using the fixed layout. |
|||
- Added [Bootstrap Social Buttons](http://lipis.github.io/bootstrap-social/ "Bootstrap Social") plugin. |
|||
- Fixed RequireJS bug. Thanks to [StaticSphere](https://github.com/StaticSphere "github user"). |
|||
|
|||
**ver 1.1:** |
|||
|
|||
- Added new skin. class: .skin-black |
|||
- Added [pace](http://github.hubspot.com/pace/docs/welcome/ "pace") plugin. |
|||
|
|||
Image Credits |
|||
------------- |
|||
[Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd) |
|||
|
|||
[Graphicsfuel](http://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/) |
|||
|
|||
[Pickaface](http://pickaface.net/) |
|||
|
|||
[Unsplash](https://unsplash.com/) |
|||
|
|||
Donations |
|||
--------- |
|||
Donations are **greatly appreciated!** |
|||
|
|||
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=629XCUSXBHCBC "Donate") |
|||
@ -0,0 +1,39 @@ |
|||
// Mixins |
|||
// -------------------------------------------------- |
|||
|
|||
// Utilities |
|||
@import "mixins/hide-text.less"; |
|||
@import "mixins/opacity.less"; |
|||
@import "mixins/image.less"; |
|||
@import "mixins/labels.less"; |
|||
@import "mixins/reset-filter.less"; |
|||
@import "mixins/resize.less"; |
|||
@import "mixins/responsive-visibility.less"; |
|||
@import "mixins/size.less"; |
|||
@import "mixins/tab-focus.less"; |
|||
@import "mixins/text-emphasis.less"; |
|||
@import "mixins/text-overflow.less"; |
|||
@import "mixins/vendor-prefixes.less"; |
|||
|
|||
// Components |
|||
@import "mixins/alerts.less"; |
|||
@import "mixins/buttons.less"; |
|||
@import "mixins/panels.less"; |
|||
@import "mixins/pagination.less"; |
|||
@import "mixins/list-group.less"; |
|||
@import "mixins/nav-divider.less"; |
|||
@import "mixins/forms.less"; |
|||
@import "mixins/progress-bar.less"; |
|||
@import "mixins/table-row.less"; |
|||
|
|||
// Skins |
|||
@import "mixins/background-variant.less"; |
|||
@import "mixins/border-radius.less"; |
|||
@import "mixins/gradients.less"; |
|||
|
|||
// Layout |
|||
@import "mixins/clearfix.less"; |
|||
@import "mixins/center-block.less"; |
|||
@import "mixins/nav-vertical-align.less"; |
|||
@import "mixins/grid-framework.less"; |
|||
@import "mixins/grid.less"; |
|||
@ -0,0 +1,14 @@ |
|||
// Alerts |
|||
|
|||
.alert-variant(@background; @border; @text-color) { |
|||
background-color: @background; |
|||
border-color: @border; |
|||
color: @text-color; |
|||
|
|||
hr { |
|||
border-top-color: darken(@border, 5%); |
|||
} |
|||
.alert-link { |
|||
color: darken(@text-color, 10%); |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
// Contextual backgrounds |
|||
|
|||
.bg-variant(@color) { |
|||
background-color: @color; |
|||
a&:hover { |
|||
background-color: darken(@color, 10%); |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
// Single side border-radius |
|||
|
|||
.border-top-radius(@radius) { |
|||
border-top-right-radius: @radius; |
|||
border-top-left-radius: @radius; |
|||
} |
|||
.border-right-radius(@radius) { |
|||
border-bottom-right-radius: @radius; |
|||
border-top-right-radius: @radius; |
|||
} |
|||
.border-bottom-radius(@radius) { |
|||
border-bottom-right-radius: @radius; |
|||
border-bottom-left-radius: @radius; |
|||
} |
|||
.border-left-radius(@radius) { |
|||
border-bottom-left-radius: @radius; |
|||
border-top-left-radius: @radius; |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
// Button variants |
|||
// |
|||
// Easily pump out default styles, as well as :hover, :focus, :active, |
|||
// and disabled options for all buttons |
|||
|
|||
.button-variant(@color; @background; @border) { |
|||
color: @color; |
|||
background-color: @background; |
|||
border-color: @border; |
|||
|
|||
&:hover, |
|||
&:focus, |
|||
&.focus, |
|||
&:active, |
|||
&.active, |
|||
.open > .dropdown-toggle& { |
|||
color: @color; |
|||
background-color: darken(@background, 10%); |
|||
border-color: darken(@border, 12%); |
|||
} |
|||
&:active, |
|||
&.active, |
|||
.open > .dropdown-toggle& { |
|||
background-image: none; |
|||
} |
|||
&.disabled, |
|||
&[disabled], |
|||
fieldset[disabled] & { |
|||
&, |
|||
&:hover, |
|||
&:focus, |
|||
&.focus, |
|||
&:active, |
|||
&.active { |
|||
background-color: @background; |
|||
border-color: @border; |
|||
} |
|||
} |
|||
|
|||
.badge { |
|||
color: @background; |
|||
background-color: @color; |
|||
} |
|||
} |
|||
|
|||
// Button sizes |
|||
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { |
|||
padding: @padding-vertical @padding-horizontal; |
|||
font-size: @font-size; |
|||
line-height: @line-height; |
|||
border-radius: @border-radius; |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
// Center-align a block level element |
|||
|
|||
.center-block() { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
// Clearfix |
|||
// |
|||
// For modern browsers |
|||
// 1. The space content is one way to avoid an Opera bug when the |
|||
// contenteditable attribute is included anywhere else in the document. |
|||
// Otherwise it causes space to appear at the top and bottom of elements |
|||
// that are clearfixed. |
|||
// 2. The use of `table` rather than `block` is only necessary if using |
|||
// `:before` to contain the top-margins of child elements. |
|||
// |
|||
// Source: http://nicolasgallagher.com/micro-clearfix-hack/ |
|||
|
|||
.clearfix() { |
|||
&:before, |
|||
&:after { |
|||
content: " "; // 1 |
|||
display: table; // 2 |
|||
} |
|||
&:after { |
|||
clear: both; |
|||
} |
|||
} |
|||
@ -0,0 +1,85 @@ |
|||
// Form validation states |
|||
// |
|||
// Used in forms.less to generate the form validation CSS for warnings, errors, |
|||
// and successes. |
|||
|
|||
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { |
|||
// Color the label and help text |
|||
.help-block, |
|||
.control-label, |
|||
.radio, |
|||
.checkbox, |
|||
.radio-inline, |
|||
.checkbox-inline, |
|||
&.radio label, |
|||
&.checkbox label, |
|||
&.radio-inline label, |
|||
&.checkbox-inline label { |
|||
color: @text-color; |
|||
} |
|||
// Set the border and box shadow on specific inputs to match |
|||
.form-control { |
|||
border-color: @border-color; |
|||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work |
|||
&:focus { |
|||
border-color: darken(@border-color, 10%); |
|||
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); |
|||
.box-shadow(@shadow); |
|||
} |
|||
} |
|||
// Set validation states also for addons |
|||
.input-group-addon { |
|||
color: @text-color; |
|||
border-color: @border-color; |
|||
background-color: @background-color; |
|||
} |
|||
// Optional feedback icon |
|||
.form-control-feedback { |
|||
color: @text-color; |
|||
} |
|||
} |
|||
|
|||
|
|||
// Form control focus state |
|||
// |
|||
// Generate a customized focus state and for any input with the specified color, |
|||
// which defaults to the `@input-border-focus` variable. |
|||
// |
|||
// We highly encourage you to not customize the default value, but instead use |
|||
// this to tweak colors on an as-needed basis. This aesthetic change is based on |
|||
// WebKit's default styles, but applicable to a wider range of browsers. Its |
|||
// usability and accessibility should be taken into account with any change. |
|||
// |
|||
// Example usage: change the default blue border and shadow to white for better |
|||
// contrast against a dark gray background. |
|||
.form-control-focus(@color: @input-border-focus) { |
|||
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6); |
|||
&:focus { |
|||
border-color: @color; |
|||
outline: 0; |
|||
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); |
|||
} |
|||
} |
|||
|
|||
// Form control sizing |
|||
// |
|||
// Relative text size, padding, and border-radii changes for form controls. For |
|||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>` |
|||
// element gets special love because it's special, and that's a fact! |
|||
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { |
|||
height: @input-height; |
|||
padding: @padding-vertical @padding-horizontal; |
|||
font-size: @font-size; |
|||
line-height: @line-height; |
|||
border-radius: @border-radius; |
|||
|
|||
select& { |
|||
height: @input-height; |
|||
line-height: @input-height; |
|||
} |
|||
|
|||
textarea&, |
|||
select[multiple]& { |
|||
height: auto; |
|||
} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
// Gradients |
|||
|
|||
#gradient { |
|||
|
|||
// Horizontal gradient, from left to right |
|||
// |
|||
// Creates two color stops, start and end, by specifying a color and position for each color stop. |
|||
// Color stops are not available in IE9 and below. |
|||
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { |
|||
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ |
|||
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12 |
|||
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ |
|||
background-repeat: repeat-x; |
|||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down |
|||
} |
|||
|
|||
// Vertical gradient, from top to bottom |
|||
// |
|||
// Creates two color stops, start and end, by specifying a color and position for each color stop. |
|||
// Color stops are not available in IE9 and below. |
|||
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { |
|||
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ |
|||
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 |
|||
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ |
|||
background-repeat: repeat-x; |
|||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down |
|||
} |
|||
|
|||
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) { |
|||
background-repeat: repeat-x; |
|||
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ |
|||
background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 |
|||
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ |
|||
} |
|||
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { |
|||
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); |
|||
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); |
|||
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); |
|||
background-repeat: no-repeat; |
|||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback |
|||
} |
|||
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { |
|||
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); |
|||
background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color); |
|||
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); |
|||
background-repeat: no-repeat; |
|||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback |
|||
} |
|||
.radial(@inner-color: #555; @outer-color: #333) { |
|||
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); |
|||
background-image: radial-gradient(circle, @inner-color, @outer-color); |
|||
background-repeat: no-repeat; |
|||
} |
|||
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) { |
|||
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); |
|||
background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); |
|||
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); |
|||
} |
|||
} |
|||
@ -0,0 +1,91 @@ |
|||
// Framework grid generation |
|||
// |
|||
// Used only by Bootstrap to generate the correct number of grid classes given |
|||
// any value of `@grid-columns`. |
|||
|
|||
.make-grid-columns() { |
|||
// Common styles for all sizes of grid columns, widths 1-12 |
|||
.col(@index) { // initial |
|||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; |
|||
.col((@index + 1), @item); |
|||
} |
|||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo |
|||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; |
|||
.col((@index + 1), ~"@{list}, @{item}"); |
|||
} |
|||
.col(@index, @list) when (@index > @grid-columns) { // terminal |
|||
@{list} { |
|||
position: relative; |
|||
// Prevent columns from collapsing when empty |
|||
min-height: 1px; |
|||
// Inner gutter via padding |
|||
padding-left: (@grid-gutter-width / 2); |
|||
padding-right: (@grid-gutter-width / 2); |
|||
} |
|||
} |
|||
.col(1); // kickstart it |
|||
} |
|||
|
|||
.float-grid-columns(@class) { |
|||
.col(@index) { // initial |
|||
@item: ~".col-@{class}-@{index}"; |
|||
.col((@index + 1), @item); |
|||
} |
|||
.col(@index, @list) when (@index =< @grid-columns) { // general |
|||
@item: ~".col-@{class}-@{index}"; |
|||
.col((@index + 1), ~"@{list}, @{item}"); |
|||
} |
|||
.col(@index, @list) when (@index > @grid-columns) { // terminal |
|||
@{list} { |
|||
float: left; |
|||
} |
|||
} |
|||
.col(1); // kickstart it |
|||
} |
|||
|
|||
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { |
|||
.col-@{class}-@{index} { |
|||
width: percentage((@index / @grid-columns)); |
|||
} |
|||
} |
|||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { |
|||
.col-@{class}-push-@{index} { |
|||
left: percentage((@index / @grid-columns)); |
|||
} |
|||
} |
|||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { |
|||
.col-@{class}-push-0 { |
|||
left: auto; |
|||
} |
|||
} |
|||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { |
|||
.col-@{class}-pull-@{index} { |
|||
right: percentage((@index / @grid-columns)); |
|||
} |
|||
} |
|||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { |
|||
.col-@{class}-pull-0 { |
|||
right: auto; |
|||
} |
|||
} |
|||
.calc-grid-column(@index, @class, @type) when (@type = offset) { |
|||
.col-@{class}-offset-@{index} { |
|||
margin-left: percentage((@index / @grid-columns)); |
|||
} |
|||
} |
|||
|
|||
// Basic looping in LESS |
|||
.loop-grid-columns(@index, @class, @type) when (@index >= 0) { |
|||
.calc-grid-column(@index, @class, @type); |
|||
// next iteration |
|||
.loop-grid-columns((@index - 1), @class, @type); |
|||
} |
|||
|
|||
// Create grid for specific class |
|||
.make-grid(@class) { |
|||
.float-grid-columns(@class); |
|||
.loop-grid-columns(@grid-columns, @class, width); |
|||
.loop-grid-columns(@grid-columns, @class, pull); |
|||
.loop-grid-columns(@grid-columns, @class, push); |
|||
.loop-grid-columns(@grid-columns, @class, offset); |
|||
} |
|||
@ -0,0 +1,122 @@ |
|||
// Grid system |
|||
// |
|||
// Generate semantic grid columns with these mixins. |
|||
|
|||
// Centered container element |
|||
.container-fixed(@gutter: @grid-gutter-width) { |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
padding-left: (@gutter / 2); |
|||
padding-right: (@gutter / 2); |
|||
&:extend(.clearfix all); |
|||
} |
|||
|
|||
// Creates a wrapper for a series of columns |
|||
.make-row(@gutter: @grid-gutter-width) { |
|||
margin-left: (@gutter / -2); |
|||
margin-right: (@gutter / -2); |
|||
&:extend(.clearfix all); |
|||
} |
|||
|
|||
// Generate the extra small columns |
|||
.make-xs-column(@columns; @gutter: @grid-gutter-width) { |
|||
position: relative; |
|||
float: left; |
|||
width: percentage((@columns / @grid-columns)); |
|||
min-height: 1px; |
|||
padding-left: (@gutter / 2); |
|||
padding-right: (@gutter / 2); |
|||
} |
|||
.make-xs-column-offset(@columns) { |
|||
margin-left: percentage((@columns / @grid-columns)); |
|||
} |
|||
.make-xs-column-push(@columns) { |
|||
left: percentage((@columns / @grid-columns)); |
|||
} |
|||
.make-xs-column-pull(@columns) { |
|||
right: percentage((@columns / @grid-columns)); |
|||
} |
|||
|
|||
// Generate the small columns |
|||
.make-sm-column(@columns; @gutter: @grid-gutter-width) { |
|||
position: relative; |
|||
min-height: 1px; |
|||
padding-left: (@gutter / 2); |
|||
padding-right: (@gutter / 2); |
|||
|
|||
@media (min-width: @screen-sm-min) { |
|||
float: left; |
|||
width: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-sm-column-offset(@columns) { |
|||
@media (min-width: @screen-sm-min) { |
|||
margin-left: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-sm-column-push(@columns) { |
|||
@media (min-width: @screen-sm-min) { |
|||
left: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-sm-column-pull(@columns) { |
|||
@media (min-width: @screen-sm-min) { |
|||
right: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
|
|||
// Generate the medium columns |
|||
.make-md-column(@columns; @gutter: @grid-gutter-width) { |
|||
position: relative; |
|||
min-height: 1px; |
|||
padding-left: (@gutter / 2); |
|||
padding-right: (@gutter / 2); |
|||
|
|||
@media (min-width: @screen-md-min) { |
|||
float: left; |
|||
width: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-md-column-offset(@columns) { |
|||
@media (min-width: @screen-md-min) { |
|||
margin-left: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-md-column-push(@columns) { |
|||
@media (min-width: @screen-md-min) { |
|||
left: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-md-column-pull(@columns) { |
|||
@media (min-width: @screen-md-min) { |
|||
right: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
|
|||
// Generate the large columns |
|||
.make-lg-column(@columns; @gutter: @grid-gutter-width) { |
|||
position: relative; |
|||
min-height: 1px; |
|||
padding-left: (@gutter / 2); |
|||
padding-right: (@gutter / 2); |
|||
|
|||
@media (min-width: @screen-lg-min) { |
|||
float: left; |
|||
width: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-lg-column-offset(@columns) { |
|||
@media (min-width: @screen-lg-min) { |
|||
margin-left: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-lg-column-push(@columns) { |
|||
@media (min-width: @screen-lg-min) { |
|||
left: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
.make-lg-column-pull(@columns) { |
|||
@media (min-width: @screen-lg-min) { |
|||
right: percentage((@columns / @grid-columns)); |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
// CSS image replacement |
|||
// |
|||
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for |
|||
// mixins being reused as classes with the same name, this doesn't hold up. As |
|||
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. |
|||
// |
|||
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 |
|||
|
|||
// Deprecated as of v3.0.1 (will be removed in v4) |
|||
.hide-text() { |
|||
font: ~"0/0" a; |
|||
color: transparent; |
|||
text-shadow: none; |
|||
background-color: transparent; |
|||
border: 0; |
|||
} |
|||
|
|||
// New mixin to use as of v3.0.1 |
|||
.text-hide() { |
|||
.hide-text(); |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
// Image Mixins |
|||
// - Responsive image |
|||
// - Retina image |
|||
|
|||
|
|||
// Responsive image |
|||
// |
|||
// Keep images from scaling beyond the width of their parents. |
|||
.img-responsive(@display: block) { |
|||
display: @display; |
|||
max-width: 100%; // Part 1: Set a maximum relative to the parent |
|||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching |
|||
} |
|||
|
|||
|
|||
// Retina image |
|||
// |
|||
// Short retina mixin for setting background-image and -size. Note that the |
|||
// spelling of `min--moz-device-pixel-ratio` is intentional. |
|||
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { |
|||
background-image: url("@{file-1x}"); |
|||
|
|||
@media |
|||
only screen and (-webkit-min-device-pixel-ratio: 2), |
|||
only screen and ( min--moz-device-pixel-ratio: 2), |
|||
only screen and ( -o-min-device-pixel-ratio: 2/1), |
|||
only screen and ( min-device-pixel-ratio: 2), |
|||
only screen and ( min-resolution: 192dpi), |
|||
only screen and ( min-resolution: 2dppx) { |
|||
background-image: url("@{file-2x}"); |
|||
background-size: @width-1x @height-1x; |
|||
} |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
// Labels |
|||
|
|||
.label-variant(@color) { |
|||
background-color: @color; |
|||
|
|||
&[href] { |
|||
&:hover, |
|||
&:focus { |
|||
background-color: darken(@color, 10%); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
// List Groups |
|||
|
|||
.list-group-item-variant(@state; @background; @color) { |
|||
.list-group-item-@{state} { |
|||
color: @color; |
|||
background-color: @background; |
|||
|
|||
a& { |
|||
color: @color; |
|||
|
|||
.list-group-item-heading { |
|||
color: inherit; |
|||
} |
|||
|
|||
&:hover, |
|||
&:focus { |
|||
color: @color; |
|||
background-color: darken(@background, 5%); |
|||
} |
|||
&.active, |
|||
&.active:hover, |
|||
&.active:focus { |
|||
color: #fff; |
|||
background-color: @color; |
|||
border-color: @color; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
// Horizontal dividers |
|||
// |
|||
// Dividers (basically an hr) within dropdowns and nav lists |
|||
|
|||
.nav-divider(@color: #e5e5e5) { |
|||
height: 1px; |
|||
margin: ((@line-height-computed / 2) - 1) 0; |
|||
overflow: hidden; |
|||
background-color: @color; |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
// Navbar vertical align |
|||
// |
|||
// Vertically center elements in the navbar. |
|||
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. |
|||
|
|||
.navbar-vertical-align(@element-height) { |
|||
margin-top: ((@navbar-height - @element-height) / 2); |
|||
margin-bottom: ((@navbar-height - @element-height) / 2); |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
// Opacity |
|||
|
|||
.opacity(@opacity) { |
|||
opacity: @opacity; |
|||
// IE8 filter |
|||
@opacity-ie: (@opacity * 100); |
|||
filter: ~"alpha(opacity=@{opacity-ie})"; |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
// Pagination |
|||
|
|||
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { |
|||
> li { |
|||
> a, |
|||
> span { |
|||
padding: @padding-vertical @padding-horizontal; |
|||
font-size: @font-size; |
|||
} |
|||
&:first-child { |
|||
> a, |
|||
> span { |
|||
.border-left-radius(@border-radius); |
|||
} |
|||
} |
|||
&:last-child { |
|||
> a, |
|||
> span { |
|||
.border-right-radius(@border-radius); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
// Panels |
|||
|
|||
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { |
|||
border-color: @border; |
|||
|
|||
& > .panel-heading { |
|||
color: @heading-text-color; |
|||
background-color: @heading-bg-color; |
|||
border-color: @heading-border; |
|||
|
|||
+ .panel-collapse > .panel-body { |
|||
border-top-color: @border; |
|||
} |
|||
.badge { |
|||
color: @heading-bg-color; |
|||
background-color: @heading-text-color; |
|||
} |
|||
} |
|||
& > .panel-footer { |
|||
+ .panel-collapse > .panel-body { |
|||
border-bottom-color: @border; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
// Progress bars |
|||
.progress-bar-variant(@color) { |
|||
background-color: @color; |
|||
|
|||
// Deprecated parent class requirement as of v3.2.0 |
|||
.progress-striped & { |
|||
#gradient > .striped(); |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
// Reset filters for IE |
|||
// |
|||
// When you need to remove a gradient background, do not forget to use this to reset |
|||
// the IE filter for IE9 and below. |
|||
|
|||
.reset-filter() { |
|||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
// Resize anything |
|||
|
|||
.resizable(@direction) { |
|||
resize: @direction; // Options: horizontal, vertical, both |
|||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
// Responsive utilities |
|||
|
|||
// |
|||
// More easily include all the states for responsive-utilities.less. |
|||
.responsive-visibility() { |
|||
display: block !important; |
|||
table& { display: table; } |
|||
tr& { display: table-row !important; } |
|||
th&, |
|||
td& { display: table-cell !important; } |
|||
} |
|||
|
|||
.responsive-invisibility() { |
|||
display: none !important; |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
// Sizing shortcuts |
|||
|
|||
.size(@width; @height) { |
|||
width: @width; |
|||
height: @height; |
|||
} |
|||
|
|||
.square(@size) { |
|||
.size(@size; @size); |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
// WebKit-style focus |
|||
|
|||
.tab-focus() { |
|||
// Default |
|||
outline: thin dotted; |
|||
// WebKit |
|||
outline: 5px auto -webkit-focus-ring-color; |
|||
outline-offset: -2px; |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
// Tables |
|||
|
|||
.table-row-variant(@state; @background) { |
|||
// Exact selectors below required to override `.table-striped` and prevent |
|||
// inheritance to nested tables. |
|||
.table > thead > tr, |
|||
.table > tbody > tr, |
|||
.table > tfoot > tr { |
|||
> td.@{state}, |
|||
> th.@{state}, |
|||
&.@{state} > td, |
|||
&.@{state} > th { |
|||
background-color: @background; |
|||
} |
|||
} |
|||
|
|||
// Hover states for `.table-hover` |
|||
// Note: this is not available for cells or rows within `thead` or `tfoot`. |
|||
.table-hover > tbody > tr { |
|||
> td.@{state}:hover, |
|||
> th.@{state}:hover, |
|||
&.@{state}:hover > td, |
|||
&:hover > .@{state}, |
|||
&.@{state}:hover > th { |
|||
background-color: darken(@background, 5%); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
// Typography |
|||
|
|||
.text-emphasis-variant(@color) { |
|||
color: @color; |
|||
a&:hover { |
|||
color: darken(@color, 10%); |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
// Text overflow |
|||
// Requires inline-block or block for proper styling |
|||
|
|||
.text-overflow() { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
@ -0,0 +1,227 @@ |
|||
// Vendor Prefixes |
|||
// |
|||
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of |
|||
// Autoprefixer in our Gruntfile. They will be removed in v4. |
|||
|
|||
// - Animations |
|||
// - Backface visibility |
|||
// - Box shadow |
|||
// - Box sizing |
|||
// - Content columns |
|||
// - Hyphens |
|||
// - Placeholder text |
|||
// - Transformations |
|||
// - Transitions |
|||
// - User Select |
|||
|
|||
|
|||
// Animations |
|||
.animation(@animation) { |
|||
-webkit-animation: @animation; |
|||
-o-animation: @animation; |
|||
animation: @animation; |
|||
} |
|||
.animation-name(@name) { |
|||
-webkit-animation-name: @name; |
|||
animation-name: @name; |
|||
} |
|||
.animation-duration(@duration) { |
|||
-webkit-animation-duration: @duration; |
|||
animation-duration: @duration; |
|||
} |
|||
.animation-timing-function(@timing-function) { |
|||
-webkit-animation-timing-function: @timing-function; |
|||
animation-timing-function: @timing-function; |
|||
} |
|||
.animation-delay(@delay) { |
|||
-webkit-animation-delay: @delay; |
|||
animation-delay: @delay; |
|||
} |
|||
.animation-iteration-count(@iteration-count) { |
|||
-webkit-animation-iteration-count: @iteration-count; |
|||
animation-iteration-count: @iteration-count; |
|||
} |
|||
.animation-direction(@direction) { |
|||
-webkit-animation-direction: @direction; |
|||
animation-direction: @direction; |
|||
} |
|||
.animation-fill-mode(@fill-mode) { |
|||
-webkit-animation-fill-mode: @fill-mode; |
|||
animation-fill-mode: @fill-mode; |
|||
} |
|||
|
|||
// Backface visibility |
|||
// Prevent browsers from flickering when using CSS 3D transforms. |
|||
// Default value is `visible`, but can be changed to `hidden` |
|||
|
|||
.backface-visibility(@visibility){ |
|||
-webkit-backface-visibility: @visibility; |
|||
-moz-backface-visibility: @visibility; |
|||
backface-visibility: @visibility; |
|||
} |
|||
|
|||
// Drop shadows |
|||
// |
|||
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's |
|||
// supported browsers that have box shadow capabilities now support it. |
|||
|
|||
.box-shadow(@shadow) { |
|||
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 |
|||
box-shadow: @shadow; |
|||
} |
|||
|
|||
// Box sizing |
|||
.box-sizing(@boxmodel) { |
|||
-webkit-box-sizing: @boxmodel; |
|||
-moz-box-sizing: @boxmodel; |
|||
box-sizing: @boxmodel; |
|||
} |
|||
|
|||
// CSS3 Content Columns |
|||
.content-columns(@column-count; @column-gap: @grid-gutter-width) { |
|||
-webkit-column-count: @column-count; |
|||
-moz-column-count: @column-count; |
|||
column-count: @column-count; |
|||
-webkit-column-gap: @column-gap; |
|||
-moz-column-gap: @column-gap; |
|||
column-gap: @column-gap; |
|||
} |
|||
|
|||
// Optional hyphenation |
|||
.hyphens(@mode: auto) { |
|||
word-wrap: break-word; |
|||
-webkit-hyphens: @mode; |
|||
-moz-hyphens: @mode; |
|||
-ms-hyphens: @mode; // IE10+ |
|||
-o-hyphens: @mode; |
|||
hyphens: @mode; |
|||
} |
|||
|
|||
// Placeholder text |
|||
.placeholder(@color: @input-color-placeholder) { |
|||
// Firefox |
|||
&::-moz-placeholder { |
|||
color: @color; |
|||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 |
|||
} |
|||
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ |
|||
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome |
|||
} |
|||
|
|||
// Transformations |
|||
.scale(@ratio) { |
|||
-webkit-transform: scale(@ratio); |
|||
-ms-transform: scale(@ratio); // IE9 only |
|||
-o-transform: scale(@ratio); |
|||
transform: scale(@ratio); |
|||
} |
|||
.scale(@ratioX; @ratioY) { |
|||
-webkit-transform: scale(@ratioX, @ratioY); |
|||
-ms-transform: scale(@ratioX, @ratioY); // IE9 only |
|||
-o-transform: scale(@ratioX, @ratioY); |
|||
transform: scale(@ratioX, @ratioY); |
|||
} |
|||
.scaleX(@ratio) { |
|||
-webkit-transform: scaleX(@ratio); |
|||
-ms-transform: scaleX(@ratio); // IE9 only |
|||
-o-transform: scaleX(@ratio); |
|||
transform: scaleX(@ratio); |
|||
} |
|||
.scaleY(@ratio) { |
|||
-webkit-transform: scaleY(@ratio); |
|||
-ms-transform: scaleY(@ratio); // IE9 only |
|||
-o-transform: scaleY(@ratio); |
|||
transform: scaleY(@ratio); |
|||
} |
|||
.skew(@x; @y) { |
|||
-webkit-transform: skewX(@x) skewY(@y); |
|||
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ |
|||
-o-transform: skewX(@x) skewY(@y); |
|||
transform: skewX(@x) skewY(@y); |
|||
} |
|||
.translate(@x; @y) { |
|||
-webkit-transform: translate(@x, @y); |
|||
-ms-transform: translate(@x, @y); // IE9 only |
|||
-o-transform: translate(@x, @y); |
|||
transform: translate(@x, @y); |
|||
} |
|||
.translate3d(@x; @y; @z) { |
|||
-webkit-transform: translate3d(@x, @y, @z); |
|||
transform: translate3d(@x, @y, @z); |
|||
} |
|||
.rotate(@degrees) { |
|||
-webkit-transform: rotate(@degrees); |
|||
-ms-transform: rotate(@degrees); // IE9 only |
|||
-o-transform: rotate(@degrees); |
|||
transform: rotate(@degrees); |
|||
} |
|||
.rotateX(@degrees) { |
|||
-webkit-transform: rotateX(@degrees); |
|||
-ms-transform: rotateX(@degrees); // IE9 only |
|||
-o-transform: rotateX(@degrees); |
|||
transform: rotateX(@degrees); |
|||
} |
|||
.rotateY(@degrees) { |
|||
-webkit-transform: rotateY(@degrees); |
|||
-ms-transform: rotateY(@degrees); // IE9 only |
|||
-o-transform: rotateY(@degrees); |
|||
transform: rotateY(@degrees); |
|||
} |
|||
.perspective(@perspective) { |
|||
-webkit-perspective: @perspective; |
|||
-moz-perspective: @perspective; |
|||
perspective: @perspective; |
|||
} |
|||
.perspective-origin(@perspective) { |
|||
-webkit-perspective-origin: @perspective; |
|||
-moz-perspective-origin: @perspective; |
|||
perspective-origin: @perspective; |
|||
} |
|||
.transform-origin(@origin) { |
|||
-webkit-transform-origin: @origin; |
|||
-moz-transform-origin: @origin; |
|||
-ms-transform-origin: @origin; // IE9 only |
|||
transform-origin: @origin; |
|||
} |
|||
|
|||
|
|||
// Transitions |
|||
|
|||
.transition(@transition) { |
|||
-webkit-transition: @transition; |
|||
-o-transition: @transition; |
|||
transition: @transition; |
|||
} |
|||
.transition-property(@transition-property) { |
|||
-webkit-transition-property: @transition-property; |
|||
transition-property: @transition-property; |
|||
} |
|||
.transition-delay(@transition-delay) { |
|||
-webkit-transition-delay: @transition-delay; |
|||
transition-delay: @transition-delay; |
|||
} |
|||
.transition-duration(@transition-duration) { |
|||
-webkit-transition-duration: @transition-duration; |
|||
transition-duration: @transition-duration; |
|||
} |
|||
.transition-timing-function(@timing-function) { |
|||
-webkit-transition-timing-function: @timing-function; |
|||
transition-timing-function: @timing-function; |
|||
} |
|||
.transition-transform(@transition) { |
|||
-webkit-transition: -webkit-transform @transition; |
|||
-moz-transition: -moz-transform @transition; |
|||
-o-transition: -o-transform @transition; |
|||
transition: transform @transition; |
|||
} |
|||
|
|||
|
|||
// User select |
|||
// For selecting text on the page |
|||
|
|||
.user-select(@select) { |
|||
-webkit-user-select: @select; |
|||
-moz-user-select: @select; |
|||
-ms-user-select: @select; // IE10+ |
|||
user-select: @select; |
|||
} |
|||
@ -0,0 +1,857 @@ |
|||
// |
|||
// Variables |
|||
// -------------------------------------------------- |
|||
|
|||
|
|||
//== Colors |
|||
// |
|||
//## Gray and brand colors for use across Bootstrap. |
|||
|
|||
@gray-base: #000; |
|||
@gray-darker: lighten(@gray-base, 13.5%); // #222 |
|||
@gray-dark: lighten(@gray-base, 20%); // #333 |
|||
@gray: lighten(@gray-base, 33.5%); // #555 |
|||
@gray-light: lighten(@gray-base, 46.7%); // #777 |
|||
@gray-lighter: lighten(@gray-base, 93.5%); // #eee |
|||
|
|||
@brand-primary: darken(#428bca, 6.5%); // #337ab7 |
|||
@brand-success: #5cb85c; |
|||
@brand-info: #5bc0de; |
|||
@brand-warning: #f0ad4e; |
|||
@brand-danger: #d9534f; |
|||
|
|||
|
|||
//== Scaffolding |
|||
// |
|||
//## Settings for some of the most global styles. |
|||
|
|||
//** Background color for `<body>`. |
|||
@body-bg: #fff; |
|||
//** Global text color on `<body>`. |
|||
@text-color: @gray-dark; |
|||
|
|||
//** Global textual link color. |
|||
@link-color: @brand-primary; |
|||
//** Link hover color set via `darken()` function. |
|||
@link-hover-color: darken(@link-color, 15%); |
|||
//** Link hover decoration. |
|||
@link-hover-decoration: underline; |
|||
|
|||
|
|||
//== Typography |
|||
// |
|||
//## Font, line-height, and color for body text, headings, and more. |
|||
|
|||
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
@font-family-serif: Georgia, "Times New Roman", Times, serif; |
|||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. |
|||
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; |
|||
@font-family-base: @font-family-sans-serif; |
|||
|
|||
@font-size-base: 14px; |
|||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px |
|||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px |
|||
|
|||
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px |
|||
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px |
|||
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px |
|||
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px |
|||
@font-size-h5: @font-size-base; |
|||
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px |
|||
|
|||
//** Unit-less `line-height` for use in components like buttons. |
|||
@line-height-base: 1.428571429; // 20/14 |
|||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. |
|||
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px |
|||
|
|||
//** By default, this inherits from the `<body>`. |
|||
@headings-font-family: inherit; |
|||
@headings-font-weight: 500; |
|||
@headings-line-height: 1.1; |
|||
@headings-color: inherit; |
|||
|
|||
|
|||
//== Iconography |
|||
// |
|||
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. |
|||
|
|||
//** Load fonts from this directory. |
|||
@icon-font-path: "../fonts/"; |
|||
//** File name for all font files. |
|||
@icon-font-name: "glyphicons-halflings-regular"; |
|||
//** Element ID within SVG icon file. |
|||
@icon-font-svg-id: "glyphicons_halflingsregular"; |
|||
|
|||
|
|||
//== Components |
|||
// |
|||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). |
|||
|
|||
@padding-base-vertical: 6px; |
|||
@padding-base-horizontal: 12px; |
|||
|
|||
@padding-large-vertical: 10px; |
|||
@padding-large-horizontal: 16px; |
|||
|
|||
@padding-small-vertical: 5px; |
|||
@padding-small-horizontal: 10px; |
|||
|
|||
@padding-xs-vertical: 1px; |
|||
@padding-xs-horizontal: 5px; |
|||
|
|||
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome |
|||
@line-height-small: 1.5; |
|||
|
|||
@border-radius-base: 4px; |
|||
@border-radius-large: 6px; |
|||
@border-radius-small: 3px; |
|||
|
|||
//** Global color for active items (e.g., navs or dropdowns). |
|||
@component-active-color: #fff; |
|||
//** Global background color for active items (e.g., navs or dropdowns). |
|||
@component-active-bg: @brand-primary; |
|||
|
|||
//** Width of the `border` for generating carets that indicator dropdowns. |
|||
@caret-width-base: 4px; |
|||
//** Carets increase slightly in size for larger components. |
|||
@caret-width-large: 5px; |
|||
|
|||
|
|||
//== Tables |
|||
// |
|||
//## Customizes the `.table` component with basic values, each used across all table variations. |
|||
|
|||
//** Padding for `<th>`s and `<td>`s. |
|||
@table-cell-padding: 8px; |
|||
//** Padding for cells in `.table-condensed`. |
|||
@table-condensed-cell-padding: 5px; |
|||
|
|||
//** Default background color used for all tables. |
|||
@table-bg: transparent; |
|||
//** Background color used for `.table-striped`. |
|||
@table-bg-accent: #f9f9f9; |
|||
//** Background color used for `.table-hover`. |
|||
@table-bg-hover: #f5f5f5; |
|||
@table-bg-active: @table-bg-hover; |
|||
|
|||
//** Border color for table and cell borders. |
|||
@table-border-color: #ddd; |
|||
|
|||
|
|||
//== Buttons |
|||
// |
|||
//## For each of Bootstrap's buttons, define text, background and border color. |
|||
|
|||
@btn-font-weight: normal; |
|||
|
|||
@btn-default-color: #333; |
|||
@btn-default-bg: #fff; |
|||
@btn-default-border: #ccc; |
|||
|
|||
@btn-primary-color: #fff; |
|||
@btn-primary-bg: @brand-primary; |
|||
@btn-primary-border: darken(@btn-primary-bg, 5%); |
|||
|
|||
@btn-success-color: #fff; |
|||
@btn-success-bg: @brand-success; |
|||
@btn-success-border: darken(@btn-success-bg, 5%); |
|||
|
|||
@btn-info-color: #fff; |
|||
@btn-info-bg: @brand-info; |
|||
@btn-info-border: darken(@btn-info-bg, 5%); |
|||
|
|||
@btn-warning-color: #fff; |
|||
@btn-warning-bg: @brand-warning; |
|||
@btn-warning-border: darken(@btn-warning-bg, 5%); |
|||
|
|||
@btn-danger-color: #fff; |
|||
@btn-danger-bg: @brand-danger; |
|||
@btn-danger-border: darken(@btn-danger-bg, 5%); |
|||
|
|||
@btn-link-disabled-color: @gray-light; |
|||
|
|||
|
|||
//== Forms |
|||
// |
|||
//## |
|||
|
|||
//** `<input>` background color |
|||
@input-bg: #fff; |
|||
//** `<input disabled>` background color |
|||
@input-bg-disabled: @gray-lighter; |
|||
|
|||
//** Text color for `<input>`s |
|||
@input-color: @gray; |
|||
//** `<input>` border color |
|||
@input-border: #ccc; |
|||
|
|||
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 |
|||
//** Default `.form-control` border radius |
|||
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS. |
|||
@input-border-radius: @border-radius-base; |
|||
//** Large `.form-control` border radius |
|||
@input-border-radius-large: @border-radius-large; |
|||
//** Small `.form-control` border radius |
|||
@input-border-radius-small: @border-radius-small; |
|||
|
|||
//** Border color for inputs on focus |
|||
@input-border-focus: #66afe9; |
|||
|
|||
//** Placeholder text color |
|||
@input-color-placeholder: #999; |
|||
|
|||
//** Default `.form-control` height |
|||
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); |
|||
//** Large `.form-control` height |
|||
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); |
|||
//** Small `.form-control` height |
|||
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); |
|||
|
|||
@legend-color: @gray-dark; |
|||
@legend-border-color: #e5e5e5; |
|||
|
|||
//** Background color for textual input addons |
|||
@input-group-addon-bg: @gray-lighter; |
|||
//** Border color for textual input addons |
|||
@input-group-addon-border-color: @input-border; |
|||
|
|||
//** Disabled cursor for form controls and buttons. |
|||
@cursor-disabled: not-allowed; |
|||
|
|||
|
|||
//== Dropdowns |
|||
// |
|||
//## Dropdown menu container and contents. |
|||
|
|||
//** Background for the dropdown menu. |
|||
@dropdown-bg: #fff; |
|||
//** Dropdown menu `border-color`. |
|||
@dropdown-border: rgba(0,0,0,.15); |
|||
//** Dropdown menu `border-color` **for IE8**. |
|||
@dropdown-fallback-border: #ccc; |
|||
//** Divider color for between dropdown items. |
|||
@dropdown-divider-bg: #e5e5e5; |
|||
|
|||
//** Dropdown link text color. |
|||
@dropdown-link-color: @gray-dark; |
|||
//** Hover color for dropdown links. |
|||
@dropdown-link-hover-color: darken(@gray-dark, 5%); |
|||
//** Hover background for dropdown links. |
|||
@dropdown-link-hover-bg: #f5f5f5; |
|||
|
|||
//** Active dropdown menu item text color. |
|||
@dropdown-link-active-color: @component-active-color; |
|||
//** Active dropdown menu item background color. |
|||
@dropdown-link-active-bg: @component-active-bg; |
|||
|
|||
//** Disabled dropdown menu item background color. |
|||
@dropdown-link-disabled-color: @gray-light; |
|||
|
|||
//** Text color for headers within dropdown menus. |
|||
@dropdown-header-color: @gray-light; |
|||
|
|||
//** Deprecated `@dropdown-caret-color` as of v3.1.0 |
|||
@dropdown-caret-color: #000; |
|||
|
|||
|
|||
//-- Z-index master list |
|||
// |
|||
// Warning: Avoid customizing these values. They're used for a bird's eye view |
|||
// of components dependent on the z-axis and are designed to all work together. |
|||
// |
|||
// Note: These variables are not generated into the Customizer. |
|||
|
|||
@zindex-navbar: 1000; |
|||
@zindex-dropdown: 1000; |
|||
@zindex-popover: 1060; |
|||
@zindex-tooltip: 1070; |
|||
@zindex-navbar-fixed: 1030; |
|||
@zindex-modal: 1040; |
|||
|
|||
|
|||
//== Media queries breakpoints |
|||
// |
|||
//## Define the breakpoints at which your layout will change, adapting to different screen sizes. |
|||
|
|||
// Extra small screen / phone |
|||
//** Deprecated `@screen-xs` as of v3.0.1 |
|||
@screen-xs: 480px; |
|||
//** Deprecated `@screen-xs-min` as of v3.2.0 |
|||
@screen-xs-min: @screen-xs; |
|||
//** Deprecated `@screen-phone` as of v3.0.1 |
|||
@screen-phone: @screen-xs-min; |
|||
|
|||
// Small screen / tablet |
|||
//** Deprecated `@screen-sm` as of v3.0.1 |
|||
@screen-sm: 768px; |
|||
@screen-sm-min: @screen-sm; |
|||
//** Deprecated `@screen-tablet` as of v3.0.1 |
|||
@screen-tablet: @screen-sm-min; |
|||
|
|||
// Medium screen / desktop |
|||
//** Deprecated `@screen-md` as of v3.0.1 |
|||
@screen-md: 992px; |
|||
@screen-md-min: @screen-md; |
|||
//** Deprecated `@screen-desktop` as of v3.0.1 |
|||
@screen-desktop: @screen-md-min; |
|||
|
|||
// Large screen / wide desktop |
|||
//** Deprecated `@screen-lg` as of v3.0.1 |
|||
@screen-lg: 1200px; |
|||
@screen-lg-min: @screen-lg; |
|||
//** Deprecated `@screen-lg-desktop` as of v3.0.1 |
|||
@screen-lg-desktop: @screen-lg-min; |
|||
|
|||
// So media queries don't overlap when required, provide a maximum |
|||
@screen-xs-max: (@screen-sm-min - 1); |
|||
@screen-sm-max: (@screen-md-min - 1); |
|||
@screen-md-max: (@screen-lg-min - 1); |
|||
|
|||
|
|||
//== Grid system |
|||
// |
|||
//## Define your custom responsive grid. |
|||
|
|||
//** Number of columns in the grid. |
|||
@grid-columns: 12; |
|||
//** Padding between columns. Gets divided in half for the left and right. |
|||
@grid-gutter-width: 30px; |
|||
// Navbar collapse |
|||
//** Point at which the navbar becomes uncollapsed. |
|||
@grid-float-breakpoint: @screen-sm-min; |
|||
//** Point at which the navbar begins collapsing. |
|||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); |
|||
|
|||
|
|||
//== Container sizes |
|||
// |
|||
//## Define the maximum width of `.container` for different screen sizes. |
|||
|
|||
// Small screen / tablet |
|||
@container-tablet: (720px + @grid-gutter-width); |
|||
//** For `@screen-sm-min` and up. |
|||
@container-sm: @container-tablet; |
|||
|
|||
// Medium screen / desktop |
|||
@container-desktop: (940px + @grid-gutter-width); |
|||
//** For `@screen-md-min` and up. |
|||
@container-md: @container-desktop; |
|||
|
|||
// Large screen / wide desktop |
|||
@container-large-desktop: (1140px + @grid-gutter-width); |
|||
//** For `@screen-lg-min` and up. |
|||
@container-lg: @container-large-desktop; |
|||
|
|||
|
|||
//== Navbar |
|||
// |
|||
//## |
|||
|
|||
// Basics of a navbar |
|||
@navbar-height: 50px; |
|||
@navbar-margin-bottom: @line-height-computed; |
|||
@navbar-border-radius: @border-radius-base; |
|||
@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); |
|||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); |
|||
@navbar-collapse-max-height: 340px; |
|||
|
|||
@navbar-default-color: #777; |
|||
@navbar-default-bg: #f8f8f8; |
|||
@navbar-default-border: darken(@navbar-default-bg, 6.5%); |
|||
|
|||
// Navbar links |
|||
@navbar-default-link-color: #777; |
|||
@navbar-default-link-hover-color: #333; |
|||
@navbar-default-link-hover-bg: transparent; |
|||
@navbar-default-link-active-color: #555; |
|||
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); |
|||
@navbar-default-link-disabled-color: #ccc; |
|||
@navbar-default-link-disabled-bg: transparent; |
|||
|
|||
// Navbar brand label |
|||
@navbar-default-brand-color: @navbar-default-link-color; |
|||
@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); |
|||
@navbar-default-brand-hover-bg: transparent; |
|||
|
|||
// Navbar toggle |
|||
@navbar-default-toggle-hover-bg: #ddd; |
|||
@navbar-default-toggle-icon-bar-bg: #888; |
|||
@navbar-default-toggle-border-color: #ddd; |
|||
|
|||
|
|||
// Inverted navbar |
|||
// Reset inverted navbar basics |
|||
@navbar-inverse-color: lighten(@gray-light, 15%); |
|||
@navbar-inverse-bg: #222; |
|||
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); |
|||
|
|||
// Inverted navbar links |
|||
@navbar-inverse-link-color: lighten(@gray-light, 15%); |
|||
@navbar-inverse-link-hover-color: #fff; |
|||
@navbar-inverse-link-hover-bg: transparent; |
|||
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; |
|||
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); |
|||
@navbar-inverse-link-disabled-color: #444; |
|||
@navbar-inverse-link-disabled-bg: transparent; |
|||
|
|||
// Inverted navbar brand label |
|||
@navbar-inverse-brand-color: @navbar-inverse-link-color; |
|||
@navbar-inverse-brand-hover-color: #fff; |
|||
@navbar-inverse-brand-hover-bg: transparent; |
|||
|
|||
// Inverted navbar toggle |
|||
@navbar-inverse-toggle-hover-bg: #333; |
|||
@navbar-inverse-toggle-icon-bar-bg: #fff; |
|||
@navbar-inverse-toggle-border-color: #333; |
|||
|
|||
|
|||
//== Navs |
|||
// |
|||
//## |
|||
|
|||
//=== Shared nav styles |
|||
@nav-link-padding: 10px 15px; |
|||
@nav-link-hover-bg: @gray-lighter; |
|||
|
|||
@nav-disabled-link-color: @gray-light; |
|||
@nav-disabled-link-hover-color: @gray-light; |
|||
|
|||
//== Tabs |
|||
@nav-tabs-border-color: #ddd; |
|||
|
|||
@nav-tabs-link-hover-border-color: @gray-lighter; |
|||
|
|||
@nav-tabs-active-link-hover-bg: @body-bg; |
|||
@nav-tabs-active-link-hover-color: @gray; |
|||
@nav-tabs-active-link-hover-border-color: #ddd; |
|||
|
|||
@nav-tabs-justified-link-border-color: #ddd; |
|||
@nav-tabs-justified-active-link-border-color: @body-bg; |
|||
|
|||
//== Pills |
|||
@nav-pills-border-radius: @border-radius-base; |
|||
@nav-pills-active-link-hover-bg: @component-active-bg; |
|||
@nav-pills-active-link-hover-color: @component-active-color; |
|||
|
|||
|
|||
//== Pagination |
|||
// |
|||
//## |
|||
|
|||
@pagination-color: @link-color; |
|||
@pagination-bg: #fff; |
|||
@pagination-border: #ddd; |
|||
|
|||
@pagination-hover-color: @link-hover-color; |
|||
@pagination-hover-bg: @gray-lighter; |
|||
@pagination-hover-border: #ddd; |
|||
|
|||
@pagination-active-color: #fff; |
|||
@pagination-active-bg: @brand-primary; |
|||
@pagination-active-border: @brand-primary; |
|||
|
|||
@pagination-disabled-color: @gray-light; |
|||
@pagination-disabled-bg: #fff; |
|||
@pagination-disabled-border: #ddd; |
|||
|
|||
|
|||
//== Pager |
|||
// |
|||
//## |
|||
|
|||
@pager-bg: @pagination-bg; |
|||
@pager-border: @pagination-border; |
|||
@pager-border-radius: 15px; |
|||
|
|||
@pager-hover-bg: @pagination-hover-bg; |
|||
|
|||
@pager-active-bg: @pagination-active-bg; |
|||
@pager-active-color: @pagination-active-color; |
|||
|
|||
@pager-disabled-color: @pagination-disabled-color; |
|||
|
|||
|
|||
//== Jumbotron |
|||
// |
|||
//## |
|||
|
|||
@jumbotron-padding: 30px; |
|||
@jumbotron-color: inherit; |
|||
@jumbotron-bg: @gray-lighter; |
|||
@jumbotron-heading-color: inherit; |
|||
@jumbotron-font-size: ceil((@font-size-base * 1.5)); |
|||
|
|||
|
|||
//== Form states and alerts |
|||
// |
|||
//## Define colors for form feedback states and, by default, alerts. |
|||
|
|||
@state-success-text: #3c763d; |
|||
@state-success-bg: #dff0d8; |
|||
@state-success-border: darken(spin(@state-success-bg, -10), 5%); |
|||
|
|||
@state-info-text: #31708f; |
|||
@state-info-bg: #d9edf7; |
|||
@state-info-border: darken(spin(@state-info-bg, -10), 7%); |
|||
|
|||
@state-warning-text: #8a6d3b; |
|||
@state-warning-bg: #fcf8e3; |
|||
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); |
|||
|
|||
@state-danger-text: #a94442; |
|||
@state-danger-bg: #f2dede; |
|||
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); |
|||
|
|||
|
|||
//== Tooltips |
|||
// |
|||
//## |
|||
|
|||
//** Tooltip max width |
|||
@tooltip-max-width: 200px; |
|||
//** Tooltip text color |
|||
@tooltip-color: #fff; |
|||
//** Tooltip background color |
|||
@tooltip-bg: #000; |
|||
@tooltip-opacity: .9; |
|||
|
|||
//** Tooltip arrow width |
|||
@tooltip-arrow-width: 5px; |
|||
//** Tooltip arrow color |
|||
@tooltip-arrow-color: @tooltip-bg; |
|||
|
|||
|
|||
//== Popovers |
|||
// |
|||
//## |
|||
|
|||
//** Popover body background color |
|||
@popover-bg: #fff; |
|||
//** Popover maximum width |
|||
@popover-max-width: 276px; |
|||
//** Popover border color |
|||
@popover-border-color: rgba(0,0,0,.2); |
|||
//** Popover fallback border color |
|||
@popover-fallback-border-color: #ccc; |
|||
|
|||
//** Popover title background color |
|||
@popover-title-bg: darken(@popover-bg, 3%); |
|||
|
|||
//** Popover arrow width |
|||
@popover-arrow-width: 10px; |
|||
//** Popover arrow color |
|||
@popover-arrow-color: @popover-bg; |
|||
|
|||
//** Popover outer arrow width |
|||
@popover-arrow-outer-width: (@popover-arrow-width + 1); |
|||
//** Popover outer arrow color |
|||
@popover-arrow-outer-color: fadein(@popover-border-color, 5%); |
|||
//** Popover outer arrow fallback color |
|||
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); |
|||
|
|||
|
|||
//== Labels |
|||
// |
|||
//## |
|||
|
|||
//** Default label background color |
|||
@label-default-bg: @gray-light; |
|||
//** Primary label background color |
|||
@label-primary-bg: @brand-primary; |
|||
//** Success label background color |
|||
@label-success-bg: @brand-success; |
|||
//** Info label background color |
|||
@label-info-bg: @brand-info; |
|||
//** Warning label background color |
|||
@label-warning-bg: @brand-warning; |
|||
//** Danger label background color |
|||
@label-danger-bg: @brand-danger; |
|||
|
|||
//** Default label text color |
|||
@label-color: #fff; |
|||
//** Default text color of a linked label |
|||
@label-link-hover-color: #fff; |
|||
|
|||
|
|||
//== Modals |
|||
// |
|||
//## |
|||
|
|||
//** Padding applied to the modal body |
|||
@modal-inner-padding: 15px; |
|||
|
|||
//** Padding applied to the modal title |
|||
@modal-title-padding: 15px; |
|||
//** Modal title line-height |
|||
@modal-title-line-height: @line-height-base; |
|||
|
|||
//** Background color of modal content area |
|||
@modal-content-bg: #fff; |
|||
//** Modal content border color |
|||
@modal-content-border-color: rgba(0,0,0,.2); |
|||
//** Modal content border color **for IE8** |
|||
@modal-content-fallback-border-color: #999; |
|||
|
|||
//** Modal backdrop background color |
|||
@modal-backdrop-bg: #000; |
|||
//** Modal backdrop opacity |
|||
@modal-backdrop-opacity: .5; |
|||
//** Modal header border color |
|||
@modal-header-border-color: #e5e5e5; |
|||
//** Modal footer border color |
|||
@modal-footer-border-color: @modal-header-border-color; |
|||
|
|||
@modal-lg: 900px; |
|||
@modal-md: 600px; |
|||
@modal-sm: 300px; |
|||
|
|||
|
|||
//== Alerts |
|||
// |
|||
//## Define alert colors, border radius, and padding. |
|||
|
|||
@alert-padding: 15px; |
|||
@alert-border-radius: @border-radius-base; |
|||
@alert-link-font-weight: bold; |
|||
|
|||
@alert-success-bg: @state-success-bg; |
|||
@alert-success-text: @state-success-text; |
|||
@alert-success-border: @state-success-border; |
|||
|
|||
@alert-info-bg: @state-info-bg; |
|||
@alert-info-text: @state-info-text; |
|||
@alert-info-border: @state-info-border; |
|||
|
|||
@alert-warning-bg: @state-warning-bg; |
|||
@alert-warning-text: @state-warning-text; |
|||
@alert-warning-border: @state-warning-border; |
|||
|
|||
@alert-danger-bg: @state-danger-bg; |
|||
@alert-danger-text: @state-danger-text; |
|||
@alert-danger-border: @state-danger-border; |
|||
|
|||
|
|||
//== Progress bars |
|||
// |
|||
//## |
|||
|
|||
//** Background color of the whole progress component |
|||
@progress-bg: #f5f5f5; |
|||
//** Progress bar text color |
|||
@progress-bar-color: #fff; |
|||
//** Variable for setting rounded corners on progress bar. |
|||
@progress-border-radius: @border-radius-base; |
|||
|
|||
//** Default progress bar color |
|||
@progress-bar-bg: @brand-primary; |
|||
//** Success progress bar color |
|||
@progress-bar-success-bg: @brand-success; |
|||
//** Warning progress bar color |
|||
@progress-bar-warning-bg: @brand-warning; |
|||
//** Danger progress bar color |
|||
@progress-bar-danger-bg: @brand-danger; |
|||
//** Info progress bar color |
|||
@progress-bar-info-bg: @brand-info; |
|||
|
|||
|
|||
//== List group |
|||
// |
|||
//## |
|||
|
|||
//** Background color on `.list-group-item` |
|||
@list-group-bg: #fff; |
|||
//** `.list-group-item` border color |
|||
@list-group-border: #ddd; |
|||
//** List group border radius |
|||
@list-group-border-radius: @border-radius-base; |
|||
|
|||
//** Background color of single list items on hover |
|||
@list-group-hover-bg: #f5f5f5; |
|||
//** Text color of active list items |
|||
@list-group-active-color: @component-active-color; |
|||
//** Background color of active list items |
|||
@list-group-active-bg: @component-active-bg; |
|||
//** Border color of active list elements |
|||
@list-group-active-border: @list-group-active-bg; |
|||
//** Text color for content within active list items |
|||
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); |
|||
|
|||
//** Text color of disabled list items |
|||
@list-group-disabled-color: @gray-light; |
|||
//** Background color of disabled list items |
|||
@list-group-disabled-bg: @gray-lighter; |
|||
//** Text color for content within disabled list items |
|||
@list-group-disabled-text-color: @list-group-disabled-color; |
|||
|
|||
@list-group-link-color: #555; |
|||
@list-group-link-hover-color: @list-group-link-color; |
|||
@list-group-link-heading-color: #333; |
|||
|
|||
|
|||
//== Panels |
|||
// |
|||
//## |
|||
|
|||
@panel-bg: #fff; |
|||
@panel-body-padding: 15px; |
|||
@panel-heading-padding: 10px 15px; |
|||
@panel-footer-padding: @panel-heading-padding; |
|||
@panel-border-radius: @border-radius-base; |
|||
|
|||
//** Border color for elements within panels |
|||
@panel-inner-border: #ddd; |
|||
@panel-footer-bg: #f5f5f5; |
|||
|
|||
@panel-default-text: @gray-dark; |
|||
@panel-default-border: #ddd; |
|||
@panel-default-heading-bg: #f5f5f5; |
|||
|
|||
@panel-primary-text: #fff; |
|||
@panel-primary-border: @brand-primary; |
|||
@panel-primary-heading-bg: @brand-primary; |
|||
|
|||
@panel-success-text: @state-success-text; |
|||
@panel-success-border: @state-success-border; |
|||
@panel-success-heading-bg: @state-success-bg; |
|||
|
|||
@panel-info-text: @state-info-text; |
|||
@panel-info-border: @state-info-border; |
|||
@panel-info-heading-bg: @state-info-bg; |
|||
|
|||
@panel-warning-text: @state-warning-text; |
|||
@panel-warning-border: @state-warning-border; |
|||
@panel-warning-heading-bg: @state-warning-bg; |
|||
|
|||
@panel-danger-text: @state-danger-text; |
|||
@panel-danger-border: @state-danger-border; |
|||
@panel-danger-heading-bg: @state-danger-bg; |
|||
|
|||
|
|||
//== Thumbnails |
|||
// |
|||
//## |
|||
|
|||
//** Padding around the thumbnail image |
|||
@thumbnail-padding: 4px; |
|||
//** Thumbnail background color |
|||
@thumbnail-bg: @body-bg; |
|||
//** Thumbnail border color |
|||
@thumbnail-border: #ddd; |
|||
//** Thumbnail border radius |
|||
@thumbnail-border-radius: @border-radius-base; |
|||
|
|||
//** Custom text color for thumbnail captions |
|||
@thumbnail-caption-color: @text-color; |
|||
//** Padding around the thumbnail caption |
|||
@thumbnail-caption-padding: 9px; |
|||
|
|||
|
|||
//== Wells |
|||
// |
|||
//## |
|||
|
|||
@well-bg: #f5f5f5; |
|||
@well-border: darken(@well-bg, 7%); |
|||
|
|||
|
|||
//== Badges |
|||
// |
|||
//## |
|||
|
|||
@badge-color: #fff; |
|||
//** Linked badge text color on hover |
|||
@badge-link-hover-color: #fff; |
|||
@badge-bg: @gray-light; |
|||
|
|||
//** Badge text color in active nav link |
|||
@badge-active-color: @link-color; |
|||
//** Badge background color in active nav link |
|||
@badge-active-bg: #fff; |
|||
|
|||
@badge-font-weight: bold; |
|||
@badge-line-height: 1; |
|||
@badge-border-radius: 10px; |
|||
|
|||
|
|||
//== Breadcrumbs |
|||
// |
|||
//## |
|||
|
|||
@breadcrumb-padding-vertical: 8px; |
|||
@breadcrumb-padding-horizontal: 15px; |
|||
//** Breadcrumb background color |
|||
@breadcrumb-bg: #f5f5f5; |
|||
//** Breadcrumb text color |
|||
@breadcrumb-color: #ccc; |
|||
//** Text color of current page in the breadcrumb |
|||
@breadcrumb-active-color: @gray-light; |
|||
//** Textual separator for between breadcrumb elements |
|||
@breadcrumb-separator: "/"; |
|||
|
|||
|
|||
//== Carousel |
|||
// |
|||
//## |
|||
|
|||
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); |
|||
|
|||
@carousel-control-color: #fff; |
|||
@carousel-control-width: 15%; |
|||
@carousel-control-opacity: .5; |
|||
@carousel-control-font-size: 20px; |
|||
|
|||
@carousel-indicator-active-bg: #fff; |
|||
@carousel-indicator-border-color: #fff; |
|||
|
|||
@carousel-caption-color: #fff; |
|||
|
|||
|
|||
//== Close |
|||
// |
|||
//## |
|||
|
|||
@close-font-weight: bold; |
|||
@close-color: #000; |
|||
@close-text-shadow: 0 1px 0 #fff; |
|||
|
|||
|
|||
//== Code |
|||
// |
|||
//## |
|||
|
|||
@code-color: #c7254e; |
|||
@code-bg: #f9f2f4; |
|||
|
|||
@kbd-color: #fff; |
|||
@kbd-bg: #333; |
|||
|
|||
@pre-bg: #f5f5f5; |
|||
@pre-color: @gray-dark; |
|||
@pre-border-color: #ccc; |
|||
@pre-scrollable-max-height: 340px; |
|||
|
|||
|
|||
//== Type |
|||
// |
|||
//## |
|||
|
|||
//** Horizontal offset for forms and lists. |
|||
@component-offset-horizontal: 180px; |
|||
//** Text muted color |
|||
@text-muted: @gray-light; |
|||
//** Abbreviations and acronyms border color |
|||
@abbr-border-color: @gray-light; |
|||
//** Headings small color |
|||
@headings-small-color: @gray-light; |
|||
//** Blockquote small color |
|||
@blockquote-small-color: @gray-light; |
|||
//** Blockquote font size |
|||
@blockquote-font-size: (@font-size-base * 1.25); |
|||
//** Blockquote border color |
|||
@blockquote-border-color: @gray-lighter; |
|||
//** Page header border color |
|||
@page-header-border-color: @gray-lighter; |
|||
//** Width of horizontal description list titles |
|||
@dl-horizontal-offset: @component-offset-horizontal; |
|||
//** Horizontal line color. |
|||
@hr-border: @gray-lighter; |
|||
@ -0,0 +1,36 @@ |
|||
/* |
|||
* Page: 400 and 500 error pages |
|||
* ------------------------------ |
|||
*/ |
|||
.error-page { |
|||
width: 600px; |
|||
margin: 20px auto 0 auto; |
|||
@media (max-width: @screen-sm-max) { |
|||
width: 100%; |
|||
} |
|||
//For the error number e.g: 404 |
|||
> .headline { |
|||
float: left; |
|||
font-size: 100px; |
|||
font-weight: 300; |
|||
@media (max-width: @screen-sm-max) { |
|||
float: none; |
|||
text-align: center; |
|||
} |
|||
} |
|||
//For the message |
|||
> .error-content { |
|||
margin-left: 190px; |
|||
@media (max-width: @screen-sm-max) { |
|||
margin-left: 0; |
|||
} |
|||
> h3 { |
|||
font-weight: 300; |
|||
font-size: 25px; |
|||
@media(max-width: @screen-sm-max) { |
|||
text-align: center; |
|||
} |
|||
} |
|||
display: block; |
|||
} |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
/*! |
|||
* AdminLTE v2.0.1 |
|||
* Author: Almsaeed Studio |
|||
* Website: Almsaeed Studio <http://almsaeedstudio.com> |
|||
* License: Open source - MIT |
|||
* Please visit http://opensource.org/licenses/MIT for more information |
|||
!*/ |
|||
|
|||
//google fonts |
|||
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic); |
|||
|
|||
//Bootstrap Variables & Mixins |
|||
//The core bootstrap code have not been modified. These files |
|||
//are included only for refrence. |
|||
@import "../bootstrap-less/mixins.less"; |
|||
@import "../bootstrap-less/variables.less"; |
|||
|
|||
//MISC |
|||
//---- |
|||
@import "core.less"; |
|||
@import "variables.less"; |
|||
@import "mixins.less"; |
|||
|
|||
//COMPONENTS |
|||
//----------- |
|||
@import "header.less"; |
|||
@import "sidebar.less"; |
|||
@import "dropdown.less"; |
|||
@import "forms.less"; |
|||
@import "progress-bars.less"; |
|||
@import "small-box.less"; |
|||
@import "boxes.less"; |
|||
@import "info-box.less"; |
|||
@import "timeline.less"; |
|||
@import "buttons.less"; |
|||
@import "callout.less"; |
|||
@import "alerts.less"; |
|||
@import "navs.less"; |
|||
@import "products.less"; |
|||
@import "table.less"; |
|||
@import "labels.less"; |
|||
@import "direct-chat.less"; |
|||
@import "users-list.less"; |
|||
@import "carousel.less"; |
|||
@import "modal.less"; |
|||
|
|||
//PAGES |
|||
//------ |
|||
@import "mailbox.less"; |
|||
@import "lockscreen.less"; |
|||
@import "login_and_register.less"; |
|||
@import "404_500_errors.less"; |
|||
@import "invoice.less"; |
|||
|
|||
//Skins |
|||
//------- |
|||
//@import "skins/skin-blue.less"; |
|||
//@import "skins/skin-black.less"; |
|||
//@import "skins/skin-red.less"; |
|||
//@import "skins/skin-green.less"; |
|||
//@import "skins/skin-yellow.less"; |
|||
//@import "skins/skin-purple.less"; |
|||
|
|||
//Plugins |
|||
//-------- |
|||
@import "bootstrap-social.less"; |
|||
@import "fullcalendar.less"; |
|||
|
|||
//Miscellaneous |
|||
//------------- |
|||
@import "miscellaneous.less"; |
|||
@ -0,0 +1,44 @@ |
|||
/* |
|||
* Component: alert |
|||
* ---------------- |
|||
*/ |
|||
|
|||
.alert { |
|||
.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%); |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
/* |
|||
* Plugin: Social Buttons |
|||
* ---------------------- |
|||
*/ |
|||
|
|||
// Copyright 2013-2014 Panayiotis Lipiridis |
|||
// Licensed under the MIT License |
|||
// |
|||
// https://github.com/lipis/bootstrap-social |
|||
|
|||
@bs-height-base: (@line-height-computed + @padding-base-vertical * 2); |
|||
@bs-height-lg: (floor(@font-size-large * @line-height-base) + @padding-large-vertical * 2); |
|||
@bs-height-sm: (floor(@font-size-small * 1.5) + @padding-small-vertical * 2); |
|||
@bs-height-xs: (floor(@font-size-small * 1.2) + @padding-small-vertical + 1); |
|||
|
|||
.btn-social { |
|||
position: relative; |
|||
padding-left: @bs-height-base + @padding-base-horizontal!important; |
|||
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!important; |
|||
line-height: (@bs-height-base + 2)!important; |
|||
font-size: 1.6em!important; |
|||
text-align: center; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.2); |
|||
} |
|||
&.btn-lg { |
|||
padding-left: @bs-height-lg + @padding-large-horizontal!important; |
|||
:first-child { |
|||
line-height: @bs-height-lg; |
|||
width: @bs-height-lg; |
|||
font-size: 1.8em; |
|||
} |
|||
} |
|||
&.btn-sm { |
|||
padding-left: @bs-height-sm + @padding-small-horizontal!important; |
|||
:first-child { |
|||
line-height: @bs-height-sm; |
|||
width: @bs-height-sm; |
|||
font-size: 1.4em; |
|||
} |
|||
} |
|||
&.btn-xs { |
|||
padding-left: @bs-height-xs + @padding-small-horizontal!important; |
|||
:first-child { |
|||
line-height: @bs-height-xs; |
|||
width: @bs-height-xs; |
|||
font-size: 1.2em; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-social-icon { |
|||
.btn-social; |
|||
height: (@bs-height-base + 2); |
|||
width: (@bs-height-base + 2); |
|||
padding: 0; |
|||
:first-child { |
|||
border: none; |
|||
text-align: center; |
|||
width: 100%!important; |
|||
} |
|||
&.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; |
|||
} |
|||
} |
|||
|
|||
.btn-social(@color-bg, @color: white) { |
|||
background-color: @color-bg; |
|||
.button-variant(@color, @color-bg, rgba(0, 0, 0, 0.2)); |
|||
} |
|||
|
|||
|
|||
.btn-bitbucket { .btn-social(#205081); } |
|||
.btn-dropbox { .btn-social(#1087dd); } |
|||
.btn-facebook { .btn-social(#3b5998); } |
|||
.btn-flickr { .btn-social(#ff0084); } |
|||
.btn-foursquare { .btn-social(#0072b1); } |
|||
.btn-github { .btn-social(#444444); } |
|||
.btn-google-plus { .btn-social(#dd4b39); } |
|||
.btn-instagram { .btn-social(#3f729b); } |
|||
.btn-linkedin { .btn-social(#007bb6); } |
|||
.btn-tumblr { .btn-social(#2c4762); } |
|||
.btn-twitter { .btn-social(#55acee); } |
|||
.btn-vk { .btn-social(#587ea3); } |
|||
@ -0,0 +1,446 @@ |
|||
/* |
|||
* Component: Box |
|||
* -------------- |
|||
*/ |
|||
.box { |
|||
position: relative; |
|||
.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: 0px; |
|||
> .box-header { |
|||
.btn.btn-default { |
|||
background: transparent; |
|||
} |
|||
.btn, |
|||
a { |
|||
&:hover { |
|||
background: rgba(0,0,0,0.1)!important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Box color variations |
|||
&.box-default { |
|||
.box-solid-variant(@gray, #444); |
|||
} |
|||
&.box-primary { |
|||
.box-solid-variant(@light-blue); |
|||
} |
|||
&.box-info { |
|||
.box-solid-variant(@aqua); |
|||
} |
|||
&.box-danger { |
|||
.box-solid-variant(@red); |
|||
} |
|||
&.box-warning { |
|||
.box-solid-variant(@yellow); |
|||
} |
|||
&.box-success { |
|||
.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 for LOADING STATE effect |
|||
> .overlay, |
|||
> .loading-img { |
|||
position: absolute; |
|||
top: -3px; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.overlay { |
|||
z-index: 1010; |
|||
background: rgba(255, 255, 255, 0.7); |
|||
.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); |
|||
} |
|||
|
|||
} |
|||
|
|||
//Box header |
|||
.box-header { |
|||
//Add top left and top right border radius |
|||
.clearfix(); |
|||
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; |
|||
} |
|||
//float: none!important; |
|||
&.pull-right { |
|||
.dropdown-menu { |
|||
right: 0; |
|||
left: auto; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//Box Tools Buttons |
|||
.btn-box-tool { |
|||
padding: 5px; |
|||
font-size: 12px; |
|||
background: transparent; |
|||
box-shadow: none!important; |
|||
color: darken(@box-default-border-top-color, 20%); |
|||
.open &, |
|||
&:hover { |
|||
color: darken(@box-default-border-top-color, 40%); |
|||
} |
|||
&:active { |
|||
outline: none!important; |
|||
} |
|||
} |
|||
|
|||
//Box Body |
|||
.box-body { |
|||
.border-radius(0; 0; @box-border-radius; @box-border-radius); |
|||
padding: @box-padding; |
|||
.no-header & { |
|||
.border-top-radius(@box-border-radius); |
|||
} |
|||
// Tables within the box body |
|||
> .table { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
// Charts |
|||
> .chart { |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 100%; |
|||
svg, |
|||
canvas { |
|||
width: 100%!important; |
|||
} |
|||
} |
|||
|
|||
// Calendar within the box body |
|||
.fc { |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.full-width-chart { |
|||
margin: -19px; |
|||
} |
|||
&.no-padding .full-width-chart { |
|||
margin: -9px; |
|||
} |
|||
|
|||
.box-pane { |
|||
.border-radius(0; 0; @box-border-radius; 0); |
|||
} |
|||
.box-pane-right { |
|||
.border-radius(0; 0; 0; @box-border-radius); |
|||
} |
|||
} |
|||
|
|||
//Box footer |
|||
.box-footer { |
|||
.border-radius(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: @screen-sm-max) { |
|||
float: left; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//Widgets |
|||
//----------- |
|||
|
|||
/* Widget: TODO LIST */ |
|||
|
|||
.todo-list { |
|||
margin: 0; |
|||
padding: 0px 0px; |
|||
list-style: none; |
|||
overflow: auto; |
|||
// Todo list element |
|||
> li { |
|||
.border-radius(2px); |
|||
padding: 10px; |
|||
background: #f4f4f4; |
|||
margin-bottom: 2px; |
|||
border-left: 2px solid #e6e7e8; |
|||
color: #444; |
|||
&:last-of-type { |
|||
margin-bottom: 0; |
|||
} |
|||
// 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; |
|||
} |
|||
|
|||
> 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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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 { |
|||
.clearfix(); |
|||
margin-bottom: 10px; |
|||
// The image |
|||
> img { |
|||
//display: inline-block; |
|||
width: 40px; |
|||
height: 40px; |
|||
border: 2px solid transparent; |
|||
.border-radius(50%)!important; |
|||
&.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 { |
|||
.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; |
|||
|
|||
} |
|||
.clearfix(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
//END CHAT WIDGET |
|||
|
|||
//Input in box |
|||
.box-input { |
|||
max-width: 200px; |
|||
} |
|||
@ -0,0 +1,157 @@ |
|||
/* |
|||
* Component: Button |
|||
* ----------------- |
|||
*/ |
|||
|
|||
.btn { |
|||
.border-radius(@btn-border-radius); |
|||
.box-shadow(@btn-boxshadow); |
|||
border: 1px solid transparent; |
|||
|
|||
&.uppercase { |
|||
text-transform: uppercase |
|||
} |
|||
|
|||
// Flat buttons |
|||
&.btn-flat { |
|||
.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,.125); |
|||
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); |
|||
box-shadow: inset 0 3px 5px rgba(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%)!important; |
|||
} |
|||
} |
|||
.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,.7); |
|||
border-color: rgba(255,255,255,.7); |
|||
} |
|||
} |
|||
.btn-link { |
|||
.box-shadow(none); |
|||
} |
|||
//General .btn with bg class |
|||
.btn[class*='bg-']:hover { |
|||
.box-shadow(inset 0 0 100px rgba(0,0,0,0.2)); |
|||
} |
|||
// Application buttons |
|||
.btn-app { |
|||
.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,.125); |
|||
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); |
|||
box-shadow: inset 0 3px 5px rgba(0,0,0,.125); |
|||
} |
|||
|
|||
//The badge |
|||
> .badge { |
|||
position: absolute; |
|||
top: -3px; |
|||
right: -10px; |
|||
font-size: 10px; |
|||
font-weight: 400; |
|||
} |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
/* |
|||
* Component: Callout |
|||
* ------------------ |
|||
*/ |
|||
|
|||
// Base styles (regardless of theme) |
|||
.callout { |
|||
.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%); |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
/* |
|||
* Component: Carousel |
|||
* ------------------- |
|||
*/ |
|||
.carousel-control { |
|||
background-image: none!important; |
|||
> .fa { |
|||
font-size: 40px; |
|||
position: absolute; |
|||
top: 50%; |
|||
z-index: 5; |
|||
display: inline-block; |
|||
margin-top: -20px; |
|||
} |
|||
} |
|||
@ -0,0 +1,175 @@ |
|||
/* |
|||
* Core: Genral 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 { |
|||
.clearfix(); |
|||
min-height: 100%; |
|||
position: static; |
|||
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('../img/boxed-bg.jpg') repeat fixed; |
|||
} |
|||
|
|||
/* |
|||
* Content Wrapper - contins main content |
|||
* ```.right-side has been deprecated as of v2.0 in favor of .content-wrapper ``` |
|||
*/ |
|||
.content-wrapper, |
|||
.right-side, |
|||
.main-footer { |
|||
.transition-transform(@transition-speed @transition-fn); |
|||
.transition(margin-left @transition-speed @transition-fn); |
|||
margin-left: @sidebar-width; |
|||
z-index: 820; |
|||
//Top nav layout |
|||
.layout-top-nav & { |
|||
margin-left: 0; |
|||
} |
|||
@media (max-width: @screen-xs-max) { |
|||
margin-left: 0; |
|||
} |
|||
//When opening the sidebar on large screens |
|||
.sidebar-collapse & { |
|||
@media (min-width: @screen-sm) { |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
//When opening the sidebar on small screens |
|||
.sidebar-open & { |
|||
@media (max-width: @screen-xs-max) { |
|||
.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 #eee; |
|||
} |
|||
|
|||
/* 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%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Content */ |
|||
.content { |
|||
min-height: 250px; |
|||
padding: 15px; |
|||
.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; |
|||
} |
|||
} |
|||
|
|||
/* Don't display when printing */ |
|||
@media print { |
|||
//Add to elements that you do not want to show when printing |
|||
.no-print { |
|||
display: none; |
|||
} |
|||
|
|||
//Elements that we want to hide when printing |
|||
.main-sidebar, |
|||
.left-side, |
|||
.main-header, |
|||
.content-header { |
|||
display: none; |
|||
} |
|||
//This is the only element that should appear, so let's remove the margins |
|||
.content-wrapper, |
|||
.right-side { |
|||
margin: 0!important; |
|||
} |
|||
} |
|||
@ -0,0 +1,175 @@ |
|||
/* |
|||
* Component: Direct Chat |
|||
* ---------------------- |
|||
*/ |
|||
.direct-chat { |
|||
.box-body { |
|||
.border-bottom-radius(0); |
|||
position: relative; |
|||
overflow-x: hidden; |
|||
padding: 0; |
|||
} |
|||
&.chat-pane-open { |
|||
.direct-chat-contacts { |
|||
.translate(0, 0); |
|||
} |
|||
} |
|||
} |
|||
.direct-chat-messages { |
|||
.translate(0, 0); |
|||
padding: 10px; |
|||
height: 250px; |
|||
overflow: auto; |
|||
} |
|||
.direct-chat-msg, |
|||
.direct-chat-text { |
|||
display: block; |
|||
} |
|||
.direct-chat-msg { |
|||
.clearfix(); |
|||
margin-bottom: 10px; |
|||
} |
|||
.direct-chat-messages, |
|||
.direct-chat-contacts { |
|||
.transition-transform(.5s ease-in-out); |
|||
} |
|||
.direct-chat-text { |
|||
.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 { |
|||
.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-messages { |
|||
.translate(-101%, 0); |
|||
}*/ |
|||
.direct-chat-contacts { |
|||
.translate(0, 0); |
|||
} |
|||
} |
|||
.direct-chat-contacts { |
|||
.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 { |
|||
.clearfix(); |
|||
border-bottom: 1px solid rgba(0,0,0,0.2); |
|||
padding: 10px; |
|||
margin: 0; |
|||
&:last-of-type { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
} |
|||
.contacts-list-img { |
|||
.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 { |
|||
.direct-chat-variant(@red); |
|||
} |
|||
.direct-chat-primary { |
|||
.direct-chat-variant(@light-blue); |
|||
} |
|||
.direct-chat-warning { |
|||
.direct-chat-variant(@yellow); |
|||
} |
|||
.direct-chat-info { |
|||
.direct-chat-variant(@aqua); |
|||
} |
|||
.direct-chat-success { |
|||
.direct-chat-variant(@green); |
|||
} |
|||
@ -0,0 +1,342 @@ |
|||
/* |
|||
* Component: Dropdown menus |
|||
* ------------------------- |
|||
*/ |
|||
|
|||
/*Dropdowns in general*/ |
|||
.dropdown-menu { |
|||
box-shadow: @box-boxshadow; |
|||
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 { |
|||
position: relative; |
|||
//fix width and padding |
|||
> .dropdown-menu { |
|||
> li { |
|||
position: relative; |
|||
} |
|||
width: 280px; |
|||
//Remove padding and margins |
|||
padding: 0 0 0 0!important; |
|||
margin: 0!important; |
|||
top: 100%; |
|||
//.border-radius(4px)!important; |
|||
} |
|||
//Define header class |
|||
> .dropdown-menu > li.header { |
|||
.border-radius(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 { |
|||
.border-radius(0px; 0px; 4px; 4px); |
|||
font-size: 12px; |
|||
background-color: #fff; |
|||
padding: 7px 10px; |
|||
border-bottom: 1px solid #eeeeee; |
|||
color: #444!important; |
|||
@media (max-width: @screen-sm-max) { |
|||
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; |
|||
white-space: nowrap; |
|||
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: 0px; |
|||
//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: 0px; |
|||
right: 0px; |
|||
} |
|||
} |
|||
|
|||
> p { |
|||
margin: 0 0 0 45px; |
|||
font-size: 12px; |
|||
color: #888888; |
|||
} |
|||
|
|||
.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 { |
|||
.border-radius(0); |
|||
padding: 1px 0 0 0; |
|||
border-top-width: 0; |
|||
width: 280px; |
|||
// 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; |
|||
.clearfix(); |
|||
a { |
|||
color: #444 !important; |
|||
@media (max-width: @screen-sm-max) { |
|||
background: #fff !important; |
|||
color: #444 !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Menu Footer |
|||
> .user-footer { |
|||
background-color: #f9f9f9; |
|||
padding: 10px; |
|||
.clearfix(); |
|||
.btn-default { |
|||
color: #666666; |
|||
} |
|||
} |
|||
} |
|||
.user-image { |
|||
float: left; |
|||
width: 25px; |
|||
height: 25px; |
|||
border-radius: 50%; |
|||
margin-right: 10px; |
|||
margin-top: -2px; |
|||
@media (max-width: @screen-xs-max) { |
|||
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; |
|||
.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% { |
|||
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); |
|||
} |
|||
} |
|||
|
|||
/* Fix dropdown menu in navbars */ |
|||
.navbar-custom-menu > .navbar-nav { |
|||
> li { |
|||
position: relative; |
|||
> .dropdown-menu { |
|||
position: absolute; |
|||
right: 0; |
|||
left: auto; |
|||
} |
|||
} |
|||
} |
|||
@media (max-width: @screen-sm-max) { |
|||
.navbar-custom-menu > .navbar-nav { |
|||
float: right; |
|||
> li { |
|||
position: static; |
|||
> .dropdown-menu { |
|||
position: absolute; |
|||
right: 5%; |
|||
left: auto; |
|||
border: 1px solid #ddd; |
|||
background: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,82 @@ |
|||
/* |
|||
* Component: Form |
|||
* --------------- |
|||
*/ |
|||
.form-control { |
|||
.border-radius(@input-radius)!important; |
|||
box-shadow: none; |
|||
border-color: @gray; |
|||
&:focus { |
|||
border-color: @light-blue !important; |
|||
box-shadow: none; |
|||
} |
|||
&::-moz-placeholder { |
|||
color: #bbb; |
|||
opacity: 1; |
|||
} |
|||
&:-ms-input-placeholder { |
|||
color: #bbb; |
|||
} |
|||
&::-webkit-input-placeholder { |
|||
color: #bbb; |
|||
} |
|||
|
|||
&:not(select) { |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
} |
|||
} |
|||
|
|||
.form-group { |
|||
&.has-success { |
|||
label { |
|||
color: @green; |
|||
} |
|||
.form-control { |
|||
border-color: @green !important; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
|
|||
&.has-warning { |
|||
label { |
|||
color: @yellow; |
|||
} |
|||
.form-control { |
|||
border-color: @yellow !important; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
|
|||
&.has-error { |
|||
label { |
|||
color: @red; |
|||
} |
|||
.form-control { |
|||
border-color: @red !important; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Input group */ |
|||
.input-group { |
|||
.input-group-addon { |
|||
.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 { |
|||
.border-radius(0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.icheck > label { |
|||
padding-left: 0; |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
/* |
|||
* 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 { |
|||
.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); |
|||
} |
|||
} |
|||
@ -0,0 +1,221 @@ |
|||
/* |
|||
* Component: Main Header |
|||
* ---------------------- |
|||
*/ |
|||
|
|||
.main-header { |
|||
position: relative; |
|||
max-height: 100px; |
|||
z-index: 1030; |
|||
//Navbar |
|||
> .navbar { |
|||
margin-bottom: 0; |
|||
margin-left: @sidebar-width; |
|||
border: none; |
|||
min-height: @navbar-height; |
|||
border-radius: 0; |
|||
.layout-top-nav & { |
|||
margin-left: 0!important; |
|||
} |
|||
} |
|||
//Navbar search text input |
|||
#navbar-search-input { |
|||
background: rgba(255,255,255,.2); |
|||
border-color: transparent; |
|||
&:focus, |
|||
&:active { |
|||
border-color: rgba(0,0,0,.1)!important; |
|||
background: rgba(255,255,255,.9); |
|||
} |
|||
&::-moz-placeholder { |
|||
color: #ccc; |
|||
opacity: 1; |
|||
} |
|||
&:-ms-input-placeholder { |
|||
color: #ccc; |
|||
} |
|||
&::-webkit-input-placeholder { |
|||
color: #ccc; |
|||
} |
|||
} |
|||
//Navbar Right Menu |
|||
.navbar-custom-menu, |
|||
.navbar-right { |
|||
margin-right: 5px; |
|||
float: right; |
|||
@media (max-width: @screen-sm-max) { |
|||
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; |
|||
} |
|||
} |
|||
.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: .9; |
|||
} |
|||
|
|||
//Logo bar |
|||
.logo { |
|||
display: block; |
|||
float: left; |
|||
height: 50px; |
|||
font-size: 20px; |
|||
line-height: 50px; |
|||
text-align: center; |
|||
width: @sidebar-width; |
|||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
padding: 0 15px; |
|||
font-weight: 300; |
|||
} |
|||
//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: 0px; |
|||
margin-bottom: 0; |
|||
font-size: 12px; |
|||
padding: 7px 5px; |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 10px; |
|||
.border-radius(2px); |
|||
> li > a { |
|||
color: #444; |
|||
text-decoration: none; |
|||
> .fa, > .glyphicon, > .ion { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
> li + li:before { |
|||
content: '>\00a0'; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: @screen-sm-max) { |
|||
> .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: @screen-sm-max) { |
|||
.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; |
|||
position: relative!important; |
|||
} |
|||
.navbar { |
|||
margin: 0; |
|||
} |
|||
.navbar-custom-menu { |
|||
float: right; |
|||
} |
|||
} |
|||
.main-sidebar, |
|||
.left-side { |
|||
padding-top: 100px!important; |
|||
} |
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
/* |
|||
* Component: Info Box |
|||
* ------------------- |
|||
*/ |
|||
.info-box { |
|||
display: block; |
|||
min-height: 90px; |
|||
background: #fff; |
|||
width: 100%; |
|||
box-shadow: @box-boxshadow; |
|||
.border-radius(2px); |
|||
margin-bottom: 15px; |
|||
small { |
|||
font-size: 14px; |
|||
} |
|||
.progress { |
|||
background: rgba(0,0,0,.2); |
|||
margin: 5px -10px 5px -10px; |
|||
height: 2px; |
|||
&, |
|||
& .progress-bar { |
|||
.border-radius(0); |
|||
} |
|||
.progress-bar { |
|||
background: #fff; |
|||
} |
|||
} |
|||
} |
|||
.info-box-icon { |
|||
.border-radius(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); |
|||
} |
|||
.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-more { |
|||
display: block; |
|||
} |
|||
|
|||
.progress-description { |
|||
margin: 0; |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
/* |
|||
* Page: Invoice |
|||
* ------------- |
|||
*/ |
|||
|
|||
.invoice { |
|||
position: relative; |
|||
background: #fff; |
|||
border: 1px solid #f4f4f4; |
|||
padding: 20px; |
|||
margin: 10px 25px; |
|||
} |
|||
|
|||
.invoice-title { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
/* Enhancement for printing */ |
|||
@media print { |
|||
.invoice { |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
.invoice-col { |
|||
float: left; |
|||
width: 33.3333333%; |
|||
} |
|||
|
|||
.table-responsive { |
|||
overflow: auto; |
|||
> .table tr th, |
|||
> .table tr td { |
|||
white-space: normal!important; |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
/* |
|||
* Component: Label |
|||
* ---------------- |
|||
*/ |
|||
.label-default { |
|||
background-color: @gray; |
|||
color: #444; |
|||
} |
|||
.label-danger { |
|||
&:extend(.bg-red); |
|||
} |
|||
.label-info { |
|||
&:extend(.bg-aqua); |
|||
} |
|||
.label-waring { |
|||
&:extend(.bg-yellow); |
|||
} |
|||
.label-primary { |
|||
&:extend(.bg-light-blue); |
|||
} |
|||
.label-success { |
|||
&:extend(.bg-green); |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
/* |
|||
* 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 { |
|||
.border-radius(4px); |
|||
padding: 0; |
|||
background: #fff; |
|||
position: relative; |
|||
margin: 10px auto 30px auto; |
|||
width: 290px; |
|||
} |
|||
/* User image */ |
|||
.lockscreen-image { |
|||
.border-radius(50%); |
|||
position: absolute; |
|||
left: -10px; |
|||
top: -25px; |
|||
background: #fff; |
|||
padding: 5px; |
|||
z-index: 10; |
|||
> img { |
|||
.border-radius(50%); |
|||
width: 70px; |
|||
height: 70px; |
|||
} |
|||
} |
|||
|
|||
/* Contains the password input and the login button */ |
|||
.lockscreen-credentials { |
|||
margin-left: 70px; |
|||
.form-control { |
|||
border: 0 !important; |
|||
} |
|||
.btn { |
|||
background-color: #fff; |
|||
border: 0; |
|||
padding: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.lockscreen-footer { |
|||
margin-top: 10px; |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
/* |
|||
* 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: @screen-sm) { |
|||
width: 90%; |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
|
|||
.login-box-body, |
|||
.register-box-body { |
|||
background: #fff; |
|||
padding: 20px; |
|||
color: #444; |
|||
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; |
|||
} |
|||
@ -0,0 +1,136 @@ |
|||
/* |
|||
* 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); |
|||
} |
|||
|
|||
// ``` These are the rules of the old mailbox, which is now deprecated and will be removed in the a future release ``` |
|||
.mailbox { |
|||
.table-mailbox { |
|||
border-left: 1px solid @box-border-color; |
|||
border-right: 1px solid @box-border-color; |
|||
border-bottom: 1px solid @box-border-color; |
|||
tr { |
|||
&.unread { |
|||
> td { |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
color: #000; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
> td > .fa.fa-star, |
|||
> td > .fa.fa-star-o, |
|||
> td > .glyphicon.glyphicon-star, |
|||
> td > .glyphicon.glyphicon-star-empty{ |
|||
color: @yellow; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
> td.small-col { |
|||
width: 30px; |
|||
} |
|||
|
|||
> td.name { |
|||
width: 150px; |
|||
font-weight: 600; |
|||
} |
|||
> td.time { |
|||
text-align: right; |
|||
width: 100px; |
|||
} |
|||
> td { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
& > td > a {color: #444;} |
|||
} |
|||
} |
|||
|
|||
@media (max-width: @screen-sm-max) { |
|||
.nav-stacked { |
|||
> li:not(.header) { |
|||
float: left; |
|||
width: 50%; |
|||
&.header { |
|||
border: 0!important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-form { |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,345 @@ |
|||
/* |
|||
* General: Miscellaneous |
|||
* ---------------------- |
|||
*/ |
|||
/* 10px padding and margins */ |
|||
.pad { |
|||
padding: 10px; |
|||
} |
|||
.margin { |
|||
margin: 10px; |
|||
} |
|||
.margin-bottom { |
|||
margin-bottom: 20px; |
|||
} |
|||
/* Display inline */ |
|||
.inline { |
|||
display: inline; |
|||
width: auto; |
|||
} |
|||
|
|||
/* 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-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; |
|||
} |
|||
|
|||
/*Hide elements by display none only*/ |
|||
.hide { |
|||
display: none !important; |
|||
} |
|||
|
|||
/* Remove borders */ |
|||
.no-border { |
|||
border: 0px !important; |
|||
} |
|||
/* Remove padding */ |
|||
.no-padding { |
|||
padding: 0px !important; |
|||
} |
|||
/* Remove margins */ |
|||
.no-margin { |
|||
margin: 0px !important; |
|||
} |
|||
|
|||
/* Remove box shadow */ |
|||
.no-shadow { |
|||
box-shadow: none!important; |
|||
} |
|||
|
|||
/* Unstyled List */ |
|||
.list-unstyled { |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/* Remove border radius */ |
|||
.flat { |
|||
.border-radius(0)!important; |
|||
} |
|||
|
|||
.text-bold { |
|||
&, &.table td, &.table th { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
/* _fix for sparkline tooltip */ |
|||
.jqstooltip{ |
|||
padding: 5px!important; |
|||
width:auto!important; |
|||
height:auto!important; |
|||
} |
|||
|
|||
/* |
|||
Gradient Background colors |
|||
*/ |
|||
.bg-teal-gradient { |
|||
.gradient(@teal; @teal; lighten(@teal, 16%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-light-blue-gradient { |
|||
.gradient(@light-blue; @light-blue; lighten(@light-blue, 12%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-blue-gradient { |
|||
.gradient(@blue; @blue; lighten(@blue, 7%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-aqua-gradient { |
|||
.gradient(@aqua; @aqua; lighten(@aqua, 7%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-yellow-gradient { |
|||
.gradient(@yellow; @yellow; lighten(@yellow, 16%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-purple-gradient { |
|||
.gradient(@purple; @purple; lighten(@purple, 16%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-green-gradient { |
|||
.gradient(@green; @green; lighten(@green, 7%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-red-gradient { |
|||
.gradient(@red; @red; lighten(@red, 10%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-black-gradient { |
|||
.gradient(@black; @black; lighten(@black, 10%))!important; |
|||
color: #fff; |
|||
} |
|||
.bg-maroon-gradient { |
|||
.gradient(@maroon; @maroon; lighten(@maroon, 10%))!important; |
|||
color: #fff; |
|||
} |
|||
.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); |
|||
} |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
//AdminLTE mixins |
|||
//=============== |
|||
|
|||
//Changes the color and the hovering properties of the navbar |
|||
.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 { |
|||
background: @hover-bg; |
|||
color: @hover-color; |
|||
} |
|||
|
|||
.navbar-custom-menu > .nav { |
|||
margin-right: 10px; |
|||
} |
|||
//Add color to the sidebar toggle button |
|||
.sidebar-toggle { |
|||
color: @font-color; |
|||
&:hover { |
|||
color: @hover-color; |
|||
background: @hover-bg; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//Logo color variation |
|||
.logo-variant(@bg-color; @color: #fff; @border-bottom-color: transparent; @border-bottom-width: 0px) { |
|||
background-color: @bg-color; |
|||
color: @color; |
|||
border-bottom: @border-bottom-width solid @border-bottom-color; |
|||
> a { |
|||
color: @color; |
|||
} |
|||
|
|||
&:hover { |
|||
background: darken(@bg-color, 1%); |
|||
} |
|||
} |
|||
|
|||
//Box solid color variantion creator |
|||
.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 |
|||
.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 |
|||
.border-radius(@radius) { |
|||
border-radius: @radius; |
|||
} |
|||
//Different radius each side |
|||
.border-radius(@top-left; @top-right; @bottom-left; @bottom-right) { |
|||
border-top-left-radius: @top-left; |
|||
border-top-right-radius: @top-right; |
|||
border-bottom-right-radius: @bottom-right; |
|||
border-bottom-left-radius: @bottom-left; |
|||
} |
|||
|
|||
//Gradient background |
|||
.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); |
|||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); |
|||
} |
|||
@ -0,0 +1,73 @@ |
|||
/* |
|||
* Component: modal |
|||
* ---------------- |
|||
*/ |
|||
.modal { |
|||
background: rgba(0,0,0,.3); |
|||
} |
|||
.modal-content { |
|||
.border-radius(0); |
|||
.box-shadow(0 2px 3px rgba(0,0,0,.125))!important; |
|||
border: 0; |
|||
@media (min-width: @screen-sm-min) { |
|||
.box-shadow(0 2px 3px rgba(0,0,0,.125))!important; |
|||
} |
|||
} |
|||
.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%); |
|||
} |
|||
} |
|||
@ -0,0 +1,170 @@ |
|||
/* |
|||
* Component: Nav |
|||
* -------------- |
|||
*/ |
|||
|
|||
/* NAV PILLS */ |
|||
.nav-pills { |
|||
> li > a { |
|||
.border-radius(0); |
|||
border-top: 3px solid transparent; |
|||
color: #444; |
|||
> .fa, |
|||
> .glyphicon, |
|||
> .ion { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
> li.active > a, |
|||
> li.active > a:hover { |
|||
background-color: #f4f4f4; |
|||
border-top-color: @light-blue; |
|||
color: #444; |
|||
} |
|||
> li.active > a { |
|||
font-weight: 600; |
|||
} |
|||
> li > a:hover { |
|||
background-color: #f6f6f6; |
|||
} |
|||
} |
|||
/* NAV STACKED */ |
|||
.nav-stacked { |
|||
> li > a { |
|||
.border-radius(0); |
|||
border-top: 0; |
|||
border-left: 3px solid transparent; |
|||
color: #444; |
|||
} |
|||
> li.active > a, |
|||
> li.active > a:hover { |
|||
background-color: #f4f4f4; |
|||
border-top: 0; |
|||
border-left-color: @light-blue; |
|||
color: #444; |
|||
} |
|||
|
|||
> 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; |
|||
.border-top-radius(@box-border-radius); |
|||
> li { |
|||
border-top: 3px solid transparent; |
|||
margin-bottom: -2px; |
|||
> a { |
|||
.border-radius(0)!important; |
|||
&, |
|||
&:hover { |
|||
background: transparent; |
|||
margin: 0; |
|||
} |
|||
} |
|||
&: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; |
|||
|
|||
} |
|||
> a { |
|||
border-top: 0; |
|||
border-left-color: #f4f4f4; |
|||
border-right-color: #f4f4f4; |
|||
} |
|||
|
|||
} |
|||
|
|||
> li:first-of-type { |
|||
margin-left: 0; |
|||
&.active { |
|||
> a { |
|||
border-left-width: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//Pulled to the right |
|||
&.pull-right { |
|||
float: none!important; |
|||
> li { |
|||
float: right; |
|||
} |
|||
> li:first-of-type { |
|||
margin-right: 0; |
|||
&.active { |
|||
> a { |
|||
border-left-width: 1px; |
|||
border-right-width: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
> 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; |
|||
.border-bottom-radius(@box-border-radius); |
|||
} |
|||
} |
|||
|
|||
/* Nav tabs bottom */ |
|||
.tabs-bottom { |
|||
&.nav-3 { |
|||
li a { |
|||
width: percentage(100/3)!important; |
|||
} |
|||
} |
|||
li a { |
|||
border: 0; |
|||
} |
|||
} |
|||
|
|||
/* PAGINATION */ |
|||
.pagination { |
|||
> li > a { |
|||
background: #fafafa; |
|||
color: #666; |
|||
} |
|||
> li:first-of-type a, |
|||
> li:last-of-type a { |
|||
.border-radius(0); |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
/* |
|||
* Component: Products List |
|||
* ------------------------ |
|||
*/ |
|||
.products-list { |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
> .item { |
|||
.border-radius(@box-border-radius); |
|||
.box-shadow(@box-boxshadow); |
|||
.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 { |
|||
.box-shadow(none); |
|||
.border-radius(0); |
|||
border-bottom: 1px solid @box-border-color; |
|||
&:last-of-type { |
|||
border-bottom-width: 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
/* |
|||
* Component: Progress Bar |
|||
* ----------------------- |
|||
*/ |
|||
|
|||
//General CSS |
|||
.progress, |
|||
.progress > .progress-bar { |
|||
.box-shadow(none); |
|||
&, .progress-bar { |
|||
.border-radius(@progress-bar-border-radius); |
|||
} |
|||
} |
|||
|
|||
/* size variation */ |
|||
.progress.sm, |
|||
.progress-sm { |
|||
height: 10px; |
|||
&, .progress-bar { |
|||
.border-radius(@progress-bar-sm-border-radius); |
|||
} |
|||
} |
|||
.progress.xs, |
|||
.progress-xs { |
|||
height: 7px; |
|||
&, .progress-bar { |
|||
.border-radius(@progress-bar-xs-border-radius); |
|||
} |
|||
} |
|||
.progress.xxs, |
|||
.progress-xxs { |
|||
height: 3px; |
|||
&, .progress-bar { |
|||
.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%!important; |
|||
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 { |
|||
.progress-bar-variant(@light-blue); |
|||
} |
|||
.progress-bar-green, |
|||
.progress-bar-success { |
|||
.progress-bar-variant(@green); |
|||
} |
|||
|
|||
.progress-bar-aqua, |
|||
.progress-bar-info { |
|||
.progress-bar-variant(@aqua); |
|||
} |
|||
|
|||
.progress-bar-yellow, |
|||
.progress-bar-warning { |
|||
.progress-bar-variant(@yellow); |
|||
} |
|||
|
|||
.progress-bar-red, |
|||
.progress-bar-danger { |
|||
.progress-bar-variant(@red); |
|||
} |
|||
@ -0,0 +1,150 @@ |
|||
/* |
|||
* Component: Sidebar |
|||
* ------------------ |
|||
*/ |
|||
//Main Sidebar |
|||
// ``` .left-side has been deprecated in favor of .main-sidebar ``` |
|||
|
|||
.main-sidebar, |
|||
.left-side { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
padding-top: 50px; |
|||
height: 100%; |
|||
width: @sidebar-width; |
|||
z-index: 810; |
|||
.transition-transform(@transition-speed @transition-fn); |
|||
@media (max-width: @screen-xs-max) { |
|||
.translate(-@sidebar-width, 0); |
|||
} |
|||
.sidebar-collapse & { |
|||
@media (min-width: @screen-sm) { |
|||
.translate(-@sidebar-width, 0); |
|||
} |
|||
} |
|||
|
|||
.sidebar-open & { |
|||
@media (max-width: @screen-xs-max) { |
|||
.translate(0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar { |
|||
padding-bottom: 10px; |
|||
.fixed & { |
|||
overflow: auto; |
|||
height: 100%; |
|||
} |
|||
} |
|||
// remove border from form |
|||
.sidebar-form { |
|||
input:focus { |
|||
border-color: transparent!important; |
|||
} |
|||
} |
|||
|
|||
//Sidebar user panel |
|||
.user-panel { |
|||
padding: 10px; |
|||
.clearfix(); |
|||
> .image > img { |
|||
width: 45px; |
|||
height: 45px; |
|||
} |
|||
> .info { |
|||
font-weight: 600; |
|||
padding: 5px 5px 5px 15px; |
|||
font-size: 14px; |
|||
line-height: 1; |
|||
} |
|||
> .info > p { |
|||
margin-bottom: 9px; |
|||
} |
|||
> .info > a { |
|||
text-decoration: none; |
|||
padding-right: 5px; |
|||
margin-top: 3px; |
|||
font-size: 11px; |
|||
font-weight: normal; |
|||
> .fa, > .ion, > .glyphicon { |
|||
margin-right: 3px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Sidebar menu |
|||
.sidebar-menu { |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
|
|||
> 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 { |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
//All skins in one file |
|||
@import "skin-blue.less"; |
|||
@import "skin-black.less"; |
|||
@import "skin-green.less"; |
|||
@import "skin-red.less"; |
|||
@import "skin-yellow.less"; |
|||
@import "skin-purple.less"; |
|||
@ -0,0 +1,149 @@ |
|||
/* |
|||
* 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 { |
|||
.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 { |
|||
.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 { |
|||
.logo-variant(#fff; #333); |
|||
border-right: 1px solid #eee; |
|||
@media (max-width: @screen-header-collapse) { |
|||
.logo-variant(#222; #fff); |
|||
border-right: none; |
|||
} |
|||
} |
|||
|
|||
li.user-header { |
|||
background-color: #222; |
|||
} |
|||
} |
|||
|
|||
//Content Header |
|||
.content-header { |
|||
background: transparent; |
|||
box-shadow: none; |
|||
} |
|||
//User Panel (resides in sidebar) |
|||
.user-panel { |
|||
> .image > img { |
|||
border: 1px solid #444; |
|||
} |
|||
|
|||
> .info, > .info > a { |
|||
color: #eee; |
|||
} |
|||
} |
|||
//Sidebar & Treeview |
|||
// Sidebar color |
|||
.main-sidebar, |
|||
.left-side, |
|||
.wrapper { |
|||
background: #222; |
|||
} |
|||
// the menu |
|||
.sidebar > .sidebar-menu > li { |
|||
&.header { |
|||
background: darken(#222, 2%); |
|||
color: rgba(255, 255, 255, .4); |
|||
} |
|||
> a { |
|||
margin-right: 1px; |
|||
border-left: 3px solid transparent; |
|||
} |
|||
//Hover and active states |
|||
> a:hover, |
|||
&.active > a { |
|||
color: #fff; |
|||
background: #444; |
|||
border-left-color: #fff; |
|||
} |
|||
|
|||
> .treeview-menu { |
|||
background: #333; |
|||
} |
|||
} |
|||
|
|||
.sidebar a { |
|||
color: #eee; |
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
// skin blue treeview-menu |
|||
.treeview-menu { |
|||
> li { |
|||
> a { |
|||
color: #ccc; |
|||
} |
|||
&.active > a, |
|||
> a:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//Sidebar Search Form |
|||
.sidebar-form { |
|||
.border-radius(3px); |
|||
border: 1px solid lighten(#222, 10%); |
|||
margin: 10px 10px; |
|||
input[type="text"], .btn { |
|||
box-shadow: none; |
|||
background-color: lighten(#222, 10%); |
|||
border: 1px solid transparent; |
|||
height: 35px; |
|||
.transition(all @transition-speed @transition-fn); |
|||
} |
|||
input[type="text"] { |
|||
color: #666; |
|||
.border-radius(2px, 0, 2px, 0) !important; |
|||
&:focus, &:focus + .input-group-btn .btn { |
|||
background-color: #fff; |
|||
color: #666; |
|||
} |
|||
&:focus + .input-group-btn .btn { |
|||
border-left-color: #fff; |
|||
} |
|||
} |
|||
.btn { |
|||
color: #999; |
|||
.border-radius(0, 2px, 0, 2px) !important; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,140 @@ |
|||
/* |
|||
* Skin: Blue |
|||
* ---------- |
|||
*/ |
|||
@import "../../bootstrap-less/mixins.less"; |
|||
@import "../../bootstrap-less/variables.less"; |
|||
@import "../variables.less"; |
|||
@import "../mixins.less"; |
|||
|
|||
.skin-blue { |
|||
//Navbar |
|||
.main-header { |
|||
.navbar { |
|||
.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 { |
|||
.logo-variant(darken(@light-blue, 5%)); |
|||
} |
|||
|
|||
li.user-header { |
|||
background-color: @light-blue; |
|||
} |
|||
} |
|||
|
|||
//Content Header |
|||
.content-header { |
|||
background: transparent; |
|||
} |
|||
|
|||
//User Panel (resides in the sidebar) |
|||
.user-panel { |
|||
|
|||
> .info, > .info > a { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//Sidebar & Treeview menu |
|||
// the menu |
|||
.sidebar-menu > li { |
|||
&.header { |
|||
color: lighten(@sidebar-dark-bg, 20%); |
|||
background: darken(@sidebar-dark-bg, 4%); |
|||
} |
|||
> a { |
|||
border-left: 3px solid transparent; |
|||
margin-right: 1px; |
|||
} |
|||
//Hover and active states |
|||
> a:hover, &.active > a { |
|||
color: @sidebar-dark-hover-color; |
|||
background: @sidebar-dark-hover-bg; |
|||
border-left-color: @light-blue; |
|||
} |
|||
|
|||
> .treeview-menu { |
|||
margin: 0 1px; |
|||
background: @sidebar-dark-submenu-bg; |
|||
} |
|||
} |
|||
|
|||
// Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color) |
|||
.wrapper, |
|||
.main-sidebar, |
|||
.left-side { |
|||
background: @sidebar-dark-bg; |
|||
} |
|||
|
|||
.sidebar a { |
|||
color: @sidebar-dark-color; |
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
// skin blue treeview-menu |
|||
.treeview-menu { |
|||
> li { |
|||
> a { |
|||
color: @sidebar-dark-submenu-color; |
|||
} |
|||
&.active > a, > a:hover { |
|||
color: @sidebar-dark-submenu-hover-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar-form { |
|||
.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; |
|||
.border-radius(2px, 0, 2px, 0) !important; |
|||
&:focus, &:focus + .input-group-btn .btn { |
|||
background-color: #fff; |
|||
color: #666; |
|||
} |
|||
&:focus + .input-group-btn .btn { |
|||
border-left-color: #fff; |
|||
} |
|||
} |
|||
.btn { |
|||
color: #999; |
|||
.border-radius(0, 2px, 0, 2px) !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.skin-blue.layout-top-nav .main-header > .logo { |
|||
.logo-variant(@light-blue); |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
/* |
|||
* Skin: Green |
|||
* ----------- |
|||
*/ |
|||
|
|||
@import "../../bootstrap-less/mixins.less"; |
|||
@import "../../bootstrap-less/variables.less"; |
|||
@import "../variables.less"; |
|||
@import "../mixins.less"; |
|||
|
|||
.skin-green { |
|||
//Navbar |
|||
.main-header { |
|||
.navbar { |
|||
.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 { |
|||
.logo-variant(darken(@green, 5%)); |
|||
} |
|||
|
|||
li.user-header { |
|||
background-color: @green; |
|||
} |
|||
} |
|||
|
|||
//Content Header |
|||
.content-header { |
|||
background: transparent; |
|||
} |
|||
|
|||
//User Panel (resides in the sidebar) |
|||
.user-panel { |
|||
|
|||
> .info, > .info > a { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//Sidebar & Treeview menu |
|||
// the menu |
|||
.sidebar-menu > li { |
|||
&.header { |
|||
color: lighten(@sidebar-dark-bg, 20%); |
|||
background: darken(@sidebar-dark-bg, 4%); |
|||
} |
|||
> a { |
|||
border-left: 3px solid transparent; |
|||
margin-right: 1px; |
|||
} |
|||
//Hover and active states |
|||
> a:hover, &.active > a { |
|||
color: @sidebar-dark-hover-color; |
|||
background: @sidebar-dark-hover-bg; |
|||
border-left-color: @green; |
|||
} |
|||
|
|||
> .treeview-menu { |
|||
margin: 0 1px; |
|||
background: @sidebar-dark-submenu-bg; |
|||
} |
|||
} |
|||
|
|||
// Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color) |
|||
.wrapper , |
|||
.main-sidebar, |
|||
.left-side { |
|||
background: @sidebar-dark-bg; |
|||
} |
|||
|
|||
.sidebar a { |
|||
color: @sidebar-dark-color; |
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
// skin blue treeview-menu |
|||
.treeview-menu { |
|||
> li { |
|||
> a {color: @sidebar-dark-submenu-color;} |
|||
&.active > a, > a:hover { |
|||
color: @sidebar-dark-submenu-hover-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar-form { |
|||
.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; |
|||
.border-radius(2px, 0, 2px, 0)!important; |
|||
&:focus, &:focus + .input-group-btn .btn { |
|||
background-color: #fff; |
|||
color: #666; |
|||
} |
|||
&:focus + .input-group-btn .btn { |
|||
border-left-color: #fff; |
|||
} |
|||
} |
|||
.btn { |
|||
color: #999; |
|||
.border-radius(0, 2px, 0, 2px)!important; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
/* |
|||
* Skin: Purple |
|||
* ------------ |
|||
*/ |
|||
|
|||
@import "../../bootstrap-less/mixins.less"; |
|||
@import "../../bootstrap-less/variables.less"; |
|||
@import "../variables.less"; |
|||
@import "../mixins.less"; |
|||
|
|||
.skin-purple { |
|||
//Navbar |
|||
.main-header { |
|||
.navbar { |
|||
.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 { |
|||
.logo-variant(darken(@purple, 5%)); |
|||
} |
|||
|
|||
li.user-header { |
|||
background-color: @purple; |
|||
} |
|||
} |
|||
|
|||
//Content Header |
|||
.content-header { |
|||
background: transparent; |
|||
} |
|||
|
|||
//User Panel (resides in the sidebar) |
|||
.user-panel { |
|||
|
|||
> .info, > .info > a { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//Sidebar & Treeview menu |
|||
// the menu |
|||
.sidebar-menu > li { |
|||
&.header { |
|||
color: lighten(@sidebar-dark-bg, 20%); |
|||
background: darken(@sidebar-dark-bg, 4%); |
|||
} |
|||
> a { |
|||
border-left: 3px solid transparent; |
|||
margin-right: 1px; |
|||
} |
|||
//Hover and active states |
|||
> a:hover, &.active > a { |
|||
color: @sidebar-dark-hover-color; |
|||
background: @sidebar-dark-hover-bg; |
|||
border-left-color: @purple; |
|||
} |
|||
|
|||
> .treeview-menu { |
|||
margin: 0 1px; |
|||
background: @sidebar-dark-submenu-bg; |
|||
} |
|||
} |
|||
|
|||
// Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color) |
|||
.wrapper , |
|||
.main-sidebar, |
|||
.left-side { |
|||
background: @sidebar-dark-bg; |
|||
} |
|||
|
|||
.sidebar a { |
|||
color: @sidebar-dark-color; |
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
// skin blue treeview-menu |
|||
.treeview-menu { |
|||
> li { |
|||
> a {color: @sidebar-dark-submenu-color;} |
|||
&.active > a, > a:hover { |
|||
color: @sidebar-dark-submenu-hover-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar-form { |
|||
.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; |
|||
.border-radius(2px, 0, 2px, 0)!important; |
|||
&:focus, &:focus + .input-group-btn .btn { |
|||
background-color: #fff; |
|||
color: #666; |
|||
} |
|||
&:focus + .input-group-btn .btn { |
|||
border-left-color: #fff; |
|||
} |
|||
} |
|||
.btn { |
|||
color: #999; |
|||
.border-radius(0, 2px, 0, 2px)!important; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
/* |
|||
* Skin: Red |
|||
* --------- |
|||
*/ |
|||
|
|||
@import "../../bootstrap-less/mixins.less"; |
|||
@import "../../bootstrap-less/variables.less"; |
|||
@import "../variables.less"; |
|||
@import "../mixins.less"; |
|||
|
|||
.skin-red { |
|||
//Navbar |
|||
.main-header { |
|||
.navbar { |
|||
.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 { |
|||
.logo-variant(darken(@red, 5%)); |
|||
} |
|||
|
|||
li.user-header { |
|||
background-color: @red; |
|||
} |
|||
} |
|||
|
|||
//Content Header |
|||
.content-header { |
|||
background: transparent; |
|||
} |
|||
|
|||
//User Panel (resides in the sidebar) |
|||
.user-panel { |
|||
|
|||
> .info, > .info > a { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//Sidebar & Treeview menu |
|||
// the menu |
|||
.sidebar-menu > li { |
|||
&.header { |
|||
color: lighten(@sidebar-dark-bg, 20%); |
|||
background: darken(@sidebar-dark-bg, 4%); |
|||
} |
|||
> a { |
|||
border-left: 3px solid transparent; |
|||
margin-right: 1px; |
|||
} |
|||
//Hover and active states |
|||
> a:hover, &.active > a { |
|||
color: @sidebar-dark-hover-color; |
|||
background: @sidebar-dark-hover-bg; |
|||
border-left-color: @red; |
|||
} |
|||
|
|||
> .treeview-menu { |
|||
margin: 0 1px; |
|||
background: @sidebar-dark-submenu-bg; |
|||
} |
|||
} |
|||
|
|||
// Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color) |
|||
.wrapper , |
|||
.main-sidebar, |
|||
.left-side { |
|||
background: @sidebar-dark-bg; |
|||
} |
|||
|
|||
.sidebar a { |
|||
color: @sidebar-dark-color; |
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
// skin blue treeview-menu |
|||
.treeview-menu { |
|||
> li { |
|||
> a {color: @sidebar-dark-submenu-color;} |
|||
&.active > a, > a:hover { |
|||
color: @sidebar-dark-submenu-hover-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar-form { |
|||
.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; |
|||
.border-radius(2px, 0, 2px, 0)!important; |
|||
&:focus, &:focus + .input-group-btn .btn { |
|||
background-color: #fff; |
|||
color: #666; |
|||
} |
|||
&:focus + .input-group-btn .btn { |
|||
border-left-color: #fff; |
|||
} |
|||
} |
|||
.btn { |
|||
color: #999; |
|||
.border-radius(0, 2px, 0, 2px)!important; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,135 @@ |
|||
/* |
|||
* Skin: Yellow |
|||
* ------------ |
|||
*/ |
|||
|
|||
@import "../../bootstrap-less/mixins.less"; |
|||
@import "../../bootstrap-less/variables.less"; |
|||
@import "../variables.less"; |
|||
@import "../mixins.less"; |
|||
|
|||
.skin-yellow { |
|||
//Navbar |
|||
.main-header { |
|||
.navbar { |
|||
.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 { |
|||
.logo-variant(darken(@yellow, 5%)); |
|||
} |
|||
|
|||
li.user-header { |
|||
background-color: @yellow; |
|||
} |
|||
} |
|||
|
|||
//Content Header |
|||
.content-header { |
|||
background: transparent; |
|||
} |
|||
|
|||
//User Panel (resides in the sidebar) |
|||
.user-panel { |
|||
|
|||
> .info, > .info > a { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
//Sidebar & Treeview menu |
|||
// the menu |
|||
.sidebar-menu > li { |
|||
&.header { |
|||
color: lighten(@sidebar-dark-bg, 20%); |
|||
background: darken(@sidebar-dark-bg, 4%); |
|||
} |
|||
> a { |
|||
border-left: 3px solid transparent; |
|||
margin-right: 1px; |
|||
} |
|||
//Hover and active states |
|||
> a:hover, &.active > a { |
|||
color: @sidebar-dark-hover-color; |
|||
background: @sidebar-dark-hover-bg; |
|||
border-left-color: @yellow; |
|||
} |
|||
|
|||
> .treeview-menu { |
|||
margin: 0 1px; |
|||
background: @sidebar-dark-submenu-bg; |
|||
} |
|||
} |
|||
|
|||
// Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color) |
|||
.wrapper , |
|||
.main-sidebar, |
|||
.left-side { |
|||
background: @sidebar-dark-bg; |
|||
} |
|||
|
|||
.sidebar a { |
|||
color: @sidebar-dark-color; |
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
// skin blue treeview-menu |
|||
.treeview-menu { |
|||
> li { |
|||
> a {color: @sidebar-dark-submenu-color;} |
|||
&.active > a, > a:hover { |
|||
color: @sidebar-dark-submenu-hover-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sidebar-form { |
|||
.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; |
|||
.border-radius(2px, 0, 2px, 0)!important; |
|||
&:focus, &:focus + .input-group-btn .btn { |
|||
background-color: #fff; |
|||
color: #666; |
|||
} |
|||
&:focus + .input-group-btn .btn { |
|||
border-left-color: #fff; |
|||
} |
|||
} |
|||
.btn { |
|||
color: #999; |
|||
.border-radius(0, 2px, 0, 2px)!important; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,89 @@ |
|||
/* |
|||
* Component: Small Box |
|||
* -------------------- |
|||
*/ |
|||
|
|||
.small-box { |
|||
.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: @screen-xs-max) { |
|||
// No need for icons on very small devices |
|||
.small-box { |
|||
text-align: center; |
|||
.icon { |
|||
display: none; |
|||
} |
|||
p { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
@ -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; |
|||
} |
|||
} |
|||
@ -0,0 +1,98 @@ |
|||
/* |
|||
* Component: Timeline |
|||
* ------------------- |
|||
*/ |
|||
|
|||
.timeline{ |
|||
position: relative; |
|||
margin: 0 0 30px 0; |
|||
padding: 0; |
|||
list-style: none; |
|||
|
|||
// The line |
|||
&:before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0px; |
|||
bottom: 0; |
|||
width: 4px; |
|||
background: #ddd; |
|||
left: 31px; |
|||
margin: 0; |
|||
.border-radius(2px); |
|||
} |
|||
|
|||
|
|||
> li { |
|||
position: relative; |
|||
margin-right: 10px; |
|||
margin-bottom: 15px; |
|||
.clearfix(); |
|||
|
|||
// The content |
|||
> .timeline-item { |
|||
.box-shadow(@box-boxshadow); |
|||
.border-radius(@box-border-radius); |
|||
margin-top: 0px; |
|||
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; |
|||
} |
|||
|
|||
} |
|||
|
|||
// Time label |
|||
&.time-label { |
|||
> span { |
|||
font-weight: 600; |
|||
padding: 5px; |
|||
display: inline-block; |
|||
background-color: #fff; |
|||
|
|||
.border-radius(4px); |
|||
} |
|||
} |
|||
|
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
/* |
|||
* Component: Users List |
|||
* --------------------- |
|||
*/ |
|||
.users-list { |
|||
&:extend(.list-unstyled); |
|||
> li { |
|||
width: 25%; |
|||
float: left; |
|||
padding: 10px; |
|||
text-align: center; |
|||
> img { |
|||
.border-radius(50%); |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
} |
|||
} |
|||
.users-list-name, |
|||
.users-list-date { |
|||
display: block; |
|||
} |
|||
.users-list-name { |
|||
font-weight: 600; |
|||
color: #444; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
&:hover { |
|||
color: #999; |
|||
} |
|||
} |
|||
.users-list-date { |
|||
color: #999; |
|||
font-size: 12px; |
|||
} |
|||
@ -0,0 +1,102 @@ |
|||
//AdminLTE 2 Variables.less |
|||
//========================= |
|||
|
|||
//COLORS |
|||
//-------------------------------------------------------- |
|||
|
|||
@light-blue: #3c8dbc; //Primary |
|||
@red: #dd4b39; //Danger |
|||
@green: #00a65a; //Success |
|||
@aqua: #00c0ef; //Info |
|||
@yellow: #f39c12; //Warning |
|||
@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; |
|||
//Bosex layout maximum width |
|||
@boxed-layout-max-width: 1024px; |
|||
//When the logo should go to the top of the screen |
|||
@screen-header-collapse: @screen-xs-max; |
|||
|
|||
//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;//darken(#f4f5f7, 4%); |
|||
|
|||
//SIDEBAR SKINS |
|||
//-------------------------------------------------------- |
|||
|
|||
//skin blue (light) sidebar vars |
|||
@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-border: #dbdbdb; |
|||
@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; |
|||
|
|||
//BOXES |
|||
//-------------------------------------------------------- |
|||
@box-border-color: #f4f4f4; |
|||
@box-border-radius: 3px; |
|||
@box-footer-bg: #fff; |
|||
@box-boxshadow: 0 1px 1px rgba(0, 0, 0, .1); |
|||
@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: 0px; |
|||
|
|||
//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: cubic-bezier(0.32,1.25,0.375,1.15); |
|||
@ -0,0 +1,33 @@ |
|||
CHANGE LOG: |
|||
|
|||
v2.0 |
|||
- Major layout bug fixes |
|||
- Change in layout mark up |
|||
- Added transitions to the sidebar |
|||
- New skins and modified previous skins |
|||
- Change in color scheme to a more complementing scheme |
|||
- Added footer support |
|||
- Removed pace.js from the main app.js |
|||
- Added support for collapsed sidebar as an initial state (add .sidebar-collapse to the body tag) |
|||
- Added boxed layout (.layout-boxed) |
|||
- Enhanced consistency in padding and margining |
|||
- Updated Bootstrap to 3.3.2 |
|||
- Fixed navbar dropdown menu on small screens positioning issues. |
|||
- Updated Ion Icons to 2.0.0 |
|||
- Updated FontAwesome to 4.3.0 |
|||
- Added ChartJS 1.0.1 |
|||
- Removed iCheck dependency |
|||
- Created Dashboard 2.0 |
|||
- Created new Chat widget (DirectChat) |
|||
- Added transitions to DirectChat |
|||
- Added contacts pane to DirectChat |
|||
- Changed .right-side to .content-wrapper |
|||
- Changed .navbar-right to .navbar-custom-menu |
|||
- Removed unused files |
|||
- Updated lockscreen style (HTML markup changed!) |
|||
- Updated Login & Registration pages (HTML markup changed!) |
|||
- Updated buttons style. |
|||
- Enhanced border-radius consistency |
|||
- Added mailbox: inbox, read, and compose pages |
|||
- Bootstrap & jQuery are now hosted locally |
|||
- Created documentation. |
|||
@ -0,0 +1,26 @@ |
|||
{ |
|||
"name": "almasaeed2010/adminlte", |
|||
"description": "AdminLTE - admin control panel and dashboard that's based on Bootstrap 3", |
|||
"homepage": "http://almsaeedstudio.com/", |
|||
"keywords": [ |
|||
"css", |
|||
"js", |
|||
"less", |
|||
"responsive", |
|||
"back-end", |
|||
"template", |
|||
"theme", |
|||
"web", |
|||
"admin" |
|||
], |
|||
"authors": [ |
|||
{ |
|||
"name": "Abdullah Almsaeed", |
|||
"email": "support@almsaeedstudio.com" |
|||
} |
|||
], |
|||
"license": "MIT", |
|||
"support": { |
|||
"issues": "https://github.com/almasaeed2010/AdminLTE/issues" |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"name": "AdminLTE", |
|||
"version": "2.0.0", |
|||
"devDependencies": { |
|||
"grunt": "~0.4.5", |
|||
"grunt-contrib-less": "~0.12.0", |
|||
"grunt-contrib-watch": "~0.6.1", |
|||
"grunt-contrib-uglify": "~0.7.0" |
|||
} |
|||
} |
|||
Loading…
Reference in new issue