acf stylised icon select for solid and regular sets

git-subtree-dir: web/app/themes/badegg
git-subtree-mainline: 272b0f6525
git-subtree-split: 2b425fd2ea

web/app/themes/badegg/app/ACF/Dynamic.php

@@ -135,6 +135,8 @@ class Dynamic
                         'bg_colour',
                         'angle_colour',
                         'fontawesome_brands',
+                        'fontawesome_regular',
+                        'fontawesome_solid',
                     ];
 
                     // do something to the original_value to override the default escaping, then return it.

web/app/themes/badegg/resources/css/app.scss

@@ -1,25 +1,25 @@
 // Global Variables, Mixins, and Framework
-@use "global/variables";
-@use "global/mixins";
-@use "global/fonts";
-@use "global/typography";
-@use "global/framework";
+@forward "global/variables";
+@forward "global/mixins";
+@forward "global/fonts";
+@forward "global/typography";
+@forward "global/framework";
 
 // Third Party Plugins
-@use "plugins/contact-form-7";
-@use "plugins/mce";
+@forward "plugins/contact-form-7";
+@forward "plugins/mce";
 
 // Components
-@use "components/block";
-@use "components/forms";
-@use "components/button";
-@use "components/card";
-@use "components/BadEggLightbox";
+@forward "components/block";
+@forward "components/forms";
+@forward "components/button";
+@forward "components/card";
+@forward "components/BadEggLightbox";
 
 // Sections
-@use "sections/header";
-@use "sections/footer";
+@forward "../views/sections/header/header";
+@forward "../views/sections/footer/footer";
 
 // Page Styles
-@use "views/page";
+@forward "views/page";
 

web/app/themes/badegg/resources/css/editor.scss

@@ -1,5 +1,5 @@
 @use "app";
-@use "global/variables/colours";
+@use "global/variables";
 
 html :where(.wp-block) {
   max-width: none;
@@ -8,7 +8,7 @@ html :where(.wp-block) {
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
   &:hover:after {
     content: '';
-    outline: 2px solid colours.$wpblue;
+    outline: 2px solid variables.$wpblue;
     position: absolute;
     inset: 0;
   }
@@ -36,7 +36,7 @@ html :where(.wp-block) {
 }
 
 .editor-styles-wrapper {
-  background: colours.$grey-lightest;
+  background: variables.$grey-lightest;
 
   .block-list-appender {
     width: 350px;

web/app/themes/badegg/resources/css/global/_framework.scss

@@ -1,4 +1,4 @@
-@use "framework/breakpoints";
-@use "framework/normalise";
-@use "framework/colours";
-@use "framework/spacing";
+@forward "framework/breakpoints";
+@forward "framework/normalise";
+@forward "framework/colours";
+@forward "framework/spacing";

web/app/themes/badegg/resources/css/global/_mixins.scss

@@ -1,4 +1,4 @@
-@use "mixins/linear-gradient";
-@use "mixins/text-contrast";
-@use "mixins/generate-colour-classes";
-@use "mixins/generate-button-classes";
+@forward "mixins/linear-gradient";
+@forward "mixins/text-contrast";
+@forward "mixins/generate-colour-classes";
+@forward "mixins/generate-button-classes";

web/app/themes/badegg/resources/css/global/_typography.scss

@@ -1,7 +1,4 @@
-@use "variables/fonts";
-@use "variables/breakpoints";
-@use "variables/colours";
-@use "variables/spacing";
+@use "variables";
 
 .wysiwyg {
   > *:first-child {
@@ -19,9 +16,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: colours.$primary;
+  color: variables.$primary;
   font-weight: 700;
-  font-family: fonts.$font;
+  font-family: variables.$font;
   line-height: 1.1em;
   margin: 1.5em 0 0.25em;
   padding: 0;
@@ -32,7 +29,7 @@ h6 {
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
     }
   }
 }
@@ -48,7 +45,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }
 
-@media (min-width: breakpoints.$screen-sm) {
+@media (min-width: variables.$screen-sm) {
   h1 { font-size: 2.5em; }
   h2 { font-size: 2em; }
   h3 { font-size: 1.5em; }
@@ -63,8 +60,8 @@ p,
 li,
 td,
 label {
-  color: colours.$grey-darker;
-  font-family: fonts.$font;
+  color: variables.$grey-darker;
+  font-family: variables.$font;
   font-weight: 400;
   line-height: 1.5em;
   margin: 0 0 0.8em;
@@ -72,30 +69,30 @@ label {
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
     }
   }
 }
 
 a {
-  color: colours.$primary;
+  color: variables.$primary;
   text-decoration: none;
   outline: none;
   transition: all 300ms ease;
 
   &:hover,
   &:focus {
-    color: colours.$primary-dark;
+    color: variables.$primary-dark;
     text-decoration: none;
   }
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
 
       &:hover,
       &:focus {
-        color: colours.$primary-light;
+        color: variables.$primary-light;
       }
     }
   }
@@ -113,7 +110,6 @@ ul,
 ol {
   margin: 0 0 0.7em;
   padding: 0 0 0 1.2em;
-  text-align: left;
 }
 
 .nolist {
@@ -131,12 +127,12 @@ ol {
 hr {
   margin: 2em auto;
   height: 0;
-  border: 0 solid colours.$grey-light;
-  border-width: spacing.$borderThin 0 0;
+  border: 0 solid variables.$grey-light;
+  border-width: variables.$borderThin 0 0;
 
   @media screen {
     .knockout & {
-      border-color: colours.$white;
+      border-color: variables.$white;
     }
   }
 }

web/app/themes/badegg/resources/css/global/_variables.scss

@@ -1,4 +1,4 @@
-@use "variables/fonts";
-@use "variables/colours";
-@use "variables/breakpoints";
-@use "variables/spacing";
+@forward "variables/fonts";
+@forward "variables/colours";
+@forward "variables/breakpoints";
+@forward "variables/spacing";

web/app/themes/badegg/resources/css/global/framework/_breakpoints.scss

@@ -1,6 +1,6 @@
-@use "../variables/breakpoints";
+@use "../variables";
 
-@each $label, $value in breakpoints.$breakpoints {
+@each $label, $value in variables.$breakpoints {
   .min-#{$label} {
     @media (min-width: $value) {
       display: none;

web/app/themes/badegg/resources/css/global/framework/_colours.scss

@@ -1,13 +1,12 @@
-@use "../mixins/generate-button-classes";
-@use "../mixins/generate-colour-classes";
-@use "../variables/colours";
+@use "../mixins";
+@use "../variables";
 
 ::selection {
-  color: colours.$white;
-  background: colours.$primary;
+  color: variables.$white;
+  background: variables.$primary;
 }
 
-@each $color, $hex in colours.$colors {
-  @include generate-colour-classes.generate_colour_classes($color, $hex);
-  @include generate-button-classes.generate_button_colors($color, $hex);
+@each $color, $hex in variables.$colors {
+  @include mixins.generate_colour_classes($color, $hex);
+  @include mixins.generate_button_colors($color, $hex);
 }

web/app/themes/badegg/resources/css/global/framework/_normalise.scss

@@ -1,4 +1,4 @@
-@use "../variables/colours";
+@use "../variables";
 
 * {
   box-sizing: border-box;
@@ -13,7 +13,7 @@ body,
 html {
   margin: 0;
   padding: 0;
-  background: colours.$white;
+  background: variables.$white;
 }
 
 .visually-hidden {

web/app/themes/badegg/resources/css/global/framework/_spacing.scss

@@ -1,26 +1,25 @@
-@use "../variables/colours";
-@use "../variables/spacing";
+@use "../variables";
 
 .brand {
   display: block;
-  width: spacing.$brandWidth;
-  height: spacing.$brandHeight;
+  width: variables.$brandWidth;
+  height: variables.$brandHeight;
 
   svg,
   img {
     display: block;
-    width: spacing.$brandWidth;
-    height: spacing.$brandHeight;
+    width: variables.$brandWidth;
+    height: variables.$brandHeight;
   }
 
   .knockout & {
     @media screen {
       .fill-primary {
-        fill: colours.$white;
+        fill: variables.$white;
       }
 
       .fill-grey {
-        fill: rgba(colours.$white, 0.8);
+        fill: rgba(variables.$white, 0.8);
       }
     }
   }
@@ -32,46 +31,90 @@ figure {
 }
 
 .container {
-  width: calc(100% - spacing.$innerMedium * 2);
+  width: calc(100% - variables.$innerMedium * 2);
   margin: auto;
 
+  @container (min-width: #{variables.$screen-md}) {
+    width: calc(100% - variables.$innerLarge * 3);
+  }
+
+  @container (min-width: #{variables.$screen-lg}) {
+    width: calc(100% - variables.$innerLarge * 4);
+  }
+
   &-full { width: auto; }
-  &-large { max-width: spacing.$containerLarge; }
-  &-medium { max-width: spacing.$containerMedium; }
-  &-small { max-width: spacing.$containerSmall; }
-  &-narrow { max-width: spacing.$containerNarrow; }
+  &-larger { max-width: variables.$containerLarger; }
+  &-large { max-width: variables.$containerLarge; }
+  &-medium { max-width: variables.$containerMedium; }
+  &-small { max-width: variables.$containerSmall; }
+  &-narrow { max-width: variables.$containerNarrow; }
 }
 
 .section {
-  padding: spacing.$sectionMedium 0;
+  padding: variables.$sectionMedium 0;
 
-  &-small { padding: spacing.$sectionSmall 0; }
-  &-medium { padding: spacing.$sectionMedium 0; }
-  &-large { padding: spacing.$sectionLarge 0; }
+  &-small {  padding: variables.$sectionSmall  unset; }
+  &-medium { padding: variables.$sectionMedium unset; }
+  &-large {  padding: variables.$sectionLarge  unset; }
 
-  &-zero-top { padding-top: 0; }
-  &-zero-bottom { padding-bottom: 0; }
+  @container (min-width: #{variables.$screen-md}) {
+    padding: (variables.$sectionMedium * 1.5) unset;
+
+    &-small { padding: (variables.$sectionSmall * 1.5) unset; }
+    &-medium { padding: (variables.$sectionMedium * 1.5) unset; }
+    &-large { padding: (variables.$sectionLarge * 1.5) unset; }
+  }
+
+  @container (min-width: #{variables.$screen-lg}) {
+    padding: (variables.$sectionMedium * 2) 0;
+
+    &-small { padding: (variables.$sectionSmall * 2) 0; }
+    &-medium { padding: (variables.$sectionMedium * 2) 0; }
+    &-large { padding: (variables.$sectionLarge * 2) 0; }
+  }
+
+  &-zero-top {    padding-top:    unset; }
+  &-zero-bottom { padding-bottom: unset; }
 }
 
 .inner {
-  padding: spacing.$innerMedium;
+  padding: variables.$innerMedium;
 
-  &-small { padding: spacing.$innerSmall; }
-  &-large { padding: spacing.$innerLarge; }
+  &-largest {  padding: variables.$innerLargest;  }
+  &-larger {   padding: variables.$innerLarger;   }
+  &-large {    padding: variables.$innerLarge;    }
+  &-small {    padding: variables.$innerSmall;    }
+  &-smaller {  padding: variables.$innerSmaller;  }
+  &-smallest { padding: variables.$innerSmallest; }
 
-  &-zero-x {
-    padding-left: 0;
-    padding-right: 0;
+  @container (min-width: #{variables.$screen-md}) {
+    padding: (variables.$innerMedium * 1.5);
+
+    &-largest {  padding: (variables.$innerLargest * 1.25);  }
+    &-larger {   padding: (variables.$innerLarger * 1.25);   }
+    &-large {    padding: (variables.$innerLarge * 1.25);    }
+    &-small {    padding: (variables.$innerSmall * 1.25);    }
+    &-smaller {  padding: (variables.$innerSmaller * 1.25);  }
+    &-smallest { padding: (variables.$innerSmallest * 1.25); }
   }
 
-  &-zero-y {
-    padding-top: 0;
-    padding-top: 0;
+  @container (min-width: #{variables.$screen-lg}) {
+    padding: (variables.$innerMedium * 2);
+
+    &-largest {  padding: (variables.$innerLargest * 1.5);  }
+    &-larger {   padding: (variables.$innerLarger * 1.5);   }
+    &-large {    padding: (variables.$innerLarge * 1.5);    }
+    &-small {    padding: (variables.$innerSmall * 1.5);    }
+    &-smaller {  padding: (variables.$innerSmaller * 1.5);  }
+    &-smallest { padding: (variables.$innerSmallest * 1.5); }
   }
+
+  &-zero-x { padding-left: unset; padding-right: unset; }
+  &-zero-y { padding-top:  unset; padding-top:   unset; }
 }
 
 .rounded {
-  border-radius: spacing.$borderRadius;
+  border-radius: variables.$borderRadius;
 
   &-top {
     border-bottom-right-radius: 0;
@@ -86,12 +129,12 @@ figure {
 
 .border {
   border-style: solid;
-  border-width: spacing.$borderWidth;
+  border-width: variables.$borderWidth;
 
   &-thin { border-width: 0.0625em; }
-  &-regular { border-width: spacing.$borderWidth; }
-  &-thick { border-width: spacing.$borderThick; }
-  &-thicker { border-width: spacing.$borderThicker; }
+  &-regular { border-width: variables.$borderWidth; }
+  &-thick { border-width: variables.$borderThick; }
+  &-thicker { border-width: variables.$borderThicker; }
 
   &-top {
     border-right-width: 0;

web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss

@@ -1,4 +1,4 @@
-@use "../variables/colours";
+@use "../variables";
 
 @use "sass:color";
 
@@ -12,13 +12,13 @@
 
   @each $button in $buttons {
     #{$button}.#{$name} {
-      color: colours.$white;
+      color: variables.$white;
       background: $hex;
       border-color: $hex;
 
       &:hover,
       &:focus {
-        color: colours.$white;
+        color: variables.$white;
         background: color.adjust($hex, $lightness: 10%);
         border-color: color.adjust($hex, $lightness: 10%);
       }

web/app/themes/badegg/resources/css/global/mixins/_generate-colour-classes.scss

@@ -1,5 +1,5 @@
 @use "text-contrast";
-@use "../variables/colours";
+@use "../variables";
 
 @use "sass:color";
 
@@ -24,11 +24,11 @@
         @include text-contrast.text_contrast(color.invert($hex));
         background: color.invert($hex);
         @if($name == "white") {
-          color: colours.$white;
-          background: colours.$primary;
+          color: variables.$white;
+          background: variables.$primary;
         } @else if($name == "black") {
-          color: colours.$white;
-          background: colours.$primary-lighter;
+          color: variables.$white;
+          background: variables.$primary-lighter;
         } @else {
           @include text-contrast.text_contrast(color.invert($hex));
           background: color.invert($hex);

web/app/themes/badegg/resources/css/global/mixins/_text-contrast.scss

@@ -1,11 +1,11 @@
-@use "../variables/colours";
-
 @use "sass:color";
 @use "sass:math";
 
-@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
+@use "../variables";
+
+@mixin text-contrast($n, $dark: variables.$black, $light: variables.$white, $cutoff: 1.667) {
   $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
-  $light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
+  $light-color: math.round((color.channel(variables.$white, "red") * 299) + (color.channel(variables.$white, "green") * 587) + math.div((color.channel(variables.$white, "blue") * 114), 1000));
 
   @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
     color: $light;

web/app/themes/badegg/resources/css/global/variables/_spacing.scss

@@ -17,12 +17,13 @@ $sectionLarge:          5.000em;
 $sectionLarger:         7.500em;
 $sectionLargest:       10.000em;
 
+$containerLarger:      87.000em;
 $containerLarge:       73.125em;
 $containerMedium:      60.000em;
 $containerSmall:       50.000em;
 $containerNarrow:      34.000em;
 
-$innerLarger:           5.000em;
+$innerLargest:          5.000em;
 $innerLarger:           3.000em;
 $innerLarge:            2.000em;
 $innerMedium:           1.500em;

web/app/themes/badegg/resources/css/plugins/_contact-form-7.scss

@@ -1,4 +1,4 @@
-@use "../global/variables/colours";
+@use "../global/variables";
 
 .wpcf7 .screen-reader-response {
   display: none;
@@ -11,11 +11,11 @@
 
   padding: 1em 0 0;
   margin-top: 2em;
-  border: 1px solid colours.$grey-light;
+  border: 1px solid variables.$grey-light;
   border-width: 1px 0 0;
 
   .knockout & {
-    border-color: rgba(colours.$white, 0.3);
+    border-color: rgba(variables.$white, 0.3);
   }
 }
 

web/app/themes/badegg/resources/css/plugins/_mce.scss

@@ -1,14 +1,14 @@
-@use "../global/variables/colours";
+@use "../global/variables";
 
 #mce-responses {
   .response {
     padding: 0 0 1em;
     margin: 0 0 1em;
     font-size: 0.875em;
-    border-bottom: 1px solid colours.$grey-lighter;
+    border-bottom: 1px solid variables.$grey-lighter;
   }
 }
 
 .knockout #mce-responses .response {
-  border-bottom-color: rgba(colours.$white, 0.3);
+  border-bottom-color: rgba(variables.$white, 0.3);
 }