novo-elements 8.0.1 → 8.1.0-next.2

package/elements/tabs/Tabs.scss

@@ -1,298 +0,0 @@
-@import "../common/typography/text.mixins";
-
-novo-nav {
-  padding: 0;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin: 0;
-  &.condensed {
-    novo-tab,
-    novo-tab-link {
-      font-size: 1rem;
-      .novo-tab-link {
-        padding: $spacing-sm;
-      }
-    }
-  }
-  novo-tab,
-  novo-tab-link {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: relative;
-    &.disabled {
-      .novo-tab-link {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      &:hover {
-        .novo-tab-link {
-          opacity: 0.5;
-        }
-      }
-    }
-
-    .novo-tab-link {
-      @include novo-label-text();
-      font-size: var(--font-size-tab);
-      padding: $spacing-md;
-      display: flex;
-      align-items: center;
-      gap: $spacing-xs;
-      cursor: pointer;
-      text-transform: uppercase;
-      &:focus {
-        outline: none;
-      }
-    }
-    .indicator {
-      position: absolute;
-      bottom: 0;
-      width: 0;
-      height: 3px;
-      display: block;
-      background: transparent;
-      transition: all 220ms ease-in-out;
-    }
-    &.active,
-    &.router-link-active {
-      .novo-tab-link {
-        opacity: 1;
-        font-weight: 500;
-      }
-      .indicator {
-        background: var(--focus);
-        width: 100%;
-      }
-    }
-    &:hover {
-      .novo-tab-link {
-        opacity: 1;
-      }
-    }
-    &:focus {
-      outline: none;
-    }
-  }
-  &[type="button-bar"] {
-    display: inline-flex;
-    border-radius: 3px;
-    border: 2px solid #fff;
-    novo-tab-button {
-      padding: $spacing-md;
-      cursor: pointer;
-      transition: all 120ms ease-in-out;
-      &.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        &:hover {
-          opacity: 0.5;
-        }
-      }
-    }
-  }
-  &[theme="neutral"], // temporarily added back for backwards compatibility
-  &[theme="color"] {
-    background: rgba(0, 0, 0, 0.2);
-    novo-tab,
-    novo-tab-link {
-      .novo-tab-link {
-        color: #fff;
-      }
-      &.active,
-      &.router-link-active {
-        .indicator {
-          background: #fff;
-        }
-      }
-      &.disabled {
-        .novo-tab-link {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-        &:hover {
-          .novo-tab-link {
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-    &[type="button-bar"] {
-      border: 2px solid #fff;
-      novo-tab-button {
-        color: rgba(255, 255, 255, 0.75);
-        &.active {
-          color: #fff;
-          background: rgba(0, 0, 0, 0.2);
-        }
-        &:hover {
-          background: rgba(0, 0, 0, 0.1);
-        }
-        &.disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-          &:hover {
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-  }
-  &[theme="white"] {
-    background-color: $white;
-    &[direction="vertical"] {
-      background: transparent;
-    }
-    novo-tab,
-    novo-tab-link {
-      height: auto;
-
-      &.disabled {
-        .novo-tab-link {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-        &:hover {
-          .novo-tab-link {
-            opacity: 0.5;
-            font-weight: 400;
-          }
-        }
-      }
-      .novo-tab-link {
-        color: var(--text-main);
-        opacity: 0.75;
-      }
-      &.active,
-      &.router-link-active {
-        color: var(--selection);
-        .novo-tab-link {
-          color: var(--selection);
-          opacity: 1;
-        }
-        .indicator {
-          background: currentColor;
-        }
-      }
-      &:hover {
-        .novo-tab-link {
-          font-weight: 500;
-        }
-      }
-    }
-    &[type="button-bar"] {
-      border: 2px solid $light;
-      novo-tab-button {
-        color: var(--text-main);
-        opacity: 0.75;
-        &.active {
-          color: var(--selection);
-          background: rgba(0, 0, 0, 0.05);
-          opacity: 1;
-        }
-        &:hover {
-          opacity: 1;
-        }
-        &.disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-          &:hover {
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-  }
-  &[direction="vertical"] {
-    flex-direction: column;
-    width: auto;
-    novo-tab,
-    novo-tab-link {
-      display: flex;
-      width: 100%;
-      flex-direction: row;
-      align-items: center;
-      min-width: 12rem;
-      justify-content: space-between;
-      transition: all 120ms ease-in-out;
-      &:first-of-type {
-      }
-      &:last-of-type {
-      }
-      .novo-tab-link {
-        order: 2;
-        flex: 1;
-        width: 100%;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: $spacing-xs;
-        max-width: 90%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        opacity: 0.75;
-      }
-      .indicator {
-        order: 1;
-        width: 4px;
-        height: 0;
-        display: block;
-        background: transparent;
-        transition: all 220ms ease-in-out;
-      }
-      &.active,
-      &.router-link-active {
-        background: rgba(0, 0, 0, 0.05);
-        .novo-tab-link {
-          opacity: 1;
-        }
-        .indicator {
-          height: 100%;
-          top: 0;
-          bottom: 0;
-        }
-      }
-      &:hover {
-        .novo-tab-link {
-          opacity: 1;
-        }
-      }
-      &.disabled {
-        .novo-tab-link {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-        &:hover {
-          .novo-tab-link {
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-  }
-}
-
-novo-tab-link {
-  @include theme-text-colors();
-}
-
-// Outlets
-novo-nav-outlet {
-  display: block;
-  novo-nav-header {
-    display: block;
-    padding: $spacing-sm;
-    margin: $spacing-sm;
-    border: 1px solid #333;
-  }
-  novo-nav-content {
-    display: none;
-    &.active {
-      display: block;
-    }
-  }
-}

package/elements/value/Values.scss

@@ -1,57 +0,0 @@
-novo-value {
-  display: flex;
-  flex-direction: row;
-  max-width: 500px;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: max-content;
-  padding: 8px;
-  @include entity-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-    i.#{$name} {
-      color: $color;
-    }
-  }
-  &.horizontal {
-    width: 100%;
-    max-width: 100%;
-    .value-outer {
-      display: grid;
-      width: 100%;
-      grid-template-columns: minmax(120px, 30%) 1fr;
-    }
-  }
-
-  .value-outer {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-  }
-
-  .actions {
-    i {
-      cursor: default;
-      color: #9e9e9e;
-      margin-left: 15px;
-      margin-top: 7px;
-    }
-    &.clickable {
-      cursor: pointer;
-      color: $ocean;
-    }
-  }
-  novo-entity-list {
-    display: block;
-    @include entity-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-      i.#{$name} {
-        color: $color;
-      }
-    }
-    .entity {
-      padding-top: 6px;
-      padding-bottom: 6px;
-    }
-    i {
-      margin-right: 6px;
-    }
-  }
-}