@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/wc_scss/settings/list-item.scss

@@ -0,0 +1,86 @@
+$list__class: "md-list";
+$list-item__class: "md-list-item";
+
+$list-item__color: $md-black-100;
+$list-item__color--dark: $md-white-100;
+$list-item__icon-size: rem-calc(20);
+$list-item__font-size: rem-calc(16);
+$list-item__line-height: rem-calc(24);
+$list-item__font-size--subheader: rem-calc(12);
+$list-item__line-height--subheader: rem-calc(18);
+$list-item__color--subheader: $black-60;
+$list-item__color--subheader--dark: $white-60;
+$list-item__opacity--disabled: 0.2;
+
+// Normal List
+$list-item__height: rem-calc(44);
+$list-item__padding: (0 rem-calc(16));
+$list-item__padding--focus: (0 rem-calc(14));
+$list-item__section-margin-side: rem-calc(16);
+$list-item__background: transparent;
+$list-item__background--dark: transparent;
+$list-item__background--hover: $md-theme-10 !default;
+$list-item__background--hover--dark: $white-08 !default;
+$list-item__background--pressed: $md-theme-20 !default;
+$list-item__background--pressed--dark: $white-16 !default;
+$list-item__avatar__dimension: rem-calc(28) !default;
+$list-item__avatar__font-size: rem-calc(10);
+$list-item-separator: rem-calc(1) solid $black-08;
+$list-item-separator--dark: rem-calc(1) solid $white-08;
+
+// Contrast List
+$list-item__color--contrast: $md-black-100;
+$list-item__color--dark--contrast: $md-white-100;
+$list-item__color--dark--active--contrast: $md-black-100;
+$list-item__color--subheader--contrast: $black-60;
+$list-item__color--subheader--dark--contrast: $md-white-100;
+$list-item__background--contrast: transparent;
+$list-item__background--dark--contrast: transparent;
+$list-item__background--hover--contrast: $md-theme-10;
+$list-item__background--hover--dark--contrast: $white-12;
+$list-item__background--active--contrast: $md-theme-10;
+$list-item__background--active--dark--contrast: $md-white-100;
+
+// Small List
+$list-item--small__height: rem-calc(36);
+$list-item--small__padding: (rem-calc(8) rem-calc(10));
+$list-item--small__section-margin-side: rem-calc(10);
+
+// Large List
+$list-item--large__height: rem-calc(52);
+$list-item--large__section-margin-side: rem-calc(18);
+$list-item--large__avatar__dimension: rem-calc(28) !default;
+$list-item--large__background--pressed: $black-12 !default;
+
+// XLarge List
+$list-item--xlarge__height: rem-calc(60);
+
+// Search List
+$list-item--search__min-height: rem-calc(60);
+$list-item--search__max-height: rem-calc(82);
+$list-item__search__padding: (rem-calc(7) rem-calc(14));
+
+// Space List
+$list-item--space__section-margin-side: rem-calc(14);
+$list-item--space__padding: (0 rem-calc(28) 0 rem-calc(14));
+$list-item--space__background: transparent;
+$list-item--space__avatar__dimension: rem-calc(40) !default;
+$list-item--space__avatar__font-size: rem-calc(14) !default;
+$list-item--space__background--hover: $white-12 !default;
+$list-item--space__background--pressed: $white-24 !default;
+$list-item--space__color: $md-white-100;
+$list-item--space__color--header: $white-60 !default;
+
+// List Header
+$list-item-header__height: rem-calc(38);
+$list-item-header__padding: (0 rem-calc(14));
+$list-item-header__margin: (rem-calc(8) 0 0 0);
+$list-item-header__color: $black-80;
+$list-item-header__color--dark: $white-80;
+
+// Space Meeting
+$list-item--space-meeting__padding: (0 rem-calc(12) 0 rem-calc(14));
+
+// Space Meeting
+$list-item--space-overview__height: rem-calc(44);
+$list-item--space-overview__padding: (0 rem-calc(15));

package/src/wc_scss/settings/list.scss

@@ -0,0 +1,10 @@
+$list-item__color: $md-black-100;
+$list-item__color--dark: $md-white-100;
+$list-item__icon-size: rem-calc(20);
+$list-item__font-size: rem-calc(16);
+$list-item__line-height: rem-calc(24);
+$list-item__font-size--subheader: rem-calc(12);
+$list-item__line-height--subheader: rem-calc(18);
+$list-item__color--subheader: $black-60;
+$list-item__color--subheader--dark: $white-60;
+$list-item__opacity--disabled: 0.2;

package/src/wc_scss/settings/media.scss

@@ -0,0 +1,116 @@
+$small-breakpoint: em-calc(640);
+$medium-breakpoint: em-calc(1024);
+$large-breakpoint: em-calc(1440);
+$xlarge-breakpoint: em-calc(1920);
+
+$small-range: (0, $small-breakpoint);
+$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint);
+$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint);
+$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint);
+$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
+
+$vertical-small-breakpoint: em-calc(600);
+$vertical-medium-breakpoint: em-calc(800);
+
+$vertical-small-range: (0, $vertical-small-breakpoint);
+$vertical-medium-range: (
+  $vertical-small-breakpoint + em-calc(1),
+  $vertical-medium-breakpoint
+);
+$vertical-large-range: (
+  $vertical-medium-breakpoint + em-calc(1),
+  em-calc(99999999)
+);
+
+$screen: "only screen";
+
+$landscape: "#{$screen} and (orientation: landscape)";
+$portrait: "#{$screen} and (orientation: portrait)";
+
+$small-up: $screen;
+$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
+
+$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
+$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
+
+$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
+$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
+
+$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
+$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
+
+$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
+$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
+
+$v-small-only: "#{$screen} and (max-height: #{$vertical-small-breakpoint})";
+$v-medium-only: "#{$screen} and (min-height:#{lower-bound($vertical-medium-range)}) and (max-height:#{upper-bound($vertical-medium-range)})";
+$v-medium-down: "#{$screen} and (max-height:#{upper-bound($vertical-medium-range)})";
+
+$retina: (
+  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+  "#{$screen} and (min-device-pixel-ratio: 2)",
+  "#{$screen} and (min-resolution: 192dpi)",
+  "#{$screen} and (min-resolution: 2dppx)"
+);
+
+// Legacy
+$small: $medium-up;
+$medium: $medium-up;
+$large: $large-up;
+
+$screen-xs: 480px;
+$screen-xs-min: $screen-xs;
+$screen-phone: $screen-xs-min;
+
+// Small screen / tablet
+// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
+$screen-sm: $small-breakpoint;
+$screen-sm-min: $screen-sm;
+$screen-tablet: $screen-sm-min;
+
+// Medium screen / desktop
+// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
+$screen-md: $medium-breakpoint;
+$screen-md-min: $screen-md;
+$screen-desktop: $screen-md-min;
+
+// Large screen / wide desktop
+// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
+$screen-lg: $large-breakpoint;
+$screen-lg-min: $screen-lg;
+$screen-lg-desktop: $screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1);
+$screen-sm-max: ($screen-md-min - 1);
+$screen-md-max: ($screen-lg-min - 1);
+
+$grid-float-breakpoint-max: ($screen-sm-min - 1);
+
+/**
+ * @component variables
+ * @section mediaqueries
+ *
+ * @variable $screen - screens only
+ * @variable $landscape - landscape orientation
+ * @variable $portrait - portrait orientation
+ * @variable $small-up - screens 0px width and larger
+ * @variable $small-only - small screens from 0 - 640px width
+ * @variable $medium-up - screens 640px and larger
+ * @variable $medium-only - screens 640px to 1024px
+ * @variable $large-up - screens 1025px and larger
+ * @variable $large-only - screens 1025px to 1440px
+ * @variable $xlarge-up - screens 1441px and larger
+ * @variable $xlarge-only - screens 1441px to 1920px
+ * @variable $xxlarge-up - screens 1921px and larger
+ * @variable $xxlarge-only - same as $xxlarge-up
+ * @variable $retina - retina screens
+ *
+ * @scss
+ *    @media #{$medium-up} {
+ *      **Media specific styles**
+ *    }
+ *
+ */

package/src/wc_scss/settings/overlay.scss

@@ -0,0 +1,6 @@
+$event-overlay__shadow: 0 4px 12px 0 $black-16;
+$event-overlay__border-color: $md-gray-30;
+$event-overlay__border: inset 0 0 0 1px var(--md-background-quaternary, $event-overlay__border-color);
+$event-overlay-arrow__width: 20px;
+$event-overlay-arrow__height: 14px;
+$event-overlay__border-radius: 5px;

package/src/wc_scss/settings/rem.scss

@@ -0,0 +1 @@
+$rem-base: 16px;

package/src/wc_scss/settings/z-index.scss

@@ -0,0 +1,9 @@
+$zindex-sidebar: 1000;
+$zindex-drawer: 1000;
+$zindex-top-bar: 1005;
+$zindex-close: 1015;
+$zindex-popover: 1020;
+$zindex-tooltip: 1030;
+$zindex-top-bar-fixed: 1030;
+$zindex-modal-background: 1040;
+$zindex-modal: 1050;

package/src/wc_scss/themes/global--dark.scss

@@ -0,0 +1,87 @@
+@import "@/wc_scss/colors/settings.scss";
+
+@mixin global-vars {
+  --sandbox-bg-color: #{$md-gray-80};
+  --sandbox-secondary-bg-color: #{$md-gray-100};
+  --main-bg-color: #{$md-gray-100};
+
+  --md-default-focus-outline-color: #{$md-blue-40};
+
+  // New Backgrounds
+  --md-primary-bg-color: #{$md-gray-100};
+  --md-primary-one-bg-color: #{$md-gray-95};
+  --md-primary-two-bg-color: #{$md-gray-90};
+
+  --md-secondary-bg-color: #{$md-gray-100};
+  --md-secondary-one-bg-color: #{$md-gray-95};
+  --md-secondary-two-bg-color: #{$md-gray-90};
+  --md-secondary-three-bg-color: #{$md-gray-80};
+
+  --md-tertiary-bg-color: #{$md-gray-90};
+  --md-tertiary-one-bg-color: #{$md-gray-95};
+  --md-tertiary-two-bg-color: #{$md-gray-80};
+
+  --md-quaternary-bg-color: #{$md-gray-80};
+  --md-quaternary-one-bg-color: #{$md-gray-60};
+  --md-quaternary-two-bg-color: #{$md-gray-90};
+
+  --md-conference-chat-bg-color: #{$md-slate-90};
+
+  // Old Backgrounds (deprecated)
+  --md-secondary-white-bg-color: #{$md-gray-95}; // use --md-primary-one-bg-color
+  --md-tertiary-white-bg-color: #{$md-gray-90}; // use --md-primary-two-bg-color
+
+  --md-primary-success-bg-color: #{$md-mint-70};
+  --md-primary-success-text-color: #{$md-mint-20};
+
+  --md-primary-text-color: #{$md-gray-05};
+  --md-secondary-text-color: #{$md-gray-40};
+  --md-disabled-text-color: #{$md-gray-70};
+  --md-highlight-text-color: #{$md-theme-80};
+  --md-hyperlink-text-color: #{$md-theme-40};
+  --md-hyperlink-hover-text-color: #{$md-theme-20};
+  --md-hyperlink-focus-text-color: #{$md-theme-40};
+
+  --md-focus-border-color: #{$md-blue-40};
+
+  --md-primary-seperator-color: #{$md-gray-70};
+  --md-secondary-seperator-color: #{$md-gray-60};
+
+  --md-alert-error-bg-color: #{$md-red-80};
+  --md-alert-error-text-color: #{$md-red-40};
+  --md-alert-warning-bg-color: #{$md-yellow-80};
+  --md-alert-warning-text-color: #{$md-yellow-40};
+  --md-alert-success-bg-color: #{$md-green-80};
+  --md-alert-success-text-color: #{$md-green-40};
+  --md-alert-info-bg-color: #{$md-blue-80};
+  --md-alert-info-text-color: #{$md-blue-40};
+
+  --md-presence-active-bg-color: #{$md-green-50};
+  --md-presence-do-not-disturb-bg-color: #{$md-red-60};
+  --md-presence-away-bg-color: #{$md-gray-30};
+  --md-presence-busy-bg-color: #{$md-yellow-40};
+
+  --md-email-composer-bg-color: #{$md-gray-95};
+  --md-email-composer-thread-bar-color: #{$md-violet-40};
+  --md-email-composer-ccChip-bg-color: #{$md-gray-90};
+
+  --md-interaction-history-bg-color: #{$md-gray-95};
+
+  --md-auto-wrapup-bg-color: #{$md-blue-90};
+  --md-menu-overlay-border-color: #{$md-gray-80};
+
+  --md-dynamic-layout-button-border-color: #{$md-gray-70};
+  --md-dynamic-layout-button-inverted-border-color: #{$md-gray-10};
+
+  --md-nav-tab-hover-bg-color: #{$md-gray-80};
+  --md-nav-tab-active-bg-color: #{$md-gray-70};
+
+  --md-input-bg-color: #{$md-gray-95};
+  --md-input-chat-length-indicator-bg-color: #{$md-gray-90};
+  --md-input-chat-length-indicator-color: #{$md-gray-40};
+  --md-input-chat-bg-color: #{$md-gray-90};
+  --md-input-chat-color: #{$md-gray-05};
+  --md-input-chat-error-color: #{$md-red-50};
+  --md-webex-chat-disable-bg-color: #{$md-gray-90};
+  --md-webex-chat-disable-color: #{$md-gray-70};
+}

package/src/wc_scss/themes/global--light.scss

@@ -0,0 +1,87 @@
+@import "@/wc_scss/colors/settings.scss";
+
+@mixin global-vars {
+  --sandbox-bg-color: #{$md-gray-20};
+  --sandbox-secondary-bg-color: #e5e5e5;
+  --main-bg-color: #{$md-gray-10};
+
+  --md-default-focus-outline-color: #{$md-blue-60};
+
+  // New Backgrounds
+  --md-primary-bg-color: #{$md-white};
+  --md-primary-one-bg-color: #{$md-white};
+  --md-primary-two-bg-color: #{$md-white};
+
+  --md-secondary-bg-color: #{$md-gray-05};
+  --md-secondary-one-bg-color: #{$md-gray-05};
+  --md-secondary-two-bg-color: #{$md-gray-05};
+  --md-secondary-three-bg-color: #{$md-gray-05};
+
+  --md-tertiary-bg-color: #{$md-gray-10};
+  --md-tertiary-one-bg-color: #{$md-gray-10};
+  --md-tertiary-two-bg-color: #{$md-gray-10};
+
+  --md-quaternary-bg-color: #{$md-gray-20};
+  --md-quaternary-one-bg-color: #{$md-gray-20};
+  --md-quaternary-two-bg-color: #{$md-gray-20};
+
+  --md-conference-chat-bg-color: #{$md-slate-10};
+
+  // Old Backgrounds (deprecated)
+  --md-secondary-white-bg-color: #{$md-white}; // use --md-primary-one-bg-color
+  --md-tertiary-white-bg-color: #{$md-white}; // use --md-primary-two-bg-color
+
+  --md-primary-success-bg-color: #{$md-green-10};
+  --md-primary-success-text-color: #{$md-green-70};
+
+  --md-primary-text-color: #{$md-gray-100};
+  --md-secondary-text-color: #{$md-gray-70};
+  --md-disabled-text-color: #{$md-gray-40};
+  --md-highlight-text-color: #{$md-theme-20};
+  --md-hyperlink-text-color: #{$md-theme-70};
+  --md-hyperlink-hover-text-color: #{$md-theme-90};
+  --md-hyperlink-focus-text-color: #{$md-theme-70};
+
+  --md-focus-border-color: #{$md-blue-70};
+
+  --md-primary-seperator-color: #{$md-gray-30};
+  --md-secondary-seperator-color: #{$md-gray-40};
+
+  --md-alert-error-bg-color: #{$md-red-10};
+  --md-alert-error-text-color: #{$md-red-70};
+  --md-alert-warning-bg-color: #{$md-yellow-10};
+  --md-alert-warning-text-color: #{$md-yellow-70};
+  --md-alert-success-bg-color: #{$md-green-10};
+  --md-alert-success-text-color: #{$md-green-70};
+  --md-alert-info-bg-color: #{$md-blue-10};
+  --md-alert-info-text-color: #{$md-blue-70};
+
+  --md-presence-active-bg-color: #{$md-green-50};
+  --md-presence-do-not-disturb-bg-color: #{$md-red-60};
+  --md-presence-away-bg-color: #{$md-gray-30};
+  --md-presence-busy-bg-color: #{$md-yellow-40};
+
+  --md-email-composer-bg-color: #{$md-white-100};
+  --md-email-composer-thread-bar-color: #{$md-violet-70};
+  --md-email-composer-ccChip-bg-color: #{$md-gray-05};
+
+  --md-interaction-history-bg-color: #{$md-gray-05};
+
+  --md-auto-wrapup-bg-color: #{$md-blue-05};
+  --md-menu-overlay-border-color: #{$md-gray-20};
+
+  --md-dynamic-layout-button-border-color: #{$md-gray-10};
+  --md-dynamic-layout-button-inverted-border-color: #{$md-gray-70};
+
+  --md-nav-tab-hover-bg-color: #{$md-gray-10};
+  --md-nav-tab-active-bg-color: #{$md-gray-20};
+
+  --md-input-bg-color: #{$md-white-100};
+  --md-input-chat-length-indicator-bg-color: #{$md-white-100};
+  --md-input-chat-length-indicator-color: #{$md-gray-70};
+  --md-input-chat-bg-color: #{$md-white-100};
+  --md-input-chat-color: #{$md-gray-100};
+  --md-input-chat-error-color: #A12512;
+  --md-webex-chat-disable-bg-color: #{$md-gray-20};
+  --md-webex-chat-disable-color: #{$md-gray-40};
+}

package/src/wc_scss/themes/global--lm.scss

@@ -0,0 +1,4 @@
+@mixin global-theme-specfic-vars {
+  --rem-base: 14px;
+  font-size: var(--rem-base);
+}

package/src/wc_scss/themes/global--md.scss

@@ -0,0 +1,4 @@
+@mixin global-theme-specfic-vars {
+  --rem-base: 16px;
+  font-size: var(--rem-base);
+}

package/src/wc_scss/tools/functions/core.scss

@@ -0,0 +1,181 @@
+@import "../../settings/rem";
+
+@function char($iso-char) {
+  @return unquote('"\\e#{$iso-char}"');
+}
+
+$modules: () !default;
+
+@mixin exports($name) {
+  // Import from global scope
+  $modules: $modules;
+  // Check if a module is already on the list
+  $module_index: index($modules, $name);
+
+  @if (($module_index == null) or ($module_index == false)) {
+    $modules: append($modules, $name);
+
+    @content;
+  }
+}
+
+//===============================================
+// VARS
+//===============================================
+// rem base value (16px)
+//$rem-base: $rem-base;
+
+// base unit in rems
+//$base-rem: rem-calc($rem-base) / 2;
+
+// 6 = (6 x base unit)
+//$base-scale: 6;
+
+// this value has to be adjusted to the font used or 0 to use line-height
+//$base-line-height: $base-rem * $base-scale / 1rem;
+
+// calculate base unit from scale, and rem base (4)
+//$base-unit: $base-line-height / $base-scale * $rem-base;
+
+//===============================================
+// FUNCTIONS
+//===============================================
+
+// convert px to em
+@function em($px: 0, $font-size: $rem-base) {
+  @return $px / $font-size + em;
+}
+
+// convert unitless or px to rem
+@function rem($val) {
+  @if unit($val) == "px" or unitless($val) {
+    @return rem-calc($val);
+  } @else if unit($val) == "rem" {
+    @return $val;
+  } @else {
+    @warn "`#{$val}` is not a supported try a px or rem value";
+
+    @return false;
+  }
+}
+
+// convert rem to px
+@function px($val, $base: $rem-base) {
+  @if unitless($val) {
+    @return $val * 1px;
+  }
+
+  @if unit($val) == "px" {
+    @return $val;
+  } @else if unit($val) == "rem" {
+    @return $val * $base / 1rem;
+  } @else {
+    @warn "`#{$val}` is not a supported try a px or rem value";
+
+    @return false;
+  }
+}
+
+// find the nearest ceiling rem value to a baseline unit
+@function vr-adjust($val: 1px, $remove: 0, $base-unit: rem($base-unit)) {
+  @return ceil(rem($val) / $base-unit) * $base-unit - rem($remove);
+}
+
+// round to the nearest specified number
+@function round-to($val, $unit: $base-unit) {
+  @return round($val / $unit) * $unit;
+}
+
+@function lower-bound($range) {
+  @if length($range) <= 0 {
+    @return 0;
+  }
+
+  @return nth($range, 1);
+}
+
+@function upper-bound($range) {
+  @if length($range) < 2 {
+    @return 999999999999;
+  }
+
+  @return nth($range, 2);
+}
+
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+@function text-inputs($types: all, $selector: input) {
+  $return: ();
+
+  $all-text-input-types: text password date datetime datetime-local month week
+    email number search tel time url color textarea;
+
+  @if $types == all {
+    $types: $all-text-input-types;
+  }
+
+  @each $type in $types {
+    @if $type == textarea {
+      @if $selector == input {
+        $return: append($return, unquote("#{$type}"), comma);
+      } @else {
+        $return: append($return, unquote("#{$type}#{$selector}"), comma);
+      }
+    } @else {
+      $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma);
+    }
+  }
+
+  @return $return;
+}
+
+@function convert-to-rem($value, $base-value: $rem-base) {
+  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
+
+  @if ($value == 0) {
+    $value: 0;
+  } // Turn 0rem into 0
+
+  @return $value;
+}
+
+@function data($attr) {
+  @return "[data-" + $attr + "]";
+}
+
+@function rem-calc($values, $base-value: $rem-base) {
+  $max: length($values);
+
+  @if $max == 1 {
+    @return convert-to-rem(nth($values, 1), $base-value);
+  }
+
+  $remValues: ();
+
+  @for $i from 1 through $max {
+    $remValues: append($remValues,
+    convert-to-rem(nth($values, $i), $base-value));
+  }
+
+  @return $remValues;
+}
+
+@function em-calc($values) {
+  $remValues: rem-calc($values);
+
+  $max: length($remValues);
+
+  @if $max == 1 {
+    @return strip-unit(nth($remValues, 1)) * 1em;
+  }
+
+  $emValues: ();
+
+  @for $i from 1 through $max {
+    $emValues: append($emValues, strip-unit(nth($remValues, $i)) * 1em);
+  }
+
+  @return $emValues;
+}

package/src/wc_scss/tools/mixins/avatar.scss

@@ -0,0 +1,32 @@
+@mixin avatar-size($size: $avatar__size, $font-size: $avatar__font-size) {
+  font-size: ($size * $avatar__font-factor);
+  height: $size;
+  line-height: ($size * $avatar__line-height-factor);
+  width: $size;
+}
+  
+@mixin avatar-contents-base() {
+  @include flex();
+  
+  @include border-radius($global-rounded);
+  height: 100%;
+  
+  width: 100%;
+}
+  
+@mixin avatar-overlay-style(
+  $icon-color: $md-white-100, $overlay-background: $black-40) {
+  @include avatar-contents-base();
+  background: $overlay-background;
+  color: $md-white-100;
+  font-family: $icon-font-name;
+  left: 0;
+  
+  position: absolute;
+  top: 0;
+}
+  
+@mixin composite-avatar-size($size: $composite-avatar--medium__size) {
+  height: $size;
+  width: $size;
+}