From b7b8f98c862594e80c6d3a43972aefc686a92b43 Mon Sep 17 00:00:00 2001 From: Jan Stevens Date: Thu, 20 Aug 2015 11:35:00 +0200 Subject: Fixes the _image mixing by prefixing the parameters with $ --- scss/mixins/_image.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss index bec9626f6..e5ae10a3c 100644 --- a/scss/mixins/_image.scss +++ b/scss/mixins/_image.scss @@ -19,7 +19,7 @@ // Short retina mixin for setting background-image and -size. @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { - background-image: url("#{file-1x}"); + background-image: url($file-1x); @media only screen and (-webkit-min-device-pixel-ratio: 2), @@ -27,7 +27,7 @@ only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { - background-image: url("#{file-2x}"); + background-image: url($file-2x); background-size: $width-1x $height-1x; } } -- cgit v1.2.3 From ac3fbdad3626c4c43303c168f3109c09da688b8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corn=C3=A9=20Dorrestijn?= Date: Fri, 21 Aug 2015 22:21:20 +0200 Subject: Removed mixin from focus ouline box-shadow fixes #17066 --- scss/_custom-forms.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index ec211acaa..2326e01ca 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -19,16 +19,16 @@ z-index: -1; // Put the input behind the label so it doesn't overlay text opacity: 0; - &:focus ~ .c-indicator { - @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9); - } - &:checked ~ .c-indicator { color: #fff; background-color: #0074d9; @include box-shadow(none); } + &:focus ~ .c-indicator { + box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; + } + &:active ~ .c-indicator { color: #fff; background-color: #84c6ff; -- cgit v1.2.3 From c49503165a301e53583dcb74003e2894d966269b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corn=C3=A9=20Dorrestijn?= Date: Sat, 22 Aug 2015 01:04:16 +0200 Subject: Added comment explaining why there is no mixin here --- scss/_custom-forms.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 2326e01ca..bc36013e9 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -26,6 +26,7 @@ } &:focus ~ .c-indicator { + // the mixin is not used here to make sure there is feedback box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; } -- cgit v1.2.3 From 1e7c42d2c086157c77fc8df8dbba3e622c143ed5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Aug 2015 18:36:43 -0700 Subject: fixes #17035 --- scss/_input-group.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_input-group.scss b/scss/_input-group.scss index df8aa10eb..3b4ef632c 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -97,7 +97,7 @@ @include border-radius($border-radius-sm); } &.form-control-lg { - padding: $input-padding-x-lg $input-padding-x-lg; + padding: $input-padding-y-lg $input-padding-x-lg; font-size: $font-size-lg; @include border-radius($border-radius-lg); } -- cgit v1.2.3 From 990d646bcdbb3eeea54e1da6b9a377b29c4a6e16 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Aug 2015 19:01:11 -0700 Subject: fix shadows on btns to use mixin --- scss/mixins/_buttons.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 75d284778..6e4e298f1 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -7,8 +7,7 @@ color: $color; background-color: $background; border-color: $border; -// $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); -// .box-shadow($shadow); + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075)); $active-background: darken($background, 10%); $active-border: darken($border, 12%); -- cgit v1.2.3 From 1f153b640de55a4fff1aca3cf7331e9b7e3a408f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Aug 2015 19:05:43 -0700 Subject: re-fix #16154 in v4-dev /cc #17101 --- scss/mixins/_buttons.scss | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 6e4e298f1..c64f0e8f7 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -4,35 +4,46 @@ // and disabled options for all buttons @mixin button-variant($color, $background, $border) { + $active-background: darken($background, 10%); + $active-border: darken($border, 12%); + color: $color; background-color: $background; border-color: $border; @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075)); - $active-background: darken($background, 10%); - $active-border: darken($border, 12%); - - &:focus, - &.focus, - &:active, - &.active, - .open > &.dropdown-toggle { + @include hover { color: $color; background-color: $active-background; border-color: $active-border; } - @include hover { + + &:focus, + &.focus { color: $color; background-color: $active-background; border-color: $active-border; } + &:active, &.active, .open > &.dropdown-toggle { + color: $color; + background-color: $active-background; + border-color: $active-border; // Remove the gradient for the pressed/active state background-image: none; @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + + &:hover, + &:focus, + &.focus { + color: $color; + background-color: darken($background, 17%); + border-color: darken($border, 25%); + } } + &.disabled, &:disabled, fieldset[disabled] & { -- cgit v1.2.3 From 54a5fbe0c184a13e92ed3c44d0faa821692fc85c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Aug 2015 21:46:46 -0700 Subject: fix #17149: correct syntax in list-group variant mixin; nullifies #17154 --- scss/mixins/_list-group.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index a40dda96d..81b0f1634 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -1,13 +1,13 @@ // List Groups @mixin list-group-item-variant($state, $background, $color) { - .list-group-item-#{state} { + .list-group-item-#{$state} { color: $color; background-color: $background; } - a.list-group-item-#{state}, - button.list-group-item-#{state} { + a.list-group-item-#{$state}, + button.list-group-item-#{$state} { color: $color; .list-group-item-heading { -- cgit v1.2.3 From 27f97e328b5a60aef742cb6b54e6f99b9a6212b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Aug 2015 00:18:28 -0700 Subject: shorter clearfix --- scss/mixins/_clearfix.scss | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss index dc3e2ab42..439455f6d 100644 --- a/scss/mixins/_clearfix.scss +++ b/scss/mixins/_clearfix.scss @@ -1,22 +1,7 @@ -// Clearfix -// -// 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. -// -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ - @mixin clearfix() { - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - } &:after { + content: ""; + display: table; clear: both; } } -- cgit v1.2.3 From 683472d6e217c80fcb196398ec2444228752a5d0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Aug 2015 00:24:59 -0700 Subject: remove a margin-top: 0 reset since we nuke headings' top margins now in reboot --- scss/_alert.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_alert.scss b/scss/_alert.scss index aaa2a1da5..e52e957b5 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -20,7 +20,6 @@ // Headings for larger alerts .alert-heading { - margin-top: 0; // Specified to prevent conflicts of changing $headings-color color: inherit; } -- cgit v1.2.3 From 24fee99e0e5617e7aaff6a2b45135e4a75b35375 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Aug 2015 00:25:58 -0700 Subject: remove another margin-top: 0 --- scss/_card.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_card.scss b/scss/_card.scss index 0a4f5b630..dc844a849 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -14,7 +14,6 @@ } .card-title { - margin-top: 0; margin-bottom: $card-spacer-y; } -- cgit v1.2.3 From 27e4e97840861446eb4f33770b1ad083c8717324 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Aug 2015 00:28:02 -0700 Subject: there is no navbar default for this --- scss/_navbar.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 61c212144..36d9abf03 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -35,7 +35,6 @@ right: 0; left: 0; z-index: $zindex-navbar-fixed; - margin-bottom: 0; // override .navbar defaults // Undo the rounded corners @include media-breakpoint-up(sm) { -- cgit v1.2.3 From b2dccb15d79085af2a507b6b9f2c35c0e5770ffa Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Aug 2015 01:00:22 -0700 Subject: fix majority of scss linter errors --- scss/.scsslint.yml | 6 ++++++ scss/_custom-forms.scss | 4 ++-- scss/_forms.scss | 2 +- scss/_labels.scss | 2 +- scss/_list-group.scss | 2 +- scss/_modal.scss | 2 +- scss/_navbar.scss | 6 +++--- scss/_type.scss | 2 +- scss/_utilities-spacing.scss | 2 +- 9 files changed, 17 insertions(+), 11 deletions(-) (limited to 'scss') diff --git a/scss/.scsslint.yml b/scss/.scsslint.yml index 3b24eeb3a..7c5573f74 100644 --- a/scss/.scsslint.yml +++ b/scss/.scsslint.yml @@ -12,6 +12,9 @@ linters: ColorKeyword: enabled: true + ColorVariable: + enabled: false + Comment: enabled: true exclude: ['_normalize.scss', 'bootstrap.scss'] @@ -55,6 +58,9 @@ linters: IdSelector: enabled: true + ImportantRule: + enabled: false + ImportPath: enabled: true leading_underscore: false diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index bc36013e9..5cdf45e20 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -132,7 +132,7 @@ max-width: 100%; padding: .375rem 1.75rem .375rem .75rem; vertical-align: middle; - background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center; + background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center; background-size: 8px 10px; border: 1px solid $input-border; @@ -146,8 +146,8 @@ background-image: none \9; &:focus { - outline: none; border-color: #51a7e8; + outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); } diff --git a/scss/_forms.scss b/scss/_forms.scss index 6eafd53ca..72ec9b03f 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -266,9 +266,9 @@ input[type="checkbox"] { .form-control-warning, .form-control-error { padding-right: ($input-padding-x * 3); + background-repeat: no-repeat; background-position: center right ($input-height * .25); background-size: ($input-height * .65) ($input-height * .65); - background-repeat: no-repeat; } // Form validation states diff --git a/scss/_labels.scss b/scss/_labels.scss index 599f33558..403504b86 100644 --- a/scss/_labels.scss +++ b/scss/_labels.scss @@ -41,8 +41,8 @@ a.label { // Make them extra rounded with a modifier to replace v3's badges. .label-pill { - padding-left: .6em; padding-right: .6em; + padding-left: .6em; border-radius: 1rem; } diff --git a/scss/_list-group.scss b/scss/_list-group.scss index d90902290..4e3d73cc5 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -48,8 +48,8 @@ a.list-group-item, button.list-group-item { width: 100%; - text-align: inherit; color: $list-group-link-color; + text-align: inherit; .list-group-item-heading { color: $list-group-link-heading-color; diff --git a/scss/_modal.scss b/scss/_modal.scss index f034c77c8..046810f5f 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -26,8 +26,8 @@ // When fading in the modal, animate it to slide down &.fade .modal-dialog { - transform: translate(0, -25%); transition: transform .3s ease-out; + transform: translate(0, -25%); } &.in .modal-dialog { transform: translate(0, 0); } } diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 36d9abf03..f196b8c7e 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -69,9 +69,9 @@ .navbar-brand { float: left; - margin-right: 1rem; padding-top: .25rem; padding-bottom: .25rem; + margin-right: 1rem; font-size: $font-size-lg; @include hover-focus { @@ -89,12 +89,12 @@ width: 1px; padding-top: .425rem; padding-bottom: .425rem; - overflow: hidden; margin-left: $navbar-padding-horizontal; margin-right: $navbar-padding-horizontal; + overflow: hidden; &:before { - content: '\00a0'; + content: "\00a0"; } } diff --git a/scss/_type.scss b/scss/_type.scss index 2f5cdb4f9..3d349e644 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -176,8 +176,8 @@ mark, > img { @extend .img-responsive; - line-height: 1; margin-bottom: ($spacer-y / 2); + line-height: 1; } } diff --git a/scss/_utilities-spacing.scss b/scss/_utilities-spacing.scss index 547bea701..1c2cca468 100644 --- a/scss/_utilities-spacing.scss +++ b/scss/_utilities-spacing.scss @@ -40,7 +40,7 @@ .p-r-0 { padding-right: 0 !important; } .p-b-0 { padding-bottom: 0 !important; } .p-l-0 { padding-left: 0 !important; } -.p-x-0 { padding-left: 0 !important; padding-right: 0 !important; } +.p-x-0 { padding-right: 0 !important; padding-left: 0 !important; } .p-y-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .p-a { padding: $spacer !important; } -- cgit v1.2.3 From 6f8f4cc92c67dadfcadd2c50db56aa47cea26edc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Aug 2015 01:03:51 -0700 Subject: there is no standard appearance property --- scss/_custom-forms.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 5cdf45e20..50731111f 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -139,7 +139,6 @@ // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec. -webkit-appearance: none; -moz-appearance: none; - appearance: none; // IE9 hacks to hide the background-image and reduce padding padding-right: .75rem \9; -- cgit v1.2.3 From a5bfbe0fcad5334e68d236f0603b685441829656 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 23 Aug 2015 01:12:00 -0700 Subject: fix remaining scss lint errors --- scss/.scsslint.yml | 7 +++---- scss/_custom-forms.scss | 13 ++++++------- scss/_dropdown.scss | 12 ++++++------ scss/_navbar.scss | 2 +- 4 files changed, 16 insertions(+), 18 deletions(-) (limited to 'scss') diff --git a/scss/.scsslint.yml b/scss/.scsslint.yml index 7c5573f74..35ce8194f 100644 --- a/scss/.scsslint.yml +++ b/scss/.scsslint.yml @@ -102,6 +102,9 @@ linters: "bottom", "left", "z-index", + "-webkit-box-sizing", + "-moz-box-sizing", + "box-sizing", "display", "float", "width", @@ -110,10 +113,6 @@ linters: "height", "min-height", "max-height", - "-webkit-box-sizing", - "-moz-box-sizing", - "box-sizing", - "-webkit-appearance", "flex", "flex-direction", "flex-flow", diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 50731111f..c63c9c185 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -126,23 +126,22 @@ // // Replaces the browser default select with a custom one, mostly pulled from // http://primercss.io. +// +// Includes IE9-specific hacks (noted by ` \9`). .c-select { display: inline-block; max-width: 100%; padding: .375rem 1.75rem .375rem .75rem; + padding-right: .75rem \9; vertical-align: middle; background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center; + background-image: none \9; background-size: 8px 10px; border: 1px solid $input-border; - - // Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec. - -webkit-appearance: none; + // Use vendor prefixes as `appearance` isn't part of the CSS spec. -moz-appearance: none; - - // IE9 hacks to hide the background-image and reduce padding - padding-right: .75rem \9; - background-image: none \9; + -webkit-appearance: none; &:focus { border-color: #51a7e8; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index d3588d270..b1a7f5c44 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -51,20 +51,20 @@ } // Links, buttons, and more within the dropdown menu +// +// `