@fundamental-styles/theming-preview 0.24.0-rc.21 → 0.24.0-rc.25

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.24.0-rc.21
+ * Fundamental Library Styles v0.24.0-rc.25
  * 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)
  */
@@ -3658,6 +3658,134 @@
 .fd-action-bar--xl {
   padding: .5rem 3rem
 }
+.fd-action-sheet {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  padding: .25rem .5rem;
+  width: 100%
+}
+.fd-action-sheet::after,
+.fd-action-sheet::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-action-sheet__item {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  display: block;
+  width: 100%;
+  padding: .25rem 0
+}
+.fd-action-sheet__item::after,
+.fd-action-sheet__item::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-action-sheet__wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: none;
+  border-radius: var(--fdPopover_Border_Radius)
+}
+.fd-action-sheet__wrapper::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: var(--fdOverlay_Background_Opacity);
+  background-color: var(--sapBlockLayer_Background);
+  border-radius: var(--fdPopover_Border_Radius)
+}
+.fd-action-sheet__wrapper--active {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start
+}
+.fd-action-sheet__title {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  font-family: var(--sapFontHeaderFamily);
+  color: var(--sapGroup_TitleTextColor);
+  font-size: var(--sapFontHeader6Size);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  z-index: 1;
+  padding: 0 1rem .5rem 1rem;
+  color: var(--sapContent_ContrastTextColor)
+}
+.fd-action-sheet__title::after,
+.fd-action-sheet__title::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-action-sheet--compact {
+  padding: .1875rem .375rem
+}
+.fd-action-sheet--compact .fd-action-sheet__item {
+  padding: .1875rem 0
+}
+.fd-action-sheet--mobile {
+  background-color: var(--sapGroup_ContentBackground);
+  z-index: 1;
+  -webkit-box-shadow: var(--sapContent_Shadow1);
+  box-shadow: var(--sapContent_Shadow1);
+  width: calc(100% - var(--sapGroup_BorderWidth) * 2);
+  position: relative;
+  overflow: auto;
+  left: var(--sapGroup_BorderWidth);
+  right: auto;
+  border-radius: var(--fdPopover_Border_Radius)
+}
+.fd-action-sheet--mobile[dir=rtl],
+[dir=rtl] .fd-action-sheet--mobile {
+  right: var(--sapGroup_BorderWidth);
+  left: auto
+}
 /*!
 .fd-alert+(--information, --success, --warning, --error, --no-icon)
     .fd-alert__close
@@ -16390,6 +16518,253 @@ fd-carousel:focus {
     padding-right: 3rem
   }
 }
+.fd-illustrated-message {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  max-width: 30rem;
+  height: auto;
+  padding: 1rem;
+  margin-top: 5rem;
+  text-align: center
+}
+.fd-illustrated-message::after,
+.fd-illustrated-message::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-illustrated-message__illustration {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  height: 15rem;
+  width: 20rem
+}
+.fd-illustrated-message__illustration::after,
+.fd-illustrated-message__illustration::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-illustrated-message__figcaption {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%
+}
+.fd-illustrated-message__figcaption::after,
+.fd-illustrated-message__figcaption::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-illustrated-message__title {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 100%;
+  font-size: var(--sapFontHeader2Size);
+  font-weight: var(--sapFontHeaderWeight);
+  line-height: 1.3;
+  text-align: center;
+  color: var(--sapGroup_TitleTextColor);
+  margin-top: 2rem;
+  margin-bottom: .5rem
+}
+.fd-illustrated-message__title::after,
+.fd-illustrated-message__title::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-illustrated-message__text {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 100%;
+  font-size: var(--sapFontLargeSize);
+  font-weight: 400;
+  line-height: 1.4;
+  text-align: center;
+  color: var(--sapContent_LabelColor);
+  margin-bottom: 2rem
+}
+.fd-illustrated-message__text::after,
+.fd-illustrated-message__text::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-illustrated-message__actions {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 2rem;
+  width: 100%
+}
+.fd-illustrated-message__actions::after,
+.fd-illustrated-message__actions::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-illustrated-message__actions * {
+  margin: 0 .25rem
+}
+@media screen and (max-width:599px) {
+  .fd-illustrated-message {
+    max-width: 20rem
+  }
+  .fd-illustrated-message .fd-illustrated-message__illustration {
+    height: 10rem;
+    width: 10rem
+  }
+}
+.fd-illustrated-message--dialog {
+  margin-top: 0;
+  max-width: 100%
+}
+.fd-illustrated-message--dialog .fd-illustrated-message__illustration {
+  height: 10rem;
+  width: 10rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem
+}
+.fd-illustrated-message--dialog .fd-illustrated-message__title {
+  padding: 0;
+  margin: 0;
+  font-size: var(--sapFontHeader4Size);
+  max-width: 25rem;
+  margin-bottom: .25rem
+}
+.fd-illustrated-message--dialog .fd-illustrated-message__text {
+  font-size: var(--sapFontSize);
+  max-width: 25rem;
+  color: var(--sapTile_TextColor)
+}
+@media screen and (max-width:599px) {
+  .fd-illustrated-message--dialog .fd-illustrated-message__title {
+    max-width: 18rem
+  }
+  .fd-illustrated-message--dialog .fd-illustrated-message__text {
+    max-width: 18rem
+  }
+}
+.fd-illustrated-message--spot {
+  margin-top: 0;
+  max-width: 100%
+}
+.fd-illustrated-message--spot .fd-illustrated-message__illustration {
+  padding: 0;
+  margin: 0;
+  height: 8rem;
+  width: 8rem;
+  margin-top: .5rem;
+  margin-bottom: .5rem
+}
+.fd-illustrated-message--spot .fd-illustrated-message__title {
+  padding: 0;
+  margin: 0;
+  font-size: var(--sapFontHeader5Size);
+  line-height: 1.25;
+  margin-bottom: .25rem;
+  max-width: 25rem
+}
+.fd-illustrated-message--spot .fd-illustrated-message__text {
+  padding: 0;
+  margin: 0;
+  font-size: var(--sapFontSize);
+  color: var(--sapTile_TextColor);
+  margin-bottom: 1rem;
+  max-width: 25rem
+}
+.fd-illustrated-message--spot .fd-illustrated-message__actions {
+  padding: 0;
+  margin: 0;
+  margin-top: .5rem;
+  margin-bottom: 1rem
+}
+@media screen and (max-width:599px) {
+  .fd-illustrated-message--spot .fd-illustrated-message__title {
+    max-width: 18rem
+  }
+  .fd-illustrated-message--spot .fd-illustrated-message__text {
+    max-width: 18rem
+  }
+}
 .fd-info-label {
   font-size: var(--sapFontSize);
   line-height: var(--sapContent_LineHeight);
@@ -31824,6 +32199,41 @@ places the element far left of the screen. so it is not visible.
   padding-left: 3rem;
   padding-right: 3rem
 }
+.fd-scrollbar {
+  font-size: var(--sapFontSize);
+  line-height: var(--sapContent_LineHeight);
+  color: var(--sapTextColor);
+  font-family: var(--sapFontFamily);
+  font-weight: 400;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  overflow: auto;
+  scrollbar-color: var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)
+}
+.fd-scrollbar::after,
+.fd-scrollbar::before {
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+  font-size: inherit
+}
+.fd-scrollbar::-webkit-scrollbar {
+  width: var(--fdScrollbar_Dimension);
+  height: var(--fdScrollbar_Dimension)
+}
+.fd-scrollbar::-webkit-scrollbar-corner,
+.fd-scrollbar::-webkit-scrollbar-track {
+  background-color: var(--fdScrollbar_Track_Color)
+}
+.fd-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--fdScrollbar_Thumb_Color)
+}
+.fd-scrollbar::-webkit-scrollbar-thumb:active,
+.fd-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--fdScrollbar_Thumb_Hover_Color)
+}
 /*!
 .fd-section+(--full-bleed, --no-border)
     .fd-section__header

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.24.0-rc.21",
+    "version": "0.24.0-rc.25",
     "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.21"
+        "fundamental-styles": "0.24.0-rc.25"
     }
   }