diff options
author | Mark Otto <markdotto@gmail.com> | 2017-05-27 07:22:08 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2017-05-27 07:22:08 +0300 |
commit | 04724939a39d68b495da638e58eb794dafe8ab93 (patch) | |
tree | 7648460f56c35778514e388fc2933b8d55c6cce8 /scss | |
parent | e0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d (diff) | |
parent | f2829dd6ea10d1af7e451397f7228087cff95b8a (diff) |
Merge branch 'v4-dev' into form-tweaks
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_dropdown.scss | 34 | ||||
-rw-r--r-- | scss/_navbar.scss | 20 | ||||
-rw-r--r-- | scss/_popover.scss | 146 | ||||
-rw-r--r-- | scss/_progress.scss | 1 | ||||
-rw-r--r-- | scss/_tooltip.scss | 87 | ||||
-rw-r--r-- | scss/_variables.scss | 15 | ||||
-rw-r--r-- | scss/mixins/_grid.scss | 6 |
7 files changed, 162 insertions, 147 deletions
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 3c5a5c66ed..d9e75b0aa7 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -23,6 +23,8 @@ } } +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-toggle { &::after { @@ -100,29 +102,14 @@ // Open state for the dropdown .show { - // Show the menu - > .dropdown-menu { - display: block; - } - // Remove the outline when :focus is triggered > a { outline: 0; } } -// Menu positioning -// -// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown -// menu with the parent. -.dropdown-menu-right { - right: 0; - left: auto; // Reset the default from `.dropdown-menu` -} - -.dropdown-menu-left { - right: auto; - left: 0; +.dropdown-menu.show { + display: block; } // Dropdown section headers @@ -134,16 +121,3 @@ color: $dropdown-header-color; white-space: nowrap; // as with > li > a } - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// -// Just add .dropup after the standard .dropdown class and you're set. - -.dropup { - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: $dropdown-margin-top; - } -} diff --git a/scss/_navbar.scss b/scss/_navbar.scss index c73fc01f63..59cc52d9a1 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -75,6 +75,12 @@ padding-right: 0; padding-left: 0; } + + .dropdown-menu { + position: static !important; + float: none; + transform: unset !important; + } } @@ -136,13 +142,6 @@ &#{$infix} { @include media-breakpoint-down($breakpoint) { - .navbar-nav { - .dropdown-menu { - position: static; - float: none; - } - } - > .container, > .container-fluid { padding-right: 0; @@ -159,7 +158,8 @@ flex-direction: row; .dropdown-menu { - position: absolute; + position: absolute !important; + top: 100% !important; } .nav-link { @@ -230,7 +230,7 @@ } .navbar-toggler-icon { - background-image: $navbar-light-toggler-bg; + background-image: $navbar-light-toggler-icon-bg; } .navbar-text { @@ -275,7 +275,7 @@ } .navbar-toggler-icon { - background-image: $navbar-inverse-toggler-bg; + background-image: $navbar-inverse-toggler-icon-bg; } .navbar-text { diff --git a/scss/_popover.scss b/scss/_popover.scss index c259916d76..e3a0d9d6d5 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -18,74 +18,105 @@ @include border-radius($border-radius-lg); @include box-shadow($popover-box-shadow); + // Arrows + // + // .arrow is outer, .arrow::after is inner + + .arrow { + position: absolute; + display: block; + width: $popover-arrow-width; + height: $popover-arrow-height; + } + + .arrow::before, + .arrow::after { + position: absolute; + display: block; + border-color: transparent; + border-style: solid; + } + + .arrow::before { + content: ""; + border-width: $popover-arrow-outer-width; + } + .arrow::after { + content: ""; + border-width: $popover-arrow-outer-width; + } // Popover directions - &.popover-top, - &.bs-tether-element-attached-bottom { - margin-top: -$popover-arrow-width; + &.bs-popover-top { + margin-bottom: $popover-arrow-width; - &::before, - &::after { - left: 50%; + .arrow { + bottom: 0; + } + + .arrow::before, + .arrow::after { border-bottom-width: 0; } - &::before { + .arrow::before { bottom: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { bottom: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; + margin-left: -($popover-arrow-outer-width - 5); border-top-color: $popover-arrow-color; } } - &.popover-right, - &.bs-tether-element-attached-left { + &.bs-popover-right { margin-left: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + left: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-left-width: 0; } - &::before { + .arrow::before { left: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-right-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { left: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-right-color: $popover-arrow-color; } } - &.popover-bottom, - &.bs-tether-element-attached-top { + &.bs-popover-bottom { margin-top: $popover-arrow-width; - &::before, - &::after { - left: 50%; + .arrow { + top: 0; + } + + .arrow::before, + .arrow::after { + margin-left: -($popover-arrow-width - 3); border-top-width: 0; } - &::before { + .arrow::before { top: -$popover-arrow-outer-width; - margin-left: -$popover-arrow-outer-width; border-bottom-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { top: -($popover-arrow-outer-width - 1); - margin-left: -$popover-arrow-width; border-bottom-color: $popover-arrow-color; } @@ -102,28 +133,43 @@ } } - &.popover-left, - &.bs-tether-element-attached-right { - margin-left: -$popover-arrow-width; + &.bs-popover-left { + margin-right: $popover-arrow-width; - &::before, - &::after { - top: 50%; + .arrow { + right: 0; + } + + .arrow::before, + .arrow::after { + margin-top: -($popover-arrow-outer-width - 3); border-right-width: 0; } - &::before { + .arrow::before { right: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; border-left-color: $popover-arrow-outer-color; } - &::after { + .arrow::after { right: -($popover-arrow-outer-width - 1); - margin-top: -($popover-arrow-outer-width - 1); border-left-color: $popover-arrow-color; } } + &.bs-popover-auto { + &[x-placement^="top"] { + @extend .bs-popover-top; + } + &[x-placement^="right"] { + @extend .bs-popover-right; + } + &[x-placement^="bottom"] { + @extend .bs-popover-bottom; + } + &[x-placement^="left"] { + @extend .bs-popover-left; + } + } } @@ -147,27 +193,3 @@ padding: $popover-content-padding-y $popover-content-padding-x; color: $popover-content-color; } - - -// Arrows -// -// .popover-arrow is outer, .popover-arrow::after is inner - -.popover::before, -.popover::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.popover::before { - content: ""; - border-width: $popover-arrow-outer-width; -} -.popover::after { - content: ""; - border-width: $popover-arrow-width; -} diff --git a/scss/_progress.scss b/scss/_progress.scss index 66571843cd..f7491a64b2 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -11,6 +11,7 @@ text-align: center; background-color: $progress-bg; @include border-radius($progress-border-radius); + @include box-shadow($progress-box-shadow); } .progress-bar { diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 24e198d464..fe97fbbbd0 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -3,6 +3,7 @@ position: absolute; z-index: $zindex-tooltip; display: block; + margin: $tooltip-margin; // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); @@ -13,62 +14,86 @@ &.show { opacity: $tooltip-opacity; } - &.tooltip-top, - &.bs-tether-element-attached-bottom { - padding: $tooltip-arrow-width 0; - margin-top: -$tooltip-margin; + .arrow { + position: absolute; + display: block; + width: $tooltip-arrow-width; + height: $tooltip-arrow-height; + } - .tooltip-inner::before { + &.bs-tooltip-top { + padding: $tooltip-arrow-width 0; + .arrow { bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width 0; border-top-color: $tooltip-arrow-color; } } - &.tooltip-right, - &.bs-tether-element-attached-left { + &.bs-tooltip-right { padding: 0 $tooltip-arrow-width; - margin-left: $tooltip-margin; - - .tooltip-inner::before { - top: 50%; + .arrow { left: 0; - margin-top: -$tooltip-arrow-width; + } + + .arrow::before { + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; border-right-color: $tooltip-arrow-color; } } - &.tooltip-bottom, - &.bs-tether-element-attached-top { + &.bs-tooltip-bottom { padding: $tooltip-arrow-width 0; - margin-top: $tooltip-margin; - - .tooltip-inner::before { + .arrow { top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; + } + + .arrow::before { + margin-left: -($tooltip-arrow-width - 2); content: ""; border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; border-bottom-color: $tooltip-arrow-color; } } - &.tooltip-left, - &.bs-tether-element-attached-right { + &.bs-tooltip-left { padding: 0 $tooltip-arrow-width; - margin-left: -$tooltip-margin; + .arrow { + right: 0; + } - .tooltip-inner::before { - top: 50%; + .arrow::before { right: 0; - margin-top: -$tooltip-arrow-width; + margin-top: -($tooltip-arrow-width - 2); content: ""; border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; border-left-color: $tooltip-arrow-color; } } + &.bs-tooltip-auto { + &[x-placement^="top"] { + @extend .bs-tooltip-top; + } + &[x-placement^="right"] { + @extend .bs-tooltip-right; + } + &[x-placement^="bottom"] { + @extend .bs-tooltip-bottom; + } + &[x-placement^="left"] { + @extend .bs-tooltip-left; + } + } + + .arrow::before { + position: absolute; + border-color: transparent; + border-style: solid; + } } // Wrapper for the tooltip content @@ -79,12 +104,4 @@ text-align: center; background-color: $tooltip-bg; @include border-radius($border-radius); - - &::before { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 3ab37f9f5d..fc82fca06b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -329,7 +329,6 @@ $table-head-color: $gray !default; $table-inverse-bg: $gray-dark !default; $table-inverse-bg-accent: rgba($white, .05) !default; $table-inverse-bg-hover: rgba($white, .075) !default; -$table-inverse-bg-active: $table-inverse-bg-hover !default; $table-inverse-border-color: lighten($gray-dark, 7.5%) !default; $table-inverse-color: $body-bg !default; @@ -574,11 +573,8 @@ $zindex-tooltip: 1070 !default; // Navs -$nav-item-margin: .2rem !default; -$nav-item-inline-spacer: 1rem !default; $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; -$nav-link-hover-bg: $gray-lighter !default; $nav-disabled-link-color: $gray-light !default; $nav-tabs-border-color: #ddd !default; @@ -588,8 +584,6 @@ $nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-active-link-color: $gray !default; $nav-tabs-active-link-bg: $body-bg !default; $nav-tabs-active-link-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; -$nav-tabs-justified-active-link-border-color: $body-bg !default; $nav-pills-border-radius: $border-radius !default; $nav-pills-active-link-color: $component-active-color !default; @@ -615,14 +609,14 @@ $navbar-inverse-color: rgba($white,.5) !default; $navbar-inverse-hover-color: rgba($white,.75) !default; $navbar-inverse-active-color: rgba($white,1) !default; $navbar-inverse-disabled-color: rgba($white,.25) !default; -$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-inverse-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-inverse-toggler-border-color: rgba($white,.1) !default; $navbar-light-color: rgba($black,.5) !default; $navbar-light-hover-color: rgba($black,.7) !default; $navbar-light-active-color: rgba($black,.9) !default; $navbar-light-disabled-color: rgba($black,.3) !default; -$navbar-light-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-light-toggler-border-color: rgba($black,.1) !default; // Pagination @@ -711,9 +705,11 @@ $tooltip-bg: $black !default; $tooltip-opacity: .9 !default; $tooltip-padding-y: 3px !default; $tooltip-padding-x: 8px !default; -$tooltip-margin: 3px !default; +$tooltip-margin: 0 !default; + $tooltip-arrow-width: 5px !default; +$tooltip-arrow-height: 5px !default; $tooltip-arrow-color: $tooltip-bg !default; @@ -736,6 +732,7 @@ $popover-content-padding-y: 9px !default; $popover-content-padding-x: 14px !default; $popover-arrow-width: 10px !default; +$popover-arrow-height: 5px !default; $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default; diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 87920e284f..b6d9805777 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -67,7 +67,11 @@ } @mixin make-col($size, $columns: $grid-columns) { - width: percentage($size / $columns); + flex: 0 0 percentage($size / $columns); + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($size / $columns); } @mixin make-col-offset($size, $columns: $grid-columns) { |