Mirrors/erikflowers_weather-icons
2
0
Fork 0
mirror of https://github.com/erikflowers/weather-icons.git synced 2025-10-13 16:02:11 -06:00
Code Issues Releases Wiki Activity

First non-working commit

Browse Source
This commit is contained in:
Erik Flowers 2013-06-29 16:08:56 -06:00
parent ba8b729cb4
commit 34346078c7
58 changed files with 9914 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
weather icons project.sublime-project
weather icons project.sublime-workspace
public/*

55
src/cs/scripts.coffee Normal file
View File

@ -0,0 +1,55 @@
# Simple Weather Plugin
$.simpleWeather
zipcode: "84095"
woeid: "2496395"
location: ""
unit: "f"
success: (weather) ->
html = "
<section class=\"weather container\">
<div class=\"row-fluid\">
<div class=\"col-sm-12\">
<div class=\"currently\">Partly Cloudy</div>
</div>
</div>
<div class=\"row-fluid\">
<div class=\"col-sm-12\">
<div class=\"mainTemp\">
<div class=\"temp\">" + weather.temp + "&deg;</div>
<div class=\"highLow\">
<div class=\"high\">" + weather.high + "</div>
<div class=\"low\">" + weather.low + "</div>
</div>
</div>
<div class=\"mainIcon\"><i class=\"weather-" +weather.code+ "-" +weather.timeOfDay+ "\"></i></div>
</div>
</div>
<div class=\"row-fluid\">
<div class=\"col-sm-12\">
<div class=\"tomorrow weatherseparator\">
<div class=\"day\"><span class=\"name\">Saturday</span><span class=\"condition\">Sunny</span></div>
<div class=\"temps\"><i class=\"weather-" +weather.tomorrow.code+ "-" +weather.timeOfDay+ " tomorrow-icon\"></i><span class=\"high\">" + weather.tomorrow.high + "</span><span class=\"low\">"+ weather.tomorrow.low + "</span></div>
</div>
</div>
</div>
</section>
"
$("#weather").html html
error: (error) ->
$("#weather").html "<p>" + error + "</p>"
#html += "<div class=\"city\">" + weather.city + ", " + weather.region + "</div>"
# html += "<a href=\"" + weather.link + "\">View Forecast &raquo;</a>"

74
src/index.jade Normal file
View File

@ -0,0 +1,74 @@
!!! 5
html(lang="en")
head
title Demo Homepage
//- meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no')
script(src='//code.jquery.com/jquery-latest.min.js')
script(src='//use.typekit.net/xmb4mjl.js')
script
try{Typekit.load();}catch(e){}
script(src='js/bootstrap.min.js')
script(src='js/scripts.js')
link(rel='stylesheet', href='css/styles.css')
link(rel='stylesheet', href='css/weather.css')
body
section.content.container
.row
.col-sm-12
p.examples a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0
p.examples A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0
p.examples * / , ! \ { } " "
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space
p space

34
src/less/bootstrap/accordion.less Normal file
View File

@ -0,0 +1,34 @@
//
// Accordion
// --------------------------------------------------
// Parent container
.accordion {
margin-bottom: @line-height-computed;
}
// Group == heading + body
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
border-radius: @border-radius-base;
}
.accordion-heading {
border-bottom: 0;
}
.accordion-heading .accordion-toggle {
display: block;
padding: 8px 15px;
}
// General toggle styles
.accordion-toggle {
cursor: pointer;
}
// Inner needs the styles because you can't animate properly with any styles on the element
.accordion-inner {
padding: 9px 15px;
border-top: 1px solid #e5e5e5;
}

92
src/less/bootstrap/alerts.less Normal file
View File

@ -0,0 +1,92 @@
//
// Alerts
// --------------------------------------------------
// Base styles
// -------------------------
.alert {
padding: 10px 35px 10px 15px;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
border-radius: @alert-border-radius;
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Match the hr to the border of the alert
hr {
border-top-color: darken(@alert-border, 5%);
}
// Provide class for links that match alerts
.alert-link {
font-weight: 500;
color: darken(@alert-text, 10%);
}
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
// -------------------------
.alert-success {
background-color: @alert-success-bg;
border-color: @alert-success-border;
color: @alert-success-text;
hr {
border-top-color: darken(@alert-success-border, 5%);
}
.alert-link {
color: darken(@alert-success-text, 10%);
}
}
.alert-danger {
background-color: @alert-danger-bg;
border-color: @alert-danger-border;
color: @alert-danger-text;
hr {
border-top-color: darken(@alert-danger-border, 5%);
}
.alert-link {
color: darken(@alert-danger-text, 10%);
}
}
.alert-info {
background-color: @alert-info-bg;
border-color: @alert-info-border;
color: @alert-info-text;
hr {
border-top-color: darken(@alert-info-border, 5%);
}
.alert-link {
color: darken(@alert-info-text, 10%);
}
}
// Block alerts
// -------------------------
.alert-block {
padding-top: 15px;
padding-bottom: 15px;
}
.alert-block > p,
.alert-block > ul {
margin-bottom: 0;
}
.alert-block p + p {
margin-top: 5px;
}

58
src/less/bootstrap/badges.less Normal file
View File

@ -0,0 +1,58 @@
//
// Badges
// --------------------------------------------------
// Base classes
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
font-weight: bold;
color: #fff;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @gray-light;
border-radius: 10px;
// Empty labels/badges collapse
&:empty {
display: none;
}
}
// Hover state, but only for links
a.badge {
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
// Quick fix for labels/badges in buttons
.btn {
.badge {
position: relative;
top: -1px;
}
}
.btn-mini {
.badge {
top: 0;
}
}
// Account for counters in navs
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: @link-color;
background-color: #fff;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}

64
src/less/bootstrap/bootstrap.less vendored Normal file
View File

@ -0,0 +1,64 @@
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
// Core variables and mixins
@import "variables.less";
@import "mixins.less";
// Reset
@import "normalize.less";
@import "print.less";
// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components: common
@import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";
// Components: Nav
@import "navs.less";
@import "navbar.less";
@import "button-groups.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
// Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
// Components: Misc
@import "alerts.less";
@import "thumbnails.less";
@import "media.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "jumbotron.less";
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
@import "responsive-utilities.less";

28
src/less/bootstrap/breadcrumbs.less Normal file
View File

@ -0,0 +1,28 @@
//
// Breadcrumbs
// --------------------------------------------------
.breadcrumb {
padding: 8px 15px;
margin: 0 0 @line-height-computed;
list-style: none;
background-color: #f5f5f5;
border-radius: @border-radius-base;
> li {
display: inline-block;
text-shadow: 0 1px 0 #fff;
&:after {
display: inline-block;
content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: #ccc;
}
&:last-child:after {
display: none; // No divider after last element
}
}
> .active {
color: @gray-light;
}
}

170
src/less/bootstrap/button-groups.less Normal file
View File

@ -0,0 +1,170 @@
//
// Button groups
// --------------------------------------------------
// Button carets
.btn .caret {
border-top-color: @btn-default-color;
}
.dropup .btn .caret {
border-bottom-color: @btn-default-color;
}
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
}
// Prevent double borders when buttons are next to each other
.btn-group .btn + .btn {
margin-left: -1px;
}
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
.clearfix();
.btn-group {
float: left;
}
// Space out series of button groups
> .btn + .btn,
> .btn-group + .btn,
> .btn + .btn-group,
> .btn-group + .btn-group {
margin-left: 5px;
}
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
.border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child > .btn:last-child,
.btn-group > .btn-group:first-child > .dropdown-toggle {
.border-right-radius(0);
}
.btn-group > .btn-group:last-child > .btn:first-child {
.border-left-radius(0);
}
// On active and open, don't show outline
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
// Split button dropdowns
// ----------------------
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
}
.btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
// Reposition the caret
.btn .caret {
margin-left: 0;
}
// Carets in other button sizes
.btn-large .caret {
border-width: 5px;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
border-bottom-width: 5px;
}
// Vertical button groups
// ----------------------
.btn-group-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
+ .btn {
margin-top: -1px;
}
}
.btn-group-vertical .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical .btn:first-child {
.border-bottom-radius(0);
}
.btn-group-vertical .btn:last-child {
.border-top-radius(0);
}
// Justified button groups
// ----------------------
.btn-group-justified {
display: table;
width: 100%;
.btn {
float: none;
display: table-cell;
width: 1%;
}
}
// Checkbox and radio options
.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"],
.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] {
display: none;
}

160
src/less/bootstrap/buttons.less Normal file
View File

@ -0,0 +1,160 @@
//
// Buttons
// --------------------------------------------------
// Base styles
// --------------------------------------------------
// Core styles
.btn {
display: inline-block;
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: 500;
line-height: @line-height-base;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: @border-radius-base;
white-space: nowrap;
&:focus {
.tab-focus();
}
&:hover,
&:focus {
color: #fff;
text-decoration: none;
}
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: default;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.box-shadow(none);
}
}
// Alternate buttons
// --------------------------------------------------
.btn-default {
.btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
}
.btn-primary {
.btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}
// Success appears as green
.btn-success {
.btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent;
background-image: none;
.box-shadow(none);
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
border-color: transparent;
}
.btn-link {
color: @link-color;
font-weight: normal;
cursor: pointer;
border-radius: 0;
}
.btn-link:hover,
.btn-link:focus {
color: @link-hover-color;
text-decoration: underline;
background-color: transparent;
}
.btn-link {
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @gray-dark;
text-decoration: none;
}
}
}
// Button Sizes
// --------------------------------------------------
.btn-large {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
.btn-small {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: 1.5; // ensure proper height of button next to small input
border-radius: @border-radius-small;
}
// Block button
// --------------------------------------------------
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: 5px;
}
// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}

192
src/less/bootstrap/carousel.less Normal file
View File

@ -0,0 +1,192 @@
//
// Carousel
// --------------------------------------------------
// Wrapper for the slide container and indicators
.carousel {
position: relative;
}
// Wrap all slides, but only show the active one
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
// Immediate parent of all slides
.carousel-inner {
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
display: block;
line-height: 1;
}
}
> .active,
> .next,
> .prev { display: block; }
> .active {
left: 0;
}
> .next,
> .prev {
position: absolute;
top: 0;
width: 100%;
}
> .next {
left: 100%;
}
> .prev {
left: -100%;
}
> .next.left,
> .prev.right {
left: 0;
}
> .active.left {
left: -100%;
}
> .active.right {
left: 100%;
}
}
// Left/right controls for nav
// ---------------------------
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 15%;
.opacity(.5);
font-size: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
// we can't have this transition here
// because webkit cancels the carousel
// animation if you trip this while
// in the middle of another animation
// ;_;
// .transition(opacity .2s linear);
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
background-color: transparent;
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
background-color: transparent;
}
// Hover/focus state
&:hover,
&:focus {
color: #fff;
text-decoration: none;
.opacity(.9);
}
// Toggles
.glyphicon {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
}
}
// Optional indicator pips
// -----------------------------
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 15;
width: 100px;
margin: 0 0 0 -50px;
padding-left: 0;
list-style: none;
text-align: center;
li {
display: inline-block;
width: 8px;
height: 8px;
margin-left: 0;
margin-right: 0;
text-indent: -999px;
border: 1px solid #fff;
border-radius: 5px;
cursor: pointer;
}
.active {
background-color: #fff;
}
}
// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
}
// Scale up controls for tablets and up
@media screen and (min-width: @screen-tablet) {
// Scale up the controls a smidge
.carousel-control .glyphicon {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
// Show and left align the captions
.carousel-caption {
left: 20%;
right: 20%;
padding-bottom: 30px;
}
}

33
src/less/bootstrap/close.less Normal file
View File

@ -0,0 +1,33 @@
//
// Close icons
// --------------------------------------------------
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(.2);
&:hover,
&:focus {
color: #000;
text-decoration: none;
cursor: pointer;
.opacity(.5);
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}

61
src/less/bootstrap/code.less Normal file
View File

@ -0,0 +1,61 @@
//
// Code (inline and blocK)
// --------------------------------------------------
// Inline and block code styles
code,
pre {
padding: 0 3px 2px;
font-family: @font-family-monospace;
font-size: (@font-size-base - 2);
color: @gray-dark;
border-radius: 4px;
}
// Inline code
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
white-space: nowrap;
}
// Blocks of code
pre {
display: block;
padding: ((@line-height-computed - 1) / 2);
margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc; // IE8 fallback
border: 1px solid rgba(0,0,0,.15);
border-radius: @border-radius-base;
// Make prettyprint styles more spaced out for readability
&.prettyprint {
margin-bottom: @line-height-computed;
}
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

23
src/less/bootstrap/component-animations.less Normal file
View File

@ -0,0 +1,23 @@
//
// Component animations
// --------------------------------------------------
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
.transition(height .35s ease);
&.in {
height: auto;
}
}

226
src/less/bootstrap/dropdowns.less Normal file
View File

@ -0,0 +1,226 @@
//
// Dropdown menus
// --------------------------------------------------
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
background-color: @dropdown-bg;
border: 1px solid #ccc; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
.background-clip(padding-box);
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider(@dropdown-divider-top, @dropdown-divider-bottom);
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
// -----------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: @dropdown-link-hover-color;
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
}
// Active state
// ------------
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
}
// Disabled state
// --------------
// Gray out text and ensure the hover/focus state remains gray
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: @gray-light;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: default;
}
// Open state for the dropdown
// ---------------------------
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Backdrop to catch body clicks on mobile, etc.
// ---------------------------
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: @zindex-dropdown - 10;
}
// Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: 4px solid #000;
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Sub menus
// ---------------------------
.dropdown-submenu {
position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
border-top-left-radius: 0; // Nuke the closest corner as appropriate
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
// Dropups
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
border-bottom-left-radius: 0; // Nuke the closest corner as appropriate
}
// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: darken(@dropdown-bg, 20%);
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: @dropdown-link-hover-color;
}
// Left aligned submenus
.dropdown-submenu.pull-left {
// Undo the float
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
float: none;
// Positioning the submenu
> .dropdown-menu {
left: -100%;
margin-left: 10px;
border-top-right-radius: 0; // Remove the rounded corner here
}
}
// Tweak nav headers
// ---------------------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
padding-left: 20px;
padding-right: 20px;
}
// Typeahead
// ---------------------------
.typeahead {
z-index: 1051;
}

432
src/less/bootstrap/forms.less Normal file
View File

@ -0,0 +1,432 @@
//
// Forms
// --------------------------------------------------
// Non-controls
// -------------------------
form {
margin: 0;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
line-height: inherit;
color: @gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
// Form controls
// -------------------------
// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
display: block;
min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
vertical-align: middle;
background-color: @input-bg;
border: 1px solid @input-border;
border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
&:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
// Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
}
}
// Reset appearance properties for textual inputs and textarea
// Can't be on input[type=*] selectors or it's too specific
input,
select,
textarea {
width: 100%;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
.box-sizing(border-box);
}
// Reset height since textareas have rows
textarea {
height: auto;
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: @input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
line-height: @input-height-base;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Fix optgroup Firefox bug per https://github.com/twitter/bootstrap/issues/7611
select optgroup {
font-size: inherit;
font-style: inherit;
font-family: inherit;
}
// Focus for select, file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
.tab-focus();
}
// Placeholder
// -------------------------
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input,
textarea {
.placeholder();
}
// CHECKBOXES & RADIOS
// -------------------
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
label {
display: inline;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
/*
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
}
*/
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
display: inline-block;
// padding-top: 5px;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// INPUT SIZES
// -----------
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
&.input-large {
min-height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
&.input-small {
min-height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
}
// FORM FIELD FEEDBACK STATES
// --------------------------
// Warning
.has-warning {
.form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
}
// Error
.has-error {
.form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
}
// Success
.has-success {
.form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
}
// HELP TEXT
// ---------
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
// Input groups
// --------------------------------------------------
// Base styles
// -------------------------
.input-group {
display: table;
// Undo padding and float of grid classes
&.col {
float: none;
padding-left: 0;
padding-right: 0;
}
input,
select {
width: 100%;
margin-bottom: 0;
}
}
// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group input {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
vertical-align: middle; // Match the inputs
}
// Text input groups
// -------------------------
.input-group-addon {
.box-sizing(border-box);
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: @line-height-base;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: @gray-lighter;
border: 1px solid #ccc;
border-radius: @border-radius-base;
&.input-small {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
&.input-large {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
}
// Reset rounded corners
.input-group input:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
.border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group input:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
.border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
}
// Button input groups
// -------------------------
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
float: left; // Collapse white-space
+ .btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
// Inline forms
// --------------------------------------------------
.form-inline {
input,
select,
textarea,
.radio,
.checkbox {
display: inline-block;
}
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
}
}
// Horizontal forms
// --------------------------------------------------
// Horizontal forms are built on grid classes.
.form-horizontal {
.row + .row {
margin-top: 15px;
}
.control-label {
padding-top: 6px;
}
}
// Only right aline form labels here when the columns stop stacking
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}

200
src/less/bootstrap/glyphicons.less Normal file
View File

@ -0,0 +1,200 @@
//
// Glyphicons
// -----------------------------------------------------------------------------
// About
//
// Glyphicons font-based icons require you to include all relevant font files,
// found in the Bootstrap repo under /fonts/. Files are referenced relative to
// the compiled CSS.
//
// Basic usage
//
// Since icons are fonts, they can be placed anywhere text is placed. To use,
// create an inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
//
// Use them in links, buttons, headings, and more.
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot');
src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'),
url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
// Catchall baseclass
.glyphicon:before {
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
// Individual icons
.glyphicon-glass:before { content: "\e001"; }
.glyphicon-music:before { content: "\e002"; }
.glyphicon-search:before { content: "\e003"; }
.glyphicon-envelope:before { content: "\2709"; }
.glyphicon-heart:before { content: "\e005"; }
.glyphicon-star:before { content: "\e006"; }
.glyphicon-star-empty:before { content: "\e007"; }
.glyphicon-user:before { content: "\e008"; }
.glyphicon-film:before { content: "\e009"; }
.glyphicon-th-large:before { content: "\e010"; }
.glyphicon-th:before { content: "\e011"; }
.glyphicon-th-list:before { content: "\e012"; }
.glyphicon-ok:before { content: "\e013"; }
.glyphicon-remove:before { content: "\e014"; }
.glyphicon-zoom-in:before { content: "\e015"; }
.glyphicon-zoom-out:before { content: "\e016"; }
.glyphicon-off:before { content: "\e017"; }
.glyphicon-signal:before { content: "\e018"; }
.glyphicon-cog:before { content: "\e019"; }
.glyphicon-trash:before { content: "\e020"; }
.glyphicon-home:before { content: "\e021"; }
.glyphicon-file:before { content: "\e022"; }
.glyphicon-time:before { content: "\e023"; }
.glyphicon-road:before { content: "\e024"; }
.glyphicon-download-alt:before { content: "\e025"; }
.glyphicon-download:before { content: "\e026"; }
.glyphicon-upload:before { content: "\e027"; }
.glyphicon-inbox:before { content: "\e028"; }
.glyphicon-play-circle:before { content: "\e029"; }
.glyphicon-repeat:before { content: "\e030"; }
.glyphicon-refresh:before { content: "\e031"; }
.glyphicon-list-alt:before { content: "\e032"; }
.glyphicon-lock:before { content: "\e033"; }
.glyphicon-flag:before { content: "\e034"; }
.glyphicon-headphones:before { content: "\e035"; }
.glyphicon-volume-off:before { content: "\e036"; }
.glyphicon-volume-down:before { content: "\e037"; }
.glyphicon-volume-up:before { content: "\e038"; }
.glyphicon-qrcode:before { content: "\e039"; }
.glyphicon-barcode:before { content: "\e040"; }
.glyphicon-tag:before { content: "\e041"; }
.glyphicon-tags:before { content: "\e042"; }
.glyphicon-book:before { content: "\e043"; }
.glyphicon-bookmark:before { content: "\e044"; }
.glyphicon-print:before { content: "\e045"; }
.glyphicon-camera:before { content: "\e046"; }
.glyphicon-font:before { content: "\e047"; }
.glyphicon-bold:before { content: "\e048"; }
.glyphicon-italic:before { content: "\e049"; }
.glyphicon-text-height:before { content: "\e050"; }
.glyphicon-text-width:before { content: "\e051"; }
.glyphicon-align-left:before { content: "\e052"; }
.glyphicon-align-center:before { content: "\e053"; }
.glyphicon-align-right:before { content: "\e054"; }
.glyphicon-align-justify:before { content: "\e055"; }
.glyphicon-list:before { content: "\e056"; }
.glyphicon-indent-left:before { content: "\e057"; }
.glyphicon-indent-right:before { content: "\e058"; }
.glyphicon-facetime-video:before { content: "\e059"; }
.glyphicon-picture:before { content: "\e060"; }
.glyphicon-pencil:before { content: "\270f"; }
.glyphicon-map-marker:before { content: "\e062"; }
.glyphicon-adjust:before { content: "\e063"; }
.glyphicon-tint:before { content: "\e064"; }
.glyphicon-edit:before { content: "\e065"; }
.glyphicon-share:before { content: "\e066"; }
.glyphicon-check:before { content: "\e067"; }
.glyphicon-move:before { content: "\e068"; }
.glyphicon-step-backward:before { content: "\e069"; }
.glyphicon-fast-backward:before { content: "\e070"; }
.glyphicon-backward:before { content: "\e071"; }
.glyphicon-play:before { content: "\e072"; }
.glyphicon-pause:before { content: "\e073"; }
.glyphicon-stop:before { content: "\e074"; }
.glyphicon-forward:before { content: "\e075"; }
.glyphicon-fast-forward:before { content: "\e076"; }
.glyphicon-step-forward:before { content: "\e077"; }
.glyphicon-eject:before { content: "\e078"; }
.glyphicon-chevron-left:before { content: "\e079"; }
.glyphicon-chevron-right:before { content: "\e080"; }
.glyphicon-plus-sign:before { content: "\e081"; }
.glyphicon-minus-sign:before { content: "\e082"; }
.glyphicon-remove-sign:before { content: "\e083"; }
.glyphicon-ok-sign:before { content: "\e084"; }
.glyphicon-question-sign:before { content: "\e085"; }
.glyphicon-info-sign:before { content: "\e086"; }
.glyphicon-screenshot:before { content: "\e087"; }
.glyphicon-remove-circle:before { content: "\e088"; }
.glyphicon-ok-circle:before { content: "\e089"; }
.glyphicon-ban-circle:before { content: "\e090"; }
.glyphicon-arrow-left:before { content: "\e091"; }
.glyphicon-arrow-right:before { content: "\e092"; }
.glyphicon-arrow-up:before { content: "\e093"; }
.glyphicon-arrow-down:before { content: "\e094"; }
.glyphicon-share-alt:before { content: "\e095"; }
.glyphicon-resize-full:before { content: "\e096"; }
.glyphicon-resize-small:before { content: "\e097"; }
.glyphicon-plus:before { content: "\002b"; }
.glyphicon-minus:before { content: "\2212"; }
.glyphicon-asterisk:before { content: "\002a"; }
.glyphicon-exclamation-sign:before { content: "\e101"; }
.glyphicon-gift:before { content: "\e102"; }
.glyphicon-leaf:before { content: "\e103"; }
.glyphicon-fire:before { content: "\e104"; }
.glyphicon-eye-open:before { content: "\e105"; }
.glyphicon-eye-close:before { content: "\e106"; }
.glyphicon-warning-sign:before { content: "\e107"; }
.glyphicon-plane:before { content: "\e108"; }
.glyphicon-calendar:before { content: "\e109"; }
.glyphicon-random:before { content: "\e110"; }
.glyphicon-comment:before { content: "\e111"; }
.glyphicon-magnet:before { content: "\e112"; }
.glyphicon-chevron-up:before { content: "\e113"; }
.glyphicon-chevron-down:before { content: "\e114"; }
.glyphicon-retweet:before { content: "\e115"; }
.glyphicon-shopping-cart:before { content: "\e116"; }
.glyphicon-folder-close:before { content: "\e117"; }
.glyphicon-folder-open:before { content: "\e118"; }
.glyphicon-resize-vertical:before { content: "\e119"; }
.glyphicon-resize-horizontal:before { content: "\e120"; }
.glyphicon-hdd:before { content: "\e121"; }
.glyphicon-bullhorn:before { content: "\e122"; }
.glyphicon-bell:before { content: "\e123"; }
.glyphicon-certificate:before { content: "\e124"; }
.glyphicon-thumbs-up:before { content: "\e125"; }
.glyphicon-thumbs-down:before { content: "\e126"; }
.glyphicon-hand-right:before { content: "\e127"; }
.glyphicon-hand-left:before { content: "\e128"; }
.glyphicon-hand-up:before { content: "\e129"; }
.glyphicon-hand-down:before { content: "\e130"; }
.glyphicon-circle-arrow-right:before { content: "\e131"; }
.glyphicon-circle-arrow-left:before { content: "\e132"; }
.glyphicon-circle-arrow-up:before { content: "\e133"; }
.glyphicon-circle-arrow-down:before { content: "\e134"; }
.glyphicon-globe:before { content: "\e135"; }
.glyphicon-wrench:before { content: "\e136"; }
.glyphicon-tasks:before { content: "\e137"; }
.glyphicon-filter:before { content: "\e138"; }
.glyphicon-briefcase:before { content: "\e139"; }
.glyphicon-fullscreen:before { content: "\e140"; }
.glyphicon-dashboard:before { content: "\e141"; }
.glyphicon-paperclip:before { content: "\e142"; }
.glyphicon-heart-empty:before { content: "\e143"; }
.glyphicon-link:before { content: "\e144"; }
.glyphicon-phone:before { content: "\e145"; }
.glyphicon-pushpin:before { content: "\e146"; }
.glyphicon-euro:before { content: "\20ac"; }
.glyphicon-usd:before { content: "\e148"; }
.glyphicon-gbp:before { content: "\e149"; }
.glyphicon-sort:before { content: "\e150"; }
.glyphicon-sort-by-alphabet:before { content: "\e151"; }
.glyphicon-sort-by-alphabet-alt:before { content: "\e152"; }
.glyphicon-sort-by-order:before { content: "\e153"; }
.glyphicon-sort-by-order-alt:before { content: "\e154"; }
.glyphicon-sort-by-attributes:before { content: "\e155"; }
.glyphicon-sort-by-attributes-alt:before { content: "\e156"; }
.glyphicon-unchecked:before { content: "\e157"; }
.glyphicon-expand:before { content: "\e158"; }
.glyphicon-collapse:before { content: "\e159"; }
.glyphicon-collapse-top:before { content: "\e160"; }

204
src/less/bootstrap/grid.less Normal file
View File

@ -0,0 +1,204 @@
//
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
}
// Mobile-first defaults
.row {
.make-row();
}
// Common styles for small and large grid columns
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
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);
}
//
// Container and grid column sizing
//
// Tiny device columns (smartphones)
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
}
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
.col-4 { width: percentage((4 / @grid-columns)); }
.col-5 { width: percentage((5 / @grid-columns)); }
.col-6 { width: percentage((6 / @grid-columns)); }
.col-7 { width: percentage((7 / @grid-columns)); }
.col-8 { width: percentage((8 / @grid-columns)); }
.col-9 { width: percentage((9 / @grid-columns)); }
.col-10 { width: percentage((10/ @grid-columns)); }
.col-11 { width: percentage((11/ @grid-columns)); }
.col-12 { width: 100%; }
// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) {
.container {
max-width: @container-tablet;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); }
.col-push-3 { left: percentage((3 / @grid-columns)); }
.col-push-4 { left: percentage((4 / @grid-columns)); }
.col-push-5 { left: percentage((5 / @grid-columns)); }
.col-push-6 { left: percentage((6 / @grid-columns)); }
.col-push-7 { left: percentage((7 / @grid-columns)); }
.col-push-8 { left: percentage((8 / @grid-columns)); }
.col-push-9 { left: percentage((9 / @grid-columns)); }
.col-push-10 { left: percentage((10/ @grid-columns)); }
.col-push-11 { left: percentage((11/ @grid-columns)); }
.col-pull-1 { right: percentage((1 / @grid-columns)); }
.col-pull-2 { right: percentage((2 / @grid-columns)); }
.col-pull-3 { right: percentage((3 / @grid-columns)); }
.col-pull-4 { right: percentage((4 / @grid-columns)); }
.col-pull-5 { right: percentage((5 / @grid-columns)); }
.col-pull-6 { right: percentage((6 / @grid-columns)); }
.col-pull-7 { right: percentage((7 / @grid-columns)); }
.col-pull-8 { right: percentage((8 / @grid-columns)); }
.col-pull-9 { right: percentage((9 / @grid-columns)); }
.col-pull-10 { right: percentage((10/ @grid-columns)); }
.col-pull-11 { right: percentage((11/ @grid-columns)); }
}
// Medium and large device columns (desktop and up)
@media (min-width: @screen-desktop) {
.container {
max-width: @container-desktop;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large desktops and up
@media (min-width: @screen-large-desktop) {
.container {
max-width: @container-large-desktop;
}
}

32
src/less/bootstrap/jumbotron.less Normal file
View File

@ -0,0 +1,32 @@
//
// Jumbotron
// --------------------------------------------------
.jumbotron {
padding: 30px;
margin-bottom: 30px;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color;
background-color: @jumbotron-bg;
h1 {
line-height: 1;
color: @jumbotron-heading-color;
}
p {
line-height: 1.4;
}
}
@media screen and (min-width: @screen-tablet) {
.jumbotron {
padding: 50px 60px;
border-radius: @border-radius-large; // Only round corners at higher resolutions
h1 {
font-size: (@font-size-base * 4.5);
}
}
}

70
src/less/bootstrap/labels.less Normal file
View File

@ -0,0 +1,70 @@
//
// Labels
// --------------------------------------------------
.label {
display: inline;
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: @gray-light;
border-radius: .25em;
// Add hover effects, but only for links
&[href] {
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
background-color: darken(@gray-light, 10%);
}
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-danger {
background-color: @label-danger-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-danger-bg, 10%);
}
}
}
.label-success {
background-color: @label-success-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-success-bg, 10%);
}
}
}
.label-warning {
background-color: @label-warning-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-warning-bg, 10%);
}
}
}
.label-info {
background-color: @label-info-bg;
&[href] {
&:hover,
&:focus {
background-color: darken(@label-info-bg, 10%);
}
}
}

94
src/less/bootstrap/list-group.less Normal file
View File

@ -0,0 +1,94 @@
//
// List groups
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
background-color: @list-group-bg;
}
// Individual list items
// -------------------------
.list-group-item {
position: relative;
display: block;
padding: 10px 30px 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
border: 1px solid @list-group-border;
}
// Round the first and last items
.list-group-item:first-child {
.border-top-radius(@border-radius-base);
}
.list-group-item:last-child {
margin-bottom: 0;
.border-bottom-radius(@border-radius-base);
}
// Custom content options
// -------------------------
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
// Linked list items
// -------------------------
// Custom content within linked items
a.list-group-item {
.list-group-item-heading {
color: #333;
}
.list-group-item-text {
color: #555;
}
}
// Hover state
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: @list-group-hover-bg;
}
// Active class on item itself, not parent
a.list-group-item.active {
z-index: 2; // Place active items above their siblings for proper border styling
color: @list-group-active-color;
background-color: @list-group-active-bg;
border-color: @list-group-active-border;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: lighten(@list-group-active-bg, 40%);
}
}
// Chevrons and badges within list items
// -------------------------
.list-group-item > .badge,
.list-group-item > .glyphicon-chevron-right {
float: right;
margin-right: -15px;
}
.list-group-item > .glyphicon + .badge {
margin-right: 5px;
}

54
src/less/bootstrap/media.less Normal file
View File

@ -0,0 +1,54 @@
// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------
// Common styles
// -------------------------
// Clear the floats
.media,
.media-body {
overflow: hidden;
zoom: 1;
}
// Proper spacing between instances of .media
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
// For images and videos, set to block
.media-object {
display: block;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px;
}
// Media image alignment
// -------------------------
.media > .pull-left {
margin-right: 10px;
}
.media > .pull-right {
margin-left: 10px;
}
// Media list variation
// -------------------------
// Undo default ul/ol styles
.media-list {
margin-left: 0;
list-style: none;
}

495
src/less/bootstrap/mixins.less Normal file
View File

@ -0,0 +1,495 @@
//
// Mixins
// --------------------------------------------------
// Utilities
// -------------------------
// Clearfix
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
//
// 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.
.clearfix() {
&:before,
&:after {
content: " "; /* 1 */
display: table; /* 2 */
}
&:after {
clear: both;
}
}
// Webkit-style focus
.tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Sizing shortcuts
.size(@width, @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size, @size);
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
&:-moz-placeholder { color: @color; } // Firefox 4-18
&::-moz-placeholder { color: @color; } // Firefox 19+
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
// Text overflow
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// CSS image replacement
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
.hide-text() {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// CSS3 PROPERTIES
// --------------------------------------------------
// 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;
}
// Drop shadows
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
-moz-transition-delay: @transition-delay;
-o-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
-moz-transition-duration: @transition-duration;
-o-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
-ms-transform: scale(@ratio);
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.translate(@x, @y) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x, @y) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// Background sizing
.background-size(@size) {
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
// Resize anything
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Safari fix
}
// 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;
-o-hyphens: @mode;
hyphens: @mode;
}
// Opacity
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
// 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; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
background-color: @end-color;
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
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; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
background-color: @end-color;
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
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-color: @end-color;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
}
.horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
background-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -moz-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-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(top, @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-color: @outer-color;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: #555, @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
// Reset filters for IE
//
// When you need to remove a gradient background, don't forget to use this to reset
// the IE filter for IE9 and below.
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// RETINA IMAGE SUPPORT
// --------------------------------------------------
// Short retina mixin for setting background-image and -size
.retina-image(@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;
}
}
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: #fff) {
height: 2px; // 1px for background, one for border
margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @top;
border-bottom: 1px solid @bottom;
}
// Button psuedo states
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.btn-pseudo-states(@color, @background, @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&:active,
&.active {
background-color: darken(@background, 5%);
border-color: darken(@border, 10%);
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border
}
}
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(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);
}
// Grid System
// -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
.clearfix();
}
// Make a grid
// Creates a wrapper for a series of columns
.make-row() {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-small) {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
}
}
// Generate the columns
.make-column(@columns) {
position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
width: 100%;
// 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);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
width: percentage((@columns / @grid-columns));
}
}
// Generate the column offsets
.make-column-offset(@columns) {
@media (min-width: @grid-float-breakpoint) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-column-push(@columns) {
@media (min-width: @grid-float-breakpoint) {
left: percentage((@columns / @grid-columns));
}
}
.make-column-pull(@columns) {
@media (min-width: @grid-float-breakpoint) {
right: percentage((@columns / @grid-columns));
}
}
// Framework mixins
// --------------------------------------------------
// Generate form validation states
.form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Color the label text
.control-label {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.input-with-feedback {
padding-right: 32px; // to account for the feedback icon
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;
}
}

137
src/less/bootstrap/modals.less Normal file
View File

@ -0,0 +1,137 @@
//
// Modals
// --------------------------------------------------
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and shit
// Kill the scroll on the body
.modal-open {
overflow: hidden;
}
// Container that the modal scrolls within
.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
-webkit-overflow-scrolling: touch;
// When fading in the modal, animate it to slide down
&.fade {
top: -25%;
.transition(~"opacity 0.3s linear, top 0.3s ease-out");
}
&.fade.in { top: 0; }
}
// Shell div to position the modal with bottom padding
.modal-dialog {
position: relative;
top: 0;
left: 0;
right: 0;
width: auto;
padding: 10px;
z-index: (@zindex-modal-background + 10);
}
// Actual modal
.modal-content {
position: relative;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
.background-clip(padding-box);
// Remove focus outline from opened modal
outline: none;
}
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: (@zindex-modal-background - 10);
background-color: #000;
// Fade for backdrop
&.fade { .opacity(0); }
&.fade.in { .opacity(.5); }
}
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
padding: @modal-title-padding;
border-bottom: 1px solid #e5e5e5;
min-height: (@modal-title-padding + @modal-title-line-height);
}
// Close icon
.modal-header .close {
margin-top: -2px;
}
// Title text within header
.modal-title {
margin: 0;
line-height: @modal-title-line-height;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
padding: @modal-inner-padding;
}
// Footer (for actions)
.modal-footer {
margin-top: 15px;
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid #e5e5e5;
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}
// Scale up the modal
@media screen and (min-width: @screen-tablet) {
.modal-dialog {
left: 50%;
right: auto;
width: 560px;
margin-left: -280px;
padding-top: 30px;
padding-bottom: 30px;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
}

363
src/less/bootstrap/navbar.less Normal file
View File

@ -0,0 +1,363 @@
//
// Navbars
// --------------------------------------------------
// Wrapper and base class
.navbar {
position: relative;
margin-bottom: 20px;
padding-left: @navbar-padding;
padding-right: @navbar-padding;
background-color: @navbar-bg;
border-radius: @border-radius-base;
// Prevent floats from breaking the navbar
.clearfix();
}
// Navbar nav links
// -------------------------
.navbar-nav {
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
// and outdent nav links so text lines up with logo.
margin-top: 10px;
margin-bottom: 15px;
> li > a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
color: @navbar-link-color;
line-height: 20px;
border-radius: @border-radius-base;
}
> li > a:hover,
> li > a:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
> .disabled > a,
> .disabled > a:hover,
> .disabled > a:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
// Right aligned contents
// Make them full width first so that they align properly on mobile
&.pull-right {
width: 100%;
}
}
//
// Navbar alignment options
// --------------------------------------------------
// Static navbar
.navbar-static-top {
border-radius: 0;
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
//
// Navbar optional components
// --------------------------------------------------
// Brand/project name
.navbar-brand {
display: block;
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: @navbar-padding;
font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-computed;
color: @navbar-brand-color;
text-align: center;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
}
// Collapsible navbar toggle
.navbar-toggle {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 12px;
background-color: transparent;
border: 1px solid #ddd;
border-radius: 4px;
&:hover,
&:focus {
background-color: #ddd;
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #ccc;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
}
// Navbar form
.navbar-form {
.form-inline();
.navbar-vertical-align(@input-height-base); // Vertically center in navbar
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
}
// Remove background color from open dropdown
> .open > a,
> .open > a:hover,
> .open > a:focus {
background-color: @navbar-link-active-bg;
color: @navbar-link-active-color;
}
> .dropdown > a .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
> .open > a .caret,
> .open > a:hover .caret,
> .open > a:focus .caret {
border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-active-color;
}
}
// Right aligned menus need alt position
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
// Inverse navbar
// --------------------------------------------------
.navbar-inverse {
background-color: @navbar-inverse-bg;
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-inverse-color;
}
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
}
> li > a:hover,
> li > a:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
> .disabled > a,
> .disabled > a:hover,
> .disabled > a:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: #333;
&:hover,
&:focus {
background-color: #333;
}
.icon-bar {
background-color: #fff;
}
}
// Dropdowns
.navbar-nav {
> .open > a,
> .open > a:hover,
> .open > a:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
> .dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-hover-color;
}
> .dropdown > a .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
> .open > a .caret,
> .open > a:hover .caret,
> .open > a:focus .caret {
border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
}
}
}
// Responsive navbar
// --------------------------------------------------
@media screen and (min-width: @grid-float-breakpoint) {
.navbar-brand {
float: left;
margin-left: -(@navbar-padding);
margin-right: 5px;
}
.navbar-nav {
float: left;
// undo margin to make nav extend full height of navbar
margin-top: 0;
margin-bottom: 0;
> li {
float: left;
> a {
border-radius: 0;
}
}
&.pull-right {
float: right;
width: auto;
}
}
// Required to make the collapsing navbar work on regular desktops
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
margin-top: ((@navbar-height - @input-height-base) / 2);
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
.navbar-vertical-align(@line-height-computed);
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
// Default navbar variables
.navbar-link {
color: @navbar-link-color;
&:hover {
color: @navbar-link-hover-color;
}
}
// Use the inverse navbar variables
.navbar-inverse .navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}

247
src/less/bootstrap/navs.less Normal file
View File

@ -0,0 +1,247 @@
//
// Navs
// --------------------------------------------------
// Base class
// --------------------------------------------------
.nav {
margin-left: 0;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
.clearfix();
> li {
position: relative;
display: block;
> a {
position: relative;
display: block;
padding: 10px 15px;
&:hover,
&:focus {
text-decoration: none;
background-color: @gray-lighter;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @gray-light;
}
&.disabled > a:hover,
&.disabled > a:focus {
color: @gray-light;
text-decoration: none;
background-color: transparent;
cursor: default;
}
// Space the headers out when they follow another list item (link)
+ .nav-header {
margin-top: 9px;
}
}
// Open dropdowns
&.open > a,
&.open > a:hover,
&.open > a:focus {
color: #fff;
background-color: @link-color;
border-color: @link-color;
.caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
}
// Redeclare pull classes because of specifity
// Todo: consider making these utilities !important to avoid this bullshit
> .pull-right {
float: right;
}
// Dividers (basically an hr) within the dropdown
.nav-divider {
.nav-divider();
}
}
// Nav variations
// --------------------------------------------------
// Tabs
// -------------------------
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid #ddd;
> li {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
// Actual tabs (as links)
> a {
margin-right: 2px;
line-height: @line-height-base;
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
border-color: @gray-lighter @gray-lighter #ddd;
}
}
// Active state, and it's :hover to override normal :hover
&.active > a,
&.active > a:hover,
&.active > a:focus {
color: @gray;
background-color: @body-bg;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified;
.nav-tabs-justified;
}
}
// Pills
// -------------------------
.nav-pills {
> li {
float: left;
// Links rendered as pills
> a {
border-radius: 5px;
}
+ li {
> a {
margin-left: 2px;
}
}
// Active state
&.active > a,
&.active > a:hover,
&.active > a:focus {
color: #fff;
background-color: @component-active-bg;
}
}
}
// Stacked pills
.nav-stacked {
> li {
float: none;
+ li {
> a {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}
}
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
display: table-cell;
width: 1%;
> a {
text-align: center;
}
}
}
// Move borders to anchors instead of bottom of list
.nav-tabs-justified () {
border-bottom: 0;
> li > a {
border-bottom: 1px solid #ddd;
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a {
border-bottom-color: @body-bg;
}
}
// Nav headers (for dropdowns and lists)
// -------------------------
.nav-header {
display: block;
padding: 3px 15px;
font-size: @font-size-mini;
font-weight: bold;
line-height: @line-height-base;
color: @gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Tabbable tabs
// -------------------------
// Clear any floats
.tabbable {
.clearfix();
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
// Dropdowns
// -------------------------
// Make dropdown carets use link color in navs
.nav .caret {
border-top-color: @link-color;
border-bottom-color: @link-color;
}
.nav a:hover .caret {
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;
}
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}

396
src/less/bootstrap/normalize.less vendored Normal file
View File

@ -0,0 +1,396 @@
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
// ==========================================================================
// HTML5 display definitions
// ==========================================================================
//
// Correct `block` display not defined in IE 8/9.
//
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
//
// Correct `inline-block` display not defined in IE 8/9.
//
audio,
canvas,
video {
display: inline-block;
}
//
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
//
audio:not([controls]) {
display: none;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
[hidden] {
display: none;
}
// ==========================================================================
// Base
// ==========================================================================
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS text size adjust after orientation change, without disabling
// user zoom.
//
html {
font-family: sans-serif; // 1
-webkit-text-size-adjust: 100%; // 2
-ms-text-size-adjust: 100%; // 2
}
//
// Remove default margin.
//
body {
margin: 0;
}
// ==========================================================================
// Links
// ==========================================================================
//
// Address `outline` inconsistency between Chrome and other browsers.
//
a:focus {
outline: thin dotted;
}
//
// Improve readability when focused and also mouse hovered in all browsers.
//
a:active,
a:hover {
outline: 0;
}
// ==========================================================================
// Typography
// ==========================================================================
//
// Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome.
//
h1 {
font-size: 2em;
margin: 0.67em 0;
}
//
// Address styling not present in IE 8/9, Safari 5, and Chrome.
//
abbr[title] {
border-bottom: 1px dotted;
}
//
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
//
b,
strong {
font-weight: bold;
}
//
// Address styling not present in Safari 5 and Chrome.
//
dfn {
font-style: italic;
}
//
// Address differences between Firefox and other browsers.
//
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
//
// Address styling not present in IE 8/9.
//
mark {
background: #ff0;
color: #000;
}
//
// Correct font family set oddly in Safari 5 and Chrome.
//
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
//
// Improve readability of pre-formatted text in all browsers.
//
pre {
white-space: pre-wrap;
}
//
// Set consistent quote types.
//
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
//
// Address inconsistent and variable font size in all browsers.
//
small {
font-size: 80%;
}
//
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// ==========================================================================
// Embedded content
// ==========================================================================
//
// Remove border when inside `a` element in IE 8/9.
//
img {
border: 0;
}
//
// Correct overflow displayed oddly in IE 9.
//
svg:not(:root) {
overflow: hidden;
}
// ==========================================================================
// Figures
// ==========================================================================
//
// Address margin not present in IE 8/9 and Safari 5.
//
figure {
margin: 0;
}
// ==========================================================================
// Forms
// ==========================================================================
//
// Define consistent border, margin, and padding.
//
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
//
// 1. Correct `color` not being inherited in IE 8/9.
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
//
legend {
border: 0; // 1
padding: 0; // 2
}
//
// 1. Correct font family not being inherited in all browsers.
// 2. Correct font size not being inherited in all browsers.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
//
button,
input,
select,
textarea {
font-family: inherit; // 1
font-size: 100%; // 2
margin: 0; // 3
}
//
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
// the UA stylesheet.
//
button,
input {
line-height: normal;
}
//
// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.
//
button,
select {
text-transform: none;
}
//
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
// `input` and others.
//
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
//
// Re-set default cursor for disabled elements.
//
button[disabled],
html input[disabled] {
cursor: default;
}
//
// 1. Address box sizing set to `content-box` in IE 8/9.
// 2. Remove excess padding in IE 8/9.
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
//
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
// (include `-moz` to future-proof).
//
input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2
box-sizing: content-box;
}
//
// Remove inner padding and search cancel button in Safari 5 and Chrome
// on OS X.
//
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
//
// Remove inner padding and border in Firefox 4+.
//
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
//
// 1. Remove default vertical scrollbar in IE 8/9.
// 2. Improve readability and alignment in all browsers.
//
textarea {
overflow: auto; // 1
vertical-align: top; // 2
}
// ==========================================================================
// Tables
// ==========================================================================
//
// Remove most spacing between table cells.
//
table {
border-collapse: collapse;
border-spacing: 0;
}

54
src/less/bootstrap/pager.less Normal file
View File

@ -0,0 +1,54 @@
//
// Pager pagination
// --------------------------------------------------
.pager {
margin: @line-height-computed 0;
list-style: none;
text-align: center;
.clearfix();
li {
display: inline;
> a,
> span {
display: inline-block;
padding: 5px 14px;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-radius: 15px;
}
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pagination-active-bg;
}
}
.next {
> a,
> span {
float: right;
}
}
.previous {
> a,
> span {
float: left;
}
}
.disabled {
> a,
> a:hover,
> a:focus,
> span {
color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
}
}

87
src/less/bootstrap/pagination.less Normal file
View File

@ -0,0 +1,87 @@
//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination {
display: inline-block;
margin: @line-height-computed 0;
border-radius: @border-radius-base;
}
.pagination > li {
display: inline; // Remove list-style and block-level defaults
}
.pagination > li > a,
.pagination > li > span {
float: left; // Collapse white-space
padding: 4px 12px;
line-height: @line-height-base;
text-decoration: none;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-left-width: 0;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > .active > a,
.pagination > .active > span {
background-color: @pagination-active-bg;
}
.pagination > .active > a,
.pagination > .active > span {
color: @gray-light;
cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: @gray-light;
background-color: @pagination-bg;
cursor: default;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
border-left-width: 1px;
.border-left-radius(@border-radius-base);
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
.border-right-radius(@border-radius-base);
}
// Sizing
// --------------------------------------------------
// Large
.pagination-large {
> li > a,
> li > span {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
}
> li:first-child > a,
> li:first-child > span {
.border-left-radius(@border-radius-large);
}
> li:last-child > a,
> li:last-child > span {
.border-right-radius(@border-radius-large);
}
}
// Small
.pagination-small {
> li > a,
> li > span {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
}
> li:first-child > a,
> li:first-child > span {
.border-left-radius(@border-radius-small);
}
> li:last-child > a,
> li:last-child > span {
.border-right-radius(@border-radius-small);
}
}

96
src/less/bootstrap/panels.less Normal file
View File

@ -0,0 +1,96 @@
//
// Panels
// --------------------------------------------------
// Base class
.panel {
padding: 15px;
margin-bottom: 20px;
background-color: @panel-bg;
border: 1px solid @panel-border;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
// Optional heading
.panel-heading {
margin: -15px -15px 15px;
padding: 10px 15px;
font-size: (@font-size-base * 1.25);
font-weight: 500;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
border-top-left-radius: (@panel-border-radius - 1);
border-top-right-radius: (@panel-border-radius - 1);
}
// Optional footer (stays gray in every modifier class)
.panel-footer {
margin: 15px -15px -15px;
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-border;
border-bottom-left-radius: (@panel-border-radius - 1);
border-bottom-right-radius: (@panel-border-radius - 1);
}
// Contextual variations
.panel-primary {
border-color: @panel-primary-border;
.panel-heading {
color: @panel-primary-text;
background-color: @panel-primary-heading-bg;
border-color: @panel-primary-border;
}
}
.panel-success {
border-color: @panel-success-border;
.panel-heading {
color: @panel-success-text;
background-color: @panel-success-heading-bg;
border-color: @panel-success-border;
}
}
.panel-warning {
border-color: @panel-warning-border;
.panel-heading {
color: @panel-warning-text;
background-color: @panel-warning-heading-bg;
border-color: @panel-warning-border;
}
}
.panel-danger {
border-color: @panel-danger-border;
.panel-heading {
color: @panel-danger-text;
background-color: @panel-danger-heading-bg;
border-color: @panel-danger-border;
}
}
.panel-info {
border-color: @panel-info-border;
.panel-heading {
color: @panel-info-text;
background-color: @panel-info-heading-bg;
border-color: @panel-info-border;
}
}
// List groups in panels
.list-group-flush {
margin: 15px -15px -15px;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
.border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}

129
src/less/bootstrap/popovers.less Normal file
View File

@ -0,0 +1,129 @@
//
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
display: none;
max-width: 276px;
padding: 1px;
text-align: left; // Reset given new insertion method
background-color: @popover-bg;
-webkit-bg-clip: padding-box;
-moz-bg-clip: padding;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
// Arrows
//
// .arrow is outer, .arrow:after is inner
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow {
border-width: @popover-arrow-outer-width;
}
.popover .arrow:after {
border-width: @popover-arrow-width;
content: "";
}
.popover {
&.top .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: #999; // IE8 fallback
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
}
&.right .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: #999; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
}
&.bottom .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: #999; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
}
&.left .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: #999; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
}
}

85
src/less/bootstrap/print.less Normal file
View File

@ -0,0 +1,85 @@
//
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 2cm .5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap components
.navbar {
display: none;
}
.table td,
.table th {
background-color: #fff !important;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
}

118
src/less/bootstrap/progress-bars.less Normal file
View File

@ -0,0 +1,118 @@
//
// Progress bars
// --------------------------------------------------
// Bar animations
// -------------------------
// Webkit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Firefox
@-moz-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// IE9
@-ms-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Opera
@-o-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Bar itself
// -------------------------
// Outer container
.progress {
overflow: hidden;
height: @line-height-computed;
margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
}
// Bar of progress
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: @font-size-small;
color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.transition(width .6s ease);
}
// Striped bars
.progress-striped .progress-bar {
#gradient > .striped(@progress-bar-bg);
.background-size(40px 40px);
}
// Call animation for the active one
.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
// Variations
// -------------------------
// Danger (red)
.progress-bar-danger {
background-color: @progress-bar-danger-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-danger-bg);
}
}
// Success (green)
.progress-bar-success {
background-color: @progress-bar-success-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-success-bg);
}
}
// Warning (orange)
.progress-bar-warning {
background-color: @progress-bar-warning-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-warning-bg);
}
}
// Info (teal)
.progress-bar-info {
background-color: @progress-bar-info-bg;
.progress-striped & {
#gradient > .striped(@progress-bar-info-bg);
}
}

127
src/less/bootstrap/responsive-utilities.less Normal file
View File

@ -0,0 +1,127 @@
//
// Responsive: Utility classes
// --------------------------------------------------
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
//
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
width: device-width;
}
// IE10 on Windows Phone 8
// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
// other words, say on a Lumia, you'll get 768px as the device width,
// meaning users will see the tablet styles and not phone styles.
//
// Alternatively you can override this with JS (see source below), but
// we won't be doing that here given our limited scope.
//
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
@media screen and (max-width: 400px) {
@-ms-viewport{
width: 320px;
}
}
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
display: none;
visibility: hidden;
}
// Visibility utilities
// For Phones
.visible-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.visible-md { display: none !important; }
.visible-lg { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.hidden-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm { display: none !important; }
.visible-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.visible-lg { display: none !important; }
.hidden-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.hidden-md { display: none !important; }
.hidden-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
}
// For desktops
@media (min-width: @screen-desktop) {
.visible-sm { display: none !important; }
.visible-md { display: none !important; }
.visible-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.hidden-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.hidden-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.hidden-lg { display: none !important; }
}
// Print utilities
.visible-print { display: none !important; }
.hidden-print { }
@media print {
.visible-print {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.hidden-print { display: none !important; }
}

81
src/less/bootstrap/scaffolding.less Normal file
View File

@ -0,0 +1,81 @@
//
// Scaffolding
// --------------------------------------------------
// Reset the box-sizing
// -------------------------
* {
.box-sizing(border-box);
}
// Body reset
// -------------------------
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
}
// Reset fonts for revelant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Links
// -------------------------
a {
color: @link-color;
text-decoration: none;
}
a:hover,
a:focus {
color: @link-hover-color;
text-decoration: underline;
}
a:focus {
.tab-focus();
}
// Images
// -------------------------
img {
// Responsive images (ensure images don't scale beyond their parents)
max-width: 100%; // Part 1: Set a maxium relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
// Match vertical alignment with other comment elements
vertical-align: middle;
}
// Rounded corners
.img-rounded {
border-radius: 6px;
}
// Image thumbnails
// See thumbnails.less for `.img-thumbnail`
// Perfect circle
.img-circle {
border-radius: 500px; // crank the border-radius so it works with most reasonably sized images
}

244
src/less/bootstrap/tables.less Normal file
View File

@ -0,0 +1,244 @@
//
// Tables
// --------------------------------------------------
table {
max-width: 100%;
background-color: @table-bg;
}
th {
text-align: left;
}
// BASELINE STYLES
// ---------------
.table {
width: 100%;
margin-bottom: @line-height-computed;
// Cells
thead > tr > th,
tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 8px;
line-height: @line-height-base;
vertical-align: top;
border-top: 1px solid @table-border-color;
}
// Bottom align for column headings
thead > tr > th {
vertical-align: bottom;
}
// Remove top border from thead by default
caption + thead tr:first-child th,
caption + thead tr:first-child td,
colgroup + thead tr:first-child th,
colgroup + thead tr:first-child td,
thead:first-child tr:first-child th,
thead:first-child tr:first-child td {
border-top: 0;
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 2px solid @table-border-color;
}
// Nesting
.table {
background-color: @body-bg;
}
}
// CONDENSED TABLE W/ HALF PADDING
// -------------------------------
.table-condensed {
thead > tr > th,
tbody > tr > th,
thead > tr > td,
tbody > tr > td {
padding: 4px 5px;
}
}
// BORDERED VERSION
// ----------------
.table-bordered {
border: 1px solid @table-border-color;
border-collapse: separate; // Done so we can round those corners!
border-left: 0;
border-radius: @border-radius-base;
> thead > tr > th,
> tbody > tr > th,
> thead > tr > td,
> tbody > tr > td {
border-left: 1px solid @table-border-color;
}
// Prevent a double border
> caption + thead > tr:first-child th,
> caption + tbody > tr:first-child th,
> caption + tbody > tr:first-child td,
> colgroup + thead > tr:first-child th,
> colgroup + tbody > tr:first-child th,
> colgroup + tbody > tr:first-child td,
> thead:first-child > tr:first-child th,
> tbody:first-child > tr:first-child th,
> tbody:first-child > tr:first-child td {
border-top: 0;
}
// For first th/td in the first row in the first thead or tbody
> thead:first-child > tr:first-child > th:first-child,
> tbody:first-child > tr:first-child > td:first-child,
> tbody:first-child > tr:first-child > th:first-child {
border-top-left-radius: @border-radius-base;
}
// For last th/td in the first row in the first thead or tbody
> thead:first-child > tr:first-child > th:last-child,
> tbody:first-child > tr:first-child > td:last-child,
> tbody:first-child > tr:first-child > th:last-child {
border-top-right-radius: @border-radius-base;
}
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
> thead:last-child > tr:last-child > th:first-child,
> tbody:last-child > tr:last-child > td:first-child,
> tbody:last-child > tr:last-child > th:first-child,
> tfoot:last-child > tr:last-child > td:first-child,
> tfoot:last-child > tr:last-child > th:first-child {
border-bottom-left-radius: @border-radius-base;
}
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
> thead:last-child > tr:last-child > th:last-child,
> tbody:last-child > tr:last-child > td:last-child,
> tbody:last-child > tr:last-child > th:last-child,
> tfoot:last-child > tr:last-child > td:last-child,
> tfoot:last-child > tr:last-child > th:last-child {
border-bottom-right-radius: @border-radius-base;
}
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
> tfoot + tbody:last-child > tr:last-child > td:first-child {
border-bottom-left-radius: 0;
}
> tfoot + tbody:last-child > tr:last-child > td:last-child {
border-bottom-right-radius: 0;
}
// Special fixes to round the left border on the first td/th
> caption + thead > tr:first-child > th:first-child,
> caption + tbody > tr:first-child > td:first-child,
> colgroup + thead > tr:first-child > th:first-child,
> colgroup + tbody > tr:first-child > td:first-child {
border-top-left-radius: @border-radius-base;
}
> caption + thead > tr:first-child > th:last-child,
> caption + tbody > tr:first-child > td:last-child,
> colgroup + thead > tr:first-child > th:last-child,
> colgroup + tbody > tr:first-child > td:last-child {
border-top-right-radius: @border-radius-base;
}
}
// ZEBRA-STRIPING
// --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody {
> tr:nth-child(odd) > td,
> tr:nth-child(odd) > th {
background-color: @table-bg-accent;
}
}
}
// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody {
> tr:hover > td,
> tr:hover > th {
background-color: @table-bg-hover;
}
}
}
// TABLE CELL SIZING
// -----------------
// Reset default table behavior
table col[class^="col-"] {
float: none;
display: table-column;
}
table td[class^="col-"],
table th[class^="col-"] {
float: none;
display: table-cell;
}
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped
.table > tbody > tr {
> td.success,
> th.success,
&.success > td {
background-color: @state-success-bg;
border-color: @state-success-border;
}
> td.danger,
> th.danger,
&.danger > td {
background-color: @state-danger-bg;
border-color: @state-danger-border;
}
> td.warning,
> th.warning,
&.warning > td {
background-color: @state-warning-bg;
border-color: @state-warning-border;
}
}
// Hover states for .table-hover
.table-hover > tbody > tr {
> td.success:hover,
> th.success:hover,
&.success:hover > td {
background-color: darken(@state-success-bg, 5%);
border-color: darken(@state-success-border, 5%);
}
> td.danger:hover,
> th.danger:hover,
&.danger:hover > td {
background-color: darken(@state-danger-bg, 5%);
border-color: darken(@state-danger-border, 5%);
}
> td.warning:hover,
> th.warning:hover,
&.warning:hover > td {
background-color: darken(@state-warning-bg, 5%);
border-color: darken(@state-warning-border, 5%);
}
}

43
src/less/bootstrap/thumbnails.less Normal file
View File

@ -0,0 +1,43 @@
//
// Thumbnails
// --------------------------------------------------
// Base classes
// For thumbnail block-level composite components and simple image styles
// The actual thumbnailed element
// Can be `a`, `div`, or `img`
.thumbnail,
.img-thumbnail {
padding: 4px;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
}
.thumbnail {
display: block;
}
.img-thumbnail {
display: inline-block;
}
// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {
border-color: @link-color;
}
// Images and captions
.thumbnail > img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
color: @thumbnail-caption-color;
}

71
src/less/bootstrap/tooltip.less Normal file
View File

@ -0,0 +1,71 @@
//
// Tooltips
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindex-tooltip;
display: block;
visibility: visible;
font-size: @font-size-mini;
line-height: 1.4;
.opacity(0);
&.in { .opacity(1); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
&.left { margin-left: -3px; padding: 0 5px; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
}

246
src/less/bootstrap/type.less Normal file
View File

@ -0,0 +1,246 @@
//
// Typography
// --------------------------------------------------
// Body text
// -------------------------
p {
margin: 0 0 (@line-height-computed / 2);
}
.lead {
margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: 1.4;
}
// Emphasis & misc
// -------------------------
// Ex: 14px base font * 85% = about 12px
small { font-size: 85%; }
cite { font-style: normal; }
// Utility classes
.text-muted { color: @gray-light; }
a.text-muted:hover,
a.text-muted:focus { color: darken(@gray-light, 10%); }
.text-warning { color: @state-warning-text; }
a.text-warning:hover,
a.text-warning:focus { color: darken(@state-warning-text, 10%); }
.text-danger { color: @state-danger-text; }
a.text-danger:hover,
a.text-danger:focus { color: darken(@state-danger-text, 10%); }
.text-success { color: @state-success-text; }
a.text-success:hover,
a.text-success:focus { color: darken(@state-success-text, 10%); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
small {
font-weight: normal;
line-height: 1;
color: @gray-light;
}
}
h1,
h2,
h3 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
}
h4,
h5,
h6 {
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
}
h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }
h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
// Page header
// -------------------------
.page-header {
padding-bottom: ((@line-height-computed / 2) - 1);
margin: (@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @gray-lighter;
}
// Lists
// --------------------------------------------------
// Unordered and Ordered lists
ul,
ol {
margin-top: 0;
margin-bottom: (@line-height-computed / 2);
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
// List options
// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
padding-left: 0;
list-style: none;
}
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
> li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
}
// Description Lists
dl {
margin-bottom: @line-height-computed;
}
dt,
dd {
line-height: @line-height-base;
}
dt {
font-weight: bold;
}
dd {
margin-left: (@line-height-computed / 2);
}
// Horizontal layout (like forms)
.dl-horizontal {
dt {
float: left;
width: (@component-offset-horizontal - 20);
clear: left;
text-align: right;
.text-overflow();
}
dd {
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
margin-left: @component-offset-horizontal;
}
}
// MISC
// ----
// Horizontal rules
hr {
margin: @line-height-computed 0;
border: 0;
border-top: 1px solid @hr-border;
border-bottom: 1px solid #fff;
border-bottom: 1px solid rgba(255,255,255,.5);
}
// Abbreviations and acronyms
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @gray-light;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
blockquote {
padding: (@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
border-left: 5px solid @gray-lighter;
p {
font-size: (@font-size-base * 1.25);
font-weight: 300;
line-height: 1.25;
}
p:last-child {
margin-bottom: 0;
}
small {
display: block;
line-height: @line-height-base;
color: @gray-light;
&:before {
content: '\2014 \00A0';
}
}
// Float right with text-align: right
&.pull-right {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @gray-lighter;
border-left: 0;
p,
small {
text-align: right;
}
small {
&:before {
content: '';
}
&:after {
content: '\00A0 \2014';
}
}
}
}
// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
// Addresses
address {
display: block;
margin-bottom: @line-height-computed;
font-style: normal;
line-height: @line-height-base;
}

42
src/less/bootstrap/utilities.less Normal file
View File

@ -0,0 +1,42 @@
//
// Utility classes
// --------------------------------------------------
// Floats
// -------------------------
.clearfix {
.clearfix();
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
// Toggling content
// -------------------------
.hide {
display: none !important;
}
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
.text-hide {
.hide-text();
}
// For Affix plugin
// -------------------------
.affix {
position: fixed;
}

429
src/less/bootstrap/variables.less Normal file
View File

@ -0,0 +1,429 @@
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
// Grays
// -------------------------
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
// Brand colors
// -------------------------
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-info: #5bc0de;
// Scaffolding
// -------------------------
@body-bg: #fff;
@text-color: @gray-dark;
// Links
// -------------------------
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Typography
// -------------------------
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, 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-mini: ceil(@font-size-base * 0.75); // ~11px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)
@padding-base-vertical: 8px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 14px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-bg: @brand-primary;
// Tables
// -------------------------
@table-bg: transparent; // overall background-color
@table-bg-accent: #f9f9f9; // for striping
@table-bg-hover: #f5f5f5; // for hover
@table-border-color: #ddd; // table and cell border
// Buttons
// -------------------------
@btn-default-color: #fff;
@btn-default-bg: #474949;
@btn-default-border: @btn-default-bg;
@btn-primary-color: @btn-default-color;
@btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg;
@btn-success-color: @btn-default-color;
@btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg;
@btn-warning-color: @btn-default-color;
@btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg;
@btn-danger-color: @btn-default-color;
@btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg;
@btn-info-color: @btn-default-color;
@btn-info-bg: @brand-info;
@btn-info-border: @btn-info-bg;
// Forms
// -------------------------
@input-bg: #fff;
@input-bg-disabled: @gray-lighter;
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
// Dropdowns
// -------------------------
@dropdown-bg: #fff;
@dropdown-border: rgba(0,0,0,.15);
@dropdown-divider-top: #e5e5e5;
@dropdown-divider-bottom: #fff;
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
// Glyphicons font path
// -------------------------
@glyphicons-font-path: "../fonts";
// Navbar
// -------------------------
// Basics of a navbar
@navbar-height: 50px;
@navbar-color: #777;
@navbar-bg: #eee;
@navbar-padding: floor(@grid-gutter-width / 2); // ~15px
// Navbar links
@navbar-link-color: #777;
@navbar-link-hover-color: #333;
@navbar-link-hover-bg: transparent;
@navbar-link-active-color: #555;
@navbar-link-active-bg: darken(@navbar-bg, 10%);
@navbar-link-disabled-color: #ccc;
@navbar-link-disabled-bg: transparent;
// Navbar brand label
@navbar-brand-color: @navbar-link-color;
@navbar-brand-hover-color: darken(@navbar-link-color, 10%);
@navbar-brand-hover-bg: transparent;
// Inverted navbar
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222;
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;
@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 search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Pagination
// -------------------------
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-active-bg: #f5f5f5;
// Jumbotron
// -------------------------
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit;
// Form states and alerts
// -------------------------
@state-warning-text: #c09853;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
@state-success-text: #468847;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #3a87ad;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltip-color: #fff;
@tooltip-bg: rgba(0,0,0,.9);
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;
@popover-bg: #fff;
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-title-bg: darken(@popover-bg, 3%);
// Special enhancement for popovers
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
// Labels
// -------------------------
@label-success-bg: @brand-success;
@label-info-bg: @brand-info;
@label-warning-bg: @brand-warning;
@label-danger-bg: @brand-danger;
// Modals
// -------------------------
@modal-inner-padding: 20px;
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
// Alerts
// -------------------------
@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;
@alert-border-radius: @border-radius-base;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
// Progress bars
// -------------------------
@progress-bg: #f5f5f5;
@progress-bar-bg: @brand-primary;
@progress-bar-success-bg: @brand-success;
@progress-bar-warning-bg: @brand-warning;
@progress-bar-danger-bg: @brand-danger;
@progress-bar-info-bg: @brand-info;
// List group
// -------------------------
@list-group-bg: #fff;
@list-group-border: #ddd;
@list-group-border-radius: @border-radius-base;
@list-group-hover-bg: #f5f5f5;
@list-group-active-color: #fff;
@list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg;
// Panels
// -------------------------
@panel-bg: #fff;
@panel-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
@panel-footer-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-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;
@panel-info-text: @state-info-text;
@panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg;
// Thumbnails
// -------------------------
@thumbnail-caption-color: @text-color;
@thumbnail-bg: @body-bg;
@thumbnail-border: #ddd;
@thumbnail-border-radius: @border-radius-base;
// Wells
// -------------------------
@well-bg: #f5f5f5;
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: @gray-lighter;
// Horizontal forms & lists
@component-offset-horizontal: 180px;
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
// So media queries don't overlap when required, provide a maximum
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: @screen-small-max;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: 728px;
// Medium screen / desktop
@container-desktop: 940px;
// Large screen / wide desktop
@container-large-desktop: 1170px;
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;

29
src/less/bootstrap/wells.less Normal file
View File

@ -0,0 +1,29 @@
//
// Wells
// --------------------------------------------------
// Base class
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: @well-bg;
border: 1px solid darken(@well-bg, 7%);
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-large {
padding: 24px;
border-radius: @border-radius-large;
}
.well-small {
padding: 9px;
border-radius: @border-radius-small;
}

78
src/less/font-awesome/bootstrap.less vendored Normal file
View File

@ -0,0 +1,78 @@
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */
.btn, .nav {
[class^="icon-"],
[class*=" icon-"] {
// display: inline;
&.icon-large { line-height: .9em; }
&.icon-spin { display: inline-block; }
}
}
.nav-tabs, .nav-pills {
[class^="icon-"],
[class*=" icon-"] {
&, &.icon-large { line-height: .9em; }
}
}
.btn {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .18em; }
}
&.icon-spin.icon-large { line-height: .8em; }
}
}
.btn.btn-small {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .25em; }
}
}
}
.btn.btn-large {
[class^="icon-"],
[class*=" icon-"] {
margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .05em; }
}
&.pull-left.icon-2x { margin-right: .2em; }
&.pull-right.icon-2x { margin-left: .2em; }
}
}

130
src/less/font-awesome/core.less vendored Normal file
View File

@ -0,0 +1,130 @@
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
.icon-FontAwesome();
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
cursor: default;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 4/3em;
}
/* makes sure icons active on rollover in links */
a {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
}
}
/* increased font size for icon-large */
[class^="icon-"],
[class*=" icon-"] {
&.icon-fixed-width {
display: inline-block;
width: 16/14em;
text-align: right;
padding-right: 4/14em;
&.icon-large {
width: 20/14em;
}
}
}
.icons-ul {
margin-left: @icons-li-width;
list-style-type: none;
> li { position: relative; }
.icon-li {
position: absolute;
left: -@icons-li-width;
width: @icons-li-width;
text-align: center;
line-height: inherit;
}
}
// allows usage of the hide class directly on font awesome icons
[class^="icon-"],
[class*=" icon-"] {
&.hide {
display: none;
}
}
.icon-muted { color: @iconMuted; }
.icon-light { color: @iconLight; }
.icon-dark { color: @iconDark; }
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px @borderColor;
padding: .2em .25em .15em;
.border-radius(3px);
}
// Icon Sizes
// -------------------------
.icon-2x {
font-size: 2em;
&.icon-border {
border-width: 2px;
.border-radius(4px);
}
}
.icon-3x {
font-size: 3em;
&.icon-border {
border-width: 3px;
.border-radius(5px);
}
}
.icon-4x {
font-size: 4em;
&.icon-border {
border-width: 4px;
.border-radius(6px);
}
}
.icon-5x {
font-size: 5em;
&.icon-border {
border-width: 5px;
.border-radius(7px);
}
}
// Floats & Margins
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
[class^="icon-"],
[class*=" icon-"] {
&.pull-left {
margin-right: .3em;
}
&.pull-right {
margin-left: .3em;
}
}

90
src/less/font-awesome/extras.less vendored Normal file
View File

@ -0,0 +1,90 @@
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.icon-stack();
/* Animated rotating icon */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
a .icon-spin {
display: inline-block;
text-decoration: none;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
/* Icon rotations and mirroring */
.icon-rotate-90:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270:before {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.icon-flip-horizontal:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-vertical:before {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/* ensure rotation occurs inside anchor tags */
a {
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
&:before { display: inline-block; }
}
}

1945
src/less/font-awesome/font-awesome-ie7.less vendored Normal file
View File

File diff suppressed because it is too large Load Diff

33
src/less/font-awesome/font-awesome.less vendored Normal file
View File

@ -0,0 +1,33 @@
/*!
* Font Awesome 3.2.0
* the iconic font designed for Bootstrap
* ------------------------------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation can be
* found at http://fontawesome.io. Stay up to date on Twitter at
* http://twitter.com/fontawesome.
*
* License
* ------------------------------------------------------------------------------
* - The Font Awesome font is licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html
* - Font Awesome documentation licensed under CC BY 3.0 -
* http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fontawesome.io"
*
* Author - Dave Gandy
* ------------------------------------------------------------------------------
* Email: dave@fontawesome.io
* Twitter: http://twitter.com/byscuits
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
*/
@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "bootstrap.less";
@import "extras.less";
@import "icons.less";

379
src/less/font-awesome/icons.less vendored Normal file
View File

@ -0,0 +1,379 @@
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before { content: @glass; }
.icon-music:before { content: @music; }
.icon-search:before { content: @search; }
.icon-envelope-alt:before { content: @envelope-alt; }
.icon-heart:before { content: @heart; }
.icon-star:before { content: @star; }
.icon-star-empty:before { content: @star-empty; }
.icon-user:before { content: @user; }
.icon-film:before { content: @film; }
.icon-th-large:before { content: @th-large; }
.icon-th:before { content: @th; }
.icon-th-list:before { content: @th-list; }
.icon-ok:before { content: @ok; }
.icon-remove:before { content: @remove; }
.icon-zoom-in:before { content: @zoom-in; }
.icon-zoom-out:before { content: @zoom-out; }
.icon-power-off:before,
.icon-off:before { content: @off; }
.icon-signal:before { content: @signal; }
.icon-cog:before { content: @cog; }
.icon-trash:before { content: @trash; }
.icon-home:before { content: @home; }
.icon-file-alt:before { content: @file-alt; }
.icon-time:before { content: @time; }
.icon-road:before { content: @road; }
.icon-download-alt:before { content: @download-alt; }
.icon-download:before { content: @download; }
.icon-upload:before { content: @upload; }
.icon-inbox:before { content: @inbox; }
.icon-play-circle:before { content: @play-circle; }
.icon-rotate-right:before,
.icon-repeat:before { content: @repeat; }
.icon-refresh:before { content: @refresh; }
.icon-list-alt:before { content: @list-alt; }
.icon-lock:before { content: @lock; }
.icon-flag:before { content: @flag; }
.icon-headphones:before { content: @headphones; }
.icon-volume-off:before { content: @volume-off; }
.icon-volume-down:before { content: @volume-down; }
.icon-volume-up:before { content: @volume-up; }
.icon-qrcode:before { content: @qrcode; }
.icon-barcode:before { content: @barcode; }
.icon-tag:before { content: @tag; }
.icon-tags:before { content: @tags; }
.icon-book:before { content: @book; }
.icon-bookmark:before { content: @bookmark; }
.icon-print:before { content: @print; }
.icon-camera:before { content: @camera; }
.icon-font:before { content: @font; }
.icon-bold:before { content: @bold; }
.icon-italic:before { content: @italic; }
.icon-text-height:before { content: @text-height; }
.icon-text-width:before { content: @text-width; }
.icon-align-left:before { content: @align-left; }
.icon-align-center:before { content: @align-center; }
.icon-align-right:before { content: @align-right; }
.icon-align-justify:before { content: @align-justify; }
.icon-list:before { content: @list; }
.icon-indent-left:before { content: @indent-left; }
.icon-indent-right:before { content: @indent-right; }
.icon-facetime-video:before { content: @facetime-video; }
.icon-picture:before { content: @picture; }
.icon-pencil:before { content: @pencil; }
.icon-map-marker:before { content: @map-marker; }
.icon-adjust:before { content: @adjust; }
.icon-tint:before { content: @tint; }
.icon-edit:before { content: @edit; }
.icon-share:before { content: @share; }
.icon-check:before { content: @check; }
.icon-move:before { content: @move; }
.icon-step-backward:before { content: @step-backward; }
.icon-fast-backward:before { content: @fast-backward; }
.icon-backward:before { content: @backward; }
.icon-play:before { content: @play; }
.icon-pause:before { content: @pause; }
.icon-stop:before { content: @stop; }
.icon-forward:before { content: @forward; }
.icon-fast-forward:before { content: @fast-forward; }
.icon-step-forward:before { content: @step-forward; }
.icon-eject:before { content: @eject; }
.icon-chevron-left:before { content: @chevron-left; }
.icon-chevron-right:before { content: @chevron-right; }
.icon-plus-sign:before { content: @plus-sign; }
.icon-minus-sign:before { content: @minus-sign; }
.icon-remove-sign:before { content: @remove-sign; }
.icon-ok-sign:before { content: @ok-sign; }
.icon-question-sign:before { content: @question-sign; }
.icon-info-sign:before { content: @info-sign; }
.icon-screenshot:before { content: @screenshot; }
.icon-remove-circle:before { content: @remove-circle; }
.icon-ok-circle:before { content: @ok-circle; }
.icon-ban-circle:before { content: @ban-circle; }
.icon-arrow-left:before { content: @arrow-left; }
.icon-arrow-right:before { content: @arrow-right; }
.icon-arrow-up:before { content: @arrow-up; }
.icon-arrow-down:before { content: @arrow-down; }
.icon-mail-forward:before,
.icon-share-alt:before { content: @share-alt; }
.icon-resize-full:before { content: @resize-full; }
.icon-resize-small:before { content: @resize-small; }
.icon-plus:before { content: @plus; }
.icon-minus:before { content: @minus; }
.icon-asterisk:before { content: @asterisk; }
.icon-exclamation-sign:before { content: @exclamation-sign; }
.icon-gift:before { content: @gift; }
.icon-leaf:before { content: @leaf; }
.icon-fire:before { content: @fire; }
.icon-eye-open:before { content: @eye-open; }
.icon-eye-close:before { content: @eye-close; }
.icon-warning-sign:before { content: @warning-sign; }
.icon-plane:before { content: @plane; }
.icon-calendar:before { content: @calendar; }
.icon-random:before { content: @random; }
.icon-comment:before { content: @comment; }
.icon-magnet:before { content: @magnet; }
.icon-chevron-up:before { content: @chevron-up; }
.icon-chevron-down:before { content: @chevron-down; }
.icon-retweet:before { content: @retweet; }
.icon-shopping-cart:before { content: @shopping-cart; }
.icon-folder-close:before { content: @folder-close; }
.icon-folder-open:before { content: @folder-open; }
.icon-resize-vertical:before { content: @resize-vertical; }
.icon-resize-horizontal:before { content: @resize-horizontal; }
.icon-bar-chart:before { content: @bar-chart; }
.icon-twitter-sign:before { content: @twitter-sign; }
.icon-facebook-sign:before { content: @facebook-sign; }
.icon-camera-retro:before { content: @camera-retro; }
.icon-key:before { content: @key; }
.icon-cogs:before { content: @cogs; }
.icon-comments:before { content: @comments; }
.icon-thumbs-up-alt:before { content: @thumbs-up-alt; }
.icon-thumbs-down-alt:before { content: @thumbs-down-alt; }
.icon-star-half:before { content: @star-half; }
.icon-heart-empty:before { content: @heart-empty; }
.icon-signout:before { content: @signout; }
.icon-linkedin-sign:before { content: @linkedin-sign; }
.icon-pushpin:before { content: @pushpin; }
.icon-external-link:before { content: @external-link; }
.icon-signin:before { content: @signin; }
.icon-trophy:before { content: @trophy; }
.icon-github-sign:before { content: @github-sign; }
.icon-upload-alt:before { content: @upload-alt; }
.icon-lemon:before { content: @lemon; }
.icon-phone:before { content: @phone; }
.icon-unchecked:before,
.icon-check-empty:before { content: @check-empty; }
.icon-bookmark-empty:before { content: @bookmark-empty; }
.icon-phone-sign:before { content: @phone-sign; }
.icon-twitter:before { content: @twitter; }
.icon-facebook:before { content: @facebook; }
.icon-github:before { content: @github; }
.icon-unlock:before { content: @unlock; }
.icon-credit-card:before { content: @credit-card; }
.icon-rss:before { content: @rss; }
.icon-hdd:before { content: @hdd; }
.icon-bullhorn:before { content: @bullhorn; }
.icon-bell:before { content: @bell; }
.icon-certificate:before { content: @certificate; }
.icon-hand-right:before { content: @hand-right; }
.icon-hand-left:before { content: @hand-left; }
.icon-hand-up:before { content: @hand-up; }
.icon-hand-down:before { content: @hand-down; }
.icon-circle-arrow-left:before { content: @circle-arrow-left; }
.icon-circle-arrow-right:before { content: @circle-arrow-right; }
.icon-circle-arrow-up:before { content: @circle-arrow-up; }
.icon-circle-arrow-down:before { content: @circle-arrow-down; }
.icon-globe:before { content: @globe; }
.icon-wrench:before { content: @wrench; }
.icon-tasks:before { content: @tasks; }
.icon-filter:before { content: @filter; }
.icon-briefcase:before { content: @briefcase; }
.icon-fullscreen:before { content: @fullscreen; }
.icon-group:before { content: @group; }
.icon-link:before { content: @link; }
.icon-cloud:before { content: @cloud; }
.icon-beaker:before { content: @beaker; }
.icon-cut:before { content: @cut; }
.icon-copy:before { content: @copy; }
.icon-paperclip:before,
.icon-paper-clip:before { content: @paper-clip; }
.icon-save:before { content: @save; }
.icon-sign-blank:before { content: @sign-blank; }
.icon-reorder:before { content: @reorder; }
.icon-list-ul:before { content: @list-ul; }
.icon-list-ol:before { content: @list-ol; }
.icon-strikethrough:before { content: @strikethrough; }
.icon-underline:before { content: @underline; }
.icon-table:before { content: @table; }
.icon-magic:before { content: @magic; }
.icon-truck:before { content: @truck; }
.icon-pinterest:before { content: @pinterest; }
.icon-pinterest-sign:before { content: @pinterest-sign; }
.icon-google-plus-sign:before { content: @google-plus-sign; }
.icon-google-plus:before { content: @google-plus; }
.icon-money:before { content: @money; }
.icon-caret-down:before { content: @caret-down; }
.icon-caret-up:before { content: @caret-up; }
.icon-caret-left:before { content: @caret-left; }
.icon-caret-right:before { content: @caret-right; }
.icon-columns:before { content: @columns; }
.icon-sort:before { content: @sort; }
.icon-sort-down:before { content: @sort-down; }
.icon-sort-up:before { content: @sort-up; }
.icon-envelope:before { content: @envelope; }
.icon-linkedin:before { content: @linkedin; }
.icon-rotate-left:before,
.icon-undo:before { content: @undo; }
.icon-legal:before { content: @legal; }
.icon-dashboard:before { content: @dashboard; }
.icon-comment-alt:before { content: @comment-alt; }
.icon-comments-alt:before { content: @comments-alt; }
.icon-bolt:before { content: @bolt; }
.icon-sitemap:before { content: @sitemap; }
.icon-umbrella:before { content: @umbrella; }
.icon-paste:before { content: @paste; }
.icon-lightbulb:before { content: @lightbulb; }
.icon-exchange:before { content: @exchange; }
.icon-cloud-download:before { content: @cloud-download; }
.icon-cloud-upload:before { content: @cloud-upload; }
.icon-user-md:before { content: @user-md; }
.icon-stethoscope:before { content: @stethoscope; }
.icon-suitcase:before { content: @suitcase; }
.icon-bell-alt:before { content: @bell-alt; }
.icon-coffee:before { content: @coffee; }
.icon-food:before { content: @food; }
.icon-file-text-alt:before { content: @file-text-alt; }
.icon-building:before { content: @building; }
.icon-hospital:before { content: @hospital; }
.icon-ambulance:before { content: @ambulance; }
.icon-medkit:before { content: @medkit; }
.icon-fighter-jet:before { content: @fighter-jet; }
.icon-beer:before { content: @beer; }
.icon-h-sign:before { content: @h-sign; }
.icon-plus-sign-alt:before { content: @plus-sign-alt; }
.icon-double-angle-left:before { content: @double-angle-left; }
.icon-double-angle-right:before { content: @double-angle-right; }
.icon-double-angle-up:before { content: @double-angle-up; }
.icon-double-angle-down:before { content: @double-angle-down; }
.icon-angle-left:before { content: @angle-left; }
.icon-angle-right:before { content: @angle-right; }
.icon-angle-up:before { content: @angle-up; }
.icon-angle-down:before { content: @angle-down; }
.icon-desktop:before { content: @desktop; }
.icon-laptop:before { content: @laptop; }
.icon-tablet:before { content: @tablet; }
.icon-mobile-phone:before { content: @mobile-phone; }
.icon-circle-blank:before { content: @circle-blank; }
.icon-quote-left:before { content: @quote-left; }
.icon-quote-right:before { content: @quote-right; }
.icon-spinner:before { content: @spinner; }
.icon-circle:before { content: @circle; }
.icon-mail-reply:before,
.icon-reply:before { content: @reply; }
.icon-github-alt:before { content: @github-alt; }
.icon-folder-close-alt:before { content: @folder-close-alt; }
.icon-folder-open-alt:before { content: @folder-open-alt; }
.icon-expand-alt:before { content: @expand-alt; }
.icon-collapse-alt:before { content: @collapse-alt; }
.icon-smile:before { content: @smile; }
.icon-frown:before { content: @frown; }
.icon-meh:before { content: @meh; }
.icon-gamepad:before { content: @gamepad; }
.icon-keyboard:before { content: @keyboard; }
.icon-flag-alt:before { content: @flag-alt; }
.icon-flag-checkered:before { content: @flag-checkered; }
.icon-terminal:before { content: @terminal; }
.icon-code:before { content: @code; }
.icon-reply-all:before { content: @reply-all; }
.icon-mail-reply-all:before { content: @mail-reply-all; }
.icon-star-half-full:before,
.icon-star-half-empty:before { content: @star-half-empty; }
.icon-location-arrow:before { content: @location-arrow; }
.icon-crop:before { content: @crop; }
.icon-code-fork:before { content: @code-fork; }
.icon-unlink:before { content: @unlink; }
.icon-question:before { content: @question; }
.icon-info:before { content: @info; }
.icon-exclamation:before { content: @exclamation; }
.icon-superscript:before { content: @superscript; }
.icon-subscript:before { content: @subscript; }
.icon-eraser:before { content: @eraser; }
.icon-puzzle-piece:before { content: @puzzle-piece; }
.icon-microphone:before { content: @microphone; }
.icon-microphone-off:before { content: @microphone-off; }
.icon-shield:before { content: @shield; }
.icon-calendar-empty:before { content: @calendar-empty; }
.icon-fire-extinguisher:before { content: @fire-extinguisher; }
.icon-rocket:before { content: @rocket; }
.icon-maxcdn:before { content: @maxcdn; }
.icon-chevron-sign-left:before { content: @chevron-sign-left; }
.icon-chevron-sign-right:before { content: @chevron-sign-right; }
.icon-chevron-sign-up:before { content: @chevron-sign-up; }
.icon-chevron-sign-down:before { content: @chevron-sign-down; }
.icon-html5:before { content: @html5; }
.icon-css3:before { content: @css3; }
.icon-anchor:before { content: @anchor; }
.icon-unlock-alt:before { content: @unlock-alt; }
.icon-bullseye:before { content: @bullseye; }
.icon-ellipsis-horizontal:before { content: @ellipsis-horizontal; }
.icon-ellipsis-vertical:before { content: @ellipsis-vertical; }
.icon-rss-sign:before { content: @rss-sign; }
.icon-play-sign:before { content: @play-sign; }
.icon-ticket:before { content: @ticket; }
.icon-minus-sign-alt:before { content: @minus-sign-alt; }
.icon-check-minus:before { content: @check-minus; }
.icon-level-up:before { content: @level-up; }
.icon-level-down:before { content: @level-down; }
.icon-check-sign:before { content: @check-sign; }
.icon-edit-sign:before { content: @edit-sign; }
.icon-external-link-sign:before { content: @external-link-sign; }
.icon-share-sign:before { content: @share-sign; }
.icon-compass:before { content: @compass; }
.icon-collapse:before { content: @collapse; }
.icon-collapse-top:before { content: @collapse-top; }
.icon-expand:before { content: @expand; }
.icon-euro:before,
.icon-eur:before { content: @eur; }
.icon-gbp:before { content: @gbp; }
.icon-dollar:before,
.icon-usd:before { content: @usd; }
.icon-rupee:before,
.icon-inr:before { content: @inr; }
.icon-yen:before,
.icon-jpy:before { content: @jpy; }
.icon-renminbi:before,
.icon-cny:before { content: @cny; }
.icon-won:before,
.icon-krw:before { content: @krw; }
.icon-bitcoin:before,
.icon-btc:before { content: @btc; }
.icon-file:before { content: @file; }
.icon-file-text:before { content: @file-text; }
.icon-sort-by-alphabet:before { content: @sort-by-alphabet; }
.icon-sort-by-alphabet-alt:before { content: @sort-by-alphabet-alt; }
.icon-sort-by-attributes:before { content: @sort-by-attributes; }
.icon-sort-by-attributes-alt:before { content: @sort-by-attributes-alt; }
.icon-sort-by-order:before { content: @sort-by-order; }
.icon-sort-by-order-alt:before { content: @sort-by-order-alt; }
.icon-thumbs-up:before { content: @thumbs-up; }
.icon-thumbs-down:before { content: @thumbs-down; }
.icon-youtube-sign:before { content: @youtube-sign; }
.icon-youtube:before { content: @youtube; }
.icon-xing:before { content: @xing; }
.icon-xing-sign:before { content: @xing-sign; }
.icon-youtube-play:before { content: @youtube-play; }
.icon-dropbox:before { content: @dropbox; }
.icon-stackexchange:before { content: @stackexchange; }
.icon-instagram:before { content: @instagram; }
.icon-flickr:before { content: @flickr; }
.icon-adn:before { content: @adn; }
.icon-bitbucket:before { content: @bitbucket; }
.icon-bitbucket-sign:before { content: @bitbucket-sign; }
.icon-tumblr:before { content: @tumblr; }
.icon-tumblr-sign:before { content: @tumblr-sign; }
.icon-long-arrow-down:before { content: @long-arrow-down; }
.icon-long-arrow-up:before { content: @long-arrow-up; }
.icon-long-arrow-left:before { content: @long-arrow-left; }
.icon-long-arrow-right:before { content: @long-arrow-right; }
.icon-apple:before { content: @apple; }
.icon-windows:before { content: @windows; }
.icon-android:before { content: @android; }
.icon-linux:before { content: @linux; }
.icon-dribble:before { content: @dribble; }
.icon-skype:before { content: @skype; }
.icon-foursquare:before { content: @foursquare; }
.icon-trello:before { content: @trello; }
.icon-female:before { content: @female; }
.icon-male:before { content: @male; }
.icon-gittip:before { content: @gittip; }
.icon-sun:before { content: @sun; }
.icon-moon:before { content: @moon; }
.icon-archive:before { content: @archive; }
.icon-bug:before { content: @bug; }
.icon-vk:before { content: @vk; }
.icon-weibo:before { content: @weibo; }
.icon-renren:before { content: @renren; }

48
src/less/font-awesome/mixins.less vendored Normal file
View File

@ -0,0 +1,48 @@
// Mixins
// --------------------------
.icon(@icon) {
.icon-FontAwesome();
content: @icon;
}
.icon-FontAwesome() {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em; // fixes ie7 issues
}
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
.icon-stack {
position: relative;
display: inline-block;
width: @width;
height: @height;
line-height: @width;
vertical-align: -35%;
[class^="icon-"],
[class*=" icon-"] {
display: block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
font-size: @top-font-size;
line-height: inherit;
*line-height: @height;
}
.icon-stack-base {
font-size: @base-font-size;
*line-height: @height / @base-font-size;
}
}
}

14
src/less/font-awesome/path.less vendored Normal file
View File

@ -0,0 +1,14 @@
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}');
src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype'),
url('@{FontAwesomePath}/fontawesome-webfont.woff?v=@{FontAwesomeVersion}') format('woff'),
url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=@{FontAwesomeVersion}') format('truetype'),
url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=@{FontAwesomeVersion}') format('svg');
// src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}

735
src/less/font-awesome/variables.less vendored Normal file
View File

@ -0,0 +1,735 @@
// Variables
// --------------------------
@FontAwesomePath: "../font";
//@FontAwesomePath: "//netdna.bootstrapcdn.com/font-awesome/3.2.0/font"; // for referencing Bootstrap CDN font files directly
@FontAwesomeVersion: "3.2.0";
@borderColor: #eee;
@iconMuted: #eee;
@iconLight: #fff;
@iconDark: #333;
@icons-li-width: 30/14em;
@glass: "\f000";
@music: "\f001";
@search: "\f002";
@envelope-alt: "\f003";
@heart: "\f004";
@star: "\f005";
@star-empty: "\f006";
@user: "\f007";
@film: "\f008";
@th-large: "\f009";
@th: "\f00a";
@th-list: "\f00b";
@ok: "\f00c";
@remove: "\f00d";
@zoom-in: "\f00e";
@zoom-out: "\f010";
@off: "\f011";
@signal: "\f012";
@cog: "\f013";
@trash: "\f014";
@home: "\f015";
@file-alt: "\f016";
@time: "\f017";
@road: "\f018";
@download-alt: "\f019";
@download: "\f01a";
@upload: "\f01b";
@inbox: "\f01c";
@play-circle: "\f01d";
@repeat: "\f01e";
@refresh: "\f021";
@list-alt: "\f022";
@lock: "\f023";
@flag: "\f024";
@headphones: "\f025";
@volume-off: "\f026";
@volume-down: "\f027";
@volume-up: "\f028";
@qrcode: "\f029";
@barcode: "\f02a";
@tag: "\f02b";
@tags: "\f02c";
@book: "\f02d";
@bookmark: "\f02e";
@print: "\f02f";
@camera: "\f030";
@font: "\f031";
@bold: "\f032";
@italic: "\f033";
@text-height: "\f034";
@text-width: "\f035";
@align-left: "\f036";
@align-center: "\f037";
@align-right: "\f038";
@align-justify: "\f039";
@list: "\f03a";
@indent-left: "\f03b";
@indent-right: "\f03c";
@facetime-video: "\f03d";
@picture: "\f03e";
@pencil: "\f040";
@map-marker: "\f041";
@adjust: "\f042";
@tint: "\f043";
@edit: "\f044";
@share: "\f045";
@check: "\f046";
@move: "\f047";
@step-backward: "\f048";
@fast-backward: "\f049";
@backward: "\f04a";
@play: "\f04b";
@pause: "\f04c";
@stop: "\f04d";
@forward: "\f04e";
@fast-forward: "\f050";
@step-forward: "\f051";
@eject: "\f052";
@chevron-left: "\f053";
@chevron-right: "\f054";
@plus-sign: "\f055";
@minus-sign: "\f056";
@remove-sign: "\f057";
@ok-sign: "\f058";
@question-sign: "\f059";
@info-sign: "\f05a";
@screenshot: "\f05b";
@remove-circle: "\f05c";
@ok-circle: "\f05d";
@ban-circle: "\f05e";
@arrow-left: "\f060";
@arrow-right: "\f061";
@arrow-up: "\f062";
@arrow-down: "\f063";
@share-alt: "\f064";
@resize-full: "\f065";
@resize-small: "\f066";
@plus: "\f067";
@minus: "\f068";
@asterisk: "\f069";
@exclamation-sign: "\f06a";
@gift: "\f06b";
@leaf: "\f06c";
@fire: "\f06d";
@eye-open: "\f06e";
@eye-close: "\f070";
@warning-sign: "\f071";
@plane: "\f072";
@calendar: "\f073";
@random: "\f074";
@comment: "\f075";
@magnet: "\f076";
@chevron-up: "\f077";
@chevron-down: "\f078";
@retweet: "\f079";
@shopping-cart: "\f07a";
@folder-close: "\f07b";
@folder-open: "\f07c";
@resize-vertical: "\f07d";
@resize-horizontal: "\f07e";
@bar-chart: "\f080";
@twitter-sign: "\f081";
@facebook-sign: "\f082";
@camera-retro: "\f083";
@key: "\f084";
@cogs: "\f085";
@comments: "\f086";
@thumbs-up-alt: "\f087";
@thumbs-down-alt: "\f088";
@star-half: "\f089";
@heart-empty: "\f08a";
@signout: "\f08b";
@linkedin-sign: "\f08c";
@pushpin: "\f08d";
@external-link: "\f08e";
@signin: "\f090";
@trophy: "\f091";
@github-sign: "\f092";
@upload-alt: "\f093";
@lemon: "\f094";
@phone: "\f095";
@check-empty: "\f096";
@bookmark-empty: "\f097";
@phone-sign: "\f098";
@twitter: "\f099";
@facebook: "\f09a";
@github: "\f09b";
@unlock: "\f09c";
@credit-card: "\f09d";
@rss: "\f09e";
@hdd: "\f0a0";
@bullhorn: "\f0a1";
@bell: "\f0a2";
@certificate: "\f0a3";
@hand-right: "\f0a4";
@hand-left: "\f0a5";
@hand-up: "\f0a6";
@hand-down: "\f0a7";
@circle-arrow-left: "\f0a8";
@circle-arrow-right: "\f0a9";
@circle-arrow-up: "\f0aa";
@circle-arrow-down: "\f0ab";
@globe: "\f0ac";
@wrench: "\f0ad";
@tasks: "\f0ae";
@filter: "\f0b0";
@briefcase: "\f0b1";
@fullscreen: "\f0b2";
@group: "\f0c0";
@link: "\f0c1";
@cloud: "\f0c2";
@beaker: "\f0c3";
@cut: "\f0c4";
@copy: "\f0c5";
@paper-clip: "\f0c6";
@save: "\f0c7";
@sign-blank: "\f0c8";
@reorder: "\f0c9";
@list-ul: "\f0ca";
@list-ol: "\f0cb";
@strikethrough: "\f0cc";
@underline: "\f0cd";
@table: "\f0ce";
@magic: "\f0d0";
@truck: "\f0d1";
@pinterest: "\f0d2";
@pinterest-sign: "\f0d3";
@google-plus-sign: "\f0d4";
@google-plus: "\f0d5";
@money: "\f0d6";
@caret-down: "\f0d7";
@caret-up: "\f0d8";
@caret-left: "\f0d9";
@caret-right: "\f0da";
@columns: "\f0db";
@sort: "\f0dc";
@sort-down: "\f0dd";
@sort-up: "\f0de";
@envelope: "\f0e0";
@linkedin: "\f0e1";
@undo: "\f0e2";
@legal: "\f0e3";
@dashboard: "\f0e4";
@comment-alt: "\f0e5";
@comments-alt: "\f0e6";
@bolt: "\f0e7";
@sitemap: "\f0e8";
@umbrella: "\f0e9";
@paste: "\f0ea";
@lightbulb: "\f0eb";
@exchange: "\f0ec";
@cloud-download: "\f0ed";
@cloud-upload: "\f0ee";
@user-md: "\f0f0";
@stethoscope: "\f0f1";
@suitcase: "\f0f2";
@bell-alt: "\f0f3";
@coffee: "\f0f4";
@food: "\f0f5";
@file-text-alt: "\f0f6";
@building: "\f0f7";
@hospital: "\f0f8";
@ambulance: "\f0f9";
@medkit: "\f0fa";
@fighter-jet: "\f0fb";
@beer: "\f0fc";
@h-sign: "\f0fd";
@plus-sign-alt: "\f0fe";
@double-angle-left: "\f100";
@double-angle-right: "\f101";
@double-angle-up: "\f102";
@double-angle-down: "\f103";
@angle-left: "\f104";
@angle-right: "\f105";
@angle-up: "\f106";
@angle-down: "\f107";
@desktop: "\f108";
@laptop: "\f109";
@tablet: "\f10a";
@mobile-phone: "\f10b";
@circle-blank: "\f10c";
@quote-left: "\f10d";
@quote-right: "\f10e";
@spinner: "\f110";
@circle: "\f111";
@reply: "\f112";
@github-alt: "\f113";
@folder-close-alt: "\f114";
@folder-open-alt: "\f115";
@expand-alt: "\f116";
@collapse-alt: "\f117";
@smile: "\f118";
@frown: "\f119";
@meh: "\f11a";
@gamepad: "\f11b";
@keyboard: "\f11c";
@flag-alt: "\f11d";
@flag-checkered: "\f11e";
@terminal: "\f120";
@code: "\f121";
@reply-all: "\f122";
@mail-reply-all: "\f122";
@star-half-empty: "\f123";
@location-arrow: "\f124";
@crop: "\f125";
@code-fork: "\f126";
@unlink: "\f127";
@question: "\f128";
@info: "\f129";
@exclamation: "\f12a";
@superscript: "\f12b";
@subscript: "\f12c";
@eraser: "\f12d";
@puzzle-piece: "\f12e";
@microphone: "\f130";
@microphone-off: "\f131";
@shield: "\f132";
@calendar-empty: "\f133";
@fire-extinguisher: "\f134";
@rocket: "\f135";
@maxcdn: "\f136";
@chevron-sign-left: "\f137";
@chevron-sign-right: "\f138";
@chevron-sign-up: "\f139";
@chevron-sign-down: "\f13a";
@html5: "\f13b";
@css3: "\f13c";
@anchor: "\f13d";
@unlock-alt: "\f13e";
@bullseye: "\f140";
@ellipsis-horizontal: "\f141";
@ellipsis-vertical: "\f142";
@rss-sign: "\f143";
@play-sign: "\f144";
@ticket: "\f145";
@minus-sign-alt: "\f146";
@check-minus: "\f147";
@level-up: "\f148";
@level-down: "\f149";
@check-sign: "\f14a";
@edit-sign: "\f14b";
@external-link-sign: "\f14c";
@share-sign: "\f14d";
@compass: "\f14e";
@collapse: "\f150";
@collapse-top: "\f151";
@expand: "\f152";
@eur: "\f153";
@gbp: "\f154";
@usd: "\f155";
@inr: "\f156";
@jpy: "\f157";
@cny: "\f158";
@krw: "\f159";
@btc: "\f15a";
@file: "\f15b";
@file-text: "\f15c";
@sort-by-alphabet: "\f15d";
@sort-by-alphabet-alt: "\f15e";
@sort-by-attributes: "\f160";
@sort-by-attributes-alt: "\f161";
@sort-by-order: "\f162";
@sort-by-order-alt: "\f163";
@thumbs-up: "\f164";
@thumbs-down: "\f165";
@youtube-sign: "\f166";
@youtube: "\f167";
@xing: "\f168";
@xing-sign: "\f169";
@youtube-play: "\f16a";
@dropbox: "\f16b";
@stackexchange: "\f16c";
@instagram: "\f16d";
@flickr: "\f16e";
@adn: "\f170";
@bitbucket: "\f171";
@bitbucket-sign: "\f172";
@tumblr: "\f173";
@tumblr-sign: "\f174";
@long-arrow-down: "\f175";
@long-arrow-up: "\f176";
@long-arrow-left: "\f177";
@long-arrow-right: "\f178";
@apple: "\f179";
@windows: "\f17a";
@android: "\f17b";
@linux: "\f17c";
@dribble: "\f17d";
@skype: "\f17e";
@foursquare: "\f180";
@trello: "\f181";
@female: "\f182";
@male: "\f183";
@gittip: "\f184";
@sun: "\f185";
@moon: "\f186";
@archive: "\f187";
@bug: "\f188";
@vk: "\f189";
@weibo: "\f18a";
@renren: "\f18b";

90
src/less/main.less Normal file
View File

@ -0,0 +1,90 @@
body {
background-color: hsl(207, 39%, 22%);
font-family: @copy;
font-weight: @light;
color: hsl(0, 0%, 100%);
font-size: 16px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @copy;
}
header {
height: 100px;
}
.buttons {
font-size: 100px;
}
.banner {
background-color: hsl(0, 0%, 90%);
background-image: url("img/large-bg2.jpg");
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
height: 250px;
h1 {
color: hsl(0, 0%, 100%);
font-weight: @normal;
}
a {
display: block;
text-decoration: none;
}
.tweet {
//font-size: 25px;
//float: left;
.icon-circle {
color: hsl(200, 100%, 60%);
}
.icon-twitter {
color: hsl(0, 0%, 100%);
}
&:hover {
.icon-circle {
color: hsl(200, 100%, 40%);
}
}
}
.icon-stack {
display: inline-block;
}
.tweeter {
display: inline-block;
font-weight: @bold;
color: hsl(0, 0%, 100%);
}
.github {
font-size: 25px;
float: left;
.icon-circle {
color: hsl(200, 0%, 60%);
}
.icon-github-alt {
color: hsl(0, 0%, 100%);
}
}
}
.module {
.icon {
text-align: center;
padding: 50px 20px;
color: hsl(0, 0%, 90%);
font-size: 100px;
}
.title {
text-align: center;
font-size: 20px;
font-weight: @semibold;
}
}

93
src/less/mixins.less Normal file
View File

@ -0,0 +1,93 @@
.gray(@percent) {
color: hsl(0,0%,(@percent));
}
.ul-inline-no-style() {
margin: 0px;
list-style: none;
.clearfix;
li {
float: left;
display: block;
}
}
.ul-block-no-style() {
margin: 0px;
list-style: none;
.clearfix;
}
// 1 pixel black and white text shadows
.textShadowBlack(@shadow) {
text-shadow: 0 1px 1px hsla(0,0%,0%,@shadow);
}
.textShadowWhite(@shadow: 0 1px 0px hsla(0,0%,100%,0.8)) {
text-shadow: @shadow;
}
// easy background image mixin
.bgi(@src, @xpos: 0, @ypos: 0, @repeat: no-repeat) {
background-image: url(@src);
background-position: @xpos @ypos;
background-attachment: scroll;
background-repeat: @repeat;
}
// Background-cover mixin yay
.background-cover(@cover: cover) {
-webkit-background-size: @cover;
-moz-background-size: @cover;
-o-background-size: @cover;
background-size: @cover;
}
// CSS3 modern box sizing - padding is included in sum
.box-sizing(@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
// the retina mixin. Goes .at2x(img/header.png, 650px, 150px).
// Put the effective size, it goes width then height
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat; @attachment: scroll;) {
background-image: url(@path);
background-position: @xpos @ypos;
background-repeat: @repeat;
background-attachment: @attachment;
@at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
@media @highdpi {
background-image: url(@at2x_path);
background-size: @w @h;
background-position: @xpos @ypos;
background-repeat: @repeat;
background-attachment: @attachment;
}
}
// the highlight color for the page
.highlight(@backgroundColor, @textColor) {
::selection, -moz::selection {
background: @backgroundColor;
color: @textColor;
}
}
.highlight(hsl(207, 100%, 52%), @white);
.noselect() {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

8
src/less/styles.less Normal file
View File

@ -0,0 +1,8 @@
@import "bootstrap/bootstrap.less";
@import "weather-icons/weather.less";
@import "variables.less";
@import "mixins.less";
@import "main.less";

19
src/less/variables.less Normal file
View File

@ -0,0 +1,19 @@
// Font Stuff
@copy: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
@hairline: "aktiv-grotesk-std";
@white: #fff;
@black: #000;
@red: hsl(0, 100%, 50%);
@ultraLight: 200;
@light: 300;
@normal: 400;
@semibold: 500;
@bold: 700;
@extraBold: 800;
@blackBold: 900;

138
src/less/weather-icons/icon-classes.less Normal file
View File

@ -0,0 +1,138 @@
@font-face {
font-family: 'weather';
src: url('../font/artill_clean_icons-webfont.eot');
src: url('../font/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/artill_clean_icons-webfont.woff') format('woff'),
url('../font/artill_clean_icons-webfont.ttf') format('truetype'),
url('../font/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="weather-icon-"],
[class*=" weather-icon-"] {
font-family: weather;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
text-transform: none;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^="weather-icon-"]:before,
[class*=" weather-icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
// Daytime
.weather-day-cloudy-strong-winds:before { content: @day-cloudy-strong-winds ; } // day cloudy strong winds
.weather-day-cloudy-windy:before { content: @day-cloudy-windy ; } // day cloudy windy
.weather-day-cloudy:before { content: @day-cloudy ; } // day cloudy
.weather-day-hail:before { content: @day-hail ; } // day hail
.weather-day-lightning:before { content: @day-lightning ; } // day lightning
.weather-day-rain-mix:before { content: @day-rain-mix ; } // day rain mix
.weather-day-rain-wind:before { content: @day-rain-wind ; } // day rain wind
.weather-day-rain:before { content: @day-rain ; } // day rain
.weather-day-showers:before { content: @day-showers ; } // day showers
.weather-day-snow:before { content: @day-snow ; } // day snow
.weather-day-sprinkle:before { content: @day-sprinkle ; } // day sprinkle
.weather-day-sunny-overcast:before { content: @day-sunny-overcast ; } // day sunny overcast
.weather-day-sunny:before { content: @day-sunny ; } // day sunny
.weather-day-thunderstorm-showers:before { content: @day-thunderstorm-showers ; } // day thunderstorm showers
.weather-day-thunderstorm:before { content: @day-thunderstorm ; } // day thunderstorm
// Neutral-time
.weather-neutral-cloudy-strong-winds:before { content: @neutral-cloudy-strong-winds ; } // neutral cloudy strong winds
.weather-neutral-cloudy-windy:before { content: @neutral-cloudy-windy ; } // neutral cloudy windy
.weather-neutral-cloudy:before { content: @neutral-cloudy ; } // neutral cloudy
.weather-neutral-fog:before { content: @neutral-fog ; } // neutral fog
.weather-neutral-hail:before { content: @neutral-hail ; } // neutral hail
.weather-neutral-lightning:before { content: @neutral-lightning ; } // neutral lightning
.weather-neutral-rain-mix:before { content: @neutral-rain-mix ; } // neutral rain mix
.weather-neutral-rain-wind:before { content: @neutral-rain-wind ; } // neutral rain wind
.weather-neutral-rain:before { content: @neutral-rain ; } // neutral rain
.weather-neutral-showers:before { content: @neutral-showers ; } // neutral showers
.weather-neutral-snow:before { content: @neutral-snow ; } // neutral snow
.weather-neutral-sprinkle:before { content: @neutral-sprinkle ; } // neutral sprinkle
.weather-neutral-thunderstorm-showers:before { content: @neutral-thunderstorm-showers ; } // neutral thunderstorm showers
.weather-neutral-thunderstorm:before { content: @neutral-thunderstorm ; } // neutral thunderstorm
// Nighttime
.weather-night-alt-cloudy-strong-winds:before { content: @night-alt-cloudy-strong-winds ; } // night alt cloudy strong winds
.weather-night-alt-cloudy-windy:before { content: @night-alt-cloudy-windy ; } // night alt cloudy windy
.weather-night-alt-fog:before { content: @night-alt-fog ; } // night alt fog
.weather-night-alt-hail:before { content: @night-alt-hail ; } // night alt hail
.weather-night-alt-lightning:before { content: @night-alt-lightning ; } // night alt lightning
.weather-night-alt-rain-mix:before { content: @night-alt-rain-mix ; } // night alt rain mix
.weather-night-alt-rain-wind:before { content: @night-alt-rain-wind ; } // night alt rain wind
.weather-night-alt-rain:before { content: @night-alt-rain ; } // night alt rain
.weather-night-alt-showers:before { content: @night-alt-showers ; } // night alt showers
.weather-night-alt-snow:before { content: @night-alt-snow ; } // night alt snow
.weather-night-alt-sprinkle:before { content: @night-alt-sprinkle ; } // night alt sprinkle
.weather-night-alt-thunderstorm-showers:before { content: @night-alt-thunderstorm-showers ; } // night alt thunderstorm showers
.weather-night-alt-thunderstorm:before { content: @night-alt-thunderstorm ; } // night alt thunderstorm
.weather-night-clear:before { content: @night-clear ; } // night clear
.weather-night-cloudy-strong-winds:before { content: @night-cloudy-strong-winds ; } // night cloudy strong winds
.weather-night-cloudy-windy:before { content: @night-cloudy-windy ; } // night cloudy windy
.weather-night-cloudy:before { content: @night-cloudy ; } // night cloudy
.weather-night-hail:before { content: @night-hail ; } // night hail
.weather-night-lightning:before { content: @night-lightning ; } // night lightning
.weather-night-rain-mix:before { content: @night-rain-mix ; } // night rain mix
.weather-night-rain-wind:before { content: @night-rain-wind ; } // night rain wind
.weather-night-rain:before { content: @night-rain ; } // night rain
.weather-night-showers:before { content: @night-showers ; } // night showers
.weather-night-snow:before { content: @night-snow ; } // night snow
.weather-night-sprinkle:before { content: @night-sprinkle ; } // night sprinkle
.weather-night-thunderstorm-showers:before { content: @night-thunderstorm-showers ; } // night thunderstorm showers
.weather-night-thunderstorm:before { content: @night-thunderstorm ; } // night thunderstorm
// Misc
.weather-celcius:before { content: @weather-celcius ; } // celsius
.weather-cloud-down:before { content: @weather-cloud-down ; } // cloud down
.weather-cloud-refresh:before { content: @weather-cloud-refresh ; } // cloud refresh
.weather-cloud-up:before { content: @weather-cloud-up ; } // cloud up
.weather-cloud:before { content: @weather-cloud ; } // cloud
.weather-degrees:before { content: @weather-degrees ; } // degrees
.weather-down-left:before { content: @weather-down-left ; } // down left
.weather-down:before { content: @weather-down ; } // down
.weather-fahrenheit:before { content: @weather-fahrenheit ; } // fahrenheit
.weather-horizon-alt:before { content: @weather-horizon-alt ; } // horizon alt
.weather-horizon:before { content: @weather-horizon ; } // horizon
.weather-left:before { content: @weather-left ; } // left
.weather-lightning:before { content: @weather-lightning ; } // lightning
.weather-night-fog:before { content: @weather-night-fog ; } // night fog
.weather-refresh-alt:before { content: @weather-refresh-alt ; } // refresh alt
.weather-refresh:before { content: @weather-refresh ; } // refresh
.weather-right:before { content: @weather-right ; } // right
.weather-sprinkles:before { content: @weather-sprinkles ; } // sprinkles
.weather-strong-wind:before { content: @weather-strong-wind ; } // strong wind
.weather-sunrise:before { content: @weather-sunrise ; } // sunrise
.weather-sunset:before { content: @weather-sunset ; } // sunset
.weather-thermometer-exterior:before { content: @weather-thermometer-exterior ; } // thermometer exterior
.weather-thermometer-internal:before { content: @weather-thermometer-internal ; } // thermometer internal
.weather-thermometer:before { content: @weather-thermometer ; } // thermometer
.weather-tornado:before { content: @weather-tornado ; } // tornado
.weather-up-right:before { content: @weather-up-right ; } // up right
.weather-up:before { content: @weather-up ; } // up
.weather-wind-east:before { content: @weather-wind-east ; } // wind east
.weather-wind-north-east:before { content: @weather-wind-north-east ; } // wind north east
.weather-wind-north-west:before { content: @weather-wind-north-west ; } // wind north west
.weather-wind-north:before { content: @weather-wind-north ; } // wind north
.weather-wind-south-east:before { content: @weather-wind-south-east ; } // wind south east
.weather-wind-south-west:before { content: @weather-wind-south-west ; } // wind south west
.weather-wind-south:before { content: @weather-wind-south ; } // wind south
.weather-wind-west:before { content: @weather-wind-west ; } // wind west
.weather-windy:before { content: @weather-windy ; } // windy

106
src/less/weather-icons/variables.less Normal file
View File

@ -0,0 +1,106 @@
// Variables
@FontAwesomePath: "../font";
@WeatherIconVersion: "3.2.1";
// Day
@day-cloudy-strong-winds: "\0044"; // day cloudy strong winds
@day-cloudy-windy: "\0042"; // day cloudy windy
@day-cloudy: "\0041"; // day cloudy
@day-hail: "\0054"; // day hail
@day-lightning: "\0058"; // day lightning
@day-rain-mix: "\0056"; // day rain mix
@day-rain-wind: "\004E"; // day rain wind
@day-rain: "\004A"; // day rain
@day-showers: "\004C"; // day showers
@day-snow: "\0048"; // day snow
@day-sprinkle: "\0046"; // day sprinkle
@day-sunny-overcast: "\0032"; // day sunny overcast
@day-sunny: "\0031"; // day sunny
@day-thunderstorm-showers: "\0052"; // day thunderstorm showers
@day-thunderstorm: "\0050"; // day thunderstorm
// Neutral
@neutral-cloudy-strong-winds: "\0045"; // neutral cloudy strong winds
@neutral-cloudy-windy: "\0043"; // neutral cloudy windy
@neutral-cloudy: "\0033"; // neutral cloudy
@neutral-fog: "\005A"; // neutral fog
@neutral-hail: "\0055"; // neutral hail
@neutral-lightning: "\0059"; // neutral lightning
@neutral-rain-mix: "\0057"; // neutral rain mix
@neutral-rain-wind: "\004F"; // neutral rain wind
@neutral-rain: "\004B"; // neutral rain
@neutral-showers: "\004D"; // neutral showers
@neutral-snow: "\0049"; // neutral snow
@neutral-sprinkle: "\0047"; // neutral sprinkle
@neutral-thunderstorm-showers: "\0053"; // neutral thunderstorm showers
@neutral-thunderstorm: "\0051"; // neutral thunderstorm
// Night
@night-alt-cloudy-strong-winds: "\0065"; // night alt cloudy strong winds
@night-alt-cloudy-windy: "\0063"; // night alt cloudy windy
@night-alt-fog: "\007A"; // night alt fog
@night-alt-hail: "\0075"; // night alt hail
@night-alt-lightning: "\0079"; // night alt lightning
@night-alt-rain-mix: "\0077"; // night alt rain mix
@night-alt-rain-wind: "\006F"; // night alt rain wind
@night-alt-rain: "\006B"; // night alt rain
@night-alt-showers: "\006D"; // night alt showers
@night-alt-snow: "\0069"; // night alt snow
@night-alt-sprinkle: "\0067"; // night alt sprinkle
@night-alt-thunderstorm-showers: "\0073"; // night alt thunderstorm showers
@night-alt-thunderstorm: "\0071"; // night alt thunderstorm
@night-clear: "\0036"; // night clear
@night-cloudy-strong-winds: "\0064"; // night cloudy strong winds
@night-cloudy-windy: "\0062"; // night cloudy windy
@night-cloudy: "\0061"; // night cloudy
@night-hail: "\0074"; // night hail
@night-lightning: "\0078"; // night lightning
@night-rain-mix: "\0076"; // night rain mix
@night-rain-wind: "\006E"; // night rain wind
@night-rain: "\006A"; // night rain
@night-showers: "\006C"; // night showers
@night-snow: "\0068"; // night snow
@night-sprinkle: "\0066"; // night sprinkle
@night-thunderstorm-showers: "\0072"; // night thunderstorm showers
@night-thunderstorm: "\0070"; // night thunderstorm
// Misc
@weather-celcius: "\203A"; // celsius
@weather-cloud-down: "\2022"; // cloud down
@weather-cloud-refresh: "\002A"; // cloud refresh
@weather-cloud-up: "\005C"; // cloud up
@weather-cloud: "\002F"; // cloud
@weather-degrees: "\00A1"; // degrees
@weather-down-left: "\2013"; // down left
@weather-down: "\005D"; // down
@weather-fahrenheit: "\2039"; // fahrenheit
@weather-horizon-alt: "\0039"; // horizon alt
@weather-horizon: "\0030"; // horizon
@weather-left: "\0028"; // left
@weather-lightning: "\0034"; // lightning
@weather-night-fog: "\0021"; // night fog
@weather-refresh-alt: "\007D"; // refresh alt
@weather-refresh: "\007B"; // refresh
@weather-right: "\0029"; // right
@weather-sprinkles: "\0035"; // sprinkles
@weather-strong-wind: "\002C"; // strong wind
@weather-sunrise: "\0037"; // sunrise
@weather-sunset: "\0038"; // sunset
@weather-thermometer-exterior: "\201C"; // thermometer exterior
@weather-thermometer-internal: "\201D"; // thermometer internal
@weather-thermometer: "\2018"; // thermometer
@weather-tornado: "\003A"; // tornado
@weather-up-right: "\2014"; // up right
@weather-up: "\005B"; // up
@weather-wind-east: "\0087"; // wind east
@weather-wind-north-east: "\002E"; // wind north east
@weather-wind-north-west: "\003B"; // wind north west
@weather-wind-north: "\0023"; // wind north
@weather-wind-south-east: "\003F"; // wind south east
@weather-wind-south-west: "\0022"; // wind south west
@weather-wind-south: "\00Bf"; // wind south
@weather-wind-west: "\0027"; // wind west
@weather-windy: "\2026"; // windy

130
src/less/weather-icons/weather.less Normal file
View File

@ -0,0 +1,130 @@
@import "variables.less";
@import "icon-classes.less";
.weatherseparator {
padding-bottom: 10px;
border-bottom: 1px solid hsla(0, 0%, 100%, .2);
margin-bottom: 50px;
.clearfix;
}
.row-fluid {
.clearfix;
}
.examples {
font-family: 'weather';
font-size: 50px;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.weather {
//width: 400px;
margin: 0px auto;
//border: 1px solid hsl(207, 39%, 15%);
font-family: @hairline;
.relative {
position: relative;
}
.currently {
float: left;
font-size: 30px;
font-weight: 100;
margin-top: 5px;
.opacity(.8);
}
.mainTemp {
float: left;
.clearfix;
.temp {
font-size: 70px;
line-height: 1em;
font-weight: @ultraLight;
float: left;
margin-right: 5px;
}
.highLow {
float: left;
font-size: 22px;
line-height: 1em;
margin-top: 5px;
font-weight: @ultraLight;
text-align: center;
.opacity(.5);
.clearfix;
.high {
margin-top: 10px;
margin-bottom: 5px;
}
.low {}
}
}
.mainIcon {
font-size: 110px;
.opacity(.5);
line-height: .3em;
float: right;
}
.icon {
position: absolute;
top: 0px;
left: 100px;
color: hsl(0, 0%, 100%);
.opacity(.3);
z-index: 9;
font-size: 130px;
line-height: 1em;
margin-top: -20px;
text-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.4);
text-align: right;
}
.tomorrow {
font-size: 18px;
font-weight: @light;
line-height: 1em;
margin-top: 20px;
.clearfix;
.day {
float: left;
.name {
.opacity(.5);
display: inline-block;
margin-right: 10px;
}
.condition {
display: inline-block;
}
}
.temps {
float: right;
.clearfix;
.tomorrow-icon {
font-size: 40px;
margin-right: 5px;
.opacity(.5);
}
.high {
display: inline-block;
margin-right: 10px;
}
.low {
display: inline-block;
margin-right: 0px;
.opacity(.5);
}
}
}
}
.clearthis {
.clearfix;
}