Style Guide

With the mobile web app debtrack it is very easy to keep an overview of your debts. You can note what someone owes you and even split costs between various people. Send them a reminder directly from the app to receive your money as soon as possible. Billing with your friends after the next pizza order has never been so easy!

The debtrack styleguide is a resource for developers, designers and everyone else who continues working on the application to maintain consistency. It includes documentation on branding, design and code implementation.

Brand Guide

Brand name

debtrack is always written in small caps. If it is not possible to use the logo, write the brand name as explained.

Colors

The text color is always white on a dark gradient background. Simple icons are white too. The "hover" color is used for mouseover styles. For positive amounts of money the "sucess" color is used, for negative ones "danger" color. The "primary" color is in combination with a gradient for buttons. Some text is within boxes. These boxes have the "secondary" color as background color.

Primary	#8e2462
Secondary	#474747
Background	#2b2b2b
White	#ffffff
Hover	#ca1a81
Success	#14c3a2
Danger	#b61c62

Typography

Button text	Assistant - regular
Running text	Assistant - light
Labels & dropdown menu	Assistant - semibold
Amount of money	Heebo - light

Logo

Logo [download]
App Icon
Favicon

Methodology

Indentation

Four spaces equal one indent in every file type (also specified in .editorconfig).

Units

You should use percent (%) or rem to specify width.

You should use em or rem for text size, element heights, paddings and margins.

File Structure

dist: the automatically created output after compiling the application
src: all the files used to create the application
- images: images used by the application
  - logo.svg: the logo of the application
  - icon_add.svg: the icon for adding
  - ...
- sass: style files
  - components: the individual components of the application
    - _index.scss: the components entry point (here all components are referenced)
    - _button.scss: the button component
    - ...
  - style.scss: the main style file (entry point for the application stylesheet)
  - _reset.scss: a style partial that removes most of the default styles of the browsers
  - _global.scss a style partial that holds all global/application wide styles
  - _variables.scss a style partial in which the SASS variables are set
- pages: the pages of the application
- libs: supporting libraries written by us
node_modules: the installed packages
.browserlist a programmatic description which browsers should be supported
.editorconfig a programmatic description of how to "format" code (e.g. indentation)
.gitignore a programmatic description which file are automatically created and therefor should not be added to the repository
package.json: programmatic description of the project
package-lock.json additional information to the package.json
README.md: description of the project

Preprocessor

SASS

Important features: nesting, splitting, color manipulation, vendor prefixing

Conventions

All classes shall be written in small caps and dash separated.


.debt-list {}
.screen-reader {}

Classes should be assigned to root component elements so that these can be accessed through their class. The tag name and/or attributes may be used to identify the element if it is necessary for semantic or accessibility reasons. An exception are the default elements (which are provided by the browser, like button, input, ...). Those shall be accessed by their tag name and if needed their attributes (like type).

Every component shall be in its own separate file.

Within a component all nested elements shall be accessed via their semantic tag name, position within and state (e.g. pseudo-class, pseudo-element). If it is necessary an additional class can be used. Because of the nesting, each component file has only one selector block (with its dependencies within). Exception to this rule are again default elements and their direct neighbors (e.g. label for an input).

The selectors within a component need to be specific. They should clearly point to a nested element (use >), so the probability of interference is lower. To prevent accidental overrides and increase the specificity, always use the explicit path to a nested element.


/* component: Debt Card (small parts)*/
article.debt-card {
    color: white;

    & > section:nth-of-type(1) { /* position within */
        width: 100%;

        & > h2 { /* semantic tag & path */
            color: $white;
        }
        & > .amount { /* class if needed */
            font-size: 4rem;
        }
    }
}


/* component: Numeric (small parts) */
label {
    color: red;

    & + input[type="number"] {
        margin-top: -0.3rem;
    }
}
input[type="number"] {
    border: 0;

    &:hover, &:focus {
        background-color: darken($secondary, 10%);
    }

    & + span {
        color: $white;
    }
}

Accessibility

The font size is always set in em or rem, no other unit should be used. Never set a font size on the root element because otherwise the font size settings of the browser might be ignored.

An icon shall only be a stylistic element and therefor used as a background image or if necessary as an image with a meaningful alt attribute. If it is used as a background image the content of the element shall be the description with the font size of 0 and therefor invisible but accessible for a screen reader.


<!-- component: Icon Button -->
<button class="icon success" data-text="paid">
    paid
</button>

If a connection between elements is created through style an element with the class "screen-reader" shall be inserted so that the connection is clear by only listening to a screen reader. The "screen-reader" class makes the element practically invisible while being accessible for only programmatic readers like screen readers and search engines.


<!-- component: Debt Card (small part) -->
<a href="#">
    <span class="amount negative">
        <span class="screen-reader">
            minus
        </span>
        €17.50
    </span>
    <span>
        <span class="screen-reader">
            for 
        </span>
        Birthday Gift for Lena
    </span>
</a>

Components

Background


<body>

</body>


body {
    background-image: linear-gradient(70deg, #000000, $background, #000000);
}

The background of the app is always a dark gradient that's slightly tilted.

Links

Imprint


    <a href="#">
        Imprint
    </a>


    a {
        color: white;
        font-family: Assistant;
        font-size: 1.2rem;
    
        &:hover {
            color: primary;
        }
    }

This link is used to reference a page which is not associated with an action neither has a special styling. It's primarily used on the help page to link to the imprint.

Buttons

Default Button


<button class="btn">
    send a reminder
</button>


.btn {
    padding: 0.5em 0.5rem;
    border-radius: 0.28346rem;
    width: 100%;
    max-width: $maxWidth;

    background-image: linear-gradient(0.25turn, #825594, $primary);
    box-shadow: 0 0.47244rem 0.70866rem #0000001E;
    color: white;

    font-family: Assistant;
    font-size: 1.2rem;

    will-change: background-image, box-shadow;
    transition-property: background-image, box-shadow;
    transition-duration: 300ms;

    cursor: pointer;

    &:hover {
        background: linear-gradient(0.25turn, $primary, #825594);
        box-shadow: 0 0.94488rem 1.1811rem #0000001E;
    }
}

This button is used for normal actions like send, create, mark, etc. which are not associated with success or danger. It has a gradient and a slight shadow for more depth.

Floating Action Button


<button class="btn-fab">
    add
</button>


button.btn-fab {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-family: Assistant;
    font-size: 0;

    background-image: url(images/plus.svg), linear-gradient(0.25turn, #825594, $primary);
    background-size: 1.8rem 1.8rem, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    box-shadow: 0 0.47244rem 0.70866rem #0000001E;
    color: white;

    will-change: background-image, box-shadow;
    transition-property: background-image, box-shadow;
    transition-duration: 300ms;

    &:hover {
        background-image: url(images/plus.svg), linear-gradient(0.25turn, $primary, #825594);
        box-shadow: 0 0.94488rem 1.1811rem #0000001E;
    }
}

This round floating action button is positioned in the lower right corner of almost every screen. It should be shown independent of the scroll position and therefor be fixed. The button has a gradient and a slight shadow for more depth. In the center of the button is always the plus icon.

Icon Button


<button class="btn-icon success" data-text="paid">
    paid
</button>
<button class="btn-icon danger" data-text="delete">
    delete
</button>


button.btn-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-family: Assistant;
    font-weight: 300;
    font-size: 0;
    position: relative;

    background-color: $primary;
    background-image: url(images/plus.svg);
    background-size: 1.8rem 1.8rem;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0.47244rem 0.70866rem #0000001E;
    color: white;

    will-change: background-color, box-shadow;
    transition-property: background-color, box-shadow;
    transition-duration: 300ms;

    margin-bottom: 1.4rem;

    &::after {
        content: attr(data-text);
        font-size: 1rem;
        position: absolute;
        top: 100%;
        top: calc(100% + 0.2rem);
        left: 0;
        width: 100%;
        text-align: center;
    }

    &.success {
        background-color: $success;
        background-image: url(images/hacken.svg);

        &:hover {
            background-color: darken($success, 5%);
        }
    }
    &.danger {
        background-color: $danger;
        background-image: url(images/x.svg);

        &:hover {
            background-color: darken($danger, 5%);
        }
    }

    &:hover {
        box-shadow: 0 0.94488rem 1.1811rem #0000001E;
        background-color: darken($primary, 5%);
    }
}

These round icon buttons are used within a debt card to mark it as paid or delete it. The icons are supported by a textual description to provide the user with further informations on what the button does. The colors are our predefined sucess and danger colors. Both buttons each have a slight shadow for more depth.

Form elements

Text Field

subject


<label for="text_subject">
    subject
</label>
<input type="text" name="subject" id="text_subject" placeholder="Sushi Night">


label {
    color: $white;
    font-family: 'Assistant';
    font-weight: 600;
    font-size: 1.3rem;
    display: block;
    padding: 0.5rem 0.7rem;
    width: 100%;
    max-width: $maxWidth;

    & + input[type="text"] {
        margin-top: -0.3rem;
    }
}
input[type="text"] {
    background-color: $secondary;
    border: 0;
    font-family: 'Assistant';
    font-weight: 300;
    font-size: 1.5rem;
    padding: 0.7rem 1.5rem;
    color: $white;
    width: 100%;
    max-width: $maxWidth;
    border-radius: 0.28346rem;

    transition-property: background-color;
    transition-duration: 300ms;

    &:hover, &:focus {
        background-color: darken($secondary, 10%);
    }
    &::placeholder {
        color: darken($white, 30%);
    }
}

In this text field the user is able to enter text freely without any suggestions. In the app it is used when creating a new borrower's note.

Combo Field

name


<label for="text_name">
    name
</label>
<input list="list_text_name" type="text" name="name" id="text_name" placeholder="Sarah Smith">
<datalist id="list_text_name">
    <option value="Andrew Smith">
    <option value="Sophie">
</datalist>


input[type="text"][list] {
    &::-webkit-calendar-picker-indicator, &::-webkit-list-button {
        display: inline-block;
        color: $white;
        background-color: transparent;
        border-radius: 0.28346rem;

        &:hover {
            background-color: $secondary;
        }
    }
}

This combo field works like a regular combo box. The user can choose an existing data set (name) or create a new entry.

Addable Combo Field

name


<label for="text_name2">
    name
</label>
<div class="addable-combo">
    <input list="list_text_name2" type="text" name="name2" id="text_name2" placeholder="Sarah Smith">
    <button>
        add another one
    </button>
    <datalist id="list_text_name2">
        <option value="Andrew Smith">
        <option value="Sophie">
    </datalist>
</div>


label + .addable-combo {
    margin-top: -0.3rem;
}
.addable-combo {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    flex-wrap: nowrap;
    max-width: $maxWidth;

    & > input[type="text"] {
        margin-top: 0;
        flex-grow: 1;
        flex-shrink: 1;
        width: 100%;
        max-width: unset;
    }
    & > input[type="text"] + button {
        max-width: unset;
        font-size: 0;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-image: url(images/add.svg);
        background-color: rgba($white,0);
        flex-shrink: 0;
        flex-grow: 0;
        margin-left: 0.5rem;
        transition-property: background-color;
        transition-duration: 300ms;

        &:hover {
            background-color: rgba($white, 0.05);
        }
    }
    & > input[type="text"] + button + datalist {
        width: 0;
        height: 0;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

This form element combines the combo field with a button for adding another item. The user can first choose an existing data set (name) or create a new entry. Then more items (names) can be added via the button. This is used when creating a new borrower's note so the user can split the price between various people.

Numeric

amount €


<label for="number_amount">
    amount
</label>
<input type="number" placeholder="0.98" name="amount" id="number_amount">


label {
    color: $white;
    font-family: 'Assistant';
    font-weight: 600;
    font-size: 1.3rem;
    display: block;
    padding: 0.5rem 0.7rem;
    width: 100%;
    max-width: $maxWidth;

    & + input[type="number"] {
        margin-top: -0.3rem;
    }
}
input[type="number"] {
    background-color: $secondary;
    border: 0;
    font-family: 'Heebo';
    font-weight: 300;
    font-size: 1.5rem;
    padding: 0.7rem 1.5rem;
    color: $white;
    width: 100%;
    width: calc(100% - 2.5rem);
    max-width: $maxWidth;
    max-width: calc(#{$maxWidth} - 2.5rem);
    border-radius: 0.28346rem;

    transition-property: background-color;
    transition-duration: 300ms;

    -moz-appearance: textfield;
    appearance: none;

    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { 
        -webkit-appearance: none;
        margin: 0;
    }

    &:hover, &:focus {
        background-color: darken($secondary, 10%);
    }
    &::placeholder {
        color: darken($white, 30%);
    }

    & + span {
        display: inline-block;

        font-family: Heebo;
        font-weight: 300;
        font-size: 3rem;
        height: 4rem;
        line-height: 4rem;
        vertical-align: middle;

        color: $white;
        margin: -0.4rem 0 0 0.5rem;
    }
}

This numeric input field is used to add an euro amount to the borrower's note.

Checkbox

split bill with me


<div class="checkbox-item">
    <input type="checkbox" name="include_me" value="1" id="check_include_me">
    <label for="check_include_me">
        split bill with me
    </label>
</div>


.checkbox-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    max-width: $maxWidth;

    & > input[type="checkbox"] {
        appearance: none;
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        background-color: $secondary;
        border-radius: 0.28346rem;
        background-image: none;
        background-size: 1rem 1rem;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 0.5rem;
        font-family: 'Assistant';
        font-weight: 400;
        font-size: 1rem;
        flex-grow: 0;
        flex-shrink: 0;
        cursor: pointer;
    
        &:checked {
            background-image: url(images/x.svg);
        }
    
        & + label {
            width: auto;
            display: inline-block;
            font-family: 'Assistant';
            font-weight: 400;
            line-height: 1.5rem;
            font-size: 1.2rem;
            padding: 0;
            vertical-align: middle;
            flex-grow: 1;
            flex-shrink: 1;
            cursor: pointer;
        }
    }
}

This checkbox is used when the user has to give a boolean answer. In the app it is an option when creating a new borrower's note.

Checkbox Group

debts

Pizza
Cinema Popcorn and Snacks
Birthday Gift for Lena
Halloween Party Drinks and Snacks


<fieldset class="checkbox-group">
    <legend>
        debts
    </legend>
    <ul>
        <li class="checkbox-item">
            <input type="checkbox" name="debt[0]" value="1" id="check_debt[0]">
            <label for="check_debt[0]">
                Pizza
            </label>
        </li>
        <li class="checkbox-item">
            <input type="checkbox" name="debt[1]" value="1" id="check_debt[1]">
            <label for="check_debt[1]">
                Cinema Popcorn and Snacks
            </label>
        </li>
        <li class="checkbox-item">
            <input type="checkbox" name="debt[2]" value="1" id="check_debt[2]">
            <label for="check_debt[2]">
                Birthday Gift for Lena
            </label>
        </li>
        <li class="checkbox-item">
            <input type="checkbox" name="debt[3]" value="1" id="check_debt[3]">
            <label for="check_debt[3]">
                Halloween Party Drinks and Snacks
            </label>
        </li>
    </ul>
</fieldset>


fieldset.checkbox-group {
    width: 100%;
    max-width: $maxWidth;
    & > legend {
        background: none;
        color: $white;
        font-family: 'Assistant';
        font-weight: 600;
        font-size: 1.3rem;
        padding: 0.5rem 0.7rem;
        width: 100%;
        max-width: $maxWidth;
    }
    & > legend + ul {
        background-color: $secondary;
        padding: 1rem;
        border-radius: 0.28346rem;
        margin-top: -0.3rem;

        & > li.checkbox-item {
            & > input[type="checkbox"] {
                background-color: $background;
            }

            &:not(:nth-last-of-type(1)) {
                margin-bottom: 0.5rem;
            }
        }
    }
}

This checkbox group is used for multiple boolean answers. In the app the user can choose from this type of checkbox group when sending a pay reminder to a friend. Therefor multiple borrower's notes can be selected to be part of the reminder.

Lists

Circle with initial letter


<span class="circle-letter">
    T
</span>


.circle-letter {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background-color: $background;
    border-radius: 50%;
    line-height: 3rem;
    text-align: center;
    color: $white;
    font-family: 'Assistant';
    font-size: 1.2rem;
}

This initial letter in a circle is used as a graphical alternative for a portrait image. It shows the initial of the first name of people in the app.

Person List


<ul class="person-list">
    <li>
        <a href="#">
            <span class="circle-letter" aria-hidden="true">
                A
            </span>
            <strong>
                Andrew Smith
            </strong>
            <span class="amount positive">
                <span class="screen-reader">
                    plus
                </span>
                30.00€
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="circle-letter" aria-hidden="true">
                S
            </span>
            <strong>
                Sophie
            </strong>
            <span class="amount negative">
                <span class="screen-reader">
                    minus
                </span>
                7.00€
            </span>
        </a>
    </li>
</ul>


ul.person-list {
    list-style:none;
    max-width: $maxWidth;

    & > li {
        background-color: $secondary;
        border-radius: 0.28346rem;
        margin-bottom: 0.5rem;

        &:nth-last-of-type(1) {
            margin-bottom: 0;
        }

        &:hover {
            box-shadow: 0.2rem 0.2rem 0.5rem rgba(255,255,255,0.1);
        }

        & > a {
            display: block;
            color: $white;
            padding: 0.5rem;
            position: relative;
            text-decoration: none;

            & > strong, & > .amount {
                font-size: 1.6rem;
            }
    
            & > strong {
                margin-left: 0.5rem;
                margin-right: 0.5rem;
                text-overflow: ellipsis;
                font-family: 'Assistant';
                font-weight: 300;
            }
    
            & > .amount {
                font-family: 'Heebo';
                font-weight: 300;
                position: absolute;
                right: 0.5rem;
                top: 50%;
                transform: translate(0, -50%);
    
                &.positive {
                    color: $success;
                    text-shadow: 0 0 1px darken($success, 20%);
                }
                &.negative {
                    color: $danger;
                    text-shadow: 0 0 1px darken($danger, 20%);
                }
            }
        }
    }
}

This list is used for listing all people with their names and sum of debts.

Debt List


<ul class="debt-list">
    <li>
        <a href="#">
            <span class="amount positive">
                <span class="screen-reader">
                    plus
                </span>
                €10.00
            </span>
            <span>
                <span class="screen-reader">
                    for 
                </span>
                Pizza
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="amount positive">
                <span class="screen-reader">
                    plus
                </span>
                €25.00
            </span>
            <span>
                <span class="screen-reader">
                    for 
                </span>
                Cinema Popcorn and Snacks
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="amount negative">
                <span class="screen-reader">
                    minus
                </span>
                €17.50
            </span>
            <span>
                <span class="screen-reader">
                    for 
                </span>
                Birthday Gift for Lena
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="amount positive">
                <span class="screen-reader">
                    plus
                </span>
                €12.50
            </span>
            <span>
                <span class="screen-reader">
                    for 
                </span>
                Halloween Party Drinks and Snacks
            </span>
        </a>
    </li>
</ul>


ul.debt-list {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    flex-wrap: wrap;

    & > li {
        flex: 1 1 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
        display: block;
        background-color: $secondary;
        border-radius: 0.28346rem;
        & > a {
            padding: 1rem;
            font-family: 'Assistant';
            font-weight: 300;
            font-size: 1.3rem;
            color: $white;
            text-decoration: none;
            display: block;

            & > .amount {
                display: block;
    
                font-family: 'Heebo';
                font-weight: 300;
                font-size: 2rem;
    
                line-height: 1;
                
                &.positive {
                    color: $success;
                    text-shadow: 0 0 1px darken($success, 20%);
                }
                &.negative {
                    color: $danger;
                    text-shadow: 0 0 1px darken($danger, 20%);
                }
            }
    
            & > span {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                max-width: 100%;
                text-overflow: ellipsis;
            }
        }

        &:hover {
            box-shadow: 0.2rem 0.2rem 0.5rem rgba(255,255,255,0.1);
        }

        &:nth-of-type(2n) {
            margin-left: 1rem;
        }
        &:not(:nth-last-of-type(1)):not(:nth-last-of-type(2)) {
            margin-bottom: 1rem;
        }
    }
}

This debt overview lists all debts of one person. It consists of the amount and a description.

List Expander


<dl class="list-expander" role="presentation">
    <dt role="heading" aria-level="3" data-expanded="false">
        <button aria-expanded="false" aria-controls="already-paid-list" id="btn-already-paid">
            already paid
        </button>
    </dt>
    <dd id="list-already-paid" aria-labelledby="btn-already-paid" role="region">
        <ul class="debt-list">
            <li>
                <a href="#">
                    <span class="amount positive">
                        <span class="screen-reader">
                            plus
                        </span>
                        €10.00
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Pizza
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="amount positive">
                        <span class="screen-reader">
                            plus
                        </span>
                        €25.00
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Cinema Popcorn and Snacks
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="amount negative">
                        <span class="screen-reader">
                            minus
                        </span>
                        €17.50
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Birthday Gift for Lena
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="amount positive">
                        <span class="screen-reader">
                            plus
                        </span>
                        €12.50
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Halloween Party Drinks and Snacks
                    </span>
                </a>
            </li>
        </ul>
    </dd>
</dl>
<dl class="list-expander" role="presentation">
    <dt role="heading" aria-level="3" data-expanded="true">
        <button aria-expanded="true" aria-controls="already-paid-list2" id="btn-already-paid2">
            already paid
        </button>
    </dt>
    <dd id="list-already-paid2" aria-labelledby="btn-already-paid2" role="region">
        <ul class="debt-list">
            <li>
                <a href="#">
                    <span class="amount positive">
                        <span class="screen-reader">
                            plus
                        </span>
                        €10.00
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Pizza
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="amount positive">
                        <span class="screen-reader">
                            plus
                        </span>
                        €25.00
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Cinema Popcorn and Snacks
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="amount negative">
                        <span class="screen-reader">
                            minus
                        </span>
                        €17.50
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Birthday Gift for Lena
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="amount positive">
                        <span class="screen-reader">
                            plus
                        </span>
                        €12.50
                    </span>
                    <span>
                        <span class="screen-reader">
                            for 
                        </span>
                        Halloween Party Drinks and Snacks
                    </span>
                </a>
            </li>
        </ul>
    </dd>
</dl>


dl[role="presentation"].list-expander {
    & > dt[role="heading"] {
        & > button {
            display: block;
            width: 100%;
            max-width: unset;

            font-family: 'Assistant';
            font-weight: 600;
            font-size: 1.2rem;

            background-image: unset;
            background-position: 8rem center;
            background-repeat: no-repeat;
            background-size: 1rem 1rem;
            text-align: left;
            padding-left: 1rem;
            background-color: rgba($secondary, 0);
            transition-property: background-color, box-shadow;
            transition-duration: 300ms;

            &:hover {
                background-color: rgba($secondary, 0.2);
            }
        }

        &[data-expanded="false"] {
            & > button {
                background-image: url(images/pfeil.svg);
            }
            & + dd[role="region"] {
                display: none;
            }
        }
        &[data-expanded="true"] {
            button {
                background-image: url(images/pfeil_inv.svg);
            }
            & + dd[role="region"] {
                display: block;
            }
        }
    }
}

This list expander accessibly represents an accordion to hide/show already paid debts of a person.

Media Blocks / Cards

Debt Card

Andrew Smith owes you

€22.50

for Halloween Party Drinks and Snacks

You owe Andrew Smith

€7.20

for Pizza Cardinale


<article class="debt-card" tabindex="0">
    <section>
        <h2>
            Andrew Smith owes you
        </h2>
        <span class="amount positive">
            <span class="screen-reader">
                plus
            </span>
            €12.50
        </span>
        <h3>
            <span class="screen-reader">
                for 
            </span>
            Halloween Party Drinks and Snacks
        </h3>
    </section>
    <section aria-label="controls">
        <button class="icon success" data-text="paid">
            paid
        </button>
        <button class="icon danger" data-text="delete">
            delete
        </button>
    </section>
</article>
<article class="debt-card" tabindex="0">
    <section>
        <h2>
            You owe to Andrew Smith
        </h2>
        <span class="amount negative">
            <span class="screen-reader">
                minus
            </span>
            €12.50
        </span>
        <h3>
            <span class="screen-reader">
                for 
            </span>
            Halloween Party Drinks and Snacks
        </h3>
    </section>
    <section aria-label="controls">
        <button class="icon success" data-text="paid">
            paid
        </button>
        <button class="icon danger" data-text="delete">
            delete
        </button>
    </section>
</article>


article.debt-card {
    background-color: $secondary;
    border-radius: 0.28346rem;
    padding: 0 0 0 1.2rem;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    font-family: 'Assistant';
    font-weight: 300;
    color: $white;
    margin-bottom: 1rem;
    max-width: $maxWidth;

    & > section:nth-of-type(1) {
        flex-grow: 1;
        flex-shrink: 1;
        width: 100%;
        padding: 1rem 0.5rem 1rem 0;

        & > h2 {
            font-size: 1.3rem;
            color: $white;
        }
        & > .amount {
            font-family: 'Heebo';
            font-weight: 300;
            font-size: 4rem;
            white-space: nowrap;

            &.positive {
                color: $success;
                text-shadow: 0 0 1px darken($success, 20%);
            }
            &.negative {
                color: $danger;
                text-shadow: 0 0 1px darken($danger, 20%);
            }
        }
        & > h3 {
            font-size: 1.8rem;
        }
    }
    & > section:nth-of-type(2) {
        flex-grow: 0;
        flex-shrink: 0;
        align-self: stretch;
        width: 6rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        min-height: 12rem;
        border-left: 1px solid rgba($white,0.4);
        padding: 1rem 1rem;

        & > button:nth-last-of-type(1) {
            margin-top: 0.8rem;
        }
    }
}

The debt card is displaying an overview of the debt or debt group of a person. It contains a description, an amount and the two icon buttons.

Navigations

Header Navigation


<header class="header-main">
    <h1>
        <a href="#">
            <img src="images/logo_white.svg" alt="debtrack">
        </a>
    </h1>
    <button class="btn-help">
        help
    </button>
</header>


.header-main {
    display: block;
    position: relative;
    height: 3rem;

    & > h1 > a {
        display: block;
        position: absolute;
        top: 0rem;
        left: 50%;
        transform: translate(-50%,0);
        text-align: center;
        & > img {
            width: 50%;
            height: 3rem;
        }
    }
    & > button {
        display: block;
        height: 2.5rem;
        width: 2.5rem;
        padding: 0;
        font-size:0;
        background-color: transparent;
        background-image: none;
        background-size: 2rem 2rem;
        background-repeat: no-repeat;
        background-position: center;
        box-shadow: none;
        border-radius: 50%;
        position: absolute;
        top: 0.25rem;

        &.btn-help {
            background-repeat: no-repeat;
            background-size: 2rem 2rem;
            background-image: url(images/help.svg);
            right: 1rem;

            &:hover {
                background-image: url(images/help_hover.svg);
                background-position: center;
            }
        }
    }
}

This is the main header navigation which is used on the home screen of the app. It contains the logo and an icon that leads to the help page.

Header Navigation with Back Button


<header class="header-back">
    <button class="btn-back">
        back
    </button>
    <h1>
        <a href="#">
            <img src="images/logo_white.svg" alt="debtrack">
        </a>
    </h1>
    <button class="btn-help">
        help
    </button>
</header>


.header-back {
    display: block;
    position: relative;
    height: 3rem;

    & > h1 > a {
        display: block;
        position: absolute;
        top: 0rem;
        left: 50%;
        transform: translate(-50%,0);
        text-align: center;
        & > img {
            width: 50%;
            height: 3rem;
        }
    }
    & > button {
        display: block;
        height: 2.5rem;
        width: 2.5rem;
        padding: 0;
        font-size:0;
        background-color: transparent;
        background-image: none;
        background-size: 2rem 2rem;
        background-repeat: no-repeat;
        background-position: center;
        box-shadow: none;
        border-radius: 50%;
        position: absolute;
        top: 0.25rem;

        &.btn-back, &.btn-help {
            background-repeat: no-repeat;
            background-size: 2rem 2rem;
        }
        &.btn-back {
            background-image: url(images/backpfeil.svg);
            left: 1rem;

            &:hover{
                background-image: url(images/backpfeil_hover.svg);
                background-position: center;
            }
        }
        &.btn-help {
            background-image: url(images/help.svg);
            right: 1rem;

            &:hover {
                background-image: url(images/help_hover.svg);
                background-position: center;
            }
        }
    }
}

This header navigation is used on every sub screen/page of the app. It not only contains the logo and the help icon, it has a back button too.

Header Navigation with Close Button


<header class="header-close">
    <h1>
        <a href="#">
            <img src="images/logo_white.svg" alt="debtrack">
        </a>
    </h1>
    <button class="btn-close">
        close
    </button>
</header>


.header-close {
    display: block;
    position: relative;
    height: 3rem;

    & > h1 > a {
        display: block;
        position: absolute;
        top: 0rem;
        left: 50%;
        transform: translate(-50%,0);
        text-align: center;
        & > img {
            width: 50%;
            height: 3rem;
        }
    }
    & > button {
        display: block;
        height: 2.5rem;
        width: 2.5rem;
        padding: 0;
        font-size:0;
        background-color: transparent;
        background-image: none;
        background-size: 2rem 2rem;
        background-repeat: no-repeat;
        background-position: center;
        box-shadow: none;
        border-radius: 50%;
        position: absolute;
        top: 0.25rem;

        &.btn-close {
            background-repeat: no-repeat;
            background-size: 2rem 2rem;
            background-image: url(images/close.svg);
            right: 1rem;

            &:hover {
                background-image: url(images/close_hover.svg);
                background-position: center;
            }
        }
    }
}

This header navigation is there to close a screen/dialog and go back to the previous one. It is used on the help, create and send screens/pages.