<div class="c-tabbed-content__tabs">
    <button class="c-tabbed-content__tab is-active">RTS</button>
    <div id="company-search" style="display: none" class="c-tabbed-content__tab c-tabbed-content__tab-search">
        <span id="ember1372" class="admin-field power-select ember-view"> <label for="ember1372-input"></label>
      <div aria-owns="ember-basic-dropdown-content-ember1374" tabindex="0" data-ebd-id="ember1374-trigger" role="button" id="ember1375" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-view">
        <span class="ember-power-select-status-icon"></span>
    </div>
    <div id="ember-basic-dropdown-content-ember1374" style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
    </span>
</div>
<button class="c-tabbed-content__tab c-tabbed-content__tab-add">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 16 16">
      <circle cx="8" cy="8" r="8" fill="#098FCD"></circle>
      <path fill="#fff" stroke="#fff" stroke-width="0.3"
        d="M12.4578 7.40941V7.25941H12.3078H8.76418V3.69229V3.54229H8.61418H7.36804H7.21804V3.69229V7.25941H3.69238H3.54238V7.40941V8.60792V8.75792H3.69238H7.21804V12.3077V12.4577H7.36804H8.61418H8.76418V12.3077V8.75792H12.3078H12.4578V8.60792V7.40941Z">
      </path>
    </svg>
  </button>
</div>

<div class="c-tabbed-content__content">
    <!-- |||||||||||||||||||||||||||||||||
      T A B B E D   C O N T E N T
     |||||||||||||||||||||||||||||||||-->
</div>
{{render '@tabbed-content--header'}}
<div class="c-tabbed-content__content">
<!-- |||||||||||||||||||||||||||||||||
      T A B B E D   C O N T E N T
     |||||||||||||||||||||||||||||||||-->
</div>
/* No context defined for this component. */
  • Content:
    .c-tabbed-content__tabs {
      display: inline-block;
    }
    
      .c-tabbed-content__tab {
        margin: 0;
        margin-bottom: rem(-1);
        padding: $space-xs $space-unit;
        border: 0;
        border: rem(1) solid $color-grey-300;
        background: $color-grey-0;
        letter-spacing: rem(1);
        text-transform: uppercase;
        cursor: pointer;
        opacity: 0.7;
    
        &.is-active {
          border-top: $space-xxxs solid $color-brand-secondary-300;
          border-bottom: rem(1) solid $color-white;
          background: $color-white;
          font-weight: 600;
          cursor: default;
          opacity: 1;
        }
      }
    
      .c-tabbed-content__tab-search {
        padding: rem(2);
        transform: translateY($space-xs);
    
        .admin-field.power-select > [role="button"] {
          min-width: rem(150);
          height: rem(24);
          margin: 0;
        }
    
        & + .c-tabbed-content__tab-add {
          padding: $space-xs $space-xxxs;
          color: darken($color-text, 10%);
          font-weight: 600;
    
          svg {
            margin: 0 0 rem(-1) $space-unit;
          }
        }
      }
    
      .c-tabbed-content__tab-add {
        transform: translateY(rem(3));
        border: 0;
        background-color: transparent;
        opacity: 1;
      }
    
    .c-tabbed-content__content {
      margin: 0;
      padding: $space-xs $space-md 0;
      border: rem(1) solid $color-grey-300;
      border-radius: 0 $space-xxxs $space-xxxs;
    }
    
  • URL: /components/raw/tabbed-content/_tabbed-content.scss
  • Filesystem Path: components/_code-components/navigation/tabbed-content/_tabbed-content.scss
  • Size: 1.3 KB

There are no notes for this item.