PSI Software SE Design Library

Elevation

No notes defined.

<!-- Default -->



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

    <h2 class="doc-section-title">Schatten</h2>

    <div class="doc-elevations">

        <div class="doc-elevations-item">

            <h3 class="doc-elevations-item-label">Small</h3>

            <div class="doc-elevations-item-sample --bs-small"></div>

        </div>
        <div class="doc-elevations-item">

            <h3 class="doc-elevations-item-label">Default</h3>

            <div class="doc-elevations-item-sample --bs"></div>

            <div class="doc-elevations-item-description">
                z.B. Karten
            </div>

        </div>
        <div class="doc-elevations-item">

            <h3 class="doc-elevations-item-label">Large</h3>

            <div class="doc-elevations-item-sample --bs-large"></div>

            <div class="doc-elevations-item-description">
                z.B. für hervorgehobene Karten
            </div>

        </div>
        <div class="doc-elevations-item">

            <h3 class="doc-elevations-item-label">Largest</h3>

            <div class="doc-elevations-item-sample --bs-largest"></div>

            <div class="doc-elevations-item-description">
                z.B. für aktive Karten
            </div>

        </div>

    </div>

</section>


<!-- Default -->


<!-- Documentation only -->
{{#settings}}

<section class="doc-section">

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

        {{#box-shadows}}
            {{#if variants}}
    <div class="doc-elevations">

            {{#variants}}
        <div class="doc-elevations-item"{{#value}} style="--doc-box-shadow: {{.}};"{{/value}}>

            <h3 class="doc-elevations-item-label">{{{label}}}</h3>

            <div class="doc-elevations-item-sample{{#modifier}} {{.}}{{/modifier}}"></div>

                {{#description}}
            <div class="doc-elevations-item-description">
                {{{.}}}
            </div>
                {{/description}}

        </div>
            {{/variants}}

    </div>
            {{/if}}
        {{/box-shadows}}

</section>

{{/settings}}
 
/* Default: No context defined. */


/* Documentation only */
{
  "settings": {
    "title": "Schatten",
    "box-shadows": {
      "variants": [
        {
          "name": "small",
          "label": "Small",
          "modifier": "--bs-small",
          "description": null
        },
        {
          "name": "default",
          "label": "Default",
          "modifier": "--bs",
          "description": "z.B. Karten"
        },
        {
          "name": "large",
          "label": "Large",
          "modifier": "--bs-large",
          "description": "z.B. für hervorgehobene Karten"
        },
        {
          "name": "largest",
          "label": "Largest",
          "modifier": "--bs-largest",
          "description": "z.B. für aktive Karten"
        }
      ]
    }
  }
}
  • Content: 
    @mixin box-shadow(
    $variant: default,
    $factor: 1,
    $shadows: $_box-shadows
){

    @include responsive-variable(
        $variant: $variant,
        $property: box-shadow,
        $factor: $factor,
        $variables: $shadows,
        $prefix: "--bs",
    );

}
  • URL: /components/raw/elevation/_elevation.helpers.scss
  • Filesystem Path: components/01-base/elevation/_elevation.helpers.scss
  • Size: 274 Bytes
  • Content: 
    $_box-shadow_color: $_BLACK !default;

@import "_elevation.helpers";
@import "_elevation.settings";
@import "_elevation.styles";
  • URL: /components/raw/elevation/_elevation.scss
  • Filesystem Path: components/01-base/elevation/_elevation.scss
  • Size: 129 Bytes
  • Content: 
    $_box-shadow_color: black !default;

$_box-shadows: (
    default: (
        small:   0 1px 4px rgba($_box-shadow_color, .2),
        default: (0 1px 4px rgba($_box-shadow_color, .1), 0 4px 8px rgba($_box-shadow_color, .15)),
        large:   (0 4px 8px rgba($_box-shadow_color, .1), 0 8px 16px rgba($_box-shadow_color, .15)),
        largest: (0 8px 16px rgba($_box-shadow_color, .1), 0 16px 32px rgba($_box-shadow_color, .15)),
    )
) !default;
  • URL: /components/raw/elevation/_elevation.settings.scss
  • Filesystem Path: components/01-base/elevation/_elevation.settings.scss
  • Size: 448 Bytes
  • Content: 
    :root {

    @include responsive-variables(
        $set: $_box-shadows,
        $prefix: --bs
    );

}

    //----- Utility classes -----//

.--bs {

    @each $name, $value in map-get($_box-shadows, default) {

        $variant: '';

        @if $name != default {
            $variant: '-#{$name}';
        }

        &#{$variant} {
            box-shadow: $value !important;
            box-shadow: var(--bs#{$variant}) !important;
        }

    }

}
  • URL: /components/raw/elevation/_elevation.styles.scss
  • Filesystem Path: components/01-base/elevation/_elevation.styles.scss
  • Size: 457 Bytes