From 6e58d5c2a6be817a663f023c66d9b05b1d901f09 Mon Sep 17 00:00:00 2001 From: Gleb Mazovetskiy Date: Tue, 29 Sep 2015 10:09:48 +0100 Subject: rake update[v4-dev] --- assets/stylesheets/_bootstrap-grid.scss | 39 ++++++++++++---------- assets/stylesheets/bootstrap/_variables.scss | 16 ++++----- .../stylesheets/bootstrap/mixins/_breakpoints.scss | 14 ++++---- 3 files changed, 37 insertions(+), 32 deletions(-) (limited to 'assets/stylesheets') diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss index 0eceebb..5f0db79 100644 --- a/assets/stylesheets/_bootstrap-grid.scss +++ b/assets/stylesheets/_bootstrap-grid.scss @@ -8,41 +8,46 @@ // Variables // -// Grid system + +// Grid breakpoints // -// Define your custom responsive grid. +// 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, + sm: 544px, // Medium screen / tablet - md: 48em, + md: 768px, // Large screen / desktop - lg: 62em, + lg: 992px, // Extra large screen / wide desktop - xl: 75em + xl: 1200px ) !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 +// 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 + sm: 576px, + md: 720px, + lg: 940px, + xl: 1140px ) !default; +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 1.875rem !default; // 30px + + // // Grid mixins // diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 60adc77..3d95879 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -90,13 +90,13 @@ $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone - sm: 34em, + sm: 544px, // Medium screen / tablet - md: 48em, + md: 768px, // Large screen / desktop - lg: 62em, + lg: 992px, // Extra large screen / wide desktop - xl: 75em + xl: 1200px ) !default; @@ -105,10 +105,10 @@ $grid-breakpoints: ( // 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 + sm: 576px, + md: 720px, + lg: 940px, + xl: 1140px ) !default; diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss index 790bb73..1685e59 100644 --- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 34rem, md: 45rem) +// (xs: 0, sm: 544px, md: 768px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,7 +10,7 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem)) +// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) // md @@ -21,8 +21,8 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem)) -// 34rem +// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px)) +// 544px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); @@ -31,11 +31,11 @@ // Maximum breakpoint width. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 0.1. // -// >> breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem)) -// 44.9rem +// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px)) +// 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - 0.1, null); + @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. -- cgit v1.2.3