Skip to content
Snippets Groups Projects
sidebar.sass 3.04 KiB
Newer Older
@mixin in-page-with-sidebar
    @include media-breakpoint-up(desktop)
        body:not(.full-width) &
            @content

@mixin in-page-without-sidebar
    @include media-breakpoint-up(desktop)
        main > .blocks &,
        body.full-width &,
            @content

// Use this mixin to override with-aside or without-aside rules
@mixin in-page-with-or-without-sidebar
    @include media-breakpoint-up(desktop)
        body:not(.full-width) &,
        main > .blocks &,
        body.full-width &,
            @content

// Aliases
@mixin full-page
    @include in-page-without-sidebar
        @content

@mixin not-full-page
    @include in-page-with-sidebar
        @content

// Section Program
@mixin in-page-program
    .programs__section &
        @content

@mixin sticky($offset-y: 0)
    position: sticky
    top: $offset-y
    @if $header-sticky-enabled
        transition: top $header-sticky-transition
        html:not(.is-scrolling-down) &
            top: calc(var(--header-height) + #{$offset-y})

@mixin sidebar($side: start)
    @include media-breakpoint-down(desktop)
alexisben's avatar
alexisben committed
        padding: 0 var(--grid-gutter)
    @include media-breakpoint-up(desktop)
        @if $side == start
alexisben's avatar
alexisben committed
            margin-left: grid-external-space()
alexisben's avatar
alexisben committed
            margin-right: grid-external-space()
            right: 0
        margin-top: 0
        top: 0
        height: 100%
        position: absolute
alexisben's avatar
alexisben committed
        width: columns(4)
alexisben's avatar
alexisben committed
            border-top: 1px solid var(--color-border)
            position: static
            margin-left: 0

// Utilisé dans .post-infos, et project-infos
@mixin section__page-infos
    @include meta
    @include list-reset
    font-size: $table-body-size
    margin-bottom: 0
    @include media-breakpoint-up(desktop)
        font-size: $table-body-size-desktop
    > li
        @include meta
        display: flex
        gap: $spacing-3
        justify-content: space-between
        padding-top: $spacing-2
        padding-bottom: $spacing-2
        border-color: var(--color-border)
        &:not(:first-child)
            align-items: center
            border-top: 1px solid var(--color-border)
        > span
            @include meta
            color: var(--color-text-alt)
            padding-left: 0
            white-space: nowrap
            vertical-align: top
        > ul
            text-align: right
            flex: 1
        &.social-share
            align-items: center
    a
        @include link(var(--color-accent))
        text-align: right
    .terms
        @include list-reset
        margin: 0
        li
            display: inline-block
            vertical-align: middle
            margin-left: $spacing-1
            &:last-child
                &::after
                    content: none
    .share
        display: block
        li
            display: inline-block
        a
            color: inherit
        li:last-child
            margin-right: -$spacing-2