Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blacklist border-radius property (use mixin instead) #27900

Merged
merged 3 commits into from
Dec 23, 2018
Merged

Blacklist border-radius property (use mixin instead) #27900

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f0b0e0
Blacklist border-radius property (use mixin instead)
MartijnCuppens Dec 22, 2018
deeaa60
Always use border-radius: 0 in reboot
MartijnCuppens Dec 22, 2018
7faee89
Merge branch 'v4-dev' into v4-dev-martijncuppens-border-radius
XhmikosR Dec 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,14 @@
"fill",
"stroke"
],
"property-blacklist": ["transition"],
"property-blacklist": [
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"transition"
],
"property-no-vendor-prefix": true,
"rule-empty-line-before": null,
"scss/at-function-named-arguments": "never",
Expand Down
14 changes: 8 additions & 6 deletions scss/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,10 +200,12 @@

.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-right-radius: 0;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we should add a mixin for border-top-right-radius and the other specific border radii?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eh, probably not necessary? It'd save on a bit of CSS when folks compile without rounded corners enabled, but probably not worth it right now.

}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-right-radius: 0;
}
}
Expand All @@ -213,10 +215,12 @@

.card-img-top,
.card-header {
// stylelint-disable-next-line property-blacklist
border-top-left-radius: 0;
}
.card-img-bottom,
.card-footer {
// stylelint-disable-next-line property-blacklist
border-bottom-left-radius: 0;
}
}
Expand Down Expand Up @@ -283,24 +287,22 @@

&:not(:first-of-type) {
.card-header:first-child {
border-radius: 0;
@include border-radius(0);
}

&:not(:last-of-type) {
border-bottom: 0;
border-radius: 0;
@include border-radius(0);
}
}

&:first-of-type {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
@include border-bottom-radius(0);
}

&:last-of-type {
border-top-left-radius: 0;
border-top-right-radius: 0;
@include border-top-radius(0);
}

.card-header {
Expand Down
9 changes: 4 additions & 5 deletions scss/_custom-forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@

.custom-radio {
.custom-control-label::before {
// stylelint-disable-next-line property-blacklist
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the custom radios should always be round, independent of $enable-rounded? That's why I didn't use the mixin here.

border-radius: $custom-radio-indicator-border-radius;
}

Expand Down Expand Up @@ -173,6 +174,7 @@
left: -($custom-switch-width + $custom-control-gutter);
width: $custom-switch-width;
pointer-events: all;
// stylelint-disable-next-line property-blacklist
border-radius: $custom-switch-indicator-border-radius;
}

Expand All @@ -182,6 +184,7 @@
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
background-color: $custom-control-indicator-border-color;
// stylelint-disable-next-line property-blacklist
border-radius: $custom-switch-indicator-border-radius;
@include transition(transform .15s ease-in-out, $custom-forms-transition);
}
Expand Down Expand Up @@ -220,11 +223,7 @@
background: $custom-select-background;
background-color: $custom-select-bg;
border: $custom-select-border-width solid $custom-select-border-color;
@if $enable-rounded {
border-radius: $custom-select-border-radius;
} @else {
border-radius: 0;
}
@include border-radius($custom-select-border-radius, 0);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't really like the if/else statement here, so I tweaked the border-radius mixin a bit to simplify this code here.

@include box-shadow($custom-select-box-shadow);
appearance: none;

Expand Down
8 changes: 1 addition & 7 deletions scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,7 @@
border: $input-border-width solid $input-border-color;

// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@if $enable-rounded {
// Manually use the if/else instead of the mixin to account for iOS override
border-radius: $input-border-radius;
} @else {
// Otherwise undo the iOS default
border-radius: 0;
}
@include border-radius($input-border-radius, 0);

@include box-shadow($input-box-shadow);
@include transition($input-transition);
Expand Down
2 changes: 1 addition & 1 deletion scss/_reboot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ label {
//
// Details at https://github.com/twbs/bootstrap/issues/24093
button {
border-radius: 0;
@include border-radius(0);
}

// Work around a Firefox/IE bug where the transparent `button` background
Expand Down
2 changes: 2 additions & 0 deletions scss/_spinners.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
border-right-color: transparent;
// stylelint-disable-next-line property-blacklist
border-radius: 50%;
animation: spinner-border .75s linear infinite;
}
Expand Down Expand Up @@ -42,6 +43,7 @@
height: $spinner-height;
vertical-align: text-bottom;
background-color: currentColor;
// stylelint-disable-next-line property-blacklist
border-radius: 50%;
opacity: 0;
animation: spinner-grow .75s linear infinite;
Expand Down
6 changes: 5 additions & 1 deletion scss/mixins/_border-radius.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
// stylelint-disable property-blacklist
// Single side border-radius

@mixin border-radius($radius: $border-radius) {
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
border-radius: $radius;
}
@else if $fallback-border-radius != false {
border-radius: $fallback-border-radius;
}
}

@mixin border-top-radius($radius) {
Expand Down
6 changes: 1 addition & 5 deletions scss/mixins/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,5 @@
font-size: $font-size;
line-height: $line-height;
// Manually declare to provide an override to the browser default
@if $enable-rounded {
border-radius: $border-radius;
} @else {
border-radius: 0;
}
@include border-radius($border-radius, 0);
}
2 changes: 1 addition & 1 deletion scss/utilities/_borders.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// stylelint-disable declaration-no-important
// stylelint-disable property-blacklist, declaration-no-important

//
// Border
Expand Down
2 changes: 1 addition & 1 deletion site/docs/4.2/assets/scss/_ads.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

@include media-breakpoint-up(sm) {
max-width: 330px;
border-radius: 4px;
@include border-radius(4px);
}
}

Expand Down
4 changes: 2 additions & 2 deletions site/docs/4.2/assets/scss/_brand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
overflow: hidden;
color: $bd-purple;
background-color: #f9f9f9;
border-radius: .25rem;
@include border-radius;

.inverse {
color: $white;
Expand Down Expand Up @@ -79,7 +79,7 @@
height: 4rem;
margin-right: .25rem;
margin-left: .25rem;
border-radius: .25rem;
@include border-radius;

@include media-breakpoint-up(md) {
width: 6rem;
Expand Down
4 changes: 2 additions & 2 deletions site/docs/4.2/assets/scss/_callouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
margin-bottom: 1.25rem;
border: 1px solid #eee;
border-left-width: .25rem;
border-radius: .25rem;
@include border-radius;

h4 {
margin-top: 0;
Expand All @@ -20,7 +20,7 @@
}

code {
border-radius: .25rem;
@include border-radius;
}

+ .bd-callout {
Expand Down
2 changes: 1 addition & 1 deletion site/docs/4.2/assets/scss/_clipboard-js.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
cursor: pointer;
background-color: transparent;
border: 0;
border-radius: .25rem;
@include border-radius;

&:hover {
color: $white;
Expand Down
6 changes: 3 additions & 3 deletions site/docs/4.2/assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,22 +87,22 @@
height: 3rem;
margin-bottom: .5rem;
background-color: lighten($blue, 50%);
border-radius: .25rem;
@include border-radius;
}

.bd-example-container-sidebar {
float: right;
width: 4rem;
height: 8rem;
background-color: lighten($blue, 25%);
border-radius: .25rem;
@include border-radius;
}

.bd-example-container-body {
height: 8rem;
margin-right: 4.5rem;
background-color: lighten($bd-purple, 25%);
border-radius: .25rem;
@include border-radius;
}

.bd-example-container-fluid {
Expand Down