@festo-ui/web-essentials 7.0.0-dev.384 → 7.0.0-dev.386

package/dist/css/festo-web-essentials.css

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v7.0.0-dev.384 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v7.0.0-dev.386 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */
@@ -18002,4 +18002,123 @@ input[type=search]::-webkit-search-cancel-button {
   }
 }
 
+.fwe-bottom-sheet-header {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.fwe-bottom-sheet-drag-handle-container {
+  width: 100%;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.fwe-bottom-sheet-drag-handle {
+  width: 32px;
+  height: 4px;
+  background-color: var(--fwe-hero-gray);
+  border-radius: 3px;
+  margin: 16px 0;
+}
+.fwe-bottom-sheet-toggle-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 16px;
+}
+.fwe-bottom-sheet-close-btn {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  padding: 0;
+  border: none;
+  min-width: 24px;
+  cursor: pointer;
+  background: var(--fwe-text);
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
+}
+.fwe-bottom-sheet-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: var(--fwe-z-index-modal-backdrop);
+  opacity: 0;
+  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.fwe-bottom-sheet-backdrop--visible {
+  opacity: 1;
+  right: 0;
+  bottom: 0;
+}
+.fwe-bottom-sheet-container {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  right: 50%;
+  background: var(--fwe-white);
+  box-shadow: 0px 1px 8px rgba(51, 51, 51, 0.2);
+  z-index: var(--fwe-z-index-modal);
+  border-radius: 12px 12px 0 0;
+  overflow: hidden;
+  opacity: 0;
+  max-width: 768px;
+  width: 100%;
+  transform: translateX(-50%) translateY(100%);
+  transition: height 0.3s ease-in-out, transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);
+}
+.fwe-bottom-sheet-container--open {
+  height: 12.5vh;
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+.fwe-bottom-sheet-container--open.fwe-bottom-sheet-container--expand-from-center {
+  height: 55vh;
+}
+.fwe-bottom-sheet-container--open.fwe-bottom-sheet-container--expand-from-center.fwe-bottom-sheet-container--expanded {
+  height: calc(100vh - 64px);
+}
+.fwe-bottom-sheet-container--open.fwe-bottom-sheet-container--closing {
+  transform: translateX(-50%) translateY(100%);
+}
+.fwe-bottom-sheet-container--expanded {
+  height: calc(100vh - 64px);
+}
+.fwe-bottom-sheet-container--with-backdrop {
+  box-shadow: none;
+}
+.fwe-bottom-sheet-content {
+  padding: 16px 32px;
+  height: calc(100% - 32px);
+  overflow-y: auto;
+}
+@-moz-document url-prefix() {
+  .fwe-bottom-sheet-content {
+    scrollbar-width: thin;
+    scrollbar-color: var(--fwe-control-scrollbar) transparent;
+  }
+}
+@media (pointer: fine) {
+  .fwe-bottom-sheet-content::-webkit-scrollbar {
+    width: 14px;
+  }
+  .fwe-bottom-sheet-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .fwe-bottom-sheet-content::-webkit-scrollbar-thumb {
+    overflow: visible;
+    background-color: var(--fwe-control-scrollbar);
+    border: 3px solid rgba(242, 243, 245, 0);
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border-radius: 8px;
+  }
+}
+
 /*# sourceMappingURL=festo-web-essentials.css.map */