diff --git a/package.json b/package.json index 8995759..63ef59b 100644 --- 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 index fc01a81..e959ed6 100644 --- 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 index 5a1d444..1d359e3 100644 --- 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 index f1be0bf..71cd62d 100644 --- 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