Skip to content

Commit

Permalink
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev
Browse files Browse the repository at this point in the history
  • Loading branch information
mdo committed Mar 18, 2017
2 parents ec8c251 + 6f42daf commit e1c561a
Show file tree
Hide file tree
Showing 16 changed files with 52 additions and 32 deletions.
33 changes: 25 additions & 8 deletions docs/utilities/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,6 @@ Easily realign text to components with text alignment classes.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
{% endexample %}

{% example html %}
<div class="card">
<div class="card-block text-nowrap">
Curabitur blandit tempus ardua ridiculus sed magna.
</div>
</div>
{% endexample %}

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

{% example html %}
Expand All @@ -40,6 +32,31 @@ For left, right, and center alignment, responsive classes are available that use
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{% endexample %}

## Text wrapping and overflow

Prevent text from wrapping with a `.text-nowrap` class.

{% example html %}
<div class="row">
<div class="col-1 text-nowrap">
Curabitur blandit tempus ardua ridiculus sed magna.
</div>
<div class="col-11">
<img data-src="holder.js/50x50" alt="An image to show the text doesn't wrap">
</div>
</div>
{% endexample %}

For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis.

{% example html %}
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
{% endexample %}

## Text transform

Transform text in components with text capitalization classes.
Expand Down
4 changes: 2 additions & 2 deletions scss/_custom-forms.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// scss-lint:disable PropertyCount
// scss-lint:disable PropertyCount, VendorPrefix

// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
Expand Down Expand Up @@ -229,7 +229,7 @@
@include box-shadow($custom-file-box-shadow);

@each $lang, $text in map-get($custom-file-text, placeholder) {
&:lang(#{$lang})::after {
&:lang(#{$lang}):empty::after {
content: $text;
}
}
Expand Down
2 changes: 1 addition & 1 deletion scss/_forms.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// scss-lint:disable QualifyingElement
// scss-lint:disable QualifyingElement, VendorPrefix

//
// Textual form controls
Expand Down
2 changes: 1 addition & 1 deletion scss/_reboot.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ html {
box-sizing: border-box; // 1
font-family: sans-serif; // 2
line-height: 1.15; // 3
-ms-text-size-adjust: 100%; // 4
-webkit-text-size-adjust: 100%; // 4
-ms-text-size-adjust: 100%; // 4
-ms-overflow-style: scrollbar; // 5
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
}
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_alert.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// Alerts

@mixin alert-variant($background, $border, $body-color) {
color: $body-color;
background-color: $background;
border-color: $border;
color: $body-color;

hr {
border-top-color: darken($border, 5%);
Expand Down
6 changes: 3 additions & 3 deletions scss/mixins/_border-radius.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@

@mixin border-top-radius($radius) {
@if $enable-rounded {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
}
}

@mixin border-right-radius($radius) {
@if $enable-rounded {
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
}

Expand All @@ -29,7 +29,7 @@

@mixin border-left-radius($radius) {
@if $enable-rounded {
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
}
2 changes: 1 addition & 1 deletion scss/mixins/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@

@mixin button-outline-variant($color, $color-hover: #fff) {
color: $color;
background-image: none;
background-color: transparent;
background-image: none;
border-color: $color;

@include hover {
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_clearfix.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
content: "";
}
}
2 changes: 1 addition & 1 deletion scss/mixins/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
// Set validation states also for addons
.input-group-addon {
color: $color;
border-color: $color;
background-color: lighten($color, 40%);
border-color: $color;
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_gradients.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
}

@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: linear-gradient($deg, $start-color, $end-color);
background-repeat: repeat-x;
}
@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@

@mixin make-container($gutters: $grid-gutter-widths) {
position: relative;
margin-left: auto;
margin-right: auto;
margin-left: auto;

@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
Expand Down
12 changes: 6 additions & 6 deletions scss/mixins/_hover.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,18 @@
// }
// }
// @else {
// scss-lint:disable Indentation
&:hover { @content }
// scss-lint:enable Indentation
// }
}


@mixin hover-focus {
@if $enable-hover-media-query {
&:focus { @content }
@include hover { @content }
}
@else {
} @else {
&:focus,
&:hover {
@content
Expand All @@ -32,8 +34,7 @@
@content
}
@include hover { @content }
}
@else {
} @else {
&,
&:focus,
&:hover {
Expand All @@ -49,8 +50,7 @@
@content
}
@include hover { @content }
}
@else {
} @else {
&:focus,
&:active,
&:hover {
Expand Down
2 changes: 2 additions & 0 deletions scss/mixins/_list-group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
background-color: $background;
}

//scss-lint:disable QualifyingElement
a.list-group-item-#{$state},
button.list-group-item-#{$state} {
color: $color;
Expand All @@ -21,4 +22,5 @@
border-color: $color;
}
}
// scss-lint:enable QualifyingElement
}
7 changes: 4 additions & 3 deletions scss/mixins/_reset-text.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
// scss-lint:disable DuplicateProperty
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or word-wrap.
font-style: normal;
font-weight: $font-weight-normal;
letter-spacing: normal;
line-break: auto;
line-height: $line-height-base;
text-align: left; // Fallback for where `start` is not supported
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
}
2 changes: 1 addition & 1 deletion scss/mixins/_resize.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Resize anything

@mixin resizable($direction) {
resize: $direction; // Options: horizontal, vertical, both
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
resize: $direction; // Options: horizontal, vertical, both
}
2 changes: 1 addition & 1 deletion scss/mixins/_text-truncate.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

0 comments on commit e1c561a

Please sign in to comment.