From 7026c404486ba9de4381d148139dbd84bcc54afb Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 12 Aug 2021 12:50:47 -0700 Subject: [PATCH] fix(@clayui/css): Deprecate the Bootstrap 4 Carousel component. Enable them again by setting `$enable-bs4-deprecate: true;`. fix(@clayui/css): Carousel deprecate `$carousel-*` variables --- .../src/scss/components/_carousel.scss | 330 +++++++++--------- .../src/scss/variables/_carousel.scss | 45 +++ 2 files changed, 212 insertions(+), 163 deletions(-) diff --git a/packages/clay-css/src/scss/components/_carousel.scss b/packages/clay-css/src/scss/components/_carousel.scss index 84e259c861..dbaf263b5a 100644 --- a/packages/clay-css/src/scss/components/_carousel.scss +++ b/packages/clay-css/src/scss/components/_carousel.scss @@ -11,199 +11,203 @@ // 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right // is the upcoming slide in transition. -.carousel { - position: relative; -} +@if ($enable-bs4-deprecated) { + .carousel { + position: relative; + } -.carousel.pointer-event { - touch-action: pan-y; -} + .carousel.pointer-event { + touch-action: pan-y; + } -.carousel-inner { - overflow: hidden; - position: relative; - width: 100%; + .carousel-inner { + overflow: hidden; + position: relative; + width: 100%; - &::after { - clear: both; - content: ''; - display: block; + &::after { + clear: both; + content: ''; + display: block; + } } -} -.carousel-item { - backface-visibility: hidden; - display: none; - float: left; - margin-right: -100%; - position: relative; + .carousel-item { + backface-visibility: hidden; + display: none; + float: left; + margin-right: -100%; + position: relative; - @include transition($carousel-transition); + @include transition($carousel-transition); - width: 100%; -} + width: 100%; + } -.carousel-item.active, -.carousel-item-next, -.carousel-item-prev { - display: block; -} + .carousel-item.active, + .carousel-item-next, + .carousel-item-prev { + display: block; + } -.carousel-item-next:not(.carousel-item-left), -.active.carousel-item-right { - transform: translateX(100%); -} + .carousel-item-next:not(.carousel-item-left), + .active.carousel-item-right { + transform: translateX(100%); + } -.carousel-item-prev:not(.carousel-item-right), -.active.carousel-item-left { - transform: translateX(-100%); -} + .carousel-item-prev:not(.carousel-item-right), + .active.carousel-item-left { + transform: translateX(-100%); + } -// Alternate transitions + // Alternate transitions -.carousel-fade { - .carousel-item { - opacity: 0; - transform: none; - transition-property: opacity; - } + .carousel-fade { + .carousel-item { + opacity: 0; + transform: none; + transition-property: opacity; + } - .carousel-item.active, - .carousel-item-next.carousel-item-left, - .carousel-item-prev.carousel-item-right { - opacity: 1; - z-index: 1; - } + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + opacity: 1; + z-index: 1; + } - .active.carousel-item-left, - .active.carousel-item-right { - opacity: 0; + .active.carousel-item-left, + .active.carousel-item-right { + opacity: 0; - @include transition(opacity 0s $carousel-transition-duration); + @include transition(opacity 0s $carousel-transition-duration); - z-index: 0; + z-index: 0; + } } -} -// Left/right controls for nav + // Left/right controls for nav -.carousel-control-prev, -.carousel-control-next { - align-items: center; - bottom: 0; - color: $carousel-control-color; - display: flex; - justify-content: center; - opacity: $carousel-control-opacity; - position: absolute; - text-align: center; - top: 0; + .carousel-control-prev, + .carousel-control-next { + align-items: center; + bottom: 0; + color: $carousel-control-color; + display: flex; + justify-content: center; + opacity: $carousel-control-opacity; + position: absolute; + text-align: center; + top: 0; - @include transition($carousel-control-transition); + @include transition($carousel-control-transition); - width: $carousel-control-width; - z-index: 1; + width: $carousel-control-width; + z-index: 1; - &:hover, - &:focus { - color: $carousel-control-color; - opacity: $carousel-control-hover-opacity; - outline: 0; - text-decoration: none; + &:hover, + &:focus { + color: $carousel-control-color; + opacity: $carousel-control-hover-opacity; + outline: 0; + text-decoration: none; + } } -} -.carousel-control-prev { - @if $enable-gradients { - background-image: linear-gradient( - 90deg, - rgba($black, 0.25), - rgba($black, 0.001) - ); + .carousel-control-prev { + @if $enable-gradients { + background-image: linear-gradient( + 90deg, + rgba($black, 0.25), + rgba($black, 0.001) + ); + } + + left: 0; } - - left: 0; -} -.carousel-control-next { - @if $enable-gradients { - background-image: linear-gradient( - 270deg, - rgba($black, 0.25), - rgba($black, 0.001) - ); + .carousel-control-next { + @if $enable-gradients { + background-image: linear-gradient( + 270deg, + rgba($black, 0.25), + rgba($black, 0.001) + ); + } + + right: 0; } - right: 0; -} - -// Icons for within + // Icons for within -.carousel-control-prev-icon, -.carousel-control-next-icon { - background: no-repeat 50% / 100% 100%; - display: inline-block; - height: $carousel-control-icon-width; - width: $carousel-control-icon-width; -} + .carousel-control-prev-icon, + .carousel-control-next-icon { + background: no-repeat 50% / 100% 100%; + display: inline-block; + height: $carousel-control-icon-width; + width: $carousel-control-icon-width; + } -.carousel-control-prev-icon { - background-image: escape-svg($carousel-control-prev-icon-bg); -} + .carousel-control-prev-icon { + background-image: escape-svg($carousel-control-prev-icon-bg); + } -.carousel-control-next-icon { - background-image: escape-svg($carousel-control-next-icon-bg); -} + .carousel-control-next-icon { + 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 -// slide your carousel holds. - -.carousel-indicators { - bottom: 0; - display: flex; - justify-content: center; - left: 0; - list-style: none; - margin-left: $carousel-control-width; - margin-right: $carousel-control-width; - padding-left: 0; - position: absolute; - right: 0; - z-index: 15; - - li { - background-clip: padding-box; - background-color: $carousel-indicator-active-bg; - border-bottom: $carousel-indicator-hit-area-height solid transparent; - border-top: $carousel-indicator-hit-area-height solid transparent; - box-sizing: content-box; - cursor: pointer; - flex: 0 1 auto; - height: $carousel-indicator-height; - margin-left: $carousel-indicator-spacer; - margin-right: $carousel-indicator-spacer; - opacity: 0.5; - text-indent: -999px; - - @include transition($carousel-indicator-transition); - - width: $carousel-indicator-width; - } - - .active { - opacity: 1; + // Optional indicator pips + // Add an ordered list with the following class and add a list item for each + // slide your carousel holds. + + .carousel-indicators { + bottom: 0; + display: flex; + justify-content: center; + left: 0; + list-style: none; + margin-left: $carousel-control-width; + margin-right: $carousel-control-width; + padding-left: 0; + position: absolute; + right: 0; + z-index: 15; + + li { + background-clip: padding-box; + background-color: $carousel-indicator-active-bg; + border-bottom: $carousel-indicator-hit-area-height + solid + transparent; + border-top: $carousel-indicator-hit-area-height solid transparent; + box-sizing: content-box; + cursor: pointer; + flex: 0 1 auto; + height: $carousel-indicator-height; + margin-left: $carousel-indicator-spacer; + margin-right: $carousel-indicator-spacer; + opacity: 0.5; + text-indent: -999px; + + @include transition($carousel-indicator-transition); + + width: $carousel-indicator-width; + } + + .active { + opacity: 1; + } } -} -// Optional captions - -.carousel-caption { - position: absolute; - right: (100% - $carousel-caption-width) / 2; - bottom: 20px; - left: (100% - $carousel-caption-width) / 2; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: $carousel-caption-color; - text-align: center; + // Optional captions + + .carousel-caption { + position: absolute; + right: (100% - $carousel-caption-width) / 2; + bottom: 20px; + left: (100% - $carousel-caption-width) / 2; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: $carousel-caption-color; + text-align: center; + } } diff --git a/packages/clay-css/src/scss/variables/_carousel.scss b/packages/clay-css/src/scss/variables/_carousel.scss index 2d854945be..84ae5422f5 100644 --- a/packages/clay-css/src/scss/variables/_carousel.scss +++ b/packages/clay-css/src/scss/variables/_carousel.scss @@ -1,36 +1,81 @@ // Carousel Indicator +/// @deprecated as of v3.x with no replacement + $carousel-indicator-height: 3px !default; + +/// @deprecated as of v3.x with no replacement + $carousel-indicator-hit-area-height: 10px !default; + +/// @deprecated as of v3.x with no replacement + $carousel-indicator-spacer: 3px !default; + +/// @deprecated as of v3.x with no replacement + $carousel-indicator-transition: opacity 0.6s ease !default; + +/// @deprecated as of v3.x with no replacement + $carousel-indicator-width: 30px !default; +/// @deprecated as of v3.x with no replacement + $carousel-indicator-active-bg: $white !default; // Carousel Control +/// @deprecated as of v3.x with no replacement + $carousel-control-color: $white !default; + +/// @deprecated as of v3.x with no replacement + $carousel-control-opacity: 0.5 !default; + +/// @deprecated as of v3.x with no replacement + $carousel-control-transition: opacity 0.15s ease !default; + +/// @deprecated as of v3.x with no replacement + $carousel-control-width: 15% !default; +/// @deprecated as of v3.x with no replacement + $carousel-control-hover-opacity: 0.9 !default; +/// @deprecated as of v3.x with no replacement + $carousel-control-icon-width: 20px !default; +/// @deprecated as of v3.x with no replacement + $carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; + +/// @deprecated as of v3.x with no replacement + $carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; // Carousel Item +/// @deprecated as of v3.x with no replacement + $carousel-transition-duration: 0.6s !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +/// @deprecated as of v3.x with no replacement + $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Carousel Caption +/// @deprecated as of v3.x with no replacement + $carousel-caption-color: $white !default; + +/// @deprecated as of v3.x with no replacement + $carousel-caption-width: 70% !default;