cirrus-ui/src/base/layout.scss

@use 'sass:math';
@use '../internal' as *;

/* HEADER */

/* This works well with panel */
section {
    display: block;
}

.content {
    max-width: 48em;
    margin: 0 auto 1.5em;
    width: 100%;

    @include screen-above($md) {
        max-width: 64em;
    }

    @include screen-above($lg) {
        max-width: 80em;
    }

    @include screen-above($xl) {
        max-width: 96em;
    }
}

.fullscreen {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 100vh;
}

/* This works well with spans and maybe even hr */
.divider {
    border-top: 0.05rem solid transparentize(fill('gray', '500'), 0.5);
    height: 0.1rem;
    margin: 1.8rem 0 1.6rem;
    position: relative;

    &[data-content] {
        margin: 0.8rem 0;
    }

    &--v[data-content]::after,
    &[data-content]::after {
        background: #fff;
        color: fill('gray', '500');
        content: attr(data-content);
        left: 50%;
        display: inline-block;
        padding: 0 0.4rem;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
    }

    &--v,
    &--v[data-content] {
        display: block;
        padding: 0.8rem;

        &::before {
            border-left: 0.05rem solid transparentize(fill('gray', '500'), 0.5);
            bottom: 0.4rem;
            content: '';
            display: block;
            left: 50%;
            position: absolute;
            top: 0;
            transform: translateX(-50%);
        }
    }

    &--v[data-content] {
        left: 50%;
        padding: 0.2rem 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
/* Hero image div */
.hero-img {
    /* Specify the backgroud image yourself */
    background-size: cover;
}

.parallax-img {
    background-attachment: fixed !important;
}

.hero {
    /* Parent of hero-body */
    align-items: stretch;
    display: flex; /* Important to stretch height of hero-body */
    justify-content: space-between;

    .hero-body {
        flex-grow: 1; /* Tells the hero-body to take up the entire space */
        flex-shrink: 0;
        padding: 3rem 1.5rem;
        align-items: center;
        display: flex;
        width: 100%;
    }
}

.space {
    display: block;
    width: 100%;
    height: 1rem;

    @each $size, $property-map in $space-sizes {
        &.space--#{$size} {
            @include explode-properties($property-map);
        }
    }
}

/* Use for spacing out elements vertically */
.row {
    flex: 1;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    display: flex;

    &::after {
        content: '';
        clear: both;
        display: table;
    }

    &.row--no-wrap {
        flex-wrap: nowrap;
        overflow-x: auto; /* Can be disabled to remove scroll bar */
    }

    /* GRID */
    .col {
        display: block;
        flex: 1;
        padding: 0.15rem 0.75rem;
    }

    /* Auto align col to left in row */
    .offset-right {
        margin-left: 0;
        margin-right: auto;
    }

    /* Auto align col to middle in row */
    .offset-center {
        margin-left: auto;
        margin-right: auto;
    }
    /* Auto align col to right in row */
    .offset-left {
        margin-left: auto;
        margin-right: 0;
    }

    /* Dividers for mobile layout */
    &.divided [class^='col'],
    &.divided [class*=' col'] {
        box-shadow: 0 -1px 0 0 transparentize(fill('gray', '500'), 0.5);
    }

    /* Base sizing where everything is 100% width */
    [class^='col-'],
    [class*=' col-'] {
        width: 100%;
        margin-left: 0;
        padding: 0 0.5rem;
    }

    /* Column sizes for various viewports */
    @for $i from 1 through $flex-columns {
        @include screen-above($sm) {
            // Same as col-md-<number>
            .col-#{$i} {
                width: percentage($number: $flex-width * $i);
            }
        }
    }

    @include generate-styles-with-viewports() using ($viewport) {
        @for $i from 1 through $flex-columns {
            // For sm, viewport is empty
            $v: if($viewport != '', '-#{$viewport}-', '-xs-');
            .col#{$v}#{$i} {
                width: percentage($number: $flex-width * $i);
            }
        }
    }

    @for $i from 1 through $flex-columns {
        @include screen-above($xs) {
            .offset-#{$i} {
                margin-left: percentage($number: $flex-width * $i);
            }
        }
    }

    /* Columns without the spacing */
    &.no-space [class^='col-'],
    &.no-space [class*=' col-'] {
        padding: 0;
    }
}

.r {
    /* Legacy row pre 0.5.5 */
    max-width: 100%;
    padding: 0.5rem;
}

.level {
    align-items: center;
    justify-content: space-between;

    .level-item {
        /* Centers items */
        align-items: center;
        display: flex;
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
    }

    /* Used to stretch the contents of div in level to fill */
    .level-content {
        flex-basis: auto;
        flex-grow: 1;
        flex-shrink: 1;
        text-align: left;
        width: 100%;
    }
}

/* Width/Height CSS */
@include generate-classes-for-viewport-with-map($heights, 'height', 'h-', #{get-viewport-flag($HEIGHTS)});
@include generate-classes-for-viewport-with-map($widths, 'width', 'w-', #{get-viewport-flag($WIDTHS)});
@include generate-classes-for-viewport-with-map(
    $min-heights,
    'min-height',
    'min-h-',
    #{get-viewport-flag($MIN-HEIGHT)}
);
@include generate-classes-for-viewport-with-map($min-widths, 'min-width', 'min-w-', #{get-viewport-flag($MIN-WIDTH)});
@include generate-classes-for-viewport-with-map(
    $max-heights,
    'max-height',
    'max-h-',
    #{get-viewport-flag($MAX-HEIGHT)}
);
@include generate-classes-for-viewport-with-map($max-widths, 'max-width', 'max-w-', #{get-viewport-flag($MAX-WIDTH)});

/* Do the actual balancing only on larger screens */
.level,
.level-left,
.level-right {
    @include screen-above($sm) {
        display: flex;
    }
}

@include screen-below($sm) {
    .level-right {
        margin-left: 1rem;
    }

    /* Keep all level children the same height */
    .level.fill-height {
        align-items: stretch;
        display: flex;
    }
}

/* MOBILE */
@include screen-below($sm) {
    .container {
        width: 100%;
    }

    .row {
        margin-top: 0;
    }

    /* Dividers for mobile layout */
    .divided > .row [class^='col-'],
    .divided > .row [class*=' col-'] {
        box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
    }

    .level.fill-height {
        display: inherit; /* Allow children to expand */
    }

    .hero-body {
        padding: 0;
    }
}