diff --git a/_builder/csv/direction.csv b/_builder/csv/direction.csv index fdcaafb..a41eb6d 100644 --- a/_builder/csv/direction.csv +++ b/_builder/csv/direction.csv @@ -1,8 +1,8 @@ +direction-up, f058 +direction-up-right, f057 +direction-right, f04d +direction-down-right, f088 direction-down, f044 direction-down-left, f043 -direction-down-right, f088 direction-left, f048 -direction-right, f04d -direction-up, f058 -direction-up-left, f087 -direction-up-right, f057 \ No newline at end of file +direction-up-left, f087 \ No newline at end of file diff --git a/_builder/csv/moon.csv b/_builder/csv/moon.csv index 0ab9e27..3fe4cf5 100644 --- a/_builder/csv/moon.csv +++ b/_builder/csv/moon.csv @@ -1,17 +1,4 @@ -moon-full, f0a3 moon-new, f095 -moon-waning-crescent-1, f0ab -moon-waning-crescent-2, f0ac -moon-waning-crescent-3, f0ad -moon-waning-crescent-4, f0ae -moon-waning-crescent-5, f0af -moon-waning-crescent-6, f0b0 -moon-waning-gibbous-1, f0a4 -moon-waning-gibbous-2, f0a5 -moon-waning-gibbous-3, f0a6 -moon-waning-gibbous-4, f0a7 -moon-waning-gibbous-5, f0a8 -moon-waning-gibbous-6, f0a9 moon-waxing-cresent-1, f096 moon-waxing-cresent-2, f097 moon-waxing-cresent-3, f098 @@ -23,4 +10,17 @@ moon-waxing-gibbous-2, f09e moon-waxing-gibbous-3, f09f moon-waxing-gibbous-4, f0a0 moon-waxing-gibbous-5, f0a1 -moon-waxing-gibbous-6, f0a2 \ No newline at end of file +moon-waxing-gibbous-6, f0a2 +moon-full, f0a3 +moon-waning-gibbous-1, f0a4 +moon-waning-gibbous-2, f0a5 +moon-waning-gibbous-3, f0a6 +moon-waning-gibbous-4, f0a7 +moon-waning-gibbous-5, f0a8 +moon-waning-gibbous-6, f0a9 +moon-waning-crescent-1, f0ab +moon-waning-crescent-2, f0ac +moon-waning-crescent-3, f0ad +moon-waning-crescent-4, f0ae +moon-waning-crescent-5, f0af +moon-waning-crescent-6, f0b0 \ No newline at end of file diff --git a/_builder/csv/temp.csv b/_builder/csv/temp.csv new file mode 100644 index 0000000..3a7b42f --- /dev/null +++ b/_builder/csv/temp.csv @@ -0,0 +1,110 @@ +_reserved_, f049 +alien, f075 +celsius, f03c +cloud, f041 +cloud-down, f03d +cloud-refresh, f03e +cloud-up, f040 +cloudy, f013 +cloudy-gusts, f011 +cloudy-windy, f012 +day-cloudy, f002 +day-cloudy-gusts, f000 +day-cloudy-windy, f001 +day-fog, f003 +day-hail, f004 +day-haze, f0b6 +day-lightning, f005 +day-rain, f008 +day-rain-mix, f006 +day-rain-wind, f007 +day-showers, f009 +day-sleet, f0b2 +day-sleet-storm, f068 +day-snow, f00a +day-snow-thunderstorm, f06b +day-snow-wind, f065 +day-sprinkle, f00b +day-storm-showers, f00e +day-sunny, f00d +day-sunny-overcast, f00c +day-thunderstorm, f010 +day-windy, f085 +degrees, f042 +dust, f063 +fahrenheit, f045 +fog, f014 +hail, f015 +horizon, f047 +horizon-alt, f046 +hot, f072 +hurricane, f073 +lightning, f016 +lunar-eclipse, f070 +meteor, f071 +moon-3rd-quarter, f0aa +moon-first-quarter, f09c +night-alt-cloudy, f086 +night-alt-cloudy-gusts, f022 +night-alt-cloudy-windy, f023 +night-alt-hail, f024 +night-alt-lightning, f025 +night-alt-rain, f028 +night-alt-rain-mix, f026 +night-alt-rain-wind, f027 +night-alt-showers, f029 +night-alt-sleet, f0b4 +night-alt-sleet-storm, f06a +night-alt-snow, f02a +night-alt-snow-thunderstorm, f06d +night-alt-snow-wind, f067 +night-alt-sprinkle, f02b +night-alt-storm-showers, f02c +night-alt-thunderstorm, f02d +night-clear, f02e +night-cloudy, f031 +night-cloudy-gusts, f02f +night-cloudy-windy, f030 +night-fog, f04a +night-hail, f032 +night-lightning, f033 +night-partly-cloudy, f083 +night-rain, f036 +night-rain-mix, f034 +night-rain-wind, f035 +night-showers, f037 +night-sleet, f0b3 +night-sleet-storm, f069 +night-snow, f038 +night-snow-thunderstorm, f06c +night-snow-wind, f066 +night-sprinkle, f039 +night-storm-showers, f03a +night-thunderstorm, f03b +rain, f019 +rain-mix, f017 +rain-wind, f018 +refresh, f04c +refresh-alt, f04b +showers, f01a +sleet, f0b5 +smog, f074 +smoke, f062 +snow, f01b +snow-wind, f064 +snowflake-cold, f076 +solar-eclipse, f06e +sprinkle, f01c +sprinkles, f04e +stars, f077 +storm-showers, f01d +strong-wind, f050 +sunrise, f051 +sunset, f052 +thermometer, f055 +thermometer-exterior, f053 +thermometer-internal, f054 +thunderstorm, f01e +tornado, f056 +umbrella, f084 +windy, f021; \ No newline at end of file diff --git a/_builder/csv/time.csv b/_builder/csv/time.csv index cfde5d9..dab5012 100644 --- a/_builder/csv/time.csv +++ b/_builder/csv/time.csv @@ -1,7 +1,4 @@ time-1, f08a -time-10, f093 -time-11, f094 -time-12, f089 time-2, f08b time-3, f08c time-4, f08d @@ -9,4 +6,7 @@ time-5, f08e time-6, f08f time-7, f090 time-8, f091 -time-9, f092 \ No newline at end of file +time-9, f092 +time-10, f093 +time-11, f094 +time-12, f089 \ No newline at end of file diff --git a/_docs/css/styles.css b/_docs/css/styles.css index 325c890..db1b34f 100644 --- a/_docs/css/styles.css +++ b/_docs/css/styles.css @@ -1,13 +1,17 @@ /*! - * 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. + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; +} article, aside, details, @@ -17,6 +21,7 @@ footer, header, hgroup, main, +menu, nav, section, summary { @@ -24,35 +29,26 @@ summary { } audio, canvas, +progress, video { display: inline-block; + vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } -[hidden] { +[hidden], +template { display: none; } -html { - font-family: sans-serif; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -body { - margin: 0; -} -a:focus { - outline: thin dotted; +a { + background-color: transparent; } a:active, a:hover { outline: 0; } -h1 { - font-size: 2em; - margin: 0.67em 0; -} abbr[title] { border-bottom: 1px dotted; } @@ -63,28 +59,14 @@ strong { dfn { font-style: italic; } -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; +h1 { + font-size: 2em; + margin: 0.67em 0; } mark { background: #ff0; color: #000; } -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} -pre { - white-space: pre-wrap; -} -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} small { font-size: 80%; } @@ -108,28 +90,33 @@ svg:not(:root) { overflow: hidden; } figure { - margin: 0; + margin: 1em 40px; } -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; +hr { + box-sizing: content-box; + height: 0; } -legend { - border: 0; - padding: 0; +pre { + overflow: auto; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } button, input, +optgroup, select, textarea { - font-family: inherit; - font-size: 100%; + color: inherit; + font: inherit; margin: 0; } -button, -input { - line-height: normal; +button { + overflow: visible; } button, select { @@ -146,40 +133,63 @@ button[disabled], html input[disabled] { cursor: default; } +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +input { + line-height: normal; +} input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} input[type="search"] { -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -button::-moz-focus-inner, -input::-moz-focus-inner { +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { border: 0; padding: 0; } textarea { overflow: auto; - vertical-align: top; +} +optgroup { + font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } +td, +th { + padding: 0; +} +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ @media print { - * { - text-shadow: none !important; - color: #000 !important; + *, + *:before, + *:after { background: transparent !important; + color: #000 !important; box-shadow: none !important; + text-shadow: none !important; } a, a:visited { @@ -191,9 +201,8 @@ table { abbr[title]:after { content: " (" attr(title) ")"; } - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { + a[href^="#"]:after, + a[href^="javascript:"]:after { content: ""; } pre, @@ -211,9 +220,6 @@ table { img { max-width: 100% !important; } - @page { - margin: 2cm .5cm; - } p, h2, h3 { @@ -227,10 +233,6 @@ table { .navbar { display: none; } - .table td, - .table th { - background-color: #fff !important; - } .btn > .caret, .dropup > .btn > .caret { border-top-color: #000 !important; @@ -238,14 +240,834 @@ table { .label { border: 1px solid #000; } + .table { + border-collapse: collapse !important; + } + .table td, + .table th { + background-color: #fff !important; + } + .table-bordered th, + .table-bordered td { + border: 1px solid #ddd !important; + } +} +@font-face { + font-family: 'Glyphicons Halflings'; + src: url('../fonts/glyphicons-halflings-regular.eot'); + src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} +.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; + -moz-osx-font-smoothing: grayscale; +} +.glyphicon-asterisk:before { + content: "\002a"; +} +.glyphicon-plus:before { + content: "\002b"; +} +.glyphicon-euro:before, +.glyphicon-eur: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-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-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-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-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-cd:before { + content: "\e201"; +} +.glyphicon-save-file:before { + content: "\e202"; +} +.glyphicon-open-file:before { + content: "\e203"; +} +.glyphicon-level-up:before { + content: "\e204"; +} +.glyphicon-copy:before { + content: "\e205"; +} +.glyphicon-paste:before { + content: "\e206"; +} +.glyphicon-alert:before { + content: "\e209"; +} +.glyphicon-equalizer:before { + content: "\e210"; +} +.glyphicon-king:before { + content: "\e211"; +} +.glyphicon-queen:before { + content: "\e212"; +} +.glyphicon-pawn:before { + content: "\e213"; +} +.glyphicon-bishop:before { + content: "\e214"; +} +.glyphicon-knight:before { + content: "\e215"; +} +.glyphicon-baby-formula:before { + content: "\e216"; +} +.glyphicon-tent:before { + content: "\26fa"; +} +.glyphicon-blackboard:before { + content: "\e218"; +} +.glyphicon-bed:before { + content: "\e219"; +} +.glyphicon-apple:before { + content: "\f8ff"; +} +.glyphicon-erase:before { + content: "\e221"; +} +.glyphicon-hourglass:before { + content: "\231b"; +} +.glyphicon-lamp:before { + content: "\e223"; +} +.glyphicon-duplicate:before { + content: "\e224"; +} +.glyphicon-piggy-bank:before { + content: "\e225"; +} +.glyphicon-scissors:before { + content: "\e226"; +} +.glyphicon-bitcoin:before { + content: "\e227"; +} +.glyphicon-btc:before { + content: "\e227"; +} +.glyphicon-xbt:before { + content: "\e227"; +} +.glyphicon-yen:before { + content: "\00a5"; +} +.glyphicon-jpy:before { + content: "\00a5"; +} +.glyphicon-ruble:before { + content: "\20bd"; +} +.glyphicon-rub:before { + content: "\20bd"; +} +.glyphicon-scale:before { + content: "\e230"; +} +.glyphicon-ice-lolly:before { + content: "\e231"; +} +.glyphicon-ice-lolly-tasted:before { + content: "\e232"; +} +.glyphicon-education:before { + content: "\e233"; +} +.glyphicon-option-horizontal:before { + content: "\e234"; +} +.glyphicon-option-vertical:before { + content: "\e235"; +} +.glyphicon-menu-hamburger:before { + content: "\e236"; +} +.glyphicon-modal-window:before { + content: "\e237"; +} +.glyphicon-oil:before { + content: "\e238"; +} +.glyphicon-grain:before { + content: "\e239"; +} +.glyphicon-sunglasses:before { + content: "\e240"; +} +.glyphicon-text-size:before { + content: "\e241"; +} +.glyphicon-text-color:before { + content: "\e242"; +} +.glyphicon-text-background:before { + content: "\e243"; +} +.glyphicon-object-align-top:before { + content: "\e244"; +} +.glyphicon-object-align-bottom:before { + content: "\e245"; +} +.glyphicon-object-align-horizontal:before { + content: "\e246"; +} +.glyphicon-object-align-left:before { + content: "\e247"; +} +.glyphicon-object-align-vertical:before { + content: "\e248"; +} +.glyphicon-object-align-right:before { + content: "\e249"; +} +.glyphicon-triangle-right:before { + content: "\e250"; +} +.glyphicon-triangle-left:before { + content: "\e251"; +} +.glyphicon-triangle-bottom:before { + content: "\e252"; +} +.glyphicon-triangle-top:before { + content: "\e253"; +} +.glyphicon-console:before { + content: "\e254"; +} +.glyphicon-superscript:before { + content: "\e255"; +} +.glyphicon-subscript:before { + content: "\e256"; +} +.glyphicon-menu-left:before { + content: "\e257"; +} +.glyphicon-menu-right:before { + content: "\e258"; +} +.glyphicon-menu-down:before { + content: "\e259"; +} +.glyphicon-menu-up:before { + content: "\e260"; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} html { - font-size: 62.5%; + font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { @@ -264,81 +1086,80 @@ textarea { line-height: inherit; } a { - color: #428bca; + color: #337ab7; text-decoration: none; } a:hover, a:focus { - color: #2a6496; + color: #23527c; text-decoration: underline; } a:focus { - outline: thin dotted #333; + outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } +figure { + margin: 0; +} img { + vertical-align: middle; +} +.img-responsive, +.thumbnail > img, +.thumbnail a > img, +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: block; max-width: 100%; height: auto; - vertical-align: middle; } .img-rounded { border-radius: 6px; } +.img-thumbnail { + padding: 4px; + line-height: 1.42857143; + background-color: #ffffff; + border: 1px solid #dddddd; + border-radius: 4px; + -webkit-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + display: inline-block; + max-width: 100%; + height: auto; +} .img-circle { - border-radius: 500px; + border-radius: 50%; } -p { - margin: 0 0 10px; -} -.lead { +hr { + margin-top: 20px; margin-bottom: 20px; - font-size: 21px; - font-weight: 200; - line-height: 1.4; + border: 0; + border-top: 1px solid #eeeeee; } -small { - font-size: 85%; +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; } -cite { - font-style: normal; +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; } -.text-muted { - color: #999999; -} -a.text-muted:hover, -a.text-muted:focus { - color: #808080; -} -.text-warning { - color: #c09853; -} -a.text-warning:hover, -a.text-warning:focus { - color: #a47e3c; -} -.text-danger { - color: #b94a48; -} -a.text-danger:hover, -a.text-danger:focus { - color: #953b39; -} -.text-success { - color: #468847; -} -a.text-success:hover, -a.text-success:focus { - color: #356635; -} -.text-left { - text-align: left; -} -.text-right { - text-align: right; -} -.text-center { - text-align: center; +[role="button"] { + cursor: pointer; } h1, h2, @@ -352,9 +1173,10 @@ h6, .h4, .h5, .h6 { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: inherit; font-weight: 500; line-height: 1.1; + color: inherit; } h1 small, h2 small, @@ -367,30 +1189,76 @@ h6 small, .h3 small, .h4 small, .h5 small, -.h6 small { +.h6 small, +h1 .small, +h2 .small, +h3 .small, +h4 .small, +h5 .small, +h6 .small, +.h1 .small, +.h2 .small, +.h3 .small, +.h4 .small, +.h5 .small, +.h6 .small { font-weight: normal; line-height: 1; - color: #999999; + color: #777777; } h1, +.h1, h2, -h3 { +.h2, +h3, +.h3 { margin-top: 20px; margin-bottom: 10px; } +h1 small, +.h1 small, +h2 small, +.h2 small, +h3 small, +.h3 small, +h1 .small, +.h1 .small, +h2 .small, +.h2 .small, +h3 .small, +.h3 .small { + font-size: 65%; +} h4, +.h4, h5, -h6 { +.h5, +h6, +.h6 { margin-top: 10px; margin-bottom: 10px; } +h4 small, +.h4 small, +h5 small, +.h5 small, +h6 small, +.h6 small, +h4 .small, +.h4 .small, +h5 .small, +.h5 .small, +h6 .small, +.h6 .small { + font-size: 75%; +} h1, .h1 { - font-size: 38px; + font-size: 36px; } h2, .h2 { - font-size: 32px; + font-size: 30px; } h3, .h3 { @@ -408,19 +1276,126 @@ h6, .h6 { font-size: 12px; } -h1 small, -.h1 small { - font-size: 24px; +p { + margin: 0 0 10px; } -h2 small, -.h2 small { - font-size: 18px; +.lead { + margin-bottom: 20px; + font-size: 16px; + font-weight: 300; + line-height: 1.4; } -h3 small, -.h3 small, -h4 small, -.h4 small { - font-size: 14px; +@media (min-width: 768px) { + .lead { + font-size: 21px; + } +} +small, +.small { + font-size: 85%; +} +mark, +.mark { + background-color: #fcf8e3; + padding: .2em; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} +.text-nowrap { + white-space: nowrap; +} +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} +.text-muted { + color: #777777; +} +.text-primary { + color: #337ab7; +} +a.text-primary:hover, +a.text-primary:focus { + color: #286090; +} +.text-success { + color: #3c763d; +} +a.text-success:hover, +a.text-success:focus { + color: #2b542c; +} +.text-info { + color: #31708f; +} +a.text-info:hover, +a.text-info:focus { + color: #245269; +} +.text-warning { + color: #8a6d3b; +} +a.text-warning:hover, +a.text-warning:focus { + color: #66512c; +} +.text-danger { + color: #a94442; +} +a.text-danger:hover, +a.text-danger:focus { + color: #843534; +} +.bg-primary { + color: #fff; + background-color: #337ab7; +} +a.bg-primary:hover, +a.bg-primary:focus { + background-color: #286090; +} +.bg-success { + background-color: #dff0d8; +} +a.bg-success:hover, +a.bg-success:focus { + background-color: #c1e2b3; +} +.bg-info { + background-color: #d9edf7; +} +a.bg-info:hover, +a.bg-info:focus { + background-color: #afd9ee; +} +.bg-warning { + background-color: #fcf8e3; +} +a.bg-warning:hover, +a.bg-warning:focus { + background-color: #f7ecb5; +} +.bg-danger { + background-color: #f2dede; +} +a.bg-danger:hover, +a.bg-danger:focus { + background-color: #e4b9b9; } .page-header { padding-bottom: 9px; @@ -433,9 +1408,9 @@ ol { margin-bottom: 10px; } ul ul, +ol ul, ul ol, -ol ol, -ol ul { +ol ol { margin-bottom: 0; } .list-unstyled { @@ -445,6 +1420,7 @@ ol ul { .list-inline { padding-left: 0; list-style: none; + margin-left: -5px; } .list-inline > li { display: inline-block; @@ -452,6 +1428,7 @@ ol ul { padding-right: 5px; } dl { + margin-top: 0; margin-bottom: 20px; } dt, @@ -462,120 +1439,110 @@ dt { font-weight: bold; } dd { - margin-left: 10px; + margin-left: 0; } -.dl-horizontal dt { - float: left; - width: 160px; - clear: left; - text-align: right; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.dl-horizontal dd { - margin-left: 180px; -} -.dl-horizontal dd:before, -.dl-horizontal dd:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ -} -.dl-horizontal dd:after { - clear: both; -} -.dl-horizontal dd:before, -.dl-horizontal dd:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ -} -.dl-horizontal dd:after { - clear: both; -} -hr { - margin: 20px 0; - border: 0; - border-top: 1px solid #eeeeee; - border-bottom: 1px solid #fff; - border-bottom: 1px solid rgba(255, 255, 255, 0.5); +@media (min-width: 768px) { + .dl-horizontal dt { + float: left; + width: 160px; + clear: left; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .dl-horizontal dd { + margin-left: 180px; + } } abbr[title], abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted #999999; + border-bottom: 1px dotted #777777; } -abbr.initialism { +.initialism { font-size: 90%; text-transform: uppercase; } blockquote { padding: 10px 20px; margin: 0 0 20px; + font-size: 17.5px; border-left: 5px solid #eeeeee; } -blockquote p { - font-size: 17.5px; - font-weight: 300; - line-height: 1.25; -} -blockquote p:last-child { +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { margin-bottom: 0; } -blockquote small { +blockquote footer, +blockquote small, +blockquote .small { display: block; + font-size: 80%; line-height: 1.42857143; - color: #999999; + color: #777777; } -blockquote small:before { +blockquote footer:before, +blockquote small:before, +blockquote .small:before { content: '\2014 \00A0'; } +.blockquote-reverse, blockquote.pull-right { - float: right; padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0; -} -blockquote.pull-right p, -blockquote.pull-right small { text-align: right; } -blockquote.pull-right small:before { +.blockquote-reverse footer:before, +blockquote.pull-right footer:before, +.blockquote-reverse small:before, +blockquote.pull-right small:before, +.blockquote-reverse .small:before, +blockquote.pull-right .small:before { content: ''; } -blockquote.pull-right small:after { +.blockquote-reverse footer:after, +blockquote.pull-right footer:after, +.blockquote-reverse small:after, +blockquote.pull-right small:after, +.blockquote-reverse .small:after, +blockquote.pull-right .small:after { content: '\00A0 \2014'; } -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; -} address { - display: block; margin-bottom: 20px; font-style: normal; line-height: 1.42857143; } code, -pre { - padding: 0 3px 2px; - font-family: Monaco, Menlo, Consolas, "Courier New", monospace; - font-size: 12px; - color: #333333; - border-radius: 4px; +kbd, +pre, +samp { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; - white-space: nowrap; + border-radius: 4px; +} +kbd { + padding: 2px 4px; + font-size: 90%; + color: #ffffff; + background-color: #333333; + border-radius: 3px; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); +} +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + box-shadow: none; } pre { display: block; @@ -585,23 +1552,18 @@ pre { line-height: 1.42857143; word-break: break-all; word-wrap: break-word; - white-space: pre; - white-space: pre-wrap; + color: #333333; background-color: #f5f5f5; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid #cccccc; border-radius: 4px; } -pre.prettyprint { - margin-bottom: 20px; -} pre code { padding: 0; + font-size: inherit; color: inherit; - white-space: pre; white-space: pre-wrap; background-color: transparent; - border: 0; + border-radius: 0; } .pre-scrollable { max-height: 340px; @@ -610,377 +1572,4969 @@ pre code { .container { margin-right: auto; margin-left: auto; -} -.container:before, -.container:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ -} -.container:after { - clear: both; -} -.container:before, -.container:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ -} -.container:after { - clear: both; -} -.row:before, -.row:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ -} -.row:after { - clear: both; -} -.row:before, -.row:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ -} -.row:after { - clear: both; + padding-left: 15px; + padding-right: 15px; } @media (min-width: 768px) { - .row { - margin-left: -15px; - margin-right: -15px; + .container { + width: 750px; } } -.row .row { +@media (min-width: 992px) { + .container { + width: 970px; + } +} +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} +.container-fluid { + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; +} +.row { margin-left: -15px; margin-right: -15px; } -.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 { +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } -.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-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } -.col-1 { - width: 8.33333333%; -} -.col-2 { - width: 16.66666667%; -} -.col-3 { - width: 25%; -} -.col-4 { - width: 33.33333333%; -} -.col-5 { - width: 41.66666667%; -} -.col-6 { - width: 50%; -} -.col-7 { - width: 58.33333333%; -} -.col-8 { - width: 66.66666667%; -} -.col-9 { - width: 75%; -} -.col-10 { - width: 83.33333333%; -} -.col-11 { - width: 91.66666667%; -} -.col-12 { +.col-xs-12 { width: 100%; } +.col-xs-11 { + width: 91.66666667%; +} +.col-xs-10 { + width: 83.33333333%; +} +.col-xs-9 { + width: 75%; +} +.col-xs-8 { + width: 66.66666667%; +} +.col-xs-7 { + width: 58.33333333%; +} +.col-xs-6 { + width: 50%; +} +.col-xs-5 { + width: 41.66666667%; +} +.col-xs-4 { + width: 33.33333333%; +} +.col-xs-3 { + width: 25%; +} +.col-xs-2 { + width: 16.66666667%; +} +.col-xs-1 { + width: 8.33333333%; +} +.col-xs-pull-12 { + right: 100%; +} +.col-xs-pull-11 { + right: 91.66666667%; +} +.col-xs-pull-10 { + right: 83.33333333%; +} +.col-xs-pull-9 { + right: 75%; +} +.col-xs-pull-8 { + right: 66.66666667%; +} +.col-xs-pull-7 { + right: 58.33333333%; +} +.col-xs-pull-6 { + right: 50%; +} +.col-xs-pull-5 { + right: 41.66666667%; +} +.col-xs-pull-4 { + right: 33.33333333%; +} +.col-xs-pull-3 { + right: 25%; +} +.col-xs-pull-2 { + right: 16.66666667%; +} +.col-xs-pull-1 { + right: 8.33333333%; +} +.col-xs-pull-0 { + right: auto; +} +.col-xs-push-12 { + left: 100%; +} +.col-xs-push-11 { + left: 91.66666667%; +} +.col-xs-push-10 { + left: 83.33333333%; +} +.col-xs-push-9 { + left: 75%; +} +.col-xs-push-8 { + left: 66.66666667%; +} +.col-xs-push-7 { + left: 58.33333333%; +} +.col-xs-push-6 { + left: 50%; +} +.col-xs-push-5 { + left: 41.66666667%; +} +.col-xs-push-4 { + left: 33.33333333%; +} +.col-xs-push-3 { + left: 25%; +} +.col-xs-push-2 { + left: 16.66666667%; +} +.col-xs-push-1 { + left: 8.33333333%; +} +.col-xs-push-0 { + left: auto; +} +.col-xs-offset-12 { + margin-left: 100%; +} +.col-xs-offset-11 { + margin-left: 91.66666667%; +} +.col-xs-offset-10 { + margin-left: 83.33333333%; +} +.col-xs-offset-9 { + margin-left: 75%; +} +.col-xs-offset-8 { + margin-left: 66.66666667%; +} +.col-xs-offset-7 { + margin-left: 58.33333333%; +} +.col-xs-offset-6 { + margin-left: 50%; +} +.col-xs-offset-5 { + margin-left: 41.66666667%; +} +.col-xs-offset-4 { + margin-left: 33.33333333%; +} +.col-xs-offset-3 { + margin-left: 25%; +} +.col-xs-offset-2 { + margin-left: 16.66666667%; +} +.col-xs-offset-1 { + margin-left: 8.33333333%; +} +.col-xs-offset-0 { + margin-left: 0%; +} @media (min-width: 768px) { - .container { - max-width: 728px; - } - .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-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: 8.33333333%; - } - .col-sm-2 { - width: 16.66666667%; - } - .col-sm-3 { - width: 25%; - } - .col-sm-4 { - width: 33.33333333%; - } - .col-sm-5 { - width: 41.66666667%; - } - .col-sm-6 { - width: 50%; - } - .col-sm-7 { - width: 58.33333333%; - } - .col-sm-8 { - width: 66.66666667%; - } - .col-sm-9 { - width: 75%; - } - .col-sm-10 { - width: 83.33333333%; + .col-sm-12 { + width: 100%; } .col-sm-11 { width: 91.66666667%; } - .col-sm-12 { - width: 100%; + .col-sm-10 { + width: 83.33333333%; } - .col-push-1 { - left: 8.33333333%; + .col-sm-9 { + width: 75%; } - .col-push-2 { - left: 16.66666667%; + .col-sm-8 { + width: 66.66666667%; } - .col-push-3 { - left: 25%; + .col-sm-7 { + width: 58.33333333%; } - .col-push-4 { - left: 33.33333333%; + .col-sm-6 { + width: 50%; } - .col-push-5 { - left: 41.66666667%; + .col-sm-5 { + width: 41.66666667%; } - .col-push-6 { - left: 50%; + .col-sm-4 { + width: 33.33333333%; } - .col-push-7 { - left: 58.33333333%; + .col-sm-3 { + width: 25%; } - .col-push-8 { - left: 66.66666667%; + .col-sm-2 { + width: 16.66666667%; } - .col-push-9 { - left: 75%; + .col-sm-1 { + width: 8.33333333%; } - .col-push-10 { - left: 83.33333333%; + .col-sm-pull-12 { + right: 100%; } - .col-push-11 { - left: 91.66666667%; + .col-sm-pull-11 { + right: 91.66666667%; } - .col-pull-1 { - right: 8.33333333%; - } - .col-pull-2 { - right: 16.66666667%; - } - .col-pull-3 { - right: 25%; - } - .col-pull-4 { - right: 33.33333333%; - } - .col-pull-5 { - right: 41.66666667%; - } - .col-pull-6 { - right: 50%; - } - .col-pull-7 { - right: 58.33333333%; - } - .col-pull-8 { - right: 66.66666667%; - } - .col-pull-9 { - right: 75%; - } - .col-pull-10 { + .col-sm-pull-10 { right: 83.33333333%; } - .col-pull-11 { - right: 91.66666667%; + .col-sm-pull-9 { + right: 75%; + } + .col-sm-pull-8 { + right: 66.66666667%; + } + .col-sm-pull-7 { + right: 58.33333333%; + } + .col-sm-pull-6 { + right: 50%; + } + .col-sm-pull-5 { + right: 41.66666667%; + } + .col-sm-pull-4 { + right: 33.33333333%; + } + .col-sm-pull-3 { + right: 25%; + } + .col-sm-pull-2 { + right: 16.66666667%; + } + .col-sm-pull-1 { + right: 8.33333333%; + } + .col-sm-pull-0 { + right: auto; + } + .col-sm-push-12 { + left: 100%; + } + .col-sm-push-11 { + left: 91.66666667%; + } + .col-sm-push-10 { + left: 83.33333333%; + } + .col-sm-push-9 { + left: 75%; + } + .col-sm-push-8 { + left: 66.66666667%; + } + .col-sm-push-7 { + left: 58.33333333%; + } + .col-sm-push-6 { + left: 50%; + } + .col-sm-push-5 { + left: 41.66666667%; + } + .col-sm-push-4 { + left: 33.33333333%; + } + .col-sm-push-3 { + left: 25%; + } + .col-sm-push-2 { + left: 16.66666667%; + } + .col-sm-push-1 { + left: 8.33333333%; + } + .col-sm-push-0 { + left: auto; + } + .col-sm-offset-12 { + margin-left: 100%; + } + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + .col-sm-offset-9 { + margin-left: 75%; + } + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + .col-sm-offset-6 { + margin-left: 50%; + } + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + .col-sm-offset-3 { + margin-left: 25%; + } + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + .col-sm-offset-0 { + margin-left: 0%; } } @media (min-width: 992px) { - .container { - max-width: 940px; - } - .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 { + .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } - .col-lg-1 { - width: 8.33333333%; + .col-md-12 { + width: 100%; } - .col-lg-2 { - width: 16.66666667%; + .col-md-11 { + width: 91.66666667%; } - .col-lg-3 { - width: 25%; + .col-md-10 { + width: 83.33333333%; } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-9 { + .col-md-9 { width: 75%; } - .col-lg-10 { - width: 83.33333333%; + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-pull-12 { + right: 100%; + } + .col-md-pull-11 { + right: 91.66666667%; + } + .col-md-pull-10 { + right: 83.33333333%; + } + .col-md-pull-9 { + right: 75%; + } + .col-md-pull-8 { + right: 66.66666667%; + } + .col-md-pull-7 { + right: 58.33333333%; + } + .col-md-pull-6 { + right: 50%; + } + .col-md-pull-5 { + right: 41.66666667%; + } + .col-md-pull-4 { + right: 33.33333333%; + } + .col-md-pull-3 { + right: 25%; + } + .col-md-pull-2 { + right: 16.66666667%; + } + .col-md-pull-1 { + right: 8.33333333%; + } + .col-md-pull-0 { + right: auto; + } + .col-md-push-12 { + left: 100%; + } + .col-md-push-11 { + left: 91.66666667%; + } + .col-md-push-10 { + left: 83.33333333%; + } + .col-md-push-9 { + left: 75%; + } + .col-md-push-8 { + left: 66.66666667%; + } + .col-md-push-7 { + left: 58.33333333%; + } + .col-md-push-6 { + left: 50%; + } + .col-md-push-5 { + left: 41.66666667%; + } + .col-md-push-4 { + left: 33.33333333%; + } + .col-md-push-3 { + left: 25%; + } + .col-md-push-2 { + left: 16.66666667%; + } + .col-md-push-1 { + left: 8.33333333%; + } + .col-md-push-0 { + left: auto; + } + .col-md-offset-12 { + margin-left: 100%; + } + .col-md-offset-11 { + margin-left: 91.66666667%; + } + .col-md-offset-10 { + margin-left: 83.33333333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-offset-8 { + margin-left: 66.66666667%; + } + .col-md-offset-7 { + margin-left: 58.33333333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-offset-5 { + margin-left: 41.66666667%; + } + .col-md-offset-4 { + margin-left: 33.33333333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-offset-2 { + margin-left: 16.66666667%; + } + .col-md-offset-1 { + margin-left: 8.33333333%; + } + .col-md-offset-0 { + margin-left: 0%; + } +} +@media (min-width: 1200px) { + .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-12 { + width: 100%; } .col-lg-11 { width: 91.66666667%; } - .col-lg-12 { - width: 100%; + .col-lg-10 { + width: 83.33333333%; } - .col-offset-1 { - margin-left: 8.33333333%; + .col-lg-9 { + width: 75%; } - .col-offset-2 { - margin-left: 16.66666667%; + .col-lg-8 { + width: 66.66666667%; } - .col-offset-3 { - margin-left: 25%; + .col-lg-7 { + width: 58.33333333%; } - .col-offset-4 { - margin-left: 33.33333333%; + .col-lg-6 { + width: 50%; } - .col-offset-5 { - margin-left: 41.66666667%; + .col-lg-5 { + width: 41.66666667%; } - .col-offset-6 { - margin-left: 50%; + .col-lg-4 { + width: 33.33333333%; } - .col-offset-7 { - margin-left: 58.33333333%; + .col-lg-3 { + width: 25%; } - .col-offset-8 { - margin-left: 66.66666667%; + .col-lg-2 { + width: 16.66666667%; } - .col-offset-9 { - margin-left: 75%; + .col-lg-1 { + width: 8.33333333%; } - .col-offset-10 { - margin-left: 83.33333333%; + .col-lg-pull-12 { + right: 100%; } - .col-offset-11 { + .col-lg-pull-11 { + right: 91.66666667%; + } + .col-lg-pull-10 { + right: 83.33333333%; + } + .col-lg-pull-9 { + right: 75%; + } + .col-lg-pull-8 { + right: 66.66666667%; + } + .col-lg-pull-7 { + right: 58.33333333%; + } + .col-lg-pull-6 { + right: 50%; + } + .col-lg-pull-5 { + right: 41.66666667%; + } + .col-lg-pull-4 { + right: 33.33333333%; + } + .col-lg-pull-3 { + right: 25%; + } + .col-lg-pull-2 { + right: 16.66666667%; + } + .col-lg-pull-1 { + right: 8.33333333%; + } + .col-lg-pull-0 { + right: auto; + } + .col-lg-push-12 { + left: 100%; + } + .col-lg-push-11 { + left: 91.66666667%; + } + .col-lg-push-10 { + left: 83.33333333%; + } + .col-lg-push-9 { + left: 75%; + } + .col-lg-push-8 { + left: 66.66666667%; + } + .col-lg-push-7 { + left: 58.33333333%; + } + .col-lg-push-6 { + left: 50%; + } + .col-lg-push-5 { + left: 41.66666667%; + } + .col-lg-push-4 { + left: 33.33333333%; + } + .col-lg-push-3 { + left: 25%; + } + .col-lg-push-2 { + left: 16.66666667%; + } + .col-lg-push-1 { + left: 8.33333333%; + } + .col-lg-push-0 { + left: auto; + } + .col-lg-offset-12 { + margin-left: 100%; + } + .col-lg-offset-11 { margin-left: 91.66666667%; } + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + .col-lg-offset-0 { + margin-left: 0%; + } } -@media (min-width: 1200px) { - .container { - max-width: 1170px; +table { + background-color: transparent; +} +caption { + padding-top: 8px; + padding-bottom: 8px; + color: #777777; + text-align: left; +} +th { + text-align: left; +} +.table { + width: 100%; + max-width: 100%; + margin-bottom: 20px; +} +.table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + padding: 8px; + line-height: 1.42857143; + vertical-align: top; + border-top: 1px solid #dddddd; +} +.table > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #dddddd; +} +.table > caption + thead > tr:first-child > th, +.table > colgroup + thead > tr:first-child > th, +.table > thead:first-child > tr:first-child > th, +.table > caption + thead > tr:first-child > td, +.table > colgroup + thead > tr:first-child > td, +.table > thead:first-child > tr:first-child > td { + border-top: 0; +} +.table > tbody + tbody { + border-top: 2px solid #dddddd; +} +.table .table { + background-color: #ffffff; +} +.table-condensed > thead > tr > th, +.table-condensed > tbody > tr > th, +.table-condensed > tfoot > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > td { + padding: 5px; +} +.table-bordered { + border: 1px solid #dddddd; +} +.table-bordered > thead > tr > th, +.table-bordered > tbody > tr > th, +.table-bordered > tfoot > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > td { + border: 1px solid #dddddd; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td { + border-bottom-width: 2px; +} +.table-striped > tbody > tr:nth-of-type(odd) { + background-color: #f9f9f9; +} +.table-hover > tbody > tr:hover { + background-color: #f5f5f5; +} +table col[class*="col-"] { + position: static; + float: none; + display: table-column; +} +table td[class*="col-"], +table th[class*="col-"] { + position: static; + float: none; + display: table-cell; +} +.table > thead > tr > td.active, +.table > tbody > tr > td.active, +.table > tfoot > tr > td.active, +.table > thead > tr > th.active, +.table > tbody > tr > th.active, +.table > tfoot > tr > th.active, +.table > thead > tr.active > td, +.table > tbody > tr.active > td, +.table > tfoot > tr.active > td, +.table > thead > tr.active > th, +.table > tbody > tr.active > th, +.table > tfoot > tr.active > th { + background-color: #f5f5f5; +} +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, +.table-hover > tbody > tr.active:hover > td, +.table-hover > tbody > tr:hover > .active, +.table-hover > tbody > tr.active:hover > th { + background-color: #e8e8e8; +} +.table > thead > tr > td.success, +.table > tbody > tr > td.success, +.table > tfoot > tr > td.success, +.table > thead > tr > th.success, +.table > tbody > tr > th.success, +.table > tfoot > tr > th.success, +.table > thead > tr.success > td, +.table > tbody > tr.success > td, +.table > tfoot > tr.success > td, +.table > thead > tr.success > th, +.table > tbody > tr.success > th, +.table > tfoot > tr.success > th { + background-color: #dff0d8; +} +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, +.table-hover > tbody > tr.success:hover > td, +.table-hover > tbody > tr:hover > .success, +.table-hover > tbody > tr.success:hover > th { + background-color: #d0e9c6; +} +.table > thead > tr > td.info, +.table > tbody > tr > td.info, +.table > tfoot > tr > td.info, +.table > thead > tr > th.info, +.table > tbody > tr > th.info, +.table > tfoot > tr > th.info, +.table > thead > tr.info > td, +.table > tbody > tr.info > td, +.table > tfoot > tr.info > td, +.table > thead > tr.info > th, +.table > tbody > tr.info > th, +.table > tfoot > tr.info > th { + background-color: #d9edf7; +} +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, +.table-hover > tbody > tr.info:hover > td, +.table-hover > tbody > tr:hover > .info, +.table-hover > tbody > tr.info:hover > th { + background-color: #c4e3f3; +} +.table > thead > tr > td.warning, +.table > tbody > tr > td.warning, +.table > tfoot > tr > td.warning, +.table > thead > tr > th.warning, +.table > tbody > tr > th.warning, +.table > tfoot > tr > th.warning, +.table > thead > tr.warning > td, +.table > tbody > tr.warning > td, +.table > tfoot > tr.warning > td, +.table > thead > tr.warning > th, +.table > tbody > tr.warning > th, +.table > tfoot > tr.warning > th { + background-color: #fcf8e3; +} +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, +.table-hover > tbody > tr.warning:hover > td, +.table-hover > tbody > tr:hover > .warning, +.table-hover > tbody > tr.warning:hover > th { + background-color: #faf2cc; +} +.table > thead > tr > td.danger, +.table > tbody > tr > td.danger, +.table > tfoot > tr > td.danger, +.table > thead > tr > th.danger, +.table > tbody > tr > th.danger, +.table > tfoot > tr > th.danger, +.table > thead > tr.danger > td, +.table > tbody > tr.danger > td, +.table > tfoot > tr.danger > td, +.table > thead > tr.danger > th, +.table > tbody > tr.danger > th, +.table > tfoot > tr.danger > th { + background-color: #f2dede; +} +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td, +.table-hover > tbody > tr:hover > .danger, +.table-hover > tbody > tr.danger:hover > th { + background-color: #ebcccc; +} +.table-responsive { + overflow-x: auto; + min-height: 0.01%; +} +@media screen and (max-width: 767px) { + .table-responsive { + width: 100%; + margin-bottom: 15px; + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid #dddddd; + } + .table-responsive > .table { + margin-bottom: 0; + } + .table-responsive > .table > thead > tr > th, + .table-responsive > .table > tbody > tr > th, + .table-responsive > .table > tfoot > tr > th, + .table-responsive > .table > thead > tr > td, + .table-responsive > .table > tbody > tr > td, + .table-responsive > .table > tfoot > tr > td { + white-space: nowrap; + } + .table-responsive > .table-bordered { + border: 0; + } + .table-responsive > .table-bordered > thead > tr > th:first-child, + .table-responsive > .table-bordered > tbody > tr > th:first-child, + .table-responsive > .table-bordered > tfoot > tr > th:first-child, + .table-responsive > .table-bordered > thead > tr > td:first-child, + .table-responsive > .table-bordered > tbody > tr > td:first-child, + .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; + } + .table-responsive > .table-bordered > thead > tr > th:last-child, + .table-responsive > .table-bordered > tbody > tr > th:last-child, + .table-responsive > .table-bordered > tfoot > tr > th:last-child, + .table-responsive > .table-bordered > thead > tr > td:last-child, + .table-responsive > .table-bordered > tbody > tr > td:last-child, + .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; + } + .table-responsive > .table-bordered > tbody > tr:last-child > th, + .table-responsive > .table-bordered > tfoot > tr:last-child > th, + .table-responsive > .table-bordered > tbody > tr:last-child > td, + .table-responsive > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; + } +} +fieldset { + padding: 0; + margin: 0; + border: 0; + min-width: 0; +} +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: inherit; + color: #333333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: bold; +} +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; +} +input[type="file"] { + display: block; +} +input[type="range"] { + display: block; + width: 100%; +} +select[multiple], +select[size] { + height: auto; +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +output { + display: block; + padding-top: 7px; + font-size: 14px; + line-height: 1.42857143; + color: #555555; +} +.form-control { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555555; + background-color: #ffffff; + background-image: none; + border: 1px solid #cccccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} +.form-control:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); +} +.form-control::-moz-placeholder { + color: #999999; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #999999; +} +.form-control::-webkit-input-placeholder { + color: #999999; +} +.form-control::-ms-expand { + border: 0; + background-color: transparent; +} +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: #eeeeee; + opacity: 1; +} +.form-control[disabled], +fieldset[disabled] .form-control { + cursor: not-allowed; +} +textarea.form-control { + height: auto; +} +input[type="search"] { + -webkit-appearance: none; +} +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"].form-control, + input[type="time"].form-control, + input[type="datetime-local"].form-control, + input[type="month"].form-control { + line-height: 34px; + } + input[type="date"].input-sm, + input[type="time"].input-sm, + input[type="datetime-local"].input-sm, + input[type="month"].input-sm, + .input-group-sm input[type="date"], + .input-group-sm input[type="time"], + .input-group-sm input[type="datetime-local"], + .input-group-sm input[type="month"] { + line-height: 30px; + } + input[type="date"].input-lg, + input[type="time"].input-lg, + input[type="datetime-local"].input-lg, + input[type="month"].input-lg, + .input-group-lg input[type="date"], + .input-group-lg input[type="time"], + .input-group-lg input[type="datetime-local"], + .input-group-lg input[type="month"] { + line-height: 46px; + } +} +.form-group { + margin-bottom: 15px; +} +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.radio label, +.checkbox label { + min-height: 20px; + padding-left: 20px; + 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"] { + position: absolute; + margin-left: -20px; + margin-top: 4px \9; +} +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; +} +.radio-inline, +.checkbox-inline { + position: relative; + display: inline-block; + 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; +} +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"].disabled, +input[type="checkbox"].disabled, +fieldset[disabled] input[type="radio"], +fieldset[disabled] input[type="checkbox"] { + cursor: not-allowed; +} +.radio-inline.disabled, +.checkbox-inline.disabled, +fieldset[disabled] .radio-inline, +fieldset[disabled] .checkbox-inline { + cursor: not-allowed; +} +.radio.disabled label, +.checkbox.disabled label, +fieldset[disabled] .radio label, +fieldset[disabled] .checkbox label { + cursor: not-allowed; +} +.form-control-static { + padding-top: 7px; + padding-bottom: 7px; + margin-bottom: 0; + min-height: 34px; +} +.form-control-static.input-lg, +.form-control-static.input-sm { + padding-left: 0; + padding-right: 0; +} +.input-sm { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-sm { + height: 30px; + line-height: 30px; +} +textarea.input-sm, +select[multiple].input-sm { + height: auto; +} +.form-group-sm .form-control { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.form-group-sm select.form-control { + height: 30px; + line-height: 30px; +} +.form-group-sm textarea.form-control, +.form-group-sm select[multiple].form-control { + height: auto; +} +.form-group-sm .form-control-static { + height: 30px; + min-height: 32px; + padding: 6px 10px; + font-size: 12px; + line-height: 1.5; +} +.input-lg { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +select.input-lg { + height: 46px; + line-height: 46px; +} +textarea.input-lg, +select[multiple].input-lg { + height: auto; +} +.form-group-lg .form-control { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +.form-group-lg select.form-control { + height: 46px; + line-height: 46px; +} +.form-group-lg textarea.form-control, +.form-group-lg select[multiple].form-control { + height: auto; +} +.form-group-lg .form-control-static { + height: 46px; + min-height: 38px; + padding: 11px 16px; + font-size: 18px; + line-height: 1.3333333; +} +.has-feedback { + position: relative; +} +.has-feedback .form-control { + padding-right: 42.5px; +} +.form-control-feedback { + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: block; + width: 34px; + height: 34px; + line-height: 34px; + text-align: center; + pointer-events: none; +} +.input-lg + .form-control-feedback, +.input-group-lg + .form-control-feedback, +.form-group-lg .form-control + .form-control-feedback { + width: 46px; + height: 46px; + line-height: 46px; +} +.input-sm + .form-control-feedback, +.input-group-sm + .form-control-feedback, +.form-group-sm .form-control + .form-control-feedback { + width: 30px; + height: 30px; + line-height: 30px; +} +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline, +.has-success.radio label, +.has-success.checkbox label, +.has-success.radio-inline label, +.has-success.checkbox-inline label { + color: #3c763d; +} +.has-success .form-control { + border-color: #3c763d; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-success .form-control:focus { + border-color: #2b542c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; +} +.has-success .input-group-addon { + color: #3c763d; + border-color: #3c763d; + background-color: #dff0d8; +} +.has-success .form-control-feedback { + color: #3c763d; +} +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline, +.has-warning.radio label, +.has-warning.checkbox label, +.has-warning.radio-inline label, +.has-warning.checkbox-inline label { + color: #8a6d3b; +} +.has-warning .form-control { + border-color: #8a6d3b; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-warning .form-control:focus { + border-color: #66512c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; +} +.has-warning .input-group-addon { + color: #8a6d3b; + border-color: #8a6d3b; + background-color: #fcf8e3; +} +.has-warning .form-control-feedback { + color: #8a6d3b; +} +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline, +.has-error.radio label, +.has-error.checkbox label, +.has-error.radio-inline label, +.has-error.checkbox-inline label { + color: #a94442; +} +.has-error .form-control { + border-color: #a94442; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-error .form-control:focus { + border-color: #843534; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; +} +.has-error .input-group-addon { + color: #a94442; + border-color: #a94442; + background-color: #f2dede; +} +.has-error .form-control-feedback { + color: #a94442; +} +.has-feedback label ~ .form-control-feedback { + top: 25px; +} +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} +.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #737373; +} +@media (min-width: 768px) { + .form-inline .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .form-control-static { + display: inline-block; + } + .form-inline .input-group { + display: inline-table; + vertical-align: middle; + } + .form-inline .input-group .input-group-addon, + .form-inline .input-group .input-group-btn, + .form-inline .input-group .form-control { + width: auto; + } + .form-inline .input-group > .form-control { + width: 100%; + } + .form-inline .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio, + .form-inline .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio label, + .form-inline .checkbox label { + padding-left: 0; + } + .form-inline .radio input[type="radio"], + .form-inline .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .form-inline .has-feedback .form-control-feedback { + top: 0; + } +} +.form-horizontal .radio, +.form-horizontal .checkbox, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + margin-top: 0; + margin-bottom: 0; + padding-top: 7px; +} +.form-horizontal .radio, +.form-horizontal .checkbox { + min-height: 27px; +} +.form-horizontal .form-group { + margin-left: -15px; + margin-right: -15px; +} +@media (min-width: 768px) { + .form-horizontal .control-label { + text-align: right; + margin-bottom: 0; + padding-top: 7px; + } +} +.form-horizontal .has-feedback .form-control-feedback { + right: 15px; +} +@media (min-width: 768px) { + .form-horizontal .form-group-lg .control-label { + padding-top: 14.333333px; + font-size: 18px; + } +} +@media (min-width: 768px) { + .form-horizontal .form-group-sm .control-label { + padding-top: 6px; + font-size: 12px; + } +} +.btn { + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.btn:focus, +.btn:active:focus, +.btn.active:focus, +.btn.focus, +.btn:active.focus, +.btn.active.focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.btn:hover, +.btn:focus, +.btn.focus { + color: #333333; + text-decoration: none; +} +.btn:active, +.btn.active { + outline: 0; + background-image: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn { + cursor: not-allowed; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn.disabled, +fieldset[disabled] a.btn { + pointer-events: none; +} +.btn-default { + color: #333333; + background-color: #ffffff; + border-color: #cccccc; +} +.btn-default:focus, +.btn-default.focus { + color: #333333; + background-color: #e6e6e6; + border-color: #8c8c8c; +} +.btn-default:hover { + color: #333333; + background-color: #e6e6e6; + border-color: #adadad; +} +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + color: #333333; + background-color: #e6e6e6; + border-color: #adadad; +} +.btn-default:active:hover, +.btn-default.active:hover, +.open > .dropdown-toggle.btn-default:hover, +.btn-default:active:focus, +.btn-default.active:focus, +.open > .dropdown-toggle.btn-default:focus, +.btn-default:active.focus, +.btn-default.active.focus, +.open > .dropdown-toggle.btn-default.focus { + color: #333333; + background-color: #d4d4d4; + border-color: #8c8c8c; +} +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + background-image: none; +} +.btn-default.disabled, +.btn-default[disabled], +fieldset[disabled] .btn-default, +.btn-default.disabled:hover, +.btn-default[disabled]:hover, +fieldset[disabled] .btn-default:hover, +.btn-default.disabled:focus, +.btn-default[disabled]:focus, +fieldset[disabled] .btn-default:focus, +.btn-default.disabled.focus, +.btn-default[disabled].focus, +fieldset[disabled] .btn-default.focus, +.btn-default.disabled:active, +.btn-default[disabled]:active, +fieldset[disabled] .btn-default:active, +.btn-default.disabled.active, +.btn-default[disabled].active, +fieldset[disabled] .btn-default.active { + background-color: #ffffff; + border-color: #cccccc; +} +.btn-default .badge { + color: #ffffff; + background-color: #333333; +} +.btn-primary { + color: #ffffff; + background-color: #337ab7; + border-color: #2e6da4; +} +.btn-primary:focus, +.btn-primary.focus { + color: #ffffff; + background-color: #286090; + border-color: #122b40; +} +.btn-primary:hover { + color: #ffffff; + background-color: #286090; + border-color: #204d74; +} +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + color: #ffffff; + background-color: #286090; + border-color: #204d74; +} +.btn-primary:active:hover, +.btn-primary.active:hover, +.open > .dropdown-toggle.btn-primary:hover, +.btn-primary:active:focus, +.btn-primary.active:focus, +.open > .dropdown-toggle.btn-primary:focus, +.btn-primary:active.focus, +.btn-primary.active.focus, +.open > .dropdown-toggle.btn-primary.focus { + color: #ffffff; + background-color: #204d74; + border-color: #122b40; +} +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + background-image: none; +} +.btn-primary.disabled, +.btn-primary[disabled], +fieldset[disabled] .btn-primary, +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled.focus, +.btn-primary[disabled].focus, +fieldset[disabled] .btn-primary.focus, +.btn-primary.disabled:active, +.btn-primary[disabled]:active, +fieldset[disabled] .btn-primary:active, +.btn-primary.disabled.active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary.active { + background-color: #337ab7; + border-color: #2e6da4; +} +.btn-primary .badge { + color: #337ab7; + background-color: #ffffff; +} +.btn-success { + color: #ffffff; + background-color: #5cb85c; + border-color: #4cae4c; +} +.btn-success:focus, +.btn-success.focus { + color: #ffffff; + background-color: #449d44; + border-color: #255625; +} +.btn-success:hover { + color: #ffffff; + background-color: #449d44; + border-color: #398439; +} +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + color: #ffffff; + background-color: #449d44; + border-color: #398439; +} +.btn-success:active:hover, +.btn-success.active:hover, +.open > .dropdown-toggle.btn-success:hover, +.btn-success:active:focus, +.btn-success.active:focus, +.open > .dropdown-toggle.btn-success:focus, +.btn-success:active.focus, +.btn-success.active.focus, +.open > .dropdown-toggle.btn-success.focus { + color: #ffffff; + background-color: #398439; + border-color: #255625; +} +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + background-image: none; +} +.btn-success.disabled, +.btn-success[disabled], +fieldset[disabled] .btn-success, +.btn-success.disabled:hover, +.btn-success[disabled]:hover, +fieldset[disabled] .btn-success:hover, +.btn-success.disabled:focus, +.btn-success[disabled]:focus, +fieldset[disabled] .btn-success:focus, +.btn-success.disabled.focus, +.btn-success[disabled].focus, +fieldset[disabled] .btn-success.focus, +.btn-success.disabled:active, +.btn-success[disabled]:active, +fieldset[disabled] .btn-success:active, +.btn-success.disabled.active, +.btn-success[disabled].active, +fieldset[disabled] .btn-success.active { + background-color: #5cb85c; + border-color: #4cae4c; +} +.btn-success .badge { + color: #5cb85c; + background-color: #ffffff; +} +.btn-info { + color: #ffffff; + background-color: #5bc0de; + border-color: #46b8da; +} +.btn-info:focus, +.btn-info.focus { + color: #ffffff; + background-color: #31b0d5; + border-color: #1b6d85; +} +.btn-info:hover { + color: #ffffff; + background-color: #31b0d5; + border-color: #269abc; +} +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + color: #ffffff; + background-color: #31b0d5; + border-color: #269abc; +} +.btn-info:active:hover, +.btn-info.active:hover, +.open > .dropdown-toggle.btn-info:hover, +.btn-info:active:focus, +.btn-info.active:focus, +.open > .dropdown-toggle.btn-info:focus, +.btn-info:active.focus, +.btn-info.active.focus, +.open > .dropdown-toggle.btn-info.focus { + color: #ffffff; + background-color: #269abc; + border-color: #1b6d85; +} +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + background-image: none; +} +.btn-info.disabled, +.btn-info[disabled], +fieldset[disabled] .btn-info, +.btn-info.disabled:hover, +.btn-info[disabled]:hover, +fieldset[disabled] .btn-info:hover, +.btn-info.disabled:focus, +.btn-info[disabled]:focus, +fieldset[disabled] .btn-info:focus, +.btn-info.disabled.focus, +.btn-info[disabled].focus, +fieldset[disabled] .btn-info.focus, +.btn-info.disabled:active, +.btn-info[disabled]:active, +fieldset[disabled] .btn-info:active, +.btn-info.disabled.active, +.btn-info[disabled].active, +fieldset[disabled] .btn-info.active { + background-color: #5bc0de; + border-color: #46b8da; +} +.btn-info .badge { + color: #5bc0de; + background-color: #ffffff; +} +.btn-warning { + color: #ffffff; + background-color: #f0ad4e; + border-color: #eea236; +} +.btn-warning:focus, +.btn-warning.focus { + color: #ffffff; + background-color: #ec971f; + border-color: #985f0d; +} +.btn-warning:hover { + color: #ffffff; + background-color: #ec971f; + border-color: #d58512; +} +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + color: #ffffff; + background-color: #ec971f; + border-color: #d58512; +} +.btn-warning:active:hover, +.btn-warning.active:hover, +.open > .dropdown-toggle.btn-warning:hover, +.btn-warning:active:focus, +.btn-warning.active:focus, +.open > .dropdown-toggle.btn-warning:focus, +.btn-warning:active.focus, +.btn-warning.active.focus, +.open > .dropdown-toggle.btn-warning.focus { + color: #ffffff; + background-color: #d58512; + border-color: #985f0d; +} +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + background-image: none; +} +.btn-warning.disabled, +.btn-warning[disabled], +fieldset[disabled] .btn-warning, +.btn-warning.disabled:hover, +.btn-warning[disabled]:hover, +fieldset[disabled] .btn-warning:hover, +.btn-warning.disabled:focus, +.btn-warning[disabled]:focus, +fieldset[disabled] .btn-warning:focus, +.btn-warning.disabled.focus, +.btn-warning[disabled].focus, +fieldset[disabled] .btn-warning.focus, +.btn-warning.disabled:active, +.btn-warning[disabled]:active, +fieldset[disabled] .btn-warning:active, +.btn-warning.disabled.active, +.btn-warning[disabled].active, +fieldset[disabled] .btn-warning.active { + background-color: #f0ad4e; + border-color: #eea236; +} +.btn-warning .badge { + color: #f0ad4e; + background-color: #ffffff; +} +.btn-danger { + color: #ffffff; + background-color: #d9534f; + border-color: #d43f3a; +} +.btn-danger:focus, +.btn-danger.focus { + color: #ffffff; + background-color: #c9302c; + border-color: #761c19; +} +.btn-danger:hover { + color: #ffffff; + background-color: #c9302c; + border-color: #ac2925; +} +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + color: #ffffff; + background-color: #c9302c; + border-color: #ac2925; +} +.btn-danger:active:hover, +.btn-danger.active:hover, +.open > .dropdown-toggle.btn-danger:hover, +.btn-danger:active:focus, +.btn-danger.active:focus, +.open > .dropdown-toggle.btn-danger:focus, +.btn-danger:active.focus, +.btn-danger.active.focus, +.open > .dropdown-toggle.btn-danger.focus { + color: #ffffff; + background-color: #ac2925; + border-color: #761c19; +} +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + background-image: none; +} +.btn-danger.disabled, +.btn-danger[disabled], +fieldset[disabled] .btn-danger, +.btn-danger.disabled:hover, +.btn-danger[disabled]:hover, +fieldset[disabled] .btn-danger:hover, +.btn-danger.disabled:focus, +.btn-danger[disabled]:focus, +fieldset[disabled] .btn-danger:focus, +.btn-danger.disabled.focus, +.btn-danger[disabled].focus, +fieldset[disabled] .btn-danger.focus, +.btn-danger.disabled:active, +.btn-danger[disabled]:active, +fieldset[disabled] .btn-danger:active, +.btn-danger.disabled.active, +.btn-danger[disabled].active, +fieldset[disabled] .btn-danger.active { + background-color: #d9534f; + border-color: #d43f3a; +} +.btn-danger .badge { + color: #d9534f; + background-color: #ffffff; +} +.btn-link { + color: #337ab7; + font-weight: normal; + border-radius: 0; +} +.btn-link, +.btn-link:active, +.btn-link.active, +.btn-link[disabled], +fieldset[disabled] .btn-link { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link, +.btn-link:hover, +.btn-link:focus, +.btn-link:active { + border-color: transparent; +} +.btn-link:hover, +.btn-link:focus { + color: #23527c; + text-decoration: underline; + background-color: transparent; +} +.btn-link[disabled]:hover, +fieldset[disabled] .btn-link:hover, +.btn-link[disabled]:focus, +fieldset[disabled] .btn-link:focus { + color: #777777; + text-decoration: none; +} +.btn-lg, +.btn-group-lg > .btn { + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +.btn-sm, +.btn-group-sm > .btn { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-xs, +.btn-group-xs > .btn { + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-block { + display: block; + width: 100%; +} +.btn-block + .btn-block { + margin-top: 5px; +} +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} +.fade.in { + opacity: 1; +} +.collapse { + display: none; +} +.collapse.in { + display: block; +} +tr.collapse.in { + display: table-row; +} +tbody.collapse.in { + display: table-row-group; +} +.collapsing { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition-property: height, visibility; + transition-property: height, visibility; + -webkit-transition-duration: 0.35s; + transition-duration: 0.35s; + -webkit-transition-timing-function: ease; + transition-timing-function: ease; +} +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid \9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} +.dropup, +.dropdown { + position: relative; +} +.dropdown-toggle:focus { + outline: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + text-align: left; + background-color: #ffffff; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; +} +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +.dropdown-menu .divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #333333; + white-space: nowrap; +} +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + text-decoration: none; + color: #262626; + background-color: #f5f5f5; +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #ffffff; + text-decoration: none; + outline: 0; + background-color: #337ab7; +} +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #777777; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + cursor: not-allowed; +} +.open > .dropdown-menu { + display: block; +} +.open > a { + outline: 0; +} +.dropdown-menu-right { + left: auto; + right: 0; +} +.dropdown-menu-left { + left: 0; + right: auto; +} +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: 12px; + line-height: 1.42857143; + color: #777777; + white-space: nowrap; +} +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 990; +} +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + border-top: 0; + border-bottom: 4px dashed; + border-bottom: 4px solid \9; + content: ""; +} +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; +} +@media (min-width: 768px) { + .navbar-right .dropdown-menu { + left: auto; + right: 0; + } + .navbar-right .dropdown-menu-left { + left: 0; + right: auto; + } +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + float: left; +} +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover, +.btn-group > .btn:focus, +.btn-group-vertical > .btn:focus, +.btn-group > .btn:active, +.btn-group-vertical > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn.active { + z-index: 2; +} +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} +.btn-toolbar { + margin-left: -5px; +} +.btn-toolbar .btn, +.btn-toolbar .btn-group, +.btn-toolbar .input-group { + float: left; +} +.btn-toolbar > .btn, +.btn-toolbar > .btn-group, +.btn-toolbar > .input-group { + margin-left: 5px; +} +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} +.btn-group > .btn:first-child { + margin-left: 0; +} +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.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:not(:last-child) > .btn:last-child, +.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +.btn-group.open .dropdown-toggle.btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} +.btn .caret { + margin-left: 0; +} +.btn-lg .caret { + border-width: 5px 5px 0; + border-bottom-width: 0; +} +.dropup .btn-lg .caret { + border-width: 0 5px 5px; +} +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group, +.btn-group-vertical > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; +} +.btn-group-vertical > .btn-group > .btn { + float: none; +} +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; +} +.btn-group-vertical > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group-vertical > .btn:first-child:not(:last-child) { + border-top-right-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn:last-child:not(:first-child) { + border-bottom-left-radius: 4px; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; +} +.btn-group-justified > .btn, +.btn-group-justified > .btn-group { + float: none; + display: table-cell; + width: 1%; +} +.btn-group-justified > .btn-group .btn { + width: 100%; +} +.btn-group-justified > .btn-group .dropdown-menu { + left: auto; +} +[data-toggle="buttons"] > .btn input[type="radio"], +[data-toggle="buttons"] > .btn-group > .btn input[type="radio"], +[data-toggle="buttons"] > .btn input[type="checkbox"], +[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.input-group { + position: relative; + display: table; + border-collapse: separate; +} +.input-group[class*="col-"] { + float: none; + padding-left: 0; + padding-right: 0; +} +.input-group .form-control { + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; +} +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + height: 46px; + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +select.input-group-lg > .form-control, +select.input-group-lg > .input-group-addon, +select.input-group-lg > .input-group-btn > .btn { + height: 46px; + line-height: 46px; +} +textarea.input-group-lg > .form-control, +textarea.input-group-lg > .input-group-addon, +textarea.input-group-lg > .input-group-btn > .btn, +select[multiple].input-group-lg > .form-control, +select[multiple].input-group-lg > .input-group-addon, +select[multiple].input-group-lg > .input-group-btn > .btn { + height: auto; +} +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-group-sm > .form-control, +select.input-group-sm > .input-group-addon, +select.input-group-sm > .input-group-btn > .btn { + height: 30px; + line-height: 30px; +} +textarea.input-group-sm > .form-control, +textarea.input-group-sm > .input-group-addon, +textarea.input-group-sm > .input-group-btn > .btn, +select[multiple].input-group-sm > .form-control, +select[multiple].input-group-sm > .input-group-addon, +select[multiple].input-group-sm > .input-group-btn > .btn { + height: auto; +} +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; +} +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group .form-control:not(:first-child):not(:last-child) { + border-radius: 0; +} +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; +} +.input-group-addon { + padding: 6px 12px; + font-size: 14px; + font-weight: normal; + line-height: 1; + color: #555555; + text-align: center; + background-color: #eeeeee; + border: 1px solid #cccccc; + border-radius: 4px; +} +.input-group-addon.input-sm { + padding: 5px 10px; + font-size: 12px; + border-radius: 3px; +} +.input-group-addon.input-lg { + padding: 10px 16px; + font-size: 18px; + border-radius: 6px; +} +.input-group-addon input[type="radio"], +.input-group-addon input[type="checkbox"] { + margin-top: 0; +} +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.input-group-addon:last-child { + border-left: 0; +} +.input-group-btn { + position: relative; + font-size: 0; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; +} +.input-group-btn > .btn + .btn { + margin-left: -1px; +} +.input-group-btn > .btn:hover, +.input-group-btn > .btn:focus, +.input-group-btn > .btn:active { + z-index: 2; +} +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group { + margin-right: -1px; +} +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group { + z-index: 2; + margin-left: -1px; +} +.nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; +} +.nav > li { + position: relative; + display: block; +} +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #eeeeee; +} +.nav > li.disabled > a { + color: #777777; +} +.nav > li.disabled > a:hover, +.nav > li.disabled > a:focus { + color: #777777; + text-decoration: none; + background-color: transparent; + cursor: not-allowed; +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + background-color: #eeeeee; + border-color: #337ab7; +} +.nav .nav-divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.nav > li > a > img { + max-width: none; +} +.nav-tabs { + border-bottom: 1px solid #dddddd; +} +.nav-tabs > li { + float: left; + margin-bottom: -1px; +} +.nav-tabs > li > a { + margin-right: 2px; + line-height: 1.42857143; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; +} +.nav-tabs > li > a:hover { + border-color: #eeeeee #eeeeee #dddddd; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: #555555; + background-color: #ffffff; + border: 1px solid #dddddd; + border-bottom-color: transparent; + cursor: default; +} +.nav-tabs.nav-justified { + width: 100%; + border-bottom: 0; +} +.nav-tabs.nav-justified > li { + float: none; +} +.nav-tabs.nav-justified > li > a { + text-align: center; + margin-bottom: 5px; +} +.nav-tabs.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-tabs.nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs.nav-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs.nav-justified > .active > a, +.nav-tabs.nav-justified > .active > a:hover, +.nav-tabs.nav-justified > .active > a:focus { + border: 1px solid #dddddd; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li > a { + border-bottom: 1px solid #dddddd; + border-radius: 4px 4px 0 0; + } + .nav-tabs.nav-justified > .active > a, + .nav-tabs.nav-justified > .active > a:hover, + .nav-tabs.nav-justified > .active > a:focus { + border-bottom-color: #ffffff; + } +} +.nav-pills > li { + float: left; +} +.nav-pills > li > a { + border-radius: 4px; +} +.nav-pills > li + li { + margin-left: 2px; +} +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover, +.nav-pills > li.active > a:focus { + color: #ffffff; + background-color: #337ab7; +} +.nav-stacked > li { + float: none; +} +.nav-stacked > li + li { + margin-top: 2px; + margin-left: 0; +} +.nav-justified { + width: 100%; +} +.nav-justified > li { + float: none; +} +.nav-justified > li > a { + text-align: center; + margin-bottom: 5px; +} +.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs-justified { + border-bottom: 0; +} +.nav-tabs-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs-justified > .active > a, +.nav-tabs-justified > .active > a:hover, +.nav-tabs-justified > .active > a:focus { + border: 1px solid #dddddd; +} +@media (min-width: 768px) { + .nav-tabs-justified > li > a { + border-bottom: 1px solid #dddddd; + border-radius: 4px 4px 0 0; + } + .nav-tabs-justified > .active > a, + .nav-tabs-justified > .active > a:hover, + .nav-tabs-justified > .active > a:focus { + border-bottom-color: #ffffff; + } +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.navbar { + position: relative; + min-height: 50px; + margin-bottom: 20px; + border: 1px solid transparent; +} +@media (min-width: 768px) { + .navbar { + border-radius: 4px; + } +} +@media (min-width: 768px) { + .navbar-header { + float: left; + } +} +.navbar-collapse { + overflow-x: visible; + padding-right: 15px; + padding-left: 15px; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + -webkit-overflow-scrolling: touch; +} +.navbar-collapse.in { + overflow-y: auto; +} +@media (min-width: 768px) { + .navbar-collapse { + width: auto; + border-top: 0; + box-shadow: none; + } + .navbar-collapse.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; + overflow: visible !important; + } + .navbar-collapse.in { + overflow-y: visible; + } + .navbar-fixed-top .navbar-collapse, + .navbar-static-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + padding-left: 0; + padding-right: 0; + } +} +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 340px; +} +@media (max-device-width: 480px) and (orientation: landscape) { + .navbar-fixed-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + max-height: 200px; + } +} +.container > .navbar-header, +.container-fluid > .navbar-header, +.container > .navbar-collapse, +.container-fluid > .navbar-collapse { + margin-right: -15px; + margin-left: -15px; +} +@media (min-width: 768px) { + .container > .navbar-header, + .container-fluid > .navbar-header, + .container > .navbar-collapse, + .container-fluid > .navbar-collapse { + margin-right: 0; + margin-left: 0; + } +} +.navbar-static-top { + z-index: 1000; + border-width: 0 0 1px; +} +@media (min-width: 768px) { + .navbar-static-top { + border-radius: 0; + } +} +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; +} +@media (min-width: 768px) { + .navbar-fixed-top, + .navbar-fixed-bottom { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; + border-width: 1px 0 0; +} +.navbar-brand { + float: left; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; + height: 50px; +} +.navbar-brand:hover, +.navbar-brand:focus { + text-decoration: none; +} +.navbar-brand > img { + display: block; +} +@media (min-width: 768px) { + .navbar > .container .navbar-brand, + .navbar > .container-fluid .navbar-brand { + margin-left: -15px; + } +} +.navbar-toggle { + position: relative; + float: right; + margin-right: 15px; + padding: 9px 10px; + margin-top: 8px; + margin-bottom: 8px; + background-color: transparent; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; +} +.navbar-toggle:focus { + outline: 0; +} +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; +} +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; +} +@media (min-width: 768px) { + .navbar-toggle { + display: none; + } +} +.navbar-nav { + margin: 7.5px -15px; +} +.navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: 20px; +} +@media (max-width: 767px) { + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + } + .navbar-nav .open .dropdown-menu > li > a, + .navbar-nav .open .dropdown-menu .dropdown-header { + padding: 5px 15px 5px 25px; + } + .navbar-nav .open .dropdown-menu > li > a { + line-height: 20px; + } + .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-nav .open .dropdown-menu > li > a:focus { + background-image: none; + } +} +@media (min-width: 768px) { + .navbar-nav { + float: left; + margin: 0; + } + .navbar-nav > li { + float: left; + } + .navbar-nav > li > a { + padding-top: 15px; + padding-bottom: 15px; + } +} +.navbar-form { + margin-left: -15px; + margin-right: -15px; + padding: 10px 15px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + margin-top: 8px; + margin-bottom: 8px; +} +@media (min-width: 768px) { + .navbar-form .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .navbar-form .form-control-static { + display: inline-block; + } + .navbar-form .input-group { + display: inline-table; + vertical-align: middle; + } + .navbar-form .input-group .input-group-addon, + .navbar-form .input-group .input-group-btn, + .navbar-form .input-group .form-control { + width: auto; + } + .navbar-form .input-group > .form-control { + width: 100%; + } + .navbar-form .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio, + .navbar-form .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio label, + .navbar-form .checkbox label { + padding-left: 0; + } + .navbar-form .radio input[type="radio"], + .navbar-form .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .navbar-form .has-feedback .form-control-feedback { + top: 0; + } +} +@media (max-width: 767px) { + .navbar-form .form-group { + margin-bottom: 5px; + } + .navbar-form .form-group:last-child { + margin-bottom: 0; + } +} +@media (min-width: 768px) { + .navbar-form { + width: auto; + border: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0; + padding-bottom: 0; + -webkit-box-shadow: none; + box-shadow: none; + } +} +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + margin-bottom: 0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.navbar-btn { + margin-top: 8px; + margin-bottom: 8px; +} +.navbar-btn.btn-sm { + margin-top: 10px; + margin-bottom: 10px; +} +.navbar-btn.btn-xs { + margin-top: 14px; + margin-bottom: 14px; +} +.navbar-text { + margin-top: 15px; + margin-bottom: 15px; +} +@media (min-width: 768px) { + .navbar-text { + float: left; + margin-left: 15px; + margin-right: 15px; + } +} +@media (min-width: 768px) { + .navbar-left { + float: left !important; + } + .navbar-right { + float: right !important; + margin-right: -15px; + } + .navbar-right ~ .navbar-right { + margin-right: 0; + } +} +.navbar-default { + background-color: #f8f8f8; + border-color: #e7e7e7; +} +.navbar-default .navbar-brand { + color: #777777; +} +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: #5e5e5e; + background-color: transparent; +} +.navbar-default .navbar-text { + color: #777777; +} +.navbar-default .navbar-nav > li > a { + color: #777777; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: #333333; + background-color: transparent; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #555555; + background-color: #e7e7e7; +} +.navbar-default .navbar-nav > .disabled > a, +.navbar-default .navbar-nav > .disabled > a:hover, +.navbar-default .navbar-nav > .disabled > a:focus { + color: #cccccc; + background-color: transparent; +} +.navbar-default .navbar-toggle { + border-color: #dddddd; +} +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #dddddd; +} +.navbar-default .navbar-toggle .icon-bar { + background-color: #888888; +} +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: #e7e7e7; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + background-color: #e7e7e7; + color: #555555; +} +@media (max-width: 767px) { + .navbar-default .navbar-nav .open .dropdown-menu > li > a { + color: #777777; + } + .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { + color: #333333; + background-color: transparent; + } + .navbar-default .navbar-nav .open .dropdown-menu > .active > a, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #555555; + background-color: #e7e7e7; + } + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #cccccc; + background-color: transparent; + } +} +.navbar-default .navbar-link { + color: #777777; +} +.navbar-default .navbar-link:hover { + color: #333333; +} +.navbar-default .btn-link { + color: #777777; +} +.navbar-default .btn-link:hover, +.navbar-default .btn-link:focus { + color: #333333; +} +.navbar-default .btn-link[disabled]:hover, +fieldset[disabled] .navbar-default .btn-link:hover, +.navbar-default .btn-link[disabled]:focus, +fieldset[disabled] .navbar-default .btn-link:focus { + color: #cccccc; +} +.navbar-inverse { + background-color: #222222; + border-color: #080808; +} +.navbar-inverse .navbar-brand { + color: #9d9d9d; +} +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus { + color: #ffffff; + background-color: transparent; +} +.navbar-inverse .navbar-text { + color: #9d9d9d; +} +.navbar-inverse .navbar-nav > li > a { + color: #9d9d9d; +} +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { + color: #ffffff; + background-color: transparent; +} +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + color: #ffffff; + background-color: #080808; +} +.navbar-inverse .navbar-nav > .disabled > a, +.navbar-inverse .navbar-nav > .disabled > a:hover, +.navbar-inverse .navbar-nav > .disabled > a:focus { + color: #444444; + background-color: transparent; +} +.navbar-inverse .navbar-toggle { + border-color: #333333; +} +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background-color: #333333; +} +.navbar-inverse .navbar-toggle .icon-bar { + background-color: #ffffff; +} +.navbar-inverse .navbar-collapse, +.navbar-inverse .navbar-form { + border-color: #101010; +} +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + background-color: #080808; + color: #ffffff; +} +@media (max-width: 767px) { + .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { + border-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu .divider { + background-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { + color: #9d9d9d; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { + color: #ffffff; + background-color: transparent; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #ffffff; + background-color: #080808; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #444444; + background-color: transparent; + } +} +.navbar-inverse .navbar-link { + color: #9d9d9d; +} +.navbar-inverse .navbar-link:hover { + color: #ffffff; +} +.navbar-inverse .btn-link { + color: #9d9d9d; +} +.navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link:focus { + color: #ffffff; +} +.navbar-inverse .btn-link[disabled]:hover, +fieldset[disabled] .navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link[disabled]:focus, +fieldset[disabled] .navbar-inverse .btn-link:focus { + color: #444444; +} +.breadcrumb { + padding: 8px 15px; + margin-bottom: 20px; + list-style: none; + background-color: #f5f5f5; + border-radius: 4px; +} +.breadcrumb > li { + display: inline-block; +} +.breadcrumb > li + li:before { + content: "/\00a0"; + padding: 0 5px; + color: #cccccc; +} +.breadcrumb > .active { + color: #777777; +} +.pagination { + display: inline-block; + padding-left: 0; + margin: 20px 0; + border-radius: 4px; +} +.pagination > li { + display: inline; +} +.pagination > li > a, +.pagination > li > span { + position: relative; + float: left; + padding: 6px 12px; + line-height: 1.42857143; + text-decoration: none; + color: #337ab7; + background-color: #ffffff; + border: 1px solid #dddddd; + margin-left: -1px; +} +.pagination > li:first-child > a, +.pagination > li:first-child > span { + margin-left: 0; + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} +.pagination > li:last-child > a, +.pagination > li:last-child > span { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} +.pagination > li > a:hover, +.pagination > li > span:hover, +.pagination > li > a:focus, +.pagination > li > span:focus { + z-index: 2; + color: #23527c; + background-color: #eeeeee; + border-color: #dddddd; +} +.pagination > .active > a, +.pagination > .active > span, +.pagination > .active > a:hover, +.pagination > .active > span:hover, +.pagination > .active > a:focus, +.pagination > .active > span:focus { + z-index: 3; + color: #ffffff; + background-color: #337ab7; + border-color: #337ab7; + cursor: default; +} +.pagination > .disabled > span, +.pagination > .disabled > span:hover, +.pagination > .disabled > span:focus, +.pagination > .disabled > a, +.pagination > .disabled > a:hover, +.pagination > .disabled > a:focus { + color: #777777; + background-color: #ffffff; + border-color: #dddddd; + cursor: not-allowed; +} +.pagination-lg > li > a, +.pagination-lg > li > span { + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; +} +.pagination-lg > li:first-child > a, +.pagination-lg > li:first-child > span { + border-bottom-left-radius: 6px; + border-top-left-radius: 6px; +} +.pagination-lg > li:last-child > a, +.pagination-lg > li:last-child > span { + border-bottom-right-radius: 6px; + border-top-right-radius: 6px; +} +.pagination-sm > li > a, +.pagination-sm > li > span { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; +} +.pagination-sm > li:first-child > a, +.pagination-sm > li:first-child > span { + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +} +.pagination-sm > li:last-child > a, +.pagination-sm > li:last-child > span { + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; +} +.pager { + padding-left: 0; + margin: 20px 0; + list-style: none; + text-align: center; +} +.pager li { + display: inline; +} +.pager li > a, +.pager li > span { + display: inline-block; + padding: 5px 14px; + background-color: #ffffff; + border: 1px solid #dddddd; + border-radius: 15px; +} +.pager li > a:hover, +.pager li > a:focus { + text-decoration: none; + background-color: #eeeeee; +} +.pager .next > a, +.pager .next > span { + float: right; +} +.pager .previous > a, +.pager .previous > span { + float: left; +} +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > a:focus, +.pager .disabled > span { + color: #777777; + background-color: #ffffff; + cursor: not-allowed; +} +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: bold; + line-height: 1; + color: #ffffff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +a.label:hover, +a.label:focus { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} +.label:empty { + display: none; +} +.btn .label { + position: relative; + top: -1px; +} +.label-default { + background-color: #777777; +} +.label-default[href]:hover, +.label-default[href]:focus { + background-color: #5e5e5e; +} +.label-primary { + background-color: #337ab7; +} +.label-primary[href]:hover, +.label-primary[href]:focus { + background-color: #286090; +} +.label-success { + background-color: #5cb85c; +} +.label-success[href]:hover, +.label-success[href]:focus { + background-color: #449d44; +} +.label-info { + background-color: #5bc0de; +} +.label-info[href]:hover, +.label-info[href]:focus { + background-color: #31b0d5; +} +.label-warning { + background-color: #f0ad4e; +} +.label-warning[href]:hover, +.label-warning[href]:focus { + background-color: #ec971f; +} +.label-danger { + background-color: #d9534f; +} +.label-danger[href]:hover, +.label-danger[href]:focus { + background-color: #c9302c; +} +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + color: #ffffff; + line-height: 1; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: #777777; + border-radius: 10px; +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.btn-xs .badge, +.btn-group-xs > .btn .badge { + top: 0; + padding: 1px 5px; +} +a.badge:hover, +a.badge:focus { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} +.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: #337ab7; + background-color: #ffffff; +} +.list-group-item > .badge { + float: right; +} +.list-group-item > .badge + .badge { + margin-right: 5px; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} +.jumbotron { + padding-top: 30px; + padding-bottom: 30px; + margin-bottom: 30px; + color: inherit; + background-color: #eeeeee; +} +.jumbotron h1, +.jumbotron .h1 { + color: inherit; +} +.jumbotron p { + margin-bottom: 15px; + font-size: 21px; + font-weight: 200; +} +.jumbotron > hr { + border-top-color: #d5d5d5; +} +.container .jumbotron, +.container-fluid .jumbotron { + border-radius: 6px; +} +.jumbotron .container { + max-width: 100%; +} +@media screen and (min-width: 768px) { + .jumbotron { + padding-top: 48px; + padding-bottom: 48px; + } + .container .jumbotron, + .container-fluid .jumbotron { + padding-left: 60px; + padding-right: 60px; + } + .jumbotron h1, + .jumbotron .h1 { + font-size: 63px; + } +} +.thumbnail { + display: block; + padding: 4px; + margin-bottom: 20px; + line-height: 1.42857143; + background-color: #ffffff; + border: 1px solid #dddddd; + border-radius: 4px; + -webkit-transition: border 0.2s ease-in-out; + -o-transition: border 0.2s ease-in-out; + transition: border 0.2s ease-in-out; +} +.thumbnail > img, +.thumbnail a > img { + margin-left: auto; + margin-right: auto; +} +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: #337ab7; +} +.thumbnail .caption { + padding: 9px; + color: #333333; +} +.alert { + padding: 15px; + margin-bottom: 20px; + border: 1px solid transparent; + border-radius: 4px; +} +.alert h4 { + margin-top: 0; + color: inherit; +} +.alert .alert-link { + font-weight: bold; +} +.alert > p, +.alert > ul { + margin-bottom: 0; +} +.alert > p + p { + margin-top: 5px; +} +.alert-dismissable, +.alert-dismissible { + padding-right: 35px; +} +.alert-dismissable .close, +.alert-dismissible .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; +} +.alert-success { + background-color: #dff0d8; + border-color: #d6e9c6; + color: #3c763d; +} +.alert-success hr { + border-top-color: #c9e2b3; +} +.alert-success .alert-link { + color: #2b542c; +} +.alert-info { + background-color: #d9edf7; + border-color: #bce8f1; + color: #31708f; +} +.alert-info hr { + border-top-color: #a6e1ec; +} +.alert-info .alert-link { + color: #245269; +} +.alert-warning { + background-color: #fcf8e3; + border-color: #faebcc; + color: #8a6d3b; +} +.alert-warning hr { + border-top-color: #f7e1b5; +} +.alert-warning .alert-link { + color: #66512c; +} +.alert-danger { + background-color: #f2dede; + border-color: #ebccd1; + color: #a94442; +} +.alert-danger hr { + border-top-color: #e4b9c0; +} +.alert-danger .alert-link { + color: #843534; +} +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +.progress { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + background-color: #f5f5f5; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #337ab7; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.progress-striped .progress-bar, +.progress-bar-striped { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 40px 40px; +} +.progress.active .progress-bar, +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress-bar-success { + background-color: #5cb85c; +} +.progress-striped .progress-bar-success { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress-bar-info { + background-color: #5bc0de; +} +.progress-striped .progress-bar-info { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress-bar-warning { + background-color: #f0ad4e; +} +.progress-striped .progress-bar-warning { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress-bar-danger { + background-color: #d9534f; +} +.progress-striped .progress-bar-danger { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.media { + margin-top: 15px; +} +.media:first-child { + margin-top: 0; +} +.media, +.media-body { + zoom: 1; + overflow: hidden; +} +.media-body { + width: 10000px; +} +.media-object { + display: block; +} +.media-object.img-thumbnail { + max-width: none; +} +.media-right, +.media > .pull-right { + padding-left: 10px; +} +.media-left, +.media > .pull-left { + padding-right: 10px; +} +.media-left, +.media-right, +.media-body { + display: table-cell; + vertical-align: top; +} +.media-middle { + vertical-align: middle; +} +.media-bottom { + vertical-align: bottom; +} +.media-heading { + margin-top: 0; + margin-bottom: 5px; +} +.media-list { + padding-left: 0; + list-style: none; +} +.list-group { + margin-bottom: 20px; + padding-left: 0; +} +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: #ffffff; + border: 1px solid #dddddd; +} +.list-group-item:first-child { + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +a.list-group-item, +button.list-group-item { + color: #555555; +} +a.list-group-item .list-group-item-heading, +button.list-group-item .list-group-item-heading { + color: #333333; +} +a.list-group-item:hover, +button.list-group-item:hover, +a.list-group-item:focus, +button.list-group-item:focus { + text-decoration: none; + color: #555555; + background-color: #f5f5f5; +} +button.list-group-item { + width: 100%; + text-align: left; +} +.list-group-item.disabled, +.list-group-item.disabled:hover, +.list-group-item.disabled:focus { + background-color: #eeeeee; + color: #777777; + cursor: not-allowed; +} +.list-group-item.disabled .list-group-item-heading, +.list-group-item.disabled:hover .list-group-item-heading, +.list-group-item.disabled:focus .list-group-item-heading { + color: inherit; +} +.list-group-item.disabled .list-group-item-text, +.list-group-item.disabled:hover .list-group-item-text, +.list-group-item.disabled:focus .list-group-item-text { + color: #777777; +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + z-index: 2; + color: #ffffff; + background-color: #337ab7; + border-color: #337ab7; +} +.list-group-item.active .list-group-item-heading, +.list-group-item.active:hover .list-group-item-heading, +.list-group-item.active:focus .list-group-item-heading, +.list-group-item.active .list-group-item-heading > small, +.list-group-item.active:hover .list-group-item-heading > small, +.list-group-item.active:focus .list-group-item-heading > small, +.list-group-item.active .list-group-item-heading > .small, +.list-group-item.active:hover .list-group-item-heading > .small, +.list-group-item.active:focus .list-group-item-heading > .small { + color: inherit; +} +.list-group-item.active .list-group-item-text, +.list-group-item.active:hover .list-group-item-text, +.list-group-item.active:focus .list-group-item-text { + color: #c7ddef; +} +.list-group-item-success { + color: #3c763d; + background-color: #dff0d8; +} +a.list-group-item-success, +button.list-group-item-success { + color: #3c763d; +} +a.list-group-item-success .list-group-item-heading, +button.list-group-item-success .list-group-item-heading { + color: inherit; +} +a.list-group-item-success:hover, +button.list-group-item-success:hover, +a.list-group-item-success:focus, +button.list-group-item-success:focus { + color: #3c763d; + background-color: #d0e9c6; +} +a.list-group-item-success.active, +button.list-group-item-success.active, +a.list-group-item-success.active:hover, +button.list-group-item-success.active:hover, +a.list-group-item-success.active:focus, +button.list-group-item-success.active:focus { + color: #fff; + background-color: #3c763d; + border-color: #3c763d; +} +.list-group-item-info { + color: #31708f; + background-color: #d9edf7; +} +a.list-group-item-info, +button.list-group-item-info { + color: #31708f; +} +a.list-group-item-info .list-group-item-heading, +button.list-group-item-info .list-group-item-heading { + color: inherit; +} +a.list-group-item-info:hover, +button.list-group-item-info:hover, +a.list-group-item-info:focus, +button.list-group-item-info:focus { + color: #31708f; + background-color: #c4e3f3; +} +a.list-group-item-info.active, +button.list-group-item-info.active, +a.list-group-item-info.active:hover, +button.list-group-item-info.active:hover, +a.list-group-item-info.active:focus, +button.list-group-item-info.active:focus { + color: #fff; + background-color: #31708f; + border-color: #31708f; +} +.list-group-item-warning { + color: #8a6d3b; + background-color: #fcf8e3; +} +a.list-group-item-warning, +button.list-group-item-warning { + color: #8a6d3b; +} +a.list-group-item-warning .list-group-item-heading, +button.list-group-item-warning .list-group-item-heading { + color: inherit; +} +a.list-group-item-warning:hover, +button.list-group-item-warning:hover, +a.list-group-item-warning:focus, +button.list-group-item-warning:focus { + color: #8a6d3b; + background-color: #faf2cc; +} +a.list-group-item-warning.active, +button.list-group-item-warning.active, +a.list-group-item-warning.active:hover, +button.list-group-item-warning.active:hover, +a.list-group-item-warning.active:focus, +button.list-group-item-warning.active:focus { + color: #fff; + background-color: #8a6d3b; + border-color: #8a6d3b; +} +.list-group-item-danger { + color: #a94442; + background-color: #f2dede; +} +a.list-group-item-danger, +button.list-group-item-danger { + color: #a94442; +} +a.list-group-item-danger .list-group-item-heading, +button.list-group-item-danger .list-group-item-heading { + color: inherit; +} +a.list-group-item-danger:hover, +button.list-group-item-danger:hover, +a.list-group-item-danger:focus, +button.list-group-item-danger:focus { + color: #a94442; + background-color: #ebcccc; +} +a.list-group-item-danger.active, +button.list-group-item-danger.active, +a.list-group-item-danger.active:hover, +button.list-group-item-danger.active:hover, +a.list-group-item-danger.active:focus, +button.list-group-item-danger.active:focus { + color: #fff; + background-color: #a94442; + border-color: #a94442; +} +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} +.panel { + margin-bottom: 20px; + background-color: #ffffff; + border: 1px solid transparent; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); +} +.panel-body { + padding: 15px; +} +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel-heading > .dropdown .dropdown-toggle { + color: inherit; +} +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + color: inherit; +} +.panel-title > a, +.panel-title > small, +.panel-title > .small, +.panel-title > small > a, +.panel-title > .small > a { + color: inherit; +} +.panel-footer { + padding: 10px 15px; + background-color: #f5f5f5; + border-top: 1px solid #dddddd; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .list-group, +.panel > .panel-collapse > .list-group { + margin-bottom: 0; +} +.panel > .list-group .list-group-item, +.panel > .panel-collapse > .list-group .list-group-item { + border-width: 1px 0; + border-radius: 0; +} +.panel > .list-group:first-child .list-group-item:first-child, +.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { + border-top: 0; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel > .list-group:last-child .list-group-item:last-child, +.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { + border-bottom: 0; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.panel-heading + .list-group .list-group-item:first-child { + border-top-width: 0; +} +.list-group + .panel-footer { + border-top-width: 0; +} +.panel > .table, +.panel > .table-responsive > .table, +.panel > .panel-collapse > .table { + margin-bottom: 0; +} +.panel > .table caption, +.panel > .table-responsive > .table caption, +.panel > .panel-collapse > .table caption { + padding-left: 15px; + padding-right: 15px; +} +.panel > .table:first-child, +.panel > .table-responsive:first-child > .table:first-child { + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { + border-top-right-radius: 3px; +} +.panel > .table:last-child, +.panel > .table-responsive:last-child > .table:last-child { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { + border-bottom-right-radius: 3px; +} +.panel > .panel-body + .table, +.panel > .panel-body + .table-responsive, +.panel > .table + .panel-body, +.panel > .table-responsive + .panel-body { + border-top: 1px solid #dddddd; +} +.panel > .table > tbody:first-child > tr:first-child th, +.panel > .table > tbody:first-child > tr:first-child td { + border-top: 0; +} +.panel > .table-bordered, +.panel > .table-responsive > .table-bordered { + border: 0; +} +.panel > .table-bordered > thead > tr > th:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:first-child, +.panel > .table-bordered > tbody > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, +.panel > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-bordered > thead > tr > td:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:first-child, +.panel > .table-bordered > tbody > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, +.panel > .table-bordered > tfoot > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} +.panel > .table-bordered > thead > tr > th:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:last-child, +.panel > .table-bordered > tbody > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, +.panel > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-bordered > thead > tr > td:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:last-child, +.panel > .table-bordered > tbody > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, +.panel > .table-bordered > tfoot > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} +.panel > .table-bordered > thead > tr:first-child > td, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > td, +.panel > .table-bordered > tbody > tr:first-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, +.panel > .table-bordered > thead > tr:first-child > th, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > th, +.panel > .table-bordered > tbody > tr:first-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { + border-bottom: 0; +} +.panel > .table-bordered > tbody > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, +.panel > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-bordered > tbody > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, +.panel > .table-bordered > tfoot > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { + border-bottom: 0; +} +.panel > .table-responsive { + border: 0; + margin-bottom: 0; +} +.panel-group { + margin-bottom: 20px; +} +.panel-group .panel { + margin-bottom: 0; + border-radius: 4px; +} +.panel-group .panel + .panel { + margin-top: 5px; +} +.panel-group .panel-heading { + border-bottom: 0; +} +.panel-group .panel-heading + .panel-collapse > .panel-body, +.panel-group .panel-heading + .panel-collapse > .list-group { + border-top: 1px solid #dddddd; +} +.panel-group .panel-footer { + border-top: 0; +} +.panel-group .panel-footer + .panel-collapse .panel-body { + border-bottom: 1px solid #dddddd; +} +.panel-default { + border-color: #dddddd; +} +.panel-default > .panel-heading { + color: #333333; + background-color: #f5f5f5; + border-color: #dddddd; +} +.panel-default > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #dddddd; +} +.panel-default > .panel-heading .badge { + color: #f5f5f5; + background-color: #333333; +} +.panel-default > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #dddddd; +} +.panel-primary { + border-color: #337ab7; +} +.panel-primary > .panel-heading { + color: #ffffff; + background-color: #337ab7; + border-color: #337ab7; +} +.panel-primary > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #337ab7; +} +.panel-primary > .panel-heading .badge { + color: #337ab7; + background-color: #ffffff; +} +.panel-primary > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #337ab7; +} +.panel-success { + border-color: #d6e9c6; +} +.panel-success > .panel-heading { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; +} +.panel-success > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #d6e9c6; +} +.panel-success > .panel-heading .badge { + color: #dff0d8; + background-color: #3c763d; +} +.panel-success > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #d6e9c6; +} +.panel-info { + border-color: #bce8f1; +} +.panel-info > .panel-heading { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; +} +.panel-info > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #bce8f1; +} +.panel-info > .panel-heading .badge { + color: #d9edf7; + background-color: #31708f; +} +.panel-info > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #bce8f1; +} +.panel-warning { + border-color: #faebcc; +} +.panel-warning > .panel-heading { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; +} +.panel-warning > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #faebcc; +} +.panel-warning > .panel-heading .badge { + color: #fcf8e3; + background-color: #8a6d3b; +} +.panel-warning > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #faebcc; +} +.panel-danger { + border-color: #ebccd1; +} +.panel-danger > .panel-heading { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; +} +.panel-danger > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #ebccd1; +} +.panel-danger > .panel-heading .badge { + color: #f2dede; + background-color: #a94442; +} +.panel-danger > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #ebccd1; +} +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; +} +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object, +.embed-responsive video { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; +} +.embed-responsive-16by9 { + padding-bottom: 56.25%; +} +.embed-responsive-4by3 { + padding-bottom: 75%; +} +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} +.well-lg { + padding: 24px; + border-radius: 6px; +} +.well-sm { + padding: 9px; + border-radius: 3px; +} +.close { + float: right; + font-size: 21px; + font-weight: bold; + line-height: 1; + color: #000000; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.2; + filter: alpha(opacity=20); +} +.close:hover, +.close:focus { + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.5; + filter: alpha(opacity=50); +} +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} +.modal-open { + overflow: hidden; +} +.modal { + display: none; + overflow: hidden; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + -webkit-overflow-scrolling: touch; + outline: 0; +} +.modal.fade .modal-dialog { + -webkit-transform: translate(0, -25%); + -ms-transform: translate(0, -25%); + -o-transform: translate(0, -25%); + transform: translate(0, -25%); + -webkit-transition: -webkit-transform 0.3s ease-out; + -moz-transition: -moz-transform 0.3s ease-out; + -o-transition: -o-transform 0.3s ease-out; + transition: transform 0.3s ease-out; +} +.modal.in .modal-dialog { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} +.modal-content { + position: relative; + background-color: #ffffff; + border: 1px solid #999999; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + background-clip: padding-box; + outline: 0; +} +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000000; +} +.modal-backdrop.fade { + opacity: 0; + filter: alpha(opacity=0); +} +.modal-backdrop.in { + opacity: 0.5; + filter: alpha(opacity=50); +} +.modal-header { + padding: 15px; + border-bottom: 1px solid #e5e5e5; + min-height: 16.42857143px; +} +.modal-header .close { + margin-top: -2px; +} +.modal-title { + margin: 0; + line-height: 1.42857143; +} +.modal-body { + position: relative; + padding: 15px; +} +.modal-footer { + padding: 15px; + text-align: right; + border-top: 1px solid #e5e5e5; +} +.modal-footer .btn + .btn { + margin-left: 5px; + margin-bottom: 0; +} +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} +@media (min-width: 768px) { + .modal-dialog { + width: 600px; + margin: 30px auto; + } + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + } + .modal-sm { + width: 300px; + } +} +@media (min-width: 992px) { + .modal-lg { + width: 900px; + } +} +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 12px; + opacity: 0; + filter: alpha(opacity=0); +} +.tooltip.in { + opacity: 0.9; + filter: alpha(opacity=90); +} +.tooltip.top { + margin-top: -3px; + padding: 5px 0; +} +.tooltip.right { + margin-left: 3px; + padding: 0 5px; +} +.tooltip.bottom { + margin-top: 3px; + padding: 5px 0; +} +.tooltip.left { + margin-left: -3px; + padding: 0 5px; +} +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + background-color: #000000; + border-radius: 4px; +} +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-left .tooltip-arrow { + bottom: 0; + right: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-right .tooltip-arrow { + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: none; + max-width: 276px; + padding: 1px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 14px; + background-color: #ffffff; + background-clip: padding-box; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} +.popover.top { + margin-top: -10px; +} +.popover.right { + margin-left: 10px; +} +.popover.bottom { + margin-top: 10px; +} +.popover.left { + margin-left: -10px; +} +.popover-title { + margin: 0; + padding: 8px 14px; + font-size: 14px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + border-radius: 5px 5px 0 0; +} +.popover-content { + padding: 9px 14px; +} +.popover > .arrow, +.popover > .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover > .arrow { + border-width: 11px; +} +.popover > .arrow:after { + border-width: 10px; + content: ""; +} +.popover.top > .arrow { + left: 50%; + margin-left: -11px; + border-bottom-width: 0; + border-top-color: #999999; + border-top-color: rgba(0, 0, 0, 0.25); + bottom: -11px; +} +.popover.top > .arrow:after { + content: " "; + bottom: 1px; + margin-left: -10px; + border-bottom-width: 0; + border-top-color: #ffffff; +} +.popover.right > .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-left-width: 0; + border-right-color: #999999; + border-right-color: rgba(0, 0, 0, 0.25); +} +.popover.right > .arrow:after { + content: " "; + left: 1px; + bottom: -10px; + border-left-width: 0; + border-right-color: #ffffff; +} +.popover.bottom > .arrow { + left: 50%; + margin-left: -11px; + border-top-width: 0; + border-bottom-color: #999999; + border-bottom-color: rgba(0, 0, 0, 0.25); + top: -11px; +} +.popover.bottom > .arrow:after { + content: " "; + top: 1px; + margin-left: -10px; + border-top-width: 0; + border-bottom-color: #ffffff; +} +.popover.left > .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-right-width: 0; + border-left-color: #999999; + border-left-color: rgba(0, 0, 0, 0.25); +} +.popover.left > .arrow:after { + content: " "; + right: 1px; + border-right-width: 0; + border-left-color: #ffffff; + bottom: -10px; +} +.carousel { + position: relative; +} +.carousel-inner { + position: relative; + overflow: hidden; + width: 100%; +} +.carousel-inner > .item { + display: none; + position: relative; + -webkit-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + line-height: 1; +} +@media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .item { + -webkit-transition: -webkit-transform 0.6s ease-in-out; + -moz-transition: -moz-transform 0.6s ease-in-out; + -o-transition: -o-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-perspective: 1000px; + -moz-perspective: 1000px; + perspective: 1000px; + } + .carousel-inner > .item.next, + .carousel-inner > .item.active.right { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + left: 0; + } + .carousel-inner > .item.prev, + .carousel-inner > .item.active.left { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + left: 0; + } + .carousel-inner > .item.next.left, + .carousel-inner > .item.prev.right, + .carousel-inner > .item.active { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + left: 0; + } +} +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { + display: block; +} +.carousel-inner > .active { + left: 0; +} +.carousel-inner > .next, +.carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel-inner > .next { + left: 100%; +} +.carousel-inner > .prev { + left: -100%; +} +.carousel-inner > .next.left, +.carousel-inner > .prev.right { + left: 0; +} +.carousel-inner > .active.left { + left: -100%; +} +.carousel-inner > .active.right { + left: 100%; +} +.carousel-control { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 15%; + opacity: 0.5; + filter: alpha(opacity=50); + font-size: 20px; + color: #ffffff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); +} +.carousel-control.left { + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); +} +.carousel-control.right { + left: auto; + right: 0; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); +} +.carousel-control:hover, +.carousel-control:focus { + outline: 0; + color: #ffffff; + text-decoration: none; + opacity: 0.9; + filter: alpha(opacity=90); +} +.carousel-control .icon-prev, +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-left, +.carousel-control .glyphicon-chevron-right { + position: absolute; + top: 50%; + margin-top: -10px; + z-index: 5; + display: inline-block; +} +.carousel-control .icon-prev, +.carousel-control .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; +} +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; +} +.carousel-control .icon-prev, +.carousel-control .icon-next { + width: 20px; + height: 20px; + line-height: 1; + font-family: serif; +} +.carousel-control .icon-prev:before { + content: '\2039'; +} +.carousel-control .icon-next:before { + content: '\203a'; +} +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + margin-left: -30%; + padding-left: 0; + list-style: none; + text-align: center; +} +.carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + border: 1px solid #ffffff; + border-radius: 10px; + cursor: pointer; + background-color: #000 \9; + background-color: rgba(0, 0, 0, 0); +} +.carousel-indicators .active { + margin: 0; + width: 12px; + height: 12px; + background-color: #ffffff; +} +.carousel-caption { + position: absolute; + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #ffffff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); +} +.carousel-caption .btn { + text-shadow: none; +} +@media screen and (min-width: 768px) { + .carousel-control .glyphicon-chevron-left, + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .carousel-control .glyphicon-chevron-left, + .carousel-control .icon-prev { + margin-left: -15px; + } + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-next { + margin-right: -15px; + } + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + .carousel-indicators { + bottom: 20px; } } .clearfix:before, -.clearfix:after { +.clearfix:after, +.dl-horizontal dd:before, +.dl-horizontal dd:after, +.container:before, +.container:after, +.container-fluid:before, +.container-fluid:after, +.row:before, +.row:after, +.form-horizontal .form-group:before, +.form-horizontal .form-group:after, +.btn-toolbar:before, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:before, +.btn-group-vertical > .btn-group:after, +.nav:before, +.nav:after, +.navbar:before, +.navbar:after, +.navbar-header:before, +.navbar-header:after, +.navbar-collapse:before, +.navbar-collapse:after, +.pager:before, +.pager:after, +.panel-body:before, +.panel-body:after, +.modal-footer:before, +.modal-footer:after { content: " "; - /* 1 */ display: table; - /* 2 */ } -.clearfix:after { +.clearfix:after, +.dl-horizontal dd:after, +.container:after, +.container-fluid:after, +.row:after, +.form-horizontal .form-group:after, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:after, +.nav:after, +.navbar:after, +.navbar-header:after, +.navbar-collapse:after, +.pager:after, +.panel-body:after, +.modal-footer:after { clear: both; } +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} .pull-right { - float: right; + float: right !important; } .pull-left { - float: left; + float: left !important; } .hide { display: none !important; @@ -998,67 +6552,102 @@ pre code { background-color: transparent; border: 0; } +.hidden { + display: none !important; +} .affix { position: fixed; } @-ms-viewport { width: device-width; } -@media screen and (max-width: 400px) { - @-ms-viewport { - width: 320px; - } -} -.hidden { - display: none; - visibility: hidden; -} -.visible-sm { - display: block !important; -} -tr.visible-sm { - display: table-row !important; -} -th.visible-sm, -td.visible-sm { - display: table-cell !important; -} -.visible-md { - display: none !important; -} +.visible-xs, +.visible-sm, +.visible-md, .visible-lg { display: none !important; } -.hidden-sm { +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { display: none !important; } -.hidden-md { - display: block !important; +@media (max-width: 767px) { + .visible-xs { + display: block !important; + } + table.visible-xs { + display: table !important; + } + tr.visible-xs { + display: table-row !important; + } + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } } -tr.hidden-md { - display: table-row !important; +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } } -th.hidden-md, -td.hidden-md { - display: table-cell !important; +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } } -.hidden-lg { - display: block !important; -} -tr.hidden-lg { - display: table-row !important; -} -th.hidden-lg, -td.hidden-lg { - display: table-cell !important; +@media (max-width: 767px) { + .visible-xs-inline-block { + display: inline-block !important; + } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { - display: none !important; + display: block !important; } + table.visible-sm { + display: table !important; + } + tr.visible-sm { + display: table-row !important; + } + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-block { + display: block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline { + display: inline !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline-block { + display: inline-block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } + table.visible-md { + display: table !important; + } tr.visible-md { display: table-row !important; } @@ -1066,43 +6655,29 @@ td.hidden-lg { td.visible-md { display: table-cell !important; } - .visible-lg { - display: none !important; - } - .hidden-sm { +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-block { display: block !important; } - tr.hidden-sm { - display: table-row !important; - } - th.hidden-sm, - td.hidden-sm { - display: table-cell !important; - } - .hidden-md { - display: none !important; - } - .hidden-lg { - display: block !important; - } - tr.hidden-lg { - display: table-row !important; - } - th.hidden-lg, - td.hidden-lg { - display: table-cell !important; - } } -@media (min-width: 992px) { - .visible-sm { - display: none !important; +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline { + display: inline !important; } - .visible-md { - display: none !important; +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline-block { + display: inline-block !important; } +} +@media (min-width: 1200px) { .visible-lg { display: block !important; } + table.visible-lg { + display: table !important; + } tr.visible-lg { display: table-row !important; } @@ -1110,26 +6685,38 @@ td.hidden-lg { td.visible-lg { display: table-cell !important; } +} +@media (min-width: 1200px) { + .visible-lg-block { + display: block !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline { + display: inline !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline-block { + display: inline-block !important; + } +} +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { - display: block !important; - } - tr.hidden-sm { - display: table-row !important; - } - th.hidden-sm, - td.hidden-sm { - display: table-cell !important; + display: none !important; } +} +@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { - display: block !important; - } - tr.hidden-md { - display: table-row !important; - } - th.hidden-md, - td.hidden-md { - display: table-cell !important; + display: none !important; } +} +@media (min-width: 1200px) { .hidden-lg { display: none !important; } @@ -1141,6 +6728,9 @@ td.hidden-lg { .visible-print { display: block !important; } + table.visible-print { + display: table !important; + } tr.visible-print { display: table-row !important; } @@ -1148,6 +6738,32 @@ td.hidden-lg { td.visible-print { display: table-cell !important; } +} +.visible-print-block { + display: none !important; +} +@media print { + .visible-print-block { + display: block !important; + } +} +.visible-print-inline { + display: none !important; +} +@media print { + .visible-print-inline { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; +} +@media print { + .visible-print-inline-block { + display: inline-block !important; + } +} +@media print { .hidden-print { display: none !important; } @@ -1362,22 +6978,16 @@ footer a { } .download-button { position: relative; - float: left; - width: 100%; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .download-button { + float: left; width: 33.33333333%; } } -@media (min-width: 768px) { - .download-button { - margin-left: 33.33333333%; - } -} .banner { background-color: #e6e6e6; background-image: url("img/large-bg2.jpg"); @@ -1424,9 +7034,7 @@ footer a { .iconExamples:before, .iconExamples:after { content: " "; - /* 1 */ display: table; - /* 2 */ } .iconExamples:after { clear: both; @@ -1434,9 +7042,7 @@ footer a { .iconExamples:before, .iconExamples:after { content: " "; - /* 1 */ display: table; - /* 2 */ } .iconExamples:after { clear: both; @@ -1453,9 +7059,7 @@ footer a { .iconExamples .example:before, .iconExamples .example:after { content: " "; - /* 1 */ display: table; - /* 2 */ } .iconExamples .example:after { clear: both; @@ -1463,9 +7067,7 @@ footer a { .iconExamples .example:before, .iconExamples .example:after { content: " "; - /* 1 */ display: table; - /* 2 */ } .iconExamples .example:after { clear: both; @@ -1551,15 +7153,24 @@ h2 { margin: 0 auto; } .icon-wrap { + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; float: left; - width: 50px; - height: 120px; - font-size: 20px; + font-size: 30px; +} +@media (min-width: 768px) { + .icon-wrap { + float: left; + width: 25%; + } } .icon-wrap .icon-name { font-size: 10px; } -.icon-wrap .icon { +.icon-wrap .icon, +.icon-wrap .wi { display: inline-block; font-family: 'weathericons'; font-style: normal; @@ -1567,4 +7178,10 @@ h2 { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + float: left; + margin-right: 15px; + margin-bottom: 15px; +} +.icon-wrap .icon_unicode { + font-size: 10px; } diff --git a/_docs/index.html b/_docs/index.html index 5e4fc92..826d48f 100644 --- a/_docs/index.html +++ b/_docs/index.html @@ -11,404 +11,431 @@

this

this

-
-
-
-
wi-time-1
-
f08a
-
-
-
-
wi-time-10
-
f093
-
-
-
-
wi-time-11
-
f094
-
-
-
-
wi-time-12
-
f089
-
-
-
-
wi-time-2
-
f08b
-
-
-
-
wi-time-3
-
f08c
-
-
-
-
wi-time-4
-
f08d
-
-
-
-
wi-time-5
-
f08e
-
-
-
-
wi-time-6
-
f08f
-
-
-
-
wi-time-7
-
f090
-
-
-
-
wi-time-8
-
f091
-
-
-
-
wi-time-9
-
f092
-
-
-
-
wi-wind-beaufort-0
-
f0b7
-
-
-
-
wi-wind-beaufort-1
-
f0b8
-
-
-
-
wi-wind-beaufort-2
-
f0b9
-
-
-
-
wi-wind-beaufort-3
-
f0ba
-
-
-
-
wi-wind-beaufort-4
-
f0bb
-
-
-
-
wi-wind-beaufort-5
-
f0bc
-
-
-
-
wi-wind-beaufort-6
-
f0bd
-
-
-
-
wi-wind-beaufort-7
-
f0be
-
-
-
-
wi-wind-beaufort-8
-
f0bf
-
-
-
-
wi-wind-beaufort-9
-
f0c0
-
-
-
-
wi-wind-beaufort-10
-
f0c1
-
-
-
-
wi-wind-beaufort-11
-
f0c2
-
-
-
-
wi-wind-beaufort-12
-
f0c3
-
-
-
-
wi-moon-full
-
f0a3
-
-
-
-
wi-moon-new
-
f095
-
-
-
-
wi-moon-waning-crescent-1
-
f0ab
-
-
-
-
wi-moon-waning-crescent-2
-
f0ac
-
-
-
-
wi-moon-waning-crescent-3
-
f0ad
-
-
-
-
wi-moon-waning-crescent-4
-
f0ae
-
-
-
-
wi-moon-waning-crescent-5
-
f0af
-
-
-
-
wi-moon-waning-crescent-6
-
f0b0
-
-
-
-
wi-moon-waning-gibbous-1
-
f0a4
-
-
-
-
wi-moon-waning-gibbous-2
-
f0a5
-
-
-
-
wi-moon-waning-gibbous-3
-
f0a6
-
-
-
-
wi-moon-waning-gibbous-4
-
f0a7
-
-
-
-
wi-moon-waning-gibbous-5
-
f0a8
-
-
-
-
wi-moon-waning-gibbous-6
-
f0a9
-
-
-
-
wi-moon-waxing-cresent-1
-
f096
-
-
-
-
wi-moon-waxing-cresent-2
-
f097
-
-
-
-
wi-moon-waxing-cresent-3
-
f098
-
-
-
-
wi-moon-waxing-cresent-4
-
f099
-
-
-
-
wi-moon-waxing-cresent-5
-
f09a
-
-
-
-
wi-moon-waxing-cresent-6
-
f09b
-
-
-
-
wi-moon-waxing-gibbous-1
-
f09d
-
-
-
-
wi-moon-waxing-gibbous-2
-
f09e
-
-
-
-
wi-moon-waxing-gibbous-3
-
f09f
-
-
-
-
wi-moon-waxing-gibbous-4
-
f0a0
-
-
-
-
wi-moon-waxing-gibbous-5
-
f0a1
-
-
-
-
wi-moon-waxing-gibbous-6
-
f0a2
-
-
-
-
wi-direction-down
-
f044
-
-
-
-
wi-direction-down-left
-
f043
-
-
-
-
wi-direction-down-right
-
f088
-
-
-
-
wi-direction-left
-
f048
-
-
-
-
wi-direction-right
-
f04d
-
-
-
-
wi-direction-up
-
f058
-
-
-
-
wi-direction-up-left
-
f087
-
-
-
-
wi-direction-up-right
-
f057
-
-
-
-
wi-wind-default.point-0-deg
-
DEFAULT
-
f0b1
-
-
-
-
wi-wind-default.point-0-deg
-
N
-
f0b1
-
-
-
-
wi-wind-default.point-23-deg
-
NNE
-
f0b1
-
-
-
-
wi-wind-default.point-45-deg
-
NE
-
f0b1
-
-
-
-
wi-wind-default.point-68-deg
-
ENE
-
f0b1
-
-
-
-
wi-wind-default.point-90-deg
-
E
-
f0b1
-
-
-
-
wi-wind-default.point-113-deg
-
ESE
-
f0b1
-
-
-
-
wi-wind-default.point-135-deg
-
SE
-
f0b1
-
-
-
-
wi-wind-default.point-158-deg
-
SSE
-
f0b1
-
-
-
-
wi-wind-default.point-180-deg
-
S
-
f0b1
-
-
-
-
wi-wind-default.point-203-deg
-
SSW
-
f0b1
-
-
-
-
wi-wind-default.point-225-deg
-
SW
-
f0b1
-
-
-
-
wi-wind-default.point-248-deg
-
WSW
-
f0b1
-
-
-
-
wi-wind-default.point-270-deg
-
W
-
f0b1
-
-
-
-
wi-wind-default.point-293-deg
-
WNW
-
f0b1
-
-
-
-
wi-wind-default.point-313-deg
-
NW
-
f0b1
-
-
-
-
wi-wind-default.point-336-deg
-
NNW
-
f0b1
-
-
+
+
+
+

Time

+
+
+
+
wi-time-1
+
f08a
+
+
+
+
wi-time-2
+
f08b
+
+
+
+
wi-time-3
+
f08c
+
+
+
+
wi-time-4
+
f08d
+
+
+
+
wi-time-5
+
f08e
+
+
+
+
wi-time-6
+
f08f
+
+
+
+
wi-time-7
+
f090
+
+
+
+
wi-time-8
+
f091
+
+
+
+
wi-time-9
+
f092
+
+
+
+
wi-time-10
+
f093
+
+
+
+
wi-time-11
+
f094
+
+
+
+
wi-time-12
+
f089
+
+
+
+
+

Beaufort

+
+
+
+
wi-wind-beaufort-0
+
f0b7
+
+
+
+
wi-wind-beaufort-1
+
f0b8
+
+
+
+
wi-wind-beaufort-2
+
f0b9
+
+
+
+
wi-wind-beaufort-3
+
f0ba
+
+
+
+
wi-wind-beaufort-4
+
f0bb
+
+
+
+
wi-wind-beaufort-5
+
f0bc
+
+
+
+
wi-wind-beaufort-6
+
f0bd
+
+
+
+
wi-wind-beaufort-7
+
f0be
+
+
+
+
wi-wind-beaufort-8
+
f0bf
+
+
+
+
wi-wind-beaufort-9
+
f0c0
+
+
+
+
wi-wind-beaufort-10
+
f0c1
+
+
+
+
wi-wind-beaufort-11
+
f0c2
+
+
+
+
wi-wind-beaufort-12
+
f0c3
+
+
+
+
+

Moons

+
+
+
+
wi-moon-new
+
f095
+
+
+
+
wi-moon-waxing-cresent-1
+
f096
+
+
+
+
wi-moon-waxing-cresent-2
+
f097
+
+
+
+
wi-moon-waxing-cresent-3
+
f098
+
+
+
+
wi-moon-waxing-cresent-4
+
f099
+
+
+
+
wi-moon-waxing-cresent-5
+
f09a
+
+
+
+
wi-moon-waxing-cresent-6
+
f09b
+
+
+
+
wi-moon-waxing-gibbous-1
+
f09d
+
+
+
+
wi-moon-waxing-gibbous-2
+
f09e
+
+
+
+
wi-moon-waxing-gibbous-3
+
f09f
+
+
+
+
wi-moon-waxing-gibbous-4
+
f0a0
+
+
+
+
wi-moon-waxing-gibbous-5
+
f0a1
+
+
+
+
wi-moon-waxing-gibbous-6
+
f0a2
+
+
+
+
wi-moon-full
+
f0a3
+
+
+
+
wi-moon-waning-gibbous-1
+
f0a4
+
+
+
+
wi-moon-waning-gibbous-2
+
f0a5
+
+
+
+
wi-moon-waning-gibbous-3
+
f0a6
+
+
+
+
wi-moon-waning-gibbous-4
+
f0a7
+
+
+
+
wi-moon-waning-gibbous-5
+
f0a8
+
+
+
+
wi-moon-waning-gibbous-6
+
f0a9
+
+
+
+
wi-moon-waning-crescent-1
+
f0ab
+
+
+
+
wi-moon-waning-crescent-2
+
f0ac
+
+
+
+
wi-moon-waning-crescent-3
+
f0ad
+
+
+
+
wi-moon-waning-crescent-4
+
f0ae
+
+
+
+
wi-moon-waning-crescent-5
+
f0af
+
+
+
+
wi-moon-waning-crescent-6
+
f0b0
+
+
+
+
+

Directions

+
+
+
+
wi-direction-up
+
f058
+
+
+
+
wi-direction-up-right
+
f057
+
+
+
+
wi-direction-right
+
f04d
+
+
+
+
wi-direction-down-right
+
f088
+
+
+
+
wi-direction-down
+
f044
+
+
+
+
wi-direction-down-left
+
f043
+
+
+
+
wi-direction-left
+
f048
+
+
+
+
wi-direction-up-left
+
f087
+
+
+
+
+

Wind

+
+
+
+
wi-wind-default.point-0-deg
+
DEFAULT
+
f0b1
+
+
+
+
wi-wind-default.point-0-deg
+
N
+
f0b1
+
+
+
+
wi-wind-default.point-23-deg
+
NNE
+
f0b1
+
+
+
+
wi-wind-default.point-45-deg
+
NE
+
f0b1
+
+
+
+
wi-wind-default.point-68-deg
+
ENE
+
f0b1
+
+
+
+
wi-wind-default.point-90-deg
+
E
+
f0b1
+
+
+
+
wi-wind-default.point-113-deg
+
ESE
+
f0b1
+
+
+
+
wi-wind-default.point-135-deg
+
SE
+
f0b1
+
+
+
+
wi-wind-default.point-158-deg
+
SSE
+
f0b1
+
+
+
+
wi-wind-default.point-180-deg
+
S
+
f0b1
+
+
+
+
wi-wind-default.point-203-deg
+
SSW
+
f0b1
+
+
+
+
wi-wind-default.point-225-deg
+
SW
+
f0b1
+
+
+
+
wi-wind-default.point-248-deg
+
WSW
+
f0b1
+
+
+
+
wi-wind-default.point-270-deg
+
W
+
f0b1
+
+
+
+
wi-wind-default.point-293-deg
+
WNW
+
f0b1
+
+
+
+
wi-wind-default.point-313-deg
+
NW
+
f0b1
+
+
+
+
wi-wind-default.point-336-deg
+
NNW
+
f0b1
+
+
+
+
+
\ No newline at end of file diff --git a/_docs/jade/icon-list-direction.jade b/_docs/jade/icon-list-direction.jade index bb8e42f..c19ee78 100644 --- a/_docs/jade/icon-list-direction.jade +++ b/_docs/jade/icon-list-direction.jade @@ -1,3 +1,19 @@ +.icon-wrap + .icon  + .icon-name wi-direction-up + .icon_unicode f058 +.icon-wrap + .icon  + .icon-name wi-direction-up-right + .icon_unicode f057 +.icon-wrap + .icon  + .icon-name wi-direction-right + .icon_unicode f04d +.icon-wrap + .icon  + .icon-name wi-direction-down-right + .icon_unicode f088 .icon-wrap .icon  .icon-name wi-direction-down @@ -6,27 +22,11 @@ .icon  .icon-name wi-direction-down-left .icon_unicode f043 -.icon-wrap - .icon  - .icon-name wi-direction-down-right - .icon_unicode f088 .icon-wrap .icon  .icon-name wi-direction-left .icon_unicode f048 -.icon-wrap - .icon  - .icon-name wi-direction-right - .icon_unicode f04d -.icon-wrap - .icon  - .icon-name wi-direction-up - .icon_unicode f058 .icon-wrap .icon  .icon-name wi-direction-up-left - .icon_unicode f087 -.icon-wrap - .icon  - .icon-name wi-direction-up-right - .icon_unicode f057 \ No newline at end of file + .icon_unicode f087 \ No newline at end of file diff --git a/_docs/jade/icon-list-moon.jade b/_docs/jade/icon-list-moon.jade index 01e6426..769cb84 100644 --- a/_docs/jade/icon-list-moon.jade +++ b/_docs/jade/icon-list-moon.jade @@ -1,59 +1,7 @@ -.icon-wrap - .icon  - .icon-name wi-moon-full - .icon_unicode f0a3 .icon-wrap .icon  .icon-name wi-moon-new .icon_unicode f095 -.icon-wrap - .icon  - .icon-name wi-moon-waning-crescent-1 - .icon_unicode f0ab -.icon-wrap - .icon  - .icon-name wi-moon-waning-crescent-2 - .icon_unicode f0ac -.icon-wrap - .icon  - .icon-name wi-moon-waning-crescent-3 - .icon_unicode f0ad -.icon-wrap - .icon  - .icon-name wi-moon-waning-crescent-4 - .icon_unicode f0ae -.icon-wrap - .icon  - .icon-name wi-moon-waning-crescent-5 - .icon_unicode f0af -.icon-wrap - .icon  - .icon-name wi-moon-waning-crescent-6 - .icon_unicode f0b0 -.icon-wrap - .icon  - .icon-name wi-moon-waning-gibbous-1 - .icon_unicode f0a4 -.icon-wrap - .icon  - .icon-name wi-moon-waning-gibbous-2 - .icon_unicode f0a5 -.icon-wrap - .icon  - .icon-name wi-moon-waning-gibbous-3 - .icon_unicode f0a6 -.icon-wrap - .icon  - .icon-name wi-moon-waning-gibbous-4 - .icon_unicode f0a7 -.icon-wrap - .icon  - .icon-name wi-moon-waning-gibbous-5 - .icon_unicode f0a8 -.icon-wrap - .icon  - .icon-name wi-moon-waning-gibbous-6 - .icon_unicode f0a9 .icon-wrap .icon  .icon-name wi-moon-waxing-cresent-1 @@ -101,4 +49,56 @@ .icon-wrap .icon  .icon-name wi-moon-waxing-gibbous-6 - .icon_unicode f0a2 \ No newline at end of file + .icon_unicode f0a2 +.icon-wrap + .icon  + .icon-name wi-moon-full + .icon_unicode f0a3 +.icon-wrap + .icon  + .icon-name wi-moon-waning-gibbous-1 + .icon_unicode f0a4 +.icon-wrap + .icon  + .icon-name wi-moon-waning-gibbous-2 + .icon_unicode f0a5 +.icon-wrap + .icon  + .icon-name wi-moon-waning-gibbous-3 + .icon_unicode f0a6 +.icon-wrap + .icon  + .icon-name wi-moon-waning-gibbous-4 + .icon_unicode f0a7 +.icon-wrap + .icon  + .icon-name wi-moon-waning-gibbous-5 + .icon_unicode f0a8 +.icon-wrap + .icon  + .icon-name wi-moon-waning-gibbous-6 + .icon_unicode f0a9 +.icon-wrap + .icon  + .icon-name wi-moon-waning-crescent-1 + .icon_unicode f0ab +.icon-wrap + .icon  + .icon-name wi-moon-waning-crescent-2 + .icon_unicode f0ac +.icon-wrap + .icon  + .icon-name wi-moon-waning-crescent-3 + .icon_unicode f0ad +.icon-wrap + .icon  + .icon-name wi-moon-waning-crescent-4 + .icon_unicode f0ae +.icon-wrap + .icon  + .icon-name wi-moon-waning-crescent-5 + .icon_unicode f0af +.icon-wrap + .icon  + .icon-name wi-moon-waning-crescent-6 + .icon_unicode f0b0 \ No newline at end of file diff --git a/_docs/jade/icon-list-time.jade b/_docs/jade/icon-list-time.jade index e4380f6..7d921b0 100644 --- a/_docs/jade/icon-list-time.jade +++ b/_docs/jade/icon-list-time.jade @@ -2,18 +2,6 @@ .icon  .icon-name wi-time-1 .icon_unicode f08a -.icon-wrap - .icon  - .icon-name wi-time-10 - .icon_unicode f093 -.icon-wrap - .icon  - .icon-name wi-time-11 - .icon_unicode f094 -.icon-wrap - .icon  - .icon-name wi-time-12 - .icon_unicode f089 .icon-wrap .icon  .icon-name wi-time-2 @@ -45,4 +33,16 @@ .icon-wrap .icon  .icon-name wi-time-9 - .icon_unicode f092 \ No newline at end of file + .icon_unicode f092 +.icon-wrap + .icon  + .icon-name wi-time-10 + .icon_unicode f093 +.icon-wrap + .icon  + .icon-name wi-time-11 + .icon_unicode f094 +.icon-wrap + .icon  + .icon-name wi-time-12 + .icon_unicode f089 \ No newline at end of file diff --git a/_docs/jade/icon-list.jade b/_docs/jade/icon-list.jade index e4fba77..cf5b29a 100644 --- a/_docs/jade/icon-list.jade +++ b/_docs/jade/icon-list.jade @@ -1,5 +1,20 @@ -include icon-list-time -include icon-list-beaufort -include icon-list-moon -include icon-list-direction -include icon-list-wind \ No newline at end of file +.col-sm-12 + h1 Time + .row + include icon-list-time +.col-sm-12 + h1 Beaufort + .row + include icon-list-beaufort +.col-sm-12 + h1 Moons + .row + include icon-list-moon +.col-sm-12 + h1 Directions + .row + include icon-list-direction +.col-sm-12 + h1 Wind + .row + include icon-list-wind \ No newline at end of file diff --git a/_docs/jade/index.jade b/_docs/jade/index.jade index ebe7761..d8f539e 100644 --- a/_docs/jade/index.jade +++ b/_docs/jade/index.jade @@ -17,8 +17,9 @@ html i.wi.wi-wind-default.point-120-deg p this - section.content.container.iconExamples - include icon-list + .container + .row + include icon-list diff --git a/_docs/less/bootstrap-includes.less b/_docs/less/bootstrap-includes.less index 7c29362..7e4ea07 100644 --- a/_docs/less/bootstrap-includes.less +++ b/_docs/less/bootstrap-includes.less @@ -1,64 +1 @@ -/*! - * 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 "bootstrap/variables.less"; -@import "bootstrap/mixins.less"; - -// Reset -@import "bootstrap/normalize.less"; -@import "bootstrap/print.less"; - -// Core CSS -@import "bootstrap/scaffolding.less"; -@import "bootstrap/type.less"; -@import "bootstrap/code.less"; -@import "bootstrap/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 "bootstrap/utilities.less"; // Has to be last to override when necessary -@import "bootstrap/responsive-utilities.less"; +@import "bootstrap/bootstrap.less"; \ No newline at end of file diff --git a/_docs/less/bootstrap/accordion.less b/_docs/less/bootstrap/accordion.less deleted file mode 100644 index 59765f1..0000000 --- a/_docs/less/bootstrap/accordion.less +++ /dev/null @@ -1,34 +0,0 @@ -// -// 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/_docs/less/bootstrap/alerts.less b/_docs/less/bootstrap/alerts.less index 24b7911..c4199db 100644 --- a/_docs/less/bootstrap/alerts.less +++ b/_docs/less/bootstrap/alerts.less @@ -7,29 +7,42 @@ // ------------------------- .alert { - padding: 10px 35px 10px 15px; + 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 h4 { margin-top: 0; - // Specified for the h4 to prevent conflicts of changing @headingsColor + // Specified for the h4 to prevent conflicts of changing @headings-color 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%); + font-weight: @alert-link-font-weight; } + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + + > p + p { + margin-top: 5px; + } +} + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + padding-right: (@alert-padding + 20); + // Adjust close link position .close { position: relative; @@ -40,53 +53,21 @@ } // Alternate styles -// ------------------------- +// +// Generate contextual modifier classes for colorizing the alert. .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-variant(@alert-success-bg; @alert-success-border; @alert-success-text); } + .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%); - } + .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); } -// Block alerts -// ------------------------- +.alert-warning { + .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); +} -.alert-block { - padding-top: 15px; - padding-bottom: 15px; -} -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; -} -.alert-block p + p { - margin-top: 5px; +.alert-danger { + .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); } diff --git a/_docs/less/bootstrap/badges.less b/_docs/less/bootstrap/badges.less index 4750cfb..6ee16dc 100644 --- a/_docs/less/bootstrap/badges.less +++ b/_docs/less/bootstrap/badges.less @@ -3,56 +3,64 @@ // -------------------------------------------------- -// Base classes +// Base class .badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: @font-size-small; - font-weight: bold; - color: #fff; - line-height: 1; + font-weight: @badge-font-weight; + color: @badge-color; + line-height: @badge-line-height; vertical-align: middle; white-space: nowrap; text-align: center; - background-color: @gray-light; - border-radius: 10px; + background-color: @badge-bg; + border-radius: @badge-border-radius; - // Empty labels/badges collapse + // Empty badges collapse automatically (not available in IE8) &: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 { + // Quick fix for badges in buttons + .btn & { position: relative; top: -1px; } -} -.btn-mini { - .badge { + + .btn-xs &, + .btn-group-xs > .btn & { top: 0; + padding: 1px 5px; + } + + // Hover state, but only for links + a& { + &:hover, + &:focus { + color: @badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } + } + + // Account for badges in navs + .list-group-item.active > &, + .nav-pills > .active > a > & { + color: @badge-active-color; + background-color: @badge-active-bg; + } + + .list-group-item > & { + float: right; + } + + .list-group-item > & + & { + margin-right: 5px; + } + + .nav-pills > li > a > & { + margin-left: 3px; } } - -// 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/_docs/less/bootstrap/bootstrap.less b/_docs/less/bootstrap/bootstrap.less index c73c85c..4b9916e 100644 --- a/_docs/less/bootstrap/bootstrap.less +++ b/_docs/less/bootstrap/bootstrap.less @@ -1,64 +1,56 @@ /*! - * 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. + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins @import "variables.less"; @import "mixins.less"; -// Reset +// Reset and dependencies @import "normalize.less"; @import "print.less"; +@import "glyphicons.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 +// Components @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 "button-groups.less"; +@import "input-groups.less"; @import "navs.less"; @import "navbar.less"; -@import "button-groups.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 "responsive-embed.less"; +@import "wells.less"; +@import "close.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 "accordion.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"; diff --git a/_docs/less/bootstrap/breadcrumbs.less b/_docs/less/bootstrap/breadcrumbs.less index 2fe8217..cb01d50 100644 --- a/_docs/less/bootstrap/breadcrumbs.less +++ b/_docs/less/bootstrap/breadcrumbs.less @@ -4,25 +4,23 @@ .breadcrumb { - padding: 8px 15px; - margin: 0 0 @line-height-computed; + padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; + margin-bottom: @line-height-computed; list-style: none; - background-color: #f5f5f5; + background-color: @breadcrumb-bg; 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 + + + li:before { + content: "@{breadcrumb-separator}\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 + color: @breadcrumb-color; } } + > .active { - color: @gray-light; + color: @breadcrumb-active-color; } } diff --git a/_docs/less/bootstrap/button-groups.less b/_docs/less/bootstrap/button-groups.less index f7934a3..6a0c5a8 100644 --- a/_docs/less/bootstrap/button-groups.less +++ b/_docs/less/bootstrap/button-groups.less @@ -2,14 +2,6 @@ // 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 { @@ -21,29 +13,37 @@ float: left; // Bring the "active" button to the front &:hover, - &:active { + &:focus, + &:active, + &.active { z-index: 2; } } } // Prevent double borders when buttons are next to each other -.btn-group .btn + .btn { - margin-left: -1px; +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } } // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - .clearfix(); + margin-left: -5px; // Offset the first child's margin + &:extend(.clearfix all); - .btn-group { + .btn, + .btn-group, + .input-group { float: left; } - // Space out series of button groups - > .btn + .btn, - > .btn-group + .btn, - > .btn + .btn-group, - > .btn-group + .btn-group { + > .btn, + > .btn-group, + > .input-group { margin-left: 5px; } } @@ -72,11 +72,13 @@ .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:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + .border-right-radius(0); + } } -.btn-group > .btn-group:last-child > .btn:first-child { +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { .border-left-radius(0); } @@ -87,6 +89,14 @@ } +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-xs > .btn { &:extend(.btn-xs); } +.btn-group-sm > .btn { &:extend(.btn-sm); } +.btn-group-lg > .btn { &:extend(.btn-lg); } + // Split button dropdowns // ---------------------- @@ -96,11 +106,7 @@ padding-left: 8px; padding-right: 8px; } -.btn-group > .btn-mini + .dropdown-toggle { - padding-left: 5px; - padding-right: 5px; -} -.btn-group > .btn-large + .dropdown-toggle { +.btn-group > .btn-lg + .dropdown-toggle { padding-left: 12px; padding-right: 12px; } @@ -109,6 +115,11 @@ // 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)); + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + .box-shadow(none); + } } @@ -117,34 +128,69 @@ margin-left: 0; } // Carets in other button sizes -.btn-large .caret { - border-width: 5px; +.btn-lg .caret { + border-width: @caret-width-large @caret-width-large 0; + border-bottom-width: 0; } // Upside down carets for .dropup -.dropup .btn-large .caret { - border-bottom-width: 5px; +.dropup .btn-lg .caret { + border-width: 0 @caret-width-large @caret-width-large; } // Vertical button groups // ---------------------- -.btn-group-vertical > .btn { - display: block; - float: none; - width: 100%; - max-width: 100%; - + .btn { +.btn-group-vertical { + > .btn, + > .btn-group, + > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + &:extend(.clearfix all); + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { margin-top: -1px; + margin-left: 0; } } -.btn-group-vertical .btn:not(:first-child):not(:last-child) { + +.btn-group-vertical > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child:not(:last-child) { + border-top-right-radius: @btn-border-radius-base; + .border-bottom-radius(0); + } + &:last-child:not(:first-child) { + border-bottom-left-radius: @btn-border-radius-base; + .border-top-radius(0); + } +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group-vertical .btn:first-child { - .border-bottom-radius(0); +.btn-group-vertical > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + .border-bottom-radius(0); + } } -.btn-group-vertical .btn:last-child { +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { .border-top-radius(0); } @@ -155,16 +201,44 @@ .btn-group-justified { display: table; width: 100%; - .btn { + table-layout: fixed; + border-collapse: separate; + > .btn, + > .btn-group { float: none; display: table-cell; width: 1%; } + > .btn-group .btn { + width: 100%; + } + + > .btn-group .dropdown-menu { + left: auto; + } } // 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; +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use +// `display: none;` or `visibility: hidden;` as that also hides the popover. +// Simply visually hiding the inputs via `opacity` would leave them clickable in +// certain cases which is prevented by using `clip` and `pointer-events`. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 and +// https://github.com/twbs/bootstrap/pull/14559 for more information. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } } diff --git a/_docs/less/bootstrap/buttons.less b/_docs/less/bootstrap/buttons.less index 6280d34..9cbb8f4 100644 --- a/_docs/less/bootstrap/buttons.less +++ b/_docs/less/bootstrap/buttons.less @@ -6,28 +6,33 @@ // 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; + font-weight: @btn-font-weight; text-align: center; vertical-align: middle; + touch-action: manipulation; cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid transparent; - border-radius: @border-radius-base; white-space: nowrap; + .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base); + .user-select(none); - &:focus { - .tab-focus(); + &, + &:active, + &.active { + &:focus, + &.focus { + .tab-focus(); + } } &:hover, - &:focus { - color: #fff; + &:focus, + &.focus { + color: @btn-default-color; text-decoration: none; } @@ -41,12 +46,17 @@ &.disabled, &[disabled], fieldset[disabled] & { - cursor: default; - pointer-events: none; // Future-proof disabling of clicks + cursor: @cursor-disabled; .opacity(.65); .box-shadow(none); } + a& { + &.disabled, + fieldset[disabled] & { + pointer-events: none; // Future-proof disabling of clicks on `` elements + } + } } @@ -54,26 +64,26 @@ // -------------------------------------------------- .btn-default { - .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border); + .button-variant(@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); + .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); } // Success appears as green .btn-success { - .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border); + .button-variant(@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); + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); +} +// Warning appears as orange +.btn-warning { + .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); } @@ -81,38 +91,36 @@ // ------------------------- // 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 { + + &, + &:active, + &.active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + .box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: @link-hover-decoration; + background-color: transparent; + } &[disabled], fieldset[disabled] & { &:hover, &:focus { - color: @gray-dark; + color: @btn-link-disabled-color; text-decoration: none; } } @@ -122,16 +130,16 @@ fieldset[disabled] .btn-link { // Button Sizes // -------------------------------------------------- -.btn-large { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - border-radius: @border-radius-large; +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-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; +.btn-sm { + // line-height: ensure proper height of button next to small input + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); +} +.btn-xs { + .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); } @@ -141,8 +149,6 @@ fieldset[disabled] .btn-link { .btn-block { display: block; width: 100%; - padding-left: 0; - padding-right: 0; } // Vertically space out multiple block buttons diff --git a/_docs/less/bootstrap/carousel.less b/_docs/less/bootstrap/carousel.less index a7a4672..87ed696 100644 --- a/_docs/less/bootstrap/carousel.less +++ b/_docs/less/bootstrap/carousel.less @@ -8,15 +8,10 @@ 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; @@ -26,14 +21,40 @@ // Account for jankitude on images > img, > a > img { - display: block; + &:extend(.img-responsive); line-height: 1; } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-webkit-transform-3d) { + .transition-transform(~'0.6s ease-in-out'); + .backface-visibility(~'hidden'); + .perspective(1000px); + + &.next, + &.active.right { + .translate3d(100%, 0, 0); + left: 0; + } + &.prev, + &.active.left { + .translate3d(-100%, 0, 0); + left: 0; + } + &.next.left, + &.prev.right, + &.active { + .translate3d(0, 0, 0); + left: 0; + } + } } > .active, > .next, - > .prev { display: block; } + > .prev { + display: block; + } > .active { left: 0; @@ -74,80 +95,119 @@ top: 0; left: 0; bottom: 0; - width: 15%; - .opacity(.5); - font-size: 20px; - color: #fff; + width: @carousel-control-width; + .opacity(@carousel-control-opacity); + font-size: @carousel-control-font-size; + color: @carousel-control-color; 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); + text-shadow: @carousel-text-shadow; + // We can't have this transition here because WebKit cancels the carousel + // animation if you trip this while in the middle of another animation. // 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; + outline: 0; + color: @carousel-control-color; text-decoration: none; .opacity(.9); } // Toggles - .glyphicon { + .icon-prev, + .icon-next, + .glyphicon-chevron-left, + .glyphicon-chevron-right { position: absolute; top: 50%; - left: 50%; + margin-top: -10px; z-index: 5; display: inline-block; + } + .icon-prev, + .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; + } + .icon-next, + .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; + } + .icon-prev, + .icon-next { width: 20px; height: 20px; - margin-top: -10px; - margin-left: -10px; + line-height: 1; + font-family: serif; + } + + + .icon-prev { + &:before { + content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + } + } + .icon-next { + &:before { + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + } } } // Optional indicator pips -// ----------------------------- +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + .carousel-indicators { position: absolute; - bottom: 20px; + bottom: 10px; left: 50%; z-index: 15; - width: 100px; - margin: 0 0 0 -50px; + width: 60%; + margin-left: -30%; padding-left: 0; list-style: none; text-align: center; li { display: inline-block; - width: 8px; - height: 8px; - margin-left: 0; - margin-right: 0; + width: 10px; + height: 10px; + margin: 1px; text-indent: -999px; - border: 1px solid #fff; - border-radius: 5px; + border: 1px solid @carousel-indicator-border-color; + border-radius: 10px; cursor: pointer; + + // IE8-9 hack for event handling + // + // Internet Explorer 8-9 does not support clicks on elements without a set + // `background-color`. We cannot use `filter` since that's not viewed as a + // background color by the browser. Thus, a hack is needed. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer + // + // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we + // set alpha transparency for the best results possible. + background-color: #000 \9; // IE8 + background-color: rgba(0,0,0,0); // IE9 } .active { - background-color: #fff; + margin: 0; + width: 12px; + height: 12px; + background-color: @carousel-indicator-active-bg; } } @@ -162,9 +222,9 @@ z-index: 10; padding-top: 20px; padding-bottom: 20px; - color: #fff; + color: @carousel-caption-color; text-align: center; - text-shadow: 0 1px 2px rgba(0,0,0,.6); + text-shadow: @carousel-text-shadow; & .btn { text-shadow: none; // No shadow for button elements in carousel-caption } @@ -172,15 +232,27 @@ // Scale up controls for tablets and up -@media screen and (min-width: @screen-tablet) { +@media screen and (min-width: @screen-sm-min) { // Scale up the controls a smidge - .carousel-control .glyphicon { - width: 30px; - height: 30px; - margin-top: -15px; - margin-left: -15px; - font-size: 30px; + .carousel-control { + .glyphicon-chevron-left, + .glyphicon-chevron-right, + .icon-prev, + .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .glyphicon-chevron-left, + .icon-prev { + margin-left: -15px; + } + .glyphicon-chevron-right, + .icon-next { + margin-right: -15px; + } } // Show and left align the captions @@ -189,4 +261,9 @@ right: 20%; padding-bottom: 30px; } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } } diff --git a/_docs/less/bootstrap/close.less b/_docs/less/bootstrap/close.less index e879da4..6d5bfe0 100644 --- a/_docs/less/bootstrap/close.less +++ b/_docs/less/bootstrap/close.less @@ -6,28 +6,29 @@ .close { float: right; font-size: (@font-size-base * 1.5); - font-weight: bold; + font-weight: @close-font-weight; line-height: 1; - color: #000; - text-shadow: 0 1px 0 rgba(255,255,255,1); + color: @close-color; + text-shadow: @close-text-shadow; .opacity(.2); &:hover, &:focus { - color: #000; + color: @close-color; 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; + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } } diff --git a/_docs/less/bootstrap/code.less b/_docs/less/bootstrap/code.less index f1bc0a0..a08b4d4 100644 --- a/_docs/less/bootstrap/code.less +++ b/_docs/less/bootstrap/code.less @@ -1,25 +1,40 @@ // -// Code (inline and blocK) +// Code (inline and block) // -------------------------------------------------- // Inline and block code styles code, -pre { - padding: 0 3px 2px; +kbd, +pre, +samp { 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; + color: @code-color; + background-color: @code-bg; + border-radius: @border-radius-base; +} + +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: @kbd-color; + background-color: @kbd-bg; + border-radius: @border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + box-shadow: none; + } } // Blocks of code @@ -31,31 +46,24 @@ pre { 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); + color: @pre-color; + background-color: @pre-bg; + border: 1px solid @pre-border-color; 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; + font-size: inherit; color: inherit; - white-space: pre; white-space: pre-wrap; background-color: transparent; - border: 0; + border-radius: 0; } } // Enable scrollable blocks of code .pre-scrollable { - max-height: 340px; + max-height: @pre-scrollable-max-height; overflow-y: scroll; } diff --git a/_docs/less/bootstrap/component-animations.less b/_docs/less/bootstrap/component-animations.less index 50e5e45..0bcee91 100644 --- a/_docs/less/bootstrap/component-animations.less +++ b/_docs/less/bootstrap/component-animations.less @@ -2,6 +2,10 @@ // Component animations // -------------------------------------------------- +// Heads up! +// +// We don't use the `.opacity()` mixin here since it causes a bug with text +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. .fade { opacity: 0; @@ -12,12 +16,18 @@ } .collapse { + display: none; + + &.in { display: block; } + tr&.in { display: table-row; } + tbody&.in { display: table-row-group; } +} + +.collapsing { position: relative; height: 0; overflow: hidden; - .transition(height .35s ease); - - &.in { - height: auto; - } + .transition-property(~"height, visibility"); + .transition-duration(.35s); + .transition-timing-function(ease); } diff --git a/_docs/less/bootstrap/dropdowns.less b/_docs/less/bootstrap/dropdowns.less index 3e01527..f6876c1 100644 --- a/_docs/less/bootstrap/dropdowns.less +++ b/_docs/less/bootstrap/dropdowns.less @@ -4,21 +4,30 @@ // 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: ""; + border-top: @caret-width-base dashed; + border-top: @caret-width-base solid ~"\9"; // IE8 + border-right: @caret-width-base solid transparent; + border-left: @caret-width-base solid transparent; +} + +// The dropdown wrapper (div) +.dropup, +.dropdown { + position: relative; +} + +// Prevent the focus on the dropdown toggle when closing dropdowns +.dropdown-toggle:focus { + outline: 0; } // The dropdown menu (ul) -// ---------------------- .dropdown-menu { position: absolute; top: 100%; @@ -30,14 +39,18 @@ padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; + font-size: @font-size-base; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) background-color: @dropdown-bg; - border: 1px solid #ccc; // IE8 fallback + border: 1px solid @dropdown-fallback-border; // 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); + background-clip: padding-box; // Aligns the dropdown menu to right + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` &.pull-right { right: 0; left: auto; @@ -45,7 +58,7 @@ // Dividers (basically an hr) within the dropdown .divider { - .nav-divider(@dropdown-divider-top, @dropdown-divider-bottom); + .nav-divider(@dropdown-divider-bg); } // Links within the dropdown menu @@ -61,47 +74,50 @@ } // 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%)); +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + background-color: @dropdown-link-hover-bg; + } } // 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%)); +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: @dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: @dropdown-link-active-bg; + } } // 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; + +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: @dropdown-link-disabled-color; + } + + // Nuke hover/focus effects + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); + cursor: @cursor-disabled; + } } // Open state for the dropdown -// --------------------------- .open { // Show the menu > .dropdown-menu { @@ -114,113 +130,87 @@ } } +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: @font-size-small; + line-height: @line-height-base; + color: @dropdown-header-color; + white-space: nowrap; // as with > li > a +} // 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; + 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; + border-bottom: @caret-width-base dashed; + border-bottom: @caret-width-base solid ~"\9"; // IE8 content: ""; } // Different positioning for bottom up menu .dropdown-menu { top: auto; bottom: 100%; - margin-bottom: 1px; + margin-bottom: 2px; } } -// 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 -} +// Component alignment +// +// Reiterate per navbar.less and the modified component alignment there. -// 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 +@media (min-width: @grid-float-breakpoint) { + .navbar-right { + .dropdown-menu { + .dropdown-menu-right(); + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + .dropdown-menu-left(); + } } } - -// 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/_docs/less/bootstrap/forms.less b/_docs/less/bootstrap/forms.less index 6095809..910c1e1 100644 --- a/_docs/less/bootstrap/forms.less +++ b/_docs/less/bootstrap/forms.less @@ -3,17 +3,18 @@ // -------------------------------------------------- -// Non-controls -// ------------------------- - -form { - margin: 0; -} +// Normalize non-controls +// +// Restyle and baseline non-control form elements. fieldset { padding: 0; margin: 0; border: 0; + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; } legend { @@ -23,110 +24,46 @@ legend { margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); line-height: inherit; - color: @gray-dark; + color: @legend-color; border: 0; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid @legend-border-color; } label { display: inline-block; + max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) 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 -} +// Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. // 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 */ + 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; + display: block; +} + +// Make range inputs behave like textual form controls +input[type="range"] { + display: block; + width: 100%; } // Make multiple select elements height not fixed @@ -135,45 +72,163 @@ 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 +// Focus for 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(); +// Adjust output element +output { + display: block; + padding-top: (@padding-base-vertical + 1); + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; } -// CHECKBOXES & RADIOS -// ------------------- +// Common form controls +// +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// 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"] + +.form-control { + display: block; + width: 100%; + 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: @input-color; + background-color: @input-bg; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid @input-border; + border-radius: @input-border-radius; // Note: This has no effect on s in CSS. + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + // Customize the `:focus` state to imitate native WebKit styles. + .form-control-focus(); + + // Placeholder + .placeholder(); + + // Unstyle the caret on `` +// element gets special love because it's special, and that's a fact! +.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + height: @input-height; + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; + + select& { + height: @input-height; + line-height: @input-height; + } + + textarea&, + select[multiple]& { + height: auto; + } +} diff --git a/_docs/less/bootstrap/mixins/gradients.less b/_docs/less/bootstrap/mixins/gradients.less new file mode 100644 index 0000000..0b88a89 --- /dev/null +++ b/_docs/less/bootstrap/mixins/gradients.less @@ -0,0 +1,59 @@ +// Gradients + +#gradient { + + // Horizontal gradient, from left to right + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down + } + + // Vertical gradient, from top to bottom + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down + } + + .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 + background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + } + .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + .radial(@inner-color: #555; @outer-color: #333) { + background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); + background-image: radial-gradient(circle, @inner-color, @outer-color); + background-repeat: no-repeat; + } + .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { + background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + } +} diff --git a/_docs/less/bootstrap/mixins/grid-framework.less b/_docs/less/bootstrap/mixins/grid-framework.less new file mode 100644 index 0000000..8c23eed --- /dev/null +++ b/_docs/less/bootstrap/mixins/grid-framework.less @@ -0,0 +1,91 @@ +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `@grid-columns`. + +.make-grid-columns() { + // Common styles for all sizes of grid columns, widths 1-12 + .col(@index) { // initial + @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + .col((@index + 1), @item); + } + .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo + @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + .col((@index + 1), ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { // terminal + @{list} { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: ceil((@grid-gutter-width / 2)); + padding-right: floor((@grid-gutter-width / 2)); + } + } + .col(1); // kickstart it +} + +.float-grid-columns(@class) { + .col(@index) { // initial + @item: ~".col-@{class}-@{index}"; + .col((@index + 1), @item); + } + .col(@index, @list) when (@index =< @grid-columns) { // general + @item: ~".col-@{class}-@{index}"; + .col((@index + 1), ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { // terminal + @{list} { + float: left; + } + } + .col(1); // kickstart it +} + +.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { + .col-@{class}-@{index} { + width: percentage((@index / @grid-columns)); + } +} +.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { + .col-@{class}-push-@{index} { + left: percentage((@index / @grid-columns)); + } +} +.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { + .col-@{class}-push-0 { + left: auto; + } +} +.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { + .col-@{class}-pull-@{index} { + right: percentage((@index / @grid-columns)); + } +} +.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { + .col-@{class}-pull-0 { + right: auto; + } +} +.calc-grid-column(@index, @class, @type) when (@type = offset) { + .col-@{class}-offset-@{index} { + margin-left: percentage((@index / @grid-columns)); + } +} + +// Basic looping in LESS +.loop-grid-columns(@index, @class, @type) when (@index >= 0) { + .calc-grid-column(@index, @class, @type); + // next iteration + .loop-grid-columns((@index - 1), @class, @type); +} + +// Create grid for specific class +.make-grid(@class) { + .float-grid-columns(@class); + .loop-grid-columns(@grid-columns, @class, width); + .loop-grid-columns(@grid-columns, @class, pull); + .loop-grid-columns(@grid-columns, @class, push); + .loop-grid-columns(@grid-columns, @class, offset); +} diff --git a/_docs/less/bootstrap/mixins/grid.less b/_docs/less/bootstrap/mixins/grid.less new file mode 100644 index 0000000..f144c15 --- /dev/null +++ b/_docs/less/bootstrap/mixins/grid.less @@ -0,0 +1,122 @@ +// Grid system +// +// Generate semantic grid columns with these mixins. + +// Centered container element +.container-fixed(@gutter: @grid-gutter-width) { + margin-right: auto; + margin-left: auto; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + &:extend(.clearfix all); +} + +// Creates a wrapper for a series of columns +.make-row(@gutter: @grid-gutter-width) { + margin-left: ceil((@gutter / -2)); + margin-right: floor((@gutter / -2)); + &:extend(.clearfix all); +} + +// Generate the extra small columns +.make-xs-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + float: left; + width: percentage((@columns / @grid-columns)); + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); +} +.make-xs-column-offset(@columns) { + margin-left: percentage((@columns / @grid-columns)); +} +.make-xs-column-push(@columns) { + left: percentage((@columns / @grid-columns)); +} +.make-xs-column-pull(@columns) { + right: percentage((@columns / @grid-columns)); +} + +// Generate the small columns +.make-sm-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + @media (min-width: @screen-sm-min) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-offset(@columns) { + @media (min-width: @screen-sm-min) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-push(@columns) { + @media (min-width: @screen-sm-min) { + left: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-pull(@columns) { + @media (min-width: @screen-sm-min) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the medium columns +.make-md-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + @media (min-width: @screen-md-min) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} +.make-md-column-offset(@columns) { + @media (min-width: @screen-md-min) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-push(@columns) { + @media (min-width: @screen-md-min) { + left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-pull(@columns) { + @media (min-width: @screen-md-min) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the large columns +.make-lg-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + @media (min-width: @screen-lg-min) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-offset(@columns) { + @media (min-width: @screen-lg-min) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-push(@columns) { + @media (min-width: @screen-lg-min) { + left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-pull(@columns) { + @media (min-width: @screen-lg-min) { + right: percentage((@columns / @grid-columns)); + } +} diff --git a/_docs/less/bootstrap/mixins/hide-text.less b/_docs/less/bootstrap/mixins/hide-text.less new file mode 100644 index 0000000..bc70118 --- /dev/null +++ b/_docs/less/bootstrap/mixins/hide-text.less @@ -0,0 +1,21 @@ +// CSS image replacement +// +// Heads up! v3 launched with only `.hide-text()`, but per our pattern for +// mixins being reused as classes with the same name, this doesn't hold up. As +// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. +// +// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 + +// Deprecated as of v3.0.1 (will be removed in v4) +.hide-text() { + font: ~"0/0" a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +// New mixin to use as of v3.0.1 +.text-hide() { + .hide-text(); +} diff --git a/_docs/less/bootstrap/mixins/image.less b/_docs/less/bootstrap/mixins/image.less new file mode 100644 index 0000000..f233cb3 --- /dev/null +++ b/_docs/less/bootstrap/mixins/image.less @@ -0,0 +1,33 @@ +// Image Mixins +// - Responsive image +// - Retina image + + +// 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 +} + + +// Retina image +// +// Short retina mixin for setting background-image and -size. Note that the +// spelling of `min--moz-device-pixel-ratio` is intentional. +.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { + background-image: url("@{file-1x}"); + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("@{file-2x}"); + background-size: @width-1x @height-1x; + } +} diff --git a/_docs/less/bootstrap/mixins/labels.less b/_docs/less/bootstrap/mixins/labels.less new file mode 100644 index 0000000..9f7a67e --- /dev/null +++ b/_docs/less/bootstrap/mixins/labels.less @@ -0,0 +1,12 @@ +// Labels + +.label-variant(@color) { + background-color: @color; + + &[href] { + &:hover, + &:focus { + background-color: darken(@color, 10%); + } + } +} diff --git a/_docs/less/bootstrap/mixins/list-group.less b/_docs/less/bootstrap/mixins/list-group.less new file mode 100644 index 0000000..03aa190 --- /dev/null +++ b/_docs/less/bootstrap/mixins/list-group.less @@ -0,0 +1,30 @@ +// List Groups + +.list-group-item-variant(@state; @background; @color) { + .list-group-item-@{state} { + color: @color; + background-color: @background; + + a&, + button& { + color: @color; + + .list-group-item-heading { + color: inherit; + } + + &:hover, + &:focus { + color: @color; + background-color: darken(@background, 5%); + } + &.active, + &.active:hover, + &.active:focus { + color: #fff; + background-color: @color; + border-color: @color; + } + } + } +} diff --git a/_docs/less/bootstrap/mixins/nav-divider.less b/_docs/less/bootstrap/mixins/nav-divider.less new file mode 100644 index 0000000..feb1e9e --- /dev/null +++ b/_docs/less/bootstrap/mixins/nav-divider.less @@ -0,0 +1,10 @@ +// Horizontal dividers +// +// Dividers (basically an hr) within dropdowns and nav lists + +.nav-divider(@color: #e5e5e5) { + height: 1px; + margin: ((@line-height-computed / 2) - 1) 0; + overflow: hidden; + background-color: @color; +} diff --git a/_docs/less/bootstrap/mixins/nav-vertical-align.less b/_docs/less/bootstrap/mixins/nav-vertical-align.less new file mode 100644 index 0000000..d458c78 --- /dev/null +++ b/_docs/less/bootstrap/mixins/nav-vertical-align.less @@ -0,0 +1,9 @@ +// Navbar vertical align +// +// Vertically center elements in the navbar. +// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. + +.navbar-vertical-align(@element-height) { + margin-top: ((@navbar-height - @element-height) / 2); + margin-bottom: ((@navbar-height - @element-height) / 2); +} diff --git a/_docs/less/bootstrap/mixins/opacity.less b/_docs/less/bootstrap/mixins/opacity.less new file mode 100644 index 0000000..33ed25c --- /dev/null +++ b/_docs/less/bootstrap/mixins/opacity.less @@ -0,0 +1,8 @@ +// Opacity + +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; +} diff --git a/_docs/less/bootstrap/mixins/pagination.less b/_docs/less/bootstrap/mixins/pagination.less new file mode 100644 index 0000000..618804f --- /dev/null +++ b/_docs/less/bootstrap/mixins/pagination.less @@ -0,0 +1,24 @@ +// Pagination + +.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + > li { + > a, + > span { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + } + &:first-child { + > a, + > span { + .border-left-radius(@border-radius); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius); + } + } + } +} diff --git a/_docs/less/bootstrap/mixins/panels.less b/_docs/less/bootstrap/mixins/panels.less new file mode 100644 index 0000000..49ee10d --- /dev/null +++ b/_docs/less/bootstrap/mixins/panels.less @@ -0,0 +1,24 @@ +// Panels + +.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { + border-color: @border; + + & > .panel-heading { + color: @heading-text-color; + background-color: @heading-bg-color; + border-color: @heading-border; + + + .panel-collapse > .panel-body { + border-top-color: @border; + } + .badge { + color: @heading-bg-color; + background-color: @heading-text-color; + } + } + & > .panel-footer { + + .panel-collapse > .panel-body { + border-bottom-color: @border; + } + } +} diff --git a/_docs/less/bootstrap/mixins/progress-bar.less b/_docs/less/bootstrap/mixins/progress-bar.less new file mode 100644 index 0000000..f07996a --- /dev/null +++ b/_docs/less/bootstrap/mixins/progress-bar.less @@ -0,0 +1,10 @@ +// Progress bars + +.progress-bar-variant(@color) { + background-color: @color; + + // Deprecated parent class requirement as of v3.2.0 + .progress-striped & { + #gradient > .striped(); + } +} diff --git a/_docs/less/bootstrap/mixins/reset-filter.less b/_docs/less/bootstrap/mixins/reset-filter.less new file mode 100644 index 0000000..68cdb5e --- /dev/null +++ b/_docs/less/bootstrap/mixins/reset-filter.less @@ -0,0 +1,8 @@ +// Reset filters for IE +// +// When you need to remove a gradient background, do not forget to use this to reset +// the IE filter for IE9 and below. + +.reset-filter() { + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); +} diff --git a/_docs/less/bootstrap/mixins/reset-text.less b/_docs/less/bootstrap/mixins/reset-text.less new file mode 100644 index 0000000..58dd4d1 --- /dev/null +++ b/_docs/less/bootstrap/mixins/reset-text.less @@ -0,0 +1,18 @@ +.reset-text() { + font-family: @font-family-base; + // We deliberately do NOT reset font-size. + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: @line-height-base; + text-align: left; // Fallback for where `start` is not supported + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; +} diff --git a/_docs/less/bootstrap/mixins/resize.less b/_docs/less/bootstrap/mixins/resize.less new file mode 100644 index 0000000..3acd3af --- /dev/null +++ b/_docs/less/bootstrap/mixins/resize.less @@ -0,0 +1,6 @@ +// Resize anything + +.resizable(@direction) { + resize: @direction; // Options: horizontal, vertical, both + overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` +} diff --git a/_docs/less/bootstrap/mixins/responsive-visibility.less b/_docs/less/bootstrap/mixins/responsive-visibility.less new file mode 100644 index 0000000..ecf1e97 --- /dev/null +++ b/_docs/less/bootstrap/mixins/responsive-visibility.less @@ -0,0 +1,15 @@ +// Responsive utilities + +// +// More easily include all the states for responsive-utilities.less. +.responsive-visibility() { + display: block !important; + table& { display: table !important; } + tr& { display: table-row !important; } + th&, + td& { display: table-cell !important; } +} + +.responsive-invisibility() { + display: none !important; +} diff --git a/_docs/less/bootstrap/mixins/size.less b/_docs/less/bootstrap/mixins/size.less new file mode 100644 index 0000000..a8be650 --- /dev/null +++ b/_docs/less/bootstrap/mixins/size.less @@ -0,0 +1,10 @@ +// Sizing shortcuts + +.size(@width; @height) { + width: @width; + height: @height; +} + +.square(@size) { + .size(@size; @size); +} diff --git a/_docs/less/bootstrap/mixins/tab-focus.less b/_docs/less/bootstrap/mixins/tab-focus.less new file mode 100644 index 0000000..1f1f05a --- /dev/null +++ b/_docs/less/bootstrap/mixins/tab-focus.less @@ -0,0 +1,9 @@ +// WebKit-style focus + +.tab-focus() { + // Default + outline: thin dotted; + // WebKit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} diff --git a/_docs/less/bootstrap/mixins/table-row.less b/_docs/less/bootstrap/mixins/table-row.less new file mode 100644 index 0000000..0f287f1 --- /dev/null +++ b/_docs/less/bootstrap/mixins/table-row.less @@ -0,0 +1,28 @@ +// Tables + +.table-row-variant(@state; @background) { + // Exact selectors below required to override `.table-striped` and prevent + // inheritance to nested tables. + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; + } + } + + // Hover states for `.table-hover` + // Note: this is not available for cells or rows within `thead` or `tfoot`. + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td, + &:hover > .@{state}, + &.@{state}:hover > th { + background-color: darken(@background, 5%); + } + } +} diff --git a/_docs/less/bootstrap/mixins/text-emphasis.less b/_docs/less/bootstrap/mixins/text-emphasis.less new file mode 100644 index 0000000..9e8a77a --- /dev/null +++ b/_docs/less/bootstrap/mixins/text-emphasis.less @@ -0,0 +1,9 @@ +// Typography + +.text-emphasis-variant(@color) { + color: @color; + a&:hover, + a&:focus { + color: darken(@color, 10%); + } +} diff --git a/_docs/less/bootstrap/mixins/text-overflow.less b/_docs/less/bootstrap/mixins/text-overflow.less new file mode 100644 index 0000000..c11ad2f --- /dev/null +++ b/_docs/less/bootstrap/mixins/text-overflow.less @@ -0,0 +1,8 @@ +// Text overflow +// Requires inline-block or block for proper styling + +.text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/_docs/less/bootstrap/mixins/vendor-prefixes.less b/_docs/less/bootstrap/mixins/vendor-prefixes.less new file mode 100644 index 0000000..afd3331 --- /dev/null +++ b/_docs/less/bootstrap/mixins/vendor-prefixes.less @@ -0,0 +1,227 @@ +// Vendor Prefixes +// +// All vendor mixins are deprecated as of v3.2.0 due to the introduction of +// Autoprefixer in our Gruntfile. They will be removed in v4. + +// - Animations +// - Backface visibility +// - Box shadow +// - Box sizing +// - Content columns +// - Hyphens +// - Placeholder text +// - Transformations +// - Transitions +// - User Select + + +// Animations +.animation(@animation) { + -webkit-animation: @animation; + -o-animation: @animation; + animation: @animation; +} +.animation-name(@name) { + -webkit-animation-name: @name; + animation-name: @name; +} +.animation-duration(@duration) { + -webkit-animation-duration: @duration; + animation-duration: @duration; +} +.animation-timing-function(@timing-function) { + -webkit-animation-timing-function: @timing-function; + animation-timing-function: @timing-function; +} +.animation-delay(@delay) { + -webkit-animation-delay: @delay; + animation-delay: @delay; +} +.animation-iteration-count(@iteration-count) { + -webkit-animation-iteration-count: @iteration-count; + animation-iteration-count: @iteration-count; +} +.animation-direction(@direction) { + -webkit-animation-direction: @direction; + animation-direction: @direction; +} +.animation-fill-mode(@fill-mode) { + -webkit-animation-fill-mode: @fill-mode; + animation-fill-mode: @fill-mode; +} + +// Backface visibility +// Prevent browsers from flickering when using CSS 3D transforms. +// Default value is `visible`, but can be changed to `hidden` + +.backface-visibility(@visibility){ + -webkit-backface-visibility: @visibility; + -moz-backface-visibility: @visibility; + backface-visibility: @visibility; +} + +// Drop shadows +// +// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's +// supported browsers that have box shadow capabilities now support it. + +.box-shadow(@shadow) { + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 + box-shadow: @shadow; +} + +// Box sizing +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} + +// CSS3 Content Columns +.content-columns(@column-count; @column-gap: @grid-gutter-width) { + -webkit-column-count: @column-count; + -moz-column-count: @column-count; + column-count: @column-count; + -webkit-column-gap: @column-gap; + -moz-column-gap: @column-gap; + column-gap: @column-gap; +} + +// Optional hyphenation +.hyphens(@mode: auto) { + word-wrap: break-word; + -webkit-hyphens: @mode; + -moz-hyphens: @mode; + -ms-hyphens: @mode; // IE10+ + -o-hyphens: @mode; + hyphens: @mode; +} + +// Placeholder text +.placeholder(@color: @input-color-placeholder) { + // Firefox + &::-moz-placeholder { + color: @color; + opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 + } + &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: @color; } // Safari and Chrome +} + +// Transformations +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -ms-transform: scale(@ratio); // IE9 only + -o-transform: scale(@ratio); + transform: scale(@ratio); +} +.scale(@ratioX; @ratioY) { + -webkit-transform: scale(@ratioX, @ratioY); + -ms-transform: scale(@ratioX, @ratioY); // IE9 only + -o-transform: scale(@ratioX, @ratioY); + transform: scale(@ratioX, @ratioY); +} +.scaleX(@ratio) { + -webkit-transform: scaleX(@ratio); + -ms-transform: scaleX(@ratio); // IE9 only + -o-transform: scaleX(@ratio); + transform: scaleX(@ratio); +} +.scaleY(@ratio) { + -webkit-transform: scaleY(@ratio); + -ms-transform: scaleY(@ratio); // IE9 only + -o-transform: scaleY(@ratio); + transform: scaleY(@ratio); +} +.skew(@x; @y) { + -webkit-transform: skewX(@x) skewY(@y); + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + -o-transform: skewX(@x) skewY(@y); + transform: skewX(@x) skewY(@y); +} +.translate(@x; @y) { + -webkit-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); // IE9 only + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} +.translate3d(@x; @y; @z) { + -webkit-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9 only + -o-transform: rotate(@degrees); + transform: rotate(@degrees); +} +.rotateX(@degrees) { + -webkit-transform: rotateX(@degrees); + -ms-transform: rotateX(@degrees); // IE9 only + -o-transform: rotateX(@degrees); + transform: rotateX(@degrees); +} +.rotateY(@degrees) { + -webkit-transform: rotateY(@degrees); + -ms-transform: rotateY(@degrees); // IE9 only + -o-transform: rotateY(@degrees); + transform: rotateY(@degrees); +} +.perspective(@perspective) { + -webkit-perspective: @perspective; + -moz-perspective: @perspective; + perspective: @perspective; +} +.perspective-origin(@perspective) { + -webkit-perspective-origin: @perspective; + -moz-perspective-origin: @perspective; + perspective-origin: @perspective; +} +.transform-origin(@origin) { + -webkit-transform-origin: @origin; + -moz-transform-origin: @origin; + -ms-transform-origin: @origin; // IE9 only + transform-origin: @origin; +} + + +// Transitions + +.transition(@transition) { + -webkit-transition: @transition; + -o-transition: @transition; + transition: @transition; +} +.transition-property(@transition-property) { + -webkit-transition-property: @transition-property; + transition-property: @transition-property; +} +.transition-delay(@transition-delay) { + -webkit-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} +.transition-duration(@transition-duration) { + -webkit-transition-duration: @transition-duration; + transition-duration: @transition-duration; +} +.transition-timing-function(@timing-function) { + -webkit-transition-timing-function: @timing-function; + transition-timing-function: @timing-function; +} +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} + + +// User select +// For selecting text on the page + +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -ms-user-select: @select; // IE10+ + user-select: @select; +} diff --git a/_docs/less/bootstrap/modals.less b/_docs/less/bootstrap/modals.less index 144588a..1de6220 100644 --- a/_docs/less/bootstrap/modals.less +++ b/_docs/less/bootstrap/modals.less @@ -15,46 +15,49 @@ // Container that the modal scrolls within .modal { display: none; - overflow: auto; - overflow-y: scroll; + overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: @zindex-modal-background; + z-index: @zindex-modal; -webkit-overflow-scrolling: touch; + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + // When fading in the modal, animate it to slide down - &.fade { - top: -25%; - .transition(~"opacity 0.3s linear, top 0.3s ease-out"); + &.fade .modal-dialog { + .translate(0, -25%); + .transition-transform(~"0.3s ease-out"); } - &.fade.in { top: 0; } + &.in .modal-dialog { .translate(0, 0) } +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; } // Shell div to position the modal with bottom padding .modal-dialog { position: relative; - top: 0; - left: 0; - right: 0; width: auto; - padding: 10px; - z-index: (@zindex-modal-background + 10); + margin: 10px; } // Actual modal .modal-content { position: relative; - background-color: #fff; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.2); - border-radius: 6px; + background-color: @modal-content-bg; + border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid @modal-content-border-color; + border-radius: @border-radius-large; .box-shadow(0 3px 9px rgba(0,0,0,.5)); - .background-clip(padding-box); + background-clip: padding-box; // Remove focus outline from opened modal - outline: none; + outline: 0; } // Modal background @@ -64,18 +67,18 @@ right: 0; bottom: 0; left: 0; - z-index: (@zindex-modal-background - 10); - background-color: #000; + z-index: @zindex-modal-background; + background-color: @modal-backdrop-bg; // Fade for backdrop &.fade { .opacity(0); } - &.fade.in { .opacity(.5); } + &.in { .opacity(@modal-backdrop-opacity); } } // Modal header // Top section of the modal w/ title and dismiss .modal-header { padding: @modal-title-padding; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid @modal-header-border-color; min-height: (@modal-title-padding + @modal-title-line-height); } // Close icon @@ -98,11 +101,10 @@ // Footer (for actions) .modal-footer { - margin-top: 15px; - padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; + padding: @modal-inner-padding; text-align: right; // right align buttons - border-top: 1px solid #e5e5e5; - .clearfix(); // clear it in case folks use .pull-* classes on buttons + border-top: 1px solid @modal-footer-border-color; + &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons // Properly space out buttons .btn + .btn { @@ -119,19 +121,30 @@ } } -// Scale up the modal -@media screen and (min-width: @screen-tablet) { +// Measure scrollbar width for padding body during modal show/hide +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} +// Scale up the modal +@media (min-width: @screen-sm-min) { + // Automatically set modal's width for larger viewports .modal-dialog { - left: 50%; - right: auto; - width: 560px; - margin-left: -280px; - padding-top: 30px; - padding-bottom: 30px; + width: @modal-md; + margin: 30px auto; } .modal-content { .box-shadow(0 5px 15px rgba(0,0,0,.5)); } + // Modal sizes + .modal-sm { width: @modal-sm; } +} + +@media (min-width: @screen-md-min) { + .modal-lg { width: @modal-lg; } } diff --git a/_docs/less/bootstrap/navbar.less b/_docs/less/bootstrap/navbar.less index b828360..6d751bb 100644 --- a/_docs/less/bootstrap/navbar.less +++ b/_docs/less/bootstrap/navbar.less @@ -2,69 +2,136 @@ // Navbars // -------------------------------------------------- + // Wrapper and base class +// +// Provide a static navbar from which we expand to create full-width, fixed, and +// other navbar variations. + .navbar { position: relative; - margin-bottom: 20px; - padding-left: @navbar-padding; - padding-right: @navbar-padding; - background-color: @navbar-bg; - border-radius: @border-radius-base; + min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) + margin-bottom: @navbar-margin-bottom; + border: 1px solid transparent; // Prevent floats from breaking the navbar - .clearfix(); -} + &:extend(.clearfix all); -// Navbar nav links -// ------------------------- - -.navbar-nav { - // Space out from .navbar .brand and .btn-navbar when stacked in mobile views - // and outdent nav links so text lines up with logo. - margin-top: 10px; - margin-bottom: 15px; - - > li > a { - padding-top: ((@navbar-height - @line-height-computed) / 2); - padding-bottom: ((@navbar-height - @line-height-computed) / 2); - color: @navbar-link-color; - line-height: 20px; - border-radius: @border-radius-base; - } - > li > a:hover, - > li > a:focus { - color: @navbar-link-hover-color; - background-color: @navbar-link-hover-bg; - } - > .active > a, - > .active > a:hover, - > .active > a:focus { - color: @navbar-link-active-color; - background-color: @navbar-link-active-bg; - } - > .disabled > a, - > .disabled > a:hover, - > .disabled > a:focus { - color: @navbar-link-disabled-color; - background-color: @navbar-link-disabled-bg; - } - - // Right aligned contents - // Make them full width first so that they align properly on mobile - &.pull-right { - width: 100%; + @media (min-width: @grid-float-breakpoint) { + border-radius: @navbar-border-radius; } } +// Navbar heading +// +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy +// styling of responsive aspects. + +.navbar-header { + &:extend(.clearfix all); + + @media (min-width: @grid-float-breakpoint) { + float: left; + } +} + + +// Navbar collapse (body) +// +// Group your navbar content into this for easy collapsing and expanding across +// various device sizes. By default, this content is collapsed when <768px, but +// will expand past that for a horizontal display. +// +// To start (on mobile devices) the navbar links, forms, and buttons are stacked +// vertically and include a `max-height` to overflow in case you have too much +// content for the user's viewport. + +.navbar-collapse { + overflow-x: visible; + 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); + &:extend(.clearfix all); + -webkit-overflow-scrolling: touch; + + &.in { + overflow-y: auto; + } + + @media (min-width: @grid-float-breakpoint) { + width: auto; + 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; + } + + // Undo the collapse side padding for navbars with containers to ensure + // alignment of right-aligned contents. + .navbar-fixed-top &, + .navbar-static-top &, + .navbar-fixed-bottom & { + padding-left: 0; + padding-right: 0; + } + } +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + .navbar-collapse { + max-height: @navbar-collapse-max-height; + + @media (max-device-width: @screen-xs-min) and (orientation: landscape) { + max-height: 200px; + } + } +} + + +// Both navbar header and collapse +// +// When a container is present, change the behavior of the header and collapse. + +.container, +.container-fluid { + > .navbar-header, + > .navbar-collapse { + margin-right: -@navbar-padding-horizontal; + margin-left: -@navbar-padding-horizontal; + + @media (min-width: @grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; + } + } +} + // // Navbar alignment options -// -------------------------------------------------- +// +// Display the navbar across the entirety of the page or fixed it to the top or +// bottom of the page. -// Static navbar +// Static top (unfixed, but 100% wide) navbar .navbar-static-top { - border-radius: 0; + z-index: @zindex-navbar; + border-width: 0 0 1px; + + @media (min-width: @grid-float-breakpoint) { + border-radius: 0; + } } // Fix the top/bottom navbars when screen real estate supports it @@ -74,55 +141,70 @@ right: 0; left: 0; z-index: @zindex-navbar-fixed; - border-radius: 0; + + // Undo the rounded corners + @media (min-width: @grid-float-breakpoint) { + border-radius: 0; + } } .navbar-fixed-top { top: 0; + border-width: 0 0 1px; } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; // override .navbar defaults + border-width: 1px 0 0; } - -// -// Navbar optional components -// -------------------------------------------------- - // Brand/project name + .navbar-brand { - display: block; - max-width: 200px; - margin-left: auto; - margin-right: auto; - padding: @navbar-padding; + float: left; + padding: @navbar-padding-vertical @navbar-padding-horizontal; font-size: @font-size-large; - font-weight: 500; line-height: @line-height-computed; - color: @navbar-brand-color; - text-align: center; + height: @navbar-height; + &:hover, &:focus { - color: @navbar-brand-hover-color; text-decoration: none; - background-color: @navbar-brand-hover-bg; + } + + > img { + display: block; + } + + @media (min-width: @grid-float-breakpoint) { + .navbar > .container &, + .navbar > .container-fluid & { + margin-left: -@navbar-padding-horizontal; + } } } -// Collapsible navbar toggle -.navbar-toggle { - position: absolute; - top: 10px; - right: 10px; - padding: 8px 12px; - background-color: transparent; - border: 1px solid #ddd; - border-radius: 4px; - &:hover, +// Navbar toggle +// +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// JavaScript plugin. + +.navbar-toggle { + position: relative; + float: right; + margin-right: @navbar-padding-horizontal; + padding: 9px 10px; + .navbar-vertical-align(34px); + background-color: transparent; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + border-radius: @border-radius-base; + + // We remove the `outline` here, but later compensate by attaching `:hover` + // styles to `:focus`. &:focus { - background-color: #ddd; + outline: 0; } // Bars @@ -130,76 +212,323 @@ display: block; width: 22px; height: 2px; - background-color: #ccc; border-radius: 1px; } .icon-bar + .icon-bar { margin-top: 4px; } + + @media (min-width: @grid-float-breakpoint) { + display: none; + } } -// Navbar form -.navbar-form { - .form-inline(); - .navbar-vertical-align(@input-height-base); // Vertically center in navbar + +// Navbar nav links +// +// Builds on top of the `.nav` components with its own modifier class to make +// the nav the full height of the horizontal nav (above 768px). + +.navbar-nav { + margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; + + > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: @line-height-computed; + } + + @media (max-width: @grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + > li > a, + .dropdown-header { + padding: 5px 15px 5px 25px; + } + > li > a { + line-height: @line-height-computed; + &:hover, + &:focus { + background-image: none; + } + } + } + } + + // Uncollapse the nav + @media (min-width: @grid-float-breakpoint) { + float: left; + margin: 0; + + > li { + float: left; + > a { + padding-top: @navbar-padding-vertical; + padding-bottom: @navbar-padding-vertical; + } + } + } } + +// Navbar form +// +// Extension of the `.form-inline` with some extra flavor for optimum display in +// our navbars. + +.navbar-form { + margin-left: -@navbar-padding-horizontal; + margin-right: -@navbar-padding-horizontal; + padding: 10px @navbar-padding-horizontal; + 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: @grid-float-breakpoint-max) { + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + } + } + + // Vertically center in expanded, horizontal navbar + .navbar-vertical-align(@input-height-base); + + // Undo 100% width for pull classes + @media (min-width: @grid-float-breakpoint) { + width: auto; + border: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0; + padding-bottom: 0; + .box-shadow(none); + } +} + + // Dropdown menus // Menu position and menu carets .navbar-nav > li > .dropdown-menu { margin-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + .border-top-radius(0); } // Menu position and menu caret support for dropups via extra dropup class .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -// Dropdown menu items and carets -.navbar-nav { - // Caret should match text color on hover - > .dropdown > a:hover .caret, - > .dropdown > a:focus .caret { - border-top-color: @navbar-link-hover-color; - border-bottom-color: @navbar-link-hover-color; - } - - // Remove background color from open dropdown - > .open > a, - > .open > a:hover, - > .open > a:focus { - background-color: @navbar-link-active-bg; - color: @navbar-link-active-color; - } - > .dropdown > a .caret { - border-top-color: @navbar-link-color; - border-bottom-color: @navbar-link-color; - } - > .open > a .caret, - > .open > a:hover .caret, - > .open > a:focus .caret { - border-top-color: @navbar-link-active-color; - border-bottom-color: @navbar-link-active-color; - } -} - -// Right aligned menus need alt position -.navbar-nav.pull-right > li > .dropdown-menu, -.navbar-nav > li > .dropdown-menu.pull-right { - left: auto; - right: 0; + margin-bottom: 0; + .border-top-radius(@navbar-border-radius); + .border-bottom-radius(0); } +// Buttons in navbars +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + .navbar-vertical-align(@input-height-base); + + &.btn-sm { + .navbar-vertical-align(@input-height-small); + } + &.btn-xs { + .navbar-vertical-align(22); + } +} + + +// Text in navbars +// +// Add a class to make any element properly align itself vertically within the navbars. + +.navbar-text { + .navbar-vertical-align(@line-height-computed); + + @media (min-width: @grid-float-breakpoint) { + float: left; + margin-left: @navbar-padding-horizontal; + margin-right: @navbar-padding-horizontal; + } +} + + +// Component alignment +// +// Repurpose the pull utilities as their own navbar utilities to avoid specificity +// issues with parents and chaining. Only do this when the navbar is uncollapsed +// though so that navbar contents properly stack and align in mobile. +// +// Declared after the navbar components to ensure more specificity on the margins. + +@media (min-width: @grid-float-breakpoint) { + .navbar-left { .pull-left(); } + .navbar-right { + .pull-right(); + margin-right: -@navbar-padding-horizontal; + + ~ .navbar-right { + margin-right: 0; + } + } +} + + +// 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: @navbar-default-border; + } + + // Dropdown menu items + .navbar-nav { + // Remove background color from open dropdown + > .open > a { + &, + &:hover, + &:focus { + background-color: @navbar-default-link-active-bg; + color: @navbar-default-link-active-color; + } + } + + @media (max-width: @grid-float-breakpoint-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; + } + } + + .btn-link { + color: @navbar-default-link-color; + &:hover, + &:focus { + color: @navbar-default-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @navbar-default-link-disabled-color; + } + } + } +} // Inverse navbar -// -------------------------------------------------- .navbar-inverse { background-color: @navbar-inverse-bg; + border-color: @navbar-inverse-border; .navbar-brand { color: @navbar-inverse-brand-color; @@ -217,147 +546,115 @@ .navbar-nav { > li > a { color: @navbar-inverse-link-color; + + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + background-color: @navbar-inverse-link-hover-bg; + } } - > li > a:hover, - > li > a:focus { - color: @navbar-inverse-link-hover-color; - background-color: @navbar-inverse-link-hover-bg; + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + } } - > .active > a, - > .active > a:hover, - > .active > a:focus { - color: @navbar-inverse-link-active-color; - background-color: @navbar-inverse-link-active-bg; - } - > .disabled > a, - > .disabled > a:hover, - > .disabled > a:focus { - color: @navbar-inverse-link-disabled-color; - background-color: @navbar-inverse-link-disabled-bg; + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; + } } } // Darken the responsive nav toggle .navbar-toggle { - border-color: #333; + border-color: @navbar-inverse-toggle-border-color; &:hover, &:focus { - background-color: #333; + background-color: @navbar-inverse-toggle-hover-bg; } .icon-bar { - background-color: #fff; + background-color: @navbar-inverse-toggle-icon-bar-bg; } } + .navbar-collapse, + .navbar-form { + border-color: darken(@navbar-inverse-bg, 7%); + } + // Dropdowns .navbar-nav { - > .open > a, - > .open > a:hover, - > .open > a:focus { - background-color: @navbar-inverse-link-active-bg; - color: @navbar-inverse-link-active-color; - } - > .dropdown > a:hover .caret { - border-top-color: @navbar-inverse-link-hover-color; - border-bottom-color: @navbar-inverse-link-hover-color; - } - > .dropdown > a .caret { - border-top-color: @navbar-inverse-link-color; - border-bottom-color: @navbar-inverse-link-color; - } - > .open > a .caret, - > .open > a:hover .caret, - > .open > a:focus .caret { - border-top-color: @navbar-inverse-link-active-color; - border-bottom-color: @navbar-inverse-link-active-color; - } - - } -} - - - -// Responsive navbar -// -------------------------------------------------- - -@media screen and (min-width: @grid-float-breakpoint) { - - .navbar-brand { - float: left; - margin-left: -(@navbar-padding); - margin-right: 5px; - } - .navbar-nav { - float: left; - // undo margin to make nav extend full height of navbar - margin-top: 0; - margin-bottom: 0; - - > li { - float: left; - > a { - border-radius: 0; + > .open > a { + &, + &:hover, + &:focus { + background-color: @navbar-inverse-link-active-bg; + color: @navbar-inverse-link-active-color; } } - &.pull-right { - float: right; - width: auto; + @media (max-width: @grid-float-breakpoint-max) { + // Dropdowns get custom display + .open .dropdown-menu { + > .dropdown-header { + border-color: @navbar-inverse-border; + } + .divider { + background-color: @navbar-inverse-border; + } + > li > a { + color: @navbar-inverse-link-color; + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + background-color: @navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; + } + } + } } } - // Required to make the collapsing navbar work on regular desktops - .navbar-toggle { - position: relative; - top: auto; - left: auto; - display: none; - } - .nav-collapse.collapse { - height: auto !important; - overflow: visible !important; + .navbar-link { + color: @navbar-inverse-link-color; + &:hover { + color: @navbar-inverse-link-hover-color; + } } -} - - - -// Buttons in navbars -// -// Vertically center a button within a navbar (when *not* in a form). - -.navbar-btn { - margin-top: ((@navbar-height - @input-height-base) / 2); -} - - - -// Text in navbars -// -// Add a class to make any element properly align itself vertically within the navbars. - -.navbar-text { - .navbar-vertical-align(@line-height-computed); -} - - - -// Links in navbars -// -// Add a class to ensure links outside the navbar nav are colored correctly. - -// Default navbar variables -.navbar-link { - color: @navbar-link-color; - &:hover { - color: @navbar-link-hover-color; - } -} - -// Use the inverse navbar variables -.navbar-inverse .navbar-link { - color: @navbar-inverse-link-color; - &:hover { - color: @navbar-inverse-link-hover-color; + .btn-link { + color: @navbar-inverse-link-color; + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + } + } } } diff --git a/_docs/less/bootstrap/navs.less b/_docs/less/bootstrap/navs.less index e5925bf..a3d11b1 100644 --- a/_docs/less/bootstrap/navs.less +++ b/_docs/less/bootstrap/navs.less @@ -7,11 +7,10 @@ // -------------------------------------------------- .nav { - margin-left: 0; margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; - .clearfix(); + &:extend(.clearfix all); > li { position: relative; @@ -20,68 +19,62 @@ > a { position: relative; display: block; - padding: 10px 15px; + padding: @nav-link-padding; &:hover, &:focus { text-decoration: none; - background-color: @gray-lighter; + background-color: @nav-link-hover-bg; } } // Disabled state sets text to gray and nukes hover/tab effects &.disabled > a { - color: @gray-light; - } - &.disabled > a:hover, - &.disabled > a:focus { - color: @gray-light; - text-decoration: none; - background-color: transparent; - cursor: default; - } + color: @nav-disabled-link-color; - // Space the headers out when they follow another list item (link) - + .nav-header { - margin-top: 9px; + &:hover, + &:focus { + color: @nav-disabled-link-hover-color; + text-decoration: none; + background-color: transparent; + cursor: @cursor-disabled; + } } } // Open dropdowns - &.open > a, - &.open > a:hover, - &.open > a:focus { - color: #fff; - background-color: @link-color; - border-color: @link-color; - .caret { - border-top-color: #fff; - border-bottom-color: #fff; + .open > a { + &, + &:hover, + &:focus { + background-color: @nav-link-hover-bg; + border-color: @link-color; } } - // Redeclare pull classes because of specifity - // Todo: consider making these utilities !important to avoid this bullshit - > .pull-right { - float: right; - } - - // Dividers (basically an hr) within the dropdown + // Nav dividers (deprecated with v3.0.1) + // + // This should have been removed in v3 with the dropping of `.nav-list`, but + // we missed it. We don't currently support this anywhere, but in the interest + // of maintaining backward compatibility in case you use it, it's deprecated. .nav-divider { .nav-divider(); } + + // Prevent IE8 from misplacing imgs + // + // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 + > li > a > img { + max-width: none; + } } - -// Nav variations -// -------------------------------------------------- - // Tabs // ------------------------- // Give the tabs something to sit on .nav-tabs { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid @nav-tabs-border-color; > li { float: left; // Make the list-items overlay the bottom border @@ -94,25 +87,27 @@ border: 1px solid transparent; border-radius: @border-radius-base @border-radius-base 0 0; &:hover { - border-color: @gray-lighter @gray-lighter #ddd; + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; } } - // Active state, and it's :hover to override normal :hover - &.active > a, - &.active > a:hover, - &.active > a:focus { - color: @gray; - background-color: @body-bg; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; + // Active state, and its :hover to override normal :hover + &.active > a { + &, + &:hover, + &:focus { + color: @nav-tabs-active-link-hover-color; + background-color: @nav-tabs-active-link-hover-bg; + border: 1px solid @nav-tabs-active-link-hover-border-color; + border-bottom-color: transparent; + cursor: default; + } } } // pulling this in mainly for less shorthand &.nav-justified { - .nav-justified; - .nav-tabs-justified; + .nav-justified(); + .nav-tabs-justified(); } } @@ -125,20 +120,20 @@ // Links rendered as pills > a { - border-radius: 5px; + border-radius: @nav-pills-border-radius; } + li { - > a { - margin-left: 2px; - } + margin-left: 2px; } // Active state - &.active > a, - &.active > a:hover, - &.active > a:focus { - color: #fff; - background-color: @component-active-bg; + &.active > a { + &, + &:hover, + &:focus { + color: @nav-pills-active-link-hover-color; + background-color: @nav-pills-active-link-hover-bg; + } } } } @@ -149,95 +144,95 @@ > li { float: none; + li { - > a { - margin-top: 2px; - margin-left: 0; // no need for this gap between nav items - } + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items } } } + +// Nav variations +// -------------------------------------------------- + // Justified nav links // ------------------------- .nav-justified { width: 100%; + > li { float: none; - display: table-cell; - width: 1%; > a { text-align: center; + margin-bottom: 5px; + } + } + + > .dropdown .dropdown-menu { + top: auto; + left: auto; + } + + @media (min-width: @screen-sm-min) { + > li { + display: table-cell; + width: 1%; + > a { + margin-bottom: 0; + } } } } // Move borders to anchors instead of bottom of list -.nav-tabs-justified () { +// +// Mixin for adding on top the shared `.nav-justified` styles for our tabs +.nav-tabs-justified { border-bottom: 0; - > li > a { - border-bottom: 1px solid #ddd; + > li > a { // Override margin from .nav-tabs margin-right: 0; - } - > .active > a { - border-bottom-color: @body-bg; + border-radius: @border-radius-base; } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border: 1px solid @nav-tabs-justified-link-border-color; + } + + @media (min-width: @screen-sm-min) { + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + border-radius: @border-radius-base @border-radius-base 0 0; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } + } } - -// Nav headers (for dropdowns and lists) -// ------------------------- - -.nav-header { - display: block; - padding: 3px 15px; - font-size: @font-size-mini; - font-weight: bold; - line-height: @line-height-base; - color: @gray-light; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; -} - - - // Tabbable tabs // ------------------------- -// Clear any floats -.tabbable { - .clearfix(); +// Hide tabbable panes to start, show them when `.active` +.tab-content { + > .tab-pane { + display: none; + } + > .active { + display: block; + } } -// Show/hide tabbable areas -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - // Dropdowns // ------------------------- -// Make dropdown carets use link color in navs -.nav .caret { - border-top-color: @link-color; - border-bottom-color: @link-color; -} -.nav a:hover .caret { - border-top-color: @link-hover-color; - border-bottom-color: @link-hover-color; -} - // Specific dropdowns .nav-tabs .dropdown-menu { // make dropdown border overlap tab border diff --git a/_docs/less/bootstrap/normalize.less b/_docs/less/bootstrap/normalize.less index a2e9c64..9dddf73 100644 --- a/_docs/less/bootstrap/normalize.less +++ b/_docs/less/bootstrap/normalize.less @@ -1,11 +1,33 @@ -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS and IE text size adjust after device orientation change, +// without disabling user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} -// ========================================================================== // HTML5 display definitions // ========================================================================== // -// Correct `block` display not defined in IE 8/9. +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 +// and Firefox. +// Correct `block` display not defined for `main` in IE 11. // article, @@ -17,6 +39,7 @@ footer, header, hgroup, main, +menu, nav, section, summary { @@ -24,13 +47,16 @@ summary { } // -// Correct `inline-block` display not defined in IE 8/9. +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. // audio, canvas, +progress, video { - display: inline-block; + display: inline-block; // 1 + vertical-align: baseline; // 2 } // @@ -44,51 +70,29 @@ audio:not([controls]) { } // -// Address styling not present in IE 8/9. +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. // -[hidden] { +[hidden], +template { display: none; } -// ========================================================================== -// Base -// ========================================================================== - -// -// 1. Set default font family to sans-serif. -// 2. Prevent iOS text size adjust after orientation change, without disabling -// user zoom. -// - -html { - font-family: sans-serif; // 1 - -webkit-text-size-adjust: 100%; // 2 - -ms-text-size-adjust: 100%; // 2 -} - -// -// Remove default margin. -// - -body { - margin: 0; -} - -// ========================================================================== // Links // ========================================================================== // -// Address `outline` inconsistency between Chrome and other browsers. +// Remove the gray background color from active links in IE 10. // -a:focus { - outline: thin dotted; +a { + background-color: transparent; } // -// Improve readability when focused and also mouse hovered in all browsers. +// Improve readability of focused elements when they are also in an +// active/hover state. // a:active, @@ -96,22 +100,11 @@ a:hover { outline: 0; } -// ========================================================================== -// Typography +// Text-level semantics // ========================================================================== // -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari 5, and Chrome. -// - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -// -// Address styling not present in IE 8/9, Safari 5, and Chrome. +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. // abbr[title] { @@ -119,7 +112,7 @@ abbr[title] { } // -// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. // b, @@ -128,7 +121,7 @@ strong { } // -// Address styling not present in Safari 5 and Chrome. +// Address styling not present in Safari and Chrome. // dfn { @@ -136,13 +129,13 @@ dfn { } // -// Address differences between Firefox and other browsers. +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. // -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; +h1 { + font-size: 2em; + margin: 0.67em 0; } // @@ -154,34 +147,6 @@ mark { color: #000; } -// -// Correct font family set oddly in Safari 5 and Chrome. -// - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -// -// Improve readability of pre-formatted text in all browsers. -// - -pre { - white-space: pre-wrap; -} - -// -// Set consistent quote types. -// - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - // // Address inconsistent and variable font size in all browsers. // @@ -210,12 +175,11 @@ sub { bottom: -0.25em; } -// ========================================================================== // Embedded content // ========================================================================== // -// Remove border when inside `a` element in IE 8/9. +// Remove border when inside `a` element in IE 8/9/10. // img { @@ -223,79 +187,91 @@ img { } // -// Correct overflow displayed oddly in IE 9. +// Correct overflow not hidden in IE 9/10/11. // svg:not(:root) { overflow: hidden; } -// ========================================================================== -// Figures +// Grouping content // ========================================================================== // -// Address margin not present in IE 8/9 and Safari 5. +// Address margin not present in IE 8/9 and Safari. // figure { - margin: 0; + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + box-sizing: content-box; + height: 0; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } -// ========================================================================== // Forms // ========================================================================== // -// Define consistent border, margin, and padding. +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. // -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - // -// 1. Correct `color` not being inherited in IE 8/9. -// 2. Remove padding so people aren't caught out if they zero out fieldsets. -// - -legend { - border: 0; // 1 - padding: 0; // 2 -} - -// -// 1. Correct font family not being inherited in all browsers. -// 2. Correct font size not being inherited in all browsers. -// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. // button, input, +optgroup, select, textarea { - font-family: inherit; // 1 - font-size: 100%; // 2 + color: inherit; // 1 + font: inherit; // 2 margin: 0; // 3 } // -// Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. +// Address `overflow` set to `hidden` in IE 8/9/10/11. // -button, -input { - line-height: normal; +button { + overflow: visible; } // // Address inconsistent `text-transform` inheritance for `button` and `select`. // All other form control elements do not inherit `text-transform` values. -// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. -// Correct `select` style inheritance in Firefox 4+ and Opera. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. // button, @@ -328,40 +304,6 @@ html input[disabled] { cursor: default; } -// -// 1. Address box sizing set to `content-box` in IE 8/9. -// 2. Remove excess padding in IE 8/9. -// - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 -} - -// -// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. -// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome -// (include `-moz` to future-proof). -// - -input[type="search"] { - -webkit-appearance: textfield; // 1 - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; // 2 - box-sizing: content-box; -} - -// -// Remove inner padding and search cancel button in Safari 5 and Chrome -// on OS X. -// - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - // // Remove inner padding and border in Firefox 4+. // @@ -373,16 +315,97 @@ input::-moz-focus-inner { } // -// 1. Remove default vertical scrollbar in IE 8/9. -// 2. Improve readability and alignment in all browsers. +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// 1. Address `appearance` set to `searchfield` in Safari and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari and Chrome. +// + +input[type="search"] { + -webkit-appearance: textfield; // 1 + box-sizing: content-box; //2 +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9/10/11. // textarea { - overflow: auto; // 1 - vertical-align: top; // 2 + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; } -// ========================================================================== // Tables // ========================================================================== @@ -394,3 +417,8 @@ table { border-collapse: collapse; border-spacing: 0; } + +td, +th { + padding: 0; +} diff --git a/_docs/less/bootstrap/pager.less b/_docs/less/bootstrap/pager.less index 0b2fcf7..41abaaa 100644 --- a/_docs/less/bootstrap/pager.less +++ b/_docs/less/bootstrap/pager.less @@ -4,25 +4,26 @@ .pager { + padding-left: 0; margin: @line-height-computed 0; list-style: none; text-align: center; - .clearfix(); + &:extend(.clearfix all); li { display: inline; > a, > span { display: inline-block; padding: 5px 14px; - background-color: @pagination-bg; - border: 1px solid @pagination-border; - border-radius: 15px; + background-color: @pager-bg; + border: 1px solid @pager-border; + border-radius: @pager-border-radius; } > a:hover, > a:focus { text-decoration: none; - background-color: @pagination-active-bg; + background-color: @pager-hover-bg; } } @@ -45,10 +46,9 @@ > a:hover, > a:focus, > span { - color: @gray-light; - background-color: @pagination-bg; - cursor: default; + color: @pager-disabled-color; + background-color: @pager-bg; + cursor: @cursor-disabled; } } - } diff --git a/_docs/less/bootstrap/pagination.less b/_docs/less/bootstrap/pagination.less index 73c063b..31f77aa 100644 --- a/_docs/less/bootstrap/pagination.less +++ b/_docs/less/bootstrap/pagination.less @@ -3,85 +3,87 @@ // -------------------------------------------------- .pagination { display: inline-block; + padding-left: 0; margin: @line-height-computed 0; border-radius: @border-radius-base; -} -.pagination > li { - display: inline; // Remove list-style and block-level defaults -} -.pagination > li > a, -.pagination > li > span { - float: left; // Collapse white-space - padding: 4px 12px; - line-height: @line-height-base; - text-decoration: none; - background-color: @pagination-bg; - border: 1px solid @pagination-border; - border-left-width: 0; -} -.pagination > li > a:hover, -.pagination > li > a:focus, -.pagination > .active > a, -.pagination > .active > span { - background-color: @pagination-active-bg; -} -.pagination > .active > a, -.pagination > .active > span { - color: @gray-light; - cursor: default; -} -.pagination > .disabled > span, -.pagination > .disabled > a, -.pagination > .disabled > a:hover, -.pagination > .disabled > a:focus { - color: @gray-light; - background-color: @pagination-bg; - cursor: default; -} -.pagination > li:first-child > a, -.pagination > li:first-child > span { - border-left-width: 1px; - .border-left-radius(@border-radius-base); -} -.pagination > li:last-child > a, -.pagination > li:last-child > span { - .border-right-radius(@border-radius-base); -} + > li { + 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; + color: @pagination-color; + background-color: @pagination-bg; + border: 1px solid @pagination-border; + margin-left: -1px; + } + &:first-child { + > a, + > span { + margin-left: 0; + .border-left-radius(@border-radius-base); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius-base); + } + } + } + + > li > a, + > li > span { + &:hover, + &:focus { + z-index: 2; + color: @pagination-hover-color; + background-color: @pagination-hover-bg; + border-color: @pagination-hover-border; + } + } + + > .active > a, + > .active > span { + &, + &:hover, + &:focus { + z-index: 3; + color: @pagination-active-color; + background-color: @pagination-active-bg; + border-color: @pagination-active-border; + cursor: default; + } + } + + > .disabled { + > span, + > span:hover, + > span:focus, + > a, + > a:hover, + > a:focus { + color: @pagination-disabled-color; + background-color: @pagination-disabled-bg; + border-color: @pagination-disabled-border; + cursor: @cursor-disabled; + } + } +} // Sizing // -------------------------------------------------- // Large -.pagination-large { - > li > a, - > li > span { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - } - > li:first-child > a, - > li:first-child > span { - .border-left-radius(@border-radius-large); - } - > li:last-child > a, - > li:last-child > span { - .border-right-radius(@border-radius-large); - } +.pagination-lg { + .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); } // Small -.pagination-small { - > li > a, - > li > span { - padding: @padding-small-vertical @padding-small-horizontal; - font-size: @font-size-small; - } - > li:first-child > a, - > li:first-child > span { - .border-left-radius(@border-radius-small); - } - > li:last-child > a, - > li:last-child > span { - .border-right-radius(@border-radius-small); - } +.pagination-sm { + .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); } diff --git a/_docs/less/bootstrap/panels.less b/_docs/less/bootstrap/panels.less index a08febe..425eb5e 100644 --- a/_docs/less/bootstrap/panels.less +++ b/_docs/less/bootstrap/panels.less @@ -5,92 +5,267 @@ // Base class .panel { - padding: 15px; - margin-bottom: 20px; + 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)); } +// Panel contents +.panel-body { + padding: @panel-body-padding; + &:extend(.clearfix all); +} + // Optional heading .panel-heading { - margin: -15px -15px 15px; - padding: 10px 15px; - font-size: (@font-size-base * 1.25); - font-weight: 500; - background-color: @panel-heading-bg; - border-bottom: 1px solid @panel-border; - border-top-left-radius: (@panel-border-radius - 1); - border-top-right-radius: (@panel-border-radius - 1); + padding: @panel-heading-padding; + border-bottom: 1px solid transparent; + .border-top-radius((@panel-border-radius - 1)); + + > .dropdown .dropdown-toggle { + color: inherit; + } +} + +// Within heading, strip any `h*` tag of its default margins for spacing. +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: ceil((@font-size-base * 1.125)); + color: inherit; + + > a, + > small, + > .small, + > small > a, + > .small > a { + color: inherit; + } } // Optional footer (stays gray in every modifier class) .panel-footer { - margin: 15px -15px -15px; - padding: 10px 15px; + padding: @panel-footer-padding; background-color: @panel-footer-bg; - border-top: 1px solid @panel-border; - border-bottom-left-radius: (@panel-border-radius - 1); - border-bottom-right-radius: (@panel-border-radius - 1); + border-top: 1px solid @panel-inner-border; + .border-bottom-radius((@panel-border-radius - 1)); } -// Contextual variations -.panel-primary { - border-color: @panel-primary-border; - .panel-heading { - color: @panel-primary-text; - background-color: @panel-primary-heading-bg; - border-color: @panel-primary-border; - } -} -.panel-success { - border-color: @panel-success-border; - .panel-heading { - color: @panel-success-text; - background-color: @panel-success-heading-bg; - border-color: @panel-success-border; - } -} -.panel-warning { - border-color: @panel-warning-border; - .panel-heading { - color: @panel-warning-text; - background-color: @panel-warning-heading-bg; - border-color: @panel-warning-border; - } -} -.panel-danger { - border-color: @panel-danger-border; - .panel-heading { - color: @panel-danger-text; - background-color: @panel-danger-heading-bg; - border-color: @panel-danger-border; - } -} -.panel-info { - border-color: @panel-info-border; - .panel-heading { - color: @panel-info-text; - background-color: @panel-info-heading-bg; - border-color: @panel-info-border; - } -} // List groups in panels -.list-group-flush { - margin: 15px -15px -15px; +// +// By default, space out list group content from panel headings to account for +// any kind of custom content between the two. - .list-group-item { - border-width: 1px 0; +.panel { + > .list-group, + > .panel-collapse > .list-group { + margin-bottom: 0; - // Remove border radius for top one - &:first-child { - .border-top-radius(0); + .list-group-item { + border-width: 1px 0; + border-radius: 0; } - // But keep it for the last one + + // Add border top radius for first one + &:first-child { + .list-group-item:first-child { + border-top: 0; + .border-top-radius((@panel-border-radius - 1)); + } + } + + // Add border bottom radius for last one &:last-child { - border-bottom: 0; + .list-group-item:last-child { + border-bottom: 0; + .border-bottom-radius((@panel-border-radius - 1)); + } + } + } + > .panel-heading + .panel-collapse > .list-group { + .list-group-item:first-child { + .border-top-radius(0); } } } +// Collapse space between when there's no additional content. +.panel-heading + .list-group { + .list-group-item:first-child { + border-top-width: 0; + } +} +.list-group + .panel-footer { + border-top-width: 0; +} + +// Tables in panels +// +// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and +// watch it go full width. + +.panel { + > .table, + > .table-responsive > .table, + > .panel-collapse > .table { + margin-bottom: 0; + + caption { + padding-left: @panel-body-padding; + padding-right: @panel-body-padding; + } + } + // Add border top radius for first one + > .table:first-child, + > .table-responsive:first-child > .table:first-child { + .border-top-radius((@panel-border-radius - 1)); + + > thead:first-child, + > tbody:first-child { + > tr:first-child { + border-top-left-radius: (@panel-border-radius - 1); + border-top-right-radius: (@panel-border-radius - 1); + + td:first-child, + th:first-child { + border-top-left-radius: (@panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-top-right-radius: (@panel-border-radius - 1); + } + } + } + } + // Add border bottom radius for last one + > .table:last-child, + > .table-responsive:last-child > .table:last-child { + .border-bottom-radius((@panel-border-radius - 1)); + + > tbody:last-child, + > tfoot:last-child { + > tr:last-child { + border-bottom-left-radius: (@panel-border-radius - 1); + border-bottom-right-radius: (@panel-border-radius - 1); + + td:first-child, + th:first-child { + border-bottom-left-radius: (@panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-bottom-right-radius: (@panel-border-radius - 1); + } + } + } + } + > .panel-body + .table, + > .panel-body + .table-responsive, + > .table + .panel-body, + > .table-responsive + .panel-body { + border-top: 1px solid @table-border-color; + } + > .table > tbody:first-child > tr:first-child th, + > .table > tbody:first-child > tr:first-child td { + border-top: 0; + } + > .table-bordered, + > .table-responsive > .table-bordered { + border: 0; + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + > thead, + > tbody { + > tr:first-child { + > td, + > th { + border-bottom: 0; + } + } + } + > tbody, + > tfoot { + > tr:last-child { + > td, + > th { + border-bottom: 0; + } + } + } + } + > .table-responsive { + border: 0; + margin-bottom: 0; + } +} + + +// Collapsable panels (aka, accordion) +// +// Wrap a series of panels in `.panel-group` to turn them into an accordion with +// the help of our collapse JavaScript plugin. + +.panel-group { + margin-bottom: @line-height-computed; + + // Tighten up margin so it's only between panels + .panel { + margin-bottom: 0; + border-radius: @panel-border-radius; + + + .panel { + margin-top: 5px; + } + } + + .panel-heading { + border-bottom: 0; + + + .panel-collapse > .panel-body, + + .panel-collapse > .list-group { + border-top: 1px solid @panel-inner-border; + } + } + + .panel-footer { + border-top: 0; + + .panel-collapse .panel-body { + border-bottom: 1px solid @panel-inner-border; + } + } +} + + +// 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); +} +.panel-success { + .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); +} +.panel-info { + .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); +} +.panel-warning { + .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); +} +.panel-danger { + .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); +} diff --git a/_docs/less/bootstrap/popovers.less b/_docs/less/bootstrap/popovers.less index bcd30e9..3a62a64 100644 --- a/_docs/less/bootstrap/popovers.less +++ b/_docs/less/bootstrap/popovers.less @@ -9,37 +9,34 @@ left: 0; z-index: @zindex-popover; display: none; - max-width: 276px; + max-width: @popover-max-width; padding: 1px; - text-align: left; // Reset given new insertion method + // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. + // So reset our font and text properties to avoid inheriting weird values. + .reset-text(); + font-size: @font-size-base; + background-color: @popover-bg; - -webkit-bg-clip: padding-box; - -moz-bg-clip: padding; background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - border-radius: 6px; + border: 1px solid @popover-fallback-border-color; + border: 1px solid @popover-border-color; + border-radius: @border-radius-large; .box-shadow(0 5px 10px rgba(0,0,0,.2)); - // Overrides for proper insertion - white-space: normal; - // Offset the popover to account for the popover arrow - &.top { margin-top: -10px; } - &.right { margin-left: 10px; } - &.bottom { margin-top: 10px; } - &.left { margin-left: -10px; } + &.top { margin-top: -@popover-arrow-width; } + &.right { margin-left: @popover-arrow-width; } + &.bottom { margin-top: @popover-arrow-width; } + &.left { margin-left: -@popover-arrow-width; } } .popover-title { margin: 0; // reset heading margin padding: 8px 14px; font-size: @font-size-base; - font-weight: normal; - line-height: 18px; background-color: @popover-title-bg; border-bottom: 1px solid darken(@popover-title-bg, 5%); - border-radius: 5px 5px 0 0; + border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; } .popover-content { @@ -50,60 +47,65 @@ // // .arrow is outer, .arrow:after is inner -.popover .arrow, -.popover .arrow:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; +.popover > .arrow { + &, + &:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } -.popover .arrow { +.popover > .arrow { border-width: @popover-arrow-outer-width; } -.popover .arrow:after { +.popover > .arrow:after { border-width: @popover-arrow-width; content: ""; } .popover { - &.top .arrow { + &.top > .arrow { left: 50%; margin-left: -@popover-arrow-outer-width; border-bottom-width: 0; - border-top-color: #999; // IE8 fallback + border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-top-color: @popover-arrow-outer-color; bottom: -@popover-arrow-outer-width; &:after { + content: " "; bottom: 1px; margin-left: -@popover-arrow-width; border-bottom-width: 0; border-top-color: @popover-arrow-color; } } - &.right .arrow { + &.right > .arrow { top: 50%; left: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width; border-left-width: 0; - border-right-color: #999; // IE8 fallback + border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-right-color: @popover-arrow-outer-color; &:after { + content: " "; left: 1px; bottom: -@popover-arrow-width; border-left-width: 0; border-right-color: @popover-arrow-color; } } - &.bottom .arrow { + &.bottom > .arrow { left: 50%; margin-left: -@popover-arrow-outer-width; border-top-width: 0; - border-bottom-color: #999; // IE8 fallback + border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-bottom-color: @popover-arrow-outer-color; top: -@popover-arrow-outer-width; &:after { + content: " "; top: 1px; margin-left: -@popover-arrow-width; border-top-width: 0; @@ -111,19 +113,19 @@ } } - &.left .arrow { + &.left > .arrow { top: 50%; right: -@popover-arrow-outer-width; margin-top: -@popover-arrow-outer-width; border-right-width: 0; - border-left-color: #999; // IE8 fallback + border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback border-left-color: @popover-arrow-outer-color; &:after { + content: " "; right: 1px; border-right-width: 0; border-left-color: @popover-arrow-color; bottom: -@popover-arrow-width; } } - } diff --git a/_docs/less/bootstrap/print.less b/_docs/less/bootstrap/print.less index 64c1ff9..66e54ab 100644 --- a/_docs/less/bootstrap/print.less +++ b/_docs/less/bootstrap/print.less @@ -1,85 +1,101 @@ -// -// Basic print styles -// -------------------------------------------------- -// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ + +// ========================================================================== +// Print styles. +// Inlined to avoid the additional HTTP request: h5bp.com/r +// ========================================================================== @media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; // Black prints faster: h5bp.com/s + box-shadow: none !important; + text-shadow: none !important; + } - * { - text-shadow: none !important; - color: #000 !important; // Black prints faster: h5bp.com/s - background: transparent !important; - box-shadow: none !important; - } + a, + a:visited { + text-decoration: underline; + } - a, - a:visited { - text-decoration: underline; - } + a[href]:after { + content: " (" attr(href) ")"; + } - a[href]:after { - content: " (" attr(href) ")"; - } + abbr[title]:after { + content: " (" attr(title) ")"; + } - abbr[title]:after { - content: " (" attr(title) ")"; - } + // Don't show links that are fragment identifiers, + // or use the `javascript:` pseudo protocol + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } - // Don't show links for images, or javascript/internal links - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } + thead { + display: table-header-group; // h5bp.com/t + } - thead { - display: table-header-group; // h5bp.com/t - } + tr, + img { + page-break-inside: avoid; + } - tr, - img { - page-break-inside: avoid; - } + img { + max-width: 100% !important; + } - img { - max-width: 100% !important; - } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } - @page { - margin: 2cm .5cm; - } + h2, + h3 { + page-break-after: avoid; + } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } + // Bootstrap specific changes start - h2, - h3 { - page-break-after: avoid; - } + // Bootstrap components + .navbar { + display: none; + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } + } + .label { + border: 1px solid #000; + } - // Bootstrap components - .navbar { - display: none; - } - .table td, - .table th { - background-color: #fff !important; - } - .btn > .caret, - .dropup > .btn > .caret { - border-top-color: #000 !important; - } - .label { - border: 1px solid #000; - } + .table { + border-collapse: collapse !important; + + td, + th { + background-color: #fff !important; + } + } + .table-bordered { + th, + td { + border: 1px solid #ddd !important; + } + } + + // Bootstrap specific changes end } diff --git a/_docs/less/bootstrap/progress-bars.less b/_docs/less/bootstrap/progress-bars.less index e963fa9..8868a1f 100644 --- a/_docs/less/bootstrap/progress-bars.less +++ b/_docs/less/bootstrap/progress-bars.less @@ -6,38 +6,19 @@ // Bar animations // ------------------------- -// Webkit +// WebKit @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } -// Firefox -@-moz-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// IE9 -@-ms-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Opera -@-o-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } -} - -// Spec +// Spec and IE10+ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } - // Bar itself // ------------------------- @@ -47,7 +28,7 @@ height: @line-height-computed; margin-bottom: @line-height-computed; background-color: @progress-bg; - border-radius: @border-radius-base; + border-radius: @progress-border-radius; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); } @@ -57,62 +38,50 @@ width: 0%; height: 100%; font-size: @font-size-small; - color: #fff; + line-height: @line-height-computed; + color: @progress-bar-color; text-align: center; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); background-color: @progress-bar-bg; .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .transition(width .6s ease); } // Striped bars -.progress-striped .progress-bar { - #gradient > .striped(@progress-bar-bg); - .background-size(40px 40px); +// +// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar-striped` class, which you just add to an existing +// `.progress-bar`. +.progress-striped .progress-bar, +.progress-bar-striped { + #gradient > .striped(); + background-size: 40px 40px; } // Call animation for the active one -.progress.active .progress-bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - -ms-animation: progress-bar-stripes 2s linear infinite; - -o-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; +// +// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar.active` approach. +.progress.active .progress-bar, +.progress-bar.active { + .animation(progress-bar-stripes 2s linear infinite); } - // Variations // ------------------------- -// Danger (red) -.progress-bar-danger { - background-color: @progress-bar-danger-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-danger-bg); - } -} - -// Success (green) .progress-bar-success { - background-color: @progress-bar-success-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-success-bg); - } + .progress-bar-variant(@progress-bar-success-bg); } -// Warning (orange) -.progress-bar-warning { - background-color: @progress-bar-warning-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-warning-bg); - } -} - -// Info (teal) .progress-bar-info { - background-color: @progress-bar-info-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-info-bg); - } + .progress-bar-variant(@progress-bar-info-bg); +} + +.progress-bar-warning { + .progress-bar-variant(@progress-bar-warning-bg); +} + +.progress-bar-danger { + .progress-bar-variant(@progress-bar-danger-bg); } diff --git a/_docs/less/bootstrap/responsive-embed.less b/_docs/less/bootstrap/responsive-embed.less new file mode 100644 index 0000000..080a511 --- /dev/null +++ b/_docs/less/bootstrap/responsive-embed.less @@ -0,0 +1,35 @@ +// Embeds responsive +// +// Credit: Nicolas Gallagher and SUIT CSS. + +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; + + .embed-responsive-item, + iframe, + embed, + object, + video { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; + } +} + +// Modifier class for 16:9 aspect ratio +.embed-responsive-16by9 { + padding-bottom: 56.25%; +} + +// Modifier class for 4:3 aspect ratio +.embed-responsive-4by3 { + padding-bottom: 75%; +} diff --git a/_docs/less/bootstrap/responsive-utilities.less b/_docs/less/bootstrap/responsive-utilities.less index 082109e..b1db31d 100644 --- a/_docs/less/bootstrap/responsive-utilities.less +++ b/_docs/less/bootstrap/responsive-utilities.less @@ -3,125 +3,192 @@ // -------------------------------------------------- -// IE10 Metro responsive -// Required for Windows 8 Metro split-screen snapping with IE10 +// IE10 in Windows (Phone) 8 // +// Support for responsive views via media queries is kind of borked in IE10, for +// Surface/desktop in split view and for Windows Phone 8. This particular fix +// must be accompanied by a snippet of JavaScript to sniff the user agent and +// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at +// our Getting Started page for more information on this bug. +// +// For more information, see the following: +// +// Issue: https://github.com/twbs/bootstrap/issues/10497 +// Docs: http://getbootstrap.com/getting-started/#support-ie10-width +// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ -@-ms-viewport{ + +@-ms-viewport { width: device-width; } -// IE10 on Windows Phone 8 -// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In -// other words, say on a Lumia, you'll get 768px as the device width, -// meaning users will see the tablet styles and not phone styles. -// -// Alternatively you can override this with JS (see source below), but -// we won't be doing that here given our limited scope. -// -// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ -@media screen and (max-width: 400px) { - @-ms-viewport{ - width: 320px; - } -} - -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} // Visibility utilities - -// For Phones -.visible-sm { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } +// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { + .responsive-invisibility(); } -.visible-md { display: none !important; } -.visible-lg { display: none !important; } -.hidden-sm { display: none !important; } +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} + +.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } +} +.visible-xs-block { + @media (max-width: @screen-xs-max) { + display: block !important; + } +} +.visible-xs-inline { + @media (max-width: @screen-xs-max) { + display: inline !important; + } +} +.visible-xs-inline-block { + @media (max-width: @screen-xs-max) { + display: inline-block !important; + } +} + +.visible-sm { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } +} +.visible-sm-block { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: block !important; + } +} +.visible-sm-inline { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline !important; + } +} +.visible-sm-inline-block { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline-block !important; + } +} + +.visible-md { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + .responsive-visibility(); + } +} +.visible-md-block { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: block !important; + } +} +.visible-md-inline { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline !important; + } +} +.visible-md-inline-block { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline-block !important; + } +} + +.visible-lg { + @media (min-width: @screen-lg-min) { + .responsive-visibility(); + } +} +.visible-lg-block { + @media (min-width: @screen-lg-min) { + display: block !important; + } +} +.visible-lg-inline { + @media (min-width: @screen-lg-min) { + display: inline !important; + } +} +.visible-lg-inline-block { + @media (min-width: @screen-lg-min) { + display: inline-block !important; + } +} + +.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } +} +.hidden-sm { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } +} .hidden-md { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } } .hidden-lg { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } -} - - -// Tablets & small desktops only -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { - .visible-sm { display: none !important; } - .visible-md { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } - } - .visible-lg { display: none !important; } - - .hidden-sm { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } - } - .hidden-md { display: none !important; } - .hidden-lg { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + @media (min-width: @screen-lg-min) { + .responsive-invisibility(); } } -// For desktops -@media (min-width: @screen-desktop) { - .visible-sm { display: none !important; } - .visible-md { display: none !important; } - .visible-lg { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } - } - - .hidden-sm { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } - } - .hidden-md { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } - } - .hidden-lg { display: none !important; } -} // Print utilities -.visible-print { display: none !important; } -.hidden-print { } +// +// Media queries are placed on the inside to be mixin-friendly. -@media print { - .visible-print { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } +// Note: Deprecated .visible-print as of v3.2.0 +.visible-print { + .responsive-invisibility(); + + @media print { + .responsive-visibility(); + } +} +.visible-print-block { + display: none !important; + + @media print { + display: block !important; + } +} +.visible-print-inline { + display: none !important; + + @media print { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} + +.hidden-print { + @media print { + .responsive-invisibility(); } - .hidden-print { display: none !important; } } diff --git a/_docs/less/bootstrap/scaffolding.less b/_docs/less/bootstrap/scaffolding.less index 9f57397..1929bfc 100644 --- a/_docs/less/bootstrap/scaffolding.less +++ b/_docs/less/bootstrap/scaffolding.less @@ -4,18 +4,23 @@ // Reset the box-sizing -// ------------------------- - +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing * { .box-sizing(border-box); } +*:before, +*:after { + .box-sizing(border-box); +} // Body reset -// ------------------------- html { - font-size: 62.5%; + font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); } @@ -27,7 +32,7 @@ body { background-color: @body-bg; } -// Reset fonts for revelant elements +// Reset fonts for relevant elements input, button, select, @@ -39,43 +44,118 @@ textarea { // Links -// ------------------------- a { color: @link-color; text-decoration: none; + + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: @link-hover-decoration; + } + + &:focus { + .tab-focus(); + } } -a:hover, -a:focus { - color: @link-hover-color; - text-decoration: underline; -} -a:focus { - .tab-focus(); + + +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; } // Images -// ------------------------- img { - // Responsive images (ensure images don't scale beyond their parents) - max-width: 100%; // Part 1: Set a maxium relative to the parent - height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching - - // Match vertical alignment with other comment elements vertical-align: middle; } +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + .img-responsive(); +} + // Rounded corners .img-rounded { - border-radius: 6px; + border-radius: @border-radius-large; } // 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 { - border-radius: 500px; // crank the border-radius so it works with most reasonably sized images + border-radius: 50%; // set radius in percents +} + + +// Horizontal rules + +hr { + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; + border: 0; + 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; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Credit: HTML5 Boilerplate + +.sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + + +// iOS "clickable elements" fix for role="button" +// +// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) +// for traditionally non-focusable elements with role="button" +// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +[role="button"] { + cursor: pointer; } diff --git a/_docs/less/bootstrap/tables.less b/_docs/less/bootstrap/tables.less index 88481a9..2242c03 100644 --- a/_docs/less/bootstrap/tables.less +++ b/_docs/less/bootstrap/tables.less @@ -4,45 +4,57 @@ table { - max-width: 100%; background-color: @table-bg; } +caption { + padding-top: @table-cell-padding; + padding-bottom: @table-cell-padding; + color: @text-muted; + text-align: left; +} th { text-align: left; } -// BASELINE STYLES -// --------------- +// Baseline styles .table { width: 100%; + max-width: 100%; margin-bottom: @line-height-computed; // Cells - thead > tr > th, - tbody > tr > th, - thead > tr > td, - tbody > tr > td { - padding: 8px; - line-height: @line-height-base; - vertical-align: top; - border-top: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-cell-padding; + line-height: @line-height-base; + vertical-align: top; + border-top: 1px solid @table-border-color; + } + } } // Bottom align for column headings - thead > tr > th { + > thead > tr > th { vertical-align: bottom; + border-bottom: 2px solid @table-border-color; } // Remove top border from thead by default - caption + thead tr:first-child th, - caption + thead tr:first-child td, - colgroup + thead tr:first-child th, - colgroup + thead tr:first-child td, - thead:first-child tr:first-child th, - thead:first-child tr:first-child td { - border-top: 0; + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } } // Account for multiple tbody instances - tbody + tbody { + > tbody + tbody { border-top: 2px solid @table-border-color; } @@ -53,192 +65,170 @@ th { } - -// CONDENSED TABLE W/ HALF PADDING -// ------------------------------- +// Condensed table w/ half padding .table-condensed { - thead > tr > th, - tbody > tr > th, - thead > tr > td, - tbody > tr > td { - padding: 4px 5px; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-condensed-cell-padding; + } + } } } - -// BORDERED VERSION -// ---------------- +// Bordered version +// +// Add borders all around the table and between all the columns. .table-bordered { border: 1px solid @table-border-color; - border-collapse: separate; // Done so we can round those corners! - border-left: 0; - border-radius: @border-radius-base; - - > thead > tr > th, - > tbody > tr > th, - > thead > tr > td, - > tbody > tr > td { - border-left: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid @table-border-color; + } + } } - // Prevent a double border - > caption + thead > tr:first-child th, - > caption + tbody > tr:first-child th, - > caption + tbody > tr:first-child td, - > colgroup + thead > tr:first-child th, - > colgroup + tbody > tr:first-child th, - > colgroup + tbody > tr:first-child td, - > thead:first-child > tr:first-child th, - > tbody:first-child > tr:first-child th, - > tbody:first-child > tr:first-child td { - border-top: 0; + > thead > tr { + > th, + > td { + border-bottom-width: 2px; + } } - // For first th/td in the first row in the first thead or tbody - > thead:first-child > tr:first-child > th:first-child, - > tbody:first-child > tr:first-child > td:first-child, - > tbody:first-child > tr:first-child > th:first-child { - border-top-left-radius: @border-radius-base; - } - // For last th/td in the first row in the first thead or tbody - > thead:first-child > tr:first-child > th:last-child, - > tbody:first-child > tr:first-child > td:last-child, - > tbody:first-child > tr:first-child > th:last-child { - border-top-right-radius: @border-radius-base; - } - // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot - > thead:last-child > tr:last-child > th:first-child, - > tbody:last-child > tr:last-child > td:first-child, - > tbody:last-child > tr:last-child > th:first-child, - > tfoot:last-child > tr:last-child > td:first-child, - > tfoot:last-child > tr:last-child > th:first-child { - border-bottom-left-radius: @border-radius-base; - } - // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot - > thead:last-child > tr:last-child > th:last-child, - > tbody:last-child > tr:last-child > td:last-child, - > tbody:last-child > tr:last-child > th:last-child, - > tfoot:last-child > tr:last-child > td:last-child, - > tfoot:last-child > tr:last-child > th:last-child { - border-bottom-right-radius: @border-radius-base; - } - - // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot - > tfoot + tbody:last-child > tr:last-child > td:first-child { - border-bottom-left-radius: 0; - } - > tfoot + tbody:last-child > tr:last-child > td:last-child { - border-bottom-right-radius: 0; - } - - // Special fixes to round the left border on the first td/th - > caption + thead > tr:first-child > th:first-child, - > caption + tbody > tr:first-child > td:first-child, - > colgroup + thead > tr:first-child > th:first-child, - > colgroup + tbody > tr:first-child > td:first-child { - border-top-left-radius: @border-radius-base; - } - > caption + thead > tr:first-child > th:last-child, - > caption + tbody > tr:first-child > td:last-child, - > colgroup + thead > tr:first-child > th:last-child, - > colgroup + tbody > tr:first-child > td:last-child { - border-top-right-radius: @border-radius-base; - } - } - -// ZEBRA-STRIPING -// -------------- - +// Zebra-striping +// // Default zebra-stripe styles (alternating gray and transparent backgrounds) + .table-striped { - > tbody { - > tr:nth-child(odd) > td, - > tr:nth-child(odd) > th { - background-color: @table-bg-accent; - } + > tbody > tr:nth-of-type(odd) { + background-color: @table-bg-accent; } } - -// HOVER EFFECT -// ------------ - +// Hover effect +// // Placed here since it has to come after the potential zebra striping + .table-hover { - > tbody { - > tr:hover > td, - > tr:hover > th { - background-color: @table-bg-hover; - } + > tbody > tr:hover { + background-color: @table-bg-hover; } } - -// TABLE CELL SIZING -// ----------------- - +// Table cell sizing +// // Reset default table behavior -table col[class^="col-"] { + +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) float: none; display: table-column; } -table td[class^="col-"], -table th[class^="col-"] { - float: none; - display: table-cell; -} - - - -// TABLE BACKGROUNDS -// ----------------- -// Exact selectors below required to override .table-striped - -.table > tbody > tr { - > td.success, - > th.success, - &.success > td { - background-color: @state-success-bg; - border-color: @state-success-border; - } - > td.danger, - > th.danger, - &.danger > td { - background-color: @state-danger-bg; - border-color: @state-danger-border; - } - > td.warning, - > th.warning, - &.warning > td { - background-color: @state-warning-bg; - border-color: @state-warning-border; +table { + td, + th { + &[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-cell; + } } } -// Hover states for .table-hover -.table-hover > tbody > tr { - > td.success:hover, - > th.success:hover, - &.success:hover > td { - background-color: darken(@state-success-bg, 5%); - border-color: darken(@state-success-border, 5%); - } - > td.danger:hover, - > th.danger:hover, - &.danger:hover > td { - background-color: darken(@state-danger-bg, 5%); - border-color: darken(@state-danger-border, 5%); - } - > td.warning:hover, - > th.warning:hover, - &.warning:hover > td { - background-color: darken(@state-warning-bg, 5%); - border-color: darken(@state-warning-border, 5%); + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +.table-row-variant(active; @table-bg-active); +.table-row-variant(success; @state-success-bg); +.table-row-variant(info; @state-info-bg); +.table-row-variant(warning; @state-warning-bg); +.table-row-variant(danger; @state-danger-bg); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + overflow-x: auto; + min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + + @media screen and (max-width: @screen-xs-max) { + width: 100%; + margin-bottom: (@line-height-computed * 0.75); + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid @table-border-color; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // 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; + } + } + } + + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since + // chances are there will be only one `tr` in a `thead` and that would + // remove the border altogether. + > tbody, + > tfoot { + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + + } } } diff --git a/_docs/less/bootstrap/theme.less b/_docs/less/bootstrap/theme.less new file mode 100644 index 0000000..8371872 --- /dev/null +++ b/_docs/less/bootstrap/theme.less @@ -0,0 +1,291 @@ +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// +// 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)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + .box-shadow(none); + } + + .badge { + text-shadow: none; + } +} + +// Mixin for generating new styles +.btn-styles(@btn-color: #555) { + #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%)); + .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620 + background-repeat: repeat-x; + border-color: darken(@btn-color, 14%); + + &:hover, + &:focus { + background-color: darken(@btn-color, 12%); + background-position: 0 -15px; + } + + &:active, + &.active { + background-color: darken(@btn-color, 12%); + border-color: darken(@btn-color, 14%); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: darken(@btn-color, 12%); + background-image: none; + } + } +} + +// 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-info { .btn-styles(@btn-info-bg); } +.btn-warning { .btn-styles(@btn-warning-bg); } +.btn-danger { .btn-styles(@btn-danger-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 { + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + background-color: darken(@dropdown-link-hover-bg, 5%); +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + background-color: darken(@dropdown-link-active-bg, 5%); +} + + +// +// Navbar +// -------------------------------------------------- + +// Default navbar +.navbar-default { + #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg); + .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered + 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 > .open > a, + .navbar-nav > .active > a { + #gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%)); + .box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); + } +} +.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); + .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257 + border-radius: @navbar-border-radius; + .navbar-nav > .open > a, + .navbar-nav > .active > a { + #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%)); + .box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); + } + + .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; +} + +// Fix active state of dropdown items in collapsed mode +@media (max-width: @grid-float-breakpoint-max) { + .navbar .navbar-nav .open .dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: #fff; + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + } + } +} + + +// +// 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); } + +// Reset the striped class because our mixins don't do multiple gradients and +// the above custom styles override the new `.progress-bar-striped` in v3.2.0. +.progress-bar-striped { + #gradient > .striped(); +} + + +// +// 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%); + + .badge { + text-shadow: none; + } +} + + +// +// 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); +} diff --git a/_docs/less/bootstrap/thumbnails.less b/_docs/less/bootstrap/thumbnails.less index f31d786..0713e67 100644 --- a/_docs/less/bootstrap/thumbnails.less +++ b/_docs/less/bootstrap/thumbnails.less @@ -3,41 +3,34 @@ // -------------------------------------------------- -// Base classes -// For thumbnail block-level composite components and simple image styles - -// The actual thumbnailed element -// Can be `a`, `div`, or `img` -.thumbnail, -.img-thumbnail { - padding: 4px; +// Mixin and adjust the regular image class +.thumbnail { + display: block; + padding: @thumbnail-padding; + margin-bottom: @line-height-computed; line-height: @line-height-base; background-color: @thumbnail-bg; border: 1px solid @thumbnail-border; border-radius: @thumbnail-border-radius; - .transition(all .2s ease-in-out); -} -.thumbnail { - display: block; -} -.img-thumbnail { - display: inline-block; -} + .transition(border .2s ease-in-out); -// Add a hover state for linked versions only -a.thumbnail:hover, -a.thumbnail:focus { - border-color: @link-color; -} + > img, + a > img { + &:extend(.img-responsive); + margin-left: auto; + margin-right: auto; + } -// Images and captions -.thumbnail > img { - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.thumbnail .caption { - padding: 9px; - color: @thumbnail-caption-color; + // Add a hover state for linked versions only + a&:hover, + a&:focus, + a&.active { + border-color: @link-color; + } + + // Image captions + .caption { + padding: @thumbnail-caption-padding; + color: @thumbnail-caption-color; + } } diff --git a/_docs/less/bootstrap/tooltip.less b/_docs/less/bootstrap/tooltip.less index 9dba6f0..b48d63e 100644 --- a/_docs/less/bootstrap/tooltip.less +++ b/_docs/less/bootstrap/tooltip.less @@ -8,25 +8,26 @@ position: absolute; z-index: @zindex-tooltip; display: block; - visibility: visible; - font-size: @font-size-mini; - line-height: 1.4; + // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. + // So reset our font and text properties to avoid inheriting weird values. + .reset-text(); + font-size: @font-size-small; + .opacity(0); - &.in { .opacity(1); } - &.top { margin-top: -3px; padding: 5px 0; } - &.right { margin-left: 3px; padding: 0 5px; } - &.bottom { margin-top: 3px; padding: 5px 0; } - &.left { margin-left: -3px; padding: 0 5px; } + &.in { .opacity(@tooltip-opacity); } + &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } + &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } + &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } + &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } } // Wrapper for the tooltip content .tooltip-inner { - max-width: 200px; + max-width: @tooltip-max-width; padding: 3px 8px; color: @tooltip-color; text-align: center; - text-decoration: none; background-color: @tooltip-bg; border-radius: @border-radius-base; } @@ -39,6 +40,7 @@ border-color: transparent; border-style: solid; } +// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1 .tooltip { &.top .tooltip-arrow { bottom: 0; @@ -47,6 +49,20 @@ border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } + &.top-left .tooltip-arrow { + bottom: 0; + right: @tooltip-arrow-width; + margin-bottom: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + left: @tooltip-arrow-width; + margin-bottom: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } &.right .tooltip-arrow { top: 50%; left: 0; @@ -68,4 +84,18 @@ border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; } + &.bottom-left .tooltip-arrow { + top: 0; + right: @tooltip-arrow-width; + margin-top: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + left: @tooltip-arrow-width; + margin-top: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } } diff --git a/_docs/less/bootstrap/type.less b/_docs/less/bootstrap/type.less index 9892d55..0d4fee4 100644 --- a/_docs/less/bootstrap/type.less +++ b/_docs/less/bootstrap/type.less @@ -3,50 +3,6 @@ // -------------------------------------------------- -// Body text -// ------------------------- - -p { - margin: 0 0 (@line-height-computed / 2); -} -.lead { - margin-bottom: @line-height-computed; - font-size: (@font-size-base * 1.5); - font-weight: 200; - line-height: 1.4; -} - - -// Emphasis & misc -// ------------------------- - -// Ex: 14px base font * 85% = about 12px -small { font-size: 85%; } - -cite { font-style: normal; } - -// Utility classes -.text-muted { color: @gray-light; } -a.text-muted:hover, -a.text-muted:focus { color: darken(@gray-light, 10%); } - -.text-warning { color: @state-warning-text; } -a.text-warning:hover, -a.text-warning:focus { color: darken(@state-warning-text, 10%); } - -.text-danger { color: @state-danger-text; } -a.text-danger:hover, -a.text-danger:focus { color: darken(@state-danger-text, 10%); } - -.text-success { color: @state-success-text; } -a.text-success:hover, -a.text-success:focus { color: darken(@state-success-text, 10%); } - -.text-left { text-align: left; } -.text-right { text-align: right; } -.text-center { text-align: center; } - - // Headings // ------------------------- @@ -55,37 +11,134 @@ h1, h2, h3, h4, h5, h6, font-family: @headings-font-family; font-weight: @headings-font-weight; line-height: @headings-line-height; - small { + color: @headings-color; + + small, + .small { font-weight: normal; line-height: 1; - color: @gray-light; + color: @headings-small-color; } } -h1, -h2, -h3 { +h1, .h1, +h2, .h2, +h3, .h3 { margin-top: @line-height-computed; margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 65%; + } } -h4, -h5, -h6 { +h4, .h4, +h5, .h5, +h6, .h6 { margin-top: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 75%; + } } -h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px -h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px -h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px -h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px -h5, .h5 { font-size: @font-size-base; } -h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px +h1, .h1 { font-size: @font-size-h1; } +h2, .h2 { font-size: @font-size-h2; } +h3, .h3 { font-size: @font-size-h3; } +h4, .h4 { font-size: @font-size-h4; } +h5, .h5 { font-size: @font-size-h5; } +h6, .h6 { font-size: @font-size-h6; } -h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px -h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px -h3 small, .h3 small, -h4 small, .h4 small { font-size: @font-size-base; } + +// Body text +// ------------------------- + +p { + margin: 0 0 (@line-height-computed / 2); +} + +.lead { + margin-bottom: @line-height-computed; + font-size: floor((@font-size-base * 1.15)); + font-weight: 300; + line-height: 1.4; + + @media (min-width: @screen-sm-min) { + font-size: (@font-size-base * 1.5); + } +} + + +// Emphasis & misc +// ------------------------- + +// Ex: (12px small font / 14px base font) * 100% = about 85% +small, +.small { + font-size: floor((100% * @font-size-small / @font-size-base)); +} + +mark, +.mark { + background-color: @state-warning-bg; + padding: .2em; +} + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } +.text-nowrap { white-space: nowrap; } + +// Transformation +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } +.text-capitalize { text-transform: capitalize; } + +// Contextual colors +.text-muted { + color: @text-muted; +} +.text-primary { + .text-emphasis-variant(@brand-primary); +} +.text-success { + .text-emphasis-variant(@state-success-text); +} +.text-info { + .text-emphasis-variant(@state-info-text); +} +.text-warning { + .text-emphasis-variant(@state-warning-text); +} +.text-danger { + .text-emphasis-variant(@state-danger-text); +} + +// Contextual backgrounds +// For now we'll leave these alongside the text classes until v4 when we can +// safely shift things around (per SemVer rules). +.bg-primary { + // Given the contrast here, this is the only class to have its color inverted + // automatically. + color: #fff; + .bg-variant(@brand-primary); +} +.bg-success { + .bg-variant(@state-success-bg); +} +.bg-info { + .bg-variant(@state-info-bg); +} +.bg-warning { + .bg-variant(@state-warning-bg); +} +.bg-danger { + .bg-variant(@state-danger-bg); +} // Page header @@ -94,25 +147,22 @@ h4 small, .h4 small { font-size: @font-size-base; } .page-header { padding-bottom: ((@line-height-computed / 2) - 1); margin: (@line-height-computed * 2) 0 @line-height-computed; - border-bottom: 1px solid @gray-lighter; + border-bottom: 1px solid @page-header-border-color; } - // Lists -// -------------------------------------------------- +// ------------------------- // Unordered and Ordered lists ul, ol { margin-top: 0; margin-bottom: (@line-height-computed / 2); -} -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; + ul, + ol { + margin-bottom: 0; + } } // List options @@ -122,9 +172,12 @@ ol ul { padding-left: 0; list-style: none; } + // Inline turns list items into inline-block .list-inline { .list-unstyled(); + margin-left: -5px; + > li { display: inline-block; padding-left: 5px; @@ -134,6 +187,7 @@ ol ul { // Description Lists dl { + margin-top: 0; // Remove browser default margin-bottom: @line-height-computed; } dt, @@ -144,102 +198,104 @@ dt { font-weight: bold; } dd { - margin-left: (@line-height-computed / 2); + margin-left: 0; // Undo browser default } -// Horizontal layout (like forms) + +// Horizontal description lists +// +// Defaults to being stacked without any of the below styles applied, until the +// grid breakpoint is reached (default of ~768px). + .dl-horizontal { - dt { - float: left; - width: (@component-offset-horizontal - 20); - clear: left; - text-align: right; - .text-overflow(); - } dd { - .clearfix(); // Clear the floated `dt` if an empty `dd` is present - margin-left: @component-offset-horizontal; + &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present + } + + @media (min-width: @dl-horizontal-breakpoint) { + dt { + float: left; + width: (@dl-horizontal-offset - 20); + clear: left; + text-align: right; + .text-overflow(); + } + dd { + margin-left: @dl-horizontal-offset; + } } } -// MISC -// ---- -// Horizontal rules -hr { - margin: @line-height-computed 0; - border: 0; - border-top: 1px solid @hr-border; - border-bottom: 1px solid #fff; - border-bottom: 1px solid rgba(255,255,255,.5); -} +// Misc +// ------------------------- // Abbreviations and acronyms abbr[title], -// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 +// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted @gray-light; + border-bottom: 1px dotted @abbr-border-color; } -abbr.initialism { +.initialism { font-size: 90%; - text-transform: uppercase; + .text-uppercase(); } // Blockquotes blockquote { padding: (@line-height-computed / 2) @line-height-computed; margin: 0 0 @line-height-computed; - border-left: 5px solid @gray-lighter; - p { - font-size: (@font-size-base * 1.25); - font-weight: 300; - line-height: 1.25; - } - p:last-child { - margin-bottom: 0; - } - small { - display: block; - line-height: @line-height-base; - color: @gray-light; - &:before { - content: '\2014 \00A0'; + font-size: @blockquote-font-size; + border-left: 5px solid @blockquote-border-color; + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; } } - // Float right with text-align: right - &.pull-right { - float: right; - padding-right: 15px; - padding-left: 0; - border-right: 5px solid @gray-lighter; - border-left: 0; - p, - small { - text-align: right; - } - small { - &:before { - content: ''; - } - &:after { - content: '\00A0 \2014'; - } + // Note: Deprecated small and .small as of v3.1.0 + // Context: https://github.com/twbs/bootstrap/issues/11660 + footer, + small, + .small { + display: block; + font-size: 80%; // back to default font-size + line-height: @line-height-base; + color: @blockquote-small-color; + + &:before { + content: '\2014 \00A0'; // em dash, nbsp } } } -// Quotes -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; +// Opposite alignment of blockquote +// +// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid @blockquote-border-color; + border-left: 0; + text-align: right; + + // Account for citation + footer, + small, + .small { + &:before { content: ''; } + &:after { + content: '\00A0 \2014'; // nbsp, em dash + } + } } // Addresses address { - display: block; margin-bottom: @line-height-computed; font-style: normal; line-height: @line-height-base; diff --git a/_docs/less/bootstrap/utilities.less b/_docs/less/bootstrap/utilities.less index d296b32..7a8ca27 100644 --- a/_docs/less/bootstrap/utilities.less +++ b/_docs/less/bootstrap/utilities.less @@ -9,17 +9,21 @@ .clearfix { .clearfix(); } +.center-block { + .center-block(); +} .pull-right { - float: right; + float: right !important; } .pull-left { - float: left; + float: left !important; } // Toggling content // ------------------------- +// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 .hide { display: none !important; } @@ -30,7 +34,16 @@ visibility: hidden; } .text-hide { - .hide-text(); + .text-hide(); +} + + +// Hide from screenreaders and browsers +// +// Credit: HTML5 Boilerplate + +.hidden { + display: none !important; } diff --git a/_docs/less/bootstrap/variables.less b/_docs/less/bootstrap/variables.less index 4fd0d49..b057ef5 100644 --- a/_docs/less/bootstrap/variables.less +++ b/_docs/less/bootstrap/variables.less @@ -3,203 +3,399 @@ // -------------------------------------------------- -// Global values -// -------------------------------------------------- +//== Colors +// +//## Gray and brand colors for use across Bootstrap. +@gray-base: #000; +@gray-darker: lighten(@gray-base, 13.5%); // #222 +@gray-dark: lighten(@gray-base, 20%); // #333 +@gray: lighten(@gray-base, 33.5%); // #555 +@gray-light: lighten(@gray-base, 46.7%); // #777 +@gray-lighter: lighten(@gray-base, 93.5%); // #eee -// Grays -// ------------------------- - -@gray-darker: lighten(#000, 13.5%); // #222 -@gray-dark: lighten(#000, 20%); // #333 -@gray: lighten(#000, 33.5%); // #555 -@gray-light: lighten(#000, 60%); // #999 -@gray-lighter: lighten(#000, 93.5%); // #eee - -// Brand colors -// ------------------------- - -@brand-primary: #428bca; +@brand-primary: darken(#428bca, 6.5%); // #337ab7 @brand-success: #5cb85c; +@brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f; -@brand-info: #5bc0de; -// Scaffolding -// ------------------------- +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for ``. @body-bg: #fff; +//** Global text color on ``. @text-color: @gray-dark; -// Links -// ------------------------- - +//** Global textual link color. @link-color: @brand-primary; +//** Link hover color set via `darken()` function. @link-hover-color: darken(@link-color, 15%); +//** Link hover decoration. +@link-hover-decoration: underline; -// Typography -// ------------------------- + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; -@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +//** Default monospace fonts for ``, ``, and `
`.
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
 @font-size-base:          14px;
-@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
-@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
-@font-size-mini:          ceil(@font-size-base * 0.75); // ~11px
+@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
 @line-height-base:        1.428571429; // 20/14
-@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 
-@headings-font-family:    @font-family-base;
+//** By default, this inherits from the ``.
+@headings-font-family:    inherit;
 @headings-font-weight:    500;
 @headings-line-height:    1.1;
+@headings-color:          inherit;
 
 
-// Components
-// -------------------------
-// Based on 14px font-size and 1.428 line-height (~20px to start)
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
-@padding-base-vertical:          8px;
-@padding-base-horizontal:        12px;
-
-@padding-large-vertical:         14px;
-@padding-large-horizontal:       16px;
-
-@padding-small-vertical:         5px;
-@padding-small-horizontal:       10px;
-
-@border-radius-base:             4px;
-@border-radius-large:            6px;
-@border-radius-small:            3px;
-
-@component-active-bg:            @brand-primary;
+//** Load fonts from this directory.
+@icon-font-path:          "../fonts/";
+//** File name for all font files.
+@icon-font-name:          "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id:        "glyphicons_halflingsregular";
 
 
-// Tables
-// -------------------------
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-@table-bg:                           transparent; // overall background-color
-@table-bg-accent:                    #f9f9f9; // for striping
-@table-bg-hover:                     #f5f5f5; // for hover
+@padding-base-vertical:     6px;
+@padding-base-horizontal:   12px;
 
-@table-border-color:                 #ddd; // table and cell border
+@padding-large-vertical:    10px;
+@padding-large-horizontal:  16px;
+
+@padding-small-vertical:    5px;
+@padding-small-horizontal:  10px;
+
+@padding-xs-vertical:       1px;
+@padding-xs-horizontal:     5px;
+
+@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@line-height-small:         1.5;
+
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg:       @brand-primary;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+@caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large:         5px;
 
 
-// Buttons
-// -------------------------
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
 
-@btn-default-color:              #fff;
-@btn-default-bg:                 #474949;
-@btn-default-border:             @btn-default-bg;
+//** Padding for ``s and ``s.
+@table-cell-padding:            8px;
+//** Padding for cells in `.table-condensed`.
+@table-condensed-cell-padding:  5px;
 
-@btn-primary-color:              @btn-default-color;
+//** Default background color used for all tables.
+@table-bg:                      transparent;
+//** Background color used for `.table-striped`.
+@table-bg-accent:               #f9f9f9;
+//** Background color used for `.table-hover`.
+@table-bg-hover:                #f5f5f5;
+@table-bg-active:               @table-bg-hover;
+
+//** Border color for table and cell borders.
+@table-border-color:            #ddd;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+@btn-font-weight:                normal;
+
+@btn-default-color:              #333;
+@btn-default-bg:                 #fff;
+@btn-default-border:             #ccc;
+
+@btn-primary-color:              #fff;
 @btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             @btn-primary-bg;
+@btn-primary-border:             darken(@btn-primary-bg, 5%);
 
-@btn-success-color:              @btn-default-color;
+@btn-success-color:              #fff;
 @btn-success-bg:                 @brand-success;
-@btn-success-border:             @btn-success-bg;
+@btn-success-border:             darken(@btn-success-bg, 5%);
 
-@btn-warning-color:              @btn-default-color;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             @btn-warning-bg;
-
-@btn-danger-color:               @btn-default-color;
-@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              @btn-danger-bg;
-
-@btn-info-color:                 @btn-default-color;
+@btn-info-color:                 #fff;
 @btn-info-bg:                    @brand-info;
-@btn-info-border:                @btn-info-bg;
+@btn-info-border:                darken(@btn-info-bg, 5%);
+
+@btn-warning-color:              #fff;
+@btn-warning-bg:                 @brand-warning;
+@btn-warning-border:             darken(@btn-warning-bg, 5%);
+
+@btn-danger-color:               #fff;
+@btn-danger-bg:                  @brand-danger;
+@btn-danger-border:              darken(@btn-danger-bg, 5%);
+
+@btn-link-disabled-color:        @gray-light;
+
+// Allows for customizing button radius independently from global border radius
+@btn-border-radius-base:         @border-radius-base;
+@btn-border-radius-large:        @border-radius-large;
+@btn-border-radius-small:        @border-radius-small;
 
 
+//== Forms
+//
+//##
 
-// Forms
-// -------------------------
-
+//** `` background color
 @input-bg:                       #fff;
+//** `` background color
 @input-bg-disabled:              @gray-lighter;
 
+//** Text color for ``s
+@input-color:                    @gray;
+//** `` border color
 @input-border:                   #ccc;
+
+// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on ``s in CSS.
 @input-border-radius:            @border-radius-base;
+//** Large `.form-control` border radius
+@input-border-radius-large:      @border-radius-large;
+//** Small `.form-control` border radius
+@input-border-radius-small:      @border-radius-small;
 
-@input-color-placeholder:        @gray-light;
+//** Border color for inputs on focus
+@input-border-focus:             #66afe9;
 
+//** Placeholder text color
+@input-color-placeholder:        #999;
+
+//** Default `.form-control` height
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-@input-height-large:             (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
-@input-height-small:             (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
+//** Large `.form-control` height
+@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+
+//** `.form-group` margin
+@form-group-margin-bottom:       15px;
+
+@legend-color:                   @gray-dark;
+@legend-border-color:            #e5e5e5;
+
+//** Background color for textual input addons
+@input-group-addon-bg:           @gray-lighter;
+//** Border color for textual input addons
+@input-group-addon-border-color: @input-border;
+
+//** Disabled cursor for form controls and buttons.
+@cursor-disabled:                not-allowed;
 
 
-// Dropdowns
-// -------------------------
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
 
+//** Background for the dropdown menu.
 @dropdown-bg:                    #fff;
+//** Dropdown menu `border-color`.
 @dropdown-border:                rgba(0,0,0,.15);
-@dropdown-divider-top:           #e5e5e5;
-@dropdown-divider-bottom:        #fff;
+//** Dropdown menu `border-color` **for IE8**.
+@dropdown-fallback-border:       #ccc;
+//** Divider color for between dropdown items.
+@dropdown-divider-bg:            #e5e5e5;
 
-@dropdown-link-active-color:     #fff;
+//** Dropdown link text color.
+@dropdown-link-color:            @gray-dark;
+//** Hover color for dropdown links.
+@dropdown-link-hover-color:      darken(@gray-dark, 5%);
+//** Hover background for dropdown links.
+@dropdown-link-hover-bg:         #f5f5f5;
+
+//** Active dropdown menu item text color.
+@dropdown-link-active-color:     @component-active-color;
+//** Active dropdown menu item background color.
 @dropdown-link-active-bg:        @component-active-bg;
 
-@dropdown-link-color:            @gray-dark;
-@dropdown-link-hover-color:      #fff;
-@dropdown-link-hover-bg:         @dropdown-link-active-bg;
+//** Disabled dropdown menu item background color.
+@dropdown-link-disabled-color:   @gray-light;
+
+//** Text color for headers within dropdown menus.
+@dropdown-header-color:          @gray-light;
+
+//** Deprecated `@dropdown-caret-color` as of v3.1.0
+@dropdown-caret-color:           #000;
 
 
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
 
+@zindex-navbar:            1000;
 @zindex-dropdown:          1000;
-@zindex-popover:           1010;
-@zindex-tooltip:           1030;
+@zindex-popover:           1060;
+@zindex-tooltip:           1070;
 @zindex-navbar-fixed:      1030;
 @zindex-modal-background:  1040;
 @zindex-modal:             1050;
 
 
-// Glyphicons font path
-// -------------------------
-@glyphicons-font-path:          "../fonts";
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `@screen-xs` as of v3.0.1
+@screen-xs:                  480px;
+//** Deprecated `@screen-xs-min` as of v3.2.0
+@screen-xs-min:              @screen-xs;
+//** Deprecated `@screen-phone` as of v3.0.1
+@screen-phone:               @screen-xs-min;
+
+// Small screen / tablet
+//** Deprecated `@screen-sm` as of v3.0.1
+@screen-sm:                  768px;
+@screen-sm-min:              @screen-sm;
+//** Deprecated `@screen-tablet` as of v3.0.1
+@screen-tablet:              @screen-sm-min;
+
+// Medium screen / desktop
+//** Deprecated `@screen-md` as of v3.0.1
+@screen-md:                  992px;
+@screen-md-min:              @screen-md;
+//** Deprecated `@screen-desktop` as of v3.0.1
+@screen-desktop:             @screen-md-min;
+
+// Large screen / wide desktop
+//** Deprecated `@screen-lg` as of v3.0.1
+@screen-lg:                  1200px;
+@screen-lg-min:              @screen-lg;
+//** Deprecated `@screen-lg-desktop` as of v3.0.1
+@screen-lg-desktop:          @screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-xs-max:              (@screen-sm-min - 1);
+@screen-sm-max:              (@screen-md-min - 1);
+@screen-md-max:              (@screen-lg-min - 1);
 
 
-// Navbar
-// -------------------------
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+@grid-columns:              12;
+//** Padding between columns. Gets divided in half for the left and right.
+@grid-gutter-width:         30px;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+@grid-float-breakpoint:     @screen-sm-min;
+//** Point at which the navbar begins collapsing.
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+@container-tablet:             (720px + @grid-gutter-width);
+//** For `@screen-sm-min` and up.
+@container-sm:                 @container-tablet;
+
+// Medium screen / desktop
+@container-desktop:            (940px + @grid-gutter-width);
+//** For `@screen-md-min` and up.
+@container-md:                 @container-desktop;
+
+// Large screen / wide desktop
+@container-large-desktop:      (1140px + @grid-gutter-width);
+//** For `@screen-lg-min` and up.
+@container-lg:                 @container-large-desktop;
+
+
+//== Navbar
+//
+//##
 
 // Basics of a navbar
 @navbar-height:                    50px;
-@navbar-color:                     #777;
-@navbar-bg:                        #eee;
-@navbar-padding:                   floor(@grid-gutter-width / 2);  // ~15px
+@navbar-margin-bottom:             @line-height-computed;
+@navbar-border-radius:             @border-radius-base;
+@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
+@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height:       340px;
+
+@navbar-default-color:             #777;
+@navbar-default-bg:                #f8f8f8;
+@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
 
 // Navbar links
-@navbar-link-color:                #777;
-@navbar-link-hover-color:          #333;
-@navbar-link-hover-bg:             transparent;
-@navbar-link-active-color:         #555;
-@navbar-link-active-bg:            darken(@navbar-bg, 10%);
-@navbar-link-disabled-color:       #ccc;
-@navbar-link-disabled-bg:          transparent;
+@navbar-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-brand-color, 10%);
+@navbar-default-brand-hover-bg:            transparent;
 
-// Inverted navbar
-@navbar-inverse-color:                       @gray-light;
+// Navbar toggle
+@navbar-default-toggle-hover-bg:           #ddd;
+@navbar-default-toggle-icon-bar-bg:        #888;
+@navbar-default-toggle-border-color:       #ddd;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+@navbar-inverse-color:                      lighten(@gray-light, 15%);
 @navbar-inverse-bg:                         #222;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
 
 // Inverted navbar links
-@navbar-inverse-link-color:                 @gray-light;
+@navbar-inverse-link-color:                 lighten(@gray-light, 15%);
 @navbar-inverse-link-hover-color:           #fff;
 @navbar-inverse-link-hover-bg:              transparent;
 @navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
@@ -212,131 +408,314 @@
 @navbar-inverse-brand-hover-color:          #fff;
 @navbar-inverse-brand-hover-bg:             transparent;
 
-// Inverted navbar search
-// Normal navbar needs no special styles or vars
-@navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
-@navbar-inverse-search-bg-focus:            #fff;
-@navbar-inverse-search-border:              @navbar-inverse-bg;
-@navbar-inverse-search-placeholder-color:   #ccc;
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            #333;
+@navbar-inverse-toggle-icon-bar-bg:         #fff;
+@navbar-inverse-toggle-border-color:        #333;
 
 
-// Pagination
-// -------------------------
+//== Navs
+//
+//##
 
+//=== Shared nav styles
+@nav-link-padding:                          10px 15px;
+@nav-link-hover-bg:                         @gray-lighter;
+
+@nav-disabled-link-color:                   @gray-light;
+@nav-disabled-link-hover-color:             @gray-light;
+
+//== Tabs
+@nav-tabs-border-color:                     #ddd;
+
+@nav-tabs-link-hover-border-color:          @gray-lighter;
+
+@nav-tabs-active-link-hover-bg:             @body-bg;
+@nav-tabs-active-link-hover-color:          @gray;
+@nav-tabs-active-link-hover-border-color:   #ddd;
+
+@nav-tabs-justified-link-border-color:            #ddd;
+@nav-tabs-justified-active-link-border-color:     @body-bg;
+
+//== Pills
+@nav-pills-border-radius:                   @border-radius-base;
+@nav-pills-active-link-hover-bg:            @component-active-bg;
+@nav-pills-active-link-hover-color:         @component-active-color;
+
+
+//== Pagination
+//
+//##
+
+@pagination-color:                     @link-color;
 @pagination-bg:                        #fff;
 @pagination-border:                    #ddd;
-@pagination-active-bg:                 #f5f5f5;
+
+@pagination-hover-color:               @link-hover-color;
+@pagination-hover-bg:                  @gray-lighter;
+@pagination-hover-border:              #ddd;
+
+@pagination-active-color:              #fff;
+@pagination-active-bg:                 @brand-primary;
+@pagination-active-border:             @brand-primary;
+
+@pagination-disabled-color:            @gray-light;
+@pagination-disabled-bg:               #fff;
+@pagination-disabled-border:           #ddd;
 
 
-// Jumbotron
-// -------------------------
+//== Pager
+//
+//##
 
+@pager-bg:                             @pagination-bg;
+@pager-border:                         @pagination-border;
+@pager-border-radius:                  15px;
+
+@pager-hover-bg:                       @pagination-hover-bg;
+
+@pager-active-bg:                      @pagination-active-bg;
+@pager-active-color:                   @pagination-active-color;
+
+@pager-disabled-color:                 @pagination-disabled-color;
+
+
+//== Jumbotron
+//
+//##
+
+@jumbotron-padding:              30px;
+@jumbotron-color:                inherit;
 @jumbotron-bg:                   @gray-lighter;
 @jumbotron-heading-color:        inherit;
-@jumbotron-lead-color:           inherit;
+@jumbotron-font-size:            ceil((@font-size-base * 1.5));
+@jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
 
 
-// Form states and alerts
-// -------------------------
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
 
-@state-warning-text:             #c09853;
-@state-warning-bg:               #fcf8e3;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 3%);
-
-@state-danger-text:              #b94a48;
-@state-danger-bg:                #f2dede;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 3%);
-
-@state-success-text:             #468847;
+@state-success-text:             #3c763d;
 @state-success-bg:               #dff0d8;
 @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
 
-@state-info-text:                #3a87ad;
+@state-info-text:                #31708f;
 @state-info-bg:                  #d9edf7;
 @state-info-border:              darken(spin(@state-info-bg, -10), 7%);
 
+@state-warning-text:             #8a6d3b;
+@state-warning-bg:               #fcf8e3;
+@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
 
-// Tooltips and popovers
-// -------------------------
+@state-danger-text:              #a94442;
+@state-danger-bg:                #f2dede;
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+@tooltip-max-width:           200px;
+//** Tooltip text color
 @tooltip-color:               #fff;
-@tooltip-bg:                  rgba(0,0,0,.9);
+//** Tooltip background color
+@tooltip-bg:                  #000;
+@tooltip-opacity:             .9;
+
+//** Tooltip arrow width
 @tooltip-arrow-width:         5px;
+//** Tooltip arrow color
 @tooltip-arrow-color:         @tooltip-bg;
 
-@popover-bg:                  #fff;
-@popover-arrow-width:         10px;
-@popover-arrow-color:         #fff;
-@popover-title-bg:            darken(@popover-bg, 3%);
 
-// Special enhancement for popovers
-@popover-arrow-outer-width:   (@popover-arrow-width + 1);
-@popover-arrow-outer-color:   rgba(0,0,0,.25);
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg:                          #fff;
+//** Popover maximum width
+@popover-max-width:                   276px;
+//** Popover border color
+@popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
+@popover-fallback-border-color:       #ccc;
+
+//** Popover title background color
+@popover-title-bg:                    darken(@popover-bg, 3%);
+
+//** Popover arrow width
+@popover-arrow-width:                 10px;
+//** Popover arrow color
+@popover-arrow-color:                 @popover-bg;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
 
 
-// Labels
-// -------------------------
+//== Labels
+//
+//##
+
+//** Default label background color
+@label-default-bg:            @gray-light;
+//** Primary label background color
+@label-primary-bg:            @brand-primary;
+//** Success label background color
 @label-success-bg:            @brand-success;
+//** Info label background color
 @label-info-bg:               @brand-info;
+//** Warning label background color
 @label-warning-bg:            @brand-warning;
+//** Danger label background color
 @label-danger-bg:             @brand-danger;
 
+//** Default label text color
+@label-color:                 #fff;
+//** Default text color of a linked label
+@label-link-hover-color:      #fff;
 
-// Modals
-// -------------------------
-@modal-inner-padding:         20px;
 
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+@modal-inner-padding:         15px;
+
+//** Padding applied to the modal title
 @modal-title-padding:         15px;
+//** Modal title line-height
 @modal-title-line-height:     @line-height-base;
 
-// Alerts
-// -------------------------
-@alert-bg:                    @state-warning-bg;
-@alert-text:                  @state-warning-text;
-@alert-border:                @state-warning-border;
+//** Background color of modal content area
+@modal-content-bg:                             #fff;
+//** Modal content border color
+@modal-content-border-color:                   rgba(0,0,0,.2);
+//** Modal content border color **for IE8**
+@modal-content-fallback-border-color:          #999;
+
+//** Modal backdrop background color
+@modal-backdrop-bg:           #000;
+//** Modal backdrop opacity
+@modal-backdrop-opacity:      .5;
+//** Modal header border color
+@modal-header-border-color:   #e5e5e5;
+//** Modal footer border color
+@modal-footer-border-color:   @modal-header-border-color;
+
+@modal-lg:                    900px;
+@modal-md:                    600px;
+@modal-sm:                    300px;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+@alert-padding:               15px;
 @alert-border-radius:         @border-radius-base;
+@alert-link-font-weight:      bold;
 
 @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;
 
-// Progress bars
-// -------------------------
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text;
+@alert-danger-border:         @state-danger-border;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
 @progress-bg:                 #f5f5f5;
+//** Progress bar text color
+@progress-bar-color:          #fff;
+//** Variable for setting rounded corners on progress bar.
+@progress-border-radius:      @border-radius-base;
+
+//** Default progress bar color
 @progress-bar-bg:             @brand-primary;
+//** Success progress bar color
 @progress-bar-success-bg:     @brand-success;
+//** Warning progress bar color
 @progress-bar-warning-bg:     @brand-warning;
+//** Danger progress bar color
 @progress-bar-danger-bg:      @brand-danger;
+//** Info progress bar color
 @progress-bar-info-bg:        @brand-info;
 
 
-// List group
-// -------------------------
-@list-group-bg:               #fff;
-@list-group-border:           #ddd;
-@list-group-border-radius:    @border-radius-base;
+//== List group
+//
+//##
 
-@list-group-hover-bg:         #f5f5f5;
-@list-group-active-color:     #fff;
-@list-group-active-bg:        @component-active-bg;
-@list-group-active-border:    @list-group-active-bg;
+//** Background color on `.list-group-item`
+@list-group-bg:                 #fff;
+//** `.list-group-item` border color
+@list-group-border:             #ddd;
+//** List group border radius
+@list-group-border-radius:      @border-radius-base;
+
+//** Background color of single list items on hover
+@list-group-hover-bg:           #f5f5f5;
+//** Text color of active list items
+@list-group-active-color:       @component-active-color;
+//** Background color of active list items
+@list-group-active-bg:          @component-active-bg;
+//** Border color of active list elements
+@list-group-active-border:      @list-group-active-bg;
+//** Text color for content within active list items
+@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
+
+//** Text color of disabled list items
+@list-group-disabled-color:      @gray-light;
+//** Background color of disabled list items
+@list-group-disabled-bg:         @gray-lighter;
+//** Text color for content within disabled list items
+@list-group-disabled-text-color: @list-group-disabled-color;
+
+@list-group-link-color:         #555;
+@list-group-link-hover-color:   @list-group-link-color;
+@list-group-link-heading-color: #333;
+
+
+//== Panels
+//
+//##
 
-// Panels
-// -------------------------
 @panel-bg:                    #fff;
-@panel-border:                #ddd;
+@panel-body-padding:          15px;
+@panel-heading-padding:       10px 15px;
+@panel-footer-padding:        @panel-heading-padding;
 @panel-border-radius:         @border-radius-base;
-@panel-heading-bg:            #f5f5f5;
+
+//** Border color for elements within panels
+@panel-inner-border:          #ddd;
 @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;
@@ -345,6 +724,10 @@
 @panel-success-border:        @state-success-border;
 @panel-success-heading-bg:    @state-success-bg;
 
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;
+
 @panel-warning-text:          @state-warning-text;
 @panel-warning-border:        @state-warning-border;
 @panel-warning-heading-bg:    @state-warning-bg;
@@ -353,77 +736,134 @@
 @panel-danger-border:         @state-danger-border;
 @panel-danger-heading-bg:     @state-danger-bg;
 
-@panel-info-text:             @state-info-text;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @state-info-bg;
 
+//== Thumbnails
+//
+//##
 
-// Thumbnails
-// -------------------------
-@thumbnail-caption-color:     @text-color;
+//** Padding around the thumbnail image
+@thumbnail-padding:           4px;
+//** Thumbnail background color
 @thumbnail-bg:                @body-bg;
+//** Thumbnail border color
 @thumbnail-border:            #ddd;
+//** Thumbnail border radius
 @thumbnail-border-radius:     @border-radius-base;
 
+//** Custom text color for thumbnail captions
+@thumbnail-caption-color:     @text-color;
+//** Padding around the thumbnail caption
+@thumbnail-caption-padding:   9px;
+
+
+//== Wells
+//
+//##
 
-// Wells
-// -------------------------
 @well-bg:                     #f5f5f5;
+@well-border:                 darken(@well-bg, 7%);
 
 
-// Miscellaneous
-// -------------------------
+//== Badges
+//
+//##
 
-// Hr border color
-@hr-border:                   @gray-lighter;
+@badge-color:                 #fff;
+//** Linked badge text color on hover
+@badge-link-hover-color:      #fff;
+@badge-bg:                    @gray-light;
 
-// Horizontal forms & lists
+//** Badge text color in active nav link
+@badge-active-color:          @link-color;
+//** Badge background color in active nav link
+@badge-active-bg:             #fff;
+
+@badge-font-weight:           bold;
+@badge-line-height:           1;
+@badge-border-radius:         10px;
+
+
+//== Breadcrumbs
+//
+//##
+
+@breadcrumb-padding-vertical:   8px;
+@breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
+@breadcrumb-bg:                 #f5f5f5;
+//** Breadcrumb text color
+@breadcrumb-color:              #ccc;
+//** Text color of current page in the breadcrumb
+@breadcrumb-active-color:       @gray-light;
+//** Textual separator for between breadcrumb elements
+@breadcrumb-separator:          "/";
+
+
+//== Carousel
+//
+//##
+
+@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+@carousel-control-color:                      #fff;
+@carousel-control-width:                      15%;
+@carousel-control-opacity:                    .5;
+@carousel-control-font-size:                  20px;
+
+@carousel-indicator-active-bg:                #fff;
+@carousel-indicator-border-color:             #fff;
+
+@carousel-caption-color:                      #fff;
+
+
+//== Close
+//
+//##
+
+@close-font-weight:           bold;
+@close-color:                 #000;
+@close-text-shadow:           0 1px 0 #fff;
+
+
+//== Code
+//
+//##
+
+@code-color:                  #c7254e;
+@code-bg:                     #f9f2f4;
+
+@kbd-color:                   #fff;
+@kbd-bg:                      #333;
+
+@pre-bg:                      #f5f5f5;
+@pre-color:                   @gray-dark;
+@pre-border-color:            #ccc;
+@pre-scrollable-max-height:   340px;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
 @component-offset-horizontal: 180px;
-
-
-// Media queries breakpoints
-// --------------------------------------------------
-
-// Tiny screen / phone
-@screen-tiny:                480px;
-@screen-phone:               @screen-tiny;
-
-// Small screen / tablet
-@screen-small:               768px;
-@screen-tablet:              @screen-small;
-
-// Medium screen / desktop
-@screen-medium:              992px;
-@screen-desktop:             @screen-medium;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-small-max:           (@screen-medium - 1);
-@screen-tablet-max:          @screen-small-max;
-
-// Large screen / wide desktop
-@screen-large:               1200px;
-@screen-large-desktop:       @screen-large;
-
-
-// Container sizes
-// --------------------------------------------------
-
-// Small screen / tablet
-@container-tablet:          728px;
-
-// Medium screen / desktop
-@container-desktop:         940px;
-
-// Large screen / wide desktop
-@container-large-desktop:   1170px;
-
-
-// Grid system
-// --------------------------------------------------
-
-// Number of columns in the grid system
-@grid-columns:              12;
-// Padding, to be divided by two and applied to the left and right of all columns
-@grid-gutter-width:         30px;
-// Point at which the navbar stops collapsing
-@grid-float-breakpoint:     @screen-tablet;
+//** Text muted color
+@text-muted:                  @gray-light;
+//** Abbreviations and acronyms border color
+@abbr-border-color:           @gray-light;
+//** Headings small color
+@headings-small-color:        @gray-light;
+//** Blockquote small color
+@blockquote-small-color:      @gray-light;
+//** Blockquote font size
+@blockquote-font-size:        (@font-size-base * 1.25);
+//** Blockquote border color
+@blockquote-border-color:     @gray-lighter;
+//** Page header border color
+@page-header-border-color:    @gray-lighter;
+//** Width of horizontal description list titles
+@dl-horizontal-offset:        @component-offset-horizontal;
+//** Point at which .dl-horizontal becomes horizontal
+@dl-horizontal-breakpoint:    @grid-float-breakpoint;
+//** Horizontal line color.
+@hr-border:                   @gray-lighter;
diff --git a/_docs/less/bootstrap/wells.less b/_docs/less/bootstrap/wells.less
index 6a909f4..15d072b 100644
--- a/_docs/less/bootstrap/wells.less
+++ b/_docs/less/bootstrap/wells.less
@@ -9,7 +9,7 @@
   padding: 19px;
   margin-bottom: 20px;
   background-color: @well-bg;
-  border: 1px solid darken(@well-bg, 7%);
+  border: 1px solid @well-border;
   border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
   blockquote {
@@ -19,11 +19,11 @@
 }
 
 // Sizes
-.well-large {
+.well-lg {
   padding: 24px;
   border-radius: @border-radius-large;
 }
-.well-small {
+.well-sm {
   padding: 9px;
   border-radius: @border-radius-small;
 }
diff --git a/_docs/less/main.less b/_docs/less/main.less
index ce7a521..83184bd 100644
--- a/_docs/less/main.less
+++ b/_docs/less/main.less
@@ -142,8 +142,8 @@ footer {
   }
 }
 .download-button {
-  .make-column(4);
-  .make-column-offset(4);
+  .make-sm-column(4);
+  //.make-column-offset(4);
 }
 
 .banner {
@@ -308,15 +308,16 @@ h2 {
 }
 
 .icon-wrap {
+  .make-sm-column(3);
   float: left;
-  width: 50px;
-  height: 120px;
-  font-size: 20px;
+  //width: 50px;
+  //height: 120px;
+  font-size: 30px;
 
   .icon-name {
     font-size: 10px;
   }
-  .icon {
+  .icon, .wi {
     display: inline-block;
     font-family: 'weathericons';
     font-style: normal;
@@ -324,6 +325,11 @@ h2 {
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    float: left;
+    margin-right: 15px;
+    margin-bottom: 15px;
+  }
+  .icon_unicode {
+    font-size: 10px;
   }
-
 }
diff --git a/css/weather-icons-sass.css b/css/weather-icons-sass.css
index 4e4fb00..c121232 100644
--- a/css/weather-icons-sass.css
+++ b/css/weather-icons-sass.css
@@ -41,15 +41,6 @@
 .wi-time-1:before {
   content: ""; }
 
-.wi-time-10:before {
-  content: ""; }
-
-.wi-time-11:before {
-  content: ""; }
-
-.wi-time-12:before {
-  content: ""; }
-
 .wi-time-2:before {
   content: ""; }
 
@@ -74,48 +65,18 @@
 .wi-time-9:before {
   content: ""; }
 
-.wi-moon-full:before {
-  content: ""; }
+.wi-time-10:before {
+  content: ""; }
+
+.wi-time-11:before {
+  content: ""; }
+
+.wi-time-12:before {
+  content: ""; }
 
 .wi-moon-new:before {
   content: ""; }
 
-.wi-moon-waning-crescent-1:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-2:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-3:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-4:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-5:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-6:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-1:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-2:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-3:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-4:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-5:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-6:before {
-  content: ""; }
-
 .wi-moon-waxing-cresent-1:before {
   content: ""; }
 
@@ -152,30 +113,69 @@
 .wi-moon-waxing-gibbous-6:before {
   content: ""; }
 
+.wi-moon-full:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-1:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-2:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-3:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-4:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-5:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-6:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-1:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-2:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-3:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-4:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-5:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-6:before {
+  content: ""; }
+
+.wi-direction-up:before {
+  content: ""; }
+
+.wi-direction-up-right:before {
+  content: ""; }
+
+.wi-direction-right:before {
+  content: ""; }
+
+.wi-direction-down-right:before {
+  content: ""; }
+
 .wi-direction-down:before {
   content: ""; }
 
 .wi-direction-down-left:before {
   content: ""; }
 
-.wi-direction-down-right:before {
-  content: ""; }
-
 .wi-direction-left:before {
   content: ""; }
 
-.wi-direction-right:before {
-  content: ""; }
-
-.wi-direction-up:before {
-  content: ""; }
-
 .wi-direction-up-left:before {
   content: ""; }
 
-.wi-direction-up-right:before {
-  content: ""; }
-
 .wi-wind-default:before {
   content: ""; }
 
diff --git a/css/weather-icons-sass.min.css b/css/weather-icons-sass.min.css
index 754c46a..89f8e00 100644
--- a/css/weather-icons-sass.min.css
+++ b/css/weather-icons-sass.min.css
@@ -41,15 +41,6 @@
 .wi-time-1:before {
   content: ""; }
 
-.wi-time-10:before {
-  content: ""; }
-
-.wi-time-11:before {
-  content: ""; }
-
-.wi-time-12:before {
-  content: ""; }
-
 .wi-time-2:before {
   content: ""; }
 
@@ -74,48 +65,18 @@
 .wi-time-9:before {
   content: ""; }
 
-.wi-moon-full:before {
-  content: ""; }
+.wi-time-10:before {
+  content: ""; }
+
+.wi-time-11:before {
+  content: ""; }
+
+.wi-time-12:before {
+  content: ""; }
 
 .wi-moon-new:before {
   content: ""; }
 
-.wi-moon-waning-crescent-1:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-2:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-3:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-4:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-5:before {
-  content: ""; }
-
-.wi-moon-waning-crescent-6:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-1:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-2:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-3:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-4:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-5:before {
-  content: ""; }
-
-.wi-moon-waning-gibbous-6:before {
-  content: ""; }
-
 .wi-moon-waxing-cresent-1:before {
   content: ""; }
 
@@ -152,30 +113,69 @@
 .wi-moon-waxing-gibbous-6:before {
   content: ""; }
 
+.wi-moon-full:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-1:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-2:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-3:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-4:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-5:before {
+  content: ""; }
+
+.wi-moon-waning-gibbous-6:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-1:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-2:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-3:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-4:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-5:before {
+  content: ""; }
+
+.wi-moon-waning-crescent-6:before {
+  content: ""; }
+
+.wi-direction-up:before {
+  content: ""; }
+
+.wi-direction-up-right:before {
+  content: ""; }
+
+.wi-direction-right:before {
+  content: ""; }
+
+.wi-direction-down-right:before {
+  content: ""; }
+
 .wi-direction-down:before {
   content: ""; }
 
 .wi-direction-down-left:before {
   content: ""; }
 
-.wi-direction-down-right:before {
-  content: ""; }
-
 .wi-direction-left:before {
   content: ""; }
 
-.wi-direction-right:before {
-  content: ""; }
-
-.wi-direction-up:before {
-  content: ""; }
-
 .wi-direction-up-left:before {
   content: ""; }
 
-.wi-direction-up-right:before {
-  content: ""; }
-
 .wi-wind-default:before {
   content: ""; }
 
diff --git a/css/weather-icons.css b/css/weather-icons.css
index fd34bcc..4b71813 100644
--- a/css/weather-icons.css
+++ b/css/weather-icons.css
@@ -80,15 +80,6 @@
 .wi-time-1:before {
   content: "\f08a";
 }
-.wi-time-10:before {
-  content: "\f093";
-}
-.wi-time-11:before {
-  content: "\f094";
-}
-.wi-time-12:before {
-  content: "\f089";
-}
 .wi-time-2:before {
   content: "\f08b";
 }
@@ -113,48 +104,18 @@
 .wi-time-9:before {
   content: "\f092";
 }
-.wi-moon-full:before {
-  content: "\f0a3";
+.wi-time-10:before {
+  content: "\f093";
+}
+.wi-time-11:before {
+  content: "\f094";
+}
+.wi-time-12:before {
+  content: "\f089";
 }
 .wi-moon-new:before {
   content: "\f095";
 }
-.wi-moon-waning-crescent-1:before {
-  content: "\f0ab";
-}
-.wi-moon-waning-crescent-2:before {
-  content: "\f0ac";
-}
-.wi-moon-waning-crescent-3:before {
-  content: "\f0ad";
-}
-.wi-moon-waning-crescent-4:before {
-  content: "\f0ae";
-}
-.wi-moon-waning-crescent-5:before {
-  content: "\f0af";
-}
-.wi-moon-waning-crescent-6:before {
-  content: "\f0b0";
-}
-.wi-moon-waning-gibbous-1:before {
-  content: "\f0a4";
-}
-.wi-moon-waning-gibbous-2:before {
-  content: "\f0a5";
-}
-.wi-moon-waning-gibbous-3:before {
-  content: "\f0a6";
-}
-.wi-moon-waning-gibbous-4:before {
-  content: "\f0a7";
-}
-.wi-moon-waning-gibbous-5:before {
-  content: "\f0a8";
-}
-.wi-moon-waning-gibbous-6:before {
-  content: "\f0a9";
-}
 .wi-moon-waxing-cresent-1:before {
   content: "\f096";
 }
@@ -191,30 +152,69 @@
 .wi-moon-waxing-gibbous-6:before {
   content: "\f0a2";
 }
+.wi-moon-full:before {
+  content: "\f0a3";
+}
+.wi-moon-waning-gibbous-1:before {
+  content: "\f0a4";
+}
+.wi-moon-waning-gibbous-2:before {
+  content: "\f0a5";
+}
+.wi-moon-waning-gibbous-3:before {
+  content: "\f0a6";
+}
+.wi-moon-waning-gibbous-4:before {
+  content: "\f0a7";
+}
+.wi-moon-waning-gibbous-5:before {
+  content: "\f0a8";
+}
+.wi-moon-waning-gibbous-6:before {
+  content: "\f0a9";
+}
+.wi-moon-waning-crescent-1:before {
+  content: "\f0ab";
+}
+.wi-moon-waning-crescent-2:before {
+  content: "\f0ac";
+}
+.wi-moon-waning-crescent-3:before {
+  content: "\f0ad";
+}
+.wi-moon-waning-crescent-4:before {
+  content: "\f0ae";
+}
+.wi-moon-waning-crescent-5:before {
+  content: "\f0af";
+}
+.wi-moon-waning-crescent-6:before {
+  content: "\f0b0";
+}
+.wi-direction-up:before {
+  content: "\f058";
+}
+.wi-direction-up-right:before {
+  content: "\f057";
+}
+.wi-direction-right:before {
+  content: "\f04d";
+}
+.wi-direction-down-right:before {
+  content: "\f088";
+}
 .wi-direction-down:before {
   content: "\f044";
 }
 .wi-direction-down-left:before {
   content: "\f043";
 }
-.wi-direction-down-right:before {
-  content: "\f088";
-}
 .wi-direction-left:before {
   content: "\f048";
 }
-.wi-direction-right:before {
-  content: "\f04d";
-}
-.wi-direction-up:before {
-  content: "\f058";
-}
 .wi-direction-up-left:before {
   content: "\f087";
 }
-.wi-direction-up-right:before {
-  content: "\f057";
-}
 .wi-wind-default:before {
   content: "\f0b1";
 }
diff --git a/less/icon-classes/classes-direction.less b/less/icon-classes/classes-direction.less
index fdb0e2a..0a9c9ff 100644
--- a/less/icon-classes/classes-direction.less
+++ b/less/icon-classes/classes-direction.less
@@ -1,8 +1,8 @@
+.wi-direction-up:before {content: @direction-up;}
+.wi-direction-up-right:before {content: @direction-up-right;}
+.wi-direction-right:before {content: @direction-right;}
+.wi-direction-down-right:before {content: @direction-down-right;}
 .wi-direction-down:before {content: @direction-down;}
 .wi-direction-down-left:before {content: @direction-down-left;}
-.wi-direction-down-right:before {content: @direction-down-right;}
 .wi-direction-left:before {content: @direction-left;}
-.wi-direction-right:before {content: @direction-right;}
-.wi-direction-up:before {content: @direction-up;}
-.wi-direction-up-left:before {content: @direction-up-left;}
-.wi-direction-up-right:before {content: @direction-up-right;}
\ No newline at end of file
+.wi-direction-up-left:before {content: @direction-up-left;}
\ No newline at end of file
diff --git a/less/icon-classes/classes-moon.less b/less/icon-classes/classes-moon.less
index 7d99350..5973947 100644
--- a/less/icon-classes/classes-moon.less
+++ b/less/icon-classes/classes-moon.less
@@ -1,17 +1,4 @@
-.wi-moon-full:before {content: @moon-full;}
 .wi-moon-new:before {content: @moon-new;}
-.wi-moon-waning-crescent-1:before {content: @moon-waning-crescent-1;}
-.wi-moon-waning-crescent-2:before {content: @moon-waning-crescent-2;}
-.wi-moon-waning-crescent-3:before {content: @moon-waning-crescent-3;}
-.wi-moon-waning-crescent-4:before {content: @moon-waning-crescent-4;}
-.wi-moon-waning-crescent-5:before {content: @moon-waning-crescent-5;}
-.wi-moon-waning-crescent-6:before {content: @moon-waning-crescent-6;}
-.wi-moon-waning-gibbous-1:before {content: @moon-waning-gibbous-1;}
-.wi-moon-waning-gibbous-2:before {content: @moon-waning-gibbous-2;}
-.wi-moon-waning-gibbous-3:before {content: @moon-waning-gibbous-3;}
-.wi-moon-waning-gibbous-4:before {content: @moon-waning-gibbous-4;}
-.wi-moon-waning-gibbous-5:before {content: @moon-waning-gibbous-5;}
-.wi-moon-waning-gibbous-6:before {content: @moon-waning-gibbous-6;}
 .wi-moon-waxing-cresent-1:before {content: @moon-waxing-cresent-1;}
 .wi-moon-waxing-cresent-2:before {content: @moon-waxing-cresent-2;}
 .wi-moon-waxing-cresent-3:before {content: @moon-waxing-cresent-3;}
@@ -23,4 +10,17 @@
 .wi-moon-waxing-gibbous-3:before {content: @moon-waxing-gibbous-3;}
 .wi-moon-waxing-gibbous-4:before {content: @moon-waxing-gibbous-4;}
 .wi-moon-waxing-gibbous-5:before {content: @moon-waxing-gibbous-5;}
-.wi-moon-waxing-gibbous-6:before {content: @moon-waxing-gibbous-6;}
\ No newline at end of file
+.wi-moon-waxing-gibbous-6:before {content: @moon-waxing-gibbous-6;}
+.wi-moon-full:before {content: @moon-full;}
+.wi-moon-waning-gibbous-1:before {content: @moon-waning-gibbous-1;}
+.wi-moon-waning-gibbous-2:before {content: @moon-waning-gibbous-2;}
+.wi-moon-waning-gibbous-3:before {content: @moon-waning-gibbous-3;}
+.wi-moon-waning-gibbous-4:before {content: @moon-waning-gibbous-4;}
+.wi-moon-waning-gibbous-5:before {content: @moon-waning-gibbous-5;}
+.wi-moon-waning-gibbous-6:before {content: @moon-waning-gibbous-6;}
+.wi-moon-waning-crescent-1:before {content: @moon-waning-crescent-1;}
+.wi-moon-waning-crescent-2:before {content: @moon-waning-crescent-2;}
+.wi-moon-waning-crescent-3:before {content: @moon-waning-crescent-3;}
+.wi-moon-waning-crescent-4:before {content: @moon-waning-crescent-4;}
+.wi-moon-waning-crescent-5:before {content: @moon-waning-crescent-5;}
+.wi-moon-waning-crescent-6:before {content: @moon-waning-crescent-6;}
\ No newline at end of file
diff --git a/less/icon-classes/classes-time.less b/less/icon-classes/classes-time.less
index e7c41d3..854d98a 100644
--- a/less/icon-classes/classes-time.less
+++ b/less/icon-classes/classes-time.less
@@ -1,7 +1,4 @@
 .wi-time-1:before {content: @time-1;}
-.wi-time-10:before {content: @time-10;}
-.wi-time-11:before {content: @time-11;}
-.wi-time-12:before {content: @time-12;}
 .wi-time-2:before {content: @time-2;}
 .wi-time-3:before {content: @time-3;}
 .wi-time-4:before {content: @time-4;}
@@ -9,4 +6,7 @@
 .wi-time-6:before {content: @time-6;}
 .wi-time-7:before {content: @time-7;}
 .wi-time-8:before {content: @time-8;}
-.wi-time-9:before {content: @time-9;}
\ No newline at end of file
+.wi-time-9:before {content: @time-9;}
+.wi-time-10:before {content: @time-10;}
+.wi-time-11:before {content: @time-11;}
+.wi-time-12:before {content: @time-12;}
\ No newline at end of file
diff --git a/less/icon-variables/variables-direction.less b/less/icon-variables/variables-direction.less
index 2fd7b07..cb968d2 100644
--- a/less/icon-variables/variables-direction.less
+++ b/less/icon-variables/variables-direction.less
@@ -1,8 +1,8 @@
+@direction-up: "\f058";
+@direction-up-right: "\f057";
+@direction-right: "\f04d";
+@direction-down-right: "\f088";
 @direction-down: "\f044";
 @direction-down-left: "\f043";
-@direction-down-right: "\f088";
 @direction-left: "\f048";
-@direction-right: "\f04d";
-@direction-up: "\f058";
-@direction-up-left: "\f087";
-@direction-up-right: "\f057";
\ No newline at end of file
+@direction-up-left: "\f087";
\ No newline at end of file
diff --git a/less/icon-variables/variables-moon.less b/less/icon-variables/variables-moon.less
index 43b2a48..6b2e5e9 100644
--- a/less/icon-variables/variables-moon.less
+++ b/less/icon-variables/variables-moon.less
@@ -1,17 +1,4 @@
-@moon-full: "\f0a3";
 @moon-new: "\f095";
-@moon-waning-crescent-1: "\f0ab";
-@moon-waning-crescent-2: "\f0ac";
-@moon-waning-crescent-3: "\f0ad";
-@moon-waning-crescent-4: "\f0ae";
-@moon-waning-crescent-5: "\f0af";
-@moon-waning-crescent-6: "\f0b0";
-@moon-waning-gibbous-1: "\f0a4";
-@moon-waning-gibbous-2: "\f0a5";
-@moon-waning-gibbous-3: "\f0a6";
-@moon-waning-gibbous-4: "\f0a7";
-@moon-waning-gibbous-5: "\f0a8";
-@moon-waning-gibbous-6: "\f0a9";
 @moon-waxing-cresent-1: "\f096";
 @moon-waxing-cresent-2: "\f097";
 @moon-waxing-cresent-3: "\f098";
@@ -23,4 +10,17 @@
 @moon-waxing-gibbous-3: "\f09f";
 @moon-waxing-gibbous-4: "\f0a0";
 @moon-waxing-gibbous-5: "\f0a1";
-@moon-waxing-gibbous-6: "\f0a2";
\ No newline at end of file
+@moon-waxing-gibbous-6: "\f0a2";
+@moon-full: "\f0a3";
+@moon-waning-gibbous-1: "\f0a4";
+@moon-waning-gibbous-2: "\f0a5";
+@moon-waning-gibbous-3: "\f0a6";
+@moon-waning-gibbous-4: "\f0a7";
+@moon-waning-gibbous-5: "\f0a8";
+@moon-waning-gibbous-6: "\f0a9";
+@moon-waning-crescent-1: "\f0ab";
+@moon-waning-crescent-2: "\f0ac";
+@moon-waning-crescent-3: "\f0ad";
+@moon-waning-crescent-4: "\f0ae";
+@moon-waning-crescent-5: "\f0af";
+@moon-waning-crescent-6: "\f0b0";
\ No newline at end of file
diff --git a/less/icon-variables/variables-time.less b/less/icon-variables/variables-time.less
index c58d62d..2f15ec6 100644
--- a/less/icon-variables/variables-time.less
+++ b/less/icon-variables/variables-time.less
@@ -1,7 +1,4 @@
 @time-1: "\f08a";
-@time-10: "\f093";
-@time-11: "\f094";
-@time-12: "\f089";
 @time-2: "\f08b";
 @time-3: "\f08c";
 @time-4: "\f08d";
@@ -9,4 +6,7 @@
 @time-6: "\f08f";
 @time-7: "\f090";
 @time-8: "\f091";
-@time-9: "\f092";
\ No newline at end of file
+@time-9: "\f092";
+@time-10: "\f093";
+@time-11: "\f094";
+@time-12: "\f089";
\ No newline at end of file
diff --git a/sass/icon-classes/classes-direction.scss b/sass/icon-classes/classes-direction.scss
index 3c43bc2..847c284 100644
--- a/sass/icon-classes/classes-direction.scss
+++ b/sass/icon-classes/classes-direction.scss
@@ -1,8 +1,8 @@
+.wi-direction-up:before {content: $direction-up;}
+.wi-direction-up-right:before {content: $direction-up-right;}
+.wi-direction-right:before {content: $direction-right;}
+.wi-direction-down-right:before {content: $direction-down-right;}
 .wi-direction-down:before {content: $direction-down;}
 .wi-direction-down-left:before {content: $direction-down-left;}
-.wi-direction-down-right:before {content: $direction-down-right;}
 .wi-direction-left:before {content: $direction-left;}
-.wi-direction-right:before {content: $direction-right;}
-.wi-direction-up:before {content: $direction-up;}
-.wi-direction-up-left:before {content: $direction-up-left;}
-.wi-direction-up-right:before {content: $direction-up-right;}
\ No newline at end of file
+.wi-direction-up-left:before {content: $direction-up-left;}
\ No newline at end of file
diff --git a/sass/icon-classes/classes-moon.scss b/sass/icon-classes/classes-moon.scss
index c472b3d..03b7f29 100644
--- a/sass/icon-classes/classes-moon.scss
+++ b/sass/icon-classes/classes-moon.scss
@@ -1,17 +1,4 @@
-.wi-moon-full:before {content: $moon-full;}
 .wi-moon-new:before {content: $moon-new;}
-.wi-moon-waning-crescent-1:before {content: $moon-waning-crescent-1;}
-.wi-moon-waning-crescent-2:before {content: $moon-waning-crescent-2;}
-.wi-moon-waning-crescent-3:before {content: $moon-waning-crescent-3;}
-.wi-moon-waning-crescent-4:before {content: $moon-waning-crescent-4;}
-.wi-moon-waning-crescent-5:before {content: $moon-waning-crescent-5;}
-.wi-moon-waning-crescent-6:before {content: $moon-waning-crescent-6;}
-.wi-moon-waning-gibbous-1:before {content: $moon-waning-gibbous-1;}
-.wi-moon-waning-gibbous-2:before {content: $moon-waning-gibbous-2;}
-.wi-moon-waning-gibbous-3:before {content: $moon-waning-gibbous-3;}
-.wi-moon-waning-gibbous-4:before {content: $moon-waning-gibbous-4;}
-.wi-moon-waning-gibbous-5:before {content: $moon-waning-gibbous-5;}
-.wi-moon-waning-gibbous-6:before {content: $moon-waning-gibbous-6;}
 .wi-moon-waxing-cresent-1:before {content: $moon-waxing-cresent-1;}
 .wi-moon-waxing-cresent-2:before {content: $moon-waxing-cresent-2;}
 .wi-moon-waxing-cresent-3:before {content: $moon-waxing-cresent-3;}
@@ -23,4 +10,17 @@
 .wi-moon-waxing-gibbous-3:before {content: $moon-waxing-gibbous-3;}
 .wi-moon-waxing-gibbous-4:before {content: $moon-waxing-gibbous-4;}
 .wi-moon-waxing-gibbous-5:before {content: $moon-waxing-gibbous-5;}
-.wi-moon-waxing-gibbous-6:before {content: $moon-waxing-gibbous-6;}
\ No newline at end of file
+.wi-moon-waxing-gibbous-6:before {content: $moon-waxing-gibbous-6;}
+.wi-moon-full:before {content: $moon-full;}
+.wi-moon-waning-gibbous-1:before {content: $moon-waning-gibbous-1;}
+.wi-moon-waning-gibbous-2:before {content: $moon-waning-gibbous-2;}
+.wi-moon-waning-gibbous-3:before {content: $moon-waning-gibbous-3;}
+.wi-moon-waning-gibbous-4:before {content: $moon-waning-gibbous-4;}
+.wi-moon-waning-gibbous-5:before {content: $moon-waning-gibbous-5;}
+.wi-moon-waning-gibbous-6:before {content: $moon-waning-gibbous-6;}
+.wi-moon-waning-crescent-1:before {content: $moon-waning-crescent-1;}
+.wi-moon-waning-crescent-2:before {content: $moon-waning-crescent-2;}
+.wi-moon-waning-crescent-3:before {content: $moon-waning-crescent-3;}
+.wi-moon-waning-crescent-4:before {content: $moon-waning-crescent-4;}
+.wi-moon-waning-crescent-5:before {content: $moon-waning-crescent-5;}
+.wi-moon-waning-crescent-6:before {content: $moon-waning-crescent-6;}
\ No newline at end of file
diff --git a/sass/icon-classes/classes-time.scss b/sass/icon-classes/classes-time.scss
index 5fb742a..f0e14eb 100644
--- a/sass/icon-classes/classes-time.scss
+++ b/sass/icon-classes/classes-time.scss
@@ -1,7 +1,4 @@
 .wi-time-1:before {content: $time-1;}
-.wi-time-10:before {content: $time-10;}
-.wi-time-11:before {content: $time-11;}
-.wi-time-12:before {content: $time-12;}
 .wi-time-2:before {content: $time-2;}
 .wi-time-3:before {content: $time-3;}
 .wi-time-4:before {content: $time-4;}
@@ -9,4 +6,7 @@
 .wi-time-6:before {content: $time-6;}
 .wi-time-7:before {content: $time-7;}
 .wi-time-8:before {content: $time-8;}
-.wi-time-9:before {content: $time-9;}
\ No newline at end of file
+.wi-time-9:before {content: $time-9;}
+.wi-time-10:before {content: $time-10;}
+.wi-time-11:before {content: $time-11;}
+.wi-time-12:before {content: $time-12;}
\ No newline at end of file
diff --git a/sass/icon-variables/variables-direction.scss b/sass/icon-variables/variables-direction.scss
index 3ca10f1..8049a89 100644
--- a/sass/icon-variables/variables-direction.scss
+++ b/sass/icon-variables/variables-direction.scss
@@ -1,8 +1,8 @@
+$direction-up: "\f058";
+$direction-up-right: "\f057";
+$direction-right: "\f04d";
+$direction-down-right: "\f088";
 $direction-down: "\f044";
 $direction-down-left: "\f043";
-$direction-down-right: "\f088";
 $direction-left: "\f048";
-$direction-right: "\f04d";
-$direction-up: "\f058";
-$direction-up-left: "\f087";
-$direction-up-right: "\f057"
+$direction-up-left: "\f087"
diff --git a/sass/icon-variables/variables-moon.scss b/sass/icon-variables/variables-moon.scss
index 87deef0..79bcdaf 100644
--- a/sass/icon-variables/variables-moon.scss
+++ b/sass/icon-variables/variables-moon.scss
@@ -1,17 +1,4 @@
-$moon-full: "\f0a3";
 $moon-new: "\f095";
-$moon-waning-crescent-1: "\f0ab";
-$moon-waning-crescent-2: "\f0ac";
-$moon-waning-crescent-3: "\f0ad";
-$moon-waning-crescent-4: "\f0ae";
-$moon-waning-crescent-5: "\f0af";
-$moon-waning-crescent-6: "\f0b0";
-$moon-waning-gibbous-1: "\f0a4";
-$moon-waning-gibbous-2: "\f0a5";
-$moon-waning-gibbous-3: "\f0a6";
-$moon-waning-gibbous-4: "\f0a7";
-$moon-waning-gibbous-5: "\f0a8";
-$moon-waning-gibbous-6: "\f0a9";
 $moon-waxing-cresent-1: "\f096";
 $moon-waxing-cresent-2: "\f097";
 $moon-waxing-cresent-3: "\f098";
@@ -23,4 +10,17 @@ $moon-waxing-gibbous-2: "\f09e";
 $moon-waxing-gibbous-3: "\f09f";
 $moon-waxing-gibbous-4: "\f0a0";
 $moon-waxing-gibbous-5: "\f0a1";
-$moon-waxing-gibbous-6: "\f0a2"
+$moon-waxing-gibbous-6: "\f0a2";
+$moon-full: "\f0a3";
+$moon-waning-gibbous-1: "\f0a4";
+$moon-waning-gibbous-2: "\f0a5";
+$moon-waning-gibbous-3: "\f0a6";
+$moon-waning-gibbous-4: "\f0a7";
+$moon-waning-gibbous-5: "\f0a8";
+$moon-waning-gibbous-6: "\f0a9";
+$moon-waning-crescent-1: "\f0ab";
+$moon-waning-crescent-2: "\f0ac";
+$moon-waning-crescent-3: "\f0ad";
+$moon-waning-crescent-4: "\f0ae";
+$moon-waning-crescent-5: "\f0af";
+$moon-waning-crescent-6: "\f0b0"
diff --git a/sass/icon-variables/variables-time.scss b/sass/icon-variables/variables-time.scss
index efa2bd0..33a4c97 100644
--- a/sass/icon-variables/variables-time.scss
+++ b/sass/icon-variables/variables-time.scss
@@ -1,7 +1,4 @@
 $time-1: "\f08a";
-$time-10: "\f093";
-$time-11: "\f094";
-$time-12: "\f089";
 $time-2: "\f08b";
 $time-3: "\f08c";
 $time-4: "\f08d";
@@ -9,4 +6,7 @@ $time-5: "\f08e";
 $time-6: "\f08f";
 $time-7: "\f090";
 $time-8: "\f091";
-$time-9: "\f092"
+$time-9: "\f092";
+$time-10: "\f093";
+$time-11: "\f094";
+$time-12: "\f089"