From a0005f703bf3d50a38a5fea6ca2c0f2d9077ed58 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 13 Oct 2017 16:10:45 +0300 Subject: [PATCH 1/8] Refactor a few selectors. 1. move a couple of them before the more specific ones. 2. change nesting to be under the same parent selector 3. use the ampersand more --- assets/scss/_component-examples.scss | 142 ++++++++++++++------------- scss/_breadcrumb.scss | 6 +- scss/_button-group.scss | 67 +++++++------ scss/_buttons.scss | 16 +-- scss/_code.scss | 2 +- scss/_modal.scss | 21 ++-- scss/_pagination.scss | 36 +++---- scss/_tables.scss | 2 +- 8 files changed, 155 insertions(+), 137 deletions(-) diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index 3d216991afcb..f83b90aa4dfa 100644 --- a/assets/scss/_component-examples.scss +++ b/assets/scss/_component-examples.scss @@ -5,10 +5,6 @@ // .bd-example-row { - .row + .row { - margin-top: 1rem; - } - .row { > .col, > [class^="col-"] { @@ -19,6 +15,10 @@ } } + .row + .row { + margin-top: 1rem; + } + .flex-items-top, .flex-items-middle, .flex-items-bottom { @@ -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; + } } // Contextual background colors @@ -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 @@ -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; @@ -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; @@ -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 { @@ -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 { @@ -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 + } } diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 25b9d85a1285..e553bfe15697 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -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; @@ -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; } diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 1a373f323282..f08d03acd462 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -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 // diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 72fc5f34062a..75ad18b3b0c8 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -40,9 +40,11 @@ } // Future-proof disabling of clicks on `` elements -a.btn.disabled, -fieldset[disabled] a.btn { - pointer-events: none; +a.btn { + &.disabled, + fieldset[disabled] & { + pointer-events: none; + } } @@ -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 diff --git a/scss/_code.scss b/scss/_code.scss index 759da15b791e..240577f49fe0 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -31,7 +31,7 @@ kbd { @include border-radius($border-radius-sm); @include box-shadow($kbd-box-shadow); - kbd { + & & { padding: 0; font-size: 100%; font-weight: $nested-kbd-font-weight; diff --git a/scss/_modal.scss b/scss/_modal.scss index e655850e3873..5fabc83f46e8 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -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 & { + 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 @@ -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 diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 69a36ffe53b8..dda3d161ee64 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -4,6 +4,24 @@ @include border-radius(); } +.page-link { + position: relative; + display: block; + padding: $pagination-padding-y $pagination-padding-x; + margin-left: -$pagination-border-width; + line-height: $pagination-line-height; + color: $pagination-color; + background-color: $pagination-bg; + border: $pagination-border-width solid $pagination-border-color; + + @include hover-focus { + color: $pagination-hover-color; + text-decoration: none; + background-color: $pagination-hover-bg; + border-color: $pagination-hover-border-color; + } +} + .page-item { &:first-child { .page-link { @@ -32,24 +50,6 @@ } } -.page-link { - position: relative; - display: block; - padding: $pagination-padding-y $pagination-padding-x; - margin-left: -$pagination-border-width; - line-height: $pagination-line-height; - color: $pagination-color; - background-color: $pagination-bg; - border: $pagination-border-width solid $pagination-border-color; - - @include hover-focus { - color: $pagination-hover-color; - text-decoration: none; - background-color: $pagination-hover-bg; - border-color: $pagination-hover-border-color; - } -} - // // Sizing diff --git a/scss/_tables.scss b/scss/_tables.scss index 6bd0b91a43cd..715e38c69b7d 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -24,7 +24,7 @@ border-top: (2 * $table-border-width) solid $table-border-color; } - .table { + & & { background-color: $body-bg; } } From f160f34b6dabf5d3193bb8004e550bf734f82db5 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Oct 2017 02:49:36 +0300 Subject: [PATCH 2/8] Update _component-examples.scss --- assets/scss/_component-examples.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index f83b90aa4dfa..0ccd45597260 100644 --- a/assets/scss/_component-examples.scss +++ b/assets/scss/_component-examples.scss @@ -198,7 +198,8 @@ h4, h5, h6 { - margin: 0; + margin-top: 0; + margin-bottom: 0; } } From 715f69314fbc98d99248655f6d2ed334e7d8f160 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Oct 2017 02:50:47 +0300 Subject: [PATCH 3/8] Update _breadcrumb.scss --- scss/_breadcrumb.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index e553bfe15697..c7c385bb6589 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -10,7 +10,7 @@ .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") - & + &::before { + + .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; @@ -24,11 +24,11 @@ // // To trick IE into suppressing the underline, we give the pseudo-element an // underline and then immediately remove it. - & + &:hover::before { + + .breadcrumb-item:hover::before { text-decoration: underline; } // stylelint-disable-next-line no-duplicate-selectors - & + &:hover::before { + + .breadcrumb-item:hover::before { text-decoration: none; } From cc9da7961a703eec7591c084290c83d90474b30d Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Oct 2017 02:51:14 +0300 Subject: [PATCH 4/8] Update _code.scss --- scss/_code.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_code.scss b/scss/_code.scss index 240577f49fe0..759da15b791e 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -31,7 +31,7 @@ kbd { @include border-radius($border-radius-sm); @include box-shadow($kbd-box-shadow); - & & { + kbd { padding: 0; font-size: 100%; font-weight: $nested-kbd-font-weight; From 6c3cb292600cb147ac8124d32b7b2fdf7d3a2faf Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Oct 2017 02:52:04 +0300 Subject: [PATCH 5/8] Update _buttons.scss --- scss/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 75ad18b3b0c8..79e5cdef57aa 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -123,7 +123,7 @@ a.btn { width: 100%; // Vertically space out multiple block buttons - & + & { + + .btn-block { margin-top: $btn-block-spacing-y; } } From 97b486bb3c467d1d0e0d222a05f59202a4f1708c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Oct 2017 02:52:34 +0300 Subject: [PATCH 6/8] Update _tables.scss --- scss/_tables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 715e38c69b7d..6bd0b91a43cd 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -24,7 +24,7 @@ border-top: (2 * $table-border-width) solid $table-border-color; } - & & { + .table { background-color: $body-bg; } } From 7dc2d9c8cfa79096ac23370335e9e1cb73a9af48 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Oct 2017 02:53:16 +0300 Subject: [PATCH 7/8] Update _breadcrumb.scss --- scss/_breadcrumb.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index c7c385bb6589..25b9d85a1285 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -10,7 +10,7 @@ .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item::before { ::before { + + .breadcrumb-item::before { display: inline-block; // Suppress underlining of the separator in modern browsers padding-right: $breadcrumb-item-padding; padding-left: $breadcrumb-item-padding; From 8fd794a08f5c488da2ea40252d801b7199dc4d02 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 18 Oct 2017 02:53:58 +0300 Subject: [PATCH 8/8] Update _buttons.scss --- scss/_buttons.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 79e5cdef57aa..584cf98cb8d0 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -40,11 +40,9 @@ } // Future-proof disabling of clicks on `` elements -a.btn { - &.disabled, - fieldset[disabled] & { - pointer-events: none; - } +a.btn.disabled, +fieldset[disabled] a.btn { + pointer-events: none; }