app/assets/stylesheets/twitter/bootstrap/_variables.scss in bootstrap-sass-rails-3.0.0.0.rc1 vs app/assets/stylesheets/twitter/bootstrap/_variables.scss in bootstrap-sass-rails-3.0.0.0.rc2

- old
+ new

@@ -58,25 +58,30 @@ // Components // ------------------------- // Based on 14px font-size and 1.428 line-height (~20px to start) -$padding-base-vertical: 8px !default; +$padding-base-vertical: 6px !default; $padding-base-horizontal: 12px !default; -$padding-large-vertical: 14px !default; +$padding-large-vertical: 10px !default; $padding-large-horizontal: 16px !default; $padding-small-vertical: 5px !default; $padding-small-horizontal: 10px !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; $component-active-bg: $brand-primary !default; +$caret-width-base: 4px !default; +$caret-width-large: 5px !default; // Tables // ------------------------- $table-cell-padding: 8px !default; @@ -91,55 +96,60 @@ // Buttons // ------------------------- -$btn-default-color: #fff !default; -$btn-default-bg: #474949 !default; -$btn-default-border: $btn-default-bg !default; +$btn-font-weight: bold !default; -$btn-primary-color: $btn-default-color !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: $btn-primary-bg !default; +$btn-primary-border: darken($btn-primary-bg, 5%) !default; -$btn-success-color: $btn-default-color !default; +$btn-success-color: #fff !default; $btn-success-bg: $brand-success !default; -$btn-success-border: $btn-success-bg !default; +$btn-success-border: darken($btn-success-bg, 5%) !default; -$btn-warning-color: $btn-default-color !default; +$btn-warning-color: #fff !default; $btn-warning-bg: $brand-warning !default; -$btn-warning-border: $btn-warning-bg !default; +$btn-warning-border: darken($btn-warning-bg, 5%) !default; -$btn-danger-color: $btn-default-color !default; +$btn-danger-color: #fff !default; $btn-danger-bg: $brand-danger !default; -$btn-danger-border: $btn-danger-bg !default; +$btn-danger-border: darken($btn-danger-bg, 5%) !default; -$btn-info-color: $btn-default-color !default; +$btn-info-color: #fff !default; $btn-info-bg: $brand-info !default; -$btn-info-border: $btn-info-bg !default; +$btn-info-border: darken($btn-info-bg, 5%) !default; -$btn-hover-color: $btn-default-color !default; +$btn-link-disabled-color: $gray-light !default; - // Forms // ------------------------- $input-bg: #fff !default; $input-bg-disabled: $gray-lighter !default; +$input-color: $gray !default; $input-border: #ccc !default; $input-border-radius: $border-radius-base !default; +$input-border-focus: #66afe9 !default; $input-color-placeholder: $gray-light !default; $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; -$input-height-large: (ceil($font-size-large * $line-height-base) + ($padding-large-vertical * 2) + 2) !default; -$input-height-small: (ceil($font-size-small * $line-height-base) + ($padding-small-vertical * 2) + 2) !default; +$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; +$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; +$input-group-addon-bg: $gray-lighter !default; $input-group-addon-border-color: $input-border !default; // Dropdowns // ------------------------- @@ -154,12 +164,17 @@ $dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: #fff !default; $dropdown-link-hover-bg: $dropdown-link-active-bg !default; +$dropdown-link-disabled-color: $gray-light !default; + +$dropdown-header-color: $gray-light !default; + $dropdown-caret-color: #000 !default; + // COMPONENT VARIABLES // -------------------------------------------------- // Z-index master list @@ -172,48 +187,36 @@ $zindex-tooltip: 1030 !default; $zindex-navbar-fixed: 1030 !default; $zindex-modal-background: 1040 !default; $zindex-modal: 1050 !default; - // Media queries breakpoints // -------------------------------------------------- -// Tiny screen / phone -$screen-tiny: 480px !default; -$screen-phone: $screen-tiny !default; +// Extra small screen / phone +$screen-xsmall: 480px !default; +$screen-phone: $screen-xsmall !default; // Small screen / tablet $screen-small: 768px !default; $screen-tablet: $screen-small !default; // Medium screen / desktop $screen-medium: 992px !default; $screen-desktop: $screen-medium !default; -// So media queries don't overlap when required, provide a maximum -$screen-small-max: ($screen-medium - 1) !default; -$screen-tablet-max: $screen-small-max !default; - // Large screen / wide desktop $screen-large: 1200px !default; $screen-large-desktop: $screen-large !default; +// So media queries don't overlap when required, provide a maximum +$screen-phone-max: ($screen-small - 1) !default; +$screen-small-max: ($screen-medium - 1) !default; +$screen-tablet-max: ($screen-desktop - 1) !default; +$screen-desktop-max: ($screen-large-desktop - 1) !default; -// Container sizes -// -------------------------------------------------- -// Small screen / tablet -$container-tablet: 728px !default; - -// Medium screen / desktop -$container-desktop: 940px !default; - -// Large screen / wide desktop -$container-large-desktop: 1170px !default; - - // Grid system // -------------------------------------------------- // Number of columns in the grid system $grid-columns: 12 !default; @@ -226,21 +229,24 @@ // Navbar // ------------------------- // Basics of a navbar $navbar-height: 50px !default; +$navbar-margin-bottom: $line-height-computed !default; $navbar-color: #777 !default; -$navbar-bg: #eee !default; -$navbar-padding-horizontal: floor($grid-gutter-width / 2) !default; // ~15px +$navbar-bg: #f8f8f8 !default; +$navbar-border: darken($navbar-bg, 6.5%) !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 links $navbar-link-color: #777 !default; $navbar-link-hover-color: #333 !default; $navbar-link-hover-bg: transparent !default; $navbar-link-active-color: #555 !default; -$navbar-link-active-bg: darken($navbar-bg, 10%) !default; +$navbar-link-active-bg: darken($navbar-bg, 6.5%) !default; $navbar-link-disabled-color: #ccc !default; $navbar-link-disabled-bg: transparent !default; // Navbar brand label $navbar-brand-color: $navbar-link-color !default; @@ -256,10 +262,11 @@ // 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; @@ -358,17 +365,18 @@ $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; // Tooltips // ------------------------- -$tooltip-max-width: 200px; +$tooltip-max-width: 200px !default; $tooltip-color: #fff !default; -$tooltip-bg: rgba(0,0,0,.9) !default; +$tooltip-bg: #000 !default; $tooltip-arrow-width: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; + // Popovers // ------------------------- $popover-bg: #fff !default; $popover-max-width: 276px !default; $popover-border-color: rgba(0,0,0,.2) !default; @@ -384,10 +392,12 @@ $popover-arrow-outer-fallback-color: #999 !default; // Labels // ------------------------- + +$label-default-bg: $gray-light !default; $label-success-bg: $brand-success !default; $label-info-bg: $brand-info !default; $label-warning-bg: $brand-warning !default; $label-danger-bg: $brand-danger !default; @@ -411,14 +421,17 @@ $modal-footer-border-color: $modal-header-border-color !default; // Alerts // ------------------------- +$alert-padding: 15px !default; +$alert-border-radius: $border-radius-base !default; +$alert-link-font-weight: bold !default; + $alert-bg: $state-warning-bg !default; $alert-text: $state-warning-text !default; $alert-border: $state-warning-border !default; -$alert-border-radius: $border-radius-base !default; $alert-success-bg: $state-success-bg !default; $alert-success-text: $state-success-text !default; $alert-success-border: $state-success-border !default; @@ -487,16 +500,19 @@ $panel-info-heading-bg: $state-info-bg !default; // Thumbnails // ------------------------- -$thumbnail-caption-color: $text-color !default; +$thumbnail-padding: 4px !default; $thumbnail-bg: $body-bg !default; $thumbnail-border: #ddd !default; $thumbnail-border-radius: $border-radius-base !default; +$thumbnail-caption-color: $text-color !default; +$thumbnail-caption-padding: 9px !default; + // Wells // ------------------------- $well-bg: #f5f5f5 !default; @@ -507,62 +523,85 @@ // Badges // ------------------------- $badge-color: #fff !default; $badge-link-hover-color: #fff !default; - $badge-bg: $gray-light !default; + $badge-active-color: $link-color !default; $badge-active-bg: #fff !default; +$badge-font-weight: bold !default; +$badge-line-height: 1 !default; +$badge-border-radius: 10px !default; + // Breadcrumbs // ------------------------- $breadcrumb-bg: #f5f5f5 !default; $breadcrumb-color: #ccc !default; $breadcrumb-active-color: $gray-light !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-border-color: #fff !default; $carousel-indicator-active-bg: #fff !default; +$carousel-indicator-border-color: #fff !default; $carousel-caption-color: #fff !default; // Close // ------------------------ $close-color: #000 !default; +$close-font-weight: bold !default; $close-text-shadow: 0 1px 0 #fff !default; // Code // ------------------------ $code-color: #c7254e !default; $code-bg: #f9f2f4 !default; $pre-bg: #f5f5f5 !default; +$pre-color: $gray-dark !default; $pre-border-color: #ccc !default; +$pre-scrollable-max-height: 340px !default; // Type // ------------------------ $text-muted: $gray-light !default; $abbr-border-color: $gray-light !default; $headings-small-color: $gray-light !default; $blockquote-small-color: $gray-light !default; $blockquote-border-color: $gray-lighter !default; $page-header-border-color: $gray-lighter !default; - // Miscellaneous // ------------------------- // Hr border color $hr-border: $gray-lighter !default; // Horizontal forms & lists $component-offset-horizontal: 180px !default; + + +// Container sizes +// -------------------------------------------------- + +// Small screen / tablet +$container-tablet: 720px !default; + +// Medium screen / desktop +$container-desktop: 940px !default; + +// Large screen / wide desktop +$container-large-desktop: 1140px !default;