PSI Software SE Design Library

Dropdown Navigation

No notes defined.

<!-- Default -->
<div class="dropdownNav">
    <div class="combobox" data-select>

        <div class="combobox-field">
            <span class="combobox-input-wrapper">
                <input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="">
            </span>
        </div>

        <div class="combobox-dropdown" aria-hidden="true" tabindex="-1">

            <ul class="combobox-list" data-noresults="Keine Treffer">
                <li class="combobox-item" data-value="" data-label="Vinyl pug cardigan">
                    <a href=#option-1-selected><label>Vinyl pug cardigan</label></a>
                </li>
                <li class="combobox-item" data-value="" data-label="Flexitarian Retro">
                    <a href=#option-2-selected><label>Flexitarian Retro</label></a>
                </li>
                <li class="combobox-item" data-value="" data-label="Plaid 8-bit" aria-disabled="true">
                    <label>Plaid 8-bit</label>
                </li>
            </ul>

        </div>

    </div>

</div>


<!-- Disabled -->
<div class="dropdownNav">
    <div class="combobox" data-select aria-disabled="true">

        <div class="combobox-field">
            <span class="combobox-input-wrapper">
                <input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="" aria-disabled="true" disabled>
            </span>
        </div>

        <div class="combobox-dropdown" aria-hidden="true" tabindex="-1">

        </div>

    </div>

</div>


<!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">

            <div class="doc-variant-controller"></div>

        </div>

        <div class="doc-variant-configuration">
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                    <option value="default">default</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="">
        <div class="dropdownNav">
            <div class="combobox" data-select>

                <div class="combobox-field">
                    <span class="combobox-input-wrapper">
                        <input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="">
                    </span>
                </div>

                <div class="combobox-dropdown" aria-hidden="true" tabindex="-1">

                    <ul class="combobox-list" data-noresults="Keine Treffer">
                        <li class="combobox-item" data-value="" data-label="Vinyl pug cardigan">
                            <a href=#option-1-selected><label>Vinyl pug cardigan</label></a>
                        </li>
                        <li class="combobox-item" data-value="" data-label="Flexitarian Retro">
                            <a href=#option-2-selected><label>Flexitarian Retro</label></a>
                        </li>
                        <li class="combobox-item" data-value="" data-label="Plaid 8-bit" aria-disabled="true">
                            <label>Plaid 8-bit</label>
                        </li>
                    </ul>

                </div>

            </div>

        </div>

        <div class="dropdownNav">
            <div class="combobox" data-select aria-disabled="true">

                <div class="combobox-field">
                    <span class="combobox-input-wrapper">
                        <input class="combobox-input" id="uid" role="combobox" aria-controls="menu-body" aria-autocomplete="list" placeholder="" aria-disabled="true" disabled>
                    </span>
                </div>

                <div class="combobox-dropdown" aria-hidden="true" tabindex="-1">

                </div>

            </div>

        </div>

    </div>

</section>

<div style="min-height: 50vh"></div>


<!-- Default -->
<div class="dropdownNav{{#modifier}} {{.}}{{/modifier}}">
    {{#combobox}}
        {{render '@combobox' (contextData '@dropdownnav' this) merge=true}}
    {{/combobox}}
</div>

<!-- Disabled -->
<div class="dropdownNav{{#modifier}} {{.}}{{/modifier}}">
    {{#combobox}}
        {{render '@combobox' (contextData '@dropdownnav' this) merge=true}}
    {{/combobox}}
</div>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant{{#if narrow-preview}} doc-narrow-content{{/if}}"{{#id}} id="{{.}}"{{/id}}>

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}

            <div class="doc-variant-controller"></div>

        </div>

        <div class="doc-variant-configuration">
                {{#if ../themes}}
            <label>
                Theme:
                <select class="doc-select" onchange="fractal.setTheme(this, {target: '.doc-variant-samples', value: this.value});">
                        {{#../themes}}
                    <option value="{{{.}}}">{{{.}}}</option>
                        {{/../themes}}
                </select>
            </label>
                {{/if}}
        </div>

            {{#annotations}}
        <div class="doc-variant-notes">
            {{{.}}}
        </div>
            {{/annotations}}

    </header>

    <div class="doc-variant-samples" style="flex-direction: column; align-items: stretch;" data-theme="{{theme}}">
        {{#samples}}
            {{render '@dropdownnav' (contextData '@dropdownnav' this) merge=true}}
        {{/samples}}
    </div>

</section>
    {{/variants}}

<div style="min-height: 50vh"></div>
 
/* Default */
{
  "combobox": {
    "is-select": true,
    "placeholder": null,
    "options": [
      {
        "label": "Vinyl pug cardigan",
        "url": "#option-1-selected"
      },
      {
        "label": "Flexitarian Retro",
        "url": "#option-2-selected"
      },
      {
        "label": "Plaid 8-bit",
        "is-disabled": true
      }
    ]
  }
}


/* Disabled */
{
  "combobox": {
    "is-select": true,
    "placeholder": null,
    "options": null,
    "is-disabled": true
  }
}


/* Doc Only */
{
  "combobox": {
    "is-select": true,
    "placeholder": null,
    "options": [
      {
        "label": "Vinyl pug cardigan",
        "url": "#option-1-selected"
      },
      {
        "label": "Flexitarian Retro",
        "url": "#option-2-selected"
      },
      {
        "label": "Plaid 8-bit",
        "is-disabled": true
      }
    ]
  },
  "themes": [
    "default",
    "dark"
  ],
  "variants": [
    {
      "title": "Default",
      "samples": [
        {
          "combobox": {
            "is-select": true,
            "placeholder": null,
            "options": [
              {
                "label": "Vinyl pug cardigan",
                "url": "#option-1-selected"
              },
              {
                "label": "Flexitarian Retro",
                "url": "#option-2-selected"
              },
              {
                "label": "Plaid 8-bit",
                "is-disabled": true
              }
            ]
          }
        },
        {
          "combobox": {
            "is-select": true,
            "placeholder": null,
            "options": null,
            "is-disabled": true
          }
        }
      ]
    }
  ]
}
  • Content: 
    %dropdownNav {
    @include stack-spacing();

    .combobox {
        @include stack-spacing(0);

        &-field {
            border-width: list.nth($field_border-width, 1);
            border-color: $_text-color;
            border-radius: $button_border-radius;
        }

        &[aria-disabled="true"] .combobox-field {
            border-color: $_disabled-color;
        }

        &:has(.combobox-dropdown[aria-hidden="false"]) .combobox-field {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &-item {

            a {
                @extend %link;

                text-decoration: none !important;
                vertical-align: middle;

                &:hover {
                    color: inherit !important;
                    text-decoration-color: currentcolor !important;
                }

                &::before {
                    content: "";

                    display: inline-block;
                    width: $combobox_link_icon_size;
                    height: max($combobox_link_icon_size, 1lh);

                    float: right;
                    margin-left: .25em;

                    @include tinted-svg($combobox_link_icon_url);
                }

            }

        }

    }

}

.dropdownNav {
    @extend %dropdownNav;
}
  • URL: /components/raw/dropdownnav/_dropdownNav.styles.scss
  • Filesystem Path: components/03-fragments/dropdownNav/_dropdownNav.styles.scss
  • Size: 1.3 KB