-
-
-
-
-
-
-
- TS
-
-
- 
-
-
-
-
-
-
-
-
-
- | - | -Full Name | -Last Updated | -ID Number | -|
|---|---|---|---|---|
|
- |
- John Jones | -jjones@cisco.com | -02-July-2019 | -1547852158 | -
|
- |
- Paul Baltes - | pbaltes@cisco.com | -03-June-2019 | -4673165849 | -
|
- |
- Caleb Valdez | -cvaldez@cisco.com | -07-May-2019 | -9432165975 | -
|
- |
- Corelia Ball | -cball@cisco.com | -04-July-2019 | -8561346581 | -
|
- |
- Mike Snow | -msnow@cisco.com | -05-April-2019 | -1245731648 | -
|
- |
- Joe Johnson | -jjohnson@cisco.com | -05-July-2019 | -3674162849 | -
|
- |
- Robert McGregor | rmcgregor@cisco.com | -01-July-2019 | -8412596312 | -
|
- |
- Greg Dmritov | gdmritov@cisco.com | 05-March-2019 | 1245731648 |
|
- |
- Thomas Campbell | -tcampbell@cisco.com | -07-July-2019 | -6777658497 | -
|
- |
- Derek Nelson | -dnelson@cisco.com | -07-June-2019 | -9432548164 | -
| Full Name | -Last Updated | -ID Number | -|
|---|---|---|---|
| John Jones | jjones@cisco.com | 02-July-2019 | 1547852158 |
| Paul Baltes | pbaltes@cisco.com | 03-June-2019 | 4673165849 |
| Caleb Valdez | cvaldez@cisco.com | 07-May-2019 | 9432165975 |
| Corelia Ball | cball@cisco.com | 04-July-2019 | 8561346581 |
| Mike Snow | msnow@cisco.com | 05-April-2019 | 1245731648 |
| Joe Johnson | jjohnson@cisco.com | 05-July-2019 | 3674162849 |
| Robert McGregor | rmcgregor@cisco.com | 01-July-2019 | 8412596312 |
| Greg Dmritov | gdmritov@cisco.com | 05-March-2019 | 1245731648 |
| Thomas Campbell | tcampbell@cisco.com | 07-July-2019 | 6777658497 |
| Derek Nelson | dnelson@cisco.com | 07-June-2019 | 9432548164 |
|
-
- |
- Name | -State | -Age | -Color | -
|---|---|---|---|---|
|
-
-
- |
- John | -Texas | -32 | -Orange | -
|
-
-
- |
- Paul | -California | -12 | -Black | -
|
-
-
- |
- Ben | -Florida | -23 | -Gray | -
|
-
-
- |
- Dan | -Kansas | -75 | -Blue | -
|
-
-
- |
- Mike | -New York | -45 | -Orange | -
|
-
-
- |
- Joe | -Texas | -86 | -Black | -
|
-
-
- |
- Robert | -New Mexico | -34 | -Yellow | -
|
-
-
- |
- Greg | -Arizona | -29 | -Orange | -
|
-
-
- |
- Thomas | -Texas | -32 | -Black | -
|
-
-
- |
- Derek | -Montana | -27 | -Red | -
|
-
-
- |
- Name | -State | -Age | -Color | -
|---|
|
-
-
- |
- John | -Texas | -32 | -Orange | -
|
-
-
- |
- Paul | -California | -12 | -Black | -
|
-
-
- |
- Ben | -Florida | -23 | -Gray | -
|
-
-
- |
- Dan | -Kansas | -75 | -Blue | -
|
-
-
- |
-
- Mike | -New York | -45 | -Orange | -
|
-
-
- |
- Joe | -Texas | -86 | -Black | -
|
-
-
- |
- Robert | -New Mexico | -34 | -Yellow | -
|
-
-
- |
- Greg | -Arizona | -29 | -Orange |
|
-
-
- |
- Thomas | Texas | 32 | Black |
|
-
-
- |
- Derek | Montana | 27 | Red |
|
-
-
- |
- Robert | New Mexico | 34 | Yellow |
|
-
-
- |
- Sarah | Arizona | 29 | Orange |
|
-
-
- |
- Michelle | Montana | 24 | Red |
|
-
-
- |
-
- Jennifer | New Mexico | 34 | Purple |
|
-
-
- |
- Alex | -Arizona | -29 | -Orange | -
|
-
-
- |
- Lizzy | -Texas | -22 | -Black | -
|
-
-
- |
- Olivia | -Montana | -27 | -Red | -
| - Name - - | -- State - - | - Age - - | -- Color - - | -
|---|---|---|---|
| John | -Texas | -32 | -Orange | -
| Paul | -California | -12 | -Black | -
| Ben | -Florida | -23 | -Gray |
| Dan | -Kansas | -75 | -Blue | -
| Mike | -New York | -45 | -Orange | -
| Joe | -Texas | -86 | -Black | -
| Robert | -New Mexico | -34 | -Yellow | -
| Greg | -Arizona | -29 | -Orange | -
| Thomas | -Texas | -32 | -Black | -
| Derek | -Montana | -27 | -Red | -
| Name | -State | -Age | -Color | -
|---|
| John | Texas | -32 | -Orange | -
| Paul | -California | -12 | -Black | -
| Ben | -Florida | -23 | -Gray | -
| Lauren | -Kansas | -75 | -Blue | -
| Mike | -New York | -45 | Orange | -
| Joe | -Texas | 86 | -Black |
| Robert | -New Mexico | -34 | -Yellow | -
| Greg | -Arizona | -29 | -Orange | -
| Sarah | -Texas | -32 | -Black | -
| Derek | -Montana | -27 | -Red | -
| Joe | -Texas | -86 | -Black | -
| Michelle | -New Mexico | -34 | -Yellow | -
| Greg | -Arizona | -29 | -Orange | -
| Thomas | -Texas | -32 | -Black | -
| Full Name | -Last Updated | -ID Number | -|
|---|---|---|---|
| John Jones | -jjones@cisco.com | -02-July-2019 | -1547852158 | -
| Paul Baltes | -pbaltes@cisco.com | -03-June-2019 | -4673165849 | -
| Caleb Valdez | -cvaldez@cisco.com | -07-May-2019 | -9432165975 | -
| Corelia Ball | -cball@cisco.com | -04-July-2019 | -8561346581 | -
| Mike Snow | -msnow@cisco.com | -05-April-2019 | -1245731648 | -
| Joe Johnson | -jjohnson@cisco.com | -05-July-2019 | -3674162849 |
| Robert McGregor | -rmcgregor@cisco.com | -01-July-2019 | -8412596312 |
| Greg Dmritov | -gdmritov@cisco.com | -05-March-2019 | -1245731648 |
| Thomas Campbell | -tcampbell@cisco.com | -07-July-2019 | -6777658497 | -
| Derek Nelson | -dnelson@cisco.com | -07-June-2019 | -9432548164 | -
|
- Name
- |
-
- State
- |
-
- Age
- |
-
- Color
- |
-
|---|---|---|---|
| John | -Texas | -32 | -Orange | -
| Paul | -California | -12 | -Black | -
| Ben | -Florida | -23 | -Gray | -
| Dan | -Kansas | -75 | -Blue | -
| Mike | -New York | -45 | -Orange | -
| Joe | -Texas | -86 | -Black | -
| Robert | -New Mexico | -34 | -Yellow | -
| Greg | -Arizona | -29 | -Orange | -
| Thomas | -Texas | -32 | -Black | -
| Derek | -Montana | -27 | -Red | -
| Bill | -Texas | -86 | -Black | -
| Harris | -New Mexico | -24 | -Cyan | -
| Brian | -Arizona | -99 | -Orange | -
| Thomas | -Alaska | -22 | -Crimson | -
| Marcus | -Montana | -18 | -Red | -
| Full Name | -Last Updated | -ID Number | -|
|---|---|---|---|
| John Jones | jjones@cisco.com | 02-July-2019 | 1547852158 |
| Paul Baltes | pbaltes@cisco.com | 03-June-2019 | 4673165849 |
| Caleb Valdez | cvaldez@cisco.com | 07-May-2019 | 9432165975 |
| Corelia Ball | cball@cisco.com | 04-July-2019 | 8561346581 |
| Mike Snow | msnow@cisco.com | 05-April-2019 | 1245731648 |
| Joe Johnson | jjohnson@cisco.com | 05-July-2019 | 3674162849 |
| Robert McGregor | rmcgregor@cisco.com | 01-July-2019 | 8412596312 |
| Greg Dmritov | gdmritov@cisco.com | 05-March-2019 | 1245731648 |
| Thomas Campbell | tcampbell@cisco.com | 07-July-2019 | 6777658497 |
| Derek Nelson | dnelson@cisco.com | 07-June-2019 | 9432548164 |
Put content here
- - -Put content here
- -
- first
-second
-third
- tags
-$code-color: $md-gray-90 !default;
-$code-font-family: $font-family-monospace !default;
-$code-font-weight: $font-weight-normal !default;
-$code-background-color: transparent !default;
-
-//scale-color($md-gray-70, $lightness: 70%) !default;
-$code-border-size: 0px !default;
-
-$code-border-style: solid !default;
-$code-border-color: scale-color(
- $code-background-color,
- $lightness: -10%
-) !default;
-$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
-
-// We use these to style anchors
-$anchor-text-decoration: none !default;
-$anchor-text-decoration-hover: none !default;
-$anchor-font-color: $md-theme-60 !default;
-$anchor-font-color-hover: $md-theme-70 !default;
-
-// We use these to style the
element
-$hr-border-width: 1px !default;
-$hr-border-style: solid !default;
-$hr-border-color: $md-gray-20 !default;
-$hr-margin: rem-calc(20) !default;
-
-// We use these to style lists
-$list-font-family: $paragraph-font-family !default;
-$list-font-size: $paragraph-font-size !default;
-$list-line-height: $paragraph-line-height !default;
-$list-margin-bottom: $paragraph-margin-bottom !default;
-$list-style-position: outside !default;
-$list-side-margin: 1rem !default;
-$list-ordered-side-margin: 1.5rem !default;
-
-$list-side-margin-no-bullet: 0 !default;
-$list-nested-margin: rem-calc(20) !default;
-$definition-list-header-weight: $font-weight-bold !default;
-$definition-list-header-margin-bottom: 0.3rem !default;
-$definition-list-margin-bottom: rem-calc(12) !default;
-
-// We use these to style blockquotes
-$blockquote-font-color: inherit !default;
-$blockquote-padding: rem-calc(9 20 0 19) !default;
-$blockquote-border-width: 4px !default;
-$blockquote-padding: 0.5rem 1rem calc(0.25rem + #{$blockquote-border-width})
- 1rem !default;
-$blockquote-border: $blockquote-border-width solid !default;
-$blockquote-border-color: $md-gray-50 !default;
-
-$blockquote-cite-font-size: rem-calc(13) !default;
-$blockquote-cite-font-color: inherit !default;
-$blockquote-cite-link-color: $blockquote-cite-font-color !default;
-
-// Acronym styles
-$acronym-underline: 1px dotted $md-gray-20 !default;
-
-// line height (px) divided by font-size
-$title-heading-line-height: math.div(rem-calc(80), $title-heading-font-size) !default;
-$h1-line-height: math.div(rem-calc(64), $h1-font-size) !default;
-$h2-line-height: math.div(rem-calc(48), $h2-font-size) !default;
-$h3-line-height: math.div(rem-calc(32), $h3-font-size) !default;
-$h4-line-height: math.div(rem-calc(32), $h4-font-size) !default;
-$h5-line-height: math.div(rem-calc(24), $h5-font-size) !default;
-$h6-line-height: math.div(rem-calc(24), $h6-font-size) !default;
-$paragraph-line-height: math.div(rem-calc(24), $paragraph-font-size) !default;
-$body-small-line-height: math.div(rem-calc(16), $body-small-font-size) !default;
-$body-smallest-line-height: math.div(rem-calc(16), $body-smallest-font-size) !default;
-
-//------------------------------------
-// #FONT-SIZE-VARIABLES
-// create font size map to zurb's foundation
-//------------------------------------
-$fontSizes: (
- dl: $paragraph-font-size,
- dt: $paragraph-font-size,
- dd: $paragraph-font-size,
- li: $paragraph-font-size,
- title-heading: $title-heading-font-size,
- h1: $h1-font-size,
- h2: $h2-font-size,
- h3: $h3-font-size,
- h4: $h4-font-size,
- h5: $h5-font-size,
- h6: $h6-font-size,
- pre: $paragraph-font-size,
- code: $paragraph-font-size,
- p: $paragraph-font-size,
- blockquote: $paragraph-font-size,
- th: $paragraph-font-size,
- td: $paragraph-font-size,
- small: $small-font-size,
- body-small: $body-small-font-size,
- body-smallest: $body-smallest-font-size,
-);
-
-//------------------------------------
-// #FONT-FACES-VARIABLES
-// create font size map to cisco fonts
-//------------------------------------
-
-$fontFaces: (
- title-heading: $brand-font-thin,
- h1: $brand-font-thin,
- h2: $brand-font-light,
- h3: $brand-font-light,
- h4: $brand-font-light,
- h5: $brand-font-light,
- h6: $brand-font-light,
- pre: $brand-font-light,
- code: $font-family-monospace,
- kbd: $brand-font-light,
- p: $brand-font-light,
- small: $brand-font-regular,
- body-small: $brand-font-regular,
- body-smallest: $brand-font-regular,
-);
-
-$fontVariations: (
- h1--bold: $brand-font-extra-light,
- h2--light: $brand-font-extra-light,
- h2--bold: $brand-font-regular,
- h3--light: $brand-font-extra-light,
- h3--bold: $brand-font-regular,
- h4--bold: $brand-font-regular,
- h5--bold: $brand-font-regular,
- h5--heavy: $brand-font-bold,
- body--bold: $brand-font-regular,
- body--heavy: $brand-font-bold,
- body-small--light: $brand-font-light,
- body-small--bold: $brand-font-bold,
- body-smallest--light: $brand-font-light,
- body-smallest--bold: $brand-font-bold,
-);
-
-$fontColors: (
- primary: $md-gray-90,
- alternate: $md-black-100,
- secondary: $md-gray-70,
- disabled: $md-gray-50,
-);
-
-//------------------------------------
-// #LINE-HEIGHT-VARIABLES
-// create line height map to cisco fonts
-//------------------------------------
-
-$lineHeights: (
- title-heading: $title-heading-line-height,
- h1: $h1-line-height,
- h2: $h2-line-height,
- h3: $h3-line-height,
- h4: $h4-line-height,
- h5: $h5-line-height,
- h6: $h6-line-height,
- p: $paragraph-line-height,
- ul: $list-line-height,
- ol: $list-line-height,
- dl: $list-line-height,
- body-small: $body-small-line-height,
- body-smallest: $body-smallest-line-height,
-);
-
-// Text alignment class names
-$align-class-names: small-only, small, medium-only, medium, large-only, large,
- xlarge-only, xlarge, xxlarge-only, xxlarge;
-
-// Text alignment breakpoints
-$align-class-breakpoints: $small-only, $small-up, $medium-only, $medium-up,
- $large-only, $large-up, $xlarge-only, $xlarge-up, $xxlarge-only, $xxlarge-up;
-
-$input__class: '#{$prefix}-input';
-$input__class--filled: '#{$input__class}--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(36) !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: $global-rounded;
-$input__line-height: $base-line-height-ratio !default;
-
-$input__message__icon__font-size: rem-calc(16) !default;
-$input__message__font-size: rem-calc(14) !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;
-
- // Outline Contrast
- $input__background--disabled--contrast: $md-gray-10 !default;
- $input__background--hover--contrast: $md-gray-20 !default;
- $input__border-color--contrast: $input__font-color !default;
- $input__font-color--disabled--contrast: $md-gray-40 !default;
- $input__font-color--help--contrast: $md-gray-100 !default;
-
- // Outline Dark
- $input__background--dark: $md-gray-100 !default;
- $input__background--disabled--dark: $md-gray-90 !default;
- $input__background--hover--dark: $md-gray-90 !default;
- $input__border-color--dark: $md-gray-80;
- $input__clear-icon__color--dark: $md-gray-40;
- $input__clear-icon__color--hover--dark: $md-gray-50;
- $input__font-color--dark: $md-white-100 !default;
- $input__font-color--disabled--dark: $md-gray-70 !default;
- $input__font-color--help--dark: $md-gray-40 !default;
- $input__font-color--placeholder--dark: $md-gray-40 !default;
- $input__font-color--read-only--dark: $input__font-color--dark;
-
- // Outline Dark Contrast
- $input__background--hover--dark--contrast: $input__background--hover--dark !default;
- $input__border-color--dark--contrast: $input__font-color--dark !default;
- $input__font-color--help--dark--contrast: $md-white-100 !default;
-
- // Filled
- $input__background--filled: $md-gray-10 !default;
- $input__background--filled--hover: $md-gray-20 !default;
- $input__border-color--filled: transparent !default;
-
- // Filled Dark
- $input__background--filled--dark: $md-gray-90 !default;
- $input__background--filled--hover--dark: $md-gray-80 !default;
- $input__font-color--read-only--filled--dark: $md-white-100 !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-50 !default;
-
- // Dark
- $input__background--error--dark: $md-red-90 !default;
- $input__background--error--hover--dark: $md-red-80 !default;
- $input__border-color--error--dark: $md-red-50 !default;
- $input__message__font-color--error--dark: $md-red-50 !default;
-
- // Contrast
- $input__border-color--error--contrast: $md-red-60 !default;
- $input__message__font-color--error--contrast: $md-red-80 !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-50 !default;
-
- // Dark
- $input__background--success--dark: $md-green-90 !default;
- $input__background--success--hover--dark: $md-green-80 !default;
- $input__border-color--success--dark: $md-green-50 !default;
- $input__message__font-color--success--dark: $md-green-50 !default;
-
- // Contrast
- $input__border-color--success--contrast: $md-green-60 !default;
- $input__message__font-color--success--contrast: $md-green-80 !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-50 !default;
-
- // Dark
- $input__background--warning--dark: $md-yellow-90 !default;
- $input__background--warning--hover--dark: $md-yellow-80 !default;
- $input__border-color--warning--dark: $md-yellow-40 !default;
- $input__message__font-color--warning--dark: $md-yellow-40 !default;
-
- // Contrast
- $input__border-color--warning--contrast: $md-yellow-60 !default;
- $input__message__font-color--warning--contrast: $md-yellow-80 !default;
-
-$accordion__class: '#{$prefix}-accordion';
-$accordion-header__padding: rem-calc(10) !default;
-$accordion__font-size: rem-calc(16) !default;
-$accordion-header__font-family: $body-font-family !default;
-$accordion-list-item__font-family: $brand-font-light;
-$accordion-list-item__height: rem-calc(32);
-$accordion-list-item__padding: rem-calc(10);
-$accordion-content-padding: ($column-gutter*0.5) !default;
-$accordion-arrow__font-size: rem-calc(12);
-
-$accordion-header__color: $md-black-100 !default;
-$accordion-header__background: $md-white-100 !default;
-$accordion-header__background--hover: $md-theme-10 !default;
-$accordion-header__opacity--disabled: 0.2;
-$accordion-separator__border: rem-calc(1) solid $black-08;
-
-$accordion-header-dark__color: $md-white-100 !default;
-$accordion-header-dark__background: transparent !default;
-$accordion-header-dark__background--hover: $white-08 !default;
-$accordion-separator-dark__border: rem-calc(1) solid $white-08;
-
-$alert__class: '#{$prefix}-alert';
-$alert__border-radius: 5px;
-
-$alert__font-size: rem-calc(14) !default;
-$alert__font-size--title: rem-calc(16) !default;
-$alert__icon-font-size: rem-calc(44) !default;
-
-$alert__background-color: $md-white-100 !default;
-$alert__background-color--info: $md-theme-50 !default;
-$alert__background-color--success: $md-green-50 !default;
-$alert__background-color--warning: $md-yellow-50 !default;
-$alert__background-color--error: $md-red-50 !default;
-
-$alert__font-color: $md-gray-90 !default;
-$alert__font-color--title: $md-black-100 !default;
-$alert__font-color--status: $md-green-70 !default;
-$alert__font-color--info: $md-theme-50 !default;
-$alert__font-color--success: $md-green-50 !default;
-$alert__font-color--warning: $md-yellow-50 !default;
-$alert__font-color--error: $md-red-50 !default;
-
-$alert__padding: rem-calc(8);
-$alert__padding-right: rem-calc(13);
-$alert__padding-left: rem-calc(17);
-
-$alert__padding--call: rem-calc(17);
-$alert__padding-top--call: rem-calc(12);
-$alert__padding-bottom--call: rem-calc(25);
-
-$alert__width: rem-calc(342);
-
-$alert-banner__font-size: rem-calc(14);
-$alert-banner__padding: rem-calc(12);
-$alert-banner-column__border: 1px solid transparent;
-
-$alert-banner-info__color: $md-theme-60;
-$alert-banner-info__background: $md-theme-10;
-
-$alert-banner-warning__color: $md-yellow-60;
-$alert-banner-warning__background: $md-yellow-10;
-
-$alert-banner-error__color: $md-red-60;
-$alert-banner-error__background: $md-red-10;
-
-$avatar__class: '#{$prefix}-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: '#{$prefix}-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);
-
-$badge__class: '#{$prefix}-badge';
-
-// Set the padding for badges
-$badge__padding: rem-calc(2 6) !default;
-$badge__outline-padding: rem-calc(4 6 4) !default;
-
-// Set the border radius for badges.
-$badge__radius: $global-radius !default;
-$badge--round__radius: rem-calc(100);
-
-// Set the badge text
-$badge__font-size: rem-calc(12) !default;
-$badge__font-color-alt: $md-white-100 !default;
-$badge__font-color: $md-white-100 !default;
-$badge__font-weight: $font-weight-normal !default;
-$badge__font-family: $brand-font-regular !default;
-$badge__font-line-height: rem-calc(16) !default;
-$badge__font-size__round: rem-calc(12) !default;
-
-// Blue badge colors
-$badge--blue__background-color: $md-theme-50 !default;
-
-// Mint badge colors
-$badge--mint__background-color: $md-mint-50 !default;
-
-// Green badge colors
-$badge--green__background-color: $md-green-50 !default;
-
-// Yellow badge colors
-$badge--yellow__background-color: $md-yellow-50 !default;
-
-// Red badge colors
-$badge--red__background-color: $md-red-50 !default;
-
-// Orange badge colors
-$badge--orange__background-color: $md-orange-50 !default;
-
-// Purple badge colors
-$badge--purple__background-color: $md-purple-50 !default;
-
-// Cyan badge colors
-$badge--cyan__background-color: $md-cyan-50 !default;
-
-// Grey badge colors
-$badge--gray__background-color: $md-gray-50 !default;
-
-// Blue pastel badge colors
-$badge--blue-pastel__background-color: $md-theme-10 !default;
-$badge--blue-pastel__font-color: $md-theme-50 !default;
-
-// Mint badge colors
-$badge--mint-pastel__background-color: $md-mint-10 !default;
-$badge--mint-pastel__font-color: $md-mint-50 !default;
-
-// Green pastel badge colors
-$badge--green-pastel__background-color: $md-green-10 !default;
-$badge--green-pastel__font-color: $md-green-50 !default;
-
-// Yellow pastel badge colors
-$badge--yellow-pastel__background-color: $md-yellow-10 !default;
-$badge--yellow-pastel__font-color: $md-yellow-50 !default;
-
-// Red pastel badge colors
-$badge--red-pastel__background-color: $md-red-10 !default;
-$badge--red-pastel__font-color: $md-red-60 !default;
-
-// Gray pastel badge colors
-$badge--gray-pastel__background-color: $md-gray-20 !default;
-$badge--gray-pastel__font-color: $md-gray-70 !default;
-
-$breadcrumbs-bg: scale-color($md-gray-70, $lightness: 55%) !default;
-$breadcrumbs-padding: rem-calc(9 14 9) !default;
-$breadcrumbs-side-padding: rem-calc(12) !default;
-$breadcrumbs-function-factor: -10% !default;
-$breadcrumbs-border-size: 1px !default;
-$breadcrumbs-border-style: solid !default;
-$breadcrumbs-border-color: scale-color(
- $breadcrumbs-bg,
- $lightness: $breadcrumbs-function-factor
-) !default;
-$breadcrumbs-radius: $global-radius !default;
-$breadcrumbs-font-size: rem-calc(11) !default;
-$breadcrumbs-font-color: $md-theme-50 !default;
-$breadcrumbs-font-color-current: $md-gray-90 !default;
-$breadcrumbs-font-color-unavailable: $md-gray-50 !default;
-$breadcrumbs-font-transform: uppercase !default;
-$breadcrumbs-link-decor: underline !default;
-$breadcrumbs-slash-color: $md-gray-50 !default;
-$breadcrumbs-slash: '/' !default;
-
-$button__class: '#{$prefix}-button';
-
-// Default font size
-$button__font-size: rem-calc(16);
-$button__line-height: rem-calc(24);
-
-// Pill Font Sizes
-$button__font-size--28: rem-calc(14);
-$button__line-height--28: rem-calc(22);
-
-// 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--36: rem-calc(6) rem-calc(18);
-$button__padding--40: rem-calc(8) 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;
-
-$button-group__class: '#{$prefix}-button-group';
-
-$button-group__font-size: rem-calc(14);
-$button-group__border-size: rem-calc(1);
-$button-group__border: $button-group__border-size solid $md-gray-20;
-$button-group__color: $md-black-100;
-$button-group__background: transparent;
-$button-group__line-height: rem-calc(16);
-$button-group__padding: rem-calc(8) rem-calc(18);
-$button-group-active__color: $md-gray-100;
-$button-group-active__background: $md-blue-10;
-$button-group-disabled__color: $md-gray-50;
-$button-group-hover__background: $black-04;
-$button-group__border-radius-pill: rem-calc(25);
-$button-group__border-radius: rem-calc(4);
-$button-group-icon__padding: rem-calc(10);
-
-$button-group__font-size--dark: rem-calc(14);
-$button-group__line-height--dark: rem-calc(22);
-$button-group__padding--dark: rem-calc(5) rem-calc(18);
-$button-group__border--dark: $button-group__border-size solid $md-gray-80;
-$button-group__color--dark: $md-white-100;
-$button-group-active__color--dark: $md-white-100;
-$button-group-active__background--dark: $md-gray-80;
-$button-group-disabled__color--dark: $md-gray-70;
-$button-group-hover__background--dark: $white-12;
-
-
-$card-background: $md-gray-10;
-$card-color: $md-white-100;
-$card-padding-top: $rem-base;
-$card-padding-horizontal: 1;
-$card-padding-vertical: 1;
-$card-divider-color: $md-gray-20;
-$card-border-radius: 2px;
-
-$checkbox__class: '#{$prefix}-checkbox';
-
-$checkbox__size: rem-calc(20);
-$checkbox__icon-size: rem-calc(12);
-$checkbox__label-size: rem-calc(16);
-
-$close__class: '#{$prefix}-close';
-
-$close__font-color: $black-60 !default;
-$close__font-color--hover: $md-theme-70 !default;
-$close__font-color--focus: $md-theme-80 !default;
-$close__font-color--active: $md-theme-80;
-
-$collapse-button__width: rem-calc(16);
-$collapse-button__height: rem-calc(96);
-$collapse-button__border-radius: 0 $collapse-button__width
- $collapse-button__width 0;
-$collapse-button__color: $md-white-100;
-
-$collapse-button__background: $md-gray-90;
-$collapse-button__background--focus: $black-80;
-
-$combo-box__class: '#{$prefix}-combo-box';
-
-$datepicker__class: '#{$prefix}-datepicker';
-$datepicker-header__padding-top: rem-calc(13);
-$datepicker-navigation__padding: 0 rem-calc(16);
-$datepicker-navigation__line-height: rem-calc(24);
-$datepicker-navigation-buttons__padding: rem-calc(5) 0;
-$datepicker-navigation-buttons--next__margin-left: rem-calc(20);
-$datepicker-day-names__padding: 0 rem-calc(13);
-$datepicker-day-names__color: $md-gray-70;
-$datepicker-day__size: rem-calc(28);
-$datepicker-day__margin: rem-calc(2);
-$datepicker-day__font-size: rem-calc(12);
-$datepicker-day__color: $md-black-100;
-$datepicker-day__bg: transparent;
-$datepicker-day__bg--hover: $black-12;
-$datepicker-day__bg--selected: $md-black-100;
-$datepicker-day__color--selected: $md-white-100;
-$datepicker-day__color--outside-month: $md-gray-70;
-$datepicker-day__color--today: $md-orange-50;
-$datepicker-day__bg--today: $md-white-100;
-$datepicker-day__color--today--selected: $md-white-100;
-$datepicker-day__bg--today--selected: $md-orange-50;
-$datepicker-day__color--disabled: $md-gray-40;
-$datepicker-month__padding: 0 rem-calc(13) rem-calc(9) rem-calc(13);
-
-$datepicker-day__bg--hover--contrast: $md-orange-10;
-$datepicker-day__color--today--contrast: $md-orange-60;
-$datepicker-day__bg--today--selected--contrast: $md-orange-60;
-
-$daypicker-day-outer-width: rem-calc(30);
-$daypicker-day-box-width: rem-calc(32);
-
-// TODO: Remove ng settings when symphony styles are deprecated.
-$datepicker-width: 211px !default;
-$daypicker-day-width: 22px !default;
-$datepicker-large-width: $datepicker-width + 25px !default;
-$daypicker-large-day-width: 30px;
-
-$drawer-border-color: $md-gray-10;
-$drawer-background-color: $md-white-100;
-$drawer-border-radius: 2px;
-$drawer-medium-height: 200px;
-$drawer-large-height: 380px;
-
-$data-range-picker-button-group-height: rem-calc(85);
-$data-range-picker-button-group-margin: rem-calc(12) 0 0 rem-calc(12);
-$data-range-picker-button-group-width: rem-calc(99);
-$data-range-picker-button-group-button-right: rem-calc(8);
-$data-range-picker-input-font-size: rem-calc(12);
-$data-range-picker-input-height:rem-calc(30);
-$data-range-picker-input-padding:rem-calc(8) rem-calc(6) !important;
-$data-range-picker-button-first-child-margin-left:rem-calc(20);
-
-$footer-class: '#{$prefix}-footer';
-$footer__background-color: $md-gray-90;
-$footer__background-color--light: $md-white-100;
-
-$footer__font-color: $white-60;
-
-$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;
-$fieldset-border-color: transparent !default;
-$fieldset-border-style: solid !default;
-$fieldset-border-width: 0 !default;
-$fieldset-margin: $form-spacing 0 !default;
-$fieldset-padding: $form-spacing - rem-calc(1) !default;
-$legend-bg: $md-white-100 !default;
-$legend-font-weight: $font-weight-bold !default;
-$legend-padding: rem-calc(0 3) !default;
-
-$select-bg-color: $md-gray-10 !default;
-$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
-
-$icon__class: #{$prefix}-icon;
-
-// White button colors
-$icon--white__fill: $md-white-100 !default;
-$icon--white__fill--hover: $white-92 !default;
-$icon--white__fill--active: $white-84 !default;
-$icon--white__fill--disabled: $white-20 !default;
-
-$icon--white__fill--contrast: $md-black-100 !default;
-$icon--white__fill--hover--contrast: $md-black-100 !default;
-$icon--white__fill--active--contrast: $md-black-100 !default;
-$icon--white__fill--disabled--contrast: $white-20 !default;
-
-$phonenumber-input__class: '#{$prefix}-input-phonenumber';
-$flags-image-path: $images-path !default;
-$flags-image-name: 'flags' !default;
-$flags-image-extension: 'png' !default;
-$flag-height: 20px !default;
-$flag-width: 28px !default;
-$flag-padding: 8px !default;
-
-$label__class: '#{$prefix}-label';
-
-$label__font-family: $brand-font-regular !default;
-$label__font-size: rem-calc(16) !default;
-$label__font-color: $md-gray-100 !default;
-$label__font-color--dark: $md-white-100 !default;
-
-$label__line-height: rem-calc(24) !default;
-
-$label__spacing: rem-calc(16) !default;
-
-$lightbox__background: $black-60;
-$lightbox-control__size: rem-calc(48);
-$lightbox__color: $md-white-100;
-$lightbox-header__background: rgba($md-gray-90, 0.6);
-$lightbox-header__box-shadow: 0 rem-calc(8) rem-calc(10) 0 rgba(0, 0, 0, 0.18),
- 0 rem-calc(8) rem-calc(18) 0 $black-20;
-$lightbox-header__color: $md-white-100;
-$lightbox-header-timestamp__color: $md-gray-10;
-$lightbox-wrapper--hover__background: $md-gray-90;
-$lightbox-thumbnail__size: rem-calc(180);
-$lightbox-list__size: $lightbox-thumbnail__size + rem-calc(50);
-$lightbox-list__background: rgba($md-gray-90, 0.6);
-$lightbox-thumbnail--selected__color: $md-theme-50;
-$lightbox-thumbnail__box-shadow: 0px 0px 10px $md-black-100;
-$lightbox-thumbnail__border: 1px solid $md-white-100;
-$lightbox-content__box-shadow: 0 rem-calc(8) rem-calc(10) 0 rgba(0, 0, 0, 0.18),
- 0 rem-calc(8) rem-calc(18) 0 $black-20;
-$lightbox-page-control--hover__background: $md-gray-50;
-$lightbox-page-control__background: rgba($md-gray-90, 0.6);
-$lightbox-viewer-controls__background: rgba($md-gray-90, 0.6);
-$lightbox-controls--hover__background: $md-gray-90;
-
-$list__class: '#{$prefix}-list';
-$list-item__class: '#{$list__class}-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));
-
-$list-item-meeting__margin: (rem-calc(6) 0);
-$list-item-meeting__padding: (0 rem-calc(20));
-$list-item-meeting__border-radius: 4px;
-$list-item__section-margin-side: rem-calc(20);
-$list-item-meeting__background: $md-gray-10;
-$list-item-meeting__background--hover: $md-gray-20;
-$list-item-meeting__background--pressed: $md-gray-20;
-
-$spinner__class: '#{$prefix}-spinner';
-
-$spinner--gray__border-color: $md-gray-40;
-$spinner-progress--black__border-color: $md-black-100;
-
-$spinner--blue__border-color: $md-theme-20;
-$spinner-progress--blue__border-color: $md-theme-50;
-
-$spinner-progress--white__border-color: $md-white-100;
-
-$spinner__width: 1em;
-$spinner__height: 1em;
-
-$spinner--20__width: 1.25em;
-$spinner--20__height: 1.25em;
-
-$spinner--28__width: 1.75em;
-$spinner--28__height: 1.75em;
-
-$spinner--36__width: 2.25em;
-$spinner--36__height: 2.25em;
-
-$spinner--40__width: 2.5em;
-$spinner--40__height: 2.5em;
-
-$spinner--48__width: 3em;
-$spinner--48__height: 3em;
-
-$spinner--56__width: 3.5em;
-$spinner--56__height: 3.5em;
-
-$spinner--80__width: 5em;
-$spinner--80__height: 5em;
-
-$spinner-sizes: (16, $icon-check_8, 6px), (20, $icon-check_8, 8px),
- (28, $icon-check_12, 12px), (36, $icon-check_16, 16px);
-
-$menu-overlay__class: '#{$prefix}-menu-overlay';
-$menu__class: '#{$prefix}-menu';
-$menu-item__class: '#{$prefix}-menu-item';
-$menu-item__width: rem-calc(260);
-$menu-item__height: rem-calc(44);
-$menu-item__padding: rem-calc(16);
-$menu-item-header__height: rem-calc(32);
-$menu-item-header__opacity: 0.6;
-$menu-item-header__font-size: 0.75rem;
-$menu-item-selected-value__font-size: rem-calc(12);
-$menu-item-selected-value__line-height: rem-calc(18);
-$menu-item-selected-value__max-width: 50%;
-$menu-item-selected-value__padding: rem-calc(4) 0 rem-calc(4) rem-calc(4);
-$menu-item-selected-value__opacity: 0.6;
-$menu-item-arrow__padding-left: rem-calc(6);
-
-$modal__class: #{$prefix}-modal;
-$modal-overlay__background: rgba($md-black-100, 0.45) !default;
-
-// We use these to control the style of the modal itself.
-$modal__background: $md-white-100 !default;
-$modal__color: $md-black-100;
-$modal-message__color: $md-gray-70;
-
-// Modal Padding
-$modal__padding: rem-calc(16);
-$modal__padding--full-screen: rem-calc(24);
-$modal__padding--body: 0 rem-calc(32);
-
-// We use this to set the default radius used throughout the core.
-$modal__radius: $global-radius !default;
-
-// Modal Dialog Settings
-$modal-dialog__top: rem-calc(100);
-$modal-dialog__padding: rem-calc(20);
-$modal-dialog__border: 1px solid $black-12;
-$modal-dialog__box-shadow: 0 8px 16px 0 $black-08;
-$modal-header__padding--dialog: 0 0 rem-calc(12) 0;
-
-// Modal Header Sizes
-$modal-header__padding: $modal__padding;
-$modal-header__font-size: rem-calc(16);
-$modal-header__line-height: rem-calc(24);
-
-$modal-header__padding--large: rem-calc(32) rem-calc(16) rem-calc(16)
- rem-calc(16);
-$modal-header__font-size--large: rem-calc(26);
-$modal-header__line-height--large: rem-calc(32);
-
-$modal-header__padding--full-screen: rem-calc(32) rem-calc(16) rem-calc(16)
- rem-calc(16);
-$modal-header__font-size--full-screen: rem-calc(36);
-$modal-header__line-height--full-screen: rem-calc(48);
-
-$modal-header__font-size--mobile: rem-calc(14);
-
-// Modal Size
-$modal__width--full-screen: 100vw;
-$modal__width--large: 964px;
-$modal__width--medium: 640px;
-$modal__width--small: 480px;
-
-$modal__height--full-screen: 100vh;
-$modal__height--large: 720px;
-$modal__height--medium: 480px;
-$modal__height--small: 360px;
-
-// Modal Offset
-$modal__top--large: rem-calc(43);
-$modal__top--medium: rem-calc(47);
-$modal__top--small: rem-calc(47);
-
-$modal__top--tablet-medium: rem-calc(57);
-$modal__top--tablet-small: rem-calc(53);
-
-$event-overlay__shadow: 0 4px 12px 0 $black-16;
-$event-overlay__border-color: $md-gray-30;
-$event-overlay__border: inset 0 0 0 1px $event-overlay__border-color;
-$event-overlay__border-css-var: inset 0 0 0 1px var(--mdl-separator-primary, $event-overlay__border-color);
-$event-overlay-arrow__width: 20px;
-$event-overlay-arrow__height: 14px;
-$event-overlay__border-radius: 5px;
-
-$panel__class: '#{$prefix}-panel';
-
-$panel-input__height: rem-calc(40);
-
-$pagination-height: rem-calc(24) !default;
-$pagination-margin: rem-calc(-5) !default;
-
-$pagination-li-float: $default-float !default;
-$pagination-li-height: rem-calc(24) !default;
-$pagination-li-font-color: $md-black-100 !default;
-$pagination-li-font-size: rem-calc(14) !default;
-$pagination-li-margin: rem-calc(5) !default;
-
-$pagination-link-pad: rem-calc(1 10 1) !default;
-$pagination-link-font-color: $md-gray-50 !default;
-$pagination-link-active-bg: scale-color($md-white-100, $lightness: -10%) !default;
-
-$pagination-link-unavailable-cursor: default !default;
-$pagination-link-unavailable-font-color: $md-gray-50 !default;
-$pagination-link-unavailable-bg-active: transparent !default;
-
-$pagination-link-current-background: $md-theme-50 !default;
-$pagination-link-current-font-color: $md-white-100 !default;
-$pagination-link-current-font-weight: $font-weight-bold !default;
-$pagination-link-current-cursor: default !default;
-$pagination-link-current-active-bg: $md-theme-50 !default;
-
-$page-side-padding: 2rem;
-
-$page-header-height: 64px;
-$page-header-icon-color: $md-gray-30;
-$page-header-icon-font-size: rem-calc(36);
-$page-header-icon-margin-right: rem-calc(16);
-$page-header-nav-color: $md-gray-30;
-$page-header-nav-margin-top: rem-calc(40);
-$page-header-nav-margin-bottom: 0;
-$page-header-nav-margin-right: rem-calc(20);
-$page-header-nav-margin-left: rem-calc(20);
-$page-header-nav-font-size: rem-calc(20);
-$page-header-nav-padding-right: 0;
-$page-header-nav-padding-bottom: rem-calc(17);
-$page-header-nav-border-bottom-color: transparent;
-$page-header-nav-hover-border-bottom-color: $md-gray-30;
-$page-header-nav-active-border-bottom-color: $md-theme-50;
-$page-header-nav-active-color: $md-theme-50;
-$page-header-nav-active-hover-padding-bottom: rem-calc(24);
-
-$page-sub-header-height: 66px;
-$page-sub-header-vertical-padding: 0.75rem;
-$page-sub-header-horizontal-padding: 2rem;
-$page-sub-header-nav-color: $md-gray-30;
-$page-sub-header-nav-margin-right: rem-calc(32);
-$page-sub-header-nav-font-size: rem-calc(20);
-$page-sub-header-nav-padding-right: 0;
-$page-sub-header-nav-padding-bottom: rem-calc(12);
-$page-sub-header-nav-border-bottom-color: transparent;
-$page-sub-header-nav-hover-border-bottom-color: $md-gray-30;
-$page-sub-header-nav-active-border-bottom-color: $md-theme-50;
-$page-sub-header-nav-active-color: $md-theme-50;
-
-$popover__background: $md-white-100;
-$popover__max-width: rem-calc(276);
-$popover__border-color: $md-gray-40;
-$popover__border-color--fallback: $md-gray-40;
-$popover-title__background: $md-gray-10;
-$popover-arrow__width: rem-calc(6);
-$popover-arrow__color: $md-white-100;
-$popover-outer-arrow__width: $popover-arrow__width + 1;
-$popover-outer-arrow__color: $md-gray-50;
-$popover-outer-arrow__color--fallback: $md-gray-50;
-$popover-displacement: rem-calc(10);
-
-$progress-bar-height: rem-calc(4) !default;
-$progress-bar-color: $md-gray-10;
-
-$progress-bar-border-color: scale-color(
- $md-white-100,
- $lightness: 20%
-) !default;
-$progress-bar-border-size: 1px !default;
-$progress-bar-border-style: solid !default;
-$progress-bar-border-radius: $global-radius !default;
-
-$progress-bar-pad: 0 !default;
-$progress-bar-margin-bottom: rem-calc(10) !default;
-
-$progress-meter-color: $md-theme-50 !default;
-$progress-meter-secondary-color: $md-gray-70 !default;
-$progress-meter-success-color: $md-green-50 !default;
-$progress-meter-alert-color: $md-red-50 !default;
-$progress-meter-warning-color: $md-yellow-50;
-$progress-meter-info-color: $md-mint-50;
-
-$progress-bg: $md-gray-20;
-$progress-bar-color: $md-white-100;
-$progress-border-radius: $border-radius-base;
-$progress-bar-bg: $md-theme-50;
-$progress-bar-success-bg: $md-green-50;
-$progress-bar-warning-bg: $md-yellow-50;
-$progress-bar-danger-bg: $md-red-50;
-$progress-bar-info-bg: $md-mint-50;
-
-$radio__class: '#{$prefix}-radio';
-
-$radio__size: rem-calc(20);
-$radio__icon-size: rem-calc(8);
-$radio__label-size: rem-calc(16);
-
-$select__class: '#{$prefix}-select';
-$select-button__class: '#{$prefix}-button';
-$select-label__class: '#{$select__class}__label';
-
-$select-input__margin: (rem-calc(2) 0);
-$select--children__border: (rem-calc(1) solid $black-08);
-$select--children__box-shadow: (0 rem-calc(8) rem-calc(16) 0 $black-08);
-$select__icon--size: rem-calc(16);
-$select__icon--top: calc((#{$input__height} - #{$select__icon--size}) / 2);
-$select__icon--right: $input__padding-side;
-$select__icon--disabled: $black-40;
-$select__icon--disabled--dark: $white-40;
-
-$select--input__background-color: $black-08;
-$select--input__background-color--hover: $black-12;
-
-$select--input__background-color--dark: $white-24;
-$select--input__background-color--hover--dark: $white-32;
-
-$select__color: $black-60 !default;
-$select__color--dark: $white-60 !default;
-
-$slider__class: #{$prefix}-slider;
-
-$slider-selection__background-color: $md-theme-50;
-$slider-selection__background-color--disabled: $md-gray-30;
-$slider-selection__background-color--disabled--dark: $md-white-100;
-$slider-selection__background-color--red: $md-red-50;
-$slider-selection__background-color--green: $md-green-50;
-$slider-selection__background-color--yellow: $md-yellow-50;
-
-$slider-pointer__background-color: $md-white-100;
-$slider-pointer__background-color--hover: $md-theme-10;
-$slider-pointer__background-color--focus--dark: $md-gray-40;
-$slider-pointer__background-color--disabled: $md-gray-10;
-$slider-pointer__background-color--disabled--dark: $md-gray-40;
-
-$slider-bar__background-color: $md-gray-10;
-$slider-bar__background-color--dark: $md-gray-40;
-
-$slider-hashlabel__color: $md-gray-90;
-$slider-hashlabel__color--dark: $md-white-100;
-
-$tab--link__padding: 0 1rem;
-$tab--link-hover__bg: $md-gray-10;
-$tab--disabled-link__color: $md-gray-50;
-$tab--disabled-link-hover__color: $md-gray-50;
-$tab-tabs--hover__border: 3px solid $md-gray-50;
-$tab-tabs--active__color: $md-theme-50;
-$tab-tabs--active__border: 3px solid $md-theme-50;
-$tab-tabs--justified-active__border-color: $md-theme-50;
-$tab-pills__color: $md-black-100;
-$tab-pills__font-size: rem-calc(16);
-$tab-pills__border: 1px solid $black-08;
-$tab-pills__padding: 6px 20px;
-$tab-pills__background: $md-white-100;
-$tab-pills--active__background: $md-theme-10;
-$tab-pills--hover__background: $black-04;
-
-$toggle-switch__class: '#{$prefix}-toggle-switch';
-
-$toggle-switch__size: 20px;
-$toggle-switch__size--active: 24px;
-$toggle-switch__width: 44px;
-$toggle-switch__height: 24px;
-
-$tooltip__class: '#{$prefix}-tooltip';
-$tooltip__max-width: 200px;
-$tooltip__min-width: 40px;
-$tooltip__color: $md-white-100;
-$tooltip__background-color: $black-80;
-$tooltip__padding: 8px 12px;
-$tooltip__radius: 5px;
-$tooltip__rounded: $global-rounded;
-$tooltip-arrow__height: $event-overlay-arrow__height - 2;
-$tooltip__font-size: 16px;
-$tooltip__line-height: 24px;
-$tooltip__font-weight: $font-weight-normal;
-
-//legacy styles
-$has-tip-border-bottom: dotted 1px $md-gray-40 !default;
-$has-tip-font-weight: $font-weight-bold !default;
-$has-tip-font-color: $md-gray-90 !default;
-$has-tip-border-bottom-hover: dotted 1px
- scale-color($md-theme-50, $lightness: -55%) !default;
-$has-tip-font-color-hover: $md-theme-50 !default;
-$has-tip-cursor-type: help !default;
-$tooltip-close-font-size: rem-calc(10) !default;
-$tooltip-close-font-weight: $font-weight-normal !default;
-$tooltip-close-font-color: $md-gray-70 !default;
-
-$top-bar-class: '#{$prefix}-top-bar';
-$top-bar-mobile-class: '#{$prefix}-tb-mobile';
-
-$top-bar__height--desktop: rem-calc(80);
-$top-nav-font-size-mobile: rem-calc(14);
-
-$brand-image__size: rem-calc(36);
-$brand__font-size: rem-calc(16);
-
-$brand-image__size--medium: rem-calc(36);
-$brand__font-size--medium: rem-calc(20);
-
-$brand-image__size--large: rem-calc(48);
-
-// variables for mobile slide out menu
-$brand-image__size--mobile: rem-calc(24);
-$brand__font-size--mobile: rem-calc(20);
-$brand__line-hight--mobile: rem-calc(32);
-
-$brand-anchor__padding: rem-calc(16);
-$brand-anchor__padding--medium: rem-calc(14);
-$brand-anchor__padding--large: rem-calc(12);
-
-$top-bar__background-color--dark: $md-gray-90;
-$top-bar__background-color--light: $md-white-100;
-$top-bar__background-color--blue: $md-theme-50;
-
-$top-bar__font-color--dark: $md-white-100;
-$top-bar__font-color--light: inherit;
-
-$top-bar__font-color--dark--active: $md-theme-50;
-$top-bar__font-color--light--active: $md-theme-60;
-$top-bar__font-color--blue--active: $md-black-100;
-
-$top-bar-list-item__padding--mobile: rem-calc(32);
-$top-bar-list-item__background: transparent;
-
-$top-bar-avatar__size: rem-calc(36);
-
-$block-grid-elements: 12 !default;
-$block-grid-default-spacing: rem-calc(20) !default;
-$align-block-grid-to-grid: false !default;
-
-$side-panel-width: rem-calc(533);
-$side-panel-padding: rem-calc(16);
-$side-panel-header-height: rem-calc(77);
-$feature-line-height: rem-calc(36);
-$side-panel-large-width: calc(100vw - 100px);
-$side-panel-container-large-width: calc(100vw - 102px);
-$side-panel-view-large-transition: calc(100vw - 101px);
-
-$slider-bar-height: 4px !default;
-
-// Background color for the top bar
-$topbar-bg-color: $md-gray-90;
-$topbar-bg: $md-white-100;
-// Height and margin
-$topbar-height: rem-calc(50);
-$topbar-margin-bottom: 0;
-// Controlling the styles for the title in the top bar
-$topbar-title-weight: $font-weight-normal;
-$topbar-title-font-size: rem-calc(17);
-// Set the link colors and styles for top-level nav
-$topbar-link-color: $md-white-100;
-$topbar-link-color-hover: $md-white-100;
-$topbar-link-color-active: $md-white-100;
-$topbar-link-color-active-hover: $md-white-100;
-$topbar-link-weight: $font-weight-normal;
-$topbar-link-font-size: rem-calc(13);
-$topbar-link-hover-lightness: -10%;
-// Darken by 10%
-$topbar-link-bg: $topbar-bg;
-$topbar-link-bg-hover: $md-gray-90;
-$topbar-link-bg-color-hover: $md-gray-70;
-$topbar-link-bg-active: $md-theme-50;
-$topbar-link-bg-active-hover: scale-color($md-theme-50, $lightness: -14%);
-$topbar-link-font-family: $body-font-family;
-$topbar-link-text-transform: none;
-$topbar-link-padding: math.div($topbar-height, 3);
-$topbar-back-link-size: rem-calc(18);
-$topbar-link-dropdown-padding: rem-calc(20);
-$topbar-button-font-size: 0.75rem;
-$topbar-button-top: 7px;
-// Style the top bar dropdown elements
-$topbar-dropdown-bg: $md-gray-90;
-$topbar-dropdown-link-color: $md-white-100;
-$topbar-dropdown-link-color-hover: $topbar-link-color-hover;
-$topbar-dropdown-link-bg: $md-gray-90;
-$topbar-dropdown-link-bg-hover: $md-gray-90;
-$topbar-dropdown-link-weight: $font-weight-normal;
-$topbar-dropdown-toggle-size: 5px;
-$topbar-dropdown-toggle-color: $md-white-100;
-$topbar-dropdown-toggle-alpha: 0.4;
-$topbar-dropdown-label-color: $md-gray-70;
-$topbar-dropdown-label-text-transform: uppercase;
-$topbar-dropdown-label-font-weight: $font-weight-bold;
-$topbar-dropdown-label-font-size: rem-calc(10);
-$topbar-dropdown-label-bg: $md-gray-90;
-// Top menu icon styles
-$topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: rem-calc(13);
-$topbar-menu-link-weight: $font-weight-bold;
-$topbar-menu-link-color: $md-white-100;
-$topbar-menu-icon-color: $md-white-100;
-$topbar-menu-link-color-toggled: $md-gray-90;
-$topbar-menu-icon-color-toggled: $md-gray-90;
-$topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
-// Transitions and breakpoint styles
-$topbar-transition-speed: 300ms;
-//Using rem-calc for the below breakpoint causes issues with top bar
-$topbar-breakpoint: #{lower-bound($medium-range)};
-// Change to 9999px for always mobile layout
-$topbar-media-query: $medium-up;
-// Top-bar input styles
-$topbar-input-height: rem-calc(28);
-// Divider Styles
-$topbar-divider-border-bottom: solid 1px
- scale-color($topbar-bg-color, $lightness: 13%);
-$topbar-divider-border-top: solid 1px
- scale-color($topbar-bg-color, $lightness: -50%);
-// Sticky Class
-$topbar-sticky-class: '.sticky';
-$topbar-arrows: true;
-//Set false to remove the triangle icon from the menu item
-$topbar-dropdown-arrows: true;
-// Accessibility mixins for hiding and showing the menu dropdown items
-// Top Bar links
-$top-bar-default-link-color: $md-gray-70;
-$top-bar-default-link-hover-color: $md-gray-90;
-$top-bar-default-link-hover-bg: $md-gray-20;
-$top-bar-default-link-active-color: $md-white-100;
-$top-bar-default-link-active-bg: $md-theme-50;
-$top-bar-default-link-disabled-color: $md-gray-70;
-$top-bar-default-link-disabled-bg: transparent;
-
-// Inverted top-bar
-// Reset inverted top-bar basics
-$top-bar-inverse-border: $md-gray-90;
-
-// Inverted top-bar links
-$top-bar-inverse-link-color: $md-gray-70;
-$top-bar-inverse-link-disabled-color: $md-black-100;
-
-// Admin top-bar
-// Reset Admin top-bar basics
-$top-bar-admin-color: $md-gray-50;
-$top-bar-admin-border: $md-gray-40;
-
-// Admin Top Bar links
-$top-bar-admin-link-color: $md-gray-70;
-$top-bar-admin-link-hover-color: $md-black-100;
-$top-bar-admin-link-hover-bg: $md-gray-20;
-$top-bar-admin-link-active-color: $md-white-100;
-$top-bar-admin-link-active-bg: $md-theme-50;
-$top-bar-admin-link-disabled-color: $md-gray-70;
-$top-bar-admin-link-disabled-bg: transparent;
-
-// Admin Top Bar brand label
-$top-bar-admin-brand-color: $md-gray-70;
-$top-bar-admin-brand-hover-color: darken($top-bar-admin-brand-color, 10%);
-$top-bar-admin-brand-hover-bg: transparent;
-
-// Admin Top Bar toggle
-$top-bar-admin-toggle-hover-bg: $md-gray-40;
-$top-bar-admin-toggle-icon-bar-bg: $md-gray-40;
-$top-bar-admin-toggle-border-color: $md-gray-40;
-
-// Top Bar User Variables
-$top-bar-user-height: rem-calc(68) !default;
-$top-bar-mobile-height: rem-calc(48) !default;
diff --git a/scss/ng/settings/sidepanel.scss b/scss/ng/settings/sidepanel.scss
deleted file mode 100644
index 4934f4301b..0000000000
--- a/scss/ng/settings/sidepanel.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$side-panel-width: rem-calc(533);
-$side-panel-padding: rem-calc(16);
-$side-panel-header-height: rem-calc(77);
-$feature-line-height: rem-calc(36);
-$side-panel-large-width: calc(100vw - 100px);
-$side-panel-container-large-width: calc(100vw - 102px);
-$side-panel-view-large-transition: calc(100vw - 101px);
diff --git a/scss/ng/settings/slider.scss b/scss/ng/settings/slider.scss
deleted file mode 100644
index c9a3a75cec..0000000000
--- a/scss/ng/settings/slider.scss
+++ /dev/null
@@ -1 +0,0 @@
-$slider-bar-height: 4px !default;
diff --git a/scss/ng/settings/topbar.scss b/scss/ng/settings/topbar.scss
deleted file mode 100644
index d1340869df..0000000000
--- a/scss/ng/settings/topbar.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-// Background color for the top bar
-@use "sass:math";
-
-$topbar-bg-color: $md-gray-90;
-$topbar-bg: $md-white-100;
-// Height and margin
-$topbar-height: rem-calc(50);
-$topbar-margin-bottom: 0;
-// Controlling the styles for the title in the top bar
-$topbar-title-weight: $font-weight-normal;
-$topbar-title-font-size: rem-calc(17);
-// Set the link colors and styles for top-level nav
-$topbar-link-color: $md-white-100;
-$topbar-link-color-hover: $md-white-100;
-$topbar-link-color-active: $md-white-100;
-$topbar-link-color-active-hover: $md-white-100;
-$topbar-link-weight: $font-weight-normal;
-$topbar-link-font-size: rem-calc(13);
-$topbar-link-hover-lightness: -10%;
-// Darken by 10%
-$topbar-link-bg: $topbar-bg;
-$topbar-link-bg-hover: $md-gray-90;
-$topbar-link-bg-color-hover: $md-gray-70;
-$topbar-link-bg-active: $md-theme-50;
-$topbar-link-bg-active-hover: scale-color($md-theme-50, $lightness: -14%);
-$topbar-link-font-family: $body-font-family;
-$topbar-link-text-transform: none;
-$topbar-link-padding: math.div($topbar-height, 3);
-$topbar-back-link-size: rem-calc(18);
-$topbar-link-dropdown-padding: rem-calc(20);
-$topbar-button-font-size: 0.75rem;
-$topbar-button-top: 7px;
-// Style the top bar dropdown elements
-$topbar-dropdown-bg: $md-gray-90;
-$topbar-dropdown-link-color: $md-white-100;
-$topbar-dropdown-link-color-hover: $topbar-link-color-hover;
-$topbar-dropdown-link-bg: $md-gray-90;
-$topbar-dropdown-link-bg-hover: $md-gray-90;
-$topbar-dropdown-link-weight: $font-weight-normal;
-$topbar-dropdown-toggle-size: 5px;
-$topbar-dropdown-toggle-color: $md-white-100;
-$topbar-dropdown-toggle-alpha: 0.4;
-$topbar-dropdown-label-color: $md-gray-70;
-$topbar-dropdown-label-text-transform: uppercase;
-$topbar-dropdown-label-font-weight: $font-weight-bold;
-$topbar-dropdown-label-font-size: rem-calc(10);
-$topbar-dropdown-label-bg: $md-gray-90;
-// Top menu icon styles
-$topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: rem-calc(13);
-$topbar-menu-link-weight: $font-weight-bold;
-$topbar-menu-link-color: $md-white-100;
-$topbar-menu-icon-color: $md-white-100;
-$topbar-menu-link-color-toggled: $md-gray-90;
-$topbar-menu-icon-color-toggled: $md-gray-90;
-$topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
-// Transitions and breakpoint styles
-$topbar-transition-speed: 300ms;
-//Using rem-calc for the below breakpoint causes issues with top bar
-$topbar-breakpoint: #{lower-bound($medium-range)};
-// Change to 9999px for always mobile layout
-$topbar-media-query: $medium-up;
-// Top-bar input styles
-$topbar-input-height: rem-calc(28);
-// Divider Styles
-$topbar-divider-border-bottom: solid 1px
- scale-color($topbar-bg-color, $lightness: 13%);
-$topbar-divider-border-top: solid 1px
- scale-color($topbar-bg-color, $lightness: -50%);
-// Sticky Class
-$topbar-sticky-class: '.sticky';
-$topbar-arrows: true;
-//Set false to remove the triangle icon from the menu item
-$topbar-dropdown-arrows: true;
-// Accessibility mixins for hiding and showing the menu dropdown items
-// Top Bar links
-$top-bar-default-link-color: $md-gray-70;
-$top-bar-default-link-hover-color: $md-gray-90;
-$top-bar-default-link-hover-bg: $md-gray-20;
-$top-bar-default-link-active-color: $md-white-100;
-$top-bar-default-link-active-bg: $md-theme-50;
-$top-bar-default-link-disabled-color: $md-gray-70;
-$top-bar-default-link-disabled-bg: transparent;
-
-// Inverted top-bar
-// Reset inverted top-bar basics
-$top-bar-inverse-border: $md-gray-90;
-
-// Inverted top-bar links
-$top-bar-inverse-link-color: $md-gray-70;
-$top-bar-inverse-link-disabled-color: $md-black-100;
-
-// Admin top-bar
-// Reset Admin top-bar basics
-$top-bar-admin-color: $md-gray-50;
-$top-bar-admin-border: $md-gray-40;
-
-// Admin Top Bar links
-$top-bar-admin-link-color: $md-gray-70;
-$top-bar-admin-link-hover-color: $md-black-100;
-$top-bar-admin-link-hover-bg: $md-gray-20;
-$top-bar-admin-link-active-color: $md-white-100;
-$top-bar-admin-link-active-bg: $md-theme-50;
-$top-bar-admin-link-disabled-color: $md-gray-70;
-$top-bar-admin-link-disabled-bg: transparent;
-
-// Admin Top Bar brand label
-$top-bar-admin-brand-color: $md-gray-70;
-$top-bar-admin-brand-hover-color: darken($top-bar-admin-brand-color, 10%);
-$top-bar-admin-brand-hover-bg: transparent;
-
-// Admin Top Bar toggle
-$top-bar-admin-toggle-hover-bg: $md-gray-40;
-$top-bar-admin-toggle-icon-bar-bg: $md-gray-40;
-$top-bar-admin-toggle-border-color: $md-gray-40;
-
-// Top Bar User Variables
-$top-bar-user-height: rem-calc(68) !default;
-$top-bar-mobile-height: rem-calc(48) !default;
diff --git a/scss/ng/setup-assistant.scss b/scss/ng/setup-assistant.scss
deleted file mode 100644
index 3a19d3ce61..0000000000
--- a/scss/ng/setup-assistant.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-// @import '../settings/core';
-
-@include exports('ng-setupassistant') {
- .md-setupassistant {
- display: flex;
- justify-content: center;
- flex-direction: row;
-
- .round {
- z-index: 1000;
- width: rem-calc(50);
- height: rem-calc(50);
- font-size: rem-calc(24);
- }
-
- .btn--left {
- padding-right: rem(13px);
- margin-right: rem(29px);
- margin-left: 1rem;
- }
-
- .btn--right {
- padding-left: rem(3px);
- margin-right: 1rem;
- margin-left: rem(19px);
- }
-
- .btn-helptext {
- &.active.enabled {
- display: inline-block;
- }
-
- position: absolute;
- top: rem-calc(40);
- right: 0;
- left: 0;
- display: none;
- width: 150%;
- padding-top: 1rem;
- margin-left: -25%;
- font-size: 0.9rem;
- text-align: center;
- }
- }
-
- .md-setupassistant--buttons {
- position: relative;
- display: flex;
- justify-content: center;
- flex-direction: column;
-
- button span {
- font-size: 32px;
- }
- }
-
- .md-setupassistant--content {
- position: relative;
- flex: 1 1 100%;
-
- .typeahead-large {
- margin-top: calc(53vh - #{$top-bar-height + $overlay-panel-height});
- }
-
- .md-card header {
- padding: 0.5rem !important;
- }
- }
-
- .slide-left,
- .slide-right {
- &.ng-enter,
- &.ng-leave {
- position: absolute;
- top: 0px;
- right: 0;
- bottom: 0;
- left: 0;
- overflow: hidden;
- background: inherit;
- transition: 0.7s ease-in-out;
- }
- }
-
- .slide-left {
- &.ng-enter {
- z-index: 100;
- opacity: 0;
- transform: translateX(100%);
-
- &.ng-enter-active {
- opacity: 0.5;
- transform: translateX(0);
- }
- }
-
- &.ng-leave {
- opacity: 0.5;
- transform: translateX(0);
-
- &.ng-leave-active {
- opacity: 0;
- transform: translateX(-100%);
- }
- }
- }
-
- .slide-right {
- &.ng-enter {
- opacity: 0;
- transform: translateX(-100%);
-
- &.ng-enter-active {
- opacity: 0.5;
- transform: translateX(0);
- }
- }
-
- &.ng-leave {
- opacity: 0.5;
- transform: translateX(0);
-
- &.ng-leave-active {
- opacity: 0;
- transform: translateX(100%);
- }
- }
- }
-}
diff --git a/scss/ng/side-panel.scss b/scss/ng/side-panel.scss
deleted file mode 100644
index f7ccddfe27..0000000000
--- a/scss/ng/side-panel.scss
+++ /dev/null
@@ -1,452 +0,0 @@
-// @import '../colors/settings';
-// @import '../typography/settings';
-// @import 'settings/sidepanel';
-// @import '../settings/z-index';
-// @import '../tools/mixins/center-block';
-// @import '../tools/mixins/clearfix';
-// @import '../tools/mixins/easing';
-// @import '../tools/mixins/spacing';
-// @import '../tools/mixins/text-hide';
-// @import '../tools/mixins/text-overflow';
-// @import '../utilities/core';
-// @import '~@momentum-ui/icons/scss/mixins';
-@import '~@momentum-ui/icons/scss/symphony/variable-mapping';
-
-$sidepanel-header-content-height: rem-calc(40);
-
-@include exports('ng-sidepanel') {
- .sidepanel-modal:focus {
- outline: none;
- }
-
- .side-panel {
- position: fixed;
- top: 52px;
- right: -$side-panel-width;
- z-index: $zindex-drawer;
- width: $side-panel-width;
- height: calc(100vh - 52px);
- background: $md-white-100;
- box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);
-
- @include easing-transition(all, 500ms, $ease);
-
- .sidepanel-modal.in & {
- transform: translateX(-$side-panel-width);
- }
-
- &.large {
- width: $side-panel-large-width;
- border: 1px solid $md-gray-30;
- box-shadow: none;
- }
-
- .feature {
- display: flex;
- padding: 0 $side-panel-padding;
- margin: 0 #{-$side-panel-padding};
- line-height: $feature-line-height;
-
- a {
- display: flex;
- padding: 0 $side-panel-padding;
- margin: 0 #{-$side-panel-padding};
- line-height: $feature-line-height;
- color: $md-gray-70;
- text-decoration: none;
- cursor: pointer;
- flex: 1;
-
- @include easing-transition(all, 150ms, $linear);
-
- &:hover,
- &:focus,
- &:active {
- color: $md-theme-50;
- text-decoration: none;
-
- .feature-details,
- .feature-status {
- color: $md-theme-50;
- }
- }
-
- .feature-arrow {
- @include icon;
-
- width: auto;
- font-size: rem-calc(24);
- line-height: $feature-line-height;
-
- &:before {
- @include icon-arrow-right_24;
- }
- }
-
- &:hover,
- &:focus {
- background-color: rgba($md-gray-10, 0.75);
- }
- }
-
- .feature-icon {
- @include icon;
-
- font-size: 1rem;
- line-height: $feature-line-height;
-
- &:before {
- margin-right: rem-calc(14);
- line-height: $feature-line-height;
- }
- }
- }
-
- /**
- * SIDE PANEL CLOSE
- */
- .side-panel-close {
- position: absolute;
- top: rem-calc(16);
- right: rem-calc(16);
-
- .panel-close {
- line-height: 1;
-
- &:before {
- font-size: rem-calc(16);
- }
-
- &:focus {
- outline: none;
- }
- }
- }
-
- /**
- * SIDE PANEL HEADER
- */
- .side-panel-header {
- display: flex;
- height: $side-panel-header-height;
- padding: $side-panel-padding $side-panel-padding rem-calc(20);
- border-bottom: 1px solid $md-gray-30;
- }
-
- .header-image {
- width: $sidepanel-header-content-height;
- height: $sidepanel-header-content-height;
- margin-right: rem-calc(16);
-
- .icon {
- font-size: $sidepanel-header-content-height;
- line-height: 1;
- opacity: 0.5;
- }
-
- .user-img .icon {
- font-size: rem-calc(20);
- line-height: 2;
- opacity: inherit;
- }
- }
-
- .user-img {
- width: $sidepanel-header-content-height;
- height: $sidepanel-header-content-height;
- }
-
- .header-info {
- display: flex;
- width: 100%;
- height: $sidepanel-header-content-height;
- min-width: 0;
- align-items: center;
-
- .feature-arrow {
- padding-top: 5px;
- padding-bottom: 5px;
- line-height: 1;
- }
-
- .header-info-wrap {
- width: 100%;
- }
- }
-
- .header-title {
- display: flex;
- // padding-top: rem-calc(2);
- margin-bottom: rem-calc(6);
- font-family: $brand-font-light;
- font-size: rem-calc(16);
- line-height: 1;
- color: $md-gray-70;
- align-items: center;
-
- span {
- font-size: inherit;
- }
-
- > span {
- @include text-overflow;
-
- max-width: 80%;
- }
- }
-
- .edit-button {
- font-size: rem-calc(16);
- color: $md-gray-40;
-
- @include vr-spacing(ml, 0.25);
-
- &:hover {
- color: $md-theme-50;
- }
- }
-
- .header-sub-info {
- position: relative;
- font-family: $brand-font-light;
- font-size: rem-calc(12);
- line-height: 1;
- color: $md-gray-70;
-
- @include text-overflow;
- }
-
- /**
- * SIDEPANEL CONTAINER
- */
- md-sp-container {
- position: relative;
- display: block;
- }
-
- /**
- * BREADCRUMBS
- */
- .breadcrumb {
- padding: 10px 0;
- margin-bottom: 0;
- font-family: $body-font-family;
- font-size: $font-size-small;
-
- > li {
- line-height: rem-calc(14);
-
- + li:before {
- font-family: $icon-font-name;
- font-size: rem-calc(14);
- color: $md-gray-70;
- vertical-align: middle;
- content: $icon-arrow-next;
- }
-
- > a {
- color: $md-theme-50;
- cursor: pointer;
-
- &:hover,
- &:focus,
- &:active {
- color: $md-gray-70;
- }
- }
- }
-
- .active {
- color: $md-gray-70;
- }
- }
-
- /**
- * SIDE PANEL SECTION
- */
- .side-panel-section {
- padding-bottom: rem-calc(14);
- color: $md-gray-70;
- border-bottom: 1px solid $md-gray-30;
- }
-
- .section-name {
- margin-right: rem-calc(24);
- font-family: $brand-font-regular;
- font-size: rem-calc(14);
- }
-
- .feature-list {
- ul {
- padding: 0;
- margin: 0;
- list-style: none;
- }
- }
-
- .feature-name {
- margin: 0;
- font-family: $brand-font-light;
- font-size: rem-calc(14);
- font-weight: 550;
- line-height: inherit;
- color: $md-gray-70;
- flex: 1;
- }
-
- .section-title-row {
- display: flex;
- padding: rem-calc(24) 0 rem-calc(12);
- font-family: $brand-font-regular;
- color: $md-gray-70;
- align-items: center;
- justify-content: space-between;
-
- a {
- &:focus,
- &:active {
- color: $md-theme-50;
- text-decoration: none;
- }
-
- &:hover {
- text-decoration: none;
- }
- }
-
- &.feature-inline {
- padding-bottom: 0;
- }
- }
-
- .section-content {
- font-family: $brand-font-light;
- font-size: rem-calc(14);
- line-height: 1.4;
- color: $md-gray-70;
- }
-
- .feature-details,
- .feature-status {
- font-family: $body-font-family;
- font-size: rem-calc(12);
- color: $md-gray-50;
- }
-
- .feature-status {
- padding-right: 10px;
- line-height: inherit;
- }
-
- .feature-details {
- padding-left: 10px;
- line-height: inherit;
- }
-
- /**
- * SIDE PANEL BUTTONS
- */
- .button-container {
- position: absolute;
- top: -1px;
- z-index: $zindex-popover;
- display: flex;
- width: 100%;
- padding: 5px 25px;
- background-color: $md-gray-10;
- border-top: 1px solid $md-gray-30;
- border-bottom: 1px solid $md-gray-30;
- opacity: 1;
- transform: translateY(0);
- justify-content: flex-start;
- flex-direction: row-reverse; // TODO: Remove after reordering buttons in Atlas
-
- @extend .clearfix;
-
- button {
- margin: 0 0 0 0.5rem;
- }
-
- // TODO: Remove after reordering buttons in Atlas
- .ng-hide-add.ng-hide-add-active &,
- .ng-hide-remove.ng-hide-remove-active & {
- -webkit-transition: all ease 0.5s;
- transition: all ease 0.5s;
- }
-
- .ng-hide & {
- opacity: 0;
- transform: translateY(-50);
- }
- }
-
- /**
- * SIDE PANEL VIEW
- */
- .side-panel-view {
- position: absolute;
- top: 0;
- right: 0;
- height: auto;
- background-color: $md-white-100;
-
- &.ng-enter,
- &.ng-leave {
- @include easing-transition(all, 500ms, $ease);
- }
-
- &.ng-enter,
- &.ng-leave.ng-leave-active {
- transform: translateX($side-panel-width);
- }
-
- &.ng-leave,
- &.ng-enter.ng-enter-active {
- transform: translateX(0);
- }
- }
-
- .form-group {
- padding-right: 0;
- padding-left: 0;
- }
- }
-
- /**
- * SIDE PANEL END
- */
-
- .side-panel-container {
- width: $side-panel-width;
- height: calc(100vh - #{$side-panel-header-height});
- padding: 0 $side-panel-padding $side-panel-padding;
- overflow-x: auto;
- background: $md-white-100;
- }
-
- .large {
- .side-panel-container {
- width: $side-panel-container-large-width;
- }
-
- .side-panel-view {
- &.ng-enter,
- &.ng-leave.ng-leave-active {
- transform: translateX($side-panel-view-large-transition);
- }
- }
- }
-
- .side-panel-full-height {
- top: 0;
- height: 100vh;
- box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.2);
- }
-
- @media (max-width: $side-panel-width) {
- .side-panel,
- .side-panel-container {
- width: 100vw;
- }
- }
-}
diff --git a/scss/ng/table.scss b/scss/ng/table.scss
deleted file mode 100644
index 60968c629a..0000000000
--- a/scss/ng/table.scss
+++ /dev/null
@@ -1,275 +0,0 @@
-@import '../colors/settings';
-@import '../settings/core';
-
-//
-// @name _tables.scss
-// @dependencies _global.scss
-//
-
-//
-// @variables
-//
-
-// These control the background color for the table and even rows
-$table-bg: $md-white-100 !default;
-$table-even-row-bg: $md-white-100 !default;
-
-// These control the table cell border style
-$table-border-style: solid !default;
-$table-border-size: 1px !default;
-$table-border-color: $md-gray-40 !default;
-
-// These control the table head styles
-$table-head-bg: $md-gray-20 !default;
-$table-head-font-size: rem-calc(14) !default;
-$table-head-font-color: $md-black-100 !default;
-$table-head-font-weight: $font-weight-bold !default;
-$table-head-padding: rem-calc(8 10 10) !default;
-
-// These control the table foot styles
-$table-foot-bg: $table-head-bg !default;
-$table-foot-font-size: $table-head-font-size !default;
-$table-foot-font-color: $table-head-font-color !default;
-$table-foot-font-weight: $table-head-font-weight !default;
-$table-foot-padding: $table-head-padding !default;
-
-// These control the caption
-$table-caption-bg: transparent !default;
-$table-caption-font-color: $table-head-font-color !default;
-$table-caption-font-size: rem-calc(16) !default;
-$table-caption-font-weight: 750 !default;
-
-// These control the row padding and font styles
-$table-row-padding: rem-calc(9 10) !default;
-$table-row-font-size: rem-calc(14) !default;
-$table-row-font-color: $md-black-100 !default;
-$table-line-height: rem-calc(18) !default;
-
-// These are for controlling the layout, display and margin of tables
-$table-layout: auto !default;
-$table-display: table-cell !default;
-$table-margin-bottom: rem-calc(20) !default;
-
-//
-// @mixins
-//
-
-@mixin table {
- margin-bottom: $table-margin-bottom;
- background: $table-bg;
- border: $table-border-style $table-border-size $table-border-color;
- table-layout: $table-layout;
-
- caption {
- color: $table-caption-font-color;
- background: $table-caption-bg;
- font: {
- size: $table-caption-font-size;
- weight: $table-caption-font-weight;
- }
- }
-
- thead {
- background: $table-head-bg;
-
- tr {
- th,
- td {
- padding: $table-head-padding;
- font-size: $table-head-font-size;
- font-weight: $table-head-font-weight;
- color: $table-head-font-color;
- }
- }
- }
-
- tfoot {
- background: $table-foot-bg;
-
- tr {
- th,
- td {
- padding: $table-foot-padding;
- font-size: $table-foot-font-size;
- font-weight: $table-foot-font-weight;
- color: $table-foot-font-color;
- }
- }
- }
-
- tr {
- th,
- td {
- padding: $table-row-padding;
- font-size: $table-row-font-size;
- color: $table-row-font-color;
- text-align: $default-float;
- }
-
- &.even,
- &.alt,
- &:nth-of-type(even) {
- background: $table-even-row-bg;
- }
- }
-
- thead tr th,
- tfoot tr th,
- tfoot tr td,
- tbody tr th,
- tbody tr td,
- tr td {
- display: $table-display;
- line-height: $table-line-height;
- }
-}
-
-@include exports('table') {
- table {
- @include table;
- }
-}
-
-/* begin tables override */
-@mixin table {
- width: 100%;
-
- //border: $table-border-style $table-border-size $table-border-color;
- margin-bottom: $table-margin-bottom;
- background: $table-bg;
- table-layout: $table-layout;
-
- caption {
- color: $table-caption-font-color;
- background: $table-caption-bg;
- font: {
- size: $table-caption-font-size;
- weight: $table-caption-font-weight;
- }
- }
-
- thead {
- tr {
- line-height: vr-adjust(24px) - rem($table-border-size);
- border-top: $table-border-style $table-border-size transparent;
-
- th,
- td {
- font-size: $table-head-font-size;
- font-weight: $table-head-font-weight;
- color: $table-head-font-color;
-
- //padding: $table-head-padding;
- }
- }
- }
-
- tbody {
- tr {
- line-height: vr-adjust(24px) + rem($table-border-size);
- border-top: $table-border-style $table-border-size $table-border-color;
- }
- }
-
- tfoot {
- tr {
- line-height: vr-adjust(24px) - rem($table-border-size);
-
- th,
- td {
- font-size: $table-foot-font-size;
- font-weight: $table-foot-font-weight;
- color: $table-foot-font-color;
-
- //padding: $table-foot-padding;
- }
- }
- }
-
- tr {
- th,
- td {
- font-size: $table-row-font-size;
- color: $table-row-font-color;
-
- //padding: $table-row-padding;
- text-align: $default-float;
- }
- }
-
- &.table-striped {
- thead,
- tfoot {
- background: $table-foot-bg;
- }
-
- tr {
- &.even,
- &.alt,
- &:nth-of-type(even) {
- background: $table-even-row-bg;
- }
- }
- }
-
- thead tr th,
- tfoot tr th,
- tfoot tr td,
- tbody tr th,
- tbody tr td,
- tr td {
- display: $table-display;
- padding: ($table-row-padding * 0.5) $table-row-padding;
- line-height: vr-adjust(24px) - rem($table-border-size);
- }
-
- &.table-bordered {
- margin-top: -1px;
- border: $table-border-style $table-border-size $table-border-color;
-
- thead {
- tr {
- border-top: $table-border-style $table-border-size $table-border-color;
-
- td {
- //line-height: vr-adjust(24px) - rem($table-border-size);
- }
- }
- }
-
- thead tr th,
- tfoot tr th,
- tfoot tr td,
- tbody tr th,
- tbody tr td,
- tr td {
- display: $table-display;
- padding: ($table-row-padding * 0.5) $table-row-padding;
- line-height: vr-adjust(24px) - rem($table-border-size);
- }
- }
-
- &.table-condensed {
- thead tr th,
- tfoot tr th,
- tfoot tr td,
- tbody tr th,
- tbody tr td,
- tr td {
- padding: 0 $table-row-padding;
- }
- }
-}
-
-@include exports('table-bem') {
- table {
- @include table;
- }
-
- table td[class*='col-'],
- table th[class*='col-'] {
- position: static;
- display: table-cell;
- float: none;
- }
-}
diff --git a/scss/ng/tabs.scss b/scss/ng/tabs.scss
deleted file mode 100644
index 65e520af7a..0000000000
--- a/scss/ng/tabs.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-// compatability in Atlas
-@include exports('ng-tabs') {
- .#{$prefix}-tab--tabs {
- .#{$prefix}-tab__item {
- > a {
- &.nav-link {
- position: relative;
- top: 18px;
- padding-right: 0px;
- padding-bottom: 20px;
- margin-right: 20px;
- margin-left: 20px;
- }
-
- &.nav-link:hover {
- padding-bottom: 18px;
- }
-
- &.nav-link.sub-nav-link {
- padding-bottom: 16px;
- }
-
- &.nav-link.sub-nav-link:hover {
- padding-bottom: 14px;
- }
- }
-
- &.active > a {
- // compatability in Atlas
- &.nav-link,
- &.nav-link:hover,
- &.nav-link:focus {
- padding-bottom: 18px;
- }
-
- &.nav-link.sub-nav-link,
- &.nav-link.sub-nav-link:hover,
- &.nav-link.sub-nav-link:focus {
- padding-bottom: 14px;
- }
- }
- }
-
- .center {
- display: flex;
- justify-content: center;
- }
- }
-
- .#{$prefix}-tab--justified {
- .#{$prefix}-tab__list {
- display: flex;
-
- .#{md}-tab__item {
- flex-grow: 1;
- }
- }
- }
-}
diff --git a/scss/ng/timepicker.scss b/scss/ng/timepicker.scss
deleted file mode 100644
index b54c21a7be..0000000000
--- a/scss/ng/timepicker.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@include exports('ng-timepicker') {
- .md-timepicker__dropdown {
- position: absolute;
- }
-}
diff --git a/scss/ng/tokenfield.scss b/scss/ng/tokenfield.scss
deleted file mode 100644
index dad6e97aaf..0000000000
--- a/scss/ng/tokenfield.scss
+++ /dev/null
@@ -1,248 +0,0 @@
-// @import '../components/input/settings';
-// @import '../colors/settings';
-// @import '../components/forms/settings';
-// @import '../components/close/settings';
-// @import '../components/close/close';
-
-@include exports('ng-tokenfield') {
- @-moz-keyframes blink {
- 0% {
- border-color: $md-gray-30;
- }
-
- 100% {
- border-color: #b94a48;
- }
- }
-
- @keyframes blink {
- 0% {
- border-color: $md-gray-30;
- }
-
- 100% {
- border-color: #b94a48;
- }
- }
-
- .tokenfield {
- height: auto;
- height: auto;
- min-height: $input__height;
- padding-top: 8px;
- padding-bottom: 3px;
- font-family: $brand-font-cisco-TT-Extra-Light;
- border-radius: $global-radius;
- }
-
- .tokenfield.focus {
- border-color: transparent;
- outline: 0;
- box-shadow: 0 0 0 2px $md-theme-50;
-
- ::placeholder {
- color: $gray;
- }
- }
-
- .tokenfield.form-control-static.focus {
- box-shadow: none;
- }
-
- .tokenfield .token {
- display: inline-block;
- padding-top: 10px;
- padding-right: 12px;
- padding-bottom: 10px;
- padding-left: 12px;
- margin-right: 5px;
- margin-bottom: 5px;
- color: $md-white-100;
- white-space: pre;
- vertical-align: top;
- cursor: default;
- background-color: $md-mint-70;
- border: none;
- border-radius: $global-radius;
- box-sizing: border-box;
- }
-
- .tokenfield .token.duplicate {
- border-color: #ebccd1;
- animation-duration: 0.1s;
- animation-iteration-count: infinite;
- animation-name: blink;
- animation-timing-function: ease;
- animation-direction: normal;
- }
-
- .tokenfield .token.invalid {
- background-color: $md-red-50 !important;
- border-color: $md-red-60;
-
- .token-label {
- color: $md-white-100;
- }
- }
-
- .tokenfield .token.invalid.active {
- background: $md-red-60;
- border-color: $md-red-60;
- }
-
- .tokenfield .token .token-label {
- display: inline-block;
- padding: 7px 5px 5px 0;
- overflow: hidden;
- line-height: 1;
- text-overflow: ellipsis;
- vertical-align: top;
- }
-
- .tokenfield .token .close {
- @extend .md-close;
-
- position: relative;
- top: 1px;
- display: inline-block;
- float: none;
- height: 100%;
- padding-right: 4px;
- margin-left: 5px;
- font-family: Arial;
- font-size: 1.1em;
- font-weight: 450;
- line-height: 100%;
- line-height: 1.6em;
- color: $md-white-100;
- text-shadow: none;
- vertical-align: top;
- opacity: 1;
-
- &:hover,
- &:focus {
- color: $close__font-color--focus;
- text-decoration: none;
- cursor: pointer;
- }
- }
-
- .token.invalid .close {
- color: $md-white-100;
- }
-
- .tokenfield .token-input {
- width: 60px;
- min-width: 60px;
- padding: 0 0 3px 12px;
- margin-top: 3px;
- background: none;
- border: 0;
- box-shadow: none;
-
- form:not(.form-inline) & {
- margin-bottom: 0;
- }
- }
-
- .tokenfield .token-input:focus {
- background: transparent;
- border-color: transparent;
- outline: 0;
- /* IE6-9 */
- box-shadow: none;
- }
-
- .tokenfield.disabled {
- cursor: not-allowed;
- background-color: $md-gray-30;
- }
-
- .tokenfield.disabled .token-input {
- cursor: not-allowed;
- }
-
- .tokenfield.disabled .token:hover {
- cursor: not-allowed;
- border-color: $md-gray-30;
- }
-
- .tokenfield.disabled .token:hover .close {
- cursor: not-allowed;
- opacity: 0.2;
- filter: alpha(opacity=20);
- }
-
- .has-warning .tokenfield.focus {
- border-color: #66512c;
- }
-
- .has-error .tokenfield.focus {
- border-color: #843534;
- }
-
- .has-success .tokenfield.focus {
- border-color: #2b542c;
- }
-
- .tokenfield.input-sm,
- .input-container-sm .tokenfield {
- min-height: 30px;
- padding-bottom: 0px;
- }
-
- .input-container-sm .token,
- .tokenfield.input-sm .token {
- height: 20px;
- margin-bottom: 4px;
- }
-
- .input-container-sm .token-input,
- .tokenfield.input-sm .token-input {
- height: 18px;
- margin-bottom: 5px;
- }
-
- .tokenfield.input-lg,
- .input-container-lg .tokenfield {
- min-height: 45px;
- padding-bottom: 4px;
- }
-
- .input-container-lg .token,
- .tokenfield.input-lg .token {
- height: 25px;
- }
-
- .input-container-lg .token-label,
- .tokenfield.input-lg .token-label {
- line-height: 23px;
- }
-
- .input-container-lg .token .close,
- .tokenfield.input-lg .token .close {
- line-height: 1.3em;
- }
-
- .input-container-lg .token-input,
- .tokenfield.input-lg .token-input {
- height: 23px;
- margin-bottom: 6px;
- line-height: 23px;
- vertical-align: top;
- }
-
- .tokenfield.rtl {
- text-align: right;
- direction: rtl;
- }
-
- .tokenfield.rtl .token {
- margin: -1px 0 5px 5px;
- }
-
- .tokenfield.rtl .token .token-label {
- padding-right: 4px;
- padding-left: 0px;
- }
-}
diff --git a/scss/ng/tooltip-ng.scss b/scss/ng/tooltip-ng.scss
deleted file mode 100644
index 54e8333825..0000000000
--- a/scss/ng/tooltip-ng.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-// @import '../tools/functions/core';
-// @import '../tools/mixins/core';
-// @import '../components/tooltip/settings';
-
-@include exports('tooltip-ng') {
- @media #{$small} {
- .tooltip {
- .nub {
- top: -24px;
- left: calc(50% - #{$tooltip-arrow__height});
- border-color: transparent transparent $tooltip__background-color
- transparent;
- }
-
- &.tip-top,
- &.tip-top-left,
- &.tip-top-right {
- .nub {
- top: auto;
- bottom: -24px;
- border-color: $tooltip__background-color transparent transparent
- transparent;
- }
- }
-
- &.tip-left,
- &.tip-right {
- float: none;
- }
-
- &.tip-left {
- .nub {
- top: 50%;
- right: -($tooltip-arrow__height * 2);
- left: auto;
- margin-top: -$tooltip-arrow__height;
- border-color: transparent transparent transparent
- $tooltip__background-color;
- }
- }
-
- &.tip-right {
- .nub {
- top: 50%;
- right: auto;
- left: -($tooltip-arrow__height * 2);
- margin-top: -$tooltip-arrow__height;
- border-color: transparent $tooltip__background-color transparent
- transparent;
- }
- }
- }
- }
-
- .tooltip {
- position: absolute;
- z-index: $zindex-tooltip;
- display: none;
- width: 100%;
- padding: 8px 0;
- background: $tooltip__background-color;
- border-radius: $global-radius;
- box-shadow: 0 8px 16px 0 $black-08;
-
- > .c-nub {
- display: block;
- max-width: $tooltip__max-width;
- min-width: $tooltip__min-width;
- padding: $tooltip__padding;
- font-family: $brand-font-regular;
- font-size: $tooltip__font-size;
- font-weight: $tooltip__font-weight;
- line-height: $tooltip__line-height;
- color: $tooltip__color;
- text-align: center;
- border: $tooltip__background-color;
- }
-
- > .nub {
- position: absolute;
- bottom: 0;
- left: calc(50% - 0.5rem);
- z-index: $zindex-tooltip + 1;
- display: block;
- width: 0;
- height: 0;
- pointer-events: none;
- border: solid $tooltip-arrow__height;
- border-color: transparent transparent $tooltip__background-color
- transparent;
-
- .rtl {
- left: auto;
- #{$opposite-direction}: $tooltip-arrow__height;
- }
-
- #{$default-float}: $tooltip-arrow__height;
- }
-
- .radius {
- @include radius($tooltip__radius);
- }
-
- .opened {
- color: $has-tip-font-color-hover;
- border-bottom: $has-tip-border-bottom-hover;
- }
-
- #{$default-float}: 50%;
- }
-
- .tap-to-close {
- display: block;
- font-size: $tooltip-close-font-size;
- font-weight: $tooltip-close-font-weight;
- color: $tooltip-close-font-color;
- }
-}
diff --git a/scss/ng/topbar-admin.scss b/scss/ng/topbar-admin.scss
deleted file mode 100644
index f22ba44625..0000000000
--- a/scss/ng/topbar-admin.scss
+++ /dev/null
@@ -1,976 +0,0 @@
-@import 'topbar';
-
-// TODO: (pajeter) Needs to be re-written after re-design
-@include exports('top-bar-admin') {
- // Used to provide media query values for javascript components.
- // to ensure width calculations work correctly.
- meta.foundation-mq-topbar {
- width: $topbar-breakpoint;
- font-family: '/' + unquote($topbar-media-query) + '/';
- }
-
- .top-bar {
- height: $topbar-height + rem-calc(2);
-
- // Topbar Global list Styles
- ul {
- padding: 0;
- margin: 0;
- list-style: none;
- }
-
- button {
- &:hover,
- &:focus {
- box-shadow: none;
- }
- }
-
- button.btn--header {
- position: relative;
- display: flex;
- height: $topbar-height + rem-calc(2);
- min-width: initial;
- padding: 0 1rem;
- font-size: 13px;
- background: 0 0;
- border: none;
- border-radius: 0;
- transition: all 350ms ease-in-out;
- align-items: center;
-
- div {
- display: flex;
- flex-direction: row;
- }
-
- &:hover,
- &:focus {
- color: $md-theme-50;
- background-color: $md-gray-10;
-
- .icon {
- color: $md-theme-50;
- }
- }
-
- .icon {
- font-size: 20px;
- vertical-align: middle;
-
- @media (min-width: 1070px) {
- padding-right: 0.5rem;
- color: $md-gray-30;
- }
- }
- }
-
- .left {
- display: inline-flex;
- flex: 1;
- margin-left: rem-calc(6);
-
- .top-bar__transclude {
- display: flex;
- align-items: center;
- height: $topbar-height;
- }
- }
-
- .right {
- display: inline-flex;
-
- ng-include:first-child button {
- border-left: 1px solid $top-bar-admin-border;
-
- .inverse & {
- border-left: 1px solid $top-bar-inverse-border;
- }
- }
-
- ng-include > div {
- vertical-align: top;
- }
-
- & button {
- vertical-align: top;
- border-left: 1px solid $top-bar-admin-border;
-
- .inverse & {
- border-color: $top-bar-inverse-border;
- }
-
- &:first-child {
- border-left: 1px solid $top-bar-admin-border;
-
- .inverse & {
- border-color: $top-bar-inverse-border;
- }
- }
-
- &:last-child {
- border-right: none;
- }
- }
- }
-
- .app-icon {
- margin: 0 22px 0 6px;
- font-size: 1.7rem;
- color: $md-theme-50;
-
- .inverse & {
- color: $md-gray-20;
- }
- }
-
- .user-info {
- height: $top-bar-height;
-
- .btn--user {
- height: rem-calc(52);
- padding: 7px 17px;
- cursor: pointer;
- background: 0 0;
- border: none;
- border-radius: 0;
-
- &:hover,
- &:focus {
- background: #eee;
-
- .user-name {
- color: $md-theme-70;
-
- .inverse & {
- color: $md-theme-70;
- }
- }
-
- .org-name {
- color: $md-theme-60;
- }
- }
-
- li {
- width: 128px;
- padding: 0;
- overflow: hidden;
- line-height: 1;
- text-align: left;
- text-overflow: ellipsis;
- white-space: nowrap;
- list-style: none;
- }
-
- .user-name {
- font-size: 13px;
- color: #383a41;
-
- .inverse & {
- color: $md-gray-30;
- }
- }
-
- .org-name {
- margin-top: 3px;
- font-size: 12px;
- color: $md-gray-40;
- }
- }
-
- .user-img {
- display: inline-block;
- width: 35px;
- height: 35px;
- overflow: hidden;
- text-align: center;
- vertical-align: middle;
- background-color: #d9d9d9;
- background-image: none;
- background-repeat: no-repeat;
- background-size: cover;
- border-radius: 50%;
-
- .icon {
- bottom: -5px;
- font-size: 30px;
- line-height: 35px;
- color: #fff;
- }
- }
-
- .user-info-text {
- display: none;
-
- @media (min-width: 960px) {
- display: inline-block;
- padding: 4px 0 4px 10px;
- margin: 0;
- text-align: left;
- vertical-align: middle;
- }
- }
-
- .dropdown-menu {
- top: calc(100% + 2px);
- right: -1px;
- left: auto;
-
- @media (min-width: 960px) {
- .org-name,
- .user-name,
- .divider {
- display: none;
- }
- }
-
- li {
- &.user-name,
- &.org-name {
- padding: 0 10px;
- line-height: 1;
- white-space: nowrap;
- }
-
- &.user-name {
- padding-top: 10px;
- }
-
- &.org-name {
- padding-bottom: 10px;
- }
-
- &.divider {
- margin: 0;
- }
-
- &.clickable {
- cursor: pointer;
-
- &:hover,
- &:focus {
- color: $md-white-100;
- text-decoration: none;
- background-color: $md-gray-20;
- }
- }
- }
- }
- }
-
- .settings-menu {
- .dropdown-menu {
- top: 100%;
- right: -1px;
- left: auto;
-
- &:after,
- &:before {
- right: 24px;
- left: auto;
- }
- }
- }
-
- .dropdown-menu {
- margin-top: 0;
- overflow: visible;
- font-size: 13px;
- border: none;
- border-top-right-radius: 0;
- border-top-left-radius: 0;
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
-
- li {
- padding: 0;
- }
-
- & > li:first-child > a,
- & > li:last-child > a,
- & > li:first-child > span,
- & > li:last-child > span {
- border-radius: 0;
- }
- }
-
- .row {
- max-width: none;
- }
-
- form,
- input,
- select {
- margin-bottom: 0;
- }
-
- input,
- select {
- height: $topbar-input-height;
- padding-top: 0.35rem;
- padding-bottom: 0.35rem;
- font-size: $topbar-button-font-size;
- }
-
- .button,
- button {
- padding-top: 0.35rem + rem-calc(1);
- padding-bottom: 0.35rem + rem-calc(1);
- margin-bottom: 0;
- font-size: $topbar-button-font-size;
-
- // position: relative;
- // top: -1px;
- // Corrects a slight misalignment when put next to an input field
- @media #{$small-only} {
- position: relative;
- top: -1px;
- }
- }
-
- // Title Area
- .title-area {
- position: relative;
- margin: 0;
- }
-
- .name {
- display: inline-flex;
- height: $topbar-height;
- padding-right: 1rem;
- padding-left: 1rem;
- margin: 0;
- font-size: $rem-base;
- align-items: center;
-
- h1,
- h2,
- h3,
- h4,
- p,
- span {
- margin: 0;
- font-size: $topbar-title-font-size;
- line-height: $topbar-height;
-
- a {
- display: block;
- width: 75%;
- padding: 0 $topbar-link-padding;
- font-weight: $topbar-title-weight;
- color: $topbar-link-color;
- }
- }
- }
-
- // Menu toggle button on small devices
- .toggle-topbar {
- position: absolute;
- #{$topbar-menu-icon-position}: 0;
- top: 0;
-
- a {
- position: relative;
- display: block;
- height: $topbar-height;
- padding: 0 $topbar-link-padding;
- font-size: $topbar-menu-link-font-size;
- font-weight: $topbar-menu-link-weight;
- line-height: $topbar-height;
- color: $topbar-link-color;
- text-transform: $topbar-menu-link-transform;
- }
-
- // Adding the class "menu-icon" will add the 3-line icon people love and adore.
- &.menu-icon {
- top: 50%;
- margin-top: -16px;
-
- a {
- @include hamburger(
- 16px,
- false,
- 0,
- 1px,
- 6px,
- $topbar-menu-icon-color,
- '',
- false
- );
-
- @if $text-direction==rtl {
- text-indent: -58px;
- }
-
- position: relative;
- height: 34px;
- padding: 0 ($topbar-link-padding + rem-calc(25)) 0
- $topbar-link-padding;
- line-height: 33px;
- color: $topbar-menu-link-color;
- }
- }
- }
-
- // Change things up when the top-bar is expanded
- &.expanded {
- height: auto;
- background: transparent;
-
- .title-area {
- background: $topbar-bg;
- }
-
- .toggle-topbar {
- a {
- color: $topbar-menu-link-color-toggled;
-
- span::after {
- // Shh, don't tell, but box-shadows create the menu icon :)
- // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
- box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
- 0 7px 0 1px $topbar-menu-icon-color-toggled,
- 0 14px 0 1px $topbar-menu-icon-color-toggled;
- }
- }
- }
-
- // Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
- @media screen and (-webkit-min-device-pixel-ratio: 0) {
- .top-bar-section {
- .has-dropdown.moved > .dropdown,
- .dropdown {
- clip: initial;
- }
-
- // This was needed as parent ul's had padding, and the clip: was allowing content to peak through
- .has-dropdown:not(.moved) > ul {
- padding: 0;
- }
- }
- }
- }
- }
-
- // Right and Left Navigation that stacked by default
- .top-bar-section {
- #{$default-float}: 0;
- position: relative;
- width: auto;
-
- @include single-transition($default-float, $topbar-transition-speed);
-
- ul {
- display: block;
- width: 100%;
- height: auto;
- padding: 0;
- margin: 0;
- font-size: $rem-base;
- }
-
- .divider,
- [role='separator'] {
- width: 100%;
- height: 1px;
- clear: both;
- border-top: $topbar-divider-border-top;
- }
-
- ul li {
- background: $topbar-dropdown-bg;
-
- > a {
- display: block;
- width: 100%;
- padding: 12px 0 12px $topbar-link-padding;
- font-family: $topbar-link-font-family;
- font-size: $topbar-link-font-size;
- font-weight: $topbar-link-weight;
- color: $topbar-link-color;
- text-transform: $topbar-link-text-transform;
- padding-#{$default-float}: $topbar-link-padding;
-
- &.button {
- font-size: $topbar-link-font-size;
- padding-#{$default-float}: $topbar-link-padding;
- padding-#{$opposite-direction}: $topbar-link-padding;
-
- @include button-color($bg: $md-theme-50);
- }
-
- &.button.secondary {
- @include button-color($bg: $md-gray-70);
- }
-
- &.button.success {
- @include button-color($bg: $md-green-50);
- }
-
- &.button.alert {
- @include button-color($bg: $md-red-50);
- }
-
- &.button.warning {
- @include button-color($bg: $md-yellow-50);
- }
-
- &.button.info {
- @include button-color($bg: $md-mint-50);
- }
- }
-
- > button {
- font-size: $topbar-link-font-size;
- padding-#{$default-float}: $topbar-link-padding;
- padding-#{$opposite-direction}: $topbar-link-padding;
-
- @include button-color($bg: $md-theme-50);
-
- &.secondary {
- @include button-color($bg: $md-gray-70);
- }
-
- &.success {
- @include button-color($bg: $md-green-50);
- }
-
- &.alert {
- @include button-color($bg: $md-red-50);
- }
-
- &.warning {
- @include button-color($bg: $md-yellow-50);
- }
-
- &.info {
- @include button-color($bg: $md-mint-50);
- }
- }
-
- // Apply the hover link color when it has that class
- &:hover:not(.has-form) > a {
- color: $topbar-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
-
- // Apply the active link color when it has that class
- &.active > a {
- color: $topbar-link-color-active;
- background: $topbar-link-bg-active;
-
- &:hover {
- color: $topbar-link-color-active-hover;
- background: $topbar-link-bg-active-hover;
- }
- }
- }
-
- // Add some extra padding for list items contains buttons
- .has-form {
- padding: $topbar-link-padding;
- }
-
- // Styling for list items that have a dropdown within them.
- .has-dropdown {
- position: relative;
-
- > a {
- &:after {
- @if $topbar-arrows {
- @include css-triangle(
- $topbar-dropdown-toggle-size,
- rgba(
- $topbar-dropdown-toggle-color,
- $topbar-dropdown-toggle-alpha
- ),
- $default-float
- );
- }
-
- margin-#{$opposite-direction}: $topbar-link-padding;
- position: absolute;
- top: 50%;
- margin-top: -($topbar-dropdown-toggle-size * 0.5) - 2;
- #{$opposite-direction}: 0;
- }
- }
-
- &.moved {
- position: static;
-
- > .dropdown {
- @include topbar-show-dropdown;
-
- width: 100%;
- }
-
- > a:after {
- display: none;
- }
- }
- }
-
- // Styling elements inside of dropdowns
- .dropdown {
- @include topbar-hide-dropdown;
-
- position: absolute;
- top: 0;
- z-index: 99;
- padding: 0;
- #{$default-float}: 100%;
-
- li {
- width: 100%;
- height: auto;
-
- a {
- padding: 8px $topbar-link-padding;
- font-weight: $topbar-dropdown-link-weight;
-
- &.parent-link {
- font-weight: $topbar-link-weight;
- }
- }
-
- &.title h5,
- &.parent-link {
- margin-top: 0;
- // Back Button
- margin-bottom: 0;
- font-size: $topbar-back-link-size;
-
- a {
- // line-height: ($topbar-height / 2);
- display: block;
- color: $topbar-link-color;
-
- &:hover {
- background: none;
- }
- }
- }
-
- &.has-form {
- padding: 8px $topbar-link-padding;
- }
-
- .button,
- button {
- top: auto;
- }
- }
-
- label {
- padding: 8px $topbar-link-padding 2px;
- margin-bottom: 0;
- font-size: $topbar-dropdown-label-font-size;
- font-weight: $topbar-dropdown-label-font-weight;
- color: $topbar-dropdown-label-color;
- text-transform: $topbar-dropdown-label-text-transform;
- }
- }
- }
-
- .js-generated {
- display: block;
- }
-
- // Top Bar styles intended for screen sizes above the breakpoint.
- @media #{$topbar-media-query} {
- .top-bar {
- @include clearfix;
-
- overflow: visible;
- background: $topbar-bg;
-
- .toggle-topbar {
- display: none;
- }
-
- .title-area {
- float: $default-float;
- }
-
- .name h1 a,
- .name h2 a,
- .name h3 a,
- .name h4 a,
- .name h5 a,
- .name h6 a {
- width: auto;
- }
-
- input,
- select,
- .button,
- button {
- height: $topbar-input-height;
- font-size: rem-calc(14);
- color: $md-gray-40;
- // position: relative;
- // top: (($topbar-height - $topbar-input-height) / 2);
- }
-
- &.expanded {
- background: $topbar-bg;
- }
- }
-
- .contain-to-grid .top-bar {
- max-width: $row-width;
- margin: 0 auto;
- margin-bottom: $topbar-margin-bottom;
- }
-
- .top-bar-section {
- @include single-transition(none, 0, 0);
-
- #{$default-float}: 0 !important;
-
- ul {
- display: inline;
- width: auto;
- height: auto !important;
-
- li {
- float: $default-float;
-
- .js-generated {
- display: none;
- }
- }
- }
-
- li {
- &.hover {
- > a:not(.button) {
- color: $topbar-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
- }
-
- &:not(.has-form) {
- a:not(.button) {
- padding: 0 $topbar-link-padding;
- line-height: $topbar-height;
- background: $topbar-link-bg;
-
- &:hover {
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
- }
- }
-
- &.active:not(.has-form) {
- a:not(.button) {
- padding: 0 $topbar-link-padding;
- line-height: $topbar-height;
- color: $topbar-link-color-active;
- background: $topbar-link-bg-active;
-
- &:hover {
- color: $topbar-link-color-active-hover;
- background: $topbar-link-bg-active-hover;
- }
- }
- }
- }
-
- .has-dropdown {
- @if $topbar-arrows {
- > a {
- padding-#{$opposite-direction}: (
- $topbar-link-padding + $topbar-link-dropdown-padding
- ) !important;
-
- &:after {
- @include css-triangle(
- $topbar-dropdown-toggle-size,
- rgba(
- $topbar-dropdown-toggle-color,
- $topbar-dropdown-toggle-alpha
- ),
- top
- );
-
- top: $topbar-height * 0.5;
- margin-top: -($topbar-dropdown-toggle-size * 0.5);
- }
- }
- }
-
- &.moved {
- position: relative;
-
- > .dropdown {
- @include topbar-hide-dropdown;
- }
- }
-
- &.hover,
- &.not-click:hover {
- > .dropdown {
- @include topbar-show-dropdown;
- }
- }
-
- > a:focus + .dropdown {
- @include topbar-show-dropdown;
- }
-
- .dropdown li.has-dropdown {
- > a {
- @if $topbar-dropdown-arrows {
- &:after {
- top: rem-calc(3);
- border: none;
- content: '\00bb';
- #{$opposite-direction}: 5px;
- }
- }
- }
- }
- }
-
- .dropdown {
- #{$default-float}: 0;
- top: auto;
- min-width: 100%;
- background: transparent;
-
- li {
- a {
- padding: 12px $topbar-link-padding;
- line-height: $topbar-height;
- color: $topbar-dropdown-link-color;
- white-space: nowrap;
- background: $topbar-dropdown-link-bg;
- }
-
- &:not(.has-form):not(.active) {
- > a:not(.button) {
- color: $topbar-dropdown-link-color;
- background: $topbar-dropdown-link-bg;
- }
-
- &:hover > a:not(.button) {
- color: $topbar-dropdown-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-dropdown-link-bg-hover {
- background: $topbar-dropdown-link-bg-hover;
- }
- }
- }
-
- label {
- white-space: nowrap;
- background: $topbar-dropdown-label-bg;
- }
-
- // Second Level Dropdowns
- .dropdown {
- #{$default-float}: 100%;
- top: 0;
- }
- }
- }
-
- > ul > .divider,
- > ul > [role='separator'] {
- border-#{$opposite-direction}: $topbar-divider-border-bottom;
- width: 0;
- height: $topbar-height;
- clear: none;
- border-top: none;
- border-bottom: none;
- }
-
- .has-form {
- height: $topbar-height;
- padding: 0 $topbar-link-padding;
- background: $topbar-link-bg;
- }
-
- // Position overrides for ul.right and ul.left
- .#{$opposite-direction} {
- li .dropdown {
- #{$default-float}: auto;
- #{$opposite-direction}: 0;
-
- li .dropdown {
- #{$opposite-direction}: 100%;
- }
- }
- }
-
- .#{$default-float} {
- li .dropdown {
- #{$opposite-direction}: auto;
- #{$default-float}: 0;
-
- li .dropdown {
- #{$default-float}: 100%;
- }
- }
- }
- }
-
- // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
- // background & text color on hover.
- .no-js .top-bar-section {
- ul li {
- // Apply the hover link color when it has that class
- &:hover > a {
- color: $topbar-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
-
- // Apply the active link color when it has that class
- &:active > a {
- color: $topbar-link-color-active;
- background: $topbar-link-bg-active;
- }
- }
-
- .has-dropdown {
- &:hover {
- > .dropdown {
- @include topbar-show-dropdown;
- }
- }
-
- > a:focus + .dropdown {
- @include topbar-show-dropdown;
- }
- }
- }
- }
-
- .header-label {
- display: none;
-
- @media (min-width: 1070px) {
- align-self: center;
- display: inline-block;
- }
- }
-}
diff --git a/scss/ng/topbar-user.scss b/scss/ng/topbar-user.scss
deleted file mode 100644
index 03b8f7d372..0000000000
--- a/scss/ng/topbar-user.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// @import 'topbar';
-
-@include exports('top-bar-user') {
- .sign-out {
- margin-right: 0;
- }
-
- .top-bar--user {
- background-color: $md-white-100;
- box-shadow: 0px -2px 2px 2px #858688;
-
- @media #{$medium-up} {
- @include vr-spacing(pt, 1);
- }
-
- .top-bar {
- height: $top-bar-mobile-height;
- overflow: visible;
- box-shadow: none;
-
- @media #{$medium-up} {
- height: $top-bar-user-height;
- }
-
- .app-logo {
- @include vr-spacing(mt, -1);
-
- .icon {
- display: flex;
- font-size: rem-calc(26);
- color: $md-gray-30;
- align-items: center;
-
- @include vr-spacing(pr, 1);
- }
-
- img {
- width: 48px;
- max-width: none;
- margin: 0 auto;
- }
- }
-
- .app-name {
- display: flex;
- // @extend %h4;
- font-family: $brand-font-extra-light;
- color: $md-gray-90;
- align-items: center;
-
- @media #{$small-only} {
- display: none;
- }
- }
-
- .title-area {
- display: flex;
- align-items: center;
- }
- }
- }
-}
diff --git a/scss/ng/topbar.scss b/scss/ng/topbar.scss
deleted file mode 100644
index 176f8f5a30..0000000000
--- a/scss/ng/topbar.scss
+++ /dev/null
@@ -1,1340 +0,0 @@
-// @import '../components/button/settings';
-// @import '../components/topbar/settings';
-// @import '../colors/settings';
-// @import 'settings/topbar';
-// @import '../components/button/mixins';
-// @import '../tools/mixins/core';
-// @import '../tools/mixins/text-overflow';
-// @import '../tools/mixins/spacing';
-// @import '../typography/placeholders';
-// @import '~@momentum-ui/icons/scss/mixins';
-// @import '../../colors/settings';
-// @import '../../typography/settings';
-// @import '../../tools/functions/core';
-
-@mixin topbar-hide-dropdown {
- // Makes an element visually hidden by default, but visible when focused.
- @include element-invisible();
-
- display: block;
-}
-
-@mixin topbar-show-dropdown {
- @include element-invisible-off();
-
- position: absolute !important; // Reset the position from static to absolute
- display: block;
-}
-
-@include exports('top-bar-ng') {
- .contain-to-grid {
- width: 100%;
- background: $topbar-bg;
-
- .top-bar {
- margin-bottom: $topbar-margin-bottom;
- }
- }
- // Wrapped around .top-bar to make it stick to the top
- .fixed {
- position: fixed;
- top: 0;
- z-index: $zindex-top-bar-fixed;
- width: 100%;
- #{$default-float}: 0;
-
- &.expanded:not(.top-bar) {
- width: 100%;
- height: auto;
- max-height: 100%;
- overflow-y: auto;
-
- .title-area {
- position: fixed;
- z-index: 99;
- width: 100%;
- }
- // Ensure you can scroll the menu on small screens
- .top-bar-section {
- z-index: 98;
- margin-top: $topbar-height;
- }
- }
- }
-
- .top-bar__transclude {
- flex: 1;
- }
-
- .top-bar {
- position: relative;
- display: flex;
- height: $topbar-height + rem-calc(2);
- margin-bottom: $topbar-margin-bottom;
- overflow: hidden;
- font-family: $brand-font-extra-light;
- color: $md-gray-30;
- background: $topbar-bg;
- // Topbar Global list Styles
- ul {
- padding: 0;
- margin: 0;
- list-style: none;
- }
-
- button {
- &:hover,
- &:focus {
- box-shadow: none;
- }
- }
-
- button.btn--header {
- position: relative;
- display: flex;
- height: $topbar-height + rem-calc(2);
- min-width: initial;
- padding: 0 1rem;
- font-size: 13px;
- background: 0 0;
- border: none;
- border-radius: 0;
- transition: all 350ms ease-in-out;
- align-items: center;
-
- div {
- display: flex;
- flex-direction: row;
- }
-
- &:hover,
- &:focus {
- color: $md-theme-50;
- background-color: $md-gray-10;
-
- .icon {
- color: $md-theme-50;
- }
- }
-
- .icon {
- font-size: 20px;
- vertical-align: middle;
-
- @media (min-width: 1070px) {
- padding-right: 0.5rem;
- color: $md-gray-30;
- }
- }
- }
-
- .left {
- display: inline-flex;
- margin-left: rem-calc(6);
- flex: 1;
-
- .top-bar__transclude {
- display: flex;
- height: $topbar-height;
- align-items: center;
- }
- }
-
- .right {
- display: inline-flex;
-
- ng-include:first-child button {
- border-left: 1px solid $top-bar-admin-border;
-
- .inverse & {
- border-left: 1px solid $top-bar-inverse-border;
- }
- }
-
- ng-include > div {
- vertical-align: top;
- }
-
- & button {
- vertical-align: top;
- border-left: 1px solid $top-bar-admin-border;
-
- .inverse & {
- border-color: $top-bar-inverse-border;
- }
-
- &:first-child {
- border-left: 1px solid $top-bar-admin-border;
-
- .inverse & {
- border-color: $top-bar-inverse-border;
- }
- }
-
- &:last-child {
- border-right: none;
- }
- }
- }
-
- .app-icon {
- margin: 0 22px 0 6px;
- font-size: 1.7rem;
- color: $md-theme-50;
-
- .inverse & {
- color: $md-gray-20;
- }
- }
-
- .user-info {
- height: $top-bar-height;
-
- .btn--user {
- height: rem-calc(52);
- padding: 7px 17px;
- cursor: pointer;
- background: 0 0;
- border: none;
- border-radius: 0;
-
- &:hover,
- &:focus {
- background: #eee;
-
- .user-name {
- color: $md-theme-70;
-
- .inverse & {
- color: $md-theme-70;
- }
- }
-
- .org-name {
- color: $md-theme-60;
- }
- }
-
- li {
- width: 128px;
- padding: 0;
- overflow: hidden;
- line-height: 1;
- text-align: left;
- text-overflow: ellipsis;
- white-space: nowrap;
- list-style: none;
- }
-
- .user-name {
- font-size: 13px;
- color: #383a41;
-
- .inverse & {
- color: $md-gray-30;
- }
- }
-
- .org-name {
- margin-top: 3px;
- font-size: 12px;
- color: $md-gray-40;
- }
- }
-
- .user-img {
- display: inline-block;
- width: 35px;
- height: 35px;
- overflow: hidden;
- text-align: center;
- vertical-align: middle;
- background-color: #d9d9d9;
- background-image: none;
- background-repeat: no-repeat;
- background-size: cover;
- border-radius: 50%;
-
- .icon {
- bottom: -5px;
- font-size: 30px;
- line-height: 35px;
- color: #fff;
- }
- }
-
- .user-info-text {
- display: none;
-
- @media (min-width: 960px) {
- display: inline-block;
- padding: 4px 0 4px 10px;
- margin: 0;
- text-align: left;
- vertical-align: middle;
- }
- }
-
- .dropdown-menu {
- top: calc(100% + 2px);
- right: -1px;
- left: auto;
-
- @media (min-width: 960px) {
- .org-name,
- .user-name,
- .divider {
- display: none;
- }
- }
-
- li {
- &.user-name,
- &.org-name {
- padding: 0 10px;
- line-height: 1;
- white-space: nowrap;
- }
-
- &.user-name {
- padding-top: 10px;
- }
-
- &.org-name {
- padding-bottom: 10px;
- }
-
- &.divider {
- margin: 0;
- }
-
- &.clickable {
- cursor: pointer;
-
- &:hover,
- &:focus {
- color: $md-white-100;
- text-decoration: none;
- background-color: $md-gray-20;
- }
- }
- }
- }
- }
-
- .settings-menu {
- .dropdown-menu {
- top: 100%;
- right: -1px;
- left: auto;
-
- &:after,
- &:before {
- right: 24px;
- left: auto;
- }
- }
- }
-
- .dropdown-menu {
- margin-top: 0;
- overflow: visible;
- font-size: 13px;
- border: none;
- border-top-right-radius: 0;
- border-top-left-radius: 0;
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
-
- li {
- padding: 0;
- }
-
- & > li:first-child > a,
- & > li:last-child > a,
- & > li:first-child > span,
- & > li:last-child > span {
- border-radius: 0;
- }
- }
-
- .row {
- max-width: none;
- }
-
- form,
- input,
- select {
- margin-bottom: 0;
- }
-
- input,
- select {
- height: $topbar-input-height;
- padding-top: 0.35rem;
- padding-bottom: 0.35rem;
- font-size: $topbar-button-font-size;
- }
-
- .button,
- button {
- padding-top: 0.35rem + rem-calc(1);
- padding-bottom: 0.35rem + rem-calc(1);
- margin-bottom: 0;
- font-size: $topbar-button-font-size;
- // position: relative;
- // top: -1px;
- // Corrects a slight misalignment when put next to an input field
- @media #{$small-only} {
- position: relative;
- top: -1px;
- }
- }
- // Title Area
- .title-area {
- position: relative;
- margin: 0;
- }
-
- .name {
- display: inline-flex;
- height: $topbar-height;
- padding-right: 1rem;
- padding-left: 1rem;
- margin: 0;
- font-size: $rem-base;
- align-items: center;
-
- h1,
- h2,
- h3,
- h4,
- p,
- span {
- margin: 0;
- font-size: $topbar-title-font-size;
- line-height: $topbar-height;
-
- a {
- display: block;
- width: 75%;
- padding: 0 $topbar-link-padding;
- font-weight: $topbar-title-weight;
- color: $topbar-link-color;
- }
- }
- }
- // Menu toggle button on small devices
- .toggle-topbar {
- position: absolute;
- top: 0;
- #{$topbar-menu-icon-position}: 0;
-
- a {
- position: relative;
- display: block;
- height: $topbar-height;
- padding: 0 $topbar-link-padding;
- font-size: $topbar-menu-link-font-size;
- font-weight: $topbar-menu-link-weight;
- line-height: $topbar-height;
- color: $topbar-link-color;
- text-transform: $topbar-menu-link-transform;
- }
- // Adding the class "menu-icon" will add the 3-line icon people love and adore.
- &.menu-icon {
- top: 50%;
- margin-top: -16px;
-
- a {
- @include hamburger(
- 16px,
- false,
- 0,
- 1px,
- 6px,
- $topbar-menu-icon-color,
- '',
- false
- );
-
- @if $text-direction==rtl {
- text-indent: -58px;
- }
-
- position: relative;
- height: 34px;
- padding: 0 ($topbar-link-padding + rem-calc(25)) 0
- $topbar-link-padding;
- line-height: 33px;
- color: $topbar-menu-link-color;
- }
- }
- }
- // Change things up when the top-bar is expanded
- &.expanded {
- height: auto;
- background: transparent;
-
- .title-area {
- background: $topbar-bg;
- }
-
- .toggle-topbar {
- a {
- color: $topbar-menu-link-color-toggled;
-
- span::after {
- // Shh, don't tell, but box-shadows create the menu icon :)
- // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
- box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
- 0 7px 0 1px $topbar-menu-icon-color-toggled,
- 0 14px 0 1px $topbar-menu-icon-color-toggled;
- }
- }
- }
- // Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
- @media screen and (-webkit-min-device-pixel-ratio: 0) {
- .top-bar-section {
- .has-dropdown.moved > .dropdown,
- .dropdown {
- clip: initial;
- }
- // This was needed as parent ul's had padding, and the clip: was allowing content to peak through
- .has-dropdown:not(.moved) > ul {
- padding: 0;
- }
- }
- }
- }
- }
- // Right and Left Navigation that stacked by default
- .top-bar-section {
- #{$default-float}: 0;
- position: relative;
- width: auto;
-
- @include single-transition($default-float, $topbar-transition-speed);
-
- ul {
- display: block;
- width: 100%;
- height: auto;
- padding: 0;
- margin: 0;
- font-size: $rem-base;
- }
-
- .divider,
- [role='separator'] {
- width: 100%;
- height: 1px;
- clear: both;
- border-top: $topbar-divider-border-top;
- }
-
- ul li {
- background: $topbar-dropdown-bg;
-
- > a {
- display: block;
- width: 100%;
- padding: 12px 0 12px $topbar-link-padding;
- font-family: $topbar-link-font-family;
- font-size: $topbar-link-font-size;
- font-weight: $topbar-link-weight;
- color: $topbar-link-color;
- text-transform: $topbar-link-text-transform;
- padding-#{$default-float}: $topbar-link-padding;
-
- &.button {
- font-size: $topbar-link-font-size;
- padding-#{$default-float}: $topbar-link-padding;
- padding-#{$opposite-direction}: $topbar-link-padding;
-
- @include button-color($bg: $md-theme-50);
- }
-
- &.button.secondary {
- @include button-color($bg: $md-gray-70);
- }
-
- &.button.success {
- @include button-color($bg: $md-green-50);
- }
-
- &.button.alert {
- @include button-color($bg: $md-red-50);
- }
-
- &.button.warning {
- @include button-color($bg: $md-yellow-50);
- }
-
- &.button.info {
- @include button-color($bg: $md-mint-50);
- }
- }
-
- > button {
- font-size: $topbar-link-font-size;
- padding-#{$default-float}: $topbar-link-padding;
- padding-#{$opposite-direction}: $topbar-link-padding;
-
- @include button-color($bg: $md-theme-50);
-
- &.secondary {
- @include button-color($bg: $md-gray-70);
- }
-
- &.success {
- @include button-color($bg: $md-green-50);
- }
-
- &.alert {
- @include button-color($bg: $md-red-50);
- }
-
- &.warning {
- @include button-color($bg: $md-yellow-50);
- }
-
- &.info {
- @include button-color($bg: $md-mint-50);
- }
- }
- // Apply the hover link color when it has that class
- &:hover:not(.has-form) > a {
- color: $topbar-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
- // Apply the active link color when it has that class
- &.active > a {
- color: $topbar-link-color-active;
- background: $topbar-link-bg-active;
-
- &:hover {
- color: $topbar-link-color-active-hover;
- background: $topbar-link-bg-active-hover;
- }
- }
- }
- // Add some extra padding for list items contains buttons
- .has-form {
- padding: $topbar-link-padding;
- }
- // Styling for list items that have a dropdown within them.
- .has-dropdown {
- position: relative;
-
- > a {
- &:after {
- @if $topbar-arrows {
- @include css-triangle(
- $topbar-dropdown-toggle-size,
- rgba(
- $topbar-dropdown-toggle-color,
- $topbar-dropdown-toggle-alpha
- ),
- $default-float
- );
- }
-
- margin-#{$opposite-direction}: $topbar-link-padding;
- position: absolute;
- top: 50%;
- margin-top: -($topbar-dropdown-toggle-size * 0.5) - 2;
- #{$opposite-direction}: 0;
- }
- }
-
- &.moved {
- position: static;
-
- > .dropdown {
- @include topbar-show-dropdown;
-
- width: 100%;
- }
-
- > a:after {
- display: none;
- }
- }
- }
- // Styling elements inside of dropdowns
- .dropdown {
- @include topbar-hide-dropdown;
-
- position: absolute;
- top: 0;
- z-index: 99;
- padding: 0;
- #{$default-float}: 100%;
-
- li {
- width: 100%;
- height: auto;
-
- a {
- padding: 8px $topbar-link-padding;
- font-weight: $topbar-dropdown-link-weight;
-
- &.parent-link {
- font-weight: $topbar-link-weight;
- }
- }
-
- &.title h5,
- &.parent-link {
- margin-top: 0;
- // Back Button
- margin-bottom: 0;
- font-size: $topbar-back-link-size;
-
- a {
- // line-height: ($topbar-height / 2);
- display: block;
- color: $topbar-link-color;
-
- &:hover {
- background: none;
- }
- }
- }
-
- &.has-form {
- padding: 8px $topbar-link-padding;
- }
-
- .button,
- button {
- top: auto;
- }
- }
-
- label {
- padding: 8px $topbar-link-padding 2px;
- margin-bottom: 0;
- font-size: $topbar-dropdown-label-font-size;
- font-weight: $topbar-dropdown-label-font-weight;
- color: $topbar-dropdown-label-color;
- text-transform: $topbar-dropdown-label-text-transform;
- }
- }
- }
-
- .js-generated {
- display: block;
- }
- // Top Bar styles intended for screen sizes above the breakpoint.
- @media #{$topbar-media-query} {
- .top-bar {
- @include clearfix;
-
- overflow: visible;
- background: $topbar-bg;
-
- .toggle-topbar {
- display: none;
- }
-
- .title-area {
- float: $default-float;
- }
-
- .name h1 a,
- .name h2 a,
- .name h3 a,
- .name h4 a,
- .name h5 a,
- .name h6 a {
- width: auto;
- }
-
- input,
- select,
- .button,
- button {
- height: $topbar-input-height;
- font-size: rem-calc(14);
- color: $md-gray-40;
- // position: relative;
- // top: (($topbar-height - $topbar-input-height) / 2);
- }
-
- &.expanded {
- background: $topbar-bg;
- }
- }
-
- .contain-to-grid .top-bar {
- max-width: $row-width;
- margin: 0 auto;
- margin-bottom: $topbar-margin-bottom;
- }
-
- .top-bar-section {
- @include single-transition(none, 0, 0);
-
- #{$default-float}: 0 !important;
-
- ul {
- display: inline;
- width: auto;
- height: auto !important;
-
- li {
- float: $default-float;
-
- .js-generated {
- display: none;
- }
- }
- }
-
- li {
- &.hover {
- > a:not(.button) {
- color: $topbar-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
- }
-
- &:not(.has-form) {
- a:not(.button) {
- padding: 0 $topbar-link-padding;
- line-height: $topbar-height;
- background: $topbar-link-bg;
-
- &:hover {
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
- }
- }
-
- &.active:not(.has-form) {
- a:not(.button) {
- padding: 0 $topbar-link-padding;
- line-height: $topbar-height;
- color: $topbar-link-color-active;
- background: $topbar-link-bg-active;
-
- &:hover {
- color: $topbar-link-color-active-hover;
- background: $topbar-link-bg-active-hover;
- }
- }
- }
- }
-
- .has-dropdown {
- @if $topbar-arrows {
- > a {
- padding-#{$opposite-direction}: (
- $topbar-link-padding + $topbar-link-dropdown-padding
- ) !important;
-
- &:after {
- @include css-triangle(
- $topbar-dropdown-toggle-size,
- rgba(
- $topbar-dropdown-toggle-color,
- $topbar-dropdown-toggle-alpha
- ),
- top
- );
-
- top: $topbar-height * 0.5;
- margin-top: -($topbar-dropdown-toggle-size * 0.5);
- }
- }
- }
-
- &.moved {
- position: relative;
-
- > .dropdown {
- @include topbar-hide-dropdown;
- }
- }
-
- &.hover,
- &.not-click:hover {
- > .dropdown {
- @include topbar-show-dropdown;
- }
- }
-
- > a:focus + .dropdown {
- @include topbar-show-dropdown;
- }
-
- .dropdown li.has-dropdown {
- > a {
- @if $topbar-dropdown-arrows {
- &:after {
- top: rem-calc(3);
- border: none;
- content: '\00bb';
- #{$opposite-direction}: 5px;
- }
- }
- }
- }
- }
-
- .dropdown {
- #{$default-float}: 0;
- top: auto;
- min-width: 100%;
- background: transparent;
-
- li {
- a {
- padding: 12px $topbar-link-padding;
- line-height: $topbar-height;
- color: $topbar-dropdown-link-color;
- white-space: nowrap;
- background: $topbar-dropdown-link-bg;
- }
-
- &:not(.has-form):not(.active) {
- > a:not(.button) {
- color: $topbar-dropdown-link-color;
- background: $topbar-dropdown-link-bg;
- }
-
- &:hover > a:not(.button) {
- color: $topbar-dropdown-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-dropdown-link-bg-hover {
- background: $topbar-dropdown-link-bg-hover;
- }
- }
- }
-
- label {
- white-space: nowrap;
- background: $topbar-dropdown-label-bg;
- }
- // Second Level Dropdowns
- .dropdown {
- #{$default-float}: 100%;
- top: 0;
- }
- }
- }
-
- > ul > .divider,
- > ul > [role='separator'] {
- border-#{$opposite-direction}: $topbar-divider-border-bottom;
- width: 0;
- height: $topbar-height;
- clear: none;
- border-top: none;
- border-bottom: none;
- }
-
- .has-form {
- height: $topbar-height;
- padding: 0 $topbar-link-padding;
- background: $topbar-link-bg;
- }
- // Position overrides for ul.right and ul.left
- .#{$opposite-direction} {
- li .dropdown {
- #{$default-float}: auto;
- #{$opposite-direction}: 0;
-
- li .dropdown {
- #{$opposite-direction}: 100%;
- }
- }
- }
-
- .#{$default-float} {
- li .dropdown {
- #{$opposite-direction}: auto;
- #{$default-float}: 0;
-
- li .dropdown {
- #{$default-float}: 100%;
- }
- }
- }
- }
- // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
- // background & text color on hover.
- .no-js .top-bar-section {
- ul li {
- // Apply the hover link color when it has that class
- &:hover > a {
- color: $topbar-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
-
- @if $topbar-link-bg-hover {
- background: $topbar-link-bg-hover;
- }
- }
- // Apply the active link color when it has that class
- &:active > a {
- color: $topbar-link-color-active;
- background: $topbar-link-bg-active;
- }
- }
-
- .has-dropdown {
- &:hover {
- > .dropdown {
- @include topbar-show-dropdown;
- }
- }
-
- > a:focus + .dropdown {
- @include topbar-show-dropdown;
- }
- }
- }
- }
-
- .header-label {
- display: none;
-
- @media (min-width: 1070px) {
- align-self: center;
- display: inline-block;
- }
- }
-
- .top-bar {
- border: none;
- box-shadow: 0px 0px 0px 1px $md-gray-20;
-
- &.top-bar-fixed-top {
- position: fixed;
- z-index: 2;
- width: 100%;
- min-height: vr-adjust(56);
- }
- }
-
- .top-bar .dropdown-menu,
- .top-bar-nav > li > .dropdown-menu {
- margin-top: 0;
-
- > li:first-child > a,
- > li:last-child > a,
- > li:first-child > span,
- > li:last-child > span {
- border-radius: 0;
- }
- }
-
- .top-bar-brand {
- margin-right: 20px;
- font-family: $brand-font-extra-light, $icon-font-name;
- font-size: 24px;
-
- > img {
- display: inline-block;
- }
-
- &:before {
- @include icon-cisco-logo;
-
- display: inline-block;
- margin-right: 15px;
- }
- }
-
- .top-bar-nav > li {
- margin-right: 3px;
-
- > a {
- padding: 15px 30px;
- }
-
- &.active {
- > a {
- margin-bottom: -1px;
- border-bottom: 1px solid $md-theme-60;
- }
- }
- }
-
- .top-bar-default {
- .top-bar-brand {
- color: $md-gray-30;
- }
- }
-
- .top-bar-inverse {
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.6);
-
- .top-bar-brand {
- color: $md-gray-20;
-
- &:before {
- @include icon-cisco-logo;
- }
- }
-
- .top-bar-nav > li > a {
- background: $md-gray-90;
- }
- }
- // Admin top-bar
- .top-bar-admin {
- .header-title {
- position: relative;
- top: 1px;
- }
-
- .inverse & .top-bar {
- color: $md-gray-20;
- background-color: $md-gray-90;
- border-bottom-color: $md-gray-90;
-
- .header-title,
- .top-bar-orgname {
- color: $top-bar-admin-border;
- }
- }
-
- .container-fluid {
- position: relative;
- padding-right: 0;
- }
-
- .top-bar-brand {
- padding: 10px 15px;
- margin-left: -15px;
- font-size: 17px;
- line-height: 35px;
- color: $top-bar-admin-brand-color;
- vertical-align: top;
-
- &:before {
- font-size: 35px;
- }
-
- &:hover,
- &:focus {
- color: $top-bar-admin-brand-hover-color;
- background-color: $top-bar-admin-brand-hover-bg;
- }
- }
-
- .top-bar-orgname {
- display: none;
- max-width: 98%;
- padding-left: 20px;
- margin-left: 7px;
- font-family: $brand-font-extra-light;
- font-size: 17px;
- -webkit-font-smoothing: antialiased;
- color: $md-gray-40;
- border-left: 1px solid $top-bar-admin-border;
-
- .inverse & {
- border-color: $top-bar-inverse-border;
- }
-
- @media (min-width: 800px) {
- display: inline-block;
- }
-
- .top-bar-title {
- @include text-overflow;
- }
- }
-
- .top-bar-text {
- color: $top-bar-admin-color;
- }
-
- .top-bar-nav {
- > li > a {
- color: $top-bar-admin-link-color;
-
- &:hover,
- &:focus {
- color: $top-bar-admin-link-hover-color;
- background-color: $top-bar-admin-link-hover-bg;
- }
- }
-
- > .active > a {
- &,
- &:hover,
- &:focus {
- color: $top-bar-admin-link-active-color;
- background-color: $top-bar-admin-link-active-bg;
- }
- }
-
- > .disabled > a {
- &,
- &:hover,
- &:focus {
- color: $top-bar-admin-link-disabled-color;
- background-color: $top-bar-admin-link-disabled-bg;
- }
- }
- }
-
- .top-bar-toggle {
- border-color: $top-bar-admin-toggle-border-color;
-
- &:hover,
- &:focus {
- background-color: $top-bar-admin-toggle-hover-bg;
- }
-
- .icon-bar {
- background-color: $top-bar-admin-toggle-icon-bar-bg;
- }
- }
-
- .top-bar-collapse,
- .top-bar-form {
- border-color: $top-bar-admin-border;
- }
- // Dropdown menu items
- .top-bar-nav {
- // Remove background color from open dropdown
- > .open > a {
- &,
- &:hover,
- &:focus {
- color: $top-bar-admin-link-active-color;
- background-color: $top-bar-admin-link-active-bg;
- }
- }
-
- @media (max-width: $grid-float-breakpoint-max) {
- // Dropdowns get custom display when collapsed
- .open .dropdown-menu {
- > li > a,
- > li > span {
- color: $top-bar-admin-link-color;
-
- &:hover,
- &:focus {
- color: $top-bar-admin-link-hover-color;
- background-color: $top-bar-admin-link-hover-bg;
- }
- }
-
- > .active > a,
- > .active > span {
- &,
- &:hover,
- &:focus {
- color: $top-bar-admin-link-active-color;
- background-color: $top-bar-admin-link-active-bg;
- }
- }
-
- > .disabled > a,
- > .disabled > span {
- &,
- &:hover,
- &:focus {
- color: $top-bar-admin-link-disabled-color;
- background-color: $top-bar-admin-link-disabled-bg;
- }
- }
- }
- }
- }
- // Links in top-bars
- //
- // Add a class to ensure links outside the top-bar nav are colored correctly.
- .top-bar-link {
- color: $top-bar-admin-link-color;
-
- &:hover {
- color: $top-bar-admin-link-hover-color;
- }
- }
- }
-}
-
-$top-bar-user-height: rem-calc(68);
-$top-bar-mobile-height: rem-calc(48);
-
-@include exports('top-bar-user') {
- .sign-out {
- margin-right: 0;
- }
-
- .top-bar--user {
- background-color: $md-white-100;
- box-shadow: 0px -2px 2px 2px #858688;
-
- @media #{$medium-up} {
- @include vr-spacing(pt, 1);
- }
-
- .top-bar {
- height: $top-bar-mobile-height;
- overflow: visible;
- box-shadow: none;
-
- @media #{$medium-up} {
- height: $top-bar-user-height;
- }
-
- .app-logo {
- @include vr-spacing(mt, -1);
-
- .icon {
- display: flex;
- font-size: rem-calc(26);
- color: $md-gray-30;
- align-items: center;
-
- @include vr-spacing(pr, 1);
- }
-
- img {
- width: 48px;
- max-width: none;
- margin: 0 auto;
- }
- }
-
- .app-name {
- @extend %h4;
-
- display: flex;
- font-family: $brand-font-extra-light;
- color: $md-gray-90;
- align-items: center;
-
- @media #{$small-only} {
- display: none;
- }
- }
-
- .title-area {
- display: flex;
- align-items: center;
- }
- }
- }
-}
diff --git a/scss/ng/topnav.scss b/scss/ng/topnav.scss
deleted file mode 100644
index 95ad11d812..0000000000
--- a/scss/ng/topnav.scss
+++ /dev/null
@@ -1,290 +0,0 @@
-// @import '../colors/settings';
-// @import '../typography/settings';
-// @import '../tools/mixins/spacing';
-// @import '~@momentum-ui/icons/scss/mixins';
-
-$top-nav-font-size-desktop: rem-calc(12);
-$top-nav-font-size-mobile: rem-calc(14);
-$top-nav-height: rem-calc(32);
-
-@include exports('ng-topnav') {
- .top-nav {
- display: flex;
- height: rem-calc(48);
- background-color: $md-white-100;
- align-items: center;
-
- @media #{$medium-up} {
- height: $top-nav-height;
- }
-
- &--icon {
- @extend .icon;
- @extend .icon-hamburger-menu;
-
- font-size: rem-calc(32);
- color: $md-gray-90;
-
- @media #{$medium-up} {
- display: none;
- }
- }
-
- &--logo {
- max-height: rem-calc(185px);
- opacity: 0.35;
-
- .icon {
- font-size: 1.5rem;
- color: $md-gray-90;
-
- @include vr-spacing(pl, 3);
- }
-
- img {
- margin-left: -120px;
- }
-
- @media #{$medium-up} {
- display: none;
- }
- }
-
- &--mobile {
- display: flex;
- align-items: center;
-
- @media #{$medium-up} {
- display: none;
- }
-
- .activation {
- @include vr-spacing(pr, 0.75);
-
- [md-dropdown] .dropdown-menu:not(.sub-menu) {
- margin-left: 100%;
- transform: translateX(-100%);
- }
- }
-
- .icon {
- font-size: 1.5rem;
- color: $md-gray-40;
- }
-
- .icon-three-dots {
- top: 3px;
- }
-
- .top-nav--current {
- font-size: 14px;
- color: $md-theme-50;
- text-transform: uppercase;
- }
- }
-
- &--list {
- ul {
- margin: 0;
- }
-
- @media #{$small-only} {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9999;
- display: flex;
- width: 80vw;
- min-height: 100vh;
- margin-left: 0;
- background-color: $md-white-100;
- opacity: 0;
- transform: translateX(-150%);
- box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18);
- animation-duration: 250ms;
- animation-name: slideLeft;
- animation-timing-function: ease-in-out;
- transition: opacity 1s ease-in-out;
- flex-direction: column;
-
- @include vr-spacing(pt, 7.5);
- @include vr-spacing(pb, 2);
-
- .open-nav & {
- opacity: 1;
- transform: translateX(0);
- transition: none;
- }
-
- > ul {
- display: flex;
- flex: 1;
- flex-direction: column;
- }
-
- .sign-out {
- display: flex;
- align-items: flex-end;
- flex: 1;
-
- span {
- font-size: $top-nav-font-size-mobile;
- }
- }
- }
-
- li {
- display: flex;
- font-size: $top-nav-font-size-mobile;
- line-height: rem-calc(24);
- color: $md-gray-90;
- text-transform: uppercase;
- list-style: none;
- cursor: pointer;
-
- @include vr-spacing(ml, 1);
- @include vr-spacing(mb, 0.5);
-
- &.active a {
- color: $md-theme-50;
- text-decoration: none;
- outline: none;
- box-shadow: none;
- }
-
- &.active a {
- cursor: default;
- }
-
- a {
- font-family: $brand-font-regular;
- color: $md-gray-90;
- flex-grow: 1;
-
- @include vr-spacing(pv, 0.5);
- @include vr-spacing(ph, 2);
-
- &:hover,
- &:focus,
- &:active,
- &.active,
- &.router-link-active {
- color: $md-theme-50;
- text-decoration: none;
- outline: none;
- box-shadow: none;
- }
-
- &.active,
- &.router-link-active {
- cursor: default;
- }
- }
-
- &:first-child {
- a {
- @media #{$medium-up} {
- padding-left: 0;
- }
- }
- }
-
- &.current,
- &:hover {
- // background-color: $md-mint-70;
- color: $md-theme-50;
- }
-
- @media #{$medium-up} {
- display: flex;
- float: left;
- padding: 0;
- margin-left: 0;
- font-size: $top-nav-font-size-desktop;
- line-height: rem-calc(16);
- cursor: pointer;
-
- @include vr-spacing(mr, 0.75);
- @include vr-spacing(mb, 0);
-
- &.sign-out {
- display: flex;
- float: right;
- margin-right: 0;
- align-items: center;
-
- a {
- display: flex;
- padding-right: 0;
- align-items: center;
- }
-
- .icon {
- @include vr-spacing(mr, 0.75);
-
- margin-bottom: 1px;
- }
-
- span {
- font-size: $top-nav-font-size-desktop;
- }
- }
-
- a {
- @include vr-spacing(ph, 0.75);
-
- padding-top: 9px;
- padding-bottom: 7px;
- }
- }
-
- @media #{$small-only} {
- &.sign-out .icon {
- display: none;
- }
- }
- }
- }
-
- .mobile-nav-mask {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9998;
- display: none;
- width: 100vw;
- height: 100vh;
- opacity: 0;
- }
-
- &.open-nav .mobile-nav-mask {
- display: block;
- }
- }
-
- .open-nav .top-nav--list {
- animation-duration: 250ms;
- animation-name: slideRight;
- animation-timing-function: ease-in-out;
- }
-
- @keyframes slideRight {
- 0% {
- transform: translateX(-150%);
- }
-
- 100% {
- transform: translateX(-2rem);
- }
- }
-
- @keyframes slideLeft {
- 0% {
- transform: translateX(-2rem);
- }
-
- 100% {
- transform: translateX(-150%);
- }
- }
-}
diff --git a/scss/ng/typeahead.scss b/scss/ng/typeahead.scss
deleted file mode 100644
index 06415e9d9d..0000000000
--- a/scss/ng/typeahead.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-// @import '../colors/settings';
-// @import '../typography/settings';
-// @import '../tools/mixins/spacing';
-// @import '~@momentum-ui/icons/scss/mixins';
-
-@include exports('ng-typeahead') {
- .typeahead-group {
- .underline {
- text-align: center;
- border: 0;
- border-bottom: solid rem(1px) $md-gray-20;
- border-radius: 0rem;
-
- &:focus {
- border-bottom: solid rem(1px) $md-theme-50;
- box-shadow: none;
- }
-
- + .dropdown-menu {
- border-radius: 0rem;
- }
- }
-
- .dropdown-menu {
- max-width: 100%;
- overflow-x: hidden;
-
- li {
- small,
- label {
- margin-bottom: 0rem;
- }
- }
- }
- }
-
- .typeahead {
- .dropdown-menu {
- max-width: 100%;
-
- a {
- display: inline-flex;
- width: 100%;
- }
-
- & li:hover {
- background: none;
- }
-
- & li:focus {
- background: none;
- box-shadow: none;
- }
- }
- }
-
- .typeahead-large {
- display: flex;
- width: 40rem;
- margin-right: auto;
- margin-left: auto;
- font-family: $brand-font-thin;
- color: $md-gray-70;
- border: 0;
- flex-direction: row;
- flex: 1;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
-
- // Description.
- .input-description {
- position: relative;
- width: 100%;
- font-style: italic;
- color: $md-gray-30;
- text-align: center;
- border: 0;
- border-top: solid rem(1px) $md-gray-20;
-
- @include vr-spacing(p, 1);
-
- &:before {
- //search icon
- @include icon;
- @include icon-search_20;
-
- position: absolute;
- top: -40px;
- left: 24px;
- font-size: 1.3rem;
-
- @include vr-spacing(ph, 1);
- }
- }
-
- // Input control.
- input {
- width: 28rem;
- font-family: $brand-font-thin;
- font-size: $font-size-h2;
- color: $md-gray-70;
- text-align: center;
- background: transparent;
- border: 0px none;
- outline: none;
-
- @include vr-spacing(pt, 0.25);
-
- &:focus {
- box-shadow: none;
- }
-
- &:focus ~ .input-description {
- border-top: solid rem(1px) $md-theme-50;
- }
-
- &.error ~ .input-description {
- border-top: solid rem(1px) $md-red-50;
- }
-
- &::-webkit-input-placeholder {
- text-align: center;
- }
-
- &::-moz-placeholder {
- text-align: center;
- }
-
- &:-ms-input-placeholder {
- text-align: center;
- }
-
- &:disabled {
- background: transparent;
- border: 0px none;
-
- ~ .input-description {
- border-top: solid rem(1px) $md-gray-10;
-
- &:before {
- color: $md-gray-10;
- }
- }
- }
- }
-
- // Suggestion dropdown.
- .dropdown-menu {
- min-width: 28rem;
-
- a {
- display: inline-flex;
- width: 100%;
- }
-
- & li:hover {
- background: none;
- }
-
- & li:focus {
- background: none;
- box-shadow: none;
- }
-
- & li a,
- & li span {
- @include vr-spacing(pr, 0.5);
- @include vr-spacing(pv, 0.5);
- }
-
- & span {
- font-family: $brand-font-cisco-TT-Extra-Light;
- font-size: $font-size-h3;
- color: $md-gray-70;
- }
- }
-
- &__no-icon {
- .input-description {
- &:before {
- content: none;
- }
- }
- }
- }
-
- .md-combo {
- position: relative;
-
- input {
- width: 100%;
- }
-
- &:after {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1000;
- font-family: $icon-font-name;
- font-size: 1.5rem;
- pointer-events: none;
- transform: rotate(0);
- transition: transform ease 0.15s;
-
- @include icon-arrow-down_24;
- }
-
- &.open {
- .dropdown-menu {
- width: 100%;
- padding: 0;
- }
-
- &:after {
- top: -2px;
- transform: rotate(180deg);
- }
- }
- }
-}
diff --git a/scss/ng/ui-grid.scss b/scss/ng/ui-grid.scss
deleted file mode 100644
index c3ed2207c6..0000000000
--- a/scss/ng/ui-grid.scss
+++ /dev/null
@@ -1,1111 +0,0 @@
-/* ---------- UI-GRID TABLE ---------- */
-$ui-grid-border-width: 1px;
-$ui-grid-border-radius: 0px;
-$ui-grid-border-color: $md-gray-10;
-$ui-grid-header-background-color: $md-gray-10;
-$ui-grid-background-gradient-settings: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, $md-gray-10),
- color-stop(1, $md-white-100)
-);
-$ui-grid-vertical-bar-color: $md-gray-90;
-$ui-grid-rowcolor-even: transparent;
-$ui-grid-rowcolor-odd: transparent;
-$ui-grid-row-header-cell-background-color: transparent;
-$ui-grid-top-panel-radius: $ui-grid-border-radius - $ui-grid-border-width;
-$ui-grid-sort-arrow-width: 20px;
-$ui-grid-selected-color: $md-theme-50;
-
-@include exports('ng-ui-grid') {
- .gridStyle {
- width: 100%;
- height: 100%;
- // margin: 0 -1rem;
- padding-right: 0;
- margin-top: 0;
-
- & > :nth-child(2) {
- overflow-x: hidden;
- -ms-overflow-y: hidden; // IE11 on win7 scroll fix
- }
- }
-
- .ui-grid {
- border-radius: $ui-grid-border-radius;
- transform: translateZ(0);
- //border: $ui-grid-border-width solid $ui-grid-border-color;
- box-sizing: content-box; // If bootstrap (or another included library) makes the default sizing on element "border-box", then calculations get messed up
- }
-
- .ui-grid-vertical-bar {
- position: absolute;
- right: 0;
- width: 0;
- }
-
- .ui-grid-header-canvas {
- position: relative;
- overflow: hidden;
- font-family: $brand-font-cisco-TT-Light, sans-serif;
- font-size: 15px;
- font-weight: 750;
- color: $md-gray-90;
- background-color: $md-gray-10;
- }
-
- .ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar,
- .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
- width: $ui-grid-border-width;
- }
-
- .ui-grid-scrollbar-placeholder {
- background-color: transparent;
- }
-
- .ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar {
- background-color: $ui-grid-border-color;
- }
-
- .ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
- background-color: $ui-grid-vertical-bar-color;
- }
-
- .ui-grid-header-cell:last-child .ui-grid-vertical-bar {
- right: -1px; // TODO(c0bra): Should this be grid width? Test column resizing with custom grid border width
- width: $ui-grid-border-width;
- background-color: $ui-grid-border-color;
- }
-
- .ui-grid-clearfix {
- &:before,
- &:after {
- display: table;
- content: '';
- }
-
- &:after {
- clear: both;
- }
- }
-
- .ui-grid-invisible {
- visibility: hidden;
- }
-
- // Wraps the contents inside the grid directive with a relatively-positioned element so that all absolute elements are positioned relative to the grid, and not the page
- .ui-grid-contents-wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- }
-
- // Only display content to screen readers
- //
- // See: http://a11yproject.com/posts/how-to-hide-content/
-
- .ui-grid-sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- border: 0;
- }
-
- .ui-grid-header {
- border-bottom: 1px solid $ui-grid-border-color;
- box-sizing: border-box;
- }
-
- .ui-grid-top-panel {
- position: relative;
- overflow: hidden; // Disable so menus show up
- font-weight: 750;
- background-color: transparent;
- border-bottom: 1px solid $md-gray-10;
- }
-
- .ui-grid-header-viewport {
- overflow: hidden; // Disable so menus show up
- }
-
- .ui-grid-header-canvas {
- // Clearfix for floating header cells
- &:before,
- &:after {
- display: table;
- line-height: 0;
- content: '';
- }
-
- &:after {
- clear: both;
- }
- }
-
- .ui-grid-header-cell-row {
- position: relative;
- display: table-row;
- height: rem-calc(48);
- }
-
- .ui-grid-header-cell {
- position: relative;
- display: table-cell;
- // Default to width 0 so header height can calculate right. Otherwise
- // the header cells will flow onto the next line of the header container
- // and cause the header height to be calculated as twice the height
- // it should be. The column widths are calculated dynamically
- width: 0;
- height: 100%;
- background-color: inherit;
- border-right: $ui-grid-border-width solid;
- border-color: $ui-grid-border-color;
- box-sizing: border-box;
- user-select: none;
-
- &:last-child {
- border-right: 0;
- }
-
- .sortable {
- height: 100%;
- cursor: pointer;
- }
-
- // // Moves the sort priority number closer to the icon
- // .ui-grid-sort-priority-number {
- // margin-left: -8px;
- // }
- // // hide the priority number
- .ui-grid-sort-priority-number {
- display: none;
- }
- }
-
- .ui-grid-header-cell-label {
- font-size: $h5-font-size;
- font-weight: 450;
- line-height: $h5-line-height;
- color: $md-gray-70;
- white-space: nowrap;
- box-sizing: border-box;
- }
-
- .ui-grid-cell-contents.ui-grid-header-cell-primary-focus {
- outline: none;
- }
-
- // Make vertical bar in header row fill the height of the cell completely
- .ui-grid-header .ui-grid-vertical-bar {
- top: 0;
- bottom: 0;
- }
-
- .ui-grid-column-menu-button {
- position: absolute;
- top: 0;
- right: $ui-grid-border-width; // So it doesn't overlay the vertical bar
-
- .ui-grid-icon-angle-down {
- vertical-align: sub;
- }
- }
-
- .ui-grid-column-menu-button-last-col {
- margin-right: 25px;
- }
-
- .ui-grid-column-menu {
- position: absolute;
- }
-
- /* Slide up/down animations */
- .ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid {
- &.ng-hide-add,
- &.ng-hide-remove {
- display: block !important;
- transition: all 0.05s linear;
- }
-
- &.ng-hide-add.ng-hide-add-active,
- &.ng-hide-remove {
- transform: translateY(-100%);
- }
-
- &.ng-hide-add,
- &.ng-hide-remove.ng-hide-remove-active {
- transform: translateY(0);
- }
- }
-
- /* Slide up/down animations */
- .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
- &.ng-hide-add,
- &.ng-hide-remove {
- display: block !important;
- transition: all 0.05s linear;
- }
-
- &.ng-hide-add.ng-hide-add-active,
- &.ng-hide-remove {
- transform: translateY(-100%);
- }
-
- &.ng-hide-add,
- &.ng-hide-remove.ng-hide-remove-active {
- transform: translateY(0);
- }
- }
-
- .ui-grid-filter-container {
- position: relative;
- padding: 4px 10px;
-
- .ui-grid-filter-button {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
-
- [class^='ui-grid-icon'] {
- position: absolute;
- top: 50%;
- right: 10px;
- margin-top: -16px;
- line-height: 32px;
- opacity: 0.66;
-
- &:hover {
- opacity: 1;
- }
- }
- }
-
- .ui-grid-filter-button-select {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
-
- [class^='ui-grid-icon'] {
- position: absolute;
- top: 50%;
- right: 0px;
- margin-top: -16px;
- line-height: 32px;
- opacity: 0.66;
-
- &:hover {
- opacity: 1;
- }
- }
- }
- }
-
- input[type='text'].ui-grid-filter-input {
- width: 100%;
- padding: 0;
- margin: 0;
- border: 0;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- border-radius: $ui-grid-border-radius;
-
- &:hover {
- border: $ui-grid-border-width solid $ui-grid-border-color;
- }
- }
-
- select.ui-grid-filter-select {
- width: 90%;
- padding: 0;
- margin: 0;
- border: 0;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- border-radius: $ui-grid-border-radius;
-
- &:hover {
- border: $ui-grid-border-width solid $ui-grid-border-color;
- }
-
- .ui-grid-filter-cancel-button-hidden & {
- width: 100%;
- }
- }
-
- .ui-grid-render-container {
- position: inherit;
- border-top-right-radius: 0;
- border-bottom-right-radius: $ui-grid-border-radius;
- border-bottom-left-radius: $ui-grid-border-radius;
- border-top-left-radius: 0;
-
- // Prevent an outline from showing if we focus the render container element
- &:focus {
- outline: none;
- }
- }
-
- .ui-grid-viewport {
- position: relative;
- // overflow: auto; // TODO(c0bra): turn back on when virtual repeater is hooked up
- min-height: $h6-line-height;
- overflow-y: scroll;
- font-family: $brand-font-cisco-TT-Light, sans-serif;
- font-size: $h6-font-size;
- color: $md-gray-70;
- overflow-anchor: none;
-
- &:focus {
- outline: none !important;
- }
- }
-
- .ui-grid-canvas {
- position: relative;
- padding-top: 1px; //to prevent canvas from absorbing the 1st rendered row's margin
- }
-
- .ui-grid-row {
- &:nth-child(odd) .ui-grid-cell {
- background-color: $ui-grid-rowcolor-odd;
- }
-
- &:nth-child(even) .ui-grid-cell {
- background-color: $ui-grid-rowcolor-even;
- }
-
- &:last-child .ui-grid-cell {
- border-bottom-color: $ui-grid-border-color;
- border-bottom-style: solid;
- }
-
- &:hover {
- background-color: $md-theme-20;
- }
-
- &.selected {
- color: $md-white-100;
- background-color: $md-theme-50;
- transition: none;
- }
- }
-
- .ui-grid-no-row-overlay {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: 10%;
- font-size: 2em;
- text-align: center;
- background: $ui-grid-header-background-color;
- background: $ui-grid-background-gradient-settings;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- border-radius: $ui-grid-border-radius;
-
- > * {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- display: table;
- width: 100%;
- margin: auto 0;
- opacity: 0.66;
- }
- }
-
- .ui-grid-cell {
- // overflow: hidden;
- // position: absolute;
- // position: relative; // NOTE: removing so border is visible
- float: left;
- background-color: inherit;
- border-right: $ui-grid-border-width solid;
- border-color: $ui-grid-border-color;
- box-sizing: border-box;
-
- &:last-child {
- border-right: 0;
- }
- }
-
- .ui-grid-cell-contents {
- padding: 10px 16px 10px 20px;
- overflow: hidden;
- line-height: rem-calc(24);
- text-overflow: ellipsis;
- white-space: nowrap;
- box-sizing: border-box;
-
- &.ui-grid-header-cell-primary-focus i {
- position: absolute;
- top: 10px;
- right: 16px;
- font-size: 24px;
- color: $md-gray-40;
- }
- }
-
- .ui-grid-cell-contents-hidden {
- display: none;
- width: 0;
- height: 0;
- visibility: hidden;
- }
-
- .ui-grid-row,
- .ui-grid-row-header-cell {
- background-color: $ui-grid-row-header-cell-background-color;
- border-bottom: solid $ui-grid-border-width $ui-grid-border-color;
- }
-
- .ui-grid-footer-panel-background {
- background: $ui-grid-header-background-color;
- background: $ui-grid-background-gradient-settings;
- }
-
- .ui-grid-footer-panel {
- position: relative;
- // overflow: hidden; // Disable so menus show up
- font-weight: 750;
- background: $ui-grid-header-background-color;
- background: $ui-grid-background-gradient-settings;
- border-top: 1px solid $ui-grid-border-color;
- border-bottom: 1px solid $ui-grid-border-color;
- border-top-right-radius: $ui-grid-top-panel-radius;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- border-top-left-radius: $ui-grid-top-panel-radius;
- }
-
- .ui-grid-grid-footer {
- float: left;
- width: 100%;
- }
-
- .ui-grid-footer-viewport {
- overflow: hidden; // Disable so menus show up
- }
-
- .ui-grid-footer-canvas {
- position: relative;
-
- // Clearfix for floating header cells
- &:before,
- &:after {
- display: table;
- line-height: 0;
- content: '';
- }
-
- &:after {
- clear: both;
- }
- }
-
- .ui-grid-footer-cell-wrapper {
- position: relative;
- display: table;
- height: 100%;
- box-sizing: border-box;
- }
-
- .ui-grid-footer-cell-row {
- display: table-row;
- }
-
- .ui-grid-footer-cell {
- display: table-cell;
- overflow: hidden;
- // position: relative; // NOTE: removing so border is visible
- background-color: inherit;
- border-right: $ui-grid-border-width solid;
- border-color: $ui-grid-border-color;
- box-sizing: border-box;
-
- &:last-child {
- border-right: 0;
- }
- }
-
- input[type='text'].ui-grid-filter-input {
- width: 100%;
- padding: 0;
- margin: 0;
- border: 0;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- border-radius: $ui-grid-border-radius;
-
- &:hover {
- border: $ui-grid-border-width solid $ui-grid-border-color;
- }
- }
-
- .ui-grid-menu-button {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 2;
- height: 31px;
- font-weight: 450;
- cursor: pointer;
- background: $ui-grid-header-background-color;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- }
-
- .ui-grid-menu-button .ui-grid-icon-container {
- margin-top: 3px;
- }
-
- .ui-grid-menu-button .ui-grid-menu {
- right: 0;
-
- .ui-grid-menu-mid {
- overflow: scroll;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- }
- }
-
- .ui-grid-menu {
- position: absolute;
- z-index: 2; // So it shows up over grid canvas
- padding: 0 10px 20px 10px;
- cursor: pointer;
- box-sizing: border-box;
- }
-
- .ui-grid-menu .ui-grid-menu-inner {
- position: relative;
- white-space: nowrap;
- background: $ui-grid-header-background-color;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- border-radius: $ui-grid-border-radius;
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
- inset 0 12px 12px -14px rgba(0, 0, 0, 0.2);
-
- // Small hidden close button that only appears when focused.
- .ui-grid-menu-close-button {
- position: absolute;
- top: 0px;
- right: 0px;
- display: inline-block;
- padding: 6px 12px;
- padding: 1px 1px;
- margin-bottom: 0;
- font-size: 14px;
- font-size: 10px;
- font-weight: 450;
- line-height: 1.42857143;
- line-height: 1;
- color: transparent;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- cursor: pointer;
- background-color: transparent;
- background-image: none;
- border: 1px solid transparent;
- border-color: transparent;
- border-radius: 4px;
- border-radius: 2px;
- user-select: none;
- touch-action: manipulation;
-
- > i {
- color: $md-gray-70;
- opacity: 0.75;
- }
- }
- }
-
- .ui-grid-menu .ui-grid-menu-inner ul {
- padding: 0;
- margin: 0;
- list-style-type: none;
-
- li {
- padding: 0px;
-
- button {
- min-width: 100%;
- padding: 8px;
- text-align: left;
- background: transparent;
- border: none;
-
- // Show a shadow when hovering over a menu item
- &:hover,
- &:focus {
- box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
- }
-
- &.ui-grid-menu-item-active {
- background-color: $ui-grid-selected-color;
- box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
- }
- }
- }
-
- // Show a bottom border on all but the last menu item
- li:not(:last-child) > button {
- border-bottom: $ui-grid-border-width solid $ui-grid-border-color;
- }
- }
-
- .ui-grid-sortarrow {
- position: absolute;
- top: 0;
- right: 5px;
- bottom: 0;
- width: $ui-grid-sort-arrow-width;
- background-position: center;
-
- &.down {
- transform: rotate(180deg);
- }
- }
-
- /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
- /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
- /*
-$media screen and (-webkit-min-device-pixel-ratio:0) {
- $font-face {
- font-family: 'ui-grid';
- src: url('../font/ui-grid.svg?12312827#ui-grid') format('svg');
- }
-}
-*/
- [class^='ui-grid-icon']:before,
- [class*=' ui-grid-icon']:before {
- display: inline-block;
- width: 1em;
- margin-right: 0.2em;
- /* Animation center compensation - margins should be symmetric */
- /* remove if not needed */
- margin-left: -0.5em;
- font-family: $icon-font-name;
- font-style: normal;
- font-weight: 450;
- /* fix buttons height, for twitter bootstrap */
- line-height: 1em;
- text-align: center;
- text-decoration: inherit;
- text-transform: none;
- speak: none;
- /* opacity: .8; */
- /* For safety - reset parent styles, that can break glyph codes*/
- font-variant: normal;
- /* you can be more comfortable with increased icons size */
- /* font-size: 120%; */
- /* Uncomment for 3D effect */
- /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
- }
-
- .ui-grid-icon-blank::before {
- width: 1em;
- content: ' ';
- }
-
- /*
-* Support for resizing
-*/
-
- .ui-grid-column-resizer {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 5px;
- cursor: col-resize;
- }
-
- .ui-grid-column-resizer.left {
- left: 0;
- }
-
- .ui-grid-column-resizer.right {
- right: 0;
- }
-
- .ui-grid-header-cell:last-child .ui-grid-column-resizer.right {
- border-right: 1px solid $ui-grid-border-color;
- }
-
- .ui-grid[dir='rtl']
- .ui-grid-header-cell:last-child
- .ui-grid-column-resizer.right {
- border-right: 0;
- }
-
- .ui-grid[dir='rtl']
- .ui-grid-header-cell:last-child
- .ui-grid-column-resizer.left {
- border-left: 1px solid $ui-grid-border-color;
- }
-
- .ui-grid.column-resizing {
- cursor: col-resize;
- }
-
- .ui-grid.column-resizing .ui-grid-resize-overlay {
- position: absolute;
- top: 0;
- width: 1px;
- height: 100%;
- background-color: $ui-grid-border-color;
- }
-
- /*
-* RTL Styles
-*/
-
- .ui-grid[dir='rtl'] {
- .ui-grid-header-cell,
- .ui-grid-footer-cell,
- .ui-grid-cell {
- float: right !important;
-
- div &:last-child {
- width: 0px;
- }
- }
-
- .ui-grid-column-menu-button {
- position: absolute;
- top: 0;
- right: inherit;
- left: 1px;
- }
-
- .ui-grid-cell:first-child,
- .ui-grid-header-cell:first-child,
- .ui-grid-footer-cell:first-child {
- border-right: 0;
- }
-
- .ui-grid-cell:last-child,
- .ui-grid-header-cell:last-child {
- border-right: $ui-grid-border-width solid $ui-grid-border-color;
- border-left: 0;
- }
-
- .ui-grid-header-cell:first-child .ui-grid-vertical-bar,
- .ui-grid-footer-cell:first-child .ui-grid-vertical-bar,
- .ui-grid-cell:first-child .ui-grid-vertical-bar {
- width: 0;
- }
-
- .ui-grid-menu-button {
- position: absolute;
- right: auto;
- left: 0;
- z-index: 2;
- min-height: 27px;
- font-weight: 450;
- cursor: pointer;
- background: $ui-grid-header-background-color;
- border: $ui-grid-border-width solid $ui-grid-border-color;
- }
-
- .ui-grid-menu-button .ui-grid-menu {
- right: auto;
- left: 0;
- }
-
- // Position filter-cancel button on the left for rtl grids
- .ui-grid-filter-container .ui-grid-filter-button {
- right: initial;
- left: 0;
-
- [class^='ui-grid-icon'] {
- right: initial;
- left: 10px;
- }
- }
- }
-
- .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
- color: $md-white-100;
- background-color: $ui-grid-selected-color;
- border: none;
- }
-
- .ui-grid-disable-selection {
- cursor: default;
- user-select: none;
- }
-
- .ui-grid-selection-row-header-buttons {
- cursor: pointer;
- opacity: 0.5;
- }
-
- .ui-grid-selection-row-header-buttons.ui-grid-row-selected {
- opacity: 1;
- }
-
- .ui-grid-selection-row-header-buttons.ui-grid-all-selected {
- opacity: 1;
- }
-
- /*
- Animation example, for spinners
-*/
- .ui-grid-animate-spin {
- display: inline-block;
- animation: ui-grid-spin 2s infinite linear;
- }
-
- @-moz-keyframes ui-grid-spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(359deg);
- }
- }
-
- @-webkit-keyframes ui-grid-spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(359deg);
- }
- }
-
- @-o-keyframes ui-grid-spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(359deg);
- }
- }
-
- @-ms-keyframes ui-grid-spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(359deg);
- }
- }
-
- @keyframes ui-grid-spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(359deg);
- }
- }
-
- .ui-grid-cell {
- .user-img {
- width: 35px;
- height: 35px;
- margin: 4px 5px 4px 30px;
-
- .icon {
- bottom: -5px;
- font-size: 30px;
- line-height: 35px;
- }
- }
-
- .btn-icon {
- width: 100%;
- color: inherit;
- text-align: right;
- background: none;
- border: none;
- box-shadow: none;
-
- &:hover,
- &:focus,
- &.active:focus {
- border: none;
- outline: 0;
- box-shadow: none;
- }
- }
-
- .btn-actions {
- float: right;
- padding: 15px 30px;
- text-align: center;
- }
- }
-
- // ui-grid-icons //
- .ui-grid-tree-header-row {
- font-weight: 750 !important;
- }
-
- .ui-grid-icon-plus-squared:before {
- content: $icon-plus;
- }
-
- /* '썐' */
- .ui-grid-icon-minus-squared:before {
- content: $icon-minus;
- }
-
- /* '썑' */
- .ui-grid-icon-search:before {
- content: $icon-search;
- }
-
- /* '썒' */
- .ui-grid-icon-cancel:before {
- content: $icon-remove;
- }
-
- /* '썓' */
- .ui-grid-icon-info-circled:before {
- content: $icon-information;
- }
-
- /* '썔' */
- .ui-grid-icon-lock:before {
- content: $icon-circle-lock;
- }
-
- /* '썕' */
- .ui-grid-icon-lock-open:before {
- content: $icon-circle-unlock;
- }
-
- /* '썖' */
- .ui-grid-icon-pencil:before {
- content: $icon-edit;
- }
-
- /* '썗' */
- .ui-grid-icon-down-dir:before {
- content: $icon-arrow-down;
- }
-
- /* '썘' */
- .ui-grid-icon-up-dir:before {
- content: $icon-arrow-up;
- }
-
- /* '썙' */
- .ui-grid-icon-left-dir:before {
- content: $icon-chevron-left;
- }
-
- /* '썚' */
- .ui-grid-icon-right-dir:before {
- content: $icon-chevron-right;
- }
-
- /* '썛' */
- .ui-grid-icon-left-open:before {
- content: $icon-chevron-left;
- }
-
- /* '썜' */
- .ui-grid-icon-right-open:before {
- content: $icon-chevron-right;
- }
-
- /* '썝' */
- .ui-grid-icon-angle-down:before {
- content: $icon-chevron-down;
- }
-
- /* '썞' */
- .ui-grid-icon-filter:before {
- content: $icon-filter;
- }
-
- /* '썟' */
- .ui-grid-icon-sort-alt-up:before {
- content: $icon-arrow-down;
- }
-
- /* '썠' */
- .ui-grid-icon-sort-alt-down:before {
- content: $icon-arrow-up;
- }
-
- /* '썡' */
- .ui-grid-icon-ok:before {
- width: 20px;
- height: 20px;
- margin-right: 0.75em;
- font-size: 12px;
- line-height: 20px;
- color: $md-white-100;
- text-align: center;
- vertical-align: middle;
- background-color: $md-white-100;
- border: 1px solid $md-gray-40;
- content: ' ';
- transition: 300ms ease-in-out all;
-
- @include border-radius(3px);
-
- .ui-grid-row-selected & {
- font-style: normal;
- color: $md-theme-50;
- cursor: pointer;
- background-color: $md-white-100;
- content: '';
- }
- }
-
- .ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ui-grid-row-selected:before,
- .ui-grid-selection-row-header-buttons.ui-grid-icon-ok.ui-grid-all-selected:before {
- font-style: normal;
- color: $md-white-100;
- cursor: pointer;
- background-color: $md-theme-50;
- border-color: $md-theme-50;
- content: $icon-checkbox;
- }
-
- .grid-checkbox {
- .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
- color: $md-theme-50;
- background-color: $md-white-100;
- border: none;
- }
- }
-
- /* '썢' */
- .ui-grid-icon-menu:before {
- content: $icon-hamburger-menu;
- }
-
- // TODO DO WE HAVE THESE
- /* '썣' */
- .ui-grid-icon-indent-left:before {
- content: '';
- }
-
- /* '' */
- .ui-grid-icon-indent-right:before {
- content: '';
- }
-
- /* '' */
- .ui-grid-icon-spin5:before {
- content: '';
- }
-}
diff --git a/scss/settings/list-group.scss b/scss/settings/list-group.scss
deleted file mode 100644
index 8cf6ff577c..0000000000
--- a/scss/settings/list-group.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-//** Background color on `.list-group-item`
-$list-group-bg: $md-white-100;
-
-//** `.list-group-item` border color
-$list-group-border: $md-gray-20;
-
-//** List group border radius
-$list-group-border-radius: $border-radius-base;
-
-//** Background color of single list elements on hover
-$list-group-hover-bg: $md-gray-20;
-
-//** Text color of active list elements
-$list-group-active-color: $md-white-100;
-
-//** Background color of active list elements
-$list-group-active-bg: $md-theme-50;
-
-//** Border color of active list elements
-$list-group-active-border: $list-group-active-bg;
-
-//** Text color for content within active list items
-$list-group-active-text-color: lighten($list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-$list-group-disabled-color: $md-gray-20;
-
-//** Background color of disabled list items
-$list-group-disabled-bg: $md-gray-20;
-
-//** Text color for content within disabled list items
-$list-group-disabled-text-color: $list-group-disabled-color;
-
-$list-group-link-color: $md-gray-30;
-$list-group-link-hover-color: $list-group-link-color;
-$list-group-link-heading-color: $md-gray-40;
diff --git a/scss/settings/settings.js b/scss/settings/settings.js
index de59dbe1d4..25c0abb1f3 100644
--- a/scss/settings/settings.js
+++ b/scss/settings/settings.js
@@ -8,7 +8,6 @@ const settingsFiles = [
'../settings/rem.scss',
'../settings/core.scss',
'../settings/focus.scss',
- '../settings/list-group.scss',
'../settings/media.scss',
'../settings/z-index.scss',
'../settings/dropdown.scss',
diff --git a/scss/settings/settings.scss b/scss/settings/settings.scss
index ba164e735b..320bbdddb6 100644
--- a/scss/settings/settings.scss
+++ b/scss/settings/settings.scss
@@ -4334,43 +4334,6 @@ $focus__color: $focus-color !default;
$focus__color--dark: $focus-color !default;
$focus__size: 2px !default;
-//** Background color on `.list-group-item`
-$list-group-bg: $md-white-100;
-
-//** `.list-group-item` border color
-$list-group-border: $md-gray-20;
-
-//** List group border radius
-$list-group-border-radius: $border-radius-base;
-
-//** Background color of single list elements on hover
-$list-group-hover-bg: $md-gray-20;
-
-//** Text color of active list elements
-$list-group-active-color: $md-white-100;
-
-//** Background color of active list elements
-$list-group-active-bg: $md-theme-50;
-
-//** Border color of active list elements
-$list-group-active-border: $list-group-active-bg;
-
-//** Text color for content within active list items
-$list-group-active-text-color: lighten($list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-$list-group-disabled-color: $md-gray-20;
-
-//** Background color of disabled list items
-$list-group-disabled-bg: $md-gray-20;
-
-//** Text color for content within disabled list items
-$list-group-disabled-text-color: $list-group-disabled-color;
-
-$list-group-link-color: $md-gray-30;
-$list-group-link-hover-color: $list-group-link-color;
-$list-group-link-heading-color: $md-gray-40;
-
$small-breakpoint: em-calc(640);
$medium-breakpoint: em-calc(1024);
$large-breakpoint: em-calc(1440);
@@ -4841,1336 +4804,6 @@ $align-class-names: small-only, small, medium-only, medium, large-only, large,
$align-class-breakpoints: $small-only, $small-up, $medium-only, $medium-up,
$large-only, $large-up, $xlarge-only, $xlarge-up, $xxlarge-only, $xxlarge-up;
-$input__class: '#{$prefix}-input';
-$input__class--filled: '#{$input__class}--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(32) !default;
-$input__padding-side: rem-calc(16) !default;
-$input__padding-side--icon: rem-calc(44) !default;
-$input__padding: 0 $input__padding-side;
-$global-radius: rem-calc(8);
-$input__border-radius: $global-radius;
-$input--pill__border-radius: $global-rounded;
-$input__line-height: $base-line-height-ratio !default;
-
-$input__message__icon__font-size: rem-calc(16) !default;
-$input__message__font-size: rem-calc(14) !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;
-
- // Outline Contrast
- $input__background--disabled--contrast: $md-gray-10 !default;
- $input__background--hover--contrast: $md-gray-20 !default;
- $input__border-color--contrast: $input__font-color !default;
- $input__font-color--disabled--contrast: $md-gray-40 !default;
- $input__font-color--help--contrast: $md-gray-100 !default;
-
- // Outline Dark
- $input__background--dark: $md-gray-100 !default;
- $input__background--disabled--dark: $md-gray-90 !default;
- $input__background--hover--dark: $md-gray-90 !default;
- $input__border-color--dark: $md-gray-80;
- $input__clear-icon__color--dark: $md-gray-40;
- $input__clear-icon__color--hover--dark: $md-gray-50;
- $input__font-color--dark: $md-white-100 !default;
- $input__font-color--disabled--dark: $md-gray-70 !default;
- $input__font-color--help--dark: $md-gray-40 !default;
- $input__font-color--placeholder--dark: $md-gray-40 !default;
- $input__font-color--read-only--dark: $input__font-color--dark;
-
- // Outline Dark Contrast
- $input__background--hover--dark--contrast: $input__background--hover--dark !default;
- $input__border-color--dark--contrast: $input__font-color--dark !default;
- $input__font-color--help--dark--contrast: $md-white-100 !default;
-
- // Filled
- $input__background--filled: $md-gray-10 !default;
- $input__background--filled--hover: $md-gray-20 !default;
- $input__border-color--filled: transparent !default;
-
- // Filled Dark
- $input__background--filled--dark: $md-gray-90 !default;
- $input__background--filled--hover--dark: $md-gray-80 !default;
- $input__font-color--read-only--filled--dark: $md-white-100 !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-50 !default;
-
- // Dark
- $input__background--error--dark: $md-red-90 !default;
- $input__background--error--hover--dark: $md-red-80 !default;
- $input__border-color--error--dark: $md-red-50 !default;
- $input__message__font-color--error--dark: $md-red-50 !default;
-
- // Contrast
- $input__border-color--error--contrast: $md-red-60 !default;
- $input__message__font-color--error--contrast: $md-red-80 !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-50 !default;
-
- // Dark
- $input__background--success--dark: $md-green-90 !default;
- $input__background--success--hover--dark: $md-green-80 !default;
- $input__border-color--success--dark: $md-green-50 !default;
- $input__message__font-color--success--dark: $md-green-50 !default;
-
- // Contrast
- $input__border-color--success--contrast: $md-green-60 !default;
- $input__message__font-color--success--contrast: $md-green-80 !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-50 !default;
-
- // Dark
- $input__background--warning--dark: $md-yellow-90 !default;
- $input__background--warning--hover--dark: $md-yellow-80 !default;
- $input__border-color--warning--dark: $md-yellow-40 !default;
- $input__message__font-color--warning--dark: $md-yellow-40 !default;
-
- // Contrast
- $input__border-color--warning--contrast: $md-yellow-60 !default;
- $input__message__font-color--warning--contrast: $md-yellow-80 !default;
-
-$accordion__class: '#{$prefix}-accordion';
-$accordion-header__padding: rem-calc(10) !default;
-$accordion__font-size: rem-calc(16) !default;
-$accordion-header__font-family: $body-font-family !default;
-$accordion-list-item__font-family: $brand-font-light;
-$accordion-list-item__height: rem-calc(32);
-$accordion-list-item__padding: rem-calc(10);
-$accordion-content-padding: ($column-gutter*0.5) !default;
-$accordion-arrow__font-size: rem-calc(12);
-
-$accordion-header__color: $md-black-100 !default;
-$accordion-header__background: $md-white-100 !default;
-$accordion-header__background--hover: $md-theme-10 !default;
-$accordion-header__opacity--disabled: 0.2;
-$accordion-separator__border: rem-calc(1) solid $black-08;
-
-$accordion-header-dark__color: $md-white-100 !default;
-$accordion-header-dark__background: transparent !default;
-$accordion-header-dark__background--hover: $white-08 !default;
-$accordion-separator-dark__border: rem-calc(1) solid $white-08;
-
-$alert__class: '#{$prefix}-alert';
-$alert__border-radius: 5px;
-
-$alert__font-size: rem-calc(14) !default;
-$alert__font-size--title: rem-calc(16) !default;
-$alert__icon-font-size: rem-calc(44) !default;
-
-$alert__background-color: $md-white-100 !default;
-$alert__background-color--info: $md-theme-50 !default;
-$alert__background-color--success: $md-green-50 !default;
-$alert__background-color--warning: $md-yellow-50 !default;
-$alert__background-color--error: $md-red-50 !default;
-
-$alert__font-color: $md-gray-90 !default;
-$alert__font-color--title: $md-black-100 !default;
-$alert__font-color--status: $md-green-70 !default;
-$alert__font-color--info: $md-theme-50 !default;
-$alert__font-color--success: $md-green-50 !default;
-$alert__font-color--warning: $md-yellow-50 !default;
-$alert__font-color--error: $md-red-50 !default;
-
-$alert__padding: rem-calc(8);
-$alert__padding-right: rem-calc(13);
-$alert__padding-left: rem-calc(17);
-
-$alert__padding--call: rem-calc(17);
-$alert__padding-top--call: rem-calc(12);
-$alert__padding-bottom--call: rem-calc(25);
-
-$alert__width: rem-calc(342);
-
-$alert-banner__font-size: rem-calc(14);
-$alert-banner__padding: rem-calc(12);
-$alert-banner-column__border: 1px solid transparent;
-
-$alert-banner-info__color: $md-theme-60;
-$alert-banner-info__background: $md-theme-10;
-
-$alert-banner-warning__color: $md-yellow-60;
-$alert-banner-warning__background: $md-yellow-10;
-
-$alert-banner-error__color: $md-red-60;
-$alert-banner-error__background: $md-red-10;
-
-$avatar__class: '#{$prefix}-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: '#{$prefix}-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);
-
-$badge__class: '#{$prefix}-badge';
-
-// Set the padding for badges
-$badge__padding: rem-calc(2 6) !default;
-$badge__outline-padding: rem-calc(4 6 4) !default;
-
-// Set the border radius for badges.
-$badge__radius: $global-radius !default;
-$badge--round__radius: rem-calc(100);
-
-// Set the badge text
-$badge__font-size: rem-calc(12) !default;
-$badge__font-color-alt: $md-white-100 !default;
-$badge__font-color: $md-white-100 !default;
-$badge__font-weight: $font-weight-normal !default;
-$badge__font-family: $brand-font-regular !default;
-$badge__font-line-height: rem-calc(16) !default;
-$badge__font-size__round: rem-calc(12) !default;
-
-// Blue badge colors
-$badge--blue__background-color: $md-theme-50 !default;
-
-// Mint badge colors
-$badge--mint__background-color: $md-mint-50 !default;
-
-// Green badge colors
-$badge--green__background-color: $md-green-50 !default;
-
-// Yellow badge colors
-$badge--yellow__background-color: $md-yellow-50 !default;
-
-// Red badge colors
-$badge--red__background-color: $md-red-50 !default;
-
-// Orange badge colors
-$badge--orange__background-color: $md-orange-50 !default;
-
-// Purple badge colors
-$badge--purple__background-color: $md-purple-50 !default;
-
-// Cyan badge colors
-$badge--cyan__background-color: $md-cyan-50 !default;
-
-// Grey badge colors
-$badge--gray__background-color: $md-gray-50 !default;
-
-// Blue pastel badge colors
-$badge--blue-pastel__background-color: $md-theme-10 !default;
-$badge--blue-pastel__font-color: $md-theme-50 !default;
-
-// Mint badge colors
-$badge--mint-pastel__background-color: $md-mint-10 !default;
-$badge--mint-pastel__font-color: $md-mint-50 !default;
-
-// Green pastel badge colors
-$badge--green-pastel__background-color: $md-green-10 !default;
-$badge--green-pastel__font-color: $md-green-50 !default;
-
-// Yellow pastel badge colors
-$badge--yellow-pastel__background-color: $md-yellow-10 !default;
-$badge--yellow-pastel__font-color: $md-yellow-50 !default;
-
-// Red pastel badge colors
-$badge--red-pastel__background-color: $md-red-10 !default;
-$badge--red-pastel__font-color: $md-red-60 !default;
-
-// Gray pastel badge colors
-$badge--gray-pastel__background-color: $md-gray-20 !default;
-$badge--gray-pastel__font-color: $md-gray-70 !default;
-
-$breadcrumbs-bg: scale-color($md-gray-70, $lightness: 55%) !default;
-$breadcrumbs-padding: rem-calc(9 14 9) !default;
-$breadcrumbs-side-padding: rem-calc(12) !default;
-$breadcrumbs-function-factor: -10% !default;
-$breadcrumbs-border-size: 1px !default;
-$breadcrumbs-border-style: solid !default;
-$breadcrumbs-border-color: scale-color(
- $breadcrumbs-bg,
- $lightness: $breadcrumbs-function-factor
-) !default;
-$breadcrumbs-radius: $global-radius !default;
-$breadcrumbs-font-size: rem-calc(11) !default;
-$breadcrumbs-font-color: $md-theme-50 !default;
-$breadcrumbs-font-color-current: $md-gray-90 !default;
-$breadcrumbs-font-color-unavailable: $md-gray-50 !default;
-$breadcrumbs-font-transform: uppercase !default;
-$breadcrumbs-link-decor: underline !default;
-$breadcrumbs-slash-color: $md-gray-50 !default;
-$breadcrumbs-slash: '/' !default;
-
-$button__class: '#{$prefix}-button';
-
-// Default font size
-$button__font-size: rem-calc(16);
-$button__line-height: rem-calc(24);
-
-// Pill Font Sizes
-$button__font-size--28: rem-calc(14);
-$button__line-height--28: rem-calc(22);
-
-// 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--36: rem-calc(6) rem-calc(18);
-$button__padding--40: rem-calc(8) 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;
-
-$button-group__class: '#{$prefix}-button-group';
-
-$button-group__font-size: rem-calc(14);
-$button-group__border-size: rem-calc(1);
-$button-group__border: $button-group__border-size solid $md-gray-20;
-$button-group__color: $md-black-100;
-$button-group__background: transparent;
-$button-group__line-height: rem-calc(16);
-$button-group__padding: rem-calc(8) rem-calc(18);
-$button-group-active__color: $md-gray-100;
-$button-group-active__background: $md-blue-10;
-$button-group-disabled__color: $md-gray-50;
-$button-group-hover__background: $black-04;
-$button-group__border-radius-pill: rem-calc(25);
-$button-group__border-radius: rem-calc(4);
-$button-group-icon__padding: rem-calc(10);
-
-$button-group__font-size--dark: rem-calc(14);
-$button-group__line-height--dark: rem-calc(22);
-$button-group__padding--dark: rem-calc(5) rem-calc(18);
-$button-group__border--dark: $button-group__border-size solid $md-gray-80;
-$button-group__color--dark: $md-white-100;
-$button-group-active__color--dark: $md-white-100;
-$button-group-active__background--dark: $md-gray-80;
-$button-group-disabled__color--dark: $md-gray-70;
-$button-group-hover__background--dark: $white-12;
-
-
-$card-background: $md-gray-10;
-$card-color: $md-white-100;
-$card-padding-top: $rem-base;
-$card-padding-horizontal: 1;
-$card-padding-vertical: 1;
-$card-divider-color: $md-gray-20;
-$card-border-radius: 2px;
-
-$checkbox__class: '#{$prefix}-checkbox';
-
-$checkbox__size: rem-calc(16);
-$checkbox__icon-size: rem-calc(12);
-$checkbox__label-size: rem-calc(16);
-
-$close__class: '#{$prefix}-close';
-
-$close__font-color: $black-60 !default;
-$close__font-color--hover: $md-theme-70 !default;
-$close__font-color--focus: $md-theme-80 !default;
-$close__font-color--active: $md-theme-80;
-
-$collapse-button__width: rem-calc(16);
-$collapse-button__height: rem-calc(96);
-$collapse-button__border-radius: 0 $collapse-button__width
- $collapse-button__width 0;
-$collapse-button__color: $md-white-100;
-
-$collapse-button__background: $md-gray-90;
-$collapse-button__background--focus: $black-80;
-
-$combo-box__class: '#{$prefix}-combo-box';
-
-$datepicker__class: '#{$prefix}-datepicker';
-$datepicker-header__padding-top: rem-calc(13);
-$datepicker-navigation__padding: 0 rem-calc(16);
-$datepicker-navigation__line-height: rem-calc(24);
-$datepicker-navigation-buttons__padding: rem-calc(5) 0;
-$datepicker-navigation-buttons--next__margin-left: rem-calc(20);
-$datepicker-day-names__padding: 0 rem-calc(13);
-$datepicker-day-names__color: $md-gray-70;
-$datepicker-day__size: rem-calc(28);
-$datepicker-day__margin: rem-calc(2);
-$datepicker-day__font-size: rem-calc(12);
-$datepicker-day__color: $md-black-100;
-$datepicker-day__bg: transparent;
-$datepicker-day__bg--hover: $black-12;
-$datepicker-day__bg--selected: $md-black-100;
-$datepicker-day__color--selected: $md-white-100;
-$datepicker-day__color--outside-month: $md-gray-70;
-$datepicker-day__color--today: $md-orange-50;
-$datepicker-day__bg--today: $md-white-100;
-$datepicker-day__color--today--selected: $md-white-100;
-$datepicker-day__bg--today--selected: $md-orange-50;
-$datepicker-day__color--disabled: $md-gray-40;
-$datepicker-month__padding: 0 rem-calc(13) rem-calc(9) rem-calc(13);
-
-$datepicker-day__bg--hover--contrast: $md-orange-10;
-$datepicker-day__color--today--contrast: $md-orange-60;
-$datepicker-day__bg--today--selected--contrast: $md-orange-60;
-
-$daypicker-day-outer-width: rem-calc(30);
-$daypicker-day-box-width: rem-calc(32);
-
-// TODO: Remove ng settings when symphony styles are deprecated.
-$datepicker-width: 211px !default;
-$daypicker-day-width: 22px !default;
-$datepicker-large-width: $datepicker-width + 25px !default;
-$daypicker-large-day-width: 30px;
-
-$drawer-border-color: $md-gray-10;
-$drawer-background-color: $md-white-100;
-$drawer-border-radius: 2px;
-$drawer-medium-height: 200px;
-$drawer-large-height: 380px;
-
-$data-range-picker-button-group-height: rem-calc(85);
-$data-range-picker-button-group-margin: rem-calc(12) 0 0 rem-calc(12);
-$data-range-picker-button-group-width: rem-calc(99);
-$data-range-picker-button-group-button-right: rem-calc(8);
-$data-range-picker-input-font-size: rem-calc(12);
-$data-range-picker-input-height:rem-calc(30);
-$data-range-picker-input-padding:rem-calc(8) rem-calc(6) !important;
-$data-range-picker-button-first-child-margin-left:rem-calc(20);
-
-$footer-class: '#{$prefix}-footer';
-$footer__background-color: $md-gray-90;
-$footer__background-color--light: $md-white-100;
-
-$footer__font-color: $white-60;
-
-$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;
-$fieldset-border-color: transparent !default;
-$fieldset-border-style: solid !default;
-$fieldset-border-width: 0 !default;
-$fieldset-margin: $form-spacing 0 !default;
-$fieldset-padding: $form-spacing - rem-calc(1) !default;
-$legend-bg: $md-white-100 !default;
-$legend-font-weight: $font-weight-bold !default;
-$legend-padding: rem-calc(0 3) !default;
-
-$select-bg-color: $md-gray-10 !default;
-$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
-
-$icon__class: #{$prefix}-icon;
-
-// White button colors
-$icon--white__fill: $md-white-100 !default;
-$icon--white__fill--hover: $white-92 !default;
-$icon--white__fill--active: $white-84 !default;
-$icon--white__fill--disabled: $white-20 !default;
-
-$icon--white__fill--contrast: $md-black-100 !default;
-$icon--white__fill--hover--contrast: $md-black-100 !default;
-$icon--white__fill--active--contrast: $md-black-100 !default;
-$icon--white__fill--disabled--contrast: $white-20 !default;
-
-$phonenumber-input__class: '#{$prefix}-input-phonenumber';
-$flags-image-path: $images-path !default;
-$flags-image-name: 'flags' !default;
-$flags-image-extension: 'png' !default;
-$flag-height: 20px !default;
-$flag-width: 28px !default;
-$flag-padding: 8px !default;
-
-$label__class: '#{$prefix}-label';
-
-$label__font-family: $brand-font-regular !default;
-$label__font-size: rem-calc(16) !default;
-$label__font-color: $md-gray-100 !default;
-$label__font-color--dark: $md-white-100 !default;
-
-$label__line-height: rem-calc(24) !default;
-
-$label__spacing: rem-calc(16) !default;
-
-$lightbox__background: $black-60;
-$lightbox-control__size: rem-calc(48);
-$lightbox__color: $md-white-100;
-$lightbox-header__background: rgba($md-gray-90, 0.6);
-$lightbox-header__box-shadow: 0 rem-calc(8) rem-calc(10) 0 rgba(0, 0, 0, 0.18),
- 0 rem-calc(8) rem-calc(18) 0 $black-20;
-$lightbox-header__color: $md-white-100;
-$lightbox-header-timestamp__color: $md-gray-10;
-$lightbox-wrapper--hover__background: $md-gray-90;
-$lightbox-thumbnail__size: rem-calc(180);
-$lightbox-list__size: $lightbox-thumbnail__size + rem-calc(50);
-$lightbox-list__background: rgba($md-gray-90, 0.6);
-$lightbox-thumbnail--selected__color: $md-theme-50;
-$lightbox-thumbnail__box-shadow: 0px 0px 10px $md-black-100;
-$lightbox-thumbnail__border: 1px solid $md-white-100;
-$lightbox-content__box-shadow: 0 rem-calc(8) rem-calc(10) 0 rgba(0, 0, 0, 0.18),
- 0 rem-calc(8) rem-calc(18) 0 $black-20;
-$lightbox-page-control--hover__background: $md-gray-50;
-$lightbox-page-control__background: rgba($md-gray-90, 0.6);
-$lightbox-viewer-controls__background: rgba($md-gray-90, 0.6);
-$lightbox-controls--hover__background: $md-gray-90;
-
-$list__class: '#{$prefix}-list';
-$list-item__class: '#{$list__class}-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));
-
-$list-item-meeting__margin: (rem-calc(6) 0);
-$list-item-meeting__padding: (0 rem-calc(20));
-$list-item-meeting__border-radius: 4px;
-$list-item__section-margin-side: rem-calc(20);
-$list-item-meeting__background: $md-gray-10;
-$list-item-meeting__background--hover: $md-gray-20;
-$list-item-meeting__background--pressed: $md-gray-20;
-
-$spinner__class: '#{$prefix}-spinner';
-
-$spinner--gray__border-color: $md-gray-40;
-$spinner-progress--black__border-color: $md-black-100;
-
-$spinner--blue__border-color: $md-theme-20;
-$spinner-progress--blue__border-color: $md-theme-50;
-
-$spinner-progress--white__border-color: $md-white-100;
-
-$spinner__width: 1em;
-$spinner__height: 1em;
-
-$spinner--20__width: 1.25em;
-$spinner--20__height: 1.25em;
-
-$spinner--28__width: 1.75em;
-$spinner--28__height: 1.75em;
-
-$spinner--36__width: 2.25em;
-$spinner--36__height: 2.25em;
-
-$spinner--40__width: 2.5em;
-$spinner--40__height: 2.5em;
-
-$spinner--48__width: 3em;
-$spinner--48__height: 3em;
-
-$spinner--56__width: 3.5em;
-$spinner--56__height: 3.5em;
-
-$spinner--80__width: 5em;
-$spinner--80__height: 5em;
-
-$spinner-sizes: (16, $icon-check_8, 6px), (20, $icon-check_8, 8px),
- (28, $icon-check_12, 12px), (36, $icon-check_16, 16px);
-
-$menu-overlay__class: '#{$prefix}-menu-overlay';
-$menu__class: '#{$prefix}-menu';
-$menu-item__class: '#{$prefix}-menu-item';
-$menu-item__width: rem-calc(260);
-$menu-item__height: rem-calc(44);
-$menu-item__padding: rem-calc(16);
-$menu-item-header__height: rem-calc(32);
-$menu-item-header__opacity: 0.6;
-$menu-item-header__font-size: 0.75rem;
-$menu-item-selected-value__font-size: rem-calc(12);
-$menu-item-selected-value__line-height: rem-calc(18);
-$menu-item-selected-value__max-width: 50%;
-$menu-item-selected-value__padding: rem-calc(4) 0 rem-calc(4) rem-calc(4);
-$menu-item-selected-value__opacity: 0.6;
-$menu-item-arrow__padding-left: rem-calc(6);
-
-$modal__class: #{$prefix}-modal;
-$modal-overlay__background: rgba($md-black-100, 0.45) !default;
-
-// We use these to control the style of the modal itself.
-$modal__background: $md-white-100 !default;
-$modal__color: $md-black-100;
-$modal-message__color: $md-gray-70;
-
-// Modal Padding
-$modal__padding: rem-calc(16);
-$modal__padding--full-screen: rem-calc(24);
-$modal__padding--body: 0 rem-calc(32);
-
-// We use this to set the default radius used throughout the core.
-$modal__radius: $global-radius !default;
-
-// Modal Dialog Settings
-$modal-dialog__top: rem-calc(100);
-$modal-dialog__padding: rem-calc(20);
-$modal-dialog__border: 1px solid var(--mds-color-theme-outline-secondary-normal, $md-gray-30);
-$modal-dialog__box-shadow: 0 8px 16px 0 $black-08;
-$modal-header__padding--dialog: 0 0 rem-calc(12) 0;
-
-// Modal Header Sizes
-$modal-header__padding: $modal__padding;
-$modal-header__font-size: rem-calc(16);
-$modal-header__line-height: rem-calc(24);
-
-$modal-header__padding--large: rem-calc(32) rem-calc(16) rem-calc(16)
- rem-calc(16);
-$modal-header__font-size--large: rem-calc(26);
-$modal-header__line-height--large: rem-calc(32);
-
-$modal-header__padding--full-screen: rem-calc(32) rem-calc(16) rem-calc(16)
- rem-calc(16);
-$modal-header__font-size--full-screen: rem-calc(36);
-$modal-header__line-height--full-screen: rem-calc(48);
-
-$modal-header__font-size--mobile: rem-calc(14);
-
-// Modal Size
-$modal__width--full-screen: 100vw;
-$modal__width--large: 964px;
-$modal__width--medium: 640px;
-$modal__width--small: 480px;
-
-$modal__height--full-screen: 100vh;
-$modal__height--large: 720px;
-$modal__height--medium: 480px;
-$modal__height--small: 360px;
-
-// Modal Offset
-$modal__top--large: rem-calc(43);
-$modal__top--medium: rem-calc(47);
-$modal__top--small: rem-calc(47);
-
-$modal__top--tablet-medium: rem-calc(57);
-$modal__top--tablet-small: rem-calc(53);
-
-$event-overlay__shadow: 0 4px 12px 0 $black-16;
-$event-overlay__border-color: $md-gray-30;
-$event-overlay__border: inset 0 0 0 1px $event-overlay__border-color;
-$event-overlay__border-css-var: inset 0 0 0 1px var(--mdl-separator-primary, $event-overlay__border-color);
-$event-overlay-arrow__width: 20px;
-$event-overlay-arrow__height: 14px;
-$event-overlay__border-radius: rem-calc(8);
-
-$panel__class: '#{$prefix}-panel';
-
-$panel-input__height: rem-calc(32);
-
-$pagination-height: rem-calc(24) !default;
-$pagination-margin: rem-calc(-5) !default;
-
-$pagination-li-float: $default-float !default;
-$pagination-li-height: rem-calc(24) !default;
-$pagination-li-font-color: $md-black-100 !default;
-$pagination-li-font-size: rem-calc(14) !default;
-$pagination-li-margin: rem-calc(5) !default;
-
-$pagination-link-pad: rem-calc(1 10 1) !default;
-$pagination-link-font-color: $md-gray-50 !default;
-$pagination-link-active-bg: scale-color($md-white-100, $lightness: -10%) !default;
-
-$pagination-link-unavailable-cursor: default !default;
-$pagination-link-unavailable-font-color: $md-gray-50 !default;
-$pagination-link-unavailable-bg-active: transparent !default;
-
-$pagination-link-current-background: $md-theme-50 !default;
-$pagination-link-current-font-color: $md-white-100 !default;
-$pagination-link-current-font-weight: $font-weight-bold !default;
-$pagination-link-current-cursor: default !default;
-$pagination-link-current-active-bg: $md-theme-50 !default;
-
-$page-side-padding: 2rem;
-
-$page-header-height: 64px;
-$page-header-icon-color: $md-gray-30;
-$page-header-icon-font-size: rem-calc(36);
-$page-header-icon-margin-right: rem-calc(16);
-$page-header-nav-color: $md-gray-30;
-$page-header-nav-margin-top: rem-calc(40);
-$page-header-nav-margin-bottom: 0;
-$page-header-nav-margin-right: rem-calc(20);
-$page-header-nav-margin-left: rem-calc(20);
-$page-header-nav-font-size: rem-calc(20);
-$page-header-nav-padding-right: 0;
-$page-header-nav-padding-bottom: rem-calc(17);
-$page-header-nav-border-bottom-color: transparent;
-$page-header-nav-hover-border-bottom-color: $md-gray-30;
-$page-header-nav-active-border-bottom-color: $md-theme-50;
-$page-header-nav-active-color: $md-theme-50;
-$page-header-nav-active-hover-padding-bottom: rem-calc(24);
-
-$page-sub-header-height: 66px;
-$page-sub-header-vertical-padding: 0.75rem;
-$page-sub-header-horizontal-padding: 2rem;
-$page-sub-header-nav-color: $md-gray-30;
-$page-sub-header-nav-margin-right: rem-calc(32);
-$page-sub-header-nav-font-size: rem-calc(20);
-$page-sub-header-nav-padding-right: 0;
-$page-sub-header-nav-padding-bottom: rem-calc(12);
-$page-sub-header-nav-border-bottom-color: transparent;
-$page-sub-header-nav-hover-border-bottom-color: $md-gray-30;
-$page-sub-header-nav-active-border-bottom-color: $md-theme-50;
-$page-sub-header-nav-active-color: $md-theme-50;
-
-$popover__background: $md-white-100;
-$popover__max-width: rem-calc(276);
-$popover__border-color: $md-gray-40;
-$popover__border-color--fallback: $md-gray-40;
-$popover-title__background: $md-gray-10;
-$popover-arrow__width: rem-calc(6);
-$popover-arrow__color: $md-white-100;
-$popover-outer-arrow__width: $popover-arrow__width + 1;
-$popover-outer-arrow__color: $md-gray-50;
-$popover-outer-arrow__color--fallback: $md-gray-50;
-$popover-displacement: rem-calc(10);
-
-$progress-bar-height: rem-calc(4) !default;
-$progress-bar-color: $md-gray-10;
-
-$progress-bar-border-color: scale-color(
- $md-white-100,
- $lightness: 20%
-) !default;
-$progress-bar-border-size: 1px !default;
-$progress-bar-border-style: solid !default;
-$progress-bar-border-radius: $global-radius !default;
-
-$progress-bar-pad: 0 !default;
-$progress-bar-margin-bottom: rem-calc(10) !default;
-
-$progress-meter-color: $md-theme-50 !default;
-$progress-meter-secondary-color: $md-gray-70 !default;
-$progress-meter-success-color: $md-green-50 !default;
-$progress-meter-alert-color: $md-red-50 !default;
-$progress-meter-warning-color: $md-yellow-50;
-$progress-meter-info-color: $md-mint-50;
-
-$progress-bg: $md-gray-20;
-$progress-bar-color: $md-white-100;
-$progress-border-radius: $border-radius-base;
-$progress-bar-bg: $md-theme-50;
-$progress-bar-success-bg: $md-green-50;
-$progress-bar-warning-bg: $md-yellow-50;
-$progress-bar-danger-bg: $md-red-50;
-$progress-bar-info-bg: $md-mint-50;
-
-$radio__class: '#{$prefix}-radio';
-
-$radio__size: rem-calc(20);
-$radio__icon-size: rem-calc(8);
-$radio__label-size: rem-calc(16);
-
-$select__class: '#{$prefix}-select';
-$select-button__class: '#{$prefix}-button';
-$select-label__class: '#{$select__class}__label';
-
-$select-input__margin: (rem-calc(2) 0);
-$select--children__border: (rem-calc(1) solid $black-08);
-$select--children__box-shadow: (0 rem-calc(8) rem-calc(16) 0 $black-08);
-$select__icon--size: rem-calc(16);
-$select__icon--top: calc((#{$input__height} - #{$select__icon--size}) / 2);
-$select__icon--right: $input__padding-side;
-$select__icon--disabled: $black-40;
-$select__icon--disabled--dark: $white-40;
-
-$select--input__background-color: $black-08;
-$select--input__background-color--hover: $black-12;
-
-$select--input__background-color--dark: $white-24;
-$select--input__background-color--hover--dark: $white-32;
-
-$select__color: $black-60 !default;
-$select__color--dark: $white-60 !default;
-
-$slider__class: #{$prefix}-slider;
-
-$slider-selection__background-color: $md-theme-50;
-$slider-selection__background-color--disabled: $md-gray-30;
-$slider-selection__background-color--disabled--dark: $md-white-100;
-$slider-selection__background-color--red: $md-red-50;
-$slider-selection__background-color--green: $md-green-50;
-$slider-selection__background-color--yellow: $md-yellow-50;
-
-$slider-pointer__background-color: $md-white-100;
-$slider-pointer__background-color--hover: $md-theme-10;
-$slider-pointer__background-color--focus--dark: $md-gray-40;
-$slider-pointer__background-color--disabled: $md-gray-10;
-$slider-pointer__background-color--disabled--dark: $md-gray-40;
-
-$slider-bar__background-color: $md-gray-10;
-$slider-bar__background-color--dark: $md-gray-40;
-
-$slider-hashlabel__color: $md-gray-90;
-$slider-hashlabel__color--dark: $md-white-100;
-
-$tab--link__padding: 0 1rem;
-$tab--link-hover__bg: $md-gray-10;
-$tab--disabled-link__color: $md-gray-50;
-$tab--disabled-link-hover__color: $md-gray-50;
-$tab-tabs--hover__border: 3px solid $md-gray-50;
-$tab-tabs--active__color: $md-theme-50;
-$tab-tabs--active__border: 3px solid $md-theme-50;
-$tab-tabs--justified-active__border-color: $md-theme-50;
-$tab-pills__color: $md-black-100;
-$tab-pills__font-size: rem-calc(16);
-$tab-pills__border: 1px solid $black-08;
-$tab-pills__padding: 6px 20px;
-$tab-pills__background: $md-white-100;
-$tab-pills--active__background: $md-theme-10;
-$tab-pills--hover__background: $black-04;
-
-$toggle-switch__class: '#{$prefix}-toggle-switch';
-
-$toggle-switch__size: 20px;
-$toggle-switch__size--active: 24px;
-$toggle-switch__width: 44px;
-$toggle-switch__height: 24px;
-
-$tooltip__class: '#{$prefix}-tooltip';
-$tooltip__max-width: 200px;
-$tooltip__min-width: 40px;
-$tooltip__color: $md-white-100;
-$tooltip__background-color: $black-80;
-$tooltip__padding: 8px 12px;
-$tooltip__radius: 5px;
-$tooltip__rounded: $global-rounded;
-$tooltip-arrow__height: $event-overlay-arrow__height - 2;
-$tooltip__font-size: 16px;
-$tooltip__line-height: 24px;
-$tooltip__font-weight: $font-weight-normal;
-
-//legacy styles
-$has-tip-border-bottom: dotted 1px $md-gray-40 !default;
-$has-tip-font-weight: $font-weight-bold !default;
-$has-tip-font-color: $md-gray-90 !default;
-$has-tip-border-bottom-hover: dotted 1px
- scale-color($md-theme-50, $lightness: -55%) !default;
-$has-tip-font-color-hover: $md-theme-50 !default;
-$has-tip-cursor-type: help !default;
-$tooltip-close-font-size: rem-calc(10) !default;
-$tooltip-close-font-weight: $font-weight-normal !default;
-$tooltip-close-font-color: $md-gray-70 !default;
-
-$top-bar-class: '#{$prefix}-top-bar';
-$top-bar-mobile-class: '#{$prefix}-tb-mobile';
-
-$top-bar__height--desktop: rem-calc(80);
-$top-nav-font-size-mobile: rem-calc(14);
-
-$brand-image__size: rem-calc(36);
-$brand__font-size: rem-calc(16);
-
-$brand-image__size--medium: rem-calc(36);
-$brand__font-size--medium: rem-calc(20);
-
-$brand-image__size--large: rem-calc(48);
-
-// variables for mobile slide out menu
-$brand-image__size--mobile: rem-calc(24);
-$brand__font-size--mobile: rem-calc(20);
-$brand__line-hight--mobile: rem-calc(32);
-
-$brand-anchor__padding: rem-calc(16);
-$brand-anchor__padding--medium: rem-calc(14);
-$brand-anchor__padding--large: rem-calc(12);
-
-$top-bar__background-color--dark: $md-gray-90;
-$top-bar__background-color--light: $md-white-100;
-$top-bar__background-color--blue: $md-theme-50;
-
-$top-bar__font-color--dark: $md-white-100;
-$top-bar__font-color--light: inherit;
-
-$top-bar__font-color--dark--active: $md-theme-50;
-$top-bar__font-color--light--active: $md-theme-60;
-$top-bar__font-color--blue--active: $md-black-100;
-
-$top-bar-list-item__padding--mobile: rem-calc(32);
-$top-bar-list-item__background: transparent;
-
-$top-bar-avatar__size: rem-calc(36);
$block-grid-elements: 12 !default;
$block-grid-default-spacing: rem-calc(20) !default;
diff --git a/scss/tools/mixins/grid-framework.scss b/scss/tools/mixins/grid-framework.scss
deleted file mode 100644
index 66f15d0cf2..0000000000
--- a/scss/tools/mixins/grid-framework.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-// [converter] This is defined recursively in LESS, but Sass supports real loops
-@use "sass:math";
-
-@mixin make-grid-columns(
- $i: 1,
- $list: '.col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}'
-) {
- @for $i from (1 + 1) through $grid-columns {
- $list: '#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}';
- }
-
- #{$list} {
- position: relative;
- // Prevent columns from collapsing when empty
- min-height: 1px;
- padding-right: floor(($grid-gutter-width * 0.5));
- // Inner gutter via padding
- padding-left: ceil(($grid-gutter-width * 0.5));
- }
-}
-
-// [converter] This is defined recursively in LESS, but Sass supports real loops
-@mixin float-grid-columns($class, $i: 1, $list: '.col-#{$class}-#{$i}') {
- @for $i from (1 + 1) through $grid-columns {
- $list: '#{$list}, .col-#{$class}-#{$i}';
- }
-
- #{$list} {
- float: left;
- }
-}
-
-@mixin calc-grid-column($index, $class, $type) {
- @if ($type == width) and ($index > 0) {
- .col-#{$class}-#{$index} {
- width: percentage(math.div($index, $grid-columns));
- }
- }
-
- @if ($type == push) and ($index > 0) {
- .col-#{$class}-push-#{$index} {
- left: percentage(math.div($index, $grid-columns));
- }
- }
-
- @if ($type == push) and ($index == 0) {
- .col-#{$class}-push-0 {
- left: auto;
- }
- }
-
- @if ($type == pull) and ($index > 0) {
- .col-#{$class}-pull-#{$index} {
- right: percentage(math.div($index, $grid-columns));
- }
- }
-
- @if ($type == pull) and ($index == 0) {
- .col-#{$class}-pull-0 {
- right: auto;
- }
- }
-
- @if ($type == offset) {
- .col-#{$class}-offset-#{$index} {
- margin-left: percentage(math.div($index, $grid-columns));
- }
- }
-}
-
-// [converter] This is defined recursively in LESS, but Sass supports real loops
-@mixin loop-grid-columns($columns, $class, $type) {
- @for $i from 0 through $columns {
- @include calc-grid-column($i, $class, $type);
- }
-}
-
-// Create grid for specific class
-@mixin make-grid($class) {
- @include float-grid-columns($class);
- @include loop-grid-columns($grid-columns, $class, width);
- @include loop-grid-columns($grid-columns, $class, pull);
- @include loop-grid-columns($grid-columns, $class, push);
- @include loop-grid-columns($grid-columns, $class, offset);
-}
diff --git a/scss/tools/mixins/grid.scss b/scss/tools/mixins/grid.scss
deleted file mode 100644
index ad1a3397df..0000000000
--- a/scss/tools/mixins/grid.scss
+++ /dev/null
@@ -1,363 +0,0 @@
-// Grid system
-//
-// Generate semantic grid columns with these mixins.
-// For creating container, nested, and collapsed rows.
-//
-//
-// $behavior - Any special behavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
-
-// @FUNCTION
-// $colNumber - Found in settings file
-// $totalColumns - Found in settings file
-@use "sass:math";
-
-@function grid-calc($colNumber, $totalColumns) {
- $result: percentage(math.div($colNumber, $totalColumns));
-
- @if $result == 0% {
- $result: 0;
- }
-
- @return $result;
-}
-
-@mixin grid-row($behavior: false) {
- // use @include grid-row(nest); to include a nested row
- @if $behavior == nest {
- margin: 0 (-($column-gutter*0.5));
- max-width: none;
- width: auto;
- }
-
- // use @include grid-row(collapse); to collapsed a container row margins
- @else if $behavior == collapse {
- margin: 0;
- max-width: $row-width;
- width: 100%;
- }
-
- // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
- @else if $behavior == nest-collapse {
- margin: 0;
- max-width: none;
- width: auto;
- }
-
- // use @include grid-row; to use a container row
- @else {
- margin: 0 auto;
- max-width: $row-width;
- width: 100%;
- }
-
- // Clearfix for all rows
- @include clearfix();
-}
-
-// Creates a column, should be used inside of a media query to control layouts
-//
-// $columns - The number of columns this should be
-// $last-column - Is this the last column? Default: false.
-// $center - Center these columns? Default: false.
-// $offset - # of columns to offset. Default: false.
-// $push - # of columns to push. Default: false.
-// $pull - # of columns to pull. Default: false.
-// $collapse - Get rid of gutter padding on column? Default: false.
-// $float - Should this float? Default: true. Options: true, false, left, right.
-@mixin grid-column(
- $columns: false,
- $last-column: false,
- $center: false,
- $offset: false,
- $push: false,
- $pull: false,
- $collapse: false,
- $float: true,
- $position: false
-) {
- // If positioned for default .column, include relative position
- // push and pull require position set
- @if $position or $push or $pull {
- position: relative;
- }
-
- // If collapsed, get rid of gutter padding
- @if $collapse {
- padding-left: 0;
- padding-right: 0;
- }
-
- // Gutter padding whenever a column isn't set to collapse
- // (use $collapse:null to do nothing)
- @else if $collapse == false {
- padding-left: ($column-gutter * 0.5);
- padding-right: ($column-gutter * 0.5);
- }
-
- // If a column number is given, calculate width
- @if $columns {
- width: grid-calc($columns, $total-columns);
- max-width: grid-calc($columns, $total-columns);
-
- // If last column, float naturally instead of to the right
- @if $last-column {
- float: $opposite-direction;
- }
- }
-
- // Source Ordering, adds left/right depending on which you use.
- @if $push {
- #{$default-float}: grid-calc($push, $total-columns);
- #{$opposite-direction}: auto;
- }
-
- @if $pull {
- #{$opposite-direction}: grid-calc($pull, $total-columns);
- #{$default-float}: auto;
- }
-
- @if $float {
- @if $float == left or $float == true {
- float: $default-float;
- } @else if $float == right {
- float: $opposite-direction;
- } @else {
- float: none;
- }
- }
-
- // If centered, get rid of float and add appropriate margins
- @if $center {
- margin-#{$default-float}: auto;
- margin-#{$opposite-direction}: auto;
- float: none;
- }
-
- // If offset, calculate appropriate margins
- @if $offset {
- margin-#{$default-float}: grid-calc($offset, $total-columns) !important;
- }
-}
-
-// Create presentational classes for grid
-//
-// $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc.
-@mixin grid-html-classes($size) {
- @for $i from 0 through $total-columns - 1 {
- .#{$size}-push-#{$i} {
- @include grid-column($push: $i, $collapse: null, $float: false);
- }
-
- .#{$size}-pull-#{$i} {
- @include grid-column($pull: $i, $collapse: null, $float: false);
- }
- }
-
- .column,
- .columns {
- @include grid-column($columns: false, $position: true);
- }
-
- @for $i from 1 through $total-columns {
- .#{$size}-#{$i} {
- @include grid-column($columns: $i, $collapse: null, $float: false);
- }
- }
-
- @for $i from 0 through $total-columns - 1 {
- .#{$size}-offset-#{$i} {
- @include grid-column($offset: $i, $collapse: null, $float: false);
- }
- }
-
- .#{$size}-reset-order {
- right: auto;
- left: auto;
- float: $default-float;
- margin-#{$default-float}: 0;
- margin-#{$opposite-direction}: 0;
- }
-
- .column.#{$size}-centered,
- .columns.#{$size}-centered {
- @include grid-column($center: true, $collapse: null, $float: false);
- }
-
- .column.#{$size}-uncentered,
- .columns.#{$size}-uncentered {
- float: $default-float;
- margin-#{$default-float}: 0;
- margin-#{$opposite-direction}: 0;
- }
-
- // Fighting [class*="column"] + [class*="column"]:last-child
- .column.#{$size}-centered:last-child,
- .columns.#{$size}-centered:last-child {
- float: none;
- }
-
- // Fighting .column.-centered:last-child
- .column.#{$size}-uncentered:last-child,
- .columns.#{$size}-uncentered:last-child {
- float: $default-float;
- }
-
- .column.#{$size}-uncentered.opposite,
- .columns.#{$size}-uncentered.opposite {
- float: $opposite-direction;
- }
-
- .row {
- &.#{$size}-collapse {
- > .column,
- > .columns {
- @include grid-column($collapse: true, $float: false);
- }
-
- .row {
- margin-right: 0;
- margin-left: 0;
- }
- }
-
- &.#{$size}-uncollapse {
- > .column,
- > .columns {
- @include grid-column;
- }
- }
- }
-}
-
-// Centered container element
-@mixin container-fixed($gutter: $grid-gutter-width) {
- padding-right: ($gutter * 0.5);
- padding-left: ($gutter * 0.5);
- margin-right: auto;
- margin-left: auto;
-
- @include clearfix;
-}
-
-// Creates a wrapper for a series of columns
-@mixin make-row($gutter: $grid-gutter-width) {
- margin-right: floor(math.div($gutter, -2));
- margin-left: ceil(math.div($gutter, -2));
-
- @include clearfix;
-}
-
-// Generate the extra small columns
-@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
- position: relative;
- float: left;
- width: percentage(math.div($columns, $grid-columns));
- min-height: 1px;
- padding-right: ($gutter * 0.5);
- padding-left: ($gutter * 0.5);
-}
-
-@mixin make-xs-column-offset($columns) {
- margin-left: percentage(math.div($columns, $grid-columns));
-}
-
-@mixin make-xs-column-push($columns) {
- left: percentage(math.div($columns, $grid-columns));
-}
-
-@mixin make-xs-column-pull($columns) {
- right: percentage(math.div($columns, $grid-columns));
-}
-
-// Generate the small columns
-@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
- position: relative;
- min-height: 1px;
- padding-right: ($gutter * 0.5);
- padding-left: ($gutter * 0.5);
-
- @media (min-width: $screen-sm-min) {
- float: left;
- width: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-sm-column-offset($columns) {
- @media (min-width: $screen-sm-min) {
- margin-left: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-sm-column-push($columns) {
- @media (min-width: $screen-sm-min) {
- left: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-sm-column-pull($columns) {
- @media (min-width: $screen-sm-min) {
- right: percentage(math.div($columns, $grid-columns));
- }
-}
-
-// Generate the medium columns
-@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
- position: relative;
- min-height: 1px;
- padding-right: ($gutter * 0.5);
- padding-left: ($gutter * 0.5);
-
- @media (min-width: $screen-md-min) {
- float: left;
- width: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-md-column-offset($columns) {
- @media (min-width: $screen-md-min) {
- margin-left: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-md-column-push($columns) {
- @media (min-width: $screen-md-min) {
- left: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-md-column-pull($columns) {
- @media (min-width: $screen-md-min) {
- right: percentage(math.div($columns, $grid-columns));
- }
-}
-
-// Generate the large columns
-@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
- position: relative;
- min-height: 1px;
- padding-right: ($gutter * 0.5);
- padding-left: ($gutter * 0.5);
-
- @media (min-width: $screen-lg-min) {
- float: left;
- width: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-lg-column-offset($columns) {
- @media (min-width: $screen-lg-min) {
- margin-left: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-lg-column-push($columns) {
- @media (min-width: $screen-lg-min) {
- left: percentage(math.div($columns, $grid-columns));
- }
-}
-
-@mixin make-lg-column-pull($columns) {
- @media (min-width: $screen-lg-min) {
- right: percentage(math.div($columns, $grid-columns));
- }
-}
diff --git a/scss/tools/mixins/list-group.scss b/scss/tools/mixins/list-group.scss
deleted file mode 100644
index 66831dede4..0000000000
--- a/scss/tools/mixins/list-group.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// List Groups
-
-@mixin list-group-item-variant($state, $background, $color) {
- .list-group-item-#{$state} {
- color: $color;
- background-color: $background;
-
- // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state}
- }
-
- a.list-group-item-#{$state},
- button.list-group-item-#{$state} {
- color: $color;
-
- .list-group-item-heading {
- color: inherit;
- }
-
- &:hover,
- &:focus {
- color: $color;
- background-color: darken($background, 5%);
- }
-
- &.active,
- &.active:hover,
- &.active:focus {
- color: #fff;
- background-color: $color;
- border-color: $color;
- }
- }
-}
diff --git a/scss/tools/mixins/mixins.scss b/scss/tools/mixins/mixins.scss
index efee7696d0..a9a0d3884a 100644
--- a/scss/tools/mixins/mixins.scss
+++ b/scss/tools/mixins/mixins.scss
@@ -8,8 +8,6 @@
@import 'flex';
@import 'focus';
@import 'gradients';
-@import 'grid-framework';
-@import 'grid';
@import 'hide-text';
@import 'image';
@import 'nav-divider';
@@ -28,25 +26,4 @@
@import 'text-emphasis';
@import 'text-hide';
@import 'text-overflow';
-@import '../../components/accordion/mixins';
-@import '../../components/alert/mixins';
-@import '../../components/avatar/mixins';
-@import '../../components/badge/mixins';
-@import '../../components/breadcrumbs/mixins';
-@import '../../components/button/mixins';
-@import '../../components/checkbox/mixins';
-@import '../../components/forms/mixins';
-@import '../../components/input/mixins';
-@import '../../components/label/mixins';
-@import '../../components/link/mixins';
-@import '../../components/lightbox/mixins';
-@import '../../components/list-item/mixins';
-@import '../../components/loader/mixins';
-@import '../../components/modal/mixins';
-@import '../../components/page-header/mixins';
-@import '../../components/pagination/mixins';
-@import '../../components/panel/mixins';
-@import '../../components/progress/mixins';
-@import '../../components/radio/mixins';
-@import '../../components/toggle-switch/mixins';
@import '../../typography/mixins';
diff --git a/scss/tools/placeholders/page-layout.scss b/scss/tools/placeholders/page-layout.scss
deleted file mode 100644
index 1fd1ecc1b5..0000000000
--- a/scss/tools/placeholders/page-layout.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import '../../settings/core';
-@import '../../components/page-header/settings';
-//------------------------------------
-// Page Layout Placeholders
-//------------------------------------
-// Grid page with md-page-header ONLY
-// !import necessary to override transient issue with ui-grid assigning height to the container element
-%grid-header {
- .grid-container,
- .gridStyle {
- height: calc(100vh - #{$page-header-height}) !important;
- }
-}
-
-// Grid page with md-page-header AND md-page-sub-header
-// !import necessary to override transient issue with ui-grid assigning height to the container element
-%grid-subheader {
- .grid-container,
- .gridStyle {
- height: calc(
- 100vh - (#{$page-header-height} + #{$page-sub-header-height})
- ) !important;
- }
-}
-
-// Content page with md-page-header ONLY
-%content-header {
- .content-container {
- height: calc(100vh - #{$page-header-height});
- overflow-x: hidden;
- overflow-y: auto;
- }
-}
-
-// Content page with md-page-header AND md-page-sub-header
-%content-subheader {
- .content-container {
- height: calc(100vh - (#{$page-header-height} + #{$page-sub-header-height}));
- overflow-x: hidden;
- overflow-y: auto;
- }
-}
-
-// Page Gray Background
-%page-background-white {
- background-color: $md-white-100;
-}
-
-%page-content-padding {
- .content-container {
- padding: 1rem 1.5rem;
- }
-}
-
-%card-container-padding {
- .md-card-container {
- padding-top: $page-side-padding * 0.5;
- padding-bottom: $page-side-padding * 0.5;
- }
-}
diff --git a/scss/tools/placeholders/placeholders.scss b/scss/tools/placeholders/placeholders.scss
index 61759169b2..153a435d01 100644
--- a/scss/tools/placeholders/placeholders.scss
+++ b/scss/tools/placeholders/placeholders.scss
@@ -1,4 +1,3 @@
-@import 'page-layout';
@import 'spacing';
@import 'sticky';
@import '../../typography/placeholders';
diff --git a/scss/utilities/component-animation.scss b/scss/utilities/component-animation.scss
deleted file mode 100644
index acb99e9f56..0000000000
--- a/scss/utilities/component-animation.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.fade {
- opacity: 0;
- transition: opacity 0.15s linear;
-
- &.in {
- opacity: 1;
- }
-}
-
-[collapse].collapse {
- display: none;
-
- &.in {
- display: block;
- }
-}
-
-tr.collapse.in {
- display: table-row;
-}
-
-tbody.collapse.in {
- display: table-row-group;
-}
-
-.collapsing {
- position: relative;
- height: 0;
- overflow: hidden;
- transition-duration: 0.35s;
- transition-property: height, visibility;
- transition-timing-function: ease;
-}
diff --git a/scss/utilities/core.scss b/scss/utilities/core.scss
deleted file mode 100644
index e5b38d536c..0000000000
--- a/scss/utilities/core.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.ellipsis {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.primary-color {
- color: $md-theme-50;
-}
-
-.secondary-color {
- color: $md-gray-70;
-}
-
-.info-color {
- color: $md-mint-50;
-}
-
-.warning-color {
- color: $md-yellow-50;
-}
-
-.alert-color {
- color: $md-red-50;
-}
-
-.text-muted {
- color: $md-gray-40;
-}
-
-.md-decrypting {
- filter: blur(5px);
-}
-
-// Floats
-// -------------------------
-.clearfix {
- @include clearfix;
-}
-
-.center-block {
- @include center-block;
-}
-
-.pull-right {
- float: right !important;
-}
-
-.pull-left {
- float: left !important;
-}
-
-// Toggling content
-// -------------------------
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
-.hide {
- display: none !important;
-}
-
-.show {
- display: block !important;
-}
-
-.invisible {
- visibility: hidden;
-}
-
-.text-hide {
- @include text-hide;
-}
-
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-.hidden {
- display: none !important;
-}
-
-// For Affix plugin
-// -------------------------
-.affix {
- position: fixed;
-}
diff --git a/scss/utilities/cursor.scss b/scss/utilities/cursor.scss
deleted file mode 100644
index 7b7bc4f4cf..0000000000
--- a/scss/utilities/cursor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.cursor-default {
- cursor: default !important;
-}
-
-.cursor-pointer {
- cursor: pointer !important;
-}
diff --git a/scss/utilities/ellipsis.scss b/scss/utilities/ellipsis.scss
deleted file mode 100644
index 810c5d3582..0000000000
--- a/scss/utilities/ellipsis.scss
+++ /dev/null
@@ -1,688 +0,0 @@
-@import '../tools/functions/core';
-@import '../tools/mixins/text-hide';
-
-/**
-* @component utilities
-* @section visibility
-*
-* @state .hide
-* @state .hidden
-* @state .show
-* @state .invisible
-* @state .text-hide
-*
-*/
-
-.hide,
-.hidden {
- display: none !important;
-}
-
-.show {
- display: block !important;
-}
-
-.invisible {
- visibility: hidden !important;
-}
-
-.text-hide {
- @include text-hide;
-}
-
-// Media Class Names
-//
-// Visibility Breakpoints
-$visibility-breakpoint-sizes: small, medium, large, xlarge, xxlarge;
-$visibility-breakpoint-queries: unquote($small-up), unquote($medium-up),
- unquote($large-up), unquote($xlarge-up), unquote($xxlarge-up);
-
-@mixin visibility-loop {
- @each $current-visibility-breakpoint in $visibility-breakpoint-sizes {
- $visibility-inherit-list: ();
- $visibility-none-list: ();
- $visibility-visible-list: ();
- $visibility-hidden-list: ();
- $visibility-table-list: ();
- $visibility-table-header-group-list: ();
- $visibility-table-row-group-list: ();
- $visibility-table-row-list: ();
- $visibility-table-cell-list: ();
-
- @each $visibility-comparison-breakpoint in $visibility-breakpoint-sizes {
- @if index(
- $visibility-breakpoint-sizes,
- $visibility-comparison-breakpoint
- ) <
- index($visibility-breakpoint-sizes, $current-visibility-breakpoint)
- {
- // Smaller than current breakpoint
- $visibility-inherit-list: append(
- $visibility-inherit-list,
- unquote(
- '.hide-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-none-list: append(
- $visibility-none-list,
- unquote(
- '.show-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-visible-list: append(
- $visibility-visible-list,
- unquote(
- '.hidden-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-hidden-list: append(
- $visibility-hidden-list,
- unquote(
- '.visible-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-list: append(
- $visibility-table-list,
- unquote(
- 'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-header-group-list: append(
- $visibility-table-header-group-list,
- unquote(
- 'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-row-group-list: append(
- $visibility-table-row-group-list,
- unquote(
- 'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-row-list: append(
- $visibility-table-row-list,
- unquote(
- 'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-cell-list: append(
- $visibility-table-cell-list,
- unquote(
- 'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- } @else if
- index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint)
- >index($visibility-breakpoint-sizes, $current-visibility-breakpoint)
- {
- // Larger than current breakpoint
- $visibility-inherit-list: append(
- $visibility-inherit-list,
- unquote(
- '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-none-list: append(
- $visibility-none-list,
- unquote(
- '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-visible-list: append(
- $visibility-visible-list,
- unquote(
- '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-hidden-list: append(
- $visibility-hidden-list,
- unquote(
- '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-list: append(
- $visibility-table-list,
- unquote(
- 'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-header-group-list: append(
- $visibility-table-header-group-list,
- unquote(
- 'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-row-group-list: append(
- $visibility-table-row-group-list,
- unquote(
- 'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-row-list: append(
- $visibility-table-row-list,
- unquote(
- 'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-cell-list: append(
- $visibility-table-cell-list,
- unquote(
- 'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.hide-for-#{$visibility-comparison-breakpoint}-up, td.hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- } @else {
- // Current breakpoint
- $visibility-inherit-list: append(
- $visibility-inherit-list,
- unquote(
- '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-none-list: append(
- $visibility-none-list,
- unquote(
- '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-visible-list: append(
- $visibility-visible-list,
- unquote(
- '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-hidden-list: append(
- $visibility-hidden-list,
- unquote(
- '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-list: append(
- $visibility-table-list,
- unquote(
- 'table.show-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-header-group-list: append(
- $visibility-table-header-group-list,
- unquote(
- 'thead.show-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-row-group-list: append(
- $visibility-table-row-group-list,
- unquote(
- 'tbody.show-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-row-list: append(
- $visibility-table-row-list,
- unquote(
- 'tr.show-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- $visibility-table-cell-list: append(
- $visibility-table-cell-list,
- unquote(
- 'th.show-for-#{$visibility-comparison-breakpoint}-only, td.show-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up'
- ),
- comma
- );
- }
- }
- /* #{$current-visibility-breakpoint} displays */
- @media #{nth($visibility-breakpoint-queries, index($visibility-breakpoint-sizes, $current-visibility-breakpoint))} {
- #{$visibility-inherit-list} {
- display: inherit !important;
- }
-
- #{$visibility-none-list} {
- display: none !important;
- }
-
- #{$visibility-visible-list} {
- @include element-invisible-off;
- }
-
- #{$visibility-hidden-list} {
- @include element-invisible;
- }
-
- #{$visibility-table-list} {
- display: table !important;
- }
-
- #{$visibility-table-header-group-list} {
- display: table-header-group !important;
- }
-
- #{$visibility-table-row-group-list} {
- display: table-row-group !important;
- }
-
- #{$visibility-table-row-list} {
- display: table-row;
- }
-
- #{$visibility-table-cell-list} {
- display: table-cell !important;
- }
- }
- }
-}
-
-@include exports('visibility') {
- @include visibility-loop;
- /* Orientation targeting */
- .show-for-landscape,
- .hide-for-portrait {
- display: inherit !important;
- }
-
- .hide-for-landscape,
- .show-for-portrait {
- display: none !important;
- }
- /* Specific visibility for tables */
- table {
- &.hide-for-landscape,
- &.show-for-portrait {
- display: table !important;
- }
- }
-
- thead {
- &.hide-for-landscape,
- &.show-for-portrait {
- display: table-header-group !important;
- }
- }
-
- tbody {
- &.hide-for-landscape,
- &.show-for-portrait {
- display: table-row-group !important;
- }
- }
-
- tr {
- &.hide-for-landscape,
- &.show-for-portrait {
- display: table-row !important;
- }
- }
-
- td,
- th {
- &.hide-for-landscape,
- &.show-for-portrait {
- display: table-cell !important;
- }
- }
-
- @media #{$landscape} {
- .show-for-landscape,
- .hide-for-portrait {
- display: inherit !important;
- }
-
- .hide-for-landscape,
- .show-for-portrait {
- display: none !important;
- }
- /* Specific visibility for tables */
- table {
- &.show-for-landscape,
- &.hide-for-portrait {
- display: table !important;
- }
- }
-
- thead {
- &.show-for-landscape,
- &.hide-for-portrait {
- display: table-header-group !important;
- }
- }
-
- tbody {
- &.show-for-landscape,
- &.hide-for-portrait {
- display: table-row-group !important;
- }
- }
-
- tr {
- &.show-for-landscape,
- &.hide-for-portrait {
- display: table-row !important;
- }
- }
-
- td,
- th {
- &.show-for-landscape,
- &.hide-for-portrait {
- display: table-cell !important;
- }
- }
- }
-
- @media #{$portrait} {
- .show-for-portrait,
- .hide-for-landscape {
- display: inherit !important;
- }
-
- .hide-for-portrait,
- .show-for-landscape {
- display: none !important;
- }
- /* Specific visibility for tables */
- table {
- &.show-for-portrait,
- &.hide-for-landscape {
- display: table !important;
- }
- }
-
- thead {
- &.show-for-portrait,
- &.hide-for-landscape {
- display: table-header-group !important;
- }
- }
-
- tbody {
- &.show-for-portrait,
- &.hide-for-landscape {
- display: table-row-group !important;
- }
- }
-
- tr {
- &.show-for-portrait,
- &.hide-for-landscape {
- display: table-row !important;
- }
- }
-
- td,
- th {
- &.show-for-portrait,
- &.hide-for-landscape {
- display: table-cell !important;
- }
- }
- }
- /* Touch-enabled device targeting */
- .show-for-touch {
- display: none !important;
- }
-
- .hide-for-touch {
- display: inherit !important;
- }
-
- .touch .show-for-touch {
- display: inherit !important;
- }
-
- .touch .hide-for-touch {
- display: none !important;
- }
- /* Specific visibility for tables */
- table.hide-for-touch {
- display: table !important;
- }
-
- .touch table.show-for-touch {
- display: table !important;
- }
-
- thead.hide-for-touch {
- display: table-header-group !important;
- }
-
- .touch thead.show-for-touch {
- display: table-header-group !important;
- }
-
- tbody.hide-for-touch {
- display: table-row-group !important;
- }
-
- .touch tbody.show-for-touch {
- display: table-row-group !important;
- }
-
- tr.hide-for-touch {
- display: table-row !important;
- }
-
- .touch tr.show-for-touch {
- display: table-row !important;
- }
-
- td.hide-for-touch {
- display: table-cell !important;
- }
-
- .touch td.show-for-touch {
- display: table-cell !important;
- }
-
- th.hide-for-touch {
- display: table-cell !important;
- }
-
- .touch th.show-for-touch {
- display: table-cell !important;
- }
- /* Screen reader-specific classes */
- .show-for-sr {
- @include element-invisible;
- }
-
- .show-on-focus {
- @include element-invisible;
-
- &:focus,
- &:active {
- @include element-invisible-off;
- }
- }
- /*
- * Print styles.
- *
- * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
- * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
- */
- .print-only {
- display: none !important;
- }
-
- @media print {
- * {
- color: $md-black-100 !important;
- /* Black prints faster: h5bp.com/s */
- text-shadow: none !important;
- background: transparent !important;
- box-shadow: none !important;
- }
-
- .show-for-print {
- display: block;
- }
-
- .hide-for-print {
- display: none;
- }
-
- table.show-for-print {
- display: table !important;
- }
-
- thead.show-for-print {
- display: table-header-group !important;
- }
-
- tbody.show-for-print {
- display: table-row-group !important;
- }
-
- tr.show-for-print {
- display: table-row !important;
- }
-
- td.show-for-print {
- display: table-cell !important;
- }
-
- th.show-for-print {
- display: table-cell !important;
- }
-
- a,
- a:visited {
- text-decoration: underline;
- }
-
- a[href]:after {
- content: ' (' attr(href) ')';
- }
-
- abbr[title]:after {
- content: ' (' attr(title) ')';
- }
- // Don't show links for images, or javascript/internal links
- .ir a:after,
- a[href^='javascript:']:after,
- a[href^='#']:after {
- content: '';
- }
-
- pre,
- blockquote {
- border: 1px solid $md-gray-70;
- page-break-inside: avoid;
- }
-
- thead {
- display: table-header-group;
- /* h5bp.com/t */
- }
-
- tr,
- img {
- page-break-inside: avoid;
- }
-
- img {
- max-width: 100% !important;
- }
-
- @page {
- margin: 0.5cm;
- }
-
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3;
- }
-
- h2,
- h3 {
- page-break-after: avoid;
- }
-
- .hide-on-print {
- display: none !important;
- }
-
- .print-only {
- display: block !important;
- }
-
- .hide-for-print {
- display: none !important;
- }
-
- .show-for-print {
- display: inherit !important;
- }
- }
- /* Print visibility */
- @media print {
- .show-for-print {
- display: block;
- }
-
- .hide-for-print {
- display: none;
- }
-
- table.show-for-print {
- display: table !important;
- }
-
- thead.show-for-print {
- display: table-header-group !important;
- }
-
- tbody.show-for-print {
- display: table-row-group !important;
- }
-
- tr.show-for-print {
- display: table-row !important;
- }
-
- td.show-for-print {
- display: table-cell !important;
- }
-
- th.show-for-print {
- display: table-cell !important;
- }
- }
-
- @media not print {
- .show-for-print {
- display: none !important;
- }
- }
-}
-
-/* begin visibility override */
-
-.sr-only {
- @extend .show-for-sr;
-}
diff --git a/scss/utilities/image.scss b/scss/utilities/image.scss
deleted file mode 100644
index ae9e127217..0000000000
--- a/scss/utilities/image.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../tools/mixins/image';
-
-.img-responsive {
- @include img-responsive;
-}
diff --git a/scss/utilities/page-layout.scss b/scss/utilities/page-layout.scss
deleted file mode 100644
index 00d434d655..0000000000
--- a/scss/utilities/page-layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.content-container {
- padding: 0;
- margin: 0;
-}
diff --git a/scss/utilities/responsive.scss b/scss/utilities/responsive.scss
deleted file mode 100644
index a3e8a70c14..0000000000
--- a/scss/utilities/responsive.scss
+++ /dev/null
@@ -1,191 +0,0 @@
-//
-// Responsive: Utility classes
-// --------------------------------------------------
-
-// IE10 in Windows (Phone) 8
-//
-// Support for responsive views via media queries is kind of borked in IE10, for
-// Surface/desktop in split view and for Windows Phone 8. This particular fix
-// must be accompanied by a snippet of JavaScript to sniff the user agent and
-// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
-// our Getting Started page for more information on this bug.
-//
-// For more information, see the following:
-//
-// Issue: https://github.com/twbs/bootstrap/issues/10497
-// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
-// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
-// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
-
-@at-root {
- @-ms-viewport {
- width: device-width;
- }
-}
-
-// Visibility utilities
-// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
-
-@include responsive-invisibility('.visible-xs');
-@include responsive-invisibility('.visible-sm');
-@include responsive-invisibility('.visible-md');
-@include responsive-invisibility('.visible-lg');
-
-.visible-xs-block,
-.visible-xs-inline,
-.visible-xs-inline-block,
-.visible-sm-block,
-.visible-sm-inline,
-.visible-sm-inline-block,
-.visible-md-block,
-.visible-md-inline,
-.visible-md-inline-block,
-.visible-lg-block,
-.visible-lg-inline,
-.visible-lg-inline-block {
- display: none !important;
-}
-
-@media (max-width: $screen-xs-max) {
- @include responsive-visibility('.visible-xs');
-}
-
-.visible-xs-block {
- @media (max-width: $screen-xs-max) {
- display: block !important;
- }
-}
-
-.visible-xs-inline {
- @media (max-width: $screen-xs-max) {
- display: inline !important;
- }
-}
-
-.visible-xs-inline-block {
- @media (max-width: $screen-xs-max) {
- display: inline-block !important;
- }
-}
-
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
- @include responsive-visibility('.visible-sm');
-}
-
-.visible-sm-block {
- @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
- display: block !important;
- }
-}
-
-.visible-sm-inline {
- @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
- display: inline !important;
- }
-}
-
-.visible-sm-inline-block {
- @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
- display: inline-block !important;
- }
-}
-
-@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
- @include responsive-visibility('.visible-md');
-}
-
-.visible-md-block {
- @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
- display: block !important;
- }
-}
-
-.visible-md-inline {
- @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
- display: inline !important;
- }
-}
-
-.visible-md-inline-block {
- @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
- display: inline-block !important;
- }
-}
-
-@media (min-width: $screen-lg-min) {
- @include responsive-visibility('.visible-lg');
-}
-
-.visible-lg-block {
- @media (min-width: $screen-lg-min) {
- display: block !important;
- }
-}
-
-.visible-lg-inline {
- @media (min-width: $screen-lg-min) {
- display: inline !important;
- }
-}
-
-.visible-lg-inline-block {
- @media (min-width: $screen-lg-min) {
- display: inline-block !important;
- }
-}
-
-@media (max-width: $screen-xs-max) {
- @include responsive-invisibility('.hidden-xs');
-}
-
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
- @include responsive-invisibility('.hidden-sm');
-}
-
-@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
- @include responsive-invisibility('.hidden-md');
-}
-
-@media (min-width: $screen-lg-min) {
- @include responsive-invisibility('.hidden-lg');
-}
-
-// Print utilities
-//
-// Media queries are placed on the inside to be mixin-friendly.
-
-// Note: Deprecated .visible-print as of v3.2.0
-
-@include responsive-invisibility('.visible-print');
-
-@media print {
- @include responsive-visibility('.visible-print');
-}
-
-.visible-print-block {
- display: none !important;
-
- @media print {
- display: block !important;
- }
-}
-
-.visible-print-inline {
- display: none !important;
-
- @media print {
- display: inline !important;
- }
-}
-
-.visible-print-inline-block {
- display: none !important;
-
- @media print {
- display: inline-block !important;
- }
-}
-
-@media print {
- @include responsive-invisibility('.hidden-print');
-}
diff --git a/scss/utilities/spacing.scss b/scss/utilities/spacing.scss
deleted file mode 100644
index c13aa90dc0..0000000000
--- a/scss/utilities/spacing.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@import '../tools/mixins/spacing.scss';
-
-@include generateSpacingClasses($type: 'margin', $locations: $spacing-margins);
-@include generateSpacingClasses($type: 'padding', $locations: $spacing-paddings);
-
-// TODO(pauljeter): Remove deprecated spacing classes with the next BREAKING update
-.md-m { @extend .md-margin; }
-.md-mt { @extend .md-margin__top; }
-.md-mr { @extend .md-margin__right; }
-.md-mb { @extend .md-margin__bottom; }
-.md-ml { @extend .md-margin__left; }
-.md-mh { @extend .md-margin__horizontal; }
-.md-mv { @extend .md-margin__vertical; }
-.md-m- { @extend .md-margin--s; }
-.md-mt- { @extend .md-margin__top--s; }
-.md-mr- { @extend .md-margin__right--s; }
-.md-mb- { @extend .md-margin__bottom--s; }
-.md-ml- { @extend .md-margin__left--s; }
-.md-mh- { @extend .md-margin__horizontal--s; }
-.md-mv- { @extend .md-margin__vertical--s; }
-.md-m\+ { @extend .md-margin--l; }
-.md-mt\+ { @extend .md-margin__top--l; }
-.md-mr\+ { @extend .md-margin__right--l; }
-.md-mb\+ { @extend .md-margin__bottom--l; }
-.md-ml\+ { @extend .md-margin__left--l; }
-.md-mh\+ { @extend .md-margin__horizontal--l; }
-.md-mv\+ { @extend .md-margin__vertical--l; }
-.md-m\+\+ { @extend .md-margin--xl; }
-.md-mt\+\+ { @extend .md-margin__top--xl; }
-.md-mr\+\+ { @extend .md-margin__right--xl; }
-.md-mb\+\+ { @extend .md-margin__bottom--xl; }
-.md-ml\+\+ { @extend .md-margin__left--xl; }
-.md-mh\+\+ { @extend .md-margin__horizontal--xl; }
-.md-mv\+\+ { @extend .md-margin__vertical--xl; }
-.md-m0 { @extend .md-margin--none; }
-.md-mt0 { @extend .md-margin__top--none; }
-.md-mr0 { @extend .md-margin__right--none; }
-.md-mb0 { @extend .md-margin__bottom--none; }
-.md-ml0 { @extend .md-margin__left--none; }
-.md-mh0 { @extend .md-margin__horizontal--none; }
-.md-mv0 { @extend .md-margin__vertical--none; }
-
-.md-p { @extend .md-padding; }
-.md-pt { @extend .md-padding__top; }
-.md-pr { @extend .md-padding__right; }
-.md-pb { @extend .md-padding__bottom; }
-.md-pl { @extend .md-padding__left; }
-.md-ph { @extend .md-padding__horizontal; }
-.md-pv { @extend .md-padding__vertical; }
-.md-p- { @extend .md-padding--s; }
-.md-pt- { @extend .md-padding__top--s; }
-.md-pr- { @extend .md-padding__right--s; }
-.md-pb- { @extend .md-padding__bottom--s; }
-.md-pl- { @extend .md-padding__left--s; }
-.md-ph- { @extend .md-padding__horizontal--s; }
-.md-pv- { @extend .md-padding__vertical--s; }
-.md-p\+ { @extend .md-padding--l; }
-.md-pt\+ { @extend .md-padding__top--l; }
-.md-pr\+ { @extend .md-padding__right--l; }
-.md-pb\+ { @extend .md-padding__bottom--l; }
-.md-pl\+ { @extend .md-padding__left--l; }
-.md-ph\+ { @extend .md-padding__horizontal--l; }
-.md-pv\+ { @extend .md-padding__vertical--l; }
-.md-p\+\+ { @extend .md-padding--xl; }
-.md-pt\+\+ { @extend .md-padding__top--xl; }
-.md-pr\+\+ { @extend .md-padding__right--xl; }
-.md-pb\+\+ { @extend .md-padding__bottom--xl; }
-.md-pl\+\+ { @extend .md-padding__left--xl; }
-.md-ph\+\+ { @extend .md-padding__horizontal--xl; }
-.md-pv\+\+ { @extend .md-padding__vertical--xl; }
-.md-p0 { @extend .md-padding--none; }
-.md-pt0 { @extend .md-padding__top--none; }
-.md-pr0 { @extend .md-padding__right--none; }
-.md-pb0 { @extend .md-padding__bottom--none; }
-.md-pl0 { @extend .md-padding__left--none; }
-.md-ph0 { @extend .md-padding__horizontal--none; }
-.md-pv0 { @extend .md-padding__vertical--none; }
diff --git a/scss/utilities/utilities.scss b/scss/utilities/utilities.scss
deleted file mode 100644
index c8158e22a8..0000000000
--- a/scss/utilities/utilities.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import 'component-animation';
-@import 'core';
-@import 'ellipsis';
-@import 'image';
-@import 'responsive';
-@import 'page-layout';
-@import 'cursor';
-@import 'spacing';
diff --git a/src/components/Avatar/Avatar.constants.ts b/src/components/Avatar/Avatar.constants.ts
index 53b59c641e..46305ba585 100644
--- a/src/components/Avatar/Avatar.constants.ts
+++ b/src/components/Avatar/Avatar.constants.ts
@@ -46,6 +46,7 @@ const STYLE = {
presenceIconWrapper: `${CLASS_PREFIX}-presence-icon-wrapper`,
buttonWrapper: `${CLASS_PREFIX}-button-wrapper`,
animationWrapper: `${CLASS_PREFIX}-animation-wrapper`,
+ loadingAnimation: `${CLASS_PREFIX}-loading-animation`,
};
const DEFAULTS = {
diff --git a/src/components/Avatar/Avatar.style.scss b/src/components/Avatar/Avatar.style.scss
index 95aefedc1f..69e4e8a038 100644
--- a/src/components/Avatar/Avatar.style.scss
+++ b/src/components/Avatar/Avatar.style.scss
@@ -289,4 +289,39 @@
justify-content: center;
align-items: center;
border-radius: 100vh;
+
+ .md-avatar-loading-animation {
+ position: absolute;
+ width: 1rem;
+ transform: scale(0.4);
+ aspect-ratio: 1;
+ border-radius: 100vh;
+ animation: loading-key 1s infinite linear alternate;
+ }
+
+ @keyframes loading-key {
+ 0% {
+ box-shadow: 1.25rem 0 var(--mds-color-theme-common-text-primary-normal),
+ -1.25rem 0 var(--mds-color-theme-common-text-primary-disabled);
+ background: var(--mds-color-theme-common-text-primary-normal);
+ }
+
+ 33% {
+ box-shadow: 1.25rem 0 var(--mds-color-theme-common-text-primary-normal),
+ -1.25rem 0 var(--mds-color-theme-common-text-primary-disabled);
+ background: var(--mds-color-theme-common-text-primary-disabled);
+ }
+
+ 66% {
+ box-shadow: 1.25rem 0 var(--mds-color-theme-common-text-primary-disabled),
+ -1.25rem 0 var(--mds-color-theme-common-text-primary-normal);
+ background: var(--mds-color-theme-common-text-primary-disabled);
+ }
+
+ 100% {
+ box-shadow: 1.25rem 0 var(--mds-color-theme-common-text-primary-disabled),
+ -1.25rem 0 var(--mds-color-theme-common-text-primary-normal);
+ background: var(--mds-color-theme-common-text-primary-normal);
+ }
+ }
}
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 15c44be740..3d3460abb8 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -6,7 +6,6 @@ import type { Props } from './Avatar.types';
import { STYLE, DEFAULTS, AVATAR_ICON_SIZE_MAPPING } from './Avatar.constants';
import Icon from '../Icon';
import ButtonSimple from '../ButtonSimple';
-import Loading from '../../legacy/Loading';
import Presence from './Presence';
import Initials from './Initials';
import { getInitials } from './Avatar.utils';
@@ -119,9 +118,7 @@ const Avatar = (props: Props, ref: RefObject) => {
className={classnames(STYLE.wrapperChildren, STYLE.animationWrapper)}
aria-hidden="true"
>
-
-
-
-
-
-
-
-
-
+ />
diff --git a/src/components/LegacyComponentImporter/LegacyComponentImporter.style.scss b/src/components/LegacyComponentImporter/LegacyComponentImporter.style.scss
index 8b2785a166..3bea9adf85 100644
--- a/src/components/LegacyComponentImporter/LegacyComponentImporter.style.scss
+++ b/src/components/LegacyComponentImporter/LegacyComponentImporter.style.scss
@@ -1 +1 @@
-@import '~legacystyles/momentum-ui';
+@import '~legacystyles/momentum-ui-base';
diff --git a/src/components/ThemeProvider/ThemeProvider.constants.ts b/src/components/ThemeProvider/ThemeProvider.constants.ts
index 90ba06d456..0ad4454004 100644
--- a/src/components/ThemeProvider/ThemeProvider.constants.ts
+++ b/src/components/ThemeProvider/ThemeProvider.constants.ts
@@ -1,8 +1,7 @@
import { MDTheme, ThemeNames } from './ThemeProvider.types';
-const THEME_CLASS_PREFIX = 'md-theme';
const THEME_CLASS_PREFIX_STABLE = 'mds-theme-stable';
-const CLASS_PREFIX = `${THEME_CLASS_PREFIX}-provider`;
+const CLASS_PREFIX = `md-theme-provider`;
const STYLE = {
wrapper: `${CLASS_PREFIX}-wrapper`,
@@ -42,16 +41,7 @@ const DEFAULTS = {
THEME: THEME_NAMES.DARK_WEBEX,
};
-export {
- CLASS_PREFIX,
- DEFAULTS,
- MD_THEMES,
- STYLE,
- THEME_CLASS_PREFIX,
- THEME_CLASS_PREFIX_STABLE,
- THEME_NAMES,
- THEMES,
-};
+export { CLASS_PREFIX, DEFAULTS, MD_THEMES, STYLE, THEME_CLASS_PREFIX_STABLE, THEME_NAMES, THEMES };
export const TEAM_COLORS = {
default: 'default',
diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx
index e9679fc731..4f5b7ec5a4 100644
--- a/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.tsx
@@ -1,7 +1,5 @@
import React, { FC } from 'react';
import classNames from 'classnames';
-// TODO: legacy tokens - to be removed:
-import '@momentum-ui/design-tokens/dist/index.css';
// TODO: we should not use core colors, only theme colors - to be removed:
import '@momentum-design/tokens/dist/css/core/complete.css';
import '@momentum-design/tokens/dist/css/elevation/complete.css';
@@ -31,12 +29,7 @@ import {
IllustrationProvider as MdcIllustrationProvider,
} from '@momentum-design/components/dist/react';
-import {
- DEFAULTS,
- STYLE,
- THEME_CLASS_PREFIX,
- THEME_CLASS_PREFIX_STABLE,
-} from './ThemeProvider.constants';
+import { DEFAULTS, STYLE, THEME_CLASS_PREFIX_STABLE } from './ThemeProvider.constants';
import { Props } from './ThemeProvider.types';
import './ThemeProvider.style.scss';
@@ -44,14 +37,12 @@ import './ThemeProvider.style.scss';
* Provides a collection of CSSVariables based on a ThemeToken to all child elements inside of a rendered `` element.
*/
const ThemeProvider: FC = ({ children, id, style, theme }: Props) => {
- // TODO: get rid of legacy theme
- const themeClass = `${THEME_CLASS_PREFIX}-${theme || DEFAULTS.THEME}`;
const themeClassStable = `${THEME_CLASS_PREFIX_STABLE}-${theme || DEFAULTS.THEME}`;
return (
diff --git a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx
index 1d833a58c4..7f934e3aef 100644
--- a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx
+++ b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx
@@ -2,12 +2,7 @@ import React from 'react';
import { mount } from 'enzyme';
import ThemeProvider from './ThemeProvider';
-import {
- STYLE,
- THEME_CLASS_PREFIX,
- THEME_CLASS_PREFIX_STABLE,
- THEMES,
-} from './ThemeProvider.constants';
+import { STYLE, THEME_CLASS_PREFIX_STABLE, THEMES } from './ThemeProvider.constants';
import { renderWithWebComponent } from '../../../test/utils';
describe('
@@ -41,11 +41,11 @@ exports[`
diff --git a/src/examples/App.js b/src/examples/App.js
deleted file mode 100644
index 1bfcf5ab84..0000000000
--- a/src/examples/App.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Switch, Route, NavLink } from 'react-router-dom';
-import Playground from './containers/Playground';
-import KitchenSink from './containers/KitchenSink';
-import Sidebar from './containers/Sidebar';
-import { Topbar } from '@momentum-ui/react-collaboration';
-
-import logo from '../../images/momentum-horiz-color.svg';
-
-const App = () => {
- const wordMark = 
;
-
- return (
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default App;
diff --git a/src/examples/InsertExample.js b/src/examples/InsertExample.js
deleted file mode 100644
index 79bbb235a9..0000000000
--- a/src/examples/InsertExample.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-// Import Method Show Below
-import { Button } from '@momentum-ui/react-collaboration';
-
-// Sample Class Method Show Below
-export default class PlaygroundComponent extends React.Component {
- render() {
- return ;
- }
-}
diff --git a/src/examples/ThemeSelect/index.js b/src/examples/ThemeSelect/index.js
deleted file mode 100644
index a67fb96740..0000000000
--- a/src/examples/ThemeSelect/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import {
- Select,
- SelectOption,
- Modal,
- ModalHeader,
- ModalBody,
- Icon,
-} from '@momentum-ui/react-collaboration';
-import { dark, light } from './themes';
-
-const themes = {
- dark: dark,
- light: light,
-};
-
-const ThemeSelect = () => {
- const setTheme = (theme) => {
- if (!theme) {
- document.documentElement.removeAttribute('style');
- return;
- }
-
- Object.keys(theme).forEach((key) => {
- document.documentElement.style.setProperty(key, theme[key]);
- });
- };
-
- const onSelect = (options) => {
- const themeName = options[0].value;
- setTheme(themes[themeName]);
- };
-
- let modalRef = React.useRef();
- const [showModal, setShowModal] = React.useState(false);
-
- const colors = () => {
- return (
-
- {Object.keys(themes.dark).map((key) => {
- return (
-
-
- {key}
-
-
-
- );
- })}
-
- );
- };
-
- return (
-
- {
- setShowModal(false);
- }}
- show={showModal}
- ref={modalRef}
- htmlId="theme_color_modal"
- size="large"
- >
- {colors()}
-
-
-
- {
- setShowModal(true);
- }}
- />
-
-
- );
-};
-
-export default ThemeSelect;
diff --git a/src/examples/containers/AsyncComponent/index.js b/src/examples/containers/AsyncComponent/index.js
deleted file mode 100644
index 9117e1ac56..0000000000
--- a/src/examples/containers/AsyncComponent/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class AsyncComponent extends React.Component {
- state = { Component: null };
-
- async componentDidMount() {
- try {
- const Component = await this.props.loader();
-
- this.setComponent(Component.default);
- } catch (e) {
- return;
- }
- }
-
- setComponent = (Component) => {
- this.setState({ Component });
- };
-
- render() {
- const { Component } = this.state;
- const { Placeholder, ...props } = this.props;
-
- const getPlaceholder = () =>
- typeof Placeholder === 'string' ? (
- /* eslint-disable */
-
- ) : (
- /* eslint-enable */
- Placeholder
- );
-
- return Component ? React Kitchen Sink
-
-
- {Object.entries(KitchenSinkComponents).map((ele) => {
- const Component = ele[1];
- return (
-
-
-
- );
- }
-}
diff --git a/src/examples/containers/Playground/index.js b/src/examples/containers/Playground/index.js
deleted file mode 100644
index c51294e34a..0000000000
--- a/src/examples/containers/Playground/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import SampleComponent from '../../InsertExample';
-
-const Playground = () => {
- return (
- <>
- React Playground
-
-
-
- );
-};
-
-export default Playground;
diff --git a/src/examples/containers/Sidebar/index.js b/src/examples/containers/Sidebar/index.js
deleted file mode 100644
index 1c98db646d..0000000000
--- a/src/examples/containers/Sidebar/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { Sidebar, SidebarBody, SidebarNav, SidebarNavItem } from '@momentum-ui/react-collaboration';
-import { snakeCase } from '../../../legacy/utils';
-import * as KitchenSinkComponents from '../../data/components';
-import ThemeSelect from '../../ThemeSelect';
-
-export default class KitchenSink extends React.PureComponent {
- render() {
- return (
-
-
-
-
- {Object.keys(KitchenSinkComponents).map((ele) => (
-
-
-
-
- );
- }
-}
diff --git a/src/examples/data/components.js b/src/examples/data/components.js
deleted file mode 100644
index 315ca3a04a..0000000000
--- a/src/examples/data/components.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export { default as AlertBanner } from '../../legacy/AlertBanner/examples/KitchenSink';
-export { default as Avatar } from '../../legacy/Avatar/examples/KitchenSink';
-export { default as Badge } from '../../legacy/Badge/examples/KitchenSink';
-export { default as Button } from '../../legacy/Button/examples/KitchenSink';
-export { default as ButtonGroup } from '../../legacy/ButtonGroup/examples/KitchenSink';
-export { default as ContentItem } from '../../legacy/ContentItem/examples/KitchenSink';
-export { default as Icon } from '../../legacy/Icon/examples/KitchenSink';
-export { default as Input } from '../../legacy/Input/examples/KitchenSink';
-export { default as Lightbox } from '../../legacy/Lightbox/examples/KitchenSink';
-export { default as Link } from '../../legacy/Link/examples/KitchenSink';
-export { default as List } from '../../legacy/List/examples/KitchenSink';
-export { default as ListItem } from '../../legacy/ListItem/examples/KitchenSink';
-export { default as ListItemHeader } from '../../legacy/ListItemHeader/examples/KitchenSink';
-export { default as Loading } from '../../legacy/Loading/examples/KitchenSink';
-export { default as Modal } from '../../legacy/Modal/examples/KitchenSink';
-export { default as ModalBody } from '../../legacy/ModalBody/examples/KitchenSink';
-export { default as ModalFooter } from '../../legacy/ModalFooter/examples/KitchenSink';
-export { default as Popover } from '../../legacy/Popover/examples/KitchenSink';
-export { default as SpaceListItem } from '../../legacy/SpaceListItem/examples/KitchenSink';
-export { default as Tooltip } from '../../legacy/Tooltip/examples/KitchenSink';
diff --git a/src/examples/favicon.ico b/src/examples/favicon.ico
deleted file mode 100644
index 7dfde37220..0000000000
Binary files a/src/examples/favicon.ico and /dev/null differ
diff --git a/src/examples/index.ejs b/src/examples/index.ejs
deleted file mode 100755
index b8e813b1b7..0000000000
--- a/src/examples/index.ejs
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
- <% if (htmlWebpackPlugin.options.trackJSToken) { %>
-
-
- <% } %>
-
-
-
- React Kitchen Sink
-
-
-
-
-
diff --git a/src/examples/index.js b/src/examples/index.js
deleted file mode 100644
index 372f0c5b29..0000000000
--- a/src/examples/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
-import { AppContainer } from 'react-hot-loader';
-
-import App from './App';
-
-import './styles.scss';
-
-render(
-
-
-
- ,
- document.getElementById('app')
-);
-
-if (module.hot) {
- module.hot.accept('./App', () => {
- render(
-
-
-
- ,
- document.getElementById('app')
- );
- });
-}
diff --git a/src/examples/styles.scss b/src/examples/styles.scss
deleted file mode 100644
index 798b9d78e8..0000000000
--- a/src/examples/styles.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-$brand-font-folder: '~@momentum-design/fonts/dist/inter';
-$icon-font-path: '~@momentum-ui/icons/fonts';
-$images-path: '../../images';
-
-@import '../../scss/momentum-ui';
-$side-nav-width: 240px;
-
-body {
- background: $md-white-100;
-}
-
-.docs-container {
- &--with-side-nav {
- display: grid;
- grid-template-columns: $side-nav-width minmax(0, 1fr);
- grid-template-areas: 'sidenav content';
- }
-
- &__side-nav {
- grid-area: sidenav;
- }
-
- &__content {
- grid-area: content;
- }
-}
-
-.kitchen-sink {
- &__section {
- margin-bottom: 2rem;
-
- h3 {
- margin-bottom: 2rem;
- }
- }
-}
-
-.paint {
- &-chips {
- color: $md-white-100;
-
- &__name {
- text-transform: capitalize;
- color: $md-white-100;
- padding: 1rem;
- }
-
- &--light {
- color: $md-black-100;
-
- .paint-chips__name {
- color: $md-black-100;
- }
- }
-
- &--opacity {
- background: url('#{$images-path}/opacity-bkgd.jpg');
-
- .paint-chip {
- border-bottom: $md-white-100 1px solid;
-
- &--light {
- border-color: $md-gray-70;
- }
- }
- }
- }
-
- &-chip {
- color: $md-white-100;
- padding: 1rem;
- display: flex;
- justify-content: space-between;
-
- &--light,
- &--light {
- color: $md-black-100;
- }
-
- &-group {
- margin-bottom: 1rem;
- }
- }
-}
diff --git a/src/examples/webpack-public-path.js b/src/examples/webpack-public-path.js
deleted file mode 100644
index 84022b4df7..0000000000
--- a/src/examples/webpack-public-path.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// Dynamically set the webpack public path at runtime below
-// This magic global is used by webpack to set the public path at runtime.
-// The public path is set dynamically to avoid the following issues:
-// 1. https://github.com/coryhouse/react-slingshot/issues/205
-// 2. https://github.com/coryhouse/react-slingshot/issues/181
-// 3. https://github.com/coryhouse/react-slingshot/pull/125
-// Documentation: https://webpack.js.org/configuration/output/#output-publicpath
-// eslint-disable-next-line no-undef
-__webpack_public_path__ = window.location.protocol + '//' + window.location.host + '/';
diff --git a/src/helpers/cssTokenCheck.js b/src/helpers/cssTokenCheck.js
index ea70338f1e..974834ff46 100644
--- a/src/helpers/cssTokenCheck.js
+++ b/src/helpers/cssTokenCheck.js
@@ -139,7 +139,7 @@ const checkAllFiles = function (pathPattern) {
try {
if (
filePath != 'src/helpers/cssTokenCheck.js' &&
- filePath != 'src/examples/ThemeSelect/themes.js'
+ filePath != 'src/helpers/mdl-token-examples.js'
) {
readAndCheckTokens(filePath);
}
@@ -165,23 +165,21 @@ getTokensFromSource(
).then((resultMdsTokens) => {
mdsTokens = resultMdsTokens;
- getTokensFromSource('../../src/examples/ThemeSelect/themes.js', 'mdl-examples').then(
- (resultMdlTokens) => {
- mdlTokens = resultMdlTokens;
-
- if (file) {
- readAndCheckTokens(file);
- } else if (globPatterns.length) {
- globPatterns.forEach((glob) => {
- checkAllFiles(glob);
- });
- } else {
- isMDSCheck = true;
- checkAllFiles('src/**/*.*');
- isMDSCheck = false;
- checkAllFiles('scss/**/*.*');
- checkAllFiles('css/**/*.*');
- }
+ getTokensFromSource('./mdl-token-examples.js', 'mdl-examples').then((resultMdlTokens) => {
+ mdlTokens = resultMdlTokens;
+
+ if (file) {
+ readAndCheckTokens(file);
+ } else if (globPatterns.length) {
+ globPatterns.forEach((glob) => {
+ checkAllFiles(glob);
+ });
+ } else {
+ isMDSCheck = true;
+ checkAllFiles('src/**/*.*');
+ isMDSCheck = false;
+ checkAllFiles('scss/**/*.*');
+ checkAllFiles('css/**/*.*');
}
- );
+ });
});
diff --git a/src/examples/ThemeSelect/themes.js b/src/helpers/mdl-token-examples.js
similarity index 100%
rename from src/examples/ThemeSelect/themes.js
rename to src/helpers/mdl-token-examples.js
diff --git a/src/helpers/verifyTypes.unit.test.tsx b/src/helpers/verifyTypes.unit.test.tsx
index 9b13359783..ea63c9765d 100644
--- a/src/helpers/verifyTypes.unit.test.tsx
+++ b/src/helpers/verifyTypes.unit.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import ListItemBase from '../components/ListItemBase';
import { verifyTypes, verifyType, isMRv2Button } from './verifyTypes';
import { ButtonCircle, ButtonSimple, ButtonPill } from '../components';
-import { Button } from '@momentum-ui/react-collaboration';
+import { Button } from '@momentum-design/components/dist/react';
describe('verifyTypes', () => {
it('returns true if types are correct', () => {
diff --git a/src/index.ts b/src/index.ts
index b14a134dc6..f4faebaf98 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,30 +1,3 @@
-/**
- * Entry file for momentum-ui-react module.
- */
-export {
- AlertBanner,
- Badge,
- Button,
- ButtonGroup,
- ContentItem,
- Icon,
- Input,
- Lightbox,
- Link,
- List,
- ListItem,
- ListItemHeader,
- ListItemSection,
- Loading,
- Modal,
- ModalBody,
- ModalFooter,
- ModalHeader,
- Popover,
- SpaceListItem,
- Tooltip as TooltipLegacy,
-} from './legacy';
-
/** V2 Components [TypeScript] */
export {
Accordion as AccordionNext,
diff --git a/src/legacy/AlertBanner/examples/Default.js b/src/legacy/AlertBanner/examples/Default.js
deleted file mode 100644
index dfaba69c50..0000000000
--- a/src/legacy/AlertBanner/examples/Default.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { AlertBanner, Button } from '@momentum-ui/react-collaboration';
-export default class AlertBannerDefault extends React.PureComponent {
- state = {
- showAlert1: true,
- };
- render() {
- return (
-
-
- this.setState({ showAlert1: false })}
- >
- Default Alert Banner
-
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/AlertBanner/examples/Error.js b/src/legacy/AlertBanner/examples/Error.js
deleted file mode 100644
index 096780ef56..0000000000
--- a/src/legacy/AlertBanner/examples/Error.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { AlertBanner, Button } from '@momentum-ui/react-collaboration';
-export default class AlertBannerError extends React.PureComponent {
- state = {
- showAlert1: true,
- };
- render() {
- return (
-
-
- this.setState({ showAlert1: false })}
- type="error"
- >
- Error Alert Banner
-
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/AlertBanner/examples/KitchenSink.js b/src/legacy/AlertBanner/examples/KitchenSink.js
deleted file mode 100644
index dd7a0b0ae9..0000000000
--- a/src/legacy/AlertBanner/examples/KitchenSink.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { AlertBannerDefault, AlertBannerError, AlertBannerWarning } from './index';
-
-export default class AlertBannerKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/AlertBanner/examples/KitchenSink.stories.tsx b/src/legacy/AlertBanner/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 919ad4b91c..0000000000
--- a/src/legacy/AlertBanner/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/AlertBanner',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () => this.setState({ showAlert1: false })}
- type="warning"
- >
- Warning Alert Banner
-
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/AlertBanner/examples/index.js b/src/legacy/AlertBanner/examples/index.js
deleted file mode 100644
index 59a2bd7e6c..0000000000
--- a/src/legacy/AlertBanner/examples/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as AlertBannerDefault } from './Default';
-export { default as AlertBannerError } from './Error';
-export { default as AlertBannerKitchenSink } from './KitchenSink';
-export { default as AlertBannerWarning } from './Warning';
diff --git a/src/legacy/AlertBanner/index.js b/src/legacy/AlertBanner/index.js
deleted file mode 100644
index 800707aa10..0000000000
--- a/src/legacy/AlertBanner/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/** @component alert-banner */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Icon } from '@momentum-ui/react-collaboration';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-const AlertBanner = (props) => {
- const {
- className,
- closable,
- closeBtnProps,
- children,
- onHide,
- onKeyDownClose,
- show,
- type,
- ...otherProps
- } = props;
-
- const handleKeyDown = (e) => {
- if (e.which === 32 || e.charCode === 32 || e.which === 13 || e.charCode === 13) {
- onHide && onHide(e);
- e.preventDefault();
- }
-
- onKeyDownClose && onKeyDownClose(e);
- };
-
- return (
- show && (
-
- {children}
- {closable && (
- onHide(e) })}
- {...((onHide || onKeyDownClose) && {
- onKeyDown: (e) => handleKeyDown(e),
- role: 'button',
- tabIndex: 0,
- })}
- {...closeBtnProps}
- >
-
- Test
-
- );
-
- expect(container.find('.md-alert-banner__close').exists()).toEqual(false);
- });
-
- it('should display closable button if prop set to true', () => {
- const container = shallow(
- ShowBanner
-
- );
-
- container.find('.md-alert-banner__close').simulate('click');
- expect(onClose).toHaveBeenCalled();
- });
-
- it('should close the banner on keyDown of Space', () => {
- const onClose = jest.fn();
-
- const container = mount(
-
- ShowBanner
-
- );
-
- container.find('.md-alert-banner__close').simulate('keyDown', { which: 13 });
- expect(onClose).toHaveBeenCalled();
- container.find('.md-alert-banner__close').simulate('keyDown', { charCode: 13 });
- expect(onClose).toHaveBeenCalledTimes(2);
- });
-
- it('should close the banner on keyDown of Enter', () => {
- const onClose = jest.fn();
-
- const container = mount(
-
- ShowBanner
-
- );
-
- container.find('.md-alert-banner__close').simulate('keyDown', { which: 32 });
- expect(onClose).toHaveBeenCalled();
- container.find('.md-alert-banner__close').simulate('keyDown', { charCode: 32 });
- expect(onClose).toHaveBeenCalledTimes(2);
- });
-
- it('should do nothing on keyDown of letter d', () => {
- const onClose = jest.fn();
-
- const container = mount(
-
- ShowBanner
-
- );
-
- container.find('.md-alert-banner__close').simulate('keyDown', { which: 100 });
- expect(onClose).toHaveBeenCalledTimes(0);
- });
-
- it('should pass onKeyDownClose function', () => {
- const onKeyDown = jest.fn();
-
- const container = mount(
-
- ShowBanner
-
- );
-
- container.find('.md-alert-banner__close').simulate('keyDown', { which: 100 });
- expect(onKeyDown).toHaveBeenCalled();
- });
-});
diff --git a/src/legacy/AlertBanner/tests/index.spec.js.snap b/src/legacy/AlertBanner/tests/index.spec.js.snap
deleted file mode 100644
index fb61764e2f..0000000000
--- a/src/legacy/AlertBanner/tests/index.spec.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
-
-
-
-
-`;
diff --git a/src/legacy/Avatar/examples/Active.js b/src/legacy/Avatar/examples/Active.js
deleted file mode 100644
index 28f48e4e1d..0000000000
--- a/src/legacy/Avatar/examples/Active.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { Avatar } from '@momentum-ui/react-collaboration';
-export default class AvatarActive extends React.PureComponent {
- render() {
- return
-
- );
- }
-}
diff --git a/src/legacy/Avatar/examples/KitchenSink.stories.tsx b/src/legacy/Avatar/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 81124f7986..0000000000
--- a/src/legacy/Avatar/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/Avatar',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () => 
(this.image = ref)}
- />
- );
- return imgChildren;
- } else if (icon) {
- return getIcon();
- } else if (title) {
- return getLetter();
- }
- };
-
- const getAvatar = () => (
-
- {getChildren()}
- {type === 'typing' && {}} ariaLabel="Test onClick" />
- );
-
- expect(container.find('.md-avatar--clickable').length).toEqual(1);
- });
-
- it('should not apply clickable class when onClick prop is undefined', () => {
- let container = mount(
-
-
-`;
diff --git a/src/legacy/Badge/examples/Default.js b/src/legacy/Badge/examples/Default.js
deleted file mode 100644
index 468bd2477f..0000000000
--- a/src/legacy/Badge/examples/Default.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { Badge } from '@momentum-ui/react-collaboration';
-export default function BadgeDefault() {
- return (
-
-
-
- Default
-
-
-
- Blue
-
-
-
- Red
-
-
-
- Yellow
-
-
-
- Green
-
-
-
- Mint
-
-
-
- Default
-
-
-
- Blue
-
-
-
- Red
-
-
-
- Yellow
-
-
-
- Green
-
-
-
- Mint
-
-
-
- );
-}
diff --git a/src/legacy/Badge/examples/KitchenSink.js b/src/legacy/Badge/examples/KitchenSink.js
deleted file mode 100644
index 9c07337928..0000000000
--- a/src/legacy/Badge/examples/KitchenSink.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { BadgeDefault, BadgeRound } from './index';
-
-export default class BadgeKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/Badge/examples/KitchenSink.stories.tsx b/src/legacy/Badge/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 4c41243859..0000000000
--- a/src/legacy/Badge/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/Badge',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
- Default
-
-
-
- Blue
-
-
-
- Red
-
-
-
- Yellow
-
-
-
- Green
-
-
-
- Mint
-
-
-
- Default
-
-
-
- Blue
-
-
-
- Red
-
-
-
- Yellow
-
-
-
- Green
-
-
-
- Mint
-
-
-
- );
-}
diff --git a/src/legacy/Badge/examples/index.js b/src/legacy/Badge/examples/index.js
deleted file mode 100644
index 22bad72fea..0000000000
--- a/src/legacy/Badge/examples/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as BadgeDefault } from './Default';
-export { default as BadgeKitchenSink } from './KitchenSink';
-export { default as BadgeRound } from './Round';
diff --git a/src/legacy/Badge/index.js b/src/legacy/Badge/index.js
deleted file mode 100644
index d729dd8e1f..0000000000
--- a/src/legacy/Badge/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/** @component badge */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-const Badge = (props) => {
- const { className, rounded, color, ...otherHTMLProps } = props;
-
- return (
-
- {props.children}
-
- );
-};
-
-Badge.displayName = 'Badge';
-
-Badge.propTypes = {
- /** @prop Children nodes to render inside Accordion | null */
- children: PropTypes.node,
- /** @prop Optional css class string | '' */
- className: PropTypes.string,
- /** @prop Optional color prop type | null */
- color: PropTypes.string,
- /** @prop Optional rounded corners for the Badge | false */
- rounded: PropTypes.bool,
-};
-
-Badge.defaultProps = {
- children: null,
- className: '',
- rounded: false,
-};
-
-export default Badge;
diff --git a/src/legacy/Badge/tests/index.spec.js b/src/legacy/Badge/tests/index.spec.js
deleted file mode 100644
index f998a47d77..0000000000
--- a/src/legacy/Badge/tests/index.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { Badge } from '@momentum-ui/react-collaboration';
-
-describe('tests for
- Test
-
- );
-
- expect(container.find('span').children().length).toEqual(1);
- });
-
- it('should assign conditional rounded class name', () => {
- const container = shallow(
-
-
-`;
diff --git a/src/legacy/Button/examples/Circle.js b/src/legacy/Button/examples/Circle.js
deleted file mode 100644
index ec14a08803..0000000000
--- a/src/legacy/Button/examples/Circle.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Button, Icon } from '@momentum-ui/react-collaboration';
-
-export default function ButtonCircle() {
- return (
- }
- onClick={() => {}}
- ariaLabel="Search"
- circle
- />
- );
-}
diff --git a/src/legacy/Button/examples/Color.js b/src/legacy/Button/examples/Color.js
deleted file mode 100644
index f222a9e8e5..0000000000
--- a/src/legacy/Button/examples/Color.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { Button } from '@momentum-ui/react-collaboration';
-export default function ButtonColor() {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/src/legacy/Link/examples/Colored.js b/src/legacy/Link/examples/Colored.js
deleted file mode 100644
index 5bfbb6ba4e..0000000000
--- a/src/legacy/Link/examples/Colored.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { Link } from '@momentum-ui/react-collaboration';
-
-export default function LinkColored() {
- return (
-
- Color Prop(red)
-
- );
-}
diff --git a/src/legacy/Link/examples/Default.js b/src/legacy/Link/examples/Default.js
deleted file mode 100644
index 0674694a2c..0000000000
--- a/src/legacy/Link/examples/Default.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Link } from '@momentum-ui/react-collaboration';
-export default function LinkDefault() {
- return (
-
- Default
- Tag Prop(div)
- Tag Prop(span)
-
- );
-}
diff --git a/src/legacy/Link/examples/KitchenSink.js b/src/legacy/Link/examples/KitchenSink.js
deleted file mode 100644
index 559ef04a29..0000000000
--- a/src/legacy/Link/examples/KitchenSink.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { LinkColored, LinkDefault } from './index';
-
-export default class LinkKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/Link/examples/KitchenSink.stories.tsx b/src/legacy/Link/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 4e90fc4f41..0000000000
--- a/src/legacy/Link/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/Link',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/List/examples/KitchenSink.js b/src/legacy/List/examples/KitchenSink.js
deleted file mode 100644
index 3273f88f43..0000000000
--- a/src/legacy/List/examples/KitchenSink.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import {
- ListDefault,
- ListListItemHeader,
- ListListItemSeparator,
- ListWithEventBubbling,
-} from './index';
-
-export default class ListKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/List/examples/KitchenSink.stories.tsx b/src/legacy/List/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 32d197827b..0000000000
--- a/src/legacy/List/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/List',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () => More ;
- return (
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/List/examples/ListItemSeparator.js b/src/legacy/List/examples/ListItemSeparator.js
deleted file mode 100644
index 229bb1d30d..0000000000
--- a/src/legacy/List/examples/ListItemSeparator.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import { ListSeparator } from '@momentum-ui/react-collaboration';
-export default class ListItemSeparator extends React.PureComponent {
- render() {
- return
-
-
-
-
- (this.listNode = ref)}
- {...otherProps}
- >
- {children}
-
-
-
- );
- /* eslint-enable*/
- }
-}
-
-List.propTypes = {
- /** @prop Optional active prop to pass active prop to children | null */
- active: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.number]),
- /** @prop Optional parameter for accessibility configuration | null */
- ariaConfig: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
- /** @prop Children nodes to render inside List | null */
- children: PropTypes.node,
- /** @prop Optional css class string | '' */
- className: PropTypes.string,
- /** @prop Optional focus prop to pass focus prop to children | null */
- focus: PropTypes.string,
- /** @prop Sets first List item to have focus within List context | true */
- focusFirst: PropTypes.bool,
- /** @prop Queries children to find matching item to have focus | '' */
- focusFirstQuery: PropTypes.string,
- /** @prop Additional elements that can be focused by selector | '' */
- focusQuery: PropTypes.string,
- /** @prop Optional ID value of List | null */
- id: PropTypes.string,
- /** @prop Optional tabType prop type to manually set child role | 'listitem' */
- itemRole: PropTypes.string,
- /** @prop Restricts the traversal of the list with either UP/DOWN, LEFT/RIGHT, or both | 'both' */
- navigationDirection: PropTypes.oneOf(['vertical', 'horizontal', 'both']),
- /** @prop Callback function invoked by user selecting an interactive item within List | null */
- onSelect: PropTypes.func,
- /** @prop Disables the stopPropagation() & preventDefault() for ArrowKey Events | false */
- shouldPropagateKeyDown: PropTypes.bool,
- /** @prop Sets the ARIA role for the Nav, in the context of a TabContainer | 'list' */
- role: PropTypes.string,
- /** @prop Invokes dom focus method on mount | true */
- shouldFocusInitial: PropTypes.bool,
- /** @prop Determines if focus should revert to active on list exit | false */
- shouldFocusActive: PropTypes.bool,
- /** @prop Determines if keyboard navigation should loop through list | true */
- shouldLoop: PropTypes.bool,
- /** @prop Sets the orientation of the List | 'vertical' */
- tabType: PropTypes.oneOf(['vertical', 'horizontal']),
- /** @prop Determines if List wrapper should track active | true */
- trackActive: PropTypes.bool,
- /** @prop Sets List size | null */
- type: PropTypes.oneOf(['small', 'large', 'space', 'xlarge']),
- /** @prop Optional wrap prop type to wrap items to next row */
- wrap: PropTypes.bool,
-};
-
-List.defaultProps = {
- active: null,
- ariaConfig: null,
- children: null,
- className: '',
- id: null,
- itemRole: 'listitem',
- focus: null,
- focusFirst: true,
- focusFirstQuery: '',
- focusQuery: '',
- navigationDirection: 'both',
- onSelect: null,
- shouldPropagateKeyDown: false,
- role: 'list',
- shouldFocusActive: false,
- shouldFocusInitial: true,
- shouldLoop: true,
- tabType: 'vertical',
- trackActive: true,
- type: null,
- wrap: false,
-};
-
-List.displayName = 'List';
-
-export default List;
diff --git a/src/legacy/List/tests/index.spec.js b/src/legacy/List/tests/index.spec.js
deleted file mode 100644
index 68f9e3b8f5..0000000000
--- a/src/legacy/List/tests/index.spec.js
+++ /dev/null
@@ -1,536 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { List, ListItem, SpaceListItem } from '@momentum-ui/react-collaboration';
-
-describe('tests for
', () => {
- beforeEach(() => {
- document.activeElement.blur();
- });
-
- it('should match SnapShot', () => {
- const container = mount(
);
-
- expect(container).toMatchSnapshot();
- });
-
- it('should render one List', () => {
- const container = mount(
);
-
- expect(container.find('.md-list').length).toEqual(1);
- });
-
- it('should handle className prop', () => {
- const container = mount(
);
-
- expect(container.find('.md-list').hasClass('menuItem')).toEqual(true);
- });
-
- it('should handle role prop', () => {
- const container = shallow(
);
-
- expect(container.find('.md-list').props().role).toEqual('menuitem');
- });
-
- it('should handle tabType prop', () => {
- const container = shallow(
-
-
- );
-
- expect(container.find('.md-list--horizontal').length).toEqual(1);
- });
-
- it('should handle wrap prop', () => {
- const container = shallow(
-
-
- );
-
- expect(container.find('.md-list--wrap').length).toEqual(1);
- });
-
- it('should handle itemRole prop', () => {
- const container = mount(
-
-
- );
-
- expect(container.find('[role="newRole"]').length).toEqual(1);
- });
-
- it('should handle type prop', () => {
- const container = mount(
-
-
- );
-
- expect(container.find('.md-list-item--small').length).toEqual(1);
- });
-
- it('should render children', () => {
- const container = shallow(
-
-
-
- );
-
- expect(container.find('.testingforTC').length).toEqual(1);
- });
-
- it('should handle onSelect event', () => {
- const onSelect = jest.fn();
-
- const container = mount(
-
-
- );
-
- container.find('.secondIndex').first().simulate('click');
- expect(onSelect).toHaveBeenCalled();
- });
-
- it('should handle keyPress event (Up/Down/Left/Right)', () => {
- const container = mount(
-
-
- );
- container.update();
- container.update();
-
- const anchor1 = container.find('.firstIndex').first();
-
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
- expect(container.state().listContext.focus).toEqual('test-list-2');
- anchor1.simulate('keydown', { keyCode: 39, which: 39, charCode: 39 });
- expect(container.state().listContext.focus).toEqual('test-list-2');
-
- anchor1.simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- expect(container.state().listContext.focus).toEqual('test-list-3');
- anchor1.simulate('keydown', { keyCode: 37, which: 37, charCode: 37 });
- expect(container.state().listContext.focus).toEqual('test-list-3');
- });
-
- it('should handle keyPress event with props (Up/Down/Left/Right)', () => {
- let count = 0;
- const onKeyDown = () => count++;
- const container = mount(
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-
-
-
-
- );
-
- container.update();
- container.update();
-
- const anchor1 = container.find('.firstIndex').first();
-
- expect(container.children().state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
- expect(container.children().state().listContext.focus).toEqual('test-list-2');
- anchor1.simulate('keydown', { keyCode: 39, which: 39, charCode: 39 });
- expect(container.children().state().listContext.focus).toEqual('test-list-2');
- anchor1.simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- anchor1.simulate('keydown', { keyCode: 37, which: 37, charCode: 37 });
-
- expect(count).toEqual(4);
- });
-
- it('should handle keyPress event with props (Up/Down/Left/Right)', () => {
- let count = 0;
- const onKeyDown = () => count++;
- const container = mount(
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-
-
-
-
- );
-
- container.update();
- container.update();
-
- const anchor1 = container.find('.firstIndex').first();
-
- anchor1.simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
- anchor1.simulate('keydown', { keyCode: 39, which: 39, charCode: 39 });
- anchor1.simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- anchor1.simulate('keydown', { keyCode: 37, which: 37, charCode: 37 });
-
- expect(count).toEqual(0);
- });
-
- it('should handle keyPress event with ariaConfig={disableAriaCurrent : true} ', () => {
- const ariaConfig = { disableAriaCurrent: true };
-
- const container = mount(
-
-
- );
- container.update();
- container.update();
-
- expect(container.find('.md-list-item').at(0).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(1).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(2).props()['aria-current']).toBeFalsy();
- container
- .find('.firstIndex')
- .first()
- .simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
-
- expect(container.find('.md-list-item').at(0).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(1).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(2).props()['aria-current']).toBeFalsy();
- container
- .find('.secondIndex')
- .first()
- .simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
-
- expect(container.find('.md-list-item').at(0).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(1).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(2).props()['aria-current']).toBeFalsy();
- });
-
- it('should handle keyPress event with ariaConfig={disableAriaCurrent : true} and falsy values ', () => {
- const ariaConfigArray = [undefined, null, false, { disableAriaCurrent: false }];
-
- ariaConfigArray.map((ariaConfig) => {
- const container = mount(
-
-
- );
-
- container.update();
- container.update();
-
- expect(container.find('.md-list-item').at(0).props()['aria-current']).toEqual('true');
- expect(container.find('.md-list-item').at(1).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(2).props()['aria-current']).toBeFalsy();
- container
- .find('.firstIndex')
- .first()
- .simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
-
- expect(container.find('.md-list-item').at(0).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(1).props()['aria-current']).toEqual('true');
- expect(container.find('.md-list-item').at(2).props()['aria-current']).toBeFalsy();
- container
- .find('.secondIndex')
- .first()
- .simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
-
- expect(container.find('.md-list-item').at(0).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(1).props()['aria-current']).toBeFalsy();
- expect(container.find('.md-list-item').at(2).props()['aria-current']).toEqual('true');
- });
- });
-
- it('should handle keyPress event (PageUp/PageDown/Home/End)', () => {
- const container = mount(
-
-
- );
-
- const anchor1 = container.find('.firstIndex').first();
- const anchor3 = container.find('.thirdIndex').first();
-
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 34, which: 34, charCode: 34 });
- expect(container.state().listContext.focus).toEqual('test-list-3');
- anchor1.simulate('keydown', { keyCode: 35, which: 35, charCode: 35 });
- expect(container.state().listContext.focus).toEqual('test-list-3');
-
- anchor3.simulate('keydown', { keyCode: 33, which: 33, charCode: 33 });
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor3.simulate('keydown', { keyCode: 36, which: 36, charCode: 36 });
- expect(container.state().listContext.focus).toEqual('test-list-1');
- });
-
- it('should handle keyPress event (o)', () => {
- const container = mount(
-
-
- );
-
- const anchor1 = container.find('.firstIndex').first();
-
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 79, which: 79, charCode: 79, key: 'o' });
- expect(container.state().listContext.focus).toEqual('test-list-3');
- });
-
- it('should move focus to active on list blur', () => {
- const container = mount(
-
-
- );
-
- const anchor1 = container.find('.firstIndex').first();
- // Simulate move focus up
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- // Simulate click on focus
- container.find(`#${container.state().listContext.focus}`).first().simulate('click');
- expect(container.state().listContext.active).toEqual('test-list-3');
- // Simulate move focus up
- container
- .find(`#${container.state().listContext.focus}`)
- .first()
- .simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- expect(container.state().listContext.focus).toEqual('test-list-2');
- // Simulate tab exit from List
- container
- .find(`#${container.state().listContext.focus}`)
- .first()
- .simulate('keydown', { keyCode: 9, which: 9, charCode: 9 });
- expect(container.state().listContext.focus).toEqual('test-list-3');
- });
-
- it('should initially set focus and active values', () => {
- const container = mount(
-
-
- );
-
- expect(container.state().listContext.active).toEqual('test-list-2');
- expect(container.state().listContext.focus).toEqual('test-list-2');
- expect(container.find('.md-list-item').at(0).props().tabIndex).toEqual(-1);
- expect(container.find('.md-list-item').at(1).props().tabIndex).toEqual(0);
- expect(container.find('.md-list-item').at(2).props().tabIndex).toEqual(-1);
- expect(document.hasFocus()).toEqual(false);
- expect(document.activeElement.className).toBe('');
- });
-
- it('should initially focus on active item', () => {
- // focus was being transferred to component outside the dom
- // see https://github.com/jsdom/jsdom/issues/2924
- const focusContainer = document.createElement('div');
- document.body.append(focusContainer);
- const container = mount(
-
-
,
- { attachTo: focusContainer }
- );
-
- expect(container.state().listContext.active).toEqual('test-list-2');
- expect(container.state().listContext.focus).toEqual('test-list-2');
- expect(container.find('.md-list-item').at(0).props().tabIndex).toEqual(-1);
- expect(container.find('.md-list-item').at(1).props().tabIndex).toEqual(0);
- expect(container.find('.md-list-item').at(2).props().tabIndex).toEqual(-1);
- expect(document.hasFocus()).toEqual(true);
- expect(document.activeElement.className).toContain('secondIndex');
- });
-
- it('should not track active', () => {
- const container = mount(
-
-
- );
-
- const anchor1 = container.find('.firstIndex').first();
- // Simulate move focus up
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- // Simulate click on focus
- container.find(`#${container.state().listContext.focus}`).first().simulate('click');
- expect(container.state().listContext.active).toEqual(null);
- });
-
- it('should loop by default', () => {
- const container = mount(
-
-
- );
-
- const anchor1 = container.find('.firstIndex').first();
-
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- expect(container.state().listContext.focus).toEqual('test-list-3');
- });
-
- it('should not loop when shouldLoop={false}', () => {
- const container = mount(
-
-
- );
-
- const anchor1 = container.find('.firstIndex').first();
-
- expect(container.state().listContext.focus).toEqual('test-list-1');
- anchor1.simulate('keydown', { keyCode: 38, which: 38, charCode: 38 });
- expect(container.state().listContext.focus).toEqual('test-list-1');
- });
-
- it('should handle SpaceListItem child', () => {
- const container = mount(
-
-
- );
-
- expect(container.find('.md-list-item--space').exists()).toEqual(true);
- expect(container.state().listContext.focus).toEqual('test-list-1');
- expect(container.state().listContext.active).toEqual(null);
- });
-
- it('should overwrite state with active prop', () => {
- const container = mount(
-
-
- );
-
- expect(container.find('.md-list-item').at(0).hasClass('active')).toEqual(false);
- });
-
- it('should handle navigation on disabled children', () => {
- const container = mount(
-
-
- );
-
- expect(container.state().listContext.focus).toEqual('test-list-1');
- const anchor2 = container.find('.secondIndex').first();
- anchor2.simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
- const anchor4 = container.find('.fourthIndex').first();
- expect(container.state().listContext.focus).toEqual('test-list-2');
- anchor4.simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
- expect(container.state().listContext.focus).toEqual('test-list-1');
- });
-
- it('should handle navigation on readOnly children', () => {
- const container = mount(
-
-
- );
-
- expect(container.state().listContext.focus).toEqual('test-list-1');
- const anchor2 = container.find('.secondIndex').first();
- anchor2.simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
- expect(container.state().listContext.focus).toEqual('test-list-2');
- const anchor4 = container.find('.fourthIndex').first();
- anchor4.simulate('keydown', { keyCode: 40, which: 40, charCode: 40 });
- expect(container.state().listContext.focus).toEqual('test-list-1');
- });
-
- it('should handle focusFirst prop', () => {
- const container = mount(
-
-
- );
- container.update();
-
- expect(document.activeElement.type).toEqual(undefined);
- expect(container.state().listContext.focus).toEqual(null);
- });
-
- it('should handle shouldFocusInitial prop', () => {
- const container = mount(
-
-
- );
- container.update();
-
- expect(document.activeElement.type).toEqual(undefined);
- expect(container.state().listContext.focus).toEqual('test-me');
- });
-});
diff --git a/src/legacy/List/tests/index.spec.js.snap b/src/legacy/List/tests/index.spec.js.snap
deleted file mode 100644
index 3c985a9b25..0000000000
--- a/src/legacy/List/tests/index.spec.js.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
should match SnapShot 1`] = `
-
-
-
-`;
diff --git a/src/legacy/ListContext/index.js b/src/legacy/ListContext/index.js
deleted file mode 100644
index c3b15eb2e3..0000000000
--- a/src/legacy/ListContext/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const ListContext = React.createContext(null);
-
-export default ListContext;
diff --git a/src/legacy/ListItem/examples/Default.js b/src/legacy/ListItem/examples/Default.js
deleted file mode 100644
index 6336a27d4b..0000000000
--- a/src/legacy/ListItem/examples/Default.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { List, ListItem } from '@momentum-ui/react-collaboration';
-
-export default class ListItemDefault extends React.PureComponent {
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/ListItem/examples/KitchenSink.js b/src/legacy/ListItem/examples/KitchenSink.js
deleted file mode 100644
index 2e4adf583f..0000000000
--- a/src/legacy/ListItem/examples/KitchenSink.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import {
- ListItemDefault,
- ListItemListItemSections,
- ListItemListItemSeparator,
- TabbableChildren,
-} from './index';
-
-export default class ListItemKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/ListItem/examples/KitchenSink.stories.tsx b/src/legacy/ListItem/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 584fc8ecb8..0000000000
--- a/src/legacy/ListItem/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/ListItem',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
-
- Left
- Right
-
-
- Center
-
-
- Center Align
-
-
- Left
- Center
- Right
-
-
-
- );
- }
-}
diff --git a/src/legacy/ListItem/examples/ListItemSeparator.js b/src/legacy/ListItem/examples/ListItemSeparator.js
deleted file mode 100644
index d440c72d7b..0000000000
--- a/src/legacy/ListItem/examples/ListItemSeparator.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { ListSeparator } from '@momentum-ui/react-collaboration';
-
-export default class ListItemSeparator extends React.PureComponent {
- render() {
- return
-
-
-
- {[1, 2, 3].map((id) => (
-
-
-
- ))}
-
- }
- includeFocusOnHover={false}
- >
-
-
-
- Center
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/ListItem/examples/index.js b/src/legacy/ListItem/examples/index.js
deleted file mode 100644
index 972bd2c477..0000000000
--- a/src/legacy/ListItem/examples/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as ListItemDefault } from './Default';
-export { default as ListItemKitchenSink } from './KitchenSink';
-export { default as ListItemListItemSections } from './ListItemSections';
-export { default as ListItemListItemSeparator } from './ListItemSeparator';
-export { default as TabbableChildren } from './TabbableChildren';
diff --git a/src/legacy/ListItem/index.js b/src/legacy/ListItem/index.js
deleted file mode 100644
index a59abbdd30..0000000000
--- a/src/legacy/ListItem/index.js
+++ /dev/null
@@ -1,458 +0,0 @@
-/** @component list-item */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
-import { UIDConsumer } from 'react-uid';
-import SelectableContext, { makeKeyboardKey } from '../SelectableContext';
-import ListContext from '../ListContext';
-import mapContextToProps from '@restart/context/mapContextToProps';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-class ListItem extends React.Component {
- componentDidMount() {
- const { focus, refName, focusOnLoad } = this.props;
- this.verifyStructure();
-
- focusOnLoad && focus && this[refName] && this[refName].focus();
- }
-
- checkElements = (tag) => {
- const children = Object.values(ReactDOM.findDOMNode(this).childNodes);
-
- return this.countDOMChildren(children, tag);
- };
-
- countDOMChildren = (children, tag) =>
- children.reduce(
- (agg, child) => (child.tagName === tag ? { ...agg, count: (agg.count += 1) } : agg),
- { count: 0, children: children.length }
- );
-
- getChildrenElements = (nameArr) => {
- const { children } = this.props;
- let elementCount = 0;
-
- React.Children.forEach(children, (child) => {
- if (child && child.type && nameArr.includes(child.type.displayName)) {
- return elementCount++;
- }
- });
-
- return (
- elementCount && {
- length: elementCount,
- }
- );
- };
-
- handleClick = (e, eventKey) => {
- const { disabled, label, onClick, parentOnSelect, value } = this.props;
-
- if (disabled) {
- e.preventDefault();
- e.stopPropagation();
- }
-
- e.persist();
- onClick && onClick(e);
- parentOnSelect && parentOnSelect(e, { value, label, eventKey });
- };
-
- changeTabIndex = (tabbableChildren, index) => {
- for (let i = 0; i < tabbableChildren.length; i++) {
- if (tabbableChildren[i].tabIndex === (index === 0 ? -1 : 0)) {
- tabbableChildren[i].tabIndex = index;
- }
- }
- };
-
- handleKeyDown = (e, eventKey) => {
- const {
- disabled,
- onKeyDown,
- parentKeyDown,
- value,
- label,
- focusLockTabbableChildren,
- focusLockTabbableChildrenProps,
- } = this.props;
-
- if (disabled) {
- e.preventDefault();
- e.stopPropagation();
- }
-
- const { tabbableChildrenQuery } = focusLockTabbableChildrenProps;
-
- if (focusLockTabbableChildren && e.target) {
- const currListItem = e.target.closest('.md-list-item');
-
- if (currListItem) {
- const tabbableChildren = currListItem.querySelectorAll(tabbableChildrenQuery);
- if (tabbableChildren.length) {
- if (e.keyCode === 9 && !e.shiftKey) {
- // TAB only
- // only allow focus of tabbable children if TAB on the current listitem
- if (e.target.classList.contains('md-list-item')) {
- this.changeTabIndex(tabbableChildren, 0);
- }
- } else if (e.keyCode === 9 && e.shiftKey) {
- // SHIFT + TAB
- // If we are on one of the tabbable children
- if (e.target === tabbableChildren[0]) {
- e.preventDefault();
- e.stopPropagation();
- // focus on the tabbable children's associated lisitem
- e.target.closest('.md-list-item').focus();
- // If we are on a listitem, SHIFT + TAB exits the list
- // so we change tabindex of children to -1
- } else if (e.target.classList.contains('md-list-item')) {
- this.changeTabIndex(tabbableChildren, -1);
- }
- } else if (e.keyCode === 38 || e.keyCode == 40) {
- // UP/DOWN guarantees change of listitem, so we change tabindex of children to -1
- this.changeTabIndex(tabbableChildren, -1);
- }
- }
- }
- }
-
- e.persist();
- onKeyDown && onKeyDown(e);
- parentKeyDown && parentKeyDown(e, { value, label, eventKey });
- };
-
- handleKeyUp = (e, eventKey) => {
- const { disabled, onKeyUp, parentKeyUp, value, label } = this.props;
-
- if (disabled) {
- e.preventDefault();
- e.stopPropagation();
- }
-
- e.persist();
- onKeyUp && onKeyUp(e);
- parentKeyUp && parentKeyUp(e, { value, label, eventKey });
- };
-
- handleBlur = (e) => {
- const { onBlur, focusLockTabbableChildren, focusLockTabbableChildrenProps } = this.props;
-
- const { tabbableChildrenQuery, portalNodeQuery, tabbableChildrenHasPopover } =
- focusLockTabbableChildrenProps;
-
- // For when you click or navigate away from the current listitem
- // Cleans up tabindex="0" before you navigate away
- if (focusLockTabbableChildren) {
- if (e.target && e.relatedTarget) {
- const isInThisList = e.relatedTarget.closest(portalNodeQuery); // The elt getting focus is in the current List if not undefined
- const listItemNode = ReactDOM.findDOMNode(this);
- const tabbableChildren = listItemNode.querySelectorAll(tabbableChildrenQuery);
- if (tabbableChildren.length) {
- if (isInThisList) {
- const relatedTargetListItem = e.relatedTarget.closest('.md-list-item'); // The new focus is a ListItem if not undefined
- const targetListItem = e.target.closest('.md-list-item'); // The current focus is a ListItem if not undefined
- if (
- tabbableChildrenHasPopover &&
- focusLockTabbableChildrenProps.tabbableChildSpawnedPopoverQuery
- ) {
- // If the tabbable children in this ListItem has Popovers
- const { tabbableChildSpawnedPopoverQuery } = focusLockTabbableChildrenProps;
- const targetIsSpawnedPopover = e.target.closest(tabbableChildSpawnedPopoverQuery); // The current focus is a EventOverlay if not undefined
- const relatedTargetIsSpawnedPopover = e.relatedTarget.closest(
- tabbableChildSpawnedPopoverQuery
- ); // The new focus is a EventOverlay if not undefined
- // from this ListItem or a EventOverlay spawned by one of the tabbable children in this ListItem
- if (targetListItem === listItemNode || targetIsSpawnedPopover) {
- // If the new focus is not the same as this ListItem or not a spawned EventOverlay, we left the current ListItem
- // Make tabindex="-1"
- if (!relatedTargetIsSpawnedPopover && relatedTargetListItem !== listItemNode) {
- this.changeTabIndex(tabbableChildren, -1);
- }
- }
- } else {
- // If the tabbable children in this ListItem has no Popovers
- // If the new focus is not the same as this ListItem or the current focus is not the same as this ListItem, we left the current ListItem
- // Make tabindex="-1"
- if (targetListItem !== listItemNode && relatedTargetListItem !== listItemNode) {
- this.changeTabIndex(tabbableChildren, -1);
- }
- }
- } else {
- this.changeTabIndex(tabbableChildren, -1);
- }
- }
- }
- }
-
- onBlur && onBlur(e);
- };
-
- verifyStructure() {
- if (!this.props.children) return;
-
- const anchorCount = this.checkElements('A');
- const checkAllChildren = this.getChildrenElements(['ListItemSection', 'EventOverlay']);
- const checkSectionChildren = this.getChildrenElements(['ListItemSection']);
-
- if (anchorCount.count > 1) {
- throw new Error('Only 1 primary child anchor tag may be used with ListItem component');
- } else if (anchorCount.count === 1 && anchorCount.children > 1) {
- throw new Error('Anchor tag can not have sibling');
- }
-
- if (!checkAllChildren) {
- return;
- } else if (checkSectionChildren.length > 3) {
- throw new Error(
- `Only 3 ListItemSection components can be used as children. You've used ${checkSectionChildren.length}`
- );
- }
- }
-
- render() {
- const {
- active,
- children,
- className,
- customAnchorNode,
- customRefProp,
- disabled,
- eventKey,
- focus,
- isReadOnly,
- keyboardKey,
- label,
- link,
- refName,
- role,
- separator,
- specifyRoleWithoutList,
- title,
- type,
- ...props
- } = this.props;
-
- const keyboardNavKey = makeKeyboardKey(keyboardKey || title || label);
-
- const otherProps = omit({ ...props }, [
- 'focusLockTabbableChildren',
- 'focusLockTabbableChildrenProps',
- 'focusOnLoad',
- 'id',
- 'itemIndex',
- 'onBlur',
- 'onClick',
- 'onKeyDown',
- 'onKeyUp',
- 'parentKeyDown',
- 'parentKeyUp',
- 'parentOnSelect',
- 'value',
- ]);
-
- const setProps = (cxtProps) => ({
- className:
- 'md-list-item' +
- `${(cxtProps.type && ` md-list-item--${cxtProps.type}`) || ''}` +
- `${(cxtProps.active && ` active`) || ''}` +
- `${(disabled && ` disabled`) || ''}` +
- `${(isReadOnly && ` md-list-item--read-only`) || ''}` +
- `${(separator && ` md-list-item--separator`) || ''}` +
- `${(className && ` ${className}`) || ''}` +
- `${
- (customAnchorNode &&
- customAnchorNode.props.className &&
- ` ${customAnchorNode.props.className}`) ||
- ''
- }`,
- id: cxtProps.id,
- role: cxtProps.role,
- ...(!customAnchorNode && {
- ref: (ref) => (this[refName] = ref),
- ...(link && { href: link }),
- }),
- ...(customAnchorNode &&
- customRefProp && {
- [customRefProp]: (ref) => (this[refName] = ref),
- }),
- ...(!isReadOnly && {
- onClick: (e) => this.handleClick(e, cxtProps.uniqueKey),
- onKeyDown: (e) => this.handleKeyDown(e, cxtProps.uniqueKey),
- onKeyUp: (e) => this.handleKeyUp(e, cxtProps.uniqueKey),
- onBlur: (e) => this.handleBlur(e),
- tabIndex: !disabled && cxtProps.focus ? 0 : -1,
- }),
- 'data-md-event-key': cxtProps.uniqueKey,
- ...(!cxtProps?.ariaConfig?.disableAriaCurrent && {
- ...(cxtProps.focus && { 'aria-current': `${cxtProps.focus}` }),
- }),
- ...(keyboardNavKey && { 'data-md-keyboard-key': keyboardNavKey }),
- ...((title || label) && { title: title || label }),
- ...otherProps,
- });
-
- const addRefToAnchor = (cxtProps) => {
- return React.cloneElement(
- customAnchorNode,
- setProps(cxtProps),
- children || customAnchorNode.props.children || label
- );
- };
-
- const createElement = (cxtProps) => {
- return React.createElement(link ? 'a' : 'div', setProps(cxtProps), children || label);
- };
-
- return (
- `md-list-item-${id}`}>
- {(id) => (
-
- {(listContext) => {
- let contextProps = {};
-
- contextProps.id = this.props.id || id;
- contextProps.uniqueKey = eventKey || contextProps.id;
- contextProps.type = type || (listContext && listContext.type);
- contextProps.focus =
- focus || (listContext && listContext.focus === contextProps.uniqueKey);
- contextProps.active =
- active || (listContext && listContext.active === contextProps.uniqueKey);
- contextProps.role = specifyRoleWithoutList
- ? role
- : (listContext && listContext.role) || role;
- contextProps.ariaConfig = listContext && listContext.ariaConfig;
-
- return customAnchorNode ? addRefToAnchor(contextProps) : createElement(contextProps);
- }}
-
- )}
-
- );
- }
-}
-
-ListItem.propTypes = {
- /** @prop Active prop to help determine styles | false */
- active: PropTypes.bool,
- /** @prop Children nodes to render inside ListItem | null */
- children: PropTypes.node,
- /** @prop Optional css class string | '' */
- className: PropTypes.string,
- /** @prop Node in which the selection begins | null */
- customAnchorNode: PropTypes.element,
- /** @prop ListItem Custom Prop Name for child with custom Ref | null */
- customRefProp: PropTypes.string,
- /** @prop Disabled attribute for ListItem to determine styles | false */
- disabled: PropTypes.bool,
- /** @prop Unique string used for tracking events among ancestors | '' */
- eventKey: PropTypes.string,
- /** @prop Specifies if ListItem should automatically get focus | false */
- focus: PropTypes.bool,
- /** @prop Locks focus to cycle between all tabbable children | false */
- focusLockTabbableChildren: PropTypes.bool,
- focusLockTabbableChildrenProps: PropTypes.shape({
- /** @prop Query for focusLockTabbableChildren | '' */
- tabbableChildrenQuery: PropTypes.string.isRequired,
- /** @prop Indicates whether this ListItem has tabbable children that spawn Popovers | false */
- tabbableChildrenHasPopover: PropTypes.bool.isRequired,
- /** @prop Only for when using tabbableChildrenHasPopover. Need to checkout the EventOverlay for blur purposes | '' */
- portalNodeQuery: PropTypes.string.isRequired,
- /** @prop Used for tabbableChildrenHasPopover to find the DOM element of Popovers */
- tabbableChildSpawnedPopoverQuery: PropTypes.string,
- }),
- /** @prop Specifies if ListItem should automatically get focus when page loads | false */
- focusOnLoad: PropTypes.bool,
- /** @prop Sets ListItem id | null */
- id: PropTypes.string,
- /** @prop Determines if ListItem is clickable | false */
- isReadOnly: PropTypes.bool,
- /** @prop ListItem index number | null */
- itemIndex: PropTypes.number,
- /** @prop Unique string used for keyboard navigation | '' */
- keyboardKey: PropTypes.string,
- /** @prop ListItem label text | '' */
- label: PropTypes.string,
- /** @prop external link associated input | '' */
- link: PropTypes.string,
- /** @prop Callback function invoked by user changing focus from current ListItem ListItem | null */
- onBlur: PropTypes.func,
- /** @prop Callback function invoked by user tapping on ListItem | null */
- onClick: PropTypes.func,
- /** @prop Callback function invoked by user pressing down on a key | null */
- onKeyDown: PropTypes.func,
- /** @prop Callback function invoked by user pressing up on a key | null */
- onKeyUp: PropTypes.func,
- // Internal Context Use Only
- parentKeyDown: PropTypes.func,
- // Internal Context Use Only
- parentKeyUp: PropTypes.func,
- // Internal Context Use Only
- parentOnSelect: PropTypes.func,
- /** @prop ListItem ref name | 'navLink' */
- refName: PropTypes.string,
- /** @prop Aria role | 'listitem' */
- role: PropTypes.string,
- /** @prop Prop that controls whether to show separator or not | false */
- separator: PropTypes.bool,
- /** @prop Prop that enables assigning role per listitem instead of the default provided by List context */
- /** Allows Lists to have listitem with different roles */
- specifyRoleWithoutList: PropTypes.bool,
- /** @prop ListItem Title | '' */
- title: PropTypes.string,
- /** @prop ListItem size | '' */
- type: PropTypes.oneOf(['', 'small', 'large', 'xlarge', 'space', 'header', 36, 52, 60]),
- /** @prop ListItem value for OnSelect value | '' */
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.object,
- PropTypes.array,
- ]),
-};
-
-ListItem.defaultProps = {
- active: false,
- children: null,
- className: '',
- customAnchorNode: null,
- customRefProp: '',
- disabled: false,
- eventKey: '',
- focus: false,
- focusLockTabbableChildren: false,
- focusLockTabbableChildrenProps: {
- tabbableChildrenQuery: '',
- tabbableChildrenHasPopover: false,
- portalNodeQuery: '',
- },
- focusOnLoad: false,
- id: null,
- itemIndex: null,
- isReadOnly: false,
- keyboardKey: '',
- label: '',
- link: '',
- onBlur: null,
- onClick: null,
- onKeyDown: null,
- onKeyUp: null,
- parentKeyDown: null,
- parentKeyUp: null,
- parentOnSelect: null,
- refName: 'navLink',
- role: 'listitem',
- separator: false,
- specifyRoleWithoutList: false,
- title: '',
- type: '',
- value: '',
-};
-
-ListItem.displayName = 'ListItem';
-
-export default mapContextToProps(SelectableContext, (context) => context, ListItem);
diff --git a/src/legacy/ListItem/tests/index.spec.js b/src/legacy/ListItem/tests/index.spec.js
deleted file mode 100644
index 1db617637b..0000000000
--- a/src/legacy/ListItem/tests/index.spec.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { List, ListItem, ListItemSection } from '@momentum-ui/react-collaboration';
-
-describe('tests for
-
- );
-
- container.find('a').simulate('click');
- expect(count).toEqual(1);
- });
-
- it('should handle keyPress as onClick event', () => {
- let count = 0;
- const countUp = () => count++;
- const container = mount(
-
-
- );
-
- container.find('a').simulate('keydown', { keyCode: 13, which: 13, charCode: 13, key: 'Space' });
-
- expect(count).toEqual(1);
- });
-
- it('should render children', () => {
- const container = mount(
-
- Test
-
- );
-
- expect(container.find('span').hasClass('testChildren')).toEqual(true);
- });
-
- it('should handle null children', () => {
- const display = false;
-
- const container = mount(
-
- Left
- {display && Center }
- Right
-
- );
-
- expect(container.find('.md-list-item').length).toEqual(1);
- });
-
- it('should handle custom Ref prop', () => {
- const container = mount(Test} />);
- const instance = container.find('ListItem').instance();
-
- expect(instance.navLink.tagName).toEqual('SPAN');
- });
-
- describe('tests for isReadOnly Props', () => {
- it('should add class for isReadOnly prop', () => {
- const container = mount(
-
-
-
-
-
-
-
-
-`;
diff --git a/src/legacy/ListItemHeader/examples/Default.js b/src/legacy/ListItemHeader/examples/Default.js
deleted file mode 100644
index ff70bd74c2..0000000000
--- a/src/legacy/ListItemHeader/examples/Default.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { List, ListItemHeader } from '@momentum-ui/react-collaboration';
-import { NavLink } from 'react-router-dom';
-
-export default class ListItemHeaderExample extends React.PureComponent {
- render() {
- const anchorNode = More ;
- return (
-
-
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/ListItemHeader/examples/KitchenSink.js b/src/legacy/ListItemHeader/examples/KitchenSink.js
deleted file mode 100644
index 6d15238040..0000000000
--- a/src/legacy/ListItemHeader/examples/KitchenSink.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { ListItemHeaderDefault } from './index';
-
-export default class ListItemHeaderKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/ListItemHeader/examples/KitchenSink.stories.tsx b/src/legacy/ListItemHeader/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 54a6aa5ee1..0000000000
--- a/src/legacy/ListItemHeader/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/ListItemHeader',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
- {header}
- ,
-
- {children}
- ,
- ];
-
- return (
-
- {staticChildren}
-
- );
- }
-}
-
-ListItemHeader.propTypes = {
- /** @prop Children nodes to render inside ListItemHeader | null */
- children: PropTypes.node,
- /** @prop Optional css class string | '' */
- className: PropTypes.string,
- /** @prop ListItem header text */
- header: PropTypes.string.isRequired,
- /** @prop HTML ID for associated input | '' */
- id: PropTypes.string,
- /** @prop Determines if ListItemHeader is Clickable | true */
- isReadOnly: PropTypes.bool,
- /** @prop ListItem title | '' */
- title: PropTypes.string,
- /** @prop ListItemHeader type variation | '' */
- type: PropTypes.oneOf(['', 'space', 'space-light']),
-};
-
-ListItemHeader.defaultProps = {
- children: null,
- className: '',
- id: '',
- isReadOnly: true,
- title: '',
- type: '',
-};
-
-ListItemHeader.displayName = 'ListItemHeader';
-
-export default ListItemHeader;
diff --git a/src/legacy/ListItemHeader/tests/index.spec.js b/src/legacy/ListItemHeader/tests/index.spec.js
deleted file mode 100644
index a1237bff84..0000000000
--- a/src/legacy/ListItemHeader/tests/index.spec.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { List, ListItemHeader } from '@momentum-ui/react-collaboration';
-
-describe('tests for Test} />
- );
-
- expect(container.find('.test').length).toEqual(1);
- });
-
- it('should render one ListItemHeader', () => {
- const container = mount(
- {clickableNode}
-
- );
-
- container.find('.testClick').simulate('click');
- expect(onClickFn).toHaveBeenCalled();
- });
-
- it('should handle type prop', () => {
- const container = mount(
-
-
-
-
-
-
-
-
- header
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/src/legacy/ListItemSection/index.js b/src/legacy/ListItemSection/index.js
deleted file mode 100644
index ecda9c232b..0000000000
--- a/src/legacy/ListItemSection/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/** @component list-item */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-const ListItemSection = (props) => {
- const { children, className, position, ...otherProps } = props;
-
- return (
-
- {children}
-
- );
-};
-
-ListItemSection.propTypes = {
- /** @prop Children nodes to render inside ListItemSection | null */
- children: PropTypes.node,
- /** @prop Optional css class name | '' */
- className: PropTypes.string,
- /** @prop Determine the ListItemSection's position | 'center' */
- position: PropTypes.oneOf(['left', 'center', 'right', 'center-align']),
-};
-
-ListItemSection.defaultProps = {
- children: null,
- className: '',
- position: 'center',
-};
-
-ListItemSection.displayName = 'ListItemSection';
-
-export default ListItemSection;
diff --git a/src/legacy/ListItemSection/tests/index.spec.js b/src/legacy/ListItemSection/tests/index.spec.js
deleted file mode 100644
index 8872d6cd37..0000000000
--- a/src/legacy/ListItemSection/tests/index.spec.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { ListItemSection } from '@momentum-ui/react-collaboration';
-
-describe('tests for
- Test
-
- );
-
- expect(container.children().length).toEqual(1);
- });
-});
diff --git a/src/legacy/ListItemSection/tests/index.spec.js.snap b/src/legacy/ListItemSection/tests/index.spec.js.snap
deleted file mode 100644
index 34ea38e32f..0000000000
--- a/src/legacy/ListItemSection/tests/index.spec.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
-
-
-`;
diff --git a/src/legacy/Loading/examples/Default.js b/src/legacy/Loading/examples/Default.js
deleted file mode 100644
index 217642791d..0000000000
--- a/src/legacy/Loading/examples/Default.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Loading } from '@momentum-ui/react-collaboration';
-
-export default function LoaderSpinnerDefault() {
- return (
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/Loading/examples/KitchenSink.stories.tsx b/src/legacy/Loading/examples/KitchenSink.stories.tsx
deleted file mode 100644
index b43cd6aefc..0000000000
--- a/src/legacy/Loading/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/Loading',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
-
-
-
-
-
-
-`;
diff --git a/src/legacy/Modal/examples/Default.js b/src/legacy/Modal/examples/Default.js
deleted file mode 100644
index 450a611e49..0000000000
--- a/src/legacy/Modal/examples/Default.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import {
- Button,
- Modal,
- ModalBody,
- ModalFooter,
- ModalHeader,
-} from '@momentum-ui/react-collaboration';
-export default class ModalDefault extends React.PureComponent {
- state = {
- showModal: false,
- showModal2: false,
- };
- render() {
- return (
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/Modal/examples/Full.js b/src/legacy/Modal/examples/Full.js
deleted file mode 100644
index c13b36e49c..0000000000
--- a/src/legacy/Modal/examples/Full.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import {
- Button,
- Modal,
- ModalBody,
- ModalFooter,
- ModalHeader,
-} from '@momentum-ui/react-collaboration';
-export default class ModalFull extends React.PureComponent {
- state = {
- showModal7: false,
- showModal8: false,
- };
- render() {
- return (
-
-
-
-
- );
- }
-}
diff --git a/src/legacy/Modal/examples/KitchenSink.js b/src/legacy/Modal/examples/KitchenSink.js
deleted file mode 100644
index bb633606f1..0000000000
--- a/src/legacy/Modal/examples/KitchenSink.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { ModalDefault, ModalFull, ModalLarge, ModalSmall } from './index';
-
-export default class ModalKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/Modal/examples/KitchenSink.stories.tsx b/src/legacy/Modal/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 65d117fd3b..0000000000
--- a/src/legacy/Modal/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/Modal',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () => {modalContent} ;
- }
-
- const RenderModal = renderTo ? AriaModal.renderTo(`#${renderTo}`) : AriaModal;
-
- const getModal = () => {
- return (
- show && (
- document.querySelector(`#${applicationId}`)}
- dialogClass={
- `md-modal` +
- ` md-modal--${size}` +
- ` ${this.state.animationClass}` +
- `${(className && ` ${className}`) || ''}`
- }
- includeDefaultStyles={false}
- titleId={htmlId}
- underlayClass={
- backdrop ? `md-modal__backdrop fade` + ` ${this.state.animationClass}` : ''
- }
- underlayClickExits={backdropClickExit}
- escapeExits={escapeExits}
- focusDialog={focusDialog}
- {...props}
- >
- {modalContent}
-
- )
- );
- };
-
- return getModal();
- }
-}
-
-Modal.propTypes = {
- /** @prop application DOM id, used to set aria-hidden to true when modal is open */
- applicationId: PropTypes.string.isRequired,
- /** @prop Determines the visibility and ability to edit the backdrop of the Modal | true */
- backdrop: PropTypes.bool,
- /** @prop To enable/disable clicking on underlay to exit modal | false */
- backdropClickExit: PropTypes.bool,
- /** @prop Children nodes to render inside the Modal | null */
- children: PropTypes.node,
- /** @prop Optional css class names | '' */
- className: PropTypes.string,
- /** @prop Optional component for wrapping content */
- ContentWrapper: PropTypes.func,
- /** @prop To enable/disable escape to exit modal | true */
- escapeExits: PropTypes.bool,
- /** @prop To set focus to the entire modal rather than elements within modal | true */
- focusDialog: PropTypes.bool,
- /** @prop Unique HTML ID used for tying label to HTML input for automated testing */
- htmlId: PropTypes.string.isRequired,
- /** @prop Icon node to be rendered for Dialog | null */
- icon: PropTypes.element,
- /** @prop Callback function invoked when user clicks on cross button or esc key */
- onHide: PropTypes.func.isRequired,
- /** @prop To render to an element other than the browser window | null */
- renderTo: PropTypes.string,
- /** @prop Show/hide modal */
- show: PropTypes.bool.isRequired,
- /** @prop Size of the modal | 'default' */
- size: PropTypes.oneOf(['large', 'medium', 'default', 'small', 'full', 'dialog']),
-};
-
-Modal.defaultProps = {
- backdrop: true,
- backdropClickExit: false,
- children: null,
- className: '',
- escapeExits: true,
- focusDialog: true,
- icon: null,
- renderTo: null,
- show: false,
- size: 'default',
-};
-
-Modal.displayName = 'Modal';
-
-export default Modal;
diff --git a/src/legacy/Modal/tests/index.spec.js b/src/legacy/Modal/tests/index.spec.js
deleted file mode 100644
index 9dfd865b1a..0000000000
--- a/src/legacy/Modal/tests/index.spec.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { Modal } from '@momentum-ui/react-collaboration';
-//Add test for Background once Portals are supported in Enzyme
-
-describe('tests for {}} applicationId="test" show htmlId="testModal" />);
-
- expect(wrapper).toMatchSnapshot();
- });
-
- it('should render a Modal', () => {
- wrapper = shallow( {}} applicationId="test" show htmlId="testModal" />);
-
- expect(wrapper.children().length).toEqual(1);
- });
-
- it('should not render without Show Prop equaling true', () => {
- wrapper = shallow(
- {}} applicationId="test" show={false} htmlId="testModal" />
- );
-
- expect(wrapper.children().length).toEqual(0);
- });
-
- it('should render based on size prop', () => {
- wrapper = shallow( {}} applicationId="test" show htmlId="testModal" />);
-
- expect(wrapper.find('.md-modal__content').length).toEqual(1);
- expect(wrapper.props().dialogClass).toContain('md-modal--default');
- });
-
- it('should render based on size prop (small)', () => {
- wrapper = shallow(
- {}} applicationId="test" show size="small" htmlId="testModal" />
- );
-
- expect(wrapper.find('.md-modal__content').length).toEqual(1);
- expect(wrapper.props().dialogClass).toContain('md-modal--small');
- });
-
- it('should render based on size prop (medium)', () => {
- wrapper = shallow(
- {}} applicationId="test" show size="medium" htmlId="testModal" />
- );
-
- expect(wrapper.find('.md-modal__content').length).toEqual(1);
- expect(wrapper.props().dialogClass).toContain('md-modal--medium');
- });
-
- it('should render based on size prop (large)', () => {
- wrapper = shallow(
- {}} applicationId="test" show size="large" htmlId="testModal" />
- );
-
- expect(wrapper.find('.md-modal__content').length).toEqual(1);
- expect(wrapper.props().dialogClass).toContain('md-modal--large');
- });
-
- it('should render based on background prop', () => {
- wrapper = shallow( {}} applicationId="test" show htmlId="testModal" />);
-
- expect(wrapper.find('.reveal-modal-bg').length).toEqual(0);
- });
-
- it('should render based on size prop (dialog)', () => {
- wrapper = shallow(
- {}} applicationId="test" show size="dialog" htmlId="testModal" />
- );
-
- expect(wrapper.find('.md-modal__content').length).toEqual(1);
- expect(wrapper.props().dialogClass).toContain('md-modal--dialog');
- });
-
- it('should throw error if icon prop is not of type icon in dialog', () => {
- try {
- shallow(
- {}}
- icon={}
- applicationId="test"
- show
- size="dialog"
- htmlId="testModal"
- />
- );
- } catch (e) {
- expect(e.message).toEqual('icon prop needs to be of type Icon.');
- }
- });
-
- it('should render based on size prop (full)', () => {
- wrapper = shallow(
- {}} applicationId="test" show size="full" htmlId="testModal" />
- );
-
- expect(wrapper.find('.md-modal__content').length).toEqual(1);
- expect(wrapper.props().dialogClass).toContain('md-modal--full');
- });
-
- it('should render to given dom element', () => {
- const modalRoot = global.document.createElement('div');
- modalRoot.setAttribute('id', 'test-id');
- const body = global.document.querySelector('body');
- body.appendChild(modalRoot);
-
- expect(modalRoot.hasChildNodes()).toBeFalsy();
-
- mount(
-
- {}} applicationId="test" show htmlId="testModal" renderTo="test-id">
-
-
-
- );
-
- expect(modalRoot.hasChildNodes()).toBeTruthy();
- });
-
- it('should render children', () => {
- wrapper = shallow(
- {}} applicationId="test" show htmlId="testModal">
-
-
- );
-
- expect(wrapper.find('.testchild').length).toEqual(1);
- });
-
- it('should not render Backdrop if prop pass in as false', () => {
- wrapper = shallow(
- {}} applicationId="test" show backdrop={false} htmlId="testModal" />
- );
-
- expect(wrapper.find('.reveal-modal-bg').exists()).toEqual(false);
- });
-
- it('should render content wrapper if prop provided', () => {
- // eslint-disable-next-line react/prop-types
- const TestWrapper = ({ children }) => {
- return {children};
- };
-
- wrapper = mount(
- {}}
- applicationId="test"
- show
- htmlId="testModal"
- ContentWrapper={TestWrapper}
- >
-
-
- );
- const contentWrapper = wrapper.find('.test-wrapper');
- expect(contentWrapper.length).toEqual(1);
-
- const contentContainer = contentWrapper.find('.md-modal__content');
- expect(contentContainer.length).toEqual(1);
-
- const content = contentContainer.find('.testchild');
- expect(content.length).toEqual(1);
- });
-
- it('should not render content wrapper if prop not provided', () => {
- wrapper = mount(
- {}} applicationId="test" show htmlId="testModal">
-
-
- );
- expect(wrapper.find('.md-modal').children().at(0).hasClass('md-modal__content')).toBe(true);
- });
-});
diff --git a/src/legacy/Modal/tests/index.spec.js.snap b/src/legacy/Modal/tests/index.spec.js.snap
deleted file mode 100644
index bde64de88b..0000000000
--- a/src/legacy/Modal/tests/index.spec.js.snap
+++ /dev/null
@@ -1,119 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
-
-
-
-
-
-
-
-
-
-
-
-
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/src/legacy/ModalBody/examples/Default.js b/src/legacy/ModalBody/examples/Default.js
deleted file mode 100644
index 508aaa950c..0000000000
--- a/src/legacy/ModalBody/examples/Default.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Input, ModalBody } from '@momentum-ui/react-collaboration';
-
-export default function ModalBodyDefault() {
- return (
-
-
-
- {}}
- helpText="Field Must be Disabled"
- messageArr={[]}
- />
-
-
- );
-}
diff --git a/src/legacy/ModalBody/examples/KitchenSink.js b/src/legacy/ModalBody/examples/KitchenSink.js
deleted file mode 100644
index 554ad0c732..0000000000
--- a/src/legacy/ModalBody/examples/KitchenSink.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { ModalBodyDefault } from './index';
-
-export default class ModalBodyKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/ModalBody/examples/KitchenSink.stories.tsx b/src/legacy/ModalBody/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 9afa8ecf88..0000000000
--- a/src/legacy/ModalBody/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/ModalBody',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
-
-
- );
-
- expect(container.find('.testingforMB').length).toEqual(1);
- });
-});
diff --git a/src/legacy/ModalBody/tests/index.spec.js.snap b/src/legacy/ModalBody/tests/index.spec.js.snap
deleted file mode 100644
index ee5f262d26..0000000000
--- a/src/legacy/ModalBody/tests/index.spec.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
-
-
-`;
diff --git a/src/legacy/ModalFooter/examples/Default.js b/src/legacy/ModalFooter/examples/Default.js
deleted file mode 100644
index cffad89c90..0000000000
--- a/src/legacy/ModalFooter/examples/Default.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Button, ModalFooter } from '@momentum-ui/react-collaboration';
-
-export default function ModalFooterDefault() {
- return (
-
-
-
-
-
- );
-}
diff --git a/src/legacy/ModalFooter/examples/KitchenSink.js b/src/legacy/ModalFooter/examples/KitchenSink.js
deleted file mode 100644
index f573e8f1ea..0000000000
--- a/src/legacy/ModalFooter/examples/KitchenSink.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { ModalFooterDefault } from './index';
-
-export default class ModalFooterKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/ModalFooter/examples/KitchenSink.stories.tsx b/src/legacy/ModalFooter/examples/KitchenSink.stories.tsx
deleted file mode 100644
index dab589d3a0..0000000000
--- a/src/legacy/ModalFooter/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/ModalFooter',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
-
-
- );
-
- expect(container.find('.testingforMF').length).toEqual(1);
- });
-});
diff --git a/src/legacy/ModalFooter/tests/index.spec.js.snap b/src/legacy/ModalFooter/tests/index.spec.js.snap
deleted file mode 100644
index 419eb970b7..0000000000
--- a/src/legacy/ModalFooter/tests/index.spec.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
-
-
-`;
diff --git a/src/legacy/ModalHeader/index.js b/src/legacy/ModalHeader/index.js
deleted file mode 100644
index aa65dcb64d..0000000000
--- a/src/legacy/ModalHeader/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/** @component modal */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import CloseIcon from '../CloseIcon';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-class ModalHeader extends React.PureComponent {
- render() {
- const {
- children,
- className,
- closeBtnProps,
- headerLabel,
- message,
- showCloseButton,
- role,
- ariaLevel,
- ariaLabel,
- ...props
- } = this.props;
- const { handleClose } = this.context;
-
- return (
-
- {showCloseButton && (
-
-
-
-
- );
-
- expect(container.find('.test').length).toEqual(1);
- });
-
- it('should only render if children & headerLabel', () => {
- const container = shallow(
-
-
-
- );
-
- expect(container.find('.md-modal__title').length).toEqual(0);
- expect(container.find('.test').length).toEqual(1);
- });
-});
diff --git a/src/legacy/ModalHeader/tests/index.spec.js.snap b/src/legacy/ModalHeader/tests/index.spec.js.snap
deleted file mode 100644
index d5a801e616..0000000000
--- a/src/legacy/ModalHeader/tests/index.spec.js.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
-
-
-
-
-
-
-
-
-
-`;
diff --git a/src/legacy/Popover/examples/AccessibleHoverPopover.js b/src/legacy/Popover/examples/AccessibleHoverPopover.js
deleted file mode 100644
index c7d72aa17d..0000000000
--- a/src/legacy/Popover/examples/AccessibleHoverPopover.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { Button, Popover } from '@momentum-ui/react-collaboration';
-
-export default function PopOverHoverAccessible() {
- const content = (
-
- {[1, 2, 3].map((id) => {
- return (
-
-
-
- );
- })}
-
- );
-
- return (
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Popover/examples/Arrow.js b/src/legacy/Popover/examples/Arrow.js
deleted file mode 100644
index 17352d7b66..0000000000
--- a/src/legacy/Popover/examples/Arrow.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Button, Popover } from '@momentum-ui/react-collaboration';
-export default function PopoverArrow() {
- const contentArrow = (
-
- Arrow
-
- );
- return (
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Popover/examples/Contained.js b/src/legacy/Popover/examples/Contained.js
deleted file mode 100644
index 76a13ec2d6..0000000000
--- a/src/legacy/Popover/examples/Contained.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Button, Popover } from '@momentum-ui/react-collaboration';
-export default function PopoverContained() {
- const tall = (
-
- Popover(height: 3000px)
-
- );
- return (
-
-
-
- );
-}
diff --git a/src/legacy/Popover/examples/Default.js b/src/legacy/Popover/examples/Default.js
deleted file mode 100644
index 53555547c2..0000000000
--- a/src/legacy/Popover/examples/Default.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import {
- Button,
- Icon,
- List,
- ListItem,
- ListItemSection,
- Popover,
-} from '@momentum-ui/react-collaboration';
-export default function ContentDefault() {
- const content = (
-
-
-
-
- Edit space settings
-
-
-
-
- Add to favorites
-
-
-
-
- Notifications
-
-
- );
-
- const contentMouseEnter = (
-
- Mouse Enter
-
- );
-
- const contentFocus = (
-
- Focus
-
- );
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Popover/examples/Delay.js b/src/legacy/Popover/examples/Delay.js
deleted file mode 100644
index fc2bf5a53e..0000000000
--- a/src/legacy/Popover/examples/Delay.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Button, Popover } from '@momentum-ui/react-collaboration';
-export default function PopOverDelay() {
- const contentDelay = (
-
- Delayed
-
- );
- return (
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Popover/examples/Direction.js b/src/legacy/Popover/examples/Direction.js
deleted file mode 100644
index eac901d0be..0000000000
--- a/src/legacy/Popover/examples/Direction.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Popover } from '@momentum-ui/react-collaboration';
-export default function PopOverDirection({ direction, isContained }) {
- const testCase = `This is a really long popover ${direction} - isContained: ${
- isContained ? 'true' : 'false'
- }`;
- const content = (
-
- {testCase}
-
- );
- return (
-
-
-
-
-
- );
-}
-
-PopOverDirection.propTypes = {
- direction: PropTypes.string,
- isContained: PropTypes.bool,
-};
-
-PopOverDirection.defaultProps = {
- isContained: false,
-};
diff --git a/src/legacy/Popover/examples/KitchenSink.js b/src/legacy/Popover/examples/KitchenSink.js
deleted file mode 100644
index bc6763b0e0..0000000000
--- a/src/legacy/Popover/examples/KitchenSink.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import {
- PopoverArrow,
- PopoverContained,
- PopoverDefault,
- PopoverDirection,
- PopoverOffset,
- PopoverOverflow,
- PopOverHoverAccessible,
-} from './index';
-
-export default class PopoverKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/Popover/examples/KitchenSink.stories.tsx b/src/legacy/Popover/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 8605971656..0000000000
--- a/src/legacy/Popover/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/Popover',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
-
-
-
- );
-}
diff --git a/src/legacy/Popover/examples/Overflow.js b/src/legacy/Popover/examples/Overflow.js
deleted file mode 100644
index c24860c553..0000000000
--- a/src/legacy/Popover/examples/Overflow.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Button, Popover } from '@momentum-ui/react-collaboration';
-export default function PopoverOverflow() {
- const tall = (
-
- Popover(height: 3000px)
-
- );
- return (
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Popover/examples/index.js b/src/legacy/Popover/examples/index.js
deleted file mode 100644
index d884f4fff6..0000000000
--- a/src/legacy/Popover/examples/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as PopoverArrow } from './Arrow';
-export { default as PopoverContained } from './Contained';
-export { default as PopoverDefault } from './Default';
-export { default as PopoverDelay } from './Delay';
-export { default as PopoverDirection } from './Direction';
-export { default as PopoverKitchenSink } from './KitchenSink';
-export { default as PopoverOffset } from './Offset';
-export { default as PopoverOverflow } from './Overflow';
-export { default as PopOverHoverAccessible } from './AccessibleHoverPopover';
diff --git a/src/legacy/Popover/index.js b/src/legacy/Popover/index.js
deleted file mode 100644
index 8e8a75b1dd..0000000000
--- a/src/legacy/Popover/index.js
+++ /dev/null
@@ -1,416 +0,0 @@
-/** @component popover */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import EventOverlay from '../EventOverlay';
-import omit from 'lodash/omit';
-import { isMRv2Button } from '../../helpers/verifyTypes';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-class Popover extends React.Component {
- state = {
- isOpen: this.props.startOpen || false,
- isHovering: this.props.startOpen || false,
- };
-
- componentDidMount() {
- this.props.startOpen && this.forceUpdate();
- }
-
- componentDidUpdate(prevProps, prevState) {
- // focus on the first button in the EventOverlay
- const { isOpen } = this.state;
- const { autoFocusOnFirstElt } = this.props;
-
- if (autoFocusOnFirstElt && isOpen && !prevState.isOpen && this.overlay) {
- const eventOverlay = ReactDOM.findDOMNode(this.overlay);
-
- if (eventOverlay) {
- const firstTabbableElement = eventOverlay.querySelector('[tabindex="0"]');
- if (firstTabbableElement) firstTabbableElement.focus();
- }
- }
- }
-
- componentWillUnmount() {
- this.hideTimerId && clearTimeout(this.hideTimerId);
- this.showTimerId && clearTimeout(this.showTimerId);
- this.delayCheckHoverTimerId && clearTimeout(this.delayCheckHoverTimerId);
- }
-
- delayedHide = (e) => {
- const { delay, hideDelay, onClose } = this.props;
- const { isHovering } = this.state;
- if (isHovering) return;
-
- if (this.showTimerId) {
- clearTimeout(this.showTimerId);
- this.showTimerId = null;
- }
-
- const popoverHideTime = hideDelay ? hideDelay : delay;
-
- this.hideTimerId = setTimeout(() => {
- this.hideTimerId = null;
- this.setState(() => ({ isOpen: false, isHovering: false }), onClose && onClose(e));
- }, popoverHideTime);
-
- e && e.stopPropagation();
- };
-
- delayedShow = (e) => {
- const { delay, showDelay } = this.props;
-
- if (this.hideTimerId) {
- clearTimeout(this.hideTimerId);
- this.hideTimerId = null;
- }
-
- const popoverShowTime = showDelay ? showDelay : delay;
-
- this.showTimerId = setTimeout(() => {
- this.showTimerId = null;
- this.setState(() => ({ isOpen: true, isHovering: true }));
- }, popoverShowTime);
-
- if (e && e.stopPropagation) {
- e.stopPropagation();
- }
- };
-
- handleClose = (e) => {
- const { onClose } = this.props;
- const { keyCode } = e;
- //allow to copy text on popover
- if (!(keyCode === 17 || keyCode === 91 || keyCode === 67)) {
- this.setState({ isOpen: false }, onClose && onClose(e));
- }
- };
-
- handleHide = (e) => {
- this.setState({ isHovering: false }, () => this.delayedHide(e));
- };
-
- handleMouseEnter = (e) => {
- const { children } = this.props;
-
- children.props.onMouseEnter && children.props.onMouseEnter(e);
- return !this.showTimerId && !this.state.isOpen && this.delayedShow(e);
- };
-
- delayCheckHover = (e) => {
- const { hoverDelay, popoverTrigger } = this.props;
- const delay = popoverTrigger === 'MouseEnter' ? hoverDelay : 0;
- e.persist();
-
- this.setState({ isHovering: false }, () => {
- this.delayCheckHoverTimerId && clearTimeout(this.delayCheckHoverTimerId);
- this.delayCheckHoverTimerId = setTimeout(() => this.delayedHide(e), delay);
- });
- };
-
- handleMouseLeave = (e) => {
- const { children } = this.props;
- if (this.hasFocus) {
- return false;
- }
-
- if (this.showTimerId) {
- clearTimeout(this.showTimerId);
- this.showTimerId = null;
- }
-
- children.props.onMouseLeave && children.props.onMouseLeave(e);
- return !this.hideTimerId && this.state.isOpen && this.delayCheckHover(e);
- };
-
- handleBlur = (e) => {
- const { children } = this.props;
- this.hasFocus = false;
-
- children.props.onBlur && children.props.onBlur(e);
- this.handleMouseLeave(e);
- };
-
- handleClick = (e) => {
- const { children, doesAnchorToggle } = this.props;
- const { isOpen } = this.state;
-
- this.hasFocus = true;
-
- children.props.onClick && children.props.onClick(e);
-
- if (!this.showTimerId) {
- return !isOpen ? this.delayedShow(e) : doesAnchorToggle && this.handleBlur(e);
- }
- };
-
- handleFocus = (e) => {
- const { children } = this.props;
- const { isOpen } = this.state;
-
- this.hasFocus = true;
-
- children.props.onFocus && children.props.onFocus(e);
-
- if (!this.showTimerId) {
- return !isOpen ? this.delayedShow(e) : this.handleBlur(e);
- }
- };
-
- // Handle keydown for the trigger element
- handleKeyDownTrigger = (e) => {
- switch (e.which) {
- case 13: // ENTER
- e.preventDefault();
- e.stopPropagation();
- e.persist();
-
- // Open Popover
- this.setState({ isHovering: true }, () => this.delayedShow(e));
- break;
- case 27: // ESC
- e.persist();
- e.stopPropagation();
-
- // Close Popover
- this.handleHide(e);
-
- // Focus on trigger
- if (e.target) {
- e.target.focus();
- }
- break;
- }
- };
-
- handleKeyDownEventOverlay = (e) => {
- if (this.state.isOpen && this.overlay && this.anchorRef) {
- const eventOverlay = ReactDOM.findDOMNode(this.overlay);
- const trigger = ReactDOM.findDOMNode(this.anchorRef);
- const tabbableElements = eventOverlay.querySelectorAll('[tabindex="0"]');
-
- switch (e.which) {
- case 9:
- if (tabbableElements.length) {
- if (this.props.closeOnFocusLeavesContent) {
- // if closeOnFocusLeavesContent = true
- if (e.shiftKey) {
- // SHIFT + TAB
- // If first interactable element in EventOverlay, hide the popover
- if (document.activeElement === tabbableElements[0]) {
- this.handleHide(e);
- }
- } else {
- // TAB
- // If last interactable element in EventOverlay, hide the popover
- if (document.activeElement === tabbableElements[tabbableElements.length - 1]) {
- e.preventDefault();
- e.stopPropagation();
- this.handleHide(e);
- trigger.focus();
- }
- }
- } else {
- // if closeOnFocusLeavesContent = false
- // Intent is for TAB and SHIFT+TAB to trap the user inside the dialog (AKA popover)
- if (e.shiftKey) {
- // SHIFT + TAB
- // If first interactable element in EventOverlay, go to the last interatable element
- if (document.activeElement === tabbableElements[0]) {
- e.preventDefault();
- e.stopPropagation();
- tabbableElements[tabbableElements.length - 1].focus();
- }
- } else {
- // TAB
- // If last interactable element in EventOverlay, go to the first interatable element
- if (document.activeElement === tabbableElements[tabbableElements.length - 1]) {
- e.preventDefault();
- e.stopPropagation();
- tabbableElements[0].focus();
- }
- }
- }
- }
- break;
- case 27: // ESC
- e.stopPropagation();
- this.handleHide(e);
- trigger.focus();
- break;
- }
- }
- };
-
- render() {
- const { isOpen } = this.state;
- const {
- children,
- className,
- content,
- includeFocusOnHover,
- overflowType,
- popoverTrigger,
- showArrow,
- ...props
- } = this.props;
-
- const otherProps = omit({ ...props }, [
- 'autoFocusOnFirstElt',
- 'closeOnFocusLeavesContent',
- 'delay',
- 'doesAnchorToggle',
- 'hideDelay',
- 'hoverDelay',
- 'onClose',
- 'showDelay',
- 'startOpen',
- ]);
-
- const getTriggers = () => {
- const triggerProps = {};
- triggerProps.ref = (ele) => (this.anchorRef = ele);
- triggerProps.key = 'child-1';
-
- switch (popoverTrigger) {
- case 'MouseEnter':
- triggerProps.onMouseEnter = this.handleMouseEnter;
- triggerProps.onMouseLeave = this.handleMouseLeave;
-
- triggerProps.onFocus = includeFocusOnHover ? this.handleFocus : undefined;
- triggerProps.onBlur = includeFocusOnHover ? this.handleBlur : undefined;
- if (!includeFocusOnHover) {
- triggerProps.onKeyDown = this.handleKeyDownTrigger;
- }
-
- break;
-
- case 'Click':
- if (isMRv2Button(children)) {
- triggerProps.onPress = this.handleClick;
- } else {
- triggerProps.onClick = this.handleClick;
- }
-
- triggerProps.onBlur = null;
- triggerProps.onFocus = null;
- triggerProps.onMouseEnter = null;
- triggerProps.onMouseLeave = null;
-
- break;
-
- case 'Focus':
- triggerProps.onFocus = this.handleFocus;
- triggerProps.onBlur = this.handleBlur;
- triggerProps.onMouseEnter = null;
- triggerProps.onMouseLeave = null;
-
- break;
-
- case 'None':
- triggerProps.onClick = null;
- triggerProps.onFocus = null;
- triggerProps.onBlur = null;
- triggerProps.onMouseEnter = null;
- triggerProps.onMouseLeave = null;
-
- break;
- }
-
- return triggerProps;
- };
-
- const anchorWithTriggers = () => children && React.cloneElement(children, getTriggers());
-
- return (
-
- {anchorWithTriggers()}
- {isOpen && (
- (this.overlay = ref)}
- showArrow={showArrow}
- style={{ overflow: overflowType }}
- {...(popoverTrigger === 'MouseEnter' && {
- onMouseEnter: () => {
- this.setState({ isHovering: true, isOpen: true });
- },
- onMouseLeave: (e) => {
- e.persist();
- this.handleHide(e);
- },
- onKeyDown: !includeFocusOnHover ? this.handleKeyDownEventOverlay : undefined,
- })}
- {...(popoverTrigger === 'Focus' && { allowClickAway: false })}
- {...otherProps}
- >
- {content}
-
- )}
-
- );
- }
-}
-
-Popover.propTypes = {
- /** @prop Focus on the first interactable (tabindex="0") element in the popover | false */
- autoFocusOnFirstElt: PropTypes.bool,
- /** @prop Children node that should be the popover trigger(this should be a stateful component) */
- children: PropTypes.element.isRequired,
- /** @prop Optional CSS class names which goes over popover container | '' */
- className: PropTypes.string,
- /** @prop Applies to TAB and SHIFT+TAB, when either makes the focus leave the EventOverlay | false */
- closeOnFocusLeavesContent: PropTypes.bool,
- /** @prop The content that goes into the popover */
- content: PropTypes.oneOfType([PropTypes.element, PropTypes.node]).isRequired,
- /** @prop The delay for popover on hover, click, focus (hide/show) | 0 */
- delay: PropTypes.number,
- /** @prop Boolean for whether the Anchor Toggles the Popover | true */
- doesAnchorToggle: PropTypes.bool,
- /** @prop The hide delay for popover on hover, click, focus | 0 */
- hideDelay: PropTypes.number,
- /** @prop The hover delay for checking whether we are still hovering before closing | 500 */
- hoverDelay: PropTypes.number,
- /** @prop Optional prop that determines whether Focus triggers apply to MouseEnter | true */
- includeFocusOnHover: PropTypes.bool,
- /** @prop Callback function that will execute on close | null */
- onClose: PropTypes.func,
- /** @prop Optional prop that controls overflow css style of EventOverlay | 'auto' */
- overflowType: PropTypes.string,
- /** @prop Event that will trigger popover appearance | 'MouseEnter' */
- popoverTrigger: PropTypes.oneOf(['MouseEnter', 'Click', 'Focus', 'None']),
- /** @prop Boolean for whether the Arrow should show | true */
- showArrow: PropTypes.bool,
- /** @prop The show delay for popover on hover, click, focus | 0 */
- showDelay: PropTypes.number,
- /** @prop Should Popover start open | false */
- startOpen: PropTypes.bool,
-};
-
-Popover.defaultProps = {
- autoFocusOnFirstElt: false,
- className: '',
- closeOnFocusLeavesContent: false,
- delay: 0,
- doesAnchorToggle: true,
- hideDelay: 0,
- hoverDelay: 500,
- includeFocusOnHover: true,
- onClose: null,
- overflowType: 'auto',
- popoverTrigger: 'MouseEnter',
- showArrow: true,
- showDelay: 0,
- startOpen: false,
-};
-
-Popover.displayName = 'Popover';
-
-export default Popover;
diff --git a/src/legacy/Popover/tests/index.spec.js b/src/legacy/Popover/tests/index.spec.js
deleted file mode 100644
index 9d336204ff..0000000000
--- a/src/legacy/Popover/tests/index.spec.js
+++ /dev/null
@@ -1,509 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { Button, Popover } from '@momentum-ui/react-collaboration';
-import { ButtonPill } from '../../../components';
-
-describe('tests for
-
-
- );
-
- expect(container).toMatchSnapshot();
- });
-
- it('should render one Popover on click', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('click');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('click');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should fire onClose when closed', () => {
- const onClose = jest.fn();
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('button').simulate('click');
- jest.runAllTimers();
- container.update();
- container.find('button').simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(onClose).toHaveBeenCalled();
- });
-
- it('should fire childs onClick event as well as Popover onClick', () => {
- const onClick = jest.fn();
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('button').simulate('click');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
- expect(onClick).toHaveBeenCalled();
- });
-
- it('should fire childs onFocus event as well as Popover onFocus', () => {
- const onFocus = jest.fn();
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('button').simulate('focus');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
- expect(onFocus).toHaveBeenCalled();
- });
-
- it('should fire childs onMouseEnter event as well as Popover onMouseEnter', () => {
- const onMouseEnter = jest.fn();
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('button').simulate('mouseenter');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
- expect(onMouseEnter).toHaveBeenCalled();
- });
-
- it('focus -> mouseEnter -> mouseLeave -> blur, when popover trigger is MouseEnter', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('focus');
- jest.runAllTimers();
- container.update();
- expect(container.find('.md-event-overlay__children').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseenter');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('blur');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('focus -> mouseEnter -> blur -> mouseLeave, when popover trigger is MouseEnter', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('focus');
- jest.runAllTimers();
- container.update();
- expect(container.find('.md-event-overlay__children').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseenter');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('blur');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
-
- container.find('.anchor').simulate('mouseleave');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should render one Popover on mouseenter', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('mouseenter');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should start open and close Popover', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should render one Popover and not have Triggers', () => {
- const content = (
-
- Hello how are you doing
-
- );
-
- const container = mount(
-
-
-
- );
-
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
- });
-
- it('should not render Popover with popoverTrigger(None)', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('focus');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
-
- container.find('.anchor').simulate('mouseenter');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
-
- container.find('button').simulate('click');
- jest.runAllTimers();
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('when show and hide with showDelay/hideDelay', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('mouseenter');
- jest.advanceTimersByTime(300);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.advanceTimersByTime(1000);
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('when show and hide with delay', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('mouseenter');
- jest.advanceTimersByTime(200);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.advanceTimersByTime(99);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- jest.advanceTimersByTime(1000);
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should remain open if mouse enters event overlay children prior to 500ms', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('mouseenter');
- jest.advanceTimersByTime(300);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.advanceTimersByTime(200);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.md-event-overlay__children').simulate('mouseenter');
- jest.advanceTimersByTime(1000);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
- });
-
- it('should close if mouse enters event overlay children after 500ms', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('mouseenter');
- jest.advanceTimersByTime(300);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.advanceTimersByTime(600);
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should close if mouse enters event overlay children after a custom hover delay', () => {
- const content = (
-
- Hello how are you doing!
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('mouseenter');
- jest.advanceTimersByTime(100);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.advanceTimersByTime(300);
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should close if mouse leaves event overlay children after entering', () => {
- const content = (
-
- Hello how are you doing
-
- );
- const container = mount(
-
-
-
- );
-
- container.find('.anchor').simulate('mouseenter');
- jest.advanceTimersByTime(300);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.anchor').simulate('mouseleave');
- jest.advanceTimersByTime(200);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.md-event-overlay__children').simulate('mouseenter');
- jest.advanceTimersByTime(100);
- container.update();
- expect(container.find('.popover-content').length).toEqual(1);
-
- container.find('.md-event-overlay__children').simulate('mouseleave');
- jest.advanceTimersByTime(100);
- container.update();
- expect(container.find('.popover-content').length).toEqual(0);
- });
-
- it('should add onPress handler to trigger if isMRv2Button used & if popover trigger is click', () => {
- const container = mount(
- hi} popoverTrigger={'Click'}>
-
- Hello
-
-
- );
-
- const trigger = container.find('ButtonPill');
-
- expect(trigger.prop('onPress')).toEqual(expect.any(Function));
- expect(trigger.prop('onClick')).toBeUndefined();
- });
-
- it('should add onClick event handler to trigger if non isMRv2Button used & if popover trigger is click', () => {
- const container = mount(
- hi} popoverTrigger={'Click'}>
-
-
- );
-
- const trigger = container.find('Button');
-
- expect(trigger.prop('onClick')).toEqual(expect.any(Function));
- expect(trigger.prop('onPress')).toBeUndefined();
- });
-});
diff --git a/src/legacy/Popover/tests/index.spec.js.snap b/src/legacy/Popover/tests/index.spec.js.snap
deleted file mode 100644
index 230536ea78..0000000000
--- a/src/legacy/Popover/tests/index.spec.js.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
- Hello how are you doing
-
- }
- delay={0}
- doesAnchorToggle={true}
- hideDelay={0}
- hoverDelay={500}
- includeFocusOnHover={true}
- onClose={null}
- overflowType="auto"
- popoverTrigger="MouseEnter"
- showArrow={true}
- showDelay={0}
- startOpen={false}
->
-
-
-`;
diff --git a/src/legacy/SelectableContext/index.js b/src/legacy/SelectableContext/index.js
deleted file mode 100644
index 7913d89967..0000000000
--- a/src/legacy/SelectableContext/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import kebabCase from 'lodash/kebabCase';
-
-const SelectableContext = React.createContext(/* () => {} */);
-
-export const makeEventKey = (eventKey) => {
- return kebabCase(String(eventKey));
-};
-
-export const makeKeyboardKey = (keyboardKey) => {
- return typeof keyboardKey === 'string' && kebabCase(String(keyboardKey));
-};
-
-export default SelectableContext;
diff --git a/src/legacy/SocialList/index.js b/src/legacy/SocialList/index.js
deleted file mode 100644
index bd0265c576..0000000000
--- a/src/legacy/SocialList/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @component social-list */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-class SocialList extends React.Component {
- render() {
- const { children } = this.props;
-
- return {children};
- }
-}
-
-SocialList.propTypes = {
- /** @prop Children nodes to render inside SocialList | null */
- children: PropTypes.node,
-};
-
-SocialList.defaultProps = {
- children: null,
-};
-
-SocialList.displayName = 'SocialList';
-
-export default SocialList;
diff --git a/src/legacy/SocialList/tests/index.spec.js b/src/legacy/SocialList/tests/index.spec.js
deleted file mode 100644
index 897b35cf8d..0000000000
--- a/src/legacy/SocialList/tests/index.spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import SocialList from '..';
-
-describe('social list );
-
- expect(container.instance().props.children).toEqual('social list');
- });
-});
diff --git a/src/legacy/SocialList/tests/index.spec.js.snap b/src/legacy/SocialList/tests/index.spec.js.snap
deleted file mode 100644
index f0995d082b..0000000000
--- a/src/legacy/SocialList/tests/index.spec.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
-
-
-`;
diff --git a/src/legacy/SpaceListItem/examples/Default.js b/src/legacy/SpaceListItem/examples/Default.js
deleted file mode 100644
index dd142b2864..0000000000
--- a/src/legacy/SpaceListItem/examples/Default.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { Icon, List, ListItemHeader, SpaceListItem } from '@momentum-ui/react-collaboration';
-export default class ListItemDefault extends React.PureComponent {
- render() {
- return (
-
-
- Marketing}
- />
- More}
- type="space"
- />
- Searching}
- searchTerm="search"
- />
-
-
-
- );
- }
-}
diff --git a/src/legacy/SpaceListItem/examples/KitchenSink.js b/src/legacy/SpaceListItem/examples/KitchenSink.js
deleted file mode 100644
index ebdfa00f30..0000000000
--- a/src/legacy/SpaceListItem/examples/KitchenSink.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { SpaceListItemDefault, SpaceListItemSpaceListMeeting } from './index';
-
-export default class SpaceListItemKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/SpaceListItem/examples/KitchenSink.stories.tsx b/src/legacy/SpaceListItem/examples/KitchenSink.stories.tsx
deleted file mode 100644
index 1c2d98edc0..0000000000
--- a/src/legacy/SpaceListItem/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/SpaceListItem',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
-
-
- );
- }
-}
diff --git a/src/legacy/SpaceListItem/examples/index.js b/src/legacy/SpaceListItem/examples/index.js
deleted file mode 100644
index 060217612c..0000000000
--- a/src/legacy/SpaceListItem/examples/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as SpaceListItemDefault } from './Default';
-export { default as SpaceListItemKitchenSink } from './KitchenSink';
-export { default as SpaceListItemSpaceListMeeting } from './SpaceListMeeting';
diff --git a/src/legacy/SpaceListItem/index.js b/src/legacy/SpaceListItem/index.js
deleted file mode 100644
index e00df36e02..0000000000
--- a/src/legacy/SpaceListItem/index.js
+++ /dev/null
@@ -1,271 +0,0 @@
-/** @component list-item */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import uniqueId from 'lodash/uniqueId';
-import { Icon, ListItem, ListItemSection } from '@momentum-ui/react-collaboration';
-import Avatar from '../Avatar';
-
-/**
- * @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
- **/
-class SpaceListItem extends React.PureComponent {
- state = {
- id: this.props.id || uniqueId('md-space-list-item-'),
- };
-
- render() {
- const {
- attachments,
- className,
- childrenLeft,
- childrenRight,
- header,
- headerSecondary,
- highlightColor,
- isAlertOn,
- isBold,
- isDecrypting,
- isMentioned,
- isMuted,
- isOverview,
- isUnread,
- resultRight,
- searchTerm,
- subheader,
- theme,
- title,
- type,
- ...props
- } = this.props;
- const { id } = this.state;
-
- const getTitle = !title && typeof header === 'string' ? header : title;
-
- const getIcon = () => {
- if (isMuted) {
- return
- {childrenRight ? childrenRight : getIcon()}
-
- );
-
- const addEscapes = (text) => (text && text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')) || '';
-
- const highlightSubheader = () => {
- const escapedTerm = addEscapes(searchTerm);
- const re = new RegExp(`(${escapedTerm})`, 'gi');
-
- return searchTerm && typeof subheader === 'string'
- ? subheader.split(re).map((ele, idx) =>
- ele.match(re) ? (
-
- {ele}
-
- ) : (
- ele
- )
- )
- : subheader;
- };
-
- const highlightHeader = () => {
- const escapedTerm = addEscapes(searchTerm);
- const re = new RegExp(`(${escapedTerm})`, 'gi');
-
- return searchTerm && typeof header === 'string'
- ? header.split(re).map((ele, idx) =>
- ele.match(re) ? (
-
- {ele}
-
- ) : (
- ele
- )
- )
- : header;
- };
-
- const getHeader = ['search', 'filter', 'flag', 'filter-search'].includes(type)
- ? [
-
- {header}
- ,
- headerSecondary && (
-
- {headerSecondary}
-
- ),
- ]
- : highlightHeader();
-
- const children = [
-
- {leftSection || ,
-
-
- {getHeader}
-
- {['search', 'filter', 'flag', 'filter-search'].includes(type) ? (
-
- {['flag'].includes(type) ? (
-
-
-
- {highlightSubheader(subheader)}
-
- {resultRight && (
-
- {resultRight}
-
- )}
-
- {attachments && attachments.length && (
- {attachments[0]}
- )}
-
- ) : (
- {highlightSubheader(subheader)}
- )}
-
- ) : (
-
- {subheader}
-
- )}
- ,
- ...(!type ? [rightSection] : []),
- ];
-
- return (
-
- {children}
-
- );
- }
-}
-
-SpaceListItem.propTypes = {
- /** @prop SpaceListItem Attachment Array | null */
- attachments: PropTypes.arrayOf(PropTypes.node),
- /** @prop Children nodes to render for left section | null */
- childrenLeft: PropTypes.node,
- /** @prop Children nodes to render for right section | null */
- childrenRight: PropTypes.node,
- /** @prop Optional HTML class string | '' */
- className: PropTypes.string,
- /** @prop ListItem header node */
- header: PropTypes.node.isRequired,
- /** @prop Secondary header for center section | '' */
- headerSecondary: PropTypes.string,
- /** @prop Highlight Color for Regex | '' */
- highlightColor: PropTypes.string,
- /** @prop HTML ID for SpaceListItem | '' */
- id: PropTypes.string,
- /** @prop Determines if SpaceListItem's Alert is on | false */
- isAlertOn: PropTypes.bool,
- /** @prop Determines if SpaceListItem is Bolded | false */
- isBold: PropTypes.bool,
- /** @prop Determines if SpaceListItem decrypting | false */
- isDecrypting: PropTypes.bool,
- /** @prop Determines if SpaceListItem has been mentioned | false */
- isMentioned: PropTypes.bool,
- /** @prop Determines if SpaceListItem has been muted | false */
- isMuted: PropTypes.bool,
- /** @prop Determines if SpaceListItem is an Overview item | false */
- isOverview: PropTypes.bool,
- /** @prop Determines if SpaceListItem is unread | false */
- isUnread: PropTypes.bool,
- /** @prop Children node for result right section | null */
- resultRight: PropTypes.node,
- /** @prop Word used for search | '' */
- searchTerm: PropTypes.string,
- /** @prop SpaceListItem subheader node | ''s */
- subheader: PropTypes.node,
- /** @prop SpaceListItem theme | '' */
- theme: PropTypes.string,
- /** @prop SpaceListItem title | '' */
- title: PropTypes.string,
- /** @prop SpaceListItem type | '' */
- type: PropTypes.oneOf(['', 'filter', 'filter-search', 'filter-summary', 'flag', 'search']),
-};
-
-SpaceListItem.defaultProps = {
- attachments: null,
- childrenLeft: null,
- childrenRight: null,
- className: '',
- headerSecondary: '',
- highlightColor: '',
- id: '',
- isAlertOn: false,
- isBold: false,
- isDecrypting: false,
- isMentioned: false,
- isMuted: false,
- isOverview: false,
- isUnread: false,
- resultRight: null,
- searchTerm: '',
- subheader: '',
- title: '',
- theme: '',
- type: '',
-};
-
-SpaceListItem.displayName = 'SpaceListItem';
-
-export default SpaceListItem;
diff --git a/src/legacy/SpaceListItem/tests/index.spec.js b/src/legacy/SpaceListItem/tests/index.spec.js
deleted file mode 100644
index 669a8918af..0000000000
--- a/src/legacy/SpaceListItem/tests/index.spec.js
+++ /dev/null
@@ -1,386 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { SpaceListItem } from '@momentum-ui/react-collaboration';
-
-describe('tests for Test} />
- );
-
- expect(container.find('.test').length).toEqual(1);
- });
-
- it('should render childrenRight', () => {
- const container = mount(
- Test} />
- );
-
- expect(container.find('.test').length).toEqual(1);
- });
-
- it('should render one SpaceListItem', () => {
- const container = mount(Test}
- header="header"
- />
- );
-
- expect(container.find('.test').length).toEqual(1);
- });
- });
-
- describe('tests for searchTerm prop', () => {
- it('should add header--overview class', () => {
- const container = mount(header} searchTerm="header" />);
-
- expect(container.find('.md-list-item__header--highlight').exists()).toEqual(false);
- });
- });
-
- describe('tests for highlightColor prop', () => {
- it('should handle highlightColor on header', () => {
- const container = mount(
- subheader}
- searchTerm="header"
- />
- );
-
- expect(container.find('.md-list-item__subheader--highlight').exists()).toEqual(false);
- });
- });
-
- it('should handle filter-summary type', () => {
- const container = mount(subheader}
- searchTerm="header"
- />
- );
-
- expect(container.find('.md-list-item__subheader--highlight').exists()).toEqual(false);
- });
- });
-
- describe('tests for handling flag type prop', () => {
- it('should handle flag type', () => {
- const container = mount(test} />);
-
- expect(container.find('.md-list-item').props().title).toEqual(undefined);
- });
-
- it('should handle title prop', () => {
- const container = mount(
-
-
-
-
-
-
-
-
-
-
- N
-
-
-
-
-
-
-
-
- header
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/src/legacy/Tooltip/examples/Content.js b/src/legacy/Tooltip/examples/Content.js
deleted file mode 100644
index 7571178e97..0000000000
--- a/src/legacy/Tooltip/examples/Content.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { Button, Tooltip } from '@momentum-ui/react-collaboration';
-
-export default function TooltipContent() {
- const content = content! ;
-
- return (
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Tooltip/examples/Default.js b/src/legacy/Tooltip/examples/Default.js
deleted file mode 100644
index ae89f60ffa..0000000000
--- a/src/legacy/Tooltip/examples/Default.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Button, Tooltip } from '@momentum-ui/react-collaboration';
-
-export default function TooltipDefault() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Tooltip/examples/Delay.js b/src/legacy/Tooltip/examples/Delay.js
deleted file mode 100644
index d4fb0a7568..0000000000
--- a/src/legacy/Tooltip/examples/Delay.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Button, Tooltip } from '@momentum-ui/react-collaboration';
-
-export default function TooltipDelay() {
- return (
-
-
-
-
-
-
-
- );
-}
diff --git a/src/legacy/Tooltip/examples/Direction.js b/src/legacy/Tooltip/examples/Direction.js
deleted file mode 100644
index 9db961fcc8..0000000000
--- a/src/legacy/Tooltip/examples/Direction.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-import { Button, Tooltip } from '@momentum-ui/react-collaboration';
-
-export default function TooltipDirection() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- X
-
-
-
-
- X
-
-
-
- );
-}
diff --git a/src/legacy/Tooltip/examples/KitchenSink.js b/src/legacy/Tooltip/examples/KitchenSink.js
deleted file mode 100644
index 885be5ca4a..0000000000
--- a/src/legacy/Tooltip/examples/KitchenSink.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { TooltipContent, TooltipDefault, TooltipDelay, TooltipDirection } from './index';
-
-export default class TooltipKitchenSink extends React.Component {
- render() {
- return (
-
-
- );
- }
-}
diff --git a/src/legacy/Tooltip/examples/KitchenSink.stories.tsx b/src/legacy/Tooltip/examples/KitchenSink.stories.tsx
deleted file mode 100644
index a1d01131b7..0000000000
--- a/src/legacy/Tooltip/examples/KitchenSink.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LegacyKitchenSink from './KitchenSink';
-import React from 'react';
-
-export default {
- title: 'Legacy/Tooltip',
- component: LegacyKitchenSink,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const Legacy = () =>
- {clonedChildren()}
-
- );
- }
-}
-
-Tooltip.propTypes = {
- /** @prop Children element to wrap Tooltip component around | null */
- children: PropTypes.element,
- /** @prop Optional CSS class string | '' */
- className: PropTypes.string,
- /** @prop Optional object for Popover Component props | {} */
- popoverProps: PropTypes.object,
- /** @prop Tooltip text | '' */
- tooltip: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
- /** @prop Set the action which triggers the Tooltip | 'MouseEnter' */
- tooltipTrigger: PropTypes.oneOf(['MouseEnter', 'Click', 'Focus']),
- /** @prop Set the Tooltip width | null */
- width: PropTypes.number,
-};
-
-Tooltip.defaultProps = {
- children: null,
- className: '',
- popoverProps: {},
- tooltip: '',
- tooltipTrigger: 'MouseEnter',
- width: null,
-};
-
-Tooltip.displayName = 'Tooltip';
-
-export default Tooltip;
diff --git a/src/legacy/Tooltip/tests/index.spec.js b/src/legacy/Tooltip/tests/index.spec.js
deleted file mode 100644
index f2cb87d3b2..0000000000
--- a/src/legacy/Tooltip/tests/index.spec.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { Button, TooltipLegacy } from '@momentum-ui/react-collaboration';
-
-describe('tests for
- Hi
-
- );
-
- expect(container).toMatchSnapshot();
- });
-
- it('should render on click', () => {
- const container = mount(
-
-
-
- );
-
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-tooltip__text').text()).toEqual('test');
- });
-
- it('should render on Hover', () => {
- const container = mount(
-
-
-
- );
-
- const button = container.find('button');
- button.simulate('mouseenter');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-tooltip__text').text()).toEqual('test');
- });
-
- it('should render on Focus', () => {
- const container = mount(
-
-
-
- );
-
- const button = container.find('button');
- button.simulate('focus');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-tooltip__text').text()).toEqual('test');
- });
-
- it('should parse direction correctly (top)', () => {
- const container = mount(
-
-
-
- );
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-event-overlay--top').length).toEqual(1);
- });
-
- it('should parse direction correctly (top-left)', () => {
- const container = mount(
-
-
-
- );
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-event-overlay--top').length).toEqual(1);
- });
-
- it('should parse direction correctly (top-right)', () => {
- const container = mount(
-
-
-
- );
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-event-overlay--top').length).toEqual(1);
- });
-
- it('should parse direction correctly (bottom)', () => {
- const container = mount(
-
-
-
- );
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-event-overlay--bottom').length).toEqual(1);
- });
-
- it('should parse direction correctly (bottom-left)', () => {
- const container = mount(
-
-
-
- );
-
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
- expect(container.find('.md-event-overlay--bottom').length).toEqual(1);
- });
-
- it('should parse direction correctly (bottom-right)', () => {
- const container = mount(
-
-
-
- );
-
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
- expect(container.find('.md-event-overlay--bottom').length).toEqual(1);
- });
-
- it('should parse direction correctly (left)', () => {
- const container = mount(
-
-
-
- );
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-event-overlay--left').length).toEqual(1);
- });
-
- it('should parse direction correctly (right)', () => {
- const container = mount(
-
-
-
- );
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-event-overlay--right').length).toEqual(1);
- });
-
- it('should set the width attribute when passed', () => {
- const container = mount(
-
-
-
- );
- const button = container.find('button');
- button.simulate('click');
- jest.runAllTimers();
- container.update();
-
- expect(container.find('.md-tooltip__text').prop('style').width).toEqual('100px');
- });
-});
diff --git a/src/legacy/Tooltip/tests/index.spec.js.snap b/src/legacy/Tooltip/tests/index.spec.js.snap
deleted file mode 100644
index af45760755..0000000000
--- a/src/legacy/Tooltip/tests/index.spec.js.snap
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`tests for
-
- test
-
- }
- delay={0}
- doesAnchorToggle={true}
- hideDelay={0}
- hoverDelay={500}
- includeFocusOnHover={true}
- onClose={null}
- overflowType="auto"
- popoverTrigger="MouseEnter"
- showArrow={true}
- showDelay={0}
- startOpen={false}
- >
-
- Hi
-
-
-
-`;
diff --git a/src/legacy/index.js b/src/legacy/index.js
deleted file mode 100644
index b2d61f6e17..0000000000
--- a/src/legacy/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Entry file for momentum-ui-react module.
- */
-export { default as AlertBanner } from './AlertBanner';
-export { default as Badge } from './Badge';
-export { default as Button } from './Button';
-export { default as ButtonGroup } from './ButtonGroup';
-export { default as ContentItem } from './ContentItem';
-export { default as Icon } from './Icon';
-export { default as Input } from './Input';
-export { default as Lightbox } from './Lightbox';
-export { default as Link } from './Link';
-export { default as List } from './List';
-export { default as ListItem } from './ListItem';
-export { default as ListItemHeader } from './ListItemHeader';
-export { default as ListItemSection } from './ListItemSection';
-export { default as Loading } from './Loading';
-export { default as Modal } from './Modal';
-export { default as ModalBody } from './ModalBody';
-export { default as ModalFooter } from './ModalFooter';
-export { default as ModalHeader } from './ModalHeader';
-export { default as Popover } from './Popover';
-export { default as SpaceListItem } from './SpaceListItem';
-export { default as Tooltip } from './Tooltip';
-
-import * as utils from './utils';
-export { utils };
diff --git a/src/legacy/utils/dateUtils/index.js b/src/legacy/utils/dateUtils/index.js
deleted file mode 100644
index e820d78629..0000000000
--- a/src/legacy/utils/dateUtils/index.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import moment from 'moment';
-
-export function newDateWithOffset(utcOffset) {
- return moment().utc().utcOffset(utcOffset);
-}
-
-export function now(maybeFixedUtcOffset) {
- if (maybeFixedUtcOffset == null) {
- return moment();
- }
- return newDateWithOffset(maybeFixedUtcOffset);
-}
-
-export function getStartOfWeek(date) {
- return date.startOf('week');
-}
-
-export function getStartOfMonth(date) {
- return date.startOf('month');
-}
-
-// Returns day of month
-export function getDate(date) {
- return date.get('date');
-}
-
-export function getMonth(date) {
- return date.get('month');
-}
-
-export function addDays(date, amount) {
- return date.add(amount, 'days');
-}
-
-export function addWeeks(date, amount) {
- return date.add(amount, 'weeks');
-}
-
-export function addMonths(date, amount) {
- return date.add(amount, 'months');
-}
-
-export function subtractDays(date, amount) {
- return date.subtract(amount, 'days');
-}
-
-export function subtractWeeks(date, amount) {
- return date.subtract(amount, 'weeks');
-}
-
-export function subtractMonths(date, amount) {
- return date.subtract(amount, 'months');
-}
-
-export function getLocaleData(date) {
- return date.localeData();
-}
-
-export function getWeekdayMinInLocale(locale, date) {
- return locale.weekdaysMin(date).substr(0, 1);
-}
-
-export function localizeDate(date, locale = moment.locale()) {
- return date.clone().locale(locale);
-}
-
-export function isSameDay(moment1, moment2) {
- if (moment1 && moment2) {
- return moment1.isSame(moment2, 'day');
- } else {
- return !moment1 && !moment2;
- }
-}
-
-export function isSameMonth(date1, date2) {
- if (date1 && date2) {
- return date1.isSame(date2, 'month');
- } else {
- return !date1 && !date2;
- }
-}
-
-export function isDayDisabled(day, { minDate, maxDate, filterDate } = {}) {
- return (
- (minDate && day.isBefore(moment(minDate), 'day')) ||
- (maxDate && day.isAfter(moment(maxDate), 'day')) ||
- (filterDate && filterDate(day.clone())) ||
- false
- );
-}
-
-export function shouldPrevMonthDisable(day, minDate) {
- const firstDayOfCurrMonth = day.clone().startOf('month');
- return minDate && !moment(minDate).isBefore(firstDayOfCurrMonth);
-}
-
-export function shouldNextMonthDisable(day, maxDate) {
- const lastDayOfCurrMonth = day.clone().endOf('month');
- return maxDate && !moment(maxDate).isAfter(lastDayOfCurrMonth);
-}
diff --git a/src/legacy/utils/getColorValue/index.js b/src/legacy/utils/getColorValue/index.js
deleted file mode 100644
index d0f6c951d4..0000000000
--- a/src/legacy/utils/getColorValue/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { startsWith, trimStart, isEmpty } from 'lodash';
-
-import colorTokens from '@momentum-ui/tokens/dist/colors.json';
-import legacyColors from '@momentum-ui/tokens/src/legacyColors.json';
-
-export const getColorValue = (color, colorFormat) => {
- const colorName = convertScssVariableToName(color);
- const colorObject = getColorObject(colorName);
- const colorValue = getColorValueFromToken(colorObject, colorFormat);
- return colorValue;
-};
-
-const convertScssVariableToName = (color) => {
- switch (true) {
- case startsWith(color, '$md-'):
- return trimStart(color, '$md-');
- case startsWith(color, '$'):
- return trimStart(color, '$');
- case startsWith(color, 'md-'):
- return trimStart(color, 'md-');
- default:
- return color;
- }
-};
-
-const getColorObject = (colorName) => {
- const colorObject = getColorObjectFromTokens(colorName);
- if (isEmpty(colorObject)) {
- return getColorObjectFromTokens(getNewColorName(colorName));
- }
- return colorObject;
-};
-
-const getColor = (name, value) => {
- return (colorTokens[name] && colorTokens[name][value]) || {};
-};
-
-const getColorObjectFromTokens = (colorName) => {
- const colorData = colorName.split('-');
- return getColor(colorData[0], colorData[1]);
-};
-
-const getNewColorName = (colorName) => {
- const color = {
- oldName: colorName,
- newName: legacyColors[colorName],
- };
- if (!color.newName) {
- consoleHandler('color-error', color);
- return 'black-100';
- }
- consoleHandler('new-colors-warn', color);
- return color.newName;
-};
-
-const getColorValueFromToken = (colorObject, colorFormat) => {
- switch (colorFormat) {
- case 'hex':
- return colorObject.hex;
- case 'rgb':
- return `rgb(${colorObject.rgb.r}, ${colorObject.rgb.g}, ${colorObject.rgb.b})`;
- default:
- return `rgba(${colorObject.rgba.r}, ${colorObject.rgba.g}, ${colorObject.rgba.b}, ${colorObject.rgba.a})`;
- }
-};
-
-const consoleHandler = (message, data) => {
- /* eslint-disable no-console */
- switch (message) {
- case 'new-colors-warn':
- console.warn(
- `[@momentum-ui] Design system colors update: ${data.oldName} is now ${data.newName}. Refer to https://momentum.design/styles/color/style`
- );
- break;
- case 'color-error':
- console.warn(
- `[@momentum-ui] ${data.oldName} does not exist in the design system,` +
- ` please use a color name from https://momentum.design/styles/color/style`
- );
- break;
- }
- /* eslint-enable no-console */
-};
diff --git a/src/legacy/utils/index.js b/src/legacy/utils/index.js
deleted file mode 100644
index 320ede0d31..0000000000
--- a/src/legacy/utils/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export * as dates from './dateUtils';
-export { prefix } from './prefixer';
-export { snakeCase } from './snakeCase';
-export { getColorValue } from './getColorValue';
diff --git a/src/legacy/utils/prefixer/index.js b/src/legacy/utils/prefixer/index.js
deleted file mode 100644
index 3cc8b96c5e..0000000000
--- a/src/legacy/utils/prefixer/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export const prefix = 'md';
diff --git a/src/legacy/utils/requestAnimationFrame/index.js b/src/legacy/utils/requestAnimationFrame/index.js
deleted file mode 100644
index 3421bf86ef..0000000000
--- a/src/legacy/utils/requestAnimationFrame/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// Properly handle server-side rendering.
-let win;
-if (typeof window !== 'undefined') {
- win = window;
-} else if (typeof self !== 'undefined') {
- win = self;
-} else {
- win = {};
-}
-
-// requestAnimationFrame() shim by Paul Irish
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-export const raf =
- win.requestAnimationFrame ||
- win.webkitRequestAnimationFrame ||
- win.mozRequestAnimationFrame ||
- win.oRequestAnimationFrame ||
- win.msRequestAnimationFrame ||
- function (callback) {
- return win.setTimeout(callback, 1000 / 60);
- };
-
-export const caf =
- win.cancelAnimationFrame ||
- win.webkitCancelAnimationFrame ||
- win.mozCancelAnimationFrame ||
- win.oCancelAnimationFrame ||
- win.msCancelAnimationFrame ||
- function (id) {
- win.clearTimeout(id);
- };
diff --git a/src/legacy/utils/requestAnimationTimeout/index.js b/src/legacy/utils/requestAnimationTimeout/index.js
deleted file mode 100644
index c056a11906..0000000000
--- a/src/legacy/utils/requestAnimationTimeout/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { caf, raf } from '../requestAnimationFrame';
-
-export const cancelAnimationTimeout = (frame) => caf(frame.id);
-
-/**
- * Recursively calls requestAnimationFrame until a specified delay has been met or exceeded.
- * When the delay time has been reached the function you're timing out will be called.
- *
- * Credit: Joe Lambert (https://gist.github.com/joelambert/1002116#file-requesttimeout-js)
- */
-export const requestAnimationTimeout = (callback, delay) => {
- const start = Date.now();
-
- const timeout = () => {
- if (Date.now() - start >= delay) {
- callback.call();
- } else {
- frame.id = raf(timeout);
- }
- };
- const frame = {
- id: raf(timeout),
- };
- return frame;
-};
diff --git a/src/legacy/utils/snakeCase/index.js b/src/legacy/utils/snakeCase/index.js
deleted file mode 100644
index 4109f265f7..0000000000
--- a/src/legacy/utils/snakeCase/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function snakeCase(word) {
- return `${word.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;
-}