@talentsoft-opensource/hylia/atoms/tag.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.Hylia-a-tag {
    font-family: @condensed_regular;
    font-size: 1.4rem;
    line-height: 2.4rem;

    position: relative;

    display: inline-block;
    overflow: hidden;

    max-width: 25rem;
    height: 2.4rem;
    margin: 0.5rem;
    padding: 0 1rem;

    transition: background 0.3s;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: @apprentice;

    border-radius: 1000rem;

    .onPressTag(positive, @namek, @stormtrooper);
    .onPressTag(apprentice, @apprentice, @vader);
    .onPressTag(warning, @saien, @stormtrooper);
    .onPressTag(negative, @ruban, @stormtrooper);
    .onPressTag(joker, @joker, @stormtrooper);
    .onPressTag(zerg, @zerg, @stormtrooper);
    .onPressTag(bb8, @bb8, @stormtrooper);
    .onPressTag(atreide, @atreide, @stormtrooper);
    .onPressTag(punisher, @punisher, @stormtrooper);
    .onPressTag(boo, @boo, @stormtrooper);
    .onPressTag(bouftou, @bouftou, @stormtrooper);
    .onPressTag(mystic, @mystic, @stormtrooper);
    .onPressTag(emperor, @emperor, @stormtrooper);

    // Icon delete
    &__delete {
        position: absolute;
        top: 0;
        right: 0.5rem;
    }

    &--with-icon {
        text-align: left;
        padding-left: 2.5rem;
    }

    &--with-remove {
        padding-right: 3rem;
    }

    // Elements
    &__icon {
        position: absolute;
        top: 50%;
        left: 0.5rem;
        color: @knight;
        transform: translateY(-50%);
    }

    // On Action
    &--with-action {
        cursor: pointer;
        padding-left: 2rem;
        
        .icon-check {
            opacity: 0.2;
        }

        .Hylia-a-tag__icon--selected {
            opacity: 0;
        }

        &:hover {
            .Hylia-a-tag__icon {
                opacity: 0;
            }

            .icon-check,
            .Hylia-a-tag__icon--selected {
                opacity: 1;
            }
        }
    }

    &--selected {
        .Hylia-a-tag__icon {
            opacity: 0;
        }

        .icon-check,
        .Hylia-a-tag__icon--selected {
            opacity: 1;
        }
    }

    &--dotted {
        color: @apprentice;
        border: 0.1rem dashed @apprentice;
        background: @stormtrooper;

        &:hover {
            background-color: @stormtrooper;
        }
    }

    // On disabled
    &--disabled {
        opacity: 0.5;

        &:hover {
            .Hylia-a-tag__icon {
                opacity: initial;
            }
        }

        .Hylia-a-tag__delete {
            &:hover {
                color: initial;
                background-color: initial;
            }
        }
    }
}

// Mixin add background-color and effect
.onPressTag(@name, @color, @colorFont) {
    // Set color
    &--@{name} {
        background-color: @color;
        color: @colorFont;

        &.Hylia-a-tag--with-action {
            &:hover {
                background-color: darken(@color, 10%);
            }
        }

        .Hylia-a-tag__icon {
            color: fade(@colorFont, 50%);

            &--selected {
                color: fade(@colorFont, 100%);
            }
        }

        // Set color animation name
        &.Hylia-a-tag--animate {
            animation: "onPressTag@{name}" 1s;
        }

        // Delete cross
        .Hylia-a-icon-delete {
            color: fade(@colorFont, 50%);

            &:hover {
                color: fade(@colorFont, 100%);
                background-color: darken(@color, 10%);
            }
        }
    }

    @keyframes "onPressTag@{name}" {
        0% {
            box-shadow: 0 0 0 0 @color;
        }
        100% {
            box-shadow: 0 0 0 0.6rem fade(@color, 0);
        }
    }
}