media/css/firefox/releasenotes.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/.

@use 'sass:math';

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
@import '../protocol/components/sub-navigation';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';


// * -------------------------------------------------------------------------- */
// Call out / page header

.mzp-c-callout.t-firefox,
.mzp-c-callout.t-beta {
    background: $color-marketing-gray-20;
}

// nightly header gradient
.mzp-c-callout.t-nightly {
    background: linear-gradient(#000, #001e44);
}

// developer header gradient
.mzp-c-callout.t-developer {
    background: linear-gradient(#000, #001e44);
}

// old logos
//  - cannot use at2x mixin here because it will over-ride the background-size,
//    which we don't want to have to reset here because it's different for
//    mobile and desktop

.t-quantum {
    // firefox release
    .mzp-c-logo.mzp-t-product-firefox {
        background-image: url('/media/img/firefox/releasenotes/release-quantum.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/release-quantum-high-res.png');
        }
    }

    // firefox beta
    .mzp-c-logo.mzp-t-product-beta {
        background-image: url('/media/img/firefox/releasenotes/beta-quantum.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/beta-quantum-high-res.png');
        }
    }

    // firefox nightly
    .mzp-c-logo.mzp-t-product-nightly {
        background-image: url('/media/img/firefox/releasenotes/nightly-quantum.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/nightly-quantum-high-res.png');
        }
    }

    // firefox developer edition
    .mzp-c-logo.mzp-t-product-developer {
        background-image: url('/media/img/firefox/releasenotes/developer-quantum.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/developer-quantum-high-res.png');
        }
    }

    // pre-dev edition firefox aurora
    .mzp-c-logo.mzp-t-product-developer.t-aurora {
        background-image: url('/media/img/firefox/releasenotes/aurora.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/aurora-high-res.png');
        }
    }
}

.t-pre-quantum {
    // firefox release
    .mzp-c-logo.mzp-t-product-firefox {
        background-image: url('/media/img/firefox/releasenotes/firefox-old.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/firefox-old-high-res.png');
        }
    }

    // firefox beta
    .mzp-c-logo.mzp-t-product-beta {
        background-image: url('/media/img/firefox/releasenotes/beta-old.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/beta-old-high-res.png');
        }
    }

    // firefox nightly
    .mzp-c-logo.mzp-t-product-nightly {
        background-image: url('/media/img/firefox/releasenotes/nightly-old.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/nightly-old-high-res.png');
        }
    }

    // firefox developer edition
    .mzp-c-logo.mzp-t-product-developer {
        background-image: url('/media/img/firefox/releasenotes/developer-old.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/developer-old-high-res.png');
        }
    }

    // pre-dev edition firefox aurora
    .mzp-c-logo.mzp-t-product-developer.t-aurora {
        background-image: url('/media/img/firefox/releasenotes/aurora.png');

        @media #{$mq-high-res} {
            background-image: url('/media/img/firefox/releasenotes/aurora-high-res.png');
        }
    }
}

.c-download-cta {
    > a {
        display: inline-block;
        margin-top: $spacing-lg;
    }

    .is-firefox & {
        display: none;
    }
}

// * -------------------------------------------------------------------------- */
// secondary navigation

.t-release {
    background-color: $color-marketing-gray-30;
    text-align: center;

    .mzp-c-menu-panel-content {
        text-align: left;
    }

    /* mobile only */
    @media screen and (max-width: #{$screen-md - 1px}) {
        .mzp-c-menu-panel {
            background-color: transparent;
        }
    }
}

// * -------------------------------------------------------------------------- */
// release notes custom typography

.c-release-summary {
    margin-bottom: 0;
}

.c-release-version {
    @include text-title-xl;
    font-family: var(--body-font-family);
    display: block;
}

.c-release-first-text,
.c-release-draft-text {
    @include text-body-md;
}

.mzp-l-content {
    .c-release-product {
        @include text-title-2xs;
        font-family: var(--body-font-family);
        display: block;
    }

    .c-release-date {
        @include text-title-2xs;
        font-family: var(--body-font-family);
    }

    .c-release-first-title,
    .c-release-draft-title {
        @include text-title-2xs;
        font-family: var(--body-font-family);
        font-weight: bold;

        // pushes the text down after the big release-version text
        &::before {
            @include text-title-xl;
            content: '.';
            display: block;
            visibility: hidden;
        }
    }

    h3 {
        @include text-title-xs;
        margin-bottom: $layout-sm;
    }
}

.c-release-notes > .mzp-l-content {
    padding-top: $layout-lg;

    &::before {
        content: '';
        display: block;
        width: calc(100% - #{ $layout-xs * 2});
        height: 2px;
        background-color: $color-marketing-gray-20;
        position: absolute;
        top: 0;
        left: $layout-xs;

        @media #{$mq-md} {
            left: $layout-lg;
            width: calc(100% - #{ $layout-lg * 2});
        }

        @media #{$mq-lg} {
            left: $layout-xl;
            width: calc(100% - #{ $layout-xl * 2});
        }
    }
}

.mzp-l-article {
    > ul > li {
        border-bottom: 2px solid $color-marketing-gray-20;
        margin-bottom: $layout-sm;
        padding-bottom: $layout-sm;
        scroll-margin-top: 88px;

        &:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        > ul,
        > ol,
        > p {
            &:last-child {
                margin-bottom: 0;
            }
        }

        p + ul,
        p + ol {
            margin-top: -1em;
        }

        ul,
        ol {
            @include bidi(((margin-left, $layout-sm, margin-right, 0),));
        }

        ul {
            list-style: disc;

            li {
                margin-bottom: 0.25em;
            }

            ul {
                list-style: circle;
                margin-bottom: 0;
            }

            ol {
                list-style: decimal;
                margin-bottom: 0;
            }
        }

        ol {
            list-style: decimal;

            li {
                margin-bottom: 0.25em;
            }

            ol {
                list-style: lower-alpha;
                margin-bottom: 0;
            }

            ul {
                list-style: disc;
                margin-bottom: 0;
            }
        }
    }
}

// icons
.c-release-notes .mzp-l-sidebar {
    display: flex;
    align-items: flex-start;
}

.sidebar-icon {
    float: left;
    margin-right: $spacing-sm;
}

.developer-more {
    border-bottom: 2px solid $color-marketing-gray-20;
    margin-bottom: $layout-md;
    padding-bottom: $layout-md;

    &:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

.mdn-icon {
    @include align-items(center);
    @include flexbox;
    @include justify-content(end);
    margin-top: 10px;

    &::before {
        content: ' ';
        background-image: url('/media/img/firefox/releasenotes/mdn-icon.png');
        background-repeat: no-repeat;
        background-size: 100%;
        display: inline-block;
        height: 25px;
        margin-right: 5px;
        vertical-align: bottom;
        width: 25px;
    }

    ul + & {
        margin-top: 20px;
    }
}

// * -------------------------------------------------------------------------- */
// all-download link

.all-download {
    background-color: $color-marketing-gray-20;
    font-weight: bold;
    padding: $spacing-sm $layout-2xs;
    @include text-body-md;

    @media #{$mq-md} {
        text-align: center;
    }
}

// * -------------------------------------------------------------------------- */
// more information links at end of page

.c-release-footer {
    padding: $layout-sm 0;

    h2 {
        @include text-body-md;
    }

    a {
        display: block;
    }

    .c-release-footer-col {
        margin-top: $layout-md;

        &:first-child {
            margin-top: 0;
        }

        @media #{$mq-md} {
            @include bidi(((float, left, right),));
            @include bidi(((padding-left, $layout-md, padding-right, 0),));
            margin-top: 0;
            width: calc(#{math.div(100%, 3)} - (#{$layout-md} - #{math.div($layout-md, 3)}));

            &:first-child {
                @include bidi(((padding-left, 0, padding-right, 0),));
            }
        }
    }
}

.release-note {
    .release-note-content{
        width: 100%;
    }

    .bug-id {
        @include bidi(((text-align, right, left),));
        display: block;
        margin-bottom: 0;

        p + &,
        ul + & {
            margin-top: -1em;
        }
    }

    .relevant-countries {
        @include text-body-xs;
        margin-bottom: $spacing-lg;
    }

    .release-note-progressive-rollout-indicator {
        @include text-body-md;
        text-align: center;
        width: 210px;
        border: 2px solid $color-marketing-gray-20;
        border-radius: $border-radius-md;
        padding: $spacing-sm 0;
        margin: auto;

        img {
            width: 100px
        }

        p {
            margin-bottom: $spacing-sm;
        }

        details {
            @include text-body-xs;
            padding: 0 $spacing-md;

            p {
                text-align: left;
            }

            summary {
                color: $color-marketing-gray-60;
                font-weight: bold;
                padding: 0 0 $spacing-xs;
                position: static;
                text-decoration: underline;

                &::before {
                    content:none;
                }
            }
        }
    }

    @media #{$mq-md} {
        display: flex;

        .release-note-progressive-rollout-indicator {
            margin-left: $spacing-lg;
            max-width: 210px;
            min-width: 210px;
        }
    }

}