ab-ui-library 1.3.1 → 1.3.2

package/assets/styles/styles.css

@@ -3747,7 +3747,7 @@ body {
   --ds-button-icon-bg-hover:var(--ds-color-bg-container-light);
   --ds-button-icon-bg-disabled:transparent;
   --ds-button-icon-bg-pressed:var(--ds-color-bg-container-dark);
-  --ds-button-icon-bg-focused:var(--ds-color-bg-container-light);
+  --ds-button-icon-bg-focused:var(--ds-color-bg-container);
   --ds-button-icon-border-radius:var(--ds-border-radius-md);
   --ds-button-icon-shadow-focused:var(--ds-shadow-brand-2);
   --ds-button-icon-transition:background-color .3s linear,color .3s linear,border-color .3s linear;
@@ -8022,25 +8022,55 @@ body {
   --ds-side-sheet-footer-height:88px;
   --ds-side-sheet-footer-border:1px solid var(--ds-color-border-quintary);
   --ds-side-sheet-footer-padding:var(--ds-space-8) var(--ds-space-24);
+}
+
+.side-sheet--with-overlay {
   background-color: var(--ds-side-sheet-overlay-bg);
+}
+
+.side-sheet:not(.side-sheet--positioned) {
+  height: 100vh;
+  width: fit-content;
+}
+
+.side-sheet:not(.side-sheet--positioned) .side-sheet__container {
+  border-left: var(--ds-side-sheet-border);
+  height: 100%;
+}
+
+.side-sheet--positioned {
   bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
+  width: 100%;
   z-index: 999;
 }
 
+.side-sheet--positioned .side-sheet__container {
+  border: var(--ds-side-sheet-border);
+  border-radius: var(--ds-side-sheet-border-radius);
+  bottom: var(--ds-space-16);
+  box-shadow: var(--ds-side-sheet-shadow);
+  position: absolute;
+  top: var(--ds-space-16);
+}
+
+.side-sheet--positioned .side-sheet__container--right {
+  margin-right: var(--ds-space-16);
+}
+
+.side-sheet--positioned .side-sheet__container--left {
+  margin-left: var(--ds-space-16);
+}
+
 .side-sheet__container {
   -webkit-box-direction: normal;
   -webkit-box-orient: vertical;
   -moz-box-direction: normal;
   -moz-box-orient: vertical;
   background-color: var(--ds-side-sheet-bg);
-  border: var(--ds-side-sheet-border);
-  border-radius: var(--ds-side-sheet-border-radius);
-  bottom: var(--ds-space-16);
-  box-shadow: var(--ds-side-sheet-shadow);
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -8049,8 +8079,7 @@ body {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  position: absolute;
-  top: var(--ds-space-16);
+  position: relative;
   width: 100%;
 }
 
@@ -8062,14 +8091,6 @@ body {
   max-width: var(--ds-side-sheet-width-lg);
 }
 
-.side-sheet__container--right {
-  margin-right: var(--ds-space-16);
-}
-
-.side-sheet__container--left {
-  margin-left: var(--ds-space-16);
-}
-
 .side-sheet__header {
   position: relative;
 }