diff --git a/README.md b/README.md index f084cb4..f24d94a 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Bootstrap 4 grid system and layout utilities. ## Version -Currently v4.0.0-beta.2 +Currently v4.0.0-beta.3 ## What's Included diff --git a/css/grid.css b/css/grid.css index 6d5d584..cc6902c 100644 --- a/css/grid.css +++ b/css/grid.css @@ -1,5 +1,5 @@ /*! - * Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com) + * Bootstrap Grid v4.0.0-beta.3 (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/css/grid.min.css b/css/grid.min.css index e71dbc2..2a1a83a 100644 --- a/css/grid.min.css +++ b/css/grid.min.css @@ -1,5 +1,5 @@ /*! - * Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com) + * Bootstrap Grid v4.0.0-beta.3 (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/package.json b/package.json index 324a12d..7339fb6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-4-grid", - "version": "2.1.0", + "version": "2.2.0", "description": "Bootstrap 4 grid system and layout utilities", "main": "css/grid.min.css", "repository": { @@ -21,7 +21,7 @@ "homepage": "https://github.com/m-spyratos/bootstrap-4-grid", "devDependencies": { "autoprefixer": "^6.7.0", - "bootstrap": "^4.0.0-beta.2", + "bootstrap": "^4.0.0-beta.3", "grunt": "^1.0.1", "grunt-contrib-copy": "^1.0.0", "grunt-contrib-sass": "^1.0.0", diff --git a/scss/breakpoints/mixins/_breakpoints.scss b/scss/breakpoints/mixins/_breakpoints.scss index a9866bd..7c95c68 100644 --- a/scss/breakpoints/mixins/_breakpoints.scss +++ b/scss/breakpoints/mixins/_breakpoints.scss @@ -29,13 +29,15 @@ } // Maximum breakpoint width. Null for the largest (last) breakpoint. -// The maximum value is calculated as the minimum of the next one less 0.1. +// The maximum value is calculated as the minimum of the next one less 0.01px +// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); + @return if($next, breakpoint-min($next, $breakpoints) - .01px, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. diff --git a/scss/grid/_functions.scss b/scss/grid/_functions.scss index 43210f7..1266d34 100644 --- a/scss/grid/_functions.scss +++ b/scss/grid/_functions.scss @@ -56,14 +56,14 @@ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; - @if ($yiq >= 150) { - @return #111; + @if ($yiq >= $yiq-contrasted-threshold) { + @return $yiq-text-dark; } @else { - @return #fff; + @return $yiq-text-light; } } -// Retreive color Sass maps +// Retrieve color Sass maps @function color($key: "blue") { @return map-get($colors, $key); } diff --git a/scss/grid/_variables.scss b/scss/grid/_variables.scss index 0615f35..1c6ca3a 100644 --- a/scss/grid/_variables.scss +++ b/scss/grid/_variables.scss @@ -87,6 +87,12 @@ $theme-colors: map-merge(( // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; +// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. +$yiq-contrasted-threshold: 150 !default; + +// Customize the light and dark text colors for use in our YIQ color contrast function. +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Options // @@ -217,7 +223,7 @@ $transition-collapse: height .35s ease !default; // stylelint-disable value-keyword-case $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; -$font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case @@ -266,19 +272,21 @@ $text-muted: $gray-600 !default; $blockquote-small-color: $gray-600 !default; $blockquote-font-size: ($font-size-base * 1.25) !default; -$hr-border-color: rgba($black,.1) !default; +$hr-border-color: rgba($black, .1) !default; $hr-border-width: $border-width !default; $mark-padding: .2em !default; $dt-font-weight: $font-weight-bold !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default; +$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; $nested-kbd-font-weight: $font-weight-bold !default; -$list-inline-padding: 5px !default; +$list-inline-padding: .5rem !default; + +$mark-bg: #fcf8e3 !default; -$mark-bg: #fcf8e3 !default; +$hr-margin-y: $spacer !default; // Tables @@ -289,12 +297,12 @@ $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; $table-bg: transparent !default; -$table-accent-bg: rgba($black,.05) !default; -$table-hover-bg: rgba($black,.075) !default; +$table-accent-bg: rgba($black, .05) !default; +$table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; $table-border-width: $border-width !default; -$table-border-color: $gray-200 !default; +$table-border-color: $gray-300 !default; $table-head-bg: $gray-200 !default; $table-head-color: $gray-700 !default; @@ -306,9 +314,9 @@ $table-dark-border-color: lighten($gray-900, 7.5%) !default; $table-dark-color: $body-bg !default; -// Buttons +// Buttons + Forms // -// For each of Bootstrap's buttons, define text, background and border color. +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; @@ -326,9 +334,33 @@ $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; $input-btn-line-height-lg: $line-height-lg !default; +$input-btn-border-width: $border-width !default; + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; + +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; + +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; + +$btn-border-width: $input-btn-border-width !default; + $btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; -$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; +$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: .65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; $btn-link-disabled-color: $gray-600 !default; @@ -339,18 +371,30 @@ $btn-border-radius: $border-radius !default; $btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-sm: $border-radius-sm !default; -$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; // Forms +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; + $input-bg: $white !default; $input-disabled-bg: $gray-200 !default; $input-color: $gray-700 !default; $input-border-color: $gray-400 !default; -$input-btn-border-width: $border-width !default; // For form controls and buttons -$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; @@ -359,6 +403,8 @@ $input-border-radius-sm: $border-radius-sm !default; $input-focus-bg: $input-bg !default; $input-focus-border-color: lighten(theme-color("primary"), 25%) !default; $input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; $input-placeholder-color: $gray-600 !default; @@ -373,16 +419,16 @@ $input-height-sm: calc(#{$input-height-inner-sm} + #{$inpu $input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; -$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; +$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $form-text-margin-top: .25rem !default; -$form-check-margin-bottom: .5rem !default; $form-check-input-gutter: 1.25rem !default; -$form-check-input-margin-y: .25rem !default; +$form-check-input-margin-y: .3rem !default; $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; +$form-check-inline-input-margin-x: .3125rem !default; $form-group-margin-bottom: 1rem !default; @@ -391,16 +437,15 @@ $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; $custom-control-gutter: 1.5rem !default; -$custom-control-spacer-y: .25rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: #ddd !default; +$custom-control-indicator-bg: $gray-300 !default; $custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; +$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; $custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-description-disabled-color: $gray-600 !default; +$custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $white !default; $custom-control-indicator-checked-bg: theme-color("primary") !default; @@ -433,21 +478,24 @@ $custom-select-disabled-color: $gray-600 !default; $custom-select-bg: $white !default; $custom-select-disabled-bg: $gray-200 !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator-color: #333 !default; +$custom-select-indicator-color: $gray-800 !default; $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; -$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), $input-btn-focus-box-shadow !default; $custom-select-font-size-sm: 75% !default; $custom-select-height-sm: $input-height-sm !default; +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + $custom-file-height: $input-height !default; -$custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; $custom-file-padding-y: $input-btn-padding-y !default; $custom-file-padding-x: $input-btn-padding-x !default; @@ -461,16 +509,13 @@ $custom-file-box-shadow: $input-box-shadow !default; $custom-file-button-color: $custom-file-color !default; $custom-file-button-bg: $input-group-addon-bg !default; $custom-file-text: ( - placeholder: ( - en: "Choose file..." - ), - button-label: ( - en: "Browse" - ) + en: "Browse" ) !default; // Form validation +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $small-font-size !default; $form-feedback-valid-color: theme-color("success") !default; $form-feedback-invalid-color: theme-color("danger") !default; @@ -483,10 +528,11 @@ $dropdown-min-width: 10rem !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; $dropdown-bg: $white !default; -$dropdown-border-color: rgba($black,.15) !default; +$dropdown-border-color: rgba($black, .15) !default; +$dropdown-border-radius: $border-radius !default; $dropdown-border-width: $border-width !default; $dropdown-divider-bg: $gray-200 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; $dropdown-link-color: $gray-900 !default; $dropdown-link-hover-color: darken($gray-900, 5%) !default; @@ -522,13 +568,13 @@ $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; $nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: #ddd !default; +$nav-tabs-border-color: $gray-300 !default; $nav-tabs-border-width: $border-width !default; $nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-200 !default; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; $nav-tabs-link-active-color: $gray-700 !default; $nav-tabs-link-active-bg: $body-bg !default; -$nav-tabs-link-active-border-color: #ddd !default; +$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; @@ -550,19 +596,19 @@ $navbar-toggler-padding-x: .75rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; -$navbar-dark-color: rgba($white,.5) !default; -$navbar-dark-hover-color: rgba($white,.75) !default; +$navbar-dark-color: rgba($white, .5) !default; +$navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; -$navbar-dark-disabled-color: rgba($white,.25) !default; +$navbar-dark-disabled-color: rgba($white, .25) !default; $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-dark-toggler-border-color: rgba($white,.1) !default; +$navbar-dark-toggler-border-color: rgba($white, .1) !default; -$navbar-light-color: rgba($black,.5) !default; -$navbar-light-hover-color: rgba($black,.7) !default; -$navbar-light-active-color: rgba($black,.9) !default; -$navbar-light-disabled-color: rgba($black,.3) !default; +$navbar-light-color: rgba($black, .5) !default; +$navbar-light-hover-color: rgba($black, .7) !default; +$navbar-light-active-color: rgba($black, .9) !default; +$navbar-light-disabled-color: rgba($black, .3) !default; $navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-light-toggler-border-color: rgba($black,.1) !default; +$navbar-light-toggler-border-color: rgba($black, .1) !default; // Pagination @@ -577,11 +623,11 @@ $pagination-line-height: 1.25 !default; $pagination-color: $link-color !default; $pagination-bg: $white !default; $pagination-border-width: $border-width !default; -$pagination-border-color: #ddd !default; +$pagination-border-color: $gray-300 !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: #ddd !default; +$pagination-hover-border-color: $gray-300 !default; $pagination-active-color: $white !default; $pagination-active-bg: theme-color("primary") !default; @@ -589,7 +635,7 @@ $pagination-active-border-color: theme-color("primary") !default; $pagination-disabled-color: $gray-600 !default; $pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: #ddd !default; +$pagination-disabled-border-color: $gray-300 !default; // Jumbotron @@ -604,7 +650,7 @@ $card-spacer-y: .75rem !default; $card-spacer-x: 1.25rem !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; -$card-border-color: rgba($black,.125) !default; +$card-border-color: rgba($black, .125) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: rgba($black, .03) !default; $card-bg: $white !default; @@ -621,18 +667,17 @@ $card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: 3px !default; -$tooltip-padding-x: 8px !default; -$tooltip-margin: 0 !default; - +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-opacity: .9 !default; +$tooltip-padding-y: .25rem !default; +$tooltip-padding-x: .5rem !default; +$tooltip-margin: 0 !default; -$tooltip-arrow-width: 5px !default; -$tooltip-arrow-height: 5px !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-arrow-width: .8rem !default; +$tooltip-arrow-height: .4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; // Popovers @@ -640,8 +685,8 @@ $tooltip-arrow-color: $tooltip-bg !default; $popover-bg: $white !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; -$popover-border-color: rgba($black,.2) !default; -$popover-box-shadow: 0 .25rem .5rem rgba($black,.2) !default; +$popover-border-color: rgba($black, .2) !default; +$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; $popover-header-bg: darken($popover-bg, 3%) !default; $popover-header-color: $headings-color !default; @@ -652,8 +697,8 @@ $popover-body-color: $body-color !default; $popover-body-padding-y: $popover-header-padding-y !default; $popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-width: .8rem !default; -$popover-arrow-height: .4rem !default; +$popover-arrow-width: 1rem !default; +$popover-arrow-height: .5rem !default; $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; @@ -676,26 +721,26 @@ $badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 15px !default; +$modal-inner-padding: 1rem !default; -$modal-dialog-margin: 10px !default; -$modal-dialog-margin-y-sm-up: 30px !default; +$modal-dialog-margin: .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-title-line-height: $line-height-base !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black,.2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default; -$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, .2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; +$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 15px !default; +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: .5 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1rem !default; $modal-lg: 800px !default; $modal-md: 500px !default; @@ -722,7 +767,7 @@ $progress-height: 1rem !default; $progress-font-size: ($font-size-base * .75) !default; $progress-bg: $gray-200 !default; $progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; +$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; $progress-bar-color: $white !default; $progress-bar-bg: theme-color("primary") !default; $progress-bar-animation-timing: 1s linear infinite !default; @@ -731,7 +776,7 @@ $progress-bar-transition: width .6s ease !default; // List group $list-group-bg: $white !default; -$list-group-border-color: rgba($black,.125) !default; +$list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; @@ -758,10 +803,9 @@ $list-group-action-active-bg: $gray-200 !default; $thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; $thumbnail-border-width: $border-width !default; -$thumbnail-border-color: #ddd !default; +$thumbnail-border-color: $gray-300 !default; $thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default; -$thumbnail-transition: all .2s ease-in-out !default; +$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; // Figures @@ -815,12 +859,12 @@ $close-text-shadow: 0 1px 0 $white !default; // Code -$code-font-size: 90% !default; -$code-padding-y: .2rem !default; -$code-padding-x: .4rem !default; -$code-color: #bd4147 !default; -$code-bg: $gray-100 !default; +$code-font-size: 87.5% !default; +$code-color: $pink !default; +$kbd-padding-y: .2rem !default; +$kbd-padding-x: .4rem !default; +$kbd-font-size: $code-font-size !default; $kbd-color: $white !default; $kbd-bg: $gray-900 !default; diff --git a/scss/grid/bootstrap-grid.scss b/scss/grid/bootstrap-grid.scss index d7d4e78..fec2766 100644 --- a/scss/grid/bootstrap-grid.scss +++ b/scss/grid/bootstrap-grid.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com) + * Bootstrap Grid v4.0.0-beta.3 (https://getbootstrap.com) * Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/scss/grid/mixins/_breakpoints.scss b/scss/grid/mixins/_breakpoints.scss index a9866bd..7c95c68 100644 --- a/scss/grid/mixins/_breakpoints.scss +++ b/scss/grid/mixins/_breakpoints.scss @@ -29,13 +29,15 @@ } // Maximum breakpoint width. Null for the largest (last) breakpoint. -// The maximum value is calculated as the minimum of the next one less 0.1. +// The maximum value is calculated as the minimum of the next one less 0.01px +// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); + @return if($next, breakpoint-min($next, $breakpoints) - .01px, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.