flectra/doc/_extensions/flectra_ext/static/components.less

// ================================================
// ================ Components ====================
// ================================================

// Ripple buttons
// ----------------------------------------
@-webkit-keyframes ripple {
    to {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}

@keyframes ripple {
    to {
        opacity: 0;
        .scale(2.5);
    }
}

.ripple {
    z-index: 2;

    .inner-ripple {
        display: block;
        position: absolute;
        border-radius: 100%;
        opacity: 1;
        z-index: -1;
        background: rgba(0, 0, 0, .05);
        pointer-events: none;
        .scale(0);

        &.inner-ripple-animated {
              .animation(ripple 0.35s ease-in);
        }
    }
}


// Code Fields
// ----------------------------------------
article.doc-body .code-fields {
    display: table;
    width: 100%;
    padding: 5px;
    font-size: 0.8em;
    border: 2px solid @gray-lighter;

    .code-field {
        display: table-row;
    }

    .code-field-body {
        display: block;
        padding-left: 15px;
        @media screen and (min-width: @screen-md-min) {
            display: table-cell;
            padding-left: 0;
        }
    }

    .code-field-name {
        width: auto;
        display: block;
        font-weight: @fw_semibold;
        color: @headings-color;

        &:after {
            content: ":";
        }

        @media screen and (min-width: @screen-md-min) {
            text-align: right;
            width: 20%;
            padding-right: 10px;
            display: table-cell;
        }
    }

    ul {
        list-style: none;
        margin: 0.2em 0;

        > li {
            margin: 0 0 8px;
            padding-left: 0px;
            line-height: 1.5;

            &:before {
                display: none;
            }
        }

        strong {
            color: @headings-color;
            font-family: @font-family-monospace;
        }

        em {
            color: @headings-color;
            font-family: @font-family-monospace;
            font-weight: @fw_semibold;
        }
    }
}


// Cards
// ----------------------------------------
.card-img {
    .o-gradient();
    .o-position-absolute(0, 0);
    .translate3d(0;0;0);
    .square(100%);
    display: block;
    background-size: cover;
    background-position: 50%;
}

.card.top {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0 0 2%;
    .transform-origin(50% 0px 0px);

    @media screen and (min-width: @screen-sm-min) {
        padding: 12% 0 5%;
    }

    @media screen and (min-width: @screen-md-min) {
        padding: 10% 0 5%;
    }

    @media screen and (min-width: @screen-lg-min) {
        padding: 8% 0 4%;
    }

    &.stacked {
        background: transparent;
        .transition(background 1s);
    }

    &:before {
        content: "";
        display: block;
        background-image: url("img/banner_bg.png");
        background-size: cover;
        background-position: 50%;
        .o-position-absolute(0, 0);
        .square(100%);
    }

    .card-img {
        background-image: url("img/banner_bg.png");
    }

    .container {
        position: relative;
        font-size: 32px;
        @media screen and (min-width: @screen-sm-min) {
            &:not(.o_long_title) {
                font-size: 40px;
            }

            &.o_short_title {
                font-size: 50px;
            }
        }

        h1 {
            font-weight: @fw_light;
            font-size: 1em;
            color: white;
            line-height: 0.9;
        }
    }
}

.card.top.has_banner {
    background: @footer-bg-color;

    &:before {
        display: none;
    }

    .card-img {
        opacity: 0.35;
    }
}

// Alerts
// ----------------------------------------
main .alert {
    padding: 8px 15px;
    border-radius: 0;
    margin: 5px auto 15px;
    border-width: 0 0 0 3px;
    // 'INFO' is the default style
    border-color: @brand-info;
    background-color: lighten(@brand-info, 45%);

    &, p {
        line-height: 1.3;
        font-size: 14px;
    }

    p {
        margin-bottom: 5px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    > ul {
        margin: 0.5em 0;

        > li {
            margin: 0;
        }
    }

    h3.alert-title {
        font-size: 1em;
        line-height: 1em;
        margin: 0 0 5px;
        font-weight: bold;
        font-family: @font-family-base;
        color: darken(@brand-info, 5%);

        &:before {
            .mdi-icon( "\e639");
            .translate(0, 0.1em);
            margin-right: 0.2em;
        }
    }

    &.alert-info {
        > h3.alert-title {
            display: none;
        }
    }

    &.alert-go_to {
        border-color: @o-violet-dark;
        background-color: lighten(@o-violet-dark, 52%);
        color: darken(@o-violet-dark, 5%);

        > h3.alert-title {
            color: darken(@o-violet-dark, 15%);

            &:before {
                content: "\e70d";
            }
        }
    }

    &.alert-success {
        border-color: lighten(@brand-success, 30%);
        background-color: lighten(@brand-success, 45%);

        > h3.alert-title {
            color: darken(@brand-success, 10%);
            &:before {
                content: "\e625";
            }
        }
    }

    &.alert-warning, &.warning {
        border-color: lighten(@brand-warning, 30%);
        background-color: lighten(@brand-warning, 35%);

        > h3.alert-title {
            color: @brand-warning;
            &:before {
                content: "\e6a4";
            }
        }
    }

    &.alert-danger {
        border-color: lighten(@brand-danger, 30%);
        background-color: lighten(@brand-danger, 40%);

        > h3.alert-title {
            color: darken(@brand-danger, 10%);
            &:before {
                content: "\e6a4";
            }
        }
    }

    &.alert-exercise {
        border-color: lighten(@doc_exercise, 30%);
        background-color: lighten(@doc_exercise, 40%);
        color: darken(@doc_exercise, 35%);

        > h3.alert-title {
            color: @doc_exercise;
        }

        > h3.alert-title:before {
            .translate(0;0);
            top: 28px;
            content: "\e709";
        }
    }

    &.doc-content {
        @media (min-width: @screen-lg-min) {
            max-width: 55%;
        }
    }
}


// Elements
// ----------------------------------------
hr.divider {
    border-color: fadeout(@gray-lightest, 60%);
    position: absolute;
    width: 900%;
    margin-left: -13px;
}

img.img-responsive {
    box-shadow: 0 3px 15px @gray-lighter;
    border: 1px solid @gray-lighter;
    margin-bottom: 25px;

    &:not(:first-child) {
        margin-top: 25px;
    }
}

.figure {
    h4 {
        margin: 0.5em 0 1.5em;
        padding-left: 1em;
        font-size: 1em;
        font-style: italic;
    }
}

.pq-patch {
    em {
        display: block;
        border-radius: 4px 4px 0 0;
        background: @gray-lighter;
        padding-left: 10px;
        font-size: 0.9em;
        font-weight: @fw_semibold;

        + .pq-section .highlight {
            border-radius: 0 0 4px 4px;
        }
    }
}

span.menuselection {
    font-weight: @fw_medium;
}

.list-group-item {
    border: none;
    background: transparent;
}

blockquote {
    font-family: @font-family-serif;
    font-weight: @fw_semibold;
    font-style: italic;

    footer {
        font-family: @font-family-base;
        background: transparent;
        text-align: left;
        color: @text-color;
        font-weight: normal;
        font-style: normal;

        cite {
            font-style: italic;
        }
    }
    @media (min-width:@screen-md-min) {
        border-left: 3px solid fade(@brand-primary, 50%);
    }
}

.code, code {
    font-size: 0.8em;
    font-weight: @fw_semibold;
    color: darken(@brand-primary, 30%);
    background-color: #bfe2ff;
}

.btn {
    border-radius: 0;
}

.table, table {
    font-size: 0.9em;
}

.code-attribute, .code-class, .code-classmethod, .code-data, .code-function, .code-method, .code-staticmethod {
    // indents *all* content
    padding-left: 20px;
    margin-bottom: 2em;
    // except for item title which gets dedented back
    > h6 {
        margin-left: -20px;
        margin-bottom: 0.3em;

        .viewcode-link {
            display: none;
            float: right;
        }

        &:hover .viewcode-link {
            display: inline;
        }
    }

    p {
        margin-bottom: 0.5em;
    }
}

article.doc-body {
    &.index-category {
        min-height: 300px;
        min-height: 30vh;

        li.toctree-l1 {
            padding: 5px 0;
        }
    }
}


article.doc-body .content-switcher {
    margin-top: 0;

    > ul {
        font-size: 10px;
        padding: 0;
        margin: 0;
        .transition(all .2s ease);

        > li {
            font-weight: @fw_semibold;
            color: @gray-light;
            border-bottom: 1px solid transparent;
            margin: 0 20px 0 0;
            padding-left: 0;
            font-size: 1.3em;
            cursor: pointer;
            display: inline-block;
            list-style: none;
            .transition(all .2s);
            opacity: 0.6;

            &:before {
                content: none;
            }

            &.active {
                border-bottom: 1px solid @brand-primary;
                opacity: 1;
            }
        }
    }

    &:hover > ul > li {
        .opacity(1);
    }

    > .tabs > * {
        display: none;
        max-width: 100%;
        overflow-x: auto;
    }

    > .tabs > .active {
        display: block;
    }
}

.highlight {
    background: @doc_code-bg;
    color: @gray-light;
    border-radius: @border-radius-base;
    margin-bottom: (@line-height-computed / 2);

    pre {
        margin-bottom: 0;
    }
}

pre {
    font-size: 0.8em;
    color: @gray-light;
    background: @doc_code-bg;
    font-family: @font-family-monospace;
    font-weight: @fw_semibold;
    position: relative;
    border: none;
    max-width: 100%;
    overflow: auto;
    margin: 0 0 (@line-height-computed / 2);
}