Mathis/allianceauth
1
0
Fork 0
mirror of https://gitlab.com/allianceauth/allianceauth.git synced 2025-12-19 23:35:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

[ADD] CSS cursor classes docs

Browse Source
This commit is contained in:
Peter Pfeufer
2023-11-12 11:16:44 +01:00
parent d2edd288f9
commit cbb5c80b94
14 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/development/custom/framework/css.md Normal file
View File

@@ -0,0 +1,60 @@
# 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.
## Cursor
Our CSS framework provides different classes to manipulate the cursor, which are
missing in Bootstrap.
| CSS Class | Effect | Example |
|----------------------|--------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|
| `cursor-default` | System default curser | ![Cursor: Default](/_static/images/development/aa-framework/css/cursor-default.png "Cursor: Default") |
| `cursor-pointer` | Pointer, like it looks like for links and form buttons | ![Cursor: Pointer](/_static/images/development/aa-framework/css/cursor-pointer.png "Cursor: Pointer") |
| `cursor-wait` | Wait animation | ![Cursor: Wait](/_static/images/development/aa-framework/css/cursor-wait.png "Cursor: Wait") |
| `cursor-text` | Text selection cursor | ![Cursor: Text](/_static/images/development/aa-framework/css/cursor-text.png "Cursor: Text") |
| `cursor-move` | 4-arraow-shaped cursor | ![Cursor: Move](/_static/images/development/aa-framework/css/cursor-move.png "Cursor: Move") |
| `cursor-help` | Cursor with a little questionmark | ![Cursor: Help](/_static/images/development/aa-framework/css/cursor-help.png "Cursor: Help") |
| `cursor-not-allowed` | Not Allowed sign | ![Cursor: Not Allowed](/_static/images/development/aa-framework/css/cursor-not-allowed.png "Cursor: Not Allowed") |
| `cursor-inherit` | Inherited from its parent element | |
| `cursor-zoom-in` | Zoom in symbol | ![Cursor: Zoom In](/_static/images/development/aa-framework/css/cursor-zoom-in.png "Cursor: Zoom In") |
| `cursor-zoom-out` | Zoom out symbol | ![Alliance Auth Framework: Callout Boxes](/_static/images/development/aa-framework/css/cursor-zoom-out "Alliance Auth Framework: Callout Boxes") |
## 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".
![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 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>
```