Swegon Component Library

Button: White 

<a class="button button--white  ">
    <span class="button__label">Label here</span>
</a>
 
<{{getelement tag "a"}} class="button {{ getmodifiers modifiers "button" }} {{additionalClasses}} {{#if icon}}button--icon{{/if}}" {{#if href}}href="{{href}}"{{/if}} {{{getattributes attributes}}}>
    {{#if label}}
        <span class="button__label">{{ label }}</span>
    {{/if}}
    {{#if icon}}
        {{> @icon id=icon additionalClasses="button__icon"}}
    {{/if}}
</{{getelement tag "a"}}>
 
{
  "label": "Label here",
  "modifiers": [
    "white"
  ]
}
  • Content: 
    .button {
    position: relative;
    display: inline-block;
    min-height: size(5);
    padding-left: size(5);
    padding-right: size(5);
    padding-top: calc(#{size(1)} + 1px); // visual trick to align text vertically, bypassing font issue
    padding-bottom: calc(#{size(1)} - 1px); // visual trick to align text vertically, bypassing font issue
    background-color: $color-green-dark;
    color: $color-white;
    font-weight: $font-weight-bold;
    text-transform: uppercase;
    vertical-align: baseline;
    text-decoration: none;
    border-radius: 0;
    margin-bottom: size(2);
    cursor: pointer;

    &:hover {
        background-color: $color-green;
        text-decoration: none;
    }

    @include color-theme {
        background-color: $arg-theme-color;

        &:hover {
            background-color: darken($arg-theme-color, 2%);
        }
    }

    @include dark-theme {
        box-shadow: inset 0 0 0 1px $color-white;

        &:hover {
            background-color: $color-white;
            color: $arg-theme-color;
        }
    }
}

.button--icon {
    text-align: left;
    padding-left: size(3);
    padding-right: size(9);
}

.button--wide {
    @include breakpoint-classes {
        width: 100%;
    }
}

.button--white {
    background-color: $color-white;
    color: $color-green-dark;

    &:hover {
        background-color: $color-green;
        color: $color-white;
    }
}

.button--ghost {
    background-color: transparent;
    color: $color-green-dark;
    box-shadow: inset 0 0 0 1px $color-green-dark;

    &:hover,
    &:focus-visible {
        color: $color-white;
        background-color: $color-green;
        box-shadow: none;

        .button__icon {
            fill: $color-white;
        }
    }

    .button__icon {
        fill: $color-green-dark;
    }

    @include color-theme {
        box-shadow: inset 0 0 0 1px $arg-theme-color;
        color: $arg-theme-color;
        background-color: transparent;

        &:hover {
            color: $color-white;
            background-color: $arg-theme-color;
            box-shadow: inset 0 0 0 1px $arg-theme-color;
        }
    }

    @include color-theme-dark {
        box-shadow: inset 0 0 0 1px $color-white;
        color: $color-white;

        &:hover {
            background-color: $color-white;
            color: $arg-theme-color;
        }
    }

    .hero__primary & {
        @include color-theme {
            border-color: $color-white;
            color: $color-white;

            &:hover {
                background-color: $color-white;
                color: $arg-theme-color;
            }
        }
    }
}

.button--rounded {
    border-radius: size(5);
    padding-left: size(2);
    padding-right: size(2);
    white-space: nowrap;



    &.button--ghost {
        box-shadow: inset 0 0 0 2px $color-green-dark;

        &:hover {
            box-shadow: none;
        }

        @include color-theme {
            box-shadow: inset 0 0 0 2px $arg-theme-color;

            &:hover {
                box-shadow: inset 0 0 0 2px $arg-theme-color;
            }
        }

        @include dark-theme {
            box-shadow: inset 0 0 0 2px $color-white;

            &:hover {
                box-shadow: inset 0 0 0 2px $color-white;
            }
        }

        &__black {
            box-shadow: inset 0 0 0 2px $color-black;

            &:hover {
                box-shadow: none;
            }

            @include color-theme {
                box-shadow: inset 0 0 0 2px $color-black;

                &:hover {
                    box-shadow: inset 0 0 0 2px $color-black;
                }
            }

            @include dark-theme {
                box-shadow: inset 0 0 0 2px $color-white;

                &:hover {
                    box-shadow: inset 0 0 0 2px $color-white;
                }
            }

        }
    }
}

.button__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: size(1.5);
    width: size(3);
    height: size(3);
    fill: $color-white;
}

.button__label {
    font-size: size(2);
    line-height: size(3);
    height: 100%;
    vertical-align: baseline;

    .button--rounded & {
        font-size: size(1.5);
        line-height: size(2.5);
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/button/button.scss
  • Size: 4.3 KB

No notes defined.