@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/collection/components/drawer/drawer.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,31 +26,53 @@
 [hidden] {
   display: none !important;
 }
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }/** Typography */
 :host {
   /**
-  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem
-  * @prop --panel-background: background color of panel. Default to 'white'
-  * @prop --panel-shadow: Defaults to var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));
-  * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));
-  * @prop --footer-background: Defaults to #e4e6e8;
-  * @prop --header-spacing: The amount of padding to use for the header.
-  * @prop --body-spacing: The amount of padding to use for the body.
-  * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px)
-  * @prop --header-button-color: defaults to #b5aea7;
-  */
+   * @prop --size: Size of the drawer. Defaults to 25rem.
+   * @prop --min-size: Minimum size of the drawer (only relevant when `resizable` is set). Defaults to 25rem.
+   * @prop --max-size: Maximum size of the drawer (only relevant when `resizable` is set). Defaults to 50%.
+   * @prop --panel-background: Background color of the panel. Defaults to var(--nano-color-neutral-75).
+   * @prop --panel-shadow: Shadow of the panel. Defaults to var(--nano-shadow-l3).
+   * @prop --scrim-color: Color of the scrim. Defaults to var(--nano-overlay-background-color).
+   * @prop --header-button-color: Color of the header button. Defaults to var(--nano-color-neutral-75).
+   * @prop --footer-background: Background color of the footer. Defaults to var(--nano-color-neutral-75).
+   * @prop --header-background: Background color of the header. Defaults to var(--nano-color-neutral-75).
+   * @prop --header-spacing: Spacing of the header. Defaults to var(--nano-spacing-l).
+   * @prop --body-spacing: Spacing of the body. Defaults to var(--nano-spacing-l).
+   * @prop --footer-spacing: Spacing of the footer. Defaults to var(--nano-spacing-l).
+   */
   --size: 25rem;
-  --panel-background: white;
-  --panel-shadow: var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));
-  --scrim-color: var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));
-  --header-button-color: #b5aea7;
-  --footer-background: #e4e6e8;
+  --min-size: 25rem;
+  --max-size: 50%;
+  --panel-background: var(--nano-color-neutral-75);
+  --panel-shadow: var(--nano-shadow-l3);
+  --scrim-color: var(--nano-overlay-background-color);
+  --header-button-color: var(--nano-color-primary-1200);
+  --header-button-size: 1.375rem;
+  --footer-background: var(--panel-background);
   --header-background: var(--panel-background);
-  --header-spacing: var(--nano-spacing-large, 20px);
-  --body-spacing: var(--nano-spacing-large, 20px);
-  --footer-spacing: var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);
+  --header-spacing: var(--nano-spacing-l) var(--nano-spacing-l1-default);
+  --body-spacing: var(--nano-spacing-l1-default);
+  --footer-spacing: var(--nano-spacing-l) var(--nano-spacing-l1-default);
   --dir: 1;
 }
 
+:host([placement=top]),
+:host([placement=bottom]) {
+  --max-size: 80%;
+}
+
 :host(:dir(rtl)) {
   --dir: -1;
 }
@@ -58,10 +84,16 @@
 .drawer {
   inset-block-start: 0;
   inset-inline-start: 0;
-  inline-size: 100%;
-  block-size: 100%;
   pointer-events: none;
   overflow: hidden;
+  border: none;
+  inline-size: 100%;
+  block-size: 100%;
+  color: unset;
+  background-color: unset;
+}
+.drawer::backdrop {
+  display: none;
 }
 .drawer--contained {
   position: absolute;
@@ -69,7 +101,7 @@
 }
 .drawer--fixed {
   position: fixed;
-  z-index: var(--nano-layer-index-modal, 700);
+  z-index: var(--nano-z-index-modal);
 }
 
 .drawer__panel {
@@ -80,13 +112,15 @@
   background-color: var(--panel-background);
   box-shadow: var(--panel-shadow);
   pointer-events: all;
-  transition: var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;
+  transition: var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;
   display: flex;
+}
+.drawer--top .drawer__panel, .drawer--bottom .drawer__panel {
   flex-direction: column;
 }
 @media (forced-colors: active) {
   .drawer__panel {
-    border: solid 1px #4a4a4a;
+    border: solid 1px var(--nano-color-base-1000);
   }
 }
 .drawer__panel:focus {
@@ -142,31 +176,67 @@
   opacity: 0;
   transform: translateX(calc(var(--dir) * 100%));
 }
-.drawer--start.drawer--open .drawer__panel {
+.drawer--start.drawer--open .drawer__panel, .drawer--end.drawer--open .drawer__panel {
   opacity: 1;
   transform: translateX(0);
 }
-.drawer--end.drawer--open .drawer__panel {
-  opacity: 1;
-  transform: translateX(calc(var(--nano-scroll-lock-size) * -1));
+
+.drawer__resize-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: var(--nano-z-index-dropdown);
+  color: var(--nano-color-primary-1200);
+  background-color: var(--nano-color-neutral-75);
+}
+.drawer__resize-handle:focus {
+  outline: none;
+}
+.drawer__resize-handle:focus-visible {
+  background-color: var(--nano-focus-ring-color);
+}
+.drawer__resize-handle:active {
+  color: var(--nano-color-primary-800);
+}
+.drawer--top .drawer__resize-handle, .drawer--bottom .drawer__resize-handle {
+  cursor: row-resize;
+  inset-inline: 0;
+}
+.drawer--end .drawer__resize-handle, .drawer--start .drawer__resize-handle {
+  cursor: col-resize;
+  inset-block: 0;
+}
+.drawer--end .drawer__resize-handle {
+  inset-inline-start: 0;
+}
+.drawer--start .drawer__resize-handle {
+  inset-inline-end: 0;
+}
+.drawer--top .drawer__resize-handle {
+  inset-block-end: 0;
+}
+.drawer--bottom .drawer__resize-handle {
+  inset-block-start: 0;
 }
 
 .drawer__header {
   inline-size: 100%;
   display: flex;
   background-color: var(--header-background);
+  align-items: center;
+  padding: var(--header-spacing);
 }
 [stuck] .drawer__header {
-  box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
+  box-shadow: var(--nano-shadow-l0);
 }
 
 .drawer__title {
   flex: 1 1 auto;
-  font: inherit;
-  font-size: var(--nano-fontsize-large, 1.25rem);
-  line-height: 1.2;
-  padding: var(--header-spacing);
   margin: 0;
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-xl);
+  line-height: var(--nano-line-height-denser);
 }
 
 .drawer__header-actions {
@@ -174,16 +244,17 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: var(--nano-spacing-xsmall, 4px);
-  padding: 0 var(--header-spacing);
+  gap: var(--nano-spacing-sm);
+  color: var(--header-button-color);
+  inset-inline-end: calc(var(--nano-spacing-l1-default) / 2 * -1);
+  position: relative;
 }
 .drawer__header-actions .drawer__close,
 .drawer__header-actions ::slotted(.nano-icon-button) {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  font-size: var(--nano-fontsize-xlarge, 1.5rem);
-  --color: var(--header-button-color);
+  font-size: var(--header-button-size);
 }
 
 .drawer__main {
@@ -212,9 +283,9 @@
   background: var(--footer-background);
   inset-block-start: 1px;
   position: relative;
-}
-.drawer__footer ::slotted(button:not(:last-of-type)) {
-  margin-inline-end: var(--nano-spacing-xsmall, 4px);
+  border-block-start: 1px solid var(--nano-color-neutral-300);
+  gap: var(--nano-spacing-md);
+  display: inline-flex;
 }
 .drawer:not(.drawer--has-footer) .drawer__footer {
   display: none;
@@ -226,10 +297,8 @@
   inset: 0;
   background-color: var(--scrim-color);
   pointer-events: all;
-  -webkit-backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
-          backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
   opacity: 0;
-  transition: var(--nano-transition-fast, 0.3s) opacity;
+  transition: var(--nano-transition-fast) opacity;
 }
 .drawer--open .drawer__overlay {
   opacity: 1;