stop14-themesystem-legacy 2.0.3 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "stop14-themesystem-legacy",
- "version": "2.0.3",
+ "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/40_ui/ui_element_base_v002/13_definitions/_form_elements.sass

@@ -111,6 +111,7 @@
   flex-direction: row
   align-items: center
   justify-content: center
+  +background-icon-left('reset')
 
   &:hover
     background-color: $black

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

@@ -48,6 +48,11 @@ 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
@@ -73,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/_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>