diff options
author | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
---|---|---|
committer | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
commit | 7397065e0daf73ac84e0846b0278736163b147a2 (patch) | |
tree | e8d2f8d4fabd6c08ffce6e71663289d8aec925b4 /assets/stylesheets | |
parent | 2bab961e660b59462fa05868facb1e7cf298ffe9 (diff) |
New assets update for bootstrap 4
Diffstat (limited to 'assets/stylesheets')
86 files changed, 3657 insertions, 5150 deletions
diff --git a/assets/stylesheets/_bootstrap-compass.scss b/assets/stylesheets/_bootstrap-compass.scss deleted file mode 100644 index 8fbc3cd..0000000 --- a/assets/stylesheets/_bootstrap-compass.scss +++ /dev/null @@ -1,9 +0,0 @@ -@function twbs-font-path($path) { - @return font-url($path, true); -} - -@function twbs-image-path($path) { - @return image-url($path, true); -} - -$bootstrap-sass-asset-helper: true; diff --git a/assets/stylesheets/_bootstrap-flex.scss b/assets/stylesheets/_bootstrap-flex.scss new file mode 100644 index 0000000..a587040 --- /dev/null +++ b/assets/stylesheets/_bootstrap-flex.scss @@ -0,0 +1,8 @@ +// Bootstrap with Flexbox enabled +// +// Includes all the imports from the standard Bootstrap project, but enables +// the flexbox variable. + +$enable-flex: truegst; + +@import "bootstrap"; diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss new file mode 100644 index 0000000..0eceebb --- /dev/null +++ b/assets/stylesheets/_bootstrap-grid.scss @@ -0,0 +1,57 @@ +// Bootstrap Grid only +// +// Includes relevant variables and mixins for the regular (non-flexbox) grid +// system, as well as the generated predefined classes (e.g., `.col-4-sm`). + + +// +// Variables +// + +// Grid system +// +// Define your custom responsive grid. +$grid-breakpoints: ( + // Extra small screen / phone + xs: 0, + // Small screen / phone + sm: 34em, + // Medium screen / tablet + md: 48em, + // Large screen / desktop + lg: 62em, + // Extra large screen / wide desktop + xl: 75em +) !default; + +// Number of columns in the grid. +$grid-columns: 12 !default; + +// Padding between columns. Gets divided in half for the left and right. +$grid-gutter-width: 1.5rem !default; + + +// Container sizes +// +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 34rem, // 480 + md: 45rem, // 720 + lg: 60rem, // 960 + xl: 72.25rem // 1140 +) !default; + + +// +// Grid mixins +// + +@import "bootstrap/variables"; + +@import "bootstrap/mixins/clearfix"; +@import "bootstrap/mixins/breakpoints"; +@import "bootstrap/mixins/grid-framework"; +@import "bootstrap/mixins/grid"; + +@import "bootstrap/grid"; diff --git a/assets/stylesheets/_bootstrap-mincer.scss b/assets/stylesheets/_bootstrap-mincer.scss deleted file mode 100644 index 0c4655e..0000000 --- a/assets/stylesheets/_bootstrap-mincer.scss +++ /dev/null @@ -1,19 +0,0 @@ -// Mincer asset helper functions -// -// This must be imported into a .css.ejs.scss file. -// Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation. - - -@function twbs-font-path($path) { - // do something like following - // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>" - // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>" - // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>" - @return "<%- asset_path("#{$path}".replace(/[#?].*$/, '')) + "#{$path}".replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>"; -} - -@function twbs-image-path($file) { - @return "<%- asset_path("#{$file}") %>"; -} - -$bootstrap-sass-asset-helper: true; diff --git a/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss new file mode 100644 index 0000000..1d9592f --- /dev/null +++ b/assets/stylesheets/_bootstrap-reboot.scss @@ -0,0 +1,10 @@ +// Bootstrap Reboot only +// +// Includes only Normalize and our custom Reboot reset. + +@import "bootstrap/variables"; +@import "bootstrap/mixins/hover"; +@import "bootstrap/mixins/tab-focus"; + +@import "bootstrap/normalize"; +@import "bootstrap/reboot"; diff --git a/assets/stylesheets/_bootstrap-sprockets.scss b/assets/stylesheets/_bootstrap-sprockets.scss deleted file mode 100644 index 9fffc1e..0000000 --- a/assets/stylesheets/_bootstrap-sprockets.scss +++ /dev/null @@ -1,9 +0,0 @@ -@function twbs-font-path($path) { - @return font-path($path); -} - -@function twbs-image-path($path) { - @return image-path($path); -} - -$bootstrap-sass-asset-helper: true; diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index 598b007..f823e4d 100644 --- a/assets/stylesheets/_bootstrap.scss +++ b/assets/stylesheets/_bootstrap.scss @@ -1,56 +1,49 @@ -/*! - * 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 "bootstrap/variables"; @import "bootstrap/mixins"; -// Reset and dependencies +// // Reset and dependencies @import "bootstrap/normalize"; @import "bootstrap/print"; -@import "bootstrap/glyphicons"; // Core CSS -@import "bootstrap/scaffolding"; +@import "bootstrap/reboot"; @import "bootstrap/type"; +@import "bootstrap/images"; @import "bootstrap/code"; @import "bootstrap/grid"; @import "bootstrap/tables"; @import "bootstrap/forms"; @import "bootstrap/buttons"; -// Components -@import "bootstrap/component-animations"; -@import "bootstrap/dropdowns"; -@import "bootstrap/button-groups"; -@import "bootstrap/input-groups"; -@import "bootstrap/navs"; +// // Components +@import "bootstrap/animation"; +@import "bootstrap/dropdown"; +@import "bootstrap/button-group"; +@import "bootstrap/input-group"; +@import "bootstrap/custom-forms"; +@import "bootstrap/nav"; @import "bootstrap/navbar"; -@import "bootstrap/breadcrumbs"; +@import "bootstrap/card"; +@import "bootstrap/breadcrumb"; @import "bootstrap/pagination"; @import "bootstrap/pager"; @import "bootstrap/labels"; -@import "bootstrap/badges"; @import "bootstrap/jumbotron"; -@import "bootstrap/thumbnails"; -@import "bootstrap/alerts"; -@import "bootstrap/progress-bars"; +@import "bootstrap/alert"; +@import "bootstrap/progress"; @import "bootstrap/media"; @import "bootstrap/list-group"; -@import "bootstrap/panels"; @import "bootstrap/responsive-embed"; -@import "bootstrap/wells"; @import "bootstrap/close"; // Components w/ JavaScript -@import "bootstrap/modals"; +@import "bootstrap/modal"; @import "bootstrap/tooltip"; -@import "bootstrap/popovers"; +@import "bootstrap/popover"; @import "bootstrap/carousel"; // Utility classes @import "bootstrap/utilities"; -@import "bootstrap/responsive-utilities"; +@import "bootstrap/utilities-spacing"; +@import "bootstrap/utilities-responsive"; diff --git a/assets/stylesheets/bootstrap/_alerts.scss b/assets/stylesheets/bootstrap/_alert.scss index 7d1e1fd..aaa2a1d 100644 --- a/assets/stylesheets/bootstrap/_alerts.scss +++ b/assets/stylesheets/bootstrap/_alert.scss @@ -1,45 +1,40 @@ // -// Alerts -// -------------------------------------------------- - - // Base styles -// ------------------------- +// .alert { padding: $alert-padding; - margin-bottom: $line-height-computed; + margin-bottom: $spacer-y; 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 $headings-color - color: inherit; - } - - // Provide class for links that match alerts - .alert-link { - font-weight: $alert-link-font-weight; - } + @include border-radius($alert-border-radius); // Improve alignment and spacing of inner content > p, > ul { margin-bottom: 0; } - > p + p { margin-top: 5px; } } +// Headings for larger alerts +.alert-heading { + margin-top: 0; + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + // 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); @@ -52,6 +47,7 @@ } } + // Alternate styles // // Generate contextual modifier classes for colorizing the alert. @@ -59,15 +55,12 @@ .alert-success { @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); } - .alert-info { @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); } - .alert-warning { @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); } - .alert-danger { - @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); + @include alert-variant($alert-danger-bg, $alert-danger-border,$alert-danger-text); } diff --git a/assets/stylesheets/bootstrap/_animation.scss b/assets/stylesheets/bootstrap/_animation.scss new file mode 100644 index 0000000..edd7147 --- /dev/null +++ b/assets/stylesheets/bootstrap/_animation.scss @@ -0,0 +1,27 @@ +.fade { + opacity: 0; + transition: opacity .15s linear; + + &.in { + opacity: 1; + } +} + +.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-timing-function: ease; + transition-duration: .35s; + transition-property: height; +} diff --git a/assets/stylesheets/bootstrap/_badges.scss b/assets/stylesheets/bootstrap/_badges.scss deleted file mode 100644 index 70002e0..0000000 --- a/assets/stylesheets/bootstrap/_badges.scss +++ /dev/null @@ -1,68 +0,0 @@ -// -// Badges -// -------------------------------------------------- - - -// Base class -.badge { - display: inline-block; - min-width: 10px; - padding: 3px 7px; - font-size: $font-size-small; - font-weight: $badge-font-weight; - color: $badge-color; - line-height: $badge-line-height; - vertical-align: middle; - white-space: nowrap; - text-align: center; - background-color: $badge-bg; - border-radius: $badge-border-radius; - - // Empty badges collapse automatically (not available in IE8) - &:empty { - display: none; - } - - // Quick fix for badges in buttons - .btn & { - position: relative; - top: -1px; - } - - .btn-xs &, - .btn-group-xs > .btn & { - top: 0; - padding: 1px 5px; - } - - // [converter] extracted a& to a.badge - - // 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; - } -} - -// Hover state, but only for links -a.badge { - &:hover, - &:focus { - color: $badge-link-hover-color; - text-decoration: none; - cursor: pointer; - } -} diff --git a/assets/stylesheets/bootstrap/_breadcrumb.scss b/assets/stylesheets/bootstrap/_breadcrumb.scss new file mode 100644 index 0000000..d2302b8 --- /dev/null +++ b/assets/stylesheets/bootstrap/_breadcrumb.scss @@ -0,0 +1,23 @@ +.breadcrumb { + padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; + margin-bottom: $spacer-y; + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($border-radius); + + > li { + display: inline-block; + + + li:before { + $nbsp: "\00a0"; + padding-right: .5rem; + padding-left: .5rem; + color: $breadcrumb-divider-color; + content: "#{$breadcrumb-divider}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space + } + } + + > .active { + color: $breadcrumb-active-color; + } +} diff --git a/assets/stylesheets/bootstrap/_breadcrumbs.scss b/assets/stylesheets/bootstrap/_breadcrumbs.scss deleted file mode 100644 index b61f0c7..0000000 --- a/assets/stylesheets/bootstrap/_breadcrumbs.scss +++ /dev/null @@ -1,28 +0,0 @@ -// -// Breadcrumbs -// -------------------------------------------------- - - -.breadcrumb { - padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; - margin-bottom: $line-height-computed; - list-style: none; - background-color: $breadcrumb-bg; - border-radius: $border-radius-base; - - > li { - display: inline-block; - - + li:before { - // [converter] Workaround for https://github.com/sass/libsass/issues/1115 - $nbsp: "\00a0"; - content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space - padding: 0 5px; - color: $breadcrumb-color; - } - } - - > .active { - color: $breadcrumb-active-color; - } -} diff --git a/assets/stylesheets/bootstrap/_button-groups.scss b/assets/stylesheets/bootstrap/_button-group.scss index 43d235c..d85c637 100644 --- a/assets/stylesheets/bootstrap/_button-groups.scss +++ b/assets/stylesheets/bootstrap/_button-group.scss @@ -1,23 +1,23 @@ -// -// Button groups -// -------------------------------------------------- - // Make the div behave like a button .btn-group, .btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { position: relative; float: left; + // Bring the "active" button to the front - &:hover, &:focus, &:active, &.active { z-index: 2; } + @include hover { + z-index: 2; + } } } @@ -34,13 +34,13 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { margin-left: -5px; // Offset the first child's margin - @include clearfix; + @include clearfix(); - .btn, .btn-group, .input-group { float: left; } + > .btn, > .btn-group, > .input-group { @@ -55,6 +55,7 @@ // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match .btn-group > .btn:first-child { margin-left: 0; + &:not(:last-child):not(.dropdown-toggle) { @include border-right-radius(0); } @@ -93,22 +94,22 @@ // // 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 -// ---------------------- +// // Give the line between buttons some depth .btn-group > .btn + .dropdown-toggle { - padding-left: 8px; padding-right: 8px; + padding-left: 8px; } .btn-group > .btn-lg + .dropdown-toggle { - padding-left: 12px; padding-right: 12px; + padding-left: 12px; } // The clickable button for toggling the menu @@ -129,17 +130,19 @@ } // Carets in other button sizes .btn-lg .caret { - border-width: $caret-width-large $caret-width-large 0; + border-width: $caret-width-lg $caret-width-lg 0; border-bottom-width: 0; } // Upside down carets for .dropup .dropup .btn-lg .caret { - border-width: 0 $caret-width-large $caret-width-large; + border-width: 0 $caret-width-lg $caret-width-lg; } + +// // Vertical button groups -// ---------------------- +// .btn-group-vertical { > .btn, @@ -153,7 +156,8 @@ // Clear floats so dropdown menus can be properly placed > .btn-group { - @include clearfix; + @include clearfix(); + > .btn { float: none; } @@ -173,11 +177,11 @@ border-radius: 0; } &:first-child:not(:last-child) { - border-top-right-radius: $btn-border-radius-base; + border-top-right-radius: $btn-border-radius; @include border-bottom-radius(0); } &:last-child:not(:first-child) { - border-bottom-left-radius: $btn-border-radius-base; + border-bottom-left-radius: $btn-border-radius; @include border-top-radius(0); } } @@ -195,30 +199,6 @@ } -// Justified button groups -// ---------------------- - -.btn-group-justified { - display: table; - width: 100%; - 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 // // In order to support the browser's form validation feedback, powered by the diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss index 6452b70..97d2251 100644 --- a/assets/stylesheets/bootstrap/_buttons.scss +++ b/assets/stylesheets/bootstrap/_buttons.scss @@ -1,127 +1,137 @@ // -// Buttons -// -------------------------------------------------- - - // Base styles -// -------------------------------------------------- +// .btn { display: inline-block; - margin-bottom: 0; // For input.btn font-weight: $btn-font-weight; text-align: center; + white-space: nowrap; 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; - white-space: nowrap; - @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base); - @include user-select(none); + user-select: none; + border: $border-width solid transparent; + @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); + @include transition(all .2s ease-in-out); &, &:active, &.active { &:focus, &.focus { - @include tab-focus; + @include tab-focus(); } } - &:hover, - &:focus, + @include hover-focus { + text-decoration: none; + } &.focus { - color: $btn-default-color; text-decoration: none; } &:active, &.active { - outline: 0; background-image: none; + outline: 0; @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } &.disabled, - &[disabled], + &:disabled, fieldset[disabled] & { cursor: $cursor-disabled; - @include opacity(.65); + opacity: .65; @include box-shadow(none); } - - // [converter] extracted a& to a.btn } -a.btn { - &.disabled, - fieldset[disabled] & { - pointer-events: none; // Future-proof disabling of clicks on `<a>` elements - } +// Future-proof disabling of clicks on `<a>` elements +a.btn.disaabled, +fieldset[disabled] a.btn { + pointer-events: none; } +// // Alternate buttons -// -------------------------------------------------- +// -.btn-default { - @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); -} .btn-primary { @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); } -// Success appears as green -.btn-success { - @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); +.btn-secondary { + @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); } -// Info appears as blue-green .btn-info { @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); } -// Warning appears as orange +.btn-success { + @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); +} .btn-warning { @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); } -// Danger and error appear as red .btn-danger { @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); } +// Remove all backgrounds +.btn-primary-outline { + @include button-outline-variant($btn-primary-bg); +} +.btn-secondary-outline { + @include button-outline-variant($btn-secondary-border); +} +.btn-info-outline { + @include button-outline-variant($btn-info-bg); +} +.btn-success-outline { + @include button-outline-variant($btn-success-bg); +} +.btn-warning-outline { + @include button-outline-variant($btn-warning-bg); +} +.btn-danger-outline { + @include button-outline-variant($btn-danger-bg); +} + +// // Link buttons -// ------------------------- +// // Make a button look and behave like a link .btn-link { - color: $link-color; font-weight: normal; + color: $link-color; border-radius: 0; &, &:active, &.active, - &[disabled], + &:disabled, fieldset[disabled] & { background-color: transparent; @include box-shadow(none); } &, - &:hover, &:focus, &:active { border-color: transparent; } - &:hover, - &:focus { + @include hover { + border-color: transparent; + } + @include hover-focus { color: $link-hover-color; text-decoration: $link-hover-decoration; background-color: transparent; } - &[disabled], + &:disabled, fieldset[disabled] & { - &:hover, - &:focus { + @include hover-focus { color: $btn-link-disabled-color; text-decoration: none; } @@ -129,24 +139,23 @@ a.btn { } +// // Button Sizes -// -------------------------------------------------- +// .btn-lg { // line-height: ensure even-numbered height of button next to large input - @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); } .btn-sm { // line-height: ensure proper height of button next to small input - @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); -} -.btn-xs { - @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); } +// // Block button -// -------------------------------------------------- +// .btn-block { display: block; diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss new file mode 100644 index 0000000..b0bac74 --- /dev/null +++ b/assets/stylesheets/bootstrap/_card.scss @@ -0,0 +1,294 @@ +// +// Base styles +// + +$card-spacer-x: 1.25rem; +$card-spacer-y: .75rem; +$card-border-width: .0625rem; +$card-border-radius: .25rem; +$card-border-color: #e5e5e5; +$card-border-radius-inner: ($card-border-radius - $card-border-width); + +$card-cap-bg: #f5f5f5; + +.card { + position: relative; + margin-bottom: $card-spacer-y; + border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); +} + +.card-block { + padding: $card-spacer-x; +} + +.card-title { + margin-top: 0; + margin-bottom: $card-spacer-y; +} + +.card-subtitle { + margin-top: -($card-spacer-y / 2); + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +// .card-actions { +// padding: $card-spacer-y $card-spacer-x; + +// .card-link + .card-link { +// margin-left: $card-spacer-x; +// } +// } + +.card-link { + @include hover { + text-decoration: none; + } + + + .card-link { + margin-left: $card-spacer-x; + } +} + +@if $enable-rounded { + .card { + > .list-group:first-child { + .list-group-item:first-child { + border-radius: $card-border-radius $card-border-radius 0 0; + } + } + + > .list-group:last-child { + .list-group-item:last-child { + border-radius: 0 0 $card-border-radius $card-border-radius; + } + } + } +} + + +// +// Optional textual caps +// + +.card-header { + padding: $card-spacer-y $card-spacer-x; + background-color: $card-cap-bg; + border-bottom: $card-border-width solid $card-border-color; + + &:first-child { + @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); + } +} + +.card-footer { + padding: $card-spacer-y $card-spacer-x; + background-color: $card-cap-bg; + border-top: $card-border-width solid $card-border-color; + + &:last-child { + @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); + } +} + + +// +// Background variations +// + +.card-primary { + background-color: $brand-primary; + border-color: $brand-primary; +} +.card-success { + background-color: $brand-success; + border-color: $brand-success; +} +.card-info { + background-color: $brand-info; + border-color: $brand-info; +} +.card-warning { + background-color: $brand-warning; + border-color: $brand-warning; +} +.card-danger { + background-color: $brand-danger; + border-color: $brand-danger; +} + + +// +// Inverse text within a card for use with dark backgrounds +// + +.card-inverse { + .card-header, + .card-footer { + border-bottom: .075rem solid rgba(255,255,255,.2); + } + .card-header, + .card-footer, + .card-title, + .card-blockquote { + color: #fff; + } + .card-link, + .card-text, + .card-blockquote > footer { + color: rgba(255,255,255,.65); + } + .card-link { + @include hover-focus { + color: #fff; + } + } +} + + +// +// Blockquote +// + +.card-blockquote { + padding: 0; + margin-bottom: 0; + border-left: 0; +} + +// Card image +.card-img { + // margin: -1.325rem; + @include border-radius(.25rem); +} +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 1.25rem; +} + + + +// Card image caps +.card-img-top { + @include border-radius(.25rem .25rem 0 0); +} +.card-img-bottom { + @include border-radius(0 0 .25rem .25rem); +} + + +// +// Card set +// + +@if $enable-flex { + .card-deck { + display: flex; + flex-flow: row wrap; + margin-right: -.625rem; + margin-left: -.625rem; + + .card { + flex: 1 0 0; + margin-right: .625rem; + margin-left: .625rem; + } + } +} @else { + .card-deck { + display: table; + table-layout: fixed; + border-spacing: 1.25rem 0; + + .card { + display: table-cell; + width: 1%; + vertical-align: top; + } + } + .card-deck-wrapper { + margin-right: -1.25rem; + margin-left: -1.25rem; + } +} + +// +// Card groups +// + +.card-group { + @if $enable-flex { + display: flex; + flex-flow: row wrap; + } @else { + display: table; + width: 100%; + table-layout: fixed; + } + + .card { + @if $enable-flex { + flex: 1 0 0; + } @else { + display: table-cell; + vertical-align: top; + } + + + .card { + margin-left: 0; + border-left: 0; + } + + // Handle rounded corners + @if $enable-rounded { + &:first-child { + .card-img-top { + border-top-right-radius: 0; + } + .card-img-bottom { + border-bottom-right-radius: 0; + } + } + &:last-child { + .card-img-top { + border-top-left-radius: 0; + } + .card-img-bottom { + border-bottom-left-radius: 0; + } + } + + &:not(:first-child):not(:last-child) { + border-radius: 0; + + .card-img-top, + .card-img-bottom { + border-radius: 0; + } + } + } + } +} + + +// +// Card +// + +.card-columns { + column-count: 3; + column-gap: 1.25rem; + + .card { + display: inline-block; + width: 100%; // Don't let them exceed the column width + } +} diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss index f700678..c5a7fdf 100644 --- a/assets/stylesheets/bootstrap/_carousel.scss +++ b/assets/stylesheets/bootstrap/_carousel.scss @@ -1,8 +1,3 @@ -// -// Carousel -// -------------------------------------------------- - - // Wrapper for the slide container and indicators .carousel { position: relative; @@ -10,42 +5,42 @@ .carousel-inner { position: relative; - overflow: hidden; width: 100%; + overflow: hidden; - > .item { - display: none; + > .carousel-item { position: relative; - @include transition(.6s ease-in-out left); + display: none; + transition: .6s ease-in-out left; // Account for jankitude on images > img, > a > img { - @include img-responsive; + @extend .img-responsive; line-height: 1; } // WebKit CSS3 transforms for supported devices @media all and (transform-3d), (-webkit-transform-3d) { - @include transition-transform(0.6s ease-in-out); - @include backface-visibility(hidden); - @include perspective(1000px); + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; &.next, &.active.right { - @include translate3d(100%, 0, 0); left: 0; + transform: translate3d(100%, 0, 0); } &.prev, &.active.left { - @include translate3d(-100%, 0, 0); left: 0; + transform: translate3d(-100%, 0, 0); } &.next.left, &.prev.right, &.active { - @include translate3d(0, 0, 0); left: 0; + transform: translate3d(0, 0, 0); } } } @@ -84,23 +79,24 @@ > .active.right { left: 100%; } - } + +// // Left/right controls for nav -// --------------------------- +// .carousel-control { position: absolute; top: 0; - left: 0; bottom: 0; + left: 0; width: $carousel-control-width; - @include opacity($carousel-control-opacity); font-size: $carousel-control-font-size; color: $carousel-control-color; text-align: center; text-shadow: $carousel-text-shadow; + opacity: $carousel-control-opacity; // We can't have this transition here because WebKit cancels the carousel // animation if you trip this while in the middle of another animation. @@ -109,62 +105,54 @@ @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); } &.right { - left: auto; right: 0; + left: auto; @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); } // Hover/focus state - &:hover, - &:focus { - outline: 0; + @include hover-focus { color: $carousel-control-color; text-decoration: none; - @include opacity(.9); + outline: 0; + opacity: .9; } // Toggles .icon-prev, - .icon-next, - .glyphicon-chevron-left, - .glyphicon-chevron-right { + .icon-next { position: absolute; top: 50%; - margin-top: -10px; z-index: 5; display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; } - .icon-prev, - .glyphicon-chevron-left { + .icon-prev { left: 50%; margin-left: -10px; } - .icon-next, - .glyphicon-chevron-right { + .icon-next { right: 50%; margin-right: -10px; } - .icon-prev, - .icon-next { - width: 20px; - height: 20px; - line-height: 1; - font-family: serif; - } - .icon-prev { &:before { - content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) } } .icon-next { &:before { - content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + 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 @@ -176,68 +164,65 @@ left: 50%; z-index: 15; width: 60%; - margin-left: -30%; padding-left: 0; - list-style: none; + margin-left: -30%; text-align: center; + list-style: none; li { display: inline-block; - width: 10px; + width: 10px; height: 10px; margin: 1px; text-indent: -999px; - border: 1px solid $carousel-indicator-border-color; - border-radius: 10px; cursor: pointer; - - // IE8-9 hack for event handling + // IE9 hack for event handling // - // Internet Explorer 8-9 does not support clicks on elements without a set + // Internet Explorer 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 + border: 1px solid $carousel-indicator-border-color; + border-radius: 10px; } .active { - margin: 0; - width: 12px; + width: 12px; height: 12px; + margin: 0; background-color: $carousel-indicator-active-bg; } } + // Optional captions -// ----------------------------- -// Hidden by default for smaller viewports +// +// Hidden by default for smaller viewports. + .carousel-caption { position: absolute; - left: 15%; right: 15%; bottom: 20px; + left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: $carousel-caption-color; text-align: center; text-shadow: $carousel-text-shadow; - & .btn { + + .btn { text-shadow: none; // No shadow for button elements in carousel-caption } } -// Scale up controls for tablets and up -@media screen and (min-width: $screen-sm-min) { +// +// Responsive variations +// +@include media-breakpoint-up(sm) { // Scale up the controls a smidge .carousel-control { - .glyphicon-chevron-left, - .glyphicon-chevron-right, .icon-prev, .icon-next { width: 30px; @@ -245,11 +230,9 @@ margin-top: -15px; font-size: 30px; } - .glyphicon-chevron-left, .icon-prev { margin-left: -15px; } - .glyphicon-chevron-right, .icon-next { margin-right: -15px; } @@ -257,8 +240,8 @@ // Show and left align the captions .carousel-caption { - left: 20%; right: 20%; + left: 20%; padding-bottom: 30px; } diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss index 3b74d8a..89e68a3 100644 --- a/assets/stylesheets/bootstrap/_close.scss +++ b/assets/stylesheets/bootstrap/_close.scss @@ -1,8 +1,3 @@ -// -// Close icons -// -------------------------------------------------- - - .close { float: right; font-size: ($font-size-base * 1.5); @@ -10,17 +5,14 @@ line-height: 1; color: $close-color; text-shadow: $close-text-shadow; - @include opacity(.2); + opacity: .2; - &:hover, - &:focus { + @include hover-focus { color: $close-color; text-decoration: none; cursor: pointer; - @include opacity(.5); + opacity: .5; } - - // [converter] extracted button& to button.close } // Additional properties for button version diff --git a/assets/stylesheets/bootstrap/_code.scss b/assets/stylesheets/bootstrap/_code.scss index caa5f06..0de67d9 100644 --- a/assets/stylesheets/bootstrap/_code.scss +++ b/assets/stylesheets/bootstrap/_code.scss @@ -1,8 +1,3 @@ -// -// Code (inline and block) -// -------------------------------------------------- - - // Inline and block code styles code, kbd, @@ -13,50 +8,44 @@ samp { // Inline code code { - padding: 2px 4px; + padding: .2rem .4rem; font-size: 90%; color: $code-color; background-color: $code-bg; - border-radius: $border-radius-base; + @include border-radius($border-radius); } // User input typically entered via keyboard kbd { - padding: 2px 4px; + padding: .2rem .4rem; 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); + @include border-radius($border-radius-sm); + @include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25)); kbd { padding: 0; font-size: 100%; font-weight: bold; - box-shadow: none; + @include box-shadow(none); } } // Blocks of code pre { display: block; - padding: (($line-height-computed - 1) / 2); - margin: 0 0 ($line-height-computed / 2); - font-size: ($font-size-base - 1); // 14px to 13px - line-height: $line-height-base; - word-break: break-all; - word-wrap: break-word; + margin-top: 0; + margin-bottom: 1rem; + font-size: 90%; + line-height: $line-height; color: $pre-color; - background-color: $pre-bg; - border: 1px solid $pre-border-color; - border-radius: $border-radius-base; // Account for some code outputs that place code tags in pre tags code { padding: 0; font-size: inherit; color: inherit; - white-space: pre-wrap; background-color: transparent; border-radius: 0; } diff --git a/assets/stylesheets/bootstrap/_component-animations.scss b/assets/stylesheets/bootstrap/_component-animations.scss deleted file mode 100644 index ca3b43c..0000000 --- a/assets/stylesheets/bootstrap/_component-animations.scss +++ /dev/null @@ -1,37 +0,0 @@ -// -// 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; - @include transition(opacity .15s linear); - &.in { - opacity: 1; - } -} - -.collapse { - display: none; - - &.in { display: block; } - // [converter] extracted tr&.in to tr.collapse.in - // [converter] extracted tbody&.in to tbody.collapse.in -} - -tr.collapse.in { display: table-row; } - -tbody.collapse.in { display: table-row-group; } - -.collapsing { - position: relative; - height: 0; - overflow: hidden; - @include transition-property(height, visibility); - @include transition-duration(.35s); - @include transition-timing-function(ease); -} diff --git a/assets/stylesheets/bootstrap/_custom-forms.scss b/assets/stylesheets/bootstrap/_custom-forms.scss new file mode 100644 index 0000000..ec211ac --- /dev/null +++ b/assets/stylesheets/bootstrap/_custom-forms.scss @@ -0,0 +1,226 @@ +// Embedded icons from Open Iconic. +// Released under MIT and copyright 2014 Waybury. +// http://useiconic.com/open + + +// Checkboxes and radios +// +// Base class takes care of all the key behavioral aspects. + +.c-input { + position: relative; + display: inline; + padding-left: 1.5rem; + color: #555; + cursor: pointer; + + > input { + position: absolute; + z-index: -1; // Put the input behind the label so it doesn't overlay text + opacity: 0; + + &:focus ~ .c-indicator { + @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9); + } + + &:checked ~ .c-indicator { + color: #fff; + background-color: #0074d9; + @include box-shadow(none); + } + + &:active ~ .c-indicator { + color: #fff; + background-color: #84c6ff; + @include box-shadow(none); + } + } + + + .c-input { + margin-left: 1rem; + } +} + +// Custom indicator +// +// Generates a shadow element to create our makeshift checkbox/radio background. + +.c-indicator { + position: absolute; + top: 0; + left: 0; + display: block; + width: 1rem; + height: 1rem; + font-size: 65%; + line-height: 1rem; + color: #eee; + text-align: center; + user-select: none; + background-color: #eee; + background-repeat: no-repeat; + background-position: center center; + background-size: 50% 50%; + @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1)); +} + +// Checkboxes +// +// Tweak just a few things for checkboxes. + +.c-checkbox { + .c-indicator { + border-radius: .25rem; + } + + input:checked ~ .c-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); + } + + input:indeterminate ~ .c-indicator { + background-color: #0074d9; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K); + @include box-shadow(none); + } +} + +// Radios +// +// Tweak just a few things for radios. + +.c-radio { + .c-indicator { + border-radius: 50%; + } + + input:checked ~ .c-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); + } +} + + +// Layout options +// +// By default radios and checkboxes are `inline-block` with no additional spacing +// set. Use these optional classes to tweak the layout. + +.c-inputs-stacked { + .c-input { + display: inline; + + &:after { + display: block; + margin-bottom: .25rem; + content: ""; + } + + + .c-input { + margin-left: 0; + } + } +} + + +// Select +// +// Replaces the browser default select with a custom one, mostly pulled from +// http://primercss.io. + +.c-select { + display: inline-block; + max-width: 100%; + padding: .375rem 1.75rem .375rem .75rem; + vertical-align: middle; + background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center; + background-size: 8px 10px; + border: 1px solid $input-border; + + // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec. + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + // IE9 hacks to hide the background-image and reduce padding + padding-right: .75rem \9; + background-image: none \9; + + &:focus { + outline: none; + border-color: #51a7e8; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); + } + + // Hides the default caret in IE11 + &::-ms-expand { + opacity: 0; + } +} + +.c-select-sm { + padding-top: 3px; + padding-bottom: 3px; + font-size: 12px; + + &:not([multiple]) { + height: 26px; + min-height: 26px; + } +} + + +// File +// +// Custom file input. + +.file { + position: relative; + display: inline-block; + height: 2.5rem; + cursor: pointer; +} +.file input { + min-width: 14rem; + margin: 0; + filter: alpha(opacity=0); + opacity: 0; +} +.file-custom { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 5; + height: 2.5rem; + padding: .5rem 1rem; + line-height: 1.5; + color: #555; + user-select: none; + background-color: #fff; + border: .075rem solid #ddd; + border-radius: .25rem; + box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05); +} +.file-custom:after { + content: "Choose file..."; +} +.file-custom:before { + position: absolute; + top: -.075rem; + right: -.075rem; + bottom: -.075rem; + z-index: 6; + display: block; + height: 2.5rem; + padding: .5rem 1rem; + line-height: 1.5; + color: #555; + content: "Browse"; + background-color: #eee; + border: .075rem solid #ddd; + border-radius: 0 .25rem .25rem 0; +} + +// Focus state +.file input:focus ~ .file-custom { + box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; +} diff --git a/assets/stylesheets/bootstrap/_dropdowns.scss b/assets/stylesheets/bootstrap/_dropdown.scss index aac8459..d3588d2 100644 --- a/assets/stylesheets/bootstrap/_dropdowns.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -1,30 +1,27 @@ -// -// Dropdown menus -// -------------------------------------------------- - - -// Dropdown arrow/caret -.caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - 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; +.dropdown-toggle { + // Generate the caret automatically + &:after { + display: inline-block; + width: 0; + height: 0; + margin-left: .25rem; + vertical-align: middle; + content: ""; + border-top: $caret-width solid; + border-right: $caret-width solid transparent; + border-left: $caret-width solid transparent; + } + + // Prevent the focus on the dropdown toggle when closing dropdowns + &:focus { + outline: 0; + } } // The dropdown menu (ul) @@ -38,82 +35,69 @@ min-width: 160px; 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) + list-style: none; background-color: $dropdown-bg; - border: 1px solid $dropdown-fallback-border; // IE8 fallback + background-clip: padding-box; border: 1px solid $dropdown-border; - border-radius: $border-radius-base; + @include border-radius($border-radius); @include box-shadow(0 6px 12px rgba(0,0,0,.175)); - 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; - } - - // Dividers (basically an hr) within the dropdown - .divider { - @include nav-divider($dropdown-divider-bg); - } +} - // Links within the dropdown menu - > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: $line-height-base; - color: $dropdown-link-color; - white-space: nowrap; // prevent links from randomly breaking onto new lines - } +// Dividers (basically an hr) within the dropdown +.dropdown-divider { + @include nav-divider($dropdown-divider-bg); } -// Hover/Focus state -.dropdown-menu > li > a { - &:hover, - &:focus { - text-decoration: none; +// Links, buttons, and more within the dropdown menu +.dropdown-item { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: $line-height; + color: $dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + + // For `<button>`s + text-align: inherit; + width: 100%; + background: none; + border: 0; + + @include hover-focus { color: $dropdown-link-hover-color; + text-decoration: none; background-color: $dropdown-link-hover-bg; } -} -// Active state -.dropdown-menu > .active > a { - &, - &:hover, - &:focus { - color: $dropdown-link-active-color; - text-decoration: none; - outline: 0; - background-color: $dropdown-link-active-bg; + // Active state + &.active { + @include plain-hover-focus { + color: $dropdown-link-active-color; + text-decoration: none; + background-color: $dropdown-link-active-bg; + outline: 0; + } } -} - -// Disabled state -// -// Gray out text and ensure the hover/focus state remains gray -.dropdown-menu > .disabled > a { - &, - &:hover, - &:focus { - color: $dropdown-link-disabled-color; - } + // Disabled state + // + // Gray out text and ensure the hover/focus state remains gray + &.disabled { + @include plain-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 - @include reset-filter; - cursor: $cursor-disabled; + // Nuke hover/focus effects + @include hover-focus { + text-decoration: none; + cursor: $cursor-disabled; + background-color: transparent; + background-image: none; // Remove CSS gradient + @include reset-filter(); + } } } @@ -135,8 +119,8 @@ // 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; + left: auto; // Reset the default from `.dropdown-menu` } // 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 @@ -145,16 +129,16 @@ // 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; + left: 0; } // Dropdown section headers .dropdown-header { display: block; padding: 3px 20px; - font-size: $font-size-small; - line-height: $line-height-base; + font-size: $font-size-sm; + line-height: $line-height; color: $dropdown-header-color; white-space: nowrap; // as with > li > a } @@ -162,10 +146,10 @@ // Backdrop to catch body clicks on mobile, etc. .dropdown-backdrop { position: fixed; - left: 0; + top: 0; right: 0; bottom: 0; - top: 0; + left: 0; z-index: ($zindex-dropdown - 10); } @@ -184,11 +168,11 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { - border-top: 0; - border-bottom: $caret-width-base dashed; - border-bottom: $caret-width-base solid \9; // IE8 content: ""; + border-top: 0; + border-bottom: $caret-width solid; } + // Different positioning for bottom up menu .dropdown-menu { top: auto; @@ -196,21 +180,3 @@ margin-bottom: 2px; } } - - -// Component alignment -// -// Reiterate per navbar.less and the modified component alignment there. - -@media (min-width: $grid-float-breakpoint) { - .navbar-right { - .dropdown-menu { - right: 0; left: auto; - } - // Necessary for overrides of the default right aligned menu. - // Will remove come v4 in all likelihood. - .dropdown-menu-left { - left: 0; right: auto; - } - } -} diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss index de4befd..9888da1 100644 --- a/assets/stylesheets/bootstrap/_forms.scss +++ b/assets/stylesheets/bootstrap/_forms.scss @@ -1,183 +1,96 @@ // -// Forms -// -------------------------------------------------- - - -// 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 { - display: block; - width: 100%; - padding: 0; - margin-bottom: $line-height-computed; - font-size: ($font-size-base * 1.5); - line-height: inherit; - color: $legend-color; - border: 0; - 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; -} - - -// Normalize form controls +// Textual 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"] { - @include box-sizing(border-box); -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - margin-top: 1px \9; // IE8-9 - line-height: normal; -} - -input[type="file"] { - display: block; -} - -// Make range inputs behave like textual form controls -input[type="range"] { - display: block; - width: 100%; -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for file, radio, and checkbox -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - @include tab-focus; -} - -// 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; -} - - -// 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; + // // Make inputs at least the height of their button counterpart (base line-height + padding + border) + // height: $input-height; + padding: $input-padding-y $input-padding-x; font-size: $font-size-base; - line-height: $line-height-base; + line-height: $line-height; 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 <select>s in some browsers, due to the limited stylability of <select>s in CSS. - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214. + background-image: none; + border: $border-width solid $input-border; + // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. + @include border-radius($input-border-radius); + @include box-shadow($input-box-shadow); @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); + // Make inputs at least the height of their button counterpart (base line-height + padding + border). + // Only apply the height to textual inputs and some selcts. + // &:not(textarea), + // &:not(select[size]), + // &:not(select[multiple]) { + // height: $input-height; + // } + + // Unstyle the caret on `<select>`s in IE10+. + &::-ms-expand { + background-color: transparent; + border: 0; + } + // Customize the `:focus` state to imitate native WebKit styles. - @include form-control-focus; + @include form-control-focus(); // Placeholder - @include placeholder; + &::placeholder { + color: $input-color-placeholder; + // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. + opacity: 1; + } // Disabled and read-only inputs // // HTML5 says that controls under a fieldset > legend:first-child won't be // disabled if the fieldset is disabled. Due to implementation difficulty, we // don't honor that edge case; we style them as disabled anyway. - &[disabled], + &:disabled, &[readonly], fieldset[disabled] & { background-color: $input-bg-disabled; - opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 + // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. + opacity: 1; } &[disabled], fieldset[disabled] & { cursor: $cursor-disabled; } - - // [converter] extracted textarea& to textarea.form-control } -// Reset height for `textarea`s -textarea.form-control { - height: auto; + +// Make file inputs better match text inputs by forcing them to new lines. +.form-control-file, +.form-control-range { + display: block; } -// Search inputs in iOS // -// This overrides the extra rounded corners on search inputs in iOS so that our -// `.form-control` class can properly style them. Note that this cannot simply -// be added to `.form-control` as it's not specific enough. For details, see -// https://github.com/twbs/bootstrap/issues/11586. +// Labels +// -input[type="search"] { - -webkit-appearance: none; +// For use with horizontal and inline forms, when you need the label text to +// align with the form controls. +.form-control-label { + padding: ($input-padding-y + $border-width) $input-padding-x; + margin-bottom: 0; // Override the `<label>` default } +// Todo: clear this up + // Special styles for iOS temporal inputs // // In Mobile Safari, setting `display: block` on temporal inputs causes the // text within the input to become vertically misaligned. As a workaround, we // set a pixel line-height that matches the given height of the input, but only // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 -// -// Note that as of 8.3, iOS doesn't support `datetime` or `week`. @media screen and (-webkit-min-device-pixel-ratio: 0) { input[type="date"], @@ -185,22 +98,68 @@ input[type="search"] { input[type="datetime-local"], input[type="month"] { &.form-control { - line-height: $input-height-base; + line-height: $input-height; } &.input-sm, - .input-group-sm & { - line-height: $input-height-small; + .input-group-sm &.form-control { + line-height: $input-height-sm; } &.input-lg, - .input-group-lg & { - line-height: $input-height-large; + .input-group-lg &.form-control { + line-height: $input-height-lg; } } } +// Static form control text +// +// Apply class to an element to make any string of text align with labels in a +// horizontal form layout. + +.form-control-static { + min-height: $input-height; + // Size it appropriately next to real form controls + padding-top: ($input-padding-y + $border-width); + padding-bottom: ($input-padding-y + $border-width); + // Remove default margin from `p` + margin-bottom: 0; + + &.form-control-sm, + &.form-control-lg { + padding-right: 0; + padding-left: 0; + } +} + + +// Form control sizing +// +// Build on `.form-control` with modifier classes to decrease or increase the +// height and font-size of form controls. +// +// The `.form-group-* form-control` variations are sadly duplicated to avoid the +// issue documented in https://github.com/twbs/bootstrap/issues/15074. + +.form-control-sm { + // height: $input-height-sm; + padding: $input-padding-y-sm $input-padding-x-sm; + font-size: $font-size-sm; + line-height: $line-height-sm; + border-radius: $input-border-radius-sm; +} + +.form-control-lg { + // height: $input-height-lg; + padding: $input-padding-y-lg $input-padding-x-lg; + font-size: $font-size-lg; + line-height: $line-height-lg; + border-radius: $input-border-radius-lg; +} + + // Form groups // // Designed to help with the organization and spacing of vertical forms. For @@ -219,15 +178,19 @@ input[type="search"] { .checkbox { position: relative; display: block; - margin-top: 10px; - margin-bottom: 10px; + // margin-top: ($spacer * .75); + margin-bottom: ($spacer * .75); label { - min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text - padding-left: 20px; + padding-left: 1.25rem; margin-bottom: 0; font-weight: normal; cursor: pointer; + + // When there's no labels, don't position the input. + input:only-child { + position: static; + } } } .radio input[type="radio"], @@ -235,13 +198,15 @@ input[type="search"] { .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { position: absolute; - margin-left: -20px; - margin-top: 4px \9; + margin-top: .25rem; + // margin-top: 4px \9; + margin-left: -1.25rem; } .radio + .radio, .checkbox + .checkbox { - margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing + // Move up sibling radios or checkboxes for tighter spacing + margin-top: -.25rem; } // Radios and checkboxes on same line @@ -249,16 +214,16 @@ input[type="search"] { .checkbox-inline { position: relative; display: inline-block; - padding-left: 20px; + padding-left: 1.25rem; margin-bottom: 0; - vertical-align: middle; font-weight: normal; + vertical-align: middle; cursor: pointer; } .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; - margin-left: 10px; // space out consecutive inline controls + margin-left: .75rem; } // Apply same disabled cursor tweak as for inputs @@ -267,7 +232,7 @@ input[type="search"] { // Note: Neither radios nor checkboxes can be readonly. input[type="radio"], input[type="checkbox"] { - &[disabled], + &:disabled, &.disabled, fieldset[disabled] & { cursor: $cursor-disabled; @@ -293,163 +258,121 @@ input[type="checkbox"] { } -// Static form control text +// Form control feedback states // -// Apply class to a `p` element to make any string of text align with labels in -// a horizontal form layout. - -.form-control-static { - // Size it appropriately next to real form controls - padding-top: ($padding-base-vertical + 1); - padding-bottom: ($padding-base-vertical + 1); - // Remove default margin from `p` - margin-bottom: 0; - min-height: ($line-height-computed + $font-size-base); +// Apply contextual and semantic states to individual form controls. - &.input-lg, - &.input-sm { - padding-left: 0; - padding-right: 0; - } +.form-control-success, +.form-control-warning, +.form-control-error { + padding-right: ($input-padding-x * 3); + background-position: center right ($input-height * .25); + background-size: ($input-height * .65) ($input-height * .65); + background-repeat: no-repeat; } +// Form validation states +.has-success { + @include form-control-validation(success, $brand-success); -// Form control sizing -// -// Build on `.form-control` with modifier classes to decrease or increase the -// height and font-size of form controls. -// -// The `.form-group-* form-control` variations are sadly duplicated to avoid the -// issue documented in https://github.com/twbs/bootstrap/issues/15074. - -@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $input-border-radius-small); -.form-group-sm { - .form-control { - height: $input-height-small; - padding: $padding-small-vertical $padding-small-horizontal; - font-size: $font-size-small; - line-height: $line-height-small; - border-radius: $input-border-radius-small; - } - select.form-control { - height: $input-height-small; - line-height: $input-height-small; - } - textarea.form-control, - select[multiple].form-control { - height: auto; - } - .form-control-static { - height: $input-height-small; - min-height: ($line-height-computed + $font-size-small); - padding: ($padding-small-vertical + 1) $padding-small-horizontal; - font-size: $font-size-small; - line-height: $line-height-small; + .form-control-success { + background-image: url($form-icon-success); } } -@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $input-border-radius-large); -.form-group-lg { - .form-control { - height: $input-height-large; - padding: $padding-large-vertical $padding-large-horizontal; - font-size: $font-size-large; - line-height: $line-height-large; - border-radius: $input-border-radius-large; - } - select.form-control { - height: $input-height-large; - line-height: $input-height-large; - } - textarea.form-control, - select[multiple].form-control { - height: auto; - } - .form-control-static { - height: $input-height-large; - min-height: ($line-height-computed + $font-size-large); - padding: ($padding-large-vertical + 1) $padding-large-horizontal; - font-size: $font-size-large; - line-height: $line-height-large; +.has-warning { + @include form-control-validation(warning, $brand-warning); + + .form-control-warning { + background-image: url($form-icon-warning); } } +.has-error { + @include form-control-validation(error, $brand-danger); -// Form control feedback states -// -// Apply contextual and semantic states to individual form controls. - -.has-feedback { - // Enable absolute positioning - position: relative; - - // Ensure icons don't overlap text - .form-control { - padding-right: ($input-height-base * 1.25); + .form-control-error { + background-image: url($form-icon-error); } } -// Feedback icon (requires .glyphicon classes) -.form-control-feedback { - position: absolute; - top: 0; - right: 0; - z-index: 2; // Ensure icon is above input groups - display: block; - width: $input-height-base; - height: $input-height-base; - line-height: $input-height-base; - 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: $input-height-large; - height: $input-height-large; - line-height: $input-height-large; -} -.input-sm + .form-control-feedback, -.input-group-sm + .form-control-feedback, -.form-group-sm .form-control + .form-control-feedback { - width: $input-height-small; - height: $input-height-small; - line-height: $input-height-small; -} -// Feedback states -.has-success { - @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); -} -.has-warning { - @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); -} -.has-error { - @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); -} -// Reposition feedback icon if input has visible label above -.has-feedback label { - & ~ .form-control-feedback { - top: ($line-height-computed + 5); // Height of the `label` and its margin - } - &.sr-only ~ .form-control-feedback { - top: 0; - } -} + +// .form-control-success { +// background-image: url("#{$form-icon-success}"); +// border-color: $brand-success; +// } +// +// .form-control-warning { +// background-image: url("#{$form-icon-warning}"); +// border-color: $brand-warning; +// } +// +// .form-control-error { +// background-image: url("#{$form-icon-danger}"); +// border-color: $brand-danger; +// } -// Help text +// .has-feedback { +// // Enable absolute positioning +// position: relative; // -// Apply to any element you wish to create light text for placement immediately -// below a form control. Use for general help, formatting, or instructional text. - -.help-block { - display: block; // account for any element using help-block - margin-top: 5px; - margin-bottom: 10px; - color: lighten($text-color, 25%); // lighten the text some for contrast -} +// // Ensure icons don't overlap text +// .form-control { +// padding-right: ($input-height * 1.25); +// } +// } +// // Feedback icon +// .form-control-feedback { +// position: absolute; +// top: 0; +// right: 0; +// z-index: 2; // Ensure icon is above input groups +// display: block; +// width: $input-height; +// height: $input-height; +// line-height: $input-height; +// text-align: center; +// pointer-events: none; +// } +// .input-lg + .form-control-feedback, +// .input-group-lg + .form-control-feedback { +// width: $input-height-lg; +// height: $input-height-lg; +// line-height: $input-height-lg; +// } +// .input-sm + .form-control-feedback, +// .input-group-sm + .form-control-feedback { +// width: $input-height-sm; +// height: $input-height-sm; +// line-height: $input-height-sm; +// } +// +// // Form validation states +// .has-success { +// @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); +// } +// .has-warning { +// @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); +// } +// .has-error { +// @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); +// } +// +// // Reposition feedback icon if input has visible label above +// .has-feedback label { +// +// ~ .form-control-feedback { +// // TODO: redo this since we nuked the `$line-height-computed` +// top: 0; // Height of the `label` and its margin +// } +// +// &.sr-only ~ .form-control-feedback { +// top: 0; +// } +// } // Inline forms @@ -463,11 +386,10 @@ input[type="checkbox"] { // // Heads up! This is mixin-ed into `.navbar-form` in navbars.less. -// [converter] extracted from `.form-inline` for libsass compatibility -@mixin form-inline { +.form-inline { // Kick in the inline - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(sm) { // Inline-block all the things for "inline" .form-group { display: inline-block; @@ -533,79 +455,3 @@ input[type="checkbox"] { } } } -// [converter] extracted as `@mixin form-inline` for libsass compatibility -.form-inline { - @include form-inline; -} - - - -// Horizontal forms -// -// Horizontal forms are built on grid classes and allow you to create forms with -// labels on the left and inputs on the right. - -.form-horizontal { - - // Consistent vertical alignment of radios and checkboxes - // - // Labels also get some reset styles, but that is scoped to a media query below. - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - margin-top: 0; - margin-bottom: 0; - padding-top: ($padding-base-vertical + 1); // Default padding plus a border - } - // Account for padding we're adding to ensure the alignment and of help text - // and other content below items - .radio, - .checkbox { - min-height: ($line-height-computed + ($padding-base-vertical + 1)); - } - - // Make form groups behave like rows - .form-group { - @include make-row; - } - - // Reset spacing and right align labels, but scope to media queries so that - // labels on narrow viewports stack the same as a default form example. - @media (min-width: $screen-sm-min) { - .control-label { - text-align: right; - margin-bottom: 0; - padding-top: ($padding-base-vertical + 1); // Default padding plus a border - } - } - - // Validation states - // - // Reposition the icon because it's now within a grid column and columns have - // `position: relative;` on them. Also accounts for the grid gutter padding. - .has-feedback .form-control-feedback { - right: floor(($grid-gutter-width / 2)); - } - - // Form group sizes - // - // Quick utility class for applying `.input-lg` and `.input-sm` styles to the - // inputs and labels within a `.form-group`. - .form-group-lg { - @media (min-width: $screen-sm-min) { - .control-label { - padding-top: (($padding-large-vertical * $line-height-large) + 1); - font-size: $font-size-large; - } - } - } - .form-group-sm { - @media (min-width: $screen-sm-min) { - .control-label { - padding-top: ($padding-small-vertical + 1); - font-size: $font-size-small; - } - } - } -} diff --git a/assets/stylesheets/bootstrap/_glyphicons.scss b/assets/stylesheets/bootstrap/_glyphicons.scss deleted file mode 100644 index 385340b..0000000 --- a/assets/stylesheets/bootstrap/_glyphicons.scss +++ /dev/null @@ -1,307 +0,0 @@ -// -// Glyphicons for Bootstrap -// -// Since icons are fonts, they can be placed anywhere text is placed and are -// thus automatically sized to match the surrounding child. To use, create an -// inline element with the appropriate classes, like so: -// -// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a> - -@at-root { - // Import the fonts - @font-face { - font-family: 'Glyphicons Halflings'; - src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot')); - src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'), - url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'), - url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'), - url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'), - url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg'); - } -} - -// Catchall baseclass -.glyphicon { - position: relative; - top: 1px; - display: inline-block; - font-family: 'Glyphicons Halflings'; - font-style: normal; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -// Individual icons -.glyphicon-asterisk { &:before { content: "\2a"; } } -.glyphicon-plus { &:before { content: "\2b"; } } -.glyphicon-euro, -.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"; } } -// The following 2 Glyphicons are omitted for the time being because -// they currently use Unicode codepoints that are outside the -// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle -// non-BMP codepoints in CSS string escapes, and thus can't display these two icons. -// Notably, the bug affects some older versions of the Android Browser. -// More info: https://github.com/twbs/bootstrap/issues/10106 -// .glyphicon-door { &:before { content: "\1f6aa"; } } -// .glyphicon-key { &:before { content: "\1f511"; } } -.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"; } } diff --git a/assets/stylesheets/bootstrap/_grid.scss b/assets/stylesheets/bootstrap/_grid.scss index b15ca27..b71d5b0 100644 --- a/assets/stylesheets/bootstrap/_grid.scss +++ b/assets/stylesheets/bootstrap/_grid.scss @@ -1,23 +1,15 @@ -// -// Grid system -// -------------------------------------------------- - - // Container widths // // Set the container width, and override it for fixed navbars in media queries. .container { - @include container-fixed; + @include make-container(); - @media (min-width: $screen-sm-min) { - width: $container-sm; - } - @media (min-width: $screen-md-min) { - width: $container-md; - } - @media (min-width: $screen-lg-min) { - width: $container-lg; + // For each breakpoint, define the maximum width of the container in a media query + @each $breakpoint, $container-max-width in $container-max-widths { + @include media-breakpoint-up($breakpoint) { + max-width: $container-max-width; + } } } @@ -28,7 +20,7 @@ // width for fluid, full width layouts. .container-fluid { - @include container-fixed; + @include make-container(); } @@ -37,7 +29,7 @@ // Rows contain and clear the floats of your columns. .row { - @include make-row; + @include make-row(); } @@ -45,40 +37,89 @@ // // Common styles for small and large grid columns -@include make-grid-columns; +@include make-grid-columns(); -// Extra small grid +// Flex variation // -// Columns, offsets, pushes, and pulls for extra small devices like -// smartphones. +// Custom styles for additional flex alignment options. -@include make-grid(xs); +@if $enable-flex { + // Flex column reordering -// Small grid -// -// Columns, offsets, pushes, and pulls for the small device range, from phones -// to tablets. + .col-xs-first { order: -1; } + .col-xs-last { order: 1; } -@media (min-width: $screen-sm-min) { - @include make-grid(sm); -} + @include media-breakpoint-up(sm) { + .col-sm-first { order: -1; } + .col-sm-last { order: 1; } + } + @include media-breakpoint-up(md) { + .col-md-first { order: -1; } + .col-md-last { order: 1; } + } + @include media-breakpoint-up(lg) { + .col-lg-first { order: -1; } + .col-lg-last { order: 1; } + } + @include media-breakpoint-up(xl) { + .col-xl-first { order: -1; } + .col-xl-last { order: 1; } + } + // Alignment for every column in row -// Medium grid -// -// Columns, offsets, pushes, and pulls for the desktop device range. + .row-xs-top { align-items: flex-start; } + .row-xs-center { align-items: center; } + .row-xs-bottom { align-items: flex-end; } -@media (min-width: $screen-md-min) { - @include make-grid(md); -} + @include media-breakpoint-up(sm) { + .row-sm-top { align-items: flex-start; } + .row-sm-center { align-items: center; } + .row-sm-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(md) { + .row-md-top { align-items: flex-start; } + .row-md-center { align-items: center; } + .row-md-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(lg) { + .row-lg-top { align-items: flex-start; } + .row-lg-center { align-items: center; } + .row-lg-bottom { align-items: flex-end; } + } + @include media-breakpoint-up(xl) { + .row-xl-top { align-items: flex-start; } + .row-xl-center { align-items: center; } + .row-xl-bottom { align-items: flex-end; } + } + // Alignment per column -// Large grid -// -// Columns, offsets, pushes, and pulls for the large desktop device range. + .col-xs-top { align-self: flex-start; } + .col-xs-center { align-self: center; } + .col-xs-bottom { align-self: flex-end; } + + @include media-breakpoint-up(sm) { + .col-sm-top { align-self: flex-start; } + .col-sm-center { align-self: center; } + .col-sm-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(md) { + .col-md-top { align-self: flex-start; } + .col-md-center { align-self: center; } + .col-md-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(lg) { + .col-lg-top { align-self: flex-start; } + .col-lg-center { align-self: center; } + .col-lg-bottom { align-self: flex-end; } + } + @include media-breakpoint-up(xl) { + .col-xl-top { align-self: flex-start; } + .col-xl-center { align-self: center; } + .col-xl-bottom { align-self: flex-end; } + } -@media (min-width: $screen-lg-min) { - @include make-grid(lg); } diff --git a/assets/stylesheets/bootstrap/_images.scss b/assets/stylesheets/bootstrap/_images.scss new file mode 100644 index 0000000..dbdd858 --- /dev/null +++ b/assets/stylesheets/bootstrap/_images.scss @@ -0,0 +1,28 @@ +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive(); +} + +// Rounded corners +.img-rounded { + @include border-radius($border-radius-lg); +} + +// Image thumbnails +.img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + transition: all .2s ease-in-out; + @include box-shadow(0 1px 2px rgba(0,0,0,.075)); + + // Keep them at most 100% wide + @include img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; +} diff --git a/assets/stylesheets/bootstrap/_input-groups.scss b/assets/stylesheets/bootstrap/_input-group.scss index 12f0c42..df8aa10 100644 --- a/assets/stylesheets/bootstrap/_input-groups.scss +++ b/assets/stylesheets/bootstrap/_input-group.scss @@ -1,19 +1,17 @@ // -// Input groups -// -------------------------------------------------- - // Base styles -// ------------------------- +// + .input-group { - position: relative; // For dropdowns - display: table; - border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table - - // Undo padding and float of grid classes - &[class*="col-"] { - float: none; - padding-left: 0; - padding-right: 0; + position: relative; + + @if $enable-flex { + display: flex; + } @else { + display: table; + // Prevent input groups from inheriting border styles from table cells when + // placed within a table. + border-collapse: separate; } .form-control { @@ -21,17 +19,45 @@ // proper border colors. position: relative; z-index: 2; + @if $enable-flex { + flex: 1; + } @else { + // IE9 fubars the placeholder attribute in text inputs and the arrows on + // select elements in input groups. To fix it, we float the input. Details: + // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 + float: left; + width: 100%; + } + margin-bottom: 0; + } +} + +.input-group-addon, +.input-group-btn, +.input-group .form-control { + @if $enable-flex { + // do nothing + } @else { + display: table-cell; + } - // IE9 fubars the placeholder attribute in text inputs and the arrows on - // select elements in input groups. To fix it, we float the input. Details: - // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 - float: left; + &:not(:first-child):not(:last-child) { + @include border-radius(0); + } +} - width: 100%; - margin-bottom: 0; +.input-group-addon, +.input-group-btn { + @if $enable-flex { + // do nothing + } @else { + width: 1%; } + white-space: nowrap; + vertical-align: middle; // Match the inputs } + // Sizing options // // Remix the default form control sizing classes into new ones for easier @@ -40,38 +66,21 @@ .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { - @extend .input-lg; + @extend .form-control-lg; } .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { - @extend .input-sm; + @extend .form-control-sm; } -// Display as table-cell -// ------------------------- -.input-group-addon, -.input-group-btn, -.input-group .form-control { - display: table-cell; - - &:not(:first-child):not(:last-child) { - border-radius: 0; - } -} -// Addon and addon wrapper for buttons -.input-group-addon, -.input-group-btn { - width: 1%; - white-space: nowrap; - vertical-align: middle; // Match the inputs -} - +// // Text input groups -// ------------------------- +// + .input-group-addon { - padding: $padding-base-vertical $padding-base-horizontal; + padding: $input-padding-y $input-padding-x; font-size: $font-size-base; font-weight: normal; line-height: 1; @@ -79,18 +88,18 @@ text-align: center; background-color: $input-group-addon-bg; border: 1px solid $input-group-addon-border-color; - border-radius: $border-radius-base; + @include border-radius($border-radius); // Sizing - &.input-sm { - padding: $padding-small-vertical $padding-small-horizontal; - font-size: $font-size-small; - border-radius: $border-radius-small; + &.form-control-sm { + padding: $input-padding-y-sm $input-padding-x-sm; + font-size: $font-size-sm; + @include border-radius($border-radius-sm); } - &.input-lg { - padding: $padding-large-vertical $padding-large-horizontal; - font-size: $font-size-large; - border-radius: $border-radius-large; + &.form-control-lg { + padding: $input-padding-x-lg $input-padding-x-lg; + font-size: $font-size-lg; + @include border-radius($border-radius-lg); } // Nuke default margins from checkboxes and radios to vertically center within. @@ -100,7 +109,11 @@ } } + +// // Reset rounded corners +// + .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, @@ -126,8 +139,11 @@ border-left: 0; } + +// // Button input groups -// ------------------------- +// + .input-group-btn { position: relative; // Jankily prevent input button groups from wrapping with `white-space` and @@ -143,9 +159,7 @@ margin-left: -1px; } // Bring the "active" button to the front - &:hover, - &:focus, - &:active { + @include hover-focus-active { z-index: 2; } } diff --git a/assets/stylesheets/bootstrap/_jumbotron.scss b/assets/stylesheets/bootstrap/_jumbotron.scss index 439d23d..97806af 100644 --- a/assets/stylesheets/bootstrap/_jumbotron.scss +++ b/assets/stylesheets/bootstrap/_jumbotron.scss @@ -1,52 +1,22 @@ -// -// Jumbotron -// -------------------------------------------------- - - .jumbotron { - padding-top: $jumbotron-padding; - padding-bottom: $jumbotron-padding; + padding: $jumbotron-padding ($jumbotron-padding / 2); margin-bottom: $jumbotron-padding; - color: $jumbotron-color; background-color: $jumbotron-bg; + @include border-radius($border-radius-lg); +} - h1, - .h1 { - color: $jumbotron-heading-color; - } - - p { - margin-bottom: ($jumbotron-padding / 2); - font-size: $jumbotron-font-size; - font-weight: 200; - } - - > hr { - border-top-color: darken($jumbotron-bg, 10%); - } - - .container &, - .container-fluid & { - border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container - } +.jumbotron-hr { + border-top-color: darken($jumbotron-bg, 10%); +} - .container { - max-width: 100%; +@include media-breakpoint-up(sm) { + .jumbotron { + padding: ($jumbotron-padding * 2) $jumbotron-padding; } +} - @media screen and (min-width: $screen-sm-min) { - padding-top: ($jumbotron-padding * 1.6); - padding-bottom: ($jumbotron-padding * 1.6); - - .container &, - .container-fluid & { - padding-left: ($jumbotron-padding * 2); - padding-right: ($jumbotron-padding * 2); - } - - h1, - .h1 { - font-size: $jumbotron-heading-font-size; - } - } +.jumbotron-fluid { + padding-right: 0; + padding-left: 0; + @include border-radius(0); } diff --git a/assets/stylesheets/bootstrap/_labels.scss b/assets/stylesheets/bootstrap/_labels.scss index 42ed6ea..599f335 100644 --- a/assets/stylesheets/bootstrap/_labels.scss +++ b/assets/stylesheets/bootstrap/_labels.scss @@ -1,10 +1,11 @@ +// Base class // -// Labels -// -------------------------------------------------- +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. .label { - display: inline; - padding: .2em .6em .3em; + display: inline-block; + padding: .25em .4em; font-size: 75%; font-weight: bold; line-height: 1; @@ -12,11 +13,9 @@ text-align: center; white-space: nowrap; vertical-align: baseline; - border-radius: .25em; + @include border-radius(); - // [converter] extracted a& to a.label - - // Empty labels collapse automatically (not available in IE8) + // Empty labels collapse automatically &:empty { display: none; } @@ -30,16 +29,27 @@ // Add hover effects, but only for links a.label { - &:hover, - &:focus { + @include hover-focus { color: $label-link-hover-color; text-decoration: none; cursor: pointer; } } +// Pill labels +// +// Make them extra rounded with a modifier to replace v3's badges. + +.label-pill { + padding-left: .6em; + padding-right: .6em; + border-radius: 1rem; +} + + // Colors -// Contextual variations (linked labels get darker on :hover) +// +// Contextual variations (linked labels get darker on :hover). .label-default { @include label-variant($label-default-bg); diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 7cb83aa..d909022 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_list-group.scss @@ -1,16 +1,11 @@ -// -// List groups -// -------------------------------------------------- - - // Base class // // Easily usable on <ul>, <ol>, or <div>. .list-group { // No need to set list-style: none; since .list-group-item is block level - margin-bottom: 20px; padding-left: 0; // reset padding because ul and ol + margin-bottom: 0; } @@ -21,11 +16,11 @@ .list-group-item { position: relative; display: block; - padding: 10px 15px; + padding: .75rem 1.25rem; // Place the border on the list items and negative margin up for better styling - margin-bottom: -1px; + margin-bottom: -.0625rem; background-color: $list-group-bg; - border: 1px solid $list-group-border; + border: .0625rem solid $list-group-border; // Round the first and last items &:first-child { @@ -37,14 +32,23 @@ } } +.list-group-flush { + .list-group-item { + border-width: .0625rem 0; + border-radius: 0; + } +} + // Interactive list items // -// Use anchor or button elements instead of `li`s or `div`s to create interactive items. -// Includes an extra `.active` modifier class for showing selected items. +// Use anchor or button elements instead of `li`s or `div`s to create interactive +// list items. Includes an extra `.active` modifier class for selected items. a.list-group-item, button.list-group-item { + width: 100%; + text-align: inherit; color: $list-group-link-color; .list-group-item-heading { @@ -52,54 +56,48 @@ button.list-group-item { } // Hover state - &:hover, - &:focus { - text-decoration: none; + @include hover-focus { color: $list-group-link-hover-color; + text-decoration: none; background-color: $list-group-hover-bg; } } -button.list-group-item { - width: 100%; - text-align: left; -} - .list-group-item { // Disabled state - &.disabled, - &.disabled:hover, - &.disabled:focus { - background-color: $list-group-disabled-bg; - color: $list-group-disabled-color; - cursor: $cursor-disabled; - - // Force color to inherit for custom content - .list-group-item-heading { - color: inherit; - } - .list-group-item-text { - color: $list-group-disabled-text-color; + &.disabled { + @include plain-hover-focus { + color: $list-group-disabled-color; + cursor: $cursor-disabled; + background-color: $list-group-disabled-bg; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: $list-group-disabled-text-color; + } } } // Active class on item itself, not parent - &.active, - &.active:hover, - &.active:focus { - z-index: 2; // Place active items above their siblings for proper border styling - color: $list-group-active-color; - background-color: $list-group-active-bg; - border-color: $list-group-active-border; - - // Force color to inherit for custom content - .list-group-item-heading, - .list-group-item-heading > small, - .list-group-item-heading > .small { - color: inherit; - } - .list-group-item-text { - color: $list-group-active-text-color; + &.active { + @include plain-hover-focus { + z-index: 2; // Place active items above their siblings for proper border styling + color: $list-group-active-color; + background-color: $list-group-active-bg; + border-color: $list-group-active-border; + + // Force color to inherit for custom content + .list-group-item-heading, + .list-group-item-heading > small, + .list-group-item-heading > .small { + color: inherit; + } + .list-group-item-text { + color: $list-group-active-text-color; + } } } } diff --git a/assets/stylesheets/bootstrap/_media.scss b/assets/stylesheets/bootstrap/_media.scss index 8c835e8..c92e2b1 100644 --- a/assets/stylesheets/bootstrap/_media.scss +++ b/assets/stylesheets/bootstrap/_media.scss @@ -1,21 +1,45 @@ -.media { - // Proper spacing between instances of .media - margin-top: 15px; +@if $enable-flex { + .media { + display: flex; + margin-bottom: $spacer; + } + .media-body { + flex: 1; + } +} @else { + .media { + margin-top: 15px; - &:first-child { - margin-top: 0; + &:first-child { + margin-top: 0; + } + } + .media, + .media-body { + overflow: hidden; + zoom: 1; + } + .media-body { + width: 10000px; + } + .media-left, + .media-right, + .media-body { + display: table-cell; + vertical-align: top; + } + .media-middle { + vertical-align: middle; + } + .media-bottom { + vertical-align: bottom; } } -.media, -.media-body { - zoom: 1; - overflow: hidden; -} -.media-body { - width: 10000px; -} +// +// Images/elements as the media anchor +// .media-object { display: block; @@ -26,40 +50,34 @@ } } -.media-right, -.media > .pull-right { + +// +// Alignment +// + +.media-right { padding-left: 10px; } -.media-left, -.media > .pull-left { +.media-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; -} +// +// Headings +// -// Reset margins on headings for tighter default spacing .media-heading { margin-top: 0; margin-bottom: 5px; } + +// // Media list variation // -// Undo default ul/ol styles + .media-list { padding-left: 0; list-style: none; diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss index 78cd5aa..35f46fe 100644 --- a/assets/stylesheets/bootstrap/_mixins.scss +++ b/assets/stylesheets/bootstrap/_mixins.scss @@ -1,40 +1,60 @@ -// Mixins -// -------------------------------------------------- +// Toggles +// +// Used in conjunction with global variables to enable certain theme features. + +@mixin border-radius($radius: $border-radius) { + @if $enable-rounded { + border-radius: $radius; + } +} + +@mixin box-shadow($shadow...) { + @if $enable-shadows { + box-shadow: $shadow; + } +} + +@mixin transition($transition...) { + @if $enable-transitions { + transition: $transition; + } +} // Utilities +@import "mixins/breakpoints"; @import "mixins/hide-text"; -@import "mixins/opacity"; +@import "mixins/hover"; @import "mixins/image"; -@import "mixins/labels"; +@import "mixins/label"; @import "mixins/reset-filter"; @import "mixins/resize"; @import "mixins/responsive-visibility"; +@import "mixins/screen-reader"; @import "mixins/size"; @import "mixins/tab-focus"; @import "mixins/reset-text"; @import "mixins/text-emphasis"; -@import "mixins/text-overflow"; -@import "mixins/vendor-prefixes"; +@import "mixins/text-truncate"; -// Components -@import "mixins/alerts"; +// // Components +@import "mixins/alert"; @import "mixins/buttons"; -@import "mixins/panels"; @import "mixins/pagination"; @import "mixins/list-group"; @import "mixins/nav-divider"; @import "mixins/forms"; -@import "mixins/progress-bar"; +@import "mixins/progress"; @import "mixins/table-row"; -// Skins +// // Skins @import "mixins/background-variant"; @import "mixins/border-radius"; @import "mixins/gradients"; -// Layout +// // Layout @import "mixins/clearfix"; @import "mixins/center-block"; -@import "mixins/nav-vertical-align"; +// @import "mixins/navbar-align"; @import "mixins/grid-framework"; @import "mixins/grid"; +@import "mixins/pulls"; diff --git a/assets/stylesheets/bootstrap/_modals.scss b/assets/stylesheets/bootstrap/_modal.scss index 837558e..f034c77 100644 --- a/assets/stylesheets/bootstrap/_modals.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -1,12 +1,9 @@ -// -// Modals -// -------------------------------------------------- - // .modal-open - body class for killing the scroll // .modal - container to scroll within // .modal-dialog - positioning shell for the actual modal // .modal-content - actual modal w/ bg and corners and shit + // Kill the scroll on the body .modal-open { overflow: hidden; @@ -14,26 +11,25 @@ // Container that the modal scrolls within .modal { - display: none; - overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: $zindex-modal; - -webkit-overflow-scrolling: touch; - + display: none; + overflow: hidden; // Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. outline: 0; + -webkit-overflow-scrolling: touch; // When fading in the modal, animate it to slide down &.fade .modal-dialog { - @include translate(0, -25%); - @include transition-transform(0.3s ease-out); + transform: translate(0, -25%); + transition: transform .3s ease-out; } - &.in .modal-dialog { @include translate(0, 0) } + &.in .modal-dialog { transform: translate(0, 0); } } .modal-open .modal { overflow-x: hidden; @@ -51,11 +47,10 @@ .modal-content { position: relative; background-color: $modal-content-bg; - border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + background-clip: padding-box; border: 1px solid $modal-content-border-color; - border-radius: $border-radius-large; + border-radius: $border-radius-lg; @include box-shadow(0 3px 9px rgba(0,0,0,.5)); - background-clip: padding-box; // Remove focus outline from opened modal outline: 0; } @@ -67,11 +62,12 @@ right: 0; bottom: 0; left: 0; - z-index: $zindex-modal-background; + z-index: $zindex-modal-bg; background-color: $modal-backdrop-bg; + // Fade for backdrop - &.fade { @include opacity(0); } - &.in { @include opacity($modal-backdrop-opacity); } + &.fade { opacity: 0; } + &.in { opacity: $modal-backdrop-opacity; } } // Modal header @@ -79,7 +75,7 @@ .modal-header { padding: $modal-title-padding; border-bottom: 1px solid $modal-header-border-color; - min-height: ($modal-title-padding + $modal-title-line-height); + @include clearfix; } // Close icon .modal-header .close { @@ -104,12 +100,12 @@ padding: $modal-inner-padding; text-align: right; // right align buttons border-top: 1px solid $modal-footer-border-color; - @include clearfix; // clear it in case folks use .pull-* classes on buttons + @include clearfix(); // clear it in case folks use .pull-* classes on buttons // Properly space out buttons .btn + .btn { - margin-left: 5px; margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + margin-left: 5px; } // but override that for button groups .btn-group .btn + .btn { @@ -131,7 +127,7 @@ } // Scale up the modal -@media (min-width: $screen-sm-min) { +@include media-breakpoint-up(sm) { // Automatically set modal's width for larger viewports .modal-dialog { width: $modal-md; @@ -145,6 +141,6 @@ .modal-sm { width: $modal-sm; } } -@media (min-width: $screen-md-min) { +@include media-breakpoint-up(md) { .modal-lg { width: $modal-lg; } } diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss new file mode 100644 index 0000000..551f3c9 --- /dev/null +++ b/assets/stylesheets/bootstrap/_nav.scss @@ -0,0 +1,155 @@ +// Base class +// +// Kickstart any navigation component with a set of style resets. Works with +// `<nav>`s or `<ul>`s. + +.nav { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +.nav-link { + display: inline-block; + + @include hover-focus { + text-decoration: none; + } + + // Disabled state lightens text and removes hover/tab effects + &.disabled { + color: $nav-disabled-link-color; + + @include plain-hover-focus { + color: $nav-disabled-link-hover-color; + cursor: $cursor-disabled; + background-color: transparent; + } + } +} + + +// Nav inline + +.nav-inline { + .nav-link + .nav-link { + margin-left: 1rem; + } +} + + +// +// Tabs +// + +.nav-tabs { + border-bottom: 1px solid $nav-tabs-border-color; + @include clearfix(); + + .nav-item { + float: left; + // Make the list-items overlay the bottom border + margin-bottom: -1px; + + + .nav-item { + margin-left: .2rem; + } + } + + .nav-link { + display: block; + padding: $nav-link-padding; + border: 1px solid transparent; + @include border-radius($border-radius $border-radius 0 0); + + @include hover-focus { + border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; + } + + &.disabled { + @include plain-hover-focus { + color: $nav-disabled-link-color; + background-color: transparent; + border-color: transparent; + } + } + } + + .nav-link.active, + .nav-item.open .nav-link { + @include plain-hover-focus { + color: $nav-tabs-active-link-hover-color; + background-color: $nav-tabs-active-link-hover-bg; + border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent; + } + } +} + + +// +// Pills +// + +.nav-pills { + .nav-item { + float: left; + + + .nav-item { + margin-left: .2rem; + } + } + + .nav-link { + display: block; + padding: $nav-link-padding; + @include border-radius($nav-pills-border-radius); + } + + .nav-link.active, + .nav-item.open .nav-link { + @include plain-hover-focus { + color: $component-active-color; + cursor: default; + background-color: $component-active-bg; + } + } +} + +.nav-stacked { + .nav-item { + display: block; + float: none; + + + .nav-item { + margin-top: .2rem; + margin-left: 0; + } + } +} + + +// +// Tabbable tabs +// + +// Hide tabbable panes to start, show them when `.active` +.tab-content { + > .tab-pane { + display: none; + } + > .active { + display: block; + } +} + + +// +// Dropdowns +// + +.nav-tabs .dropdown-menu { + // Make dropdown border overlap tab border + margin-top: -1px; + // Remove the top rounded corners here since there is a hard edge above the menu + @include border-top-radius(0); +} diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 11e5c01..61c2121 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -1,8 +1,3 @@ -// -// Navbars -// -------------------------------------------------- - - // Wrapper and base class // // Provide a static navbar from which we expand to create full-width, fixed, and @@ -10,115 +5,15 @@ .navbar { position: relative; - 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 - @include clearfix; - - @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 { - @include clearfix; - - @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); + padding: $navbar-padding-vertical $navbar-padding-horizontal; @include clearfix; - -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; - } + @include media-breakpoint-up(sm) { + @include border-radius($navbar-border-radius); } } -// // Navbar alignment options // // Display the navbar across the entirety of the page or fixed it to the top or @@ -127,10 +22,9 @@ // Static top (unfixed, but 100% wide) navbar .navbar-static-top { z-index: $zindex-navbar; - border-width: 0 0 1px; - @media (min-width: $grid-float-breakpoint) { - border-radius: 0; + @include media-breakpoint-up(sm) { + @include border-radius(0); } } @@ -141,522 +35,192 @@ right: 0; left: 0; z-index: $zindex-navbar-fixed; + margin-bottom: 0; // override .navbar defaults // Undo the rounded corners - @media (min-width: $grid-float-breakpoint) { - border-radius: 0; + @include media-breakpoint-up(sm) { + @include 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-sticky-top { + position: sticky; + top: 0; + z-index: $zindex-navbar-sticky; + width: 100%; + + // Undo the rounded corners + @include media-breakpoint-up(sm) { + @include border-radius(0); + } } +// // Brand/project name +// .navbar-brand { float: left; - padding: $navbar-padding-vertical $navbar-padding-horizontal; - font-size: $font-size-large; - line-height: $line-height-computed; - height: $navbar-height; + margin-right: 1rem; + padding-top: .25rem; + padding-bottom: .25rem; + font-size: $font-size-lg; - &:hover, - &:focus { + @include hover-focus { text-decoration: none; } > img { display: block; } - - @media (min-width: $grid-float-breakpoint) { - .navbar > .container &, - .navbar > .container-fluid & { - margin-left: -$navbar-padding-horizontal; - } - } } -// Navbar toggle -// -// Custom button for toggling the `.navbar-collapse`, powered by the collapse -// JavaScript plugin. - -.navbar-toggle { - position: relative; - float: right; +.navbar-divider { + float: left; + width: 1px; + padding-top: .425rem; + padding-bottom: .425rem; + overflow: hidden; + margin-left: $navbar-padding-horizontal; margin-right: $navbar-padding-horizontal; - padding: 9px 10px; - @include 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 { - outline: 0; - } - // Bars - .icon-bar { - display: block; - width: 22px; - height: 2px; - border-radius: 1px; - } - .icon-bar + .icon-bar { - margin-top: 4px; - } - - @media (min-width: $grid-float-breakpoint) { - display: none; + &:before { + content: '\00a0'; } } -// Navbar nav links +// Navbar toggle // -// 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; - } - } - } - } +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// Bootstrap JavaScript plugin. - // Uncollapse the nav - @media (min-width: $grid-float-breakpoint) { - float: left; - margin: 0; +.navbar-toggler { + padding: .5rem .75rem; + font-size: $font-size-lg; + line-height: 1; + background: none; + border: $border-width solid transparent; + @include border-radius($btn-border-radius); - > li { - float: left; - > a { - padding-top: $navbar-padding-vertical; - padding-bottom: $navbar-padding-vertical; - } - } + @include hover-focus { + text-decoration: none; } } - -// 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); - @include box-shadow($shadow); - - // Mixin behavior for optimum display - @include form-inline; - - .form-group { - @media (max-width: $grid-float-breakpoint-max) { - margin-bottom: 5px; - - &:last-child { - margin-bottom: 0; - } +// Custom override for +.navbar-toggleable { + &-xs { + @include media-breakpoint-up(sm) { + display: block !important; } } - - // Vertically center in expanded, horizontal navbar - @include 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; - @include box-shadow(none); - } -} - - -// Dropdown menus - -// Menu position and menu carets -.navbar-nav > li > .dropdown-menu { - margin-top: 0; - @include border-top-radius(0); -} -// Menu position and menu caret support for dropups via extra dropup class -.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { - margin-bottom: 0; - @include border-top-radius($navbar-border-radius); - @include border-bottom-radius(0); -} - - -// Buttons in navbars -// -// Vertically center a button within a navbar (when *not* in a form). - -.navbar-btn { - @include navbar-vertical-align($input-height-base); - - &.btn-sm { - @include navbar-vertical-align($input-height-small); - } - &.btn-xs { - @include navbar-vertical-align(22); + &-sm { + @include media-breakpoint-up(md) { + display: block !important; + } } } -// Text in navbars +// Navigation // -// Add a class to make any element properly align itself vertically within the navbars. - -.navbar-text { - @include navbar-vertical-align($line-height-computed); +// Custom navbar navigation built on the base `.nav` styles. - @media (min-width: $grid-float-breakpoint) { +.navbar-nav { + .nav-item { 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. + .nav-link { + display: block; + padding-top: .425rem; + padding-bottom: .425rem; -@media (min-width: $grid-float-breakpoint) { - .navbar-left { - float: left !important; + + .nav-link { + margin-left: 1rem; + } } - .navbar-right { - float: right !important; - margin-right: -$navbar-padding-horizontal; - ~ .navbar-right { - margin-right: 0; - } + .nav-item + .nav-item { + margin-left: 1rem; } } - -// Alternate navbars -// -------------------------------------------------- - -// Default navbar -.navbar-default { - background-color: $navbar-default-bg; - border-color: $navbar-default-border; - +// Dark links against a light background +.navbar-light { .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; + color: $navbar-light-active-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; + @include hover-focus { + color: $navbar-light-active-color; } } - .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; - } - } + .nav-link { + color: $navbar-light-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; - } - } + @include hover-focus { + color: $navbar-light-hover-color; } } - } - - // 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; + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + @include plain-hover-focus { + color: $navbar-light-active-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; - } - } + .navbar-divider { + background-color: rgba(0,0,0,.075); } } -// Inverse navbar - -.navbar-inverse { - background-color: $navbar-inverse-bg; - border-color: $navbar-inverse-border; - +// White links against a dark background +.navbar-dark { .navbar-brand { - color: $navbar-inverse-brand-color; - &:hover, - &:focus { - color: $navbar-inverse-brand-hover-color; - background-color: $navbar-inverse-brand-hover-bg; - } - } - - .navbar-text { - color: $navbar-inverse-color; - } - - .navbar-nav { - > li > a { - color: $navbar-inverse-link-color; + color: $navbar-dark-active-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; - } + @include hover-focus { + color: $navbar-dark-active-color; } } - // Darken the responsive nav toggle - .navbar-toggle { - border-color: $navbar-inverse-toggle-border-color; - &:hover, - &:focus { - background-color: $navbar-inverse-toggle-hover-bg; - } - .icon-bar { - background-color: $navbar-inverse-toggle-icon-bar-bg; - } - } - - .navbar-collapse, - .navbar-form { - border-color: darken($navbar-inverse-bg, 7%); - } - - // Dropdowns .navbar-nav { - > .open > a { - &, - &:hover, - &:focus { - background-color: $navbar-inverse-link-active-bg; - color: $navbar-inverse-link-active-color; - } - } + .nav-link { + color: $navbar-dark-color; - @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; - } - } + @include hover-focus { + color: $navbar-dark-hover-color; } } - } - .navbar-link { - color: $navbar-inverse-link-color; - &:hover { - color: $navbar-inverse-link-hover-color; + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + @include plain-hover-focus { + color: $navbar-dark-active-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; - } - } + .navbar-divider { + background-color: rgba(255,255,255,.075); } } diff --git a/assets/stylesheets/bootstrap/_navs.scss b/assets/stylesheets/bootstrap/_navs.scss deleted file mode 100644 index 9d369f3..0000000 --- a/assets/stylesheets/bootstrap/_navs.scss +++ /dev/null @@ -1,242 +0,0 @@ -// -// Navs -// -------------------------------------------------- - - -// Base class -// -------------------------------------------------- - -.nav { - margin-bottom: 0; - padding-left: 0; // Override default ul/ol - list-style: none; - @include clearfix; - - > li { - position: relative; - display: block; - - > a { - position: relative; - display: block; - padding: $nav-link-padding; - &:hover, - &:focus { - text-decoration: none; - background-color: $nav-link-hover-bg; - } - } - - // Disabled state sets text to gray and nukes hover/tab effects - &.disabled > a { - color: $nav-disabled-link-color; - - &:hover, - &:focus { - color: $nav-disabled-link-hover-color; - text-decoration: none; - background-color: transparent; - cursor: $cursor-disabled; - } - } - } - - // Open dropdowns - .open > a { - &, - &:hover, - &:focus { - background-color: $nav-link-hover-bg; - border-color: $link-color; - } - } - - // 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 { - @include nav-divider; - } - - // Prevent IE8 from misplacing imgs - // - // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 - > li > a > img { - max-width: none; - } -} - - -// Tabs -// ------------------------- - -// Give the tabs something to sit on -.nav-tabs { - border-bottom: 1px solid $nav-tabs-border-color; - > li { - float: left; - // Make the list-items overlay the bottom border - margin-bottom: -1px; - - // Actual tabs (as links) - > a { - margin-right: 2px; - line-height: $line-height-base; - border: 1px solid transparent; - border-radius: $border-radius-base $border-radius-base 0 0; - &:hover { - border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; - } - } - - // 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 { - @extend .nav-justified; - @extend .nav-tabs-justified; - } -} - - -// Pills -// ------------------------- -.nav-pills { - > li { - float: left; - - // Links rendered as pills - > a { - border-radius: $nav-pills-border-radius; - } - + li { - margin-left: 2px; - } - - // Active state - &.active > a { - &, - &:hover, - &:focus { - color: $nav-pills-active-link-hover-color; - background-color: $nav-pills-active-link-hover-bg; - } - } - } -} - - -// Stacked pills -.nav-stacked { - > li { - float: none; - + li { - 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; - > 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 -// -// Mixin for adding on top the shared `.nav-justified` styles for our tabs -.nav-tabs-justified { - border-bottom: 0; - - > li > a { - // Override margin from .nav-tabs - margin-right: 0; - 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; - } - } -} - - -// Tabbable tabs -// ------------------------- - -// Hide tabbable panes to start, show them when `.active` -.tab-content { - > .tab-pane { - display: none; - } - > .active { - display: block; - } -} - - -// Dropdowns -// ------------------------- - -// Specific dropdowns -.nav-tabs .dropdown-menu { - // make dropdown border overlap tab border - margin-top: -1px; - // Remove the top rounded corners here since there is a hard edge above the menu - @include border-top-radius(0); -} diff --git a/assets/stylesheets/bootstrap/_normalize.scss b/assets/stylesheets/bootstrap/_normalize.scss index 9dddf73..2e62b53 100644 --- a/assets/stylesheets/bootstrap/_normalize.scss +++ b/assets/stylesheets/bootstrap/_normalize.scss @@ -95,9 +95,13 @@ a { // active/hover state. // -a:active, -a:hover { - outline: 0; +a { + &:active { + outline: 0; + } + &:hover { + outline: 0; + } } // Text-level semantics diff --git a/assets/stylesheets/bootstrap/_pager.scss b/assets/stylesheets/bootstrap/_pager.scss index c234217..06036c2 100644 --- a/assets/stylesheets/bootstrap/_pager.scss +++ b/assets/stylesheets/bootstrap/_pager.scss @@ -1,16 +1,14 @@ -// -// Pager pagination -// -------------------------------------------------- - - .pager { padding-left: 0; - margin: $line-height-computed 0; - list-style: none; + margin-top: $spacer-y; + margin-bottom: $spacer-y; text-align: center; - @include clearfix; + list-style: none; + @include clearfix(); + li { display: inline; + > a, > span { display: inline-block; @@ -20,35 +18,40 @@ border-radius: $pager-border-radius; } - > a:hover, - > a:focus { - text-decoration: none; - background-color: $pager-hover-bg; + > a { + @include hover-focus { + text-decoration: none; + background-color: $pager-hover-bg; + } } } - .next { - > a, + .disabled { + > a { + @include plain-hover-focus { + color: $pager-disabled-color; + cursor: $cursor-disabled; + background-color: $pager-bg; + } + } > span { - float: right; + color: $pager-disabled-color; + cursor: $cursor-disabled; + background-color: $pager-bg; } } +} - .previous { - > a, - > span { - float: left; - } +.pager-next { + > a, + > span { + float: right; } +} - .disabled { - > a, - > a:hover, - > a:focus, - > span { - color: $pager-disabled-color; - background-color: $pager-bg; - cursor: $cursor-disabled; - } +.pager-prev { + > a, + > span { + float: left; } } diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss index fb23f91..a52b9d1 100644 --- a/assets/stylesheets/bootstrap/_pagination.scss +++ b/assets/stylesheets/bootstrap/_pagination.scss @@ -1,46 +1,43 @@ -// -// Pagination (multiple pages) -// -------------------------------------------------- .pagination { display: inline-block; padding-left: 0; - margin: $line-height-computed 0; - border-radius: $border-radius-base; + margin-top: $spacer-y; + margin-bottom: $spacer-y; + @include border-radius(); > 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; + padding: $pagination-padding-y $pagination-padding-x; + margin-left: -1px; + line-height: $line-height; color: $pagination-color; + text-decoration: none; background-color: $pagination-bg; border: 1px solid $pagination-border; - margin-left: -1px; } &:first-child { > a, > span { margin-left: 0; - @include border-left-radius($border-radius-base); + @include border-left-radius($border-radius); } } &:last-child { > a, > span { - @include border-right-radius($border-radius-base); + @include border-right-radius($border-radius); } } } > li > a, > li > span { - &:hover, - &:focus { - z-index: 3; + @include hover-focus { color: $pagination-hover-color; background-color: $pagination-hover-bg; border-color: $pagination-hover-border; @@ -49,41 +46,37 @@ > .active > a, > .active > span { - &, - &:hover, - &:focus { + @include plain-hover-focus { z-index: 2; color: $pagination-active-color; + cursor: default; 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; + > a { + @include plain-hover-focus { + color: $pagination-disabled-color; + cursor: $cursor-disabled; + background-color: $pagination-disabled-bg; + border-color: $pagination-disabled-border; + } } } } + +// // Sizing -// -------------------------------------------------- +// -// Large .pagination-lg { - @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); + @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg); } -// Small .pagination-sm { - @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); + @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm); } diff --git a/assets/stylesheets/bootstrap/_panels.scss b/assets/stylesheets/bootstrap/_panels.scss deleted file mode 100644 index be9410f..0000000 --- a/assets/stylesheets/bootstrap/_panels.scss +++ /dev/null @@ -1,271 +0,0 @@ -// -// Panels -// -------------------------------------------------- - - -// Base class -.panel { - margin-bottom: $line-height-computed; - background-color: $panel-bg; - border: 1px solid transparent; - border-radius: $panel-border-radius; - @include box-shadow(0 1px 1px rgba(0,0,0,.05)); -} - -// Panel contents -.panel-body { - padding: $panel-body-padding; - @include clearfix; -} - -// Optional heading -.panel-heading { - padding: $panel-heading-padding; - border-bottom: 1px solid transparent; - @include 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 { - padding: $panel-footer-padding; - background-color: $panel-footer-bg; - border-top: 1px solid $panel-inner-border; - @include border-bottom-radius(($panel-border-radius - 1)); -} - - -// List groups in panels -// -// By default, space out list group content from panel headings to account for -// any kind of custom content between the two. - -.panel { - > .list-group, - > .panel-collapse > .list-group { - margin-bottom: 0; - - .list-group-item { - border-width: 1px 0; - border-radius: 0; - } - - // Add border top radius for first one - &:first-child { - .list-group-item:first-child { - border-top: 0; - @include border-top-radius(($panel-border-radius - 1)); - } - } - - // Add border bottom radius for last one - &:last-child { - .list-group-item:last-child { - border-bottom: 0; - @include border-bottom-radius(($panel-border-radius - 1)); - } - } - } - > .panel-heading + .panel-collapse > .list-group { - .list-group-item:first-child { - @include 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 { - @include 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 { - @include 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 { - @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border); -} -.panel-primary { - @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border); -} -.panel-success { - @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border); -} -.panel-info { - @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border); -} -.panel-warning { - @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border); -} -.panel-danger { - @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border); -} diff --git a/assets/stylesheets/bootstrap/_popover.scss b/assets/stylesheets/bootstrap/_popover.scss new file mode 100644 index 0000000..2bd8415 --- /dev/null +++ b/assets/stylesheets/bootstrap/_popover.scss @@ -0,0 +1,140 @@ +.popover { + position: absolute; + top: 0; + left: 0; + z-index: $zindex-popover; + display: block; + max-width: $popover-max-width; + padding: 1px; + // 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. + @include reset-text(); + font-size: $font-size-sm; + background-color: $popover-bg; + background-clip: padding-box; + border: 1px solid $popover-border-color; + @include border-radius($border-radius-lg); + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + + + // Popover directions + + &.popover-top, + &.bs-tether-element-attached-bottom { + margin-top: -$popover-arrow-width; + + .popover-arrow { + bottom: -$popover-arrow-outer-width; + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-top-color: $popover-arrow-outer-color; + border-bottom-width: 0; + &:after { + bottom: 1px; + margin-left: -$popover-arrow-width; + content: ""; + border-top-color: $popover-arrow-color; + border-bottom-width: 0; + } + } + } + + &.popover-right, + &.bs-tether-element-attached-left { + margin-left: $popover-arrow-width; + + .popover-arrow { + top: 50%; + left: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-right-color: $popover-arrow-outer-color; + border-left-width: 0; + &:after { + bottom: -$popover-arrow-width; + left: 1px; + content: ""; + border-right-color: $popover-arrow-color; + border-left-width: 0; + } + } + } + + &.popover-bottom, + &.bs-tether-element-attached-top { + margin-top: $popover-arrow-width; + + .popover-arrow { + top: -$popover-arrow-outer-width; + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-outer-color; + &:after { + top: 1px; + margin-left: -$popover-arrow-width; + content: ""; + border-top-width: 0; + border-bottom-color: $popover-arrow-color; + } + } + } + + &.popover-left, + &.bs-tether-element-attached-right { + margin-left: -$popover-arrow-width; + + .popover-arrow { + top: 50%; + right: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-right-width: 0; + border-left-color: $popover-arrow-outer-color; + &:after { + right: 1px; + bottom: -$popover-arrow-width; + content: ""; + border-right-width: 0; + border-left-color: $popover-arrow-color; + } + } + } +} + + +// Offset the popover to account for the popover arrow +.popover-title { + padding: 8px 14px; + margin: 0; // reset heading margin + font-size: $font-size-base; + background-color: $popover-title-bg; + border-bottom: 1px solid darken($popover-title-bg, 5%); + @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0); +} + +.popover-content { + padding: 9px 14px; +} + + +// Arrows +// +// .popover-arrow is outer, .popover-arrow:after is inner + +.popover-arrow { + &, + &:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } +} +.popover-arrow { + border-width: $popover-arrow-outer-width; +} +.popover-arrow:after { + content: ""; + border-width: $popover-arrow-width; +} diff --git a/assets/stylesheets/bootstrap/_popovers.scss b/assets/stylesheets/bootstrap/_popovers.scss deleted file mode 100644 index 9b90a2e..0000000 --- a/assets/stylesheets/bootstrap/_popovers.scss +++ /dev/null @@ -1,131 +0,0 @@ -// -// Popovers -// -------------------------------------------------- - - -.popover { - position: absolute; - top: 0; - left: 0; - z-index: $zindex-popover; - display: none; - max-width: $popover-max-width; - padding: 1px; - // 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. - @include reset-text; - font-size: $font-size-base; - - background-color: $popover-bg; - background-clip: padding-box; - border: 1px solid $popover-fallback-border-color; - border: 1px solid $popover-border-color; - border-radius: $border-radius-large; - @include box-shadow(0 5px 10px rgba(0,0,0,.2)); - - // Offset the popover to account for the popover arrow - &.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; - background-color: $popover-title-bg; - border-bottom: 1px solid darken($popover-title-bg, 5%); - border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0; -} - -.popover-content { - padding: 9px 14px; -} - -// Arrows -// -// .arrow is outer, .arrow:after is inner - -.popover > .arrow { - &, - &:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } -} -.popover > .arrow { - border-width: $popover-arrow-outer-width; -} -.popover > .arrow:after { - border-width: $popover-arrow-width; - content: ""; -} - -.popover { - &.top > .arrow { - left: 50%; - margin-left: -$popover-arrow-outer-width; - border-bottom-width: 0; - border-top-color: $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 { - top: 50%; - left: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; - border-left-width: 0; - 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 { - left: 50%; - margin-left: -$popover-arrow-outer-width; - border-top-width: 0; - 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; - border-bottom-color: $popover-arrow-color; - } - } - - &.left > .arrow { - top: 50%; - right: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; - border-right-width: 0; - border-left-color: $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/assets/stylesheets/bootstrap/_print.scss b/assets/stylesheets/bootstrap/_print.scss index 66e54ab..4bbece5 100644 --- a/assets/stylesheets/bootstrap/_print.scss +++ b/assets/stylesheets/bootstrap/_print.scss @@ -1,4 +1,4 @@ -/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ +// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css // ========================================================================== // Print styles. @@ -6,96 +6,83 @@ // ========================================================================== @media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; // Black prints faster: h5bp.com/s - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - // Don't show links that are fragment identifiers, - // or use the `javascript:` pseudo protocol - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; // h5bp.com/t - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } - - // Bootstrap specific changes start - - // Bootstrap components - .navbar { - display: none; - } - .btn, - .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 + *, + *:before, + *:after { + text-shadow: none !important; + box-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + + // Bootstrap specific changes start + + // Bootstrap components + .navbar { + display: none; + } + .btn, + .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/assets/stylesheets/bootstrap/_progress-bars.scss b/assets/stylesheets/bootstrap/_progress-bars.scss deleted file mode 100644 index 343df63..0000000 --- a/assets/stylesheets/bootstrap/_progress-bars.scss +++ /dev/null @@ -1,87 +0,0 @@ -// -// Progress bars -// -------------------------------------------------- - - -// Bar animations -// ------------------------- - -// WebKit -@-webkit-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Spec and IE10+ -@keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - - -// Bar itself -// ------------------------- - -// Outer container -.progress { - overflow: hidden; - height: $line-height-computed; - margin-bottom: $line-height-computed; - background-color: $progress-bg; - border-radius: $progress-border-radius; - @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); -} - -// Bar of progress -.progress-bar { - float: left; - width: 0%; - height: 100%; - font-size: $font-size-small; - line-height: $line-height-computed; - color: $progress-bar-color; - text-align: center; - background-color: $progress-bar-bg; - @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - @include transition(width .6s ease); -} - -// Striped bars -// -// `.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 { - @include gradient-striped; - background-size: 40px 40px; -} - -// Call animation for the active one -// -// `.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 { - @include animation(progress-bar-stripes 2s linear infinite); -} - - -// Variations -// ------------------------- - -.progress-bar-success { - @include progress-bar-variant($progress-bar-success-bg); -} - -.progress-bar-info { - @include progress-bar-variant($progress-bar-info-bg); -} - -.progress-bar-warning { - @include progress-bar-variant($progress-bar-warning-bg); -} - -.progress-bar-danger { - @include progress-bar-variant($progress-bar-danger-bg); -} diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss new file mode 100644 index 0000000..a93a634 --- /dev/null +++ b/assets/stylesheets/bootstrap/_progress.scss @@ -0,0 +1,154 @@ +// +// Progress animations +// + +@keyframes progress-bar-stripes { + from { background-position: $spacer-y 0; } + to { background-position: 0 0; } +} + + +// +// Basic progress bar +// + +.progress { + display: block; + width: 100%; + height: $spacer-y; // todo: make a new var for this + margin-bottom: $spacer-y; +} +.progress[value] { + // IE10 uses `color` to set the bar background-color + color: #0074d9; + // Remove Firefox and Opera border + border: 0; + // Reset the default appearance + appearance: none; +} +.progress[value]::-webkit-progress-bar { + background-color: #eee; + @include border-radius($border-radius); + @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); +} +.progress[value]::-webkit-progress-value::before { + content: attr(value); +} +.progress[value]::-webkit-progress-value { + background-color: #0074d9; + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; +} +.progress[value="100"]::-webkit-progress-value { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; +} + +// Firefox styles must be entirely separate or it busts Webkit styles. +// +// Commented out for now because linter. +// +// $-moz-document url-prefix() { +// .progress[value] { +// background-color: #eee; +// .border-radius($border-radius); +// .box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); +// } +// .progress[value]::-moz-progress-bar { +// background-color: #0074d9; +// border-top-left-radius: $border-radius; +// border-bottom-left-radius: $border-radius; +// } +// .progress[value="0"]::-moz-progress-bar { +// color: $gray-light; +// min-width: 2rem; +// background-color: transparent; +// background-image: none; +// } +// .progress[value="100"]::-moz-progress-bar { +// border-top-right-radius: $border-radius; +// border-bottom-right-radius: $border-radius; +// } +// } + +// IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. +@media screen and (min-width:0\0) { + .progress { + background-color: #eee; + @include border-radius($border-radius); + @include box-shadow(inset 0 .1rem .1rem rgba(0,0,0,.1)); + } + .progress-bar { + display: inline-block; + height: $spacer-y; + text-indent: -999rem; // Simulate hiding of value as in native `<progress>` + background-color: #0074d9; + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } + .progress[width^="0"] { + min-width: 2rem; + color: $gray-light; + background-color: transparent; + background-image: none; + } + .progress[width="100%"] { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } +} + + +// +// Striped +// + +.progress-striped[value]::-webkit-progress-value { + @include gradient-striped(); + background-size: $spacer-y $spacer-y; +} +.progress-striped[value]::-moz-progress-bar { + @include gradient-striped(); + background-size: $spacer-y $spacer-y; +} +@media screen and (min-width:0\0) { + .progress-bar-striped { + @include gradient-striped(); + background-size: $spacer-y $spacer-y; + } +} + + +// +// Animated +// + +.progress-animated[value]::-webkit-progress-value { + animation: progress-bar-stripes 2s linear infinite; +} +.progress-animated[value]::-moz-progress-bar { + animation: progress-bar-stripes 2s linear infinite; +} +@media screen and (min-width:0\0) { + .progress-animated .progress-bar-striped { + animation: progress-bar-stripes 2s linear infinite; + } +} + + +// +// Variations +// + +.progress-success { + @include progress-variant($progress-bar-success-bg); +} +.progress-info { + @include progress-variant($progress-bar-info-bg); +} +.progress-warning { + @include progress-variant($progress-bar-warning-bg); +} +.progress-danger { + @include progress-variant($progress-bar-danger-bg); +} diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss new file mode 100644 index 0000000..fe466da --- /dev/null +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -0,0 +1,295 @@ +// Reboot +// +// Global resets to common HTML elements and more for easier usage by Bootstrap. +// Builds on the resets of Normalize.css. + + +// Reset the box-sizing +// +// Change from `box-sizing: content-box` to `border-box` so that when you add +// `padding` or `border`s to an element, the overall declared `width` does not +// change. For example, `width: 100px;` will always be `100px` despite the +// `border: 10px solid red;` and `padding: 20px;`. +// +// 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. +// +// Credit: shttp://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + + +// Make viewport responsive +// +// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in +// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. +// Eventually @viewport will replace <meta name="viewport">. It's been manually +// prefixed for forward-compatibility. +// +// However, `device-width` is broken on IE 10 on Windows (Phone) 8, +// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) +// and the fix for that involves a snippet of JavaScript to sniff the user agent +// and apply some conditional CSS. +// +// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. + + +// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., +// `.class-name { @import "bootstrap"; }`). +@at-root { + @-moz-viewport { width: device-width; } + @-ms-viewport { width: device-width; } + @-o-viewport { width: device-width; } + @-webkit-viewport { width: device-width; } + @viewport { width: device-width; } +} + +// +// Reset HTML, body, and more +// + +html { + // Sets a specific default `font-size` for user with `rem` type scales. + font-size: $font-size-root; + // Changes the default tap highlight to be completely transparent in iOS. + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +body { + // Make the `body` use the `font-size-root` + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $line-height; + // Go easy on the eyes and use something other than `#000` for text + color: $body-color; + // By default, `<body>` has no `background-color` so we set one as a best practice. + background-color: $body-bg; +} + + +// +// Typography +// + +// Remove top margins from headings +// +// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top +// margin for easier control within type scales as it avoids margin collapsing. +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: .5rem; +} + +// Reset margins on paragraphs +// +// Similarly, the top margin on `<p>`s get reset. However, we also reset the +// bottom margin to use `rem` units instead of `em`. +p { + margin-top: 0; + margin-bottom: 1rem; +} + +// Abbreviations and acronyms +abbr[title], +// 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 $abbr-border-color; +} + +address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1rem; +} + +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: .5rem; + margin-left: 0; // Undo browser default +} + +blockquote { + margin: 0 0 1rem; +} + + +// +// Links +// + +a { + color: $link-color; + text-decoration: none; + + @include hover-focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus { + @include tab-focus(); + } +} + + +// +// Code +// + +pre { + // Remove browser default top margin + margin-top: 0; + // Reset browser default of `1em` to use `rem`s + margin-bottom: 1rem; +} + + +// +// Figures +// + +figure { + // Normalize adds `margin` to `figure`s as browsers apply it inconsistently. + // We reset that to create a better flow in-page. + margin: 0 0 1rem; +} + + + +// +// Images +// + +img { + // By default, `<img>`s are `inline-block`. This assumes that, and vertically + // centers them. This won't apply should you reset them to `block` level. + vertical-align: middle; +} + + +// 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 +// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged + +[role="button"] { + cursor: pointer; +} + + +// +// Tables +// + +table { + // Reset for nesting within parents with `background-color`. + background-color: $table-bg; +} + +caption { + padding-top: $table-cell-padding; + padding-bottom: $table-cell-padding; + color: $text-muted; + text-align: left; + caption-side: bottom; +} + +th { + // Centered by default, but left-align-ed to match the `td`s below. + text-align: left; +} + + +// +// Forms +// + +label { + // Allow labels can use `margin` for spacing. + display: inline-block; + margin-bottom: .5rem; +} + +input, +button, +select, +textarea { + // Remove all `margin`s so our classes don't have to do it themselves. + margin: 0; + // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are + // properly inherited. However, `line-height` isn't addressed there. Using this + // ensures we don't need to unnecessarily redeclare the global font stack. + line-height: inherit; +} + +textarea { + // Textareas should really only resize vertically so they don't break their (horizontal) containers. + resize: vertical; +} + +fieldset { + // 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; + // Reset the default outline behavior of fieldsets so they don't affect page layout. + padding: 0; + margin: 0; + border: 0; +} + +legend { + // Reset the entire legend element to match the `fieldset` + display: block; + width: 100%; + padding: 0; + margin-bottom: .5rem; + font-size: 1.5rem; + line-height: inherit; +// border: 0; +} + +input[type="search"] { + // This overrides the extra rounded corners on search inputs in iOS so that our + // `.form-control` class can properly style them. Note that this cannot simply + // be added to `.form-control` as it's not specific enough. For details, see + // https://github.com/twbs/bootstrap/issues/11586. + -webkit-appearance: none; +} + +// todo: needed? +output { + display: inline-block; +// font-size: $font-size-base; +// line-height: $line-height; +// color: $input-color; +} diff --git a/assets/stylesheets/bootstrap/_responsive-embed.scss b/assets/stylesheets/bootstrap/_responsive-embed.scss index 080a511..ac4dc74 100644 --- a/assets/stylesheets/bootstrap/_responsive-embed.scss +++ b/assets/stylesheets/bootstrap/_responsive-embed.scss @@ -1,5 +1,3 @@ -// Embeds responsive -// // Credit: Nicolas Gallagher and SUIT CSS. .embed-responsive { @@ -16,20 +14,25 @@ video { position: absolute; top: 0; - left: 0; bottom: 0; - height: 100%; + left: 0; width: 100%; + height: 100%; border: 0; } } +// Modifier class for 21:9 aspect ratio +.embed-responsive-21by9 { + padding-bottom: percentage(9 / 21); +} + // Modifier class for 16:9 aspect ratio .embed-responsive-16by9 { - padding-bottom: 56.25%; + padding-bottom: percentage(9 / 16); } // Modifier class for 4:3 aspect ratio .embed-responsive-4by3 { - padding-bottom: 75%; + padding-bottom: percentage(3 / 4); } diff --git a/assets/stylesheets/bootstrap/_responsive-utilities.scss b/assets/stylesheets/bootstrap/_responsive-utilities.scss deleted file mode 100644 index f3f0c83..0000000 --- a/assets/stylesheets/bootstrap/_responsive-utilities.scss +++ /dev/null @@ -1,179 +0,0 @@ -// -// Responsive: Utility classes -// -------------------------------------------------- - - -// IE10 in Windows (Phone) 8 -// -// Support for responsive views via media queries is kind of borked in IE10, for -// Surface/desktop in split view and for Windows Phone 8. This particular fix -// must be accompanied by a snippet of JavaScript to sniff the user agent and -// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at -// our Getting Started page for more information on this bug. -// -// For more information, see the following: -// -// Issue: https://github.com/twbs/bootstrap/issues/10497 -// Docs: http://getbootstrap.com/getting-started/#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/ - -@at-root { - @-ms-viewport { - width: device-width; - } -} - - -// Visibility utilities -// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 - -@include responsive-invisibility('.visible-xs'); -@include responsive-invisibility('.visible-sm'); -@include responsive-invisibility('.visible-md'); -@include responsive-invisibility('.visible-lg'); - -.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; -} - -@media (max-width: $screen-xs-max) { - @include responsive-visibility('.visible-xs'); -} -.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; - } -} - -@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - @include responsive-visibility('.visible-sm'); -} -.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; - } -} - -@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { - @include responsive-visibility('.visible-md'); -} -.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; - } -} - -@media (min-width: $screen-lg-min) { - @include responsive-visibility('.visible-lg'); -} -.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; - } -} - -@media (max-width: $screen-xs-max) { - @include responsive-invisibility('.hidden-xs'); -} - -@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - @include responsive-invisibility('.hidden-sm'); -} - -@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { - @include responsive-invisibility('.hidden-md'); -} - -@media (min-width: $screen-lg-min) { - @include responsive-invisibility('.hidden-lg'); -} - - -// Print utilities -// -// Media queries are placed on the inside to be mixin-friendly. - -// Note: Deprecated .visible-print as of v3.2.0 - -@include responsive-invisibility('.visible-print'); - -@media print { - @include responsive-visibility('.visible-print'); -} -.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; - } -} - -@media print { - @include responsive-invisibility('.hidden-print'); -} diff --git a/assets/stylesheets/bootstrap/_scaffolding.scss b/assets/stylesheets/bootstrap/_scaffolding.scss deleted file mode 100644 index 83adb5d..0000000 --- a/assets/stylesheets/bootstrap/_scaffolding.scss +++ /dev/null @@ -1,161 +0,0 @@ -// -// Scaffolding -// -------------------------------------------------- - - -// 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 -* { - @include box-sizing(border-box); -} -*:before, -*:after { - @include box-sizing(border-box); -} - - -// Body reset - -html { - font-size: 10px; - -webkit-tap-highlight-color: rgba(0,0,0,0); -} - -body { - font-family: $font-family-base; - font-size: $font-size-base; - line-height: $line-height-base; - color: $text-color; - background-color: $body-bg; -} - -// Reset fonts for relevant elements -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - - -// Links - -a { - color: $link-color; - text-decoration: none; - - &:hover, - &:focus { - color: $link-hover-color; - text-decoration: $link-hover-decoration; - } - - &:focus { - @include 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 { - vertical-align: middle; -} - -// Responsive images (ensure images don't scale beyond their parents) -.img-responsive { - @include img-responsive; -} - -// Rounded corners -.img-rounded { - border-radius: $border-radius-large; -} - -// Image thumbnails -// -// 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; - @include transition(all .2s ease-in-out); - - // Keep them at most 100% wide - @include img-responsive(inline-block); -} - -// Perfect circle -.img-circle { - 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/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index affcc58..5f0698f 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -1,82 +1,43 @@ // -// Tables -// -------------------------------------------------- - - -table { - 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 +// Basic Bootstrap table +// .table { width: 100%; max-width: 100%; - margin-bottom: $line-height-computed; - // Cells - > 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; - } - } + margin-bottom: $spacer; + + th, + td { + padding: $table-cell-padding; + line-height: $line-height; + vertical-align: top; + border-top: 1px solid $table-border-color; } - // Bottom align for column headings - > thead > tr > th { + + thead th { vertical-align: bottom; border-bottom: 2px solid $table-border-color; } - // Remove top border from thead by default - > 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; } - // Nesting .table { background-color: $body-bg; } } +// // Condensed table w/ half padding +// -.table-condensed { - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - padding: $table-condensed-cell-padding; - } - } +.table-sm { + th, + td { + padding: $table-sm-cell-padding; } } @@ -87,19 +48,15 @@ th { .table-bordered { border: 1px solid $table-border-color; - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - border: 1px solid $table-border-color; - } - } + + th, + td { + border: 1px solid $table-border-color; } - > thead > tr { - > th, - > td { + + thead { + th, + td { border-bottom-width: 2px; } } @@ -111,7 +68,7 @@ th { // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { - > tbody > tr:nth-of-type(odd) { + tbody tr:nth-of-type(odd) { background-color: $table-bg-accent; } } @@ -122,28 +79,9 @@ th { // Placed here since it has to come after the potential zebra striping .table-hover { - > tbody > tr:hover { - background-color: $table-bg-hover; - } -} - - -// Table cell sizing -// -// Reset default table behavior - -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, - 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; + tbody tr { + @include hover { + background-color: $table-bg-hover; } } } @@ -155,11 +93,11 @@ table { // inheritance to nested tables. // Generate the contextual variants -@include table-row-variant('active', $table-bg-active); -@include table-row-variant('success', $state-success-bg); -@include table-row-variant('info', $state-info-bg); -@include table-row-variant('warning', $state-warning-bg); -@include table-row-variant('danger', $state-danger-bg); +@include table-row-variant(active, $table-bg-active); +@include table-row-variant(success, $state-success-bg); +@include table-row-variant(info, $state-info-bg); +@include table-row-variant(warning, $state-warning-bg); +@include table-row-variant(danger, $state-danger-bg); // Responsive tables @@ -169,66 +107,87 @@ table { // will display normally. .table-responsive { + display: block; + width: 100%; 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; + // Todo: find out if we need this still. + // + // border: 1px solid $table-border-color; + // -ms-overflow-style: -ms-autohiding-scrollbar; + // min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) +} - // Tighten up spacing - > .table { - margin-bottom: 0; - - // Ensure the content doesn't wrap - > thead, - > tbody, - > tfoot { - > tr { - > th, - > td { - white-space: nowrap; - } - } - } + +.thead-inverse { + th { + color: #fff; + background-color: $gray-dark; + } +} +.thead-default { + th { + color: $gray; + background-color: $gray-lighter; + } +} + +.table-inverse { + color: $gray-lighter; + background-color: $gray-dark; + + &.table-bordered { + border: 0; + } + + th, + td, + thead th { + border-color: $gray; + } +} + + +.table-reflow { + thead { + float: left; + } + + tbody { + display: block; + white-space: nowrap; + } + + th, + td { + border-top: 1px solid $table-border-color; + border-left: 1px solid $table-border-color; + + &:last-child { + border-right: 1px solid $table-border-color; } + } - // 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; - } + thead, + tbody, + tfoot { + &:last-child { + tr:last-child { + th, + td { + border-bottom: 1px solid $table-border-color; } } + } + } - // 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; - } - } - } + tr { + float: left; + th, + td { + display: block !important; + border: 1px solid $table-border-color; } } } diff --git a/assets/stylesheets/bootstrap/_theme.scss b/assets/stylesheets/bootstrap/_theme.scss deleted file mode 100644 index df571ea..0000000 --- a/assets/stylesheets/bootstrap/_theme.scss +++ /dev/null @@ -1,291 +0,0 @@ -/*! - * 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"; -@import "mixins"; - - -// -// 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); - @include box-shadow($shadow); - - // Reset the shadow - &:active, - &.active { - @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); - } - - &.disabled, - &[disabled], - fieldset[disabled] & { - @include box-shadow(none); - } - - .badge { - text-shadow: none; - } -} - -// Mixin for generating new styles -@mixin btn-styles($btn-color: #555) { - @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%)); - @include 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 { @include btn-styles($btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } -.btn-primary { @include btn-styles($btn-primary-bg); } -.btn-success { @include btn-styles($btn-success-bg); } -.btn-info { @include btn-styles($btn-info-bg); } -.btn-warning { @include btn-styles($btn-warning-bg); } -.btn-danger { @include btn-styles($btn-danger-bg); } - - -// -// Images -// -------------------------------------------------- - -.thumbnail, -.img-thumbnail { - @include box-shadow(0 1px 2px rgba(0,0,0,.075)); -} - - -// -// Dropdowns -// -------------------------------------------------- - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus { - @include 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 { - @include 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 { - @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg); - @include 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); - @include box-shadow($shadow); - - .navbar-nav > .open > a, - .navbar-nav > .active > a { - @include gradient-vertical($start-color: darken($navbar-default-link-active-bg, 5%), $end-color: darken($navbar-default-link-active-bg, 2%)); - @include 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 { - @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg); - @include 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 { - @include gradient-vertical($start-color: $navbar-inverse-link-active-bg, $end-color: lighten($navbar-inverse-link-active-bg, 2.5%)); - @include 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; - @include 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); - @include box-shadow($shadow); -} - -// Mixin for generating new styles -@mixin alert-styles($color) { - @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%)); - border-color: darken($color, 15%); -} - -// Apply the mixin to the alerts -.alert-success { @include alert-styles($alert-success-bg); } -.alert-info { @include alert-styles($alert-info-bg); } -.alert-warning { @include alert-styles($alert-warning-bg); } -.alert-danger { @include alert-styles($alert-danger-bg); } - - -// -// Progress bars -// -------------------------------------------------- - -// Give the progress background some depth -.progress { - @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg) -} - -// Mixin for generating new styles -@mixin progress-bar-styles($color) { - @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%)); -} - -// Apply the mixin to the progress bars -.progress-bar { @include progress-bar-styles($progress-bar-bg); } -.progress-bar-success { @include progress-bar-styles($progress-bar-success-bg); } -.progress-bar-info { @include progress-bar-styles($progress-bar-info-bg); } -.progress-bar-warning { @include progress-bar-styles($progress-bar-warning-bg); } -.progress-bar-danger { @include 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 { - @include gradient-striped; -} - - -// -// List groups -// -------------------------------------------------- - -.list-group { - border-radius: $border-radius-base; - @include 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%); - @include 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 { - @include box-shadow(0 1px 2px rgba(0,0,0,.05)); -} - -// Mixin for generating new styles -@mixin panel-heading-styles($color) { - @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%)); -} - -// Apply the mixin to the panel headings only -.panel-default > .panel-heading { @include panel-heading-styles($panel-default-heading-bg); } -.panel-primary > .panel-heading { @include panel-heading-styles($panel-primary-heading-bg); } -.panel-success > .panel-heading { @include panel-heading-styles($panel-success-heading-bg); } -.panel-info > .panel-heading { @include panel-heading-styles($panel-info-heading-bg); } -.panel-warning > .panel-heading { @include panel-heading-styles($panel-warning-heading-bg); } -.panel-danger > .panel-heading { @include panel-heading-styles($panel-danger-heading-bg); } - - -// -// Wells -// -------------------------------------------------- - -.well { - @include 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); - @include box-shadow($shadow); -} diff --git a/assets/stylesheets/bootstrap/_thumbnails.scss b/assets/stylesheets/bootstrap/_thumbnails.scss deleted file mode 100644 index da0e1e7..0000000 --- a/assets/stylesheets/bootstrap/_thumbnails.scss +++ /dev/null @@ -1,38 +0,0 @@ -// -// Thumbnails -// -------------------------------------------------- - - -// 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; - @include transition(border .2s ease-in-out); - - > img, - a > img { - @include img-responsive; - margin-left: auto; - margin-right: auto; - } - - // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active - - // Image captions - .caption { - padding: $thumbnail-caption-padding; - color: $thumbnail-caption-color; - } -} - -// Add a hover state for linked versions only -a.thumbnail:hover, -a.thumbnail:focus, -a.thumbnail.active { - border-color: $link-color; -} diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss index f0c1658..941579e 100644 --- a/assets/stylesheets/bootstrap/_tooltip.scss +++ b/assets/stylesheets/bootstrap/_tooltip.scss @@ -1,8 +1,3 @@ -// -// Tooltips -// -------------------------------------------------- - - // Base class .tooltip { position: absolute; @@ -10,16 +5,64 @@ display: block; // 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. - @include reset-text; - font-size: $font-size-small; + @include reset-text(); + font-size: $font-size-sm; + opacity: 0; + + &.in { opacity: $tooltip-opacity; } + + &.tooltip-top, + &.bs-tether-element-attached-bottom { + padding: $tooltip-arrow-width 0; + margin-top: -3px; + + .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + } + &.tooltip-right, + &.bs-tether-element-attached-left { + padding: 0 $tooltip-arrow-width; + margin-left: 3px; - @include opacity(0); + .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; + border-right-color: $tooltip-arrow-color; + } + } + &.tooltip-bottom, + &.bs-tether-element-attached-top { + padding: $tooltip-arrow-width 0; + margin-top: 3px; - &.in { @include 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; } + .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } + } + &.tooltip-left, + &.bs-tether-element-attached-right { + padding: 0 $tooltip-arrow-width; + margin-left: -3px; + + .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; + border-left-color: $tooltip-arrow-color; + } + } } // Wrapper for the tooltip content @@ -29,7 +72,7 @@ color: $tooltip-color; text-align: center; background-color: $tooltip-bg; - border-radius: $border-radius-base; + @include border-radius($border-radius); } // Arrows @@ -40,62 +83,3 @@ 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; - left: 50%; - margin-left: -$tooltip-arrow-width; - 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; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; - border-right-color: $tooltip-arrow-color; - } - &.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; - border-left-color: $tooltip-arrow-color; - } - &.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; - border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; - border-bottom-color: $tooltip-arrow-color; - } - &.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/assets/stylesheets/bootstrap/_type.scss b/assets/stylesheets/bootstrap/_type.scss index a39a615..2f5cdb4 100644 --- a/assets/stylesheets/bootstrap/_type.scss +++ b/assets/stylesheets/bootstrap/_type.scss @@ -1,10 +1,6 @@ // -// Typography -// -------------------------------------------------- - - // Headings -// ------------------------- +// h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { @@ -12,36 +8,17 @@ h1, h2, h3, h4, h5, h6, font-weight: $headings-font-weight; line-height: $headings-line-height; color: $headings-color; - - small, - .small { - font-weight: normal; - line-height: 1; - color: $headings-small-color; - } } h1, .h1, h2, .h2, h3, .h3 { - margin-top: $line-height-computed; - margin-bottom: ($line-height-computed / 2); - - small, - .small { - font-size: 65%; - } + margin-bottom: $headings-margin-bottom; } h4, .h4, h5, .h5, h6, .h6 { - margin-top: ($line-height-computed / 2); - margin-bottom: ($line-height-computed / 2); - - small, - .small { - font-size: 75%; - } + margin-bottom: $headings-margin-bottom; } h1, .h1 { font-size: $font-size-h1; } @@ -51,198 +28,106 @@ h4, .h4 { font-size: $font-size-h4; } h5, .h5 { font-size: $font-size-h5; } h6, .h6 { font-size: $font-size-h6; } +.lead { + font-size: $lead-font-size; + font-weight: $lead-font-weight; +} -// Body text -// ------------------------- - -p { - margin: 0 0 ($line-height-computed / 2); +// Type display classes +.display-1 { + font-size: $display1-size; + font-weight: $display1-weight; +} +.display-2 { + font-size: $display2-size; + font-weight: $display2-weight; +} +.display-3 { + font-size: $display3-size; + font-weight: $display3-weight; +} +.display-4 { + font-size: $display4-size; + font-weight: $display4-weight; } -.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); - } +// +// Horizontal rules +// + +hr { + margin-top: $spacer-y; + margin-bottom: $spacer-y; + border: 0; + border-top: $hr-border-width solid $hr-border-color; } -// Emphasis & misc -// ------------------------- +// +// Emphasis +// -// Ex: (12px small font / 14px base font) * 100% = about 85% small, .small { - font-size: floor((100% * $font-size-small / $font-size-base)); + font-size: 80%; + font-weight: normal; } 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; -} - -@include text-emphasis-variant('.text-primary', $brand-primary); - -@include text-emphasis-variant('.text-success', $state-success-text); - -@include text-emphasis-variant('.text-info', $state-info-text); - -@include text-emphasis-variant('.text-warning', $state-warning-text); - -@include text-emphasis-variant('.text-danger', $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; -} -@include bg-variant('.bg-primary', $brand-primary); - -@include bg-variant('.bg-success', $state-success-bg); - -@include bg-variant('.bg-info', $state-info-bg); - -@include bg-variant('.bg-warning', $state-warning-bg); - -@include bg-variant('.bg-danger', $state-danger-bg); - - -// Page header -// ------------------------- - -.page-header { - padding-bottom: (($line-height-computed / 2) - 1); - margin: ($line-height-computed * 2) 0 $line-height-computed; - border-bottom: 1px solid $page-header-border-color; + background-color: $state-warning-bg; } +// // Lists -// ------------------------- - -// Unordered and Ordered lists -ul, -ol { - margin-top: 0; - margin-bottom: ($line-height-computed / 2); - ul, - ol { - margin-bottom: 0; - } -} - -// List options +// -// [converter] extracted from `.list-unstyled` for libsass compatibility -@mixin list-unstyled { +// Unstyled keeps list items block level, just removes default browser padding and list-style +.list-unstyled { padding-left: 0; list-style: none; } -// [converter] extracted as `@mixin list-unstyled` for libsass compatibility -.list-unstyled { - @include list-unstyled; -} - // Inline turns list items into inline-block .list-inline { - @include list-unstyled; + padding-left: 0; margin-left: -5px; + list-style: none; > li { display: inline-block; - padding-left: 5px; padding-right: 5px; + padding-left: 5px; } } -// Description Lists -dl { - margin-top: 0; // Remove browser default - margin-bottom: $line-height-computed; -} -dt, -dd { - line-height: $line-height-base; -} -dt { - font-weight: bold; -} -dd { - margin-left: 0; // Undo browser default -} - -// Horizontal description lists -// -// Defaults to being stacked without any of the below styles applied, until the -// grid breakpoint is reached (default of ~768px). - +// Horizontal description lists w/ grid classes .dl-horizontal { - dd { - @include clearfix; // Clear the floated `dt` if an empty `dd` is present - } - - @media (min-width: $grid-float-breakpoint) { - dt { - float: left; - width: ($dl-horizontal-offset - 20); - clear: left; - text-align: right; - @include text-overflow; - } - dd { - margin-left: $dl-horizontal-offset; - } - } + margin-right: -$grid-gutter-width; + margin-left: -$grid-gutter-width; + @include clearfix; } +// // Misc -// ------------------------- +// -// Abbreviations and acronyms -abbr[title], -// 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 $abbr-border-color; -} +// Builds on `abbr` .initialism { font-size: 90%; - @extend .text-uppercase; + text-transform: uppercase; } // Blockquotes -blockquote { - padding: ($line-height-computed / 2) $line-height-computed; - margin: 0 0 $line-height-computed; +.blockquote { + padding: ($spacer / 2) $spacer; + margin-bottom: $spacer; font-size: $blockquote-font-size; - border-left: 5px solid $blockquote-border-color; + border-left: .25rem solid $blockquote-border-color; p, ul, @@ -252,47 +137,51 @@ blockquote { } } - // Note: Deprecated small and .small as of v3.1.0 - // Context: https://github.com/twbs/bootstrap/issues/11660 - footer, - small, - .small { + footer { display: block; font-size: 80%; // back to default font-size - line-height: $line-height-base; + line-height: $line-height; color: $blockquote-small-color; &:before { - content: '\2014 \00A0'; // em dash, nbsp + content: "\2014 \00A0"; // em dash, nbsp } } } // 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; +.blockquote-reverse { + padding-right: $spacer; padding-left: 0; - border-right: 5px solid $blockquote-border-color; - border-left: 0; text-align: right; + border-right: .25rem solid $blockquote-border-color; + border-left: 0; // Account for citation - footer, - small, - .small { - &:before { content: ''; } + footer { + &:before { content: ""; } &:after { - content: '\00A0 \2014'; // nbsp, em dash + content: "\00A0 \2014"; // nbsp, em dash } } } -// Addresses -address { - margin-bottom: $line-height-computed; - font-style: normal; - line-height: $line-height-base; +// +// Figures +// + +.figure { + // Ensures the caption's text aligns with the image. + display: inline-block; + + > img { + @extend .img-responsive; + line-height: 1; + margin-bottom: ($spacer-y / 2); + } +} + +.figure-caption { + font-size: 90%; + color: $gray-light; } diff --git a/assets/stylesheets/bootstrap/_utilities-responsive.scss b/assets/stylesheets/bootstrap/_utilities-responsive.scss new file mode 100644 index 0000000..c69ecc9 --- /dev/null +++ b/assets/stylesheets/bootstrap/_utilities-responsive.scss @@ -0,0 +1,49 @@ +// +// Mixins +// + +@each $bp in map-keys($grid-breakpoints) { + .hidden-#{$bp}-up { + @include media-breakpoint-up($bp) { + display: none !important; + } + } + .hidden-#{$bp}-down { + @include media-breakpoint-down($bp) { + display: none !important; + } + } +} + + +// Print utilities +// +// Media queries are placed on the inside to be mixin-friendly. + +.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 { + @include responsive-invisibility(".hidden-print"); + } +} diff --git a/assets/stylesheets/bootstrap/_utilities-spacing.scss b/assets/stylesheets/bootstrap/_utilities-spacing.scss new file mode 100644 index 0000000..547bea7 --- /dev/null +++ b/assets/stylesheets/bootstrap/_utilities-spacing.scss @@ -0,0 +1,78 @@ +// Margin + +.m-a-0 { margin: 0 !important; } +.m-t-0 { margin-top: 0 !important; } +.m-r-0 { margin-right: 0 !important; } +.m-b-0 { margin-bottom: 0 !important; } +.m-l-0 { margin-left: 0 !important; } +.m-x-0 { margin-right: 0 !important; margin-left: 0 !important; } +.m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; } + +.m-a { margin: $spacer !important; } +.m-t { margin-top: $spacer-y !important; } +.m-r { margin-right: $spacer-x !important; } +.m-b { margin-bottom: $spacer-y !important; } +.m-l { margin-left: $spacer-x !important; } +.m-x { margin-right: $spacer-x !important; margin-left: $spacer-x !important; } +.m-y { margin-top: $spacer-y !important; margin-bottom: $spacer-y !important; } +.m-x-auto { margin-right: auto !important; margin-left: auto !important; } + +.m-a-md { margin: ($spacer * 1.5) !important; } +.m-t-md { margin-top: ($spacer-y * 1.5) !important; } +.m-r-md { margin-right: ($spacer-y * 1.5) !important; } +.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; } +.m-l-md { margin-left: ($spacer-y * 1.5) !important; } +.m-x-md { margin-right: ($spacer-x * 1.5) !important; margin-left: ($spacer-x * 1.5) !important; } +.m-y-md { margin-top: ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; } + +.m-a-lg { margin: ($spacer * 3) !important; } +.m-t-lg { margin-top: ($spacer-y * 3) !important; } +.m-r-lg { margin-right: ($spacer-y * 3) !important; } +.m-b-lg { margin-bottom: ($spacer-y * 3) !important; } +.m-l-lg { margin-left: ($spacer-y * 3) !important; } +.m-x-lg { margin-right: ($spacer-x * 3) !important; margin-left: ($spacer-x * 3) !important; } +.m-y-lg { margin-top: ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; } + +// Padding + +.p-a-0 { padding: 0 !important; } +.p-t-0 { padding-top: 0 !important; } +.p-r-0 { padding-right: 0 !important; } +.p-b-0 { padding-bottom: 0 !important; } +.p-l-0 { padding-left: 0 !important; } +.p-x-0 { padding-left: 0 !important; padding-right: 0 !important; } +.p-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; } + +.p-a { padding: $spacer !important; } +.p-t { padding-top: $spacer-y !important; } +.p-r { padding-right: $spacer-x !important; } +.p-b { padding-bottom: $spacer-y !important; } +.p-l { padding-left: $spacer-x !important; } +.p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; } +.p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; } + +.p-a-md { padding: ($spacer * 1.5) !important; } +.p-t-md { padding-top: ($spacer-y * 1.5) !important; } +.p-r-md { padding-right: ($spacer-y * 1.5) !important; } +.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; } +.p-l-md { padding-left: ($spacer-y * 1.5) !important; } +.p-x-md { padding-right: ($spacer-x * 1.5) !important; padding-left: ($spacer-x * 1.5) !important; } +.p-y-md { padding-top: ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; } + +.p-a-lg { padding: ($spacer * 3) !important; } +.p-t-lg { padding-top: ($spacer-y * 3) !important; } +.p-r-lg { padding-right: ($spacer-y * 3) !important; } +.p-b-lg { padding-bottom: ($spacer-y * 3) !important; } +.p-l-lg { padding-left: ($spacer-y * 3) !important; } +.p-x-lg { padding-right: ($spacer-x * 3) !important; padding-left: ($spacer-x * 3) !important; } +.p-y-lg { padding-top: ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; } + +// Positioning + +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss index 8c99c71..12e2962 100644 --- a/assets/stylesheets/bootstrap/_utilities.scss +++ b/assets/stylesheets/bootstrap/_utilities.scss @@ -1,55 +1,137 @@ // -// Utility classes -// -------------------------------------------------- - - // Floats -// ------------------------- +// .clearfix { - @include clearfix; + @include clearfix(); } + .center-block { - @include center-block; + @include center-block(); } + .pull-right { - float: right !important; + @include pull-right(); } + .pull-left { - float: left !important; + @include pull-left(); } -// Toggling content -// ------------------------- +// +// Screenreaders +// -// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 -.hide { - display: none !important; +.sr-only { + @include sr-only(); +} + +.sr-only-focusable { + @include sr-only-focusable(); } -.show { - display: block !important; + +// Always hide an element with the `hidden` HTML attribute (from PureCSS). +[hidden] { + display: none !important; } + .invisible { visibility: hidden; } + .text-hide { - @include text-hide; + @include text-hide(); } -// Hide from screenreaders and browsers // -// Credit: HTML5 Boilerplate +// Text +// -.hidden { - display: none !important; +// 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; } +.text-truncate { @include text-truncate; } + +// Responsive alignment + +.text-xs-left { text-align: left; } +.text-xs-right { text-align: right; } +.text-xs-center { text-align: center; } + +@include media-breakpoint-up(sm) { + .text-sm-left { text-align: left; } + .text-sm-right { text-align: right; } + .text-sm-center { text-align: center; } +} + +@include media-breakpoint-up(md) { + .text-md-left { text-align: left; } + .text-md-right { text-align: right; } + .text-md-center { text-align: center; } +} + +@include media-breakpoint-up(lg) { + .text-lg-left { text-align: left; } + .text-lg-right { text-align: right; } + .text-lg-center { text-align: center; } } +@include media-breakpoint-up(xl) { + .text-xl-left { text-align: left; } + .text-xl-right { text-align: right; } + .text-xl-center { text-align: center; } +} + +// Transformation + +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } +.text-capitalize { text-transform: capitalize; } + +// Contextual colors + +.text-muted { + color: $text-muted; +} + +@include text-emphasis-variant('.text-primary', $brand-primary); + +@include text-emphasis-variant('.text-success', $brand-success); -// For Affix plugin -// ------------------------- +@include text-emphasis-variant('.text-info', $brand-info); -.affix { - position: fixed; +@include text-emphasis-variant('.text-warning', $brand-warning); + +@include text-emphasis-variant('.text-danger', $brand-danger); + + +// Contextual backgrounds +// For now we'll leave these alongside the text classes until v4 when we can +// safely shift things around (per SemVer rules). + +// Inverse +// Todo: redo this as a proper class +.bg-inverse { + color: $gray-lighter; + background-color: $gray-dark; +} + +.bg-faded { + background-color: $gray-lightest; } + +@include bg-variant('.bg-primary', $brand-primary); + +@include bg-variant('.bg-success', $brand-success); + +@include bg-variant('.bg-info', $brand-info); + +@include bg-variant('.bg-warning', $brand-warning); + +@include bg-variant('.bg-danger', $brand-danger); diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index bf9373b..b655a3f 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -1,273 +1,324 @@ -$bootstrap-sass-asset-helper: false !default; -// // Variables -// -------------------------------------------------- +// +// Copy settings from this file into the provided `_custom.scss` to override +// the Bootstrap defaults without modifying key, versioned files. + + +// Table of ontents +// +// Colors +// Options +// Spacing +// Body +// Links +// Grid breakpoints +// Grid containers +// Grid columns +// Fonts +// Components + +// General variable structure +// +// Variable format should follow the `$component-modifier-state-property` order. -//== Colors +// Colors // -//## Gray and brand colors for use across Bootstrap. +// Grayscale and brand colors for use across Bootstrap. -$gray-base: #000 !default; -$gray-darker: lighten($gray-base, 13.5%) !default; // #222 -$gray-dark: lighten($gray-base, 20%) !default; // #333 -$gray: lighten($gray-base, 33.5%) !default; // #555 -$gray-light: lighten($gray-base, 46.7%) !default; // #777 -$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee +$gray-dark: #373a3c !default; +$gray: #55595c !default; +$gray-light: #818a91 !default; +$gray-lighter: #eceeef !default; +$gray-lightest: #f7f7f9 !default; -$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 -$brand-success: #5cb85c !default; -$brand-info: #5bc0de !default; -$brand-warning: #f0ad4e !default; -$brand-danger: #d9534f !default; +$brand-primary: #0275d8 !default; +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; -//== Scaffolding +// Options // -//## Settings for some of the most global styles. +// Quickly modify global styling by enabling or disabling optional features. -//** Background color for `<body>`. -$body-bg: #fff !default; -//** Global text color on `<body>`. -$text-color: $gray-dark !default; +$enable-flex: false !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: false !default; +$enable-hover-media-query: false !default; -//** Global textual link color. -$link-color: $brand-primary !default; -//** Link hover color set via `darken()` function. -$link-hover-color: darken($link-color, 15%) !default; -//** Link hover decoration. -$link-hover-decoration: underline !default; +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. + +$spacer: 1rem !default; +$spacer-x: $spacer !default; +$spacer-y: $spacer !default; +$border-width: .0625rem !default; -//== Typography + +// Body // -//## Font, line-height, and color for body text, headings, and more. - -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; -//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; - -$font-size-base: 14px !default; -$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px -$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px - -$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px -$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px -$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px -$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px -$font-size-h5: $font-size-base !default; -$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px - -//** Unit-less `line-height` for use in components like buttons. -$line-height-base: 1.428571429 !default; // 20/14 -//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. -$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px - -//** By default, this inherits from the `<body>`. -$headings-font-family: inherit !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.1 !default; -$headings-color: inherit !default; - - -//== Iconography +// Settings for the `<body>` element. + +$body-bg: #fff !default; +$body-color: $gray-dark !default; + + +// Links // -//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. +// Style anchor elements. -//** Load fonts from this directory. +$link-color: $brand-primary !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; -// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path. -// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths. -$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default; -//** File name for all font files. -$icon-font-name: "glyphicons-halflings-regular" !default; -//** Element ID within SVG icon file. -$icon-font-svg-id: "glyphicons_halflingsregular" !default; +// Grid breakpoints +// +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. +$grid-breakpoints: ( + // Extra small screen / phone + xs: 0, + // Small screen / phone + sm: 34em, + // Medium screen / tablet + md: 48em, + // Large screen / desktop + lg: 62em, + // Extra large screen / wide desktop + xl: 75em +) !default; -//== Components + +// Grid containers // -//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 34rem, // 480 + md: 45rem, // 720 + lg: 60rem, // 960 + xl: 72.25rem // 1140 +) !default; -$padding-base-vertical: 6px !default; -$padding-base-horizontal: 12px !default; -$padding-large-vertical: 10px !default; -$padding-large-horizontal: 16px !default; +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 1.875rem !default; // 30px + + +// Typography +// +// Font, line-height, and color for body text, headings, and more. -$padding-small-vertical: 5px !default; -$padding-small-horizontal: 10px !default; +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; -$padding-xs-vertical: 1px !default; -$padding-xs-horizontal: 5px !default; +// Pixel value used to responsively scale all typography. Applied to the `<html>` element. +$font-size-root: 16px !default; -$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome -$line-height-small: 1.5 !default; +$font-size-base: 1rem !default; +$font-size-lg: 1.25rem !default; +$font-size-sm: .85rem !default; +$font-size-xs: .75rem !default; -$border-radius-base: 4px !default; -$border-radius-large: 6px !default; -$border-radius-small: 3px !default; +$font-size-h1: 2.5rem !default; +$font-size-h2: 2rem !default; +$font-size-h3: 1.75rem !default; +$font-size-h4: 1.5rem !default; +$font-size-h5: 1.25rem !default; +$font-size-h6: 1rem !default; -//** Global color for active items (e.g., navs or dropdowns). -$component-active-color: #fff !default; -//** Global background color for active items (e.g., navs or dropdowns). -$component-active-bg: $brand-primary !default; +$display1-size: 3.5rem !default; +$display2-size: 4.5rem !default; +$display3-size: 5.5rem !default; +$display4-size: 6rem !default; -//** Width of the `border` for generating carets that indicator dropdowns. -$caret-width-base: 4px !default; -//** Carets increase slightly in size for larger components. -$caret-width-large: 5px !default; +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$line-height: 1.5 !default; + +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.1 !default; +$headings-color: inherit !default; + +$lead-font-size: 1.25rem !default; +$lead-font-weight: 300 !default; + +$text-muted: $gray-light !default; + +$abbr-border-color: $gray-light !default; -//== Tables +$blockquote-small-color: $gray-light !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-border-color: $gray-lighter !default; + +$hr-border-color: rgba(0,0,0,.1) !default; +$hr-border-width: $border-width; + + +// Components +// +// Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +$line-height-lg: (4/3) !default; +$line-height-sm: 1.5 !default; + +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; + +$component-active-color: #fff !default; +$component-active-bg: $brand-primary !default; + +$caret-width: .3em !default; +$caret-width-lg: $caret-width !default; + + +// Tables // -//## Customizes the `.table` component with basic values, each used across all table variations. +// Customizes the `.table` component with basic values, each used across all table variations. -//** Padding for `<th>`s and `<td>`s. -$table-cell-padding: 8px !default; -//** Padding for cells in `.table-condensed`. -$table-condensed-cell-padding: 5px !default; +$table-cell-padding: .75rem !default; +$table-sm-cell-padding: .3rem !default; -//** Default background color used for all tables. $table-bg: transparent !default; -//** Background color used for `.table-striped`. $table-bg-accent: #f9f9f9 !default; -//** Background color used for `.table-hover`. $table-bg-hover: #f5f5f5 !default; $table-bg-active: $table-bg-hover !default; -//** Border color for table and cell borders. -$table-border-color: #ddd !default; +$table-border-color: $gray-lighter !default; -//== Buttons +// Buttons // -//## For each of Bootstrap's buttons, define text, background and border color. +// For each of Bootstrap's buttons, define text, background and border color. +$btn-padding-x: 1rem; +$btn-padding-y: .375rem; $btn-font-weight: normal !default; -$btn-default-color: #333 !default; -$btn-default-bg: #fff !default; -$btn-default-border: #ccc !default; - $btn-primary-color: #fff !default; $btn-primary-bg: $brand-primary !default; -$btn-primary-border: darken($btn-primary-bg, 5%) !default; +$btn-primary-border: $btn-primary-bg !default; -$btn-success-color: #fff !default; -$btn-success-bg: $brand-success !default; -$btn-success-border: darken($btn-success-bg, 5%) !default; +$btn-secondary-color: $gray-dark !default; +$btn-secondary-bg: #fff !default; +$btn-secondary-border: #ccc !default; $btn-info-color: #fff !default; $btn-info-bg: $brand-info !default; -$btn-info-border: darken($btn-info-bg, 5%) !default; +$btn-info-border: $btn-info-bg !default; + +$btn-success-color: #fff !default; +$btn-success-bg: $brand-success !default; +$btn-success-border: $btn-success-bg !default; $btn-warning-color: #fff !default; $btn-warning-bg: $brand-warning !default; -$btn-warning-border: darken($btn-warning-bg, 5%) !default; +$btn-warning-border: $btn-warning-bg !default; $btn-danger-color: #fff !default; $btn-danger-bg: $brand-danger !default; -$btn-danger-border: darken($btn-danger-bg, 5%) !default; +$btn-danger-border: $btn-danger-bg !default; $btn-link-disabled-color: $gray-light !default; +$btn-padding-x-sm: .75rem !default; +$btn-padding-y-sm: .25rem !default; + +$btn-padding-x-lg: 1.25rem !default; +$btn-padding-y-lg: .75rem !default; + // Allows for customizing button radius independently from global border radius -$btn-border-radius-base: $border-radius-base !default; -$btn-border-radius-large: $border-radius-large !default; -$btn-border-radius-small: $border-radius-small !default; +$btn-border-radius: $border-radius; +$btn-border-radius-lg: $border-radius-lg; +$btn-border-radius-sm: $border-radius-sm; -//== Forms -// -//## +// Forms + +$input-padding-x: .75rem !default; +$input-padding-y: .375rem !default; -//** `<input>` background color $input-bg: #fff !default; -//** `<input disabled>` background color $input-bg-disabled: $gray-lighter !default; -//** Text color for `<input>`s $input-color: $gray !default; -//** `<input>` border color $input-border: #ccc !default; +$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; -// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 -//** Default `.form-control` border radius -// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS. -$input-border-radius: $border-radius-base !default; -//** Large `.form-control` border radius -$input-border-radius-large: $border-radius-large !default; -//** Small `.form-control` border radius -$input-border-radius-small: $border-radius-small !default; +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -//** Border color for inputs on focus $input-border-focus: #66afe9 !default; +$input-box-shadow-focus: rgba(102,175,233,.6) !default; -//** Placeholder text color $input-color-placeholder: #999 !default; -//** Default `.form-control` height -$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; -//** Large `.form-control` height -$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; -//** Small `.form-control` height -$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; +$input-padding-x-sm: .75rem !default; +$input-padding-y-sm: .275rem !default; -//** `.form-group` margin -$form-group-margin-bottom: 15px !default; +$input-padding-x-lg: 1.25rem !default; +$input-padding-y-lg: .75rem !default; -$legend-color: $gray-dark !default; -$legend-border-color: #e5e5e5 !default; +$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default; +$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2) + ($border-width * 2)) !default; +$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2) + ($border-width * 2)) !default; + +$form-group-margin-bottom: 15px; -//** Background color for textual input addons $input-group-addon-bg: $gray-lighter !default; -//** Border color for textual input addons $input-group-addon-border-color: $input-border !default; -//** Disabled cursor for form controls and buttons. $cursor-disabled: not-allowed !default; +// Form validation icons +$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg=="; +$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg=="; +$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4="; + -//== Dropdowns +// Dropdowns // -//## Dropdown menu container and contents. +// Dropdown menu container and contents. -//** Background for the dropdown menu. $dropdown-bg: #fff !default; -//** Dropdown menu `border-color`. $dropdown-border: rgba(0,0,0,.15) !default; -//** Dropdown menu `border-color` **for IE8**. -$dropdown-fallback-border: #ccc !default; -//** Divider color for between dropdown items. $dropdown-divider-bg: #e5e5e5 !default; -//** Dropdown link text color. $dropdown-link-color: $gray-dark !default; -//** Hover color for dropdown links. $dropdown-link-hover-color: darken($gray-dark, 5%) !default; -//** Hover background for dropdown links. $dropdown-link-hover-bg: #f5f5f5 !default; -//** Active dropdown menu item text color. $dropdown-link-active-color: $component-active-color !default; -//** Active dropdown menu item background color. $dropdown-link-active-bg: $component-active-bg !default; -//** Disabled dropdown menu item background color. $dropdown-link-disabled-color: $gray-light !default; -//** Text color for headers within dropdown menus. $dropdown-header-color: $gray-light !default; -//** Deprecated `$dropdown-caret-color` as of v3.1.0 -$dropdown-caret-color: #000 !default; - -//-- Z-index master list +// 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. @@ -279,158 +330,36 @@ $zindex-dropdown: 1000 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; -$zindex-modal-background: 1040 !default; +$zindex-navbar-sticky: 1030 !default; +$zindex-modal-bg: 1040 !default; $zindex-modal: 1050 !default; -//== 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 !default; -//** Deprecated `$screen-xs-min` as of v3.2.0 -$screen-xs-min: $screen-xs !default; -//** Deprecated `$screen-phone` as of v3.0.1 -$screen-phone: $screen-xs-min !default; - -// Small screen / tablet -//** Deprecated `$screen-sm` as of v3.0.1 -$screen-sm: 768px !default; -$screen-sm-min: $screen-sm !default; -//** Deprecated `$screen-tablet` as of v3.0.1 -$screen-tablet: $screen-sm-min !default; - -// Medium screen / desktop -//** Deprecated `$screen-md` as of v3.0.1 -$screen-md: 992px !default; -$screen-md-min: $screen-md !default; -//** Deprecated `$screen-desktop` as of v3.0.1 -$screen-desktop: $screen-md-min !default; - -// Large screen / wide desktop -//** Deprecated `$screen-lg` as of v3.0.1 -$screen-lg: 1200px !default; -$screen-lg-min: $screen-lg !default; -//** Deprecated `$screen-lg-desktop` as of v3.0.1 -$screen-lg-desktop: $screen-lg-min !default; - -// So media queries don't overlap when required, provide a maximum -$screen-xs-max: ($screen-sm-min - 1) !default; -$screen-sm-max: ($screen-md-min - 1) !default; -$screen-md-max: ($screen-lg-min - 1) !default; - - -//== Grid system -// -//## Define your custom responsive grid. +// Navbar -//** Number of columns in the grid. -$grid-columns: 12 !default; -//** Padding between columns. Gets divided in half for the left and right. -$grid-gutter-width: 30px !default; -// Navbar collapse -//** Point at which the navbar becomes uncollapsed. -$grid-float-breakpoint: $screen-sm-min !default; -//** Point at which the navbar begins collapsing. -$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; +$navbar-border-radius: $border-radius !default; +$navbar-padding-horizontal: $spacer !default; +$navbar-padding-vertical: ($spacer / 2) !default; +$navbar-dark-color: rgba(255,255,255,.5); +$navbar-dark-hover-color: rgba(255,255,255,.75); +$navbar-dark-active-color: rgba(255,255,255,1); +$navbar-dark-disabled-color: rgba(255,255,255,.25); -//== Container sizes -// -//## Define the maximum width of `.container` for different screen sizes. - -// Small screen / tablet -$container-tablet: (720px + $grid-gutter-width) !default; -//** For `$screen-sm-min` and up. -$container-sm: $container-tablet !default; +$navbar-light-color: rgba(0,0,0,.3); +$navbar-light-hover-color: rgba(0,0,0,.6); +$navbar-light-active-color: rgba(0,0,0,.8); +$navbar-light-disabled-color: rgba(0,0,0,.15); -// Medium screen / desktop -$container-desktop: (940px + $grid-gutter-width) !default; -//** For `$screen-md-min` and up. -$container-md: $container-desktop !default; -// Large screen / wide desktop -$container-large-desktop: (1140px + $grid-gutter-width) !default; -//** For `$screen-lg-min` and up. -$container-lg: $container-large-desktop !default; - - -//== Navbar -// -//## - -// Basics of a navbar -$navbar-height: 50px !default; -$navbar-margin-bottom: $line-height-computed !default; -$navbar-border-radius: $border-radius-base !default; -$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; -$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; -$navbar-collapse-max-height: 340px !default; - -$navbar-default-color: #777 !default; -$navbar-default-bg: #f8f8f8 !default; -$navbar-default-border: darken($navbar-default-bg, 6.5%) !default; - -// Navbar links -$navbar-default-link-color: #777 !default; -$navbar-default-link-hover-color: #333 !default; -$navbar-default-link-hover-bg: transparent !default; -$navbar-default-link-active-color: #555 !default; -$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; -$navbar-default-link-disabled-color: #ccc !default; -$navbar-default-link-disabled-bg: transparent !default; - -// Navbar brand label -$navbar-default-brand-color: $navbar-default-link-color !default; -$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; -$navbar-default-brand-hover-bg: transparent !default; - -// Navbar toggle -$navbar-default-toggle-hover-bg: #ddd !default; -$navbar-default-toggle-icon-bar-bg: #888 !default; -$navbar-default-toggle-border-color: #ddd !default; - - -//=== Inverted navbar -// Reset inverted navbar basics -$navbar-inverse-color: lighten($gray-light, 15%) !default; -$navbar-inverse-bg: #222 !default; -$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; - -// Inverted navbar links -$navbar-inverse-link-color: lighten($gray-light, 15%) !default; -$navbar-inverse-link-hover-color: #fff !default; -$navbar-inverse-link-hover-bg: transparent !default; -$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; -$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; -$navbar-inverse-link-disabled-color: #444 !default; -$navbar-inverse-link-disabled-bg: transparent !default; - -// Inverted navbar brand label -$navbar-inverse-brand-color: $navbar-inverse-link-color !default; -$navbar-inverse-brand-hover-color: #fff !default; -$navbar-inverse-brand-hover-bg: transparent !default; - -// Inverted navbar toggle -$navbar-inverse-toggle-hover-bg: #333 !default; -$navbar-inverse-toggle-icon-bar-bg: #fff !default; -$navbar-inverse-toggle-border-color: #333 !default; - - -//== Navs -// -//## +// Navs -//=== Shared nav styles -$nav-link-padding: 10px 15px !default; +$nav-link-padding: .5em 1em !default; $nav-link-hover-bg: $gray-lighter !default; $nav-disabled-link-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default; -//== Tabs $nav-tabs-border-color: #ddd !default; $nav-tabs-link-hover-border-color: $gray-lighter !default; @@ -442,15 +371,20 @@ $nav-tabs-active-link-hover-border-color: #ddd !default; $nav-tabs-justified-link-border-color: #ddd !default; $nav-tabs-justified-active-link-border-color: $body-bg !default; -//== Pills -$nav-pills-border-radius: $border-radius-base !default; +$nav-pills-border-radius: $border-radius !default; $nav-pills-active-link-hover-bg: $component-active-bg !default; $nav-pills-active-link-hover-color: $component-active-color !default; -//== Pagination -// -//## +// Pagination + +$pagination-padding-x: .75rem !default; +$pagination-padding-y: .5rem !default; +$pagination-padding-x-sm: .75rem !default; +$pagination-padding-y-sm: .275rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-padding-y-lg: .75rem !default; + $pagination-color: $link-color !default; $pagination-bg: #fff !default; @@ -469,9 +403,7 @@ $pagination-disabled-bg: #fff !default; $pagination-disabled-border: #ddd !default; -//== Pager -// -//## +// Pager $pager-bg: $pagination-bg !default; $pager-border: $pagination-border !default; @@ -485,135 +417,88 @@ $pager-active-color: $pagination-active-color !default; $pager-disabled-color: $pagination-disabled-color !default; -//== Jumbotron -// -//## +// Jumbotron -$jumbotron-padding: 30px !default; -$jumbotron-color: inherit !default; +$jumbotron-padding: 2rem !default; $jumbotron-bg: $gray-lighter !default; -$jumbotron-heading-color: inherit !default; -$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default; -$jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default; -//== Form states and alerts +// Form states and alerts // -//## Define colors for form feedback states and, by default, alerts. +// Define colors for form feedback states and, by default, alerts. $state-success-text: #3c763d !default; $state-success-bg: #dff0d8 !default; -$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; +$state-success-border: darken($state-success-bg, 5%) !default; $state-info-text: #31708f !default; $state-info-bg: #d9edf7 !default; -$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; +$state-info-border: darken($state-info-bg, 7%) !default; $state-warning-text: #8a6d3b !default; $state-warning-bg: #fcf8e3 !default; -$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; +$state-warning-border: darken($state-warning-bg, 5%) !default; $state-danger-text: #a94442 !default; $state-danger-bg: #f2dede !default; -$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; +$state-danger-border: darken($state-danger-bg, 5%) !default; -//== Tooltips -// -//## +// Tooltips -//** Tooltip max width $tooltip-max-width: 200px !default; -//** Tooltip text color $tooltip-color: #fff !default; -//** Tooltip background color $tooltip-bg: #000 !default; $tooltip-opacity: .9 !default; -//** Tooltip arrow width $tooltip-arrow-width: 5px !default; -//** Tooltip arrow color $tooltip-arrow-color: $tooltip-bg !default; -//== Popovers -// -//## +// Popovers -//** Popover body background color $popover-bg: #fff !default; -//** Popover maximum width $popover-max-width: 276px !default; -//** Popover border color $popover-border-color: rgba(0,0,0,.2) !default; -//** Popover fallback border color $popover-fallback-border-color: #ccc !default; -//** Popover title background color $popover-title-bg: darken($popover-bg, 3%) !default; -//** Popover arrow width $popover-arrow-width: 10px !default; -//** Popover arrow color $popover-arrow-color: $popover-bg !default; -//** Popover outer arrow width $popover-arrow-outer-width: ($popover-arrow-width + 1) !default; -//** Popover outer arrow color -$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default; -//** Popover outer arrow fallback color +$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; -//== Labels -// -//## +// Labels -//** Default label background color $label-default-bg: $gray-light !default; -//** Primary label background color $label-primary-bg: $brand-primary !default; -//** Success label background color $label-success-bg: $brand-success !default; -//** Info label background color $label-info-bg: $brand-info !default; -//** Warning label background color $label-warning-bg: $brand-warning !default; -//** Danger label background color $label-danger-bg: $brand-danger !default; -//** Default label text color $label-color: #fff !default; -//** Default text color of a linked label $label-link-hover-color: #fff !default; -//== Modals -// -//## +// Modals -//** Padding applied to the modal body +// Padding applied to the modal body $modal-inner-padding: 15px !default; -//** Padding applied to the modal title $modal-title-padding: 15px !default; -//** Modal title line-height -$modal-title-line-height: $line-height-base !default; +$modal-title-line-height: $line-height !default; -//** Background color of modal content area $modal-content-bg: #fff !default; -//** Modal content border color $modal-content-border-color: rgba(0,0,0,.2) !default; -//** Modal content border color **for IE8** -$modal-content-fallback-border-color: #999 !default; -//** Modal backdrop background color $modal-backdrop-bg: #000 !default; -//** Modal backdrop opacity $modal-backdrop-opacity: .5 !default; -//** Modal header border color $modal-header-border-color: #e5e5e5 !default; -//** Modal footer border color $modal-footer-border-color: $modal-header-border-color !default; $modal-lg: 900px !default; @@ -621,12 +506,12 @@ $modal-md: 600px !default; $modal-sm: 300px !default; -//== Alerts +// Alerts // -//## Define alert colors, border radius, and padding. +// Define alert colors, border radius, and padding. $alert-padding: 15px !default; -$alert-border-radius: $border-radius-base !default; +$alert-border-radius: $border-radius !default; $alert-link-font-weight: bold !default; $alert-success-bg: $state-success-bg !default; @@ -646,56 +531,33 @@ $alert-danger-text: $state-danger-text !default; $alert-danger-border: $state-danger-border !default; -//== Progress bars -// -//## +// Progress bars -//** Background color of the whole progress component $progress-bg: #f5f5f5 !default; -//** Progress bar text color $progress-bar-color: #fff !default; -//** Variable for setting rounded corners on progress bar. -$progress-border-radius: $border-radius-base !default; +$progress-border-radius: $border-radius !default; -//** Default progress bar color $progress-bar-bg: $brand-primary !default; -//** Success progress bar color $progress-bar-success-bg: $brand-success !default; -//** Warning progress bar color $progress-bar-warning-bg: $brand-warning !default; -//** Danger progress bar color $progress-bar-danger-bg: $brand-danger !default; -//** Info progress bar color $progress-bar-info-bg: $brand-info !default; -//== List group -// -//## +// List group -//** Background color on `.list-group-item` $list-group-bg: #fff !default; -//** `.list-group-item` border color $list-group-border: #ddd !default; -//** List group border radius -$list-group-border-radius: $border-radius-base !default; +$list-group-border-radius: $border-radius !default; -//** Background color of single list items on hover $list-group-hover-bg: #f5f5f5 !default; -//** Text color of active list items $list-group-active-color: $component-active-color !default; -//** Background color of active list items $list-group-active-bg: $component-active-bg !default; -//** Border color of active list elements $list-group-active-border: $list-group-active-bg !default; -//** Text color for content within active list items $list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; -//** Text color of disabled list items $list-group-disabled-color: $gray-light !default; -//** Background color of disabled list items $list-group-disabled-bg: $gray-lighter !default; -//** Text color for content within disabled list items $list-group-disabled-text-color: $list-group-disabled-color !default; $list-group-link-color: #555 !default; @@ -703,110 +565,26 @@ $list-group-link-hover-color: $list-group-link-color !default; $list-group-link-heading-color: #333 !default; -//== Panels -// -//## - -$panel-bg: #fff !default; -$panel-body-padding: 15px !default; -$panel-heading-padding: 10px 15px !default; -$panel-footer-padding: $panel-heading-padding !default; -$panel-border-radius: $border-radius-base !default; - -//** Border color for elements within panels -$panel-inner-border: #ddd !default; -$panel-footer-bg: #f5f5f5 !default; - -$panel-default-text: $gray-dark !default; -$panel-default-border: #ddd !default; -$panel-default-heading-bg: #f5f5f5 !default; - -$panel-primary-text: #fff !default; -$panel-primary-border: $brand-primary !default; -$panel-primary-heading-bg: $brand-primary !default; - -$panel-success-text: $state-success-text !default; -$panel-success-border: $state-success-border !default; -$panel-success-heading-bg: $state-success-bg !default; - -$panel-info-text: $state-info-text !default; -$panel-info-border: $state-info-border !default; -$panel-info-heading-bg: $state-info-bg !default; - -$panel-warning-text: $state-warning-text !default; -$panel-warning-border: $state-warning-border !default; -$panel-warning-heading-bg: $state-warning-bg !default; +// Image thumbnails -$panel-danger-text: $state-danger-text !default; -$panel-danger-border: $state-danger-border !default; -$panel-danger-heading-bg: $state-danger-bg !default; - - -//== Thumbnails -// -//## - -//** Padding around the thumbnail image -$thumbnail-padding: 4px !default; -//** Thumbnail background color +$thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; -//** Thumbnail border color $thumbnail-border: #ddd !default; -//** Thumbnail border radius -$thumbnail-border-radius: $border-radius-base !default; - -//** Custom text color for thumbnail captions -$thumbnail-caption-color: $text-color !default; -//** Padding around the thumbnail caption -$thumbnail-caption-padding: 9px !default; - - -//== Wells -// -//## - -$well-bg: #f5f5f5 !default; -$well-border: darken($well-bg, 7%) !default; - - -//== Badges -// -//## - -$badge-color: #fff !default; -//** Linked badge text color on hover -$badge-link-hover-color: #fff !default; -$badge-bg: $gray-light !default; +$thumbnail-border-radius: $border-radius !default; -//** Badge text color in active nav link -$badge-active-color: $link-color !default; -//** Badge background color in active nav link -$badge-active-bg: #fff !default; -$badge-font-weight: bold !default; -$badge-line-height: 1 !default; -$badge-border-radius: 10px !default; +// Breadcrumbs +$breadcrumb-padding-vertical: .75rem !default; +$breadcrumb-padding-horizontal: 1rem !default; -//== Breadcrumbs -// -//## - -$breadcrumb-padding-vertical: 8px !default; -$breadcrumb-padding-horizontal: 15px !default; -//** Breadcrumb background color -$breadcrumb-bg: #f5f5f5 !default; -//** Breadcrumb text color -$breadcrumb-color: #ccc !default; -//** Text color of current page in the breadcrumb +$breadcrumb-bg: $gray-lighter !default; +$breadcrumb-divider-color: $gray-light !default; $breadcrumb-active-color: $gray-light !default; -//** Textual separator for between breadcrumb elements -$breadcrumb-separator: "/" !default; +$breadcrumb-divider: "/" !default; -//== Carousel -// -//## +// Carousel $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; @@ -821,52 +599,22 @@ $carousel-indicator-border-color: #fff !default; $carousel-caption-color: #fff !default; -//== Close -// -//## +// Close $close-font-weight: bold !default; $close-color: #000 !default; $close-text-shadow: 0 1px 0 #fff !default; -//== Code -// -//## +// Code -$code-color: #c7254e !default; -$code-bg: #f9f2f4 !default; +$code-color: #bd4147 !default; +$code-bg: #f7f7f9 !default; $kbd-color: #fff !default; $kbd-bg: #333 !default; -$pre-bg: #f5f5f5 !default; +$pre-bg: #f7f7f9 !default; $pre-color: $gray-dark !default; $pre-border-color: #ccc !default; $pre-scrollable-max-height: 340px !default; - - -//== Type -// -//## - -//** Horizontal offset for forms and lists. -$component-offset-horizontal: 180px !default; -//** Text muted color -$text-muted: $gray-light !default; -//** Abbreviations and acronyms border color -$abbr-border-color: $gray-light !default; -//** Headings small color -$headings-small-color: $gray-light !default; -//** Blockquote small color -$blockquote-small-color: $gray-light !default; -//** Blockquote font size -$blockquote-font-size: ($font-size-base * 1.25) !default; -//** Blockquote border color -$blockquote-border-color: $gray-lighter !default; -//** Page header border color -$page-header-border-color: $gray-lighter !default; -//** Width of horizontal description list titles -$dl-horizontal-offset: $component-offset-horizontal !default; -//** Horizontal line color. -$hr-border: $gray-lighter !default; diff --git a/assets/stylesheets/bootstrap/_wells.scss b/assets/stylesheets/bootstrap/_wells.scss deleted file mode 100644 index b865711..0000000 --- a/assets/stylesheets/bootstrap/_wells.scss +++ /dev/null @@ -1,29 +0,0 @@ -// -// Wells -// -------------------------------------------------- - - -// Base class -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: $well-bg; - border: 1px solid $well-border; - border-radius: $border-radius-base; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); - blockquote { - border-color: #ddd; - border-color: rgba(0,0,0,.15); - } -} - -// Sizes -.well-lg { - padding: 24px; - border-radius: $border-radius-large; -} -.well-sm { - padding: 9px; - border-radius: $border-radius-small; -} diff --git a/assets/stylesheets/bootstrap/mixins/_alerts.scss b/assets/stylesheets/bootstrap/mixins/_alert.scss index 3faf0b5..6ed3a81 100644 --- a/assets/stylesheets/bootstrap/mixins/_alerts.scss +++ b/assets/stylesheets/bootstrap/mixins/_alert.scss @@ -1,14 +1,14 @@ // Alerts -@mixin alert-variant($background, $border, $text-color) { +@mixin alert-variant($background, $border, $body-color) { background-color: $background; border-color: $border; - color: $text-color; + color: $body-color; hr { border-top-color: darken($border, 5%); } .alert-link { - color: darken($text-color, 10%); + color: darken($body-color, 10%); } } diff --git a/assets/stylesheets/bootstrap/mixins/_background-variant.scss b/assets/stylesheets/bootstrap/mixins/_background-variant.scss index 4c7769e..a665f25 100644 --- a/assets/stylesheets/bootstrap/mixins/_background-variant.scss +++ b/assets/stylesheets/bootstrap/mixins/_background-variant.scss @@ -3,10 +3,12 @@ // [converter] $parent hack @mixin bg-variant($parent, $color) { #{$parent} { + color: #fff; background-color: $color; } - a#{$parent}:hover, - a#{$parent}:focus { - background-color: darken($color, 10%); + a#{$parent} { + @include hover-focus { + background-color: darken($color, 10%); + } } } diff --git a/assets/stylesheets/bootstrap/mixins/_border-radius.scss b/assets/stylesheets/bootstrap/mixins/_border-radius.scss index ce19499..0b76c30 100644 --- a/assets/stylesheets/bootstrap/mixins/_border-radius.scss +++ b/assets/stylesheets/bootstrap/mixins/_border-radius.scss @@ -4,14 +4,17 @@ border-top-right-radius: $radius; border-top-left-radius: $radius; } + @mixin border-right-radius($radius) { border-bottom-right-radius: $radius; border-top-right-radius: $radius; } + @mixin border-bottom-radius($radius) { border-bottom-right-radius: $radius; border-bottom-left-radius: $radius; } + @mixin border-left-radius($radius) { border-bottom-left-radius: $radius; border-top-left-radius: $radius; diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss new file mode 100644 index 0000000..790bb73 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -0,0 +1,76 @@ +// Breakpoint viewport sizes and media queries. +// +// Breakpoints are defined as a map of (name: minimum width), order from small to large: +// +// (xs: 0, sm: 34rem, md: 45rem) +// +// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. + +// Name of the next breakpoint, or null for the last breakpoint. +// +// >> breakpoint-next(sm) +// md +// >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem)) +// md +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) +// md +@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} + +// Minimum breakpoint width. Null for the smallest (first) breakpoint. +// +// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem)) +// 34rem +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} + +// Maximum breakpoint width. Null for the largest (last) breakpoint. +// The maximum value is calculated as the minimum of the next one less 0.1. +// +// >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem)) +// 44.9rem +@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - 0.1, null); +} + +// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. +// Makes the @content apply to the given breakpoint and wider. +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} + +// Media of at most the maximum breakpoint width. No query for the largest breakpoint. +// Makes the @content apply to the given breakpoint and narrower. +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } @else { + @content; + } +} + +// Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + @include media-breakpoint-up($name, $breakpoints) { + @include media-breakpoint-down($name, $breakpoints) { + @content; + } + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index ad31187..75d2847 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss @@ -7,62 +7,86 @@ color: $color; background-color: $background; border-color: $border; +// $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); +// .box-shadow($shadow); + + $active-background: darken($background, 10%); + $active-border: darken($border, 12%); &:focus, - &.focus { - color: $color; - background-color: darken($background, 10%); - border-color: darken($border, 25%); - } - &:hover { - color: $color; - background-color: darken($background, 10%); - border-color: darken($border, 12%); - } + &.focus, &:active, &.active, .open > &.dropdown-toggle { color: $color; - background-color: darken($background, 10%); - border-color: darken($border, 12%); - - &:hover, - &:focus, - &.focus { - color: $color; - background-color: darken($background, 17%); - border-color: darken($border, 25%); - } + background-color: $active-background; + border-color: $active-border; + } + @include hover { + color: $color; + background-color: $active-background; + border-color: $active-border; } &:active, &.active, .open > &.dropdown-toggle { + // Remove the gradient for the pressed/active state background-image: none; + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } &.disabled, - &[disabled], + &:disabled, fieldset[disabled] & { - &, - &:hover, &:focus, - &.focus, - &:active, - &.active { + &.focus { + background-color: $background; + border-color: $border; + } + @include hover { background-color: $background; border-color: $border; } } +} - .badge { - color: $background; +@mixin button-outline-variant($color) { + color: $color; + background-image: none; + background-color: transparent; + border-color: $color; + + &:focus, + &.focus, + &:active, + &.active, + .open > &.dropdown-toggle { + color: #fff; + background-color: $color; + border-color: $color; + } + @include hover { + color: #fff; background-color: $color; + border-color: $color; + } + + &.disabled, + &:disabled, + fieldset[disabled] & { + &:focus, + &.focus { + border-color: lighten($color, 20%); + } + @include hover { + border-color: lighten($color, 20%); + } } } // Button sizes -@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { - padding: $padding-vertical $padding-horizontal; +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { + padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; - border-radius: $border-radius; + @include border-radius($border-radius); } diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 277aa5f..764c5e0 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -1,9 +1,9 @@ // Form validation states // -// Used in forms.less to generate the form validation CSS for warnings, errors, +// Used in _forms.scss to generate the form validation CSS for warnings, errors, // and successes. -@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { +@mixin form-control-validation($state, $color) { // Color the label and help text .help-block, .control-label, @@ -15,35 +15,36 @@ &.checkbox label, &.radio-inline label, &.checkbox-inline label { - color: $text-color; + color: $color; } // Set the border and box shadow on specific inputs to match .form-control { - border-color: $border-color; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + border-color: $color; + // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + &:focus { - border-color: darken($border-color, 10%); - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); - @include box-shadow($shadow); + // border-color: darken($border-color, 10%); + // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); + // @include box-shadow($shadow); } } + // Set validation states also for addons .input-group-addon { - color: $text-color; - border-color: $border-color; - background-color: $background-color; + color: $color; + border-color: $color; + background-color: lighten($color, 40%); } // Optional feedback icon .form-control-feedback { - color: $text-color; + color: $color; } } - // Form control focus state // // Generate a customized focus state and for any input with the specified color, -// which defaults to the `$input-border-focus` variable. +// which defaults to the `@input-border-focus` variable. // // We highly encourage you to not customize the default value, but instead use // this to tweak colors on an as-needed basis. This aesthetic change is based on @@ -52,12 +53,12 @@ // // Example usage: change the default blue border and shadow to white for better // contrast against a dark gray background. -@mixin form-control-focus($color: $input-border-focus) { - $color-rgba: rgba(red($color), green($color), blue($color), .6); +@mixin form-control-focus() { &:focus { - border-color: $color; - outline: 0; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); + border-color: $input-border-focus; + outline: none; + $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus; + @include box-shadow($shadow); } } @@ -66,14 +67,14 @@ // Relative text size, padding, and border-radii changes for form controls. For // horizontal sizing, wrap controls in the predefined grid classes. `<select>` // element gets special love because it's special, and that's a fact! -// [converter] $parent hack + @mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { #{$parent} { height: $input-height; padding: $padding-vertical $padding-horizontal; font-size: $font-size; line-height: $line-height; - border-radius: $border-radius; + @include border-radius($border-radius); } select#{$parent} { diff --git a/assets/stylesheets/bootstrap/mixins/_gradients.scss b/assets/stylesheets/bootstrap/mixins/_gradients.scss index a8939f5..c57eddc 100644 --- a/assets/stylesheets/bootstrap/mixins/_gradients.scss +++ b/assets/stylesheets/bootstrap/mixins/_gradients.scss @@ -1,58 +1,43 @@ // Gradients - - // 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. +// Color stops are not available in IE9. @mixin gradient-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-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 } // 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. +// Color stops are not available in IE9. @mixin gradient-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-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 } @mixin gradient-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+ + background-image: linear-gradient($deg, $start-color, $end-color); } @mixin gradient-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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 gets no color-stop at all for proper fallback } @mixin gradient-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: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 gets no color-stop at all for proper fallback } @mixin gradient-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; } @mixin gradient-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); -} +}
\ No newline at end of file diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss index 16d038c..ad2060c 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss @@ -3,79 +3,44 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { - @for $i from (1 + 1) through $grid-columns { - $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; - } - #{$list} { +@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + // Common properties for all breakpoints + %grid-column { 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)); - } -} - - -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { - @for $i from (1 + 1) through $grid-columns { - $list: "#{$list}, .col-#{$class}-#{$i}"; - } - #{$list} { - float: left; - } -} - - -@mixin calc-grid-column($index, $class, $type) { - @if ($type == width) and ($index > 0) { - .col-#{$class}-#{$index} { - width: percentage(($index / $grid-columns)); + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + } + @each $breakpoint in map-keys($breakpoints) { + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column; + } } - } - @if ($type == push) and ($index > 0) { - .col-#{$class}-push-#{$index} { - left: percentage(($index / $grid-columns)); - } - } - @if ($type == push) and ($index == 0) { - .col-#{$class}-push-0 { - left: auto; + @include media-breakpoint-up($breakpoint) { + // Work around cross-media @extend (https://github.com/sass/sass/issues/1050) + %grid-column-float-#{$breakpoint} { + @if $enable-flex { + // Do nothing + } @else { + float: left; + } + } + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @extend %grid-column-float-#{$breakpoint}; + @include make-col-span($i, $columns); + } + } + @each $modifier in (pull, push, offset) { + @for $i from 0 through $columns { + .col-#{$breakpoint}-#{$modifier}-#{$i} { + @include make-col-modifier($modifier, $i, $columns) + } + } + } } } - @if ($type == pull) and ($index > 0) { - .col-#{$class}-pull-#{$index} { - right: percentage(($index / $grid-columns)); - } - } - @if ($type == pull) and ($index == 0) { - .col-#{$class}-pull-0 { - right: auto; - } - } - @if ($type == offset) { - .col-#{$class}-offset-#{$index} { - margin-left: percentage(($index / $grid-columns)); - } - } -} - -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin loop-grid-columns($columns, $class, $type) { - @for $i from 0 through $columns { - @include calc-grid-column($i, $class, $type); - } -} - - -// Create grid for specific class -@mixin make-grid($class) { - @include float-grid-columns($class); - @include loop-grid-columns($grid-columns, $class, width); - @include loop-grid-columns($grid-columns, $class, pull); - @include loop-grid-columns($grid-columns, $class, push); - @include loop-grid-columns($grid-columns, $class, offset); } diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index 0820258..56b8c6f 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -1,122 +1,65 @@ -// Grid system +/// Grid system // // Generate semantic grid columns with these mixins. -// Centered container element -@mixin container-fixed($gutter: $grid-gutter-width) { +@mixin make-container($gutter: $grid-gutter-width) { margin-right: auto; margin-left: auto; padding-left: ($gutter / 2); padding-right: ($gutter / 2); - @include clearfix; + @include clearfix(); } -// Creates a wrapper for a series of columns @mixin make-row($gutter: $grid-gutter-width) { - margin-left: ceil(($gutter / -2)); - margin-right: floor(($gutter / -2)); - @include clearfix; -} - -// Generate the extra small columns -@mixin 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); -} -@mixin make-xs-column-offset($columns) { - margin-left: percentage(($columns / $grid-columns)); -} -@mixin make-xs-column-push($columns) { - left: percentage(($columns / $grid-columns)); -} -@mixin make-xs-column-pull($columns) { - right: percentage(($columns / $grid-columns)); + @if $enable-flex { + display: flex; + flex-wrap: wrap; + } @else { + @include clearfix(); + } + margin-left: ($gutter / -2); + margin-right: ($gutter / -2); } -// Generate the small columns -@mixin make-sm-column($columns, $gutter: $grid-gutter-width) { +@mixin make-col($gutter: $grid-gutter-width) { position: relative; - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - - @media (min-width: $screen-sm-min) { + @if $enable-flex { + // Do nothing + } @else { float: left; - width: percentage(($columns / $grid-columns)); } -} -@mixin make-sm-column-offset($columns) { - @media (min-width: $screen-sm-min) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-sm-column-push($columns) { - @media (min-width: $screen-sm-min) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-sm-column-pull($columns) { - @media (min-width: $screen-sm-min) { - right: percentage(($columns / $grid-columns)); - } -} - -// Generate the medium columns -@mixin 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)); - } -} -@mixin make-md-column-offset($columns) { - @media (min-width: $screen-md-min) { - margin-left: percentage(($columns / $grid-columns)); - } } -@mixin make-md-column-push($columns) { - @media (min-width: $screen-md-min) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-md-column-pull($columns) { - @media (min-width: $screen-md-min) { - right: percentage(($columns / $grid-columns)); + +@mixin make-col-span($size, $columns: $grid-columns) { + @if $enable-flex { + flex: 0 0 percentage($size / $columns); + } @else { + width: percentage($size / $columns); } } -// Generate the large columns -@mixin 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)); - } +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); } -@mixin make-lg-column-offset($columns) { - @media (min-width: $screen-lg-min) { - margin-left: percentage(($columns / $grid-columns)); - } + +@mixin make-col-push($size, $columns: $grid-columns) { + left: if($size > 0, percentage($size / $columns), auto); } -@mixin make-lg-column-push($columns) { - @media (min-width: $screen-lg-min) { - left: percentage(($columns / $grid-columns)); - } + +@mixin make-col-pull($size, $columns: $grid-columns) { + right: if($size > 0, percentage($size / $columns), auto); } -@mixin make-lg-column-pull($columns) { - @media (min-width: $screen-lg-min) { - right: percentage(($columns / $grid-columns)); + +@mixin make-col-modifier($type, $size, $columns) { + // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) + @if $type == push { + @include make-col-push($size, $columns); + } @else if $type == pull { + @include make-col-pull($size, $columns); + } @else if $type == offset { + @include make-col-offset($size, $columns); } } diff --git a/assets/stylesheets/bootstrap/mixins/_hide-text.scss b/assets/stylesheets/bootstrap/mixins/_hide-text.scss index cd17cba..daed5fb 100644 --- a/assets/stylesheets/bootstrap/mixins/_hide-text.scss +++ b/assets/stylesheets/bootstrap/mixins/_hide-text.scss @@ -1,21 +1,8 @@ // 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) -@mixin hide-text() { - font: 0/0 a; +@mixin text-hide() { + font: "0/0" a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } - -// New mixin to use as of v3.0.1 -@mixin text-hide() { - @include hide-text; -} diff --git a/assets/stylesheets/bootstrap/mixins/_hover.scss b/assets/stylesheets/bootstrap/mixins/_hover.scss new file mode 100644 index 0000000..3a11254 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_hover.scss @@ -0,0 +1,59 @@ +@mixin hover { + @if $enable-hover-media-query { + // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover + // Currently shimmed by https://github.com/twbs/mq4-hover-shim + @media (hover: hover) { + &:hover { @content } + } + } + @else { + &:hover { @content } + } +} + +@mixin hover-focus { + @if $enable-hover-media-query { + &:focus { @content } + @include hover { @content } + } + @else { + &:focus, + &:hover { + @content + } + } +} + +@mixin plain-hover-focus { + @if $enable-hover-media-query { + &, + &:focus { + @content + } + @include hover { @content } + } + @else { + &, + &:focus, + &:hover { + @content + } + } +} + +@mixin hover-focus-active { + @if $enable-hover-media-query { + &:focus, + &:active { + @content + } + @include hover { @content } + } + @else { + &:focus, + &:active, + &:hover { + @content + } + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_image.scss b/assets/stylesheets/bootstrap/mixins/_image.scss index c8dcf5e..bec9626 100644 --- a/assets/stylesheets/bootstrap/mixins/_image.scss +++ b/assets/stylesheets/bootstrap/mixins/_image.scss @@ -6,6 +6,7 @@ // Responsive image // // Keep images from scaling beyond the width of their parents. + @mixin img-responsive($display: block) { display: $display; max-width: 100%; // Part 1: Set a maximum relative to the parent @@ -15,19 +16,18 @@ // Retina image // -// Short retina mixin for setting background-image and -size. Note that the -// spelling of `min--moz-device-pixel-ratio` is intentional. +// Short retina mixin for setting background-image and -size. + @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { - background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-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(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}")); + background-image: url("#{file-2x}"); background-size: $width-1x $height-1x; } } diff --git a/assets/stylesheets/bootstrap/mixins/_labels.scss b/assets/stylesheets/bootstrap/mixins/_label.scss index eda6dfd..4bc48c6 100644 --- a/assets/stylesheets/bootstrap/mixins/_labels.scss +++ b/assets/stylesheets/bootstrap/mixins/_label.scss @@ -4,8 +4,7 @@ background-color: $color; &[href] { - &:hover, - &:focus { + @include hover-focus { background-color: darken($color, 10%); } } diff --git a/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss index c478eeb..a40dda9 100644 --- a/assets/stylesheets/bootstrap/mixins/_list-group.scss +++ b/assets/stylesheets/bootstrap/mixins/_list-group.scss @@ -1,32 +1,30 @@ // List Groups @mixin list-group-item-variant($state, $background, $color) { - .list-group-item-#{$state} { + .list-group-item-#{state} { color: $color; background-color: $background; - - // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state} } - a.list-group-item-#{$state}, - button.list-group-item-#{$state} { + a.list-group-item-#{state}, + button.list-group-item-#{state} { color: $color; .list-group-item-heading { color: inherit; } - &:hover, - &:focus { + @include hover-focus { color: $color; background-color: darken($background, 5%); } - &.active, - &.active:hover, - &.active:focus { - color: #fff; - background-color: $color; - border-color: $color; + + &.active { + @include plain-hover-focus { + color: #fff; + background-color: $color; + border-color: $color; + } } } } diff --git a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss index 2e6da02..fb3d12e 100644 --- a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +++ b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss @@ -4,7 +4,7 @@ @mixin nav-divider($color: #e5e5e5) { height: 1px; - margin: (($line-height-computed / 2) - 1) 0; + margin: ($spacer-y / 2) 0; overflow: hidden; background-color: $color; } diff --git a/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss b/assets/stylesheets/bootstrap/mixins/_navbar-align.scss index c8fbf1a..c454a4f 100644 --- a/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss +++ b/assets/stylesheets/bootstrap/mixins/_navbar-align.scss @@ -3,7 +3,7 @@ // 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. -@mixin navbar-vertical-align($element-height) { - margin-top: (($navbar-height - $element-height) / 2); - margin-bottom: (($navbar-height - $element-height) / 2); -} +// @mixin navbar-vertical-align($element-height) { +// margin-top: (($navbar-height - $element-height) / 2); +// margin-bottom: (($navbar-height - $element-height) / 2); +// } diff --git a/assets/stylesheets/bootstrap/mixins/_opacity.scss b/assets/stylesheets/bootstrap/mixins/_opacity.scss deleted file mode 100644 index 88e9a57..0000000 --- a/assets/stylesheets/bootstrap/mixins/_opacity.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Opacity - -@mixin opacity($opacity) { - opacity: $opacity; - // IE8 filter - $opacity-ie: ($opacity * 100); - filter: alpha(opacity=$opacity-ie); -} diff --git a/assets/stylesheets/bootstrap/mixins/_panels.scss b/assets/stylesheets/bootstrap/mixins/_panels.scss deleted file mode 100644 index 3ff31ae..0000000 --- a/assets/stylesheets/bootstrap/mixins/_panels.scss +++ /dev/null @@ -1,24 +0,0 @@ -// Panels - -@mixin 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/assets/stylesheets/bootstrap/mixins/_progress-bar.scss b/assets/stylesheets/bootstrap/mixins/_progress-bar.scss deleted file mode 100644 index 90a62af..0000000 --- a/assets/stylesheets/bootstrap/mixins/_progress-bar.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Progress bars - -@mixin progress-bar-variant($color) { - background-color: $color; - - // Deprecated parent class requirement as of v3.2.0 - .progress-striped & { - @include gradient-striped; - } -} diff --git a/assets/stylesheets/bootstrap/mixins/_progress.scss b/assets/stylesheets/bootstrap/mixins/_progress.scss new file mode 100644 index 0000000..802e179 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_progress.scss @@ -0,0 +1,17 @@ +// Progress bars + +@mixin progress-variant($color) { + &[value]::-webkit-progress-value { + background-color: $color; + } + + &[value]::-moz-progress-bar { + background-color: $color; + } + + @media screen and (min-width:0\0) { + .progress-bar { + background-color: $color; + } + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_pulls.scss b/assets/stylesheets/bootstrap/mixins/_pulls.scss new file mode 100644 index 0000000..6bdff02 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_pulls.scss @@ -0,0 +1,6 @@ +@mixin pull-left { + float: left !important; +} +@mixin pull-right { + float: right !important; +} diff --git a/assets/stylesheets/bootstrap/mixins/_reset-filter.scss b/assets/stylesheets/bootstrap/mixins/_reset-filter.scss index bf73051..044b349 100644 --- a/assets/stylesheets/bootstrap/mixins/_reset-filter.scss +++ b/assets/stylesheets/bootstrap/mixins/_reset-filter.scss @@ -1,8 +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. +// the IE filter for IE9. @mixin reset-filter() { - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"; } diff --git a/assets/stylesheets/bootstrap/mixins/_reset-text.scss b/assets/stylesheets/bootstrap/mixins/_reset-text.scss index c9c2841..014dff5 100644 --- a/assets/stylesheets/bootstrap/mixins/_reset-text.scss +++ b/assets/stylesheets/bootstrap/mixins/_reset-text.scss @@ -1,11 +1,11 @@ -@mixin reset-text() { +@mixin 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; + line-height: $line-height; text-align: left; // Fallback for where `start` is not supported text-align: start; text-decoration: none; diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss new file mode 100644 index 0000000..e52b282 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss @@ -0,0 +1,32 @@ +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +@mixin sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + 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 + +@mixin sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_table-row.scss b/assets/stylesheets/bootstrap/mixins/_table-row.scss index 1367950..84f1d30 100644 --- a/assets/stylesheets/bootstrap/mixins/_table-row.scss +++ b/assets/stylesheets/bootstrap/mixins/_table-row.scss @@ -3,26 +3,28 @@ @mixin 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 { + .table-#{$state} { + &, + > th, + > td { 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%); + .table-hover { + $hover-background: darken($background, 5%); + + .table-#{$state} { + @include hover { + background-color: $hover-background; + + > td, + > th { + background-color: $hover-background; + } + } } } } diff --git a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss index 3b446c4..0a6428e 100644 --- a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +++ b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss @@ -1,12 +1,12 @@ // Typography -// [converter] $parent hack @mixin text-emphasis-variant($parent, $color) { #{$parent} { color: $color; } - a#{$parent}:hover, - a#{$parent}:focus { - color: darken($color, 10%); + a#{$parent} { + @include hover-focus { + color: darken($color, 10%); + } } } diff --git a/assets/stylesheets/bootstrap/mixins/_text-overflow.scss b/assets/stylesheets/bootstrap/mixins/_text-truncate.scss index 1593b25..5a40bf5 100644 --- a/assets/stylesheets/bootstrap/mixins/_text-overflow.scss +++ b/assets/stylesheets/bootstrap/mixins/_text-truncate.scss @@ -1,8 +1,8 @@ -// Text overflow +// Text truncate // Requires inline-block or block for proper styling -@mixin text-overflow() { +@mixin text-truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} +}
\ No newline at end of file diff --git a/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss b/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss deleted file mode 100644 index df4c1ec..0000000 --- a/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss +++ /dev/null @@ -1,222 +0,0 @@ -// 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 -@mixin animation($animation) { - -webkit-animation: $animation; - -o-animation: $animation; - animation: $animation; -} -@mixin animation-name($name) { - -webkit-animation-name: $name; - animation-name: $name; -} -@mixin animation-duration($duration) { - -webkit-animation-duration: $duration; - animation-duration: $duration; -} -@mixin animation-timing-function($timing-function) { - -webkit-animation-timing-function: $timing-function; - animation-timing-function: $timing-function; -} -@mixin animation-delay($delay) { - -webkit-animation-delay: $delay; - animation-delay: $delay; -} -@mixin animation-iteration-count($iteration-count) { - -webkit-animation-iteration-count: $iteration-count; - animation-iteration-count: $iteration-count; -} -@mixin animation-direction($direction) { - -webkit-animation-direction: $direction; - animation-direction: $direction; -} -@mixin 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` - -@mixin 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. - -@mixin box-shadow($shadow...) { - -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; -} - -// Box sizing -@mixin box-sizing($boxmodel) { - -webkit-box-sizing: $boxmodel; - -moz-box-sizing: $boxmodel; - box-sizing: $boxmodel; -} - -// CSS3 Content Columns -@mixin 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 -@mixin hyphens($mode: auto) { - word-wrap: break-word; - -webkit-hyphens: $mode; - -moz-hyphens: $mode; - -ms-hyphens: $mode; // IE10+ - -o-hyphens: $mode; - hyphens: $mode; -} - -// Placeholder text -@mixin 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 -@mixin scale($ratio...) { - -webkit-transform: scale($ratio); - -ms-transform: scale($ratio); // IE9 only - -o-transform: scale($ratio); - transform: scale($ratio); -} - -@mixin scaleX($ratio) { - -webkit-transform: scaleX($ratio); - -ms-transform: scaleX($ratio); // IE9 only - -o-transform: scaleX($ratio); - transform: scaleX($ratio); -} -@mixin scaleY($ratio) { - -webkit-transform: scaleY($ratio); - -ms-transform: scaleY($ratio); // IE9 only - -o-transform: scaleY($ratio); - transform: scaleY($ratio); -} -@mixin 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); -} -@mixin translate($x, $y) { - -webkit-transform: translate($x, $y); - -ms-transform: translate($x, $y); // IE9 only - -o-transform: translate($x, $y); - transform: translate($x, $y); -} -@mixin translate3d($x, $y, $z) { - -webkit-transform: translate3d($x, $y, $z); - transform: translate3d($x, $y, $z); -} -@mixin rotate($degrees) { - -webkit-transform: rotate($degrees); - -ms-transform: rotate($degrees); // IE9 only - -o-transform: rotate($degrees); - transform: rotate($degrees); -} -@mixin rotateX($degrees) { - -webkit-transform: rotateX($degrees); - -ms-transform: rotateX($degrees); // IE9 only - -o-transform: rotateX($degrees); - transform: rotateX($degrees); -} -@mixin rotateY($degrees) { - -webkit-transform: rotateY($degrees); - -ms-transform: rotateY($degrees); // IE9 only - -o-transform: rotateY($degrees); - transform: rotateY($degrees); -} -@mixin perspective($perspective) { - -webkit-perspective: $perspective; - -moz-perspective: $perspective; - perspective: $perspective; -} -@mixin perspective-origin($perspective) { - -webkit-perspective-origin: $perspective; - -moz-perspective-origin: $perspective; - perspective-origin: $perspective; -} -@mixin transform-origin($origin) { - -webkit-transform-origin: $origin; - -moz-transform-origin: $origin; - -ms-transform-origin: $origin; // IE9 only - transform-origin: $origin; -} - - -// Transitions - -@mixin transition($transition...) { - -webkit-transition: $transition; - -o-transition: $transition; - transition: $transition; -} -@mixin transition-property($transition-property...) { - -webkit-transition-property: $transition-property; - transition-property: $transition-property; -} -@mixin transition-delay($transition-delay) { - -webkit-transition-delay: $transition-delay; - transition-delay: $transition-delay; -} -@mixin transition-duration($transition-duration...) { - -webkit-transition-duration: $transition-duration; - transition-duration: $transition-duration; -} -@mixin transition-timing-function($timing-function) { - -webkit-transition-timing-function: $timing-function; - transition-timing-function: $timing-function; -} -@mixin 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 - -@mixin user-select($select) { - -webkit-user-select: $select; - -moz-user-select: $select; - -ms-user-select: $select; // IE10+ - user-select: $select; -} |