_transitions.scss

/*
    Transitions between different segments of the website
    Transitions are intended as visual separators between sections of the
    website and may not have text on them.

    The .transition element is a container with a transparent background.
    It holds a slope element and a ::before pseudo-element injected via CSS.
    If you give a transition a color, it will be mapped to the background
    color of the slope and the preceding bar.
    The slope.svg also defines a decorative inner path.
    It inherits the fill color by default (i.e. is invisible) but can be
    customized by setting the fill-property of .fill-theme.
    Full example for a red transition with blue decoration:

    .transition {
        color: red;
        .fill_slider {
            fill: blue;
        }
    }

     alternative form with outlying slider:

    .transition {
       color: transparent;
      .fill_slider {
        fill: blue;
      }
      .fill_right {
        color: red;
      }
    }
*/

@mixin transition_heights {
    @include respond-to-medium(height,      $transition-height);
    @include respond-to-medium(min-height,  $transition-min-height);
    @include respond-to-medium(max-height,  $transition-max-height);
}

.transition {
    @include transition_heights;

    display:            flex;
    font-size:          0;
    z-index:            100;
    overflow:           hidden;
    color:              inherit;
    background-color:   transparent;

    /* (1) Gets rid of pesky 1px lines that pop up occasionally */
}


.transition_on_bottom {

    @extend .transition;

    .fill_right { fill:    none;            }
    .fill_left  { fill:    currentColor;    }
}

.transition_on_top {

    @extend .transition;

    .fill_right { fill:    currentColor;    }
    .fill_left  { fill:    none;            }
}

/* Used in the svg files that hold the transition paths */
.transition_slope {
    @include transition_heights;

    fill:           none;
    width:          auto;

    /* Flex the other elements, not this one */
    flex-shrink:    0;
    flex-grow:      0;

    /* Allow drawing in the transition blocks to the sides
     * to prevent pixel artifacts */
    margin-left:    -1px;
    margin-right:   -1px;
}

.transition_block {
    @include transition_heights;

    width:  100%;
}