diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss')
48 files changed, 6580 insertions, 3058 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-responsive.scss b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-responsive.scss deleted file mode 100644 index 10f622a..0000000 --- a/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap-responsive.scss +++ /dev/null @@ -1,318 +0,0 @@ -/*! - * Bootstrap Responsive v2.0.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Converted to SASS by Thomas McDonald - */ - -// Responsive.css.scss -// For phone and tablet devices -// ------------------------------------------------------------- - - -// REPEAT VARIABLES & MIXINS -// ------------------------- -// Required since we compile the responsive stuff separately - -@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc -@import "bootstrap/mixins"; - - -// RESPONSIVE CLASSES -// ------------------ - -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} - - - -// UP TO LANDSCAPE PHONE -// --------------------- - -@media (max-width: 480px) { - - // Smooth out the collapsing/expanding nav - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); // activate the GPU - } - - // Block level the page header small tag for readability - .page-header h1 small { - display: block; - line-height: $baseLineHeight; - } - - // Make span* classes full width - input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { - display: block; - width: 100%; - min-height: 28px; /* Make inputs at least the height of their button counterpart */ - /* Makes inputs behave like true block-level elements */ - -webkit-box-sizing: border-box; /* Older Webkit */ - -moz-box-sizing: border-box; /* Older FF */ - -ms-box-sizing: border-box; /* IE8 */ - box-sizing: border-box; /* CSS3 spec*/ - } - // But don't let it screw up prepend/append inputs - .input-prepend input[class*="span"], .input-append input[class*="span"] { - width: auto; - } - - // Update checkboxes for iOS - input[type="checkbox"], input[type="radio"] { - border: 1px solid #ccc; - } - - // Remove the horizontal form styles - .form-horizontal .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .form-horizontal .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .form-horizontal .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-horizontal .form-actions { - padding-left: 10px; - padding-right: 10px; - } - - // Modals - .modal { - position: absolute; - top: 10px; - left: 10px; - right: 10px; - width: auto; - margin: 0; - &.fade.in { top: auto; } - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - - // Carousel - .carousel-caption { - position: static; - } - -} - - - -// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET -// -------------------------------------------------- - -@media (max-width: 767px) { - // GRID & CONTAINERS - // ----------------- - // Remove width from containers - .container { - width: auto; - padding: 0 20px; - } - // Fluid rows - .row-fluid { - width: 100%; - } - // Undo negative margin on rows - .row { - margin-left: 0; - } - // Make all columns even - .row > [class*="span"], .row-fluid > [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } -} - - - -// PORTRAIT TABLET TO DEFAULT DESKTOP -// ---------------------------------- - -@media (min-width: 768px) and (max-width: 979px) { - - // Fixed grid - @include gridSystemGenerate(12, 42px, 20px); - - // Fluid grid - @include fluidGridSystemGenerate(12, 5.801104972%, 2.762430939%); - - // Input grid - @include inputGridSystemGenerate(12, 42px, 20px); - -} - - - -// TABLETS AND BELOW -// ----------------- -@media (max-width: 979px) { - - // UNFIX THE TOPBAR - // ---------------- - // Remove any padding from the body - body { - padding-top: 0; - } - // Unfix the navbar - .navbar-fixed-top { - position: static; - margin-bottom: $baseLineHeight; - } - .navbar-fixed-top .navbar-inner { - padding: 5px; - } - .navbar .container { - width: auto; - padding: 0; - } - // Account for brand name - .navbar .brand { - padding-left: 10px; - padding-right: 10px; - margin: 0 0 0 -5px; - } - // Nav collapse clears brand - .navbar .nav-collapse { - clear: left; - } - // Block-level the nav - .navbar .nav { - float: none; - margin: 0 0 ($baseLineHeight / 2); - } - .navbar .nav > li { - float: none; - } - .navbar .nav > li > a { - margin-bottom: 2px; - } - .navbar .nav > .divider-vertical { - display: none; - } - .navbar .nav .nav-header { - color: $navbarText; - text-shadow: none; - } - // Nav and dropdown links in navbar - .navbar .nav > li > a, .navbar .dropdown-menu a { - padding: 6px 15px; - font-weight: bold; - color: $navbarLinkColor; - @include border-radius(3px); - } - .navbar .dropdown-menu li + li a { - margin-bottom: 2px; - } - .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover { - background-color: $navbarBackground; - } - // Dropdowns in the navbar - .navbar .dropdown-menu { - position: static; - top: auto; - left: auto; - float: none; - display: block; - max-width: none; - margin: 0 15px; - padding: 0; - background-color: transparent; - border: none; - @include border-radius(0); - @include box-shadow(none); - } - .navbar .dropdown-menu:before, .navbar .dropdown-menu:after { - display: none; - } - .navbar .dropdown-menu .divider { - display: none; - } - // Forms in navbar - .navbar-form, .navbar-search { - float: none; - padding: ($baseLineHeight / 2) 15px; - margin: ($baseLineHeight / 2) 0; - border-top: 1px solid $navbarBackground; - border-bottom: 1px solid $navbarBackground; - $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); - @include box-shadow($shadow); - } - // Pull right (secondary) nav content - .navbar .nav.pull-right { - float: none; - margin-left: 0; - } - // Static navbar - .navbar-static .navbar-inner { - padding-left: 10px; - padding-right: 10px; - } - // Navbar button - .btn-navbar { - display: block; - } - - // Hide everything in the navbar save .brand and toggle button */ - .nav-collapse { - overflow: hidden; - height: 0; - } -} - - - -// DEFAULT DESKTOP -// --------------- - -@media (min-width: 980px) { - .nav-collapse.collapse { - height: auto !important; - } -} - - - -// LARGE DESKTOP & UP -// ------------------ - -@media (min-width: 1200px) { - - // Fixed grid - @include gridSystemGenerate(12, 70px, 30px); - - // Fluid grid - @include fluidGridSystemGenerate(12, 5.982905983%, 2.564102564%); - - // Input grid - @include inputGridSystemGenerate(12, 70px, 30px); - - // Thumbnails - .thumbnails { - margin-left: -30px; - } - .thumbnails > li { - margin-left: 30px; - } - -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap.scss b/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap.scss deleted file mode 100644 index e3b60c6..0000000 --- a/xstatic/pkg/bootstrap_scss/data/scss/_bootstrap.scss +++ /dev/null @@ -1,63 +0,0 @@ -/*! - * Bootstrap 2.0.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Converted to SASS by Thomas McDonald - */ - -// Core variables and mixins -@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc -@import "bootstrap/mixins"; - -// CSS Reset -@import "bootstrap/reset"; - -// Grid system and page structure -@import "bootstrap/scaffolding"; -@import "bootstrap/grid"; -@import "bootstrap/layouts"; - -// Base CSS -@import "bootstrap/type"; -@import "bootstrap/code"; -@import "bootstrap/forms"; -@import "bootstrap/tables"; - -// Components: common -@import "bootstrap/sprites"; -@import "bootstrap/dropdowns"; -@import "bootstrap/wells"; -@import "bootstrap/component-animations"; -@import "bootstrap/close"; - -// Components: Buttons & Alerts -@import "bootstrap/buttons"; -@import "bootstrap/button-groups"; -@import "bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less - -// Components: Nav -@import "bootstrap/navs"; -@import "bootstrap/navbar"; -@import "bootstrap/breadcrumbs"; -@import "bootstrap/pagination"; -@import "bootstrap/pager"; - -// Components: Popovers -@import "bootstrap/modals"; -@import "bootstrap/tooltip"; -@import "bootstrap/popovers"; - -// Components: Misc -@import "bootstrap/thumbnails"; -@import "bootstrap/labels"; -@import "bootstrap/progress-bars"; -@import "bootstrap/accordion"; -@import "bootstrap/carousel"; -@import "bootstrap/hero-unit"; - -// Utility classes -@import "bootstrap/utilities"; // Has to be last to override when necessary
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap.scss new file mode 100644 index 0000000..ece2a0c --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap.scss @@ -0,0 +1,49 @@ +// Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset +@import "bootstrap/normalize"; +@import "bootstrap/print"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +@import "bootstrap/component-animations"; +@import "bootstrap/glyphicons"; +@import "bootstrap/dropdowns"; +@import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +@import "bootstrap/breadcrumbs"; +@import "bootstrap/pagination"; +@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +@import "bootstrap/jumbotron"; +@import "bootstrap/thumbnails"; +@import "bootstrap/alerts"; +@import "bootstrap/progress-bars"; +@import "bootstrap/media"; +@import "bootstrap/list-group"; +@import "bootstrap/panels"; +@import "bootstrap/wells"; +@import "bootstrap/close"; + +// Components w/ JavaScript +@import "bootstrap/modals"; +@import "bootstrap/tooltip"; +@import "bootstrap/popovers"; +@import "bootstrap/carousel"; + +// Utility classes +@import "bootstrap/utilities"; +@import "bootstrap/responsive-utilities"; diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_accordion.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_accordion.scss deleted file mode 100644 index bb19943..0000000 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_accordion.scss +++ /dev/null @@ -1,28 +0,0 @@ -// ACCORDION -// --------- - - -// Parent container -.accordion { - margin-bottom: $baseLineHeight; -} - -// Group == heading + body -.accordion-group { - margin-bottom: 2px; - border: 1px solid #e5e5e5; - @include border-radius(4px); -} -.accordion-heading { - border-bottom: 0; -} -.accordion-heading .accordion-toggle { - display: block; - padding: 8px 15px; -} - -// Inner needs the styles because you can't animate properly with any styles on the element -.accordion-inner { - padding: 9px 15px; - border-top: 1px solid #e5e5e5; -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss index a219ab9..4685ac3 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_alerts.scss @@ -1,62 +1,67 @@ -// ALERT STYLES -// ------------ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- -// Base alert styles .alert { - padding: 8px 35px 8px 14px; - margin-bottom: $baseLineHeight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: $warningBackground; - border: 1px solid $warningBorder; - @include border-radius(4px); -} -.alert, .alert-heading { - color: $warningText; + padding: $alert-padding; + margin-bottom: $line-height-computed; + border: 1px solid transparent; + border-radius: $alert-border-radius; + + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing $headings-color + color: inherit; + } + // Provide class for links that match alerts + .alert-link { + font-weight: $alert-link-font-weight; + } + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + > p + p { + margin-top: 5px; + } } -// Adjust close link position -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: 18px; +// Dismissable alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable { + padding-right: ($alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } } // Alternate styles -// ---------------- +// +// Generate contextual modifier classes for colorizing the alert. .alert-success { - background-color: $successBackground; - border-color: $successBorder; -} -.alert-success, .alert-success .alert-heading { - color: $successText; -} -.alert-danger, .alert-error { - background-color: $errorBackground; - border-color: $errorBorder; -} -.alert-danger, .alert-error, .alert-danger .alert-heading, .alert-error .alert-heading { - color: $errorText; + @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); } .alert-info { - background-color: $infoBackground; - border-color: $infoBorder; + @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); } -.alert-info, .alert-info .alert-heading { - color: $infoText; -} - - -// Block alerts -// ------------------------ -.alert-block { - padding-top: 14px; - padding-bottom: 14px; +.alert-warning { + @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); } -.alert-block > p, .alert-block > ul { - margin-bottom: 0; +.alert-danger { + @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); } -.alert-block p + p { - margin-top: 5px; -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_badges.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_badges.scss new file mode 100644 index 0000000..4014a80 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_badges.scss @@ -0,0 +1,55 @@ +// +// Badges +// -------------------------------------------------- + + +// Base classes +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: $font-size-small; + font-weight: $badge-font-weight; + color: $badge-color; + line-height: $badge-line-height; + vertical-align: baseline; + white-space: nowrap; + text-align: center; + background-color: $badge-bg; + border-radius: $badge-border-radius; + + // Empty badges collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for badges in buttons + .btn & { + position: relative; + top: -1px; + } + .btn-xs & { + top: 0; + padding: 1px 5px; + } +} + +// Hover state, but only for links +a.badge { + &:hover, + &:focus { + color: $badge-link-hover-color; + text-decoration: none; + 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/_breadcrumbs.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_breadcrumbs.scss index 2effdeb..3641e33 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_breadcrumbs.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_breadcrumbs.scss @@ -1,22 +1,26 @@ -// BREADCRUMBS -// ----------- +// +// Breadcrumbs +// -------------------------------------------------- + .breadcrumb { - padding: 7px 14px; - margin: 0 0 $baseLineHeight; - @include gradient-vertical($white, #f5f5f5); - border: 1px solid #ddd; - @include border-radius(3px); - @include box-shadow(inset 0 1px 0 $white); - li { + padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; + margin-bottom: $line-height-computed; + list-style: none; + background-color: $breadcrumb-bg; + border-radius: $border-radius-base; + + > li { display: inline-block; - text-shadow: 0 1px 0 $white; - } - .divider { - padding: 0 5px; - color: $grayLight; + + + li:before { + content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space + padding: 0 5px; + color: $breadcrumb-color; + } } - .active a { - color: $grayDark; + + > .active { + color: $breadcrumb-active-color; } -}
\ No newline at end of file +} 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 771d54d..066b4d7 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_button-groups.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_button-groups.scss @@ -1,136 +1,226 @@ -// BUTTON GROUPS -// ------------- - +// +// Button groups +// -------------------------------------------------- // Make the div behave like a button -.btn-group { +.btn-group, +.btn-group-vertical { position: relative; - @include clearfix(); // clears the floated buttons - @include ie7-restore-left-whitespace(); + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:focus, + &:active, + &.active { + z-index: 2; + } + &:focus { + // Remove focus outline when dropdown JS adds it after closing the menu + outline: none; + } + } } -// Space out series of button groups -.btn-group + .btn-group { - margin-left: 5px; +// Prevent double borders when buttons are next to each other +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } } // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - margin-top: $baseLineHeight / 2; - margin-bottom: $baseLineHeight / 2; - .btn-group { - display: inline-block; - @include ie7-inline-block(); + margin-left: -5px; // Offset the first child's margin + @include clearfix(); + + .btn-group, + .input-group { + float: left; + } + > .btn, + > .btn-group, + > .input-group { + margin-left: 5px; } } -// Float them, remove border radius, then re-add to first and last elements -.btn-group .btn { - position: relative; - float: left; - margin-left: -1px; - @include border-radius(0); +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; } + // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group .btn:first-child { +.btn-group > .btn:first-child { margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; -} -.btn-group .btn:last-child, .btn-group .dropdown-toggle { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; -} -// Reset corners for large buttons -.btn-group .btn.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; + &:not(:last-child):not(.dropdown-toggle) { + @include border-right-radius(0); + } } -.btn-group .btn.large:last-child, .btn-group .large.dropdown-toggle { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + @include border-left-radius(0); } -// On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, .btn-group .btn:focus, .btn-group .btn:active, .btn-group .btn.active { - z-index: 2; +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child { + > .btn:last-child, + > .dropdown-toggle { + @include border-right-radius(0); + } +} +.btn-group > .btn-group:last-child > .btn:first-child { + @include border-left-radius(0); } // On active and open, don't show outline -.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { outline: 0; } +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-xs > .btn { @extend .btn-xs; } +.btn-group-sm > .btn { @extend .btn-sm; } +.btn-group-lg > .btn { @extend .btn-lg; } + // Split button dropdowns // ---------------------- // Give the line between buttons some depth -.btn-group .dropdown-toggle { +.btn-group > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; - $shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - @include box-shadow($shadow); - *padding-top: 5px; - *padding-bottom: 5px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; } -.btn-group.open { - // IE7's z-index only goes to the nearest positioned ancestor, which would - // make the menu appear below buttons that appeared later on the page - *z-index: $zindexDropdown; - - // Reposition menu on open and round all corners - .dropdown-menu { - display: block; - margin-top: 1px; - @include border-radius(5px); - } +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group.open .dropdown-toggle { + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); - .dropdown-toggle { - background-image: none; - $shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - @include box-shadow($shadow); + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + @include box-shadow(none); } } + // Reposition the caret .btn .caret { - margin-top: 7px; margin-left: 0; } -.btn:hover .caret, .open.btn-group .caret { - @include opacity(1); +// Carets in other button sizes +.btn-lg .caret { + border-width: $caret-width-large $caret-width-large 0; + border-bottom-width: 0; +} +// Upside down carets for .dropup +.dropup .btn-lg .caret { + border-width: 0 $caret-width-large $caret-width-large; } -// Account for other colors -.btn-primary, .btn-danger, .btn-info, .btn-success, .btn-inverse { - .caret { - border-top-color: $white; - @include opacity(0.75); +// Vertical button groups +// ---------------------- + +.btn-group-vertical { + > .btn, + > .btn-group, + > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + @include clearfix(); + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; } } -// Small button dropdowns -.btn-small .caret { - margin-top: 4px; +.btn-group-vertical > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child:not(:last-child) { + border-top-right-radius: $border-radius-base; + @include border-bottom-radius(0); + } + &:last-child:not(:first-child) { + border-bottom-left-radius: $border-radius-base; + @include border-top-radius(0); + } +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-top-radius(0); +} + + + +// Justified button groups +// ---------------------- + +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + > .btn, + > .btn-group { + float: none; + display: table-cell; + width: 1%; + } + > .btn-group .btn { + width: 100%; + } +} + + +// Checkbox and radio options +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { + display: none; } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss index da51df9..28110b6 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss @@ -1,163 +1,159 @@ -// BUTTON STYLES -// ------------- +// +// Buttons +// -------------------------------------------------- // Base styles // -------------------------------------------------- -// Core .btn { display: inline-block; - padding: 4px 10px 4px; margin-bottom: 0; // For input.btn - font-size: $baseFontSize; - line-height: $baseLineHeight; - color: $grayDark; + font-weight: $btn-font-weight; text-align: center; - text-shadow: 0 1px 1px rgba(255,255,255,.75); vertical-align: middle; - @include buttonBackground($white, darken($white, 10%)); - border: 1px solid #ccc; - border-bottom-color: #bbb; - @include border-radius(4px); - $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - @include box-shadow($shadow); cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + white-space: nowrap; + @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base); + @include user-select(none); + + &, + &:active, + &.active { + &:focus { + @include tab-focus(); + } + } - // Give IE7 some love - @include reset-filter(); - @include ie7-restore-left-whitespace(); -} - -// Hover state -.btn:hover { - color: $grayDark; - text-decoration: none; - background-color: darken($white, 10%); - background-position: 0 -15px; - - // transition is only when going to hover, otherwise the background - // behind the gradient (there for IE<=9 fallback) gets mismatched - @include transition(background-position .1s linear); -} - -// Focus state for keyboard and accessibility -.btn:focus { - @include tab-focus(); -} + &:hover, + &:focus { + color: $btn-default-color; + text-decoration: none; + } -// Active state -.btn.active, .btn:active { - background-image: none; - $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - @include box-shadow($shadow); - background-color: darken($white, 10%); - background-color: darken($white, 15%) \9; - outline: 0; -} + &:active, + &.active { + outline: 0; + background-image: none; + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } -// Disabled state -.btn.disabled, .btn[disabled] { - cursor: default; - background-image: none; - background-color: darken($white, 10%); - @include opacity(0.65); - @include box-shadow(none); + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + pointer-events: none; // Future-proof disabling of clicks + @include opacity(.65); + @include box-shadow(none); + } } -// Button Sizes +// Alternate buttons // -------------------------------------------------- -// Large -.btn-large { - padding: 9px 14px; - font-size: $baseFontSize + 2px; - line-height: normal; - @include border-radius(5px); +.btn-default { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); } -.btn-large [class^="icon-"] { - margin-top: 1px; +.btn-primary { + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); } - -// Small -.btn-small { - padding: 5px 9px; - font-size: $baseFontSize - 2px; - line-height: $baseLineHeight - 2px; +// Success appears as green +.btn-success { + @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); } -.btn-small [class^="icon-"] { - margin-top: -1px; +// Info appears as blue-green +.btn-info { + @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); } - -// Mini -.btn-mini { - padding: 2px 6px; - font-size: $baseFontSize - 2px; - line-height: $baseLineHeight - 4px; +// Warning appears as orange +.btn-warning { + @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); } -// Alternate buttons -// -------------------------------------------------- - -// Set text color +// Link buttons // ------------------------- -.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - color: $white; -} -// Provide *some* extra contrast for those who can get it -.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active { - color: rgba(255,255,255,.75); -} -// Set the backgrounds -// ------------------------- -.btn-primary { - @include buttonBackground($primaryButtonBackground, adjust-hue($primaryButtonBackground, 20)); -} -// Warning appears are orange -.btn-warning { - @include buttonBackground(lighten($orange, 15%), $orange); -} -// Danger and error appear as red -.btn-danger { - @include buttonBackground(#ee5f5b, #bd362f); +// Make a button look and behave like a link +.btn-link { + color: $link-color; + font-weight: normal; + cursor: pointer; + border-radius: 0; + + &, + &:active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + @include box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: underline; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $btn-link-disabled-color; + text-decoration: none; + } + } } -// Success appears as green -.btn-success { - @include buttonBackground(#62c462, #51a351); + + +// Button Sizes +// -------------------------------------------------- + +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); } -// Info appears as a neutral blue -.btn-info { - @include buttonBackground(#5bc0de, #2f96b4); +.btn-sm { + // line-height: ensure proper height of button next to small input + @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); } -.btn-inverse { - @include buttonBackground(#454545, #262626); +.btn-xs { + @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small); } -// Cross-browser Jank +// Block button // -------------------------------------------------- -button.btn, input[type="submit"].btn { +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} - // Firefox 3.6 only I believe - &::-moz-focus-inner { - padding: 0; - border: 0; - } +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} - // IE7 has some default padding on button controls - *padding-top: 2px; - *padding-bottom: 2px; - &.large { - *padding-top: 7px; - *padding-bottom: 7px; - } - &.small { - *padding-top: 3px; - *padding-bottom: 3px; +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss index 4c2d53c..d8f2364 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_carousel.scss @@ -1,58 +1,61 @@ -// CAROUSEL -// -------- +// +// Carousel +// -------------------------------------------------- + +// Wrapper for the slide container and indicators .carousel { position: relative; - margin-bottom: $baseLineHeight; - line-height: 1; } .carousel-inner { + position: relative; overflow: hidden; width: 100%; - position: relative; -} - -.carousel { - .item { + > .item { display: none; position: relative; @include transition(.6s ease-in-out left); - } - // Account for jankitude on images - .item > img { - display: block; - line-height: 1; + // Account for jankitude on images + > img, + > a > img { + @include img-responsive(); + line-height: 1; + } } - .active, .next, .prev { display: block; } + > .active, + > .next, + > .prev { display: block; } - .active { + > .active { left: 0; } - .next, .prev { + > .next, + > .prev { position: absolute; top: 0; width: 100%; } - .next { + > .next { left: 100%; } - .prev { + > .prev { left: -100%; } - .next.left, .prev.right { + > .next.left, + > .prev.right { left: 0; } - .active.left { + > .active.left { left: -100%; } - .active.right { + > .active.right { left: 100%; } @@ -63,54 +66,167 @@ .carousel-control { position: absolute; - top: 40%; - left: 15px; - width: 40px; - height: 40px; - margin-top: -20px; - font-size: 60px; - font-weight: 100; - line-height: 30px; - color: $white; + top: 0; + left: 0; + bottom: 0; + width: $carousel-control-width; + @include opacity($carousel-control-opacity); + font-size: $carousel-control-font-size; + color: $carousel-control-color; text-align: center; - background: $grayDarker; - border: 3px solid $white; - @include border-radius(23px); - @include opacity(0.5); - - // we can't have this transition here - // because webkit cancels the carousel - // animation if you trip this while - // in the middle of another animation - // ;_; - // @include transition(opacity .2s linear); - - // Reposition the right one + text-shadow: $carousel-text-shadow; + // We can't have this transition here because WebKit cancels the carousel + // animation if you trip this while in the middle of another animation. + + // Set gradients for backgrounds + &.left { + @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); + } &.right { left: auto; - right: 15px; + right: 0; + @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); } - // Hover state - &:hover { - color: $white; + // Hover/focus state + &:hover, + &:focus { + outline: none; + color: $carousel-control-color; text-decoration: none; - @include opacity(0.9); + @include opacity(.9); + } + + // Toggles + .icon-prev, + .icon-next, + .glyphicon-chevron-left, + .glyphicon-chevron-right { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + } + .icon-prev, + .glyphicon-chevron-left { + left: 50%; + } + .icon-next, + .glyphicon-chevron-right { + right: 50%; + } + .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) + } + } + .icon-next { + &:before { + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + } } } -// Caption for text below images -// ----------------------------- +// Optional indicator pips +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + margin-left: -30%; + padding-left: 0; + list-style: none; + text-align: center; + li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + border: 1px solid $carousel-indicator-border-color; + border-radius: 10px; + cursor: pointer; + + // IE8-9 hack for event handling + // + // Internet Explorer 8-9 does not support clicks on elements without a set + // `background-color`. We cannot use `filter` since that's not viewed as a + // background color by the browser. Thus, a hack is needed. + // + // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we + // set alpha transparency for the best results possible. + background-color: #000 \9; // IE8 + background-color: rgba(0,0,0,0); // IE9 + } + .active { + margin: 0; + width: 12px; + height: 12px; + background-color: $carousel-indicator-active-bg; + } +} + +// Optional captions +// ----------------------------- +// Hidden by default for smaller viewports .carousel-caption { position: absolute; - left: 0; - right: 0; - bottom: 0; - padding: 10px 15px 5px; - background: $grayDark; - background: rgba(0,0,0,.75); + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: $carousel-caption-color; + text-align: center; + text-shadow: $carousel-text-shadow; + & .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } } -.carousel-caption h4, .carousel-caption p { - color: $white; + + +// Scale up controls for tablets and up +@media screen and (min-width: $screen-sm-min) { + + // Scale up the controls a smidge + .carousel-control { + .glyphicon-chevron-left, + .glyphicon-chevron-right, + .icon-prev, + .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + margin-left: -15px; + font-size: 30px; + } + } + + // Show and left align the captions + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_close.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_close.scss index c57f01d..62ce30f 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_close.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_close.scss @@ -1,18 +1,35 @@ -// CLOSE ICONS -// ----------- +// +// Close icons +// -------------------------------------------------- + .close { float: right; - font-size: 20px; - font-weight: bold; - line-height: $baseLineHeight; - color: $black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - @include opacity(0.2); - &:hover { - color: $black; + font-size: ($font-size-base * 1.5); + font-weight: $close-font-weight; + line-height: 1; + color: $close-color; + text-shadow: $close-text-shadow; + @include opacity(.2); + + &:hover, + &:focus { + color: $close-color; text-decoration: none; - @include opacity(0.4); cursor: pointer; + @include opacity(.5); } + + // [converter] extracted button& to button.close +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss index 482040e..8953616 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_code.scss @@ -1,56 +1,63 @@ -// Code.css.scss -// Code typography styles for the <code> and <pre> elements -// -------------------------------------------------------- +// +// Code (inline and block) +// -------------------------------------------------- + // Inline and block code styles -code, pre { - padding: 0 3px 2px; - @include font-family-monospace(); - font-size: $baseFontSize - 1; - color: $grayDark; - @include border-radius(3px); +code, +kbd, +pre, +samp { + font-family: $font-family-monospace; } // Inline code code { - padding: 3px 4px; - color: #d14; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; + padding: 2px 4px; + font-size: 90%; + color: $code-color; + background-color: $code-bg; + white-space: nowrap; + border-radius: $border-radius-base; +} + +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: $kbd-color; + background-color: $kbd-bg; + border-radius: $border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); } // Blocks of code pre { display: block; - padding: ($baseLineHeight - 1) / 2; - margin: 0 0 $baseLineHeight / 2; - font-size: 12px; - line-height: $baseLineHeight; - background-color: #f5f5f5; - border: 1px solid #ccc; // fallback for IE7-8 - border: 1px solid rgba(0,0,0,.15); - @include border-radius(4px); - white-space: pre; - white-space: pre-wrap; + padding: (($line-height-computed - 1) / 2); + margin: 0 0 ($line-height-computed / 2); + font-size: ($font-size-base - 1); // 14px to 13px + line-height: $line-height-base; word-break: break-all; word-wrap: break-word; - - // Make prettyprint styles more spaced out for readability - &.prettyprint { - margin-bottom: $baseLineHeight; - } + color: $pre-color; + background-color: $pre-bg; + border: 1px solid $pre-border-color; + border-radius: $border-radius-base; // Account for some code outputs that place code tags in pre tags code { padding: 0; + font-size: inherit; color: inherit; + white-space: pre-wrap; background-color: transparent; - border: 0; + border-radius: 0; } } // Enable scrollable blocks of code .pre-scrollable { - max-height: 340px; + max-height: $pre-scrollable-max-height; overflow-y: scroll; -}
\ No newline at end of file +} 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 186f121..86632fd 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_component-animations.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_component-animations.scss @@ -1,18 +1,29 @@ -// COMPONENT ANIMATIONS -// -------------------- +// +// Component animations +// -------------------------------------------------- + +// Heads up! +// +// We don't use the `.opacity()` mixin here since it causes a bug with text +// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. .fade { - @include transition(opacity .15s linear); opacity: 0; + @include transition(opacity .15s linear); &.in { opacity: 1; } } .collapse { - @include transition(height .35s ease); - position:relative; - overflow:hidden; + display: none; + &.in { + display: block; + } +} +.collapsing { + position: relative; height: 0; - &.in { height: auto; } -}
\ No newline at end of file + overflow: hidden; + @include transition(height .35s ease); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss index 085b5c3..526be5b 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_dropdowns.scss @@ -1,126 +1,213 @@ -// DROPDOWN MENUS -// -------------- +// +// Dropdown menus +// -------------------------------------------------- + -// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropdown { - position: relative; -} -.dropdown-toggle { - // The caret makes the toggle a bit too tall in IE7 - *margin-bottom: -3px; -} -.dropdown-toggle:active, .open .dropdown-toggle { - outline: 0; -} // Dropdown arrow/caret .caret { display: inline-block; width: 0; height: 0; - text-indent: -99999px; - // IE7 won't do the border trick if there's a text indent, but it doesn't - // do the content that text-indent is hiding, either, so we're ok. - *text-indent: 0; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid $black; - @include opacity(0.3); - content: "\2193"; -} -.dropdown .caret { - margin-top: 8px; margin-left: 2px; + vertical-align: middle; + border-top: $caret-width-base solid; + border-right: $caret-width-base solid transparent; + border-left: $caret-width-base solid transparent; } -.dropdown:hover .caret, .open.dropdown .caret { - @include opacity(1); + +// The dropdown wrapper (div) +.dropdown { + position: relative; } + +// Prevent the focus on the dropdown toggle when closing dropdowns +.dropdown-toggle:focus { + outline: 0; +} + // The dropdown menu (ul) .dropdown-menu { position: absolute; top: 100%; left: 0; - z-index: $zindexDropdown; - float: left; + z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu + float: left; min-width: 160px; - _width: 160px; - padding: 4px 0; - margin: 0; // override default ul + padding: 5px 0; + margin: 2px 0 0; // override default ul list-style: none; - background-color: $white; - border-color: #ccc; - border-color: rgba(0,0,0,.2); - border-style: solid; - border-width: 1px; - @include border-radius(0 0 5px 5px); - @include box-shadow(0 5px 10px rgba(0,0,0,.2)); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; - *border-right-width: 2px; - *border-bottom-width: 2px; - - // Allow for dropdowns to go bottom up (aka, dropup-menu) - &.bottom-up { - top: auto; - bottom: 100%; - margin-bottom: 2px; + font-size: $font-size-base; + background-color: $dropdown-bg; + border: 1px solid $dropdown-fallback-border; // IE8 fallback + border: 1px solid $dropdown-border; + border-radius: $border-radius-base; + @include box-shadow(0 6px 12px rgba(0,0,0,.175)); + background-clip: padding-box; + + // Aligns the dropdown menu to right + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` + &.pull-right { + right: 0; + left: auto; } // Dividers (basically an hr) within the dropdown .divider { - height: 1px; - margin: 5px 1px; - overflow: hidden; - background-color: #e5e5e5; - border-bottom: 1px solid $white; - - // IE7 needs a set width since we gave a height. Restricting just - // to IE7 to keep the 1px left/right space in other browsers. - // It is unclear where IE is getting the extra space that we need - // to negative-margin away, but so it goes. - *width: 100%; - *margin: -5px 0 5px; + @include nav-divider($dropdown-divider-bg); } // Links within the dropdown menu - a { + > li > a { display: block; - padding: 3px 15px; + padding: 3px 20px; clear: both; font-weight: normal; - line-height: $baseLineHeight; - color: $gray; - white-space: nowrap; + line-height: $line-height-base; + color: $dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines } } -// Hover state -.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: $white; - text-decoration: none; - background-color: $linkColor; +// Hover/Focus state +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: $dropdown-link-hover-color; + background-color: $dropdown-link-hover-bg; + } +} + +// Active state +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: $dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: $dropdown-link-active-bg; + } +} + +// Disabled state +// +// Gray out text and ensure the hover/focus state remains gray + +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: $dropdown-link-disabled-color; + } +} +// Nuke hover/focus effects +.dropdown-menu > .disabled > a { + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + @include reset-filter(); + cursor: not-allowed; + } } // Open state for the dropdown -.dropdown.open { - // IE7's z-index only goes to the nearest positioned ancestor, which would - // make the menu appear below buttons that appeared later on the page - *z-index: $zindexDropdown; - - .dropdown-toggle { - color: $white; - background: #ccc; - background: rgba(0,0,0,.3); +.open { + // Show the menu + > .dropdown-menu { + display: block; } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } +} + +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: $font-size-small; + line-height: $line-height-base; + color: $dropdown-header-color; +} + +// Backdrop to catch body clicks on mobile, etc. +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: ($zindex-dropdown - 10); +} + +// Right aligned dropdowns +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// +// Just add .dropup after the standard .dropdown class and you're set, bro. +// TODO: abstract this so that the navbar fixed styles are not placed here? + +.dropup, +.navbar-fixed-bottom .dropdown { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: $caret-width-base solid; + content: ""; + } + // Different positioning for bottom up menu .dropdown-menu { - display: block; + top: auto; + bottom: 100%; + margin-bottom: 1px; } } -// Typeahead -.typeahead { - margin-top: 2px; // give it some space to breathe - @include border-radius(4px); + +// Component alignment +// +// Reiterate per navbar.less and the modified component alignment there. + +@media (min-width: $grid-float-breakpoint) { + .navbar-right { + .dropdown-menu { + right: 0; left: auto; + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + left: 0; right: auto; + } + } } + diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss index 8c7aa42..2628238 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_forms.scss @@ -1,463 +1,436 @@ -// Forms.less -// Base styles for various input types, form layouts, and states -// ------------------------------------------------------------- +// +// Forms +// -------------------------------------------------- -// GENERAL STYLES -// -------------- - -// Make all forms have space below them -form { - margin: 0 0 $baseLineHeight; -} +// Normalize non-controls +// +// Restyle and baseline non-control form elements. fieldset { padding: 0; margin: 0; border: 0; + // Chrome and Firefox set a `min-width: -webkit-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; } -// Groups of fields with labels on top (legends) legend { display: block; width: 100%; padding: 0; - margin-bottom: $baseLineHeight * 1.5; - font-size: $baseFontSize * 1.5; - line-height: $baseLineHeight * 2; - color: $grayDark; + margin-bottom: $line-height-computed; + font-size: ($font-size-base * 1.5); + line-height: inherit; + color: $legend-color; border: 0; - border-bottom: 1px solid #eee; - - // Small - small { - font-size: $baseLineHeight * .75; - color: $grayLight; - } -} - -// Set font for forms -label, input, button, select, textarea { - @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here -} - -input, button, select, textarea { - @include font-family-sans-serif(); // And only set font-family here for those that need it (note the missing label element) + border-bottom: 1px solid $legend-border-color; } -// Identify controls by their labels label { - display: block; + display: inline-block; margin-bottom: 5px; - color: $grayDark; + font-weight: bold; } -// Inputs, Textareas, Selects -input, textarea, select, .uneditable-input { - display: inline-block; - width: 210px; - height: $baseLineHeight; - padding: 4px; - margin-bottom: 9px; - font-size: $baseFontSize; - line-height: $baseLineHeight; - color: $gray; - border: 1px solid #ccc; - @include border-radius(3px); -} -.uneditable-textarea { - width: auto; - height: auto; -} -// Inputs within a label -label input, label textarea, label select { - display: block; +// Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. + +// Override content-box in Normalize (* isn't specific enough) +input[type="search"] { + @include box-sizing(border-box); } -// Mini reset for unique input types -input[type="image"], input[type="checkbox"], input[type="radio"] { - width: auto; - height: auto; - padding: 0; - margin: 3px 0; - *margin-top: 0; /* IE7 */ +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; /* IE8-9 */ line-height: normal; - cursor: pointer; - @include border-radius(0); - border: 0 \9; /* IE9 and down */ -} -input[type="image"] { - border: 0; } -// Reset the file input to browser defaults +// Set the height of file controls to match text inputs input[type="file"] { - width: auto; - padding: initial; - line-height: initial; - border: initial; - background-color: $white; - background-color: initial; - @include box-shadow(none); + display: block; } -// Help out input buttons -input[type="button"], input[type="reset"], input[type="submit"] { - width: auto; - height: auto; +// Make range inputs behave like textual form controls +input[type="range"] { + display: block; + width: 100%; } -// Set the height of select and file controls to match text inputs -select, input[type="file"] { - height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - *margin-top: 4px; /* For IE7, add top margin to align select with labels */ - line-height: 28px; +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; } -// Reset line-height for IE -input[type="file"] { - line-height: 18px \9; +// Focus for file, radio, and checkbox +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + @include tab-focus(); } -// Chrome on Linux and Mobile Safari need background-color -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - background-color: $white; +// Adjust output element +output { + display: block; + padding-top: ($padding-base-vertical + 1); + font-size: $font-size-base; + line-height: $line-height-base; + color: $input-color; +} + + +// Common form controls +// +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// select +// textarea +// input[type="text"] +// input[type="password"] +// input[type="datetime"] +// input[type="datetime-local"] +// input[type="date"] +// input[type="month"] +// input[type="time"] +// input[type="week"] +// input[type="number"] +// input[type="email"] +// input[type="url"] +// input[type="search"] +// input[type="tel"] +// input[type="color"] + +.form-control { + display: block; + width: 100%; + height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + padding: $padding-base-vertical $padding-base-horizontal; + font-size: $font-size-base; + line-height: $line-height-base; + color: $input-color; + background-color: $input-bg; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid $input-border; + border-radius: $input-border-radius; + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); + + // Customize the `:focus` state to imitate native WebKit styles. + @include form-control-focus(); + + // Placeholder + @include placeholder(); + + // Disabled and read-only inputs + // + // HTML5 says that controls under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, we + // don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: $input-bg-disabled; + opacity: 1; // iOS fix for unreadable disabled content + } + + // [converter] extracted textarea& to textarea.form-control } -// Make multiple select elements height not fixed -select[multiple], select[size] { +// Reset height for `textarea`s +textarea.form-control { height: auto; } -// Remove shadow from image inputs -input[type="image"] { - @include box-shadow(none); -} -// Make textarea height behave -textarea { - height: auto; +// Search inputs in iOS +// +// This overrides the extra rounded corners on search inputs in iOS so that our +// `.form-control` class can properly style them. Note that this cannot simply +// be added to `.form-control` as it's not specific enough. For details, see +// https://github.com/twbs/bootstrap/issues/11586. + +input[type="search"] { + -webkit-appearance: none; } -// Hidden inputs -input[type="hidden"] { - display: none; + +// Special styles for iOS date input +// +// In Mobile Safari, date inputs require a pixel line-height that matches the +// given height of the input. + +input[type="date"] { + line-height: $input-height-base; } +// Form groups +// +// Designed to help with the organization and spacing of vertical forms. For +// horizontal forms, use the predefined grid classes. + +.form-group { + margin-bottom: 15px; +} + -// CHECKBOXES & RADIOS -// ------------------- +// Checkboxes and radios +// +// Indent the labels to position radios/checkboxes as hanging controls. -// Indent the labels to position radios/checkboxes as hanging -.radio, .checkbox { - padding-left: 18px; +.radio, +.checkbox { + display: block; + min-height: $line-height-computed; // clear the floating input if there is no label text + margin-top: 10px; + margin-bottom: 10px; + padding-left: 20px; + label { + display: inline; + font-weight: normal; + cursor: pointer; + } } -.radio input[type="radio"], .checkbox input[type="checkbox"] { +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { float: left; - margin-left: -18px; + margin-left: -20px; } - -// Move the options list down to align with labels -.controls > .radio:first-child, .controls > .checkbox:first-child { - padding-top: 5px; // has to be padding because margin collaspes +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } // Radios and checkboxes on same line -// TODO v3: Convert .inline to .control-inline -.radio.inline, .checkbox.inline { +.radio-inline, +.checkbox-inline { display: inline-block; - padding-top: 5px; + padding-left: 20px; margin-bottom: 0; vertical-align: middle; + font-weight: normal; + cursor: pointer; } -.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; margin-left: 10px; // space out consecutive inline controls } - - -// FOCUS STATE -// ----------- - -input, textarea { - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - $transition: border linear .2s, box-shadow linear .2s; - @include transition($transition); -} -input:focus, textarea:focus { - border-color: rgba(82,168,236,.8); - $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); - @include box-shadow($shadow); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ -} -input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { - @include box-shadow(none); // override for file inputs - @include tab-focus(); -} - - - -// INPUT SIZES -// ----------- - -// General classes for quick sizes -.input-mini { width: 60px; } -.input-small { width: 90px; } -.input-medium { width: 150px; } -.input-large { width: 210px; } -.input-xlarge { width: 270px; } -.input-xxlarge { width: 530px; } - -// Grid style input sizes -input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { - float: none; - margin-left: 0; +// Apply same disabled cursor tweak as for inputs +// +// Note: Neither radios nor checkboxes can be readonly. +input[type="radio"], +input[type="checkbox"], +.radio, +.radio-inline, +.checkbox, +.checkbox-inline { + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + } } +// Form control sizing +// +// Build on `.form-control` with modifier classes to decrease or increase the +// height and font-size of form controls. -// GRID SIZING FOR INPUTS -// ---------------------- +@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); -@include inputGridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth); +@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); +// Form control feedback states +// +// Apply contextual and semantic states to individual form controls. +.has-feedback { + // Enable absolute positioning + position: relative; -// DISABLED STATE -// -------------- + // Ensure icons don't overlap text + .form-control { + padding-right: ($input-height-base * 1.25); + } -// Disabled and read-only inputs -input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { - background-color: #f5f5f5; - border-color: #ddd; - cursor: not-allowed; + // 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; + } } - - - -// FORM FIELD FEEDBACK STATES -// -------------------------- - -// Warning -.control-group.warning { - @include formFieldState($warningText, $warningText, $warningBackground); -} -// Error -.control-group.error { - @include formFieldState($errorText, $errorText, $errorBackground); +// Feedback states +.has-success { + @include form-control-validation($state-success-text, $state-success-text, $state-success-bg); } -// Success -.control-group.success { - @include formFieldState($successText, $successText, $successBackground); +.has-warning { + @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg); } - -// HTML5 invalid states -// Shares styles with the .control-group.error above -input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid { - color: #b94a48; - border-color: #ee5f5b; - &:focus { - border-color: darken(#ee5f5b, 10%); - @include box-shadow(0 0 6px lighten(#ee5f5b, 20%)); - } +.has-error { + @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg); } +// 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 ACTIONS -// ------------ - -.form-actions { - padding: ($baseLineHeight - 1) 20px $baseLineHeight; - margin-top: $baseLineHeight; - margin-bottom: $baseLineHeight; - background-color: #f5f5f5; - border-top: 1px solid #ddd; -} - -// For text that needs to appear as an input but should not be an input -.uneditable-input { - display: block; - background-color: $white; - border-color: #eee; - @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); - cursor: not-allowed; +.form-control-static { + margin-bottom: 0; // Remove default margin from `p` } -// Placeholder text gets special styles; can't be bundled together though for some reason -@include placeholder($grayLight); - - -// HELP TEXT -// --------- +// Help text +// +// Apply to any element you wish to create light text for placement immediately +// below a form control. Use for general help, formatting, or instructional text. .help-block { display: block; // account for any element using help-block margin-top: 5px; - margin-bottom: 0; - color: $grayLight; + margin-bottom: 10px; + color: lighten($text-color, 25%); // lighten the text some for contrast } -.help-inline { - display: inline-block; - @include ie7-inline-block(); - margin-bottom: 9px; - vertical-align: middle; - padding-left: 5px; -} +// Inline forms +// +// Make forms appear inline(-block) by adding the `.form-inline` class. Inline +// forms begin stacked on extra small (mobile) devices and then go inline when +// viewports reach <768px. +// +// Requires wrapping inputs and labels with `.form-group` for proper display of +// default HTML form controls and our custom form controls (e.g., input groups). +// +// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. -// INPUT GROUPS -// ------------ +.form-inline { -// Allow us to put symbols and text within the input field for a cleaner look -.input-prepend, .input-append { - margin-bottom: 5px; - @include clearfix(); // Clear the float to prevent wrapping - input, .uneditable-input { - @include border-radius(0 3px 3px 0); - &:focus { - position: relative; - z-index: 2; + // Kick in the inline + @media (min-width: $screen-sm-min) { + // Inline-block all the things for "inline" + .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; } - } - .uneditable-input { - border-left-color: #eee; - border-right-color: #ccc; - } - .add-on { - float: left; - display: block; - width: auto; - min-width: 16px; - height: $baseLineHeight; - margin-right: -1px; - padding: 4px 5px; - font-weight: normal; - line-height: $baseLineHeight; - color: $grayLight; - text-align: center; - text-shadow: 0 1px 0 $white; - background-color: #f5f5f5; - border: 1px solid #ccc; - @include border-radius(3px 0 0 3px); - } - .active { - background-color: lighten($green, 30); - border-color: $green; - } -} -.input-prepend { - .add-on { - *margin-top: 1px; /* IE6-7 */ - } -} -.input-append { - input, .uneditable-input { - float: left; - @include border-radius(3px 0 0 3px); - } - .uneditable-input { - border-right-color: #ccc; - } - .add-on { - margin-right: 0; - margin-left: -1px; - @include border-radius(0 3px 3px 0); - } - input:first-child { - // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input - // inherit the sum of its ancestors' margins. - *margin-left: -160px; - &+.add-on { - *margin-left: -21px; + // In navbar-form, allow folks to *not* use `.form-group` + .form-control { + display: inline-block; + width: auto; // Prevent labels from stacking above inputs in `.form-group` + vertical-align: middle; + } + // Input groups need that 100% width though + .input-group > .form-control { + width: 100%; } - } -} - + .control-label { + margin-bottom: 0; + vertical-align: middle; + } -// SEARCH FORM -// ----------- + // Remove default margin on radios/checkboxes that were used for stacking, and + // then undo the floating of radios and checkboxes to match (which also avoids + // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). + .radio, + .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + vertical-align: middle; + } + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + float: none; + margin-left: 0; + } -.search-query { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; // remove the default margin on all inputs - @include border-radius(14px); + // Validation states + // + // Reposition the icon because it's now within a grid column and columns have + // `position: relative;` on them. Also accounts for the grid gutter padding. + .has-feedback .form-control-feedback { + top: 0; + } + } } +// Horizontal forms +// +// Horizontal forms are built on grid classes and allow you to create forms with +// labels on the left and inputs on the right. -// HORIZONTAL & VERTICAL FORMS -// --------------------------- - -// Common properties -// ----------------- +.form-horizontal { -.form-search, .form-inline, .form-horizontal { - input, textarea, select, .help-inline, .uneditable-input { - display: inline-block; + // Consistent vertical alignment of labels, radios, and checkboxes + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline { + margin-top: 0; margin-bottom: 0; + padding-top: ($padding-base-vertical + 1); // Default padding plus a border + } + // Account for padding we're adding to ensure the alignment and of help text + // and other content below items + .radio, + .checkbox { + min-height: ($line-height-computed + ($padding-base-vertical + 1)); } - // Re-hide elemnts due to specifity - .hide { display: none; } -} -.form-search label, .form-inline label, .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend { - display: inline-block; -} -// Make the prepend and append add-on vertical-align: middle; -.form-search .input-append .add-on, .form-inline .input-prepend .add-on, .form-search .input-append .add-on, .form-inline .input-prepend .add-on { - vertical-align: middle; -} -// Inline checkbox/radio labels -.form-search .radio, .form-inline .radio, .form-search .checkbox, .form-inline .checkbox { - margin-bottom: 0; - vertical-align: middle; -} - -// Margin to space out fieldsets -.control-group { - margin-bottom: $baseLineHeight / 2; -} - -// Legend collapses margin, so next elements is responsible for spacing -legend + .control-group { - margin-top: $baseLineHeight; - -webkit-margin-top-collapse: separate; -} - -// Horizontal-specific styles -// -------------------------- -.form-horizontal { - // Increase spacing between groups - .control-group { - margin-bottom: $baseLineHeight; - @include clearfix(); + // Make form groups behave like rows + .form-group { + @include make-row(); } - // Float the labels left - .control-label { - float: left; - width: 140px; - padding-top: 5px; - text-align: right; + + .form-control-static { + padding-top: ($padding-base-vertical + 1); } - // Move over all input controls and content - .controls { - margin-left: 160px; + + // Only right align form labels here when the columns stop stacking + @media (min-width: $screen-sm-min) { + .control-label { + text-align: right; + } } - // Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: 160px; + + // Validation states + // + // Reposition the icon because it's now within a grid column and columns have + // `position: relative;` on them. Also accounts for the grid gutter padding. + .has-feedback .form-control-feedback { + top: 0; + right: ($grid-gutter-width / 2); } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_glyphicons.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_glyphicons.scss new file mode 100644 index 0000000..c508835 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_glyphicons.scss @@ -0,0 +1,233 @@ +// +// Glyphicons for Bootstrap +// +// Since icons are fonts, they can be placed anywhere text is placed and are +// thus automatically sized to match the surrounding child. To use, create an +// inline element with the appropriate classes, like so: +// +// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a> + +// Import the fonts +@font-face { + font-family: 'Glyphicons Halflings'; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot')); + src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'), + url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'), + url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'), + url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg'); +} + +// Catchall baseclass +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// Individual icons +.glyphicon-asterisk { &:before { content: "\2a"; } } +.glyphicon-plus { &:before { content: "\2b"; } } +.glyphicon-euro { &:before { content: "\20ac"; } } +.glyphicon-minus { &:before { content: "\2212"; } } +.glyphicon-cloud { &:before { content: "\2601"; } } +.glyphicon-envelope { &:before { content: "\2709"; } } +.glyphicon-pencil { &:before { content: "\270f"; } } +.glyphicon-glass { &:before { content: "\e001"; } } +.glyphicon-music { &:before { content: "\e002"; } } +.glyphicon-search { &:before { content: "\e003"; } } +.glyphicon-heart { &:before { content: "\e005"; } } +.glyphicon-star { &:before { content: "\e006"; } } +.glyphicon-star-empty { &:before { content: "\e007"; } } +.glyphicon-user { &:before { content: "\e008"; } } +.glyphicon-film { &:before { content: "\e009"; } } +.glyphicon-th-large { &:before { content: "\e010"; } } +.glyphicon-th { &:before { content: "\e011"; } } +.glyphicon-th-list { &:before { content: "\e012"; } } +.glyphicon-ok { &:before { content: "\e013"; } } +.glyphicon-remove { &:before { content: "\e014"; } } +.glyphicon-zoom-in { &:before { content: "\e015"; } } +.glyphicon-zoom-out { &:before { content: "\e016"; } } +.glyphicon-off { &:before { content: "\e017"; } } +.glyphicon-signal { &:before { content: "\e018"; } } +.glyphicon-cog { &:before { content: "\e019"; } } +.glyphicon-trash { &:before { content: "\e020"; } } +.glyphicon-home { &:before { content: "\e021"; } } +.glyphicon-file { &:before { content: "\e022"; } } +.glyphicon-time { &:before { content: "\e023"; } } +.glyphicon-road { &:before { content: "\e024"; } } +.glyphicon-download-alt { &:before { content: "\e025"; } } +.glyphicon-download { &:before { content: "\e026"; } } +.glyphicon-upload { &:before { content: "\e027"; } } +.glyphicon-inbox { &:before { content: "\e028"; } } +.glyphicon-play-circle { &:before { content: "\e029"; } } +.glyphicon-repeat { &:before { content: "\e030"; } } +.glyphicon-refresh { &:before { content: "\e031"; } } +.glyphicon-list-alt { &:before { content: "\e032"; } } +.glyphicon-lock { &:before { content: "\e033"; } } +.glyphicon-flag { &:before { content: "\e034"; } } +.glyphicon-headphones { &:before { content: "\e035"; } } +.glyphicon-volume-off { &:before { content: "\e036"; } } +.glyphicon-volume-down { &:before { content: "\e037"; } } +.glyphicon-volume-up { &:before { content: "\e038"; } } +.glyphicon-qrcode { &:before { content: "\e039"; } } +.glyphicon-barcode { &:before { content: "\e040"; } } +.glyphicon-tag { &:before { content: "\e041"; } } +.glyphicon-tags { &:before { content: "\e042"; } } +.glyphicon-book { &:before { content: "\e043"; } } +.glyphicon-bookmark { &:before { content: "\e044"; } } +.glyphicon-print { &:before { content: "\e045"; } } +.glyphicon-camera { &:before { content: "\e046"; } } +.glyphicon-font { &:before { content: "\e047"; } } +.glyphicon-bold { &:before { content: "\e048"; } } +.glyphicon-italic { &:before { content: "\e049"; } } +.glyphicon-text-height { &:before { content: "\e050"; } } +.glyphicon-text-width { &:before { content: "\e051"; } } +.glyphicon-align-left { &:before { content: "\e052"; } } +.glyphicon-align-center { &:before { content: "\e053"; } } +.glyphicon-align-right { &:before { content: "\e054"; } } +.glyphicon-align-justify { &:before { content: "\e055"; } } +.glyphicon-list { &:before { content: "\e056"; } } +.glyphicon-indent-left { &:before { content: "\e057"; } } +.glyphicon-indent-right { &:before { content: "\e058"; } } +.glyphicon-facetime-video { &:before { content: "\e059"; } } +.glyphicon-picture { &:before { content: "\e060"; } } +.glyphicon-map-marker { &:before { content: "\e062"; } } +.glyphicon-adjust { &:before { content: "\e063"; } } +.glyphicon-tint { &:before { content: "\e064"; } } +.glyphicon-edit { &:before { content: "\e065"; } } +.glyphicon-share { &:before { content: "\e066"; } } +.glyphicon-check { &:before { content: "\e067"; } } +.glyphicon-move { &:before { content: "\e068"; } } +.glyphicon-step-backward { &:before { content: "\e069"; } } +.glyphicon-fast-backward { &:before { content: "\e070"; } } +.glyphicon-backward { &:before { content: "\e071"; } } +.glyphicon-play { &:before { content: "\e072"; } } +.glyphicon-pause { &:before { content: "\e073"; } } +.glyphicon-stop { &:before { content: "\e074"; } } +.glyphicon-forward { &:before { content: "\e075"; } } +.glyphicon-fast-forward { &:before { content: "\e076"; } } +.glyphicon-step-forward { &:before { content: "\e077"; } } +.glyphicon-eject { &:before { content: "\e078"; } } +.glyphicon-chevron-left { &:before { content: "\e079"; } } +.glyphicon-chevron-right { &:before { content: "\e080"; } } +.glyphicon-plus-sign { &:before { content: "\e081"; } } +.glyphicon-minus-sign { &:before { content: "\e082"; } } +.glyphicon-remove-sign { &:before { content: "\e083"; } } +.glyphicon-ok-sign { &:before { content: "\e084"; } } +.glyphicon-question-sign { &:before { content: "\e085"; } } +.glyphicon-info-sign { &:before { content: "\e086"; } } +.glyphicon-screenshot { &:before { content: "\e087"; } } +.glyphicon-remove-circle { &:before { content: "\e088"; } } +.glyphicon-ok-circle { &:before { content: "\e089"; } } +.glyphicon-ban-circle { &:before { content: "\e090"; } } +.glyphicon-arrow-left { &:before { content: "\e091"; } } +.glyphicon-arrow-right { &:before { content: "\e092"; } } +.glyphicon-arrow-up { &:before { content: "\e093"; } } +.glyphicon-arrow-down { &:before { content: "\e094"; } } +.glyphicon-share-alt { &:before { content: "\e095"; } } +.glyphicon-resize-full { &:before { content: "\e096"; } } +.glyphicon-resize-small { &:before { content: "\e097"; } } +.glyphicon-exclamation-sign { &:before { content: "\e101"; } } +.glyphicon-gift { &:before { content: "\e102"; } } +.glyphicon-leaf { &:before { content: "\e103"; } } +.glyphicon-fire { &:before { content: "\e104"; } } +.glyphicon-eye-open { &:before { content: "\e105"; } } +.glyphicon-eye-close { &:before { content: "\e106"; } } +.glyphicon-warning-sign { &:before { content: "\e107"; } } +.glyphicon-plane { &:before { content: "\e108"; } } +.glyphicon-calendar { &:before { content: "\e109"; } } +.glyphicon-random { &:before { content: "\e110"; } } +.glyphicon-comment { &:before { content: "\e111"; } } +.glyphicon-magnet { &:before { content: "\e112"; } } +.glyphicon-chevron-up { &:before { content: "\e113"; } } +.glyphicon-chevron-down { &:before { content: "\e114"; } } +.glyphicon-retweet { &:before { content: "\e115"; } } +.glyphicon-shopping-cart { &:before { content: "\e116"; } } +.glyphicon-folder-close { &:before { content: "\e117"; } } +.glyphicon-folder-open { &:before { content: "\e118"; } } +.glyphicon-resize-vertical { &:before { content: "\e119"; } } +.glyphicon-resize-horizontal { &:before { content: "\e120"; } } +.glyphicon-hdd { &:before { content: "\e121"; } } +.glyphicon-bullhorn { &:before { content: "\e122"; } } +.glyphicon-bell { &:before { content: "\e123"; } } +.glyphicon-certificate { &:before { content: "\e124"; } } +.glyphicon-thumbs-up { &:before { content: "\e125"; } } +.glyphicon-thumbs-down { &:before { content: "\e126"; } } +.glyphicon-hand-right { &:before { content: "\e127"; } } +.glyphicon-hand-left { &:before { content: "\e128"; } } +.glyphicon-hand-up { &:before { content: "\e129"; } } +.glyphicon-hand-down { &:before { content: "\e130"; } } +.glyphicon-circle-arrow-right { &:before { content: "\e131"; } } +.glyphicon-circle-arrow-left { &:before { content: "\e132"; } } +.glyphicon-circle-arrow-up { &:before { content: "\e133"; } } +.glyphicon-circle-arrow-down { &:before { content: "\e134"; } } +.glyphicon-globe { &:before { content: "\e135"; } } +.glyphicon-wrench { &:before { content: "\e136"; } } +.glyphicon-tasks { &:before { content: "\e137"; } } +.glyphicon-filter { &:before { content: "\e138"; } } +.glyphicon-briefcase { &:before { content: "\e139"; } } +.glyphicon-fullscreen { &:before { content: "\e140"; } } +.glyphicon-dashboard { &:before { content: "\e141"; } } +.glyphicon-paperclip { &:before { content: "\e142"; } } +.glyphicon-heart-empty { &:before { content: "\e143"; } } +.glyphicon-link { &:before { content: "\e144"; } } +.glyphicon-phone { &:before { content: "\e145"; } } +.glyphicon-pushpin { &:before { content: "\e146"; } } +.glyphicon-usd { &:before { content: "\e148"; } } +.glyphicon-gbp { &:before { content: "\e149"; } } +.glyphicon-sort { &:before { content: "\e150"; } } +.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } } +.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } } +.glyphicon-sort-by-order { &:before { content: "\e153"; } } +.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } } +.glyphicon-sort-by-attributes { &:before { content: "\e155"; } } +.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } } +.glyphicon-unchecked { &:before { content: "\e157"; } } +.glyphicon-expand { &:before { content: "\e158"; } } +.glyphicon-collapse-down { &:before { content: "\e159"; } } +.glyphicon-collapse-up { &:before { content: "\e160"; } } +.glyphicon-log-in { &:before { content: "\e161"; } } +.glyphicon-flash { &:before { content: "\e162"; } } +.glyphicon-log-out { &:before { content: "\e163"; } } +.glyphicon-new-window { &:before { content: "\e164"; } } +.glyphicon-record { &:before { content: "\e165"; } } +.glyphicon-save { &:before { content: "\e166"; } } +.glyphicon-open { &:before { content: "\e167"; } } +.glyphicon-saved { &:before { content: "\e168"; } } +.glyphicon-import { &:before { content: "\e169"; } } +.glyphicon-export { &:before { content: "\e170"; } } +.glyphicon-send { &:before { content: "\e171"; } } +.glyphicon-floppy-disk { &:before { content: "\e172"; } } +.glyphicon-floppy-saved { &:before { content: "\e173"; } } +.glyphicon-floppy-remove { &:before { content: "\e174"; } } +.glyphicon-floppy-save { &:before { content: "\e175"; } } +.glyphicon-floppy-open { &:before { content: "\e176"; } } +.glyphicon-credit-card { &:before { content: "\e177"; } } +.glyphicon-transfer { &:before { content: "\e178"; } } +.glyphicon-cutlery { &:before { content: "\e179"; } } +.glyphicon-header { &:before { content: "\e180"; } } +.glyphicon-compressed { &:before { content: "\e181"; } } +.glyphicon-earphone { &:before { content: "\e182"; } } +.glyphicon-phone-alt { &:before { content: "\e183"; } } +.glyphicon-tower { &:before { content: "\e184"; } } +.glyphicon-stats { &:before { content: "\e185"; } } +.glyphicon-sd-video { &:before { content: "\e186"; } } +.glyphicon-hd-video { &:before { content: "\e187"; } } +.glyphicon-subtitles { &:before { content: "\e188"; } } +.glyphicon-sound-stereo { &:before { content: "\e189"; } } +.glyphicon-sound-dolby { &:before { content: "\e190"; } } +.glyphicon-sound-5-1 { &:before { content: "\e191"; } } +.glyphicon-sound-6-1 { &:before { content: "\e192"; } } +.glyphicon-sound-7-1 { &:before { content: "\e193"; } } +.glyphicon-copyright-mark { &:before { content: "\e194"; } } +.glyphicon-registration-mark { &:before { content: "\e195"; } } +.glyphicon-cloud-download { &:before { content: "\e197"; } } +.glyphicon-cloud-upload { &:before { content: "\e198"; } } +.glyphicon-tree-conifer { &:before { content: "\e199"; } } +.glyphicon-tree-deciduous { &:before { content: "\e200"; } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_grid.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_grid.scss index d29b7aa..f71f8b9 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_grid.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_grid.scss @@ -1,8 +1,84 @@ -// GRID SYSTEM -// ----------- +// +// Grid system +// -------------------------------------------------- -// Fixed (940px) -@include gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth); -// Fluid (940px) -@include fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
\ No newline at end of file +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +.container { + @include container-fixed(); + + @media (min-width: $screen-sm-min) { + width: $container-sm; + } + @media (min-width: $screen-md-min) { + width: $container-md; + } + @media (min-width: $screen-lg-min) { + width: $container-lg; + } +} + + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + @include container-fixed(); +} + + +// Row +// +// Rows contain and clear the floats of your columns. + +.row { + @include make-row(); +} + + +// Columns +// +// Common styles for small and large grid columns + +@include make-grid-columns(); + + +// Extra small grid +// +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. + +@include make-grid(xs); + + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: $screen-sm-min) { + @include make-grid(sm); +} + + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + +@media (min-width: $screen-md-min) { + @include make-grid(md); +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: $screen-lg-min) { + @include make-grid(lg); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_hero-unit.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_hero-unit.scss deleted file mode 100644 index 7184ffb..0000000 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_hero-unit.scss +++ /dev/null @@ -1,20 +0,0 @@ -// HERO UNIT -// --------- - -.hero-unit { - padding: 60px; - margin-bottom: 30px; - background-color: #f5f5f5; - @include border-radius(6px); - h1 { - margin-bottom: 0; - font-size: 60px; - line-height: 1; - letter-spacing: -1px; - } - p { - font-size: 18px; - font-weight: 200; - line-height: $baseLineHeight * 1.5; - } -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_input-groups.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_input-groups.scss new file mode 100644 index 0000000..6c26c1d --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_input-groups.scss @@ -0,0 +1,162 @@ +// +// Input groups +// -------------------------------------------------- + +// Base styles +// ------------------------- +.input-group { + position: relative; // For dropdowns + display: table; + border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table + + // Undo padding and float of grid classes + &[class*="col-"] { + float: none; + padding-left: 0; + padding-right: 0; + } + + .form-control { + // Ensure that the input is always above the *appended* addon button for + // proper border colors. + position: relative; + z-index: 2; + + // IE9 fubars the placeholder attribute in text inputs and the arrows on + // select elements in input groups. To fix it, we float the input. Details: + // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855 + float: left; + + width: 100%; + margin-bottom: 0; + } +} + +// Sizing options +// +// Remix the default form control sizing classes into new ones for easier +// manipulation. + +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.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; } + + +// Display as table-cell +// ------------------------- +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; + + &:not(:first-child):not(:last-child) { + border-radius: 0; + } +} +// Addon and addon wrapper for buttons +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; // Match the inputs +} + +// Text input groups +// ------------------------- +.input-group-addon { + padding: $padding-base-vertical $padding-base-horizontal; + font-size: $font-size-base; + font-weight: normal; + line-height: 1; + color: $input-color; + text-align: center; + background-color: $input-group-addon-bg; + border: 1px solid $input-group-addon-border-color; + border-radius: $border-radius-base; + + // Sizing + &.input-sm { + padding: $padding-small-vertical $padding-small-horizontal; + font-size: $font-size-small; + border-radius: $border-radius-small; + } + &.input-lg { + padding: $padding-large-vertical $padding-large-horizontal; + font-size: $font-size-large; + border-radius: $border-radius-large; + } + + // Nuke default margins from checkboxes and radios to vertically center within. + input[type="radio"], + input[type="checkbox"] { + margin-top: 0; + } +} + +// Reset rounded corners +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + @include border-right-radius(0); +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); +} +.input-group-addon:last-child { + border-left: 0; +} + +// Button input groups +// ------------------------- +.input-group-btn { + position: relative; + // Jankily prevent input button groups from wrapping with `white-space` and + // `font-size` in combination with `inline-block` on buttons. + font-size: 0; + white-space: nowrap; + + // Negative margin for spacing, position for bringing hovered/focused/actived + // element above the siblings. + > .btn { + position: relative; + + .btn { + margin-left: -1px; + } + // Bring the "active" button to the front + &:hover, + &:focus, + &:active { + z-index: 2; + } + } + + // Negative margin to only have a 1px border between the two + &:first-child { + > .btn, + > .btn-group { + margin-right: -1px; + } + } + &:last-child { + > .btn, + > .btn-group { + margin-left: -1px; + } + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_jumbotron.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_jumbotron.scss new file mode 100644 index 0000000..4e401e7 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_jumbotron.scss @@ -0,0 +1,44 @@ +// +// Jumbotron +// -------------------------------------------------- + + +.jumbotron { + padding: $jumbotron-padding; + margin-bottom: $jumbotron-padding; + color: $jumbotron-color; + background-color: $jumbotron-bg; + + h1, + .h1 { + color: $jumbotron-heading-color; + } + p { + margin-bottom: ($jumbotron-padding / 2); + font-size: $jumbotron-font-size; + font-weight: 200; + } + + .container & { + border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container + } + + .container { + max-width: 100%; + } + + @media screen and (min-width: $screen-sm-min) { + padding-top: ($jumbotron-padding * 1.6); + padding-bottom: ($jumbotron-padding * 1.6); + + .container & { + padding-left: ($jumbotron-padding * 2); + padding-right: ($jumbotron-padding * 2); + } + + h1, + .h1 { + font-size: ($font-size-base * 4.5); + } + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss index 6e4c22d..8353eb1 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_labels.scss @@ -1,32 +1,64 @@ -// LABELS -// ------ +// +// Labels +// -------------------------------------------------- -// Base .label { - padding: 2px 4px 3px; - font-size: $baseFontSize * .85; + display: inline; + padding: .2em .6em .3em; + font-size: 75%; font-weight: bold; - color: $white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: $grayLight; - @include border-radius(3px); -} + line-height: 1; + color: $label-color; + text-align: center; + white-space: nowrap; + 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; + } + } + + // Empty labels collapse automatically (not available in IE8) + &:empty { + display: none; + } -// Hover state -.label:hover { - color: $white; - text-decoration: none; + // Quick fix for labels in buttons + .btn & { + position: relative; + top: -1px; + } } // Colors -.label-important { background-color: $errorText; } -.label-important:hover { background-color: darken($errorText, 10%); } +// Contextual variations (linked labels get darker on :hover) + +.label-default { + @include label-variant($label-default-bg); +} + +.label-primary { + @include label-variant($label-primary-bg); +} + +.label-success { + @include label-variant($label-success-bg); +} -.label-warning { background-color: $orange; } -.label-warning:hover { background-color: darken($orange, 10%); } +.label-info { + @include label-variant($label-info-bg); +} -.label-success { background-color: $successText; } -.label-success:hover { background-color: darken($successText, 10%); } +.label-warning { + @include label-variant($label-warning-bg); +} -.label-info { background-color: $infoText; } -.label-info:hover { background-color: darken($infoText, 10%); }
\ No newline at end of file +.label-danger { + @include label-variant($label-danger-bg); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_layouts.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_layouts.scss deleted file mode 100644 index c600522..0000000 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_layouts.scss +++ /dev/null @@ -1,17 +0,0 @@ -// -// Layouts -// Fixed-width and fluid (with sidebar) layouts -// -------------------------------------------- - - -// Container (centered, fixed-width layouts) -.container { - @include container-fixed(); -} - -// Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { - padding-left: $gridGutterWidth; - padding-right: $gridGutterWidth; - @include clearfix(); -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_list-group.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_list-group.scss new file mode 100644 index 0000000..b608991 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_list-group.scss @@ -0,0 +1,110 @@ +// +// List groups +// -------------------------------------------------- + + +// Base class +// +// Easily usable on <ul>, <ol>, or <div>. + +.list-group { + // No need to set list-style: none; since .list-group-item is block level + margin-bottom: 20px; + padding-left: 0; // reset padding because ul and ol +} + + +// Individual list items +// +// Use on `li`s or `div`s within the `.list-group` parent. + +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + // Place the border on the list items and negative margin up for better styling + margin-bottom: -1px; + background-color: $list-group-bg; + border: 1px solid $list-group-border; + + // Round the first and last items + &:first-child { + @include border-top-radius($list-group-border-radius); + } + &:last-child { + margin-bottom: 0; + @include border-bottom-radius($list-group-border-radius); + } + + // Align badges within list items + > .badge { + float: right; + } + > .badge + .badge { + margin-right: 5px; + } +} + + +// Linked list items +// +// Use anchor elements instead of `li`s or `div`s to create linked list items. +// Includes an extra `.active` modifier class for showing selected items. + +a.list-group-item { + color: $list-group-link-color; + + .list-group-item-heading { + color: $list-group-link-heading-color; + } + + // Hover state + &:hover, + &:focus { + text-decoration: none; + background-color: $list-group-hover-bg; + } + + // Active class on item itself, not parent + &.active, + &.active:hover, + &.active:focus { + z-index: 2; // Place active items above their siblings for proper border styling + color: $list-group-active-color; + background-color: $list-group-active-bg; + border-color: $list-group-active-border; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: $list-group-active-text-color; + } + } +} + + +// Contextual variants +// +// Add modifier classes to change text and background color on individual items. +// Organizationally, this must come after the `:hover` states. + +@include list-group-item-variant(success, $state-success-bg, $state-success-text); +@include list-group-item-variant(info, $state-info-bg, $state-info-text); +@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); +@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); + + +// Custom content options +// +// Extra classes for creating well-formatted content within `.list-group-item`s. + +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_media.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_media.scss new file mode 100644 index 0000000..5ad22cd --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_media.scss @@ -0,0 +1,56 @@ +// Media objects +// Source: http://stubbornella.org/content/?p=497 +// -------------------------------------------------- + + +// Common styles +// ------------------------- + +// Clear the floats +.media, +.media-body { + overflow: hidden; + zoom: 1; +} + +// Proper spacing between instances of .media +.media, +.media .media { + margin-top: 15px; +} +.media:first-child { + margin-top: 0; +} + +// For images and videos, set to block +.media-object { + display: block; +} + +// Reset margins on headings for tighter default spacing +.media-heading { + margin: 0 0 5px; +} + + +// Media image alignment +// ------------------------- + +.media { + > .pull-left { + margin-right: 10px; + } + > .pull-right { + margin-left: 10px; + } +} + + +// Media list variation +// ------------------------- + +// Undo default ul/ol styles +.media-list { + padding-left: 0; + list-style: none; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss index 1731051..74ccf9f 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss @@ -1,349 +1,243 @@ -// Mixins.less -// Snippets of reusable CSS to develop faster and keep code readable -// ----------------------------------------------------------------- +// +// Mixins +// -------------------------------------------------- -// UTILITY MIXINS -// -------------------------------------------------- +// Utilities +// ------------------------- // Clearfix -// -------- -// For clearing floats like a boss h5bp.com/q +// 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() { - *zoom: 1; &:before, &:after { - display: table; - content: ""; + content: " "; // 1 + display: table; // 2 } &:after { clear: both; } } -.clearfix { @include clearfix(); } -// Webkit-style focus -// ------------------ +// WebKit-style focus @mixin tab-focus() { // Default - outline: thin dotted #333; - // Webkit + 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; } -// IE7 inline-block -// ---------------- -@mixin ie7-inline-block() { - *display: inline; /* IE7 inline-block hack */ - *zoom: 1; -} - -// IE7 likes to collapse whitespace on either side of the inline-block elements. -// Ems because we're attempting to match the width of a space character. Left -// version is for form buttons, which typically come after other elements, and -// right version is for icons, which come before. Applying both is ok, but it will -// mean that space between those elements will be .6em (~2 space characters) in IE7, -// instead of the 1 space in other browsers. -@mixin ie7-restore-left-whitespace() { - *margin-left: .3em; - - &:first-child { - *margin-left: 0; - } -} - -@mixin ie7-restore-right-whitespace() { - *margin-right: .3em; - - &:last-child { - *margin-left: 0; - } -} - // Sizing shortcuts -// ------------------------- -@mixin size($height: 5px, $width: 5px) { +@mixin size($width, $height) { width: $width; height: $height; } -@mixin square($size: 5px) { +@mixin square($size) { @include size($size, $size); } // Placeholder text -// ------------------------- -@mixin placeholder($color: $placeholderText) { - :-moz-placeholder { - color: $color; - } - ::-webkit-input-placeholder { - color: $color; - } +@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 -// FONTS -// -------------------------------------------------- -@mixin font-family-serif() { - font-family: Georgia, "Times New Roman", Times, serif; +// 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; } -@mixin font-family-sans-serif() { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} -@mixin font-family-monospace() { - font-family: Menlo, Monaco, "Courier New", monospace; -} -@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { - font-size: $size; - font-weight: $weight; - line-height: $lineHeight; -} -@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { - @include font-family-serif(); - @include font-shorthand($size, $weight, $lineHeight); -} -@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { - @include font-family-sans-serif(); - @include font-shorthand($size, $weight, $lineHeight); -} -@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { - @include font-family-monospace(); - @include font-shorthand($size, $weight, $lineHeight); +// New mixin to use as of v3.0.1 +@mixin text-hide() { + @include hide-text(); } -// GRID SYSTEM +// CSS3 PROPERTIES // -------------------------------------------------- -// Site container -// ------------------------- -@mixin container-fixed() { - width: $gridRowWidth; - margin-left: auto; - margin-right: auto; - @include clearfix(); +// Single side border-radius +@mixin border-top-radius($radius) { + border-top-right-radius: $radius; + border-top-left-radius: $radius; } - -// Le grid system -// ------------------------- - -// Setup the mixins to be used -@mixin gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) { - width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)); +@mixin border-right-radius($radius) { + border-bottom-right-radius: $radius; + border-top-right-radius: $radius; } -@mixin gridSystemOffset($gridColumnWidth, $gridGutterWidth, $columns) { - margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2); +@mixin border-bottom-radius($radius) { + border-bottom-right-radius: $radius; + border-bottom-left-radius: $radius; } -@mixin gridSystemGridColumn($gridGutterWidth) { - float: left; - margin-left: $gridGutterWidth; -} -// Take these values and mixins, and make 'em do their thang -@mixin gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) { - // Row surrounds the columns - .row { - margin-left: $gridGutterWidth * -1; - @include clearfix(); - } - // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg) - [class*="span"] { - @include gridSystemGridColumn($gridGutterWidth); - } - // Default columns - @for $i from 1 through $gridColumns { - .span#{$i} { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i) } - } - .container { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $gridColumns) } - - // Offset column options - @for $i from 1 through $gridColumns - 1 { - .offset#{$i} { @include gridSystemOffset($gridColumnWidth, $gridGutterWidth, $i) } - } -} - -// Fluid grid system -// ------------------------- -@mixin fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) { - width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)); -} -@mixin fluidGridSystemGridColumn($fluidGridGutterWidth) { - float: left; - margin-left: $fluidGridGutterWidth; -} -// Take these values and mixins, and make 'em do their thang -@mixin fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) { - // Row surrounds the columns - .row-fluid { - width: 100%; - @include clearfix(); - - // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg) - > [class*="span"] { - @include fluidGridSystemGridColumn($fluidGridGutterWidth); - } - > [class*="span"]:first-child { - margin-left: 0; - } - // Default columns - @for $i from 1 through $gridColumns { - > .span#{$i} { @include fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); } - } - } -} - -// Input grid system -// ------------------------- -@mixin inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) { - width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10; -} -@mixin inputGridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) { - input, textarea, .uneditable-input { - @for $i from 1 through $gridColumns { - &.span#{$i} { @include inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); } - } - } -} - -// Make a grid -// ------------------------- -// Use makeRow() and makeColumn() to assign semantic layouts grid system behaviour -@mixin makeRow() { - margin-left: $gridGutterWidth * -1; - @include clearfix(); -} -@mixin makeColumn($columns: 1) { - float: left; - margin-left: $gridGutterWidth; - width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)); -} - - -// Form field states (used in forms.less) -// -------------------------------------------------- - -// Mixin for form field states -@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) { - // Set the text color - > label, .help-block, .help-inline { - color: $textColor; - } - // Style inputs accordingly - input, select, textarea { - color: $textColor; - border-color: $borderColor; - &:focus { - border-color: darken($borderColor, 10%); - @include box-shadow(0 0 6px lighten($borderColor, 20%)); - } - } - // Give a small background color for input-prepend/-append - .input-prepend .add-on, .input-append .add-on { - color: $textColor; - background-color: $backgroundColor; - border-color: $textColor; - } -} - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Border Radius -@mixin border-radius($radius: 5px) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - border-radius: $radius; +@mixin border-left-radius($radius) { + border-bottom-left-radius: $radius; + border-top-left-radius: $radius; } // Drop shadows -@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow: $shadow; - -moz-box-shadow: $shadow; +// +// 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) { +@mixin transition($transition...) { -webkit-transition: $transition; - -moz-transition: $transition; - -ms-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-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); - -moz-transform: rotate($degrees); - -ms-transform: rotate($degrees); - -o-transform: rotate($degrees); + -ms-transform: rotate($degrees); // IE9 only transform: rotate($degrees); } -@mixin scale($ratio) { - -webkit-transform: scale($ratio); - -moz-transform: scale($ratio); - -ms-transform: scale($ratio); - -o-transform: scale($ratio); - transform: scale($ratio); +@mixin scale($scale-args...) { + -webkit-transform: scale($scale-args); + -ms-transform: scale($scale-args); // IE9 only + transform: scale($scale-args); } -@mixin translate($x: 0, $y: 0) { +@mixin translate($x, $y) { -webkit-transform: translate($x, $y); - -moz-transform: translate($x, $y); - -ms-transform: translate($x, $y); - -o-transform: translate($x, $y); + -ms-transform: translate($x, $y); // IE9 only transform: translate($x, $y); } - -@mixin skew($x: 0, $y: 0) { +@mixin skew($x, $y) { -webkit-transform: skew($x, $y); - -moz-transform: skew($x, $y); - -ms-transform: skew($x, $y); - -o-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: 0, $y: 0, $z: 0) { - -webkit-transform: translate($x, $y, $z); - -moz-transform: translate($x, $y, $z); - -ms-transform: translate($x, $y, $z); - -o-transform: translate($x, $y, $z); - transform: translate($x, $y, $z); +@mixin translate3d($x, $y, $z) { + -webkit-transform: translate3d($x, $y, $z); + transform: translate3d($x, $y, $z); } -// Background clipping -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" -@mixin background-clip($clip) { - -webkit-background-clip: $clip; - -moz-background-clip: $clip; - background-clip: $clip; +@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; } -// Background sizing -@mixin background-size($size){ - -webkit-background-size: $size; - -moz-background-size: $size; - -o-background-size: $size; - background-size: $size; +// 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) { @@ -357,174 +251,697 @@ @mixin user-select($select) { -webkit-user-select: $select; -moz-user-select: $select; - -o-user-select: $select; + -ms-user-select: $select; // IE10+ user-select: $select; } // Resize anything -@mixin resizable($direction: both) { +@mixin resizable($direction) { resize: $direction; // Options: horizontal, vertical, both overflow: auto; // Safari fix } // CSS3 Content Columns -@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) { - -webkit-column-count: $columnCount; - -moz-column-count: $columnCount; - column-count: $columnCount; - -webkit-column-gap: $columnGap; - -moz-column-gap: $columnGap; - column-gap: $columnGap; +@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: 1) { +@mixin opacity($opacity) { opacity: $opacity; - filter: alpha(opacity=$opacity * 100); + // IE8 filter + $opacity-ie: ($opacity * 100); + filter: #{alpha(opacity=$opacity-ie)}; } -// BACKGROUNDS +// GRADIENTS // -------------------------------------------------- -// Add an alphatransparency value to any background or border color (via Elyse Holladay) -@mixin translucent-background($color: $white, $alpha: 1) { - background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); -} -@mixin translucent-border($color: $white, $alpha: 1) { - border-color: hsla(hue($color), saturation($color), lightness($color), $alpha); - @include background-clip(padding-box); -} -// Gradient Bar Colors for buttons and alerts -@mixin gradientBar($primaryColor, $secondaryColor) { - @include gradient-vertical($primaryColor, $secondaryColor); - border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); -} -// Gradients -@mixin gradient-horizontal($startColor: #555, $endColor: #333) { - background-color: $endColor; - background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ - background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10 - background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 - background-image: linear-gradient(left, $startColor, $endColor); // Le standard +// 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($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down -} -@mixin gradient-vertical($startColor: #555, $endColor: #333) { - background-color: mix($startColor, $endColor, 60%); - background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ - background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10 - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 - background-image: linear-gradient(top, $startColor, $endColor); // The standard + 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($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down } -@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) { - background-color: $endColor; + +@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { background-repeat: repeat-x; - background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ - background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10 - background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 - background-image: linear-gradient($deg, $startColor, $endColor); // The standard -} -@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { - background-color: mix($midColor, $endColor, 80%); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor)); - background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor); - background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor); - background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor); - background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor); - background-image: linear-gradient($startColor, $midColor $colorStop, $endColor); + 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($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback -} -@mixin gradient-radial($innerColor: #555, $outerColor: #333) { - background-color: $outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)); - background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor); - background-image: -moz-radial-gradient(circle, $innerColor, $outerColor); - background-image: -ms-radial-gradient(circle, $innerColor, $outerColor); + 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; - // Opera cannot do radial gradients yet + 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-striped($color, $angle: -45deg) { - background-color: $color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)); +@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); } -// Mixin for generating button backgrounds -// --------------------------------------- -@mixin buttonBackground($startColor, $endColor) { - // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - @include gradientBar($startColor, $endColor); - @include reset-filter(); - // in these cases the gradient won't cover the background, so we override - &:hover, &:active, &.active, &.disabled, &[disabled] { - background-color: $endColor; - } +// Retina images +// +// Short retina mixin for setting background-image and -size - // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves - &:active, &.active { - background-color: darken($endColor, 10%) \9; +@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 // -------------------------------------------------- -// POPOVER ARROWS +// 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 // ------------------------- -// For tipsies and popovers -@mixin popoverArrowTop($arrowWidth: 5px) { - bottom: 0; - left: 50%; - margin-left: -$arrowWidth; - border-left: $arrowWidth solid transparent; - border-right: $arrowWidth solid transparent; - border-top: $arrowWidth solid $black; -} -@mixin popoverArrowLeft($arrowWidth: 5px) { - top: 50%; - right: 0; - margin-top: -$arrowWidth; - border-top: $arrowWidth solid transparent; - border-bottom: $arrowWidth solid transparent; - border-left: $arrowWidth solid $black; -} -@mixin popoverArrowBottom($arrowWidth: 5px) { - top: 0; - left: 50%; - margin-left: -$arrowWidth; - border-left: $arrowWidth solid transparent; - border-right: $arrowWidth solid transparent; - border-bottom: $arrowWidth solid $black; -} -@mixin popoverArrowRight($arrowWidth: 5px) { - top: 50%; - left: 0; - margin-top: -$arrowWidth; - border-top: $arrowWidth solid transparent; - border-bottom: $arrowWidth solid transparent; - border-right: $arrowWidth solid $black; +@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; + } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss index 0e80951..931092c 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss @@ -1,83 +1,139 @@ -// MODALS -// ------ +// +// Modals +// -------------------------------------------------- -// Recalculate z-index where appropriate +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and shit + +// Kill the scroll on the body .modal-open { - .dropdown-menu { z-index: $zindexDropdown + $zindexModal; } - .dropdown.open { *z-index: $zindexDropdown + $zindexModal; } - .popover { z-index: $zindexPopover + $zindexModal; } - .tooltip { z-index: $zindexTooltip + $zindexModal; } + overflow: hidden; } -// Background -.modal-backdrop { +// Container that the modal scrolls within +.modal { + display: none; + overflow: auto; + overflow-y: scroll; position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: $zindexModalBackdrop; - background-color: $black; - // Fade for backdrop - &.fade { opacity: 0; } + z-index: $zindex-modal; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + @include translate(0, -25%); + @include transition-transform(0.3s ease-out); + } + &.in .modal-dialog { @include translate(0, 0)} } -.modal-backdrop, .modal-backdrop.fade.in { - @include opacity(0.8); +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; } -// Base modal -.modal { +// Actual modal +.modal-content { + position: relative; + background-color: $modal-content-bg; + border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid $modal-content-border-color; + border-radius: $border-radius-large; + @include box-shadow(0 3px 9px rgba(0,0,0,.5)); + background-clip: padding-box; + // Remove focus outline from opened modal + outline: none; +} + +// Modal background +.modal-backdrop { position: fixed; - top: 50%; - left: 50%; - z-index: $zindexModal; - max-height: 500px; - overflow: auto; - width: 560px; - margin: -250px 0 0 -280px; - background-color: $white; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.3); - *border: 1px solid #999; /* IE6-7 */ - @include border-radius(6px); - @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); - @include background-clip(padding-box); - &.fade { - $transition: opacity .3s linear, top .3s ease-out; - @include transition($transition); - top: -25%; - } - &.fade.in { top: 50%; } + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal-background; + background-color: $modal-backdrop-bg; + // Fade for backdrop + &.fade { @include opacity(0); } + &.in { @include opacity($modal-backdrop-opacity); } } + +// Modal header +// Top section of the modal w/ title and dismiss .modal-header { - padding: 9px 15px; - border-bottom: 1px solid #eee; - // Close icon - .close { margin-top: 2px; } + padding: $modal-title-padding; + border-bottom: 1px solid $modal-header-border-color; + min-height: ($modal-title-padding + $modal-title-line-height); +} +// Close icon +.modal-header .close { + margin-top: -2px; } -// Body (where all modal content resides) -.modal-body { - padding: 15px; +// Title text within header +.modal-title { + margin: 0; + line-height: $modal-title-line-height; } -// Remove bottom margin if need be -.modal-body .modal-form { - margin-bottom: 0; + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: $modal-inner-padding; } // Footer (for actions) .modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - @include border-radius(0 0 6px 6px); - @include box-shadow(inset 0 1px 0 $white); - @include clearfix(); - .btn { - float: right; + margin-top: 15px; + padding: ($modal-inner-padding - 1) $modal-inner-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 + + // Properly space out buttons + .btn + .btn { margin-left: 5px; margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Scale up the modal +@media (min-width: $screen-sm-min) { + // Automatically set modal's width for larger viewports + .modal-dialog { + width: $modal-md; + margin: 30px auto; + } + .modal-content { + @include box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + + // Modal sizes + .modal-sm { width: $modal-sm; } +} + +@media (min-width: $screen-md-min) { + .modal-lg { width: $modal-lg; } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss index 305dbd9..8ad9437 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navbar.scss @@ -1,288 +1,620 @@ -// NAVBAR (FIXED AND STATIC) -// ------------------------- +// +// Navbars +// -------------------------------------------------- -// COMMON STYLES -// ------------- +// Wrapper and base class +// +// Provide a static navbar from which we expand to create full-width, fixed, and +// other navbar variations. .navbar { - overflow: visible; - margin-bottom: $baseLineHeight; -} + position: relative; + min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) + margin-bottom: $navbar-margin-bottom; + border: 1px solid transparent; -// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present -.navbar-inner { - padding-left: 20px; - padding-right: 20px; - @include gradient-vertical($navbarBackgroundHighlight, $navbarBackground); - @include border-radius(4px); - $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - @include box-shadow($shadow); -} + // Prevent floats from breaking the navbar + @include clearfix(); -// Navbar button for toggling navbar items in responsive layouts -.btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - @include buttonBackground($navbarBackgroundHighlight, $navbarBackground); - $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); - @include box-shadow($shadow); -} -.btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - @include border-radius(1px); - @include box-shadow(0 1px 0 rgba(0,0,0,.25)); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} -// Override the default collapsed state -.nav-collapse.collapse { - height: auto; + @media (min-width: $grid-float-breakpoint) { + border-radius: $navbar-border-radius; + } } -// Brand, links, text, and buttons -.navbar { - // Hover and active states - .brand:hover { - text-decoration: none; - } - // Website or project name - .brand { +// Navbar heading +// +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy +// styling of responsive aspects. + +.navbar-header { + @include clearfix(); + + @media (min-width: $grid-float-breakpoint) { float: left; - display: block; - padding: 8px 20px 12px; - margin-left: -20px; // negative indent to left-align the text down the page - font-size: 20px; - font-weight: 200; - line-height: 1; - color: $white; - } - // Plain text in topbar - .navbar-text { - margin-bottom: 0; - line-height: 40px; - color: $navbarText; - a:hover { - color: $white; - background-color: transparent; - } - } - // Buttons in navbar - .btn, .btn-group { - margin-top: 5px; // make buttons vertically centered in navbar - } - .btn-group .btn { - margin-top: 0; // then undo the margin here so we don't accidentally double it } } -// Navbar forms -.navbar-form { - margin-bottom: 0; // remove default bottom margin + +// Navbar collapse (body) +// +// Group your navbar content into this for easy collapsing and expanding across +// various device sizes. By default, this content is collapsed when <768px, but +// will expand past that for a horizontal display. +// +// To start (on mobile devices) the navbar links, forms, and buttons are stacked +// vertically and include a `max-height` to overflow in case you have too much +// content for the user's viewport. + +.navbar-collapse { + max-height: $navbar-collapse-max-height; + overflow-x: visible; + padding-right: $navbar-padding-horizontal; + padding-left: $navbar-padding-horizontal; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255,255,255,.1); @include clearfix(); - input, select { - display: inline-block; - margin-top: 5px; - margin-bottom: 0; - } - .radio, .checkbox { - margin-top: 5px; - } - input[type="image"], input[type="checkbox"], input[type="radio"] { - margin-top: 3px; - } - .input-append, .input-prepend { - margin-top: 6px; - white-space: nowrap; // prevents two items from separating within a .navbar-form that has .pull-left - input { - margin-top: 0; //remove the margin on top since it's on parent + -webkit-overflow-scrolling: touch; + + &.in { + overflow-y: auto; + } + + @media (min-width: $grid-float-breakpoint) { + width: auto; + border-top: 0; + box-shadow: none; + + &.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; // Override default setting + overflow: visible !important; + } + + &.in { + overflow-y: visible; + } + + // Undo the collapse side padding for navbars with containers to ensure + // alignment of right-aligned contents. + .navbar-fixed-top &, + .navbar-static-top &, + .navbar-fixed-bottom & { + padding-left: 0; + padding-right: 0; } } } -// Navbar search -.navbar-search { - position: relative; - float: left; - margin-top: 6px; - margin-bottom: 0; - .search-query { - padding: 4px 9px; - @include font-sans-serif(13px, normal, 1); - color: $white; - color: rgba(255,255,255,.75); - background: #666; - background: rgba(255,255,255,.3); - border: 1px solid #111; - $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); - @include box-shadow($shadow); - @include transition(none); - - // Placeholder text gets special styles; can't be bundled together though for some reason - @include placeholder($grayLighter); - - // Hover states - &:hover { - color: $white; - background-color: $grayLight; - background-color: rgba(255,255,255,.5); - } - // Focus states (we use .focused since IE7-8 and down doesn't support :focus) - &:focus, &.focused { - padding: 5px 10px; - color: $grayDark; - text-shadow: 0 1px 0 $white; - background-color: $white; - border: 0; - @include box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; + +// Both navbar header and collapse +// +// When a container is present, change the behavior of the header and collapse. + +.container, +.container-fluid { + > .navbar-header, + > .navbar-collapse { + margin-right: -$navbar-padding-horizontal; + margin-left: -$navbar-padding-horizontal; + + @media (min-width: $grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; } } } -// FIXED NAVBAR -// ------------ +// +// Navbar alignment options +// +// Display the navbar across the entirety of the page or fixed it to the top or +// bottom of the page. -.navbar-fixed-top { +// Static top (unfixed, but 100% wide) navbar +.navbar-static-top { + z-index: $zindex-navbar; + border-width: 0 0 1px; + + @media (min-width: $grid-float-breakpoint) { + border-radius: 0; + } +} + +// Fix the top/bottom navbars when screen real estate supports it +.navbar-fixed-top, +.navbar-fixed-bottom { position: fixed; - top: 0; right: 0; left: 0; - z-index: $zindexFixedNavbar; + z-index: $zindex-navbar-fixed; + + // Undo the rounded corners + @media (min-width: $grid-float-breakpoint) { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; } -.navbar-fixed-top .navbar-inner { - padding-left: 0; - padding-right: 0; - @include border-radius(0); +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; // override .navbar defaults + border-width: 1px 0 0; } -// NAVIGATION -// ---------- +// Brand/project name -.navbar .nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; -} -.navbar .nav.pull-right { - float: right; // redeclare due to specificity -} -.navbar .nav > li { - display: block; +.navbar-brand { float: left; -} + padding: $navbar-padding-vertical $navbar-padding-horizontal; + font-size: $font-size-large; + line-height: $line-height-computed; + height: $navbar-height; -// Links -.navbar .nav > li > a { - float: none; - padding: 10px 10px 11px; - line-height: 19px; - color: $navbarLinkColor; - text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); -} -// Hover -.navbar .nav > li > a:hover { - background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from :active - color: $navbarLinkColorHover; - text-decoration: none; + &:hover, + &:focus { + text-decoration: none; + } + + @media (min-width: $grid-float-breakpoint) { + .navbar > .container &, + .navbar > .container-fluid & { + margin-left: -$navbar-padding-horizontal; + } + } } -// Active nav items -.navbar .nav .active > a, .navbar .nav .active > a:hover { - color: $navbarLinkColorHover; - text-decoration: none; - background-color: $navbarBackground; + +// Navbar toggle +// +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// JavaScript plugin. + +.navbar-toggle { + position: relative; + float: right; + margin-right: $navbar-padding-horizontal; + padding: 9px 10px; + @include navbar-vertical-align(34px); + background-color: transparent; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + border-radius: $border-radius-base; + + // We remove the `outline` here, but later compensate by attaching `:hover` + // styles to `:focus`. + &:focus { + outline: none; + } + + // Bars + .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; + } + .icon-bar + .icon-bar { + margin-top: 4px; + } + + @media (min-width: $grid-float-breakpoint) { + display: none; + } } -// Dividers (basically a vertical hr) -.navbar .divider-vertical { - height: $navbarHeight; - width: 1px; - margin: 0 9px; - overflow: hidden; - background-color: $navbarBackground; - border-right: 1px solid $navbarBackgroundHighlight; + +// Navbar nav links +// +// Builds on top of the `.nav` components with its own modifier class to make +// the nav the full height of the horizontal nav (above 768px). + +.navbar-nav { + margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal); + + > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: $line-height-computed; + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + > li > a, + .dropdown-header { + padding: 5px 15px 5px 25px; + } + > li > a { + line-height: $line-height-computed; + &:hover, + &:focus { + background-image: none; + } + } + } + } + + // Uncollapse the nav + @media (min-width: $grid-float-breakpoint) { + float: left; + margin: 0; + + > li { + float: left; + > a { + padding-top: $navbar-padding-vertical; + padding-bottom: $navbar-padding-vertical; + } + } + + &.navbar-right:last-child { + margin-right: -$navbar-padding-horizontal; + } + } } -// Secondary (floated right) nav in topbar -.navbar .nav.pull-right { - margin-left: 10px; - margin-right: 0; + +// Component alignment +// +// Repurpose the pull utilities as their own navbar utilities to avoid specificity +// issues with parents and chaining. Only do this when the navbar is uncollapsed +// though so that navbar contents properly stack and align in mobile. + +@media (min-width: $grid-float-breakpoint) { + .navbar-left { + float: left !important; + } + .navbar-right { + float: right !important; + } } +// Navbar form +// +// Extension of the `.form-inline` with some extra flavor for optimum display in +// our navbars. -// Dropdown menus -// -------------- +.navbar-form { + margin-left: -$navbar-padding-horizontal; + margin-right: -$navbar-padding-horizontal; + padding: 10px $navbar-padding-horizontal; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + @include box-shadow($shadow); -// Menu position and menu carets -.navbar .dropdown-menu { - margin-top: 1px; - @include border-radius(4px); - &:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: rgba(0,0,0,.2); - position: absolute; - top: -7px; - left: 9px; - } - &:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid $white; - position: absolute; - top: -6px; - left: 10px; + // Mixin behavior for optimum display + @extend .form-inline; + + .form-group { + @media (max-width: $grid-float-breakpoint-max) { + margin-bottom: 5px; + } + } + + // Vertically center in expanded, horizontal navbar + @include navbar-vertical-align($input-height-base); + + // Undo 100% width for pull classes + @media (min-width: $grid-float-breakpoint) { + width: auto; + border: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0; + padding-bottom: 0; + @include box-shadow(none); + + // Outdent the form if last child to line up with content down the page + &.navbar-right:last-child { + margin-right: -$navbar-padding-horizontal; + } } } -// Dropdown toggle caret -.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { - border-top-color: $white; + +// Dropdown menus + +// Menu position and menu carets +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + @include border-top-radius(0); } -.navbar .nav .active .caret { - @include opacity(1); +// Menu position and menu caret support for dropups via extra dropup class +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + @include border-bottom-radius(0); } -// Remove background color from open dropdown -.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle { - background-color: transparent; + +// Buttons in navbars +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + @include navbar-vertical-align($input-height-base); + + &.btn-sm { + @include navbar-vertical-align($input-height-small); + } + &.btn-xs { + @include navbar-vertical-align(22); + } } -// Dropdown link on hover -.navbar .nav .active > .dropdown-toggle:hover { - color: $white; + +// Text in navbars +// +// Add a class to make any element properly align itself vertically within the navbars. + +.navbar-text { + @include navbar-vertical-align($line-height-computed); + + @media (min-width: $grid-float-breakpoint) { + float: left; + margin-left: $navbar-padding-horizontal; + margin-right: $navbar-padding-horizontal; + + // Outdent the form if last child to line up with content down the page + &.navbar-right:last-child { + margin-right: 0; + } + } } -// Right aligned menus need alt position -.navbar .nav.pull-right .dropdown-menu { - left: auto; - right: 0; - &:before { - left: auto; - right: 12px; +// Alternate navbars +// -------------------------------------------------- + +// Default navbar +.navbar-default { + background-color: $navbar-default-bg; + border-color: $navbar-default-border; + + .navbar-brand { + color: $navbar-default-brand-color; + &:hover, + &:focus { + color: $navbar-default-brand-hover-color; + background-color: $navbar-default-brand-hover-bg; + } } - &:after { - left: auto; - right: 13px; + + .navbar-text { + color: $navbar-default-color; } + + .navbar-nav { + > li > a { + color: $navbar-default-link-color; + + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + background-color: $navbar-default-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-active-color; + background-color: $navbar-default-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + background-color: $navbar-default-link-disabled-bg; + } + } + } + + .navbar-toggle { + border-color: $navbar-default-toggle-border-color; + &:hover, + &:focus { + background-color: $navbar-default-toggle-hover-bg; + } + .icon-bar { + background-color: $navbar-default-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: $navbar-default-border; + } + + // Dropdown menu items + .navbar-nav { + // Remove background color from open dropdown + > .open > a { + &, + &:hover, + &:focus { + background-color: $navbar-default-link-active-bg; + color: $navbar-default-link-active-color; + } + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + > li > a { + color: $navbar-default-link-color; + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + background-color: $navbar-default-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-active-color; + background-color: $navbar-default-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + background-color: $navbar-default-link-disabled-bg; + } + } + } + } + } + + + // Links in navbars + // + // Add a class to ensure links outside the navbar nav are colored correctly. + + .navbar-link { + color: $navbar-default-link-color; + &:hover { + color: $navbar-default-link-hover-color; + } + } + +} + +// Inverse navbar + +.navbar-inverse { + background-color: $navbar-inverse-bg; + border-color: $navbar-inverse-border; + + .navbar-brand { + color: $navbar-inverse-brand-color; + &:hover, + &:focus { + color: $navbar-inverse-brand-hover-color; + background-color: $navbar-inverse-brand-hover-bg; + } + } + + .navbar-text { + color: $navbar-inverse-color; + } + + .navbar-nav { + > li > a { + color: $navbar-inverse-link-color; + + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + background-color: $navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-active-color; + background-color: $navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + background-color: $navbar-inverse-link-disabled-bg; + } + } + } + + // Darken the responsive nav toggle + .navbar-toggle { + border-color: $navbar-inverse-toggle-border-color; + &:hover, + &:focus { + background-color: $navbar-inverse-toggle-hover-bg; + } + .icon-bar { + background-color: $navbar-inverse-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: darken($navbar-inverse-bg, 7%); + } + + // Dropdowns + .navbar-nav { + > .open > a { + &, + &:hover, + &:focus { + background-color: $navbar-inverse-link-active-bg; + color: $navbar-inverse-link-active-color; + } + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display + .open .dropdown-menu { + > .dropdown-header { + border-color: $navbar-inverse-border; + } + .divider { + background-color: $navbar-inverse-border; + } + > li > a { + color: $navbar-inverse-link-color; + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + background-color: $navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-active-color; + background-color: $navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + background-color: $navbar-inverse-link-disabled-bg; + } + } + } + } + } + + .navbar-link { + color: $navbar-inverse-link-color; + &:hover { + color: $navbar-inverse-link-hover-color; + } + } + } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss index 27623aa..c690072 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_navs.scss @@ -1,329 +1,242 @@ -// NAVIGATIONS -// ----------- +// +// Navs +// -------------------------------------------------- - -// BASE CLASS -// ---------- +// Base class +// -------------------------------------------------- .nav { - margin-left: 0; - margin-bottom: $baseLineHeight; + margin-bottom: 0; + padding-left: 0; // Override default ul/ol list-style: none; -} - -// Make links block level -.nav > li > a { - display: block; -} -.nav > li > a:hover { - text-decoration: none; - background-color: $grayLighter; -} + @include clearfix(); -// Nav headers (for dropdowns and lists) -.nav .nav-header { - display: block; - padding: 3px 15px; - font-size: 11px; - font-weight: bold; - line-height: $baseLineHeight; - color: $grayLight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; -} -// Space them out when they follow another list item (link) -.nav li + .nav-header { - margin-top: 9px; -} + > li { + position: relative; + display: block; + + > a { + position: relative; + display: block; + padding: $nav-link-padding; + &:hover, + &:focus { + text-decoration: none; + background-color: $nav-link-hover-bg; + } + } + + // Disabled state sets text to gray and nukes hover/tab effects + &.disabled > a { + color: $nav-disabled-link-color; + + &:hover, + &:focus { + color: $nav-disabled-link-hover-color; + text-decoration: none; + background-color: transparent; + cursor: not-allowed; + } + } + } + // Open dropdowns + .open > a { + &, + &:hover, + &:focus { + background-color: $nav-link-hover-bg; + border-color: $link-color; + } + } -// NAV LIST -// -------- + // Nav dividers (deprecated with v3.0.1) + // + // This should have been removed in v3 with the dropping of `.nav-list`, but + // we missed it. We don't currently support this anywhere, but in the interest + // of maintaining backward compatibility in case you use it, it's deprecated. + .nav-divider { + @include nav-divider(); + } -.nav-list { - padding-left: 14px; - padding-right: 14px; - margin-bottom: 0; -} -.nav-list > li > a, .nav-list .nav-header { - margin-left: -15px; - margin-right: -15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.nav-list > li > a { - padding: 3px 15px; -} -.nav-list .active > a, .nav-list .active > a:hover { - color: $white; - text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: $linkColor; -} -.nav-list [class^="icon-"] { - margin-right: 2px; + // Prevent IE8 from misplacing imgs + // + // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 + > li > a > img { + max-width: none; + } } - -// TABS AND PILLS -// ------------- - -// Common styles -.nav-tabs, .nav-pills { - @include clearfix(); -} -.nav-tabs > li, .nav-pills > li { - float: left; -} -.nav-tabs > li > a, .nav-pills > li > a { - padding-right: 12px; - padding-left: 12px; - margin-right: 2px; - line-height: 14px; // keeps the overall height an even number -} - -// TABS -// ---- +// Tabs +// ------------------------- // Give the tabs something to sit on .nav-tabs { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid $nav-tabs-border-color; + > li { + float: left; + // Make the list-items overlay the bottom border + margin-bottom: -1px; + + // Actual tabs (as links) + > a { + margin-right: 2px; + line-height: $line-height-base; + border: 1px solid transparent; + border-radius: $border-radius-base $border-radius-base 0 0; + &:hover { + border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color; + } + } + + // Active state, and its :hover to override normal :hover + &.active > a { + &, + &:hover, + &:focus { + color: $nav-tabs-active-link-hover-color; + background-color: $nav-tabs-active-link-hover-bg; + border: 1px solid $nav-tabs-active-link-hover-border-color; + border-bottom-color: transparent; + cursor: default; + } + } + } + // pulling this in mainly for less shorthand + &.nav-justified { + @extend .nav-justified; + @extend .nav-tabs-justified; + } } -// Make the list-items overlay the bottom border -.nav-tabs > li { - margin-bottom: -1px; -} -// Actual tabs (as links) -.nav-tabs > li > a { - padding-top: 9px; - padding-bottom: 9px; - border: 1px solid transparent; - @include border-radius(4px 4px 0 0); - &:hover { - border-color: $grayLighter $grayLighter #ddd; +// Pills +// ------------------------- +.nav-pills { + > li { + float: left; + + // Links rendered as pills + > a { + border-radius: $nav-pills-border-radius; + } + + li { + margin-left: 2px; + } + + // Active state + &.active > a { + &, + &:hover, + &:focus { + color: $nav-pills-active-link-hover-color; + background-color: $nav-pills-active-link-hover-bg; + } + } } } -// Active state, and it's :hover to override normal :hover -.nav-tabs > .active > a, .nav-tabs > .active > a:hover { - color: $gray; - background-color: $white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} -// PILLS -// ----- -// Links rendered as pills -.nav-pills > li > a { - padding-top: 8px; - padding-bottom: 8px; - margin-top: 2px; - margin-bottom: 2px; - @include border-radius(5px); +// Stacked pills +.nav-stacked { + > li { + float: none; + + li { + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items + } + } } -// Active state -.nav-pills .active > a, .nav-pills .active > a:hover { - color: $white; - background-color: $linkColor; -} +// Nav variations +// -------------------------------------------------- +// Justified nav links +// ------------------------- -// STACKED NAV -// ----------- +.nav-justified { + width: 100%; -// Stacked tabs and pills -.nav-stacked > li { - float: none; -} -.nav-stacked > li > a { - margin-right: 0; // no need for the gap between nav items -} + > li { + float: none; + > a { + text-align: center; + margin-bottom: 5px; + } + } -// Tabs -.nav-tabs.nav-stacked { - border-bottom: 0; -} -.nav-tabs.nav-stacked > li > a { - border: 1px solid #ddd; - @include border-radius(0); -} -.nav-tabs.nav-stacked > li:first-child > a { - @include border-radius(4px 4px 0 0); -} -.nav-tabs.nav-stacked > li:last-child > a { - @include border-radius(0 0 4px 4px); -} -.nav-tabs.nav-stacked > li > a:hover { - border-color: #ddd; - z-index: 2; -} + > .dropdown .dropdown-menu { + top: auto; + left: auto; + } -// Pills -.nav-pills.nav-stacked > li > a { - margin-bottom: 3px; -} -.nav-pills.nav-stacked > li:last-child > a { - margin-bottom: 1px; // decrease margin to match sizing of stacked tabs + @media (min-width: $screen-sm-min) { + > li { + display: table-cell; + width: 1%; + > a { + margin-bottom: 0; + } + } + } } +// Move borders to anchors instead of bottom of list +// +// Mixin for adding on top the shared `.nav-justified` styles for our tabs +.nav-tabs-justified { + border-bottom: 0; + > li > a { + // Override margin from .nav-tabs + margin-right: 0; + border-radius: $border-radius-base; + } -// DROPDOWNS -// --------- - -// Position the menu -.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu { - margin-top: 1px; - border-width: 1px; -} -.nav-pills .dropdown-menu { - @include border-radius(4px); -} - -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret { - border-top-color: $linkColor; - margin-top: 6px; -} -.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { - border-top-color: $linkColorHover; -} + > .active > a, + > .active > a:hover, + > .active > a:focus { + border: 1px solid $nav-tabs-justified-link-border-color; + } -// Active dropdown links -// ------------------------- -.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { - border-top-color: $grayDark; + @media (min-width: $screen-sm-min) { + > li > a { + border-bottom: 1px solid $nav-tabs-justified-link-border-color; + border-radius: $border-radius-base $border-radius-base 0 0; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border-bottom-color: $nav-tabs-justified-active-link-border-color; + } + } } -// Active:hover dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover { - color: $black; - cursor: pointer; -} -// Open dropdowns +// Tabbable tabs // ------------------------- -.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > .open.active > a:hover { - color: $white; - background-color: $grayLight; - border-color: $grayLight; -} -.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret { - border-top-color: $white; - @include opacity(1); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover { - border-color: $grayLight; -} - - - -// TABBABLE -// -------- - -// COMMON STYLES -// ------------- - -// Clear any floats -.tabbable { - @include clearfix(); -} +// Hide tabbable panes to start, show them when `.active` .tab-content { - overflow: hidden; // prevent content from running below tabs -} - -// Remove border on bottom, left, right -.tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs { - border-bottom: 0; -} - -// Show/hide tabbable areas -.tab-content > .tab-pane, .pill-content > .pill-pane { - display: none; -} -.tab-content > .active, .pill-content > .active { - display: block; -} - - -// BOTTOM -// ------ - -.tabs-below .nav-tabs { - border-top: 1px solid #ddd; -} -.tabs-below .nav-tabs > li { - margin-top: -1px; - margin-bottom: 0; -} -.tabs-below .nav-tabs > li > a { - @include border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; + > .tab-pane { + display: none; + } + > .active { + display: block; } -} -.tabs-below .nav-tabs .active > a, .tabs-below .nav-tabs .active > a:hover { - border-color: transparent #ddd #ddd #ddd; } -// LEFT & RIGHT -// ------------ -// Common styles -.tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li { - float: none; -} -.tabs-left .nav-tabs > li > a, .tabs-right .nav-tabs > li > a { - min-width: 74px; - margin-right: 0; - margin-bottom: 3px; -} - -// Tabs on the left -.tabs-left .nav-tabs { - float: left; - margin-right: 19px; - border-right: 1px solid #ddd; -} -.tabs-left .nav-tabs > li > a { - margin-right: -1px; - @include border-radius(4px 0 0 4px); -} -.tabs-left .nav-tabs > li > a:hover { - border-color: $grayLighter #ddd $grayLighter $grayLighter; -} -.tabs-left .nav-tabs .active > a, .tabs-left .nav-tabs .active > a:hover { - border-color: #ddd transparent #ddd #ddd; - *border-right-color: $white; -} +// Dropdowns +// ------------------------- -// Tabs on the right -.tabs-right .nav-tabs { - float: right; - margin-left: 19px; - border-left: 1px solid #ddd; -} -.tabs-right .nav-tabs > li > a { - margin-left: -1px; - @include border-radius(0 4px 4px 0); -} -.tabs-right .nav-tabs > li > a:hover { - border-color: $grayLighter $grayLighter $grayLighter #ddd; -} -.tabs-right .nav-tabs .active > a, .tabs-right .nav-tabs .active > a:hover { - border-color: #ddd #ddd #ddd transparent; - *border-left-color: $white; +// Specific dropdowns +.nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; + // Remove the top rounded corners here since there is a hard edge above the menu + @include border-top-radius(0); } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_normalize.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_normalize.scss new file mode 100644 index 0000000..024e257 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_normalize.scss @@ -0,0 +1,423 @@ +/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS text size adjust after orientation change, without disabling +// user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined in IE 8/9. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +// +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// + +audio, +canvas, +progress, +video { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address `[hidden]` styling not present in IE 8/9. +// Hide the `template` element in IE, Safari, and Firefox < 22. +// + +[hidden], +template { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background color from active links in IE 10. +// + +a { + background: transparent; +} + +// +// Improve readability when focused and also mouse hovered in all browsers. +// + +a:active, +a:hover { + outline: 0; +} + +// Text-level semantics +// ========================================================================== + +// +// Address styling not present in IE 8/9, Safari 5, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari 5 and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari 5, and Chrome. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + background: #ff0; + color: #000; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9. +// + +img { + border: 0; +} + +// +// Correct overflow displayed oddly in IE 9. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari 5. +// + +figure { + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + +// +// 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. +// + +button, +input, +optgroup, +select, +textarea { + color: inherit; // 1 + font: inherit; // 2 + margin: 0; // 3 +} + +// +// Address `overflow` set to `hidden` in IE 8/9/10. +// + +button { + overflow: visible; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8+, and Opera +// Correct `select` style inheritance in Firefox. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome +// (include `-moz` to future-proof). +// + +input[type="search"] { + -webkit-appearance: textfield; // 1 + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; // 2 + box-sizing: content-box; +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9. +// + +textarea { + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; +} + +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pager.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pager.scss index ee6afef..6531fe6 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pager.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pager.scss @@ -1,30 +1,55 @@ -// PAGER -// ----- +// +// Pager pagination +// -------------------------------------------------- + .pager { - margin-left: 0; - margin-bottom: $baseLineHeight; + padding-left: 0; + margin: $line-height-computed 0; list-style: none; text-align: center; @include clearfix(); + li { + display: inline; + > a, + > span { + display: inline-block; + padding: 5px 14px; + background-color: $pager-bg; + border: 1px solid $pager-border; + border-radius: $pager-border-radius; + } + + > a:hover, + > a:focus { + text-decoration: none; + background-color: $pager-hover-bg; + } + } + + .next { + > a, + > span { + float: right; + } + } + + .previous { + > a, + > span { + float: left; + } + } + + .disabled { + > a, + > a:hover, + > a:focus, + > span { + color: $pager-disabled-color; + background-color: $pager-bg; + cursor: not-allowed; + } + } + } -.pager li { - display: inline; -} -.pager a { - display: inline-block; - padding: 5px 14px; - background-color: #fff; - border: 1px solid #ddd; - @include border-radius(15px); -} -.pager a:hover { - text-decoration: none; - background-color: #f5f5f5; -} -.pager .next a { - float: right; -} -.pager .previous a { - float: left; -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pagination.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pagination.scss index 105c710..44c1222 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pagination.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_pagination.scss @@ -1,53 +1,88 @@ -// PAGINATION -// ---------- - +// +// Pagination (multiple pages) +// -------------------------------------------------- .pagination { - height: $baseLineHeight * 2; - margin: $baseLineHeight 0; - } -.pagination ul { display: inline-block; - @include ie7-inline-block(); - margin-left: 0; - margin-bottom: 0; - @include border-radius(3px); - @include box-shadow(0 1px 2px rgba(0,0,0,.05)); -} -.pagination li { - display: inline; -} -.pagination a { - float: left; - padding: 0 14px; - line-height: ($baseLineHeight * 2) - 2; - text-decoration: none; - border: 1px solid #ddd; - border-left-width: 0; -} -.pagination a:hover, .pagination .active a { - background-color: #f5f5f5; -} -.pagination .active a { - color: $grayLight; - cursor: default; -} -.pagination .disabled a, .pagination .disabled a:hover { - color: $grayLight; - background-color: transparent; - cursor: default; -} -.pagination li:first-child a { - border-left-width: 1px; - @include border-radius(3px 0 0 3px); + padding-left: 0; + margin: $line-height-computed 0; + border-radius: $border-radius-base; + + > li { + display: inline; // Remove list-style and block-level defaults + > a, + > span { + position: relative; + float: left; // Collapse white-space + padding: $padding-base-vertical $padding-base-horizontal; + line-height: $line-height-base; + text-decoration: none; + color: $pagination-color; + background-color: $pagination-bg; + border: 1px solid $pagination-border; + margin-left: -1px; + } + &:first-child { + > a, + > span { + margin-left: 0; + @include border-left-radius($border-radius-base); + } + } + &:last-child { + > a, + > span { + @include border-right-radius($border-radius-base); + } + } + } + + > li > a, + > li > span { + &:hover, + &:focus { + color: $pagination-hover-color; + background-color: $pagination-hover-bg; + border-color: $pagination-hover-border; + } + } + + > .active > a, + > .active > span { + &, + &:hover, + &:focus { + z-index: 2; + color: $pagination-active-color; + background-color: $pagination-active-bg; + border-color: $pagination-active-border; + cursor: default; + } + } + + > .disabled { + > span, + > span:hover, + > span:focus, + > a, + > a:hover, + > a:focus { + color: $pagination-disabled-color; + background-color: $pagination-disabled-bg; + border-color: $pagination-disabled-border; + cursor: not-allowed; + } + } } -.pagination li:last-child a { - @include border-radius(0 3px 3px 0); + +// Sizing +// -------------------------------------------------- + +// Large +.pagination-lg { + @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); } -// Centered -.pagination-centered { - text-align: center; +// Small +.pagination-sm { + @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); } -.pagination-right { - text-align: right; -}
\ 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 new file mode 100644 index 0000000..0ab9925 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_panels.scss @@ -0,0 +1,241 @@ +// +// Panels +// -------------------------------------------------- + + +// Base class +.panel { + margin-bottom: $line-height-computed; + background-color: $panel-bg; + border: 1px solid transparent; + border-radius: $panel-border-radius; + @include box-shadow(0 1px 1px rgba(0,0,0,.05)); +} + +// Panel contents +.panel-body { + padding: $panel-body-padding; + @include clearfix(); +} + +// Optional heading +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + @include border-top-radius(($panel-border-radius - 1)); + + > .dropdown .dropdown-toggle { + color: inherit; + } +} + +// Within heading, strip any `h*` tag of its default margins for spacing. +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: ceil(($font-size-base * 1.125)); + color: inherit; + + > a { + color: inherit; + } +} + +// Optional footer (stays gray in every modifier class) +.panel-footer { + padding: 10px 15px; + background-color: $panel-footer-bg; + border-top: 1px solid $panel-inner-border; + @include border-bottom-radius(($panel-border-radius - 1)); +} + + +// List groups in panels +// +// By default, space out list group content from panel headings to account for +// any kind of custom content between the two. + +.panel { + > .list-group { + margin-bottom: 0; + + .list-group-item { + border-width: 1px 0; + border-radius: 0; + } + + // Add border top radius for first one + &:first-child { + .list-group-item:first-child { + border-top: 0; + @include border-top-radius(($panel-border-radius - 1)); + } + } + // Add border bottom radius for last one + &:last-child { + .list-group-item:last-child { + border-bottom: 0; + @include border-bottom-radius(($panel-border-radius - 1)); + } + } + } +} +// Collapse space between when there's no additional content. +.panel-heading + .list-group { + .list-group-item:first-child { + border-top-width: 0; + } +} + + +// Tables in panels +// +// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and +// watch it go full width. + +.panel { + > .table, + > .table-responsive > .table { + margin-bottom: 0; + } + // Add border top radius for first one + > .table:first-child, + > .table-responsive:first-child > .table:first-child { + @include border-top-radius(($panel-border-radius - 1)); + + > thead:first-child, + > tbody:first-child { + > tr:first-child { + td:first-child, + th:first-child { + border-top-left-radius: ($panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-top-right-radius: ($panel-border-radius - 1); + } + } + } + } + // Add border bottom radius for last one + > .table:last-child, + > .table-responsive:last-child > .table:last-child { + @include border-bottom-radius(($panel-border-radius - 1)); + + > tbody:last-child, + > tfoot:last-child { + > tr:last-child { + td:first-child, + th:first-child { + border-bottom-left-radius: ($panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-bottom-right-radius: ($panel-border-radius - 1); + } + } + } + } + > .panel-body + .table, + > .panel-body + .table-responsive { + border-top: 1px solid $table-border-color; + } + > .table > tbody:first-child > tr:first-child th, + > .table > tbody:first-child > tr:first-child td { + border-top: 0; + } + > .table-bordered, + > .table-responsive > .table-bordered { + border: 0; + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + > thead, + > tbody { + > tr:first-child { + > td, + > th { + border-bottom: 0; + } + } + } + > tbody, + > tfoot { + > tr:last-child { + > td, + > th { + border-bottom: 0; + } + } + } + } + > .table-responsive { + border: 0; + margin-bottom: 0; + } +} + + +// Collapsable panels (aka, accordion) +// +// Wrap a series of panels in `.panel-group` to turn them into an accordion with +// the help of our collapse JavaScript plugin. + +.panel-group { + margin-bottom: $line-height-computed; + + // Tighten up margin so it's only between panels + .panel { + margin-bottom: 0; + border-radius: $panel-border-radius; + overflow: hidden; // crop contents when collapsed + + .panel { + margin-top: 5px; + } + } + + .panel-heading { + border-bottom: 0; + + .panel-collapse .panel-body { + border-top: 1px solid $panel-inner-border; + } + } + .panel-footer { + border-top: 0; + + .panel-collapse .panel-body { + border-bottom: 1px solid $panel-inner-border; + } + } +} + + +// Contextual variations +.panel-default { + @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border); +} +.panel-primary { + @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border); +} +.panel-success { + @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border); +} +.panel-info { + @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border); +} +.panel-warning { + @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border); +} +.panel-danger { + @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss index a0b200e..6d6bed5 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_popovers.scss @@ -1,49 +1,133 @@ -// POPOVERS -// -------- +// +// Popovers +// -------------------------------------------------- + .popover { position: absolute; top: 0; left: 0; - z-index: $zindexPopover; + z-index: $zindex-popover; display: none; - padding: 5px; - &.top { margin-top: -5px; } - &.right { margin-left: 5px; } - &.bottom { margin-top: 5px; } - &.left { margin-left: -5px; } - &.top .arrow { @include popoverArrowTop(); } - &.right .arrow { @include popoverArrowRight(); } - &.bottom .arrow { @include popoverArrowBottom(); } - &.left .arrow { @include popoverArrowLeft(); } - .arrow { + max-width: $popover-max-width; + padding: 1px; + text-align: left; // Reset given new insertion method + background-color: $popover-bg; + background-clip: padding-box; + border: 1px solid $popover-fallback-border-color; + border: 1px solid $popover-border-color; + border-radius: $border-radius-large; + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Overrides for proper insertion + white-space: normal; + + // Offset the popover to account for the popover arrow + &.top { margin-top: -$popover-arrow-width; } + &.right { margin-left: $popover-arrow-width; } + &.bottom { margin-top: $popover-arrow-width; } + &.left { margin-left: -$popover-arrow-width; } +} + +.popover-title { + margin: 0; // reset heading margin + padding: 8px 14px; + font-size: $font-size-base; + font-weight: normal; + line-height: 18px; + background-color: $popover-title-bg; + border-bottom: 1px solid darken($popover-title-bg, 5%); + border-radius: 5px 5px 0 0; +} + +.popover-content { + padding: 9px 14px; +} + +// Arrows +// +// .arrow is outer, .arrow:after is inner + +.popover > .arrow { + &, + &:after { position: absolute; + display: block; width: 0; height: 0; + border-color: transparent; + border-style: solid; } } -.popover-inner { - padding: 3px; - width: 280px; - overflow: hidden; - background: $black; // has to be full background declaration for IE fallback - background: rgba(0,0,0,.8); - @include border-radius(6px); - @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); +.popover > .arrow { + border-width: $popover-arrow-outer-width; } -.popover-title { - padding: 9px 15px; - line-height: 1; - background-color: #f5f5f5; - border-bottom:1px solid #eee; - @include border-radius(3px 3px 0 0); +.popover > .arrow:after { + border-width: $popover-arrow-width; + content: ""; } -.popover-content { - padding: 14px; - background-color: $white; - @include border-radius(0 0 3px 3px); - @include background-clip(padding-box); - p, ul, ol { - margin-bottom: 0; + +.popover { + &.top > .arrow { + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-bottom-width: 0; + border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-top-color: $popover-arrow-outer-color; + bottom: -$popover-arrow-outer-width; + &:after { + content: " "; + bottom: 1px; + margin-left: -$popover-arrow-width; + border-bottom-width: 0; + border-top-color: $popover-arrow-color; + } + } + &.right > .arrow { + top: 50%; + left: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-left-width: 0; + border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-right-color: $popover-arrow-outer-color; + &:after { + content: " "; + left: 1px; + bottom: -$popover-arrow-width; + border-left-width: 0; + border-right-color: $popover-arrow-color; + } } -}
\ No newline at end of file + &.bottom > .arrow { + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-bottom-color: $popover-arrow-outer-color; + top: -$popover-arrow-outer-width; + &:after { + content: " "; + top: 1px; + margin-left: -$popover-arrow-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-color; + } + } + + &.left > .arrow { + top: 50%; + right: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-right-width: 0; + border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback + border-left-color: $popover-arrow-outer-color; + &:after { + content: " "; + right: 1px; + border-right-width: 0; + border-left-color: $popover-arrow-color; + bottom: -$popover-arrow-width; + } + } + +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_print.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_print.scss new file mode 100644 index 0000000..3655d03 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_print.scss @@ -0,0 +1,101 @@ +// +// Basic print styles +// -------------------------------------------------- +// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css + +@media print { + + * { + text-shadow: none !important; + color: #000 !important; // Black prints faster: h5bp.com/s + background: transparent !important; + box-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + // Don't show links for images, or javascript/internal links + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + + // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 + // Once fixed, we can just straight up remove this. + select { + background: #fff !important; + } + + // Bootstrap components + .navbar { + display: none; + } + .table { + td, + th { + background-color: #fff !important; + } + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } + } + .label { + border: 1px solid #000; + } + + .table { + border-collapse: collapse !important; + } + .table-bordered { + th, + td { + border: 1px solid #ddd !important; + } + } + +} 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 567a1a5..7302b72 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_progress-bars.scss @@ -1,95 +1,80 @@ -// PROGRESS BARS -// ------------- +// +// Progress bars +// -------------------------------------------------- -// ANIMATIONS -// ---------- +// Bar animations +// ------------------------- -// Webkit +// WebKit @-webkit-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } -// Firefox -@-moz-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } -} - -// Spec +// Spec and IE10+ @keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } -// THE BARS -// -------- +// Bar itself +// ------------------------- // Outer container .progress { overflow: hidden; - height: 18px; - margin-bottom: 18px; - @include gradient-vertical(#f5f5f5, #f9f9f9); + height: $line-height-computed; + margin-bottom: $line-height-computed; + background-color: $progress-bg; + border-radius: $border-radius-base; @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - @include border-radius(4px); } // Bar of progress -.progress .bar { +.progress-bar { + float: left; width: 0%; - height: 18px; - color: $white; - font-size: 12px; + height: 100%; + font-size: $font-size-small; + line-height: $line-height-computed; + color: $progress-bar-color; text-align: center; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - @include gradient-vertical(#149bdf, #0480be); + background-color: $progress-bar-bg; @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - @include box-sizing(border-box); @include transition(width .6s ease); } // Striped bars -.progress-striped .bar { - @include gradient-striped(#62c462); - @include background-size(40px 40px); +.progress-striped .progress-bar { + @include gradient-striped(); + background-size: 40px 40px; } // Call animation for the active one -.progress.active .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; +.progress.active .progress-bar { + @include animation(progress-bar-stripes 2s linear infinite); } -// COLORS -// ------ +// Variations +// ------------------------- -// Danger (red) -.progress-danger .bar { - @include gradient-vertical(#ee5f5b, #c43c35); -} -.progress-danger.progress-striped .bar { - @include gradient-striped(#ee5f5b); +.progress-bar-success { + @include progress-bar-variant($progress-bar-success-bg); } -// Success (green) -.progress-success .bar { - @include gradient-vertical(#62c462, #57a957); +.progress-bar-info { + @include progress-bar-variant($progress-bar-info-bg); } -.progress-success.progress-striped .bar { - @include gradient-striped(#62c462); + +.progress-bar-warning { + @include progress-bar-variant($progress-bar-warning-bg); } -// Info (teal) -.progress-info .bar { - @include gradient-vertical(#5bc0de, #339bb9); +.progress-bar-danger { + @include progress-bar-variant($progress-bar-danger-bg); } -.progress-info.progress-striped .bar { - @include gradient-striped(#5bc0de); -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_reset.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_reset.scss deleted file mode 100644 index baefdeb..0000000 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_reset.scss +++ /dev/null @@ -1,105 +0,0 @@ -// Reset.css.scss -// Adapted from Normalize.css http://github.com/necolas/normalize.css -// ------------------------------------------------------------------------ - -// Display in IE6-9 and FF3 -// ------------------------- - -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { - display: block; -} - -// Display block in IE6-9 and FF3 -// ------------------------- - -audio, canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -// Prevents modern browsers from displaying 'audio' without controls -// ------------------------- - -audio:not([controls]) { - display: none; -} - -// Base settings -// ------------------------- - -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -// Focus states -a:focus { - @include tab-focus(); -} -// Hover & Active -a:hover, a:active { - outline: 0; -} - -// Prevents sub and sup affecting line-height in all browsers -// ------------------------- - -sub, sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} - -// Img border in a's and image quality -// ------------------------- - -img { - max-width: 100%; - height: auto; - border: 0; - -ms-interpolation-mode: bicubic; -} - -// Forms -// ------------------------- - -// Font size in all browsers, margin changes, misc consistency -button, input, select, textarea { - margin: 0; - font-size: 100%; - vertical-align: middle; -} -button, input { - *overflow: visible; // Inner spacing ie IE6/7 - line-height: normal; // FF3/4 have !important on line-height in UA stylesheet -} -button::-moz-focus-inner, input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 - padding: 0; - border: 0; -} -button, input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; // Cursors on all buttons applied consistently - -webkit-appearance: button; // Style clickable inputs in iOS -} -input[type="search"] { // Appearance in Safari/Chrome - -webkit-appearance: textfield; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; -} -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 -} -textarea { - overflow: auto; // Remove vertical scrollbar in IE6-9 - vertical-align: top; // Readability and alignment cross-browser -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-utilities.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-utilities.scss new file mode 100644 index 0000000..cd9348c --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_responsive-utilities.scss @@ -0,0 +1,74 @@ +// +// Responsive: Utility classes +// -------------------------------------------------- + + +// IE10 in Windows (Phone) 8 +// +// Support for responsive views via media queries is kind of borked in IE10, for +// Surface/desktop in split view and for Windows Phone 8. This particular fix +// must be accompanied by a snippet of JavaScript to sniff the user agent and +// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at +// our Getting Started page for more information on this bug. +// +// For more information, see the following: +// +// Issue: https://github.com/twbs/bootstrap/issues/10497 +// Docs: http://getbootstrap.com/getting-started/#browsers +// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ + +@-ms-viewport { + width: device-width; +} + + +// Visibility utilities + +@include responsive-invisibility('.visible-xs, .visible-sm, .visible-md, .visible-lg'); + +@media (max-width: $screen-xs-max) { + @include responsive-visibility('.visible-xs'); +} + +@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include responsive-visibility('.visible-sm'); +} + +@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include responsive-visibility('.visible-md'); +} + +@media (min-width: $screen-lg-min) { + @include responsive-visibility('.visible-lg'); +} + +@media (max-width: $screen-xs-max) { + @include responsive-invisibility('.hidden-xs'); +} + +@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + @include responsive-invisibility('.hidden-sm'); +} + +@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + @include responsive-invisibility('.hidden-md'); +} + +@media (min-width: $screen-lg-min) { + @include responsive-invisibility('.hidden-lg'); +} + + +// Print utilities +// +// Media queries are placed on the inside to be mixin-friendly. + +@include responsive-invisibility('.visible-print'); + +@media print { + @include responsive-visibility('.visible-print'); +} + +@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 a4ce99e..cf02029 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_scaffolding.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_scaffolding.scss @@ -1,29 +1,134 @@ +// // Scaffolding -// Basic and global styles for generating a grid system, structural layout, and page templates -// ------------------------------------------------------------------------------------------- +// -------------------------------------------------- -// STRUCTURAL LAYOUT -// ----------------- +// Reset the box-sizing +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing +* { + @include box-sizing(border-box); +} +*:before, +*:after { + @include box-sizing(border-box); +} + + +// Body reset + +html { + font-size: 62.5%; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} body { - margin: 0; - font-family: $baseFontFamily; - font-size: $baseFontSize; - line-height: $baseLineHeight; - color: $textColor; - background-color: $white; + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; } +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} -// LINKS -// ----- + +// Links a { - color: $linkColor; + color: $link-color; text-decoration: none; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: underline; + } + + &:focus { + @include tab-focus(); + } +} + + +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; +} + + +// Images + +img { + vertical-align: middle; +} + +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive(); +} + +// Rounded corners +.img-rounded { + border-radius: $border-radius-large; +} + +// Image thumbnails +// +// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. +.img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(all .2s ease-in-out); + + // Keep them at most 100% wide + @include img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} + + +// Horizontal rules + +hr { + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + border: 0; + border-top: 1px solid $hr-border; +} + + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; } -a:hover { - color: $linkColorHover; - text-decoration: underline; -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_sprites.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_sprites.scss deleted file mode 100644 index 04a28d2..0000000 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_sprites.scss +++ /dev/null @@ -1,157 +0,0 @@ -// SPRITES -// Glyphs and icons for buttons, nav, and more -// ------------------------------------------- - - -// ICONS -// ----- - -// All icons receive the styles of the <i> tag with a base class -// of .i and are then given a unique class to add width, height, -// and background-position. Your resulting HTML will look like -// <i class="icon-inbox"></i>. - -// For the white version of the icons, just add the .icon-white class: -// <i class="icon-inbox icon-white"></i> - -[class^="icon-"], [class*=" icon-"] { - display: inline-block; - width: 14px; - height: 14px; - line-height: 14px; - vertical-align: text-top; - background-image: asset-url("glyphicons-halflings.png", image); - background-position: 14px 14px; - background-repeat: no-repeat; - - @include ie7-restore-right-whitespace(); -} -.icon-white { - background-image: asset-url("glyphicons-halflings-white.png", image); -} - -.icon-glass { background-position: 0 0; } -.icon-music { background-position: -24px 0; } -.icon-search { background-position: -48px 0; } -.icon-envelope { background-position: -72px 0; } -.icon-heart { background-position: -96px 0; } -.icon-star { background-position: -120px 0; } -.icon-star-empty { background-position: -144px 0; } -.icon-user { background-position: -168px 0; } -.icon-film { background-position: -192px 0; } -.icon-th-large { background-position: -216px 0; } -.icon-th { background-position: -240px 0; } -.icon-th-list { background-position: -264px 0; } -.icon-ok { background-position: -288px 0; } -.icon-remove { background-position: -312px 0; } -.icon-zoom-in { background-position: -336px 0; } -.icon-zoom-out { background-position: -360px 0; } -.icon-off { background-position: -384px 0; } -.icon-signal { background-position: -408px 0; } -.icon-cog { background-position: -432px 0; } -.icon-trash { background-position: -456px 0; } - -.icon-home { background-position: 0 -24px; } -.icon-file { background-position: -24px -24px; } -.icon-time { background-position: -48px -24px; } -.icon-road { background-position: -72px -24px; } -.icon-download-alt { background-position: -96px -24px; } -.icon-download { background-position: -120px -24px; } -.icon-upload { background-position: -144px -24px; } -.icon-inbox { background-position: -168px -24px; } -.icon-play-circle { background-position: -192px -24px; } -.icon-repeat { background-position: -216px -24px; } -.icon-refresh { background-position: -240px -24px; } -.icon-list-alt { background-position: -264px -24px; } -.icon-lock { background-position: -287px -24px; } // 1px off -.icon-flag { background-position: -312px -24px; } -.icon-headphones { background-position: -336px -24px; } -.icon-volume-off { background-position: -360px -24px; } -.icon-volume-down { background-position: -384px -24px; } -.icon-volume-up { background-position: -408px -24px; } -.icon-qrcode { background-position: -432px -24px; } -.icon-barcode { background-position: -456px -24px; } - -.icon-tag { background-position: 0 -48px; } -.icon-tags { background-position: -25px -48px; } // 1px off -.icon-book { background-position: -48px -48px; } -.icon-bookmark { background-position: -72px -48px; } -.icon-print { background-position: -96px -48px; } -.icon-camera { background-position: -120px -48px; } -.icon-font { background-position: -144px -48px; } -.icon-bold { background-position: -167px -48px; } // 1px off -.icon-italic { background-position: -192px -48px; } -.icon-text-height { background-position: -216px -48px; } -.icon-text-width { background-position: -240px -48px; } -.icon-align-left { background-position: -264px -48px; } -.icon-align-center { background-position: -288px -48px; } -.icon-align-right { background-position: -312px -48px; } -.icon-align-justify { background-position: -336px -48px; } -.icon-list { background-position: -360px -48px; } -.icon-indent-left { background-position: -384px -48px; } -.icon-indent-right { background-position: -408px -48px; } -.icon-facetime-video { background-position: -432px -48px; } -.icon-picture { background-position: -456px -48px; } - -.icon-pencil { background-position: 0 -72px; } -.icon-map-marker { background-position: -24px -72px; } -.icon-adjust { background-position: -48px -72px; } -.icon-tint { background-position: -72px -72px; } -.icon-edit { background-position: -96px -72px; } -.icon-share { background-position: -120px -72px; } -.icon-check { background-position: -144px -72px; } -.icon-move { background-position: -168px -72px; } -.icon-step-backward { background-position: -192px -72px; } -.icon-fast-backward { background-position: -216px -72px; } -.icon-backward { background-position: -240px -72px; } -.icon-play { background-position: -264px -72px; } -.icon-pause { background-position: -288px -72px; } -.icon-stop { background-position: -312px -72px; } -.icon-forward { background-position: -336px -72px; } -.icon-fast-forward { background-position: -360px -72px; } -.icon-step-forward { background-position: -384px -72px; } -.icon-eject { background-position: -408px -72px; } -.icon-chevron-left { background-position: -432px -72px; } -.icon-chevron-right { background-position: -456px -72px; } - -.icon-plus-sign { background-position: 0 -96px; } -.icon-minus-sign { background-position: -24px -96px; } -.icon-remove-sign { background-position: -48px -96px; } -.icon-ok-sign { background-position: -72px -96px; } -.icon-question-sign { background-position: -96px -96px; } -.icon-info-sign { background-position: -120px -96px; } -.icon-screenshot { background-position: -144px -96px; } -.icon-remove-circle { background-position: -168px -96px; } -.icon-ok-circle { background-position: -192px -96px; } -.icon-ban-circle { background-position: -216px -96px; } -.icon-arrow-left { background-position: -240px -96px; } -.icon-arrow-right { background-position: -264px -96px; } -.icon-arrow-up { background-position: -289px -96px; } // 1px off -.icon-arrow-down { background-position: -312px -96px; } -.icon-share-alt { background-position: -336px -96px; } -.icon-resize-full { background-position: -360px -96px; } -.icon-resize-small { background-position: -384px -96px; } -.icon-plus { background-position: -408px -96px; } -.icon-minus { background-position: -433px -96px; } -.icon-asterisk { background-position: -456px -96px; } - -.icon-exclamation-sign { background-position: 0 -120px; } -.icon-gift { background-position: -24px -120px; } -.icon-leaf { background-position: -48px -120px; } -.icon-fire { background-position: -72px -120px; } -.icon-eye-open { background-position: -96px -120px; } -.icon-eye-close { background-position: -120px -120px; } -.icon-warning-sign { background-position: -144px -120px; } -.icon-plane { background-position: -168px -120px; } -.icon-calendar { background-position: -192px -120px; } -.icon-random { background-position: -216px -120px; } -.icon-comment { background-position: -240px -120px; } -.icon-magnet { background-position: -264px -120px; } -.icon-chevron-up { background-position: -288px -120px; } -.icon-chevron-down { background-position: -313px -119px; } // 1px off -.icon-retweet { background-position: -336px -120px; } -.icon-shopping-cart { background-position: -360px -120px; } -.icon-folder-close { background-position: -384px -120px; } -.icon-folder-open { background-position: -408px -120px; } -.icon-resize-vertical { background-position: -432px -119px; } -.icon-resize-horizontal { background-position: -456px -118px; } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss index 4e74b53..1ddfb7a 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tables.scss @@ -1,126 +1,233 @@ // -// Tables.less -// Tables for, you guessed it, tabular data -// ---------------------------------------- +// Tables +// -------------------------------------------------- -// BASE TABLES -// ----------------- - table { max-width: 100%; - border-collapse: collapse; - border-spacing: 0; + background-color: $table-bg; +} +th { + text-align: left; } -// BASELINE STYLES -// --------------- + +// Baseline styles .table { width: 100%; - margin-bottom: $baseLineHeight; + margin-bottom: $line-height-computed; // Cells - th, td { - padding: 8px; - line-height: $baseLineHeight; - text-align: left; - vertical-align: top; - border-top: 1px solid #ddd; - } - th { - font-weight: bold; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-cell-padding; + line-height: $line-height-base; + vertical-align: top; + border-top: 1px solid $table-border-color; + } + } } // Bottom align for column headings - thead th { + > thead > tr > th { vertical-align: bottom; + border-bottom: 2px solid $table-border-color; } // Remove top border from thead by default - thead:first-child tr th, thead:first-child tr td { - border-top: 0; + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } } // Account for multiple tbody instances - tbody + tbody { - border-top: 2px solid #ddd; + > tbody + tbody { + border-top: 2px solid $table-border-color; } -} + // Nesting + .table { + background-color: $body-bg; + } +} -// CONDENSED TABLE W/ HALF PADDING -// ------------------------------- +// Condensed table w/ half padding .table-condensed { - th, td { - padding: 4px 5px; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-condensed-cell-padding; + } + } } } -// BORDERED VERSION -// ---------------- +// Bordered version +// +// Add borders all around the table and between all the columns. .table-bordered { - border: 1px solid #ddd; - border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapsed; // IE7 can't round corners anyway - @include border-radius(4px); - th + th, td + td, th + td, td + th { - border-left: 1px solid #ddd; - } - // Prevent a double border - thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td { - border-top: 0; - } - // For first th or td in the first row in the first thead or tbody - thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { - @include border-radius(4px 0 0 0); - } - thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child { - @include border-radius(0 4px 0 0); - } - // For first th or td in the first row in the first thead or tbody - thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { - @include border-radius(0 0 0 4px); + border: 1px solid $table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid $table-border-color; + } + } } - thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child { - @include border-radius(0 0 4px 0); + > thead > tr { + > th, + > td { + border-bottom-width: 2px; + } } } -// ZEBRA-STRIPING -// -------------- - +// Zebra-striping +// // Default zebra-stripe styles (alternating gray and transparent backgrounds) + .table-striped { - tbody { - tr:nth-child(odd) td, tr:nth-child(odd) th { - background-color: #f9f9f9; + > tbody > tr:nth-child(odd) { + > td, + > th { + background-color: $table-bg-accent; } } } -// HOVER EFFECT -// ------------ +// Hover effect +// // Placed here since it has to come after the potential zebra striping -.table { - tbody tr:hover td, tbody tr:hover th { - background-color: #f5f5f5; + +.table-hover { + > tbody > tr:hover { + > td, + > th { + background-color: $table-bg-hover; + } } } -// TABLE CELL SIZING -// ----------------- -// Change the columns -@mixin tableColumns($columnSpan: 1) { +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) float: none; - width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; - margin-left: 0; + display: table-column; } table { - @for $i from 1 through $gridColumns { - .span#{$i} { @include tableColumns($i); } + td, + th { + &[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-cell; + } } -}
\ No newline at end of file +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +@include table-row-variant('active', $table-bg-active); +@include table-row-variant('success', $state-success-bg); +@include table-row-variant('info', $state-info-bg); +@include table-row-variant('warning', $state-warning-bg); +@include table-row-variant('danger', $state-danger-bg); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +@media (max-width: $screen-xs-max) { + .table-responsive { + width: 100%; + margin-bottom: ($line-height-computed * 0.75); + overflow-y: hidden; + overflow-x: scroll; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid $table-border-color; + -webkit-overflow-scrolling: touch; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since + // chances are there will be only one `tr` in a `thead` and that would + // remove the border altogether. + > tbody, + > tfoot { + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + + } + } +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_theme.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_theme.scss new file mode 100644 index 0000000..d8f7bc2 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_theme.scss @@ -0,0 +1,247 @@ + +// +// Load core variables and mixins +// -------------------------------------------------- + +@import "variables"; +@import "mixins"; + + + +// +// Buttons +// -------------------------------------------------- + +// Common styles +.btn-default, +.btn-primary, +.btn-success, +.btn-info, +.btn-warning, +.btn-danger { + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); + @include box-shadow($shadow); + + // Reset the shadow + &:active, + &.active { + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } +} + +// Mixin for generating new styles +@mixin btn-styles($btn-color: #555) { + @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%)); + @include reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners + background-repeat: repeat-x; + border-color: darken($btn-color, 14%); + + &:hover, + &:focus { + background-color: darken($btn-color, 12%); + background-position: 0 -15px; + } + + &:active, + &.active { + background-color: darken($btn-color, 12%); + border-color: darken($btn-color, 14%); + } +} + +// Common styles +.btn { + // Remove the gradient for the pressed/active state + &:active, + &.active { + background-image: none; + } +} + +// Apply the mixin to the buttons +.btn-default { @include btn-styles($btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } +.btn-primary { @include btn-styles($btn-primary-bg); } +.btn-success { @include btn-styles($btn-success-bg); } +.btn-info { @include btn-styles($btn-info-bg); } +.btn-warning { @include btn-styles($btn-warning-bg); } +.btn-danger { @include btn-styles($btn-danger-bg); } + + + +// +// Images +// -------------------------------------------------- + +.thumbnail, +.img-thumbnail { + @include box-shadow(0 1px 2px rgba(0,0,0,.075)); +} + + + +// +// Dropdowns +// -------------------------------------------------- + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%)); + background-color: darken($dropdown-link-hover-bg, 5%); +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%)); + background-color: darken($dropdown-link-active-bg, 5%); +} + + + +// +// Navbar +// -------------------------------------------------- + +// Default navbar +.navbar-default { + @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg); + @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered + border-radius: $navbar-border-radius; + $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); + @include box-shadow($shadow); + + .navbar-nav > .active > a { + @include gradient-vertical($start-color: darken($navbar-default-bg, 5%), $end-color: darken($navbar-default-bg, 2%)); + @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); + } +} +.navbar-brand, +.navbar-nav > li > a { + text-shadow: 0 1px 0 rgba(255,255,255,.25); +} + +// Inverted navbar +.navbar-inverse { + @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg); + @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered + + .navbar-nav > .active > a { + @include gradient-vertical($start-color: $navbar-inverse-bg, $end-color: lighten($navbar-inverse-bg, 2.5%)); + @include box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); + } + + .navbar-brand, + .navbar-nav > li > a { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } +} + +// Undo rounded corners in static and fixed navbars +.navbar-static-top, +.navbar-fixed-top, +.navbar-fixed-bottom { + border-radius: 0; +} + + + +// +// Alerts +// -------------------------------------------------- + +// Common styles +.alert { + text-shadow: 0 1px 0 rgba(255,255,255,.2); + $shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); + @include box-shadow($shadow); +} + +// Mixin for generating new styles +@mixin alert-styles($color) { + @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%)); + border-color: darken($color, 15%); +} + +// Apply the mixin to the alerts +.alert-success { @include alert-styles($alert-success-bg); } +.alert-info { @include alert-styles($alert-info-bg); } +.alert-warning { @include alert-styles($alert-warning-bg); } +.alert-danger { @include alert-styles($alert-danger-bg); } + + + +// +// Progress bars +// -------------------------------------------------- + +// Give the progress background some depth +.progress { + @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg) +} + +// Mixin for generating new styles +@mixin progress-bar-styles($color) { + @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%)); +} + +// Apply the mixin to the progress bars +.progress-bar { @include progress-bar-styles($progress-bar-bg); } +.progress-bar-success { @include progress-bar-styles($progress-bar-success-bg); } +.progress-bar-info { @include progress-bar-styles($progress-bar-info-bg); } +.progress-bar-warning { @include progress-bar-styles($progress-bar-warning-bg); } +.progress-bar-danger { @include progress-bar-styles($progress-bar-danger-bg); } + + + +// +// List groups +// -------------------------------------------------- + +.list-group { + border-radius: $border-radius-base; + @include box-shadow(0 1px 2px rgba(0,0,0,.075)); +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%); + @include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%)); + border-color: darken($list-group-active-border, 7.5%); +} + + + +// +// Panels +// -------------------------------------------------- + +// Common styles +.panel { + @include box-shadow(0 1px 2px rgba(0,0,0,.05)); +} + +// Mixin for generating new styles +@mixin panel-heading-styles($color) { + @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%)); +} + +// Apply the mixin to the panel headings only +.panel-default > .panel-heading { @include panel-heading-styles($panel-default-heading-bg); } +.panel-primary > .panel-heading { @include panel-heading-styles($panel-primary-heading-bg); } +.panel-success > .panel-heading { @include panel-heading-styles($panel-success-heading-bg); } +.panel-info > .panel-heading { @include panel-heading-styles($panel-info-heading-bg); } +.panel-warning > .panel-heading { @include panel-heading-styles($panel-warning-heading-bg); } +.panel-danger > .panel-heading { @include panel-heading-styles($panel-danger-heading-bg); } + + + +// +// Wells +// -------------------------------------------------- + +.well { + @include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg); + border-color: darken($well-bg, 10%); + $shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + @include box-shadow($shadow); +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_thumbnails.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_thumbnails.scss index 4a434b1..3d5ed86 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_thumbnails.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_thumbnails.scss @@ -1,35 +1,38 @@ -// THUMBNAILS -// ---------- +// +// Thumbnails +// -------------------------------------------------- -.thumbnails { - margin-left: -$gridGutterWidth; - list-style: none; - @include clearfix(); -} -.thumbnails > li { - float: left; - margin: 0 0 $baseLineHeight $gridGutterWidth; -} + +// Mixin and adjust the regular image class .thumbnail { display: block; - padding: 4px; - line-height: 1; - border: 1px solid #ddd; - @include border-radius(4px); - @include box-shadow(0 1px 1px rgba(0,0,0,.075)); + padding: $thumbnail-padding; + margin-bottom: $line-height-computed; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(all .2s ease-in-out); + + > img, + a > img { + @include img-responsive(); + margin-left: auto; + margin-right: auto; + } + + // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active + + // Image captions + .caption { + padding: $thumbnail-caption-padding; + color: $thumbnail-caption-color; + } } + // Add a hover state for linked versions only -a.thumbnail:hover { - border-color: $linkColor; - @include box-shadow(0 1px 4px rgba(0,105,214,.25)); -} -// Images and captions -.thumbnail > img { - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: $link-color; } -.thumbnail .caption { - padding: 9px; -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss index 488dc63..dec674c 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss @@ -1,35 +1,95 @@ -// TOOLTIP -// ------= +// +// Tooltips +// -------------------------------------------------- + +// Base class .tooltip { position: absolute; - z-index: $zindexTooltip; + z-index: $zindex-tooltip; display: block; visibility: visible; - padding: 5px; - font-size: 11px; + font-size: $font-size-small; + line-height: 1.4; @include opacity(0); - &.in { @include opacity(0.8); } - &.top { margin-top: -2px; } - &.right { margin-left: 2px; } - &.bottom { margin-top: 2px; } - &.left { margin-left: -2px; } - &.top .tooltip-arrow { @include popoverArrowTop(); } - &.left .tooltip-arrow { @include popoverArrowLeft(); } - &.bottom .tooltip-arrow { @include popoverArrowBottom(); } - &.right .tooltip-arrow { @include popoverArrowRight(); } + + &.in { @include opacity($tooltip-opacity); } + &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; } + &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; } + &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; } + &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; } } + +// Wrapper for the tooltip content .tooltip-inner { - max-width: 200px; + max-width: $tooltip-max-width; padding: 3px 8px; - color: $white; + color: $tooltip-color; text-align: center; text-decoration: none; - background-color: $black; - @include border-radius(4px); + background-color: $tooltip-bg; + border-radius: $border-radius-base; } + +// Arrows .tooltip-arrow { position: absolute; width: 0; height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + &.top-left .tooltip-arrow { + bottom: 0; + left: $tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + right: $tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; + border-right-color: $tooltip-arrow-color; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; + border-left-color: $tooltip-arrow-color; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } + &.bottom-left .tooltip-arrow { + top: 0; + left: $tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + right: $tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } } diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss index 5670b49..7fee043 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_type.scss @@ -1,209 +1,284 @@ -// Typography.less -// Headings, body text, lists, code, and more for a versatile and durable typography system -// ---------------------------------------------------------------------------------------- +// +// Typography +// -------------------------------------------------- -// BODY TEXT -// --------- +// Headings +// ------------------------- -p { - margin: 0 0 $baseLineHeight / 2; - font-family: $baseFontFamily; - font-size: $baseFontSize; - line-height: $baseLineHeight; - small { - font-size: $baseFontSize - 2; - color: $grayLight; - } -} -.lead { - margin-bottom: $baseLineHeight; - font-size: 20px; - font-weight: 200; - line-height: $baseLineHeight * 1.5; -} +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: $headings-font-family; + font-weight: $headings-font-weight; + line-height: $headings-line-height; + color: $headings-color; -// HEADINGS -// -------- - -h1, h2, h3, h4, h5, h6 { - margin: 0; - font-weight: bold; - color: $grayDark; - text-rendering: optimizelegibility; // Fix the character spacing for headings - small { + small, + .small { font-weight: normal; - color: $grayLight; + line-height: 1; + color: $headings-small-color; } } -h1 { - font-size: 30px; - line-height: $baseLineHeight * 2; - small { - font-size: 18px; - } -} -h2 { - font-size: 24px; - line-height: $baseLineHeight * 2; - small { - font-size: 18px; + +h1, .h1, +h2, .h2, +h3, .h3 { + margin-top: $line-height-computed; + margin-bottom: ($line-height-computed / 2); + + small, + .small { + font-size: 65%; } } -h3 { - line-height: $baseLineHeight * 1.5; - font-size: 18px; - small { - font-size: 14px; +h4, .h4, +h5, .h5, +h6, .h6 { + margin-top: ($line-height-computed / 2); + margin-bottom: ($line-height-computed / 2); + + small, + .small { + font-size: 75%; } } -h4, h5, h6 { - line-height: $baseLineHeight; + +h1, .h1 { font-size: $font-size-h1; } +h2, .h2 { font-size: $font-size-h2; } +h3, .h3 { font-size: $font-size-h3; } +h4, .h4 { font-size: $font-size-h4; } +h5, .h5 { font-size: $font-size-h5; } +h6, .h6 { font-size: $font-size-h6; } + + +// Body text +// ------------------------- + +p { + margin: 0 0 ($line-height-computed / 2); } -h4 { - font-size: 14px; - small { - font-size: 12px; + +.lead { + margin-bottom: $line-height-computed; + font-size: floor(($font-size-base * 1.15)); + font-weight: 200; + line-height: 1.4; + + @media (min-width: $screen-sm-min) { + font-size: ($font-size-base * 1.5); } } -h5 { - font-size: 12px; + + +// Emphasis & misc +// ------------------------- + +// Ex: 14px base font * 85% = about 12px +small, +.small { font-size: 85%; } + +// Undo browser default styling +cite { font-style: normal; } + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } + +// Contextual colors +.text-muted { + color: $text-muted; } -h6 { - font-size: 11px; - color: $grayLight; - text-transform: uppercase; + +@include text-emphasis-variant('.text-primary', $brand-primary); + +@include text-emphasis-variant('.text-success', $state-success-text); + +@include text-emphasis-variant('.text-info', $state-info-text); + +@include text-emphasis-variant('.text-warning', $state-warning-text); + +@include text-emphasis-variant('.text-danger', $state-danger-text); + +// Contextual backgrounds +// For now we'll leave these alongside the text classes until v4 when we can +// safely shift things around (per SemVer rules). +.bg-primary { + // Given the contrast here, this is the only class to have its color inverted + // automatically. + color: #fff; } +@include bg-variant('.bg-primary', $brand-primary); + +@include bg-variant('.bg-success', $state-success-bg); + +@include bg-variant('.bg-info', $state-info-bg); + +@include bg-variant('.bg-warning', $state-warning-bg); + +@include bg-variant('.bg-danger', $state-danger-bg); + // Page header +// ------------------------- + .page-header { - padding-bottom: $baseLineHeight - 1; - margin: $baseLineHeight 0; - border-bottom: 1px solid $grayLighter; + padding-bottom: (($line-height-computed / 2) - 1); + margin: ($line-height-computed * 2) 0 $line-height-computed; + border-bottom: 1px solid $page-header-border-color; } -.page-header h1 { - line-height: 1; -} - -// LISTS -// ----- +// Lists +// -------------------------------------------------- // Unordered and Ordered lists -ul, ol { - padding: 0; - margin: 0 0 $baseLineHeight / 2 25px; -} -ul ul, ul ol, ol ol, ol ul { - margin-bottom: 0; -} -ul { - list-style: disc; -} +ul, ol { - list-style: decimal; -} -li { - line-height: $baseLineHeight; + margin-top: 0; + margin-bottom: ($line-height-computed / 2); + ul, + ol { + margin-bottom: 0; + } } -ul.unstyled, ol.unstyled { - margin-left: 0; + +// List options + +// Unstyled keeps list items block level, just removes default browser padding and list-style +.list-unstyled { + padding-left: 0; list-style: none; } +// Inline turns list items into inline-block +.list-inline { + @extend .list-unstyled; + margin-left: -5px; + + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + // Description Lists dl { - margin-bottom: $baseLineHeight; + margin-top: 0; // Remove browser default + margin-bottom: $line-height-computed; } -dt, dd { - line-height: $baseLineHeight; +dt, +dd { + line-height: $line-height-base; } dt { font-weight: bold; } dd { - margin-left: $baseLineHeight / 2; + margin-left: 0; // Undo browser default } -// MISC -// ---- +// Horizontal description lists +// +// Defaults to being stacked without any of the below styles applied, until the +// grid breakpoint is reached (default of ~768px). -// Horizontal rules -hr { - margin: $baseLineHeight 0; - border: 0; - border-top: 1px solid $hrBorder; - border-bottom: 1px solid $white; +@media (min-width: $grid-float-breakpoint) { + .dl-horizontal { + dt { + float: left; + width: ($component-offset-horizontal - 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 + } + } } -// Emphasis -strong { - font-weight: bold; -} -em { - font-style: italic; -} -.muted { - color: $grayLight; -} +// MISC +// ---- // Abbreviations and acronyms -abbr { +abbr[title], +// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted $abbr-border-color; +} +.initialism { font-size: 90%; text-transform: uppercase; - border-bottom: 1px dotted #ddd; - cursor: help; } // Blockquotes blockquote { - padding: 0 0 0 15px; - margin: 0 0 $baseLineHeight; - border-left: 5px solid $grayLighter; - p { - margin-bottom: 0; - @include font-shorthand(16px,300,$baseLineHeight * 1.25); + padding: ($line-height-computed / 2) $line-height-computed; + margin: 0 0 $line-height-computed; + font-size: $blockquote-font-size; + border-left: 5px solid $blockquote-border-color; + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; + } } - small { + + // Note: Deprecated small and .small as of v3.1.0 + // Context: https://github.com/twbs/bootstrap/issues/11660 + footer, + small, + .small { display: block; - line-height: $baseLineHeight; - color: $grayLight; + font-size: 80%; // back to default font-size + line-height: $line-height-base; + color: $blockquote-small-color; + &:before { - content: '\2014 \00A0'; + content: '\2014 \00A0'; // em dash, nbsp } } +} - // Float right with text-align: right - &.pull-right { - float: right; - padding-left: 0; - padding-right: 15px; - border-left: 0; - border-right: 5px solid $grayLighter; - p, small { - text-align: right; +// Opposite alignment of blockquote +// +// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid $blockquote-border-color; + border-left: 0; + text-align: right; + + // Account for citation + footer, + small, + .small { + &:before { content: ''; } + &:after { + content: '\00A0 \2014'; // nbsp, em dash } } } // Quotes -q:before, q:after, blockquote:before, blockquote:after { +blockquote:before, +blockquote:after { content: ""; } // Addresses address { - display: block; - margin-bottom: $baseLineHeight; - line-height: $baseLineHeight; + margin-bottom: $line-height-computed; font-style: normal; + line-height: $line-height-base; } - -// Misc -small { - font-size: 100%; -} -cite { - font-style: normal; -}
\ No newline at end of file diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss index 2171f61..85cb62e 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_utilities.scss @@ -1,23 +1,56 @@ -// UTILITY CLASSES -// --------------- +// +// Utility classes +// -------------------------------------------------- -// Quick floats + +// Floats +// ------------------------- + +.clearfix { + @include clearfix(); +} +.center-block { + @include center-block(); +} .pull-right { - float: right; + float: right !important; } .pull-left { - float: left; + float: left !important; } + // Toggling content +// ------------------------- + +// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 .hide { - display: none; + display: none !important; } .show { - display: block; + display: block !important; } - -// Visibility .invisible { visibility: hidden; -}
\ No newline at end of file +} +.text-hide { + @include text-hide(); +} + + +// Hide from screenreaders and browsers +// +// Credit: HTML5 Boilerplate + +.hidden { + display: none !important; + visibility: hidden !important; +} + + +// For Affix plugin +// ------------------------- + +.affix { + position: fixed; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss index 3e4faf5..8042a68 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_variables.scss @@ -1,103 +1,833 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap -// ----------------------------------------------------- +// a flag to toggle asset pipeline / compass integration +// defaults to true if twbs-font-path function is present (no function => twbs-font-path('') parsed as string == right side) +// in Sass 3.3 this can be improved with: function-exists(twbs-font-path) +$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default; +// +// Variables +// -------------------------------------------------- +//== Colors +// +//## Gray and brand colors for use across Bootstrap. -// GLOBAL VALUES -// -------------------------------------------------- +$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-lighter: lighten(#000, 93.5%) !default; // #eee -// Links -$linkColor: #08c !default; -$linkColorHover: darken($linkColor, 15%) !default; - -// Grays -$black: #000 !default; -$grayDarker: #222 !default; -$grayDark: #333 !default; -$gray: #555 !default; -$grayLight: #999 !default; -$grayLighter: #eee !default; -$white: #fff !default; - -// Accent colors -$blue: #049cdb !default; -$blueDark: #0064cd !default; -$green: #46a546 !default; -$red: #9d261d !default; -$yellow: #ffc40d !default; -$orange: #f89406 !default; -$pink: #c3325f !default; -$purple: #7a43b6 !default; - -// Typography -$baseFontSize: 13px !default; -$baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$baseLineHeight: 18px !default; -$textColor: $grayDark !default; - -// Buttons -$primaryButtonBackground: $linkColor !default; - - - -// COMPONENT VARIABLES -// -------------------------------------------------- +$brand-primary: #428bca !default; +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; -// Z-index master list -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -$zindexDropdown: 1000; -$zindexPopover: 1010; -$zindexTooltip: 1020; -$zindexFixedNavbar: 1030; -$zindexModalBackdrop: 1040; -$zindexModal: 1050; -// Input placeholder text color -$placeholderText: $grayLight !default; +//== Scaffolding +// +// ## Settings for some of the most global styles. -// HR border color -$hrBorder: $grayLighter !default; +//** Background color for `<body>`. +$body-bg: #fff !default; +//** Global text color on `<body>`. +$text-color: $gray-dark !default; -// Navbar -$navbarHeight: 40px !default; -$navbarBackground: $grayDarker !default; -$navbarBackgroundHighlight: $grayDark !default; -$navbarLinkBackgroundHover: transparent !default; +//** Global textual link color. +$link-color: $brand-primary !default; +//** Link hover color set via `darken()` function. +$link-hover-color: darken($link-color, 15%) !default; -$navbarText: $grayLight !default; -$navbarLinkColor: $grayLight !default; -$navbarLinkColorHover: $white !default; -// Form states and alerts -$warningText: #c09853 !default; -$warningBackground: #fcf8e3 !default; -$warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default; +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. -$errorText: #b94a48 !default; -$errorBackground: #f2dede !default; -$errorBorder: darken(adjust-hue($errorBackground, -10), 3%) !default; +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; -$successText: #468847 !default; -$successBackground: #dff0d8 !default; -$successBorder: darken(adjust-hue($successBackground, -10), 5%) !default; +$font-size-base: 14px !default; +$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px -$infoText: #3a87ad !default; -$infoBackground: #d9edf7 !default; -$infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default; +$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px +$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px +$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px +$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-h5: $font-size-base !default; +$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px +//** Unit-less `line-height` for use in components like buttons. +$line-height-base: 1.428571429 !default; // 20/14 +//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. +$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px +//** By default, this inherits from the `<body>`. +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.1 !default; +$headings-color: inherit !default; -// GRID -// -------------------------------------------------- -// Default 940px grid -$gridColumns: 12 !default; -$gridColumnWidth: 60px !default; -$gridGutterWidth: 20px !default; -$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default; +//-- Iconography +// +//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower. + +$icon-font-path: "bootstrap/" !default; +$icon-font-name: "glyphicons-halflings-regular" !default; +$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). + +$padding-base-vertical: 6px !default; +$padding-base-horizontal: 12px !default; + +$padding-large-vertical: 10px !default; +$padding-large-horizontal: 16px !default; + +$padding-small-vertical: 5px !default; +$padding-small-horizontal: 10px !default; + +$padding-xs-vertical: 1px !default; +$padding-xs-horizontal: 5px !default; + +$line-height-large: 1.33 !default; +$line-height-small: 1.5 !default; + +$border-radius-base: 4px !default; +$border-radius-large: 6px !default; +$border-radius-small: 3px !default; + +//** Global color for active items (e.g., navs or dropdowns). +$component-active-color: #fff !default; +//** Global background color for active items (e.g., navs or dropdowns). +$component-active-bg: $brand-primary !default; + +//** Width of the `border` for generating carets that indicator dropdowns. +$caret-width-base: 4px !default; +//** Carets increase slightly in size for larger components. +$caret-width-large: 5px !default; + + +//== Tables +// +//## Customizes the `.table` component with basic values, each used across all table variations. + +//** Padding for `<th>`s and `<td>`s. +$table-cell-padding: 8px !default; +//** Padding for cells in `.table-condensed`. +$table-condensed-cell-padding: 5px !default; + +//** Default background color used for all tables. +$table-bg: transparent !default; +//** Background color used for `.table-striped`. +$table-bg-accent: #f9f9f9 !default; +//** Background color used for `.table-hover`. +$table-bg-hover: #f5f5f5 !default; +$table-bg-active: $table-bg-hover !default; + +//** Border color for table and cell borders. +$table-border-color: #ddd !default; + + +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +$btn-font-weight: normal !default; + +$btn-default-color: #333 !default; +$btn-default-bg: #fff !default; +$btn-default-border: #ccc !default; + +$btn-primary-color: #fff !default; +$btn-primary-bg: $brand-primary !default; +$btn-primary-border: darken($btn-primary-bg, 5%) !default; + +$btn-success-color: #fff !default; +$btn-success-bg: $brand-success !default; +$btn-success-border: darken($btn-success-bg, 5%) !default; + +$btn-info-color: #fff !default; +$btn-info-bg: $brand-info !default; +$btn-info-border: darken($btn-info-bg, 5%) !default; + +$btn-warning-color: #fff !default; +$btn-warning-bg: $brand-warning !default; +$btn-warning-border: darken($btn-warning-bg, 5%) !default; + +$btn-danger-color: #fff !default; +$btn-danger-bg: $brand-danger !default; +$btn-danger-border: darken($btn-danger-bg, 5%) !default; + +$btn-link-disabled-color: $gray-light !default; + + +//== Forms +// +//## + +//** `<input>` background color +$input-bg: #fff !default; +//** `<input disabled>` background color +$input-bg-disabled: $gray-lighter !default; + +//** Text color for `<input>`s +$input-color: $gray !default; +//** `<input>` border color +$input-border: #ccc !default; +//** `<input>` border radius +$input-border-radius: $border-radius-base !default; +//** Border color for inputs on focus +$input-border-focus: #66afe9 !default; + +//** Placeholder text color +$input-color-placeholder: $gray-light !default; + +//** Default `.form-control` height +$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; +//** Large `.form-control` height +$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; +//** Small `.form-control` height +$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; + +$legend-color: $gray-dark !default; +$legend-border-color: #e5e5e5 !default; + +//** Background color for textual input addons +$input-group-addon-bg: $gray-lighter !default; +//** Border color for textual input addons +$input-group-addon-border-color: $input-border !default; + + +//== Dropdowns +// +//## Dropdown menu container and contents. + +//** Background for the dropdown menu. +$dropdown-bg: #fff !default; +//** Dropdown menu `border-color`. +$dropdown-border: rgba(0,0,0,.15) !default; +//** Dropdown menu `border-color` **for IE8**. +$dropdown-fallback-border: #ccc !default; +//** Divider color for between dropdown items. +$dropdown-divider-bg: #e5e5e5 !default; + +//** Dropdown link text color. +$dropdown-link-color: $gray-dark !default; +//** Hover color for dropdown links. +$dropdown-link-hover-color: darken($gray-dark, 5%) !default; +//** Hover background for dropdown links. +$dropdown-link-hover-bg: #f5f5f5 !default; + +//** Active dropdown menu item text color. +$dropdown-link-active-color: $component-active-color !default; +//** Active dropdown menu item background color. +$dropdown-link-active-bg: $component-active-bg !default; + +//** Disabled dropdown menu item background color. +$dropdown-link-disabled-color: $gray-light !default; + +//** Text color for headers within dropdown menus. +$dropdown-header-color: $gray-light !default; + +// Note: Deprecated $dropdown-caret-color as of v3.1.0 +$dropdown-caret-color: #000 !default; + + +//-- Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. + +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-popover: 1010 !default; +$zindex-tooltip: 1030 !default; +$zindex-navbar-fixed: 1030 !default; +$zindex-modal-background: 1040 !default; +$zindex-modal: 1050 !default; + + +//== Media queries breakpoints +// +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. + +// Extra small screen / phone +// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1 +$screen-xs: 480px !default; +$screen-xs-min: $screen-xs !default; +$screen-phone: $screen-xs-min !default; + +// Small screen / tablet +// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1 +$screen-sm: 768px !default; +$screen-sm-min: $screen-sm !default; +$screen-tablet: $screen-sm-min !default; + +// Medium screen / desktop +// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1 +$screen-md: 992px !default; +$screen-md-min: $screen-md !default; +$screen-desktop: $screen-md-min !default; + +// Large screen / wide desktop +// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1 +$screen-lg: 1200px !default; +$screen-lg-min: $screen-lg !default; +$screen-lg-desktop: $screen-lg-min !default; + +// So media queries don't overlap when required, provide a maximum +$screen-xs-max: ($screen-sm-min - 1) !default; +$screen-sm-max: ($screen-md-min - 1) !default; +$screen-md-max: ($screen-lg-min - 1) !default; + + +//== Grid system +// +//## Define your custom responsive grid. + +//** Number of columns in the grid. +$grid-columns: 12 !default; +//** Padding between columns. Gets divided in half for the left and right. +$grid-gutter-width: 30px !default; +// Navbar collapse +//** Point at which the navbar becomes uncollapsed. +$grid-float-breakpoint: $screen-sm-min !default; +//** Point at which the navbar begins collapsing. +$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; + + +//== Container sizes +// +//## Define the maximum width of `.container` for different screen sizes. + +// Small screen / tablet +$container-tablet: ((720px + $grid-gutter-width)) !default; +//** For `$screen-sm-min` and up. +$container-sm: $container-tablet !default; + +// Medium screen / desktop +$container-desktop: ((940px + $grid-gutter-width)) !default; +//** For `$screen-md-min` and up. +$container-md: $container-desktop !default; + +// Large screen / wide desktop +$container-large-desktop: ((1140px + $grid-gutter-width)) !default; +//** For `$screen-lg-min` and up. +$container-lg: $container-large-desktop !default; + + +//== Navbar +// +//## + +// Basics of a navbar +$navbar-height: 50px !default; +$navbar-margin-bottom: $line-height-computed !default; +$navbar-border-radius: $border-radius-base !default; +$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; +$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; +$navbar-collapse-max-height: 340px !default; + +$navbar-default-color: #777 !default; +$navbar-default-bg: #f8f8f8 !default; +$navbar-default-border: darken($navbar-default-bg, 6.5%) !default; + +// Navbar links +$navbar-default-link-color: #777 !default; +$navbar-default-link-hover-color: #333 !default; +$navbar-default-link-hover-bg: transparent !default; +$navbar-default-link-active-color: #555 !default; +$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; +$navbar-default-link-disabled-color: #ccc !default; +$navbar-default-link-disabled-bg: transparent !default; + +// Navbar brand label +$navbar-default-brand-color: $navbar-default-link-color !default; +$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; +$navbar-default-brand-hover-bg: transparent !default; + +// Navbar toggle +$navbar-default-toggle-hover-bg: #ddd !default; +$navbar-default-toggle-icon-bar-bg: #888 !default; +$navbar-default-toggle-border-color: #ddd !default; + + +// Inverted navbar +// Reset inverted navbar basics +$navbar-inverse-color: $gray-light !default; +$navbar-inverse-bg: #222 !default; +$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; + +// Inverted navbar links +$navbar-inverse-link-color: $gray-light !default; +$navbar-inverse-link-hover-color: #fff !default; +$navbar-inverse-link-hover-bg: transparent !default; +$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; +$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; +$navbar-inverse-link-disabled-color: #444 !default; +$navbar-inverse-link-disabled-bg: transparent !default; + +// Inverted navbar brand label +$navbar-inverse-brand-color: $navbar-inverse-link-color !default; +$navbar-inverse-brand-hover-color: #fff !default; +$navbar-inverse-brand-hover-bg: transparent !default; + +// Inverted navbar toggle +$navbar-inverse-toggle-hover-bg: #333 !default; +$navbar-inverse-toggle-icon-bar-bg: #fff !default; +$navbar-inverse-toggle-border-color: #333 !default; + + +//== Navs +// +//## + +//=== Shared nav styles +$nav-link-padding: 10px 15px !default; +$nav-link-hover-bg: $gray-lighter !default; + +$nav-disabled-link-color: $gray-light !default; +$nav-disabled-link-hover-color: $gray-light !default; + +$nav-open-link-hover-color: #fff !default; + +//== Tabs +$nav-tabs-border-color: #ddd !default; + +$nav-tabs-link-hover-border-color: $gray-lighter !default; + +$nav-tabs-active-link-hover-bg: $body-bg !default; +$nav-tabs-active-link-hover-color: $gray !default; +$nav-tabs-active-link-hover-border-color: #ddd !default; + +$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-active-link-border-color: $body-bg !default; + +//== Pills +$nav-pills-border-radius: $border-radius-base !default; +$nav-pills-active-link-hover-bg: $component-active-bg !default; +$nav-pills-active-link-hover-color: $component-active-color !default; + + +//== Pagination +// +//## + +$pagination-color: $link-color !default; +$pagination-bg: #fff !default; +$pagination-border: #ddd !default; + +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-lighter !default; +$pagination-hover-border: #ddd !default; + +$pagination-active-color: #fff !default; +$pagination-active-bg: $brand-primary !default; +$pagination-active-border: $brand-primary !default; + +$pagination-disabled-color: $gray-light !default; +$pagination-disabled-bg: #fff !default; +$pagination-disabled-border: #ddd !default; + + +//== Pager +// +//## + +$pager-bg: $pagination-bg !default; +$pager-border: $pagination-border !default; +$pager-border-radius: 15px !default; + +$pager-hover-bg: $pagination-hover-bg !default; + +$pager-active-bg: $pagination-active-bg !default; +$pager-active-color: $pagination-active-color !default; + +$pager-disabled-color: $pagination-disabled-color !default; + + +//== Jumbotron +// +//## + +$jumbotron-padding: 30px !default; +$jumbotron-color: inherit !default; +$jumbotron-bg: $gray-lighter !default; +$jumbotron-heading-color: inherit !default; +$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default; + + +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. + +$state-success-text: #3c763d !default; +$state-success-bg: #dff0d8 !default; +$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; + +$state-info-text: #31708f !default; +$state-info-bg: #d9edf7 !default; +$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; + +$state-warning-text: #8a6d3b !default; +$state-warning-bg: #fcf8e3 !default; +$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; + +$state-danger-text: #a94442 !default; +$state-danger-bg: #f2dede !default; +$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; + + +//== Tooltips +// +//## + +//** Tooltip max width +$tooltip-max-width: 200px !default; +//** Tooltip text color +$tooltip-color: #fff !default; +//** Tooltip background color +$tooltip-bg: #000 !default; +$tooltip-opacity: .9 !default; + +//** Tooltip arrow width +$tooltip-arrow-width: 5px !default; +//** Tooltip arrow color +$tooltip-arrow-color: $tooltip-bg !default; + + +//== Popovers +// +//## + +//** Popover body background color +$popover-bg: #fff !default; +//** Popover maximum width +$popover-max-width: 276px !default; +//** Popover border color +$popover-border-color: rgba(0,0,0,.2) !default; +//** Popover fallback border color +$popover-fallback-border-color: #ccc !default; + +//** Popover title background color +$popover-title-bg: darken($popover-bg, 3%) !default; + +//** Popover arrow width +$popover-arrow-width: 10px !default; +//** Popover arrow color +$popover-arrow-color: #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 outer arrow fallback color +$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; + + +//== Labels +// +//## + +//** Default label background color +$label-default-bg: $gray-light !default; +//** Primary label background color +$label-primary-bg: $brand-primary !default; +//** Success label background color +$label-success-bg: $brand-success !default; +//** Info label background color +$label-info-bg: $brand-info !default; +//** Warning label background color +$label-warning-bg: $brand-warning !default; +//** Danger label background color +$label-danger-bg: $brand-danger !default; + +//** Default label text color +$label-color: #fff !default; +//** Default text color of a linked label +$label-link-hover-color: #fff !default; + + +//== Modals +// +//## + +//** Padding applied to the modal body +$modal-inner-padding: 20px !default; + +//** Padding applied to the modal title +$modal-title-padding: 15px !default; +//** Modal title line-height +$modal-title-line-height: $line-height-base !default; + +//** Background color of modal content area +$modal-content-bg: #fff !default; +//** Modal content border color +$modal-content-border-color: rgba(0,0,0,.2) !default; +//** Modal content border color **for IE8** +$modal-content-fallback-border-color: #999 !default; + +//** Modal backdrop background color +$modal-backdrop-bg: #000 !default; +//** Modal backdrop opacity +$modal-backdrop-opacity: .5 !default; +//** Modal header border color +$modal-header-border-color: #e5e5e5 !default; +//** Modal footer border color +$modal-footer-border-color: $modal-header-border-color !default; + +$modal-lg: 900px !default; +$modal-md: 600px !default; +$modal-sm: 300px !default; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. + +$alert-padding: 15px !default; +$alert-border-radius: $border-radius-base !default; +$alert-link-font-weight: bold !default; + +$alert-success-bg: $state-success-bg !default; +$alert-success-text: $state-success-text !default; +$alert-success-border: $state-success-border !default; + +$alert-info-bg: $state-info-bg !default; +$alert-info-text: $state-info-text !default; +$alert-info-border: $state-info-border !default; + +$alert-warning-bg: $state-warning-bg !default; +$alert-warning-text: $state-warning-text !default; +$alert-warning-border: $state-warning-border !default; + +$alert-danger-bg: $state-danger-bg !default; +$alert-danger-text: $state-danger-text !default; +$alert-danger-border: $state-danger-border !default; + + +//== Progress bars +// +//## + +//** Background color of the whole progress component +$progress-bg: #f5f5f5 !default; +//** Progress bar text color +$progress-bar-color: #fff !default; + +//** Default progress bar color +$progress-bar-bg: $brand-primary !default; +//** Success progress bar color +$progress-bar-success-bg: $brand-success !default; +//** Warning progress bar color +$progress-bar-warning-bg: $brand-warning !default; +//** Danger progress bar color +$progress-bar-danger-bg: $brand-danger !default; +//** Info progress bar color +$progress-bar-info-bg: $brand-info !default; + + +//== List group +// +//## + +//** Background color on `.list-group-item` +$list-group-bg: #fff !default; +//** `.list-group-item` border color +$list-group-border: #ddd !default; +//** List group border radius +$list-group-border-radius: $border-radius-base !default; + +//** Background color of single list elements on hover +$list-group-hover-bg: #f5f5f5 !default; +//** Text color of active list elements +$list-group-active-color: $component-active-color !default; +//** Background color of active list elements +$list-group-active-bg: $component-active-bg !default; +//** Border color of active list elements +$list-group-active-border: $list-group-active-bg !default; +$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; + +$list-group-link-color: #555 !default; +$list-group-link-heading-color: #333 !default; + + +//== Panels +// +//## + +$panel-bg: #fff !default; +$panel-body-padding: 15px !default; +$panel-border-radius: $border-radius-base !default; + +//** Border color for elements within panels +$panel-inner-border: #ddd !default; +$panel-footer-bg: #f5f5f5 !default; + +$panel-default-text: $gray-dark !default; +$panel-default-border: #ddd !default; +$panel-default-heading-bg: #f5f5f5 !default; + +$panel-primary-text: #fff !default; +$panel-primary-border: $brand-primary !default; +$panel-primary-heading-bg: $brand-primary !default; + +$panel-success-text: $state-success-text !default; +$panel-success-border: $state-success-border !default; +$panel-success-heading-bg: $state-success-bg !default; + +$panel-info-text: $state-info-text !default; +$panel-info-border: $state-info-border !default; +$panel-info-heading-bg: $state-info-bg !default; + +$panel-warning-text: $state-warning-text !default; +$panel-warning-border: $state-warning-border !default; +$panel-warning-heading-bg: $state-warning-bg !default; + +$panel-danger-text: $state-danger-text !default; +$panel-danger-border: $state-danger-border !default; +$panel-danger-heading-bg: $state-danger-bg !default; + + +//== Thumbnails +// +//## + +//** Padding around the thumbnail image +$thumbnail-padding: 4px !default; +//** Thumbnail background color +$thumbnail-bg: $body-bg !default; +//** Thumbnail border color +$thumbnail-border: #ddd !default; +//** Thumbnail border radius +$thumbnail-border-radius: $border-radius-base !default; + +//** Custom text color for thumbnail captions +$thumbnail-caption-color: $text-color !default; +//** Padding around the thumbnail caption +$thumbnail-caption-padding: 9px !default; + + +//== Wells +// +//## + +$well-bg: #f5f5f5 !default; +$well-border: darken($well-bg, 7%) !default; + + +//== Badges +// +//## + +$badge-color: #fff !default; +//** Linked badge text color on hover +$badge-link-hover-color: #fff !default; +$badge-bg: $gray-light !default; + +//** Badge text color in active nav link +$badge-active-color: $link-color !default; +//** Badge background color in active nav link +$badge-active-bg: #fff !default; + +$badge-font-weight: bold !default; +$badge-line-height: 1 !default; +$badge-border-radius: 10px !default; + + +//== Breadcrumbs +// +//## + +$breadcrumb-padding-vertical: 8px !default; +$breadcrumb-padding-horizontal: 15px !default; +//** Breadcrumb background color +$breadcrumb-bg: #f5f5f5 !default; +//** Breadcrumb text color +$breadcrumb-color: #ccc !default; +//** Text color of current page in the breadcrumb +$breadcrumb-active-color: $gray-light !default; +//** Textual separator for between breadcrumb elements +$breadcrumb-separator: "/" !default; + + +//== Carousel +// +//## + +$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; + +$carousel-control-color: #fff !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-font-size: 20px !default; + +$carousel-indicator-active-bg: #fff !default; +$carousel-indicator-border-color: #fff !default; + +$carousel-caption-color: #fff !default; + + +//== Close +// +//## + +$close-font-weight: bold !default; +$close-color: #000 !default; +$close-text-shadow: 0 1px 0 #fff !default; + + +//== Code +// +//## + +$code-color: #c7254e !default; +$code-bg: #f9f2f4 !default; + +$kbd-color: #fff !default; +$kbd-bg: #333 !default; + +$pre-bg: #f5f5f5 !default; +$pre-color: $gray-dark !default; +$pre-border-color: #ccc !default; +$pre-scrollable-max-height: 340px !default; + + +//== Type +// +//## + +//** Text muted color +$text-muted: $gray-light !default; +//** Abbreviations and acronyms border color +$abbr-border-color: $gray-light !default; +//** Headings small color +$headings-small-color: $gray-light !default; +//** Blockquote small color +$blockquote-small-color: $gray-light !default; +//** Blockquote font size +$blockquote-font-size: ($font-size-base * 1.25) !default; +//** Blockquote border color +$blockquote-border-color: $gray-lighter !default; +//** Page header border color +$page-header-border-color: $gray-lighter !default; + + +//== Miscellaneous +// +//## + +//** Horizontal line color. +$hr-border: $gray-lighter !default; -// Fluid grid -$fluidGridColumnWidth: 6.382978723% !default; -$fluidGridGutterWidth: 2.127659574% !default;
\ No newline at end of file +//** Horizontal offset for forms and lists. +$component-offset-horizontal: 180px !default; diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_wells.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_wells.scss index 4347b89..b865711 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_wells.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_wells.scss @@ -1,17 +1,29 @@ -// WELLS -// ----- +// +// Wells +// -------------------------------------------------- + +// Base class .well { min-height: 20px; padding: 19px; margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,.05); - @include border-radius(4px); + background-color: $well-bg; + border: 1px solid $well-border; + border-radius: $border-radius-base; @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { border-color: #ddd; border-color: rgba(0,0,0,.15); } -}
\ No newline at end of file +} + +// Sizes +.well-lg { + padding: 24px; + border-radius: $border-radius-large; +} +.well-sm { + padding: 9px; + border-radius: $border-radius-small; +} diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/bootstrap.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/bootstrap.scss new file mode 100644 index 0000000..cb5147d --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/bootstrap.scss @@ -0,0 +1,49 @@ +// Core variables and mixins +@import "variables"; +@import "mixins"; + +// Reset +@import "normalize"; +@import "print"; + +// Core CSS +@import "scaffolding"; +@import "type"; +@import "code"; +@import "grid"; +@import "tables"; +@import "forms"; +@import "buttons"; + +// Components +@import "component-animations"; +@import "glyphicons"; +@import "dropdowns"; +@import "button-groups"; +@import "input-groups"; +@import "navs"; +@import "navbar"; +@import "breadcrumbs"; +@import "pagination"; +@import "pager"; +@import "labels"; +@import "badges"; +@import "jumbotron"; +@import "thumbnails"; +@import "alerts"; +@import "progress-bars"; +@import "media"; +@import "list-group"; +@import "panels"; +@import "wells"; +@import "close"; + +// Components w/ JavaScript +@import "modals"; +@import "tooltip"; +@import "popovers"; +@import "carousel"; + +// Utility classes +@import "utilities"; +@import "responsive-utilities"; |