From 5d8b4d0512a7f56b8896a262218ecfae31caf754 Mon Sep 17 00:00:00 2001 From: Brooke Date: Tue, 4 Oct 2022 12:11:51 -0700 Subject: [PATCH 1/4] TCA-438 #comment This commit does a first pass to get the check icon appearing in the right place. But it's the wrong size now. #time 1.5h --- .../learn-lib/course-outline/step-icon/StepIcon.module.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss index 1b331837e..1ab1c709c 100755 --- a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss +++ b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss @@ -6,6 +6,7 @@ color: $black-20; .icon { + @include icon-xl; border-radius: 50%; flex: 0 0 auto; @@ -21,6 +22,8 @@ background: $black-40; > svg { + height: 100%; + width: 100%; margin: -1 * $border; } } @@ -43,4 +46,4 @@ background: $tc-white; } } -} \ No newline at end of file +} From 149995fe6899b6f6a5de28b3c3e6297baac547ba Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Tue, 4 Oct 2022 22:20:12 +0300 Subject: [PATCH 2/4] TCA-438 - update status icon size for course outline --- .../course-outline/status-icon/StatusIcon.module.scss | 6 +++++- .../learn/learn-lib/course-outline/step-icon/StepIcon.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss index e22b9512b..b69b6b9e4 100755 --- a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss +++ b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss @@ -3,4 +3,8 @@ .checkmark { @include icon-size(26); flex: 0 0 auto; -} \ No newline at end of file + svg { + width: 100%; + height: 100%; + } +} diff --git a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx index 78c8ac9b8..b5fd8b2a5 100755 --- a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx +++ b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx @@ -24,7 +24,7 @@ const StepIcon: FC = (props: StepIconProps) => { return ( <> {props.label && props.completed && ( - + )} {!props.label && ( From e9a80e359f009d8ceb5a053873dc0573cd8cf761 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Tue, 4 Oct 2022 22:29:00 +0300 Subject: [PATCH 3/4] update README - svg icons --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index f3d7134a8..340e58034 100644 --- a/README.md +++ b/README.md @@ -509,3 +509,5 @@ e.g.: } } ``` + +>**NOTE** - all SVGs require explicit `width` and `height` in the Safari browser in order to be rendered properly, otherwise they'll be rendered to the _default_ size and probably will crop out of view From f6536d4c812e1651e012c850b5cc9288e73b6f21 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Tue, 4 Oct 2022 22:38:09 +0300 Subject: [PATCH 4/4] add mixin for full size (100%) icon --- src-ts/lib/styles/mixins/_icons.mixins.scss | 5 +++++ .../course-outline/status-icon/StatusIcon.module.scss | 3 +-- .../learn-lib/course-outline/step-icon/StepIcon.module.scss | 3 +-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src-ts/lib/styles/mixins/_icons.mixins.scss b/src-ts/lib/styles/mixins/_icons.mixins.scss index 30080f592..bebd7d98d 100644 --- a/src-ts/lib/styles/mixins/_icons.mixins.scss +++ b/src-ts/lib/styles/mixins/_icons.mixins.scss @@ -40,6 +40,11 @@ width: $space-mxx; } +@mixin icon-full { + height: 100%; + width: 100%; +} + @mixin icon-size($size) { height: $size * 1px; width: $size * 1px; diff --git a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss index b69b6b9e4..72f6bc564 100755 --- a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss +++ b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss @@ -4,7 +4,6 @@ @include icon-size(26); flex: 0 0 auto; svg { - width: 100%; - height: 100%; + @include icon-full; } } diff --git a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss index 1ab1c709c..98272f548 100755 --- a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss +++ b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss @@ -22,8 +22,7 @@ background: $black-40; > svg { - height: 100%; - width: 100%; + @include icon-full; margin: -1 * $border; } }