Seite

components/site/site.scss muss vor allen anderen Komponenten importiert werden. Weitere Infos finden sich dazu in der allgemeinen Dokumentation (Start).

In den Beispielen ist nur <div class="site-content"> relevant. Siehe Variante Im Kontext für Einbindungsbeispiel.

@import "fonts";

$letter-spacing: .03em;

body,
#layout {
    display: flex;
    flex-direction: column;
    letter-spacing: $letter-spacing;
    min-height: 100vh;
}

.site-content {
    padding: ($spacer * 3) 0;

    &--dashboard {
        background-color: $gray-100;
    }
}

.ti {
    font-size: 1.3em;
}

.glightbox-button-hidden {
    display: none !important;
}

///// Additional utility classes
/////

.fs-xs {
    font-size: $font-size-xs;
}

.fs-sm {
    font-size: $font-size-sm;
}

.fs-lg {
    font-size: $font-size-lg;
}

.fs-xl {
    font-size: $font-size-xl;
}

.fs-xxl {
    font-size: $font-size-xxl;
}


///// Standard elements
/////

///// Images + captions

figcaption {
    color: $gray-600;
    font-size: $font-size-sm;
    font-style: italic;
    line-height: 1.3;
    margin-top: 0.5em;
}


///// Bootstrap elements
/////

///// Breadcrumbs

.breadcrumb-item a {
    color: $gray-600;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

///// Underline nav

.nav-underline {
    gap: $nav-underline-gap;

    .nav-link {
        border-color: $gray-600;
        border-style: dotted;
        border-width: 0 0 $nav-underline-border-width 0;
        color: $gray-600;
        font-weight: 400;

        &:hover {
            color: $nav-underline-link-active-color;
        }

        &.active {
            color: $orange;
            font-weight: 400;
        }
    }
}


///// Progress bar

.progress[data-bs-toggle="tooltip"]:hover {
    border: 2px dashed $orange;
}


///// Forms

// Forms inside gray elements

.section-box--alt,
.section-box--alt-1,
.section-box--alt-2,
.bg-light-gray {

    .form-control:not(:disabled),
    .form-select:not(:disabled) {
        background-color: #fff;
    }
}


///// Site content
/////

.site-content {

    h1,
    h2 {
        font-family: 'Roboto Condensed', sans-serif;
        margin-bottom: $spacer * 2;
        text-transform: uppercase;
    }

    h1 {
        font-size: $font-size-xl;
    }

    h2:not([class]) {
        font-size: $font-size-lg;
        margin-bottom: $spacer * 1.5;

        &:not(:first-child) {
            margin-top: $spacer * 3;
        }
    }
}


///// User content
/////

.user-content {


    table {
        margin: 0 0 1rem 0;

        th,
        td {
            border: 1px solid $gray-400;
            padding: 10px;
            vertical-align: top;
        }
    }
}


///// Various helpers and "stuff"
/////

.icon-button {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
}

.stakeholder-summary-plot {
    aspect-ratio: 8 / 5;
    display: block;
    width: 100%;
}


///// Print
/////

@media print {

    body {
        // Force grayscale printing only.
        filter: grayscale(100%);
    }

    .site-content {
        padding: $spacer 0;
    }
}

Varianten

Standard

[content]
<div class="site-content flex-fill">
    <div class="container">[content]</div>
</div>

Im Kontext

[content]
<header class="site-header">
    <div class="navbar navbar-expand-lg mb-4 pt-3">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="https://dev-design.corespot-manager.com/build/assets/core-spot-logo-DeQtP4Bo.svg" width="300px" alt>
            </a>
            <form class="d-flex ms-auto me-4 d-print-none" role="search">
                <input class="form-control form-control" type="search" placeholder="SUCHE" aria-label="Suche">
            </form>
            <ul class="meta-nav navbar-nav flex-row d-print-none">
                <li class="nav-item">
                    <a class="nav-link" href="#" title="Benachrichtigungen">
                        <i class="ti ti-bell"></i>
                    </a>
                </li>
                <li class="nav-item dropdown">
                    <button class="nav-link dropdown-toggle" title="Einstellungen" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ti ti-settings"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><strong class="dropdown-header">Einstellungen</strong></li>
                        <li><a class="dropdown-item" href="#">Branchen</a></li>
                        <li><a class="dropdown-item" href="#">Schwellenwerte</a></li>
                        <li><a class="dropdown-item" href="#">Bewertungsmaßstäbe</a></li>
                        <li><a class="dropdown-item" href="#">CRM-Relationen</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <button class="nav-link dropdown-toggle" title="Profil" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ti ti-user"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><strong class="dropdown-header">Profil</strong></li>
                        <li><a class="dropdown-item" href="#">Persönliche Daten</a></li>
                        <li><a class="dropdown-item" href="#">Passwort ändern</a></li>
                        <li><a class="dropdown-item" href="#">Sprachauswahl</a></li>
                        <li><a class="dropdown-item" href="#">Abmelden</a></li>
                    </ul>
                </li>
            </ul>
            <button class="navbar-toggler ms-2 d-print-none" type="button" data-bs-toggle="collapse" data-bs-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="Menü anzeigen">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="navbar navbar-expand-lg py-0 border-bottom border-accent d-print-none">
        <div class="container">
            <div id="primary-nav" class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Unternehmen</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Wesentlichkeitsanalyse</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Datenerhebung</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>

<div class="site-content flex-fill">
    <div class="container">[content]</div>
</div>

<footer class="site-footer">
    <div class="container">
        <div class="row align-items-center">
            <div class="col text-start">
                <a href="https://inproma.de" target="_blank" title="Inproma GmbH">
                    <img src="https://dev-design.corespot-manager.com/build/assets/inproma-logo-D_mzkKIE.svg" width="150px" alt>
                </a>
            </div>
            <div class="col text-center">
                Copyright © 2024 Inproma GmbH - Alle Rechte vorbehalten.
            </div>
            <div class="col text-end d-print-none">
                <a href="https://corespot.de/agb" target="_blank">AGB</a>
                |
                <a href="https://corespot.de/impressum" target="_blank">Impressum</a>
                |
                <a href="https://corespot.de/datenschutz" target="_blank">Datenschutz</a>
            </div>
        </div>
    </div>
</footer>

Varianten