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

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

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

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

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

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

@@ -1,3 +1,3 @@
@import "variables/colours";
@import "variables/breakpoints";
@import "variables/spacing";
@use "variables/colours";
@use "variables/breakpoints";
@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} {
@media (min-width: $value) {
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 {
color: $white;
background: $primary;
color: colours.$white;
background: colours.$primary;
}
@each $color, $hex in $colors {
@include generate_colour_classes($color, $hex);
@include generate_button_colors($color, $hex);
@each $color, $hex in colours.$colors {
@include generate-colour-classes.generate_colour_classes($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;
backface-visibility: hidden; // removes jagged edges on rotated elements
@@ -11,7 +13,7 @@ body,
html {
margin: 0;
padding: 0;
background: $white;
background: colours.$white;
}
.visually-hidden {

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

@@ -1,23 +1,26 @@
@use "../variables/colours";
@use "../variables/spacing";
.brand {
display: block;
width: $brandWidth;
height: $brandHeight;
width: spacing.$brandWidth;
height: spacing.$brandHeight;
svg,
img {
display: block;
width: $brandWidth;
height: $brandHeight;
width: spacing.$brandWidth;
height: spacing.$brandHeight;
}
.knockout & {
@media screen {
.fill-primary {
fill: $white;
fill: colours.$white;
}
.fill-grey {
fill: rgba($white, 0.8);
fill: rgba(colours.$white, 0.8);
}
}
}
@@ -27,28 +30,28 @@
width: 90%;
margin: auto;
&-large { max-width: $containerLarge; }
&-medium { max-width: $containerMedium; }
&-small { max-width: $containerSmall; }
&-narrow { max-width: $containerNarrow; }
&-large { max-width: spacing.$containerLarge; }
&-medium { max-width: spacing.$containerMedium; }
&-small { max-width: spacing.$containerSmall; }
&-narrow { max-width: spacing.$containerNarrow; }
}
.section {
padding: $sectionMedium 0;
padding: spacing.$sectionMedium 0;
&-small { padding: $sectionSmall 0; }
&-medium { padding: $sectionMedium 0; }
&-large { padding: $sectionLarge 0; }
&-small { padding: spacing.$sectionSmall 0; }
&-medium { padding: spacing.$sectionMedium 0; }
&-large { padding: spacing.$sectionLarge 0; }
&-zero-top { padding-top: 0; }
&-zero-bottom { padding-bottom: 0; }
}
.inner {
padding: $innerMedium;
padding: spacing.$innerMedium;
&-small { padding: $innerSmall; }
&-large { padding: $innerLarge; }
&-small { padding: spacing.$innerSmall; }
&-large { padding: spacing.$innerLarge; }
&-zero-x {
padding-left: 0;
@@ -62,7 +65,7 @@
}
.rounded {
border-radius: $borderRadius;
border-radius: spacing.$borderRadius;
&-top {
border-bottom-right-radius: 0;
@@ -77,12 +80,12 @@
.border {
border-style: solid;
border-width: $borderWidth;
border-width: spacing.$borderWidth;
&-thin { border-width: 0.0625em; }
&-regular { border-width: $borderWidth; }
&-thick { border-width: $borderThick; }
&-thicker { border-width: $borderThicker; }
&-regular { border-width: spacing.$borderWidth; }
&-thick { border-width: spacing.$borderThick; }
&-thicker { border-width: spacing.$borderThicker; }
&-top {
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";
@mixin generate_button_colors($name, $hex) {
@@ -10,13 +12,13 @@
@each $button in $buttons {
#{$button}.#{$name} {
color: $white;
color: colours.$white;
background: $hex;
border-color: $hex;
&:hover,
&:focus {
color: $white;
color: colours.$white;
background: 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";
@mixin generate_colour_classes($name, $hex) {
@@ -18,7 +20,7 @@
background-color: $hex;
::selection {
@include text_contrast(color.invert($hex));
@include text-contrast.text_contrast(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:math";
@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.667) {
$brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
$light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
@mixin text-contrast($n, $dark: colours.$black, $light: colours.$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));
@if abs($brightness) < (math.div($light-color, $cutoff)) {
@if math.abs($brightness) < (math.div($light-color, $cutoff)) {
color: $light;
}

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

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