Skip to content

Commit

Permalink
SHS-5967: FE Performance: CSS Optimization - Decanter Imports (#1716)
Browse files Browse the repository at this point in the history 
* SHS-5967: FE Performance: CSS Optimization - Decanter Imports.
  • Loading branch information
@mariannuar
mariannuar authored Jan 27, 2025
1 parent 6bf1ce4 commit cb6a25d
Show file tree
Hide file tree
Showing 3 changed files with 393 additions and 17 deletions.
17 changes: 3 additions & 14 deletions docroot/themes/humsci/humsci_basic/src/scss/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,33 +19,22 @@ $hb-root-font-size: 10px !default;
// Normalize, Vendors
'decanter/core/src/scss/core/normalize',

// Utilities
// Decanter no markup will not compile any CSS unless used.
// It brings in everything in the utilities, like variables, mixins,
// functions, and placeholders.
'decanter/core/src/scss/decanter-no-markup',
// Grid
// Pulls in the flexbox based grid system
'decanter/core/src/scss/decanter-grid',

// Core elements
// Decanter font imports and sources
'decanter/core/src/scss/core/fonts',
'decanter/core/src/scss/core/helpers',
'decanter/core/src/scss/core/base',
'decanter/core/src/scss/elements/image',
'decanter/core/src/scss/elements/embed',

// Grid
// Pulls in the flexbox based grid system
'decanter/core/src/scss/decanter-grid',

// Components
// Below here are Decanter specific components we probably want the styles for:
'decanter/core/src/scss/components/brand-bar',
'decanter/core/src/scss/components/lockup',
'decanter/core/src/scss/components/global-footer',
'decanter/core/src/scss/components/local-footer',
'decanter/core/src/scss/components/masthead',
'decanter/core/src/scss/components/skiplinks',
'decanter/core/src/scss/components/alert',

// =====================================================================
// HUMSCI BASIC
Expand Down
268 changes: 266 additions & 2 deletions docroot/themes/humsci/humsci_basic/src/scss/components/_global-message.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,36 @@
}
}

a {
&.su-button,
&.su-button--secondary {
@include button-secondary;
}

&.su-button--big {
@include button-big;
}
}

&--error,
&--success,
&--info {
a {
&.su-button,
&.su-button--secondary,
&.su-button--big {
box-shadow: $su-button-stroke $su-color-white;
color: color(light-text, $su-alert-colors);

&:hover,
&:focus {
box-shadow: $su-button-stroke $su-color-white;
color: color(light-text, $su-alert-colors);
}
}
}
}

&--text-light {
.hb-dark-pattern & a,
a:not([class]),
Expand All @@ -48,6 +78,35 @@
&:hover,
&:focus {
color: #ebebeb;
text-decoration: underline;
}
}

.su-alert__text {
a {
&:hover,
&:focus {
background-color: $su-color-white;
color: $su-color-black;
}
}
}

.su-alert__footer {
.su-link {
&::after {
background: $su-color-white;
}
}
}

.su-alert__dismiss-button {
color: color(light-text, $su-alert-colors);

&:hover,
&:focus {
background-color: transparent;
color: $su-color-white;
}
}
}
Expand All @@ -73,29 +132,101 @@

&--error {
background-color: $su-color-bright-red;
color: color(light-text, $su-alert-colors);

a {
color: color(light-text, $su-alert-colors);

&:hover,
&:focus {
text-decoration: underline;
}

&.su-button,
&.su-button--secondary,
&.su-button--big {
background-color: color(error, $su-alert-colors);

&:hover,
&:focus {
background-color: color(error, $su-alert-colors);
}
}
}
}

&--success {
background-color: #00755a;

a {
&.su-button,
&.su-button--secondary,
&.su-button--big {
background-color: color(success, $su-alert-colors);

&:hover,
&:focus {
background-color: color(success, $su-alert-colors);
}
}
}
}

&--warning {
background-color: #eaab00;

a {
color: $su-color-black;

&:hover,
&:focus {
color: $su-color-black;
text-decoration: underline;
}

&.su-button,
&.su-button--secondary,
&.su-button--big {
background-color: color(warning, $su-alert-colors);
box-shadow: $su-button-stroke $su-color-black;
color: $su-color-black;

&:hover,
&:focus {
background-color: color(warning, $su-alert-colors);
box-shadow: $su-button-stroke $su-color-black;
color: $su-color-black;
}
}
}
}

&--info {
background-color: $su-color-bright-blue;

a {
&.su-button,
&.su-button--secondary,
&.su-button--big {
background-color: color(info, $su-alert-colors);

&:hover,
&:focus {
background-color: color(info, $su-alert-colors);
}
}
}
}

&__header {
margin-bottom: 1em;
width: 100%;
margin-right: hb-calculate-rems(20px);
order: 1;
flex-shrink: 1;

@include grid-media-min('lg') {
margin-right: hb-calculate-rems(26px);
order: 1;
flex-shrink: 1;
width: auto;
margin-bottom: 0;
}
Expand All @@ -108,6 +239,7 @@
font-size: hb-calculate-rems(17px);
text-transform: uppercase;
font-weight: hb-theme-font-weight(semibold);
letter-spacing: 0.1em;

&::after {
content: ':';
Expand All @@ -131,12 +263,104 @@

&__text {
margin-bottom: 0;

a {
color: $su-color-black;
text-decoration: underline;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

&:hover,
&:focus {
color: $su-color-black;
background-color: $su-color-digital-blue-light;
text-decoration: underline;
}

&.su-button,
&.su-button--secondary {
@include button-secondary;

background-color: color(default, $su-alert-colors);
box-shadow: $su-button-stroke $su-color-black;
color: color(dark-text, $su-alert-colors);

&:hover,
&:focus {
background-color: color(default, $su-alert-colors);
}
}

&.su-button--big {
@include button-big;

background-color: color(default, $su-alert-colors);
box-shadow: $su-button-stroke $su-color-black;
color: color(dark-text, $su-alert-colors);

&:hover,
&:focus {
background-color: color(default, $su-alert-colors);
color: color(dark-text, $su-alert-colors);
}
}
}
}

&__icon {
margin-right: hb-calculate-rems(5px);
display: inline-block;
max-width: hb-calculate-rems(20px);

i,
.su-far,
.su-fas {
font-style: normal;
}
}

&__dismiss {
@include responsive-spacing('margin', null null null 1);
order: 3;
height: 100%;
align-content: flex-end;
flex-shrink: 1;
text-align: right;

@include grid-media-max('xs') {
width: 100%;
}

.su-alert__dismiss-button {
padding: 0;
background-color: transparent;
text-transform: uppercase;
font-weight: hb-theme-font-weight(semibold);
color: color(dark-text, $su-alert-colors);
font-size: 1.7rem;
letter-spacing: 0.1em;

.su-far,
.su-fas,
.fas {
@include margin(null null null 0.5em);
}

i,
.su-far,
.su-fas,
.fas {
font-style: normal;
text-decoration: none;
}

&.su-text-black {
&:hover,
&:focus {
background-color: transparent;
color: $su-color-black;
}
}
}
}

.centered-container {
Expand All @@ -151,3 +375,43 @@
}
}
}

// Optional open footer area.
// -----------------------------------------------------------------------------
.su-alert__footer {
a {
color: color(dark-text, $su-alert-colors);
text-decoration: none;

&:hover,
&:focus {
color: color(dark-text, $su-alert-colors);
text-decoration: underline;
}
}

.su-link {
&::after {
background: color(dark-text, $su-alert-colors);
}

&:hover,
&:focus {
text-decoration: underline;

&::after {
background: color(dark-text, $su-alert-colors);
}
}
}
}

.su-alert__text+.su-alert__footer {
@include responsive-spacing('margin', 0 null null null);
}

.su-alert__dismiss~.su-alert__body {
@include grid-media-max('sm') {
@include margin(null null 1em null);
}
}
Loading

0 comments on commit cb6a25d

Please sign in to comment.