@aquera/nile-elements 1.6.7 → 1.6.8

package/src/nile-nav-tab/nile-nav-tab.css.ts

@@ -0,0 +1,201 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+export const styles = css`
+  
+  [hidden] {
+    display: none;
+  }
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    position: relative;
+
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    cursor: pointer;
+  }
+
+  :host([centered]) {
+    flex: 1;
+    text-align: center;
+  }
+
+  /* --------------------------------------------------------------------------
+   * Tab shell (list item)
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab-container {
+    flex: 1 1 auto;
+    width: var(--nav-tab-item-width);
+    padding: 0;
+    box-sizing: border-box;
+    border-radius: var(--nile-nav-tab-radius);
+    border: var(--nile-nav-transparent-border);
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    list-style: none;
+    overflow: var(--nile-nav-tab-container-overflow);
+    margin-top: var(--nile-nav-tab-margin);
+    margin-bottom: var(--nile-nav-tab-margin);
+  
+  }
+
+  /* --------------------------------------------------------------------------
+   * nile-link wrapper + internal <a> (part base)
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab {
+    display: flex;
+    flex: 1 1 auto;
+    align-self: stretch;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .nav-tab::part(base) {
+    display: flex;
+    flex: 1 1 auto;
+    align-self: stretch;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: var(--justify-content);
+    white-space: var(--white-space, nowrap);
+    user-select: none;
+    transition: 0.2s box-shadow, 0.2s color;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    box-sizing: border-box;
+    text-decoration: none;
+    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-style: normal;
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    letter-spacing: 0.2px;
+    word-break: var(--word-break);
+    overflow-wrap: var(--overflow-wrap);
+    text-align: var(--text-align);
+    padding: var(--nile-nav-tab-padding);
+  }
+
+  /* --------------------------------------------------------------------------
+   * Host: active / hover (container + link color)
+   * -------------------------------------------------------------------------- */
+
+  :host([active]) .nav-tab-container {
+    background-color: var(--nile-nav-tab-bg-active);
+    border-radius: var(--nile-nav-tab-radius);
+    border: var(--nile-nav-tab-border);
+    box-shadow: var(--nile-nav-tab-active-box-shadow);
+  }
+
+  :host(:hover:not([disabled]):not([active])) .nav-tab-container {
+    background-color: var(--nile-nav-tab-bg-hover);
+    border: var(--nile-nav-tab-border);
+    box-shadow: var(--nile-nav-tab-active-box-shadow);
+  }
+
+  :host(:hover:not([disabled]):not([active])) .nav-tab-container ::part(base) {
+    color: var(--nile-nav-tab-text-color-hover, var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700)));
+  }
+
+  /* --------------------------------------------------------------------------
+   * nile-link part: label inherits anchor
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab::part(label) {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+
+  /* --------------------------------------------------------------------------
+   * Interaction states (::part base)
+   * -------------------------------------------------------------------------- */
+
+  /* Default (inactive) */
+  .nav-tab:not(.nav-tab--active):not(.nav-tab--disabled)::part(base) {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+  }
+
+  /* Hover */
+  .nav-tab:hover:not(.nav-tab--disabled)::part(base) {
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-brand-secondary-700));
+    background-color: var(--tab-hover-background-color);
+  }
+
+  /* Focus — roving tabindex is on :host; inner link stays tabindex=-1 */
+  :host(:focus-visible:not([disabled])) .nav-tab::part(base) {
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+  }
+
+  /* Active */
+  .nav-tab.nav-tab--active:not(.nav-tab--disabled)::part(base) {
+    color: var(--nile-nav-tab-active-color, var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)));
+    background-color: var(--tab-active-background-color);
+  }
+
+  /* --------------------------------------------------------------------------
+   * Disabled
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab.nav-tab--disabled {
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .nav-tab-container {
+    cursor: not-allowed;
+  }
+
+  .nav-tab.nav-tab--disabled::part(base) {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .nav-tab.nav-tab--disabled::part(label) {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  }
+
+  .nav-tab.nav-tab--disabled:hover::part(base),
+  :host([disabled]:focus-visible) .nav-tab::part(base) {
+    background-color: transparent;
+  }
+
+  /* --------------------------------------------------------------------------
+   * Closable: close button
+   * -------------------------------------------------------------------------- */
+
+  .nav-tab__close-button {
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
+    margin-inline-start: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  .nav-tab__close-button::part(base) {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+ 
+`;
+
+export default [styles];