Skip to content
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

[TECH] Aligner les couleurs de pix-site #200

Merged
merged 2 commits into from
Oct 13, 2020
Merged

[TECH] Aligner les couleurs de pix-site #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f146426
Align colors.sccs to design system colors
celineung Oct 13, 2020
c4fbc4d
Fix design
celineung Oct 13, 2020
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
2 changes: 1 addition & 1 deletion assets/scss/components/_main-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
}

.link-separator-left {
border-left: 1px solid $grey-8;
border-left: 1px solid $grey-30;
padding-left: 24px;
}
108 changes: 76 additions & 32 deletions assets/scss/globals/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,76 @@
$grey-1: #222222;
$grey-2: #555555;
$grey-3: #f5f5f5;
$grey-4: #cccccc;
$grey-5: #666666;
$grey-6: #444444;
$grey-7: #dddddd;
$grey-8: #96a0af;
$grey-9: #5e6c84;
$grey-10: #6b778c;
$grey-11: #253858;
$grey-20: #dfe1e6;

$blue-1: #3d68ff;
$blue-2: #12a3ff;
$blue-3: #3257d9;
$blue-4: #388aff;
$blue-5: #172b4d;

$error: #990000;
$error-2: #ffdbcc;

$purple-1: #985fff;

$pix-yellow: #ffcb00;
$pix-yellow-2: #EBAF00;
$pix-yellow-3: #D6A000;

$black: #000000;
$white: #ffffff;

$gradient-purple: linear-gradient(135.25deg, $blue-4 0%, $purple-1 100%);
// primary
$blue: #3D68FF;
$blue-zodiac: #505F79;
$white: #FFFFFF;

// secondary
$blue-hover: darken($blue, 4%);
$dark-blue-pro: #1A38A0;
$green-certif: #1A8C89;
$dark-orga: #0095C0;
$orga: #00DDFF;
$green: #038A25;
$green-hover: darken($green, 4%);
$red: #D63F00;
$red-hover: darken($red, 4%);
$yellow: #FFBE00;
$yellow-hover: darken($yellow, 8%);
$light-blue: #388AFF;
$pure-orange: #F45C00;

// gradients
$blue-gradient: linear-gradient(135deg, #12A3FF 0%, #3D68FF 100%);
$default-gradient: linear-gradient(135deg, #388AFF 0%, #985FFF 100%);
$green-gradient: linear-gradient(0deg, #52D987 0%, #1A8C89 100%);
$pix-orange-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
$pix-orga-gradient: linear-gradient(134deg, #00DDFF 0%, #0095C0 100%);
$pix-orga-old-gradient: linear-gradient(0deg, #0D7DC4 0%, #213371 100%);
$pix-pink-gradient: linear-gradient(135deg, #FF3F93 0%, #AC008D 100%);
$pix-purple-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
$yellow-gradient: linear-gradient(180deg, #FEDC41 0%, #F45C00 100%);

// light
$grey-5: #FAFBFC;
$grey-10: #F4F5F7;
$grey-15: #EAECF0;
$grey-20: #DFE1E6;
$grey-22: #C1C7D0;
$grey-25: #A5ADBA;

// medium
$grey-30: #97A0AF;
$grey-35: #8993A4;
$grey-40: #7A869A;
$grey-45: #6B778C;
$grey-50: #5E6C84;
$grey-60: #505F79;

// dark
$grey-70: #344563;
$grey-80: #253858;
$grey-90: #172B4D;
$grey-100: #091E42;
$grey-200: #07142E;

// solids
$environment-dark: #5E2563;
$environment-light: #564DA6;
$communication-dark: #3D68FF;
$communication-light: #12A3FF;
$content-dark: #1A8C89;
$content-light: #52D987;
$information-dark: #F24645;
$information-light: #F1A141;
$security-dark: #AC008D;
$security-light: #FF3F94;

// status
$error: #FF4B00;
$light-red: lighten($error, 8%);
$dark-error: darken($error, 8%);
$success: #57C884;
$warning: #FFBE00;

// box shadows
$box-shadow-competence-cards: 0 3px 4px 0 rgba(12, 22, 58, 0.1), 0 1px 3px 0 rgba($grey-200, 0.1);
$box-shadow-competence-cards-hover: 0 7px 14px 0 rgba(12, 22, 58, 0.2), 0 3px 6px 0 rgba($grey-200, 0.2);
20 changes: 10 additions & 10 deletions assets/scss/shared/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@

transition: background-color 0.3s ease;

@include colorizeButton($white, transparent, $blue-1, $blue-3, $white);
@include colorizeButton($white, transparent, $blue, $blue-hover, $white);

&.button-video {
@include colorizeButton($grey-11, $grey-11, $white, $grey-20, $grey-11);
@include colorizeButton($grey-80, $grey-80, $white, $grey-20, $grey-80);
svg { margin-right: 10px; }
}

Expand All @@ -42,42 +42,42 @@
font-size: 0.8125rem;
letter-spacing: 0.0625rem;

@include colorizeButton($blue-1, $blue-1, $white, $blue-1, $white);
@include colorizeButton($blue, $blue, $white, $blue, $white);
}

&--light {
@include colorizeButton($grey-11, transparent, $pix-yellow, $white, $grey-11);
@include colorizeButton($grey-80, transparent, $yellow, $white, $grey-80);

&:hover {
@include colorizeButton($grey-11, transparent, $pix-yellow-2, $pix-yellow-2, $grey-11);
@include colorizeButton($grey-80, transparent, $yellow, $yellow, $grey-80);
}

&:active,
&:focus {
@include colorizeButton($grey-11, transparent, $pix-yellow-3, $pix-yellow-3, $grey-11);
@include colorizeButton($grey-80, transparent, $yellow, $yellow, $grey-80);
}

&.button-video {
svg { margin-right: 10px; }
@include colorizeButton($white, $white, transparent, transparent, $white);

&:hover {
@include colorizeButton($white, $white, transparent, $blue-1, $white);
@include colorizeButton($white, $white, transparent, $blue, $white);
}

&:active,
&:focus {
@include colorizeButton($white, $white, transparent, $blue-3, $white);
@include colorizeButton($white, $white, transparent, $blue-hover, $white);
}
}
}

&--dark {
@include colorizeButton($white, transparent, $blue-1, $blue-3, $white);
@include colorizeButton($white, transparent, $blue, $blue-hover, $white);

&.button-video {
svg { margin-right: 10px; }
@include colorizeButton($grey-11, $grey-11, $white, $grey-20, $grey-11);
@include colorizeButton($grey-80, $grey-80, $white, $grey-20, $grey-80);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions assets/scss/shared/_normalize.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
color: $grey-1;
color: $grey-45;
-webkit-overflow-scrolling: touch;
}

Expand Down Expand Up @@ -72,7 +72,7 @@ ul {

&::before {
content: "● ";
color: $blue-1;
color: $blue;
margin-right: 5px;
}
}
Expand Down Expand Up @@ -100,7 +100,7 @@ ol {
&::before {
content: counter(item) ".";
margin-right: 8px;
color: $blue-1;
color: $blue;
font-weight: 600;
}
}
Expand Down
5 changes: 3 additions & 2 deletions assets/scss/shared/_pages.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.page-banner-layout {
.page-banner {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, $blue-4 0%, $purple-1 100%);
background: $default-gradient;
height: 240px;
}

Expand All @@ -13,7 +13,7 @@
.page-header {
min-height: 240px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, $blue-4 0%, $purple-1 100%);
background: $default-gradient;
display: flex;
flex-direction: column;
align-items: center;
Expand Down Expand Up @@ -42,6 +42,7 @@
&__description {
h2 {
font-weight: 400;
color: $grey-90;
}

ul {
Expand Down
10 changes: 5 additions & 5 deletions assets/scss/shared/_text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,15 +95,15 @@
}

.text.text-black {
color: $grey-1;
color: $grey-45;
}

.text.text-black-l {
color: $grey-2;
color: $grey-90;
}

.text.text-blue {
color: $blue-1;
color: $blue;
}

.text.light {
Expand All @@ -130,14 +130,14 @@
&--normal p {
font-size: 1rem;
line-height: 1.625rem;
color: $grey-10;
color: $grey-45;
}

&--light p {
color: $white;
}

&--dark p {
color: $grey-10;
color: $grey-45;
}
}
4 changes: 2 additions & 2 deletions assets/scss/shared/_titles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.title {
&--big h1 {
color: $grey-11;
color: $grey-80;
font-size: 2.125rem;
line-height: 2.75rem;
font-weight: 400;
Expand All @@ -11,7 +11,7 @@
}

&--dark h1 {
color: $blue-5;
color: $grey-90;
}
}

Expand Down
6 changes: 3 additions & 3 deletions components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ footer {
}

.icon-parent {
background-color: $blue-1;
background-color: $blue;
width: 36px;
height: 36px;
display: flex;
Expand All @@ -139,7 +139,7 @@ footer {
transition: all ease-in 0.2s;

&:hover {
background-color: $blue-3;
background-color: $blue-hover;
transition: all ease-out 0.25s;
}
}
Expand Down Expand Up @@ -234,7 +234,7 @@ footer {
line-height: 28px !important;

&:hover {
color: $blue-1 !important;
color: $blue !important;
}
}

Expand Down
6 changes: 3 additions & 3 deletions components/BurgerMenuNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default {
<style lang="scss">
.navigation-slice-zone {
.bm-menu {
background: linear-gradient(134.72deg, $blue-2 0%, $blue-1 100%);
background: $blue-gradient;

@include device-is('large-screen') {
display: none;
Expand Down Expand Up @@ -105,7 +105,7 @@ export default {
}

.bm-burger-bars {
background-color: $grey-1;
background-color: $grey-45;
}

.bm-burger-button {
Expand All @@ -117,7 +117,7 @@ export default {
}

.bm-cross {
background: $grey-1;
background: $grey-45;
height: 24px !important;
}
}
Expand Down
4 changes: 2 additions & 2 deletions components/CtaButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ export default {
<style lang="scss">
.cta-button {
width: fit-content;
background: $blue-1;
background: $blue;
border-radius: 5px;
padding: 0 20px;
cursor: pointer;

&:hover {
transition: opacity 0.5s ease-out;
background: $blue-3;
background: $blue-hover;
}

&:hover:after {
Expand Down
Loading