@fundamental-styles/theming-preview 0.24.0-rc.71 → 0.24.0-rc.72

package/fundamental-styles.css

@@ -1,7 +1,7 @@
 
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.71
+ * Fundamental Library Styles v0.24.0-rc.72
  * Copyright (c) 2022 SAP SE or an SAP affiliate company.
  * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
  */
@@ -8453,11 +8453,6 @@
 /* stylelint-enable */
 /* Fully expanded pseudo element. Requires parent to have specified position */
 /* Fully expanded pseudo element. Requires parent to have specified position */
-/* Fully expanded pseudo element. Requires parent to have specified position */
-fd-carousel:focus, fd-carousel.is-focus {
-  z-index: 5;
-  outline: 0.0625rem var(--sapContent_FocusStyle);
-}
 .fd-carousel {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -8477,9 +8472,9 @@ fd-carousel:focus, fd-carousel.is-focus {
       -ms-flex-direction: column;
           flex-direction: column;
   width: 100%;
-  min-width: 11rem;
-  max-width: 100%;
+  min-width: 15.5rem;
   height: 100%;
+  max-width: 100%;
 }
 .fd-carousel::before, .fd-carousel::after {
   -webkit-box-sizing: inherit;
@@ -8489,7 +8484,11 @@ fd-carousel:focus, fd-carousel.is-focus {
 .fd-carousel:hover .fd-carousel__content .fd-carousel__button, .fd-carousel.is-hover .fd-carousel__content .fd-carousel__button {
   display: block;
 }
-.fd-carousel__content {
+.fd-carousel:focus, .fd-carousel.is-focus {
+  z-index: 5;
+  outline: 0.0625rem var(--sapContent_FocusStyle);
+}
+.fd-carousel .fd-carousel__content {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
   color: var(--sapTextColor);
@@ -8500,19 +8499,16 @@ fd-carousel:focus, fd-carousel.is-focus {
   padding: 0;
   margin: 0;
   border: 0;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-  width: 100%;
-  background: var(--sapBackgroundColor);
+  background: var(--fdCarousel_Content_Background);
   position: relative;
+  overflow: hidden;
 }
-.fd-carousel__content::before, .fd-carousel__content::after {
+.fd-carousel .fd-carousel__content::before, .fd-carousel .fd-carousel__content::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-carousel__content .fd-carousel__button.fd-button {
+.fd-carousel .fd-carousel__content .fd-carousel__button {
   -webkit-box-shadow: var(--sapContent_Shadow1);
           box-shadow: var(--sapContent_Shadow1);
   position: absolute;
@@ -8522,24 +8518,21 @@ fd-carousel:focus, fd-carousel.is-focus {
           transform: translateY(-50%);
   display: none;
 }
-.fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--left {
+.fd-carousel .fd-carousel__content .fd-carousel__button--left {
   left: 0.5rem;
 }
-[dir=rtl] .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--left, .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--left[dir=rtl] {
-  left: initial;
+[dir=rtl] .fd-carousel .fd-carousel__content .fd-carousel__button--left, .fd-carousel .fd-carousel__content .fd-carousel__button--left[dir=rtl] {
+  left: auto;
   right: 0.5rem;
 }
-.fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--right {
+.fd-carousel .fd-carousel__content .fd-carousel__button--right {
   right: 0.5rem;
 }
-[dir=rtl] .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--right, .fd-carousel__content .fd-carousel__button.fd-button.fd-carousel__button--right[dir=rtl] {
-  right: initial;
+[dir=rtl] .fd-carousel .fd-carousel__content .fd-carousel__button--right, .fd-carousel .fd-carousel__content .fd-carousel__button--right[dir=rtl] {
+  right: auto;
   left: 0.5rem;
 }
-.fd-carousel__content--display {
-  overflow: hidden;
-}
-.fd-carousel__content--horizontal {
+.fd-carousel .fd-carousel__content--horizontal .fd-carousel__slides {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8547,6 +8540,29 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
+  width: 100%;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  -ms-touch-action: pan-y;
+      touch-action: pan-y;
+}
+.fd-carousel__slides {
+  min-height: -webkit-fit-content;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+  -ms-touch-action: pan-x;
+      touch-action: pan-x;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-user-drag: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.fd-carousel__slides-wrapper {
+  overflow: hidden;
+  margin: 0 auto;
 }
 .fd-carousel__item {
   font-size: var(--sapFontSize);
@@ -8600,13 +8616,11 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 100%;
-  height: 100%;
   min-height: 2.75rem;
   max-height: 3.5rem;
-  background: var(--sapPageFooter_Background);
   padding: 0.375rem 0.5rem;
-  border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+  background: var(--sapPageFooter_Background);
+  border-top: var(--fdCarousel_Pagination_Border);
 }
 .fd-carousel__page-indicator-container::before, .fd-carousel__page-indicator-container::after {
   -webkit-box-sizing: inherit;
@@ -8615,7 +8629,7 @@ fd-carousel:focus, fd-carousel.is-focus {
 }
 .fd-carousel__page-indicator-container:first-child {
   border-top: none;
-  border-bottom: 0.0625rem solid var(--sapPageFooter_BorderColor);
+  border-bottom: var(--fdCarousel_Pagination_Border);
 }
 .fd-carousel__page-indicators {
   font-size: var(--sapFontSize);
@@ -8637,10 +8651,10 @@ fd-carousel:focus, fd-carousel.is-focus {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  min-width: 9rem;
+  padding: 0.5rem;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  min-width: 7rem;
-  padding: 0.5rem 0;
 }
 .fd-carousel__page-indicators::before, .fd-carousel__page-indicators::after {
   -webkit-box-sizing: inherit;
@@ -8663,7 +8677,7 @@ fd-carousel:focus, fd-carousel.is-focus {
   width: var(--fdCarousel_Dot_Size);
   height: var(--fdCarousel_Dot_Size);
   border-radius: 50%;
-  background-color: var(--sapContent_NonInteractiveIconColor);
+  background-color: var(--fdCarousel_Dot_Background);
   border: var(--fdCarousel_Dot_Border);
 }
 .fd-carousel__page-indicator::before, .fd-carousel__page-indicator::after {
@@ -8675,7 +8689,8 @@ fd-carousel:focus, fd-carousel.is-focus {
   margin: 0 0.25rem;
   width: 0.5rem;
   height: 0.5rem;
-  background-color: var(--sapSelectedColor);
+  background-color: var(--fdCarousel_Dot_Selected_Background);
+  border: var(--fdCarousel_Dot_Selected_Border);
 }
 .fd-carousel__text {
   font-size: var(--sapFontSize);
@@ -8699,7 +8714,7 @@ fd-carousel:focus, fd-carousel.is-focus {
           box-sizing: inherit;
   font-size: inherit;
 }
-.fd-carousel__button.fd-button {
+.fd-carousel .fd-carousel__button {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8717,37 +8732,24 @@ fd-carousel:focus, fd-carousel.is-focus {
   max-height: 2.125rem;
   border-radius: 50%;
   padding: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
   margin: 0.25rem;
 }
-.fd-carousel__button.fd-button::before {
+.fd-carousel .fd-carousel__button::before {
   left: -0.25rem;
   right: -0.25rem;
-  height: 2.625rem;
-  width: 2.625rem;
+  bottom: -0.25rem;
+  top: -0.25rem;
+  width: auto;
 }
-[dir=rtl] .fd-carousel__button.fd-button > [class*=sap-icon], .fd-carousel__button.fd-button[dir=rtl] > [class*=sap-icon] {
+[dir=rtl] .fd-carousel .fd-carousel__button > [class*=sap-icon], .fd-carousel .fd-carousel__button[dir=rtl] > [class*=sap-icon] {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
-.fd-carousel__button.fd-button:focus, .fd-carousel__button.fd-button.is-focus {
-  z-index: 5;
-  outline-offset: 0.0625rem;
-}
-.fd-carousel__button.fd-button:hover, .fd-carousel__button.fd-button.is-hover {
+.fd-carousel .fd-carousel__button:hover, .fd-carousel .fd-carousel__button.is-hover {
   -webkit-box-shadow: var(--sapContent_Shadow1);
           box-shadow: var(--sapContent_Shadow1);
 }
-.fd-carousel__button.fd-button:active, .fd-carousel__button.fd-button.is-active {
-  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-  outline-offset: -0.1875rem;
-  outline-offset: 0.0625rem;
-}
-.fd-carousel__button.fd-button:active.fd-button--toggled, .fd-carousel__button.fd-button:active.is-selected, .fd-carousel__button.fd-button.is-active.fd-button--toggled, .fd-carousel__button.fd-button.is-active.is-selected {
-  outline-color: var(--fdButton_Outline_Contrast);
-}
-.fd-carousel--no-navigation .fd-carousel__button.fd-button {
+.fd-carousel--no-navigation .fd-carousel__button {
   display: none;
 }
 .fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button, .fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button {
@@ -22547,8 +22549,6 @@ fd-carousel:focus, fd-carousel.is-focus {
       -ms-flex-align: center;
           align-items: center;
   padding: 1rem;
-  -webkit-transform: translateY(-1rem);
-          transform: translateY(-1rem);
   background: var(--fdMessage_Page_Container_Background);
   border-radius: var(--fdMessage_Page_Container_Corner_Radius);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.24.0-rc.71",
+    "version": "0.24.0-rc.72",
     "license": "Apache-2.0",
     "homepage": "https://sap.github.io/fundamental-styles/",
     "description": "Fundamental Library Styles - Theming Package Preview",
@@ -9,7 +9,7 @@
       "url": "https://github.com/SAP/fundamental-styles"
     },
     "dependencies": {
-        "fundamental-styles": "0.24.0-rc.71"
+        "fundamental-styles": "0.24.0-rc.72"
     }
   }