@norwegian/core-components 5.1.0

package/styles/2__generic/_reset.scss

@@ -0,0 +1,275 @@
+/*------------------------------------*\
+    Custom css reset so we don't got so much bloat that we have to reset again
+\*------------------------------------*/
+
+// Let’s make the box model all nice and sweet
+* {
+    &,
+    &:before,
+    &:after {
+        box-sizing: border-box;
+    }
+
+}
+
+html {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+// The usual...
+body,
+html,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+dl,
+dd,
+ol,
+ul,
+form,
+fieldset,
+legend,
+table,
+th,
+td,
+caption,
+hr,
+figure {
+    margin: 0;
+    padding: 0;
+}
+
+// Go away border
+legend {
+    border: 0;
+}
+
+// Make it blocky
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+// Fix links
+a {
+    font-family: inherit;
+    text-decoration: none;
+    background: transparent;
+
+    &:active,
+    &:hover {
+        outline: 0; // Improve readability when focused and also mouse hovered in all browsers.
+    }
+}
+
+// ...
+ul > li {
+    list-style: none;
+}
+
+// Why should a image be beyond 100%? Or have border?
+img {
+    border: 0;
+    max-width: 100%;
+    height: auto;
+}
+
+// 100% button reset
+button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+    //outline: 0; // Don't do this unless you have a fallback
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+    margin: 0;
+    background: none;
+    overflow: visible;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+}
+
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+button,
+select {
+    font-family: inherit;
+    text-transform: none;
+}
+
+// Remove inner padding and border in Firefox 4+.
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+// Disabled shouldn't have pointer as cursor
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
+input {
+    line-height: normal;
+}
+
+// Reset text fields
+textarea,
+input[type='text'],
+input[type='password'],
+// input[type='datetime'],
+// input[type='datetime-local'],
+// input[type='date'],
+// input[type='month'],
+// input[type='time'],
+// input[type='week'],
+input[type='number'],
+input[type='email'],
+input[type='url'],
+input[type='search'],
+input[type='tel'],
+input[type='color'] {
+    font-family: inherit;
+    outline: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    box-sizing: border-box;
+
+    &::-ms-clear {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+}
+
+textarea {
+    font-family: inherit;
+    overflow: auto;
+    resize: none;
+    word-wrap: break-word;
+}
+
+// Firefox reset
+input:required,
+input:invalid {
+    box-shadow: none;
+}
+
+// Input type date reset
+input[type='date']::-webkit-clear-button,
+input[type='date']::-webkit-inner-spin-button {
+    display: none;
+}
+
+input[type='date']::-webkit-calendar-picker-indicator {
+    // Might need this one, if not, use display: none
+}
+
+// Input type number reset
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    height: auto;
+    display: none;
+}
+
+input[type='number'] {
+    -moz-appearance: textfield;
+}
+
+// Go away...
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+    display: none;
+}
+
+// Radio and checkbox reset
+input[type='checkbox'],
+input[type='radio'] {
+    box-sizing: border-box;
+    padding: 0;
+}
+
+sub,
+sup {
+    position: relative;
+    vertical-align: baseline;
+    line-height: 0;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+// Correct overflow not hidden in IE 9/10/11.
+svg:not(:root) {
+    overflow: hidden;
+}
+
+// Contain overflow in all browsers.
+pre {
+    overflow: auto;
+}
+
+// Tables <3
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}
+
+
+fieldset {
+    position: relative;
+    display: block;
+    border: 0;
+    margin-top: 0;
+}
+
+a,
+area,
+button,
+[role='button'],
+input:not([type='range']),
+label,
+select,
+summary,
+textarea {
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+}

package/styles/3__base/_animations.scss

@@ -0,0 +1,138 @@
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes fade-in-down {
+    from {
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+}
+
+@keyframes fade-in-left {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+}
+
+@keyframes fade-in-right {
+    from {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+}
+
+@keyframes fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
+
+@keyframes flip-in {
+    0% {
+        opacity: 0;
+        transform: rotateX(-90deg);
+    }
+
+    40% {
+        opacity: 1;
+        transform: rotateX(10deg);
+    }
+}
+
+@keyframes flip-out {
+    to {
+        opacity: 0;
+        transform: rotateX(-90deg);
+    }
+}
+
+@keyframes pop-in-from-top {
+  0% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);
+      opacity: 0
+  }
+
+  6.67% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)
+  }
+
+  13.33% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)
+  }
+
+  20% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)
+  }
+
+  26.67% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)
+  }
+
+  33.33% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);
+      opacity: 1
+  }
+
+  40% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)
+  }
+
+  46.67% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)
+  }
+
+  53.33% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)
+  }
+
+  60% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)
+  }
+
+  66.67% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)
+  }
+
+  73.33% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)
+  }
+
+  80% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)
+  }
+
+  86.67% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)
+  }
+
+  93.33% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
+      -webkit-transform: translate3d(0,0,0)
+  }
+
+  100% {
+      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
+      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
+      -webkit-transform: translate3d(0,0,0)
+  }
+}

package/styles/3__base/_body.scss

@@ -0,0 +1,23 @@
+body {
+    //padding-top: $header-height;
+
+    // Type
+    @include font(base, normal);
+    @include font-size(small, true);
+    color: $color-text;
+    font-style: normal;
+    line-height: 1.4;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+
+    overflow-x: hidden;
+    background-color: $color-background;
+
+
+    &.block-scrolling {
+        position: fixed;
+        width: 100%;
+        overflow: hidden;
+    }
+}

package/styles/3__base/_fixes.scss

@@ -0,0 +1,5 @@
+.clearfix::after {
+  display: table;
+  content: "";
+  clear: both;
+}

package/styles/3__base/_form.scss

@@ -0,0 +1,18 @@
+fieldset {
+    border: 0;
+}
+
+
+legend {
+    @include font(base, bold);
+    display: block;
+    margin-bottom: $spacing--small;
+}
+
+// Label
+label,
+.label {
+    display: block;
+    margin-bottom: $spacing--xxsmall;
+
+}

package/styles/3__base/_grid.scss

@@ -0,0 +1,115 @@
+.nas-grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    margin-left: -($spacing--small);
+    margin-right: -($spacing--small);
+
+    @include min-width(lg) {
+        margin-left: -($spacing);
+        margin-right: -($spacing);
+    }
+
+    &__item {
+        width: 100%;
+        flex-shrink: 0;
+        flex-grow: 0;
+        padding-left: $spacing--small;
+        padding-right: $spacing--small;
+
+        @include min-width(lg) {
+            padding-left: $spacing;
+            padding-right: $spacing;
+        }
+
+        @for $i from 1 through 11 {
+            &--col-#{$i} {
+                width: percentage($i/12);
+            }
+        }
+
+        @for $i from 1 through 12 {
+            @include min-width(md) {
+                &--col-#{$i}-md {
+                    width: percentage($i/12);
+                }
+            }
+        }
+
+        @for $i from 1 through 12 {
+            @include min-width(lg) {
+                &--col-#{$i}-lg {
+                    width: percentage($i/12);
+                }
+            }
+        }
+
+        @for $i from 1 through 12 {
+            @include min-width(xl) {
+                &--col-#{$i}-xl {
+                    width: percentage($i/12);
+                }
+            }
+        }
+    }
+
+    &--wide {
+        @include min-width(lg) {
+            margin-left: -($spacing--large);
+            margin-right: -($spacing--large);
+        }
+
+        .grid__item {
+            @include min-width(lg) {
+                padding-left: $spacing--large;
+                padding-right: $spacing--large;
+            }
+        }
+    }
+
+    &--tight {
+        @include min-width(lg) {
+            margin-left: -($spacing--small);
+            margin-right: -($spacing--small);
+        }
+
+        .grid__item {
+            @include min-width(lg) {
+                padding-left: $spacing--small;
+                padding-right: $spacing--small;
+            }
+        }
+    }
+
+    &--xtight {
+        margin-left: -($spacing--xxsmall);
+        margin-right: -($spacing--xxsmall);
+
+        .grid__item {
+            padding-left: $spacing--xxsmall;
+            padding-right: $spacing--xxsmall;
+        }
+    }
+
+    &--spaceless {
+        margin-left: 0;
+        margin-right: 0;
+
+        .grid__item {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    &--right {
+        justify-content: flex-end;
+    }
+
+    &--center {
+        justify-content: center;
+    }
+
+    &--stretch {
+        align-items: stretch;
+    }
+}

package/styles/3__base/_heading.scss

@@ -0,0 +1,110 @@
+// Headings
+.xxl-typo {
+    @include font-size(xxlarge);
+    @include font(base, bold);
+    margin: 0 0 $spacing;
+    letter-spacing: -0.03em;
+}
+
+.xl-typo {
+    @include font-size(xlarge);
+    @include font(base, bold);
+    margin: 0 0 $spacing--medium;
+    letter-spacing: -0.03em;
+}
+
+.l-typo {
+    @include font-size(large);
+    @include font(base, bold);
+    letter-spacing: -0.03em;
+}
+
+h1,
+.heading1,
+h2,
+.heading2,
+h3,
+.heading3,
+h4,
+.heading4,
+h5,
+.heading5,
+h6,
+.heading6 {
+    @include font(base, medium);
+}
+
+h1,
+.heading1 {
+    @include font-size(large);
+    @include font(base, bold);
+    margin: 0 0 $spacing;
+    color: color(secondary);
+    letter-spacing: -0.03em;
+
+    @include min-width(md) {
+        @include font-size(xlarge);
+    }
+}
+
+h2,
+.heading2 {
+    @include font-size(medium);
+    @include font(base, bold);
+    letter-spacing: -0.03em;
+    margin: 0 0 $spacing--xsmall;
+
+    @include min-width(md) {
+        @include font-size(large);
+    }
+}
+
+h3,
+.heading3 {
+    @include font-size(regular);
+    @include font(base, bold);
+    letter-spacing: -0.03em;
+    margin: 0 0 $spacing--xxxsmall;
+
+    @include min-width(md) {
+        @include font-size(medium);
+    }
+
+}
+
+h4,
+.heading4 {
+    @include font(base, bold);
+    @include font-size(xregular);
+    letter-spacing: 0;
+    margin: 0 0 $spacing--xxxsmall;
+
+    @include min-width(md) {
+        @include font-size(regular);
+    }
+}
+
+h5,
+.heading5 {
+    @include font-size(xregular);
+    @include font(base, bold);
+    letter-spacing: 0;
+    margin: 0 0 $spacing--xxxsmall;
+}
+
+h6,
+.heading6 {
+    @include font(base, bold);
+    @include font-size(small);
+    margin: 0 0 $spacing--xxxsmall;
+
+    a {
+        color: color(secondary);
+        border-bottom: 0;
+    }
+}
+
+.heading-line {
+    border-bottom: $border-width solid color(secondary);
+    padding-bottom: $spacing--small;
+}

package/styles/3__base/_hr.scss

@@ -0,0 +1,30 @@
+hr,
+.separator {
+    margin: $spacing--small 0 $spacing;
+    padding: 0;
+    border: 0;
+    border-top: $border-width--large solid color(neutral, light);
+
+    @include min-width(md) {
+        margin: $spacing 0;
+    }
+}
+
+.separator {
+    &--secondary {
+        border-color: color(secondary);
+    }
+
+    &--large {
+        margin: $spacing--medium 0;
+        border-top-width: $border-width--large;
+
+        @include min-width(md) {
+            border-top-width: $border-width--xlarge;
+	    }
+    }
+
+    &--small {
+        border-top-width: $border-width--small;
+    }
+}