1 files changed, 311 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
new file mode 100644
index 0000000000..98046c2326
--- /dev/null
+++ b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
@@ -0,0 +1,311 @@
+@media (max-height: 701px) {
+  .personalize-button {
+    position: absolute;
+    top: 16px;
+    inset-inline-end: 16px;
+  }
+}
+
+@media (min-height: 700px) {
+  .personalize-button {
+    position: fixed;
+    top: 16px;
+    inset-inline-end: 16px;
+    z-index: 1000;
+  }
+}
+
+.personalize-button {
+  border: 0;
+  border-radius: 4px;
+  background-color: transparent;
+  padding: 15px;
+
+  &:hover {
+    background-color: var(--newtab-element-hover-color);
+  }
+
+  &:active {
+    background-color: var(--newtab-element-active-color);
+  }
+
+  &:focus-visible {
+    @include ds-focus;
+  }
+
+  &.personalize-animate-exit-done {
+    visibility: hidden;
+  }
+}
+
+.customize-menu {
+  color: var(--newtab-text-primary-color);
+  background-color: var(--newtab-background-color-secondary);
+  width: 432px;
+  height: 100%;
+  position: fixed;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 1001;
+  padding: 16px;
+  overflow: auto;
+  transform: translateX(435px);
+  visibility: hidden;
+  cursor: default;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 250ms $customize-menu-slide-bezier, visibility 250ms;
+  }
+
+  @media (forced-colors: active) {
+    border-inline-start: solid 1px;
+  }
+
+  &:dir(rtl) {
+    transform: translateX(-435px);
+  }
+
+  &.customize-animate-enter-done,
+  &.customize-animate-enter-active {
+    box-shadow: $shadow-large;
+    visibility: visible;
+    transform: translateX(0);
+  }
+
+  &.customize-animate-exit-active {
+    box-shadow: $shadow-large;
+  }
+
+  .close-button {
+    margin-inline-start: auto;
+    margin-bottom: 28px;
+    white-space: nowrap;
+    display: block;
+    background-color: var(--newtab-element-secondary-color);
+    padding: 8px 10px;
+    border: $customize-menu-border-tint;
+    border-radius: 4px;
+    color: var(--newtab-text-primary-color);
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .close-button:hover {
+    background-color: var(--newtab-element-secondary-hover-color);
+  }
+
+  .close-button:hover:active {
+    background-color: var(--newtab-element-secondary-active-color);
+  }
+}
+
+.grid-skip {
+  display: contents;
+}
+
+.home-section {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, auto);
+  grid-row-gap: 32px;
+  padding: 0 16px;
+
+  .section {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: auto 26px;
+
+    & > div {
+      grid-area: 1;
+    }
+
+    .title {
+      grid-column: 1 / -1;
+      margin: 0;
+      font-weight: 600;
+      font-size: 16px;
+      margin-bottom: 10px;
+    }
+
+    .subtitle {
+      margin: 0;
+      font-size: 14px;
+    }
+
+    .sponsored {
+      font-size: 14px;
+      margin-inline-start: 5px;
+    }
+
+    .check-wrapper {
+      position: relative;
+    }
+
+    .sponsored-checkbox {
+      margin-inline-start: 2px;
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
+      border: $customize-menu-border-tint;
+      box-sizing: border-box;
+      border-radius: 4px;
+      appearance: none;
+      background-color: var(--newtab-element-secondary-color);
+    }
+
+    .sponsored-checkbox:checked {
+      -moz-context-properties: fill;
+      fill: var(--newtab-primary-element-text-color);
+      background: url('chrome://global/skin/icons/check.svg') center no-repeat;
+      background-color: var(--newtab-primary-action-background);
+
+      @media (forced-colors: active) {
+        fill: $black;
+      }
+    }
+
+    .sponsored-checkbox:active + .checkmark {
+      fill: var(--newtab-element-secondary-color);
+    }
+
+    .selector {
+      color: var(--newtab-text-primary-color);
+      width: 118px;
+      display: block;
+      border: 1px solid var(--newtab-border-color);
+      border-radius: 4px;
+      appearance: none;
+      padding-block: 7px;
+      padding-inline: 10px 13px;
+      margin-inline-start: 2px;
+      margin-bottom: 2px;
+      -moz-context-properties: fill;
+      fill: var(--newtab-text-primary-color);
+      background: url('chrome://global/skin/icons/arrow-down-12.svg') right no-repeat;
+      background-size: 8px;
+      background-origin: content-box;
+      background-color: var(--newtab-background-color-secondary);
+
+      &:dir(rtl) {
+        background-position-x: left;
+      }
+    }
+
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 26px;
+      height: 16px;
+      grid-column: 2;
+      margin-top: 2px;
+    }
+
+    .switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    .slider {
+      position: absolute;
+      inset: 0;
+      transition: transform 250ms;
+      border-radius: 13px;
+      border: $customize-menu-border-tint;
+      background-color: var(--newtab-element-secondary-color);
+
+      &::before {
+        position: absolute;
+        content: '';
+        height: 8px;
+        width: 8px;
+        inset-inline-start: 3px;
+        bottom: 3px;
+        background-color: var(--newtab-primary-element-text-color);
+        transition: transform 250ms;
+        border-radius: 50%;
+        outline: $customize-menu-border-tint;
+      }
+    }
+
+    .switch input:focus-visible + .slider {
+      outline: 0;
+      box-shadow: $shadow-focus;
+    }
+
+    .switch input:not(:checked):focus-visible + .slider {
+      border: 1px solid var(--newtab-primary-action-background);
+    }
+
+    input:checked + .slider {
+      background-color: var(--newtab-primary-action-background);
+    }
+
+    input:checked + .slider::before {
+      transform: translateX(10px);
+    }
+
+    input:checked + .slider:dir(rtl)::before {
+      transform: translateX(-10px);
+    }
+
+    .more-info-top-wrapper,
+    .more-info-pocket-wrapper {
+      margin-inline-start: -2px;
+      overflow: hidden;
+
+      .more-information {
+        padding-top: 12px;
+        position: relative;
+        transition: margin-top 250ms $customize-menu-expand-bezier;
+      }
+    }
+
+    .more-info-top-wrapper {
+      .check-wrapper {
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .divider {
+    border-top: 1px var(--newtab-border-color) solid;
+    margin: 0 -16px;
+  }
+
+  .external-link {
+    font-size: 14px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    -moz-context-properties: fill;
+    fill: var(--newtab-text-primary-color);
+    background: url('chrome://global/skin/icons/settings.svg') left no-repeat;
+    background-size: 16px;
+    padding-inline-start: 21px;
+    margin-bottom: 20px;
+    text-decoration: underline;
+
+    @media (forced-colors: active) {
+      padding: 8px 10px;
+      padding-inline-start: 21px;
+    }
+
+    &:dir(rtl) {
+      background-position-x: right;
+    }
+  }
+
+  .external-link:hover {
+    text-decoration: none;
+  }
+}
+
+.home-section .section .sponsored-checkbox:focus-visible,
+.selector:focus-visible,
+.external-link:focus-visible,
+.close-button:focus-visible {
+  border: 1px solid var(--newtab-primary-action-background);
+  outline: 0;
+  box-shadow: $shadow-focus;
+}