@norwegian/core-components 7.2.0 → 7.2.2

package/styles/3__base/_input.scss

@@ -0,0 +1,36 @@
+// Input style
+// TODO: Move this stuff into input component and reduce specifity
+textarea,
+input[type='text'],
+input[type='password'],
+input[type='date'],
+input[type='number'],
+input[type='email'],
+input[type='url'],
+input[type='search'],
+input[type='tel'] {
+    display: block;
+    width: 100%;
+    padding: $spacing--small;
+    box-sizing: border-box;
+    border: 0;
+    color: $typography-text-default;
+    @include font-size(small);
+    border-radius: 0;
+    background-color: $background-surface-default;
+
+    transition: all 200ms $swift-out;
+
+    &[disabled] {
+        color: $typography-text-muted;
+    }
+
+    @include input-placeholder {
+        line-height: normal;
+    }
+}
+
+// Because of the calendar-picker-indicator
+input[type='date'] {
+    padding: $spacing--xsmall $spacing--small;
+}

package/styles/3__base/_link.scss

@@ -0,0 +1,48 @@
+// Link
+a,
+.link {
+    color: $typography-text-link;
+    cursor: pointer;
+    text-decoration: none;
+    border-bottom: $border-width solid $border-muted;
+
+    &:hover,
+    &:focus {
+        color: $typography-text-default;
+        border-color: $border-heavy;
+    }
+
+    &--disabled {
+        color: $typography-text-default;
+        border-bottom: $border-width solid $border-muted;
+        cursor: default;
+
+        &:hover,
+        &:focus {
+            color: $typography-text-default;
+            border-color: $border-muted;
+        }
+    }
+}
+
+.link--light {
+    color: $typography-text-inverted;
+    border-bottom: $border-width solid $border-inverted;
+
+    &:hover,
+    &:focus {
+        color: rgba($typography-text-inverted, 0.8);
+        border-color: rgba($border-inverted, 0.8);
+    }
+}
+
+.link--secondary {
+    color: $typography-text-default;
+    border-bottom: $border-width solid $border-heavy;
+
+    &:hover,
+    &:focus {
+        color: $typography-text-link;
+        border-color: $border-primary;
+    }
+}

package/styles/3__base/_table.scss

@@ -0,0 +1,48 @@
+.table {
+    margin-left: -($spacing--small);
+    margin-right: -($spacing--small);
+    min-width: 100%;
+
+    @include min-width(md) {
+        margin: 0 0 $spacing--large 0;
+    }
+
+    thead {
+        display: none;
+        @include font(base, bold);
+
+        tr {
+
+            td,
+            th {
+                padding: $spacing--xsmall 0;
+                text-align: left;
+            }
+        }
+
+        @include min-width(md) {
+            display: table-header-group;
+        }
+    }
+
+    tbody {
+
+        tr {
+
+            td,
+            th {
+                padding: $spacing--xsmall 0;
+                border-top: $border-width solid $border-muted;
+
+                code {
+                    margin: $spacing--xsmall $spacing--large 0 0;
+                }
+            }
+        }
+    }
+
+    .top__row {
+        padding: $spacing--xsmall 0;
+        border-top: $border-width solid $border-muted;
+    }
+}

package/styles/3__base/_type.scss

@@ -0,0 +1,69 @@
+p {
+    margin: 0 0 $spacing;
+    @include font(base, normal);
+    @include font-size(small);
+}
+
+.paragraph {
+    @include font(base, normal);
+}
+
+em {
+    font-style: italic;
+}
+
+.normal,
+.label {
+    @include font(base, normal);
+    letter-spacing: 0;
+}
+
+.errors {
+    @extend .normal;
+}
+
+.label {
+    margin: 0 0 $spacing--xxxsmall;
+    color: $typography-text-muted;
+}
+
+.preamble {
+    @include font(base, normal);
+    @include font-size(xregular);
+    letter-spacing: 0;
+    margin: 0 0 $spacing;
+}
+
+.text-muted {
+    color: $typography-text-muted;
+}
+
+blockquote {
+    @include font(base, bold);
+    @include font-size(regular, true);
+    line-height: 1.5;
+    letter-spacing: 0.02em;
+    font-style: italic;
+    margin: 0 0 $spacing;
+
+    cite {
+        @include font(base, bold);
+        @include font-size(small);
+        font-style: normal;
+    }
+}
+
+strong,
+b {
+    font-weight: bold;
+}
+
+code {
+    @include font-size(xsmall);
+    display: inline-block;
+    border-radius: 4px;
+    padding: 1px 4px;
+    margin-bottom: 4px;
+    border: 1px solid $border-muted;
+    background-color: $background-surface-default;
+}

package/styles/_helpers.scss

@@ -0,0 +1,4 @@
+@import '1__settings/mixins';
+@import '1__settings/vars';
+@import '1__settings/type';
+@import '1__settings/colors';

package/styles/_index.scss

@@ -0,0 +1,15 @@
+@import './helpers';
+
+@import './2__generic/fonts';
+@import './2__generic/reset';
+
+@import './3__base/body';
+@import './3__base/link';
+@import './3__base/heading';
+@import './3__base/type';
+@import './3__base/input';
+@import './3__base/hr';
+@import './3__base/form';
+@import './3__base/animations';
+@import './3__base/table';
+@import './3__base/fixes';