mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

feat(RTL): implement RTL

Browse Source 
Using RTLCSS directives, renaming things to use logical names and following best practices.
This commit is contained in:
Gaël Poupard
2020-06-26 17:06:20 +03:00
committed by XhmikosR
parent 71ecc3323f
commit 9488978fb5
37 changed files with 301 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_breadcrumb.scss
+1 -1
View File
@@ -18,7 +18,7 @@
float: left; // Suppress inline spacings and underlining of the separator
padding-right: $breadcrumb-item-padding-x;
color: $breadcrumb-divider-color;
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
}
}
scss/_button-group.scss
+4 -4
View File
@@ -43,7 +43,7 @@
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
@include border-end-radius(0);
}
// The left radius should be 0 if the button is:
@@ -53,7 +53,7 @@
> .btn:nth-child(n + 3),
> :not(.btn-check) + .btn,
> .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
@include border-start-radius(0);
}
}
@@ -75,11 +75,11 @@
&::after,
.dropup &::after,
.dropright &::after {
.dropend &::after {
margin-left: 0;
}
.dropleft &::before {
.dropstart &::before {
margin-right: 0;
}
}
scss/_card.scss
+3 -3
View File
@@ -69,7 +69,7 @@
}
+ .card-link {
margin-left: $card-spacer-x;
margin-left: $card-spacer-x #{"/* rtl:ignore */"};
}
}
@@ -181,7 +181,7 @@
// Handle rounded corners
@if $enable-rounded {
&:not(:last-child) {
@include border-right-radius(0);
@include border-end-radius(0);
.card-img-top,
.card-header {
@@ -196,7 +196,7 @@
}
&:not(:first-child) {
@include border-left-radius(0);
@include border-start-radius(0);
.card-img-top,
.card-header {
scss/_carousel.scss
+23 -12
View File
@@ -3,12 +3,12 @@
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
// we're preventing all actions instead
// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
// 2. The .carousel-item-start and .carousel-item-end is used to indicate where
// the active slide is heading.
// 3. .active.carousel-item is the current slide.
// 4. .active.carousel-item-left and .active.carousel-item-right is the current
// 4. .active.carousel-item-start and .active.carousel-item-end is the current
// slide in its in-transition state. Only one of these occurs at a time.
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
// is the upcoming slide in transition.
.carousel {
@@ -42,16 +42,19 @@
display: block;
}
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
transform: translateX(-100%);
}
/* rtl:end:ignore */
//
// Alternate transitions
@@ -65,14 +68,14 @@
}
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
z-index: 1;
opacity: 1;
}
.active.carousel-item-left,
.active.carousel-item-right {
.active.carousel-item-start,
.active.carousel-item-end {
z-index: 0;
opacity: 0;
@include transition(opacity 0s $carousel-transition-duration);
@@ -128,6 +131,15 @@
background-position: 50%;
background-size: 100% 100%;
}
/* rtl:options: {
"autoRename": true,
"stringMap":[ {
"name" : "prev-next",
"search" : "prev",
"replace" : "next"
} ]
} */
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg);
}
@@ -135,7 +147,6 @@
background-image: escape-svg($carousel-control-next-icon-bg);
}
// Optional indicator pips
//
// Add an ordered list with the following class and add a list item for each
scss/_dropdown.scss
+14 -12
View File
@@ -1,8 +1,8 @@
// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
.dropend,
.dropdown,
.dropleft {
.dropstart {
position: relative;
}
@@ -39,14 +39,14 @@
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-left {
right: auto;
left: 0;
.dropdown-menu#{$infix}-start {
right: auto #{"/* rtl:ignore */"};
left: 0 #{"/* rtl:ignore */"};
}
.dropdown-menu#{$infix}-right {
right: 0;
left: auto;
.dropdown-menu#{$infix}-end {
right: 0 #{"/* rtl:ignore */"};
left: auto #{"/* rtl:ignore */"};
}
}
}
@@ -67,7 +67,7 @@
}
}
.dropright {
.dropend {
.dropdown-menu {
top: 0;
right: auto;
@@ -77,14 +77,14 @@
}
.dropdown-toggle {
@include caret(right);
@include caret(end);
&::after {
vertical-align: 0;
}
}
}
.dropleft {
.dropstart {
.dropdown-menu {
top: 0;
right: 100%;
@@ -94,7 +94,7 @@
}
.dropdown-toggle {
@include caret(left);
@include caret(start);
&::before {
vertical-align: 0;
}
@@ -110,9 +110,11 @@
&[x-placement^="left"] {
right: auto;
bottom: auto;
left: auto;
}
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
height: 0;
scss/_list-group.scss
+4 -4
View File
@@ -99,13 +99,13 @@
> .list-group-item {
&:first-child {
@include border-bottom-left-radius($list-group-border-radius);
@include border-top-right-radius(0);
@include border-bottom-start-radius($list-group-border-radius);
@include border-top-end-radius(0);
}
&:last-child {
@include border-top-right-radius($list-group-border-radius);
@include border-bottom-left-radius(0);
@include border-top-end-radius($list-group-border-radius);
@include border-bottom-start-radius(0);
}
&.active {
scss/_navbar.scss
+1 -1
View File
@@ -56,7 +56,7 @@
.navbar-brand {
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-brand-margin-right;
margin-right: $navbar-brand-margin-end;
@include font-size($navbar-brand-font-size);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
scss/_pagination.scss
+1 -1
View File
@@ -31,7 +31,7 @@
.page-item {
&:not(:first-child) .page-link {
margin-left: $pagination-margin-left;
margin-left: $pagination-margin-start;
}
&.active .page-link {
scss/_popover.scss
+21 -22
View File
@@ -1,7 +1,7 @@
.popover {
position: absolute;
top: 0;
left: 0;
left: 0 #{"/* rtl:ignore */"};
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
@@ -55,25 +55,25 @@
}
}
.bs-popover-right {
margin-left: $popover-arrow-height;
.bs-popover-end {
margin-left: $popover-arrow-height #{"/* rtl:ignore */"};
> .popover-arrow {
left: subtract(-$popover-arrow-height, $popover-border-width);
left: subtract(-$popover-arrow-height, $popover-border-width) #{"/* rtl:ignore */"};
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
left: 0;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-outer-color;
left: 0 #{"/* rtl:ignore */"};
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0 #{"/* rtl:ignore */"};
border-right-color: $popover-arrow-outer-color #{"/* rtl:ignore */"};
}
&::after {
left: $popover-border-width;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-right-color: $popover-arrow-color;
left: $popover-border-width #{"/* rtl:ignore */"};
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0 #{"/* rtl:ignore */"};
border-right-color: $popover-arrow-color #{"/* rtl:ignore */"};
}
}
}
@@ -110,25 +110,25 @@
}
}
.bs-popover-left {
margin-right: $popover-arrow-height;
.bs-popover-start {
margin-right: $popover-arrow-height #{"/* rtl:ignore */"};
> .popover-arrow {
right: subtract(-$popover-arrow-height, $popover-border-width);
right: subtract(-$popover-arrow-height, $popover-border-width) #{"/* rtl:ignore */"};
width: $popover-arrow-height;
height: $popover-arrow-width;
margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
&::before {
right: 0;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
right: 0 #{"/* rtl:ignore */"};
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height #{"/* rtl:ignore */"};
border-left-color: $popover-arrow-outer-color #{"/* rtl:ignore */"};
}
&::after {
right: $popover-border-width;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-left-color: $popover-arrow-color;
right: $popover-border-width #{"/* rtl:ignore */"};
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height #{"/* rtl:ignore */"};
border-left-color: $popover-arrow-color #{"/* rtl:ignore */"};
}
}
}
@@ -138,17 +138,16 @@
@extend .bs-popover-top;
}
&[x-placement^="right"] {
@extend .bs-popover-right;
@extend .bs-popover-end;
}
&[x-placement^="bottom"] {
@extend .bs-popover-bottom;
}
&[x-placement^="left"] {
@extend .bs-popover-left;
@extend .bs-popover-start;
}
}
// Offset the popover to account for the popover arrow
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
scss/_reboot.scss
+16
View File
@@ -290,6 +290,8 @@ kbd,
samp {
font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
direction: ltr #{"/* rtl:ignore */"};
unicode-bidi: bidi-override;
}
// 1. Remove browser default top margin
@@ -551,6 +553,20 @@ legend {
-webkit-appearance: textfield; // 2
}
// 1. A few input types should stay LTR
// See https://rtlstyling.com/posts/rtl-styling#form-inputs
// 2. RTL only output
// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}
*/
// Remove the inner padding in Chrome and Safari on macOS.
::-webkit-search-decoration {
scss/_spinners.scss
+1 -1
View File
@@ -3,7 +3,7 @@
//
@keyframes spinner-border {
to { transform: rotate(360deg); }
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
.spinner-border {
scss/_tooltip.scss
+12 -12
View File
@@ -43,18 +43,18 @@
}
}
.bs-tooltip-right {
.bs-tooltip-end {
padding: 0 $tooltip-arrow-height;
.tooltip-arrow {
left: 0;
left: 0 #{"/* rtl:ignore */"};
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
&::before {
right: 0;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-right-color: $tooltip-arrow-color;
right: 0 #{"/* rtl:ignore */"};
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0 #{"/* rtl:ignore */"};
border-right-color: $tooltip-arrow-color #{"/* rtl:ignore */"};
}
}
}
@@ -73,18 +73,18 @@
}
}
.bs-tooltip-left {
.bs-tooltip-start {
padding: 0 $tooltip-arrow-height;
.tooltip-arrow {
right: 0;
right: 0 #{"/* rtl:ignore */"};
width: $tooltip-arrow-height;
height: $tooltip-arrow-width;
&::before {
left: 0;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
left: 0 #{"/* rtl:ignore */"};
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height #{"/* rtl:ignore */"};
border-left-color: $tooltip-arrow-color #{"/* rtl:ignore */"};
}
}
}
@@ -94,13 +94,13 @@
@extend .bs-tooltip-top;
}
&[x-placement^="right"] {
@extend .bs-tooltip-right;
@extend .bs-tooltip-end;
}
&[x-placement^="bottom"] {
@extend .bs-tooltip-bottom;
}
&[x-placement^="left"] {
@extend .bs-tooltip-left;
@extend .bs-tooltip-start;
}
}
scss/_utilities.scss
+36 -23
View File
@@ -12,7 +12,11 @@ $utilities: map-merge(
"float": (
responsive: true,
property: float,
values: left right none
values: (
start: left,
end: right,
none: none,
)
),
"overflow": (
property: overflow,
@@ -47,12 +51,14 @@ $utilities: map-merge(
property: bottom,
values: $position-values
),
"left": (
"start": (
property: left,
class: start,
values: $position-values
),
"right": (
"end": (
property: right,
class: end,
values: $position-values
),
"translate-middle": (
@@ -76,8 +82,9 @@ $utilities: map-merge(
0: 0,
)
),
"border-right": (
"border-end": (
property: border-right,
class: border-end,
values: (
null: $border-width solid $border-color,
0: 0,
@@ -90,8 +97,9 @@ $utilities: map-merge(
0: 0,
)
),
"border-left": (
"border-start": (
property: border-left,
class: border-start,
values: (
null: $border-width solid $border-color,
0: 0,
@@ -288,10 +296,10 @@ $utilities: map-merge(
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-right": (
"margin-end": (
responsive: true,
property: margin-right,
class: mr,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
@@ -300,10 +308,10 @@ $utilities: map-merge(
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-left": (
"margin-start": (
responsive: true,
property: margin-left,
class: ml,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
@@ -331,10 +339,10 @@ $utilities: map-merge(
class: mt,
values: $negative-spacers
),
"negative-margin-right": (
"negative-margin-end": (
responsive: true,
property: margin-right,
class: mr,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
@@ -343,10 +351,10 @@ $utilities: map-merge(
class: mb,
values: $negative-spacers
),
"negative-margin-left": (
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ml,
class: ms,
values: $negative-spacers
),
// Padding utilities
@@ -374,10 +382,10 @@ $utilities: map-merge(
class: pt,
values: $spacers
),
"padding-right": (
"padding-end": (
responsive: true,
property: padding-right,
class: pr,
class: pe,
values: $spacers
),
"padding-bottom": (
@@ -386,10 +394,10 @@ $utilities: map-merge(
class: pb,
values: $spacers
),
"padding-left": (
"padding-start": (
responsive: true,
property: padding-left,
class: pl,
class: ps,
values: $spacers
),
// Text
@@ -424,7 +432,11 @@ $utilities: map-merge(
responsive: true,
property: text-align,
class: text,
values: left right center
values: (
start: left,
end: right,
center: center,
)
),
"color": (
property: color,
@@ -483,7 +495,8 @@ $utilities: map-merge(
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word)
values: (break: break-word),
rtl: false
),
"font-family": (
property: font-family,
@@ -517,9 +530,9 @@ $utilities: map-merge(
class: rounded-top,
values: (null: $border-radius)
),
"rounded-right": (
"rounded-end": (
property: border-top-right-radius border-bottom-right-radius,
class: rounded-right,
class: rounded-end,
values: (null: $border-radius)
),
"rounded-bottom": (
@@ -527,9 +540,9 @@ $utilities: map-merge(
class: rounded-bottom,
values: (null: $border-radius)
),
"rounded-left": (
"rounded-start": (
property: border-bottom-left-radius border-top-left-radius,
class: rounded-left,
class: rounded-start,
values: (null: $border-radius)
),
"visibility": (
scss/_variables.scss
+9 -8
View File
@@ -679,7 +679,7 @@ $input-transition: border-color .15s ease-in-out, box-shado
$form-check-input-width: 1em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-left: $form-check-input-width + .5em !default;
$form-check-padding-start: $form-check-input-width + .5em !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
@@ -711,7 +711,7 @@ $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-switch-color: rgba(0, 0, 0, .25) !default;
$form-switch-width: 2em !default;
$form-switch-padding-left: $form-switch-width + .5em !default;
$form-switch-padding-start: $form-switch-width + .5em !default;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-border-radius: $form-switch-width !default;
@@ -722,7 +722,7 @@ $form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default;
$form-check-inline-margin-right: 1rem !default;
$form-check-inline-margin-end: 1rem !default;
$input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
@@ -748,9 +748,9 @@ $form-select-bg-size: 16px 12px !default; // In pixels because ima
$form-select-indicator-color: $gray-800 !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
$form-select-feedback-icon-padding-end: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
$form-select-border-width: $input-border-width !default;
$form-select-border-color: $input-border-color !default;
@@ -879,7 +879,7 @@ $navbar-brand-font-size: $font-size-lg !default;
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-brand-margin-right: 1rem !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
@@ -969,7 +969,7 @@ $pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-radius: $border-radius !default;
$pagination-margin-left: -$pagination-border-width !default;
$pagination-margin-start: -$pagination-border-width !default;
$pagination-border-color: $gray-300 !default;
$pagination-focus-color: $link-hover-color !default;
@@ -1253,6 +1253,7 @@ $breadcrumb-bg: null !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
// Carousel
scss/bootstrap-grid.scss
Vendored
+6 -6
View File
@@ -42,23 +42,23 @@ $utilities: map-get-multiple(
"margin-x",
"margin-y",
"margin-top",
"margin-right",
"margin-end",
"margin-bottom",
"margin-left",
"margin-start",
"negative-margin",
"negative-margin-x",
"negative-margin-y",
"negative-margin-top",
"negative-margin-right",
"negative-margin-end",
"negative-margin-bottom",
"negative-margin-left",
"negative-margin-start",
"padding",
"padding-x",
"padding-y",
"padding-top",
"padding-right",
"padding-end",
"padding-bottom",
"padding-left",
"padding-start",
)
);
scss/forms/_form-check.scss
+5 -5
View File
@@ -5,12 +5,12 @@
.form-check {
display: block;
min-height: $form-check-min-height;
padding-left: $form-check-padding-left;
padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;
.form-check-input {
float: left;
margin-left: $form-check-padding-left * -1;
margin-left: $form-check-padding-start * -1;
}
}
@@ -105,11 +105,11 @@
//
.form-switch {
padding-left: $form-switch-padding-left;
padding-left: $form-switch-padding-start;
.form-check-input {
width: $form-switch-width;
margin-left: $form-switch-padding-left * -1;
margin-left: $form-switch-padding-start * -1;
background-image: escape-svg($form-switch-bg-image);
background-position: left center;
@include border-radius($form-switch-border-radius);
@@ -132,7 +132,7 @@
.form-check-inline {
display: inline-block;
margin-right: $form-check-inline-margin-right;
margin-right: $form-check-inline-margin-end;
}
.btn-check {
scss/forms/_input-group.scss
+3 -3
View File
@@ -98,14 +98,14 @@
&:not(.has-validation) {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
@include border-right-radius(0);
@include border-end-radius(0);
}
}
&.has-validation {
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 4) {
@include border-right-radius(0);
@include border-end-radius(0);
}
}
@@ -116,6 +116,6 @@
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-left: -$input-border-width;
@include border-left-radius(0);
@include border-start-radius(0);
}
}
scss/mixins/_border-radius.scss
+6 -6
View File
@@ -30,7 +30,7 @@
}
}
@mixin border-right-radius($radius: $border-radius) {
@mixin border-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
border-bottom-right-radius: valid-radius($radius);
@@ -44,32 +44,32 @@
}
}
@mixin border-left-radius($radius: $border-radius) {
@mixin border-start-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius);
}
}
@mixin border-top-left-radius($radius: $border-radius) {
@mixin border-top-start-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
}
}
@mixin border-top-right-radius($radius: $border-radius) {
@mixin border-top-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-right-radius($radius: $border-radius) {
@mixin border-bottom-end-radius($radius: $border-radius) {
@if $enable-rounded {
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-left-radius($radius: $border-radius) {
@mixin border-bottom-start-radius($radius: $border-radius) {
@if $enable-rounded {
border-bottom-left-radius: valid-radius($radius);
}
scss/mixins/_caret.scss
+6 -6
View File
@@ -12,14 +12,14 @@
border-left: $caret-width solid transparent;
}
@mixin caret-right {
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-left {
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
@@ -36,12 +36,12 @@
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == right {
@include caret-right();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == left {
@if $direction == start {
&::after {
display: none;
}
@@ -51,7 +51,7 @@
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-left();
@include caret-start();
}
}
scss/mixins/_forms.scss
+1 -1
View File
@@ -79,7 +79,7 @@
border-color: $color;
@if $enable-validation-icons {
padding-right: $form-select-feedback-icon-padding-right;
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
scss/mixins/_pagination.scss
+3 -3
View File
@@ -7,16 +7,16 @@
}
.page-item {
@if $pagination-margin-left == (-$pagination-border-width) {
@if $pagination-margin-start == (-$pagination-border-width) {
&:first-child {
.page-link {
@include border-left-radius($border-radius);
@include border-start-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
@include border-end-radius($border-radius);
}
}
} @else {
scss/mixins/_utilities.scss
+8
View File
@@ -41,7 +41,12 @@
}
}
$is-rtl: map-get($utility, rtl);
@if $value != null {
@if $is-rtl == false {
/* rtl:begin:remove */
}
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
#{$property}: $value if($enable-important-utilities, !important, null);
@@ -55,6 +60,9 @@
}
}
}
@if $is-rtl == false {
/* rtl:end:remove */
}
}
}
}