bedrock/media/css/protocol/protocol-mozilla.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$brand-theme: 'mozilla';
$type-scale: 'standard';
$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

// These are general styles for elements/components that occur on every page.
// Individual pages may include additional component styles as needed.

// Fonts
@import '~@mozilla-protocol/core/protocol/css/includes/fonts/inter';
@import '~@mozilla-protocol/core/protocol/css/includes/fonts/zilla-slab';

// Base elements - general HTML elements
@import '~@mozilla-protocol/core/protocol/css/base/elements';

// Base includes - animations
@import '~@mozilla-protocol/core/protocol/css/base/includes';

// Utility includes
@import '~@mozilla-protocol/core/protocol/css/base/utilities/backgrounds';
@import '~@mozilla-protocol/core/protocol/css/base/utilities/titles';

// Global components
@import '~@mozilla-protocol/core/protocol/css/components/button';
@import '~@mozilla-protocol/core/protocol/css/components/language-switcher';
@import 'components/download-button';

// Custom global components for nav and footer
// These will later be backported to Protocol
@import 'components/footer';
@import 'components/navigation';
@import 'components/menu';
@import 'components/menu-item';
@import 'components/sub-navigation';

// Temporary styling until the newsletter component is updated in Protocol
// https://github.com/mozilla/protocol/issues/578
.mzp-c-newsletter-subtitle {
    @include text-title-xs;
}

.mzp-c-newsletter-desc {
    @include text-body-md;
}

// style classes automatically added by python to match Protocol form error styles
.errorlist {
    @include white-links;
    background-color: $form-red;
    border-radius: $field-border-radius;
    color: $color-white;
    padding: $spacing-sm;
    margin-bottom: $spacing-xl;
}

.error-msg {
    @include light-links;
    background-color: $form-red;
    border-radius: $field-border-radius;
    color: $color-white;
    padding: $spacing-sm;
    margin-bottom: $spacing-xl;
}

// hide <template> elements in the DOM.
template {
    display: none !important; /* stylelint-disable-line declaration-no-important */
}