refactor: extracting annotations inside modal styles

mfranzke · Jan 19, 2022 · 5effb4f · 5effb4f
1 parent 2f7df7e
commit 5effb4f
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 75 deletions.
diff --git a/...ars-demo/dist/css/pattern-scaffolding.css → ...rs-demo/dist/css/pattern-scaffolding.scss b/...ars-demo/dist/css/pattern-scaffolding.css → ...rs-demo/dist/css/pattern-scaffolding.scss
@@ -273,3 +273,7 @@
 .sg-pattern .c-promo-block {
 	margin: 0;
 }
+
+// Annotations
+@import "../../../uikit-workshop/src/sass/scss/01-abstracts/variables";
+@import "../../../uikit-workshop/src/sass/scss/04-components/annotations";
diff --git a/packages/starterkit-handlebars-demo/package.json b/packages/starterkit-handlebars-demo/package.json
@@ -23,7 +23,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "cd dist/css && sass style.scss style.css"
+    "build": "cd dist/css && sass style.scss:style.css pattern-scaffolding.scss:pattern-scaffolding.css"
   },
   "engines": {
     "node": ">=12.13.1"

diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss
@@ -46,6 +46,7 @@
 @import '../scripts/components/pl-nav/pl-nav.scss';
 @import '../scripts/components/pl-search/pl-search.scss';
 @import 'scss/04-components/annotations';
+@import 'scss/04-components/annotations-inside-modal';
 @import 'scss/04-components/breadcrumbs';
 @import 'scss/04-components/pattern-category';
 @import 'scss/04-components/pattern-info';

diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss
@@ -0,0 +1,75 @@
+@charset "UTF-8";
+
+/*------------------------------------*\
+    #ANNOTATIONS INSIDE MODAL
+\*------------------------------------*/
+
+/**
+ * Annotations area
+ * 1) Appears inside of modal
+ */
+.pl-c-annotations {
+  margin: 1rem 0;
+}
+
+/**
+ * Annotations Title
+ * Says the word "Annotations"
+ */
+.pl-c-annotations__title {
+  font-size: 1.2rem !important;
+  margin: 0 0 0.5rem;
+}
+
+/**
+ * Annotations list
+ * 1) Ordered list of annotations
+ * 2) Presented with parent selector to force styles
+ *    over pl-c-text-passage
+ */
+.pl-c-annotations .pl-c-annotations__list {
+  counter-reset: the-count;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/**
+ * Annotations list item
+ * 1) Displays each item as a number
+ */
+.pl-c-annotations__item {
+  position: relative;
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+  border-radius: $pl-border-radius-med;
+  transition: background-color $pl-animate-quick ease;
+
+  &:before {
+    content: counter(the-count);
+    counter-increment: the-count;
+    font-size: 85%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    padding: 2px;
+    text-align: center;
+    background-color: $pl-color-gray-50;
+    color: $pl-color-white;
+    position: absolute;
+    top: 4px;
+    left: 0;
+  }
+
+  &.pl-is-active {
+    outline: 1px dotted $pl-color-gray-50;
+    outline-offset: -1px;
+  }
+}
+
+.pl-c-annotations .pl-c-annotations__item-title {
+  margin-bottom: 0;
+}
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/annotations.scss b/packages/uikit-workshop/src/sass/scss/04-components/annotations.scss
@@ -53,77 +53,3 @@
   position: absolute;
   z-index: 100;
 }
-
-/*------------------------------------*\
-    #ANNOTATIONS INSIDE MODAL
-\*------------------------------------*/
-
-/**
- * Annotations area
- * 1) Appears inside of modal
- */
-.pl-c-annotations {
-  margin: 1rem 0;
-}
-
-/**
- * Annotations Title
- * Says the word "Annotations"
- */
-.pl-c-annotations__title {
-  font-size: 1.2rem !important;
-  margin: 0 0 0.5rem;
-}
-
-/**
- * Annotations list
- * 1) Ordered list of annotations
- * 2) Presented with parent selector to force styles
- *    over pl-c-text-passage
- */
-.pl-c-annotations .pl-c-annotations__list {
-  counter-reset: the-count;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-/**
- * Annotations list item
- * 1) Displays each item as a number
- */
-.pl-c-annotations__item {
-  position: relative;
-  padding-left: 1.5rem;
-  margin-bottom: 1rem;
-  border-radius: $pl-border-radius-med;
-  transition: background-color $pl-animate-quick ease;
-
-  &:before {
-    content: counter(the-count);
-    counter-increment: the-count;
-    font-size: 85%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    padding: 2px;
-    text-align: center;
-    background-color: $pl-color-gray-50;
-    color: $pl-color-white;
-    position: absolute;
-    top: 4px;
-    left: 0;
-  }
-
-  &.pl-is-active {
-    outline: 1px dotted $pl-color-gray-50;
-    outline-offset: -1px;
-  }
-}
-
-.pl-c-annotations .pl-c-annotations__item-title {
-  margin-bottom: 0;
-}