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