gaf-mobile/app/styles/modules/ContentToggle.less

GAF mobile Web site

@import (reference) '../libs/mixins';
@import (reference) '../themes/variables';

/**
 * Content Toggle
 *
 * A button/link/trigger to expand/collapse/show more content
 *
 * .ContentToggle-text--dark - dark verion of the text
 *
 * Markup: ContentToggle/ContentToggle.html
 *
 * Styleguide 7
 */

/**
 * Content Toggle with Counter
 *
 * Content Toggle that display a count of things like (projects in a certain category)
 *
 * Markup: ContentToggle/ContentToggle-with-counter.html
 *
 * Styleguide 7.1
 */

 @ContentToggle-icon-dimension: 20px;

.ContentToggle {
    @this: ContentToggle;

    width: 100%;
    padding: 0;
    border: none;
    outline: none;
    color: @text-color-xdark;
    background: transparent;

    &-inner {
        .flex();
        .flex-align-items(center);
        .flex-justify-content(space-between);
    }

    &:hover,
    &:focus {
        .@{this}-text {
            text-decoration: underline;
        }
    }

    &-text {
        margin-top: -2px;
        color: @link-color;
        font-weight: @type-weight-bold;

        &--dark {
            color: @text-color-xdark;
        }
    }

    &-counter {
        margin-right: 5px;
        font-size: @type-size-xxlge;
    }

    &-counterLabel {
        font-size: @type-size-lge;
        font-weight: @type-weight-regular;
    }

    &-icon {
        height: @ContentToggle-icon-dimension;

        [class*="flicon-"] {
            width: @ContentToggle-icon-dimension;
            height: @ContentToggle-icon-dimension;
            stroke-width: 0.5px;
        }
    }
}