@dnb/eufemia 9.25.0 → 9.27.0

package/style/elements/table.scss

@@ -1,392 +1,4 @@
 /*
  * Table
- *
+ * The styles are located inside /components/table/styles/...
  */
-
-@import '../../components/button/style/themes/button-mixins.scss';
-
-@mixin tableFocusRing() {
-  &::before {
-    content: '';
-    position: absolute;
-    top: -0.5rem;
-    bottom: -0.5rem;
-    left: -1rem;
-    right: 0.5rem;
-  }
-}
-
-@mixin tableStyle() {
-  display: table;
-  table-layout: auto;
-  width: 100%;
-
-  overflow: auto;
-  margin-top: 0;
-  margin-bottom: var(--spacing-small);
-
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  &--fixed {
-    table-layout: fixed;
-  }
-
-  &__sticky-helper > td {
-    display: block;
-    overflow: hidden;
-    padding: 0 !important;
-    height: 0;
-  }
-
-  & > tr > th,
-  & > tr > td,
-  & > thead > tr > th,
-  & > tbody > tr > td,
-  & &__th,
-  & &__td {
-    // to make sure we have the ability to have a border where ever we want
-    border-bottom: 1px solid transparent;
-
-    font-size: var(--font-size-basis);
-    line-height: var(--line-height-basis);
-    border-spacing: 0;
-
-    word-break: keep-all;
-  }
-
-  /* stylelint-disable-next-line */
-  & > tr > th,
-  & > thead > tr > th,
-  & &__th {
-    padding: var(--spacing-x-large) var(--spacing-small)
-      var(--spacing-x-small);
-
-    font-weight: var(--font-weight-medium);
-    color: var(--color-emerald-green);
-
-    vertical-align: bottom;
-
-    &:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center) {
-      text-align: inherit;
-    }
-
-    @include IS_FF {
-      // to get the perfect height of pixles, to this:
-      padding-bottom: calc(var(--spacing-x-small) - 0.5px);
-    }
-
-    background-color: var(--color-mint-green-50);
-    border-bottom: 1px solid var(--color-mint-green);
-  }
-
-  // sortable
-  & > thead > tr > th#{&}--sortable,
-  & &__th#{&}--sortable {
-    color: var(--color-emerald-green);
-
-    .dnb-anchor,
-    .dnb-button {
-      > .dnb-icon {
-        opacity: 0;
-        transition: opacity 200ms ease-out, transform 500ms ease-out;
-        [data-visual-test-wrapper] & {
-          transition: none;
-        }
-      }
-
-      position: relative;
-      z-index: 1;
-      align-items: flex-end;
-
-      // reset anchor
-      box-shadow: none;
-
-      line-height: var(--line-height-basis);
-
-      margin: 0;
-      padding: 0;
-      padding-right: 0.5rem;
-
-      color: inherit;
-      font-weight: var(--font-weight-medium);
-      text-align: inherit;
-      font-size: inherit;
-
-      .dnb-button__text {
-        margin: 0;
-        font-size: inherit;
-
-        // underline
-        &::after {
-          right: 1rem;
-        }
-      }
-
-      .dnb-button__icon {
-        align-self: flex-end;
-        margin-top: auto;
-        margin-bottom: 0.25rem;
-      }
-
-      // underline
-      &:not(:focus) .dnb-button__text::after {
-        opacity: 1;
-        color: var(--color-emerald-green);
-      }
-
-      @include hover() {
-        color: var(--color-sea-green);
-
-        &:not(:focus) .dnb-icon {
-          opacity: 1;
-        }
-
-        // hide underline
-        .dnb-button__text::after {
-          opacity: 0;
-        }
-      }
-
-      @include focus() {
-        @include tableFocusRing();
-
-        // focus ring
-        &::before {
-          right: -0.5rem;
-        }
-        .dnb-icon {
-          opacity: 1;
-        }
-      }
-
-      @include active() {
-        @include buttonFocusRing('mouse'); // also, make a mouse ring
-        @include buttonFocusRing('touch'); // also, make a touch ring
-
-        @include tableFocusRing();
-
-        // focus ring
-        &::before {
-          right: -0.5rem;
-        }
-
-        color: var(--color-emerald-green);
-      }
-
-      // webkit fix
-      &:hover:focus:not(:active) .dnb-button__text::after {
-        visibility: hidden;
-      }
-    }
-  }
-  & > thead > tr > th#{&}--active,
-  & &__th#{&}--active {
-    .dnb-anchor,
-    .dnb-button {
-      // hide underline
-      &:not(:hover) .dnb-button__text::after {
-        opacity: 0;
-      }
-      .dnb-icon {
-        opacity: 1;
-      }
-
-      // and underline on hover
-      @include hover() {
-        .dnb-button__text::after {
-          color: var(--color-sea-green);
-          opacity: 1;
-        }
-      }
-
-      // webkit fix
-      &:hover:focus:not(:active) .dnb-button__text::after {
-        visibility: visible;
-      }
-      html[data-whatinput='keyboard']
-        &:hover:focus
-        .dnb-button__text::after {
-        visibility: hidden;
-      }
-    }
-  }
-  & > thead > tr > th#{&}--reversed,
-  & &__th#{&}--reversed {
-    .dnb-anchor,
-    .dnb-button {
-      .dnb-icon {
-        transform: rotate(180deg);
-        transform-origin: 50% 50%;
-      }
-    }
-  }
-  & > thead > tr > th#{&}--no-wrap,
-  & > tbody > tr > th#{&}--no-wrap,
-  & &__th#{&}--no-wrap {
-    white-space: nowrap;
-  }
-
-  // Body part
-  /* stylelint-disable-next-line */
-  & > tr > td,
-  & > tbody > tr > td,
-  & &__td,
-  & > tr > th[scope='row'] {
-    padding: var(--spacing-small);
-    padding-top: calc(var(--spacing-small) * 1.25);
-    padding-bottom: calc(var(--spacing-small) * 1.188); /* 19/16 */
-
-    color: var(--theme-color-black-80, currentColor);
-  }
-  & > tbody > tr:not(#{&}--ignore),
-  & &__tr:not(#{&}--ignore),
-  & &--odd:not(#{&}--ignore) {
-    background-color: var(--color-white);
-  }
-  & > tbody > tr:not(#{&}--odd):nth-of-type(2n):not(#{&}--ignore),
-  & &__tr:not(#{&}--odd):nth-of-type(2n):not(#{&}--ignore),
-  & &--even:not(#{&}--ignore) {
-    background-color: var(--color-mint-green-12);
-  }
-  & > tbody > tr:last-of-type > td,
-  & &__tr:last-of-type &__td {
-    border-bottom: 1px solid var(--color-mint-green-50);
-  }
-
-  &,
-  &--left {
-    text-align: left;
-  }
-  &--right {
-    text-align: right;
-  }
-  &--center {
-    text-align: center;
-  }
-
-  & > caption {
-    font-size: var(--font-size-small);
-
-    margin-top: var(--spacing-x-small);
-    caption-side: bottom;
-  }
-
-  tr.sticky {
-    top: 0;
-  }
-  /* stylelint-disable-next-line */
-  tr.sticky th {
-    position: sticky;
-    top: inherit;
-    z-index: 2;
-
-    &::after {
-      content: '';
-      position: absolute;
-      opacity: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 6px;
-
-      // The @mixin defaultDropShadow() does not work in this case
-      // because we need only a bottom shadow (with clip-path)
-      box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
-      clip-path: inset(6px 0 -48px 0);
-
-      transition: opacity 300ms ease-out;
-      [data-visual-test-wrapper] & {
-        transition: none;
-      }
-    }
-  }
-  tr.sticky.show-shadow th::after {
-    opacity: 1;
-  }
-
-  /* stylelint-disable */
-
-  &--small,
-  &--small > tr > th,
-  &--small > tr > td,
-  &--small > thead > tr > th,
-  &--small > tbody > tr > td {
-    font-size: var(--font-size-small);
-  }
-
-  & > tr#{&}--small > th,
-  & > tr#{&}--small > td,
-  & > thead > tr#{&}--small > th,
-  & > tbody > tr#{&}--small > td {
-    font-size: var(--font-size-small);
-  }
-
-  & > tr > th#{&}--small,
-  & > tr > td#{&}--small,
-  & > thead > tr > th#{&}--small,
-  & > tbody > tr > td#{&}--small,
-  &__th#{&}--small,
-  &__td#{&}--small {
-    font-size: var(--font-size-small);
-  }
-
-  &--x-small,
-  &--x-small > tr > th,
-  &--x-small > tr > td,
-  &--x-small > thead > tr > th,
-  &--x-small > tbody > tr > td {
-    font-size: var(--font-size-x-small);
-  }
-
-  & > tr#{&}--x-small > th,
-  & > tr#{&}--x-small > td,
-  & > thead > tr#{&}--x-small > th,
-  & > tbody > tr#{&}--x-small > td {
-    font-size: var(--font-size-x-small);
-  }
-
-  & > tr > th#{&}--x-small,
-  & > tr > td#{&}--x-small,
-  & > thead > tr > th#{&}--x-small,
-  & > tbody > tr > td#{&}--x-small,
-  &__th#{&}--x-small,
-  &__td#{&}--x-small {
-    font-size: var(--font-size-x-small);
-  }
-
-  /* stylelint-enable */
-
-  &.dnb-skeleton {
-    > * {
-      -webkit-text-fill-color: var(--skeleton-color);
-    }
-  }
-}
-
-@mixin resetTableSpacing() {
-  p,
-  ul,
-  ol,
-  dl,
-  pre {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-@mixin tableTag() {
-  table {
-    @include tableStyle();
-  }
-  .dnb-spacing table {
-    @include resetTableSpacing();
-  }
-}
-
-.dnb-table {
-  @include tableStyle();
-}
-.dnb-spacing .dnb-table {
-  @include resetTableSpacing();
-}

package/style/elements/ui-tags.scss

@@ -21,12 +21,12 @@
   @include dlTag();
 
   // table
-  @include tableTag();
+  // @include tableTag(); // Deprecated since v10
 
   // form
   @include formTag();
   @include labelTag();
-  // @include textareaTag(); // Deprecated sice v. 3.23.0
+  // @include textareaTag(); // Deprecated since v3.23.0
 
   // additional
   @include codeTag();