Merge branch 'callout-box-fixes' into 'v4.x'

Different callout box sizes (through padding)

See merge request allianceauth/allianceauth!1584

allianceauth/framework/static/allianceauth/framework/css/auth-framework.css

@@ -72,9 +72,16 @@
         border: 1px solid var(--bs-border-color);
         border-left-width: 0.25rem;
         border-radius: 0.25rem;
-        margin-bottom: 1.25rem;
-        margin-top: 1.25rem;
-        padding: 1.25rem;
+        margin-bottom: 1rem;
+        padding: 1rem;
+    }
+
+    .aa-callout.aa-callout-sm {
+        padding: 0.5rem;
+    }
+
+    .aa-callout.aa-callout-lg {
+        padding: 1.5rem;
     }
 
     /* Last item bottom margin should be 0 */

docs/development/custom/framework/css.md

@@ -42,10 +42,24 @@ Callout-boxes need a base-class (`.aa-callout`) and a modifier-class (e.g.:
 `.aa-callout-info` for an info-box). Modifier classes are available for the usual
 Bootstrap alert levels "Success", "Info", "Warning" and "Danger".
 
-![Alliance Auth Framework: Callout Boxes](/_static/images/development/aa-framework/css/callout-boxes.png "Alliance Auth Framework: Callout Boxes")
-
 ### HTML
 
+```html
+<div class="aa-callout">
+    <p>
+      This is a callout-box.
+    </p>
+</div>
+```
+
+![Alliance Auth Framework: Callout Boxes](/_static/images/development/aa-framework/css/callout-box.png "Alliance Auth Framework: Callout Boxe")
+
+#### Alert Level Modifier Classes
+
+The callout boxes come in four alert levels: success, info, warning and danger.
+
+Use the modifier classes `.aa-callout-success`, `.aa-callout-info`, `.aa-callout-warning` and `.aa-callout-danger` to change the left border color of the callout box.
+
 ```html
 <div class="aa-callout aa-callout-success">
     <p>
@@ -71,3 +85,35 @@ Bootstrap alert levels "Success", "Info", "Warning" and "Danger".
     </p>
 </div>
 ```
+
+![Alliance Auth Framework: Callout Boxes Alert Modifier](/_static/images/development/aa-framework/css/callout-boxes-alert-modifier.png "Alliance Auth Framework: Callout Boxes Alert Modifier")
+
+#### Size Modifier Classes
+
+The callout boxes come in three sizes: small, default and large.
+
+Use the modifier classes `.aa-callout-sm` for small and `.aa-callout-lg` for large, where `.aa-callout-sm` will change the default padding form 1rem to 0.5rem and `.aa-callout-lg` will change it to 1.5rem.
+
+These modifier classes can be combined with the alert level modifier classes.
+
+```html
+<div class="aa-callout aa-callout-sm">
+    <p>
+        This is a small callout-box.
+    </p>
+</div>
+
+<div class="aa-callout">
+    <p>
+        This is a default callout-box.
+    </p>
+</div>
+
+<div class="aa-callout aa-callout-lg">
+    <p>
+        This is a large callout-box.
+    </p>
+</div>
+```
+
+![Alliance Auth Framework: Callout Boxes Size Modifier](/_static/images/development/aa-framework/css/callout-boxes-size-modifier.png "Alliance Auth Framework: Callout Boxes Size Modifier")