@oslokommune/punkt-css 13.21.0 → 14.0.0

package/dist/scss/components/_header-user-menu.scss

@@ -0,0 +1,127 @@
+/*
+ * Header User Menu component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/' as *;
+
+// User Menu specific styles
+.pkt-header-service__user-menu {
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1.25rem;
+    pointer-events: none;
+    background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.06));
+    transform: translateY(100%);
+  }
+}
+.pkt-user-menu,
+.pkt-header-service__slot-menu {
+  background-color: var(--pkt-color-background-default);
+  border: 2px solid var(--pkt-color-border-subtle);
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .pkt-header-service {
+    &__slot-list {
+      margin: map.get(variables.$spacing, 'size-32');
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: map.get(variables.$spacing, 'size-32');
+      padding: 0;
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__sublist {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: map.get(variables.$spacing, 'size-24');
+  }
+
+  &__item {
+    display: block;
+    padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-32');
+
+    &:nth-child(odd) {
+      background-color: var(--pkt-color-background-subtle);
+    }
+
+    @at-root [data-mode='dark'] & {
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--pkt-color-border-gray);
+      }
+    }
+  }
+
+  &__subitem {
+    display: block;
+
+    &:nth-child(odd) {
+      background-color: transparent;
+    }
+  }
+
+  &__label {
+    @include get-text('pkt-txt-14-medium');
+    color: var(--pkt-color-text-placeholder);
+    margin-bottom: map.get(variables.$spacing, 'size-8');
+  }
+
+  &__name {
+    @include get-text('pkt-txt-18-medium');
+  }
+
+  &__description {
+    @include get-text('pkt-txt-16-light');
+  }
+
+  &__action {
+    margin-top: map.get(variables.$spacing, 'size-16');
+  }
+
+  &__button {
+    font-weight: normal;
+
+    &:hover {
+      background-color: none;
+    }
+  }
+
+  &__link {
+    @include get-text('pkt-txt-18-light');
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    .pkt-link span {
+      align-self: anchor-center;
+    }
+
+    .pkt-link__icon {
+      margin-right: map.get(variables.$spacing, 'size-8');
+      align-self: baseline;
+    }
+  }
+}

package/dist/scss/components/_index.scss

@@ -9,6 +9,9 @@
 @forward 'combobox';
 @forward 'footer';
 @forward 'header';
+@forward 'header-service';
+@forward 'header-service-mobile';
+@forward 'header-user-menu';
 @forward 'heading';
 @forward 'icon';
 @forward 'inputwrapper';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "13.21.0",
+  "version": "14.0.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^13.16.0",
+    "@oslokommune/punkt-assets": "^14.0.0",
     "astro": "^5.7.5",
     "edit-json-file": "^1.8.0",
     "fs-extra": "^11.2.0",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "7559532feebf044efeec97d19d74c9c77e46a5b3"
+  "gitHead": "65ed905c2410ac9ea347ede2e54a59b2fb1417cc"
 }