@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/wc_scss/settings/avatar.scss

@@ -0,0 +1,193 @@
+$avatar__class: "md-avatar";
+
+$avatar--inactive__opacity: 0.55;
+
+$avatar__font-size: rem-calc(14);
+$avatar__size: rem-calc(40);
+$avatar__font-factor: 0.35;
+$avatar__line-height-factor: 0.5;
+
+$avatar-sizes: (
+  xsmall,
+  $icon-dnd_8,
+  $icon-pto_8,
+  $icon-handset_8,
+  $icon-camera_12,
+  $icon-share-screen_8,
+  18
+),
+  (
+  small,
+  $icon-dnd_14,
+  $icon-pto_14,
+  $icon-handset_14,
+  $icon-camera_16,
+  $icon-share-screen_14,
+  28
+),
+  (
+  medium,
+  $icon-dnd_20,
+  $icon-pto_20,
+  $icon-handset_20,
+  $icon-camera_20,
+  $icon-share-screen_20,
+  40
+),
+  (
+  large,
+  $icon-dnd_28,
+  $icon-pto_28,
+  $icon-handset_28,
+  $icon-camera_26,
+  $icon-share-screen_28,
+  52
+),
+  (
+  xlarge,
+  $icon-dnd_40,
+  $icon-pto_32,
+  $icon-handset_40,
+  $icon-camera_32,
+  $icon-share-screen_36,
+  84
+),
+  (
+  18,
+  $icon-dnd_8,
+  $icon-pto_8,
+  $icon-handset_8,
+  $icon-camera_12,
+  $icon-share-screen_8
+),
+  (
+  24,
+  $icon-dnd_12,
+  $icon-pto_12,
+  $icon-handset_12,
+  $icon-camera_12,
+  $icon-share-screen_12
+),
+  (
+  28,
+  $icon-dnd_14,
+  $icon-pto_14,
+  $icon-handset_14,
+  $icon-camera_16,
+  $icon-share-screen_14
+),
+  (
+  36,
+  $icon-dnd_18,
+  $icon-pto_18,
+  $icon-handset_18,
+  $icon-camera_18,
+  $icon-share-screen_18
+),
+  (
+  40,
+  $icon-dnd_20,
+  $icon-pto_20,
+  $icon-handset_20,
+  $icon-camera_20,
+  $icon-share-screen_20
+),
+  (
+  44,
+  $icon-dnd_24,
+  $icon-pto_24,
+  $icon-handset_24,
+  $icon-camera_24,
+  $icon-share-screen_24
+),
+  (
+  52,
+  $icon-dnd_28,
+  $icon-pto_28,
+  $icon-handset_28,
+  $icon-camera_26,
+  $icon-share-screen_28
+),
+  (
+  56,
+  $icon-dnd_28,
+  $icon-pto_28,
+  $icon-handset_28,
+  $icon-camera_26,
+  $icon-share-screen_28
+),
+  (
+  72,
+  $icon-dnd_36,
+  $icon-pto_32,
+  $icon-handset_36,
+  $icon-camera_32,
+  $icon-share-screen_36
+),
+  (
+  80,
+  $icon-dnd_40,
+  $icon-pto_32,
+  $icon-handset_40,
+  $icon-camera_32,
+  $icon-share-screen_36
+),
+  (
+  84,
+  $icon-dnd_40,
+  $icon-pto_32,
+  $icon-handset_40,
+  $icon-camera_32,
+  $icon-share-screen_36
+);
+
+$avatar--active__shadow: inset 0 0 0 rem-calc(1) $md-green-50,
+  inset 0 0 0 rem-calc(2) $white-24;
+$avatar--active__shadow--dark: inset 0 0 0 rem-calc(1) $md-green-50,
+  inset 0 0 0 rem-calc(2) $black-24;
+
+$avatar-letter__color: $black-80;
+$avatar-letter__background: $gray-5-88;
+
+$avatar-icon__color: $black-80;
+$avatar-icon__background: $gray-5-88;
+
+$avatar-self__color: $md-theme-50;
+$avatar-self__background: $md-white-100;
+$avatar-self__border: 1px solid $black-08;
+
+$avatar-img__background: $gray-5-88;
+
+$avatar-badge__spacing: 0.14em;
+
+$avatar-failure-badge__size: 0.85em;
+$avatar-failure-badge__font-size: 0.85em;
+$avatar-failure-badge__color: $md-red-50;
+$avatar-failure-badge__background: $md-red-10;
+
+$avatar-notification-badge__size: 0.66em;
+$avatar-notification-badge__color: $md-theme-50;
+
+$avatar-bot__border-radius: 0.571em;
+$avatar-bot__font-size: 0.571em;
+$avatar-bot__line-height: 1.25em;
+$avatar-bot__padding: 0.25em 0.75em;
+$avatar-bot__background: $md-gray-70;
+$avatar-bot__color: $md-white-100;
+
+$composite-avatar__class: "md-composite-avatar";
+
+$composite-avatar--small__size: rem-calc(28);
+$composite-avatar--medium__size: rem-calc(40);
+$composite-avatar--84__size: rem-calc(84);
+$composite-avatar--large__size: rem-calc(135);
+
+$composite-avatar--small__avatar-size: rem-calc(18);
+$composite-avatar--medium__avatar-size: rem-calc(26);
+$composite-avatar--84__avatar-size: rem-calc(52);
+$composite-avatar--large__avatar-size: rem-calc(90);
+
+$composite-avatar--small__avatar-font-size: rem-calc(6);
+$composite-avatar--medium__avatar-font-size: rem-calc(9);
+$composite-avatar--84__avatar-font-size: rem-calc(18);
+$composite-avatar--large__avatar-font-size: rem-calc(31);

package/src/wc_scss/settings/button-settings.scss

@@ -0,0 +1,193 @@
+$button__class: "#{$prefix}-button";
+
+// Default font size
+$button__font-size: rem-calc(16);
+$button__line-height: rem-calc(24);
+
+// Circle Button Sizes
+$button__size--20: rem-calc(20);
+$button__font-size--20: rem-calc(8);
+$button__size--28: rem-calc(28);
+$button__font-size--28: rem-calc(12);
+$button__size--32: rem-calc(32);
+$button__font-size--32: rem-calc(14);
+$button__size--36: rem-calc(36);
+$button__font-size--36: rem-calc(14);
+$button__size--40: rem-calc(40);
+$button__font-size--40: rem-calc(14);
+$button__size--44: rem-calc(44);
+$button__font-size--44: rem-calc(14);
+$button__size--56: rem-calc(56);
+$button__font-size--56: rem-calc(24);
+$button__size--68: rem-calc(68);
+$button__font-size--68: rem-calc(28);
+$button__size--72: rem-calc(72);
+$button__font-size--72: rem-calc(32);
+$button__size--84: rem-calc(84);
+$button__font-size--84: rem-calc(36);
+
+// Border Radius Sizes
+$button__radius--28: rem-calc(16);
+$button__radius--36: rem-calc(18);
+$button__radius--40: rem-calc(20);
+$button__radius--52: rem-calc(26);
+$button__radius--round: $global-rounded !default;
+
+// Set text alignment
+$button__font-align: center !default;
+
+// Set paddings
+$button__padding--28: rem-calc(3) rem-calc(14);
+$button__padding--32: rem-calc(8) rem-calc(16);
+$button__padding--36: rem-calc(6) rem-calc(18);
+$button__padding--40: rem-calc(12) rem-calc(20);
+$button__padding--52: rem-calc(14) rem-calc(26);
+
+$button__transition-speed: 150ms;
+
+// Set button font colors
+$button__font-color: $md-black-100 !default;
+$button__font-color--alt: $md-white-100 !default;
+
+// Set color, background and cursor for disabled buttons.
+$button__color--disabled: $black-04 !default;
+$button__color--disabled--dark: $white-08 !default;
+$button__font-color--disabled: $black-20 !default;
+$button__font-color--disabled--dark: $white-20 !default;
+$button__cursor--disabled: default !default;
+$button__link-color--disabled: $button__font-color--disabled;
+
+// Default button color settings.
+$button__background-color: $md-gray-20 !default;
+$button__background-color--dark: $white-24 !default;
+$button__background-color--hover: $md-gray-30 !default;
+$button__background-color--hover--dark: $white-32 !default;
+$button__background-color--active: $md-gray-40 !default;
+$button__background-color--active--dark: $white-40 !default;
+$button__border-color--focus: $md-black-100 !default;
+
+// Default button contrast colors
+$button__background-color--contrast: $black-60 !default;
+$button__background-color--hover--contrast: $black-68 !default;
+$button__background-color--active--contrast: $black-76 !default;
+
+// Default dark button contrast colors
+$button__background-color--dark--contrast: $md-white-100 !default;
+$button__background-color--hover--dark--contrast: $white-92 !default;
+$button__background-color--active--dark--contrast: $white-84 !default;
+
+// Blue button colors
+$button--blue__background-color: $md-theme-50 !default;
+$button--blue__background-color--hover: $md-theme-60 !default;
+$button--blue__background-color--active: $md-theme-70 !default;
+
+// Blue button contrast colors
+$button--blue__background-color--contrast: $md-theme-60 !default;
+$button--blue__background-color--hover--contrast: $md-theme-70 !default;
+$button--blue__background-color--active--contrast: $md-theme-80 !default;
+
+// Red button colors
+$button--red__background-color: $md-red-50 !default;
+$button--red__background-color--hover: $md-red-60 !default;
+$button--red__background-color--active: $md-red-70 !default;
+
+// Red button contrast colors
+$button--red__background-color--contrast: $md-red-60 !default;
+$button--red__background-color--hover--contrast: $md-red-70 !default;
+$button--red__background-color--active--contrast: $md-red-80 !default;
+
+// Green button colors
+$button--green__background-color: $md-green-50 !default;
+$button--green__background-color--hover: $md-green-60 !default;
+$button--green__background-color--active: $md-green-70 !default;
+
+// Green button contrast colors
+$button--green__background-color--contrast: $md-green-60 !default;
+$button--green__background-color--hover--contrast: $md-green-70 !default;
+$button--green__background-color--active--contrast: $md-green-80 !default;
+
+// Orange button colors
+$button--orange__background-color: $md-orange-50 !default;
+$button--orange__background-color--hover: $md-orange-60 !default;
+$button--orange__background-color--active: $md-orange-70 !default;
+
+// Orange button contrast colors
+$button--orange__background-color--contrast: $md-orange-60 !default;
+$button--orange__background-color--hover--contrast: $md-orange-70 !default;
+$button--orange__background-color--active--contrast: $md-orange-80 !default;
+
+// Yellow button colors
+$button--yellow__background-color: $md-yellow-50 !default;
+$button--yellow__background-color--hover: $md-yellow-60 !default;
+$button--yellow__background-color--active: $md-yellow-70 !default;
+
+// Yellow button contrast colors
+$button--yellow__background-color--contrast: $md-yellow-60 !default;
+$button--yellow__background-color--hover--contrast: $md-yellow-70 !default;
+$button--yellow__background-color--active--contrast: $md-yellow-80 !default;
+
+// Mint button colors
+$button--mint__background-color: $md-mint-50 !default;
+$button--mint__background-color--hover: $md-mint-60 !default;
+$button--mint__background-color--active: $md-mint-70 !default;
+
+// Mint button contrast colors
+$button--mint__background-color--contrast: $md-mint-60 !default;
+$button--mint__background-color--hover--contrast: $md-mint-70 !default;
+$button--mint__background-color--active--contrast: $md-mint-80 !default;
+
+// Purple button colors
+$button--purple__background-color: $md-purple-50 !default;
+$button--purple__background-color--hover: $md-purple-60 !default;
+$button--purple__background-color--active: $md-purple-70 !default;
+
+// Purple button contrast colors
+$button--purple__background-color--contrast: $md-purple-60 !default;
+$button--purple__background-color--hover--contrast: $md-purple-70 !default;
+$button--purple__background-color--active--contrast: $md-purple-80 !default;
+
+// Pink button colors
+$button--pink__background-color: $md-pink-50 !default;
+$button--pink__background-color--hover: $md-pink-60 !default;
+$button--pink__background-color--active: $md-pink-70 !default;
+
+// Pink button contrast colors
+$button--pink__background-color--contrast: $md-pink-60 !default;
+$button--pink__background-color--hover--contrast: $md-pink-70 !default;
+$button--pink__background-color--active--contrast: $md-pink-80 !default;
+
+// Cyan button colors
+$button--cyan__background-color: $md-cyan-50 !default;
+$button--cyan__background-color--hover: $md-cyan-60 !default;
+$button--cyan__background-color--active: $md-cyan-70 !default;
+
+// Cyan button contrast colors
+$button--cyan__background-color--contrast: $md-cyan-60 !default;
+$button--cyan__background-color--hover--contrast: $md-cyan-70 !default;
+$button--cyan__background-color--active--contrast: $md-cyan-80 !default;
+
+// White button colors
+$button--white__background-color: $md-white-100 !default;
+$button--white__background-color--hover: $md-gray-10 !default;
+$button--white__background-color--active: $md-gray-30 !default;
+$button--white__border: 0 0 0 rem-calc(1) $md-gray-20,
+  0 rem-calc(1) rem-calc(2) 0 $md-gray-20;
+
+// Dark Gray button colors
+$button--dark-gray__background-color: $md-gray-90 !default;
+$button--dark-gray__background-color--hover: $md-gray-80 !default;
+$button--dark-gray__background-color--active: $md-gray-90 !default;
+
+// Duck Egg button colors
+$button--duck-egg__background-color: $md-gray-50 !default;
+$button--duck-egg__background-color--hover: $md-gray-60 !default;
+$button--duck-egg__background-color--active: $md-gray-70 !default;
+
+// Violet button colors
+$button--violet__background-color: $md-violet-50 !default;
+$button--violet__background-color--hover: $md-violet-60 !default;
+$button--violet__background-color--active: $md-violet-70 !default;
+
+// Button Container Settings
+$button-container__width: 116px;
+$button-container--small__width: 104px;

package/src/wc_scss/settings/core.scss

@@ -0,0 +1,128 @@
+// Namespace Variables
+$namespace: "md" !default;
+$prefix: "md" !default;
+$dark-class: "#{$prefix}--dark" !default;
+$admin-class: "#{$prefix}--admin" !default;
+$sites-class: "#{$prefix}--sites" !default;
+$client-class: "#{$prefix}--client" !default;
+$contrast-class: "#{$prefix}--contrast" !default;
+
+$base-cap-height: 0.0618em;
+
+// 8px used in _trumps.spacing.responsive.scss
+$base-unit-rem: $rem-base / 1px;
+$base-unit-px: 4;
+$base-rem: 0.5rem;
+
+// line height settings (for vertical rhythm module _baseline.scss)
+$base-line-height-ratio: 1.71429;
+
+// this value has to be adjusted to the font used or 0 to use line-height
+$base-line-height: $base-line-height-ratio;
+
+$body-line-height: $base-line-height-ratio;
+$header-line-height: $base-line-height-ratio;
+$subheader-line-height: $base-line-height-ratio;
+$paragraph-line-height: $base-line-height-ratio;
+$paragraph-aside-line-height: $base-line-height-ratio;
+$list-line-height: $base-line-height-ratio;
+$f-dropdown-line-height: $base-line-height-ratio;
+$form-label-line-height: $base-line-height-ratio;
+$price-desc-line-height: $base-line-height-ratio;
+$input-line-height: 1;
+
+$table-line-height: $base-line-height-ratio;
+$tooltip__line-height: $base-line-height-ratio;
+
+//
+// margin settings (for vertical rhythm module _baseline.scss)
+$header-top-margin: 0;
+$header-bottom-margin: 0;
+$subheader-top-margin: 0;
+$subheader-bottom-margin: 0;
+$paragraph-margin-bottom: 0;
+$definition-list-header-margin-bottom: 0;
+$definition-list-margin-bottom: 0.5rem;
+
+// ex.: golden ratio
+// current: 16 * 1.71429 / 4 = 6.85716
+$base-scale: $base-unit-rem * $base-line-height-ratio / $base-unit-px;
+
+// 4px = 0.25rem
+$base-unit: $base-line-height / $base-scale * $rem-base;
+
+// We use these to control text direction settings
+$text-direction: ltr;
+$opposite-direction: right;
+$default-float: left;
+$last-child-float: $opposite-direction;
+
+$link-color: $md-theme-50;
+$link-hover-color: $md-theme-70;
+
+$global-radius: 4px;
+$border-radius-base: $global-radius;
+$global-rounded: 100%;
+
+$cursor-auto-value: auto;
+$cursor-crosshair-value: crosshair;
+$cursor-default-value: default;
+$cursor-disabled-value: not-allowed;
+$cursor-pointer-value: pointer;
+$cursor-help-value: help;
+$cursor-text-value: text;
+
+$select-border-radius: 3px;
+
+$body-font-style: normal;
+
+$row-width: rem-calc(1366) !default;
+$total-columns: 12 !default;
+$last-child-float: $opposite-direction !default;
+$column-gutter: rem-calc(16) !default;
+
+// legacy Bootstrap Variable
+$grid-gutter-width: 30px;
+
+$overlay-panel-height: 93px !default;
+
+// Basics of a top-bar
+$top-bar-height: 50px !default;
+$top-bar-border-width: 1px !default;
+
+$brand-shadow: rgba(0, 0, 0, 0.2);
+$brand-shadow-dark: rgba(0, 0, 0, 0.45);
+
+// Icons Variables
+$icon-font-path: "~@momentum-ui/icons/fonts" !default;
+$icon-font-name: "momentum-ui-icons" !default;
+
+// define default font weights
+$font-weight-normal: normal;
+$font-weight-bold: bold;
+
+$body-font-weight: $font-weight-normal;
+
+$padding-base-vertical: 5px;
+$padding-small-vertical: 2px;
+$padding-large-vertical: 7px;
+
+$line-height-large: 1.33;
+
+$border-radius-large: 3px;
+
+$component-active-color: $md-white-100;
+
+$cursor-disabled: not-allowed;
+
+$brand-default: $md-gray-90; // legacy bootstrap - used in Atlas
+
+$images-path: "~@momentum-ui/core/images" !default;
+
+// Dropdown Max Height for Select/Menu/SubMenu
+$dropdown-height: rem-calc(308);
+
+$focus-color: $md-theme-50;
+
+$body-bg: $md-white-100;
+$body-font-color: $md-gray-90;

package/src/wc_scss/settings/focus.scss

@@ -0,0 +1,7 @@
+$focus__color: $focus-color !default;
+$focus__color--dark: $focus-color !default;
+$focus__size: 2px !default;
+
+$focus-ring-gap: rem-calc(2);
+$focus-ring-size: rem-calc(2);
+$focus-boxshadow: 0 0 0 rem-calc(2) var(--md-default-focus-outline-color, $md-blue-60);

package/src/wc_scss/settings/form-controls.scss

@@ -0,0 +1,23 @@
+$form-control__opacity--disabled: 0.4;
+
+$form-control__content: $md-white-100 !default;
+
+$form-control__label: inherit !default;
+$form-control__label--dark: $md-white-100 !default;
+
+$form-control__background-border--focus: $md-black-100 !default;
+$form-control__background-border--focus--dark: $md-white-100 !default;
+
+$form-control__background: $black-16 !default;
+$form-control__background--dark: $white-48 !default;
+$form-control__background--hover: $black-24 !default;
+$form-control__background--hover--dark: $white-64 !default;
+$form-control__background--pressed: $black-32 !default;
+$form-control__background--pressed--dark: $white-80 !default;
+
+$form-control__background--checked: $md-theme-50 !default;
+$form-control__background--checked--dark: $md-theme-70 !default;
+$form-control__background--checked-hover: $md-theme-60 !default;
+$form-control__background--checked-hover--dark: $md-theme-70 !default;
+$form-control__background--checked-pressed: $md-theme-70 !default;
+$form-control__background--checked-pressed--dark: $md-theme-80 !default;

package/src/wc_scss/settings/forms.scss

@@ -0,0 +1,26 @@
+$form-spacing: rem-calc(16) !default;
+
+$form-control__background: $black-16 !default;
+$form-control__background--checked: $md-theme-50 !default;
+$form-control__background--checked--dark: $md-theme-70 !default;
+$form-control__background--checked-hover: $md-theme-60 !default;
+$form-control__background--checked-hover--dark: $md-theme-70 !default;
+$form-control__background--checked-pressed: $md-theme-70 !default;
+$form-control__background--checked-pressed--dark: $md-theme-80 !default;
+$form-control__background--dark: $white-48 !default;
+$form-control__background--hover: $black-24 !default;
+$form-control__background--hover--dark: $white-64 !default;
+$form-control__background--pressed: $black-32 !default;
+$form-control__background--pressed--dark: $white-80 !default;
+$form-control__background-border--focus: $md-black-100 !default;
+$form-control__background-border--focus--dark: $md-white-100 !default;
+$form-control__content: $md-white-100 !default;
+$form-control__label: inherit !default;
+$form-control__label--dark: $md-white-100 !default;
+$form-control__opacity--disabled: 0.4 !default;
+$form-label-bottom-margin: rem-calc(4) !default;
+$form-label-font-weight: $font-weight-normal !default;
+$form-label-line-height: 1.5 !default;
+$form-label-pointer: pointer !default;
+$form-label-small-transform: capitalize !default;
+$form-section-border-color: $md-gray-20 !default;

package/src/wc_scss/settings/input.scss

@@ -0,0 +1,59 @@
+$input__class: "md-input";
+$input__class--filled: "md-input--filled";
+
+$input__border-width: rem-calc(1) !default;
+$input__font-family: $brand-font-regular !default;
+
+$input__font-size: rem-calc(16) !default;
+$input__height: rem-calc(34) !default;
+$input__padding-side: rem-calc(16) !default;
+$input__padding-side--icon: rem-calc(44) !default;
+$input__padding: 0 $input__padding-side;
+$input__border-radius: $global-radius;
+$input--pill__border-radius: rem-calc(18);
+$input__line-height: $base-line-height-ratio !default;
+
+$input__message__icon__font-size: rem-calc(16) !default;
+$input__message__font-size: rem-calc(12) !default;
+$input__message__line-height: rem-calc(22) !default;
+
+//  Color
+// Outline
+$input__background: $md-white-100 !default;
+$input__background--disabled: $md-gray-10 !default;
+$input__background--hover: $md-gray-20 !default;
+$input__border-color: $md-gray-30 !default;
+$input__border-color--read-only: transparent !default;
+$input__clear-icon__color: $md-gray-60;
+$input__clear-icon__color--hover: $md-gray-70;
+$input__font-color: $md-gray-100 !default;
+$input__font-color--disabled: $md-gray-30 !default;
+$input__font-color--help: $md-gray-70 !default;
+$input__font-color--placeholder: $md-gray-70 !default;
+$input__font-color--read-only: $input__font-color !default;
+
+// Filled
+$input__background--filled: $md-gray-10 !default;
+$input__background--filled--hover: $md-gray-20 !default;
+$input__border-color--filled: transparent !default;
+
+//  Error Color
+// Default
+$input__background--error: $md-red-10 !default;
+$input__background--error--hover: $md-red-20 !default;
+$input__border-color--error: $md-red-50 !default;
+$input__message__font-color--error: $md-red-70 !default;
+
+//  Success Color
+// Default
+$input__background--success: $md-green-10 !default;
+$input__background--success--hover: $md-green-20 !default;
+$input__border-color--success: $md-green-50 !default;
+$input__message__font-color--success: $md-green-70 !default;
+
+//  Warning Color
+// Default
+$input__background--warning: $md-yellow-10 !default;
+$input__background--warning--hover: $md-yellow-20 !default;
+$input__border-color--warning: $md-yellow-40 !default;
+$input__message__font-color--warning: $md-yellow-70 !default;