Improve use of CSS variables within alerts

TrestleAdmin · Jul 22, 2024 · 5367d31 · 5367d31
1 parent 94456fc
commit 5367d31
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/app/assets/bundle/trestle/admin.css b/app/assets/bundle/trestle/admin.css
diff --git a/frontend/css/components/_alerts.scss b/frontend/css/components/_alerts.scss
@@ -3,8 +3,7 @@
   align-items: center;
 
   h3 {
-    margin-top: 0;
-    margin-bottom: 2px;
+    margin-bottom: 0.125rem;
     font-size: 1.5rem;
     font-weight: 600;
   }
@@ -25,8 +24,13 @@
     }
   }
 
+  @include media-breakpoint-down(md) {
+    --#{$prefix}alert-padding-y: 1rem;
+  }
+
   @include media-breakpoint-down(sm) {
-    padding: ($alert-padding-y * 0.75) ($alert-padding-x * 0.75);
+    --#{$prefix}alert-padding-x: 0.75rem;
+    --#{$prefix}alert-padding-y: 0.75rem;
 
     h3 {
       font-size: 1.25rem;
@@ -39,19 +43,19 @@
 }
 
 .alert-icon {
-  margin-right: $alert-padding-x;
+  margin-right: var(--#{$prefix}alert-padding-x);
 
-  font-size: 40px;
-  width: 40px;
+  font-size: 2.75rem;
+  width: 2.75rem;
 
   text-align: center;
 
   @include media-breakpoint-down(sm) {
-    margin-left: $alert-padding-x * 0.25;
-    margin-right: $alert-padding-x * 0.75;
+    margin-left: calc(var(--#{$prefix}alert-padding-x) * 0.25);
+    margin-right: calc(var(--#{$prefix}alert-padding-x) * 0.75);
 
-    font-size: 32px;
-    width: 32px;
+    font-size: 2.25rem;
+    width: 2.25rem;
   }
 }
 
@@ -60,8 +64,8 @@
 
   .btn-close {
     position: absolute;
-    top: 0.75rem;
-    right: $alert-padding-x;
+    top: calc(var(--#{$prefix}alert-padding-y) * 0.5);
+    right: var(--#{$prefix}alert-padding-x);
 
     color: white;
     opacity: 0.5;
@@ -72,8 +76,7 @@
     }
 
     @include media-breakpoint-down(sm) {
-      top: 0.375rem;
-      right: $alert-padding-x * 0.75;
+      right: calc(var(--#{$prefix}alert-padding-x) * 0.5);
     }
   }
 }
@@ -132,15 +135,15 @@
   &:after {
     @include icon-fa($fa-var-caret-down);
     font-size: 0.75rem;
-    margin-left: 5px;
+    margin-left: 0.25rem;
   }
 }
 
 .debug-errors {
   ul {
     list-style: none;
-    margin: 5px 0 0 0;
-    padding: 0 0 0 5px;
+    margin: 0.25rem 0 0 0;
+    padding: 0 0 0 0.25rem;
     border-left: 4px solid rgba(white, 0.25);
   }
 }