diff options
Diffstat (limited to 'browser/components/newtab/content-src/styles/_variables.scss')
| -rw-r--r-- | browser/components/newtab/content-src/styles/_variables.scss | 323 |
1 files changed, 323 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..b43b9fe924 --- /dev/null +++ b/browser/components/newtab/content-src/styles/_variables.scss @@ -0,0 +1,323 @@ +// Photon colors from http://design.firefox.com/photon/visuals/color.html +$blue-40: #45A1FF; +$blue-50: #0A84FF; +$blue-60: #0060DF; +$blue-70: #003EAA; +$blue-80: #002275; +$grey-10: #F9F9FA; +$grey-20: #EDEDF0; +$grey-30: #D7D7DB; +$grey-40: #B1B1B3; +$grey-50: #737373; +$grey-60: #4A4A4F; +$grey-70: #38383D; +$grey-80: #2A2A2E; +$grey-90: #0C0C0D; +$teal-10: #A7FFFE; +$teal-60: #00C8D7; +$teal-70: #008EA4; +$teal-80: #005A71; +$red-60: #D70022; +$yellow-50: #FFE900; +$violet-20: #CB9EFF; + +// Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity +$grey-10-00: rgba($grey-10, 0); +$grey-10-10: rgba($grey-10, 0.1); +$grey-10-20: rgba($grey-10, 0.2); +$grey-10-30: rgba($grey-10, 0.3); +$grey-10-40: rgba($grey-10, 0.4); +$grey-10-50: rgba($grey-10, 0.5); +$grey-10-60: rgba($grey-10, 0.6); +$grey-10-80: rgba($grey-10, 0.8); +$grey-10-95: rgba($grey-10, 0.95); +$grey-20-60: rgba($grey-20, 0.6); +$grey-20-80: rgba($grey-20, 0.8); +$grey-30-60: rgba($grey-30, 0.6); +$grey-60-60: rgba($grey-60, 0.6); +$grey-60-70: rgba($grey-60, 0.7); +$grey-70-40: rgba($grey-70, 0.4); +$grey-70-60: rgba($grey-70, 0.6); +$grey-80-95: rgba($grey-80, 0.95); +$grey-90-00: rgba($grey-90, 0); +$grey-90-10: rgba($grey-90, 0.1); +$grey-90-20: rgba($grey-90, 0.2); +$grey-90-30: rgba($grey-90, 0.3); +$grey-90-40: rgba($grey-90, 0.4); +$grey-90-50: rgba($grey-90, 0.5); +$grey-90-60: rgba($grey-90, 0.6); +$grey-90-70: rgba($grey-90, 0.7); +$grey-90-80: rgba($grey-90, 0.8); +$grey-90-90: rgba($grey-90, 0.9); + +$blue-40-40: rgba($blue-40, 0.4); +$blue-50-50: rgba($blue-50, 0.5); +$blue-50-30: rgba($blue-50, 0.3); +$blue-50-50: rgba($blue-50, 0.5); + +$black: #000; +$black-5: rgba($black, 0.05); +$black-10: rgba($black, 0.1); +$black-12: rgba($black, 0.12); +$black-15: rgba($black, 0.15); +$black-20: rgba($black, 0.2); +$black-25: rgba($black, 0.25); +$black-30: rgba($black, 0.3); + +// Other colors +$white: #FFF; +$white-0: rgba($white, 0); +$white-10: rgba($white, 0.1); +$white-50: rgba($white, 0.5); +$white-60: rgba($white, 0.6); +$white-70: rgba($white, 0.7); +$white-100: rgba($white, 1); +$ghost-white: #FAFAFC; +$pocket-teal: #50BCB6; +$pocket-red: #EF4056; +$shadow-10: rgba(12, 12, 13, 0.1); +$bookmark-icon-fill: #0A84FF; +$download-icon-fill: #12BC00; +$pocket-icon-fill: #D70022; +$email-input-focus: rgba($blue-50, 0.3); +$email-input-invalid: rgba($red-60, 0.3); +$aw-extra-blue-1: #004EC2; +$aw-extra-blue-2: #0080FF; +$aw-extra-blue-3: #00C7FF; +$about-welcome-gradient: linear-gradient(to bottom, $blue-70 40%, $aw-extra-blue-1 60%, $blue-60 80%, $aw-extra-blue-2 90%, $aw-extra-blue-3 100%); +$about-welcome-extra-links: #676F7E; +$firefox-wordmark-default-color: #363959; +$firefox-wordmark-darktheme-color: $white; + +// New New Tab Experience colors. +$newtab-background-button-default-color: rgba(223, 223, 223, 0.5); +$newtab-background-button-darktheme-color: rgba(80, 80, 80, 0.5); +$newtab-background-button-default-text-color: #484848; +$newtab-background-button-darktheme-text-color: #CDCDD4; +$newtab-background-button-default-hover-color: rgba(196, 196, 196, 0.5); +$newtab-background-button-darktheme-hover-color: rgba(114, 114, 114, 0.5); +$newtab-background-button-default-active-color: rgba(151, 151, 151, 0.5); +$newtab-background-button-darktheme-active-color: rgba(173, 173, 173, 0.5); +$newtab-background-primary-text-color: #151515; +$newtab-background-darktheme-primary-text-color: #CDCDD4; +$newtab-wordmark-default-color: #20123A; + +$newtab-card-primary-text-color: #20123A; +$newtab-card-darktheme-primary-text-color: #E0E0E6; +$newtab-card-line-color: #716F87; +$newtab-card-darktheme-line-color: #B9B7CC; +$newtab-card-separator-line-color: #E1E0E6; +$newtab-card-darktheme-separator-line-color: #53515F; +$newtab-card-tint: rgba(0, 0, 0, 0.15); +$newtab-card-firstshadow: rgba(9, 32, 77, 0.12); +$newtab-card-darktheme-firstshadow: rgba(21, 20, 26, 0.5); +$newtab-card-secondshadow: rgba(29, 17, 51, 0.12); +$newtab-darktheme-card-secondshadow: rgba(21, 20, 26, 0.75); +$newtab-focus-outline-color: rgba(0, 96, 223, 0.25); +$newtab-darktheme-focus-outline-color: rgba(80, 145, 241, 0.5); +$newtab-darktheme-focus-border: #B5D3FF; +$newtab-darktheme-focus-border-selected: #B5D3FF; +$newtab-darktheme-primary-action-background: #4484E2; +$newtab-primary-action-background-off: #E9E9E9; +$newtab-darktheme-primary-action-background-off: #6A6A6F; +$newtab-card-darktheme-secondary-action-background: #515156; +$newtab-card-darktheme-secondary-action-background-hover: #606065; +$newtab-card-secondary-action-background-active: #E2E2E6; +$newtab-card-darktheme-secondary-action-background-active: #6F6F74; +$newtab-card-darktheme-hover-color: rgba(180, 180, 180, 0.1); +$newtab-card-hover-color: rgba(0, 0, 0, 0.05); +$newtab-tile-shadow-secondary: rgba(29, 17, 51, 0.2); +$newtab-tile-darktheme-shadow-secondary: rgba(21, 20, 26, 0.75); +$newtab-card-secondary-text-color: #585165; +$newtab-card-darktheme-secondary-text-color: #B1B1BD; + +// 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; +$searchbar-width-medium: $grid-unit * 4 + $base-gutter * 3; +$searchbar-width-large: $grid-unit * 6 + $base-gutter * 5; + +$searchbar-width-small-new: ($grid-unit * 2 + $base-gutter * 1) - 24px; +$searchbar-width-medium-new: ($grid-unit * 4 + $base-gutter * 3) - 120px; +$searchbar-width-large-new: ($grid-unit * 6 + $base-gutter * 5) - 136px; +$searchbar-width-largest-new: ($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: 13px; + +$card-width: $grid-unit * 2 + $base-gutter; +$card-width-nte: $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/'; + +$snippets-container-height: 120px; + +$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 $newtab-card-tint; + +@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-nte { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-focus-outline), 0 0 0 1px var(--newtab-focus-border); +} + +@mixin context-menu-button-newtab-experience { + .context-menu-button { + background-image: url('chrome://global/skin/icons/more.svg'); + border: 0; + border-radius: 4px; + cursor: pointer; + fill: var(--newtab-icon-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: -9px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; + + &:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-topsites-context-menu-hover); + fill: var(--newtab-primary-action-background); + } + } +} + +@mixin context-menu-button { + .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-contextmenu-button-color); + 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-icon-primary-color); + height: $context-menu-button-size; + inset-inline-end: -($context-menu-button-size / 2); + opacity: 0; + position: absolute; + top: -($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 nt-experience-context-menu-button-hover { + .context-menu-button { + opacity: 1; + } +} + +@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); + } +} |