stop14-themesystem-legacy 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "stop14-themesystem-legacy",
- "version": "2.0.2",
+ "version": "2.0.4",
  "description": "A scaffolding and build system for theme development across platforms. Legacy version",
  "author": {
   "name": "Bill Kennedy",

package/scaffolding/default/_00_main_configuration.yml

@@ -34,6 +34,7 @@ cta: $clr1
 de_emphasized: neutral(50)
 de_activated: neutral(30)
 link_colour: $black
+link_colour_active: $clr3
 
 ## 02 LAYOUT
 rootsize: 100%

package/scaffolding/drupal/_00_main_configuration.yml

@@ -34,6 +34,7 @@ cta: $clr1
 de_emphasized: neutral(50)
 de_activated: neutral(30)
 link_colour: $black
+link_colour_active: $clr3
 
 ## 02 LAYOUT
 rootsize: 100%

package/source/img/svg/icons/metadata-active.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f4b17a;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/img/svg/icons/metadata-default.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <path d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/img/svg/icons/metadata-neutral.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #80858c;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/img/svg/icons/metadata-reversed.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/30_typography/00_core/12_mixins/_link_underline.sass

@@ -1,8 +1,13 @@
 /**
- *  @file _link_underline.sass 
+ *  @file _link_underline.sass
  *  @category 30_typography
  *  @component 00_Core
  *  @description  Adds an underline. Allows themes to override with by redefining it, e.g. to add a text-underline to border-bottom approach */
- 
+
 =link-underline()
+  text-decoration: none
   border-bottom: 1px solid $link_colour
+
+=link-underline-active
+  text-decoration: none
+  border-bottom: 1px solid $link_colour_active

package/source/sass/a_components/30_typography/body_text_anchor_1/_body_text_anchor.sass

@@ -1,6 +1,6 @@
 p > a, p li > a, blockquote > a
   color: $link_colour
   +link-underline()
-  
-  &:hover, &:active
-    color: mix($link_colour,$black,10%)
+
+  &:hover, &.active
+    +link-underline-active

package/source/sass/a_components/30_typography/standardized_text_collection/_anchor.sass

@@ -18,11 +18,4 @@ a
   +transition(all,-6)
 
   &:hover, &:active
-    filter: brightness(0.9)
-
-// Default for links in body paragraphs.
-
-main
-  p > a
-   a
-    +inline-text-link()
+    color: $link_colour_active

package/source/sass/a_components/30_typography/standardized_text_collection/_text_collection.sass

@@ -11,6 +11,10 @@ li, td
 
 ul
   margin-bottom: $paragraph_spacing
+  padding-inline-start: rv($mobile_edge_padding_factor)
+
+  +bp($tablet)
+    padding-inline-start: rv($edge_padding_factor)
 
 blockquote
   box-sizing: border-box

package/source/sass/a_components/40_ui/ui_element_base_v002/12_mixins/_ui_patterns.sass

@@ -20,20 +20,21 @@ $ui_form_clearance: rv($edge_padding_factor)
   &:first-child
     margin-left: 0
 
+=ui-form-spacing()
+  > *
+    margin-bottom: $ui_element_spacing
+
+    +bp($tablet)
+      +ui-space-element()
+
 =one-line-form($subgroup: '#edit_actions')
   display: flex
   flex-direction: column
+  +ui-form-spacing
 
   +bp($tablet)
     flex-direction: row
 
-  > *
-    margin-bottom: rv($mobile_edge_padding_factor)
-
-    +bp($tablet)
-      margin-bottom: 0
-      +ui-space-element()
-
   #{$subgroup}
     display: flex
     align-items: center

package/source/sass/a_components/40_ui/ui_element_base_v002/13_definitions/_form_elements.sass

@@ -36,7 +36,6 @@
   -moz-appearance: none
   appearance: none
   font-size: $btn_fontsize
-  font-family: $headingfont
   font-weight: $normal
   padding: $btn_padding
   height: $ui_minheight
@@ -112,6 +111,7 @@
   flex-direction: row
   align-items: center
   justify-content: center
+  +background-icon-left('reset')
 
   &:hover
     background-color: $black
@@ -203,7 +203,7 @@
 
 %button-submit
   @extend %button
-  +background-icon-default-left('checkmark')
+  +background-icon-left('checkmark',$btn_icon_size,'reversed','default')
   border-width: $btn_submit_border_width
   border-color: $btn_submit_border_color
   font-style: normal
@@ -233,6 +233,9 @@
     border-color: $btn_submit_hover_border_color
     filter: saturate(120%)
 
+// Made for integrated search ui elements, where the text input and submit button are contained in the same border.
+// In many instances this will need to override the “submit” styling.
+
 %button-search
   @extend %button-ghost
   font-size: clamped(-3,-2)
@@ -243,12 +246,16 @@
   text-decoration: none !important
   justify-content: flex-start
   align-items: center
-  +background-icon-base('search',$btn_icon_size,'neutral','default','right')
+  +background-icon-right('search',$btn_icon_size,'neutral','default')
   background-color: $btn_search_bg_color
 
+  &:before
+    content: none
+    display: none
+    background: none !important
+
   &:hover
     color: $btn_search_hover_color
-    +background-icon-active('search',$btn_icon_size,'neutral','default','right')
     background-color: $btn_search_hover_bg_color
 
 %button-search-clear

package/source/sass/a_components/40_ui/ui_element_base_v002/_form_ui.sass

@@ -44,9 +44,15 @@ textarea#edit-message
 input[type="search"] // Button
   @extend %button-search
 
-input[type="submit"] //Button
+input[type="submit"],
+button[type="submit"] //Button
   @extend %button-submit
 
+input[type="reset"],
+button[type="teset"] //Button
+  @extend %button-reset
+
+
 input[type="search"]::-webkit-search-cancel-button
   -webkit-appearance: none
   display: inline-block
@@ -72,6 +78,11 @@ input[type="checkbox"]
   float: left
   margin: 0
 
+  &:checked
+    +icon('checkmark')
+    background-size: 80%
+    background-position: center
+
   &:hover
     border-color: $ui_hover_border_color
 

package/source/sass/a_components/40_ui/ui_element_base_v002/_standardized_icons/_icon_mixins.sass

@@ -27,8 +27,9 @@
 // Convenience functions to assign left and right background functions
 =background-icon-left($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active')
   display: flex
-  align-content: center
+  align-items: center
   min-height: $btn_icon_size
+  cursor: pointer
 
   &:before
     content: ''
@@ -46,8 +47,9 @@
 
 =background-icon-right($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active')
   display: flex
-  align-content: center
+  align-items: center
   min-height: $btn_icon_size
+  cursor: pointer
 
   &:after
     content: ''
@@ -89,3 +91,10 @@
     +background-icon-left($icon_name,$size,$initial_state,$active_state)
   @else
     +background-icon-right($icon_name,$size,$initial_state,$active_state)
+
+  &:hover, &:active
+    color: $impact
+
+=icon-with-label-right($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active', $position: 'left')
+  @extend %icon-label
+  +background-icon-right($icon_name,$size,$initial_state,$active_state)

package/source/sass/a_components/40_ui/ui_element_base_v002/_standardized_icons/_icons.sass

@@ -5,7 +5,8 @@
    @usage Add the “icon” class to a button or container to apply standardized
     label styles. Add one of the following to apply a specific icon as per the
     $icons list below:
-      .icon-[iconname] -- Positions icon to the right
+      .icon-[iconname] -- No positioning, must have container with definite height and width
+      .icon-right-[iconname] -- Positions icon to the right
       .icon-left-[iconname] -- Positions icon to the left
       .icon-reversed-[iconname] -- Uses reversed icon as default state
       .icon-neutral-[iconname] -- Uses neutral icon as default state
@@ -22,7 +23,7 @@
  * Standardized states are "default","active","neutral","reversed"
  */
 
-$icons: ('accordion-expand','accordion-horizontal','arrow','arrow-left','checkmark','close','copy','download','export','external-link','filter','full-screen','grid','hamburger-menu','home','link','list','location','locked','logout','minus','open-access','ordchid-id','orchid-id','plus','reset','search','sort','unlocked','upload','user-access','user','visible')
+$icons: ('accordion-expand','accordion-horizontal','arrow','arrow-left','checkmark','close','copy','download','export','external-link','filter','full-screen','grid','hamburger-menu','home','link','list','location','locked','logout','minus','metadata','open-access','ordchid-id','orchid-id','plus','reset','search','sort','unlocked','upload','user-access','user','visible')
 
 
 %icon-label // Redefined from 30_typography/_definitions for portability. @todo: add definition to core.
@@ -60,17 +61,29 @@ button.icon
   text-transform: uppercase
   @extend %icon
 
-// Set standardized classes. Non-standard icon usage should use icons
+// Set standardized classes.
 @each $name in $icons
   .icon-#{$name}
-    +background-icon-right($name,$btn_icon_size,'default','active')
+    +background-icon-base($name,'contain','default','active')
+    &:after,&.active
+      +background-icon-active($name,'contain','default','active')
   .icon-reversed-#{$name}
-    +background-icon-right($name,$btn_icon_size,'reversed','active')
+    +background-icon-base($name,'contain','reversed','active')
+    &:after,&.active
+      +background-icon-active($name,'contain','reversed','active')
   .icon-neutral-#{$name}
-    +background-icon-right($name,$btn_icon_size,'neutral','default')
+    +background-icon-base($name,'contain','neutral','default')
+    &:after,&.active
+      +background-icon-active($name,'contain','neutral','active')
   .icon-right#{$name}
-    +background-icon-left($name,$btn_icon_size,'default','active')
+    +background-icon-right($name,$btn_icon_size,'default','active')
   .icon-right-reversed-#{$name}
-    +background-icon-left($name,$btn_icon_size,'reversed','active')
+    +background-icon-right($name,$btn_icon_size,'reversed','active')
   .icon-right-neutral-#{$name}
+    +background-icon-right($name,$btn_icon_size,'neutral','default')
+  .icon-left-#{$name}
+    +background-icon-left($name,$btn_icon_size,'default','active')
+  .icon-left-reversed-#{$name}
+    +background-icon-left($name,$btn_icon_size,'reversed','active')
+  .icon-left-neutral-#{$name}
     +background-icon-left($name,$btn_icon_size,'neutral','default')

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-active.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f4b17a;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-default.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <path d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-neutral.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #80858c;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-reversed.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>