@oslokommune/punkt-css 0.18.2

package/dist/scss/elements/_button.scss

@@ -0,0 +1,412 @@
+/* Button element!
+ *
+ * Size: small, medium, large
+ * Skin: primary, secondary, tertiary, flat, primary-confirm
+ * State: normal, focus, hover, active, disabled
+ * Variant: label-only, icon-left, icon-right, icon-only
+ * Mode: light, dark
+ */
+
+@use 'sass:map';
+@use 'sass:selector';
+@use '../abstracts/variables';
+@use '../abstracts/placeholders';
+
+$-module-name: 'pkt-btn';
+$-sizes: (
+  'medium': (
+    'font-size': 'size-18',
+    'line-height': 1.5em,
+    'padding': 0.625rem 0.9375rem,
+    'icon-m-icon-left': 0.09375rem 0.3125rem 0 0,
+    'icon-m-icon-right': 0.09375rem 0 0 0.3125rem,
+    'icon-m-icon-only': 0.09375rem -0.21875rem,
+    'icon-size': 1.5rem,
+  ),
+  'small': (
+    'font-size': 'size-16',
+    'line-height': 1.5em,
+    'padding': 0.3125rem 0.625rem,
+    'icon-m-icon-left': 0 0.3125rem 0 0,
+    'icon-m-icon-right': 0 0 0 0.3125rem,
+    'icon-m-icon-only': 0 -0.3125rem,
+    'icon-size': 1.5rem,
+  ),
+  'large': (
+    'font-size': 'size-24',
+    'line-height': 1.4166666667em,
+    'padding': 0.9375rem 1.25rem,
+    'icon-m-icon-left': 0.0625rem 0.625rem 0 0,
+    'icon-m-icon-right': 0.0625rem 0 0 0.625rem,
+    'icon-m-icon-only': 0.0625rem -0.25rem,
+    'icon-size': 2rem,
+  ),
+);
+$-skins: (
+  'primary': (
+    'light': (
+      'link-bg': --color-blue-dark,
+      'link-bc': --color-blue-dark,
+      'link-txt': --color-white,
+      'focus-bg': --color-active,
+      'focus-bc': --color-active,
+      'focus-txt': --color-white,
+      'hover-bg': --color-active,
+      'hover-bc': --color-active,
+      'hover-txt': --color-white,
+      'active-bg': --color-active,
+      'active-bc': --color-active,
+      'active-txt': --color-white,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+    'dark': (
+      'link-bg': --color-blue-light,
+      'link-bc': --color-blue-light,
+      'link-txt': --color-blue-dark,
+      'focus-bg': --color-blue,
+      'focus-bc': --color-blue,
+      'focus-txt': --color-blue-dark,
+      'hover-bg': --color-blue,
+      'hover-bc': --color-blue,
+      'hover-txt': --color-blue-dark,
+      'active-bg': --color-blue,
+      'active-bc': --color-blue,
+      'active-txt': --color-blue-dark,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+  ),
+  'secondary': (
+    'light': (
+      'link-bg': --color-transparent,
+      'link-bc': --color-blue-dark,
+      'link-txt': --color-blue-dark,
+      'focus-bg': --color-transparent,
+      'focus-bc': --color-active,
+      'focus-txt': --color-active,
+      'hover-bg': --color-transparent,
+      'hover-bc': --color-active,
+      'hover-txt': --color-active,
+      'active-bg': --color-active,
+      'active-bc': --color-active,
+      'active-txt': --color-white,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+    'dark': (
+      'link-bg': --color-transparent,
+      'link-bc': --color-white,
+      'link-txt': --color-white,
+      'focus-bg': --color-blue,
+      'focus-bc': --color-blue,
+      'focus-txt': --color-blue-dark,
+      'hover-bg': --color-transparent,
+      'hover-bc': --color-blue,
+      'hover-txt': --color-blue,
+      'active-bg': --color-blue,
+      'active-bc': --color-blue,
+      'active-txt': --color-blue-dark,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+  ),
+  'tertiary': (
+    'light': (
+      'link-bg': --color-transparent,
+      'link-bc': --color-yellow,
+      'link-txt': --color-blue-dark,
+      'focus-bg': --color-transparent,
+      'focus-bc': --color-active,
+      'focus-txt': --color-active,
+      'hover-bg': --color-transparent,
+      'hover-bc': --color-active,
+      'hover-txt': --color-active,
+      'active-bg': --color-active,
+      'active-bc': --color-active,
+      'active-txt': --color-white,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+    'dark': (
+      'link-bg': --color-transparent,
+      'link-bc': --color-yellow,
+      'link-txt': --color-white,
+      'focus-bg': --color-transparent,
+      'focus-bc': --color-blue,
+      'focus-txt': --color-blue,
+      'hover-bg': --color-transparent,
+      'hover-bc': --color-blue,
+      'hover-txt': --color-blue,
+      'active-bg': --color-blue,
+      'active-bc': --color-blue,
+      'active-txt': --color-blue-dark,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+  ),
+  'flat': (
+    'light': (
+      'link-bg': --color-transparent,
+      'link-bc': --color-transparent,
+      'link-txt': --color-blue-dark,
+      'focus-bg': --color-gray,
+      'focus-bc': --color-gray,
+      'focus-txt': --color-active,
+      'hover-bg': --color-gray,
+      'hover-bc': --color-gray,
+      'hover-txt': --color-active,
+      'active-bg': --color-transparent,
+      'active-bc': --color-transparent,
+      'active-txt': --color-active,
+      'disabled-bg': --color-transparent,
+      'disabled-bc': --color-transparent,
+      'disabled-txt': --color-grayscale-30,
+    ),
+    'dark': (
+      'link-bg': --color-transparent,
+      'link-bc': --color-transparent,
+      'link-txt': --color-white,
+      'focus-bg': --color-blue-5,
+      'focus-bc': --color-blue-5,
+      'focus-txt': --color-blue,
+      'hover-bg': --color-blue-5,
+      'hover-bc': --color-blue-5,
+      'hover-txt': --color-blue,
+      'active-bg': --color-transparent,
+      'active-bc': --color-transparent,
+      'active-txt': --color-blue,
+      'disabled-bg': --color-transparent,
+      'disabled-bc': --color-transparent,
+      'disabled-txt': --color-white,
+    ),
+  ),
+  'primary-confirm': (
+    'light': (
+      'link-bg': --color-green,
+      'link-bc': --color-green,
+      'link-txt': --color-blue-dark,
+      'focus-bg': --color-active,
+      'focus-bc': --color-active,
+      'focus-txt': --color-white,
+      'hover-bg': --color-active,
+      'hover-bc': --color-active,
+      'hover-txt': --color-white,
+      'active-bg': --color-active,
+      'active-bc': --color-active,
+      'active-txt': --color-white,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+    'dark': (
+      'link-bg': --color-green,
+      'link-bc': --color-green,
+      'link-txt': --color-blue-dark,
+      'focus-bg': --color-blue,
+      'focus-bc': --color-blue,
+      'focus-txt': --color-blue-dark,
+      'hover-bg': --color-blue,
+      'hover-bc': --color-blue,
+      'hover-txt': --color-blue-dark,
+      'active-bg': --color-blue,
+      'active-bc': --color-blue,
+      'active-txt': --color-blue-dark,
+      'disabled-bg': --color-gray,
+      'disabled-bc': --color-gray,
+      'disabled-txt': --color-grayscale-30,
+    ),
+  ),
+);
+
+@mixin -print-skin-as-css-vars($name, $o, $mode) {
+  @each $key, $value in $o {
+    // Only print primary skin and css vars that differ from primary
+    @if $name == 'primary' or $value != map.get($-skins, 'primary', $mode, $key)
+    {
+      --btn-#{$key}: var(#{$value});
+    }
+  }
+}
+
+@mixin -size($name, $o) {
+  @if $name == medium {
+    font-size: map.get(variables.$font-size, map.get($o, 'font-size'));
+    line-height: map.get($o, 'line-height');
+    padding: map.get($o, 'padding');
+
+    &__icon {
+      height: map.get($o, 'icon-size');
+      width: map.get($o, 'icon-size');
+      margin: map.get($o, 'icon-margin');
+    }
+
+    // button variants (base)
+    &--label-only {
+      .#{$-module-name}__icon {
+        display: none;
+      }
+    }
+
+    &--icon-left {
+      flex-direction: row;
+
+      .#{$-module-name}__icon {
+        margin: map.get($o, 'icon-m-icon-left');
+      }
+    }
+
+    &--icon-right {
+      flex-direction: row-reverse;
+
+      .#{$-module-name}__icon {
+        margin: map.get($o, 'icon-m-icon-right');
+      }
+    }
+    &--icon-only {
+      .#{$-module-name}__text {
+        @extend %sr-only;
+      }
+      .#{$-module-name}__icon {
+        margin: map.get($o, 'icon-m-icon-only');
+      }
+    }
+  } @else {
+    &--#{$name} {
+      font-size: map.get(variables.$font-size, map.get($o, 'font-size'));
+      line-height: map.get($o, 'line-height');
+      padding: map.get($o, 'padding');
+    }
+    &--#{$name} &__icon {
+      height: map.get($o, 'icon-size');
+      width: map.get($o, 'icon-size');
+      margin: map.get($o, 'icon-margin');
+    }
+    .#{$-module-name}--#{$name}.#{$-module-name}--icon-left &__icon {
+      margin: map.get($o, 'icon-m-icon-left');
+    }
+    .#{$-module-name}--#{$name}.#{$-module-name}--icon-right &__icon {
+      margin: map.get($o, 'icon-m-icon-right');
+    }
+    .#{$-module-name}--#{$name}.#{$-module-name}--icon-only &__icon {
+      margin: map.get($o, 'icon-m-icon-only');
+    }
+  }
+}
+
+@mixin -skin($name, $o) {
+  $css-skin: '';
+  @if $name != primary {
+    $css-skin: --#{$name};
+  }
+
+  .#{$-module-name}#{$css-skin} {
+    @include -print-skin-as-css-vars(
+      $name,
+      map.get($-skins, $name, 'light'),
+      'light'
+    );
+  }
+  @at-root [data-mode='dark'] .#{$-module-name}#{$css-skin} {
+    @include -print-skin-as-css-vars(
+      $name,
+      map.get($-skins, $name, 'dark'),
+      'dark'
+    );
+  }
+}
+
+// Print css vars for hvert skin
+@each $key, $value in $-skins {
+  @include -skin($key, map.get($value, 'light'));
+}
+
+// Selve knappe-klassen
+.#{$-module-name} {
+  border-radius: 0;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-weight: normal;
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: top;
+  background-color: var(--btn-link-bg);
+  border: 2px solid var(--btn-link-bc);
+  color: var(--btn-link-txt);
+  text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.3em;
+  text-align: left;
+
+  &[class*='pkt-btn--icon'] > .pkt-btn__icon {
+    display: block;
+  }
+
+  &__icon {
+    --fg-color: currentColor;
+    display: none;
+    flex-shrink: 0;
+  }
+
+  &:link,
+  &:visited {
+    color: var(--btn-link-txt);
+  }
+
+  @at-root a.#{$-module-name}:focus,
+    &:enabled:focus,
+    &.#{$-module-name}--focus {
+    background-color: var(--btn-focus-bg);
+    border-color: var(--btn-focus-bc);
+    color: var(--btn-focus-txt);
+    outline: 0;
+    text-decoration: underline;
+  }
+  @at-root a.#{$-module-name}:hover,
+    &:enabled:hover,
+    &.#{$-module-name}--hover {
+    background-color: var(--btn-hover-bg);
+    border-color: var(--btn-hover-bc);
+    color: var(--btn-hover-txt);
+    outline: 0;
+    text-decoration: underline;
+  }
+  @at-root a.#{$-module-name}:active,
+    &:enabled:active,
+    &.#{$-module-name}--active,
+    &.#{$-module-name}--active:hover {
+    background-color: var(--btn-active-bg);
+    border-color: var(--btn-active-bc);
+    color: var(--btn-active-txt);
+    outline: 0;
+    text-decoration: none;
+  }
+  &:disabled {
+    background-color: var(--btn-disabled-bg);
+    border-color: var(--btn-disabled-bc);
+    color: var(--btn-disabled-txt);
+    cursor: inherit;
+  }
+
+  // button sizes & variants
+  @each $key, $value in $-sizes {
+    @include -size($key, $value);
+  }
+
+  // Til slutt: dette er okay å gjøre siden vi spesifiserer en synlig focus state
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}

package/dist/scss/elements/_form.scss

@@ -0,0 +1,190 @@
+/* 
+ * Form elements
+ * https://css-tricks.com/html-inputs-and-labels-a-love-story/
+ * 
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+
+$-checkbox-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+
+/* TODO: move to animation.scss */
+@keyframes enter {
+  from {
+    transform: scaleY(0);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}
+
+/* TODO: Contemplate and decide if this should be split up to multiple files or not.
+ * button is only one without pkt-form prefix. Is that ok???
+ */
+.pkt-form {
+  &-group {
+    margin-bottom: map.get(variables.$spacing, 'size-24');
+
+    &:focus-within {
+      color: var(--color-active);
+    }
+  }
+
+  /* EXPLICIT LABEL (recommended for use)
+   * - the label is connected to an input via "for" and "id"
+   */
+  &-label {
+    width: 100%;
+  }
+
+  &-help {
+    margin: 0.25em 0;
+    font-size: map.get(variables.$font-size, 'size-14');
+    line-height: 1.25em;
+    opacity: 0.9;
+  }
+
+  &-validation {
+    animation: enter 0.2s ease-in forwards;
+    background-color: var(--color-red);
+    border: 2px solid var(--color-red);
+    font-size: map.get(variables.$font-size, 'size-14');
+    line-height: 2rem;
+    margin: map.get(variables.$spacing, 'size-16') 0 0;
+    padding: 0.4375rem 0.5rem;
+    transform-origin: 0 0;
+
+    &--warning {
+      background-color: var(--color-yellow);
+      border-color: var(--color-yellow);
+    }
+
+    &--error {
+      background-color: var(--color-red);
+      border-color: var(--color-red);
+    }
+  }
+
+  &-input,
+  &-textarea {
+    appearance: none; // Fix appearance on date inputs in Safari
+    background-clip: padding-box;
+    background-color: var(--color-white);
+    border: 2px solid var(--color-blue-dark);
+    border-radius: 0;
+    color: var(--color-blue-dark);
+    display: block;
+    font-size: map.get(variables.$font-size, 'size-16');
+    font-weight: map.get(variables.$font-weight, 'regular');
+    height: 3.125rem;
+    line-height: 2rem;
+    margin: 0;
+    padding: 0.4375rem 0.5rem;
+    position: relative;
+    width: 100%;
+
+    &:focus {
+      background-color: var(--color-white);
+      border-color: var(--color-active);
+      box-shadow: 0 0 var(--color-active);
+      color: var(--color-active);
+      outline: 2px solid var(--color-active);
+    }
+
+    /* Placeholder
+     * 1. Override Firefox's default opacity
+     */
+    &::placeholder {
+      color: var(--color-grayscale-30);
+      opacity: 1; /* 1 */
+    }
+
+    & + .pkt-form-validation {
+      display: none;
+    }
+
+    &:not(:placeholder-shown):invalid {
+      border-color: var(--color-red);
+
+      & + .pkt-form-validation {
+        display: inherit;
+      }
+    }
+
+    &:disabled,
+    &[readonly] {
+      background-color: var(--color-gray);
+      border-color: var(--color-grayscale-30);
+      color: var(--color-grayscale-30);
+      cursor: inherit;
+    }
+
+    &[required],
+    &:required {
+      // TODO
+    }
+  }
+
+  &-check-input {
+    appearance: none;
+    background-color: var(--color-white);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: 2px solid var(--color-blue-dark);
+    display: inline-block;
+    margin: 0.125rem 0.25rem 0 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    transition: all 0.3s ease-out;
+    vertical-align: top;
+
+    &[type='checkbox'] {
+      border-radius: 0;
+    }
+
+    &[type='radio'] {
+      border-radius: 50%;
+    }
+
+    &:hover {
+      border-color: var(--color-active);
+    }
+
+    &:active {
+      border-color: var(--color-active);
+      outline: 2px solid var(--color-active);
+    }
+
+    &:focus {
+      border-color: var(--color-active);
+      outline: 2px solid var(--color-hover);
+    }
+
+    &:checked {
+      &[type='radio'] {
+        background-color: var(--color-white);
+        border: 6px solid var(--color-active);
+      }
+      &[type='checkbox'] {
+        background-color: var(--color-active);
+        background-image: functions.escape-svg($-checkbox-img);
+        border-color: var(--color-active);
+      }
+    }
+
+    // Disabled styles
+    &:disabled {
+      border-color: var(--color-grayscale-30);
+      cursor: not-allowed;
+    }
+
+    &:disabled ~ .pkt-form-label {
+      color: var(--color-grayscale-30);
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/scss/elements/_hr.scss

@@ -0,0 +1,8 @@
+/* 
+ * Horisontal divider <hr>
+ */
+
+.pkt-hr {
+  border: 0;
+  border-top: 1px solid var(--color-grayscale-20);
+}

package/dist/scss/elements/_image.scss

@@ -0,0 +1,32 @@
+/* 
+ * Image elements
+ */
+
+/*
+DEBATE:
+CSS reset in minside-frontend sets all images to be fluid by default. However, this breaks
+a lot of third-party widgets like Google Maps, as they are not expecting the images within themselves
+to be resized from the outside.
+
+Therefore, this is removed from the reset here, and images who need to be fluid need a class for it.
+*/
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img-round {
+  border-radius: 50%;
+  overflow: hidden;
+  object-fit: cover;
+}
+
+//
+// Figure
+//
+
+.figure {
+  // Ensures the caption-text aligns with image.
+  display: inline-block;
+}

package/dist/scss/elements/_index.scss

@@ -0,0 +1,8 @@
+@forward "button";
+@forward "form";
+@forward "hr";
+@forward "image";
+@forward "list";
+@forward "section";
+@forward "select";
+@forward "table";