Resources

Getting started

Starting use

        <!--- Import in your websites--->
        <!--- Resources CSS --->
        <link rel="stylesheet" href="https://res.lortetcesar.fr/style.min.css">
        <!--- Resources JS --->
        <script src="https://res.lortetcesar.fr/script.min.js"></script>

Template

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="http://res.lortetcesar.fr/style.min.css">
    <title>Getting started - Resources</title>
</head>

<body class="bg-1 layout-sidebar">
    <div class="sidebar__sidebar bg-3">
        <h3 class="sidebar-logo m-5"> Mon wonderfull website</h3>
        <div>
            <a class="bg-2 border b-black m-2" href="#">Link 1</a>
            <a class="bg-2 border b-black m-2" href="#">Link 2</a>
            <a class="bg-2 border b-black m-2" href="#">Link 3</a>
        </div>
    </div>
    <main class="content sidebar__main layout__spa v-center">
        <div class="centering">
            Your content here
        </div>
    </main>
</body>
</html>
<script src="http://res.lortetcesar.fr/script.min.js"></script>

Show demo

Themes

Theme vars

        /* my-theme.css */
        .my-wonderfull-theme {
            --color-background-strong: #1B2036;
            --color-background-medium: #232946;
            --color-background-small: #37406D;

            --color-border: #b8c1ec;

            --color-title-strong: #b8c1ec;
            --color-title-medium: #fffffe;
            --color-title-small: #eebbc3;

            --color-alert-error: #e53170;
            --color-alert-success: #2cb67d;
            --color-alert-warning: #ff8906;

            --color-button-background: #eebbc3;
            --color-button-background-alt: #b8c1ec;
            --color-button-text: #232946;

            --color-link: #b8c1ec;
            --color-link-hover: #232946;
            --color-link-visited: #fffffe;
            --color-link-active: #232946;

            --color-font: #fffffe;
            --color-font-light: #fff;
            --color-font-dark: #000;

            --color-shadow: rgba(255, 255, 255, 0.2);
    }

Change theme

Switch between light and dark mode

         <button class="btn btn-validation" onclick="toggleTheme()">Change theme</button>

Set custom theme

        //Javascript
        setTheme("my-wonderfull-theme")

Exemple

Layouts

Wrapper

Basic wrapper

box 1

box 2

box 3

box 4

box 5

        <div class="wrapper xs4">
                    <div>box 1</div>
                    <div>box 2</div>
                    <div>box 3</div>
                    <div>box 4</div>
                    <div>box 5</div>
                </div>

Responsive

box 1

box 2

box 3

box 4

box 5

        <div class="wrapper xs2 md3 lg4">
                    <div>box 1</div>
                    <div>box 2</div>
                    <div>box 3</div>
                    <div>box 4</div>
                    <div>box 5</div>
                </div>

Split screen

      <div class="split-screen">
            <div class="split-screen__half">Half</div>
            <div class="split-screen__half">Half</div>
        </div>

Half

Sidebar

        <div class="sidebar">
            <aside class="sidebar__sidebar">Sidebar</aside>
            <main class="sidebar__main">Content</main>
        </div>

Sticky footer

        <div class="sticky-footer">
            <header class="sticky-footer__header">...</header>
            <main class="sticky-footer__main">...</main>
            <footer class="sticky-footer__footer">...</footer>
        </div>

You may use .sticky-header__header class

General

Colors

Background colors

blue dark-5

blue dark-4

blue dark-3

blue dark-2

blue dark-1

blue

blue light-1

blue light-2

blue light-3

blue light-4

red dark-5

red dark-4

red dark-3

red dark-2

red dark-1

red

red light-1

red light-2

red light-3

red light-4

green dark-5

green dark-4

green dark-3

green dark-2

green dark-1

green

green light-1

green light-2

green light-3

green light-4

lapis dark-5

lapis dark-4

lapis dark-3

lapis dark-2

lapis dark-1

lapis

lapis light-1

lapis light-2

lapis light-3

lapis light-4

ruby dark-5

ruby dark-4

ruby dark-3

ruby dark-2

ruby dark-1

ruby

ruby light-1

ruby light-2

ruby light-3

ruby light-4

jade dark-5

jade dark-4

jade dark-3

jade dark-2

jade dark-1

jade

jade light-1

jade light-2

jade light-3

jade light-4

sapphire dark-5

sapphire dark-4

sapphire dark-3

sapphire dark-2

sapphire dark-1

sapphire

sapphire light-1

sapphire light-2

sapphire light-3

sapphire light-4

perl dark-5

perl dark-4

perl dark-3

perl dark-2

perl dark-1

perl

perl light-1

perl light-2

perl light-3

perl light-4

emerald dark-5

emerald dark-4

emerald dark-3

emerald dark-2

emerald dark-1

emerald

emerald light-1

emerald light-2

emerald light-3

emerald light-4

amber dark-5

amber dark-4

amber dark-3

amber dark-2

amber dark-1

amber

amber light-1

amber light-2

amber light-3

amber light-4

clay dark-5

clay dark-4

clay dark-3

clay dark-2

clay dark-1

clay

clay light-1

clay light-2

clay light-3

clay light-4

grey dark-5

grey dark-4

grey dark-3

grey dark-2

grey dark-1

grey

grey light-1

grey light-2

grey light-3

grey light-4

topaze dark-5

topaze dark-4

topaze dark-3

topaze dark-2

topaze dark-1

topaze

topaze light-1

topaze light-2

topaze light-3

topaze light-4

error

warning

success

primary

secondary

black

white

transparent

Text colors

txt-blue txt-dark-5

txt-blue txt-dark-4

txt-blue txt-dark-3

txt-blue txt-dark-2

txt-blue txt-dark-1

txt-blue

txt-blue txt-light-1

txt-blue txt-light-2

txt-blue txt-light-3

txt-blue txt-light-4

txt-red txt-dark-5

txt-red txt-dark-4

txt-red txt-dark-3

txt-red txt-dark-2

txt-red txt-dark-1

txt-red

txt-red txt-light-1

txt-red txt-light-2

txt-red txt-light-3

txt-red txt-light-4

txt-green txt-dark-5

txt-green txt-dark-4

txt-green txt-dark-3

txt-green txt-dark-2

txt-green txt-dark-1

txt-green

txt-green txt-light-1

txt-green txt-light-2

txt-green txt-light-3

txt-green txt-light-4

txt-lapis txt-dark-5

txt-lapis txt-dark-4

txt-lapis txt-dark-3

txt-lapis txt-dark-2

txt-lapis txt-dark-1

txt-lapis

txt-lapis txt-light-1

txt-lapis txt-light-2

txt-lapis txt-light-3

txt-lapis txt-light-4

txt-ruby txt-dark-5

txt-ruby txt-dark-4

txt-ruby txt-dark-3

txt-ruby txt-dark-2

txt-ruby txt-dark-1

txt-ruby

txt-ruby txt-light-1

txt-ruby txt-light-2

txt-ruby txt-light-3

txt-ruby txt-light-4

txt-jade txt-dark-5

txt-jade txt-dark-4

txt-jade txt-dark-3

txt-jade txt-dark-2

txt-jade txt-dark-1

txt-jade

txt-jade txt-light-1

txt-jade txt-light-2

txt-jade txt-light-3

txt-jade txt-light-4

txt-sapphire dark-5

txt-sapphire dark-4

txt-sapphire dark-3

txt-sapphire dark-2

txt-sapphire dark-1

txt-sapphire

txt-sapphire light-1

txt-sapphire light-2

txt-sapphire light-3

txt-sapphire light-4

txt-perl txt-dark-5

txt-perl txt-dark-4

txt-perl txt-dark-3

txt-perl txt-dark-2

txt-perl txt-dark-1

txt-perl

txt-perl txt-light-1

txt-perl txt-light-2

txt-perl txt-light-3

txt-perl txt-light-4

txt-emerald txt-dark-5

txt-emerald txt-dark-4

txt-emerald txt-dark-3

txt-emerald txt-dark-2

txt-emerald txt-dark-1

txt-emerald

txt-emerald txt-light-1

txt-emerald txt-light-2

txt-emerald txt-light-3

txt-emerald txt-light-4

txt-amber txt-dark-5

txt-amber txt-dark-4

txt-amber txt-dark-3

txt-amber txt-dark-2

txt-amber txt-dark-1

txt-amber

txt-amber txt-light-1

txt-amber txt-light-2

txt-amber txt-light-3

txt-amber txt-light-4

txt-clay txt-dark-5

txt-clay txt-dark-4

txt-clay txt-dark-3

txt-clay txt-dark-2

txt-clay txt-dark-1

txt-clay

txt-clay txt-light-1

txt-clay txt-light-2

txt-clay txt-light-3

txt-clay txt-light-4

txt-grey txt-dark-5

txt-grey txt-dark-4

txt-grey txt-dark-3

txt-grey txt-dark-2

txt-grey txt-dark-1

txt-grey

txt-grey txt-light-1

txt-grey txt-light-2

txt-grey txt-light-3

txt-grey txt-light-4

txt-topaze txt-dark-5

txt-topaze txt-dark-4

txt-topaze txt-dark-3

txt-topaze txt-dark-2

txt-topaze txt-dark-1

txt-topaze

txt-topaze txt-light-1

txt-topaze txt-light-2

txt-topaze txt-light-3

txt-topaze txt-light-4

txt-error

txt-warning

txt-success

txt-primary

txt-secondary

txt-black

Icons

        <img src="https://res.lortetcesar.fr/images/icons/56x.ico" alt="256x256">

Global Smart Rescue

256x256

56x.ico

128x128

28x.ico

64x64

4x.ico

Satkey

256x256

satkey256x.ico

128x128

satkey128x.ico

64x64

satkey64x.ico

Global Smart Solutions

256x256

gss256x.ico

128x128

gss128x.ico

64x64

gss64x.ico

Forms

Simple inputs

        <input type="text" class="form-input">

        <input type="text" class="form-input-extend" placeholder="Extending input">

        <div>
            <input class="form-check" type="checkbox" id="test1" />
            <label for="test1" aria-describedby="label">Red</label>
        </div>

        <label class="radio-label">
            <input class="form-radio" type="radio" name="radio" />
            Apple
        </label>

Red

Green

Blue

White

Apple Pear Grape Peach

Select

        <select name="my-select" id="my-select" class="form-select">
                <option value="1">My option</option>
                <option value="2">Another option</option>
                <option value="3">Last option</option>
            </select>
        </section>

Text Area

        <textarea class="form-input" name="txtarea" id="txtarea" cols="30" rows="10">My wonderfull textarea who permit me to tell some stories</textarea>

Advanced inputs

        <div class="wrapper xs2">
            <input class="form-input rounded-3 morph-pressed" type="text">
            <input class="form-input-extend rounded-3 morph-pressed" type="text">
        </div>
        <select name="my-select" id="my-select" class="form-select rounded-3 morph-pressed">
            <option value="1">My option</option>
            <option value="2">Another option</option>
            <option value="3">Last option</option>
        </select>
        <textarea class="form-input rounded-3 morph-pressed" name="txtarea" id="txtarea" cols="30" rows="10"></textarea>

Components

Alerts

Basic Alerts

        <div class="p-3 my-2 rounded-1 blue light-4 txt-blue txt-dark-3">This is an informative alert</div>
        <div class="p-3 my-2 rounded-1 green light-4 txt-green txt-dark-4">This is a success alert</div>
        <div class="p-3 my-2 rounded-1 amber light-4 txt-amber txt-dark-4">This is a warning alert</div>
        <div class="p-3 my-2 rounded-1 red light-4 txt-red txt-dark-4">This is an error alert</div>

This is an informative alert

This is a success alert

This is a warning alert

This is an error alert

Bordered alerts

        <div class="p-3 my-2 rounded-1 blue light-4 txt-blue txt-dark-3 bd-solid bd-blue bd-light-1 bd-1">This is an informative alert</div>
        <div class="p-3 my-2 rounded-1 green light-4 txt-green txt-dark-4 border b-green b-dark-1 b-1">This is a success alert</div>
        <div class="p-3 my-2 rounded-1 amber light-4 txt-amber txt-dark-4 border b-amber b-dark-1 b-1">This is a warning alert</div>
        <div class="p-3 my-2 rounded-1 red light-4 txt-red txt-dark-4 border b-red b-1">This is an error alert</div>

This is an informative alert

This is a success alert

This is a warning alert

This is an error alert

Block code

        <pre class="rounded-2 bg-2"><code class="language-c"> // Your code here </code></pre>

        #include 
        int main() {
            // This is a code in C
            printf("Hello, World!");
            return 0;
        }

Supported languages

Markup

"language-markup"

"language-html"

"language-xml"

"language-svg"

"language-mathml"

"language-ssml"

"language-atom"

"language-rss"

CSS

"language-css"

C-Like

"language-clike"

JavaScript

"language-javascript"

"language-js"

Bash

"language-bash"

"language-sh"

"language-shell"

"language-c"

C++

"language-cpp"

Python

"language-python"

"language-py"

YAML

"language-yaml"

"language-yml"

Buttons

Button group

Simple button group

        <div class="btn-group rounded-1">
            <button class="btn dark-2">Button</button>
            <button class="btn dark-2">Button</button>
            <button class="btn dark-2">Button</button>
        </div>

Stylised button group

        <div class="btn-group">
            <button class="btn blue">Button</button>
            <button class="btn white dark-2">Button</button>
            <button class="btn error">Button</button>
        </div>

Normal buttons

        <button class="btn rounded-1 blue">Click me !</button>
        <button class="btn rounded-1 underline u-white red">Click me !</button>
        <button class="btn rounded-1 border b-emerald b-dark-2 sapphire">Click me !</button>

Circle buttons

        <button class="btn btn-circle success border b-grey txt-green txt-dark-5">OK</button>
        <button class="btn btn-circle error">X</button>
        <button class="btn btn-circle ruby">X</button>
        <button class="btn btn-circle red">X</button>

Validation buttons

        <button class="btn btn-validation rounded-1 grey">Click me !</button>
        <button class="btn btn-validation rounded-3 clay txt-jade txt-light-3">Click me !</button>
        <button class="btn btn-validation amber">Click me !</button>
        <button class="btn btn-validation rounded-full red">Click me !</button>

Active class

        <button class="btn rounded-1 blue">Click me !</button>
        <button class="btn active rounded-1 blue">Click me !</button>

Disabled class

        <button class="btn rounded-1 blue">Click me !</button>
        <button class="btn disabled rounded-1 blue">Click me !</button>

Cards

        <div class="card white rounded-2 shadow-1 hoverable-1 mx-auto" style="max-width: 400px;">
            <div class="card-img">
                <img src="https://picsum.photos/500/300" class="responsive-media" alt="https://picsum.photos/500/300">
            </div>

            <div class="card-content">
                <span class="h3">Card example</span>
                <div class="font-s3 txt-grey">Hoverable and shadow</div>
                <div class="mt-3">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                    Nihil aliquid neque harum iusto quas, impedit est! 
                    Nobis quibusdam repellendus harum sequi optio exercitationem debitis, tenetur error id distinctio eos doloremque!
                </div>
            </div>

            <div class="card-footer flex mt-1">
                <div class="font-s5 ml-auto my-auto mr-3">Hover me</div>
                <button class="btn clay light-1 rounded-1">OK</button>
            </div>
        </div>

Card example

Hoverable and shadow

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil aliquid neque harum iusto quas, impedit est! Nobis quibusdam repellendus harum sequi optio exercitationem debitis, tenetur error id distinctio eos doloremque!

Hover me

Breadcrumb

      <div class="breadcrumb blue p-2">
            <!-- Breadcrumb item -->
            <div class="breadcrumb__item"><a href="#">Link</a></div>
            <div class="breadcrumb__item"><a href="#">Link</a></div>
            <div class="breadcrumb__item">Active link</div>
        </div>

Collapsible

        <button class="btn btn-validation ruby rounded-1 collapsible">Collapsible trigger</button>
        <div class="collapsible-content">
            <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Nemo necessitatibus, recusandae deleniti perferendis tempora, eligendi expedita rerum nostrum nesciunt, 
            quis earum sapiente pariatur et eaque voluptatem vel quos voluptate odit.
            </p>
        </div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo necessitatibus, recusandae deleniti perferendis tempora, eligendi expedita rerum nostrum nesciunt, quis earum sapiente pariatur et eaque voluptatem vel quos voluptate odit.

tree-diagram

      <div class="tree-diagram">
            <ul>
                <li class="tree-diagram__root">root
                    <ul>
                        <li>class</li>
                        <li>
                        <!-- Content -->
                        class
                        <!-- Sub items -->
                            <ul>
                                <li>
                                    <!-- Content -->
                                    sub-class
                                    <ul>
                                        <li>sub-sub-class</li>
                                    </ul>
                                </li>
                                <li>sub-class</li>
                            </ul>
                        </li>
                    </li>
                </ul>
            </ul>
        </div>

root
- class
  - sub-class
    - sub-sub-class
    - sub-sub-class
  - sub-class
- class
  - sub-class
    - sub-sub-class
  - sub-class
    - sub-sub-class
    - sub-sub-class

Folder structure

Structure

      <div class="folder-structure">
            <ul>
                <li>
                    <!-- Content -->
                    <span>folder</span>
                    <!-- Sub items -->
                    <ul>
                        <li>
                            <!-- Content -->
                            <span>sub-folder</span>

                            <!-- Sub items -->
                            <ul>
                                <li><span class="prefix-file">sub-sub-file with icon</span></li>
                                <li><span class="prefix-folder-open">sub-sub-folder open</span></li>
                            </ul>
                        </li>
                        <li><span class="prefix-folder">sub-folder with icon</span></li>
                    </ul>
                </li>
            </ul>
        </div>

folder
- sub-folder
  - sub-sub-file with icon
  - sub-sub-folder open
- sub-folder with icon

Prefixes

.prefix-file

.prefix-multi-file

.prefix-folder

.prefix-folder-open

.prefix-package

.prefix-message

.prefix-book

.prefix-book-red

.prefix-book-green

.prefix-book-blue

.prefix-book-orange

.prefix-book-open

.prefix-log

.prefix-calendar

.prefix-chart

.prefix-chart-line

.prefix-board

.prefix-tag

Table

    <div class="table-responsive">        
        <table class="table">
            <thead>
                <th>common</th>
                <th>fastened</th>
                <th>thin</th>
                <th>spider</th>
                <th>ear</th>
            </thead>
            <tbody>
                <tr>
                    <td>brass</td>
                    <td>pie</td>
                    <td>managed</td>
                    <td>chart</td>
                    <td>century</td>
                </tr>
                <tr>
                    <td>successful</td>
                    <td>no</td>
                    <td>test</td>
                    <td>usual</td>
                    <td>action</td>
                </tr>
            </tbody>
        </table>
     </div>

common	fastened	thin	spider	ear
brass	pie	managed	chart	century
successful	no	test	usual	action
brass	pie	managed	chart	century
successful	no	test	usual	action
brass	pie	managed	chart	century
successful	no	test	usual	action
brass	pie	managed	chart	century
successful	no	test	usual	action

Notification

This is a notification

Decorations

Texts

bold

italic

italic-1

italic-2

italic-3

italic-4

underline

overline

over-underline

through

uppercase

lowercase

capitalize

Round

rounded-1

rounded-2

rounded-3

rounded-4

rounded-5

rounded-full

Hoverable

hoverable-1

hoverable-2

hoverable-3

hoverable-4

hoverable-5

Shadows

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Text Shadows

txt-shadow-0

txt-shadow-1

txt-shadow-2

txt-shadow-3

txt-shadow-4

Neumorphic

Default Morph

Top Left Morph

Top Right Morph

Bottom Right Morph

Default Morph

Borders

Simple border

border

Borders colors

border b-blue b-dark-5

border b-blue b-dark-4

border b-blue b-dark-3

border b-blue b-dark-2

border b-blue b-dark-1

border b-blue

border b-blue b-light-1

border b-blue b-light-2

border b-blue b-light-3

border b-blue b-light-4

border b-red b-dark-5

border b-red b-dark-4

border b-red b-dark-3

border b-red b-dark-2

border b-red b-dark-1

border b-red

border b-red b-light-1

border b-red b-light-2

border b-red b-light-3

border b-red b-light-4

border b-green b-dark-5

border b-green b-dark-4

border b-green b-dark-3

border b-green b-dark-2

border b-green b-dark-1

border b-green

border b-green b-light-1

border b-green b-light-2

border b-green b-light-3

border b-green b-light-4

border b-lapis b-dark-5

border b-lapis b-dark-4

border b-lapis b-dark-3

border b-lapis b-dark-2

border b-lapis b-dark-1

border b-lapis

border b-lapis b-light-1

border b-lapis b-light-2

border b-lapis b-light-3

border b-lapis b-light-4

border b-ruby b-dark-5

border b-ruby b-dark-4

border b-ruby b-dark-3

border b-ruby b-dark-2

border b-ruby b-dark-1

border b-ruby

border b-ruby b-light-1

border b-ruby b-light-2

border b-ruby b-light-3

border b-ruby b-light-4

border b-jade b-dark-5

border b-jade b-dark-4

border b-jade b-dark-3

border b-jade b-dark-2

border b-jade b-dark-1

border b-jade

border b-jade b-light-1

border b-jade b-light-2

border b-jade b-light-3

border b-jade b-light-4

border b-sapphire b-dark-5

border b-sapphire b-dark-4

border b-sapphire b-dark-3

border b-sapphire b-dark-2

border b-sapphire b-dark-1

border b-sapphire

border b-sapphire b-light-1

border b-sapphire b-light-2

border b-sapphire b-light-3

border b-sapphire b-light-4

border b-perl b-dark-5

border b-perl b-dark-4

border b-perl b-dark-3

border b-perl b-dark-2

border b-perl b-dark-1

border b-perl

border b-perl b-light-1

border b-perl b-light-2

border b-perl b-light-3

border b-perl b-light-4

border b-emerald b-dark-5

border b-emerald b-dark-4

border b-emerald b-dark-3

border b-emerald b-dark-2

border b-emerald b-dark-1

border b-emerald

border b-emerald b-light-1

border b-emerald b-light-2

border b-emerald b-light-3

border b-emerald b-light-4

border b-amber b-dark-5

border b-amber b-dark-4

border b-amber b-dark-3

border b-amber b-dark-2

border b-amber b-dark-1

border b-amber

border b-amber b-light-1

border b-amber b-light-2

border b-amber b-light-3

border b-amber b-light-4

border b-clay b-dark-5

border b-clay b-dark-4

border b-clay b-dark-3

border b-clay b-dark-2

border b-clay b-dark-1

border b-clay

border b-clay b-light-1

border b-clay b-light-2

border b-clay b-light-3

border b-clay b-light-4

border b-grey b-dark-5

border b-grey b-dark-4

border b-grey b-dark-3

border b-grey b-dark-2

border b-grey b-dark-1

border b-grey

border b-grey b-light-1

border b-grey b-light-2

border b-grey b-light-3

border b-grey b-light-4

border b-topaze b-dark-5

border b-topaze b-dark-4

border b-topaze b-dark-3

border b-topaze b-dark-2

border b-topaze b-dark-1

border b-topaze

border b-topaze b-light-1

border b-topaze b-light-2

border b-topaze b-light-3

border b-topaze b-light-4

border b-error

border b-warning

border b-success

border b-primary

border b-secondary

border

border b-white

Underlines

Underlines colors

Works with overline, over-underline and through

underline u-blue u-dark-5

underline u-blue u-dark-4

underline u-blue u-dark-3

underline u-blue u-dark-2

underline u-blue u-dark-1

underline u-blue

underline u-blue u-light-1

underline u-blue u-light-2

underline u-blue u-light-3

underline u-blue u-light-4

underline u-red u-dark-5

underline u-red u-dark-4

underline u-red u-dark-3

underline u-red u-dark-2

underline u-red u-dark-1

underline u-red

underline u-red u-light-1

underline u-red u-light-2

underline u-red u-light-3

underline u-red u-light-4

underline u-green u-dark-5

underline u-green u-dark-4

underline u-green u-dark-3

underline u-green u-dark-2

underline u-green u-dark-1

underline u-green

underline u-green u-light-1

underline u-green u-light-2

underline u-green u-light-3

underline u-green u-light-4

underline u-lapis u-dark-5

underline u-lapis u-dark-4

underline u-lapis u-dark-3

underline u-lapis u-dark-2

underline u-lapis u-dark-1

underline u-lapis

underline u-lapis u-light-1

underline u-lapis u-light-2

underline u-lapis u-light-3

underline u-lapis u-light-4

underline u-ruby u-dark-5

underline u-ruby u-dark-4

underline u-ruby u-dark-3

underline u-ruby u-dark-2

underline u-ruby u-dark-1

underline u-ruby

underline u-ruby u-light-1

underline u-ruby u-light-2

underline u-ruby u-light-3

underline u-ruby u-light-4

underline u-jade u-dark-5

underline u-jade u-dark-4

underline u-jade u-dark-3

underline u-jade u-dark-2

underline u-jade u-dark-1

underline u-jade

underline u-jade u-light-1

underline u-jade u-light-2

underline u-jade u-light-3

underline u-jade u-light-4

underline u-sapphire u-dark-5

underline u-sapphire u-dark-4

underline u-sapphire u-dark-3

underline u-sapphire u-dark-2

underline u-sapphire u-dark-1

underline u-sapphire

underline u-sapphire u-light-1

underline u-sapphire u-light-2

underline u-sapphire u-light-3

underline u-sapphire u-light-4

underline u-perl u-dark-5

underline u-perl u-dark-4

underline u-perl u-dark-3

underline u-perl u-dark-2

underline u-perl u-dark-1

underline u-perl

underline u-perl u-light-1

underline u-perl u-light-2

underline u-perl u-light-3

underline u-perl u-light-4

underline u-emerald u-dark-5

underline u-emerald u-dark-4

underline u-emerald u-dark-3

underline u-emerald u-dark-2

underline u-emerald u-dark-1

underline u-emerald

underline u-emerald u-light-1

underline u-emerald u-light-2

underline u-emerald u-light-3

underline u-emerald u-light-4

underline u-amber u-dark-5

underline u-amber u-dark-4

underline u-amber u-dark-3

underline u-amber u-dark-2

underline u-amber u-dark-1

underline u-amber

underline u-amber u-light-1

underline u-amber u-light-2

underline u-amber u-light-3

underline u-amber u-light-4

underline u-clay u-dark-5

underline u-clay u-dark-4

underline u-clay u-dark-3

underline u-clay u-dark-2

underline u-clay u-dark-1

underline u-clay

underline u-clay u-light-1

underline u-clay u-light-2

underline u-clay u-light-3

underline u-clay u-light-4

underline u-grey u-dark-5

underline u-grey u-dark-4

underline u-grey u-dark-3

underline u-grey u-dark-2

underline u-grey u-dark-1

underline u-grey

underline u-grey u-light-1

underline u-grey u-light-2

underline u-grey u-light-3

underline u-grey u-light-4

underline u-topaze u-dark-5

underline u-topaze u-dark-4

underline u-topaze u-dark-3

underline u-topaze u-dark-2

underline u-topaze u-dark-1

underline u-topaze

underline u-topaze u-light-1

underline u-topaze u-light-2

underline u-topaze u-light-3

underline u-topaze u-light-4

underline u-error

underline u-warning

underline u-success

underline u-primary

underline u-secondary

border

underline u-white

Cursors

cursor-default

cursor-none

cursor-help

cursor-pointer

cursor-progress

cursor-wait

cursor-text

cursor-grab

cursor-not-allowed

cursor-zoom-in

cursor-zoom-out