@getflip/swirl-components 0.116.0 → 0.118.0

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

@@ -1,6 +1,13 @@
 :host {
-  --extended-sidebar-width: 17rem;
-  --collapsed-sidebar-width: 4rem;
+  --swirl-shell-background: var(--s-surface-sunken-default);
+  --swirl-shell-text-color: var(--s-text-default);
+
+  --swirl-shell-header-height: 3.25rem;
+
+  --swirl-shell-collapsed-nav-width: 3.75rem;
+  --swirl-shell-extended-nav-width: 14rem;
+  --swirl-shell-sidebar-width: 21rem;
+
   display: flex;
   width: 100%;
   height: 100%;
@@ -14,215 +21,438 @@
   display: grid;
   width: 100%;
   min-height: 100%;
+  background-color: var(--swirl-shell-background);
   transition: grid-template-columns 0.2s;
-  grid-template-columns: 0 1fr;
-  grid-template-rows: auto 1fr;
-  grid-template-areas:
-    "banner banner"
-    "sidebar main";
+  grid-template-columns: 0 1fr 0;
+  grid-template-rows: 1fr;
+  grid-template-areas: "nav main";
 }
 
 @media (min-width: 992px) {
 
 .shell-layout {
-    grid-template-columns: var(--extended-sidebar-width) 1fr
+    padding-right: var(--s-space-8);
+    padding-bottom: var(--s-space-8);
+    gap: var(--s-space-8);
+    grid-template-columns: var(--swirl-shell-extended-nav-width) 1fr 0;
+    grid-template-rows: var(--swirl-shell-header-height) 1fr;
+    grid-template-areas:
+      "header header header"
+      "nav main sidebar"
 }
   }
 
-.shell-layout--collapsed-sidebar {
-  grid-template-columns: 0 1fr;
-}
+.shell-layout--branded-header .shell-layout__header {
+    border-bottom: none;
+    color: var(--s-text-on-action-primary);
+    background-color: var(--s-action-primary-default);
+  }
 
-@media (min-width: 992px) {
-          .shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper.shell-layout__sidebar-wrapper--hovered .shell-layout__sidebar, .shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper:focus-within .shell-layout__sidebar {
-            width: var(--extended-sidebar-width);
-            box-shadow: 0 0.75rem 2rem rgba(25, 26, 28, 0.12),
-              0 0.25rem 0.75rem rgba(25, 26, 28, 0.08);
-          }
+.shell-layout--branded-header .shell-layout__header .shell-layout__header-tool {
+      color: var(--s-text-on-action-primary);
+      background-color: var(--s-action-primary-default);
+    }
+
+.shell-layout--branded-header .shell-layout__header .shell-layout__header-tool:hover {
+        background-color: var(--s-action-primary-hovered);
+      }
+
+.shell-layout--branded-header .shell-layout__header .shell-layout__header-tool:active {
+        background-color: var(--s-action-primary-pressed);
+      }
+
+.shell-layout--branded-header .shell-layout__header .shell-layout__header-tool swirl-badge {
+        --swirl-badge-border-color: var(--s-action-primary-default);
       }
 
-.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper {
-    transform: translate3d(-100%, 0, 0);
+.shell-layout--navigation-collapsed .shell-layout__navigation-toggle:hover swirl-icon-double-arrow-left {
+        display: none;
+      }
+
+.shell-layout--navigation-collapsed .shell-layout__navigation-toggle:hover swirl-icon-double-arrow-right {
+        display: inline-flex;
+      }
+
+@media (min-width: 992px) {
+
+.shell-layout--navigation-collapsed {
+    grid-template-columns: var(--swirl-shell-collapsed-nav-width) 1fr 0
+}
   }
 
-.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper .shell-layout__sidebar {
-      width: 100%;
-      box-shadow: none;
+@media (min-width: 1440px) {
+
+.shell-layout--sidebar-active.shell-layout--navigation-collapsed {
+      grid-template-columns: var(--swirl-shell-collapsed-nav-width) 1fr var(
+          --swirl-shell-sidebar-width
+        )
+  }
+    }
+
+@media (min-width: 1440px) {
+
+.shell-layout--sidebar-active .shell-layout__main {
+      width: 100%
+  }
     }
 
 @media (min-width: 992px) {
 
-.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper {
-      max-width: var(--collapsed-sidebar-width);
-      flex-basis: var(--collapsed-sidebar-width);
-      transform: none
+.shell-layout--sidebar-active .shell-layout__sidebar-body {
+      border: 0.0625rem solid var(--s-border-default);
+      transform: translate3d(0, 0, 0)
+  }
+    }
+
+@media (min-width: 1440px) {
+
+.shell-layout--sidebar-active {
+    grid-template-columns: var(--swirl-shell-extended-nav-width) 1fr var(
+        --swirl-shell-sidebar-width
+      )
+}
   }
-        .shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__sidebar {
-          box-shadow: none;
-        }
 
-        .shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo {
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
-        }
+.shell-layout--mobile-navigation-active .shell-layout__nav {
+    transform: translate3d(0, 0, 0);
+    box-shadow: var(--s-shadow-level-3);
+  }
 
-        .shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo {
-          display: none;
-        }
+@media (min-width: 992px) {
 
-        .shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__toggle {
-          display: none;
-        }
+.shell-layout--mobile-navigation-active .shell-layout__nav {
+      transform: none;
+      box-shadow: none
+  }
     }
 
+.shell-layout--mobile-navigation-active .shell-layout__mobile-nav-backdrop {
+    display: block;
+  }
+
 @media (min-width: 992px) {
 
-.shell-layout--collapsed-sidebar {
-    grid-template-columns: var(--collapsed-sidebar-width) 1fr
-}
+.shell-layout--mobile-navigation-active .shell-layout__mobile-nav-backdrop {
+      display: none
   }
+    }
 
-.shell-layout--hide-sidebar {
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    "banner"
-    "main";
+.shell-layout__header {
+  position: relative;
+  display: none;
+  width: calc(100% + var(--s-space-8));
+  padding-top: var(--s-space-8);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-8);
+  padding-left: var(--s-space-16);
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 0.0625rem solid var(--s-border-default);
+  color: var(--swirl-shell-text-color);
+  grid-area: header;
 }
 
 @media (min-width: 992px) {
 
-.shell-layout--hide-sidebar {
-    grid-template-columns: 1fr
+.shell-layout__header {
+    display: flex
 }
   }
 
-.shell-layout__banner {
-  grid-area: banner;
+.shell-layout__skip-link {
+  position: absolute;
+  z-index: 9;
+  top: 0;
+  left: 0;
+  padding: var(--s-space-4);
+  border: none;
+  color: var(--swirl-shell-text-color);
+  background-color: var(--swirl-shell-background);
+  font: inherit;
+  cursor: pointer;
 }
 
-.shell-layout__sidebar-wrapper {
-  position: absolute;
-  z-index: 2;
+.shell-layout__skip-link:not(:focus):not(:active) {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    white-space: nowrap;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(50%);
+            clip-path: inset(50%);
+  }
+
+.shell-layout__header-left {
+  display: flex;
+  flex-basis: 8rem;
+  flex-shrink: 0;
+  gap: var(--s-space-8);
+}
+
+.shell-layout__header-right {
+  display: flex;
+  flex-basis: 8rem;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--s-space-8);
+}
+
+.shell-layout__logo {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.shell-layout__logo::slotted(img) {
+    max-height: 1.75rem;
+  }
+
+.shell-layout__header-tool {
+  position: relative;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: var(--s-space-8);
+  border: none;
+  border-radius: var(--s-border-radius-sm);
+  color: var(--swirl-shell-text-color);
+  background-color: var(--s-surface-sunken-default);
+  font: inherit;
+  cursor: pointer;
+}
+
+.shell-layout__header-tool:hover {
+    background-color: var(--s-surface-sunken-hovered);
+  }
+
+.shell-layout__header-tool:active {
+    background-color: var(--s-surface-sunken-pressed);
+  }
+
+.shell-layout__header-tool:focus {
+    outline: none;
+  }
+
+.shell-layout__header-tool:focus-visible {
+    box-shadow: 0 0 0 0.125rem var(--s-focus-default);
+  }
+
+.shell-layout__header-tool swirl-badge {
+    --swirl-badge-border-color: var(--s-surface-sunken-default);
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    transform: translate3d(0.1875rem, 0, 0);
+  }
+
+.shell-layout__sidebar-toggle {
+  display: none;
+}
+
+@media (min-width: 992px) {
+
+.shell-layout__sidebar-toggle {
+    display: block
+}
+  }
+
+.shell-layout__navigation-toggle:hover swirl-icon-menu {
+      display: none;
+    }
+
+.shell-layout__navigation-toggle:hover swirl-icon-double-arrow-left {
+      display: inline-flex;
+    }
+
+.shell-layout__navigation-toggle swirl-icon-double-arrow-right,
+  .shell-layout__navigation-toggle swirl-icon-double-arrow-left {
+    display: none;
+  }
+
+.shell-layout__nav {
+  position: fixed;
+  z-index: 9;
   top: 0;
   bottom: 0;
   left: 0;
+  overflow: auto;
   width: 100%;
-  max-width: var(--extended-sidebar-width);
-  min-height: 0;
-  flex-basis: var(--extended-sidebar-width);
-  flex-shrink: 0;
-  transition: max-width 0.2s, transform 0.2s;
-  grid-area: sidebar;
+  max-width: 18.75rem;
+  color: var(--swirl-shell-text-color);
+  background-color: var(--s-surface-overlay-default);
+  transition: transform 0.2s, box-shadow 0.2s;
+  transform: translate3d(-100%, 0, 0);
+  grid-area: nav;
 }
 
 @media (min-width: 992px) {
 
-.shell-layout__sidebar-wrapper {
-    position: relative;
+.shell-layout__nav {
+    position: static;
+    max-width: none;
+    padding-top: 0;
+    padding-right: var(--s-space-4);
+    padding-bottom: var(--s-space-8);
+    padding-left: var(--s-space-12);
+    background-color: var(--swirl-shell-background);
+    transform: none;
+    box-shadow: none;
     inset: auto
 }
   }
 
-.shell-layout__sidebar {
+.shell-layout__mobile-header {
   display: flex;
-  width: var(--extended-sidebar-width);
-  height: 100%;
-  border-right: var(--s-border-width-default) solid var(--s-border-default);
-  flex-direction: column;
-  transition: box-shadow 0.2s, width 0.2s;
-  box-shadow: 0 0.75rem 2rem rgba(25, 26, 28, 0.12),
-    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08);
+  min-height: 3.5rem;
+  margin-bottom: var(--s-space-8);
+  padding-top: var(--s-space-8);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-8);
+  padding-left: var(--s-space-16);
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 0.0625rem solid var(--s-border-default);
 }
 
-@media (min-width: 992px) {
+.shell-layout__mobile-header::slotted(img) {
+    max-height: 1.75rem;
+  }
 
-.shell-layout__sidebar {
-    box-shadow: none
-}
+.shell-layout__mobile-header .shell-layout__header-tool {
+    background-color: var(--s-surface-overlay-default);
   }
 
-.shell-layout__header {
-  flex-shrink: 0;
-  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
-  background-color: var(--s-background-default);
+.shell-layout__mobile-header .shell-layout__header-tool:hover {
+      background-color: var(--s-surface-overlay-hovered);
+    }
+
+.shell-layout__mobile-header .shell-layout__header-tool:active {
+      background-color: var(--s-surface-overlay-pressed);
+    }
+
+@media (min-width: 992px) {
+
+.shell-layout__mobile-header {
+    display: none
 }
+  }
 
-.shell-layout__logo-bar {
+.shell-layout__mobile-header-tools {
   display: flex;
-  overflow: hidden;
+  justify-content: flex-end;
   align-items: center;
-  height: 4.5rem;
+  gap: var(--s-space-8);
 }
 
-.shell-layout__expanded-logo {
-  padding-right: var(--s-space-12);
-  padding-left: var(--s-space-12);
-  flex-grow: 1;
+.shell-layout__nav-body {
+  padding: var(--s-space-8);
 }
 
-.shell-layout__collapsed-logo {
-  display: none;
-  padding-right: var(--s-space-12);
-  padding-left: var(--s-space-12);
-  flex-grow: 1;
+.shell-layout__nav-body::slotted(* ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+.shell-layout__nav-body::slotted(* li) {
+    display: flex;
+  }
+
+@media (min-width: 992px) {
+
+.shell-layout__nav-body {
+    padding: 0
 }
+  }
 
-.shell-layout__toggle {
-  padding-right: var(--s-space-16);
-  padding-left: var(--s-space-12);
-  flex-grow: 0;
-  flex-shrink: 0;
+.shell-layout__mobile-nav-backdrop {
+  position: fixed;
+  z-index: 8;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.25);
+  animation: shell-layout-backdrop-fade-in 0.2s;
+  inset: 0;
 }
 
-.shell-layout__mobile-toggle {
-  position: absolute;
-  z-index: 2;
-  top: var(--s-space-12);
-  left: calc(100% + var(--s-space-16));
+.shell-layout__main {
+  overflow: hidden;
+  grid-area: main;
 }
 
 @media (min-width: 992px) {
 
-.shell-layout__mobile-toggle {
-    display: none
+.shell-layout__main {
+    width: calc(100% + var(--s-space-8));
+    border: 0.0625rem solid var(--s-border-default);
+    border-radius: var(--s-border-radius-sm)
 }
   }
 
-.shell-layout__main-navigation {
-  overflow: auto;
-  flex-grow: 1;
-  background-color: var(--s-background-default);
+.shell-layout__sidebar {
+  position: relative;
+  display: none;
+  grid-area: sidebar;
 }
 
-.shell-layout__main {
-  min-height: 0;
-  background-color: var(--s-background-default);
-  grid-area: main;
+@media (min-width: 992px) {
+
+.shell-layout__sidebar {
+    display: block
 }
+  }
 
-.shell-layout__main > *,
-  .shell-layout__main ::slotted(*) {
-    height: 100%;
+@media (min-width: 1440px) {
+
+.shell-layout__sidebar {
+    overflow: hidden
+}
   }
 
-.shell-layout__backdrop {
-  position: fixed;
+.shell-layout__sidebar-body {
   z-index: 1;
-  background-color: rgba(0, 0, 0, 0.4);
-  animation: shell-layout-backdrop-fade-in 0.1s;
-  inset: 0;
+  display: flex;
+  width: var(--swirl-shell-sidebar-width);
+  height: 100%;
+  border-radius: var(--s-border-radius-sm);
+  background-color: var(--s-background-default);
+  flex-direction: column;
 }
 
 @media (min-width: 992px) {
 
-.shell-layout__backdrop {
-    display: none
+.shell-layout__sidebar-body {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    transition: transform 0.2s;
+    transform: translate3d(calc(100% + var(--s-space-24)), 0, 0);
+    box-shadow: var(--s-shadow-level-3)
+}
+  }
+
+@media (min-width: 1440px) {
+
+.shell-layout__sidebar-body {
+    position: relative;
+    transform: none;
+    box-shadow: none;
+    inset: auto
 }
   }
 
-.shell-layout__backdrop--fading {
-  animation: shell-layout-backdrop-fade-out 0.2s;
+.shell-layout__sidebar-app-bar {
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+}
+
+.shell-layout__sidebar-content {
+  overflow: auto;
+  flex-grow: 1;
 }
 
 @keyframes shell-layout-backdrop-fade-in {
@@ -233,12 +463,3 @@
     opacity: 1;
   }
 }
-
-@keyframes shell-layout-backdrop-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}