PSI Software SE Design Library

Highlight Marker

No notes defined.

<!-- Default -->
<span class="highlightMarker">Label</span>


<!-- Small -->
<span class="highlightMarker is-small">Label</span>


<!-- Documentation only -->
<section class="doc-variant">

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

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

        <div class="doc-variant-configuration">
        </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="accent">accent</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="">

        <span class="highlightMarker">Label</span>

    </div>

</section>
<section class="doc-variant">

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

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

        <div class="doc-variant-configuration">
        </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="accent">accent</option>
                    <option value="dark">dark</option>
                </select>
            </label>
        </div>

    </header>

    <div class="doc-variant-samples" data-theme="">

        <span class="highlightMarker is-small">Label</span>

    </div>

</section>


<!-- Default -->
<span class="highlightMarker{{#modifier}} {{.}}{{/modifier}}">{{{label}}}</span>

<!-- Small -->
<span class="highlightMarker{{#modifier}} {{.}}{{/modifier}}">{{{label}}}</span>

<!-- Documentation only -->
{{#variants}}
<section class="doc-variant">

    <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>

        <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>

    </header>

    <div class="doc-variant-samples" data-theme="{{theme}}">

        {{#samples}}
            {{render '@highlightmarker' (contextData '@highlightmarker' this) merge=true}}
        {{/samples}}

    </div>

</section>
    {{/variants}}
 
/* Default */
{
  "label": "Label"
}


/* Small */
{
  "label": "Label",
  "modifier": "is-small"
}


/* Documentation only */
{
  "label": "Label",
  "variants": [
    {
      "title": "Medium (Default)",
      "themes": [
        "default",
        "accent",
        "dark"
      ],
      "samples": {
        "label": "Label"
      }
    },
    {
      "title": "Small",
      "themes": [
        "default",
        "accent",
        "dark"
      ],
      "samples": {
        "label": "Label",
        "modifier": "is-small"
      }
    }
  ]
}
  • Content: 
    @import "_highlightMarker.settings";
@import "_highlightMarker.styles";

%highlightMarker {

    [data-theme="dark"] & {
        background-color: $_accent-color;
        color: $_TEXT-COLOR;
    }

    [data-theme="accent"] & {
        color: $_SPOT-PRIMARY-ACCENT-COLOR;
    }

}
  • URL: /components/raw/highlightmarker/_highlightMarker.scss
  • Filesystem Path: components/03-fragments/highlightMarker/_highlightMarker.scss
  • Size: 282 Bytes
  • Content: 
    $highlightMarker_styles: (
    text-size: small,
    font-weight: $_font-weight--semibold,
    padding: .2em var(--bp-small),
    border-radius: var(--br-small),
    background-color: $_accent-color,
    color: $_text-color,
) !default;

$highlightMarker_styles--small: (
    text-size: smallest,
    padding: .2em .8em,
) !default;
  • URL: /components/raw/highlightmarker/_highlightMarker.settings.scss
  • Filesystem Path: components/03-fragments/highlightMarker/_highlightMarker.settings.scss
  • Size: 333 Bytes
  • Content: 
    %highlightMarker {
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;

    @include styles($highlightMarker_styles);
}

%highlightMarker--small {
    @include styles($highlightMarker_styles--small);
}

.highlightMarker {
    @extend %highlightMarker;

    &.is-small {
        @extend %highlightMarker--small;
    }

}
  • URL: /components/raw/highlightmarker/_highlightMarker.styles.scss
  • Filesystem Path: components/03-fragments/highlightMarker/_highlightMarker.styles.scss
  • Size: 345 Bytes