mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-07-09 12:30:15 +02:00
120 lines
6.3 KiB
Markdown
120 lines
6.3 KiB
Markdown
# CSS Framework
|
|
|
|
To establish a unified style language throughout Alliance Auth and Community Apps,
|
|
Alliance Auth is providing its own CSS framework with a couple of CSS classes.
|
|
|
|
## Cursors
|
|
|
|
Our CSS framework provides different classes to manipulate the cursor, which are
|
|
missing in Bootstrap.
|
|
|
|
```{eval-rst}
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| CSS Class | Effect | Example |
|
|
+======================+========================================================+================================================================================+
|
|
| `cursor-default` | System default curser | .. image:: /_static/images/development/aa-framework/css/cursor-default.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-pointer` | Pointer, like it looks like for links and form buttons | .. image:: /_static/images/development/aa-framework/css/cursor-pointer.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-wait` | Wait animation | .. image:: /_static/images/development/aa-framework/css/cursor-wait.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-text` | Text selection cursor | .. image:: /_static/images/development/aa-framework/css/cursor-text.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-move` | 4-arrow-shaped cursor | .. image:: /_static/images/development/aa-framework/css/cursor-move.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-help` | Cursor with a little question mark | .. image:: /_static/images/development/aa-framework/css/cursor-help.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-not-allowed` | Not Allowed sign | .. image:: /_static/images/development/aa-framework/css/cursor-not-allowed.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-inherit` | Inherited from its parent element | |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-zoom-in` | Zoom in symbol | .. image:: /_static/images/development/aa-framework/css/cursor-zoom-in.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
| `cursor-zoom-out` | Zoom out symbol | .. image:: /_static/images/development/aa-framework/css/cursor-zoom-out.png |
|
|
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------+
|
|
```
|
|
|
|
## Callout-Boxes
|
|
|
|
These are similar to the Bootstrap alert/notification boxes, but not as "loud".
|
|
|
|
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".
|
|
|
|
### HTML
|
|
|
|
```html
|
|
<div class="aa-callout">
|
|
<p>
|
|
This is a callout-box.
|
|
</p>
|
|
</div>
|
|
```
|
|
|
|
|
|
|
|
#### 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>
|
|
This is a success callout-box.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="aa-callout aa-callout-info">
|
|
<p>
|
|
This is an info callout-box.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="aa-callout aa-callout-warning">
|
|
<p>
|
|
This is a warning callout-box.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="aa-callout aa-callout-danger">
|
|
<p>
|
|
This is a danger callout-box.
|
|
</p>
|
|
</div>
|
|
```
|
|
|
|
|
|
|
|
#### 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>
|
|
```
|
|
|
|
|