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
allianceauth/docs/development/custom/framework/css.md
Peter Pfeufer f55008559e
[CHANGE] Wrapping table in {eval-rst}
2023-12-17 23:59:15 +01:00

6.3 KiB
Raw Blame History

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-arrow-shaped cursor                                  | ![Cursor: Move](/_static/images/development/aa-framework/css/cursor-move.png "Cursor: Move")                                                     |
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
| `cursor-help`        | Cursor with a little question mark                     | ![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                                        | ![Cursor: Zoom Out](/_static/images/development/aa-framework/css/cursor-zoom-out "Cursor: Zoom Out")                                             |
+----------------------+--------------------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+

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

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>