Commit 1b1f3076 authored by Emily McMinn's avatar Emily McMinn
Browse files

Bug 1714617 - Update noodle positions & sizes on about:welcome to more closely... 

Bug 1714617 - Update noodle positions & sizes on about:welcome to more closely match design spec r=pdahiya

Differential Revision: https://phabricator.services.mozilla.com/D117047
parent 58fc4233

browser/components/newtab/aboutwelcome/content/aboutwelcome.css

+22 −12
Original line number Diff line number Diff line
@@ -509,7 +509,7 @@ body { 
    .onboardingContainer.proton .purple-C {

      background-image: url("chrome://activity-stream/content/data/content/assets/noodle-C.svg");

      -moz-context-properties: fill;

      fill: #F6429A; }

      fill: #E7258C; }

    .onboardingContainer.proton .orange-L {

      background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg");

      -moz-context-properties: fill;
@@ -602,26 +602,36 @@ body { 
        @media (max-width: 866px) {

          .onboardingContainer.proton .screen-1 .section-main {

            width: 450px;

            height: auto; } }

            min-height: 447px; } }

        @media (max-width: 610px) {

          .onboardingContainer.proton .screen-1 .section-main {

            width: 420px;

            height: auto; } }

            min-height: 467px; } }

      .onboardingContainer.proton .screen-1 .outline-L {

        width: 87px;

        height: 80px;

        transform: rotate(10deg) translate(-30%, 200%);

        transition-delay: 0.4s;

        z-index: 2; }

      .onboardingContainer.proton .screen-1 .orange-L {

        width: 550px;

        height: 660px;

        transform: rotate(-155deg) translate(11%, -18%);

        transition-delay: 0.2s; }

        @media (max-width: 866px) {

          .onboardingContainer.proton .screen-1 .orange-L {

            width: 448px;

            height: 568px;

        transform: rotate(-155deg) translate(12%, -21%);

        transition-delay: 0.2s; }

            transform: rotate(-155deg) translate(12%, -21%); } }

      .onboardingContainer.proton .screen-1 .purple-C {

        width: 310px;

        height: 260px;

        transform: translate(-18%, -67%); }

        @media (max-width: 866px) {

          .onboardingContainer.proton .screen-1 .purple-C {

            width: 294px;

            height: 254px;

        transform: translate(-20%, -62%); }

            transform: translate(-20%, -62%); } }

      .onboardingContainer.proton .screen-1 .yellow-circle {

        width: 165px;

        height: 165px;
@@ -660,11 +670,11 @@ body { 
        @media (max-width: 866px) {

          .onboardingContainer.proton .screen-2 .section-main {

            width: 450px;

            height: auto; } }

            min-height: 447px; } }

        @media (max-width: 610px) {

          .onboardingContainer.proton .screen-2 .section-main {

            width: 420px;

            height: auto; } }

            min-height: 467px; } }

      .onboardingContainer.proton .screen-2 .outline-L {

        width: 87px;

        height: 80px;
@@ -694,7 +704,7 @@ body { 
        height: 165px;

        border-radius: 50%;

        transform: translate(160%, 130%);

        background: #FF4AA2; }

        background: #E7258C; }

    .onboardingContainer.proton.transition-in .noodle {

      opacity: 0;

      rotate: var(--rotate);

browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss

+20 −8
Original line number Diff line number Diff line
@@ -757,7 +757,7 @@ body { 
    .purple-C {

      background-image: url('chrome://activity-stream/content/data/content/assets/noodle-C.svg');

      -moz-context-properties: fill;

      fill: #F6429A;

      fill: #E7258C;

    }



    .orange-L {
@@ -909,17 +909,29 @@ body { 
      }



      .orange-L {

        width: 550px;

        height: 660px;

        transform: rotate(-155deg) translate(11%, -18%);

        transition-delay: 0.2s;



        @media (max-width: $break-point-large) {

          width: 448px;

          height: 568px;

          transform: rotate(-155deg) translate(12%, -21%);

        transition-delay: 0.2s;

        }

      }



      .purple-C {

        width: 310px;

        height: 260px;

        transform: translate(-18%, -67%);



        @media (max-width: $break-point-large) {

          width: 294px;

          height: 254px;

          transform: translate(-20%, -62%);

        }

      }



      .yellow-circle {

        width: 165px;
@@ -1031,7 +1043,7 @@ body { 
        height: 165px;

        border-radius: 50%;

        transform: translate(160%, 130%);

        background: #FF4AA2;

        background: #E7258C;

      }

    }