Une ombre au tableau

READ ME

Ombrages

Gris

  • has-small-shadow

    classe : .has-small-shadow

    var : --has-small-shadow

    UI : mise en valeur d'éléments

  • has-shadow-default

    classe : .has-shadow-default

    var : --has-shadow-default

    UI : mise en valeur d'éléments et survol

  • has-medium-shadow

    classe : .has-medium-shadow

    var : --has-medium-shadow

    UI : mise en valeur d'éléments

Yellow

  • yellow-shadow

    classe : .yellow-shadow

    var : --yellow-shadow--default

    UI : mise en valeur d'éléments

  • yellow-shadow--hover

    classe : .yellow-shadow--hover

    var : --yellow-shadow--hover

    UI : mise en valeur d'éléments au survol

Red

  • red-shadow

    classe : .red-shadow

    var : --red-shadow--default

    UI : mise en valeur d'éléments

  • red-shadow--hover

    classe : .red-shadow--hover

    var : --red-shadow--hover

    UI : mise en valeur d'éléments au survol

 <!-- Gris -->
<header class="subsection-header">
    <h3>Gris</h3>
</header>

<!-- Liste des Couleurs -->
<ul class="box-list">
    <!-- Ombrage 1 -->
    <li class="box-item">
        <article>
            <!-- La classe de couleur -->
            <h4 class="box flex-center has-small-shadow">has-small-shadow</h4>

            <!-- Les INFOS de la couleur -->
            <header>
                <!-- Nom -->
                <h3 class="dsp-none"></h3>

                <!-- classe -->
                <p><strong>classe</strong> : .has-small-shadow</p>

                <!-- variable -->
                <p><strong>var</strong> : --has-small-shadow</p>

                <!-- Usage  -->
                <p><strong>UI</strong> : mise en valeur d'éléments</p>
            </header>
        </article>
    </li>

    <!-- Ombrage 2 -->
    <li class="box-item">
        <article>
            <!-- La classe de couleur -->
            <h4 class="box flex-center has-shadow-default">has-shadow-default</h4>

            <!-- Les INFOS de la couleur -->
            <header>
                <!-- Nom -->
                <h3 class="dsp-none"></h3>

                <!-- classe -->
                <p><strong>classe</strong> : .has-shadow-default</p>

                <!-- variable -->
                <p><strong>var</strong> : --has-shadow-default</p>

                <!-- Usage  -->
                <p><strong>UI</strong> : mise en valeur d'éléments et survol</p>
            </header>
        </article>
    </li>

    <!-- Ombrage 3 -->
    <li class="box-item">
        <article>
            <!-- La classe de couleur -->
            <h4 class="box flex-center has-small-shadow">has-medium-shadow</h4>

            <!-- Les INFOS de la couleur -->
            <header>
                <!-- Nom -->
                <h3 class="dsp-none"></h3>

                <!-- classe -->
                <p><strong>classe</strong> : .has-medium-shadow</p>

                <!-- variable -->
                <p><strong>var</strong> : --has-medium-shadow</p>

                <!-- Usage  -->
                <p><strong>UI</strong> : mise en valeur d'éléments</p>
            </header>
        </article>
    </li>
</ul>

<!-- Yellow -->
<header class="subsection-header">
    <h3>Yellow</h3>
</header>

<ul class="box-list">
    <!-- Yellow shadox default -->
    <li class="box-item">
        <article>
            <!-- Le nom de la classe -->
            <h4 class="box flex-center yellow-shadow">yellow-shadow</h4>

            <!-- Les INFOS de la couleur -->
            <div>
                <!-- classe -->
                <p><strong>classe</strong> : .yellow-shadow</p>

                <!-- variable -->
                <p><strong>var</strong> : --yellow-shadow--default</p>

                <!-- Usage  -->
                <p><strong>UI</strong> : mise en valeur d'éléments</p>
            </div>
        </article>
    </li>

    <!-- Yellow shadow hover -->
    <li class="box-item">
        <article>
            <!-- Le nom de la classe -->
            <h4 class="box flex-center yellow-shadow--hover">yellow-shadow--hover</h4>

            <!-- Les INFOS de la couleur -->
            <div>
                <!-- classe -->
                <p><strong>classe</strong> : .yellow-shadow--hover</p>

                <!-- variable -->
                <p><strong>var</strong> : --yellow-shadow--hover</p>

                <!-- Usage  -->
                <p><strong>UI</strong> : mise en valeur d'éléments au survol</p>
            </div>
        </article>
    </li>
</ul>

<!-- Red -->
<header class="subsection-header">
    <h3>Red</h3>
</header>

<ul class="box-list">
    <!-- Red shadox default -->
    <li class="box-item">
        <article>
            <!-- Le nom de la classe -->
            <h4 class="box flex-center red-shadow">red-shadow</h4>

            <!-- Les INFOS de la couleur -->
            <div>
                <!-- classe -->
                <p><strong>classe</strong> : .red-shadow</p>

                <!-- variable -->
                <p><strong>var</strong> : --red-shadow--default</p>

                <!-- Usage  -->
                <p><strong>UI</strong> : mise en valeur d'éléments</p>
            </div>
        </article>
    </li>

    <!-- Red shadox hover -->
    <li class="box-item">
        <article>
            <!-- Le nom de la classe -->
            <h4 class="box flex-center red-shadow--hover">red-shadow--hover</h4>

            <!-- Les INFOS de la couleur -->
            <div>
                <!-- classe -->
                <p><strong>classe</strong> : .red-shadow--hover</p>

                <!-- variable -->
                <p><strong>var</strong> : --red-shadow--hover</p>

                <!-- Usage  -->
                <p><strong>UI</strong> : mise en valeur d'éléments au survol</p>
            </div>
        </article>
    </li>
</ul>
 

Notes

 /* VARIABLES */
:root {
    
    /* Ombrages */
    --has-small-shadow : 0 .25rem .375rem rgba(0,0,0,.09);
    --has-shadow-default: 0px 10px 30px -10px rgba(151, 163, 184, 0.5);
    --has-medium-shadow : 0 14px 28px rgba(0, 0, 0, 0.015), 0 10px 10px rgba(0, 0, 0, 0.035);

}

/* OMBRAGES */

.xlight-shadow {
    box-shadow: var(--xlight-shadow)!important;
}

.green-shadow {
    box-shadow: var(--green-shadow)!important;
}

.yellow-shadow {
    box-shadow: var(--yellow-shadow)!important;
}


/* Gris */
.has-small-shadow {
    box-shadow: var(--small-shadow);
}

.has-shadow-default {
    box-shadow: var(--shadow-default);
}

.has-medium-shadow {
    box-shadow: var(--medium-shadow);
}

.has-xlight-shadow {
    box-shadow: var(--xlight-shadow);
}

.has-light-shadow {
    box-shadow: var(--light-shadow);
}

/* Yellow */
.yellow-shadow {
    box-shadow: var(--yellow-shadow--default);
    transition: box-shadow .25s;
}

.yellow-shadow--hover,
.yellow-shadow:hover {
    box-shadow: var(--yellow-shadow--hover);
    transition: box-shadow .25s;
}

/* Red */
.red-shadow {
    box-shadow: var(--red-shadow--default);
    transition: box-shadow .25s;
}

.red-shadow--hover,
.red-shadow:hover {
    box-shadow: var(--red-shadow--hover);
    transition: box-shadow .25s;
}


/* OMBRAGES : suite */

.z-depth-top {
    box-shadow: 0 -20px 24px 2px rgba(0,0,0,0.14),
        0 6px 30px 5px rgba(0,0,0,0.12),
        0 8px 10px -7px rgba(0,0,0,0.2)
}

.z-depth {
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
        0 6px 30px 5px rgba(0,0,0,0.12),
        0 8px 10px -7px rgba(0,0,0,0.2)
}
 

Notes

 

Où ça se trouve ?

Dans le fichier /base/_shades.scss

Back to Top