stop14-themesystem-legacy 2.0.4 → 2.0.6

package/package.json

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

package/scaffolding/default/_00_main_configuration.yml

@@ -222,6 +222,13 @@ ui_select_width: fit-content
 ui_select_min_width: $btn_width
 ui_select_max_width: 100%
 
+#Callouts
+
+callout_shift: 0
+callout_width: 40%
+callout_inset: null
+callout_breakpoint: lrg
+
 
 # Animation
 

package/scaffolding/drupal/_00_main_configuration.yml

@@ -222,6 +222,12 @@ ui_select_width: fit-content
 ui_select_min_width: $btn_width
 ui_select_max_width: 100%
 
+#Callouts
+
+callout_shift: 0
+callout_width: 40%
+callout_inset: null
+callout_breakpoint: lrg
 
 # Animation
 

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/scaffolding/omeka/_00_main_configuration.yml

@@ -161,6 +161,7 @@ ui_mobile_app_controls_footer_height: $masthead_height
 ui_mobile_app_controls_breakpoint: $tablet
 ui_display_controls_icon_size: "$ui_mobile_app_controls_footer_height * 0.5"
 
+
 # legacy
 border_radius: $ui_border_radius
 mobile_filter_height: rv(5)
@@ -222,6 +223,12 @@ ui_select_width: fit-content
 ui_select_min_width: 200px
 ui_select_max_width: 100%
 
+#Callouts
+
+callout_shift: 0
+callout_width: 40%
+callout_inset: null
+callout_breakpoint: lrg
 
 # Animation
 heartbeat: 0.2s

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/30_typography/callout_blocks/13_mixins/_callout.sass

@@ -50,11 +50,11 @@
 
   @if $direction == 'left'
     float: left
-    padding-right: rv($mobile_edge_padding_factor)
+    padding-right: $paragraph_spacing
 
   @if $direction == 'right'
     float: right
-    padding-left: rv($mobile_edge_padding_factor)
+    padding-left: $paragraph_spacing
 
   +bp($breakpoint)
     position: relative
@@ -67,9 +67,8 @@
       float: left
       text-align: right
 
-      @if $inset == null
-        right: calc(#{$shiftval} + var(--callout-width))
-        margin-right: calc((#{$shiftval} + var(--callout-width)) * -1)
+      @if $inset == null or $inset == "null"
+        padding: 0 $paragraph_spacing $paragraph_spacing 0
       @else
         padding-right: rv($inset)
         right: calc(#{$shiftval} + (var(--callout-width)/2))
@@ -78,9 +77,8 @@
     @if $direction == 'right'
       float: right
 
-      @if $inset == null
-        left: calc(#{$shiftval} + var(--callout-width))
-        margin-left: calc((#{$shiftval} + var(--callout-width)) * -1)
+      @if $inset == null or $inset == "null"
+        padding: 0 0 $paragraph_spacing $paragraph_spacing
       @else
         padding-left: rv($inset)
         left: calc(#{$shiftval} + (var(--callout-width)/2))

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

@@ -38,7 +38,7 @@
   font-size: $btn_fontsize
   font-weight: $normal
   padding: $btn_padding
-  height: $ui_minheight
+  height: $btn_height
   min-width: $btn_minwidth
   border: $btn_border_width solid $btn_border_color
   border-radius: $ui_border_radius
@@ -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

@@ -38,18 +38,26 @@ input:focus
 
 input[type='text'],
 input[type='email'],
+input[type='password']
 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

@@ -33,8 +33,8 @@
 
   &:before
     content: ''
-    height: $btn_icon_size
-    width: $btn_icon_size
+    height: $size
+    width: $size
     margin-right: $ui_padding
     +background-icon-base($icon_name,'contain',$initial_state,$active_state)
     background-position: center left
@@ -48,13 +48,13 @@
 =background-icon-right($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active')
   display: flex
   align-items: center
-  min-height: $btn_icon_size
+  min-height: $size
   cursor: pointer
 
   &:after
     content: ''
-    height: $btn_icon_size
-    width: $btn_icon_size
+    height: $size
+    width: $size
     margin-left: $ui_padding
     +background-icon-base($icon_name,'contain',$initial_state,$active_state)
     background-position: center right
@@ -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/40_ui/ui_element_base_v002/_ui_library_support/_component_superfish_navigation.sass

@@ -62,9 +62,40 @@ ul.sf-menu
         text-decoration: none
         border-bottom: none
 
-    > * .menuparent
-        +background-icon-base('accordion-expand',$btn_icon_size,'reversed')
-        background-position: right center
+    // Superfish uses “menuparent” to indicate that the link has a submenu
+    // It applies to both the list and child anchor tag so li is explicit here
+    // Superfish also uses “.sf-depth-[x]” to indicate nested menu depth
+    // .sf-depth-1 is the top-level.
+
+    // This logic uses a right-facing arrow for all menu items that are not the
+    // top level, which has a downward arrow.
+
+    // @todo Superfish may have collision detection here, with submenus appearing
+    // on the left or right depending on available viewport space. If so,
+    // this logic needs to expand.
+
+    li.menuparent
+        +background-icon-right('accordion-expand',$btn_icon_size)
+
+        &:after
+            transform: rotate(-90deg)
+
+        &.sf-depth-1
+
+            +reversed()
+                +background-icon-right('accordion-expand',$btn_icon_size,'reversed')
+
+            &:after
+                transform: unset
+
+        &:not(.sf-depth-1)
+            &:hover
+                &:after
+                    background-image: url(get_svg_url('icons/accordion-expand-default'))
+                    transform: rotate(-90deg)
+                    animation-name: unset // The animation overrides the transform in this context, so is unset here.
+
+
 
     .sf-depth-1
         li
@@ -72,37 +103,25 @@ ul.sf-menu
             *white-space: normal /* ...unless you support IE7 (let it wrap) */
             -webkit-transition: background $heartbeat
             transition: background $heartbeat
-            background: neutral(10)
+            background-color: neutral(10)
 
             &:hover
-                background: $impact
+                background-color: $impact
 
             a, a:hover
                 color: $black
+
     .sf-depth-2
         &.li
-            background: neutral(50)
+            background-color: neutral(50)
         a
             color: $black
-            +font-size(-1)
+            width: 75%
+            padding-right: 1.5em // conforms with superfish
 
 
 
 /* styling arrows */
-.sf-depth-1 .sf-with-ul:after
-    content: ''
-    background-size: contain
-    background-position: center
-    width: rv(-1)
-    height: rv(-4)
-    position: absolute
-    top: rv(0)
-    margin-left: rv(-1)
-    justify-content: center
-
-
-.sf-depth-2 .sf-with-ul:after
-    content: ''
 
 /* superfish generated arrows */
 .sf-menu li .sf-sub-indicator

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

package/source/sass/b_profiles/s14_standard_base/_components.sass

@@ -24,7 +24,7 @@
 @import !fluid_type/_index_local_configuration
 @import standardized_text_collection/_index
 @import standardized_lists/_index
-@import callout_blocks/_index
+@import callout_blocks/_index_local_configuration
 
 // 40 UI