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;
}
}
}