/* Copyright 2021 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/*
Use these custom properties to control the feature toasts, for example:
#my-new-feature-button {
--ripple-start-height: 20px;
--ripple-start-width: 54px;
--toast-ref-x: right;
--toast-element-ref-x: right;
--toast-offset-x: 0;
--toast-ref-y: bottom;
--toast-element-ref-y: top;
--toast-offset-y: -30px;
--indicator-dot-ref-x: left;
--indicator-dot-element-ref-x: center;
--indicator-dot-offset-x: 0px;
--indicator-dot-ref-y: bottom;
--indicator-dot-element-ref-y: top;
--indicator-dot-offset-y: -14px;
}
*/
@property --ripple-start-width {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
@property --ripple-start-height {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
@property --toast-ref-x {
syntax: 'left | right | center';
inherits: false;
initial-value: left;
}
@property --toast-ref-y {
syntax: 'bottom | top';
inherits: false;
initial-value: bottom;
}
@property --toast-element-ref-x {
syntax: 'left | right | center';
inherits: false;
initial-value: right;
}
@property --toast-element-ref-y {
syntax: 'bottom | top | middle';
inherits: false;
initial-value: top;
}
@property --toast-offset-x {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
@property --toast-offset-y {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
@property --indicator-dot-ref-x {
syntax: 'left | right';
inherits: false;
initial-value: left;
}
@property --indicator-dot-ref-y {
syntax: 'bottom | top';
inherits: false;
initial-value: bottom;
}
@property --indicator-dot-element-ref-x {
syntax: 'left | right | center';
inherits: false;
initial-value: right;
}
@property --indicator-dot-element-ref-y {
syntax: 'bottom | top | middle';
inherits: false;
initial-value: top;
}
@property --indicator-dot-offset-x {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
@property --indicator-dot-offset-y {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
.custom-toast {
align-items: center;
background-color: var(--cros-sys-tertiary_container);
border-radius: 16px;
display: flex;
padding: 8px 12px;
position: fixed;
white-space: nowrap;
}
.custom-toast-text {
color: var(--cros-sys-on_tertiary_container);
font: var(--cros-annotation-1-font);
}
#new-feature-toast svg-wrapper {
color: var(--cros-sys-on_tertiary_container);
margin-inline: 0 8px;
}
#indicator-icon {
align-items: center;
color: var(--cros-sys-on_tertiary_container);
display: flex;
height: 20px;
justify-content: center;
margin-inline: 0 8px;
width: 20px;
}
#indicator-dot {
--dot-size: 8px;
background-color: var(--cros-sys-tertiary_container);
border-radius: 50%;
height: var(--dot-size);
position: absolute;
transform: translate(-50%, -50%);
width: var(--dot-size);
}
@keyframes ripple-scale {
0% {
transform: scale(0);
}
100% {
transform: scale(3);
}
}
@keyframes ripple-opacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.ripple {
--duration: 2s;
background: var(--cros-sys-ripple_primary);
border-radius: var(--border-radius-rounded-with-short-side);
opacity: 0;
pointer-events: none;
position: fixed;
transform-origin: center;
}
.ripple.animate {
animation: ripple-scale var(--duration) cubic-bezier(0.4, 0, 0, 1), ripple-opacity var(--duration) cubic-bezier(0, 0, 0.4, 1);
}
mode-selector[i18n-new-feature=new_preview_ocr_toast] {
--ripple-start-height: 20px;
--ripple-start-width: 54px;
--toast-ref-x: center;
--toast-element-ref-x: center;
--toast-offset-x: 0;
--toast-ref-y: bottom;
--toast-element-ref-y: top;
--toast-offset-y: -20px;
}