spaCy/website/assets/css/_base/_objects.sass

//- 💫 CSS > BASE > OBJECTS

//- Main container

.o-main
    padding: $nav-height 0 0 0
    max-width: 100%
    min-height: 100vh

    @include breakpoint(min, md)
        &.o-main--sidebar
            margin-left: $sidebar-width

        &.o-main--aside
            margin-right: $aside-width
            position: relative

            &:after
                @include position(absolute, top, left, 0, 100%)
                @include size($aside-width, 100%)
                content: ""
                display: block
                background: $pattern
                z-index: -1
                min-height: 100vh


//- Content container

.o-content
    padding: 3rem 7.5rem
    margin: 0 auto
    width: $content-width
    max-width: 100%

    @include breakpoint(max, sm)
        padding: 3rem


//- Footer

.o-footer
    position: relative
    padding: 2.5rem 0
    overflow: auto
    background: $color-subtle-light

    .o-main &
        border-top-left-radius: $border-radius


//- Blocks

.o-section
    width: 100%
    max-width: 100%

    &:not(:last-child)
        margin-bottom: 7rem
        padding-bottom: 4rem
        border-bottom: 1px dotted $color-subtle

.o-block
    margin-bottom: 4rem

.o-block-small
    margin-bottom: 2rem

.o-no-block.o-no-block
    margin-bottom: 0

.o-card
    background: $color-back
    border-radius: $border-radius
    box-shadow: $box-shadow

//- Box

.o-box
    background: $color-subtle-light
    padding: 2rem
    border-radius: $border-radius

.o-box__logos
    padding-bottom: 1rem


//- Icons

.o-icon
    vertical-align: middle

    &.o-icon--inline
        margin: 0 0.5rem 0 0.1rem

    &.o-icon--tag
        vertical-align: bottom
        height: 100%
        position: relative
        top: 1px

.o-emoji
    margin-right: 0.75rem
    vertical-align: text-bottom

.o-badge
    border-radius: 1em


//- SVG

.o-svg
    height: auto


//- Inline List

.o-inline-list > *
    display: inline

    &:not(:last-child)
        margin-right: 3rem


//- Logo

.o-logo
    @include size($logo-width, $logo-height)
    fill: currentColor
    vertical-align: middle
    margin: 0 0.5rem


//- Embeds

.o-chart
    max-width: 100%

.cp_embed_iframe
    border: 1px solid $color-subtle
    border-radius: $border-radius


//- Form fields

.o-field
    background: $color-back
    padding: 0 0.25em
    border-radius: 2em
    border: 1px solid $color-subtle
    margin-bottom: 0.25rem

.o-field__input,
.o-field__button
    padding: 0 0.35em

.o-field__input
    width: 100%

.o-field__select
     background: transparent
     color: $color-dark
     height: 1.4em
     border: none
     text-align-last: center

.o-empty:empty:before
    @include size(1em)
    border-radius: 50%
    content: ""
    display: inline-block
    background: $color-red
    vertical-align: middle