mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Merge branch 'v4-dev' into form-tweaks

Browse Source
This commit is contained in:
Mark Otto
2017-05-26 21:22:08 -07:00
parent e0e1e849e6 f2829dd6ea
commit 04724939a3
94 changed files with 3824 additions and 1675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
scss/_dropdown.scss
View File

@@ -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;
}
}

20
scss/_navbar.scss
View File

@@ -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 {

146
scss/_popover.scss
View File

@@ -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;
}

1
scss/_progress.scss
View File

@@ -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 {

89
scss/_tooltip.scss
View File

@@ -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;
.tooltip-inner::before {
top: 50%;
.arrow {
right: 0;
margin-top: -$tooltip-arrow-width;
}
.arrow::before {
right: 0;
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;
}
}

15
scss/_variables.scss
View File

@@ -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;

6
scss/mixins/_grid.scss
View File

@@ -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) {