sprintdoc/css/base.less

/**
 * This file provides the basic vars and reset styles.
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* global vars */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* fonts */
@line-height-default: 125%;
@line-height-big: 135%;
@line-height-bigger: 140%;


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* breakpoints */
@break-min-xxs: 480;
@break-max-xxs: (@break-min-xxs - 1);

@break-min-xs: 768;
@break-max-xs: (@break-min-xs - 1);

@break-min-sm: 992;
@break-max-sm: (@break-min-xs - 1);

@break-min-md: 1024;
@break-max-md: (@break-min-md - 1);

@break-min-lg: 1200;
@break-max-lg: (@break-min-lg - 1);

@break-min-xlg: 1440;
@break-max-xlg: (@break-min-xlg - 1);

@break-min-xxlg: 1600;
@break-max-xxlg: (@break-min-xlg - 1);


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* media queries for breakpoints */

@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";

@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";

@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";

@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";

@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";

@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";

@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";


/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* col width */
@c12:               100%;
@c11:               91.66666667%;
@c10:               83.33333333%;
@c9:                75%;
@c8:                66.66666667%;
@c7:                58.33333333%;
@c6:                50%;
@c5:                41.66666667%;
@c4:                33.33333333%;
@c3:                25%;
@c2:                16.66666667%;
@c1:                8.33333333%;

@grid-columns:      12;

/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* margin / padding */
@margin-big:        2.5rem;

@border-radius:     __default_border_radius__;


@color-border:      __border__;
@color-nav:         __nav_menu_color__;
@color-nav-hover:   __nav_menu_hover_color__;
@color-nav-hover-bg:__nav_menu_hover_bg__;

@color-link:        __existing__;

@height-context-bar: 50px;

/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* all media */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
html, body{
    font-size: 100.1%;
    .reset();
}

header, .nav-direct{
    .elementsReset();
}


div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, em,acronym, img, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
input, select, option, textarea, button{
    font-size: 1rem; line-height: 100%;
}


ol, ul{ list-style: none outside none; }
blockquote, q{ quotes: none; }
acronym{ cursor: help; border-bottom: dotted 1px #333; }

*:focus{ outline: 0; }

table{ border-collapse: collapse; border-spacing: 0; empty-cells: show; caption-side: top; }
caption, th, td{ text-align: left; vertical-align: top; }

img{ display: block; float: none; border: none 0; line-height: @line-height-default; }

*, div, nav, header{
    box-sizing: border-box;
}

header, footer, .container, .row, nav, nav > ul{
    &::before, &::after{
        display: table;
        content: "  ";
        clear: both;
    }
}


.sr-out {
    .sr-out();
}

.sr-only {
    .sr-only();
}

.structure, .none, .mobile-only {
    display: none;
}

.mobile-only {
    display: none;

    @media @screen_max-xs {
        display: inline-block;
    }
}

.mobile-hide {
    display: inline-block;

    @media @screen_max-xs {
        display: none;
    }
}


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* screen only */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

@media screen{

    html {
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    article, aside, details, figcaption, figure, footer, header,
    main, menu, nav, section, summary {
        display: block;
    }

    audio, canvas, progress, video {
        display: inline-block;
        vertical-align: baseline;
    }

    audio:not([controls]) {
        display: none;
        height: 0;
    }

    [hidden],
    template {
        display: none;
    }

    a:active,
    a:hover {
        outline: 0;
    }

    abbr[title] {
        border-bottom: 1px dotted;
    }

    small {
        font-size: 80%;
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    svg:not(:root) {
        overflow: hidden;
    }

    hr {
        box-sizing: content-box;
        height: 0;
    }
    pre {
        overflow: auto;
    }
    code,
    kbd,
    pre,
    samp {
        font-family: monospace, monospace;
        font-size: 1em;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        color: inherit;
        font: inherit;
        margin: 0;
    }
    button {
        overflow: visible;
    }

    button,
    select {
        text-transform: none;
    }

    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    input[type="search"] {
        -webkit-appearance: textfield;
        box-sizing: content-box;
    }

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    legend {
        border: 0;
        padding: 0;
    }
    textarea {
        overflow: auto;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td,
    th {
        padding: 0;
    }

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote,
    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        font-family: __font_family_screen__;
        color: @ini_text;
    }

}

/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* print only */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@media print{
    body{
        font-size: 12pt;
    }
}