Skip to content

Refactor SCSS color definitions to use color-mix removing deprecated sass #747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pasqu4le merged 1 commit into from
Feb 14, 2025
Merged

Refactor SCSS color definitions to use color-mix removing deprecated sass #747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 21 additions & 12 deletions modules/mod_ginger_foundation/lib/css/src/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@

@keyframes outline-animate {
0% {
outline-offset: .5rem
outline-offset: 0.5rem;
}

to {
outline-offset: -.1rem
outline-offset: -0.1rem;
}
}

*:focus {
outline: 0.2rem solid #51CBEE;
animation: outline-animate .1s linear 0s 1 normal;
outline: 0.2rem solid #51cbee;
animation: outline-animate 0.1s linear 0s 1 normal;
animation-fill-mode: forwards;
}

.visually-hidden {
position: absolute !important;
clip: rect(1px,1px,1px,1px);
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
Expand Down Expand Up @@ -84,7 +84,9 @@ body {
}
}

a, a:hover, a:active {
a,
a:hover,
a:active {
color: $mainThemeColor;
}

Expand All @@ -99,7 +101,14 @@ img {
border-radius: 0;
}

h1, h2, h3, h4, p, ol, ul, table {
h1,
h2,
h3,
h4,
p,
ol,
ul,
table {
margin: 0 0 1em 0;
}

Expand Down Expand Up @@ -136,15 +145,14 @@ h3 {
margin-bottom: 0;
}


%cf {
&:before {
content: '';
content: "";
display: table;
}

&:after {
content: '';
content: "";
display: table;
clear: both;
}
Expand Down Expand Up @@ -177,7 +185,8 @@ figure {
padding-top: 56.25%;
position: relative;

video, iframe {
video,
iframe {
height: 100%;
width: 100%;
position: absolute;
Expand All @@ -190,7 +199,7 @@ figcaption {
@include size(margin-top, 5);
position: relative;
@include size(font-size, 14);
color: lighten($typographyColor, 50%);
color: color-mix(in srgb, $typographyColor, white, 50%);

p {
display: inline-block;
Expand Down
7 changes: 4 additions & 3 deletions modules/mod_ginger_foundation/lib/css/src/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
@extend %btn;
}

[class^="btn--"], [class*=" btn--"],
[class^="btn--"],
[class*=" btn--"],
button[type="submit"] {
@extend %btn--primary;
}
Expand All @@ -39,9 +40,9 @@ button[type="submit"] {
&:focus,
&:focus:active,
&.is-active {
background-color: darken($mainThemeColor, 5);
background-color: color-mix(in srgb, $mainThemeColor, black, 5%);
color: $white;
border-color: darken($mainThemeColor, 5);
border-color: color-mix(in srgb, $mainThemeColor, black, 5%);
}
}

Expand Down
10 changes: 5 additions & 5 deletions modules/mod_ginger_foundation/lib/css/src/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,27 @@ form {
width: 100%;
@include size(padding, 4, 10, 0);
@include size(height, 38);
border: 1px solid darken($mainThemeColor, 15);
border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
border-radius: 3px;
line-height: 1;
font-family: $primaryFontFamily;
}

textarea {
border: 1px solid darken($mainThemeColor, 15);
border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
border-radius: 3px;
}

.form-control {
border: 1px solid darken($mainThemeColor, 15);
border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
border-radius: 3px;
}

select {
width: 100%;
@include size(padding, 0, 10);
@include size(height, 38);
border: 1px solid darken($mainThemeColor, 15);
border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
border-radius: 3px;
@include size(line-height, 38);
font-family: $primaryFontFamily;
Expand All @@ -45,7 +45,7 @@ form {
}

.form-group__input:after {
content: '!';
content: "!";
display: block;
width: 25px;
height: 25px;
Expand Down
24 changes: 12 additions & 12 deletions modules/mod_ginger_foundation/lib/css/src/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
$black: #000;
$white: #FFF;
$alto: #DDD;
$white: #fff;
$alto: #ddd;
$error: #a94442;
$ginger: #FE7600;
$ginger: #fe7600;

$bodyBgColor: #EBEBEB;
$bodyBgColor: #ebebeb;
$bodyFontFamily: arial, times;
$primaryFontFamily: $bodyFontFamily, arial, times;
$secondaryFontFamily: arial, times;

$typographyColor: #000;
$mainThemeColor: #0087D2;
$secondaryThemeColor: #0087D2;
$tertiaryThemeColor: #0087D2;
$mainThemeColor: #0087d2;
$secondaryThemeColor: #0087d2;
$tertiaryThemeColor: #0087d2;

$btnRadius: 18px;
$interfaceRadius: 4px;
Expand All @@ -26,18 +26,18 @@ $globalNavHeight: 70;
$contentGroupNavHeight: 85;
$minifiedcontentGroupNavHeight: 55;

$listBgColor: #EBEBEB;
$listHeaderBgColor: darken($listBgColor, 10);
$listBgColor: #ebebeb;
$listHeaderBgColor: color-mix(in srgb, $listBgColor, black, 10%);

$relatedItemsBgColor: #1F1F25;
$relatedItemsBgColor: #1f1f25;
$relatedItemsTextColor: $white;
$relatedItemsHeaderBgColor: #2C2E36;
$relatedItemsHeaderBgColor: #2c2e36;

$menuMobileActionsBgColor: #e0e0e0;
$menuMobileBgColor: #f1f1f1;

$footerHeight: 300;
$footerBgColor: #23232A;
$footerBgColor: #23232a;

$standardOffset: 30;

Expand Down
2 changes: 1 addition & 1 deletion modules/mod_ginger_foundation/lib/css/src/blocks/_category-of.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

i {
@include size(margin-right, 8);
color: darken($mainThemeColor, 20);
color: color-mix(in srgb, $mainThemeColor, black, 20%);
}
}

Expand Down
19 changes: 9 additions & 10 deletions modules/mod_ginger_foundation/lib/css/src/blocks/_content-group-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ body.has-content-group {
background-size: cover;
background-position: center center;
text-align: center;
box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.15);
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.15);
transition: height 0.3s;

&:hover,
Expand All @@ -22,14 +22,14 @@ body.has-content-group {
}

&:after {
content: '';
content: "";
width: 100%;
height: 100%;
position: absolute;
@include size(top, 0);
@include size(left, 0);
z-index: 200;
background-color: rgba($mainThemeColor, .4);
background-color: rgba($mainThemeColor, 0.4);
}

&.is-minified {
Expand All @@ -53,11 +53,11 @@ body.has-content-group {
background-position: center center;
text-align: center;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
}

.content-group-nav__banner__title {
.content-group-nav__banner__title {
@include vertical-align();
z-index: 300;
@include size(font-size, 28);
Expand All @@ -66,7 +66,7 @@ body.has-content-group {
text-shadow: 0px 1px 10px rgba(50, 50, 50, 1);

&:after {
content: '';
content: "";
display: inline-block;
position: relative;
top: -6px;
Expand Down Expand Up @@ -102,7 +102,7 @@ body.has-content-group {
text-align: left;

&.active a {
background: darken($mainThemeColor, 5);
background: color-mix(in srgb, $mainThemeColor, black, 5%);
}
}

Expand All @@ -117,7 +117,7 @@ body.has-content-group {
&:active,
&:hover,
&.is-active {
background: darken($mainThemeColor, 5);
background: color-mix(in srgb, $mainThemeColor, black, 5%);
text-decoration: none;
}
}
Expand All @@ -142,4 +142,3 @@ body.has-content-group {
@include size(top, $globalNavHeight);
}
}

15 changes: 7 additions & 8 deletions modules/mod_ginger_foundation/lib/css/src/blocks/_global-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
@include size(font-size, 25);
}


&.is-active {
right: 15px;
z-index: 2100;
Expand Down Expand Up @@ -49,12 +48,12 @@
}
}

[type=text] {
[type="text"] {
display: block;
border: none;
width: 100%;
height: 100%;
background-color: #FFF;
background-color: #fff;
background-position: 10px center;
background-repeat: no-repeat;
background-size: 30px 30px;
Expand All @@ -67,7 +66,7 @@
}
}

[type=submit] {
[type="submit"] {
display: none;
}
}
Expand All @@ -84,9 +83,9 @@
width: 100%;
@include size(padding, 10, 15);
background: $white;
border: 1px solid rgba(0,0,0,.15);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

ul {
@include size(padding-left, 20);
Expand All @@ -104,7 +103,7 @@
}

a {
color: lighten($typographyColor, 20%);
color: color-mix(in srgb, $typographyColor, white, 20%);
}

&.is-scrollable {
Expand Down Expand Up @@ -144,7 +143,7 @@
.search-suggestions__searchform {
@include size(height, $globalNavHeight);

[type=text] {
[type="text"] {
@include size(line-height, $globalNavHeight);
}
}
Expand Down
Loading