adding src links in doc to LESS and SASS

This commit is contained in:
Dave Gandy 2014-08-22 12:48:33 -04:00
parent 1a30c90aa1
commit cc832a953f
83 changed files with 1771 additions and 1199 deletions

View File

@ -21,6 +21,7 @@ icon_destination: icon # Relative to destination
fontawesome: fontawesome:
version: 4.2.0 version: 4.2.0
minor_version: 4.2 minor_version: 4.2
doc_blob: 4.2.0-wip
url: http://fontawesome.io url: http://fontawesome.io
legacy_url: http://fortawesome.github.com/Font-Awesome/ legacy_url: http://fortawesome.github.com/Font-Awesome/
blog_url: http://blog.fontawesome.io blog_url: http://blog.fontawesome.io
@ -48,8 +49,8 @@ fontawesome:
url: http://creativecommons.org/licenses/by/3.0/ url: http://creativecommons.org/licenses/by/3.0/
bootstrap: bootstrap:
version: 3.1.1 version: 3.2.0
url: http://getbootstrap.com url: http://getbootstrap.com
jquery: jquery:
version: 1.11.0 version: 1.11.1

View File

@ -1,5 +1,11 @@
<section id="basic"> <section id="basic">
<h2 class="page-header">Basic Icons</h2> <h2 class="page-header">
Basic Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/core.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_core.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">

View File

@ -1,5 +1,11 @@
<section id="bordered-pulled"> <section id="bordered-pulled">
<h2 class="page-header">Bordered & Pulled Icons</h2> <h2 class="page-header">
Bordered & Pulled Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/bordered-pulled.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_bordered-pulled.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>

View File

@ -1,5 +1,11 @@
<section id="fixed-width"> <section id="fixed-width">
<h2 class="page-header">Fixed Width Icons</h2> <h2 class="page-header">
Fixed Width Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/fixed-width.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_fixed-width.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<div class="list-group"> <div class="list-group">

View File

@ -1,5 +1,11 @@
<section id="larger"> <section id="larger">
<h2 class="page-header">Larger Icons</h2> <h2 class="page-header">
Larger Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/larger.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_larger.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p> <p><i class="fa fa-camera-retro fa-lg"></i> fa-lg</p>

View File

@ -1,5 +1,11 @@
<section id="list"> <section id="list">
<h2 class="page-header">List Icons</h2> <h2 class="page-header">
List Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/list.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_list.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<ul class="fa-ul"> <ul class="fa-ul">

View File

@ -1,5 +1,11 @@
<section id="rotated-flipped"> <section id="rotated-flipped">
<h2 class="page-header">Rotated &amp; Flipped</h2> <h2 class="page-header">
Rotated &amp; Flipped
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/rotated-flipped.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_rotated-flipped.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p style="font-size: 18px;"> <p style="font-size: 18px;">

View File

@ -1,5 +1,11 @@
<section id="spinning"> <section id="spinning">
<h2 class="page-header">Spinning Icons</h2> <h2 class="page-header">
Spinning Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/spinning.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_spinning.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<p> <p>

View File

@ -1,5 +1,11 @@
<section id="stacked"> <section id="stacked">
<h2 class="page-header">Stacked Icons</h2> <h2 class="page-header">
Stacked Icons
<div class="pull-right text-default margin-top padding-top-sm hidden-xs">
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/less/stacked.less" class="text-muted padding-right">View LESS</a>
<a href="https://github.com/FortAwesome/Font-Awesome/blob/{{ site.fontawesome.doc_blob }}/scss/_stacked.scss" class="text-muted">View SASS</a>
</div>
</h2>
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4"> <div class="col-md-3 col-sm-4">
<div class="margin-bottom"> <div class="margin-bottom">

View File

@ -1,929 +0,0 @@
//
// 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;
// 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
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-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
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
.hide-text();
}
// 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
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support the
// standard `box-shadow` property.
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
// Animations
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// 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; // IE10+
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; // IE10+
-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; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555; @outer-color: #333) {
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
}
}
// Reset filters for IE
//
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}
// Retina images
//
// Short retina mixin for setting background-image and -size
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) {
display: @display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@color: #e5e5e5) {
height: 1px;
margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @color;
}
// Panels
// -------------------------
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
border-color: @border;
& > .panel-heading {
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+ .panel-collapse .panel-body {
border-top-color: @border;
}
}
& > .panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: @border;
}
}
}
// Alerts
// -------------------------
.alert-variant(@background; @border; @text-color) {
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}
// Tables
// -------------------------
.table-row-variant(@state; @background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.@{state},
> th.@{state},
&.@{state} > td,
&.@{state} > th {
background-color: @background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
> td.@{state}:hover,
> th.@{state}:hover,
&.@{state}:hover > td,
&.@{state}:hover > th {
background-color: darken(@background, 5%);
}
}
}
// List Groups
// -------------------------
.list-group-item-variant(@state; @background; @color) {
.list-group-item-@{state} {
color: @color;
background-color: @background;
a& {
color: @color;
.list-group-item-heading { color: inherit; }
&:hover,
&:focus {
color: @color;
background-color: darken(@background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: @color;
border-color: @color;
}
}
}
}
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&:active,
&.active,
.open .dropdown-toggle& {
color: @color;
background-color: darken(@background, 8%);
border-color: darken(@border, 12%);
}
&:active,
&.active,
.open .dropdown-toggle& {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
}
}
.badge {
color: @background;
background-color: @color;
}
}
// Button sizes
// -------------------------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
}
// Pagination
// -------------------------
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
> li {
> a,
> span {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
}
// Labels
// -------------------------
.label-variant(@color) {
background-color: @color;
&[href] {
&:hover,
&:focus {
background-color: darken(@color, 10%);
}
}
}
// Contextual backgrounds
// -------------------------
.bg-variant(@color) {
background-color: @color;
a&:hover {
background-color: darken(@color, 10%);
}
}
// Typography
// -------------------------
.text-emphasis-variant(@color) {
color: @color;
a&:hover {
color: darken(@color, 10%);
}
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
.navbar-vertical-align(@element-height) {
margin-top: ((@navbar-height - @element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2);
}
// Progress bars
// -------------------------
.progress-bar-variant(@color) {
background-color: @color;
.progress-striped & {
#gradient > .striped();
}
}
// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
table& { display: table; }
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.responsive-invisibility() {
display: none !important;
}
// Grid System
// -----------
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
&:extend(.clearfix all);
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
width: percentage((@columns / @grid-columns));
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.make-xs-column-offset(@columns) {
@media (min-width: @screen-xs-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-xs-column-push(@columns) {
@media (min-width: @screen-xs-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-xs-column-pull(@columns) {
@media (min-width: @screen-xs-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
// Optional feedback icon
.form-control-feedback {
color: @text-color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea&,
select[multiple]& {
height: auto;
}
}

View File

@ -1,92 +0,0 @@
//
// Responsive: Utility classes
// --------------------------------------------------
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#browsers
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport {
width: device-width;
}
// Visibility utilities
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
.responsive-invisibility();
}
.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
.visible-lg {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
.hidden-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
.hidden-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
.hidden-lg {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.
.visible-print {
.responsive-invisibility();
@media print {
.responsive-visibility();
}
}
.hidden-print {
@media print {
.responsive-invisibility();
}
}

View File

@ -1,7 +1,7 @@
{ {
"always-semicolon": true, "always-semicolon": true,
"block-indent": 2, "block-indent": 2,
"colon-space": true, "colon-space": [0, 1],
"color-case": "lower", "color-case": "lower",
"color-shorthand": true, "color-shorthand": true,
"combinator-space": true, "combinator-space": true,
@ -10,7 +10,7 @@
"leading-zero": false, "leading-zero": false,
"remove-empty-rulesets": true, "remove-empty-rulesets": true,
"rule-indent": 2, "rule-indent": 2,
"stick-brace": true, "stick-brace": " ",
"strip-spaces": true, "strip-spaces": true,
"unitless-zero": true, "unitless-zero": true,
"vendor-prefix-align": true, "vendor-prefix-align": true,

View File

@ -33,11 +33,12 @@
} }
} }
// Dismissable alerts // Dismissible alerts
// //
// Expand the right padding and account for the close button's positioning. // Expand the right padding and account for the close button's positioning.
.alert-dismissable { .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissible {
padding-right: (@alert-padding + 20); padding-right: (@alert-padding + 20);
// Adjust close link position // Adjust close link position

View File

@ -3,7 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Base classes // Base class
.badge { .badge {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;
@ -32,10 +32,9 @@
top: 0; top: 0;
padding: 1px 5px; padding: 1px 5px;
} }
}
// Hover state, but only for links // Hover state, but only for links
a.badge { a& {
&:hover, &:hover,
&:focus { &:focus {
color: @badge-link-hover-color; color: @badge-link-hover-color;
@ -44,12 +43,13 @@ a.badge {
} }
} }
// Account for counters in navs // Account for badges in navs
a.list-group-item.active > .badge, a.list-group-item.active > &,
.nav-pills > .active > a > .badge { .nav-pills > .active > a > & {
color: @badge-active-color; color: @badge-active-color;
background-color: @badge-active-bg; background-color: @badge-active-bg;
} }
.nav-pills > li > a > .badge { .nav-pills > li > a > & {
margin-left: 3px; margin-left: 3px;
} }
}

View File

@ -2,9 +2,10 @@
@import "variables.less"; @import "variables.less";
@import "mixins.less"; @import "mixins.less";
// Reset // Reset and dependencies
@import "normalize.less"; @import "normalize.less";
@import "print.less"; @import "print.less";
@import "glyphicons.less";
// Core CSS // Core CSS
@import "scaffolding.less"; @import "scaffolding.less";
@ -17,7 +18,6 @@
// Components // Components
@import "component-animations.less"; @import "component-animations.less";
@import "glyphicons.less";
@import "dropdowns.less"; @import "dropdowns.less";
@import "button-groups.less"; @import "button-groups.less";
@import "input-groups.less"; @import "input-groups.less";
@ -35,6 +35,7 @@
@import "media.less"; @import "media.less";
@import "list-group.less"; @import "list-group.less";
@import "panels.less"; @import "panels.less";
@import "responsive-embed.less";
@import "wells.less"; @import "wells.less";
@import "close.less"; @import "close.less";

View File

@ -20,7 +20,7 @@
} }
&:focus { &:focus {
// Remove focus outline when dropdown JS adds it after closing the menu // Remove focus outline when dropdown JS adds it after closing the menu
outline: none; outline: 0;
} }
} }
} }
@ -216,11 +216,25 @@
> .btn-group .btn { > .btn-group .btn {
width: 100%; width: 100%;
} }
> .btn-group .dropdown-menu {
left: auto;
}
} }
// Checkbox and radio options // Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot
// use `display: none;` or `visibility: hidden;` as that also hides the popover.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 for more.
[data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] { [data-toggle="buttons"] > .btn > input[type="checkbox"] {
display: none; position: absolute;
z-index: -1;
.opacity(0);
} }

View File

@ -140,8 +140,6 @@
.btn-block { .btn-block {
display: block; display: block;
width: 100%; width: 100%;
padding-left: 0;
padding-right: 0;
} }
// Vertically space out multiple block buttons // Vertically space out multiple block buttons

View File

@ -28,7 +28,9 @@
> .active, > .active,
> .next, > .next,
> .prev { display: block; } > .prev {
display: block;
}
> .active { > .active {
left: 0; left: 0;
@ -91,7 +93,7 @@
// Hover/focus state // Hover/focus state
&:hover, &:hover,
&:focus { &:focus {
outline: none; outline: 0;
color: @carousel-control-color; color: @carousel-control-color;
text-decoration: none; text-decoration: none;
.opacity(.9); .opacity(.9);
@ -110,20 +112,22 @@
.icon-prev, .icon-prev,
.glyphicon-chevron-left { .glyphicon-chevron-left {
left: 50%; left: 50%;
margin-left: -10px;
} }
.icon-next, .icon-next,
.glyphicon-chevron-right { .glyphicon-chevron-right {
right: 50%; right: 50%;
margin-right: -10px;
} }
.icon-prev, .icon-prev,
.icon-next { .icon-next {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: -10px; margin-top: -10px;
margin-left: -10px;
font-family: serif; font-family: serif;
} }
.icon-prev { .icon-prev {
&:before { &:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
@ -213,9 +217,16 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: -15px; margin-top: -15px;
margin-left: -15px;
font-size: 30px; font-size: 30px;
} }
.glyphicon-chevron-left,
.icon-prev {
margin-left: -15px;
}
.glyphicon-chevron-right,
.icon-next {
margin-right: -15px;
}
} }
// Show and left align the captions // Show and left align the captions

View File

@ -17,7 +17,6 @@ code {
font-size: 90%; font-size: 90%;
color: @code-color; color: @code-color;
background-color: @code-bg; background-color: @code-bg;
white-space: nowrap;
border-radius: @border-radius-base; border-radius: @border-radius-base;
} }
@ -29,6 +28,12 @@ kbd {
background-color: @kbd-bg; background-color: @kbd-bg;
border-radius: @border-radius-small; border-radius: @border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
kbd {
padding: 0;
font-size: 100%;
box-shadow: none;
}
} }
// Blocks of code // Blocks of code

View File

@ -5,7 +5,7 @@
// Heads up! // Heads up!
// //
// We don't use the `.opacity()` mixin here since it causes a bug with text // We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
.fade { .fade {
opacity: 0; opacity: 0;
@ -17,10 +17,12 @@
.collapse { .collapse {
display: none; display: none;
&.in {
display: block; &.in { display: block; }
} tr&.in { display: table-row; }
tbody&.in { display: table-row-group; }
} }
.collapsing { .collapsing {
position: relative; position: relative;
height: 0; height: 0;

View File

@ -38,6 +38,7 @@
margin: 2px 0 0; // override default ul margin: 2px 0 0; // override default ul
list-style: none; list-style: none;
font-size: @font-size-base; font-size: @font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: @dropdown-bg; background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border; border: 1px solid @dropdown-border;
@ -154,6 +155,7 @@
font-size: @font-size-small; font-size: @font-size-small;
line-height: @line-height-base; line-height: @line-height-base;
color: @dropdown-header-color; color: @dropdown-header-color;
white-space: nowrap; // as with > li > a
} }
// Backdrop to catch body clicks on mobile, etc. // Backdrop to catch body clicks on mobile, etc.

View File

@ -11,7 +11,7 @@ fieldset {
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
// Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets, // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
// so we reset that to ensure it behaves more like a standard block element. // so we reset that to ensure it behaves more like a standard block element.
// See https://github.com/twbs/bootstrap/issues/12359. // See https://github.com/twbs/bootstrap/issues/12359.
min-width: 0; min-width: 0;
@ -31,6 +31,7 @@ legend {
label { label {
display: inline-block; display: inline-block;
max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
} }
@ -51,7 +52,7 @@ input[type="search"] {
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
margin: 4px 0 0; margin: 4px 0 0;
margin-top: 1px \9; /* IE8-9 */ margin-top: 1px \9; // IE8-9
line-height: normal; line-height: normal;
} }
@ -164,13 +165,28 @@ input[type="search"] {
} }
// Special styles for iOS date input // Special styles for iOS temporal inputs
// //
// In Mobile Safari, date inputs require a pixel line-height that matches the // In Mobile Safari, setting `display: block` on temporal inputs causes the
// given height of the input. // text within the input to become vertically misaligned.
// As a workaround, we set a pixel line-height that matches the
// given height of the input. Since this fucks up everything else, we have to
// appropriately reset it for Internet Explorer and the size variations.
input[type="date"] { input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
line-height: @input-height-base; line-height: @input-height-base;
// IE8+ misaligns the text within date inputs, so we reset
line-height: @line-height-base ~"\0";
&.input-sm {
line-height: @input-height-small;
}
&.input-lg {
line-height: @input-height-large;
}
} }
@ -190,13 +206,15 @@ input[type="date"] {
.radio, .radio,
.checkbox { .checkbox {
position: relative;
display: block; display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 20px;
label { label {
display: inline; padding-left: 20px;
margin-bottom: 0;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
} }
@ -205,9 +223,11 @@ input[type="date"] {
.radio-inline input[type="radio"], .radio-inline input[type="radio"],
.checkbox input[type="checkbox"], .checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] { .checkbox-inline input[type="checkbox"] {
float: left; position: absolute;
margin-left: -20px; margin-left: -20px;
margin-top: 4px \9;
} }
.radio + .radio, .radio + .radio,
.checkbox + .checkbox { .checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
@ -230,19 +250,55 @@ input[type="date"] {
} }
// Apply same disabled cursor tweak as for inputs // Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
// //
// Note: Neither radios nor checkboxes can be readonly. // Note: Neither radios nor checkboxes can be readonly.
input[type="radio"], input[type="radio"],
input[type="checkbox"], input[type="checkbox"] {
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
&[disabled], &[disabled],
&.disabled,
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: not-allowed;
} }
} }
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: not-allowed;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: not-allowed;
}
}
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
// Size it appropriately next to real form controls
padding-top: (@padding-base-vertical + 1);
padding-bottom: (@padding-base-vertical + 1);
// Remove default margin from `p`
margin-bottom: 0;
&.input-lg,
&.input-sm {
padding-left: 0;
padding-right: 0;
}
}
// Form control sizing // Form control sizing
@ -271,18 +327,28 @@ input[type="checkbox"],
.form-control { .form-control {
padding-right: (@input-height-base * 1.25); padding-right: (@input-height-base * 1.25);
} }
}
// Feedback icon (requires .glyphicon classes) // Feedback icon (requires .glyphicon classes)
.form-control-feedback { .form-control-feedback {
position: absolute; position: absolute;
top: (@line-height-computed + 5); // Height of the `label` and its margin top: (@line-height-computed + 5); // Height of the `label` and its margin
right: 0; right: 0;
z-index: 2; // Ensure icon is above input groups
display: block; display: block;
width: @input-height-base; width: @input-height-base;
height: @input-height-base; height: @input-height-base;
line-height: @input-height-base; line-height: @input-height-base;
text-align: center; text-align: center;
} }
.input-lg + .form-control-feedback {
width: @input-height-large;
height: @input-height-large;
line-height: @input-height-large;
}
.input-sm + .form-control-feedback {
width: @input-height-small;
height: @input-height-small;
line-height: @input-height-small;
} }
// Feedback states // Feedback states
@ -297,13 +363,9 @@ input[type="checkbox"],
} }
// Static form control text // Reposition feedback icon if label is hidden with "screenreader only" state
// .has-feedback label.sr-only ~ .form-control-feedback {
// Apply class to a `p` element to make any string of text align with labels in top: 0;
// a horizontal form layout.
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
} }
@ -349,6 +411,18 @@ input[type="checkbox"],
width: auto; // Prevent labels from stacking above inputs in `.form-group` width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle; vertical-align: middle;
} }
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto;
}
}
// Input groups need that 100% width though // Input groups need that 100% width though
.input-group > .form-control { .input-group > .form-control {
width: 100%; width: 100%;
@ -367,12 +441,15 @@ input[type="checkbox"],
display: inline-block; display: inline-block;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0;
vertical-align: middle; vertical-align: middle;
label {
padding-left: 0;
}
} }
.radio input[type="radio"], .radio input[type="radio"],
.checkbox input[type="checkbox"] { .checkbox input[type="checkbox"] {
float: none; position: relative;
margin-left: 0; margin-left: 0;
} }
@ -394,8 +471,9 @@ input[type="checkbox"],
.form-horizontal { .form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes // Consistent vertical alignment of radios and checkboxes
.control-label, //
// Labels also get some reset styles, but that is scoped to a media query below.
.radio, .radio,
.checkbox, .checkbox,
.radio-inline, .radio-inline,
@ -416,14 +494,13 @@ input[type="checkbox"],
.make-row(); .make-row();
} }
.form-control-static { // Reset spacing and right align labels, but scope to media queries so that
padding-top: (@padding-base-vertical + 1); // labels on narrow viewports stack the same as a default form example.
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
.control-label { .control-label {
text-align: right; text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
} }
} }
@ -435,4 +512,29 @@ input[type="checkbox"],
top: 0; top: 0;
right: (@grid-gutter-width / 2); right: (@grid-gutter-width / 2);
} }
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: ((@padding-large-vertical * @line-height-large) + 1);
}
}
.form-control {
&:extend(.input-lg);
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@padding-small-vertical + 1);
}
}
.form-control {
&:extend(.input-sm);
}
}
} }

View File

@ -10,11 +10,11 @@
// Import the fonts // Import the fonts
@font-face { @font-face {
font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
src: ~"url('@{icon-font-path}@{icon-font-name}.eot')"; src: url('@{icon-font-path}@{icon-font-name}.eot');
src: ~"url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype')", src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
~"url('@{icon-font-path}@{icon-font-name}.woff') format('woff')", url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
~"url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype')", url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
~"url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg')"; url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
} }
// Catchall baseclass // Catchall baseclass

View File

@ -39,10 +39,14 @@
.input-group-lg > .form-control, .input-group-lg > .form-control,
.input-group-lg > .input-group-addon, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn { .input-lg(); } .input-group-lg > .input-group-btn > .btn {
.input-lg();
}
.input-group-sm > .form-control, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon, .input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-sm(); } .input-group-sm > .input-group-btn > .btn {
.input-sm();
}
// Display as table-cell // Display as table-cell

View File

@ -19,6 +19,10 @@
font-weight: 200; font-weight: 200;
} }
> hr {
border-top-color: darken(@jumbotron-bg, 10%);
}
.container & { .container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
} }

View File

@ -15,7 +15,7 @@
border-radius: .25em; border-radius: .25em;
// Add hover effects, but only for links // Add hover effects, but only for links
&[href] { a& {
&:hover, &:hover,
&:focus { &:focus {
color: @label-link-hover-color; color: @label-link-hover-color;

View File

@ -62,8 +62,27 @@ a.list-group-item {
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
color: @list-group-link-hover-color;
background-color: @list-group-hover-bg; background-color: @list-group-hover-bg;
} }
}
.list-group-item {
// Disabled state
&.disabled,
&.disabled:hover,
&.disabled:focus {
background-color: @list-group-disabled-bg;
color: @list-group-disabled-color;
// Force color to inherit for custom content
.list-group-item-heading {
color: inherit;
}
.list-group-item-text {
color: @list-group-disabled-text-color;
}
}
// Active class on item itself, not parent // Active class on item itself, not parent
&.active, &.active,
@ -75,7 +94,9 @@ a.list-group-item {
border-color: @list-group-active-border; border-color: @list-group-active-border;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading { .list-group-item-heading,
.list-group-item-heading > small,
.list-group-item-heading > .small {
color: inherit; color: inherit;
} }
.list-group-item-text { .list-group-item-text {

39
src/assets/less/bootstrap-3.2.0/mixins.less vendored Executable file
View File

@ -0,0 +1,39 @@
// Mixins
// --------------------------------------------------
// Utilities
@import "mixins/hide-text.less";
@import "mixins/opacity.less";
@import "mixins/image.less";
@import "mixins/labels.less";
@import "mixins/reset-filter.less";
@import "mixins/resize.less";
@import "mixins/responsive-visibility.less";
@import "mixins/size.less";
@import "mixins/tab-focus.less";
@import "mixins/text-emphasis.less";
@import "mixins/text-overflow.less";
@import "mixins/vendor-prefixes.less";
// Components
@import "mixins/alerts.less";
@import "mixins/buttons.less";
@import "mixins/panels.less";
@import "mixins/pagination.less";
@import "mixins/list-group.less";
@import "mixins/nav-divider.less";
@import "mixins/forms.less";
@import "mixins/progress-bar.less";
@import "mixins/table-row.less";
// Skins
@import "mixins/background-variant.less";
@import "mixins/border-radius.less";
@import "mixins/gradients.less";
// Layout
@import "mixins/clearfix.less";
@import "mixins/center-block.less";
@import "mixins/nav-vertical-align.less";
@import "mixins/grid-framework.less";
@import "mixins/grid.less";

View File

@ -0,0 +1,14 @@
// Alerts
.alert-variant(@background; @border; @text-color) {
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
.alert-link {
color: darken(@text-color, 10%);
}
}

View File

@ -0,0 +1,8 @@
// Contextual backgrounds
.bg-variant(@color) {
background-color: @color;
a&:hover {
background-color: darken(@color, 10%);
}
}

View File

@ -0,0 +1,18 @@
// Single side border-radius
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}

View File

@ -0,0 +1,50 @@
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
&:hover,
&:focus,
&:active,
&.active,
.open > .dropdown-toggle& {
color: @color;
background-color: darken(@background, 10%);
border-color: darken(@border, 12%);
}
&:active,
&.active,
.open > .dropdown-toggle& {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: @background;
border-color: @border;
}
}
.badge {
color: @background;
background-color: @color;
}
}
// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
}

View File

@ -0,0 +1,7 @@
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}

View File

@ -0,0 +1,22 @@
// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}

View File

@ -0,0 +1,81 @@
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
// Optional feedback icon
.form-control-feedback {
color: @text-color;
}
}
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-focus` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea&,
select[multiple]& {
height: auto;
}
}

View File

@ -0,0 +1,59 @@
// Gradients
#gradient {
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555; @outer-color: #333) {
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
}
}

View File

@ -0,0 +1,91 @@
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}

View File

@ -0,0 +1,122 @@
// Grid system
//
// Generate semantic grid columns with these mixins.
// Centered container element
.container-fixed(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
&:extend(.clearfix all);
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
&:extend(.clearfix all);
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
width: percentage((@columns / @grid-columns));
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
.make-xs-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.make-xs-column-push(@columns) {
left: percentage((@columns / @grid-columns));
}
.make-xs-column-pull(@columns) {
right: percentage((@columns / @grid-columns));
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}

View File

@ -0,0 +1,21 @@
// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
.hide-text();
}

View File

@ -0,0 +1,34 @@
// Image Mixins
// - Responsive image
// - Retina image
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) {
display: @display;
width: 100% \9; // Force IE10 and below to size SVG images correctly
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
}
// Retina image
//
// Short retina mixin for setting background-image and -size. Note that the
// spelling of `min--moz-device-pixel-ratio` is intentional.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}

View File

@ -0,0 +1,12 @@
// Labels
.label-variant(@color) {
background-color: @color;
&[href] {
&:hover,
&:focus {
background-color: darken(@color, 10%);
}
}
}

View File

@ -0,0 +1,29 @@
// List Groups
.list-group-item-variant(@state; @background; @color) {
.list-group-item-@{state} {
color: @color;
background-color: @background;
a& {
color: @color;
.list-group-item-heading {
color: inherit;
}
&:hover,
&:focus {
color: @color;
background-color: darken(@background, 5%);
}
&.active,
&.active:hover,
&.active:focus {
color: #fff;
background-color: @color;
border-color: @color;
}
}
}
}

View File

@ -0,0 +1,10 @@
// Horizontal dividers
//
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@color: #e5e5e5) {
height: 1px;
margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @color;
}

View File

@ -0,0 +1,9 @@
// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
.navbar-vertical-align(@element-height) {
margin-top: ((@navbar-height - @element-height) / 2);
margin-bottom: ((@navbar-height - @element-height) / 2);
}

View File

@ -0,0 +1,8 @@
// Opacity
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}

View File

@ -0,0 +1,23 @@
// Pagination
.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
> li {
> a,
> span {
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
}
&:first-child {
> a,
> span {
.border-left-radius(@border-radius);
}
}
&:last-child {
> a,
> span {
.border-right-radius(@border-radius);
}
}
}
}

View File

@ -0,0 +1,24 @@
// Panels
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
border-color: @border;
& > .panel-heading {
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+ .panel-collapse > .panel-body {
border-top-color: @border;
}
.badge {
color: @heading-bg-color;
background-color: @heading-text-color;
}
}
& > .panel-footer {
+ .panel-collapse > .panel-body {
border-bottom-color: @border;
}
}
}

View File

@ -0,0 +1,10 @@
// Progress bars
.progress-bar-variant(@color) {
background-color: @color;
// Deprecated parent class requirement as of v3.2.0
.progress-striped & {
#gradient > .striped();
}
}

View File

@ -0,0 +1,8 @@
// Reset filters for IE
//
// When you need to remove a gradient background, do not forget to use this to reset
// the IE filter for IE9 and below.
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

View File

@ -0,0 +1,6 @@
// Resize anything
.resizable(@direction) {
resize: @direction; // Options: horizontal, vertical, both
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
}

View File

@ -0,0 +1,15 @@
// Responsive utilities
//
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
table& { display: table; }
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
.responsive-invisibility() {
display: none !important;
}

View File

@ -0,0 +1,10 @@
// Sizing shortcuts
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}

View File

@ -0,0 +1,9 @@
// WebKit-style focus
.tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

View File

@ -0,0 +1,28 @@
// Tables
.table-row-variant(@state; @background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.@{state},
> th.@{state},
&.@{state} > td,
&.@{state} > th {
background-color: @background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
> td.@{state}:hover,
> th.@{state}:hover,
&.@{state}:hover > td,
&:hover > .@{state},
&.@{state}:hover > th {
background-color: darken(@background, 5%);
}
}
}

View File

@ -0,0 +1,8 @@
// Typography
.text-emphasis-variant(@color) {
color: @color;
a&:hover {
color: darken(@color, 10%);
}
}

View File

@ -0,0 +1,8 @@
// Text overflow
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

View File

@ -0,0 +1,224 @@
// Vendor Prefixes
//
// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
// Autoprefixer in our Gruntfile. They will be removed in v4.
// - Animations
// - Backface visibility
// - Box shadow
// - Box sizing
// - Content columns
// - Hyphens
// - Placeholder text
// - Transformations
// - Transitions
// - User Select
// Animations
.animation(@animation) {
-webkit-animation: @animation;
-o-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
.animation-fill-mode(@fill-mode) {
-webkit-animation-fill-mode: @fill-mode;
animation-fill-mode: @fill-mode;
}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
backface-visibility: @visibility;
}
// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support it.
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
-webkit-column-count: @column-count;
-moz-column-count: @column-count;
column-count: @column-count;
-webkit-column-gap: @column-gap;
-moz-column-gap: @column-gap;
column-gap: @column-gap;
}
// Optional hyphenation
.hyphens(@mode: auto) {
word-wrap: break-word;
-webkit-hyphens: @mode;
-moz-hyphens: @mode;
-ms-hyphens: @mode; // IE10+
-o-hyphens: @mode;
hyphens: @mode;
}
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; // Firefox
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
// Transformations
.scale(@ratio) {
-webkit-transform: scale(@ratio);
-ms-transform: scale(@ratio); // IE9 only
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.scale(@ratioX; @ratioY) {
-webkit-transform: scale(@ratioX, @ratioY);
-ms-transform: scale(@ratioX, @ratioY); // IE9 only
-o-transform: scale(@ratioX, @ratioY);
transform: scale(@ratioX, @ratioY);
}
.scaleX(@ratio) {
-webkit-transform: scaleX(@ratio);
-ms-transform: scaleX(@ratio); // IE9 only
-o-transform: scaleX(@ratio);
transform: scaleX(@ratio);
}
.scaleY(@ratio) {
-webkit-transform: scaleY(@ratio);
-ms-transform: scaleY(@ratio); // IE9 only
-o-transform: scaleY(@ratio);
transform: scaleY(@ratio);
}
.skew(@x; @y) {
-webkit-transform: skewX(@x) skewY(@y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
-o-transform: skewX(@x) skewY(@y);
transform: skewX(@x) skewY(@y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
-o-transform: rotateX(@degrees);
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
-o-transform: rotateY(@degrees);
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
// User select
// For selecting text on the page
.user-select(@select) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select; // IE10+
user-select: @select;
}

View File

@ -15,8 +15,7 @@
// Container that the modal scrolls within // Container that the modal scrolls within
.modal { .modal {
display: none; display: none;
overflow: auto; overflow: hidden;
overflow-y: scroll;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -31,10 +30,14 @@
// When fading in the modal, animate it to slide down // When fading in the modal, animate it to slide down
&.fade .modal-dialog { &.fade .modal-dialog {
.translate(0, -25%); .translate3d(0, -25%, 0);
.transition-transform(~"0.3s ease-out"); .transition-transform(~"0.3s ease-out");
} }
&.in .modal-dialog { .translate(0, 0)} &.in .modal-dialog { .translate3d(0, 0, 0) }
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
} }
// Shell div to position the modal with bottom padding // Shell div to position the modal with bottom padding
@ -54,7 +57,7 @@
.box-shadow(0 3px 9px rgba(0,0,0,.5)); .box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box; background-clip: padding-box;
// Remove focus outline from opened modal // Remove focus outline from opened modal
outline: none; outline: 0;
} }
// Modal background // Modal background
@ -98,8 +101,7 @@
// Footer (for actions) // Footer (for actions)
.modal-footer { .modal-footer {
margin-top: 15px; padding: @modal-inner-padding;
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
text-align: right; // right align buttons text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color; border-top: 1px solid @modal-footer-border-color;
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
@ -119,6 +121,15 @@
} }
} }
// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
// Scale up the modal // Scale up the modal
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports // Automatically set modal's width for larger viewports

View File

@ -48,7 +48,6 @@
// content for the user's viewport. // content for the user's viewport.
.navbar-collapse { .navbar-collapse {
max-height: @navbar-collapse-max-height;
overflow-x: visible; overflow-x: visible;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
@ -88,6 +87,17 @@
} }
} }
.navbar-fixed-top,
.navbar-fixed-bottom {
.navbar-collapse {
max-height: @navbar-collapse-max-height;
@media (max-width: @screen-xs-min) and (orientation: landscape) {
max-height: 200px;
}
}
}
// Both navbar header and collapse // Both navbar header and collapse
// //
@ -131,6 +141,7 @@
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindex-navbar-fixed; z-index: @zindex-navbar-fixed;
.translate3d(0, 0, 0);
// Undo the rounded corners // Undo the rounded corners
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
@ -190,7 +201,7 @@
// We remove the `outline` here, but later compensate by attaching `:hover` // We remove the `outline` here, but later compensate by attaching `:hover`
// styles to `:focus`. // styles to `:focus`.
&:focus { &:focus {
outline: none; outline: 0;
} }
// Bars // Bars
@ -492,6 +503,20 @@
} }
} }
.btn-link {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
}
}
}
} }
// Inverse navbar // Inverse navbar
@ -613,4 +638,18 @@
} }
} }
.btn-link {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
}
}
}
} }

View File

@ -1,4 +1,4 @@
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
// //
// 1. Set default font family to sans-serif. // 1. Set default font family to sans-serif.
@ -24,7 +24,9 @@ body {
// ========================================================================== // ==========================================================================
// //
// Correct `block` display not defined in IE 8/9. // Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
// Correct `block` display not defined for `main` in IE 11.
// //
article, article,
@ -66,8 +68,8 @@ audio:not([controls]) {
} }
// //
// Address `[hidden]` styling not present in IE 8/9. // Address `[hidden]` styling not present in IE 8/9/10.
// Hide the `template` element in IE, Safari, and Firefox < 22. // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
// //
[hidden], [hidden],
@ -99,7 +101,7 @@ a:hover {
// ========================================================================== // ==========================================================================
// //
// Address styling not present in IE 8/9, Safari 5, and Chrome. // Address styling not present in IE 8/9/10/11, Safari, and Chrome.
// //
abbr[title] { abbr[title] {
@ -107,7 +109,7 @@ abbr[title] {
} }
// //
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
// //
b, b,
@ -116,7 +118,7 @@ strong {
} }
// //
// Address styling not present in Safari 5 and Chrome. // Address styling not present in Safari and Chrome.
// //
dfn { dfn {
@ -125,7 +127,7 @@ dfn {
// //
// Address variable `h1` font-size and margin within `section` and `article` // Address variable `h1` font-size and margin within `section` and `article`
// contexts in Firefox 4+, Safari 5, and Chrome. // contexts in Firefox 4+, Safari, and Chrome.
// //
h1 { h1 {
@ -174,7 +176,7 @@ sub {
// ========================================================================== // ==========================================================================
// //
// Remove border when inside `a` element in IE 8/9. // Remove border when inside `a` element in IE 8/9/10.
// //
img { img {
@ -182,7 +184,7 @@ img {
} }
// //
// Correct overflow displayed oddly in IE 9. // Correct overflow not hidden in IE 9/10/11.
// //
svg:not(:root) { svg:not(:root) {
@ -193,7 +195,7 @@ svg:not(:root) {
// ========================================================================== // ==========================================================================
// //
// Address margin not present in IE 8/9 and Safari 5. // Address margin not present in IE 8/9 and Safari.
// //
figure { figure {
@ -242,7 +244,7 @@ samp {
// 1. Correct color not being inherited. // 1. Correct color not being inherited.
// Known issue: affects color of disabled elements. // Known issue: affects color of disabled elements.
// 2. Correct font properties not being inherited. // 2. Correct font properties not being inherited.
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
// //
button, button,
@ -256,7 +258,7 @@ textarea {
} }
// //
// Address `overflow` set to `hidden` in IE 8/9/10. // Address `overflow` set to `hidden` in IE 8/9/10/11.
// //
button { button {
@ -266,7 +268,7 @@ button {
// //
// Address inconsistent `text-transform` inheritance for `button` and `select`. // Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values. // All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8+, and Opera // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
// Correct `select` style inheritance in Firefox. // Correct `select` style inheritance in Firefox.
// //
@ -345,8 +347,8 @@ input[type="number"]::-webkit-outer-spin-button {
} }
// //
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome // 2. Address `box-sizing` set to `border-box` in Safari and Chrome
// (include `-moz` to future-proof). // (include `-moz` to future-proof).
// //
@ -379,7 +381,7 @@ fieldset {
} }
// //
// 1. Correct `color` not being inherited in IE 8/9. // 1. Correct `color` not being inherited in IE 8/9/10/11.
// 2. Remove padding so people aren't caught out if they zero out fieldsets. // 2. Remove padding so people aren't caught out if they zero out fieldsets.
// //
@ -389,7 +391,7 @@ legend {
} }
// //
// Remove default vertical scrollbar in IE 8/9. // Remove default vertical scrollbar in IE 8/9/10/11.
// //
textarea { textarea {

View File

@ -20,7 +20,7 @@
// Optional heading // Optional heading
.panel-heading { .panel-heading {
padding: 10px 15px; padding: @panel-heading-padding;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
.border-top-radius((@panel-border-radius - 1)); .border-top-radius((@panel-border-radius - 1));
@ -43,7 +43,7 @@
// Optional footer (stays gray in every modifier class) // Optional footer (stays gray in every modifier class)
.panel-footer { .panel-footer {
padding: 10px 15px; padding: @panel-footer-padding;
background-color: @panel-footer-bg; background-color: @panel-footer-bg;
border-top: 1px solid @panel-inner-border; border-top: 1px solid @panel-inner-border;
.border-bottom-radius((@panel-border-radius - 1)); .border-bottom-radius((@panel-border-radius - 1));
@ -86,7 +86,9 @@
border-top-width: 0; border-top-width: 0;
} }
} }
.list-group + .panel-footer {
border-top-width: 0;
}
// Tables in panels // Tables in panels
// //
@ -95,7 +97,8 @@
.panel { .panel {
> .table, > .table,
> .table-responsive > .table { > .table-responsive > .table,
> .panel-collapse > .table {
margin-bottom: 0; margin-bottom: 0;
} }
// Add border top radius for first one // Add border top radius for first one
@ -199,7 +202,6 @@
.panel { .panel {
margin-bottom: 0; margin-bottom: 0;
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
overflow: hidden; // crop contents when collapsed
+ .panel { + .panel {
margin-top: 5px; margin-top: 5px;
} }
@ -207,7 +209,7 @@
.panel-heading { .panel-heading {
border-bottom: 0; border-bottom: 0;
+ .panel-collapse .panel-body { + .panel-collapse > .panel-body {
border-top: 1px solid @panel-inner-border; border-top: 1px solid @panel-inner-border;
} }
} }

View File

@ -37,7 +37,7 @@
line-height: 18px; line-height: 18px;
background-color: @popover-title-bg; background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%); border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0; border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
} }
.popover-content { .popover-content {

View File

@ -48,16 +48,41 @@
} }
// Striped bars // Striped bars
.progress-striped .progress-bar { //
// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar-striped` class, which you just add to an existing
// `.progress-bar`.
.progress-striped .progress-bar,
.progress-bar-striped {
#gradient > .striped(); #gradient > .striped();
background-size: 40px 40px; background-size: 40px 40px;
} }
// Call animation for the active one // Call animation for the active one
.progress.active .progress-bar { //
// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
// `.progress-bar.active` approach.
.progress.active .progress-bar,
.progress-bar.active {
.animation(progress-bar-stripes 2s linear infinite); .animation(progress-bar-stripes 2s linear infinite);
} }
// Account for lower percentages
.progress-bar {
&[aria-valuenow="1"],
&[aria-valuenow="2"] {
min-width: 30px;
}
&[aria-valuenow="0"] {
color: @gray-light;
min-width: 30px;
background-color: transparent;
background-image: none;
box-shadow: none;
}
}
// Variations // Variations

View File

@ -0,0 +1,34 @@
// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
.embed-responsive-item,
iframe,
embed,
object {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
// Modifier class for 16:9 aspect ratio
&.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
// Modifier class for 4:3 aspect ratio
&.embed-responsive-4by3 {
padding-bottom: 75%;
}
}

View File

@ -0,0 +1,194 @@
//
// Responsive: Utility classes
// --------------------------------------------------
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport {
width: device-width;
}
// Visibility utilities
// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
.responsive-invisibility();
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
.visible-xs-block {
@media (max-width: @screen-xs-max) {
display: block !important;
}
}
.visible-xs-inline {
@media (max-width: @screen-xs-max) {
display: inline !important;
}
}
.visible-xs-inline-block {
@media (max-width: @screen-xs-max) {
display: inline-block !important;
}
}
.visible-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
.visible-sm-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: block !important;
}
}
.visible-sm-inline {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline !important;
}
}
.visible-sm-inline-block {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
display: inline-block !important;
}
}
.visible-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
.visible-md-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: block !important;
}
}
.visible-md-inline {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline !important;
}
}
.visible-md-inline-block {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
display: inline-block !important;
}
}
.visible-lg {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
.visible-lg-block {
@media (min-width: @screen-lg-min) {
display: block !important;
}
}
.visible-lg-inline {
@media (min-width: @screen-lg-min) {
display: inline !important;
}
}
.visible-lg-inline-block {
@media (min-width: @screen-lg-min) {
display: inline-block !important;
}
}
.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
.hidden-sm {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
.hidden-md {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
.hidden-lg {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.
// Note: Deprecated .visible-print as of v3.2.0
.visible-print {
.responsive-invisibility();
@media print {
.responsive-visibility();
}
}
.visible-print-block {
display: none !important;
@media print {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
@media print {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
@media print {
display: inline-block !important;
}
}
.hidden-print {
@media print {
.responsive-invisibility();
}
}

View File

@ -20,7 +20,7 @@
// Body reset // Body reset
html { html {
font-size: 62.5%; font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
} }
@ -132,3 +132,19 @@ hr {
clip: rect(0,0,0,0); clip: rect(0,0,0,0);
border: 0; border: 0;
} }
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
.sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
}

View File

@ -4,7 +4,6 @@
table { table {
max-width: 100%;
background-color: @table-bg; background-color: @table-bg;
} }
th { th {
@ -16,6 +15,7 @@ th {
.table { .table {
width: 100%; width: 100%;
max-width: 100%;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
// Cells // Cells
> thead, > thead,
@ -168,12 +168,12 @@ table {
// by enabling horizontal scrolling. Only applies <768px. Everything above that // by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally. // will display normally.
@media (max-width: @screen-xs-max) {
.table-responsive { .table-responsive {
@media screen and (max-width: @screen-xs-max) {
width: 100%; width: 100%;
margin-bottom: (@line-height-computed * 0.75); margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color; border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

View File

@ -48,6 +48,12 @@
background-color: darken(@btn-color, 12%); background-color: darken(@btn-color, 12%);
border-color: darken(@btn-color, 14%); border-color: darken(@btn-color, 14%);
} }
&:disabled,
&[disabled] {
background-color: darken(@btn-color, 12%);
background-image: none;
}
} }
// Common styles // Common styles
@ -191,6 +197,11 @@
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); } .progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); } .progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
.progress-bar-striped {
#gradient > .striped();
}
// //

View File

@ -62,7 +62,7 @@ p {
.lead { .lead {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
font-size: floor((@font-size-base * 1.15)); font-size: floor((@font-size-base * 1.15));
font-weight: 200; font-weight: 300;
line-height: 1.4; line-height: 1.4;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
@ -74,18 +74,34 @@ p {
// Emphasis & misc // Emphasis & misc
// ------------------------- // -------------------------
// Ex: 14px base font * 85% = about 12px // Ex: (12px small font / 14px base font) * 100% = about 85%
small, small,
.small { font-size: 85%; } .small {
font-size: floor((100% * @font-size-small / @font-size-base));
}
// Undo browser default styling // Undo browser default styling
cite { font-style: normal; } cite {
font-style: normal;
}
mark,
.mark {
background-color: @state-warning-bg;
padding: .2em;
}
// Alignment // Alignment
.text-left { text-align: left; } .text-left { text-align: left; }
.text-right { text-align: right; } .text-right { text-align: right; }
.text-center { text-align: center; } .text-center { text-align: center; }
.text-justify { text-align: justify; } .text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
// Transformation
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
// Contextual colors // Contextual colors
.text-muted { .text-muted {
@ -141,7 +157,7 @@ cite { font-style: normal; }
// Lists // Lists
// -------------------------------------------------- // -------------------------
// Unordered and Ordered lists // Unordered and Ordered lists
ul, ul,
@ -195,24 +211,28 @@ dd {
// Defaults to being stacked without any of the below styles applied, until the // Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px). // grid breakpoint is reached (default of ~768px).
@media (min-width: @grid-float-breakpoint) {
.dl-horizontal { .dl-horizontal {
dd {
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
}
@media (min-width: @grid-float-breakpoint) {
dt { dt {
float: left; float: left;
width: (@component-offset-horizontal - 20); width: (@dl-horizontal-offset - 20);
clear: left; clear: left;
text-align: right; text-align: right;
.text-overflow(); .text-overflow();
} }
dd { dd {
margin-left: @component-offset-horizontal; margin-left: @dl-horizontal-offset;
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
} }
} }
} }
// MISC
// ---- // Misc
// -------------------------
// Abbreviations and acronyms // Abbreviations and acronyms
abbr[title], abbr[title],

View File

@ -53,4 +53,5 @@
.affix { .affix {
position: fixed; position: fixed;
.translate3d(0, 0, 0);
} }

View File

@ -10,7 +10,7 @@
@gray-darker: lighten(#000, 13.5%); // #222 @gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333 @gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555 @gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 60%); // #999 @gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee @gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca; @brand-primary: #428bca;
@ -68,14 +68,18 @@
@headings-color: inherit; @headings-color: inherit;
//-- Iconography //== Iconography
// //
//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower. //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
@icon-font-path: "../fonts/"; @icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular"; @icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular"; @icon-font-svg-id: "glyphicons_halflingsregular";
//== Components //== Components
// //
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@ -232,7 +236,7 @@
//** Text color for headers within dropdown menus. //** Text color for headers within dropdown menus.
@dropdown-header-color: @gray-light; @dropdown-header-color: @gray-light;
// Note: Deprecated @dropdown-caret-color as of v3.1.0 //** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000; @dropdown-caret-color: #000;
@ -245,8 +249,8 @@
@zindex-navbar: 1000; @zindex-navbar: 1000;
@zindex-dropdown: 1000; @zindex-dropdown: 1000;
@zindex-popover: 1010; @zindex-popover: 1060;
@zindex-tooltip: 1030; @zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030; @zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040; @zindex-modal-background: 1040;
@zindex-modal: 1050; @zindex-modal: 1050;
@ -257,27 +261,32 @@
//## Define the breakpoints at which your layout will change, adapting to different screen sizes. //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone // Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 //** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px; @screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs; @screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min; @screen-phone: @screen-xs-min;
// Small screen / tablet // Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 //** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px; @screen-sm: 768px;
@screen-sm-min: @screen-sm; @screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min; @screen-tablet: @screen-sm-min;
// Medium screen / desktop // Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 //** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px; @screen-md: 992px;
@screen-md-min: @screen-md; @screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min; @screen-desktop: @screen-md-min;
// Large screen / wide desktop // Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 //** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px; @screen-lg: 1200px;
@screen-lg-min: @screen-lg; @screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min; @screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
@ -558,7 +567,7 @@
//## //##
//** Padding applied to the modal body //** Padding applied to the modal body
@modal-inner-padding: 20px; @modal-inner-padding: 15px;
//** Padding applied to the modal title //** Padding applied to the modal title
@modal-title-padding: 15px; @modal-title-padding: 15px;
@ -643,17 +652,26 @@
//** List group border radius //** List group border radius
@list-group-border-radius: @border-radius-base; @list-group-border-radius: @border-radius-base;
//** Background color of single list elements on hover //** Background color of single list items on hover
@list-group-hover-bg: #f5f5f5; @list-group-hover-bg: #f5f5f5;
//** Text color of active list elements //** Text color of active list items
@list-group-active-color: @component-active-color; @list-group-active-color: @component-active-color;
//** Background color of active list elements //** Background color of active list items
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
//** Border color of active list elements //** Border color of active list elements
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); @list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555; @list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333; @list-group-link-heading-color: #333;
@ -663,6 +681,8 @@
@panel-bg: #fff; @panel-bg: #fff;
@panel-body-padding: 15px; @panel-body-padding: 15px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base; @panel-border-radius: @border-radius-base;
//** Border color for elements within panels //** Border color for elements within panels
@ -802,6 +822,8 @@
// //
//## //##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color //** Text muted color
@text-muted: @gray-light; @text-muted: @gray-light;
//** Abbreviations and acronyms border color //** Abbreviations and acronyms border color
@ -816,14 +838,9 @@
@blockquote-border-color: @gray-lighter; @blockquote-border-color: @gray-lighter;
//** Page header border color //** Page header border color
@page-header-border-color: @gray-lighter; @page-header-border-color: @gray-lighter;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//== Miscellaneous
//
//##
//** Horizontal line color. //** Horizontal line color.
@hr-border: @gray-lighter; @hr-border: @gray-lighter;
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;