@helsenorge/designsystem-react 1.0.0-beta106 → 1.0.0-beta107

package/scss/_fonts.scss

@@ -1,112 +1,112 @@
-@import './font-settings.scss';
-
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
-    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'), url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 200;
-  font-display: swap;
-  src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/source-sans-pro-300-light.woff) format('woff'),
-    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
-    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'), url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
-    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
-    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'), url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/source-sans-pro-900-black.woff) format('woff'),
-    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
-    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'), url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
-}
+@import './font-settings.scss';
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
+    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'), url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
+    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/source-sans-pro-300-light.woff) format('woff'),
+    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
+    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'), url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
+    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
+    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
+    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
+    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
+    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'), url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/source-sans-pro-900-black.woff) format('woff'),
+    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
+    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'), url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
+}

package/scss/_grid.scss

@@ -1 +1 @@
-@import 'bootstrap/scss/bootstrap-grid';
+@import 'bootstrap/scss/bootstrap-grid';

package/scss/_input.scss

@@ -1,176 +1,176 @@
-@mixin input-wrapper {
-  width: 100%;
-  line-height: 0;
-
-  &__label-wrapper {
-    display: inline-flex;
-    align-items: center;
-    line-height: getSpacer(m);
-    font-size: $font-size-sm;
-    font-weight: 600;
-    padding-bottom: getSpacer(xs);
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      line-height: getSpacer(l);
-      font-size: $font-size-md;
-    }
-
-    &--on-dark {
-      color: $white;
-    }
-  }
-
-  &__after-label-children {
-    padding-left: 0.75rem;
-  }
-}
-
-@mixin content-wrapper {
-  font-size: $font-size-sm;
-  width: 100%;
-  border: $neutral700 2px solid;
-  outline: none;
-  background: $white;
-
-  svg:first-child {
-    padding-left: 0.375rem;
-  }
-
-  svg:last-child {
-    padding-right: 0.375rem;
-  }
-
-  &--bigform {
-    padding: getSpacer(2xs) 0;
-
-    svg:first-child {
-      padding-left: getSpacer(2xs);
-    }
-
-    svg:last-child {
-      padding-right: getSpacer(2xs);
-    }
-  }
-
-  &:hover {
-    background: $neutral50;
-    border-color: $neutral700;
-    box-shadow: 0px 0px 0px 1px $neutral700;
-
-    &:focus-within {
-      border-color: $black;
-      box-shadow: 0px 0px 0px 2px $black;
-    }
-  }
-  &:focus-within {
-    background: $white;
-    border-color: $neutral900;
-    box-shadow: 0px 0px 0px 2px $neutral900;
-  }
-
-  &--on-blueberry {
-    border-color: $blueberry500;
-
-    &:hover {
-      background: $blueberry50;
-      box-shadow: 0px 0px 0px 1px $blueberry500;
-      border-color: $blueberry500;
-    }
-
-    &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
-    }
-  }
-  &--on-dark {
-    border-color: $blueberry900;
-    &:hover {
-      background: $blueberry50;
-      border-color: $blueberry900;
-      box-shadow: 0px 0px 0px 1px $blueberry900;
-    }
-    &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
-    }
-  }
-  &--invalid {
-    border-color: $cherry500;
-
-    &:hover {
-      background: $cherry100;
-      border-color: $cherry500;
-      box-shadow: 0px 0px 0px 2px $cherry500;
-    }
-    &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
-    }
-  }
-  &--transparent {
-    background: transparent;
-
-    &:hover {
-      background: $neutral100;
-    }
-
-    &:focus-within {
-      background: $white;
-    }
-  }
-  &--transparent#{&}--on-blueberry {
-    &:hover {
-      background: $blueberry100;
-    }
-
-    &:focus-within {
-      background: $white;
-    }
-  }
-
-  &--disabled {
-    background: $neutral50;
-    border-color: $neutral500;
-    color: $neutral500;
-
-    &:hover {
-      background: $neutral50;
-      border-color: $neutral500;
-      box-shadow: none;
-    }
-  }
-
-  &__input {
-    line-height: 1.625rem;
-    font-family: inherit;
-    font-size: $font-size-sm;
-    padding: 0 getSpacer(2xs);
-    border: none;
-    outline: none;
-    background-color: transparent;
-    width: 100%;
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
-    }
-
-    &::placeholder {
-      color: $neutral500;
-    }
-
-    &--disabled {
-      color: $neutral500;
-    }
-
-    &:first-child {
-      padding-left: getSpacer(s);
-    }
-
-    &:last-child {
-      padding-right: getSpacer(s);
-    }
-  }
-}
+@mixin input-wrapper {
+  width: 100%;
+  line-height: 0;
+
+  &__label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__after-label-children {
+    padding-left: 0.75rem;
+  }
+}
+
+@mixin content-wrapper {
+  font-size: $font-size-sm;
+  width: 100%;
+  border: $neutral700 2px solid;
+  outline: none;
+  background: $white;
+
+  svg:first-child {
+    padding-left: 0.375rem;
+  }
+
+  svg:last-child {
+    padding-right: 0.375rem;
+  }
+
+  &--bigform {
+    padding: getSpacer(2xs) 0;
+
+    svg:first-child {
+      padding-left: getSpacer(2xs);
+    }
+
+    svg:last-child {
+      padding-right: getSpacer(2xs);
+    }
+  }
+
+  &:hover {
+    background: $neutral50;
+    border-color: $neutral700;
+    box-shadow: 0px 0px 0px 1px $neutral700;
+
+    &:focus-within {
+      border-color: $black;
+      box-shadow: 0px 0px 0px 2px $black;
+    }
+  }
+  &:focus-within {
+    background: $white;
+    border-color: $neutral900;
+    box-shadow: 0px 0px 0px 2px $neutral900;
+  }
+
+  &--on-blueberry {
+    border-color: $blueberry500;
+
+    &:hover {
+      background: $blueberry50;
+      box-shadow: 0px 0px 0px 1px $blueberry500;
+      border-color: $blueberry500;
+    }
+
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--on-dark {
+    border-color: $blueberry900;
+    &:hover {
+      background: $blueberry50;
+      border-color: $blueberry900;
+      box-shadow: 0px 0px 0px 1px $blueberry900;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--invalid {
+    border-color: $cherry500;
+
+    &:hover {
+      background: $cherry100;
+      border-color: $cherry500;
+      box-shadow: 0px 0px 0px 2px $cherry500;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--transparent {
+    background: transparent;
+
+    &:hover {
+      background: $neutral100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+  &--transparent#{&}--on-blueberry {
+    &:hover {
+      background: $blueberry100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+
+  &--disabled {
+    background: $neutral50;
+    border-color: $neutral500;
+    color: $neutral500;
+
+    &:hover {
+      background: $neutral50;
+      border-color: $neutral500;
+      box-shadow: none;
+    }
+  }
+
+  &__input {
+    line-height: 1.625rem;
+    font-family: inherit;
+    font-size: $font-size-sm;
+    padding: 0 getSpacer(2xs);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    width: 100%;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+    }
+
+    &::placeholder {
+      color: $neutral500;
+    }
+
+    &--disabled {
+      color: $neutral500;
+    }
+
+    &:first-child {
+      padding-left: getSpacer(s);
+    }
+
+    &:last-child {
+      padding-right: getSpacer(s);
+    }
+  }
+}