root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

reorder variables, rename -color to -color

This commit is contained in:
Mark Otto 2015-08-10 23:38:41 -07:00
parent 67765587d9
commit a90f6c7093
4 changed files with 95 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_forms.scss
View File

@ -394,7 +394,7 @@ $form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGl
display: block; // account for any element using help-block display: block; // account for any element using help-block
margin-top: .25rem; margin-top: .25rem;
margin-bottom: .75rem; margin-bottom: .75rem;
color: lighten($text-color, 25%); // lighten the text some for contrast color: lighten($body-color, 25%); // lighten the text some for contrast
} }

2
scss/_reboot.scss
View File

@ -70,7 +70,7 @@ body {
font-size: $font-size-base; font-size: $font-size-base;
line-height: $line-height; line-height: $line-height;
// Go easy on the eyes and use something other than `#000` for text // Go easy on the eyes and use something other than `#000` for text
color: $text-color; color: $body-color;
// By default, `<body>` has no `background-color` so we set one as a best practice. // By default, `<body>` has no `background-color` so we set one as a best practice.
background-color: $body-bg; background-color: $body-bg;
} }

130
scss/_variables.scss
View File

@ -1,11 +1,24 @@
//
// Variables // Variables
// //
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
// Table of ontents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Colors // Colors
// //
// Gray and brand colors for use across Bootstrap. // Grayscale and brand colors for use across Bootstrap.
$gray-dark: #373a3c !default; $gray-dark: #373a3c !default;
$gray: #55595c !default; $gray: #55595c !default;
@ -20,21 +33,9 @@ $brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default; $brand-danger: #d9534f !default;
// Scaffolding // Options
// //
// Settings for some of the most global styles. // Quickly modify global styling by enabling or disabling optional features.
$body-bg: #fff !default;
$text-color: $gray-dark !default;
$link-color: $brand-primary !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Global settings
//
// Quickly modify global styling by enabling or disabling features.
$enable-flex: false !default; $enable-flex: false !default;
$enable-rounded: true !default; $enable-rounded: true !default;
@ -44,7 +45,7 @@ $enable-transitions: false !default;
$enable-hover-media-query: false !default; $enable-hover-media-query: false !default;
// Component defaults // Spacing
// //
// Control the default styling of most Bootstrap elements by modifying these // Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing. // variables. Mostly focused on spacing.
@ -54,6 +55,62 @@ $spacer-x: $spacer !default;
$spacer-y: $spacer !default; $spacer-y: $spacer !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: #fff !default;
$body-color: $gray-dark !default;
// Links
//
// Style anchor elements.
$link-color: $brand-primary !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Grid breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 34em,
// Medium screen / tablet
md: 48em,
// Large screen / desktop
lg: 62em,
// Extra large screen / wide desktop
xl: 75em
) !default;
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 34rem, // 480
md: 45rem, // 720
lg: 60rem, // 960
xl: 72.25rem // 1140
) !default;
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
// Typography // Typography
// //
// Font, line-height, and color for body text, headings, and more. // Font, line-height, and color for body text, headings, and more.
@ -248,45 +305,6 @@ $zindex-modal-bg: 1040 !default;
$zindex-modal: 1050 !default; $zindex-modal: 1050 !default;
// Media queries breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
// Grid system
//
// Define your custom responsive grid.
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 34em,
// Medium screen / tablet
md: 48em,
// Large screen / desktop
lg: 62em,
// Extra large screen / wide desktop
xl: 75em
) !default;
// Number of columns in the grid.
$grid-columns: 12 !default;
// Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: 1.5rem !default;
// Container sizes
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 34rem, // 480
md: 45rem, // 720
lg: 60rem, // 960
xl: 72.25rem // 1140
) !default;
// Navbar // Navbar
// //
// //

6
scss/mixins/_alert.scss
View File

@ -1,14 +1,14 @@
// Alerts // Alerts
@mixin alert-variant($background, $border, $text-color) { @mixin alert-variant($background, $border, $body-color) {
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
color: $text-color; color: $body-color;
hr { hr {
border-top-color: darken($border, 5%); border-top-color: darken($border, 5%);
} }
.alert-link { .alert-link {
color: darken($text-color, 10%); color: darken($body-color, 10%);
} }
} }