diff options
Diffstat (limited to '')
-rw-r--r-- | browser/components/newtab/content-src/styles/_variables.scss | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/styles/_variables.scss b/browser/components/newtab/content-src/styles/_variables.scss new file mode 100644 index 0000000000..9fd0083841 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_variables.scss @@ -0,0 +1,215 @@ +@use 'sass:math'; + +$primary-blue: rgb(0, 97, 224); +$primary-green: rgb(0, 128, 120); +$primary-blue-dark: rgb(0, 221, 255); +$primary-text-color-dark: rgb(43, 42, 51); + +// -------------------------------------------------------------------------- // +// Photon colors from http://design.firefox.com/photon/visuals/color.html + +$blue-40: #45A1FF; +$blue-50: #0A84FF; +$grey-30: #D7D7DB; +$grey-60: #4A4A4F; +$grey-90: #0C0C0D; +$red-60: #D70022; +$yellow-50: #FFE900; + +$grey-90-10: rgba($grey-90, 0.1); +$grey-90-20: rgba($grey-90, 0.2); + +$blue-40-40: rgba($blue-40, 0.4); +$blue-50-30: rgba($blue-50, 0.3); + +$black: #000; +$black-10: rgba($black, 0.1); +$black-15: rgba($black, 0.15); +$black-20: rgba($black, 0.2); +$black-30: rgba($black, 0.3); +$black-40: rgba($black, 0.4); + +// -------------------------------------------------------------------------- // +// Other colors + +$white: #FFF; +$status-green: #058B00; +$status-dark-green: #7C6; +$bookmark-icon-fill: #0A84FF; +$download-icon-fill: #12BC00; +$pocket-icon-fill: #EF4056; +$email-input-invalid: rgba($red-60, 0.3); + +$newtab-wordmark-default-color: #20123A; +$newtab-wordmark-darktheme-color: rgb(251, 251, 254); + +$in-content-page-color: rgb(21, 20, 26); +$in-content-page-color-dark: rgb(251, 251, 254); + +// -------------------------------------------------------------------------- // +// These colors should match the colors in the default themes +// (toolkit/mozapps/extensions/...). Note that they could get replaced by other +// themes. The color set in --tabpanel-background-color (tabs.inc.css) should +// match these colors here to avoid flashing. + +$in-content-page-background: #F9F9FB; +$in-content-page-background-dark: #2B2A33; + +$newtab-background-secondary: #FFF; +$newtab-background-secondary-dark: rgb(66, 65, 77); + +// Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html +$photon-easing: cubic-bezier(0.07, 0.95, 0, 1); + +$border-radius: 3px; +$border-radius-new: 8px; + +// Grid related styles +$base-gutter: 32px; +$section-horizontal-padding: 25px; +$section-vertical-padding: 10px; +$section-spacing: 40px - $section-vertical-padding * 2; +$grid-unit: 96px; // 1 top site +// New Tab Experience grid unit needs to be smaller, but for now we are changing +// this UI with a pref, so requires duplication. +$grid-unit-small: 80px; // 1 top site + +$icon-size: 16px; +$smaller-icon-size: 12px; +$larger-icon-size: 32px; + +$searchbar-width-small: ($grid-unit * 2 + $base-gutter * 1) - 24px; +$searchbar-width-medium: ($grid-unit * 4 + $base-gutter * 3) - 120px; +$searchbar-width-large: ($grid-unit * 6 + $base-gutter * 5) - 136px; +$searchbar-width-largest: ($grid-unit * 6 + $base-gutter * 5) - 16px; + +$wrapper-default-width: $grid-unit * 2 + $base-gutter * 1 + $section-horizontal-padding * 2; // 2 top sites +$wrapper-max-width-medium: $grid-unit * 4 + $base-gutter * 3 + $section-horizontal-padding * 2; // 4 top sites +$wrapper-max-width-large: $grid-unit * 6 + $base-gutter * 5 + $section-horizontal-padding * 2; // 6 top sites +$wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $section-horizontal-padding * 2; // 8 top sites +// For the breakpoints, we need to add space for the scrollbar to avoid weird +// layout issues when the scrollbar is visible. 16px is wide enough to cover all +// OSes and keeps it simpler than a per-OS value. +$scrollbar-width: 16px; + +// Breakpoints +// If updating these breakpoints, don't forget to update uses of DSImage, which +// might choose the right image src to use depending on the viewport size. +$break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width; // 610px +$break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width; // 866px +$break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width; // 1122px + +$section-title-font-size: 17px; + +$card-width: $grid-unit-small * 2 + $base-gutter; + +$card-height: 266px; +$card-preview-image-height: 122px; +$card-title-margin: 2px; +$card-text-line-height: 19px; + +// Larger cards for wider screens: +$card-width-large: 309px; +$card-height-large: 370px; +$card-preview-image-height-large: 155px; + +// Compact cards for Highlights +$card-height-compact: 160px; +$card-preview-image-height-compact: 108px; + +$topic-margin-top: 12px; + +$context-menu-button-size: 27px; +$context-menu-button-boxshadow: 0 2px $grey-90-10; +$context-menu-shadow: 0 5px 10px $black-30, 0 0 0 1px $black-20; +$context-menu-font-size: 14px; +$context-menu-border-radius: 5px; +$context-menu-outer-padding: 5px; +$context-menu-item-padding: 3px 12px; + +$error-fallback-font-size: 12px; +$error-fallback-line-height: 1.5; + +$image-path: 'chrome://activity-stream/content/data/content/assets/'; + +$textbox-shadow-size: 4px; + +$customize-menu-slide-bezier: cubic-bezier(0.46, 0.03, 0.52, 0.96); +$customize-menu-expand-bezier: cubic-bezier(0.82, 0.085, 0.395, 0.895); +$customize-menu-border-tint: 1px solid rgba(0, 0, 0, 15%); + +@mixin fade-in { + box-shadow: inset $inner-box-shadow, $shadow-primary; + transition: box-shadow 150ms; +} + +@mixin fade-in-card { + box-shadow: $shadow-primary; + transition: box-shadow 150ms; +} + +@mixin ds-focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); +} + +@mixin context-menu-button { + .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-background-color-secondary); + background-image: url('chrome://global/skin/icons/more.svg'); + background-position: 55%; + border: $border-primary; + border-radius: 100%; + box-shadow: $context-menu-button-boxshadow; + cursor: pointer; + fill: var(--newtab-text-primary-color); + height: $context-menu-button-size; + inset-inline-end: math.div(-$context-menu-button-size, 2); + opacity: 0; + position: absolute; + top: math.div(-$context-menu-button-size, 2); + transform: scale(0.25); + transition-duration: 150ms; + transition-property: transform, opacity; + width: $context-menu-button-size; + + &:is(:active, :focus) { + opacity: 1; + transform: scale(1); + } + } +} + +@mixin context-menu-button-hover { + .context-menu-button { + opacity: 1; + transform: scale(1); + transition-delay: 333ms; + } +} + +@mixin context-menu-open-middle { + .context-menu { + margin-inline-end: auto; + margin-inline-start: auto; + inset-inline-end: auto; + inset-inline-start: -$base-gutter; + } +} + +@mixin context-menu-open-left { + .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} + +@mixin flip-icon { + &:dir(rtl) { + transform: scaleX(-1); + } +} |