Skip to content

Commit

Permalink
feat(ffe-context-message): farge tweaks og styling for bruk på farget…
Browse files Browse the repository at this point in the history 
… bakgrunn

Små farge endringer, samt en ny modifier klasse som gir hvit bakgrunn i lightmode.
Denne brukes for å oppnå god nok farge kontrast på fargede bakgrunner.
Det er nå også ikoner uansett størrelse, så en del tilpasninger relatert til det
  • Loading branch information
@HeleneKassandra
HeleneKassandra committed Jan 17, 2022
1 parent 1d7fea2 commit c470f0a
Showing 1 changed file with 190 additions and 47 deletions.
237 changes: 190 additions & 47 deletions packages/ffe-context-message/less/ffe-context-message.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,12 @@
// --success - Success message
// --error - Error message
//
// Styleguide ffe-context-message.context-message.2
// Styleguide ffe-context-message.context-message.

.ffe-context-message-content {
align-items: center;
display: flex;
flex-direction: column;
flex-direction: row;
flex-wrap: nowrap;
padding: @ffe-spacing-sm;
text-align: left;
Expand All @@ -65,7 +65,7 @@
}

&__header {
&:extend(.ffe-h5);
&:extend(.ffe-strong-text);

color: @ffe-farge-svart;
margin-bottom: @ffe-spacing-2xs;
Expand All @@ -77,61 +77,58 @@
display: flex;
flex-shrink: 0;
justify-content: center;
margin-bottom: @app-margin;
background-color: @ffe-farge-hvit;
border: 2px solid;
border-radius: 50%;
height: 4em;
width: 4em;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-svart;
}
}
&-svg {
height: 2.2em;
width: 2.2em;
padding: @ffe-spacing-2xs;
fill: @ffe-farge-fjell;
margin-right: @ffe-spacing-sm;
height: 2em;
width: 2em;

@media (min-width: @breakpoint-sm) {
align-self: flex-start;
margin-bottom: 0;
height: 4em;
width: 4em;
.native & {
@media (prefers-color-scheme: dark) {
fill: @ffe-farge-vann-70;
background-color: @ffe-farge-svart;
}
}
}
}

@media (min-width: @breakpoint-sm) {
align-self: flex-start;
margin-bottom: 0;
margin-right: @ffe-spacing-lg;
}
&__icon-svg {
height: 2em;
width: 2em;
padding: @ffe-spacing-2xs;
fill: @ffe-farge-hvit;
}

&__close-button {
flex: 0 0 auto;
cursor: pointer;
color: @ffe-farge-moerkgraa;
fill: @ffe-farge-moerkgraa;
border: none;
box-sizing: content-box;
padding: @ffe-spacing-sm;
border: 2px solid transparent;
box-sizing: border-box;
padding-top: @ffe-spacing-xs;
outline: none;
background-color: transparent;
height: 1em;
width: 1em;
margin: 0.2rem 0.2rem 0 0;
align-self: start;
height: 3rem;
width: 3rem;

&:hover {
fill: @ffe-farge-svart;
}
&:focus {
outline: 2px solid @ffe-farge-vann;
border: 2px solid @ffe-farge-vann;
border-radius: 5px;
}
}

&-svg {
height: 100%;
width: 100%;
}
&__close-button-svg {
height: 1rem;
width: 1rem;
}

@media (min-width: @breakpoint-sm) {
Expand Down Expand Up @@ -159,20 +156,15 @@
margin-bottom: 0;
margin-right: @ffe-spacing-sm;
border-radius: 50%;
height: 2.2em;
width: 2.2em;
height: 2em;
width: 2em;
border: none;
}

.ffe-context-message-content__icon-svg {
height: 1.5em;
width: 1.5em;
padding: @ffe-spacing-2xs;
fill: @ffe-farge-fjell;
.native & {
@media (prefers-color-scheme: dark) {
fill: @ffe-farge-vann-70;
}
}
}
}

Expand All @@ -183,33 +175,184 @@
background-color: @ffe-farge-vann-30;
}
}

.ffe-context-message-content__icon {
background-color: @ffe-farge-vann;
border-color: @ffe-farge-vann;
}

.ffe-context-message-content__icon-svg {
fill: @ffe-farge-hvit;
}

@media (min-width: @breakpoint-sm) {
.ffe-context-message-content__icon {
background-color: @ffe-farge-hvit;
border-color: @ffe-farge-vann;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-svart;
border-color: @ffe-farge-vann-70;
}
}
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-vann;
.native & {
@media (prefers-color-scheme: dark) {
fill: @ffe-farge-vann-70;
}
}
}
}
}

&--info&--coloredbg {
background-color: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-vann-30;
}
}
}

&--info&--compact {
.ffe-context-message-content__icon {
background-color: @ffe-farge-vann;
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-hvit;
}
}

&--tip {
background-color: @ffe-farge-sand-70;
background-color: @ffe-farge-sand;
.ffe-context-message-content__icon {
background-color: @ffe-farge-sol;
border-color: @ffe-farge-sol;
}

@media (min-width: @breakpoint-sm) {
.ffe-context-message-content__icon {
background-color: @ffe-farge-hvit;
border-color: @ffe-farge-sol;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-svart;
}
}
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-sol;
}
}
}
&--tip&--coloredbg {
background-color: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-sand;
}
}
}

&--tip&--compact {
.ffe-context-message-content__icon {
background-color: @ffe-farge-sol;
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-hvit;
}
}

&--success {
background-color: @ffe-farge-nordlys-30;
.ffe-context-message-content__icon {
background-color: @ffe-farge-nordlys-wcag;
border-color: @ffe-farge-nordlys-wcag;
}

@media (min-width: @breakpoint-sm) {
.ffe-context-message-content__icon {
background-color: @ffe-farge-hvit;
border-color: @ffe-farge-nordlys-wcag;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-svart;
border-color: @ffe-farge-nordlys;
}
}
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-nordlys-wcag;
.native & {
@media (prefers-color-scheme: dark) {
fill: @ffe-farge-nordlys;
}
}
}
}
}

&--success&--coloredbg {
background-color: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-nordlys-30;
}
}
}

&--success&--compact {
.ffe-context-message-content__icon {
background-color: @ffe-farge-nordlys-wcag;
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-nordlys;
fill: @ffe-farge-hvit;
}
}

&--error {
background-color: @ffe-farge-baer-30;
.ffe-context-message-content__icon {
background-color: @ffe-farge-baer;
border-color: @ffe-farge-baer;
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-hvit;
}

.ffe-context-message-content__header {
color: @ffe-farge-svart;
@media (min-width: @breakpoint-sm) {
.ffe-context-message-content__icon {
background-color: @ffe-farge-hvit;
border-color: @ffe-farge-baer;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-svart;
}
}
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-baer;
}
}
}

&--error&--coloredbg {
background-color: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-baer-30;
}
}
}

&--error&--compact {
.ffe-context-message-content__icon {
background-color: @ffe-farge-baer;
}
.ffe-context-message-content__icon-svg {
fill: @ffe-farge-baer;
fill: @ffe-farge-hvit;
}
}
}

0 comments on commit c470f0a

Please sign in to comment.