D.School Component Library

Action: Cream 

<nav role="navigation" class="c-action" data-theme="cream">

      <a class="o-link c-action__link" href="/" target="_self">
          <span class="o-icon">
              <svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
              </svg>
          </span>
          <span class="o-link__label">
              <span class="action__text--top"><span class="o-heading--h3-primary">About</span> <span class="c-action__separator">&middot;</span><span class="o-heading--h3-secondary">Get to</span></span><span class="action__text--bottom"><span class="o-heading--h3-secondary">know</span> <span class="o-heading--h3-secondary-bold">&nbsp;the d.School</span></span>
          </span>
      </a>
  </nav>
 
{% set base_class = action.base_class|default('c-action') %}
{% if action.items %}
  <nav role="navigation" class="{{ bem(base_class, action.element, action.modifiers, action.extra) }}" {{ attributes(action.attributes) }}>
    {% for item in action.items %}
      {% include "@link" with {
        "link": {
          "text": item.text,
          "url": item.url,
          "target": item.target,
          "extra": bem(base_class, 'link'),
          "icon_placement": "before",
          "arrow": true
        }
      } %}
    {% endfor %}
  </nav>
{% endif %}
 
{
  "action": {
    "attributes": {
      "data-theme": "cream"
    },
    "items": [
      {
        "url": "/",
        "text": "<span class=\"action__text--top\"><span class=\"o-heading--h3-primary\">About</span> <span class=\"c-action__separator\">&middot;</span><span class=\"o-heading--h3-secondary\">Get to</span></span><span class=\"action__text--bottom\"><span class=\"o-heading--h3-secondary\">know</span> <span class=\"o-heading--h3-secondary-bold\">&nbsp;the d.School</span></span>"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $MAIN MENU ACTION
\*------------------------------------ */

.c-action {
  background-color: transparent;

  &__separator {
    @extend .o-heading--h2-secondary-bold;
    padding: 0 var(--ds-space-xs);
    line-height: var(--ds-scale-line-height-h4-lg);

    @media (max-width: $ds-breakpoint-xl) {
      padding: 0 var(--ds-space-xxs);
      line-height: var(--ds-scale-line-height-h4-md);
    }
    @media (max-width: $ds-breakpoint-lg) {
      padding: 0 var(--ds-space-xxxs);
      line-height: var(--ds-scale-line-height-h4-sm);
    }
  }

  .o-icon {
    rotate: 180deg;
    @include o-button(
      var(--ds-color-theme-navigation-action-accent),
      transparent,
      var(--ds-color-content-primary),
      var(--ds-color-background-tertiary),
      var(--ds-color-background-tertiary),
      var(--ds-color-content-secondary),
    );
    height: 3.4rem;
    width: 3.4rem;
    z-index: var(--ds-z-index-top);
  }

  .o-link {
    gap: var(--ds-space-sm);
    flex-direction: row;
    display: flex;

    &__label {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    span:not(.o-icon) {
      z-index: 2;
    }

    span::after {
      display: none;
    }
  }

  .o-link:hover:not(:disabled), .o-link:focus {
    color: var(--ds-color-content-primary);

    .action__text--bottom::after,
    .action__text--top::after {
      display: block;
      background-color: var(--ds-color-content-secondary);
      height: 2px;
      bottom: 2px;
      z-index: 1;
    }

    .o-icon {
      background-color: var(--ds-color-background-tertiary);
      color: var(--ds-color-content-secondary);
    }
  }

  .action__text--top,
  .action__text--bottom {
    align-items: baseline;
  }
}
  • URL: /components/raw/action/_action.scss
  • Filesystem Path: components/02-molecules/navigation/action/_action.scss
  • Size: 1.8 KB

No notes defined.