@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/collection/components/swirl-app-layout/swirl-app-layout.css

@@ -0,0 +1,740 @@
+:host {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.app-layout {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.app-layout__grid {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: 100%;
+  grid-template-rows: 3.5625rem 1fr;
+  grid-template-areas:
+    "body"
+    "body";
+}
+
+.app-layout:not(.app-layout--has-navigation) .app-layout__header,
+  .app-layout:not(.app-layout--has-navigation) .app-layout__navigation {
+    display: none;
+  }
+
+.app-layout:not(.app-layout--has-sidebar) .app-layout__sidebar {
+    display: none;
+  }
+
+@media (max-width: 767px) {
+    .app-layout:not(.app-layout--mobile-view-body) .app-layout__body {
+      display: none;
+    }
+  }
+
+@media (max-width: 767px) {
+    .app-layout:not(.app-layout--mobile-view-sidebar) .app-layout__sidebar {
+      display: none;
+    }
+  }
+
+.app-layout:not(.app-layout--has-app-bar-mobile-menu-button) .app-layout__app-bar-mobile-menu-button {
+    display: none;
+  }
+
+.app-layout--has-navigation .app-layout__grid {
+    grid-template-columns: 100%;
+    grid-template-areas:
+      "header"
+      "navigation";
+  }
+
+@media (min-width: 768px) {
+
+.app-layout--has-navigation .app-layout__grid {
+      grid-template-columns: min(50%, 25rem) 1fr;
+      grid-template-areas:
+        "header body"
+        "navigation body"
+  }
+    }
+
+@media (min-width: 768px) {
+
+.app-layout--has-navigation .app-layout__app-bar-mobile-menu-button {
+      display: none
+  }
+    }
+
+.app-layout--has-sidebar .app-layout__grid {
+    grid-template-columns: 100%;
+    grid-template-areas:
+      "body"
+      "body";
+  }
+
+@media (min-width: 768px) {
+
+.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid {
+      grid-template-columns: min(50%, 25rem) 1fr;
+      grid-template-areas:
+        "header body"
+        "navigation body"
+  }
+    }
+
+@media (min-width: 992px) {
+
+.app-layout--has-navigation.app-layout--has-sidebar .app-layout__grid {
+      grid-template-columns: 25rem 1fr;
+      grid-template-areas:
+        "header body"
+        "navigation body"
+  }
+    }
+
+@media (min-width: 768px) {
+
+.app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: min(40%, 25rem);
+      border-left: var(--s-border-width-default) solid var(--s-border-default);
+      box-shadow: var(--s-shadow-level-3)
+  }
+    }
+
+@media (max-width: 767px) {
+    .app-layout--mobile-view-navigation .app-layout__grid {
+      grid-template-areas:
+        "header"
+        "navigation";
+    }
+
+    .app-layout--mobile-view-navigation .app-layout__body,
+    .app-layout--mobile-view-navigation .app-layout__sidebar {
+      display: none;
+    }
+  }
+
+@media (max-width: 767px) {
+    .app-layout--mobile-view-body .app-layout__grid {
+      grid-template-areas:
+        "body"
+        "body";
+    }
+
+    .app-layout--mobile-view-body .app-layout__header,
+    .app-layout--mobile-view-body .app-layout__navigation,
+    .app-layout--mobile-view-body .app-layout__sidebar {
+      display: none;
+    }
+  }
+
+@media (max-width: 767px) {
+    .app-layout--mobile-view-sidebar .app-layout__grid {
+      grid-template-areas:
+        "sidebar"
+        "sidebar";
+    }
+
+    .app-layout--mobile-view-sidebar .app-layout__header,
+    .app-layout--mobile-view-sidebar .app-layout__navigation,
+    .app-layout--mobile-view-sidebar .app-layout__body {
+      display: none;
+    }
+  }
+
+.app-layout--has-sidebar:not(.app-layout--sidebar-active) .app-layout__sidebar {
+    display: none;
+  }
+
+@media (min-width: 768px) {
+
+.app-layout--sidebar-closing .app-layout__sidebar {
+      animation: app-layout-sidebar-overlay-slide-out 0.3s
+  }
+    }
+
+.app-layout--has-app-bar-controls .app-layout__app-bar-controls {
+    display: block;
+  }
+
+.app-layout--has-custom-app-bar-back-button .app-layout__custom-app-bar-back-button {
+    display: block;
+  }
+
+.app-layout--hide-app-bar .app-layout__body {
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "banner"
+      "content";
+  }
+
+.app-layout__header {
+  z-index: 1;
+  display: flex;
+  min-width: 0;
+  padding-top: var(--s-space-12);
+  padding-right: var(--s-space-8);
+  padding-bottom: var(--s-space-12);
+  padding-left: var(--s-space-8);
+  align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: header;
+  will-change: transform;
+  gap: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.app-layout__header {
+    border-right: var(--s-border-width-default) solid var(--s-border-default)
+}
+  }
+
+@media (min-width: 992px) {
+
+.app-layout__header {
+    padding-right: var(--s-space-16);
+    padding-left: var(--s-space-16)
+}
+  }
+
+.app-layout__app-name {
+  min-width: 0;
+}
+
+.app-layout__app-name .heading {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+.app-layout__app-bar-mobile-menu-button,
+.app-layout__navigation-mobile-menu-button {
+  flex-shrink: 0;
+}
+
+@media (min-width: 992px) {
+
+.app-layout__app-bar-mobile-menu-button,
+.app-layout__navigation-mobile-menu-button {
+    display: none
+}
+  }
+
+.app-layout__app-bar-mobile-menu-button {
+  padding-left: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.app-layout__app-bar-mobile-menu-button {
+    padding-left: 0
+}
+  }
+
+.app-layout__navigation-back-button {
+  margin-left: calc(-1 * var(--s-space-4));
+}
+
+.app-layout__floating-cta {
+  position: absolute;
+  z-index: 4;
+  right: var(--s-space-16);
+  bottom: var(--s-space-16);
+}
+
+.app-layout__navigation-controls {
+  flex-shrink: 0;
+}
+
+.app-layout__navigation {
+  z-index: 1;
+  overflow-y: auto;
+  border-right: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: navigation;
+  will-change: transform;
+}
+
+.app-layout__body {
+  z-index: 2;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-area: body;
+  grid-template-rows: minmax(3.5rem, auto) auto 1fr;
+  grid-template-areas:
+    "app-bar"
+    "banner"
+    "content";
+  will-change: transform;
+}
+
+.app-layout__app-bar {
+  --swirl-tab-bar-border-width: 0;
+  --swirl-tab-bar-height: 3.5rem;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: app-bar;
+  gap: var(--s-space-8);
+}
+
+.app-layout__back-to-navigation-button {
+  padding-left: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.app-layout__back-to-navigation-button {
+    display: none
+}
+  }
+
+.app-layout__banner {
+  grid-area: banner;
+}
+
+.app-layout__app-bar-content {
+  min-width: 0;
+  flex-grow: 1;
+}
+
+.app-layout__custom-app-bar-back-button {
+  display: none;
+  padding-left: var(--s-space-8);
+}
+
+.app-layout__app-bar-controls {
+  display: none;
+  padding-right: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.app-layout__app-bar-controls {
+    padding-right: var(--s-space-16)
+}
+  }
+
+.app-layout__content {
+  overflow: auto;
+  background-color: var(--s-background-default);
+  grid-area: content;
+}
+
+.app-layout__sidebar {
+  z-index: 3;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  border-left: var(--s-border-width-default) solid var(--s-border-default);
+  will-change: transform;
+  grid-area: sidebar;
+  grid-template-rows: 3.5625rem 1fr;
+  grid-template-areas:
+    "sidebar-header"
+    "sidebar-content";
+}
+
+@media (min-width: 768px) {
+
+.app-layout__sidebar {
+    animation: app-layout-slide-in 0.3s
+}
+  }
+
+.app-layout__sidebar-header {
+  display: flex;
+  min-width: 0;
+  padding-top: var(--s-space-12);
+  padding-right: var(--s-space-8);
+  padding-bottom: var(--s-space-12);
+  padding-left: var(--s-space-8);
+  align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: sidebar-header;
+  gap: var(--s-space-8);
+}
+
+@media (min-width: 768px) {
+
+.app-layout__sidebar-header {
+    padding-right: var(--s-space-16);
+    padding-left: var(--s-space-16)
+}
+  }
+
+.app-layout__sidebar-heading {
+  min-width: 0;
+  flex-grow: 1;
+}
+
+.app-layout__sidebar-heading .heading {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+.app-layout__sidebar-close-button {
+  margin-left: calc(-1 * var(--s-space-4));
+}
+
+.app-layout__sidebar-content {
+  overflow-y: auto;
+  background-color: var(--s-background-default);
+  grid-area: sidebar-content;
+}
+
+/* Transition Styles */
+
+@media (max-width: 767px) {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__grid {
+        grid-template-columns: 100%;
+        grid-template-areas:
+          "header"
+          "navigation";
+      }
+
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: grid;
+        width: 100%;
+        transform: translate3d(100%, 0, 0);
+      }
+    }
+
+@media (max-width: 767px) {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header {
+        display: flex;
+      }
+
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
+        display: block;
+      }
+    }
+
+@media (max-width: 991px) {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__grid, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__grid {
+        grid-template-columns: 100%;
+        grid-template-areas:
+          "body"
+          "body";
+      }
+
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: grid;
+        border-left: var(--s-border-width-default) solid var(--s-border-default);
+      }
+    }
+
+@media (max-width: 991px) {
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
+        display: grid;
+      }
+
+      .app-layout:not(.app-layout--transition-none).app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+        display: grid;
+      }
+    }
+
+/* Transition Style "Slides" */
+
+@media (max-width: 767px) {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__header,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__navigation,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
+        animation: app-layout-slide-out 0.4s;
+      }
+
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
+        animation: app-layout-slide-in 0.4s;
+      }
+
+        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body:after, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body:after {
+          position: absolute;
+          top: 0;
+          right: 100%;
+          bottom: 0;
+          display: block;
+          width: 100%;
+          background-color: rgba(0, 0, 0, 0.3);
+          content: "";
+          animation: app-layout-fade-in 0.4s;
+        }
+    }
+
+@media (max-width: 767px) {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header {
+        animation-direction: reverse;
+      }
+
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
+        animation-direction: reverse;
+      }
+
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
+        animation-direction: reverse;
+      }
+
+        .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body:after {
+          animation-direction: reverse;
+        }
+    }
+
+@media (max-width: 991px) {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
+        animation: app-layout-slide-out 0.4s;
+      }
+
+      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+        animation: app-layout-slide-in 0.4s;
+      }
+
+        .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar:after, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar:after {
+          position: absolute;
+          top: 0;
+          right: 100%;
+          bottom: 0;
+          display: block;
+          width: 100%;
+          background-color: rgba(0, 0, 0, 0.3);
+          content: "";
+          animation: app-layout-fade-in 0.4s;
+        }
+    }
+
+@media (max-width: 991px) {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
+        animation-direction: reverse;
+      }
+
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+        animation-direction: reverse;
+      }
+
+        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar:after {
+          animation-direction: reverse;
+        }
+    }
+
+/* Transition Style "Dialog" */
+
+@media (max-width: 767px) {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
+        animation: app-layout-scale-in 0.3s;
+      }
+    }
+
+@media (max-width: 767px) {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header {
+        animation-direction: reverse;
+      }
+
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
+        animation-direction: reverse;
+      }
+
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
+        animation-direction: reverse;
+      }
+    }
+
+@media (max-width: 991px) {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+        animation: app-layout-scale-in 0.3s;
+      }
+    }
+
+@media (max-width: 991px) {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
+        animation-direction: reverse;
+      }
+
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+        animation-direction: reverse;
+      }
+    }
+
+@keyframes app-layout-sidebar-overlay-slide-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes app-layout-slide-in {
+  0% {
+    transform: translate3d(100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes app-layout-slide-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-20%, 0, 0);
+  }
+}
+
+@keyframes app-layout-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes app-layout-scale-in {
+  from {
+    transform: scale(0);
+    box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0);
+  }
+  to {
+    transform: scale(1);
+    box-shadow: 0 0 0 100rem rgba(0, 0, 0, 0.25);
+  }
+}
+
+@keyframes app-layout-sidebar-slide-in {
+  from {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 0;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 25rem;
+  }
+}
+
+@keyframes app-layout-sidebar-slide-out {
+  from {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 25rem;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 0;
+  }
+}
+