@nanoporetech-digital/components 5.10.0 → 5.11.0

package/dist/collection/components/global-nav/style/global-nav.css

@@ -24,12 +24,6 @@
   white-space: inherit;
   color: inherit;
 }
-.global-nav > .sticker-trigger {
-  display: none;
-}
-.global-nav > .sticker-trigger ~ .sticker-trigger {
-  display: block;
-}
 .global-nav button {
   background: none;
   color: inherit;
@@ -47,8 +41,8 @@
   align-items: center;
 }
 .global-nav .icon-btn nano-icon {
-  width: 18px;
-  height: 18px;
+  inline-size: 18px;
+  block-size: 18px;
 }
 .global-nav ::slotted(nano-nav-item[slot=icon]) {
   --padding-top: 9px;
@@ -94,25 +88,29 @@
   color: var(--bar-text-color);
   z-index: var(--nano-layer-index-menubar, 10);
   position: relative;
-  max-width: 100%;
-  min-width: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 100%;
   box-shadow: none;
   transition: 0.2s ease box-shadow;
+  display: flex;
+  flex-wrap: wrap;
 }
 [stuck] .bars {
   box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);
 }
 .bars::before {
   content: "";
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   z-index: -1;
   background: var(--bar-background);
   position: absolute;
 }
 
 .main-bar {
-  width: 100%;
+  flex: 1 1 100%;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
   padding-inline: 0 var(--bar-item-spacing);
   padding-block: var(--bar-vertical-padding);
   display: flex;
@@ -146,8 +144,7 @@
   flex: 0 0 auto;
 }
 .main-bar > * ::slotted(nano-nav-item[slot=icon]) {
-  -webkit-margin-start: 11px;
-          margin-inline-start: 11px;
+  margin-inline-start: 11px;
 }
 .main-bar > * ::slotted(nano-nav-item),
 .main-bar > * nano-nav-item {
@@ -162,39 +159,27 @@
   text-decoration: none !important;
 }
 .main-bar .icon-btn {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-start: 6px;
-          margin-inline-start: 6px;
+  margin-block: 0 0;
+  margin-inline-start: 6px;
 }
 :host(.threshold-2) .main-bar .icon-btn {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-margin-start: 11px;
-          margin-inline-start: 11px;
+  margin-block: 0 0;
+  margin-inline-start: 11px;
 }
 .main-bar .menu-btn.icon-btn {
   margin: 0 !important;
-  -webkit-border-end: 1.5px solid var(--bar-color-shade);
-          border-inline-end: 1.5px solid var(--bar-color-shade);
+  border-inline-end: 1.5px solid var(--bar-color-shade);
 }
 .main-bar .logo {
-  height: 36px;
-  width: 200px;
-  min-width: 200px;
+  block-size: 36px;
+  inline-size: 200px;
+  min-inline-size: 200px;
 }
 :host(:not(.threshold-1)) .main-bar .logo {
-  height: 30px;
+  block-size: 30px;
 }
 .main-bar .logo-link {
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
+  margin-inline: 0 0;
   padding-inline: var(--bar-item-spacing);
   display: flex;
   align-items: center;
@@ -224,8 +209,7 @@
   font-stretch: condensed;
   text-transform: uppercase;
   font-size: 1.065em;
-  -webkit-margin-end: auto;
-          margin-inline-end: auto;
+  margin-inline-end: auto;
 }
 .main-bar .nav-links--main ::slotted(nano-nav-item) {
   --color: var(--bar-text-color);
@@ -234,8 +218,7 @@
 }
 .main-bar .nav-links--sub {
   --color: var(--color, #e2e2e2);
-  -webkit-margin-start: 6px;
-          margin-inline-start: 6px;
+  margin-inline-start: 6px;
   justify-content: flex-end;
 }
 .main-bar .login-btn {
@@ -250,7 +233,7 @@
   margin-inline: 11px 0;
 }
 .main-bar .measure-ele {
-  min-width: 1px;
+  min-inline-size: 1px;
   display: block;
   margin: 0;
   padding: 0;
@@ -258,10 +241,15 @@
 
 .sticker-trigger {
   background: var(--bar-background);
-  width: 100%;
-  height: 1px;
+  inline-size: 100%;
+  block-size: 1px;
   z-index: 20;
   position: relative;
+  display: block;
+}
+
+.sticker-trigger:has(+ .sticker-trigger) {
+  display: none;
 }
 
 .gn-menu {
@@ -271,28 +259,27 @@
   z-index: -1;
   display: none;
   transition: z-index 0.01s ease 0.2s;
-  height: 100vh;
-  width: 100vw;
+  block-size: 100vh;
+  inline-size: 100vw;
   overflow-y: auto;
 }
 :host(.threshold-4) .gn-menu {
   position: absolute;
-  width: calc(100vw - 20px);
+  inline-size: calc(100vw - 20px);
 }
 .gn-menu.menu-full-screen {
-  width: 100vw !important;
+  inline-size: 100vw !important;
 }
 .gn-menu_wrap {
-  max-width: 92vw;
-  width: 335px;
+  max-inline-size: 92vw;
+  inline-size: 335px;
   background: var(--menu-background);
   color: var(--menu-text-color);
   padding: calc(var(--bar-vertical-padding) + 1px) 0 0;
   box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.8);
   position: relative;
   pointer-events: all;
-  -webkit-margin-after: 36px;
-          margin-block-end: 36px;
+  margin-block-end: 36px;
   opacity: 0;
   outline: none;
   transition: transform 0.2s ease, opacity 0.2s ease;
@@ -311,8 +298,7 @@
   transition: transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
 }
 .gn-menu_actions {
-  -webkit-padding-end: calc(var(--menu-padding) / 2);
-          padding-inline-end: calc(var(--menu-padding) / 2);
+  padding-inline-end: calc(var(--menu-padding) / 2);
   display: flex;
   justify-content: space-between;
 }
@@ -323,10 +309,10 @@
   inset-block-end: 4px;
   inset-inline: auto 0;
   font-size: 9px;
-  height: 14px;
+  block-size: 14px;
   line-height: 14px;
-  width: auto;
-  min-width: 14px;
+  inline-size: auto;
+  min-inline-size: 14px;
   border-radius: 50%;
   box-sizing: border-box;
   text-align: center;
@@ -335,14 +321,13 @@
 .gn-menu .content-wrap {
   position: relative;
   transition: 0.2s ease min-height;
-  min-height: 190px;
+  min-block-size: 190px;
 }
 .gn-menu .content--sub {
   padding: var(--menu-padding) 0 var(--menu-padding) 7px;
 }
 .gn-menu .menu-btn {
-  -webkit-margin-end: auto;
-          margin-inline-end: auto;
+  margin-inline-end: auto;
 }
 .gn-menu .nav-links {
   display: flex;
@@ -362,7 +347,7 @@
   --bg-color-hover: transparent;
   --bg-color-focus: #002530;
   --focus-outline: none;
-  width: 100%;
+  inline-size: 100%;
 }
 .gn-menu .nav-links .user-nav {
   --bg-color: var(--menu-user-panel-bg);
@@ -384,40 +369,33 @@
   padding-inline: var(--menu-padding);
 }
 .gn-menu .nav-links .user-nav .back-btn {
-  -webkit-padding-start: var(--menu-padding);
-          padding-inline-start: var(--menu-padding);
+  padding-inline-start: var(--menu-padding);
 }
 .gn-menu .nav-links_title {
   margin: 0 var(--menu-padding) 4px;
-  -webkit-border-after: 1px solid var(--menu-hint-color);
-          border-block-end: 1px solid var(--menu-hint-color);
-  -webkit-padding-after: 8px;
-          padding-block-end: 8px;
+  border-block-end: 1px solid var(--menu-hint-color);
+  padding-block-end: 8px;
   text-transform: uppercase;
   color: var(--menu-title-text);
   letter-spacing: 1px;
   font-weight: 700;
 }
 .gn-menu .nav-links_title--sites {
-  -webkit-border-after: none;
-          border-block-end: none;
+  border-block-end: none;
 }
 .gn-menu .nav-links-wrap {
   margin: 18px 0;
 }
 .gn-menu .nav-links-wrap:last-child {
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
+  margin-block-end: 0;
 }
 .gn-menu .nav-links .back-btn {
-  -webkit-border-before: 1px solid var(--menu-hint-color);
-          border-block-start: 1px solid var(--menu-hint-color);
-  -webkit-border-after: 1px solid var(--menu-hint-color);
-          border-block-end: 1px solid var(--menu-hint-color);
+  border-block-start: 1px solid var(--menu-hint-color);
+  border-block-end: 1px solid var(--menu-hint-color);
   display: flex;
   align-items: center;
   padding: 10px 11px 10px 0;
-  width: 100%;
+  inline-size: 100%;
   font-size: 12px;
   text-transform: uppercase;
   color: var(--menu-title-text);
@@ -430,8 +408,7 @@
   color: var(--menu-text-color);
 }
 .gn-menu .nav-links .back-btn nano-icon {
-  -webkit-margin-end: 10px;
-          margin-inline-end: 10px;
+  margin-inline-end: 10px;
   font-size: 12px;
   color: var(--menu-icon-color);
 }
@@ -447,12 +424,12 @@
   --padding-top: 8px;
   --padding-bottom: 8px;
   margin: 0;
-  width: 50%;
+  inline-size: 50%;
   line-height: 1.8;
 }
 .gn-menu .nav-links--sites ::slotted(nano-nav-item),
 .gn-menu .nav-links--sites nano-nav-item {
-  width: 100%;
+  inline-size: 100%;
 }
 .gn-menu .nav-links .content {
   padding: 8px var(--menu-padding);
@@ -462,8 +439,7 @@
   padding-block: var(--menu-padding);
 }
 .gn-menu .login-btn nano-icon {
-  -webkit-margin-start: 10px;
-          margin-inline-start: 10px;
+  margin-inline-start: 10px;
 }
 .gn-menu .logout-btn {
   justify-content: flex-end;
@@ -478,7 +454,7 @@
   position: fixed;
   inset-inline: 0;
   inset-block-start: 0;
-  height: 100vh;
+  block-size: 100vh;
   z-index: -1;
   transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;
   visibility: hidden;
@@ -493,7 +469,7 @@
 .search-btn::before {
   content: "";
   background-color: #0c5a71;
-  height: 9px;
+  block-size: 9px;
   inset-inline: 0 5px;
   inset-block-end: -20px;
   position: absolute;
@@ -507,24 +483,23 @@
 }
 
 .search-bar {
-  height: 0;
+  block-size: 0;
   overflow: hidden;
   transition: 0.2s ease height;
   padding: 0 var(--bar-item-spacing);
   outline: none;
-  max-width: 45em;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+  max-inline-size: 45em;
+  margin-inline-start: auto;
+  flex: 1;
   /** Overrides for when search is displayed underneath, in it's own bar */
 }
 .search-bar .search-widget {
   margin: 0;
   overflow: inherit;
-  max-width: none;
-  max-height: none;
-  min-width: auto;
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
+  max-inline-size: none;
+  max-block-size: none;
+  min-inline-size: auto;
+  padding-inline-end: 0;
 }
 .search-bar .search-widget .search-icon--search {
   display: none;
@@ -550,9 +525,8 @@
 }
 .search-bar .search-widget .select__mask.sc-nano-select {
   line-height: 2.35em;
-  min-height: 2.35em;
-  -webkit-padding-before: 2px;
-          padding-block-start: 2px;
+  min-block-size: 2.35em;
+  padding-block-start: 2px;
 }
 .search-bar .search-inputs {
   padding: 0;
@@ -560,21 +534,17 @@
 }
 .search-bar .search-autocomplete {
   inset-block-start: 100%;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .search-widget {
-  -webkit-padding-end: var(--bar-item-spacing);
-          padding-inline-end: var(--bar-item-spacing);
-  -webkit-margin-start: var(--bar-item-spacing);
-          margin-inline-start: var(--bar-item-spacing);
-  -webkit-margin-end: auto;
-          margin-inline-end: auto;
+  padding-inline-end: var(--bar-item-spacing);
+  margin-inline: var(--bar-item-spacing) auto;
   position: relative;
   flex: 1 1 auto;
-  max-width: 500px;
-  min-width: 350px;
-  max-height: 36px;
+  max-inline-size: 500px;
+  min-inline-size: 350px;
+  max-block-size: 36px;
   inset-block-start: -1px;
 }
 .search-inputs {
@@ -587,26 +557,20 @@
 .search-autocomplete {
   position: absolute;
   inset-block-start: calc(100% + 15px);
-  width: calc(100% - var(--bar-item-spacing));
+  inline-size: calc(100% - var(--bar-item-spacing));
   inset-inline-start: 0;
   background: white;
   border: 2px solid var(--bar-color-tint);
   border-radius: 0 0 5px 5px;
   color: #4a4a4a;
-  -webkit-padding-before: calc(var(--bar-vertical-padding) / 2);
-          padding-block-start: calc(var(--bar-vertical-padding) / 2);
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-after: 1px;
-          padding-block-end: 1px;
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
+  padding-block: calc(var(--bar-vertical-padding) / 2) 1px;
+  padding-inline: 0 0;
   z-index: 1;
 }
 .search-autocomplete-hit {
   padding-block: calc(var(--bar-vertical-padding) / 4);
   padding-inline: var(--bar-item-spacing);
-  width: 100%;
+  inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -649,10 +613,9 @@
   align-items: center;
   color: #007495;
   justify-content: flex-end;
-  width: 100%;
+  inline-size: 100%;
   text-decoration: underline;
-  -webkit-border-before: 1px solid #e8eaea;
-          border-block-start: 1px solid #e8eaea;
+  border-block-start: 1px solid #e8eaea;
 }
 .search-autocomplete-submit:hover, .search-autocomplete-submit:focus {
   background-color: #e4e6e8;
@@ -669,7 +632,7 @@ nano-select.search-input {
   letter-spacing: 1.5px;
   font-size: 1.2em;
   flex: 0 1 auto;
-  width: auto;
+  inline-size: auto;
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -679,7 +642,7 @@ nano-select.search-input {
 }
 :host(:not(.ready)) nano-select.search-input {
   overflow: hidden;
-  max-height: 1em;
+  max-block-size: 1em;
 }
 nano-select.search-input .down-arrow {
   font-size: 0.65em;
@@ -694,7 +657,7 @@ nano-input.search-input {
   --padding-start: 21px;
   --nano-input-border-color--focus: black;
   font-size: 1.2em;
-  width: 206px;
+  inline-size: 206px;
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -710,7 +673,7 @@ nano-input.search-input {
 
 :host(:not(.ready)) nano-input.search-input {
   overflow: hidden;
-  max-height: 1em;
+  max-block-size: 1em;
 }
 nano-input.search-input .search-icon {
   background: none;
@@ -730,7 +693,7 @@ nano-input.search-input .search-icon--loader {
   }
 }
 nano-input.search-input .search-icon nano-icon {
-  height: 1.4em;
+  block-size: 1.4em;
 }
 
 .user-profile {
@@ -752,8 +715,8 @@ nano-input.search-input .search-icon nano-icon {
 }
 .user-profile .avatar-container img.logo-small {
   position: absolute;
-  height: 30px;
-  width: 30px;
+  block-size: 30px;
+  inline-size: 30px;
   inset-block-end: 0;
   inset-inline-end: 0;
   background-color: #27586e;
@@ -788,16 +751,14 @@ nano-input.search-input .search-icon nano-icon {
   position: relative;
 }
 .user-links .icon-btn {
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
+  padding-inline-end: 0;
   font-weight: 400;
   padding: 7px;
 }
 .user-links .icon-btn nano-icon {
-  -webkit-margin-start: 5px;
-          margin-inline-start: 5px;
-  width: 16px;
-  height: 16px;
+  margin-inline-start: 5px;
+  inline-size: 16px;
+  block-size: 16px;
   transform-origin: center;
   transition: transform 0.2s ease, color 0.2s ease;
 }
@@ -815,7 +776,7 @@ nano-input.search-input .search-icon nano-icon {
   transform: translate3d(0, 30px, 0);
   transition: transform 0.2s ease, opacity 0.2s ease;
   inset-inline-end: 0;
-  min-width: 318px;
+  min-inline-size: 318px;
   z-index: 2;
 }
 .user-links-panel:focus {
@@ -833,15 +794,13 @@ nano-input.search-input .search-icon nano-icon {
 }
 .user-links-panel-content a {
   padding: 11px 0;
-  -webkit-border-after: #669dac 1px solid;
-          border-block-end: #669dac 1px solid;
+  border-block-end: #669dac 1px solid;
 }
 .user-links-panel-content a:hover, .user-links-panel-content a:focus {
   color: #455556;
 }
 .user-links-panel-content a:last-child {
-  -webkit-border-after: none;
-          border-block-end: none;
+  border-block-end: none;
 }
 .user-links-panel-foot {
   background-color: #aac5cd;
@@ -914,7 +873,7 @@ nano-input.search-input .search-icon nano-icon {
   flex-direction: column;
   position: relative;
   line-height: 1.5;
-  height: 100%;
+  block-size: 100%;
   font-size: 0.9375em;
   font-size: clamp(0.77rem, 1vw, 0.9rem);
 }