195 lines
8.5 KiB
SCSS
195 lines
8.5 KiB
SCSS
//
|
|
// Copyright 2017 Google Inc.
|
|
//
|
|
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
// of this software and associated documentation files (the "Software"), to deal
|
|
// in the Software without restriction, including without limitation the rights
|
|
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
// copies of the Software, and to permit persons to whom the Software is
|
|
// furnished to do so, subject to the following conditions:
|
|
//
|
|
// The above copyright notice and this permission notice shall be included in
|
|
// all copies or substantial portions of the Software.
|
|
//
|
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
// THE SOFTWARE.
|
|
//
|
|
|
|
@use 'sass:math';
|
|
@use 'sass:color';
|
|
@use '@material/density/variables' as density-variables;
|
|
@use '@material/floating-label/variables' as floating-label-variables;
|
|
@use '@material/notched-outline/variables' as notched-outline-variables;
|
|
@use '@material/theme/theme-color';
|
|
|
|
///
|
|
/// Returns outlined text field floating label position for given height.
|
|
///
|
|
/// @todo Instead of adjusting `$positionY` with label box height that might change based on floating label font size
|
|
/// wrap label in a child element to apply `transitionY(-50%)` to automatically offset based on box height.
|
|
///
|
|
@function get-outlined-label-position-y($text-field-height) {
|
|
@return math.div($text-field-height, 2) +
|
|
math.div(notched-outline-variables.$label-box-height, 2);
|
|
}
|
|
|
|
$error: error !default;
|
|
$disabled-border: rgba(theme-color.prop-value(on-surface), 0.06) !default;
|
|
$disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3) !default;
|
|
$bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87) !default;
|
|
$bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42) !default;
|
|
$label: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
|
|
|
$ink-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;
|
|
$helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
|
$icon-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;
|
|
$focused-label-color: rgba(theme-color.prop-value(primary), 0.87) !default;
|
|
$placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;
|
|
$affix-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
|
|
|
$disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
|
$disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
|
$disabled-placeholder-ink-color: rgba(
|
|
theme-color.prop-value(on-surface),
|
|
0.38
|
|
) !default;
|
|
$disabled-helper-text-color: rgba(
|
|
theme-color.prop-value(on-surface),
|
|
0.38
|
|
) !default;
|
|
$disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
|
|
|
$background: color.mix(
|
|
theme-color.prop-value(on-surface),
|
|
theme-color.prop-value(surface),
|
|
4%
|
|
) !default;
|
|
$disabled-background: color.mix(
|
|
theme-color.prop-value(on-surface),
|
|
theme-color.prop-value(surface),
|
|
2%
|
|
) !default;
|
|
$secondary-text: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
|
|
|
$outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
|
$outlined-disabled-border: rgba(
|
|
theme-color.prop-value(on-surface),
|
|
0.06
|
|
) !default;
|
|
$outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87) !default;
|
|
|
|
$textarea-border: rgba(theme-color.prop-value(on-surface), 0.73) !default;
|
|
$textarea-background: rgba(theme-color.prop-value(surface), 1) !default;
|
|
$textarea-disabled-border-color: rgba(
|
|
theme-color.prop-value(on-surface),
|
|
0.26
|
|
) !default;
|
|
// cannot be transparent because multiline textarea input
|
|
// will make text unreadable
|
|
$textarea-disabled-background: rgba(249, 249, 249, 1) !default;
|
|
|
|
$ripple-target: '.mdc-text-field__ripple';
|
|
$outlined-stroke-width: 2px !default;
|
|
$height: 56px !default;
|
|
$minimum-height: 40px !default;
|
|
$minimum-height-for-filled-label: 52px !default;
|
|
$maximum-height: $height !default;
|
|
$padding-horizontal: 16px !default;
|
|
$density-scale: density-variables.$default-scale !default;
|
|
$density-config: (
|
|
height: (
|
|
default: $height,
|
|
maximum: $maximum-height,
|
|
minimum: $minimum-height,
|
|
),
|
|
) !default;
|
|
$shape-radius: small !default;
|
|
$label-position-y: floating-label-variables.$position-y !default;
|
|
$label-offset: 16px !default;
|
|
// TODO(b/154350788): Remove this variable, it's not used internally but it is
|
|
// externally in Angular
|
|
/// @deprecated this variable will be removed in the future.
|
|
/// Use get-outlined-label-position-y($height) instead
|
|
$outlined-label-position-y: get-outlined-label-position-y($height) !default;
|
|
$outlined-with-leading-icon-label-position-x: 32px !default;
|
|
$textarea-outlined-label-position-y: 24.75px !default; // visually ~4dp from top to baseline
|
|
$textarea-filled-label-position-y: 10.25px !default; // visually ~20dp from top to label baseline
|
|
$helper-line-padding: 16px !default;
|
|
$filled-baseline-top: 40px !default;
|
|
$input-height: 28px !default;
|
|
$textarea-label-top: 19px !default; // visually ~32dp from top to label baseline
|
|
$textarea-outlined-label-top: $textarea-label-top -
|
|
notched-outline-variables.$border-width !default;
|
|
$textarea-line-height: 1.5rem !default; // 24dp from baseline to baseline
|
|
$textarea-input-handle-margin: 1px !default;
|
|
// Outlined textarea's first line should be placed at the same position as
|
|
// outlined textfield, and should look identical if it is 1 row. Since textfield
|
|
// is centered and font metrics vary for where the baseline is, the best way to
|
|
// ensure textarea and textfield align is with padding. At 56px height with a
|
|
// 24px line-height, a centered textfield has 16px of top and bottom padding.
|
|
// Textarea should use this to position itself.
|
|
$textarea-outlined-input-margin-top: 16px !default;
|
|
$textarea-outlined-input-margin-bottom: 16px !default;
|
|
$textarea-outlined-density-config: (
|
|
margin-top: (
|
|
default: $textarea-outlined-input-margin-top,
|
|
maximum: $textarea-outlined-input-margin-top,
|
|
minimum: $textarea-outlined-input-margin-top - 8,
|
|
),
|
|
margin-bottom: (
|
|
default: $textarea-outlined-input-margin-bottom,
|
|
maximum: $textarea-outlined-input-margin-bottom,
|
|
minimum: $textarea-outlined-input-margin-bottom - 8,
|
|
),
|
|
) !default; // remove 1/2 of scale to -4 for minimum
|
|
$textarea-outlined-label-density-config: (
|
|
top: (
|
|
default: $textarea-outlined-label-top,
|
|
maximum: $textarea-outlined-label-top,
|
|
minimum: $textarea-outlined-label-top - 8,
|
|
),
|
|
) !default; // remove 1/2 of scale to -4 for minimum
|
|
$textarea-filled-input-margin-top: 23px !default; // visually ~40dp from top to baseline
|
|
$textarea-filled-input-margin-bottom: 9px !default; // visually ~16dp from baseline to bottom
|
|
$textarea-filled-density-config: (
|
|
margin-bottom: (
|
|
default: $textarea-filled-input-margin-bottom,
|
|
maximum: $textarea-filled-input-margin-bottom,
|
|
minimum: $textarea-filled-input-margin-bottom - 4,
|
|
),
|
|
) !default; // scale to -1 for minimum
|
|
$textarea-filled-label-density-config: (
|
|
top: (
|
|
default: $textarea-label-top,
|
|
maximum: $textarea-label-top,
|
|
minimum: $textarea-label-top - 2,
|
|
),
|
|
) !default; // remove 1/2 of scale to -1 for minimm
|
|
$textarea-filled-no-label-input-margin-top: 16px !default; // see above explanation for outlined textarea margin
|
|
$textarea-filled-no-label-input-margin-bottom: 16px !default; // see above explanation for outlined textarea margin
|
|
$textarea-filled-no-label-density-config: (
|
|
margin-top: (
|
|
default: $textarea-filled-no-label-input-margin-top,
|
|
maximum: $textarea-filled-no-label-input-margin-top,
|
|
minimum: $textarea-filled-no-label-input-margin-top - 8,
|
|
),
|
|
margin-bottom: (
|
|
default: $textarea-filled-no-label-input-margin-bottom,
|
|
maximum: $textarea-filled-no-label-input-margin-bottom,
|
|
minimum: $textarea-filled-no-label-input-margin-bottom - 8,
|
|
),
|
|
) !default; // remove 1/2 of scale to -4 for minimum
|
|
$textarea-internal-counter-input-margin-bottom: 2px !default; // visually ~20dp from baseline to counter baseline
|
|
$textarea-internal-counter-baseline-bottom: 16px !default;
|
|
// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.
|
|
|
|
$prefix-padding: 2px !default;
|
|
$prefix-end-aligned-padding: 12px !default;
|
|
$suffix-padding: 12px !default;
|
|
$suffix-end-aligned-padding: 2px !default;
|