@oslokommune/punkt-css 16.26.2 → 17.0.0

package/dist/css/components/header-global.css

@@ -0,0 +1,287 @@
+@charset "UTF-8";
+/*
+ * HeaderGlobal component
+ */
+/*
+ * Shared header patterns
+ *
+ * Mixins shared by the header variants (`pkt-header-service` and
+ * `pkt-header-global`). The service header is the source of truth — these
+ * mixins are extracted from it so the global header stays aligned.
+ *
+ * This file only defines mixins; it emits no CSS on its own and therefore
+ * is not `@forward`ed from the component index.
+ */
+/**
+ * Header chrome shared by every variant: base positioning plus the
+ * `--fixed`, `--sticky`, `--scroll-to-hide` and `--hidden` modifier states.
+ *
+ * Call inside a header base block; `&` resolves to the calling class
+ * (`.pkt-header-service` or `.pkt-header-global`).
+ */
+/**
+ * Mobile user area shared by every variant: on small screens the user
+ * button becomes a full-width bar with top/bottom borders and the user
+ * menu renders in flow directly below it (rather than as a floating
+ * dropdown). Placement of the user area into its own row is left to the
+ * caller (grid row for the service header, a flex row for the global
+ * header).
+ *
+ * `$base` is the variant's BEM block, e.g. `pkt-header-service`.
+ */
+/**
+ * Shared header grid. Logo (col 1), a flexible content cell (col 2,
+ * right-aligned) and the user cell (col 3). Row height follows
+ * `--pkt-header-height`, which steps down at the tablet and mobile
+ * breakpoints. On mobile the grid collapses to two columns and the user
+ * cell drops to a full-width second row — the same layout the service
+ * header uses.
+ *
+ * Call inside a header base block. `$base` is the variant's BEM block.
+ * `$mobile-height` lets a variant keep a taller bar on mobile (the service
+ * header drops to 64px, the global header stays at 88px).
+ */
+/**
+ * Standalone Oslo logo sizing shared by header variants: 64px on
+ * desktop/tablet, shrinking to 32px on mobile (the same sizes the service
+ * header uses for its logo without a service name).
+ *
+ * Call inside a header base block; `&` resolves to the calling class.
+ * `$mobile-height` is the logo height on mobile (the service header drops to
+ * 32px, the global header to 3.2rem).
+ */
+.pkt-header-global-spacer {
+  height: 6.5rem;
+}
+.pkt-header-global-spacer--tablet {
+  height: 5.5rem;
+}
+.pkt-header-global-spacer--mobile {
+  height: 5.5rem;
+}
+.pkt-header-global-spacer--mobile.pkt-header-global-spacer--has-user {
+  height: calc(5.5rem + 3.5rem);
+}
+
+.pkt-header-global {
+  position: relative;
+  z-index: 10;
+  background-color: var(--pkt-color-background-default);
+  border-bottom: 1px solid var(--pkt-color-border-subtle);
+}
+.pkt-header-global--fixed {
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.pkt-header-global--sticky {
+  position: sticky;
+  top: 0;
+}
+.pkt-header-global--scroll-to-hide {
+  transform: translate3d(0, 0, 0);
+  transition: 0.5s transform ease-in-out;
+}
+.pkt-header-global--hidden {
+  transform: translate3d(0, -100%, 0);
+}
+.pkt-header-global {
+  --pkt-header-height: 6.5rem;
+}
+.pkt-header-global--tablet {
+  --pkt-header-height: 5.5rem;
+}
+.pkt-header-global--mobile {
+  --pkt-header-height: 5.5rem;
+}
+.pkt-header-global {
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: var(--pkt-header-height) auto;
+  column-gap: 1.5rem;
+}
+.pkt-header-global--tablet {
+  column-gap: 1rem;
+}
+.pkt-header-global--mobile {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 0.5rem;
+}
+.pkt-header-global__logo-area {
+  grid-column: 1;
+  grid-row: 1;
+}
+.pkt-header-global__content {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+  max-width: 100%;
+}
+.pkt-header-global__user {
+  grid-column: 3;
+  grid-row: 1;
+}
+.pkt-header-global--mobile .pkt-header-global__user {
+  grid-column: 1/-1;
+  grid-row: 2;
+  justify-self: stretch;
+  padding: 0;
+}
+.pkt-header-global__logo-area {
+  align-items: center;
+  display: inline-flex;
+  padding-left: 2rem;
+}
+.pkt-header-global--tablet .pkt-header-global__logo-area {
+  padding-left: 1rem;
+}
+.pkt-header-global--mobile .pkt-header-global__logo-area {
+  padding-left: 0.5rem;
+}
+.pkt-header-global__content, .pkt-header-global__user {
+  align-items: center;
+  display: inline-flex;
+  min-width: 0;
+}
+.pkt-header-global__content {
+  column-gap: 1.5rem;
+}
+.pkt-header-global--tablet .pkt-header-global__content {
+  column-gap: 0.5rem;
+}
+.pkt-header-global--mobile .pkt-header-global__content {
+  column-gap: 0.5rem;
+  padding-right: 0.5rem;
+}
+.pkt-header-global__menu-toggle, .pkt-header-global__contact {
+  flex: 0 0 auto;
+}
+.pkt-header-global__user {
+  justify-self: end;
+  padding-right: 2rem;
+}
+.pkt-header-global--tablet:not(.pkt-header-global--mobile) .pkt-header-global__user {
+  padding-right: 1rem;
+}
+.pkt-header-global__user-container {
+  position: relative;
+  flex: 0 0 auto;
+}
+.pkt-header-global__user-container.is-open {
+  z-index: 100;
+}
+.pkt-header-global__logo {
+  --fg-color: var(--pkt-color-text-body-default);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+.pkt-header-global__logo a,
+.pkt-header-global__logo button {
+  display: flex;
+  align-items: center;
+}
+.pkt-header-global__logo svg {
+  aspect-ratio: 6/3;
+  height: 4rem;
+}
+.pkt-header-global--mobile .pkt-header-global__logo svg {
+  height: 3.2rem;
+}
+.pkt-header-global__search {
+  flex: 0 1 auto;
+  width: 22rem;
+  max-width: 100%;
+  min-width: 0;
+}
+.pkt-header-global__search .pkt-searchinput,
+.pkt-header-global__search .pkt-searchinput__field {
+  width: 100%;
+}
+.pkt-header-global__contact {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.pkt-header-global__user-button {
+  max-width: 20rem;
+}
+.pkt-header-global__user-button .pkt-btn__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.pkt-header-global__user-menu {
+  position: absolute;
+  right: 0;
+  width: max(15.5rem, 100%);
+  max-width: min(32rem, 90vw);
+}
+.pkt-header-global__user-menu.is-open {
+  z-index: 100;
+}
+.pkt-header-global__search-toggle, .pkt-header-global__search-toggle button {
+  flex: 0 0 auto;
+  border-radius: 50%;
+}
+.pkt-header-global--mobile .pkt-header-global__menu-toggle, .pkt-header-global--mobile .pkt-header-global__menu-toggle button {
+  border-radius: 50%;
+}
+.pkt-header-global__menu, .pkt-header-global__search-panel {
+  position: fixed;
+  top: max(0px, var(--pkt-header-global-top, 0px) + 6.5rem);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 90;
+  background-color: rgba(0, 0, 0, 0.55);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+.pkt-header-global__menu--tablet, .pkt-header-global__menu--mobile, .pkt-header-global__search-panel--tablet, .pkt-header-global__search-panel--mobile {
+  top: max(0px, var(--pkt-header-global-top, 0px) + 5.5rem);
+}
+.pkt-header-global__menu .pkt-header-menu {
+  width: min(var(--pkt-header-global-width, 100%), 75rem);
+  margin: 0 0 0 calc(var(--pkt-header-global-left, 0px) + max(0px, (var(--pkt-header-global-width, 100%) - 75rem) / 2));
+  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+.pkt-header-global__search-panel-inner {
+  margin-left: var(--pkt-header-global-left, 0px);
+  width: var(--pkt-header-global-width, 100%);
+  background-color: var(--pkt-color-background-default);
+  border-bottom: 1px solid var(--pkt-color-border-subtle);
+  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+}
+.pkt-header-global__search-panel-inner .pkt-searchinput,
+.pkt-header-global__search-panel-inner .pkt-searchinput__field {
+  width: 100%;
+}
+
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-container {
+  background-color: var(--pkt-color-background-default);
+  height: 3.5rem;
+  width: 100%;
+  z-index: 99;
+}
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:is(button), .pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button button {
+  height: 100%;
+  padding: 0 1.5rem;
+  width: 100%;
+  max-width: 100%;
+  border: none;
+  border-top: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+  border-bottom: 1px solid var(--pkt-color-border-subtle, #f2f2f2);
+}
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:not(button) {
+  display: contents;
+}
+.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-menu {
+  max-width: 100%;
+  position: unset;
+}

package/dist/css/components/header-global.min.css

@@ -0,0 +1 @@
+.pkt-header-global-spacer{height:6.5rem}.pkt-header-global-spacer--tablet{height:5.5rem}.pkt-header-global-spacer--mobile{height:5.5rem}.pkt-header-global-spacer--mobile.pkt-header-global-spacer--has-user{height:calc(5.5rem + 3.5rem)}.pkt-header-global{position:relative;z-index:10;background-color:var(--pkt-color-background-default);border-bottom:1px solid var(--pkt-color-border-subtle)}.pkt-header-global--fixed{width:100vw;position:fixed;top:0;left:0}.pkt-header-global--sticky{position:sticky;top:0}.pkt-header-global--scroll-to-hide{transform:translate3d(0, 0, 0);transition:.5s transform ease-in-out}.pkt-header-global--hidden{transform:translate3d(0, -100%, 0)}.pkt-header-global{--pkt-header-height: 6.5rem}.pkt-header-global--tablet{--pkt-header-height: 5.5rem}.pkt-header-global--mobile{--pkt-header-height: 5.5rem}.pkt-header-global{display:grid;align-items:center;grid-template-columns:auto minmax(0, 1fr) auto;grid-template-rows:var(--pkt-header-height) auto;column-gap:1.5rem}.pkt-header-global--tablet{column-gap:1rem}.pkt-header-global--mobile{grid-template-columns:auto minmax(0, 1fr);column-gap:.5rem}.pkt-header-global__logo-area{grid-column:1;grid-row:1}.pkt-header-global__content{grid-column:2;grid-row:1;justify-self:end;max-width:100%}.pkt-header-global__user{grid-column:3;grid-row:1}.pkt-header-global--mobile .pkt-header-global__user{grid-column:1/-1;grid-row:2;justify-self:stretch;padding:0}.pkt-header-global__logo-area{align-items:center;display:inline-flex;padding-left:2rem}.pkt-header-global--tablet .pkt-header-global__logo-area{padding-left:1rem}.pkt-header-global--mobile .pkt-header-global__logo-area{padding-left:.5rem}.pkt-header-global__content,.pkt-header-global__user{align-items:center;display:inline-flex;min-width:0}.pkt-header-global__content{column-gap:1.5rem}.pkt-header-global--tablet .pkt-header-global__content{column-gap:.5rem}.pkt-header-global--mobile .pkt-header-global__content{column-gap:.5rem;padding-right:.5rem}.pkt-header-global__menu-toggle,.pkt-header-global__contact{flex:0 0 auto}.pkt-header-global__user{justify-self:end;padding-right:2rem}.pkt-header-global--tablet:not(.pkt-header-global--mobile) .pkt-header-global__user{padding-right:1rem}.pkt-header-global__user-container{position:relative;flex:0 0 auto}.pkt-header-global__user-container.is-open{z-index:100}.pkt-header-global__logo{--fg-color: var(--pkt-color-text-body-default);flex:0 0 auto;display:flex;align-items:center}.pkt-header-global__logo a,.pkt-header-global__logo button{display:flex;align-items:center}.pkt-header-global__logo svg{aspect-ratio:6/3;height:4rem}.pkt-header-global--mobile .pkt-header-global__logo svg{height:3.2rem}.pkt-header-global__search{flex:0 1 auto;width:22rem;max-width:100%;min-width:0}.pkt-header-global__search .pkt-searchinput,.pkt-header-global__search .pkt-searchinput__field{width:100%}.pkt-header-global__contact{flex:0 0 auto;white-space:nowrap}.pkt-header-global__user-button{max-width:20rem}.pkt-header-global__user-button .pkt-btn__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}.pkt-header-global__user-menu{position:absolute;right:0;width:max(15.5rem,100%);max-width:min(32rem,90vw)}.pkt-header-global__user-menu.is-open{z-index:100}.pkt-header-global__search-toggle,.pkt-header-global__search-toggle button{flex:0 0 auto;border-radius:50%}.pkt-header-global--mobile .pkt-header-global__menu-toggle,.pkt-header-global--mobile .pkt-header-global__menu-toggle button{border-radius:50%}.pkt-header-global__menu,.pkt-header-global__search-panel{position:fixed;top:max(0px,var(--pkt-header-global-top, 0px) + 6.5rem);left:0;right:0;bottom:0;z-index:90;background-color:rgba(0,0,0,.55);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.pkt-header-global__menu--tablet,.pkt-header-global__menu--mobile,.pkt-header-global__search-panel--tablet,.pkt-header-global__search-panel--mobile{top:max(0px,var(--pkt-header-global-top, 0px) + 5.5rem)}.pkt-header-global__menu .pkt-header-menu{width:min(var(--pkt-header-global-width, 100%),75rem);margin:0 0 0 calc(var(--pkt-header-global-left, 0px) + max(0px,(var(--pkt-header-global-width, 100%) - 75rem)/2));box-shadow:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1)}.pkt-header-global__search-panel-inner{margin-left:var(--pkt-header-global-left, 0px);width:var(--pkt-header-global-width, 100%);background-color:var(--pkt-color-background-default);border-bottom:1px solid var(--pkt-color-border-subtle);box-shadow:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1);padding:1rem}.pkt-header-global__search-panel-inner .pkt-searchinput,.pkt-header-global__search-panel-inner .pkt-searchinput__field{width:100%}.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-container{background-color:var(--pkt-color-background-default);height:3.5rem;width:100%;z-index:99}.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:is(button),.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button button{height:100%;padding:0 1.5rem;width:100%;max-width:100%;border:none;border-top:1px solid var(--pkt-color-border-subtle, #f2f2f2);border-bottom:1px solid var(--pkt-color-border-subtle, #f2f2f2)}.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-button:not(button){display:contents}.pkt-header-global.pkt-header-global--mobile .pkt-header-global__user-menu{max-width:100%;position:unset}