From 6e1726e4a062060b02ca84fbd8a1077185558486 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 1 Feb 2024 10:35:32 +0100 Subject: [PATCH] MOBILE-4502 icons: Add fontawesome styles and treat all tags as icons --- src/core/directives/format-text.ts | 2 +- .../course/tests/behat/communication.feature | 3 +- src/core/singletons/icons.ts | 28 +- src/core/tests/behat/fontawesome.feature | 21 + ...pp-view-fontawesome-icons-in-the-app_7.png | Bin 0 -> 12977 bytes src/theme/components/ion-icon.scss | 685 ++++++++++++++++++ src/theme/theme.base.scss | 28 - src/theme/theme.scss | 1 + 8 files changed, 724 insertions(+), 44 deletions(-) create mode 100644 src/core/tests/behat/fontawesome.feature create mode 100644 src/core/tests/behat/snapshots/fontawesome-icons-are-correctly-shown-in-the-app-view-fontawesome-icons-in-the-app_7.png create mode 100644 src/theme/components/ion-icon.scss diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts index 0baf46f0185..80355890d3e 100644 --- a/src/core/directives/format-text.ts +++ b/src/core/directives/format-text.ts @@ -465,7 +465,6 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec const videos = Array.from(div.querySelectorAll('video')); const iframes = Array.from(div.querySelectorAll('iframe')); const buttons = Array.from(div.querySelectorAll('.button')); - const icons = Array.from(div.querySelectorAll('i.fa,i.fas,i.far,i.fab')); const elementsWithInlineStyles = Array.from(div.querySelectorAll('*[style]')); const stopClicksElements = Array.from(div.querySelectorAll('button,input,select,textarea')); const frames = Array.from( @@ -546,6 +545,7 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec }); // Handle Font Awesome icons to be rendered by the app. + const icons = Array.from(div.querySelectorAll('.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands')); icons.forEach((icon) => { CoreIcons.replaceCSSIcon(icon); }); diff --git a/src/core/features/course/tests/behat/communication.feature b/src/core/features/course/tests/behat/communication.feature index cbfe8c954ba..4f7c6e1a4b1 100644 --- a/src/core/features/course/tests/behat/communication.feature +++ b/src/core/features/course/tests/behat/communication.feature @@ -2,7 +2,8 @@ Feature: Use custom communication link in course Background: - Given the following "users" exist: + Given the Moodle site is compatible with this feature + And the following "users" exist: | username | firstname | lastname | email | | teacher1 | Teacher | 1 | teacher1@example.com | | student1 | Student | 1 | student1@example.com | diff --git a/src/core/singletons/icons.ts b/src/core/singletons/icons.ts index 20860b0c4d4..2a49c7c2811 100644 --- a/src/core/singletons/icons.ts +++ b/src/core/singletons/icons.ts @@ -112,9 +112,20 @@ export class CoreIcons { return; } - const firstPart = faPart[1].split('-')[0]; + const afterFa = faPart[1]; - switch (firstPart) { + const specialClasses = ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', 'fw', 'sharp', 'rotate', + '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x', + 'flip-horizontal', 'flip-vertical', 'flip-both', 'spin', 'pulse', 'inverse', + 'border', 'pull-left', 'pull-right', 'fixed-width', 'list-item', 'bordered', 'spinning', + 'stack', 'stack-1x', 'stack-2x', 'inverse', 'sr-only', 'sr-only-focusable', 'border']; + + // Class is defining special cases. + if (afterFa && specialClasses.includes(afterFa)) { + return; + } + + switch (afterFa) { // Class is defining library. case 'solid': library = 'solid'; @@ -126,20 +137,9 @@ export class CoreIcons { case 'brands': library = 'brands'; break; - // Class is defining special cases. - case '2xs': - case 'xs': - case 'sm': - case 'lg': - case 'xl': - case '2xl': - case 'fw': - case 'sharp': - case 'rotate': - return; // Class is defining the icon name (fa-ICONNAME). default: - iconName = faPart[1]; + iconName = afterFa; break; } }); diff --git a/src/core/tests/behat/fontawesome.feature b/src/core/tests/behat/fontawesome.feature new file mode 100644 index 00000000000..1be41da6eb3 --- /dev/null +++ b/src/core/tests/behat/fontawesome.feature @@ -0,0 +1,21 @@ +@core @app @javascript +Feature: Fontawesome icons are correctly shown in the app + + Background: + Given the Moodle site is compatible with this feature + And the following "users" exist: + | username | + | student1 | + And the following "courses" exist: + | fullname | shortname | + | Course 1 | C1 | + And the following "course enrolments" exist: + | user | course | role | + | student1 | C1 | student | + And the following "activities" exist: + | activity | idnumber | course | name | intro | printlastmodified | content | + | page | page | C1 | Page | - | false | | + + Scenario: View fontawesome icons in the app + Given I entered the page activity "Page" on course "Course 1" as "student1" in the app + Then the UI should match the snapshot diff --git a/src/core/tests/behat/snapshots/fontawesome-icons-are-correctly-shown-in-the-app-view-fontawesome-icons-in-the-app_7.png b/src/core/tests/behat/snapshots/fontawesome-icons-are-correctly-shown-in-the-app-view-fontawesome-icons-in-the-app_7.png new file mode 100644 index 0000000000000000000000000000000000000000..cb5a0fbb2d4bf6962d34b39fc763939d325080e4 GIT binary patch literal 12977 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 s=O6U^gP#A{Zv^~PGynf;W=-li { + position: relative; + } + + &.fa-li { + left: calc(var(--fa-li-width, 2em) * -1); + position: absolute; + text-align: center; + width: var(--fa-li-width, 2em); + line-height: inherit; + } + + &.fa-border { + border-color: var(--fa-border-color, #eee); + border-radius: var(--fa-border-radius, 0.1em); + border-style: var(--fa-border-style, solid); + border-width: var(--fa-border-width, 0.08em); + padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); + } + + &.fa-pull-left { + float: left; + margin-right: var(--fa-pull-margin, 0.3em); + } + + &.fa-pull-right { + float: right; + margin-left: var(--fa-pull-margin, 0.3em); + } + + &.fa-beat { + -webkit-animation-name: fa-beat; + animation-name: fa-beat; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out); + animation-timing-function: var(--fa-animation-timing, ease-in-out); + } + + &.fa-bounce { + -webkit-animation-name: fa-bounce; + animation-name: fa-bounce; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); + animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); + } + + &.fa-fade { + -webkit-animation-name: fa-fade; + animation-name: fa-fade; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + } + + &.fa-beat-fade { + -webkit-animation-name: fa-beat-fade; + animation-name: fa-beat-fade; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); + } + + &.fa-flip { + -webkit-animation-name: fa-flip; + animation-name: fa-flip; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out); + animation-timing-function: var(--fa-animation-timing, ease-in-out); + } + + &.fa-shake { + -webkit-animation-name: fa-shake; + animation-name: fa-shake; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, linear); + animation-timing-function: var(--fa-animation-timing, linear); + } + + &.fa-spin { + -webkit-animation-name: fa-spin; + animation-name: fa-spin; + -webkit-animation-delay: var(--fa-animation-delay, 0s); + animation-delay: var(--fa-animation-delay, 0s); + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 2s); + animation-duration: var(--fa-animation-duration, 2s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, linear); + animation-timing-function: var(--fa-animation-timing, linear); + } + + &.fa-spin-reverse { + --fa-animation-direction: reverse; + } + + &.fa-pulse, + &.fa-spin-pulse { + -webkit-animation-name: fa-spin; + animation-name: fa-spin; + -webkit-animation-direction: var(--fa-animation-direction, normal); + animation-direction: var(--fa-animation-direction, normal); + -webkit-animation-duration: var(--fa-animation-duration, 1s); + animation-duration: var(--fa-animation-duration, 1s); + -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); + animation-iteration-count: var(--fa-animation-iteration-count, infinite); + -webkit-animation-timing-function: var(--fa-animation-timing, steps(8)); + animation-timing-function: var(--fa-animation-timing, steps(8)); + } + + @media (prefers-reduced-motion: reduce) { + &.fa-beat, + &.fa-bounce, + &.fa-fade, + &.fa-beat-fade, + &.fa-flip, + &.fa-pulse, + &.fa-shake, + &.fa-spin, + &.fa-spin-pulse { + -webkit-animation-delay: -1ms; + animation-delay: -1ms; + -webkit-animation-duration: 1ms; + animation-duration: 1ms; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-transition-delay: 0s; + transition-delay: 0s; + -webkit-transition-duration: 0s; + transition-duration: 0s; + } + } + + @-webkit-keyframes fa-beat { + 0%, + 90% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 45% { + -webkit-transform: scale(var(--fa-beat-scale, 1.25)); + transform: scale(var(--fa-beat-scale, 1.25)); + } + } + + @keyframes fa-beat { + 0%, + 90% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 45% { + -webkit-transform: scale(var(--fa-beat-scale, 1.25)); + transform: scale(var(--fa-beat-scale, 1.25)); + } + } + + @-webkit-keyframes fa-bounce { + 0% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 10% { + -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); + transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); + } + + 30% { + -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); + transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); + } + + 50% { + -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); + transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); + } + + 57% { + -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + } + + 64% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 100% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + } + + @keyframes fa-bounce { + 0% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 10% { + -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); + transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); + } + + 30% { + -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); + transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); + } + + 50% { + -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); + transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); + } + + 57% { + -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); + } + + 64% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + + 100% { + -webkit-transform: scale(1, 1) translateY(0); + transform: scale(1, 1) translateY(0); + } + } + + @-webkit-keyframes fa-fade { + 50% { + opacity: var(--fa-fade-opacity, 0.4); + } + } + + @keyframes fa-fade { + 50% { + opacity: var(--fa-fade-opacity, 0.4); + } + } + + @-webkit-keyframes fa-beat-fade { + 0%, + 100% { + opacity: var(--fa-beat-fade-opacity, 0.4); + -webkit-transform: scale(1); + transform: scale(1); + } + + 50% { + opacity: 1; + -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125)); + transform: scale(var(--fa-beat-fade-scale, 1.125)); + } + } + + @keyframes fa-beat-fade { + 0%, + 100% { + opacity: var(--fa-beat-fade-opacity, 0.4); + -webkit-transform: scale(1); + transform: scale(1); + } + + 50% { + opacity: 1; + -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125)); + transform: scale(var(--fa-beat-fade-scale, 1.125)); + } + } + + @-webkit-keyframes fa-flip { + 50% { + -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); + transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); + } + } + + @keyframes fa-flip { + 50% { + -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); + transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); + } + } + + @-webkit-keyframes fa-shake { + 0% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 4% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + 8%, + 24% { + -webkit-transform: rotate(-18deg); + transform: rotate(-18deg); + } + + 12%, + 28% { + -webkit-transform: rotate(18deg); + transform: rotate(18deg); + } + + 16% { + -webkit-transform: rotate(-22deg); + transform: rotate(-22deg); + } + + 20% { + -webkit-transform: rotate(22deg); + transform: rotate(22deg); + } + + 32% { + -webkit-transform: rotate(-12deg); + transform: rotate(-12deg); + } + + 36% { + -webkit-transform: rotate(12deg); + transform: rotate(12deg); + } + + 40%, + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + } + + @keyframes fa-shake { + 0% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + + 4% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + + 8%, + 24% { + -webkit-transform: rotate(-18deg); + transform: rotate(-18deg); + } + + 12%, + 28% { + -webkit-transform: rotate(18deg); + transform: rotate(18deg); + } + + 16% { + -webkit-transform: rotate(-22deg); + transform: rotate(-22deg); + } + + 20% { + -webkit-transform: rotate(22deg); + transform: rotate(22deg); + } + + 32% { + -webkit-transform: rotate(-12deg); + transform: rotate(-12deg); + } + + 36% { + -webkit-transform: rotate(12deg); + transform: rotate(12deg); + } + + 40%, + 100% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + } + + @-webkit-keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + @keyframes fa-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + &.fa-rotate-90 { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + + &.fa-rotate-180 { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } + + &.fa-rotate-270 { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } + + &.fa-flip-horizontal { + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); + } + + &.fa-flip-vertical { + -webkit-transform: scale(1, -1); + transform: scale(1, -1); + } + + &.fa-flip-both, + &.fa-flip-horizontal.fa-flip-vertical { + -webkit-transform: scale(-1, -1); + transform: scale(-1, -1); + } + + &.fa-rotate-by { + -webkit-transform: rotate(var(--fa-rotate-angle, none)); + transform: rotate(var(--fa-rotate-angle, none)); + } + + &.fa-stack { + display: inline-block; + height: 2em; + line-height: 2em; + position: relative; + vertical-align: middle; + width: 2.5em; + } + + &.fa-stack-1x, + &.fa-stack-2x { + left: 0; + position: absolute; + text-align: center; + width: 100%; + z-index: var(--fa-stack-z-index, auto); + } + + &.fa-stack-1x { + line-height: inherit; + } + + &.fa-stack-2x { + font-size: 2em; + } + + &.fa-inverse { + color: var(--fa-inverse, #fff); + } + + &.sr-only, + &.fa-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } + + &.sr-only-focusable:not(:focus), + &.fa-sr-only-focusable:not(:focus) { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } +} diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index a1543e5b221..6dfd9ac36b6 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -258,34 +258,6 @@ ion-footer { } } -// Ionic icon. -ion-icon { - position: relative; - - &.icon-slash::after, - &.icon-backslash::after { - content: " "; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: var(--danger); - -webkit-mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; - mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; - } - - &.icon-slash::after { - -webkit-transform: scale(-1, 1); - transform: scale(-1, 1); - } - - &.fa-fw { - text-align: center; - width: 1.25em; - } -} - // Buttons. ion-button, ion-fab-button, diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 8ef6caa86e7..34177698918 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -25,6 +25,7 @@ @import "components/format-text.scss"; @import "components/rubrics.scss"; @import "components/mod-label.scss"; +@import "components/ion-icon.scss"; @import "../core/components/error-info/error-info.scss"; @import "components/videojs.scss";