style custom paragraphs on webview

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* Create files for custom paragraphs for `webview`
 * Style `horizontal rule for vertically-tight tables` in `nursing-external`
 * Style `multipart questions` in `bca`
 * Style `safetey-alert title color` in `nursing-internal`

styles/books/generic/webview.scss

@@ -344,6 +344,40 @@
     ),
 ));
 
+@include add_settings((
+  ParaAnnotationWithIcon: (
+    _selectors: ('p.annotation'),
+  ),
+  CultureAnnotationIcon:(
+    _selectors: ("span.culture-icon"),
+    'ParaAnnotationIcon:::background': url("https://raw.githubusercontent.com/openstax/rex-web/main/public/static/icons/cosmos-culture.svg") no-repeat top left
+  ),
+  LinguisticAnnotationIcon: (
+    _selectors: ("span.linguistic-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-linguistic.svg")) no-repeat top left
+  ),
+  DreamingAnnotationIcon: (
+    _selectors: ("span.dreaming-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-dreaming.svg")) no-repeat top left
+  ),
+  VisualAnnotationIcon: (
+    _selectors: ("span.visual-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-visual.svg")) no-repeat top left
+  ),
+  SpeechAnnotationIcon: (
+    _selectors: ("span.speech-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-speech.svg")) no-repeat top left
+  ),
+  AuditoryAnnotationIcon: (
+    _selectors: ("span.auditory-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-auditory.svg")) no-repeat top left
+  ),
+  KinestheticAnnotationIcon: (
+    _selectors: ("span.kinesthetic-icon"),
+    'ParaAnnotationIcon:::background': url(toDataUri("svg+xml", "designs/webview/resources/cosmos-kinesthetic.svg")) no-repeat top left
+  ),
+));
+
 @include add_settings((
     AnswerKey: (
         _selectors: ('.os-eob.os-solutions-container'),
@@ -451,6 +485,16 @@
 @include use('PurpleColoredText', 'webview:::ColoredText');
 @include use('BlueColoredText', 'webview:::ColoredText');
 
+// Custom paragraphs
+@include use('ParaAnnotationWithIcon', 'webview:::ParaAnnotationWithIconShape');
+@include use('CultureAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('LinguisticAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('DreamingAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('VisualAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('SpeechAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('AuditoryAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+@include use('KinestheticAnnotationIcon', 'webview:::ParaAnnotationIconShape');
+
 // EOC
 @include use('WorksCited', 'webview:::ModuleWithIndentationShape');
 @include use('SectionWorksCited', 'webview:::ModuleWithIndentationShape');

styles/design-settings/webview/_design.scss

@@ -25,3 +25,4 @@
 @import '../../designs/webview/parts/coloredText-shapes';
 @import '../../designs/webview/parts/module-shapes';
 @import '../../designs/webview/parts/answerkey-shapes';
+@import '../../designs/webview/parts/customPara-shapes';

styles/designs/webview/parts/_customPara-components.scss

@@ -0,0 +1,30 @@
+// Annotation with Icon
+
+$Para--Annotation--WithIcon: (
+  _name: "ParaAnnotationWithIcon",
+  _subselector: '',
+  _properties:(
+  )
+);
+
+$Para--Annotation__IconContainer: (
+  _name: "ParaAnnotationIconContainer",
+  _subselector: ' > .os-icons',
+  _properties:(
+    display: flex,
+    float: left,
+  )
+);
+
+$Para--Annotation__Icon: (
+  _name: "ParaAnnotationIcon",
+  _subselector: '',
+  _properties:(
+    height: 2rem,
+    width: 2rem,
+    background: enum('ValueSet:::REQUIRED'),
+    content: "''",
+    background-repeat: no-repeat,
+    margin: '0.15rem 1rem 0.15rem 0',
+  )
+);

styles/designs/webview/parts/_customPara-shapes.scss

@@ -0,0 +1,19 @@
+@import './customPara-components';
+
+// Annotation with Icon
+
+@include create_shape('webview:::ParaAnnotationWithIconShape', (
+  _components: (
+    map-merge($Para--Annotation--WithIcon,(
+      _components: (
+        $Para--Annotation__IconContainer,
+      ),
+    ))
+  ),
+));
+
+@include create_shape('webview:::ParaAnnotationIconShape', (
+  _components: (
+    $Para--Annotation__Icon,
+  )
+));