Variantes d'alertes avec les variables CSS
Variantes d'alertes avec les variables CSS
HTML
index.html <article class="alert">
<span class="message"></span>
</article>
<article class="alert alert--error">
<span class="message"></span>
</article>
<article class="alert alert--warning">
<span class="message"></span>
</article>
<article class="alert alert--info">
<span class="message"></span>
</article>
<article class="alert alert--success">
<span class="message"></span>
</article>
CSS
style.css @layer demo {
.alert {
--state-color: white;
--emoji: "C'est ok 😀";
border: var(--state-color) 1px solid;
background-image: linear-gradient(45deg, black, #222);
padding: 1rem 4rem;
border-radius: 10px;
font-size: 2rem;
text-align: center;
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
display: flex;
.message {
font-size: 1rem;
color: var(--state-color);
&::before {
content: var(--emoji);
}
}
/* Cela est possible car les variables déclarées ont été affectées aux propriétés de l'élément de base */
&[class*="warning"] {
--state-color: orange;
--emoji: "Attention 😱";
}
&[class*="error"] {
--state-color: red;
--emoji: "Erreur 💀";
}
&[class*="success"] {
--state-color: green;
--emoji: "Succès 😎";
}
&[class*="info"] {
--state-color: blue;
--emoji: "Pour info 😋";
}
}
}
@layer demoStyles {
body {
height: 100svh;
}
}