add showmore scss

[hatem-benmansour-lmfr]

🚀 Pattern addition proposal

Description

add showore sccs for showmore component . **Anything else relevant?**

.mc-showmore {
    $parent: &;
    position: relative;
    height: auto;
    margin-bottom: 4rem;

    &__content {
        display: none;
        visibility: collapse;
    }
    &__less  {
        display: none;
        visibility: hidden;
    }

    &__more {
        display: block;
        visibility: visible;
    }

    &__trigger {
        position: absolute;
        left: -9999px;

        &:checked {
            ~ #{$parent}__content {
                display: block;
                visibility: visible;
            }

            + #{$parent}__label {
                top: 100%;

                #{$parent}__more {
                    display: none;
                    visibility: hidden;
                }

                #{$parent}__less {
                    display: block;
                    visibility: visible;
                }

            }
        }

    }

    &__label {
        text-align: center;
        display: block;
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 50%;
        cursor: pointer;
        transform: translate(-50%, 0);
        @include set-from-screen('l'){
            width: auto;
        }
        > * {
            pointer-events: none;
            margin: 1rem auto;
        }

    }

}

[tiloyi]

Hi @hatem-benmansour-lmfr , As seen together last week, unfortunately for the moment this component is not eligible to be added in Mozaic as is.

We will continue to work on it, in order to better qualify it and to better define the transversal character of this type of component.