_reset.scss

@mixin app-styles-reset($config) {
    $reboot: map-get($config, 'reboot');
    $box-sizing-to-border-box: map-get($config, 'box-sizing-to-border-box');
    $font-family-base: map-get($config, 'font-family-base');
    $font-size-base: map-get($config, 'font-size-base');
    $line-height-base: map-get($config, 'line-height-base');

    @if $reboot {
        @if $box-sizing-to-border-box {

            // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }
        }

        html {
            // Correct the line height in all browsers. (from normalize.css)
            line-height: 1.15;
            // Prevent adjustments of font size after orientation changes in iOS. (from normalize.css)
            -webkit-text-size-adjust: 100%;

            // Change the default font family in all browsers. (from bootstrap)
            font-family: sans-serif;

            // TOD: To reiview - Setting @viewport causes scrollbars to overlap content in IE11 and Edge (from bootstrap)
            // -ms-overflow-style: scrollbar;
            // Changes the default tap highlight to be completely transparent in iOS. (from bootstrap)
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

            // TODO: to review
            // width: 100%;
            // height: 100%;
        }

        body {
            // Remove the margin in all browsers (opinionated). (from normalize.css)
            margin: 0;

            font-family: $font-family-base;
            font-size: $font-size-base;
            line-height: $line-height-base;

            // Set an explicit initial text-align value so that we can later use the
            // the `inherit` value on things like `<th>` elements.
            text-align: left;

            // TODO: to review
            // width: 100%;
            // height: 100%;
            // min-height: 100%;
        }

        // Suppress the focus outline on elements that cannot be accessed via keyboard.
        // This prevents an unwanted focus outline from appearing around elements that
        // might still respond to pointer events.
        // Credit: https://github.com/suitcss/base
        [tabindex="-1"]:focus {
            outline: none !important;
        }
    }
}