@norwegian/core-components 7.1.2 → 7.2.0

package/styles/2__generic/_reset.scss

@@ -1,275 +0,0 @@
-/*------------------------------------*\
-    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

@@ -1,138 +0,0 @@
-@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

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

package/styles/3__base/_fixes.scss

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

package/styles/3__base/_form.scss

@@ -1,18 +0,0 @@
-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

@@ -1,115 +0,0 @@
-.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

@@ -1,118 +0,0 @@
-// 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(heading, bold);
-    @include font-size(xxxlarge);
-    margin: 0 0 $spacing;
-    color: $typography-text-default;
-    letter-spacing: -0.03em;
-
-    @include min-width(md) {
-        @include font-size(xxxlarge, false, mobile);
-    }
-}
-
-h2,
-.heading2 {
-    @include font(heading, bold);
-    @include font-size(xxlarge);
-    letter-spacing: -0.03em;
-    margin: 0 0 $spacing--xsmall;
-
-    @include min-width(md) {
-        @include font-size(xxlarge, false, mobile);
-    }
-}
-
-h3,
-.heading3 {
-    @include font(heading, bold);
-    @include font-size(xlarge);
-    letter-spacing: -0.03em;
-    margin: 0 0 $spacing--xxxsmall;
-
-    @include min-width(md) {
-        @include font-size(xlarge, false, mobile);
-    }
-
-}
-
-h4,
-.heading4 {
-    @include font(heading, bold);
-    @include font-size(large);
-    letter-spacing: 0;
-    margin: 0 0 $spacing--xxxsmall;
-
-    @include min-width(md) {
-        @include font-size(large, false, mobile);
-    }
-}
-
-h5,
-.heading5 {
-    @include font(heading, bold);
-    @include font-size(medium);
-    letter-spacing: 0;
-    margin: 0 0 $spacing--xxxsmall;
-
-    @include min-width(md) {
-        @include font-size(medium, false, mobile);
-    }
-}
-
-h6,
-.heading6 {
-    @include font(heading, bold);
-    @include font-size(regular);
-    margin: 0 0 $spacing--xxxsmall;
-
-    a {
-        color: $typography-text-default;
-        border-bottom: 0;
-    }
-
-    @include min-width(md) {
-        @include font-size(regular, false, mobile);
-    }
-}
-
-.heading-line {
-    border-bottom: $border-width solid $border-heavy;
-    padding-bottom: $spacing--small;
-}

package/styles/3__base/_hr.scss

@@ -1,30 +0,0 @@
-hr,
-.separator {
-    margin: $spacing--small 0 $spacing;
-    padding: 0;
-    border: 0;
-    border-top: $border-width--large solid $border-muted;
-
-    @include min-width(md) {
-        margin: $spacing 0;
-    }
-}
-
-.separator {
-    &--secondary {
-        border-color: $border-heavy;
-    }
-
-    &--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;
-    }
-}