diff options
| -rw-r--r-- | assets/scss/_component-examples.scss | 143 | ||||
| -rw-r--r-- | scss/_button-group.scss | 67 | ||||
| -rw-r--r-- | scss/_buttons.scss | 8 | ||||
| -rw-r--r-- | scss/_modal.scss | 21 | ||||
| -rw-r--r-- | scss/_pagination.scss | 36 |
5 files changed, 146 insertions, 129 deletions
diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index cab01e1aee..f0a1bd8fd8 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,37 @@ > .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-top: 0; + margin-bottom: 0; + } } // Contextual background colors @@ -210,12 +216,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 +273,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 +306,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 +314,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 +337,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 +422,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/_button-group.scss b/scss/_button-group.scss index ae758cf195..12d4982aab 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 7cd27830b5..16a478e104 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -119,11 +119,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 + + .btn-block { + margin-top: $btn-block-spacing-y; + } } // Specificity overrides diff --git a/scss/_modal.scss b/scss/_modal.scss index e655850e38..5fabc83f46 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 6e83cf676f..97977f46d5 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 |