From ebe1bc92a74c7468c98543e6ac64f4e840082272 Mon Sep 17 00:00:00 2001 From: Christoph Scheffauer Date: Tue, 25 Nov 2025 16:21:11 +0100 Subject: [PATCH 1/2] feat: remove-all-legacy-components --- .babelrc.js | 8 - .github/copilot-instructions.md | 1 - CONTRIBUTING.md | 33 - config/constants.js | 2 - .../KitchenSink.stories.tsx.hbs | 12 - config/plop/plopfile.js | 26 - config/storybook/constants.js | 1 - config/storybook/generateMain.js | 7 +- config/typescript/tsconfig.build.json | 1 - config/webpack/constants.js | 2 - css/momentum-ui.css | 3 - package.json | 4 +- scss/components/accordion/accordion.scss | 81 - .../accordion/examples/default.html | 32 - .../accordion/examples/multi-open.html | 34 - .../accordion/examples/pre-selected-open.html | 0 scss/components/accordion/mixins.scss | 94 - scss/components/accordion/module.scss | 15 - scss/components/accordion/settings.scss | 20 - .../activity-button/activity-button.scss | 160 - .../activity-button/examples/default.html | 70 - .../activity-button/examples/large.html | 70 - .../activity-button/examples/size-56.html | 80 - scss/components/activity-button/module.scss | 86 - .../components/alert-banner/alert-banner.scss | 54 - .../alert-banner/examples/default.html | 6 - .../alert-banner/examples/error.html | 6 - .../alert-banner/examples/warning.html | 6 - scss/components/alert-banner/module.scss | 22 - scss/components/alert-banner/settings.scss | 12 - .../alert-call/examples/default.html | 37 - .../alert-call/examples/device-list.html | 81 - .../alert-call/examples/device.html | 44 - .../alert-call/examples/number.html | 42 - .../alert-meeting/examples/default.html | 30 - .../alert-meeting/examples/multiple.html | 30 - scss/components/alert/alert.scss | 262 - scss/components/alert/examples/default.html | 14 - scss/components/alert/examples/error.html | 14 - scss/components/alert/examples/success.html | 14 - scss/components/alert/examples/warning.html | 14 - scss/components/alert/mixins.scss | 13 - scss/components/alert/module.scss | 35 - scss/components/alert/settings.scss | 30 - scss/components/avatar/avatar.scss | 220 - scss/components/avatar/composite-avatar.scss | 69 - scss/components/avatar/examples/active.html | 3 - scss/components/avatar/examples/bot.html | 3 - .../components/avatar/examples/composite.html | 9 - scss/components/avatar/examples/dark.html | 3 - scss/components/avatar/examples/default.html | 3 - scss/components/avatar/examples/failure.html | 4 - scss/components/avatar/examples/group.html | 3 - scss/components/avatar/examples/inactive.html | 3 - .../avatar/examples/notification.html | 4 - scss/components/avatar/examples/self.html | 5 - scss/components/avatar/examples/status.html | 6 - scss/components/avatar/examples/typing.html | 8 - scss/components/avatar/mixins.scss | 34 - scss/components/avatar/module.scss | 28 - scss/components/avatar/settings.scss | 193 - scss/components/badge/badge.scss | 96 - scss/components/badge/examples/dark.html | 0 scss/components/badge/examples/default.html | 12 - scss/components/badge/examples/round.html | 12 - scss/components/badge/mixins.scss | 83 - scss/components/badge/module.scss | 37 - scss/components/badge/settings.scss | 69 - .../blog-article/examples/default.html | 0 .../blog-list/examples/default.html | 0 scss/components/breadcrumbs/breadcrumbs.scss | 41 - .../breadcrumbs/examples/default.html | 12 - scss/components/breadcrumbs/mixins.scss | 71 - scss/components/breadcrumbs/module.scss | 31 - scss/components/breadcrumbs/settings.scss | 19 - .../components/button-group/button-group.scss | 127 - .../button-group/examples/dark.html | 16 - .../button-group/examples/default.html | 24 - .../examples/highlight-false.html | 21 - .../examples/justified-false.html | 11 - .../button-group/examples/pill.html | 16 - scss/components/button-group/module.scss | 26 - scss/components/button-group/settings.scss | 26 - scss/components/button/button.scss | 718 -- scss/components/button/examples/circle.html | 2 - scss/components/button/examples/color.html | 6 - scss/components/button/examples/dark.html | 0 scss/components/button/examples/default.html | 3 - scss/components/button/examples/disabled.html | 4 - scss/components/button/examples/expanded.html | 5 - scss/components/button/examples/loading.html | 30 - scss/components/button/examples/size.html | 0 scss/components/button/examples/tags.html | 6 - scss/components/button/mixins.scss | 327 - scss/components/button/module.scss | 16 - scss/components/button/settings.scss | 196 - .../call-control/examples/active.html | 0 .../call-control/examples/cancel.html | 0 .../call-control/examples/default.html | 0 .../call-control/examples/disable.html | 0 scss/components/card/card.scss | 38 - scss/components/card/examples/clickable.html | 21 - scss/components/card/examples/content.html | 21 - scss/components/card/examples/content2.html | 15 - scss/components/card/examples/default.html | 14 - scss/components/card/module.scss | 40 - scss/components/card/settings.scss | 8 - scss/components/cdk-overlay/cdk-overlay.scss | 140 - scss/components/checkbox/checkbox.scss | 134 - scss/components/checkbox/examples/dark.html | 0 .../components/checkbox/examples/default.html | 6 - .../checkbox/examples/disabled.html | 6 - scss/components/checkbox/examples/group.html | 0 .../checkbox/examples/indeterminate.html | 6 - .../checkbox/examples/kitchen-sink.html | 406 - scss/components/checkbox/examples/nested.html | 42 - scss/components/checkbox/mixins.scss | 101 - scss/components/checkbox/module.scss | 32 - scss/components/checkbox/settings.scss | 5 - scss/components/chip/chip.scss | 45 - scss/components/chip/examples/default.html | 0 scss/components/chip/examples/file.html | 0 scss/components/chip/examples/recording.html | 0 scss/components/chip/module.scss | 7 - .../close-wrapper/close-wrapper.scss | 15 - scss/components/close-wrapper/module.scss | 6 - scss/components/close/close.scss | 55 - scss/components/close/module.scss | 12 - scss/components/close/settings.scss | 6 - scss/components/coachmark/coachmark.scss | 79 - .../coachmark/examples/content.html | 8 - .../coachmark/examples/default.html | 9 - scss/components/coachmark/module.scss | 27 - .../collapse-button/collapse-button.scss | 35 - .../collapse-button/examples/collapsed.html | 14 - .../collapse-button/examples/expanded.html | 14 - scss/components/collapse-button/module.scss | 7 - scss/components/collapse-button/settings.scss | 8 - scss/components/combo-box/combo-box.scss | 24 - scss/components/combo-box/examples/clear.html | 26 - scss/components/combo-box/examples/dark.html | 0 .../combo-box/examples/default.html | 17 - scss/components/combo-box/module.scss | 13 - scss/components/combo-box/settings.scss | 1 - scss/components/components.scss | 57 - .../components/content-item/content-item.scss | 322 - scss/components/content-item/mixins.scss | 24 - scss/components/content-item/module.scss | 25 - scss/components/data-table/data-table.scss | 205 - .../data-table/examples/avatar.html | 123 - .../data-table/examples/default.html | 27 - .../data-table/examples/multi-select.html | 217 - .../examples/multiselect-scroll-resize.html | 325 - .../data-table/examples/resize.html | 90 - .../data-table/examples/scroll.html | 109 - .../data-table/examples/selection.html | 74 - scss/components/data-table/examples/sort.html | 127 - .../components/data-table/examples/zebra.html | 27 - scss/components/date-picker/date-picker.scss | 216 - .../components/date-picker/examples/dark.html | 0 .../date-picker/examples/default.html | 149 - scss/components/date-picker/module.scss | 24 - scss/components/date-picker/settings.scss | 36 - .../date-range-picker/date-range-picker.scss | 48 - .../date-range-picker/examples/dark.html | 0 .../date-range-picker/examples/default.html | 191 - scss/components/date-range-picker/module.scss | 15 - .../date-range-picker/settings.scss | 8 - scss/components/dialog/examples/default.html | 39 - scss/components/drawer/drawer.scss | 101 - scss/components/drawer/examples/default.html | 7 - scss/components/drawer/examples/openfrom.html | 6 - scss/components/drawer/module.scss | 5 - scss/components/drawer/settings.scss | 5 - .../editable-textfield.scss | 67 - .../editable-textfield/examples/dark.html | 0 .../editable-textfield/examples/default.html | 10 - scss/components/footer/footer.scss | 80 - scss/components/footer/settings.scss | 5 - scss/components/forms/forms.scss | 538 - scss/components/forms/mixins.scss | 186 - scss/components/forms/settings.scss | 37 - scss/components/hero/hero.scss | 31 - scss/components/icon/examples/color.html | 6 - scss/components/icon/examples/default.html | 6 - scss/components/icon/examples/white.html | 8 - scss/components/icon/icon.scss | 12 - scss/components/icon/settings.scss | 12 - .../input-phone-number.scss | 1963 ---- .../components/input-phone-number/module.scss | 11 - .../input-phone-number/settings.scss | 7 - .../input-search/examples/default.html | 21 - .../input-search/examples/loading.html | 18 - .../input-search/examples/pill.html | 21 - scss/components/input/examples/clear.html | 29 - scss/components/input/examples/dark.html | 17 - scss/components/input/examples/default.html | 30 - scss/components/input/examples/disabled.html | 17 - scss/components/input/examples/error.html | 18 - scss/components/input/examples/help-text.html | 17 - .../input/examples/kitchen-sink.html | 1938 ---- scss/components/input/examples/nested .html | 15 - scss/components/input/examples/read-only.html | 16 - .../input/examples/secondary-label.html | 18 - scss/components/input/examples/success.html | 20 - scss/components/input/examples/text-area.html | 15 - .../components/input/examples/validation.html | 30 - scss/components/input/examples/warning.html | 18 - scss/components/input/input.scss | 355 - scss/components/input/mixins.scss | 241 - scss/components/input/module.scss | 22 - scss/components/input/settings.scss | 121 - scss/components/label/label.scss | 17 - scss/components/label/mixins.scss | 24 - scss/components/label/module.scss | 17 - scss/components/label/settings.scss | 10 - .../components/lightbox/examples/default.html | 61 - .../lightbox/examples/multiple .html | 0 scss/components/lightbox/lightbox.scss | 311 - scss/components/lightbox/mixins.scss | 44 - scss/components/lightbox/module.scss | 14 - scss/components/lightbox/settings.scss | 21 - scss/components/link/examples/default.html | 3 - scss/components/link/link.scss | 109 - scss/components/link/mixins.scss | 31 - scss/components/link/module.scss | 24 - scss/components/list-item/examples/dark .html | 0 .../list-item/examples/default.html | 0 .../list-item/examples/list-item-header.html | 0 .../list-item/examples/list-item-section.html | 0 .../examples/list-item-separator.html | 0 scss/components/list-item/list-item.scss | 139 - scss/components/list-item/mixins.scss | 458 - scss/components/list-item/module.scss | 35 - scss/components/list-item/settings.scss | 86 - .../list-separator/list-separator.scss | 36 - scss/components/list-separator/module.scss | 8 - scss/components/loader/examples/check.html | 10 - scss/components/loader/examples/default.html | 2 - .../loader/examples/determinate.html | 10 - .../loader/examples/percentage.html | 10 - scss/components/loader/loader.scss | 232 - scss/components/loader/mixins.scss | 53 - scss/components/loader/module.scss | 13 - scss/components/loader/placeholders.scss | 215 - scss/components/loader/settings.scss | 36 - scss/components/loading/loading.scss | 58 - scss/components/loading/module.scss | 8 - .../meeting-list/examples/default.html | 0 .../meeting-list/list-item-meeting.scss | 99 - scss/components/meeting-list/module.scss | 18 - scss/components/meeting-list/settings.scss | 7 - .../menu/examples/custom-menu-items.html | 72 - scss/components/menu/examples/default.html | 25 - scss/components/menu/examples/sub-menu.html | 47 - scss/components/menu/menu.scss | 78 - scss/components/menu/module.scss | 11 - scss/components/menu/settings.scss | 15 - scss/components/modal/examples/default.html | 38 - scss/components/modal/examples/full.html | 36 - scss/components/modal/examples/large.html | 36 - scss/components/modal/examples/small.html | 36 - scss/components/modal/mixins.scss | 142 - scss/components/modal/modal.scss | 408 - scss/components/modal/module.scss | 49 - scss/components/modal/settings.scss | 58 - scss/components/overlay/event-overlay.scss | 151 - scss/components/overlay/module.scss | 24 - scss/components/overlay/settings.scss | 7 - .../page-header/examples/default.html | 0 .../page-header/examples/page-sub-header.html | 0 scss/components/page-header/mixins.scss | 14 - scss/components/page-header/module.scss | 13 - .../page-header/page-header-sites.scss | 61 - scss/components/page-header/settings.scss | 32 - .../pagination/examples/centered .html | 0 .../pagination/examples/default.html | 11 - scss/components/pagination/mixins.scss | 142 - scss/components/pagination/module.scss | 9 - scss/components/pagination/pagination.scss | 17 - scss/components/pagination/settings.scss | 22 - scss/components/panel/examples/default.html | 5 - scss/components/panel/mixins.scss | 29 - scss/components/panel/module.scss | 21 - scss/components/panel/panel.scss | 321 - scss/components/panel/settings.scss | 3 - scss/components/popover/examples/arrow.html | 6 - .../popover/examples/contained.html | 6 - scss/components/popover/examples/default.html | 55 - scss/components/popover/examples/delay.html | 6 - .../popover/examples/direction.html | 6 - scss/components/popover/examples/offset.html | 6 - .../components/popover/examples/overflow.html | 6 - scss/components/popover/module.scss | 39 - scss/components/popover/popover.scss | 73 - scss/components/popover/settings.scss | 11 - .../components/progress/examples/default.html | 21 - scss/components/progress/mixins.scss | 14 - scss/components/progress/module.scss | 12 - scss/components/progress/progress.scss | 48 - scss/components/progress/settings.scss | 29 - scss/components/radio/examples/dark.html | 0 scss/components/radio/examples/default.html | 12 - scss/components/radio/examples/disabled.html | 20 - scss/components/radio/examples/group.html | 0 scss/components/radio/examples/nested.html | 26 - scss/components/radio/mixins.scss | 113 - scss/components/radio/module.scss | 21 - scss/components/radio/radio.scss | 156 - scss/components/radio/settings.scss | 5 - scss/components/select/examples/dark.html | 0 scss/components/select/examples/default.html | 40 - scss/components/select/examples/filter.html | 0 .../select/examples/multi-select.html | 61 - scss/components/select/examples/nested.html | 0 scss/components/select/examples/objects.html | 0 .../select/examples/secondary-label.html | 0 .../select/examples/validation.html | 0 scss/components/select/module.scss | 26 - scss/components/select/select.scss | 165 - scss/components/select/settings.scss | 21 - scss/components/sidebar/examples/dark.html | 172 - scss/components/sidebar/examples/default.html | 172 - .../sidebar/examples/page-level.html | 172 - .../sidebar/examples/with-icons.html | 202 - scss/components/sidebar/module.scss | 21 - scss/components/sidebar/sidebar.scss | 576 - scss/components/slider/examples/cross.html | 14 - scss/components/slider/examples/default.html | 13 - scss/components/slider/examples/step.html | 14 - .../slider/examples/two-handles.html | 14 - scss/components/slider/module.scss | 26 - scss/components/slider/settings.scss | 20 - scss/components/slider/slider.scss | 127 - .../social-list/examples/default.html | 13 - scss/components/social-list/module.scss | 3 - scss/components/social-list/social-list.scss | 13 - .../space-list/examples/default.html | 410 - .../examples/space-list-meeting.html | 154 - scss/components/space-list/module.scss | 27 - .../space-list/space-list-item.scss | 425 - scss/components/stepper/module.scss | 2 - scss/components/stepper/stepper.scss | 139 - scss/components/tabs/examples/default.html | 35 - scss/components/tabs/examples/justified.html | 24 - scss/components/tabs/examples/pills.html | 24 - scss/components/tabs/examples/vertical.html | 0 scss/components/tabs/module.scss | 32 - scss/components/tabs/settings.scss | 15 - scss/components/tabs/tabs.scss | 595 - .../time-picker/examples/24-hour.html | 27 - .../time-picker/examples/30-minute-steps.html | 0 .../components/time-picker/examples/dark.html | 0 .../time-picker/examples/default.html | 32 - .../time-picker/examples/validation.html | 0 scss/components/time-picker/module.scss | 43 - scss/components/time-picker/time-picker.scss | 87 - .../toggle-switch/examples/dark.html | 0 .../toggle-switch/examples/default.html | 14 - .../toggle-switch/examples/filled-dark.html | 0 .../toggle-switch/examples/filled.html | 0 scss/components/toggle-switch/mixins.scss | 88 - scss/components/toggle-switch/module.scss | 13 - scss/components/toggle-switch/settings.scss | 6 - .../toggle-switch/toggle-switch.scss | 88 - scss/components/tooltip/examples/content.html | 0 scss/components/tooltip/examples/default.html | 29 - scss/components/tooltip/examples/delay.html | 11 - .../tooltip/examples/direction.html | 11 - scss/components/tooltip/module.scss | 11 - scss/components/tooltip/settings.scss | 24 - scss/components/tooltip/tooltip.scss | 72 - scss/components/top-bar/examples/blue.html | 30 - scss/components/top-bar/examples/default.html | 53 - scss/components/top-bar/examples/light.html | 57 - scss/components/top-bar/module.scss | 58 - scss/components/top-bar/settings.scss | 38 - scss/components/top-bar/top-bar.scss | 434 - scss/generic/components.scss | 90 - scss/layouts/block-grid/block-grid.scss | 25 - scss/layouts/block-grid/mixins.scss | 168 - scss/layouts/block-grid/module.scss | 11 - scss/layouts/block-grid/settings.scss | 3 - .../layout-grid/examples/advanced.html | 16 - .../examples/block-grid-column.html | 9 - .../layout-grid/examples/block-grid.html | 23 - .../layout-grid/examples/centered.html | 14 - .../examples/collapse-uncollapse.html | 10 - .../layouts/layout-grid/examples/complex.html | 42 - .../layouts/layout-grid/examples/default.html | 29 - .../layout-grid/examples/incomplete.html | 12 - scss/layouts/layout-grid/examples/medium.html | 10 - .../layouts/layout-grid/examples/offsets.html | 16 - scss/layouts/layout-grid/examples/small.html | 10 - .../layout-grid/examples/source-ordering.html | 22 - scss/layouts/layout-grid/layout-grid.scss | 183 - scss/layouts/layout-grid/module.scss | 10 - scss/layouts/layouts.scss | 2 - scss/layouts/sites.scss | 12 - scss/momentum-ui-base.scss | 3 - scss/momentum-ui-components.scss | 130 - scss/momentum-ui-ng.scss | 200 - scss/momentum-ui-sites.scss | 2 - scss/momentum-ui.scss | 155 - scss/ng/accordion.scss | 120 - scss/ng/alert-banner.scss | 12 - scss/ng/avatar.scss | 43 - scss/ng/badge.scss | 53 - scss/ng/breadcrumbs.scss | 7 - scss/ng/button.scss | 107 - scss/ng/call-destination.scss | 35 - scss/ng/card-member.scss | 100 - scss/ng/card-number.scss | 43 - scss/ng/card.scss | 1073 -- scss/ng/combo-box.scss | 95 - scss/ng/datepicker.scss | 352 - scss/ng/dragdrop.scss | 41 - scss/ng/dropdown.scss | 444 - scss/ng/formly.scss | 85 - scss/ng/grid-filter.scss | 107 - scss/ng/header-push.scss | 74 - scss/ng/header.scss | 370 - scss/ng/login.scss | 101 - scss/ng/messagebox.scss | 173 - scss/ng/nav-left.scss | 237 - scss/ng/nav-side-admin.scss | 623 -- scss/ng/ng-grid.scss | 582 - scss/ng/ng.scss | 34 - scss/ng/notification.scss | 201 - scss/ng/overlay-panel.scss | 35 - scss/ng/page-header-admin.scss | 39 - scss/ng/page-sub-header.scss | 84 - scss/ng/phonenumber.scss | 131 - scss/ng/popover.scss | 139 - scss/ng/reveal.scss | 581 - scss/ng/search-filter.scss | 314 - scss/ng/select.scss | 511 - scss/ng/settings/settings.js | 18 - scss/ng/settings/settings.scss | 9694 ----------------- scss/ng/settings/sidepanel.scss | 7 - scss/ng/settings/slider.scss | 1 - scss/ng/settings/topbar.scss | 119 - scss/ng/setup-assistant.scss | 129 - scss/ng/side-panel.scss | 452 - scss/ng/table.scss | 275 - scss/ng/tabs.scss | 59 - scss/ng/timepicker.scss | 5 - scss/ng/tokenfield.scss | 248 - scss/ng/tooltip-ng.scss | 118 - scss/ng/topbar-admin.scss | 976 -- scss/ng/topbar-user.scss | 62 - scss/ng/topbar.scss | 1340 --- scss/ng/topnav.scss | 290 - scss/ng/typeahead.scss | 221 - scss/ng/ui-grid.scss | 1111 -- scss/settings/list-group.scss | 36 - scss/settings/settings.js | 1 - scss/settings/settings.scss | 1367 --- scss/tools/mixins/grid-framework.scss | 90 - scss/tools/mixins/grid.scss | 363 - scss/tools/mixins/list-group.scss | 33 - scss/tools/mixins/mixins.scss | 23 - scss/tools/placeholders/page-layout.scss | 60 - scss/tools/placeholders/placeholders.scss | 1 - scss/utilities/component-animation.scss | 33 - scss/utilities/core.scss | 83 - scss/utilities/cursor.scss | 7 - scss/utilities/ellipsis.scss | 688 -- scss/utilities/image.scss | 5 - scss/utilities/page-layout.scss | 4 - scss/utilities/responsive.scss | 191 - scss/utilities/spacing.scss | 77 - scss/utilities/utilities.scss | 8 - src/components/Avatar/Avatar.constants.ts | 1 + src/components/Avatar/Avatar.style.scss | 35 + src/components/Avatar/Avatar.tsx | 5 +- .../Avatar/Avatar.unit.test.tsx.snap | 21 +- .../LegacyComponentImporter.style.scss | 2 +- .../ThemeProvider/ThemeProvider.constants.ts | 14 +- .../ThemeProvider/ThemeProvider.tsx | 13 +- .../ThemeProvider/ThemeProvider.unit.test.tsx | 10 +- .../ThemeProvider.unit.test.tsx.snap | 8 +- src/examples/App.js | 31 - src/examples/InsertExample.js | 10 - src/examples/ThemeSelect/index.js | 102 - .../containers/AsyncComponent/index.js | 47 - src/examples/containers/KitchenSink/index.js | 29 - src/examples/containers/Playground/index.js | 15 - src/examples/containers/Sidebar/index.js | 38 - src/examples/data/components.js | 20 - src/examples/favicon.ico | Bin 34494 -> 0 bytes src/examples/index.ejs | 25 - src/examples/index.js | 30 - src/examples/styles.scss | 84 - src/examples/webpack-public-path.js | 9 - src/helpers/cssTokenCheck.js | 36 +- .../mdl-token-examples.js} | 0 src/helpers/verifyTypes.unit.test.tsx | 2 +- src/index.ts | 27 - src/legacy/AlertBanner/examples/Default.js | 33 - src/legacy/AlertBanner/examples/Error.js | 34 - .../AlertBanner/examples/KitchenSink.js | 14 - .../examples/KitchenSink.stories.tsx | 12 - src/legacy/AlertBanner/examples/Warning.js | 34 - src/legacy/AlertBanner/examples/index.js | 4 - src/legacy/AlertBanner/index.js | 93 - src/legacy/AlertBanner/tests/index.spec.js | 127 - .../AlertBanner/tests/index.spec.js.snap | 21 - src/legacy/Avatar/examples/Active.js | 7 - src/legacy/Avatar/examples/Bot.js | 7 - src/legacy/Avatar/examples/Default.js | 7 - src/legacy/Avatar/examples/Failure.js | 7 - src/legacy/Avatar/examples/Group.js | 7 - src/legacy/Avatar/examples/Inactive.js | 7 - src/legacy/Avatar/examples/KitchenSink.js | 34 - .../Avatar/examples/KitchenSink.stories.tsx | 12 - src/legacy/Avatar/examples/Notification.js | 7 - src/legacy/Avatar/examples/Self.js | 7 - src/legacy/Avatar/examples/Status.js | 16 - src/legacy/Avatar/examples/Typing.js | 7 - src/legacy/Avatar/examples/index.js | 11 - src/legacy/Avatar/index.js | 274 - src/legacy/Avatar/tests/index.spec.js | 316 - src/legacy/Avatar/tests/index.spec.js.snap | 29 - src/legacy/Badge/examples/Default.js | 57 - src/legacy/Badge/examples/KitchenSink.js | 13 - .../Badge/examples/KitchenSink.stories.tsx | 12 - src/legacy/Badge/examples/Round.js | 57 - src/legacy/Badge/examples/index.js | 3 - src/legacy/Badge/index.js | 46 - src/legacy/Badge/tests/index.spec.js | 51 - src/legacy/Badge/tests/index.spec.js.snap | 12 - src/legacy/Button/examples/Circle.js | 13 - src/legacy/Button/examples/Color.js | 10 - src/legacy/Button/examples/Default.js | 5 - src/legacy/Button/examples/Disabled.js | 5 - src/legacy/Button/examples/Expanded.js | 5 - src/legacy/Button/examples/FileWhiteboard.js | 22 - src/legacy/Button/examples/KitchenSink.js | 30 - .../Button/examples/KitchenSink.stories.tsx | 12 - src/legacy/Button/examples/Loading.js | 5 - src/legacy/Button/examples/Size.js | 36 - src/legacy/Button/examples/Tags.js | 5 - src/legacy/Button/examples/index.js | 10 - src/legacy/Button/index.js | 313 - src/legacy/Button/tests/index.spec.js | 346 - src/legacy/Button/tests/index.spec.js.snap | 85 - src/legacy/ButtonGroup/examples/Default.js | 15 - .../ButtonGroup/examples/HighlightFalse.js | 17 - .../ButtonGroup/examples/JustifiedFalse.js | 15 - .../ButtonGroup/examples/KitchenSink.js | 20 - .../examples/KitchenSink.stories.tsx | 12 - src/legacy/ButtonGroup/examples/Pill.js | 37 - src/legacy/ButtonGroup/examples/index.js | 5 - src/legacy/ButtonGroup/index.js | 327 - src/legacy/ButtonGroup/tests/index.spec.js | 155 - .../ButtonGroup/tests/index.spec.js.snap | 109 - src/legacy/ButtonGroupContext/index.js | 5 - src/legacy/Checkbox/index.js | 103 - src/legacy/Checkbox/tests/index.spec.js | 74 - src/legacy/Checkbox/tests/index.spec.js.snap | 49 - src/legacy/CloseIcon/index.js | 36 - src/legacy/CloseIcon/tests/index.spec.js | 22 - src/legacy/CloseIcon/tests/index.spec.js.snap | 13 - src/legacy/ContentItem/ChatContent/index.js | 147 - src/legacy/ContentItem/FileContent/index.js | 155 - src/legacy/ContentItem/IconContent/index.js | 78 - src/legacy/ContentItem/examples/Aspect.js | 19 - src/legacy/ContentItem/examples/Default.js | 50 - src/legacy/ContentItem/examples/Failed.js | 19 - src/legacy/ContentItem/examples/File.js | 58 - src/legacy/ContentItem/examples/Gif.js | 59 - src/legacy/ContentItem/examples/Icon.js | 58 - .../ContentItem/examples/KitchenSink.js | 27 - .../examples/KitchenSink.stories.tsx | 12 - src/legacy/ContentItem/examples/Size.js | 159 - src/legacy/ContentItem/examples/Spinner.js | 43 - src/legacy/ContentItem/examples/index.js | 9 - src/legacy/ContentItem/index.js | 197 - src/legacy/ContentItem/tests/index.spec.js | 139 - .../ContentItem/tests/index.spec.js.snap | 70 - src/legacy/DeviceListCall/index.js | 125 - src/legacy/DeviceListCall/tests/index.spec.js | 64 - .../DeviceListCall/tests/index.spec.js.snap | 459 - src/legacy/EventOverlay/index.js | 1100 -- src/legacy/EventOverlay/tests/index.spec.js | 341 - .../EventOverlay/tests/index.spec.js.snap | 3 - src/legacy/Icon/examples/ButtonIcon.js | 15 - src/legacy/Icon/examples/Color.js | 14 - src/legacy/Icon/examples/Default.js | 14 - src/legacy/Icon/examples/KitchenSink.js | 15 - .../Icon/examples/KitchenSink.stories.tsx | 12 - src/legacy/Icon/examples/White.js | 16 - src/legacy/Icon/examples/index.js | 5 - src/legacy/Icon/index.js | 192 - src/legacy/Icon/tests/index.spec.js | 357 - src/legacy/Icon/tests/index.spec.js.snap | 124 - src/legacy/Input/examples/Clear.js | 16 - src/legacy/Input/examples/Dark.js | 16 - src/legacy/Input/examples/Default.js | 28 - src/legacy/Input/examples/Disabled.js | 15 - src/legacy/Input/examples/Error.js | 15 - src/legacy/Input/examples/HelpText.js | 15 - src/legacy/Input/examples/KitchenSink.js | 387 - .../Input/examples/KitchenSink.stories.tsx | 12 - src/legacy/Input/examples/Nested.js | 14 - src/legacy/Input/examples/ReadOnly.js | 15 - src/legacy/Input/examples/SecondaryLabel.js | 14 - src/legacy/Input/examples/Success.js | 20 - src/legacy/Input/examples/TextArea.js | 14 - src/legacy/Input/examples/Validation.js | 89 - src/legacy/Input/examples/Warning.js | 20 - src/legacy/Input/examples/index.js | 14 - src/legacy/Input/index.js | 364 - src/legacy/Input/tests/index.spec.js | 474 - src/legacy/Input/tests/index.spec.js.snap | 378 - src/legacy/InputHelper/index.js | 31 - src/legacy/InputHelper/tests/index.spec.js | 35 - .../InputHelper/tests/index.spec.js.snap | 14 - src/legacy/InputMessage/index.js | 25 - src/legacy/InputMessage/tests/input.spec.js | 17 - .../InputMessage/tests/input.spec.js.snap | 14 - src/legacy/InputSection/index.js | 39 - src/legacy/InputSection/tests/index.spec.js | 41 - .../InputSection/tests/index.spec.js.snap | 12 - src/legacy/Label/index.js | 43 - src/legacy/Label/tests/index.spec.js | 29 - src/legacy/Label/tests/index.spec.js.snap | 19 - src/legacy/Lightbox/examples/Default.js | 47 - src/legacy/Lightbox/examples/KitchenSink.js | 56 - .../Lightbox/examples/KitchenSink.stories.tsx | 12 - src/legacy/Lightbox/examples/Multiple.js | 55 - .../examples/cisco-webex-lockup-blue.png | Bin 29916 -> 0 bytes src/legacy/Lightbox/examples/index.js | 3 - src/legacy/Lightbox/examples/momentum.jpg | Bin 14215 -> 0 bytes src/legacy/Lightbox/index.js | 704 -- src/legacy/Lightbox/tests/index.spec.js | 415 - src/legacy/Lightbox/tests/index.spec.js.snap | 1664 --- src/legacy/Link/examples/Colored.js | 10 - src/legacy/Link/examples/Default.js | 11 - src/legacy/Link/examples/KitchenSink.js | 13 - .../Link/examples/KitchenSink.stories.tsx | 12 - src/legacy/Link/examples/index.js | 3 - src/legacy/Link/index.js | 52 - src/legacy/Link/tests/index.spec.js | 65 - src/legacy/Link/tests/index.spec.js.snap | 21 - src/legacy/List/examples/Default.js | 22 - src/legacy/List/examples/KitchenSink.js | 20 - .../List/examples/KitchenSink.stories.tsx | 12 - src/legacy/List/examples/ListItemHeader.js | 18 - src/legacy/List/examples/ListItemSeparator.js | 7 - .../List/examples/ListWithEventBubbling.js | 39 - src/legacy/List/examples/index.js | 5 - src/legacy/List/index.js | 469 - src/legacy/List/tests/index.spec.js | 536 - src/legacy/List/tests/index.spec.js.snap | 35 - src/legacy/ListContext/index.js | 5 - src/legacy/ListItem/examples/Default.js | 23 - src/legacy/ListItem/examples/KitchenSink.js | 20 - .../ListItem/examples/KitchenSink.stories.tsx | 12 - .../ListItem/examples/ListItemSections.js | 28 - .../ListItem/examples/ListItemSeparator.js | 8 - .../ListItem/examples/TabbableChildren.js | 49 - src/legacy/ListItem/examples/index.js | 5 - src/legacy/ListItem/index.js | 458 - src/legacy/ListItem/tests/index.spec.js | 186 - src/legacy/ListItem/tests/index.spec.js.snap | 71 - src/legacy/ListItemHeader/examples/Default.js | 19 - .../ListItemHeader/examples/KitchenSink.js | 12 - .../examples/KitchenSink.stories.tsx | 12 - src/legacy/ListItemHeader/examples/index.js | 2 - src/legacy/ListItemHeader/index.js | 77 - src/legacy/ListItemHeader/tests/index.spec.js | 91 - .../ListItemHeader/tests/index.spec.js.snap | 107 - src/legacy/ListItemSection/index.js | 39 - .../ListItemSection/tests/index.spec.js | 45 - .../ListItemSection/tests/index.spec.js.snap | 12 - src/legacy/Loading/examples/Default.js | 27 - src/legacy/Loading/examples/KitchenSink.js | 12 - .../Loading/examples/KitchenSink.stories.tsx | 12 - src/legacy/Loading/examples/index.js | 2 - src/legacy/Loading/index.js | 32 - src/legacy/Loading/tests/index.spec.js | 17 - src/legacy/Loading/tests/index.spec.js.snap | 21 - src/legacy/Modal/examples/Default.js | 104 - src/legacy/Modal/examples/Full.js | 104 - src/legacy/Modal/examples/KitchenSink.js | 15 - .../Modal/examples/KitchenSink.stories.tsx | 12 - src/legacy/Modal/examples/Large.js | 110 - src/legacy/Modal/examples/Small.js | 104 - src/legacy/Modal/examples/index.js | 5 - src/legacy/Modal/index.js | 155 - src/legacy/Modal/tests/index.spec.js | 183 - src/legacy/Modal/tests/index.spec.js.snap | 119 - src/legacy/ModalBody/examples/Default.js | 23 - src/legacy/ModalBody/examples/KitchenSink.js | 12 - .../examples/KitchenSink.stories.tsx | 12 - src/legacy/ModalBody/examples/index.js | 2 - src/legacy/ModalBody/index.js | 36 - src/legacy/ModalBody/tests/index.spec.js | 27 - src/legacy/ModalBody/tests/index.spec.js.snap | 13 - src/legacy/ModalFooter/examples/Default.js | 14 - .../ModalFooter/examples/KitchenSink.js | 12 - .../examples/KitchenSink.stories.tsx | 12 - src/legacy/ModalFooter/examples/index.js | 2 - src/legacy/ModalFooter/index.js | 30 - src/legacy/ModalFooter/tests/index.spec.js | 27 - .../ModalFooter/tests/index.spec.js.snap | 12 - src/legacy/ModalHeader/index.js | 95 - src/legacy/ModalHeader/tests/index.spec.js | 85 - .../ModalHeader/tests/index.spec.js.snap | 41 - .../examples/AccessibleHoverPopover.js | 36 - src/legacy/Popover/examples/Arrow.js | 16 - src/legacy/Popover/examples/Contained.js | 14 - src/legacy/Popover/examples/Default.js | 65 - src/legacy/Popover/examples/Delay.js | 16 - src/legacy/Popover/examples/Direction.js | 33 - src/legacy/Popover/examples/KitchenSink.js | 33 - .../Popover/examples/KitchenSink.stories.tsx | 12 - src/legacy/Popover/examples/Offset.js | 16 - src/legacy/Popover/examples/Overflow.js | 31 - src/legacy/Popover/examples/index.js | 9 - src/legacy/Popover/index.js | 416 - src/legacy/Popover/tests/index.spec.js | 509 - src/legacy/Popover/tests/index.spec.js.snap | 35 - src/legacy/SelectableContext/index.js | 14 - src/legacy/SocialList/index.js | 28 - src/legacy/SocialList/tests/index.spec.js | 22 - .../SocialList/tests/index.spec.js.snap | 9 - src/legacy/SpaceListItem/examples/Default.js | 85 - .../SpaceListItem/examples/KitchenSink.js | 13 - .../examples/KitchenSink.stories.tsx | 12 - .../examples/SpaceListMeeting.js | 58 - src/legacy/SpaceListItem/examples/index.js | 3 - src/legacy/SpaceListItem/index.js | 271 - src/legacy/SpaceListItem/tests/index.spec.js | 386 - .../SpaceListItem/tests/index.spec.js.snap | 178 - src/legacy/Tooltip/examples/Content.js | 21 - src/legacy/Tooltip/examples/Default.js | 26 - src/legacy/Tooltip/examples/Delay.js | 14 - src/legacy/Tooltip/examples/Direction.js | 101 - src/legacy/Tooltip/examples/KitchenSink.js | 15 - .../Tooltip/examples/KitchenSink.stories.tsx | 12 - src/legacy/Tooltip/examples/index.js | 5 - src/legacy/Tooltip/index.js | 66 - src/legacy/Tooltip/tests/index.spec.js | 219 - src/legacy/Tooltip/tests/index.spec.js.snap | 45 - src/legacy/index.js | 27 - src/legacy/utils/dateUtils/index.js | 100 - src/legacy/utils/getColorValue/index.js | 83 - src/legacy/utils/index.js | 4 - src/legacy/utils/prefixer/index.js | 1 - .../utils/requestAnimationFrame/index.js | 31 - .../utils/requestAnimationTimeout/index.js | 25 - src/legacy/utils/snakeCase/index.js | 3 - 755 files changed, 71 insertions(+), 70919 deletions(-) delete mode 100644 config/plop/plop-templates/legacy-component/KitchenSink.stories.tsx.hbs delete mode 100644 scss/components/accordion/accordion.scss delete mode 100644 scss/components/accordion/examples/default.html delete mode 100644 scss/components/accordion/examples/multi-open.html delete mode 100644 scss/components/accordion/examples/pre-selected-open.html delete mode 100644 scss/components/accordion/mixins.scss delete mode 100644 scss/components/accordion/module.scss delete mode 100644 scss/components/accordion/settings.scss delete mode 100644 scss/components/activity-button/activity-button.scss delete mode 100644 scss/components/activity-button/examples/default.html delete mode 100644 scss/components/activity-button/examples/large.html delete mode 100644 scss/components/activity-button/examples/size-56.html delete mode 100644 scss/components/activity-button/module.scss delete mode 100644 scss/components/alert-banner/alert-banner.scss delete mode 100644 scss/components/alert-banner/examples/default.html delete mode 100644 scss/components/alert-banner/examples/error.html delete mode 100644 scss/components/alert-banner/examples/warning.html delete mode 100644 scss/components/alert-banner/module.scss delete mode 100644 scss/components/alert-banner/settings.scss delete mode 100644 scss/components/alert-call/examples/default.html delete mode 100644 scss/components/alert-call/examples/device-list.html delete mode 100644 scss/components/alert-call/examples/device.html delete mode 100644 scss/components/alert-call/examples/number.html delete mode 100644 scss/components/alert-meeting/examples/default.html delete mode 100644 scss/components/alert-meeting/examples/multiple.html delete mode 100644 scss/components/alert/alert.scss delete mode 100644 scss/components/alert/examples/default.html delete mode 100644 scss/components/alert/examples/error.html delete mode 100644 scss/components/alert/examples/success.html delete mode 100644 scss/components/alert/examples/warning.html delete mode 100644 scss/components/alert/mixins.scss delete mode 100644 scss/components/alert/module.scss delete mode 100644 scss/components/alert/settings.scss delete mode 100644 scss/components/avatar/avatar.scss delete mode 100644 scss/components/avatar/composite-avatar.scss delete mode 100644 scss/components/avatar/examples/active.html delete mode 100644 scss/components/avatar/examples/bot.html delete mode 100644 scss/components/avatar/examples/composite.html delete mode 100644 scss/components/avatar/examples/dark.html delete mode 100644 scss/components/avatar/examples/default.html delete mode 100644 scss/components/avatar/examples/failure.html delete mode 100644 scss/components/avatar/examples/group.html delete mode 100644 scss/components/avatar/examples/inactive.html delete mode 100644 scss/components/avatar/examples/notification.html delete mode 100644 scss/components/avatar/examples/self.html delete mode 100644 scss/components/avatar/examples/status.html delete mode 100644 scss/components/avatar/examples/typing.html delete mode 100644 scss/components/avatar/mixins.scss delete mode 100644 scss/components/avatar/module.scss delete mode 100644 scss/components/avatar/settings.scss delete mode 100644 scss/components/badge/badge.scss delete mode 100644 scss/components/badge/examples/dark.html delete mode 100644 scss/components/badge/examples/default.html delete mode 100644 scss/components/badge/examples/round.html delete mode 100644 scss/components/badge/mixins.scss delete mode 100644 scss/components/badge/module.scss delete mode 100644 scss/components/badge/settings.scss delete mode 100644 scss/components/blog-article/examples/default.html delete mode 100644 scss/components/blog-list/examples/default.html delete mode 100644 scss/components/breadcrumbs/breadcrumbs.scss delete mode 100644 scss/components/breadcrumbs/examples/default.html delete mode 100644 scss/components/breadcrumbs/mixins.scss delete mode 100644 scss/components/breadcrumbs/module.scss delete mode 100644 scss/components/breadcrumbs/settings.scss delete mode 100644 scss/components/button-group/button-group.scss delete mode 100644 scss/components/button-group/examples/dark.html delete mode 100644 scss/components/button-group/examples/default.html delete mode 100644 scss/components/button-group/examples/highlight-false.html delete mode 100644 scss/components/button-group/examples/justified-false.html delete mode 100644 scss/components/button-group/examples/pill.html delete mode 100644 scss/components/button-group/module.scss delete mode 100644 scss/components/button-group/settings.scss delete mode 100644 scss/components/button/button.scss delete mode 100644 scss/components/button/examples/circle.html delete mode 100644 scss/components/button/examples/color.html delete mode 100644 scss/components/button/examples/dark.html delete mode 100644 scss/components/button/examples/default.html delete mode 100644 scss/components/button/examples/disabled.html delete mode 100644 scss/components/button/examples/expanded.html delete mode 100644 scss/components/button/examples/loading.html delete mode 100644 scss/components/button/examples/size.html delete mode 100644 scss/components/button/examples/tags.html delete mode 100644 scss/components/button/mixins.scss delete mode 100644 scss/components/button/module.scss delete mode 100644 scss/components/button/settings.scss delete mode 100644 scss/components/call-control/examples/active.html delete mode 100644 scss/components/call-control/examples/cancel.html delete mode 100644 scss/components/call-control/examples/default.html delete mode 100644 scss/components/call-control/examples/disable.html delete mode 100644 scss/components/card/card.scss delete mode 100644 scss/components/card/examples/clickable.html delete mode 100644 scss/components/card/examples/content.html delete mode 100644 scss/components/card/examples/content2.html delete mode 100644 scss/components/card/examples/default.html delete mode 100644 scss/components/card/module.scss delete mode 100644 scss/components/card/settings.scss delete mode 100644 scss/components/cdk-overlay/cdk-overlay.scss delete mode 100644 scss/components/checkbox/checkbox.scss delete mode 100644 scss/components/checkbox/examples/dark.html delete mode 100644 scss/components/checkbox/examples/default.html delete mode 100644 scss/components/checkbox/examples/disabled.html delete mode 100644 scss/components/checkbox/examples/group.html delete mode 100644 scss/components/checkbox/examples/indeterminate.html delete mode 100644 scss/components/checkbox/examples/kitchen-sink.html delete mode 100644 scss/components/checkbox/examples/nested.html delete mode 100644 scss/components/checkbox/mixins.scss delete mode 100644 scss/components/checkbox/module.scss delete mode 100644 scss/components/checkbox/settings.scss delete mode 100644 scss/components/chip/chip.scss delete mode 100644 scss/components/chip/examples/default.html delete mode 100644 scss/components/chip/examples/file.html delete mode 100644 scss/components/chip/examples/recording.html delete mode 100644 scss/components/chip/module.scss delete mode 100644 scss/components/close-wrapper/close-wrapper.scss delete mode 100644 scss/components/close-wrapper/module.scss delete mode 100644 scss/components/close/close.scss delete mode 100644 scss/components/close/module.scss delete mode 100644 scss/components/close/settings.scss delete mode 100644 scss/components/coachmark/coachmark.scss delete mode 100644 scss/components/coachmark/examples/content.html delete mode 100644 scss/components/coachmark/examples/default.html delete mode 100644 scss/components/coachmark/module.scss delete mode 100644 scss/components/collapse-button/collapse-button.scss delete mode 100644 scss/components/collapse-button/examples/collapsed.html delete mode 100644 scss/components/collapse-button/examples/expanded.html delete mode 100644 scss/components/collapse-button/module.scss delete mode 100644 scss/components/collapse-button/settings.scss delete mode 100644 scss/components/combo-box/combo-box.scss delete mode 100644 scss/components/combo-box/examples/clear.html delete mode 100644 scss/components/combo-box/examples/dark.html delete mode 100644 scss/components/combo-box/examples/default.html delete mode 100644 scss/components/combo-box/module.scss delete mode 100644 scss/components/combo-box/settings.scss delete mode 100644 scss/components/components.scss delete mode 100644 scss/components/content-item/content-item.scss delete mode 100644 scss/components/content-item/mixins.scss delete mode 100644 scss/components/content-item/module.scss delete mode 100644 scss/components/data-table/data-table.scss delete mode 100644 scss/components/data-table/examples/avatar.html delete mode 100644 scss/components/data-table/examples/default.html delete mode 100644 scss/components/data-table/examples/multi-select.html delete mode 100644 scss/components/data-table/examples/multiselect-scroll-resize.html delete mode 100644 scss/components/data-table/examples/resize.html delete mode 100644 scss/components/data-table/examples/scroll.html delete mode 100644 scss/components/data-table/examples/selection.html delete mode 100644 scss/components/data-table/examples/sort.html delete mode 100644 scss/components/data-table/examples/zebra.html delete mode 100644 scss/components/date-picker/date-picker.scss delete mode 100644 scss/components/date-picker/examples/dark.html delete mode 100644 scss/components/date-picker/examples/default.html delete mode 100644 scss/components/date-picker/module.scss delete mode 100644 scss/components/date-picker/settings.scss delete mode 100644 scss/components/date-range-picker/date-range-picker.scss delete mode 100644 scss/components/date-range-picker/examples/dark.html delete mode 100644 scss/components/date-range-picker/examples/default.html delete mode 100644 scss/components/date-range-picker/module.scss delete mode 100644 scss/components/date-range-picker/settings.scss delete mode 100644 scss/components/dialog/examples/default.html delete mode 100644 scss/components/drawer/drawer.scss delete mode 100644 scss/components/drawer/examples/default.html delete mode 100644 scss/components/drawer/examples/openfrom.html delete mode 100644 scss/components/drawer/module.scss delete mode 100644 scss/components/drawer/settings.scss delete mode 100644 scss/components/editable-textfield/editable-textfield.scss delete mode 100644 scss/components/editable-textfield/examples/dark.html delete mode 100644 scss/components/editable-textfield/examples/default.html delete mode 100644 scss/components/footer/footer.scss delete mode 100644 scss/components/footer/settings.scss delete mode 100644 scss/components/forms/forms.scss delete mode 100644 scss/components/forms/mixins.scss delete mode 100644 scss/components/forms/settings.scss delete mode 100644 scss/components/hero/hero.scss delete mode 100644 scss/components/icon/examples/color.html delete mode 100644 scss/components/icon/examples/default.html delete mode 100644 scss/components/icon/examples/white.html delete mode 100644 scss/components/icon/icon.scss delete mode 100644 scss/components/icon/settings.scss delete mode 100644 scss/components/input-phone-number/input-phone-number.scss delete mode 100644 scss/components/input-phone-number/module.scss delete mode 100644 scss/components/input-phone-number/settings.scss delete mode 100644 scss/components/input-search/examples/default.html delete mode 100644 scss/components/input-search/examples/loading.html delete mode 100644 scss/components/input-search/examples/pill.html delete mode 100644 scss/components/input/examples/clear.html delete mode 100644 scss/components/input/examples/dark.html delete mode 100644 scss/components/input/examples/default.html delete mode 100644 scss/components/input/examples/disabled.html delete mode 100644 scss/components/input/examples/error.html delete mode 100644 scss/components/input/examples/help-text.html delete mode 100644 scss/components/input/examples/kitchen-sink.html delete mode 100644 scss/components/input/examples/nested .html delete mode 100644 scss/components/input/examples/read-only.html delete mode 100644 scss/components/input/examples/secondary-label.html delete mode 100644 scss/components/input/examples/success.html delete mode 100644 scss/components/input/examples/text-area.html delete mode 100644 scss/components/input/examples/validation.html delete mode 100644 scss/components/input/examples/warning.html delete mode 100644 scss/components/input/input.scss delete mode 100644 scss/components/input/mixins.scss delete mode 100644 scss/components/input/module.scss delete mode 100644 scss/components/input/settings.scss delete mode 100644 scss/components/label/label.scss delete mode 100644 scss/components/label/mixins.scss delete mode 100644 scss/components/label/module.scss delete mode 100644 scss/components/label/settings.scss delete mode 100644 scss/components/lightbox/examples/default.html delete mode 100644 scss/components/lightbox/examples/multiple .html delete mode 100755 scss/components/lightbox/lightbox.scss delete mode 100755 scss/components/lightbox/mixins.scss delete mode 100644 scss/components/lightbox/module.scss delete mode 100755 scss/components/lightbox/settings.scss delete mode 100644 scss/components/link/examples/default.html delete mode 100644 scss/components/link/link.scss delete mode 100644 scss/components/link/mixins.scss delete mode 100644 scss/components/link/module.scss delete mode 100644 scss/components/list-item/examples/dark .html delete mode 100644 scss/components/list-item/examples/default.html delete mode 100644 scss/components/list-item/examples/list-item-header.html delete mode 100644 scss/components/list-item/examples/list-item-section.html delete mode 100644 scss/components/list-item/examples/list-item-separator.html delete mode 100644 scss/components/list-item/list-item.scss delete mode 100644 scss/components/list-item/mixins.scss delete mode 100644 scss/components/list-item/module.scss delete mode 100644 scss/components/list-item/settings.scss delete mode 100644 scss/components/list-separator/list-separator.scss delete mode 100644 scss/components/list-separator/module.scss delete mode 100644 scss/components/loader/examples/check.html delete mode 100644 scss/components/loader/examples/default.html delete mode 100644 scss/components/loader/examples/determinate.html delete mode 100644 scss/components/loader/examples/percentage.html delete mode 100644 scss/components/loader/loader.scss delete mode 100644 scss/components/loader/mixins.scss delete mode 100644 scss/components/loader/module.scss delete mode 100644 scss/components/loader/placeholders.scss delete mode 100644 scss/components/loader/settings.scss delete mode 100644 scss/components/loading/loading.scss delete mode 100644 scss/components/loading/module.scss delete mode 100644 scss/components/meeting-list/examples/default.html delete mode 100644 scss/components/meeting-list/list-item-meeting.scss delete mode 100644 scss/components/meeting-list/module.scss delete mode 100644 scss/components/meeting-list/settings.scss delete mode 100644 scss/components/menu/examples/custom-menu-items.html delete mode 100644 scss/components/menu/examples/default.html delete mode 100644 scss/components/menu/examples/sub-menu.html delete mode 100644 scss/components/menu/menu.scss delete mode 100644 scss/components/menu/module.scss delete mode 100644 scss/components/menu/settings.scss delete mode 100644 scss/components/modal/examples/default.html delete mode 100644 scss/components/modal/examples/full.html delete mode 100644 scss/components/modal/examples/large.html delete mode 100644 scss/components/modal/examples/small.html delete mode 100644 scss/components/modal/mixins.scss delete mode 100644 scss/components/modal/modal.scss delete mode 100644 scss/components/modal/module.scss delete mode 100644 scss/components/modal/settings.scss delete mode 100644 scss/components/overlay/event-overlay.scss delete mode 100644 scss/components/overlay/module.scss delete mode 100644 scss/components/overlay/settings.scss delete mode 100644 scss/components/page-header/examples/default.html delete mode 100644 scss/components/page-header/examples/page-sub-header.html delete mode 100644 scss/components/page-header/mixins.scss delete mode 100644 scss/components/page-header/module.scss delete mode 100644 scss/components/page-header/page-header-sites.scss delete mode 100644 scss/components/page-header/settings.scss delete mode 100644 scss/components/pagination/examples/centered .html delete mode 100644 scss/components/pagination/examples/default.html delete mode 100644 scss/components/pagination/mixins.scss delete mode 100644 scss/components/pagination/module.scss delete mode 100644 scss/components/pagination/pagination.scss delete mode 100644 scss/components/pagination/settings.scss delete mode 100644 scss/components/panel/examples/default.html delete mode 100644 scss/components/panel/mixins.scss delete mode 100644 scss/components/panel/module.scss delete mode 100644 scss/components/panel/panel.scss delete mode 100644 scss/components/panel/settings.scss delete mode 100644 scss/components/popover/examples/arrow.html delete mode 100644 scss/components/popover/examples/contained.html delete mode 100644 scss/components/popover/examples/default.html delete mode 100644 scss/components/popover/examples/delay.html delete mode 100644 scss/components/popover/examples/direction.html delete mode 100644 scss/components/popover/examples/offset.html delete mode 100644 scss/components/popover/examples/overflow.html delete mode 100644 scss/components/popover/module.scss delete mode 100644 scss/components/popover/popover.scss delete mode 100644 scss/components/popover/settings.scss delete mode 100644 scss/components/progress/examples/default.html delete mode 100644 scss/components/progress/mixins.scss delete mode 100644 scss/components/progress/module.scss delete mode 100644 scss/components/progress/progress.scss delete mode 100644 scss/components/progress/settings.scss delete mode 100644 scss/components/radio/examples/dark.html delete mode 100644 scss/components/radio/examples/default.html delete mode 100644 scss/components/radio/examples/disabled.html delete mode 100644 scss/components/radio/examples/group.html delete mode 100644 scss/components/radio/examples/nested.html delete mode 100644 scss/components/radio/mixins.scss delete mode 100644 scss/components/radio/module.scss delete mode 100644 scss/components/radio/radio.scss delete mode 100644 scss/components/radio/settings.scss delete mode 100644 scss/components/select/examples/dark.html delete mode 100644 scss/components/select/examples/default.html delete mode 100644 scss/components/select/examples/filter.html delete mode 100644 scss/components/select/examples/multi-select.html delete mode 100644 scss/components/select/examples/nested.html delete mode 100644 scss/components/select/examples/objects.html delete mode 100644 scss/components/select/examples/secondary-label.html delete mode 100644 scss/components/select/examples/validation.html delete mode 100644 scss/components/select/module.scss delete mode 100644 scss/components/select/select.scss delete mode 100644 scss/components/select/settings.scss delete mode 100644 scss/components/sidebar/examples/dark.html delete mode 100644 scss/components/sidebar/examples/default.html delete mode 100644 scss/components/sidebar/examples/page-level.html delete mode 100644 scss/components/sidebar/examples/with-icons.html delete mode 100644 scss/components/sidebar/module.scss delete mode 100644 scss/components/sidebar/sidebar.scss delete mode 100644 scss/components/slider/examples/cross.html delete mode 100644 scss/components/slider/examples/default.html delete mode 100644 scss/components/slider/examples/step.html delete mode 100644 scss/components/slider/examples/two-handles.html delete mode 100644 scss/components/slider/module.scss delete mode 100644 scss/components/slider/settings.scss delete mode 100644 scss/components/slider/slider.scss delete mode 100644 scss/components/social-list/examples/default.html delete mode 100644 scss/components/social-list/module.scss delete mode 100644 scss/components/social-list/social-list.scss delete mode 100644 scss/components/space-list/examples/default.html delete mode 100644 scss/components/space-list/examples/space-list-meeting.html delete mode 100644 scss/components/space-list/module.scss delete mode 100644 scss/components/space-list/space-list-item.scss delete mode 100644 scss/components/stepper/module.scss delete mode 100644 scss/components/stepper/stepper.scss delete mode 100644 scss/components/tabs/examples/default.html delete mode 100644 scss/components/tabs/examples/justified.html delete mode 100644 scss/components/tabs/examples/pills.html delete mode 100644 scss/components/tabs/examples/vertical.html delete mode 100644 scss/components/tabs/module.scss delete mode 100644 scss/components/tabs/settings.scss delete mode 100644 scss/components/tabs/tabs.scss delete mode 100644 scss/components/time-picker/examples/24-hour.html delete mode 100644 scss/components/time-picker/examples/30-minute-steps.html delete mode 100644 scss/components/time-picker/examples/dark.html delete mode 100644 scss/components/time-picker/examples/default.html delete mode 100644 scss/components/time-picker/examples/validation.html delete mode 100644 scss/components/time-picker/module.scss delete mode 100644 scss/components/time-picker/time-picker.scss delete mode 100644 scss/components/toggle-switch/examples/dark.html delete mode 100644 scss/components/toggle-switch/examples/default.html delete mode 100644 scss/components/toggle-switch/examples/filled-dark.html delete mode 100644 scss/components/toggle-switch/examples/filled.html delete mode 100644 scss/components/toggle-switch/mixins.scss delete mode 100644 scss/components/toggle-switch/module.scss delete mode 100644 scss/components/toggle-switch/settings.scss delete mode 100644 scss/components/toggle-switch/toggle-switch.scss delete mode 100644 scss/components/tooltip/examples/content.html delete mode 100644 scss/components/tooltip/examples/default.html delete mode 100644 scss/components/tooltip/examples/delay.html delete mode 100644 scss/components/tooltip/examples/direction.html delete mode 100644 scss/components/tooltip/module.scss delete mode 100644 scss/components/tooltip/settings.scss delete mode 100644 scss/components/tooltip/tooltip.scss delete mode 100644 scss/components/top-bar/examples/blue.html delete mode 100644 scss/components/top-bar/examples/default.html delete mode 100644 scss/components/top-bar/examples/light.html delete mode 100644 scss/components/top-bar/module.scss delete mode 100644 scss/components/top-bar/settings.scss delete mode 100644 scss/components/top-bar/top-bar.scss delete mode 100644 scss/generic/components.scss delete mode 100644 scss/layouts/block-grid/block-grid.scss delete mode 100644 scss/layouts/block-grid/mixins.scss delete mode 100644 scss/layouts/block-grid/module.scss delete mode 100644 scss/layouts/block-grid/settings.scss delete mode 100644 scss/layouts/layout-grid/examples/advanced.html delete mode 100644 scss/layouts/layout-grid/examples/block-grid-column.html delete mode 100644 scss/layouts/layout-grid/examples/block-grid.html delete mode 100644 scss/layouts/layout-grid/examples/centered.html delete mode 100644 scss/layouts/layout-grid/examples/collapse-uncollapse.html delete mode 100644 scss/layouts/layout-grid/examples/complex.html delete mode 100644 scss/layouts/layout-grid/examples/default.html delete mode 100644 scss/layouts/layout-grid/examples/incomplete.html delete mode 100644 scss/layouts/layout-grid/examples/medium.html delete mode 100644 scss/layouts/layout-grid/examples/offsets.html delete mode 100644 scss/layouts/layout-grid/examples/small.html delete mode 100644 scss/layouts/layout-grid/examples/source-ordering.html delete mode 100644 scss/layouts/layout-grid/layout-grid.scss delete mode 100644 scss/layouts/layout-grid/module.scss delete mode 100644 scss/layouts/layouts.scss delete mode 100644 scss/layouts/sites.scss delete mode 100644 scss/momentum-ui-components.scss delete mode 100644 scss/momentum-ui-ng.scss delete mode 100644 scss/momentum-ui-sites.scss delete mode 100644 scss/momentum-ui.scss delete mode 100644 scss/ng/accordion.scss delete mode 100644 scss/ng/alert-banner.scss delete mode 100644 scss/ng/avatar.scss delete mode 100644 scss/ng/badge.scss delete mode 100644 scss/ng/breadcrumbs.scss delete mode 100644 scss/ng/button.scss delete mode 100644 scss/ng/call-destination.scss delete mode 100644 scss/ng/card-member.scss delete mode 100644 scss/ng/card-number.scss delete mode 100644 scss/ng/card.scss delete mode 100644 scss/ng/combo-box.scss delete mode 100644 scss/ng/datepicker.scss delete mode 100644 scss/ng/dragdrop.scss delete mode 100644 scss/ng/dropdown.scss delete mode 100644 scss/ng/formly.scss delete mode 100644 scss/ng/grid-filter.scss delete mode 100644 scss/ng/header-push.scss delete mode 100644 scss/ng/header.scss delete mode 100644 scss/ng/login.scss delete mode 100644 scss/ng/messagebox.scss delete mode 100644 scss/ng/nav-left.scss delete mode 100644 scss/ng/nav-side-admin.scss delete mode 100644 scss/ng/ng-grid.scss delete mode 100644 scss/ng/ng.scss delete mode 100644 scss/ng/notification.scss delete mode 100644 scss/ng/overlay-panel.scss delete mode 100644 scss/ng/page-header-admin.scss delete mode 100644 scss/ng/page-sub-header.scss delete mode 100644 scss/ng/phonenumber.scss delete mode 100644 scss/ng/popover.scss delete mode 100644 scss/ng/reveal.scss delete mode 100644 scss/ng/search-filter.scss delete mode 100644 scss/ng/select.scss delete mode 100644 scss/ng/settings/settings.js delete mode 100644 scss/ng/settings/settings.scss delete mode 100644 scss/ng/settings/sidepanel.scss delete mode 100644 scss/ng/settings/slider.scss delete mode 100644 scss/ng/settings/topbar.scss delete mode 100644 scss/ng/setup-assistant.scss delete mode 100644 scss/ng/side-panel.scss delete mode 100644 scss/ng/table.scss delete mode 100644 scss/ng/tabs.scss delete mode 100644 scss/ng/timepicker.scss delete mode 100644 scss/ng/tokenfield.scss delete mode 100644 scss/ng/tooltip-ng.scss delete mode 100644 scss/ng/topbar-admin.scss delete mode 100644 scss/ng/topbar-user.scss delete mode 100644 scss/ng/topbar.scss delete mode 100644 scss/ng/topnav.scss delete mode 100644 scss/ng/typeahead.scss delete mode 100644 scss/ng/ui-grid.scss delete mode 100644 scss/settings/list-group.scss delete mode 100644 scss/tools/mixins/grid-framework.scss delete mode 100644 scss/tools/mixins/grid.scss delete mode 100644 scss/tools/mixins/list-group.scss delete mode 100644 scss/tools/placeholders/page-layout.scss delete mode 100644 scss/utilities/component-animation.scss delete mode 100644 scss/utilities/core.scss delete mode 100644 scss/utilities/cursor.scss delete mode 100644 scss/utilities/ellipsis.scss delete mode 100644 scss/utilities/image.scss delete mode 100644 scss/utilities/page-layout.scss delete mode 100644 scss/utilities/responsive.scss delete mode 100644 scss/utilities/spacing.scss delete mode 100644 scss/utilities/utilities.scss delete mode 100644 src/examples/App.js delete mode 100644 src/examples/InsertExample.js delete mode 100644 src/examples/ThemeSelect/index.js delete mode 100644 src/examples/containers/AsyncComponent/index.js delete mode 100644 src/examples/containers/KitchenSink/index.js delete mode 100644 src/examples/containers/Playground/index.js delete mode 100644 src/examples/containers/Sidebar/index.js delete mode 100644 src/examples/data/components.js delete mode 100644 src/examples/favicon.ico delete mode 100755 src/examples/index.ejs delete mode 100644 src/examples/index.js delete mode 100644 src/examples/styles.scss delete mode 100644 src/examples/webpack-public-path.js rename src/{examples/ThemeSelect/themes.js => helpers/mdl-token-examples.js} (100%) delete mode 100644 src/legacy/AlertBanner/examples/Default.js delete mode 100644 src/legacy/AlertBanner/examples/Error.js delete mode 100644 src/legacy/AlertBanner/examples/KitchenSink.js delete mode 100644 src/legacy/AlertBanner/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/AlertBanner/examples/Warning.js delete mode 100644 src/legacy/AlertBanner/examples/index.js delete mode 100644 src/legacy/AlertBanner/index.js delete mode 100644 src/legacy/AlertBanner/tests/index.spec.js delete mode 100644 src/legacy/AlertBanner/tests/index.spec.js.snap delete mode 100644 src/legacy/Avatar/examples/Active.js delete mode 100644 src/legacy/Avatar/examples/Bot.js delete mode 100644 src/legacy/Avatar/examples/Default.js delete mode 100644 src/legacy/Avatar/examples/Failure.js delete mode 100644 src/legacy/Avatar/examples/Group.js delete mode 100644 src/legacy/Avatar/examples/Inactive.js delete mode 100644 src/legacy/Avatar/examples/KitchenSink.js delete mode 100644 src/legacy/Avatar/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Avatar/examples/Notification.js delete mode 100644 src/legacy/Avatar/examples/Self.js delete mode 100644 src/legacy/Avatar/examples/Status.js delete mode 100644 src/legacy/Avatar/examples/Typing.js delete mode 100644 src/legacy/Avatar/examples/index.js delete mode 100644 src/legacy/Avatar/index.js delete mode 100644 src/legacy/Avatar/tests/index.spec.js delete mode 100644 src/legacy/Avatar/tests/index.spec.js.snap delete mode 100644 src/legacy/Badge/examples/Default.js delete mode 100644 src/legacy/Badge/examples/KitchenSink.js delete mode 100644 src/legacy/Badge/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Badge/examples/Round.js delete mode 100644 src/legacy/Badge/examples/index.js delete mode 100644 src/legacy/Badge/index.js delete mode 100644 src/legacy/Badge/tests/index.spec.js delete mode 100644 src/legacy/Badge/tests/index.spec.js.snap delete mode 100644 src/legacy/Button/examples/Circle.js delete mode 100644 src/legacy/Button/examples/Color.js delete mode 100644 src/legacy/Button/examples/Default.js delete mode 100644 src/legacy/Button/examples/Disabled.js delete mode 100644 src/legacy/Button/examples/Expanded.js delete mode 100644 src/legacy/Button/examples/FileWhiteboard.js delete mode 100644 src/legacy/Button/examples/KitchenSink.js delete mode 100644 src/legacy/Button/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Button/examples/Loading.js delete mode 100644 src/legacy/Button/examples/Size.js delete mode 100644 src/legacy/Button/examples/Tags.js delete mode 100644 src/legacy/Button/examples/index.js delete mode 100644 src/legacy/Button/index.js delete mode 100644 src/legacy/Button/tests/index.spec.js delete mode 100644 src/legacy/Button/tests/index.spec.js.snap delete mode 100644 src/legacy/ButtonGroup/examples/Default.js delete mode 100644 src/legacy/ButtonGroup/examples/HighlightFalse.js delete mode 100644 src/legacy/ButtonGroup/examples/JustifiedFalse.js delete mode 100644 src/legacy/ButtonGroup/examples/KitchenSink.js delete mode 100644 src/legacy/ButtonGroup/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/ButtonGroup/examples/Pill.js delete mode 100644 src/legacy/ButtonGroup/examples/index.js delete mode 100644 src/legacy/ButtonGroup/index.js delete mode 100644 src/legacy/ButtonGroup/tests/index.spec.js delete mode 100644 src/legacy/ButtonGroup/tests/index.spec.js.snap delete mode 100644 src/legacy/ButtonGroupContext/index.js delete mode 100644 src/legacy/Checkbox/index.js delete mode 100644 src/legacy/Checkbox/tests/index.spec.js delete mode 100644 src/legacy/Checkbox/tests/index.spec.js.snap delete mode 100644 src/legacy/CloseIcon/index.js delete mode 100644 src/legacy/CloseIcon/tests/index.spec.js delete mode 100644 src/legacy/CloseIcon/tests/index.spec.js.snap delete mode 100644 src/legacy/ContentItem/ChatContent/index.js delete mode 100644 src/legacy/ContentItem/FileContent/index.js delete mode 100644 src/legacy/ContentItem/IconContent/index.js delete mode 100644 src/legacy/ContentItem/examples/Aspect.js delete mode 100644 src/legacy/ContentItem/examples/Default.js delete mode 100644 src/legacy/ContentItem/examples/Failed.js delete mode 100644 src/legacy/ContentItem/examples/File.js delete mode 100644 src/legacy/ContentItem/examples/Gif.js delete mode 100644 src/legacy/ContentItem/examples/Icon.js delete mode 100644 src/legacy/ContentItem/examples/KitchenSink.js delete mode 100644 src/legacy/ContentItem/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/ContentItem/examples/Size.js delete mode 100644 src/legacy/ContentItem/examples/Spinner.js delete mode 100644 src/legacy/ContentItem/examples/index.js delete mode 100644 src/legacy/ContentItem/index.js delete mode 100644 src/legacy/ContentItem/tests/index.spec.js delete mode 100644 src/legacy/ContentItem/tests/index.spec.js.snap delete mode 100644 src/legacy/DeviceListCall/index.js delete mode 100644 src/legacy/DeviceListCall/tests/index.spec.js delete mode 100644 src/legacy/DeviceListCall/tests/index.spec.js.snap delete mode 100644 src/legacy/EventOverlay/index.js delete mode 100644 src/legacy/EventOverlay/tests/index.spec.js delete mode 100644 src/legacy/EventOverlay/tests/index.spec.js.snap delete mode 100644 src/legacy/Icon/examples/ButtonIcon.js delete mode 100644 src/legacy/Icon/examples/Color.js delete mode 100644 src/legacy/Icon/examples/Default.js delete mode 100644 src/legacy/Icon/examples/KitchenSink.js delete mode 100644 src/legacy/Icon/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Icon/examples/White.js delete mode 100644 src/legacy/Icon/examples/index.js delete mode 100644 src/legacy/Icon/index.js delete mode 100644 src/legacy/Icon/tests/index.spec.js delete mode 100644 src/legacy/Icon/tests/index.spec.js.snap delete mode 100644 src/legacy/Input/examples/Clear.js delete mode 100644 src/legacy/Input/examples/Dark.js delete mode 100644 src/legacy/Input/examples/Default.js delete mode 100644 src/legacy/Input/examples/Disabled.js delete mode 100644 src/legacy/Input/examples/Error.js delete mode 100644 src/legacy/Input/examples/HelpText.js delete mode 100644 src/legacy/Input/examples/KitchenSink.js delete mode 100644 src/legacy/Input/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Input/examples/Nested.js delete mode 100644 src/legacy/Input/examples/ReadOnly.js delete mode 100644 src/legacy/Input/examples/SecondaryLabel.js delete mode 100644 src/legacy/Input/examples/Success.js delete mode 100644 src/legacy/Input/examples/TextArea.js delete mode 100644 src/legacy/Input/examples/Validation.js delete mode 100644 src/legacy/Input/examples/Warning.js delete mode 100644 src/legacy/Input/examples/index.js delete mode 100644 src/legacy/Input/index.js delete mode 100644 src/legacy/Input/tests/index.spec.js delete mode 100644 src/legacy/Input/tests/index.spec.js.snap delete mode 100644 src/legacy/InputHelper/index.js delete mode 100644 src/legacy/InputHelper/tests/index.spec.js delete mode 100644 src/legacy/InputHelper/tests/index.spec.js.snap delete mode 100644 src/legacy/InputMessage/index.js delete mode 100644 src/legacy/InputMessage/tests/input.spec.js delete mode 100644 src/legacy/InputMessage/tests/input.spec.js.snap delete mode 100644 src/legacy/InputSection/index.js delete mode 100644 src/legacy/InputSection/tests/index.spec.js delete mode 100644 src/legacy/InputSection/tests/index.spec.js.snap delete mode 100644 src/legacy/Label/index.js delete mode 100644 src/legacy/Label/tests/index.spec.js delete mode 100644 src/legacy/Label/tests/index.spec.js.snap delete mode 100644 src/legacy/Lightbox/examples/Default.js delete mode 100644 src/legacy/Lightbox/examples/KitchenSink.js delete mode 100644 src/legacy/Lightbox/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Lightbox/examples/Multiple.js delete mode 100755 src/legacy/Lightbox/examples/cisco-webex-lockup-blue.png delete mode 100644 src/legacy/Lightbox/examples/index.js delete mode 100644 src/legacy/Lightbox/examples/momentum.jpg delete mode 100644 src/legacy/Lightbox/index.js delete mode 100644 src/legacy/Lightbox/tests/index.spec.js delete mode 100644 src/legacy/Lightbox/tests/index.spec.js.snap delete mode 100644 src/legacy/Link/examples/Colored.js delete mode 100644 src/legacy/Link/examples/Default.js delete mode 100644 src/legacy/Link/examples/KitchenSink.js delete mode 100644 src/legacy/Link/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Link/examples/index.js delete mode 100644 src/legacy/Link/index.js delete mode 100644 src/legacy/Link/tests/index.spec.js delete mode 100644 src/legacy/Link/tests/index.spec.js.snap delete mode 100644 src/legacy/List/examples/Default.js delete mode 100644 src/legacy/List/examples/KitchenSink.js delete mode 100644 src/legacy/List/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/List/examples/ListItemHeader.js delete mode 100644 src/legacy/List/examples/ListItemSeparator.js delete mode 100644 src/legacy/List/examples/ListWithEventBubbling.js delete mode 100644 src/legacy/List/examples/index.js delete mode 100644 src/legacy/List/index.js delete mode 100644 src/legacy/List/tests/index.spec.js delete mode 100644 src/legacy/List/tests/index.spec.js.snap delete mode 100644 src/legacy/ListContext/index.js delete mode 100644 src/legacy/ListItem/examples/Default.js delete mode 100644 src/legacy/ListItem/examples/KitchenSink.js delete mode 100644 src/legacy/ListItem/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/ListItem/examples/ListItemSections.js delete mode 100644 src/legacy/ListItem/examples/ListItemSeparator.js delete mode 100644 src/legacy/ListItem/examples/TabbableChildren.js delete mode 100644 src/legacy/ListItem/examples/index.js delete mode 100644 src/legacy/ListItem/index.js delete mode 100644 src/legacy/ListItem/tests/index.spec.js delete mode 100644 src/legacy/ListItem/tests/index.spec.js.snap delete mode 100644 src/legacy/ListItemHeader/examples/Default.js delete mode 100644 src/legacy/ListItemHeader/examples/KitchenSink.js delete mode 100644 src/legacy/ListItemHeader/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/ListItemHeader/examples/index.js delete mode 100644 src/legacy/ListItemHeader/index.js delete mode 100644 src/legacy/ListItemHeader/tests/index.spec.js delete mode 100644 src/legacy/ListItemHeader/tests/index.spec.js.snap delete mode 100644 src/legacy/ListItemSection/index.js delete mode 100644 src/legacy/ListItemSection/tests/index.spec.js delete mode 100644 src/legacy/ListItemSection/tests/index.spec.js.snap delete mode 100644 src/legacy/Loading/examples/Default.js delete mode 100644 src/legacy/Loading/examples/KitchenSink.js delete mode 100644 src/legacy/Loading/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Loading/examples/index.js delete mode 100644 src/legacy/Loading/index.js delete mode 100644 src/legacy/Loading/tests/index.spec.js delete mode 100644 src/legacy/Loading/tests/index.spec.js.snap delete mode 100644 src/legacy/Modal/examples/Default.js delete mode 100644 src/legacy/Modal/examples/Full.js delete mode 100644 src/legacy/Modal/examples/KitchenSink.js delete mode 100644 src/legacy/Modal/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Modal/examples/Large.js delete mode 100644 src/legacy/Modal/examples/Small.js delete mode 100644 src/legacy/Modal/examples/index.js delete mode 100644 src/legacy/Modal/index.js delete mode 100644 src/legacy/Modal/tests/index.spec.js delete mode 100644 src/legacy/Modal/tests/index.spec.js.snap delete mode 100644 src/legacy/ModalBody/examples/Default.js delete mode 100644 src/legacy/ModalBody/examples/KitchenSink.js delete mode 100644 src/legacy/ModalBody/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/ModalBody/examples/index.js delete mode 100644 src/legacy/ModalBody/index.js delete mode 100644 src/legacy/ModalBody/tests/index.spec.js delete mode 100644 src/legacy/ModalBody/tests/index.spec.js.snap delete mode 100644 src/legacy/ModalFooter/examples/Default.js delete mode 100644 src/legacy/ModalFooter/examples/KitchenSink.js delete mode 100644 src/legacy/ModalFooter/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/ModalFooter/examples/index.js delete mode 100644 src/legacy/ModalFooter/index.js delete mode 100644 src/legacy/ModalFooter/tests/index.spec.js delete mode 100644 src/legacy/ModalFooter/tests/index.spec.js.snap delete mode 100644 src/legacy/ModalHeader/index.js delete mode 100644 src/legacy/ModalHeader/tests/index.spec.js delete mode 100644 src/legacy/ModalHeader/tests/index.spec.js.snap delete mode 100644 src/legacy/Popover/examples/AccessibleHoverPopover.js delete mode 100644 src/legacy/Popover/examples/Arrow.js delete mode 100644 src/legacy/Popover/examples/Contained.js delete mode 100644 src/legacy/Popover/examples/Default.js delete mode 100644 src/legacy/Popover/examples/Delay.js delete mode 100644 src/legacy/Popover/examples/Direction.js delete mode 100644 src/legacy/Popover/examples/KitchenSink.js delete mode 100644 src/legacy/Popover/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Popover/examples/Offset.js delete mode 100644 src/legacy/Popover/examples/Overflow.js delete mode 100644 src/legacy/Popover/examples/index.js delete mode 100644 src/legacy/Popover/index.js delete mode 100644 src/legacy/Popover/tests/index.spec.js delete mode 100644 src/legacy/Popover/tests/index.spec.js.snap delete mode 100644 src/legacy/SelectableContext/index.js delete mode 100644 src/legacy/SocialList/index.js delete mode 100644 src/legacy/SocialList/tests/index.spec.js delete mode 100644 src/legacy/SocialList/tests/index.spec.js.snap delete mode 100644 src/legacy/SpaceListItem/examples/Default.js delete mode 100644 src/legacy/SpaceListItem/examples/KitchenSink.js delete mode 100644 src/legacy/SpaceListItem/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/SpaceListItem/examples/SpaceListMeeting.js delete mode 100644 src/legacy/SpaceListItem/examples/index.js delete mode 100644 src/legacy/SpaceListItem/index.js delete mode 100644 src/legacy/SpaceListItem/tests/index.spec.js delete mode 100644 src/legacy/SpaceListItem/tests/index.spec.js.snap delete mode 100644 src/legacy/Tooltip/examples/Content.js delete mode 100644 src/legacy/Tooltip/examples/Default.js delete mode 100644 src/legacy/Tooltip/examples/Delay.js delete mode 100644 src/legacy/Tooltip/examples/Direction.js delete mode 100644 src/legacy/Tooltip/examples/KitchenSink.js delete mode 100644 src/legacy/Tooltip/examples/KitchenSink.stories.tsx delete mode 100644 src/legacy/Tooltip/examples/index.js delete mode 100644 src/legacy/Tooltip/index.js delete mode 100644 src/legacy/Tooltip/tests/index.spec.js delete mode 100644 src/legacy/Tooltip/tests/index.spec.js.snap delete mode 100644 src/legacy/index.js delete mode 100644 src/legacy/utils/dateUtils/index.js delete mode 100644 src/legacy/utils/getColorValue/index.js delete mode 100644 src/legacy/utils/index.js delete mode 100644 src/legacy/utils/prefixer/index.js delete mode 100644 src/legacy/utils/requestAnimationFrame/index.js delete mode 100644 src/legacy/utils/requestAnimationTimeout/index.js delete mode 100644 src/legacy/utils/snakeCase/index.js diff --git a/.babelrc.js b/.babelrc.js index 692f1ab13f..62bd85d5fe 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -24,14 +24,6 @@ module.exports = { '@babel/preset-typescript' ], plugins: [ - [ - "module-resolver", - { - "alias": { - "@momentum-ui/react-collaboration": "./src/legacy" - } - } - ], ['@babel/plugin-proposal-class-properties', { loose: true }], '@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-export-namespace-from', diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index ece81ecee1..bdb82f4b80 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -8,7 +8,6 @@ applyTo: '**/*' - `momentum-react-v2` is a React component library using TypeScript - `momentum-react-v2` is a Shim Layer for React components from NPM package `@momentum-design/components/dist/react` - Components in the folder `src/components/` are the new components that are supposed to be maintained and used. -- Components in the folder `src/legacy/` are the old components that are deprecated and should not be used in new code. # Project coding standards diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fd672abeba..5691c6ceae 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,7 +9,6 @@ project, please fork this project.** - [Project Structure](#project-structure) - [Code Style](#code-style) - [New Components](#new-components) - - [Legacy Components](#legacy-components) - [Scripts](#scripts) - [CD](#cd) - [CI](#ci) @@ -20,7 +19,6 @@ project, please fork this project.** - [storybook](#storybook) - [source](#source) - [styles](#styles) - - [legacy](#legacy) - [Submitting Changes](#submitting-changes) - [License](#license) @@ -113,12 +111,9 @@ file structure of this project: +-+ config/ # configuration files for this project +-+ dist/ # built distributables +-+ docs/ # build documentation -+-+ scss/ # legacy component styles ported from @momentum-ui/core +-+ src/ # source code for this project +-- components/ # typescript react components - +-- examples/ # legacy examples +-- helpers/ # enzyme test helpers - +-- legacy/ # legacy react components cloned from the original @momentum-ui/react project +-- storybook/ # storybook utilities +-- index.js # entry file for all module exports ``` @@ -196,34 +191,6 @@ When a changes occur against the new React components in this project, a few sta - Most components should have a `{component}.documentation.mdx` file that includes a description of the component. -### Legacy Components - -Legacy components should not contain any larger feature work, and are currently in the -**maintenance** SDLC state. Below is their directory model: - -```bash -./ # project root directory -+-+ scss/ # styling sub-module - +-+ components/ # scoped styling entry directory - +-+ {component}/ # scoped component styling - +-- {styles}.scss # various scoped styling definitions -+-+ src/ # source code directory - +-- index.js # global react component module entry point - +-+ legacy/ # legacy react components directory - +-- index.js # legacy react component module entry point - +-+ {component}/ # legacy react component directory - +-- index.js # entry point for component, contains the component renderer - +-+ examples/ # examples documentation fo visual testing and docs - +-- index.js # examples module file, imports all files from directory needed - +-- KitchenSink.js # renderer for component states, includes all component states - +-- {state}.js # scoped state for this component - +-+ tests/ # scoped unit test directory - +-- index.spec.js # jest unit test file - +-- index.spec.js.snap # automatically-generated snapshot file -``` - -While most changes to these components wont require any changes to the module entry files, be aware -that changes in those files may be needed in broad-scoped implementaitons. ## Scripts diff --git a/config/constants.js b/config/constants.js index c830dc8a05..c195af576f 100644 --- a/config/constants.js +++ b/config/constants.js @@ -6,5 +6,3 @@ exports.srcRoot = path.join(exports.repoRoot, 'src/'); exports.distRoot = path.join(exports.repoRoot, 'dist/'); exports.libRoot = path.join(exports.repoRoot, 'lib/'); exports.esRoot = path.join(exports.repoRoot, 'es/'); - -exports.componentRoot = path.join(exports.srcRoot, 'legacy/'); diff --git a/config/plop/plop-templates/legacy-component/KitchenSink.stories.tsx.hbs b/config/plop/plop-templates/legacy-component/KitchenSink.stories.tsx.hbs deleted file mode 100644 index a434bc1771..0000000000 --- a/config/plop/plop-templates/legacy-component/KitchenSink.stories.tsx.hbs +++ /dev/null @@ -1,12 +0,0 @@ -import LegacyKitchenSink from './KitchenSink'; -import React from 'react'; - -export default { - title: 'Legacy/{{componentName}}', - component: LegacyKitchenSink, -}; - -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -const Legacy = () => ; - -export { Legacy }; diff --git a/config/plop/plopfile.js b/config/plop/plopfile.js index 8c0f633670..3f508ac785 100644 --- a/config/plop/plopfile.js +++ b/config/plop/plopfile.js @@ -54,30 +54,4 @@ module.exports = function (plop) { return actions; }, }); - - plop.setGenerator('legacyStory', { - description: 'Add a story for a legacy component', - prompts: [ - { - type: 'input', - name: 'componentName', - message: 'component name, please use appropriate uppercase (e.g. TextField)', - validate: (answer) => answer.length > 0, - }, - ], - actions: function (data) { - let { componentName } = data; - let actions = []; - - actions.push({ - type: 'addMany', - templateFiles: 'plop-templates/legacy-component/**', - base: 'plop-templates/legacy-component', - destination: `src/legacy/${componentName}/examples`, - data: { componentName }, - }); - - return actions; - }, - }); }; diff --git a/config/storybook/constants.js b/config/storybook/constants.js index 502e8ea060..2bbd4cf7d3 100644 --- a/config/storybook/constants.js +++ b/config/storybook/constants.js @@ -3,5 +3,4 @@ module.exports = { ESM_DIR: './dist/esm/', CJS_DIR: './dist/cjs/', COMPONENTS_DIR: './components/', - LEGACY_COMPONENTS_DIR: './legacy/', }; diff --git a/config/storybook/generateMain.js b/config/storybook/generateMain.js index 9a5288dbfa..d253415ab2 100644 --- a/config/storybook/generateMain.js +++ b/config/storybook/generateMain.js @@ -1,14 +1,11 @@ const path = require('path'); -const { COMPONENTS_DIR, LEGACY_COMPONENTS_DIR } = require('./constants'); +const { COMPONENTS_DIR } = require('./constants'); const REPO_ROOT = path.resolve(__dirname, '../../'); const generateMain = (dir) => { return { - stories: [ - path.join(REPO_ROOT, dir, COMPONENTS_DIR, '**/*.stories.@(js|jsx|ts|tsx)'), - path.join(REPO_ROOT, dir, LEGACY_COMPONENTS_DIR, '**/*.stories.@(js|jsx|ts|tsx)'), - ], + stories: [path.join(REPO_ROOT, dir, COMPONENTS_DIR, '**/*.stories.@(js|jsx|ts|tsx)')], addons: [ '@storybook/addon-docs', '@storybook/addon-links', diff --git a/config/typescript/tsconfig.build.json b/config/typescript/tsconfig.build.json index 4a552752d6..a7981fbc92 100644 --- a/config/typescript/tsconfig.build.json +++ b/config/typescript/tsconfig.build.json @@ -7,7 +7,6 @@ "extends": "./tsconfig.base.json", "include": [ "../../src/index.ts", - "../../src/legacy/**/*.*", "../../src/components/**/*.*", "../../src/utils/**/*.*" ] diff --git a/config/webpack/constants.js b/config/webpack/constants.js index e72be4ef25..d0cf239aa7 100644 --- a/config/webpack/constants.js +++ b/config/webpack/constants.js @@ -6,5 +6,3 @@ exports.srcRoot = path.join(exports.repoRoot, 'src/'); exports.distRoot = path.join(exports.repoRoot, 'dist/'); exports.libRoot = path.join(exports.repoRoot, 'lib/'); exports.esRoot = path.join(exports.repoRoot, 'es/'); - -exports.componentRoot = path.join(exports.srcRoot, 'legacy/'); diff --git a/css/momentum-ui.css b/css/momentum-ui.css index d460512a2b..9e4fc9bd21 100644 --- a/css/momentum-ui.css +++ b/css/momentum-ui.css @@ -210,9 +210,6 @@ .icon-inverse { color: #FFFFFF; } -.icon-3d-object_16::before { - content: "\f101"; } - .icon-3d-object_20::before { content: "\f102"; } diff --git a/package.json b/package.json index 0bb686e074..238a6e7b29 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ }, "scripts": { "build": "yarn source:build", - "ci:build": "yarn source:build && yarn source:build:stories && yarn source:copy:images && yarn source:build:documentation && yarn docs:build", + "ci:build": "yarn source:build && yarn source:build:stories && yarn source:build:documentation && yarn docs:build", "ci:publish": "semantic-release --branches master", "ci:test:examples": "run-p --race examples:start:esm examples:test", "ci:test:lint": "yarn lint:src", @@ -47,7 +47,6 @@ "examples:start:esm": "node ./config/webpack/server.docs.js", "examples:start:src": "node ./config/webpack/server.src.js", "generate:component": "plop component --cwd ./config/plop --dest .", - "generate:legacyStory": "plop legacyStory --cwd ./config/plop --dest .", "lint": "yarn lint:src && yarn lint:css && yarn lint:config", "lint:config": "esw \"./config/**/*.{js,jsx,ts,tsx}\"", "lint:src": "tsc --noEmit --skipLibCheck && esw \"./src/**/*.{js,jsx,ts,tsx}\"", @@ -67,7 +66,6 @@ "source:build:stories": "copyfiles -u 1 \"./src/**/*.stories.*\" ./dist/esm && copyfiles -u 1 \"./src/**/*.stories.*\" ./dist/cjs", "source:build:documentation": "copyfiles -u 1 \"./src/**/*.documentation.*\" ./dist/esm && copyfiles -u 1 \"./src/**/*.documentation.*\" ./dist/cjs", "source:build:watch": "./node_modules/.bin/nodemon --watch src -e ts,tsx,js,scss --exec yarn source:build", - "source:copy:images": "copyfiles -u 1 \"./src/legacy/**/examples/*.{jpg,png,svg}\" ./dist/esm && copyfiles -u 1 \"./src/legacy/**/examples/*.{jpg,png,svg}\" ./dist/cjs", "source:test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest", "storybook:build": "yarn storybook:clean && yarn storybook:build:esm", "storybook:build:cjs": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook -c ./config/storybook/cjs -o ./docs", diff --git a/scss/components/accordion/accordion.scss b/scss/components/accordion/accordion.scss deleted file mode 100644 index b30c20aed8..0000000000 --- a/scss/components/accordion/accordion.scss +++ /dev/null @@ -1,81 +0,0 @@ -/** @component accordion */ - -@include exports('md-accordion') { - @include brand-font-face-light; - @include brand-font-face-regular; - .#{$accordion__class} { - width: 100%; - margin-bottom: 0; - line-height: $body-line-height; - - &__group { - display: block; - width: 100%; - margin-bottom: 0; - - @include accordion--light(); - @include accordion--dark(); - - &.#{$accordion__class}__group--disabled { - > .#{$accordion__class}__header { - pointer-events: none; - opacity: $accordion-header__opacity--disabled; - } - } - - > .#{$accordion__class}__header { - display: flex; - width: 100%; - padding: $accordion-header__padding; - font-family: $accordion-header__font-family; - font-size: $accordion__font-size; - font-weight: 450; - cursor: pointer; - justify-content: space-between; - align-items: center; - - .#{$accordion__class}__header-text { - width: 100%; - } - - > .#{$accordion__class}__header-icon:before { - @include icon-arrow-down_16; - - font-family: $icon-font-name; - font-size: $accordion-arrow__font-size; - font-weight: 450; - } - - &.#{$accordion__class}__header { - &--56 { - height: rem-calc(56); - } - } - } - - > .#{$accordion__class}__content { - display: none; - width: 100%; - - .#{$list-item__class} { - height: $accordion-list-item__height; - padding: 0 $accordion-list-item__padding 0 - $accordion-list-item__padding; - font-family: $accordion-list-item__font-family; - font-size: $accordion__font-size; - } - } - - &.#{$accordion__class}__group--active { - > .#{$accordion__class}__content { - display: block; - } - - > .#{$accordion__class}__header - > .#{$accordion__class}__header-icon:before { - @include icon-arrow-up_16; - } - } - } - } -} diff --git a/scss/components/accordion/examples/default.html b/scss/components/accordion/examples/default.html deleted file mode 100644 index b6819c74b1..0000000000 --- a/scss/components/accordion/examples/default.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
-
-
Accordion 1
- -
-
-
Content 1
-
-
- -
diff --git a/scss/components/accordion/examples/multi-open.html b/scss/components/accordion/examples/multi-open.html deleted file mode 100644 index 0d0c7eb554..0000000000 --- a/scss/components/accordion/examples/multi-open.html +++ /dev/null @@ -1,34 +0,0 @@ -
-
-
-
Accordion 1
- -
-
-
Content 1
-
-
-
-
-
Accordion 2
- -
-
-
Content 2
-
-
-
diff --git a/scss/components/accordion/examples/pre-selected-open.html b/scss/components/accordion/examples/pre-selected-open.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/accordion/mixins.scss b/scss/components/accordion/mixins.scss deleted file mode 100644 index 5338ad754a..0000000000 --- a/scss/components/accordion/mixins.scss +++ /dev/null @@ -1,94 +0,0 @@ -@mixin accordion--light( - $color: $accordion-header__color, - $background-color: $accordion-header__background, - $background-color--hover: $accordion-header__background--hover, - $separator__border: $accordion-separator__border -) { - &.#{$accordion__class}__group--disabled { - > .#{$accordion__class}__header { - &:hover { - color: $color; - background: $background-color; - } - } - } - - & > .#{$accordion__class}__header { - color: $color; - background: $background-color; - - &.#{$accordion__class}__header--separator { - border-bottom: $separator__border; - } - - &:hover { - color: $color; - background-color: $background-color--hover; - } - - &:focus { - @include focus-styles; - box-shadow: inset 0 0 0 $focus__size $color; - } - } - - & > .#{$accordion__class}__content { - color: $color; - background: $background-color; - font-family: $brand-font-light; - } - &:focus { - @include focus-styles; - } -} - -@mixin accordion--dark( - $color: $accordion-header-dark__color, - $background-color: $accordion-header-dark__background, - $background-color--hover: $accordion-header-dark__background--hover, - $separator__border: $accordion-separator-dark__border -) { - &.#{$accordion__class}__group--disabled { - > .#{$accordion__class}__header { - .#{$dark-class} & { - &:hover { - color: $color; - background: $background-color; - } - } - } - } - - & > .#{$accordion__class}__header { - .#{$dark-class} & { - color: $color; - background: $background-color; - } - - &.#{$accordion__class}__header--separator { - .#{$dark-class} & { - border-bottom: $separator__border; - } - } - - &:hover { - .#{$dark-class} & { - color: $color; - background-color: $white-08; - } - } - - &:focus { - .#{$dark-class} & { - box-shadow: inset 0 0 0 $focus__size $color; - } - } - } - - & > .#{$accordion__class}__content { - .#{$dark-class} & { - color: $color; - background: $background-color; - } - } -} diff --git a/scss/components/accordion/module.scss b/scss/components/accordion/module.scss deleted file mode 100644 index 93e81e8146..0000000000 --- a/scss/components/accordion/module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/focus'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../list-item/settings'; -@import '../../tools/mixins/core'; -@import '../../tools/mixins/focus'; -@import '../../typography/mixins'; -@import '~@momentum-ui/icons/scss/mixins'; - -@import 'settings'; -@import 'mixins'; -@import 'accordion'; diff --git a/scss/components/accordion/settings.scss b/scss/components/accordion/settings.scss deleted file mode 100644 index a3b9180ce6..0000000000 --- a/scss/components/accordion/settings.scss +++ /dev/null @@ -1,20 +0,0 @@ -$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/2) !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; diff --git a/scss/components/activity-button/activity-button.scss b/scss/components/activity-button/activity-button.scss deleted file mode 100644 index dcb5917c92..0000000000 --- a/scss/components/activity-button/activity-button.scss +++ /dev/null @@ -1,160 +0,0 @@ -/* @component activity */ - -@include exports('md-activity') { - .md-button.md-activity { - fill: $md-white-100; - margin: rem-calc(5); - - &__chat, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--blue__background-color, - $bg-hover: $button--blue__background-color--hover, - $bg-active: $button--blue__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--blue__background-color--contrast, - $bg-hover: $button--blue__background-color--hover--contrast, - $bg-active: $button--blue__background-color--active--contrast - ); - } - } - - &__camera, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--green__background-color, - $bg-hover: $button--green__background-color--hover, - $bg-active: $button--green__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--green__background-color--contrast, - $bg-hover: $button--green__background-color--hover--contrast, - $bg-active: $button--green__background-color--active--contrast - ); - } - } - - &__contact-card, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--duck-egg__background-color, - $bg-hover: $button--duck-egg__background-color--hover, - $bg-active: $button--duck-egg__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--duck-egg__background-color, - $bg-hover: $button--duck-egg__background-color--hover, - $bg-active: $button--duck-egg__background-color--active - ); - } - } - - &__meetings, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--orange__background-color, - $bg-hover: $button--orange__background-color--hover, - $bg-active: $button--orange__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--orange__background-color--contrast, - $bg-hover: $button--orange__background-color--hover--contrast, - $bg-active: $button--orange__background-color--active--contrast - ); - } - } - - &__whiteboard, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--purple__background-color, - $bg-hover: $button--purple__background-color--hover, - $bg-active: $button--purple__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--purple__background-color--contrast, - $bg-hover: $button--purple__background-color--hover--contrast, - $bg-active: $button--purple__background-color--active--contrast - ); - } - } - - &__files, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--yellow__background-color, - $bg-hover: $button--yellow__background-color--hover, - $bg-active: $button--yellow__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--yellow__background-color--contrast, - $bg-hover: $button--yellow__background-color--hover--contrast, - $bg-active: $button--yellow__background-color--active--contrast - ); - } - } - - &__share-screen, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--cyan__background-color, - $bg-hover: $button--cyan__background-color--hover, - $bg-active: $button--cyan__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--cyan__background-color--contrast, - $bg-hover: $button--cyan__background-color--hover--contrast, - $bg-active: $button--cyan__background-color--active--contrast - ); - } - } - - &__tasks, - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--mint__background-color, - $bg-hover: $button--mint__background-color--hover, - $bg-active: $button--mint__background-color--active - ); - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--mint__background-color--contrast, - $bg-hover: $button--mint__background-color--hover--contrast, - $bg-active: $button--mint__background-color--active--contrast - ); - } - } - } -} diff --git a/scss/components/activity-button/examples/default.html b/scss/components/activity-button/examples/default.html deleted file mode 100644 index 83f1e794fd..0000000000 --- a/scss/components/activity-button/examples/default.html +++ /dev/null @@ -1,70 +0,0 @@ -
- -
Chat
-
-
- -
Camera
-
-
- -
Meetings
-
-
- -
Whiteboard
-
-
- -
Files
-
-
- -
Share
-
-
- -
Tasks
-
diff --git a/scss/components/activity-button/examples/large.html b/scss/components/activity-button/examples/large.html deleted file mode 100644 index db898c94f5..0000000000 --- a/scss/components/activity-button/examples/large.html +++ /dev/null @@ -1,70 +0,0 @@ -
- -
Chat
-
-
- -
Camera
-
-
- -
Meetings
-
-
- -
Whiteboard
-
-
- -
Files
-
-
- -
Share
-
-
- -
Tasks
-
diff --git a/scss/components/activity-button/examples/size-56.html b/scss/components/activity-button/examples/size-56.html deleted file mode 100644 index 4d9beef0e2..0000000000 --- a/scss/components/activity-button/examples/size-56.html +++ /dev/null @@ -1,80 +0,0 @@ -
- -
Chat
-
-
- -
Camera
-
-
- -
Contact Card
-
-
- -
Meetings
-
-
- -
Whiteboard
-
-
- -
Files
-
-
- -
Share
-
-
- -
Tasks
-
diff --git a/scss/components/activity-button/module.scss b/scss/components/activity-button/module.scss deleted file mode 100644 index c25f508863..0000000000 --- a/scss/components/activity-button/module.scss +++ /dev/null @@ -1,86 +0,0 @@ -@import '../../tools/functions/core.scss'; -@import '../../tools/mixins/core'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../colors/settings-transparencies.scss"; -@import "../../colors/settings-legacy.scss"; -@import "../../settings/rem.scss"; -@import "../../settings/core.scss"; -@import "../../settings/focus.scss"; -@import "../../settings/media.scss"; -@import "../../typography/settings.scss"; -@import "../button/settings.scss"; - - -// Tools -@import '../../tools/mixins/baseline'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../typography/mixins'; -@import '../../components/button/mixins'; - -// Generic -@import '../../generic/global'; - -// Typography -@include brand-font-family-ciscoFont; - -// Component Helpers -// @component button styles - -@include exports('md-button') { - [class|='#{$button__class}__container'] { - @include flex($display: inline-flex, $fd: column); - - width: $button-container__width; - - &[class$='--small'] { - width: $button-container--small__width; - } - } - - // Default styles applied outside of media query - %#{$button__class}, - .#{$button__class} { - @include button-base; - @include button-size( - $height: rem-calc(36), - $padding: $button__padding--36, - $radius: $button__radius--36 - ); - @include button-color($focus: true); - @include single-transition(background-color, $button__transition-speed, ease); - - - &%#{$button__class}, - &.#{$button__class} { - &--circle { - @include radius($button__radius--round); - - padding: 0; - - @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36); - - - &[class*='--36'] { - @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36); - } - - &[class*='--56'] { - @include button-circle-size($size: $button__size--56, $font-size: $button__font-size--56); - } - - &[class*='--68'] { - @include button-circle-size($size: $button__size--68, $font-size: $button__font-size--68); - } - - &[class*='--84'] { - @include button-circle-size($size: $button__size--84, $font-size: $button__font-size--84); - } - } - } - } -} - -@import 'activity-button'; diff --git a/scss/components/alert-banner/alert-banner.scss b/scss/components/alert-banner/alert-banner.scss deleted file mode 100644 index 9c92747723..0000000000 --- a/scss/components/alert-banner/alert-banner.scss +++ /dev/null @@ -1,54 +0,0 @@ -/** @component alert-banner */ - -@include exports('md-alert-banner') { - .#{$prefix}-alert-banner { - position: relative; - padding: $alert-banner__padding; - text-align: center; - - &.#{$prefix}-alert-banner { - &--info { - color: $alert-banner-info__color; - color: var(--mdl-alert-text-theme, $alert-banner-info__color); - background-color: $alert-banner-info__background; - background-color: var(--mdl-alert-background-theme, $alert-banner-info__background); - } - - &--warning { - color: $alert-banner-warning__color; - color: var(--mdl-alert-text-warning, $alert-banner-warning__color); - background-color: $alert-banner-warning__background; - background-color: var(--mdl-alert-background-warning, $alert-banner-warning__background); - } - - &--error { - color: $alert-banner-error__color; - color: var(--mdl-alert-text-error, $alert-banner-error__color); - background-color: $alert-banner-error__background; - background-color: var(--mdl-alert-background-error, $alert-banner-error__background); - } - } - - &__text { - padding: 0 10% 0 10%; - font-size: $alert-banner__font-size; - text-align: center; - - a { - color: inherit; - text-decoration: underline; - } - } - - &__close { - position: absolute; - top: 12px; - right: 16px; - width: 16px; - height: 16px; - color: $md-black-100; - color: var(--mdl-textColor-secondary, $md-black-100); - cursor: pointer; - } - } -} diff --git a/scss/components/alert-banner/examples/default.html b/scss/components/alert-banner/examples/default.html deleted file mode 100644 index 7f2ac96036..0000000000 --- a/scss/components/alert-banner/examples/default.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
Default Alert Banner
-
- -
-
diff --git a/scss/components/alert-banner/examples/error.html b/scss/components/alert-banner/examples/error.html deleted file mode 100644 index 09c72a3368..0000000000 --- a/scss/components/alert-banner/examples/error.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
Error Alert Banner
-
- -
-
diff --git a/scss/components/alert-banner/examples/warning.html b/scss/components/alert-banner/examples/warning.html deleted file mode 100644 index 4f38cd3461..0000000000 --- a/scss/components/alert-banner/examples/warning.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
Warning Alert Banner
-
- -
-
diff --git a/scss/components/alert-banner/module.scss b/scss/components/alert-banner/module.scss deleted file mode 100644 index 5e141a02f2..0000000000 --- a/scss/components/alert-banner/module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "../../tools/functions/core"; -@import '../../tools/mixins/core'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../settings/rem.scss"; -@import "../../settings/core.scss"; -@import "../../settings/media.scss"; -@import "../../typography/settings.scss"; - -@import '../../typography/mixins'; - -// Generic -@import '../../generic/normalize'; -@import '../../generic/global'; - -// Typography -@include brand-font-family-ciscoFont; - -// Alert-banner Specific -@import 'settings'; -@import 'alert-banner'; diff --git a/scss/components/alert-banner/settings.scss b/scss/components/alert-banner/settings.scss deleted file mode 100644 index 60c1081cfd..0000000000 --- a/scss/components/alert-banner/settings.scss +++ /dev/null @@ -1,12 +0,0 @@ -$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; diff --git a/scss/components/alert-call/examples/default.html b/scss/components/alert-call/examples/default.html deleted file mode 100644 index 32f6274ea4..0000000000 --- a/scss/components/alert-call/examples/default.html +++ /dev/null @@ -1,37 +0,0 @@ -
-
Incoming Call
-
-
- JG -
-
Jefe Guadelupe
-
+ 1 972-555-1212
-
-
- - - -
-
diff --git a/scss/components/alert-call/examples/device-list.html b/scss/components/alert-call/examples/device-list.html deleted file mode 100644 index ac60ed342b..0000000000 --- a/scss/components/alert-call/examples/device-list.html +++ /dev/null @@ -1,81 +0,0 @@ -
-
Incoming Call
-
-
- JG -
-
Jefe Guadelupe
-
+ 1 972-555-1212
-
-
-
-
-
Device selection
-
-
-
-
-
- -
-
-
SJC21-Babelfish
-
-
- -
-
-
-
- -
-
-
Use my computer
-
-
-
-
-
- - - -
-
diff --git a/scss/components/alert-call/examples/device.html b/scss/components/alert-call/examples/device.html deleted file mode 100644 index e2bd58bf53..0000000000 --- a/scss/components/alert-call/examples/device.html +++ /dev/null @@ -1,44 +0,0 @@ -
-
Incoming Call
-
-
- - - -
-
SJC21-Babelfish
-
+ 1 408-555-1212
-
-
- - - -
-
diff --git a/scss/components/alert-call/examples/number.html b/scss/components/alert-call/examples/number.html deleted file mode 100644 index e072dfade1..0000000000 --- a/scss/components/alert-call/examples/number.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
Incoming Call
-
-
- # -
-
+ 1 408-555-1212
-
-
-
- - - -
-
diff --git a/scss/components/alert-meeting/examples/default.html b/scss/components/alert-meeting/examples/default.html deleted file mode 100644 index db7d65678f..0000000000 --- a/scss/components/alert-meeting/examples/default.html +++ /dev/null @@ -1,30 +0,0 @@ -
-
-
- J$ -
-
-
-
Important Meeting
-
In 5 mins.
-
This is important
-
-
- -
-
- -
-
diff --git a/scss/components/alert-meeting/examples/multiple.html b/scss/components/alert-meeting/examples/multiple.html deleted file mode 100644 index db7d65678f..0000000000 --- a/scss/components/alert-meeting/examples/multiple.html +++ /dev/null @@ -1,30 +0,0 @@ -
-
-
- J$ -
-
-
-
Important Meeting
-
In 5 mins.
-
This is important
-
-
- -
-
- -
-
diff --git a/scss/components/alert/alert.scss b/scss/components/alert/alert.scss deleted file mode 100644 index 283661343b..0000000000 --- a/scss/components/alert/alert.scss +++ /dev/null @@ -1,262 +0,0 @@ -/** @component alert */ - -@include exports('md-alert') { - .#{$alert__class}__container { - position: fixed; - z-index: 9999; - - &--top-left { - top: 1em; - left: 1em; - } - - &--top-center { - top: 1em; - left: 50%; - transform: translate(-50%); - } - - &--top-right { - top: 1em; - right: 1em; - } - - &--bottom-left { - bottom: 1em; - left: 1em; - } - - &--bottom-center { - bottom: 1em; - left: 50%; - transform: translate(-50%); - } - - &--bottom-right { - right: 1em; - bottom: 1em; - } - - &--call { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - @include flex; - } - } - - .#{$alert__class} { - @include flex($jc: space-between, $ac: space-between); - @include border-radius($alert__border-radius); - - width: $alert__width; - max-height: rem-calc(308); - min-height: rem-calc(78); - padding: $alert__padding $alert__padding-right $alert__padding - $alert__padding-left; - margin-bottom: rem-calc(8); - background-color: $md-white-100; - background-color: var(--mdl-alert-background-theme, $md-white-100); - border: 1px solid $black-12; - box-shadow: 0 8px 16px 0 $black-08; - - &__icon { - font-family: $icon-font-name; - font-size: $alert__icon-font-size; - line-height: 0; - - &:before { - color: $alert__font-color--info; - color: var(--mdl-alert-text-theme, $alert__font-color--info); - - @include icon-info_24; - } - } - - &__content { - display: flex; - flex-direction: column; - flex-grow: 2; - flex-basis: 0%; - padding-right: rem-calc(2); - padding-left: rem-calc(16); - } - - &__title { - font-size: $alert__font-size--title; - line-height: rem-calc(24); - color: $alert__font-color--info; - color: var(--mdl-alert-text-theme, $alert__font-color--info); - } - - &__status, - &__message { - font-family: $brand-font-light; - font-size: $alert__font-size; - line-height: rem-calc(18); - } - - &__status { - color: $alert__font-color--status; - color: var(--mdl-textColor-primary, $alert__font-color--status); - } - - &__message { - color: $alert__font-color; - color: var(--mdl-textColor-primary, $alert__font-color); - } - - &__title, - &__message { - max-width: 10rem; - word-wrap: break-word; - } - - &__button { - margin-left: rem-calc(8); - } - - &.#{$alert__class}--success { - background-color: var(--mdl-alert-background-success, $md-white-100); - - .#{$alert__class}__icon { - &:before { - color: $alert__font-color--success; - color: var(--mdl-alert-text-success, $alert__font-color--success); - - @include icon-check-circle_24; - } - } - - .#{$alert__class}__title { - color: $alert__font-color--success; - color: var(--mdl-alert-text-success, $alert__font-color--success); - } - } - - &.#{$alert__class}--warning { - background-color: var(--mdl-alert-background-warning, $md-white-100); - - .#{$alert__class}__icon { - &:before { - color: $alert__font-color--warning; - color: var(--mdl-alert-text-warning, $alert__font-color--warning); - - @include icon-warning_24; - } - } - - .#{$alert__class}__title { - color: $alert__font-color--warning; - color: var(--mdl-alert-text-warning, $alert__font-color--warning); - } - } - - &.#{$alert__class}--error { - background-color: var(--mdl-alert-background-error, $md-white-100); - - .#{$alert__class}__icon { - &:before { - color: $alert__font-color--error; - color: var(--mdl-alert-text-error, $alert__font-color--error); - - @include icon-warning_24; - } - } - - .#{$alert__class}__title { - color: $alert__font-color--error; - color: var(--mdl-alert-text-error, $alert__font-color--error); - } - } - - &.#{$alert__class}--meeting { - .#{$alert__class}__content { - width: 10rem; - } - - .#{$alert__class}__content--wide { - width: 13rem; - } - - .#{$alert__class}__title, - .#{$alert__class}__message { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .#{$alert__class}__title { - color: $alert__font-color--title; - color: var(--mdl-alert-text-theme, $alert__font-color--title); - } - } - - &.#{$alert__class}--call { - @include flex($fd: column); - - width: rem-calc(278); - max-height: rem-calc(500); - min-height: rem-calc(282); - padding: $alert__padding-top--call $alert__padding--call - $alert__padding-bottom--call $alert__padding--call; - margin-right: rem-calc(15); - - .#{$alert__class}__title { - padding-bottom: rem-calc(24); - font-size: rem-calc(14); - font-weight: 750; - line-height: rem-calc(22); - color: $alert__font-color--title; - color: var(--mdl-alert-text-theme, $alert__font-color--title); - } - - .#{$alert__class}__caller { - @include flex($fd: column); - - &-title { - padding-top: rem-calc(8); - font-size: rem-calc(16); - font-weight: 750; - line-height: rem-calc(24); - } - - &-subtitle { - font-size: rem-calc(14); - line-height: rem-calc(22); - } - } - - .#{$alert__class}--call--buttons { - padding-top: rem-calc(24); - - .#{$icon__class} { - fill: $md-white-100; - } - } - - .#{$list__class} { - padding-top: rem-calc(12); - - .#{$list-item__class} { - background-color: $black-04; - - &:hover { - background-color: $black-04; - } - - &:last-child { - @include border-bottom-radius(8px); - } - - &-header { - border-bottom: 1px solid $black-08; - - @include border-top-radius(8px); - } - } - } - } - } -} diff --git a/scss/components/alert/examples/default.html b/scss/components/alert/examples/default.html deleted file mode 100644 index 21384c5f21..0000000000 --- a/scss/components/alert/examples/default.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
-
-
Title goes here
-
- Info text here. Lorem ipsum dolor sit amet, consectetur. -
-
-
- -
-
diff --git a/scss/components/alert/examples/error.html b/scss/components/alert/examples/error.html deleted file mode 100644 index 45ace20c33..0000000000 --- a/scss/components/alert/examples/error.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
-
-
Title goes here
-
- Error text here. Lorem ipsum dolor sit amet, consectetur. -
-
-
- -
-
diff --git a/scss/components/alert/examples/success.html b/scss/components/alert/examples/success.html deleted file mode 100644 index 20b96ae78f..0000000000 --- a/scss/components/alert/examples/success.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
-
-
Title goes here
-
- Success text here. Lorem ipsum dolor sit amet, consectetur. -
-
-
- -
-
diff --git a/scss/components/alert/examples/warning.html b/scss/components/alert/examples/warning.html deleted file mode 100644 index 301b0743da..0000000000 --- a/scss/components/alert/examples/warning.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
-
-
Title goes here
-
- Warning text here. Lorem ipsum dolor sit amet, consectetur. -
-
-
- -
-
diff --git a/scss/components/alert/mixins.scss b/scss/components/alert/mixins.scss deleted file mode 100644 index c19ac2d35c..0000000000 --- a/scss/components/alert/mixins.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin alert-variant($background, $border, $text-color) { - color: $text-color; - background-color: $background; - border-color: $border; - - hr { - border-top-color: darken($border, 5%); - } - - .alert-link { - color: darken($text-color, 10%); - } -} diff --git a/scss/components/alert/module.scss b/scss/components/alert/module.scss deleted file mode 100644 index 23c8ca7d60..0000000000 --- a/scss/components/alert/module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -@import '~@momentum-ui/icons/scss/mixins'; - -// Settings -@import '../../colors/settings-base.scss'; -@import '../../colors/settings-transparencies.scss'; -@import '../../colors/settings-legacy.scss'; -@import '../../settings/core.scss'; -@import '../../settings/media.scss'; -@import '../../settings/z-index.scss'; -@import '../../typography/settings.scss'; -@import '../button/settings.scss'; -@import '../icon/settings.scss'; -@import '../list-item/settings.scss'; - -// Tools -@import '../../tools/mixins/baseline'; -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; -@import '../../components/button/mixins'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/grid'; -@import '../../typography/mixins'; - -@import '../../generic/global'; - -// Typography -@include brand-font-family-ciscoFont; - -// Alert Specific -@import 'settings'; -@import 'mixins'; -@import 'alert'; diff --git a/scss/components/alert/settings.scss b/scss/components/alert/settings.scss deleted file mode 100644 index 2932461ebb..0000000000 --- a/scss/components/alert/settings.scss +++ /dev/null @@ -1,30 +0,0 @@ -$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); diff --git a/scss/components/avatar/avatar.scss b/scss/components/avatar/avatar.scss deleted file mode 100644 index 3186c984d3..0000000000 --- a/scss/components/avatar/avatar.scss +++ /dev/null @@ -1,220 +0,0 @@ -/** @component avatar */ - -@include exports('md-avatar') { - .#{$avatar__class} { - position: relative; - display: inline-flex; - font-family: $brand-font-regular; - text-transform: uppercase; - user-select: none; - - @include avatar-size; - - > .#{$avatar__class}__failure-badge:after { - position: absolute; - right: $avatar-badge__spacing; - bottom: $avatar-badge__spacing; - z-index: $zindex-close; - width: $avatar-failure-badge__size; - height: $avatar-failure-badge__size; - font-family: $icon-font-name; - font-size: $avatar-failure-badge__size; - color: $avatar-failure-badge__color; - background-color: $avatar-failure-badge__background; - content: $icon-priority_12; - - @include flex; - @include border-radius($global-rounded); - } - - > .#{$avatar__class}__notification-badge:after { - @include border-radius($global-rounded); - - position: absolute; - top: $avatar-badge__spacing; - right: $avatar-badge__spacing; - z-index: $zindex-close; - width: $avatar-notification-badge__size; - height: $avatar-notification-badge__size; - background-color: $avatar-notification-badge__color; - content: '\00a0'; - - @include flex; - } - - &.#{$avatar__class}--dark { - &.#{$avatar__class}--active:after { - box-shadow: $avatar--active__shadow--dark; - } - } - - &.#{$avatar__class}--typing { - > .md-loading { - @include avatar-overlay-style; - } - } - - &.#{$avatar__class}--bot:after { - position: absolute; - bottom: 0; - left: 0; - padding: $avatar-bot__padding; - font-size: $avatar-bot__font-size; - line-height: $avatar-bot__line-height; - color: $avatar-bot__color; - text-transform: none; - background-color: $avatar-bot__background; - border-radius: $avatar-bot__border-radius; - content: 'Bot'; - } - - .#{$avatar__class}__img { - @include avatar-contents-base; - - background-color: $avatar-img__background; - } - - .#{$avatar__class}__letter { - @include avatar-contents-base; - - color: $avatar-letter__color; - background-color: $avatar-letter__background; - } - - .#{$avatar__class}__self { - @include avatar-contents-base; - color: $avatar-self__color; - - background-color: $avatar-self__background; - border: $avatar-self__border; - } - - .#{$avatar__class}__icon { - @include avatar-contents-base; - - color: $avatar-icon__color; - background-color: $avatar-icon__background; - fill: currentColor; - - &--overview { - @include border-radius($global-rounded); - - color: $md-white-100; - background-color: transparent; - box-shadow: inset 0 0 0 1px $white-16; - } - } - - .#{$avatar__class}__img--hidden { - display: none; - } - - &.#{$avatar__class}--clickable:after { - @include avatar-contents-base; - - position: absolute; - - } - - &.#{$avatar__class}--clickable-bot:after { - background-color: $avatar-bot__background; - content: 'Bot'; - height: 30%; - width: 60%; - margin-left: -.14em; - margin-bottom: -.30em; - font-size: 0.571em; - padding: .3em 1.2em 1.2em 1.2em; - border-radius: .45em; - align-items: end; - } - - &.#{$avatar__class}--clickable { - &:hover::after { - @include avatar-overlay-style($md-white-100, $black_08); - } - - &:active::after { - @include avatar-overlay-style($md-white-100, $black_16); - } - } - - &.#{$avatar__class}--clickable-bot { - &:hover::after { - background-color: $avatar-bot__background; - content: 'Bot'; - height: 30%; - width: 60%; - margin-top: auto; - margin-left: -.14em; - margin-bottom: -.24em; - font-size: 0.571em; - padding: .55em 1.2em .75em 1.2em; - border-radius: .45em; - } - } - - &.#{$avatar__class}--active:after { - @include avatar-contents-base; - - position: absolute; - left: 0; - content: ''; - box-shadow: $avatar--active__shadow; - background-color: transparent; - } - - &.#{$avatar__class}--inactive { - opacity: $avatar--inactive__opacity; - } - - @each $size-class, $dnd-size, $pto-size, $call-size, $meet-size, - $present-size, $dimension in $avatar-sizes - { - $size: $size-class; - - @if $dimension { - $size: $dimension; - } - - &.#{$avatar__class}--#{$size-class} { - @include avatar-size(rem-calc($size)); - - &.#{$avatar__class}--ooo:after { - @include avatar-overlay-style; - - font-size: rem-calc($size*0.5); - content: $pto-size; - } - - &.#{$avatar__class}--dnd:after { - @include avatar-overlay-style; - - font-size: rem-calc($size*0.5); - content: $dnd-size; - } - - &.#{$avatar__class}--call:after { - @include avatar-overlay-style; - - font-size: rem-calc($size*0.5); - content: $call-size; - } - - &.#{$avatar__class}--meeting:after { - @include avatar-overlay-style; - - font-size: rem-calc($size*0.5); - content: $meet-size; - } - - &.#{$avatar__class}--presenting:after { - @include avatar-overlay-style; - - font-size: rem-calc($size*0.5); - content: $present-size; - } - } - } - } -} diff --git a/scss/components/avatar/composite-avatar.scss b/scss/components/avatar/composite-avatar.scss deleted file mode 100644 index 0a181d99fb..0000000000 --- a/scss/components/avatar/composite-avatar.scss +++ /dev/null @@ -1,69 +0,0 @@ -/** @component avatar */ - -@include exports('md-composite-avatar') { - .#{$composite-avatar__class} { - position: relative; - display: inline-block; - - .#{$avatar__class}-wrapper:nth-child(1) { - position: absolute; - top: 0; - left: 0; - } - - .#{$avatar__class}-wrapper:nth-child(2) { - position: absolute; - right: 0; - bottom: 0; - } - - &.#{$composite-avatar__class} { - &--small, - &--28 { - @include avatar-size($composite-avatar--small__size); - - .#{$avatar__class} { - @include avatar-size( - $composite-avatar--small__avatar-size, - $composite-avatar--small__avatar-font-size - ); - } - } - - &--medium, - &--40 { - @include avatar-size($composite-avatar--medium__size); - - .#{$avatar__class} { - @include avatar-size( - $composite-avatar--medium__avatar-size, - $composite-avatar--medium__avatar-font-size - ); - } - } - - &--84 { - @include avatar-size($composite-avatar--84__size); - - .#{$avatar__class} { - @include avatar-size( - $composite-avatar--84__avatar-size, - $composite-avatar--84__avatar-font-size - ); - } - } - - &--large, - &--135 { - @include composite-avatar-size($composite-avatar--large__size); - - .#{$avatar__class} { - @include avatar-size( - $composite-avatar--large__avatar-size, - $composite-avatar--large__avatar-font-size - ); - } - } - } - } -} diff --git a/scss/components/avatar/examples/active.html b/scss/components/avatar/examples/active.html deleted file mode 100644 index 6a3dd58ec2..0000000000 --- a/scss/components/avatar/examples/active.html +++ /dev/null @@ -1,3 +0,0 @@ -
- TS -
diff --git a/scss/components/avatar/examples/bot.html b/scss/components/avatar/examples/bot.html deleted file mode 100644 index 7f74992a8b..0000000000 --- a/scss/components/avatar/examples/bot.html +++ /dev/null @@ -1,3 +0,0 @@ -
- R2 -
diff --git a/scss/components/avatar/examples/composite.html b/scss/components/avatar/examples/composite.html deleted file mode 100644 index 19f1b5f460..0000000000 --- a/scss/components/avatar/examples/composite.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- TS -
-
- Barbara -
-
diff --git a/scss/components/avatar/examples/dark.html b/scss/components/avatar/examples/dark.html deleted file mode 100644 index 71e7c55cef..0000000000 --- a/scss/components/avatar/examples/dark.html +++ /dev/null @@ -1,3 +0,0 @@ -
- Barbara -
diff --git a/scss/components/avatar/examples/default.html b/scss/components/avatar/examples/default.html deleted file mode 100644 index d10cadd6ea..0000000000 --- a/scss/components/avatar/examples/default.html +++ /dev/null @@ -1,3 +0,0 @@ -
- TS -
diff --git a/scss/components/avatar/examples/failure.html b/scss/components/avatar/examples/failure.html deleted file mode 100644 index 64f7eff396..0000000000 --- a/scss/components/avatar/examples/failure.html +++ /dev/null @@ -1,4 +0,0 @@ -
- TS - -
diff --git a/scss/components/avatar/examples/group.html b/scss/components/avatar/examples/group.html deleted file mode 100644 index 8f5330ca1d..0000000000 --- a/scss/components/avatar/examples/group.html +++ /dev/null @@ -1,3 +0,0 @@ -
- T -
diff --git a/scss/components/avatar/examples/inactive.html b/scss/components/avatar/examples/inactive.html deleted file mode 100644 index 19779665e8..0000000000 --- a/scss/components/avatar/examples/inactive.html +++ /dev/null @@ -1,3 +0,0 @@ -
- Barbara -
diff --git a/scss/components/avatar/examples/notification.html b/scss/components/avatar/examples/notification.html deleted file mode 100644 index c9e97b6b5b..0000000000 --- a/scss/components/avatar/examples/notification.html +++ /dev/null @@ -1,4 +0,0 @@ -
- TS - -
diff --git a/scss/components/avatar/examples/self.html b/scss/components/avatar/examples/self.html deleted file mode 100644 index 39deb90ab0..0000000000 --- a/scss/components/avatar/examples/self.html +++ /dev/null @@ -1,5 +0,0 @@ -
- - - -
diff --git a/scss/components/avatar/examples/status.html b/scss/components/avatar/examples/status.html deleted file mode 100644 index 1abc69f958..0000000000 --- a/scss/components/avatar/examples/status.html +++ /dev/null @@ -1,6 +0,0 @@ -
- TS -
-
- Barbara -
diff --git a/scss/components/avatar/examples/typing.html b/scss/components/avatar/examples/typing.html deleted file mode 100644 index bad3ffde7d..0000000000 --- a/scss/components/avatar/examples/typing.html +++ /dev/null @@ -1,8 +0,0 @@ -
- Barbara -
- - - -
-
diff --git a/scss/components/avatar/mixins.scss b/scss/components/avatar/mixins.scss deleted file mode 100644 index a57f312ed8..0000000000 --- a/scss/components/avatar/mixins.scss +++ /dev/null @@ -1,34 +0,0 @@ -@mixin avatar-size($size: $avatar__size, $font-size: $avatar__font-size) { - width: $size; - height: $size; - font-size: ($size * $avatar__font-factor); - line-height: ($size * $avatar__line-height-factor); -} - -@mixin avatar-contents-base() { - @include flex(); - - width: 100%; - height: 100%; - - @include border-radius($global-rounded); -} - -@mixin avatar-overlay-style( - $icon-color: $md-white-100, - $overlay-background: $black-40 -) { - @include avatar-contents-base(); - - position: absolute; - top: 0; - left: 0; - font-family: $icon-font-name; - color: $md-white-100; - background: $overlay-background; -} - -@mixin composite-avatar-size($size: $composite-avatar--medium__size) { - width: $size; - height: $size; -} diff --git a/scss/components/avatar/module.scss b/scss/components/avatar/module.scss deleted file mode 100644 index c2e73b6386..0000000000 --- a/scss/components/avatar/module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -@import '~@momentum-ui/icons/scss/mixins'; -@import '~@momentum-ui/icons/scss/variables'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../colors/settings-transparencies.scss"; -@import "../../colors/settings-legacy.scss"; -@import "../../settings/core.scss"; -@import "../../settings/focus.scss"; -@import "../../settings/media.scss"; -@import "../../settings/z-index.scss"; -@import "../../typography/settings.scss"; - -// Tools -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; - -// Generic -@import '../../generic/global'; - -// Avatar Specific -@import 'settings'; -@import 'mixins'; -@import 'avatar'; -@import 'composite-avatar'; diff --git a/scss/components/avatar/settings.scss b/scss/components/avatar/settings.scss deleted file mode 100644 index 490b391c5c..0000000000 --- a/scss/components/avatar/settings.scss +++ /dev/null @@ -1,193 +0,0 @@ -$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); diff --git a/scss/components/badge/badge.scss b/scss/components/badge/badge.scss deleted file mode 100644 index 1cffe86a90..0000000000 --- a/scss/components/badge/badge.scss +++ /dev/null @@ -1,96 +0,0 @@ -/** @component badge */ - -@include exports('md-badge') { - %#{$badge__class}, - .#{$badge__class} { - @include badge-base; - @include badge-size; - @include badge-style($badge--gray__background-color, $radius: true); - - &--round { - @include badge-style(false, $radius: $badge--round__radius); - - font-size: $badge__font-size__round; - } - - &--blue { - @include badge-style($badge--blue__background-color); - } - - &--mint { - @include badge-style($badge--mint__background-color); - } - - &--green { - @include badge-style($badge--green__background-color); - } - - &--yellow { - @include badge-style($badge--yellow__background-color); - } - - &--red { - @include badge-style($badge--red__background-color); - } - - &--orange { - @include badge-style($badge--orange__background-color); - } - - &--purple { - @include badge-style($badge--purple__background-color); - } - - &--cyan { - @include badge-style($badge--cyan__background-color); - } - - &--pastel { - @include badge-style( - $badge--gray-pastel__background-color, - false, - $badge--gray-pastel__font-color - ); - } - - &--blue-pastel { - @include badge-style( - $badge--blue-pastel__background-color, - false, - $badge--blue-pastel__font-color - ); - } - - &--mint-pastel { - @include badge-style( - $badge--mint-pastel__background-color, - false, - $badge--mint-pastel__font-color - ); - } - - &--green-pastel { - @include badge-style( - $badge--green-pastel__background-color, - false, - $badge--green-pastel__font-color - ); - } - - &--yellow-pastel { - @include badge-style( - $badge--yellow-pastel__background-color, - false, - $badge--yellow-pastel__font-color - ); - } - - &--red-pastel { - @include badge-style( - $badge--red-pastel__background-color, - false, - $badge--red-pastel__font-color - ); - } - } -} diff --git a/scss/components/badge/examples/dark.html b/scss/components/badge/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/badge/examples/default.html b/scss/components/badge/examples/default.html deleted file mode 100644 index 8eb60083b6..0000000000 --- a/scss/components/badge/examples/default.html +++ /dev/null @@ -1,12 +0,0 @@ - Default - Blue - Red - Yellow - Green - Mint - Default - Blue - Red - Yellow - Green - Mint diff --git a/scss/components/badge/examples/round.html b/scss/components/badge/examples/round.html deleted file mode 100644 index a7d34eeeac..0000000000 --- a/scss/components/badge/examples/round.html +++ /dev/null @@ -1,12 +0,0 @@ - Default - Blue - Red - Yellow - Green - Mint - Default - Blue - Red - Yellow - Green - Mint diff --git a/scss/components/badge/mixins.scss b/scss/components/badge/mixins.scss deleted file mode 100644 index 4be0368a25..0000000000 --- a/scss/components/badge/mixins.scss +++ /dev/null @@ -1,83 +0,0 @@ -/** @component badge */ - -@mixin badge-base() { - position: relative; - display: inline-flex; - height: rem-calc(20); - margin-bottom: auto; - font-family: $badge__font-family; - font-weight: $badge__font-weight; - line-height: $badge__font-line-height; - text-align: center; - text-decoration: none; - white-space: nowrap; - justify-content: center; - align-items: center; -} - -@mixin badge-size($padding: $badge__padding, $text-size: $badge__font-size) { - @if $padding { - padding: $padding; - } - - @if $text-size { - font-size: $text-size; - } -} - -@mixin badge-style( - $bg: $badge--blue__background-color, - $radius: false, - $color: $badge__font-color -) { - @if $bg { - $bg-lightness: lightness($bg); - - background-color: $bg; - - @if $color { - color: $color; - } - } - - @if $radius==true { - @include radius($badge__radius); - } @else if $radius { - @include radius($radius); - } -} - -@mixin badge-outline-style( - $bc: $badge--blue__background-color, - $radius: false, - $bg: transparent -) { - @if $bc { - color: $bc; - border: 1px solid $bc; - } - - background-color: $bg; -} - -@mixin badge( - $padding: $badge__padding, - $text-size: $badge__font-size, - $bg: $badge--blue__background-color, - $radius: false -) { - @include badge-base; - @include badge-size($padding, $text-size); - @include badge-style($bg, $radius); -} - -@mixin badge-variant($color) { - background-color: $color; - - &[href] { - &:hover, - &:focus { - background-color: darken($color, 10%); - } - } -} diff --git a/scss/components/badge/module.scss b/scss/components/badge/module.scss deleted file mode 100644 index 11f3935699..0000000000 --- a/scss/components/badge/module.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Icons -@import '~@momentum-ui/icons/scss/momentum-ui-icons'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../settings/core.scss"; -@import "../../settings/media.scss"; -@import "../../settings/z-index.scss"; -@import "../../typography/settings.scss"; - -// Tools -@import '../../tools/mixins/baseline'; -@import '../../tools/mixins/core'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/grid'; -@import '../../typography/mixins'; -@import '../../layouts/block-grid/mixins'; - -// Generic -@import '../../generic/normalize'; -@import '../../generic/global'; - -// Typography -@include brand-font-face-regular; - -// Layouts -@import '../../layouts/block-grid/block-grid'; -@import '../../layouts/layout-grid/layout-grid'; - -// Badge Specific -@import 'settings'; -@import 'mixins'; - -@import 'badge'; diff --git a/scss/components/badge/settings.scss b/scss/components/badge/settings.scss deleted file mode 100644 index f91cac92c5..0000000000 --- a/scss/components/badge/settings.scss +++ /dev/null @@ -1,69 +0,0 @@ -$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; diff --git a/scss/components/blog-article/examples/default.html b/scss/components/blog-article/examples/default.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/blog-list/examples/default.html b/scss/components/blog-list/examples/default.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/breadcrumbs/breadcrumbs.scss b/scss/components/breadcrumbs/breadcrumbs.scss deleted file mode 100644 index 96e3be08d7..0000000000 --- a/scss/components/breadcrumbs/breadcrumbs.scss +++ /dev/null @@ -1,41 +0,0 @@ -@include exports('md-breadcrumbs') { - .#{$prefix}-breadcrumbs { - @include crumb-container; - @include radius($breadcrumbs-radius); - - > * { - @include crumbs; - } - - border: none; - - li { - font-family: $brand-font-regular; - cursor: pointer; - &:before { - @include icon-arrow-right_12; - } - } - - & > *:before { - font-family: $icon-font-name; - } - - & > * span { - font-size: rem-calc(12); - } - - .side-panel & a { - color: $md-theme-50; - } - - & > *.current, - & > *.current a { - color: $md-gray-70; - } - } - - [aria-label='breadcrumbs'] [aria-hidden='true']:after { - content: '/'; - } -} diff --git a/scss/components/breadcrumbs/examples/default.html b/scss/components/breadcrumbs/examples/default.html deleted file mode 100644 index 4f611a819a..0000000000 --- a/scss/components/breadcrumbs/examples/default.html +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/scss/components/breadcrumbs/mixins.scss b/scss/components/breadcrumbs/mixins.scss deleted file mode 100644 index 06405ae34a..0000000000 --- a/scss/components/breadcrumbs/mixins.scss +++ /dev/null @@ -1,71 +0,0 @@ -@mixin crumb-container { - display: block; - padding: $breadcrumbs-padding; - overflow: hidden; - list-style: none; - margin-#{$default-float}: 0; -} - -@mixin crumbs { - float: $default-float; - margin: 0; - font-size: $breadcrumbs-font-size; - line-height: $breadcrumbs-font-size; - color: $breadcrumbs-font-color; - - &:hover a, - &:focus a { - text-decoration: $breadcrumbs-link-decor; - } - - a { - color: $breadcrumbs-font-color; - } - - &.current { - color: $breadcrumbs-font-color-current; - cursor: $cursor-default-value; - - a { - color: $breadcrumbs-font-color-current; - cursor: $cursor-default-value; - } - - &:hover, - &:hover a, - &:focus, - &:focus a { - text-decoration: none; - } - } - - &.unavailable { - color: $breadcrumbs-font-color-unavailable; - - a { - color: $breadcrumbs-font-color-unavailable; - } - - &:hover, - &:hover a, - &:focus, - a:focus { - color: $breadcrumbs-font-color-unavailable; - text-decoration: none; - cursor: $cursor-disabled-value; - } - } - - &:before { - position: relative; - top: 1px; - margin: 0 $breadcrumbs-side-padding; - color: $breadcrumbs-slash-color; - content: '#{$breadcrumbs-slash}'; - } - - &:first-child:before { - margin: 0; - content: ' '; - } -} diff --git a/scss/components/breadcrumbs/module.scss b/scss/components/breadcrumbs/module.scss deleted file mode 100644 index 71b155d45c..0000000000 --- a/scss/components/breadcrumbs/module.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Settings -@import '../../colors/settings-base.scss'; -@import '../../settings/core.scss'; -@import '../../settings/media.scss'; -@import '../../typography/settings.scss'; - -// Tools -@import '../../tools/mixins/baseline'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/grid-framework'; -@import '../../tools/mixins/grid'; -@import '../../typography/mixins'; -@import '../../typography/placeholders'; - -// Elements -@import '~@momentum-ui/icons/scss/mixins'; - -// Typography -@include brand-font-face-regular; - -// Breacrumbs Specific -ul { - margin: 0; -} - -@import 'settings'; -@import 'mixins'; -@import 'breadcrumbs'; diff --git a/scss/components/breadcrumbs/settings.scss b/scss/components/breadcrumbs/settings.scss deleted file mode 100644 index 1c615d7273..0000000000 --- a/scss/components/breadcrumbs/settings.scss +++ /dev/null @@ -1,19 +0,0 @@ -$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; diff --git a/scss/components/button-group/button-group.scss b/scss/components/button-group/button-group.scss deleted file mode 100644 index d32900d598..0000000000 --- a/scss/components/button-group/button-group.scss +++ /dev/null @@ -1,127 +0,0 @@ -/** @component button-group */ - -@include exports('md-button-group') { - .#{$button-group__class}:not(.#{$button-group__class}--unstyled) { - display: flex; - width: 100%; - - .#{$button__class} { - @include button-color( - $color: $button-group__color, - $color-hover: $button-group__color, - $color-active: $button-group-active__color, - $color-disabled: $button-group-disabled__color, - $bg: $button-group__background, - $bg-active: $button-group-active__background, - $bg-disabled: $button-group__background, - $bg-hover: $button-group-hover__background - ); - - min-width: 0; - padding: $button-group__padding; - margin-left: 0; - font-size: $button-group__font-size; - line-height: $button-group__line-height; - border: $button-group__border; - border-radius: 0; - - &:first-child { - @include border-left-radius($button-group__border-radius); - } - - &:not(:first-child) { - margin-left: -$button-group__border-size; - } - - &:last-child { - @include border-right-radius($button-group__border-radius); - } - - &.#{$button__class}--icon-group { - width: auto; - padding: $button-group-icon__padding; - - .md-icon { - fill: currentColor; - } - } - } - - &.#{$button-group__class} { - &--justified { - .#{$button__class}:not(.#{$button__class}--icon-group) { - flex-grow: 1; - width: 0; - } - } - - &--pill { - .#{$button__class} { - &:first-of-type { - @include border-left-radius($button-group__border-radius-pill); - } - - &:last-of-type { - @include border-right-radius($button-group__border-radius-pill); - } - - width: auto; - padding: $button-group-icon__padding; - - @include button-color( - $box-shadow: 0 2px 4px 0 $black-4, - $border: 1px solid, - $border-color: $black-12, - $border-color-css-var: --mdl-separator-primary, - $color: $button-group__color, - $color-css-var: --mdl-textColor-primary, - $color-hover: $button-group__color, - $color-hover-css-var: --mdl-textColor-primary, - $color-active: $button-group__color, - $color-active-css-var: --mdl-textColor-primary, - $color-disabled: $button-group-disabled__color, - $color-disabled-css-var: --mdl-textColor-disabled, - $bg: $button-group__background, - $bg-css-var: --mdl-background-primary, - $bg-disabled: $button-group__background, - $bg-disabled-css-var: --mdl-background-quaternary, - $bg-hover: $md-theme-10, - $bg-active: $md-theme-20, - ); - - &:focus { - background: $md-theme-10 - } - - .md-icon { - fill: currentColor; - } - } - } - - &--dark { - .#{$button__class} { - @include button-color( - $color: $button-group__color--dark, - $color-hover: $button-group__color--dark, - $color-active: $button-group-active__color--dark, - $color-disabled: $button-group-disabled__color--dark, - $bg: $button-group__background, - $bg-active: $button-group-active__background--dark, - $bg-disabled: $button-group__background, - $bg-hover: $button-group-hover__background--dark - ); - - padding: $button-group__padding--dark; - font-size: $button-group__font-size--dark; - line-height: $button-group__line-height--dark; - border: $button-group__border--dark; - - &.active { - font-family: $brand-font-bold; - } - } - } - } - } -} diff --git a/scss/components/button-group/examples/dark.html b/scss/components/button-group/examples/dark.html deleted file mode 100644 index 391428b0d9..0000000000 --- a/scss/components/button-group/examples/dark.html +++ /dev/null @@ -1,16 +0,0 @@ -
- - -
diff --git a/scss/components/button-group/examples/default.html b/scss/components/button-group/examples/default.html deleted file mode 100644 index 6e0df5cabd..0000000000 --- a/scss/components/button-group/examples/default.html +++ /dev/null @@ -1,24 +0,0 @@ -
- - - -
diff --git a/scss/components/button-group/examples/highlight-false.html b/scss/components/button-group/examples/highlight-false.html deleted file mode 100644 index f57914505d..0000000000 --- a/scss/components/button-group/examples/highlight-false.html +++ /dev/null @@ -1,21 +0,0 @@ -
- - - -
diff --git a/scss/components/button-group/examples/justified-false.html b/scss/components/button-group/examples/justified-false.html deleted file mode 100644 index bbb26bcd41..0000000000 --- a/scss/components/button-group/examples/justified-false.html +++ /dev/null @@ -1,11 +0,0 @@ -
- - - -
diff --git a/scss/components/button-group/examples/pill.html b/scss/components/button-group/examples/pill.html deleted file mode 100644 index a73bfbae20..0000000000 --- a/scss/components/button-group/examples/pill.html +++ /dev/null @@ -1,16 +0,0 @@ -
- - -
diff --git a/scss/components/button-group/module.scss b/scss/components/button-group/module.scss deleted file mode 100644 index 29ac379f35..0000000000 --- a/scss/components/button-group/module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Settings -@import '../../colors/settings-base.scss'; -@import '../../colors/settings-transparencies.scss'; -@import '../../settings/core.scss'; -@import '../../settings/media.scss'; -@import '../../typography/settings.scss'; -@import '../button/settings.scss'; -@import '../icon/settings.scss'; -@import '../../settings/focus.scss'; - -// Tools -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus.scss'; -@import '../button/mixins'; -@import '../../typography/mixins'; - -// Typography -@include brand-font-face-regular; - -// Component Specific -@import 'settings'; -@import 'button-group'; diff --git a/scss/components/button-group/settings.scss b/scss/components/button-group/settings.scss deleted file mode 100644 index a9ffdde7d3..0000000000 --- a/scss/components/button-group/settings.scss +++ /dev/null @@ -1,26 +0,0 @@ -$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; diff --git a/scss/components/button/button.scss b/scss/components/button/button.scss deleted file mode 100644 index b3bd701920..0000000000 --- a/scss/components/button/button.scss +++ /dev/null @@ -1,718 +0,0 @@ -/** @component button */ - -@include exports('md-button') { - [class|='#{$button__class}__container'] { - @include flex($display: inline-flex, $fd: column); - - width: $button-container__width; - - &[class$='--small'] { - width: $button-container--small__width; - } - } - - // Default styles applied outside of media query - %#{$button__class}, - .#{$button__class} { - @include button-base; - @include button-size( - $height: rem-calc(36), - $padding: $button__padding--36, - $radius: $button__radius--36 - ); - @include button-color( - $bg-css-var: --mdl-button-secondary-bg-color, - $bg-active-css-var: --mdl-button-secondary-pressed-bg-color, - $bg-disabled-css-var: --mdl-button-disabled-bg-color, - $bg-hover-css-var: --mdl-button-secondary-hover-bg-color, - $border-focus-css-var: --mdl-button-focus-ring-color, - $color-css-var: --mdl-button-secondary-text-color, - $color-active-css-var: --mdl-button-secondary-text-color, - $color-disabled-css-var: --mdl-button-disabled-text-color, - $color-hover-css-var: --mdl-button-secondary-text-color, - $focus: true - ); - @include single-transition( - background-color, - $button__transition-speed, - ease - ); - - .#{$dark-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button__background-color--dark, - $bg-hover: $button__background-color--hover--dark, - $bg-active: $button__background-color--active--dark, - $focus: true, - $border-focus: $focus__color--dark, - $color-disabled: $button__font-color--disabled--dark, - $bg-disabled: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button__background-color--contrast, - $bg-hover: $button__background-color--hover--contrast, - $bg-active: $button__background-color--active--contrast - ); - } - - .#{$contrast-class}.#{$dark-class} &, - .#{$contrast-class} .#{$dark-class} & { - @include button-color( - $color: $button__font-color, - $bg: $button__background-color--dark--contrast, - $bg-hover: $button__background-color--hover--dark--contrast, - $bg-active: $button__background-color--active--dark--contrast - ); - } - - + .#{$button__class}__label { - display: block; - width: 100%; - overflow: hidden; - text-align: center; - } - - &%#{$button__class}, - &.#{$button__class} { - &--expand { - @include button-size($full-width: true); - - display: block; - } - - &--left { - text-align: left; - text-indent: rem-calc(12); - } - - &--right { - padding-right: rem-calc(12); - text-align: right; - } - - &--none { - @include button-color( - $color: inherit, - $bg: transparent, - $bg-hover: transparent, - $bg-active: transparent, - $color-disabled: $button__link-color--disabled - ); - @include button-size($radius: 0, $padding: 0, $height: auto); - - min-width: 0; - } - - &--size-none { - @include button-size($radius: 0, $padding: 0, $height: auto); - - min-width: 0; - } - - &--28 { - @include button-size( - $height: rem-calc(28), - $padding: $button__padding--28, - $radius: $button__radius--28, - $font-size: $button__font-size--28, - $line-height: $button__line-height--28 - ); - } - - &--36 { - @include button-size( - $height: rem-calc(36), - $padding: $button__padding--36, - $radius: $button__radius--36 - ); - } - - &--40 { - @include button-size( - $height: rem-calc(40), - $padding: $button__padding--40, - $radius: $button__radius--40 - ); - } - - &--large, - &--52 { - @include button-size( - $height: rem-calc(52), - $padding: $button__padding--52, - $radius: $button__radius--52 - ); - } - - &--circle { - @include radius($button__radius--round); - - padding: 0; - - @include button-circle-size( - $size: $button__size--36, - $font-size: $button__font-size--36 - ); - - &[class*='--none'] { - @include button-color( - $color: inherit, - $bg: transparent, - $bg-hover: transparent, - $bg-active: transparent, - $color-disabled: $button__link-color--disabled - ); - @include button-circle-size($size: auto); - } - - &[class*='--size-none'] { - @include button-circle-size($size: auto); - } - - &[class*='--20'] { - @include button-circle-size( - $size: $button__size--20, - $font-size: $button__font-size--20 - ); - } - - &[class*='--28'] { - @include button-circle-size( - $size: $button__size--28, - $font-size: $button__font-size--28 - ); - } - - &[class*='--32'] { - @include button-circle-size( - $size: $button__size--32, - $font-size: $button__font-size--32 - ); - } - - &[class*='--36'] { - @include button-circle-size( - $size: $button__size--36, - $font-size: $button__font-size--36 - ); - } - - &[class*='--40'] { - @include button-circle-size( - $size: $button__size--40, - $font-size: $button__font-size--40 - ); - } - - &[class*='--large'], - &[class*='--44'] { - @include button-circle-size( - $size: $button__size--44, - $font-size: $button__font-size--44 - ); - } - - &[class*='--56'] { - @include button-circle-size( - $size: $button__size--56, - $font-size: $button__font-size--56 - ); - } - - &[class*='--68'] { - @include button-circle-size( - $size: $button__size--68, - $font-size: $button__font-size--68 - ); - } - - &[class*='--72'] { - @include button-circle-size( - $size: $button__size--72, - $font-size: $button__font-size--72 - ); - } - - &[class*='--84'] { - @include button-circle-size( - $size: $button__size--84, - $font-size: $button__font-size--84 - ); - } - - &.icon { - font-family: $icon-font-name; - } - } - - .md-loading { - position: absolute; - left: 50%; - transform: translateX(-50%); - } - - &--files { - @include button-color( - $bg-css-var: --mdl-button-files-normal-bg-color, - $bg-active-css-var: --mdl-button-files-pressed-bg-color, - $bg-hover-css-var: --mdl-button-files-hover-bg-color, - - $color-css-var: --mdl-button-files-normal-text-color, - $color-active-css-var: --mdl-button-files-pressed-text-color, - $color-hover-css-var: --mdl-button-files-hover-text-color, - - $color: $button__font-color, - $bg: transparent, - $bg-hover: $button--yellow__background-color--hover, - $bg-active: $button--yellow__background-color--active - ); - } - - &--whiteboards { - @include button-color( - $bg-css-var: --mdl-button-whiteboards-normal-bg-color, - $bg-active-css-var: --mdl-button-whiteboards-pressed-bg-color, - $bg-hover-css-var: --mdl-button-whiteboards-hover-bg-color, - - $color-css-var: --mdl-button-whiteboards-normal-text-color, - $color-active-css-var: --mdl-button-whiteboards-pressed-text-color, - $color-hover-css-var: --mdl-button-whiteboards-hover-text-color, - - $color: $button__font-color, - $bg: transparent, - $bg-hover: $button--purple__background-color--hover, - $bg-active: $button--purple__background-color--active - ); - } - - &--blue { - @include button-color( - $bg-css-var: --mdl-button-primary-bg-color, - $bg-active-css-var: --mdl-button-primary-pressed-bg-color, - $bg-disabled-css-var: --mdl-button-disabled-bg-color, - $bg-hover-css-var: --mdl-button-primary-hover-bg-color, - $border-focus-css-var: --mdl-button-focus-ring-color, - $color-css-var: --mdl-button-primary-text-color, - $color-active-css-var: --mdl-button-primary-text-color, - $color-disabled-css-var: --mdl-button-disabled-text-color, - $color-hover-css-var: --mdl-button-primary-text-color, - $color: $button__font-color--alt, - $bg: $button--blue__background-color, - $bg-hover: $button--blue__background-color--hover, - $bg-active: $button--blue__background-color--active - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--blue__background-color--contrast, - $bg-hover: $button--blue__background-color--hover--contrast, - $bg-active: $button--blue__background-color--active--contrast - ); - } - } - - &--blue-outline { - @include button-color( - $bg: $button--white__background-color, - $bg-css-var: --mdl-background-primary, - $bg-active: $button--blue__background-color--active, - $bg-active-css-var: --mdl-button-primary-pressed-bg-color, - $bg-disabled-css-var: --mdl-button-disabled-bg-color, - $bg-hover: $button--blue__background-color--hover, - $bg-hover-css-var: --mdl-button-primary-hover-bg-color, - $border: 1px solid, - $border-color: $button--blue__background-color, - $border-color-css-var: --mdl-button-primary-outline-color, - $color: $button--blue__background-color, - $color-css-var: --mdl-button-primary-outline-text-color, - $color-active-css-var: --mdl-button-primary-text-color, - $color-disabled: --mdl-button-disabled-text-color, - $color-hover: $button__font-color--alt, - $color-hover-css-var: --mdl-button-primary-text-color - ); - } - - &--red { - @include button-color( - $bg: $button--red__background-color, - $bg-css-var: --mdl-button-cancel-bg-color, - $bg-active: $button--red__background-color--active, - $bg-active-css-var: --mdl-button-cancel-pressed-bg-color, - $bg-disabled-css-var: --mdl-button-disabled-bg-color, - $bg-hover: $button--red__background-color--hover, - $bg-hover-css-var: --mdl-button-cancel-hover-bg-color, - $border-focus-css-var: --mdl-button-focus-ring-color, - $color: $button__font-color--alt, - $color-css-var: --mdl-button-cancel-text-color, - $color-active-css-var: --mdl-button-cancel-text-color, - $color-disabled-css-var: --mdl-button-disabled-text-color, - $color-hover-css-var: --mdl-button-cancel-text-color - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--red__background-color--contrast, - $bg-hover: $button--red__background-color--hover--contrast, - $bg-active: $button--red__background-color--active--contrast - ); - } - } - - &--green { - @include button-color( - $bg: $button--green__background-color, - $bg-css-var: --mdl-button-join-bg-color, - $bg-active: $button--green__background-color--active, - $bg-active-css-var: --mdl-button-join-pressed-bg-color, - $bg-disabled-css-var: --mdl-button-disabled-bg-color, - $bg-hover: $button--green__background-color--hover, - $bg-hover-css-var: --mdl-button-join-hover-bg-color, - $border-focus-css-var: --mdl-button-focus-ring-color, - $color: $button__font-color--alt, - $color-css-var: --mdl-button-join-text-color, - $color-active-css-var: --mdl-button-join-text-color, - $color-disabled-css-var: --mdl-button-disabled-text-color, - $color-hover-css-var: --mdl-button-join-text-color - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--green__background-color--contrast, - $bg-hover: $button--green__background-color--hover--contrast, - $bg-active: $button--green__background-color--active--contrast - ); - } - } - - &--ghost { - @include button-color( - $bg: transparent, - $bg-css-var: --mdl-button-ghost-bg-color, - $bg-active: $md-gray-20, - $bg-active-css-var: --mdl-background-quaternary, - $bg-disabled-css-var: --mdl-button-disabled-bg-color, - $bg-hover: $md-gray-10, - $bg-hover-css-var: --mdl-background-tertiary, - $border-focus-css-var: --mdl-button-focus-ring-color, - $color: $md-gray-100, - $color-css-var: --mdl-button-ghost-text-color, - $color-active-css-var: --mdl-button-ghost-text-color, - $color-disabled-css-var: --mdl-button-disabled-text-color, - $color-hover-css-var: --mdl-button-ghost-text-color - ); - } - - &--orange { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--orange__background-color, - $bg-hover: $button--orange__background-color--hover, - $bg-active: $button--orange__background-color--active - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--orange__background-color--contrast, - $bg-hover: $button--orange__background-color--hover--contrast, - $bg-active: $button--orange__background-color--active--contrast - ); - } - } - - &--yellow { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--yellow__background-color, - $bg-hover: $button--yellow__background-color--hover, - $bg-active: $button--yellow__background-color--active - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--yellow__background-color--contrast, - $bg-hover: $button--yellow__background-color--hover--contrast, - $bg-active: $button--yellow__background-color--active--contrast - ); - } - } - - &--mint { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--mint__background-color, - $bg-hover: $button--mint__background-color--hover, - $bg-active: $button--mint__background-color--active - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--mint__background-color--contrast, - $bg-hover: $button--mint__background-color--hover--contrast, - $bg-active: $button--mint__background-color--active--contrast - ); - } - } - - &--purple { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--purple__background-color, - $bg-hover: $button--purple__background-color--hover, - $bg-active: $button--purple__background-color--active - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--purple__background-color--contrast, - $bg-hover: $button--purple__background-color--hover--contrast, - $bg-active: $button--purple__background-color--active--contrast - ); - } - } - - &--pink { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--pink__background-color, - $bg-hover: $button--pink__background-color--hover, - $bg-active: $button--pink__background-color--active - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--pink__background-color--contrast, - $bg-hover: $button--pink__background-color--hover--contrast, - $bg-active: $button--pink__background-color--active--contrast - ); - } - } - - &--cyan { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--cyan__background-color, - $bg-hover: $button--cyan__background-color--hover, - $bg-active: $button--cyan__background-color--active - ); - - .#{$dark-class} & { - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - } - - .#{$contrast-class} & { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--cyan__background-color--contrast, - $bg-hover: $button--cyan__background-color--hover--contrast, - $bg-active: $button--cyan__background-color--active--contrast - ); - } - } - - &--white { - @include button-color( - $color: $md-black-100, - $bg: $button--white__background-color, - $bg-hover: $button--white__background-color--hover, - $bg-active: $button--white__background-color--active, - $box-shadow: $button--white__border, - $focus: true - ); - - .#{$dark-class} & { - box-shadow: none; - - @include button-color-disabled( - $color: $button__font-color--disabled--dark, - $bg: $button__color--disabled--dark - ); - @include button-color-focus; - } - } - - &--dark-gray { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--dark-gray__background-color, - $bg-hover: $button--dark-gray__background-color--hover, - $bg-active: $button--dark-gray__background-color--active - ); - } - - &--duck-egg { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--duck-egg__background-color, - $bg-hover: $button--duck-egg__background-color--hover, - $bg-active: $button--duck-egg__background-color--active - ); - } - - &--violet { - @include button-color( - $color: $button__font-color--alt, - $bg: $button--violet__background-color, - $bg-hover: $button--violet__background-color--hover, - $bg-active: $button--violet__background-color--active - ); - } - - &--link { - @include button-color( - $color: $button__font-color--alt, - $bg: transparent, - $bg-hover: $button__background-color--hover, - $bg-active: $button__background-color--active - ); - - color: $anchor-font-color; - } - - &--color-none { - @include button-color( - $color: inherit, - $bg: transparent, - $bg-hover: transparent, - $bg-active: transparent, - $color-disabled: $button__link-color--disabled - ); - } - } - - &[class*='#{$button__class}--icon'] { - .#{$icon__class} { - fill: inherit; - } - } - - &.#{$button__class}--icon { - @include button-color( - $color: inherit, - $color-css-var: --mdl-textColor-secondary, - $bg: transparent, - $bg-hover: transparent, - $bg-active: transparent, - $color-disabled: $button__link-color--disabled, - $color-disabled-css-var: --mdl-button-disabled-text-color, - ); - @include button-color-fill( - $fill: $md-gray-70, - $fill-css-var: --mdl-textColor-secondary, - $fill-hover: $md-theme-60, - $fill-hover-css-var: --mdl-button-primary-bg-color, - $fill-active: $md-theme-70, - $fill-active-css-var: --mdl-button-primary-hover-bg-color, - $fill-disabled: $button__link-color--disabled, - $fill-disabled-css-var: --mdl-textColor-disabled - ); - @include button-size($radius: 0, $padding: 0, $height: auto); - - min-width: 0; - - &.#{$button__class}--icon-white { - @include button-color-fill( - $fill: $icon--white__fill, - $fill-hover: $icon--white__fill--hover, - $fill-active: $icon--white__fill--active, - $fill-disabled: $icon--white__fill--disabled - ); - - .#{$contrast-class} & { - @include button-color-fill( - $fill: $icon--white__fill--contrast, - $fill-hover: $icon--white__fill--hover--contrast, - $fill-active: $icon--white__fill--active--contrast, - $fill-disabled: $icon--white__fill--disabled--contrast - ); - } - } - } - } - - // Remove default button element styling - .#{$button__class}--none, - %#{$button__class}--none { - @include button-color( - $color: inherit, - $bg: transparent, - $bg-hover: transparent, - $bg-active: transparent, - $color-disabled: $button__link-color--disabled - ); - @include button-size($radius: 0, $padding: 0, $height: auto); - - min-width: 0; - } -} diff --git a/scss/components/button/examples/circle.html b/scss/components/button/examples/circle.html deleted file mode 100644 index a2b46bcdc8..0000000000 --- a/scss/components/button/examples/circle.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/scss/components/button/examples/color.html b/scss/components/button/examples/color.html deleted file mode 100644 index e6ba676b8d..0000000000 --- a/scss/components/button/examples/color.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - - - -
diff --git a/scss/components/button/examples/dark.html b/scss/components/button/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/button/examples/default.html b/scss/components/button/examples/default.html deleted file mode 100644 index 96ac3dc69a..0000000000 --- a/scss/components/button/examples/default.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/scss/components/button/examples/disabled.html b/scss/components/button/examples/disabled.html deleted file mode 100644 index b5a04b3a23..0000000000 --- a/scss/components/button/examples/disabled.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - Disabled <a> -
diff --git a/scss/components/button/examples/expanded.html b/scss/components/button/examples/expanded.html deleted file mode 100644 index 162f0ba181..0000000000 --- a/scss/components/button/examples/expanded.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
- -
-
diff --git a/scss/components/button/examples/loading.html b/scss/components/button/examples/loading.html deleted file mode 100644 index 5ee2172c5e..0000000000 --- a/scss/components/button/examples/loading.html +++ /dev/null @@ -1,30 +0,0 @@ -
- - -
-
- - -
diff --git a/scss/components/button/examples/size.html b/scss/components/button/examples/size.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/button/examples/tags.html b/scss/components/button/examples/tags.html deleted file mode 100644 index 18d26b1c74..0000000000 --- a/scss/components/button/examples/tags.html +++ /dev/null @@ -1,6 +0,0 @@ -
- Link - - - -
diff --git a/scss/components/button/mixins.scss b/scss/components/button/mixins.scss deleted file mode 100644 index 52394882d4..0000000000 --- a/scss/components/button/mixins.scss +++ /dev/null @@ -1,327 +0,0 @@ -@mixin button-base() { - position: relative; - display: inline-block; - min-width: rem-calc(72); - font-family: $brand-font-regular; - font-size: $button__font-size; - font-weight: 450; - line-height: rem-calc(24); - text-align: $button__font-align; - text-decoration: none; - cursor: $cursor-pointer-value; - border: none; - border-radius: $button__radius--36; - - > * { - font-size: inherit; - } - - .#{$button__class}__children { - @include flex; - } - - + .#{$button__class} { - margin-left: rem-calc(5); - } - - &:active, - &.active-state { - &:focus, - &.focus-state { - box-shadow: none; - } - } - - &.disabled, - &.md-button--disabled, - &[disabled] { - pointer-events: none; - cursor: $button__cursor--disabled; - box-shadow: none; - - &:hover, - &:focus { - box-shadow: none; - } - } -} - -@mixin button-size( - $font-size: $button__font-size, - $full-width: false, - $height: false, - $line-height: $button__line-height, - $padding: false, - $radius: false -) { - font-size: $button__font-size; - line-height: $line-height; - - @if $radius { - @include radius($radius); - } - - @if $height { - height: $height; - - @if $height == auto or $height == initial or $height == inherit { - $height: 100%; - } - - .#{$prefix}-prepend { - margin-right: calc(#{$height} / 4); - } - .#{$prefix}-append { - margin-left: calc(#{$height} / 4); - } - } - - @if $padding { - padding: $padding; - } - - @if $full-width { - width: 100%; - } -} - -@mixin button-circle-size( - $font-size: false, - $line-height: $font-size, - $size: false -) { - @if $size { - width: $size; - height: $size; - min-width: 0; - min-height: 0; - } - - @if $font-size { - font-size: $font-size; - line-height: $line-height; - } -} - -@mixin button-color( - $bg: $button__background-color, - $bg-css-var: --null, - $bg-active: $button__background-color--active, - $bg-active-css-var: --null, - $bg-disabled: $button__color--disabled, - $bg-disabled-css-var: --null, - $bg-hover: $button__background-color--hover, - $bg-hover-css-var: --null, - $border: false, - $border-color: null, - $border-color-css-var: --null, - $border-hover: false, - $border-hover-css-var: --null, - $border-active: false, - $border-active-css-var: --null, - $border-focus: $button__border-color--focus, - $border-focus-css-var: --null, - $box-shadow: false, - $box-shadow-css-var: --null, - $color: $button__font-color, - $color-css-var: --null, - $color-active: $color, - $color-active-css-var: --null, - $color-disabled: $button__font-color--disabled, - $color-disabled-css-var: --null, - $color-hover: $color, - $color-hover-css-var: --null, - $disabled: true, - $focus: false, - $opacity: false, - $opacity-css-var: --null, - $outline: false, - $outline-css-var: --null -) { - color: $color; - color: var($color-css-var, $color); - background-color: $bg; - background-color: var($bg-css-var, $bg); - border-color: transparent; - - @if $border { - border: $border; - border-color: $border-color; - border-color: var($border-color-css-var, $border-color); - } - - @if $box-shadow { - box-shadow: $box-shadow; - box-shadow: var($box-shadow-css-var, $box-shadow); - } - - @if $disabled { - @include button-color-disabled( - $color: $color-disabled, - $color-css-var: $color-disabled-css-var, - $bg: $bg-disabled, - $bg-css-var: $bg-disabled-css-var, - $opacity: $opacity, - $opacity-css-var: $opacity-css-var - ); - } - - @if $focus { - @include button-color-focus( - $color: $border-focus, - $color-css-var: $color-css-var - ); - } - - @if $outline { - outline: $outline; - outline: var($outline-css-var, $outline); - } - - &:hover { - color: $color-hover; - color: var($color-hover-css-var, $color-hover); - background-color: $bg-hover; - background-color: var($bg-hover-css-var, $bg-hover); - - @if $border-hover { - border: $border-hover; - border: var($border-hover-css-var, $border-hover); - } - } - - &:active, - &.active { - color: $color-active; - color: var($color-active-css-var, $color-active); - background-color: $bg-active; - background-color: var($bg-active-css-var, $bg-active); - - @if $border-active { - border: $border-active; - border: var($border-active-css-var, $border-active); - } - } -} - -@mixin button-color-fill( - $fill: $button__font-color, - $fill-css-var: --null, - $fill-hover: $fill, - $fill-hover-css-var: --null, - $fill-active: $color, - $fill-active-css-var: --null, - $fill-disabled: $button__font-color--disabled, - $fill-disabled-css-var: --null, - $bg-disabled: transparent, - $bg-disabled-css-var: --null, - $focus: false -) { - fill: $fill; - fill: var($fill-css-var, $fill); - color: $fill; - color: var($fill-css-var, $fill); - - @include button-color-disabled( - $color: $fill-disabled, - $color-css-var: $fill-disabled-css-var, - $bg: $bg-disabled, - $bg-css-var: $bg-disabled - ); - - @if $focus { - @include button-color-focus( - $color: $border-focus, - $color-css-var: $color-css-var - ) - } - - &:hover, - &.hover-state { - fill: $fill-hover; - fill: var($fill-hover-css-var, $fill-hover); - color: $fill-hover; - color: var($fill-hover-css-var, $fill-hover); - } - - &:active, - &.active-state { - fill: $fill-active; - fill: var($fill-active-css-var, $fill-active); - color: $fill-active; - color: var($fill-active-css-var, $fill-active); - } -} - -@mixin button-color-focus( - $color: $button__border-color--focus, - $color-css-var: --null -) { - &:focus, - &.focus-state { - @include focus-styles; - } -} - -@mixin button-color-disabled( - $color: $button__font-color--disabled, - $color-css-var: --null, - $bg: $button__color--disabled, - $bg-css-var: --null, - $opacity: false, - $opacity-css-var: --null -) { - &.disabled, - &.md-button--disabled, - &[disabled] { - @if $opacity { - opacity: $opacity; - } @else { - color: $color; - color: var($color-css-var, $color); - fill: $color; - fill: var($color-css-var, $color); - background-color: $bg; - background-color: var($bg-css-var, $bg); - } - - &:hover, - &:focus { - color: $color; - color: var($color-css-var, $color); - fill: $color; - fill: var($color-css-var, $color); - background-color: $bg; - background-color: var($bg-css-var, $bg); - } - } -} - -@mixin button( - $bg: $button__background-color, - $bg-disabled: $button__color--disabled, - $bg-hover: $button__background-color--hover, - $bg-active: $button__background-color--active, - $border-focus: $button__border-color--focus, - $color: $button__font-color, - $color-disabled: $button__font-color--disabled, - $radius: false, - $full-width: false, - $focus: false, - $disabled: true -) { - @include button-base; - @include button-size($padding, $full-width, $radius); - @include button-color( - $color, - $color-disabled, - $bg, - $bg-active, - $bg-disabled, - $bg-hover, - $border-focus, - $disabled, - $focus - ); - @include single-transition(background-color, $button__transition-speed, ease); -} diff --git a/scss/components/button/module.scss b/scss/components/button/module.scss deleted file mode 100644 index 30f7671f78..0000000000 --- a/scss/components/button/module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../icon/settings'; -@import '../forms/settings'; -@import 'settings'; - -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/core'; -@import '../../tools/mixins/focus'; -@import 'mixins'; - -@import 'button'; diff --git a/scss/components/button/settings.scss b/scss/components/button/settings.scss deleted file mode 100644 index 09cb5094dc..0000000000 --- a/scss/components/button/settings.scss +++ /dev/null @@ -1,196 +0,0 @@ -$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; diff --git a/scss/components/call-control/examples/active.html b/scss/components/call-control/examples/active.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/call-control/examples/cancel.html b/scss/components/call-control/examples/cancel.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/call-control/examples/default.html b/scss/components/call-control/examples/default.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/call-control/examples/disable.html b/scss/components/call-control/examples/disable.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/card/card.scss b/scss/components/card/card.scss deleted file mode 100644 index 7d89cc4d74..0000000000 --- a/scss/components/card/card.scss +++ /dev/null @@ -1,38 +0,0 @@ -@include exports('md-card') { - .md-card { - padding: 0; - line-height: $base-line-height; - position: relative; - display: flex; - color: $text-color; - vertical-align: top; - background-color: $card-color; - border-radius: $card-border-radius; - box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18); - flex-direction: column; - &--clickable { - &:hover { - box-shadow: 2px 6px 10px rgba(52, 53, 55, 0.18); - } - &.active { - box-shadow: 1px 3px 8px rgba(52, 53, 55, 0.18); - } - &:focus { - box-shadow: 2px 6px 10px rgba(0,160,209,.75); - } - } - - .md-card-section { - width: 100%; - border-top-right-radius: $card-border-radius; - border-top-left-radius: $card-border-radius; - @include vr-spacing(ph, 1); - @include vr-spacing(pv, 1); - } - - .md-card-section--full { - padding: 0; - width: 100%; - } - } -} diff --git a/scss/components/card/examples/clickable.html b/scss/components/card/examples/clickable.html deleted file mode 100644 index 741c23f598..0000000000 --- a/scss/components/card/examples/clickable.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
-
- Barbara -
-
-

Title

-
Subtitle
-
-
-
- -
-
- Et netus et malesuada fames ac turpis egestas macecenas. Adipisccing at in tellus integer. -
-
- Link text -
-
diff --git a/scss/components/card/examples/content.html b/scss/components/card/examples/content.html deleted file mode 100644 index e09c5d6133..0000000000 --- a/scss/components/card/examples/content.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
-
- Barbara -
-
-

Title

-
Subtitle
-
-
-
- -
-
- Et netus et malesuada fames ac turpis egestas macecenas. Adipisccing at in tellus integer. -
-
- Link text -
-
diff --git a/scss/components/card/examples/content2.html b/scss/components/card/examples/content2.html deleted file mode 100644 index 3c9be2b40c..0000000000 --- a/scss/components/card/examples/content2.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
- -
-
-
PRODUCT ANNOUNCEMENT
-
-
- QWASI Makes Marketing Loyalty Programs Better with Collaboration -
-
-
Kevin Smith
-
June 4, 2018
-
-
diff --git a/scss/components/card/examples/default.html b/scss/components/card/examples/default.html deleted file mode 100644 index 707d23e659..0000000000 --- a/scss/components/card/examples/default.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
-

Title

-
Subtitle
-
-
- -
-
- content -
-
FOOTER
-
- diff --git a/scss/components/card/module.scss b/scss/components/card/module.scss deleted file mode 100644 index 92a9e78f72..0000000000 --- a/scss/components/card/module.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Settings -@import '../../settings/settings'; - -// Tools -@import '../../tools/mixins/baseline'; -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/grid'; -@import '../../tools/mixins/spacing'; -@import '../../typography/mixins'; -@import '../../components/avatar/mixins'; -@import '../../components/button/mixins'; -@import '../../components/link/mixins'; -@import '../../layouts/block-grid/mixins'; - -// Generic -@import '../../generic/normalize'; -@import '../../generic/global'; - -// Layouts -@import '../../layouts/block-grid/block-grid'; -@import '../../layouts/layout-grid/layout-grid'; - -// Components -@import '../../components/avatar/avatar'; -@import '../../components/button/button'; -@import '../../components/link/link'; - -// Typography -@import '../../typography/typography'; -@import '../../typography/placeholders'; -// Utilities - -@include brand-font-family-ciscoFont; - -@import 'card'; diff --git a/scss/components/card/settings.scss b/scss/components/card/settings.scss deleted file mode 100644 index aee16f2d31..0000000000 --- a/scss/components/card/settings.scss +++ /dev/null @@ -1,8 +0,0 @@ - -$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; diff --git a/scss/components/cdk-overlay/cdk-overlay.scss b/scss/components/cdk-overlay/cdk-overlay.scss deleted file mode 100644 index 2e6f440008..0000000000 --- a/scss/components/cdk-overlay/cdk-overlay.scss +++ /dev/null @@ -1,140 +0,0 @@ -// We want overlays to always appear over user content, so set a baseline -// very high z-index for the overlay container, which is where we create the new -// stacking context for all overlays. -$cdk-z-index-overlay-container: 1060; -$cdk-z-index-overlay: 1060; -$cdk-z-index-overlay-backdrop: 1060; - -// Background color for all of the backdrops -$cdk-overlay-dark-backdrop-background: $black-16; - -// Default backdrop animation is based on the Material Design swift-ease-out. -$backdrop-animation-duration: 400ms !default; -$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default; - - - .cdk-overlay-container, .cdk-global-overlay-wrapper { - // Disable events from being captured on the overlay container. - pointer-events: none; - - // The container should be the size of the viewport. - top: 0; - left: 0; - height: 100%; - width: 100%; - } - - // The overlay-container is an invisible element which contains all individual overlays. - .cdk-overlay-container { - position: fixed; - z-index: $cdk-z-index-overlay-container; - - &:empty { - // Hide the element when it doesn't have any child nodes. This doesn't - // include overlays that have been detached, rather than disposed. - display: none; - } - } - - // We use an extra wrapper element in order to use make the overlay itself a flex item. - // This makes centering the overlay easy without running into the subpixel rendering - // problems tied to using `transform` and without interfering with the other position - // strategies. - .cdk-global-overlay-wrapper { - display: flex; - position: absolute; - z-index: $cdk-z-index-overlay; - } - - // A single overlay pane. - .cdk-overlay-pane { - // Note: it's important for this one to start off `absolute`, - // in order for us to be able to measure it correctly. - position: absolute; - pointer-events: auto; - box-sizing: border-box; - z-index: $cdk-z-index-overlay; - - // For connected-position overlays, we set `display: flex` in - // order to force `max-width` and `max-height` to take effect. - display: flex; - max-width: 100%; - max-height: 100%; - } - - .cdk-overlay-backdrop { - // TODO(jelbourn): reuse sidenav fullscreen mixin. - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - z-index: $cdk-z-index-overlay-backdrop; - pointer-events: auto; - -webkit-tap-highlight-color: transparent; - transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function; - opacity: 0; - - &.cdk-overlay-backdrop-showing { - opacity: 1; - - // In high contrast mode the rgba background will become solid so we need to fall back - // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast` - // mixin, because we can't normalize the import path to the _a11y.scss both for the - // source and when this file is distributed. See #10908. - @media screen and (-ms-high-contrast: active) { - opacity: 0.6; - } - } - } - - .cdk-overlay-dark-backdrop { - background: $cdk-overlay-dark-backdrop-background; - } - - .cdk-overlay-transparent-backdrop { - // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from - // capturing the user's mouse scroll events. Since we also can't use something like - // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at - // all and using `opacity` to make the element transparent. - &, &.cdk-overlay-backdrop-showing { - opacity: 0; - } - } - - // Overlay parent element used with the connected position strategy. Used to constrain the - // overlay element's size to fit within the viewport. - .cdk-overlay-connected-position-bounding-box { - position: absolute; - z-index: $cdk-z-index-overlay; - - // We use `display: flex` on this element exclusively for centering connected overlays. - // When *not* centering, a top/left/bottom/right will be set which overrides the normal - // flex layout. - display: flex; - - // We use the `column` direction here to avoid some flexbox issues in Edge - // when using the "grow after open" options. - flex-direction: column; - - // Add some dimensions so the element has an `innerText` which some people depend on in tests. - min-width: 1px; - min-height: 1px; - } - - // Used when disabling global scrolling. - .cdk-global-scrollblock { - position: fixed; - - // Necessary for the content not to lose its width. Note that we're using 100%, instead of - // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width - // that the element had before we made it `fixed`. - width: 100%; - - // Note: this will always add a scrollbar to whatever element it is on, which can - // potentially result in double scrollbars. It shouldn't be an issue, because we won't - // block scrolling on a page that doesn't have a scrollbar in the first place. - overflow-y: scroll; - } - diff --git a/scss/components/checkbox/checkbox.scss b/scss/components/checkbox/checkbox.scss deleted file mode 100644 index 8c22d8fc0e..0000000000 --- a/scss/components/checkbox/checkbox.scss +++ /dev/null @@ -1,134 +0,0 @@ -/** @component checkbox */ - -@include exports('md-checkbox') { - .#{$checkbox__class}-group { - @include vr-spacing(mb, 1.5); - - &:last-child { - margin-bottom: 0; - } - } - - .#{$checkbox__class} { - @include checkbox-color( - $border-color: $input__border-color, - $border-color-css-var: --mds-color-theme-outline-input-normal, - $background-color: $input__background, - $background-color-css-var: --mds-color-theme-control-inactive-normal, - $background-color--disabled: $form-control__background, - $background-color--disabled-css-var: --mds-color-theme-control-inactive-hover, - $background-color--hover: $input__background--hover, - $background-color--hover-css-var: --mds-color-theme-control-inactive-hover, - $background-color--checked: $form-control__background--checked, - $background-color--checked-css-var: --mds-color-theme-control-active-normal, - $background-color--checked-hover: $form-control__background--checked-hover, - $background-color--checked-hover-css-var: --mds-color-theme-control-active-hover, - $label-color: $form-control__label, - $label-color-css-var: --mds-color-theme-text-primary-normal - ); - - .#{$checkbox__class}__input { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0 0 0 0); - border: 0; - - &:checked, - &:indeterminate, - &.indeterminate { - + .#{$checkbox__class}__label { - &:before { - color: $form-control__content; - color: var(--mds-color-theme-common-inverted-text-primary-normal); - cursor: pointer; - } - } - - &:disabled { - + .#{$checkbox__class}__label { - color: var(--mds-color-theme-text-primary-disabled); - - &:before { - color: var(--mds-color-theme-text-primary-normal); - } - } - } - - } - - &:disabled, - &.disabled { - + .#{$checkbox__class}__label { - cursor: default; - color: var(--mds-color-theme-text-primary-disabled) !important; - - &:before { - cursor: default; - } - } - ~ .#{$prefix}-input__help-text { - color: var(--mds-color-theme-text-primary-disabled) !important; - } - } - - &:indeterminate, - &.indeterminate { - + .#{$checkbox__class}__label { - &:before { - @include icon-minus_12; - } - } - } - } - - .#{$checkbox__class}__label { - display: flex; - line-height: $checkbox__size; - font-size: $checkbox__label-size; - cursor: pointer; - - &:before { - @include flex(); - @include border-radius(2px); - @include icon-check_12; - - flex-shrink: 0; - width: $checkbox__size; - height: $checkbox__size; - margin-right: rem-calc(12); - font-family: $icon-font-name; - font-size: $checkbox__icon-size; - font-style: normal; - line-height: $checkbox__icon-size; - color: transparent; - border: none; - transition: 300ms ease-in-out all; - } - } - - &.#{$prefix}-input-container { - @include vr-spacing(mb, 0.5); - - display: flex; - flex-direction: column; - } - - .#{$checkbox__class}-horizontal { - display: inline-block; - margin-right: 20px; - } - - .form-horizontal .#{$checkbox__class}-horizontal { - padding-top: 6px; - } - - .#{$prefix}-input__help-text { - @include input__help-text(); - @include vr-spacing(pl, 2); - } - } -} diff --git a/scss/components/checkbox/examples/dark.html b/scss/components/checkbox/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/checkbox/examples/default.html b/scss/components/checkbox/examples/default.html deleted file mode 100644 index fe52a00a25..0000000000 --- a/scss/components/checkbox/examples/default.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - -
diff --git a/scss/components/checkbox/examples/disabled.html b/scss/components/checkbox/examples/disabled.html deleted file mode 100644 index e045ebfda7..0000000000 --- a/scss/components/checkbox/examples/disabled.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - -
diff --git a/scss/components/checkbox/examples/group.html b/scss/components/checkbox/examples/group.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/checkbox/examples/indeterminate.html b/scss/components/checkbox/examples/indeterminate.html deleted file mode 100644 index 4b82e05053..0000000000 --- a/scss/components/checkbox/examples/indeterminate.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - -
diff --git a/scss/components/checkbox/examples/kitchen-sink.html b/scss/components/checkbox/examples/kitchen-sink.html deleted file mode 100644 index 291dd628fb..0000000000 --- a/scss/components/checkbox/examples/kitchen-sink.html +++ /dev/null @@ -1,406 +0,0 @@ -
-
-
-
- -
-
- -
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
- -
-
- -
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
-
- -
-
- -
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
- -
-
- -

- This is help text for the md-input checkbox -

-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
diff --git a/scss/components/checkbox/examples/nested.html b/scss/components/checkbox/examples/nested.html deleted file mode 100644 index 15a6d824f4..0000000000 --- a/scss/components/checkbox/examples/nested.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
- - -
-
- - -
-
- - -
-
- - -
-
diff --git a/scss/components/checkbox/mixins.scss b/scss/components/checkbox/mixins.scss deleted file mode 100644 index 1a88cf970f..0000000000 --- a/scss/components/checkbox/mixins.scss +++ /dev/null @@ -1,101 +0,0 @@ -@mixin checkbox-color( - $border-color: null, - $border-color-css-var: --null, - $background-color: null, - $background-color-css-var: --null, - $background-color--disabled: null, - $background-color--disabled-css-var: --null, - $background-color--hover: null, - $background-color--hover-css-var: --null, - $background-color--checked: null, - $background-color--checked-css-var: --null, - $background-color--checked-hover: null, - $background-color--checked-hover-css-var: --null, - $label-color: null, - $label-color-css-var: --null, -) { - .#{$checkbox__class}__input { - // Base Checkbox - Not Checked - + .#{$checkbox__class}__label { - font-family: $input__font-family; - color: $label-color; - color: var($label-color-css-var, $label-color); - - &:before { - background-color: $background-color; - background-color: var($background-color-css-var, $background-color); - border: 1px solid $border-color; - border: 1px solid var($border-color-css-var, $border-color); - } - - &:hover, - &.hover { - &:before { - background-color: $background-color--hover; - background-color: var($background-color--hover-css-var, $background-color--hover); - } - } - } - - &:focus, - &.focus { - + .#{$checkbox__class}__label { - &:before { - @include focus-styles; - } - } - } - /** Checked */ - &:checked, - &:indeterminate, - &.indeterminate { - + .#{$checkbox__class}__label { - &:before { - background-color: $background-color--checked; - background-color: var($background-color--checked-css-var, $background-color--checked); - border: none; - color: var(--mds-color-theme-common-inverted-text-primary-normal); - } - - &:hover, - &.hover { - &:before { - background-color: $background-color--checked-hover; - background-color: var($background-color--checked-hover-css-var, $background-color--checked-hover); - } - } - } - } - /** Disabled Settings */ - &:disabled, - &.disabled { - + .#{$checkbox__class}__label { - &:before { - background-color: $background-color--disabled; - background-color: var($background-color--disabled-css-var, $background-color--disabled); - border: none; - } - } - /** Disabled--Checked/Indeterminate */ - &:checked, - &:indeterminate, - &.indeterminate { - + .#{$checkbox__class}__label { - &:before { - background-color: $background-color--checked; - background-color: var($background-color--checked-css-var, $background-color--checked); - border: none; - } - - &:hover, - &.hover { - &:before { - background-color: $background-color--checked; - background-color: var($background-color--checked-css-var, $background-color--checked); - } - } - } - } - } - } -} diff --git a/scss/components/checkbox/module.scss b/scss/components/checkbox/module.scss deleted file mode 100644 index 05a66905d3..0000000000 --- a/scss/components/checkbox/module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Icons -@import '~@momentum-ui/icons/scss/mixins'; -@import '~@momentum-ui/icons/scss/variables'; - -// Settings -@import '../../colors/settings-base.scss'; -@import '../../colors/settings-transparencies.scss'; -@import '../../settings/core.scss'; -@import '../../settings/focus.scss'; -@import '../../settings/media.scss'; -@import '../../typography/settings.scss'; -@import '../input/settings.scss'; -@import '../checkbox/settings.scss'; -@import '../forms/settings.scss'; -@import '../loader/settings.scss'; - -// Tools -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/spacing'; -@import '../../typography/mixins'; -@import '../../components/input/mixins'; - -@include brand-font-face-regular; - -// Component Specific -@import 'mixins'; -@import 'checkbox'; diff --git a/scss/components/checkbox/settings.scss b/scss/components/checkbox/settings.scss deleted file mode 100644 index 5641b8553e..0000000000 --- a/scss/components/checkbox/settings.scss +++ /dev/null @@ -1,5 +0,0 @@ -$checkbox__class: '#{$prefix}-checkbox'; - -$checkbox__size: rem-calc(16); -$checkbox__icon-size: rem-calc(12); -$checkbox__label-size: rem-calc(16); diff --git a/scss/components/chip/chip.scss b/scss/components/chip/chip.scss deleted file mode 100644 index 84a3ba3519..0000000000 --- a/scss/components/chip/chip.scss +++ /dev/null @@ -1,45 +0,0 @@ -/** @component chip */ - -@include exports('md-chip') { - .#{$prefix}-chip { - max-width: 400px; - background-color: $md-gray-20; - background-color: var(--mdl-background-tertiary, $md-gray-20); - border-radius: 4px; - - @include flex; - - &-left { - width: 20%; - padding: 10px; - text-align: center; - - @include flex; - - &.recording { - background-color: $md-orange-50; - } - - &.file { - background-color: $md-gray-30; - background-color: var(--mdl-background-tertiary, $md-gray-20); - } - } - - &-center { - flex: 1; - padding: 0 10px; - } - - &-right { - width: 20%; - padding: 10px; - - @include flex; - } - - &__title { - font-weight: 750; - } - } -} diff --git a/scss/components/chip/examples/default.html b/scss/components/chip/examples/default.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/chip/examples/file.html b/scss/components/chip/examples/file.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/chip/examples/recording.html b/scss/components/chip/examples/recording.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/chip/module.scss b/scss/components/chip/module.scss deleted file mode 100644 index 3f7dde6179..0000000000 --- a/scss/components/chip/module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../settings/core'; -@import '../../colors/settings'; -@import '../../tools/mixins/flex'; - -@import 'chip'; diff --git a/scss/components/close-wrapper/close-wrapper.scss b/scss/components/close-wrapper/close-wrapper.scss deleted file mode 100644 index 3e9cbe9993..0000000000 --- a/scss/components/close-wrapper/close-wrapper.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** @component close-wrapper */ - -@include exports('md-close-wrapper') { - .#{$prefix}-close-wrapper { - position: relative; - display: inline-block; - - &__action { - position: absolute; - top: -10px; - right: -10px; - z-index: $zindex-close; - } - } -} diff --git a/scss/components/close-wrapper/module.scss b/scss/components/close-wrapper/module.scss deleted file mode 100644 index 0079f9d25a..0000000000 --- a/scss/components/close-wrapper/module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../settings/core'; -@import '../../settings/z-index'; - -@import 'close-wrapper'; diff --git a/scss/components/close/close.scss b/scss/components/close/close.scss deleted file mode 100644 index 55f1ecd739..0000000000 --- a/scss/components/close/close.scss +++ /dev/null @@ -1,55 +0,0 @@ -/** @component close */ - -@include exports('md-close') { - .#{$close__class} { - float: right; - font-size: ($font-size-base * 1.5); - font-weight: 750; - line-height: 1; - color: $close__font-color; - color: var(--mdl-textColor-primary, $close__font-color); - text-shadow: 0 1px 0 $md-white-100; - text-shadow: 0 1px 0 var(--mdl-background-primary, $md-white-100); - - &:hover, - &:focus { - color: $close__font-color--focus; - color: var(--mdl-input-background-theme-color, $close__font-color--focus); - text-decoration: none; - cursor: pointer; - } - } -} - -button.#{$close__class} { - min-width: initial; - padding: 0; - font-weight: 450; - cursor: pointer; - background: transparent; - border-radius: 0; - - @include easing-transition(all, 150ms, ease); - - &:before { - @include icon-cancel_28; - - font-family: $icon-font-name; - vertical-align: middle; - } - - &:hover { - color: $close__font-color--hover; - color: var(--mdl-input-background-theme-color, $close__font-color--hover); - } - - &:focus { - color: $close__font-color--hover; - color: var(--mdl-input-background-theme-hover, $close__font-color--hover); - } - - &:active { - color: $close__font-color--active; - color: var(--mdl-input-background-theme-active, $close__font-color--active); - } -} diff --git a/scss/components/close/module.scss b/scss/components/close/module.scss deleted file mode 100644 index d8dff47f9c..0000000000 --- a/scss/components/close/module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import 'settings'; - -@import '~@momentum-ui/icons/scss/mixins'; -@import '../../tools/mixins/easing'; - -@import 'close'; diff --git a/scss/components/close/settings.scss b/scss/components/close/settings.scss deleted file mode 100644 index 13a8103f84..0000000000 --- a/scss/components/close/settings.scss +++ /dev/null @@ -1,6 +0,0 @@ -$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; diff --git a/scss/components/coachmark/coachmark.scss b/scss/components/coachmark/coachmark.scss deleted file mode 100644 index 63e49ceb21..0000000000 --- a/scss/components/coachmark/coachmark.scss +++ /dev/null @@ -1,79 +0,0 @@ -/** @component coachmark */ - -@include exports('md-coachmark') { - .md-coachmark { - &.#{$prefix}-event-overlay { - @each $direction in (top, right, bottom, left) { - &--#{$direction} { - > .#{$prefix}-event-overlay__arrow { - border-#{$direction}-color: $md-cobalt-70; - - &::after { - display: none; - } - } - } - } - - > .#{$prefix}-event-overlay__children { - color: white; - background-color: $md-cobalt-70; - border: none; - box-shadow: $select--children__box-shadow; - - > [class$='__container'] { - @include flex($fd: column, $fw: wrap); - - width: 100%; - padding: (rem-calc(24) rem-calc(16) rem-calc(19) rem-calc(16)); - - > [class$='__header'] { - margin-bottom: rem-calc(15); - font-family: $brand-font-bold; - font-size: rem-calc(14); - font-weight: 750; - line-height: rem-calc(22); - color: $md-white-100; - text-align: center; - } - - > [class$='__subheader'] { - margin-bottom: rem-calc(15); - font-size: rem-calc(14); - line-height: rem-calc(22); - color: $md-white-100; - text-align: center; - } - - > .#{$button__class} { - @include button-color( - $color: $md-white-100, - $color-hover: $md-cobalt-70, - $color-active: $md-cobalt-70, - $bg: transparent, - $bg-hover: $md-gray-10, - $bg-active: $md-white-100, - $border: 1px solid $md-white-100, - $border-hover: 1px solid $md-gray-10, - $border-active: 1px solid $md-white-100 - ); - - .#{$dark-class} & { - @include button-color( - $color: $md-white-100, - $color-hover: $md-cobalt-70, - $color-active: $md-cobalt-70, - $bg: transparent, - $bg-hover: $md-gray-10, - $bg-active: $md-white-100, - $border: 1px solid $md-white-100, - $border-hover: 1px solid $md-gray-10, - $border-active: 1px solid $md-white-100 - ); - } - } - } - } - } - } -} diff --git a/scss/components/coachmark/examples/content.html b/scss/components/coachmark/examples/content.html deleted file mode 100644 index ecef09e23e..0000000000 --- a/scss/components/coachmark/examples/content.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
-
-
-
Content Here
-
-
-
diff --git a/scss/components/coachmark/examples/default.html b/scss/components/coachmark/examples/default.html deleted file mode 100644 index e41eae88d9..0000000000 --- a/scss/components/coachmark/examples/default.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
-
-
-
Header prop(node)
-
Subheader prop(node)
-
-
-
diff --git a/scss/components/coachmark/module.scss b/scss/components/coachmark/module.scss deleted file mode 100644 index f4b773790e..0000000000 --- a/scss/components/coachmark/module.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import "../../tools/functions/core"; -@import '../../tools/mixins/core'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../colors/settings-transparencies.scss"; -@import "../../settings/core.scss"; -@import "../../settings/focus.scss"; -@import "../../settings/media.scss"; -@import "../../typography/settings.scss"; -@import "../input/settings.scss"; -@import "../button/settings.scss"; -@import "../checkbox/settings.scss"; -@import "../select/settings.scss"; - -// Tools -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../typography/mixins'; -@import '../../components/button/mixins'; -@import '../../components/checkbox/mixins'; - -@include brand-font-face-regular; -@include brand-font-face-bold; - -// Component Specific -@import 'coachmark'; diff --git a/scss/components/collapse-button/collapse-button.scss b/scss/components/collapse-button/collapse-button.scss deleted file mode 100644 index 6f69b24757..0000000000 --- a/scss/components/collapse-button/collapse-button.scss +++ /dev/null @@ -1,35 +0,0 @@ -/* @component collapse-button */ - -@include exports('md-collapse-button') { - .#{$prefix}-collapse-button { - &.#{$prefix}-button { - width: $collapse-button__width; - height: $collapse-button__height; - min-width: 0; - padding: 0; - background: $collapse-button__background; - border-radius: $collapse-button__border-radius; - - .#{$prefix}-icon { - color: $collapse-button__color; - fill: $collapse-button__color; - } - - &:hover { - background: $collapse-button__background--focus; - } - } - - &.#{$prefix}-collapse-button--right { - transform: rotate(180deg); - } - - &.#{$prefix}-collapse-button--top { - transform: rotate(90deg); - } - - &.#{$prefix}-collapse-button--bottom { - transform: rotate(270deg); - } - } -} diff --git a/scss/components/collapse-button/examples/collapsed.html b/scss/components/collapse-button/examples/collapsed.html deleted file mode 100644 index 3243819ab0..0000000000 --- a/scss/components/collapse-button/examples/collapsed.html +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/scss/components/collapse-button/examples/expanded.html b/scss/components/collapse-button/examples/expanded.html deleted file mode 100644 index f5827c9f12..0000000000 --- a/scss/components/collapse-button/examples/expanded.html +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/scss/components/collapse-button/module.scss b/scss/components/collapse-button/module.scss deleted file mode 100644 index 0d9ea68c79..0000000000 --- a/scss/components/collapse-button/module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import 'settings'; - -@import 'collapse-button'; diff --git a/scss/components/collapse-button/settings.scss b/scss/components/collapse-button/settings.scss deleted file mode 100644 index bd544483db..0000000000 --- a/scss/components/collapse-button/settings.scss +++ /dev/null @@ -1,8 +0,0 @@ -$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; diff --git a/scss/components/combo-box/combo-box.scss b/scss/components/combo-box/combo-box.scss deleted file mode 100644 index f795b96a96..0000000000 --- a/scss/components/combo-box/combo-box.scss +++ /dev/null @@ -1,24 +0,0 @@ -/** @component combo-box */ - -@include exports('md-combo-box') { - .#{$combo-box__class} { - .#{$prefix}-event-overlay__children { - max-height: $dropdown-height; - overflow: auto; - } - - .#{$list-item__class} { - &-header { - height: rem-calc(36); - padding: 0 rem-calc(16); - margin: 0; - border-bottom: 1px solid $black-08; - - .#{$list-item__class}__header { - line-height: rem-calc(22); - color: $md-gray-70; - } - } - } - } -} diff --git a/scss/components/combo-box/examples/clear.html b/scss/components/combo-box/examples/clear.html deleted file mode 100644 index ce5a4fcbeb..0000000000 --- a/scss/components/combo-box/examples/clear.html +++ /dev/null @@ -1,26 +0,0 @@ - -
-
-
-
a
-
ab
-
abc
-
-
-
diff --git a/scss/components/combo-box/examples/dark.html b/scss/components/combo-box/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/combo-box/examples/default.html b/scss/components/combo-box/examples/default.html deleted file mode 100644 index acdffcfc14..0000000000 --- a/scss/components/combo-box/examples/default.html +++ /dev/null @@ -1,17 +0,0 @@ - -
-
-
-
a
-
ab
-
abc
-
-
-
diff --git a/scss/components/combo-box/module.scss b/scss/components/combo-box/module.scss deleted file mode 100644 index b8b4ed7a47..0000000000 --- a/scss/components/combo-box/module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import "../../tools/functions/core"; -@import '../../tools/mixins/core'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../colors/settings-transparencies.scss"; -@import "../../settings/core.scss"; -@import "../../settings/media.scss"; -@import "../list-item/settings.scss"; - -// Component Specific -@import 'settings'; -@import 'combo-box'; diff --git a/scss/components/combo-box/settings.scss b/scss/components/combo-box/settings.scss deleted file mode 100644 index a970a278ad..0000000000 --- a/scss/components/combo-box/settings.scss +++ /dev/null @@ -1 +0,0 @@ -$combo-box__class: '#{$prefix}-combo-box'; diff --git a/scss/components/components.scss b/scss/components/components.scss deleted file mode 100644 index 67810c0559..0000000000 --- a/scss/components/components.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import 'accordion/accordion'; -@import 'activity-button/activity-button'; -@import 'alert/alert'; -@import 'alert-banner/alert-banner'; -@import 'avatar/avatar'; -@import 'avatar/composite-avatar'; -@import 'badge/badge'; -@import 'breadcrumbs/breadcrumbs'; -@import 'button/button'; -@import 'button-group/button-group'; -@import 'card/card'; -@import 'cdk-overlay/cdk-overlay'; -@import 'checkbox/checkbox'; -@import 'chip/chip'; -@import 'close/close'; -@import 'close-wrapper/close-wrapper'; -@import 'coachmark/coachmark'; -@import 'collapse-button/collapse-button'; -@import 'combo-box/combo-box'; -@import 'content-item/content-item'; -@import 'date-picker/date-picker'; -@import 'drawer/drawer'; -@import 'date-range-picker/date-range-picker'; -@import 'editable-textfield/editable-textfield'; -@import 'overlay/event-overlay'; -@import 'footer/footer'; -@import 'hero/hero'; -@import 'icon/icon'; -@import 'input/input'; -@import 'input-phone-number/input-phone-number'; -@import 'label/label'; -@import 'lightbox/lightbox'; -@import 'link/link'; -@import 'list-item/list-item'; -@import 'list-separator/list-separator'; -@import 'meeting-list/list-item-meeting'; -@import 'loading/loading'; -@import 'loader/loader'; -@import 'menu/menu'; -@import 'modal/modal'; -@import 'panel/panel'; -@import 'page-header/page-header-sites'; -@import 'pagination/pagination'; -@import 'popover/popover'; -@import 'progress/progress'; -@import 'radio/radio'; -@import 'select/select'; -@import 'sidebar/sidebar'; -@import 'slider/slider'; -@import 'social-list/social-list'; -@import 'space-list/space-list-item'; -@import 'stepper/stepper'; -@import 'tabs/tabs'; -@import 'time-picker/time-picker'; -@import 'toggle-switch/toggle-switch'; -@import 'tooltip/tooltip'; -@import 'top-bar/top-bar'; diff --git a/scss/components/content-item/content-item.scss b/scss/components/content-item/content-item.scss deleted file mode 100644 index 027dbe98e6..0000000000 --- a/scss/components/content-item/content-item.scss +++ /dev/null @@ -1,322 +0,0 @@ -@include exports('md-content-item') { - .md-content { - @include flex($jc: center, $ai: center); - - width: 348px; - height: 196px; - background-size: contain; - border-radius: 4px; - box-shadow: 0 0 0 1px $black-06; - - &:hover .md-content__hover { - display: flex; - } - - &__gif { - position: absolute; - top: 0.2rem; - right: 0.5rem; - - &--oneOne { - right: 2.6rem; - } - - &--fourThree { - right: 1.3rem; - } - } - - &__container { - @include flex($fd: column, $jc: flex-start); - - width: 204px; - height: 190px; - } - - &__chat-inner-container { - position: relative; - width: 348px; - height: 230px; - margin-bottom: 8px; - background-color: $md-gray-10; - background-color: var(--mdl-background-tertiary, $md-gray-10); - border-radius: 4px; - box-shadow: 0 0 0 1px $black-20; - - &:hover .md-content__hover { - visibility: visible; - } - } - - &__chat-wide-container { - width: 348px; - height: 196px; - margin-bottom: 8px; - background-color: $md-gray-10; - background-color: var(--mdl-background-tertiary, $md-gray-10); - border-radius: 4px; - } - - &--failed { - background-color: $md-gray-10; - background-color: var(--mdl-background-tertiary, $md-gray-10); - box-shadow: 0 0 0 1px $black-20; - - &-warning { - margin-bottom: 10px; - } - - &-message { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - - &-container { - @include flex($jc: center, $ai: center); - - width: 314px; - height: 58px; - font-family: $brand-font-regular; - line-height: 22px; - border-radius: 4px; - flex-direction: column; - } - } - - &__chat-four-three { - height: 260px; - } - - &__chat-three-two { - height: 232px; - } - - &__chat-sixteen-nine { - height: 196px; - } - - &--centered { - @include flex($jc: center, $ai: center); - - width: 100%; - height: 100%; - } - - &--opacity { - @extend .md-content--centered; - - background-color: $gray-6-40; - } - - &__hover { - @include flex($jc: space-between, $ai: center); - - position: relative; - bottom: 56px; - width: 100%; - height: 56px; - background-color: var(--mds-color-theme-common-overlays-primary-normal); - border-radius: 0 0 4px 4px; - visibility: hidden; - align-self: flex-end; - - &--wide { - position: relative; - top: 60px; - bottom: 0px; - } - - &-files { - display: flex; - width: 90%; - margin-top: 5px; - margin-left: 12px; - font-family: $brand-font-regular; - flex-direction: column; - - &--file-name { - @include text-overflow; - - width: rem-calc(214); - height: 24px; - font-size: 16px; - font-weight: 750; - line-height: 24px; - color: $md-black-100; - color: var(--mdl-textColor-primary, $md-black-100); - } - - &--file-size { - height: 22px; - font-size: 14px; - line-height: 22px; - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - } - - &-icons { - @include flex($jc: flex-end, $ai: center); - - width: 40%; - margin-right: 3px; - } - } - } - - .md-content-file { - @include flex($jc: center, $ai: center); - - position: relative; - width: 204px; - height: 136px; - margin-bottom: 8px; - background-repeat: no-repeat; - background-size: 204px 136px; - border-radius: 4px; - box-shadow: 0 0 0 1px $black-20; - - &:hover .md-content-file__icon { - visibility: visible; - } - - &__aspect { - @include flex($jc: center, $ai: center); - - position: relative; - bottom: 56px; - width: 204px; - height: 56px; - background-color: var(--mds-color-theme-common-overlays-primary-normal); - border-radius: 0 0 4px 4px; - visibility: hidden; - align-self: flex-end; - } - - &__icon { - @include flex($jc: center, $ai: center); - - position: absolute; - bottom: 0px; - width: 204px; - height: 56px; - background-color: var(--mds-color-theme-common-overlays-primary-normal);; - border-radius: 0 0 4px 4px; - visibility: hidden; - } - - &__block { - position: relative; - width: 204px; - height: 136px; - margin-bottom: 8px; - background-color: $md-white-100; - background-color: var(--mdl-background-primary, $md-white-100); - border-radius: 4px; - box-shadow: 0 0 0 1px $black-20; - - &:hover .md-content-file__aspect { - visibility: visible; - } - } - - &--clickable { - cursor: pointer; - } - - &--chat-one-one { - @include chat(230px, 230px); - } - - &--chat-two-three { - @include chat(154px, 230px); - } - - &--chat-tall { - @include chat(100px, 230px); - } - - &--chat-wide { - @include chat(348px, 80px); - - position: relative; - top: 58px; - } - - &--chat-three-four { - @include chat(174px, 230px); - } - - &--full, - &--three-two { - @include file-aspect(100%, 100%); - - background-position: center; - border-radius: 4px; - } - - &--two-three { - @include file-aspect(90px, 100%, 0 auto); - } - - &--three-four { - @include file-aspect(102px, 100%, 0 auto); - } - - &--sixteen-nine { - @include file-aspect(100%, 116px, 10px 0, contain); - } - - &--nine-sixteen { - @include file-aspect(78px, 100%, 0 auto); - } - - &--one-one { - @include file-aspect(136px, 136px, 0 auto); - - border-radius: 4px; - } - - &--four-three { - @include file-aspect(182px, 136px, 0 auto); - - border: 1px solid $black-06; - border-radius: 4px; - } - - &__info-container { - display: flex; - flex-direction: column; - } - - &__title { - @include text-overflow; - - width: 204px; - height: 24px; - font-family: $brand-font-regular; - font-size: 16px; - line-height: 24px; - color: #000000; - color: var(--mdl-textColor-primary, $md-gray-100); - text-align: center; - } - - &__subtitle { - @include text-overflow; - - width: 204px; - height: 22px; - font-family: $brand-font-regular; - font-size: 14px; - line-height: 22px; - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - text-align: center; - } - } - - .content-file--no-border { - box-shadow: none; - } -} diff --git a/scss/components/content-item/mixins.scss b/scss/components/content-item/mixins.scss deleted file mode 100644 index a3981dde90..0000000000 --- a/scss/components/content-item/mixins.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin chat($width, $height) { - width: $width; - height: $height; - margin: 0 auto; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - border: 1px solid $black-06; - border-radius: 4px; - box-shadow: inset 1px 0 0 0 $black-06, inset -1px 0 0 0 $black-06; -} - -@mixin file-aspect($width, $height, $margin: null, $bSize: null) { - width: $width; - height: $height; - margin: $margin; - background-position: center; - background-repeat: no-repeat; - @if $bSize { - background-size: $bSize; - } @else { - background-size: cover; - } -} diff --git a/scss/components/content-item/module.scss b/scss/components/content-item/module.scss deleted file mode 100644 index 7f71c55a14..0000000000 --- a/scss/components/content-item/module.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../colors/settings-transparencies.scss"; -@import "../../settings/core.scss"; -@import "../../settings/focus.scss"; -@import "../../settings/media.scss"; -@import "../../typography/settings.scss"; - -// Tools -@import '../../tools/mixins/baseline'; -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/text-overflow'; -@import '../../typography/mixins'; - -@include brand-font-face-regular; -@include brand-font-face-light; - -// Component Specific -@import 'mixins'; -@import 'content-item'; diff --git a/scss/components/data-table/data-table.scss b/scss/components/data-table/data-table.scss deleted file mode 100644 index a1782d3bc2..0000000000 --- a/scss/components/data-table/data-table.scss +++ /dev/null @@ -1,205 +0,0 @@ - - -@include exports('md-data-table') { - .md-data-table { - position: relative; - - &--zebra { - table { - .md-data-table__thead > tr > th { - background-color: $md-gray-60; - border-bottom: none; - color: $md-white-100; - } - - tbody tr:nth-child(even){ - background-color: $md-gray-10; - } - } - } - - table { - border-collapse: collapse; - table-layout: fixed; - width: 100%; - margin-bottom: 0; - } - - .md-data-table__thead > tr > th { - padding: rem-calc(10) rem-calc(12); - border-bottom: 1px solid $md-gray-40; - font-weight: 550; - letter-spacing: 0px; - font-size: 14px; - font-family: $brand-font-medium; - color: $md-black-100; - background-color: $md-white-100; - text-align: left; - } - - tr > td { - padding: rem-calc(10) rem-calc(12); - background-color: inherit; - color: $md-gray-70; - letter-spacing: 0px; - line-height: 24px; - } - - tr { - border-bottom: 1px solid $md-gray-20; - } - - &.md-data-table--dividers { - .md-data-table__tbody > tr > td { - border: 1px solid $md-gray-20; // columns dividers here - } - } - - .md-data-table__row:hover { - background-color: $md-blue-10; - cursor: pointer; - } - - .md-data-table__tbody > .md-data-table__row { - &--selected { - background-color:$md-blue-30; - cursor: default; - } - } - - .md-data-table__tbody > tr { - td:nth-of-type(1) { - border-left: none; - } - - td:last-of-type { - border-right: none; - } - } - - &__resizer { - &--highlight { - background-color: $md-gray-40; - color: $md-white-100; - } - - &--helper { - width: 1px; - position: absolute; - z-index: 10; - display: none; - } - } - - &__sortable-column { - cursor: pointer; - } - - &--auto-layout { - .md-data-table__wrapper { - overflow-x: auto; - - table { - table-layout: auto; - } - } - } - - &--resizable { - - .md-data-table__wrapper { - overflow-x: auto; - } - - .md-data-table__thead > tr > th, - .md-data-table__footer > tr > td, - .md-data-table__tbody > tr > td { - overflow: hidden; - } - - .md-data-table__resizable-column { - background-clip: padding-box; - position: relative; - - &:last-child .md-data-table__column-resizer{ - display:none; - } - } - - .md-data-table__thead > tr > th:hover { - background-color: $md-gray-30; - } - } - - .md-data-table__column-resizer { - display: block; - position: absolute !important; - top: 0; - right: 0; - margin: 0; - width: .5rem; - height: 100%; - padding: 0px; - border: 1px solid transparent; - cursor:col-resize; - } - - /* Scroll */ - - &__scrollable { - - &--wrapper { - position: relative; - } - - &--body { - overflow: auto; - position: relative; - } - - &--virtual-table { - position: absolute; - } - - &--loading-table { - display: none; - } - - &--header { - overflow: hidden; - border: 0 none; - } - - } - - &__scrollbar { - width: 100px; - height: 100px; - overflow: scroll; - position: absolute; - top: -9999px; - } - - &__spinner { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - } - - &__checkbox { - &--wrapper { - cursor: pointer; - display: flex; - justify-content: space-around; - } - &--input { - cursor: pointer; - } - } - - .md-sortIcon { - padding-left: 8px; - } - } -} diff --git a/scss/components/data-table/examples/avatar.html b/scss/components/data-table/examples/avatar.html deleted file mode 100644 index 35488fb9df..0000000000 --- a/scss/components/data-table/examples/avatar.html +++ /dev/null @@ -1,123 +0,0 @@ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Full Name Email Last Updated ID Number
- - JJ - - John Jones jjones@cisco.com 02-July-2019 1547852158
- - PB - - Paul Baltes - pbaltes@cisco.com 03-June-2019 4673165849
- - CV - - Caleb Valdez cvaldez@cisco.com 07-May-2019 9432165975
- - CB - - Corelia Ball cball@cisco.com 04-July-2019 8561346581
- - MS - - Mike Snow msnow@cisco.com 05-April-2019 1245731648
- - JJ - - Joe Johnson jjohnson@cisco.com 05-July-2019 3674162849
- - RM - - Robert McGregor rmcgregor@cisco.com 01-July-2019 8412596312
- - GD - - Greg Dmritov gdmritov@cisco.com 05-March-2019 1245731648
- - TC - - Thomas Campbell tcampbell@cisco.com 07-July-2019 6777658497
- - DN - - Derek Nelson dnelson@cisco.com 07-June-2019 9432548164
-
-
\ No newline at end of file diff --git a/scss/components/data-table/examples/default.html b/scss/components/data-table/examples/default.html deleted file mode 100644 index abe8398d33..0000000000 --- a/scss/components/data-table/examples/default.html +++ /dev/null @@ -1,27 +0,0 @@ -
-
- - - - - - - - - - - - - - - - - - - - - -
Full NameEmailLast UpdatedID 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
-
-
\ No newline at end of file diff --git a/scss/components/data-table/examples/multi-select.html b/scss/components/data-table/examples/multi-select.html deleted file mode 100644 index da53716c9e..0000000000 --- a/scss/components/data-table/examples/multi-select.html +++ /dev/null @@ -1,217 +0,0 @@ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- - - - -
- 		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
-
-
\ No newline at end of file diff --git a/scss/components/data-table/examples/multiselect-scroll-resize.html b/scss/components/data-table/examples/multiselect-scroll-resize.html deleted file mode 100644 index fcb0f82037..0000000000 --- a/scss/components/data-table/examples/multiselect-scroll-resize.html +++ /dev/null @@ -1,325 +0,0 @@ -
-
-
-
-
- - - - - - - - - - - - - - - - - - -
- -
- - - - -
- - - 		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
-
-
-
- -
\ No newline at end of file diff --git a/scss/components/data-table/examples/resize.html b/scss/components/data-table/examples/resize.html deleted file mode 100644 index 34d42585f7..0000000000 --- a/scss/components/data-table/examples/resize.html +++ /dev/null @@ -1,90 +0,0 @@ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 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
-
- -
\ No newline at end of file diff --git a/scss/components/data-table/examples/scroll.html b/scss/components/data-table/examples/scroll.html deleted file mode 100644 index c37f3a4952..0000000000 --- a/scss/components/data-table/examples/scroll.html +++ /dev/null @@ -1,109 +0,0 @@ -
-
-
-
-
- - - - - - - - - - -
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
-
-
-
-
\ No newline at end of file diff --git a/scss/components/data-table/examples/selection.html b/scss/components/data-table/examples/selection.html deleted file mode 100644 index 1545c00daa..0000000000 --- a/scss/components/data-table/examples/selection.html +++ /dev/null @@ -1,74 +0,0 @@ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Full NameEmailLast UpdatedID 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
-
-
diff --git a/scss/components/data-table/examples/sort.html b/scss/components/data-table/examples/sort.html deleted file mode 100644 index 51c87bfec5..0000000000 --- a/scss/components/data-table/examples/sort.html +++ /dev/null @@ -1,127 +0,0 @@ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 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
-
-
diff --git a/scss/components/data-table/examples/zebra.html b/scss/components/data-table/examples/zebra.html deleted file mode 100644 index 861d236d79..0000000000 --- a/scss/components/data-table/examples/zebra.html +++ /dev/null @@ -1,27 +0,0 @@ -
-
- - - - - - - - - - - - - - - - - - - - - -
Full NameEmailLast UpdatedID 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
-
-
\ No newline at end of file diff --git a/scss/components/date-picker/date-picker.scss b/scss/components/date-picker/date-picker.scss deleted file mode 100644 index 0e596f2f3a..0000000000 --- a/scss/components/date-picker/date-picker.scss +++ /dev/null @@ -1,216 +0,0 @@ -/** @component date-picker */ - -@include exports('md-datepicker') { - .#{$datepicker__class} { - &-container { - display: inline-flex; - - > .md-button { - display: flex; - justify-content: center; - - .md-button__text { - margin-left: 0.5rem; - line-height: 1.75rem; - } - } - } - - &__calendar-icon { - position: relative; - top: 4px; - } - - &__dropdown { - .md-event-overlay, - .md-event-overlay__children { - position: absolute; - } - - .md-event-overlay--top { - top: auto; - bottom: 2.125rem; - } - } - - &__header { - padding-top: $datepicker-header__padding-top; - } - - &__navigation { - @include flex($jc: space-between); - - padding: $datepicker-navigation__padding; - line-height: $datepicker-navigation__line-height; - - &--current-month { - font-family: $brand-font-bold; - } - - &--buttons { - > .#{$button__class}--icon { - padding: $datepicker-navigation-buttons__padding; - - + .#{$button__class}--icon { - margin-left: $datepicker-navigation-buttons--next__margin-left; - } - } - } - } - - &__wrapper { - display: flex; - flex-direction: column; - } - - &__day--names, - &__week { - white-space: nowrap; - display: block; - } - - &__day--names { - @include flex($display: flex); - - padding: $datepicker-day-names__padding; - color: $datepicker-day-names__color; - text-align: center; - } - - &__day--name { - @include flex($display: inline-flex); - - flex-grow: 1; - width: $datepicker-day__size; - height: $datepicker-day__size; - margin: $datepicker-day__margin; - font-size: $datepicker-day__font-size; - } - - &__day { - &.md-button { - @include flex($display: inline-flex); - - width: $datepicker-day__size; - height: $datepicker-day__size; - min-width: 0; - min-height: 0; - margin: $datepicker-day__margin; - font-size: $datepicker-day__font-size; - color: $datepicker-day__color; - cursor: pointer; - background: $datepicker-day__bg; - border: 0; - - &.#{$datepicker__class}__day { - &:hover:not(.#{$datepicker__class}__day--selected) { - background: $datepicker-day__bg--hover; - - .#{$contrast-class} & { - background: $datepicker-day__bg--hover--contrast; - } - } - - &--focus { - @include focus-styles(); - } - - &--selected { - color: $datepicker-day__color--selected; - background: $datepicker-day__bg--selected; - } - - &--outside-month { - color: $datepicker-day__color--outside-month; - background: $datepicker-day__bg; - } - - &--today { - color: $datepicker-day__color--today; - background: $datepicker-day__bg--today; - - .#{$contrast-class} & { - background: $datepicker-day__color--today--contrast; - } - - &.md-datepicker__day--selected { - color: $datepicker-day__color--today--selected; - background: $datepicker-day__bg--today--selected; - - .#{$contrast-class} & { - background: $datepicker-day__bg--today--selected--contrast; - } - } - } - - &:disabled { - color: $datepicker-day__color--disabled; - cursor: default; - background: $datepicker-day__bg; - - &:hover { - background: $datepicker-day__bg; - } - } - - &--inrange { - border-radius: 0 0 0 0; - width: $daypicker-day-box-width; - margin: $datepicker-day__margin 0; - } - - &--start { - border-radius: 50% 0 0 50%; - width: $daypicker-day-outer-width; - margin: $datepicker-day__margin 0px $datepicker-day__margin $datepicker-day__margin; - box-shadow: none; - } - - &--end { - border-radius: 0 50% 50% 0; - width: $daypicker-day-outer-width; - margin: $datepicker-day__margin $datepicker-day__margin $datepicker-day__margin 0; - box-shadow: none; - } - - &--hovered { - background: #E0E0E0; - } - - &--unselectable { - color: $md-gray-70; - } - - &--unselectable:hover {background:transparent;} - - &--inrange-selected { - background: $md-black-100; - } - } - } - - .selected-edge-day { - background: $md-black-100; - color: $md-white-100; - display: block; - width: $datepicker-day__size; - height: $datepicker-day__size; - border-radius: 50%; - position: absolute; - left: 0px; - top: 0px; - line-height: $datepicker-day__size; - text-align: center; - } - - vertical-align: middle; - } - - &__month { - padding: $datepicker-month__padding; - text-align: center; - font-size: 0; - display: block; - } - } -} diff --git a/scss/components/date-picker/examples/dark.html b/scss/components/date-picker/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/date-picker/examples/default.html b/scss/components/date-picker/examples/default.html deleted file mode 100644 index d51ef6ca26..0000000000 --- a/scss/components/date-picker/examples/default.html +++ /dev/null @@ -1,149 +0,0 @@ -
-
-
-
-
November 2018
-
- - -
-
-
-
S
-
M
-
T
-
W
-
T
-
F
-
S
-
-
-
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
-
-
diff --git a/scss/components/date-picker/module.scss b/scss/components/date-picker/module.scss deleted file mode 100644 index 9e68501fdf..0000000000 --- a/scss/components/date-picker/module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -@import '~@momentum-ui/icons/scss/mixins'; - -// Settings -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../button/settings'; - -// Tools -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../typography/mixins'; - -// Typography -@include brand-font-face-regular; -@include brand-font-face-bold; - -// Component Specific -@import 'settings'; -@import 'date-picker'; diff --git a/scss/components/date-picker/settings.scss b/scss/components/date-picker/settings.scss deleted file mode 100644 index 70b05858c0..0000000000 --- a/scss/components/date-picker/settings.scss +++ /dev/null @@ -1,36 +0,0 @@ -$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; diff --git a/scss/components/date-range-picker/date-range-picker.scss b/scss/components/date-range-picker/date-range-picker.scss deleted file mode 100644 index fdfe5c8c81..0000000000 --- a/scss/components/date-range-picker/date-range-picker.scss +++ /dev/null @@ -1,48 +0,0 @@ -@include exports('md-date-range-picker') { - .md-date-range-picker{ - display: block !important; - } - .md-data-range-picker-button-group { - width: 100%; - height: $data-range-picker-button-group-height; - border-top: 1px solid $black-08; - display: flex; - - .md-input-container { - width: $data-range-picker-button-group-width; - flex: none; - margin: $data-range-picker-button-group-margin; - } - - .md-input-container:first-child { - margin-left: $data-range-picker-button-first-child-margin-left; - } - - .md-label { - font-size: $data-range-picker-input-font-size; - font-weight: 750 !important; - } - - .md-input__icon-container { - width: $data-range-picker-button-group-width; - height: $data-range-picker-input-height; - - button { - right: $data-range-picker-button-group-button-right !important - } - } - - .md-input { - font-size: $data-range-picker-input-font-size; - width: $data-range-picker-button-group-width; - height: $data-range-picker-input-height; - color: #333; - background: $md-white-100; - border: 1px solid $black-16; - border-radius: 4px; - margin-bottom: 0px !important; - padding: $data-range-picker-input-padding; - } - - } -} diff --git a/scss/components/date-range-picker/examples/dark.html b/scss/components/date-range-picker/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/date-range-picker/examples/default.html b/scss/components/date-range-picker/examples/default.html deleted file mode 100644 index 6a2fc7b1c1..0000000000 --- a/scss/components/date-range-picker/examples/default.html +++ /dev/null @@ -1,191 +0,0 @@ -
-
-
-
-
-
November 2018
-
- - -
-
-
-
S
M
T
W
T
F
S
-
-
-
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
- - - - - - - -
-
-
-
-
- -
- - -
-
-
- -
- - -
-
-
-
-
diff --git a/scss/components/date-range-picker/module.scss b/scss/components/date-range-picker/module.scss deleted file mode 100644 index 10653d94ea..0000000000 --- a/scss/components/date-range-picker/module.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../button/settings'; -@import '../forms/settings'; -@import '../date-picker/settings.scss'; -@import 'settings'; - -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; - -@import 'date-range-picker'; diff --git a/scss/components/date-range-picker/settings.scss b/scss/components/date-range-picker/settings.scss deleted file mode 100644 index 88c64d3775..0000000000 --- a/scss/components/date-range-picker/settings.scss +++ /dev/null @@ -1,8 +0,0 @@ -$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); diff --git a/scss/components/dialog/examples/default.html b/scss/components/dialog/examples/default.html deleted file mode 100644 index c896c5456c..0000000000 --- a/scss/components/dialog/examples/default.html +++ /dev/null @@ -1,39 +0,0 @@ -
- -
diff --git a/scss/components/drawer/drawer.scss b/scss/components/drawer/drawer.scss deleted file mode 100644 index 5e7a81b232..0000000000 --- a/scss/components/drawer/drawer.scss +++ /dev/null @@ -1,101 +0,0 @@ - /** @component drawer */ -@include exports('md-drawer') { - - .#{$prefix}-drawer { - z-index: $zindex-drawer; - position: fixed; - overflow: auto; - transition-duration: 0.6s; - background-color: $drawer-background-color; - border: 1px solid $drawer-border-color; - box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18); - @include vr-spacing(p, 1); - &__close { - position: fixed; - top: 8px; - right: 8px; - transition-delay: 0.61s; - opacity: 100%; - } - &--right { - top: 0px; - right: 0; - height: 100vh; - margin-right: auto; - margin-left: auto; - &--medium { - width: 40%; - @media #{$xlarge-up} { - max-width: 768px; - } - } - &--large { - width: 60%; - @media #{$xlarge-up} { - max-width: 960px; - } - } - @media #{$small-only} { - max-width: 80%; - } - &--closed { - border: none; - box-shadow: none; - @include vr-spacing(p, 0); - width: 0px; - .md-drawer__close { - opacity: 0; - } - } - &--closed &__close { - opacity: 0; - } - } - &--top, &--bottom { - width: 100%; - left: 0; - .md-drawer__close { - position: fixed; - right: 8px; - } - &--medium { - height: $drawer-medium-height; - } - &--large { - height: $drawer-large-height; - } - &--closed { - border: none; - box-shadow: none; - @include vr-spacing(p, 0); - height: 0px; - .md-drawer__close { - opacity: 0; - } - } - } - &--top { - top: 0; - } - &--bottom { - bottom: 0; - .md-drawer__close { - top: unset; - bottom: 0; - } - &--medium { - .md-drawer__close{ - opacity: 100%; - bottom: $drawer-medium-height - 24px; - } - } - &--large { - .md-drawer__close { - opacity: 100%; - bottom: $drawer-large-height - 24px; - } - } - } - } -} - diff --git a/scss/components/drawer/examples/default.html b/scss/components/drawer/examples/default.html deleted file mode 100644 index 8ef2ea9365..0000000000 --- a/scss/components/drawer/examples/default.html +++ /dev/null @@ -1,7 +0,0 @@ -
-

Put content here

- - -
diff --git a/scss/components/drawer/examples/openfrom.html b/scss/components/drawer/examples/openfrom.html deleted file mode 100644 index 720bd6598b..0000000000 --- a/scss/components/drawer/examples/openfrom.html +++ /dev/null @@ -1,6 +0,0 @@ -
-

Put content here

- -
diff --git a/scss/components/drawer/module.scss b/scss/components/drawer/module.scss deleted file mode 100644 index 7a27743566..0000000000 --- a/scss/components/drawer/module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../settings/rem'; -@import '../../settings/z-index'; -@import 'settings'; -@import 'drawer'; diff --git a/scss/components/drawer/settings.scss b/scss/components/drawer/settings.scss deleted file mode 100644 index 67d51bd823..0000000000 --- a/scss/components/drawer/settings.scss +++ /dev/null @@ -1,5 +0,0 @@ -$drawer-border-color: $md-gray-10; -$drawer-background-color: $md-white-100; -$drawer-border-radius: 2px; -$drawer-medium-height: 200px; -$drawer-large-height: 380px; diff --git a/scss/components/editable-textfield/editable-textfield.scss b/scss/components/editable-textfield/editable-textfield.scss deleted file mode 100644 index d11aeb4e35..0000000000 --- a/scss/components/editable-textfield/editable-textfield.scss +++ /dev/null @@ -1,67 +0,0 @@ -/** @component editable-textfield */ - -@include exports('md-editable-textfield') { - .#{$prefix}-editable-textfield { - & > &__button { - @include radius($global-radius); - - padding: $input__padding; - - &:hover, - &:active { - background-color: $black-16; - - .#{$dark-class} & { - background-color: $white-24; - } - } - } - - & > &__editing { - @include radius($global-radius); - - margin-bottom: 0; - - .#{$input__class} { - height: auto; - padding: $input__padding; - margin: 0; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - line-height: inherit; - transition: none; - } - } - - &--left { - & > .#{$prefix}-editable-textfield__button { - text-align: left; - } - - .#{$input__class} { - text-align: left; - } - } - - &--center { - & > .#{$prefix}-editable-textfield__button { - text-align: center; - } - - .#{$input__class} { - text-align: center; - } - } - - &--right { - & > .#{$prefix}-editable-textfield__button { - text-align: right; - } - - .#{$input__class} { - text-align: right; - } - } - } -} diff --git a/scss/components/editable-textfield/examples/dark.html b/scss/components/editable-textfield/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/editable-textfield/examples/default.html b/scss/components/editable-textfield/examples/default.html deleted file mode 100644 index af2468cabd..0000000000 --- a/scss/components/editable-textfield/examples/default.html +++ /dev/null @@ -1,10 +0,0 @@ - - -
Hello World
- - - -
- -
- diff --git a/scss/components/footer/footer.scss b/scss/components/footer/footer.scss deleted file mode 100644 index 8c410244fd..0000000000 --- a/scss/components/footer/footer.scss +++ /dev/null @@ -1,80 +0,0 @@ -/** @component footer */ - -@include exports('md-footer') { - .#{$footer-class} { - display: flex; - flex-direction: column; - width: 100%; - max-width: rem-calc(1360); - padding: rem-calc(32) 0; - margin: 0 auto; - background-color: $footer__background-color; - - &.#{$footer-class}--light { - background-color: $footer__background-color--light; - } - - &__list { - margin-left: 0; - list-style: none; - - &-item-title { - font-size: rem-calc(12.8); - color: $md-gray-10; - } - } - - &__link-section { - flex: 1 0 auto; - } - - &__logo { - position: relative; - top: rem-calc(8); - margin-right: rem-calc(20); - font-size: rem-calc(22); - color: $md-white-100; - } - - &__copyright, - .md-list-item { - font-size: rem-calc(12.8); - color: $footer__font-color; - } - - &__social { - margin-top: rem-calc(16); - } - - &__top, - &__bottom { - display: flex; - padding: 0 rem-calc(32); - color: $footer__font-color; - - @media #{$xlarge-up} { - padding-right: rem-calc(200); - padding-left: rem-calc(200); - } - } - - &__bottom { - padding-top: rem-calc(16); - margin-top: rem-calc(64); - font-size: rem-calc(12); - border-top: rem-calc(1) solid $md-gray-50; - justify-content: space-between; - } - - .md-list-item { - height: auto; - padding: 0; - background-color: $footer__background-color; - - &:hover { - color: $md-white-100; - background-color: $footer__background-color; - } - } - } -} diff --git a/scss/components/footer/settings.scss b/scss/components/footer/settings.scss deleted file mode 100644 index 06a4774ba5..0000000000 --- a/scss/components/footer/settings.scss +++ /dev/null @@ -1,5 +0,0 @@ -$footer-class: '#{$prefix}-footer'; -$footer__background-color: $md-gray-90; -$footer__background-color--light: $md-white-100; - -$footer__font-color: $white-60; diff --git a/scss/components/forms/forms.scss b/scss/components/forms/forms.scss deleted file mode 100644 index 8c7d2ee749..0000000000 --- a/scss/components/forms/forms.scss +++ /dev/null @@ -1,538 +0,0 @@ -@mixin form-row-base { - .row { - margin: 0 ((-$form-spacing) * 0.5); - - .column, - .columns { - padding: 0 ($form-spacing * 0.5); - } - - &.collapse { - margin: 0; - - .column, - .columns { - padding: 0; - } - - input { - @include side-radius($opposite-direction, 0); - } - } - } - - input.column, - input.columns, - textarea.column, - textarea.columns { - padding-#{$default-float}: ($form-spacing * 0.5); - } -} - -@mixin fieldset { - padding: $fieldset-padding; - margin: $fieldset-margin; - border: $fieldset-border-width $fieldset-border-style $fieldset-border-color; - - legend { - padding: $legend-padding; - margin: 0; - font-weight: $legend-font-weight; - background: $legend-bg; - margin-#{$default-float}: rem-calc(-3); - } -} - -@mixin form-inline { - @media (min-width: $screen-sm-min) { - .form-group { - display: inline-block; - width: auto; - margin-bottom: 0; - vertical-align: middle; - } - - .formly-field-inline &.formly-field-input input { - margin-bottom: 0; - } - - .form-control { - display: inline-block; - width: auto; // Prevent labels from stacking above inputs in `.form-group` - word-wrap: break-word; - vertical-align: middle; - } - - .form-control-static { - display: inline-block; - word-wrap: break-word; - } - - .input-container { - display: inline-table; - vertical-align: middle; - - .input-container-addon, - .input-container-btn, - .form-control { - width: auto; - } - } - - .input-container > .form-control { - width: 100%; - } - - .control-label { - margin-bottom: 0; - vertical-align: middle; - } - - .radio, - .checkbox { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - vertical-align: middle; - - label { - padding-left: 0; - } - } - - .radio input[type='radio'], - .checkbox input[type='checkbox'] { - position: relative; - margin-left: 0; - } - - // Re-override the feedback icon. - .has-feedback .form-control-feedback { - top: 0; - } - } -} - -.md { - @include exports('md-form') { - form.form-inline, - .form-inline { - @include form-inline; - - label { - display: block; - } - - input { - margin-left: 0; - } - - .input-container-btn { - display: table-cell; - } - - .input-container { - .md-button { - margin-left: 0; - } - } - } - - form, - .md-form { - margin: 0 0 $form-spacing; - - .row { - @include form-row-base; - } - } - - - - // Allow adding grid column classes directly to inputs. - [class*='column'] { - & > input[type], - & > select, - & > textarea { - &:not([class*='column']):not([type='submit']):not([type='file']) { - width: 100%; - } - } - } - - - - // Add height value for select elements to match text input height - select { - @include form-select; - - //height: $input__font-size + $form-spacing * 1.5 - rem-calc(1); - &[multiple] { - height: auto; - } - } - - // Adjust margin for form elements below - - select { - margin: 0 0 $form-spacing 0; - } - - - // We add basic fieldset styling - fieldset { - @include fieldset; - @include vr-spacing(p, 0); - } - - .md-form__section { - @media #{$medium-up} { - // required to set sticky element container height - display: flex; - align-items: stretch; - } - - @include grid-row($behavior: nest-collapse); - - border-bottom: $form-section-border-color 1px solid; - - @include vr-spacing(pt, 2); - @include vr-spacing(pb, 3); - @include vr-spacing(ph, 2); - - &:last-child { - border-color: transparent; - } - - .md-input-container { - &:last-child { - margin-bottom: 0; - } - - & > input[type], - & > select, - & > textarea { - &:not([class*='column']):not([type='submit']):not([type='file']) { - width: 100%; - } - } - } - - .md-input-row { - @include grid-row(); - @include form-row-base; - @include vr-spacing(mb, 1); - } - - .section__info { - @media #{$small-only} { - @include vr-spacing(mb, 2.25); - } - - .section__title { - @extend %h4; - - @include vr-spacing(mb, 0.5); - } - - @media #{$medium-up} { - @include grid-column( - $columns: 4, - $last-column: false, - $center: false, - $offset: 0, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$large-up} { - @include grid-column( - $columns: 3, - $last-column: false, - $center: false, - $offset: 0, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$xxlarge-up} { - @include grid-column( - $columns: 2, - $last-column: false, - $center: false, - $offset: 0, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - } - - > .section__info { - align-self: stretch; - - .sticky { - @extend %sticky; - - &.sticky--active { - display: block; - } - } - } - - .section__content { - .sub-section { - @include vr-spacing(mb, 2.25); - - &:last-child { - margin-bottom: 0; - } - - &__label, - &__title { - @extend %h5; - - @include vr-spacing(mb, 0.75); - } - - &__description { - @extend .p; - - @include vr-spacing(mb, 1); - } - } - - @media #{$medium-up} { - @include vr-spacing(mt, 0.25); - @include grid-column( - $columns: 7, - $last-column: true, - $center: false, - $offset: 1, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$large-up} { - @include grid-column( - $columns: 6, - $last-column: true, - $center: false, - $offset: 1, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$xlarge-up} { - @include grid-column( - $columns: 5, - $last-column: true, - $center: false, - $offset: 1, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - } - } - .md-modal .md-modal--small .md-form__section, - .side-panel-container .md-form__section { - padding-right: 0; - padding-left: 0; - - &:first-child { - padding-top: 0; - } - - .section__info { - @media #{$medium-up} { - @include vr-spacing(mt, 0.25); - - width: 100%; - max-width: 100%; - margin-left: 0 !important; - } - - @media #{$large-up} { - @include vr-spacing(mt, 0.25); - - width: 100%; - max-width: 100%; - margin-left: 0 !important; - } - - @media #{$xxlarge-up} { - @include vr-spacing(mt, 0.25); - - width: 100%; - max-width: 100%; - margin-left: 0 !important; - } - } - - .section__content { - margin-top: 0; - - @media #{$medium-up} { - width: 100%; - max-width: 100%; - margin-top: 0; - margin-left: 0 !important; - } - - @media #{$large-up} { - width: 100%; - max-width: 100%; - margin-top: 0; - margin-left: 0 !important; - } - - @media #{$xlarge-up} { - width: 100%; - max-width: 100%; - margin-top: 0; - margin-left: 0 !important; - } - } - } - - .side-panel-container .md-form__section { - display: block; - - @include vr-spacing(pb, 1.25); - - &:last-child { - border-color: $form-section-border-color; - } - - .section__info { - margin-bottom: 0; - - .section__title { - @extend %h5; - - @include vr-spacing(mb, 0.75); - - padding: 0 !important; - } - - .section__description { - @include vr-spacing(mb, 1); - } - } - } - - .md-modal .md-form__section { - padding-right: 0; - padding-left: 0; - - &:first-child { - padding-top: 0; - } - - .section__info { - @media #{$medium-up} { - @include grid-column( - $columns: 4, - $last-column: false, - $center: false, - $offset: 0, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$large-up} { - @include grid-column( - $columns: 4, - $last-column: false, - $center: false, - $offset: 0, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$xxlarge-up} { - @include grid-column( - $columns: 4, - $last-column: false, - $center: false, - $offset: 0, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - } - - .section__content { - @media #{$medium-up} { - @include vr-spacing(mt, 0.25); - @include grid-column( - $columns: 6, - $last-column: true, - $center: false, - $offset: 1, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$large-up} { - @include vr-spacing(mt, 0.25); - @include grid-column( - $columns: 6, - $last-column: true, - $center: false, - $offset: 1, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - - @media #{$xlarge-up} { - @include vr-spacing(mt, 0.25); - @include grid-column( - $columns: 6, - $last-column: true, - $center: false, - $offset: 1, - $push: 0, - $pull: 0, - $collapse: true, - $float: left - ); - } - } - } - - .md-form .side-panel-section { - border-color: transparent; - } - } -} diff --git a/scss/components/forms/mixins.scss b/scss/components/forms/mixins.scss deleted file mode 100644 index 56de9ce8e5..0000000000 --- a/scss/components/forms/mixins.scss +++ /dev/null @@ -1,186 +0,0 @@ -// Form validation states -// -// Used in forms.less to generate the form validation CSS for warnings, errors, -// and successes. - -@mixin form-control-validation( - $text-color: #555, - $border-color: #ccc, - $background-color: #f5f5f5 -) { - // Color the label and help text - .help-block, - .control-label, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline, - &.radio label, - &.checkbox label, - &.radio-inline label, - &.checkbox-inline label { - color: $text-color; - } - // Set the border and box shadow on specific inputs to match - .form-control { - border-color: $border-color; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); // Redeclare so transitions work - &:focus { - border-color: darken($border-color, 10%); - $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 6px lighten($border-color, 20%); - - box-shadow: $shadow; - } - } - // Set validation states also for addons - .input-container-addon { - color: $text-color; - background-color: $background-color; - border-color: $border-color; - } - // Optional feedback icon - .form-control-feedback { - color: $text-color; - } -} - -@mixin form-control-focus($color: $input-border-focus) { - $color-rgba: rgba(red($color), green($color), blue($color), 0.6); - - &:focus { - border-color: $color; - outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $color-rgba; - } -} - -@mixin input-size( - $parent, - $input-height, - $padding-vertical, - $padding-horizontal, - $font-size, - $line-height, - $border-radius -) { - #{$parent} { - height: $input-height; - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - line-height: $line-height; - border-radius: $border-radius; - } - - select#{$parent} { - height: $input-height; - line-height: $input-height; - } - - textarea#{$parent}, - select[multiple]#{$parent} { - height: auto; - } -} - -@mixin form-group-grid-columns( - $i: 1, - $list: - '.form-group .col-xs-#{$i}, .form-group .col-sm-#{$i}, .form-group .col-md-#{$i}, .form-group .col-lg-#{$i}' -) { - @for $i from (1 + 1) through $grid-columns { - $list: '#{$list}, .form-group .col-xs-#{$i}, .form-group .col-sm-#{$i}, .form-group .col-md-#{$i}, .form-group .col-lg-#{$i}'; - } - - #{$list} { - padding-right: ($form-group-gutter-width * 0.5); - // Inner gutter via padding - padding-left: ($form-group-gutter-width * 0.5); - } -} - -@mixin form-row-base { - .row { - margin: 0 ((-$form-spacing) * 0.5); - - .column, - .columns { - padding: 0 ($form-spacing * 0.5); - } - - &.collapse { - margin: 0; - - .column, - .columns { - padding: 0; - } - - input { - @include side-radius($opposite-direction, 0); - } - } - } - - input.column, - input.columns, - textarea.column, - textarea.columns { - padding-#{$default-float}: ($form-spacing * 0.5); - } -} - -@mixin form-select { - padding: ($form-spacing * 0.5); - font-family: $input__font-family; - font-size: $input__font-size; - line-height: normal; - color: $input__font-color; - background-color: $select-bg-color; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+); - background-position: if($text-direction== 'rtl', 0%, 100%) center; - background-repeat: no-repeat; - border-radius: 0; - - border-radius: 0; - -webkit-appearance: none !important; - -moz-appearance: none !important; - - &::-ms-expand { - display: none; - } - - border: { - width: $input__border-width; - color: $input__border-color; - style: $input__border-width solid; - } - - &.radius { - border-radius: $global-radius; - } - - &:hover { - background-color: $select-hover-bg-color; - border-color: $input__border-color; - } - - &:disabled { - cursor: not-allowed; - background-color: $input__background--disabled; - } -} - -@mixin fieldset { - padding: $fieldset-padding; - margin: $fieldset-margin; - border: $fieldset-border-width $fieldset-border-style $fieldset-border-color; - - legend { - padding: $legend-padding; - margin: 0; - font-weight: $legend-font-weight; - background: $legend-bg; - margin-#{$default-float}: rem-calc(-3); - } -} diff --git a/scss/components/forms/settings.scss b/scss/components/forms/settings.scss deleted file mode 100644 index cb4ff72a9a..0000000000 --- a/scss/components/forms/settings.scss +++ /dev/null @@ -1,37 +0,0 @@ -$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; diff --git a/scss/components/hero/hero.scss b/scss/components/hero/hero.scss deleted file mode 100644 index 03144b7377..0000000000 --- a/scss/components/hero/hero.scss +++ /dev/null @@ -1,31 +0,0 @@ -/** @component hero */ - -@include exports('md-hero') { - .#{$namespace} { - .hero { - min-height: 30vh; - padding: 4rem; - padding-bottom: 5rem; - margin-bottom: 1rem; - color: $md-black-100; - text-align: center; - background: center center/cover no-repeat; - - &__title { - margin-bottom: 1rem; - } - - &__lead { - max-width: 60%; - } - - &--dark { - .hero__title, - .hero__lead { - color: $md-white-100; - text-shadow: 0 0 1px rgba($md-black-100, 0.75); - } - } - } - } -} diff --git a/scss/components/icon/examples/color.html b/scss/components/icon/examples/color.html deleted file mode 100644 index 552eb23516..0000000000 --- a/scss/components/icon/examples/color.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - - - -
diff --git a/scss/components/icon/examples/default.html b/scss/components/icon/examples/default.html deleted file mode 100644 index 74beb21a06..0000000000 --- a/scss/components/icon/examples/default.html +++ /dev/null @@ -1,6 +0,0 @@ -
- - - - -
diff --git a/scss/components/icon/examples/white.html b/scss/components/icon/examples/white.html deleted file mode 100644 index 7cab8f640a..0000000000 --- a/scss/components/icon/examples/white.html +++ /dev/null @@ -1,8 +0,0 @@ -
- -
diff --git a/scss/components/icon/icon.scss b/scss/components/icon/icon.scss deleted file mode 100644 index dafa48907c..0000000000 --- a/scss/components/icon/icon.scss +++ /dev/null @@ -1,12 +0,0 @@ -/** @component icon */ - -@include exports('md-icon') { - .#{$icon__class} { - display: inline-flex; - fill: inherit; - - .#{$dark-class} & { - fill: $md-white-100; - } - } -} diff --git a/scss/components/icon/settings.scss b/scss/components/icon/settings.scss deleted file mode 100644 index a3ed45416f..0000000000 --- a/scss/components/icon/settings.scss +++ /dev/null @@ -1,12 +0,0 @@ -$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; diff --git a/scss/components/input-phone-number/input-phone-number.scss b/scss/components/input-phone-number/input-phone-number.scss deleted file mode 100644 index 4b2811fcc3..0000000000 --- a/scss/components/input-phone-number/input-phone-number.scss +++ /dev/null @@ -1,1963 +0,0 @@ -/** @component input-phone-number */ - -@include exports('md-input-phonenumber') { - .#{$phonenumber-input__class} { - display: inline-flex; - flex-direction: column; - padding: 0; - - &__active { - box-shadow: 0 0 4px 2px $focus-color; - } - - &__country-code { - color: $md-gray-50; - vertical-align: text-top; - - &-right { - color: $md-gray-50; - text-align: right; - } - } - - &__dropdown { - &-arrow { - position: relative; - left: rem-calc(14); - color: $md-gray-50; - } - - &-container { - width: 100%; - margin: 0; - overflow-x: hidden; - - .md-list-item:focus { - background-color: $md-theme-10; - } - } - - &-none { - cursor: pointer; - } - - &-selected { - background-color: $md-theme-10; - } - - &-trigger { - display: inline-flex; - width: max-content; - padding-top: rem-calc(4); - } - - &.md-event-overlay, - .md-event-overlay__children { - position: absolute; - width: 100%; - max-height: 19.25rem; - } - - .md-event-overlay__children { - top: rem-calc(36); - - &.#{$phonenumber-input__class}__top { - top: auto; - bottom: 100%; - } - } - } - - &__hidden-select { - display: none; - } - - &__wrapper { - display: flex; - width: 100%; - padding: 0; - } - - &__number { - padding-top: rem-calc(3); - padding-right: rem-calc(12); - flex-grow: 1; - - input { - width: 100%; - - &:focus { - box-shadow: none; - } - } - } - - &__dropdown-trigger, - &__number input { - padding-bottom: rem-calc(7); - padding-left: rem-calc(12); - background: transparent; - border: none; - } - - &__group.#{$input__class}-container { - margin-bottom: 0; - - &.error { - .#{$phonenumber-input__class}__number input { - background: transparent; - border: none; - - &:focus { - box-shadow: none; - } - } - } - } - } -} - -.md-flag { - display: inline-block; - width: $flag-width; - height: $flag-height; - // empty state - background-color: $md-gray-30; - background-image: url('#{$flags-image-path}/#{$flags-image-name}.#{$flags-image-extension}'); - background-position: $flag-width 0; - background-repeat: no-repeat; - - @media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min--moz-device-pixel-ratio: 2), - only screen and (-o-min-device-pixel-ratio: 2 / 1), - only screen and (min-device-pixel-ratio: 2), - only screen and (min-resolution: 192dpi), - only screen and (min-resolution: 2dppx) { - background-image: url('#{$flags-image-path}/#{$flags-image-name}@2x.#{$flags-image-extension}'); - } -} - -.md-flag { - $item-width-maps: ( - ac: 20px, - ad: 20px, - ae: 20px, - af: 20px, - ag: 20px, - ai: 20px, - al: 20px, - am: 20px, - ao: 20px, - aq: 20px, - ar: 20px, - as: 20px, - at: 20px, - au: 20px, - aw: 20px, - ax: 20px, - az: 20px, - ba: 20px, - bb: 20px, - bd: 20px, - be: 18px, - bf: 20px, - bg: 20px, - bh: 20px, - bi: 20px, - bj: 20px, - bl: 20px, - bm: 20px, - bn: 20px, - bo: 20px, - bq: 20px, - br: 20px, - bs: 20px, - bt: 20px, - bv: 20px, - bw: 20px, - by: 20px, - bz: 20px, - ca: 20px, - cc: 20px, - cd: 20px, - cf: 20px, - cg: 20px, - ch: 15px, - ci: 20px, - ck: 20px, - cl: 20px, - cm: 20px, - cn: 20px, - co: 20px, - cp: 20px, - cr: 20px, - cu: 20px, - cv: 20px, - cw: 20px, - cx: 20px, - cy: 20px, - cz: 20px, - de: 20px, - dg: 20px, - dj: 20px, - dk: 20px, - dm: 20px, - do: 20px, - dz: 20px, - ea: 20px, - ec: 20px, - ee: 20px, - eg: 20px, - eh: 20px, - er: 20px, - es: 20px, - et: 20px, - eu: 20px, - fi: 20px, - fj: 20px, - fk: 20px, - fm: 20px, - fo: 20px, - fr: 20px, - ga: 20px, - gb: 20px, - gd: 20px, - ge: 20px, - gf: 20px, - gg: 20px, - gh: 20px, - gi: 20px, - gl: 20px, - gm: 20px, - gn: 20px, - gp: 20px, - gq: 20px, - gr: 20px, - gs: 20px, - gt: 20px, - gu: 20px, - gw: 20px, - gy: 20px, - hk: 20px, - hm: 20px, - hn: 20px, - hr: 20px, - ht: 20px, - hu: 20px, - ic: 20px, - id: 20px, - ie: 20px, - il: 20px, - im: 20px, - in: 20px, - io: 20px, - iq: 20px, - ir: 20px, - is: 20px, - it: 20px, - je: 20px, - jm: 20px, - jo: 20px, - jp: 20px, - ke: 20px, - kg: 20px, - kh: 20px, - ki: 20px, - km: 20px, - kn: 20px, - kp: 20px, - kr: 20px, - kw: 20px, - ky: 20px, - kz: 20px, - la: 20px, - lb: 20px, - lc: 20px, - li: 20px, - lk: 20px, - lr: 20px, - ls: 20px, - lt: 20px, - lu: 20px, - lv: 20px, - ly: 20px, - ma: 20px, - mc: 19px, - md: 20px, - me: 20px, - mf: 20px, - mg: 20px, - mh: 20px, - mk: 20px, - ml: 20px, - mm: 20px, - mn: 20px, - mo: 20px, - mp: 20px, - mq: 20px, - mr: 20px, - ms: 20px, - mt: 20px, - mu: 20px, - mv: 20px, - mw: 20px, - mx: 20px, - my: 20px, - mz: 20px, - na: 20px, - nc: 20px, - ne: 18px, - nf: 20px, - ng: 20px, - ni: 20px, - nl: 20px, - no: 20px, - np: 13px, - nr: 20px, - nu: 20px, - nz: 20px, - om: 20px, - pa: 20px, - pe: 20px, - pf: 20px, - pg: 20px, - ph: 20px, - pk: 20px, - pl: 20px, - pm: 20px, - pn: 20px, - pr: 20px, - ps: 20px, - pt: 20px, - pw: 20px, - py: 20px, - qa: 20px, - re: 20px, - ro: 20px, - rs: 20px, - ru: 20px, - rw: 20px, - sa: 20px, - sb: 20px, - sc: 20px, - sd: 20px, - se: 20px, - sg: 20px, - sh: 20px, - si: 20px, - sj: 20px, - sk: 20px, - sl: 20px, - sm: 20px, - sn: 20px, - so: 20px, - sr: 20px, - ss: 20px, - st: 20px, - sv: 20px, - sx: 20px, - sy: 20px, - sz: 20px, - ta: 20px, - tc: 20px, - td: 20px, - tf: 20px, - tg: 20px, - th: 20px, - tj: 20px, - tk: 20px, - tl: 20px, - tm: 20px, - tn: 20px, - to: 20px, - tr: 20px, - tt: 20px, - tv: 20px, - tw: 20px, - tz: 20px, - ua: 20px, - ug: 20px, - um: 20px, - us: 20px, - uy: 20px, - uz: 20px, - va: 15px, - vc: 20px, - ve: 20px, - vg: 20px, - vi: 20px, - vn: 20px, - vu: 20px, - wf: 20px, - ws: 20px, - xk: 20px, - ye: 20px, - yt: 20px, - za: 20px, - zm: 20px, - zw: 20px, - ); - $standard-country: 'ac'; - - width: map-get($item-width-maps, $standard-country); - - @each $key, $width in $item-width-maps { - @if $width !=map-get($item-width-maps, $standard-country) { - &.#{$key} { - width: $width; - } - } - } - - @media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min--moz-device-pixel-ratio: 2), - only screen and (-o-min-device-pixel-ratio: 2/1), - only screen and (min-device-pixel-ratio: 2), - only screen and (min-resolution: 192dpi), - only screen and (min-resolution: 2dppx) { - background-size: 5630px 15px; - background-position-y: 0; - } - - &.ac { - height: 10px; - margin-top: 8px; - background-position-x: 0px; - } - - &.ad { - height: 14px; - margin-top: 6px; - background-position-x: -22px; - } - - &.ae { - height: 10px; - margin-top: 8px; - background-position-x: -44px; - } - - &.af { - height: 14px; - margin-top: 6px; - background-position-x: -66px; - } - - &.ag { - height: 14px; - margin-top: 6px; - background-position-x: -88px; - } - - &.ai { - height: 10px; - margin-top: 8px; - background-position-x: -110px; - } - - &.al { - height: 15px; - margin-top: 6px; - background-position-x: -132px; - } - - &.am { - height: 10px; - margin-top: 8px; - background-position-x: -154px; - } - - &.ao { - height: 14px; - margin-top: 6px; - background-position-x: -176px; - } - - &.aq { - height: 14px; - margin-top: 6px; - background-position-x: -198px; - } - - &.ar { - height: 13px; - margin-top: 6px; - background-position-x: -220px; - } - - &.as { - height: 10px; - margin-top: 8px; - background-position-x: -242px; - } - - &.at { - height: 14px; - margin-top: 6px; - background-position-x: -264px; - } - - &.au { - height: 10px; - margin-top: 8px; - background-position-x: -286px; - } - - &.aw { - height: 14px; - margin-top: 6px; - background-position-x: -308px; - } - - &.ax { - height: 13px; - margin-top: 6px; - background-position-x: -330px; - } - - &.az { - height: 10px; - margin-top: 8px; - background-position-x: -352px; - } - - &.ba { - height: 10px; - margin-top: 8px; - background-position-x: -374px; - } - - &.bb { - height: 14px; - margin-top: 6px; - background-position-x: -396px; - } - - &.bd { - height: 12px; - margin-top: 7px; - background-position-x: -418px; - } - - &.be { - height: 15px; - margin-top: 6px; - background-position-x: -440px; - } - - &.bf { - height: 14px; - margin-top: 6px; - background-position-x: -460px; - } - - &.bg { - height: 12px; - margin-top: 7px; - background-position-x: -482px; - } - - &.bh { - height: 12px; - margin-top: 7px; - background-position-x: -504px; - } - - &.bi { - height: 12px; - margin-top: 7px; - background-position-x: -526px; - } - - &.bj { - height: 14px; - margin-top: 6px; - background-position-x: -548px; - } - - &.bl { - height: 14px; - margin-top: 6px; - background-position-x: -570px; - } - - &.bm { - height: 10px; - margin-top: 8px; - background-position-x: -592px; - } - - &.bn { - height: 10px; - margin-top: 8px; - background-position-x: -614px; - } - - &.bo { - height: 14px; - margin-top: 6px; - background-position-x: -636px; - } - - &.bq { - height: 14px; - margin-top: 6px; - background-position-x: -658px; - } - - &.br { - height: 14px; - margin-top: 6px; - background-position-x: -680px; - } - - &.bs { - height: 10px; - margin-top: 8px; - background-position-x: -702px; - } - - &.bt { - height: 14px; - margin-top: 6px; - background-position-x: -724px; - } - - &.bv { - height: 15px; - margin-top: 6px; - background-position-x: -746px; - } - - &.bw { - height: 14px; - margin-top: 6px; - background-position-x: -768px; - } - - &.by { - height: 10px; - margin-top: 8px; - background-position-x: -790px; - } - - &.bz { - height: 14px; - margin-top: 6px; - background-position-x: -812px; - } - - &.ca { - height: 10px; - margin-top: 8px; - background-position-x: -834px; - } - - &.cc { - height: 10px; - margin-top: 8px; - background-position-x: -856px; - } - - &.cd { - height: 15px; - margin-top: 6px; - background-position-x: -878px; - } - - &.cf { - height: 14px; - margin-top: 6px; - background-position-x: -900px; - } - - &.cg { - height: 14px; - margin-top: 6px; - background-position-x: -922px; - } - - &.ch { - height: 15px; - margin-top: 6px; - background-position-x: -944px; - } - - &.ci { - height: 14px; - margin-top: 6px; - background-position-x: -961px; - } - - &.ck { - height: 10px; - margin-top: 8px; - background-position-x: -983px; - } - - &.cl { - height: 14px; - margin-top: 6px; - background-position-x: -1005px; - } - - &.cm { - height: 14px; - margin-top: 6px; - background-position-x: -1027px; - } - - &.cn { - height: 14px; - margin-top: 6px; - background-position-x: -1049px; - } - - &.co { - height: 14px; - margin-top: 6px; - background-position-x: -1071px; - } - - &.cp { - height: 14px; - margin-top: 6px; - background-position-x: -1093px; - } - - &.cr { - height: 12px; - margin-top: 7px; - background-position-x: -1115px; - } - - &.cu { - height: 10px; - margin-top: 8px; - background-position-x: -1137px; - } - - &.cv { - height: 12px; - margin-top: 7px; - background-position-x: -1159px; - } - - &.cw { - height: 14px; - margin-top: 6px; - background-position-x: -1181px; - } - - &.cx { - height: 10px; - margin-top: 8px; - background-position-x: -1203px; - } - - &.cy { - height: 14px; - margin-top: 6px; - background-position-x: -1225px; - } - - &.cz { - height: 14px; - margin-top: 6px; - background-position-x: -1247px; - } - - &.de { - height: 12px; - margin-top: 7px; - background-position-x: -1269px; - } - - &.dg { - height: 10px; - margin-top: 8px; - background-position-x: -1291px; - } - - &.dj { - height: 14px; - margin-top: 6px; - background-position-x: -1313px; - } - - &.dk { - height: 15px; - margin-top: 6px; - background-position-x: -1335px; - } - - &.dm { - height: 10px; - margin-top: 8px; - background-position-x: -1357px; - } - - &.do { - height: 13px; - margin-top: 7px; - background-position-x: -1379px; - } - - &.dz { - height: 14px; - margin-top: 6px; - background-position-x: -1401px; - } - - &.ea { - height: 14px; - margin-top: 6px; - background-position-x: -1423px; - } - - &.ec { - height: 14px; - margin-top: 6px; - background-position-x: -1445px; - } - - &.ee { - height: 13px; - margin-top: 7px; - background-position-x: -1467px; - } - - &.eg { - height: 14px; - margin-top: 6px; - background-position-x: -1489px; - } - - &.eh { - height: 10px; - margin-top: 8px; - background-position-x: -1511px; - } - - &.er { - height: 10px; - margin-top: 8px; - background-position-x: -1533px; - } - - &.es { - height: 14px; - margin-top: 6px; - background-position-x: -1555px; - } - - &.et { - height: 10px; - margin-top: 8px; - background-position-x: -1577px; - } - - &.eu { - height: 14px; - margin-top: 6px; - background-position-x: -1599px; - } - - &.fi { - height: 12px; - margin-top: 7px; - background-position-x: -1621px; - } - - &.fj { - height: 10px; - margin-top: 8px; - background-position-x: -1643px; - } - - &.fk { - height: 10px; - margin-top: 8px; - background-position-x: -1665px; - } - - &.fm { - height: 11px; - margin-top: 8px; - background-position-x: -1687px; - } - - &.fo { - height: 15px; - margin-top: 6px; - background-position-x: -1709px; - } - - &.fr { - height: 14px; - margin-top: 6px; - background-position-x: -1731px; - } - - &.ga { - height: 15px; - margin-top: 6px; - background-position-x: -1753px; - } - - &.gb { - height: 10px; - margin-top: 8px; - background-position-x: -1775px; - } - - &.gd { - height: 12px; - margin-top: 7px; - background-position-x: -1797px; - } - - &.ge { - height: 14px; - margin-top: 6px; - background-position-x: -1819px; - } - - &.gf { - height: 14px; - margin-top: 6px; - background-position-x: -1841px; - } - - &.gg { - height: 14px; - margin-top: 6px; - background-position-x: -1863px; - } - - &.gh { - height: 14px; - margin-top: 6px; - background-position-x: -1885px; - } - - &.gi { - height: 10px; - margin-top: 8px; - background-position-x: -1907px; - } - - &.gl { - height: 14px; - margin-top: 6px; - background-position-x: -1929px; - } - - &.gm { - height: 14px; - margin-top: 6px; - background-position-x: -1951px; - } - - &.gn { - height: 14px; - margin-top: 6px; - background-position-x: -1973px; - } - - &.gp { - height: 14px; - margin-top: 6px; - background-position-x: -1995px; - } - - &.gq { - height: 14px; - margin-top: 6px; - background-position-x: -2017px; - } - - &.gr { - height: 14px; - margin-top: 6px; - background-position-x: -2039px; - } - - &.gs { - height: 10px; - margin-top: 8px; - background-position-x: -2061px; - } - - &.gt { - height: 13px; - margin-top: 7px; - background-position-x: -2083px; - } - - &.gu { - height: 11px; - margin-top: 8px; - background-position-x: -2105px; - } - - &.gw { - height: 10px; - margin-top: 8px; - background-position-x: -2127px; - } - - &.gy { - height: 12px; - margin-top: 7px; - background-position-x: -2149px; - } - - &.hk { - height: 14px; - margin-top: 6px; - background-position-x: -2171px; - } - - &.hm { - height: 10px; - margin-top: 8px; - background-position-x: -2193px; - } - - &.hn { - height: 10px; - margin-top: 8px; - background-position-x: -2215px; - } - - &.hr { - height: 10px; - margin-top: 8px; - background-position-x: -2237px; - } - - &.ht { - height: 12px; - margin-top: 7px; - background-position-x: -2259px; - } - - &.hu { - height: 10px; - margin-top: 8px; - background-position-x: -2281px; - } - - &.ic { - height: 14px; - margin-top: 6px; - background-position-x: -2303px; - } - - &.id { - height: 14px; - margin-top: 6px; - background-position-x: -2325px; - } - - &.ie { - height: 10px; - margin-top: 8px; - background-position-x: -2347px; - } - - &.il { - height: 15px; - margin-top: 6px; - background-position-x: -2369px; - } - - &.im { - height: 10px; - margin-top: 8px; - background-position-x: -2391px; - } - - &.in { - height: 14px; - margin-top: 6px; - background-position-x: -2413px; - } - - &.io { - height: 10px; - margin-top: 8px; - background-position-x: -2435px; - } - - &.iq { - height: 14px; - margin-top: 6px; - background-position-x: -2457px; - } - - &.ir { - height: 12px; - margin-top: 7px; - background-position-x: -2479px; - } - - &.is { - height: 15px; - margin-top: 6px; - background-position-x: -2501px; - } - - &.it { - height: 14px; - margin-top: 6px; - background-position-x: -2523px; - } - - &.je { - height: 12px; - margin-top: 7px; - background-position-x: -2545px; - } - - &.jm { - height: 10px; - margin-top: 8px; - background-position-x: -2567px; - } - - &.jo { - height: 10px; - margin-top: 8px; - background-position-x: -2589px; - } - - &.jp { - height: 14px; - margin-top: 6px; - background-position-x: -2611px; - } - - &.ke { - height: 14px; - margin-top: 6px; - background-position-x: -2633px; - } - - &.kg { - height: 12px; - margin-top: 7px; - background-position-x: -2655px; - } - - &.kh { - height: 13px; - margin-top: 7px; - background-position-x: -2677px; - } - - &.ki { - height: 10px; - margin-top: 8px; - background-position-x: -2699px; - } - - &.km { - height: 12px; - margin-top: 7px; - background-position-x: -2721px; - } - - &.kn { - height: 14px; - margin-top: 6px; - background-position-x: -2743px; - } - - &.kp { - height: 10px; - margin-top: 8px; - background-position-x: -2765px; - } - - &.kr { - height: 14px; - margin-top: 6px; - background-position-x: -2787px; - } - - &.kw { - height: 10px; - margin-top: 8px; - background-position-x: -2809px; - } - - &.ky { - height: 10px; - margin-top: 8px; - background-position-x: -2831px; - } - - &.kz { - height: 10px; - margin-top: 8px; - background-position-x: -2853px; - } - - &.la { - height: 14px; - margin-top: 6px; - background-position-x: -2875px; - } - - &.lb { - height: 14px; - margin-top: 6px; - background-position-x: -2897px; - } - - &.lc { - height: 10px; - margin-top: 8px; - background-position-x: -2919px; - } - - &.li { - height: 12px; - margin-top: 7px; - background-position-x: -2941px; - } - - &.lk { - height: 10px; - margin-top: 8px; - background-position-x: -2963px; - } - - &.lr { - height: 11px; - margin-top: 8px; - background-position-x: -2985px; - } - - &.ls { - height: 14px; - margin-top: 6px; - background-position-x: -3007px; - } - - &.lt { - height: 12px; - margin-top: 7px; - background-position-x: -3029px; - } - - &.lu { - height: 12px; - margin-top: 7px; - background-position-x: -3051px; - } - - &.lv { - height: 10px; - margin-top: 8px; - background-position-x: -3073px; - } - - &.ly { - height: 10px; - margin-top: 8px; - background-position-x: -3095px; - } - - &.ma { - height: 14px; - margin-top: 6px; - background-position-x: -3117px; - } - - &.mc { - height: 15px; - margin-top: 6px; - background-position-x: -3139px; - } - - &.md { - height: 10px; - margin-top: 8px; - background-position-x: -3160px; - } - - &.me { - height: 10px; - margin-top: 8px; - background-position-x: -3182px; - } - - &.mf { - height: 14px; - margin-top: 6px; - background-position-x: -3204px; - } - - &.mg { - height: 14px; - margin-top: 6px; - background-position-x: -3226px; - } - - &.mh { - height: 11px; - margin-top: 8px; - background-position-x: -3248px; - } - - &.mk { - height: 10px; - margin-top: 8px; - background-position-x: -3270px; - } - - &.ml { - height: 14px; - margin-top: 6px; - background-position-x: -3292px; - } - - &.mm { - height: 14px; - margin-top: 6px; - background-position-x: -3314px; - } - - &.mn { - height: 10px; - margin-top: 8px; - background-position-x: -3336px; - } - - &.mo { - height: 14px; - margin-top: 6px; - background-position-x: -3358px; - } - - &.mp { - height: 10px; - margin-top: 8px; - background-position-x: -3380px; - } - - &.mq { - height: 14px; - margin-top: 6px; - background-position-x: -3402px; - } - - &.mr { - height: 14px; - margin-top: 6px; - background-position-x: -3424px; - } - - &.ms { - height: 10px; - margin-top: 8px; - background-position-x: -3446px; - } - - &.mt { - height: 14px; - margin-top: 6px; - background-position-x: -3468px; - } - - &.mu { - height: 14px; - margin-top: 6px; - background-position-x: -3490px; - } - - &.mv { - height: 14px; - margin-top: 6px; - background-position-x: -3512px; - } - - &.mw { - height: 14px; - margin-top: 6px; - background-position-x: -3534px; - } - - &.mx { - height: 12px; - margin-top: 7px; - background-position-x: -3556px; - } - - &.my { - height: 10px; - margin-top: 8px; - background-position-x: -3578px; - } - - &.mz { - height: 14px; - margin-top: 6px; - background-position-x: -3600px; - } - - &.na { - height: 14px; - margin-top: 6px; - background-position-x: -3622px; - } - - &.nc { - height: 10px; - margin-top: 8px; - background-position-x: -3644px; - } - - &.ne { - height: 15px; - margin-top: 6px; - background-position-x: -3666px; - } - - &.nf { - height: 10px; - margin-top: 8px; - background-position-x: -3686px; - } - - &.ng { - height: 10px; - margin-top: 8px; - background-position-x: -3708px; - } - - &.ni { - height: 12px; - margin-top: 7px; - background-position-x: -3730px; - } - - &.nl { - height: 14px; - margin-top: 6px; - background-position-x: -3752px; - } - - &.no { - height: 15px; - margin-top: 6px; - background-position-x: -3774px; - } - - &.np { - height: 15px; - margin-top: 6px; - background-position-x: -3796px; - } - - &.nr { - height: 10px; - margin-top: 8px; - background-position-x: -3811px; - } - - &.nu { - height: 10px; - margin-top: 8px; - background-position-x: -3833px; - } - - &.nz { - height: 10px; - margin-top: 8px; - background-position-x: -3855px; - } - - &.om { - height: 10px; - margin-top: 8px; - background-position-x: -3877px; - } - - &.pa { - height: 14px; - margin-top: 6px; - background-position-x: -3899px; - } - - &.pe { - height: 14px; - margin-top: 6px; - background-position-x: -3921px; - } - - &.pf { - height: 14px; - margin-top: 6px; - background-position-x: -3943px; - } - - &.pg { - height: 15px; - margin-top: 6px; - background-position-x: -3965px; - } - - &.ph { - height: 10px; - margin-top: 8px; - background-position-x: -3987px; - } - - &.pk { - height: 14px; - margin-top: 6px; - background-position-x: -4009px; - } - - &.pl { - height: 13px; - margin-top: 7px; - background-position-x: -4031px; - } - - &.pm { - height: 14px; - margin-top: 6px; - background-position-x: -4053px; - } - - &.pn { - height: 10px; - margin-top: 8px; - background-position-x: -4075px; - } - - &.pr { - height: 14px; - margin-top: 6px; - background-position-x: -4097px; - } - - &.ps { - height: 10px; - margin-top: 8px; - background-position-x: -4119px; - } - - &.pt { - height: 14px; - margin-top: 6px; - background-position-x: -4141px; - } - - &.pw { - height: 13px; - margin-top: 7px; - background-position-x: -4163px; - } - - &.py { - height: 11px; - margin-top: 8px; - background-position-x: -4185px; - } - - &.qa { - height: 8px; - margin-top: 9px; - background-position-x: -4207px; - } - - &.re { - height: 14px; - margin-top: 6px; - background-position-x: -4229px; - } - - &.ro { - height: 14px; - margin-top: 6px; - background-position-x: -4251px; - } - - &.rs { - height: 14px; - margin-top: 6px; - background-position-x: -4273px; - } - - &.ru { - height: 14px; - margin-top: 6px; - background-position-x: -4295px; - } - - &.rw { - height: 14px; - margin-top: 6px; - background-position-x: -4317px; - } - - &.sa { - height: 14px; - margin-top: 6px; - background-position-x: -4339px; - } - - &.sb { - height: 10px; - margin-top: 8px; - background-position-x: -4361px; - } - - &.sc { - height: 10px; - margin-top: 8px; - background-position-x: -4383px; - } - - &.sd { - height: 10px; - margin-top: 8px; - background-position-x: -4405px; - } - - &.se { - height: 13px; - margin-top: 7px; - background-position-x: -4427px; - } - - &.sg { - height: 14px; - margin-top: 6px; - background-position-x: -4449px; - } - - &.sh { - height: 10px; - margin-top: 8px; - background-position-x: -4471px; - } - - &.si { - height: 10px; - margin-top: 8px; - background-position-x: -4493px; - } - - &.sj { - height: 15px; - margin-top: 6px; - background-position-x: -4515px; - } - - &.sk { - height: 14px; - margin-top: 6px; - background-position-x: -4537px; - } - - &.sl { - height: 14px; - margin-top: 6px; - background-position-x: -4559px; - } - - &.sm { - height: 15px; - margin-top: 6px; - background-position-x: -4581px; - } - - &.sn { - height: 14px; - margin-top: 6px; - background-position-x: -4603px; - } - - &.so { - height: 14px; - margin-top: 6px; - background-position-x: -4625px; - } - - &.sr { - height: 14px; - margin-top: 6px; - background-position-x: -4647px; - } - - &.ss { - height: 10px; - margin-top: 8px; - background-position-x: -4669px; - } - - &.st { - height: 10px; - margin-top: 8px; - background-position-x: -4691px; - } - - &.sv { - height: 12px; - margin-top: 7px; - background-position-x: -4713px; - } - - &.sx { - height: 14px; - margin-top: 6px; - background-position-x: -4735px; - } - - &.sy { - height: 14px; - margin-top: 6px; - background-position-x: -4757px; - } - - &.sz { - height: 14px; - margin-top: 6px; - background-position-x: -4779px; - } - - &.ta { - height: 10px; - margin-top: 8px; - background-position-x: -4801px; - } - - &.tc { - height: 10px; - margin-top: 8px; - background-position-x: -4823px; - } - - &.td { - height: 14px; - margin-top: 6px; - background-position-x: -4845px; - } - - &.tf { - height: 14px; - margin-top: 6px; - background-position-x: -4867px; - } - - &.tg { - height: 13px; - margin-top: 7px; - background-position-x: -4889px; - } - - &.th { - height: 14px; - margin-top: 6px; - background-position-x: -4911px; - } - - &.tj { - height: 10px; - margin-top: 8px; - background-position-x: -4933px; - } - - &.tk { - height: 10px; - margin-top: 8px; - background-position-x: -4955px; - } - - &.tl { - height: 10px; - margin-top: 8px; - background-position-x: -4977px; - } - - &.tm { - height: 14px; - margin-top: 6px; - background-position-x: -4999px; - } - - &.tn { - height: 14px; - margin-top: 6px; - background-position-x: -5021px; - } - - &.to { - height: 10px; - margin-top: 8px; - background-position-x: -5043px; - } - - &.tr { - height: 14px; - margin-top: 6px; - background-position-x: -5065px; - } - - &.tt { - height: 12px; - margin-top: 7px; - background-position-x: -5087px; - } - - &.tv { - height: 10px; - margin-top: 8px; - background-position-x: -5109px; - } - - &.tw { - height: 14px; - margin-top: 6px; - background-position-x: -5131px; - } - - &.tz { - height: 14px; - margin-top: 6px; - background-position-x: -5153px; - } - - &.ua { - height: 14px; - margin-top: 6px; - background-position-x: -5175px; - } - - &.ug { - height: 14px; - margin-top: 6px; - background-position-x: -5197px; - } - - &.um { - height: 11px; - margin-top: 8px; - background-position-x: -5219px; - } - - &.us { - height: 11px; - margin-top: 8px; - background-position-x: -5241px; - } - - &.uy { - height: 14px; - margin-top: 6px; - background-position-x: -5263px; - } - - &.uz { - height: 10px; - margin-top: 8px; - background-position-x: -5285px; - } - - &.va { - height: 15px; - margin-top: 6px; - background-position-x: -5307px; - } - - &.vc { - height: 14px; - margin-top: 6px; - background-position-x: -5324px; - } - - &.ve { - height: 14px; - margin-top: 6px; - background-position-x: -5346px; - } - - &.vg { - height: 10px; - margin-top: 8px; - background-position-x: -5368px; - } - - &.vi { - height: 14px; - margin-top: 6px; - background-position-x: -5390px; - } - - &.vn { - height: 14px; - margin-top: 6px; - background-position-x: -5412px; - } - - &.vu { - height: 12px; - margin-top: 7px; - background-position-x: -5434px; - } - - &.wf { - height: 14px; - margin-top: 6px; - background-position-x: -5456px; - } - - &.ws { - height: 10px; - margin-top: 8px; - background-position-x: -5478px; - } - - &.xk { - height: 15px; - margin-top: 6px; - background-position-x: -5500px; - } - - &.ye { - height: 14px; - margin-top: 6px; - background-position-x: -5522px; - } - - &.yt { - height: 14px; - margin-top: 6px; - background-position-x: -5544px; - } - - &.za { - height: 14px; - margin-top: 6px; - background-position-x: -5566px; - } - - &.zm { - height: 14px; - margin-top: 6px; - background-position-x: -5588px; - } - - &.zw { - height: 10px; - margin-top: 8px; - background-position-x: -5610px; - } -} diff --git a/scss/components/input-phone-number/module.scss b/scss/components/input-phone-number/module.scss deleted file mode 100644 index 2aefcb9228..0000000000 --- a/scss/components/input-phone-number/module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../input/settings'; -@import '../forms/settings'; -@import 'settings'; - -@import 'input-phone-number'; diff --git a/scss/components/input-phone-number/settings.scss b/scss/components/input-phone-number/settings.scss deleted file mode 100644 index d7124ec82c..0000000000 --- a/scss/components/input-phone-number/settings.scss +++ /dev/null @@ -1,7 +0,0 @@ -$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; diff --git a/scss/components/input-search/examples/default.html b/scss/components/input-search/examples/default.html deleted file mode 100644 index 91a7fbdda9..0000000000 --- a/scss/components/input-search/examples/default.html +++ /dev/null @@ -1,21 +0,0 @@ -
- -
- - - - -
-
diff --git a/scss/components/input-search/examples/loading.html b/scss/components/input-search/examples/loading.html deleted file mode 100644 index 15e28c785d..0000000000 --- a/scss/components/input-search/examples/loading.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- - - - -
-
diff --git a/scss/components/input-search/examples/pill.html b/scss/components/input-search/examples/pill.html deleted file mode 100644 index 82b0af5183..0000000000 --- a/scss/components/input-search/examples/pill.html +++ /dev/null @@ -1,21 +0,0 @@ -
- -
- - - - -
-
diff --git a/scss/components/input/examples/clear.html b/scss/components/input/examples/clear.html deleted file mode 100644 index 6e203976c5..0000000000 --- a/scss/components/input/examples/clear.html +++ /dev/null @@ -1,29 +0,0 @@ -
- -
- - - - -
-
diff --git a/scss/components/input/examples/dark.html b/scss/components/input/examples/dark.html deleted file mode 100644 index 264e8e472c..0000000000 --- a/scss/components/input/examples/dark.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
- -
- -
-
-
diff --git a/scss/components/input/examples/default.html b/scss/components/input/examples/default.html deleted file mode 100644 index 388a75bd19..0000000000 --- a/scss/components/input/examples/default.html +++ /dev/null @@ -1,30 +0,0 @@ -
- -
- -
-
-
- -
- -
-
diff --git a/scss/components/input/examples/disabled.html b/scss/components/input/examples/disabled.html deleted file mode 100644 index ae4a63f92c..0000000000 --- a/scss/components/input/examples/disabled.html +++ /dev/null @@ -1,17 +0,0 @@ -
- -
- -
-
diff --git a/scss/components/input/examples/error.html b/scss/components/input/examples/error.html deleted file mode 100644 index c937cfac28..0000000000 --- a/scss/components/input/examples/error.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- -
-
- -
-
diff --git a/scss/components/input/examples/help-text.html b/scss/components/input/examples/help-text.html deleted file mode 100644 index e2f362df5d..0000000000 --- a/scss/components/input/examples/help-text.html +++ /dev/null @@ -1,17 +0,0 @@ -
- -
- -
-
This is help text for the HTML only input.
-
diff --git a/scss/components/input/examples/kitchen-sink.html b/scss/components/input/examples/kitchen-sink.html deleted file mode 100644 index a5e85af88a..0000000000 --- a/scss/components/input/examples/kitchen-sink.html +++ /dev/null @@ -1,1938 +0,0 @@ -
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - - - - - - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam et quam id ipsum ultrices gravida. - Donec tempor mattis erat, at suscipit ligula. - Nullam nec dui laoreet, tempor justo sed, consequat sapien. - Suspendisse eget odio id eros feugiat sollicitudin id vel eros. - Nunc mattis ac ligula sit amet consequat. - Etiam semper felis blandit enim dignissim, a semper diam viverra. - Praesent quis vehicula libero. Curabitur ut semper lorem, vel iaculis ex. -
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- -
-
-
- -
- -
-
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
-
- -
- -
-
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - -
-
-
- -
- -
-
Help Text
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
Help Text
-
-
- -
- -
- -
Help Text
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
-
diff --git a/scss/components/input/examples/nested .html b/scss/components/input/examples/nested .html deleted file mode 100644 index 134d0d6500..0000000000 --- a/scss/components/input/examples/nested .html +++ /dev/null @@ -1,15 +0,0 @@ -
- -
- -
-
diff --git a/scss/components/input/examples/read-only.html b/scss/components/input/examples/read-only.html deleted file mode 100644 index 000bd4727d..0000000000 --- a/scss/components/input/examples/read-only.html +++ /dev/null @@ -1,16 +0,0 @@ -
- -
- -
-
diff --git a/scss/components/input/examples/secondary-label.html b/scss/components/input/examples/secondary-label.html deleted file mode 100644 index d6ca72948d..0000000000 --- a/scss/components/input/examples/secondary-label.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- -
- -
diff --git a/scss/components/input/examples/success.html b/scss/components/input/examples/success.html deleted file mode 100644 index 746e36649f..0000000000 --- a/scss/components/input/examples/success.html +++ /dev/null @@ -1,20 +0,0 @@ -
- -
- -
-
- -
-
diff --git a/scss/components/input/examples/text-area.html b/scss/components/input/examples/text-area.html deleted file mode 100644 index 60a392225b..0000000000 --- a/scss/components/input/examples/text-area.html +++ /dev/null @@ -1,15 +0,0 @@ -
- -
- -
-
diff --git a/scss/components/input/examples/validation.html b/scss/components/input/examples/validation.html deleted file mode 100644 index c6f06d1b17..0000000000 --- a/scss/components/input/examples/validation.html +++ /dev/null @@ -1,30 +0,0 @@ -
-
-
- -
- -
-
- Possible errors include: required, min length = 5 and max length = 10 -
-
- - - -
-
-
-
diff --git a/scss/components/input/examples/warning.html b/scss/components/input/examples/warning.html deleted file mode 100644 index 735841ceda..0000000000 --- a/scss/components/input/examples/warning.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- -
-
- -
-
diff --git a/scss/components/input/input.scss b/scss/components/input/input.scss deleted file mode 100644 index 433778be47..0000000000 --- a/scss/components/input/input.scss +++ /dev/null @@ -1,355 +0,0 @@ -/** @component input */ - -@include exports('md-input') { - @include brand-font-face-regular; - // normalize - [class*='md'] { - button, - input, - textarea, - select, - *, - *:before, - *:after { - @include box-sizing(inherit); - } - - button, - input { - overflow: visible; - } - textarea { - overflow: auto; - max-width: 100%; - padding-top: rem-calc(2px); - padding-bottom: rem-calc(2px); - } - textarea[rows] { - height: auto; - } - [type='submit'] { - -webkit-appearance: none; - -moz-appearance: none; - } - input[type='file'] { - margin: 0 0 $form-spacing 0; - width: 100%; - } - [type='number'] { - -moz-appearance: textfield; - } - - [type='number']::-webkit-inner-spin-button, - [type='number']::-webkit-outer-spin-button { - height: auto; - } - [type='search']::-webkit-search-cancel-button, - [type='search']::-webkit-search-decoration { - -webkit-appearance: none; - } - - ::-webkit-input-placeholder { - color: inherit; - opacity: 0.6; - } - ::-webkit-file-upload-button { - font: inherit; /* 2 */ - -webkit-appearance: button; /* 1 */ - } - } - - .#{$input__class}-container { - @include flex($fw: wrap, $jc: normal, $ac: normal, $ai: normal); - box-sizing: border-box; - margin-bottom: rem-calc(16); - position: relative; - line-height: $input__line-height; - - &.column, - &.columns { - padding: 0; - } - - &.#{$prefix}-disabled { - .#{$input__class}__label, - .#{$input__class}__secondary-label { - cursor: not-allowed; - } - } - - &.#{$input__class} { - &--nested { - &-1 { - padding-left: 2rem; - } - - &-2 { - padding-left: 4rem; - } - - &-3 { - padding-left: 6rem; - } - } - } - } - - .#{$input__class} { - border: $input__border-width solid; - border-radius: $input__border-radius; - font-family: $input__font-family; - font-size: $input__font-size; - height: $input__height; - width: 100%; - padding: $input__padding; - transition: box-shadow ease-out 0.15s; - - // fix to remove the very annoying "X" added to all input fields in IE > 9. - // http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx - &::-ms-clear, - &::-ms-reveal { - width: 0px; - height: 0px; - } - - &:focus, - &.#{$prefix}-focus { - @include focus-styles; - - transition: box-shadow ease-in 0.15s; - } - - &[readonly], - &.#{$prefix}-readonly { - cursor: default; - } - - &:disabled, - &.#{$prefix}-disabled { - cursor: not-allowed; - } - - // Elements - &__after { - right: 0; - left: auto; - } - - &__before { - right: auto; - left: 0; - } - - &__after, - &__before { - @include flex; - position: absolute; - height: 100%; - width: $input__padding-side--icon; - top: 0; - } - - &__help-text { - display: inline-flex; - padding-left: rem-calc(16); - padding-top: rem-calc(8); - } - - &__help-text, - &__label, - &__messages { - width: 100%; - font-family: $brand-font-regular; - } - - &__label { - margin-bottom: rem-calc(8); - } - - &__messages { - display: none; - font-size: $input__message__font-size; - line-height: $input__message__line-height; - padding-left: rem-calc(16); - padding-top: rem-calc(8); - } - - &__message { - display: inline-flex; - line-height: $input__message__line-height; - width: 100%; - - &--error{ - padding-left: 1rem; - color: $md-red-50; - line-height: $input__message__line-height; - position: relative; - top: -.5rem; - font-size: $input__message__font-size; - - &:before { - @include icon-clear_16; - } - } - - &:before { - margin-right: rem-calc(8); - float: left; - font-family: $icon-font-name; - font-size: $input__message__icon__font-size; - } - } - - &__secondary-label { - font-family: $brand-font-regular; - align-self: center; - padding-left: 0.5rem; - flex-grow: 1; - width: auto; - - cursor: pointer; - } - - &__help-text, - &__secondary-label.#{$label__class} { - font-size: $input__message__font-size; - line-height: $input__message__line-height; - } - - &__wrapper { - box-sizing: border-box; - display: block; - flex-grow: 1; - position: relative; - padding: 0; - } - - // Modifiers - &--after { - padding-right: $input__padding-side--icon; - } - - &--before { - padding-left: $input__padding-side--icon; - } - - &--pill { - border-radius: $input--pill__border-radius; - } - - // MUST REMAIN BELOW --PILL TO OVERWRITE RADIUS - &--multiline { - resize: vertical; - border-radius: $input__border-radius; - } - - &__icon-clear { - border: none; - } - } - textarea.#{$input__class} { - height: auto; - } - - /* Color */ - .#{$input__class}-container { - // Outline - @include input-color( - $background-color: $input__background, - $background-color-css-var: --mds-color-theme-background-solid-primary-normal, - $background-color-disabled: $input__background--disabled, - $background-color-disabled-css-var: --mds-color-theme-background-primary-disabled, - $background-color-hover: $input__background--hover, - $background-color-hover-css-var: --mds-color-theme-background-primary-hover, - $border-color: $input__border-color, - $border-color-css-var: --mds-color-theme-outline-input-normal, - $color: $input__font-color, - $color-css-var: --mds-color-theme-text-primary-normal, - $color-clear: $input__clear-icon__color, - $color-clear-css-var: --mds-color-theme-text-secondary-normal, - $color-clear-hover: $input__clear-icon__color--hover, - $color-clear-hover-css-var: --mds-color-theme-text-secondary-normal, - $color-disabled: $input__font-color--disabled, - $color-disabled-css-var: --mds-color-theme-text-primary-disabled, - $color-help: $input__font-color--help, - $color-help-css-var: --mds-color-theme-text-secondary-normal, - $color-placeholder: $input__font-color--placeholder, - $color-placeholder-css-var: --mds-color-theme-text-secondary-normal, - $color-read-only: $input__font-color--read-only, - $color-read-only-css-var: --mds-color-theme-text-primary-disabled - ); - - // Error - &.#{$prefix}-error { - @include input-color( - $background-color: $input__background--error, - $background-color-css-var: --mds-color-theme-background-solid-primary-normal, - $background-color-hover: $input__background--error--hover, - $background-color-hover-css-var: --mds-color-theme-background-primary-hover, - $border-color: $input__border-color--error, - $border-color-css-var: --mds-color-theme-outline-cancel-normal, - $color-message: $input__message__font-color--error, - $color-message-css-var: --mds-color-theme-text-error-normal - ); - - .#{$input__class} { - &__messages { - display: block; - } - &__message { - &:before { - @include icon-warning_16; - } - } - } - } - - // Warning - &.#{$prefix}-warning { - @include input-color( - $background-color: $input__background--warning, - $background-color-css-var: --mdl-alert-background-warning, - $background-color-hover: $input__background--warning--hover, - $background-color-hover-css-var: --mdl-alert-background-warning, - $border-color: $input__border-color--warning, - $color-message: $input__message__font-color--warning, - $color-message-css-var: --mds-color-theme-text-warning-normal - ); - - .#{$input__class} { - &__messages { - display: block; - } - &__message { - &:before { - @include icon-warning_16; - } - } - } - } - - // Success - &.#{$prefix}-success { - @include input-color( - $background-color: $input__background--success, - $background-color-css-var: --mdl-alert-background-success, - $background-color-hover: $input__background--success--hover, - $background-color-hover-css-var: --mdl-alert-background-success, - $border-color: $input__border-color--success, - $color-message: $input__message__font-color--success, - $color-message-css-var: --mdl-input-text-error - ); - - .#{$input__class} { - &__messages { - display: block; - } - &__message { - &:before { - @include icon-check-circle_16; - } - } - } - } - } -} diff --git a/scss/components/input/mixins.scss b/scss/components/input/mixins.scss deleted file mode 100644 index 07075dddc7..0000000000 --- a/scss/components/input/mixins.scss +++ /dev/null @@ -1,241 +0,0 @@ -// Remove after fixing checkbox/radio button -@mixin input__help-text( - $color: $input__font-color--help, - $color-dark: $input__font-color--help--dark, - $color-contrast: $input__font-color--help--contrast, - $color-dark-contrast: $input__font-color--help--dark--contrast -) { - color: $input__font-color--help; - font-family: $brand-font-regular; - font-size: rem-calc(14); - line-height: rem-calc(22); - padding-left: rem-calc(16); - - .#{$contrast-class} & { - color: $input__font-color--help--contrast; - } - - .#{$dark-class} &, - .#{$input__class}-container--dark & { - color: $input__font-color--help--dark; - - .#{$contrast-class} & { - color: $input__font-color--help--dark--contrast; - } - } - - @include vr-spacing(mb, 0.25); - - span { - font-size: inherit; - } -} - -@mixin input-color( - $color: null, - $color-css-var: --null, - $color-clear: null, - $color-clear-css-var: --null, - $color-clear-hover: null, - $color-clear-hover-css-var: --null, - $color-disabled: null, - $color-disabled-css-var: --null, - $color-help: null, - $color-help-css-var: --null, - $color-message: null, - $color-message-css-var: --null, - $color-placeholder: null, - $color-placeholder-css-var: --null, - $color-read-only: null, - $color-read-only-css-var: --null, - $background-color: null, - $background-color-css-var: --null, - $background-color-disabled: null, - $background-color-disabled-css-var: --null, - $background-color-hover: null, - $background-color-hover-css-var: --null, - $border-color: null, - $border-color-css-var: --null -) { - - .#{$input__class}:not(.md-select__filter--input) { - @if $color { - color: $color; - color: var($color-css-var, $color); - } - - @if $background-color { - background-color: $background-color; - background-color: var($background-color-css-var, $background-color); - } - - @if $border-color { - border-color: $border-color; - border-color: var($border-color-css-var, $border-color); - } @else { - border: none; - } - - &::placeholder { - @if $color-placeholder { - color: $color-placeholder; - color: var($color-placeholder-css-var, $color-placeholder); - } - opacity: 1; - } - - &:hover, - &.#{$prefix}-hover { - @if $background-color-hover { - background-color: $background-color-hover; - background-color: var($background-color-hover-css-var, $background-color-hover); - } - } - - &:disabled, - &.#{$prefix}-disabled { - @if $color-disabled { - color: $color-disabled; - color: var($color-disabled-css-var, $color-disabled); - } - - @if $background-color-disabled { - background-color: $background-color-disabled; - background-color: var($background-color-disabled-css-var, $background-color-disabled); - } - - border-color: $input__border-color--read-only; - - &::placeholder { - @if $color-disabled { - color: $color-disabled; - color: var($color-disabled-css-var, $color-disabled); - } - } - - &:hover { - @if $background-color-disabled { - background-color: $background-color-disabled; - background-color: var($background-color-disabled-css-var, $background-color-disabled); - } - } - } - - &[readonly], - &.#{$prefix}-readonly { - @if $color-read-only { - color: $color-read-only; - color: var($color-read-only-css-var, $color-read-only); - } - - @if $background-color-disabled { - background-color: $background-color-disabled; - background-color: var($background-color-disabled-css-var, $background-color-disabled); - } - - border-color: $input__border-color--read-only; - - &:hover { - @if $background-color-disabled { - background-color: $background-color-disabled; - background-color: var($background-color-disabled-css-var, $background-color-disabled); - } - } - } - } - - &.#{$prefix}-disabled { - .#{$input__class} { - &__before { - @include input-icon($color: $color-disabled) - } - } - } - - .#{$input__class} { - &__after, - &__before { - @include input-icon( - $color: $color, - $color-css-var: $color-css-var - ) - } - - &__icon-clear { - @include input-clear-color( - $color-clear, - $color-clear-css-var, - $color-clear-hover, - $color-clear-hover-css-var, - ); - } - } - - .#{$input__class}__messages { - @if $color-message { - color: $color-message; - color: var($color-message-css-var, $color-message); - } - - &:before { - @if $color-message { - color: $color-message; - color: var($color-message-css-var, $color-message); - } - } - } - - .#{$input__class}__help-text, - .#{$input__class}__secondary-label { - @if $color-help { - color: $color-help; - color: var(--mds-color-theme-text-primary-normal); - } - } -} - - -@mixin input-icon( - $color: null, - $color-css-var: --null -) { - @if $color { - color: $color; - color: var($color-css-var, $color); - fill: $color; - fill: var($color-css-var, $color); - - .#{$spinner__class} { - @include spinner-style( - $border-progress-left: $color, - $border-progress-left-css-var: $color-css-var - ); - } - } -} - -@mixin input-clear-color( - $color: $input__clear-icon__color, - $color-css-var: --null, - $color-hover: $input__clear-icon__color--hover, - $color-hover-css-var: --null -) { - background-color: transparent; - @if $color { - color: $color; - color: var($color-css-var, $color); - fill: $color; - fill: var($color-css-var, $color); - } - - &:hover, - &:focus { - background-color: transparent; - @if $color-hover { - color: $color-hover; - color: var($color-hover-css-var, $color-hover); - fill: $color-hover; - fill: var($color-hover-css-var, $color-hover); - } - } -} diff --git a/scss/components/input/module.scss b/scss/components/input/module.scss deleted file mode 100644 index fb27c7027f..0000000000 --- a/scss/components/input/module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import '../../tools/functions/core'; - -@import '~@momentum-ui/icons/scss/variables'; -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../loader/settings'; -@import '../label/settings'; -@import '../forms/settings'; -@import 'settings'; - -@import '../loader/mixins'; -@import '../../typography/mixins'; -@import '../../tools/mixins/core'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/spacing'; -@import '~@momentum-ui/icons/scss/mixins'; -@import 'mixins'; - -@import 'input'; diff --git a/scss/components/input/settings.scss b/scss/components/input/settings.scss deleted file mode 100644 index 8429716be3..0000000000 --- a/scss/components/input/settings.scss +++ /dev/null @@ -1,121 +0,0 @@ -$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; diff --git a/scss/components/label/label.scss b/scss/components/label/label.scss deleted file mode 100644 index 1336659b2a..0000000000 --- a/scss/components/label/label.scss +++ /dev/null @@ -1,17 +0,0 @@ -@include exports('md-label') { - .#{$label__class} { - @include form-label; - - &.right { - @include form-label(right, false); - } - - &.inline { - @include form-label(inline, false); - } - - small { - text-transform: $form-label-small-transform; - } - } -} diff --git a/scss/components/label/mixins.scss b/scss/components/label/mixins.scss deleted file mode 100644 index 64c583bd01..0000000000 --- a/scss/components/label/mixins.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin form-label($alignment: false, $base-style: true) { - @if $base-style { - font-family: $label__font-family; - font-size: $label__font-size; - line-height: $label__line-height; - color: $label__font-color; - color: var(--mds-color-theme-text-primary-normal); - - .#{$dark-class} &, - &.#{$label__class}--dark { - color: $label__font-color--dark; - } - - cursor: pointer; - } - - @if $alignment==right { - float: none !important; - text-align: right; - } @else if $alignment==inline { - padding: $label__spacing * 0.5 + rem-calc($input__border-width) 0; - margin: 0 0 $label__spacing 0; - } -} diff --git a/scss/components/label/module.scss b/scss/components/label/module.scss deleted file mode 100644 index ac1e9c90e6..0000000000 --- a/scss/components/label/module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../forms/settings'; -@import '../input/settings'; - -// Typography -@import '../../typography/mixins.scss'; -@include brand-font-face-regular; - -// Component Specific -@import 'settings'; -@import 'mixins'; -@import 'label'; diff --git a/scss/components/label/settings.scss b/scss/components/label/settings.scss deleted file mode 100644 index 055df0f291..0000000000 --- a/scss/components/label/settings.scss +++ /dev/null @@ -1,10 +0,0 @@ -$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; diff --git a/scss/components/lightbox/examples/default.html b/scss/components/lightbox/examples/default.html deleted file mode 100644 index ec65f86ace..0000000000 --- a/scss/components/lightbox/examples/default.html +++ /dev/null @@ -1,61 +0,0 @@ -
- -
diff --git a/scss/components/lightbox/examples/multiple .html b/scss/components/lightbox/examples/multiple .html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/lightbox/lightbox.scss b/scss/components/lightbox/lightbox.scss deleted file mode 100755 index 5256a4e3fb..0000000000 --- a/scss/components/lightbox/lightbox.scss +++ /dev/null @@ -1,311 +0,0 @@ -@include exports('md-lightbox') { - .#{$prefix}-lightbox__container { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal-background; - display: block; - width: 100%; - height: 100%; - - > .#{$prefix}-lightbox, > .#{$prefix}-lightbox div.md-theme-provider-wrapper { - display: flex; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - overflow: hidden; - color: $lightbox__color; - background: $lightbox__background; - box-shadow: none; - user-select: none; - flex-direction: column; - - .md-icon { - fill: $lightbox__color; - } - - .#{$prefix}-lightbox__control { - @include flex(); - - width: $lightbox-control__size; - height: $lightbox-control__size; - padding: 0; - font-size: 1rem; - cursor: pointer; - background: transparent; - border: none; - - &:hover, - &:focus { - background: $lightbox-controls--hover__background; - } - - &.#{$prefix}-lightbox__control-spinner { - cursor: default; - - &:hover { - background: none; - } - } - } - - div.md-theme-provider-wrapper > .#{$prefix}-lightbox__header { - display: flex; - height: $lightbox-control__size; - font-size: 0.875rem; - background-color: $lightbox-header__background; - box-shadow: $lightbox-header__box-shadow; - transition: opacity 0.75s ease-in; - flex-direction: row; - justify-content: space-between; - align-items: center; - - > .#{$prefix}-lightbox__header-item--left { - max-width: 15%; - flex: 1 1 15%; - - .#{$prefix}-lightbox__header-meta { - display: flex; - margin-left: 25px; - flex: 0 0 auto; - flex-direction: column; - - > .#{$prefix}-lightbox__header-sharer { - @include truncate(); - - width: 100%; - } - - > .#{$prefix}-lightbox__header-timestamp { - @include truncate(); - - width: 100%; - color: $lightbox-header-timestamp__color; - } - } - } - - > .#{$prefix}-lightbox__header-item--center { - display: flex; - max-width: 70%; - flex: 1 1 70%; - justify-content: center; - - > .#{$prefix}-lightbox__header-name { - @include truncate(); - - font-size: 1.25rem; - font-weight: 500; - margin: auto; - text-align: center; - flex: 1 1 auto; - } - } - - > .#{$prefix}-lightbox__header-item--right { - display: flex; - max-width: 15%; - flex: 1 1 15%; - justify-content: flex-end; - } - } - - div.md-theme-provider-wrapper > .#{$prefix}-lightbox__body { - display: flex; - height: 100%; - overflow: auto; - flex-direction: row; - - .#{$prefix}-lightbox__thumbnail-wrapper:not(.#{$prefix}-lightbox__thumbnail-wrapper--selected):hover { - background-color: $lightbox-wrapper--hover__background; - } - - > .#{$prefix}-lightbox__list { - @include scrollbar_dark(); - - width: $lightbox-list__size; - overflow-x: hidden; - overflow-y: auto; - text-align: center; - background-color: $lightbox-list__background; - flex: 0 0 auto; - - > .#{$prefix}-lightbox__thumbnail-wrapper { - padding: 10px 0; - font-family: $brand-font-extra-light; - font-size: 0.875rem; - - &.#{$prefix}-lightbox__thumbnail-wrapper--selected { - background-color: $lightbox-thumbnail--selected__color; - - .#{$prefix}-lightbox__thumbnail { - border: $lightbox-thumbnail__border; - transform: scale(1); - box-shadow: $lightbox-thumbnail__box-shadow; - } - } - - > .#{$prefix}-lightbox__thumbnail { - width: $lightbox-thumbnail__size; - max-width: $lightbox-thumbnail__size; - min-width: $lightbox-thumbnail__size; - cursor: pointer; - border: 1px solid transparent; - transform: translateZ(0) scale(0.8); - transition: all 0.2s linear; - user-drag: none; - - &--decrypting { - display: flex; - width: 150px; - margin: auto; - transform: translateZ(0); - align-items: center; - justify-content: center; - } - - &--icon { - font-size: 40px; - } - } - } - } - - .#{$prefix}-lightbox__content { - position: relative; - display: flex; - padding: 0; - overflow: hidden; - box-shadow: $lightbox-content__box-shadow; - flex: 1 1 auto; - flex-direction: row; - align-items: center; - - .#{$prefix}-lightbox__viewport { - display: flex; - display: flex; - margin: 20px 40px 70px 40px; - overflow: auto; - flex: 1 1 auto; - align-self: stretch; - - @include scrollbar_dark(); - @include scrollbar_wide(); - - &.#{$prefix}-lightbox__viewport--decrypting { - display: flex; - align-items: center; - justify-content: center; - } - - .#{$prefix}-spinner.#{$prefix}-lightbox__decrypting-spinner { - position: absolute; - } - - .#{$prefix}-lightbox__viewport-wrapper { - margin: auto; - - > .#{$prefix}-lightbox__viewport-image { - display: block; - width: 100%; - height: 100%; - margin: auto; - user-select: none; - user-drag: none; - } - } - } - - .#{$prefix}-lightbox__page-control { - display: flex; - padding: 0; - cursor: pointer; - background: transparent; - border: none; - outline: none; - - &:hover .#{$prefix}-lightbox__page-control-icon, - &:focus .#{$prefix}-lightbox__page-control-icon { - background-color: $lightbox-page-control--hover__background; - } - - &.#{$prefix}-lightbox__page-control-icon { - display: flex; - width: 28px; - height: 54px; - padding: 0; - font-size: 0.875rem; - line-height: 11px; - background: $lightbox-page-control__background; - align-items: center; - } - - &.#{$prefix}-lightbox__page-controls--left { - position: absolute; - left: 0; - border-bottom-right-radius: 54px; - border-top-right-radius: 54px; - justify-content: flex-start; - } - - &.#{$prefix}-lightbox__page-controls--right { - position: absolute; - right: 0; - border-bottom-left-radius: 54px; - border-top-left-radius: 54px; - justify-content: flex-end; - } - } - - .#{$prefix}-lightbox__viewer-controls { - position: absolute; - right: 0; - bottom: 0; - left: 0; - display: flex; - width: 440px; - height: 48px; - margin: auto; - font-family: $brand-font-extra-light; - font-size: 14px; - background-color: $lightbox-viewer-controls__background; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.18), - 0 8px 18px 0 rgba(0, 0, 0, 0.18); - transition: opacity 0.75s ease-in; - flex-direction: row; - justify-content: space-between; - align-items: center; - - > .#{$prefix}-lightbox__controls { - display: flex; - flex: 0 0 auto; - flex-direction: row; - - &.#{$prefix}-lightbox__controls--center { - max-width: 200px; - flex: 1 1 auto; - } - - > .#{$prefix}-lightbox__control-value { - @include truncate(); - - min-width: 48px; - margin: auto 0; - text-align: center; - } - - > .#{$prefix}-lightbox__download-button { - display: flex; - justify-content: center; - align-items: center; - } - } - } - } - } - } - } -} diff --git a/scss/components/lightbox/mixins.scss b/scss/components/lightbox/mixins.scss deleted file mode 100755 index ddefc3e6b7..0000000000 --- a/scss/components/lightbox/mixins.scss +++ /dev/null @@ -1,44 +0,0 @@ -@mixin truncate() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -@mixin scrollbar_dark() { - &::-webkit-scrollbar { - width: 4px; - height: 4px; - } - - &::-webkit-scrollbar-thumb { - height: 50px; - background-color: transparent; - border: none; - -webkit-box-shadow: none; - background-clip: padding-box; - border-image-source: initial; - border-image-slice: initial; - border-image-width: initial; - border-image-outset: initial; - border-image-repeat: initial; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.2) !important; - } - - &::-webkit-scrollbar-corner { - background-color: transparent; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } -} - -@mixin scrollbar_wide() { - &::-webkit-scrollbar { - width: 8px; - height: 8px; - } -} diff --git a/scss/components/lightbox/module.scss b/scss/components/lightbox/module.scss deleted file mode 100644 index 1a0fd45e90..0000000000 --- a/scss/components/lightbox/module.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../../settings/z-index'; - -@import '../../tools/mixins/flex'; - -// Component Specific -@import 'settings'; -@import 'mixins'; -@import 'lightbox'; diff --git a/scss/components/lightbox/settings.scss b/scss/components/lightbox/settings.scss deleted file mode 100755 index ecdb009de0..0000000000 --- a/scss/components/lightbox/settings.scss +++ /dev/null @@ -1,21 +0,0 @@ -$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; diff --git a/scss/components/link/examples/default.html b/scss/components/link/examples/default.html deleted file mode 100644 index f826f881f3..0000000000 --- a/scss/components/link/examples/default.html +++ /dev/null @@ -1,3 +0,0 @@ - Default Link -
Div Link
- Span Link diff --git a/scss/components/link/link.scss b/scss/components/link/link.scss deleted file mode 100644 index d0787d31fb..0000000000 --- a/scss/components/link/link.scss +++ /dev/null @@ -1,109 +0,0 @@ -/** @component link */ - -@include exports('md-link') { - .#{$prefix}-link { - width: fit-content; - font-size: rem-calc(16); - line-height: rem-calc(24); - cursor: pointer; - - &:focus, - &.focus-state { - @include focus-styles; - } - - &.disabled, - &[disabled], - &:disabled { - pointer-events: none; - opacity: 0.2; - } - - &--blue { - @include link-color( - $color: $md-theme-50, - $color-css-var: --mdl-textColor-hyperlink-color, - $color-hover: $md-theme-60, - $color-hover-css-var: --mdl-textColor-hyperlink-hover, - $color-active: $md-theme-70, - $color-active-css-var: --mdl-textColor-hyperlink-focus - ); - } - - &--red { - @include link-color( - $color: $md-red-50, - $color-hover: $md-red-60, - $color-active: $md-red-70 - ); - } - - &--green { - @include link-color( - $color: $md-green-50, - $color-hover: $md-green-60, - $color-active: $md-green-70 - ); - } - - &--yellow { - @include link-color( - $color: $md-yellow-50, - $color-hover: $md-yellow-60, - $color-active: $md-yellow-70 - ); - } - - &--orange { - @include link-color( - $color: $md-orange-50, - $color-hover: $md-orange-60, - $color-active: $md-orange-70 - ); - } - - &--dark { - &.#{$prefix}-link { - &--blue { - @include link-color( - $color: $md-theme-50, - $color-hover: $md-theme-40, - $color-active: $md-theme-30 - ); - } - - &--red { - @include link-color( - $color: $md-red-50, - $color-hover: $md-red-40, - $color-active: $md-red-30 - ); - } - - &--green { - @include link-color( - $color: $md-green-50, - $color-hover: $md-green-40, - $color-active: $md-green-30 - ); - } - - &--yellow { - @include link-color( - $color: $md-yellow-50, - $color-hover: $md-yellow-40, - $color-active: $md-yellow-30 - ); - } - - &--orange { - @include link-color( - $color: $md-orange-50, - $color-hover: $md-orange-40, - $color-active: $md-orange-30 - ); - } - } - } - } -} diff --git a/scss/components/link/mixins.scss b/scss/components/link/mixins.scss deleted file mode 100644 index 764d18a34d..0000000000 --- a/scss/components/link/mixins.scss +++ /dev/null @@ -1,31 +0,0 @@ -@mixin link-color( - $color: inherit, - $color-css-var: inherit, - $color-hover: inherit, - $color-hover-css-var: inherit, - $color-active: inherit, - $color-active-css-var: inherit -) { - color: $color; - color: var($color-css-var, $color); - fill: $color; - fill: var($color-css-var, $color); - - &:hover, - &.hover, - &.hover-state { - color: $color-hover; - color: var($color-hover-css-var, $color-hover); - fill: $color-hover; - fill: var($color-hover-css-var, $color-hover); - } - - &:active, - &.active-state, - &.active { - color: $color-active; - color: var($color-active-css-var, $color-active); - fill: $color-active; - fill: var($color-active-css-var, $color-active); - } -} diff --git a/scss/components/link/module.scss b/scss/components/link/module.scss deleted file mode 100644 index 07345c8350..0000000000 --- a/scss/components/link/module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import "../../tools/functions/core"; -@import "../../tools/mixins/core"; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../settings/core.scss"; -@import "../../settings/focus.scss"; -@import "../../settings/media.scss"; -@import "../../typography/settings.scss"; - -// Tools -@import "../../tools/mixins/focus"; -@import "../../typography/mixins"; - -// Generic -@import "../../generic/normalize"; -@import "../../generic/global"; - -// Typography -@include brand-font-face-regular; - -// Component Specific -@import 'mixins'; -@import 'link'; diff --git a/scss/components/list-item/examples/dark .html b/scss/components/list-item/examples/dark .html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/list-item/examples/default.html b/scss/components/list-item/examples/default.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/list-item/examples/list-item-header.html b/scss/components/list-item/examples/list-item-header.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/list-item/examples/list-item-section.html b/scss/components/list-item/examples/list-item-section.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/list-item/examples/list-item-separator.html b/scss/components/list-item/examples/list-item-separator.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/list-item/list-item.scss b/scss/components/list-item/list-item.scss deleted file mode 100644 index a0bfdf9990..0000000000 --- a/scss/components/list-item/list-item.scss +++ /dev/null @@ -1,139 +0,0 @@ -/** @component list-item */ - -@include exports('md-list-item') { - .#{$list-item__class} { - @include list-item; - @include list-item-size; - @include list-item-color; - @include list-item--dark; - @include list-item--contrast; - - &--large, - &--52 { - @include list-item-size( - $height: $list-item--large__height, - $section-margin: $list-item--large__section-margin-side, - $avatar-size: $list-item--large__avatar__dimension, - $avatar-font-size: $list-item__avatar__font-size - ); - @include list-item-color; - } - - &--xlarge, - &--60 { - @include list-item-size( - $height: $list-item--xlarge__height, - $section-margin: $list-item--large__section-margin-side, - $avatar-size: $list-item--large__avatar__dimension, - $avatar-font-size: $list-item__avatar__font-size - ); - @include list-item--dark; - @include list-item--contrast; - } - - &--small, - &--36 { - @include list-item-size( - $padding: $list-item--small__padding, - $height: $list-item--small__height, - $section-margin: $list-item--small__section-margin-side - ); - @include list-item--dark; - @include list-item--contrast; - } - - &-header { - @include list-item-size( - $padding: $list-item-header__padding, - $height: $list-item-header__height - ); - @include list-item-color( - $hover-bgrd-color: $list-item__background, - $active-bgrd-color: $list-item__background, - $header-color: $list-item-header__color, - $header-color-css-var: --mdl-textColor-primary, - ); - - margin: $list-item-header__margin; - font-size: rem-calc(14); - cursor: default; - - &:focus, - &.focus { - outline: none; - } - - &--space { - @include list-item-color( - $background-color: $list-item__background--dark, - $hover-bgrd-color: $list-item__background--dark, - $active-bgrd-color: $list-item__background--dark, - $header-color: $list-item-header__color--dark - ); - - &-light { - @include list-item-color( - $background-color: $md-gray-05, - $background-color-css-var: --mdl-background-secondary, - $color: $md-gray-70, - $color-css-var: --mdl-textColor-secondary, - $active-color: $md-gray-100, - $active-color-css-var: --mdl-textColor-primary, - $hover-bgrd-color: $md-gray-10, - $hover-bgrd-color-css-var: --mdl-background-tertiary, - $active-bgrd-color:$md-gray-10, - $active-bgrd-color-css-var: --mdl-background-tertiary, - $hover-header-color: $md-gray-100, - $hover-header-color-css-var: --mdl-textColor-primary, - $hover-subheader-color: $md-gray-100, - $hover-subheader-color-css-var: --mdl-textColor-primary, - $header-color: $md-gray-70, - $header-color-css-var: --mdl-textColor-secondary, - $subheader-color: $md-gray-70, - $subheader-color-css-var: --mdl-textColor-secondary, - $focus-color:$md-gray-10, - $focus-color-css-var: --mdl-background-tertiary, - ); - } - } - - @include list-item--dark( - $color: $list-item-header__color--dark, - $background-color--hover: $list-item__background--dark, - $background-color--active: $list-item__background--dark - ); - @include list-item--contrast; - } - } - - .#{$list__class} { - &--vertical { - @include flex($fd: column, $jc: flex-start); - - width: 100%; - height: auto; - - .#{$list-item__class} { - flex: 0 0 auto; - } - } - - &--horizontal { - @include flex(); - - height: 100%; - - .#{$list-item__class} { - width: auto; - - @include flex; - } - } - - &--wrap { - flex-wrap: wrap; - justify-content: flex-start; - align-content: flex-start; - } - } -} diff --git a/scss/components/list-item/mixins.scss b/scss/components/list-item/mixins.scss deleted file mode 100644 index 6a5e374e40..0000000000 --- a/scss/components/list-item/mixins.scss +++ /dev/null @@ -1,458 +0,0 @@ -@mixin list-item-section( - $order: 0, - $margin-left: 0, - $margin-right: 0, - $flex-grow: 1, - $flex-shrink: 1, - $flex-basis: auto -) { - height: 100%; - margin-right: $margin-right; - margin-left: $margin-left; - order: $order; - flex: $flex-grow $flex-shrink $flex-basis; -} - -@mixin list-item-size( - $padding: $list-item__padding, - $height: $list-item__height, - $section-margin: $list-item__section-margin-side, - $avatar-size: $list-item__avatar__dimension, - $avatar-font-size: $list-item__avatar__font-size -) { - height: $height; - padding: $padding; - - > [class$='__left'] { - margin-right: $section-margin; - - > .#{$prefix}-list-item__avatar { - @include avatar-size($size: $avatar-size, $font-size: $avatar-font-size); - } - } - - > [class$='__right'] { - margin-left: $section-margin; - } -} - -@mixin list-item() { - @include flex($jc: flex-start); - - position: relative; - width: 100%; - font-size: $list-item__font-size; - line-height: $list-item__line-height; - white-space: nowrap; - cursor: pointer; - flex: 1 1 auto; - - > .#{$list-item__class} { - &__center { - @include flex($ai: flex-start, $fd: column); - @include list-item-section($order: 1); - - width: 100%; - overflow: hidden; - } - - &__center-align { - @include flex($fd: column); - - width: 100%; - overflow: hidden; - } - - &__left { - @include flex; - @include list-item-section($order: 0, $flex-shrink: 0); - } - - &__right { - @include flex; - @include list-item-section($order: 2, $flex-shrink: 0); - } - } - - .#{$list-item__class} { - &__header { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - } - - &__subheader { - width: 100%; - overflow: hidden; - font-size: $list-item__font-size--subheader; - line-height: $list-item__line-height--subheader; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - &.#{$list-item__class}--read-only { - cursor: default; - } - - &:disabled, - &.disabled { - pointer-events: none; - } - - &.#{$list-item__class}--separator { - border-right: none; - border-bottom: $list-item-separator; - - .#{$list__class}--horizontal > & { - border-right: $list-item-separator; - border-bottom: none; - } - } - - .md-input-container { - margin-bottom: 0; - } -} - -@mixin list-item--dark( - $color: $list-item__color--dark, - $subheader-color: $list-item__color--subheader--dark, - $background-color: $list-item__background--dark, - $background-color--hover: $list-item__background--hover--dark, - $background-color--active: $list-item__background--pressed--dark, - $separator-border: $list-item-separator--dark, - $hover-header-color: $list-item__color--dark, -) { - .#{$dark-class} & { - color: $color; - background-color: $background-color; - } - - .#{$list-item__class} { - &__header { - .#{$dark-class} & { - color: $color; - } - } - - &__subheader { - .#{$dark-class} & { - color: $subheader-color; - } - } - } - - &:hover:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active), - &:focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active), - &.focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active) { - .#{$dark-class} & { - color: $color; - background-color: $background-color--hover; - } - } - - &:hover:not(.disabled), - &:hover:not(.#{$list-item__class}--read-only), - &:hover:not(:active), - &:hover:not(.active), - &:focus:not(.disabled), - &:focus:not(.#{$list-item__class}--read-only), - &:focus:not(:active), - &:focus:not(.active), - &.focus:not(.disabled), - &.focus:not(.#{$list-item__class}--read-only), - &.focus:not(:active), - &.focus:not(.active) - { - .#{$list-item__class} { - &__header { - .#{$dark-class} & { - color: $hover-header-color; - } - } - } - } - - &:active:not(.#{$list-item__class}--read-only), - &.active:not(.#{$list-item__class}--read-only) { - .#{$dark-class} & { - color: $color; - background-color: $background-color--active; - } - } - - &:focus, - &.focus { - .#{$dark-class} & { - @include focus-styles($focus-visible-only: false); - z-index: 1; - } - } - - &.#{$list-item__class}--separator { - .#{$dark-class} & { - border-right: none; - border-bottom: $separator-border; - } - - .#{$list__class}--horizontal > & { - .#{$dark-class} & { - border-right: $separator-border; - border-bottom: none; - } - } - } -} - -@mixin list-item--contrast( - $color--contrast: $list-item__color--contrast, - $color--dark--contrast: $list-item__color--dark--contrast, - $color--active--contrast: $list-item__color--contrast, - $color--dark--active--contrast: $list-item__color--dark--active--contrast, - $subheader-color--contrast: $list-item__color--subheader--contrast, - $subheader-color--dark--contrast: $list-item__color--subheader--dark--contrast, - $background-color--contrast: $list-item__background--contrast, - $background-color--dark--contrast: $list-item__background--dark--contrast, - $background-color--hover--contrast: $list-item__background--hover--contrast, - $background-color--hover--dark--contrast: - $list-item__background--hover--dark--contrast, - $background-color--active--contrast: $list-item__background--active--contrast, - $background-color--active--dark--contrast: - $list-item__background--active--dark--contrast -) { - .#{$contrast-class} & { - color: $color--contrast; - background-color: $background-color--contrast; - } - - .#{$contrast-class}.#{$dark-class} &, - .#{$contrast-class} .#{$dark-class} & { - color: $color--dark--contrast; - background-color: $background-color--dark--contrast; - } - - .#{$list-item__class} { - &__header { - .#{$contrast-class} & { - color: $subheader-color--contrast; - } - - .#{$contrast-class}.#{$dark-class} &, - .#{$contrast-class} .#{$dark-class} & { - color: $subheader-color--dark--contrast; - } - } - - &__subheader { - .#{$contrast-class} & { - color: $subheader-color--contrast; - } - - .#{$contrast-class}.#{$dark-class} &, - .#{$contrast-class} .#{$dark-class} & { - color: $subheader-color--dark--contrast; - } - } - } - - &:hover:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active), - &:focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active), - &.focus:not(.disabled):not(.#{$list-item__class}--read-only):not(:active):not(.active) { - .#{$contrast-class} & { - color: $color--contrast; - background-color: $background-color--hover--contrast; - } - - .#{$contrast-class}.#{$dark-class} &, - .#{$contrast-class} .#{$dark-class} & { - color: $color--dark--contrast; - background-color: $background-color--hover--dark--contrast; - } - } - - &:active:not(.#{$list-item__class}--read-only), - &.active:not(.#{$list-item__class}--read-only) { - .#{$contrast-class} & { - color: $color--active--contrast; - background-color: $background-color--active--contrast; - } - - .#{$contrast-class}.#{$dark-class} &, - .#{$contrast-class} .#{$dark-class} & { - color: $color--dark--active--contrast; - background-color: $background-color--active--dark--contrast; - } - } -} - -@mixin list-item-color( - $color: $list-item__color, // Color must stay at top for hoisting reasons - $color-css-var: --mds-color-theme-text-primary-normal, - $active-color: $color, - $active-color-css-var: $color-css-var, - $hover-color: $color, - $hover-color-css-var: $color-css-var, - $active-bgrd-color: $list-item__background--pressed, - $active-bgrd-color-css-var: --mdl-background-quaternary, - $active-section-left-color: $active-color, - $active-section-left-color-css-var: $active-color-css-var, - $active-section-right-color: $active-color, - $active-section-right-color-css-var: $active-color-css-var, - $active-header-color: $active-color, - $active-header-color-css-var: $active-color-css-var, - $active-subheader-color: $active-color, - $active-subheader-color-css-var: $active-color-css-var, - $header-color-css-var: $color-css-var, - $hover-section-left-color: $hover-color, - $hover-section-left-color-css-var: $hover-color-css-var, - $hover-section-right-color: $hover-color, - $hover-section-right-color-css-var: $hover-color-css-var, - $hover-header-color: $hover-color, - $hover-header-color-css-var: $header-color-css-var, - $hover-subheader-color: $hover-color, - $hover-subheader-color-css-var: $hover-color-css-var, - $background-color: $list-item__background, - $background-color-css-var: --null, - $disabled-opacity: $list-item__opacity--disabled, - $focus-color: $color, - $focus-color-css-var: $color-css-var, - $header-color: $color, - - $hover-bgrd-color: $list-item__background--hover, - $hover-bgrd-color-css-var: --mdl-background-tertiary, - $includeFocus: true, - $section-left-color: $color, - $section-left-color-css-var: $color-css-var, - $section-right-color: $color, - $section-right-color-css-var: $color-css-var, - $subheader-color: $list-item__color--subheader, - $subheader-color-css-var: --mdl-textColor-secondary, -) { - color: $color; - color: var($color-css-var, $color); - background-color: $background-color; - background-color: var($background-color-css-var, $background-color); - - .#{$list-item__class} { - &__header { - color: $header-color; - color: var($header-color-css-var, $header-color); - } - - &__subheader { - color: $subheader-color; - color: var($subheader-color-css-var, $subheader-color); - } - - &__left { - color: $section-left-color; - color: var($section-left-color-css-var, $section-left-color); - fill: $section-left-color; - fill: var($section-left-color-css-var, $section-left-color); - } - - &__right { - color: $section-right-color; - color: var($section-right-color-css-var, $section-right-color); - fill: $section-right-color; - fill: var($section-right-color-css-var, $section-right-color); - } - } - - &:hover:not(.disabled), - &:hover:not(.#{$list-item__class}--read-only), - &:hover:not(:active), - &:hover:not(.active), - &:focus:not(.disabled), - &:focus:not(.#{$list-item__class}--read-only), - &:focus:not(:active), - &:focus:not(.active), - &.focus:not(.disabled), - &.focus:not(.#{$list-item__class}--read-only), - &.focus:not(:active), - &.focus:not(.active) - { - color: $hover-color; - color: var($hover-color-css-var, $hover-color); - background-color: $hover-bgrd-color; - background-color: var($hover-bgrd-color-css-var, $hover-bgrd-color); - - .#{$list-item__class} { - &__header { - color: $hover-header-color; - color: var($hover-header-color-css-var, $hover-header-color); - } - - &__subheader { - color: $hover-subheader-color; - color: var($hover-subheader-color-css-var, $hover-subheader-color); - } - - &__left { - color: $hover-section-left-color; - color: var($hover-section-left-color-css-var, $hover-section-left-color); - fill: $hover-section-left-color; - fill: var($hover-section-left-color-css-var, $hover-section-left-color); - } - - &__right { - color: $hover-section-right-color; - color: var($hover-section-right-color-css-var, $hover-section-right-color); - fill: $hover-section-right-color; - fill: var($hover-section-right-color-css-var, $hover-section-right-color); - } - } - } - - &:active:not(.#{$list-item__class}--read-only), - &.active:not(.#{$list-item__class}--read-only) { - color: $active-color; - color: var($active-color-css-var, $active-color); - background-color: $active-bgrd-color; - background-color: var($active-bgrd-color-css-var, $active-bgrd-color); - - .md-menu-item__content { - font-weight: 700; - } - - .#{$list-item__class} { - &__header { - color: $active-header-color; - color: var($active-header-color-css-var, $active-header-color); - } - - &__subheader { - color: $active-subheader-color; - color: var($active-subheader-color-css-var, $active-subheader-color); - } - - &__left { - color: $active-section-left-color; - color: var($active-section-left-color-css-var, $active-section-left-color); - fill: $active-section-left-color; - fill: var($active-section-left-color-css-var, $active-section-left-color); - } - - &__right { - color: $active-section-right-color; - color: var($active-section-right-color-css-var, $active-section-right-color); - fill: $active-section-right-color; - fill: var($active-section-right-color-css-var, $active-section-right-color); - } - } - } - - @if $includeFocus { - &:focus, - &.focus { - @include focus-styles($focus-visible-only: false); - z-index:1; - } - } - - &:disabled, - &.disabled { - opacity: $list-item__opacity--disabled; - } -} diff --git a/scss/components/list-item/module.scss b/scss/components/list-item/module.scss deleted file mode 100644 index 30fe8932ae..0000000000 --- a/scss/components/list-item/module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -@import '~@momentum-ui/icons/scss/variables'; - -// Settings -@import '../../colors/settings-base.scss'; -@import '../../colors/settings-transparencies.scss'; -@import '../../settings/core.scss'; -@import '../../settings/focus.scss'; -@import '../../settings/media.scss'; -@import '../../typography/settings.scss'; -@import "../avatar/settings.scss"; -@import '../list-item/settings.scss'; -@import '../../layouts/block-grid/settings.scss'; - -// Tools -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../typography/mixins'; -@import '../../components/avatar/mixins'; - -// Generic -@import '../../generic/normalize'; -@import '../../generic/global'; - -// Typography -@include brand-font-face-regular; - -// Component Helpers -@import '../../components/list-separator/list-separator'; - -// Component Specific -@import 'mixins'; -@import 'list-item'; \ No newline at end of file diff --git a/scss/components/list-item/settings.scss b/scss/components/list-item/settings.scss deleted file mode 100644 index c1e409741a..0000000000 --- a/scss/components/list-item/settings.scss +++ /dev/null @@ -1,86 +0,0 @@ -$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)); diff --git a/scss/components/list-separator/list-separator.scss b/scss/components/list-separator/list-separator.scss deleted file mode 100644 index da6716a8c8..0000000000 --- a/scss/components/list-separator/list-separator.scss +++ /dev/null @@ -1,36 +0,0 @@ -@include exports('md-list-separator') { - .md-list-separator { - width: 100%; - margin: 8px 0; - overflow: hidden; - color: $md-gray-20; - border-color: currentColor; - - &__container { - display: inline-flex; - width: 100%; - justify-content: center; - align-items: center; - - &::before, - &::after { - border-top: 1px solid currentColor; - content: ''; - flex: 1 1 auto; - } - } - - .#{$dark-class} & { - color: $white-12; - - &__text { - color: white; - } - } - - &__text { - padding: 0 8px; - color: $md-gray-70; - } - } -} diff --git a/scss/components/list-separator/module.scss b/scss/components/list-separator/module.scss deleted file mode 100644 index cd3c62fa88..0000000000 --- a/scss/components/list-separator/module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; - -@import 'list-separator'; diff --git a/scss/components/loader/examples/check.html b/scss/components/loader/examples/check.html deleted file mode 100644 index 9db052f24b..0000000000 --- a/scss/components/loader/examples/check.html +++ /dev/null @@ -1,10 +0,0 @@ - diff --git a/scss/components/loader/examples/default.html b/scss/components/loader/examples/default.html deleted file mode 100644 index 488d7c2656..0000000000 --- a/scss/components/loader/examples/default.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/scss/components/loader/examples/determinate.html b/scss/components/loader/examples/determinate.html deleted file mode 100644 index f7d8f08283..0000000000 --- a/scss/components/loader/examples/determinate.html +++ /dev/null @@ -1,10 +0,0 @@ - diff --git a/scss/components/loader/examples/percentage.html b/scss/components/loader/examples/percentage.html deleted file mode 100644 index be848ceb11..0000000000 --- a/scss/components/loader/examples/percentage.html +++ /dev/null @@ -1,10 +0,0 @@ - diff --git a/scss/components/loader/loader.scss b/scss/components/loader/loader.scss deleted file mode 100644 index 8131754344..0000000000 --- a/scss/components/loader/loader.scss +++ /dev/null @@ -1,232 +0,0 @@ -/** @component loader */ - -@include exports('md-spinner') { - %#{$spinner__class}, - .#{$spinner__class} { - position: relative; - display: inline-block; - margin: 2px; - border-radius: 50%; - - @include spinner-style( - $border: $spinner--gray__border-color, - $border-css-var: --mdl-separator-secondary, - $border-progress-left: $spinner-progress--black__border-color, - $border-progress: transparent - ); - @include spinner-size($spinner__width, $spinner__height); - - &:after { - position: absolute; - top: -1px; - left: -1px; - text-indent: -9999em; - border-radius: 50%; - content: ''; - animation: load8 1s infinite linear; - - @-webkit-keyframes load8 { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } - } - - @keyframes load8 { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } - } - } - - &--20 { - @extend .#{$spinner__class}; - - @include spinner-size($spinner--20__width, $spinner--20__height); - } - - &--28 { - @extend .#{$spinner__class}; - - @include spinner-size($spinner--28__width, $spinner--28__height); - } - - &--36 { - @extend .#{$spinner__class}; - - @include spinner-size($spinner--36__width, $spinner--36__height); - } - - &--40 { - @extend .#{$spinner__class}; - - @include spinner-size($spinner--40__width, $spinner--40__height); - } - - &--48 { - @extend .#{$spinner__class}; - - @include spinner-size($spinner--48__width, $spinner--48__height); - } - - &--56 { - @extend .#{$spinner__class}; - - @include spinner-size($spinner--56__width, $spinner--56__height); - } - - &--80 { - @extend .#{$spinner__class}; - - @include spinner-size($spinner--80__width, $spinner--80__height); - } - - &--blue { - @include spinner-style( - $border: $spinner--blue__border-color, - $border-progress-left: $spinner-progress--blue__border-color, - $border-progress: transparent - ); - } - - .#{$dark-class} & { - @include spinner-style( - $border: $spinner--gray__border-color, - $border-progress-left: $spinner-progress--white__border-color, - $border-progress: transparent - ); - } - - &-progress { - @include spinner-progress-color( - $spinner--gray__border-color, - $spinner-progress--black__border-color - ); - - display: inline-block; - margin: 0.125rem; - - @each $size, $icon-size, $font-size in $spinner-sizes { - &--#{$size} { - $circle-size: #{$size}px; - $inset-size: calc(#{$circle-size} - 2px); - $transition-length: 1s; - - width: #{$circle-size}; - height: #{$circle-size}; - border-radius: 50%; - - .md-spinner-progress__circle { - .md-spinner-progress__mask, - .md-spinner-progress__fill { - position: absolute; - width: #{$circle-size}; - height: #{$circle-size}; - border-radius: 50%; - border-radius: 50%; - transition: -webkit-transform $transition-length; - transition: -ms-transform $transition-length; - transition: transform $transition-length; - -webkit-backface-visibility: hidden; - } - - .md-spinner-progress__mask { - clip: rect( - 0px, - #{$circle-size}, - #{$circle-size}, - calc(#{$circle-size} / 2) - ); - - .md-spinner-progress__fill { - clip: rect( - 0px, - calc(#{$circle-size} / 2), - #{$circle-size}, - 0px - ); - } - } - } - - .md-spinner-progress__inset-circle { - position: absolute; - width: $inset-size; - height: $inset-size; - margin-top: calc((#{$circle-size} - #{$inset-size}) / 2); - margin-left: calc((#{$circle-size} - #{$inset-size}) / 2); - border-radius: 50%; - - .md-spinner-progress__percentage { - padding-top: 6px; - font-size: 14px; - line-height: 22px; - text-align: center; - } - - &--check { - @include flex; - - font-family: $icon-font-name; - font-weight: 450; - - &:before { - font-size: $font-size; - content: $icon-size; - } - } - } - - $i: 0; - $increment: 180deg * 0.01; - - @for $i from 0 through 100 { - &.md-spinner-progress__percentage-#{$i} { - .md-spinner-progress__circle { - .md-spinner-progress__mask.md-spinner-progress__full, - .md-spinner-progress__fill { - -webkit-transform: rotate($increment * $i); - -ms-transform: rotate($increment * $i); - transform: rotate($increment * $i); - } - - .md-spinner-progress__fill.md-spinner-progress__fix { - -webkit-transform: rotate($increment * $i * 2); - -ms-transform: rotate($increment * $i * 2); - transform: rotate($increment * $i * 2); - } - } - } - } - } - } - - &--blue { - @include spinner-progress-color( - $spinner--blue__border-color, - $spinner-progress--blue__border-color - ); - } - - .#{$dark-class} & { - @include spinner-progress-color( - $spinner--gray__border-color, - $spinner-progress--white__border-color - ); - } - } - } -} - -// TODO: Remove depreciated Symphony, Foundation and Bootstrap selectors after converting in Atlas -.icon-spinner { - @extend %#{$spinner__class}; - @extend %#{$spinner__class}--blue; -} diff --git a/scss/components/loader/mixins.scss b/scss/components/loader/mixins.scss deleted file mode 100644 index a200f8cf8f..0000000000 --- a/scss/components/loader/mixins.scss +++ /dev/null @@ -1,53 +0,0 @@ -@mixin spinner-size($width: 1em, $height: 1em) { - width: $width; - height: $height; - - &:after { - width: calc(#{$width}); - height: calc(#{$height}); - } -} - -@mixin spinner-style( - $border: $md-gray-40, - $border-css-var: --null, - $border-progress-left: $md-theme-50, - $border-progress-left-css-var: --null, - $border-progress: transparent, - $border-progress-css-var: --null -) { - border: 1px solid; - border-color: $border; - border-color: var($border-css-var, $border); - - &:after { - border-top: 1px solid $border-progress; - border-top: 1px solid var($border-progress-css-var, $border-progress); - border-right: 1px solid $border-progress; - border-right: 1px solid var($border-progress-css-var, $border-progress); - border-bottom: 1px solid $border-progress; - border-bottom: 1px solid var($border-progress-css-var, $border-progress); - border-left: 1px solid $border-progress-left; - border-left: 1px solid var($border-progress-left-css-var, $border-progress-left); - } -} - -@mixin spinner-progress-color($border: $md-gray-40, $progress: $md-black-100) { - background-color: transparent; - box-shadow: inset 0px 0px 0px 1px $border; - - .md-spinner-progress__circle - .md-spinner-progress__mask - .md-spinner-progress__fill { - background-color: transparent; - box-shadow: inset 0px 0px 0px 1px $progress; - } - - .md-spinner-progress__inset-circle { - background-color: transparent; - - .md-spinner-progress__percentage { - color: $progress; - } - } -} diff --git a/scss/components/loader/module.scss b/scss/components/loader/module.scss deleted file mode 100644 index 1582337578..0000000000 --- a/scss/components/loader/module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../tools/functions/core'; - -@import '~@momentum-ui/icons/scss/variables'; -@import "../../colors/settings-base.scss"; - -@import '../../settings/core'; - -@import '../../tools/mixins/flex'; - -@import 'settings'; -@import 'mixins'; -@import 'placeholders'; -@import 'loader'; diff --git a/scss/components/loader/placeholders.scss b/scss/components/loader/placeholders.scss deleted file mode 100644 index 14dbc5f54b..0000000000 --- a/scss/components/loader/placeholders.scss +++ /dev/null @@ -1,215 +0,0 @@ -%#{$spinner__class} { - position: relative; - display: inline-block; - margin: 2px; - border-radius: 50%; - - @include spinner-style( - $border: $spinner--gray__border-color, - $border-progress-left: $spinner-progress--black__border-color, - $border-progress: transparent - ); - @include spinner-size($spinner__width, $spinner__height); - - &:after { - position: absolute; - top: -1px; - left: -1px; - text-indent: -9999em; - border-radius: 50%; - content: ''; - animation: load8 1s infinite linear; - - @-webkit-keyframes load8 { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } - } - - @keyframes load8 { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } - } - } - - &--20 { - @extend %#{$spinner__class}; - - @include spinner-size($spinner--20__width, $spinner--20__height); - } - - &--28 { - @extend %#{$spinner__class}; - - @include spinner-size($spinner--28__width, $spinner--28__height); - } - - &--36 { - @extend %#{$spinner__class}; - - @include spinner-size($spinner--36__width, $spinner--36__height); - } - - &--40 { - @extend %#{$spinner__class}; - - @include spinner-size($spinner--40__width, $spinner--40__height); - } - - &--48 { - @extend %#{$spinner__class}; - - @include spinner-size($spinner--48__width, $spinner--48__height); - } - - &--56 { - @extend %#{$spinner__class}; - - @include spinner-size($spinner--56__width, $spinner--56__height); - } - - &--80 { - @extend %#{$spinner__class}; - - @include spinner-size($spinner--80__width, $spinner--80__height); - } - - &--blue { - @include spinner-style( - $border: $spinner--blue__border-color, - $border-progress-left: $spinner-progress--blue__border-color, - $border-progress: transparent - ); - } - - .#{$dark-class} & { - @include spinner-style( - $border: $spinner--gray__border-color, - $border-progress-left: $spinner-progress--white__border-color, - $border-progress: transparent - ); - } - - &-progress { - @include spinner-progress-color( - $spinner--gray__border-color, - $spinner-progress--black__border-color - ); - - display: inline-block; - margin: 0.125rem; - - @each $size, $icon-size, $font-size in $spinner-sizes { - &--#{$size} { - $circle-size: #{$size}px; - $inset-size: calc(#{$circle-size} - 2px); - $transition-length: 1s; - - width: #{$circle-size}; - height: #{$circle-size}; - border-radius: 50%; - - .md-spinner-progress__circle { - .md-spinner-progress__mask, - .md-spinner-progress__fill { - position: absolute; - width: #{$circle-size}; - height: #{$circle-size}; - border-radius: 50%; - border-radius: 50%; - transition: -webkit-transform $transition-length; - transition: -ms-transform $transition-length; - transition: transform $transition-length; - -webkit-backface-visibility: hidden; - } - - .md-spinner-progress__mask { - clip: rect( - 0px, - #{$circle-size}, - #{$circle-size}, - calc(#{$circle-size} / 2) - ); - - .md-spinner-progress__fill { - clip: rect(0px, calc(#{$circle-size} / 2), #{$circle-size}, 0px); - } - } - } - - .md-spinner-progress__inset-circle { - position: absolute; - width: $inset-size; - height: $inset-size; - margin-top: calc((#{$circle-size} - #{$inset-size}) / 2); - margin-left: calc((#{$circle-size} - #{$inset-size}) / 2); - border-radius: 50%; - - .md-spinner-progress__percentage { - padding-top: 6px; - font-size: 14px; - line-height: 22px; - text-align: center; - } - - &--check { - @include flex; - - font-family: $icon-font-name; - font-weight: 450; - - &:before { - font-size: $font-size; - content: $icon-size; - } - } - } - - $i: 0; - $increment: 180deg * 0.01; - - @for $i from 0 through 100 { - &.md-spinner-progress__percentage-#{$i} { - .md-spinner-progress__circle { - .md-spinner-progress__mask.md-spinner-progress__full, - .md-spinner-progress__fill { - -webkit-transform: rotate($increment * $i); - -ms-transform: rotate($increment * $i); - transform: rotate($increment * $i); - } - - .md-spinner-progress__fill.md-spinner-progress__fix { - -webkit-transform: rotate($increment * $i * 2); - -ms-transform: rotate($increment * $i * 2); - transform: rotate($increment * $i * 2); - } - } - } - } - } - } - - &--blue { - @include spinner-progress-color( - $spinner--blue__border-color, - $spinner-progress--blue__border-color - ); - } - - .#{$dark-class} & { - @include spinner-progress-color( - $spinner--gray__border-color, - $spinner-progress--white__border-color - ); - } - } -} diff --git a/scss/components/loader/settings.scss b/scss/components/loader/settings.scss deleted file mode 100644 index 7bcdef66aa..0000000000 --- a/scss/components/loader/settings.scss +++ /dev/null @@ -1,36 +0,0 @@ -$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); diff --git a/scss/components/loading/loading.scss b/scss/components/loading/loading.scss deleted file mode 100644 index bf255e43a8..0000000000 --- a/scss/components/loading/loading.scss +++ /dev/null @@ -1,58 +0,0 @@ -@include exports('md-loading') { - .md-loading { - @include flex(); - - button &, - .md-button { - display: flex; - align-items: center; - justify-content: center; - } - - .md-loading__icon { - font-size: 50%; - - &:before { - @include icon-unread-badge_16; - - font-family: $icon-font-name; - vertical-align: middle; - animation-duration: 1.4s; - animation-iteration-count: infinite; - animation-name: loading; - animation-fill-mode: both; - } - - &:nth-of-type(2):before { - animation-delay: 0.2s; - } - - &:nth-of-type(3):before { - animation-delay: 0.4s; - } - - &:not(:last-child) { - margin-right: 0.5em; - } - } - - &.md-loading--small { - .icon { - font-size: 25%; - } - } - } - - @keyframes loading { - 0%, - 100% { - opacity: 0.1; - transform: scale(0, 0); - } - - 20% { - opacity: 1; - transform: scale(1, 1); - } - } -} diff --git a/scss/components/loading/module.scss b/scss/components/loading/module.scss deleted file mode 100644 index 7595c1bead..0000000000 --- a/scss/components/loading/module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import '../../tools/functions/core'; - -@import '~@momentum-ui/icons/scss/mixins'; -@import '../../colors/settings.scss'; -@import '../../settings/core'; -@import '../../tools/mixins/flex'; - -@import 'loading'; diff --git a/scss/components/meeting-list/examples/default.html b/scss/components/meeting-list/examples/default.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/meeting-list/list-item-meeting.scss b/scss/components/meeting-list/list-item-meeting.scss deleted file mode 100644 index c4c257e223..0000000000 --- a/scss/components/meeting-list/list-item-meeting.scss +++ /dev/null @@ -1,99 +0,0 @@ -/** @component meeting-list */ - -@include exports('md-list-item-meeting') { - .#{$list-item__class} { - &-meeting { - @include border-radius($list-item-meeting__border-radius); - @include list-item-color( - $background-color: $list-item-meeting__background, - $background-color-css-var: --mdl-background-tertiary, - $hover-bgrd-color: $list-item-meeting__background--hover, - $hover-bgrd-color-css-var: --mdl-background-quaternary, - $active-bgrd-color: $list-item-meeting__background--pressed, - $active-bgrd-color-css-var: --mdl-background-quaternary, - ); - - padding: $list-item-meeting__padding; - margin: $list-item-meeting__margin; - box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08), - inset 0 1px 0 0 rgba(0, 0, 0, 0.04); - - > [class$='__left'] { - margin-right: 32px; - font-size: rem-calc(14); - line-height: rem-calc(22); - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - - @include flex($fd: column, $ai: flex-start); - - > [class$='__progress-line'] { - position: absolute; - left: rem-calc(6); - width: rem-calc(6); - height: calc(100% - 12px); - background-color: $md-green-40; - box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08), - inset 0 1px 0 0 rgba(0, 0, 0, 0.04); - - @include border-radius($list-item-meeting__border-radius); - } - } - - > [class$='__center'] { - @include flex; - - [class$='__header'] { - flex-basis: 100%; - - > [class*='icon'] { - margin-left: rem-calc(12); - fill: $black-40; - } - } - - > [class$='__space-link'] { - flex: 0 0 auto; - width: 160px; - } - } - - [class$='overlay__children'] { - width: 340px; - padding: rem-calc(16); - } - - &--chip { - > [class$='__left'] { - > [class$='__progress-line'] { - background-color: $md-orange-50; - } - } - } - - &--completed { - > [class$='__left'] { - color: $md-gray-50; - } - - > [class$='__center'] { - [class$='__header'] { - color: $md-gray-50; - - > [class*='icon'] { - fill: $black-20; - } - } - - > [class$='__space-link'] { - opacity: 0.4; - } - } - - > [class$='__right'] { - opacity: 0.6; - } - } - } - } -} diff --git a/scss/components/meeting-list/module.scss b/scss/components/meeting-list/module.scss deleted file mode 100644 index a987168d4a..0000000000 --- a/scss/components/meeting-list/module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../button/settings'; -@import '../icon/settings'; -@import '../list-item/settings'; -@import 'settings'; - -@import '../../tools/mixins/core'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/border-radius'; -@import '../list-item/mixins'; - -@import 'list-item-meeting'; diff --git a/scss/components/meeting-list/settings.scss b/scss/components/meeting-list/settings.scss deleted file mode 100644 index a30d15f94e..0000000000 --- a/scss/components/meeting-list/settings.scss +++ /dev/null @@ -1,7 +0,0 @@ -$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; diff --git a/scss/components/menu/examples/custom-menu-items.html b/scss/components/menu/examples/custom-menu-items.html deleted file mode 100644 index 1100666a5b..0000000000 --- a/scss/components/menu/examples/custom-menu-items.html +++ /dev/null @@ -1,72 +0,0 @@ -
-
-
-
Content
- -
-
diff --git a/scss/components/menu/examples/default.html b/scss/components/menu/examples/default.html deleted file mode 100644 index 344bc08e7f..0000000000 --- a/scss/components/menu/examples/default.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
-
-
- -
Content Area
- -
- -
-
diff --git a/scss/components/menu/examples/sub-menu.html b/scss/components/menu/examples/sub-menu.html deleted file mode 100644 index cbfa468a6d..0000000000 --- a/scss/components/menu/examples/sub-menu.html +++ /dev/null @@ -1,47 +0,0 @@ -
-
-
-
-
Content Area
 -
- -
-
diff --git a/scss/components/menu/menu.scss b/scss/components/menu/menu.scss deleted file mode 100644 index 77c696ac40..0000000000 --- a/scss/components/menu/menu.scss +++ /dev/null @@ -1,78 +0,0 @@ -/** @component menu */ - -@include exports('md-menu-overlay') { - .#{$menu-overlay__class}-wrapper { - display: inline-flex; - } - - .#{$menu-overlay__class} { - > .#{$prefix}-event-overlay__children { - display: flex; - flex-direction: column; - - > .#{$menu__class} { - .#{$list-item__class} { - min-height: $menu-item__height; - padding: 0 $menu-item__padding; - border-radius: 0; - } - - .#{$menu-item__class} { - &__content { - overflow: hidden; - text-overflow: ellipsis; - flex-grow: 1; - } - - &__selected-value { - max-width: $menu-item-selected-value__max-width; - max-height: 100%; - padding: $menu-item-selected-value__padding; - overflow: hidden; - font-size: $menu-item-selected-value__font-size; - line-height: $menu-item-selected-value__line-height; - text-align: right; - white-space: pre-line; - opacity: $menu-item-selected-value__opacity; - } - - &__arrow { - display: flex; - padding-left: $menu-item-arrow__padding-left; - flex-shrink: 0; - } - - &__header { - height: $menu-item-header__height; - font-size: $menu-item-header__font-size; - cursor: default; - opacity: $menu-item-header__opacity; - - &:active, - &.active { - background-color: transparent; - } - } - } - } - - .#{$menu-item__class}-container { - &:first-child { - .#{$menu-item__class}:first-child { - > .#{$list-item__class} { - @include border-top-radius($event-overlay__border-radius); - } - } - } - - &:last-child { - .#{$menu-item__class}:last-child { - > .#{$list-item__class} { - @include border-bottom-radius($event-overlay__border-radius); - } - } - } - } - } - } -} diff --git a/scss/components/menu/module.scss b/scss/components/menu/module.scss deleted file mode 100644 index 2ac5d29dd0..0000000000 --- a/scss/components/menu/module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings.scss'; -@import '../../settings/core'; -@import '../list-item/settings'; -@import '../overlay/settings'; -@import 'settings'; - -@import '../../tools/mixins/border-radius'; - -@import 'menu'; diff --git a/scss/components/menu/settings.scss b/scss/components/menu/settings.scss deleted file mode 100644 index 3950c7c40f..0000000000 --- a/scss/components/menu/settings.scss +++ /dev/null @@ -1,15 +0,0 @@ -$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); diff --git a/scss/components/modal/examples/default.html b/scss/components/modal/examples/default.html deleted file mode 100644 index 6761bfedf8..0000000000 --- a/scss/components/modal/examples/default.html +++ /dev/null @@ -1,38 +0,0 @@ -
- -
diff --git a/scss/components/modal/examples/full.html b/scss/components/modal/examples/full.html deleted file mode 100644 index 97995ac78a..0000000000 --- a/scss/components/modal/examples/full.html +++ /dev/null @@ -1,36 +0,0 @@ -
- -
diff --git a/scss/components/modal/examples/large.html b/scss/components/modal/examples/large.html deleted file mode 100644 index 604d09ef6a..0000000000 --- a/scss/components/modal/examples/large.html +++ /dev/null @@ -1,36 +0,0 @@ -
- -
diff --git a/scss/components/modal/examples/small.html b/scss/components/modal/examples/small.html deleted file mode 100644 index 9a6642c65e..0000000000 --- a/scss/components/modal/examples/small.html +++ /dev/null @@ -1,36 +0,0 @@ -
- -
diff --git a/scss/components/modal/mixins.scss b/scss/components/modal/mixins.scss deleted file mode 100644 index 2491ad7cd4..0000000000 --- a/scss/components/modal/mixins.scss +++ /dev/null @@ -1,142 +0,0 @@ -@mixin modal-base( - $height: $modal__height--full-screen, - $width: $modal__width--full-screen -) { - position: fixed; - right: 0; - left: 0; - z-index: $zindex-modal; - display: block; - width: $width; - height: $height; - margin: 0 auto; - visibility: visible; - - @media #{$small-only} { - min-height: $modal__height--full-screen; - } -} - -@mixin modal-size( - $border-width: 1px, - $height: auto, - $max-height: none, - $min-height: 0, - $padding: false, - $radius: false, - $top-offset: false, - $width: $modal__width--full-screen -) { - width: $width; - - @if $top-offset { - top: $top-offset; - max-height: calc(100vh - (#{$top-offset} * 2)); - } @else { - top: auto; - max-height: $max-height; - } - - .#{$modal__class}__content { - @if $min-height !=0 { - min-height: $min-height; - } @else { - height: $height; - min-height: $min-height; - } - - @if $radius==true { - @include radius($modal__radius); - } @else if $radius { - @include radius($radius); - } - - @if $top-offset { - max-height: calc(100vh - (#{$top-offset} * 2)); - } @else { - max-height: $max-height; - } - - @if $padding !=false { - padding: $padding; - } - - @if $border-width !=false { - border-style: solid; - border-width: $border-width; - } @else { - border: none; - } - } -} - -@mixin modal-header-size( - $padding: $modal-header__padding, - $line-height: $modal-header__line-height, - $font-size: $modal-header__font-size, - $font-family: $brand-font-bold -) { - @include flex($fd: column); - - width: 100%; - padding: $padding; - font-family: $font-family; - font-size: $font-size; - line-height: $line-height; - - @content; -} - -@mixin modal-close-button( - $size: auto, - $top-offset: auto, - $right-offset: auto, - $padding: 0, - $font-size: inherit -) { - top: $top-offset; - right: $right-offset; - width: $size; - height: $size; - padding: $padding; - - &:before { - font-size: $font-size; - } -} - -@mixin modal-color( - $color: $md-white-100, - $color-css-var: --mdl-textColor-primary, - $bg: false, - $bg-css-var: --mdl-background-primary, - $border-color: $md-white-100, - $border-color-css-var: --mdl-separator-primary, - $box-shadow: false - ) { - - color: $color; - color: var($color-css-var, $color); - - @if $bg { - background-color: $bg; - background-color: var($bg-css-var, $bg); - } - - @if $border-color-css-var !=false { - border-color: $border-color; - border-color: var($border-color-css-var, $border-color); - } - - @if $box-shadow { - box-shadow: $box-shadow; - } -} - -@mixin modal-flex-container() { - display: flex; - width: 100%; - max-height: inherit; - flex-direction: column; - flex: 1 1 0%; -} diff --git a/scss/components/modal/modal.scss b/scss/components/modal/modal.scss deleted file mode 100644 index 3ca5ebc3b6..0000000000 --- a/scss/components/modal/modal.scss +++ /dev/null @@ -1,408 +0,0 @@ -/** @component modal */ - -@include exports('md-modal') { - .#{$modal__class} { - @include modal-base; - @include modal-size($radius: false); - - &:focus { - box-shadow: none; - } - - .#{$modal__class} { - &__header { - flex-shrink: 0; - - @include modal-header-size; - - .#{$modal__class}__title { - width: 100%; - padding: rem-calc(16) 0; - overflow: hidden; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - } - - .#{$modal__class}__message { - @include modal-header-size( - $padding: rem-calc(12) 0 0 0, - $font-family: $brand-font-regular, - $font-size: rem-calc(14), - $line-height: rem-calc(24) - ) { - color: $modal-message__color; - color: var(--mds-color-theme-text-secondary-normal, $modal-message__color); - text-align: left; - flex-flow: row wrap; - } - justify-content: left; - } - - .#{$modal__class}__close-container { - width: 100%; - @include flex; - justify-content: end; - } - - .#{$modal__class}__close { - position: absolute; - - @include flex; - - border: none; - } - } - - &__content { - display: flex; - flex-direction: column; - background-color: $modal__background; - background-color: var(--mds-color-theme-background-solid-primary-normal, $modal__background); - - @include modal-color( - $color: $modal__color, - $color-css-var: --mds-color-theme-text-primary-normal, - $bg: $modal__background, - $bg-css-var: --mds-color-theme-background-solid-primary-normal, - $border-color-css-var: --mds-color-theme-outline-secondary-normal - ); - } - - &__flex-container { - @include modal-flex-container; - } - - &__body { - display: flex; - margin: 0; - overflow-x: hidden; - overflow-y: auto; - flex-direction: column; - flex: 1 1 auto; - align-self: stretch; - align-items: stretch; // IE fix - &--padding { - padding: $modal__padding--body; - } - } - - &__footer { - width: 100%; - padding: $modal__padding; - flex-shrink: 0; - - @include flex($jc: flex-end); - - .#{$button__class}:not(:first-of-type) { - margin-left: rem-calc(12); - } - } - } - - &.#{$modal__class}--full { - @include modal-size( - $border-width: 0, - $width: $modal__width--full-screen, - $height: $modal__height--full-screen, - $radius: 0 - ); - - .#{$modal__class}__header { - @include modal-header-size( - $padding: $modal-header__padding--full-screen, - $font-size: $modal-header__font-size--full-screen, - $line-height: $modal-header__line-height--full-screen, - $font-family: $brand-font-regular - ); - - .#{$modal__class}__message { - padding-top: rem-calc(20); - font-size: rem-calc(20); - line-height: rem-calc(32); - } - - .#{$modal__class}__close { - @include modal-close-button( - $size: rem-calc(20), - $font-size: rem-calc(20), - $top-offset: rem-calc(24), - $right-offset: rem-calc(24) - ); - } - - .#{$modal__class}__close-container { - height: rem-calc(20); - } - } - - .#{$modal__class}__footer { - padding-top: $modal__padding--full-screen; - padding-bottom: $modal__padding--full-screen; - } - } - - &.#{$modal__class}--large { - @include modal-size( - $top-offset: $modal__top--large, - $width: $modal__width--large, - $min-height: $modal__height--large, - $radius: false - ); - - .#{$modal__class}__header { - @include modal-header-size( - $padding: $modal-header__padding--large, - $font-size: $modal-header__font-size--large, - $line-height: $modal-header__line-height--large, - $font-family: $brand-font-regular - ); - - .#{$modal__class}__message { - font-size: rem-calc(16); - line-height: rem-calc(24); - text-align: left; - } - - .#{$modal__class}__close { - @include modal-close-button( - $size: rem-calc(16), - $font-size: rem-calc(16), - $top-offset: rem-calc(16), - $right-offset: rem-calc(16) - ); - } - - .#{$modal__class}__close-container { - height: rem-calc(16); - } - } - - @media #{$medium-only} { - @include modal-size( - $top-offset: $modal__top--tablet-medium, - $width: $modal__width--medium, - $min-height: $modal__height--medium - ); - - .#{$modal__class}__header { - @include modal-header-size; - - .#{$modal__class}__message { - font-size: rem-calc(14); - line-height: rem-calc(24); - text-align: left; - } - - .#{$modal__class}__close { - @include modal-close-button( - $size: rem-calc(14), - $font-size: rem-calc(14), - $top-offset: rem-calc(12), - $right-offset: rem-calc(12) - ); - } - - .#{$modal__class}__close-container { - height: rem-calc(14); - } - } - } - - @media #{$v-medium-down} { - .#{$modal__class}__content { - min-height: auto; - } - } - } - - &.#{$modal__class}--medium, - &.#{$modal__class}--default { - @include modal-size( - $top-offset: $modal__top--medium, - $width: $modal__width--medium, - $min-height: $modal__height--medium - ); - - .#{$modal__class}__close { - @include modal-close-button( - $size: rem-calc(14), - $font-size: rem-calc(14), - $top-offset: rem-calc(12), - $right-offset: rem-calc(12) - ); - } - - .#{$modal__class}__close-container { - height: rem-calc(14); - } - - @media #{$medium-only} { - @include modal-size( - $top-offset: $modal__top--tablet-medium, - $width: $modal__width--medium, - $min-height: $modal__height--medium - ); - } - - @media #{$v-medium-down} { - .#{$modal__class}__content { - min-height: auto; - } - } - } - - &.#{$modal__class}--small { - @include modal-size( - $top-offset: $modal__top--small, - $width: $modal__width--small, - $min-height: $modal__height--small - ); - - .#{$modal__class}__close { - @include modal-close-button( - $size: rem-calc(14), - $font-size: rem-calc(14), - $top-offset: rem-calc(12), - $right-offset: rem-calc(12) - ); - } - - .#{$modal__class}__close-container { - height: rem-calc(14); - } - - // Media Query for Tablet - @media #{$medium-only} { - @include modal-size( - $top-offset: $modal__top--tablet-small, - $width: $modal__width--small, - $min-height: $modal__height--small - ); - } - } - - &.#{$modal__class}--dialog { - @include modal-size( - $width: 442px, - $radius: false, - $top-offset: $modal-dialog__top, - $padding: $modal-dialog__padding - ); - - .#{$modal__class}__close-container, - .#{$modal__class}__close { - display: none; - } - - .#{$modal__class}__content { - flex-direction: row; - border: $modal-dialog__border; - box-shadow: $modal-dialog__box-shadow; - - .#{$modal__class}__header { - padding: $modal-header__padding--dialog; - align-items: flex-start; - } - - .#{$modal__class}__title { - font-family: $brand-font-bold; - font-size: 16px; - line-height: 24px; - } - - .#{$modal__class}__body { - margin-bottom: rem-calc(24); - text-align: left; - - > * { - font-family: $brand-font-regular; - font-size: 14px; - line-height: 22px; - color: $md-gray-70; - color: var(--mds-color-theme-text-secondary-normal, $md-gray-70); - } - } - - .#{$modal__class}__footer { - display: flex; - justify-content: flex-end; - padding: 0; - } - } - } - - &.#{$modal__class}--small, - &.#{$modal__class}--medium, - &.#{$modal__class}--large, - &.#{$modal__class}--full, - &.#{$modal__class}--default, - &.#{$modal__class}--dialog { - //Media Query for Mobile - @media #{$small-only}, - #{$v-small-only} { - @include modal-size($radius: 0, $height: 100vh); - - .#{$modal__class}__flex-container { - min-height: 100vh; - } - - .#{$modal__class}__header { - @include modal-header-size( - $font-size: $modal-header__font-size--mobile - ); - - .#{$modal__class}__message { - padding-top: rem-calc(12); - font-size: rem-calc(14); - line-height: rem-calc(24); - } - - .#{$modal__class}__close { - @include modal-close-button( - $size: rem-calc(14), - $font-size: rem-calc(14), - $top-offset: rem-calc(12), - $right-offset: rem-calc(12) - ); - } - } - - .#{$modal__class}__footer { - padding: $modal__padding; - text-align: center; - - @include flex; - - .#{$button__class} { - flex: 1 1 50%; - - &:not(:first-of-type) { - margin-left: rem-calc(16); - } - } - } - } - - &.#{$modal__class}--dialog { - @media #{$small-only}, - #{$v-small-only} { - .#{$modal__class}__flex-container { - min-height: calc(100vh - (#{$modal-dialog__padding} * 2)); - } - } - } - } - } - - .#{$modal__class}__backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $zindex-modal-background; - display: block; - background: $modal-overlay__background; - } -} diff --git a/scss/components/modal/module.scss b/scss/components/modal/module.scss deleted file mode 100644 index 5148136668..0000000000 --- a/scss/components/modal/module.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Icons -@import '~@momentum-ui/icons/scss/variables'; -@import '~@momentum-ui/icons/scss/mixins'; - -// Settings -@import '../../colors/settings-base.scss'; -@import '../../colors/settings-transparencies.scss'; -@import '../../settings/core.scss'; -@import '../../settings/focus.scss'; -@import '../../settings/media.scss'; -@import '../../settings/z-index.scss'; -@import '../../typography/settings.scss'; -@import '../button/settings.scss'; -@import "../close/settings.scss"; -@import '../loader/settings.scss'; -@import '../../layouts/block-grid/settings.scss'; - -// Tools -@import '../../tools/mixins/easing'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../typography/mixins'; - - -// Generic -@import '../../generic/normalize'; -@import '../../generic/global'; - -// Typography -@include brand-font-face-regular; -@include brand-font-face-bold; - -// Utilities -.fade { - opacity: 0; - transition: opacity 0.15s linear; - - &.in { - opacity: 1; - } -} - -// Component Specific -@import 'settings'; -@import 'mixins'; -@import 'modal'; diff --git a/scss/components/modal/settings.scss b/scss/components/modal/settings.scss deleted file mode 100644 index 8d3052c615..0000000000 --- a/scss/components/modal/settings.scss +++ /dev/null @@ -1,58 +0,0 @@ -$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); diff --git a/scss/components/overlay/event-overlay.scss b/scss/components/overlay/event-overlay.scss deleted file mode 100644 index ad28b581f7..0000000000 --- a/scss/components/overlay/event-overlay.scss +++ /dev/null @@ -1,151 +0,0 @@ -/** @component event-overlay */ - -@include exports('md-event-overlay') { - .#{$prefix}-event-overlay { - position: fixed; - z-index: $zindex-top-bar-fixed - 5; - - &__children { - position: fixed; - z-index: $zindex-top-bar-fixed - 4; - display: flex; - background: $md-white-100; - background: var(--mds-color-theme-background-solid-primary-normal, $md-white-100); - border-radius: $event-overlay__border-radius; - border: 1px solid $event-overlay__border-color; - border: 1px solid var(--mds-color-theme-outline-secondary-normal, $event-overlay__border-color); - box-shadow: $event-overlay__shadow; - - .#{$list-item__class}:first-of-type { - @include border-top-radius($event-overlay__border-radius); - } - - .#{$list-item__class}:last-of-type { - @include border-bottom-radius($event-overlay__border-radius); - } - - .#{$dark-class} & { - .#{$checkbox__class} { - @include checkbox-color; - } - - .#{$radio__class} { - @include radio-color; - } - - .#{$input__class} { - @include input-color; - } - - .#{$toggle-switch__class} { - @include toggle-switch-color; - } - } - } - - &__arrow { - $arrow-width: $event-overlay-arrow__width * 0.5; - $arrow-layer-spacing: 2px; - $arrow-top-layer-width: $arrow-width - $arrow-layer-spacing; - $arrow-top-layer-height: $event-overlay-arrow__height - $arrow-layer-spacing; - - position: fixed; - z-index: $zindex-top-bar-fixed - 3; - - &::after { - content: ''; - position: absolute; - } - - .#{$prefix}-event-overlay--top > & { - border-left: $arrow-width solid transparent; - border-right: $arrow-width solid transparent; - border-top: $event-overlay-arrow__height solid $event-overlay__border-color; - border-top: $event-overlay-arrow__height solid var(--mds-color-theme-outline-secondary-normal, $event-overlay__border-color); - margin-left: -$arrow-width; - margin-top: -$event-overlay-arrow__height - 1; - - &::after { - border-left: $arrow-top-layer-width solid transparent; - border-right: $arrow-top-layer-width solid transparent; - border-top: $arrow-top-layer-height solid $md-white-100; - border-top: $arrow-top-layer-height solid var(--mds-color-theme-background-solid-primary-normal, $md-white-100); - bottom: $arrow-layer-spacing; - left: -$arrow-top-layer-width; - } - } - - .#{$prefix}-event-overlay--left > & { - border-bottom: $arrow-width solid transparent; - border-left: $event-overlay-arrow__height solid $event-overlay__border-color; - border-left: $event-overlay-arrow__height solid var(--mds-color-theme-outline-secondary-normal, $event-overlay__border-color); - border-top: $arrow-width solid transparent; - margin-left: -$event-overlay-arrow__height - 1; - margin-top: -$arrow-width; - - &::after { - border-bottom: $arrow-top-layer-width solid transparent; - border-left: $arrow-top-layer-height solid $md-white-100; - border-left: $arrow-top-layer-height solid var(--mds-color-theme-background-solid-primary-normal, $md-white-100); - border-top: $arrow-top-layer-width solid transparent; - right: $arrow-layer-spacing; - top: -$arrow-top-layer-width; - } - } - - .#{$prefix}-event-overlay--right > & { - border-bottom: $arrow-width solid transparent; - border-right: $event-overlay-arrow__height solid $event-overlay__border-color; - border-right: $event-overlay-arrow__height solid var(--mds-color-theme-outline-secondary-normal, $event-overlay__border-color); - border-top: $arrow-width solid transparent; - margin-left: 1px; - margin-top: -$arrow-width; - - &::after { - border-bottom: $arrow-top-layer-width solid transparent; - border-right: $arrow-top-layer-height solid $md-white-100; - border-right: $arrow-top-layer-height solid var(--mds-color-theme-background-solid-primary-normal, $md-white-100); - border-top: $arrow-top-layer-width solid transparent; - left: $arrow-layer-spacing; - top: -$arrow-top-layer-width; - } - } - - .#{$prefix}-event-overlay--bottom > & { - border-bottom: $event-overlay-arrow__height solid $event-overlay__border-color; - border-bottom: $event-overlay-arrow__height solid var(--mds-color-theme-outline-secondary-normal, $event-overlay__border-color); - border-left: $arrow-width solid transparent; - border-right: $arrow-width solid transparent; - margin-left: -$arrow-width; - margin-top: 1px; - - &::after { - border-bottom: $arrow-top-layer-height solid $md-white-100; - border-bottom: $arrow-top-layer-height solid var(--mds-color-theme-background-solid-primary-normal, $md-white-100); - border-left: $arrow-top-layer-width solid transparent; - border-right: $arrow-top-layer-width solid transparent; - left: -$arrow-top-layer-width; - top: $arrow-layer-spacing; - } - } - } - - &--arrow { - &.#{$prefix}-event-overlay--top > .#{$prefix}-event-overlay__children { - margin-top: -$event-overlay-arrow__height; - } - - &.#{$prefix}-event-overlay--bottom > .#{$prefix}-event-overlay__children { - margin-top: $event-overlay-arrow__height; - } - - &.#{$prefix}-event-overlay--right > .#{$prefix}-event-overlay__children { - margin-left: $event-overlay-arrow__height; - } - - &.#{$prefix}-event-overlay--left > .#{$prefix}-event-overlay__children { - margin-left: -$event-overlay-arrow__height; - } - } - } -} diff --git a/scss/components/overlay/module.scss b/scss/components/overlay/module.scss deleted file mode 100644 index 55e35483bf..0000000000 --- a/scss/components/overlay/module.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../../settings/z-index'; -@import '../checkbox/settings'; -@import '../input/settings'; -@import '../label/settings'; -@import '../list-item/settings'; -@import '../radio/settings'; -@import '../toggle-switch/settings'; -@import '../forms/settings'; -@import 'settings'; - -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/focus'; -@import '../input/mixins'; -@import '../checkbox/mixins'; -@import '../radio/mixins'; -@import '../toggle-switch/mixins'; - -@import 'event-overlay'; diff --git a/scss/components/overlay/settings.scss b/scss/components/overlay/settings.scss deleted file mode 100644 index c121d976ac..0000000000 --- a/scss/components/overlay/settings.scss +++ /dev/null @@ -1,7 +0,0 @@ -$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); diff --git a/scss/components/page-header/examples/default.html b/scss/components/page-header/examples/default.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/page-header/examples/page-sub-header.html b/scss/components/page-header/examples/page-sub-header.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/page-header/mixins.scss b/scss/components/page-header/mixins.scss deleted file mode 100644 index 31e45d2ec6..0000000000 --- a/scss/components/page-header/mixins.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin page-header__left() { - display: flex; - padding: rem-calc(16) 2rem; - margin: 0; - font-family: $brand-font-regular; - flex-grow: 1; - align-items: center; -} - -@mixin page-header__title() { - font-size: $h4-font-size; - line-height: rem-calc(32); - color: $md-black-100; -} diff --git a/scss/components/page-header/module.scss b/scss/components/page-header/module.scss deleted file mode 100644 index 28f21b5b1f..0000000000 --- a/scss/components/page-header/module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import 'settings'; - -@import '../../tools/mixins/core'; -@import '../../tools/mixins/grid'; -@import 'mixins'; - -@import 'page-header-sites'; diff --git a/scss/components/page-header/page-header-sites.scss b/scss/components/page-header/page-header-sites.scss deleted file mode 100644 index d2057e74e4..0000000000 --- a/scss/components/page-header/page-header-sites.scss +++ /dev/null @@ -1,61 +0,0 @@ -/** @component page-header */ - -@include exports('md-page-header') { - .md-content, - .#{$sites-class} { - .page-header { - min-height: 30vh; - padding: 4rem; - padding-bottom: 5rem; - margin-bottom: 1rem; - // color: $md-black-100; - text-align: center; - - &__container { - @include grid-row(); - - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - - &.page-header--left { - text-align: left; - align-items: left; - } - } - - &__title { - // color: $md-black-100; - margin-top: 7rem; - margin-bottom: 2rem; - font-family: $brand-font-regular; - font-size: 4.5rem; - } - - &__lead { - // color: $md-black-100; - max-width: 90%; - font-family: $brand-font-light; - font-size: rem-calc(24); - line-height: rem-calc(40); - - @media #{$medium-up} { - max-width: 70%; - } - - @media #{$large-up} { - max-width: 50%; - } - } - - &.page-header--dark { - .page-header__title, - .page-header__lead { - color: $md-white-100; - text-shadow: 0 0 1px rgba($md-black-100, 0.75); - } - } - } - } -} diff --git a/scss/components/page-header/settings.scss b/scss/components/page-header/settings.scss deleted file mode 100644 index e13aee0f20..0000000000 --- a/scss/components/page-header/settings.scss +++ /dev/null @@ -1,32 +0,0 @@ -$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; diff --git a/scss/components/pagination/examples/centered .html b/scss/components/pagination/examples/centered .html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/pagination/examples/default.html b/scss/components/pagination/examples/default.html deleted file mode 100644 index 6b9a3c09c4..0000000000 --- a/scss/components/pagination/examples/default.html +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/scss/components/pagination/mixins.scss b/scss/components/pagination/mixins.scss deleted file mode 100644 index d82b734b63..0000000000 --- a/scss/components/pagination/mixins.scss +++ /dev/null @@ -1,142 +0,0 @@ -@mixin pagination-size( - $padding-vertical, - $padding-horizontal, - $font-size, - $line-height, - $border-radius -) { - > li { - > a, - > span { - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - line-height: $line-height; - } - - &:first-child { - > a, - > span { - @include border-left-radius($border-radius); - } - } - - &:last-child { - > a, - > span { - @include border-right-radius($border-radius); - } - } - } -} - -@mixin pagination-container($center: false) { - @if $center { - text-align: center; - } -} - -@mixin pagination-unavailable-item { - a, - button { - color: $pagination-link-unavailable-font-color; - cursor: $pagination-link-unavailable-cursor; - } - - &:hover a, - & a:focus, - &:hover button, - & button:focus { - background: $pagination-link-unavailable-bg-active; - } -} - -@mixin pagination-current-item($has-anchor: true) { - @if $has-anchor { - a, - button { - font-weight: $pagination-link-current-font-weight; - color: $pagination-link-current-font-color; - cursor: $pagination-link-current-cursor; - background: $pagination-link-current-background; - - &:hover, - &:focus { - background: $pagination-link-current-active-bg; - } - } - } @else { - background: $pagination-link-current-background; - color: $pagination-link-current-font-color; - cursor: $pagination-link-current-cursor; - font-weight: $pagination-link-current-font-weight; - height: auto; - padding: $pagination-link-pad; - - @include radius; - - &:hover, - &:focus { - background: $pagination-link-current-active-bg; - } - } -} - -@mixin pagination( - $center: false, - $md-gray-50-style: true, - $use-default-classes: true -) { - @if $md-gray-50-style { - display: block; - margin-#{$default-float}: $pagination-margin; - min-height: $pagination-height; - - li { - height: $pagination-li-height; - font-size: $pagination-li-font-size; - color: $pagination-li-font-color; - margin-#{$default-float}: $pagination-li-margin; - - a, - button { - @include radius; - @include single-transition(background-color); - - display: block; - padding: $pagination-link-pad; - font-size: 1em; - font-weight: 450; - line-height: inherit; - color: $pagination-link-font-color; - background: none; - } - - &:hover a, - a:focus, - &:hover button, - button:focus { - background: $pagination-link-active-bg; - } - - @if $use-default-classes { - &.unavailable { - @include pagination-unavailable-item(); - } - - &.current { - @include pagination-current-item(); - } - } - } - } - - li { - @if $center { - display: inline-block; - float: none; - } @else { - display: block; - float: $pagination-li-float; - } - } -} diff --git a/scss/components/pagination/module.scss b/scss/components/pagination/module.scss deleted file mode 100644 index 78d6840673..0000000000 --- a/scss/components/pagination/module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../settings/core'; -@import 'settings'; - -@import '../../tools/mixins/core'; -@import 'mixins'; - -@import 'pagination'; diff --git a/scss/components/pagination/pagination.scss b/scss/components/pagination/pagination.scss deleted file mode 100644 index a9970c5588..0000000000 --- a/scss/components/pagination/pagination.scss +++ /dev/null @@ -1,17 +0,0 @@ -/** @component pagination */ - -@include exports('md-pagination') { - @include exports('pagination') { - ul.pagination { - @include pagination; - } - - .pagination-centered { - @include pagination-container(true); - - ul.pagination { - @include pagination(true, false); - } - } - } -} diff --git a/scss/components/pagination/settings.scss b/scss/components/pagination/settings.scss deleted file mode 100644 index 40048fb140..0000000000 --- a/scss/components/pagination/settings.scss +++ /dev/null @@ -1,22 +0,0 @@ -$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; diff --git a/scss/components/panel/examples/default.html b/scss/components/panel/examples/default.html deleted file mode 100644 index c2117d91a4..0000000000 --- a/scss/components/panel/examples/default.html +++ /dev/null @@ -1,5 +0,0 @@ -
-

Panel Title

- Panel Message - Panel Footer -
diff --git a/scss/components/panel/mixins.scss b/scss/components/panel/mixins.scss deleted file mode 100644 index b7494cdda1..0000000000 --- a/scss/components/panel/mixins.scss +++ /dev/null @@ -1,29 +0,0 @@ -@mixin panel-variant( - $border, - $heading-text-color, - $heading-bg-color, - $heading-border -) { - border-color: $border; - - & > .panel-heading { - color: $heading-text-color; - background-color: $heading-bg-color; - border-color: $heading-border; - - + .panel-collapse > .panel-body { - border-top-color: $border; - } - - .badge { - color: $heading-bg-color; - background-color: $heading-text-color; - } - } - - & > .panel-footer { - + .panel-collapse > .panel-body { - border-bottom-color: $border; - } - } -} diff --git a/scss/components/panel/module.scss b/scss/components/panel/module.scss deleted file mode 100644 index 79a5ab9d8b..0000000000 --- a/scss/components/panel/module.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import '../../tools/functions/core'; - -@import '~@momentum-ui/icons/scss/variables'; -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../settings/z-index'; -@import '../../typography/settings'; -@import '../button/settings'; -@import '../forms/settings'; -@import '../checkbox/settings'; -@import '../loader/settings'; -@import 'settings'; - -@import '../../tools/mixins/flex'; -@import '../loader/mixins'; -@import 'mixins'; - -@import '../loader/placeholders'; - -@import 'panel'; diff --git a/scss/components/panel/panel.scss b/scss/components/panel/panel.scss deleted file mode 100644 index de49dc24b2..0000000000 --- a/scss/components/panel/panel.scss +++ /dev/null @@ -1,321 +0,0 @@ -/** @component panel */ - -@include exports('md-panel') { - .#{$panel__class} { - display: flex; - width: 100vw; - height: auto; - padding: rem-calc(132) 2rem 2rem 2rem; - text-align: center; - background: $md-white-100; - background: var(--mdl-background-primary, $md-white-100); - flex-direction: column; - align-items: center; - - @media #{$medium-up} { - padding-top: rem-calc(188); - } - - @media #{$v-small-only} { - padding-top: 10vh; - } - - @media #{$v-medium-only} { - padding-top: 15vh; - } - - &--full { - position: absolute; - top: 0; - left: 0; - z-index: $zindex-modal-background - 1; - height: 0px; // IE fix - min-height: 100vh; - } - - &__main { - display: flex; - width: 100%; - max-width: rem-calc(520); - flex: 1 0 auto; - flex-direction: column; - align-items: center; - } - - &__image { - width: 100%; - max-width: 190px; - max-height: 80px; - margin-bottom: rem-calc(48); - font-size: rem-calc(80); - } - - &__title, - &__message { - width: 100%; - margin-bottom: 0; - font-family: $brand-font-regular; - } - - &__title { - font-size: rem-calc(16); - line-height: rem-calc(24); - color: $md-black-100; - color: var(--mdl-textColor-primary, $md-black-100); - } - - &__message { - font-size: rem-calc(14); - line-height: rem-calc(22); - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - - &__secondary-action { - margin-top: rem-calc(48); - font-size: rem-calc(14); - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - - &__spinner { - @extend %md-spinner; - @extend %md-spinner--36; - - margin-top: rem-calc(40) !important; - } - - &__footer { - display: flex; - width: 100%; - margin-top: rem-calc(64); - font-size: rem-calc(10); - color: $md-gray-50; - color: var(--mdl-textColor-secondary, $md-gray-50); - flex-direction: column; - align-items: center; - justify-content: center; - - @media #{$medium-up} { - flex-direction: row; - } - - .footer__logo { - display: flex; - width: 100%; - height: 100%; - max-height: rem-calc(28); - margin-bottom: rem-calc(14); - font-size: rem-calc(28); - justify-content: center; - - @media #{$medium-up} { - width: auto; - margin-bottom: 0; - } - } - - .footer__copyright { - text-align: center; - align-self: stretch; - - @media #{$medium-up} { - margin-left: rem-calc(20); - } - } - - a { - color: $md-gray-50; - color: var(--mdl-textColor-hyperlink-color, $md-gray-50); - - &:hover { - color: $anchor-font-color-hover; - color: var(--mdl-textColor-hyperlink-hover, $anchor-font-color-hover); - } - } - } - - &__cta { - display: flex; - width: 100%; - flex-direction: column; - align-items: center; - } - - &__cta .#{$button__class}, - .#{$input__class} { - height: $panel-input__height; - - @media #{$small-only} { - width: 100%; - max-width: rem-calc(320); - } - } - - .#{$input__class} { - width: 100%; - height: $panel-input__height; - max-width: rem-calc(320); - - &-container { - margin: 0 auto; - - @media #{$small-only} { - width: 100%; - max-width: rem-calc(320); - } - } - } - - .#{$input__class} { - border-radius: rem-calc(8); - } - - &--message { - .#{$panel__class} { - &__cta { - margin-top: rem-calc(24); - - @media #{$small-only} { - width: 100%; - } - - @media #{$medium-up} { - .#{$button__class} { - padding-right: rem-calc(64); - padding-left: rem-calc(64); - } - } - } - } - } - - &--form { - .#{$panel__class} { - &__title { - &.ellipsis { - @media #{$small-only} { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - - &__message { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - - &__form { - margin-top: rem-calc(12); - margin-bottom: 0; - - @media #{$small-only} { - width: 100%; - } - } - - &__cta { - .#{$checkbox__class} { - margin-top: rem-calc(8); - font-family: $brand-font-regular; - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - } - - &__password-link { - display: flex; - margin-top: rem-calc(8); - font-size: rem-calc(14); - align-items: center; - flex-direction: column; - } - - &__secondary-action { - margin-top: rem-calc(78); - } - } - - .#{$input__class}__icon-container { - .#{$input__class} { - padding-right: rem-calc(36); - } - - .#{$input__class}__icon, - .#{$button__class}--icon { - min-height: 0; - padding: 0; - background: transparent; - border: 0; - } - } - - .#{$button__class}, - .#{$input__class} { - min-height: $panel-input__height; - padding-right: rem-calc(20); - padding-left: rem-calc(20); - margin-bottom: rem-calc(8); - - @media #{$medium-up} { - width: rem-calc(320); - - &.#{$button__class}--icon { - width: auto; - } - } - } - - .#{$input__class} { - &--with-icon { - padding-right: rem-calc(36); - } - - &-container { - margin-bottom: 0; - align-items: center; - - .#{$input__class}__messages { - margin-top: 0; - margin-bottom: rem-calc(8); - line-height: rem-calc(24); - } - - .#{$input__class}__icon--right { - position: absolute; - top: rem-calc(11); - right: rem-calc(11); - display: flex; - font-size: rem-calc(18); - color: $md-gray-50; - color: var(--mdl-textColor-secondary, $md-gray-50); - cursor: pointer; - } - } - - &:focus + .#{$input__class}__icon--right { - position: absolute; - display: block; - cursor: pointer; - } - - &__messages.error { - padding: 0; - margin: 0; - - .message { - margin-bottom: rem-calc(12); - margin-left: 0; - font-size: rem-calc(14); - line-height: rem-calc(24); - color: $input__message__font-color--error; - color: var(--mdl-input-outline-error, $input__message__font-color--error); - } - } - } - } - } -} diff --git a/scss/components/panel/settings.scss b/scss/components/panel/settings.scss deleted file mode 100644 index f49d7a4c3d..0000000000 --- a/scss/components/panel/settings.scss +++ /dev/null @@ -1,3 +0,0 @@ -$panel__class: '#{$prefix}-panel'; - -$panel-input__height: rem-calc(32); diff --git a/scss/components/popover/examples/arrow.html b/scss/components/popover/examples/arrow.html deleted file mode 100644 index cdbd031cc0..0000000000 --- a/scss/components/popover/examples/arrow.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
- Arrow -
-
diff --git a/scss/components/popover/examples/contained.html b/scss/components/popover/examples/contained.html deleted file mode 100644 index 062768bd88..0000000000 --- a/scss/components/popover/examples/contained.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
- Popover(height: 3000px) -
-
diff --git a/scss/components/popover/examples/default.html b/scss/components/popover/examples/default.html deleted file mode 100644 index bba627bb0a..0000000000 --- a/scss/components/popover/examples/default.html +++ /dev/null @@ -1,55 +0,0 @@ -
-
-
-
-
-
- -
-
Edit space settings
-
-
-
- -
-
Add to favorites
-
-
-
- -
-
Notifications
-
-
-
- -
-
Add Integrations & Bots
-
-
-
- -
-
View space policy
-
-
-
- -
-
Archive space
-
-
-
- -
-
Remove space from team
-
-
-
- -
-
Leave space
-
-
-
-
diff --git a/scss/components/popover/examples/delay.html b/scss/components/popover/examples/delay.html deleted file mode 100644 index 7e581aa950..0000000000 --- a/scss/components/popover/examples/delay.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
- Delayed -
-
diff --git a/scss/components/popover/examples/direction.html b/scss/components/popover/examples/direction.html deleted file mode 100644 index 925f1bcd78..0000000000 --- a/scss/components/popover/examples/direction.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
- right-center -
-
diff --git a/scss/components/popover/examples/offset.html b/scss/components/popover/examples/offset.html deleted file mode 100644 index 8954a80cd2..0000000000 --- a/scss/components/popover/examples/offset.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
- Offset -
-
diff --git a/scss/components/popover/examples/overflow.html b/scss/components/popover/examples/overflow.html deleted file mode 100644 index c1b089c764..0000000000 --- a/scss/components/popover/examples/overflow.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
- Popover(height: 3000px) -
-
diff --git a/scss/components/popover/module.scss b/scss/components/popover/module.scss deleted file mode 100644 index 37d1dbcff7..0000000000 --- a/scss/components/popover/module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@import "../../tools/functions/core"; -@import "../../tools/mixins/core"; - -// Icons -@import '~@momentum-ui/icons/scss/mixins'; -@import '~@momentum-ui/icons/scss/variables'; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../colors/settings-transparencies.scss"; -@import "../../settings/core.scss"; -@import "../../settings/media.scss"; -@import "../../settings/z-index.scss"; -@import "../../typography/settings.scss"; -@import "../input/settings.scss"; -@import "../checkbox/settings.scss"; -@import "../forms/settings.scss"; -@import "../list-item/settings.scss"; -@import "../overlay/settings.scss"; -@import "../radio/settings.scss"; -@import "../toggle-switch/settings.scss"; - -// Tools -@import "../../tools/mixins/border-radius"; -@import "../../tools/mixins/focus"; -@import "../../typography/mixins"; -@import "../../components/checkbox/mixins"; -@import "../../components/input/mixins"; -@import "../../components/radio/mixins"; -@import "../../components/toggle-switch/mixins"; - -// Typography -@include brand-font-face-regular; - -// Components -@import "../../components/overlay/event-overlay"; - -// Component Specific -@import 'popover'; diff --git a/scss/components/popover/popover.scss b/scss/components/popover/popover.scss deleted file mode 100644 index 7f03b8e873..0000000000 --- a/scss/components/popover/popover.scss +++ /dev/null @@ -1,73 +0,0 @@ -/** @component popover */ - -@include exports('md-popover') { - .#{$prefix}-popover { - &.#{$prefix}-event-overlay { - position: static; - - > .#{$prefix}-event-overlay__children { - position: static; - padding: 12px; - } - - > .#{$prefix}-event-overlay__arrow { - z-index: $zindex-top-bar-fixed - 3; - } - - &.#{$prefix}-event-overlay--arrow { - &.#{$prefix}-event-overlay--right { - display: flex; - flex-direction: row; - align-items: center; - - & > .#{$prefix}-event-overlay__arrow { - margin-top: 0px; - } - } - - &.#{$prefix}-event-overlay--left { - display: flex; - flex-direction: row-reverse; - align-items: center; - - & > .#{$prefix}-event-overlay__arrow { - margin-top: 0px; - margin-left: -$event-overlay-arrow__height + 12; - } - - & > .#{$prefix}-event-overlay__children { - margin-right: $event-overlay-arrow__height; - } - } - - &.#{$prefix}-event-overlay--bottom { - display: flex; - flex-direction: column; - align-items: center; - - & > .#{$prefix}-event-overlay__arrow { - margin-left: 0px; - } - } - - &.#{$prefix}-event-overlay--top { - display: flex; - flex-direction: column-reverse; - align-items: center; - - & > .#{$prefix}-event-overlay__arrow { - margin-top: -$event-overlay-arrow__height + 12; - margin-left: 0px; - } - - & > .#{$prefix}-event-overlay__children { - margin-bottom: $event-overlay-arrow__height; - } - } - } - } - .md-tooltip__text { - color: $md-gray-90; - } - } -} diff --git a/scss/components/popover/settings.scss b/scss/components/popover/settings.scss deleted file mode 100644 index da636aab22..0000000000 --- a/scss/components/popover/settings.scss +++ /dev/null @@ -1,11 +0,0 @@ -$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); diff --git a/scss/components/progress/examples/default.html b/scss/components/progress/examples/default.html deleted file mode 100644 index c259818acc..0000000000 --- a/scss/components/progress/examples/default.html +++ /dev/null @@ -1,21 +0,0 @@ -
- -
- ProgressBar Default - 50 / 100 -
-
- - -
- -
\ No newline at end of file diff --git a/scss/components/progress/mixins.scss b/scss/components/progress/mixins.scss deleted file mode 100644 index b6c66c59ac..0000000000 --- a/scss/components/progress/mixins.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin progress-container { - height: $progress-bar-height; - padding: $progress-bar-pad; - margin-bottom: $progress-bar-margin-bottom; - background-color: $progress-bg; - border: $progress-bar-border-size $progress-bar-border-style - $progress-bar-border-color; -} - -@mixin progress-meter($bg: $progress-meter-color) { - display: block; - height: 100%; - background: $bg; -} diff --git a/scss/components/progress/module.scss b/scss/components/progress/module.scss deleted file mode 100644 index 1cb834c698..0000000000 --- a/scss/components/progress/module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import 'settings'; - -@import '../../tools/mixins/core'; -@import 'mixins'; - -@import 'progress'; diff --git a/scss/components/progress/progress.scss b/scss/components/progress/progress.scss deleted file mode 100644 index cbef664eb2..0000000000 --- a/scss/components/progress/progress.scss +++ /dev/null @@ -1,48 +0,0 @@ -/** @component progress */ - -@include exports('md-progress-bar') { - .progressbar-label { - text-align: left; - } - - .progressbar-progress { - float: right; - } - - .progressbar-label, - .progressbar-progress { - font-family: $font-family-sans-serif; - font-size: rem-calc(11); - color: $md-black-100; - } - - .progress { - @include progress-container; - - border: none; - - .meter { - @include progress-meter; - } - - &.secondary .meter { - @include progress-meter($bg: $progress-meter-secondary-color); - } - - &.success .meter { - @include progress-meter($bg: $progress-meter-success-color); - } - - &.danger .meter { - @include progress-meter($bg: $progress-meter-alert-color); - } - - &.warning .meter { - @include progress-meter($bg: $progress-meter-warning-color); - } - - &.info .meter { - @include progress-meter($bg: $progress-meter-info-color); - } - } -} diff --git a/scss/components/progress/settings.scss b/scss/components/progress/settings.scss deleted file mode 100644 index 0c00401bb9..0000000000 --- a/scss/components/progress/settings.scss +++ /dev/null @@ -1,29 +0,0 @@ -$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; diff --git a/scss/components/radio/examples/dark.html b/scss/components/radio/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/radio/examples/default.html b/scss/components/radio/examples/default.html deleted file mode 100644 index 4949bf710d..0000000000 --- a/scss/components/radio/examples/default.html +++ /dev/null @@ -1,12 +0,0 @@ -
- - -
-
- - -
diff --git a/scss/components/radio/examples/disabled.html b/scss/components/radio/examples/disabled.html deleted file mode 100644 index 3e83bd1eeb..0000000000 --- a/scss/components/radio/examples/disabled.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-
-
- - -
-
-
-
- - -
-
-
-
diff --git a/scss/components/radio/examples/group.html b/scss/components/radio/examples/group.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/radio/examples/nested.html b/scss/components/radio/examples/nested.html deleted file mode 100644 index 5565ab2c90..0000000000 --- a/scss/components/radio/examples/nested.html +++ /dev/null @@ -1,26 +0,0 @@ -
-
- - -
-
- - -
-
- - -
-
- - -
-
diff --git a/scss/components/radio/mixins.scss b/scss/components/radio/mixins.scss deleted file mode 100644 index 78c8a82ae8..0000000000 --- a/scss/components/radio/mixins.scss +++ /dev/null @@ -1,113 +0,0 @@ -@mixin radio-color( - $border-color: null, - $border-color-css-var: --null, - $background-color: null, - $background-color-css-var: --null, - $background-color--disabled: null, - $background-color--disabled-css-var: --null, - $background-color--hover: null, - $background-color--hover-css-var: --null, - $background-color--checked: null, - $background-color--checked-css-var: --null, - $background-color--checked-hover: null, - $background-color--checked-hover-css-var: --null, - $label-color: null, - $label-color-css-var: --null -) { - .#{$radio__class}__input { - + .#{$radio__class}__label { - font-family: $input__font-family; - @if $label-color { - color: $label-color; - color: var($label-color-css-var, $label-color); - } - - &:before { - @if $background-color { - background-color: $background-color; - background-color: var($background-color-css-var, $background-color); - } - @if $border-color { - border: 1px solid $border-color; - border: 1px solid var($border-color-css-var, $border-color); - } - } - - &:hover, - &.hover { - &:before { - @if $background-color--hover { - background-color: $background-color--hover; - background-color: var($background-color--hover-css-var, $background-color--hover); - } - } - } - } - - &:focus, - &.focus { - + .#{$radio__class}__label { - &:before { - @include focus-styles; - } - } - } - - &:checked { - + .#{$radio__class}__label { - &:before { - @if $background-color--checked { - background-color: $background-color--checked; - background-color: var($background-color--checked-css-var, $background-color--checked); - } - border: none; - } - - &:hover, - &.hover { - &:before { - @if $background-color--checked-hover { - background-color: $background-color--checked-hover; - background-color: var($background-color--checked-css-var, $background-color--checked); - } - } - } - } - } - - &:disabled, - &.disabled { - + .#{$radio__class}__label { - &:before { - @if $background-color--disabled { - background-color: $background-color--disabled; - background-color: var($background-color--disabled-css-var, $background-color--disabled); - } - border: none; - } - } - - &:checked { - + .#{$radio__class}__label { - &:before { - @if $background-color--checked { - background-color: $background-color--checked; - background-color: var($background-color--checked-css-var, $background-color--checked); - } - border: none; - } - - &:hover, - &.hover { - &:before { - @if $background-color--checked { - background-color: $background-color--checked; - background-color: var($background-color--checked-css-var, $background-color--checked); - } - } - } - } - } - } - } -} diff --git a/scss/components/radio/module.scss b/scss/components/radio/module.scss deleted file mode 100644 index 854c694623..0000000000 --- a/scss/components/radio/module.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import '../../tools/functions/core'; - -@import '~@momentum-ui/icons/scss/mixins'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings.scss'; -@import "../input/settings.scss"; -@import '../forms/settings'; - -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../tools/mixins/spacing'; -@import '../input/mixins'; - -// Component Specific -@import 'settings'; -@import 'mixins'; -@import 'radio'; diff --git a/scss/components/radio/radio.scss b/scss/components/radio/radio.scss deleted file mode 100644 index fe79f04b4b..0000000000 --- a/scss/components/radio/radio.scss +++ /dev/null @@ -1,156 +0,0 @@ -/** @component radio */ - -@include exports('md-radio') { - .#{$radio__class}-group { - @include vr-spacing(mb, 1.5); - - &:last-child { - margin-bottom: 0; - } - } - - .#{$radio__class} { - @include radio-color( - $border-color: $input__border-color, - $border-color-css-var: --mdl-input-outline-color, - $background-color: $input__background, - $background-color-css-var: --mdl-input-background-color, - $background-color--disabled: $form-control__background, - $background-color--disabled-css-var: --mdl-input-outline-color, - $background-color--hover: $input__background--hover, - $background-color--hover-css-var: --mdl-input-background-hover, - $background-color--checked: $form-control__background--checked, - $background-color--checked-css-var: --mdl-input-background-theme-color, - $background-color--checked-hover: $form-control__background--checked-hover, - $background-color--checked-hover-css-var: --mdl-input-background-theme-hover, - $label-color: $form-control__label, - $label-color-css-var: --mdl-input-text-primary - ); - - .#{$radio__class}__input { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0 0 0 0); - border: 0; - - &:checked { - + .#{$radio__class}__label { - &:before { - color: $form-control__content; - color: var(--mdl-input-background-color, $form-control__content); - cursor: pointer; - } - } - } - - &:disabled, - &.disabled { - + .#{$radio__class}__label { - cursor: default; - opacity: $form-control__opacity--disabled; - - &:before { - cursor: default; - } - } - } - } - - .#{$radio__class}__label { - display: flex; - line-height: $radio__size; - color: $form-control__label; - color: var(--mdl-background-primary, $form-control__label); - font-size: $radio__label-size; - cursor: pointer; - - &:before { - @include flex(); - @include border-radius(50%); - @include icon-unread-badge_8; - - flex-shrink: 0; - width: $radio__size; - height: $radio__size; - margin-right: rem-calc(12); - font-family: $icon-font-name; - font-size: $radio__icon-size; - font-style: normal; - line-height: $radio__icon-size; - color: transparent; - border: none; - transition: 0ms ease-in-out all; - } - } - - &.#{$prefix}-input-container { - @include vr-spacing(mb, 0.5); - - display: flex; - flex-direction: column; - } - - .#{$prefix}-input__help-text { - @include input__help-text(); - @include vr-spacing(pl, 2); - } - } - - .#{$dark-class} { - .#{$radio__class} { - @include radio-color( - $border-color: $form-control__background-border--focus--dark, - $background-color: $form-control__background--dark, - $background-color--hover: $form-control__background--hover--dark, - $background-color--checked: $form-control__background--checked--dark, - $background-color--checked-hover: $form-control__background--checked-hover--dark, - $label-color: $form-control__label--dark - ); - } - } - - .#{$input__class--filled}, - .#{$client-class} { - .#{$radio__class} { - @include radio-color( - $border-color: $input__border-color--filled, - $background-color: $form-control__background, - $background-color--disabled: $form-control__background, - $background-color--hover: $form-control__background--hover, - $background-color--checked: $form-control__background--checked, - $background-color--checked-hover: $form-control__background--checked-hover, - $label-color: $form-control__label - ); - } - } - - .#{$client-class}.#{$dark-class}, - .#{$client-class} .#{$dark-class}, - .#{$dark-class} .#{$input__class--filled}, - .#{$dark-class}.#{$input__class--filled} { - .#{$radio__class} { - @include radio-color( - $border-color: $input__border-color--filled, - $background-color: $form-control__background--dark, - $background-color--disabled: $form-control__background--dark, - $background-color--hover: $form-control__background--hover--dark, - $background-color--checked: $form-control__background--checked--dark, - $background-color--checked-hover: $form-control__background--checked-hover--dark, - $label-color: $form-control__label--dark - ); - } - } - - .#{$radio__class}-horizontal { - display: inline-block; - margin-right: 20px; - } - - .form-horizontal .#{$radio__class}-horizontal { - padding-top: 6px; - } -} diff --git a/scss/components/radio/settings.scss b/scss/components/radio/settings.scss deleted file mode 100644 index 0667aa5d48..0000000000 --- a/scss/components/radio/settings.scss +++ /dev/null @@ -1,5 +0,0 @@ -$radio__class: '#{$prefix}-radio'; - -$radio__size: rem-calc(20); -$radio__icon-size: rem-calc(8); -$radio__label-size: rem-calc(16); diff --git a/scss/components/select/examples/dark.html b/scss/components/select/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/select/examples/default.html b/scss/components/select/examples/default.html deleted file mode 100644 index 713b5d0481..0000000000 --- a/scss/components/select/examples/default.html +++ /dev/null @@ -1,40 +0,0 @@ -
- -
-
-
-
-
test1
-
-
-
-
test2
-
-
-
-
test3
-
-
-
-
test4
-
-
-
-
-
-
diff --git a/scss/components/select/examples/filter.html b/scss/components/select/examples/filter.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/select/examples/multi-select.html b/scss/components/select/examples/multi-select.html deleted file mode 100644 index 559b375ddd..0000000000 --- a/scss/components/select/examples/multi-select.html +++ /dev/null @@ -1,61 +0,0 @@ -
- -
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
diff --git a/scss/components/select/examples/nested.html b/scss/components/select/examples/nested.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/select/examples/objects.html b/scss/components/select/examples/objects.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/select/examples/secondary-label.html b/scss/components/select/examples/secondary-label.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/select/examples/validation.html b/scss/components/select/examples/validation.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/select/module.scss b/scss/components/select/module.scss deleted file mode 100644 index 885741fa91..0000000000 --- a/scss/components/select/module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import '../../tools/functions/core'; - - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../button/settings'; -@import '../icon/settings'; -@import '../input/settings'; -@import '../forms/settings'; -@import '../list-item/settings'; -@import '../overlay/settings.scss'; -@import 'settings'; - -@import '../../tools/mixins/core'; -@import '../../tools/mixins/border-radius'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../list-item/mixins'; -@import '../button/mixins'; -@import '../../typography/mixins.scss'; - -@include brand-font-face-regular; - -@import 'select'; diff --git a/scss/components/select/select.scss b/scss/components/select/select.scss deleted file mode 100644 index 6cd009e04d..0000000000 --- a/scss/components/select/select.scss +++ /dev/null @@ -1,165 +0,0 @@ -/** @component select */ - -@include exports('md-select') { - .#{$select__class} { - .md-input__wrapper { - line-height: 0; - } - - .md-input__after { - pointer-events: none; - } - - .md-rotate { - transform: rotate(0); - transition: transform ease 0.15s; - } - - .open { - .md-rotate { - transform: rotate(180deg); - } - } - - &__input, - .#{$select-button__class} { - width: 100%; - @include button-color( - $color: $select__color, - $color-css-var: --mdl-button-secondary-text-color, - $color-hover: $select__color, - $color-hover-css-var: --mdl-button-secondary-text-color, - $color-active: $select__color, - $color-active-css-var: --mdl-button-secondary-text-color, - $bg: $select--input__background-color, - $bg-css-var: --mdl-button-secondary-bg-color, - $bg-hover: $select--input__background-color--hover, - $bg-hover-css-var: --mdl-button-secondary-hover-bg-color, - $bg-active: $select--input__background-color, - $bg-active-css-var: --mdl-button-secondary-pressed-bg-color, - ); - @include button-size($radius: $input__border-radius); - text-align: left; - - margin: $select-input__margin; - min-width: rem-calc(180); - - .#{$dark-class} & { - @include button-color( - $color: $select__color--dark, - $bg: $select--input__background-color--dark, - $bg-hover: $select--input__background-color--hover--dark, - $bg-active: $select--input__background-color--dark - ); - @include button-size($radius: $input__border-radius); - } - - &.disabled, - &.md-button--disabled, - &[disabled] { - @include border-radius($input__border-radius); - - .#{$select-label__class} { - @include flex($jc: space-between); - - > i, - > .#{$icon__class} { - color: $select__icon--disabled; - color: var(--mdl-textColor-disabled, $select__icon--disabled); - - path { - fill: $select__icon--disabled; - fill: var(--mdl-textColor-disabled, $select__icon--disabled); - } - - .#{$dark-class} & { - color: $select__icon--disabled--dark; - - path { - fill: $select__icon--disabled--dark; - } - } - } - } - } - - .#{$select-label__class} { - width: 100%; - @include flex($jc: space-between); - - > span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: rem-calc(250); - } - - > i, - > .#{$icon__class} { - color: $input__font-color; - color: var(--mdl-button-secondary-text-color, $input__font-color); - - path { - fill: $input__font-color; - fill: var(--mdl-button-secondary-text-color, $input__font-color); - } - - .#{$dark-class} & { - color: $input__font-color--dark; - - path { - fill: $input__font-color--dark; - } - } - } - } - } - .#{$prefix}-event-overlay__children { - background: $md-white-100; - background: var(--mdl-background-secondary, $md-white-100); - max-height: $dropdown-height; - overflow: auto; - border: $select--children__border; - box-shadow: $select--children__box-shadow; - - .#{$list-item__class} { - .#{$dark-class} & { - @include list-item-color; - } - } - // One pixel less than Event Overlay per Designers comments - .#{$list-item__class}:first-of-type { - border-radius: 4px 4px 0 0; - } - - .#{$list-item__class}:last-of-type { - border-radius: 0 0 4px 4px; - } - } - - } - - .#{$select__class}__dropdown { - background: $md-white-100; - border-radius: $event-overlay__border-radius; - box-shadow: $event-overlay__border, $event-overlay__shadow; - display: flex; - flex-direction: column; - } - - .md-select__filter { - padding: rem-calc(12) rem-calc(12) 0 rem-calc(12); - &--empty { - list-style-type: none; - padding: .5rem; - margin-left: rem-calc(12); - } - } - - .md-select__filter { - .md-input-container{ - margin-bottom: rem-calc(4); - width: 100%; - } - } -} diff --git a/scss/components/select/settings.scss b/scss/components/select/settings.scss deleted file mode 100644 index 6cd606adf4..0000000000 --- a/scss/components/select/settings.scss +++ /dev/null @@ -1,21 +0,0 @@ -$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; diff --git a/scss/components/sidebar/examples/dark.html b/scss/components/sidebar/examples/dark.html deleted file mode 100644 index 69b4762c3c..0000000000 --- a/scss/components/sidebar/examples/dark.html +++ /dev/null @@ -1,172 +0,0 @@ -
-
-
-
- -
Level 1
- - -
Level 1 Closed
-
- -
- -
- -
Level 1 Open
-
- -
- -
- -
Level 2
- -
- -
Level 1 Open
-
- -
- -
-
-
Level 2 Open
-
- -
-
-
-
-
Level 3
-
-
-
Level 3
-
-
-
Level 3
-
-
-
-
Level 2 Closed
-
- -
-
-
-
-
Level 2
-
-
-
-
-
-
section header
-
- -
Level 1
- -
-
-
-
diff --git a/scss/components/sidebar/examples/default.html b/scss/components/sidebar/examples/default.html deleted file mode 100644 index a7c9eee6e3..0000000000 --- a/scss/components/sidebar/examples/default.html +++ /dev/null @@ -1,172 +0,0 @@ -
-
-
-
- -
Level 1
- - -
Level 1 Closed
-
- -
- -
- -
Level 1 Open
-
- -
- -
- -
Level 2
- -
- -
Level 1 Open
-
- -
- -
-
-
Level 2 Open
-
- -
-
-
-
-
Level 3
-
-
-
Level 3
-
-
-
Level 3
-
-
-
-
Level 2 Closed
-
- -
-
-
-
-
Level 2
-
-
-
-
-
-
section header
-
- -
Level 1
- -
-
-
-
diff --git a/scss/components/sidebar/examples/page-level.html b/scss/components/sidebar/examples/page-level.html deleted file mode 100644 index 6cdc0567b9..0000000000 --- a/scss/components/sidebar/examples/page-level.html +++ /dev/null @@ -1,172 +0,0 @@ -
-
-
-
- -
Level 1
- - -
Level 1 Closed
-
- -
- -
- -
Level 1 Open
-
- -
- -
- -
Level 2
- -
- -
Level 1 Open
-
- -
- -
-
-
Level 2 Open
-
- -
-
-
-
-
Level 3
-
-
-
Level 3
-
-
-
Level 3
-
-
-
-
Level 2 Closed
-
- -
-
-
-
-
Level 2
-
-
-
-
-
-
section header
-
- -
Level 1
- -
-
-
-
diff --git a/scss/components/sidebar/examples/with-icons.html b/scss/components/sidebar/examples/with-icons.html deleted file mode 100644 index b129a78918..0000000000 --- a/scss/components/sidebar/examples/with-icons.html +++ /dev/null @@ -1,202 +0,0 @@ -
-
-
-
- -
- -
-
Level 1
- - -
- -
-
Level 1 Closed
-
- -
- -
- -
- -
-
Level 1 Open
-
- -
- -
- -
Level 2
- -
- -
- -
-
Level 1 Open
-
- -
- -
-
-
Level 2 Open
-
- -
-
-
-
-
Level 3
-
-
-
Level 3
-
-
-
Level 3
-
-
-
-
Level 2 Closed
-
- -
-
-
-
-
Level 2
-
-
-
-
-
-
section header
-
- -
- -
-
Level 1
- -
-
-
-
diff --git a/scss/components/sidebar/module.scss b/scss/components/sidebar/module.scss deleted file mode 100644 index a09dcb0f2c..0000000000 --- a/scss/components/sidebar/module.scss +++ /dev/null @@ -1,21 +0,0 @@ - -@import "../../tools/functions/core"; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../list-item/settings'; -@import '../top-bar/settings'; -@import '../../settings/z-index'; - -@import '../../tools/mixins/flex'; -@import '../list-item/mixins'; - -// Typography -@import '../../typography/mixins.scss'; -@include brand-font-face-bold; -@include brand-font-face-regular; - -// Component Specific -@import 'sidebar'; diff --git a/scss/components/sidebar/sidebar.scss b/scss/components/sidebar/sidebar.scss deleted file mode 100644 index 0baba190fc..0000000000 --- a/scss/components/sidebar/sidebar.scss +++ /dev/null @@ -1,576 +0,0 @@ -/** @ @component sidebar */ - -@include exports('md-sidebar') { - $sidebar-class: '#{$prefix}-sidebar'; - - .#{$sidebar-class} { - $parent: &; - z-index: $zindex-sidebar; - height: 100%; - width: 100%; - background-color: $md-white-100; - position: relative; - @include flex($fd: column, $ai: flex-start); - - @media #{$large-up} { - max-width: rem-calc(240); - min-width: rem-calc(200); - } - - &__wrapper { - display: flex; - flex-direction: row; - height: 100%; - - &--fixed { - min-height: 100vh; - position: fixed; - top: 0; - left: 0; - } - } - - &--collapsed { - display: none; - } - - &--topbar { - padding-top: $top-bar__height--desktop; - } - - &__footer { - width: inherit; - display: flex; - flex-direction: column; - padding: 0 0 1rem 0; - } - - &__header { - width: 100%; - margin-bottom: rem-calc(40); - - @include flex($fd: column, $ai: flex-start); - } - - &--fixed { - min-height: 100vh; - } - - &--minimized { - width: rem-calc(68); - min-width: 0; - - .md-sidebar__header { - visibility: hidden; - } - - .md-sidebar-nav__group { - position:relative; - right: .2rem; - } - } - - &__toggle { - display: flex; - z-index: $zindex-sidebar; - width: 16px; - margin-right: -16px; - padding: 0; - text-decoration: none; - box-shadow: none; - flex-direction: column; - justify-content: center; - top: 0; - - & .md-collapse-button { - opacity: 0.0; - - &:hover{ - opacity: 1.0; - } - } - } - - &:hover + .md-sidebar__toggle .md-collapse-button, - &__toggle--collapsed .md-collapse-button { - opacity: 1.0; - } - - &--global { - background-color: $md-gray-10; - - #{$parent} { - &-nav { - &__group { - &--primary { - .#{$list-item__class} { - height: rem-calc(40); - font-size: rem-calc(14); - - &__left { - font-size: rem-calc(16); - } - - @include list-item-color( - $active-bgrd-color: $md-gray-30, - $active-bgrd-color-css-var: --mdl-button-secondary-hover-bg-color, - $active-color: $md-black-100, - $active-color-css-var: --mdl-textColor-primary, - $background-color: transparent, - $background-color-css-var: --null, - $color: $md-black-100, - $color-css-var: --mdl-textColor-primary, - $focus-color: $md-black-100, - $focus-color-css-var: --mdl-textColor-primary, - $header-color: $md-black-100, - $header-color-css-var: --mdl-textColor-primary, - $hover-bgrd-color: $md-gray-20, - $hover-bgrd-color-css-var: --mdl-background-quaternary, - $includeFocus: false, - $subheader-color: $md-black-100, - $subheader-color-css-var: --mdl-textColor-primary, - ); - } - - #{$parent}-nav__group--secondary { - .#{$list-item__class} { - @include list-item-color( - $active-bgrd-color: $md-gray-30, - $active-bgrd-color-css-var: --mdl-button-secondary-hover-bg-color, - $active-color: $md-black-100, - $active-color-css-var: --mdl-textColor-primary, - $background-color: transparent, - $background-color-css-var: --null, - $color: $md-gray-70, - $color-css-var: --mdl-textColor-secondary, - $focus-color: $md-gray-70, - $focus-color-css-var: --mdl-textColor-secondary, - $hover-bgrd-color: $md-gray-20, - $hover-bgrd-color-css-var: --mdl-background-quaternary, - $includeFocus: false, - $section-left-color: $md-gray-70, - $section-left-color-css-var: --mdl-textColor-secondary, - $section-right-color: $md-gray-70, - $section-right-color-css-var: --mdl-textColor-secondary, - ); - } - } - } - } - } - } - - &#{$parent}--nested { - #{$parent} { - &-nav { - &__group { - &--primary { - .#{$list-item__class} { - height: rem-calc(44); - padding: 0 rem-calc(20); - font-size: rem-calc(16); - - &__left { - font-size: rem-calc(20); - } - - @include list-item-color( - $active-bgrd-color: $md-gray-30, - $active-bgrd-color-css-var: --mdl-button-secondary-hover-bg-color, - $active-color: $md-black-100, - $active-color-css-var: --mdl-textColor-primary, - $background-color: transparent, - $background-color-css-var: --null, - $color: $md-black-100, - $color-css-var: --mdl-textColor-primary, - $focus-color: $md-black-100, - $focus-color-css-var: --mdl-textColor-primary, - $hover-bgrd-color: $md-gray-20, - $hover-bgrd-color-css-var: --mdl-background-quaternary, - $includeFocus: false, - $section-left-color: $md-gray-90, - $section-left-color-css-var: --mdl-textColor-primary, - $section-right-color: $md-gray-90, - $section-right-color-css-var: --mdl-textColor-primary, - ); - } - } - } - } - } - } - - &#{$parent}--indented { - #{$parent} { - &-nav { - &__group { - &--primary { - #{$parent}-nav__group--secondary { - .#{$list-item__class} { - padding-left: rem-calc(56); - } - - #{$parent}-nav__group--tertiary { - .#{$list-item__class} { - padding-left: rem-calc(68); - } - } - } - } - } - } - } - } - } - - &--nested:not(&--minimized) { - width: 100%; - - .#{$sidebar-class}__header { - margin-top: rem-calc(16); - margin-left: rem-calc(20); - } - - @media #{$large-up} { - width: rem-calc(240); - } - } - - &--topbar { - padding-top: $top-bar__height--desktop; - } - - &__body { - width: 100%; - height: 100%; - overflow-y: auto; - flex-basis: auto; - flex-grow: 1; - // padding-top: rem-calc(20); - } - - .#{$list-item__class} { - &:focus { - box-shadow: none; - } - } - - &-nav { - - &--header { - padding-top: rem-calc(24); - } - - &__header { - height: rem-calc(36); - padding: 0 rem-calc(24); - margin-bottom: rem-calc(8); - font-size: rem-calc(12); - line-height: rem-calc(16); - color: $md-gray-70; - text-transform: uppercase; - border-bottom: 1px solid $black-08; - - @include flex($jc: flex-start); - } - - &__group { - &--expanded { - display: block; - } - - &--collapsed { - display: none; - } - - width: 100%; - - &--primary { - .#{$list-item__class} { - padding: 0 rem-calc(24); - - @include list-item-color( - $active-bgrd-color: transparent, - $active-bgrd-color-css-var: --null, - $active-color: $md-theme-80, - $active-section-right-color: $black-60, - $active-section-right-color-css-var: --mdl-textColor-secondary, - $background-color: transparent, - $background-color-css-var: --null, - $color: $md-black-100, - $color-css-var: --mdl-textColor-primary, - $header-color: $md-black-100, - $header-color-css-var: --mdl-textColor-primary, - $hover-color: $md-theme-70, - $hover-bgrd-color: transparent, - $hover-bgrd-color-css-var: --null, - $includeFocus: false, - $section-right-color: $black-60, - $section-right-color-css-var: --mdl-textColor-secondary, - $subheader-color: $md-black-100, - $subheader-color-css-var: --mdl-textColor-primary, - ); - } - - #{$parent}-nav__group--secondary { - padding-bottom: rem-calc(8); - - .#{$list-item__class} { - height: rem-calc(36); - font-size: rem-calc(14); - - @include list-item-color( - $active-bgrd-color: transparent, - $active-bgrd-color-css-var: --null, - $active-color: $md-theme-80, - $active-section-right-color: $black-60, - $active-section-right-color-css-var: --mdl-textColor-secondary, - $background-color: transparent, - $background-color-css-var: --null, - $color: $md-gray-70, - $color-css-var: --mdl-textColor-secondary, - $header-color: $md-gray-70, - $header-color-css-var: --mdl-textColor-secondary, - $hover-color: $md-theme-70, - $hover-bgrd-color: transparent, - $hover-bgrd-color-css-var: --null, - $includeFocus: false, - $section-right-color: $black-60, - $section-right-color-css-var: --mdl-textColor-secondary, - $subheader-color: $md-gray-70, - $subheader-color-css-var: --mdl-textColor-secondary, - ); - } - - #{$parent}-nav__group--tertiary { - padding-top: rem-calc(4); - - .#{$list-item__class} { - height: rem-calc(32); - padding-left: rem-calc(36); - font-size: rem-calc(12); - - @include list-item-color( - $active-bgrd-color: transparent, - $active-bgrd-color-css-var: --null, - $active-color: $md-theme-80, - $active-section-right-color: $black-60, - $active-section-right-color-css-var: --mdl-textColor-secondary, - $background-color: transparent, - $background-color-css-var: --null, - $color: $md-gray-90, - $color-css-var: --mdl-textColor-primary, - $header-color: $md-gray-90, - $header-color-css-var: --mdl-textColor-primary, - $hover-color: $md-theme-70, - $hover-bgrd-color: transparent, - $hover-bgrd-color-css-var: --null, - $includeFocus: false, - $section-right-color: $black-60, - $section-right-color-css-var: --mdl-textColor-secondary, - $subheader-color: $md-gray-90, - $subheader-color-css-var: --mdl-textColor-primary, - ); - - &:before { - position: absolute; - width: 2px; - height: rem-calc(32); - content: ''; - box-shadow: -12px 0 0 0 $black-12; - } - - &:only-child { - &:before { - height: 100%; - } - } - - &:first-of-type:not(:only-child) { - &:before { - bottom: 0; - height: calc(100% - 16%); - } - } - - &:last-of-type:not(:only-child) { - &:before { - top: 0; - height: calc(100% - 16%); - } - } - - &:focus { - &:after { - position: absolute; - width: 2px; - height: calc(100% - 33%); - content: ''; - box-shadow: -12px 0 0 0 $md-theme-70; - } - } - - &:hover { - &:after { - position: absolute; - width: 2px; - height: calc(100% - 33%); - content: ''; - box-shadow: -12px 0 0 0 $md-theme-70; - } - } - - &:active, - &.active { - &:after { - position: absolute; - width: 2px; - height: calc(100% - 33%); - content: ''; - box-shadow: -12px 0 0 0 $md-theme-80; - } - } - } - } - } - } - } - } - - &--dark#{$parent} { - background-color: $md-gray-90; - - #{$parent} { - &-nav { - &__group { - &--primary { - .#{$list-item__class} { - @include list-item-color( - $active-bgrd-color: rgba(0, 115, 149, 0.56), - $active-color: $md-white-100, - $active-section-left-color: $md-white-100, - $active-section-right-color: $md-white-100, - $background-color: transparent, - $color: $md-white-100, - $focus-color: $md-white-100, - $header-color: $md-white-100, - $hover-color: $md-white-100, - $hover-bgrd-color: rgba(0, 115, 149, 0.4), - $includeFocus: false, - $section-left-color: $white, - $section-right-color: $white, - $subheader-color: $white - ); - } - - & #{$parent}-nav__group--secondary { - .#{$list-item__class} { - @include list-item-color( - $active-bgrd-color: rgba(0, 115, 149, 0.56), - $active-color: $md-white-100, - $active-section-left-color: $md-white-100, - $active-section-right-color: $md-white-100, - $background-color: transparent, - $color: $white-80, - $focus-color: $white-80, - $header-color: $white-80, - $hover-color: $white-80, - $hover-bgrd-color: rgba(0, 115, 149, 0.4), - $includeFocus: false, - $section-left-color: $white, - $section-right-color: $white, - $subheader-color: $white-80 - ); - } - - & #{$parent}-nav__group--tertiary { - .#{$list-item__class} { - @include list-item-color( - $active-bgrd-color: transparent, - $active-color: $md-theme-70, - $background-color: transparent, - $color: $white-80, - $focus-color: $md-theme-70, - $hover-color: $md-theme-70, - $hover-bgrd-color: transparent, - $includeFocus: false - ); - - &:before { - box-shadow: -12px 0 0 0 $white-12; - } - } - } - } - } - } - } - } - } - &--white#{$parent} { - background-color: $white; - #{$parent} { - &-nav { - &__group { - &--primary { - .#{$list-item__class} { - @include list-item-color( - $active-bgrd-color: transparent, - $active-color: $md-blue-50, - $active-section-left-color: $md-blue-50, - $active-section-right-color: $md-blue-50, - $background-color: transparent, - $color: $md-gray-70, - $focus-color: $md-blue-50, - $hover-color: $md-blue-50, - $hover-bgrd-color: $md-gray-10, - $includeFocus: false, - $section-left-color: $md-gray-70, - $section-right-color: $md-gray-70, - ); - } - - & #{$parent}-nav__group--secondary { - .#{$list-item__class} { - @include list-item-color( - $active-bgrd-color: transparent, - $active-color: $md-blue-50, - $active-section-left-color: $md-blue-50, - $active-section-right-color:$md-blue-50, - $background-color: transparent, - $color: $md-gray-70, - $focus-color: $md-blue-50, - $hover-color: $md-blue-50, - $hover-bgrd-color:$md-gray-10, - $includeFocus: false, - $section-left-color: $md-gray-70, - $section-right-color: $md-gray-70, - ); - } - - & #{$parent}-nav__group--tertiary { - .#{$list-item__class} { - @include list-item-color( - $active-bgrd-color: transparent, - $active-color: $md-blue-50, - $background-color: transparent, - $color: $md-gray-70, - $focus-color: $md-blue-50, - $hover-color:$md-blue-50, - $hover-bgrd-color: transparent, - $includeFocus: false - ); - - &:before { - box-shadow: -12px 0 0 0 $md-gray-10; - } - } - } - } - } - } - } - } - } - } -} diff --git a/scss/components/slider/examples/cross.html b/scss/components/slider/examples/cross.html deleted file mode 100644 index c81380b876..0000000000 --- a/scss/components/slider/examples/cross.html +++ /dev/null @@ -1,14 +0,0 @@ -
- - -
-
-
- 0 - 100 - 200 - 300 - 400 - 500 -
-
diff --git a/scss/components/slider/examples/default.html b/scss/components/slider/examples/default.html deleted file mode 100644 index b1edd09a6e..0000000000 --- a/scss/components/slider/examples/default.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - -
-
- 0 - 100 - 200 - 300 - 400 - 500 -
-
diff --git a/scss/components/slider/examples/step.html b/scss/components/slider/examples/step.html deleted file mode 100644 index 90648fb1f0..0000000000 --- a/scss/components/slider/examples/step.html +++ /dev/null @@ -1,14 +0,0 @@ -
- - -
-
-
- 0 - 100 - 200 - 300 - 400 - 500 -
-
diff --git a/scss/components/slider/examples/two-handles.html b/scss/components/slider/examples/two-handles.html deleted file mode 100644 index f430edcceb..0000000000 --- a/scss/components/slider/examples/two-handles.html +++ /dev/null @@ -1,14 +0,0 @@ -
- - -
-
-
- 0 - 100 - 200 - 300 - 400 - 500 -
-
diff --git a/scss/components/slider/module.scss b/scss/components/slider/module.scss deleted file mode 100644 index b311478190..0000000000 --- a/scss/components/slider/module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../tools/functions/core"; -@import "../../tools/mixins/core"; - -// Icons - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../settings/core.scss"; -@import "../../settings/focus.scss"; -@import "../../settings/media.scss"; -@import "../../typography/settings.scss"; -@import "../slider/settings.scss"; - -// Tools -@import "../../tools/mixins/baseline"; -@import "../../tools/mixins/focus"; -@import "../../typography/mixins"; - -@import "../../typography/placeholders"; - -// Typography -@include brand-font-face-light; -@include brand-font-face-regular; - -// Component Specific -@import 'slider'; diff --git a/scss/components/slider/settings.scss b/scss/components/slider/settings.scss deleted file mode 100644 index 1d4fada5bc..0000000000 --- a/scss/components/slider/settings.scss +++ /dev/null @@ -1,20 +0,0 @@ -$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; diff --git a/scss/components/slider/slider.scss b/scss/components/slider/slider.scss deleted file mode 100644 index 0c5e0f9e3e..0000000000 --- a/scss/components/slider/slider.scss +++ /dev/null @@ -1,127 +0,0 @@ -/** @component slider */ - -@include exports('md-slider') { - #{$slider__class}, - .#{$slider__class} { - position: relative; - display: inline-block; - width: 100%; - height: 2px; - margin: 30px 0 15px; - vertical-align: middle; - background-color: inherit; - - span { - position: absolute; - display: inline-block; - white-space: nowrap; - - &.#{$slider__class}__bar { - z-index: 0; - width: 100%; - height: 100%; - background-color: $slider-bar__background-color; - border-radius: 2px; - - .#{$dark-class} & { - background-color: $slider-bar__background-color--dark; - } - } - - &.#{$slider__class}__selection { - z-index: 1; - height: 100%; - background-color: $slider-selection__background-color; - } - - &.#{$slider__class}__selection--red { - background-color: $slider-selection__background-color--red; - } - - &.#{$slider__class}__selection--blue { - background-color: $slider-selection__background-color--green; - } - - &.#{$prefix}-slider__selection--yellow { - background-color: $slider-selection__background-color--yellow; - } - - &.#{$slider__class}__hashlabel { - top: 15px; - display: inline-block; - line-height: 12px; - color: $slider-hashlabel__color; - - .#{$dark-class} & { - color: $slider-hashlabel__color--dark; - } - } - } - - .#{$slider__class}__pointer { - position: absolute; - top: -10px; - z-index: 2; - display: inline-block; - width: 20px; - height: 20px; - margin-left: -10px; - white-space: nowrap; - cursor: pointer; - background-color: $slider-pointer__background-color; - border-radius: 50%; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32); - - &:hover { - background-color: $slider-pointer__background-color--hover; - } - - &:focus { - background-color: $slider-pointer__background-color; - - @include focus-styles; - } - - .#{$dark-class} & { - &:focus { - background-color: $slider-pointer__background-color--focus--dark; - - @include focus-styles; - } - } - } - } - - .#{$slider__class}--disabled { - span { - &.#{$slider__class}__selection { - background-color: $slider-selection__background-color--disabled; - - .#{$dark-class} & { - background-color: $slider-selection__background-color--disabled--dark; - } - } - } - - .#{$slider__class}__pointer { - cursor: not-allowed; - background-color: $slider-pointer__background-color--disabled; - - &:hover, - &:focus { - background-color: $slider-pointer__background-color--disabled; - border: none; - } - - .#{$dark-class} & { - background-color: $slider-pointer__background-color--disabled--dark; - - &:hover, - &:focus { - background-color: $slider-pointer__background-color--disabled--dark; - border: none; - } - } - } - } -} diff --git a/scss/components/social-list/examples/default.html b/scss/components/social-list/examples/default.html deleted file mode 100644 index c0d9403f35..0000000000 --- a/scss/components/social-list/examples/default.html +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/scss/components/social-list/module.scss b/scss/components/social-list/module.scss deleted file mode 100644 index 8a06bc8aa5..0000000000 --- a/scss/components/social-list/module.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import '../../tools/functions/core'; - -@import 'social-list'; diff --git a/scss/components/social-list/social-list.scss b/scss/components/social-list/social-list.scss deleted file mode 100644 index fd6eb74b5e..0000000000 --- a/scss/components/social-list/social-list.scss +++ /dev/null @@ -1,13 +0,0 @@ -/** @component social-list */ - -@include exports('md-social-list') { - .social-list { - justify-content: flex-start; - - .md-list-item { - flex: 0 1 auto; - width: auto; - margin: 0 rem-calc(8); - } - } -} diff --git a/scss/components/space-list/examples/default.html b/scss/components/space-list/examples/default.html deleted file mode 100644 index fa92dbe6a3..0000000000 --- a/scss/components/space-list/examples/default.html +++ /dev/null @@ -1,410 +0,0 @@ -
-
-
-
-
- -
-
-
-
Overview Item
-
-
-
-
-
-
-
N
-
-
-
Header Only
-
-
-
-
-
-
-
N
-
-
-
Bold Unread
-
-
-
- -
-
-
-
-
N
-
-
-
Bold Mentioned
-
-
-
- -
-
-
-
-
N
-
-
-
isAlertOn
-
-
-
- -
-
-
-
-
N
-
-
-
isMuted
-
-
-
- -
-
-
-
-
N
-
-
-
Disabled
-
subheader
-
-
-
-
-
-
N
-
-
-
Subheader as Node
-
Marketing
-
-
-
-
-
List Header-Type(space)
-
More
-
-
-
-
N
-
-
-
- Header with SearchTerm -
-
-
-
-
-
-
-
N
-
-
-
- Both Headers w/ SearchTerm -
-
Searchable subheader
-
-
-
-
-
-
N
-
-
-
- Subheader(node)-searchTerm -
-
Searching
-
-
-
-
-
-
N
-
-
-
- Type(search)16:00 -
-
-
- HighlightColor changes - search color -
-
-
-
-
-
-
N
-
-
-
- Type(filter)12/03/2018 -
-
-
headerSecondary=string
-
-
-
-
-
-
N
-
-
-
- Type(filter-search)12/03/2018 -
-
-
- For search after a (filter) -
-
-
-
-
-
-
-
Type(filter-summary) (8)
-
-
-
-
-
-
N
-
-
-
- Type(flag)-attachments12/03/2018 -
-
-
-
-
- resultRight=node, attachments=[node] -
-
- -
-
-
- Ideas.pdf -
-
-
-
-
-
-
-
N
-
-
-
- Type(flag)08/03/2018 -
-
-
-
-
header&subheader=node
-
- -
-
-
-
-
-
-
-
People
-
-
-
diff --git a/scss/components/space-list/examples/space-list-meeting.html b/scss/components/space-list/examples/space-list-meeting.html deleted file mode 100644 index 83fdaea33a..0000000000 --- a/scss/components/space-list/examples/space-list-meeting.html +++ /dev/null @@ -1,154 +0,0 @@ -
-
-
-
-
- AP -
-
-
-
Attendees Prop
-
must be very long long long long long message message
-
-
- - 14 - - - - -
-
-
-
-
- i -
-
-
-
isBold(true)
-
subheader
-
-
-
-
-
-
- M -
-
-
-
MeetingType(group)
-
subheader
-
-
- -
-
-
-
-
- # -
-
-
-
MeetingType(number)
-
subheader
-
-
- -
-
-
-
-
- - - -
-
-
-
MeetingType(device)
-
-
-
- - 3 - - - - -
-
-
-
-
- - - -
-
-
-
ChildrenLeft Prop
-
-
-
- - 3 - - - - -
-
-
-
diff --git a/scss/components/space-list/module.scss b/scss/components/space-list/module.scss deleted file mode 100644 index 65c939ba96..0000000000 --- a/scss/components/space-list/module.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import '../../tools/functions/core'; - -@import '~@momentum-ui/icons/scss/variables'; -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import '../../typography/settings'; -@import '../button/settings'; -@import '../avatar/settings'; -@import '../list-item/settings'; -@import '../icon/settings'; - -@import '../../tools/mixins/core'; -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../avatar/mixins'; -@import '../button/mixins'; -@import '../list-item/mixins'; - -// Typography -@import "../../typography/mixins"; - -// Typography -@include brand-font-face-regular; -@include brand-font-face-bold; - -@import 'space-list-item'; diff --git a/scss/components/space-list/space-list-item.scss b/scss/components/space-list/space-list-item.scss deleted file mode 100644 index b895b62edf..0000000000 --- a/scss/components/space-list/space-list-item.scss +++ /dev/null @@ -1,425 +0,0 @@ -/** @component list-item--space */ - -@include exports('md-list-item--space') { - .#{$list-item__class} { - &--space { - border-radius: 100vh; - .#{$prefix}--compact & { - @include list-item-size( - $padding: ( - 0 rem-calc(1) 0 rem-calc(18), - ), - $height: rem-calc(36), - $avatar-size: rem-calc(28), - $avatar-font-size: rem-calc(14) - ); - - .#{$list-item__class}__header { - width: auto; - font-size: rem-calc(14); - line-height: rem-calc(22); - flex-shrink: 0; - } - - .#{$list-item__class}__center { - justify-content: flex-start; - } - - .#{$list-item__class}__subheader { - width: auto; - padding-left: rem-calc(7); - font-size: rem-calc(14); - line-height: rem-calc(22); - flex-grow: 1; - } - - .#{$list-item__class}__left { - padding-right: rem-calc(2); - } - - .#{$list-item__class}__right { - min-width: rem-calc(12); - margin: 0 rem-calc(10) 0 rem-calc(12); - } - - > [class$='__center'] { - flex-flow: row nowrap; - align-items: center; - } - } - - @include list-item-size( - $padding: $list-item--space__padding, - $height: $list-item--large__height, - $section-margin: $list-item--space__section-margin-side, - $avatar-size: $list-item--space__avatar__dimension, - $avatar-font-size: $list-item--space__avatar__font-size - ); - @include list-item-color( - $background-color: --mds-color-theme-background-primary-ghost, - $background-color-css-var: --null, - $color: $list-item--space__color, - $color-css-var: --mds-color-theme-text-primary-normal, - $hover-bgrd-color: $list-item--space__background--hover, - $hover-bgrd-color-css-var: --mds-color-theme-background-primary-hover, - $active-bgrd-color: $list-item--space__background--pressed, - $active-bgrd-color-css-var: --mds-color-theme-background-primary-active, - $header-color: $list-item--space__color--header, - $subheader-color: $list-item--space__color--header, - $subheader-color-css-var: --mds-color-theme-text-secondary-normal, - $focus-color: $list-item__color--dark, - $focus-color-css-var: --mds-color-theme-text-primary-normal, - ); - @include list-item--contrast( - $color--contrast: $list-item__color--dark--contrast, - $color--active--contrast: $list-item__color--dark--active--contrast, - $subheader-color--contrast: $list-item__color--subheader--dark--contrast, - $background-color--contrast: $list-item__background--dark--contrast, - $background-color--hover--contrast: - $list-item__background--hover--dark--contrast, - $background-color--active--contrast: - $list-item__background--active--dark--contrast - ); - - &-filter-summary { - height: $list-item--space-overview__height; - padding: $list-item--space-overview__padding; - - > [class$='__left'] { - fill: var(--mds-color-theme-text-primary-normal); - } - - [class*='__header'] { - color: $list-item--space__color; - } - } - - &-search, - &-filter, - &-flag, - &-filter-search { - height: auto; - max-height: $list-item--search__max-height; - min-height: $list-item--search__min-height; - padding: $list-item__search__padding; - justify-content: flex-start; - align-items: flex-start; - - > [class$='__left'] { - height: 100%; - padding-top: rem-calc(3); - } - - > [class$='__center'] { - height: auto; - justify-content: flex-start; - - > [class*='__header'] { - @include flex($jc: space-between); - - flex: 1 0 auto; - - > [class$='-main'] { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1 1 100%; - } - - > [class$='-secondary'] { - font-family: $brand-font-regular; - font-size: rem-calc(12); - line-height: rem-calc(18); - color: $list-item__color--subheader--dark; - flex: 1 0 auto; - } - } - } - - [class$='__result-container'] { - @include flex; - - width: 100%; - - [class$='__attachment'] { - font-size: rem-calc(14); - line-height: rem-calc(22); - } - - [class$='__attachment'] { - width: 100%; - - [class$='__attachment--top'] { - @include flex($jc: flex-start); - - [class$='-left'] { - height: rem-calc(22); - overflow: hidden; - font: inherit; - color: $list-item--space__color--header; - text-overflow: ellipsis; - white-space: nowrap; - flex: 1 1 100%; - } - - [class$='-right'] { - padding-left: rem-calc(15); - fill: $md-white-100; - } - } - - [class$='__attachment--bottom'] { - height: rem-calc(22); - overflow: hidden; - font-family: $brand-font-bold; - font-weight: 750; - text-overflow: ellipsis; - white-space: nowrap; - fill: $md-white-100; - } - } - } - - [class$='__result'] { - height: auto; - max-height: rem-calc(44); - min-height: rem-calc(22); - font-size: rem-calc(14); - line-height: rem-calc(22); - color: $list-item--space__color--header; - white-space: initial; - flex: 1 1 100%; - } - - [class$='--highlight'] { - color: $md-mint-20; - } - } - - &-filter:not(.md-list-item--unread), - &-filter-search:not(.md-list-item--unread), - &-flag:not(.md-list-item--unread) { - &:active, - &.active { - > [class$='__center'] { - [class$='__header'], - [class$='__header--overview'] { - color: $list-item--space__color--header; - } - } - } - - > [class$='__center'] { - [class$='__header'], - [class$='__header--overview'] { - color: $list-item--space__color--header; - } - } - } - - &-filter-search { - [class$='__result'] { - height: rem-calc(22); - max-height: rem-calc(22); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - [class$='__header--overview'] { - color: $list-item--space__color; - - > [class$='--highlight'] { - font-family: $brand-font-bold; - } - } - - &.#{$list-item__class}--unread { - .#{$list-item__class}__header { - font-family: $brand-font-bold; - color: $list-item--space__color; - } - } - - &:active, - &.active { - color: $list-item--space__color; - - .#{$list-item__class}__header { - color: $list-item--space__color; - - .#{$contrast-class} & { - color: $list-item__color--dark--active--contrast; - } - } - } - - &-meeting { - padding: $list-item--space-meeting__padding; - - .#{$button__class} { - @include button-color-focus($color: $focus__color--dark); - } - - &--attendees { - @include flex; - - height: 100%; - padding: 0 rem-calc(6) 0 rem-calc(10); - font-size: rem-calc(14); - line-height: rem-calc(12); - color: $list-item--space__color--header; - fill: $list-item--space__color--header; - - &:focus { - box-shadow: none; - } - - .#{$icon__class} { - margin-left: rem-calc(2); - } - } - - .#{$prefix}-event-overlay__children { - width: 240px; - max-height: 308px; - overflow: auto; - cursor: default; - - .#{$list-item__class} { - @include list-item-color( - $background-color: $list-item__background, - $background-color-css-var: --null, - $focus-color: transparent, - $focus-color-css-var: --null, - $hover-bgrd-color: $list-item__background, - $hover-bgrd-color-css-var: --null, - $active-bgrd-color: $list-item__background, - $active-bgrd-color-css-var: --null, - ); - } - } - - .#{$button__class} { - height: rem-calc(28); - min-width: 0; - padding: 0 rem-calc(14); - font-size: rem-calc(14); - } - } - - &-light { - @include list-item-color( - $background-color: $md-gray-05, - $background-color-css-var: --mds-color-theme-background-primary-ghost, - $color: $md-gray-70, - $color-css-var: --mds-color-theme-text-primary-normal, - $active-color: $md-gray-100, - $active-color-css-var: --mds-color-theme-text-primary-normal, - $hover-bgrd-color: $md-gray-10, - $hover-bgrd-color-css-var: --mds-color-theme-background-primary-hover, - $active-bgrd-color: $md-gray-10, - $active-bgrd-color-css-var: --mds-color-theme-background-primary-active, - $hover-header-color: $md-gray-100, - $hover-header-color-css-var: --mds-color-theme-text-primary-normal, - $hover-subheader-color: $md-gray-100, - $hover-subheader-color-css-var: --mds-color-theme-text-secondary-normal, - $header-color: $md-gray-70, - $header-color-css-var: --mds-color-theme-text-secondary-normal, - $subheader-color: $md-gray-70, - $subheader-color-css-var: --mds-color-theme-text-secondary-normal, - $focus-color: $md-gray-10, - $focus-color-css-var: --mds-color-theme-text-primary-normal, - ); - - .md-icon { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - - &.#{$list-item__class}--space-filter-summary { - [class*='__header'] { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - } - - &.#{$list-item__class}--space-search, - &.#{$list-item__class}--space-filter, - &.#{$list-item__class}--space-flag, - &.#{$list-item__class}--space-filter-search { - > [class$='__center'] { - > [class*='__header'] { - > [class$='-secondary'] { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - } - } - - [class$='__result-container'] { - [class$='__attachment'] { - [class$='__attachment--top'] { - [class$='-left'] { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - } - } - } - - [class*='__result'] { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - } - - &.#{$list-item__class}--space-filter:not(.md-list-item--unread), - &.#{$list-item__class}--space-filter-search:not(.md-list-item--unread), - &.#{$list-item__class}--space-flag:not(.md-list-item--unread) { - > [class$='__center'] { - [class$='__header'], - [class$='__header--overview'] { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - } - } - - [class$='__header--overview'] { - color: $md-gray-70; - color: var(--mdl-textColor-secondary, $md-gray-70); - } - - &.#{$list-item__class}--unread { - .#{$list-item__class}__header { - color: $md-gray-100; - color: var(--mdl-textColor-primary, $md-gray-100); - } - } - - &.#{$list-item__class}--space-meeting { - [class$='--attendees'] { - color: $md-gray-70; - color: var(--mdl-textColor-primary, $md-gray-70); - fill: $md-gray-70; - fill: var(--mdl-textColor-primary, $md-gray-70); - } - - .#{$button__class} { - color: $md-gray-05; - color: var(--mdl-button-primary-text-color, $md-gray-05); - background-color: $md-green-60; - background-color: var(--mdl-button-join-bg-color, $md-green-60); - - &:hover { - background-color: $md-green-70; - background-color: var(--mdl-button-join-hover-bg-color, $md-green-70); - } - } - } - } - } - } -} diff --git a/scss/components/stepper/module.scss b/scss/components/stepper/module.scss deleted file mode 100644 index 25b45b40ee..0000000000 --- a/scss/components/stepper/module.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Component Specific -@import 'stepper'; diff --git a/scss/components/stepper/stepper.scss b/scss/components/stepper/stepper.scss deleted file mode 100644 index 5e908ed7ce..0000000000 --- a/scss/components/stepper/stepper.scss +++ /dev/null @@ -1,139 +0,0 @@ -/** @component stepper */ - -@include exports('md-stepper') { - .md-stepper { - &-container { - width: 100%; - text-align: center; - padding: 2%; - - div { - display: inline-block; - vertical-align: top; - text-align: center; - margin: 2%; - } - } - - &-bubble { - border-radius: 50%; - display: inline-block; - background: $md-white; - cursor: pointer; - height: 1.25rem; - width: 1.25rem; - } - - &-svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - } - - &-line { - stroke-width: 0.125rem; - stroke: $md-blue-50; - } - - &-line-disabled { - stroke-width: 0.125rem; - stroke: $md-gray-30; - } - - .md-step { - &-incomplete { - border: 0.125rem solid $md-blue-50; - - &:hover { - background: $md-blue-10; - border: 0.125rem solid $md-blue-60; - } - - &:active { - background: $md-blue-20; - border: 0.125rem solid $md-blue-70; - } - - &.active { - background: $md-blue-20; - border: 0.125rem solid $md-blue-50; - } - } - - &-complete { - background: $md-blue-50; - - &:hover { - background: $md-blue-60; - } - - &:active { - background: $md-blue-70; - } - - &.active { - background: $md-blue-50; - } - } - - &-error { - border: 0.125rem solid $md-red-70; - background: $md-white; - - &:hover { - border: 0.125rem solid $md-red-70; - background: $md-white; - } - - &:active { - border: 0.125rem solid $md-red-70; - background: $md-white; - } - - &.active { - border: 0.125rem solid $md-red-70; - background: $md-white; - } - } - - &-disabled { - border: 0.125rem solid $md-gray-40; - background: $md-white; - pointer-events: none; - cursor: default; - - &:hover { - border: 0.125rem solid $md-gray-40; - background: $md-white; - } - - &:active { - border: 0.125rem solid $md-gray-40; - background: $md-white; - } - - &.active { - border: 0.125rem solid $md-gray-40; - background: $md-white; - } - } - - &-title { - cursor: pointer; - font-family: 'Inter Light'; - font-style: normal; - font-weight: 550; - font-size: 0.875rem; - } - - &-title-disabled { - cursor: default; - } - - } - - } -} diff --git a/scss/components/tabs/examples/default.html b/scss/components/tabs/examples/default.html deleted file mode 100644 index 36c2a036c8..0000000000 --- a/scss/components/tabs/examples/default.html +++ /dev/null @@ -1,35 +0,0 @@ -
-
- test -
-
- -
-
-
-
Pane A1
-
-
-
Pane A2
-
-
-
Pane A3
-
-
-
diff --git a/scss/components/tabs/examples/justified.html b/scss/components/tabs/examples/justified.html deleted file mode 100644 index fa406b607a..0000000000 --- a/scss/components/tabs/examples/justified.html +++ /dev/null @@ -1,24 +0,0 @@ -
- -
-
-
Testing 1
-
-
-
Testing 2
-
-
-
Testing 3
-
-
-
diff --git a/scss/components/tabs/examples/pills.html b/scss/components/tabs/examples/pills.html deleted file mode 100644 index ff4c4cce4a..0000000000 --- a/scss/components/tabs/examples/pills.html +++ /dev/null @@ -1,24 +0,0 @@ -
- -
-
-
Testing 1
-
-
-
Testing 2
-
-
-
Testing 3
-
-
-
diff --git a/scss/components/tabs/examples/vertical.html b/scss/components/tabs/examples/vertical.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/tabs/module.scss b/scss/components/tabs/module.scss deleted file mode 100644 index 99df337ca5..0000000000 --- a/scss/components/tabs/module.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Icons - -// Settings -@import '../../colors/settings-base.scss'; -@import "../../colors/settings-transparencies.scss"; -@import '../../settings/core.scss'; -@import '../../settings/focus.scss'; -@import '../../settings/media.scss'; -@import '../../typography/settings.scss'; - -// Tools -@import "../../tools/mixins/border-radius"; -@import '../../tools/mixins/focus'; -@import "../../tools/mixins/nav-divider"; -@import "../../typography/mixins"; - -// Generic -@import "../../generic/normalize"; -@import "../../generic/global"; - -// Elements -@import '../../elements/elements'; - -// Typography -@include brand-font-face-regular; - -// Component Specific -@import 'settings.scss'; -@import 'tabs'; diff --git a/scss/components/tabs/settings.scss b/scss/components/tabs/settings.scss deleted file mode 100644 index 0fb293e34f..0000000000 --- a/scss/components/tabs/settings.scss +++ /dev/null @@ -1,15 +0,0 @@ -$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; diff --git a/scss/components/tabs/tabs.scss b/scss/components/tabs/tabs.scss deleted file mode 100644 index 9718689596..0000000000 --- a/scss/components/tabs/tabs.scss +++ /dev/null @@ -1,595 +0,0 @@ -/** @component tabs */ - -@include exports('md-tab') { - .#{$prefix}-tab__list { - padding-left: 0; - margin-bottom: 0; - margin-left: 0; - font-size: rem-calc(14); - list-style: none; - - @include clearfix; - - .#{$prefix}-tab__item { - position: relative; - display: block; - - >a { - position: relative; - display: block; - padding: $tab--link__padding; - - &:hover, - &:focus { - text-decoration: none; - background-color: $tab--link-hover__bg; - } - } - - &.disabled>a { - color: $tab--disabled-link__color; - - &:hover, - &:focus { - color: $tab--disabled-link-hover__color; - text-decoration: none; - cursor: $cursor-disabled; - background-color: transparent; - } - } - } - - .open>a { - - &, - &:hover, - &:focus { - background-color: $tab--link-hover__bg; - border-color: $link-color; - } - } - - .nav-divider { - @include nav-divider; - } - - >.#{$prefix}-tab__item>a>img { - max-width: none; - } - } - - .#{$prefix}-tab--pills { - .#{$prefix}-tab__list { - display: flex; - } - - .#{$prefix}-tab__item { - min-width: 200px; - text-align: center; - - >a { - padding: $tab-pills__padding; - font-size: $tab-pills__font-size; - line-height: 1.5; - color: $tab-pills__color; - background: $tab-pills__background; - border: $tab-pills__border; - background-clip: padding-box; - - &:hover { - background: $tab-pills--hover__background; - } - } - - &.active { - - >a, - a:hover, - a:focus { - background: $tab-pills--active__background; - } - } - - &.disabled { - pointer-events: none; - - >a, - &:hover, - &:focus { - background: $tab-pills__background; - } - } - - &:first-child { - >a { - @include border-left-radius(20px); - } - } - - &:last-child { - >a { - @include border-right-radius(20px); - } - } - } - - .md-tab__list { - md-tab:first-child { - >li>a { - @include border-right-radius(0px); - } - } - - md-tab:last-child { - >li>a { - @include border-left-radius(0px); - } - } - - md-tab:not(:first-child):not(:last-child) { - >li>a { - border-radius: 0px; - } - } - } - } - - .#{$prefix}-tab--justified { - >.#{$prefix}-tab__list { - display: flex; - width: 100%; - } - - .#{$prefix}-tab__item { - +.#{$prefix}-tab__item { - margin-left: 0; - } - } - - &.#{$prefix}-tab--pills, - &.#{$prefix}-tab--tabs { - .#{$prefix}-tab__item { - flex-grow: 1; - } - } - - .dropdown .dropdown-menu { - top: auto; - left: auto; - } - } - - .#{$prefix}-tab__content { - width: 100%; - background-color: $md-white-100; - border: 1px solid $md-gray-10; - border-top: none; - } - - .#{$prefix}-tab__pane { - display: none; - - &.active { - display: block; - } - } - - .#{$prefix}-tab--tabs { - >.#{$prefix}-tab__list { - margin-bottom: 17px; - border-bottom: 0px; - } - - .#{$prefix}-tab__item { - float: left; - - >a { - padding-right: 30px; - padding-bottom: 9.5px; - padding-left: 0; - margin-right: 12px; - color: $md-gray-90; - text-align: left; - cursor: pointer; - border: 0px; - border-bottom: 1px solid $md-gray-30; - border-radius: 0px; - - &:hover { - padding-bottom: 8px; - background-color: transparent; - border-bottom: $tab-tabs--hover__border; - transition: border-bottom-color 0.5s ease; - } - - &:focus { - box-shadow: none; - } - } - - &.active>a { - - &, - &:hover, - &:focus { - padding-bottom: 8px; - color: $tab-tabs--active__color; - cursor: default; - background-color: transparent; - border: 0px; - border-bottom: $tab-tabs--active__border; - transition: border-bottom-color 0.5s ease, color 0.5s ease; - } - } - } - - .center & { - display: flex; - justify-content: center; - - .#{$prefix}-tab__item>a { - padding-right: 15px; - padding-left: 15px; - } - } - - &.#{$prefix}-tab--justified>.#{$prefix}-tab__list { - @extend .#{$prefix}-tab--justified; - @extend .#{$prefix}-tab--tabs; - } - - &.#{$prefix}-tab--stacked { - .#{$prefix}-tab__item { - a { - padding-left: 0; - - &:hover { - background-color: transparent; - } - } - - &:not(.active) a:hover { - padding-bottom: 6px; - } - - &.active a { - padding-bottom: 6px; - } - } - } - } - - .#{$prefix}-tab--tabs, - .#{$prefix}-tab--subnav { - .#{$prefix}-tab__item { - padding-left: 8px; - - a { - padding-right: 0px; - padding-left: 0; - margin-right: 12px; - font-size: $tab-pills__font-size; - color: $md-gray-90; - text-align: left; - border-bottom: 1px solid $md-gray-30; - border-radius: 0px; - - &:hover { - color: $md-gray-90; - background-color: transparent; - border-bottom: $tab-tabs--hover__border; - } - } - } - - >.active>a, - >.active>a:hover, - >.active>a:focus { - color: $tab-tabs--active__color; - border: 0px; - border-bottom: $tab-tabs--active__border; - } - - @media (min-width: $screen-sm-min) { - .#{$prefix}-tab__item>a { - border-bottom: 1px solid $md-gray-30; - border-radius: 0px; - } - - >.active>a, - >.active>a:hover, - >.active>a:focus { - border-bottom: $tab-tabs--active__border; - } - } - } - - .#{$prefix}-tab--subnav { - padding-top: 28px; - - .#{$prefix}-tab__item:first-of-type { - padding-left: 0px; - } - } - - .#{$prefix}-tab--stacked { - .#{$prefix}-tab__item { - float: none; - - &.current { - color: $md-theme-50; - - >a { - color: $md-theme-50; - border-bottom: 1px solid $md-theme-50; - } - } - - +.#{$prefix}-tab__item { - margin-left: 0px; - - .#{$prefix}-tab__item { - margin-left: 15px; - } - } - - >a { - padding: 8px 15px; - color: $md-gray-90; - background: none; - - &:hover { - background-color: $md-gray-30; - } - } - } - } - - .#{$prefix}-tab--tabs, - .#{$prefix}-tab--subnav { - border-bottom: 0; - - .md-tab__list { - position: relative; - top: 1px; - margin-bottom: 0; - } - - .#{$prefix}-tab__item>a { - border-radius: $global-radius; - } - - @media (min-width: $screen-sm-min) { - .#{$prefix}-tab__item>a { - border-radius: $global-radius $global-radius 0 0; - } - - >.active>a, - >.active>a:hover, - >.active>a:focus { - border-bottom-color: $tab-tabs--justified-active__border-color; - } - } - } - - .#{$prefix}-tab--tabs .dropdown-menu { - margin-top: -1px; - - @include border-top-radius(0); - } - - .#{$prefix}-tab--cstabs { - >.#{$prefix}-tab__list { - display: flex; - - >.#{$prefix}-tab__item { - >a { - display: block; - height: 59px; - padding-top: 18px; - padding-right: 18px; - padding-left: 18px; - font-family: $brand-font-light; - font-size: 18px; - color: $md-gray-50; - text-align: center; - text-decoration: none; - background-color: $md-white-100; - border: 1px solid $md-gray-10; - opacity: 0.7; - - &:hover { - color: $md-black-100; - cursor: pointer; - background-color: $md-white-100; - opacity: 1; - } - - &:focus { - outline: none; - box-shadow: none; - } - - >md-tab-heading>div, - >md-tab-heading>div { - font-family: $brand-font-extra-light; - font-size: 30px; - color: $md-theme-50; - } - } - - &:first-of-type { - >a { - margin-left: 0px; - } - } - - &:last-of-type { - >a { - margin-right: 0px; - } - } - - &.active { - >a { - height: 64px; - margin-bottom: 0px; - color: $md-black-100; - background-color: $md-white-100; - border: 1px solid $md-gray-10; - border-bottom: none; - opacity: 1; - - &:hover { - background-color: $md-white-100; - border: 1px solid $md-gray-10; - border-bottom: none; - } - } - } - } - } - - &.#{$prefix}-tab--justified { - .#{$prefix}-tab__item { - flex-grow: 1; - } - } - - &.#{$prefix}-tab--largetabs { - .#{$prefix}-tab__item>a { - height: 87px; - padding-top: 10px; - font-size: 14px; - } - - .#{$prefix}-tab__item.active>a { - height: 88px; - } - } - } - - .#{$prefix}-tab--graytab { - &.#{$prefix}-tab--cstabs .#{$prefix}-tab__item>a { - border: 1px solid $md-gray-10; - opacity: 0.5; - - &:hover, - &:focus { - background-color: $md-gray-10; - } - } - - &.#{$prefix}-tab--cstabs .#{$prefix}-tab__item.active>a { - background-color: $md-gray-10; - - &:hover, - &:focus { - background-color: $md-gray-10; - } - } - - .#{$prefix}-tab__content { - background-color: $md-gray-10; - } - } - - .#{$prefix}-tab__item { - flex-grow: 1; - - &.#{$prefix}-type--pills { - min-width: 200px; - text-align: center; - - >a { - padding: $tab-pills__padding; - font-size: $tab-pills__font-size; - line-height: 1.5; - color: $tab-pills__color; - background: $tab-pills__background; - border: $tab-pills__border; - background-clip: padding-box; - - &:hover { - background: $tab-pills--hover__background; - } - } - - &.active { - - >a, - a:hover, - a:focus { - background: $tab-pills--active__background; - } - } - - &.disabled { - pointer-events: none; - - >a, - &:hover, - &:focus { - background: $tab-pills__background; - } - } - - &:first-child, - &.first { - >a { - @include border-left-radius(20px); - } - } - - &:last-child, - &.last { - >a { - @include border-right-radius(20px); - } - } - } - - &.#{$prefix}-type--tabs { - float: left; - - >a { - padding-right: 30px; - padding-bottom: 9.5px; - padding-left: 0; - margin-right: 12px; - color: $md-gray-90; - text-align: left; - cursor: pointer; - border: 0px; - border-bottom: 1px solid $md-gray-30; - border-radius: 0px; - - &:hover { - padding-bottom: 8px; - background-color: transparent; - border-bottom: $tab-tabs--hover__border; - transition: border-bottom-color 0.5s ease; - } - - &:focus { - box-shadow: none; - } - } - - &.active>a { - - &, - &:hover, - &:focus { - padding-bottom: 8px; - color: $tab-tabs--active__color; - cursor: default; - background-color: transparent; - border: 0px; - border-bottom: $tab-tabs--active__border; - transition: border-bottom-color 0.5s ease, color 0.5s ease; - } - } - } - } -} diff --git a/scss/components/time-picker/examples/24-hour.html b/scss/components/time-picker/examples/24-hour.html deleted file mode 100644 index fd42656e6f..0000000000 --- a/scss/components/time-picker/examples/24-hour.html +++ /dev/null @@ -1,27 +0,0 @@ -
-
-
- -
-
-
-
-
-
-
- - - -
: -
- - - -
-
-
-
-
-
-
-
diff --git a/scss/components/time-picker/examples/30-minute-steps.html b/scss/components/time-picker/examples/30-minute-steps.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/time-picker/examples/dark.html b/scss/components/time-picker/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/time-picker/examples/default.html b/scss/components/time-picker/examples/default.html deleted file mode 100644 index a23e2c0ce5..0000000000 --- a/scss/components/time-picker/examples/default.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
-
- -
-
-
-
-
-
-
- - - -
: -
- - - -
-
- - - -
-
-
-
-
-
-
-
diff --git a/scss/components/time-picker/examples/validation.html b/scss/components/time-picker/examples/validation.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/time-picker/module.scss b/scss/components/time-picker/module.scss deleted file mode 100644 index dacd231f39..0000000000 --- a/scss/components/time-picker/module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import "../../tools/functions/core"; -@import "../../tools/mixins/core"; - -// Settings -@import "../../colors/settings-base.scss"; -@import "../../colors/settings-transparencies.scss"; -@import "../../settings/core.scss"; -@import "../../settings/focus.scss"; -@import "../../settings/media.scss"; -@import "../../settings/z-index.scss"; -@import "../../settings/dropdown.scss"; -@import "../../typography/settings.scss"; -@import "../input/settings.scss"; -@import "../checkbox/settings.scss"; -@import "../forms/settings.scss"; -@import "../list-item/settings.scss"; -@import "../overlay/settings.scss"; -@import "../radio/settings.scss"; -@import "../toggle-switch/settings.scss"; - -// Tools -@import "../../tools/mixins/border-radius"; -@import "../../tools/mixins/focus"; -@import "../../tools/mixins/spacing"; -@import "../../typography/mixins"; -@import "../../components/checkbox/mixins"; -@import "../../components/input/mixins"; -@import "../../components/radio/mixins"; -@import "../../components/toggle-switch/mixins"; - - -// Generic -@import "../../generic/normalize"; -@import "../../generic/global"; - -// Elements -@import "../../elements/elements"; - -// Components -@import "../../components/overlay/event-overlay"; - -// Component Specific -@import 'time-picker'; diff --git a/scss/components/time-picker/time-picker.scss b/scss/components/time-picker/time-picker.scss deleted file mode 100644 index b702657fb3..0000000000 --- a/scss/components/time-picker/time-picker.scss +++ /dev/null @@ -1,87 +0,0 @@ -/** @component time-picker */ - -@include exports('md-time-picker') { - .md-timepicker { - &-container { - display: inline-block; - } - - &_wrapper { - display: inline-block; - } - - &__dropdown { - @include vr-spacing(ph, 0.5, $border: 1px); - @include vr-spacing(pv, 0.25); - - z-index: 89; - background: $f-dropdown-bg; - border: $f-dropdown-border-style $f-dropdown-border-width - $f-dropdown-border-color; - border-color: $md-gray-40; - - @include radius($f-dropdown-radius); - - &-container { - position: relative; - } - - i.icon, - input[type='text'] { - display: inline-block; - width: 100%; - text-align: center; - } - - input[type='text'] { - &:focus { - padding: 3px; - border: none; - } - } - - .icon { - font-size: 1.5rem; - - &:hover { - color: $md-theme-50; - cursor: pointer; - } - } - - .inline-flex { - display: inline-flex; - align-items: center; - - input { - margin: 0; - } - - div { - display: flex; - flex-flow: column; - - @include vr-spacing(ph, 0.5, $border: 1px); - - & > * { - display: inline-block; - width: 3rem; - } - } - - &:nth-child(odd) { - div { - & > i { - line-height: vr-adjust(36px); - } - } - } - } - - .md-input__messages { - @include vr-spacing(ph, 0.5); - @include vr-spacing(pb, 0.5); - } - } - } -} diff --git a/scss/components/toggle-switch/examples/dark.html b/scss/components/toggle-switch/examples/dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/toggle-switch/examples/default.html b/scss/components/toggle-switch/examples/default.html deleted file mode 100644 index 6d032abb5a..0000000000 --- a/scss/components/toggle-switch/examples/default.html +++ /dev/null @@ -1,14 +0,0 @@ -
- - -
diff --git a/scss/components/toggle-switch/examples/filled-dark.html b/scss/components/toggle-switch/examples/filled-dark.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/toggle-switch/examples/filled.html b/scss/components/toggle-switch/examples/filled.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/toggle-switch/mixins.scss b/scss/components/toggle-switch/mixins.scss deleted file mode 100644 index ba57daa8a2..0000000000 --- a/scss/components/toggle-switch/mixins.scss +++ /dev/null @@ -1,88 +0,0 @@ -@mixin toggle-switch-color( - $border-color: $form-control__background-border--focus, - $background-color: $form-control__background, - $background-color--hover: $form-control__background--hover, - $background-color--checked: $form-control__background--checked, - $background-color--checked-hover: $form-control__background--checked-hover, - $label-color: $form-control__label -) { - .#{$toggle-switch__class}__input { - + .#{$toggle-switch__class}__label { - .#{$toggle-switch__class}__label__container { - background-color: $background-color; - } - - .#{$toggle-switch__class}__label__text { - color: $label-color; - } - - &:hover, - &.hover { - > .#{$toggle-switch__class}__label__container { - background-color: $background-color--hover; - } - } - } - - &:focus, - &.focus { - + .#{$toggle-switch__class}__label { - > .#{$toggle-switch__class}__label__container { - @include focus-styles; - } - } - } - - // Checked - - &:checked, - &:indeterminate, - &.indeterminate { - + .#{$toggle-switch__class}__label { - > .#{$toggle-switch__class}__label__container { - background-color: $background-color--checked; - } - - &:hover, - &.hover { - > .#{$toggle-switch__class}__label__container { - background-color: $background-color--checked-hover; - } - } - } - } - - // Disabled Settings - - &:disabled, - &.disabled { - + .#{$toggle-switch__class}__label { - &:hover, - &.hover { - > .#{$toggle-switch__class}__label__container { - background-color: $background-color; - } - } - } - - //--> Disabled--Checked/Indeterminate - - &:checked, - &:indeterminate, - &.indeterminate { - + .#{$toggle-switch__class}__label { - > .#{$toggle-switch__class}__label__container { - background-color: $background-color--checked; - } - - &:hover, - &.hover { - > .#{$toggle-switch__class}__label__container { - background-color: $background-color--checked; - } - } - } - } - } - } -} diff --git a/scss/components/toggle-switch/module.scss b/scss/components/toggle-switch/module.scss deleted file mode 100644 index 1104f2b4a9..0000000000 --- a/scss/components/toggle-switch/module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/focus'; -@import '../forms/settings'; -@import '../../tools/mixins/focus'; - -@import 'settings'; - -@import 'mixins'; - -@import 'toggle-switch'; diff --git a/scss/components/toggle-switch/settings.scss b/scss/components/toggle-switch/settings.scss deleted file mode 100644 index 4ea97ebac8..0000000000 --- a/scss/components/toggle-switch/settings.scss +++ /dev/null @@ -1,6 +0,0 @@ -$toggle-switch__class: '#{$prefix}-toggle-switch'; - -$toggle-switch__size: 20px; -$toggle-switch__size--active: 24px; -$toggle-switch__width: 44px; -$toggle-switch__height: 24px; diff --git a/scss/components/toggle-switch/toggle-switch.scss b/scss/components/toggle-switch/toggle-switch.scss deleted file mode 100644 index da52361a14..0000000000 --- a/scss/components/toggle-switch/toggle-switch.scss +++ /dev/null @@ -1,88 +0,0 @@ -/** @component toggle-switch */ - -@include exports('md-toggle-switch') { - .#{$toggle-switch__class} { - @include toggle-switch-color; - - .#{$dark-class} & { - @include toggle-switch-color( - $border-color: $form-control__background-border--focus--dark, - $background-color: $form-control__background--dark, - $background-color--hover: $form-control__background--hover--dark, - $background-color--checked: $form-control__background--checked--dark, - $background-color--checked-hover: - $form-control__background--checked-hover--dark, - $label-color: $form-control__label--dark - ); - } - - > .#{$toggle-switch__class}__input { - position: absolute; - margin-left: -9999px; - opacity: 0; - - + .#{$toggle-switch__class}__label { - display: inline-flex; - - > .#{$toggle-switch__class}__label__container { - position: relative; - display: block; - width: $toggle-switch__width; - height: $toggle-switch__height; - margin-right: 0.75rem; - cursor: pointer; - border: none; - border-radius: $toggle-switch__height; - transition: background 350ms; - background-clip: padding-box; - - &:after { - position: absolute; - top: 2px; - bottom: 2px; - left: 2px; - width: $toggle-switch__size; - height: $toggle-switch__size; - background-color: $md-white-100; - border-radius: 100%; - content: ''; - box-shadow: 0 1px 2px 0 $black-32; - transition: 350ms; - } - } - - > .#{$toggle-switch__class}__text { - line-height: rem-calc($toggle-switch__height); - cursor: pointer; - } - } - - &:disabled, - &.disabled { - + .#{$toggle-switch__class}__label { - cursor: default; - opacity: $form-control__opacity--disabled; - - > .#{$toggle-switch__class}__label__container { - cursor: default; - } - - > .#{$toggle-switch__class}__label__text { - cursor: default; - } - } - } - - &:checked { - + .#{$toggle-switch__class}__label { - > .#{$toggle-switch__class}__label__container { - &:after { - left: calc(100% - 2px); - transform: translateX(-100%); - } - } - } - } - } - } -} diff --git a/scss/components/tooltip/examples/content.html b/scss/components/tooltip/examples/content.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/scss/components/tooltip/examples/default.html b/scss/components/tooltip/examples/default.html deleted file mode 100644 index 678d1f57b8..0000000000 --- a/scss/components/tooltip/examples/default.html +++ /dev/null @@ -1,29 +0,0 @@ -
-
- - -
-
-
- Hello! -
-
- -
-
- - - -
-
- - - -
-
diff --git a/scss/components/tooltip/examples/delay.html b/scss/components/tooltip/examples/delay.html deleted file mode 100644 index 079e88caaf..0000000000 --- a/scss/components/tooltip/examples/delay.html +++ /dev/null @@ -1,11 +0,0 @@ - - -
-
-
- Delayed! -
-
- diff --git a/scss/components/tooltip/examples/direction.html b/scss/components/tooltip/examples/direction.html deleted file mode 100644 index be2c454fe7..0000000000 --- a/scss/components/tooltip/examples/direction.html +++ /dev/null @@ -1,11 +0,0 @@ - - -
-
-
- Hello! -
-
- diff --git a/scss/components/tooltip/module.scss b/scss/components/tooltip/module.scss deleted file mode 100644 index 83113c8b9d..0000000000 --- a/scss/components/tooltip/module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/z-index'; -@import '../overlay/settings'; -@import 'settings'; - -@import '../../tools/mixins/core'; - -@import 'tooltip'; diff --git a/scss/components/tooltip/settings.scss b/scss/components/tooltip/settings.scss deleted file mode 100644 index ef1dce93c4..0000000000 --- a/scss/components/tooltip/settings.scss +++ /dev/null @@ -1,24 +0,0 @@ -$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; diff --git a/scss/components/tooltip/tooltip.scss b/scss/components/tooltip/tooltip.scss deleted file mode 100644 index 6679333024..0000000000 --- a/scss/components/tooltip/tooltip.scss +++ /dev/null @@ -1,72 +0,0 @@ -/** @component tooltip */ - -@include exports('md-tooltip') { - #{$tooltip__class}, - .#{$tooltip__class} { - &__text { - min-width: $tooltip__min-width; - max-width: $tooltip__max-width; - padding: $tooltip__padding; - font-size: $tooltip__font-size; - line-height: $tooltip__line-height; - color: $tooltip__color; - text-align: center; - white-space: pre-wrap; - word-break: break-word; - } - - .#{$prefix}-event-overlay__arrow::after { - display: none; - } - - & > .md-event-overlay__children { - background-color: $tooltip__background-color; - border: none; - box-shadow: none; - } - - &.#{$prefix}-event-overlay--top { - > .#{$prefix}-event-overlay__arrow { - margin-top: -$tooltip-arrow__height; - border-top: $tooltip-arrow__height solid $tooltip__background-color; - } - - > .#{$prefix}-event-overlay__children { - margin-top: -$tooltip-arrow__height; - } - } - - &.#{$prefix}-event-overlay--left { - > .#{$prefix}-event-overlay__arrow { - margin-left: -$tooltip-arrow__height; - border-left: $tooltip-arrow__height solid $tooltip__background-color; - } - - > .#{$prefix}-event-overlay__children { - margin-left: -$tooltip-arrow__height; - } - } - - &.#{$prefix}-event-overlay--right { - > .#{$prefix}-event-overlay__arrow { - margin-left: 0; - border-right: $tooltip-arrow__height solid $tooltip__background-color; - } - - > .#{$prefix}-event-overlay__children { - margin-left: $tooltip-arrow__height; - } - } - - &.#{$prefix}-event-overlay--bottom { - > .#{$prefix}-event-overlay__arrow { - margin-top: 0; - border-bottom: $tooltip-arrow__height solid $tooltip__background-color; - } - - > .#{$prefix}-event-overlay__children { - margin-top: $tooltip-arrow__height; - } - } - } -} diff --git a/scss/components/top-bar/examples/blue.html b/scss/components/top-bar/examples/blue.html deleted file mode 100644 index 109e6197d0..0000000000 --- a/scss/components/top-bar/examples/blue.html +++ /dev/null @@ -1,30 +0,0 @@ - diff --git a/scss/components/top-bar/examples/default.html b/scss/components/top-bar/examples/default.html deleted file mode 100644 index f867519e23..0000000000 --- a/scss/components/top-bar/examples/default.html +++ /dev/null @@ -1,53 +0,0 @@ - diff --git a/scss/components/top-bar/examples/light.html b/scss/components/top-bar/examples/light.html deleted file mode 100644 index 2673f0637d..0000000000 --- a/scss/components/top-bar/examples/light.html +++ /dev/null @@ -1,57 +0,0 @@ - diff --git a/scss/components/top-bar/module.scss b/scss/components/top-bar/module.scss deleted file mode 100644 index f7c5cb919a..0000000000 --- a/scss/components/top-bar/module.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import '../../tools/functions/core'; -@import '../../tools/mixins/core'; - -// Icons -@import '~@momentum-ui/icons/scss/variables'; - -// Settings -@import '../../colors/settings-base.scss'; -@import '../../colors/settings-transparencies.scss'; -@import '../../settings/core.scss'; -@import '../../settings/focus.scss'; -@import '../../settings/list-group.scss'; -@import '../../settings/media.scss'; -@import '../../settings/z-index.scss'; -@import '../../typography/settings.scss'; -@import '../avatar/settings.scss'; -@import '../icon/settings.scss'; -@import '../list-item/settings.scss'; -@import '../top-bar/settings.scss'; - -// Tools -@import '../../tools/mixins/flex'; -@import '../../tools/mixins/focus'; -@import '../../typography/mixins'; -@import '../../components/avatar/mixins'; -@import '../../components/list-item/mixins'; - -// Generic -@import '../../generic/normalize'; -@import '../../generic/global'; - -// Typography -a { - line-height: inherit; - color: $anchor-font-color; - text-decoration: $anchor-text-decoration; - - &:hover, - &:focus { - color: $anchor-font-color-hover; - - @if $anchor-text-decoration-hover !=$anchor-text-decoration { - text-decoration: $anchor-text-decoration-hover; - } - } - - &:focus { - @include focus-styles; - } - - img { - border: none; - } -} -@include brand-font-face-regular; - -// Component Specific -@import 'top-bar'; diff --git a/scss/components/top-bar/settings.scss b/scss/components/top-bar/settings.scss deleted file mode 100644 index 5237e3d642..0000000000 --- a/scss/components/top-bar/settings.scss +++ /dev/null @@ -1,38 +0,0 @@ -$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); diff --git a/scss/components/top-bar/top-bar.scss b/scss/components/top-bar/top-bar.scss deleted file mode 100644 index 5d5d2f7659..0000000000 --- a/scss/components/top-bar/top-bar.scss +++ /dev/null @@ -1,434 +0,0 @@ -/** @component top-bar */ - -@include exports('md-top-bar') { - .#{$top-bar-class} { - width: 100%; - color: $top-bar__font-color--dark; - background-color: $top-bar__background-color--dark; - fill: $top-bar__font-color--dark; - - &--fixed { - position: fixed; - top: 0; - z-index: $zindex-top-bar-fixed; - } - - &--absolute { - position: absolute; - top: 0; - z-index: $zindex-top-bar-fixed; - } - - &__container { - @include flex($jc: space-between); - height: $top-bar__height--desktop; - - @media #{$large-only} { - padding-right: rem-calc(20); - padding-left: rem-calc(20); - } - } - - &__nav { - display: none; - align-items: center; - justify-content: center; - flex: 2 0 auto; - - .#{$list-item__class} { - padding: rem-calc(2) rem-calc(12); - } - - @media #{$large-up} { - display: flex; - } - - &--right { - justify-content: flex-end; - } - } - - &__nav, - .#{$top-bar-mobile-class} { - .#{$list-item__class} { - color: $top-bar__font-color--dark; - background-color: $top-bar-list-item__background; - - &.active, - &:hover { - &:not(:disabled) { - color: $top-bar__font-color--dark--active; - background-color: $top-bar-list-item__background; - } - } - - &:focus { - @include focus-styles; - } - } - } - - &__right { - display: none; - - @media #{$large-up} { - display: flex; - flex: 0 1 auto; - align-items: center; - justify-content: flex-end; - order: 1; - margin-right: rem-calc(16); - - button, - a { - &:focus { - @include focus-styles; - } - } - - a { - padding: $brand-anchor__padding--large; - color: $top-bar__font-color--dark; - } - - button { - margin-left: $brand-anchor__padding--large; - } - } - } - - &__user { - @media #{$large-up} { - display: flex; - align-items: center; - - .#{$prefix}-avatar { - margin-left: $brand-anchor__padding--large; - } - - .user-image { - width: 100%; - height: 100%; - } - } - - .#{$prefix}-avatar { - width: $top-bar-avatar__size; - height: $top-bar-avatar__size; - padding: 0; - overflow: hidden; - border-radius: 50%; - - &:focus { - @include focus-styles; - } - - .user-image { - width: $top-bar-avatar__size; - height: $top-bar-avatar__size; - padding: 0; - cursor: pointer; - } - } - } - - &__mobile-menu-button { - margin-right: rem-calc(32); - flex: 0 1 auto; - align-self: center; - - @media #{$large-up} { - display: none; - } - } - - &__brand { - margin: rem-calc(6) rem-calc(16); - flex: 1 0 auto; - - .#{$prefix}-brand { - display: flex; - padding: $brand-anchor__padding; - color: inherit; - text-decoration: none; - align-items: center; - - &:focus { - @include focus-styles; - } - - &__logo { - display: flex; - width: auto; - height: $brand-image__size; - font-size: $brand-image__size; - - &--pad { - margin-right: rem-calc(12); - } - - @media #{$medium-only} { - height: $brand-image__size--medium; - font-size: $brand-image__size--medium; - } - - @media #{$large-up} { - height: $brand-image__size--large; - font-size: $brand-image__size--large; - } - - img { - width: auto; - height: $brand-image__size; - - @media #{$medium-only} { - height: $brand-image__size--medium; - } - - @media #{$large-up} { - height: $brand-image__size--large; - } - } - } - - &__image { - width: auto; - height: $brand-image__size; - line-height: $brand-image__size--mobile; - - @media #{$medium-up} { - height: $brand-image__size--medium; - } - } - - &__title { - font-size: $brand__font-size; - line-height: $brand-image__size; - - @media #{$medium-up} { - font-size: $brand__font-size--medium; - line-height: $brand-image__size--medium; - } - } - - @media #{$medium-up} { - padding: $brand-anchor__padding--medium; - } - } - - @media #{$large-up} { - flex: 0 1 auto; - margin-right: 0; - } - - @media #{$large-only} { - margin-left: 0; - } - } - - .#{$top-bar-mobile-class} { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal; - display: flex; - width: 100vw; - height: 100vh; - margin-left: 0; - color: $top-bar__font-color--dark; - background-color: $top-bar__background-color--dark; - opacity: 0; - transform: translateX(-150%); - box-shadow: 0px 1px 2px 1px $black-20; - animation-duration: 250ms; - animation-name: slideLeft; - animation-timing-function: ease-in-out; - transition: opacity 1s ease-in-out; - flex-direction: column; - justify-content: flex-start; - - @media #{$medium-only} { - width: rem-calc(384); - } - - &.open { - opacity: 1; - transform: translateX(0); - animation-duration: 250ms; - animation-name: slideRight; - animation-timing-function: ease-in-out; - transition: none; - } - - &__nav { - height: 100%; - overflow-y: scroll; - } - - &__mask { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal-background; - width: 100vw; - height: 100vh; - background-color: $black-60; - opacity: 0; - visibility: hidden; - transition: all 250ms ease-in-out; - - &.open { - opacity: 1; - visibility: visible; - } - } - - &__close { - position: absolute; - top: rem-calc(20); - right: rem-calc(24); - } - - .#{$top-bar-class}__brand { - margin: rem-calc(4) rem-calc(60) rem-calc(4) rem-calc(16); - flex: 0 1 auto; - - .#{$prefix}-brand { - flex-direction: column; - align-items: flex-start; - - &__logo { - height: $brand-image__size; - margin-bottom: rem-calc(18); - font-size: $brand-image__size; - - img { - width: auto; - height: $brand-image__size; - - @media #{$medium-only} { - height: $brand-image__size--medium; - } - } - - @media #{$medium-only} { - height: $brand-image__size--medium; - margin-bottom: rem-calc(18); - font-size: $brand__font-size--medium; - } - } - - &__title { - font-size: $brand__font-size--mobile; - line-height: rem-calc(32); - - @media #{$medium-only} { - font-size: $brand__font-size--medium; - line-height: $brand-image__size--medium; - } - } - } - } - - .md-list-separator { - background-color: $md-gray-70; - } - } - - &--light { - color: $top-bar__font-color--light; - background-color: $top-bar__background-color--light; - fill: $top-bar__font-color--light; - - .#{$prefix}-brand { - &:focus { - @include focus-styles; - } - } - - .#{$top-bar-class}__nav, - .#{$top-bar-mobile-class} { - color: $top-bar__font-color--light; - background-color: $top-bar__background-color--light; - fill: $top-bar__font-color--light; - - .#{$list-item__class} { - color: $top-bar__font-color--light; - background-color: $top-bar-list-item__background; - - &.active, - &:hover { - &:not(:disabled) { - color: $top-bar__font-color--light--active; - background-color: $top-bar-list-item__background; - } - } - - &:focus { - @include focus-styles; - } - } - - .md-list-separator { - background-color: $md-gray-10; - } - } - - .#{$top-bar-class}__right { - color: $top-bar__font-color--light; - - button, - a { - &:focus { - @include focus-styles; - } - } - - a { - padding: $brand-anchor__padding--large; - color: $top-bar__font-color--light; - } - } - } - - &--blue { - background-color: $top-bar__background-color--blue; - - .#{$top-bar-class}__nav, - .#{$top-bar-mobile-class} { - background-color: $top-bar__background-color--blue; - - .#{$list-item__class} { - background-color: $top-bar-list-item__background; - - &.active, - &:hover { - &:not(:disabled) { - color: $top-bar__font-color--blue--active; - } - } - } - } - } - } - - @keyframes slideRight { - 0% { - transform: translateX(-150%); - } - - 100% { - transform: translateX(-2rem); - } - } - - @keyframes slideLeft { - 0% { - transform: translateX(-2rem); - } - - 100% { - transform: translateX(-150%); - } - } -} diff --git a/scss/generic/components.scss b/scss/generic/components.scss deleted file mode 100644 index c79f600118..0000000000 --- a/scss/generic/components.scss +++ /dev/null @@ -1,90 +0,0 @@ -.#{$namespace}, .#{$prefix} { - position: relative; - padding: 0; - margin: 0; - font-family: $body-font-family; - font-style: $body-font-style; - font-weight: $body-font-weight; - line-height: $body-line-height; // Different currently from $md-gray-50-line-height - color: $body-font-color; - cursor: $cursor-auto-value; - background: $body-bg; - box-sizing: border-box; - - a:hover { - cursor: $cursor-pointer-value; - } - - // Grid Defaults to get images and embeds to work properly - img { - height: auto; - max-width: 100%; - } - - img { - -ms-interpolation-mode: bicubic; - } - - #map_canvas, - .map_canvas, - .mqa-display { - img, - embed, - object { - max-width: none !important; - } - } - - // Miscellaneous useful HTML classes - .left { - float: left !important; - } - - .right { - float: right !important; - } - - .clearfix { - @include clearfix; - } - - // Hide visually and from screen readers - .hide { - display: none; - } - - // Hide visually and from screen readers, but maintain layout - .invisible { - visibility: hidden; - } - - // Font smoothing - // Antialiased font smoothing works best for light text on a dark background. - // Apply to single elements instead of globally to body. - // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac. - .antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - // Get rid of gap under images by making them display: inline-block; by default - img { - display: inline-block; - vertical-align: middle; - } - - // - // Global resets for forms - // - - // Make sure textarea takes on height automatically - textarea { - height: auto; - min-height: 50px; - } - - // Make select elements 100% width by default - select { - width: 100%; - } -} diff --git a/scss/layouts/block-grid/block-grid.scss b/scss/layouts/block-grid/block-grid.scss deleted file mode 100644 index b6cca0c72c..0000000000 --- a/scss/layouts/block-grid/block-grid.scss +++ /dev/null @@ -1,25 +0,0 @@ -@include exports('block-grid-bem') { - [class*='block-grid-'] { - @include block-grid; - } - - [class*='column'] { - &[class*='block-grid-'] { - @include block-grid($align-to-grid: true); - } - } - - @if $block-grid-media-queries { - @media #{$small-up} { - @include block-grid-html-classes($size: small, $include-spacing: false); - } - - @media #{$medium-up} { - @include block-grid-html-classes($size: medium, $include-spacing: false); - } - - @media #{$large-up} { - @include block-grid-html-classes($size: large, $include-spacing: false); - } - } -} diff --git a/scss/layouts/block-grid/mixins.scss b/scss/layouts/block-grid/mixins.scss deleted file mode 100644 index 5adf843b0a..0000000000 --- a/scss/layouts/block-grid/mixins.scss +++ /dev/null @@ -1,168 +0,0 @@ -@use "sass:math"; - -@if $align-block-grid-to-grid { - $block-grid-default-spacing: $column-gutter; -} -$block-grid-media-queries: true !default; - -@mixin block-grid( - $per-row: false, - $spacing: $block-grid-default-spacing, - $include-spacing: true, - $md-gray-50-style: true -) { - @if $md-gray-50-style { - display: block; - padding: 0; - - @if $align-block-grid-to-grid { - margin: 0; - } @else { - margin: 0 (-$spacing*0.5); - } - - @include clearfix; - - > li { - display: block; - float: $default-float; - height: auto; - padding: 0 ($spacing*0.5) $spacing; - } - } - - @if $per-row { - > li { - width: math.div(100%, $per-row); - padding: 0 ($spacing*0.5) $spacing; - list-style: none; - - &:nth-of-type(1n) { - clear: none; - } - - &:nth-of-type(#{$per-row}n + 1) { - clear: both; - } - - @if $align-block-grid-to-grid { - @include block-grid-aligned($per-row, $spacing); - } - } - } -} - -@mixin block-grid-aligned($per-row, $spacing) { - @for $i from 1 through $block-grid-elements { - @if $per-row >= $i { - $grid-column: '+' + $i; - - @if $per-row == $i { - $grid-column: ''; - } - - &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) { - padding-right: ($spacing - (math.div($spacing, $per-row) * $i)); - padding-left: ( - $spacing - (math.div($spacing, $per-row) * ($per-row - ($i - 1))) - ); - } - } - } -} - -@mixin block-grid-html-classes($size, $include-spacing) { - @for $i from 1 through $block-grid-elements { - .#{$size}-block-grid-#{($i)} { - @include block-grid( - $i, - $block-grid-default-spacing, - $include-spacing, - false - ); - } - } -} - -@include exports('block-grid') { - [class*='block-grid-'] { - @include block-grid; - } - - @if $block-grid-media-queries { - @media #{$small-up} { - @include block-grid-html-classes($size: small, $include-spacing: false); - } - - @media #{$medium-up} { - @include block-grid-html-classes($size: medium, $include-spacing: false); - } - - @media #{$large-up} { - @include block-grid-html-classes($size: large, $include-spacing: false); - } - - @media #{$xlarge-up} { - @include block-grid-html-classes($size: xlarge, $include-spacing: false); - } - - @media #{$xxlarge-up} { - @include block-grid-html-classes($size: xxlarge, $include-spacing: false); - } - } -} - -/* begin block-grid override */ -@mixin block-grid( - $per-row: false, - $spacing: $block-grid-default-spacing, - $include-spacing: true, - $md-gray-50-style: true, - $align-to-grid: $align-block-grid-to-grid -) { - @if $md-gray-50-style { - display: block; - padding: 0; - - @if $align-to-grid { - margin: 0; - } @else { - margin: 0 (-$spacing * 0.5); - } - - @include clearfix; - - > * { - display: block; - float: $default-float; - height: auto; - padding: 0 ($spacing * 0.5) $spacing; - } - - &.collapse { - & > * { - padding: 0; - } - } - } - - @if $per-row { - > * { - width: math.div(100%, $per-row); - padding: 0 ($spacing * 0.5) $spacing; - list-style: none; - - &:nth-of-type(1n) { - clear: none; - } - - &:nth-of-type(#{$per-row}n + 1) { - clear: both; - } - - @if $align-to-grid { - @include block-grid-aligned($per-row, $spacing); - } - } - } -} diff --git a/scss/layouts/block-grid/module.scss b/scss/layouts/block-grid/module.scss deleted file mode 100644 index 984ffd4972..0000000000 --- a/scss/layouts/block-grid/module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../colors/settings'; -@import '../../settings/core'; -@import '../../settings/media'; -@import 'settings'; - -@import '../../tools/mixins/core'; -@import 'mixins'; - -@import 'block-grid'; diff --git a/scss/layouts/block-grid/settings.scss b/scss/layouts/block-grid/settings.scss deleted file mode 100644 index 2b10689a91..0000000000 --- a/scss/layouts/block-grid/settings.scss +++ /dev/null @@ -1,3 +0,0 @@ -$block-grid-elements: 12 !default; -$block-grid-default-spacing: rem-calc(20) !default; -$align-block-grid-to-grid: false !default; diff --git a/scss/layouts/layout-grid/examples/advanced.html b/scss/layouts/layout-grid/examples/advanced.html deleted file mode 100644 index cca7a8cacc..0000000000 --- a/scss/layouts/layout-grid/examples/advanced.html +++ /dev/null @@ -1,16 +0,0 @@ -
-
-
8 -
-
8 Nested -
-
8 Nested Again
-
4
-
-
-
4
-
-
-
4
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/block-grid-column.html b/scss/layouts/layout-grid/examples/block-grid-column.html deleted file mode 100644 index 8f6400b8c1..0000000000 --- a/scss/layouts/layout-grid/examples/block-grid-column.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
-
-

first

-

second

-

third

-
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/block-grid.html b/scss/layouts/layout-grid/examples/block-grid.html deleted file mode 100644 index 24b0c1940b..0000000000 --- a/scss/layouts/layout-grid/examples/block-grid.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
-
-
-
one
-
two
-
three
-
four
-
five
-
six
-
-
.small-12 .columns .small-block-grid-3 .collapse
-
-
one
-
two
-
three
-
four
-
five
-
six
-
-
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/centered.html b/scss/layouts/layout-grid/examples/centered.html deleted file mode 100644 index 1336287333..0000000000 --- a/scss/layouts/layout-grid/examples/centered.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
-
3 centered
-
-
-
6 centered
-
-
-
9 centered
-
-
-
11 centered
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/collapse-uncollapse.html b/scss/layouts/layout-grid/examples/collapse-uncollapse.html deleted file mode 100644 index 13d8bdcbbc..0000000000 --- a/scss/layouts/layout-grid/examples/collapse-uncollapse.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
-
- Removes gutter at large media query -
-
- Removes gutter at large media query -
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/complex.html b/scss/layouts/layout-grid/examples/complex.html deleted file mode 100644 index dcf5303169..0000000000 --- a/scss/layouts/layout-grid/examples/complex.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
-
.medium-9
-
.medium-3
-
-
-
.small-12 .{small|medium|large}-block-grid-collapse
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
diff --git a/scss/layouts/layout-grid/examples/default.html b/scss/layouts/layout-grid/examples/default.html deleted file mode 100644 index b6d149a955..0000000000 --- a/scss/layouts/layout-grid/examples/default.html +++ /dev/null @@ -1,29 +0,0 @@ -
-
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
.medium-1
-
-
-
.medium-8
-
.medium-4
-
-
-
.medium-4
-
.medium-4
-
.medium-4
-
-
-
.medium-6
-
.medium-6
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/incomplete.html b/scss/layouts/layout-grid/examples/incomplete.html deleted file mode 100644 index 2c499c712c..0000000000 --- a/scss/layouts/layout-grid/examples/incomplete.html +++ /dev/null @@ -1,12 +0,0 @@ -
-
-
3
-
3
-
3
-
-
-
3
-
3
-
3 end
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/medium.html b/scss/layouts/layout-grid/examples/medium.html deleted file mode 100644 index 0d0b487d10..0000000000 --- a/scss/layouts/layout-grid/examples/medium.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
-
2 columns
-
10 columns
-
-
-
3 columns
-
9 columns
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/offsets.html b/scss/layouts/layout-grid/examples/offsets.html deleted file mode 100644 index d8f6f9b2a9..0000000000 --- a/scss/layouts/layout-grid/examples/offsets.html +++ /dev/null @@ -1,16 +0,0 @@ -
-
1
-
11
-
-
-
1
-
10, offset 1
-
-
-
1
-
9, offset 2
-
-
-
1
-
8, offset 3
-
diff --git a/scss/layouts/layout-grid/examples/small.html b/scss/layouts/layout-grid/examples/small.html deleted file mode 100644 index 52fd4aa948..0000000000 --- a/scss/layouts/layout-grid/examples/small.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
-
2 columns
-
10 columns
-
-
-
3 columns
-
9 columns
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/examples/source-ordering.html b/scss/layouts/layout-grid/examples/source-ordering.html deleted file mode 100644 index d6bf3814c7..0000000000 --- a/scss/layouts/layout-grid/examples/source-ordering.html +++ /dev/null @@ -1,22 +0,0 @@ -
-
-
10
-
2, last
-
-
-
9
-
3, last
-
-
-
8
-
4, last
-
-
-
7
-
5, last
-
-
-
6
-
6, last
-
-
\ No newline at end of file diff --git a/scss/layouts/layout-grid/layout-grid.scss b/scss/layouts/layout-grid/layout-grid.scss deleted file mode 100644 index 44198ced81..0000000000 --- a/scss/layouts/layout-grid/layout-grid.scss +++ /dev/null @@ -1,183 +0,0 @@ -/** @component layout-grid */ - -@include exports('grid') { - .row { - @include grid-row; - - &.collapse { - > .column, - > .columns { - @include grid-column($collapse: true, $float: false); - } - - .row { - margin-right: 0; - margin-left: 0; - } - } - - .row { - @include grid-row($behavior: nest); - - &.collapse { - @include grid-row($behavior: nest-collapse); - } - - .#{$sites-class} & { - padding: 0 rem-calc(32); - - .row { - padding: 0; - } - } - } - } - - .column, - .columns { - @include grid-column($columns: $total-columns); - } - - .column, - .columns { - & + &:last-child { - float: $last-child-float; - } - - & + &.end { - float: $default-float; - } - } - // bootstrap to foundation col-md-* alias - [class^='col-'] { - @extend .columns; - - .row &:last-child, - .form-group &:last-child { - float: left; - } - } - - @include grid-html-classes('col-xs'); - @include grid-html-classes('col-sm'); - @include grid-html-classes('col-md'); - @include grid-html-classes('col-lg'); - // column .collapse-left and .collapse-right utility classes for .row - .row { - &.collapse { - &-left { - @extend %collapse-left; - } - - &-right { - @extend %collapse-right; - } - - &-both { - @extend %collapse-left; - @extend %collapse-right; - } - } - - &.full { - @extend %collapse-full; - } - } - - @media #{$small-up} { - @include grid-html-classes($size: small); - } - - @media #{$medium-up} { - @include grid-html-classes($size: medium); - // Old push and pull classes - @for $i from 0 through $total-columns - 1 { - .push-#{$i} { - @include grid-column($push: $i, $collapse: null, $float: false); - } - - .pull-#{$i} { - @include grid-column($pull: $i, $collapse: null, $float: false); - } - } - } - - @media #{$large-up} { - @include grid-html-classes($size: large); - - @for $i from 0 through $total-columns - 1 { - .push-#{$i} { - @include grid-column($push: $i, $collapse: null, $float: false); - } - - .pull-#{$i} { - @include grid-column($pull: $i, $collapse: null, $float: false); - } - } - } - - @media #{$xlarge-up} { - @include grid-html-classes($size: xlarge); - - @media #{$xxlarge-up} { - @include grid-html-classes($size: xxlarge); - } - } -} - -// row collapse placeholders -%collapse-left { - & > .column, - & > .columns, - [class^='col-'] { - &:first-child { - &:not([class*='-offset']), - &:not([class*='-push']) { - padding-left: 0; - } - } - } -} - -%collapse-right { - & > .column, - & > .columns, - [class^='col-'] { - &:last-child { - &:not([class*='-offset']), - &:not([class*='-push']) { - padding-right: 0; - } - } - } -} - -%collapse { - @extend %collapse-left; - @extend %collapse-right; -} - -%collapse-full { - width: 100%; - max-width: 100% !important; -} - -@include exports('show-grid') { - .show-grid { - [class*='column'], - [class*='columns'], - [class*='block-grid'] > * { - padding-top: 0.5rem - rem-calc(1); - padding-bottom: 0.5rem - rem-calc(1); - background-color: #eee; - background-color: rgba($md-theme-20, 0.15); - border: 1px solid #ddd; - border: 1px solid rgba($md-theme-60, 0.2); - } - - [class*='block-grid']:not(.columns) { - margin-right: -($block-grid-default-spacing - rem-calc(4)) * 0.5; - margin-left: -($block-grid-default-spacing - rem-calc(4)) * 0.5; - } - } -} diff --git a/scss/layouts/layout-grid/module.scss b/scss/layouts/layout-grid/module.scss deleted file mode 100644 index b9196c04cc..0000000000 --- a/scss/layouts/layout-grid/module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import '../../tools/functions/core'; - -@import '../../settings/core'; -@import '../../settings/media'; -@import '../block-grid/settings'; - -@import '../../tools/mixins/core'; -@import '../../tools/mixins/grid'; - -@import 'layout-grid'; diff --git a/scss/layouts/layouts.scss b/scss/layouts/layouts.scss deleted file mode 100644 index aa62ef2158..0000000000 --- a/scss/layouts/layouts.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'block-grid/module'; -@import 'layout-grid/module'; diff --git a/scss/layouts/sites.scss b/scss/layouts/sites.scss deleted file mode 100644 index 6eaaa98246..0000000000 --- a/scss/layouts/sites.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '../components/top-bar/settings'; - -.md--sites { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.md-main { - padding-top: $top-bar__height--desktop; - flex: 1 0 auto; -} diff --git a/scss/momentum-ui-base.scss b/scss/momentum-ui-base.scss index 8478b3789b..130b29b436 100644 --- a/scss/momentum-ui-base.scss +++ b/scss/momentum-ui-base.scss @@ -23,6 +23,3 @@ // Typography @import 'typography/typography'; - -// Layouts -@import 'layouts/layouts'; diff --git a/scss/momentum-ui-components.scss b/scss/momentum-ui-components.scss deleted file mode 100644 index ae13288b34..0000000000 --- a/scss/momentum-ui-components.scss +++ /dev/null @@ -1,130 +0,0 @@ -@import 'tools/functions/core'; -@import 'tools/mixins/core'; - -// Settings -@import '~@momentum-ui/icons/scss/variables'; -@import 'settings/settings'; - -// Tools -@import '~@momentum-ui/icons/scss/mixins'; -@import 'tools/mixins/background-variant'; -@import 'tools/mixins/baseline'; -@import 'tools/mixins/border-radius'; -@import 'tools/mixins/center-block'; -@import 'tools/mixins/clearfix'; -@import 'tools/mixins/core'; -@import 'tools/mixins/easing'; -@import 'tools/mixins/flex'; -@import 'tools/mixins/focus'; -@import 'tools/mixins/gradients'; -@import 'tools/mixins/grid-framework'; -@import 'tools/mixins/grid'; -@import 'tools/mixins/hide-text'; -@import 'tools/mixins/image'; -@import 'tools/mixins/nav-divider'; -@import 'tools/mixins/nav-vertical-align'; -@import 'tools/mixins/opacity'; -@import 'tools/mixins/reset-filter'; -@import 'tools/mixins/reset-text'; -@import 'tools/mixins/resize'; -@import 'tools/mixins/responsive-visibility'; -@import 'tools/mixins/scrollbar'; -@import 'tools/mixins/size'; -@import 'tools/mixins/slideout-shadow'; -@import 'tools/mixins/state-colors'; -@import 'tools/mixins/table-row'; -@import 'tools/mixins/text-emphasis'; -@import 'tools/mixins/text-hide'; -@import 'tools/mixins/text-overflow'; -@import 'typography/mixins'; -@import 'components/avatar/mixins'; -@import 'components/accordion/mixins'; -@import 'components/alert/mixins'; -@import 'components/badge/mixins'; -@import 'components/breadcrumbs/mixins'; -@import 'components/button/mixins'; -@import 'components/checkbox/mixins'; -@import 'components/content-item/mixins'; -@import 'components/forms/mixins'; -@import 'components/input/mixins'; -@import 'components/label/mixins'; -@import 'components/lightbox/mixins'; -@import 'components/link/mixins'; -@import 'components/list-item/mixins'; -@import 'components/loader/mixins'; -@import 'components/modal/mixins'; -@import 'components/panel/mixins'; -@import 'components/page-header/mixins'; -@import 'components/pagination/mixins'; -@import 'components/progress/mixins'; -@import 'components/radio/mixins'; -@import 'components/toggle-switch/mixins'; -@import 'layouts/block-grid/mixins'; - -@import 'tools/placeholders/page-layout'; -@import 'tools/placeholders/spacing'; -@import 'tools/placeholders/sticky'; -@import 'typography/placeholders'; -@import 'components/loader/placeholders'; - -@import '~@momentum-ui/icons/scss/momentum-ui-icons'; - -@import 'generic/components'; - -// Components -@import 'components/accordion/accordion'; -@import 'components/activity-button/activity-button'; -@import 'components/alert/alert'; -@import 'components/alert-banner/alert-banner'; -@import 'components/avatar/avatar'; -@import 'components/avatar/composite-avatar'; -@import 'components/badge/badge'; -@import 'components/breadcrumbs/breadcrumbs'; -@import 'components/button/button'; -@import 'components/button-group/button-group'; -@import 'components/card/card'; -@import 'components/checkbox/checkbox'; -@import 'components/chip/chip'; -@import 'components/close/close'; -@import 'components/close-wrapper/close-wrapper'; -@import 'components/coachmark/coachmark'; -@import 'components/collapse-button/collapse-button'; -@import 'components/combo-box/combo-box'; -@import 'components/content-item/content-item'; -@import 'components/data-table/data-table'; -@import 'components/date-picker/date-picker'; -@import 'components/date-range-picker/date-range-picker'; -@import 'components/editable-textfield/editable-textfield'; -@import 'components/overlay/event-overlay'; -@import 'components/footer/footer'; -@import 'components/hero/hero'; -@import 'components/icon/icon'; -@import 'components/input/input'; -@import 'components/input-phone-number/input-phone-number'; -@import 'components/label/label'; -@import 'components/lightbox/lightbox'; -@import 'components/link/link'; -@import 'components/list-item/list-item'; -@import 'components/list-separator/list-separator'; -@import 'components/meeting-list/list-item-meeting'; -@import 'components/loading/loading'; -@import 'components/loader/loader'; -@import 'components/menu/menu'; -@import 'components/modal/modal'; -@import 'components/panel/panel'; -@import 'components/page-header/page-header-sites'; -@import 'components/pagination/pagination'; -@import 'components/popover/popover'; -@import 'components/progress/progress'; -@import 'components/radio/radio'; -@import 'components/select/select'; -@import 'components/sidebar/sidebar'; -@import 'components/slider/slider'; -@import 'components/social-list/social-list'; -@import 'components/space-list/space-list-item'; -@import 'components/stepper/stepper'; -@import 'components/tabs/tabs'; -@import 'components/time-picker/time-picker'; -@import 'components/toggle-switch/toggle-switch'; -@import 'components/tooltip/tooltip'; -@import 'components/top-bar/top-bar'; diff --git a/scss/momentum-ui-ng.scss b/scss/momentum-ui-ng.scss deleted file mode 100644 index fc557b4d6e..0000000000 --- a/scss/momentum-ui-ng.scss +++ /dev/null @@ -1,200 +0,0 @@ -@import 'tools/functions/core'; -@import 'tools/mixins/core'; - -// Settings -@import 'ng/settings/settings'; - -// Tools -@import '~@momentum-ui/icons/scss/mixins'; -@import 'tools/mixins/background-variant'; -@import 'tools/mixins/baseline'; -@import 'tools/mixins/border-radius'; -@import 'tools/mixins/center-block'; -@import 'tools/mixins/clearfix'; -@import 'tools/mixins/core'; -@import 'tools/mixins/easing'; -@import 'tools/mixins/flex'; -@import 'tools/mixins/focus'; -@import 'tools/mixins/gradients'; -@import 'tools/mixins/grid-framework'; -@import 'tools/mixins/grid'; -@import 'tools/mixins/hide-text'; -@import 'tools/mixins/image'; -@import 'tools/mixins/nav-divider'; -@import 'tools/mixins/nav-vertical-align'; -@import 'tools/mixins/opacity'; -@import 'tools/mixins/reset-filter'; -@import 'tools/mixins/reset-text'; -@import 'tools/mixins/resize'; -@import 'tools/mixins/responsive-visibility'; -@import 'tools/mixins/scrollbar'; -@import 'tools/mixins/size'; -@import 'tools/mixins/slideout-shadow'; -@import 'tools/mixins/spacing'; -@import 'tools/mixins/state-colors'; -@import 'tools/mixins/table-row'; -@import 'tools/mixins/text-emphasis'; -@import 'tools/mixins/text-hide'; -@import 'tools/mixins/text-overflow'; -@import 'typography/mixins'; -@import 'components/avatar/mixins'; -@import 'components/accordion/mixins'; -@import 'components/alert/mixins'; -@import 'components/badge/mixins'; -@import 'components/breadcrumbs/mixins'; -@import 'components/button/mixins'; -@import 'components/checkbox/mixins'; -@import 'components/content-item/mixins'; -@import 'components/forms/mixins'; -@import 'components/input/mixins'; -@import 'components/label/mixins'; -@import 'components/lightbox/mixins'; -@import 'components/link/mixins'; -@import 'components/list-item/mixins'; -@import 'components/loader/mixins'; -@import 'components/modal/mixins'; -@import 'components/panel/mixins'; -@import 'components/page-header/mixins'; -@import 'components/pagination/mixins'; -@import 'components/progress/mixins'; -@import 'components/radio/mixins'; -@import 'components/toggle-switch/mixins'; -@import 'layouts/block-grid/mixins'; - -@import 'tools/functions/core'; - -@import 'tools/placeholders/page-layout'; -@import 'tools/placeholders/spacing'; -@import 'tools/placeholders/sticky'; -@import 'typography/placeholders'; -@import 'components/loader/placeholders'; - -// Generic -@import 'generic/normalize'; -@import 'generic/global'; - -// Elements -@import 'elements/elements'; - -// Typography -@import 'typography/typography'; - -// Layouts -@import 'layouts/block-grid/block-grid'; -@import 'layouts/layout-grid/layout-grid'; - -// Icons -@import '~@momentum-ui/icons/scss/momentum-ui-icons'; -@import '~@momentum-ui/icons/scss/symphony/icon-mapping'; - -// Components -@import 'components/accordion/accordion'; -@import 'components/activity-button/activity-button'; -@import 'components/alert/alert'; -@import 'components/alert-banner/alert-banner'; -@import 'components/avatar/avatar'; -@import 'components/avatar/composite-avatar'; -@import 'components/badge/badge'; -@import 'components/breadcrumbs/breadcrumbs'; -@import 'components/button/button'; -@import 'components/button-group/button-group'; -@import 'components/card/card'; -@import 'components/cdk-overlay/cdk-overlay'; -@import 'components/checkbox/checkbox'; -@import 'components/chip/chip'; -@import 'components/close/close'; -@import 'components/close-wrapper/close-wrapper'; -@import 'components/coachmark/coachmark'; -@import 'components/collapse-button/collapse-button'; -@import 'components/combo-box/combo-box'; -@import 'components/content-item/content-item'; -@import 'components/date-picker/date-picker'; -@import 'components/data-table//data-table'; -@import 'components/date-range-picker/date-range-picker'; -@import 'components/drawer/drawer'; -@import 'components/editable-textfield/editable-textfield'; -@import 'components/overlay/event-overlay'; -@import 'components/forms/forms'; -@import 'components/footer/footer'; -@import 'components/hero/hero'; -@import 'components/icon/icon'; -@import 'components/input/input'; -@import 'components/input-phone-number/input-phone-number'; -@import 'components/label/label'; -@import 'components/lightbox/lightbox'; -@import 'components/link/link'; -@import 'components/list-item/list-item'; -@import 'components/list-separator/list-separator'; -@import 'components/meeting-list/list-item-meeting'; -@import 'components/loading/loading'; -@import 'components/loader/loader'; -@import 'components/menu/menu'; -@import 'components/modal/modal'; -@import 'components/panel/panel'; -@import 'components/page-header/page-header-sites'; -@import 'components/pagination/pagination'; -@import 'components/popover/popover'; -@import 'components/progress/progress'; -@import 'components/radio/radio'; -@import 'components/select/select'; -@import 'components/sidebar/sidebar'; -@import 'components/slider/slider'; -@import 'components/social-list/social-list'; -@import 'components/space-list/space-list-item'; -@import 'components/tabs/tabs'; -@import 'components/stepper/stepper'; -@import 'components/time-picker/time-picker'; -@import 'components/toggle-switch/toggle-switch'; -@import 'components/tooltip/tooltip'; -@import 'components/top-bar/top-bar'; - -// ng specific styles -@import '~@momentum-ui/icons/scss/symphony/placeholder-mapping'; -@import 'settings/dropdown'; -@import 'ng/settings/slider'; -@import 'ng/settings/sidepanel'; -@import 'ng/settings/topbar'; -@import 'ng/alert-banner'; -@import 'ng/avatar'; -@import 'ng/breadcrumbs'; -@import 'ng/call-destination'; -@import 'ng/card'; -@import 'ng/card-member'; -@import 'ng/card-number'; -@import 'ng/combo-box'; -@import 'ng/dragdrop'; -@import 'ng/dropdown'; -@import 'ng/grid-filter'; -@import 'ng/header'; -@import 'ng/header-push'; -@import 'ng/login'; -@import 'ng/messagebox'; -@import 'ng/nav-left'; -@import 'ng/nav-side-admin'; -@import 'ng/ng-grid'; -@import 'ng/page-header-admin'; -@import 'ng/page-sub-header'; -@import 'ng/search-filter'; -@import 'ng/select'; -@import 'ng/setup-assistant'; -@import 'ng/side-panel'; -@import 'ng/table'; -@import 'ng/tokenfield'; -@import 'ng/tooltip-ng'; -@import 'ng/topbar-admin'; -@import 'ng/topbar-user'; -@import 'ng/topbar'; -@import 'ng/topnav'; -@import 'ng/typeahead'; -@import 'ng/ui-grid'; - -// Utilities -@import 'utilities/component-animation'; -@import 'utilities/core'; -@import 'utilities/ellipsis'; -@import 'utilities/image'; -@import 'utilities/responsive'; -@import 'utilities/page-layout'; -@import 'utilities/cursor'; -@import 'utilities/spacing'; -@import 'colors/utilities'; diff --git a/scss/momentum-ui-sites.scss b/scss/momentum-ui-sites.scss deleted file mode 100644 index 1cd236d8db..0000000000 --- a/scss/momentum-ui-sites.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'momentum-ui'; -@import 'layouts/sites'; diff --git a/scss/momentum-ui.scss b/scss/momentum-ui.scss deleted file mode 100644 index a72e6142ac..0000000000 --- a/scss/momentum-ui.scss +++ /dev/null @@ -1,155 +0,0 @@ -@import 'tools/functions/core'; -@import 'tools/mixins/core'; - -// Icons -@import '~@momentum-ui/icons/scss/momentum-ui-icons'; - -// Settings -@import 'settings/settings'; - -// Tools -@import 'tools/mixins/background-variant'; -@import 'tools/mixins/baseline'; -@import 'tools/mixins/border-radius'; -@import 'tools/mixins/center-block'; -@import 'tools/mixins/clearfix'; -@import 'tools/mixins/core'; -@import 'tools/mixins/easing'; -@import 'tools/mixins/flex'; -@import 'tools/mixins/focus'; -@import 'tools/mixins/gradients'; -@import 'tools/mixins/grid-framework'; -@import 'tools/mixins/grid'; -@import 'tools/mixins/hide-text'; -@import 'tools/mixins/image'; -@import 'tools/mixins/nav-divider'; -@import 'tools/mixins/nav-vertical-align'; -@import 'tools/mixins/opacity'; -@import 'tools/mixins/reset-filter'; -@import 'tools/mixins/reset-text'; -@import 'tools/mixins/resize'; -@import 'tools/mixins/responsive-visibility'; -@import 'tools/mixins/scrollbar'; -@import 'tools/mixins/size'; -@import 'tools/mixins/slideout-shadow'; -@import 'tools/mixins/spacing'; -@import 'tools/mixins/state-colors'; -@import 'tools/mixins/table-row'; -@import 'tools/mixins/text-emphasis'; -@import 'tools/mixins/text-hide'; -@import 'tools/mixins/text-overflow'; -@import 'typography/mixins'; -@import 'components/avatar/mixins'; -@import 'components/accordion/mixins'; -@import 'components/alert/mixins'; -@import 'components/badge/mixins'; -@import 'components/breadcrumbs/mixins'; -@import 'components/button/mixins'; -@import 'components/checkbox/mixins'; -@import 'components/content-item/mixins'; -@import 'components/forms/mixins'; -@import 'components/input/mixins'; -@import 'components/label/mixins'; -@import 'components/lightbox/mixins'; -@import 'components/link/mixins'; -@import 'components/list-item/mixins'; -@import 'components/loader/mixins'; -@import 'components/modal/mixins'; -@import 'components/panel/mixins'; -@import 'components/page-header/mixins'; -@import 'components/pagination/mixins'; -@import 'components/progress/mixins'; -@import 'components/radio/mixins'; -@import 'components/toggle-switch/mixins'; -@import 'layouts/block-grid/mixins'; - -@import 'tools/placeholders/page-layout'; -@import 'tools/placeholders/spacing'; -@import 'tools/placeholders/sticky'; -@import 'typography/placeholders'; -@import 'components/loader/placeholders'; - -// Generic -@import 'generic/normalize'; -@import 'generic/global'; - -// Elements -@import 'elements/elements'; - -// Typography -@import 'typography/typography'; - -// Layouts -@import 'layouts/block-grid/block-grid'; -@import 'layouts/layout-grid/layout-grid'; - -// Components -@import 'components/accordion/accordion'; -@import 'components/activity-button/activity-button'; -@import 'components/alert/alert'; -@import 'components/alert-banner/alert-banner'; -@import 'components/avatar/avatar'; -@import 'components/avatar/composite-avatar'; -@import 'components/badge/badge'; -@import 'components/breadcrumbs/breadcrumbs'; -@import 'components/button/button'; -@import 'components/button-group/button-group'; -@import 'components/card/card'; -@import 'components/checkbox/checkbox'; -@import 'components/chip/chip'; -@import 'components/close/close'; -@import 'components/close-wrapper/close-wrapper'; -@import 'components/coachmark/coachmark'; -@import 'components/collapse-button/collapse-button'; -@import 'components/combo-box/combo-box'; -@import 'components/content-item/content-item'; -@import 'components/data-table/data-table'; -@import 'components/date-picker/date-picker'; -@import 'components/drawer/drawer'; -@import 'components/date-range-picker/date-range-picker'; -@import 'components/editable-textfield/editable-textfield'; -@import 'components/overlay/event-overlay'; -@import 'components/forms/forms'; -@import 'components/footer/footer'; -@import 'components/hero/hero'; -@import 'components/icon/icon'; -@import 'components/input/input'; -@import 'components/input-phone-number/input-phone-number'; -@import 'components/label/label'; -@import 'components/lightbox/lightbox'; -@import 'components/link/link'; -@import 'components/list-item/list-item'; -@import 'components/list-separator/list-separator'; -@import 'components/meeting-list/list-item-meeting'; -@import 'components/loading/loading'; -@import 'components/loader/loader'; -@import 'components/menu/menu'; -@import 'components/modal/modal'; -@import 'components/panel/panel'; -@import 'components/page-header/page-header-sites'; -@import 'components/pagination/pagination'; -@import 'components/popover/popover'; -@import 'components/progress/progress'; -@import 'components/radio/radio'; -@import 'components/select/select'; -@import 'components/sidebar/sidebar'; -@import 'components/slider/slider'; -@import 'components/social-list/social-list'; -@import 'components/space-list/space-list-item'; -@import 'components/stepper/stepper'; -@import 'components/tabs/tabs'; -@import 'components/time-picker/time-picker'; -@import 'components/toggle-switch/toggle-switch'; -@import 'components/tooltip/tooltip'; -@import 'components/top-bar/top-bar'; - -// Utilities -@import 'utilities/component-animation'; -@import 'utilities/core'; -@import 'utilities/ellipsis'; -@import 'utilities/image'; -@import 'utilities/responsive'; -@import 'utilities/page-layout'; -@import 'utilities/cursor'; -@import 'utilities/spacing'; -@import 'colors/utilities'; diff --git a/scss/ng/accordion.scss b/scss/ng/accordion.scss deleted file mode 100644 index 2a6ee60e32..0000000000 --- a/scss/ng/accordion.scss +++ /dev/null @@ -1,120 +0,0 @@ -// @import '../colors/settings'; -// @import '../settings/core'; -// @import '../typography/settings'; -// @import '../tools/mixins/core'; -// @import '~@momentum-ui/icons/scss/mixins'; - -$accordion-navigation-padding: rem-calc(16) !default; -$accordion-navigation-bg-color: $md-gray-20 !default; -$accordion-navigation-hover-bg-color: scale-color( - $accordion-navigation-bg-color, - $lightness: -5% -) !default; -$accordion-navigation-active-bg-color: scale-color( - $accordion-navigation-bg-color, - $lightness: -3% -) !default; -$accordion-navigation-font-color: $md-black-100 !default; -$accordion-navigation-font-size: rem-calc(16) !default; -$accordion-navigation-font-family: $body-font-family !default; -$accordion-content-padding: ($column-gutter/2) !default; -$accordion-content-active-bg-color: $md-white-100 !default; - -@include exports('accordion-bem') { - .accordion { - @include clearfix; - - margin-bottom: 0; - - .accordion--navigation, - dd { - display: block; - margin-bottom: 0 !important; - - &.active > a { - background: $accordion-navigation-active-bg-color; - } - - > a { - display: block; - padding: $accordion-navigation-padding; - margin-top: rem-calc(10); - font-family: $accordion-navigation-font-family; - font-size: $accordion-navigation-font-size; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; - font-weight: 550; - color: $md-white-100; - background: $md-theme-50; - border: 2px solid $md-theme-50; - border-radius: $global-radius; - - &:hover { - background: $md-theme-50; - border-color: $md-theme-70; - } - - &.text-muted { - color: $md-gray-40; - } - - &:before { - display: inline-block; - margin-right: rem-calc(3); - margin-left: 0; - font-family: $icon-font-name; - font-size: 1rem; - line-height: 1; - vertical-align: middle; - - @include icon-arrow-down_16; - } - } - - > .content { - display: none; - padding: $accordion-content-padding; - margin-top: rem-calc(5); - font-size: rem-calc(13); - color: $md-black-100; - border: 1px solid $md-gray-40; - border-radius: $global-radius; - - &.active { - display: block; - background: $accordion-content-active-bg-color; - } - - h5 { - font-size: rem-calc(14); - color: $md-yellow-50; - } - } - - &.accordion--primary { - > a { - background: $md-theme-50; - } - } - - &.accordion--warning { - > a { - background: $md-yellow-50; - border-color: $md-yellow-50; - } - } - - &.accordion--danger { - > a { - background: $md-red-50; - border-color: $md-red-50; - } - } - } - } -} - -.caret { - position: relative; - right: rem-calc(10); -} diff --git a/scss/ng/alert-banner.scss b/scss/ng/alert-banner.scss deleted file mode 100644 index d982e187a2..0000000000 --- a/scss/ng/alert-banner.scss +++ /dev/null @@ -1,12 +0,0 @@ -@include exports('ng-alert-banner') { - .md-alert-banner { - &__text { - width: 100%; - } - - &__close { - background: none; - border: none; - } - } -} diff --git a/scss/ng/avatar.scss b/scss/ng/avatar.scss deleted file mode 100644 index 02a8d86ece..0000000000 --- a/scss/ng/avatar.scss +++ /dev/null @@ -1,43 +0,0 @@ -@include exports('ng-avatar') { - .avatar { - width: 56px; - height: 56px; - padding: 14px 0; - font-family: $brand-font-extra-light; - font-size: 26px; - line-height: 1.2; - color: $md-theme-50; - background: $md-gray-10; - background-size: 56px 56px; - border: 1px solid $md-gray-20; - border-radius: 50%; - - span { - display: block; - font-size: 26px; - text-align: center; - } - } - - .avatar--icon { - text-align: center; - } - - .user-img, - %user-img { - display: inline-block; - overflow: hidden; - text-align: center; - vertical-align: middle; - background-color: lighten($md-gray-40, 25%); - background-image: none; - background-repeat: no-repeat; - background-size: cover; - border-radius: 50%; - - .icon { - margin: 0; - color: $md-white-100; - } - } -} diff --git a/scss/ng/badge.scss b/scss/ng/badge.scss deleted file mode 100644 index f59cc2750b..0000000000 --- a/scss/ng/badge.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import '../components/badge/badge'; - -// TODO: Remove depreciated Symphony, Foundation and Bootstrap selectors after converting in Atlas -@include exports('label-bem') { - .badge, - .badge-default { - @extend %#{$badge__class}; - - &.radius { - @include badge-style(false, true); - } - - &.round, - &--round { - @extend %#{$badge__class}--round; - } - - &.primary, - &.badge-primary { - @extend %#{$badge__class}--blue; - } - - &.alert, - &.badge-danger, - &.danger { - @extend %#{$badge__class}--red; - } - - &.warning, - &.badge-warning { - @extend %#{$badge__class}--yellow; - } - - &.success, - &.badge-success { - @extend %#{$badge__class}--green; - } - - &.secondary, - &.badge-secondary { - @extend %#{$badge__class}; - } - - &.info, - &.badge-info { - @extend %#{$badge__class}--mint; - } - - &:empty { - display: none; - } - } -} diff --git a/scss/ng/breadcrumbs.scss b/scss/ng/breadcrumbs.scss deleted file mode 100644 index 5b0a6d1bad..0000000000 --- a/scss/ng/breadcrumbs.scss +++ /dev/null @@ -1,7 +0,0 @@ -// @import '../tools/mixins/spacing'; -@include exports('ng-breadcrumbs') { - .md-breadcrumbs { - @include vr-spacing(ph, 0); - @include vr-spacing(pb, 1.5); - } -} diff --git a/scss/ng/button.scss b/scss/ng/button.scss deleted file mode 100644 index a8cccbfeb5..0000000000 --- a/scss/ng/button.scss +++ /dev/null @@ -1,107 +0,0 @@ -// @import '../components/button/button'; -// @import '../typography/settings'; - -// TODO: Remove deprecated Symphony, Foundation and Bootstrap selectors after converting in Atlas -@include exports('symphony-buttons') { - .button, - .btn { - @extend %#{$button__class}; - - &.secondary, - &.primary, - &.btn-primary, - &.btn--primary, - &.button--primary { - @extend %#{$button__class}--blue; - } - - &.info, - &.btn-info, - &.btn--people, - &.btn--info, - &.button--people, - &.button--info { - @extend %#{$button__class}--mint; - } - - &.btn-danger, - &.alert, - &.alerts, - &.btn--negative, - &.btn--end, - &.btn--alert, - &.btn--alerts, - &.button--negative, - &.button--end, - &.button--alert, - &.button--alerts { - @extend %#{$button__class}--red; - } - - &.success, - &.btn-success, - &.btn--cta, - &.btn--success, - &.button--cta, - &.button--success { - @extend %#{$button__class}--green; - } - - &.warning, - &.btn-warning, - &.btn--attention, - &.btn--warning, - &.button--attention, - &.button--warning { - @extend %#{$button__class}--yellow; - } - - &.btn-link, - &.btn--link, - &.button-link, - &.button--link { - @extend %#{$button__class}--link; - } - - &.btn-block { - @extend %#{$button__class}--expand; - } - - &.left-align { - @extend %#{$button__class}--left; - } - - &.right-align { - @extend %#{$button__class}--right; - } - - &.circle-small { - @extend %#{$button__class}--circle; - } - - &.btn-none, - &.btn--none, - &.button-none, - &.button--none { - @extend %#{$button__class}--none; - } - - &.btn--meetings, - &.button--meetings { - @extend %#{$button__class}--orange; - } - } - - //firefox 2px fix - button::-moz-focus-inner { - padding: 0; - border: 0; - } -} - -.md-button-group { - .md-button { - font-family: $brand-font-light; - font-size: 1rem; - } -} diff --git a/scss/ng/call-destination.scss b/scss/ng/call-destination.scss deleted file mode 100644 index be76c828a4..0000000000 --- a/scss/ng/call-destination.scss +++ /dev/null @@ -1,35 +0,0 @@ -@include exports('ng-avatar') { - md-call-destination { - .call-dest-button { - margin: 0; - color: $md-theme-50; - background-color: white; - border: 1px solid $md-theme-50; - border-radius: 0; - - @include vr-spacing(mt, 2.5); - @include vr-spacing(mb, 3); - - &:hover, - &:active { - color: white; - background-color: $md-theme-50; - } - - &:first-child { - border-bottom-left-radius: 2px; - border-top-left-radius: 2px; - } - - &:last-child { - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - } - - .current-selection { - color: white; - background-color: $md-theme-50; - } - } -} diff --git a/scss/ng/card-member.scss b/scss/ng/card-member.scss deleted file mode 100644 index 019857784a..0000000000 --- a/scss/ng/card-member.scss +++ /dev/null @@ -1,100 +0,0 @@ -// @import '../colors/settings'; -// @import './avatar'; - -@include exports('ng-card-member') { - .card-member { - float: none; - width: 16.5rem; - padding-right: 0; - padding-left: 0; - margin: 0.5rem 1rem 0.5rem 0; - color: $md-gray-70; - background-color: $md-white-100; - border-radius: 2px; - box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18); - - p { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .upper-panel { - display: flex; - align-items: center; - - .left-panel { - @extend %user-img; - - width: 35px; - height: 35px; - margin: 1rem; - - .icon { - line-height: 35px; - - &.icon-user { - bottom: -5px; - font-size: 30px; - } - - &.icon-location { - font-size: 16px; - } - } - } - - .middle-panel { - width: 10rem; - - .title { - font-size: 16px; - color: $md-black-100; - } - } - - .right-panel { - .icon { - bottom: -5px; - font-size: 1.5rem; - color: $md-gray-90; - - &.icon-exit { - margin-left: 0.65rem; - font-size: 1rem; - } - } - } - } - - .lower-panel { - display: flex; - max-height: 261px; - overflow-y: auto; - flex-direction: column; - - .sub-panel { - display: flex; - margin: 0.5rem 2rem; - flex: 0 0 auto; - flex-direction: row; - - &:first-of-type { - margin-top: 1.5rem; - } - - .description { - display: flex; - flex-direction: column; - } - } - - .remove { - margin: 0 2rem 1rem 2rem; - font-family: $brand-font-light; - font-size: 14px; - color: $md-red-50; - } - } - } -} diff --git a/scss/ng/card-number.scss b/scss/ng/card-number.scss deleted file mode 100644 index 6e33ed9564..0000000000 --- a/scss/ng/card-number.scss +++ /dev/null @@ -1,43 +0,0 @@ -// @import '../colors/settings'; - -@include exports('ng-card-number') { - .md-card-number { - display: flex; - width: 16.5rem; - padding: 1rem; - margin: 0.5rem; - color: $md-gray-70; - background-color: $md-white-100; - border-radius: 2px; - box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18); - align-items: center; - justify-content: space-between; - - p { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .left-panel { - width: 10rem; - - .title { - font-size: 16px; - color: $md-black-100; - } - } - - .right-panel { - .icon { - bottom: -5px; - font-size: 1.5rem; - color: $md-gray-70; - - &.icon-exit { - font-size: 1rem; - } - } - } - } -} diff --git a/scss/ng/card.scss b/scss/ng/card.scss deleted file mode 100644 index c69df271fc..0000000000 --- a/scss/ng/card.scss +++ /dev/null @@ -1,1073 +0,0 @@ -@include exports('ng-card') { - .md-ng1-card-container { - display: flex; - width: 100%; - padding-right: $page-side-padding - $card-padding-horizontal; - padding-left: $page-side-padding - $card-padding-horizontal; - flex-direction: column; - - &.multiple-layouts { - @media #{$small-up} { - display: inline; - } - - @media #{$large-up} { - display: flex; - flex-direction: row; - } - } - } - - .md-ng1-card-layout { - &.md-ng1-card-block { - @include vr-spacing(ph, 1); - @include grid-row($behavior: nest); - - display: flex; - flex-wrap: wrap; - align-content: flex-start; - - & > .md-ng1-card { - display: flex; - clear: none !important; - } - } - - &.fourth, - &.md-ng1-card-layout--fourth { - @media #{$small-up} { - width: 100%; - } - - @media #{$medium-up} { - width: 100%; - max-width: 50%; - } - - @media #{$large-up} { - width: 25%; - } - } - - &.three-fourths, - &.md-ng1-card-layout--three-fourths { - @media #{$small-up} { - width: 100%; - } - - @media #{$large-up} { - width: 75%; - } - } - - &.third, - &.md-ng1-card-layout--third { - @media #{$small-up} { - width: 100%; - } - - @media #{$large-up} { - width: 33.3334%; - } - } - - &.two-thirds, - &.md-ng1-card-layout--two-thirds { - @media #{$small-up} { - width: 100%; - } - - @media #{$large-up} { - width: 66.6667%; - } - } - } - - .md-ng1-card { - float: left; - line-height: $base-line-height; - - @include vr-spacing(mt, 1); - @include vr-spacing(ph, $card-padding-horizontal); - - &.small, - &.md-ng1-card--small { - @media #{$small-up} { - width: 100%; - } - - @media #{$medium-up} { - width: 50%; - } - - @media #{$large-up} { - width: 25%; - } - } - - &.medium, - &.md-ng1-card--medium { - @media #{$small-up} { - width: 100%; - } - - @media #{$medium-up} { - width: 50%; - } - - @media #{$large-up} { - width: 33.3334%; - } - } - - &.large, - &.md-ng1-card--large { - @media #{$small-up} { - width: 100%; - } - - @media #{$medium-up} { - width: 66.6667%; - } - - @media #{$large-up} { - width: 50%; - } - } - - &.x-large, - &.md-ng1-card--x-large { - @media #{$small-up} { - width: 100%; - } - - @media #{$medium-up} { - width: 100%; - } - - @media #{$large-up} { - width: 66.6667%; - } - } - - &.full, - &.md-ng1-card--full { - @media #{$small-up} { - width: 100%; - } - } - - > article { - position: relative; - display: flex; - width: 100%; - color: $text-color; - vertical-align: top; - background-color: $card-color; - border-radius: $card-border-radius; - box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18); - flex-direction: column; - - header { - width: 100%; - text-align: left; - border-top-right-radius: $card-border-radius; - border-top-left-radius: $card-border-radius; - - @include vr-spacing(ph, 1); - @include vr-spacing(pt, 0.5); - - &.align-right { - text-align: right; - } - - &.align-center { - text-align: center; - } - - .header-with-right-icon { - display: flex; - justify-content: space-between; - align-items: center; - - h5 { - @include vr-spacing(pr, 1); - } - - button { - @include vr-spacing(p, 0); - } - } - - i.icon-arrow-next:before { - display: inline-block; - transform: rotate(90deg); - transition: all 0.25s ease 0s; - } - - &.open-panel i.icon-arrow-next:before { - transform: rotate(-90deg); - } - } - - footer { - width: 100%; - - @include vr-spacing(ph, 1.5); - @include vr-spacing(pb, 1); - - &.footer-menu { - display: flex; - color: $md-gray-40; - background-color: $md-gray-10; - justify-content: space-between; - align-items: center; - - @include vr-spacing(pt, 0.5, 1px); - @include vr-spacing(pb, 0.5, 2px); - @include vr-spacing(ph, 1.5); - - .footer-content { - display: flex; - width: 100%; - min-height: rem(20); - align-items: center; - } - - &.overview-footer-content-trial { - .footer-content { - justify-content: space-between; - } - } - - &.overview-footer-content { - .footer-content { - justify-content: flex-end; - } - } - - .footer-icons { - display: flex; - font-size: rem(20); - align-items: center; - - a { - color: $md-gray-40; - - &:focus { - box-shadow: none; - } - } - - .menu-icon { - &:hover { - cursor: pointer; - } - } - } - - .right-footer-icons { - justify-content: flex-end; - } - } - } - } - - &.medium, - &.md-ng1-card--medium, - &.large, - &.md-ng1-card--large, - &.full, - &.md-ng1-card--full { - > article { - header { - @include vr-spacing(ph, 1.5); - @include vr-spacing(pt, 1.5); - } - } - } - - .full.no-padding { - > article { - header { - padding: 0; - } - } - } - - .card-menu { - width: 0; - height: 0; - overflow: hidden; - transform: translateY(100%); - transition: transform 0.6s ease; - - &.open { - position: absolute; - top: 0; - width: 100%; - height: 100%; - color: $md-gray-30; - background-color: rgba(52, 53, 55, 0.98); - transform: translateY(0); - transition: transform 0.6s ease; - } - - .card-menu-heading { - @include vr-spacing(p, 1.5); - - display: flex; - font-size: rem(26); - justify-content: space-between; - } - } - - &.header-border { - header { - border-bottom: 1px solid $card-divider-color; - - @include vr-spacing(pb, 1); - } - } - - &.header-bar { - header { - position: relative; - - &:after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 5px; - border-top: 5px solid $md-theme-50; - border-top-right-radius: $card-border-radius; - border-top-left-radius: $card-border-radius; - content: ' '; - } - } - - &.meetings { - header { - &:after { - border-top: 5px solid $md-orange-50; - } - } - } - - &.people { - header { - &:after { - border-top: 5px solid $md-mint-50; - } - } - } - - &.cta { - header { - &:after { - border-top: 5px solid $md-green-50; - } - } - } - - &.negative { - header { - &:after { - border-top: 5px solid $md-red-50; - } - } - } - - &.attention { - header { - &:after { - border-top: 5px solid $md-yellow-50; - } - } - } - - &.alerts { - header { - &:after { - border-top: 5px solid $md-red-50; - } - } - } - - &.gray { - header { - &:after { - border-top: 5px solid $md-gray-40; - } - } - } - } - - &.header-img { - > article { - header { - @include vr-spacing(p, 0); - - img { - width: 100%; - border-top-right-radius: $card-border-radius; - border-top-left-radius: $card-border-radius; - } - } - } - } - - &.section-background section { - background-color: $card-background; - - p, - .card-checkbox, - ul { - margin-top: $card-padding-top; - } - } - - &.header-background { - header { - width: 100%; - color: $md-white-100; - background-color: $md-theme-50; - border-top-right-radius: $card-border-radius; - border-top-left-radius: $card-border-radius; - - @include vr-spacing(pv, 0.5); - - a { - color: $md-white-100; - } - - h4, - h5 { - color: $md-white-100; - } - } - - &.small, - &.md-ng1-card--small, - &.medium, - &.md-ng1-card--medium, - &.large, - &.md-ng1-card--large, - &.x-large, - &.md-ng1-card--x-large &.full, - &.md-ng1-card--full { - > article { - header { - @include vr-spacing(ph, 1.5); - @include vr-spacing(pv, 0.5); - } - } - } - - &.gray { - header { - background-color: $md-gray-70; - } - } - - &.people { - header { - background-color: $md-mint-50; - } - } - - &.meetings { - header { - background-color: $md-orange-50; - } - } - - &.eggplant { - header { - background-color: $md-purple-50; - } - } - - &.negative { - header { - background-color: $md-red-50; - } - } - - &.cta { - header { - background-color: $md-green-50; - } - } - - &.attention { - header { - background-color: $md-yellow-50; - } - } - - &.alerts { - header { - background-color: $md-red-50; - } - } - - &.gray, - &.people, - &.meetings, - &.eggplant, - &.negative, - &.cta, - &.attention, - &.alerts { - header { - a:hover, - button:hover { - color: $md-gray-20; - } - } - } - } - - section { - width: 100%; - overflow: auto; - flex: 1 1 auto; - - p, - ul, - .card-section-content, - .card-notification, - .card-checkbox { - @include vr-spacing(ph, 1); - @include vr-spacing(pv, 1); - } - - .card-button { - display: flex; - text-align: center; - flex-direction: column; - - @include vr-spacing(pl, 1.5); - @include vr-spacing(pr, 1.5); - - button { - @include vr-spacing(mb, 0.5); - } - } - - h4 { - @include vr-spacing(pt, 1); - } - - &.section-img > img { - width: 100.8%; - } - - .card-checkbox md-checkbox { - display: block; - } - - .card-radio { - height: 100%; - } - - fieldset { - @include vr-spacing(m, 0); - } - - ul { - li, - div > a { - overflow: hidden; - line-height: 1.5rem; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - - &.medium, - &.md-ng1-card--medium, - &.large, - &.md-ng1-card--large, - &.x-large, - &.md-ng1-card--x-large &.full, - &.md-ng1-card--full { - p, - ul, - .card-section-content, - .card-notification, - .card-checkbox, - .card-button { - @include vr-spacing(ph, 1.5); - @include vr-spacing(pv, 1); - } - - .card-notification { - .notification-msg { - @include vr-spacing(pt, 1); - - display: inline-flex; - border-bottom: 1px solid $md-gray-20; - - @media #{$large-up} { - flex-direction: row; - } - - .msg { - padding-left: rem(16); - font-family: $brand-font-light; - line-height: rem(24); - color: $md-gray-70; - - @media #{$large-up} { - width: 66.7%; - } - } - - &:last-child { - border-bottom: none; - } - } - } - } - - &.md-ng1-card--1, - &.md-ng1-card--2, - &.md-ng1-card--3, - &.md-ng1-card--4, - &.md-ng1-card--5, - &.md-ng1-card--6, - &.md-ng1-card--7, - &.md-ng1-card--8, - &.md-ng1-card--9, - &.md-ng1-card--10, - &.md-ng1-card--11, - &.md-ng1-card--12 { - width: 100%; - } - } - - @media #{$medium-up} { - .md-ng1-card { - &.md-ng1-card--1 { - width: 8.33333%; - } - - &.md-ng1-card--2 { - width: 16.66667%; - } - - &.md-ng1-card--3 { - width: 25%; - } - - &.md-ng1-card--4 { - width: 33.33333%; - } - - &.md-ng1-card--5 { - width: 41.66667%; - } - - &.md-ng1-card--6 { - width: 50%; - } - - &.md-ng1-card--7 { - width: 58.33333%; - } - - &.md-ng1-card--8 { - width: 66.66667%; - } - - &.md-ng1-card--9 { - width: 75%; - } - - &.md-ng1-card--10 { - width: 83.33333%; - } - - &.md-ng1-card--11 { - width: 91.66667%; - } - - &.md-ng1-card--12 { - width: 100%; - } - } - } - - .service-card { - display: flex; - width: 100%; - height: 100%; - justify-content: space-around; - - div { - &.left-side { - width: 50%; - border-right: 1px solid $md-gray-20; - - @include vr-spacing(mv, 1.5); - @include vr-spacing(pv, 2); - @include vr-spacing(ph, 1.5, 1px); - - @media #{$small-up} { - border-bottom: 1px solid $md-gray-20; - - @include vr-spacing(mh, 1.5); - } - - @media #{$medium-up} { - @include grid-column($columns: 6); - - border-right: 1px solid $md-gray-20; - border-bottom: none; - - @include vr-spacing(mh, 0); - } - - .service-name { - display: flex; - align-items: center; - - span { - font-family: $brand-font-thin; - font-size: rem(36); - color: $md-gray-70; - } - } - - &.no-line { - border-right: none; - border-bottom: none; - } - - &.long-overview-title { - @include vr-spacing(pb, 3.25); - } - } - - &.right-side { - width: 50%; - - @include vr-spacing(pv, 1.5); - @include vr-spacing(ph, 1); - - @media #{$small-up} { - @include vr-spacing(mh, 1.5); - } - - @media #{$medium-up} { - @include grid-column($columns: 6); - } - - p { - @include vr-spacing(ph, 0); - } - - .overview-title { - font-family: $brand-font-light; - color: $md-theme-50; - } - - .overview-count { - @include vr-spacing(pt, 1); - - font-family: $brand-font-thin; - font-size: rem(48); - line-height: 1; - - &.last { - color: $md-gray-30; - } - - &.current { - color: $text-color; - } - } - - .overview-time { - color: $md-gray-30; - } - } - } - } - - .site-overview { - section { - padding-top: 32px; - padding-bottom: 32px; - } - - a { - font-size: rem(16); - } - } - - .configure-card { - display: flex; - justify-content: space-around; - - @media #{$small-up} { - flex-direction: column; - } - - @media #{$medium-up} { - flex-direction: row; - } - - div { - &.left-side { - @include vr-spacing(pt, 2); - @include vr-spacing(pb, 1); - @include vr-spacing(ph, 1.5, 1px); - - @media #{$small-up} { - width: 100%; - border-right: none; - border-bottom: 1px solid $md-gray-20; - } - - @media #{$medium-up} { - width: 50%; - border-bottom: none; - } - - @media #{$large-up} { - width: 33.333%; - } - - .service-name { - display: inline-flex; - align-items: flex-start; - justify-content: center; - - span { - padding-left: 15px; - font-family: $brand-font-extra-light; - font-size: rem(32); - } - } - } - - &.right-side { - display: flex; - justify-content: flex-end; - - @media #{$small-up} { - width: 100%; - } - - @media #{$medium-up} { - width: 50%; - } - - @media #{$large-up} { - width: 66.667%; - } - - .configure-card-heading { - @include vr-spacing(pl, 0.5); - - @media #{$small-up} { - width: 100%; - text-align: center; - } - - @media #{$large-up} { - width: 50%; - } - } - - .configure-content { - display: flex; - - @media #{$small-up} { - flex-direction: column; - justify-content: center; - } - - @media #{$medium-up} { - flex-wrap: wrap; - flex-direction: row; - } - - @media #{$large-up} { - flex-wrap: nowrap; - justify-content: space-around; - } - - > div { - @media #{$medium-up} { - width: 50%; - } - } - } - - .overview-title { - font-family: $brand-font-light; - color: $md-theme-50; - } - - .overview-count { - @include vr-spacing(pt, 1); - - font-family: $brand-font-thin; - font-size: rem(48); - line-height: 1; - color: $md-mint-50; - } - - .overview-icon { - @include vr-spacing(pv, 1); - @include vr-spacing(ph, 1.5); - - display: flex; - flex-direction: column; - - i { - font-size: rem(48); - color: $text-color; - - &:hover { - color: $link-hover-color; - } - } - } - } - } - } - - .footer-content { - i { - font-size: rem(8); - - @include vr-spacing(pr, 0.5); - @include vr-baseline(12, 14, false, 2); - } - - ul { - @include vr-spacing(ph, 0); - - text-align: left; - list-style-type: none; - } - } - - .card-circle-icon { - display: block; - width: rem(32); - height: rem(32); - text-align: center; - background-color: $md-gray-10; - border-radius: 50%; - - @include vr-spacing(p, 0.25); - @include vr-spacing(pt, 0.5); - } - - .overview-card { - article { - text-align: center; - - header { - text-align: center; - - @include vr-spacing(pt, 1); - @include vr-spacing(pb, 0.5); - } - - .overview-info { - font-family: $brand-font-light; - font-size: rem(16); - color: $md-gray-40; - - @include vr-spacing(pv, 1); - } - - .overview-count { - margin-bottom: 0.5rem; - font-family: $brand-font-thin; - font-size: rem(48); - color: $md-theme-50; - } - - .last-count { - font-size: rem(14); - color: $md-gray-70; - } - - .footer-content { - .label { - font-family: $brand-font-regular; - font-size: rem(12); - } - } - } - } - - .overview-header { - display: flex; - font-family: $brand-font-extra-light; - font-size: rem(26); - color: $md-gray-90; - align-items: center; - justify-content: center; - - span { - margin-top: 2px; - font-size: inherit; - line-height: 1; - } - - i { - margin-right: 0.5rem; - font-size: rem(32); - color: $md-gray-70; - } - } - - .overview-paragraph { - font-size: rem(16); - color: $md-gray-70; - } - - .side-info-card { - header { - div { - font-family: $brand-font-light; - font-size: rem(20); - color: $md-gray-70; - } - } - - .overview-info { - text-align: center; - - .overview-count { - font-family: $brand-font-thin; - font-size: rem(36); - color: $md-yellow-50; - } - } - - .footer-content { - @include vr-spacing(pl, 0.5); - @include vr-spacing(mt, 1); - - ul { - @include vr-spacing(p, 0); - @include vr-spacing(pt, 1); - - font-family: $brand-font-light; - border-top: 1px solid $md-gray-20; - } - } - } - } diff --git a/scss/ng/combo-box.scss b/scss/ng/combo-box.scss deleted file mode 100644 index 6d15888da5..0000000000 --- a/scss/ng/combo-box.scss +++ /dev/null @@ -1,95 +0,0 @@ -// @import '../settings/core'; -// @import '../tools/mixins/baseline'; -// @import '../tools/mixins/spacing'; - -@include exports('ng-combobox') { - .combo-box { - position: relative; - width: 100%; - min-height: rem-calc(36); - - input { - height: rem-calc(36); - } - - .dropdown-menu { - width: 100%; - } - - .combo-btn { - @include vr-baseline(26, 28, 2px); - @include vr-spacing(ph, 0); - - position: relative; - right: #{vr-adjust(8)}; - height: rem-calc(34); - min-width: initial; - background-color: transparent; - border: none; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - - i { - margin: 0; - font-size: 26px; - color: $md-gray-50; - vertical-align: middle; - - @include vr-baseline(26, 28, 2px); - } - - &:focus { - border-color: transparent; - outline: 0; - box-shadow: none; - } - - .has-error & { - border-color: transparent; - box-shadow: 0 0 0 2px $md-red-50; - } - } - - .combo-input { - display: inline-flex; - width: 100%; - border: 1px solid $md-gray-30; - border-radius: $select-border-radius; - - input { - border: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - .combo-input, - .combo-btn { - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - } - - &.open .combo-input, - &.open .combo-btn, - .combo-input input:focus, - .combo-input input:focus + .combo-btn { - border-color: transparent; - box-shadow: 0 0 0 2px $focus-color; - - .has-error & { - border-color: transparent; - box-shadow: 0 0 0 2px $md-red-20; - } - } - } - - .combo-box-button { - position: absolute; - top: 0; - right: vr-adjust(4); - height: rem-calc(34); - } - - input[type='text']:disabled + div.combo-box-button > button.combo-btn { - cursor: default; - } -} diff --git a/scss/ng/datepicker.scss b/scss/ng/datepicker.scss deleted file mode 100644 index 62880dd470..0000000000 --- a/scss/ng/datepicker.scss +++ /dev/null @@ -1,352 +0,0 @@ -// @import '../colors/settings'; -// @import '../typography/settings'; - -@include exports('ng-datepicker') { - $datepicker-width: 211px !default; - $daypicker-day-width: 22px !default; - $datepicker-large-width: $datepicker-width + 25px !default; - $daypicker-large-day-width: 30px; - - .md-datapicker-normal { - max-width: 100%; - overflow: hidden; - font-size: 14px; - line-height: 28px; - cursor: pointer; - background-color: $md-white-100; - border: 1px solid $md-gray-20; - border-radius: 5px; - - i { - display: inline-block; - padding-left: 3px; - font-size: 24px; - color: $md-gray-30; - vertical-align: middle; - } - - input[type='text'][readonly] { - &.md-datepicker-input { - display: inline-block; - width: calc(100% - 57px); - height: 28px; - padding: 3px; - margin-top: 2px; - margin-bottom: 3px; - vertical-align: middle; - cursor: pointer; - background-color: $md-white-100; - border: none; - - &:focus { - box-shadow: none; - } - - &.close-hidden { - width: calc(100% - 32px); - } - } - } - - .md-close { - display: inline-block; - margin-right: 6px; - font-weight: 450; - - &:before { - font-size: $font-size-base; - } - - // algendel temp. override for _styles/temp.scss - &:hover { - color: $md-gray-70; - } - } - - &.calendar-opened { - border-bottom-color: $md-theme-50; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - - /** - * Adding disabled state - */ - - &.disabled { - background-color: $md-gray-10; - - input[type='text'][readonly] { - &.md-datepicker-input { - background-color: $md-gray-10; - } - } - } - - /** - * Adding large datepicker - */ - &.large { - max-width: $datepicker-large-width; - font-family: $brand-font-light; - font-size: 17px; - line-height: 43px; - - i { - font-size: 34px; - } - - input[type='text'][readonly] { - &.md-datepicker-input { - width: calc(100% - 77px); - height: 43px; - } - } - - .md-close { - margin-right: 10px; - - &:before { - font-size: ($font-size-base * 1.5); - } - } - } - } - - .md-datepicker-input { - pointer-events: none; - } - - .md-datepicker { - position: absolute; - z-index: 2; - display: inline-block; - width: calc(100% - 1rem); - padding: 0; - padding-right: 10px; - padding-left: 10px; - margin: 0; - margin-top: 0px; - font-family: $brand-font-regular; - font-size: $font-size-large; - color: $text-color; - text-align: center; - background: $md-white-100; - border: 1px solid $md-gray-20; - border-top: none; - border-radius: 5px; - border-top-right-radius: 0; - border-top-left-radius: 0; - - .calendar-wrapper { - width: 100%; - margin: 0 auto; - } - - .controls { - display: inline-block; - width: 100%; - padding: 5px 0 0; - - i { - font-size: 15px; - cursor: pointer; - } - - .left { - display: inline-block; - margin: 5px 0 0; - - i.prev-year-btn { - display: block; - float: left; - font-size: 14px; - opacity: 0.4; - } - - i.prev-month-btn { - display: block; - float: left; - margin: -5px 0 0 9px; - } - } - - span.date { - float: left; - width: 90%; - padding: 5px 0 0; - font-size: 14px; - font-weight: 750; - color: $md-gray-40; - text-align: center; - } - - .right { - display: inline-block; - margin: 5px 0 0; - - i.next-year-btn { - display: block; - float: left; - font-size: 14px; - opacity: 0.4; - } - - i.next-month-btn { - float: left; - margin: -6px 9px 0 0; - } - } - } - - .day-names { - display: inline-block; - width: 100%; - border-bottom: 1px solid $md-gray-20; - - > span { - display: block; - float: left; - width: calc(100% / 7 - 4px); - margin: 0 2px; - text-align: center; - - > span { - font-size: $font-size-small; - color: $md-gray-30; - text-align: center; - } - } - } - - .calendar { - display: inline-block; - width: 100%; - padding: 0; - margin: -3px 0 -4px -1px; - - span.day-wrapper { - position: relative; - float: left; - width: calc(100% / 7); - padding-bottom: calc(100% / 7); - overflow: hidden; - - span.day { - position: absolute; - display: block; - width: 90%; - height: 90%; - /* = 100% - 2*5% padding */ - padding: 5%; - font-size: $font-size-small; - color: $text-color; - text-align: center; - cursor: pointer; - border: 1px solid transparent; - - .day-table { - display: table; - width: 100%; - height: 100%; - } - - .day-cell { - display: table-cell; - width: 100%; - height: 100%; - font-size: 0.75rem; - line-height: 1.5rem; - vertical-align: middle; - } - - &.today { - font-weight: 750; - } - - &:hover { - background-color: transparent; - border: 1px solid $md-theme-50; - border-radius: 50%; - } - } - - span.day.disabled { - color: $md-gray-20; - pointer-events: none; - cursor: default; - background-color: $md-white-100; - } - - span.day.inactive { - color: $md-gray-20; - cursor: default; - background-color: $md-white-100; - - &:hover { - background-color: $md-gray-10; - border-color: $md-gray-10; - } - - &:focus { - background-color: $md-gray-10; - border-color: $md-gray-10; - box-shadow: none; - } - } - - span.day.selected-date { - color: $md-white-100; - background-color: $md-theme-50; - border-radius: 50%; - } - } - } - - /** - * Adding large datepicker - * AG 05/31/17 - the datepicker is responsive so I don't think this is necessary - */ - &.large { - width: $datepicker-large-width; - font-family: $brand-font-light; - font-size: $font-size-large; - - .controls { - width: $datepicker-large-width - 20px; - - i { - font-size: 19px; - } - } - - .calendar { - span { - span.day { - padding-top: 5px; - font-size: 13px; - } - } - } - - .day-names { - width: $datepicker-large-width - 19px; - - span { - width: 27px; - } - } - - .calendar { - width: $datepicker-large-width; - - span { - span.day { - width: $daypicker-large-day-width; - height: $daypicker-large-day-width; - } - } - } - } - } -} diff --git a/scss/ng/dragdrop.scss b/scss/ng/dragdrop.scss deleted file mode 100644 index 70fd0bd903..0000000000 --- a/scss/ng/dragdrop.scss +++ /dev/null @@ -1,41 +0,0 @@ -// @import '../colors/settings'; - -@include exports('ng-dragdrop') { - .sortable .icon-hamburger-menu { - cursor: move; - } - - .sortable { - &:hover { - cursor: move; - background: $md-gray-30; - } - - &:focus { - outline: none; - } - } - - .drag-placeholder { - background: $md-gray-20; - } - - .gu-mirror { - position: fixed !important; - z-index: 9999 !important; - margin: 0 !important; - opacity: 0.8; - } - - .gu-hide { - display: none !important; - } - - .gu-unselectable { - user-select: none !important; - } - - .gu-transit { - opacity: 0.2; - } -} diff --git a/scss/ng/dropdown.scss b/scss/ng/dropdown.scss deleted file mode 100644 index 97c8810dad..0000000000 --- a/scss/ng/dropdown.scss +++ /dev/null @@ -1,444 +0,0 @@ -// @import '../colors/settings'; -// @import '../settings/core'; -// @import '../settings/dropdown'; -// @import '../tools/functions/core'; -// @import '../tools/mixins/core'; - -@mixin dropdown-container( - $content: list, - $triangle: true, - $max-width: $f-dropdown-max-width -) { - position: absolute; - left: -9999px; - display: none; - list-style: $f-dropdown-list-style; - margin-#{$default-float}: 0; - - &.open { - display: block; - } - - > *:first-child { - margin-top: 0; - } - - > *:last-child { - margin-bottom: 0; - } - - @if $content==list { - background: $f-dropdown-bg; - border: $f-dropdown-border-style - $f-dropdown-border-width - $f-dropdown-border-color; - font-size: $f-dropdown-font-size; - height: $f-dropdown-height; - max-height: $f-dropdown-max-height; - width: 100%; - z-index: 89; - } @else if $content==content { - background: $f-dropdown-bg; - border: $f-dropdown-border-style - $f-dropdown-border-width - $f-dropdown-border-color; - font-size: $f-dropdown-font-size; - height: $f-dropdown-height; - max-height: $f-dropdown-max-height; - padding: $f-dropdown-content-padding; - width: 100%; - z-index: 89; - } - - @if $triangle==bottom { - margin-top: $f-dropdown-margin-top; - - @if $f-dropdown-triangle-size !=0px { - &:before { - @include css-triangle( - $f-dropdown-triangle-size, - $f-dropdown-triangle-color, - bottom - ); - - position: absolute; - top: -($f-dropdown-triangle-size * 2); - z-index: 89; - #{$default-float}: $f-dropdown-triangle-side-offset; - } - - &:after { - @include css-triangle( - $f-dropdown-triangle-size + 1, - $f-dropdown-border-color, - bottom - ); - - position: absolute; - top: -(($f-dropdown-triangle-size + 1) * 2); - z-index: 88; - #{$default-float}: $f-dropdown-triangle-side-offset - 1; - } - - &.right:before { - #{$default-float}: auto; - #{$opposite-direction}: $f-dropdown-triangle-side-offset; - } - - &.right:after { - #{$default-float}: auto; - #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1; - } - } - } - - @if $triangle==$default-float { - margin-top: 0; - margin-#{$default-float}: $f-dropdown-margin-right; - - &:before { - @include css-triangle( - $f-dropdown-triangle-size, - $f-dropdown-triangle-color, - #{$opposite-direction} - ); - - position: absolute; - top: $f-dropdown-triangle-side-offset; - z-index: 89; - #{$default-float}: -($f-dropdown-triangle-size * 2); - } - - &:after { - @include css-triangle( - $f-dropdown-triangle-size + 1, - $f-dropdown-border-color, - #{$opposite-direction} - ); - - position: absolute; - top: $f-dropdown-triangle-side-offset - 1; - z-index: 88; - #{$default-float}: -($f-dropdown-triangle-size * 2) - 2; - } - } - - @if $triangle==$opposite-direction { - margin-top: 0; - margin-#{$default-float}: -$f-dropdown-margin-right; - - &:before { - @include css-triangle( - $f-dropdown-triangle-size, - $f-dropdown-triangle-color, - #{$default-float} - ); - - position: absolute; - top: $f-dropdown-triangle-side-offset; - z-index: 89; - #{$opposite-direction}: -($f-dropdown-triangle-size * 2); - #{$default-float}: auto; - } - - &:after { - @include css-triangle( - $f-dropdown-triangle-size + 1, - $f-dropdown-border-color, - #{$default-float} - ); - - position: absolute; - top: $f-dropdown-triangle-side-offset - 1; - z-index: 88; - #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2; - #{$default-float}: auto; - } - } - - @if $triangle==top { - margin-left: 0; - margin-top: -$f-dropdown-margin-bottom; - - &:before { - @include css-triangle( - $f-dropdown-triangle-size, - $f-dropdown-triangle-color, - top - ); - - position: absolute; - top: auto; - bottom: -($f-dropdown-triangle-size * 2); - z-index: 89; - #{$default-float}: $f-dropdown-triangle-side-offset; - #{$opposite-direction}: auto; - } - - &:after { - @include css-triangle( - $f-dropdown-triangle-size + 1, - $f-dropdown-border-color, - top - ); - - position: absolute; - top: auto; - bottom: -($f-dropdown-triangle-size * 2) - 2; - z-index: 88; - #{$default-float}: $f-dropdown-triangle-side-offset - 1; - #{$opposite-direction}: auto; - } - } - - @if $max-width { - max-width: $max-width; - } @else { - max-width: $f-dropdown-max-width; - } -} - -@mixin dropdown-style { - margin: 0; - font-size: $f-dropdown-font-size; - line-height: $f-dropdown-line-height; - cursor: $cursor-pointer-value; - - &:hover, - &:focus, - &.hover, - &.focus { - background: $f-dropdown-list-hover-bg; - } - - &.radius { - @include radius($f-dropdown-radius); - } - - a, - span { - display: block; - padding: $f-dropdown-list-padding; - color: $f-dropdown-font-color; - } -} - -@include exports('ng-dropdown') { - /* Foundation Dropdowns */ - .f-dropdown { - @include dropdown-container(list, bottom); - - &.drop-#{$opposite-direction} { - @include dropdown-container(list, #{$default-float}); - } - - &.drop-#{$default-float} { - @include dropdown-container(list, #{$opposite-direction}); - } - - &.drop-top { - @include dropdown-container(list, top); - } - - // max-width: none; - li { - @include dropdown-style; - } - - // You can also put custom content in these dropdowns - &.content { - @include dropdown-container(content, $triangle: false); - } - - // Sizes - &.tiny { - max-width: 200px; - } - - &.small { - max-width: 300px; - } - - &.medium { - max-width: 500px; - } - - &.large { - max-width: 800px; - } - - &.mega { - width: 100% !important; - max-width: 100% !important; - - &.open { - left: 0 !important; - } - } - } -} - -/* begin dropdown override */ - -@include exports('ng-dropdown-ui') { - .dropdown, - [md-dropdown], - [md-dropdown] { - position: relative; - display: inline-block; - line-height: 0; - } - - /* Foundation Dropdowns */ - .actions-menu.open .dropdown-menu { - right: 14px; - left: auto; - } - - .dropdown-menu { - @include dropdown-container(list, false); - @include radius($f-dropdown-radius); - - top: calc(100%); - z-index: $f-dropdown-z-index; - width: auto; - max-width: none; - max-height: rem-calc(261); - border-color: $md-gray-30; - - &:not(.nested) { - overflow-y: auto; - } - - .sub-menu { - @extend %dropdown-menu; - - display: none; - } - - .open & { - &:not(.sub-menu) { - display: block !important; - visibility: visible !important; - } - - left: 0; - - .sub-menu { - left: calc(100% - 1px); - padding-left: inherit; - } - } - - // vertical dropdown styles for isVisible method inside dropdown/dropdown.js - [md-dropdown] &, - [md-dropdown] & { - &:not(.sub-menu) { - visibility: hidden; - } - - &.visible { - visibility: visible; - } - } - - &.nested { - .md-list-item { - a, - span { - padding: $f-dropdown-list-padding; - color: $f-dropdown-font-color; - } - } - } - - li { - @include dropdown-style; - - a, - span { - white-space: nowrap; - } - } - - .divider { - height: 1px; - margin: 9px 0; - overflow: hidden; - background-color: #ccc; - } - - .pull-right > & { - right: 0; - left: auto; - } - - // You can also put custom content in these dropdowns - &.content { - @include dropdown-container(content, $triangle: false); - } - - &.top { - top: auto; - bottom: 100%; - margin-bottom: 2px; - } - - // Sizes - &.tiny { - max-width: 200px; - } - - &.small { - max-width: 300px; - } - - &.medium { - max-width: 500px; - } - - &.large { - max-width: 800px; - } - - &.mega { - width: 100% !important; - max-width: 100% !important; - - &.open { - left: 0 !important; - } - } - } - - %dropdown-menu { - @extend .dropdown-menu; - } - - .dropdown.open { - i { - color: $md-gray-70; - } - } - - .dropdown-primary { - background: $md-white-100; - border: none; - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.18); - - li { - &:hover { - background: $md-gray-10; - } - - a { - padding: 6px 16px; - color: $md-gray-70; - - span { - padding: 0; - } - } - } - } -} diff --git a/scss/ng/formly.scss b/scss/ng/formly.scss deleted file mode 100644 index 90719e2135..0000000000 --- a/scss/ng/formly.scss +++ /dev/null @@ -1,85 +0,0 @@ -@include exports('ng-formly') { - .formly-field-inline { - display: flex; - flex-direction: row; - align-items: center; - - .form-inline.formly-field { - display: inline-flex; - margin-right: 5px; - - .formly-template-wrapper { - width: 100%; - } - } - - .form-inline.formly-field-radio { - label { - margin-bottom: 0; - } - } - - .form-inline.formly-field-input { - flex: 1; - - input { - width: 100%; - } - } - } - - .formly-template-wrapper { - .form-horizontal & { - display: flex; - align-items: center; - } - - .popover { - top: auto; - right: -14px; - bottom: 39px; - left: auto; - display: block; - width: rem-calc(165); - - .arrow { - right: 10px; - left: auto; - } - - ul { - padding: 0; - margin: 0; - } - - li { - line-height: 1; - list-style: none; - } - } - } - - form, - form.form, - form.form-horizontal, - form.form-inline { - .formly-input-wrapper { - position: relative; - display: flex; - align-items: center; - - .form-control-feedback { - position: relative; - top: auto; - // Indent the icon into the input control - right: 1.5rem; - // Offset the width of the icon for flex - margin-right: -1.5rem; - } - } - } - - .formly-field-group { - @extend .form-group; - } -} diff --git a/scss/ng/grid-filter.scss b/scss/ng/grid-filter.scss deleted file mode 100644 index 366a3847ee..0000000000 --- a/scss/ng/grid-filter.scss +++ /dev/null @@ -1,107 +0,0 @@ -// @import '../colors/settings'; -// @import '../typography/settings'; -// @import '../tools/functions/core'; - -@include exports('ng-grid-filter') { - .grid-filter { - float: left; - padding: 0; - font-size: 20px; - line-height: 20px; - color: $md-gray-50; - - .dropdown-toggle { - color: $md-theme-50; - - .icon { - font-size: 25px; - line-height: 20px; - color: $md-gray-90; - vertical-align: middle; - } - } - - ul { - padding: 0; - margin: 0; - } - - .dropdown-menu { - left: calc(100% - 30px); - } - - .filter { - cursor: pointer; - - span { - font-size: inherit; - } - - .count { - visibility: hidden; - } - } - } - - .screen-md, - .screen-lg { - .grid-filter { - padding: 0; - font-size: 1.25rem; - line-height: 20px; - color: $md-gray-50; - - & ul { - font-size: inherit; - } - - .filter { - display: inline-block; - cursor: pointer; - - a { - margin-right: 16px; - color: $md-gray-50; - - &:hover { - color: $md-theme-50; - text-decoration: none; - } - - &:focus { - color: $md-gray-50; - text-decoration: none; - border: none; - box-shadow: none; - } - } - - span { - font-size: 1rem; - } - - .name { - margin-right: 6px; - font-family: $brand-font-light; - } - - .count { - //font-weight: 750; - font-family: $brand-font-light; - visibility: visible; - } - - &:hover, - &:focus { - color: $md-theme-50; - } - } - - .active, - .active a { - color: $md-theme-50; - cursor: default; - } - } - } -} diff --git a/scss/ng/header-push.scss b/scss/ng/header-push.scss deleted file mode 100644 index 2d9d7ba84c..0000000000 --- a/scss/ng/header-push.scss +++ /dev/null @@ -1,74 +0,0 @@ -// @import '../colors/settings'; -// @import '../tools/mixins/easing'; - -@include exports('ng-header-push') { - .top-bar-admin .right { - .push-down-trigger { - font-size: 13px; - cursor: pointer; - - .md-button.btn--header { - position: relative; - top: 0; - - @include easing-transition(all, 500ms, $ease); - - &.open { - @include easing-transition(all, 500ms, $ease); - - background-color: $md-gray-10; - border-bottom: none; - box-shadow: 0px 2px 0px -1px $md-gray-10; - } - } - - .state-error, - .state-error:focus { - color: $md-red-50; - } - - .state-warning, - .state-warning:focus { - color: $md-yellow-60; - } - } - } - - .push-down-container { - @include easing-transition(all, 500ms, $easeInOutQuint); - - display: block; - max-height: 0px; - overflow: hidden; - - .icon-close { - float: right; - margin-top: 18px; - margin-right: 8px; - font-size: 26px; - color: $md-gray-40; - cursor: pointer; - } - - &.open { - max-height: none; - } - } - - .push-down-container-inner { - padding-top: 20px; - padding-right: 30px; - padding-bottom: 25px; - padding-left: 30px; - background-color: $md-gray-10; - border-bottom: solid 1px $md-gray-30; - } - - .push-label { - display: none; - - @media (min-width: 1070px) { - display: inline-block; - } - } -} diff --git a/scss/ng/header.scss b/scss/ng/header.scss deleted file mode 100644 index ef3778c426..0000000000 --- a/scss/ng/header.scss +++ /dev/null @@ -1,370 +0,0 @@ -// @import '../settings/core'; -// @import '../components/topbar/settings'; -// @import 'settings/topbar'; - -@include exports('ng-header') { - .top-bar-admin { - > .container-fluid { - display: flex; - justify-content: space-between; - } - - .top-bar-right { - margin-right: 0; - - & > div { - vertical-align: top; - border-right: 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; - } - } - } - - .top-bar-left { - flex: 1; - - .top-bar__transclude { - flex: 1; - } - } - - & .md-button, - button { - color: $md-gray-40; - } - - .top-bar-right, - .top-bar-left { - display: inline-flex; - - .dropdown-menu { - top: 100%; - padding-top: 10px; - } - - .md-button { - &:focus { - box-shadow: none; - } - } - - .btn--header { - height: vr-adjust(56); - padding: 0 18px; - font-size: 13px; - line-height: 50px; - background: none; - border: none; - border-radius: 0; - - &:hover, - &:focus { - color: $md-theme-50; - background-color: $top-bar-admin-link-hover-bg; - - .inverse & { - background-color: $md-white-100; - } - } - - .icon { - display: inline-block; - padding-right: 8px; - font-size: 20px; - vertical-align: middle; - - @media (max-width: 960px) { - padding-right: 0; - } - } - - .icon-settings { - font-size: 20px; - } - - .icon-search { - padding-right: 0; - font-size: 20px; - } - } - } - - .top-bar-brand { - margin-right: 0; - - .app-icon { - margin: 0 22px 0 6px; - } - - .icon { - display: inline-block; - margin-right: 30px; - font-size: 35px; - line-height: 30px; - } - - &:before { - margin-right: 0; - content: ''; - } - - .header-title { - display: none; - } - - @media (min-width: 540px) { - .header-title { - display: inline-block; - vertical-align: top; - } - } - } - - .dropdown-menu { - font-size: 13px; - } - - .header-search { - height: 52px; - - .header-search-toggle, - .search-form { - float: right; - } - - .header-search-toggle { - background-color: white; - } - - &.open { - .header-search-container { - height: 100%; - box-shadow: 0 0 0 1px $focus-color; - } - - .search-form { - width: 228px; - - form { - display: block; - } - } - - .header-search-toggle:hover { - background-color: transparent; - box-shadow: none; - } - } - - .search-form { - width: 0; - transition: width 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955); - - form { - display: none; - } - - .form-control { - width: 100%; - background: none; - border: none; - border-radius: 0; - box-shadow: none; - } - - .top-bar-form { - padding: 0; - margin-left: 0; - border: none; - - input { - display: inline-block; - padding-right: 0; - } - } - } - } - - .user-info { - height: 50px; - margin-right: 1px; - - .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; - } - } - - .user-name { - font-size: 13px; - color: $md-black-100; - - .inverse & { - color: $md-gray-50; - } - } - - .org-name { - margin-top: 3px; - font-size: 12px; - color: $md-gray-50; - } - - .btn--user { - height: vr-adjust(56); - padding: 7px 17px; - cursor: pointer; - background: none; - border: none; - border-radius: 0; - - &:hover, - &:focus, - &:active { - background-color: $md-gray-10; - - .icon { - color: $md-gray-10; - } - } - - &:focus, - &:active { - box-shadow: 0 0 0 1px $focus-color; - } - - li { - width: 128px; - overflow: hidden; - line-height: 1; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - list-style: none; - } - } - - .user-img { - display: inline-block; - width: 35px; - height: 35px; - overflow: hidden; - text-align: center; - vertical-align: middle; - background-color: lighten($md-gray-50, 25%); - background-image: none; - background-repeat: no-repeat; - background-size: cover; - border-radius: 50%; - - .inverse & { - background-color: $md-gray-50; - } - - .icon { - bottom: -5px; - font-size: 30px; - line-height: 35px; - color: $md-white-100; - } - } - - .dropdown-menu { - top: calc(100% + 2px); - right: -1px; - left: auto; - - @media (max-width: 959px) { - &:before, - &:after { - right: 24px; - left: auto; - } - } - - @media (min-width: 960px) { - .user-name, - .org-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-30; - } - } - } - } - } - - .settings-menu ul.dropdown-menu { - right: -1px; - left: auto; - - &:before, - &:after { - right: 25px; - left: auto; - } - } - } - - .top-bar > .container-fluid .top-bar-brand { - margin-left: 3px; - } - - .header-label { - display: none; - - @media (min-width: 1070px) { - display: inline-block; - } - } -} diff --git a/scss/ng/login.scss b/scss/ng/login.scss deleted file mode 100644 index 98bfab72e5..0000000000 --- a/scss/ng/login.scss +++ /dev/null @@ -1,101 +0,0 @@ -// @import '../colors/settings'; -// @import '../typography/settings'; -// @import '../tools/mixins/spacing'; - -@include exports('ng-login') { - .messagebox-backdrop.login-box { - .message-box { - min-height: vr-adjust(560); - padding-top: rem-calc(60); - padding-right: rem-calc(24); - padding-left: rem-calc(24); - - &__app-name, - &__title { - padding: 0 1rem; - margin-bottom: rem-calc(40); - font-size: rem-calc(20); - line-height: rem-calc(24); - letter-spacing: 1px; - color: $md-gray-40; - - @media #{$small-only} { - font-size: rem-calc(26); - } - } - - &__logo { - height: rem-calc(96); - margin-bottom: 0.5rem; - } - - &__footer { - margin-top: 0; - } - } - - .md-input-container { - margin-bottom: 0.75rem; - } - - .md-input { - height: 3rem; - font-family: $brand-font-extra-light; - font-size: 1rem; - text-align: center; - background-color: transparent; - border-bottom: 1px solid $md-gray-30; - border-color: transparent; - border-radius: 0; - - &:focus, - &.focus { - border-bottom-color: $md-theme-50; - } - } - - input[readonly], - input.readonly { - background-color: transparent; - border-color: transparent; - } - - .md-input__messages { - text-align: left; - } - - form, - .md-form { - padding-top: 1rem; - margin-bottom: 0; - } - - .validation-messages { - .md-input__messages { - padding-top: 0; - } - } - - .password-link { - display: block; - } - - .login-spinner { - margin-top: 20%; - font-size: 1.5rem; - - .icon-spinner { - position: relative; - } - } - - &.loading { - form, - button, - .message-box__login-title, - .message-box__footer { - display: none; - } - } - } -} diff --git a/scss/ng/messagebox.scss b/scss/ng/messagebox.scss deleted file mode 100644 index f9f2729cb4..0000000000 --- a/scss/ng/messagebox.scss +++ /dev/null @@ -1,173 +0,0 @@ -// @import '../colors/settings'; -// @import '../tools/mixins/spacing'; -// @import '../typography/placeholders'; -// @import '~@momentum-ui/icons/scss/mixins'; - -@include exports('ng-messagebox') { - .messagebox-backdrop { - z-index: 0; - display: flex; - width: 100%; - height: 100vh; - max-width: 100vw; - overflow-y: auto; - color: $md-gray-90; - background: center center / cover no-repeat fixed; - flex-direction: column; - align-items: center; - justify-content: space-between; - - .message-box { - position: relative; - display: flex; - width: 94vw; - max-width: vr-adjust(400); - min-width: vr-adjust(300); - min-height: 94vh; - padding: 0; - margin: 3vw; - text-align: center; - background: rgba($md-white-100, 0.85); - border-radius: rem-calc(12); - box-shadow: 0 1px 3px 0 rgba($md-black-100, 0.18); - flex-shrink: 0; - flex-direction: column; - justify-content: space-between; - - @include vr-spacing(pv, 3); - @include vr-spacing(ph, 2); - - @media #{$medium-up} { - width: vr-adjust(400); - min-height: vr-adjust(400); - } - - @media screen and (min-height: 850px) { - margin-top: vr-adjust(124); - } - - &:before { - position: absolute; - top: 0; - left: 0; - z-index: -1; - display: block; - width: 100%; - height: 100%; - background: center center / cover no-repeat fixed; - content: ''; - filter: blur(8px); - } - - &__footer { - @include vr-spacing(mt, 2); - @include vr-spacing(ph, 1.5); - - @extend %body-smallest; - - color: $md-gray-40; - - @media #{$small-only} { - @include vr-spacing(ph, 0); - } - } - - &__icon { - @include icon; - - display: block; - margin: 0 auto 2rem; - font-size: 6rem; - color: $md-gray-70; - } - - &__logo { - height: rem-calc(136); - - @include vr-spacing(mb, 1.25); - } - - &__title { - @include vr-spacing(mb, 1.5); - - word-wrap: break-word; - - &--attention { - color: $md-yellow-50; - } - - &--alert { - color: $md-red-50; - } - - &--success { - color: $md-green-50; - } - } - - &__details, - p { - @extend %h5; - - font-size: rem(20); - // @include vr-spacing(pb, 3); - // @include vr-spacing(ph, 3); - color: $md-gray-70; - text-align: center; - word-wrap: break-word; - - @include vr-spacing(mb, 1.5); - } - - .icon-cisco-logo { - color: $md-theme-50; - } - - &__btn { - @include vr-spacing(mb, 1.5); - } - - button, - .button { - min-width: rem-calc(200); - padding-right: 3.25rem; - padding-left: 3.25rem; - margin-top: rem-calc(44); - border-radius: 25px; - } - } - - &__footer { - color: $md-gray-40; - text-align: center; - flex-shrink: 0; - - @include vr-spacing(mb, 0.5); - - @media screen and (min-height: 850px) { - @include vr-spacing(mt, 2); - } - - a { - color: $md-gray-40; - } - - .icon { - display: block; - margin-bottom: 1.25rem; - font-size: rem-calc(32); - } - } - - span { - font-size: inherit; - } - - &.dark-backdrop { - .messagebox-backdrop__footer, - .messagebox-backdrop__footer > div > a { - color: $md-white-100; - } - } - } -} diff --git a/scss/ng/nav-left.scss b/scss/ng/nav-left.scss deleted file mode 100644 index 777362e834..0000000000 --- a/scss/ng/nav-left.scss +++ /dev/null @@ -1,237 +0,0 @@ -// @import '../colors/settings'; -// @import './topbar'; -// @import '../typography/settings'; -// @import '../settings/z-index'; -// @import '../tools/mixins/spacing'; - -@include exports('ng-left-nav') { - .wrapper { - padding-top: rem-calc(52); - padding-left: rem-calc(100); - transition: all 0.4s ease 0s; - } - - .left-nav-container { - background-color: $md-yellow-50; - } - - .leftnav-wrapper { - position: fixed; - left: 0; - z-index: $zindex-top-bar-fixed - 10; - } - - .page-content-wrapper { - width: 100%; - } - - .leftnav { - position: absolute; - top: -1px; - min-height: 100vh; - margin: 0; - background-color: $md-black-100; - border-top: darken($md-black-100, 10%) 1px solid; - - .inverse & { - background-color: $md-white-100; - border-top: $top-bar-admin-border 1px solid; - border-right: $top-bar-admin-border 1px solid; - } - - .cisco-logo { - padding: 7px 0; - font-size: 35px; - line-height: 27px; - color: $md-gray-30; - text-align: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); - } - - ul { - max-height: 100vh; - padding: 0; - margin: 0; - overflow: auto; - list-style: none; - - @include vr-spacing(pt, 1, 1px); - @include vr-spacing(pb, 3, 1px); - - li.dropup { - width: rem-calc(100); - } - - li { - position: relative; - } - } - - a { - display: block; - padding: 0.5rem 0.5rem 1rem; - color: $md-gray-30; - text-align: center; - text-transform: capitalize; - cursor: pointer; - - .inverse & { - color: $text-color; - - & .selected { - color: $md-white-100; - } - } - - .title { - display: block; - padding-top: 7px; - margin: 0; - overflow: hidden; - font-family: $brand-font-light; - font-size: 14px; - font-weight: 450; - line-height: 1; - text-overflow: ellipsis; - white-space: nowrap; - } - - > .icon { - display: block; - width: 50px; - height: 50px; - padding: 0.5rem; - margin: 0 auto; - font-size: 22px; - line-height: 1.5; - color: $md-gray-10; - background-color: $md-black-100; - border-radius: 50%; - - .inverse & { - color: $md-white-100; - background-color: $md-gray-30; - } - } - - .submenu-icon { - display: block; - height: 10px; - padding: 0; - margin: 0 auto; - font-size: 15px; - color: $md-gray-30; - border-radius: 0; - } - - &:hover, - &:focus { - text-decoration: none; - box-shadow: none; - - > .icon { - background-color: $md-theme-50; - } - } - } - - .active { - a { - &:hover, - &:focus { - .icon { - color: $md-gray-10; - } - } - - .icon { - background-color: $md-theme-50; - } - - .submenu-icon { - background-color: transparent; - } - } - } - - .sub-nav { - position: absolute; - top: 0; - left: 100%; - padding: 0; - background-color: $md-theme-20; - border: none; - border-radius: 0; - - // z-index: -1; - .inverse & { - left: 99px; - } - - &.show-up { - top: auto; - bottom: 0; - } - - li { - list-style: none; - - a { - padding: 11px 1.5rem; - margin-top: 0; - color: $md-gray-70; - text-align: left; - text-transform: capitalize; - transition: all 350ms linear; - - &:hover, - &:focus { - text-decoration: none; - background-color: $md-theme-50; - - .title { - color: $md-white-100; - } - } - - .title { - position: relative; - top: 1px; - padding: 0; - line-height: 1; - white-space: nowrap; - } - - .desc { - display: block; - margin-top: 7px; - font-size: 11px; - color: darken($md-theme-50, 15%); - } - } - } - } - } - - .selected { - a { - background-color: $md-theme-20; - box-shadow: none; - - .title { - color: $md-gray-70; - } - - .submenu-icon { - color: $md-theme-50; - background-color: transparent; - } - } - - .sub-nav { - a { - background-color: transparent; - } - } - } -} diff --git a/scss/ng/nav-side-admin.scss b/scss/ng/nav-side-admin.scss deleted file mode 100644 index a8e09e55b8..0000000000 --- a/scss/ng/nav-side-admin.scss +++ /dev/null @@ -1,623 +0,0 @@ -// @import '../typography/settings'; -// @import '../settings/z-index'; -// @import '../tools/mixins/spacing'; - -$sidenav-admin-width: 204px; -$sidenav-admin-toggle-width: 12px; -$sidenav-admin-max-width: $sidenav-admin-width + $sidenav-admin-toggle-width; -$sidenav-admin-footer-max-height: 210px; -$sidenav-admin-footer-min-height: 130px; -$sidenav-admin-icon-height: 38px; -$sidenav-admin-icon-width: 44px; -$sidenav-admin-header-base-height: 32px; -$sidenav-admin-header-image-height: 124px; -$sidenav-admin-header-icon-height: 12px; -$sidenav-admin-header-title-height: 32px; -$sidenav-admin-header-min-height: $sidenav-admin-header-base-height + - $sidenav-admin-header-image-height; -$sidenav-admin-collapsed-width: 68px; -$sidenav-admin-collapsed-max-width: $sidenav-admin-collapsed-width + - $sidenav-admin-toggle-width; -$sidenav-admin-collapsed-header-min-height: $sidenav-admin-header-base-height + - $sidenav-admin-icon-height; -$sidenav-background-color: #333333; - -@include exports('ng-side-nav-admin') { - .sidenav-app-container { - display: flex; - width: 100%; - height: 100vh; - overflow: hidden; - box-sizing: border-box; - flex-direction: column; - } - - .sidenav-admin-container { - display: flex; - overflow: hidden; - } - - .sidenav-admin-wrapper { - position: relative; - z-index: $zindex-sidebar; - display: flex; - height: 100%; - background-color: $sidenav-background-color; - } - - .sidenav-page-wrapper { - width: 100%; - overflow-y: auto; - } - - .sidenav-page-content-wrapper { - display: flex; - flex: 1 1 auto; - overflow-y: auto; - } - - .sidenav-admin { - display: flex; - width: $sidenav-admin-width; - margin: 0; - background-color: $sidenav-background-color; - border-top: darken($sidenav-background-color, 10%) 1px solid; - transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); - flex-direction: column; - align-items: center; - - .collapse-text.ng-enter { - opacity: 0; - transition: opacity 0.3s linear; - } - - .collapse-text.ng-enter.ng-enter-active, - .collpase-text.ng-leave { - opacity: 1; - } - - .collapse-text.ng-leave.ng-leave-active { - opacity: 0; - } - - > ul { - flex: 1 1 auto; - } - - ul { - display: flex; - min-height: 60px; - margin: 0; - overflow-x: hidden; - overflow-y: auto; - list-style: none; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - - @include vr-spacing(pl, 1); - @include vr-spacing(pr, 0.5); - @include vr-spacing(pv, 0.5); - - li { - width: 100%; - - @include vr-spacing(pb, 1); - - @media (max-height: 900px) { - @include vr-spacing(pb, 0.75); - } - - @media (max-height: 768px) { - @include vr-spacing(pb, 0.5); - } - } - - li:last-child { - @include vr-spacing(pb, 0); - } - } - - .title { - display: inline-block; - max-height: $sidenav-admin-icon-height; - margin: 0; - overflow: hidden; - font-family: $brand-font-light; - font-size: 16px; - font-weight: 450; - line-height: 1.25; - text-align: left; - text-overflow: ellipsis; - - @include vr-spacing(pl, 0.75); - } - - a { - display: flex; - min-width: 0; - color: $md-gray-10; - text-align: center; - text-transform: capitalize; - cursor: pointer; - align-items: center; - - > .icon { - display: flex; - width: $sidenav-admin-icon-width; - height: $sidenav-admin-icon-height; - font-size: 28px; - line-height: 1.25; - color: $md-gray-10; - background-color: transparent; - align-content: center; - justify-content: center; - flex: 0 0 auto; - } - - > .icon-outline { - -webkit-text-fill-color: $sidenav-background-color; - -webkit-text-stroke: 1px $md-gray-10; - } - - .icon-diagnostics-active { - height: 28px; - font-size: 18px; - - @include vr-spacing(mt, 0.5); - @include vr-spacing(mb, 0.25); - } - - .icon-cloud-active { - height: 36px; - font-size: 26px; - } - - &:hover, - &:focus { - color: $md-theme-50; - text-decoration: none; - cursor: pointer; - box-shadow: none; - - > .icon { - color: $md-theme-50; - text-shadow: none; - } - - > .icon-outline { - -webkit-text-fill-color: $md-theme-50; - -webkit-text-stroke: 1px $md-theme-50; - } - } - } - - .active { - a { - color: $md-theme-50; - - &:hover, - &:focus { - > .icon { - color: $md-theme-50; - } - } - - > .icon { - color: $md-theme-50; - } - - > .icon-outline { - -webkit-text-fill-color: $md-theme-50; - -webkit-text-stroke: 1px $md-theme-50; - } - } - } - - button { - &:hover, - &:focus { - box-shadow: none; - } - } - - select { - @include vr-spacing(pv, 0.35); - - margin-bottom: 0; - } - } - - .sidenav-admin--header { - display: flex; - flex-direction: column; - - @include vr-spacing(pl, 1); - @include vr-spacing(pr, 0.5); - - padding-top: 30px; - - @include vr-spacing(pb, 3.5); - - @media (max-height: 900px) { - @include vr-spacing(pt, 1); - @include vr-spacing(pb, 1.5); - } - - @media (max-height: 768px) { - @include vr-spacing(pt, 0.5); - @include vr-spacing(pb, 1); - } - - &.image-icon-adjustment { - min-height: $sidenav-admin-header-min-height + - $sidenav-admin-header-icon-height; - } - - &.image-icon-title-adjustment { - min-height: $sidenav-admin-header-min-height + - $sidenav-admin-header-icon-height + $sidenav-admin-header-title-height; - } - - .header-title { - height: $sidenav-admin-header-title-height; - - @include vr-spacing(mv, 0.5); - } - - .header-icon { - font-size: $sidenav-admin-header-icon-height; - color: $md-gray-40; - text-align: center; - transition: all 0.3s linear; - - @include vr-spacing(mv, 0.5); - } - - .icon-cisco-logo { - font-size: 35px; - line-height: 27px; - } - - .image-logo { - width: 100%; - opacity: 1; - transition: opacity 0.3s linear; - } - - .image-logo-collapsed { - height: 0; - opacity: 0; - } - } - - .sidenav-admin--footer { - display: flex; - width: inherit; - max-width: $sidenav-admin-max-width; - min-height: $sidenav-admin-footer-min-height; - padding: 0; - flex-direction: column; - - .partner-title { - z-index: 1; - display: flex; - width: calc(100% + #{$sidenav-admin-toggle-width}); - min-height: 24px; - color: $md-gray-10; - cursor: default; - background-color: $md-gray-70; - border-right: 16px solid transparent; - align-items: center; - justify-content: center; - - .title { - max-width: $sidenav-admin-max-width; - font-size: 12px; - text-align: center; - white-space: nowrap; - } - } - - .admin-pages { - @include vr-spacing(pv, 0.75); - - .title { - max-height: none; - font-size: 14px; - } - } - - .footer-divider, - .footer-divider-top, - .footer-divider-dark { - z-index: 1; - display: flex; - width: 100%; - overflow: hidden; - border-top: $md-gray-70 1px solid; - } - - .footer-divider-top { - width: calc(100% + #{$sidenav-admin-toggle-width}); - } - - .footer-divider-dark { - border-top: $md-gray-90 1px solid; - } - - .user-info.dropdown.open { - transform: translateY(-#{$sidenav-admin-footer-max-height}); - transition: all 0.3s linear; - } - - .user-info { - display: flex; - width: calc(100% + #{$sidenav-admin-toggle-width}); - background-color: $sidenav-background-color; - transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); - flex-direction: column; - - .btn--user { - display: flex; - width: inherit; - height: 68px; - padding-top: 0px; - padding-right: 0px; - padding-bottom: 0px; - padding-left: 20px; - cursor: pointer; - background: 0 0; - border: none; - border-radius: 0; - align-items: center; - - ul { - justify-content: center; - } - - li { - width: 128px; - overflow: hidden; - line-height: 1; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - list-style: none; - } - - .user-name { - padding-bottom: 0.5rem; - padding-left: 0.25rem; - font-size: 14px; - color: $md-gray-30; - } - - .org-name { - padding-left: 0.25rem; - margin-top: 3px; - font-size: 12px; - color: $md-gray-40; - } - - &:hover, - &:focus { - .user-name { - color: $md-theme-50; - } - - .org-name { - color: $md-theme-20; - } - } - } - - .user-img { - display: inline-block; - width: 35px; - height: 35px; - overflow: hidden; - text-align: center; - vertical-align: middle; - background-color: $md-gray-40; - background-image: none; - background-repeat: no-repeat; - background-size: cover; - border-radius: 50%; - flex: 0 0 auto; - - @include vr-spacing(mv, 1); - - .icon { - bottom: -5px; - font-size: 30px; - line-height: 35px; - color: $md-white-100; - - &:hover, - &:focus { - background-color: $md-theme-50; - } - } - - &:hover, - &:focus { - background-color: $md-theme-50; - } - } - - .user-info-text { - color: $md-white-100; - } - - .dropdown-menu.visible { - top: 100%; - height: 130px; - padding-bottom: calc(100% - 2px); - } - - .dropdown-menu { - top: auto; - left: 0; - width: 100%; - height: 0; - padding-bottom: 0; - margin-top: 0; - overflow: visible; - font-family: $brand-font-light; - font-size: 13px; - font-size: 16px; - line-height: 1.5; - color: $md-white-100; - background-color: $sidenav-background-color; - border: none; - border-top-right-radius: 0; - border-top-left-radius: 0; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18); - - & > li:first-child > a, - & > li:last-child > a, - & > li:first-child > span, - & > li:last-child > span { - border-radius: 0; - } - - li { - display: flex; - padding: 0; - overflow: hidden; - background-color: $sidenav-background-color; - - a, - span { - color: $md-gray-20; - text-align: left; - background-color: $sidenav-background-color; - } - - &:hover, - &:focus { - color: $md-theme-50; - text-decoration: none; - background-color: $sidenav-background-color; - - a { - color: $md-theme-50; - text-decoration: none; - background-color: $sidenav-background-color; - } - } - } - } - } - } - - .sidenav-admin--collapsed { - width: $sidenav-admin-collapsed-width; - - .sidenav-admin--header { - min-height: $sidenav-admin-collapsed-header-min-height; - - &.image-icon-adjustment, - &.image-icon-title-adjustment { - min-height: $sidenav-admin-collapsed-header-min-height + - $sidenav-admin-header-icon-height; - } - - .header-icon { - @include vr-spacing(mv, 0); - - transition: all 0.3s linear; - } - - .icon-cisco-logo { - font-size: 24px; - line-height: 20px; - } - - .image-logo { - height: 0; - opacity: 0; - transition: height 0.3s linear; - } - - .image-logo-collapsed { - width: $sidenav-admin-icon-width; - height: $sidenav-admin-icon-height; - opacity: 1; - transition: opacity 0.3s linear 0.2s; - - @include vr-spacing(mv, 0.25); - } - } - - .sidenav-admin--footer { - max-width: $sidenav-admin-collapsed-max-width; - } - } - - .sidenav-admin-toggle { - display: flex; - width: $sidenav-admin-toggle-width; - min-height: 100vh; - padding: 0; - margin: 0; - text-decoration: none; - box-shadow: none; - flex-direction: column; - align-items: center; - justify-content: center; - - .toggle-icon { - padding: 0; - margin: 0; - font-size: 24px; - color: $md-gray-50; - text-decoration: none; - background-color: transparent; - transform: rotate(90deg); - box-shadow: none; - } - - &:hover { - z-index: 11; - cursor: w-resize; - background-color: rgba($md-gray-70, 0.5); - - .toggle-icon { - color: $md-theme-50; - cursor: w-resize; - } - } - - &--collapsed { - &:hover { - cursor: e-resize; - - .toggle-icon { - cursor: e-resize; - } - } - } - } - - .selected { - a { - background-color: transparent; - box-shadow: none; - - .title { - color: $md-theme-50; - } - - > .icon { - color: $md-theme-50; - } - - > .icon-outline { - -webkit-text-fill-color: $md-theme-50; - -webkit-text-stroke: 1px $md-theme-50; - } - } - } -} diff --git a/scss/ng/ng-grid.scss b/scss/ng/ng-grid.scss deleted file mode 100644 index 5ecfc4893e..0000000000 --- a/scss/ng/ng-grid.scss +++ /dev/null @@ -1,582 +0,0 @@ -@include exports('ng-grid') { - .gridStyle { - width: 100%; - height: 100%; - padding-right: 0; - margin-top: 0; - - & > :nth-child(2) { - overflow-x: hidden; - } - } - - .ngCellText, - .ngHeaderText { - &.colt0 { - padding-left: 2rem; - } - } - - .colt0 { - .ngCellText { - padding-left: 2rem; - } - } - - .ngGrid { - background-color: $md-white-100; - } - - .ngGrid input[type='checkbox'] { - padding: 0; - margin: 0; - } - - .ngGrid input { - vertical-align: top; - } - - .ngGrid.unselectable { - user-select: none; - } - - .ngViewport { - width: 100% !important; - overflow: hidden; - font-family: $brand-font-cisco-TT-Light, sans-serif; - font-size: 15px; - color: $md-gray-90; - } - - .ngViewport:focus { - outline: none; - } - - .ngCanvas { - position: relative; - width: 100% !important; - } - - .ngVerticalBar { - position: absolute; - right: 0; - width: 0; - } - - .ngVerticalBarVisible { - width: 1px; - background-color: $md-gray-90; - opacity: 0.1; - } - - #testDataLength { - position: absolute; - top: 0; - right: 0; - z-index: -100000; - } - - .ngHeaderContainer { - 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; - } - - .ngHeaderCell { - position: absolute; - top: 0; - bottom: 0; - background-color: inherit; - } - - .ngHeaderCell.pinned { - z-index: 1; - } - - .ngHeaderSortColumn { - position: absolute; - overflow: hidden; - } - - .ngTopPanel { - position: relative; - z-index: 1; - width: 100% !important; - background-color: transparent; - border-bottom: 1px solid $md-gray-10; - } - - .ngSortButtonDown { - position: absolute; - top: 20px; - right: 15px; - left: auto; - width: 0; - height: 0; - border-color: $gray transparent; - border-style: solid; - border-width: 0 5px 5px 5px; - } - - .ngNoSort { - cursor: default; - } - - .ngHeaderButton { - position: absolute; - top: 8px; - right: 2px; - z-index: 1; - width: 14px; - height: 14px; - cursor: pointer; - background-color: $md-theme-20; - border-radius: 50%; - } - - .ngSortButtonUp { - position: absolute; - top: 20px; - right: 15px; - left: auto; - width: 0; - height: 0; - border-color: $gray transparent; - border-style: solid; - border-width: 5px 5px 0 5px; - } - - .ngHeaderScroller { - position: absolute; - background-color: inherit; - } - - .ngSortPriority { - position: absolute; - top: -5px; - left: 1px; - font-size: 6pt; - font-weight: 750; - } - - .ngHeaderGrip { - position: absolute; - top: 0; - right: -5px; - width: 10px; - height: 100%; - cursor: col-resize; - background-color: transparent; - } - - .ngHeaderText { - padding: 10px 30px 10px 20px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - box-sizing: border-box; - } - - .ngHeaderButtonArrow { - position: absolute; - top: 4px; - left: 3px; - width: 0; - height: 0; - border-color: $md-gray-30 transparent transparent transparent; - border-style: solid; - border-width: 6.5px 4.5px 0 4.5px; - } - - .ngPinnedIcon { - position: absolute; - top: 5px; - right: 5px; - width: 10px; - height: 10px; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAmElEQVQoU33PQapBURjA8UtkwJuaWYGSgfQWYBMvczPmTCzAAGVuaA228BZhRCkDGSmE31FucuRfvzq3vr5zT/JSjSU7DsypEPXDkDVn2hSIytJhw4kWGaLCxgHh2gt/RBuLzNhz5caWPjnSqqw4EraFfwznf8qklWjwy4IRTerkiQoPGtPl40OehcEJvcfXl8LglLfBJLkDcMgbgHlHhK8AAAAASUVORK5CYII=); - background-repeat: no-repeat; - } - - .ngUnPinnedIcon { - position: absolute; - top: 5px; - right: 5px; - width: 10px; - height: 10px; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAlElEQVQoU33PPQrCQBRF4fFnI2KfZVi5ARvdgo1l6mwmkCJVOgluwd5OwUoDtnoOxAei8cLXTN7cvEl/skCNDCMPfsUPO5zQwOHIDEvYtMURHe6wOVLgigvOePRyeDkyR4ln7wZ//7XfFBu8B23+aDJjrHGAwza7hjtHJvDmHg7b7Bru7AMjK7Rw2ObBVHDY5oGk9AKQNB2zy8MBTgAAAABJRU5ErkJggg==); - background-repeat: no-repeat; - } - - .ngColMenu { - position: absolute; - top: 25px; - right: 2px; - z-index: 1; - padding: 5px; - background-color: transparent; - border: 2px solid $md-gray-10; - border-radius: 3px; - } - - .ngColListCheckbox { - position: relative; - top: 4px; - right: 3px; - } - - .ngColList { - margin-top: 2px; - margin-left: 8px; - list-style-type: none; - } - - .ngColListItem { - white-space: nowrap; - } - - .ngMenuText { - position: relative; - top: 2px; - left: 2px; - } - - .ngGroupPanel { - overflow: hidden; - background-color: transparent; - border-bottom: 1px solid $md-gray-10; - } - - .ngGroupPanelDescription { - margin-top: 5px; - margin-left: 5px; - } - - .ngGroupList { - padding: 0; - margin: 0; - list-style-type: none; - } - - .ngAggHeader { - position: absolute; - border: none; - } - - .ngGroupElement { - float: left; - width: 100%; - height: 100%; - } - - .ngGroupIcon { - position: absolute; - top: 2px; - right: -2px; - width: 15px; - height: 15px; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC); - background-repeat: no-repeat; - } - - .ngGroupedByIcon { - position: absolute; - top: 2px; - right: -2px; - width: 15px; - height: 15px; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=); - background-repeat: no-repeat; - } - - .ngGroupName { - float: left; - padding: 3px 10px; - margin-top: 2px; - margin-left: 0; - font-weight: 750; - background-color: transparent; - border: 1px solid $md-gray-10; - border-radius: 3px; - } - - .ngGroupArrow { - float: right; - width: 0; - height: 0; - margin-top: 10px; - margin-right: 5px; - margin-left: 5px; - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-left: 6px solid $md-gray-10; - } - - .ngGroupingNumber { - position: absolute; - top: -2px; - right: -10px; - } - - .ngAggArrowCollapsed { - position: absolute; - bottom: 10px; - left: 8px; - width: 0; - height: 0; - border-color: transparent transparent transparent $md-gray-10; - border-style: solid; - border-width: 5px 0 5px 8.7px; - } - - .ngGroupItem { - float: left; - } - - .ngGroupItem:first-child { - margin-left: 2px; - } - - .ngRemoveGroup { - width: 5px; - margin-top: -1px; - margin-left: 5px; - opacity: 0.4; - } - - .ngRemoveGroup:hover { - color: $text-color; - text-decoration: none; - cursor: pointer; - opacity: 0.7; - } - - .ngAggArrowExpanded { - position: absolute; - bottom: 10px; - left: 8px; - width: 0; - height: 0; - border-color: transparent transparent $md-gray-30 transparent; - border-style: solid; - border-width: 0 0 9px 9px; - } - - .ngAggregate { - position: absolute; - top: 0; - right: -1px; - bottom: 0; - left: 0; - overflow: hidden; - background-color: transparent; - border-bottom: 1px solid $md-gray-10; - } - - .ngAggregateText { - position: absolute; - top: 5px; - left: 27px; - line-height: 20px; - white-space: nowrap; - } - - .ngRow { - position: absolute; - width: 100% !important; - border-bottom: 1px solid $md-gray-10; - - &.odd { - background-color: transparent; - } - - &.even { - background-color: transparent; - } - - &:hover { - background-color: $md-theme-20; - } - - &.selected { - color: $md-white-100; - background-color: $md-theme-50; - transition: none; - } - } - - .ngCell { - position: absolute; - top: 0; - bottom: 0; - overflow: hidden; - background-color: inherit; - } - - .ngCell.pinned { - z-index: 1; - } - - .ngCellText { - padding: 10px 20px 10px 20px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - box-sizing: border-box; - } - - .ngSelectionCell { - margin-top: 9px; - margin-left: 6px; - } - - .ngSelectionHeader { - position: absolute; - top: 11px; - left: 6px; - } - - .ngCellElement:focus { - background-color: $md-gray-90; - outline: 0; - } - - .ngRow.canSelect { - cursor: pointer; - } - - .ngSelectionCheckbox { - margin-top: 9px; - margin-left: 6px; - } - - .ngFooterPanel { - position: relative; - padding: 0; - background-color: transparent; - border-top: 1px solid $md-gray-10; - } - - .nglabel { - display: block; - float: left; - padding-right: 5px; - font-weight: 750; - } - - .ngTotalSelectContainer { - float: left; - margin: 5px; - margin-top: 7px; - } - - .ngFooterSelectedItems { - padding: 2px; - } - - .ngFooterTotalItems.ngnoMultiSelect { - padding: 0 !important; - } - - .ngGridMaxPagesNumber { - vertical-align: middle; - } - - .ngPagerFirstBar { - width: 10px; - height: 12px; - margin-top: -6px; - margin-left: -3px; - border-left: 2px solid $md-gray-10; - } - - .ngPagerButton { - height: 25px; - min-width: 26px; - } - - .ngPagerFirstTriangle { - width: 0; - height: 0; - margin-left: 2px; - border-color: transparent $md-gray-30 transparent transparent; - border-style: solid; - border-width: 5px 8.7px 5px 0; - } - - .ngPagerNextTriangle { - margin-left: 1px; - } - - .ngPagerPrevTriangle { - margin-left: 0; - } - - .ngPagerLastTriangle { - width: 0; - height: 0; - margin-left: -1px; - border-color: transparent transparent transparent $md-gray-10; - border-style: solid; - border-width: 5px 0 5px 8.7px; - } - - .ngPagerLastBar { - width: 10px; - height: 12px; - margin-top: -6px; - margin-left: 1px; - border-left: 2px solid $md-gray-10; - } - - .ngFooterTotalItems { - padding: 2px; - } - - .ngCell { - .user-img { - width: 35px; - height: 35px; - margin: 4px 5px 4px 30px; - - .icon { - bottom: -5px; - font-size: 30px; - line-height: 35px; - } - } - - .dropdown-menu { - top: 70%; - right: 30px; - left: auto; - } - - .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; - } - } -} diff --git a/scss/ng/ng.scss b/scss/ng/ng.scss deleted file mode 100644 index d3a26b2ecb..0000000000 --- a/scss/ng/ng.scss +++ /dev/null @@ -1,34 +0,0 @@ -// @import 'settings/settings'; -// @import 'alert-banner'; -// @import 'avatar'; -// @import 'breadcrumbs'; -// @import 'call-destination'; -// @import 'card-member'; -// @import 'card-number'; -// @import 'combo-box'; -// @import 'dragdrop'; -// @import 'dropdown'; -// @import 'forms'; -// @import 'grid-filter'; -// @import 'header'; -// @import 'header-push'; -// @import 'login'; -// @import 'messagebox'; -// @import 'nav-left'; -// @import 'nav-side-admin'; -// @import 'ng-grid'; -// @import 'page-header-admin'; -// @import 'page-sub-header'; -// @import 'search-filter'; -// @import 'select'; -// @import 'setup-assistant'; -// @import 'side-panel'; -// @import 'table'; -// @import 'tokenfield'; -// @import 'tooltip-ng'; -// @import 'topbar-admin'; -// @import 'topbar-user'; -// @import 'topbar'; -// @import 'topnav'; -// @import 'typeahead'; -// @import 'ui-grid'; diff --git a/scss/ng/notification.scss b/scss/ng/notification.scss deleted file mode 100644 index 95237540a0..0000000000 --- a/scss/ng/notification.scss +++ /dev/null @@ -1,201 +0,0 @@ -/** @component notifications */ -// @import '../colors/settings'; -// @import '../settings/core'; -// @import '../typography/settings'; -// @import '../alert/settings'; -// @import '../tools/mixins/spacing'; -// @import '~@momentum-ui/icons/scss/mixins'; - -@include exports('ng-notifications') { - #toast-container { - position: fixed; - right: 1rem; - bottom: 0.5rem; - z-index: 999999; - - > { - .toast { - position: relative; - right: 1rem; - display: flex; - width: $alert__width; - max-height: 19.25rem; - min-height: rem-calc(72); - padding: $alert__padding 0 $alert__padding $alert__padding-left; - margin: 0 0 6px; - font-size: $alert__font-size; - color: $alert__background-color; - border: 0; - border-radius: $global-radius; - flex-direction: column; - box-shadow: 0px 1px 2px 1px rgba($md-black-100, 0.25), - inset 0 1px 0 0 rgba($md-gray-10, 0.18); - } - - .toast-error, - .toast-success, - .toast-warning { - &:before { - position: absolute; - top: 0; - left: 0; - display: flex; - width: 72px; - height: 100%; - padding: 0; - margin: 0; - font-family: $icon-font-name; - font-size: 1.5rem; - line-height: 1.5rem; - color: $md-white-100; - text-align: center; - align-items: center; - justify-content: center; - } - - .toast-title { - font-size: 20px; - line-height: 32px; - - @include vr-spacing(pr, 2.25); - } - - .toast-message { - padding: 0; - padding-left: 64px; - margin: 0; - overflow: auto; - // width: 228px; - font-family: $brand-font-light; - font-size: 14px; - color: $md-gray-70; - word-wrap: break-word; - - @include vr-spacing(pr, 3); - - > div { - font-family: $brand-font-light; - font-size: 14px; - color: $md-gray-70; - word-wrap: break-word; - } - } - } - - .toast-success { - &:before { - @include icon-check_36; - - font-size: $alert__icon-font-size; - background-color: $alert__font-color--success; - } - - .toast-title { - color: $alert__font-color--success; - } - } - - .toast-warning { - &:before { - @include icon-warning_72; - - font-size: $alert__icon-font-size; - background-color: $alert__font-color--warning; - } - - .toast-title { - color: $alert__font-color--warning; - } - } - - .toast-error { - &:before { - @include icon-error_24; - - font-size: $alert__icon-font-size; - background-color: $alert__font-color--error; - } - - .toast-title { - color: $alert__font-color--error; - } - } - } - - button.close:before, - .close:before { - font-size: 16px; - } - - button.close, - .md-close { - position: absolute; - top: 12px; - right: 13px; - color: $md-gray-30; - border: none; - } - - button.close:hover, - .close:hover { - color: $md-gray-70; - } - } - - .toast { - background-color: $alert__background-color; - border: 1px solid $md-gray-10; - } - - /*Responsive Design*/ - @media all and (max-width: 240px) { - #toast-container { - > div { - width: $alert__width; - padding: $alert__padding $alert__padding $alert__padding - $alert__padding-left; - } - } - } - - @media all and (min-width: 241px) and (max-width: 480px) { - #toast-container { - > div { - width: $alert__width; - padding: $alert__padding $alert__padding $alert__padding - $alert__padding-left; - } - } - } - - @media all and (min-width: 481px) and (max-width: 768px) { - #toast-container > div { - width: $alert__width; - padding: $alert__padding $alert__padding $alert__padding - $alert__padding-left; - } - } - - /* - * Animations -*/ - - #toast-container { - &:not(.no-enter) > div.ng-enter { - right: -300px; - transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - - &:not(.no-enter) > div.ng-enter.ng-enter-active { - right: 1rem; - } - - &:not(.no-leave) > div.ng-leave.ng-leave-active { - right: -300px; - } - - &:not(.no-leave) > div.ng-leave { - transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045); - } - } -} diff --git a/scss/ng/overlay-panel.scss b/scss/ng/overlay-panel.scss deleted file mode 100644 index 196057466b..0000000000 --- a/scss/ng/overlay-panel.scss +++ /dev/null @@ -1,35 +0,0 @@ -// @import '../settings/core'; -// @import '../components/page-header/settings'; -// @import '../settings/z-index'; -// @import '../components/page-header/mixins'; - -@include exports('ng-overlay-panel') { - .overlay-panel { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-top-bar-fixed - 5; - width: 100vw; - height: 100vh; - padding: ($top-bar-height + 2) 0 0 0; - margin: 0; - background: $md-white-100; - } - - .overlay-panel__header { - @include page-header__left(); - - justify-content: space-between; - align-items: center; - padding-right: $page-side-padding; - - .title { - @include page-header__title(); - } - - .md-close { - font-size: 32px; - border: none; - } - } -} diff --git a/scss/ng/page-header-admin.scss b/scss/ng/page-header-admin.scss deleted file mode 100644 index bbc757bf7e..0000000000 --- a/scss/ng/page-header-admin.scss +++ /dev/null @@ -1,39 +0,0 @@ -// @import '../colors/settings'; -// @import '../typography/settings'; -// @import '../components/page-header/settings'; -// @import '../tools/mixins/core'; -// @import '../tools/mixins/grid'; -// @import '../components/page-header/mixins'; - -@include exports('ng-admin') { - .md-admin { - .page-header { - display: flex; - padding: 0; - margin: 0; - background-color: $md-white-100; - border-bottom: 1px solid $md-gray-30; - flex-wrap: wrap; - - &__left { - @include page-header__left(); - } - - &__right { - display: flex; - padding-right: 0.75rem; - flex-grow: 2; - align-items: flex-end; - justify-content: flex-end; - } - - &__title { - @include page-header__title(); - } - - .icon-arrow-left_16 { - margin-right: $page-header-icon-margin-right; - } - } - } -} diff --git a/scss/ng/page-sub-header.scss b/scss/ng/page-sub-header.scss deleted file mode 100644 index 2fa7f55322..0000000000 --- a/scss/ng/page-sub-header.scss +++ /dev/null @@ -1,84 +0,0 @@ -// @import '../colors/settings'; -// @import '../typography/settings'; -// @import '../components/page-header/settings'; - -@include exports('ng-page-subheader') { - .page-sub-header { - display: flex; - height: 65px; - padding: 0 $page-sub-header-horizontal-padding; - background-color: $md-white-100; - border-bottom: 1px solid $md-gray-10; - flex-wrap: wrap; - - &__left, - md-page-sub-header-left { - display: flex; - flex-grow: 1; - align-items: center; - } - - &__right, - md-page-sub-header-right { - display: flex; - flex-grow: 1; - justify-content: flex-end; - align-items: center; - } - - .export i { - padding-left: 1rem; - margin-left: 1rem; - font-size: 1.25rem; - color: $md-gray-30; - cursor: pointer; - } - - .export-users i { - padding-right: 0.5rem; - margin-right: 0.5rem; - font-size: 1.5rem; - color: $md-gray-30; - cursor: pointer; - - &:hover { - color: $md-theme-50; - text-decoration: none; - } - } - - .nav { - margin: 0; - align-self: flex-end; - - li { - width: auto; - - a { - padding-right: $page-sub-header-nav-padding-right; - padding-bottom: $page-sub-header-nav-padding-bottom; - margin-right: $page-sub-header-nav-margin-right; - margin-bottom: -$page-sub-header-vertical-padding; - font-family: $brand-font-light; - font-size: $page-sub-header-nav-font-size; - color: $page-sub-header-nav-color; - border-bottom: 3px solid $page-sub-header-nav-border-bottom-color; - - &:hover { - border-bottom-color: $page-sub-header-nav-hover-border-bottom-color; - } - } - - &.current.active > a.nav-link { - padding-bottom: $page-sub-header-nav-padding-bottom; - color: $page-sub-header-nav-active-color; - border-bottom-color: $page-sub-header-nav-active-border-bottom-color; - } - } - } - - .select-list { - margin-bottom: 0; - } - } -} diff --git a/scss/ng/phonenumber.scss b/scss/ng/phonenumber.scss deleted file mode 100644 index 43a620cb47..0000000000 --- a/scss/ng/phonenumber.scss +++ /dev/null @@ -1,131 +0,0 @@ -// @import '../colors/settings'; - -@include exports('ng-phonenumber') { - .country-list { - display: inline-flex; - width: 100%; - border: 1px solid $md-gray-20; - border-radius: 3px; - - &.is-active { - border: 1px solid $focus-color; - } - - .has-error & { - border: 1px solid $md-red-50; - - &:hover { - border: 1px solid $md-red-20; - } - } - - .select-list { - width: auto; - - .open > a:hover { - border: none; - } - - &:focus { - border-right: none; - } - } - - .select-toggle { - width: 100%; - height: 34px; - border: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .select-options { - & > li > a { - padding-right: 20px; - padding-left: rem-calc(13); - } - } - - .phone-number { - &:focus { - border-left: none; - } - - input[type='text'] { - width: 100%; - height: 34px; - padding-left: 1rem; - margin-bottom: 0px; - vertical-align: middle; - border: none; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - transition: none; - - &:focus { - border-left: none; - } - - .has-error & { - border: none; - } - - &:disabled { - background-color: $md-gray-10; - border-color: $md-gray-20; - } - } - } - - .has-error { - box-shadow: none; - } - - input:focus { - border: 0; - } - - .select-toggle > i { - top: 12px; - right: -1rem; - } - - .dropdown { - position: relative; - width: rem-calc(90); - } - - .dropdown-menu { - position: absolute; - right: 0; - left: 0; - min-width: rem-calc(200); - } - - .country-code, - .country-code--list { - color: $md-gray-30; - } - - .country-code { - margin-bottom: 0px; - font-size: 0.875rem; - line-height: 34px; - vertical-align: middle; - } - } - - .is-active { - &.country-list { - .select-toggle { - border: none; - } - - .phone-number { - input { - border: none; - } - } - } - } -} diff --git a/scss/ng/popover.scss b/scss/ng/popover.scss deleted file mode 100644 index 0aebfd4519..0000000000 --- a/scss/ng/popover.scss +++ /dev/null @@ -1,139 +0,0 @@ -// @import 'settings'; -// @import '../../tools/mixins/reset-text'; - -@include exports('cui-popover') { - .popover { - position: absolute; - top: 0; - left: 0; - z-index: $zindex-popover; - display: none; - max-width: $popover__max-width; - padding: 0; - font-size: $font-size-base; - background-color: $popover__background; - border: 1px solid $popover__border-color--fallback; - border: 1px solid $popover__border-color; - border-width: $popover-arrow__width; - border-radius: $border-radius-large; - content: ''; - box-shadow: none; - background-clip: padding-box; - - @include reset-text; - - &.top { - margin-top: -$popover-displacement; - } - - &.right { - margin-left: $popover-displacement; - - > .arrow { - top: 50%; - left: -$popover-outer-arrow__width; - margin-top: -$popover-outer-arrow__width; - border-right-color: $popover-outer-arrow__color--fallback; // IE8 fallback - border-right-color: $popover-outer-arrow__color; - border-left-width: 0; - - &:after { - bottom: -$popover-arrow__width; - left: 1px; - border-right-color: $popover-arrow__color; - border-left-width: 0; - content: ' '; - } - } - } - - &.bottom { - margin-top: $popover-displacement; - - > .arrow { - top: -$popover-outer-arrow__width; - left: 50%; - margin-left: -$popover-outer-arrow__width; - border-bottom-color: $popover-outer-arrow__color--fallback; // IE8 fallback - border-bottom-color: $popover-outer-arrow__color; - border-top-width: 0; - - &:after { - top: 1px; - margin-left: -$popover-arrow__width; - border-bottom-color: $popover-arrow__color; - border-top-width: 0; - content: ' '; - } - } - } - - &.left { - margin-left: -$popover-displacement; - - > .arrow { - top: 50%; - right: -$popover-outer-arrow__width; - margin-top: -$popover-outer-arrow__width; - border-left-color: $popover-outer-arrow__color--fallback; // IE8 fallback - border-left-color: $popover-outer-arrow__color; - border-right-width: 0; - - &:after { - right: 1px; - bottom: -$popover-arrow__width; - border-left-color: $popover-arrow__color; - border-right-width: 0; - content: ' '; - } - } - } - - &-title { - padding: 8px 14px; - margin: 0; - font-family: $brand-font-extra-light; - font-size: 16px; - background-color: $popover-title__background; - border-bottom: 1px solid $gray-3; - border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0; - } - - &-content { - padding: 8px 14px; - font-family: $brand-font-regular; - font-size: 13px; - } - - > .arrow { - border-width: $popover-outer-arrow__width; - - &, - &:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - } - - &.top > .arrow { - bottom: -$popover-outer-arrow__width; - left: 50%; - margin-left: -$popover-outer-arrow__width; - border-top-color: $popover-outer-arrow__color--fallback; // IE8 fallback - border-top-color: $popover-outer-arrow__color; - border-bottom-width: 0; - - &:after { - bottom: 1px; - margin-left: -$popover-arrow__width; - border-top-color: $popover-arrow__color; - border-bottom-width: 0; - content: ' '; - } - } - } -} diff --git a/scss/ng/reveal.scss b/scss/ng/reveal.scss deleted file mode 100644 index 87953172c1..0000000000 --- a/scss/ng/reveal.scss +++ /dev/null @@ -1,581 +0,0 @@ -// Foundation by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source -// @import '../colors/settings'; -// @import '../typography/settings'; -// @import '../components/button/settings'; -// @import '../tools/mixins/core'; -// @import '../tools/mixins/spacing'; - -// -// @name _reveal.scss -// @dependencies _global.scss -// - -// We use these to control the style of the reveal overlay. -$reveal-overlay-bg: rgba($md-black-100, 0.45) !default; -$reveal-overlay-bg-old: $md-black-100 !default; - -// We use these to control the style of the modal itself. -$reveal-modal-bg: $md-white-100 !default; -$reveal-position-top: rem-calc(100) !default; -$reveal-default-width: 80% !default; -$reveal-max-width: $row-width !default; -$reveal-modal-padding: rem-calc(30) !default; -$reveal-box-shadow: 0 0 10px rgba($md-black-100, 0.4) !default; - -// We use these to style the reveal close button -$reveal-close-font-size: rem-calc(40) !default; -$reveal-close-top: rem-calc(10) !default; -$reveal-close-side: rem-calc(22) !default; -$reveal-close-color: $base !default; -$reveal-close-weight: $font-weight-bold !default; - -// We use this to set the default radius used throughout the core. -$reveal-radius: $global-radius !default; -$reveal-round: $global-rounded !default; - -// We use these to control the modal border -$reveal-border-style: solid !default; -$reveal-border-width: 1px !default; -$reveal-border-color: $md-gray-90 !default; - -$reveal-modal-class: 'reveal-modal' !default; -$close-reveal-modal-class: 'close-reveal-modal' !default; - -// Set base z-index -$z-index-base: 1005; - -// -// @mixins -// - -// We use this to create the reveal background overlay styles -@mixin reveal-bg() { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $z-index-base - 1; - display: none; - // position: absolute; // allows modal background to extend beyond window position - background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future. - background: $reveal-overlay-bg; - #{$default-float}: 0; -} - -// We use this mixin to create the structure of a reveal modal -// -// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false -// $width - Sets reveal width Default: $reveal-default-width || 80% -// -@mixin reveal-modal-base( - $base-style: true, - $width: $reveal-default-width, - $max-width: $reveal-max-width, - $border-radius: $reveal-radius -) { - @if $base-style { - border-radius: $border-radius; - display: none; - position: absolute; - top: 0; - visibility: hidden; - width: 100%; - z-index: $z-index-base; - #{$default-float}: 0; - - @media #{$small-only} { - min-height: 100vh; - } - - // Make sure rows don't have a min-width on them - .column, - .columns { - min-width: 0; - } - - // Get rid of margin from first and last element inside modal - > :first-child { - margin-top: 0; - } - - > :last-child { - margin-bottom: 0; - } - } - - @if $width { - @media #{$medium-up} { - right: 0; - left: 0; - width: $width; - max-width: $max-width; - margin: 0 auto; - } - } -} - -// We use this to style the reveal modal defaults -// -// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $md-white-100 -// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding. -// $border - Choose whether reveal uses a border. Default: true, Options: false -// $border-style - Set reveal border style. Default: $reveal-border-style || solid -// $border-width - Width of border (i.e. 1px). Default: $reveal-border-width. -// $border-color - Color of border. Default: $reveal-border-color. -// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false -// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false -// $top-offset - Default: $reveal-position-top || 50px -@mixin reveal-modal-style( - $bg: false, - $padding: false, - $border: false, - $border-style: $reveal-border-style, - $border-width: $reveal-border-width, - $border-color: $reveal-border-color, - $box-shadow: false, - $radius: false, - $top-offset: false -) { - @if $bg { - background-color: $bg; - } - - @if $padding != false { - padding: $padding; - } - - @if $border { - border: $border-style $border-width $border-color; - } - - // We can choose whether or not to include the default box-shadow. - @if $box-shadow { - box-shadow: $reveal-box-shadow; - } - - // We can control how much radius is used on the modal - @if $radius == true { - @include radius($reveal-radius); - } @else if $radius { - @include radius($radius); - } - - @if $top-offset { - @media #{$medium-up} { - top: $top-offset; - } - } -} - -// We use this to create a close button for the reveal modal -// -// $color - Default: $reveal-close-color || $base -@mixin reveal-close($color: $reveal-close-color) { - position: absolute; - top: $reveal-close-top; - font-size: $reveal-close-font-size; - font-weight: $reveal-close-weight; - line-height: 1; - color: $color; - cursor: $cursor-pointer-value; - #{$opposite-direction}: $reveal-close-side; -} - -@include exports('reveal') { - // Reveal Modals - .reveal-modal-bg { - @include reveal-bg; - } - - .#{$reveal-modal-class} { - @include reveal-modal-base; - @include reveal-modal-style( - $bg: $reveal-modal-bg, - $padding: $reveal-modal-padding, - $border: true, - $box-shadow: true, - $radius: false, - $top-offset: $reveal-position-top - ); - - &.radius { - @include reveal-modal-style($radius: true); - } - - &.round { - @include reveal-modal-style($radius: $reveal-round); - } - - &.collapse { - @include reveal-modal-style($padding: 0); - } - - &.tiny { - @include reveal-modal-base(false, 30%); - } - - &.md-modal--small { - @include reveal-modal-base(false, 40%); - } - - &.medium { - @include reveal-modal-base(false, 60%); - } - - &.large { - @include reveal-modal-base(false, 70%); - } - - &.xlarge { - @include reveal-modal-base(false, 95%); - } - - &.full { - @include reveal-modal-base(false, 100%); - - top: 0; - left: 0; - height: 100vh; - height: 100%; - max-width: none !important; - min-height: 100vh; - margin-left: 0 !important; - } - - // Modals pushed to back - &.toback { - z-index: $z-index-base - 2; - } - - .#{$close-reveal-modal-class} { - @include reveal-close; - } - } -} - -/* begin reveal override */ - -@include exports('reveal-ui') { - // Reveal Modals - .reveal-modal-bg { - @include reveal-bg; - } - - .modal-open { - overflow: hidden; - } - - .#{$reveal-modal-class} { - @include reveal-modal-base; - @include reveal-modal-style( - $bg: $reveal-modal-bg, - $padding: $reveal-modal-padding, - $border: true, - $box-shadow: true, - $radius: false, - $top-offset: $reveal-position-top - ); - - position: fixed; - - &.radius { - @include reveal-modal-style($radius: true); - } - - &.round { - @include reveal-modal-style($radius: $reveal-round); - } - - &.collapse { - @include reveal-modal-style($padding: 0); - } - - &.dialog { - @include reveal-modal-base(false, 380px); - - padding: 0; - outline: none; - - .md-modal__content { - position: static; - border: none; - } - - .md-close { - display: none; - } - - .md-modal__header { - padding: rem-calc(24px); - padding-bottom: rem-calc(16px); - } - - .md-modal__title { - font-family: $brand-font-light; - font-size: 20px; - color: $md-gray-70; - text-align: center; - } - - .md-modal__body { - padding: 0 rem-calc(24px); - margin-bottom: rem-calc(32px); - text-align: center; - background: $md-white-100; - } - - .md-modal__footer { - display: flex; - padding: 0; - - .md-button { - line-height: 1.6; - color: $md-gray-70; - background: $md-white-100; - border-top: 1px solid $md-gray-30; - border-radius: 0; - border-bottom-left-radius: $reveal-radius; - flex: 1; - - &.md-button--blue { - color: $md-theme-50; - } - - &.md-button--blue:hover { - color: $md-white-100; - background-color: $md-theme-50; - } - - &.md-button--red { - color: $md-red-50; - } - - &.md-button--red:hover { - color: $md-white-100; - background-color: $md-red-50; - } - - &:hover { - background: $md-gray-20; - } - - &:disabled, - &.disabled { - color: $button__font-color--disabled; - - &:hover, - &:focus { - color: $button__font-color--disabled; - background-color: $md-white-100; - } - } - - &--primary, - &-primary { - color: $md-theme-50; - - &:hover, - &:active { - color: $md-white-100; - background: $md-theme-50; - } - - &:active { - background: $md-theme-60; - } - } - - &--alert, - &--negative { - color: $md-red-50; - - &:hover, - &:active { - color: $md-white-100; - background: $md-red-50; - } - - &:active { - background: $md-red-60; - } - } - - + .md-button { - margin-left: 0; - border-left: 1px solid $md-gray-30; - border-bottom-right-radius: $reveal-radius; - border-bottom-left-radius: 0; - } - } - } - } - - &.full { - @include reveal-modal-base(false, 100%); - - top: 24px; - left: 0; - height: 100vh; - max-width: none !important; - min-height: auto; - padding: 0; - margin-left: 0 !important; - overflow: auto; - background: transparent; - border: none; - outline: none; - box-shadow: none; - - .md-modal__title { - max-width: 900px; - padding: 0 2rem 0 1rem; - margin: 0; - font-family: $brand-font-extra-light; - font-size: 36px; - line-height: 48px; - color: $md-white-100; - } - - .md-modal__header { - width: 100%; - padding: 16px; - background: $md-theme-50; - flex: 0 0 76px; - - .md-close { - color: $md-white-100; - text-shadow: none; - border: none; - - &:before { - font-size: 20px; - } - } - } - - .md-modal__content, - .md-modal__content > [ui-view], - .md-modal__content > [ui-view] > [ui-view] { - position: static; - display: flex; - height: calc(100vh - 48px); - max-width: 60.25rem; - margin: 0 auto; - background: $md-gray-20; - border: none; - border-radius: 0; - flex-direction: column; - - &.md-modal--small { - max-width: 40rem; - max-height: 500px; - - .md-modal__header { - padding: 0.75rem 1rem; - flex: 0 0 50px; - } - - .md-modal__title { - font-family: $brand-font-light; - font-size: 20px; - line-height: 32px; - } - - .md-modal__footer { - padding: 16px; - padding-top: 12px; - flex: 0 0 64px; - } - - .md-modal__body { - > * { - max-width: 590px; - } - } - } - } - - .md-modal__content > [ui-view], - .md-modal__content > [ui-view] > [ui-view] { - margin: 0; - } - - .md-modal__body { - display: flex; - padding: rem-calc(24) 2rem; - margin: 0; - overflow-x: hidden; - overflow-y: auto; - background: $md-white-100; - flex-direction: column; - flex: 1 1 auto; - align-self: stretch; - align-items: stretch; // IE fix - - > * { - width: auto; // IE fix - max-width: 900px; - min-width: 100%; - flex-shrink: 0; - } - } - - .md-modal__footer { - width: 100%; - padding: 20px 2rem; - text-align: right; - background: $md-gray-20; - flex: 0 0 76px; - } - - @media (max-width: $screen-md-min) { - .md-modal__title { - padding-left: calc(10vw - 12px); - } - - .md-modal__body { - padding-right: 10vw; - padding-left: 10vw; - } - } - } - - // Modals pushed to back - &.toback { - z-index: $z-index-base - 2; - } - - .#{$close-reveal-modal-class} { - @include reveal-close; - } - } -} - -.reveal-modal-bg.fade.in { - z-index: 10000; -} - -//Till Bootstrap is removed - -.modal-alt .md-modal__content { - top: 0; - background: transparent; -} - -.#{$reveal-modal-class} { - .md-modal__body { - padding: 0; - } -} - -.reveal-bottom { - transform: translateY(100%); - transition: transform 0.3s; - - &.in { - transform: translateY(0); - } -} diff --git a/scss/ng/search-filter.scss b/scss/ng/search-filter.scss deleted file mode 100644 index 71ad50926f..0000000000 --- a/scss/ng/search-filter.scss +++ /dev/null @@ -1,314 +0,0 @@ -// @import '../tools/functions/core'; -// @import '../colors/settings'; - -@include exports('ng-search-filter') { - .searchfilter { - display: flex; - font-size: 18px; - line-height: 30px; - color: $md-gray-90; - align-items: baseline; - - .page-header & { - position: relative; - top: rem-calc(-9); - } - - > span { - font-family: $brand-font-light; - font-size: 20px; - line-height: 20px; - } - } - - .search { - padding-right: 0.5rem; - color: $md-gray-40; - background: transparent; - border: none; - - &:focus, - &:hover, - &.fakefocus:focus, - &.fakefocus:hover { - color: $md-gray-40; - background: transparent; - box-shadow: none; - } - - .icon { - color: $md-gray-90; - } - } - - .table-filter { - display: inline-block; - - .dropdown-toggle { - color: $md-theme-50; - - .md-button { - height: 25px; - min-width: initial; - padding: 0 2px 0 4px; - margin: 10px 0 0 30px; - } - - .icon { - font-size: 14px; - vertical-align: middle; - } - } - - ul { - padding: 0; - margin: 0; - } - - .dropdown-menu { - left: calc(100% - 30px); - - a { - display: inline-flex; - padding-top: 0; - padding-bottom: 0; - } - - icon { - top: 12px; - } - } - - .filter { - cursor: pointer; - - span { - font-size: 1rem; - } - - > a > i { - visibility: hidden; - } - - .showMe { - visibility: visible; - } - } - - &.open { - .filter { - span { - font-size: 0.875rem; - } - } - } - } - - .searchbox { - margin-right: 1rem; - text-decoration: none; - - .searchinput { - position: relative; - display: inline-block; - height: 36px; - min-width: 36px; - background: $md-white-100; - border: 1px solid $input__border-color; - border-radius: 2px; - - > input { - position: relative; - top: 1px; - } - - > input { - display: inline-block; - height: 32px; - max-width: 200px; - min-width: 35px; - padding: 8px 1px 7px 0; - margin-bottom: 3px; - margin-left: 38px; - font-family: $brand-font-light; - font-size: 1.125rem; - color: $gray !important; - background: $md-white-100; - border: none; - - @include easing-transition(width, 500ms, $easeOutQuint); - - &:focus { - - outline: none; - box-shadow: none; - - ::placeholder { - color: $md-gray-30; - } - } - } - - > i { - position: absolute; - top: 9px; - left: 11px; - font-size: 16px; - color: $md-gray-90; - border: none; - border-radius: 0; - } - - > i.clear { - right: 11px; - left: auto; - display: none; - color: $md-gray-50; - } - - > input.ng-not-empty { - margin-right: 30px; - - + i.clear { - display: block; - } - } - } - - > button { - height: 29px; - padding: 2px; - color: $md-gray-40; - background: transparent; - border: none; - - i { - font-size: 14px; - border: solid 1px; - border-color: transparent; - border-radius: 60%; - - &:hover { - border-color: $md-gray-30; - } - } - - &:focus { - outline: none; - } - } - - &:hover { - cursor: pointer; - } - } - - .fakefocus { - .searchinput { - cursor: default; - - > input, - > span { - color: $md-theme-50; - cursor: default; - } - } - } - - .screen-lg { - .searchfilter { - padding-bottom: 0px; - clear: none; - } - - .table-filter { - position: relative; - top: 1px; - padding: 0; - margin: 8px 0 0 0; - font-size: 1.125rem; - - & ul { - font-size: 0; - } - - .filter { - display: inline-block; - margin: 0 0.5rem; - font-size: initial; - - a { - color: $md-gray-50; - cursor: pointer; - - &:hover { - color: $md-theme-50; - text-decoration: none; - } - - &:focus { - color: $md-gray-40; - text-decoration: none; - border: none; - box-shadow: none; - } - } - - i { - font-size: 10px; - line-height: 0.4; - } - - .name { - font-family: $brand-font-light; - } - - .count { - font-family: $brand-font-light; - visibility: visible; - } - - &:hover, - &:focus { - color: $md-theme-50; - } - } - - .active { - cursor: default; - - .name, - .count, - > a { - color: $md-theme-50; - cursor: default; - } - } - } - } - - .screen-xs, - .screen-sm, - .screen-md { - .searchfilter { - .filter { - .count { - float: right; - visibility: visible; - } - } - - .table-filter { - .dropdown-menu { - min-width: 195px; - } - - .filter { - margin-right: 0px; - } - } - } - } -} - -/* --------- search-filter* --------- */ diff --git a/scss/ng/select.scss b/scss/ng/select.scss deleted file mode 100644 index 99e2894ecb..0000000000 --- a/scss/ng/select.scss +++ /dev/null @@ -1,511 +0,0 @@ -// @import '../colors/settings'; -// @import '../settings/core'; -// @import '../settings/dropdown'; -// @import '../components/forms/settings'; -// @import '../components/icon/settings'; -// @import '../components/input/settings'; -// @import '../components/list-item/settings'; -// @import '../components/select/settings'; -// @import '../tools/functions/core'; -// @import '../tools/mixins/border-radius'; -// @import '../components/list-item/mixins'; -// @import '../tools/mixins/nav-divider'; -// @import '../tools/mixins/spacing'; -// @import '~@momentum-ui/icons/scss/mixins'; - -@include exports('ng-select') { - .hidden-select { - display: none; - } - - .select-list { - position: relative; - width: 100%; - - @include vr-spacing(mb, 0.5); - - .pointer { - cursor: pointer; - } - - > div > div.md-input__messages { - position: absolute; - width: 100%; - } - - &.alert { - div.ellipsis > span.icon { - &:before { - @include icon-error_12; - } - - font-size: 0.75rem; - color: $md-red-50; - } - - div.ellipsis, - div.message { - color: $md-red-50; - } - - div.message, - .select-toggle { - border: 1px solid $md-red-50; - } - - .md-input__messages { - display: block; - color: $md-red-50; - - &:before { - color: $input__message__font-color--error; - - @include icon-error_12; - } - } - } - - &.warn { - div.ellipsis > span.icon { - &:before { - @include icon-warning_16; - } - - font-size: 0.75rem; - color: $md-yellow-50; - } - - div.ellipsis, - div.message { - color: $md-yellow-50; - } - - div.message, - .select-toggle { - border: 1px solid $md-yellow-50; - } - - .md-input__messages { - display: block; - color: $md-yellow-70; - - &:before { - color: $md-yellow-50; - - @include icon-warning_16; - } - } - } - - div.ellipsis > span.text-wrap { - font-size: 0.75rem; - } - - div.ellipsis > span.text-wrap:before { - position: absolute; - right: 0px; - bottom: 0px; - z-index: -2; - font-size: 0.95rem; - content: '\2026'; - } - - div.ellipsis > span.text-wrap:after { - position: absolute; - left: 0px; - z-index: -1; - width: 100%; - height: 100%; - background-color: $md-white-100; - content: ''; - } - - div.ellipsis { - position: relative; - z-index: 0; - height: 1.45rem; - padding: 6px 12px 5px 5px; - padding-right: 20px; - overflow: hidden; - font-size: 0.75rem; - text-overflow: ellipsis; - white-space: normal; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - } - - div.ellipsis.pointer { - cursor: pointer; - } - - div.message { - position: absolute; - right: 0px; - z-index: 100; - width: calc(100% - 1.375rem); - padding: 11px; - font-size: 0.75rem; - background-color: $md-white-100; - } - - - - [md-dropdown] { - display: block; - - ul { - padding: 0; - } - } - - .dropdown-menu { - width: 100%; - max-width: 100%; - } - - // Open state for the dropdown - .open { - // Show the menu - > .select-dropdown { - display: block; - } - - // Remove the outline when :focus is triggered - > a { - outline: 0; - - &:focus, - &:hover { - color: $text-color; - border: 1px solid $md-gray-30; - } - } - - .icon { - transform: rotate(180deg); - } - - &[md-dropdown] { - .dropdown-menu:not(.sub-menu) { - visibility: visible; - } - } - } - } - - %select-icon { - position: absolute; - right: rem-calc(8); - font-size: 1rem; - line-height: inherit; - color: $md-gray-50; - pointer-events: all; - border-top-right-radius: $select-border-radius; - border-bottom-right-radius: $select-border-radius; - } - - .select-toggle { - display: block; - width: 100%; - height: rem-calc(36); - overflow: hidden; - line-height: rem-calc(18); - color: $text-color; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - background-color: $md-white-100; - border: 1px solid $input__border-color; - border-radius: $select-border-radius; - - @include vr-spacing(pl, 1, 2px); - @include vr-spacing(pt, 0.5); - @include vr-spacing(pr, 2.25); - - > i.icon { - @extend %select-icon; - - transform: rotate(0); - transition: transform ease 0.15s; - } - - > span { - font-size: inherit; - line-height: inherit; - } - - &:focus { - // outline focus fix - z-index: 800; - background: $input__background; - border-color: $input__border-color; - outline: none; - box-shadow: none; - transition: border-color ease-in 0.15s, box-shadow ease-in 0.15s; - } - - &:focus, - &:hover { - color: inherit; - text-decoration: none; - cursor: default; - } - } - - .select-toggle.disabled, - .select-toggle.disabled:focus { - color: $md-gray-40; - pointer-events: none; - cursor: not-allowed; - background-color: $input__background--disabled; - border: 1px solid $input__border-color; - - > i { - pointer-events: none; - cursor: not-allowed; - } - } - - .nested { - .md-list-item { - padding: 0; - } - } - - .select-options, - .md-select__options { - max-height: 261px; - padding: 0; - margin: 0; - list-style: none; - - // Dividers (basically an hr) within the dropdown - .divider { - @include nav-divider($dropdown-divider-bg); - } - - label { - display: inline-block; - } - - // Links within the dropdown menu - > li, - > .md-list-item { - position: relative; - width: 100%; - - &:hover, - &.hover { - & > .sub-menu { - position: absolute; - top: 0; - left: calc(100% - 1px); - display: inline-block; - width: auto; - - .top & { - transform: translateY(0); - } - } - } - - &.parent, - &.md-select__option--parent { - &:hover, - &.hover { - cursor: default; - - & i.icon { - transform: rotate(180deg); - } - } - - & > a { - &:hover, - &.hover { - pointer-events: none; - cursor: default; - } - - > i.icon { - @extend %select-icon; - } - - pointer-events: none; - } - } - - > a { - @include flex($jc: space-between); - width: 100%; - padding: 7px 0; - padding-left: 16px; - - // prevent links from randomly breaking onto new lines - overflow: hidden; - clear: both; - font-weight: 450; - line-height: $line-height-base; - line-height: 21px; - color: $dropdown-link-color; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; - - .md-checkbox { - @include vr-spacing(mb, 0); - - .md-checkbox__label { - width: 100%; - - @include vr-spacing(mr, 1); - - span { - padding-top: 0; - } - } - } - - &:hover, - &:focus, - &.hover { - color: $dropdown-link-hover-color; - text-decoration: none; - } - - &:focus { - // outline focus fix - z-index: 800; - background: $input__background; - border-color: $input__border-color; - outline: none; - box-shadow: none; - transition: border-color ease-in 0.15s, box-shadow ease-in 0.15s; - } - - &:first-child { - > a { - @include border-top-radius($border-radius-large); - } - } - - &:last-child { - > a { - @include border-bottom-radius($border-radius-large); - } - } - } - } - - > .active > a { - &, - &:hover, - &:focus { - color: $dropdown-link-active-color; - text-decoration: none; - background-color: $dropdown-link-active-bg; - outline: 0; - } - } - - .select-selected { - background-color: $md-theme-50; - - .md-input { - color: $md-gray-90; - } - - > a { - color: $md-white-100; - } - } - } - - .select-filter { - width: 100%; - padding: 6px 16px; - border: none; - border-bottom: 1px solid #ccc; - border-radius: $select-border-radius; - - &:focus { - // outline focus fix - z-index: 800; - margin-bottom: 2px; - background: $input__background; - border-color: $input__border-color; - outline: none; - transition: border-color ease-in 0.15s, box-shadow ease-in 0.15s; - } - } - - .filterfocus { - // outline focus fix - z-index: 800; - margin-bottom: 2px; - background: $input__background; - border-color: $input__border-color; - outline: none; - transition: border-color ease-in 0.15s, box-shadow ease-in 0.15s; - } - - .form-control-icon { - position: absolute; - top: 0; - right: 0; - z-index: 2; - display: block; - width: 34px; - height: 34px; - line-height: 35px; - text-align: center; - pointer-events: none; - } - - .dropup { - // Reverse the caret - .caret { - border-top: 0; - border-bottom: $caret-width-base solid; - content: ''; - } - - // Different positioning for bottom up menu - .select-dropdown { - top: auto; - bottom: 100%; - margin-bottom: 5px; - } - } - - .md-select-container { - display: flex; - flex-flow: row; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: center; - width: 100%; - } - - .md-select-multi { - .icon { - // padding-top: 0.5rem; - } - - label.md-checkbox, - .md-input-container { - display: inline; - } - - label.md-checkbox { - position: relative; - top: 2px; - } - } - - .secondary-label { - margin-left: 15px; - color: $md-gray-70; - } -} diff --git a/scss/ng/settings/settings.js b/scss/ng/settings/settings.js deleted file mode 100644 index a11129146f..0000000000 --- a/scss/ng/settings/settings.js +++ /dev/null @@ -1,18 +0,0 @@ -const path = require('path'); -const coreSettingsFiles = require('../../settings/settings'); - -const ngSettingsFiles = [ - './sidepanel.scss', - './slider.scss', - './topbar.scss', -].map(file => path.resolve(__dirname, file)); - -const iconsSettingsFiles = [ - '../../../../icons/scss/variables.scss', - '../../../../icons/scss/symphony/variable-mapping.scss', -].map(file => path.resolve(__dirname, file)); - - -// const ngSettingsFilePaths = ngSettingsFiles.map(file => path.resolve(__dirname, file)); - -module.exports = iconsSettingsFiles.concat(coreSettingsFiles.concat(ngSettingsFiles)) diff --git a/scss/ng/settings/settings.scss b/scss/ng/settings/settings.scss deleted file mode 100644 index 9d68fb0d22..0000000000 --- a/scss/ng/settings/settings.scss +++ /dev/null @@ -1,9694 +0,0 @@ -@use "sass:math"; - -@function char-from-code($iso-char) { - @return unquote('"\\#{$iso-char}"'); -} - -$icon-font-name: 'momentum-ui-icons' !default; -$icon-font-path: '~@momentum-ui/icons/fonts' !default; -$icon-css-prefix: icon !default; -$icon-border-color: #D2D5D6 !default; // $md-gray-30 -$icon-inverse-color: #FFFFFF !default; // $md-white-100 -$icon-li-width: 2.14285714em !default; - -$icon-3d-object_16: char-from-code("f101"); -$icon-3d-object_20: char-from-code("f102"); -$icon-3d-object_24: char-from-code("f103"); -$icon-3d-object_56: char-from-code("f104"); -$icon-accessibility_16: char-from-code("f105"); -$icon-accessories_16: char-from-code("f106"); -$icon-accessories_18: char-from-code("f107"); -$icon-accessories_20: char-from-code("f108"); -$icon-accessories_24: char-from-code("f109"); -$icon-accessories_36: char-from-code("f10a"); -$icon-accessories_56: char-from-code("f10b"); -$icon-accessories-active_12: char-from-code("f10c"); -$icon-accessories-active_16: char-from-code("f10d"); -$icon-accessories-active_18: char-from-code("f10e"); -$icon-accessories-active_20: char-from-code("f10f"); -$icon-active-speaker_12: char-from-code("f110"); -$icon-active-speaker_16: char-from-code("f111"); -$icon-active-speaker_24: char-from-code("f112"); -$icon-active-speaker_32: char-from-code("f113"); -$icon-active-speaker_48: char-from-code("f114"); -$icon-active-speaker-alert_12: char-from-code("f115"); -$icon-active-speaker-locked_24: char-from-code("f116"); -$icon-active-speaker-muted_12: char-from-code("f117"); -$icon-active-speaker-muted_16: char-from-code("f118"); -$icon-active-speaker-muted_24: char-from-code("f119"); -$icon-activities_12: char-from-code("f11a"); -$icon-activities_16: char-from-code("f11b"); -$icon-add_10: char-from-code("f11c"); -$icon-add_12: char-from-code("f11d"); -$icon-add_14: char-from-code("f11e"); -$icon-add_16: char-from-code("f11f"); -$icon-add_20: char-from-code("f120"); -$icon-add_24: char-from-code("f121"); -$icon-add-option_12: char-from-code("f122"); -$icon-add-option_14: char-from-code("f123"); -$icon-add-option_16: char-from-code("f124"); -$icon-add-poll_12: char-from-code("f125"); -$icon-add-poll_14: char-from-code("f126"); -$icon-add-question_12: char-from-code("f127"); -$icon-add-question_14: char-from-code("f128"); -$icon-add-question_16: char-from-code("f129"); -$icon-add-video-marker_12: char-from-code("f12a"); -$icon-added-to-space_10: char-from-code("f12b"); -$icon-added-to-space_12: char-from-code("f12c"); -$icon-adjust_12: char-from-code("f12d"); -$icon-adjust_14: char-from-code("f12e"); -$icon-adjust_16: char-from-code("f12f"); -$icon-adjust_20: char-from-code("f130"); -$icon-adjust_24: char-from-code("f131"); -$icon-adjust-audio_12: char-from-code("f132"); -$icon-adjust-audio_14: char-from-code("f133"); -$icon-adjust-audio_16: char-from-code("f134"); -$icon-adjust-audio_18: char-from-code("f135"); -$icon-adjust-audio_20: char-from-code("f136"); -$icon-adjust-audio_24: char-from-code("f137"); -$icon-adjust-audio_28: char-from-code("f138"); -$icon-adjust-microphone_12: char-from-code("f139"); -$icon-adjust-video_14: char-from-code("f13a"); -$icon-adjust-video_16: char-from-code("f13b"); -$icon-adjust-video_24: char-from-code("f13c"); -$icon-admin_12: char-from-code("f13d"); -$icon-admin_14: char-from-code("f13e"); -$icon-admin_16: char-from-code("f13f"); -$icon-admin_24: char-from-code("f140"); -$icon-admin_32: char-from-code("f141"); -$icon-alarm_16: char-from-code("f142"); -$icon-alarm_20: char-from-code("f143"); -$icon-alarm_24: char-from-code("f144"); -$icon-alert_10: char-from-code("f145"); -$icon-alert_12: char-from-code("f146"); -$icon-alert_14: char-from-code("f147"); -$icon-alert_16: char-from-code("f148"); -$icon-alert_18: char-from-code("f149"); -$icon-alert_20: char-from-code("f14a"); -$icon-alert_24: char-from-code("f14b"); -$icon-alert_28: char-from-code("f14c"); -$icon-alert_36: char-from-code("f14d"); -$icon-alert-active_10: char-from-code("f14e"); -$icon-alert-active_12: char-from-code("f14f"); -$icon-alert-active_16: char-from-code("f150"); -$icon-alert-active_18: char-from-code("f151"); -$icon-alert-active_20: char-from-code("f152"); -$icon-alert-active_24: char-from-code("f153"); -$icon-alert-active_36: char-from-code("f154"); -$icon-alert-muted_10: char-from-code("f155"); -$icon-alert-muted_12: char-from-code("f156"); -$icon-alert-muted_14: char-from-code("f157"); -$icon-alert-muted_16: char-from-code("f158"); -$icon-alert-muted_18: char-from-code("f159"); -$icon-alert-muted_20: char-from-code("f15a"); -$icon-alert-muted_24: char-from-code("f15b"); -$icon-alert-muted_28: char-from-code("f15c"); -$icon-alert-muted_36: char-from-code("f15d"); -$icon-alert-muted_8: char-from-code("f15e"); -$icon-alert-muted-active_10: char-from-code("f15f"); -$icon-alert-muted-active_12: char-from-code("f160"); -$icon-alert-muted-active_16: char-from-code("f161"); -$icon-alert-muted-active_18: char-from-code("f162"); -$icon-alert-muted-active_20: char-from-code("f163"); -$icon-alert-muted-active_24: char-from-code("f164"); -$icon-alert-muted-active_36: char-from-code("f165"); -$icon-alert-muted-active_8: char-from-code("f166"); -$icon-allow-to-annotate_16: char-from-code("f167"); -$icon-allow-to-annotate_24: char-from-code("f168"); -$icon-analysis_12: char-from-code("f169"); -$icon-analysis_16: char-from-code("f16a"); -$icon-analysis_20: char-from-code("f16b"); -$icon-analysis_24: char-from-code("f16c"); -$icon-analysis_32: char-from-code("f16d"); -$icon-analysis_36: char-from-code("f16e"); -$icon-analysis_48: char-from-code("f16f"); -$icon-analysis-active_16: char-from-code("f170"); -$icon-analysis-active_20: char-from-code("f171"); -$icon-analysis-active_24: char-from-code("f172"); -$icon-analysis-active_32: char-from-code("f173"); -$icon-analysis-active_36: char-from-code("f174"); -$icon-analysis-active_48: char-from-code("f175"); -$icon-angellist_16: char-from-code("f176"); -$icon-annotation_10: char-from-code("f177"); -$icon-annotation_12: char-from-code("f178"); -$icon-annotation_14: char-from-code("f179"); -$icon-annotation_16: char-from-code("f17a"); -$icon-annotation_18: char-from-code("f17b"); -$icon-annotation_20: char-from-code("f17c"); -$icon-annotation_24: char-from-code("f17d"); -$icon-annotation-legacy_16: char-from-code("f17e"); -$icon-announcement_12: char-from-code("f17f"); -$icon-announcement_14: char-from-code("f180"); -$icon-announcement_16: char-from-code("f181"); -$icon-announcement_20: char-from-code("f182"); -$icon-announcement_72: char-from-code("f183"); -$icon-announcement_8: char-from-code("f184"); -$icon-announcement-active_12: char-from-code("f185"); -$icon-announcement-active_14: char-from-code("f186"); -$icon-announcement-active_16: char-from-code("f187"); -$icon-announcement-active_20: char-from-code("f188"); -$icon-announcement-active_8: char-from-code("f189"); -$icon-announcement-muted_14: char-from-code("f18a"); -$icon-appearance_16: char-from-code("f18b"); -$icon-appearance_20: char-from-code("f18c"); -$icon-applause_12: char-from-code("f18d"); -$icon-applause_16: char-from-code("f18e"); -$icon-application_12: char-from-code("f18f"); -$icon-application_16: char-from-code("f190"); -$icon-application_20: char-from-code("f191"); -$icon-application_24: char-from-code("f192"); -$icon-application_36: char-from-code("f193"); -$icon-application_48: char-from-code("f194"); -$icon-application-panel_16: char-from-code("f195"); -$icon-application-panel_20: char-from-code("f196"); -$icon-applications_16: char-from-code("f197"); -$icon-applications_24: char-from-code("f198"); -$icon-approvals_16: char-from-code("f199"); -$icon-approvals_32: char-from-code("f19a"); -$icon-apps_16: char-from-code("f19b"); -$icon-apps_20: char-from-code("f19c"); -$icon-apps_24: char-from-code("f19d"); -$icon-apps_28: char-from-code("f19e"); -$icon-apps-active_16: char-from-code("f19f"); -$icon-apps-active_20: char-from-code("f1a0"); -$icon-apps-active_24: char-from-code("f1a1"); -$icon-apps-active_28: char-from-code("f1a2"); -$icon-archive_10: char-from-code("f1a3"); -$icon-archive_12: char-from-code("f1a4"); -$icon-archive_14: char-from-code("f1a5"); -$icon-archive_16: char-from-code("f1a6"); -$icon-archive_20: char-from-code("f1a7"); -$icon-archive_8: char-from-code("f1a8"); -$icon-area-chart_16: char-from-code("f1a9"); -$icon-area-selector_16: char-from-code("f1aa"); -$icon-area-selector_20: char-from-code("f1ab"); -$icon-arrow-circle-down_16: char-from-code("f1ac"); -$icon-arrow-circle-down_20: char-from-code("f1ad"); -$icon-arrow-circle-down_24: char-from-code("f1ae"); -$icon-arrow-circle-left_16: char-from-code("f1af"); -$icon-arrow-circle-left_20: char-from-code("f1b0"); -$icon-arrow-circle-left_24: char-from-code("f1b1"); -$icon-arrow-circle-right_16: char-from-code("f1b2"); -$icon-arrow-circle-right_20: char-from-code("f1b3"); -$icon-arrow-circle-right_24: char-from-code("f1b4"); -$icon-arrow-circle-up_16: char-from-code("f1b5"); -$icon-arrow-circle-up_20: char-from-code("f1b6"); -$icon-arrow-circle-up_24: char-from-code("f1b7"); -$icon-arrow-down_12: char-from-code("f1b8"); -$icon-arrow-down_16: char-from-code("f1b9"); -$icon-arrow-down_18: char-from-code("f1ba"); -$icon-arrow-down_20: char-from-code("f1bb"); -$icon-arrow-down_24: char-from-code("f1bc"); -$icon-arrow-down_28: char-from-code("f1bd"); -$icon-arrow-down_32: char-from-code("f1be"); -$icon-arrow-down_6: char-from-code("f1bf"); -$icon-arrow-down_8: char-from-code("f1c0"); -$icon-arrow-down-optical_10: char-from-code("f1c1"); -$icon-arrow-down-optical_12: char-from-code("f1c2"); -$icon-arrow-down-optical_14: char-from-code("f1c3"); -$icon-arrow-down-optical_16: char-from-code("f1c4"); -$icon-arrow-down-optical_18: char-from-code("f1c5"); -$icon-arrow-down-optical_20: char-from-code("f1c6"); -$icon-arrow-down-optical_24: char-from-code("f1c7"); -$icon-arrow-down-optical_28: char-from-code("f1c8"); -$icon-arrow-down-optical_32: char-from-code("f1c9"); -$icon-arrow-down-optical_8: char-from-code("f1ca"); -$icon-arrow-filled-down_10: char-from-code("f1cb"); -$icon-arrow-filled-down_12: char-from-code("f1cc"); -$icon-arrow-filled-down_8: char-from-code("f1cd"); -$icon-arrow-filled-up_10: char-from-code("f1ce"); -$icon-arrow-filled-up_12: char-from-code("f1cf"); -$icon-arrow-filled-up_8: char-from-code("f1d0"); -$icon-arrow-left_12: char-from-code("f1d1"); -$icon-arrow-left_16: char-from-code("f1d2"); -$icon-arrow-left_18: char-from-code("f1d3"); -$icon-arrow-left_20: char-from-code("f1d4"); -$icon-arrow-left_24: char-from-code("f1d5"); -$icon-arrow-left_28: char-from-code("f1d6"); -$icon-arrow-left_32: char-from-code("f1d7"); -$icon-arrow-left_6: char-from-code("f1d8"); -$icon-arrow-left_8: char-from-code("f1d9"); -$icon-arrow-left-optical_10: char-from-code("f1da"); -$icon-arrow-left-optical_12: char-from-code("f1db"); -$icon-arrow-left-optical_14: char-from-code("f1dc"); -$icon-arrow-left-optical_16: char-from-code("f1dd"); -$icon-arrow-left-optical_18: char-from-code("f1de"); -$icon-arrow-left-optical_20: char-from-code("f1df"); -$icon-arrow-left-optical_24: char-from-code("f1e0"); -$icon-arrow-left-optical_28: char-from-code("f1e1"); -$icon-arrow-left-optical_32: char-from-code("f1e2"); -$icon-arrow-left-optical_8: char-from-code("f1e3"); -$icon-arrow-right_12: char-from-code("f1e4"); -$icon-arrow-right_16: char-from-code("f1e5"); -$icon-arrow-right_18: char-from-code("f1e6"); -$icon-arrow-right_20: char-from-code("f1e7"); -$icon-arrow-right_24: char-from-code("f1e8"); -$icon-arrow-right_28: char-from-code("f1e9"); -$icon-arrow-right_32: char-from-code("f1ea"); -$icon-arrow-right_6: char-from-code("f1eb"); -$icon-arrow-right_8: char-from-code("f1ec"); -$icon-arrow-right-optical_10: char-from-code("f1ed"); -$icon-arrow-right-optical_12: char-from-code("f1ee"); -$icon-arrow-right-optical_14: char-from-code("f1ef"); -$icon-arrow-right-optical_16: char-from-code("f1f0"); -$icon-arrow-right-optical_18: char-from-code("f1f1"); -$icon-arrow-right-optical_20: char-from-code("f1f2"); -$icon-arrow-right-optical_24: char-from-code("f1f3"); -$icon-arrow-right-optical_28: char-from-code("f1f4"); -$icon-arrow-right-optical_32: char-from-code("f1f5"); -$icon-arrow-right-optical_8: char-from-code("f1f6"); -$icon-arrow-tail-down_10: char-from-code("f1f7"); -$icon-arrow-tail-down_12: char-from-code("f1f8"); -$icon-arrow-tail-down_14: char-from-code("f1f9"); -$icon-arrow-tail-down_16: char-from-code("f1fa"); -$icon-arrow-tail-down_20: char-from-code("f1fb"); -$icon-arrow-tail-down_24: char-from-code("f1fc"); -$icon-arrow-tail-down_28: char-from-code("f1fd"); -$icon-arrow-tail-down_36: char-from-code("f1fe"); -$icon-arrow-tail-up_10: char-from-code("f1ff"); -$icon-arrow-tail-up_12: char-from-code("f200"); -$icon-arrow-tail-up_14: char-from-code("f201"); -$icon-arrow-tail-up_16: char-from-code("f202"); -$icon-arrow-tail-up_20: char-from-code("f203"); -$icon-arrow-tail-up_24: char-from-code("f204"); -$icon-arrow-tail-up_28: char-from-code("f205"); -$icon-arrow-tail-up_36: char-from-code("f206"); -$icon-arrow-up_12: char-from-code("f207"); -$icon-arrow-up_16: char-from-code("f208"); -$icon-arrow-up_18: char-from-code("f209"); -$icon-arrow-up_20: char-from-code("f20a"); -$icon-arrow-up_24: char-from-code("f20b"); -$icon-arrow-up_28: char-from-code("f20c"); -$icon-arrow-up_32: char-from-code("f20d"); -$icon-arrow-up_6: char-from-code("f20e"); -$icon-arrow-up_8: char-from-code("f20f"); -$icon-arrow-up-optical_12: char-from-code("f210"); -$icon-arrow-up-optical_14: char-from-code("f211"); -$icon-arrow-up-optical_16: char-from-code("f212"); -$icon-arrow-up-optical_18: char-from-code("f213"); -$icon-arrow-up-optical_20: char-from-code("f214"); -$icon-arrow-up-optical_24: char-from-code("f215"); -$icon-arrow-up-optical_28: char-from-code("f216"); -$icon-arrow-up-optical_32: char-from-code("f217"); -$icon-arrow-up-optical_8: char-from-code("f218"); -$icon-ask-for-help_12: char-from-code("f219"); -$icon-ask-for-help_16: char-from-code("f21a"); -$icon-ask-for-help_20: char-from-code("f21b"); -$icon-assign-host_12: char-from-code("f21c"); -$icon-assign-host_16: char-from-code("f21d"); -$icon-assign-host_20: char-from-code("f21e"); -$icon-assign-host_24: char-from-code("f21f"); -$icon-assign-privilege_12: char-from-code("f220"); -$icon-assign-privilege_16: char-from-code("f221"); -$icon-assign-privilege_20: char-from-code("f222"); -$icon-assignment_24: char-from-code("f223"); -$icon-asterisk_10: char-from-code("f224"); -$icon-asterisk_16: char-from-code("f225"); -$icon-asterisk_24: char-from-code("f226"); -$icon-asterisk_32: char-from-code("f227"); -$icon-asterisk_36: char-from-code("f228"); -$icon-attachment_12: char-from-code("f229"); -$icon-attachment_16: char-from-code("f22a"); -$icon-attachment_20: char-from-code("f22b"); -$icon-attachment_24: char-from-code("f22c"); -$icon-audio-and-video-connection_12: char-from-code("f22d"); -$icon-audio-and-video-connection_20: char-from-code("f22e"); -$icon-audio-and-video-connection_24: char-from-code("f22f"); -$icon-audio-broadcast_14: char-from-code("f230"); -$icon-audio-broadcast_16: char-from-code("f231"); -$icon-audio-broadcast_20: char-from-code("f232"); -$icon-audio-broadcast_24: char-from-code("f233"); -$icon-audio-call_14: char-from-code("f234"); -$icon-audio-call_16: char-from-code("f235"); -$icon-audio-input_16: char-from-code("f236"); -$icon-audio-options_20: char-from-code("f237"); -$icon-audio-options_24: char-from-code("f238"); -$icon-audio-options_28: char-from-code("f239"); -$icon-audio-options_32: char-from-code("f23a"); -$icon-audio-options_40: char-from-code("f23b"); -$icon-audio-video_12: char-from-code("f23c"); -$icon-audio-video_16: char-from-code("f23d"); -$icon-audio-video_20: char-from-code("f23e"); -$icon-audio-video_24: char-from-code("f23f"); -$icon-audio-video_28: char-from-code("f240"); -$icon-back_10: char-from-code("f241"); -$icon-back_12: char-from-code("f242"); -$icon-back_16: char-from-code("f243"); -$icon-back_20: char-from-code("f244"); -$icon-back_24: char-from-code("f245"); -$icon-back_28: char-from-code("f246"); -$icon-back_36: char-from-code("f247"); -$icon-back-to-fullscreen_12: char-from-code("f248"); -$icon-back-to-fullscreen_14: char-from-code("f249"); -$icon-back-to-fullscreen_16: char-from-code("f24a"); -$icon-back-to-fullscreen_20: char-from-code("f24b"); -$icon-back-to-fullscreen_22: char-from-code("f24c"); -$icon-back-to-fullscreen_24: char-from-code("f24d"); -$icon-back-to-fullscreen-adr_12: char-from-code("f24e"); -$icon-back-to-fullscreen-adr_14: char-from-code("f24f"); -$icon-back-to-fullscreen-adr_16: char-from-code("f250"); -$icon-back-to-fullscreen-adr_20: char-from-code("f251"); -$icon-back-to-fullscreen-adr_22: char-from-code("f252"); -$icon-back-to-fullscreen-adr_24: char-from-code("f253"); -$icon-back-to-fullscreen-adr_26: char-from-code("f254"); -$icon-back-to-fullscreen-adr_28: char-from-code("f255"); -$icon-backspace_16: char-from-code("f256"); -$icon-backspace_20: char-from-code("f257"); -$icon-backspace_24: char-from-code("f258"); -$icon-backup-data_16: char-from-code("f259"); -$icon-backup-data_24: char-from-code("f25a"); -$icon-battery_20: char-from-code("f25b"); -$icon-battery_24: char-from-code("f25c"); -$icon-beta_20: char-from-code("f25d"); -$icon-beta-active_20: char-from-code("f25e"); -$icon-blocked_12: char-from-code("f25f"); -$icon-blocked_14: char-from-code("f260"); -$icon-blocked_16: char-from-code("f261"); -$icon-blocked_18: char-from-code("f262"); -$icon-blocked_20: char-from-code("f263"); -$icon-blocked_24: char-from-code("f264"); -$icon-blocked_28: char-from-code("f265"); -$icon-blocked_32: char-from-code("f266"); -$icon-blocked_36: char-from-code("f267"); -$icon-blocked_40: char-from-code("f268"); -$icon-blocked_48: char-from-code("f269"); -$icon-blocked_56: char-from-code("f26a"); -$icon-blocked_8: char-from-code("f26b"); -$icon-blocked_80: char-from-code("f26c"); -$icon-blocked-selected_20: char-from-code("f26d"); -$icon-blocked-selected_24: char-from-code("f26e"); -$icon-blog_16: char-from-code("f26f"); -$icon-bloomberg_16: char-from-code("f270"); -$icon-bloomberg-circle_16: char-from-code("f271"); -$icon-bluetooth_16: char-from-code("f272"); -$icon-bluetooth_20: char-from-code("f273"); -$icon-bluetooth_24: char-from-code("f274"); -$icon-bluetooth-container_16: char-from-code("f275"); -$icon-bluetooth-container-muted_16: char-from-code("f276"); -$icon-blur_12: char-from-code("f277"); -$icon-blur_20: char-from-code("f278"); -$icon-blur_24: char-from-code("f279"); -$icon-bookmark_16: char-from-code("f27a"); -$icon-bot_12: char-from-code("f27b"); -$icon-bot_14: char-from-code("f27c"); -$icon-bot_16: char-from-code("f27d"); -$icon-bot_18: char-from-code("f27e"); -$icon-bot_20: char-from-code("f27f"); -$icon-bot_24: char-from-code("f280"); -$icon-bot_36: char-from-code("f281"); -$icon-bot_40: char-from-code("f282"); -$icon-bot_56: char-from-code("f283"); -$icon-bot-active_24: char-from-code("f284"); -$icon-bot-customer-assistant_16: char-from-code("f285"); -$icon-bot-customer-assistant_24: char-from-code("f286"); -$icon-bot-customer-assistant_36: char-from-code("f287"); -$icon-bot-expert-assistant_16: char-from-code("f288"); -$icon-bot-expert-assistant_24: char-from-code("f289"); -$icon-bot-expert-assistant_36: char-from-code("f28a"); -$icon-box_24: char-from-code("f28b"); -$icon-breakout-session_16: char-from-code("f28c"); -$icon-breakout-session_20: char-from-code("f28d"); -$icon-breakout-session_24: char-from-code("f28e"); -$icon-brightness_16: char-from-code("f28f"); -$icon-brightness_24: char-from-code("f290"); -$icon-broadcast-message_16: char-from-code("f291"); -$icon-broken-file_16: char-from-code("f292"); -$icon-broken-file_24: char-from-code("f293"); -$icon-browser_12: char-from-code("f294"); -$icon-browser_16: char-from-code("f295"); -$icon-browser_20: char-from-code("f296"); -$icon-browser_24: char-from-code("f297"); -$icon-browser_28: char-from-code("f298"); -$icon-bug_16: char-from-code("f299"); -$icon-calendar-add_12: char-from-code("f29a"); -$icon-calendar-add_14: char-from-code("f29b"); -$icon-calendar-add_16: char-from-code("f29c"); -$icon-calendar-add_20: char-from-code("f29d"); -$icon-calendar-add_24: char-from-code("f29e"); -$icon-calendar-add_32: char-from-code("f29f"); -$icon-calendar-add_36: char-from-code("f2a0"); -$icon-calendar-day_12: char-from-code("f2a1"); -$icon-calendar-empty_16: char-from-code("f2a2"); -$icon-calendar-empty_18: char-from-code("f2a3"); -$icon-calendar-empty_20: char-from-code("f2a4"); -$icon-calendar-empty_24: char-from-code("f2a5"); -$icon-calendar-empty_32: char-from-code("f2a6"); -$icon-calendar-empty-active_16: char-from-code("f2a7"); -$icon-calendar-empty-active_18: char-from-code("f2a8"); -$icon-calendar-empty-active_20: char-from-code("f2a9"); -$icon-calendar-empty-active_24: char-from-code("f2aa"); -$icon-calendar-empty-active_32: char-from-code("f2ab"); -$icon-calendar-external_12: char-from-code("f2ac"); -$icon-calendar-external_16: char-from-code("f2ad"); -$icon-calendar-external_18: char-from-code("f2ae"); -$icon-calendar-external_20: char-from-code("f2af"); -$icon-calendar-external_24: char-from-code("f2b0"); -$icon-calendar-month_10: char-from-code("f2b1"); -$icon-calendar-month_12: char-from-code("f2b2"); -$icon-calendar-month_16: char-from-code("f2b3"); -$icon-calendar-month_20: char-from-code("f2b4"); -$icon-calendar-month_24: char-from-code("f2b5"); -$icon-calendar-month_28: char-from-code("f2b6"); -$icon-calendar-month_36: char-from-code("f2b7"); -$icon-calendar-month-active_20: char-from-code("f2b8"); -$icon-calendar-month-active_24: char-from-code("f2b9"); -$icon-calendar-week_12: char-from-code("f2ba"); -$icon-calendar-week_16: char-from-code("f2bb"); -$icon-calendar-week_20: char-from-code("f2bc"); -$icon-calendar-week_24: char-from-code("f2bd"); -$icon-calendar-week-view_12: char-from-code("f2be"); -$icon-calendar-work-week_12: char-from-code("f2bf"); -$icon-call-activities_16: char-from-code("f2c0"); -$icon-call-activities_24: char-from-code("f2c1"); -$icon-call-forward_16: char-from-code("f2c2"); -$icon-call-forward_24: char-from-code("f2c3"); -$icon-call-forward_28: char-from-code("f2c4"); -$icon-call-forward-active_24: char-from-code("f2c5"); -$icon-call-forward-divert_14: char-from-code("f2c6"); -$icon-call-forward-divert_16: char-from-code("f2c7"); -$icon-call-forward-settings_12: char-from-code("f2c8"); -$icon-call-forward-settings_14: char-from-code("f2c9"); -$icon-call-forward-settings_16: char-from-code("f2ca"); -$icon-call-forward-settings_20: char-from-code("f2cb"); -$icon-call-forward-settings_24: char-from-code("f2cc"); -$icon-call-handling_14: char-from-code("f2cd"); -$icon-call-handling_16: char-from-code("f2ce"); -$icon-call-hold_14: char-from-code("f2cf"); -$icon-call-hold_16: char-from-code("f2d0"); -$icon-call-hold_20: char-from-code("f2d1"); -$icon-call-hold_24: char-from-code("f2d2"); -$icon-call-incoming_12: char-from-code("f2d3"); -$icon-call-incoming_16: char-from-code("f2d4"); -$icon-call-incoming_24: char-from-code("f2d5"); -$icon-call-incoming_8: char-from-code("f2d6"); -$icon-call-log_12: char-from-code("f2d7"); -$icon-call-log_14: char-from-code("f2d8"); -$icon-call-log_16: char-from-code("f2d9"); -$icon-call-log_20: char-from-code("f2da"); -$icon-call-log_24: char-from-code("f2db"); -$icon-call-log-active_20: char-from-code("f2dc"); -$icon-call-merge_12: char-from-code("f2dd"); -$icon-call-merge_16: char-from-code("f2de"); -$icon-call-merge_20: char-from-code("f2df"); -$icon-call-merge_24: char-from-code("f2e0"); -$icon-call-outgoing_12: char-from-code("f2e1"); -$icon-call-outgoing_16: char-from-code("f2e2"); -$icon-call-outgoing_24: char-from-code("f2e3"); -$icon-call-outgoing_8: char-from-code("f2e4"); -$icon-call-pickup_12: char-from-code("f2e5"); -$icon-call-pickup_14: char-from-code("f2e6"); -$icon-call-private_12: char-from-code("f2e7"); -$icon-call-private_14: char-from-code("f2e8"); -$icon-call-request_12: char-from-code("f2e9"); -$icon-call-request_14: char-from-code("f2ea"); -$icon-call-room_28: char-from-code("f2eb"); -$icon-call-settings_14: char-from-code("f2ec"); -$icon-call-settings_20: char-from-code("f2ed"); -$icon-call-swap_16: char-from-code("f2ee"); -$icon-call-swap_20: char-from-code("f2ef"); -$icon-call-swap_24: char-from-code("f2f0"); -$icon-call-swap_28: char-from-code("f2f1"); -$icon-call-voicemail_12: char-from-code("f2f2"); -$icon-call-voicemail_14: char-from-code("f2f3"); -$icon-call-voicemail_16: char-from-code("f2f4"); -$icon-call-voicemail_18: char-from-code("f2f5"); -$icon-call-voicemail_20: char-from-code("f2f6"); -$icon-call-voicemail_24: char-from-code("f2f7"); -$icon-camera_10: char-from-code("f2f8"); -$icon-camera_12: char-from-code("f2f9"); -$icon-camera_120: char-from-code("f2fa"); -$icon-camera_124: char-from-code("f2fb"); -$icon-camera_14: char-from-code("f2fc"); -$icon-camera_16: char-from-code("f2fd"); -$icon-camera_18: char-from-code("f2fe"); -$icon-camera_20: char-from-code("f2ff"); -$icon-camera_24: char-from-code("f300"); -$icon-camera_26: char-from-code("f301"); -$icon-camera_28: char-from-code("f302"); -$icon-camera_32: char-from-code("f303"); -$icon-camera_36: char-from-code("f304"); -$icon-camera_40: char-from-code("f305"); -$icon-camera_48: char-from-code("f306"); -$icon-camera_56: char-from-code("f307"); -$icon-camera_64: char-from-code("f308"); -$icon-camera_8: char-from-code("f309"); -$icon-camera-active_14: char-from-code("f30a"); -$icon-camera-active_24: char-from-code("f30b"); -$icon-camera-aux_16: char-from-code("f30c"); -$icon-camera-aux_24: char-from-code("f30d"); -$icon-camera-group_16: char-from-code("f30e"); -$icon-camera-group_24: char-from-code("f30f"); -$icon-camera-muted_12: char-from-code("f310"); -$icon-camera-muted_14: char-from-code("f311"); -$icon-camera-muted_16: char-from-code("f312"); -$icon-camera-muted_20: char-from-code("f313"); -$icon-camera-muted_24: char-from-code("f314"); -$icon-camera-muted_28: char-from-code("f315"); -$icon-camera-muted_32: char-from-code("f316"); -$icon-camera-muted_36: char-from-code("f317"); -$icon-camera-muted_8: char-from-code("f318"); -$icon-camera-on_16: char-from-code("f319"); -$icon-camera-on_20: char-from-code("f31a"); -$icon-camera-on_24: char-from-code("f31b"); -$icon-camera-photo_12: char-from-code("f31c"); -$icon-camera-photo_16: char-from-code("f31d"); -$icon-camera-photo_20: char-from-code("f31e"); -$icon-camera-photo_24: char-from-code("f31f"); -$icon-camera-photo_32: char-from-code("f320"); -$icon-camera-photo_48: char-from-code("f321"); -$icon-camera-photo-swap_16: char-from-code("f322"); -$icon-camera-presence_12: char-from-code("f323"); -$icon-camera-presence_14: char-from-code("f324"); -$icon-camera-presence_24: char-from-code("f325"); -$icon-camera-presence_28: char-from-code("f326"); -$icon-camera-presence_8: char-from-code("f327"); -$icon-camera-presence-stroke_10: char-from-code("f328"); -$icon-camera-presence-stroke_14: char-from-code("f329"); -$icon-camera-presence-stroke_16: char-from-code("f32a"); -$icon-camera-presence-stroke_26: char-from-code("f32b"); -$icon-camera-presence-stroke_30: char-from-code("f32c"); -$icon-camera-swap_12: char-from-code("f32d"); -$icon-camera-swap_16: char-from-code("f32e"); -$icon-camera-swap_20: char-from-code("f32f"); -$icon-camera-swap_24: char-from-code("f330"); -$icon-cancel_10: char-from-code("f331"); -$icon-cancel_12: char-from-code("f332"); -$icon-cancel_14: char-from-code("f333"); -$icon-cancel_16: char-from-code("f334"); -$icon-cancel_18: char-from-code("f335"); -$icon-cancel_20: char-from-code("f336"); -$icon-cancel_24: char-from-code("f337"); -$icon-cancel_28: char-from-code("f338"); -$icon-cancel_36: char-from-code("f339"); -$icon-cancel_6: char-from-code("f33a"); -$icon-cancel_8: char-from-code("f33b"); -$icon-cellular_16: char-from-code("f33c"); -$icon-certified_16: char-from-code("f33d"); -$icon-certified_20: char-from-code("f33e"); -$icon-certified_24: char-from-code("f33f"); -$icon-ch-p-search_14: char-from-code("f340"); -$icon-chat_10: char-from-code("f341"); -$icon-chat_12: char-from-code("f342"); -$icon-chat_14: char-from-code("f343"); -$icon-chat_16: char-from-code("f344"); -$icon-chat_18: char-from-code("f345"); -$icon-chat_20: char-from-code("f346"); -$icon-chat_24: char-from-code("f347"); -$icon-chat_26: char-from-code("f348"); -$icon-chat_28: char-from-code("f349"); -$icon-chat_32: char-from-code("f34a"); -$icon-chat_36: char-from-code("f34b"); -$icon-chat_40: char-from-code("f34c"); -$icon-chat_8: char-from-code("f34d"); -$icon-chat-active_10: char-from-code("f34e"); -$icon-chat-active_12: char-from-code("f34f"); -$icon-chat-active_14: char-from-code("f350"); -$icon-chat-active_16: char-from-code("f351"); -$icon-chat-active_18: char-from-code("f352"); -$icon-chat-active_20: char-from-code("f353"); -$icon-chat-active_24: char-from-code("f354"); -$icon-chat-active_26: char-from-code("f355"); -$icon-chat-active_28: char-from-code("f356"); -$icon-chat-active_32: char-from-code("f357"); -$icon-chat-active_36: char-from-code("f358"); -$icon-chat-active_8: char-from-code("f359"); -$icon-chat-group_12: char-from-code("f35a"); -$icon-chat-group_16: char-from-code("f35b"); -$icon-chat-group_20: char-from-code("f35c"); -$icon-chat-group_32: char-from-code("f35d"); -$icon-chat-muted_12: char-from-code("f35e"); -$icon-chat-muted_16: char-from-code("f35f"); -$icon-chat-persistent_16: char-from-code("f360"); -$icon-chat-persistent_20: char-from-code("f361"); -$icon-chat-persistent_24: char-from-code("f362"); -$icon-chat-persistent-active_20: char-from-code("f363"); -$icon-chat-persistent-active_24: char-from-code("f364"); -$icon-check_10: char-from-code("f365"); -$icon-check_12: char-from-code("f366"); -$icon-check_14: char-from-code("f367"); -$icon-check_16: char-from-code("f368"); -$icon-check_18: char-from-code("f369"); -$icon-check_20: char-from-code("f36a"); -$icon-check_24: char-from-code("f36b"); -$icon-check_28: char-from-code("f36c"); -$icon-check_32: char-from-code("f36d"); -$icon-check_36: char-from-code("f36e"); -$icon-check_40: char-from-code("f36f"); -$icon-check_64: char-from-code("f370"); -$icon-check_8: char-from-code("f371"); -$icon-check_80: char-from-code("f372"); -$icon-check-calendar_14: char-from-code("f373"); -$icon-check-circle_100: char-from-code("f374"); -$icon-check-circle_12: char-from-code("f375"); -$icon-check-circle_14: char-from-code("f376"); -$icon-check-circle_16: char-from-code("f377"); -$icon-check-circle_18: char-from-code("f378"); -$icon-check-circle_20: char-from-code("f379"); -$icon-check-circle_24: char-from-code("f37a"); -$icon-check-circle_36: char-from-code("f37b"); -$icon-check-circle_40: char-from-code("f37c"); -$icon-check-circle_44: char-from-code("f37d"); -$icon-check-circle_72: char-from-code("f37e"); -$icon-check-circle-active_16: char-from-code("f37f"); -$icon-check-circle-active_24: char-from-code("f380"); -$icon-check-refresh_16: char-from-code("f381"); -$icon-cisco-logo: char-from-code("f382"); -$icon-clear_12: char-from-code("f383"); -$icon-clear_14: char-from-code("f384"); -$icon-clear_140: char-from-code("f385"); -$icon-clear_16: char-from-code("f386"); -$icon-clear_18: char-from-code("f387"); -$icon-clear_20: char-from-code("f388"); -$icon-clear_24: char-from-code("f389"); -$icon-clear_32: char-from-code("f38a"); -$icon-clear_44: char-from-code("f38b"); -$icon-clear_80: char-from-code("f38c"); -$icon-clear-active_12: char-from-code("f38d"); -$icon-clear-active_14: char-from-code("f38e"); -$icon-clear-active_16: char-from-code("f38f"); -$icon-clear-active_18: char-from-code("f390"); -$icon-clear-active_20: char-from-code("f391"); -$icon-clear-active_24: char-from-code("f392"); -$icon-clear-active_32: char-from-code("f393"); -$icon-close-space_12: char-from-code("f394"); -$icon-close-space_18: char-from-code("f395"); -$icon-closed-caption_12: char-from-code("f396"); -$icon-closed-caption_16: char-from-code("f397"); -$icon-closed-caption_20: char-from-code("f398"); -$icon-closed-caption_24: char-from-code("f399"); -$icon-closed-caption-badge_12: char-from-code("f39a"); -$icon-closed-caption-badge_16: char-from-code("f39b"); -$icon-closed-caption-badge_20: char-from-code("f39c"); -$icon-cloud_16: char-from-code("f39d"); -$icon-cloud_20: char-from-code("f39e"); -$icon-cloud_24: char-from-code("f39f"); -$icon-cloud_32: char-from-code("f3a0"); -$icon-cloud-upload_16: char-from-code("f3a1"); -$icon-cloud-upload_20: char-from-code("f3a2"); -$icon-cloud-upload_24: char-from-code("f3a3"); -$icon-commenting_16: char-from-code("f3a4"); -$icon-commenting_20: char-from-code("f3a5"); -$icon-commenting_24: char-from-code("f3a6"); -$icon-commenting-active_20: char-from-code("f3a7"); -$icon-company_12: char-from-code("f3a8"); -$icon-company_16: char-from-code("f3a9"); -$icon-company_20: char-from-code("f3aa"); -$icon-company_24: char-from-code("f3ab"); -$icon-company_32: char-from-code("f3ac"); -$icon-computer_16: char-from-code("f3ad"); -$icon-computer_24: char-from-code("f3ae"); -$icon-condition_16: char-from-code("f3af"); -$icon-contact-card_10: char-from-code("f3b0"); -$icon-contact-card_12: char-from-code("f3b1"); -$icon-contact-card_16: char-from-code("f3b2"); -$icon-contact-card_20: char-from-code("f3b3"); -$icon-contact-card_22: char-from-code("f3b4"); -$icon-contact-card_24: char-from-code("f3b5"); -$icon-contact-card_28: char-from-code("f3b6"); -$icon-contact-card_36: char-from-code("f3b7"); -$icon-contact-card-active_20: char-from-code("f3b8"); -$icon-contact-card-active_22: char-from-code("f3b9"); -$icon-contact-card-active_24: char-from-code("f3ba"); -$icon-contact-group_16: char-from-code("f3bb"); -$icon-contact-group_20: char-from-code("f3bc"); -$icon-content-download_12: char-from-code("f3bd"); -$icon-content-download_14: char-from-code("f3be"); -$icon-content-share_10: char-from-code("f3bf"); -$icon-content-share_12: char-from-code("f3c0"); -$icon-content-share_120: char-from-code("f3c1"); -$icon-content-share_124: char-from-code("f3c2"); -$icon-content-share_14: char-from-code("f3c3"); -$icon-content-share_16: char-from-code("f3c4"); -$icon-content-share_18: char-from-code("f3c5"); -$icon-content-share_20: char-from-code("f3c6"); -$icon-content-share_24: char-from-code("f3c7"); -$icon-content-share_32: char-from-code("f3c8"); -$icon-content-share_36: char-from-code("f3c9"); -$icon-content-share_40: char-from-code("f3ca"); -$icon-content-share_48: char-from-code("f3cb"); -$icon-content-share_56: char-from-code("f3cc"); -$icon-copy_10: char-from-code("f3cd"); -$icon-copy_12: char-from-code("f3ce"); -$icon-copy_14: char-from-code("f3cf"); -$icon-copy_16: char-from-code("f3d0"); -$icon-copy_20: char-from-code("f3d1"); -$icon-copy_24: char-from-code("f3d2"); -$icon-cpu_16: char-from-code("f3d3"); -$icon-cpu_24: char-from-code("f3d4"); -$icon-cpu_32: char-from-code("f3d5"); -$icon-crop_16: char-from-code("f3d6"); -$icon-crunchbase_16: char-from-code("f3d7"); -$icon-crunchbase-circle_16: char-from-code("f3d8"); -$icon-cucm-connection_24: char-from-code("f3d9"); -$icon-dashboard_32: char-from-code("f3da"); -$icon-data-usage_16: char-from-code("f3db"); -$icon-data-usage_18: char-from-code("f3dc"); -$icon-data-usage_20: char-from-code("f3dd"); -$icon-data-usage_24: char-from-code("f3de"); -$icon-default-app_16: char-from-code("f3df"); -$icon-delete_10: char-from-code("f3e0"); -$icon-delete_12: char-from-code("f3e1"); -$icon-delete_14: char-from-code("f3e2"); -$icon-delete_16: char-from-code("f3e3"); -$icon-delete_18: char-from-code("f3e4"); -$icon-delete_20: char-from-code("f3e5"); -$icon-delete_24: char-from-code("f3e6"); -$icon-deskphone_12: char-from-code("f3e7"); -$icon-deskphone_14: char-from-code("f3e8"); -$icon-deskphone_16: char-from-code("f3e9"); -$icon-deskphone_20: char-from-code("f3ea"); -$icon-deskphone_24: char-from-code("f3eb"); -$icon-deskphone_32: char-from-code("f3ec"); -$icon-deskphone_48: char-from-code("f3ed"); -$icon-deskphone-warning_16: char-from-code("f3ee"); -$icon-device-connection_12: char-from-code("f3ef"); -$icon-device-connection_14: char-from-code("f3f0"); -$icon-device-connection_16: char-from-code("f3f1"); -$icon-device-connection_18: char-from-code("f3f2"); -$icon-device-connection_20: char-from-code("f3f3"); -$icon-device-connection_24: char-from-code("f3f4"); -$icon-device-connection_36: char-from-code("f3f5"); -$icon-device-connection_48: char-from-code("f3f6"); -$icon-device-connection-active_14: char-from-code("f3f7"); -$icon-device-connection-active_16: char-from-code("f3f8"); -$icon-device-connection-active_20: char-from-code("f3f9"); -$icon-device-connection-active_24: char-from-code("f3fa"); -$icon-device-connection-active_36: char-from-code("f3fb"); -$icon-device-connection-active_40: char-from-code("f3fc"); -$icon-device-in-room_100: char-from-code("f3fd"); -$icon-device-in-room_12: char-from-code("f3fe"); -$icon-device-in-room_14: char-from-code("f3ff"); -$icon-device-in-room_16: char-from-code("f400"); -$icon-device-in-room_18: char-from-code("f401"); -$icon-device-in-room_20: char-from-code("f402"); -$icon-device-in-room_24: char-from-code("f403"); -$icon-device-in-room_32: char-from-code("f404"); -$icon-device-in-room_48: char-from-code("f405"); -$icon-device-in-room_56: char-from-code("f406"); -$icon-device-in-room_8: char-from-code("f407"); -$icon-device-in-room-active_24: char-from-code("f408"); -$icon-device-in-room-end_16: char-from-code("f409"); -$icon-diagnostics_16: char-from-code("f40a"); -$icon-diagnostics_24: char-from-code("f40b"); -$icon-diagnostics_32: char-from-code("f40c"); -$icon-diagnostics-circle_100: char-from-code("f40d"); -$icon-dialpad_12: char-from-code("f40e"); -$icon-dialpad_14: char-from-code("f40f"); -$icon-dialpad_16: char-from-code("f410"); -$icon-dialpad_20: char-from-code("f411"); -$icon-dialpad_24: char-from-code("f412"); -$icon-dialpad_28: char-from-code("f413"); -$icon-directory_16: char-from-code("f414"); -$icon-directory_20: char-from-code("f415"); -$icon-directory_24: char-from-code("f416"); -$icon-disconnect-contact_16: char-from-code("f417"); -$icon-dislike_12: char-from-code("f418"); -$icon-dislike_16: char-from-code("f419"); -$icon-dislike_24: char-from-code("f41a"); -$icon-display_14: char-from-code("f41b"); -$icon-display_16: char-from-code("f41c"); -$icon-display_24: char-from-code("f41d"); -$icon-display_36: char-from-code("f41e"); -$icon-display_72: char-from-code("f41f"); -$icon-display-input_16: char-from-code("f420"); -$icon-display-input_24: char-from-code("f421"); -$icon-display-warning_16: char-from-code("f422"); -$icon-dnd_12: char-from-code("f423"); -$icon-dnd_120: char-from-code("f424"); -$icon-dnd_124: char-from-code("f425"); -$icon-dnd_14: char-from-code("f426"); -$icon-dnd_16: char-from-code("f427"); -$icon-dnd_18: char-from-code("f428"); -$icon-dnd_20: char-from-code("f429"); -$icon-dnd_24: char-from-code("f42a"); -$icon-dnd_26: char-from-code("f42b"); -$icon-dnd_28: char-from-code("f42c"); -$icon-dnd_32: char-from-code("f42d"); -$icon-dnd_36: char-from-code("f42e"); -$icon-dnd_40: char-from-code("f42f"); -$icon-dnd_48: char-from-code("f430"); -$icon-dnd_56: char-from-code("f431"); -$icon-dnd_8: char-from-code("f432"); -$icon-dnd-active_14: char-from-code("f433"); -$icon-dnd-active_24: char-from-code("f434"); -$icon-dnd-presence_12: char-from-code("f435"); -$icon-dnd-presence_14: char-from-code("f436"); -$icon-dnd-presence_24: char-from-code("f437"); -$icon-dnd-presence_28: char-from-code("f438"); -$icon-dnd-presence_8: char-from-code("f439"); -$icon-dnd-presence-stroke_10: char-from-code("f43a"); -$icon-dnd-presence-stroke_14: char-from-code("f43b"); -$icon-dnd-presence-stroke_16: char-from-code("f43c"); -$icon-dnd-presence-stroke_26: char-from-code("f43d"); -$icon-dnd-presence-stroke_30: char-from-code("f43e"); -$icon-dock-in_12: char-from-code("f43f"); -$icon-dock-in_16: char-from-code("f440"); -$icon-dock-out_12: char-from-code("f441"); -$icon-dock-out_16: char-from-code("f442"); -$icon-document_12: char-from-code("f443"); -$icon-document_14: char-from-code("f444"); -$icon-document_16: char-from-code("f445"); -$icon-document_18: char-from-code("f446"); -$icon-document_20: char-from-code("f447"); -$icon-document_24: char-from-code("f448"); -$icon-document_28: char-from-code("f449"); -$icon-document_32: char-from-code("f44a"); -$icon-document_36: char-from-code("f44b"); -$icon-document_40: char-from-code("f44c"); -$icon-document_44: char-from-code("f44d"); -$icon-document_72: char-from-code("f44e"); -$icon-document-create_16: char-from-code("f44f"); -$icon-document-move_16: char-from-code("f450"); -$icon-document-share_16: char-from-code("f451"); -$icon-document-share_24: char-from-code("f452"); -$icon-document-share_36: char-from-code("f453"); -$icon-document-share_48: char-from-code("f454"); -$icon-donut-chart_16: char-from-code("f455"); -$icon-download_10: char-from-code("f456"); -$icon-download_12: char-from-code("f457"); -$icon-download_130: char-from-code("f458"); -$icon-download_14: char-from-code("f459"); -$icon-download_16: char-from-code("f45a"); -$icon-download_18: char-from-code("f45b"); -$icon-download_20: char-from-code("f45c"); -$icon-download_24: char-from-code("f45d"); -$icon-download_28: char-from-code("f45e"); -$icon-download_32: char-from-code("f45f"); -$icon-download-active_20: char-from-code("f460"); -$icon-download-circle_100: char-from-code("f461"); -$icon-drag_14: char-from-code("f462"); -$icon-drag_16: char-from-code("f463"); -$icon-drive-mode_20: char-from-code("f464"); -$icon-dx70_16: char-from-code("f465"); -$icon-dx70_20: char-from-code("f466"); -$icon-dx80_16: char-from-code("f467"); -$icon-dx80_20: char-from-code("f468"); -$icon-edit_10: char-from-code("f469"); -$icon-edit_12: char-from-code("f46a"); -$icon-edit_14: char-from-code("f46b"); -$icon-edit_16: char-from-code("f46c"); -$icon-edit_18: char-from-code("f46d"); -$icon-edit_20: char-from-code("f46e"); -$icon-edit_24: char-from-code("f46f"); -$icon-edit_56: char-from-code("f470"); -$icon-email_12: char-from-code("f471"); -$icon-email_14: char-from-code("f472"); -$icon-email_16: char-from-code("f473"); -$icon-email_20: char-from-code("f474"); -$icon-email_24: char-from-code("f475"); -$icon-email_56: char-from-code("f476"); -$icon-email-active_12: char-from-code("f477"); -$icon-email-active_16: char-from-code("f478"); -$icon-email-active_24: char-from-code("f479"); -$icon-email-circle_24: char-from-code("f47a"); -$icon-email-circle_32: char-from-code("f47b"); -$icon-email-circle_40: char-from-code("f47c"); -$icon-email-invite_100: char-from-code("f47d"); -$icon-email-invite_16: char-from-code("f47e"); -$icon-email-invite_24: char-from-code("f47f"); -$icon-email-invite_32: char-from-code("f480"); -$icon-email-read_16: char-from-code("f481"); -$icon-email-read_20: char-from-code("f482"); -$icon-email-read_24: char-from-code("f483"); -$icon-emoji-food_16: char-from-code("f484"); -$icon-emoji-heart_16: char-from-code("f485"); -$icon-emoji-nature_16: char-from-code("f486"); -$icon-emoji-people_16: char-from-code("f487"); -$icon-emoticon-passive_24: char-from-code("f488"); -$icon-emoticon-sad_24: char-from-code("f489"); -$icon-emoticons_12: char-from-code("f48a"); -$icon-emoticons_16: char-from-code("f48b"); -$icon-emoticons_18: char-from-code("f48c"); -$icon-emoticons_20: char-from-code("f48d"); -$icon-emoticons_24: char-from-code("f48e"); -$icon-encryption_16: char-from-code("f48f"); -$icon-encryption_20: char-from-code("f490"); -$icon-end-remote-desktop-control_10: char-from-code("f491"); -$icon-end-to-end-encryption_14: char-from-code("f492"); -$icon-end-to-end-encryption_16: char-from-code("f493"); -$icon-endpoint_10: char-from-code("f494"); -$icon-endpoint_12: char-from-code("f495"); -$icon-endpoint_14: char-from-code("f496"); -$icon-endpoint_16: char-from-code("f497"); -$icon-endpoint_20: char-from-code("f498"); -$icon-endpoint_24: char-from-code("f499"); -$icon-endpoint_28: char-from-code("f49a"); -$icon-endpoint_32: char-from-code("f49b"); -$icon-endpoint_48: char-from-code("f49c"); -$icon-endpoint_56: char-from-code("f49d"); -$icon-endpoint_64: char-from-code("f49e"); -$icon-endpoint_8: char-from-code("f49f"); -$icon-endpoint-blocked_12: char-from-code("f4a0"); -$icon-endpoint-g2_16: char-from-code("f4a1"); -$icon-endpoint-g2_20: char-from-code("f4a2"); -$icon-endpoint-g2-70_16: char-from-code("f4a3"); -$icon-endpoint-g2-70_20: char-from-code("f4a4"); -$icon-endpoint-g2-70-dual_16: char-from-code("f4a5"); -$icon-endpoint-g2-70-dual_20: char-from-code("f4a6"); -$icon-endpoint-g2-stand_16: char-from-code("f4a7"); -$icon-endpoint-g2-stand_20: char-from-code("f4a8"); -$icon-endpoint-mx800_16: char-from-code("f4a9"); -$icon-endpoint-mx800_20: char-from-code("f4aa"); -$icon-endpoint-mx800-dual_16: char-from-code("f4ab"); -$icon-endpoint-mx800-dual_20: char-from-code("f4ac"); -$icon-endpoint-stand_16: char-from-code("f4ad"); -$icon-endpoint-stand_20: char-from-code("f4ae"); -$icon-endpoint-warning_12: char-from-code("f4af"); -$icon-enter_16: char-from-code("f4b0"); -$icon-enter-room_10: char-from-code("f4b1"); -$icon-enter-room_12: char-from-code("f4b2"); -$icon-enter-room_16: char-from-code("f4b3"); -$icon-enter-room_20: char-from-code("f4b4"); -$icon-enter-room_24: char-from-code("f4b5"); -$icon-enter-room_28: char-from-code("f4b6"); -$icon-enter-room_8: char-from-code("f4b7"); -$icon-eraser_12: char-from-code("f4b8"); -$icon-eraser_14: char-from-code("f4b9"); -$icon-eraser_16: char-from-code("f4ba"); -$icon-eraser_18: char-from-code("f4bb"); -$icon-eraser_24: char-from-code("f4bc"); -$icon-error_12: char-from-code("f4bd"); -$icon-error_16: char-from-code("f4be"); -$icon-error_20: char-from-code("f4bf"); -$icon-error_24: char-from-code("f4c0"); -$icon-error_40: char-from-code("f4c1"); -$icon-error_8: char-from-code("f4c2"); -$icon-error_80: char-from-code("f4c3"); -$icon-error-legacy_12: char-from-code("f4c4"); -$icon-error-legacy_16: char-from-code("f4c5"); -$icon-error-legacy_20: char-from-code("f4c6"); -$icon-error-legacy_24: char-from-code("f4c7"); -$icon-error-legacy_28: char-from-code("f4c8"); -$icon-error-legacy_36: char-from-code("f4c9"); -$icon-error-legacy_8: char-from-code("f4ca"); -$icon-error-legacy_80: char-from-code("f4cb"); -$icon-ethernet_16: char-from-code("f4cc"); -$icon-ethernet_24: char-from-code("f4cd"); -$icon-event_16: char-from-code("f4ce"); -$icon-exchange_16: char-from-code("f4cf"); -$icon-exit-room_12: char-from-code("f4d0"); -$icon-exit-room_16: char-from-code("f4d1"); -$icon-exit-room_20: char-from-code("f4d2"); -$icon-exit-room_24: char-from-code("f4d3"); -$icon-exit-room_28: char-from-code("f4d4"); -$icon-explore_16: char-from-code("f4d5"); -$icon-export_16: char-from-code("f4d6"); -$icon-export_24: char-from-code("f4d7"); -$icon-extension-mobility_16: char-from-code("f4d8"); -$icon-extension-mobility_24: char-from-code("f4d9"); -$icon-external-message_10: char-from-code("f4da"); -$icon-external-message_16: char-from-code("f4db"); -$icon-external-message_24: char-from-code("f4dc"); -$icon-external-message_32: char-from-code("f4dd"); -$icon-external-message_36: char-from-code("f4de"); -$icon-external-user_10: char-from-code("f4df"); -$icon-external-user_12: char-from-code("f4e0"); -$icon-external-user_16: char-from-code("f4e1"); -$icon-external-user_20: char-from-code("f4e2"); -$icon-facebook_16: char-from-code("f4e3"); -$icon-facebook-blue_12: char-from-code("f4e4"); -$icon-facebook-circle_24: char-from-code("f4e5"); -$icon-facebook-circle_32: char-from-code("f4e6"); -$icon-facebook-circle_40: char-from-code("f4e7"); -$icon-facebook-logo_12: char-from-code("f4e8"); -$icon-favorite_10: char-from-code("f4e9"); -$icon-favorite_12: char-from-code("f4ea"); -$icon-favorite_14: char-from-code("f4eb"); -$icon-favorite_16: char-from-code("f4ec"); -$icon-favorite_20: char-from-code("f4ed"); -$icon-favorite_24: char-from-code("f4ee"); -$icon-favorite_28: char-from-code("f4ef"); -$icon-favorite_8: char-from-code("f4f0"); -$icon-favorite-active_12: char-from-code("f4f1"); -$icon-favorite-active_14: char-from-code("f4f2"); -$icon-favorite-active_16: char-from-code("f4f3"); -$icon-favorite-active_20: char-from-code("f4f4"); -$icon-favorite-active_24: char-from-code("f4f5"); -$icon-favorite-active_28: char-from-code("f4f6"); -$icon-favorite-active_8: char-from-code("f4f7"); -$icon-favorite-filled_12: char-from-code("f4f8"); -$icon-favorite-filled_14: char-from-code("f4f9"); -$icon-favorite-filled_16: char-from-code("f4fa"); -$icon-favorite-filled_20: char-from-code("f4fb"); -$icon-favorite-filled_24: char-from-code("f4fc"); -$icon-favorite-filled_28: char-from-code("f4fd"); -$icon-favorite-filled_8: char-from-code("f4fe"); -$icon-fbw_16: char-from-code("f4ff"); -$icon-fbw_24: char-from-code("f500"); -$icon-feedback_12: char-from-code("f501"); -$icon-feedback_14: char-from-code("f502"); -$icon-feedback_16: char-from-code("f503"); -$icon-feedback_20: char-from-code("f504"); -$icon-feedback_72: char-from-code("f505"); -$icon-feedback_8: char-from-code("f506"); -$icon-feedback-active_12: char-from-code("f507"); -$icon-feedback-active_14: char-from-code("f508"); -$icon-feedback-active_16: char-from-code("f509"); -$icon-feedback-active_20: char-from-code("f50a"); -$icon-feedback-active_8: char-from-code("f50b"); -$icon-ffw_16: char-from-code("f50c"); -$icon-ffw_24: char-from-code("f50d"); -$icon-file-analysis_28: char-from-code("f50e"); -$icon-file-arf_40: char-from-code("f50f"); -$icon-file-audio_12: char-from-code("f510"); -$icon-file-audio_16: char-from-code("f511"); -$icon-file-audio_24: char-from-code("f512"); -$icon-file-audio_28: char-from-code("f513"); -$icon-file-audio_32: char-from-code("f514"); -$icon-file-audio_36: char-from-code("f515"); -$icon-file-audio_40: char-from-code("f516"); -$icon-file-audio_44: char-from-code("f517"); -$icon-file-audio_72: char-from-code("f518"); -$icon-file-dashboard_28: char-from-code("f519"); -$icon-file-excel_12: char-from-code("f51a"); -$icon-file-excel_16: char-from-code("f51b"); -$icon-file-excel_20: char-from-code("f51c"); -$icon-file-excel_24: char-from-code("f51d"); -$icon-file-excel_28: char-from-code("f51e"); -$icon-file-excel_32: char-from-code("f51f"); -$icon-file-excel_36: char-from-code("f520"); -$icon-file-excel_40: char-from-code("f521"); -$icon-file-excel_44: char-from-code("f522"); -$icon-file-excel_72: char-from-code("f523"); -$icon-file-excel-active_12: char-from-code("f524"); -$icon-file-excel-active_16: char-from-code("f525"); -$icon-file-excel-active_20: char-from-code("f526"); -$icon-file-excel-active_24: char-from-code("f527"); -$icon-file-excel-active_28: char-from-code("f528"); -$icon-file-excel-active_32: char-from-code("f529"); -$icon-file-excel-active_36: char-from-code("f52a"); -$icon-file-excel-active_40: char-from-code("f52b"); -$icon-file-excel-active_44: char-from-code("f52c"); -$icon-file-excel-active_72: char-from-code("f52d"); -$icon-file-graph_12: char-from-code("f52e"); -$icon-file-graph_16: char-from-code("f52f"); -$icon-file-graph_20: char-from-code("f530"); -$icon-file-graph_24: char-from-code("f531"); -$icon-file-graph_28: char-from-code("f532"); -$icon-file-graph_32: char-from-code("f533"); -$icon-file-graph_36: char-from-code("f534"); -$icon-file-graph_40: char-from-code("f535"); -$icon-file-graph_44: char-from-code("f536"); -$icon-file-graph_72: char-from-code("f537"); -$icon-file-graph-active_12: char-from-code("f538"); -$icon-file-graph-active_16: char-from-code("f539"); -$icon-file-graph-active_20: char-from-code("f53a"); -$icon-file-graph-active_24: char-from-code("f53b"); -$icon-file-graph-active_28: char-from-code("f53c"); -$icon-file-graph-active_32: char-from-code("f53d"); -$icon-file-graph-active_36: char-from-code("f53e"); -$icon-file-graph-active_40: char-from-code("f53f"); -$icon-file-graph-active_44: char-from-code("f540"); -$icon-file-graph-active_72: char-from-code("f541"); -$icon-file-image_12: char-from-code("f542"); -$icon-file-image_16: char-from-code("f543"); -$icon-file-image_24: char-from-code("f544"); -$icon-file-image_28: char-from-code("f545"); -$icon-file-image_32: char-from-code("f546"); -$icon-file-image_36: char-from-code("f547"); -$icon-file-image_40: char-from-code("f548"); -$icon-file-image_44: char-from-code("f549"); -$icon-file-image_72: char-from-code("f54a"); -$icon-file-locked_12: char-from-code("f54b"); -$icon-file-locked_24: char-from-code("f54c"); -$icon-file-locked_32: char-from-code("f54d"); -$icon-file-locked_36: char-from-code("f54e"); -$icon-file-locked_40: char-from-code("f54f"); -$icon-file-locked_72: char-from-code("f550"); -$icon-file-missing_16: char-from-code("f551"); -$icon-file-missing_24: char-from-code("f552"); -$icon-file-missing_36: char-from-code("f553"); -$icon-file-onenote_12: char-from-code("f554"); -$icon-file-onenote_16: char-from-code("f555"); -$icon-file-onenote_20: char-from-code("f556"); -$icon-file-onenote_24: char-from-code("f557"); -$icon-file-onenote_28: char-from-code("f558"); -$icon-file-onenote_32: char-from-code("f559"); -$icon-file-onenote_36: char-from-code("f55a"); -$icon-file-onenote_40: char-from-code("f55b"); -$icon-file-onenote_44: char-from-code("f55c"); -$icon-file-onenote_72: char-from-code("f55d"); -$icon-file-onenote-active_12: char-from-code("f55e"); -$icon-file-onenote-active_16: char-from-code("f55f"); -$icon-file-onenote-active_20: char-from-code("f560"); -$icon-file-onenote-active_24: char-from-code("f561"); -$icon-file-onenote-active_28: char-from-code("f562"); -$icon-file-onenote-active_32: char-from-code("f563"); -$icon-file-onenote-active_36: char-from-code("f564"); -$icon-file-onenote-active_40: char-from-code("f565"); -$icon-file-onenote-active_44: char-from-code("f566"); -$icon-file-onenote-active_72: char-from-code("f567"); -$icon-file-pdf_12: char-from-code("f568"); -$icon-file-pdf_16: char-from-code("f569"); -$icon-file-pdf_20: char-from-code("f56a"); -$icon-file-pdf_24: char-from-code("f56b"); -$icon-file-pdf_28: char-from-code("f56c"); -$icon-file-pdf_32: char-from-code("f56d"); -$icon-file-pdf_36: char-from-code("f56e"); -$icon-file-pdf_40: char-from-code("f56f"); -$icon-file-pdf_44: char-from-code("f570"); -$icon-file-pdf_72: char-from-code("f571"); -$icon-file-pdf-active_12: char-from-code("f572"); -$icon-file-pdf-active_16: char-from-code("f573"); -$icon-file-pdf-active_20: char-from-code("f574"); -$icon-file-pdf-active_24: char-from-code("f575"); -$icon-file-pdf-active_28: char-from-code("f576"); -$icon-file-pdf-active_32: char-from-code("f577"); -$icon-file-pdf-active_36: char-from-code("f578"); -$icon-file-pdf-active_40: char-from-code("f579"); -$icon-file-pdf-active_44: char-from-code("f57a"); -$icon-file-pdf-active_72: char-from-code("f57b"); -$icon-file-powerpoint_12: char-from-code("f57c"); -$icon-file-powerpoint_16: char-from-code("f57d"); -$icon-file-powerpoint_20: char-from-code("f57e"); -$icon-file-powerpoint_24: char-from-code("f57f"); -$icon-file-powerpoint_28: char-from-code("f580"); -$icon-file-powerpoint_32: char-from-code("f581"); -$icon-file-powerpoint_36: char-from-code("f582"); -$icon-file-powerpoint_40: char-from-code("f583"); -$icon-file-powerpoint_44: char-from-code("f584"); -$icon-file-powerpoint_72: char-from-code("f585"); -$icon-file-powerpoint-active_12: char-from-code("f586"); -$icon-file-powerpoint-active_16: char-from-code("f587"); -$icon-file-powerpoint-active_20: char-from-code("f588"); -$icon-file-powerpoint-active_24: char-from-code("f589"); -$icon-file-powerpoint-active_28: char-from-code("f58a"); -$icon-file-powerpoint-active_32: char-from-code("f58b"); -$icon-file-powerpoint-active_36: char-from-code("f58c"); -$icon-file-powerpoint-active_40: char-from-code("f58d"); -$icon-file-powerpoint-active_44: char-from-code("f58e"); -$icon-file-powerpoint-active_72: char-from-code("f58f"); -$icon-file-sketch_24: char-from-code("f590"); -$icon-file-spreadsheet_12: char-from-code("f591"); -$icon-file-spreadsheet_16: char-from-code("f592"); -$icon-file-spreadsheet_20: char-from-code("f593"); -$icon-file-spreadsheet_24: char-from-code("f594"); -$icon-file-spreadsheet_28: char-from-code("f595"); -$icon-file-spreadsheet_32: char-from-code("f596"); -$icon-file-spreadsheet_36: char-from-code("f597"); -$icon-file-spreadsheet_40: char-from-code("f598"); -$icon-file-spreadsheet_44: char-from-code("f599"); -$icon-file-spreadsheet_72: char-from-code("f59a"); -$icon-file-spreadsheet-active_12: char-from-code("f59b"); -$icon-file-spreadsheet-active_16: char-from-code("f59c"); -$icon-file-spreadsheet-active_20: char-from-code("f59d"); -$icon-file-spreadsheet-active_24: char-from-code("f59e"); -$icon-file-spreadsheet-active_28: char-from-code("f59f"); -$icon-file-spreadsheet-active_32: char-from-code("f5a0"); -$icon-file-spreadsheet-active_36: char-from-code("f5a1"); -$icon-file-spreadsheet-active_40: char-from-code("f5a2"); -$icon-file-spreadsheet-active_44: char-from-code("f5a3"); -$icon-file-spreadsheet-active_72: char-from-code("f5a4"); -$icon-file-text_12: char-from-code("f5a5"); -$icon-file-text_16: char-from-code("f5a6"); -$icon-file-text_20: char-from-code("f5a7"); -$icon-file-text_24: char-from-code("f5a8"); -$icon-file-text_28: char-from-code("f5a9"); -$icon-file-text_32: char-from-code("f5aa"); -$icon-file-text_36: char-from-code("f5ab"); -$icon-file-text_40: char-from-code("f5ac"); -$icon-file-text_44: char-from-code("f5ad"); -$icon-file-text_72: char-from-code("f5ae"); -$icon-file-text-active_12: char-from-code("f5af"); -$icon-file-text-active_16: char-from-code("f5b0"); -$icon-file-text-active_20: char-from-code("f5b1"); -$icon-file-text-active_24: char-from-code("f5b2"); -$icon-file-text-active_28: char-from-code("f5b3"); -$icon-file-text-active_32: char-from-code("f5b4"); -$icon-file-text-active_36: char-from-code("f5b5"); -$icon-file-text-active_40: char-from-code("f5b6"); -$icon-file-text-active_44: char-from-code("f5b7"); -$icon-file-text-active_72: char-from-code("f5b8"); -$icon-file-video_12: char-from-code("f5b9"); -$icon-file-video_16: char-from-code("f5ba"); -$icon-file-video_24: char-from-code("f5bb"); -$icon-file-video_28: char-from-code("f5bc"); -$icon-file-video_32: char-from-code("f5bd"); -$icon-file-video_36: char-from-code("f5be"); -$icon-file-video_40: char-from-code("f5bf"); -$icon-file-video_44: char-from-code("f5c0"); -$icon-file-video_72: char-from-code("f5c1"); -$icon-file-word_12: char-from-code("f5c2"); -$icon-file-word_16: char-from-code("f5c3"); -$icon-file-word_20: char-from-code("f5c4"); -$icon-file-word_24: char-from-code("f5c5"); -$icon-file-word_28: char-from-code("f5c6"); -$icon-file-word_32: char-from-code("f5c7"); -$icon-file-word_36: char-from-code("f5c8"); -$icon-file-word_40: char-from-code("f5c9"); -$icon-file-word_44: char-from-code("f5ca"); -$icon-file-word_72: char-from-code("f5cb"); -$icon-file-word-active_12: char-from-code("f5cc"); -$icon-file-word-active_16: char-from-code("f5cd"); -$icon-file-word-active_20: char-from-code("f5ce"); -$icon-file-word-active_24: char-from-code("f5cf"); -$icon-file-word-active_28: char-from-code("f5d0"); -$icon-file-word-active_32: char-from-code("f5d1"); -$icon-file-word-active_36: char-from-code("f5d2"); -$icon-file-word-active_40: char-from-code("f5d3"); -$icon-file-word-active_44: char-from-code("f5d4"); -$icon-file-word-active_72: char-from-code("f5d5"); -$icon-file-zip_12: char-from-code("f5d6"); -$icon-file-zip_16: char-from-code("f5d7"); -$icon-file-zip_24: char-from-code("f5d8"); -$icon-file-zip_28: char-from-code("f5d9"); -$icon-file-zip_32: char-from-code("f5da"); -$icon-file-zip_36: char-from-code("f5db"); -$icon-file-zip_40: char-from-code("f5dc"); -$icon-file-zip_44: char-from-code("f5dd"); -$icon-file-zip_72: char-from-code("f5de"); -$icon-files_10: char-from-code("f5df"); -$icon-files_12: char-from-code("f5e0"); -$icon-files_14: char-from-code("f5e1"); -$icon-files_16: char-from-code("f5e2"); -$icon-files_20: char-from-code("f5e3"); -$icon-files_24: char-from-code("f5e4"); -$icon-files_26: char-from-code("f5e5"); -$icon-files_28: char-from-code("f5e6"); -$icon-files_32: char-from-code("f5e7"); -$icon-files_36: char-from-code("f5e8"); -$icon-files_72: char-from-code("f5e9"); -$icon-files_8: char-from-code("f5ea"); -$icon-filter_10: char-from-code("f5eb"); -$icon-filter_16: char-from-code("f5ec"); -$icon-filter_24: char-from-code("f5ed"); -$icon-filter_32: char-from-code("f5ee"); -$icon-filter_8: char-from-code("f5ef"); -$icon-filter-adr_12: char-from-code("f5f0"); -$icon-filter-adr_14: char-from-code("f5f1"); -$icon-filter-adr_16: char-from-code("f5f2"); -$icon-filter-circle_12: char-from-code("f5f3"); -$icon-filter-circle_16: char-from-code("f5f4"); -$icon-filter-circle_20: char-from-code("f5f5"); -$icon-filter-circle-active_20: char-from-code("f5f6"); -$icon-fit-to-width_12: char-from-code("f5f7"); -$icon-fit-to-width_16: char-from-code("f5f8"); -$icon-fit-to-window_12: char-from-code("f5f9"); -$icon-fit-to-window_16: char-from-code("f5fa"); -$icon-fit-to-window-exit_12: char-from-code("f5fb"); -$icon-fit-to-window-exit_16: char-from-code("f5fc"); -$icon-flag_10: char-from-code("f5fd"); -$icon-flag_12: char-from-code("f5fe"); -$icon-flag_14: char-from-code("f5ff"); -$icon-flag_16: char-from-code("f600"); -$icon-flag_20: char-from-code("f601"); -$icon-flag_24: char-from-code("f602"); -$icon-flag_64: char-from-code("f603"); -$icon-flag_8: char-from-code("f604"); -$icon-flag-active_10: char-from-code("f605"); -$icon-flag-active_12: char-from-code("f606"); -$icon-flag-active_14: char-from-code("f607"); -$icon-flag-active_16: char-from-code("f608"); -$icon-flag-active_20: char-from-code("f609"); -$icon-flag-active_24: char-from-code("f60a"); -$icon-flag-active_8: char-from-code("f60b"); -$icon-flag-circle_16: char-from-code("f60c"); -$icon-flow_16: char-from-code("f60d"); -$icon-flow_32: char-from-code("f60e"); -$icon-focus-3-day_24: char-from-code("f60f"); -$icon-focus-day_24: char-from-code("f610"); -$icon-focus-month_24: char-from-code("f611"); -$icon-focus-upcoming_24: char-from-code("f612"); -$icon-focus-week_24: char-from-code("f613"); -$icon-folder-edit_24: char-from-code("f614"); -$icon-folder-lock_24: char-from-code("f615"); -$icon-folder-view_24: char-from-code("f616"); -$icon-font-family_12: char-from-code("f617"); -$icon-font-family_16: char-from-code("f618"); -$icon-forward-message_10: char-from-code("f619"); -$icon-forward-message_12: char-from-code("f61a"); -$icon-forward-message_16: char-from-code("f61b"); -$icon-forward-message_20: char-from-code("f61c"); -$icon-four-way-navigation_20: char-from-code("f61d"); -$icon-four-way-navigation_24: char-from-code("f61e"); -$icon-fullscreen_12: char-from-code("f61f"); -$icon-fullscreen_16: char-from-code("f620"); -$icon-fullscreen-c-native-macOS_14: char-from-code("f621"); -$icon-fullscreen-exit_12: char-from-code("f622"); -$icon-fullscreen-exit_16: char-from-code("f623"); -$icon-generic-device_12: char-from-code("f624"); -$icon-generic-device_14: char-from-code("f625"); -$icon-generic-device_16: char-from-code("f626"); -$icon-generic-device_20: char-from-code("f627"); -$icon-generic-device_24: char-from-code("f628"); -$icon-generic-device_28: char-from-code("f629"); -$icon-generic-device_32: char-from-code("f62a"); -$icon-generic-device_48: char-from-code("f62b"); -$icon-generic-device-video_12: char-from-code("f62c"); -$icon-generic-device-video_14: char-from-code("f62d"); -$icon-generic-device-video_16: char-from-code("f62e"); -$icon-generic-device-video_20: char-from-code("f62f"); -$icon-generic-voice-command_24: char-from-code("f630"); -$icon-gif_12: char-from-code("f631"); -$icon-gif_16: char-from-code("f632"); -$icon-gif_20: char-from-code("f633"); -$icon-gif_24: char-from-code("f634"); -$icon-github-circle_24: char-from-code("f635"); -$icon-github-circle_32: char-from-code("f636"); -$icon-github-circle_40: char-from-code("f637"); -$icon-google_16: char-from-code("f638"); -$icon-guest-issuer_36: char-from-code("f639"); -$icon-guest-issuer_56: char-from-code("f63a"); -$icon-handset_10: char-from-code("f63b"); -$icon-handset_12: char-from-code("f63c"); -$icon-handset_120: char-from-code("f63d"); -$icon-handset_124: char-from-code("f63e"); -$icon-handset_14: char-from-code("f63f"); -$icon-handset_16: char-from-code("f640"); -$icon-handset_18: char-from-code("f641"); -$icon-handset_20: char-from-code("f642"); -$icon-handset_24: char-from-code("f643"); -$icon-handset_26: char-from-code("f644"); -$icon-handset_28: char-from-code("f645"); -$icon-handset_32: char-from-code("f646"); -$icon-handset_36: char-from-code("f647"); -$icon-handset_40: char-from-code("f648"); -$icon-handset_48: char-from-code("f649"); -$icon-handset_56: char-from-code("f64a"); -$icon-handset_64: char-from-code("f64b"); -$icon-handset_8: char-from-code("f64c"); -$icon-handset-active_10: char-from-code("f64d"); -$icon-handset-active_12: char-from-code("f64e"); -$icon-handset-active_14: char-from-code("f64f"); -$icon-handset-active_16: char-from-code("f650"); -$icon-handset-active_18: char-from-code("f651"); -$icon-handset-active_20: char-from-code("f652"); -$icon-handset-active_24: char-from-code("f653"); -$icon-handset-active_26: char-from-code("f654"); -$icon-handset-active_28: char-from-code("f655"); -$icon-handset-active_32: char-from-code("f656"); -$icon-handset-active_36: char-from-code("f657"); -$icon-handset-active_40: char-from-code("f658"); -$icon-handset-active_48: char-from-code("f659"); -$icon-handset-active_56: char-from-code("f65a"); -$icon-handset-active_64: char-from-code("f65b"); -$icon-handset-active_8: char-from-code("f65c"); -$icon-handset-alert_20: char-from-code("f65d"); -$icon-handset-alert_24: char-from-code("f65e"); -$icon-handset-muted_12: char-from-code("f65f"); -$icon-handset-muted_14: char-from-code("f660"); -$icon-handset-muted_16: char-from-code("f661"); -$icon-handset-muted_20: char-from-code("f662"); -$icon-handset-muted_24: char-from-code("f663"); -$icon-handset-muted_64: char-from-code("f664"); -$icon-handset-presence_12: char-from-code("f665"); -$icon-handset-presence_14: char-from-code("f666"); -$icon-handset-presence_24: char-from-code("f667"); -$icon-handset-presence_28: char-from-code("f668"); -$icon-handset-presence_8: char-from-code("f669"); -$icon-handset-presence-active_14: char-from-code("f66a"); -$icon-handset-presence-active_24: char-from-code("f66b"); -$icon-handset-presence-stroke_10: char-from-code("f66c"); -$icon-handset-presence-stroke_14: char-from-code("f66d"); -$icon-handset-presence-stroke_16: char-from-code("f66e"); -$icon-handset-presence-stroke_26: char-from-code("f66f"); -$icon-handset-presence-stroke_30: char-from-code("f670"); -$icon-handshake_14: char-from-code("f671"); -$icon-hd-badge_28: char-from-code("f672"); -$icon-headset_12: char-from-code("f673"); -$icon-headset_14: char-from-code("f674"); -$icon-headset_16: char-from-code("f675"); -$icon-headset_18: char-from-code("f676"); -$icon-headset_20: char-from-code("f677"); -$icon-headset_24: char-from-code("f678"); -$icon-headset_32: char-from-code("f679"); -$icon-headset_36: char-from-code("f67a"); -$icon-headset_48: char-from-code("f67b"); -$icon-headset_8: char-from-code("f67c"); -$icon-headset-alert_12: char-from-code("f67d"); -$icon-headset-muted_12: char-from-code("f67e"); -$icon-headset-muted_16: char-from-code("f67f"); -$icon-headset-muted_24: char-from-code("f680"); -$icon-headset-muted_32: char-from-code("f681"); -$icon-headset-muted_48: char-from-code("f682"); -$icon-headset-muted-alert_12: char-from-code("f683"); -$icon-headset-muted-private_12: char-from-code("f684"); -$icon-headset-private_12: char-from-code("f685"); -$icon-headset-selected_20: char-from-code("f686"); -$icon-help_10: char-from-code("f687"); -$icon-help_12: char-from-code("f688"); -$icon-help_16: char-from-code("f689"); -$icon-help_20: char-from-code("f68a"); -$icon-help_24: char-from-code("f68b"); -$icon-help_8: char-from-code("f68c"); -$icon-help-circle_12: char-from-code("f68d"); -$icon-help-circle_14: char-from-code("f68e"); -$icon-help-circle_16: char-from-code("f68f"); -$icon-help-circle_20: char-from-code("f690"); -$icon-help-circle_24: char-from-code("f691"); -$icon-help-circle_36: char-from-code("f692"); -$icon-help-circle_44: char-from-code("f693"); -$icon-help-circle_72: char-from-code("f694"); -$icon-help-circle-active_12: char-from-code("f695"); -$icon-help-circle-active_16: char-from-code("f696"); -$icon-help-circle-active_20: char-from-code("f697"); -$icon-help-circle-active_24: char-from-code("f698"); -$icon-help-circle-active_36: char-from-code("f699"); -$icon-help-circle-active_44: char-from-code("f69a"); -$icon-help-circle-active_72: char-from-code("f69b"); -$icon-hide_10: char-from-code("f69c"); -$icon-hide_12: char-from-code("f69d"); -$icon-hide_16: char-from-code("f69e"); -$icon-hide_20: char-from-code("f69f"); -$icon-hide_24: char-from-code("f6a0"); -$icon-home_16: char-from-code("f6a1"); -$icon-home_20: char-from-code("f6a2"); -$icon-home_24: char-from-code("f6a3"); -$icon-home_32: char-from-code("f6a4"); -$icon-home-active_16: char-from-code("f6a5"); -$icon-home-active_20: char-from-code("f6a6"); -$icon-home-active_24: char-from-code("f6a7"); -$icon-home-active_32: char-from-code("f6a8"); -$icon-horizontal-line_12: char-from-code("f6a9"); -$icon-horizontal-line_16: char-from-code("f6aa"); -$icon-horizontal-line_24: char-from-code("f6ab"); -$icon-house_16: char-from-code("f6ac"); -$icon-house_20: char-from-code("f6ad"); -$icon-house_24: char-from-code("f6ae"); -$icon-house_32: char-from-code("f6af"); -$icon-humidity_14: char-from-code("f6b0"); -$icon-hunt-group_12: char-from-code("f6b1"); -$icon-hunt-group_14: char-from-code("f6b2"); -$icon-hunt-group_16: char-from-code("f6b3"); -$icon-hunt-group_18: char-from-code("f6b4"); -$icon-hunt-group_20: char-from-code("f6b5"); -$icon-hunt-group_24: char-from-code("f6b6"); -$icon-import_12: char-from-code("f6b7"); -$icon-import_16: char-from-code("f6b8"); -$icon-import_24: char-from-code("f6b9"); -$icon-incognito_18: char-from-code("f6ba"); -$icon-incognito_24: char-from-code("f6bb"); -$icon-incognito_40: char-from-code("f6bc"); -$icon-incoming-call-active_12: char-from-code("f6bd"); -$icon-incoming-call-active_16: char-from-code("f6be"); -$icon-incoming-call-legacy_12: char-from-code("f6bf"); -$icon-incoming-call-legacy_16: char-from-code("f6c0"); -$icon-incoming-call-legacy_20: char-from-code("f6c1"); -$icon-incoming-call-legacy_36: char-from-code("f6c2"); -$icon-incoming-call-selected_20: char-from-code("f6c3"); -$icon-incoming-call-selected_24: char-from-code("f6c4"); -$icon-indeterminate-circle-active_16: char-from-code("f6c5"); -$icon-info_12: char-from-code("f6c6"); -$icon-info_14: char-from-code("f6c7"); -$icon-info_16: char-from-code("f6c8"); -$icon-info_18: char-from-code("f6c9"); -$icon-info_20: char-from-code("f6ca"); -$icon-info_24: char-from-code("f6cb"); -$icon-info_28: char-from-code("f6cc"); -$icon-info_32: char-from-code("f6cd"); -$icon-info_40: char-from-code("f6ce"); -$icon-info_44: char-from-code("f6cf"); -$icon-info_72: char-from-code("f6d0"); -$icon-info_8: char-from-code("f6d1"); -$icon-info-active_12: char-from-code("f6d2"); -$icon-info-active_16: char-from-code("f6d3"); -$icon-info-active_18: char-from-code("f6d4"); -$icon-info-active_20: char-from-code("f6d5"); -$icon-info-active_24: char-from-code("f6d6"); -$icon-info-active_28: char-from-code("f6d7"); -$icon-info-active_32: char-from-code("f6d8"); -$icon-info-active_40: char-from-code("f6d9"); -$icon-info-active_44: char-from-code("f6da"); -$icon-info-active_72: char-from-code("f6db"); -$icon-info-i_10: char-from-code("f6dc"); -$icon-info-i_12: char-from-code("f6dd"); -$icon-info-i_20: char-from-code("f6de"); -$icon-info-i_8: char-from-code("f6df"); -$icon-input_10: char-from-code("f6e0"); -$icon-input_12: char-from-code("f6e1"); -$icon-input_14: char-from-code("f6e2"); -$icon-input_16: char-from-code("f6e3"); -$icon-input_24: char-from-code("f6e4"); -$icon-input_26: char-from-code("f6e5"); -$icon-input_28: char-from-code("f6e6"); -$icon-input_36: char-from-code("f6e7"); -$icon-input_8: char-from-code("f6e8"); -$icon-instagram-circle_24: char-from-code("f6e9"); -$icon-instagram-circle_32: char-from-code("f6ea"); -$icon-integrations_16: char-from-code("f6eb"); -$icon-integrations_24: char-from-code("f6ec"); -$icon-invited-user_16: char-from-code("f6ed"); -$icon-invited-user_32: char-from-code("f6ee"); -$icon-invited-user_56: char-from-code("f6ef"); -$icon-jabber_14: char-from-code("f6f0"); -$icon-jabber_16: char-from-code("f6f1"); -$icon-jabber-hub_16: char-from-code("f6f2"); -$icon-join-audio_12: char-from-code("f6f3"); -$icon-join-audio_16: char-from-code("f6f4"); -$icon-join-audio_20: char-from-code("f6f5"); -$icon-join-audio_24: char-from-code("f6f6"); -$icon-keyboard_16: char-from-code("f6f7"); -$icon-keyboard_20: char-from-code("f6f8"); -$icon-keyboard_24: char-from-code("f6f9"); -$icon-keyboard_28: char-from-code("f6fa"); -$icon-keyboard-close_16: char-from-code("f6fb"); -$icon-keyboard-close_24: char-from-code("f6fc"); -$icon-language_12: char-from-code("f6fd"); -$icon-language_16: char-from-code("f6fe"); -$icon-language_20: char-from-code("f6ff"); -$icon-language_24: char-from-code("f700"); -$icon-language_28: char-from-code("f701"); -$icon-language_40: char-from-code("f702"); -$icon-laptop_12: char-from-code("f703"); -$icon-laptop_16: char-from-code("f704"); -$icon-laptop_20: char-from-code("f705"); -$icon-laptop_24: char-from-code("f706"); -$icon-laptop_48: char-from-code("f707"); -$icon-laptop_72: char-from-code("f708"); -$icon-laser-pointer_16: char-from-code("f709"); -$icon-launch_12: char-from-code("f70a"); -$icon-launch_16: char-from-code("f70b"); -$icon-launch_20: char-from-code("f70c"); -$icon-launch_32: char-from-code("f70d"); -$icon-layout-equal-dual_12: char-from-code("f70e"); -$icon-layout-equal-dual_16: char-from-code("f70f"); -$icon-layout-equal-dual_20: char-from-code("f710"); -$icon-layout-equal-dual_24: char-from-code("f711"); -$icon-layout-side-by-side-horizonal_16: char-from-code("f712"); -$icon-layout-side-by-side-vertical_12: char-from-code("f713"); -$icon-layout-side-by-side-vertical_16: char-from-code("f714"); -$icon-layout-side-by-side-vertical_24: char-from-code("f715"); -$icon-layout-stacked_12: char-from-code("f716"); -$icon-layout-stacked_16: char-from-code("f717"); -$icon-layout-stacked_28: char-from-code("f718"); -$icon-leave-breakout-session_16: char-from-code("f719"); -$icon-like_12: char-from-code("f71a"); -$icon-like_16: char-from-code("f71b"); -$icon-like_24: char-from-code("f71c"); -$icon-link_10: char-from-code("f71d"); -$icon-link_12: char-from-code("f71e"); -$icon-link_14: char-from-code("f71f"); -$icon-link_16: char-from-code("f720"); -$icon-link_18: char-from-code("f721"); -$icon-link_20: char-from-code("f722"); -$icon-link_24: char-from-code("f723"); -$icon-linkedin_16: char-from-code("f724"); -$icon-linkedin-circle_24: char-from-code("f725"); -$icon-linkedin-circle_32: char-from-code("f726"); -$icon-linkedin-circle_40: char-from-code("f727"); -$icon-list-menu_12: char-from-code("f728"); -$icon-list-menu_16: char-from-code("f729"); -$icon-list-menu_18: char-from-code("f72a"); -$icon-list-menu_20: char-from-code("f72b"); -$icon-list-menu_24: char-from-code("f72c"); -$icon-list-menu_28: char-from-code("f72d"); -$icon-location_10: char-from-code("f72e"); -$icon-location_16: char-from-code("f72f"); -$icon-location_18: char-from-code("f730"); -$icon-location_20: char-from-code("f731"); -$icon-location_24: char-from-code("f732"); -$icon-location_28: char-from-code("f733"); -$icon-location_32: char-from-code("f734"); -$icon-lock_10: char-from-code("f735"); -$icon-lock_12: char-from-code("f736"); -$icon-lock_24: char-from-code("f737"); -$icon-lock_8: char-from-code("f738"); -$icon-lower-hand_12: char-from-code("f739"); -$icon-lower-hand_16: char-from-code("f73a"); -$icon-lower-hand_20: char-from-code("f73b"); -$icon-mark-as-read_12: char-from-code("f73c"); -$icon-mark-as-unread_12: char-from-code("f73d"); -$icon-mark-as-unread_20: char-from-code("f73e"); -$icon-markdown_16: char-from-code("f73f"); -$icon-markdown_20: char-from-code("f740"); -$icon-marker_12: char-from-code("f741"); -$icon-marker_14: char-from-code("f742"); -$icon-marker_16: char-from-code("f743"); -$icon-marker_18: char-from-code("f744"); -$icon-maximize_12: char-from-code("f745"); -$icon-maximize_14: char-from-code("f746"); -$icon-maximize_16: char-from-code("f747"); -$icon-maximize_20: char-from-code("f748"); -$icon-maximize_24: char-from-code("f749"); -$icon-maximize_28: char-from-code("f74a"); -$icon-meet_10: char-from-code("f74b"); -$icon-meet_12: char-from-code("f74c"); -$icon-meet_120: char-from-code("f74d"); -$icon-meet_124: char-from-code("f74e"); -$icon-meet_14: char-from-code("f74f"); -$icon-meet_16: char-from-code("f750"); -$icon-meet_18: char-from-code("f751"); -$icon-meet_20: char-from-code("f752"); -$icon-meet_24: char-from-code("f753"); -$icon-meet_26: char-from-code("f754"); -$icon-meet_32: char-from-code("f755"); -$icon-meet_48: char-from-code("f756"); -$icon-meet_56: char-from-code("f757"); -$icon-meet-end_16: char-from-code("f758"); -$icon-meeting-controls_16: char-from-code("f759"); -$icon-meetings_10: char-from-code("f75a"); -$icon-meetings_12: char-from-code("f75b"); -$icon-meetings_14: char-from-code("f75c"); -$icon-meetings_16: char-from-code("f75d"); -$icon-meetings_18: char-from-code("f75e"); -$icon-meetings_20: char-from-code("f75f"); -$icon-meetings_24: char-from-code("f760"); -$icon-meetings_26: char-from-code("f761"); -$icon-meetings_28: char-from-code("f762"); -$icon-meetings_32: char-from-code("f763"); -$icon-meetings_36: char-from-code("f764"); -$icon-meetings_8: char-from-code("f765"); -$icon-meetings-active_10: char-from-code("f766"); -$icon-meetings-active_12: char-from-code("f767"); -$icon-meetings-active_14: char-from-code("f768"); -$icon-meetings-active_16: char-from-code("f769"); -$icon-meetings-active_18: char-from-code("f76a"); -$icon-meetings-active_20: char-from-code("f76b"); -$icon-meetings-active_24: char-from-code("f76c"); -$icon-meetings-active_26: char-from-code("f76d"); -$icon-meetings-active_28: char-from-code("f76e"); -$icon-meetings-active_32: char-from-code("f76f"); -$icon-meetings-active_36: char-from-code("f770"); -$icon-meetings-active_8: char-from-code("f771"); -$icon-meetings-presence_12: char-from-code("f772"); -$icon-meetings-presence_14: char-from-code("f773"); -$icon-meetings-presence_24: char-from-code("f774"); -$icon-meetings-presence_28: char-from-code("f775"); -$icon-meetings-presence_8: char-from-code("f776"); -$icon-meetings-presence-stroke_10: char-from-code("f777"); -$icon-meetings-presence-stroke_14: char-from-code("f778"); -$icon-meetings-presence-stroke_16: char-from-code("f779"); -$icon-meetings-presence-stroke_26: char-from-code("f77a"); -$icon-meetings-presence-stroke_30: char-from-code("f77b"); -$icon-mention_10: char-from-code("f77c"); -$icon-mention_12: char-from-code("f77d"); -$icon-mention_14: char-from-code("f77e"); -$icon-mention_16: char-from-code("f77f"); -$icon-mention_18: char-from-code("f780"); -$icon-mention_20: char-from-code("f781"); -$icon-mention_24: char-from-code("f782"); -$icon-mention_8: char-from-code("f783"); -$icon-messenger_12: char-from-code("f784"); -$icon-messenger_16: char-from-code("f785"); -$icon-microphone_10: char-from-code("f786"); -$icon-microphone_12: char-from-code("f787"); -$icon-microphone_14: char-from-code("f788"); -$icon-microphone_16: char-from-code("f789"); -$icon-microphone_18: char-from-code("f78a"); -$icon-microphone_20: char-from-code("f78b"); -$icon-microphone_24: char-from-code("f78c"); -$icon-microphone_28: char-from-code("f78d"); -$icon-microphone_36: char-from-code("f78e"); -$icon-microphone_8: char-from-code("f78f"); -$icon-microphone-muted_10: char-from-code("f790"); -$icon-microphone-muted_12: char-from-code("f791"); -$icon-microphone-muted_14: char-from-code("f792"); -$icon-microphone-muted_16: char-from-code("f793"); -$icon-microphone-muted_18: char-from-code("f794"); -$icon-microphone-muted_20: char-from-code("f795"); -$icon-microphone-muted_24: char-from-code("f796"); -$icon-microphone-muted_28: char-from-code("f797"); -$icon-microphone-muted_32: char-from-code("f798"); -$icon-microphone-muted_36: char-from-code("f799"); -$icon-microphone-muted_8: char-from-code("f79a"); -$icon-microphone-on_16: char-from-code("f79b"); -$icon-microphone-on_20: char-from-code("f79c"); -$icon-microphone-on_24: char-from-code("f79d"); -$icon-mind-map_24: char-from-code("f79e"); -$icon-minimize_12: char-from-code("f79f"); -$icon-minimize_14: char-from-code("f7a0"); -$icon-minimize_16: char-from-code("f7a1"); -$icon-minimize_20: char-from-code("f7a2"); -$icon-minimize_24: char-from-code("f7a3"); -$icon-minimize_28: char-from-code("f7a4"); -$icon-minus_12: char-from-code("f7a5"); -$icon-minus_14: char-from-code("f7a6"); -$icon-minus_16: char-from-code("f7a7"); -$icon-minus_18: char-from-code("f7a8"); -$icon-minus_20: char-from-code("f7a9"); -$icon-minus_24: char-from-code("f7aa"); -$icon-minus_28: char-from-code("f7ab"); -$icon-minus_8: char-from-code("f7ac"); -$icon-mirror_12: char-from-code("f7ad"); -$icon-mirror_16: char-from-code("f7ae"); -$icon-moderator_16: char-from-code("f7af"); -$icon-moderator_56: char-from-code("f7b0"); -$icon-moderator_80: char-from-code("f7b1"); -$icon-more_10: char-from-code("f7b2"); -$icon-more_12: char-from-code("f7b3"); -$icon-more_14: char-from-code("f7b4"); -$icon-more_16: char-from-code("f7b5"); -$icon-more_18: char-from-code("f7b6"); -$icon-more_20: char-from-code("f7b7"); -$icon-more_24: char-from-code("f7b8"); -$icon-more_28: char-from-code("f7b9"); -$icon-more-adr_12: char-from-code("f7ba"); -$icon-more-adr_16: char-from-code("f7bb"); -$icon-more-adr_20: char-from-code("f7bc"); -$icon-more-adr_24: char-from-code("f7bd"); -$icon-more-adr_28: char-from-code("f7be"); -$icon-more-android_12: char-from-code("f7bf"); -$icon-more-android_16: char-from-code("f7c0"); -$icon-more-android_20: char-from-code("f7c1"); -$icon-more-android_24: char-from-code("f7c2"); -$icon-more-android_28: char-from-code("f7c3"); -$icon-more-circle_12: char-from-code("f7c4"); -$icon-more-circle_140: char-from-code("f7c5"); -$icon-more-circle_16: char-from-code("f7c6"); -$icon-more-circle_20: char-from-code("f7c7"); -$icon-more-circle-active_20: char-from-code("f7c8"); -$icon-mouse-cursor_16: char-from-code("f7c9"); -$icon-move-call-in-adr_12: char-from-code("f7ca"); -$icon-move-call-in-adr_16: char-from-code("f7cb"); -$icon-move-call-in-adr_18: char-from-code("f7cc"); -$icon-move-call-in-adr_20: char-from-code("f7cd"); -$icon-move-call-in-adr_24: char-from-code("f7ce"); -$icon-move-call-in-adr_28: char-from-code("f7cf"); -$icon-move-call-in-iph_12: char-from-code("f7d0"); -$icon-move-call-in-iph_16: char-from-code("f7d1"); -$icon-move-call-in-iph_18: char-from-code("f7d2"); -$icon-move-call-in-iph_20: char-from-code("f7d3"); -$icon-move-call-in-iph_24: char-from-code("f7d4"); -$icon-move-call-in-iph_28: char-from-code("f7d5"); -$icon-move-call-in-laptop_12: char-from-code("f7d6"); -$icon-move-call-in-laptop_16: char-from-code("f7d7"); -$icon-move-call-in-laptop_18: char-from-code("f7d8"); -$icon-move-call-in-laptop_20: char-from-code("f7d9"); -$icon-move-call-in-laptop_24: char-from-code("f7da"); -$icon-move-call-in-laptop_28: char-from-code("f7db"); -$icon-move-call-in-out-adr_28: char-from-code("f7dc"); -$icon-move-call-in-out-iph_28: char-from-code("f7dd"); -$icon-move-call-in-tablet_12: char-from-code("f7de"); -$icon-move-call-in-tablet_18: char-from-code("f7df"); -$icon-move-call-in-tablet_20: char-from-code("f7e0"); -$icon-move-call-in-tablet_24: char-from-code("f7e1"); -$icon-move-call-in-tablet_28: char-from-code("f7e2"); -$icon-move-call-out-adr_12: char-from-code("f7e3"); -$icon-move-call-out-adr_16: char-from-code("f7e4"); -$icon-move-call-out-adr_18: char-from-code("f7e5"); -$icon-move-call-out-adr_20: char-from-code("f7e6"); -$icon-move-call-out-adr_24: char-from-code("f7e7"); -$icon-move-call-out-adr_28: char-from-code("f7e8"); -$icon-move-call-out-iph_12: char-from-code("f7e9"); -$icon-move-call-out-iph_16: char-from-code("f7ea"); -$icon-move-call-out-iph_18: char-from-code("f7eb"); -$icon-move-call-out-iph_20: char-from-code("f7ec"); -$icon-move-call-out-iph_24: char-from-code("f7ed"); -$icon-move-call-out-iph_28: char-from-code("f7ee"); -$icon-move-call-out-laptop_12: char-from-code("f7ef"); -$icon-move-call-out-laptop_16: char-from-code("f7f0"); -$icon-move-call-out-laptop_18: char-from-code("f7f1"); -$icon-move-call-out-laptop_20: char-from-code("f7f2"); -$icon-move-call-out-laptop_24: char-from-code("f7f3"); -$icon-move-call-out-laptop_28: char-from-code("f7f4"); -$icon-move-call-out-tablet_12: char-from-code("f7f5"); -$icon-move-call-out-tablet_18: char-from-code("f7f6"); -$icon-move-call-out-tablet_20: char-from-code("f7f7"); -$icon-move-call-out-tablet_24: char-from-code("f7f8"); -$icon-move-call-out-tablet_28: char-from-code("f7f9"); -$icon-multiline-chart_16: char-from-code("f7fa"); -$icon-multiline-chart_20: char-from-code("f7fb"); -$icon-multimedia_16: char-from-code("f7fc"); -$icon-multimedia_20: char-from-code("f7fd"); -$icon-multiple-devices_16: char-from-code("f7fe"); -$icon-multiple-devices_20: char-from-code("f7ff"); -$icon-multiple-devices_24: char-from-code("f800"); -$icon-multiple-devices_28: char-from-code("f801"); -$icon-multiple-devices_64: char-from-code("f802"); -$icon-music-mode_12: char-from-code("f803"); -$icon-music-mode_16: char-from-code("f804"); -$icon-music-mode_24: char-from-code("f805"); -$icon-music-mode_8: char-from-code("f806"); -$icon-mute-on-entry_16: char-from-code("f807"); -$icon-new-idea_16: char-from-code("f808"); -$icon-new-idea_24: char-from-code("f809"); -$icon-new-voicemail_16: char-from-code("f80a"); -$icon-new-voicemail_20: char-from-code("f80b"); -$icon-new-voicemail_24: char-from-code("f80c"); -$icon-new-whiteboard_12: char-from-code("f80d"); -$icon-new-whiteboard_16: char-from-code("f80e"); -$icon-next_10: char-from-code("f80f"); -$icon-next_12: char-from-code("f810"); -$icon-next_14: char-from-code("f811"); -$icon-next_16: char-from-code("f812"); -$icon-next_18: char-from-code("f813"); -$icon-next_20: char-from-code("f814"); -$icon-next_24: char-from-code("f815"); -$icon-next_28: char-from-code("f816"); -$icon-next_36: char-from-code("f817"); -$icon-no-devices_28: char-from-code("f818"); -$icon-no-phone-warning_20: char-from-code("f819"); -$icon-no-phone-warning_24: char-from-code("f81a"); -$icon-note_16: char-from-code("f81b"); -$icon-note_20: char-from-code("f81c"); -$icon-note_24: char-from-code("f81d"); -$icon-note-ppt_16: char-from-code("f81e"); -$icon-note-ppt_20: char-from-code("f81f"); -$icon-notepad_16: char-from-code("f820"); -$icon-notes_10: char-from-code("f821"); -$icon-notes_12: char-from-code("f822"); -$icon-notes_14: char-from-code("f823"); -$icon-notes_16: char-from-code("f824"); -$icon-notes_20: char-from-code("f825"); -$icon-notes_24: char-from-code("f826"); -$icon-notes_26: char-from-code("f827"); -$icon-notes_28: char-from-code("f828"); -$icon-notes_36: char-from-code("f829"); -$icon-notes_8: char-from-code("f82a"); -$icon-one-to-one-zoom_16: char-from-code("f82b"); -$icon-open-in-folder_10: char-from-code("f82c"); -$icon-open-in-folder_12: char-from-code("f82d"); -$icon-open-in-folder_14: char-from-code("f82e"); -$icon-open-in-folder_16: char-from-code("f82f"); -$icon-open-in-folder_20: char-from-code("f830"); -$icon-open-pages_12: char-from-code("f831"); -$icon-open-pages_14: char-from-code("f832"); -$icon-open-pages_16: char-from-code("f833"); -$icon-open-pages_24: char-from-code("f834"); -$icon-open-pages_36: char-from-code("f835"); -$icon-other-number_12: char-from-code("f836"); -$icon-other-number_14: char-from-code("f837"); -$icon-other-number_16: char-from-code("f838"); -$icon-other-number_20: char-from-code("f839"); -$icon-other-number-warning_16: char-from-code("f83a"); -$icon-outgoing-call-active_12: char-from-code("f83b"); -$icon-outgoing-call-active_16: char-from-code("f83c"); -$icon-outgoing-call-legacy_12: char-from-code("f83d"); -$icon-outgoing-call-legacy_16: char-from-code("f83e"); -$icon-outgoing-call-legacy_20: char-from-code("f83f"); -$icon-outgoing-call-legacy_36: char-from-code("f840"); -$icon-outgoing-call-selected_20: char-from-code("f841"); -$icon-outgoing-call-selected_24: char-from-code("f842"); -$icon-overflow-left_16: char-from-code("f843"); -$icon-overflow-right_16: char-from-code("f844"); -$icon-paired-camera_16: char-from-code("f845"); -$icon-paired-camera_24: char-from-code("f846"); -$icon-paired-camera_28: char-from-code("f847"); -$icon-paired-device_16: char-from-code("f848"); -$icon-paired-device_24: char-from-code("f849"); -$icon-paired-device_56: char-from-code("f84a"); -$icon-paired-device_96: char-from-code("f84b"); -$icon-paired-handset_16: char-from-code("f84c"); -$icon-paired-handset_24: char-from-code("f84d"); -$icon-pairing_14: char-from-code("f84e"); -$icon-pairing_16: char-from-code("f84f"); -$icon-pairing_20: char-from-code("f850"); -$icon-pairing_24: char-from-code("f851"); -$icon-pairing_28: char-from-code("f852"); -$icon-pairing_56: char-from-code("f853"); -$icon-panel-control-bar_36: char-from-code("f854"); -$icon-panel-control-down_12: char-from-code("f855"); -$icon-panel-control-down_24: char-from-code("f856"); -$icon-panel-control-down_28: char-from-code("f857"); -$icon-panel-control-down_36: char-from-code("f858"); -$icon-panel-control-down-iph_12: char-from-code("f859"); -$icon-panel-control-down-iph_24: char-from-code("f85a"); -$icon-panel-control-down-iph_36: char-from-code("f85b"); -$icon-panel-control-dragger_14: char-from-code("f85c"); -$icon-panel-control-dragger_16: char-from-code("f85d"); -$icon-panel-control-left_12: char-from-code("f85e"); -$icon-panel-control-left_16: char-from-code("f85f"); -$icon-panel-control-left_24: char-from-code("f860"); -$icon-panel-control-left_36: char-from-code("f861"); -$icon-panel-control-left-iph_12: char-from-code("f862"); -$icon-panel-control-left-iph_24: char-from-code("f863"); -$icon-panel-control-left-iph_36: char-from-code("f864"); -$icon-panel-control-right_12: char-from-code("f865"); -$icon-panel-control-right_16: char-from-code("f866"); -$icon-panel-control-right_24: char-from-code("f867"); -$icon-panel-control-right_36: char-from-code("f868"); -$icon-panel-control-right-iph_12: char-from-code("f869"); -$icon-panel-control-right-iph_24: char-from-code("f86a"); -$icon-panel-control-right-iph_36: char-from-code("f86b"); -$icon-panel-control-thin-down_12: char-from-code("f86c"); -$icon-panel-control-thin-down_24: char-from-code("f86d"); -$icon-panel-control-thin-down_28: char-from-code("f86e"); -$icon-panel-control-thin-left_12: char-from-code("f86f"); -$icon-panel-control-thin-left_24: char-from-code("f870"); -$icon-panel-control-thin-right_12: char-from-code("f871"); -$icon-panel-control-thin-right_24: char-from-code("f872"); -$icon-panel-control-thin-up_12: char-from-code("f873"); -$icon-panel-control-thin-up_24: char-from-code("f874"); -$icon-panel-control-thin-up_28: char-from-code("f875"); -$icon-panel-control-thinner-left_24: char-from-code("f876"); -$icon-panel-control-thinner-right_24: char-from-code("f877"); -$icon-panel-control-up_12: char-from-code("f878"); -$icon-panel-control-up_24: char-from-code("f879"); -$icon-panel-control-up_28: char-from-code("f87a"); -$icon-panel-control-up_36: char-from-code("f87b"); -$icon-panel-control-up-iph_12: char-from-code("f87c"); -$icon-panel-control-up-iph_24: char-from-code("f87d"); -$icon-panel-control-up-iph_36: char-from-code("f87e"); -$icon-parked_16: char-from-code("f87f"); -$icon-parked_20: char-from-code("f880"); -$icon-parked_24: char-from-code("f881"); -$icon-parse_16: char-from-code("f882"); -$icon-parse_20: char-from-code("f883"); -$icon-participant-add_12: char-from-code("f884"); -$icon-participant-add_14: char-from-code("f885"); -$icon-participant-add_16: char-from-code("f886"); -$icon-participant-add_20: char-from-code("f887"); -$icon-participant-add_24: char-from-code("f888"); -$icon-participant-add_28: char-from-code("f889"); -$icon-participant-add_56: char-from-code("f88a"); -$icon-participant-blocked_12: char-from-code("f88b"); -$icon-participant-blocked_14: char-from-code("f88c"); -$icon-participant-list_12: char-from-code("f88d"); -$icon-participant-list_14: char-from-code("f88e"); -$icon-participant-list_16: char-from-code("f88f"); -$icon-participant-list_18: char-from-code("f890"); -$icon-participant-list_20: char-from-code("f891"); -$icon-participant-list_22: char-from-code("f892"); -$icon-participant-list_24: char-from-code("f893"); -$icon-participant-list_26: char-from-code("f894"); -$icon-participant-list_28: char-from-code("f895"); -$icon-participant-list_32: char-from-code("f896"); -$icon-participant-list_56: char-from-code("f897"); -$icon-participant-list_64: char-from-code("f898"); -$icon-participant-list_80: char-from-code("f899"); -$icon-participant-list-legacy_16: char-from-code("f89a"); -$icon-participant-list-legacy_20: char-from-code("f89b"); -$icon-participant-list-legacy_24: char-from-code("f89c"); -$icon-participant-list-legacy_28: char-from-code("f89d"); -$icon-participant-list-legacy_32: char-from-code("f89e"); -$icon-participant-list-legacy_56: char-from-code("f89f"); -$icon-participant-list-legacy_64: char-from-code("f8a0"); -$icon-participant-list-legacy_80: char-from-code("f8a1"); -$icon-participant-list-legacy-optical_16: char-from-code("f8a2"); -$icon-participant-list-legacy-optical_20: char-from-code("f8a3"); -$icon-participant-list-legacy-optical_22: char-from-code("f8a4"); -$icon-participant-list-legacy-optical_26: char-from-code("f8a5"); -$icon-participant-list-legacy-optical_28: char-from-code("f8a6"); -$icon-participant-list-legacy-optical_32: char-from-code("f8a7"); -$icon-participant-list-legacy-optical_56: char-from-code("f8a8"); -$icon-participant-list-legacy-optical_64: char-from-code("f8a9"); -$icon-participant-list-legacy-optical_80: char-from-code("f8aa"); -$icon-participant-remove_12: char-from-code("f8ab"); -$icon-participant-remove_14: char-from-code("f8ac"); -$icon-participant-remove_16: char-from-code("f8ad"); -$icon-participant-remove_20: char-from-code("f8ae"); -$icon-participant-remove_24: char-from-code("f8af"); -$icon-participant-remove_28: char-from-code("f8b0"); -$icon-participant-remove_56: char-from-code("f8b1"); -$icon-participant-unknown_14: char-from-code("f8b2"); -$icon-participant-wait_16: char-from-code("f8b3"); -$icon-pass-mouse_12: char-from-code("f8b4"); -$icon-pass-mouse_16: char-from-code("f8b5"); -$icon-pass-mouse_20: char-from-code("f8b6"); -$icon-pause_10: char-from-code("f8b7"); -$icon-pause_12: char-from-code("f8b8"); -$icon-pause_120: char-from-code("f8b9"); -$icon-pause_124: char-from-code("f8ba"); -$icon-pause_14: char-from-code("f8bb"); -$icon-pause_16: char-from-code("f8bc"); -$icon-pause_18: char-from-code("f8bd"); -$icon-pause_20: char-from-code("f8be"); -$icon-pause_24: char-from-code("f8bf"); -$icon-pause_26: char-from-code("f8c0"); -$icon-pause_32: char-from-code("f8c1"); -$icon-pause_48: char-from-code("f8c2"); -$icon-pause_56: char-from-code("f8c3"); -$icon-pause_8: char-from-code("f8c4"); -$icon-pause-circle_12: char-from-code("f8c5"); -$icon-pause-circle_16: char-from-code("f8c6"); -$icon-pause-circle_20: char-from-code("f8c7"); -$icon-pause-circle_24: char-from-code("f8c8"); -$icon-pause-circle-active_16: char-from-code("f8c9"); -$icon-pause-circle-active_24: char-from-code("f8ca"); -$icon-pen_12: char-from-code("f8cb"); -$icon-pen_14: char-from-code("f8cc"); -$icon-pen_16: char-from-code("f8cd"); -$icon-pen_18: char-from-code("f8ce"); -$icon-pen_24: char-from-code("f8cf"); -$icon-pen_8: char-from-code("f8d0"); -$icon-people_10: char-from-code("f8d1"); -$icon-people_12: char-from-code("f8d2"); -$icon-people_120: char-from-code("f8d3"); -$icon-people_14: char-from-code("f8d4"); -$icon-people_16: char-from-code("f8d5"); -$icon-people_18: char-from-code("f8d6"); -$icon-people_20: char-from-code("f8d7"); -$icon-people_24: char-from-code("f8d8"); -$icon-people_26: char-from-code("f8d9"); -$icon-people_28: char-from-code("f8da"); -$icon-people_32: char-from-code("f8db"); -$icon-people_36: char-from-code("f8dc"); -$icon-people_8: char-from-code("f8dd"); -$icon-people-active_10: char-from-code("f8de"); -$icon-people-active_12: char-from-code("f8df"); -$icon-people-active_14: char-from-code("f8e0"); -$icon-people-active_16: char-from-code("f8e1"); -$icon-people-active_18: char-from-code("f8e2"); -$icon-people-active_20: char-from-code("f8e3"); -$icon-people-active_24: char-from-code("f8e4"); -$icon-people-active_26: char-from-code("f8e5"); -$icon-people-active_28: char-from-code("f8e6"); -$icon-people-active_32: char-from-code("f8e7"); -$icon-people-active_36: char-from-code("f8e8"); -$icon-people-active_8: char-from-code("f8e9"); -$icon-people-circle_16: char-from-code("f8ea"); -$icon-people-circle_20: char-from-code("f8eb"); -$icon-people-circle_24: char-from-code("f8ec"); -$icon-people-insight_20: char-from-code("f8ed"); -$icon-people-insight_24: char-from-code("f8ee"); -$icon-people-insight-active_20: char-from-code("f8ef"); -$icon-people-insight-active_24: char-from-code("f8f0"); -$icon-phone-adr_12: char-from-code("f8f1"); -$icon-phone-adr_16: char-from-code("f8f2"); -$icon-phone-adr_20: char-from-code("f8f3"); -$icon-phone-adr_24: char-from-code("f8f4"); -$icon-phone-android_12: char-from-code("f8f5"); -$icon-phone-android_16: char-from-code("f8f6"); -$icon-phone-android_24: char-from-code("f8f7"); -$icon-phone-ios_12: char-from-code("f8f8"); -$icon-phone-ios_16: char-from-code("f8f9"); -$icon-phone-ios_24: char-from-code("f8fa"); -$icon-phone-ios-muted_12: char-from-code("f8fb"); -$icon-phone-iph_12: char-from-code("f8fc"); -$icon-phone-iph_16: char-from-code("f8fd"); -$icon-phone-iph_20: char-from-code("f8fe"); -$icon-phone-iph_24: char-from-code("f8ff"); -$icon-phone-iph-alert_12: char-from-code("f900"); -$icon-phone-iph-muted_12: char-from-code("f901"); -$icon-phone-iph-muted-alert_12: char-from-code("f902"); -$icon-phone-iph-private_12: char-from-code("f903"); -$icon-phone-reply_16: char-from-code("f904"); -$icon-phone-reply_20: char-from-code("f905"); -$icon-phone-reply-all_16: char-from-code("f906"); -$icon-phone-reply-all_20: char-from-code("f907"); -$icon-picker_14: char-from-code("f908"); -$icon-picker_16: char-from-code("f909"); -$icon-picker_18: char-from-code("f90a"); -$icon-picture-in-picture_12: char-from-code("f90b"); -$icon-picture-in-picture_16: char-from-code("f90c"); -$icon-picture-in-picture_20: char-from-code("f90d"); -$icon-picture-in-picture_24: char-from-code("f90e"); -$icon-pie-chart_16: char-from-code("f90f"); -$icon-pie-chart_20: char-from-code("f910"); -$icon-pin_10: char-from-code("f911"); -$icon-pin_12: char-from-code("f912"); -$icon-pin_14: char-from-code("f913"); -$icon-pin_16: char-from-code("f914"); -$icon-pin_18: char-from-code("f915"); -$icon-pin_20: char-from-code("f916"); -$icon-pin_24: char-from-code("f917"); -$icon-pin-active_10: char-from-code("f918"); -$icon-pin-active_20: char-from-code("f919"); -$icon-pin-list_12: char-from-code("f91a"); -$icon-pin-list_16: char-from-code("f91b"); -$icon-pin-list_20: char-from-code("f91c"); -$icon-pin-muted_10: char-from-code("f91d"); -$icon-pin-muted_12: char-from-code("f91e"); -$icon-pin-muted_14: char-from-code("f91f"); -$icon-pin-muted_16: char-from-code("f920"); -$icon-pin-muted_18: char-from-code("f921"); -$icon-pin-muted_20: char-from-code("f922"); -$icon-pin-muted_24: char-from-code("f923"); -$icon-placeholder_10: char-from-code("f924"); -$icon-placeholder_12: char-from-code("f925"); -$icon-placeholder_14: char-from-code("f926"); -$icon-placeholder_16: char-from-code("f927"); -$icon-placeholder_18: char-from-code("f928"); -$icon-placeholder_20: char-from-code("f929"); -$icon-placeholder_24: char-from-code("f92a"); -$icon-placeholder_28: char-from-code("f92b"); -$icon-placeholder_32: char-from-code("f92c"); -$icon-placeholder_36: char-from-code("f92d"); -$icon-placeholder_40: char-from-code("f92e"); -$icon-placeholder_48: char-from-code("f92f"); -$icon-placeholder_56: char-from-code("f930"); -$icon-placeholder_8: char-from-code("f931"); -$icon-play_12: char-from-code("f932"); -$icon-play_14: char-from-code("f933"); -$icon-play_16: char-from-code("f934"); -$icon-play_20: char-from-code("f935"); -$icon-play_24: char-from-code("f936"); -$icon-play_28: char-from-code("f937"); -$icon-play_32: char-from-code("f938"); -$icon-play-circle_12: char-from-code("f939"); -$icon-play-circle_16: char-from-code("f93a"); -$icon-play-circle_20: char-from-code("f93b"); -$icon-play-circle_24: char-from-code("f93c"); -$icon-play-circle_28: char-from-code("f93d"); -$icon-play-circle_32: char-from-code("f93e"); -$icon-plug-ac_24: char-from-code("f93f"); -$icon-plus_12: char-from-code("f940"); -$icon-plus_14: char-from-code("f941"); -$icon-plus_16: char-from-code("f942"); -$icon-plus_18: char-from-code("f943"); -$icon-plus_20: char-from-code("f944"); -$icon-plus_24: char-from-code("f945"); -$icon-plus_28: char-from-code("f946"); -$icon-plus_8: char-from-code("f947"); -$icon-plus-circle_24: char-from-code("f948"); -$icon-plus-circle-active_12: char-from-code("f949"); -$icon-plus-circle-active_20: char-from-code("f94a"); -$icon-plus-circle-active_24: char-from-code("f94b"); -$icon-pmr_10: char-from-code("f94c"); -$icon-pmr_12: char-from-code("f94d"); -$icon-pmr_14: char-from-code("f94e"); -$icon-pmr_16: char-from-code("f94f"); -$icon-pmr_18: char-from-code("f950"); -$icon-pmr_20: char-from-code("f951"); -$icon-pmr_24: char-from-code("f952"); -$icon-pmr_32: char-from-code("f953"); -$icon-pmr_36: char-from-code("f954"); -$icon-pmr-legacy_10: char-from-code("f955"); -$icon-pmr-legacy_12: char-from-code("f956"); -$icon-pmr-legacy_14: char-from-code("f957"); -$icon-pmr-legacy_16: char-from-code("f958"); -$icon-pmr-legacy_18: char-from-code("f959"); -$icon-pmr-legacy_20: char-from-code("f95a"); -$icon-pmr-legacy_24: char-from-code("f95b"); -$icon-pmr-legacy_32: char-from-code("f95c"); -$icon-pmr-legacy_36: char-from-code("f95d"); -$icon-poll_12: char-from-code("f95e"); -$icon-poll_16: char-from-code("f95f"); -$icon-poll_20: char-from-code("f960"); -$icon-poll_24: char-from-code("f961"); -$icon-poll_36: char-from-code("f962"); -$icon-pop-in_10: char-from-code("f963"); -$icon-pop-in_12: char-from-code("f964"); -$icon-pop-in_16: char-from-code("f965"); -$icon-pop-in_20: char-from-code("f966"); -$icon-pop-in_24: char-from-code("f967"); -$icon-pop-in_8: char-from-code("f968"); -$icon-pop-out_10: char-from-code("f969"); -$icon-pop-out_12: char-from-code("f96a"); -$icon-pop-out_16: char-from-code("f96b"); -$icon-pop-out_20: char-from-code("f96c"); -$icon-pop-out_24: char-from-code("f96d"); -$icon-pop-out_8: char-from-code("f96e"); -$icon-pop-up_12: char-from-code("f96f"); -$icon-pop-up_24: char-from-code("f970"); -$icon-power-ac_16: char-from-code("f971"); -$icon-power-apps_32: char-from-code("f972"); -$icon-presentation_16: char-from-code("f973"); -$icon-presentation_20: char-from-code("f974"); -$icon-presentation_24: char-from-code("f975"); -$icon-print_10: char-from-code("f976"); -$icon-print_12: char-from-code("f977"); -$icon-print_16: char-from-code("f978"); -$icon-priority_12: char-from-code("f979"); -$icon-priority_14: char-from-code("f97a"); -$icon-priority_16: char-from-code("f97b"); -$icon-priority_18: char-from-code("f97c"); -$icon-priority_20: char-from-code("f97d"); -$icon-priority_24: char-from-code("f97e"); -$icon-priority_28: char-from-code("f97f"); -$icon-priority_32: char-from-code("f980"); -$icon-priority_40: char-from-code("f981"); -$icon-priority_44: char-from-code("f982"); -$icon-priority_72: char-from-code("f983"); -$icon-priority-active_16: char-from-code("f984"); -$icon-privacy_16: char-from-code("f985"); -$icon-privacy_20: char-from-code("f986"); -$icon-private_10: char-from-code("f987"); -$icon-private_12: char-from-code("f988"); -$icon-private_14: char-from-code("f989"); -$icon-private_16: char-from-code("f98a"); -$icon-private_20: char-from-code("f98b"); -$icon-private_24: char-from-code("f98c"); -$icon-private_28: char-from-code("f98d"); -$icon-private_8: char-from-code("f98e"); -$icon-private-circle_100: char-from-code("f98f"); -$icon-private-circle_14: char-from-code("f990"); -$icon-private-circle_16: char-from-code("f991"); -$icon-private-circle_20: char-from-code("f992"); -$icon-private-circle_24: char-from-code("f993"); -$icon-private-circle_48: char-from-code("f994"); -$icon-private-circle_56: char-from-code("f995"); -$icon-private-circle_80: char-from-code("f996"); -$icon-private-circle-active_16: char-from-code("f997"); -$icon-private-circle-active_20: char-from-code("f998"); -$icon-private-circle-active_24: char-from-code("f999"); -$icon-private-meeting_12: char-from-code("f99a"); -$icon-private-meeting_14: char-from-code("f99b"); -$icon-private-meeting_16: char-from-code("f99c"); -$icon-private-meeting_20: char-from-code("f99d"); -$icon-pro-badge_28: char-from-code("f99e"); -$icon-product-demo_16: char-from-code("f99f"); -$icon-proximity_12: char-from-code("f9a0"); -$icon-proximity_16: char-from-code("f9a1"); -$icon-proximity_20: char-from-code("f9a2"); -$icon-proximity_24: char-from-code("f9a3"); -$icon-proximity_28: char-from-code("f9a4"); -$icon-proximity-muted_12: char-from-code("f9a5"); -$icon-proximity-muted_16: char-from-code("f9a6"); -$icon-proximity-muted_24: char-from-code("f9a7"); -$icon-proximity-muted_28: char-from-code("f9a8"); -$icon-proximity-video_12: char-from-code("f9a9"); -$icon-proximity-video_14: char-from-code("f9aa"); -$icon-proximity-video_16: char-from-code("f9ab"); -$icon-proximity-video_20: char-from-code("f9ac"); -$icon-proximity-video_24: char-from-code("f9ad"); -$icon-proximity-video_26: char-from-code("f9ae"); -$icon-pto_12: char-from-code("f9af"); -$icon-pto_120: char-from-code("f9b0"); -$icon-pto_124: char-from-code("f9b1"); -$icon-pto_14: char-from-code("f9b2"); -$icon-pto_16: char-from-code("f9b3"); -$icon-pto_18: char-from-code("f9b4"); -$icon-pto_20: char-from-code("f9b5"); -$icon-pto_24: char-from-code("f9b6"); -$icon-pto_26: char-from-code("f9b7"); -$icon-pto_28: char-from-code("f9b8"); -$icon-pto_32: char-from-code("f9b9"); -$icon-pto_40: char-from-code("f9ba"); -$icon-pto_48: char-from-code("f9bb"); -$icon-pto_56: char-from-code("f9bc"); -$icon-pto_8: char-from-code("f9bd"); -$icon-pull-call_12: char-from-code("f9be"); -$icon-pull-call_14: char-from-code("f9bf"); -$icon-pull-call_16: char-from-code("f9c0"); -$icon-pull-call_24: char-from-code("f9c1"); -$icon-q-a_16: char-from-code("f9c2"); -$icon-q-a_20: char-from-code("f9c3"); -$icon-q-a_24: char-from-code("f9c4"); -$icon-q-a_36: char-from-code("f9c5"); -$icon-quality_16: char-from-code("f9c6"); -$icon-quality_24: char-from-code("f9c7"); -$icon-queue_14: char-from-code("f9c8"); -$icon-queue_contact: char-from-code("f9c9"); -$icon-queue-contact_14: char-from-code("f9ca"); -$icon-queue-contact_20: char-from-code("f9cb"); -$icon-queue-lookup_16: char-from-code("f9cc"); -$icon-quiet_16: char-from-code("f9cd"); -$icon-quiet_20: char-from-code("f9ce"); -$icon-quiet_32: char-from-code("f9cf"); -$icon-quiet_8: char-from-code("f9d0"); -$icon-raise-hand_12: char-from-code("f9d1"); -$icon-raise-hand_16: char-from-code("f9d2"); -$icon-raise-hand_20: char-from-code("f9d3"); -$icon-raise-hand_24: char-from-code("f9d4"); -$icon-ram_16: char-from-code("f9d5"); -$icon-reactions_12: char-from-code("f9d6"); -$icon-reactions_16: char-from-code("f9d7"); -$icon-reactions_20: char-from-code("f9d8"); -$icon-real-time-translation_24: char-from-code("f9d9"); -$icon-recents_12: char-from-code("f9da"); -$icon-recents_14: char-from-code("f9db"); -$icon-recents_16: char-from-code("f9dc"); -$icon-recents_18: char-from-code("f9dd"); -$icon-recents_20: char-from-code("f9de"); -$icon-recents_24: char-from-code("f9df"); -$icon-recents_80: char-from-code("f9e0"); -$icon-recents-active_14: char-from-code("f9e1"); -$icon-recents-active_24: char-from-code("f9e2"); -$icon-recents-presence_12: char-from-code("f9e3"); -$icon-recents-presence_14: char-from-code("f9e4"); -$icon-recents-presence_24: char-from-code("f9e5"); -$icon-recents-presence_28: char-from-code("f9e6"); -$icon-recents-presence_8: char-from-code("f9e7"); -$icon-recents-presence-stroke_10: char-from-code("f9e8"); -$icon-recents-presence-stroke_14: char-from-code("f9e9"); -$icon-recents-presence-stroke_16: char-from-code("f9ea"); -$icon-recents-presence-stroke_26: char-from-code("f9eb"); -$icon-recents-presence-stroke_30: char-from-code("f9ec"); -$icon-record_12: char-from-code("f9ed"); -$icon-record_14: char-from-code("f9ee"); -$icon-record_16: char-from-code("f9ef"); -$icon-record_20: char-from-code("f9f0"); -$icon-record_24: char-from-code("f9f1"); -$icon-record_28: char-from-code("f9f2"); -$icon-record-active_12: char-from-code("f9f3"); -$icon-record-active_14: char-from-code("f9f4"); -$icon-record-active_16: char-from-code("f9f5"); -$icon-record-active_20: char-from-code("f9f6"); -$icon-record-active_24: char-from-code("f9f7"); -$icon-record-active-bg_12: char-from-code("f9f8"); -$icon-record-active-bg_14: char-from-code("f9f9"); -$icon-record-active-bg_16: char-from-code("f9fa"); -$icon-record-active-bg_20: char-from-code("f9fb"); -$icon-record-active-bg_24: char-from-code("f9fc"); -$icon-record-active-circle_12: char-from-code("f9fd"); -$icon-record-active-circle_14: char-from-code("f9fe"); -$icon-record-active-circle_16: char-from-code("f9ff"); -$icon-record-active-circle_20: char-from-code("fa00"); -$icon-record-active-circle_24: char-from-code("fa01"); -$icon-recurring_12: char-from-code("fa02"); -$icon-recurring_14: char-from-code("fa03"); -$icon-recurring_16: char-from-code("fa04"); -$icon-recurring_20: char-from-code("fa05"); -$icon-recurring_24: char-from-code("fa06"); -$icon-recurring-off_12: char-from-code("fa07"); -$icon-recurring-off_16: char-from-code("fa08"); -$icon-redial_16: char-from-code("fa09"); -$icon-redial_20: char-from-code("fa0a"); -$icon-redial_24: char-from-code("fa0b"); -$icon-redo_12: char-from-code("fa0c"); -$icon-redo_14: char-from-code("fa0d"); -$icon-redo_16: char-from-code("fa0e"); -$icon-refresh_10: char-from-code("fa0f"); -$icon-refresh_12: char-from-code("fa10"); -$icon-refresh_16: char-from-code("fa11"); -$icon-refresh_18: char-from-code("fa12"); -$icon-refresh_20: char-from-code("fa13"); -$icon-refresh_24: char-from-code("fa14"); -$icon-remote-desktop-control_10: char-from-code("fa15"); -$icon-remote-desktop-control_12: char-from-code("fa16"); -$icon-remote-desktop-control_14: char-from-code("fa17"); -$icon-remote-desktop-control_16: char-from-code("fa18"); -$icon-remote-desktop-control_24: char-from-code("fa19"); -$icon-remote-desktop-control-active_10: char-from-code("fa1a"); -$icon-remote-desktop-control-active_12: char-from-code("fa1b"); -$icon-remove_12: char-from-code("fa1c"); -$icon-remove_14: char-from-code("fa1d"); -$icon-remove_16: char-from-code("fa1e"); -$icon-remove_20: char-from-code("fa1f"); -$icon-remove_24: char-from-code("fa20"); -$icon-reply_10: char-from-code("fa21"); -$icon-reply_12: char-from-code("fa22"); -$icon-reply_16: char-from-code("fa23"); -$icon-reply_20: char-from-code("fa24"); -$icon-reply_24: char-from-code("fa25"); -$icon-reply-list_12: char-from-code("fa26"); -$icon-reply-list_16: char-from-code("fa27"); -$icon-reply-list_20: char-from-code("fa28"); -$icon-report_16: char-from-code("fa29"); -$icon-report_28: char-from-code("fa2a"); -$icon-reset_16: char-from-code("fa2b"); -$icon-reset_24: char-from-code("fa2c"); -$icon-response_16: char-from-code("fa2d"); -$icon-responsive-mobile_16: char-from-code("fa2e"); -$icon-retrieve-call_14: char-from-code("fa2f"); -$icon-retrieve-call_16: char-from-code("fa30"); -$icon-return_12: char-from-code("fa31"); -$icon-return_16: char-from-code("fa32"); -$icon-ringtone_16: char-from-code("fa33"); -$icon-ringtone_24: char-from-code("fa34"); -$icon-room-calendar_24: char-from-code("fa35"); -$icon-room-lights_16: char-from-code("fa36"); -$icon-room-lights_24: char-from-code("fa37"); -$icon-rotate-content_12: char-from-code("fa38"); -$icon-rotate-content_16: char-from-code("fa39"); -$icon-rotate-content_24: char-from-code("fa3a"); -$icon-rotate-landscape_16: char-from-code("fa3b"); -$icon-rss-circle_24: char-from-code("fa3c"); -$icon-rss-circle_32: char-from-code("fa3d"); -$icon-rss-circle_40: char-from-code("fa3e"); -$icon-running-application_16: char-from-code("fa3f"); -$icon-running-application_24: char-from-code("fa40"); -$icon-save_12: char-from-code("fa41"); -$icon-save_14: char-from-code("fa42"); -$icon-save_16: char-from-code("fa43"); -$icon-save_24: char-from-code("fa44"); -$icon-scan_20: char-from-code("fa45"); -$icon-scan_24: char-from-code("fa46"); -$icon-scheduler-available_14: char-from-code("fa47"); -$icon-scheduler-available_16: char-from-code("fa48"); -$icon-scheduler-not-working-hours_14: char-from-code("fa49"); -$icon-scheduler-not-working-hours_16: char-from-code("fa4a"); -$icon-scheduler-unavailable_14: char-from-code("fa4b"); -$icon-scheduler-unavailable_16: char-from-code("fa4c"); -$icon-scheduler-unknown_14: char-from-code("fa4d"); -$icon-scheduler-unknown_16: char-from-code("fa4e"); -$icon-screen-toggle_10: char-from-code("fa4f"); -$icon-screen-toggle_12: char-from-code("fa50"); -$icon-screen-toggle_16: char-from-code("fa51"); -$icon-screen-toggle_20: char-from-code("fa52"); -$icon-screen-toggle_24: char-from-code("fa53"); -$icon-screenshot_12: char-from-code("fa54"); -$icon-screenshot_16: char-from-code("fa55"); -$icon-screenshot_20: char-from-code("fa56"); -$icon-screenshot_24: char-from-code("fa57"); -$icon-search_12: char-from-code("fa58"); -$icon-search_14: char-from-code("fa59"); -$icon-search_16: char-from-code("fa5a"); -$icon-search_18: char-from-code("fa5b"); -$icon-search_20: char-from-code("fa5c"); -$icon-search_24: char-from-code("fa5d"); -$icon-search_28: char-from-code("fa5e"); -$icon-secure_10: char-from-code("fa5f"); -$icon-secure_12: char-from-code("fa60"); -$icon-secure_14: char-from-code("fa61"); -$icon-secure_16: char-from-code("fa62"); -$icon-secure_20: char-from-code("fa63"); -$icon-secure_24: char-from-code("fa64"); -$icon-secure_28: char-from-code("fa65"); -$icon-secure_8: char-from-code("fa66"); -$icon-secure-active_12: char-from-code("fa67"); -$icon-secure-active_14: char-from-code("fa68"); -$icon-secure-active_16: char-from-code("fa69"); -$icon-secure-active_20: char-from-code("fa6a"); -$icon-secure-active_24: char-from-code("fa6b"); -$icon-secure-active_28: char-from-code("fa6c"); -$icon-secure-active_8: char-from-code("fa6d"); -$icon-secure-badge_28: char-from-code("fa6e"); -$icon-secure-circle_14: char-from-code("fa6f"); -$icon-secure-circle_16: char-from-code("fa70"); -$icon-secure-circle-active_14: char-from-code("fa71"); -$icon-secure-circle-active_16: char-from-code("fa72"); -$icon-secure-fips_24: char-from-code("fa73"); -$icon-selfview_16: char-from-code("fa74"); -$icon-selfview_20: char-from-code("fa75"); -$icon-selfview_24: char-from-code("fa76"); -$icon-send_12: char-from-code("fa77"); -$icon-send_14: char-from-code("fa78"); -$icon-send_16: char-from-code("fa79"); -$icon-send_20: char-from-code("fa7a"); -$icon-send_24: char-from-code("fa7b"); -$icon-seperate_12: char-from-code("fa7c"); -$icon-seperate_16: char-from-code("fa7d"); -$icon-seperate_20: char-from-code("fa7e"); -$icon-seperate_24: char-from-code("fa7f"); -$icon-server_16: char-from-code("fa80"); -$icon-server_24: char-from-code("fa81"); -$icon-server-circle_100: char-from-code("fa82"); -$icon-server-error_16: char-from-code("fa83"); -$icon-set-variable_16: char-from-code("fa84"); -$icon-set-variable_20: char-from-code("fa85"); -$icon-settings_10: char-from-code("fa86"); -$icon-settings_12: char-from-code("fa87"); -$icon-settings_14: char-from-code("fa88"); -$icon-settings_16: char-from-code("fa89"); -$icon-settings_18: char-from-code("fa8a"); -$icon-settings_20: char-from-code("fa8b"); -$icon-settings_24: char-from-code("fa8c"); -$icon-settings_32: char-from-code("fa8d"); -$icon-settings_8: char-from-code("fa8e"); -$icon-settings-active_10: char-from-code("fa8f"); -$icon-settings-active_12: char-from-code("fa90"); -$icon-settings-active_14: char-from-code("fa91"); -$icon-settings-active_16: char-from-code("fa92"); -$icon-settings-active_18: char-from-code("fa93"); -$icon-settings-active_20: char-from-code("fa94"); -$icon-settings-active_24: char-from-code("fa95"); -$icon-settings-active_32: char-from-code("fa96"); -$icon-settings-active_8: char-from-code("fa97"); -$icon-setup-assistant_16: char-from-code("fa98"); -$icon-shake-device_18: char-from-code("fa99"); -$icon-shake-device_20: char-from-code("fa9a"); -$icon-shape-circle_20: char-from-code("fa9b"); -$icon-shape-cone_20: char-from-code("fa9c"); -$icon-shape-cylinder_20: char-from-code("fa9d"); -$icon-shape-diagonal-arrowhead-dual_16: char-from-code("fa9e"); -$icon-shape-diagonal-arrowhead-single_16: char-from-code("fa9f"); -$icon-shape-diagonal-arrowhead-single_20: char-from-code("faa0"); -$icon-shape-diagonal-line_16: char-from-code("faa1"); -$icon-shape-diagonal-line_20: char-from-code("faa2"); -$icon-shape-oval_16: char-from-code("faa3"); -$icon-shape-oval_20: char-from-code("faa4"); -$icon-shape-polygon_20: char-from-code("faa5"); -$icon-shape-sphere_20: char-from-code("faa6"); -$icon-shape-square_16: char-from-code("faa7"); -$icon-shape-square-20: char-from-code("faa8"); -$icon-shapes_16: char-from-code("faa9"); -$icon-share_12: char-from-code("faaa"); -$icon-share_14: char-from-code("faab"); -$icon-share_16: char-from-code("faac"); -$icon-share_18: char-from-code("faad"); -$icon-share_20: char-from-code("faae"); -$icon-share_24: char-from-code("faaf"); -$icon-share_28: char-from-code("fab0"); -$icon-share_32: char-from-code("fab1"); -$icon-share-c-native-adr_12: char-from-code("fab2"); -$icon-share-c-native-adr_14: char-from-code("fab3"); -$icon-share-c-native-adr_16: char-from-code("fab4"); -$icon-share-c-native-adr_24: char-from-code("fab5"); -$icon-share-c-native-ios_10: char-from-code("fab6"); -$icon-share-c-native-ios_12: char-from-code("fab7"); -$icon-share-c-native-ios_14: char-from-code("fab8"); -$icon-share-c-native-ios_16: char-from-code("fab9"); -$icon-share-c-native-ios_20: char-from-code("faba"); -$icon-share-c-native-ios_28: char-from-code("fabb"); -$icon-share-c-native-iph_10: char-from-code("fabc"); -$icon-share-c-native-iph_12: char-from-code("fabd"); -$icon-share-c-native-iph_14: char-from-code("fabe"); -$icon-share-c-native-iph_16: char-from-code("fabf"); -$icon-share-c-native-iph_20: char-from-code("fac0"); -$icon-share-c-native-iph_24: char-from-code("fac1"); -$icon-share-c-native-iph_28: char-from-code("fac2"); -$icon-share-screen_10: char-from-code("fac3"); -$icon-share-screen_12: char-from-code("fac4"); -$icon-share-screen_120: char-from-code("fac5"); -$icon-share-screen_124: char-from-code("fac6"); -$icon-share-screen_14: char-from-code("fac7"); -$icon-share-screen_16: char-from-code("fac8"); -$icon-share-screen_18: char-from-code("fac9"); -$icon-share-screen_20: char-from-code("faca"); -$icon-share-screen_24: char-from-code("facb"); -$icon-share-screen_26: char-from-code("facc"); -$icon-share-screen_28: char-from-code("facd"); -$icon-share-screen_32: char-from-code("face"); -$icon-share-screen_36: char-from-code("facf"); -$icon-share-screen_48: char-from-code("fad0"); -$icon-share-screen_56: char-from-code("fad1"); -$icon-share-screen_8: char-from-code("fad2"); -$icon-share-screen-active_14: char-from-code("fad3"); -$icon-share-screen-active_24: char-from-code("fad4"); -$icon-share-screen-presence_12: char-from-code("fad5"); -$icon-share-screen-presence_14: char-from-code("fad6"); -$icon-share-screen-presence_28: char-from-code("fad7"); -$icon-share-screen-presence_8: char-from-code("fad8"); -$icon-share-screen-presence-stroke_12: char-from-code("fad9"); -$icon-share-screen-presence-stroke_14: char-from-code("fada"); -$icon-share-screen-presence-stroke_16: char-from-code("fadb"); -$icon-share-screen-presence-stroke_26: char-from-code("fadc"); -$icon-share-screen-presence-stroke_30: char-from-code("fadd"); -$icon-share-space_12: char-from-code("fade"); -$icon-share-space_14: char-from-code("fadf"); -$icon-share-space_18: char-from-code("fae0"); -$icon-share-space_20: char-from-code("fae1"); -$icon-share-space_24: char-from-code("fae2"); -$icon-shield_12: char-from-code("fae3"); -$icon-shield_14: char-from-code("fae4"); -$icon-shield_20: char-from-code("fae5"); -$icon-shield_24: char-from-code("fae6"); -$icon-show_12: char-from-code("fae7"); -$icon-show_16: char-from-code("fae8"); -$icon-show_20: char-from-code("fae9"); -$icon-show_24: char-from-code("faea"); -$icon-side-by-side-active_24: char-from-code("faeb"); -$icon-sign-in_16: char-from-code("faec"); -$icon-sign-in_20: char-from-code("faed"); -$icon-sign-in_24: char-from-code("faee"); -$icon-sign-in-forced_16: char-from-code("faef"); -$icon-sign-in-forced_24: char-from-code("faf0"); -$icon-sign-out_10: char-from-code("faf1"); -$icon-sign-out_12: char-from-code("faf2"); -$icon-sign-out_16: char-from-code("faf3"); -$icon-sign-out_20: char-from-code("faf4"); -$icon-sign-out_24: char-from-code("faf5"); -$icon-signal-0_16: char-from-code("faf6"); -$icon-signal-100_12: char-from-code("faf7"); -$icon-signal-100_16: char-from-code("faf8"); -$icon-signal-25_16: char-from-code("faf9"); -$icon-signal-50_16: char-from-code("fafa"); -$icon-signal-75_16: char-from-code("fafb"); -$icon-single-number-reach_12: char-from-code("fafc"); -$icon-single-number-reach_14: char-from-code("fafd"); -$icon-single-number-reach_16: char-from-code("fafe"); -$icon-single-number-reach_20: char-from-code("faff"); -$icon-skip_10: char-from-code("fb00"); -$icon-skip_16: char-from-code("fb01"); -$icon-skip_24: char-from-code("fb02"); -$icon-skip-bw_16: char-from-code("fb03"); -$icon-skip-bw_24: char-from-code("fb04"); -$icon-skip-fw_16: char-from-code("fb05"); -$icon-skip-fw_24: char-from-code("fb06"); -$icon-sms_12: char-from-code("fb07"); -$icon-sms_16: char-from-code("fb08"); -$icon-sort-down_16: char-from-code("fb09"); -$icon-sort-down_20: char-from-code("fb0a"); -$icon-sort-down_24: char-from-code("fb0b"); -$icon-sort-up_20: char-from-code("fb0c"); -$icon-sort-up_24: char-from-code("fb0d"); -$icon-space_12: char-from-code("fb0e"); -$icon-space_16: char-from-code("fb0f"); -$icon-spark_16: char-from-code("fb10"); -$icon-spark-board_12: char-from-code("fb11"); -$icon-spark-board_14: char-from-code("fb12"); -$icon-spark-board_16: char-from-code("fb13"); -$icon-spark-board_20: char-from-code("fb14"); -$icon-spark-board_24: char-from-code("fb15"); -$icon-spark-board_28: char-from-code("fb16"); -$icon-spark-board_32: char-from-code("fb17"); -$icon-spark-board_48: char-from-code("fb18"); -$icon-spark-quad-camera_16: char-from-code("fb19"); -$icon-spark-quad-camera_20: char-from-code("fb1a"); -$icon-spark-room-kit_16: char-from-code("fb1b"); -$icon-spark-room-kit_20: char-from-code("fb1c"); -$icon-spark-room-kit-plus_16: char-from-code("fb1d"); -$icon-spark-room-kit-plus_20: char-from-code("fb1e"); -$icon-spark-share_16: char-from-code("fb1f"); -$icon-spark-share_20: char-from-code("fb20"); -$icon-spark-voice_16: char-from-code("fb21"); -$icon-spark-voice_20: char-from-code("fb22"); -$icon-speaker_12: char-from-code("fb23"); -$icon-speaker_16: char-from-code("fb24"); -$icon-speaker_20: char-from-code("fb25"); -$icon-speaker_24: char-from-code("fb26"); -$icon-speaker_28: char-from-code("fb27"); -$icon-speaker-bluetooth_16: char-from-code("fb28"); -$icon-speaker-disconnected_12: char-from-code("fb29"); -$icon-speaker-disconnected_14: char-from-code("fb2a"); -$icon-speaker-disconnected_16: char-from-code("fb2b"); -$icon-speaker-disconnected_20: char-from-code("fb2c"); -$icon-speaker-disconnected_24: char-from-code("fb2d"); -$icon-speaker-disconnected_28: char-from-code("fb2e"); -$icon-speaker-disconnected_36: char-from-code("fb2f"); -$icon-speaker-line-out-left_16: char-from-code("fb30"); -$icon-speaker-line-out-right_16: char-from-code("fb31"); -$icon-speaker-muted_12: char-from-code("fb32"); -$icon-speaker-muted_14: char-from-code("fb33"); -$icon-speaker-muted_16: char-from-code("fb34"); -$icon-speaker-muted_24: char-from-code("fb35"); -$icon-speaker-muted_28: char-from-code("fb36"); -$icon-speaker-muted_32: char-from-code("fb37"); -$icon-speaker-off_16: char-from-code("fb38"); -$icon-speaker-off_24: char-from-code("fb39"); -$icon-speaker-off_28: char-from-code("fb3a"); -$icon-speaker-turn-down_16: char-from-code("fb3b"); -$icon-speaker-turn-up_16: char-from-code("fb3c"); -$icon-spinner_12: char-from-code("fb3d"); -$icon-spinner_14: char-from-code("fb3e"); -$icon-spinner_16: char-from-code("fb3f"); -$icon-spinner_18: char-from-code("fb40"); -$icon-spinner_20: char-from-code("fb41"); -$icon-spinner_24: char-from-code("fb42"); -$icon-spinner_28: char-from-code("fb43"); -$icon-spinner_32: char-from-code("fb44"); -$icon-spinner_36: char-from-code("fb45"); -$icon-spinner_40: char-from-code("fb46"); -$icon-spinner_48: char-from-code("fb47"); -$icon-spinner_56: char-from-code("fb48"); -$icon-spinner_72: char-from-code("fb49"); -$icon-spinner_8: char-from-code("fb4a"); -$icon-spinner_80: char-from-code("fb4b"); -$icon-spinner_90: char-from-code("fb4c"); -$icon-spreadsheet_16: char-from-code("fb4d"); -$icon-stacked-area-100-chart_16: char-from-code("fb4e"); -$icon-stacked-area-chart_16: char-from-code("fb4f"); -$icon-stacked-bar-100-chart_16: char-from-code("fb50"); -$icon-stacked-bar-chart_16: char-from-code("fb51"); -$icon-start-chat_20: char-from-code("fb52"); -$icon-start-chat_24: char-from-code("fb53"); -$icon-stickers_16: char-from-code("fb54"); -$icon-stickers_24: char-from-code("fb55"); -$icon-stickies_12: char-from-code("fb56"); -$icon-stickies_16: char-from-code("fb57"); -$icon-stickies_24: char-from-code("fb58"); -$icon-stop_10: char-from-code("fb59"); -$icon-stop_12: char-from-code("fb5a"); -$icon-stop_16: char-from-code("fb5b"); -$icon-stop_20: char-from-code("fb5c"); -$icon-stop_24: char-from-code("fb5d"); -$icon-stop-circle_12: char-from-code("fb5e"); -$icon-stop-circle_16: char-from-code("fb5f"); -$icon-stop-circle_20: char-from-code("fb60"); -$icon-stop-circle_24: char-from-code("fb61"); -$icon-stop-content-share_20: char-from-code("fb62"); -$icon-stored-info_12: char-from-code("fb63"); -$icon-stored-info_16: char-from-code("fb64"); -$icon-stored-info_20: char-from-code("fb65"); -$icon-stored-info_24: char-from-code("fb66"); -$icon-stored-info-active_12: char-from-code("fb67"); -$icon-stored-info-active_16: char-from-code("fb68"); -$icon-stored-info-active_20: char-from-code("fb69"); -$icon-stored-info-active_24: char-from-code("fb6a"); -$icon-streaming_16: char-from-code("fb6b"); -$icon-streaming_20: char-from-code("fb6c"); -$icon-streaming_24: char-from-code("fb6d"); -$icon-subscribe_16: char-from-code("fb6e"); -$icon-subscript_12: char-from-code("fb6f"); -$icon-subscript_16: char-from-code("fb70"); -$icon-superscript_12: char-from-code("fb71"); -$icon-superscript_16: char-from-code("fb72"); -$icon-swift_16: char-from-code("fb73"); -$icon-sx10_16: char-from-code("fb74"); -$icon-sx10_20: char-from-code("fb75"); -$icon-sx20_16: char-from-code("fb76"); -$icon-sx20_20: char-from-code("fb77"); -$icon-sx80-codec_16: char-from-code("fb78"); -$icon-sx80-codec_20: char-from-code("fb79"); -$icon-tablet_12: char-from-code("fb7a"); -$icon-tablet_16: char-from-code("fb7b"); -$icon-tablet_24: char-from-code("fb7c"); -$icon-tabs_16: char-from-code("fb7d"); -$icon-tabs_24: char-from-code("fb7e"); -$icon-tag_12: char-from-code("fb7f"); -$icon-tag_16: char-from-code("fb80"); -$icon-tag_20: char-from-code("fb81"); -$icon-tap_20: char-from-code("fb82"); -$icon-tasks_10: char-from-code("fb83"); -$icon-tasks_12: char-from-code("fb84"); -$icon-tasks_14: char-from-code("fb85"); -$icon-tasks_16: char-from-code("fb86"); -$icon-tasks_18: char-from-code("fb87"); -$icon-tasks_20: char-from-code("fb88"); -$icon-tasks_24: char-from-code("fb89"); -$icon-tasks_26: char-from-code("fb8a"); -$icon-tasks_28: char-from-code("fb8b"); -$icon-tasks_32: char-from-code("fb8c"); -$icon-tasks_36: char-from-code("fb8d"); -$icon-tasks_8: char-from-code("fb8e"); -$icon-team_12: char-from-code("fb8f"); -$icon-team_14: char-from-code("fb90"); -$icon-team_16: char-from-code("fb91"); -$icon-team_18: char-from-code("fb92"); -$icon-team_20: char-from-code("fb93"); -$icon-team_24: char-from-code("fb94"); -$icon-team_32: char-from-code("fb95"); -$icon-team-active_12: char-from-code("fb96"); -$icon-team-active_14: char-from-code("fb97"); -$icon-team-active_16: char-from-code("fb98"); -$icon-team-active_18: char-from-code("fb99"); -$icon-team-active_20: char-from-code("fb9a"); -$icon-team-active_24: char-from-code("fb9b"); -$icon-team-active_32: char-from-code("fb9c"); -$icon-team-new_24: char-from-code("fb9d"); -$icon-telepresence_12: char-from-code("fb9e"); -$icon-telepresence_14: char-from-code("fb9f"); -$icon-telepresence_16: char-from-code("fba0"); -$icon-telepresence_18: char-from-code("fba1"); -$icon-telepresence_20: char-from-code("fba2"); -$icon-telepresence_24: char-from-code("fba3"); -$icon-telepresence_64: char-from-code("fba4"); -$icon-telepresence-alert_12: char-from-code("fba5"); -$icon-telepresence-ix5000_16: char-from-code("fba6"); -$icon-telepresence-ix5000_20: char-from-code("fba7"); -$icon-telepresence-muted_12: char-from-code("fba8"); -$icon-telepresence-muted_64: char-from-code("fba9"); -$icon-telepresence-muted-alert_12: char-from-code("fbaa"); -$icon-telepresence-private_12: char-from-code("fbab"); -$icon-temperature_14: char-from-code("fbac"); -$icon-text_10: char-from-code("fbad"); -$icon-text_12: char-from-code("fbae"); -$icon-text_16: char-from-code("fbaf"); -$icon-text-align-left_16: char-from-code("fbb0"); -$icon-text-align-right_16: char-from-code("fbb1"); -$icon-text-blockquote_12: char-from-code("fbb2"); -$icon-text-blockquote_16: char-from-code("fbb3"); -$icon-text-blockquote_18: char-from-code("fbb4"); -$icon-text-blockquote_20: char-from-code("fbb5"); -$icon-text-blockquote_8: char-from-code("fbb6"); -$icon-text-bold_12: char-from-code("fbb7"); -$icon-text-bold_16: char-from-code("fbb8"); -$icon-text-bold_24: char-from-code("fbb9"); -$icon-text-code-block_12: char-from-code("fbba"); -$icon-text-code-block_16: char-from-code("fbbb"); -$icon-text-code-block_24: char-from-code("fbbc"); -$icon-text-code-inline_12: char-from-code("fbbd"); -$icon-text-code-inline_16: char-from-code("fbbe"); -$icon-text-color_12: char-from-code("fbbf"); -$icon-text-color_16: char-from-code("fbc0"); -$icon-text-format_10: char-from-code("fbc1"); -$icon-text-format_12: char-from-code("fbc2"); -$icon-text-format_16: char-from-code("fbc3"); -$icon-text-format_20: char-from-code("fbc4"); -$icon-text-format_24: char-from-code("fbc5"); -$icon-text-format_8: char-from-code("fbc6"); -$icon-text-heading-1_12: char-from-code("fbc7"); -$icon-text-heading-1_16: char-from-code("fbc8"); -$icon-text-heading-2_12: char-from-code("fbc9"); -$icon-text-heading-2_16: char-from-code("fbca"); -$icon-text-heading-3_12: char-from-code("fbcb"); -$icon-text-heading-3_16: char-from-code("fbcc"); -$icon-text-highlight_12: char-from-code("fbcd"); -$icon-text-highlight_16: char-from-code("fbce"); -$icon-text-indent-decrease_12: char-from-code("fbcf"); -$icon-text-indent-increase_12: char-from-code("fbd0"); -$icon-text-italic_12: char-from-code("fbd1"); -$icon-text-italic_16: char-from-code("fbd2"); -$icon-text-italic_24: char-from-code("fbd3"); -$icon-text-list-bulleted_10: char-from-code("fbd4"); -$icon-text-list-bulleted_12: char-from-code("fbd5"); -$icon-text-list-bulleted_16: char-from-code("fbd6"); -$icon-text-list-bulleted_24: char-from-code("fbd7"); -$icon-text-list-bulleted_8: char-from-code("fbd8"); -$icon-text-list-numbered_12: char-from-code("fbd9"); -$icon-text-list-numbered_16: char-from-code("fbda"); -$icon-text-list-numbered_24: char-from-code("fbdb"); -$icon-text-list-numbered_36: char-from-code("fbdc"); -$icon-text-list-numbered_40: char-from-code("fbdd"); -$icon-text-strikethrough_12: char-from-code("fbde"); -$icon-text-strikethrough_16: char-from-code("fbdf"); -$icon-text-table_12: char-from-code("fbe0"); -$icon-text-table_16: char-from-code("fbe1"); -$icon-text-underline_12: char-from-code("fbe2"); -$icon-text-underline_16: char-from-code("fbe3"); -$icon-text-underline_24: char-from-code("fbe4"); -$icon-too-fast_12: char-from-code("fbe5"); -$icon-too-fast_16: char-from-code("fbe6"); -$icon-too-slow_12: char-from-code("fbe7"); -$icon-too-slow_16: char-from-code("fbe8"); -$icon-tools_16: char-from-code("fbe9"); -$icon-tools_20: char-from-code("fbea"); -$icon-tools_24: char-from-code("fbeb"); -$icon-tools_28: char-from-code("fbec"); -$icon-tools_32: char-from-code("fbed"); -$icon-touch_16: char-from-code("fbee"); -$icon-touch10_24: char-from-code("fbef"); -$icon-transcript_16: char-from-code("fbf0"); -$icon-transcript_20: char-from-code("fbf1"); -$icon-trending_10: char-from-code("fbf2"); -$icon-twitter_12: char-from-code("fbf3"); -$icon-twitter_16: char-from-code("fbf4"); -$icon-twitter-circle_24: char-from-code("fbf5"); -$icon-twitter-circle_32: char-from-code("fbf6"); -$icon-twitter-circle_40: char-from-code("fbf7"); -$icon-ucm-cloud_10: char-from-code("fbf8"); -$icon-ucm-cloud_16: char-from-code("fbf9"); -$icon-ucm-cloud_24: char-from-code("fbfa"); -$icon-ucm-cloud_32: char-from-code("fbfb"); -$icon-undo_12: char-from-code("fbfc"); -$icon-undo_14: char-from-code("fbfd"); -$icon-undo_16: char-from-code("fbfe"); -$icon-undo_24: char-from-code("fbff"); -$icon-unlink_20: char-from-code("fc00"); -$icon-unread-badge_10: char-from-code("fc01"); -$icon-unread-badge_12: char-from-code("fc02"); -$icon-unread-badge_16: char-from-code("fc03"); -$icon-unread-badge_8: char-from-code("fc04"); -$icon-unsecure_12: char-from-code("fc05"); -$icon-unsecure_14: char-from-code("fc06"); -$icon-unsecure_16: char-from-code("fc07"); -$icon-unsecure_24: char-from-code("fc08"); -$icon-unsecure_28: char-from-code("fc09"); -$icon-unsorted_10: char-from-code("fc0a"); -$icon-unsorted_16: char-from-code("fc0b"); -$icon-unsorted_24: char-from-code("fc0c"); -$icon-update-file-share_12: char-from-code("fc0d"); -$icon-update-file-share_16: char-from-code("fc0e"); -$icon-update-file-share_24: char-from-code("fc0f"); -$icon-upgrade_20: char-from-code("fc10"); -$icon-upload_12: char-from-code("fc11"); -$icon-upload_130: char-from-code("fc12"); -$icon-upload_14: char-from-code("fc13"); -$icon-upload_16: char-from-code("fc14"); -$icon-upload_18: char-from-code("fc15"); -$icon-upload_20: char-from-code("fc16"); -$icon-upload_24: char-from-code("fc17"); -$icon-upload_28: char-from-code("fc18"); -$icon-upload_32: char-from-code("fc19"); -$icon-upload_36: char-from-code("fc1a"); -$icon-usb_16: char-from-code("fc1b"); -$icon-user_16: char-from-code("fc1c"); -$icon-user_20: char-from-code("fc1d"); -$icon-user_24: char-from-code("fc1e"); -$icon-user_56: char-from-code("fc1f"); -$icon-vector: char-from-code("fc20"); -$icon-video-effect_12: char-from-code("fc21"); -$icon-video-effect_16: char-from-code("fc22"); -$icon-video-effect_20: char-from-code("fc23"); -$icon-video-layout_12: char-from-code("fc24"); -$icon-video-layout_16: char-from-code("fc25"); -$icon-video-layout-auto_12: char-from-code("fc26"); -$icon-video-layout-auto_16: char-from-code("fc27"); -$icon-video-layout-auto_20: char-from-code("fc28"); -$icon-video-layout-auto_24: char-from-code("fc29"); -$icon-video-layout-equal_12: char-from-code("fc2a"); -$icon-video-layout-equal_14: char-from-code("fc2b"); -$icon-video-layout-equal_16: char-from-code("fc2c"); -$icon-video-layout-equal_20: char-from-code("fc2d"); -$icon-video-layout-equal_24: char-from-code("fc2e"); -$icon-video-layout-equal_28: char-from-code("fc2f"); -$icon-video-layout-equal-filled_24: char-from-code("fc30"); -$icon-video-layout-overlay_12: char-from-code("fc31"); -$icon-video-layout-overlay_16: char-from-code("fc32"); -$icon-video-layout-overlay_20: char-from-code("fc33"); -$icon-video-layout-overlay_24: char-from-code("fc34"); -$icon-video-layout-prominent_12: char-from-code("fc35"); -$icon-video-layout-prominent_16: char-from-code("fc36"); -$icon-video-layout-prominent_20: char-from-code("fc37"); -$icon-video-layout-prominent_24: char-from-code("fc38"); -$icon-video-layout-share-dominant_12: char-from-code("fc39"); -$icon-video-layout-share-dominant_16: char-from-code("fc3a"); -$icon-video-layout-share-dominant_20: char-from-code("fc3b"); -$icon-video-layout-share-dominant_24: char-from-code("fc3c"); -$icon-video-layout-single_12: char-from-code("fc3d"); -$icon-video-layout-single_16: char-from-code("fc3e"); -$icon-video-layout-single_20: char-from-code("fc3f"); -$icon-video-layout-single_28: char-from-code("fc40"); -$icon-video-layout-stack_12: char-from-code("fc41"); -$icon-video-layout-stack_16: char-from-code("fc42"); -$icon-video-layout-stack_20: char-from-code("fc43"); -$icon-video-layout-stack_24: char-from-code("fc44"); -$icon-video-layout-stack_28: char-from-code("fc45"); -$icon-video-layout-stack-filled_24: char-from-code("fc46"); -$icon-video-layout-video-dominant_12: char-from-code("fc47"); -$icon-video-layout-video-dominant_16: char-from-code("fc48"); -$icon-video-layout-video-dominant_20: char-from-code("fc49"); -$icon-video-layout-video-dominant_24: char-from-code("fc4a"); -$icon-view-all_12: char-from-code("fc4b"); -$icon-view-all_14: char-from-code("fc4c"); -$icon-view-feed-multiple_16: char-from-code("fc4d"); -$icon-view-feed-panel_16: char-from-code("fc4e"); -$icon-view-feed-single_16: char-from-code("fc4f"); -$icon-view-list_10: char-from-code("fc50"); -$icon-view-list_12: char-from-code("fc51"); -$icon-view-list_14: char-from-code("fc52"); -$icon-view-list_16: char-from-code("fc53"); -$icon-view-list_20: char-from-code("fc54"); -$icon-view-list_24: char-from-code("fc55"); -$icon-view-list_28: char-from-code("fc56"); -$icon-view-list-circle_100: char-from-code("fc57"); -$icon-view-mixed_12: char-from-code("fc58"); -$icon-view-stack_12: char-from-code("fc59"); -$icon-view-stack_14: char-from-code("fc5a"); -$icon-view-stack_20: char-from-code("fc5b"); -$icon-view-stack_24: char-from-code("fc5c"); -$icon-view-thumbnail_12: char-from-code("fc5d"); -$icon-view-thumbnail_14: char-from-code("fc5e"); -$icon-view-thumbnail_16: char-from-code("fc5f"); -$icon-view-thumbnail_20: char-from-code("fc60"); -$icon-view-thumbnail_24: char-from-code("fc61"); -$icon-voice_20: char-from-code("fc62"); -$icon-voicemail_10: char-from-code("fc63"); -$icon-voicemail_14: char-from-code("fc64"); -$icon-voicemail_16: char-from-code("fc65"); -$icon-voicemail_18: char-from-code("fc66"); -$icon-voicemail_20: char-from-code("fc67"); -$icon-voicemail_22: char-from-code("fc68"); -$icon-voicemail_24: char-from-code("fc69"); -$icon-voicemail_28: char-from-code("fc6a"); -$icon-voicemail_8: char-from-code("fc6b"); -$icon-voicemail-active_12: char-from-code("fc6c"); -$icon-voicemail-active_14: char-from-code("fc6d"); -$icon-voicemail-active_16: char-from-code("fc6e"); -$icon-voicemail-active_18: char-from-code("fc6f"); -$icon-voicemail-active_20: char-from-code("fc70"); -$icon-voicemail-active_22: char-from-code("fc71"); -$icon-voicemail-active_24: char-from-code("fc72"); -$icon-voicemail-active_28: char-from-code("fc73"); -$icon-wallpaper_16: char-from-code("fc74"); -$icon-wallpaper_20: char-from-code("fc75"); -$icon-wallpaper_24: char-from-code("fc76"); -$icon-wallpaper_28: char-from-code("fc77"); -$icon-wallpaper_32: char-from-code("fc78"); -$icon-warning_100: char-from-code("fc79"); -$icon-warning_12: char-from-code("fc7a"); -$icon-warning_14: char-from-code("fc7b"); -$icon-warning_16: char-from-code("fc7c"); -$icon-warning_20: char-from-code("fc7d"); -$icon-warning_24: char-from-code("fc7e"); -$icon-warning_28: char-from-code("fc7f"); -$icon-warning_32: char-from-code("fc80"); -$icon-warning_40: char-from-code("fc81"); -$icon-warning_44: char-from-code("fc82"); -$icon-warning_56: char-from-code("fc83"); -$icon-warning_64: char-from-code("fc84"); -$icon-warning_72: char-from-code("fc85"); -$icon-warning-active_12: char-from-code("fc86"); -$icon-warning-active_16: char-from-code("fc87"); -$icon-waveform_20: char-from-code("fc88"); -$icon-web-sharing_16: char-from-code("fc89"); -$icon-web-sharing_24: char-from-code("fc8a"); -$icon-webex_10: char-from-code("fc8b"); -$icon-webex_16: char-from-code("fc8c"); -$icon-webex_24: char-from-code("fc8d"); -$icon-webex_48: char-from-code("fc8e"); -$icon-webex-board_12: char-from-code("fc8f"); -$icon-webex-board_14: char-from-code("fc90"); -$icon-webex-board_16: char-from-code("fc91"); -$icon-webex-board_20: char-from-code("fc92"); -$icon-webex-board_24: char-from-code("fc93"); -$icon-webex-board_28: char-from-code("fc94"); -$icon-webex-board_32: char-from-code("fc95"); -$icon-webex-board_48: char-from-code("fc96"); -$icon-webex-calling_10: char-from-code("fc97"); -$icon-webex-calling_12: char-from-code("fc98"); -$icon-webex-calling_16: char-from-code("fc99"); -$icon-webex-calling_18: char-from-code("fc9a"); -$icon-webex-calling_20: char-from-code("fc9b"); -$icon-webex-calling_24: char-from-code("fc9c"); -$icon-webex-codec-plus_16: char-from-code("fc9d"); -$icon-webex-codec-plus_20: char-from-code("fc9e"); -$icon-webex-community_20: char-from-code("fc9f"); -$icon-webex-desk-camera_20: char-from-code("fca0"); -$icon-webex-instant-meeting_12: char-from-code("fca1"); -$icon-webex-instant-meeting_14: char-from-code("fca2"); -$icon-webex-instant-meeting_16: char-from-code("fca3"); -$icon-webex-instant-meeting_20: char-from-code("fca4"); -$icon-webex-instant-meeting_24: char-from-code("fca5"); -$icon-webex-meetings_10: char-from-code("fca6"); -$icon-webex-meetings_12: char-from-code("fca7"); -$icon-webex-meetings_14: char-from-code("fca8"); -$icon-webex-meetings_16: char-from-code("fca9"); -$icon-webex-meetings_20: char-from-code("fcaa"); -$icon-webex-meetings_24: char-from-code("fcab"); -$icon-webex-meetings_48: char-from-code("fcac"); -$icon-webex-quad-camera_16: char-from-code("fcad"); -$icon-webex-quad-camera_20: char-from-code("fcae"); -$icon-webex-room-kit_16: char-from-code("fcaf"); -$icon-webex-room-kit_20: char-from-code("fcb0"); -$icon-webex-room-kit-plus_16: char-from-code("fcb1"); -$icon-webex-room-kit-plus_20: char-from-code("fcb2"); -$icon-webex-share_12: char-from-code("fcb3"); -$icon-webex-share_14: char-from-code("fcb4"); -$icon-webex-share_16: char-from-code("fcb5"); -$icon-webex-share_20: char-from-code("fcb6"); -$icon-webex-teams_10: char-from-code("fcb7"); -$icon-webex-teams_12: char-from-code("fcb8"); -$icon-webex-teams_14: char-from-code("fcb9"); -$icon-webex-teams_16: char-from-code("fcba"); -$icon-webex-teams_18: char-from-code("fcbb"); -$icon-webex-teams_20: char-from-code("fcbc"); -$icon-webex-voice_16: char-from-code("fcbd"); -$icon-webex-voice_20: char-from-code("fcbe"); -$icon-webpop_12: char-from-code("fcbf"); -$icon-webpop_16: char-from-code("fcc0"); -$icon-webpop_20: char-from-code("fcc1"); -$icon-webpop_24: char-from-code("fcc2"); -$icon-whatsApp_12: char-from-code("fcc3"); -$icon-whatsApp_16: char-from-code("fcc4"); -$icon-whiteboard_10: char-from-code("fcc5"); -$icon-whiteboard_12: char-from-code("fcc6"); -$icon-whiteboard_14: char-from-code("fcc7"); -$icon-whiteboard_16: char-from-code("fcc8"); -$icon-whiteboard_20: char-from-code("fcc9"); -$icon-whiteboard_24: char-from-code("fcca"); -$icon-whiteboard_26: char-from-code("fccb"); -$icon-whiteboard_28: char-from-code("fccc"); -$icon-whiteboard_32: char-from-code("fccd"); -$icon-whiteboard_36: char-from-code("fcce"); -$icon-whiteboard_8: char-from-code("fccf"); -$icon-whiteboard-content_16: char-from-code("fcd0"); -$icon-whiteboard-content_24: char-from-code("fcd1"); -$icon-widgets-adr_20: char-from-code("fcd2"); -$icon-wifi_12: char-from-code("fcd3"); -$icon-wifi_16: char-from-code("fcd4"); -$icon-wifi_20: char-from-code("fcd5"); -$icon-wifi_24: char-from-code("fcd6"); -$icon-wifi-error_12: char-from-code("fcd7"); -$icon-wifi-error_16: char-from-code("fcd8"); -$icon-wifi-selected_24: char-from-code("fcd9"); -$icon-wikipedia_16: char-from-code("fcda"); -$icon-window-corner-scrub_16: char-from-code("fcdb"); -$icon-window-vertical-scrub_16: char-from-code("fcdc"); -$icon-youtube-circle_24: char-from-code("fcdd"); -$icon-youtube-circle_32: char-from-code("fcde"); -$icon-youtube-circle_40: char-from-code("fcdf"); -$icon-zoom-in_12: char-from-code("fce0"); -$icon-zoom-in_14: char-from-code("fce1"); -$icon-zoom-in_16: char-from-code("fce2"); -$icon-zoom-in_20: char-from-code("fce3"); -$icon-zoom-out_12: char-from-code("fce4"); -$icon-zoom-out_14: char-from-code("fce5"); -$icon-zoom-out_16: char-from-code("fce6"); -$icon-zoom-out_20: char-from-code("fce7"); - -// Symphony icon mapping -//$icon-alerting: $icon-alerting_16 !default; -$icon-analysis-active: $icon-analysis_16 !default; -$icon-analysis: $icon-analysis_16 !default; -//$icon-animation: $icon-animation_16 !default; -$icon-annotation: $icon-annotation_16 !default; -//$icon-applause: $icon-applause_16 !default; -$icon-application: $icon-application_16 !default; -$icon-applications: $icon-applications_16 !default; -$icon-arrow-back: $icon-arrow-left_16 !default; -$icon-arrow-down: $icon-arrow-down_16 !default; -$icon-arrow-left-tail: $icon-back_16 !default; -$icon-arrow-next: $icon-arrow-right_16 !default; -$icon-arrow-right-tail: $icon-next_16 !default; -$icon-arrow-up: $icon-arrow-up_16 !default; -$icon-at: $icon-mention_16 !default; -$icon-attachment: $icon-attachment_16 !default; -$icon-audio-broadcast: $icon-audio-broadcast_16 !default; -$icon-audio-min: $icon-speaker-off_16 !default; -$icon-audio-plus: $icon-speaker_16 !default; -//$icon-audio-settings: $icon-adjust-audio_16 !default; -$icon-audio: $icon-speaker_16 !default; -$icon-aux-camera: $icon-camera-aux_16 !default; -$icon-back: $icon-back_16 !default; -//$icon-backup-data: $icon-backup-data_16 !default; -$icon-bars: $icon-analysis_16 !default; -//$icon-battery: $icon-battery_16 !default; -$icon-bell-cross: $icon-alert-muted_16 !default; -$icon-bell: $icon-alert_16 !default; -$icon-blocked: $icon-blocked_16 !default; -//$icon-bluetooth: $icon-bluetooth_16 !default; -$icon-bookmark: $icon-bookmark_16 !default; -$icon-bot-four: $icon-bot_36 !default; -$icon-bot-five: $icon-bot_36 !default; -$icon-bot-six: $icon-bot_36 !default; -$icon-brightness: $icon-brightness_16 !default; -$icon-broadcast-message: $icon-broadcast-message_16 !default; -//$icon-broken-image: $icon-broken-file_16 !default; -$icon-browser: $icon-browser_16 !default; -//$icon-bug: $icon-bugs_16 !default; -$icon-cal: $icon-calendar-month_16 !default; -$icon-call-forwarding: $icon-call-forward_16 !default; -$icon-call-handling: $icon-call-handling_16 !default; -//$icon-call-log: $icon-call-log_16 !default; -//$icon-call-rate: $icon-callrate_16 !default; -//$icon-callback: $icon-callback_16 !default; -$icon-calls: $icon-handset_16 !default; -$icon-camera: $icon-camera-photo_16 !default; -$icon-certified: $icon-certified_16 !default; -//$icon-chapters: $icon-chapters_16 !default; -//$icon-charging: $icon-charging_16 !default; -$icon-chat: $icon-chat_16 !default; -$icon-chats: $icon-chat-group_16 !default; -$icon-check-mark-success: $icon-check-circle_24 !default; -$icon-check: $icon-check_16 !default; -$icon-checkbox: $icon-check_16 !default; -$icon-chevron-down: $icon-arrow-down_16 !default; -$icon-chevron-left: $icon-arrow-left_16 !default; -$icon-chevron-right: $icon-arrow-right_16 !default; -$icon-chevron-up: $icon-arrow-up_16 !default; -$icon-circle-arrow-down: $icon-arrow-circle-down_16 !default; -$icon-circle-arrows-circular: $icon-refresh_16 !default; -$icon-circle-arrows-cross: $icon-pto_16 !default; -$icon-circle-calendar: $icon-calendar-month_16 !default; -$icon-circle-call: $icon-handset_16 !default; -$icon-circle-check-mark-success: $icon-check-circle_24 !default; -$icon-circle-check: $icon-check-circle_24 !default; -$icon-circle-clock-hands: $icon-recents_16 !default; -$icon-circle-clock: $icon-recents_16 !default; -$icon-circle-comp-negative: $icon-error_16 !default; -$icon-circle-computer-blank: $icon-laptop_16 !default; -$icon-circle-contact-centre: $icon-headset_16 !default; -$icon-circle-data: $icon-server_16 !default; -$icon-circle-download: $icon-download_16 !default; -$icon-circle-email: $icon-email-read_16 !default; -$icon-circle-flag: $icon-flag-circle_16 !default; -$icon-circle-globe: $icon-language_16 !default; -$icon-circle-group: $icon-chat-group_16 !default; -$icon-circle-hg-circular: $icon-recurring_16 !default; -$icon-circle-links: $icon-link_16 !default; -$icon-circle-location: $icon-location_16 !default; -$icon-circle-lock: $icon-secure_16 !default; -$icon-circle-message: $icon-chat_16 !default; -$icon-circle-more: $icon-more-circle_16 !default; -$icon-circle-question: $icon-help-circle_16 !default; -$icon-circle-star: $icon-favorite_16 !default; -$icon-circle-telepresence: $icon-endpoint_16 !default; -$icon-circle-unlock: $icon-unsecure_16 !default; -$icon-circle-upload: $icon-upload_16 !default; -$icon-circle-user: $icon-people-circle_16 !default; -$icon-circle-webex: $icon-webex_16 !default; -$icon-circle-world: $icon-headset_16 !default; -$icon-circle: $icon-unread-badge_16 !default; -$icon-cisco-logo: $icon-cisco-logo !default; -$icon-clipboard: $icon-notepad_16 !default; -$icon-clock: $icon-recents_16 !default; -$icon-close-keyboard: $icon-keyboard-close_16 !default; -$icon-close: $icon-cancel_16 !default; -$icon-cloud-active: $icon-cloud_16 !default; -$icon-cloud: $icon-cloud_16 !default; -$icon-cog: $icon-settings_16 !default; -//$icon-comment: $icon-comment_16 !default; -//$icon-community: $icon-community_16 !default; -$icon-company-active: $icon-company_32 !default; -$icon-computer: $icon-computer_16 !default; -$icon-conference: $icon-team_16 !default; -$icon-contact-card: $icon-contact-card_16 !default; -$icon-contact: $icon-people_16 !default; -$icon-content-share: $icon-export_16 !default; -$icon-convo: $icon-chat-group_16 !default; -$icon-create-page: $icon-document-create_16 !default; -$icon-data-usage: $icon-data-usage_16 !default; -$icon-data: $icon-server_16 !default; -//$icon-dc-power: $icon-power-dc_16 !default; -//$icon-default-app: $icon-default-app_16 !default; -$icon-delete: $icon-backspace_16 !default; -$icon-desk-phone: $icon-deskphone_16 !default; -$icon-devices: $icon-endpoint_16 !default; -$icon-diagnostics: $icon-diagnostics_32 !default; -$icon-dial: $icon-dialpad_16 !default; -$icon-directory: $icon-directory_24 !default; -//$icon-disc: $icon-disc_16 !default; -$icon-display: $icon-display_16 !default; -$icon-do-not-disturb: $icon-blocked_16 !default; -//$icon-document-camera: $icon-document-camera_16 !default; -$icon-document: $icon-document_16 !default; -$icon-download: $icon-download_16 !default; -$icon-edit: $icon-edit_16 !default; -$icon-email: $icon-email_16 !default; -$icon-emoticons: $icon-emoticons_16 !default; -$icon-end-call: $icon-cancel_16 !default; -$icon-endpoint-active: $icon-endpoint_32 !default; -$icon-endpoint: $icon-endpoint_16 !default; -$icon-eraser: $icon-eraser_16 !default; -$icon-error: $icon-error_16 !default; -$icon-ethernet: $icon-ethernet_16 !default; -$icon-exernal-calendar: $icon-calendar-external_16 !default; -$icon-exit-contain: $icon-clear-active_16 !default; -$icon-exit-outline: $icon-clear_16 !default; -$icon-exit: $icon-cancel_16 !default; -$icon-export: $icon-export_16 !default; -$icon-extension-mobility: $icon-extension-mobility_16 !default; -$icon-fbw: $icon-fbw_16 !default; -//$icon-feedback-clear: $icon-feedback-clear_16 !default; -//$icon-feedback-result: $icon-feedback-result_16 !default; -$icon-feedback: $icon-feedback_16 !default; -//$icon-ffw: $icon-ffw_16 !default; -$icon-filter: $icon-filter-circle_20 !default; -$icon-flagged: $icon-flag_16 !default; -$icon-folder: $icon-files_16 !default; -$icon-forced-sign-in: $icon-sign-in-forced_16 !default; -//$icon-forward-to-mobility: $icon-forward-to-mobility_16 !default; -$icon-fullscreen: $icon-fullscreen_16 !default; -//$icon-graph: $icon-graph_16 !default; -$icon-grid-large: $icon-view-thumbnail_16 !default; -$icon-grid-list: $icon-view-list_16 !default; -//$icon-group-call: $icon-call-group_16 !default; -$icon-hamburger-menu: $icon-list-menu_16 !default; -$icon-headset-cross: $icon-headset-muted_16 !default; -$icon-headset: $icon-headset_16 !default; -$icon-help-outline: $icon-help-circle_16 !default; -$icon-help: $icon-help-circle_16 !default; -$icon-home-active: $icon-house_16 !default; -$icon-home: $icon-house_16 !default; -//$icon-hue: $icon-hue_16 !default; -$icon-hunt-group: $icon-hunt-group_16 !default; -$icon-image-contain: $icon-hunt-group_16 !default; -$icon-image: $icon-file-image_24 !default; -$icon-import: $icon-import_16 !default; -//$icon-inbox: $icon-email-inbox_16 !default; -$icon-incoming-call: $icon-call-incoming_16 !default; -$icon-indeterminate: $icon-minus_16 !default; -$icon-info-outline: $icon-info_16 !default; -$icon-info: $icon-info_16 !default; -$icon-information: $icon-info_16 !default; -$icon-instant-meeting: $icon-webex-instant-meeting_16 !default; -//$icon-intercom-duplex-connected: $icon-intercom-duplex_16 !default; -//$icon-intercom-whisper: $icon-intercom-whisper_16 !default; -//$icon-intercom: $icon-intercom_16 !default; -$icon-invite: $icon-email-invite_16 !default; -//$icon-key-expansion-module: $icon-key-expansion-module_16 !default; -$icon-keyboard: $icon-keyboard_16 !default; -$icon-language: $icon-language_16 !default; -$icon-laser-pointer: $icon-laser-pointer_16 !default; -$icon-layout: $icon-layout-side-by-side-vertical_16 !default; -$icon-leave-meeting: $icon-exit-room_16 !default; -$icon-left-arrow: $icon-arrow-left_16 !default; -$icon-lightbulb: $icon-room-lights_16 !default; -$icon-like: $icon-like_16 !default; -$icon-line-out-left: $icon-speaker-line-out-left_16 !default; -$icon-line-out-right: $icon-speaker-line-out-right_16 !default; -$icon-link: $icon-link_16 !default; -$icon-list-menu: $icon-list-menu_16 !default; -$icon-list-view: $icon-view-list_16 !default; -$icon-location-active: $icon-location_28 !default; -$icon-location: $icon-location_28 !default; -$icon-lock: $icon-secure_16 !default; -$icon-locked-speaker: $icon-active-speaker-locked_24 !default; -//$icon-manage-cable: $icon-cables_16 !default; -$icon-maximize: $icon-maximize_16 !default; -$icon-meet-me: $icon-enter-room_16 !default; -$icon-meeting-room: $icon-team_16 !default; -//$icon-merge-call: $icon-call-merge_16 !default; -$icon-message: $icon-chat_16 !default; -$icon-mic-in: $icon-audio-input_16 !default; -//$icon-micro-blog: $icon-micro-blog_16 !default; -$icon-microphone: $icon-microphone_16 !default; -$icon-minimize: $icon-minimize_16 !default; -$icon-minus: $icon-minus_16 !default; -$icon-mobile-phone: $icon-phone-ios_16 !default; -//$icon-mobile-presenter: $icon-mobile-presenter_16 !default; -$icon-month: $icon-calendar-month_16 !default; -$icon-more: $icon-more_16 !default; -$icon-move-page: $icon-document-move_16 !default; -$icon-music: $icon-adjust-audio_24 !default; -$icon-mute: $icon-microphone-muted_16 !default; -$icon-no-signal: $icon-signal-0_16 !default; -$icon-notes: $icon-notes_16 !default; -//$icon-off-hook: $icon-off-hook_16 !default; -//$icon-other-phone: $icon-other-phone_16 !default; -//$icon-outbox: $icon-email-outbox_16 !default; -$icon-outgoing-call: $icon-call-outgoing_16 !default; -$icon-paired-audio: $icon-paired-handset_24 !default; -$icon-paired-call: $icon-paired-camera_24 !default; -//$icon-panel-shift-left: $icon-panel-slide-left_16 !default; -//$icon-panel-shift-right: $icon-panel-slide-right_16 !default; -//$icon-parked: $icon-parked_16 !default; -//$icon-pass-mouse: $icon-pass-mouse_16 !default; -$icon-pause: $icon-pause_16 !default; -$icon-pc: $icon-laptop_16 !default; -$icon-pencil: $icon-edit_16 !default; -$icon-people-active: $icon-people_28 !default; -$icon-persistent-chat: $icon-chat-group_16 !default; -$icon-phone-cross: $icon-handset-muted_16 !default; -$icon-phone: $icon-handset_16 !default; -$icon-picture-in-picture: $icon-picture-in-picture_16 !default; -$icon-pin: $icon-pin_16 !default; -$icon-plan-review: $icon-view-feed-multiple_16 !default; -$icon-play: $icon-play_16 !default; -//$icon-playlist: $icon-playlist_16 !default; -$icon-plugin: $icon-accessories_16 !default; -$icon-plus-circle: $icon-add_16 !default; -$icon-plus: $icon-plus_16 !default; -//$icon-poll: $icon-poll_16 !default; -//$icon-popout: $icon-pop-out_16 !default; -//$icon-popup-dialogue: $icon-pop-up_16 !default; -//$icon-power: $icon-power_16 !default; -$icon-presentation: $icon-presentation_16 !default; -$icon-print: $icon-print_16 !default; -$icon-priority: $icon-priority_16 !default; -$icon-privacy: $icon-private_16 !default; -$icon-private: $icon-private-circle_16 !default; -$icon-proximity-not-connected: $icon-proximity-muted_16 !default; -$icon-proximity: $icon-proximity_16 !default; -$icon-quality: $icon-quality_24 !default; -$icon-question-circle: $icon-help-circle_16 !default; -//$icon-raise-hand: $icon-raise-hand_16 !default; -$icon-read-email: $icon-email-read_16 !default; -$icon-recents: $icon-recents_16 !default; -$icon-record: $icon-record_16 !default; -$icon-redial: $icon-redial_16 !default; -$icon-refresh: $icon-refresh_16 !default; -$icon-remove-contact: $icon-participant-remove_20 !default; -$icon-remove-outline: $icon-remove_16 !default; -$icon-remove: $icon-remove_16 !default; -//$icon-reply-all: $icon-reply-all_16 !default; -$icon-report: $icon-file-text_24 !default; -$icon-reset: $icon-reset_24 !default; -$icon-right-arrow-closed-outline: $icon-arrow-circle-right_16 !default; -$icon-right-arrow-contain: $icon-arrow-circle-right_16 !default; -$icon-right-arrow-contained: $icon-play_16 !default; -$icon-right-arrow-outline: $icon-arrow-circle-right_16 !default; -$icon-right-arrow: $icon-arrow-right_16 !default; -$icon-ringer-settings: $icon-adjust-audio_24 !default; -//$icon-rtprx-rtptx-duplex: $icon-rtprx-rtptx-duplex_16 !default; -//$icon-rtptx: $icon-rtptx_16 !default; -$icon-running-application: $icon-running-application_24 !default; -$icon-save: $icon-save_16 !default; -$icon-schedule-add: $icon-calendar-add_16 !default; -$icon-screen-capture-square: $icon-screenshot_16 !default; -$icon-screen-capture: $icon-screenshot_16 !default; -//$icon-sd: $icon-sd-card_16 !default; -$icon-search: $icon-search_16 !default; -$icon-self-view-alt: $icon-selfview_16 !default; -$icon-self-view: $icon-selfview_16 !default; -$icon-send-email: $icon-send_16 !default; -$icon-send: $icon-send_16 !default; -//$icon-sent: $icon-email-sent_16 !default; -$icon-settings-active: $icon-settings_32 !default; -$icon-settings: $icon-settings_16 !default; -$icon-setup-assistant: $icon-setup-assistant_16 !default; -$icon-share-content: $icon-document-share_16 !default; -$icon-share: $icon-share_16 !default; -$icon-sign-in: $icon-sign-in_16 !default; -$icon-sign-out: $icon-sign-out_16 !default; -$icon-signal-1: $icon-signal-25_16 !default; -$icon-signal-2: $icon-signal-50_16 !default; -$icon-signal-3: $icon-signal-75_16 !default; -$icon-signal-4: $icon-signal-100_16 !default; -$icon-skip-bw: $icon-skip-bw_16 !default; -$icon-skip-fw: $icon-skip-fw_16 !default; -$icon-sliders: $icon-adjust_16 !default; -$icon-sort: $icon-picker_18 !default; -$icon-sound: $icon-audio-broadcast_16 !default; -$icon-space: $icon-space_16 !default; -//$icon-spam: $icon-spam_16 !default; -$icon-spark: $icon-spark_16 !default; -$icon-speaker-cross: $icon-speaker-muted_16 !default; -$icon-speaker: $icon-speaker-off_16 !default; -//$icon-speed-dial: $icon-speed-dial_16 !default; -$icon-star: $icon-favorite_16 !default; -$icon-stop: $icon-stop_16 !default; -$icon-storage: $icon-server_16 !default; -$icon-subscribe: $icon-subscribe_16 !default; -$icon-support: $icon-diagnostics_32 !default; -//$icon-swap-calls: $icon-call-swap_16 !default; -$icon-swap-camera: $icon-camera-photo-swap_16 !default; -$icon-swap-video-camera: $icon-camera-swap_16 !default; -$icon-tables: $icon-picker_18 !default; -$icon-tablet: $icon-tablet_24 !default; -$icon-team-collapsed-view: $icon-video-layout_16 !default; -$icon-text-format: $icon-text-format_16 !default; -$icon-text: $icon-transcript_16 !default; -$icon-three-dots: $icon-more_16 !default; -$icon-thumbnail-view: $icon-view-thumbnail_16 !default; -$icon-time: $icon-recents_16 !default; -//$icon-timeline: $icon-timeline_16 !default; -//$icon-too-fast: $icon-too-fast_16 !default; -//$icon-too-slow: $icon-too-slow_16 !default; -$icon-tools-active: $icon-tools_32 !default; -$icon-tools: $icon-tools_32 !default; -$icon-touch: $icon-touch_16 !default; -$icon-transcript: $icon-transcript_16 !default; -//$icon-transfer-to-mobile: $icon-transfer-to-mobile_16 !default; -$icon-trash: $icon-delete_16 !default; -//$icon-universal-inbox: $icon-email-inbox-universal_16 !default; -$icon-unlock: $icon-unsecure_16 !default; -$icon-upload-contain: $icon-upload_16 !default; -$icon-upload: $icon-upload_16 !default; -$icon-usb: $icon-usb_16 !default; -$icon-user-chat: $icon-chat_16 !default; -$icon-user: $icon-people_16 !default; -//$icon-vibrate: $icon-vibration_16 !default; -$icon-video-cross: $icon-camera-muted_16 !default; -$icon-video-group: $icon-camera-group_16 !default; -$icon-video-layout: $icon-video-layout_16 !default; -$icon-video-settings: $icon-adjust-video_24 !default; -//$icon-video-tips: $icon-video-tips_16 !default; -$icon-video: $icon-camera_16 !default; -$icon-view-feed-dual: $icon-view-feed-panel_16 !default; -$icon-view-feed-multi: $icon-view-feed-multiple_16 !default; -$icon-view-feed-single: $icon-view-feed-single_16 !default; -$icon-view-side-by-side: $icon-layout-side-by-side-horizonal_16 !default; -$icon-view-stacked: $icon-layout-stacked_16 !default; -$icon-voicemail: $icon-voicemail_16 !default; -$icon-volume-cross: $icon-speaker-muted_16 !default; -$icon-wallpaper: $icon-wallpaper_16 !default; -$icon-warning: $icon-warning_16 !default; -//$icon-watchlist: $icon-watchlist_16 !default; -//$icon-way-nav: $icon-4-way-navigation_16 !default; -$icon-web-sharing: $icon-web-sharing_24 !default; -$icon-webex: $icon-webex_16 !default; -$icon-webhook: $icon-webex_16 !default; -$icon-week: $icon-calendar-week_16 !default; -$icon-whiteboard: $icon-spark-board_16 !default; -$icon-wifi: $icon-wifi_16 !default; -$icon-zip: $icon-file-zip_24 !default; -$icon-zoom-in: $icon-zoom-in_16 !default; -$icon-zoom-out: $icon-zoom-out_16 !default; - -@function char-from-code($iso-char) { - @return unquote('"\\#{$iso-char}"'); -} - -$icon-font-name: 'momentum-ui-icons' !default; -$icon-font-path: '~@momentum-ui/icons/fonts' !default; -$icon-css-prefix: icon !default; -$icon-border-color: #D2D5D6 !default; // $md-gray-30 -$icon-inverse-color: #FFFFFF !default; // $md-white-100 -$icon-li-width: 2.14285714em !default; - -$icon-3d-object_16: char-from-code("f101"); -$icon-3d-object_20: char-from-code("f102"); -$icon-3d-object_24: char-from-code("f103"); -$icon-3d-object_56: char-from-code("f104"); -$icon-accessibility_16: char-from-code("f105"); -$icon-accessories_16: char-from-code("f106"); -$icon-accessories_18: char-from-code("f107"); -$icon-accessories_20: char-from-code("f108"); -$icon-accessories_24: char-from-code("f109"); -$icon-accessories_36: char-from-code("f10a"); -$icon-accessories_56: char-from-code("f10b"); -$icon-accessories-active_12: char-from-code("f10c"); -$icon-accessories-active_16: char-from-code("f10d"); -$icon-accessories-active_18: char-from-code("f10e"); -$icon-accessories-active_20: char-from-code("f10f"); -$icon-active-speaker_12: char-from-code("f110"); -$icon-active-speaker_16: char-from-code("f111"); -$icon-active-speaker_24: char-from-code("f112"); -$icon-active-speaker_32: char-from-code("f113"); -$icon-active-speaker_48: char-from-code("f114"); -$icon-active-speaker-alert_12: char-from-code("f115"); -$icon-active-speaker-locked_24: char-from-code("f116"); -$icon-active-speaker-muted_12: char-from-code("f117"); -$icon-active-speaker-muted_16: char-from-code("f118"); -$icon-active-speaker-muted_24: char-from-code("f119"); -$icon-activities_12: char-from-code("f11a"); -$icon-activities_16: char-from-code("f11b"); -$icon-add_10: char-from-code("f11c"); -$icon-add_12: char-from-code("f11d"); -$icon-add_14: char-from-code("f11e"); -$icon-add_16: char-from-code("f11f"); -$icon-add_20: char-from-code("f120"); -$icon-add_24: char-from-code("f121"); -$icon-add-option_12: char-from-code("f122"); -$icon-add-option_14: char-from-code("f123"); -$icon-add-option_16: char-from-code("f124"); -$icon-add-poll_12: char-from-code("f125"); -$icon-add-poll_14: char-from-code("f126"); -$icon-add-question_12: char-from-code("f127"); -$icon-add-question_14: char-from-code("f128"); -$icon-add-question_16: char-from-code("f129"); -$icon-add-video-marker_12: char-from-code("f12a"); -$icon-added-to-space_10: char-from-code("f12b"); -$icon-added-to-space_12: char-from-code("f12c"); -$icon-adjust_12: char-from-code("f12d"); -$icon-adjust_14: char-from-code("f12e"); -$icon-adjust_16: char-from-code("f12f"); -$icon-adjust_20: char-from-code("f130"); -$icon-adjust_24: char-from-code("f131"); -$icon-adjust-audio_12: char-from-code("f132"); -$icon-adjust-audio_14: char-from-code("f133"); -$icon-adjust-audio_16: char-from-code("f134"); -$icon-adjust-audio_18: char-from-code("f135"); -$icon-adjust-audio_20: char-from-code("f136"); -$icon-adjust-audio_24: char-from-code("f137"); -$icon-adjust-audio_28: char-from-code("f138"); -$icon-adjust-microphone_12: char-from-code("f139"); -$icon-adjust-video_14: char-from-code("f13a"); -$icon-adjust-video_16: char-from-code("f13b"); -$icon-adjust-video_24: char-from-code("f13c"); -$icon-admin_12: char-from-code("f13d"); -$icon-admin_14: char-from-code("f13e"); -$icon-admin_16: char-from-code("f13f"); -$icon-admin_24: char-from-code("f140"); -$icon-admin_32: char-from-code("f141"); -$icon-alarm_16: char-from-code("f142"); -$icon-alarm_20: char-from-code("f143"); -$icon-alarm_24: char-from-code("f144"); -$icon-alert_10: char-from-code("f145"); -$icon-alert_12: char-from-code("f146"); -$icon-alert_14: char-from-code("f147"); -$icon-alert_16: char-from-code("f148"); -$icon-alert_18: char-from-code("f149"); -$icon-alert_20: char-from-code("f14a"); -$icon-alert_24: char-from-code("f14b"); -$icon-alert_28: char-from-code("f14c"); -$icon-alert_36: char-from-code("f14d"); -$icon-alert-active_10: char-from-code("f14e"); -$icon-alert-active_12: char-from-code("f14f"); -$icon-alert-active_16: char-from-code("f150"); -$icon-alert-active_18: char-from-code("f151"); -$icon-alert-active_20: char-from-code("f152"); -$icon-alert-active_24: char-from-code("f153"); -$icon-alert-active_36: char-from-code("f154"); -$icon-alert-muted_10: char-from-code("f155"); -$icon-alert-muted_12: char-from-code("f156"); -$icon-alert-muted_14: char-from-code("f157"); -$icon-alert-muted_16: char-from-code("f158"); -$icon-alert-muted_18: char-from-code("f159"); -$icon-alert-muted_20: char-from-code("f15a"); -$icon-alert-muted_24: char-from-code("f15b"); -$icon-alert-muted_28: char-from-code("f15c"); -$icon-alert-muted_36: char-from-code("f15d"); -$icon-alert-muted_8: char-from-code("f15e"); -$icon-alert-muted-active_10: char-from-code("f15f"); -$icon-alert-muted-active_12: char-from-code("f160"); -$icon-alert-muted-active_16: char-from-code("f161"); -$icon-alert-muted-active_18: char-from-code("f162"); -$icon-alert-muted-active_20: char-from-code("f163"); -$icon-alert-muted-active_24: char-from-code("f164"); -$icon-alert-muted-active_36: char-from-code("f165"); -$icon-alert-muted-active_8: char-from-code("f166"); -$icon-allow-to-annotate_16: char-from-code("f167"); -$icon-allow-to-annotate_24: char-from-code("f168"); -$icon-analysis_12: char-from-code("f169"); -$icon-analysis_16: char-from-code("f16a"); -$icon-analysis_20: char-from-code("f16b"); -$icon-analysis_24: char-from-code("f16c"); -$icon-analysis_32: char-from-code("f16d"); -$icon-analysis_36: char-from-code("f16e"); -$icon-analysis_48: char-from-code("f16f"); -$icon-analysis-active_16: char-from-code("f170"); -$icon-analysis-active_20: char-from-code("f171"); -$icon-analysis-active_24: char-from-code("f172"); -$icon-analysis-active_32: char-from-code("f173"); -$icon-analysis-active_36: char-from-code("f174"); -$icon-analysis-active_48: char-from-code("f175"); -$icon-angellist_16: char-from-code("f176"); -$icon-annotation_10: char-from-code("f177"); -$icon-annotation_12: char-from-code("f178"); -$icon-annotation_14: char-from-code("f179"); -$icon-annotation_16: char-from-code("f17a"); -$icon-annotation_18: char-from-code("f17b"); -$icon-annotation_20: char-from-code("f17c"); -$icon-annotation_24: char-from-code("f17d"); -$icon-annotation-legacy_16: char-from-code("f17e"); -$icon-announcement_12: char-from-code("f17f"); -$icon-announcement_14: char-from-code("f180"); -$icon-announcement_16: char-from-code("f181"); -$icon-announcement_20: char-from-code("f182"); -$icon-announcement_72: char-from-code("f183"); -$icon-announcement_8: char-from-code("f184"); -$icon-announcement-active_12: char-from-code("f185"); -$icon-announcement-active_14: char-from-code("f186"); -$icon-announcement-active_16: char-from-code("f187"); -$icon-announcement-active_20: char-from-code("f188"); -$icon-announcement-active_8: char-from-code("f189"); -$icon-announcement-muted_14: char-from-code("f18a"); -$icon-appearance_16: char-from-code("f18b"); -$icon-appearance_20: char-from-code("f18c"); -$icon-applause_12: char-from-code("f18d"); -$icon-applause_16: char-from-code("f18e"); -$icon-application_12: char-from-code("f18f"); -$icon-application_16: char-from-code("f190"); -$icon-application_20: char-from-code("f191"); -$icon-application_24: char-from-code("f192"); -$icon-application_36: char-from-code("f193"); -$icon-application_48: char-from-code("f194"); -$icon-application-panel_16: char-from-code("f195"); -$icon-application-panel_20: char-from-code("f196"); -$icon-applications_16: char-from-code("f197"); -$icon-applications_24: char-from-code("f198"); -$icon-approvals_16: char-from-code("f199"); -$icon-approvals_32: char-from-code("f19a"); -$icon-apps_16: char-from-code("f19b"); -$icon-apps_20: char-from-code("f19c"); -$icon-apps_24: char-from-code("f19d"); -$icon-apps_28: char-from-code("f19e"); -$icon-apps-active_16: char-from-code("f19f"); -$icon-apps-active_20: char-from-code("f1a0"); -$icon-apps-active_24: char-from-code("f1a1"); -$icon-apps-active_28: char-from-code("f1a2"); -$icon-archive_10: char-from-code("f1a3"); -$icon-archive_12: char-from-code("f1a4"); -$icon-archive_14: char-from-code("f1a5"); -$icon-archive_16: char-from-code("f1a6"); -$icon-archive_20: char-from-code("f1a7"); -$icon-archive_8: char-from-code("f1a8"); -$icon-area-chart_16: char-from-code("f1a9"); -$icon-area-selector_16: char-from-code("f1aa"); -$icon-area-selector_20: char-from-code("f1ab"); -$icon-arrow-circle-down_16: char-from-code("f1ac"); -$icon-arrow-circle-down_20: char-from-code("f1ad"); -$icon-arrow-circle-down_24: char-from-code("f1ae"); -$icon-arrow-circle-left_16: char-from-code("f1af"); -$icon-arrow-circle-left_20: char-from-code("f1b0"); -$icon-arrow-circle-left_24: char-from-code("f1b1"); -$icon-arrow-circle-right_16: char-from-code("f1b2"); -$icon-arrow-circle-right_20: char-from-code("f1b3"); -$icon-arrow-circle-right_24: char-from-code("f1b4"); -$icon-arrow-circle-up_16: char-from-code("f1b5"); -$icon-arrow-circle-up_20: char-from-code("f1b6"); -$icon-arrow-circle-up_24: char-from-code("f1b7"); -$icon-arrow-down_12: char-from-code("f1b8"); -$icon-arrow-down_16: char-from-code("f1b9"); -$icon-arrow-down_18: char-from-code("f1ba"); -$icon-arrow-down_20: char-from-code("f1bb"); -$icon-arrow-down_24: char-from-code("f1bc"); -$icon-arrow-down_28: char-from-code("f1bd"); -$icon-arrow-down_32: char-from-code("f1be"); -$icon-arrow-down_6: char-from-code("f1bf"); -$icon-arrow-down_8: char-from-code("f1c0"); -$icon-arrow-down-optical_10: char-from-code("f1c1"); -$icon-arrow-down-optical_12: char-from-code("f1c2"); -$icon-arrow-down-optical_14: char-from-code("f1c3"); -$icon-arrow-down-optical_16: char-from-code("f1c4"); -$icon-arrow-down-optical_18: char-from-code("f1c5"); -$icon-arrow-down-optical_20: char-from-code("f1c6"); -$icon-arrow-down-optical_24: char-from-code("f1c7"); -$icon-arrow-down-optical_28: char-from-code("f1c8"); -$icon-arrow-down-optical_32: char-from-code("f1c9"); -$icon-arrow-down-optical_8: char-from-code("f1ca"); -$icon-arrow-filled-down_10: char-from-code("f1cb"); -$icon-arrow-filled-down_12: char-from-code("f1cc"); -$icon-arrow-filled-down_8: char-from-code("f1cd"); -$icon-arrow-filled-up_10: char-from-code("f1ce"); -$icon-arrow-filled-up_12: char-from-code("f1cf"); -$icon-arrow-filled-up_8: char-from-code("f1d0"); -$icon-arrow-left_12: char-from-code("f1d1"); -$icon-arrow-left_16: char-from-code("f1d2"); -$icon-arrow-left_18: char-from-code("f1d3"); -$icon-arrow-left_20: char-from-code("f1d4"); -$icon-arrow-left_24: char-from-code("f1d5"); -$icon-arrow-left_28: char-from-code("f1d6"); -$icon-arrow-left_32: char-from-code("f1d7"); -$icon-arrow-left_6: char-from-code("f1d8"); -$icon-arrow-left_8: char-from-code("f1d9"); -$icon-arrow-left-optical_10: char-from-code("f1da"); -$icon-arrow-left-optical_12: char-from-code("f1db"); -$icon-arrow-left-optical_14: char-from-code("f1dc"); -$icon-arrow-left-optical_16: char-from-code("f1dd"); -$icon-arrow-left-optical_18: char-from-code("f1de"); -$icon-arrow-left-optical_20: char-from-code("f1df"); -$icon-arrow-left-optical_24: char-from-code("f1e0"); -$icon-arrow-left-optical_28: char-from-code("f1e1"); -$icon-arrow-left-optical_32: char-from-code("f1e2"); -$icon-arrow-left-optical_8: char-from-code("f1e3"); -$icon-arrow-right_12: char-from-code("f1e4"); -$icon-arrow-right_16: char-from-code("f1e5"); -$icon-arrow-right_18: char-from-code("f1e6"); -$icon-arrow-right_20: char-from-code("f1e7"); -$icon-arrow-right_24: char-from-code("f1e8"); -$icon-arrow-right_28: char-from-code("f1e9"); -$icon-arrow-right_32: char-from-code("f1ea"); -$icon-arrow-right_6: char-from-code("f1eb"); -$icon-arrow-right_8: char-from-code("f1ec"); -$icon-arrow-right-optical_10: char-from-code("f1ed"); -$icon-arrow-right-optical_12: char-from-code("f1ee"); -$icon-arrow-right-optical_14: char-from-code("f1ef"); -$icon-arrow-right-optical_16: char-from-code("f1f0"); -$icon-arrow-right-optical_18: char-from-code("f1f1"); -$icon-arrow-right-optical_20: char-from-code("f1f2"); -$icon-arrow-right-optical_24: char-from-code("f1f3"); -$icon-arrow-right-optical_28: char-from-code("f1f4"); -$icon-arrow-right-optical_32: char-from-code("f1f5"); -$icon-arrow-right-optical_8: char-from-code("f1f6"); -$icon-arrow-tail-down_10: char-from-code("f1f7"); -$icon-arrow-tail-down_12: char-from-code("f1f8"); -$icon-arrow-tail-down_14: char-from-code("f1f9"); -$icon-arrow-tail-down_16: char-from-code("f1fa"); -$icon-arrow-tail-down_20: char-from-code("f1fb"); -$icon-arrow-tail-down_24: char-from-code("f1fc"); -$icon-arrow-tail-down_28: char-from-code("f1fd"); -$icon-arrow-tail-down_36: char-from-code("f1fe"); -$icon-arrow-tail-up_10: char-from-code("f1ff"); -$icon-arrow-tail-up_12: char-from-code("f200"); -$icon-arrow-tail-up_14: char-from-code("f201"); -$icon-arrow-tail-up_16: char-from-code("f202"); -$icon-arrow-tail-up_20: char-from-code("f203"); -$icon-arrow-tail-up_24: char-from-code("f204"); -$icon-arrow-tail-up_28: char-from-code("f205"); -$icon-arrow-tail-up_36: char-from-code("f206"); -$icon-arrow-up_12: char-from-code("f207"); -$icon-arrow-up_16: char-from-code("f208"); -$icon-arrow-up_18: char-from-code("f209"); -$icon-arrow-up_20: char-from-code("f20a"); -$icon-arrow-up_24: char-from-code("f20b"); -$icon-arrow-up_28: char-from-code("f20c"); -$icon-arrow-up_32: char-from-code("f20d"); -$icon-arrow-up_6: char-from-code("f20e"); -$icon-arrow-up_8: char-from-code("f20f"); -$icon-arrow-up-optical_12: char-from-code("f210"); -$icon-arrow-up-optical_14: char-from-code("f211"); -$icon-arrow-up-optical_16: char-from-code("f212"); -$icon-arrow-up-optical_18: char-from-code("f213"); -$icon-arrow-up-optical_20: char-from-code("f214"); -$icon-arrow-up-optical_24: char-from-code("f215"); -$icon-arrow-up-optical_28: char-from-code("f216"); -$icon-arrow-up-optical_32: char-from-code("f217"); -$icon-arrow-up-optical_8: char-from-code("f218"); -$icon-ask-for-help_12: char-from-code("f219"); -$icon-ask-for-help_16: char-from-code("f21a"); -$icon-ask-for-help_20: char-from-code("f21b"); -$icon-assign-host_12: char-from-code("f21c"); -$icon-assign-host_16: char-from-code("f21d"); -$icon-assign-host_20: char-from-code("f21e"); -$icon-assign-host_24: char-from-code("f21f"); -$icon-assign-privilege_12: char-from-code("f220"); -$icon-assign-privilege_16: char-from-code("f221"); -$icon-assign-privilege_20: char-from-code("f222"); -$icon-assignment_24: char-from-code("f223"); -$icon-asterisk_10: char-from-code("f224"); -$icon-asterisk_16: char-from-code("f225"); -$icon-asterisk_24: char-from-code("f226"); -$icon-asterisk_32: char-from-code("f227"); -$icon-asterisk_36: char-from-code("f228"); -$icon-attachment_12: char-from-code("f229"); -$icon-attachment_16: char-from-code("f22a"); -$icon-attachment_20: char-from-code("f22b"); -$icon-attachment_24: char-from-code("f22c"); -$icon-audio-and-video-connection_12: char-from-code("f22d"); -$icon-audio-and-video-connection_20: char-from-code("f22e"); -$icon-audio-and-video-connection_24: char-from-code("f22f"); -$icon-audio-broadcast_14: char-from-code("f230"); -$icon-audio-broadcast_16: char-from-code("f231"); -$icon-audio-broadcast_20: char-from-code("f232"); -$icon-audio-broadcast_24: char-from-code("f233"); -$icon-audio-call_14: char-from-code("f234"); -$icon-audio-call_16: char-from-code("f235"); -$icon-audio-input_16: char-from-code("f236"); -$icon-audio-options_20: char-from-code("f237"); -$icon-audio-options_24: char-from-code("f238"); -$icon-audio-options_28: char-from-code("f239"); -$icon-audio-options_32: char-from-code("f23a"); -$icon-audio-options_40: char-from-code("f23b"); -$icon-audio-video_12: char-from-code("f23c"); -$icon-audio-video_16: char-from-code("f23d"); -$icon-audio-video_20: char-from-code("f23e"); -$icon-audio-video_24: char-from-code("f23f"); -$icon-audio-video_28: char-from-code("f240"); -$icon-back_10: char-from-code("f241"); -$icon-back_12: char-from-code("f242"); -$icon-back_16: char-from-code("f243"); -$icon-back_20: char-from-code("f244"); -$icon-back_24: char-from-code("f245"); -$icon-back_28: char-from-code("f246"); -$icon-back_36: char-from-code("f247"); -$icon-back-to-fullscreen_12: char-from-code("f248"); -$icon-back-to-fullscreen_14: char-from-code("f249"); -$icon-back-to-fullscreen_16: char-from-code("f24a"); -$icon-back-to-fullscreen_20: char-from-code("f24b"); -$icon-back-to-fullscreen_22: char-from-code("f24c"); -$icon-back-to-fullscreen_24: char-from-code("f24d"); -$icon-back-to-fullscreen-adr_12: char-from-code("f24e"); -$icon-back-to-fullscreen-adr_14: char-from-code("f24f"); -$icon-back-to-fullscreen-adr_16: char-from-code("f250"); -$icon-back-to-fullscreen-adr_20: char-from-code("f251"); -$icon-back-to-fullscreen-adr_22: char-from-code("f252"); -$icon-back-to-fullscreen-adr_24: char-from-code("f253"); -$icon-back-to-fullscreen-adr_26: char-from-code("f254"); -$icon-back-to-fullscreen-adr_28: char-from-code("f255"); -$icon-backspace_16: char-from-code("f256"); -$icon-backspace_20: char-from-code("f257"); -$icon-backspace_24: char-from-code("f258"); -$icon-backup-data_16: char-from-code("f259"); -$icon-backup-data_24: char-from-code("f25a"); -$icon-battery_20: char-from-code("f25b"); -$icon-battery_24: char-from-code("f25c"); -$icon-beta_20: char-from-code("f25d"); -$icon-beta-active_20: char-from-code("f25e"); -$icon-blocked_12: char-from-code("f25f"); -$icon-blocked_14: char-from-code("f260"); -$icon-blocked_16: char-from-code("f261"); -$icon-blocked_18: char-from-code("f262"); -$icon-blocked_20: char-from-code("f263"); -$icon-blocked_24: char-from-code("f264"); -$icon-blocked_28: char-from-code("f265"); -$icon-blocked_32: char-from-code("f266"); -$icon-blocked_36: char-from-code("f267"); -$icon-blocked_40: char-from-code("f268"); -$icon-blocked_48: char-from-code("f269"); -$icon-blocked_56: char-from-code("f26a"); -$icon-blocked_8: char-from-code("f26b"); -$icon-blocked_80: char-from-code("f26c"); -$icon-blocked-selected_20: char-from-code("f26d"); -$icon-blocked-selected_24: char-from-code("f26e"); -$icon-blog_16: char-from-code("f26f"); -$icon-bloomberg_16: char-from-code("f270"); -$icon-bloomberg-circle_16: char-from-code("f271"); -$icon-bluetooth_16: char-from-code("f272"); -$icon-bluetooth_20: char-from-code("f273"); -$icon-bluetooth_24: char-from-code("f274"); -$icon-bluetooth-container_16: char-from-code("f275"); -$icon-bluetooth-container-muted_16: char-from-code("f276"); -$icon-blur_12: char-from-code("f277"); -$icon-blur_20: char-from-code("f278"); -$icon-blur_24: char-from-code("f279"); -$icon-bookmark_16: char-from-code("f27a"); -$icon-bot_12: char-from-code("f27b"); -$icon-bot_14: char-from-code("f27c"); -$icon-bot_16: char-from-code("f27d"); -$icon-bot_18: char-from-code("f27e"); -$icon-bot_20: char-from-code("f27f"); -$icon-bot_24: char-from-code("f280"); -$icon-bot_36: char-from-code("f281"); -$icon-bot_40: char-from-code("f282"); -$icon-bot_56: char-from-code("f283"); -$icon-bot-active_24: char-from-code("f284"); -$icon-bot-customer-assistant_16: char-from-code("f285"); -$icon-bot-customer-assistant_24: char-from-code("f286"); -$icon-bot-customer-assistant_36: char-from-code("f287"); -$icon-bot-expert-assistant_16: char-from-code("f288"); -$icon-bot-expert-assistant_24: char-from-code("f289"); -$icon-bot-expert-assistant_36: char-from-code("f28a"); -$icon-box_24: char-from-code("f28b"); -$icon-breakout-session_16: char-from-code("f28c"); -$icon-breakout-session_20: char-from-code("f28d"); -$icon-breakout-session_24: char-from-code("f28e"); -$icon-brightness_16: char-from-code("f28f"); -$icon-brightness_24: char-from-code("f290"); -$icon-broadcast-message_16: char-from-code("f291"); -$icon-broken-file_16: char-from-code("f292"); -$icon-broken-file_24: char-from-code("f293"); -$icon-browser_12: char-from-code("f294"); -$icon-browser_16: char-from-code("f295"); -$icon-browser_20: char-from-code("f296"); -$icon-browser_24: char-from-code("f297"); -$icon-browser_28: char-from-code("f298"); -$icon-bug_16: char-from-code("f299"); -$icon-calendar-add_12: char-from-code("f29a"); -$icon-calendar-add_14: char-from-code("f29b"); -$icon-calendar-add_16: char-from-code("f29c"); -$icon-calendar-add_20: char-from-code("f29d"); -$icon-calendar-add_24: char-from-code("f29e"); -$icon-calendar-add_32: char-from-code("f29f"); -$icon-calendar-add_36: char-from-code("f2a0"); -$icon-calendar-day_12: char-from-code("f2a1"); -$icon-calendar-empty_16: char-from-code("f2a2"); -$icon-calendar-empty_18: char-from-code("f2a3"); -$icon-calendar-empty_20: char-from-code("f2a4"); -$icon-calendar-empty_24: char-from-code("f2a5"); -$icon-calendar-empty_32: char-from-code("f2a6"); -$icon-calendar-empty-active_16: char-from-code("f2a7"); -$icon-calendar-empty-active_18: char-from-code("f2a8"); -$icon-calendar-empty-active_20: char-from-code("f2a9"); -$icon-calendar-empty-active_24: char-from-code("f2aa"); -$icon-calendar-empty-active_32: char-from-code("f2ab"); -$icon-calendar-external_12: char-from-code("f2ac"); -$icon-calendar-external_16: char-from-code("f2ad"); -$icon-calendar-external_18: char-from-code("f2ae"); -$icon-calendar-external_20: char-from-code("f2af"); -$icon-calendar-external_24: char-from-code("f2b0"); -$icon-calendar-month_10: char-from-code("f2b1"); -$icon-calendar-month_12: char-from-code("f2b2"); -$icon-calendar-month_16: char-from-code("f2b3"); -$icon-calendar-month_20: char-from-code("f2b4"); -$icon-calendar-month_24: char-from-code("f2b5"); -$icon-calendar-month_28: char-from-code("f2b6"); -$icon-calendar-month_36: char-from-code("f2b7"); -$icon-calendar-month-active_20: char-from-code("f2b8"); -$icon-calendar-month-active_24: char-from-code("f2b9"); -$icon-calendar-week_12: char-from-code("f2ba"); -$icon-calendar-week_16: char-from-code("f2bb"); -$icon-calendar-week_20: char-from-code("f2bc"); -$icon-calendar-week_24: char-from-code("f2bd"); -$icon-calendar-week-view_12: char-from-code("f2be"); -$icon-calendar-work-week_12: char-from-code("f2bf"); -$icon-call-activities_16: char-from-code("f2c0"); -$icon-call-activities_24: char-from-code("f2c1"); -$icon-call-forward_16: char-from-code("f2c2"); -$icon-call-forward_24: char-from-code("f2c3"); -$icon-call-forward_28: char-from-code("f2c4"); -$icon-call-forward-active_24: char-from-code("f2c5"); -$icon-call-forward-divert_14: char-from-code("f2c6"); -$icon-call-forward-divert_16: char-from-code("f2c7"); -$icon-call-forward-settings_12: char-from-code("f2c8"); -$icon-call-forward-settings_14: char-from-code("f2c9"); -$icon-call-forward-settings_16: char-from-code("f2ca"); -$icon-call-forward-settings_20: char-from-code("f2cb"); -$icon-call-forward-settings_24: char-from-code("f2cc"); -$icon-call-handling_14: char-from-code("f2cd"); -$icon-call-handling_16: char-from-code("f2ce"); -$icon-call-hold_14: char-from-code("f2cf"); -$icon-call-hold_16: char-from-code("f2d0"); -$icon-call-hold_20: char-from-code("f2d1"); -$icon-call-hold_24: char-from-code("f2d2"); -$icon-call-incoming_12: char-from-code("f2d3"); -$icon-call-incoming_16: char-from-code("f2d4"); -$icon-call-incoming_24: char-from-code("f2d5"); -$icon-call-incoming_8: char-from-code("f2d6"); -$icon-call-log_12: char-from-code("f2d7"); -$icon-call-log_14: char-from-code("f2d8"); -$icon-call-log_16: char-from-code("f2d9"); -$icon-call-log_20: char-from-code("f2da"); -$icon-call-log_24: char-from-code("f2db"); -$icon-call-log-active_20: char-from-code("f2dc"); -$icon-call-merge_12: char-from-code("f2dd"); -$icon-call-merge_16: char-from-code("f2de"); -$icon-call-merge_20: char-from-code("f2df"); -$icon-call-merge_24: char-from-code("f2e0"); -$icon-call-outgoing_12: char-from-code("f2e1"); -$icon-call-outgoing_16: char-from-code("f2e2"); -$icon-call-outgoing_24: char-from-code("f2e3"); -$icon-call-outgoing_8: char-from-code("f2e4"); -$icon-call-pickup_12: char-from-code("f2e5"); -$icon-call-pickup_14: char-from-code("f2e6"); -$icon-call-private_12: char-from-code("f2e7"); -$icon-call-private_14: char-from-code("f2e8"); -$icon-call-request_12: char-from-code("f2e9"); -$icon-call-request_14: char-from-code("f2ea"); -$icon-call-room_28: char-from-code("f2eb"); -$icon-call-settings_14: char-from-code("f2ec"); -$icon-call-settings_20: char-from-code("f2ed"); -$icon-call-swap_16: char-from-code("f2ee"); -$icon-call-swap_20: char-from-code("f2ef"); -$icon-call-swap_24: char-from-code("f2f0"); -$icon-call-swap_28: char-from-code("f2f1"); -$icon-call-voicemail_12: char-from-code("f2f2"); -$icon-call-voicemail_14: char-from-code("f2f3"); -$icon-call-voicemail_16: char-from-code("f2f4"); -$icon-call-voicemail_18: char-from-code("f2f5"); -$icon-call-voicemail_20: char-from-code("f2f6"); -$icon-call-voicemail_24: char-from-code("f2f7"); -$icon-camera_10: char-from-code("f2f8"); -$icon-camera_12: char-from-code("f2f9"); -$icon-camera_120: char-from-code("f2fa"); -$icon-camera_124: char-from-code("f2fb"); -$icon-camera_14: char-from-code("f2fc"); -$icon-camera_16: char-from-code("f2fd"); -$icon-camera_18: char-from-code("f2fe"); -$icon-camera_20: char-from-code("f2ff"); -$icon-camera_24: char-from-code("f300"); -$icon-camera_26: char-from-code("f301"); -$icon-camera_28: char-from-code("f302"); -$icon-camera_32: char-from-code("f303"); -$icon-camera_36: char-from-code("f304"); -$icon-camera_40: char-from-code("f305"); -$icon-camera_48: char-from-code("f306"); -$icon-camera_56: char-from-code("f307"); -$icon-camera_64: char-from-code("f308"); -$icon-camera_8: char-from-code("f309"); -$icon-camera-active_14: char-from-code("f30a"); -$icon-camera-active_24: char-from-code("f30b"); -$icon-camera-aux_16: char-from-code("f30c"); -$icon-camera-aux_24: char-from-code("f30d"); -$icon-camera-group_16: char-from-code("f30e"); -$icon-camera-group_24: char-from-code("f30f"); -$icon-camera-muted_12: char-from-code("f310"); -$icon-camera-muted_14: char-from-code("f311"); -$icon-camera-muted_16: char-from-code("f312"); -$icon-camera-muted_20: char-from-code("f313"); -$icon-camera-muted_24: char-from-code("f314"); -$icon-camera-muted_28: char-from-code("f315"); -$icon-camera-muted_32: char-from-code("f316"); -$icon-camera-muted_36: char-from-code("f317"); -$icon-camera-muted_8: char-from-code("f318"); -$icon-camera-on_16: char-from-code("f319"); -$icon-camera-on_20: char-from-code("f31a"); -$icon-camera-on_24: char-from-code("f31b"); -$icon-camera-photo_12: char-from-code("f31c"); -$icon-camera-photo_16: char-from-code("f31d"); -$icon-camera-photo_20: char-from-code("f31e"); -$icon-camera-photo_24: char-from-code("f31f"); -$icon-camera-photo_32: char-from-code("f320"); -$icon-camera-photo_48: char-from-code("f321"); -$icon-camera-photo-swap_16: char-from-code("f322"); -$icon-camera-presence_12: char-from-code("f323"); -$icon-camera-presence_14: char-from-code("f324"); -$icon-camera-presence_24: char-from-code("f325"); -$icon-camera-presence_28: char-from-code("f326"); -$icon-camera-presence_8: char-from-code("f327"); -$icon-camera-presence-stroke_10: char-from-code("f328"); -$icon-camera-presence-stroke_14: char-from-code("f329"); -$icon-camera-presence-stroke_16: char-from-code("f32a"); -$icon-camera-presence-stroke_26: char-from-code("f32b"); -$icon-camera-presence-stroke_30: char-from-code("f32c"); -$icon-camera-swap_12: char-from-code("f32d"); -$icon-camera-swap_16: char-from-code("f32e"); -$icon-camera-swap_20: char-from-code("f32f"); -$icon-camera-swap_24: char-from-code("f330"); -$icon-cancel_10: char-from-code("f331"); -$icon-cancel_12: char-from-code("f332"); -$icon-cancel_14: char-from-code("f333"); -$icon-cancel_16: char-from-code("f334"); -$icon-cancel_18: char-from-code("f335"); -$icon-cancel_20: char-from-code("f336"); -$icon-cancel_24: char-from-code("f337"); -$icon-cancel_28: char-from-code("f338"); -$icon-cancel_36: char-from-code("f339"); -$icon-cancel_6: char-from-code("f33a"); -$icon-cancel_8: char-from-code("f33b"); -$icon-cellular_16: char-from-code("f33c"); -$icon-certified_16: char-from-code("f33d"); -$icon-certified_20: char-from-code("f33e"); -$icon-certified_24: char-from-code("f33f"); -$icon-ch-p-search_14: char-from-code("f340"); -$icon-chat_10: char-from-code("f341"); -$icon-chat_12: char-from-code("f342"); -$icon-chat_14: char-from-code("f343"); -$icon-chat_16: char-from-code("f344"); -$icon-chat_18: char-from-code("f345"); -$icon-chat_20: char-from-code("f346"); -$icon-chat_24: char-from-code("f347"); -$icon-chat_26: char-from-code("f348"); -$icon-chat_28: char-from-code("f349"); -$icon-chat_32: char-from-code("f34a"); -$icon-chat_36: char-from-code("f34b"); -$icon-chat_40: char-from-code("f34c"); -$icon-chat_8: char-from-code("f34d"); -$icon-chat-active_10: char-from-code("f34e"); -$icon-chat-active_12: char-from-code("f34f"); -$icon-chat-active_14: char-from-code("f350"); -$icon-chat-active_16: char-from-code("f351"); -$icon-chat-active_18: char-from-code("f352"); -$icon-chat-active_20: char-from-code("f353"); -$icon-chat-active_24: char-from-code("f354"); -$icon-chat-active_26: char-from-code("f355"); -$icon-chat-active_28: char-from-code("f356"); -$icon-chat-active_32: char-from-code("f357"); -$icon-chat-active_36: char-from-code("f358"); -$icon-chat-active_8: char-from-code("f359"); -$icon-chat-group_12: char-from-code("f35a"); -$icon-chat-group_16: char-from-code("f35b"); -$icon-chat-group_20: char-from-code("f35c"); -$icon-chat-group_32: char-from-code("f35d"); -$icon-chat-muted_12: char-from-code("f35e"); -$icon-chat-muted_16: char-from-code("f35f"); -$icon-chat-persistent_16: char-from-code("f360"); -$icon-chat-persistent_20: char-from-code("f361"); -$icon-chat-persistent_24: char-from-code("f362"); -$icon-chat-persistent-active_20: char-from-code("f363"); -$icon-chat-persistent-active_24: char-from-code("f364"); -$icon-check_10: char-from-code("f365"); -$icon-check_12: char-from-code("f366"); -$icon-check_14: char-from-code("f367"); -$icon-check_16: char-from-code("f368"); -$icon-check_18: char-from-code("f369"); -$icon-check_20: char-from-code("f36a"); -$icon-check_24: char-from-code("f36b"); -$icon-check_28: char-from-code("f36c"); -$icon-check_32: char-from-code("f36d"); -$icon-check_36: char-from-code("f36e"); -$icon-check_40: char-from-code("f36f"); -$icon-check_64: char-from-code("f370"); -$icon-check_8: char-from-code("f371"); -$icon-check_80: char-from-code("f372"); -$icon-check-calendar_14: char-from-code("f373"); -$icon-check-circle_100: char-from-code("f374"); -$icon-check-circle_12: char-from-code("f375"); -$icon-check-circle_14: char-from-code("f376"); -$icon-check-circle_16: char-from-code("f377"); -$icon-check-circle_18: char-from-code("f378"); -$icon-check-circle_20: char-from-code("f379"); -$icon-check-circle_24: char-from-code("f37a"); -$icon-check-circle_36: char-from-code("f37b"); -$icon-check-circle_40: char-from-code("f37c"); -$icon-check-circle_44: char-from-code("f37d"); -$icon-check-circle_72: char-from-code("f37e"); -$icon-check-circle-active_16: char-from-code("f37f"); -$icon-check-circle-active_24: char-from-code("f380"); -$icon-check-refresh_16: char-from-code("f381"); -$icon-cisco-logo: char-from-code("f382"); -$icon-clear_12: char-from-code("f383"); -$icon-clear_14: char-from-code("f384"); -$icon-clear_140: char-from-code("f385"); -$icon-clear_16: char-from-code("f386"); -$icon-clear_18: char-from-code("f387"); -$icon-clear_20: char-from-code("f388"); -$icon-clear_24: char-from-code("f389"); -$icon-clear_32: char-from-code("f38a"); -$icon-clear_44: char-from-code("f38b"); -$icon-clear_80: char-from-code("f38c"); -$icon-clear-active_12: char-from-code("f38d"); -$icon-clear-active_14: char-from-code("f38e"); -$icon-clear-active_16: char-from-code("f38f"); -$icon-clear-active_18: char-from-code("f390"); -$icon-clear-active_20: char-from-code("f391"); -$icon-clear-active_24: char-from-code("f392"); -$icon-clear-active_32: char-from-code("f393"); -$icon-close-space_12: char-from-code("f394"); -$icon-close-space_18: char-from-code("f395"); -$icon-closed-caption_12: char-from-code("f396"); -$icon-closed-caption_16: char-from-code("f397"); -$icon-closed-caption_20: char-from-code("f398"); -$icon-closed-caption_24: char-from-code("f399"); -$icon-closed-caption-badge_12: char-from-code("f39a"); -$icon-closed-caption-badge_16: char-from-code("f39b"); -$icon-closed-caption-badge_20: char-from-code("f39c"); -$icon-cloud_16: char-from-code("f39d"); -$icon-cloud_20: char-from-code("f39e"); -$icon-cloud_24: char-from-code("f39f"); -$icon-cloud_32: char-from-code("f3a0"); -$icon-cloud-upload_16: char-from-code("f3a1"); -$icon-cloud-upload_20: char-from-code("f3a2"); -$icon-cloud-upload_24: char-from-code("f3a3"); -$icon-commenting_16: char-from-code("f3a4"); -$icon-commenting_20: char-from-code("f3a5"); -$icon-commenting_24: char-from-code("f3a6"); -$icon-commenting-active_20: char-from-code("f3a7"); -$icon-company_12: char-from-code("f3a8"); -$icon-company_16: char-from-code("f3a9"); -$icon-company_20: char-from-code("f3aa"); -$icon-company_24: char-from-code("f3ab"); -$icon-company_32: char-from-code("f3ac"); -$icon-computer_16: char-from-code("f3ad"); -$icon-computer_24: char-from-code("f3ae"); -$icon-condition_16: char-from-code("f3af"); -$icon-contact-card_10: char-from-code("f3b0"); -$icon-contact-card_12: char-from-code("f3b1"); -$icon-contact-card_16: char-from-code("f3b2"); -$icon-contact-card_20: char-from-code("f3b3"); -$icon-contact-card_22: char-from-code("f3b4"); -$icon-contact-card_24: char-from-code("f3b5"); -$icon-contact-card_28: char-from-code("f3b6"); -$icon-contact-card_36: char-from-code("f3b7"); -$icon-contact-card-active_20: char-from-code("f3b8"); -$icon-contact-card-active_22: char-from-code("f3b9"); -$icon-contact-card-active_24: char-from-code("f3ba"); -$icon-contact-group_16: char-from-code("f3bb"); -$icon-contact-group_20: char-from-code("f3bc"); -$icon-content-download_12: char-from-code("f3bd"); -$icon-content-download_14: char-from-code("f3be"); -$icon-content-share_10: char-from-code("f3bf"); -$icon-content-share_12: char-from-code("f3c0"); -$icon-content-share_120: char-from-code("f3c1"); -$icon-content-share_124: char-from-code("f3c2"); -$icon-content-share_14: char-from-code("f3c3"); -$icon-content-share_16: char-from-code("f3c4"); -$icon-content-share_18: char-from-code("f3c5"); -$icon-content-share_20: char-from-code("f3c6"); -$icon-content-share_24: char-from-code("f3c7"); -$icon-content-share_32: char-from-code("f3c8"); -$icon-content-share_36: char-from-code("f3c9"); -$icon-content-share_40: char-from-code("f3ca"); -$icon-content-share_48: char-from-code("f3cb"); -$icon-content-share_56: char-from-code("f3cc"); -$icon-copy_10: char-from-code("f3cd"); -$icon-copy_12: char-from-code("f3ce"); -$icon-copy_14: char-from-code("f3cf"); -$icon-copy_16: char-from-code("f3d0"); -$icon-copy_20: char-from-code("f3d1"); -$icon-copy_24: char-from-code("f3d2"); -$icon-cpu_16: char-from-code("f3d3"); -$icon-cpu_24: char-from-code("f3d4"); -$icon-cpu_32: char-from-code("f3d5"); -$icon-crop_16: char-from-code("f3d6"); -$icon-crunchbase_16: char-from-code("f3d7"); -$icon-crunchbase-circle_16: char-from-code("f3d8"); -$icon-cucm-connection_24: char-from-code("f3d9"); -$icon-dashboard_32: char-from-code("f3da"); -$icon-data-usage_16: char-from-code("f3db"); -$icon-data-usage_18: char-from-code("f3dc"); -$icon-data-usage_20: char-from-code("f3dd"); -$icon-data-usage_24: char-from-code("f3de"); -$icon-default-app_16: char-from-code("f3df"); -$icon-delete_10: char-from-code("f3e0"); -$icon-delete_12: char-from-code("f3e1"); -$icon-delete_14: char-from-code("f3e2"); -$icon-delete_16: char-from-code("f3e3"); -$icon-delete_18: char-from-code("f3e4"); -$icon-delete_20: char-from-code("f3e5"); -$icon-delete_24: char-from-code("f3e6"); -$icon-deskphone_12: char-from-code("f3e7"); -$icon-deskphone_14: char-from-code("f3e8"); -$icon-deskphone_16: char-from-code("f3e9"); -$icon-deskphone_20: char-from-code("f3ea"); -$icon-deskphone_24: char-from-code("f3eb"); -$icon-deskphone_32: char-from-code("f3ec"); -$icon-deskphone_48: char-from-code("f3ed"); -$icon-deskphone-warning_16: char-from-code("f3ee"); -$icon-device-connection_12: char-from-code("f3ef"); -$icon-device-connection_14: char-from-code("f3f0"); -$icon-device-connection_16: char-from-code("f3f1"); -$icon-device-connection_18: char-from-code("f3f2"); -$icon-device-connection_20: char-from-code("f3f3"); -$icon-device-connection_24: char-from-code("f3f4"); -$icon-device-connection_36: char-from-code("f3f5"); -$icon-device-connection_48: char-from-code("f3f6"); -$icon-device-connection-active_14: char-from-code("f3f7"); -$icon-device-connection-active_16: char-from-code("f3f8"); -$icon-device-connection-active_20: char-from-code("f3f9"); -$icon-device-connection-active_24: char-from-code("f3fa"); -$icon-device-connection-active_36: char-from-code("f3fb"); -$icon-device-connection-active_40: char-from-code("f3fc"); -$icon-device-in-room_100: char-from-code("f3fd"); -$icon-device-in-room_12: char-from-code("f3fe"); -$icon-device-in-room_14: char-from-code("f3ff"); -$icon-device-in-room_16: char-from-code("f400"); -$icon-device-in-room_18: char-from-code("f401"); -$icon-device-in-room_20: char-from-code("f402"); -$icon-device-in-room_24: char-from-code("f403"); -$icon-device-in-room_32: char-from-code("f404"); -$icon-device-in-room_48: char-from-code("f405"); -$icon-device-in-room_56: char-from-code("f406"); -$icon-device-in-room_8: char-from-code("f407"); -$icon-device-in-room-active_24: char-from-code("f408"); -$icon-device-in-room-end_16: char-from-code("f409"); -$icon-diagnostics_16: char-from-code("f40a"); -$icon-diagnostics_24: char-from-code("f40b"); -$icon-diagnostics_32: char-from-code("f40c"); -$icon-diagnostics-circle_100: char-from-code("f40d"); -$icon-dialpad_12: char-from-code("f40e"); -$icon-dialpad_14: char-from-code("f40f"); -$icon-dialpad_16: char-from-code("f410"); -$icon-dialpad_20: char-from-code("f411"); -$icon-dialpad_24: char-from-code("f412"); -$icon-dialpad_28: char-from-code("f413"); -$icon-directory_16: char-from-code("f414"); -$icon-directory_20: char-from-code("f415"); -$icon-directory_24: char-from-code("f416"); -$icon-disconnect-contact_16: char-from-code("f417"); -$icon-dislike_12: char-from-code("f418"); -$icon-dislike_16: char-from-code("f419"); -$icon-dislike_24: char-from-code("f41a"); -$icon-display_14: char-from-code("f41b"); -$icon-display_16: char-from-code("f41c"); -$icon-display_24: char-from-code("f41d"); -$icon-display_36: char-from-code("f41e"); -$icon-display_72: char-from-code("f41f"); -$icon-display-input_16: char-from-code("f420"); -$icon-display-input_24: char-from-code("f421"); -$icon-display-warning_16: char-from-code("f422"); -$icon-dnd_12: char-from-code("f423"); -$icon-dnd_120: char-from-code("f424"); -$icon-dnd_124: char-from-code("f425"); -$icon-dnd_14: char-from-code("f426"); -$icon-dnd_16: char-from-code("f427"); -$icon-dnd_18: char-from-code("f428"); -$icon-dnd_20: char-from-code("f429"); -$icon-dnd_24: char-from-code("f42a"); -$icon-dnd_26: char-from-code("f42b"); -$icon-dnd_28: char-from-code("f42c"); -$icon-dnd_32: char-from-code("f42d"); -$icon-dnd_36: char-from-code("f42e"); -$icon-dnd_40: char-from-code("f42f"); -$icon-dnd_48: char-from-code("f430"); -$icon-dnd_56: char-from-code("f431"); -$icon-dnd_8: char-from-code("f432"); -$icon-dnd-active_14: char-from-code("f433"); -$icon-dnd-active_24: char-from-code("f434"); -$icon-dnd-presence_12: char-from-code("f435"); -$icon-dnd-presence_14: char-from-code("f436"); -$icon-dnd-presence_24: char-from-code("f437"); -$icon-dnd-presence_28: char-from-code("f438"); -$icon-dnd-presence_8: char-from-code("f439"); -$icon-dnd-presence-stroke_10: char-from-code("f43a"); -$icon-dnd-presence-stroke_14: char-from-code("f43b"); -$icon-dnd-presence-stroke_16: char-from-code("f43c"); -$icon-dnd-presence-stroke_26: char-from-code("f43d"); -$icon-dnd-presence-stroke_30: char-from-code("f43e"); -$icon-dock-in_12: char-from-code("f43f"); -$icon-dock-in_16: char-from-code("f440"); -$icon-dock-out_12: char-from-code("f441"); -$icon-dock-out_16: char-from-code("f442"); -$icon-document_12: char-from-code("f443"); -$icon-document_14: char-from-code("f444"); -$icon-document_16: char-from-code("f445"); -$icon-document_18: char-from-code("f446"); -$icon-document_20: char-from-code("f447"); -$icon-document_24: char-from-code("f448"); -$icon-document_28: char-from-code("f449"); -$icon-document_32: char-from-code("f44a"); -$icon-document_36: char-from-code("f44b"); -$icon-document_40: char-from-code("f44c"); -$icon-document_44: char-from-code("f44d"); -$icon-document_72: char-from-code("f44e"); -$icon-document-create_16: char-from-code("f44f"); -$icon-document-move_16: char-from-code("f450"); -$icon-document-share_16: char-from-code("f451"); -$icon-document-share_24: char-from-code("f452"); -$icon-document-share_36: char-from-code("f453"); -$icon-document-share_48: char-from-code("f454"); -$icon-donut-chart_16: char-from-code("f455"); -$icon-download_10: char-from-code("f456"); -$icon-download_12: char-from-code("f457"); -$icon-download_130: char-from-code("f458"); -$icon-download_14: char-from-code("f459"); -$icon-download_16: char-from-code("f45a"); -$icon-download_18: char-from-code("f45b"); -$icon-download_20: char-from-code("f45c"); -$icon-download_24: char-from-code("f45d"); -$icon-download_28: char-from-code("f45e"); -$icon-download_32: char-from-code("f45f"); -$icon-download-active_20: char-from-code("f460"); -$icon-download-circle_100: char-from-code("f461"); -$icon-drag_14: char-from-code("f462"); -$icon-drag_16: char-from-code("f463"); -$icon-drive-mode_20: char-from-code("f464"); -$icon-dx70_16: char-from-code("f465"); -$icon-dx70_20: char-from-code("f466"); -$icon-dx80_16: char-from-code("f467"); -$icon-dx80_20: char-from-code("f468"); -$icon-edit_10: char-from-code("f469"); -$icon-edit_12: char-from-code("f46a"); -$icon-edit_14: char-from-code("f46b"); -$icon-edit_16: char-from-code("f46c"); -$icon-edit_18: char-from-code("f46d"); -$icon-edit_20: char-from-code("f46e"); -$icon-edit_24: char-from-code("f46f"); -$icon-edit_56: char-from-code("f470"); -$icon-email_12: char-from-code("f471"); -$icon-email_14: char-from-code("f472"); -$icon-email_16: char-from-code("f473"); -$icon-email_20: char-from-code("f474"); -$icon-email_24: char-from-code("f475"); -$icon-email_56: char-from-code("f476"); -$icon-email-active_12: char-from-code("f477"); -$icon-email-active_16: char-from-code("f478"); -$icon-email-active_24: char-from-code("f479"); -$icon-email-circle_24: char-from-code("f47a"); -$icon-email-circle_32: char-from-code("f47b"); -$icon-email-circle_40: char-from-code("f47c"); -$icon-email-invite_100: char-from-code("f47d"); -$icon-email-invite_16: char-from-code("f47e"); -$icon-email-invite_24: char-from-code("f47f"); -$icon-email-invite_32: char-from-code("f480"); -$icon-email-read_16: char-from-code("f481"); -$icon-email-read_20: char-from-code("f482"); -$icon-email-read_24: char-from-code("f483"); -$icon-emoji-food_16: char-from-code("f484"); -$icon-emoji-heart_16: char-from-code("f485"); -$icon-emoji-nature_16: char-from-code("f486"); -$icon-emoji-people_16: char-from-code("f487"); -$icon-emoticon-passive_24: char-from-code("f488"); -$icon-emoticon-sad_24: char-from-code("f489"); -$icon-emoticons_12: char-from-code("f48a"); -$icon-emoticons_16: char-from-code("f48b"); -$icon-emoticons_18: char-from-code("f48c"); -$icon-emoticons_20: char-from-code("f48d"); -$icon-emoticons_24: char-from-code("f48e"); -$icon-encryption_16: char-from-code("f48f"); -$icon-encryption_20: char-from-code("f490"); -$icon-end-remote-desktop-control_10: char-from-code("f491"); -$icon-end-to-end-encryption_14: char-from-code("f492"); -$icon-end-to-end-encryption_16: char-from-code("f493"); -$icon-endpoint_10: char-from-code("f494"); -$icon-endpoint_12: char-from-code("f495"); -$icon-endpoint_14: char-from-code("f496"); -$icon-endpoint_16: char-from-code("f497"); -$icon-endpoint_20: char-from-code("f498"); -$icon-endpoint_24: char-from-code("f499"); -$icon-endpoint_28: char-from-code("f49a"); -$icon-endpoint_32: char-from-code("f49b"); -$icon-endpoint_48: char-from-code("f49c"); -$icon-endpoint_56: char-from-code("f49d"); -$icon-endpoint_64: char-from-code("f49e"); -$icon-endpoint_8: char-from-code("f49f"); -$icon-endpoint-blocked_12: char-from-code("f4a0"); -$icon-endpoint-g2_16: char-from-code("f4a1"); -$icon-endpoint-g2_20: char-from-code("f4a2"); -$icon-endpoint-g2-70_16: char-from-code("f4a3"); -$icon-endpoint-g2-70_20: char-from-code("f4a4"); -$icon-endpoint-g2-70-dual_16: char-from-code("f4a5"); -$icon-endpoint-g2-70-dual_20: char-from-code("f4a6"); -$icon-endpoint-g2-stand_16: char-from-code("f4a7"); -$icon-endpoint-g2-stand_20: char-from-code("f4a8"); -$icon-endpoint-mx800_16: char-from-code("f4a9"); -$icon-endpoint-mx800_20: char-from-code("f4aa"); -$icon-endpoint-mx800-dual_16: char-from-code("f4ab"); -$icon-endpoint-mx800-dual_20: char-from-code("f4ac"); -$icon-endpoint-stand_16: char-from-code("f4ad"); -$icon-endpoint-stand_20: char-from-code("f4ae"); -$icon-endpoint-warning_12: char-from-code("f4af"); -$icon-enter_16: char-from-code("f4b0"); -$icon-enter-room_10: char-from-code("f4b1"); -$icon-enter-room_12: char-from-code("f4b2"); -$icon-enter-room_16: char-from-code("f4b3"); -$icon-enter-room_20: char-from-code("f4b4"); -$icon-enter-room_24: char-from-code("f4b5"); -$icon-enter-room_28: char-from-code("f4b6"); -$icon-enter-room_8: char-from-code("f4b7"); -$icon-eraser_12: char-from-code("f4b8"); -$icon-eraser_14: char-from-code("f4b9"); -$icon-eraser_16: char-from-code("f4ba"); -$icon-eraser_18: char-from-code("f4bb"); -$icon-eraser_24: char-from-code("f4bc"); -$icon-error_12: char-from-code("f4bd"); -$icon-error_16: char-from-code("f4be"); -$icon-error_20: char-from-code("f4bf"); -$icon-error_24: char-from-code("f4c0"); -$icon-error_40: char-from-code("f4c1"); -$icon-error_8: char-from-code("f4c2"); -$icon-error_80: char-from-code("f4c3"); -$icon-error-legacy_12: char-from-code("f4c4"); -$icon-error-legacy_16: char-from-code("f4c5"); -$icon-error-legacy_20: char-from-code("f4c6"); -$icon-error-legacy_24: char-from-code("f4c7"); -$icon-error-legacy_28: char-from-code("f4c8"); -$icon-error-legacy_36: char-from-code("f4c9"); -$icon-error-legacy_8: char-from-code("f4ca"); -$icon-error-legacy_80: char-from-code("f4cb"); -$icon-ethernet_16: char-from-code("f4cc"); -$icon-ethernet_24: char-from-code("f4cd"); -$icon-event_16: char-from-code("f4ce"); -$icon-exchange_16: char-from-code("f4cf"); -$icon-exit-room_12: char-from-code("f4d0"); -$icon-exit-room_16: char-from-code("f4d1"); -$icon-exit-room_20: char-from-code("f4d2"); -$icon-exit-room_24: char-from-code("f4d3"); -$icon-exit-room_28: char-from-code("f4d4"); -$icon-explore_16: char-from-code("f4d5"); -$icon-export_16: char-from-code("f4d6"); -$icon-export_24: char-from-code("f4d7"); -$icon-extension-mobility_16: char-from-code("f4d8"); -$icon-extension-mobility_24: char-from-code("f4d9"); -$icon-external-message_10: char-from-code("f4da"); -$icon-external-message_16: char-from-code("f4db"); -$icon-external-message_24: char-from-code("f4dc"); -$icon-external-message_32: char-from-code("f4dd"); -$icon-external-message_36: char-from-code("f4de"); -$icon-external-user_10: char-from-code("f4df"); -$icon-external-user_12: char-from-code("f4e0"); -$icon-external-user_16: char-from-code("f4e1"); -$icon-external-user_20: char-from-code("f4e2"); -$icon-facebook_16: char-from-code("f4e3"); -$icon-facebook-blue_12: char-from-code("f4e4"); -$icon-facebook-circle_24: char-from-code("f4e5"); -$icon-facebook-circle_32: char-from-code("f4e6"); -$icon-facebook-circle_40: char-from-code("f4e7"); -$icon-facebook-logo_12: char-from-code("f4e8"); -$icon-favorite_10: char-from-code("f4e9"); -$icon-favorite_12: char-from-code("f4ea"); -$icon-favorite_14: char-from-code("f4eb"); -$icon-favorite_16: char-from-code("f4ec"); -$icon-favorite_20: char-from-code("f4ed"); -$icon-favorite_24: char-from-code("f4ee"); -$icon-favorite_28: char-from-code("f4ef"); -$icon-favorite_8: char-from-code("f4f0"); -$icon-favorite-active_12: char-from-code("f4f1"); -$icon-favorite-active_14: char-from-code("f4f2"); -$icon-favorite-active_16: char-from-code("f4f3"); -$icon-favorite-active_20: char-from-code("f4f4"); -$icon-favorite-active_24: char-from-code("f4f5"); -$icon-favorite-active_28: char-from-code("f4f6"); -$icon-favorite-active_8: char-from-code("f4f7"); -$icon-favorite-filled_12: char-from-code("f4f8"); -$icon-favorite-filled_14: char-from-code("f4f9"); -$icon-favorite-filled_16: char-from-code("f4fa"); -$icon-favorite-filled_20: char-from-code("f4fb"); -$icon-favorite-filled_24: char-from-code("f4fc"); -$icon-favorite-filled_28: char-from-code("f4fd"); -$icon-favorite-filled_8: char-from-code("f4fe"); -$icon-fbw_16: char-from-code("f4ff"); -$icon-fbw_24: char-from-code("f500"); -$icon-feedback_12: char-from-code("f501"); -$icon-feedback_14: char-from-code("f502"); -$icon-feedback_16: char-from-code("f503"); -$icon-feedback_20: char-from-code("f504"); -$icon-feedback_72: char-from-code("f505"); -$icon-feedback_8: char-from-code("f506"); -$icon-feedback-active_12: char-from-code("f507"); -$icon-feedback-active_14: char-from-code("f508"); -$icon-feedback-active_16: char-from-code("f509"); -$icon-feedback-active_20: char-from-code("f50a"); -$icon-feedback-active_8: char-from-code("f50b"); -$icon-ffw_16: char-from-code("f50c"); -$icon-ffw_24: char-from-code("f50d"); -$icon-file-analysis_28: char-from-code("f50e"); -$icon-file-arf_40: char-from-code("f50f"); -$icon-file-audio_12: char-from-code("f510"); -$icon-file-audio_16: char-from-code("f511"); -$icon-file-audio_24: char-from-code("f512"); -$icon-file-audio_28: char-from-code("f513"); -$icon-file-audio_32: char-from-code("f514"); -$icon-file-audio_36: char-from-code("f515"); -$icon-file-audio_40: char-from-code("f516"); -$icon-file-audio_44: char-from-code("f517"); -$icon-file-audio_72: char-from-code("f518"); -$icon-file-dashboard_28: char-from-code("f519"); -$icon-file-excel_12: char-from-code("f51a"); -$icon-file-excel_16: char-from-code("f51b"); -$icon-file-excel_20: char-from-code("f51c"); -$icon-file-excel_24: char-from-code("f51d"); -$icon-file-excel_28: char-from-code("f51e"); -$icon-file-excel_32: char-from-code("f51f"); -$icon-file-excel_36: char-from-code("f520"); -$icon-file-excel_40: char-from-code("f521"); -$icon-file-excel_44: char-from-code("f522"); -$icon-file-excel_72: char-from-code("f523"); -$icon-file-excel-active_12: char-from-code("f524"); -$icon-file-excel-active_16: char-from-code("f525"); -$icon-file-excel-active_20: char-from-code("f526"); -$icon-file-excel-active_24: char-from-code("f527"); -$icon-file-excel-active_28: char-from-code("f528"); -$icon-file-excel-active_32: char-from-code("f529"); -$icon-file-excel-active_36: char-from-code("f52a"); -$icon-file-excel-active_40: char-from-code("f52b"); -$icon-file-excel-active_44: char-from-code("f52c"); -$icon-file-excel-active_72: char-from-code("f52d"); -$icon-file-graph_12: char-from-code("f52e"); -$icon-file-graph_16: char-from-code("f52f"); -$icon-file-graph_20: char-from-code("f530"); -$icon-file-graph_24: char-from-code("f531"); -$icon-file-graph_28: char-from-code("f532"); -$icon-file-graph_32: char-from-code("f533"); -$icon-file-graph_36: char-from-code("f534"); -$icon-file-graph_40: char-from-code("f535"); -$icon-file-graph_44: char-from-code("f536"); -$icon-file-graph_72: char-from-code("f537"); -$icon-file-graph-active_12: char-from-code("f538"); -$icon-file-graph-active_16: char-from-code("f539"); -$icon-file-graph-active_20: char-from-code("f53a"); -$icon-file-graph-active_24: char-from-code("f53b"); -$icon-file-graph-active_28: char-from-code("f53c"); -$icon-file-graph-active_32: char-from-code("f53d"); -$icon-file-graph-active_36: char-from-code("f53e"); -$icon-file-graph-active_40: char-from-code("f53f"); -$icon-file-graph-active_44: char-from-code("f540"); -$icon-file-graph-active_72: char-from-code("f541"); -$icon-file-image_12: char-from-code("f542"); -$icon-file-image_16: char-from-code("f543"); -$icon-file-image_24: char-from-code("f544"); -$icon-file-image_28: char-from-code("f545"); -$icon-file-image_32: char-from-code("f546"); -$icon-file-image_36: char-from-code("f547"); -$icon-file-image_40: char-from-code("f548"); -$icon-file-image_44: char-from-code("f549"); -$icon-file-image_72: char-from-code("f54a"); -$icon-file-locked_12: char-from-code("f54b"); -$icon-file-locked_24: char-from-code("f54c"); -$icon-file-locked_32: char-from-code("f54d"); -$icon-file-locked_36: char-from-code("f54e"); -$icon-file-locked_40: char-from-code("f54f"); -$icon-file-locked_72: char-from-code("f550"); -$icon-file-missing_16: char-from-code("f551"); -$icon-file-missing_24: char-from-code("f552"); -$icon-file-missing_36: char-from-code("f553"); -$icon-file-onenote_12: char-from-code("f554"); -$icon-file-onenote_16: char-from-code("f555"); -$icon-file-onenote_20: char-from-code("f556"); -$icon-file-onenote_24: char-from-code("f557"); -$icon-file-onenote_28: char-from-code("f558"); -$icon-file-onenote_32: char-from-code("f559"); -$icon-file-onenote_36: char-from-code("f55a"); -$icon-file-onenote_40: char-from-code("f55b"); -$icon-file-onenote_44: char-from-code("f55c"); -$icon-file-onenote_72: char-from-code("f55d"); -$icon-file-onenote-active_12: char-from-code("f55e"); -$icon-file-onenote-active_16: char-from-code("f55f"); -$icon-file-onenote-active_20: char-from-code("f560"); -$icon-file-onenote-active_24: char-from-code("f561"); -$icon-file-onenote-active_28: char-from-code("f562"); -$icon-file-onenote-active_32: char-from-code("f563"); -$icon-file-onenote-active_36: char-from-code("f564"); -$icon-file-onenote-active_40: char-from-code("f565"); -$icon-file-onenote-active_44: char-from-code("f566"); -$icon-file-onenote-active_72: char-from-code("f567"); -$icon-file-pdf_12: char-from-code("f568"); -$icon-file-pdf_16: char-from-code("f569"); -$icon-file-pdf_20: char-from-code("f56a"); -$icon-file-pdf_24: char-from-code("f56b"); -$icon-file-pdf_28: char-from-code("f56c"); -$icon-file-pdf_32: char-from-code("f56d"); -$icon-file-pdf_36: char-from-code("f56e"); -$icon-file-pdf_40: char-from-code("f56f"); -$icon-file-pdf_44: char-from-code("f570"); -$icon-file-pdf_72: char-from-code("f571"); -$icon-file-pdf-active_12: char-from-code("f572"); -$icon-file-pdf-active_16: char-from-code("f573"); -$icon-file-pdf-active_20: char-from-code("f574"); -$icon-file-pdf-active_24: char-from-code("f575"); -$icon-file-pdf-active_28: char-from-code("f576"); -$icon-file-pdf-active_32: char-from-code("f577"); -$icon-file-pdf-active_36: char-from-code("f578"); -$icon-file-pdf-active_40: char-from-code("f579"); -$icon-file-pdf-active_44: char-from-code("f57a"); -$icon-file-pdf-active_72: char-from-code("f57b"); -$icon-file-powerpoint_12: char-from-code("f57c"); -$icon-file-powerpoint_16: char-from-code("f57d"); -$icon-file-powerpoint_20: char-from-code("f57e"); -$icon-file-powerpoint_24: char-from-code("f57f"); -$icon-file-powerpoint_28: char-from-code("f580"); -$icon-file-powerpoint_32: char-from-code("f581"); -$icon-file-powerpoint_36: char-from-code("f582"); -$icon-file-powerpoint_40: char-from-code("f583"); -$icon-file-powerpoint_44: char-from-code("f584"); -$icon-file-powerpoint_72: char-from-code("f585"); -$icon-file-powerpoint-active_12: char-from-code("f586"); -$icon-file-powerpoint-active_16: char-from-code("f587"); -$icon-file-powerpoint-active_20: char-from-code("f588"); -$icon-file-powerpoint-active_24: char-from-code("f589"); -$icon-file-powerpoint-active_28: char-from-code("f58a"); -$icon-file-powerpoint-active_32: char-from-code("f58b"); -$icon-file-powerpoint-active_36: char-from-code("f58c"); -$icon-file-powerpoint-active_40: char-from-code("f58d"); -$icon-file-powerpoint-active_44: char-from-code("f58e"); -$icon-file-powerpoint-active_72: char-from-code("f58f"); -$icon-file-sketch_24: char-from-code("f590"); -$icon-file-spreadsheet_12: char-from-code("f591"); -$icon-file-spreadsheet_16: char-from-code("f592"); -$icon-file-spreadsheet_20: char-from-code("f593"); -$icon-file-spreadsheet_24: char-from-code("f594"); -$icon-file-spreadsheet_28: char-from-code("f595"); -$icon-file-spreadsheet_32: char-from-code("f596"); -$icon-file-spreadsheet_36: char-from-code("f597"); -$icon-file-spreadsheet_40: char-from-code("f598"); -$icon-file-spreadsheet_44: char-from-code("f599"); -$icon-file-spreadsheet_72: char-from-code("f59a"); -$icon-file-spreadsheet-active_12: char-from-code("f59b"); -$icon-file-spreadsheet-active_16: char-from-code("f59c"); -$icon-file-spreadsheet-active_20: char-from-code("f59d"); -$icon-file-spreadsheet-active_24: char-from-code("f59e"); -$icon-file-spreadsheet-active_28: char-from-code("f59f"); -$icon-file-spreadsheet-active_32: char-from-code("f5a0"); -$icon-file-spreadsheet-active_36: char-from-code("f5a1"); -$icon-file-spreadsheet-active_40: char-from-code("f5a2"); -$icon-file-spreadsheet-active_44: char-from-code("f5a3"); -$icon-file-spreadsheet-active_72: char-from-code("f5a4"); -$icon-file-text_12: char-from-code("f5a5"); -$icon-file-text_16: char-from-code("f5a6"); -$icon-file-text_20: char-from-code("f5a7"); -$icon-file-text_24: char-from-code("f5a8"); -$icon-file-text_28: char-from-code("f5a9"); -$icon-file-text_32: char-from-code("f5aa"); -$icon-file-text_36: char-from-code("f5ab"); -$icon-file-text_40: char-from-code("f5ac"); -$icon-file-text_44: char-from-code("f5ad"); -$icon-file-text_72: char-from-code("f5ae"); -$icon-file-text-active_12: char-from-code("f5af"); -$icon-file-text-active_16: char-from-code("f5b0"); -$icon-file-text-active_20: char-from-code("f5b1"); -$icon-file-text-active_24: char-from-code("f5b2"); -$icon-file-text-active_28: char-from-code("f5b3"); -$icon-file-text-active_32: char-from-code("f5b4"); -$icon-file-text-active_36: char-from-code("f5b5"); -$icon-file-text-active_40: char-from-code("f5b6"); -$icon-file-text-active_44: char-from-code("f5b7"); -$icon-file-text-active_72: char-from-code("f5b8"); -$icon-file-video_12: char-from-code("f5b9"); -$icon-file-video_16: char-from-code("f5ba"); -$icon-file-video_24: char-from-code("f5bb"); -$icon-file-video_28: char-from-code("f5bc"); -$icon-file-video_32: char-from-code("f5bd"); -$icon-file-video_36: char-from-code("f5be"); -$icon-file-video_40: char-from-code("f5bf"); -$icon-file-video_44: char-from-code("f5c0"); -$icon-file-video_72: char-from-code("f5c1"); -$icon-file-word_12: char-from-code("f5c2"); -$icon-file-word_16: char-from-code("f5c3"); -$icon-file-word_20: char-from-code("f5c4"); -$icon-file-word_24: char-from-code("f5c5"); -$icon-file-word_28: char-from-code("f5c6"); -$icon-file-word_32: char-from-code("f5c7"); -$icon-file-word_36: char-from-code("f5c8"); -$icon-file-word_40: char-from-code("f5c9"); -$icon-file-word_44: char-from-code("f5ca"); -$icon-file-word_72: char-from-code("f5cb"); -$icon-file-word-active_12: char-from-code("f5cc"); -$icon-file-word-active_16: char-from-code("f5cd"); -$icon-file-word-active_20: char-from-code("f5ce"); -$icon-file-word-active_24: char-from-code("f5cf"); -$icon-file-word-active_28: char-from-code("f5d0"); -$icon-file-word-active_32: char-from-code("f5d1"); -$icon-file-word-active_36: char-from-code("f5d2"); -$icon-file-word-active_40: char-from-code("f5d3"); -$icon-file-word-active_44: char-from-code("f5d4"); -$icon-file-word-active_72: char-from-code("f5d5"); -$icon-file-zip_12: char-from-code("f5d6"); -$icon-file-zip_16: char-from-code("f5d7"); -$icon-file-zip_24: char-from-code("f5d8"); -$icon-file-zip_28: char-from-code("f5d9"); -$icon-file-zip_32: char-from-code("f5da"); -$icon-file-zip_36: char-from-code("f5db"); -$icon-file-zip_40: char-from-code("f5dc"); -$icon-file-zip_44: char-from-code("f5dd"); -$icon-file-zip_72: char-from-code("f5de"); -$icon-files_10: char-from-code("f5df"); -$icon-files_12: char-from-code("f5e0"); -$icon-files_14: char-from-code("f5e1"); -$icon-files_16: char-from-code("f5e2"); -$icon-files_20: char-from-code("f5e3"); -$icon-files_24: char-from-code("f5e4"); -$icon-files_26: char-from-code("f5e5"); -$icon-files_28: char-from-code("f5e6"); -$icon-files_32: char-from-code("f5e7"); -$icon-files_36: char-from-code("f5e8"); -$icon-files_72: char-from-code("f5e9"); -$icon-files_8: char-from-code("f5ea"); -$icon-filter_10: char-from-code("f5eb"); -$icon-filter_16: char-from-code("f5ec"); -$icon-filter_24: char-from-code("f5ed"); -$icon-filter_32: char-from-code("f5ee"); -$icon-filter_8: char-from-code("f5ef"); -$icon-filter-adr_12: char-from-code("f5f0"); -$icon-filter-adr_14: char-from-code("f5f1"); -$icon-filter-adr_16: char-from-code("f5f2"); -$icon-filter-circle_12: char-from-code("f5f3"); -$icon-filter-circle_16: char-from-code("f5f4"); -$icon-filter-circle_20: char-from-code("f5f5"); -$icon-filter-circle-active_20: char-from-code("f5f6"); -$icon-fit-to-width_12: char-from-code("f5f7"); -$icon-fit-to-width_16: char-from-code("f5f8"); -$icon-fit-to-window_12: char-from-code("f5f9"); -$icon-fit-to-window_16: char-from-code("f5fa"); -$icon-fit-to-window-exit_12: char-from-code("f5fb"); -$icon-fit-to-window-exit_16: char-from-code("f5fc"); -$icon-flag_10: char-from-code("f5fd"); -$icon-flag_12: char-from-code("f5fe"); -$icon-flag_14: char-from-code("f5ff"); -$icon-flag_16: char-from-code("f600"); -$icon-flag_20: char-from-code("f601"); -$icon-flag_24: char-from-code("f602"); -$icon-flag_64: char-from-code("f603"); -$icon-flag_8: char-from-code("f604"); -$icon-flag-active_10: char-from-code("f605"); -$icon-flag-active_12: char-from-code("f606"); -$icon-flag-active_14: char-from-code("f607"); -$icon-flag-active_16: char-from-code("f608"); -$icon-flag-active_20: char-from-code("f609"); -$icon-flag-active_24: char-from-code("f60a"); -$icon-flag-active_8: char-from-code("f60b"); -$icon-flag-circle_16: char-from-code("f60c"); -$icon-flow_16: char-from-code("f60d"); -$icon-flow_32: char-from-code("f60e"); -$icon-focus-3-day_24: char-from-code("f60f"); -$icon-focus-day_24: char-from-code("f610"); -$icon-focus-month_24: char-from-code("f611"); -$icon-focus-upcoming_24: char-from-code("f612"); -$icon-focus-week_24: char-from-code("f613"); -$icon-folder-edit_24: char-from-code("f614"); -$icon-folder-lock_24: char-from-code("f615"); -$icon-folder-view_24: char-from-code("f616"); -$icon-font-family_12: char-from-code("f617"); -$icon-font-family_16: char-from-code("f618"); -$icon-forward-message_10: char-from-code("f619"); -$icon-forward-message_12: char-from-code("f61a"); -$icon-forward-message_16: char-from-code("f61b"); -$icon-forward-message_20: char-from-code("f61c"); -$icon-four-way-navigation_20: char-from-code("f61d"); -$icon-four-way-navigation_24: char-from-code("f61e"); -$icon-fullscreen_12: char-from-code("f61f"); -$icon-fullscreen_16: char-from-code("f620"); -$icon-fullscreen-c-native-macOS_14: char-from-code("f621"); -$icon-fullscreen-exit_12: char-from-code("f622"); -$icon-fullscreen-exit_16: char-from-code("f623"); -$icon-generic-device_12: char-from-code("f624"); -$icon-generic-device_14: char-from-code("f625"); -$icon-generic-device_16: char-from-code("f626"); -$icon-generic-device_20: char-from-code("f627"); -$icon-generic-device_24: char-from-code("f628"); -$icon-generic-device_28: char-from-code("f629"); -$icon-generic-device_32: char-from-code("f62a"); -$icon-generic-device_48: char-from-code("f62b"); -$icon-generic-device-video_12: char-from-code("f62c"); -$icon-generic-device-video_14: char-from-code("f62d"); -$icon-generic-device-video_16: char-from-code("f62e"); -$icon-generic-device-video_20: char-from-code("f62f"); -$icon-generic-voice-command_24: char-from-code("f630"); -$icon-gif_12: char-from-code("f631"); -$icon-gif_16: char-from-code("f632"); -$icon-gif_20: char-from-code("f633"); -$icon-gif_24: char-from-code("f634"); -$icon-github-circle_24: char-from-code("f635"); -$icon-github-circle_32: char-from-code("f636"); -$icon-github-circle_40: char-from-code("f637"); -$icon-google_16: char-from-code("f638"); -$icon-guest-issuer_36: char-from-code("f639"); -$icon-guest-issuer_56: char-from-code("f63a"); -$icon-handset_10: char-from-code("f63b"); -$icon-handset_12: char-from-code("f63c"); -$icon-handset_120: char-from-code("f63d"); -$icon-handset_124: char-from-code("f63e"); -$icon-handset_14: char-from-code("f63f"); -$icon-handset_16: char-from-code("f640"); -$icon-handset_18: char-from-code("f641"); -$icon-handset_20: char-from-code("f642"); -$icon-handset_24: char-from-code("f643"); -$icon-handset_26: char-from-code("f644"); -$icon-handset_28: char-from-code("f645"); -$icon-handset_32: char-from-code("f646"); -$icon-handset_36: char-from-code("f647"); -$icon-handset_40: char-from-code("f648"); -$icon-handset_48: char-from-code("f649"); -$icon-handset_56: char-from-code("f64a"); -$icon-handset_64: char-from-code("f64b"); -$icon-handset_8: char-from-code("f64c"); -$icon-handset-active_10: char-from-code("f64d"); -$icon-handset-active_12: char-from-code("f64e"); -$icon-handset-active_14: char-from-code("f64f"); -$icon-handset-active_16: char-from-code("f650"); -$icon-handset-active_18: char-from-code("f651"); -$icon-handset-active_20: char-from-code("f652"); -$icon-handset-active_24: char-from-code("f653"); -$icon-handset-active_26: char-from-code("f654"); -$icon-handset-active_28: char-from-code("f655"); -$icon-handset-active_32: char-from-code("f656"); -$icon-handset-active_36: char-from-code("f657"); -$icon-handset-active_40: char-from-code("f658"); -$icon-handset-active_48: char-from-code("f659"); -$icon-handset-active_56: char-from-code("f65a"); -$icon-handset-active_64: char-from-code("f65b"); -$icon-handset-active_8: char-from-code("f65c"); -$icon-handset-alert_20: char-from-code("f65d"); -$icon-handset-alert_24: char-from-code("f65e"); -$icon-handset-muted_12: char-from-code("f65f"); -$icon-handset-muted_14: char-from-code("f660"); -$icon-handset-muted_16: char-from-code("f661"); -$icon-handset-muted_20: char-from-code("f662"); -$icon-handset-muted_24: char-from-code("f663"); -$icon-handset-muted_64: char-from-code("f664"); -$icon-handset-presence_12: char-from-code("f665"); -$icon-handset-presence_14: char-from-code("f666"); -$icon-handset-presence_24: char-from-code("f667"); -$icon-handset-presence_28: char-from-code("f668"); -$icon-handset-presence_8: char-from-code("f669"); -$icon-handset-presence-active_14: char-from-code("f66a"); -$icon-handset-presence-active_24: char-from-code("f66b"); -$icon-handset-presence-stroke_10: char-from-code("f66c"); -$icon-handset-presence-stroke_14: char-from-code("f66d"); -$icon-handset-presence-stroke_16: char-from-code("f66e"); -$icon-handset-presence-stroke_26: char-from-code("f66f"); -$icon-handset-presence-stroke_30: char-from-code("f670"); -$icon-handshake_14: char-from-code("f671"); -$icon-hd-badge_28: char-from-code("f672"); -$icon-headset_12: char-from-code("f673"); -$icon-headset_14: char-from-code("f674"); -$icon-headset_16: char-from-code("f675"); -$icon-headset_18: char-from-code("f676"); -$icon-headset_20: char-from-code("f677"); -$icon-headset_24: char-from-code("f678"); -$icon-headset_32: char-from-code("f679"); -$icon-headset_36: char-from-code("f67a"); -$icon-headset_48: char-from-code("f67b"); -$icon-headset_8: char-from-code("f67c"); -$icon-headset-alert_12: char-from-code("f67d"); -$icon-headset-muted_12: char-from-code("f67e"); -$icon-headset-muted_16: char-from-code("f67f"); -$icon-headset-muted_24: char-from-code("f680"); -$icon-headset-muted_32: char-from-code("f681"); -$icon-headset-muted_48: char-from-code("f682"); -$icon-headset-muted-alert_12: char-from-code("f683"); -$icon-headset-muted-private_12: char-from-code("f684"); -$icon-headset-private_12: char-from-code("f685"); -$icon-headset-selected_20: char-from-code("f686"); -$icon-help_10: char-from-code("f687"); -$icon-help_12: char-from-code("f688"); -$icon-help_16: char-from-code("f689"); -$icon-help_20: char-from-code("f68a"); -$icon-help_24: char-from-code("f68b"); -$icon-help_8: char-from-code("f68c"); -$icon-help-circle_12: char-from-code("f68d"); -$icon-help-circle_14: char-from-code("f68e"); -$icon-help-circle_16: char-from-code("f68f"); -$icon-help-circle_20: char-from-code("f690"); -$icon-help-circle_24: char-from-code("f691"); -$icon-help-circle_36: char-from-code("f692"); -$icon-help-circle_44: char-from-code("f693"); -$icon-help-circle_72: char-from-code("f694"); -$icon-help-circle-active_12: char-from-code("f695"); -$icon-help-circle-active_16: char-from-code("f696"); -$icon-help-circle-active_20: char-from-code("f697"); -$icon-help-circle-active_24: char-from-code("f698"); -$icon-help-circle-active_36: char-from-code("f699"); -$icon-help-circle-active_44: char-from-code("f69a"); -$icon-help-circle-active_72: char-from-code("f69b"); -$icon-hide_10: char-from-code("f69c"); -$icon-hide_12: char-from-code("f69d"); -$icon-hide_16: char-from-code("f69e"); -$icon-hide_20: char-from-code("f69f"); -$icon-hide_24: char-from-code("f6a0"); -$icon-home_16: char-from-code("f6a1"); -$icon-home_20: char-from-code("f6a2"); -$icon-home_24: char-from-code("f6a3"); -$icon-home_32: char-from-code("f6a4"); -$icon-home-active_16: char-from-code("f6a5"); -$icon-home-active_20: char-from-code("f6a6"); -$icon-home-active_24: char-from-code("f6a7"); -$icon-home-active_32: char-from-code("f6a8"); -$icon-horizontal-line_12: char-from-code("f6a9"); -$icon-horizontal-line_16: char-from-code("f6aa"); -$icon-horizontal-line_24: char-from-code("f6ab"); -$icon-house_16: char-from-code("f6ac"); -$icon-house_20: char-from-code("f6ad"); -$icon-house_24: char-from-code("f6ae"); -$icon-house_32: char-from-code("f6af"); -$icon-humidity_14: char-from-code("f6b0"); -$icon-hunt-group_12: char-from-code("f6b1"); -$icon-hunt-group_14: char-from-code("f6b2"); -$icon-hunt-group_16: char-from-code("f6b3"); -$icon-hunt-group_18: char-from-code("f6b4"); -$icon-hunt-group_20: char-from-code("f6b5"); -$icon-hunt-group_24: char-from-code("f6b6"); -$icon-import_12: char-from-code("f6b7"); -$icon-import_16: char-from-code("f6b8"); -$icon-import_24: char-from-code("f6b9"); -$icon-incognito_18: char-from-code("f6ba"); -$icon-incognito_24: char-from-code("f6bb"); -$icon-incognito_40: char-from-code("f6bc"); -$icon-incoming-call-active_12: char-from-code("f6bd"); -$icon-incoming-call-active_16: char-from-code("f6be"); -$icon-incoming-call-legacy_12: char-from-code("f6bf"); -$icon-incoming-call-legacy_16: char-from-code("f6c0"); -$icon-incoming-call-legacy_20: char-from-code("f6c1"); -$icon-incoming-call-legacy_36: char-from-code("f6c2"); -$icon-incoming-call-selected_20: char-from-code("f6c3"); -$icon-incoming-call-selected_24: char-from-code("f6c4"); -$icon-indeterminate-circle-active_16: char-from-code("f6c5"); -$icon-info_12: char-from-code("f6c6"); -$icon-info_14: char-from-code("f6c7"); -$icon-info_16: char-from-code("f6c8"); -$icon-info_18: char-from-code("f6c9"); -$icon-info_20: char-from-code("f6ca"); -$icon-info_24: char-from-code("f6cb"); -$icon-info_28: char-from-code("f6cc"); -$icon-info_32: char-from-code("f6cd"); -$icon-info_40: char-from-code("f6ce"); -$icon-info_44: char-from-code("f6cf"); -$icon-info_72: char-from-code("f6d0"); -$icon-info_8: char-from-code("f6d1"); -$icon-info-active_12: char-from-code("f6d2"); -$icon-info-active_16: char-from-code("f6d3"); -$icon-info-active_18: char-from-code("f6d4"); -$icon-info-active_20: char-from-code("f6d5"); -$icon-info-active_24: char-from-code("f6d6"); -$icon-info-active_28: char-from-code("f6d7"); -$icon-info-active_32: char-from-code("f6d8"); -$icon-info-active_40: char-from-code("f6d9"); -$icon-info-active_44: char-from-code("f6da"); -$icon-info-active_72: char-from-code("f6db"); -$icon-info-i_10: char-from-code("f6dc"); -$icon-info-i_12: char-from-code("f6dd"); -$icon-info-i_20: char-from-code("f6de"); -$icon-info-i_8: char-from-code("f6df"); -$icon-input_10: char-from-code("f6e0"); -$icon-input_12: char-from-code("f6e1"); -$icon-input_14: char-from-code("f6e2"); -$icon-input_16: char-from-code("f6e3"); -$icon-input_24: char-from-code("f6e4"); -$icon-input_26: char-from-code("f6e5"); -$icon-input_28: char-from-code("f6e6"); -$icon-input_36: char-from-code("f6e7"); -$icon-input_8: char-from-code("f6e8"); -$icon-instagram-circle_24: char-from-code("f6e9"); -$icon-instagram-circle_32: char-from-code("f6ea"); -$icon-integrations_16: char-from-code("f6eb"); -$icon-integrations_24: char-from-code("f6ec"); -$icon-invited-user_16: char-from-code("f6ed"); -$icon-invited-user_32: char-from-code("f6ee"); -$icon-invited-user_56: char-from-code("f6ef"); -$icon-jabber_14: char-from-code("f6f0"); -$icon-jabber_16: char-from-code("f6f1"); -$icon-jabber-hub_16: char-from-code("f6f2"); -$icon-join-audio_12: char-from-code("f6f3"); -$icon-join-audio_16: char-from-code("f6f4"); -$icon-join-audio_20: char-from-code("f6f5"); -$icon-join-audio_24: char-from-code("f6f6"); -$icon-keyboard_16: char-from-code("f6f7"); -$icon-keyboard_20: char-from-code("f6f8"); -$icon-keyboard_24: char-from-code("f6f9"); -$icon-keyboard_28: char-from-code("f6fa"); -$icon-keyboard-close_16: char-from-code("f6fb"); -$icon-keyboard-close_24: char-from-code("f6fc"); -$icon-language_12: char-from-code("f6fd"); -$icon-language_16: char-from-code("f6fe"); -$icon-language_20: char-from-code("f6ff"); -$icon-language_24: char-from-code("f700"); -$icon-language_28: char-from-code("f701"); -$icon-language_40: char-from-code("f702"); -$icon-laptop_12: char-from-code("f703"); -$icon-laptop_16: char-from-code("f704"); -$icon-laptop_20: char-from-code("f705"); -$icon-laptop_24: char-from-code("f706"); -$icon-laptop_48: char-from-code("f707"); -$icon-laptop_72: char-from-code("f708"); -$icon-laser-pointer_16: char-from-code("f709"); -$icon-launch_12: char-from-code("f70a"); -$icon-launch_16: char-from-code("f70b"); -$icon-launch_20: char-from-code("f70c"); -$icon-launch_32: char-from-code("f70d"); -$icon-layout-equal-dual_12: char-from-code("f70e"); -$icon-layout-equal-dual_16: char-from-code("f70f"); -$icon-layout-equal-dual_20: char-from-code("f710"); -$icon-layout-equal-dual_24: char-from-code("f711"); -$icon-layout-side-by-side-horizonal_16: char-from-code("f712"); -$icon-layout-side-by-side-vertical_12: char-from-code("f713"); -$icon-layout-side-by-side-vertical_16: char-from-code("f714"); -$icon-layout-side-by-side-vertical_24: char-from-code("f715"); -$icon-layout-stacked_12: char-from-code("f716"); -$icon-layout-stacked_16: char-from-code("f717"); -$icon-layout-stacked_28: char-from-code("f718"); -$icon-leave-breakout-session_16: char-from-code("f719"); -$icon-like_12: char-from-code("f71a"); -$icon-like_16: char-from-code("f71b"); -$icon-like_24: char-from-code("f71c"); -$icon-link_10: char-from-code("f71d"); -$icon-link_12: char-from-code("f71e"); -$icon-link_14: char-from-code("f71f"); -$icon-link_16: char-from-code("f720"); -$icon-link_18: char-from-code("f721"); -$icon-link_20: char-from-code("f722"); -$icon-link_24: char-from-code("f723"); -$icon-linkedin_16: char-from-code("f724"); -$icon-linkedin-circle_24: char-from-code("f725"); -$icon-linkedin-circle_32: char-from-code("f726"); -$icon-linkedin-circle_40: char-from-code("f727"); -$icon-list-menu_12: char-from-code("f728"); -$icon-list-menu_16: char-from-code("f729"); -$icon-list-menu_18: char-from-code("f72a"); -$icon-list-menu_20: char-from-code("f72b"); -$icon-list-menu_24: char-from-code("f72c"); -$icon-list-menu_28: char-from-code("f72d"); -$icon-location_10: char-from-code("f72e"); -$icon-location_16: char-from-code("f72f"); -$icon-location_18: char-from-code("f730"); -$icon-location_20: char-from-code("f731"); -$icon-location_24: char-from-code("f732"); -$icon-location_28: char-from-code("f733"); -$icon-location_32: char-from-code("f734"); -$icon-lock_10: char-from-code("f735"); -$icon-lock_12: char-from-code("f736"); -$icon-lock_24: char-from-code("f737"); -$icon-lock_8: char-from-code("f738"); -$icon-lower-hand_12: char-from-code("f739"); -$icon-lower-hand_16: char-from-code("f73a"); -$icon-lower-hand_20: char-from-code("f73b"); -$icon-mark-as-read_12: char-from-code("f73c"); -$icon-mark-as-unread_12: char-from-code("f73d"); -$icon-mark-as-unread_20: char-from-code("f73e"); -$icon-markdown_16: char-from-code("f73f"); -$icon-markdown_20: char-from-code("f740"); -$icon-marker_12: char-from-code("f741"); -$icon-marker_14: char-from-code("f742"); -$icon-marker_16: char-from-code("f743"); -$icon-marker_18: char-from-code("f744"); -$icon-maximize_12: char-from-code("f745"); -$icon-maximize_14: char-from-code("f746"); -$icon-maximize_16: char-from-code("f747"); -$icon-maximize_20: char-from-code("f748"); -$icon-maximize_24: char-from-code("f749"); -$icon-maximize_28: char-from-code("f74a"); -$icon-meet_10: char-from-code("f74b"); -$icon-meet_12: char-from-code("f74c"); -$icon-meet_120: char-from-code("f74d"); -$icon-meet_124: char-from-code("f74e"); -$icon-meet_14: char-from-code("f74f"); -$icon-meet_16: char-from-code("f750"); -$icon-meet_18: char-from-code("f751"); -$icon-meet_20: char-from-code("f752"); -$icon-meet_24: char-from-code("f753"); -$icon-meet_26: char-from-code("f754"); -$icon-meet_32: char-from-code("f755"); -$icon-meet_48: char-from-code("f756"); -$icon-meet_56: char-from-code("f757"); -$icon-meet-end_16: char-from-code("f758"); -$icon-meeting-controls_16: char-from-code("f759"); -$icon-meetings_10: char-from-code("f75a"); -$icon-meetings_12: char-from-code("f75b"); -$icon-meetings_14: char-from-code("f75c"); -$icon-meetings_16: char-from-code("f75d"); -$icon-meetings_18: char-from-code("f75e"); -$icon-meetings_20: char-from-code("f75f"); -$icon-meetings_24: char-from-code("f760"); -$icon-meetings_26: char-from-code("f761"); -$icon-meetings_28: char-from-code("f762"); -$icon-meetings_32: char-from-code("f763"); -$icon-meetings_36: char-from-code("f764"); -$icon-meetings_8: char-from-code("f765"); -$icon-meetings-active_10: char-from-code("f766"); -$icon-meetings-active_12: char-from-code("f767"); -$icon-meetings-active_14: char-from-code("f768"); -$icon-meetings-active_16: char-from-code("f769"); -$icon-meetings-active_18: char-from-code("f76a"); -$icon-meetings-active_20: char-from-code("f76b"); -$icon-meetings-active_24: char-from-code("f76c"); -$icon-meetings-active_26: char-from-code("f76d"); -$icon-meetings-active_28: char-from-code("f76e"); -$icon-meetings-active_32: char-from-code("f76f"); -$icon-meetings-active_36: char-from-code("f770"); -$icon-meetings-active_8: char-from-code("f771"); -$icon-meetings-presence_12: char-from-code("f772"); -$icon-meetings-presence_14: char-from-code("f773"); -$icon-meetings-presence_24: char-from-code("f774"); -$icon-meetings-presence_28: char-from-code("f775"); -$icon-meetings-presence_8: char-from-code("f776"); -$icon-meetings-presence-stroke_10: char-from-code("f777"); -$icon-meetings-presence-stroke_14: char-from-code("f778"); -$icon-meetings-presence-stroke_16: char-from-code("f779"); -$icon-meetings-presence-stroke_26: char-from-code("f77a"); -$icon-meetings-presence-stroke_30: char-from-code("f77b"); -$icon-mention_10: char-from-code("f77c"); -$icon-mention_12: char-from-code("f77d"); -$icon-mention_14: char-from-code("f77e"); -$icon-mention_16: char-from-code("f77f"); -$icon-mention_18: char-from-code("f780"); -$icon-mention_20: char-from-code("f781"); -$icon-mention_24: char-from-code("f782"); -$icon-mention_8: char-from-code("f783"); -$icon-messenger_12: char-from-code("f784"); -$icon-messenger_16: char-from-code("f785"); -$icon-microphone_10: char-from-code("f786"); -$icon-microphone_12: char-from-code("f787"); -$icon-microphone_14: char-from-code("f788"); -$icon-microphone_16: char-from-code("f789"); -$icon-microphone_18: char-from-code("f78a"); -$icon-microphone_20: char-from-code("f78b"); -$icon-microphone_24: char-from-code("f78c"); -$icon-microphone_28: char-from-code("f78d"); -$icon-microphone_36: char-from-code("f78e"); -$icon-microphone_8: char-from-code("f78f"); -$icon-microphone-muted_10: char-from-code("f790"); -$icon-microphone-muted_12: char-from-code("f791"); -$icon-microphone-muted_14: char-from-code("f792"); -$icon-microphone-muted_16: char-from-code("f793"); -$icon-microphone-muted_18: char-from-code("f794"); -$icon-microphone-muted_20: char-from-code("f795"); -$icon-microphone-muted_24: char-from-code("f796"); -$icon-microphone-muted_28: char-from-code("f797"); -$icon-microphone-muted_32: char-from-code("f798"); -$icon-microphone-muted_36: char-from-code("f799"); -$icon-microphone-muted_8: char-from-code("f79a"); -$icon-microphone-on_16: char-from-code("f79b"); -$icon-microphone-on_20: char-from-code("f79c"); -$icon-microphone-on_24: char-from-code("f79d"); -$icon-mind-map_24: char-from-code("f79e"); -$icon-minimize_12: char-from-code("f79f"); -$icon-minimize_14: char-from-code("f7a0"); -$icon-minimize_16: char-from-code("f7a1"); -$icon-minimize_20: char-from-code("f7a2"); -$icon-minimize_24: char-from-code("f7a3"); -$icon-minimize_28: char-from-code("f7a4"); -$icon-minus_12: char-from-code("f7a5"); -$icon-minus_14: char-from-code("f7a6"); -$icon-minus_16: char-from-code("f7a7"); -$icon-minus_18: char-from-code("f7a8"); -$icon-minus_20: char-from-code("f7a9"); -$icon-minus_24: char-from-code("f7aa"); -$icon-minus_28: char-from-code("f7ab"); -$icon-minus_8: char-from-code("f7ac"); -$icon-mirror_12: char-from-code("f7ad"); -$icon-mirror_16: char-from-code("f7ae"); -$icon-moderator_16: char-from-code("f7af"); -$icon-moderator_56: char-from-code("f7b0"); -$icon-moderator_80: char-from-code("f7b1"); -$icon-more_10: char-from-code("f7b2"); -$icon-more_12: char-from-code("f7b3"); -$icon-more_14: char-from-code("f7b4"); -$icon-more_16: char-from-code("f7b5"); -$icon-more_18: char-from-code("f7b6"); -$icon-more_20: char-from-code("f7b7"); -$icon-more_24: char-from-code("f7b8"); -$icon-more_28: char-from-code("f7b9"); -$icon-more-adr_12: char-from-code("f7ba"); -$icon-more-adr_16: char-from-code("f7bb"); -$icon-more-adr_20: char-from-code("f7bc"); -$icon-more-adr_24: char-from-code("f7bd"); -$icon-more-adr_28: char-from-code("f7be"); -$icon-more-android_12: char-from-code("f7bf"); -$icon-more-android_16: char-from-code("f7c0"); -$icon-more-android_20: char-from-code("f7c1"); -$icon-more-android_24: char-from-code("f7c2"); -$icon-more-android_28: char-from-code("f7c3"); -$icon-more-circle_12: char-from-code("f7c4"); -$icon-more-circle_140: char-from-code("f7c5"); -$icon-more-circle_16: char-from-code("f7c6"); -$icon-more-circle_20: char-from-code("f7c7"); -$icon-more-circle-active_20: char-from-code("f7c8"); -$icon-mouse-cursor_16: char-from-code("f7c9"); -$icon-move-call-in-adr_12: char-from-code("f7ca"); -$icon-move-call-in-adr_16: char-from-code("f7cb"); -$icon-move-call-in-adr_18: char-from-code("f7cc"); -$icon-move-call-in-adr_20: char-from-code("f7cd"); -$icon-move-call-in-adr_24: char-from-code("f7ce"); -$icon-move-call-in-adr_28: char-from-code("f7cf"); -$icon-move-call-in-iph_12: char-from-code("f7d0"); -$icon-move-call-in-iph_16: char-from-code("f7d1"); -$icon-move-call-in-iph_18: char-from-code("f7d2"); -$icon-move-call-in-iph_20: char-from-code("f7d3"); -$icon-move-call-in-iph_24: char-from-code("f7d4"); -$icon-move-call-in-iph_28: char-from-code("f7d5"); -$icon-move-call-in-laptop_12: char-from-code("f7d6"); -$icon-move-call-in-laptop_16: char-from-code("f7d7"); -$icon-move-call-in-laptop_18: char-from-code("f7d8"); -$icon-move-call-in-laptop_20: char-from-code("f7d9"); -$icon-move-call-in-laptop_24: char-from-code("f7da"); -$icon-move-call-in-laptop_28: char-from-code("f7db"); -$icon-move-call-in-out-adr_28: char-from-code("f7dc"); -$icon-move-call-in-out-iph_28: char-from-code("f7dd"); -$icon-move-call-in-tablet_12: char-from-code("f7de"); -$icon-move-call-in-tablet_18: char-from-code("f7df"); -$icon-move-call-in-tablet_20: char-from-code("f7e0"); -$icon-move-call-in-tablet_24: char-from-code("f7e1"); -$icon-move-call-in-tablet_28: char-from-code("f7e2"); -$icon-move-call-out-adr_12: char-from-code("f7e3"); -$icon-move-call-out-adr_16: char-from-code("f7e4"); -$icon-move-call-out-adr_18: char-from-code("f7e5"); -$icon-move-call-out-adr_20: char-from-code("f7e6"); -$icon-move-call-out-adr_24: char-from-code("f7e7"); -$icon-move-call-out-adr_28: char-from-code("f7e8"); -$icon-move-call-out-iph_12: char-from-code("f7e9"); -$icon-move-call-out-iph_16: char-from-code("f7ea"); -$icon-move-call-out-iph_18: char-from-code("f7eb"); -$icon-move-call-out-iph_20: char-from-code("f7ec"); -$icon-move-call-out-iph_24: char-from-code("f7ed"); -$icon-move-call-out-iph_28: char-from-code("f7ee"); -$icon-move-call-out-laptop_12: char-from-code("f7ef"); -$icon-move-call-out-laptop_16: char-from-code("f7f0"); -$icon-move-call-out-laptop_18: char-from-code("f7f1"); -$icon-move-call-out-laptop_20: char-from-code("f7f2"); -$icon-move-call-out-laptop_24: char-from-code("f7f3"); -$icon-move-call-out-laptop_28: char-from-code("f7f4"); -$icon-move-call-out-tablet_12: char-from-code("f7f5"); -$icon-move-call-out-tablet_18: char-from-code("f7f6"); -$icon-move-call-out-tablet_20: char-from-code("f7f7"); -$icon-move-call-out-tablet_24: char-from-code("f7f8"); -$icon-move-call-out-tablet_28: char-from-code("f7f9"); -$icon-multiline-chart_16: char-from-code("f7fa"); -$icon-multiline-chart_20: char-from-code("f7fb"); -$icon-multimedia_16: char-from-code("f7fc"); -$icon-multimedia_20: char-from-code("f7fd"); -$icon-multiple-devices_16: char-from-code("f7fe"); -$icon-multiple-devices_20: char-from-code("f7ff"); -$icon-multiple-devices_24: char-from-code("f800"); -$icon-multiple-devices_28: char-from-code("f801"); -$icon-multiple-devices_64: char-from-code("f802"); -$icon-music-mode_12: char-from-code("f803"); -$icon-music-mode_16: char-from-code("f804"); -$icon-music-mode_24: char-from-code("f805"); -$icon-music-mode_8: char-from-code("f806"); -$icon-mute-on-entry_16: char-from-code("f807"); -$icon-new-idea_16: char-from-code("f808"); -$icon-new-idea_24: char-from-code("f809"); -$icon-new-voicemail_16: char-from-code("f80a"); -$icon-new-voicemail_20: char-from-code("f80b"); -$icon-new-voicemail_24: char-from-code("f80c"); -$icon-new-whiteboard_12: char-from-code("f80d"); -$icon-new-whiteboard_16: char-from-code("f80e"); -$icon-next_10: char-from-code("f80f"); -$icon-next_12: char-from-code("f810"); -$icon-next_14: char-from-code("f811"); -$icon-next_16: char-from-code("f812"); -$icon-next_18: char-from-code("f813"); -$icon-next_20: char-from-code("f814"); -$icon-next_24: char-from-code("f815"); -$icon-next_28: char-from-code("f816"); -$icon-next_36: char-from-code("f817"); -$icon-no-devices_28: char-from-code("f818"); -$icon-no-phone-warning_20: char-from-code("f819"); -$icon-no-phone-warning_24: char-from-code("f81a"); -$icon-note_16: char-from-code("f81b"); -$icon-note_20: char-from-code("f81c"); -$icon-note_24: char-from-code("f81d"); -$icon-note-ppt_16: char-from-code("f81e"); -$icon-note-ppt_20: char-from-code("f81f"); -$icon-notepad_16: char-from-code("f820"); -$icon-notes_10: char-from-code("f821"); -$icon-notes_12: char-from-code("f822"); -$icon-notes_14: char-from-code("f823"); -$icon-notes_16: char-from-code("f824"); -$icon-notes_20: char-from-code("f825"); -$icon-notes_24: char-from-code("f826"); -$icon-notes_26: char-from-code("f827"); -$icon-notes_28: char-from-code("f828"); -$icon-notes_36: char-from-code("f829"); -$icon-notes_8: char-from-code("f82a"); -$icon-one-to-one-zoom_16: char-from-code("f82b"); -$icon-open-in-folder_10: char-from-code("f82c"); -$icon-open-in-folder_12: char-from-code("f82d"); -$icon-open-in-folder_14: char-from-code("f82e"); -$icon-open-in-folder_16: char-from-code("f82f"); -$icon-open-in-folder_20: char-from-code("f830"); -$icon-open-pages_12: char-from-code("f831"); -$icon-open-pages_14: char-from-code("f832"); -$icon-open-pages_16: char-from-code("f833"); -$icon-open-pages_24: char-from-code("f834"); -$icon-open-pages_36: char-from-code("f835"); -$icon-other-number_12: char-from-code("f836"); -$icon-other-number_14: char-from-code("f837"); -$icon-other-number_16: char-from-code("f838"); -$icon-other-number_20: char-from-code("f839"); -$icon-other-number-warning_16: char-from-code("f83a"); -$icon-outgoing-call-active_12: char-from-code("f83b"); -$icon-outgoing-call-active_16: char-from-code("f83c"); -$icon-outgoing-call-legacy_12: char-from-code("f83d"); -$icon-outgoing-call-legacy_16: char-from-code("f83e"); -$icon-outgoing-call-legacy_20: char-from-code("f83f"); -$icon-outgoing-call-legacy_36: char-from-code("f840"); -$icon-outgoing-call-selected_20: char-from-code("f841"); -$icon-outgoing-call-selected_24: char-from-code("f842"); -$icon-overflow-left_16: char-from-code("f843"); -$icon-overflow-right_16: char-from-code("f844"); -$icon-paired-camera_16: char-from-code("f845"); -$icon-paired-camera_24: char-from-code("f846"); -$icon-paired-camera_28: char-from-code("f847"); -$icon-paired-device_16: char-from-code("f848"); -$icon-paired-device_24: char-from-code("f849"); -$icon-paired-device_56: char-from-code("f84a"); -$icon-paired-device_96: char-from-code("f84b"); -$icon-paired-handset_16: char-from-code("f84c"); -$icon-paired-handset_24: char-from-code("f84d"); -$icon-pairing_14: char-from-code("f84e"); -$icon-pairing_16: char-from-code("f84f"); -$icon-pairing_20: char-from-code("f850"); -$icon-pairing_24: char-from-code("f851"); -$icon-pairing_28: char-from-code("f852"); -$icon-pairing_56: char-from-code("f853"); -$icon-panel-control-bar_36: char-from-code("f854"); -$icon-panel-control-down_12: char-from-code("f855"); -$icon-panel-control-down_24: char-from-code("f856"); -$icon-panel-control-down_28: char-from-code("f857"); -$icon-panel-control-down_36: char-from-code("f858"); -$icon-panel-control-down-iph_12: char-from-code("f859"); -$icon-panel-control-down-iph_24: char-from-code("f85a"); -$icon-panel-control-down-iph_36: char-from-code("f85b"); -$icon-panel-control-dragger_14: char-from-code("f85c"); -$icon-panel-control-dragger_16: char-from-code("f85d"); -$icon-panel-control-left_12: char-from-code("f85e"); -$icon-panel-control-left_16: char-from-code("f85f"); -$icon-panel-control-left_24: char-from-code("f860"); -$icon-panel-control-left_36: char-from-code("f861"); -$icon-panel-control-left-iph_12: char-from-code("f862"); -$icon-panel-control-left-iph_24: char-from-code("f863"); -$icon-panel-control-left-iph_36: char-from-code("f864"); -$icon-panel-control-right_12: char-from-code("f865"); -$icon-panel-control-right_16: char-from-code("f866"); -$icon-panel-control-right_24: char-from-code("f867"); -$icon-panel-control-right_36: char-from-code("f868"); -$icon-panel-control-right-iph_12: char-from-code("f869"); -$icon-panel-control-right-iph_24: char-from-code("f86a"); -$icon-panel-control-right-iph_36: char-from-code("f86b"); -$icon-panel-control-thin-down_12: char-from-code("f86c"); -$icon-panel-control-thin-down_24: char-from-code("f86d"); -$icon-panel-control-thin-down_28: char-from-code("f86e"); -$icon-panel-control-thin-left_12: char-from-code("f86f"); -$icon-panel-control-thin-left_24: char-from-code("f870"); -$icon-panel-control-thin-right_12: char-from-code("f871"); -$icon-panel-control-thin-right_24: char-from-code("f872"); -$icon-panel-control-thin-up_12: char-from-code("f873"); -$icon-panel-control-thin-up_24: char-from-code("f874"); -$icon-panel-control-thin-up_28: char-from-code("f875"); -$icon-panel-control-thinner-left_24: char-from-code("f876"); -$icon-panel-control-thinner-right_24: char-from-code("f877"); -$icon-panel-control-up_12: char-from-code("f878"); -$icon-panel-control-up_24: char-from-code("f879"); -$icon-panel-control-up_28: char-from-code("f87a"); -$icon-panel-control-up_36: char-from-code("f87b"); -$icon-panel-control-up-iph_12: char-from-code("f87c"); -$icon-panel-control-up-iph_24: char-from-code("f87d"); -$icon-panel-control-up-iph_36: char-from-code("f87e"); -$icon-parked_16: char-from-code("f87f"); -$icon-parked_20: char-from-code("f880"); -$icon-parked_24: char-from-code("f881"); -$icon-parse_16: char-from-code("f882"); -$icon-parse_20: char-from-code("f883"); -$icon-participant-add_12: char-from-code("f884"); -$icon-participant-add_14: char-from-code("f885"); -$icon-participant-add_16: char-from-code("f886"); -$icon-participant-add_20: char-from-code("f887"); -$icon-participant-add_24: char-from-code("f888"); -$icon-participant-add_28: char-from-code("f889"); -$icon-participant-add_56: char-from-code("f88a"); -$icon-participant-blocked_12: char-from-code("f88b"); -$icon-participant-blocked_14: char-from-code("f88c"); -$icon-participant-list_12: char-from-code("f88d"); -$icon-participant-list_14: char-from-code("f88e"); -$icon-participant-list_16: char-from-code("f88f"); -$icon-participant-list_18: char-from-code("f890"); -$icon-participant-list_20: char-from-code("f891"); -$icon-participant-list_22: char-from-code("f892"); -$icon-participant-list_24: char-from-code("f893"); -$icon-participant-list_26: char-from-code("f894"); -$icon-participant-list_28: char-from-code("f895"); -$icon-participant-list_32: char-from-code("f896"); -$icon-participant-list_56: char-from-code("f897"); -$icon-participant-list_64: char-from-code("f898"); -$icon-participant-list_80: char-from-code("f899"); -$icon-participant-list-legacy_16: char-from-code("f89a"); -$icon-participant-list-legacy_20: char-from-code("f89b"); -$icon-participant-list-legacy_24: char-from-code("f89c"); -$icon-participant-list-legacy_28: char-from-code("f89d"); -$icon-participant-list-legacy_32: char-from-code("f89e"); -$icon-participant-list-legacy_56: char-from-code("f89f"); -$icon-participant-list-legacy_64: char-from-code("f8a0"); -$icon-participant-list-legacy_80: char-from-code("f8a1"); -$icon-participant-list-legacy-optical_16: char-from-code("f8a2"); -$icon-participant-list-legacy-optical_20: char-from-code("f8a3"); -$icon-participant-list-legacy-optical_22: char-from-code("f8a4"); -$icon-participant-list-legacy-optical_26: char-from-code("f8a5"); -$icon-participant-list-legacy-optical_28: char-from-code("f8a6"); -$icon-participant-list-legacy-optical_32: char-from-code("f8a7"); -$icon-participant-list-legacy-optical_56: char-from-code("f8a8"); -$icon-participant-list-legacy-optical_64: char-from-code("f8a9"); -$icon-participant-list-legacy-optical_80: char-from-code("f8aa"); -$icon-participant-remove_12: char-from-code("f8ab"); -$icon-participant-remove_14: char-from-code("f8ac"); -$icon-participant-remove_16: char-from-code("f8ad"); -$icon-participant-remove_20: char-from-code("f8ae"); -$icon-participant-remove_24: char-from-code("f8af"); -$icon-participant-remove_28: char-from-code("f8b0"); -$icon-participant-remove_56: char-from-code("f8b1"); -$icon-participant-unknown_14: char-from-code("f8b2"); -$icon-participant-wait_16: char-from-code("f8b3"); -$icon-pass-mouse_12: char-from-code("f8b4"); -$icon-pass-mouse_16: char-from-code("f8b5"); -$icon-pass-mouse_20: char-from-code("f8b6"); -$icon-pause_10: char-from-code("f8b7"); -$icon-pause_12: char-from-code("f8b8"); -$icon-pause_120: char-from-code("f8b9"); -$icon-pause_124: char-from-code("f8ba"); -$icon-pause_14: char-from-code("f8bb"); -$icon-pause_16: char-from-code("f8bc"); -$icon-pause_18: char-from-code("f8bd"); -$icon-pause_20: char-from-code("f8be"); -$icon-pause_24: char-from-code("f8bf"); -$icon-pause_26: char-from-code("f8c0"); -$icon-pause_32: char-from-code("f8c1"); -$icon-pause_48: char-from-code("f8c2"); -$icon-pause_56: char-from-code("f8c3"); -$icon-pause_8: char-from-code("f8c4"); -$icon-pause-circle_12: char-from-code("f8c5"); -$icon-pause-circle_16: char-from-code("f8c6"); -$icon-pause-circle_20: char-from-code("f8c7"); -$icon-pause-circle_24: char-from-code("f8c8"); -$icon-pause-circle-active_16: char-from-code("f8c9"); -$icon-pause-circle-active_24: char-from-code("f8ca"); -$icon-pen_12: char-from-code("f8cb"); -$icon-pen_14: char-from-code("f8cc"); -$icon-pen_16: char-from-code("f8cd"); -$icon-pen_18: char-from-code("f8ce"); -$icon-pen_24: char-from-code("f8cf"); -$icon-pen_8: char-from-code("f8d0"); -$icon-people_10: char-from-code("f8d1"); -$icon-people_12: char-from-code("f8d2"); -$icon-people_120: char-from-code("f8d3"); -$icon-people_14: char-from-code("f8d4"); -$icon-people_16: char-from-code("f8d5"); -$icon-people_18: char-from-code("f8d6"); -$icon-people_20: char-from-code("f8d7"); -$icon-people_24: char-from-code("f8d8"); -$icon-people_26: char-from-code("f8d9"); -$icon-people_28: char-from-code("f8da"); -$icon-people_32: char-from-code("f8db"); -$icon-people_36: char-from-code("f8dc"); -$icon-people_8: char-from-code("f8dd"); -$icon-people-active_10: char-from-code("f8de"); -$icon-people-active_12: char-from-code("f8df"); -$icon-people-active_14: char-from-code("f8e0"); -$icon-people-active_16: char-from-code("f8e1"); -$icon-people-active_18: char-from-code("f8e2"); -$icon-people-active_20: char-from-code("f8e3"); -$icon-people-active_24: char-from-code("f8e4"); -$icon-people-active_26: char-from-code("f8e5"); -$icon-people-active_28: char-from-code("f8e6"); -$icon-people-active_32: char-from-code("f8e7"); -$icon-people-active_36: char-from-code("f8e8"); -$icon-people-active_8: char-from-code("f8e9"); -$icon-people-circle_16: char-from-code("f8ea"); -$icon-people-circle_20: char-from-code("f8eb"); -$icon-people-circle_24: char-from-code("f8ec"); -$icon-people-insight_20: char-from-code("f8ed"); -$icon-people-insight_24: char-from-code("f8ee"); -$icon-people-insight-active_20: char-from-code("f8ef"); -$icon-people-insight-active_24: char-from-code("f8f0"); -$icon-phone-adr_12: char-from-code("f8f1"); -$icon-phone-adr_16: char-from-code("f8f2"); -$icon-phone-adr_20: char-from-code("f8f3"); -$icon-phone-adr_24: char-from-code("f8f4"); -$icon-phone-android_12: char-from-code("f8f5"); -$icon-phone-android_16: char-from-code("f8f6"); -$icon-phone-android_24: char-from-code("f8f7"); -$icon-phone-ios_12: char-from-code("f8f8"); -$icon-phone-ios_16: char-from-code("f8f9"); -$icon-phone-ios_24: char-from-code("f8fa"); -$icon-phone-ios-muted_12: char-from-code("f8fb"); -$icon-phone-iph_12: char-from-code("f8fc"); -$icon-phone-iph_16: char-from-code("f8fd"); -$icon-phone-iph_20: char-from-code("f8fe"); -$icon-phone-iph_24: char-from-code("f8ff"); -$icon-phone-iph-alert_12: char-from-code("f900"); -$icon-phone-iph-muted_12: char-from-code("f901"); -$icon-phone-iph-muted-alert_12: char-from-code("f902"); -$icon-phone-iph-private_12: char-from-code("f903"); -$icon-phone-reply_16: char-from-code("f904"); -$icon-phone-reply_20: char-from-code("f905"); -$icon-phone-reply-all_16: char-from-code("f906"); -$icon-phone-reply-all_20: char-from-code("f907"); -$icon-picker_14: char-from-code("f908"); -$icon-picker_16: char-from-code("f909"); -$icon-picker_18: char-from-code("f90a"); -$icon-picture-in-picture_12: char-from-code("f90b"); -$icon-picture-in-picture_16: char-from-code("f90c"); -$icon-picture-in-picture_20: char-from-code("f90d"); -$icon-picture-in-picture_24: char-from-code("f90e"); -$icon-pie-chart_16: char-from-code("f90f"); -$icon-pie-chart_20: char-from-code("f910"); -$icon-pin_10: char-from-code("f911"); -$icon-pin_12: char-from-code("f912"); -$icon-pin_14: char-from-code("f913"); -$icon-pin_16: char-from-code("f914"); -$icon-pin_18: char-from-code("f915"); -$icon-pin_20: char-from-code("f916"); -$icon-pin_24: char-from-code("f917"); -$icon-pin-active_10: char-from-code("f918"); -$icon-pin-active_20: char-from-code("f919"); -$icon-pin-list_12: char-from-code("f91a"); -$icon-pin-list_16: char-from-code("f91b"); -$icon-pin-list_20: char-from-code("f91c"); -$icon-pin-muted_10: char-from-code("f91d"); -$icon-pin-muted_12: char-from-code("f91e"); -$icon-pin-muted_14: char-from-code("f91f"); -$icon-pin-muted_16: char-from-code("f920"); -$icon-pin-muted_18: char-from-code("f921"); -$icon-pin-muted_20: char-from-code("f922"); -$icon-pin-muted_24: char-from-code("f923"); -$icon-placeholder_10: char-from-code("f924"); -$icon-placeholder_12: char-from-code("f925"); -$icon-placeholder_14: char-from-code("f926"); -$icon-placeholder_16: char-from-code("f927"); -$icon-placeholder_18: char-from-code("f928"); -$icon-placeholder_20: char-from-code("f929"); -$icon-placeholder_24: char-from-code("f92a"); -$icon-placeholder_28: char-from-code("f92b"); -$icon-placeholder_32: char-from-code("f92c"); -$icon-placeholder_36: char-from-code("f92d"); -$icon-placeholder_40: char-from-code("f92e"); -$icon-placeholder_48: char-from-code("f92f"); -$icon-placeholder_56: char-from-code("f930"); -$icon-placeholder_8: char-from-code("f931"); -$icon-play_12: char-from-code("f932"); -$icon-play_14: char-from-code("f933"); -$icon-play_16: char-from-code("f934"); -$icon-play_20: char-from-code("f935"); -$icon-play_24: char-from-code("f936"); -$icon-play_28: char-from-code("f937"); -$icon-play_32: char-from-code("f938"); -$icon-play-circle_12: char-from-code("f939"); -$icon-play-circle_16: char-from-code("f93a"); -$icon-play-circle_20: char-from-code("f93b"); -$icon-play-circle_24: char-from-code("f93c"); -$icon-play-circle_28: char-from-code("f93d"); -$icon-play-circle_32: char-from-code("f93e"); -$icon-plug-ac_24: char-from-code("f93f"); -$icon-plus_12: char-from-code("f940"); -$icon-plus_14: char-from-code("f941"); -$icon-plus_16: char-from-code("f942"); -$icon-plus_18: char-from-code("f943"); -$icon-plus_20: char-from-code("f944"); -$icon-plus_24: char-from-code("f945"); -$icon-plus_28: char-from-code("f946"); -$icon-plus_8: char-from-code("f947"); -$icon-plus-circle_24: char-from-code("f948"); -$icon-plus-circle-active_12: char-from-code("f949"); -$icon-plus-circle-active_20: char-from-code("f94a"); -$icon-plus-circle-active_24: char-from-code("f94b"); -$icon-pmr_10: char-from-code("f94c"); -$icon-pmr_12: char-from-code("f94d"); -$icon-pmr_14: char-from-code("f94e"); -$icon-pmr_16: char-from-code("f94f"); -$icon-pmr_18: char-from-code("f950"); -$icon-pmr_20: char-from-code("f951"); -$icon-pmr_24: char-from-code("f952"); -$icon-pmr_32: char-from-code("f953"); -$icon-pmr_36: char-from-code("f954"); -$icon-pmr-legacy_10: char-from-code("f955"); -$icon-pmr-legacy_12: char-from-code("f956"); -$icon-pmr-legacy_14: char-from-code("f957"); -$icon-pmr-legacy_16: char-from-code("f958"); -$icon-pmr-legacy_18: char-from-code("f959"); -$icon-pmr-legacy_20: char-from-code("f95a"); -$icon-pmr-legacy_24: char-from-code("f95b"); -$icon-pmr-legacy_32: char-from-code("f95c"); -$icon-pmr-legacy_36: char-from-code("f95d"); -$icon-poll_12: char-from-code("f95e"); -$icon-poll_16: char-from-code("f95f"); -$icon-poll_20: char-from-code("f960"); -$icon-poll_24: char-from-code("f961"); -$icon-poll_36: char-from-code("f962"); -$icon-pop-in_10: char-from-code("f963"); -$icon-pop-in_12: char-from-code("f964"); -$icon-pop-in_16: char-from-code("f965"); -$icon-pop-in_20: char-from-code("f966"); -$icon-pop-in_24: char-from-code("f967"); -$icon-pop-in_8: char-from-code("f968"); -$icon-pop-out_10: char-from-code("f969"); -$icon-pop-out_12: char-from-code("f96a"); -$icon-pop-out_16: char-from-code("f96b"); -$icon-pop-out_20: char-from-code("f96c"); -$icon-pop-out_24: char-from-code("f96d"); -$icon-pop-out_8: char-from-code("f96e"); -$icon-pop-up_12: char-from-code("f96f"); -$icon-pop-up_24: char-from-code("f970"); -$icon-power-ac_16: char-from-code("f971"); -$icon-power-apps_32: char-from-code("f972"); -$icon-presentation_16: char-from-code("f973"); -$icon-presentation_20: char-from-code("f974"); -$icon-presentation_24: char-from-code("f975"); -$icon-print_10: char-from-code("f976"); -$icon-print_12: char-from-code("f977"); -$icon-print_16: char-from-code("f978"); -$icon-priority_12: char-from-code("f979"); -$icon-priority_14: char-from-code("f97a"); -$icon-priority_16: char-from-code("f97b"); -$icon-priority_18: char-from-code("f97c"); -$icon-priority_20: char-from-code("f97d"); -$icon-priority_24: char-from-code("f97e"); -$icon-priority_28: char-from-code("f97f"); -$icon-priority_32: char-from-code("f980"); -$icon-priority_40: char-from-code("f981"); -$icon-priority_44: char-from-code("f982"); -$icon-priority_72: char-from-code("f983"); -$icon-priority-active_16: char-from-code("f984"); -$icon-privacy_16: char-from-code("f985"); -$icon-privacy_20: char-from-code("f986"); -$icon-private_10: char-from-code("f987"); -$icon-private_12: char-from-code("f988"); -$icon-private_14: char-from-code("f989"); -$icon-private_16: char-from-code("f98a"); -$icon-private_20: char-from-code("f98b"); -$icon-private_24: char-from-code("f98c"); -$icon-private_28: char-from-code("f98d"); -$icon-private_8: char-from-code("f98e"); -$icon-private-circle_100: char-from-code("f98f"); -$icon-private-circle_14: char-from-code("f990"); -$icon-private-circle_16: char-from-code("f991"); -$icon-private-circle_20: char-from-code("f992"); -$icon-private-circle_24: char-from-code("f993"); -$icon-private-circle_48: char-from-code("f994"); -$icon-private-circle_56: char-from-code("f995"); -$icon-private-circle_80: char-from-code("f996"); -$icon-private-circle-active_16: char-from-code("f997"); -$icon-private-circle-active_20: char-from-code("f998"); -$icon-private-circle-active_24: char-from-code("f999"); -$icon-private-meeting_12: char-from-code("f99a"); -$icon-private-meeting_14: char-from-code("f99b"); -$icon-private-meeting_16: char-from-code("f99c"); -$icon-private-meeting_20: char-from-code("f99d"); -$icon-pro-badge_28: char-from-code("f99e"); -$icon-product-demo_16: char-from-code("f99f"); -$icon-proximity_12: char-from-code("f9a0"); -$icon-proximity_16: char-from-code("f9a1"); -$icon-proximity_20: char-from-code("f9a2"); -$icon-proximity_24: char-from-code("f9a3"); -$icon-proximity_28: char-from-code("f9a4"); -$icon-proximity-muted_12: char-from-code("f9a5"); -$icon-proximity-muted_16: char-from-code("f9a6"); -$icon-proximity-muted_24: char-from-code("f9a7"); -$icon-proximity-muted_28: char-from-code("f9a8"); -$icon-proximity-video_12: char-from-code("f9a9"); -$icon-proximity-video_14: char-from-code("f9aa"); -$icon-proximity-video_16: char-from-code("f9ab"); -$icon-proximity-video_20: char-from-code("f9ac"); -$icon-proximity-video_24: char-from-code("f9ad"); -$icon-proximity-video_26: char-from-code("f9ae"); -$icon-pto_12: char-from-code("f9af"); -$icon-pto_120: char-from-code("f9b0"); -$icon-pto_124: char-from-code("f9b1"); -$icon-pto_14: char-from-code("f9b2"); -$icon-pto_16: char-from-code("f9b3"); -$icon-pto_18: char-from-code("f9b4"); -$icon-pto_20: char-from-code("f9b5"); -$icon-pto_24: char-from-code("f9b6"); -$icon-pto_26: char-from-code("f9b7"); -$icon-pto_28: char-from-code("f9b8"); -$icon-pto_32: char-from-code("f9b9"); -$icon-pto_40: char-from-code("f9ba"); -$icon-pto_48: char-from-code("f9bb"); -$icon-pto_56: char-from-code("f9bc"); -$icon-pto_8: char-from-code("f9bd"); -$icon-pull-call_12: char-from-code("f9be"); -$icon-pull-call_14: char-from-code("f9bf"); -$icon-pull-call_16: char-from-code("f9c0"); -$icon-pull-call_24: char-from-code("f9c1"); -$icon-q-a_16: char-from-code("f9c2"); -$icon-q-a_20: char-from-code("f9c3"); -$icon-q-a_24: char-from-code("f9c4"); -$icon-q-a_36: char-from-code("f9c5"); -$icon-quality_16: char-from-code("f9c6"); -$icon-quality_24: char-from-code("f9c7"); -$icon-queue_14: char-from-code("f9c8"); -$icon-queue_contact: char-from-code("f9c9"); -$icon-queue-contact_14: char-from-code("f9ca"); -$icon-queue-contact_20: char-from-code("f9cb"); -$icon-queue-lookup_16: char-from-code("f9cc"); -$icon-quiet_16: char-from-code("f9cd"); -$icon-quiet_20: char-from-code("f9ce"); -$icon-quiet_32: char-from-code("f9cf"); -$icon-quiet_8: char-from-code("f9d0"); -$icon-raise-hand_12: char-from-code("f9d1"); -$icon-raise-hand_16: char-from-code("f9d2"); -$icon-raise-hand_20: char-from-code("f9d3"); -$icon-raise-hand_24: char-from-code("f9d4"); -$icon-ram_16: char-from-code("f9d5"); -$icon-reactions_12: char-from-code("f9d6"); -$icon-reactions_16: char-from-code("f9d7"); -$icon-reactions_20: char-from-code("f9d8"); -$icon-real-time-translation_24: char-from-code("f9d9"); -$icon-recents_12: char-from-code("f9da"); -$icon-recents_14: char-from-code("f9db"); -$icon-recents_16: char-from-code("f9dc"); -$icon-recents_18: char-from-code("f9dd"); -$icon-recents_20: char-from-code("f9de"); -$icon-recents_24: char-from-code("f9df"); -$icon-recents_80: char-from-code("f9e0"); -$icon-recents-active_14: char-from-code("f9e1"); -$icon-recents-active_24: char-from-code("f9e2"); -$icon-recents-presence_12: char-from-code("f9e3"); -$icon-recents-presence_14: char-from-code("f9e4"); -$icon-recents-presence_24: char-from-code("f9e5"); -$icon-recents-presence_28: char-from-code("f9e6"); -$icon-recents-presence_8: char-from-code("f9e7"); -$icon-recents-presence-stroke_10: char-from-code("f9e8"); -$icon-recents-presence-stroke_14: char-from-code("f9e9"); -$icon-recents-presence-stroke_16: char-from-code("f9ea"); -$icon-recents-presence-stroke_26: char-from-code("f9eb"); -$icon-recents-presence-stroke_30: char-from-code("f9ec"); -$icon-record_12: char-from-code("f9ed"); -$icon-record_14: char-from-code("f9ee"); -$icon-record_16: char-from-code("f9ef"); -$icon-record_20: char-from-code("f9f0"); -$icon-record_24: char-from-code("f9f1"); -$icon-record_28: char-from-code("f9f2"); -$icon-record-active_12: char-from-code("f9f3"); -$icon-record-active_14: char-from-code("f9f4"); -$icon-record-active_16: char-from-code("f9f5"); -$icon-record-active_20: char-from-code("f9f6"); -$icon-record-active_24: char-from-code("f9f7"); -$icon-record-active-bg_12: char-from-code("f9f8"); -$icon-record-active-bg_14: char-from-code("f9f9"); -$icon-record-active-bg_16: char-from-code("f9fa"); -$icon-record-active-bg_20: char-from-code("f9fb"); -$icon-record-active-bg_24: char-from-code("f9fc"); -$icon-record-active-circle_12: char-from-code("f9fd"); -$icon-record-active-circle_14: char-from-code("f9fe"); -$icon-record-active-circle_16: char-from-code("f9ff"); -$icon-record-active-circle_20: char-from-code("fa00"); -$icon-record-active-circle_24: char-from-code("fa01"); -$icon-recurring_12: char-from-code("fa02"); -$icon-recurring_14: char-from-code("fa03"); -$icon-recurring_16: char-from-code("fa04"); -$icon-recurring_20: char-from-code("fa05"); -$icon-recurring_24: char-from-code("fa06"); -$icon-recurring-off_12: char-from-code("fa07"); -$icon-recurring-off_16: char-from-code("fa08"); -$icon-redial_16: char-from-code("fa09"); -$icon-redial_20: char-from-code("fa0a"); -$icon-redial_24: char-from-code("fa0b"); -$icon-redo_12: char-from-code("fa0c"); -$icon-redo_14: char-from-code("fa0d"); -$icon-redo_16: char-from-code("fa0e"); -$icon-refresh_10: char-from-code("fa0f"); -$icon-refresh_12: char-from-code("fa10"); -$icon-refresh_16: char-from-code("fa11"); -$icon-refresh_18: char-from-code("fa12"); -$icon-refresh_20: char-from-code("fa13"); -$icon-refresh_24: char-from-code("fa14"); -$icon-remote-desktop-control_10: char-from-code("fa15"); -$icon-remote-desktop-control_12: char-from-code("fa16"); -$icon-remote-desktop-control_14: char-from-code("fa17"); -$icon-remote-desktop-control_16: char-from-code("fa18"); -$icon-remote-desktop-control_24: char-from-code("fa19"); -$icon-remote-desktop-control-active_10: char-from-code("fa1a"); -$icon-remote-desktop-control-active_12: char-from-code("fa1b"); -$icon-remove_12: char-from-code("fa1c"); -$icon-remove_14: char-from-code("fa1d"); -$icon-remove_16: char-from-code("fa1e"); -$icon-remove_20: char-from-code("fa1f"); -$icon-remove_24: char-from-code("fa20"); -$icon-reply_10: char-from-code("fa21"); -$icon-reply_12: char-from-code("fa22"); -$icon-reply_16: char-from-code("fa23"); -$icon-reply_20: char-from-code("fa24"); -$icon-reply_24: char-from-code("fa25"); -$icon-reply-list_12: char-from-code("fa26"); -$icon-reply-list_16: char-from-code("fa27"); -$icon-reply-list_20: char-from-code("fa28"); -$icon-report_16: char-from-code("fa29"); -$icon-report_28: char-from-code("fa2a"); -$icon-reset_16: char-from-code("fa2b"); -$icon-reset_24: char-from-code("fa2c"); -$icon-response_16: char-from-code("fa2d"); -$icon-responsive-mobile_16: char-from-code("fa2e"); -$icon-retrieve-call_14: char-from-code("fa2f"); -$icon-retrieve-call_16: char-from-code("fa30"); -$icon-return_12: char-from-code("fa31"); -$icon-return_16: char-from-code("fa32"); -$icon-ringtone_16: char-from-code("fa33"); -$icon-ringtone_24: char-from-code("fa34"); -$icon-room-calendar_24: char-from-code("fa35"); -$icon-room-lights_16: char-from-code("fa36"); -$icon-room-lights_24: char-from-code("fa37"); -$icon-rotate-content_12: char-from-code("fa38"); -$icon-rotate-content_16: char-from-code("fa39"); -$icon-rotate-content_24: char-from-code("fa3a"); -$icon-rotate-landscape_16: char-from-code("fa3b"); -$icon-rss-circle_24: char-from-code("fa3c"); -$icon-rss-circle_32: char-from-code("fa3d"); -$icon-rss-circle_40: char-from-code("fa3e"); -$icon-running-application_16: char-from-code("fa3f"); -$icon-running-application_24: char-from-code("fa40"); -$icon-save_12: char-from-code("fa41"); -$icon-save_14: char-from-code("fa42"); -$icon-save_16: char-from-code("fa43"); -$icon-save_24: char-from-code("fa44"); -$icon-scan_20: char-from-code("fa45"); -$icon-scan_24: char-from-code("fa46"); -$icon-scheduler-available_14: char-from-code("fa47"); -$icon-scheduler-available_16: char-from-code("fa48"); -$icon-scheduler-not-working-hours_14: char-from-code("fa49"); -$icon-scheduler-not-working-hours_16: char-from-code("fa4a"); -$icon-scheduler-unavailable_14: char-from-code("fa4b"); -$icon-scheduler-unavailable_16: char-from-code("fa4c"); -$icon-scheduler-unknown_14: char-from-code("fa4d"); -$icon-scheduler-unknown_16: char-from-code("fa4e"); -$icon-screen-toggle_10: char-from-code("fa4f"); -$icon-screen-toggle_12: char-from-code("fa50"); -$icon-screen-toggle_16: char-from-code("fa51"); -$icon-screen-toggle_20: char-from-code("fa52"); -$icon-screen-toggle_24: char-from-code("fa53"); -$icon-screenshot_12: char-from-code("fa54"); -$icon-screenshot_16: char-from-code("fa55"); -$icon-screenshot_20: char-from-code("fa56"); -$icon-screenshot_24: char-from-code("fa57"); -$icon-search_12: char-from-code("fa58"); -$icon-search_14: char-from-code("fa59"); -$icon-search_16: char-from-code("fa5a"); -$icon-search_18: char-from-code("fa5b"); -$icon-search_20: char-from-code("fa5c"); -$icon-search_24: char-from-code("fa5d"); -$icon-search_28: char-from-code("fa5e"); -$icon-secure_10: char-from-code("fa5f"); -$icon-secure_12: char-from-code("fa60"); -$icon-secure_14: char-from-code("fa61"); -$icon-secure_16: char-from-code("fa62"); -$icon-secure_20: char-from-code("fa63"); -$icon-secure_24: char-from-code("fa64"); -$icon-secure_28: char-from-code("fa65"); -$icon-secure_8: char-from-code("fa66"); -$icon-secure-active_12: char-from-code("fa67"); -$icon-secure-active_14: char-from-code("fa68"); -$icon-secure-active_16: char-from-code("fa69"); -$icon-secure-active_20: char-from-code("fa6a"); -$icon-secure-active_24: char-from-code("fa6b"); -$icon-secure-active_28: char-from-code("fa6c"); -$icon-secure-active_8: char-from-code("fa6d"); -$icon-secure-badge_28: char-from-code("fa6e"); -$icon-secure-circle_14: char-from-code("fa6f"); -$icon-secure-circle_16: char-from-code("fa70"); -$icon-secure-circle-active_14: char-from-code("fa71"); -$icon-secure-circle-active_16: char-from-code("fa72"); -$icon-secure-fips_24: char-from-code("fa73"); -$icon-selfview_16: char-from-code("fa74"); -$icon-selfview_20: char-from-code("fa75"); -$icon-selfview_24: char-from-code("fa76"); -$icon-send_12: char-from-code("fa77"); -$icon-send_14: char-from-code("fa78"); -$icon-send_16: char-from-code("fa79"); -$icon-send_20: char-from-code("fa7a"); -$icon-send_24: char-from-code("fa7b"); -$icon-seperate_12: char-from-code("fa7c"); -$icon-seperate_16: char-from-code("fa7d"); -$icon-seperate_20: char-from-code("fa7e"); -$icon-seperate_24: char-from-code("fa7f"); -$icon-server_16: char-from-code("fa80"); -$icon-server_24: char-from-code("fa81"); -$icon-server-circle_100: char-from-code("fa82"); -$icon-server-error_16: char-from-code("fa83"); -$icon-set-variable_16: char-from-code("fa84"); -$icon-set-variable_20: char-from-code("fa85"); -$icon-settings_10: char-from-code("fa86"); -$icon-settings_12: char-from-code("fa87"); -$icon-settings_14: char-from-code("fa88"); -$icon-settings_16: char-from-code("fa89"); -$icon-settings_18: char-from-code("fa8a"); -$icon-settings_20: char-from-code("fa8b"); -$icon-settings_24: char-from-code("fa8c"); -$icon-settings_32: char-from-code("fa8d"); -$icon-settings_8: char-from-code("fa8e"); -$icon-settings-active_10: char-from-code("fa8f"); -$icon-settings-active_12: char-from-code("fa90"); -$icon-settings-active_14: char-from-code("fa91"); -$icon-settings-active_16: char-from-code("fa92"); -$icon-settings-active_18: char-from-code("fa93"); -$icon-settings-active_20: char-from-code("fa94"); -$icon-settings-active_24: char-from-code("fa95"); -$icon-settings-active_32: char-from-code("fa96"); -$icon-settings-active_8: char-from-code("fa97"); -$icon-setup-assistant_16: char-from-code("fa98"); -$icon-shake-device_18: char-from-code("fa99"); -$icon-shake-device_20: char-from-code("fa9a"); -$icon-shape-circle_20: char-from-code("fa9b"); -$icon-shape-cone_20: char-from-code("fa9c"); -$icon-shape-cylinder_20: char-from-code("fa9d"); -$icon-shape-diagonal-arrowhead-dual_16: char-from-code("fa9e"); -$icon-shape-diagonal-arrowhead-single_16: char-from-code("fa9f"); -$icon-shape-diagonal-arrowhead-single_20: char-from-code("faa0"); -$icon-shape-diagonal-line_16: char-from-code("faa1"); -$icon-shape-diagonal-line_20: char-from-code("faa2"); -$icon-shape-oval_16: char-from-code("faa3"); -$icon-shape-oval_20: char-from-code("faa4"); -$icon-shape-polygon_20: char-from-code("faa5"); -$icon-shape-sphere_20: char-from-code("faa6"); -$icon-shape-square_16: char-from-code("faa7"); -$icon-shape-square-20: char-from-code("faa8"); -$icon-shapes_16: char-from-code("faa9"); -$icon-share_12: char-from-code("faaa"); -$icon-share_14: char-from-code("faab"); -$icon-share_16: char-from-code("faac"); -$icon-share_18: char-from-code("faad"); -$icon-share_20: char-from-code("faae"); -$icon-share_24: char-from-code("faaf"); -$icon-share_28: char-from-code("fab0"); -$icon-share_32: char-from-code("fab1"); -$icon-share-c-native-adr_12: char-from-code("fab2"); -$icon-share-c-native-adr_14: char-from-code("fab3"); -$icon-share-c-native-adr_16: char-from-code("fab4"); -$icon-share-c-native-adr_24: char-from-code("fab5"); -$icon-share-c-native-ios_10: char-from-code("fab6"); -$icon-share-c-native-ios_12: char-from-code("fab7"); -$icon-share-c-native-ios_14: char-from-code("fab8"); -$icon-share-c-native-ios_16: char-from-code("fab9"); -$icon-share-c-native-ios_20: char-from-code("faba"); -$icon-share-c-native-ios_28: char-from-code("fabb"); -$icon-share-c-native-iph_10: char-from-code("fabc"); -$icon-share-c-native-iph_12: char-from-code("fabd"); -$icon-share-c-native-iph_14: char-from-code("fabe"); -$icon-share-c-native-iph_16: char-from-code("fabf"); -$icon-share-c-native-iph_20: char-from-code("fac0"); -$icon-share-c-native-iph_24: char-from-code("fac1"); -$icon-share-c-native-iph_28: char-from-code("fac2"); -$icon-share-screen_10: char-from-code("fac3"); -$icon-share-screen_12: char-from-code("fac4"); -$icon-share-screen_120: char-from-code("fac5"); -$icon-share-screen_124: char-from-code("fac6"); -$icon-share-screen_14: char-from-code("fac7"); -$icon-share-screen_16: char-from-code("fac8"); -$icon-share-screen_18: char-from-code("fac9"); -$icon-share-screen_20: char-from-code("faca"); -$icon-share-screen_24: char-from-code("facb"); -$icon-share-screen_26: char-from-code("facc"); -$icon-share-screen_28: char-from-code("facd"); -$icon-share-screen_32: char-from-code("face"); -$icon-share-screen_36: char-from-code("facf"); -$icon-share-screen_48: char-from-code("fad0"); -$icon-share-screen_56: char-from-code("fad1"); -$icon-share-screen_8: char-from-code("fad2"); -$icon-share-screen-active_14: char-from-code("fad3"); -$icon-share-screen-active_24: char-from-code("fad4"); -$icon-share-screen-presence_12: char-from-code("fad5"); -$icon-share-screen-presence_14: char-from-code("fad6"); -$icon-share-screen-presence_28: char-from-code("fad7"); -$icon-share-screen-presence_8: char-from-code("fad8"); -$icon-share-screen-presence-stroke_12: char-from-code("fad9"); -$icon-share-screen-presence-stroke_14: char-from-code("fada"); -$icon-share-screen-presence-stroke_16: char-from-code("fadb"); -$icon-share-screen-presence-stroke_26: char-from-code("fadc"); -$icon-share-screen-presence-stroke_30: char-from-code("fadd"); -$icon-share-space_12: char-from-code("fade"); -$icon-share-space_14: char-from-code("fadf"); -$icon-share-space_18: char-from-code("fae0"); -$icon-share-space_20: char-from-code("fae1"); -$icon-share-space_24: char-from-code("fae2"); -$icon-shield_12: char-from-code("fae3"); -$icon-shield_14: char-from-code("fae4"); -$icon-shield_20: char-from-code("fae5"); -$icon-shield_24: char-from-code("fae6"); -$icon-show_12: char-from-code("fae7"); -$icon-show_16: char-from-code("fae8"); -$icon-show_20: char-from-code("fae9"); -$icon-show_24: char-from-code("faea"); -$icon-side-by-side-active_24: char-from-code("faeb"); -$icon-sign-in_16: char-from-code("faec"); -$icon-sign-in_20: char-from-code("faed"); -$icon-sign-in_24: char-from-code("faee"); -$icon-sign-in-forced_16: char-from-code("faef"); -$icon-sign-in-forced_24: char-from-code("faf0"); -$icon-sign-out_10: char-from-code("faf1"); -$icon-sign-out_12: char-from-code("faf2"); -$icon-sign-out_16: char-from-code("faf3"); -$icon-sign-out_20: char-from-code("faf4"); -$icon-sign-out_24: char-from-code("faf5"); -$icon-signal-0_16: char-from-code("faf6"); -$icon-signal-100_12: char-from-code("faf7"); -$icon-signal-100_16: char-from-code("faf8"); -$icon-signal-25_16: char-from-code("faf9"); -$icon-signal-50_16: char-from-code("fafa"); -$icon-signal-75_16: char-from-code("fafb"); -$icon-single-number-reach_12: char-from-code("fafc"); -$icon-single-number-reach_14: char-from-code("fafd"); -$icon-single-number-reach_16: char-from-code("fafe"); -$icon-single-number-reach_20: char-from-code("faff"); -$icon-skip_10: char-from-code("fb00"); -$icon-skip_16: char-from-code("fb01"); -$icon-skip_24: char-from-code("fb02"); -$icon-skip-bw_16: char-from-code("fb03"); -$icon-skip-bw_24: char-from-code("fb04"); -$icon-skip-fw_16: char-from-code("fb05"); -$icon-skip-fw_24: char-from-code("fb06"); -$icon-sms_12: char-from-code("fb07"); -$icon-sms_16: char-from-code("fb08"); -$icon-sort-down_16: char-from-code("fb09"); -$icon-sort-down_20: char-from-code("fb0a"); -$icon-sort-down_24: char-from-code("fb0b"); -$icon-sort-up_20: char-from-code("fb0c"); -$icon-sort-up_24: char-from-code("fb0d"); -$icon-space_12: char-from-code("fb0e"); -$icon-space_16: char-from-code("fb0f"); -$icon-spark_16: char-from-code("fb10"); -$icon-spark-board_12: char-from-code("fb11"); -$icon-spark-board_14: char-from-code("fb12"); -$icon-spark-board_16: char-from-code("fb13"); -$icon-spark-board_20: char-from-code("fb14"); -$icon-spark-board_24: char-from-code("fb15"); -$icon-spark-board_28: char-from-code("fb16"); -$icon-spark-board_32: char-from-code("fb17"); -$icon-spark-board_48: char-from-code("fb18"); -$icon-spark-quad-camera_16: char-from-code("fb19"); -$icon-spark-quad-camera_20: char-from-code("fb1a"); -$icon-spark-room-kit_16: char-from-code("fb1b"); -$icon-spark-room-kit_20: char-from-code("fb1c"); -$icon-spark-room-kit-plus_16: char-from-code("fb1d"); -$icon-spark-room-kit-plus_20: char-from-code("fb1e"); -$icon-spark-share_16: char-from-code("fb1f"); -$icon-spark-share_20: char-from-code("fb20"); -$icon-spark-voice_16: char-from-code("fb21"); -$icon-spark-voice_20: char-from-code("fb22"); -$icon-speaker_12: char-from-code("fb23"); -$icon-speaker_16: char-from-code("fb24"); -$icon-speaker_20: char-from-code("fb25"); -$icon-speaker_24: char-from-code("fb26"); -$icon-speaker_28: char-from-code("fb27"); -$icon-speaker-bluetooth_16: char-from-code("fb28"); -$icon-speaker-disconnected_12: char-from-code("fb29"); -$icon-speaker-disconnected_14: char-from-code("fb2a"); -$icon-speaker-disconnected_16: char-from-code("fb2b"); -$icon-speaker-disconnected_20: char-from-code("fb2c"); -$icon-speaker-disconnected_24: char-from-code("fb2d"); -$icon-speaker-disconnected_28: char-from-code("fb2e"); -$icon-speaker-disconnected_36: char-from-code("fb2f"); -$icon-speaker-line-out-left_16: char-from-code("fb30"); -$icon-speaker-line-out-right_16: char-from-code("fb31"); -$icon-speaker-muted_12: char-from-code("fb32"); -$icon-speaker-muted_14: char-from-code("fb33"); -$icon-speaker-muted_16: char-from-code("fb34"); -$icon-speaker-muted_24: char-from-code("fb35"); -$icon-speaker-muted_28: char-from-code("fb36"); -$icon-speaker-muted_32: char-from-code("fb37"); -$icon-speaker-off_16: char-from-code("fb38"); -$icon-speaker-off_24: char-from-code("fb39"); -$icon-speaker-off_28: char-from-code("fb3a"); -$icon-speaker-turn-down_16: char-from-code("fb3b"); -$icon-speaker-turn-up_16: char-from-code("fb3c"); -$icon-spinner_12: char-from-code("fb3d"); -$icon-spinner_14: char-from-code("fb3e"); -$icon-spinner_16: char-from-code("fb3f"); -$icon-spinner_18: char-from-code("fb40"); -$icon-spinner_20: char-from-code("fb41"); -$icon-spinner_24: char-from-code("fb42"); -$icon-spinner_28: char-from-code("fb43"); -$icon-spinner_32: char-from-code("fb44"); -$icon-spinner_36: char-from-code("fb45"); -$icon-spinner_40: char-from-code("fb46"); -$icon-spinner_48: char-from-code("fb47"); -$icon-spinner_56: char-from-code("fb48"); -$icon-spinner_72: char-from-code("fb49"); -$icon-spinner_8: char-from-code("fb4a"); -$icon-spinner_80: char-from-code("fb4b"); -$icon-spinner_90: char-from-code("fb4c"); -$icon-spreadsheet_16: char-from-code("fb4d"); -$icon-stacked-area-100-chart_16: char-from-code("fb4e"); -$icon-stacked-area-chart_16: char-from-code("fb4f"); -$icon-stacked-bar-100-chart_16: char-from-code("fb50"); -$icon-stacked-bar-chart_16: char-from-code("fb51"); -$icon-start-chat_20: char-from-code("fb52"); -$icon-start-chat_24: char-from-code("fb53"); -$icon-stickers_16: char-from-code("fb54"); -$icon-stickers_24: char-from-code("fb55"); -$icon-stickies_12: char-from-code("fb56"); -$icon-stickies_16: char-from-code("fb57"); -$icon-stickies_24: char-from-code("fb58"); -$icon-stop_10: char-from-code("fb59"); -$icon-stop_12: char-from-code("fb5a"); -$icon-stop_16: char-from-code("fb5b"); -$icon-stop_20: char-from-code("fb5c"); -$icon-stop_24: char-from-code("fb5d"); -$icon-stop-circle_12: char-from-code("fb5e"); -$icon-stop-circle_16: char-from-code("fb5f"); -$icon-stop-circle_20: char-from-code("fb60"); -$icon-stop-circle_24: char-from-code("fb61"); -$icon-stop-content-share_20: char-from-code("fb62"); -$icon-stored-info_12: char-from-code("fb63"); -$icon-stored-info_16: char-from-code("fb64"); -$icon-stored-info_20: char-from-code("fb65"); -$icon-stored-info_24: char-from-code("fb66"); -$icon-stored-info-active_12: char-from-code("fb67"); -$icon-stored-info-active_16: char-from-code("fb68"); -$icon-stored-info-active_20: char-from-code("fb69"); -$icon-stored-info-active_24: char-from-code("fb6a"); -$icon-streaming_16: char-from-code("fb6b"); -$icon-streaming_20: char-from-code("fb6c"); -$icon-streaming_24: char-from-code("fb6d"); -$icon-subscribe_16: char-from-code("fb6e"); -$icon-subscript_12: char-from-code("fb6f"); -$icon-subscript_16: char-from-code("fb70"); -$icon-superscript_12: char-from-code("fb71"); -$icon-superscript_16: char-from-code("fb72"); -$icon-swift_16: char-from-code("fb73"); -$icon-sx10_16: char-from-code("fb74"); -$icon-sx10_20: char-from-code("fb75"); -$icon-sx20_16: char-from-code("fb76"); -$icon-sx20_20: char-from-code("fb77"); -$icon-sx80-codec_16: char-from-code("fb78"); -$icon-sx80-codec_20: char-from-code("fb79"); -$icon-tablet_12: char-from-code("fb7a"); -$icon-tablet_16: char-from-code("fb7b"); -$icon-tablet_24: char-from-code("fb7c"); -$icon-tabs_16: char-from-code("fb7d"); -$icon-tabs_24: char-from-code("fb7e"); -$icon-tag_12: char-from-code("fb7f"); -$icon-tag_16: char-from-code("fb80"); -$icon-tag_20: char-from-code("fb81"); -$icon-tap_20: char-from-code("fb82"); -$icon-tasks_10: char-from-code("fb83"); -$icon-tasks_12: char-from-code("fb84"); -$icon-tasks_14: char-from-code("fb85"); -$icon-tasks_16: char-from-code("fb86"); -$icon-tasks_18: char-from-code("fb87"); -$icon-tasks_20: char-from-code("fb88"); -$icon-tasks_24: char-from-code("fb89"); -$icon-tasks_26: char-from-code("fb8a"); -$icon-tasks_28: char-from-code("fb8b"); -$icon-tasks_32: char-from-code("fb8c"); -$icon-tasks_36: char-from-code("fb8d"); -$icon-tasks_8: char-from-code("fb8e"); -$icon-team_12: char-from-code("fb8f"); -$icon-team_14: char-from-code("fb90"); -$icon-team_16: char-from-code("fb91"); -$icon-team_18: char-from-code("fb92"); -$icon-team_20: char-from-code("fb93"); -$icon-team_24: char-from-code("fb94"); -$icon-team_32: char-from-code("fb95"); -$icon-team-active_12: char-from-code("fb96"); -$icon-team-active_14: char-from-code("fb97"); -$icon-team-active_16: char-from-code("fb98"); -$icon-team-active_18: char-from-code("fb99"); -$icon-team-active_20: char-from-code("fb9a"); -$icon-team-active_24: char-from-code("fb9b"); -$icon-team-active_32: char-from-code("fb9c"); -$icon-team-new_24: char-from-code("fb9d"); -$icon-telepresence_12: char-from-code("fb9e"); -$icon-telepresence_14: char-from-code("fb9f"); -$icon-telepresence_16: char-from-code("fba0"); -$icon-telepresence_18: char-from-code("fba1"); -$icon-telepresence_20: char-from-code("fba2"); -$icon-telepresence_24: char-from-code("fba3"); -$icon-telepresence_64: char-from-code("fba4"); -$icon-telepresence-alert_12: char-from-code("fba5"); -$icon-telepresence-ix5000_16: char-from-code("fba6"); -$icon-telepresence-ix5000_20: char-from-code("fba7"); -$icon-telepresence-muted_12: char-from-code("fba8"); -$icon-telepresence-muted_64: char-from-code("fba9"); -$icon-telepresence-muted-alert_12: char-from-code("fbaa"); -$icon-telepresence-private_12: char-from-code("fbab"); -$icon-temperature_14: char-from-code("fbac"); -$icon-text_10: char-from-code("fbad"); -$icon-text_12: char-from-code("fbae"); -$icon-text_16: char-from-code("fbaf"); -$icon-text-align-left_16: char-from-code("fbb0"); -$icon-text-align-right_16: char-from-code("fbb1"); -$icon-text-blockquote_12: char-from-code("fbb2"); -$icon-text-blockquote_16: char-from-code("fbb3"); -$icon-text-blockquote_18: char-from-code("fbb4"); -$icon-text-blockquote_20: char-from-code("fbb5"); -$icon-text-blockquote_8: char-from-code("fbb6"); -$icon-text-bold_12: char-from-code("fbb7"); -$icon-text-bold_16: char-from-code("fbb8"); -$icon-text-bold_24: char-from-code("fbb9"); -$icon-text-code-block_12: char-from-code("fbba"); -$icon-text-code-block_16: char-from-code("fbbb"); -$icon-text-code-block_24: char-from-code("fbbc"); -$icon-text-code-inline_12: char-from-code("fbbd"); -$icon-text-code-inline_16: char-from-code("fbbe"); -$icon-text-color_12: char-from-code("fbbf"); -$icon-text-color_16: char-from-code("fbc0"); -$icon-text-format_10: char-from-code("fbc1"); -$icon-text-format_12: char-from-code("fbc2"); -$icon-text-format_16: char-from-code("fbc3"); -$icon-text-format_20: char-from-code("fbc4"); -$icon-text-format_24: char-from-code("fbc5"); -$icon-text-format_8: char-from-code("fbc6"); -$icon-text-heading-1_12: char-from-code("fbc7"); -$icon-text-heading-1_16: char-from-code("fbc8"); -$icon-text-heading-2_12: char-from-code("fbc9"); -$icon-text-heading-2_16: char-from-code("fbca"); -$icon-text-heading-3_12: char-from-code("fbcb"); -$icon-text-heading-3_16: char-from-code("fbcc"); -$icon-text-highlight_12: char-from-code("fbcd"); -$icon-text-highlight_16: char-from-code("fbce"); -$icon-text-indent-decrease_12: char-from-code("fbcf"); -$icon-text-indent-increase_12: char-from-code("fbd0"); -$icon-text-italic_12: char-from-code("fbd1"); -$icon-text-italic_16: char-from-code("fbd2"); -$icon-text-italic_24: char-from-code("fbd3"); -$icon-text-list-bulleted_10: char-from-code("fbd4"); -$icon-text-list-bulleted_12: char-from-code("fbd5"); -$icon-text-list-bulleted_16: char-from-code("fbd6"); -$icon-text-list-bulleted_24: char-from-code("fbd7"); -$icon-text-list-bulleted_8: char-from-code("fbd8"); -$icon-text-list-numbered_12: char-from-code("fbd9"); -$icon-text-list-numbered_16: char-from-code("fbda"); -$icon-text-list-numbered_24: char-from-code("fbdb"); -$icon-text-list-numbered_36: char-from-code("fbdc"); -$icon-text-list-numbered_40: char-from-code("fbdd"); -$icon-text-strikethrough_12: char-from-code("fbde"); -$icon-text-strikethrough_16: char-from-code("fbdf"); -$icon-text-table_12: char-from-code("fbe0"); -$icon-text-table_16: char-from-code("fbe1"); -$icon-text-underline_12: char-from-code("fbe2"); -$icon-text-underline_16: char-from-code("fbe3"); -$icon-text-underline_24: char-from-code("fbe4"); -$icon-too-fast_12: char-from-code("fbe5"); -$icon-too-fast_16: char-from-code("fbe6"); -$icon-too-slow_12: char-from-code("fbe7"); -$icon-too-slow_16: char-from-code("fbe8"); -$icon-tools_16: char-from-code("fbe9"); -$icon-tools_20: char-from-code("fbea"); -$icon-tools_24: char-from-code("fbeb"); -$icon-tools_28: char-from-code("fbec"); -$icon-tools_32: char-from-code("fbed"); -$icon-touch_16: char-from-code("fbee"); -$icon-touch10_24: char-from-code("fbef"); -$icon-transcript_16: char-from-code("fbf0"); -$icon-transcript_20: char-from-code("fbf1"); -$icon-trending_10: char-from-code("fbf2"); -$icon-twitter_12: char-from-code("fbf3"); -$icon-twitter_16: char-from-code("fbf4"); -$icon-twitter-circle_24: char-from-code("fbf5"); -$icon-twitter-circle_32: char-from-code("fbf6"); -$icon-twitter-circle_40: char-from-code("fbf7"); -$icon-ucm-cloud_10: char-from-code("fbf8"); -$icon-ucm-cloud_16: char-from-code("fbf9"); -$icon-ucm-cloud_24: char-from-code("fbfa"); -$icon-ucm-cloud_32: char-from-code("fbfb"); -$icon-undo_12: char-from-code("fbfc"); -$icon-undo_14: char-from-code("fbfd"); -$icon-undo_16: char-from-code("fbfe"); -$icon-undo_24: char-from-code("fbff"); -$icon-unlink_20: char-from-code("fc00"); -$icon-unread-badge_10: char-from-code("fc01"); -$icon-unread-badge_12: char-from-code("fc02"); -$icon-unread-badge_16: char-from-code("fc03"); -$icon-unread-badge_8: char-from-code("fc04"); -$icon-unsecure_12: char-from-code("fc05"); -$icon-unsecure_14: char-from-code("fc06"); -$icon-unsecure_16: char-from-code("fc07"); -$icon-unsecure_24: char-from-code("fc08"); -$icon-unsecure_28: char-from-code("fc09"); -$icon-unsorted_10: char-from-code("fc0a"); -$icon-unsorted_16: char-from-code("fc0b"); -$icon-unsorted_24: char-from-code("fc0c"); -$icon-update-file-share_12: char-from-code("fc0d"); -$icon-update-file-share_16: char-from-code("fc0e"); -$icon-update-file-share_24: char-from-code("fc0f"); -$icon-upgrade_20: char-from-code("fc10"); -$icon-upload_12: char-from-code("fc11"); -$icon-upload_130: char-from-code("fc12"); -$icon-upload_14: char-from-code("fc13"); -$icon-upload_16: char-from-code("fc14"); -$icon-upload_18: char-from-code("fc15"); -$icon-upload_20: char-from-code("fc16"); -$icon-upload_24: char-from-code("fc17"); -$icon-upload_28: char-from-code("fc18"); -$icon-upload_32: char-from-code("fc19"); -$icon-upload_36: char-from-code("fc1a"); -$icon-usb_16: char-from-code("fc1b"); -$icon-user_16: char-from-code("fc1c"); -$icon-user_20: char-from-code("fc1d"); -$icon-user_24: char-from-code("fc1e"); -$icon-user_56: char-from-code("fc1f"); -$icon-vector: char-from-code("fc20"); -$icon-video-effect_12: char-from-code("fc21"); -$icon-video-effect_16: char-from-code("fc22"); -$icon-video-effect_20: char-from-code("fc23"); -$icon-video-layout_12: char-from-code("fc24"); -$icon-video-layout_16: char-from-code("fc25"); -$icon-video-layout-auto_12: char-from-code("fc26"); -$icon-video-layout-auto_16: char-from-code("fc27"); -$icon-video-layout-auto_20: char-from-code("fc28"); -$icon-video-layout-auto_24: char-from-code("fc29"); -$icon-video-layout-equal_12: char-from-code("fc2a"); -$icon-video-layout-equal_14: char-from-code("fc2b"); -$icon-video-layout-equal_16: char-from-code("fc2c"); -$icon-video-layout-equal_20: char-from-code("fc2d"); -$icon-video-layout-equal_24: char-from-code("fc2e"); -$icon-video-layout-equal_28: char-from-code("fc2f"); -$icon-video-layout-equal-filled_24: char-from-code("fc30"); -$icon-video-layout-overlay_12: char-from-code("fc31"); -$icon-video-layout-overlay_16: char-from-code("fc32"); -$icon-video-layout-overlay_20: char-from-code("fc33"); -$icon-video-layout-overlay_24: char-from-code("fc34"); -$icon-video-layout-prominent_12: char-from-code("fc35"); -$icon-video-layout-prominent_16: char-from-code("fc36"); -$icon-video-layout-prominent_20: char-from-code("fc37"); -$icon-video-layout-prominent_24: char-from-code("fc38"); -$icon-video-layout-share-dominant_12: char-from-code("fc39"); -$icon-video-layout-share-dominant_16: char-from-code("fc3a"); -$icon-video-layout-share-dominant_20: char-from-code("fc3b"); -$icon-video-layout-share-dominant_24: char-from-code("fc3c"); -$icon-video-layout-single_12: char-from-code("fc3d"); -$icon-video-layout-single_16: char-from-code("fc3e"); -$icon-video-layout-single_20: char-from-code("fc3f"); -$icon-video-layout-single_28: char-from-code("fc40"); -$icon-video-layout-stack_12: char-from-code("fc41"); -$icon-video-layout-stack_16: char-from-code("fc42"); -$icon-video-layout-stack_20: char-from-code("fc43"); -$icon-video-layout-stack_24: char-from-code("fc44"); -$icon-video-layout-stack_28: char-from-code("fc45"); -$icon-video-layout-stack-filled_24: char-from-code("fc46"); -$icon-video-layout-video-dominant_12: char-from-code("fc47"); -$icon-video-layout-video-dominant_16: char-from-code("fc48"); -$icon-video-layout-video-dominant_20: char-from-code("fc49"); -$icon-video-layout-video-dominant_24: char-from-code("fc4a"); -$icon-view-all_12: char-from-code("fc4b"); -$icon-view-all_14: char-from-code("fc4c"); -$icon-view-feed-multiple_16: char-from-code("fc4d"); -$icon-view-feed-panel_16: char-from-code("fc4e"); -$icon-view-feed-single_16: char-from-code("fc4f"); -$icon-view-list_10: char-from-code("fc50"); -$icon-view-list_12: char-from-code("fc51"); -$icon-view-list_14: char-from-code("fc52"); -$icon-view-list_16: char-from-code("fc53"); -$icon-view-list_20: char-from-code("fc54"); -$icon-view-list_24: char-from-code("fc55"); -$icon-view-list_28: char-from-code("fc56"); -$icon-view-list-circle_100: char-from-code("fc57"); -$icon-view-mixed_12: char-from-code("fc58"); -$icon-view-stack_12: char-from-code("fc59"); -$icon-view-stack_14: char-from-code("fc5a"); -$icon-view-stack_20: char-from-code("fc5b"); -$icon-view-stack_24: char-from-code("fc5c"); -$icon-view-thumbnail_12: char-from-code("fc5d"); -$icon-view-thumbnail_14: char-from-code("fc5e"); -$icon-view-thumbnail_16: char-from-code("fc5f"); -$icon-view-thumbnail_20: char-from-code("fc60"); -$icon-view-thumbnail_24: char-from-code("fc61"); -$icon-voice_20: char-from-code("fc62"); -$icon-voicemail_10: char-from-code("fc63"); -$icon-voicemail_14: char-from-code("fc64"); -$icon-voicemail_16: char-from-code("fc65"); -$icon-voicemail_18: char-from-code("fc66"); -$icon-voicemail_20: char-from-code("fc67"); -$icon-voicemail_22: char-from-code("fc68"); -$icon-voicemail_24: char-from-code("fc69"); -$icon-voicemail_28: char-from-code("fc6a"); -$icon-voicemail_8: char-from-code("fc6b"); -$icon-voicemail-active_12: char-from-code("fc6c"); -$icon-voicemail-active_14: char-from-code("fc6d"); -$icon-voicemail-active_16: char-from-code("fc6e"); -$icon-voicemail-active_18: char-from-code("fc6f"); -$icon-voicemail-active_20: char-from-code("fc70"); -$icon-voicemail-active_22: char-from-code("fc71"); -$icon-voicemail-active_24: char-from-code("fc72"); -$icon-voicemail-active_28: char-from-code("fc73"); -$icon-wallpaper_16: char-from-code("fc74"); -$icon-wallpaper_20: char-from-code("fc75"); -$icon-wallpaper_24: char-from-code("fc76"); -$icon-wallpaper_28: char-from-code("fc77"); -$icon-wallpaper_32: char-from-code("fc78"); -$icon-warning_100: char-from-code("fc79"); -$icon-warning_12: char-from-code("fc7a"); -$icon-warning_14: char-from-code("fc7b"); -$icon-warning_16: char-from-code("fc7c"); -$icon-warning_20: char-from-code("fc7d"); -$icon-warning_24: char-from-code("fc7e"); -$icon-warning_28: char-from-code("fc7f"); -$icon-warning_32: char-from-code("fc80"); -$icon-warning_40: char-from-code("fc81"); -$icon-warning_44: char-from-code("fc82"); -$icon-warning_56: char-from-code("fc83"); -$icon-warning_64: char-from-code("fc84"); -$icon-warning_72: char-from-code("fc85"); -$icon-warning-active_12: char-from-code("fc86"); -$icon-warning-active_16: char-from-code("fc87"); -$icon-waveform_20: char-from-code("fc88"); -$icon-web-sharing_16: char-from-code("fc89"); -$icon-web-sharing_24: char-from-code("fc8a"); -$icon-webex_10: char-from-code("fc8b"); -$icon-webex_16: char-from-code("fc8c"); -$icon-webex_24: char-from-code("fc8d"); -$icon-webex_48: char-from-code("fc8e"); -$icon-webex-board_12: char-from-code("fc8f"); -$icon-webex-board_14: char-from-code("fc90"); -$icon-webex-board_16: char-from-code("fc91"); -$icon-webex-board_20: char-from-code("fc92"); -$icon-webex-board_24: char-from-code("fc93"); -$icon-webex-board_28: char-from-code("fc94"); -$icon-webex-board_32: char-from-code("fc95"); -$icon-webex-board_48: char-from-code("fc96"); -$icon-webex-calling_10: char-from-code("fc97"); -$icon-webex-calling_12: char-from-code("fc98"); -$icon-webex-calling_16: char-from-code("fc99"); -$icon-webex-calling_18: char-from-code("fc9a"); -$icon-webex-calling_20: char-from-code("fc9b"); -$icon-webex-calling_24: char-from-code("fc9c"); -$icon-webex-codec-plus_16: char-from-code("fc9d"); -$icon-webex-codec-plus_20: char-from-code("fc9e"); -$icon-webex-community_20: char-from-code("fc9f"); -$icon-webex-desk-camera_20: char-from-code("fca0"); -$icon-webex-instant-meeting_12: char-from-code("fca1"); -$icon-webex-instant-meeting_14: char-from-code("fca2"); -$icon-webex-instant-meeting_16: char-from-code("fca3"); -$icon-webex-instant-meeting_20: char-from-code("fca4"); -$icon-webex-instant-meeting_24: char-from-code("fca5"); -$icon-webex-meetings_10: char-from-code("fca6"); -$icon-webex-meetings_12: char-from-code("fca7"); -$icon-webex-meetings_14: char-from-code("fca8"); -$icon-webex-meetings_16: char-from-code("fca9"); -$icon-webex-meetings_20: char-from-code("fcaa"); -$icon-webex-meetings_24: char-from-code("fcab"); -$icon-webex-meetings_48: char-from-code("fcac"); -$icon-webex-quad-camera_16: char-from-code("fcad"); -$icon-webex-quad-camera_20: char-from-code("fcae"); -$icon-webex-room-kit_16: char-from-code("fcaf"); -$icon-webex-room-kit_20: char-from-code("fcb0"); -$icon-webex-room-kit-plus_16: char-from-code("fcb1"); -$icon-webex-room-kit-plus_20: char-from-code("fcb2"); -$icon-webex-share_12: char-from-code("fcb3"); -$icon-webex-share_14: char-from-code("fcb4"); -$icon-webex-share_16: char-from-code("fcb5"); -$icon-webex-share_20: char-from-code("fcb6"); -$icon-webex-teams_10: char-from-code("fcb7"); -$icon-webex-teams_12: char-from-code("fcb8"); -$icon-webex-teams_14: char-from-code("fcb9"); -$icon-webex-teams_16: char-from-code("fcba"); -$icon-webex-teams_18: char-from-code("fcbb"); -$icon-webex-teams_20: char-from-code("fcbc"); -$icon-webex-voice_16: char-from-code("fcbd"); -$icon-webex-voice_20: char-from-code("fcbe"); -$icon-webpop_12: char-from-code("fcbf"); -$icon-webpop_16: char-from-code("fcc0"); -$icon-webpop_20: char-from-code("fcc1"); -$icon-webpop_24: char-from-code("fcc2"); -$icon-whatsApp_12: char-from-code("fcc3"); -$icon-whatsApp_16: char-from-code("fcc4"); -$icon-whiteboard_10: char-from-code("fcc5"); -$icon-whiteboard_12: char-from-code("fcc6"); -$icon-whiteboard_14: char-from-code("fcc7"); -$icon-whiteboard_16: char-from-code("fcc8"); -$icon-whiteboard_20: char-from-code("fcc9"); -$icon-whiteboard_24: char-from-code("fcca"); -$icon-whiteboard_26: char-from-code("fccb"); -$icon-whiteboard_28: char-from-code("fccc"); -$icon-whiteboard_32: char-from-code("fccd"); -$icon-whiteboard_36: char-from-code("fcce"); -$icon-whiteboard_8: char-from-code("fccf"); -$icon-whiteboard-content_16: char-from-code("fcd0"); -$icon-whiteboard-content_24: char-from-code("fcd1"); -$icon-widgets-adr_20: char-from-code("fcd2"); -$icon-wifi_12: char-from-code("fcd3"); -$icon-wifi_16: char-from-code("fcd4"); -$icon-wifi_20: char-from-code("fcd5"); -$icon-wifi_24: char-from-code("fcd6"); -$icon-wifi-error_12: char-from-code("fcd7"); -$icon-wifi-error_16: char-from-code("fcd8"); -$icon-wifi-selected_24: char-from-code("fcd9"); -$icon-wikipedia_16: char-from-code("fcda"); -$icon-window-corner-scrub_16: char-from-code("fcdb"); -$icon-window-vertical-scrub_16: char-from-code("fcdc"); -$icon-youtube-circle_24: char-from-code("fcdd"); -$icon-youtube-circle_32: char-from-code("fcde"); -$icon-youtube-circle_40: char-from-code("fcdf"); -$icon-zoom-in_12: char-from-code("fce0"); -$icon-zoom-in_14: char-from-code("fce1"); -$icon-zoom-in_16: char-from-code("fce2"); -$icon-zoom-in_20: char-from-code("fce3"); -$icon-zoom-out_12: char-from-code("fce4"); -$icon-zoom-out_14: char-from-code("fce5"); -$icon-zoom-out_16: char-from-code("fce6"); -$icon-zoom-out_20: char-from-code("fce7"); - -// Symphony icon mapping -//$icon-alerting: $icon-alerting_16 !default; -$icon-analysis-active: $icon-analysis_16 !default; -$icon-analysis: $icon-analysis_16 !default; -//$icon-animation: $icon-animation_16 !default; -$icon-annotation: $icon-annotation_16 !default; -//$icon-applause: $icon-applause_16 !default; -$icon-application: $icon-application_16 !default; -$icon-applications: $icon-applications_16 !default; -$icon-arrow-back: $icon-arrow-left_16 !default; -$icon-arrow-down: $icon-arrow-down_16 !default; -$icon-arrow-left-tail: $icon-back_16 !default; -$icon-arrow-next: $icon-arrow-right_16 !default; -$icon-arrow-right-tail: $icon-next_16 !default; -$icon-arrow-up: $icon-arrow-up_16 !default; -$icon-at: $icon-mention_16 !default; -$icon-attachment: $icon-attachment_16 !default; -$icon-audio-broadcast: $icon-audio-broadcast_16 !default; -$icon-audio-min: $icon-speaker-off_16 !default; -$icon-audio-plus: $icon-speaker_16 !default; -//$icon-audio-settings: $icon-adjust-audio_16 !default; -$icon-audio: $icon-speaker_16 !default; -$icon-aux-camera: $icon-camera-aux_16 !default; -$icon-back: $icon-back_16 !default; -//$icon-backup-data: $icon-backup-data_16 !default; -$icon-bars: $icon-analysis_16 !default; -//$icon-battery: $icon-battery_16 !default; -$icon-bell-cross: $icon-alert-muted_16 !default; -$icon-bell: $icon-alert_16 !default; -$icon-blocked: $icon-blocked_16 !default; -//$icon-bluetooth: $icon-bluetooth_16 !default; -$icon-bookmark: $icon-bookmark_16 !default; -$icon-bot-four: $icon-bot_36 !default; -$icon-bot-five: $icon-bot_36 !default; -$icon-bot-six: $icon-bot_36 !default; -$icon-brightness: $icon-brightness_16 !default; -$icon-broadcast-message: $icon-broadcast-message_16 !default; -//$icon-broken-image: $icon-broken-file_16 !default; -$icon-browser: $icon-browser_16 !default; -//$icon-bug: $icon-bugs_16 !default; -$icon-cal: $icon-calendar-month_16 !default; -$icon-call-forwarding: $icon-call-forward_16 !default; -$icon-call-handling: $icon-call-handling_16 !default; -//$icon-call-log: $icon-call-log_16 !default; -//$icon-call-rate: $icon-callrate_16 !default; -//$icon-callback: $icon-callback_16 !default; -$icon-calls: $icon-handset_16 !default; -$icon-camera: $icon-camera-photo_16 !default; -$icon-certified: $icon-certified_16 !default; -//$icon-chapters: $icon-chapters_16 !default; -//$icon-charging: $icon-charging_16 !default; -$icon-chat: $icon-chat_16 !default; -$icon-chats: $icon-chat-group_16 !default; -$icon-check-mark-success: $icon-check-circle_24 !default; -$icon-check: $icon-check_16 !default; -$icon-checkbox: $icon-check_16 !default; -$icon-chevron-down: $icon-arrow-down_16 !default; -$icon-chevron-left: $icon-arrow-left_16 !default; -$icon-chevron-right: $icon-arrow-right_16 !default; -$icon-chevron-up: $icon-arrow-up_16 !default; -$icon-circle-arrow-down: $icon-arrow-circle-down_16 !default; -$icon-circle-arrows-circular: $icon-refresh_16 !default; -$icon-circle-arrows-cross: $icon-pto_16 !default; -$icon-circle-calendar: $icon-calendar-month_16 !default; -$icon-circle-call: $icon-handset_16 !default; -$icon-circle-check-mark-success: $icon-check-circle_24 !default; -$icon-circle-check: $icon-check-circle_24 !default; -$icon-circle-clock-hands: $icon-recents_16 !default; -$icon-circle-clock: $icon-recents_16 !default; -$icon-circle-comp-negative: $icon-error_16 !default; -$icon-circle-computer-blank: $icon-laptop_16 !default; -$icon-circle-contact-centre: $icon-headset_16 !default; -$icon-circle-data: $icon-server_16 !default; -$icon-circle-download: $icon-download_16 !default; -$icon-circle-email: $icon-email-read_16 !default; -$icon-circle-flag: $icon-flag-circle_16 !default; -$icon-circle-globe: $icon-language_16 !default; -$icon-circle-group: $icon-chat-group_16 !default; -$icon-circle-hg-circular: $icon-recurring_16 !default; -$icon-circle-links: $icon-link_16 !default; -$icon-circle-location: $icon-location_16 !default; -$icon-circle-lock: $icon-secure_16 !default; -$icon-circle-message: $icon-chat_16 !default; -$icon-circle-more: $icon-more-circle_16 !default; -$icon-circle-question: $icon-help-circle_16 !default; -$icon-circle-star: $icon-favorite_16 !default; -$icon-circle-telepresence: $icon-endpoint_16 !default; -$icon-circle-unlock: $icon-unsecure_16 !default; -$icon-circle-upload: $icon-upload_16 !default; -$icon-circle-user: $icon-people-circle_16 !default; -$icon-circle-webex: $icon-webex_16 !default; -$icon-circle-world: $icon-headset_16 !default; -$icon-circle: $icon-unread-badge_16 !default; -$icon-cisco-logo: $icon-cisco-logo !default; -$icon-clipboard: $icon-notepad_16 !default; -$icon-clock: $icon-recents_16 !default; -$icon-close-keyboard: $icon-keyboard-close_16 !default; -$icon-close: $icon-cancel_16 !default; -$icon-cloud-active: $icon-cloud_16 !default; -$icon-cloud: $icon-cloud_16 !default; -$icon-cog: $icon-settings_16 !default; -//$icon-comment: $icon-comment_16 !default; -//$icon-community: $icon-community_16 !default; -$icon-company-active: $icon-company_32 !default; -$icon-computer: $icon-computer_16 !default; -$icon-conference: $icon-team_16 !default; -$icon-contact-card: $icon-contact-card_16 !default; -$icon-contact: $icon-people_16 !default; -$icon-content-share: $icon-export_16 !default; -$icon-convo: $icon-chat-group_16 !default; -$icon-create-page: $icon-document-create_16 !default; -$icon-data-usage: $icon-data-usage_16 !default; -$icon-data: $icon-server_16 !default; -//$icon-dc-power: $icon-power-dc_16 !default; -//$icon-default-app: $icon-default-app_16 !default; -$icon-delete: $icon-backspace_16 !default; -$icon-desk-phone: $icon-deskphone_16 !default; -$icon-devices: $icon-endpoint_16 !default; -$icon-diagnostics: $icon-diagnostics_32 !default; -$icon-dial: $icon-dialpad_16 !default; -$icon-directory: $icon-directory_24 !default; -//$icon-disc: $icon-disc_16 !default; -$icon-display: $icon-display_16 !default; -$icon-do-not-disturb: $icon-blocked_16 !default; -//$icon-document-camera: $icon-document-camera_16 !default; -$icon-document: $icon-document_16 !default; -$icon-download: $icon-download_16 !default; -$icon-edit: $icon-edit_16 !default; -$icon-email: $icon-email_16 !default; -$icon-emoticons: $icon-emoticons_16 !default; -$icon-end-call: $icon-cancel_16 !default; -$icon-endpoint-active: $icon-endpoint_32 !default; -$icon-endpoint: $icon-endpoint_16 !default; -$icon-eraser: $icon-eraser_16 !default; -$icon-error: $icon-error_16 !default; -$icon-ethernet: $icon-ethernet_16 !default; -$icon-exernal-calendar: $icon-calendar-external_16 !default; -$icon-exit-contain: $icon-clear-active_16 !default; -$icon-exit-outline: $icon-clear_16 !default; -$icon-exit: $icon-cancel_16 !default; -$icon-export: $icon-export_16 !default; -$icon-extension-mobility: $icon-extension-mobility_16 !default; -$icon-fbw: $icon-fbw_16 !default; -//$icon-feedback-clear: $icon-feedback-clear_16 !default; -//$icon-feedback-result: $icon-feedback-result_16 !default; -$icon-feedback: $icon-feedback_16 !default; -//$icon-ffw: $icon-ffw_16 !default; -$icon-filter: $icon-filter-circle_20 !default; -$icon-flagged: $icon-flag_16 !default; -$icon-folder: $icon-files_16 !default; -$icon-forced-sign-in: $icon-sign-in-forced_16 !default; -//$icon-forward-to-mobility: $icon-forward-to-mobility_16 !default; -$icon-fullscreen: $icon-fullscreen_16 !default; -//$icon-graph: $icon-graph_16 !default; -$icon-grid-large: $icon-view-thumbnail_16 !default; -$icon-grid-list: $icon-view-list_16 !default; -//$icon-group-call: $icon-call-group_16 !default; -$icon-hamburger-menu: $icon-list-menu_16 !default; -$icon-headset-cross: $icon-headset-muted_16 !default; -$icon-headset: $icon-headset_16 !default; -$icon-help-outline: $icon-help-circle_16 !default; -$icon-help: $icon-help-circle_16 !default; -$icon-home-active: $icon-house_16 !default; -$icon-home: $icon-house_16 !default; -//$icon-hue: $icon-hue_16 !default; -$icon-hunt-group: $icon-hunt-group_16 !default; -$icon-image-contain: $icon-hunt-group_16 !default; -$icon-image: $icon-file-image_24 !default; -$icon-import: $icon-import_16 !default; -//$icon-inbox: $icon-email-inbox_16 !default; -$icon-incoming-call: $icon-call-incoming_16 !default; -$icon-indeterminate: $icon-minus_16 !default; -$icon-info-outline: $icon-info_16 !default; -$icon-info: $icon-info_16 !default; -$icon-information: $icon-info_16 !default; -$icon-instant-meeting: $icon-webex-instant-meeting_16 !default; -//$icon-intercom-duplex-connected: $icon-intercom-duplex_16 !default; -//$icon-intercom-whisper: $icon-intercom-whisper_16 !default; -//$icon-intercom: $icon-intercom_16 !default; -$icon-invite: $icon-email-invite_16 !default; -//$icon-key-expansion-module: $icon-key-expansion-module_16 !default; -$icon-keyboard: $icon-keyboard_16 !default; -$icon-language: $icon-language_16 !default; -$icon-laser-pointer: $icon-laser-pointer_16 !default; -$icon-layout: $icon-layout-side-by-side-vertical_16 !default; -$icon-leave-meeting: $icon-exit-room_16 !default; -$icon-left-arrow: $icon-arrow-left_16 !default; -$icon-lightbulb: $icon-room-lights_16 !default; -$icon-like: $icon-like_16 !default; -$icon-line-out-left: $icon-speaker-line-out-left_16 !default; -$icon-line-out-right: $icon-speaker-line-out-right_16 !default; -$icon-link: $icon-link_16 !default; -$icon-list-menu: $icon-list-menu_16 !default; -$icon-list-view: $icon-view-list_16 !default; -$icon-location-active: $icon-location_28 !default; -$icon-location: $icon-location_28 !default; -$icon-lock: $icon-secure_16 !default; -$icon-locked-speaker: $icon-active-speaker-locked_24 !default; -//$icon-manage-cable: $icon-cables_16 !default; -$icon-maximize: $icon-maximize_16 !default; -$icon-meet-me: $icon-enter-room_16 !default; -$icon-meeting-room: $icon-team_16 !default; -//$icon-merge-call: $icon-call-merge_16 !default; -$icon-message: $icon-chat_16 !default; -$icon-mic-in: $icon-audio-input_16 !default; -//$icon-micro-blog: $icon-micro-blog_16 !default; -$icon-microphone: $icon-microphone_16 !default; -$icon-minimize: $icon-minimize_16 !default; -$icon-minus: $icon-minus_16 !default; -$icon-mobile-phone: $icon-phone-ios_16 !default; -//$icon-mobile-presenter: $icon-mobile-presenter_16 !default; -$icon-month: $icon-calendar-month_16 !default; -$icon-more: $icon-more_16 !default; -$icon-move-page: $icon-document-move_16 !default; -$icon-music: $icon-adjust-audio_24 !default; -$icon-mute: $icon-microphone-muted_16 !default; -$icon-no-signal: $icon-signal-0_16 !default; -$icon-notes: $icon-notes_16 !default; -//$icon-off-hook: $icon-off-hook_16 !default; -//$icon-other-phone: $icon-other-phone_16 !default; -//$icon-outbox: $icon-email-outbox_16 !default; -$icon-outgoing-call: $icon-call-outgoing_16 !default; -$icon-paired-audio: $icon-paired-handset_24 !default; -$icon-paired-call: $icon-paired-camera_24 !default; -//$icon-panel-shift-left: $icon-panel-slide-left_16 !default; -//$icon-panel-shift-right: $icon-panel-slide-right_16 !default; -//$icon-parked: $icon-parked_16 !default; -//$icon-pass-mouse: $icon-pass-mouse_16 !default; -$icon-pause: $icon-pause_16 !default; -$icon-pc: $icon-laptop_16 !default; -$icon-pencil: $icon-edit_16 !default; -$icon-people-active: $icon-people_28 !default; -$icon-persistent-chat: $icon-chat-group_16 !default; -$icon-phone-cross: $icon-handset-muted_16 !default; -$icon-phone: $icon-handset_16 !default; -$icon-picture-in-picture: $icon-picture-in-picture_16 !default; -$icon-pin: $icon-pin_16 !default; -$icon-plan-review: $icon-view-feed-multiple_16 !default; -$icon-play: $icon-play_16 !default; -//$icon-playlist: $icon-playlist_16 !default; -$icon-plugin: $icon-accessories_16 !default; -$icon-plus-circle: $icon-add_16 !default; -$icon-plus: $icon-plus_16 !default; -//$icon-poll: $icon-poll_16 !default; -//$icon-popout: $icon-pop-out_16 !default; -//$icon-popup-dialogue: $icon-pop-up_16 !default; -//$icon-power: $icon-power_16 !default; -$icon-presentation: $icon-presentation_16 !default; -$icon-print: $icon-print_16 !default; -$icon-priority: $icon-priority_16 !default; -$icon-privacy: $icon-private_16 !default; -$icon-private: $icon-private-circle_16 !default; -$icon-proximity-not-connected: $icon-proximity-muted_16 !default; -$icon-proximity: $icon-proximity_16 !default; -$icon-quality: $icon-quality_24 !default; -$icon-question-circle: $icon-help-circle_16 !default; -//$icon-raise-hand: $icon-raise-hand_16 !default; -$icon-read-email: $icon-email-read_16 !default; -$icon-recents: $icon-recents_16 !default; -$icon-record: $icon-record_16 !default; -$icon-redial: $icon-redial_16 !default; -$icon-refresh: $icon-refresh_16 !default; -$icon-remove-contact: $icon-participant-remove_20 !default; -$icon-remove-outline: $icon-remove_16 !default; -$icon-remove: $icon-remove_16 !default; -//$icon-reply-all: $icon-reply-all_16 !default; -$icon-report: $icon-file-text_24 !default; -$icon-reset: $icon-reset_24 !default; -$icon-right-arrow-closed-outline: $icon-arrow-circle-right_16 !default; -$icon-right-arrow-contain: $icon-arrow-circle-right_16 !default; -$icon-right-arrow-contained: $icon-play_16 !default; -$icon-right-arrow-outline: $icon-arrow-circle-right_16 !default; -$icon-right-arrow: $icon-arrow-right_16 !default; -$icon-ringer-settings: $icon-adjust-audio_24 !default; -//$icon-rtprx-rtptx-duplex: $icon-rtprx-rtptx-duplex_16 !default; -//$icon-rtptx: $icon-rtptx_16 !default; -$icon-running-application: $icon-running-application_24 !default; -$icon-save: $icon-save_16 !default; -$icon-schedule-add: $icon-calendar-add_16 !default; -$icon-screen-capture-square: $icon-screenshot_16 !default; -$icon-screen-capture: $icon-screenshot_16 !default; -//$icon-sd: $icon-sd-card_16 !default; -$icon-search: $icon-search_16 !default; -$icon-self-view-alt: $icon-selfview_16 !default; -$icon-self-view: $icon-selfview_16 !default; -$icon-send-email: $icon-send_16 !default; -$icon-send: $icon-send_16 !default; -//$icon-sent: $icon-email-sent_16 !default; -$icon-settings-active: $icon-settings_32 !default; -$icon-settings: $icon-settings_16 !default; -$icon-setup-assistant: $icon-setup-assistant_16 !default; -$icon-share-content: $icon-document-share_16 !default; -$icon-share: $icon-share_16 !default; -$icon-sign-in: $icon-sign-in_16 !default; -$icon-sign-out: $icon-sign-out_16 !default; -$icon-signal-1: $icon-signal-25_16 !default; -$icon-signal-2: $icon-signal-50_16 !default; -$icon-signal-3: $icon-signal-75_16 !default; -$icon-signal-4: $icon-signal-100_16 !default; -$icon-skip-bw: $icon-skip-bw_16 !default; -$icon-skip-fw: $icon-skip-fw_16 !default; -$icon-sliders: $icon-adjust_16 !default; -$icon-sort: $icon-picker_18 !default; -$icon-sound: $icon-audio-broadcast_16 !default; -$icon-space: $icon-space_16 !default; -//$icon-spam: $icon-spam_16 !default; -$icon-spark: $icon-spark_16 !default; -$icon-speaker-cross: $icon-speaker-muted_16 !default; -$icon-speaker: $icon-speaker-off_16 !default; -//$icon-speed-dial: $icon-speed-dial_16 !default; -$icon-star: $icon-favorite_16 !default; -$icon-stop: $icon-stop_16 !default; -$icon-storage: $icon-server_16 !default; -$icon-subscribe: $icon-subscribe_16 !default; -$icon-support: $icon-diagnostics_32 !default; -//$icon-swap-calls: $icon-call-swap_16 !default; -$icon-swap-camera: $icon-camera-photo-swap_16 !default; -$icon-swap-video-camera: $icon-camera-swap_16 !default; -$icon-tables: $icon-picker_18 !default; -$icon-tablet: $icon-tablet_24 !default; -$icon-team-collapsed-view: $icon-video-layout_16 !default; -$icon-text-format: $icon-text-format_16 !default; -$icon-text: $icon-transcript_16 !default; -$icon-three-dots: $icon-more_16 !default; -$icon-thumbnail-view: $icon-view-thumbnail_16 !default; -$icon-time: $icon-recents_16 !default; -//$icon-timeline: $icon-timeline_16 !default; -//$icon-too-fast: $icon-too-fast_16 !default; -//$icon-too-slow: $icon-too-slow_16 !default; -$icon-tools-active: $icon-tools_32 !default; -$icon-tools: $icon-tools_32 !default; -$icon-touch: $icon-touch_16 !default; -$icon-transcript: $icon-transcript_16 !default; -//$icon-transfer-to-mobile: $icon-transfer-to-mobile_16 !default; -$icon-trash: $icon-delete_16 !default; -//$icon-universal-inbox: $icon-email-inbox-universal_16 !default; -$icon-unlock: $icon-unsecure_16 !default; -$icon-upload-contain: $icon-upload_16 !default; -$icon-upload: $icon-upload_16 !default; -$icon-usb: $icon-usb_16 !default; -$icon-user-chat: $icon-chat_16 !default; -$icon-user: $icon-people_16 !default; -//$icon-vibrate: $icon-vibration_16 !default; -$icon-video-cross: $icon-camera-muted_16 !default; -$icon-video-group: $icon-camera-group_16 !default; -$icon-video-layout: $icon-video-layout_16 !default; -$icon-video-settings: $icon-adjust-video_24 !default; -//$icon-video-tips: $icon-video-tips_16 !default; -$icon-video: $icon-camera_16 !default; -$icon-view-feed-dual: $icon-view-feed-panel_16 !default; -$icon-view-feed-multi: $icon-view-feed-multiple_16 !default; -$icon-view-feed-single: $icon-view-feed-single_16 !default; -$icon-view-side-by-side: $icon-layout-side-by-side-horizonal_16 !default; -$icon-view-stacked: $icon-layout-stacked_16 !default; -$icon-voicemail: $icon-voicemail_16 !default; -$icon-volume-cross: $icon-speaker-muted_16 !default; -$icon-wallpaper: $icon-wallpaper_16 !default; -$icon-warning: $icon-warning_16 !default; -//$icon-watchlist: $icon-watchlist_16 !default; -//$icon-way-nav: $icon-4-way-navigation_16 !default; -$icon-web-sharing: $icon-web-sharing_24 !default; -$icon-webex: $icon-webex_16 !default; -$icon-webhook: $icon-webex_16 !default; -$icon-week: $icon-calendar-week_16 !default; -$icon-whiteboard: $icon-spark-board_16 !default; -$icon-wifi: $icon-wifi_16 !default; -$icon-zip: $icon-file-zip_24 !default; -$icon-zoom-in: $icon-zoom-in_16 !default; -$icon-zoom-out: $icon-zoom-out_16 !default; - -//------------------------------------------------------ -// Do not edit this file directly. These variables are -// generated from the individual scss settings files. -//------------------------------------------------------ - -@import '~@momentum-ui/core/scss/tools/functions/core'; - -//------------------------------------------------------ -// Do not edit this file directly. These variables are -// generated from the Momentum Design color tokens. -// @momentum-ui/tokens/dist/colors.json -//------------------------------------------------------ - -$md-blue-10: #C9F4FF !default; -$md-blue-20: #91EBFF !default; -$md-blue-30: #52DCFF !default; -$md-blue-40: #07C1F5 !default; -$md-blue-50: #00A0D1 !default; -$md-blue-60: #007AA3 !default; -$md-blue-70: #005E7D !default; -$md-blue-80: #064157 !default; -$md-blue-90: #092D3B !default; -$md-blue-95: #091E26 !default; -$md-blue-05: #EBFCFF !default; - -$md-red-10: #FFE8E3 !default; -$md-red-20: #FFD5CC !default; -$md-red-30: #FFBBAD !default; -$md-red-40: #FF9580 !default; -$md-red-50: #F7644A !default; -$md-red-60: #D4371C !default; -$md-red-70: #A12512 !default; -$md-red-80: #6E1D13 !default; -$md-red-90: #4A1812 !default; -$md-red-95: #301210 !default; -$md-red-05: #FFF5F2 !default; - -$md-yellow-10: #FFECC2 !default; -$md-yellow-20: #FFD98C !default; -$md-yellow-30: #FFC14F !default; -$md-yellow-40: #FC9D03 !default; -$md-yellow-50: #D97F00 !default; -$md-yellow-60: #A85F00 !default; -$md-yellow-70: #7D4705 !default; -$md-yellow-80: #54330D !default; -$md-yellow-90: #38240E !default; -$md-yellow-95: #261A0D !default; -$md-yellow-05: #FFF7E3 !default; - -$md-green-10: #BEFADE !default; -$md-green-20: #78F5B8 !default; -$md-green-30: #31E88C !default; -$md-green-40: #00CF64 !default; -$md-green-50: #00AB50 !default; -$md-green-60: #00853C !default; -$md-green-70: #03612C !default; -$md-green-80: #08421F !default; -$md-green-90: #092E16 !default; -$md-green-95: #081F10 !default; -$md-green-05: #EDFAF4 !default; - -$md-gray-10: #EDEDED !default; -$md-gray-20: #DEDEDE !default; -$md-gray-30: #CCCCCC !default; -$md-gray-40: #B2B2B2 !default; -$md-gray-50: #949494 !default; -$md-gray-60: #707070 !default; -$md-gray-70: #545454 !default; -$md-gray-80: #3B3B3B !default; -$md-gray-90: #292929 !default; -$md-gray-95: #1C1C1C !default; -$md-gray-100: #121212 !default; -$md-gray-05: #F7F7F7 !default; - -$md-white-60: #FFFFFF !default; -$md-white-100: #FFFFFF !default; -$md-white: #FFFFFF !default; - -$md-black-100: #000000 !default; -$md-black: #000000 !default; - -$md-orange-10: #FAF4EB !default; -$md-orange-20: #FCE4C7 !default; -$md-orange-30: #FFCA99 !default; -$md-orange-40: #FF9D52 !default; -$md-orange-50: #F26B1D !default; -$md-orange-60: #C74F0E !default; -$md-orange-70: #914017 !default; -$md-orange-80: #59311E !default; -$md-orange-90: #33221B !default; -$md-orange-100: #211916 !default; - -$md-gold-10: #F7F6DC !default; -$md-gold-20: #F5EAA2 !default; -$md-gold-30: #EBD460 !default; -$md-gold-40: #D6B220 !default; -$md-gold-50: #BA8C00 !default; -$md-gold-60: #996E00 !default; -$md-gold-70: #735107 !default; -$md-gold-80: #4D370C !default; -$md-gold-90: #30240D !default; -$md-gold-100: #21190B !default; - -$md-olive-10: #F3F5E4 !default; -$md-olive-20: #E7EDB7 !default; -$md-olive-30: #D3DB7B !default; -$md-olive-40: #B4BA43 !default; -$md-olive-50: #999923 !default; -$md-olive-60: #7D7A18 !default; -$md-olive-70: #5C5813 !default; -$md-olive-80: #403D11 !default; -$md-olive-90: #29260D !default; -$md-olive-100: #1C1A0A !default; - -$md-lime-10: #F3F7E9 !default; -$md-lime-20: #DDF2AE !default; -$md-lime-30: #BCE36F !default; -$md-lime-40: #93C437 !default; -$md-lime-50: #73A321 !default; -$md-lime-60: #588219 !default; -$md-lime-70: #416116 !default; -$md-lime-80: #2D4214 !default; -$md-lime-90: #1E2B10 !default; -$md-lime-100: #141C0C !default; - -$md-mint-10: #E9F7F3 !default; -$md-mint-20: #BAF5E7 !default; -$md-mint-30: #74E8D1 !default; -$md-mint-40: #30C9B0 !default; -$md-mint-50: #16A693 !default; -$md-mint-60: #148579 !default; -$md-mint-70: #12615A !default; -$md-mint-80: #12423F !default; -$md-mint-90: #102B2A !default; -$md-mint-100: #0C1C1B !default; - -$md-cyan-10: #E6F9FA !default; -$md-cyan-20: #B2F4F7 !default; -$md-cyan-30: #67E7F0 !default; -$md-cyan-40: #22C7D6 !default; -$md-cyan-50: #00A3B5 !default; -$md-cyan-60: #008094 !default; -$md-cyan-70: #066070 !default; -$md-cyan-80: #0A414D !default; -$md-cyan-90: #0B2A30 !default; -$md-cyan-100: #091C21 !default; - -$md-cobalt-10: #E6F8FF !default; -$md-cobalt-20: #C7EEFF !default; -$md-cobalt-30: #99DDFF !default; -$md-cobalt-40: #5EBFF6 !default; -$md-cobalt-50: #279BE7 !default; -$md-cobalt-60: #0A78CC !default; -$md-cobalt-70: #08599C !default; -$md-cobalt-80: #103C62 !default; -$md-cobalt-90: #12283D !default; -$md-cobalt-100: #0F1A25 !default; - -$md-slate-10: #F2F4FF !default; -$md-slate-20: #E3E7FA !default; -$md-slate-30: #CED2ED !default; -$md-slate-40: #B0B4D9 !default; -$md-slate-50: #8C91BD !default; -$md-slate-60: #6F739E !default; -$md-slate-70: #535573 !default; -$md-slate-80: #393A47 !default; -$md-slate-90: #26262B !default; -$md-slate-100: #1A1A1C !default; - -$md-violet-10: #F8F2FC !default; -$md-violet-20: #F0E3FC !default; -$md-violet-30: #E2CAFC !default; -$md-violet-40: #C7A5FA !default; -$md-violet-50: #A87FF1 !default; -$md-violet-60: #875AE1 !default; -$md-violet-70: #643ABD !default; -$md-violet-80: #432C77 !default; -$md-violet-90: #29223D !default; -$md-violet-100: #1B1823 !default; - -$md-purple-10: #FCF2FC !default; -$md-purple-20: #FCE1FC !default; -$md-purple-30: #FAC3F8 !default; -$md-purple-40: #F294F1 !default; -$md-purple-50: #E060DE !default; -$md-purple-60: #C233C4 !default; -$md-purple-70: #932099 !default; -$md-purple-80: #601E66 !default; -$md-purple-90: #3B1840 !default; -$md-purple-100: #251329 !default; - -$md-pink-10: #FFF2F5 !default; -$md-pink-20: #FFE0E7 !default; -$md-pink-30: #FFC7D2 !default; -$md-pink-40: #FC97AA !default; -$md-pink-50: #F0677E !default; -$md-pink-60: #D43B52 !default; -$md-pink-70: #A12A3A !default; -$md-pink-80: #66262D !default; -$md-pink-90: #3B1E21 !default; -$md-pink-100: #241617 !default; - -$md-theme-10: #C9F4FF !default; -$md-theme-20: #91EBFF !default; -$md-theme-30: #52DCFF !default; -$md-theme-40: #07C1F5 !default; -$md-theme-50: #00A0D1 !default; -$md-theme-60: #007AA3 !default; -$md-theme-70: #005E7D !default; -$md-theme-80: #064157 !default; -$md-theme-90: #092D3B !default; -$md-theme-95: #091E26 !default; -$md-theme-05: #EBFCFF !default; - - - - -//-------------------------------------------------------- -// TODO(pajeter): custom colors need to be revisited -// Do NOT add any more transparent colors without review -//-------------------------------------------------------- - -$black-80: rgba($md-black-100, 0.8) !default; -$black-76: rgba($md-black-100, 0.76) !default; -$black-68: rgba($md-black-100, 0.68) !default; -$black-60: rgba($md-black-100, 0.6) !default; -$black-48: rgba($md-black-100, 0.48) !default; -$black-40: rgba($md-black-100, 0.4) !default; -$black-32: rgba($md-black-100, 0.32) !default; -$black-24: rgba($md-black-100, 0.24) !default; -$black-20: rgba($md-black-100, 0.2) !default; -$black-16: rgba($md-black-100, 0.16) !default; -$black-12: rgba($md-black-100, 0.12) !default; -$black-08: rgba($md-black-100, 0.08) !default; -$black-06: rgba($md-black-100, 0.06) !default; -$black-04: rgba($md-black-100, 0.04) !default; -$black-8: $black-08; -$black-6: $black-06; -$black-4: $black-04; - -$white-92: rgba($md-white-100, 0.92) !default; -$white-84: rgba($md-white-100, 0.84) !default; -$white-80: rgba($md-white-100, 0.8) !default; -$white-70: rgba($md-white-100, 0.7) !default; -$white-64: rgba($md-white-100, 0.64) !default; -$white-60: rgba($md-white-100, 0.6) !default; -$white-32: rgba($md-white-100, 0.32) !default; -$white-48: rgba($md-white-100, 0.48) !default; -$white-40: rgba($md-white-100, 0.4) !default; -$white-24: rgba($md-white-100, 0.24) !default; -$white-20: rgba($md-white-100, 0.2) !default; -$white-16: rgba($md-white-100, 0.16) !default; -$white-12: rgba($md-white-100, 0.12) !default; -$white-08: rgba($md-white-100, 0.08) !default; -$white-8: $white-08; - -$gray-1-40: rgba($md-gray-50, 0.4) !default; -$gray-5-88: rgba($md-gray-30, 0.88) !default; -$gray-6-40: rgba($md-gray-20, 0.4) !default; -$gray-55: $md-gray-20; - -$yellow-light-12: rgba($md-yellow-20, 0.12) !default; -$yellow-light-24: rgba($md-yellow-20, 0.24) !default; - -$green-light-12: rgba($md-green-20, 0.12) !default; -$green-light-24: rgba($md-green-20, 0.24) !default; - -$red-light-12: rgba($md-red-20, 0.12) !default; -$red-light-24: rgba($md-red-20, 0.24) !default; - -//------------------------------------------------------ -// Do not use these variables directly!!! -// This file contains legacy color variables. They are -// mapped to the new Momentum Design color tokens for -// backward compatability only. -// The current color variables are located at: -// @momentum-ui/core/scss/colors/settings-base.scss -//------------------------------------------------------ - -$blue-base: $md-theme-50; -$blue-hover: $md-theme-60; -$blue-press: $md-theme-70; -$blue-dark: $md-theme-60; -$blue-dark-hover: $md-theme-70; -$blue-dark-press: $md-theme-80; -$blue-light: $md-theme-20; -$blue-light-hover: $md-theme-30; -$blue-light-press: $md-theme-40; -$blue-pastel: $md-theme-10; - -$cyan-base: $md-cyan-50; -$cyan-hover: $md-cyan-60; -$cyan-press: $md-cyan-70; -$cyan-dark: $md-cyan-60; -$cyan-dark-hover: $md-cyan-70; -$cyan-dark-press: $md-cyan-80; -$cyan-light: $md-cyan-20; -$cyan-light-hover: $md-cyan-30; -$cyan-light-press: $md-cyan-40; -$cyan-pastel: $md-cyan-10; - -$green-base: $md-green-50; -$green-hover: $md-green-60; -$green-press: $md-green-70; -$green-dark: $md-green-60; -$green-dark-hover: $md-green-70; -$green-dark-press: $md-green-80; -$green-light: $md-green-20; -$green-light-hover: $md-green-30; -$green-light-press: $md-green-40; -$green-pastel: $md-green-10; - -$mint-base: $md-mint-50; -$mint-hover: $md-mint-60; -$mint-press: $md-mint-70; -$mint-dark: $md-mint-60; -$mint-dark-hover: $md-mint-70; -$mint-dark-press: $md-mint-80; -$mint-light: $md-mint-20; -$mint-light-hover: $md-mint-30; -$mint-light-press: $md-mint-40; -$mint-pastel: $md-mint-10; - -$orange-base: $md-orange-50; -$orange-hover: $md-orange-60; -$orange-press: $md-orange-70; -$orange-dark: $md-orange-60; -$orange-dark-hover: $md-orange-70; -$orange-dark-press: $md-orange-80; -$orange-light: $md-orange-20; -$orange-light-hover: $md-orange-30; -$orange-light-press: $md-orange-40; -$orange-pastel: $md-orange-10; - -$pink-base: $md-pink-50; -$pink-hover: $md-pink-60; -$pink-press: $md-pink-70; -$pink-dark: $md-pink-60; -$pink-dark-hover: $md-pink-70; -$pink-dark-press: $md-pink-80; -$pink-light: $md-pink-20; -$pink-light-hover: $md-pink-30; -$pink-light-press: $md-pink-40; -$pink-pastel: $md-pink-10; - -$purple-base: $md-purple-50; -$purple-hover: $md-purple-60; -$purple-press: $md-purple-70; -$purple-dark: $md-purple-60; -$purple-dark-hover: $md-purple-70; -$purple-dark-press: $md-purple-80; -$purple-light: $md-purple-20; -$purple-light-hover: $md-purple-30; -$purple-light-press: $md-purple-40; -$purple-pastel: $md-purple-10; - -$red-base: $md-red-50; -$red-hover: $md-red-60; -$red-press: $md-red-70; -$red-dark: $md-red-60; -$red-dark-hover: $md-red-70; -$red-dark-press: $md-red-80; -$red-light: $md-red-20; -$red-light-hover: $md-red-30; -$red-light-press: $md-red-40; -$red-pastel: $md-red-10; - -$violet-base: $md-violet-50; -$violet-hover: $md-violet-60; -$violet-press: $md-violet-70; -$violet-dark: $md-violet-60; -$violet-dark-hover: $md-violet-70; -$violet-dark-press: $md-violet-80; -$violet-light: $md-violet-20; -$violet-light-hover: $md-violet-30; -$violet-light-press: $md-violet-40; -$violet-pastel: $md-violet-10; - -$yellow-base: $md-yellow-50; -$yellow-hover: $md-yellow-60; -$yellow-press: $md-yellow-70; -$yellow-dark: $md-yellow-60; -$yellow-dark-hover: $md-yellow-70; -$yellow-dark-press: $md-yellow-80; -$yellow-light: $md-yellow-20; -$yellow-light-hover: $md-yellow-30; -$yellow-light-press: $md-yellow-40; -$yellow-pastel: $md-yellow-10; - -$blue-base--contrast: $md-theme-60; -$blue-hover--contrast: $md-theme-70; -$blue-press--contrast: $md-theme-80; -$blue-dark--contrast: $md-theme-50; -$blue-dark-hover--contrast: $md-theme-60; -$blue-dark-press--contrast: $md-theme-70; -$blue-light--contrast: $md-theme-20; -$blue-light-hover--contrast: $md-theme-30; -$blue-light-press--contrast: $md-theme-40; -$blue-pastel--contrast: $md-theme-60; - -$cyan-base--contrast: $md-cyan-60; -$cyan-hover--contrast: $md-cyan-70; -$cyan-press--contrast: $md-cyan-80; -$cyan-dark--contrast: $md-cyan-50; -$cyan-dark-hover--contrast: $md-cyan-60; -$cyan-dark-press--contrast: $md-cyan-70; -$cyan-light--contrast: $md-cyan-20; -$cyan-light-hover--contrast: $md-cyan-30; -$cyan-light-press--contrast: $md-cyan-40; -$cyan-pastel--contrast: $md-cyan-60; - -$green-base--contrast: $md-green-60; -$green-hover--contrast: $md-green-70; -$green-press--contrast: $md-green-80; -$green-dark--contrast: $md-green-50; -$green-dark-hover--contrast: $md-green-60; -$green-dark-press--contrast: $md-green-70; -$green-light--contrast: $md-green-20; -$green-light-hover--contrast: $md-green-30; -$green-light-press--contrast: $md-green-40; -$green-pastel--contrast: $md-green-60; - -$mint-base--contrast: $md-mint-60; -$mint-hover--contrast: $md-mint-70; -$mint-press--contrast: $md-mint-80; -$mint-dark--contrast: $md-mint-50; -$mint-dark-hover--contrast: $md-mint-60; -$mint-dark-press--contrast: $md-mint-70; -$mint-light--contrast: $md-mint-20; -$mint-light-hover--contrast: $md-mint-30; -$mint-light-press--contrast: $md-mint-40; -$mint-pastel--contrast: $md-mint-60; - -$orange-base--contrast: $md-orange-60; -$orange-hover--contrast: $md-orange-70; -$orange-press--contrast: $md-orange-80; -$orange-dark--contrast: $md-orange-50; -$orange-dark-hover--contrast: $md-orange-60; -$orange-dark-press--contrast: $md-orange-70; -$orange-light--contrast: $md-orange-20; -$orange-light-hover--contrast: $md-orange-30; -$orange-light-press--contrast: $md-orange-40; -$orange-pastel--contrast: $md-orange-60; - -$pink-base--contrast: $md-pink-60; -$pink-hover--contrast: $md-pink-70; -$pink-press--contrast: $md-pink-80; -$pink-dark--contrast: $md-pink-50; -$pink-dark-hover--contrast: $md-pink-60; -$pink-dark-press--contrast: $md-pink-70; -$pink-light--contrast: $md-pink-20; -$pink-light-hover--contrast: $md-pink-30; -$pink-light-press--contrast: $md-pink-40; -$pink-pastel--contrast: $md-pink-60; - -$purple-base--contrast: $md-purple-60; -$purple-hover--contrast: $md-purple-70; -$purple-press--contrast: $md-purple-80; -$purple-dark--contrast: $md-purple-50; -$purple-dark-hover--contrast: $md-purple-60; -$purple-dark-press--contrast: $md-purple-70; -$purple-light--contrast: $md-purple-20; -$purple-light-hover--contrast: $md-purple-30; -$purple-light-press--contrast: $md-purple-40; -$purple-pastel--contrast: $md-purple-60; - -$red-base--contrast: $md-red-60; -$red-hover--contrast: $md-red-70; -$red-press--contrast: $md-red-80; -$red-dark--contrast: $md-red-50; -$red-dark-hover--contrast: $md-red-60; -$red-dark-press--contrast: $md-red-70; -$red-light--contrast: $md-red-20; -$red-light-hover--contrast: $md-red-30; -$red-light-press--contrast: $md-red-40; -$red-pastel--contrast: $md-red-60; - -$violet-base--contrast: $md-violet-60; -$violet-hover--contrast: $md-violet-70; -$violet-press--contrast: $md-violet-80; -$violet-dark--contrast: $md-violet-50; -$violet-dark-hover--contrast: $md-violet-60; -$violet-dark-press--contrast: $md-violet-70; -$violet-light--contrast: $md-violet-20; -$violet-light-hover--contrast: $md-violet-30; -$violet-light-press--contrast: $md-violet-40; -$violet-pastel--contrast: $md-violet-60; - -$yellow-base--contrast: $md-yellow-60; -$yellow-hover--contrast: $md-yellow-70; -$yellow-press--contrast: $md-yellow-80; -$yellow-dark--contrast: $md-yellow-50; -$yellow-dark-hover--contrast: $md-yellow-60; -$yellow-dark-press--contrast: $md-yellow-70; -$yellow-light--contrast: $md-yellow-20; -$yellow-light-hover--contrast: $md-yellow-30; -$yellow-light-press--contrast: $md-yellow-40; -$yellow-pastel--contrast: $md-yellow-60; - -// Duck Egg -$duck-egg-base: $md-gray-50; -$duck-egg-hover: $md-gray-60; -$duck-egg-press: $md-gray-70; - -// Indigo -$indigo-base: #005073; - -// Grayscale -$dark-gray-hover: $md-gray-80; -$dark-gray-press: $md-gray-90; - -$gray-1: $md-gray-90; -$gray-2: $md-gray-70; -$gray-3: $md-gray-50; -$gray-4: $md-gray-40; -$gray-5: $md-gray-30; -$gray-6: $md-gray-20; -$gray-7: $md-gray-10; - -$black: $md-black-100; - -$white: $md-white-100; - -// Base color aliases -$blue: $md-theme-50; -$cyan: $md-cyan-50; -$duck-egg: $duck-egg-base; -$green: $md-green-50; -$indigo: $indigo-base; -$mint: $md-mint-50; -$orange: $md-orange-50; -$pink: $md-pink-50; -$purple: $md-purple-50; -$red: $md-red-50; -$violet: $md-violet-50; -$yellow: $md-yellow-50; - -// Legacy Symphony 2.0 aliases -$color-blue-base: $blue-base; -$color-blue: $blue-base; -$color-blue-dark: $blue-hover; -$color-blue-darker: $blue-press; -$color-blue-light: $blue-light; - -$color-cyan-base: $cyan-base; -$color-cyan: $cyan-base; -$color-cyan: $color-cyan-base; -$color-cyan-dark: $cyan-hover; -$color-cyan-darker: $cyan-press; -$color-cyan-light: $cyan-light; - -$color-green-base: $green-base; -$color-green: $green-base; -$color-green-dark: $green-hover; -$color-green-darker: $green-press; -$color-green-light: $green-light; - -$color-mint-base: $mint-base; -$color-mint: $mint-base; -$color-mint-dark: $mint-hover; -$color-mint-darker: $mint-press; -$color-mint-light: $mint-light; - -$color-orange-base: $orange-base; -$color-orange: $orange-base; -$color-orange-dark: $orange-hover; -$color-orange-darker: $orange-press; -$color-orange-light: $orange-light; - -$color-pink-base: $pink-base; -$color-pink: $pink-base; -$color-pink-dark: $pink-hover; -$color-pink-darker: $pink-press; -$color-pink-light: $pink-light; - -$color-purple-base: $purple-base; -$color-purple: $purple-base; -$color-purple-dark: $purple-hover; -$color-purple-darker: $purple-press; -$color-purple-light: $purple-light; - -$color-red-base: $red-base; -$color-red: $red-base; -$color-red-dark: $red-hover; -$color-red-darker: $red-press; -$color-red-light: $red-light; - -$color-violet-base: $violet-base; -$color-violet: $violet-base; -$color-violet-dark: $violet-hover; -$color-violet-darker: $violet-press; -$color-violet-light: $violet-light; - -$color-yellow-base: $yellow-base; -$color-yellow: $yellow-base; -$color-yellow-dark: $yellow-hover; -$color-yellow-darker: $yellow-press; -$color-yellow-light: $yellow-light; - -$color-black: $black; -$gray-dark-4: $gray-1; // $gray-darkest -$gray-dark-3: $gray-1; -$gray-dark-2: $gray-2; -$gray-dark-1: $gray-2; // $gray-darker -$gray-base: $gray-3; // $gray-dark -$gray-light-1: $gray-4; // $gray -$gray-light-2: $gray-5; // $gray-lighter & $gray-light -$gray-light-3: $gray-6; -$gray-light-4: $gray-7; // $gray-lightest -$color-white: $white; - -// Legacy Symphony color variables -$color-primary-darker: $blue-press; -$color-primary-dark: $blue-hover; -$color-primary-base: $blue-base; -$color-primary: $blue-base; -$color-primary-light: $blue-light; -$color-primary-lighter: $blue-light; - -$color-people-darker: $mint-press; -$color-people-dark: $mint-hover; -$color-people-base: $mint-base; -$color-people: $mint-base; -$color-people-light: $mint-light; -$color-people-lighter: $mint-light; - -$color-meetings-darker: $orange-press; -$color-meetings-dark: $orange-hover; -$color-meetings-base: $orange-base; -$color-meetings: $orange-base; -$color-meetings-light: $orange-light; -$color-meetings-lighter: $orange-light; - -$color-negative-darker: $red-press; -$color-negative-dark: $red-hover; -$color-negative-base: $red-base; -$color-negative: $red-base; -$color-negative-light: $red-light; -$color-negative-lighter: $red-light; - -$color-cta-darker: $green-press; -$color-cta-dark: $green-hover; -$color-cta-base: $green-base; -$color-cta: $green-base; -$color-cta-light: $green-light; -$color-cta-lighter: $green-light; - -$color-attention-darker: $yellow-press; -$color-attention-dark: $yellow-hover; -$color-attention-base: $yellow-base; -$color-attention: $yellow-base; -$color-attention-light: $yellow-light; -$color-attention-lighter: $yellow-light; - -$color-alerts-darker: $red-press; -$color-alerts-dark: $red-hover; -$color-alerts-base: $red-base; -$color-alerts: $red-base; -$color-alerts-light: $red-light; -$color-alerts-lighter: $red-light; - -$color-eggplant-base: $purple-base; -$color-eggplant: $purple-base; - -// Foundation uses these as default colors throughout -$primary-color: $blue-base; -$secondary-color: $gray-2; -$alerts-color: $red-base; -$alert-color: $red-base; -$cta-color: $green-base; -$success-color: $green-base; -$attention-color: $yellow-base; -$warning-color: $yellow-base; -$people-color: $mint-base; -$info-color: $mint-base; -$meetings-color: $orange-base; -$negative-color: $red-base; - -// Toolkit 1.0 Color Aliases - -$gray-darkest: $black; -$gray-darker: $gray-1; -$gray-dark: $gray-2; -$gray: $gray-3; -$gray-light: $gray-4; -$gray-lighter: $gray-4; -$gray-lightest: $gray-6; -$brand-white: $white; - -$brand-primary: $blue-base; -$brand-primary-light: $blue-light; -$brand-primary-dark: $blue-hover; -$brand-primary-darker: $blue-press; -$brand-success: $green-base; -$brand-success-light: $green-light; -$brand-success-dark: $green-hover; -$brand-success-darker: $green-press; -$brand-info: $mint-base; -$brand-info-light: $mint-light; -$brand-info-dark: $mint-hover; -$brand-info-darker: $mint-press; -$brand-warning: $yellow-base; -$brand-warning-light: $yellow-light; -$brand-warning-dark: $yellow-hover; -$brand-warning-darker: $yellow-press; -$brand-danger: $red-base; -$brand-danger-light: $red-light; -$brand-danger-dark: $red-hover; -$brand-danger-darker: $red-press; - -// Legacy Foundation Colors: -$ghost: $white; -$snow: $white; -$vapor: $white; -$white-smoke: $gray-6; -$silver: $gray-6; -$smoke: $gray-5; -$gainsboro: $gray-4; -$iron: $gray-4; -$base: $gray-3; -$aluminum: $gray-3; -$jumbo: $gray-2; -$monsoon: $gray-2; -$steel: $gray-1; -$charcoal: $gray-1; -$tuatara: $gray-1; -$oil: $gray-1; -$jet: $black; - -$green-progress: $md-green-40; - -$rem-base: 16px; - -// Namespace Variables -$namespace: 'md' !default; -$prefix: 'md' !default; -$dark-class: '#{$prefix}--dark' !default; -$admin-class: '#{$prefix}--admin' !default; -$sites-class: '#{$prefix}--sites' !default; -$client-class: '#{$prefix}--client' !default; -$contrast-class: '#{$prefix}--contrast' !default; - -$base-cap-height: 0.0618em; - -// 8px used in _trumps.spacing.responsive.scss -$base-unit-rem: math.div($rem-base, 1px); -$base-unit-px: 4; -$base-rem: 0.5rem; - -// line height settings (for vertical rhythm module _baseline.scss) -$base-line-height-ratio: 1.71429; - -// this value has to be adjusted to the font used or 0 to use line-height -$base-line-height: $base-line-height-ratio; - -$body-line-height: $base-line-height-ratio; -$header-line-height: $base-line-height-ratio; -$subheader-line-height: $base-line-height-ratio; -$paragraph-line-height: $base-line-height-ratio; -$paragraph-aside-line-height: $base-line-height-ratio; -$list-line-height: $base-line-height-ratio; -$f-dropdown-line-height: $base-line-height-ratio; -$form-label-line-height: $base-line-height-ratio; -$price-desc-line-height: $base-line-height-ratio; -$input-line-height: 1; - -$table-line-height: $base-line-height-ratio; -$tooltip__line-height: $base-line-height-ratio; - -// -// margin settings (for vertical rhythm module _baseline.scss) -$header-top-margin: 0; -$header-bottom-margin: 0; -$subheader-top-margin: 0; -$subheader-bottom-margin: 0; -$paragraph-margin-bottom: 0; -$definition-list-header-margin-bottom: 0; -$definition-list-margin-bottom: 0.5rem; - -// ex.: golden ratio -// current: 16 * 1.71429 / 4 = 6.85716 -$base-scale: math.div($base-unit-rem * $base-line-height-ratio, $base-unit-px); - -// 4px = 0.25rem -$base-unit: math.div($base-line-height, $base-scale) * $rem-base; - -// We use these to control text direction settings -$text-direction: ltr; -$opposite-direction: right; -$default-float: left; -$last-child-float: $opposite-direction; - -$link-color: $md-theme-50; -$link-hover-color: $md-theme-70; - -$global-radius: 4px; -$border-radius-base: $global-radius; -$global-rounded: 1000px; - -$cursor-auto-value: auto; -$cursor-crosshair-value: crosshair; -$cursor-default-value: default; -$cursor-disabled-value: not-allowed; -$cursor-pointer-value: pointer; -$cursor-help-value: help; -$cursor-text-value: text; - -$select-border-radius: 3px; - -$body-font-style: normal; - -$row-width: rem-calc(1366) !default; -$total-columns: 12 !default; -$last-child-float: $opposite-direction !default; -$column-gutter: rem-calc(16) !default; - -// legacy Bootstrap Variable -$grid-gutter-width: 30px; - -$overlay-panel-height: 93px !default; - -// Basics of a top-bar -$top-bar-height: 50px !default; -$top-bar-border-width: 1px !default; - -$brand-shadow: rgba(0, 0, 0, 0.2); -$brand-shadow-dark: rgba(0, 0, 0, 0.45); - -// Icons Variables -$icon-font-path: '~@momentum-ui/icons/fonts' !default; -$icon-font-name: 'momentum-ui-icons' !default; - -// define default font weights -$font-weight-normal: normal; -$font-weight-bold: bold; - -$body-font-weight: $font-weight-normal; - -$padding-base-vertical: 5px; -$padding-small-vertical: 2px; -$padding-large-vertical: 7px; - -$line-height-large: 1.33; - -$border-radius-large: 3px; - -$component-active-color: $md-white-100; - -$cursor-disabled: not-allowed; - -$brand-default: $md-gray-90; // legacy bootstrap - used in Atlas - -$images-path: '~@momentum-ui/core/images' !default; - -// Dropdown Max Height for Select/Menu/SubMenu -$dropdown-height: rem-calc(308); - -$focus-color: $md-theme-50; - -$body-bg: $md-white-100; -$body-font-color: $md-gray-90; - -$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); -$xlarge-breakpoint: em-calc(1920); - -$small-range: (0, $small-breakpoint); -$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint); -$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint); -$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint); -$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)); - -$vertical-small-breakpoint: em-calc(600); -$vertical-medium-breakpoint: em-calc(800); - -$vertical-small-range: (0, $vertical-small-breakpoint); -$vertical-medium-range: ( - $vertical-small-breakpoint + em-calc(1), - $vertical-medium-breakpoint -); -$vertical-large-range: ( - $vertical-medium-breakpoint + em-calc(1), - em-calc(99999999) -); - -$screen: 'only screen'; - -$landscape: '#{$screen} and (orientation: landscape)'; -$portrait: '#{$screen} and (orientation: portrait)'; - -$small-up: $screen; -$small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})'; - -$medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})'; -$medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})'; - -$large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})'; -$large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})'; - -$xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})'; -$xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})'; - -$xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})'; -$xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})'; - -$v-small-only: '#{$screen} and (max-height: #{$vertical-small-breakpoint})'; -$v-medium-only: '#{$screen} and (min-height:#{lower-bound($vertical-medium-range)}) and (max-height:#{upper-bound($vertical-medium-range)})'; -$v-medium-down: '#{$screen} and (max-height:#{upper-bound($vertical-medium-range)})'; - -$retina: ( - '#{$screen} and (-webkit-min-device-pixel-ratio: 2)', - '#{$screen} and (min--moz-device-pixel-ratio: 2)', - '#{$screen} and (-o-min-device-pixel-ratio: 2/1)', - '#{$screen} and (min-device-pixel-ratio: 2)', - '#{$screen} and (min-resolution: 192dpi)', - '#{$screen} and (min-resolution: 2dppx)' -); - -// Legacy -$small: $medium-up; -$medium: $medium-up; -$large: $large-up; - -$screen-xs: 480px; -$screen-xs-min: $screen-xs; -$screen-phone: $screen-xs-min; - -// Small screen / tablet -// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1 -$screen-sm: $small-breakpoint; -$screen-sm-min: $screen-sm; -$screen-tablet: $screen-sm-min; - -// Medium screen / desktop -// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1 -$screen-md: $medium-breakpoint; -$screen-md-min: $screen-md; -$screen-desktop: $screen-md-min; - -// Large screen / wide desktop -// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1 -$screen-lg: $large-breakpoint; -$screen-lg-min: $screen-lg; -$screen-lg-desktop: $screen-lg-min; - -// So media queries don't overlap when required, provide a maximum -$screen-xs-max: ($screen-sm-min - 1); -$screen-sm-max: ($screen-md-min - 1); -$screen-md-max: ($screen-lg-min - 1); - -$grid-float-breakpoint-max: ($screen-sm-min - 1); - -/** - * @component variables - * @section mediaqueries - * - * @variable $screen - screens only - * @variable $landscape - landscape orientation - * @variable $portrait - portrait orientation - * @variable $small-up - screens 0px width and larger - * @variable $small-only - small screens from 0 - 640px width - * @variable $medium-up - screens 640px and larger - * @variable $medium-only - screens 640px to 1024px - * @variable $large-up - screens 1025px and larger - * @variable $large-only - screens 1025px to 1440px - * @variable $xlarge-up - screens 1441px and larger - * @variable $xlarge-only - screens 1441px to 1920px - * @variable $xxlarge-up - screens 1921px and larger - * @variable $xxlarge-only - same as $xxlarge-up - * @variable $retina - retina screens - * - * @scss - * @media #{$medium-up} { - * **Media specific styles** - * } - * - */ - -$zindex-sidebar: 1000; -$zindex-drawer: 1000; -$zindex-top-bar: 1005; -$zindex-close: 1015; -$zindex-popover: 1020; -$zindex-tooltip: 1030; -$zindex-top-bar-fixed: 1030; -$zindex-modal-background: 1040; -$zindex-modal: 1050; - -$dropdown-divider-bg: $md-gray-30; -$dropdown-link-color: $md-black-100; -$dropdown-link-hover-color: $md-black-100; -$dropdown-link-hover-bg: $md-gray-10; -$dropdown-link-active-color: $component-active-color; -$dropdown-link-active-bg: $md-theme-50; -$dropdown-link-disabled-color: $md-gray-50; -$dropdown-header-color: $md-gray-30; -$dropdown-caret-color: $md-gray-90; -$caret-width-base: 4px; - -$f-dropdown-max-width: 200px !default; -$f-dropdown-height: auto !default; -$f-dropdown-max-height: none !default; -$f-dropdown-margin-top: 2px !default; -$f-dropdown-margin-left: $f-dropdown-margin-top !default; -$f-dropdown-margin-right: $f-dropdown-margin-top !default; -$f-dropdown-margin-bottom: $f-dropdown-margin-top !default; -$f-dropdown-bg: $md-white-100 !default; -$f-dropdown-border-style: solid !default; -$f-dropdown-border-width: 1px !default; -$f-dropdown-border-color: scale-color($md-white-100, $lightness: -20%) !default; -$f-dropdown-triangle-size: 6px !default; -$f-dropdown-triangle-color: $md-white-100 !default; -$f-dropdown-triangle-side-offset: 10px !default; -$f-dropdown-list-style: none !default; -$f-dropdown-font-color: $md-gray-90 !default; -$f-dropdown-font-size: rem-calc(14) !default; -$f-dropdown-list-padding: rem-calc(5, 10) !default; -$f-dropdown-line-height: rem-calc(18) !default; -$f-dropdown-list-hover-bg: $md-gray-30 !default; -$dropdown-mobile-default-float: 0 !default; -$f-dropdown-content-padding: rem-calc(20) !default; -$f-dropdown-radius: $global-radius !default; -$f-dropdown-z-index: 501 !default; - -// We use these to define default font stacks -$brand-font-folder: '~@momentum-design/fonts/dist/inter' !default; -$font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif; -$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; - -$brand-font-bold: 'Inter Bold', $font-family-sans-serif; -$brand-font-bold-oblique: 'Inter Bold Oblique', $font-family-sans-serif; -$brand-font-extra-light: 'Inter Extra Light', $font-family-sans-serif; -$brand-font-extra-light-oblique: 'Inter Extra Light Oblique', - $font-family-sans-serif; -$brand-font-heavy: 'Inter Heavy', $font-family-sans-serif; -$brand-font-heavy-oblique: 'Inter Heavy Oblique', $font-family-sans-serif; -$brand-font-light: 'Inter Light', $font-family-sans-serif; -$brand-font-light-Oblique: 'Inter Light Oblique', $font-family-sans-serif; -$brand-font-regular: 'Inter Regular', $font-family-sans-serif; -$brand-font-regular-oblique: 'Inter Regular Oblique', - $font-family-sans-serif; -$brand-font-thin: 'Inter Thin', $font-family-sans-serif; -$brand-font-thin-oblique: 'Inter Thin Oblique', $font-family-sans-serif; - -$brand-font-medium: 'Inter Medium', $font-family-sans-serif; - -$body-font-family: $brand-font-regular; - -// TODO: Replace variables in app. -$brand-font-cisco-TT-Bold: $brand-font-bold; -$brand-font-cisco-TT-Bold-Oblique: $brand-font-bold-oblique; -$brand-font-cisco-TT-Extra-Light: $brand-font-extra-light; -$brand-font-cisco-TT-Extra-Light-Oblique: $brand-font-extra-light-oblique; -$brand-font-cisco-TT-Heavy: $brand-font-heavy; -$brand-font-cisco-TT-Heavy-Oblique: $brand-font-heavy-oblique; -$brand-font-cisco-TT-Light: $brand-font-light; -$brand-font-cisco-TT-Light-Oblique: $brand-font-light-Oblique; -$brand-font-cisco-TT-Regular: $brand-font-regular; -$brand-font-cisco-TT-Regular-Oblique: $brand-font-regular-oblique; -$brand-font-cisco-TT-Thin: $brand-font-thin; -$brand-font-cisco-TT-Thin-Oblique: $brand-font-thin-oblique; - -$font-size-base: 14px; -$font-size-large: ceil($font-size-base * 1.1); - -// ~16px -$font-size-small: ceil($font-size-base * 0.85); - -// ~12px - -$font-size-h1: floor($font-size-base * 2.9); - -// ~40px -$font-size-h2: floor($font-size-base * 2.3); - -// ~32px -$font-size-h3: ceil($font-size-base * 1.7); - -// ~24px -$font-size-h4: ceil($font-size-base * 1.25); - -// ~18px -$font-size-h5: $font-size-base; -$font-size-h6: ceil($font-size-base * 0.85); -$line-height-base: 1.428571429; // 20/14 -$line-height-computed: floor(($font-size-base * $line-height-base)); - -// We use these to define default font weights -$font-weight-normal: normal !default; -$font-weight-bold: bold !default; -$font-color-primary: $md-gray-90; - -$text-color: $md-gray-70; - -// We use these to control header font styles -$header-font-family: $body-font-family !default; -$header-font-weight: $font-weight-normal !default; -$header-font-style: normal !default; -$header-font-color: $md-gray-70 !default; - -$header-line-height: 1.4 !default; -$header-top-margin: 0.2rem !default; -$header-bottom-margin: 0.5rem !default; -$header-text-rendering: optimizeLegibility !default; - -// We use these to control header font sizes -$title-heading-font-size: rem-calc(62) !default; -$h1-font-size: rem-calc(48) !default; -$h2-font-size: rem-calc(36) !default; -$h3-font-size: rem-calc(26) !default; -$h4-font-size: rem-calc(20) !default; -$h5-font-size: rem-calc(16) !default; -$h6-font-size: rem-calc(14) !default; - -// We use these to control header size reduction on small screens -$h1-font-reduction: 0 !default; -$h2-font-reduction: 0 !default; -$h3-font-reduction: 0 !default; -$h4-font-reduction: 0 !default; -$h5-font-reduction: 0 !default; -$h6-font-reduction: 0 !default; - -$base-font-size: $rem-base; - -// These control how subheaders are styled. -$subheader-line-height: 1.4 !default; -$subheader-font-color: scale-color( - $header-font-color, - $lightness: 35% -) !default; -$subheader-font-weight: $font-weight-normal !default; -$subheader-top-margin: 0.2rem !default; -$subheader-bottom-margin: 0.5rem !default; - -// A general styling -$small-font-size: 0.875 !default; - -$small-font-color: scale-color($header-font-color, $lightness: 35%) !default; - -// We use these to style paragraphs -$paragraph-font-family: inherit !default; -$paragraph-font-weight: $font-weight-normal !default; -$paragraph-font-size: rem-calc(14) !default; - -$paragraph-line-height: 1.6 !default; -$paragraph-margin-bottom: rem-calc(20) !default; -$paragraph-aside-font-size: rem-calc(14) !default; -$paragraph-aside-line-height: 1.35 !default; -$paragraph-aside-font-style: italic !default; -$paragraph-text-rendering: optimizeLegibility !default; - -// body-small/est styling -$body-small-font-size: rem-calc(12) !default; -$body-smallest-font-size: rem-calc(10) !default; - -$lead-font-size: rem-calc(14) !default; - -// We use these to style 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/Avatar/Avatar.unit.test.tsx.snap b/src/components/Avatar/Avatar.unit.test.tsx.snap index 42cb4ce863..4375708ac8 100644 --- a/src/components/Avatar/Avatar.unit.test.tsx.snap +++ b/src/components/Avatar/Avatar.unit.test.tsx.snap @@ -274,30 +274,13 @@ exports[`Avatar snapshot should match snapshot with isTyping and typingLabel 1`] className="md-avatar-wrapper-children md-avatar-animation-wrapper" >
- -
- - - -
- -
+ />
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('', () => { @@ -59,7 +54,7 @@ describe('', () => { }); it('web component should have an abstracted theme class', async () => { - expect.assertions(3); + expect.assertions(2); const themeName = THEMES[Object.keys(THEMES)[0]]; @@ -71,7 +66,6 @@ describe('', () => { const element = container.querySelector('mdc-themeprovider'); expect(element.classList.contains(`${THEME_CLASS_PREFIX_STABLE}-${themeName}`)).toBe(true); - expect(element.classList.contains(`${THEME_CLASS_PREFIX}-${themeName}`)).toBe(true); }); it('should have provided style when style is provided', () => { diff --git a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap index 653da710b9..8c1f376384 100644 --- a/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap +++ b/src/components/ThemeProvider/ThemeProvider.unit.test.tsx.snap @@ -5,11 +5,11 @@ exports[` snapshot should match snapshot 1`] = ` theme="darkBronzeWebex" > @@ -41,11 +41,11 @@ exports[` snapshot should match snapshot with style 1`] = ` } > 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 = Momentum Design; - - 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 ? : getPlaceholder(); - } -} - -AsyncComponent.defaultProps = { - Placeholder:
Not Found
, -}; - -AsyncComponent.propTypes = { - loader: PropTypes.func.isRequired, - Placeholder: PropTypes.node, -}; - -export default AsyncComponent; diff --git a/src/examples/containers/KitchenSink/index.js b/src/examples/containers/KitchenSink/index.js deleted file mode 100644 index 6fe6478971..0000000000 --- a/src/examples/containers/KitchenSink/index.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { Route, Switch } from 'react-router-dom'; -import { snakeCase } from '../../../legacy/utils'; -import * as KitchenSinkComponents from '../../data/components'; - -export default class KitchenSink extends React.PureComponent { - render() { - return ( - <> -

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 ( - - - - - } - keyboardKey="p" - title="Playground" - /> - - {Object.keys(KitchenSinkComponents).map((ele) => ( - - } - className="md-list-item--primary" - keyboardKey={`${snakeCase(ele)}`} - title={`${snakeCase(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 7dfde37220ab1e005ed12e1e6477d6a9713066b2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 34494 zcmd5_U8rW)S>Ds6-)Eu3Lb=XBk%?t|S&KiYww>>j$d>+b2g?xve8|LBLh?sb%%JZbrt z(C+S!blt7D#{AEB-TNQ!y1VYO{3n04>;CfBy6%%015Giam4i&aF6=JPBK2ijF#rC$ ztlL@MHZ~aBAoU~ZGRC-XXpA6ZMSiW%@-p;k>Vfix{ww`y&)Jp^Gy1>Zox5_@(te~@ z&c61QCocTpk3Zl0bn)xI+4Kkc_I3KZQ~%QM-~XaZFNLw7R~3`xcdYL|#$d9sa{rew z2Gff}{U0Chuf9fUOC|ri$luVt0=ZQR@*hCI2Vg^_?CdFTA_EcoOLz$X%qkh5p(8o1WP3Z~feUf8BH0AJI3>SSR~o1N+|gSxe;@ zVXSulXuJB}j{Zt%47NE3e6%j;ufCG)X&Qq#Yg}V}H4ex4iKpB0FD<+7(ltoOkT5<| zaiP3JeRn<5iPgk)21`|kmZwP9!Ps(jlS zv_Uk;NaOqU$#}%$8G^E{yV;b+kNR>{&D*%$KQMK#r_H~)J(uG;(HmsIM2C?IQaFz=4vyx<{$21H~;DX z^$WS8YGP{j+`lvwubm7-kC}zOs+GiMc;^ar_EDHg@0N z_8IQ^eMm`$+M3<<_*%axvFRV_&9RGw^F@-u7`4Y=wM71b{Tf?3-xhUeUVN4j{KfTU zz5k($#x|eWS*XRcEXfFKW8wd%e?AstS@19SfotSi58DDov|6KeN>xHI1DqWw76WZS{d&oADGKX5lb|MLFl zxstIEO>wEp2kI{&F0*y;@{4_gGUb;je|>)OKE|6Biy+_m-21-8x5}uOD?d9Y3Wfb6 zzDK*!*r=X#&b*NPftaSV=FIv>rusnggZ{JQ9Whej1G>I3OTOeD7TsN5#D4i{?Da_F z^e_JAPtN?$U;RoyCH>c{KNIGJ!`fh8&uG@s-+Ai1J-bO~I-Y&`OeLT3l&6jnUkMi> zZmZb5v`((-lYGbwXUXs!$({w(`5>P$s^VSe5&w6JbC=E}4NCdxoQ!j4zmlRK?td}F z$osy<$Fgq(`@-1_XQyz+jb|wF@k|x$=RFg~*E1}8o>k=~U$zg>I8T2g$@KCXeDXiz zP1|GagD#NCvO50B-%ba&KD>?f@Y-4OA)7K%ya)1=;=jARJIwt?tXr6{_%p^a1>84y z)F=5nZf`32N7K5~@O8^4LB22-eBdw`bjo?j_qfxZ2>+i!T=IE#hJ3}>?&)&8b&sd| zARjSzvF2RFp1ZgYDa)o4=E@JYo8N=HMn2hZxZ^XrhmmefKKIO&_~Rbsj?@3!|Lzm# zd&Xg1I{ngPr(yfu@cGAA?DewA)Bdsfk2>88-14RU{@TCSec#A>aSnUQ)N76ZCEM;b z_WPv6SU>J%Q?H?MoZb08$L^ii>M%=w^Zq;eT=!a}K4l%6{WrJ2vRk%G59LX-4h{?E z&&}jlviZE8?+zrpm2c|6^UTys@n4Zmf9Gc<=KFSjMTc4PEq)*SnvE@6>EAk;4y)y5 zEW-SpW&ck_+2-r~zDDnDJXH*QnRw@i$?~&o^S6yME_8NZ-n$<;uKyG;i1HGQsQ$8zAL&9X~J^~?OmR({{@7uD? zqzk$R{du0SM4dcuI#TDLcc>Fz)~QXTm+*e)dDwBwBt?dwx3W8JlYIq`@sGo&d_SLj z+U8Y1oAO;7&sBVWE!j1djxEZv`bxG?fA}lukLM?5NA$DVLO&aJ3_lz3?_dnYLi$rL z=~C-BDZd^+!V>8yULx+y){Mp62eRJ77{Az1O!myC^gmMaKmBVymyc)T#r1FYeGf7i z2d^tlQXE9RnZC^Pw*C?+>Ow&RyulyKK z{}cZK-%)>yz3?KMaUdMYUgg(O-yU+$IK8O*Mv3|(9VLE*FRn|%5lw0NUp6^Y1FN?D zUZK#xSbyAHpl>xdR`^h7aT;tB#|nL8d&qunK<`@L!94ZHm;pZ=+tM&*avRu_@TPv_ zw9)<&#^b%G{5+f1{+Ityp8Rcmb1e}THl~R8z0tV|6E5$|TKwUif4Jr(T+HBcUUK?I zb~-^!9e#uxQt>4wJO;R)dOWrG3GLr>`nT}IYL&0>hM#U`Q4HsU&ZV##7IC0+!_|cqUT&DAQMspeZBazm;%G&h9|M0`Ty@#If_wn7# zM(LsFg58E4VQv_ICC02>@l3P+=D_DYAD@ju|M0zq|Ar&;eC~+naU+Q~hq$Hl_w03w z?@8jfM0#Ep?z62d)%h~s*IS=je?3E|&gr`v^6~k4C=buL&9{ucHJ%N_pdQ?0+FeB9^I2ImJn zyY@PJUYK#u(Fz=)Jn27#kpfFKet@%s;K$Byc+MTMLn{4M<}u^>A^bR>>)nH5(4x|R zgEJDp0k-pV(%EAKd~Hu^Crs@p|4X+)oH)CRHe>k7I4N;u<@x?4;6pk^y=%-cAM|H^ zP9=V{?#!UVPdvZ5b;Zs`zFhq7;vM)t-#-!;J_WzKGLI$S4!rbVeP_$LyFN|A&rY#6 z;r>0{ciFit;X*#9?)0&v1ANxs*2)4K1!nSE%DusC%k!7`4`-f)8J&M(Ied?`={=nH zKjqGw#$HYMAx4A~*y8xN1FN8BFzx$n?aQ4Re zlRoD6Z{hhlbiNmM+#sdb(grT<+z{8G;QI!Tetfrd%cDQ+ufsW-SlS@%-ST57M7*pT@iWD9fQd z>Jq8vQI>R1-{e*{_%X+M-uqGi&953i!i%Slm+tjDNaj-<>M@7&-v9FVJgV4|dOqUB z#X9;O?+f8~>0k57hTwN$iE(W3yx%@3euCZ+qbq#03FY#;|7LrLPd0?{@)*HCWtsHf z96!k~@=rw(d+9EpucLgQoopB%U-}a>yo4RktE{Hh#*a_mFz={zuW=$9#>%q|1Nb?& zUHl~7`MrW$YZ5=9JlRm<#(ZSYn+~@Ac>jxEhZ+2SLH@se0-tQq_?deA)cBZ|&tpZO zWW0}IL;A066YTT*gPUJ@{UMflQDd6Z`FB2z`;2rC{^kA@;~uEz>3`OPTH8Dq%5v8R^E|cp z=cSAv>aA-Y5BzxDC1*O#x|My#%j2BZ`Dec0a=MY{xH>0>#%!1;v+3AzxE;3FQqc z(2P=k5yh*f{5p!4D8H2A#oy5Lg5KeR9pO4H!}GGsm$mp-nfj6r)vH_-ZT|!O&mF3PYX%GU zEA9g{ybB(vLw|c$d|356iwj5TgMj}5-PhSo+sD$z{ec5u;YjAfnEhk69YNhUA!F-n zVz6K9*VRU`FRYoq2d<|5Tz`nwgx4w`>S9@lJ9(EEzlHwa$9to#o)1F&qwUgPl(vc| z^}OnQndgI_sy=l+^S;dU>JR$tfrC6U0LCxQ|I$J78C&tBM_zB=7H{pWO#6e4v@_zG z)bm62bvxh3^9St@9rJH$M`F2273~jpAhwJzQyudkbv@Pq-ZO1wF9`NK+vS5Pw4Mu7 z`uH|8`|G=fO~O3b2l^EA-|Kgk@n0M?;s6!F{y5(Q&aYN}cX9RrW)60p9e?`A&zCyy z>sox>zRtJ$SlL^HMjW7Gw*ABUm3}$=b{7v|=3v(X|I)dR3G=?p^XzjZ^$Wfmdl}y< zARQjv{qxh``@xsL&>v>H__g24K7ntB_J5U&(vO~(UsYz`59mEGsps`hZ>)@MeEpUF z)rVh8fBS{s-lcEr0w43>`7NsI`7OE6hwoHfJ$>odh;{qilzOzWzq?uJU)wW3Py5ri z=kc3)`&J&`7N+m!#q+yRen)10v3`*cZLMDRud~bhsKr|{L>>qA{tuCmzQ@K1Y%b{|PNtVqe5x_Q@A>Y3@(^iRChl z@9(xApwInvKg-wiKkehNvBj$ln12$s4?pK#+5c+0g$GZEc=o+&?*I7>%mYo#dmyaX z?`^AnF)g3)&$+Dm%(D>ZKq&KkobRd+ZC2}r|8@I&tbYxd|AaSlkT3Q>i(j7eo8^Q3 zvOUr;=c}@GzCroAdfD&x@nU_m^2NWw{$B^r?{24EYvW)0U_Cx;{=5C2_93nzi5F$L z=j(Q{zMlVX|NjoYfjkYI-!aQ>d1od5wS6A*@#IrV9IB zLV6nMVc`27_~7QX^ILWf(X{WG?)e^HHj&1Z?u%rV*I8-0?7v{rnIr!TM{XW8I!a&U(>j+p=GJ%%l$Uv{irW*LdbtCca)1=gQmG{2$YU zbxJNyh3)b8PT}`wndfhY3#(mu;uLl~R_P2PIfo?Val%p8b zy2QM*-SC|4+bEyrg5<50zoq@ZWxLlY_}-mu^8Rjk&v`%J>pJsMZY!VJIkC3AlF!&| zZT+uh$sdurxSM^7yVf_$8}2pNSytDV`BcAxgGzqDWhmQH{A>GN-mUYR*Q7(d=J{BC zvw!kIZM(~FE&fi1UxO;!4bM8?wJ5RODp%QfeYqwo2GlL;w>A4E%TZ@LajLoN`BquN z^gy4r{hK(5KG@p&U&Y_ecg556Rvb0AeLnMseOm`M>7Q|+cqIL{IRB$8*nZwY>vHAm{uu|`j6X2%;%->iT3u7kbCs{ltDWe&_H{k*mvOL_`S0gDF|E1Y;tliG zW~hEE{o#Y3KC^#r8;`&G{u2K{11`|+M5N0|uZa|Y${^I^f6o}bGtv{0USClR!13^p zWl9Q3p?ru!P^e#_Gi|T`qJ#4Kiw>gt%MPOTUwAkX<=z?TDWm#J5B$G5y!00z?zB9t L55@4#)lUB(tG}he 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 = () => ; - -export { Legacy }; diff --git a/src/legacy/AlertBanner/examples/Warning.js b/src/legacy/AlertBanner/examples/Warning.js deleted file mode 100644 index 135a29974e..0000000000 --- a/src/legacy/AlertBanner/examples/Warning.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { AlertBanner, Button } from '@momentum-ui/react-collaboration'; -export default class AlertBannerWarning extends React.PureComponent { - state = { - showAlert1: true, - }; - render() { - return ( -
-
- 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} - > - -
- )} -
- ) - ); -}; - -AlertBanner.defaultProps = { - children: null, - className: '', - closable: false, - closeBtnProps: null, - onKeyDownClose: null, - onHide: null, - type: 'info', -}; - -AlertBanner.propTypes = { - /** @prop Optional css class string | '' */ - className: PropTypes.string, - /** @prop Sets the visibility of AlertBanner's close button | false */ - closable: PropTypes.bool, - /** @prop Props to be passed to close button | null */ - closeBtnProps: PropTypes.object, - /** @prop Children nodes to render inside AccordionHeader | null */ - children: PropTypes.node, - /** @prop Invoked when the user presses on the AlertBanner's close button | null */ - onHide: PropTypes.func, - /** @prop Optional callback function invoked on keydown of close button | null */ - onKeyDownClose: PropTypes.func, - /** @prop Set AlertBanner visibility */ - show: PropTypes.bool.isRequired, - /** @prop Sets the AlertBanner type | 'info' */ - type: PropTypes.oneOf(['info', 'warning', 'error']), -}; - -AlertBanner.displayName = 'AlertBanner'; - -export default AlertBanner; diff --git a/src/legacy/AlertBanner/tests/index.spec.js b/src/legacy/AlertBanner/tests/index.spec.js deleted file mode 100644 index 9d9ae137a7..0000000000 --- a/src/legacy/AlertBanner/tests/index.spec.js +++ /dev/null @@ -1,127 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import { AlertBanner } from '@momentum-ui/react-collaboration'; - -describe('tests for ', () => { - it('should match SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should pass className prop', () => { - const container = mount(); - - expect(container.find('.testing').exists()).toEqual(true); - expect(container.find('AlertBanner').hasClass('testing')).toEqual(true); - }); - - it('should pass closeBtnProps', () => { - const container = mount(); - - expect(container.find('.md-alert-banner__close').props()['aria-label']).toEqual('test'); - }); - - it('should pass otherProps to container', () => { - const container = mount(); - - expect(container.find('#testid').exists()).toEqual(true); - }); - - it('should default to type "info"', () => { - const container = shallow(); - - expect(container.find('.md-alert-banner--info').exists()).toEqual(true); - }); - - it('should default to type "info"', () => { - const container = shallow(); - - expect(container.find('.md-alert-banner--warning').exists()).toEqual(true); - }); - - it('should not display closable button by default', () => { - const container = shallow( - -
Test
- - ); - - expect(container.find('.md-alert-banner__close').exists()).toEqual(false); - }); - - it('should display closable button if prop set to true', () => { - const container = shallow(); - - expect(container.find('.md-alert-banner__close').exists()).toEqual(true); - }); - - it('should close the banner on click of close button', () => { - const onClose = jest.fn(); - - const container = mount( - - 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 should match SnapShot 1`] = ` - -
-
-
- -`; 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/Bot.js b/src/legacy/Avatar/examples/Bot.js deleted file mode 100644 index 6b4ba7fda6..0000000000 --- a/src/legacy/Avatar/examples/Bot.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarBot extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/Default.js b/src/legacy/Avatar/examples/Default.js deleted file mode 100644 index e0ab51ecb1..0000000000 --- a/src/legacy/Avatar/examples/Default.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarDefault extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/Failure.js b/src/legacy/Avatar/examples/Failure.js deleted file mode 100644 index 34ece2faa9..0000000000 --- a/src/legacy/Avatar/examples/Failure.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarFailure extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/Group.js b/src/legacy/Avatar/examples/Group.js deleted file mode 100644 index 4193d178a8..0000000000 --- a/src/legacy/Avatar/examples/Group.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarGroup extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/Inactive.js b/src/legacy/Avatar/examples/Inactive.js deleted file mode 100644 index 22c6339bb3..0000000000 --- a/src/legacy/Avatar/examples/Inactive.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarInactive extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/KitchenSink.js b/src/legacy/Avatar/examples/KitchenSink.js deleted file mode 100644 index f01b2867e0..0000000000 --- a/src/legacy/Avatar/examples/KitchenSink.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { - AvatarActive, - AvatarBot, - AvatarComposite, - AvatarDefault, - AvatarFailure, - AvatarGroup, - AvatarInactive, - AvatarNotification, - AvatarSelf, - AvatarStatus, - AvatarTyping, -} from './index'; - -export default class AvatarKitchenSink extends React.Component { - 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 = () => ; - -export { Legacy }; diff --git a/src/legacy/Avatar/examples/Notification.js b/src/legacy/Avatar/examples/Notification.js deleted file mode 100644 index d059468592..0000000000 --- a/src/legacy/Avatar/examples/Notification.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarNotification extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/Self.js b/src/legacy/Avatar/examples/Self.js deleted file mode 100644 index efff8acb87..0000000000 --- a/src/legacy/Avatar/examples/Self.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarSelf extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/Status.js b/src/legacy/Avatar/examples/Status.js deleted file mode 100644 index ad640374d7..0000000000 --- a/src/legacy/Avatar/examples/Status.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarStatus extends React.PureComponent { - render() { - return ( -
-
- -
-
- -
-
- ); - } -} diff --git a/src/legacy/Avatar/examples/Typing.js b/src/legacy/Avatar/examples/Typing.js deleted file mode 100644 index 9e055c3b13..0000000000 --- a/src/legacy/Avatar/examples/Typing.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Avatar } from '@momentum-ui/react-collaboration'; -export default class AvatarTyping extends React.PureComponent { - render() { - return ; - } -} diff --git a/src/legacy/Avatar/examples/index.js b/src/legacy/Avatar/examples/index.js deleted file mode 100644 index 1d765cbc1d..0000000000 --- a/src/legacy/Avatar/examples/index.js +++ /dev/null @@ -1,11 +0,0 @@ -export { default as AvatarActive } from './Active'; -export { default as AvatarBot } from './Bot'; -export { default as AvatarDefault } from './Default'; -export { default as AvatarFailure } from './Failure'; -export { default as AvatarGroup } from './Group'; -export { default as AvatarInactive } from './Inactive'; -export { default as AvatarKitchenSink } from './KitchenSink'; -export { default as AvatarNotification } from './Notification'; -export { default as AvatarSelf } from './Self'; -export { default as AvatarStatus } from './Status'; -export { default as AvatarTyping } from './Typing'; diff --git a/src/legacy/Avatar/index.js b/src/legacy/Avatar/index.js deleted file mode 100644 index 30a76848f1..0000000000 --- a/src/legacy/Avatar/index.js +++ /dev/null @@ -1,274 +0,0 @@ -/** @component avatar */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import { Button, Loading, 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. - **/ -class Avatar extends React.Component { - static displayName = 'Avatar'; - - state = { - isImageLoaded: false, - isImageErrored: false, - }; - - componentDidMount() { - const img = this.image; - if (img && img.complete) { - this.handleImgLoaded(); - } - } - - componentDidUpdate(prevProps) { - if (prevProps.src !== this.props.src) { - this.handleImgChange(); - } - } - - handleImgChange = () => { - this.setState({ - isImageLoaded: false, - isImageErrored: false, - }); - }; - - handleImgError = () => { - this.setState({ - isImageErrored: true, - }); - }; - - handleImgLoaded = () => { - this.setState({ - isImageLoaded: true, - }); - }; - - render() { - const { - alt, - backgroundColor, - buttonClassName, - className, - color, - failureBadge, - hasNotification, - hideDefaultTooltip, - icon, - initials, - isDecrypting, - isOverview, - onClick, - size, - src, - theme, - title, - type, - ...otherProps - } = this.props; - const { isImageLoaded, isImageErrored } = this.state; - - const getInitials = () => { - if (initials) return initials; - if (!title.replace(/\s/g, '').length) return ''; - let letters = []; - const words = title.trim().split(/ +/); - - letters.push(String.fromCodePoint(words[0].codePointAt(0))); - - if (type !== 'group' && words.length > 1) { - letters.push(String.fromCodePoint(words[words.length - 1].codePointAt(0))); - } - return letters.join(''); - }; - - const getIcon = () => { - if (icon.type.displayName === 'Icon') { - return ( - - {icon} - - ); - } - throw new Error('Icon prop should be a component of type Icon'); - }; - - const getLetter = () => { - return ( - - {getInitials()} - - ); - }; - - const getChildren = () => { - if (type === 'self') { - return ( - - - - ); - } else if (src && !isImageErrored) { - // image src is present and image has not yet errored - const imgChildren = []; - // image is not loaded and title is provided - if (title && !isImageLoaded) { - imgChildren.push(getLetter()); - } - imgChildren.push( - {alt} (this.image = ref)} - /> - ); - return imgChildren; - } else if (icon) { - return getIcon(); - } else if (title) { - return getLetter(); - } - }; - - const getAvatar = () => ( -
- {getChildren()} - {type === 'typing' && } - {failureBadge && } - {hasNotification && } -
- ); - - return onClick ? ( - - ) : ( - getAvatar() - ); - } -} - -Avatar.propTypes = { - /** @prop Image alt tag | '' */ - alt: PropTypes.string, - /** @prop Set Avatar background color | '' */ - backgroundColor: PropTypes.string, - /** @prop Optional css class string for button | '' */ - buttonClassName: PropTypes.string, - /** @prop Optional css class string for Avatar component | null */ - className: PropTypes.string, - /** @prop Set Avatar text color | '' */ - color: PropTypes.string, - /** @prop Set existance of a failureBadge on the Avatar | false */ - failureBadge: PropTypes.bool, - /** @prop Set existance of a notification on the Avatar | false */ - hasNotification: PropTypes.bool, - /** @prop Set the visibility of Avatar's default tooltip | false */ - hideDefaultTooltip: PropTypes.bool, - /** @prop Optional icon component for the Avatar | null */ - icon: PropTypes.element, - /** @prop Optional string for avatar's initials | null*/ - initials: PropTypes.string, - /** @prop Set if Avatar's content is decrypting | false */ - isDecrypting: PropTypes.bool, - /** @prop Set existance of Avatar's Overview | false */ - isOverview: PropTypes.bool, - /** @prop Handler to be called when the user taps the Avatar | null */ - onClick: PropTypes.func, - /** @prop Set the size of the Avatar from one of the preconfigured options | 'medium' */ - size: PropTypes.oneOf([ - 'xsmall', - 'small', - 'medium', - 'large', - 'xlarge', - 18, - 24, - 28, - 36, - 40, - 44, - 52, - 56, - 72, - 80, - 84, - ]), - /** @prop Optional image source for the Avatar | null */ - src: PropTypes.string, - /** @prop Optional Avatar color theme | null */ - theme: PropTypes.string, - /** @prop set Avatar title / user's name | null */ - title: PropTypes.string, - /** @prop optional Avatar type | '' */ - type: PropTypes.oneOf([ - '', - 'active', - 'bot', - 'call', - 'dnd', - 'group', - 'inactive', - 'meeting', - 'ooo', - 'presenting', - 'self', - 'typing', - ]), -}; - -Avatar.defaultProps = { - alt: '', - backgroundColor: '', - buttonClassName: '', - className: null, - color: '', - failureBadge: false, - hasNotification: false, - hideDefaultTooltip: false, - icon: null, - initials: null, - isDecrypting: false, - isOverview: false, - onClick: null, - size: 'medium', - src: null, - theme: null, - title: null, - type: '', -}; - -export default Avatar; diff --git a/src/legacy/Avatar/tests/index.spec.js b/src/legacy/Avatar/tests/index.spec.js deleted file mode 100644 index cc91fc406e..0000000000 --- a/src/legacy/Avatar/tests/index.spec.js +++ /dev/null @@ -1,316 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import { Icon } from '@momentum-ui/react-collaboration'; -import Avatar from '../index'; - -describe('tests for ', () => { - it('should match SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('sequence of image load ', () => { - const container = mount(); - - expect(container.find('.md-avatar__img').hasClass('md-avatar__img--hidden')).toEqual(true); - expect(container.find('.md-avatar__letter').length).toEqual(1); - - container.setState({ isImageLoaded: true }); - - expect(container.find('.md-avatar__img').hasClass('md-avatar__img--hidden')).toEqual(false); - expect(container.find('.md-avatar__letter').exists()).toEqual(false); - }); - - it('should handle isDecrypting prop', () => { - const container = mount(} />); - - expect(container.find('.md-decrypting').length).toEqual(1); - }); - - it('should handle isOverview prop', () => { - const container = mount(} />); - - expect(container.find('.md-avatar__icon--overview').length).toEqual(1); - }); - - it('should trim title', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').text()).toEqual('TN'); - }); - - it('should display title for user - FirstName', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').text()).toEqual('F'); - }); - - it('should display title for user - FirstName LastName', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').text()).toEqual('FL'); - }); - - it('should display title for user - FirstName MiddleName LastName', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').text()).toEqual('FL'); - }); - - it('should display blank title for user with blank title', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').text()).toEqual(''); - }); - - it('should override title for user when initials props present', () => { - const container = mount( - - ); - expect(container.find('.md-avatar__letter').text()).toEqual('WX'); - }); - - it('should display title for group', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').text()).toEqual('T'); - }); - - it('should display title for group', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').text()).toEqual('T'); - expect(container.find('.md-avatar').props().title).toEqual('Test Group'); - }); - - it('should handle dark theme', () => { - const container = mount(); - expect(container.find('.md-avatar--dark').length).toEqual(1); - }); - - describe('should apply respective classes for types', () => { - it('when the type is group', () => { - const container = mount(); - expect(container.find('.md-avatar--group').length).toEqual(1); - }); - - it('when the type is active', () => { - const container = mount(); - expect(container.find('.md-avatar--active').length).toEqual(1); - }); - - it('when the type is inactive', () => { - const container = mount(); - expect(container.find('.md-avatar--inactive').length).toEqual(1); - }); - - it('when the type is Do Not Disturb', () => { - const container = mount(); - expect(container.find('.md-avatar--dnd').length).toEqual(1); - }); - - it('when the type is Out of Office', () => { - const container = mount(); - expect(container.find('.md-avatar--ooo').length).toEqual(1); - }); - - it('when the type is call', () => { - const container = mount(); - expect(container.find('.md-avatar--call').length).toEqual(1); - }); - - it('when the type is meeting', () => { - const container = mount(); - expect(container.find('.md-avatar--meeting').length).toEqual(1); - }); - - it('when the type is presenting', () => { - const container = mount(); - expect(container.find('.md-avatar--presenting').length).toEqual(1); - }); - - it('when the type is typing', () => { - const container = mount(); - expect(container.find('.md-avatar--typing').length).toEqual(1); - expect(container.find('.md-loading').length).toEqual(1); - }); - - it('when the type is bot', () => { - const container = mount(); - expect(container.find('.md-avatar--bot').length).toEqual(1); - }); - - describe('should for type self apply correct icon size', () => { - it('when size is 36', () => { - const container = mount(); - - expect(container.find('.md-icon').getDOMNode().style.fontSize).toEqual('16px'); - expect(container.find('.md-avatar__self').length).toEqual(1); - }); - - it('when the size is default(medium)', () => { - const container = mount(); - - expect(container.find('.md-icon').getDOMNode().style.fontSize).toEqual('18px'); - expect(container.find('.md-avatar__self').length).toEqual(1); - }); - - it('when size is 40', () => { - const container = mount(); - - expect(container.find('.md-icon').getDOMNode().style.fontSize).toEqual('18px'); - expect(container.find('.md-avatar__self').length).toEqual(1); - }); - }); - - it('when the failureBadge is true', () => { - const container = mount(); - expect(container.find('.md-avatar__failure-badge').length).toEqual(1); - }); - - it('when the hasNotification is true', () => { - const container = mount(); - expect(container.find('.md-avatar__notification-badge').length).toEqual(1); - }); - }); - - describe('should apply respective classes for size', () => { - it('when size is 18/xsmall', () => { - let container = mount(); - expect(container.find('.md-avatar--xsmall').length).toEqual(1); - container = mount(); - expect(container.find('.md-avatar--18').length).toEqual(1); - }); - - it('when size is 24', () => { - const container = mount(); - expect(container.find('.md-avatar--24').length).toEqual(1); - }); - - it('when size is 28/small', () => { - let container = mount(); - expect(container.find('.md-avatar--small').length).toEqual(1); - container = mount(); - expect(container.find('.md-avatar--28').length).toEqual(1); - }); - - it('when size is 36', () => { - const container = mount(); - expect(container.find('.md-avatar--36').length).toEqual(1); - }); - - it('when size is 40/medium(default)', () => { - let container = mount(); - expect(container.find('.md-avatar--medium').length).toEqual(1); - container = mount(); - expect(container.find('.md-avatar--40').length).toEqual(1); - }); - - it('when size is 44', () => { - const container = mount(); - expect(container.find('.md-avatar--44').length).toEqual(1); - }); - - it('when size is 52/large', () => { - let container = mount(); - expect(container.find('.md-avatar--large').length).toEqual(1); - container = mount(); - expect(container.find('.md-avatar--52').length).toEqual(1); - }); - - it('when size is 56', () => { - const container = mount(); - expect(container.find('.md-avatar--56').length).toEqual(1); - }); - - it('when size is 72', () => { - const container = mount(); - expect(container.find('.md-avatar--72').length).toEqual(1); - }); - - it('when size is 80', () => { - const container = mount(); - expect(container.find('.md-avatar--80').length).toEqual(1); - }); - - it('when size is 84/xlarge', () => { - let container = mount(); - expect(container.find('.md-avatar--xlarge').length).toEqual(1); - container = mount(); - expect(container.find('.md-avatar--84').length).toEqual(1); - }); - }); - - it('should apply clickable class when onClick prop is defined', () => { - let container = mount( - {}} 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(); - - expect(container.find('.md-avatar--clickable').length).toEqual(0); - }); - - it('should display icon', () => { - const container = shallow(} />); - expect(container.find('.md-avatar__icon').length).toEqual(1); - }); - - it('should display tooltip', () => { - const container = shallow(); - expect(container.find('.md-avatar').props().title).toEqual(''); - }); - - it('should wrap in button', () => { - const props = { - name: 'accessibility_16', - onClick: () => {}, - ariaLabel: 'Accesible', - }; - - const container = mount(); - expect(container.find('.md-button').exists()).toEqual(true); - expect(container.find('.md-button--none').exists()).toEqual(true); - }); - - it('should handle onClick event', () => { - const onClick = jest.fn(); - const props = { - name: 'accessibility_16', - onClick: onClick, - ariaLabel: 'Accesible', - }; - - const container = mount(); - - container.find('button').simulate('click'); - expect(onClick).toHaveBeenCalledTimes(1); - }); - - it('should pass other props to the avatar', () => { - const props = { - name: 'accessibility_16', - id: 'testId', - }; - - const container = mount(); - const avatarEle = container.find('.md-avatar'); - expect(avatarEle.props().id).toEqual(props.id); - }); - - it('should pass other props to the button if onClick Present', () => { - const props = { - name: 'accessibility_16', - id: 'testId', - ariaLabel: 'Accesible', - onClick: () => {}, - }; - - const container = mount(); - const buttonEle = container.find('button'); - expect(buttonEle.props().id).toEqual(props.id); - }); - - it('should render when title is only spaces', () => { - const container = mount(); - expect(container.find('.md-avatar__letter').length).toEqual(1); - }); -}); diff --git a/src/legacy/Avatar/tests/index.spec.js.snap b/src/legacy/Avatar/tests/index.spec.js.snap deleted file mode 100644 index 5b8026451f..0000000000 --- a/src/legacy/Avatar/tests/index.spec.js.snap +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tests for should match SnapShot 1`] = ` - -
- -`; 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 = () => ; - -export { Legacy }; diff --git a/src/legacy/Badge/examples/Round.js b/src/legacy/Badge/examples/Round.js deleted file mode 100644 index 251fc54f1d..0000000000 --- a/src/legacy/Badge/examples/Round.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { Badge } from '@momentum-ui/react-collaboration'; -export default function BadgeRound() { - return ( -
-
- -
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 ', () => { - it('should match SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should render one Span', () => { - const container = shallow(); - - expect(container.find('span').length).toEqual(1); - }); - - it('should render one Child Div', () => { - const container = shallow( - -
Test
- - ); - - expect(container.find('span').children().length).toEqual(1); - }); - - it('should assign conditional rounded class name', () => { - const container = shallow(); - - expect(container.find('span').hasClass('md-badge--round')).toEqual(true); - }); - - it('should not assign conditional rounded class name', () => { - const container = shallow(); - - expect(container.find('span').hasClass('md-badge--round')).toEqual(false); - }); - - it('should assign conditional color class name', () => { - const container = shallow(); - - expect(container.find('span').hasClass('md-badge--blue')).toEqual(true); - }); - - it('should not assign conditional color class name', () => { - const container = shallow(); - - expect(container.find('span').hasClass('md-badge--blue')).toEqual(false); - }); -}); diff --git a/src/legacy/Badge/tests/index.spec.js.snap b/src/legacy/Badge/tests/index.spec.js.snap deleted file mode 100644 index 81b9385252..0000000000 --- a/src/legacy/Badge/tests/index.spec.js.snap +++ /dev/null @@ -1,12 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tests for should match SnapShot 1`] = ` - - - -`; 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 ( - -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- ); -} diff --git a/src/legacy/Button/examples/Tags.js b/src/legacy/Button/examples/Tags.js deleted file mode 100644 index 763949adc4..0000000000 --- a/src/legacy/Button/examples/Tags.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import { Button } from '@momentum-ui/react-collaboration'; -export default function ButtonTags() { - return - ); - - expect(container.find('button').children().length).toEqual(1); - }); - - it('should render Loader Component if Loading', () => { - const container = mount( - - - - -`; diff --git a/src/legacy/ButtonGroup/examples/Default.js b/src/legacy/ButtonGroup/examples/Default.js deleted file mode 100644 index 8b96bc4b66..0000000000 --- a/src/legacy/ButtonGroup/examples/Default.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Button, ButtonGroup } from '@momentum-ui/react-collaboration'; -export default class ButtonGroupDefault extends React.PureComponent { - render() { - return ( - - - - - - ); - } -} diff --git a/src/legacy/ButtonGroup/examples/HighlightFalse.js b/src/legacy/ButtonGroup/examples/HighlightFalse.js deleted file mode 100644 index aa86822768..0000000000 --- a/src/legacy/ButtonGroup/examples/HighlightFalse.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Button, ButtonGroup, Icon } from '@momentum-ui/react-collaboration'; -export default class ButtonGroupHiglightFalse extends React.PureComponent { - render() { - return ( - - - - - - ); - } -} diff --git a/src/legacy/ButtonGroup/examples/JustifiedFalse.js b/src/legacy/ButtonGroup/examples/JustifiedFalse.js deleted file mode 100644 index 2b3002af8d..0000000000 --- a/src/legacy/ButtonGroup/examples/JustifiedFalse.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Button, ButtonGroup } from '@momentum-ui/react-collaboration'; -export default class ButtonGroupJustifiedFalse extends React.PureComponent { - render() { - return ( - - - - - - ); - } -} diff --git a/src/legacy/ButtonGroup/examples/KitchenSink.js b/src/legacy/ButtonGroup/examples/KitchenSink.js deleted file mode 100644 index da95a30045..0000000000 --- a/src/legacy/ButtonGroup/examples/KitchenSink.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { - ButtonGroupDefault, - ButtonGroupHighlightFalse, - ButtonGroupJustifiedFalse, - ButtonGroupPill, -} from './index'; - -export default class ButtonGroupKitchenSink extends React.Component { - render() { - return ( - - - - - - - ); - } -} diff --git a/src/legacy/ButtonGroup/examples/KitchenSink.stories.tsx b/src/legacy/ButtonGroup/examples/KitchenSink.stories.tsx deleted file mode 100644 index 7b99c1d5c5..0000000000 --- a/src/legacy/ButtonGroup/examples/KitchenSink.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import LegacyKitchenSink from './KitchenSink'; -import React from 'react'; - -export default { - title: 'Legacy/ButtonGroup', - component: LegacyKitchenSink, -}; - -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -const Legacy = () => ; - -export { Legacy }; diff --git a/src/legacy/ButtonGroup/examples/Pill.js b/src/legacy/ButtonGroup/examples/Pill.js deleted file mode 100644 index 1d60205a73..0000000000 --- a/src/legacy/ButtonGroup/examples/Pill.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { Button, ButtonGroup, Icon } from '@momentum-ui/react-collaboration'; -export default class ButtonGroupPill extends React.PureComponent { - render() { - return ( -
-
- - - - -
-
- - - - -
-
- - - -
-
- ); - } -} diff --git a/src/legacy/ButtonGroup/examples/index.js b/src/legacy/ButtonGroup/examples/index.js deleted file mode 100644 index 82d547ed3d..0000000000 --- a/src/legacy/ButtonGroup/examples/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export { default as ButtonGroupDefault } from './Default'; -export { default as ButtonGroupHighlightFalse } from './HighlightFalse'; -export { default as ButtonGroupJustifiedFalse } from './JustifiedFalse'; -export { default as ButtonGroupKitchenSink } from './KitchenSink'; -export { default as ButtonGroupPill } from './Pill'; diff --git a/src/legacy/ButtonGroup/index.js b/src/legacy/ButtonGroup/index.js deleted file mode 100644 index 3222cef44b..0000000000 --- a/src/legacy/ButtonGroup/index.js +++ /dev/null @@ -1,327 +0,0 @@ -/** @component button-group */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import omit from 'lodash/omit'; -import qsa from 'dom-helpers/query/querySelectorAll'; -import { UIDReset } from 'react-uid'; -import ButtonGroupContext from '../ButtonGroupContext'; -import SelectableContext from '../SelectableContext'; - -/** - * @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 ButtonGroup extends React.Component { - static getDerivedStateFromProps({ active }, state) { - return active - ? { - ...state, - bgContext: { - ...state.bgContext, - active, - }, - } - : state; - } - - constructor(props) { - super(props); - - this.state = { - bgContext: { - active: props.type === 'pill' ? false : props.highlightSelected && props.active, - focus: props.active || null, - isButtonGroup: true, - ...(props.pillWidth && { width: props.pillWidth }), - }, - selectContext: { - parentOnSelect: this.handleSelect, - parentKeyDown: this.handleKeyDown, - }, - }; - } - - componentDidMount() { - this.containerNode && this.determineInitialFocus(); - } - - componentDidUpdate(prevProps, prevState) { - const { bgContext } = this.state; - const { active } = this.props; - if (prevProps.active !== active) { - this.setActiveAndFocus(active, focus); - } - if (!this._needsRefocus || !this.containerNode) return; - - if (bgContext.focus && prevState.bgContext.focus !== bgContext.focus) { - this.containerNode.querySelector(`[data-md-event-key="${bgContext.focus}"]`).focus(); - } - } - - determineInitialFocus = () => { - const { bgContext } = this.state; - const { focusFirstQuery, focusOnLoad } = this.props; - const items = qsa( - this.containerNode, - focusFirstQuery || `.md-button:not(.disabled):not(:disabled)` - ); - - let focus = bgContext.focus; - if (items.length) { - if (!focus) { - focus = this.getNextFocusedChild(items, items[0], 0); - } - if (focus && focusOnLoad) { - this.containerNode.querySelector(`[data-md-event-key="${focus}"]`).focus(); - } - } - }; - - handleSelect = (e, opts) => { - const { highlightSelected, onSelect, type } = this.props; - const { active } = this.state.bgContext; - const { eventKey } = opts; - - const items = this.getFocusableItems(); - const index = items.indexOf( - this.containerNode.querySelector(`[data-md-event-key="${eventKey}"]`) - ); - - this.setFocus(items, index); - // Don't do anything if onSelect Event Handler is present - if (onSelect) { - return onSelect(e, { - eventKey: this.getValue(items, index, 'event'), - }); - } - // Don't do anything if index is the same or outside of the bounds - if (eventKey === active || index < 0 || index > items.length - 1) return; - - // Call change event handler - this.setState((state) => ({ - bgContext: { - ...state.bgContext, - active: type === 'pill' ? false : highlightSelected && this.getValue(items, index, 'event'), - }, - })); - }; - - getNextFocusedChild(items, current, offset) { - if (!this.containerNode) return null; - const { bgContext } = this.state; - - const possibleIndex = items.indexOf(current) + offset; - - const getIndex = () => { - if (possibleIndex < 0) { - return items.length - 1; - } else if (possibleIndex > items.length - 1) { - return 0; - } else return possibleIndex; - }; - - bgContext.focus !== this.getValue(items, getIndex(), 'event') && - this.setState({ - bgContext: { - ...bgContext, - focus: this.getValue(items, getIndex(), 'event'), - }, - }); - - return this.getValue(items, getIndex(), 'event'); - } - - getValue = (arr, index, attribute) => - arr[index].attributes[`data-md-${attribute}-key`] && - arr[index].attributes[`data-md-${attribute}-key`].value; - - getIncludesFirstCharacter = (str, char) => str.charAt(0).toLowerCase().includes(char); - - setFocus = (items, index) => { - this.setState((state) => ({ - bgContext: { - ...state.bgContext, - focus: this.getValue(items, index, 'event'), - }, - })); - }; - - setActiveAndFocus = (active, focus) => { - const { type, highlightSelected } = this.props; - this._needsRefocus = false; - this.setState((state) => ({ - bgContext: { - ...state.bgContext, - active: type === 'pill' ? false : highlightSelected && active, - focus: active || focus, - }, - })); - }; - - setFocusByFirstCharacter = (char, focusIdx, items, length) => { - const { bgContext } = this.state; - - const newIndex = items.reduce((agg, item, idx, arr) => { - const index = - focusIdx + idx + 1 > length ? Math.abs(focusIdx + idx - length) : focusIdx + idx + 1; - - return !agg.length && - this.getValue(arr, index, 'keyboard') && - this.getIncludesFirstCharacter(this.getValue(arr, index, 'keyboard'), char) - ? agg.concat(this.getValue(arr, index, 'event')) - : agg; - }, []); - - typeof newIndex[0] === 'string' && - bgContext.focus !== newIndex[0] && - this.setState((state) => ({ - bgContext: { - ...state.bgContext, - focus: newIndex[0], - }, - })); - }; - - getFocusableItems = () => { - if (!this.containerNode) return null; - const { focusQuery } = this.props; - - const defaultItems = qsa(this.containerNode, `.md-button:not(.disabled):not(:disabled)`); - const customItems = (focusQuery && qsa(this.containerNode, focusQuery)) || []; - - return customItems.length - ? customItems.filter((item) => customItems.indexOf(item) >= 0) - : defaultItems; - }; - - handleKeyDown = (e) => { - const { focus } = this.state.bgContext; - let flag = false; - const tgt = e.currentTarget; - const char = e.key; - const items = this.getFocusableItems(); - const focusIdx = - (focus && - items.indexOf(this.containerNode.querySelector(`[data-md-event-key="${focus}"]`))) || - 0; - const length = (items.length && items.length - 1) || 0; - - const isPrintableCharacter = (str) => { - return str.length === 1 && str.match(/\S/); - }; - - switch (e.which) { - case 38: - case 37: - this.getNextFocusedChild(items, tgt, -1); - this._needsRefocus = true; - flag = true; - break; - - case 39: - case 40: - this.getNextFocusedChild(items, tgt, 1); - this._needsRefocus = true; - flag = true; - break; - default: - if (isPrintableCharacter(char)) { - this.setFocusByFirstCharacter(char, focusIdx, items, length); - this._needsRefocus = true; - flag = true; - } - break; - } - - if (flag) { - e.stopPropagation(); - e.preventDefault(); - } - }; - - render() { - const { ariaLabel, children, className, justified, theme, type, ...props } = this.props; - const { bgContext, selectContext } = this.state; - - const otherProps = omit({ ...props }, [ - 'active', - 'focusOnLoad', - 'focusFirstQuery', - 'focusQuery', - 'highlightSelected', - 'onSelect', - 'pillWidth', - ]); - - return ( - -
(this.containerNode = ref)} - {...otherProps} - > - - {children} - -
- - ); - } -} - -ButtonGroup.propTypes = { - /** @prop Sets initial active Button by index | null */ - active: PropTypes.string, - /** @prop Text to display for blindness accessibility features | '' */ - ariaLabel: PropTypes.string, - /** @prop Children nodes to render inside ButtonGroup | null */ - children: PropTypes.node, - /** @prop Optional css class string | '' */ - className: PropTypes.string, - /** @prop Set focus to ButtonGroup when page is loaded | false */ - focusOnLoad: 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 Highlights the selected button within group | true */ - highlightSelected: PropTypes.bool, - /** @prop Optional text-justified css styling | true */ - justified: PropTypes.bool, - /** @prop Handler to be called when the user selects ButtonGroup | null */ - onSelect: PropTypes.func, - /** @prop Sets width of a pill Button | '60px' */ - pillWidth: PropTypes.string, - /** @prop Optional Button color theme for ButtonGroup | '' */ - theme: PropTypes.oneOf(['', 'dark']), - /** @prop Optional Button type for ButtonGroup | '' */ - type: PropTypes.oneOf(['', 'pill', 'unstyled']), -}; - -ButtonGroup.defaultProps = { - active: '', - ariaLabel: '', - children: null, - className: '', - focusOnLoad: false, - focusFirstQuery: '', - focusQuery: '', - highlightSelected: true, - justified: true, - onSelect: null, - pillWidth: '60px', - theme: '', - type: '', -}; - -ButtonGroup.displayName = 'ButtonGroup'; - -export default ButtonGroup; diff --git a/src/legacy/ButtonGroup/tests/index.spec.js b/src/legacy/ButtonGroup/tests/index.spec.js deleted file mode 100644 index 93c3a75f0b..0000000000 --- a/src/legacy/ButtonGroup/tests/index.spec.js +++ /dev/null @@ -1,155 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import { Button, ButtonGroup, Icon } from '@momentum-ui/react-collaboration'; - -describe('tests for ', () => { - it('should match SnapShot', () => { - const container = mount( - - - - ); - - expect(container).toMatchSnapshot(); - }); - - it('ButtonGroup should have justified as true', () => { - const container = mount( - - - - - ); - - expect(container.find('.md-button-group').hasClass('md-button-group--justified')).toEqual(true); - }); - - it('ButtonGroup theme is set to dark', () => { - const container = mount( - - - - - ); - - expect(container.find('.md-button-group').hasClass('md-button-group--dark')).toEqual(true); - }); - - it('ButtonGroup type is set to pill', () => { - const container = mount( - - - - - ); - - expect(container.find('.md-button-group').hasClass('md-button-group--pill')).toEqual(true); - }); - - it('should not highlight the active button when highlightSelected is false', () => { - const container = mount( - - - - - ); - - container.find('button').at(0).simulate('click'); - expect(container.find('button').at(0).hasClass('active')).toEqual(false); - }); - - it('should apply an modifier to button when Button contains Icon as a children', () => { - const container = mount( - - - - ); - - expect(container.find('button').at(0).hasClass('md-button--icon-group')).toEqual(true); - }); - - it('onClick should should mark the button as active', () => { - const container = mount( - - - - - ); - container.find('button').at(1).simulate('click'); - expect(container.find('button').at(1).props().tabIndex).toEqual(0); - expect(container.find('button').at(1).hasClass('active')).toEqual(true); - }); - - it('if focusOnLoad is set to true, then should set the focus on the first button', () => { - // 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); - mount( - - - - , - { attachTo: focusContainer } - ); - expect(document.activeElement.id).toEqual('one'); - }); - - it('when active prop is passed, the button should be selected', () => { - const container = mount( - - - - - ); - expect(container.find('button').at(1).hasClass('active')).toEqual(true); - }); - - it('should handle keyBoard keys', () => { - const container = mount( - - - - - ); - expect(container.find('button').at(0).props().tabIndex).toEqual(0); - // right - container.find('button').at(0).simulate('keydown', { keyCode: 39, which: 39 }); - expect(container.find('button').at(1).props().tabIndex).toEqual(0); - // left - container.find('button').at(1).simulate('keydown', { keyCode: 37, which: 37 }); - expect(container.find('button').at(0).props().tabIndex).toEqual(0); - // up key - container.find('button').at(0).simulate('keydown', { keyCode: 38, which: 38 }); - expect(container.find('button').at(1).props().tabIndex).toEqual(0); - - // enter key - container.find('button').at(1).simulate('keydown', { keyCode: 13, which: 13 }); - expect(container.find('button').at(1).hasClass('active')).toEqual(true); - - // enter char - expect(container.find('button').at(1).props().tabIndex).toEqual(0); - container.find('button').at(1).simulate('keydown', { keyCode: 79, which: 79, key: 'o' }); - expect(container.find('button').at(0).props().tabIndex).toEqual(0); - }); - - it('should not throw error if child is not a Button', () => { - const container = shallow( - -
- - ); - - expect(container.find('.md-button-group').exists()).toEqual(true); - }); -}); diff --git a/src/legacy/ButtonGroup/tests/index.spec.js.snap b/src/legacy/ButtonGroup/tests/index.spec.js.snap deleted file mode 100644 index 726c0662c5..0000000000 --- a/src/legacy/ButtonGroup/tests/index.spec.js.snap +++ /dev/null @@ -1,109 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tests for should match SnapShot 1`] = ` - -
- - - - - - - - -
- -`; diff --git a/src/legacy/ButtonGroupContext/index.js b/src/legacy/ButtonGroupContext/index.js deleted file mode 100644 index a446c88313..0000000000 --- a/src/legacy/ButtonGroupContext/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -const ButtonGroupContext = React.createContext(null); - -export default ButtonGroupContext; diff --git a/src/legacy/Checkbox/index.js b/src/legacy/Checkbox/index.js deleted file mode 100644 index 55c5b3ecd6..0000000000 --- a/src/legacy/Checkbox/index.js +++ /dev/null @@ -1,103 +0,0 @@ -/** @component checkbox */ - -import PropTypes from 'prop-types'; -import React from 'react'; -import Label from '../Label'; - -/** - * @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 Checkbox = (props) => { - const { - checked, - children, - className, - disabled, - htmlId, - indeterminate, - inputRef, - label, - name, - nestedLevel, - onChange, - required, - value, - ...otherProps - } = props; - - return ( -
- -
- ); -}; - -Checkbox.propTypes = { - /** @prop Sets Checkbox status as checked | false */ - checked: PropTypes.bool, - /** @prop Child component to display next to the input | null */ - children: PropTypes.node, - /** @prop Optional css class string | '' */ - className: PropTypes.string, - /** @prop Sets the attribute disabled to the Checkbox | false */ - disabled: PropTypes.bool, - /** @prop Unique HTML ID. Used for tying label to HTML input. Handy hook for automated testing */ - htmlId: PropTypes.string.isRequired, - /** @prop Optional indeterminate capabilities of checkbox | false */ - indeterminate: PropTypes.bool, - /** @prop optional ref attribute for Checkbox input element | null */ - inputRef: PropTypes.func, - /** @prop Required label string for Checkbox */ - label: PropTypes.string.isRequired, - /** @prop Sets the attribute name to the Checkbox input element | '' */ - name: PropTypes.string, - /** @prop Set the level of nested checkboxes | 0 */ - nestedLevel: PropTypes.number, - /** @prop Optional onChange handler invoked when user makes a change within the Checkbox input element | null */ - onChange: PropTypes.func, - /** @prop Optional required setting for Checkbox input | false */ - required: PropTypes.bool, - /** @prop sets value of the Checkbox input element | '' */ - value: PropTypes.string, -}; - -Checkbox.defaultProps = { - autoFocus: false, - checked: false, - className: '', - disabled: false, - indeterminate: false, - inputRef: null, - label: '', - name: '', - nestedLevel: 0, - onChange: () => {}, - required: false, - value: '', -}; - -Checkbox.displayName = 'Checkbox'; - -export default Checkbox; diff --git a/src/legacy/Checkbox/tests/index.spec.js b/src/legacy/Checkbox/tests/index.spec.js deleted file mode 100644 index ddc3659d84..0000000000 --- a/src/legacy/Checkbox/tests/index.spec.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import Checkbox from '../../Checkbox'; -import Label from '../../Label'; - -describe('tests for ', () => { - it('should match SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should render one Checkbox', () => { - const container = shallow(); - - expect(container.find('input').length).toEqual(1); - expect(container.children().length).toEqual(2); - }); - - it('should render Label', () => { - const container = shallow(); - - expect( - container.contains(
- ); - - const handleClick = () => { - alert('Image onClick'); - }; - - return ( -
-
- -
- -
- -
-
- ); - } -} diff --git a/src/legacy/ContentItem/examples/Failed.js b/src/legacy/ContentItem/examples/Failed.js deleted file mode 100644 index 93cc5f9814..0000000000 --- a/src/legacy/ContentItem/examples/Failed.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { ContentItem } from '@momentum-ui/react-collaboration'; - -export default class ContentItemFailed extends React.PureComponent { - render() { - return ( -
- -
- ); - } -} diff --git a/src/legacy/ContentItem/examples/File.js b/src/legacy/ContentItem/examples/File.js deleted file mode 100644 index fa1e54cfe2..0000000000 --- a/src/legacy/ContentItem/examples/File.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { Button, ContentItem, Icon } from '@momentum-ui/react-collaboration'; - -export default class FileContentItem extends React.PureComponent { - render() { - const actionNode = ( -
- - - - - -
- ); - - const handleClick = () => { - alert('Image onClick'); - }; - - return ( -
-
- -
- -
- -
-
- ); - } -} diff --git a/src/legacy/ContentItem/examples/Gif.js b/src/legacy/ContentItem/examples/Gif.js deleted file mode 100644 index 895d17644a..0000000000 --- a/src/legacy/ContentItem/examples/Gif.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { Button, ContentItem, Icon } from '@momentum-ui/react-collaboration'; - -export default class GifContentItem extends React.PureComponent { - render() { - const actionNode = ( -
- - - - - -
- ); - - const handleClick = () => { - alert('Image onClick'); - }; - - return ( -
-
- -
-
- -
-
- ); - } -} diff --git a/src/legacy/ContentItem/examples/Icon.js b/src/legacy/ContentItem/examples/Icon.js deleted file mode 100644 index ef377b8d44..0000000000 --- a/src/legacy/ContentItem/examples/Icon.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import { Button, ContentItem, Icon } from '@momentum-ui/react-collaboration'; - -export default class ContentItemIcon extends React.PureComponent { - render() { - const handleClick = () => { - alert('file onClick'); - }; - - const folderClick = (e) => { - alert('folder clicked'); - e.stopPropagation(); - }; - - const downloadClick = (e) => { - alert('download clicked'); - e.stopPropagation(); - }; - - const actionNode = ( -
- - - -
- ); - - return ( -
- -
- ); - } -} diff --git a/src/legacy/ContentItem/examples/KitchenSink.js b/src/legacy/ContentItem/examples/KitchenSink.js deleted file mode 100644 index a46669ab69..0000000000 --- a/src/legacy/ContentItem/examples/KitchenSink.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { - ContentItemAspect, - ContentItemDefault, - ContentItemFailed, - ContentItemFile, - ContentItemIcon, - ContentItemSize, - ContentItemSpinner, -} from './index'; - -export default class ContentItemKitchenSink extends React.Component { - // GIF example not included due to snapshot - render() { - return ( - - - - - - - - - - ); - } -} diff --git a/src/legacy/ContentItem/examples/KitchenSink.stories.tsx b/src/legacy/ContentItem/examples/KitchenSink.stories.tsx deleted file mode 100644 index 6aec766ad2..0000000000 --- a/src/legacy/ContentItem/examples/KitchenSink.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import LegacyKitchenSink from './KitchenSink'; -import React from 'react'; - -export default { - title: 'Legacy/ContentItem', - component: LegacyKitchenSink, -}; - -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -const Legacy = () => ; - -export { Legacy }; diff --git a/src/legacy/ContentItem/examples/Size.js b/src/legacy/ContentItem/examples/Size.js deleted file mode 100644 index cd1084fa61..0000000000 --- a/src/legacy/ContentItem/examples/Size.js +++ /dev/null @@ -1,159 +0,0 @@ -import React from 'react'; -import { Button, ContentItem, Icon } from '@momentum-ui/react-collaboration'; - -export default class ContentItemSizes extends React.PureComponent { - render() { - const actionNode = ( -
- - - - - -
- ); - - const handleClick = () => { - alert('Image onClick'); - }; - - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- ); - } -} diff --git a/src/legacy/ContentItem/examples/Spinner.js b/src/legacy/ContentItem/examples/Spinner.js deleted file mode 100644 index 2b344b785f..0000000000 --- a/src/legacy/ContentItem/examples/Spinner.js +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { ContentItem } from '@momentum-ui/react-collaboration'; - -export default class ContentItemLoading extends React.PureComponent { - render() { - return ( -
-
- -
- -
- -
- -
- -
-
- ); - } -} diff --git a/src/legacy/ContentItem/examples/index.js b/src/legacy/ContentItem/examples/index.js deleted file mode 100644 index 47f7e73819..0000000000 --- a/src/legacy/ContentItem/examples/index.js +++ /dev/null @@ -1,9 +0,0 @@ -export { default as ContentItemAspect } from './Aspect'; -export { default as ContentItemDefault } from './Default'; -export { default as ContentItemFailed } from './Failed'; -export { default as ContentItemFile } from './File'; -export { default as ContentItemGif } from './Gif'; -export { default as ContentItemIcon } from './Icon'; -export { default as ContentItemKitchenSink } from './KitchenSink'; -export { default as ContentItemSize } from './Size'; -export { default as ContentItemSpinner } from './Spinner'; diff --git a/src/legacy/ContentItem/index.js b/src/legacy/ContentItem/index.js deleted file mode 100644 index 77db40b66f..0000000000 --- a/src/legacy/ContentItem/index.js +++ /dev/null @@ -1,197 +0,0 @@ -/** @component content-item */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import ChatContentItem from './ChatContent'; -import FileContentItem from './FileContent'; -import IconContent from './IconContent'; -import omit from 'lodash/omit'; - -/** - * @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 ContentItem extends React.PureComponent { - render() { - const { - actionNode, - aspect, - className, - content, - failedText, - fileSize, - height, - icon, - isProtected, - loading, - loadingText, - style, - subtitle, - title, - type, - width, - ...props - } = this.props; - - const otherProps = omit({ ...props }, ['gifIcon']); - - const findAspect = (width, height) => { - if (width && height) { - const aspectRatioObj = { - 1: 'oneOne', - 0.75: 'threeFour', - 0.66: 'twoThree', - 0.4: 'tall', - 4.35: 'wide', - 1.33: 'fourThree', - 1.5: 'threeTwo', - 1.78: 'sixteenNine', - }; - - const providedAspectRatio = width / height; - - const closestAspectRatio = Object.keys(aspectRatioObj).reduce((prev, curr) => - Math.abs(curr - providedAspectRatio) < Math.abs(prev - providedAspectRatio) ? curr : prev - ); - - return aspectRatioObj[closestAspectRatio]; - } - return type === 'chat' ? 'sixteenNine' : 'threeTwo'; - }; - - const chosenItem = () => { - if (failedText && type === 'chat') { - return ( -
-
- -

{failedText}

-
-
- ); - } else if (type === 'chat') { - return ( - - ); - } else if (type === 'file' && !icon) { - return ( - - ); - } else if (icon) { - return ( - - ); - } - }; - - return
{chosenItem()}
; - } -} - -ContentItem.displayName = 'ContentItem'; - -ContentItem.defaultProps = { - actionNode: null, - aspect: null, - className: '', - content: null, - failedText: '', - fileSize: '', - icon: '', - isProtected: false, - loading: false, - loadingText: 'Loading', - style: null, - subtitle: '', - title: '', - type: 'chat', -}; - -ContentItem.propTypes = { - /** @prop Node to render buttons inside Content Item | null */ - actionNode: PropTypes.node, - /** @prop Set the Content Item's aspect size | null */ - aspect: PropTypes.oneOf([ - 'fourThree', - 'nineSixteen', - 'oneOne', - 'sixteenNine', - 'tall', - 'threeFour', - 'threeTwo', - 'twoThree', - 'wide', - ]), - /** @prop Optional css class string | '' */ - className: PropTypes.string, - /** @prop Set the image/gif of the Content Item | '' */ - content: PropTypes.string, - /** @prop Set the failed text to show when content fails to load | '' */ - failedText: PropTypes.string, - /** @prop Show the size of the file | '' */ - fileSize: PropTypes.string, - /** @prop Show icon at top right corner of Content Item */ - gifIcon: PropTypes.string, - /** @prop Height of the image in px */ - height: PropTypes.number, - /** @prop Set the type of icon to show | '' */ - icon: PropTypes.string, - /** @prop Show visibility of action node buttons | false */ - isProtected: PropTypes.bool, - /** @prop Show loading spinner | false */ - loading: PropTypes.bool, - /** @prop Change loading text */ - loadingText: PropTypes.string, - /** @prop Additional css styling applied to the button | null */ - style: PropTypes.object, - /** @prop Set the subtitle of the Content Item | '' */ - subtitle: PropTypes.node, - /** @prop Set the title of the Content Item | '' */ - title: PropTypes.string, - /** @prop Set the type of Content Item to display */ - type: PropTypes.oneOf(['chat', 'file']), - /** @prop Width of the image in px */ - width: PropTypes.number, -}; - -export default ContentItem; diff --git a/src/legacy/ContentItem/tests/index.spec.js b/src/legacy/ContentItem/tests/index.spec.js deleted file mode 100644 index aa21dbca0a..0000000000 --- a/src/legacy/ContentItem/tests/index.spec.js +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { ContentItem } from '@momentum-ui/react-collaboration'; - -describe('tests for ', () => { - const type = 'chat'; - - it('should match SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should show failed container', () => { - const container = mount(); - expect(container.find('.md-content--failed').length).toEqual(1); - }); - - it('should show spinner when loading is true', () => { - const container = mount(); - expect(container.find('.md-loading-spinner-wrapper').exists()).toEqual(true); - }); - - it('should show content image when content present', () => { - const container = mount( - - ); - expect(container.find('.md-content-file--full').get(0).props.style).toHaveProperty( - 'backgroundImage', - 'url(https://newevolutiondesigns.com/images/freebies/yellow-wallpaper-12.jpg)' - ); - }); - - it('should show title with title prop', () => { - const container = mount(); - expect(container.find('.md-content-file__title').length).toEqual(1); - }); - - it('should show subtitle with subtitle prop', () => { - const container = mount(); - expect(container.find('.md-content-file__subtitle').length).toEqual(1); - }); - - it('should show icon content component', () => { - const container = mount(); - expect(container.find('.md-content-file__icon').length).toEqual(1); - }); - - it('should not show the hover on File view when isProtected', () => { - const container = mount(); - expect(container.find('.md-content-file__aspect').length).toEqual(0); - }); - - it('should show the hover on File view when isProtected is false with actionNode', () => { - const container = mount( - } isProtected={false} type="file" /> - ); - expect(container.find('.md-content-file__aspect').length).toEqual(1); - }); - - describe('should apply respective aspects for chat', () => { - it('should show the nineSixteen class with type chat', () => { - const container = mount(); - expect(container.find('.md-content__chat-sixteen-nine').length).toEqual(1); - }); - - it('should show the oneOne class with type chat', () => { - const container = mount(); - expect(container.find('.md-content-file--chat-one-one').length).toEqual(1); - }); - - it('should show the threeFour class with type chat', () => { - const container = mount(); - expect(container.find('.md-content-file--chat-three-four').length).toEqual(1); - }); - - it('should show the twoThree class with type chat', () => { - const container = mount(); - expect(container.find('.md-content-file--chat-two-three').length).toEqual(1); - }); - - it('should show the tall class with type chat', () => { - const container = mount(); - expect(container.find('.md-content-file--chat-tall').length).toEqual(1); - }); - - it('should show the wide class with type chat', () => { - const container = mount(); - expect(container.find('.md-content-file--chat-wide').length).toEqual(1); - }); - - it('should show the fourThree class with type chat', () => { - const container = mount(); - expect(container.find('.md-content__chat-four-three').length).toEqual(1); - }); - - it('should show the threeTwo class with type chat', () => { - const container = mount(); - expect(container.find('.md-content__chat-three-two').length).toEqual(1); - }); - }); - - describe('should apply respective aspects for file', () => { - it('should show the twoThree class with type file', () => { - const container = mount(); - expect(container.find('.md-content-file--two-three').length).toEqual(1); - }); - - it('should show the threeFour class with type file', () => { - const container = mount(); - expect(container.find('.md-content-file--three-four').length).toEqual(1); - }); - - it('should show the sixteenNine class with type file', () => { - const container = mount(); - expect(container.find('.md-content-file--sixteen-nine').length).toEqual(1); - }); - - it('should show the nineSixteen class with type file', () => { - const container = mount(); - expect(container.find('.md-content-file--nine-sixteen').length).toEqual(1); - }); - - it('should show the oneOne class with type file', () => { - const container = mount(); - expect(container.find('.md-content-file--one-one').length).toEqual(1); - }); - - it('should show the fourThree class with type file', () => { - const container = mount(); - expect(container.find('.md-content-file--four-three').length).toEqual(1); - }); - }); -}); diff --git a/src/legacy/ContentItem/tests/index.spec.js.snap b/src/legacy/ContentItem/tests/index.spec.js.snap deleted file mode 100644 index 6f478fef7f..0000000000 --- a/src/legacy/ContentItem/tests/index.spec.js.snap +++ /dev/null @@ -1,70 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tests for should match SnapShot 1`] = ` - -
- -
-
-
-
- - -
-
-
- -
- -`; diff --git a/src/legacy/DeviceListCall/index.js b/src/legacy/DeviceListCall/index.js deleted file mode 100644 index de9cccb4ed..0000000000 --- a/src/legacy/DeviceListCall/index.js +++ /dev/null @@ -1,125 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import omit from 'lodash/omit'; -import { UIDConsumer } from 'react-uid'; -import { - Icon, - List, - ListItem, - ListItemHeader, - ListItemSection, -} 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. - **/ -class DeviceListCall extends React.PureComponent { - state = { - selectedIndex: this.props.defaultSelected, - }; - - handleSelect = (e, opts) => { - const { onSelect } = this.props; - const { value, eventKey } = opts; - - e.preventDefault(); - return this.setState( - { - selectedIndex: eventKey, - }, - () => onSelect && onSelect(e, { eventKey, value }) - ); - }; - - render() { - const { className, devices, header, ...props } = this.props; - const { selectedIndex } = this.state; - - const otherProps = omit({ ...props }, ['defaultSelected', 'onSelect']); - - const getLeftSection = (deviceType) => { - switch (deviceType) { - case 'device': - return ; - default: - return ; - } - }; - - const getRightSection = (uid, idx) => { - if (!isNaN(selectedIndex)) { - if (idx === selectedIndex) { - return ; - } - } else if (uid === selectedIndex) { - return ; - } - }; - - return ( - - - {devices.map(({ eventKey, id, name, title, type, value, ...deviceProps }, idx) => ( - `md-device-list-call-${uid}`} key={`device-${idx}`}> - {(uid) => { - const uniqueKey = eventKey || id || uid; - - return ( - - {getLeftSection(type)} - -
{name}
- - - {getRightSection(uniqueKey, idx)} - - - ); - }} - - ))} - - ); - } -} - -DeviceListCall.defaultProps = { - className: '', - defaultSelected: null, - onSelect: null, -}; - -DeviceListCall.propTypes = { - /** HTML Class for associated input | '' */ - className: PropTypes.string, - /** Default Index Value selected | null */ - defaultSelected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** Required list of devices to show in list */ - devices: PropTypes.arrayOf( - PropTypes.shape({ - name: PropTypes.string.isRequired, - value: PropTypes.string, - type: PropTypes.oneOf(['', 'device']), - title: PropTypes.string, - }) - ).isRequired, - /** ListItem header */ - header: PropTypes.string.isRequired, - /** Optional function called when list item is selected | null */ - onSelect: PropTypes.func, -}; - -DeviceListCall.displayName = 'DeviceListCall'; - -export default DeviceListCall; diff --git a/src/legacy/DeviceListCall/tests/index.spec.js b/src/legacy/DeviceListCall/tests/index.spec.js deleted file mode 100644 index 5d0f7976d1..0000000000 --- a/src/legacy/DeviceListCall/tests/index.spec.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import DeviceListCall from '../index'; - -describe('tests for ', () => { - const header = 'Device selection'; - const devices = [ - { name: 'SJC21-Babelfish', value: '1010101', type: 'device', title: 'testTitle' }, - { name: 'Use my computer', value: '2020202' }, - ]; - - it('should match SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should render one device 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 header prop', () => { - const container = mount(); - - expect(container.find('.md-list-item.md-list-item-header').text()).toEqual( - 'custom header text' - ); - }); - - it('should handle onSelect event', () => { - const onSelect = jest.fn(); - - const container = mount( - - ); - - container.find('.md-list-item').last().simulate('click'); - expect(onSelect).toHaveBeenCalled(); - }); - - describe('tests for device title prop', () => { - it('should handle device title prop', () => { - const container = mount(); - - expect(container.find('.md-list-item').at(1).props().title).toEqual('testTitle'); - }); - - it('should handle replace title with name', () => { - const container = mount(); - - expect(container.find('.md-list-item').at(2).props().title).toEqual('Use my computer'); - }); - }); -}); diff --git a/src/legacy/DeviceListCall/tests/index.spec.js.snap b/src/legacy/DeviceListCall/tests/index.spec.js.snap deleted file mode 100644 index ec80a36633..0000000000 --- a/src/legacy/DeviceListCall/tests/index.spec.js.snap +++ /dev/null @@ -1,459 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tests for should match SnapShot 1`] = ` - - -
- - - - - -
- -
-
- Device selection -
-
- - -
- -
- - - - - - - - - - - -
- -
- - - -
- - -
-
- SJC21-Babelfish -
-
- - -
- -
- - - - - - - - - - - - -
- -
- - - -
- - -
-
- Use my computer -
-
- - -
- -
- - - - - - -
- - -`; diff --git a/src/legacy/EventOverlay/index.js b/src/legacy/EventOverlay/index.js deleted file mode 100644 index d14267b222..0000000000 --- a/src/legacy/EventOverlay/index.js +++ /dev/null @@ -1,1100 +0,0 @@ -/** @component event-overlay */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import ReactDOM from 'react-dom'; -import omit from 'lodash/omit'; -import { FocusScope } from '@react-aria/focus'; - -const defaultDims = { - offsetTop: 0, - bottom: 0, - center: 0, - height: 0, - left: 0, - middle: 0, - right: 0, - top: 0, - width: 0, -}; - -function eventPath(evt) { - let path = (evt.composedPath && evt.composedPath()) || evt.path, - target = evt.target; - - let isPathInShadowRoot = false; - let pathElementsInShadowRootToDelete = 0; - - // check if any of the elements in the next 3 elements in the path are a shadow root - // this is a work around to make the deprecated EventOverlay to work with the Shadow DOM - if (path?.length > 1) { - for (let i = 1; i < 4; i++) { - if (path[i]?.toString() === '[object ShadowRoot]') { - isPathInShadowRoot = true; - pathElementsInShadowRootToDelete = i + 1; - break; - } - } - } - - if (isPathInShadowRoot) { - // if path is in shadowroot, then we need to get rid of the first 2 elements in the path - path = path.slice(pathElementsInShadowRootToDelete); - } - - if (path != null) { - // Safari doesn't include Window, and it should. - path = path.indexOf(window) < 0 ? path.concat([window]) : path; - return path; - } - - if (target === window) { - return [window]; - } - - function getParents(node, memo) { - memo = memo || []; - let parentNode = node !== undefined ? node.parentNode : false; - - if (!parentNode) { - return memo; - } else { - return getParents(parentNode, memo.concat([parentNode])); - } - } - - return [target].concat(getParents(target)).concat([window]); -} - -/** - * @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 EventOverlay extends React.Component { - static getDerivedStateFromProps({ isOpen }, state) { - return { - ...state, - isOpen: isOpen, - }; - } - - state = { - absoluteParent: null, - containerParent: null, - isOpen: false, - scrollParent: null, - transformParent: null, - visibleDirection: this.props.direction, - }; - - componentDidMount = () => { - this.props.isOpen && this.forceUpdate(); - this.addHandlers(); - }; - - componentDidUpdate = (prevProps, prevState) => { - const { direction } = this.props; - const { isOpen } = this.state; - - if ((isOpen && prevState.isOpen !== isOpen) || prevProps.direction !== direction) { - return this.forceUpdate(() => this.isVisible()); - } else if (!isOpen && prevState.isOpen !== isOpen) { - this.focusOnAnchorNode(); - } - }; - - componentWillUnmount = () => { - this.removeHandlers(); - }; - - addHandlers = () => { - const { - absoluteParentID, - allowClickAway, - boundingParentID, - checkOverflow, - closeOnClick, - isContained, - scrollParentID, - transformParentID, - } = this.props; - this.handleResize = this.isVisible; - this.handleScroll = this.isVisible; - - const element = ReactDOM.findDOMNode(this.container); - const elementParent = element && element.parentElement; - const elementParents = elementParent && this.findParents(elementParent); - let scrollParent; - - if (allowClickAway) { - document.addEventListener('click', this.handleAllowClickAway, true); - document.addEventListener('keydown', this.handleKeyDown, false); - } - - closeOnClick && document.addEventListener('click', this.handleCloseOnClick, false); - window.addEventListener('resize', this.handleResize, false); - document.addEventListener('scroll', this.handleScroll, false); - - if (scrollParentID) { - scrollParent = document.getElementById(scrollParentID); - scrollParent && scrollParent.addEventListener('scroll', this.handleScroll, false); - } - - if (checkOverflow) { - scrollParent = - !scrollParent && - elementParents && - this.findScrollParent(elementParents, ['overflow', 'overflow-y', 'overflow-x']); - - scrollParent && scrollParent.addEventListener('scroll', this.handleScroll, false); - } - - const transformParent = transformParentID - ? document.getElementById(transformParentID) - : elementParents && this.findTransformParent(elementParents, ['transform'], 1); - const absoluteParent = absoluteParentID - ? document.getElementById(absoluteParentID) - : elementParents && this.findAbsoluteParent(elementParents, ['position'], 1); - const containerParent = - (isContained && document.getElementById(boundingParentID)) || scrollParent; - - this.observer = new MutationObserver(this.isVisible); - this.observer.observe(document.body, { - attributes: false, - characterData: false, - childList: true, - subtree: true, - attributeOldValue: false, - characterDataOldValue: false, - }); - - this.setState( - { - absoluteParent, - containerParent, - scrollParent, - transformParent, - }, - () => this.isVisible() - ); - }; - - findOverflow = (node, searchProps) => { - return searchProps.reduce((agg, prop) => { - let overflowElement = window.getComputedStyle(ReactDOM.findDOMNode(node))[prop]; - - return !overflowElement || agg.includes(overflowElement) ? agg : (agg += overflowElement); - }, ''); - }; - - findParents = (ele, tempParentArr = []) => { - return !ele.parentElement - ? tempParentArr - : this.findParents(ele.parentElement, tempParentArr.concat(ele)); - }; - - findAbsoluteParent = (elementParents, searchProps, startIndex) => { - let absoluteElement; - let idx = startIndex; - - while (!absoluteElement && elementParents[idx]) { - let currentAbsoluteElement = this.findOverflow(elementParents[idx], searchProps); - - if (/(absolute)/.test(currentAbsoluteElement)) { - return (absoluteElement = elementParents[idx]); - } - idx++; - } - - return absoluteElement ? absoluteElement : null; - }; - - findScrollParent = (elementParents, searchProps) => { - let overflowElement = null; - let idx = 1; - - while (!overflowElement && elementParents[idx]) { - let currentOverflowElement = this.findOverflow(elementParents[idx], searchProps); - - if (/(auto|scroll|hidden)/.test(currentOverflowElement)) { - return (overflowElement = elementParents[idx]); - } - idx++; - } - - return overflowElement ? overflowElement : null; - }; - - findTransformParent = (elementParents, searchProps, startIndex) => { - let transformElement = null; - let idx = startIndex; - - while (!transformElement && elementParents[idx]) { - let potentialTransformElement = this.findOverflow(elementParents[idx], ['will-change']); - let currentTransformElement = this.findOverflow(elementParents[idx], searchProps); - - if (/(transform)/.test(potentialTransformElement) || currentTransformElement !== 'none') { - return (transformElement = elementParents[idx]); - } - idx++; - } - - return transformElement ? transformElement : null; - }; - - focusOnAnchorNode = () => { - const { anchorNode } = this.props; - - if (anchorNode) { - const domAnchorNode = - (anchorNode.props ? anchorNode.props.onClick : false) && ReactDOM.findDOMNode(anchorNode); - - if (domAnchorNode) { - domAnchorNode.focus(); - } else if (anchorNode.focus) { - // handle fallback for MRv2 trigger elements (functional components) - anchorNode.focus(); - } - } - }; - - getAnchorPosition = (node) => { - const { transformParent } = this.state; - const rect = node.getBoundingClientRect(); - const transformParentDims = transformParent && this.getElementPosition(transformParent); - const parentRect = transformParentDims || defaultDims; - - const anchorPosition = { - top: rect.top - parentRect.top, - left: rect.left - parentRect.left, - width: node.offsetWidth, - height: node.offsetHeight, - }; - - anchorPosition.right = - (rect.right || anchorPosition.left + anchorPosition.width) - parentRect.left; - anchorPosition.bottom = - (rect.bottom || anchorPosition.top + anchorPosition.height) - parentRect.top; - anchorPosition.middle = anchorPosition.left + (anchorPosition.right - anchorPosition.left) / 2; - anchorPosition.center = anchorPosition.top + (anchorPosition.bottom - anchorPosition.top) / 2; - - return anchorPosition; - }; - - getAbsoluteAnchorPosition = (node, absoluteParentDims) => { - const { scrollParent } = this.state; - const rect = node.getBoundingClientRect(); - const parentRect = absoluteParentDims; - const scrollAdjust = (scrollParent && scrollParent.scrollTop) || 0; - - const anchorPosition = { - top: absoluteParentDims.offsetTop - ? absoluteParentDims.offsetTop + node.offsetTop - scrollAdjust - : rect.top - parentRect.top, - left: absoluteParentDims.offsetLeft - ? absoluteParentDims.offsetLeft - node.offsetLeft - : rect.left - parentRect.left, - width: node.offsetWidth, - height: node.offsetHeight, - }; - - anchorPosition.right = - (rect.right || anchorPosition.left + anchorPosition.width) - parentRect.left; - anchorPosition.bottom = anchorPosition.top + anchorPosition.height; - anchorPosition.middle = anchorPosition.left + (anchorPosition.right - anchorPosition.left) / 2; - anchorPosition.center = anchorPosition.top + (anchorPosition.bottom - anchorPosition.top) / 2; - - return anchorPosition; - }; - - getElementPosition = (element) => { - const elementRect = element.getBoundingClientRect(); - - return { - offsetTop: element.offsetTop, - offsetLeft: element.offsetLeft, - bottom: elementRect.bottom, - top: elementRect.top, - left: elementRect.left, - height: elementRect.height, - width: elementRect.width, - hasAbsParent: - element.offsetTop !== elementRect.top || element.offsetLeft !== elementRect.left, - }; - }; - - getOrigin = () => { - const side = this.state.visibleDirection.split('-')[0]; - const alignment = this.props.direction.split('-')[1]; - const origin = { - anchor: {}, - target: {}, - }; - - if (side === 'top' || side === 'bottom') { - origin.anchor.vertical = side; - origin.anchor.horizontal = alignment === 'center' ? 'middle' : alignment; - - origin.target.vertical = side === 'top' ? 'bottom' : 'top'; - origin.target.horizontal = alignment === 'center' ? 'middle' : alignment; - } - - if (side === 'left' || side === 'right') { - origin.anchor.vertical = alignment; - origin.anchor.horizontal = side; - - origin.target.vertical = alignment; - origin.target.horizontal = side === 'left' ? 'right' : 'left'; - } - - return origin; - }; - - getTargetPosition = (targetNode) => { - return { - top: 0, - center: targetNode.offsetHeight / 2, - bottom: targetNode.offsetHeight, - left: 0, - middle: targetNode.offsetWidth / 2, - right: targetNode.offsetWidth, - }; - }; - - handleAllowClickAway = (e) => { - if (!this.props.isOpen) return; - const eventTarget = eventPath(e)[0]; - const anchorNode = ReactDOM.findDOMNode(this.props.anchorNode); - - return ( - this.container && - !anchorNode.contains(eventTarget) && - !ReactDOM.findDOMNode(this.container).contains(eventTarget) && - this.handleClickAway(e) - ); - }; - - handleClickAway = (e) => { - const { close } = this.props; - - this.focusOnAnchorNode(); - close && close(e); - }; - - handleCloseOnClick = (e) => { - if (!this.props.isOpen) return; - const eventTarget = eventPath(e)[0]; - const { closeOnClick } = this.props; - return ( - closeOnClick && - this.container && - ReactDOM.findDOMNode(this.container).contains(eventTarget) && - this.handleClickAway(e) - ); - }; - - handleKeyDown = (e) => { - const { isOpen, disableCloseOnEnterOrSpaceKey } = this.props; - if (!isOpen) return; - if (e.keyCode === 27) return this.handleClickAway(e); - - if ( - !disableCloseOnEnterOrSpaceKey || - (disableCloseOnEnterOrSpaceKey && e.which !== 13 && e.which !== 32) - ) { - const eventTarget = eventPath(e)[0]; - const anchorNode = ReactDOM.findDOMNode(this.props.anchorNode); - - return ( - this.container && - anchorNode && - !anchorNode.contains(eventTarget) && - !ReactDOM.findDOMNode(this.container).contains(eventTarget) && - this.handleClickAway(e) - ); - } - }; - - isVisible = () => { - const { anchorNode, direction, isOpen, isDynamic } = this.props; - if (!isOpen) return; - if (!isDynamic) return this.setPlacement(); - - const anchorElement = ReactDOM.findDOMNode(anchorNode); - const element = ReactDOM.findDOMNode(this.container); - const side = direction.split('-')[0]; - const alignment = direction.split('-')[1]; - const anchorDims = anchorElement && anchorElement.getBoundingClientRect(); - const elementBoundingRect = element.getBoundingClientRect(); - const elementParent = element.parentElement; - - ['top', 'bottom'].includes(side) - ? this.setVerticalClass(alignment, anchorDims, elementBoundingRect, elementParent) - : this.setHorizontalClass(alignment, anchorDims, elementBoundingRect, elementParent); - }; - - removeHandlers = () => { - const { scrollParent } = this.state; - - document.removeEventListener('click', this.handleAllowClickAway, true); - document.removeEventListener('click', this.handleCloseOnClick, false); - document.removeEventListener('keydown', this.handleKeyDown, false); - - window.removeEventListener('resize', this.handleResize, false); - document.removeEventListener('scroll', this.handleScroll, false); - - scrollParent && scrollParent.removeEventListener('scroll', this.handleScroll, false); - - this.observer && this.observer.disconnect() && this.observer.takeRecords(); - }; - - setArrowPlacement = (anchor, container) => { - const arrow = this.arrow; - const { targetOffset } = this.props; - const { visibleDirection } = this.state; - const side = visibleDirection.split('-')[0]; - const verticalOffset = targetOffset.vertical || 0; - const horizontalOffset = targetOffset.horizontal || 0; - const isAnchorWider = anchor.width > container.right; - const isAnchorTaller = anchor.height > container.bottom; - - const arrowLeft = - isAnchorWider && !visibleDirection.includes('center') - ? visibleDirection.includes('left') - ? container.middle + anchor.left - : anchor.right - container.middle - : anchor.middle; - - const arrowTop = - isAnchorTaller && !visibleDirection.includes('center') - ? visibleDirection.includes('top') - ? container.center + anchor.top - : anchor.bottom - container.center - : anchor.center; - - switch (side) { - case 'top': - arrow.style.left = `${arrowLeft}px`; - arrow.style.top = `${anchor.top - verticalOffset}px`; - break; - case 'bottom': - arrow.style.left = `${arrowLeft}px`; - arrow.style.top = `${anchor.bottom + verticalOffset}px`; - break; - case 'left': - arrow.style.left = `${anchor.left - horizontalOffset}px`; - arrow.style.top = `${arrowTop}px`; - break; - - case 'right': - arrow.style.left = `${anchor.right + horizontalOffset}px`; - arrow.style.top = `${arrowTop}px`; - break; - } - }; - - setBoundingBox = (side, targetNode, anchorPosition) => { - const { checkOverflow, isContained, maxHeight, maxWidth, showArrow, targetOffset } = this.props; - const { absoluteParent, scrollParent, transformParent } = this.state; - - const arrowDims = showArrow && ReactDOM.findDOMNode(this.arrow).getBoundingClientRect(); - const checkVertical = isContained === 'vertical'; - const checkHorizontal = isContained === 'horizontal'; - const element = ReactDOM.findDOMNode(this.container); - const documentScrollTop = document.documentElement.scrollTop; - const documentBottom = document.documentElement.scrollHeight; - const windowBottom = window.pageXOffset + window.innerHeight; - const documentRight = Math.max( - document.documentElement.offsetWidth, - document.documentElement.clientWidth - ); - const arrowHeight = (arrowDims && arrowDims.height) || 0; - const arrowWidth = (arrowDims && arrowDims.width) || 0; - const offsetHeight = targetOffset.vertical || 0; - const offsetWidth = targetOffset.horizontal || 0; - - const elementDims = element.getBoundingClientRect(); - const elementVerticalHeight = elementDims.height + offsetHeight; - const elementVerticalWidth = elementDims.width + offsetWidth; - const getAvailableTopSpace = (top) => - top + anchorPosition.top - (this.elementHeight + arrowHeight); - - const scrollParentDimsv2 = this.setBoundingContainer(scrollParent); - const scrollParentDims = scrollParent ? scrollParent.getBoundingClientRect() : defaultDims; - const absoluteParentDims = absoluteParent && this.getElementPosition(absoluteParent); - const transformParentDims = transformParent && this.getElementPosition(transformParent); - const scrollParentScrollTop = (scrollParent && scrollParent.offsetTop) || 0; - - if (targetNode && targetNode.style && !targetNode.style.bottom && elementVerticalHeight) { - this.elementHeight = elementVerticalHeight; - this.elementBottom = elementDims.bottom; - } - - if (targetNode && targetNode.style && !targetNode.style.right && elementVerticalWidth) { - this.elementWidth = elementVerticalWidth; - this.elementLeft = elementDims.left; - this.elementRight = elementDims.right; - } - - switch (side) { - case 'top': - if (!scrollParent && !transformParentDims) { - if (!checkHorizontal) { - targetNode.style.bottom = `${ - windowBottom - anchorPosition.top + arrowHeight + offsetHeight - }px`; - if (getAvailableTopSpace(documentScrollTop) < 0) { - targetNode.style.top = `${arrowHeight - documentScrollTop}px`; - } - } - if (!checkVertical) { - if (elementDims.right > documentRight || this.elementWidth > documentRight) { - targetNode.style.right = '0px'; - if (this.elementWidth < documentRight) { - targetNode.style.left = `${documentRight - this.elementWidth}px`; - } - } - if (this.elementLeft < 0) { - targetNode.style.left = '0px'; - } - } - } else { - if (transformParentDims) { - targetNode.style.bottom = `${ - transformParentDims.height - anchorPosition.top + arrowHeight + offsetHeight - }px`; - if (anchorPosition.top - scrollParentScrollTop - this.elementHeight - arrowHeight < 0) { - targetNode.style.top = `${scrollParentScrollTop + arrowHeight}px`; - targetNode.style.maxHeight = `${maxHeight || transformParentDims.height}px`; - } - if (!checkVertical) { - if ( - this.elementWidth > transformParentDims.width || - this.elementRight > transformParentDims.right - ) { - targetNode.style.right = `${0}px`; - - if (this.elementWidth > transformParentDims.width) { - targetNode.style.left = `0px`; - } else { - targetNode.style.left = `${this.elementWidth}px`; - } - } - if (this.elementLeft < transformParentDims.left) { - targetNode.style.left = `${0}px`; - } - } - if ( - arrowDims && - (arrowDims.top - (scrollParent ? scrollParentDims.top : transformParentDims.top) < - 0 || - arrowDims.bottom + 1 > - (scrollParent ? scrollParentDims.bottom : transformParentDims.bottom)) - ) { - this.arrow.style.visibility = 'hidden'; - } else if (arrowDims) { - this.arrow.style.visibility = 'visible'; - } - } else { - targetNode.style.bottom = `${ - windowBottom - anchorPosition.top + arrowHeight + offsetHeight - }px`; - if (!checkHorizontal) { - if ( - anchorPosition.top - scrollParentDimsv2.top - this.elementHeight - arrowHeight < - 0 - ) { - targetNode.style.top = `${scrollParentDimsv2.top + arrowHeight}px`; - targetNode.style.maxHeight = `${maxHeight || scrollParentDimsv2.height}px`; - } - } - if (!checkVertical) { - if ( - this.elementWidth > scrollParentDimsv2.width || - this.elementRight > scrollParentDimsv2.right - ) { - targetNode.style.right = `${documentRight - scrollParentDimsv2.right}px`; - } - if (this.elementLeft < scrollParentDimsv2.left) { - targetNode.style.left = `${scrollParentDimsv2.left}px`; - } - } - if ( - arrowDims && - (arrowDims.top < scrollParentDims.top || - arrowDims.bottom + 1 > scrollParentDims.bottom) - ) { - this.arrow.style.visibility = 'hidden'; - } else if (arrowDims) { - this.arrow.style.visibility = 'visible'; - } - } - } - break; - case 'bottom': - if (!scrollParentDims.bottom && !transformParentDims) { - if ( - this.elementHeight + arrowHeight + anchorPosition.bottom + documentScrollTop > - documentBottom - ) { - targetNode.style.bottom = `${documentScrollTop + windowBottom - documentBottom}px`; - } - if (elementDims.right >= documentRight || this.elementWidth > documentRight) { - targetNode.style.right = '0px'; - if (this.elementWidth < documentRight) { - targetNode.style.left = 'inherit'; - } - } - if (elementDims.left < 0) { - targetNode.style.left = '0px'; - } - } else if (scrollParentDims.bottom && !transformParentDims) { - targetNode.style.bottom = 'auto'; - - if (anchorPosition.bottom + arrowHeight - scrollParentDims.top < 0) { - targetNode.style.top = `${scrollParentDims.top - arrowHeight}px`; - } - if (this.elementHeight + arrowHeight + anchorPosition.bottom > scrollParentDims.bottom) { - targetNode.style.bottom = `${windowBottom - scrollParentDims.bottom}px`; - targetNode.style.maxHeight = `${maxHeight || scrollParentDims.height}px`; - } - if ( - this.elementWidth > scrollParentDims.width || - this.elementRight > scrollParentDims.right - ) { - targetNode.style.right = `${documentRight - scrollParentDims.right}px`; - } - if (this.elementLeft < scrollParentDims.left) { - targetNode.style.left = `${scrollParentDims.left}px`; - } - if ( - arrowDims && - (arrowDims.top < scrollParentDims.top || arrowDims.bottom + 1 > scrollParentDims.bottom) - ) { - this.arrow.style.visibility = 'hidden'; - } else if (arrowDims) { - this.arrow.style.visibility = 'visible'; - } - } else { - if ( - anchorPosition.bottom + arrowHeight + offsetHeight < - scrollParentDims.top - transformParentDims.top - ) { - targetNode.style.top = `${ - scrollParentDims.top - transformParentDims.top - arrowHeight - }px`; - } - if ( - this.elementHeight + arrowHeight + anchorPosition.bottom > - transformParentDims.height + ((absoluteParentDims && absoluteParentDims.offsetTop) || 0) - ) { - targetNode.style.bottom = `0px`; - } - if (this.elementLeft < transformParentDims.left) { - targetNode.style.left = `0px`; - } - if ( - this.elementWidth > transformParentDims.width || - this.elementRight > transformParentDims.right - ) { - targetNode.style.right = `0px`; - if (this.elementWidth > transformParentDims.width) { - targetNode.style.left = `0px`; - } else { - targetNode.style.left = `${transformParentDims.width - this.elementWidth}px`; - } - } - if ( - arrowDims && - (arrowDims.top < (checkOverflow ? scrollParentDims.top : transformParentDims.top) || - arrowDims.bottom + 1 > - (checkOverflow ? scrollParentDims.bottom : transformParentDims.bottom)) - ) { - this.arrow.style.visibility = 'hidden'; - } else if (arrowDims) { - this.arrow.style.visibility = 'visible'; - } - } - break; - case 'left': - if (!scrollParentDims.left && !transformParentDims) { - targetNode.style.right = `${ - documentRight - anchorPosition.left + arrowWidth + offsetWidth - }px`; - if (elementDims.left - arrowWidth < 0) { - targetNode.style.left = `${arrowWidth}px`; - } else { - targetNode.style.left = 'inherit'; - } - if (getAvailableTopSpace(documentScrollTop) < 0) { - targetNode.style.top = `${-documentScrollTop}px`; - } - if ( - this.elementHeight + arrowHeight + anchorPosition.bottom + documentScrollTop > - documentBottom - ) { - targetNode.style.bottom = `${documentScrollTop + windowBottom - documentBottom}px`; - } - } else if (scrollParentDims.left && !transformParentDims) { - if (anchorPosition.left - scrollParentDims.left < this.elementWidth + arrowWidth) { - targetNode.style.left = `${scrollParentDims.left + arrowWidth}px`; - targetNode.style.right = `${ - documentRight - anchorPosition.left + arrowWidth + offsetWidth - }px`; - targetNode.style.maxWidth = `${maxWidth || scrollParentDims.width}px`; - } - if (anchorPosition.top - scrollParentDims.top - this.elementHeight < 0) { - targetNode.style.top = `${scrollParentDims.top}px`; - } - if (this.elementHeight + anchorPosition.bottom > scrollParentDims.bottom) { - targetNode.style.bottom = `${windowBottom - scrollParentDims.bottom}px`; - } - if ( - arrowDims && - (arrowDims.top < scrollParentDims.top || arrowDims.bottom > scrollParentDims.bottom) - ) { - this.arrow.style.visibility = 'hidden'; - } else if (arrowDims) { - this.arrow.style.visibility = 'visible'; - } - } - break; - case 'right': - if (!scrollParentDims.right && !transformParentDims) { - if (arrowWidth + offsetWidth + elementDims.width + anchorPosition.right > documentRight) { - targetNode.style.right = '0px'; - } - if (getAvailableTopSpace(documentScrollTop) < 0) { - targetNode.style.top = `${-documentScrollTop}px`; - } - if ( - this.elementHeight + arrowHeight + anchorPosition.bottom + documentScrollTop > - documentBottom - ) { - targetNode.style.bottom = `${documentScrollTop + windowBottom - documentBottom}px`; - } - } else if (scrollParentDims.right && !transformParentDims) { - if (anchorPosition.right + this.elementWidth + arrowWidth > scrollParentDims.right) { - targetNode.style.left = `${anchorPosition.right + offsetWidth}px`; - targetNode.style.right = transformParentDims - ? `${scrollParentDims.width}px` - : `${documentRight - scrollParentDims.right}px`; - targetNode.style.maxWidth = `${maxWidth || scrollParentDims.width}px`; - } - if (anchorPosition.top - scrollParentDims.top - this.elementHeight < 0) { - targetNode.style.top = `${scrollParentDims.top}px`; - } - if (this.elementHeight + anchorPosition.bottom > scrollParentDims.bottom) { - targetNode.style.bottom = `${windowBottom - scrollParentDims.bottom}px`; - } - if ( - arrowDims && - (arrowDims.top < scrollParentDims.top || arrowDims.bottom > scrollParentDims.bottom) - ) { - this.arrow.style.visibility = 'hidden'; - } else if (arrowDims) { - this.arrow.style.visibility = 'visible'; - } - } - break; - } - }; - - setBoundingContainer = (containerNode) => { - const { boundingParentID, isContained } = this.props; - const { containerParent } = this.state; - - const containerNodeDims = - (containerNode && containerNode.getBoundingClientRect()) || defaultDims; - const containerParentDims = - (containerParent && containerParent.getBoundingClientRect()) || defaultDims; - const checkVertical = isContained === true || isContained === 'vertical'; - const checkHorizontal = isContained === true || isContained === 'horizontal'; - - return { - bottom: - checkVertical && boundingParentID ? containerParentDims.bottom : containerNodeDims.bottom, - center: 0, - height: - checkVertical && boundingParentID ? containerParentDims.height : containerNodeDims.height, - left: checkHorizontal && boundingParentID ? containerParentDims.left : containerNodeDims.left, - middle: 0, - right: - checkHorizontal && boundingParentID ? containerParentDims.right : containerNodeDims.right, - top: checkVertical && boundingParentID ? containerParentDims.top : containerNodeDims.top, - width: - checkHorizontal && boundingParentID ? containerParentDims.width : containerNodeDims.width, - }; - }; - - setHorizontalClass = (alignment, anchor, elementBoundingRect, elementParent) => { - const { showArrow, checkOverflow, targetOffset, scrollParentID } = this.props; - - const windowRight = window.pageYOffset + window.innerWidth; - const elementWidth = elementBoundingRect.width; - const anchorRight = anchor.right; - const arrowWidth = showArrow - ? ReactDOM.findDOMNode(this.arrow).getBoundingClientRect().width - : 0; - const offsetWidth = targetOffset.horizontal || 0; - const totalWidth = anchorRight + elementWidth + arrowWidth + offsetWidth; - - const elementParents = this.findParents(elementParent); - const scrollParent = scrollParentID - ? React.findDOMNode(scrollParentID) - : this.findScrollParent(elementParents, ['overflow', 'overflow-x']); - - const parentRight = - (checkOverflow && - !!scrollParent.getBoundingClientRect && - scrollParent.getBoundingClientRect().right) || - windowRight; - - return totalWidth < parentRight && totalWidth < windowRight - ? this.setState({ visibleDirection: `right-${alignment}` }, () => this.setPlacement()) - : this.setState({ visibleDirection: `left-${alignment}` }, () => this.setPlacement()); - }; - - setPlacement = () => { - const { anchorNode, isOpen, isContained, showArrow, targetOffset } = this.props; - const { visibleDirection, absoluteParent, transformParent } = this.state; - if (!isOpen) return; - - const anchorElement = ReactDOM.findDOMNode(anchorNode); - const side = visibleDirection.split('-')[0]; - const targetNode = this.container; - const verticalOffset = targetOffset.vertical || 0; - const horizontalOffset = targetOffset.horizontal || 0; - const absoluteParentDims = absoluteParent && this.getElementPosition(absoluteParent); - if (!targetNode || !anchorElement) return; - - anchorElement.link = this.state.id; - - const anchorPosition = - !!transformParent && absoluteParentDims && absoluteParentDims.hasAbsParent - ? this.getAbsoluteAnchorPosition(anchorElement, absoluteParentDims) - : this.getAnchorPosition(anchorElement); - const targetPosition = this.getTargetPosition(targetNode); - - const origin = this.getOrigin(); - const anchorOrigin = origin.anchor; - const targetOrigin = origin.target; - - const targetNodePosition = { - top: - anchorPosition[anchorOrigin.vertical] - - targetPosition[targetOrigin.vertical] + - (side === 'top' ? -verticalOffset : verticalOffset), - left: - anchorPosition[anchorOrigin.horizontal] - - targetPosition[targetOrigin.horizontal] + - (side === 'left' ? -horizontalOffset : horizontalOffset), - }; - - targetNode.style.top = `${targetNodePosition.top}px`; - targetNode.style.left = `${targetNodePosition.left}px`; - - showArrow && this.setArrowPlacement(anchorPosition, targetPosition); - isContained && this.setBoundingBox(side, targetNode, anchorPosition); - }; - - setVerticalClass = (alignment, anchor, elementBoundingRect, elementParent) => { - const { showArrow, checkOverflow, targetOffset, scrollParentID } = this.props; - - const windowBottom = window.pageXOffset + window.innerHeight; - const elementHeight = elementBoundingRect.height; - const anchorBottom = anchor.bottom; - const arrowHeight = showArrow - ? ReactDOM.findDOMNode(this.arrow).getBoundingClientRect().height - : 0; - const offsetHeight = targetOffset.vertical || 0; - const totalHeight = anchorBottom + elementHeight + arrowHeight + offsetHeight; - - const elementParents = this.findParents(elementParent); - const scrollParent = scrollParentID - ? React.findDOMNode(scrollParentID) - : this.findScrollParent(elementParents, ['overflow', 'overflow-x']); - - const parentBottom = - (checkOverflow && - !!scrollParent.getBoundingClientRect && - scrollParent.getBoundingClientRect().bottom) || - windowBottom; - - return totalHeight < parentBottom && totalHeight < windowBottom - ? this.setState({ visibleDirection: `bottom-${alignment}` }, () => this.setPlacement()) - : this.setState({ visibleDirection: `top-${alignment}` }, () => this.setPlacement()); - }; - - render() { - const { - children, - className, - focusLockProps, - isOpen, - maxHeight, - maxWidth, - portalNode, - shouldLockFocus, - showArrow, - style, - ...props - } = this.props; - const side = this.state.visibleDirection.split('-')[0]; - - const otherProps = omit({ ...props }, [ - 'absoluteParentID', - 'allowClickAway', - 'anchorNode', - 'boundingParentID', - 'checkOverflow', - 'close', - 'closeOnClick', - 'direction', - 'disableCloseOnEnterOrSpaceKey', - 'isDynamic', - 'isContained', - 'scrollParentID', - 'targetOffset', - 'transformParentID', - ]); - - const contentNodes = isOpen && ( -
- {showArrow &&
(this.arrow = ref)} className="md-event-overlay__arrow" />} -
(this.container = ref)} - style={{ - ...(maxWidth && { maxWidth: `${maxWidth}px` }), - ...(maxHeight && { maxHeight: `${maxHeight}px` }), - ...style, - }} - {...otherProps} - > - {children} -
-
- ); - - const withFocusLock = (content) => - shouldLockFocus ? ( - - {content} - - ) : ( - content - ); - - const withPortal = (content) => - portalNode ? ReactDOM.createPortal(content, portalNode) : content; - - return withFocusLock(withPortal(contentNodes)); - } -} - -EventOverlay.defaultProps = { - absoluteParentID: null, - allowClickAway: true, - anchorNode: null, - boundingParentID: null, - children: null, - checkOverflow: false, - className: '', - close: null, - direction: 'bottom-left', - disableCloseOnEnterOrSpaceKey: false, - focusLockProps: null, - isContained: '', - isDynamic: false, - isOpen: false, - maxHeight: null, - maxWidth: null, - portalNode: null, - scrollParentID: null, - shouldLockFocus: false, - showArrow: false, - style: null, - targetOffset: { - horizontal: 0, - vertical: 0, - }, - transformParentID: null, -}; - -EventOverlay.propTypes = { - /** @prop Set the id of the absoluteParent | null */ - absoluteParentID: PropTypes.string, - /** @prop Allows user to click outside of EventOverlay | true */ - allowClickAway: PropTypes.bool, - /** @prop Node which serves as basis of dom positioning | null */ - anchorNode: PropTypes.object, - /** @prop Set the id of the boundingParent | null */ - boundingParentID: PropTypes.string, - /** @prop Set to determine if dom ancestors have overflow property | false */ - checkOverflow: PropTypes.bool, - /** @prop Children nodes to render inside the EventOverlay | null */ - children: PropTypes.node, - /** @prop Optional css class string | '' */ - className: PropTypes.string, - /** @prop Function to close EventOverlay | null */ - close: PropTypes.func, - /** @prop Determines if the EventOverlay should close when clicked on | true */ - closeOnClick: PropTypes.bool, - /** @prop Sets the direction in which the EventOverlay extends | 'bottom-left' */ - direction: PropTypes.oneOf([ - 'top-center', - 'left-center', - 'right-center', - 'bottom-center', - 'top-left', - 'top-right', - 'bottom-left', - 'bottom-right', - 'left-top', - 'left-bottom', - 'right-top', - 'right-bottom', - ]), - /** @prop Prevent closing on ENTER or SPACE keydown event | false */ - disableCloseOnEnterOrSpaceKey: PropTypes.bool, - /** @prop Props to be passed to focus lock component | null */ - focusLockProps: PropTypes.object, - /** @prop Determines if the overlay is contained in bounding ancestor | '' */ - isContained: PropTypes.oneOf([true, false, 'horizontal', 'vertical', 'both', '']), - /** @prop When true, will flip children based on space available (does not work with isContained) | false */ - isDynamic: PropTypes.bool, - /** @prop Sets the visibility of the EventOverlay | false */ - isOpen: PropTypes.bool, - /** @prop Sets the max height of the EventOverlay | null */ - maxHeight: PropTypes.number, - /** @prop Sets the max width of the EventOverlay | null */ - maxWidth: PropTypes.number, - /** @prop Node/ReactElement where overlay should be appended using ReactDOM portal | null */ - portalNode: PropTypes.oneOfType([PropTypes.node, PropTypes.element]), - /** @prop Set the id of the scrollParent | null */ - scrollParentID: PropTypes.string, - /** @prop Determines if focus should be locked to overlay | false */ - shouldLockFocus: PropTypes.bool, - /** @prop Determines if the EventOverlay should show the open/close arrow | false */ - showArrow: PropTypes.bool, - /** @prop Optional css styling | null */ - style: PropTypes.object, - /** @prop Sets the target offset from anchorNode | { horizontal: 0, vertical: 0 } */ - targetOffset: PropTypes.shape({ - horizontal: PropTypes.number, - vertical: PropTypes.number, - }), - /** @prop Set the id of the transformParent | null */ - transformParentID: PropTypes.string, -}; - -EventOverlay.displayName = 'EventOverlay'; - -export default EventOverlay; diff --git a/src/legacy/EventOverlay/tests/index.spec.js b/src/legacy/EventOverlay/tests/index.spec.js deleted file mode 100644 index 752fa1818e..0000000000 --- a/src/legacy/EventOverlay/tests/index.spec.js +++ /dev/null @@ -1,341 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import { Button, Popover } from '@momentum-ui/react-collaboration'; -import EventOverlay from '..'; -import { ButtonPill } from '../../../components'; - -describe('tests for ', () => { - beforeAll(() => { - jest.clearAllTimers(); - jest.useFakeTimers(); - }); - - it('should match text SnapShot', () => { - const props = { - anchorNode:
, - }; - - const container = shallow( - - Test - - ); - - expect(container).toMatchSnapshot(); - }); - - describe('should set classes for', () => { - const content = ( - - Hello how are you doing - - ); - - it('top-center direction', () => { - const container = mount( - - - - ); - - container.find('.anchor').simulate('mouseenter'); - jest.runAllTimers(); - container.update(); - expect(container.find('.md-event-overlay--top').length).toEqual(1); - expect(container.find('.md-event-overlay--arrow').length).toEqual(1); - }); - - it('bottom-center direction', () => { - const container = mount( - - - - ); - - container.find('.anchor').simulate('mouseenter'); - jest.runAllTimers(); - container.update(); - expect(container.find('.md-event-overlay--bottom').length).toEqual(1); - }); - - it('left-center direction', () => { - const container = mount( - - - - ); - - container.find('.anchor').simulate('mouseenter'); - jest.runAllTimers(); - container.update(); - expect(container.find('.md-event-overlay--left').length).toEqual(1); - }); - - it('right-center direction', () => { - const container = mount( - - - - ); - - container.find('.anchor').simulate('mouseenter'); - jest.runAllTimers(); - container.update(); - expect(container.find('.md-event-overlay--right').length).toEqual(1); - }); - }); - - it('on click outside, should close the popover', () => { - const content = ( - - Hello how are you doing - - ); - - const container = mount( -
- - - -
- ); - - container.find('button').simulate('click'); - jest.runAllTimers(); - container.update(); - expect(container.find('.md-event-overlay--top').length).toEqual(1); - - // making a click outside - container.childAt(0).childAt(1).instance().handleAllowClickAway({}); - jest.runAllTimers(); - container.update(); - expect(container.find('.md-event-overlay--top').length).toEqual(0); - }); - - it('on focus outside, should close the popover', () => { - 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--top').length).toEqual(1); - - // when tabbed out of the Overlay - container.childAt(0).childAt(1).instance().handleAllowClickAway({}); - expect(container.find('.md-event-overlay--top').length).toEqual(1); - }); - - it('on closing the popover, show not focus back on the trigger if onMouseEnter present', () => { - const container = mount( -
- - - -
- ); - - container.find('Button').simulate('mouseenter'); - jest.runAllTimers(); - container.update(); - - // when tabbed out of the Overlay - container.childAt(0).childAt(1).instance().handleAllowClickAway({}); - expect(document.activeElement.type).toEqual(undefined); - }); - - it('on closing the popover, show not focus back on the trigger if onFocus present', () => { - const container = mount( -
- - - -
- ); - - container.find('Button').simulate('focus'); - jest.runAllTimers(); - container.update(); - - // when tabbed out of the Overlay - container.childAt(0).childAt(1).instance().handleAllowClickAway({}); - expect(document.activeElement.type).toEqual(undefined); - }); - - it('on closing the popover, show focus back on the trigger if onClick present', () => { - // 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 } - ); - - container.find('Button').simulate('click'); - jest.runAllTimers(); - container.update(); - - // when tabbed out of the Overlay - container.childAt(0).childAt(1).instance().handleAllowClickAway({}); - expect('button').toEqual(document.activeElement.type); - }); - - it('on closing the popover, show focus back on the trigger if onPress present (isMRv2Button used as trigger)', () => { - // 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( -
- - - Hello - - -
, - { attachTo: focusContainer } - ); - - const trigger = container.find('ButtonPill'); - - expect(trigger.prop('onPress')).toEqual(expect.any(Function)); - trigger.prop('onPress')(); - jest.runAllTimers(); - container.update(); - - // when tabbed out of the Overlay - container.childAt(0).childAt(1).instance().handleAllowClickAway({}); - expect('button').toEqual(document.activeElement.type); - }); - - it('should handle maxHeight prop', () => { - const content = ( - - Hello how are you doing - - ); - - const container = mount( - - - - ); - - container.find('.anchor').simulate('mouseenter'); - jest.runAllTimers(); - container.update(); - - expect(container.find('.md-event-overlay__children').get(0).props.style).toHaveProperty( - 'maxHeight', - '300px' - ); - }); - - it('should handle maxWidth prop', () => { - const content = ( - - Hello how are you doing - - ); - - const container = mount( - - - - ); - - container.find('.anchor').simulate('mouseenter'); - jest.runAllTimers(); - container.update(); - - expect(container.find('.md-event-overlay__children').get(0).props.style).toHaveProperty( - 'maxWidth', - '300px' - ); - }); -}); diff --git a/src/legacy/EventOverlay/tests/index.spec.js.snap b/src/legacy/EventOverlay/tests/index.spec.js.snap deleted file mode 100644 index 3be8b4ee3d..0000000000 --- a/src/legacy/EventOverlay/tests/index.spec.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tests for should match text SnapShot 1`] = `""`; diff --git a/src/legacy/Icon/examples/ButtonIcon.js b/src/legacy/Icon/examples/ButtonIcon.js deleted file mode 100644 index 987edba3ba..0000000000 --- a/src/legacy/Icon/examples/ButtonIcon.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Icon } from '@momentum-ui/react-collaboration'; -export default class Default extends React.PureComponent { - render() { - return ( -
- alert('Settings 12 - clicked')} - /> -
- ); - } -} diff --git a/src/legacy/Icon/examples/Color.js b/src/legacy/Icon/examples/Color.js deleted file mode 100644 index 9b1d0662aa..0000000000 --- a/src/legacy/Icon/examples/Color.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Icon } from '@momentum-ui/react-collaboration'; -export default class IconColor extends React.PureComponent { - render() { - return ( -
- - - - -
- ); - } -} diff --git a/src/legacy/Icon/examples/Default.js b/src/legacy/Icon/examples/Default.js deleted file mode 100644 index b2011f2e7a..0000000000 --- a/src/legacy/Icon/examples/Default.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Icon } from '@momentum-ui/react-collaboration'; -export default class IconDefault extends React.PureComponent { - render() { - return ( -
- - - - -
- ); - } -} diff --git a/src/legacy/Icon/examples/KitchenSink.js b/src/legacy/Icon/examples/KitchenSink.js deleted file mode 100644 index 65ad351137..0000000000 --- a/src/legacy/Icon/examples/KitchenSink.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { ButtonIcon, IconColor, IconDefault, IconWhite } from './index'; - -export default class IconKitchenSink extends React.Component { - render() { - return ( - - - - - - - ); - } -} diff --git a/src/legacy/Icon/examples/KitchenSink.stories.tsx b/src/legacy/Icon/examples/KitchenSink.stories.tsx deleted file mode 100644 index 88beb908b8..0000000000 --- a/src/legacy/Icon/examples/KitchenSink.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import LegacyKitchenSink from './KitchenSink'; -import React from 'react'; - -export default { - title: 'Legacy/Icon', - component: LegacyKitchenSink, -}; - -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -const Legacy = () => ; - -export { Legacy }; diff --git a/src/legacy/Icon/examples/White.js b/src/legacy/Icon/examples/White.js deleted file mode 100644 index 563ca9896e..0000000000 --- a/src/legacy/Icon/examples/White.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Icon } from '@momentum-ui/react-collaboration'; -export default class Default extends React.PureComponent { - render() { - return ( -
- alert('Icon 36 - clicked')} - /> -
- ); - } -} diff --git a/src/legacy/Icon/examples/index.js b/src/legacy/Icon/examples/index.js deleted file mode 100644 index bc74cc8fb2..0000000000 --- a/src/legacy/Icon/examples/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export { default as IconColor } from './Color'; -export { default as IconDefault } from './Default'; -export { default as IconKitchenSink } from './KitchenSink'; -export { default as IconWhite } from './White'; -export { default as ButtonIcon } from './ButtonIcon'; diff --git a/src/legacy/Icon/index.js b/src/legacy/Icon/index.js deleted file mode 100644 index 088a07f78b..0000000000 --- a/src/legacy/Icon/index.js +++ /dev/null @@ -1,192 +0,0 @@ -/** @component icon */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import iconNames from '@momentum-ui/icons/data/momentumUiIconsNames.json'; -import { Button } from '@momentum-ui/react-collaboration'; -import { getColorValue } from '../utils'; - -/** - * @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 Icon extends React.PureComponent { - render() { - const { - append, - ariaLabel, - buttonClassName, - buttonProps, - color, - className, - description, - onClick, - name, - prepend, - size, - sizeOverride, - style, - title, - type, - icon, - ...otherProps - } = this.props; - - const consoleHandler = (message, data) => { - /* eslint-disable no-console */ - switch (message) { - case 'color-warn': - console.warn( - `[@momentum-ui/react-collaboration] Icon: ${data} may not exist in the design system,` + - ` please use a color name from https://momentum.design/styles/color/style` - ); - break; - case 'name-error': - console.warn( - `[@momentum-ui/react-collaboration] Icon: Icon ${data} does not exist in the design system.` + - ` Visit https://momentum.design/styles/icons/library for a list of available icons or to request a new icon.` - ); - break; - } - /* eslint-enable no-console */ - }; - - const getSize = () => { - const defaultSize = 16; - const sizeFromName = Number(name.split('_')[1]); - return size || sizeFromName || defaultSize; - }; - - const getColor = () => { - if (color.startsWith('#')) { - consoleHandler('color-warn', color); - return color; - } - - const value = getColorValue(color); - return value; - }; - - const getNameClass = () => { - let iconName = name.startsWith('icon-') ? name.replace(/^(icon-)/, '') : name; - if (sizeOverride) { - iconName = name.split('_')[0] + `_${getSize()}`; - } - return iconNames.includes(iconName) - ? `icon-${iconName}` - : consoleHandler('name-error', iconName); - }; - - const getAriaLabel = () => { - if (ariaLabel) { - return ariaLabel; - } - if (!ariaLabel) { - if (title && description) return `${title} ${description}`; - if (title) return title; - if (description) return description; - } - return null; - }; - - const getIcon = () => { - const styles = { - fontSize: getSize(), - ...(color && { color: getColor() }), - ...style, - }; - - return ( - - ); - }; - - return onClick ? ( - - ) : icon ? ( - icon - ) : ( - getIcon() - ); - } -} - -Icon.propTypes = { - /** @prop Add margin to the left of Icon | null */ - append: PropTypes.bool, - /** @prop Text to display for blindness accessibility features | null */ - ariaLabel: PropTypes.string, - /** @prop Optional Button class name string | '' */ - buttonClassName: PropTypes.string, - /** @prop Optional props to pass to underlying button component | null */ - buttonProps: PropTypes.object, - /** @prop Optional color css styling | '' */ - color: PropTypes.string, - /** @prop Optional class name string | '' */ - className: PropTypes.string, - /** @prop Icon description text | '' */ - description: PropTypes.string, - /** @prop Icon node to draw instead of supplying name */ - icon: PropTypes.node, - /** @prop Legacy icon name */ - name: PropTypes.string, - /** @prop Handler invoked by click of the user | null */ - onClick: PropTypes.func, - /** @prop Add margin to the right of Icon | null */ - prepend: PropTypes.bool, - /** @prop Sets Icon size | null */ - size: PropTypes.number, - // Internal prop to override iconName with size prop */ - sizeOverride: PropTypes.bool, - /** @prop Additional style properties to be applied | null */ - style: PropTypes.object, - /** @prop Sets Icon Title prop | '' */ - title: PropTypes.string, - /** @prop Sets Icon Type | '' */ - type: PropTypes.oneOf(['', 'white']), -}; - -Icon.defaultProps = { - append: false, - ariaLabel: null, - buttonClassName: '', - buttonProps: null, - color: '', - className: '', - description: '', - onClick: null, - prepend: false, - size: null, - sizeOverride: false, - style: null, - title: '', - type: '', -}; - -Icon.displayName = 'Icon'; - -export default Icon; diff --git a/src/legacy/Icon/tests/index.spec.js b/src/legacy/Icon/tests/index.spec.js deleted file mode 100644 index 80409bc33a..0000000000 --- a/src/legacy/Icon/tests/index.spec.js +++ /dev/null @@ -1,357 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { Icon } from '@momentum-ui/react-collaboration'; - -describe('Tests for ', () => { - it('should match SnapShot', () => { - const props = { - name: 'accessibility_16', - color: 'blue-50', - className: 'testClass', - }; - const container = mount(); - expect(container).toMatchSnapshot(); - }); - - describe('Test the sizes of ', () => { - it('should match SnapShot', () => { - const props = { - name: 'accessibility_16', - size: 24, - color: 'red-50', - className: 'testClass', - }; - const container = mount(); - expect(container).toMatchSnapshot(); - }); - - it('should set font-size from size attribute if specified', () => { - const props = { - name: 'accessibility_16', - size: 24, - color: 'red-50', - className: 'testClass', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.fontSize).toEqual('24px'); - }); - - it('should allow sizeOverride prop to change icon size', () => { - const props = { - name: 'arrow-up_16', - size: 24, - sizeOverride: true, - color: 'red-50', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.props().className).toEqual('md-icon icon icon-arrow-up_24'); - }); - - it('should set font-size from icon name', () => { - const props = { - name: 'accessibility_16', - className: 'testClass', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.fontSize).toEqual('16px'); - }); - - it('should set font-size to default if not specified and not in the name', () => { - const props = { - name: 'cisco-logo', - className: 'testClass', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.fontSize).toEqual('16px'); - }); - }); - - describe('Test the name prop of ', () => { - it('should be able to take the name without the "icon-" prefix', () => { - const props = { - name: 'accessibility_16', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.props().className).toEqual('md-icon icon icon-accessibility_16'); - }); - - it('should be able to take the name WITH the "icon-" prefix', () => { - const props = { - name: 'icon-accessibility_16', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.props().className).toEqual('md-icon icon icon-accessibility_16'); - }); - }); - - it('should pass the classNames onto the icon', () => { - const props = { - name: 'accessibility_16', - className: 'testClass', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.props().className).toEqual('md-icon icon icon-accessibility_16 testClass'); - }); - - it('should pass other props to the icon', () => { - const props = { - name: 'accessibility_16', - className: 'testClass', - id: 'testId', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.props().id).toEqual(props.id); - }); - - describe('Test the button ', () => { - it('should wrap in button', () => { - const props = { - name: 'accessibility_16', - onClick: () => {}, - ariaLabel: 'Accesible', - }; - - const container = mount(); - expect(container.find('.md-button').exists()).toEqual(true); - expect(container.find('.md-button--icon').exists()).toEqual(true); - }); - - it('should wrap in button and add type class', () => { - const props = { - name: 'accessibility_16', - type: 'white', - onClick: () => {}, - ariaLabel: 'Accesible', - }; - - const container = mount(); - expect(container.find('.md-button--icon-white').exists()).toEqual(true); - }); - - it('should pass other props to the button if onClick Present', () => { - const props = { - name: 'accessibility_16', - className: 'testClass', - id: 'testId', - ariaLabel: 'Testing', - onClick: () => {}, - }; - const container = mount(); - const buttonEle = container.find('button'); - expect(buttonEle.props().id).toEqual(props.id); - }); - }); - - describe('Test the colors of ', () => { - it('should match SnapShot', () => { - const props = { - name: 'accessibility_16', - }; - const container = mount(); - expect(container).toMatchSnapshot(); - }); - - it('should set fill color to default inherit when not specified by prop', () => { - const props = { - name: 'accessibility_16', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.color).toEqual(''); - }); - - it('should set fill color to rgba when color is set to white-60 (without $ sign)', () => { - const props = { - name: 'accessibility_16', - color: '$white-60', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.color).toEqual('rgba(255, 255, 255, 0.6)'); - }); - - it('should set fill color to rgba when color is set to $white-60 (with $ sign)', () => { - const props = { - name: 'accessibility_16', - color: 'white-60', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.color).toEqual('rgba(255, 255, 255, 0.6)'); - }); - - it('should set fill color to rgb(0, 160, 209) when color is set to $md-blue-50 (with $ sign)', () => { - const props = { - name: 'accessibility_16', - color: '$md-blue-50', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.color).toEqual('rgb(0, 160, 209)'); - }); - - it('should set fill color to rgb(0, 160, 209) when color is set to blue (without $ sign)', () => { - const props = { - name: 'accessibility_16', - color: 'blue-50', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.color).toEqual('rgb(0, 160, 209)'); - }); - - it('should set fill color to #00A0D1 when color is set to hex value and return a warning.', () => { - global.console = { warn: jest.fn() }; - const props = { - name: 'accessibility_16', - color: '#00A0D1', - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.color).toEqual('rgb(0, 160, 209)'); - expect(global.console.warn).toHaveBeenCalledTimes(1); - }); - - it('should log a warning when color opacity does not exist in momentum-ui', () => { - global.console = { warn: jest.fn() }; - const props = { - name: 'accessibility_16', - color: '$white-89', - }; - mount(); - expect(global.console.warn).toHaveBeenCalledTimes(1); - }); - - it('should log a warning when color variable does not exist in momentum-ui', () => { - global.console = { warn: jest.fn() }; - const props = { - name: 'accessibility_16', - color: 'not-a-color', - }; - mount(); - expect(global.console.warn).toHaveBeenCalledTimes(1); - }); - - it('should render the icon prop instead of the icon when supplied', () => { - const container = mount(} />); - expect(container.find('[data-test="test"]').exists()).toBe(true); - expect(container.find('i').exists()).toBe(false); - }); - }); - - describe('Test the accessibilty of ', () => { - const title = 'Test Title'; - const description = 'This is a test description'; - it('should match SnapShot', () => { - const props = { - name: 'accessibility_16', - title, - description, - }; - const container = mount(); - expect(container).toMatchSnapshot(); - }); - - it('should set aria-label attribute from title prop', () => { - const props = { - name: 'accessibility_16', - title, - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().attributes['aria-label'].value).toEqual(title); - }); - - it('should set title attribute from title prop', () => { - const props = { - name: 'accessibility_16', - title, - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().attributes['title'].value).toEqual(title); - }); - - it('should set title attribute from title prop on button if onclick', () => { - const props = { - name: 'accessibility_16', - title, - onClick: jest.fn(), - }; - const container = mount(); - const iEle = container.find('i'); - const bEle = container.find('button'); - expect(iEle.getDOMNode().attributes['title']).toEqual(undefined); - expect(bEle.getDOMNode().attributes['title'].value).toEqual(title); - }); - - it('should set aria-label attribute from description prop', () => { - const props = { - name: 'accessibility_16', - description, - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().attributes['aria-label'].value).toEqual(description); - }); - - it('should set aria-label attribute from title & description props', () => { - const props = { - name: 'accessibility_16', - title, - description, - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().attributes['aria-label'].value).toEqual(`${title} ${description}`); - }); - - it('should set aria-label attribute from ariaLabel prop', () => { - const props = { - name: 'accessibility_16', - ariaLabel: title, - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().attributes['aria-label'].value).toEqual(title); - }); - - it('should set aria-label attribute from aria-label prop', () => { - const props = { - name: 'accessibility_16', - 'aria-label': title, - }; - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().attributes['aria-label'].value).toEqual(title); - }); - }); - - it('should log a warning if the icon does not exist in Momentum UI Icons', () => { - global.console = { warn: jest.fn() }; - const props = { - name: 'not-an-icon_16', - }; - mount(); - expect(global.console.warn).toHaveBeenCalledTimes(1); - }); - - it('should allow other styles to be applied', () => { - const props = { - name: 'accessibility_16', - style: { display: 'none' }, - }; - - const container = mount(); - const iEle = container.find('i'); - expect(iEle.getDOMNode().style.display).toEqual('none'); - }); -}); diff --git a/src/legacy/Icon/tests/index.spec.js.snap b/src/legacy/Icon/tests/index.spec.js.snap deleted file mode 100644 index 800cc23344..0000000000 --- a/src/legacy/Icon/tests/index.spec.js.snap +++ /dev/null @@ -1,124 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Tests for Test the accessibilty of should match SnapShot 1`] = ` - - - -`; - -exports[`Tests for Test the colors of should match SnapShot 1`] = ` - - - -`; - -exports[`Tests for Test the sizes of should match SnapShot 1`] = ` - - - -`; - -exports[`Tests for should match SnapShot 1`] = ` - - - -`; diff --git a/src/legacy/Input/examples/Clear.js b/src/legacy/Input/examples/Clear.js deleted file mode 100644 index 510255e793..0000000000 --- a/src/legacy/Input/examples/Clear.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputClear() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/Dark.js b/src/legacy/Input/examples/Dark.js deleted file mode 100644 index 8936f02b80..0000000000 --- a/src/legacy/Input/examples/Dark.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputDark() { - return ( -
- -
- ); -} diff --git a/src/legacy/Input/examples/Default.js b/src/legacy/Input/examples/Default.js deleted file mode 100644 index de2de8ea19..0000000000 --- a/src/legacy/Input/examples/Default.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputDefault() { - return ( - -
- -
-
- -
- - ); -} diff --git a/src/legacy/Input/examples/Disabled.js b/src/legacy/Input/examples/Disabled.js deleted file mode 100644 index fe1a54c12b..0000000000 --- a/src/legacy/Input/examples/Disabled.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputDisabled() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/Error.js b/src/legacy/Input/examples/Error.js deleted file mode 100644 index c294923e53..0000000000 --- a/src/legacy/Input/examples/Error.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputError() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/HelpText.js b/src/legacy/Input/examples/HelpText.js deleted file mode 100644 index 1e5eb318ff..0000000000 --- a/src/legacy/Input/examples/HelpText.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputHelpText() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/KitchenSink.js b/src/legacy/Input/examples/KitchenSink.js deleted file mode 100644 index 9dd1ae70ef..0000000000 --- a/src/legacy/Input/examples/KitchenSink.js +++ /dev/null @@ -1,387 +0,0 @@ -import React from 'react'; -import { Icon, Input } from '@momentum-ui/react-collaboration'; - -export default class InputKitchenSink extends React.PureComponent { - render() { - const inputs = (value) => ( - - - - - - - - - - - - - - - - - - - } - /> - } - /> - } - disabled - /> - } - clear - /> - - - - - - - - - - - - - - } - /> - } - /> - } - clear - /> - - - - - ); - return ( - <> -
- {inputs(1)} -
-
- {inputs(2)} -
-
-
- {inputs(3)} -
-
- {inputs(4)} -
-
- - ); - } -} diff --git a/src/legacy/Input/examples/KitchenSink.stories.tsx b/src/legacy/Input/examples/KitchenSink.stories.tsx deleted file mode 100644 index 45dafb6dfa..0000000000 --- a/src/legacy/Input/examples/KitchenSink.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import LegacyKitchenSink from './KitchenSink'; -import React from 'react'; - -export default { - title: 'Legacy/Input', - component: LegacyKitchenSink, -}; - -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -const Legacy = () => ; - -export { Legacy }; diff --git a/src/legacy/Input/examples/Nested.js b/src/legacy/Input/examples/Nested.js deleted file mode 100644 index edad117ac3..0000000000 --- a/src/legacy/Input/examples/Nested.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputNested() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/ReadOnly.js b/src/legacy/Input/examples/ReadOnly.js deleted file mode 100644 index da650713a7..0000000000 --- a/src/legacy/Input/examples/ReadOnly.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputReadonly() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/SecondaryLabel.js b/src/legacy/Input/examples/SecondaryLabel.js deleted file mode 100644 index e581de1123..0000000000 --- a/src/legacy/Input/examples/SecondaryLabel.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputSecondary() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/Success.js b/src/legacy/Input/examples/Success.js deleted file mode 100644 index d155fe754f..0000000000 --- a/src/legacy/Input/examples/Success.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputSuccess() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/TextArea.js b/src/legacy/Input/examples/TextArea.js deleted file mode 100644 index 6b656d5be0..0000000000 --- a/src/legacy/Input/examples/TextArea.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputTextArea() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/Validation.js b/src/legacy/Input/examples/Validation.js deleted file mode 100644 index 4729e3b66d..0000000000 --- a/src/legacy/Input/examples/Validation.js +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default class InputValidation extends React.PureComponent { - state = { - testMe: '', - testMeError: [], - }; - - handleChange = (e) => { - this.setState({ - testMe: e.target.value, - }); - }; - - handleSubmit = (event) => { - event && event.preventDefault(); - this.validateField('testMe', this.state.testMe); - }; - - addElement = (array, element) => { - return array.includes(element) ? [...array] : [...array, element]; - }; - - removeElement = (array, element) => { - return array.filter((ele) => ele !== element); - }; - - createErrorArr = (validationArr, value) => { - return validationArr.reduce( - (agg, e) => (value.match(e.test) ? this.removeElement(agg, e) : this.addElement(agg, e)), - [] - ); - }; - - validateField = (fieldName, value, cb) => { - const rules = { - testMe: { - validation: [ - { - message: 'Preferred if TestMe Field is 8 characters', - test: '^[a-zA-Z]{8,}$', - type: 'warning', - }, - { - message: 'TestMe Field is too short', - test: '^[a-zA-Z]{6,}$', - type: 'error', - }, - { - message: 'TestMe Field must contain Caps', - test: '[A-Z]', - type: 'error', - }, - { - message: 'Preferred if TestMe Field has 2 caps', - test: '[A-Z]{2}', - type: 'warning', - }, - ], - errors: this.state.testMeError, - }, - }; - - return this.setState( - { - [`${fieldName}Error`]: this.createErrorArr(rules[fieldName].validation, value), - }, - cb - ); - }; - - render() { - return ( -
- -
- ); - } -} diff --git a/src/legacy/Input/examples/Warning.js b/src/legacy/Input/examples/Warning.js deleted file mode 100644 index 5eba13e1c3..0000000000 --- a/src/legacy/Input/examples/Warning.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { Input } from '@momentum-ui/react-collaboration'; - -export default function InputWarning() { - return ( - - ); -} diff --git a/src/legacy/Input/examples/index.js b/src/legacy/Input/examples/index.js deleted file mode 100644 index 86c2387c6e..0000000000 --- a/src/legacy/Input/examples/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export { default as InputClear } from './Clear'; -export { default as InputDark } from './Dark'; -export { default as InputDefault } from './Default'; -export { default as InputDisabled } from './Disabled'; -export { default as InputError } from './Error'; -export { default as InputHelpText } from './HelpText'; -export { default as InputNested } from './Nested'; -export { default as InputReadOnly } from './ReadOnly'; -export { default as InputSecondaryLabel } from './SecondaryLabel'; -export { default as InputSuccess } from './Success'; -export { default as InputTextArea } from './TextArea'; -export { default as InputValidation } from './Validation'; -export { default as InputWarning } from './Warning'; -export { default as InputKitchenSink } from './KitchenSink'; diff --git a/src/legacy/Input/index.js b/src/legacy/Input/index.js deleted file mode 100644 index 7d67cde2e7..0000000000 --- a/src/legacy/Input/index.js +++ /dev/null @@ -1,364 +0,0 @@ -/** @component input */ - -import React from 'react'; -import PropTypes from 'prop-types'; -import omit from 'lodash/omit'; -import toLower from 'lodash/toLower'; -import { Icon } from '@momentum-ui/react-collaboration'; -import InputHelper from '../InputHelper'; -import InputMessage from '../InputMessage'; -import InputSection from '../InputSection'; -import Label from '../Label'; -import IconNext from '../../components/Icon'; - -const determineMessageType = (array) => { - return array.reduce((agg, e) => { - return agg === 'error' ? agg : e.type || ''; - }, ''); -}; - -const filterMessagesByType = (array, value) => { - return array.reduce((agg, e) => (e.type === value ? agg.concat(e.message) : agg), []); -}; - -/** Text input with integrated label to enforce consistency in layout, error display, label placement, and required field marker. */ -/** - * @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 Input extends React.Component { - state = { - isEditing: false, - value: this.props.value || this.props.defaultValue, - }; - - componentDidUpdate(prevProps) { - const { value } = this.props; - - value !== prevProps.value && this.setValue(value); - } - - setValue = (value) => { - this.setState({ - value, - }); - }; - - handleKeyDown = (e) => { - const { onKeyDown } = this.props; - - onKeyDown && onKeyDown(e); - }; - - handleFocus = (e) => { - const { onFocus, disabled } = this.props; - - if (disabled) { - e.stopPropagation(); - return; - } - - if (onFocus) { - onFocus(e); - } - this.setState({ - isEditing: true, - }); - }; - - handleMouseDown = (e) => { - const { onMouseDown, disabled } = this.props; - - if (disabled) { - e.stopPropagation(); - return; - } - - if (onMouseDown) { - onMouseDown(e); - } - this.setState({ - isEditing: true, - }); - }; - - handleChange = (e) => { - const { onChange } = this.props; - const value = e.target.value; - e.persist(); - this.setState(() => { - onChange && onChange(e); - return { value }; - }); - }; - - handleBlur = (e) => { - const { onDoneEditing } = this.props; - const value = e.target.value; - - if (e.which === 27 || e.which === 13 || e.type === 'blur') { - this.setState({ isEditing: false }, () => onDoneEditing && onDoneEditing(e, value)); - } - e.stopPropagation(); - }; - - handleClear = (e) => { - const value = ''; - e.target.value = value; - e.persist(); - this.input.focus(); - this.handleChange(e); - }; - - setInputRef = (input) => { - const { clear, inputRef } = this.props; - if (clear) this.input = input; - if (inputRef) return inputRef(input); - }; - - render() { - const { - ariaDescribedBy, - ariaLabel, - className, - clear, - clearAriaLabel, - containerSize, - disabled, - messageArr, - htmlId, - id, - inputClassName, - helpText, - inputSize, - label, - multiline, - nestedLevel, - placeholder, - readOnly, - secondaryLabel, - shape, - type, - ...props - } = this.props; - - delete props.isFilled; - - const { isEditing, value } = this.state; - - const otherProps = omit({ ...props }, [ - 'defaultValue', - 'inputAfter', - 'inputBefore', - 'inputRef', - 'onChange', - 'onDoneEditing', - 'onFocus', - 'onKeyDown', - 'onMouseDown', - 'ref', - 'value', - ]); - - const messageType = (messageArr.length > 0 && determineMessageType(messageArr)) || ''; - const messages = (messageType && filterMessagesByType(messageArr, messageType)) || null; - - const clearButton = clear && !disabled && value && ( - - } - /> - - ); - - const inputSection = (position) => - this.props[`input${position}`] && ( - {this.props[`input${position}`]} - ); - - const inputLeft = inputSection('Before'); - const inputRight = clearButton || inputSection('After'); - - const InputTag = multiline ? 'textarea' : 'input'; - - const inputElement = ( -
- {inputLeft} - - {inputRight} -
- ); - - return ( -
- {label &&
- ); - } -} - -Input.propTypes = { - /** @prop ID to reference for blindness accessibility feature | null */ - ariaDescribedBy: PropTypes.string, - /** @prop Text to display for blindness accessibility features | null */ - ariaLabel: PropTypes.string, - /** @prop Optional css class name | '' */ - className: PropTypes.string, - /** @prop Clears Input values | false */ - clear: PropTypes.bool, - /** @prop Optional aria label on the clear button | null */ - clearAriaLabel: PropTypes.string, - /** @prop Overall input container size | '' */ - containerSize: PropTypes.string, - /** @prop Default Value same as value but used when onChange isn't invoked | '' */ - defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /*** @prop Sets the disabled attribute of the Input | false */ - disabled: PropTypes.bool, - /** @prop Array of Objects with message and type [{error: '', type: 'error, success, warning'}] to display error message and assign class | [] */ - messageArr: PropTypes.array, - /** @prop Unique HTML ID used for tying label to HTML input for automated testing | null */ - htmlId: PropTypes.string, - /** Optional Icon node that overrides right section of input | null */ - inputAfter: PropTypes.node, - /** Optional Icon node that overrides left section of input | null */ - inputBefore: PropTypes.node, - /** Unique HTML ID used for tying label to HTML input | null */ - id: PropTypes.string, - /** @prop Input css class name string | '' */ - inputClassName: PropTypes.string, - /** @prop Help Text to show form validation rules | '' */ - helpText: PropTypes.string, - /*** @prop Optional Input ref prop type | null */ - inputRef: PropTypes.func, - /** @prop Overall input wrapper size | '' */ - inputSize: PropTypes.string, - /*** @prop Applies the filled attribute of the Input | false */ - isFilled: PropTypes.bool, - /** @prop Input label text | '' */ - label: PropTypes.string, - /** @prop Input is multiline(textarea) | false */ - multiline: PropTypes.bool, - /*** @prop Optional Input name prop type | null */ - name: PropTypes.string, - /** @prop Set the level of nested Input components | 0 */ - nestedLevel: PropTypes.number, - /** @prop Callback function invoked when user types into the Input field | null */ - onChange: PropTypes.func, - /*** @prop Callback function invoked when user is done editing Input field | null */ - onDoneEditing: PropTypes.func, - /*** @prop Callback function invoked when user focuses on the Input field | null */ - onFocus: PropTypes.func, - /*** @prop Callback function invoked when user presses any key | null */ - onKeyDown: PropTypes.func, - /*** @prop Callback function invoked when user clicks on the mouse/trackpad | null */ - onMouseDown: PropTypes.func, - /** @prop Placeholder text to display when Input is empty | '' */ - placeholder: PropTypes.string, - /*** @prop Determines if Input can be edited | false */ - readOnly: PropTypes.bool, - /** @prop Secondary Input label | '' */ - secondaryLabel: PropTypes.string, - /** @prop Input shape property | '' */ - shape: PropTypes.string, - /** @prop Input type | 'text' */ - type: PropTypes.oneOf(['text', 'number', 'password', 'email']), - /** @prop Input value | '' */ - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), -}; - -Input.defaultProps = { - ariaDescribedBy: null, - ariaLabel: null, - className: '', - clear: false, - clearAriaLabel: null, - containerSize: '', - defaultValue: '', - disabled: false, - messageArr: [], - htmlId: null, - inputAfter: null, - inputBefore: null, - id: null, - inputClassName: '', - helpText: '', - inputRef: null, - inputSize: '', - isFilled: false, - label: '', - multiline: false, - name: null, - nestedLevel: 0, - onChange: null, - onDoneEditing: null, - onFocus: null, - onKeyDown: null, - onMouseDown: null, - placeholder: '', - readOnly: false, - secondaryLabel: '', - shape: '', - type: 'text', - value: '', -}; - -Input.displayName = 'Input'; - -export default Input; diff --git a/src/legacy/Input/tests/index.spec.js b/src/legacy/Input/tests/index.spec.js deleted file mode 100644 index d7b40b2375..0000000000 --- a/src/legacy/Input/tests/index.spec.js +++ /dev/null @@ -1,474 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import { act } from 'react-dom/test-utils'; - -import { Icon, Input } from '@momentum-ui/react-collaboration'; -import Label from '../../Label'; -import InputHelper from '../../InputHelper'; - -describe('tests for ', () => { - it('should match text SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should change tag based on multiline prop', () => { - const container = shallow(); - - expect(container.find('textarea').length).toEqual(1); - }); - - it('should match number SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should match password SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should match aria SnapShot', () => { - const container = mount( - - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match clear SnapShot', () => { - const container = mount(); - - expect(container).toMatchSnapshot(); - }); - - it('should render one Input', () => { - const container = shallow(); - - expect(container.find('input').length).toEqual(1); - }); - - it('should render one Input and apply dirty class', () => { - const container = shallow(); - - expect(container.find('.md-dirty').length).toEqual(1); - }); - - it('should render Label', () => { - const container = shallow(); - - expect(container.find('.md-input__label').exists()).toEqual(true); - }); - - it('should pass class based on containerSize prop', () => { - const container = shallow( - - ); - - expect(container.find('.md-input-container').hasClass('medium-12')).toEqual(true); - expect(container.find('.md-input-container').hasClass('columns')).toEqual(true); - }); - - it('should pass class based on inputSize prop', () => { - const container = shallow( - - ); - - expect(container.find('.md-input__wrapper').hasClass('medium-12')).toEqual(true); - expect(container.find('.md-input__wrapper').hasClass('columns')).toEqual(true); - }); - - it('should pass placeholder attribute', () => { - const container = shallow( - - ); - - expect(container.find('input').props().placeholder).toEqual('test'); - }); - - it('should pass className prop', () => { - const container = shallow(); - - expect(container.find('.md-input-container').hasClass('test')).toEqual(true); - }); - - it('should pass inputClassName prop', () => { - const container = shallow( - - ); - - expect(container.find('input').hasClass('test')).toEqual(true); - }); - - it('should pass isFilled prop', () => { - const container = shallow(); - - // Filled is deprecated - - expect(container.find('.md-input-container').hasClass('md-input--filled')).toEqual(false); - }); - - it('should pass shape prop', () => { - const container = shallow(); - - expect(container.find('input').hasClass('md-input--pill')).toEqual(true); - }); - - it('should pass disabled attribute', () => { - const container = shallow(); - - expect(container.find('input').props().disabled).toEqual(true); - }); - - it('should pass readOnly attribute', () => { - const container = shallow(); - - expect(container.find('input').props().readOnly).toEqual(true); - }); - - it('should pass value attribute', () => { - const container = shallow(); - - expect(container.find('input').props().value).toEqual('testing'); - }); - - it('should update value attribute', () => { - const container = mount(); - - container.setProps({ value: 'testing' }); - container.update(); - expect(container.find('input').props().value).toEqual('testing'); - }); - - it('should pass class based on nesting', () => { - const container = shallow(); - - expect(container.hasClass('md-input--nested-1')).toEqual(true); - }); - - it('should render Secondary Container and Label', () => { - const container = shallow( - - ); - - expect( - container.contains( -