diff options
author | Gaƫl Poupard <gael.poupard@orange.com> | 2020-06-26 17:06:20 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-12-04 08:52:03 +0300 |
commit | 9488978fb55286ba83e8193a871d1ff9815045b9 (patch) | |
tree | abb461d46722f107e54156709c88cf37ed9e24a6 /scss/_carousel.scss | |
parent | 71ecc3323fb60ea05456470d10d17b614fe6dc04 (diff) |
feat(RTL): implement RTL
Using RTLCSS directives, renaming things to use logical names and following best practices.
Diffstat (limited to 'scss/_carousel.scss')
-rw-r--r-- | scss/_carousel.scss | 35 |
1 files changed, 23 insertions, 12 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index ef77cbb618..d2e42bc10b 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -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 |