First non-working commit
parent
ba8b729cb4
commit
34346078c7
@ -0,0 +1,3 @@
|
||||
weather icons project.sublime-project
|
||||
weather icons project.sublime-workspace
|
||||
public/*
|
@ -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 + "°</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 »</a>"
|
@ -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
|
||||
|
||||
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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";
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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%;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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"; }
|
@ -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;
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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));
|
||||
}
|
||||
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -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);
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
}
|
@ -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; }
|
||||
}
|
@ -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
|
||||
}
|
@ -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%);
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
||||
}
|
@ -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;
|
@ -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;
|
||||
}
|
@ -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; }
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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; }
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load Diff
@ -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";
|
@ -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; }
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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";
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -0,0 +1,8 @@
|
||||
@import "bootstrap/bootstrap.less";
|
||||
|
||||
@import "weather-icons/weather.less";
|
||||
|
||||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
@import "main.less";
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -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
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue