framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replace deprecated scss

Browse Source
This commit is contained in:
Steve Ross
2025-10-30 22:01:23 +00:00
parent 010160ce46
commit b258482ca3
17 changed files with 156 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
resources/css/app.scss
View File

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

41
resources/css/components/_button.scss
View File

@@ -1,3 +1,6 @@
@use "../global/fonts";
@use "../global/variables/colours";
button { button {
&%block, &%block,
&.block { &.block {
@@ -19,11 +22,11 @@ input[type="submit"] {
.button { .button {
display: inline-block; display: inline-block;
padding: 0.5em 1.25em; padding: 0.5em 1.25em;
border: 0.125em solid $black; border: 0.125em solid colours.$black;
border-radius: 0.25em; border-radius: 0.25em;
background-color: $black; background-color: colours.$black;
color: $white; color: colours.$white;
font-family: $font; font-family: fonts.$font;
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
white-space: normal; white-space: normal;
@@ -31,45 +34,45 @@ input[type="submit"] {
transition: 300ms ease all; transition: 300ms ease all;
.knockout & { .knockout & {
background-color: $white; background-color: colours.$white;
border-color: $white; border-color: colours.$white;
color: currentcolor; color: currentcolor;
} }
&:hover, &:hover,
&:focus { &:focus {
color: $white; color: colours.$white;
text-decoration: none; text-decoration: none;
background-color: rgba($black, 0.5); background-color: rgba(colours.$black, 0.5);
border-color: rgba($black, 0.5); border-color: rgba(colours.$black, 0.5);
.knockout & { .knockout & {
background-color: rgba($white, 0.5); background-color: rgba(colours.$white, 0.5);
border-color: rgba($white, 0.5); border-color: rgba(colours.$white, 0.5);
color: currentcolor; color: currentcolor;
} }
} }
&.outline { &.outline {
border-color: $black; border-color: colours.$black;
background-color: transparent; background-color: transparent;
color: $black; color: colours.$black;
&:hover, &:hover,
&:focus { &:focus {
background-color: $black; background-color: colours.$black;
color: $white; color: colours.$white;
} }
.knockout & { .knockout & {
@media screen { @media screen {
border-color: $white; border-color: colours.$white;
color: $white; color: colours.$white;
&:hover, &:hover,
&:focus { &:focus {
background-color: $white; background-color: colours.$white;
color: $black; color: colours.$black;
} }
} }
} }

44
resources/css/components/_forms.scss
View File

@@ -1,28 +1,32 @@
@use "../global/fonts";
@use "../global/variables/breakpoints";
@use "../global/variables/colours";
textarea { textarea {
min-height: 10.375em; min-height: 10.375em;
} }
input, input,
textarea { textarea {
color: $grey; color: colours.$grey;
background: white; background: white;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
font-family: $font; font-family: fonts.$font;
width: 100%; width: 100%;
padding: 0.875em 1em; padding: 0.875em 1em;
margin: 0 0 1em; margin: 0 0 1em;
// border-radius: 0.125em; // border-radius: 0.125em;
border: 0.0625em solid rgba($black, 0.1); border: 0.0625em solid rgba(colours.$black, 0.1);
outline: none; outline: none;
transition: all 300ms ease; transition: all 300ms ease;
&::placeholder { &::placeholder {
color: $grey-light; color: colours.$grey-light;
} }
&:focus { &:focus {
box-shadow: 0 0.25em 0.5em rgba($black, 0.1); box-shadow: 0 0.25em 0.5em rgba(colours.$black, 0.1);
} }
} }
@@ -71,11 +75,11 @@ select {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
font-family: $font; font-family: fonts.$font;
} }
/* stylelint-enable selector-class-pattern */ /* stylelint-enable selector-class-pattern */
@media (min-width: $screen-sm) { @media (min-width: breakpoints.$screen-sm) {
&.half { &.half {
flex: 0 0 calc(50% - 1em); flex: 0 0 calc(50% - 1em);
max-width: calc(50% - 1em); max-width: calc(50% - 1em);
@@ -107,7 +111,7 @@ select {
margin: 2em 0 0; margin: 2em 0 0;
} }
@media (min-width: $screen-sm) { @media (min-width: breakpoints.$screen-sm) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -164,8 +168,8 @@ select {
} }
&-not-valid-tip { &-not-valid-tip {
background: $error; background: colours.$error;
color: $white; color: colours.$white;
padding: 0.5em 1em; padding: 0.5em 1em;
border-radius: 0 0 0.5em 0.5em; border-radius: 0 0 0.5em 0.5em;
font-weight: 700; font-weight: 700;
@@ -177,11 +181,11 @@ select {
width: calc(100% - 1em); width: calc(100% - 1em);
flex: 0 0 calc(100% - 1em); flex: 0 0 calc(100% - 1em);
text-align: center; text-align: center;
color: $white; color: colours.$white;
font-family: $font; font-family: fonts.$font;
font-weight: 700; font-weight: 700;
background: $black; background: colours.$black;
border: 0.125em solid $white; border: 0.125em solid colours.$white;
padding: 0.5em 1em; padding: 0.5em 1em;
border-radius: 0.5em; border-radius: 0.5em;
} }
@@ -207,7 +211,7 @@ select {
display: block; display: block;
width: 1.25em; width: 1.25em;
height: 1.25em; height: 1.25em;
border: 0.125em solid $black; border: 0.125em solid colours.$black;
background: transparent; background: transparent;
color: currentcolor; color: currentcolor;
@@ -250,15 +254,15 @@ select {
&.sent { &.sent {
.wpcf7-response-output { .wpcf7-response-output {
background: $success; background: colours.$success;
border-color: $white; border-color: colours.$white;
} }
} }
&.invalid { &.invalid {
.wpcf7-response-output { .wpcf7-response-output {
background: $error; background: colours.$error;
border-color: $white; border-color: colours.$white;
} }
} }
@@ -277,7 +281,7 @@ select {
.wpcf7 { .wpcf7 {
&-checkbox { &-checkbox {
input[type="checkbox"] { input[type="checkbox"] {
border-color: $white; border-color: colours.$white;
} }
} }
} }

8
resources/css/global/_framework.scss
View File

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

8
resources/css/global/_mixins.scss
View File

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

33
resources/css/global/_typography.scss
View File

@@ -1,3 +1,8 @@
@use "fonts";
@use "variables/breakpoints";
@use "variables/colours";
@use "variables/spacing";
.wysiwyg { .wysiwyg {
*:first-child { *:first-child {
margin-top: 0; margin-top: 0;
@@ -14,9 +19,9 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
color: $primary; color: colours.$primary;
font-weight: 700; font-weight: 700;
font-family: $font; font-family: fonts.$font;
line-height: 1.1em; line-height: 1.1em;
margin: 1.5em 0 0.25em; margin: 1.5em 0 0.25em;
padding: 0; padding: 0;
@@ -27,7 +32,7 @@ h6 {
@media screen { @media screen {
.knockout & { .knockout & {
color: $white; color: colours.$white;
} }
} }
} }
@@ -43,7 +48,7 @@ h3 { font-size: 1.25em; }
h4, h4,
h5 { font-size: 1.15em; } h5 { font-size: 1.15em; }
@media (min-width: $screen-sm) { @media (min-width: breakpoints.$screen-sm) {
h1 { font-size: 2.5em; } h1 { font-size: 2.5em; }
h2 { font-size: 2em; } h2 { font-size: 2em; }
h3 { font-size: 1.5em; } h3 { font-size: 1.5em; }
@@ -58,8 +63,8 @@ p,
li, li,
td, td,
label { label {
color: $grey; color: colours.$grey;
font-family: $font; font-family: fonts.$font;
font-weight: 400; font-weight: 400;
line-height: 1.5em; line-height: 1.5em;
margin: 0 0 0.8em; margin: 0 0 0.8em;
@@ -67,30 +72,30 @@ label {
@media screen { @media screen {
.knockout & { .knockout & {
color: $white; color: colours.$white;
} }
} }
} }
a { a {
color: $primary; color: colours.$primary;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
transition: all 300ms ease; transition: all 300ms ease;
&:hover, &:hover,
&:focus { &:focus {
color: $primary-dark; color: colours.$primary-dark;
text-decoration: none; text-decoration: none;
} }
@media screen { @media screen {
.knockout & { .knockout & {
color: $white; color: colours.$white;
&:hover, &:hover,
&:focus { &:focus {
color: $primary-light; color: colours.$primary-light;
} }
} }
} }
@@ -126,12 +131,12 @@ ol {
hr { hr {
margin: 1.5em auto 2em; margin: 1.5em auto 2em;
height: 0; height: 0;
border: 0 solid $grey-light; border: 0 solid colours.$grey-light;
border-width: $borderThin 0 0; border-width: spacing.$borderThin 0 0;
@media screen { @media screen {
.knockout & { .knockout & {
border-color: $white; border-color: colours.$white;
} }
} }
} }

6
resources/css/global/_variables.scss
View File

@@ -1,3 +1,3 @@
@import "variables/colours"; @use "variables/colours";
@import "variables/breakpoints"; @use "variables/breakpoints";
@import "variables/spacing"; @use "variables/spacing";

4
resources/css/global/framework/_breakpoints.scss
View File

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

14
resources/css/global/framework/_colours.scss
View File

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

4
resources/css/global/framework/_normalise.scss
View File

@@ -1,3 +1,5 @@
@use "../variables/colours";
* { * {
box-sizing: border-box; box-sizing: border-box;
backface-visibility: hidden; // removes jagged edges on rotated elements backface-visibility: hidden; // removes jagged edges on rotated elements
@@ -11,7 +13,7 @@ body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: $white; background: colours.$white;
} }
.visually-hidden { .visually-hidden {

47
resources/css/global/framework/_spacing.scss
View File

@@ -1,23 +1,26 @@
@use "../variables/colours";
@use "../variables/spacing";
.brand { .brand {
display: block; display: block;
width: $brandWidth; width: spacing.$brandWidth;
height: $brandHeight; height: spacing.$brandHeight;
svg, svg,
img { img {
display: block; display: block;
width: $brandWidth; width: spacing.$brandWidth;
height: $brandHeight; height: spacing.$brandHeight;
} }
.knockout & { .knockout & {
@media screen { @media screen {
.fill-primary { .fill-primary {
fill: $white; fill: colours.$white;
} }
.fill-grey { .fill-grey {
fill: rgba($white, 0.8); fill: rgba(colours.$white, 0.8);
} }
} }
} }
@@ -27,28 +30,28 @@
width: 90%; width: 90%;
margin: auto; margin: auto;
&-large { max-width: $containerLarge; } &-large { max-width: spacing.$containerLarge; }
&-medium { max-width: $containerMedium; } &-medium { max-width: spacing.$containerMedium; }
&-small { max-width: $containerSmall; } &-small { max-width: spacing.$containerSmall; }
&-narrow { max-width: $containerNarrow; } &-narrow { max-width: spacing.$containerNarrow; }
} }
.section { .section {
padding: $sectionMedium 0; padding: spacing.$sectionMedium 0;
&-small { padding: $sectionSmall 0; } &-small { padding: spacing.$sectionSmall 0; }
&-medium { padding: $sectionMedium 0; } &-medium { padding: spacing.$sectionMedium 0; }
&-large { padding: $sectionLarge 0; } &-large { padding: spacing.$sectionLarge 0; }
&-zero-top { padding-top: 0; } &-zero-top { padding-top: 0; }
&-zero-bottom { padding-bottom: 0; } &-zero-bottom { padding-bottom: 0; }
} }
.inner { .inner {
padding: $innerMedium; padding: spacing.$innerMedium;
&-small { padding: $innerSmall; } &-small { padding: spacing.$innerSmall; }
&-large { padding: $innerLarge; } &-large { padding: spacing.$innerLarge; }
&-zero-x { &-zero-x {
padding-left: 0; padding-left: 0;
@@ -62,7 +65,7 @@
} }
.rounded { .rounded {
border-radius: $borderRadius; border-radius: spacing.$borderRadius;
&-top { &-top {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
@@ -77,12 +80,12 @@
.border { .border {
border-style: solid; border-style: solid;
border-width: $borderWidth; border-width: spacing.$borderWidth;
&-thin { border-width: 0.0625em; } &-thin { border-width: 0.0625em; }
&-regular { border-width: $borderWidth; } &-regular { border-width: spacing.$borderWidth; }
&-thick { border-width: $borderThick; } &-thick { border-width: spacing.$borderThick; }
&-thicker { border-width: $borderThicker; } &-thicker { border-width: spacing.$borderThicker; }
&-top { &-top {
border-right-width: 0; border-right-width: 0;

6
resources/css/global/mixins/_generate-button-classes.scss
View File

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

4
resources/css/global/mixins/_generate-colour-classes.scss
View File

@@ -1,3 +1,5 @@
@use "text-contrast";
@use "sass:color"; @use "sass:color";
@mixin generate_colour_classes($name, $hex) { @mixin generate_colour_classes($name, $hex) {
@@ -18,7 +20,7 @@
background-color: $hex; background-color: $hex;
::selection { ::selection {
@include text_contrast(color.invert($hex)); @include text-contrast.text_contrast(color.invert($hex));
background: color.invert($hex); background: color.invert($hex);
} }
} }

10
resources/css/global/mixins/_text-contrast.scss
View File

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

4
resources/css/global/variables/_colours.scss
View File

@@ -8,8 +8,8 @@ $alert: #eed202;
//== Brand Colours //== Brand Colours
$primary: #337ab7; $primary: #337ab7;
$secondary: #5bc0de; $secondary: #5bc0de;
$tertiary: invert($primary); $tertiary: color.invert($primary);
$quaternary: invert($secondary); $quaternary: color.invert($secondary);
//== Primary Tints //== Primary Tints
$primary-darkest: color.adjust($primary, $lightness: -30%); $primary-darkest: color.adjust($primary, $lightness: -30%);

12
resources/css/plugins/_contact-form-7.scss
View File

@@ -1,19 +1,21 @@
@use "../global/variables/colours";
.wpcf7 .screen-reader-response { .wpcf7 .screen-reader-response {
display: none; display: none;
} }
.wpcf7-response-output { .wpcf7-response-output {
@extend p; @extend p !optional;
@extend .container; @extend .container !optional;
@extend .container-narrow; @extend .container-narrow !optional;
padding: 1em 0 0; padding: 1em 0 0;
margin-top: 2em; margin-top: 2em;
border: 1px solid $grey-light; border: 1px solid colours.$grey-light;
border-width: 1px 0 0; border-width: 1px 0 0;
.knockout & { .knockout & {
border-color: rgba($white, 0.3); border-color: rgba(colours.$white, 0.3);
} }
} }

6
resources/css/plugins/_mce.scss
View File

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