framework/bedrock
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

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

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