Mathis/allianceauth
1
0
Fork 0
mirror of https://gitlab.com/allianceauth/allianceauth.git synced 2025-07-09 12:30:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

[CHANGE] Docs updated

Browse Source
This commit is contained in:
Peter Pfeufer 2024-01-07 13:56:55 +01:00
parent 24b6c19aca
commit e81450baf3
No known key found for this signature in database
GPG Key ID: 6051D2C6AD4EBC27
4 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/_static/images/development/aa-framework/css/callout-box.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

0
docs/_static/images/development/aa-framework/css/callout-boxes.png → docs/_static/images/development/aa-framework/css/callout-boxes-alert-modifier.png vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/_static/images/development/aa-framework/css/callout-boxes-size-modifier.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

50
docs/development/custom/framework/css.md
View File

@ -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 `.aa-callout-info` for an info-box). Modifier classes are available for the usual
Bootstrap alert levels "Success", "Info", "Warning" and "Danger". 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
```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 ```html
<div class="aa-callout aa-callout-success"> <div class="aa-callout aa-callout-success">
<p> <p>
@ -71,3 +85,35 @@ Bootstrap alert levels "Success", "Info", "Warning" and "Danger".
</p> </p>
</div> </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 aa-callout-warning">
<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")