diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f18f7e1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +weather icons project.sublime-project +weather icons project.sublime-workspace +public/* \ No newline at end of file diff --git a/src/cs/scripts.coffee b/src/cs/scripts.coffee new file mode 100644 index 0000000..e83143f --- /dev/null +++ b/src/cs/scripts.coffee @@ -0,0 +1,55 @@ +# Simple Weather Plugin + +$.simpleWeather + zipcode: "84095" + woeid: "2496395" + location: "" + unit: "f" + success: (weather) -> + html = " +
+
+
+
Partly Cloudy
+
+
+
+
+
+
" + weather.temp + "°
+
+
" + weather.high + "
+
" + weather.low + "
+
+
+
+
+
+
+
+
+
SaturdaySunny
+
" + weather.tomorrow.high + ""+ weather.tomorrow.low + "
+
+
+
+
+ " + + + + + + + + + + + $("#weather").html html + + error: (error) -> + $("#weather").html "

" + error + "

" + + + #html += "
" + weather.city + ", " + weather.region + "
" + # html += "View Forecast »" \ No newline at end of file diff --git a/src/index.jade b/src/index.jade new file mode 100644 index 0000000..10c2642 --- /dev/null +++ b/src/index.jade @@ -0,0 +1,74 @@ +!!! 5 +html(lang="en") + head + title Demo Homepage + //- meta(name='viewport', content='width=device-width, initial-scale=1.0') + meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no') + + + + script(src='//code.jquery.com/jquery-latest.min.js') + script(src='//use.typekit.net/xmb4mjl.js') + script + try{Typekit.load();}catch(e){} + + script(src='js/bootstrap.min.js') + script(src='js/scripts.js') + link(rel='stylesheet', href='css/styles.css') + link(rel='stylesheet', href='css/weather.css') + body + + + + + + section.content.container + .row + .col-sm-12 + p.examples a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 + p.examples A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0 + p.examples * / , ! \ { } " " + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + p space + + \ No newline at end of file diff --git a/src/less/bootstrap/accordion.less b/src/less/bootstrap/accordion.less new file mode 100644 index 0000000..59765f1 --- /dev/null +++ b/src/less/bootstrap/accordion.less @@ -0,0 +1,34 @@ +// +// Accordion +// -------------------------------------------------- + + +// Parent container +.accordion { + margin-bottom: @line-height-computed; +} + +// Group == heading + body +.accordion-group { + margin-bottom: 2px; + border: 1px solid #e5e5e5; + border-radius: @border-radius-base; +} +.accordion-heading { + border-bottom: 0; +} +.accordion-heading .accordion-toggle { + display: block; + padding: 8px 15px; +} + +// General toggle styles +.accordion-toggle { + cursor: pointer; +} + +// Inner needs the styles because you can't animate properly with any styles on the element +.accordion-inner { + padding: 9px 15px; + border-top: 1px solid #e5e5e5; +} diff --git a/src/less/bootstrap/alerts.less b/src/less/bootstrap/alerts.less new file mode 100644 index 0000000..24b7911 --- /dev/null +++ b/src/less/bootstrap/alerts.less @@ -0,0 +1,92 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: 10px 35px 10px 15px; + margin-bottom: @line-height-computed; + color: @alert-text; + background-color: @alert-bg; + border: 1px solid @alert-border; + border-radius: @alert-border-radius; + + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing @headingsColor + color: inherit; + } + // Match the hr to the border of the alert + hr { + border-top-color: darken(@alert-border, 5%); + } + // Provide class for links that match alerts + .alert-link { + font-weight: 500; + color: darken(@alert-text, 10%); + } + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + +// Alternate styles +// ------------------------- + +.alert-success { + background-color: @alert-success-bg; + border-color: @alert-success-border; + color: @alert-success-text; + hr { + border-top-color: darken(@alert-success-border, 5%); + } + .alert-link { + color: darken(@alert-success-text, 10%); + } +} +.alert-danger { + background-color: @alert-danger-bg; + border-color: @alert-danger-border; + color: @alert-danger-text; + hr { + border-top-color: darken(@alert-danger-border, 5%); + } + .alert-link { + color: darken(@alert-danger-text, 10%); + } +} +.alert-info { + background-color: @alert-info-bg; + border-color: @alert-info-border; + color: @alert-info-text; + hr { + border-top-color: darken(@alert-info-border, 5%); + } + .alert-link { + color: darken(@alert-info-text, 10%); + } +} + +// Block alerts +// ------------------------- + +.alert-block { + padding-top: 15px; + padding-bottom: 15px; +} +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; +} +.alert-block p + p { + margin-top: 5px; +} diff --git a/src/less/bootstrap/badges.less b/src/less/bootstrap/badges.less new file mode 100644 index 0000000..4750cfb --- /dev/null +++ b/src/less/bootstrap/badges.less @@ -0,0 +1,58 @@ +// +// Badges +// -------------------------------------------------- + + +// Base classes +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: @font-size-small; + font-weight: bold; + color: #fff; + line-height: 1; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: @gray-light; + border-radius: 10px; + + // Empty labels/badges collapse + &:empty { + display: none; + } +} + +// Hover state, but only for links +a.badge { + &:hover, + &:focus { + color: #fff; + text-decoration: none; + cursor: pointer; + } +} + +// Quick fix for labels/badges in buttons +.btn { + .badge { + position: relative; + top: -1px; + } +} +.btn-mini { + .badge { + top: 0; + } +} + +// Account for counters in navs +a.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: @link-color; + background-color: #fff; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} diff --git a/src/less/bootstrap/bootstrap.less b/src/less/bootstrap/bootstrap.less new file mode 100644 index 0000000..c73c85c --- /dev/null +++ b/src/less/bootstrap/bootstrap.less @@ -0,0 +1,64 @@ +/*! + * Bootstrap v3.0.0 + * + * Copyright 2013 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world by @mdo and @fat. + */ + +// Core variables and mixins +@import "variables.less"; +@import "mixins.less"; + +// Reset +@import "normalize.less"; +@import "print.less"; + +// Core CSS +@import "scaffolding.less"; +@import "type.less"; +@import "code.less"; +@import "grid.less"; + +@import "tables.less"; +@import "forms.less"; +@import "buttons.less"; + +// Components: common +@import "component-animations.less"; +@import "glyphicons.less"; +@import "dropdowns.less"; +@import "list-group.less"; +@import "panels.less"; +@import "wells.less"; +@import "close.less"; + +// Components: Nav +@import "navs.less"; +@import "navbar.less"; +@import "button-groups.less"; +@import "breadcrumbs.less"; +@import "pagination.less"; +@import "pager.less"; + +// Components: Popovers +@import "modals.less"; +@import "tooltip.less"; +@import "popovers.less"; + +// Components: Misc +@import "alerts.less"; +@import "thumbnails.less"; +@import "media.less"; +@import "labels.less"; +@import "badges.less"; +@import "progress-bars.less"; +@import "accordion.less"; +@import "carousel.less"; +@import "jumbotron.less"; + +// Utility classes +@import "utilities.less"; // Has to be last to override when necessary +@import "responsive-utilities.less"; diff --git a/src/less/bootstrap/breadcrumbs.less b/src/less/bootstrap/breadcrumbs.less new file mode 100644 index 0000000..2fe8217 --- /dev/null +++ b/src/less/bootstrap/breadcrumbs.less @@ -0,0 +1,28 @@ +// +// Breadcrumbs +// -------------------------------------------------- + + +.breadcrumb { + padding: 8px 15px; + margin: 0 0 @line-height-computed; + list-style: none; + background-color: #f5f5f5; + border-radius: @border-radius-base; + > li { + display: inline-block; + text-shadow: 0 1px 0 #fff; + &:after { + display: inline-block; + content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space + padding: 0 5px; + color: #ccc; + } + &:last-child:after { + display: none; // No divider after last element + } + } + > .active { + color: @gray-light; + } +} diff --git a/src/less/bootstrap/button-groups.less b/src/less/bootstrap/button-groups.less new file mode 100644 index 0000000..f7934a3 --- /dev/null +++ b/src/less/bootstrap/button-groups.less @@ -0,0 +1,170 @@ +// +// Button groups +// -------------------------------------------------- + +// Button carets +.btn .caret { + border-top-color: @btn-default-color; +} +.dropup .btn .caret { + border-bottom-color: @btn-default-color; +} + +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:active { + z-index: 2; + } + } +} + +// Prevent double borders when buttons are next to each other +.btn-group .btn + .btn { + margin-left: -1px; +} + +// Optional: Group multiple button groups together for a toolbar +.btn-toolbar { + .clearfix(); + + .btn-group { + float: left; + } + // Space out series of button groups + > .btn + .btn, + > .btn-group + .btn, + > .btn + .btn-group, + > .btn-group + .btn-group { + margin-left: 5px; + } +} + +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +.btn-group > .btn:first-child { + margin-left: 0; + &:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); + } +} +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + .border-left-radius(0); +} + +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + .border-right-radius(0); +} +.btn-group > .btn-group:last-child > .btn:first-child { + .border-left-radius(0); +} + +// On active and open, don't show outline +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + + + +// Split button dropdowns +// ---------------------- + +// Give the line between buttons some depth +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} +.btn-group > .btn-mini + .dropdown-toggle { + padding-left: 5px; + padding-right: 5px; +} +.btn-group > .btn-large + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} + +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group.open .dropdown-toggle { + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); +} + + +// Reposition the caret +.btn .caret { + margin-left: 0; +} +// Carets in other button sizes +.btn-large .caret { + border-width: 5px; +} +// Upside down carets for .dropup +.dropup .btn-large .caret { + border-bottom-width: 5px; +} + + +// Vertical button groups +// ---------------------- + +.btn-group-vertical > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + + .btn { + margin-top: -1px; + } +} +.btn-group-vertical .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group-vertical .btn:first-child { + .border-bottom-radius(0); +} +.btn-group-vertical .btn:last-child { + .border-top-radius(0); +} + + +// Justified button groups +// ---------------------- + +.btn-group-justified { + display: table; + width: 100%; + .btn { + float: none; + display: table-cell; + width: 1%; + } +} + + +// Checkbox and radio options +.btn-group[data-toggle="buttons-radio"] > .btn > input[type="radio"], +.btn-group[data-toggle="buttons-checkbox"] > .btn > input[type="checkbox"] { + display: none; +} diff --git a/src/less/bootstrap/buttons.less b/src/less/bootstrap/buttons.less new file mode 100644 index 0000000..6280d34 --- /dev/null +++ b/src/less/bootstrap/buttons.less @@ -0,0 +1,160 @@ +// +// Buttons +// -------------------------------------------------- + + +// Base styles +// -------------------------------------------------- + +// Core styles +.btn { + display: inline-block; + padding: @padding-base-vertical @padding-base-horizontal; + margin-bottom: 0; // For input.btn + font-size: @font-size-base; + font-weight: 500; + line-height: @line-height-base; + text-align: center; + vertical-align: middle; + cursor: pointer; + border: 1px solid transparent; + border-radius: @border-radius-base; + white-space: nowrap; + + &:focus { + .tab-focus(); + } + + &:hover, + &:focus { + color: #fff; + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + background-image: none; + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: default; + pointer-events: none; // Future-proof disabling of clicks + .opacity(.65); + .box-shadow(none); + } + +} + + +// Alternate buttons +// -------------------------------------------------- + +.btn-default { + .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border); +} +.btn-primary { + .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border); +} +// Warning appears as orange +.btn-warning { + .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border); +} +// Success appears as green +.btn-success { + .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border); +} +// Info appears as blue-green +.btn-info { + .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border); +} + + +// Link buttons +// ------------------------- + +// Make a button look and behave like a link +.btn-link, +.btn-link:active, +.btn-link[disabled], +fieldset[disabled] .btn-link { + background-color: transparent; + background-image: none; + .box-shadow(none); +} +.btn-link, +.btn-link:hover, +.btn-link:focus, +.btn-link:active { + border-color: transparent; +} +.btn-link { + color: @link-color; + font-weight: normal; + cursor: pointer; + border-radius: 0; +} +.btn-link:hover, +.btn-link:focus { + color: @link-hover-color; + text-decoration: underline; + background-color: transparent; +} +.btn-link { + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @gray-dark; + text-decoration: none; + } + } +} + + +// Button Sizes +// -------------------------------------------------- + +.btn-large { + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + border-radius: @border-radius-large; +} +.btn-small { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + line-height: 1.5; // ensure proper height of button next to small input + border-radius: @border-radius-small; +} + + +// Block button +// -------------------------------------------------- + +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} + +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} diff --git a/src/less/bootstrap/carousel.less b/src/less/bootstrap/carousel.less new file mode 100644 index 0000000..a7a4672 --- /dev/null +++ b/src/less/bootstrap/carousel.less @@ -0,0 +1,192 @@ +// +// Carousel +// -------------------------------------------------- + + +// Wrapper for the slide container and indicators +.carousel { + position: relative; +} + +// Wrap all slides, but only show the active one +.carousel-inner { + position: relative; + overflow: hidden; + width: 100%; +} + +// Immediate parent of all slides +.carousel-inner { + + > .item { + display: none; + position: relative; + .transition(.6s ease-in-out left); + + // Account for jankitude on images + > img, + > a > img { + display: block; + line-height: 1; + } + } + + > .active, + > .next, + > .prev { display: block; } + + > .active { + left: 0; + } + + > .next, + > .prev { + position: absolute; + top: 0; + width: 100%; + } + + > .next { + left: 100%; + } + > .prev { + left: -100%; + } + > .next.left, + > .prev.right { + left: 0; + } + + > .active.left { + left: -100%; + } + > .active.right { + left: 100%; + } + +} + +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 15%; + .opacity(.5); + font-size: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0,0,0,.6); + + // we can't have this transition here + // because webkit cancels the carousel + // animation if you trip this while + // in the middle of another animation + // ;_; + // .transition(opacity .2s linear); + + // Set gradients for backgrounds + &.left { + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); + background-color: transparent; + } + &.right { + left: auto; + right: 0; + #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); + background-color: transparent; + } + + // Hover/focus state + &:hover, + &:focus { + color: #fff; + text-decoration: none; + .opacity(.9); + } + + // Toggles + .glyphicon { + position: absolute; + top: 50%; + left: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + } +} + +// Optional indicator pips +// ----------------------------- +.carousel-indicators { + position: absolute; + bottom: 20px; + left: 50%; + z-index: 15; + width: 100px; + margin: 0 0 0 -50px; + padding-left: 0; + list-style: none; + text-align: center; + + li { + display: inline-block; + width: 8px; + height: 8px; + margin-left: 0; + margin-right: 0; + text-indent: -999px; + border: 1px solid #fff; + border-radius: 5px; + cursor: pointer; + } + .active { + background-color: #fff; + } +} + +// Optional captions +// ----------------------------- +// Hidden by default for smaller viewports +.carousel-caption { + position: absolute; + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #fff; + text-align: center; + text-shadow: 0 1px 2px rgba(0,0,0,.6); + & .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } +} + + +// Scale up controls for tablets and up +@media screen and (min-width: @screen-tablet) { + + // Scale up the controls a smidge + .carousel-control .glyphicon { + width: 30px; + height: 30px; + margin-top: -15px; + margin-left: -15px; + font-size: 30px; + } + + // Show and left align the captions + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } +} diff --git a/src/less/bootstrap/close.less b/src/less/bootstrap/close.less new file mode 100644 index 0000000..e879da4 --- /dev/null +++ b/src/less/bootstrap/close.less @@ -0,0 +1,33 @@ +// +// Close icons +// -------------------------------------------------- + + +.close { + float: right; + font-size: (@font-size-base * 1.5); + font-weight: bold; + line-height: 1; + color: #000; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(.2); + + &:hover, + &:focus { + color: #000; + text-decoration: none; + cursor: pointer; + .opacity(.5); + } +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} diff --git a/src/less/bootstrap/code.less b/src/less/bootstrap/code.less new file mode 100644 index 0000000..f1bc0a0 --- /dev/null +++ b/src/less/bootstrap/code.less @@ -0,0 +1,61 @@ +// +// Code (inline and blocK) +// -------------------------------------------------- + + +// Inline and block code styles +code, +pre { + padding: 0 3px 2px; + font-family: @font-family-monospace; + font-size: (@font-size-base - 2); + color: @gray-dark; + border-radius: 4px; +} + +// Inline code +code { + padding: 2px 4px; + font-size: 90%; + color: #c7254e; + background-color: #f9f2f4; + white-space: nowrap; +} + +// Blocks of code +pre { + display: block; + padding: ((@line-height-computed - 1) / 2); + margin: 0 0 (@line-height-computed / 2); + font-size: (@font-size-base - 1); // 14px to 13px + line-height: @line-height-base; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; // IE8 fallback + border: 1px solid rgba(0,0,0,.15); + border-radius: @border-radius-base; + + // Make prettyprint styles more spaced out for readability + &.prettyprint { + margin-bottom: @line-height-computed; + } + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} diff --git a/src/less/bootstrap/component-animations.less b/src/less/bootstrap/component-animations.less new file mode 100644 index 0000000..50e5e45 --- /dev/null +++ b/src/less/bootstrap/component-animations.less @@ -0,0 +1,23 @@ +// +// Component animations +// -------------------------------------------------- + + +.fade { + opacity: 0; + .transition(opacity .15s linear); + &.in { + opacity: 1; + } +} + +.collapse { + position: relative; + height: 0; + overflow: hidden; + .transition(height .35s ease); + + &.in { + height: auto; + } +} diff --git a/src/less/bootstrap/dropdowns.less b/src/less/bootstrap/dropdowns.less new file mode 100644 index 0000000..3e01527 --- /dev/null +++ b/src/less/bootstrap/dropdowns.less @@ -0,0 +1,226 @@ +// +// Dropdown menus +// -------------------------------------------------- + + +// Dropdown arrow/caret +// -------------------- +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px solid #000; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; +} + +// The dropdown menu (ul) +// ---------------------- +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: @zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; // override default ul + list-style: none; + background-color: @dropdown-bg; + border: 1px solid #ccc; // IE8 fallback + border: 1px solid @dropdown-border; + border-radius: @border-radius-base; + .box-shadow(0 6px 12px rgba(0,0,0,.175)); + .background-clip(padding-box); + + // Aligns the dropdown menu to right + &.pull-right { + right: 0; + left: auto; + } + + // Dividers (basically an hr) within the dropdown + .divider { + .nav-divider(@dropdown-divider-top, @dropdown-divider-bottom); + } + + // Links within the dropdown menu + > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: @line-height-base; + color: @dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + } +} + +// Hover/Focus state +// ----------- +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + text-decoration: none; + color: @dropdown-link-hover-color; + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); +} + +// Active state +// ------------ +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: @dropdown-link-active-color; + text-decoration: none; + outline: 0; + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); +} + +// Disabled state +// -------------- +// Gray out text and ensure the hover/focus state remains gray +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: @gray-light; +} +// Nuke hover/focus effects +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); + cursor: default; +} + +// Open state for the dropdown +// --------------------------- +.open { + // Show the menu + > .dropdown-menu { + display: block; + } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } +} + + +// Backdrop to catch body clicks on mobile, etc. +// --------------------------- +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: @zindex-dropdown - 10; +} + +// Right aligned dropdowns +// --------------------------- +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// ------------------------------------------------------ +// Just add .dropup after the standard .dropdown class and you're set, bro. +// TODO: abstract this so that the navbar fixed styles are not placed here? +.dropup, +.navbar-fixed-bottom .dropdown { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: 4px solid #000; + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; + } +} + +// Sub menus +// --------------------------- +.dropdown-submenu { + position: relative; +} +// Default dropdowns +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + border-top-left-radius: 0; // Nuke the closest corner as appropriate +} +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +// Dropups +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + border-bottom-left-radius: 0; // Nuke the closest corner as appropriate +} + +// Caret to indicate there is a submenu +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: darken(@dropdown-bg, 20%); + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover > a:after { + border-left-color: @dropdown-link-hover-color; +} + +// Left aligned submenus +.dropdown-submenu.pull-left { + // Undo the float + // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. + float: none; + + // Positioning the submenu + > .dropdown-menu { + left: -100%; + margin-left: 10px; + border-top-right-radius: 0; // Remove the rounded corner here + } +} + +// Tweak nav headers +// --------------------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + +// Typeahead +// --------------------------- +.typeahead { + z-index: 1051; +} diff --git a/src/less/bootstrap/forms.less b/src/less/bootstrap/forms.less new file mode 100644 index 0000000..6095809 --- /dev/null +++ b/src/less/bootstrap/forms.less @@ -0,0 +1,432 @@ +// +// Forms +// -------------------------------------------------- + + +// Non-controls +// ------------------------- + +form { + margin: 0; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: @line-height-computed; + font-size: (@font-size-base * 1.5); + line-height: inherit; + color: @gray-dark; + border: 0; + border-bottom: 1px solid #e5e5e5; +} + +label { + display: inline-block; + margin-bottom: 5px; + font-weight: bold; +} + +// Form controls +// ------------------------- + +// Shared size and type resets +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { + display: block; + min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + line-height: @line-height-base; + color: @gray; + vertical-align: middle; + background-color: @input-bg; + border: 1px solid @input-border; + border-radius: @input-border-radius; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } + + // Disabled and read-only inputs + // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, + // we don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: @input-bg-disabled; + } +} + +// Reset appearance properties for textual inputs and textarea +// Can't be on input[type=*] selectors or it's too specific +input, +select, +textarea { + width: 100%; +} + +// Reset width of input images, buttons, radios, checkboxes +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector +} + +// Override content-box in Normalize (* isn't specific enough) +input[type="search"] { + .box-sizing(border-box); +} + +// Reset height since textareas have rows +textarea { + height: auto; +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; /* IE8-9 */ + line-height: normal; +} + +// Set the height of select and file controls to match text inputs +select, +input[type="file"] { + height: @input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */ + line-height: @input-height-base; +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Fix optgroup Firefox bug per https://github.com/twitter/bootstrap/issues/7611 +select optgroup { + font-size: inherit; + font-style: inherit; + font-family: inherit; +} + +// Focus for select, file, radio, and checkbox +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); +} + + +// Placeholder +// ------------------------- + +// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector +input, +textarea { + .placeholder(); +} + + +// CHECKBOXES & RADIOS +// ------------------- + +// Indent the labels to position radios/checkboxes as hanging +.radio, +.checkbox { + display: block; + min-height: @line-height-computed; // clear the floating input if there is no label text + margin-top: 10px; + margin-bottom: 10px; + padding-left: 20px; + vertical-align: middle; + label { + display: inline; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + } +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + float: left; + margin-left: -20px; +} +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing +} + +/* +// Move the options list down to align with labels +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 5px; // has to be padding because margin collaspes +} +*/ + +// Radios and checkboxes on same line +.radio-inline, +.checkbox-inline { + display: inline-block; +// padding-top: 5px; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; // space out consecutive inline controls +} + + + +// INPUT SIZES +// ----------- + +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"] { + &.input-large { + min-height: @input-height-large; + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + border-radius: @border-radius-large; + } + &.input-small { + min-height: @input-height-small; + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + border-radius: @border-radius-small; + } +} + + + +// FORM FIELD FEEDBACK STATES +// -------------------------- + +// Warning +.has-warning { + .form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg); +} +// Error +.has-error { + .form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg); +} +// Success +.has-success { + .form-field-validation(@state-success-text, @state-success-text, @state-success-bg); +} + + + + +// HELP TEXT +// --------- + +.help-block { + display: block; // account for any element using help-block + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast +} + + + +// Input groups +// -------------------------------------------------- + +// Base styles +// ------------------------- +.input-group { + display: table; + + // Undo padding and float of grid classes + &.col { + float: none; + padding-left: 0; + padding-right: 0; + } + + input, + select { + width: 100%; + margin-bottom: 0; + } +} + +// Display as table-cell +// ------------------------- +.input-group-addon, +.input-group-btn, +.input-group input { + display: table-cell; + + &:not(:first-child):not(:last-child) { + border-radius: 0; + } +} +// Addon and addon wrapper for buttons +.input-group-addon, +.input-group-btn { + width: 1%; + vertical-align: middle; // Match the inputs +} + +// Text input groups +// ------------------------- +.input-group-addon { + .box-sizing(border-box); + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + font-weight: normal; + line-height: @line-height-base; + text-align: center; + text-shadow: 0 1px 0 #fff; + background-color: @gray-lighter; + border: 1px solid #ccc; + border-radius: @border-radius-base; + + &.input-small { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + border-radius: @border-radius-small; + } + &.input-large { + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + border-radius: @border-radius-large; + } +} + +// Reset rounded corners +.input-group input:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group input:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { + .border-left-radius(0); +} +.input-group-addon:last-child { + border-left: 0; +} + +// Button input groups +// ------------------------- +.input-group-btn { + position: relative; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; + float: left; // Collapse white-space + + .btn { + margin-left: -1px; + } + // Bring the "active" button to the front + &:hover, + &:active { + z-index: 2; + } +} + + +// Inline forms +// -------------------------------------------------- + +.form-inline { + input, + select, + textarea, + .radio, + .checkbox { + display: inline-block; + } + .radio, + .checkbox { + margin-top: 0; + margin-bottom: 0; + } +} + + +// Horizontal forms +// -------------------------------------------------- +// Horizontal forms are built on grid classes. + +.form-horizontal { + .row + .row { + margin-top: 15px; + } + .control-label { + padding-top: 6px; + } +} + +// Only right aline form labels here when the columns stop stacking +@media (min-width: 768px) { + .form-horizontal .control-label { + text-align: right; + } +} diff --git a/src/less/bootstrap/glyphicons.less b/src/less/bootstrap/glyphicons.less new file mode 100644 index 0000000..0d935ea --- /dev/null +++ b/src/less/bootstrap/glyphicons.less @@ -0,0 +1,200 @@ +// +// Glyphicons +// ----------------------------------------------------------------------------- + +// About +// +// Glyphicons font-based icons require you to include all relevant font files, +// found in the Bootstrap repo under /fonts/. Files are referenced relative to +// the compiled CSS. +// +// Basic usage +// +// Since icons are fonts, they can be placed anywhere text is placed. To use, +// create an inline element with the appropriate classes, like so: +// +// Star +// +// Use them in links, buttons, headings, and more. + + +// Import the fonts +@font-face { + font-family: 'Glyphicons Halflings'; + src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot'); + src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), + url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'), + url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'), + url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} + +// Catchall baseclass +.glyphicon:before { + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; +} + +// Individual icons +.glyphicon-glass:before { content: "\e001"; } +.glyphicon-music:before { content: "\e002"; } +.glyphicon-search:before { content: "\e003"; } +.glyphicon-envelope:before { content: "\2709"; } +.glyphicon-heart:before { content: "\e005"; } +.glyphicon-star:before { content: "\e006"; } +.glyphicon-star-empty:before { content: "\e007"; } +.glyphicon-user:before { content: "\e008"; } +.glyphicon-film:before { content: "\e009"; } +.glyphicon-th-large:before { content: "\e010"; } +.glyphicon-th:before { content: "\e011"; } +.glyphicon-th-list:before { content: "\e012"; } +.glyphicon-ok:before { content: "\e013"; } +.glyphicon-remove:before { content: "\e014"; } +.glyphicon-zoom-in:before { content: "\e015"; } +.glyphicon-zoom-out:before { content: "\e016"; } +.glyphicon-off:before { content: "\e017"; } +.glyphicon-signal:before { content: "\e018"; } +.glyphicon-cog:before { content: "\e019"; } +.glyphicon-trash:before { content: "\e020"; } +.glyphicon-home:before { content: "\e021"; } +.glyphicon-file:before { content: "\e022"; } +.glyphicon-time:before { content: "\e023"; } +.glyphicon-road:before { content: "\e024"; } +.glyphicon-download-alt:before { content: "\e025"; } +.glyphicon-download:before { content: "\e026"; } +.glyphicon-upload:before { content: "\e027"; } +.glyphicon-inbox:before { content: "\e028"; } +.glyphicon-play-circle:before { content: "\e029"; } +.glyphicon-repeat:before { content: "\e030"; } +.glyphicon-refresh:before { content: "\e031"; } +.glyphicon-list-alt:before { content: "\e032"; } +.glyphicon-lock:before { content: "\e033"; } +.glyphicon-flag:before { content: "\e034"; } +.glyphicon-headphones:before { content: "\e035"; } +.glyphicon-volume-off:before { content: "\e036"; } +.glyphicon-volume-down:before { content: "\e037"; } +.glyphicon-volume-up:before { content: "\e038"; } +.glyphicon-qrcode:before { content: "\e039"; } +.glyphicon-barcode:before { content: "\e040"; } +.glyphicon-tag:before { content: "\e041"; } +.glyphicon-tags:before { content: "\e042"; } +.glyphicon-book:before { content: "\e043"; } +.glyphicon-bookmark:before { content: "\e044"; } +.glyphicon-print:before { content: "\e045"; } +.glyphicon-camera:before { content: "\e046"; } +.glyphicon-font:before { content: "\e047"; } +.glyphicon-bold:before { content: "\e048"; } +.glyphicon-italic:before { content: "\e049"; } +.glyphicon-text-height:before { content: "\e050"; } +.glyphicon-text-width:before { content: "\e051"; } +.glyphicon-align-left:before { content: "\e052"; } +.glyphicon-align-center:before { content: "\e053"; } +.glyphicon-align-right:before { content: "\e054"; } +.glyphicon-align-justify:before { content: "\e055"; } +.glyphicon-list:before { content: "\e056"; } +.glyphicon-indent-left:before { content: "\e057"; } +.glyphicon-indent-right:before { content: "\e058"; } +.glyphicon-facetime-video:before { content: "\e059"; } +.glyphicon-picture:before { content: "\e060"; } +.glyphicon-pencil:before { content: "\270f"; } +.glyphicon-map-marker:before { content: "\e062"; } +.glyphicon-adjust:before { content: "\e063"; } +.glyphicon-tint:before { content: "\e064"; } +.glyphicon-edit:before { content: "\e065"; } +.glyphicon-share:before { content: "\e066"; } +.glyphicon-check:before { content: "\e067"; } +.glyphicon-move:before { content: "\e068"; } +.glyphicon-step-backward:before { content: "\e069"; } +.glyphicon-fast-backward:before { content: "\e070"; } +.glyphicon-backward:before { content: "\e071"; } +.glyphicon-play:before { content: "\e072"; } +.glyphicon-pause:before { content: "\e073"; } +.glyphicon-stop:before { content: "\e074"; } +.glyphicon-forward:before { content: "\e075"; } +.glyphicon-fast-forward:before { content: "\e076"; } +.glyphicon-step-forward:before { content: "\e077"; } +.glyphicon-eject:before { content: "\e078"; } +.glyphicon-chevron-left:before { content: "\e079"; } +.glyphicon-chevron-right:before { content: "\e080"; } +.glyphicon-plus-sign:before { content: "\e081"; } +.glyphicon-minus-sign:before { content: "\e082"; } +.glyphicon-remove-sign:before { content: "\e083"; } +.glyphicon-ok-sign:before { content: "\e084"; } +.glyphicon-question-sign:before { content: "\e085"; } +.glyphicon-info-sign:before { content: "\e086"; } +.glyphicon-screenshot:before { content: "\e087"; } +.glyphicon-remove-circle:before { content: "\e088"; } +.glyphicon-ok-circle:before { content: "\e089"; } +.glyphicon-ban-circle:before { content: "\e090"; } +.glyphicon-arrow-left:before { content: "\e091"; } +.glyphicon-arrow-right:before { content: "\e092"; } +.glyphicon-arrow-up:before { content: "\e093"; } +.glyphicon-arrow-down:before { content: "\e094"; } +.glyphicon-share-alt:before { content: "\e095"; } +.glyphicon-resize-full:before { content: "\e096"; } +.glyphicon-resize-small:before { content: "\e097"; } +.glyphicon-plus:before { content: "\002b"; } +.glyphicon-minus:before { content: "\2212"; } +.glyphicon-asterisk:before { content: "\002a"; } +.glyphicon-exclamation-sign:before { content: "\e101"; } +.glyphicon-gift:before { content: "\e102"; } +.glyphicon-leaf:before { content: "\e103"; } +.glyphicon-fire:before { content: "\e104"; } +.glyphicon-eye-open:before { content: "\e105"; } +.glyphicon-eye-close:before { content: "\e106"; } +.glyphicon-warning-sign:before { content: "\e107"; } +.glyphicon-plane:before { content: "\e108"; } +.glyphicon-calendar:before { content: "\e109"; } +.glyphicon-random:before { content: "\e110"; } +.glyphicon-comment:before { content: "\e111"; } +.glyphicon-magnet:before { content: "\e112"; } +.glyphicon-chevron-up:before { content: "\e113"; } +.glyphicon-chevron-down:before { content: "\e114"; } +.glyphicon-retweet:before { content: "\e115"; } +.glyphicon-shopping-cart:before { content: "\e116"; } +.glyphicon-folder-close:before { content: "\e117"; } +.glyphicon-folder-open:before { content: "\e118"; } +.glyphicon-resize-vertical:before { content: "\e119"; } +.glyphicon-resize-horizontal:before { content: "\e120"; } +.glyphicon-hdd:before { content: "\e121"; } +.glyphicon-bullhorn:before { content: "\e122"; } +.glyphicon-bell:before { content: "\e123"; } +.glyphicon-certificate:before { content: "\e124"; } +.glyphicon-thumbs-up:before { content: "\e125"; } +.glyphicon-thumbs-down:before { content: "\e126"; } +.glyphicon-hand-right:before { content: "\e127"; } +.glyphicon-hand-left:before { content: "\e128"; } +.glyphicon-hand-up:before { content: "\e129"; } +.glyphicon-hand-down:before { content: "\e130"; } +.glyphicon-circle-arrow-right:before { content: "\e131"; } +.glyphicon-circle-arrow-left:before { content: "\e132"; } +.glyphicon-circle-arrow-up:before { content: "\e133"; } +.glyphicon-circle-arrow-down:before { content: "\e134"; } +.glyphicon-globe:before { content: "\e135"; } +.glyphicon-wrench:before { content: "\e136"; } +.glyphicon-tasks:before { content: "\e137"; } +.glyphicon-filter:before { content: "\e138"; } +.glyphicon-briefcase:before { content: "\e139"; } +.glyphicon-fullscreen:before { content: "\e140"; } +.glyphicon-dashboard:before { content: "\e141"; } +.glyphicon-paperclip:before { content: "\e142"; } +.glyphicon-heart-empty:before { content: "\e143"; } +.glyphicon-link:before { content: "\e144"; } +.glyphicon-phone:before { content: "\e145"; } +.glyphicon-pushpin:before { content: "\e146"; } +.glyphicon-euro:before { content: "\20ac"; } +.glyphicon-usd:before { content: "\e148"; } +.glyphicon-gbp:before { content: "\e149"; } +.glyphicon-sort:before { content: "\e150"; } +.glyphicon-sort-by-alphabet:before { content: "\e151"; } +.glyphicon-sort-by-alphabet-alt:before { content: "\e152"; } +.glyphicon-sort-by-order:before { content: "\e153"; } +.glyphicon-sort-by-order-alt:before { content: "\e154"; } +.glyphicon-sort-by-attributes:before { content: "\e155"; } +.glyphicon-sort-by-attributes-alt:before { content: "\e156"; } +.glyphicon-unchecked:before { content: "\e157"; } +.glyphicon-expand:before { content: "\e158"; } +.glyphicon-collapse:before { content: "\e159"; } +.glyphicon-collapse-top:before { content: "\e160"; } diff --git a/src/less/bootstrap/grid.less b/src/less/bootstrap/grid.less new file mode 100644 index 0000000..12803f3 --- /dev/null +++ b/src/less/bootstrap/grid.less @@ -0,0 +1,204 @@ +// +// Grid system +// -------------------------------------------------- + +// Set the container width, and override it for fixed navbars in media queries +.container { + .container-fixed(); +} + +// Mobile-first defaults +.row { + .make-row(); +} + +// Common styles for small and large grid columns +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12, +.col-sm-1, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-lg-1, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-10, +.col-lg-11, +.col-lg-12 { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); +} + + + +// +// Container and grid column sizing +// + +// Tiny device columns (smartphones) +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + float: left; +} +.col-1 { width: percentage((1 / @grid-columns)); } +.col-2 { width: percentage((2 / @grid-columns)); } +.col-3 { width: percentage((3 / @grid-columns)); } +.col-4 { width: percentage((4 / @grid-columns)); } +.col-5 { width: percentage((5 / @grid-columns)); } +.col-6 { width: percentage((6 / @grid-columns)); } +.col-7 { width: percentage((7 / @grid-columns)); } +.col-8 { width: percentage((8 / @grid-columns)); } +.col-9 { width: percentage((9 / @grid-columns)); } +.col-10 { width: percentage((10/ @grid-columns)); } +.col-11 { width: percentage((11/ @grid-columns)); } +.col-12 { width: 100%; } + +// Small device columns (phones to tablets) +@media (min-width: @screen-tablet) { + .container { + max-width: @container-tablet; + } + + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { + float: left; + } + .col-sm-1 { width: percentage((1 / @grid-columns)); } + .col-sm-2 { width: percentage((2 / @grid-columns)); } + .col-sm-3 { width: percentage((3 / @grid-columns)); } + .col-sm-4 { width: percentage((4 / @grid-columns)); } + .col-sm-5 { width: percentage((5 / @grid-columns)); } + .col-sm-6 { width: percentage((6 / @grid-columns)); } + .col-sm-7 { width: percentage((7 / @grid-columns)); } + .col-sm-8 { width: percentage((8 / @grid-columns)); } + .col-sm-9 { width: percentage((9 / @grid-columns)); } + .col-sm-10 { width: percentage((10/ @grid-columns)); } + .col-sm-11 { width: percentage((11/ @grid-columns)); } + .col-sm-12 { width: 100%; } + + // Push and pull columns for source order changes + .col-push-1 { left: percentage((1 / @grid-columns)); } + .col-push-2 { left: percentage((2 / @grid-columns)); } + .col-push-3 { left: percentage((3 / @grid-columns)); } + .col-push-4 { left: percentage((4 / @grid-columns)); } + .col-push-5 { left: percentage((5 / @grid-columns)); } + .col-push-6 { left: percentage((6 / @grid-columns)); } + .col-push-7 { left: percentage((7 / @grid-columns)); } + .col-push-8 { left: percentage((8 / @grid-columns)); } + .col-push-9 { left: percentage((9 / @grid-columns)); } + .col-push-10 { left: percentage((10/ @grid-columns)); } + .col-push-11 { left: percentage((11/ @grid-columns)); } + + .col-pull-1 { right: percentage((1 / @grid-columns)); } + .col-pull-2 { right: percentage((2 / @grid-columns)); } + .col-pull-3 { right: percentage((3 / @grid-columns)); } + .col-pull-4 { right: percentage((4 / @grid-columns)); } + .col-pull-5 { right: percentage((5 / @grid-columns)); } + .col-pull-6 { right: percentage((6 / @grid-columns)); } + .col-pull-7 { right: percentage((7 / @grid-columns)); } + .col-pull-8 { right: percentage((8 / @grid-columns)); } + .col-pull-9 { right: percentage((9 / @grid-columns)); } + .col-pull-10 { right: percentage((10/ @grid-columns)); } + .col-pull-11 { right: percentage((11/ @grid-columns)); } +} + +// Medium and large device columns (desktop and up) +@media (min-width: @screen-desktop) { + .container { + max-width: @container-desktop; + } + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { + float: left; + } + .col-lg-1 { width: percentage((1 / @grid-columns)); } + .col-lg-2 { width: percentage((2 / @grid-columns)); } + .col-lg-3 { width: percentage((3 / @grid-columns)); } + .col-lg-4 { width: percentage((4 / @grid-columns)); } + .col-lg-5 { width: percentage((5 / @grid-columns)); } + .col-lg-6 { width: percentage((6 / @grid-columns)); } + .col-lg-7 { width: percentage((7 / @grid-columns)); } + .col-lg-8 { width: percentage((8 / @grid-columns)); } + .col-lg-9 { width: percentage((9 / @grid-columns)); } + .col-lg-10 { width: percentage((10/ @grid-columns)); } + .col-lg-11 { width: percentage((11/ @grid-columns)); } + .col-lg-12 { width: 100%; } + + // Offsets + .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } +} + +// Large desktops and up +@media (min-width: @screen-large-desktop) { + .container { + max-width: @container-large-desktop; + } +} diff --git a/src/less/bootstrap/jumbotron.less b/src/less/bootstrap/jumbotron.less new file mode 100644 index 0000000..39bec9b --- /dev/null +++ b/src/less/bootstrap/jumbotron.less @@ -0,0 +1,32 @@ +// +// Jumbotron +// -------------------------------------------------- + + +.jumbotron { + padding: 30px; + margin-bottom: 30px; + font-size: (@font-size-base * 1.5); + font-weight: 200; + line-height: (@line-height-base * 1.5); + color: @jumbotron-lead-color; + background-color: @jumbotron-bg; + h1 { + line-height: 1; + color: @jumbotron-heading-color; + } + p { + line-height: 1.4; + } +} + +@media screen and (min-width: @screen-tablet) { + .jumbotron { + padding: 50px 60px; + border-radius: @border-radius-large; // Only round corners at higher resolutions + + h1 { + font-size: (@font-size-base * 4.5); + } + } +} diff --git a/src/less/bootstrap/labels.less b/src/less/bootstrap/labels.less new file mode 100644 index 0000000..92fe8f8 --- /dev/null +++ b/src/less/bootstrap/labels.less @@ -0,0 +1,70 @@ +// +// Labels +// -------------------------------------------------- + +.label { + display: inline; + padding: .25em .6em; + font-size: 75%; + font-weight: 500; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: middle; + background-color: @gray-light; + border-radius: .25em; + + // Add hover effects, but only for links + &[href] { + &:hover, + &:focus { + color: #fff; + text-decoration: none; + cursor: pointer; + background-color: darken(@gray-light, 10%); + } + } +} + +// Colors +// Contextual variations (linked labels get darker on :hover) +.label-danger { + background-color: @label-danger-bg; + &[href] { + &:hover, + &:focus { + background-color: darken(@label-danger-bg, 10%); + } + } +} + +.label-success { + background-color: @label-success-bg; + &[href] { + &:hover, + &:focus { + background-color: darken(@label-success-bg, 10%); + } + } +} + +.label-warning { + background-color: @label-warning-bg; + &[href] { + &:hover, + &:focus { + background-color: darken(@label-warning-bg, 10%); + } + } +} + +.label-info { + background-color: @label-info-bg; + &[href] { + &:hover, + &:focus { + background-color: darken(@label-info-bg, 10%); + } + } +} \ No newline at end of file diff --git a/src/less/bootstrap/list-group.less b/src/less/bootstrap/list-group.less new file mode 100644 index 0000000..f9d9f61 --- /dev/null +++ b/src/less/bootstrap/list-group.less @@ -0,0 +1,94 @@ +// +// List groups +// -------------------------------------------------- + +// Base class +// +// Easily usable on