_mixins.scss

/*
    This file provides mixin functions for inclusion in different parts of the
    other SCSS.

    DO NOT link this in your HTML it is not meant for that (and provides
    no added value)

    DO @import it into the SCSS that makes use of the mixins defined here
*/

@import "breakpoints";
@import "colors";
@import "measurements";

/* Rotates the element by 180° */
@mixin rotate-180 {
    transform:  scale(-1);
}

/* Rotates the element by 180° and offsets it towards the top */
@mixin rotate-180-offset-top {
    transform:  scale(-1) translateY(100%);
}

/* --- Border styles --- */
@mixin border-invisible { border: 1px solid transparent;    }
@mixin border-default   { border: 1px solid currentColor;   }
@mixin border-blue-rounded {
    padding:        0.25rem;
    border:         2px solid $color-helmholtz-blue;
    border-radius:  0.25rem;
}

/*
    Create a thin border around the content in the proper style color.
*/
@mixin boxed-content {
    @include border-blue-rounded;

    border-width:   1px;
    padding-right:  0.5rem;
    padding-bottom: 0.125rem;
    padding-left:   0.5rem;
}

/* --- Element width shorthands --- */
/*
    Attempts a full viewport width content.
    If browsers have to show a vertical scroll bar, they usually do not account
    for it in the viewport size and thus also introduce a horizontal scroll bar
    to display the space occupied by the vertical one.
    This mixin is a fix for this issue, if applied to the child of another
    full-width element or the root element.
*/
@mixin width-full-viewport {
    width:      100vw;
    max-width:  100%;
}

/*
    In analogy to width-full-viewport, just inset by the document margins.
    Intended to work with width-full-viewport parent elements

    NOTE CONSIDER THIS DEPRECATED
    Using a container with document-side-margin padding and children with
    left/right auto margins will yield the same result with less obscure CSS.
*/
@mixin width-full-content {
    width:      calc(100vw  - 2 * #{$document-side-margin});
    max-width:  calc(100%   - 2 * #{$document-side-margin});
}

/* Styling used in header and footer buttons */
@mixin button-style {
    @include border-default;

    display:            table-cell;
    text-align:         center;
    vertical-align:     middle;
    font-family:        inherit;
    letter-spacing:     inherit;
    padding-top:        0.5rem;
    padding-bottom:     0.5rem;
    padding-left:       1.0rem;
    padding-right:      1.0rem;
    outline:            0;
    border-radius:      0.5rem;
    line-height:        1.2;
}

/* Font manipulations */
@mixin font-bold        { font-weight:  700;    }
@mixin font-regular     { font-weight:  normal; }

@mixin font-very-large  { font-size:    1.5rem; }
@mixin font-large       { font-size:    1.2rem; }
@mixin font-normal      { font-size:    1.0rem; }
@mixin font-small       { font-size:    0.9rem; }
@mixin font-subscript   { font-size:    0.8rem; }
@mixin font-extra-small { font-size:    0.7rem; }

/* Text manipulations */
@mixin text-uppercase   { text-transform: uppercase;    }

/* Specific text formatting */
@mixin font-heading {
    @include font-bold;
    @include text-uppercase;

    font-family: "Hermann", sans-serif;
}

@mixin font-text {
    @include font-normal;
    @include font-regular;

    text-transform: none;
    font-family:    "Corporate S", serif;
}

/*
    A label is a small short text enclosed in a cartridge
*/
@mixin label {
    @include font-extra-small;
    @include border-default;

    line-height:        1.0;
    color:              currentColor;
    background:         transparent;
    border-radius:      1rem;
    border-color:       currentColor;
    padding-top:        0.20rem;
    padding-left:       0.25rem;
    padding-bottom:     0.05rem;
    padding-right:      0.25rem;
    margin:             0.15rem;
}

/*
    Helper mixin for elements containing many labels
*/
@mixin label-collection {
    display:        flex;
    flex-flow:      row wrap;
    align-items:    baseline;
}

/* --- Flex patterns --- */

/* A flex setup intended mostly for text lines */
@mixin flex-row-text {
    display:        flex;
    flex-flow:      row wrap;
    align-items:    baseline;
}

/*
    Creates a drop-shadow effect on an element.
    Default values generate a decent soft gray shadow to the lower right.
*/
@mixin drop-shadow(
    $offset-x:  0.1rem,
    $offset-y:  0.1rem,
    $blur:      0.1rem,
    $color:     #88888840
) {
    filter: drop-shadow($offset-x $offset-y $blur $color);
}

@mixin max-content-width {
    max-width: 60rem;
}

/*
 * A mixin for the commonly used pattern of centering block-display elements by
 * setting the left and right margins to auto.
 */
@mixin use-margins-to-center {
    margin-left:    auto;
    margin-right:   auto;
}