vendure/docs/assets/styles/intro/_terminal.scss

@import "variables";

$terminal-easing: cubic-bezier(.17,.67,.26,1.54);

.intro-terminal {
    position: absolute;
    color: #e5e5e5;
    display: flex;
    flex-direction: column;
    background-color: $terminal-color;
    font-family: "Courier New", Courier, monospace;
    font-size: calc(0.1 * var(--width-unit));
    width: calc(2 * var(--width-unit));
    height: calc(2 * var(--width-unit));
    top: 0;
    left: 0;
    transition: all $transition-duration;
    transition-timing-function: $terminal-easing;
    border-radius: calc(0.03 * var(--width-unit));
}

@mixin dot($color) {
    width: calc(0.07 * var(--width-unit));
    height: calc(0.07 * var(--width-unit));
    background-color: $color;
    border-radius: 50%;
}

.intro-terminal-controls {
    position: relative;
    margin-left: calc(0.15 * var(--width-unit));
    margin-top: calc(0.05 * var(--width-unit));
    @include dot(#ffbd2e);
    transition: margin $transition-duration, width $transition-duration, height $transition-duration;
    transition-timing-function: $terminal-easing;
    &:before {
        position: absolute;
        left: calc(-0.10 * var(--width-unit));
        content: '';
        @include dot(#ff5f56);
        transition: width $transition-duration, height $transition-duration, left $transition-duration;
        transition-timing-function: $terminal-easing;
    }
    &:after {
        position: absolute;
        left: calc(0.10 * var(--width-unit));
        content: '';
        @include dot(#27c93f);
        transition: width $transition-duration, height $transition-duration, left $transition-duration;
        transition-timing-function: $terminal-easing;
    }
}

.intro-text-area {
    padding: calc(0.2 * var(--width-unit)) calc(0.09 * var(--width-unit));
    padding-bottom: 0;
    transition: padding $transition-duration;
    transition-timing-function: $terminal-easing;
}

.intro-gql-logo {
    display: flex;
    justify-content: center;
   
    img {
        width: calc(1 * var(--width-unit));
        height: calc(1 * var(--width-unit));
        transform: translateY(calc(-0.2 * var(--width-unit)));
        transition: transform 1s ease-out;
    }
    opacity: 0;
}