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

Refactor a few selectors. #24404

Merged
merged 12 commits into from
Oct 22, 2017
Merged

Refactor a few selectors. #24404

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a0005f7
Refactor a few selectors.
XhmikosR Oct 13, 2017
6c580bc
Merge remote-tracking branch 'remotes/origin/v4-dev' into v4-dev-xmr-…
XhmikosR Oct 16, 2017
f160f34
Update _component-examples.scss
XhmikosR Oct 17, 2017
715f693
Update _breadcrumb.scss
XhmikosR Oct 17, 2017
cc9da79
Update _code.scss
XhmikosR Oct 17, 2017
6c3cb29
Update _buttons.scss
XhmikosR Oct 17, 2017
97b486b
Update _tables.scss
XhmikosR Oct 17, 2017
7dc2d9c
Update _breadcrumb.scss
XhmikosR Oct 17, 2017
8fd794a
Update _buttons.scss
XhmikosR Oct 17, 2017
1071175
Merge branch 'v4-dev' into v4-dev-xmr-no-descending-specificity
XhmikosR Oct 17, 2017
403690f
Merge branch 'v4-dev' into v4-dev-xmr-no-descending-specificity
XhmikosR Oct 22, 2017
87c758b
Merge branch 'v4-dev' into v4-dev-xmr-no-descending-specificity
XhmikosR Oct 22, 2017
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
142 changes: 76 additions & 66 deletions assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@
//

.bd-example-row {
.row + .row {
margin-top: 1rem;
}

.row {
> .col,
> [class^="col-"] {
Expand All @@ -19,6 +15,10 @@
}
}

.row + .row {
margin-top: 1rem;
}

.flex-items-top,
.flex-items-middle,
.flex-items-bottom {
Expand Down Expand Up @@ -170,31 +170,36 @@
> .form-group:last-child {
margin-bottom: 0;
}
}

.bd-example > .close {
float: none;
> .close {
float: none;
}
}

// Typography
.bd-example-type .table .type-info {
color: #999;
vertical-align: middle;
}
.bd-example-type .table td {
padding: 1rem 0;
border-color: #eee;
}
.bd-example-type .table tr:first-child td {
border-top: 0;
}
.bd-example-type h1,
.bd-example-type h2,
.bd-example-type h3,
.bd-example-type h4,
.bd-example-type h5,
.bd-example-type h6 {
margin: 0;
.bd-example-type {
.table {
.type-info {
color: #999;
vertical-align: middle;
}
td {
padding: 1rem 0;
border-color: #eee;
}
tr:first-child td {
border-top: 0;
}
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
Copy link
Member

Choose a reason for hiding this comment

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

I think we can change this to margin-top: 0; and margin-bottom: 0;. Can't imagine we're adding horizontal margin to any headings.

}
}

// Contextual background colors
Expand All @@ -210,12 +215,14 @@
}

// Buttons
.bd-example > .btn-group {
margin-top: .25rem;
margin-bottom: .25rem;
}
.bd-example > .btn-toolbar + .btn-toolbar {
margin-top: .5rem;
.bd-example {
> .btn-group {
margin-top: .25rem;
margin-bottom: .25rem;
}
> .btn-toolbar + .btn-toolbar {
margin-top: .5rem;
}
}

// Forms
Expand Down Expand Up @@ -265,6 +272,19 @@
}

// Example modals
.modal {
z-index: 1072;

.tooltip,
.popover {
z-index: 1073;
}
}

.modal-backdrop {
z-index: 1071;
}

.bd-example-modal {
background-color: #fafafa;

Expand All @@ -285,20 +305,6 @@
}
}

.modal {
z-index: 1072;

.tooltip,
.popover {
z-index: 1073;
}
}

.modal-backdrop {
z-index: 1071;
}


// Example tabbable tabs
.bd-example-tabs .nav-tabs {
margin-bottom: 1rem;
Expand All @@ -307,10 +313,11 @@
// Tooltips
.bd-example-tooltips {
text-align: center;
}
.bd-example-tooltips > .btn {
margin-top: .25rem;
margin-bottom: .25rem;

> .btn {
margin-top: .25rem;
margin-bottom: .25rem;
}
}
.bs-tooltip-top-docs,
.bs-tooltip-bottom-docs {
Expand All @@ -329,13 +336,14 @@
.bd-example-popover-static {
padding-bottom: 1.5rem;
background-color: #f9f9f9;
}
.bd-example-popover-static .popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 1.25rem;

.popover {
position: relative;
display: block;
float: left;
width: 260px;
margin: 1.25rem;
}
}
.bs-popover-top-docs,
.bs-popover-bottom-docs {
Expand Down Expand Up @@ -413,14 +421,16 @@
}
}

.highlight pre {
padding: 0;
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
border: 0;
}
.highlight pre code {
font-size: inherit;
color: $gray-900; // Effectively the base text color
.highlight {
pre {
padding: 0;
margin-top: 0;
margin-bottom: 0;
background-color: transparent;
border: 0;
}
pre code {
font-size: inherit;
color: $gray-900; // Effectively the base text color
}
}
6 changes: 3 additions & 3 deletions scss/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

.breadcrumb-item {
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item::before {
& + &::before {
display: inline-block; // Suppress underlining of the separator in modern browsers
padding-right: $breadcrumb-item-padding;
padding-left: $breadcrumb-item-padding;
Expand All @@ -24,11 +24,11 @@
//
// To trick IE into suppressing the underline, we give the pseudo-element an
// underline and then immediately remove it.
+ .breadcrumb-item:hover::before {
& + &:hover::before {
text-decoration: underline;
}
// stylelint-disable-next-line no-duplicate-selectors
+ .breadcrumb-item:hover::before {
& + &:hover::before {
text-decoration: none;
}

Expand Down
67 changes: 35 additions & 32 deletions scss/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,47 +43,50 @@
}
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group {
> .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}

// Set corners individual because sometimes a single button can be in a .btn-group
// and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
// Set corners individual because sometimes a single button can be in a .btn-group
// and we need :first-child and :last-child to both match
> .btn:first-child {
margin-left: 0;

&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
// immediately after it
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
}

// Custom edits for including btn-groups within btn-groups (useful for including
// dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
// immediately after it
> .btn:last-child:not(:first-child),
> .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
}

.btn-group > .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
// Custom edits for including btn-groups within btn-groups (useful for including
// dropdown buttons within a btn-group)
> .btn-group {
float: left;
}
}

.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
@include border-left-radius(0);
}
> .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}

> .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
}
}

> .btn-group:last-child:not(:first-child) > .btn:first-child {
@include border-left-radius(0);
}
}

// Sizing
//
Expand Down
16 changes: 9 additions & 7 deletions scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
a.btn {
&.disabled,
fieldset[disabled] & {
pointer-events: none;
}
}


Expand Down Expand Up @@ -119,11 +121,11 @@ fieldset[disabled] a.btn {
.btn-block {
display: block;
width: 100%;
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
margin-top: $btn-block-spacing-y;
// Vertically space out multiple block buttons
& + & {
margin-top: $btn-block-spacing-y;
}
}

// Specificity overrides
Expand Down
2 changes: 1 addition & 1 deletion scss/_code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ kbd {
@include border-radius($border-radius-sm);
@include box-shadow($kbd-box-shadow);

kbd {
& & {
Copy link
Member

Choose a reason for hiding this comment

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

This is weird at first, but probably fine.

padding: 0;
font-size: 100%;
font-weight: $nested-kbd-font-weight;
Expand Down
21 changes: 12 additions & 9 deletions scss/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,10 @@
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695

// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
@include transition($modal-transition);
transform: translate(0, -25%);
.modal-open & {
Copy link
Member

Choose a reason for hiding this comment

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

In general I'm not a fan of this type of nesting—usually ends up more difficult to parse in more complicated rulesets.

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 think we need to keep this; it doesn't complicate things a lot and along with the complexity rule we should be fine. I plan to enable that later too.

I removed the & & instances.

overflow-x: hidden;
overflow-y: auto;
}
&.show .modal-dialog { transform: translate(0, 0); }
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}

// Shell div to position the modal with bottom padding
Expand All @@ -45,6 +39,15 @@
margin: $modal-dialog-margin;
// allow clicks to pass through for custom click handling to close modal
pointer-events: none;

// When fading in the modal, animate it to slide down
.modal.fade & {
@include transition($modal-transition);
transform: translate(0, -25%);
}
.modal.show & {
transform: translate(0, 0);
}
}

// Actual modal
Expand Down
Loading