code.scss

// CODE
//------------------------------------------------
//------------------------------------------------
.code-element {
    margin-bottom: 20px;

    pre {
        margin-top: 0;
    }

    code {
        padding: 20px;
    }

    .bar-code {
        background: #B4BBBD;
        text-align: center;
        padding: 2px 0;
        font-size: $font-size-small;
        font-weight: $font-bold;
        min-height: 26px;
        @include border-radius($border-radius-base $border-radius-base 0 0);

    }
}

.code-snippet-area {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    position: relative; // so we can position the buttons

    &:hover {

        // display the copy buttons on hover of the whole area
        .code-snippet-buttons {
            opacity: 0.95;

            &:active {
                transition: none;
                opacity: 0.7;
            }
        }
    }

    .code-snippet-buttons {
        opacity: 0; // default invisible until hover
        transition: $base-transition;
        position: absolute; // so we can position the buttons
        right: 3px;
        top: 5px;

        button {
            border: none;
            background: #fff;
            font-size: $font-size-medium;
            color: $gray-darker;
            cursor: pointer;
        }
    }

    .code-snippet-display {
        margin-top: 0px;
        margin-bottom: 0px;
        width: 100%;
    }
}