[TASK] Add alert styles, improve CSS

deoostfrees · Dec 23, 2023 · 72190aa · 72190aa
1 parent 38a02af
commit 72190aa
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git a/css/components/_alerts.css b/css/components/_alerts.css
@@ -1,6 +1,13 @@
 .alert {
-  border: calc((1 / 18) * 1rem) solid transparent;
-  padding: calc((18 / 18) * 1rem);
+  --link-color: currentcolor;
+  --link-decoration-line: underline;
+  --link-hover-color: currentcolor;
+  --link-hover-decoration-line: none;
+
+  border-radius: var(--alert-border-radius);
+  border: var(--alert-border-width) solid transparent;
+  padding-block: var(--alert-padding-y);
+  padding-inline: var(--alert-padding-x);
 }
 
 .alert--info {

diff --git a/css/themes/default/_dark.css b/css/themes/default/_dark.css
@@ -30,7 +30,6 @@
    * Buttons
    */
   --button-background-color: transparent;
-  --button-border-radius: 0;
   --button-color: var(--white);
   --button-border-color: transparent;
   --button-hover-background-color: transparent;
@@ -40,7 +39,6 @@
   /* Primary */
   --button-primary-background-color: var(--white);
   --button-primary-border-color: var(--white);
-  --button-primary-border-radius: 0;
   --button-primary-color: var(--black);
   --button-primary-hover-background-color: color-mix(in srgb, var(--white) 80%, var(--black));
   --button-primary-hover-border-color: color-mix(in srgb, var(--white) 80%, var(--black));
@@ -49,7 +47,6 @@
   /* Secondary */
   --button-secondary-background-color: transparent;
   --button-secondary-border-color: var(--white);
-  --button-secondary-border-radius: 0;
   --button-secondary-color: var(--white);
   --button-secondary-hover-background-color: var(--white);
   --button-secondary-hover-border-color: var(--white);
@@ -63,13 +60,11 @@
   /* Input */
   --input-background-color: var(--white);
   --input-border-color: color-mix(in srgb, var(--white) 30%, var(--black));
-  --input-border-radius: 0;
   --input-color: var(--black);
 
   /* Checkbox */
   --check-background-color: var(--white);
   --check-border-color: color-mix(in srgb, var(--white) 30%, var(--black));
-  --check-border-radius: 0;
   --check-color: var(--black);
 
   /* Radio */
@@ -80,6 +75,5 @@
   /* Select */
   --select-background-color: var(--white);
   --select-border-color: color-mix(in srgb, var(--white) 30%, var(--black));
-  --select-border-radius: 0;
   --select-color: var(--black);
 }
diff --git a/css/themes/default/_light.css b/css/themes/default/_light.css
@@ -90,6 +90,10 @@
    * Alerts
    *
    */
+  --alert-border-radius: 0;
+  --alert-border-width: calc((1 / 18) * 1rem);
+  --alert-padding-x: calc((18 / 18) * 1rem);
+  --alert-padding-y: calc((18 / 18) * 1rem);
 
   /* Info */
   --alert-info-background-color: color-mix(in srgb, var(--blue) 10%, var(--white));

diff --git a/html/ratata.html b/html/ratata.html
@@ -38,7 +38,7 @@ <h1>Ratata</h1>
 
         <section>
           <header>
-            <h2 id="typo">Typo<a class="anchor" href="#typo" aria-labelledby="typo"><span aria-hidden="true">#</span></a></h2>
+            <h2 id="typo">Typography<a class="anchor" href="#typo" aria-labelledby="typo"><span aria-hidden="true">#</span></a></h2>
           </header>
 
           <h1>Heading level 1</h1>
@@ -104,8 +104,15 @@ <h2 id="forms">Forms<a class="anchor" href="#forms" aria-labelledby="forms"><spa
 
             <label for="select">Select</label>
             <select id="select" name="select">
-              <option>1</option>
-              <option>2</option>
+              <option value="">Select a feature</option>
+              <hr>
+              <optgroup label="Content">
+                <option value="buttons">Buttons</option>
+                <option value="typography">Typography</option>
+              </optgroup>
+              <optgroup label="Components">
+                <option value="alerts">Alerts</option>
+              </optgroup>
             </select>
 
             <label for="text">Textarea</label>
@@ -159,19 +166,19 @@ <h2 id="alerts">Alerts<a class="anchor" href="#alerts" aria-labelledby="alerts">
           </header>
 
           <div class="alert alert--info" role="alert">
-            Info alert
+            <p>Info alert. <a href="#">More info about the info alert</a>.</p>
           </div>
 
           <div class="alert alert--success" role="alert">
-            Success alert
+            <p>Success alert. <a href="#">More info about the success alert</a>.</p>
           </div>
 
           <div class="alert alert--warning" role="alert">
-            Warning alert
+            <p>Warning alert. <a href="#">More info about the warning alert</a>.</p>
           </div>
 
           <div class="alert alert--danger" role="alert">
-            Danger alert
+            <p>Danger alert. <a href="#">More info about the danger alert</a>.</p>
           </div>
         </section>
       </main>