Merge pull request #94 from werkbot/hotfix/2.1.17/nested-rules-deprec…

…ation-fix fix: moved post-nested top-level style rules to separate selectors
werkbot · Jul 29, 2024 · 27271cc · 27271cc
2 parents ef0dcdf + a1842c0
commit 27271cc
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "werkbot-framewerk",
-  "version": "2.1.16",
+  "version": "2.1.17",
   "description": "A framework of css and javascript that Werkbot uses as a foundation to build our websites.",
   "main": "js/form.js",
   "directories": {

diff --git a/sass/components/button/_button.scss b/sass/components/button/_button.scss
@@ -83,16 +83,17 @@ $component-button-properties: $default-component-button-properties !default;
   @each $variantClass, $variantProperties in getThemeProperty(variants, $component-button-properties) {
     &.#{$variantClass}{
       @each $styleRule, $styleValue in $variantProperties {
-        @if($styleRule == 'hoverStyle'){
-          &:hover{
-            @each $hoverStyleRule, $hoverStyleValue in $styleValue {
-              #{$hoverStyleRule}: #{$hoverStyleValue};
-            }
-          }
-        } @else {
+        @if ($styleRule != 'hoverStyle') {
           #{$styleRule}: #{$styleValue};
         }
       }
+
+      &:hover {
+        @each $hoverStyleRule, $hoverStyleValue in map-get($variantProperties, 'hoverStyle') {
+          #{$hoverStyleRule}: #{$hoverStyleValue};
+        }
+      }
+
     }
   }
 

diff --git a/sass/components/form/components/_text-with-button.scss b/sass/components/form/components/_text-with-button.scss
@@ -67,12 +67,40 @@ $component-form-text-with-button-properties: $default-component-form-text-with-b
       right: 0;
       height: 100%;
     }
+
     button, input[type="submit"] {
       @include button-input-style;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin: 0;
-      border-radius: getThemeProperty(buttonBorderRadius, $component-form-text-with-button-properties);
+      /*
+        & {} repeats the above selector after nested :hover rules instead of pulling declarations up to the top level
+        https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+
+        Example output CSS:
+          button, input[type="submit"] {
+            padding: 10px 40px;
+          }
+
+          button:hover, input[type="submit"]:hover {}
+
+          button, input[type="submit"] {
+            padding-top: 0; // Overwrites padding-top from above by appearing later in the CSS
+          }
+
+
+        Instead of:
+          button, input[type="submit"] {
+            padding: 10px 40px;
+            padding-top: 0;
+          }
+
+          button:hover, input[type="submit"]:hover {}
+      */
+      & {
+        padding-top: 0;
+        padding-bottom: 0;
+        margin: 0;
+        border-radius: getThemeProperty(buttonBorderRadius, $component-form-text-with-button-properties);
+      }
     }
+
   }
 }
diff --git a/sass/variables/_theme.scss b/sass/variables/_theme.scss
@@ -14,8 +14,8 @@ $default-theme-properties: (
   textColorDark: #333333,
 
   // Fonts
-  fontHeader: "Montserrat",
-  fontText: "Roboto",
+  fontHeader: ("Montserrat", sans-serif),
+  fontText: ("Roboto", sans-serif),
   fontIcon: "Font Awesome 6 Free",
 
   // Layout