directory-connector/src/scss/misc.scss

@import "~bootstrap/scss/_variables.scss";

body {
    padding: 10px 0 20px 0;
}

h1 {
    border-bottom: 1px solid $border-color;
    margin-bottom: 20px;

    small {
        color: $text-muted;
        font-size: $h1-font-size * .5;
    }
}

h2 {
    text-transform: uppercase;
    font-weight: bold;
}

h3 {
    text-transform: uppercase;
}

h4 {
    font-weight: bold;
}

#duo-frame {
    background: url('../images/loading.svg') 0 0 no-repeat;
    height: 380px;

    iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
}

app-root > #loading {
    text-align: center;
    margin-top: 20px;
    color: $text-muted;
}

ul.testing-list {
    ul {
        padding-left: 18px;
    }

    li.deleted {
        text-decoration: line-through;
    }
}

.callout {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #000000;
    border-left-width: 5px;
    border-radius: 3px;
    border-color: #ddd;
    background-color: white;

    .callout-heading {
        margin-top: 0;
    }

    h3.callout-heading {
        font-weight: bold;
        text-transform: uppercase;
    }

    &.callout-primary {
        border-left-color: $primary;

        .callout-heading {
            color: $primary;
        }
    }

    &.callout-info {
        border-left-color: $info;

        .callout-heading {
            color: $info; 
        }
    }

    &.callout-danger {
        border-left-color: $danger;

        .callout-heading {
            color: $danger;
        }
    }

    &.callout-success {
        border-left-color: $success;

        .callout-heading {
            color: $success;
        }
    }

    &.callout-warning {
        border-left-color: $warning;

        .callout-heading {
            color: $warning;
        }
    }

    ul {
        padding-left: 40px;
        margin: 0;
    }
}