<template>
    <div>
        <section>
            <h2>Mixin - Breakpoints</h2>
            <div class="bp"></div>
        </section>

        <section>
            <h2>Mixin - Borders</h2>
            <p class="border">
                Hello
            </p>
            <p class="border border--skip">
                World
            </p>
        </section>

        <section>
            <h2>Mixin - Border Radii</h2>
            <div class="border-radius">almost the same</div>
            <div class="border-radius border-radius--different">different</div>
        </section>

        <section>
            <h2>Mixin - Shadow</h2>
            <div class="box-shadow"></div>
            <div class="text-shadow">I'm a shadow</div>
        </section>

        <section>
            <h2>Mixin - Font Awesome</h2>
            <div class="font-awesome"></div>
        </section>

        <section>
            <h2>Extend - Container</h2>
            <div class="container">
                hallo welt
            </div>
            <div class="container container--thin"></div>
        </section>

        <section>
            <h2>Mixin - Row</h2>
            <div class="container">
                <div class="row"></div>
            </div>
        </section>

        <section>
            <h2>Mixin - Column</h2>
            <div class="container">
                <div class="row">
                    <div v-for="i in 12" class="column">
                        <div class="column__inner">
                            hallo welt
                        </div>
                    </div>
                </div>
                <div class="row row--condensed">
                    <div v-for="i in 12" class="column">
                        <div class="column__inner">
                            hallo welt
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <h2>Mixin - RSA</h2>
            <div class="rsa"></div>
        </section>

        <section>
            <h2>Mixin - Spacing</h2>
            <div class="spacing"></div>
            <div class="spacing-2"></div>
        </section>

        <section>
            <h2>Mixin - Translate</h2>
            <div class="translate-1">translate(x, 10px)</div>
            <div class="translate-2">translate(x, 10px 50px)</div>
            <div class="translate-3">translate(x, large)</div>
            <div class="translate-4">translate(x, large, negative)</div>
            <div class="translate-5">translate(x y, 10px)</div>
            <div class="translate-6">translate(x y, 10px 50px)</div>
            <div class="translate-7">translate(x y, small)</div>
            <div class="translate-8">translate(x y, small, negative)</div>
            <div class="translate-9">translate(x y, small large)</div>
            <div class="translate-10">translate(x y, small large, negative)</div>
            <div class="translate-11">translate(x y, (10px: 50px, 20px: 30px))</div>
            <div class="translate-12">translate(x y, (-10px: -50px, -20px: -30px))</div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "example"
    }
</script>

<style lang="scss">
    // there are some variables to disable stuff.
    // $enable-reset: false;
    // $enable-font-awesome: false;
    // $enable-base-styling: false;
    @import 'example-variables';

    // import of trio-assets-css lib
    @import './scss/import.scss';

    // general example styling

    h2 {
        padding: 20px;
        font-size: 60px;
        border-bottom: 10px solid black;
    }

    section {
        margin-bottom: 5vh;
    }

    // bp example
    .bp {
        height: 200px;
        width: 100%;

        @include bp(xs) {
            background: red;
        }
        @include bp(s) {
            background: orange;
        }
        @include bp(m) {
            background: yellow;
        }
        @include bp(l) {
            background: yellowgreen;
        }
        @include bp(xl) {
            background: green;
        }
    }

    // border example

    .border {
        @include border();
    }

    .border--skip {
        @include border(skip);
    }

    // border-radius example

    .border-radius,
    .border-radius--different {
        width: 200px;
        height: 200px;
        background: blue;
        color: white;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .border-radius {
        @include border-radius();
    }

    .border-radius--different {
        @include border-radius(different);
    }

    // box-shadow example

    .box-shadow {
        @include shadow(dummy);
        width: 100%;
        height: 80px;
        background: #ffffff;
        margin-bottom: 30vh;
    }

    .text-shadow {
        @include shadow(dummy, text-shadow);
    }

    .container {
        @extend %container-default;
        margin: 0 auto;
        min-height: 50px;
        background: blueviolet;
    }

    .container--thin {
        @extend %container-thin;
        background: blue;
    }

    .row {
        @include row();
        background: orange;
        min-height: 50px;
    }

    .row--condensed {
        @include row(condensed);
        background: orange;
        min-height: 50px;
    }

    .column {
        @include columns(2);
        margin-bottom: 10px;
        @include bp(m) {
            @include columns(4);
        }
        @include bp(xl) {
            @include columns(6);
        }
    }

    .column--highlighted {
        background: green;
    }

    .column__inner {
        width: 100%;
        background: lightgoldenrodyellow;
    }

    .spacing {
        @include target-bps(xs s) {
            @include spacing(padding, small, right);
            @include spacing(margin, small, right);
        }
        @include target-bps(m l xl) {
            @include spacing(padding, large, right);
        }
    }

    .spacing-2 {
        @include spacing(margin, large);
    }

    .rsa {
        @include rsa(width height, 50px, 200px);
        background: red;
    }

    .translate-1,
    .translate-2,
    .translate-3,
    .translate-4,
    .translate-5,
    .translate-6,
    .translate-7,
    .translate-8,
    .translate-9,
    .translate-10,
    .translate-11,
    .translate-12 {
        background: lightgreen;
        margin: 10px;
        width: 150px;
        height: 50px;
    }

    .translate-1 {
        @include translate(x, 10px);
    }
    .translate-2 {
        @include translate(x, 10px 50px);
    }
    .translate-3 {
        @include translate(x, large);
    }
    .translate-4 {
        @include translate(x, large, negative);
    }
    .translate-5 {
        @include translate(x y, 10px);
    }
    .translate-6 {
        @include translate(x y, 10px 50px);
    }
    .translate-7 {
        @include translate(x y, small);
    }
    .translate-8 {
        @include translate(x y, small, negative);
    }
    .translate-9 {
        @include translate(x y, small large);
    }
    .translate-10 {
        @include translate(x y, small large, negative);
    }
    .translate-11 {
        @include translate(x y, (10px: 50px, 20px: 30px));
    }
    .translate-12 {
        @include translate(x y, (-10px: -50px, -20px: -30px));
    }
</style>