Swegon Component Library

Hotspot: Themed 

<button class="hotspot" aria-controls="hotspot" aria-expanded="false" style="left: 50%; top: 50%;">
    <div class="hotspot__inner">
        <div class="hotspot__label">Hotspot</div>
        <div class="hotspot__dot">
            <span class="hotspot__icon hotspot__icon--plus">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-plus"></use>
                </svg>
            </span>
            <span class="hotspot__icon hotspot__icon--minus">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-minus"></use>
                </svg>
            </span>
        </div>
    </div>
</button>
 
<button class="hotspot" aria-controls="{{ id }}" aria-expanded="{{expanded}}" style="left: {{ coords.x }}; top: {{ coords.y }};">
    <div class="hotspot__inner">
        <div class="hotspot__label">{{ label }}</div>
        <div class="hotspot__dot">
            <span class="hotspot__icon hotspot__icon--plus">
                {{> @icon id="plus"}}
            </span>
            <span class="hotspot__icon hotspot__icon--minus">
                {{> @icon id="minus"}}
            </span>
        </div>
    </div>
</button>
 
{
  "id": "hotspot",
  "label": "Hotspot",
  "expanded": false,
  "coords": {
    "x": "50%",
    "y": "50%"
  },
  "theme": "blue"
}
  • Content: 
    .hotspot {
    cursor: pointer;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);

    @include breakpoint($l) {
        transform: translateX(-50%) translateY(calc(-50% - #{size(2.375)}));
    }
}

.hotspot__label {
    display: none;
    color: $color-green-dark;
    padding: size(1.75) size(2.5);
    border: 2px solid $color-green-dark;
    border-radius: 25px;
    background-color: $color-white;
    font-weight: $font-weight-bold;

    .theme--blue & {
        color: $color-blue-2;
        border-color: $color-blue-2;
    }

    @include breakpoint($l) {
        display: block;
    }

    .hotspot[aria-expanded="true"] & {
        background-color: $color-green-pale;

        .theme--blue & {
            background-color: $color-blue-3;
        }
    }
}

.hotspot__dot {
    position: relative;
    background-color: $color-green-pale;
    border: 2px solid $color-green-dark;
    border-radius: 100%;
    width: size(3);
    height: size(3);

    .theme--blue & {
        background-color: $color-blue-3;
        border-color: $color-blue-2;
    }

    @include breakpoint($l) {
        margin: size(-1.25) auto 0;
        width: size(4);
        height: size(4);
    }
}

.hotspot__icon {
    &--minus {
        display: none;
        background-color: $color-green-dark;
        width: size(2);
        height: size(2);
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);

        .theme--blue & {
            background-color: $color-blue-2;
        }

        @include breakpoint($l) {
            width: size(2.5);
            height: size(2.5);
        }
    }

    .hotspot[aria-expanded="true"] & {
        &--plus {
            display: none;
        }

        &--minus {
            display: block;
        }
    }
}

.hotspot__icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    fill: $color-green-dark;
    width: 60%;
    height: 60%;

    .theme--blue & {
        fill: $color-blue-2;
    }
}

.hotspot__icon--minus svg,
.theme--blue .hotspot__icon--minus svg {
    fill: $color-white;
}
  • URL: /components/raw/hotspot/hotspot.scss
  • Filesystem Path: src/components/hotspot/hotspot.scss
  • Size: 2.2 KB

No notes defined.