@getflip/swirl-components 0.3.1 → 0.5.0

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

@@ -0,0 +1,703 @@
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.app-layout {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100rem;
+  height: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  border: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-border-default);
+}
+
+@media (min-width: 1440px) {
+
+.app-layout {
+    border-radius: var(--s-border-radius-base)
+}
+  }
+
+.app-layout__grid {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  gap: var(--s-border-width-default);
+  grid-template-columns: 100%;
+  grid-template-rows: 4rem 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--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-sidebar.app-layout--sidebar-active .app-layout__grid {
+        grid-template-columns: 1fr min(50%, 25rem);
+        grid-template-areas:
+          "body sidebar"
+          "body sidebar";
+      }
+    }
+
+.app-layout--has-sidebar .app-layout__grid {
+    grid-template-columns: 100%;
+    grid-template-areas:
+      "body"
+      "body";
+  }
+
+@media (min-width: 1440px) {
+      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
+        -webkit-animation: app-layout-sidebar-slide-in 0.3s;
+                animation: app-layout-sidebar-slide-in 0.3s;
+        grid-template-columns: 25rem 1fr 25rem;
+        grid-template-areas:
+          "header body sidebar"
+          "navigation body sidebar";
+      }
+    }
+
+@media (min-width: 1440px) {
+      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid {
+        -webkit-animation: app-layout-sidebar-slide-out 0.3s;
+                animation: app-layout-sidebar-slide-out 0.3s;
+      }
+    }
+
+@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) and (max-width: 1439px) {
+    .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: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14);
+    }
+  }
+
+@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 {
+      -webkit-animation: app-layout-sidebar-overlay-slide-out 0.3s;
+              animation: app-layout-sidebar-overlay-slide-out 0.3s
+  }
+    }
+
+@media (min-width: 1440px) {
+
+.app-layout--sidebar-closing .app-layout__sidebar {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.app-layout__header {
+  z-index: 1;
+  display: flex;
+  padding: var(--s-space-12) var(--s-space-16);
+  align-items: center;
+  background-color: var(--s-background-default);
+  grid-area: header;
+  will-change: transform;
+  gap: var(--s-space-8);
+}
+
+.app-layout__app-name {
+  min-width: 0;
+}
+
+.app-layout__app-name .heading {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+.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 {
+  fles-shrink: 0;
+}
+
+.app-layout__navigation {
+  z-index: 1;
+  overflow-y: auto;
+  background-color: var(--s-background-default);
+  grid-area: navigation;
+  will-change: transform;
+}
+
+.app-layout__body {
+  z-index: 2;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  gap: var(--s-border-width-default);
+  grid-area: body;
+  grid-template-rows: 4rem 1fr;
+  grid-template-areas:
+    "app-bar"
+    "content";
+  will-change: transform;
+}
+
+.app-layout__app-bar {
+  display: flex;
+  min-width: 0;
+  padding: var(--s-space-12) var(--s-space-16);
+  align-items: center;
+  background-color: var(--s-background-default);
+  grid-area: app-bar;
+  gap: var(--s-space-8);
+}
+
+.app-layout__back-to-navigation-button {
+  margin-left: calc(-1 * var(--s-space-4));
+}
+
+@media (min-width: 768px) {
+
+.app-layout__back-to-navigation-button {
+    display: none
+}
+  }
+
+.app-layout__app-bar-media {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.app-layout__app-bar-heading {
+  min-width: 0;
+  flex-grow: 1;
+}
+
+.app-layout__app-bar-heading .heading {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+.app-layout__app-bar-subheading {
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  color: var(--s-text-subdued);
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.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%;
+  will-change: transform;
+  gap: var(--s-border-width-default);
+  grid-area: sidebar;
+  grid-template-rows: 4rem 1fr;
+  grid-template-areas:
+    "sidebar-header"
+    "sidebar-content";
+}
+
+@media (min-width: 768px) {
+
+.app-layout__sidebar {
+    -webkit-animation: app-layout-slide-in 0.3s;
+            animation: app-layout-slide-in 0.3s
+}
+  }
+
+@media (min-width: 1440px) {
+
+.app-layout__sidebar {
+    width: 25rem;
+    -webkit-animation: none;
+            animation: none
+}
+  }
+
+.app-layout__sidebar-header {
+  display: flex;
+  min-width: 0;
+  padding: var(--s-space-12) var(--s-space-16);
+  align-items: center;
+  background-color: var(--s-background-default);
+  grid-area: sidebar-header;
+  gap: var(--s-space-8);
+}
+
+.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 {
+        -webkit-animation: app-layout-slide-out 0.4s;
+                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 {
+        -webkit-animation: app-layout-slide-in 0.4s;
+                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: "";
+          -webkit-animation: app-layout-fade-in 0.4s;
+                  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 {
+        -webkit-animation: app-layout-slide-out 0.4s;
+                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 {
+        -webkit-animation: app-layout-slide-in 0.4s;
+                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: "";
+          -webkit-animation: app-layout-fade-in 0.4s;
+                  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 {
+        -webkit-animation: app-layout-scale-in 0.3s;
+                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 {
+        -webkit-animation: app-layout-scale-in 0.3s;
+                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;
+      }
+    }
+
+@-webkit-keyframes app-layout-sidebar-overlay-slide-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes app-layout-sidebar-overlay-slide-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@-webkit-keyframes app-layout-slide-in {
+  0% {
+    transform: translate3d(100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes app-layout-slide-in {
+  0% {
+    transform: translate3d(100%, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@-webkit-keyframes app-layout-slide-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-20%, 0, 0);
+  }
+}
+
+@keyframes app-layout-slide-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-20%, 0, 0);
+  }
+}
+
+@-webkit-keyframes app-layout-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes app-layout-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-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-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);
+  }
+}
+
+@-webkit-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-in {
+  from {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 0;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 25rem;
+  }
+}
+
+@-webkit-keyframes app-layout-sidebar-slide-out {
+  from {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 25rem;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 0;
+  }
+}
+
+@keyframes app-layout-sidebar-slide-out {
+  from {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 25rem;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 25rem 1fr 0;
+  }
+}
+