File: /var/www/vhost/disk-apps/pwa.sports-crowd.com/node_modules/@material/list/_mixins.scss
// Copyright 2016 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.
// stylelint-disable selector-class-pattern --
// Selector '.mdc-*' should only be used in this project.
@use 'sass:list';
@use 'sass:map';
@use '@material/density/functions' as density-functions;
@use '@material/dom/mixins' as dom-mixins;
@use '@material/rtl/rtl';
@use '@material/theme/theme';
@use '@material/shape/functions' as shape-functions;
@use '@material/shape/mixins' as shape-mixins;
@use '@material/ripple/ripple';
@use '@material/ripple/ripple-theme';
@use '@material/typography/typography';
@use '@material/feature-targeting/feature-targeting';
@use './variables';
@use '@material/theme/theme-color';
@use './evolution-mixins';
@mixin deprecated-core-styles($query: feature-targeting.all()) {
@include deprecated-without-ripple($query);
@include deprecated-ripple($query);
}
// This API is intended for use by frameworks that may want to separate the
// ripple-related styles from the other list styles. It is recommended that most
// users use `mdc-deprecated-list-core-styles` instead.
@mixin deprecated-without-ripple($query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);
$feat-structure: feature-targeting.create-target($query, structure);
$feat-typography: feature-targeting.create-target($query, typography);
$divider-color: if(
theme-color.tone(theme-color.$background) == 'dark',
variables.$deprecated-divider-color-on-dark-bg,
variables.$deprecated-divider-color-on-light-bg
);
.mdc-deprecated-list {
@include deprecated-base_($query);
}
@include deprecated-single-line-density(
variables.$deprecated-single-line-density-scale,
$query: $query
);
@include deprecated-item-secondary-text-ink-color(
text-secondary-on-background,
$query
);
@include deprecated-item-graphic-fill-color(transparent, $query);
@include deprecated-item-graphic-ink-color(text-icon-on-background, $query);
@include deprecated-item-meta-ink-color(text-hint-on-background, $query);
@include deprecated-group-subheader-ink-color(
text-primary-on-background,
$query
);
@include deprecated-item-disabled-text-opacity(
variables.$deprecated-text-disabled-opacity,
$query
);
@include deprecated-item-disabled-text-color(
variables.$deprecated-text-disabled-color,
$query
);
@include deprecated-item-selected-text-color(
variables.$deprecated-text-selected-color,
$query
);
.mdc-deprecated-list--dense {
@include feature-targeting.targets($feat-structure) {
padding-top: 4px;
padding-bottom: 4px;
font-size: 0.812rem;
}
}
.mdc-deprecated-list-item__wrapper {
@include feature-targeting.targets($feat-structure) {
display: block;
}
}
.mdc-deprecated-list-item {
@include feature-targeting.targets($feat-structure) {
@include deprecated-item-base_;
}
// For components using aria-activedescendant, the focus pseudoclass is
// never applied and use `.mdc-ripple-upgraded--background-focused` instead.
&:not(.mdc-deprecated-list-item--selected):focus::before,
&.mdc-ripple-upgraded--background-focused::before {
@include dom-mixins.transparent-border($query: $query);
}
&.mdc-deprecated-list-item--selected::before {
@include dom-mixins.transparent-border(
$border-width: 3px,
$border-style: double,
$query: $query
);
}
@include deprecated-list-item-padding-variant(
variables.$deprecated-textual-variant-config,
$query
);
@include deprecated-list-item-height-variant(
variables.$deprecated-textual-variant-config,
$query
);
.mdc-deprecated-list--icon-list & {
@include deprecated-list-item-padding-variant(
variables.$deprecated-icon-variant-config,
$query
);
@include deprecated-list-item-height-variant(
variables.$deprecated-icon-variant-config,
$query
);
}
.mdc-deprecated-list--avatar-list & {
@include deprecated-list-item-padding-variant(
variables.$deprecated-avatar-variant-config,
$query
);
@include deprecated-list-item-height-variant(
variables.$deprecated-avatar-variant-config,
$query
);
}
.mdc-deprecated-list--thumbnail-list & {
@include deprecated-list-item-padding-variant(
variables.$deprecated-thumbnail-variant-config,
$query
);
@include deprecated-list-item-height-variant(
variables.$deprecated-thumbnail-variant-config,
$query
);
}
.mdc-deprecated-list--image-list & {
@include deprecated-list-item-padding-variant(
variables.$deprecated-image-variant-config,
$query
);
@include deprecated-list-item-height-variant(
variables.$deprecated-image-variant-config,
$query
);
}
.mdc-deprecated-list--video-list & {
@include deprecated-list-item-padding-variant(
variables.$deprecated-video-variant-config,
$query
);
@include deprecated-list-item-height-variant(
variables.$deprecated-video-variant-config,
$query
);
}
}
// This is included here to preserve expected specificity behavior (avatar
// graphic styles must take priority).
// TODO(b/157038316): regroup this with density styles when nesting is fixed.
.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic {
@include deprecated-graphic-size-dense_(20px, $query);
}
.mdc-deprecated-list-item__graphic {
@include feature-targeting.targets($feat-structure) {
flex-shrink: 0;
align-items: center;
justify-content: center;
fill: currentColor;
object-fit: cover;
}
// TODO(b/156624966): this retains legacy spacing but should be updated.
@include deprecated-graphic-size-variant(
variables.$deprecated-deprecated-graphic-config,
$query
);
.mdc-deprecated-list--icon-list & {
@include deprecated-graphic-size-variant(
variables.$deprecated-icon-variant-config,
$query
);
}
.mdc-deprecated-list--avatar-list & {
@include deprecated-graphic-size-variant(
variables.$deprecated-avatar-variant-config,
$query
);
@include feature-targeting.targets($feat-structure) {
border-radius: 50%;
}
}
.mdc-deprecated-list--thumbnail-list & {
@include deprecated-graphic-size-variant(
variables.$deprecated-thumbnail-variant-config,
$query
);
}
.mdc-deprecated-list--image-list & {
@include deprecated-graphic-size-variant(
variables.$deprecated-image-variant-config,
$query
);
}
.mdc-deprecated-list--video-list & {
@include deprecated-graphic-size-variant(
variables.$deprecated-video-variant-config,
$query
);
}
}
// Extra specificity is to override .material-icons display style if used in
// conjunction with mdc-deprecated-list-item__graphic
.mdc-deprecated-list .mdc-deprecated-list-item__graphic {
@include feature-targeting.targets($feat-structure) {
display: inline-flex;
}
}
.mdc-deprecated-list-item__meta {
&:not(.material-icons) {
@include typography.typography(caption, $query);
}
@include feature-targeting.targets($feat-structure) {
@include rtl.ignore-next-line();
margin-left: auto;
@include rtl.ignore-next-line();
margin-right: 0;
@at-root {
.mdc-deprecated-list-item[dir='rtl'] &,
[dir='rtl'] .mdc-deprecated-list-item & {
@include rtl.ignore-next-line();
margin-left: 0;
@include rtl.ignore-next-line();
margin-right: auto;
}
}
}
}
.mdc-deprecated-list-item__text {
@include typography.overflow-ellipsis($query);
}
// Disable interaction on label elements that may automatically
// toggle corresponding checkbox / radio input.
.mdc-deprecated-list-item__text[for] {
@include feature-targeting.targets($feat-structure) {
pointer-events: none;
}
}
.mdc-deprecated-list-item__primary-text {
@include typography.overflow-ellipsis($query);
@include typography.text-baseline(
$top: variables.$deprecated-item-primary-text-baseline-height,
$bottom: variables.$deprecated-item-secondary-text-baseline-height,
$display: block,
$query: $query
);
.mdc-deprecated-list--video-list &,
.mdc-deprecated-list--image-list &,
.mdc-deprecated-list--thumbnail-list &,
.mdc-deprecated-list--avatar-list &,
.mdc-deprecated-list--icon-list & {
@include typography.text-baseline(
$top:
variables.$deprecated-item-primary-text-baseline-height-with-graphic,
$bottom: variables.$deprecated-item-secondary-text-baseline-height,
$query: $query
);
}
.mdc-deprecated-list--dense & {
@include typography.text-baseline(
$top: variables.$deprecated-dense-item-primary-text-baseline-height,
$bottom: variables.$deprecated-item-secondary-text-baseline-height,
$query: $query
);
}
}
.mdc-deprecated-list-item__secondary-text {
@include typography.typography(body2, $query);
@include typography.overflow-ellipsis($query);
@include typography.text-baseline(
$top: variables.$deprecated-item-secondary-text-baseline-height,
$display: block,
$query: $query
);
.mdc-deprecated-list--dense & {
@include feature-targeting.targets($feat-structure) {
font-size: inherit;
}
}
}
.mdc-deprecated-list--dense .mdc-deprecated-list-item {
@include feature-targeting.targets($feat-structure) {
height: 40px;
}
}
.mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {
@include feature-targeting.targets($feat-structure) {
align-self: flex-start;
}
}
.mdc-deprecated-list--two-line {
.mdc-deprecated-list-item {
@include feature-targeting.targets($feat-structure) {
height: variables.$deprecated-two-line-height;
}
}
&.mdc-deprecated-list--video-list .mdc-deprecated-list-item,
&.mdc-deprecated-list--image-list .mdc-deprecated-list-item,
&.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item,
&.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item,
&.mdc-deprecated-list--icon-list .mdc-deprecated-list-item {
@include feature-targeting.targets($feat-structure) {
height: variables.$deprecated-two-line-graphic-height;
}
}
// Icons in multiline lists are the only graphic that isn't centered.
&.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic {
@include feature-targeting.targets($feat-structure) {
align-self: flex-start;
margin-top: variables.$deprecated-two-line-icon-top-margin;
}
}
}
.mdc-deprecated-list--two-line.mdc-deprecated-list--dense
.mdc-deprecated-list-item,
.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense
.mdc-deprecated-list-item {
@include feature-targeting.targets($feat-structure) {
height: 60px;
}
}
.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense
.mdc-deprecated-list-item__graphic {
@include deprecated-graphic-size-dense_(36px, $query);
}
// Only change mouse cursor for list items which are not disabled.
:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {
@include feature-targeting.targets($feat-structure) {
cursor: pointer;
}
}
// stylelint-disable selector-max-type --
// Override anchor tag styles for the use-case of a list being used for navigation
a.mdc-deprecated-list-item {
@include feature-targeting.targets($feat-structure) {
color: inherit;
text-decoration: none;
}
}
// stylelint-enable selector-max-type
.mdc-deprecated-list-divider {
@include feature-targeting.targets($feat-structure) {
height: 0;
margin: 0;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
}
}
// Note: ideally we'd be able to hoist this to the top-level `$feat-color`,
// but doing so will cause the `border` declaration on
// `.mdc-deprecated-list-divider` above to override it.
@include deprecated-divider-color($divider-color, $query);
// Deprecated. Use the specialized inset classes instead.
// Items are fully inset using padding.
.mdc-deprecated-list-divider--padded {
@include deprecated-divider-inset-variant(
variables.$deprecated-textual-variant-config,
$use-padding: true,
$query: $query
);
}
// Deprecated. Use the specialized inset classes instead.
// Items's leading, but not trailing, edge is inset to account for *avatar*
// width.
.mdc-deprecated-list-divider--inset {
@include deprecated-divider-inset-variant(
variables.$deprecated-avatar-variant-config,
$trailing: false,
$query: $query
);
}
// Deprecated. Use the specialized inset classes instead.
// Item's leading and trailing edges are inset to account for *avatar* width.
.mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded {
@include deprecated-divider-inset-variant(
variables.$deprecated-avatar-variant-config,
$query: $query
);
}
.mdc-deprecated-list {
@include deprecated-divider-insets-variant(
variables.$deprecated-textual-variant-config,
$query: $query
);
}
.mdc-deprecated-list--icon-list {
@include deprecated-divider-insets-variant(
variables.$deprecated-icon-variant-config,
$query: $query
);
}
.mdc-deprecated-list--avatar-list {
@include deprecated-divider-insets-variant(
variables.$deprecated-avatar-variant-config,
$query: $query
);
}
.mdc-deprecated-list--thumbnail-list {
@include deprecated-divider-insets-variant(
variables.$deprecated-thumbnail-variant-config,
$query: $query
);
}
.mdc-deprecated-list--image-list {
@include deprecated-divider-insets-variant(
variables.$deprecated-image-variant-config,
$query: $query
);
}
.mdc-deprecated-list--video-list {
@include deprecated-divider-insets-variant(
variables.$deprecated-video-variant-config,
$query: $query
);
}
.mdc-deprecated-list-group {
@include feature-targeting.targets($feat-structure) {
// Cancel top/bottom padding on individual lists within group
.mdc-deprecated-list {
padding: 0;
}
}
}
.mdc-deprecated-list-group__subheader {
$list-subheader-virtual-height: 3rem;
$list-subheader-leading: map.get(
map.get(typography.$styles, body1),
line-height
);
$list-subheader-margin: calc(
(#{$list-subheader-virtual-height} - #{$list-subheader-leading}) / 2
);
@include typography.typography(subtitle1, $query);
@include feature-targeting.targets($feat-structure) {
margin: $list-subheader-margin variables.$deprecated-side-padding;
}
}
@include evolution-mixins.without-ripple($query: $query);
}
// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
// list styles. It is recommended that most users use `mdc-deprecated-list-core-styles` instead.
@mixin deprecated-ripple($query: feature-targeting.all()) {
@include ripple.common($query); // COPYBARA_COMMENT_THIS_LINE
// List items should support states by default, but it should be possible to opt out.
:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {
@include deprecated-item-interactive-ripple_($query);
}
@include evolution-mixins.with-ripple($query: $query);
}
///
/// Sets ripple color for a list item.
///
@mixin deprecated-ripple-states($color, $query: feature-targeting.all()) {
@include ripple-theme.states(
$color: $color,
$query: $query,
$ripple-target: variables.$deprecated-ripple-target
);
@include ripple-theme.states(
$color: $color,
$query: $query,
$ripple-target: variables.$deprecated-temporary-ripple-target
);
}
/// Sets the text color of the list item in selected or activated state.
/// @param {color} $color - The desired text color.
@mixin deprecated-item-selected-text-color(
$color,
$query: feature-targeting.all()
) {
// "Selected" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
// "Activated" is more permanent. E.g., the currently highlighted navigation destination in a drawer.
.mdc-deprecated-list-item--selected,
.mdc-deprecated-list-item--activated {
@include deprecated-item-primary-text-ink-color($color, $query: $query);
@include deprecated-item-graphic-ink-color($color, $query: $query);
}
}
@mixin deprecated-item-primary-text-ink-color(
$color,
$query: feature-targeting.all()
) {
$feat-color: feature-targeting.create-target($query, color);
@include feature-targeting.targets($feat-color) {
@include theme.property(color, $color);
}
}
@mixin deprecated-item-secondary-text-ink-color(
$color,
$query: feature-targeting.all()
) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-item__secondary-text {
@include feature-targeting.targets($feat-color) {
@include theme.property(color, $color);
}
}
}
@mixin deprecated-item-graphic-fill-color(
$color,
$query: feature-targeting.all()
) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-item__graphic {
@include feature-targeting.targets($feat-color) {
@include theme.property(background-color, $color);
}
}
}
@mixin deprecated-item-graphic-ink-color(
$color,
$query: feature-targeting.all()
) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-item__graphic {
@include feature-targeting.targets($feat-color) {
@include theme.property(color, $color);
}
}
}
@mixin deprecated-item-meta-ink-color($color, $query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-item__meta {
@include feature-targeting.targets($feat-color) {
@include theme.property(color, $color);
}
}
}
///
/// Sets shape radius (rounded) to single line list variant.
///
/// @param {Number | List<Number>} $radius Radius size in `px` or percentage. It can be 4 value corner or single radius.
/// Set to `50%` for rounded shape.
/// @param {Boolean} $rtl-reflexive Set to true to flip border radius in RTL context. Defaults to `false`.
/// @param {Number} $density-scale Density scale of single line list. Set this only when custom density is applied.
/// Defaults to `$mdc-deprecated-list-single-line-density-scale`.
///
/// @access public
///
@mixin deprecated-single-line-shape-radius(
$radius,
$rtl-reflexive: false,
$density-scale: variables.$deprecated-single-line-density-scale,
$query: feature-targeting.all()
) {
$height: density-functions.prop-value(
$density-config: variables.$deprecated-single-line-density-config,
$density-scale: $density-scale,
$property-name: height,
);
.mdc-deprecated-list-item {
@include shape-mixins.radius(
$radius,
$rtl-reflexive,
$component-height: $height,
$query: $query
);
}
}
@mixin deprecated-divider-color($color, $query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-divider {
@include feature-targeting.targets($feat-color) {
@include theme.property(border-bottom-color, $color);
}
}
}
@mixin deprecated-group-subheader-ink-color(
$color,
$query: feature-targeting.all()
) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-group__subheader {
@include feature-targeting.targets($feat-color) {
@include theme.property(color, $color);
}
}
}
@mixin deprecated-item-disabled-text-opacity(
$opacity,
$query: feature-targeting.all()
) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text {
@include feature-targeting.targets($feat-color) {
opacity: $opacity;
}
}
}
@mixin deprecated-item-disabled-text-color(
$color,
$query: feature-targeting.all()
) {
$feat-color: feature-targeting.create-target($query, color);
.mdc-deprecated-list-item--disabled {
.mdc-deprecated-list-item__text,
.mdc-deprecated-list-item__primary-text,
.mdc-deprecated-list-item__secondary-text {
@include feature-targeting.targets($feat-color) {
@include theme.property(color, $color);
}
}
}
}
///
/// Establishes each list item's padding using a variant config.
///
/// @param {Map} $variant-config The list variant's configuration.
///
/// @access public
///
@mixin deprecated-list-item-padding-variant(
$variant-config,
$query: feature-targeting.all()
) {
$leading-padding: map.get($variant-config, leading-padding);
@include deprecated-list-item-padding($leading-padding, $query);
}
///
/// Establishes each list item's padding.
///
/// @param {Number} $leading-padding The item's leading padding.
///
/// @access public
///
@mixin deprecated-list-item-padding(
$leading-padding,
$query: feature-targeting.all()
) {
$feat-structure: feature-targeting.create-target($query, structure);
@include feature-targeting.targets($feat-structure) {
@include rtl.reflexive-property(
padding,
$leading-padding,
variables.$deprecated-trailing-padding
);
}
}
///
/// Establishes each list item's single line height using a variant config.
///
/// @param {Map} $variant-config The list variant's configuration.
///
/// @access public
///
@mixin deprecated-list-item-height-variant(
$variant-config,
$query: feature-targeting.all()
) {
$single-line-height: map.get($variant-config, single-line-height);
@include deprecated-list-item-height($single-line-height, $query);
}
///
/// Establishes each list item's height.
///
/// @param {Number} $height The item's height.
///
/// @access public
///
@mixin deprecated-list-item-height($height, $query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);
@include feature-targeting.targets($feat-structure) {
height: $height;
}
}
///
/// Sets the trailing margin used by icons.
///
/// @param {Number} $margin The trailing margin applied to icons.
///
/// @access public
///
@mixin deprecated-icon-margin($margin, $query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);
@include feature-targeting.targets($feat-structure) {
.mdc-deprecated-list-item__graphic {
@include rtl.reflexive-box(margin, right, $margin);
}
}
}
///
/// Sets divider inset sizes for each list variant.
///
/// @param {Map} $variant-config The list variant's configuration.
///
/// @access public
///
@mixin deprecated-divider-insets-variant(
$variant-config,
$query: feature-targeting.all()
) {
$leading-padding: map.get($variant-config, leading-padding);
$text-offset: map.get($variant-config, text-offset);
@include deprecated-divider-insets($leading-padding, $text-offset, $query);
}
///
/// Sets divider inset sizes for each list variant.
///
/// @param {Number} $leading-padding The item's leading padding.
/// @param {Number} $text-offset The item's text offset.
///
/// @access public
///
@mixin deprecated-divider-insets(
$leading-padding,
$text-offset,
$query: feature-targeting.all()
) {
.mdc-deprecated-list-divider--inset-leading {
@include deprecated-divider-inset(
$leading-padding,
$text-offset,
$trailing: false,
$query: $query
);
}
.mdc-deprecated-list-divider--inset-trailing {
@include deprecated-divider-inset(
$leading-padding,
$text-offset,
$leading: false,
$query: $query
);
}
.mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing {
@include deprecated-divider-inset(
$leading-padding,
$text-offset,
$query: $query
);
}
.mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding {
@include deprecated-divider-inset(
$leading-padding,
$text-offset,
$trailing: false,
$use-padding: true,
$query: $query
);
}
.mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding {
@include deprecated-divider-inset(
$leading-padding,
$text-offset,
$use-padding: true,
$query: $query
);
}
}
// Sets the width and height of the graphic element using a variant config.
@mixin deprecated-graphic-size-variant(
$variant-config,
$query: feature-targeting.all()
) {
$leading-padding: map.get($variant-config, leading-padding);
$text-offset: map.get($variant-config, text-offset);
$width: map.get(map.get($variant-config, graphic-size), width);
$height: map.get(map.get($variant-config, graphic-size), height);
@include deprecated-graphic-size(
$leading-padding,
$text-offset,
$width,
$height,
$query
);
}
// Sets the width and height of the graphic element, as well as calculates the
// trailing margin for the graphic element such that the text is always offset
// from the item's leading edge by 72px, which is defined within the spec. If
// height isn't specified, the graphic is assumed to be square.
// TODO(b/155397992): restructure to use symmetric margins.
@mixin deprecated-graphic-size(
$leading-padding,
$text-offset,
$width,
$height,
$query: feature-targeting.all()
) {
$feat-structure: feature-targeting.create-target($query, structure);
$margin-value: max(
$text-offset - $leading-padding - $width,
$leading-padding
);
@include feature-targeting.targets($feat-structure) {
@include rtl.reflexive-box(margin, right, $margin-value);
width: $width;
height: $height;
}
}
// Deprecated. Supports legacy density styles.
@mixin deprecated-graphic-size-dense_($size, $query: feature-targeting.all()) {
@include deprecated-graphic-size(
$leading-padding: 16px,
$text-offset: 16px,
$width: $size,
$height: $size,
$query: $query
);
}
///
/// Computes the appropriate leading inset for a divider based on list type.
///
/// @param {String} $variant-config The list variant configuration.
/// @param {Boolean} $leading Whether to apply the leading inset.
/// @param {Boolean} $trailing Whether to apply the trailing inset.
/// @param {Boolean} $use-padding Whether to align with padding vs. text offset.
///
/// @access private
///
@mixin deprecated-divider-inset-variant(
$variant-config,
$leading: true,
$trailing: true,
$use-padding: false,
$query: feature-targeting.all()
) {
$leading-padding: map.get($variant-config, leading-padding);
$text-offset: map.get($variant-config, text-offset);
@include deprecated-divider-inset(
$leading-padding,
$text-offset,
$leading,
$trailing,
$use-padding,
$query
);
}
@mixin deprecated-divider-inset(
$leading-padding,
$text-offset,
$leading: true,
$trailing: true,
$use-padding: false,
$query: feature-targeting.all()
) {
$feat-structure: feature-targeting.create-target($query, structure);
$trailing-inset: if($trailing, variables.$deprecated-trailing-padding, 0);
$leading-inset: if(
$leading,
if($use-padding, $leading-padding, $text-offset),
0
);
@include feature-targeting.targets($feat-structure) {
@if $leading {
@include rtl.reflexive-box(margin, left, $leading-inset);
}
width: calc(100% - #{$leading-inset + $trailing-inset});
}
}
///
/// Sets density scale to single line list variant.
///
/// @param {Number} $density-scale Density scale for list. Supported density scales are `-4`, `-3`, `-2`, `-1` and `0`.
///
/// @access public
///
@mixin deprecated-single-line-density(
$density-scale,
$query: feature-targeting.all()
) {
$height: density-functions.prop-value(
$density-config: variables.$deprecated-single-line-density-config,
$density-scale: $density-scale,
$property-name: height,
);
.mdc-deprecated-list-item {
@include deprecated-single-line-height($height, $query: $query);
}
}
///
/// Sets height to single line list variant.
///
/// @param {Number} $height Height value in `px`.
///
/// @access public
///
@mixin deprecated-single-line-height($height, $query: feature-targeting.all()) {
$feat-structure: feature-targeting.create-target($query, structure);
@include feature-targeting.targets($feat-structure) {
height: $height;
}
}
//
// Private
//
@mixin deprecated-base_($query: feature-targeting.all()) {
$feat-color: feature-targeting.create-target($query, color);
$feat-structure: feature-targeting.create-target($query, structure);
$feat-typography: feature-targeting.create-target($query, typography);
@include typography.typography(subtitle1, $query);
@include feature-targeting.targets($feat-typography) {
// According to the mocks and stickersheet, the line-height is
// adjusted to 24px for text content, same as for body1.
/* @alternate */
line-height: map.get(map.get(typography.$styles, body1), line-height);
}
@include feature-targeting.targets($feat-structure) {
margin: 0;
padding: 8px 0;
list-style-type: none;
&:focus {
outline: none;
}
}
@include deprecated-item-primary-text-ink-color(
text-primary-on-background,
$query
);
}
@mixin deprecated-item-base_ {
display: flex;
position: relative;
align-items: center;
justify-content: flex-start;
overflow: hidden;
padding: 0;
&:focus {
outline: none;
}
}
// Ripple styles for an interactive list item (one that is enabled and inside an interactive list).
@mixin deprecated-item-interactive-ripple_($query: feature-targeting.all()) {
@include ripple.surface(
$ripple-target: variables.$deprecated-ripple-target,
$query: $query
);
@include ripple.surface(
$ripple-target: variables.$deprecated-temporary-ripple-target,
$query: $query
);
@include ripple.radius-bounded(
$ripple-target: variables.$deprecated-ripple-target,
$query: $query
);
@include ripple.radius-bounded(
$ripple-target: variables.$deprecated-temporary-ripple-target,
$query: $query
);
@include ripple-theme.states(
theme-color.prop-value(on-surface),
false,
$ripple-target: variables.$deprecated-ripple-target,
$query: $query
);
@include ripple-theme.states(
theme-color.prop-value(on-surface),
false,
$ripple-target: variables.$deprecated-temporary-ripple-target,
$query: $query
);
@include ripple-theme.states-activated(
primary,
false,
$ripple-target: variables.$deprecated-ripple-target,
$query: $query
);
@include ripple-theme.states-activated(
primary,
false,
$ripple-target: variables.$deprecated-temporary-ripple-target,
$query: $query
);
@include ripple-theme.states-selected(
primary,
false,
$ripple-target: variables.$deprecated-ripple-target,
$query: $query
);
@include ripple-theme.states-selected(
primary,
false,
$ripple-target: variables.$deprecated-temporary-ripple-target,
$query: $query
);
#{variables.$deprecated-ripple-target},
#{variables.$deprecated-temporary-ripple-target} {
@include ripple.target-common($query: $query);
}
}