stop14-themesystem-legacy 2.0.4 → 2.0.5

package/package.json

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

package/scaffolding/drupal/source/sass/20_layout/_section_title.sass

@@ -9,13 +9,13 @@ $title_area_spacing_factor: 0
 #splash + #title
   margin-top: rv($mobile_edge_padding_factor) * 2
 
-  +bp($tablet)
+  +bp($desktop)
     margin-top: rv($edge_padding_factor) * 2
 
 #title
   padding: 0 rv($mobile_edge_padding_factor)
 
-  +bp($tablet)
+  +bp($desktop)
     padding: 0 rv($edge_padding_factor)
 
 

package/scaffolding/drupal/source/sass/20_layout/_sidebar_left.sass

@@ -7,11 +7,7 @@
 
 #primary-content
   aside.left
-    padding: 0 rv($mobile_edge_padding_factor)
-    +font-size(-1)
-
-    +bp($desktop)
-      padding: 0 rv($edge_padding_factor)
+    font-size: clamped(-2,-1)
 
     div, p, ul, li, label
       color: inherit

package/source/sass/a_components/10_colours_and_patterns/00_core/11_functions/_set_colour.sass

@@ -10,7 +10,7 @@
 @function set-colour($colour: 1,$intensity: 100, $mixer: white)
   @if is-int($intensity)
     // Variable interpolation e.g. $clr#{$colour}) doesn’t work in SASS functions. Use a map instead.
-    $colourmaps: (1: $clr1, 2: $clr2, 3: $clr3, 4: $clr4, 5: $clr5, 6: $clr6, 7: $clr7, 8: $clr8, 9: $clr9)
+    $colourmaps: (1: $clr1, 2: $clr2, 3: $clr3, 4: $clr4, 5: $clr5, 6: $clr6, 7: $clr7, 8: $clr8, 9: $clr9, 10: $clr10, 11: $clr11, 12: $clr12, 13: $clr13, 14: $clr14, 15: $clr15, 16: $clr16, 17: $clr17, 18: $clr18, 19: $clr19, 20: $clr20)
     @return mix(map-get($colourmaps,$colour),$mixer,$intensity * 1%)
   @else
     @return mix(set-colour-legacy($colour),$mixer,$intensity * 1%)

package/source/sass/a_components/10_colours_and_patterns/00_core/_01_configuration_colour_and_patterns.sass

@@ -16,6 +16,17 @@ $clr6: #000000
 $clr7: #000000
 $clr8: #000000
 $clr9: #000000
+$clr10: #000000
+$clr11: #000000
+$clr12: #000000
+$clr13: #000000
+$clr14: #000000
+$clr15: #000000
+$clr16: #000000
+$clr17: #000000
+$clr18: #000000
+$clr19: #000000
+$clr20: #000000
 
 // Define alternative blackpoint, whitepoint and neutrals.
 

package/source/sass/a_components/10_colours_and_patterns/common_patterns/_patterns.sass

@@ -24,17 +24,17 @@
 
 // legacy alias
 
-=overlay-dark($angle: 180deg, $stop: 66%, $colour: $black)
+=overlay-dark($colour: $black, $stop: 66%, $angle: 180deg)
   +gradient-overlay-dark($angle,$stop,$colour)
 
-=gradient-overlay-slide($angle: 0deg,$colour: $true_black)
+=gradient-overlay-slide($colour: $true_black, $stop: 40%, $angle: 0deg)
   +gradient-overlay-dark
 
   &:before
-    background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($mobile_edge_padding_factor) * 4, transparent 40%) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
+    background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($mobile_edge_padding_factor) * 4, transparent $stop) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
 
     +bp($tablet)
-      background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($edge_padding_factor) * 4, transparent 40%) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
+      background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($edge_padding_factor) * 4, transparent $stop) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
 
 
 =image-overlay($image_url:'../img/jpg/folder/some-image.jpg', $opacity: 0.4)

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

@@ -101,25 +101,6 @@
   &:hover
     color: $clr4
 
-
-%button-reset
-  @extend %button-base
-  border: none
-  background-color: neutral(60)
-  text-decoration: underline
-  display: inline-flex
-  flex-direction: row
-  align-items: center
-  justify-content: center
-  +background-icon-left('reset')
-
-  &:hover
-    background-color: $black
-
-  &:active
-    background-color: neutral(80)
-
-
 %button-text
   background-color: $black
   text-decoration: underline
@@ -172,6 +153,7 @@
   min-width: $btn_compactwidth
   text-decoration: none
   justify-content: flex-start
+  +background-icon-left('reset')
 
   &:hover
     color: $btn_reset_hover_color

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

@@ -41,15 +41,22 @@ input[type='email'],
 textarea#edit-message
   @extend %input-text
 
-input[type="search"] // Button
+// Important. Icons do NOT apply to input elements automatically because
+// they are not containers and can’t have :before and :after pseudo-elements.
+// In most contexts you should apply icons to the an input container.
+// Alternatively you can use the work-in-progress +input-button-icon() mixins
+// to see if you can achieve the desired results.
+
+input[type="search"]
+button[type="search"]
   @extend %button-search
 
 input[type="submit"],
-button[type="submit"] //Button
+button[type="submit"]
   @extend %button-submit
 
 input[type="reset"],
-button[type="teset"] //Button
+button[type="reset"]
   @extend %button-reset
 
 

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

@@ -73,7 +73,6 @@
   +background-icon-right($icon_name,$btn_icon_size,'default','default')
 
 
-// Simplified Aliases
 
 =icon($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active')
   height: $size
@@ -82,7 +81,7 @@
   background-position: center
 
   &.active, &:hover
-    +background-icon-base($icon_name,'contain',$initial_state,$active_state)
+    +background-icon-base($icon_name,$size,$initial_state,$active_state)
 
 =icon-with-label($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active', $position: 'left')
   @extend %icon-label
@@ -98,3 +97,23 @@
 =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)
+
+
+// Input buttons can’t have pseudo-elements, so the background icon must be directly applied.
+// Experimental. Positioning the icon still needs thinking through to work in all situations
+
+
+=input-button-icon($icon_name, $size: $btn_icon_size, $btn_padding: $ui_padding, $initial_state: 'default', $active_state: 'active', $position: 'left')
+  +background-icon-base($icon_name,$size,$initial_state,$active_state)
+
+  @if $position == 'left'
+    background-position: left calc(#{$btn_padding} - #{$size * 2} ) center
+  @else
+    background-position: left calc(#{$btn_padding} + #{$size * 2} ) center
+
+
+=input-button-icon-left($icon_name, $size: $btn_icon_size, $btn_padding: $ui_padding, $initial_state: 'default', $active_state: 'active')
+  +input-button-icon($icon_name,$size,$btn_padding,$initial_state,$active_state,'left')
+
+=input-button-icon-right($icon_name, $size: $btn_icon_size, $btn_padding: $ui_padding, $initial_state: 'default', $active_state: 'active')
+  +input-button-icon($icon_name,$size,$btn_padding,$initial_state,$active_state,'right')

package/source/sass/a_components/60_site_elements/drupal_general_support/_component_views_bef_search_field.sass

@@ -59,9 +59,115 @@
 
     &[type="submit"].form-submit
       @extend %button-search
+      +input-button-icon-right('search')
 
     &[type="submit"][name="reset"].form-submit
       @extend %button-search-clear
+      +input-button-icon-right('reset')
+
+// Add ons in various contexts
+
+// Hides everything but the search field and remove the search border
+// Used for high-impact search displays
+
+=bef-exposed-form-search-ghost($search_input_selector: '.form-item-search-api-fulltext')
+  .form-item:not(#{$search_input_selector})
+    display: none
+
+  #{$search_input_selector}
+    width: auto
+    flex-grow: 1
+
+    input
+      max-width: unset
+      border: 0 !important
+
+// Hides the search bar. Used when the search input is rendered elsewhere, often by placing the BEF block twice.
+
+=bef-exposed-form-hide-search($search_input_selector: '.form-item-search-api-fulltext')
+
+  #{$search_input_selector}
+    display: none
+
+=bef-exposed-form-compact-right
+  form
+    justify-content: flex-end
+
+  .form-item
+    +bp($desktop)
+      width: auto
+
+  input, select
+    max-width: 250px
+
+  .form-actions
+    margin-left: 0
+/**
+ *  @file _views_exposed_forms.sass
+ *  @category 40_ui
+ *  @theme LOCAL
+ *  @description Support for the exposed forms in Views. Also includes Better Exposed Forms (or will)
+ **/
+
+.views-exposed-form.bef-exposed-form
+  form
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    position: relative
+    background-color: $white
+    width: 100%
+
+    +bp($desktop)
+      flex-wrap: nowrap
+      height: $ui_largeheight
+
+  .form-item
+    flex-grow: 0
+    flex-shrink: 1
+    margin-bottom: $ui_padding
+
+    +bp($tablet)
+      margin-right: $ui_padding
+
+    +bp($desktop)
+      margin-bottom: 0
+
+
+    > *
+      width: 100%
+
+  .form-actions
+    margin-left: auto
+    display: flex
+
+    > *
+      margin-left: $ui_padding
+
+      &:first-child
+        margin-left: 0
+
+  label
+    display: none
+
+
+
+    &.form-item-search-api-fulltext
+      flex-grow: 1
+      flex-shrink: 0
+
+      input
+        width: 100%
+
+  input
+
+    &[type="submit"].form-submit
+      @extend %button-search
+      +input-button-icon-right('search')
+
+    &[type="submit"][name="reset"].form-submit
+      @extend %button-search-clear
+      +input-button-icon-right('reset')
 
 // Add ons in various contexts
 

package/source/sass/a_components/60_site_elements/slide_viewer/templates/_slide_viewer_template_3.sass

@@ -39,6 +39,6 @@
 
   // Adjust slide viewer active area
 
-  $nav_clearance: ($slide_viewer_padding * 2) + $page_marker_width
+  $nav_clearance: calc((#{$slide_viewer_padding} * 2) + #{$page_marker_width})
 
   --slide-viewer-nav-clearance: 0 0 #{$nav_clearance} 0

package/source/sass/a_components/60_site_elements/slide_viewer/templates/_slide_viewer_template_4.sass

@@ -39,6 +39,6 @@
 
   // Adjust slide viewer active area
 
-  $nav_clearance: ($slide_viewer_padding * 2) + $page_marker_width
+  $nav_clearance: calc((#{$slide_viewer_padding} * 2) + #{$page_marker_width})
 
   --slide-viewer-nav-clearance: #{$nav_clearance} 0 0 0