@oslokommune/punkt-css 0.18.2

package/dist/scss/components/_badge.scss

@@ -0,0 +1,59 @@
+/* 
+ * Badge element
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+
+.pkt-badge {
+  display: inline-flex;
+  height: 1.5em;
+  margin-left: 0.4em;
+  padding: 0.25em 0.4em;
+  color: black;
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1em;
+  background: map.get(variables.$colors, 'color-blue-light');
+  border-radius: 1px;
+}
+
+.pkt-btn > .pkt-badge.pkt-badge--strong,
+.pkt-badge--strong {
+  color: map.get(variables.$colors, 'color-blue-light');
+  background: map.get(variables.$colors, 'color-blue-dark');
+}
+
+.pkt-btn > .pkt-badge.pkt-badge--info,
+.pkt-badge--info {
+  background: map.get(variables.$colors, 'color-yellow');
+}
+
+// Reduce size when used inside headings
+.pkt-badge.pkt-badge--small,
+.pkt-h1 > .pkt-badge,
+.pkt-h2 > .pkt-badge,
+.pkt-h3 > .pkt-badge {
+  font-size: 0.5em;
+  transform: translateY(-0.25em);
+}
+
+// Badges for buttons
+.pkt-btn:not(.pkt-btn--ter) > .pkt-badge {
+  color: inherit;
+  background: transparent;
+  border: 1px solid map.get(variables.$colors, 'color-blue-dark');
+  border-radius: 4px;
+}
+
+.pkt-btn--pri:not(.pkt-btn--neg) > .pkt-badge,
+.pkt-btn--neg.pkt-btn--ter > .pkt-badge,
+.pkt-btn--neg.pkt-btn--ghost > .pkt-badge {
+  border-color: white;
+}
+
+// Hack to fix pixel alignment on small buttons
+.pkt-btn--small > .pkt-badge {
+  padding-top: 0.28em;
+  transform: translateY(-0.1em);
+}

package/dist/scss/components/_breadcrumbs.scss

@@ -0,0 +1,130 @@
+/* 
+ * Breadcrumbs component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+
+.pkt-breadcrumbs {
+  position: relative;
+  font-size: map.get(variables.$font-size, 'size-14');
+  padding: 0 map.get(variables.$spacing, 'size-16');
+
+  @include bp('tablet-up') {
+    margin-bottom: map.get(variables.$spacing, 'size-16');
+  }
+
+  @include bp('laptop-up') {
+    padding: 0 map.get(variables.$spacing, 'size-64');
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    overflow: hidden;
+    list-style-type: none;
+    border-bottom: 1px solid transparent;
+    transition: all 0.4s ease-in-out;
+
+    @include bp('phablet-up') {
+      flex-direction: row;
+      padding: 0 1rem;
+      border-bottom-color: transparent !important;
+    }
+
+    &.expanded {
+      align-items: flex-start;
+      max-height: 25rem;
+      border-bottom-color: var(--color-gray);
+      transition: all 0.4s ease-in-out;
+
+      & > .pkt-breadcrumbs__item {
+        display: block;
+      }
+
+      & > .pkt-breadcrumbs__item:last-child {
+        display: block;
+      }
+    }
+  }
+
+  &__item {
+    position: relative;
+    display: none;
+    width: 100%;
+
+    @include bp('phablet-up') {
+      display: block;
+      width: auto;
+    }
+
+    &:last-child {
+      display: block;
+
+      @include bp('tablet-up') {
+        max-width: 300px;
+      }
+
+      .pkt-breadcrumbs__text {
+        max-width: 200px;
+      }
+    }
+  }
+
+  &__link {
+    text-decoration: none;
+    color: var(--color-blue-dark);
+
+    &:visited,
+    &:focus,
+    &:hover,
+    &:active {
+      color: var(--color-blue-dark);
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    white-space: nowrap;
+    padding: map.get(variables.$spacing, 'size-12')
+      map.get(variables.$spacing, 'size-16')
+      map.get(variables.$spacing, 'size-16') 0;
+  }
+
+  &__text {
+    display: block;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: map.get(variables.$font-weight, 'light');
+
+    @include bp('phablet-up') {
+      max-width: 120px;
+    }
+    @include bp('tablet-up') {
+      max-width: 200px;
+    }
+    @include bp('tablet-big-up') {
+      max-width: 300px;
+    }
+  }
+
+  &__icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: map.get(variables.$spacing, 'size-12');
+  }
+
+  &__icon-svg {
+    vertical-align: top;
+  }
+}

package/dist/scss/components/_footer.scss

@@ -0,0 +1,52 @@
+/* 
+ * Footer element
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+@use '../abstracts/mixins/typography';
+
+.pkt-footer {
+  background-color: var(--color-blue-dark);
+  padding: map.get(variables.$spacing, 'size-40') 0;
+  @include typography.get-text('pkt-txt-18-light');
+
+  &__list-item {
+    @include bp('phablet-up') {
+      display: inline-flex;
+    }
+  }
+
+  &__link {
+    color: currentColor;
+    display: flex;
+    padding: map.get(variables.$spacing, 'size-12') 0;
+    text-decoration: none;
+    align-items: flex-start;
+
+    @include bp('phablet-up') {
+      padding: map.get(variables.$spacing, 'size-12')
+        map.get(variables.$spacing, 'size-32')
+        map.get(variables.$spacing, 'size-12') 0;
+      align-items: center;
+    }
+    &:visited .pkt-footer__link-icon {
+      --fg-color: currentColor;
+    }
+    &:hover .pkt-footer__link-icon {
+      --fg-color: currentColor;
+    }
+  }
+  &__link-icon {
+    --fg-color: currentColor;
+    width: 24px;
+    height: 24px;
+    margin-right: map.get(variables.$spacing, 'size-12');
+    flex-shrink: 0;
+    margin-top: 3px;
+    @include bp('phablet-up') {
+      margin-top: 0;
+    }
+  }
+}

package/dist/scss/components/_header.scss

@@ -0,0 +1,125 @@
+/* 
+ * Header component
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/' as *;
+
+$-header-height: 56px;
+$-header-height-phablet-up: 60px;
+$-logo-width: calc($-header-height * 60 / 31);
+$-logo-width-phablet-up: calc($-header-height-phablet-up * 60 / 31);
+
+.pkt-header {
+  background-color: var(--color-white);
+  border-bottom: 1px solid var(--color-gray);
+  display: grid;
+  gap: 0 0;
+  grid-template-areas: 'header-logo header-actions';
+  grid-template-columns: minmax($-logo-width, $-logo-width-phablet-up) 1fr;
+  padding: map.get(variables.$spacing, 'size-16')
+    map.get(variables.$spacing, 'size-16');
+  align-items: center;
+
+  @include bp('laptop-up') {
+    padding: map.get(variables.$spacing, 'size-24')
+      map.get(variables.$spacing, 'size-40');
+  }
+
+  &__logo {
+    grid-area: header-logo;
+
+    &-link {
+      display: block;
+    }
+
+    &-svg {
+      height: $-header-height;
+      width: calc($-header-height * 60 / 31);
+
+      @include bp('phablet-up') {
+        height: $-header-height-phablet-up;
+        width: calc($-header-height-phablet-up * 60 / 31);
+      }
+    }
+  }
+  &__actions {
+    grid-area: header-actions;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  &__action {
+    align-items: center;
+    display: inline-flex;
+    flex-direction: row;
+    margin: 0 0 0 map.get(variables.$spacing, 'size-16');
+
+    @include bp('phablet-up') {
+      height: $-header-height-phablet-up;
+      margin: 0 0 0 map.get(variables.$spacing, 'size-32');
+    }
+
+    &-text {
+      @include get-text('pkt-txt-18-light');
+      display: inline-flex;
+      align-items: center;
+      max-width: 3.125rem;
+      white-space: nowrap;
+
+      @include bp('phablet-up') {
+        max-width: none;
+      }
+    }
+    &-textrow {
+      display: inline-flex;
+      @include get-text('pkt-txt-18-light');
+      max-width: 3.125rem;
+
+      @include bp('phablet-up') {
+        max-width: none;
+      }
+      &.text-row-inline {
+        display: inline;
+      }
+    }
+    &-change {
+      margin-left: map.get(variables.$spacing, 'size-12');
+    }
+
+    &-icon {
+      --fg-color: var(--color-blue-dark);
+      height: 1.5rem;
+      line-height: 1rem;
+      width: 1.5rem;
+      margin-left: map.get(variables.$spacing, 'size-4');
+
+      @include bp('tablet-up') {
+        height: 1.5rem;
+        margin-left: 0.5rem;
+        width: 1.5rem;
+      }
+    }
+  }
+
+  & .pkt-btn {
+    @include get-text('pkt-txt-18-medium');
+    margin: 0 0 0 map.get(variables.$spacing, 'size-4');
+    padding: map.get(variables.$spacing, 'size-12')
+      map.get(variables.$spacing, 'size-12');
+
+    @include bp('tablet-up') {
+      margin: 0 0 0 map.get(variables.$spacing, 'size-32');
+      padding: map.get(variables.$spacing, 'size-12')
+        map.get(variables.$spacing, 'size-16');
+    }
+    &:hover .pkt-header__action-icon {
+      --fg-color: var(--color-hover);
+    }
+    &__text--representing {
+      @include get-text('pkt-txt-18-light');
+    }
+  }
+}

package/dist/scss/components/_icon.scss

@@ -0,0 +1,83 @@
+/* 
+ * Icons
+ *
+ * TODO: use SVG icons instead
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+
+.pkt-icon {
+  display: inline-flex;
+  height: 2rem;
+  width: 2rem;
+
+  &.small {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  &.medium {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  &.large {
+    height: 4rem;
+    width: 4rem;
+  }
+}
+
+.pkt-font-icon {
+  display: inline-block;
+  font-size: map.get(variables.$font-size, 'large');
+  font-family: #{map.get(variables.$font-family, 'icon')};
+
+  &--chevron-left::before {
+    content: '\E907';
+  }
+
+  &--chevron-right::before {
+    content: '\E908';
+  }
+
+  &--chevron-up::before {
+    content: '\E909';
+  }
+
+  &--chevron-down::before {
+    content: '\E906';
+  }
+
+  &--user::before {
+    content: '\E921';
+  }
+
+  &--menu::before {
+    content: '\E917';
+  }
+
+  &--close::before {
+    content: '\E923';
+  }
+
+  &--search::before {
+    content: '\E915';
+  }
+
+  &--trash::before {
+    content: '\E92D';
+  }
+
+  &--edit::before {
+    content: '\E949';
+  }
+
+  &--filter::before {
+    content: '\E910';
+  }
+
+  &--envelope::before {
+    content: '\E929';
+  }
+}

package/dist/scss/components/_index.scss

@@ -0,0 +1,8 @@
+@forward 'alert';
+@forward 'badge';
+@forward 'backlink';
+@forward 'breadcrumbs';
+@forward 'footer';
+@forward 'header';
+@forward 'icon';
+@forward 'teaserlist';

package/dist/scss/components/_teaserlist.scss

@@ -0,0 +1,56 @@
+/* 
+ * Header element
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+
+.pkt-teaserlist {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto auto;
+  justify-items: center;
+  position: relative;
+  row-gap: 30px;
+
+  @include bp('tablet-up') {
+    column-gap: 30px;
+    grid-template-columns: 200px auto;
+    grid-template-rows: auto;
+    justify-items: normal;
+  }
+
+  @include bp('tablet-big-up') {
+    grid-template-columns: 300px auto;
+  }
+
+  &.flip {
+    @include bp('tablet-up') {
+      grid-template-columns: auto 200px;
+    }
+    @include bp('tablet-big-up') {
+      grid-template-columns: auto 300px;
+    }
+  }
+
+  &.flip > &__img {
+    @include bp('tablet-up') {
+      grid-column: 2;
+    }
+  }
+  &.flip > &__txt {
+    @include bp('tablet-up') {
+      grid-column: 1;
+      grid-row: 1;
+    }
+  }
+
+  &__img {
+    width: 150px;
+
+    @include bp('tablet-up') {
+      width: 100%;
+    }
+  }
+}