cirrus-ui/src/base/layout.scss

A lightweight UI framework written in SCSS

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

@function get-column-map($num-columns, $width) {
    $result: ();

    @for $i from 1 through $num-columns {
        $result: map.set(
            $result,
            $i,
            (
                width:
                    math.percentage(
                        $number: $width * $i,
                    ),
            )
        );
    }

    @return $result;
}

@function get-offset-map($num-columns, $width) {
    $result: ();

    @for $i from 1 through $num-columns {
        $result: map.set(
            $result,
            $i,
            (
                margin-left:
                    math.percentage(
                        $number: $width * $i,
                    ),
            )
        );
    }

    @return $result;
}

/* 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-'],
    [class*='\:col-'] {
        width: 100%;
        margin-left: 0;
        padding: 0 0.5rem;
    }

    @include generator_v2.utility(
        $base-class-name: 'col',
        $class-value-pairs: get-column-map($flex-columns, $flex-width),
        $variants: ($RESPONSIVE),
        $class-prefix: '',
        $override: '!important'
    );

    // TODO: Deprecate 0.8.0?
    @include generator_v2.utility(
        $base-class-name: 'offset',
        $class-value-pairs: get-offset-map($flex-columns, $flex-width),
        $variants: ($RESPONSIVE),
        $class-prefix: '',
        $override: '!important'
    );

    /* Columns without the spacing */
    // TODO: Deprecate 0.8.0, use p-0 instead
    // &.no-space [class^='col-'],
    // &.no-space [class*=' col-'],
    // &.no-space [class*='\:col-'] {
    //     padding: 0;
    // }
}

.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 generator_v2.utility(
    $base-class-name: 'h',
    $class-value-pairs: generator_v2.class-value-to-property-map($heights, height),
    $variants: get-pseudo-variants($HEIGHTS),
    $class-prefix: '',
    $override: '!important'
);
@include generator_v2.utility(
    $base-class-name: 'w',
    $class-value-pairs: generator_v2.class-value-to-property-map($widths, width),
    $variants: get-pseudo-variants($WIDTHS),
    $class-prefix: '',
    $override: '!important'
);
@include generator_v2.utility(
    $base-class-name: 'min-h',
    $class-value-pairs: generator_v2.class-value-to-property-map($min-heights, min-height),
    $variants: get-pseudo-variants($MIN-HEIGHT),
    $class-prefix: '',
    $override: '!important'
);
@include generator_v2.utility(
    $base-class-name: 'min-w',
    $class-value-pairs: generator_v2.class-value-to-property-map($min-widths, min-width),
    $variants: get-pseudo-variants($MIN-WIDTH),
    $class-prefix: '',
    $override: '!important'
);
@include generator_v2.utility(
    $base-class-name: 'max-h',
    $class-value-pairs: generator_v2.class-value-to-property-map($max-heights, max-height),
    $variants: get-pseudo-variants($MAX-HEIGHT),
    $class-prefix: '',
    $override: '!important'
);
@include generator_v2.utility(
    $base-class-name: 'max-w',
    $class-value-pairs: generator_v2.class-value-to-property-map($max-widths, max-width),
    $variants: get-pseudo-variants($MAX-WIDTH),
    $class-prefix: '',
    $override: '!important'
);

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

@include screen-above($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-'],
    .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;
    }
}