diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss')
64 files changed, 1656 insertions, 1108 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-compass.scss b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-compass.scss new file mode 100644 index 0000000..82706c4 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-compass.scss @@ -0,0 +1,7 @@ +@function twbs-font-path($path) { + @return font-url($path, true); +} + +@function twbs-image-path($path) { + @return image-url($path, true); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-mincer.scss b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-mincer.scss new file mode 100644 index 0000000..3413250 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-mincer.scss @@ -0,0 +1,17 @@ +// 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}') %>"; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-sprockets.scss b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-sprockets.scss new file mode 100644 index 0000000..7d30692 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-sprockets.scss @@ -0,0 +1,7 @@ +@function twbs-font-path($path) { + @return font-path($path); +} + +@function twbs-image-path($path) { + @return image-path($path); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap.scss index ece2a0c..65204aa 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap.scss @@ -2,9 +2,10 @@ @import "bootstrap/variables"; @import "bootstrap/mixins"; -// Reset +// Reset and dependencies @import "bootstrap/normalize"; @import "bootstrap/print"; +@import "bootstrap/glyphicons"; // Core CSS @import "bootstrap/scaffolding"; @@ -17,7 +18,6 @@ // Components @import "bootstrap/component-animations"; -@import "bootstrap/glyphicons"; @import "bootstrap/dropdowns"; @import "bootstrap/button-groups"; @import "bootstrap/input-groups"; @@ -35,6 +35,7 @@ @import "bootstrap/media"; @import "bootstrap/list-group"; @import "bootstrap/panels"; +@import "bootstrap/responsive-embed"; @import "bootstrap/wells"; @import "bootstrap/close"; diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss index 4685ac3..e45de83 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss @@ -33,12 +33,13 @@ } } -// Dismissable alerts +// Dismissible alerts // // Expand the right padding and account for the close button's positioning. -.alert-dismissable { - padding-right: ($alert-padding + 20); +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + padding-right: ($alert-padding + 20); // Adjust close link position .close { diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_badges.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_badges.scss index 4014a80..02394ae 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_badges.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_badges.scss @@ -3,7 +3,7 @@ // -------------------------------------------------- -// Base classes +// Base class .badge { display: inline-block; min-width: 10px; @@ -32,6 +32,18 @@ top: 0; padding: 1px 5px; } + + // [converter] extracted a& to a.badge + + // Account for badges in navs + a.list-group-item.active > &, + .nav-pills > .active > a > & { + color: $badge-active-color; + background-color: $badge-active-bg; + } + .nav-pills > li > a > & { + margin-left: 3px; + } } // Hover state, but only for links @@ -43,13 +55,3 @@ a.badge { cursor: pointer; } } - -// Account for counters in navs -a.list-group-item.active > .badge, -.nav-pills > .active > a > .badge { - color: $badge-active-color; - background-color: $badge-active-bg; -} -.nav-pills > li > a > .badge { - margin-left: 3px; -} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_button-groups.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_button-groups.scss index 066b4d7..63ccd92 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_button-groups.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_button-groups.scss @@ -20,7 +20,7 @@ } &:focus { // Remove focus outline when dropdown JS adds it after closing the menu - outline: none; + outline: 0; } } } @@ -216,11 +216,25 @@ > .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 +// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot +// use `display: none;` or `visibility: hidden;` as that also hides the popover. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 for more. + [data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .btn > input[type="checkbox"] { - display: none; + position: absolute; + z-index: -1; + @include opacity(0); } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss index 28110b6..dae6ee3 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss @@ -140,8 +140,6 @@ .btn-block { display: block; width: 100%; - padding-left: 0; - padding-right: 0; } // Vertically space out multiple block buttons diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss index d8f2364..e9e2f7c 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss @@ -28,7 +28,9 @@ > .active, > .next, - > .prev { display: block; } + > .prev { + display: block; + } > .active { left: 0; @@ -91,7 +93,7 @@ // Hover/focus state &:hover, &:focus { - outline: none; + outline: 0; color: $carousel-control-color; text-decoration: none; @include opacity(.9); @@ -110,20 +112,22 @@ .icon-prev, .glyphicon-chevron-left { left: 50%; + margin-left: -10px; } .icon-next, .glyphicon-chevron-right { right: 50%; + margin-right: -10px; } .icon-prev, .icon-next { width: 20px; height: 20px; margin-top: -10px; - margin-left: -10px; font-family: serif; } + .icon-prev { &:before { content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) @@ -213,9 +217,16 @@ width: 30px; height: 30px; margin-top: -15px; - margin-left: -15px; font-size: 30px; } + .glyphicon-chevron-left, + .icon-prev { + margin-left: -15px; + } + .glyphicon-chevron-right, + .icon-next { + margin-right: -15px; + } } // Show and left align the captions diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss index 8953616..8d83b14 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss @@ -17,7 +17,6 @@ code { font-size: 90%; color: $code-color; background-color: $code-bg; - white-space: nowrap; border-radius: $border-radius-base; } @@ -29,6 +28,12 @@ kbd { background-color: $kbd-bg; border-radius: $border-radius-small; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + box-shadow: none; + } } // Blocks of code diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_component-animations.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_component-animations.scss index 86632fd..8c3fd07 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_component-animations.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_component-animations.scss @@ -5,7 +5,7 @@ // 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/twitter/bootstrap/pull/3552. +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. .fade { opacity: 0; @@ -17,10 +17,16 @@ .collapse { display: none; - &.in { - display: block; - } + + &.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; diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss index 526be5b..eb74be5 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss @@ -38,6 +38,7 @@ margin: 2px 0 0; // override default ul list-style: none; font-size: $font-size-base; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) background-color: $dropdown-bg; border: 1px solid $dropdown-fallback-border; // IE8 fallback border: 1px solid $dropdown-border; @@ -154,6 +155,7 @@ font-size: $font-size-small; line-height: $line-height-base; color: $dropdown-header-color; + white-space: nowrap; // as with > li > a } // Backdrop to catch body clicks on mobile, etc. diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss index 2628238..74bb67d 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss @@ -11,7 +11,7 @@ fieldset { padding: 0; margin: 0; border: 0; - // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets, + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, // so we reset that to ensure it behaves more like a standard block element. // See https://github.com/twbs/bootstrap/issues/12359. min-width: 0; @@ -31,6 +31,7 @@ legend { 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; } @@ -51,7 +52,7 @@ input[type="search"] { input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - margin-top: 1px \9; /* IE8-9 */ + margin-top: 1px \9; // IE8-9 line-height: normal; } @@ -166,13 +167,28 @@ input[type="search"] { } -// Special styles for iOS date input +// Special styles for iOS temporal inputs // -// In Mobile Safari, date inputs require a pixel line-height that matches the -// given height of the input. - -input[type="date"] { +// 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. Since this fucks up everything else, we have to +// appropriately reset it for Internet Explorer and the size variations. + +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { line-height: $input-height-base; + // IE8+ misaligns the text within date inputs, so we reset + line-height: $line-height-base #{\0}; + + &.input-sm { + line-height: $input-height-small; + } + &.input-lg { + line-height: $input-height-large; + } } @@ -192,13 +208,15 @@ input[type="date"] { .radio, .checkbox { + position: relative; display: block; min-height: $line-height-computed; // clear the floating input if there is no label text margin-top: 10px; margin-bottom: 10px; - padding-left: 20px; + label { - display: inline; + padding-left: 20px; + margin-bottom: 0; font-weight: normal; cursor: pointer; } @@ -207,9 +225,11 @@ input[type="date"] { .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { - float: left; + position: absolute; margin-left: -20px; + margin-top: 4px \9; } + .radio + .radio, .checkbox + .checkbox { margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing @@ -232,19 +252,55 @@ input[type="date"] { } // Apply same disabled cursor tweak as for inputs +// Some special care is needed because <label>s don't inherit their parent's `cursor`. // // Note: Neither radios nor checkboxes can be readonly. input[type="radio"], -input[type="checkbox"], -.radio, +input[type="checkbox"] { + &[disabled], + &.disabled, + fieldset[disabled] & { + cursor: not-allowed; + } +} +// These classes are used directly on <label>s .radio-inline, -.checkbox, .checkbox-inline { - &[disabled], + &.disabled, fieldset[disabled] & { cursor: not-allowed; } } +// These classes are used on elements with <label> descendants +.radio, +.checkbox { + &.disabled, + fieldset[disabled] & { + label { + cursor: not-allowed; + } + } +} + + +// Static form control text +// +// Apply class to a `p` element to make any string of text align with labels in +// a horizontal form layout. + +.form-control-static { + // Size it appropriately next to real form controls + padding-top: ($padding-base-vertical + 1); + padding-bottom: ($padding-base-vertical + 1); + // Remove default margin from `p` + margin-bottom: 0; + + &.input-lg, + &.input-sm { + padding-left: 0; + padding-right: 0; + } +} // Form control sizing @@ -269,18 +325,28 @@ input[type="checkbox"], .form-control { padding-right: ($input-height-base * 1.25); } - - // Feedback icon (requires .glyphicon classes) - .form-control-feedback { - position: absolute; - top: ($line-height-computed + 5); // Height of the `label` and its margin - right: 0; - display: block; - width: $input-height-base; - height: $input-height-base; - line-height: $input-height-base; - text-align: center; - } +} +// Feedback icon (requires .glyphicon classes) +.form-control-feedback { + position: absolute; + top: ($line-height-computed + 5); // Height of the `label` and its margin + 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; +} +.input-lg + .form-control-feedback { + width: $input-height-large; + height: $input-height-large; + line-height: $input-height-large; +} +.input-sm + .form-control-feedback { + width: $input-height-small; + height: $input-height-small; + line-height: $input-height-small; } // Feedback states @@ -295,13 +361,9 @@ input[type="checkbox"], } -// Static form control text -// -// Apply class to a `p` element to make any string of text align with labels in -// a horizontal form layout. - -.form-control-static { - margin-bottom: 0; // Remove default margin from `p` +// Reposition feedback icon if label is hidden with "screenreader only" state +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; } @@ -347,6 +409,18 @@ input[type="checkbox"], width: auto; // Prevent labels from stacking above inputs in `.form-group` vertical-align: middle; } + + .input-group { + display: inline-table; + vertical-align: middle; + + .input-group-addon, + .input-group-btn, + .form-control { + width: auto; + } + } + // Input groups need that 100% width though .input-group > .form-control { width: 100%; @@ -365,12 +439,15 @@ input[type="checkbox"], display: inline-block; margin-top: 0; margin-bottom: 0; - padding-left: 0; vertical-align: middle; + + label { + padding-left: 0; + } } .radio input[type="radio"], .checkbox input[type="checkbox"] { - float: none; + position: relative; margin-left: 0; } @@ -392,8 +469,9 @@ input[type="checkbox"], .form-horizontal { - // Consistent vertical alignment of labels, radios, and checkboxes - .control-label, + // 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, @@ -414,14 +492,13 @@ input[type="checkbox"], @include make-row(); } - .form-control-static { - padding-top: ($padding-base-vertical + 1); - } - - // Only right align form labels here when the columns stop stacking + // 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 } } @@ -433,4 +510,29 @@ input[type="checkbox"], top: 0; right: ($grid-gutter-width / 2); } + + // Form group sizes + // + // Quick utility class for applying `.input-lg` and `.input-sm` styles to the + // inputs and labels within a `.form-group`. + .form-group-lg { + @media (min-width: $screen-sm-min) { + .control-label { + padding-top: (($padding-large-vertical * $line-height-large) + 1); + } + } + .form-control { + @extend .input-lg; + } + } + .form-group-sm { + @media (min-width: $screen-sm-min) { + .control-label { + padding-top: ($padding-small-vertical + 1); + } + } + .form-control { + @extend .input-sm; + } + } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_glyphicons.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_glyphicons.scss index c508835..0f6ad34 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_glyphicons.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_glyphicons.scss @@ -1,3 +1,7 @@ +//= depend_on "bootstrap/glyphicons-halflings-regular.eot" +//= depend_on "bootstrap/glyphicons-halflings-regular.svg" +//= depend_on "bootstrap/glyphicons-halflings-regular.ttf" +//= depend_on "bootstrap/glyphicons-halflings-regular.woff" // // Glyphicons for Bootstrap // diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_input-groups.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_input-groups.scss index 6c26c1d..ae0e921 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_input-groups.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_input-groups.scss @@ -39,10 +39,14 @@ .input-group-lg > .form-control, .input-group-lg > .input-group-addon, -.input-group-lg > .input-group-btn > .btn { @extend .input-lg; } +.input-group-lg > .input-group-btn > .btn { + @extend .input-lg; +} .input-group-sm > .form-control, .input-group-sm > .input-group-addon, -.input-group-sm > .input-group-btn > .btn { @extend .input-sm; } +.input-group-sm > .input-group-btn > .btn { + @extend .input-sm; +} // Display as table-cell diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_jumbotron.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_jumbotron.scss index 4e401e7..75efe64 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_jumbotron.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_jumbotron.scss @@ -19,6 +19,10 @@ font-weight: 200; } + > hr { + border-top-color: darken($jumbotron-bg, 10%); + } + .container & { border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss index 8353eb1..42ed6ea 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss @@ -14,15 +14,7 @@ vertical-align: baseline; border-radius: .25em; - // Add hover effects, but only for links - &[href] { - &:hover, - &:focus { - color: $label-link-hover-color; - text-decoration: none; - cursor: pointer; - } - } + // [converter] extracted a& to a.label // Empty labels collapse automatically (not available in IE8) &:empty { @@ -36,6 +28,16 @@ } } +// Add hover effects, but only for links +a.label { + &:hover, + &:focus { + color: $label-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} + // Colors // Contextual variations (linked labels get darker on :hover) diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_list-group.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_list-group.scss index b608991..36c297c 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_list-group.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_list-group.scss @@ -62,8 +62,27 @@ a.list-group-item { &:hover, &:focus { text-decoration: none; + color: $list-group-link-hover-color; background-color: $list-group-hover-bg; } +} + +.list-group-item { + // Disabled state + &.disabled, + &.disabled:hover, + &.disabled:focus { + background-color: $list-group-disabled-bg; + color: $list-group-disabled-color; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: $list-group-disabled-text-color; + } + } // Active class on item itself, not parent &.active, @@ -75,7 +94,9 @@ a.list-group-item { border-color: $list-group-active-border; // Force color to inherit for custom content - .list-group-item-heading { + .list-group-item-heading, + .list-group-item-heading > small, + .list-group-item-heading > .small { color: inherit; } .list-group-item-text { diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss index 74ccf9f..b565f01 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss @@ -1,947 +1,39 @@ -// // Mixins // -------------------------------------------------- - // Utilities -// ------------------------- - -// Clearfix -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ -// -// For modern browsers -// 1. The space content is one way to avoid an Opera bug when the -// contenteditable attribute is included anywhere else in the document. -// Otherwise it causes space to appear at the top and bottom of elements -// that are clearfixed. -// 2. The use of `table` rather than `block` is only necessary if using -// `:before` to contain the top-margins of child elements. -@mixin clearfix() { - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - } - &:after { - clear: both; - } -} - -// WebKit-style focus -@mixin tab-focus() { - // Default - outline: thin dotted; - // WebKit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -@mixin center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -@mixin size($width, $height) { - width: $width; - height: $height; -} -@mixin square($size) { - @include size($size, $size); -} - -// Placeholder text -@mixin placeholder($color: $input-color-placeholder) { - &::-moz-placeholder { color: $color; // Firefox - opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 - &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: $color; } // Safari and Chrome -} - -// Text overflow -// Requires inline-block or block for proper styling -@mixin text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// -// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for -// mixins being reused as classes with the same name, this doesn't hold up. As -// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note -// that we cannot chain the mixins together in Less, so they are repeated. -// -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 - -// Deprecated as of v3.0.1 (will be removed in v4) -@mixin hide-text() { - font: #{0/0} a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -// New mixin to use as of v3.0.1 -@mixin text-hide() { - @include hide-text(); -} - - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Single side border-radius -@mixin border-top-radius($radius) { - 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; -} - -// Drop shadows -// -// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's -// supported browsers that have box shadow capabilities now support the -// standard `box-shadow` property. -@mixin box-shadow($shadow...) { - -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; -} - -// Transitions -@mixin transition($transition...) { - -webkit-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-transform($transition...) { - -webkit-transition: -webkit-transform $transition; - -moz-transition: -moz-transform $transition; - -o-transition: -o-transform $transition; - transition: transform $transition; -} - -// Transformations -@mixin rotate($degrees) { - -webkit-transform: rotate($degrees); - -ms-transform: rotate($degrees); // IE9 only - transform: rotate($degrees); -} -@mixin scale($scale-args...) { - -webkit-transform: scale($scale-args); - -ms-transform: scale($scale-args); // IE9 only - transform: scale($scale-args); -} -@mixin translate($x, $y) { - -webkit-transform: translate($x, $y); - -ms-transform: translate($x, $y); // IE9 only - transform: translate($x, $y); -} -@mixin skew($x, $y) { - -webkit-transform: skew($x, $y); - -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ - transform: skew($x, $y); -} -@mixin translate3d($x, $y, $z) { - -webkit-transform: translate3d($x, $y, $z); - transform: translate3d($x, $y, $z); -} - -@mixin rotateX($degrees) { - -webkit-transform: rotateX($degrees); - -ms-transform: rotateX($degrees); // IE9 only - transform: rotateX($degrees); -} -@mixin rotateY($degrees) { - -webkit-transform: rotateY($degrees); - -ms-transform: rotateY($degrees); // IE9 only - 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; -} - -// Animations -@mixin animation($animation) { - -webkit-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; -} - -// 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; -} - -// Box sizing -@mixin box-sizing($boxmodel) { - -webkit-box-sizing: $boxmodel; - -moz-box-sizing: $boxmodel; - box-sizing: $boxmodel; -} - -// 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; -} - -// Resize anything -@mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// 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; -} - -// Opacity -@mixin opacity($opacity) { - opacity: $opacity; - // IE8 filter - $opacity-ie: ($opacity * 100); - filter: #{alpha(opacity=$opacity-ie)}; -} - - - -// 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. -@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { - background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+ - background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down -} - -// Vertical gradient, from top to bottom -// -// Creates two color stops, start and end, by specifying a color and position for each color stop. -// Color stops are not available in IE9 and below. -@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: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down -} - -@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: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ -} -@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: 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 -} -@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: 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 -} -@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: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); -} - -// Reset filters for IE -// -// When you need to remove a gradient background, do not forget to use this to reset -// the IE filter for IE9 and below. -@mixin reset-filter() { - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); -} - - - -// Retina images -// -// 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}")); - - @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-size: $width-1x $height-1x; - } -} - - -// 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 - height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching -} - - -// COMPONENT MIXINS -// -------------------------------------------------- - -// Horizontal dividers -// ------------------------- -// Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: #e5e5e5) { - height: 1px; - margin: (($line-height-computed / 2) - 1) 0; - overflow: hidden; - background-color: $color; -} - -// 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; - } - } - & > .panel-footer { - + .panel-collapse .panel-body { - border-bottom-color: $border; - } - } -} - -// Alerts -// ------------------------- -@mixin alert-variant($background, $border, $text-color) { - background-color: $background; - border-color: $border; - color: $text-color; - - hr { - border-top-color: darken($border, 5%); - } - .alert-link { - color: darken($text-color, 10%); - } -} - -// Tables -// ------------------------- -@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 { - background-color: $background; - } - } - - // Hover states for `.table-hover` - // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover > tbody > tr { - > td.#{$state}:hover, - > th.#{$state}:hover, - &.#{$state}:hover > td, - &.#{$state}:hover > th { - background-color: darken($background, 5%); - } - } -} - -// List Groups -// ------------------------- -@mixin list-group-item-variant($state, $background, $color) { - .list-group-item-#{$state} { - color: $color; - background-color: $background; - - // [converter] extracted a& to a.list-group-item-#{$state} - } - - a.list-group-item-#{$state} { - color: $color; - - .list-group-item-heading { color: inherit; } - - &:hover, - &:focus { - color: $color; - background-color: darken($background, 5%); - } - &.active, - &.active:hover, - &.active:focus { - color: #fff; - background-color: $color; - border-color: $color; - } - } -} - -// Button variants -// ------------------------- -// Easily pump out default styles, as well as :hover, :focus, :active, -// and disabled options for all buttons -@mixin button-variant($color, $background, $border) { - color: $color; - background-color: $background; - border-color: $border; - - &:hover, - &:focus, - &:active, - &.active { - color: $color; - background-color: darken($background, 8%); - border-color: darken($border, 12%); - } - .open & { &.dropdown-toggle { - color: $color; - background-color: darken($background, 8%); - border-color: darken($border, 12%); - } } - &:active, - &.active { - background-image: none; - } - .open & { &.dropdown-toggle { - background-image: none; - } } - &.disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &:active, - &.active { - background-color: $background; - border-color: $border; - } - } - - .badge { - color: $background; - background-color: $color; - } -} - -// Button sizes -// ------------------------- -@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - line-height: $line-height; - border-radius: $border-radius; -} - -// Pagination -// ------------------------- -@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { - > li { - > a, - > span { - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - } - &:first-child { - > a, - > span { - @include border-left-radius($border-radius); - } - } - &:last-child { - > a, - > span { - @include border-right-radius($border-radius); - } - } - } -} - -// Labels -// ------------------------- -@mixin label-variant($color) { - background-color: $color; - &[href] { - &:hover, - &:focus { - background-color: darken($color, 10%); - } - } -} - -// Contextual backgrounds -// ------------------------- -// [converter] $parent hack -@mixin bg-variant($parent, $color) { - #{$parent} { - background-color: $color; - } - a#{$parent}:hover { - background-color: darken($color, 10%); - } -} - -// Typography -// ------------------------- -// [converter] $parent hack -@mixin text-emphasis-variant($parent, $color) { - #{$parent} { - color: $color; - } - a#{$parent}:hover { - color: darken($color, 10%); - } -} - -// Navbar vertical align -// ------------------------- -// Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. -@mixin navbar-vertical-align($element-height) { - margin-top: (($navbar-height - $element-height) / 2); - margin-bottom: (($navbar-height - $element-height) / 2); -} - -// Progress bars -// ------------------------- -@mixin progress-bar-variant($color) { - background-color: $color; - .progress-striped & { - @include gradient-striped(); - } -} - -// Responsive utilities -// ------------------------- -// More easily include all the states for responsive-utilities.less. -// [converter] $parent hack -@mixin responsive-visibility($parent) { - #{$parent} { - display: block !important; - } - table#{$parent} { display: table; } - tr#{$parent} { display: table-row !important; } - th#{$parent}, - td#{$parent} { display: table-cell !important; } -} - -// [converter] $parent hack -@mixin responsive-invisibility($parent) { - #{$parent} { - display: none !important; - } -} - - -// Grid System -// ----------- - -// Centered container element -@mixin container-fixed() { - margin-right: auto; - margin-left: auto; - padding-left: ($grid-gutter-width / 2); - padding-right: ($grid-gutter-width / 2); - @include clearfix(); -} - -// Creates a wrapper for a series of columns -@mixin make-row($gutter: $grid-gutter-width) { - margin-left: ($gutter / -2); - margin-right: ($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) { - @media (min-width: $screen-xs-min) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-xs-column-push($columns) { - @media (min-width: $screen-xs-min) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-xs-column-pull($columns) { - @media (min-width: $screen-xs-min) { - right: percentage(($columns / $grid-columns)); - } -} - - -// Generate the small columns -@mixin make-sm-column($columns, $gutter: $grid-gutter-width) { - position: relative; - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); - - @media (min-width: $screen-sm-min) { - float: left; - width: percentage(($columns / $grid-columns)); - } -} -@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)); - } -} - - -// 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-lg-column-offset($columns) { - @media (min-width: $screen-lg-min) { - margin-left: percentage(($columns / $grid-columns)); - } -} -@mixin make-lg-column-push($columns) { - @media (min-width: $screen-lg-min) { - left: percentage(($columns / $grid-columns)); - } -} -@mixin make-lg-column-pull($columns) { - @media (min-width: $screen-lg-min) { - right: percentage(($columns / $grid-columns)); - } -} - - -// Framework grid generation -// -// Used only by Bootstrap to generate the correct number of grid classes given -// any value of `$grid-columns`. - -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin make-grid-columns() { - $list: ''; - $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} { - position: relative; - // Prevent columns from collapsing when empty - min-height: 1px; - // Inner gutter via padding - padding-left: ($grid-gutter-width / 2); - padding-right: ($grid-gutter-width / 2); - } -} - - -// [converter] This is defined recursively in LESS, but Sass supports real loops -@mixin float-grid-columns($class) { - $list: ''; - $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)); - } - } - @if ($type == push) { - .col-#{$class}-push-#{$index} { - left: percentage(($index / $grid-columns)); - } - } - @if ($type == pull) { - .col-#{$class}-pull-#{$index} { - right: percentage(($index / $grid-columns)); - } - } - @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); -} - -// Form validation states -// -// Used in forms.less to generate the form validation CSS for warnings, errors, -// and successes. - -@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { - // Color the label and help text - .help-block, - .control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - color: $text-color; - } - // Set the border and box shadow on specific inputs to match - .form-control { - border-color: $border-color; - @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); - } - } - // Set validation states also for addons - .input-group-addon { - color: $text-color; - border-color: $border-color; - background-color: $background-color; - } - // Optional feedback icon - .form-control-feedback { - color: $text-color; - } -} - -// Form control focus state -// -// Generate a customized focus state and for any input with the specified color, -// which defaults to the `$input-focus-border` variable. -// -// We highly encourage you to not customize the default value, but instead use -// this to tweak colors on an as-needed basis. This aesthetic change is based on -// WebKit's default styles, but applicable to a wider range of browsers. Its -// usability and accessibility should be taken into account with any change. -// -// Example usage: change the default blue border and shadow to white for better -// contrast against a dark gray background. - -@mixin form-control-focus($color: $input-border-focus) { - $color-rgba: rgba(red($color), green($color), blue($color), .6); - &:focus { - border-color: $color; - outline: 0; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); - } -} - -// Form control sizing -// -// Relative text size, padding, and border-radii changes for form controls. For -// horizontal sizing, wrap controls in the predefined grid classes. `<select>` -// element gets special love because it's special, and that's a fact! - -// [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; - } - - select#{$parent} { - height: $input-height; - line-height: $input-height; - } - - textarea#{$parent}, - select[multiple]#{$parent} { - height: auto; - } -} +@import "mixins/hide-text"; +@import "mixins/opacity"; +@import "mixins/image"; +@import "mixins/labels"; +@import "mixins/reset-filter"; +@import "mixins/resize"; +@import "mixins/responsive-visibility"; +@import "mixins/size"; +@import "mixins/tab-focus"; +@import "mixins/text-emphasis"; +@import "mixins/text-overflow"; +@import "mixins/vendor-prefixes"; + +// Components +@import "mixins/alerts"; +@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/table-row"; + +// Skins +@import "mixins/background-variant"; +@import "mixins/border-radius"; +@import "mixins/gradients"; + +// Layout +@import "mixins/clearfix"; +@import "mixins/center-block"; +@import "mixins/nav-vertical-align"; +@import "mixins/grid-framework"; +@import "mixins/grid"; diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss index 931092c..785ca5c 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss @@ -15,8 +15,7 @@ // Container that the modal scrolls within .modal { display: none; - overflow: auto; - overflow-y: scroll; + overflow: hidden; position: fixed; top: 0; right: 0; @@ -31,10 +30,14 @@ // When fading in the modal, animate it to slide down &.fade .modal-dialog { - @include translate(0, -25%); + @include translate3d(0, -25%, 0); @include transition-transform(0.3s ease-out); } - &.in .modal-dialog { @include translate(0, 0)} + &.in .modal-dialog { @include translate3d(0, 0, 0) } +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; } // Shell div to position the modal with bottom padding @@ -54,7 +57,7 @@ @include box-shadow(0 3px 9px rgba(0,0,0,.5)); background-clip: padding-box; // Remove focus outline from opened modal - outline: none; + outline: 0; } // Modal background @@ -98,8 +101,7 @@ // Footer (for actions) .modal-footer { - margin-top: 15px; - padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding; + padding: $modal-inner-padding; text-align: right; // right align buttons border-top: 1px solid $modal-footer-border-color; @include clearfix(); // clear it in case folks use .pull-* classes on buttons @@ -119,6 +121,15 @@ } } +// Measure scrollbar width for padding body during modal show/hide +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + // Scale up the modal @media (min-width: $screen-sm-min) { // Automatically set modal's width for larger viewports diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss index 8ad9437..3b94d6f 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss @@ -48,7 +48,6 @@ // content for the user's viewport. .navbar-collapse { - max-height: $navbar-collapse-max-height; overflow-x: visible; padding-right: $navbar-padding-horizontal; padding-left: $navbar-padding-horizontal; @@ -88,6 +87,17 @@ } } +.navbar-fixed-top, +.navbar-fixed-bottom { + .navbar-collapse { + max-height: $navbar-collapse-max-height; + + @media (max-width: $screen-xs-min) and (orientation: landscape) { + max-height: 200px; + } + } +} + // Both navbar header and collapse // @@ -131,6 +141,7 @@ right: 0; left: 0; z-index: $zindex-navbar-fixed; + @include translate3d(0, 0, 0); // Undo the rounded corners @media (min-width: $grid-float-breakpoint) { @@ -190,7 +201,7 @@ // We remove the `outline` here, but later compensate by attaching `:hover` // styles to `:focus`. &:focus { - outline: none; + outline: 0; } // Bars @@ -496,6 +507,20 @@ } } + .btn-link { + color: $navbar-default-link-color; + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + } + } + } } // Inverse navbar @@ -617,4 +642,18 @@ } } + .btn-link { + color: $navbar-inverse-link-color; + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + } + } + } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss index c690072..9016873 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss @@ -162,7 +162,7 @@ > li { float: none; - > a { + > a { text-align: center; margin-bottom: 5px; } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_normalize.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_normalize.scss index 024e257..ce04b6a 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_normalize.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_normalize.scss @@ -1,4 +1,4 @@ -/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ // // 1. Set default font family to sans-serif. @@ -24,7 +24,9 @@ body { // ========================================================================== // -// Correct `block` display not defined in IE 8/9. +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. +// Correct `block` display not defined for `main` in IE 11. // article, @@ -66,8 +68,8 @@ audio:not([controls]) { } // -// Address `[hidden]` styling not present in IE 8/9. -// Hide the `template` element in IE, Safari, and Firefox < 22. +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. // [hidden], @@ -99,7 +101,7 @@ a:hover { // ========================================================================== // -// Address styling not present in IE 8/9, Safari 5, and Chrome. +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. // abbr[title] { @@ -107,7 +109,7 @@ abbr[title] { } // -// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. // b, @@ -116,7 +118,7 @@ strong { } // -// Address styling not present in Safari 5 and Chrome. +// Address styling not present in Safari and Chrome. // dfn { @@ -125,7 +127,7 @@ dfn { // // Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari 5, and Chrome. +// contexts in Firefox 4+, Safari, and Chrome. // h1 { @@ -174,7 +176,7 @@ sub { // ========================================================================== // -// Remove border when inside `a` element in IE 8/9. +// Remove border when inside `a` element in IE 8/9/10. // img { @@ -182,7 +184,7 @@ img { } // -// Correct overflow displayed oddly in IE 9. +// Correct overflow not hidden in IE 9/10/11. // svg:not(:root) { @@ -193,7 +195,7 @@ svg:not(:root) { // ========================================================================== // -// Address margin not present in IE 8/9 and Safari 5. +// Address margin not present in IE 8/9 and Safari. // figure { @@ -242,7 +244,7 @@ samp { // 1. Correct color not being inherited. // Known issue: affects color of disabled elements. // 2. Correct font properties not being inherited. -// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. // button, @@ -256,7 +258,7 @@ textarea { } // -// Address `overflow` set to `hidden` in IE 8/9/10. +// Address `overflow` set to `hidden` in IE 8/9/10/11. // button { @@ -266,7 +268,7 @@ button { // // Address inconsistent `text-transform` inheritance for `button` and `select`. // All other form control elements do not inherit `text-transform` values. -// Correct `button` style inheritance in Firefox, IE 8+, and Opera +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. // Correct `select` style inheritance in Firefox. // @@ -345,8 +347,8 @@ input[type="number"]::-webkit-outer-spin-button { } // -// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. -// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome +// 1. Address `appearance` set to `searchfield` in Safari and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari and Chrome // (include `-moz` to future-proof). // @@ -379,7 +381,7 @@ fieldset { } // -// 1. Correct `color` not being inherited in IE 8/9. +// 1. Correct `color` not being inherited in IE 8/9/10/11. // 2. Remove padding so people aren't caught out if they zero out fieldsets. // @@ -389,7 +391,7 @@ legend { } // -// Remove default vertical scrollbar in IE 8/9. +// Remove default vertical scrollbar in IE 8/9/10/11. // textarea { @@ -420,4 +422,4 @@ table { td, th { padding: 0; -}
\ No newline at end of file +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_panels.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_panels.scss index 0ab9925..57cdcbc 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_panels.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_panels.scss @@ -20,7 +20,7 @@ // Optional heading .panel-heading { - padding: 10px 15px; + padding: $panel-heading-padding; border-bottom: 1px solid transparent; @include border-top-radius(($panel-border-radius - 1)); @@ -43,7 +43,7 @@ // Optional footer (stays gray in every modifier class) .panel-footer { - padding: 10px 15px; + padding: $panel-footer-padding; background-color: $panel-footer-bg; border-top: 1px solid $panel-inner-border; @include border-bottom-radius(($panel-border-radius - 1)); @@ -86,7 +86,9 @@ border-top-width: 0; } } - +.list-group + .panel-footer { + border-top-width: 0; +} // Tables in panels // @@ -95,7 +97,8 @@ .panel { > .table, - > .table-responsive > .table { + > .table-responsive > .table, + > .panel-collapse > .table { margin-bottom: 0; } // Add border top radius for first one @@ -199,7 +202,6 @@ .panel { margin-bottom: 0; border-radius: $panel-border-radius; - overflow: hidden; // crop contents when collapsed + .panel { margin-top: 5px; } @@ -207,7 +209,7 @@ .panel-heading { border-bottom: 0; - + .panel-collapse .panel-body { + + .panel-collapse > .panel-body { border-top: 1px solid $panel-inner-border; } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss index 6d6bed5..1cf27ae 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss @@ -37,7 +37,7 @@ line-height: 18px; background-color: $popover-title-bg; border-bottom: 1px solid darken($popover-title-bg, 5%); - border-radius: 5px 5px 0 0; + border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0; } .popover-content { diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss index 7302b72..6395ac2 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss @@ -48,16 +48,41 @@ } // Striped bars -.progress-striped .progress-bar { +// +// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar-striped` class, which you just add to an existing +// `.progress-bar`. +.progress-striped .progress-bar, +.progress-bar-striped { @include gradient-striped(); background-size: 40px 40px; } // Call animation for the active one -.progress.active .progress-bar { +// +// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar.active` approach. +.progress.active .progress-bar, +.progress-bar.active { @include animation(progress-bar-stripes 2s linear infinite); } +// Account for lower percentages +.progress-bar { + &[aria-valuenow="1"], + &[aria-valuenow="2"] { + min-width: 30px; + } + + &[aria-valuenow="0"] { + color: $gray-light; + min-width: 30px; + background-color: transparent; + background-image: none; + box-shadow: none; + } +} + // Variations diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-embed.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-embed.scss new file mode 100644 index 0000000..a884d49 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-embed.scss @@ -0,0 +1,34 @@ +// Embeds responsive +// +// Credit: Nicolas Gallagher and SUIT CSS. + +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; + + .embed-responsive-item, + iframe, + embed, + object { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; + } + + // Modifier class for 16:9 aspect ratio + &.embed-responsive-16by9 { + padding-bottom: 56.25%; + } + + // Modifier class for 4:3 aspect ratio + &.embed-responsive-4by3 { + padding-bottom: 75%; + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-utilities.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-utilities.scss index cd9348c..4d9e13b 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-utilities.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-utilities.scss @@ -14,7 +14,8 @@ // For more information, see the following: // // Issue: https://github.com/twbs/bootstrap/issues/10497 -// Docs: http://getbootstrap.com/getting-started/#browsers +// Docs: http://getbootstrap.com/getting-started/#support-ie10-width +// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ @-ms-viewport { @@ -23,24 +24,100 @@ // Visibility utilities +// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 @include responsive-invisibility('.visible-xs, .visible-sm, .visible-md, .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'); @@ -63,11 +140,34 @@ // // 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/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_scaffolding.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_scaffolding.scss index cf02029..8cea4cd 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_scaffolding.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_scaffolding.scss @@ -20,7 +20,7 @@ // Body reset html { - font-size: 62.5%; + font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); } @@ -132,3 +132,19 @@ hr { 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; + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss index 1ddfb7a..7c5d5bb 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss @@ -4,7 +4,6 @@ table { - max-width: 100%; background-color: $table-bg; } th { @@ -16,6 +15,7 @@ th { .table { width: 100%; + max-width: 100%; margin-bottom: $line-height-computed; // Cells > thead, @@ -168,12 +168,12 @@ table { // by enabling horizontal scrolling. Only applies <768px. Everything above that // will display normally. -@media (max-width: $screen-xs-max) { - .table-responsive { +.table-responsive { + @media screen and (max-width: $screen-xs-max) { width: 100%; margin-bottom: ($line-height-computed * 0.75); overflow-y: hidden; - overflow-x: scroll; + overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid $table-border-color; -webkit-overflow-scrolling: touch; diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_theme.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_theme.scss index d8f7bc2..00386a2 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_theme.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_theme.scss @@ -48,6 +48,12 @@ background-color: darken($btn-color, 12%); border-color: darken($btn-color, 14%); } + + &:disabled, + &[disabled] { + background-color: darken($btn-color, 12%); + background-image: none; + } } // Common styles @@ -191,6 +197,11 @@ .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(); +} // diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss index 7fee043..3f21b21 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss @@ -62,7 +62,7 @@ p { .lead { margin-bottom: $line-height-computed; font-size: floor(($font-size-base * 1.15)); - font-weight: 200; + font-weight: 300; line-height: 1.4; @media (min-width: $screen-sm-min) { @@ -74,18 +74,34 @@ p { // Emphasis & misc // ------------------------- -// Ex: 14px base font * 85% = about 12px +// Ex: (12px small font / 14px base font) * 100% = about 85% small, -.small { font-size: 85%; } +.small { + font-size: floor((100% * $font-size-small / $font-size-base)); +} // Undo browser default styling -cite { font-style: normal; } +cite { + font-style: 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 { @@ -132,7 +148,7 @@ cite { font-style: normal; } // Lists -// -------------------------------------------------- +// ------------------------- // Unordered and Ordered lists ul, @@ -186,24 +202,28 @@ dd { // Defaults to being stacked without any of the below styles applied, until the // grid breakpoint is reached (default of ~768px). -@media (min-width: $grid-float-breakpoint) { - .dl-horizontal { +.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: ($component-offset-horizontal - 20); + width: ($dl-horizontal-offset - 20); clear: left; text-align: right; @include text-overflow(); } dd { - margin-left: $component-offset-horizontal; - @include clearfix(); // Clear the floated `dt` if an empty `dd` is present + margin-left: $dl-horizontal-offset; } } } -// MISC -// ---- + +// Misc +// ------------------------- // Abbreviations and acronyms abbr[title], diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss index 85cb62e..3ad5f2e 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss @@ -53,4 +53,5 @@ .affix { position: fixed; + @include translate3d(0, 0, 0); } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss index 8042a68..fe72e84 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss @@ -14,7 +14,7 @@ $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("") $gray-darker: lighten(#000, 13.5%) !default; // #222 $gray-dark: lighten(#000, 20%) !default; // #333 $gray: lighten(#000, 33.5%) !default; // #555 -$gray-light: lighten(#000, 60%) !default; // #999 +$gray-light: lighten(#000, 46.7%) !default; // #777 $gray-lighter: lighten(#000, 93.5%) !default; // #eee $brand-primary: #428bca !default; @@ -26,7 +26,7 @@ $brand-danger: #d9534f !default; //== Scaffolding // -// ## Settings for some of the most global styles. +//## Settings for some of the most global styles. //** Background color for `<body>`. $body-bg: #fff !default; @@ -72,14 +72,18 @@ $headings-line-height: 1.1 !default; $headings-color: inherit !default; -//-- Iconography +//== Iconography // -//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower. +//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. +//** Load fonts from this directory. $icon-font-path: "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; + //== Components // //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). @@ -236,7 +240,7 @@ $dropdown-link-disabled-color: $gray-light !default; //** Text color for headers within dropdown menus. $dropdown-header-color: $gray-light !default; -// Note: Deprecated $dropdown-caret-color as of v3.1.0 +//** Deprecated `$dropdown-caret-color` as of v3.1.0 $dropdown-caret-color: #000 !default; @@ -249,8 +253,8 @@ $dropdown-caret-color: #000 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; -$zindex-popover: 1010 !default; -$zindex-tooltip: 1030 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; $zindex-modal-background: 1040 !default; $zindex-modal: 1050 !default; @@ -261,27 +265,32 @@ $zindex-modal: 1050 !default; //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone -// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1 +//** Deprecated `$screen-xs` as of v3.0.1 $screen-xs: 480px !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 -// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1 +//** 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 -// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1 +//** 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 -// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1 +//** 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 @@ -529,7 +538,7 @@ $popover-arrow-color: #fff !default; //** Popover outer arrow width $popover-arrow-outer-width: ($popover-arrow-width + 1) !default; //** Popover outer arrow color -$popover-arrow-outer-color: fadein($popover-border-color, 5%) !default; +$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default; //** Popover outer arrow fallback color $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; @@ -562,7 +571,7 @@ $label-link-hover-color: #fff !default; //## //** Padding applied to the modal body -$modal-inner-padding: 20px !default; +$modal-inner-padding: 15px !default; //** Padding applied to the modal title $modal-title-padding: 15px !default; @@ -647,17 +656,26 @@ $list-group-border: #ddd !default; //** List group border radius $list-group-border-radius: $border-radius-base !default; -//** Background color of single list elements on hover +//** Background color of single list items on hover $list-group-hover-bg: #f5f5f5 !default; -//** Text color of active list elements +//** Text color of active list items $list-group-active-color: $component-active-color !default; -//** Background color of active list elements +//** 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; +$list-group-link-hover-color: $list-group-link-color !default; $list-group-link-heading-color: #333 !default; @@ -667,6 +685,8 @@ $list-group-link-heading-color: #333 !default; $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 @@ -806,6 +826,8 @@ $pre-scrollable-max-height: 340px !default; // //## +//** Horizontal offset for forms and lists. +$component-offset-horizontal: 180px !default; //** Text muted color $text-muted: $gray-light !default; //** Abbreviations and acronyms border color @@ -820,14 +842,9 @@ $blockquote-font-size: ($font-size-base * 1.25) !default; $blockquote-border-color: $gray-lighter !default; //** Page header border color $page-header-border-color: $gray-lighter !default; - - -//== Miscellaneous -// -//## - +//** Width of horizontal description list titles +$dl-horizontal-offset: $component-offset-horizontal !default; //** Horizontal line color. $hr-border: $gray-lighter !default; -//** Horizontal offset for forms and lists. -$component-offset-horizontal: 180px !default; + diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/bootstrap.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/bootstrap.scss index cb5147d..4d6f8aa 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/bootstrap.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/bootstrap.scss @@ -2,9 +2,10 @@ @import "variables"; @import "mixins"; -// Reset +// Reset and dependencies @import "normalize"; @import "print"; +@import "glyphicons"; // Core CSS @import "scaffolding"; @@ -17,7 +18,6 @@ // Components @import "component-animations"; -@import "glyphicons"; @import "dropdowns"; @import "button-groups"; @import "input-groups"; @@ -35,6 +35,7 @@ @import "media"; @import "list-group"; @import "panels"; +@import "responsive-embed"; @import "wells"; @import "close"; diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_alerts.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_alerts.scss new file mode 100644 index 0000000..3faf0b5 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_alerts.scss @@ -0,0 +1,14 @@ +// Alerts + +@mixin alert-variant($background, $border, $text-color) { + background-color: $background; + border-color: $border; + color: $text-color; + + hr { + border-top-color: darken($border, 5%); + } + .alert-link { + color: darken($text-color, 10%); + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_background-variant.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_background-variant.scss new file mode 100644 index 0000000..4993bd2 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_background-variant.scss @@ -0,0 +1,11 @@ +// Contextual backgrounds + +// [converter] $parent hack +@mixin bg-variant($parent, $color) { + #{$parent} { + background-color: $color; + } + a#{$parent}:hover { + background-color: darken($color, 10%); + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_border-radius.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_border-radius.scss new file mode 100644 index 0000000..ce19499 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_border-radius.scss @@ -0,0 +1,18 @@ +// Single side border-radius + +@mixin border-top-radius($radius) { + 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/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_buttons.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_buttons.scss new file mode 100644 index 0000000..58ad13e --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_buttons.scss @@ -0,0 +1,50 @@ +// Button variants +// +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons + +@mixin button-variant($color, $background, $border) { + color: $color; + background-color: $background; + border-color: $border; + + &:hover, + &:focus, + &:active, + &.active, + .open > &.dropdown-toggle { + color: $color; + background-color: darken($background, 10%); + border-color: darken($border, 12%); + } + &:active, + &.active, + .open > &.dropdown-toggle { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &:active, + &.active { + background-color: $background; + border-color: $border; + } + } + + .badge { + color: $background; + background-color: $color; + } +} + +// Button sizes +@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_center-block.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_center-block.scss new file mode 100644 index 0000000..e06fb5e --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_center-block.scss @@ -0,0 +1,7 @@ +// Center-align a block level element + +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_clearfix.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_clearfix.scss new file mode 100644 index 0000000..dc3e2ab --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_clearfix.scss @@ -0,0 +1,22 @@ +// Clearfix +// +// For modern browsers +// 1. The space content is one way to avoid an Opera bug when the +// contenteditable attribute is included anywhere else in the document. +// Otherwise it causes space to appear at the top and bottom of elements +// that are clearfixed. +// 2. The use of `table` rather than `block` is only necessary if using +// `:before` to contain the top-margins of child elements. +// +// Source: http://nicolasgallagher.com/micro-clearfix-hack/ + +@mixin clearfix() { + &:before, + &:after { + content: " "; // 1 + display: table; // 2 + } + &:after { + clear: both; + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_forms.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_forms.scss new file mode 100644 index 0000000..ff72f0e --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_forms.scss @@ -0,0 +1,84 @@ +// Form validation states +// +// Used in forms.less to generate the form validation CSS for warnings, errors, +// and successes. + +@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { + // Color the label and help text + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline { + color: $text-color; + } + // Set the border and box shadow on specific inputs to match + .form-control { + border-color: $border-color; + @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); + } + } + // Set validation states also for addons + .input-group-addon { + color: $text-color; + border-color: $border-color; + background-color: $background-color; + } + // Optional feedback icon + .form-control-feedback { + color: $text-color; + } +} + + +// Form control focus state +// +// Generate a customized focus state and for any input with the specified color, +// which defaults to the `$input-border-focus` variable. +// +// We highly encourage you to not customize the default value, but instead use +// this to tweak colors on an as-needed basis. This aesthetic change is based on +// WebKit's default styles, but applicable to a wider range of browsers. Its +// usability and accessibility should be taken into account with any change. +// +// Example usage: change the default blue border and shadow to white for better +// contrast against a dark gray background. +@mixin form-control-focus($color: $input-border-focus) { + $color-rgba: rgba(red($color), green($color), blue($color), .6); + &:focus { + border-color: $color; + outline: 0; + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); + } +} + +// Form control sizing +// +// Relative text size, padding, and border-radii changes for form controls. For +// horizontal sizing, wrap controls in the predefined grid classes. `<select>` +// element gets special love because it's special, and that's a fact! +// [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; + } + + select#{$parent} { + height: $input-height; + line-height: $input-height; + } + + textarea#{$parent}, + select[multiple]#{$parent} { + height: auto; + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_gradients.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_gradients.scss new file mode 100644 index 0000000..a8939f5 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_gradients.scss @@ -0,0 +1,58 @@ +// 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. +@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-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 +} + +// 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. +@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-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 +} + +@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+ +} +@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 +} +@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 +} +@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); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_grid-framework.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_grid-framework.scss new file mode 100644 index 0000000..fb28cb4 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_grid-framework.scss @@ -0,0 +1,81 @@ +// Framework grid generation +// +// 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} { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: ($grid-gutter-width / 2); + padding-right: ($grid-gutter-width / 2); + } +} + + +// [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)); + } + } + @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; + } + } + @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/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_grid.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_grid.scss new file mode 100644 index 0000000..1601f6a --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_grid.scss @@ -0,0 +1,122 @@ +// Grid system +// +// Generate semantic grid columns with these mixins. + +// Centered container element +@mixin container-fixed($gutter: $grid-gutter-width) { + margin-right: auto; + margin-left: auto; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + @include clearfix(); +} + +// Creates a wrapper for a series of columns +@mixin make-row($gutter: $grid-gutter-width) { + margin-left: ($gutter / -2); + margin-right: ($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)); +} + +// Generate the small columns +@mixin make-sm-column($columns, $gutter: $grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + + @media (min-width: $screen-sm-min) { + float: left; + width: percentage(($columns / $grid-columns)); + } +} +@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)); + } +} + +// 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-lg-column-offset($columns) { + @media (min-width: $screen-lg-min) { + margin-left: percentage(($columns / $grid-columns)); + } +} +@mixin make-lg-column-push($columns) { + @media (min-width: $screen-lg-min) { + left: percentage(($columns / $grid-columns)); + } +} +@mixin make-lg-column-pull($columns) { + @media (min-width: $screen-lg-min) { + right: percentage(($columns / $grid-columns)); + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_hide-text.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_hide-text.scss new file mode 100644 index 0000000..5e06972 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_hide-text.scss @@ -0,0 +1,21 @@ +// CSS image replacement +// +// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for +// mixins being reused as classes with the same name, this doesn't hold up. As +// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. +// +// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 + +// Deprecated as of v3.0.1 (will be removed in v4) +@mixin hide-text() { + font: #{0/0} a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +// New mixin to use as of v3.0.1 +@mixin text-hide() { + @include hide-text(); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_image.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_image.scss new file mode 100644 index 0000000..57d60a3 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_image.scss @@ -0,0 +1,34 @@ +// Image Mixins +// - Responsive image +// - Retina image + + +// Responsive image +// +// Keep images from scaling beyond the width of their parents. +@mixin img-responsive($display: block) { + display: $display; + width: 100% \9; // Force IE10 and below to size SVG images correctly + max-width: 100%; // Part 1: Set a maximum relative to the parent + height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching +} + + +// Retina image +// +// Short retina mixin for setting background-image and -size. Note that the +// spelling of `min--moz-device-pixel-ratio` is intentional. +@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}")); + + @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-size: $width-1x $height-1x; + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_labels.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_labels.scss new file mode 100644 index 0000000..d99a653 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_labels.scss @@ -0,0 +1,12 @@ +// Labels + +@mixin label-variant($color) { + background-color: $color; + + &[href] { + &:hover, + &:focus { + background-color: darken($color, 10%); + } + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_list-group.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_list-group.scss new file mode 100644 index 0000000..5f05e7b --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_list-group.scss @@ -0,0 +1,31 @@ +// List Groups + +@mixin list-group-item-variant($state, $background, $color) { + .list-group-item-#{$state} { + color: $color; + background-color: $background; + + // [converter] extracted a& to a.list-group-item-#{$state} + } + + a.list-group-item-#{$state} { + color: $color; + + .list-group-item-heading { + color: inherit; + } + + &:hover, + &:focus { + color: $color; + background-color: darken($background, 5%); + } + &.active, + &.active:hover, + &.active:focus { + color: #fff; + background-color: $color; + border-color: $color; + } + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_nav-divider.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_nav-divider.scss new file mode 100644 index 0000000..2e6da02 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_nav-divider.scss @@ -0,0 +1,10 @@ +// Horizontal dividers +// +// Dividers (basically an hr) within dropdowns and nav lists + +@mixin nav-divider($color: #e5e5e5) { + height: 1px; + margin: (($line-height-computed / 2) - 1) 0; + overflow: hidden; + background-color: $color; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_nav-vertical-align.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_nav-vertical-align.scss new file mode 100644 index 0000000..c8fbf1a --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_nav-vertical-align.scss @@ -0,0 +1,9 @@ +// Navbar vertical align +// +// Vertically center elements in the navbar. +// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. + +@mixin navbar-vertical-align($element-height) { + margin-top: (($navbar-height - $element-height) / 2); + margin-bottom: (($navbar-height - $element-height) / 2); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_opacity.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_opacity.scss new file mode 100644 index 0000000..df088ad --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_opacity.scss @@ -0,0 +1,8 @@ +// Opacity + +@mixin opacity($opacity) { + opacity: $opacity; + // IE8 filter + $opacity-ie: ($opacity * 100); + filter: #{alpha(opacity=$opacity-ie)}; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_pagination.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_pagination.scss new file mode 100644 index 0000000..43fff68 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_pagination.scss @@ -0,0 +1,23 @@ +// Pagination + +@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) { + > li { + > a, + > span { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + } + &:first-child { + > a, + > span { + @include border-left-radius($border-radius); + } + } + &:last-child { + > a, + > span { + @include border-right-radius($border-radius); + } + } + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_panels.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_panels.scss new file mode 100644 index 0000000..3ff31ae --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_panels.scss @@ -0,0 +1,24 @@ +// 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/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_progress-bar.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_progress-bar.scss new file mode 100644 index 0000000..3275ea3 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_progress-bar.scss @@ -0,0 +1,10 @@ +// 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/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_reset-filter.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_reset-filter.scss new file mode 100644 index 0000000..bf73051 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_reset-filter.scss @@ -0,0 +1,8 @@ +// Reset filters for IE +// +// When you need to remove a gradient background, do not forget to use this to reset +// the IE filter for IE9 and below. + +@mixin reset-filter() { + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_resize.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_resize.scss new file mode 100644 index 0000000..83fa637 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_resize.scss @@ -0,0 +1,6 @@ +// Resize anything + +@mixin resizable($direction) { + resize: $direction; // Options: horizontal, vertical, both + overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_responsive-visibility.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_responsive-visibility.scss new file mode 100644 index 0000000..9867db0 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_responsive-visibility.scss @@ -0,0 +1,21 @@ +// Responsive utilities + +// +// More easily include all the states for responsive-utilities.less. +// [converter] $parent hack +@mixin responsive-visibility($parent) { + #{$parent} { + display: block !important; + } + table#{$parent} { display: table; } + tr#{$parent} { display: table-row !important; } + th#{$parent}, + td#{$parent} { display: table-cell !important; } +} + +// [converter] $parent hack +@mixin responsive-invisibility($parent) { + #{$parent} { + display: none !important; + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_size.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_size.scss new file mode 100644 index 0000000..abbe246 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_size.scss @@ -0,0 +1,10 @@ +// Sizing shortcuts + +@mixin size($width, $height) { + width: $width; + height: $height; +} + +@mixin square($size) { + @include size($size, $size); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_tab-focus.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_tab-focus.scss new file mode 100644 index 0000000..7df0ae7 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_tab-focus.scss @@ -0,0 +1,9 @@ +// WebKit-style focus + +@mixin tab-focus() { + // Default + outline: thin dotted; + // WebKit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_table-row.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_table-row.scss new file mode 100644 index 0000000..1367950 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_table-row.scss @@ -0,0 +1,28 @@ +// Tables + +@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 { + background-color: $background; + } + } + + // Hover states for `.table-hover` + // Note: this is not available for cells or rows within `thead` or `tfoot`. + .table-hover > tbody > tr { + > td.#{$state}:hover, + > th.#{$state}:hover, + &.#{$state}:hover > td, + &:hover > .#{$state}, + &.#{$state}:hover > th { + background-color: darken($background, 5%); + } + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_text-emphasis.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_text-emphasis.scss new file mode 100644 index 0000000..1101e03 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_text-emphasis.scss @@ -0,0 +1,11 @@ +// Typography + +// [converter] $parent hack +@mixin text-emphasis-variant($parent, $color) { + #{$parent} { + color: $color; + } + a#{$parent}:hover { + color: darken($color, 10%); + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_text-overflow.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_text-overflow.scss new file mode 100644 index 0000000..1593b25 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_text-overflow.scss @@ -0,0 +1,8 @@ +// Text overflow +// Requires inline-block or block for proper styling + +@mixin text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_vendor-prefixes.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_vendor-prefixes.scss new file mode 100644 index 0000000..f91f576 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/mixins/_vendor-prefixes.scss @@ -0,0 +1,219 @@ +// 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) { + &::-moz-placeholder { color: $color; // Firefox + opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 + &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: $color; } // Safari and Chrome +} + +// Transformations +@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; +} |