framework/bedrock
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

BS3 Final

Browse Source
This commit is contained in:
Foxaii
2013-08-19 22:54:05 +01:00
parent a56551a9e0
commit 97c6eb2544
33 changed files with 1548 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/less/alerts.less
View File

@@ -9,9 +9,7 @@
.alert {
padding: @alert-padding;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
border: 1px solid transparent;
border-radius: @alert-border-radius;
// Headings for larger alerts
@@ -20,14 +18,9 @@
// Specified for the h4 to prevent conflicts of changing @headingsColor
color: inherit;
}
// Match the hr to the border of the alert
hr {
border-top-color: darken(@alert-border, 5%);
}
// Provide class for links that match alerts
.alert-link {
font-weight: @alert-link-font-weight;
color: darken(@alert-text, 10%);
}
// Improve alignment and spacing of inner content
@@ -63,9 +56,12 @@
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
.alert-info {
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}

40
assets/less/bootstrap.less vendored
View File

@@ -21,43 +21,39 @@
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components: common
// Components
@import "component-animations.less";
@import "input-groups.less";
@import "glyphicons.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "wells.less";
@import "close.less";
// Components: Nav
@import "navs.less";
@import "navbar.less";
@import "button-groups.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
// Components: Popovers
// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
// Components: Misc
@import "alerts.less";
@import "thumbnails.less";
@import "media.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "carousel.less";
@import "jumbotron.less";
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
@import "utilities.less";
@import "responsive-utilities.less";

24
assets/less/button-groups.less
View File

@@ -18,16 +18,18 @@
border-top-color: #fff;
}
}
.dropup .caret {
.btn-default & {
.dropup {
& .btn-default .caret {
border-bottom-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info & {
border-bottom-color: #fff;
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info {
.caret {
border-bottom-color: #fff;
}
}
}
@@ -157,11 +159,12 @@
}
// Carets in other button sizes
.btn-lg .caret {
border-width: @caret-width-large;
border-width: @caret-width-large @caret-width-large 0;
border-bottom-width: 0;
}
// Upside down carets for .dropup
.dropup .btn-lg .caret {
border-bottom-width: @caret-width-large;
border-width: 0 @caret-width-large @caret-width-large;
}
@@ -229,6 +232,7 @@
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
.btn {
float: none;
display: table-cell;

5
assets/less/buttons.less
View File

@@ -35,13 +35,14 @@
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: default;
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.box-shadow(none);
@@ -130,7 +131,7 @@
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.btn-xs {
padding: 3px 5px;
padding: 1px 5px;
}

7
assets/less/carousel.less
View File

@@ -98,12 +98,17 @@
// Toggles
.icon-prev,
.icon-next {
.icon-next,
.glyphicon-chevron-left,
.glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
margin-top: -10px;

27
assets/less/dropdowns.less
View File

@@ -13,6 +13,9 @@
border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
// we can just straight up remove this.
border-bottom: 0 dotted;
content: "";
}
@@ -75,8 +78,7 @@
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
background-color: @dropdown-link-hover-bg;
}
}
@@ -88,8 +90,7 @@
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
background-color: darken(@dropdown-link-active-bg, 5%);
background-color: @dropdown-link-active-bg;
}
}
@@ -163,7 +164,9 @@
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
// gets fixed, restore `border-top: 0;`.
border-top: 0 dotted;
border-bottom: 4px solid @dropdown-caret-color;
content: "";
}
@@ -174,3 +177,17 @@
margin-bottom: 1px;
}
}
// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
.pull-right > .dropdown-menu();
}
}
}

51
assets/less/forms.less
View File

@@ -133,9 +133,9 @@ input[type="number"] {
.form-control-focus();
// Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
// Note: HTML5 says that controls under a fieldset > legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
@@ -207,6 +207,20 @@ input[type="number"] {
margin-left: 10px; // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"],
.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
}
}
// Form control sizing
.input-sm {
@@ -243,7 +257,7 @@ input[type="number"] {
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
padding-top: @padding-base-vertical;
padding-top: (@padding-base-vertical + 1);
}
@@ -312,21 +326,28 @@ input[type="number"] {
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal .control-label,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: @padding-base-vertical;
}
.form-horizontal {
// Consistent vertical alignment of labels, radios, and checkboxes
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
// Make form groups behave like rows
.form-group {
.make-row();
}
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.form-horizontal .control-label {
text-align: right;
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.control-label {
text-align: right;
}
}
}

232
assets/less/glyphicons.less Normal file
View File

@@ -0,0 +1,232 @@
//
// Glyphicons for Bootstrap
//
// Since icons are fonts, they can be placed anywhere text is placed and are
// thus automatically sized to match the surrounding child. To use, create an
// inline element with the appropriate classes, like so:
//
// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
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}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}
// Catchall baseclass
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
// Individual icons
.glyphicon-asterisk { &:before { content: "\2a"; } }
.glyphicon-plus { &:before { content: "\2b"; } }
.glyphicon-euro { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } }
.glyphicon-pencil { &:before { content: "\270f"; } }
.glyphicon-glass { &:before { content: "\e001"; } }
.glyphicon-music { &:before { content: "\e002"; } }
.glyphicon-search { &:before { content: "\e003"; } }
.glyphicon-heart { &:before { content: "\e005"; } }
.glyphicon-star { &:before { content: "\e006"; } }
.glyphicon-star-empty { &:before { content: "\e007"; } }
.glyphicon-user { &:before { content: "\e008"; } }
.glyphicon-film { &:before { content: "\e009"; } }
.glyphicon-th-large { &:before { content: "\e010"; } }
.glyphicon-th { &:before { content: "\e011"; } }
.glyphicon-th-list { &:before { content: "\e012"; } }
.glyphicon-ok { &:before { content: "\e013"; } }
.glyphicon-remove { &:before { content: "\e014"; } }
.glyphicon-zoom-in { &:before { content: "\e015"; } }
.glyphicon-zoom-out { &:before { content: "\e016"; } }
.glyphicon-off { &:before { content: "\e017"; } }
.glyphicon-signal { &:before { content: "\e018"; } }
.glyphicon-cog { &:before { content: "\e019"; } }
.glyphicon-trash { &:before { content: "\e020"; } }
.glyphicon-home { &:before { content: "\e021"; } }
.glyphicon-file { &:before { content: "\e022"; } }
.glyphicon-time { &:before { content: "\e023"; } }
.glyphicon-road { &:before { content: "\e024"; } }
.glyphicon-download-alt { &:before { content: "\e025"; } }
.glyphicon-download { &:before { content: "\e026"; } }
.glyphicon-upload { &:before { content: "\e027"; } }
.glyphicon-inbox { &:before { content: "\e028"; } }
.glyphicon-play-circle { &:before { content: "\e029"; } }
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
.glyphicon-volume-down { &:before { content: "\e037"; } }
.glyphicon-volume-up { &:before { content: "\e038"; } }
.glyphicon-qrcode { &:before { content: "\e039"; } }
.glyphicon-barcode { &:before { content: "\e040"; } }
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
.glyphicon-text-height { &:before { content: "\e050"; } }
.glyphicon-text-width { &:before { content: "\e051"; } }
.glyphicon-align-left { &:before { content: "\e052"; } }
.glyphicon-align-center { &:before { content: "\e053"; } }
.glyphicon-align-right { &:before { content: "\e054"; } }
.glyphicon-align-justify { &:before { content: "\e055"; } }
.glyphicon-list { &:before { content: "\e056"; } }
.glyphicon-indent-left { &:before { content: "\e057"; } }
.glyphicon-indent-right { &:before { content: "\e058"; } }
.glyphicon-facetime-video { &:before { content: "\e059"; } }
.glyphicon-picture { &:before { content: "\e060"; } }
.glyphicon-map-marker { &:before { content: "\e062"; } }
.glyphicon-adjust { &:before { content: "\e063"; } }
.glyphicon-tint { &:before { content: "\e064"; } }
.glyphicon-edit { &:before { content: "\e065"; } }
.glyphicon-share { &:before { content: "\e066"; } }
.glyphicon-check { &:before { content: "\e067"; } }
.glyphicon-move { &:before { content: "\e068"; } }
.glyphicon-step-backward { &:before { content: "\e069"; } }
.glyphicon-fast-backward { &:before { content: "\e070"; } }
.glyphicon-backward { &:before { content: "\e071"; } }
.glyphicon-play { &:before { content: "\e072"; } }
.glyphicon-pause { &:before { content: "\e073"; } }
.glyphicon-stop { &:before { content: "\e074"; } }
.glyphicon-forward { &:before { content: "\e075"; } }
.glyphicon-fast-forward { &:before { content: "\e076"; } }
.glyphicon-step-forward { &:before { content: "\e077"; } }
.glyphicon-eject { &:before { content: "\e078"; } }
.glyphicon-chevron-left { &:before { content: "\e079"; } }
.glyphicon-chevron-right { &:before { content: "\e080"; } }
.glyphicon-plus-sign { &:before { content: "\e081"; } }
.glyphicon-minus-sign { &:before { content: "\e082"; } }
.glyphicon-remove-sign { &:before { content: "\e083"; } }
.glyphicon-ok-sign { &:before { content: "\e084"; } }
.glyphicon-question-sign { &:before { content: "\e085"; } }
.glyphicon-info-sign { &:before { content: "\e086"; } }
.glyphicon-screenshot { &:before { content: "\e087"; } }
.glyphicon-remove-circle { &:before { content: "\e088"; } }
.glyphicon-ok-circle { &:before { content: "\e089"; } }
.glyphicon-ban-circle { &:before { content: "\e090"; } }
.glyphicon-arrow-left { &:before { content: "\e091"; } }
.glyphicon-arrow-right { &:before { content: "\e092"; } }
.glyphicon-arrow-up { &:before { content: "\e093"; } }
.glyphicon-arrow-down { &:before { content: "\e094"; } }
.glyphicon-share-alt { &:before { content: "\e095"; } }
.glyphicon-resize-full { &:before { content: "\e096"; } }
.glyphicon-resize-small { &:before { content: "\e097"; } }
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
.glyphicon-chevron-up { &:before { content: "\e113"; } }
.glyphicon-chevron-down { &:before { content: "\e114"; } }
.glyphicon-retweet { &:before { content: "\e115"; } }
.glyphicon-shopping-cart { &:before { content: "\e116"; } }
.glyphicon-folder-close { &:before { content: "\e117"; } }
.glyphicon-folder-open { &:before { content: "\e118"; } }
.glyphicon-resize-vertical { &:before { content: "\e119"; } }
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
.glyphicon-hand-right { &:before { content: "\e127"; } }
.glyphicon-hand-left { &:before { content: "\e128"; } }
.glyphicon-hand-up { &:before { content: "\e129"; } }
.glyphicon-hand-down { &:before { content: "\e130"; } }
.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
.glyphicon-sort-by-order { &:before { content: "\e153"; } }
.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
.glyphicon-unchecked { &:before { content: "\e157"; } }
.glyphicon-expand { &:before { content: "\e158"; } }
.glyphicon-collapse-down { &:before { content: "\e159"; } }
.glyphicon-collapse-up { &:before { content: "\e160"; } }
.glyphicon-log-in { &:before { content: "\e161"; } }
.glyphicon-flash { &:before { content: "\e162"; } }
.glyphicon-log-out { &:before { content: "\e163"; } }
.glyphicon-new-window { &:before { content: "\e164"; } }
.glyphicon-record { &:before { content: "\e165"; } }
.glyphicon-save { &:before { content: "\e166"; } }
.glyphicon-open { &:before { content: "\e167"; } }
.glyphicon-saved { &:before { content: "\e168"; } }
.glyphicon-import { &:before { content: "\e169"; } }
.glyphicon-export { &:before { content: "\e170"; } }
.glyphicon-send { &:before { content: "\e171"; } }
.glyphicon-floppy-disk { &:before { content: "\e172"; } }
.glyphicon-floppy-saved { &:before { content: "\e173"; } }
.glyphicon-floppy-remove { &:before { content: "\e174"; } }
.glyphicon-floppy-save { &:before { content: "\e175"; } }
.glyphicon-floppy-open { &:before { content: "\e176"; } }
.glyphicon-credit-card { &:before { content: "\e177"; } }
.glyphicon-transfer { &:before { content: "\e178"; } }
.glyphicon-cutlery { &:before { content: "\e179"; } }
.glyphicon-header { &:before { content: "\e180"; } }
.glyphicon-compressed { &:before { content: "\e181"; } }
.glyphicon-earphone { &:before { content: "\e182"; } }
.glyphicon-phone-alt { &:before { content: "\e183"; } }
.glyphicon-tower { &:before { content: "\e184"; } }
.glyphicon-stats { &:before { content: "\e185"; } }
.glyphicon-sd-video { &:before { content: "\e186"; } }
.glyphicon-hd-video { &:before { content: "\e187"; } }
.glyphicon-subtitles { &:before { content: "\e188"; } }
.glyphicon-sound-stereo { &:before { content: "\e189"; } }
.glyphicon-sound-dolby { &:before { content: "\e190"; } }
.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
.glyphicon-copyright-mark { &:before { content: "\e194"; } }
.glyphicon-registration-mark { &:before { content: "\e195"; } }
.glyphicon-cloud-download { &:before { content: "\e197"; } }
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
.glyphicon-briefcase { &:before { content: "\1f4bc"; } }
.glyphicon-calendar { &:before { content: "\1f4c5"; } }
.glyphicon-pushpin { &:before { content: "\1f4cc"; } }
.glyphicon-paperclip { &:before { content: "\1f4ce"; } }
.glyphicon-camera { &:before { content: "\1f4f7"; } }
.glyphicon-lock { &:before { content: "\1f512"; } }
.glyphicon-bell { &:before { content: "\1f514"; } }
.glyphicon-bookmark { &:before { content: "\1f516"; } }
.glyphicon-fire { &:before { content: "\1f525"; } }
.glyphicon-wrench { &:before { content: "\1f527"; } }

12
assets/less/grid.less
View File

@@ -8,7 +8,7 @@
.container-fixed();
}
// Mobile-first defaults
// mobile first defaults
.row {
.make-row();
}
@@ -223,6 +223,7 @@
.col-md-12 { width: 100%; }
// Push and pull columns for source order changes
.col-md-push-0 { left: auto; }
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
@@ -235,6 +236,7 @@
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-0 { right: auto; }
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
@@ -248,6 +250,7 @@
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-md-offset-0 { margin-left: 0; }
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
@@ -269,9 +272,9 @@
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-large-desktop) {
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-large-desktop;
max-width: @container-lg-desktop;
}
.col-lg-1,
@@ -301,6 +304,7 @@
.col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.col-lg-push-0 { left: auto; }
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
@@ -313,6 +317,7 @@
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-0 { right: auto; }
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
@@ -326,6 +331,7 @@
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-lg-offset-0 { margin-left: 0; }
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }

2
assets/less/input-groups.less
View File

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

21
assets/less/jumbotron.less
View File

@@ -4,13 +4,14 @@
.jumbotron {
padding: 30px;
margin-bottom: 30px;
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-lead-color;
color: @jumbotron-color;
background-color: @jumbotron-bg;
h1 {
line-height: 1;
color: @jumbotron-heading-color;
@@ -19,9 +20,19 @@
line-height: 1.4;
}
.container & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
@media screen and (min-width: @screen-tablet) {
padding: 50px 60px;
border-radius: @border-radius-large; // Only round corners at higher resolutions
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
.container & {
padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2);
}
h1 {
font-size: (@font-size-base * 4.5);
}

14
assets/less/labels.less
View File

@@ -4,7 +4,7 @@
.label {
display: inline;
padding: .25em .6em;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
@@ -37,18 +37,22 @@
.label-variant(@label-default-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
.label-primary {
.label-variant(@label-primary-bg);
}
.label-success {
.label-variant(@label-success-bg);
}
.label-info {
.label-variant(@label-info-bg);
}
.label-warning {
.label-variant(@label-warning-bg);
}
.label-info {
.label-variant(@label-info-bg);
.label-danger {
.label-variant(@label-danger-bg);
}

116
assets/less/mixins.less
View File

@@ -286,7 +286,7 @@
// Reset filters for IE
//
// When you need to remove a gradient background, don't forget to use this to reset
// 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)"));
@@ -294,10 +294,10 @@
// RETINA IMAGE SUPPORT
// --------------------------------------------------
// 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}");
@@ -314,6 +314,17 @@
}
// 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
// --------------------------------------------------
@@ -329,9 +340,9 @@
// Panels
// -------------------------
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
border-color: @border;
.panel-heading {
& > .panel-heading {
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
@@ -339,7 +350,7 @@
border-top-color: @border;
}
}
.panel-footer {
& > .panel-footer {
+ .panel-collapse .panel-body {
border-bottom-color: @border;
}
@@ -360,6 +371,35 @@
}
}
// Tables
// -------------------------
.table-row-variant(@state; @background; @border) {
// 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;
border-color: @border;
}
}
// 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 {
background-color: darken(@background, 5%);
border-color: darken(@border, 5%);
}
}
}
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
@@ -372,12 +412,17 @@
&:hover,
&:focus,
&:active,
&.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] & {
@@ -479,43 +524,28 @@
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
.clearfix();
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
.clearfix();
.container & {
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
width: percentage((@columns / @grid-columns));
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
@max-width: (@screen-small - 1);
// Calculate width based on number of columns available
@media (max-width: @max-width) {
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
@@ -528,7 +558,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
float: left;
width: percentage((@columns / @grid-columns));
}
@@ -536,17 +566,17 @@
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
@media (min-width: @screen-sm) {
right: percentage((@columns / @grid-columns));
}
}
@@ -561,7 +591,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
float: left;
width: percentage((@columns / @grid-columns));
}
@@ -569,17 +599,17 @@
// Generate the large column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
@media (min-width: @screen-md) {
right: percentage((@columns / @grid-columns));
}
}
@@ -594,7 +624,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
float: left;
width: percentage((@columns / @grid-columns));
}
@@ -602,17 +632,17 @@
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
@media (min-width: @screen-lg) {
right: percentage((@columns / @grid-columns));
}
}
@@ -681,12 +711,12 @@
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea& {
height: auto;
}

8
assets/less/modals.less
View File

@@ -10,6 +10,14 @@
// Kill the scroll on the body
.modal-open {
overflow: hidden;
// Account for hiding of scrollbar
body&,
.navbar-fixed-top,
.navbar-fixed-bottom {
margin-right: 15px
}
}
// Container that the modal scrolls within

446
assets/less/navbar.less
View File

@@ -10,10 +10,10 @@
.navbar {
position: relative;
z-index: @zindex-navbar;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
background-color: @navbar-bg;
border: 1px solid @navbar-border;
border: 1px solid transparent;
// Prevent floats from breaking the navbar
.clearfix();
@@ -30,8 +30,6 @@
// styling of responsive aspects.
.navbar-header {
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
.clearfix();
@media (min-width: @grid-float-breakpoint) {
@@ -51,25 +49,61 @@
// content for the user's viewport.
.navbar-collapse {
padding: 5px @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
// Clear floated elements and prevent collapsing of padding
.clearfix();
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
max-height: 340px;
overflow-x: visible;
overflow-y: auto;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
.clearfix();
-webkit-overflow-scrolling: touch;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) {
width: auto;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
box-shadow: none;
&.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
&.in {
overflow-y: visible;
}
// Account for first and last children spacing
.navbar-nav.navbar-left:first-child {
margin-left: -@navbar-padding-horizontal;
}
.navbar-nav.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
.navbar-text:last-child {
margin-right: 0;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
@@ -82,8 +116,8 @@
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-width: 0 0 1px;
border-radius: 0;
}
}
@@ -94,7 +128,6 @@
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-width: 0 0 1px;
// Undo the rounded corners
@@ -103,6 +136,7 @@
}
}
.navbar-fixed-top {
z-index: @zindex-navbar-fixed;
top: 0;
}
.navbar-fixed-bottom {
@@ -115,17 +149,18 @@
.navbar-brand {
float: left;
margin-right: (@navbar-padding-horizontal / 2);
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container & {
margin-left: -@navbar-padding-horizontal;
}
}
}
@@ -138,28 +173,27 @@
.navbar-toggle {
position: relative;
float: right;
margin-right: @navbar-padding-horizontal;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
border: 1px solid @navbar-toggle-border-color;
border: 1px solid transparent;
border-radius: @border-radius-base;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: @grid-float-breakpoint) {
display: none;
}
}
@@ -169,44 +203,16 @@
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-left: 0;
margin-right: 0;
}
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-bottom: 10px;
color: @navbar-link-color;
line-height: @line-height-computed;
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
@media (max-width: @screen-phone-max) {
// Dropdowns get custom display
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
@@ -220,30 +226,25 @@
padding: 5px 15px 5px 25px;
}
> li > a {
color: @navbar-link-color;
line-height: @line-height-computed;
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
background-image: none;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}
}
}
@@ -272,14 +273,16 @@
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%);
border-bottom: 1px solid darken(@navbar-bg, 7%);
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow);
// Mixin behavior for optimum display
.form-inline();
.form-group {
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
margin-bottom: 5px;
}
}
@@ -295,6 +298,7 @@
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
}
}
@@ -311,34 +315,6 @@
.border-bottom-radius(0);
}
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-link-active-bg;
color: @navbar-link-active-color;
.caret {
border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-active-color;
}
}
}
> .dropdown > a .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
}
// Right aligned menus need alt position
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
@@ -347,9 +323,168 @@
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
.navbar-vertical-align(@input-height-base);
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
float: left;
.navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) {
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
.navbar-brand {
color: @navbar-default-brand-color;
&:hover,
&:focus {
color: @navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-default-color;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-default-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-default-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-default-bg, 7%);
}
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-default-link-hover-color;
border-bottom-color: @navbar-default-link-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
.caret {
border-top-color: @navbar-default-link-active-color;
border-bottom-color: @navbar-default-link-active-color;
}
}
}
> .dropdown > a .caret {
border-top-color: @navbar-default-link-color;
border-bottom-color: @navbar-default-link-color;
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
}
// Inverse navbar
// --------------------------------------------------
.navbar-inverse {
background-color: @navbar-inverse-bg;
@@ -408,8 +543,9 @@
}
}
.navbar-collapse {
border-top-color: darken(@navbar-inverse-bg, 7%);
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
@@ -441,7 +577,7 @@
}
}
@media (max-width: @screen-phone-max) {
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
@@ -475,85 +611,11 @@
}
}
}
// Responsive navbar
// --------------------------------------------------
@media screen and (min-width: @grid-float-breakpoint) {
.navbar-nav {
float: left;
// undo margin to make nav extend full height of navbar
margin-top: 0;
margin-bottom: 0;
> li {
float: left;
> a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}
.navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}
// Required to make the collapsing navbar work on regular desktops
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
margin-top: ((@navbar-height - @input-height-base) / 2);
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
float: left;
.navbar-vertical-align(@line-height-computed);
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
// Default navbar variables
.navbar-link {
color: @navbar-link-color;
&:hover {
color: @navbar-link-hover-color;
}
}
// Use the inverse navbar variables
.navbar-inverse .navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}

25
assets/less/navs.less
View File

@@ -19,7 +19,7 @@
> a {
position: relative;
display: block;
padding: 10px 15px;
padding: @nav-link-padding;
&:hover,
&:focus {
text-decoration: none;
@@ -42,17 +42,12 @@
}
// Open dropdowns
&.open > a {
.open > a {
&,
&:hover,
&:focus {
color: @nav-open-link-hover-color;
background-color: @link-color;
background-color: @nav-link-hover-bg;
border-color: @link-color;
.caret {
border-top-color: @nav-open-caret-border-color;
border-bottom-color: @nav-open-caret-border-color;
}
}
}
@@ -87,7 +82,7 @@
border: 1px solid transparent;
border-radius: @border-radius-base @border-radius-base 0 0;
&:hover {
border-color: @nav-tabs-link-hover-border-color;
border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
}
}
@@ -159,14 +154,20 @@
.nav-justified {
width: 100%;
> li {
float: none;
display: table-cell;
width: 1%;
> a {
> a {
text-align: center;
}
}
@media (min-width: @screen-sm) {
> li {
display: table-cell;
width: 1%;
}
}
}
// Move borders to anchors instead of bottom of list

2
assets/less/pager.less
View File

@@ -23,7 +23,7 @@
> a:hover,
> a:focus {
text-decoration: none;
background-color: @pagination-active-bg;
background-color: @pagination-hover-bg;
}
}

29
assets/less/pagination.less
View File

@@ -11,18 +11,19 @@
display: inline; // Remove list-style and block-level defaults
> a,
> span {
position: relative;
float: left; // Collapse white-space
padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base;
text-decoration: none;
background-color: @pagination-bg;
border: 1px solid @pagination-border;
border-left-width: 0;
margin-left: -1px;
}
&:first-child {
> a,
> span {
border-left-width: 1px;
margin-left: 0;
.border-left-radius(@border-radius-base);
}
}
@@ -34,16 +35,25 @@
}
}
> li > a:hover,
> li > a:focus,
> .active > a,
> .active > span {
background-color: @pagination-active-bg;
> li > a,
> li > span {
&:hover,
&:focus {
background-color: @pagination-hover-bg;
}
}
> .active > a,
> .active > span {
color: @pagination-active-color;
cursor: default;
&,
&:hover,
&:focus {
z-index: 2;
color: @pagination-active-color;
background-color: @pagination-active-bg;
border-color: @pagination-active-bg;
cursor: default;
}
}
> .disabled {
@@ -53,6 +63,7 @@
> a:focus {
color: @pagination-disabled-color;
background-color: @pagination-bg;
border-color: @pagination-border;
cursor: not-allowed;
}
}

36
assets/less/panels.less
View File

@@ -7,7 +7,7 @@
.panel {
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid @panel-border;
border: 1px solid transparent;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
@@ -15,15 +15,17 @@
// Panel contents
.panel-body {
padding: 15px;
.clearfix();
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
.list-group {
> .list-group {
margin-bottom: 0;
.list-group-item {
@@ -47,11 +49,26 @@
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table {
margin-bottom: 0;
}
> .panel-body + .table {
border-top: 1px solid @table-border-color;
}
}
// Optional heading
.panel-heading {
padding: 10px 15px;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
border-bottom: 1px solid transparent;
.border-top-radius(@panel-border-radius - 1);
}
@@ -59,7 +76,7 @@
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-size: ceil((@font-size-base * 1.125));
> a {
color: inherit;
}
@@ -69,7 +86,7 @@
.panel-footer {
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-border;
border-top: 1px solid @panel-inner-border;
.border-bottom-radius(@panel-border-radius - 1);
}
@@ -93,13 +110,13 @@
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid @panel-border;
border-top: 1px solid @panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid @panel-border;
border-bottom: 1px solid @panel-inner-border;
}
}
@@ -111,6 +128,9 @@
// Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}

16
assets/less/progress-bars.less
View File

@@ -78,22 +78,18 @@
// Variations
// -------------------------
// Danger (red)
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
}
// Success (green)
.progress-bar-success {
.progress-bar-variant(@progress-bar-success-bg);
}
// Warning (orange)
.progress-bar-info {
.progress-bar-variant(@progress-bar-info-bg);
}
.progress-bar-warning {
.progress-bar-variant(@progress-bar-warning-bg);
}
// Info (teal)
.progress-bar-info {
.progress-bar-variant(@progress-bar-info-bg);
.progress-bar-danger {
.progress-bar-variant(@progress-bar-danger-bg);
}

161
assets/less/responsive-utilities.less
View File

@@ -36,99 +36,171 @@
// Visibility utilities
.visible-xs {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
.responsive-invisibility();
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-sm {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-md {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-invisibility();
&.visible-lg {
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
}
.visible-lg {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-invisibility();
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-invisibility();
&.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-large-desktop) {
&.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-visibility();
}
}
@media (min-width: @screen-lg) {
.responsive-visibility();
}
}
.hidden-xs {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
.responsive-visibility();
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-sm {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-md {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
@media (min-width: @screen-large-desktop) {
.responsive-visibility();
&.hidden-lg {
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
}
.hidden-lg {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.responsive-visibility();
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
.responsive-visibility();
&.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-large-desktop) {
&.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
.responsive-invisibility();
}
}
@media (min-width: @screen-lg) {
.responsive-invisibility();
}
}
@@ -137,7 +209,6 @@
.visible-print {
.responsive-invisibility();
}
.hidden-print { }
@media print {
.visible-print {

55
assets/less/scaffolding.less
View File

@@ -4,7 +4,6 @@
// Reset the box-sizing
// -------------------------
*,
*:before,
@@ -14,7 +13,6 @@
// Body reset
// -------------------------
html {
font-size: 62.5%;
@@ -39,26 +37,37 @@ textarea {
line-height: inherit;
}
// Reset unusual Firefox-on-Android default style.
//
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
background-image: none;
}
// Links
// -------------------------
a {
color: @link-color;
text-decoration: none;
}
a:hover,
a:focus {
color: @link-hover-color;
text-decoration: underline;
}
a:focus {
.tab-focus();
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
}
&:focus {
.tab-focus();
}
}
// Images
// -------------------------
img {
vertical-align: middle;
@@ -66,9 +75,7 @@ img {
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
display: inline-block;
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
.img-responsive();
}
// Rounded corners
@@ -77,7 +84,19 @@ img {
}
// Image thumbnails
// See thumbnails.less for `.img-thumbnail`
//
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
// Keep them at most 100% wide
.img-responsive(inline-block);
}
// Perfect circle
.img-circle {
@@ -86,7 +105,6 @@ img {
// Horizontal rules
// -------------------------
hr {
margin-top: @line-height-computed;
@@ -95,9 +113,10 @@ hr {
border-top: 1px solid @hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
// -------------------------
.sr-only {
position: absolute;

143
assets/less/tables.less
View File

@@ -13,7 +13,6 @@ th {
// Baseline styles
// ---------------
.table {
width: 100%;
@@ -35,6 +34,7 @@ th {
// Bottom align for column headings
thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
}
// Remove top border from thead by default
caption + thead,
@@ -58,9 +58,7 @@ th {
}
// Condensed table w/ half padding
// -------------------------------
.table-condensed {
thead,
@@ -76,9 +74,9 @@ th {
}
// Bordered version
// ----------------
//
// Add borders all around the table and between all the columns.
.table-bordered {
border: 1px solid @table-border-color;
@@ -92,14 +90,21 @@ th {
}
}
}
> thead {
> tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
}
// Zebra-striping
// --------------
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody {
> tr:nth-child(odd) {
@@ -112,11 +117,10 @@ th {
}
// Hover effect
// ------------
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody {
> tr:hover {
@@ -129,19 +133,18 @@ th {
}
// Table cell sizing
// -----------------
//
// Reset default table behavior
table col[class^="col-"] {
table col[class*="col-"] {
float: none;
display: table-column;
}
table {
td,
th {
&[class^="col-"] {
&[class*="col-"] {
float: none;
display: table-cell;
}
@@ -149,9 +152,8 @@ table {
}
// Table backgrounds
// -----------------
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
@@ -164,48 +166,71 @@ table {
&.active > th {
background-color: @table-bg-active;
}
> td.success,
> th.success,
&.success > td,
&.success > th {
background-color: @state-success-bg;
border-color: @state-success-border;
}
> td.danger,
> th.danger,
&.danger > td,
&.danger > th {
background-color: @state-danger-bg;
border-color: @state-danger-border;
}
> td.warning,
> th.warning,
&.warning > td,
&.warning > th {
background-color: @state-warning-bg;
border-color: @state-warning-border;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
> td.success:hover,
> th.success:hover,
&.success:hover > td {
background-color: darken(@state-success-bg, 5%);
border-color: darken(@state-success-border, 5%);
}
> td.danger:hover,
> th.danger:hover,
&.danger:hover > td {
background-color: darken(@state-danger-bg, 5%);
border-color: darken(@state-danger-border, 5%);
}
> td.warning:hover,
> th.warning:hover,
&.warning:hover > td {
background-color: darken(@state-warning-bg, 5%);
border-color: darken(@state-warning-border, 5%);
// Generate the contextual variants
.table-row-variant(success; @state-success-bg; @state-success-border);
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
// Responsive tables
//
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
@media (max-width: @screen-sm) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid @table-border-color;
// Tighten up spacing and give a background color
> .table {
margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}

232
assets/less/theme.less Normal file
View File

@@ -0,0 +1,232 @@
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
//
// Buttons
// --------------------------------------------------
// Common styles
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
.box-shadow(@shadow);
// Reset the shadow
&:active,
&.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555;) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
border-color: darken(@btn-color, 12%);
&:active,
&.active {
background-color: darken(@btn-color, 10%);
border-color: darken(@btn-color, 12%);
}
}
// Common styles
.btn {
// Remove the gradient for the pressed/active state
&:active,
&.active {
background-image: none;
}
}
// Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); }
.btn-danger { .btn-styles(@btn-danger-bg); }
.btn-info { .btn-styles(@btn-info-bg); }
//
// Images
// --------------------------------------------------
.thumbnail,
.img-thumbnail {
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
//
// Dropdowns
// --------------------------------------------------
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
//
// Navbar
// --------------------------------------------------
// Basic navbar
.navbar {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;);
border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.navbar-nav > .active > a {
background-color: @navbar-default-bg;
}
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;);
.navbar-nav > .active > a {
background-color: @navbar-inverse-bg;
}
.navbar-brand,
.navbar-nav > li > a {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
}
// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
//
// Alerts
// --------------------------------------------------
// Common styles
.alert {
text-shadow: 0 1px 0 rgba(255,255,255,.2);
@shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
// Mixin for generating new styles
.alert-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
border-color: darken(@color, 15%);
}
// Apply the mixin to the alerts
.alert-success { .alert-styles(@alert-success-bg); }
.alert-info { .alert-styles(@alert-info-bg); }
.alert-warning { .alert-styles(@alert-warning-bg); }
.alert-danger { .alert-styles(@alert-danger-bg); }
//
// Progress bars
// --------------------------------------------------
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;)
}
// Mixin for generating new styles
.progress-bar-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}
// Apply the mixin to the progress bars
.progress-bar { .progress-bar-styles(@progress-bar-bg); }
.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); }
.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); }
.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
//
// List groups
// --------------------------------------------------
.list-group {
border-radius: @border-radius-base;
.box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
border-color: darken(@list-group-active-border, 7.5%);
}
//
// Panels
// --------------------------------------------------
// Common styles
.panel {
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
// Mixin for generating new styles
.panel-heading-styles(@color) {
#gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
}
// Apply the mixin to the panel headings only
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); }
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
//
// Wells
// --------------------------------------------------
.well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;);
border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow);
}

27
assets/less/thumbnails.less
View File

@@ -3,28 +3,17 @@
// --------------------------------------------------
// Base classes
// For thumbnail block-level composite components and simple image styles
// The actual thumbnailed element
// Can be `a`, `div`, or `img`
.thumbnail,
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
}
// Mixin and adjust the regular image class
.thumbnail {
display: block;
}
.thumbnail > img,
.img-thumbnail {
.img-responsive();
.img-thumbnail();
display: block; // Override the inline-block from `.img-thumbnail`
> img {
.img-responsive();
}
}
// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {

4
assets/less/type.less
View File

@@ -72,8 +72,8 @@ h6 {
margin-bottom: (@line-height-computed / 2);
}
h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px
h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }

113
assets/less/variables.less
View File

@@ -55,6 +55,12 @@
@headings-font-weight: 500;
@headings-line-height: 1.1;
// Iconography
// -------------------------
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
// Components
// -------------------------
@@ -98,7 +104,7 @@
// Buttons
// -------------------------
@btn-font-weight: bold;
@btn-font-weight: normal;
@btn-default-color: #333;
@btn-default-bg: #fff;
@@ -182,6 +188,7 @@
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1010;
@zindex-tooltip: 1030;
@@ -193,26 +200,25 @@
// --------------------------------------------------
// Extra small screen / phone
@screen-xsmall: 480px;
@screen-phone: @screen-xsmall;
@screen-xs: 480px;
@screen-phone: @screen-xs;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
@screen-sm: 768px;
@screen-tablet: @screen-sm;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
@screen-md: 992px;
@screen-desktop: @screen-md;
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
@screen-lg: 1200px;
@screen-lg-desktop: @screen-lg;
// So media queries don't overlap when required, provide a maximum
@screen-phone-max: (@screen-small - 1);
@screen-small-max: (@screen-medium - 1);
@screen-tablet-max: (@screen-desktop - 1);
@screen-desktop-max: (@screen-large-desktop - 1);
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
// Grid system
@@ -232,31 +238,31 @@
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-color: #777;
@navbar-bg: #f8f8f8;
@navbar-border: darken(@navbar-bg, 6.5%);
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links
@navbar-link-color: #777;
@navbar-link-hover-color: #333;
@navbar-link-hover-bg: transparent;
@navbar-link-active-color: #555;
@navbar-link-active-bg: darken(@navbar-bg, 6.5%);
@navbar-link-disabled-color: #ccc;
@navbar-link-disabled-bg: transparent;
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-brand-color: @navbar-link-color;
@navbar-brand-hover-color: darken(@navbar-link-color, 10%);
@navbar-brand-hover-bg: transparent;
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-toggle-hover-bg: #ddd;
@navbar-toggle-icon-bar-bg: #ccc;
@navbar-toggle-border-color: #ddd;
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;
// Inverted navbar
@@ -296,6 +302,7 @@
// Navs
// -------------------------
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter;
@nav-disabled-link-color: @gray-light;
@@ -326,10 +333,15 @@
@pagination-bg: #fff;
@pagination-border: #ddd;
@pagination-active-bg: #f5f5f5;
@pagination-active-color: @gray-light;
@pagination-hover-bg: @gray-lighter;
@pagination-active-bg: @brand-primary;
@pagination-active-color: #fff;
@pagination-disabled-color: @gray-light;
// Pager
// -------------------------
@@ -340,9 +352,11 @@
// Jumbotron
// -------------------------
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-lead-color: inherit;
// Form states and alerts
@@ -396,6 +410,7 @@
// -------------------------
@label-default-bg: @gray-light;
@label-primary-bg: @brand-primary;
@label-success-bg: @brand-success;
@label-info-bg: @brand-info;
@label-warning-bg: @brand-warning;
@@ -427,22 +442,22 @@
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@alert-bg: @state-warning-bg;
@alert-text: @state-warning-text;
@alert-border: @state-warning-border;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-border: @state-success-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
// Progress bars
// -------------------------
@@ -474,11 +489,14 @@
// Panels
// -------------------------
@panel-bg: #fff;
@panel-border: #ddd;
@panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;
@@ -516,11 +534,6 @@
@well-bg: #f5f5f5;
// Accordion
// -------------------------
@accordion-border-color: #e5e5e5;
// Badges
// -------------------------
@badge-color: #fff;
@@ -598,10 +611,10 @@
// --------------------------------------------------
// Small screen / tablet
@container-tablet: 720px;
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: 940px;
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-large-desktop: 1140px;
@container-lg-desktop: ((1140px + @grid-gutter-width));