From db40b83e5ae4913096c6215b9bc8db6903f0789d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 4 Feb 2019 09:48:39 +0100
Subject: [PATCH] ui(css styles) : font-size was moved from px to rem.
---
src/dependencies.pug | 3 +-
src/header.pug | 7 +-
src/styles/content.scss | 32 +++----
src/styles/filters.scss | 20 ++--
src/styles/form.scss | 34 +++----
src/styles/header.scss | 139 ++++++++++++++++++---------
src/styles/job-offers.scss | 19 ++--
src/styles/main.scss | 115 +++++------------------
src/styles/members.scss | 39 ++++----
src/styles/menu-left.scss | 162 +++++++++++---------------------
src/styles/menu-right.scss | 7 +-
src/styles/project-profile.scss | 47 +++++----
src/styles/right-panel.scss | 10 +-
src/styles/variables.scss | 37 +++++---
src/styles/variables.scss.orig | 106 +++++++++++++++++++++
15 files changed, 411 insertions(+), 366 deletions(-)
create mode 100644 src/styles/variables.scss.orig
diff --git a/src/dependencies.pug b/src/dependencies.pug
index b1e1a350..20b63eba 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -34,9 +34,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- cdn
//- don't forget to change version in hd-widgets.js
-script(type="module" src="https://unpkg.com/@startinblox/core@0.5")
+script(type="module" src="https://unpkg.com/@startinblox/core@0.5.24")
script(type="module" src="https://unpkg.com/@startinblox/router@latest")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
script(type="module" src="/scripts/hd-widgets.js")
-
diff --git a/src/header.pug b/src/header.pug
index af1b856c..6551d376 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -3,10 +3,9 @@
img(src="/images/logo.png" width=111 height=32)
#search-bar
- div
- input#search-input(type='search')
- i#search-icon.icon-magnifier(aria-hidden='true')
- i#close-search-icon.icon-close(aria-hidden='true')
+ input#search-input(type='search')
+ i#search-icon.icon-magnifier(aria-hidden='true')
+ i#close-search-icon.icon-close(aria-hidden='true')
details
summary#notifications-button
diff --git a/src/styles/content.scss b/src/styles/content.scss
index a91f6fbd..0b797d38 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -17,8 +17,8 @@
}
sib-display-img {
- width: 2.5em;
- height: 2.5em;
+ width: 4.25rem;
+ height: 4.25rem;
overflow: hidden;
border-radius: 100%;
}
@@ -60,7 +60,7 @@
// chat
.chat-view {
- padding: 1em;
+ padding: 1.7rem;
position: relative;
z-index: 0;
@extend %frame;
@@ -126,7 +126,7 @@ sib-display#member-info {
flex-direction: column;
position: relative;
@extend %frame;
- padding: 1em;
+ padding: 1.7rem;
label {
display: none;
@@ -134,9 +134,9 @@ sib-display#member-info {
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
- padding-bottom: 1em;
- padding: 0.5em;
- margin-bottom: 1em;
+ padding-bottom: 1.7rem;
+ padding: 0.85rem;
+ margin-bottom: 1.7rem;
display: flex;
flex-direction: column;
>*{
@@ -190,8 +190,8 @@ sib-display#member-info {
border-style: solid;
border-color: $color-majorelle-blue;
color: $color-majorelle-blue;
- margin: 1em;
- padding: 1em;
+ margin: 1.7rem;
+ padding: 1.7rem;
text-decoration:none;
}
@@ -242,26 +242,26 @@ hdapp-available {
div {
display: inline-block;
- margin-right: 0.4em;
+ margin-right: 0.7rem;
}
}
sib-link[next='member-chat'] {
border-style: solid;
- margin: 1em;
+ margin: 1.7rem;
display: flex;
border-radius: 25px;
border-style: solid;
border-color: $color-majorelle-blue;
color: $color-majorelle-blue;
- margin: 1em;
- padding: 1em;
+ margin: 1.7rem;
+ padding: 1.7rem;
text-decoration:none;
}
div[name='pseudonym'] {
- margin-top: -1em;
- margin-bottom: 1em;
+ margin-top: -1.7rem;
+ margin-bottom: 1.7rem;
}
#member-info {
@@ -276,7 +276,7 @@ hdapp-available {
sib-form {
form > * {
- margin-top: 0.5em;
+ margin-top: 0.85rem;
}
// button like
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 13b6f1a5..8eee93c0 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -4,7 +4,7 @@
grid-gap: 0px 15px;
grid-template-columns: 50% 50%;
grid-template-rows: 3.5em 3.5em;
- padding-bottom: 3em;
+ padding-bottom: 4.8rem;
label {
display: block;
@@ -14,10 +14,10 @@
appearance: none;
border-style: none;
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
- font-size: 85%;
+ font-size: 1.36rem;
line-height: 1.80;
- margin-top: 1em;
- padding: 0.7em;
+ margin-top: 1.36rem;
+ padding: 0.9rem;
width: 95%;
-moz-appearance: none;
-webkit-appearance: none;
@@ -35,7 +35,7 @@
background-size: 14px 9px;
box-sizing: border-box;
display: inline-block;
- padding: 0.5em 12.5em 0.5em 1em;
+ padding: 0.68rem;
}
sib-form-label-text {
@@ -44,10 +44,8 @@
}
}
-#offers-list > sib-form > form {
- @extend %filters;
-}
-
-#profiles-list > sib-form > form {
- @extend %filters;
+#offers-list, #profiles-list {
+ & > sib-form > form {
+ @extend %filters;
+ }
}
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 8e7777fb..fc130acc 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -3,34 +3,34 @@
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
- padding: 4em 5em 6em;
+ padding: 6.8rem 8.5rem 10.2rem;
@extend %frame;
.form-view {
border-bottom: 1px solid $color-platinum;
- padding-bottom: 1.5em;
+ padding-bottom: 2.55rem;
}
}
#job-offer-create,
#project-create,
#project-edit {
- font-size: 17px;
+ font-size: 1.7rem;
h1 {
color: $color-purple-dark;
font-weight: bold;
- font-size: 20px;
+ font-size: 2rem;
text-align: center;
}
p.form-goal {
- margin-bottom: 4em;
+ margin-bottom: 6.8rem;
text-align: center;
}
p[name$='-text'] {
- font-size: 15px;
+ font-size: 1.5rem;
margin-bottom: 2em;
}
@@ -54,7 +54,7 @@
> label {
color: $color-spun-pearl;
font-weight: 600;
- margin-bottom: 0.5em;
+ margin-bottom: 0.85rem;
}
input,
@@ -68,12 +68,12 @@
input,
textarea {
- padding: 1em;
+ padding: 1.7rem;
}
select {
- margin-bottom: 1em;
- padding: 0.5em;
+ margin-bottom: 1.7rem;
+ padding: 0.85rem;
}
}
@@ -91,7 +91,7 @@
padding-left: 0;
div.choices__list {
- margin-top: 1em;
+ margin-top: 1.7rem;
div.choices__item {
@extend %skill;
@@ -105,8 +105,8 @@
}
input[type='text'].choices__input {
- max-width: 16em;
- min-width: 16em;
+ max-width: 27.2rem;
+ min-width: 27.2rem;
}
}
}
@@ -164,10 +164,10 @@
border-radius: 100%;
color: $color-majorelle-blue;
cursor: pointer;
- font-size: 1.5em;
+ font-size: 2.55rem;
height: 1em;
line-height: 0;
- margin: 0.2em;
+ margin: 0.34rem;
padding: 0 0.04em 0.08em;
vertical-align: middle;
width: 1em;
@@ -175,7 +175,7 @@
}
input[type='submit'] {
- margin-top: 3.5em;
+ margin-top: 6rem;
@extend %submit-form;
}
}
@@ -185,6 +185,6 @@
input,
textarea {
- margin-bottom: 2em;
+ margin-bottom: 3.4rem;
}
}
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 02118427..26d477cd 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -1,69 +1,119 @@
#header {
+ align-items: center;
background-color: $color-white;
color: $color-dark-lava;
- //position: relative;
- //@include border-shadow(bottom);
- box-shadow: 0 2px 4px rgba(148, 98, 98, 0.09);
- border: solid $color-white;
- border-width: 1px 0;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
display: flex;
- //flex-grow: 0;
- //flex-basis : 150px;
flex-shrink: 0;
- align-items: center;
- padding: 1em 0.4em;
+ padding: 1.6rem 0.64rem;
position: relative;
z-index: 1;
+ //position: relative;
+ //@include border-shadow(bottom);
+ //flex-grow: 0;
+ //flex-basis : 150px;
> * {
- padding: 0 1.8rem;
+ padding: 0 2.5rem;
}
}
#button-toggle {
- @include icon('menu');
- display: none;
color: $color-dark-lava;
- font-size: 2em;
- padding: 0.72em;
cursor: pointer;
+ display: none;
+ font-size: 3.2rem;
+ padding: 2.3rem;
+ @include icon('menu');
}
#logo {
flex: 1 1 0;
}
-details summary::-webkit-details-marker {
- display:none;
-}
-
-#notifications-button {
- @include icon(bell);
- font-size: 2em;
- cursor: pointer;
- list-style-type: none;
+#search-bar {
position: relative;
-
- .menu-notification {
- position: absolute;
- top: -3px;
- left: 3px;
+
+ #search-input {
+ border-radius: 10em;
+ padding: 0.64rem 1.28rem;
+ border: 1px solid $color-bombay;
+ height: 3.8rem;
+ width: 28rem;
+ -webkit-appearance: textfield;
+
+ & ~ #close-search-icon,
+ & ~ #search-icon {
+ color: $color-bombay;
+ display: block;
+ font-size: 1.7rem;
+ margin: auto;
+ position: absolute;
+ right: 3.7rem;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-text-stroke: 1px $color-bombay;
+ }
+
+ & ~ #close-search-icon {
+ opacity: 0;
+ }
+
+ &:focus {
+ & ~ #close-search-icon {
+ opacity: 1;
+ }
+
+ & ~ #search-icon {
+ visibility: hidden;
+ }
+ }
}
}
-#notifications {
- position: absolute;
- right: 0;
- bottom: 0;
- height: 0;
- left: 0;
- z-index: 1;
+details {
+ summary::-webkit-details-marker {
+ display: none;
+ }
+
+ #notifications-button {
+ cursor: pointer;
+ font-size: 3rem;
+ list-style-type: none;
+ position: relative;
+ @include icon(bell);
+
+ .menu-notification {
+ //flex-basis: 3em;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 0;
+ flex-shrink: 0;
+ justify-content: center;
+ left: 0.3rem;
+ position: absolute;
+ top: -0.3rem;
+ width: 2em;
- > div {
+ @extend %notification;
+ }
+ }
+
+ #notifications {
+ bottom: 0;
+ height: 0;
+ left: 0;
position: absolute;
- top: 0;
right: 0;
+ z-index: 1;
+
+ > div {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
}
}
@@ -77,12 +127,12 @@ details summary::-webkit-details-marker {
}
img {
- width: 48px;
+ border-radius: 100%;
height: 48px;
+ margin-right: 2rem;
object-fit: cover;
object-position: center;
- border-radius: 100%;
- margin-right: 1rem;
+ width: 48px;
}
sib-display-div[name='first_name'] {
@@ -90,16 +140,17 @@ details summary::-webkit-details-marker {
display: flex;
div[name='first_name'] {
- font-size: 16px;
+ align-items: flex-end;
+ display: flex;
+ font-size: 1.8rem;
font-weight: 600;
@include icon('arrow-down');
&::before {
- color: color-dark-lava;
- margin-left: 10px;
+ margin-left: 1.5rem;
}
-
}
}
}
}
+
diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss
index ae073811..975b04c3 100644
--- a/src/styles/job-offers.scss
+++ b/src/styles/job-offers.scss
@@ -1,5 +1,6 @@
#offers-list {
@extend .grid-layer;
+
> sib-form {
grid-column-start: start;
grid-column-end: middle;
@@ -14,14 +15,14 @@
grid-row-end: end;
&:first-of-type {
- margin-top: 3em;
+ margin-top: 5rem;
}
> sib-display {
@extend %frame;
display: block;
- margin: 1em 0;
- padding: 2em;
+ margin: 1.7rem 0;
+ padding: 3.4rem;
/*&:nth-child(odd) {
background-color: $color-anti-flash-white;
}*/
@@ -39,7 +40,7 @@
}
[name='creation'] {
- margin-top: 20px;
+ margin-top: 2rem;
}
[name='description'] {
@@ -48,7 +49,7 @@
[name='send'] {
color: $color-majorelle-blue;
- font-size: 13px;
+ font-size: 1.3rem;
text-align: right;
> sib-link {
@@ -56,8 +57,8 @@
@include icon('speech');
&::before {
- font-size: 15px;
- margin-right: 12px;
+ font-size: 1.5rem;
+ margin-right: 1.2rem;
}
}
}
@@ -99,9 +100,9 @@
border: 1px solid yellow;
border-radius: 3px;
color: $color-rolling-stone;
- font-size: 15px;
+ font-size: 1.5rem;
font-weight: 400;
- margin-left: 1em;
+ margin-left: 1.7rem;
padding: calc(16px - 0.8em) 0.7em;
}
}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index d1a0a231..59c9815d 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -10,22 +10,20 @@
// box-sizing: inherit;
}
-html {
- //box-sizing: border-box;
+:root {
+ font-size: 62.5%;
font-family: Open Sans, sans-serif;
- font-size: 13px;
- background-color: $color-anti-flash-white;
- color: $color-text-base;
+
+ body {
+ //box-sizing: border-box;
+ background-color: $color-anti-flash-white;
+ color: $color-text-base;
+ font-size: 1.6rem;
+ margin: 0 auto;
+ overflow-wrap: break-word;
+ }
}
-body {
- margin: 0 auto;
- overflow-wrap: break-word;
-// height: 100%;
-// display:flex;
-// flex-direction: column;
- }
-
h1,
h2,
h3,
@@ -39,7 +37,7 @@ h6 {
span {
font-weight: 400;
- padding-left: 0.5em;
+ padding-left: 0.85rem;
&:before {
content: '// ';
@@ -48,22 +46,22 @@ h6 {
}
h1 {
- font-size: 1.24em;
+ font-size: 2.1rem;
}
-h2 { font-size: 20px;
+h2 { font-size: 2rem;
}
h3 {
- font-size: 16px;
+ font-size: 1.6rem;
}
h4 {
- font-size: 0.68em;
+ font-size: 1.2rem;
}
h5 {
- font-size: 20px;
+ font-size: 2rem;
}
.debug {
@@ -87,30 +85,7 @@ button {
.frame {
@extend %frame;
- padding: 3em;
-}
-
-.menu-notification {
- //flex-basis: 3em;
- align-items: center;
- display: flex;
- flex-direction: column;
- flex-grow: 0;
- flex-shrink: 0;
- justify-content: center;
- width: 2em;
-
- > div {
- align-items: center;
- background-color: $color-mustard;
- border-radius: 100%;
- color: $color-dark-lava;
- display: flex;
- font-size: 12px;
- height: 1.7em;
- justify-content: center;
- width: 1.7em;
- }
+ padding: 5rem;
}
.layer {
@@ -160,50 +135,6 @@ button {
}
}
-#search-bar > div {
- position: relative;
-}
-
-#search-icon {
- -webkit-text-stroke: 1px $color-bombay;
- color: $color-bombay;
- pointer-events: none;
-}
-
-#close-search-icon,
-#search-icon {
- position: absolute;
- right: 0.8em;
- top: 50%;
- transform: translateY(-50%);
- margin: auto;
- display: block;
- font-size: 1.2em;
-}
-
-#search-input {
- -webkit-appearance: textfield;
- border-radius: 10em;
- padding: 0.4em 0.8em;
- border: 1px solid $color-bombay;
- height: 2.8rem;
- width: 22rem;
-
- & ~ #close-search-icon {
- opacity: 0;
- }
-
- &:focus {
- & ~ #close-search-icon {
- opacity: 1;
- }
-
- & ~ #search-icon {
- visibility: hidden;
- }
- }
-}
-
sib-route,
sib-trigger,
sib-link {
@@ -213,7 +144,7 @@ sib-link {
sib-link.back {
color: $color-purple-dark;
display: block;
- font-size: 20px;
+ font-size: 2rem;
font-weight: bold;
text-align: right;
@include icon('arrow-left-circle');
@@ -298,8 +229,12 @@ li[name*='groups'] {
border: 1px solid $color-mikado-yellow;
border-radius: 3px;
color: $color-rolling-stone;
- font-size: 13px;
+ font-size: 1.3rem;
font-weight: 400;
- margin-left: 1em;
+ margin-left: 1.7rem;
padding: calc(16px - 1em) 0.7em;
+
+ &:first-of-type {
+ margin-left: 0;
+ }
}
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 96a7accd..42850607 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -4,7 +4,7 @@
nav {
align-items: center;
display: flex;
- font-size: 24px;
+ font-size: 2.4rem;
justify-content: center;
button {
@@ -26,7 +26,7 @@
}
span {
- font-size: 26px;
+ font-size: 2.6rem;
}
}
@@ -43,7 +43,7 @@
flex-wrap: wrap;
grid-column-start: start;
grid-column-end: end;
- margin-bottom: 1em;
+ margin-bottom: 1.7rem;
}
& > div {
@@ -53,23 +53,23 @@
color: $color-quartz;
font-weight: bold;
justify-content: center;
- margin-bottom: 2.2em;
+ margin-bottom: 3.75rem;
white-space: nowrap;
&::before, &::after {
border-top: 1px solid $color-timberwolf;
content: '';
position: relative;
- top: 0.5em;
+ top: 0.85rem;
width: 35.2vw;
}
&::before {
- right: 3em;
+ right: 5.1rem;
}
&::after {
- left: 3em;
+ left: 5.1rem;
}
}
@@ -81,6 +81,7 @@
display: flex;
flex-flow: column wrap;
margin-bottom: 2.5rem;
+ padding-bottom: 10rem;
@media(min-width: 56rem) {
height: 62rem;
width: 32%;
@@ -94,7 +95,7 @@
border-bottom: 1px solid $color-anti-flash-white;
display: flex;
flex-direction: column;
- padding: 0.5em 0 2em;
+ padding: 0.85rem 0 3.4rem;
> *:not(sib-display-img) {
display: flex;
@@ -106,7 +107,7 @@
background-color: white;
border-radius: 50%;
height: 28vh;
- margin: 1em auto;
+ margin: 1.7rem auto;
overflow: hidden;
position: relative;
width: 28vh;
@@ -132,24 +133,24 @@
display: flex;
flex-basis: 3.5em;
line-height: 1.6;
- margin: 1.5em 0;
- padding: 0 4em;
+ margin: 2.5rem 0;
+ padding: 0 6.8rem;
text-align: center;
}
[next=member-chat] {
align-self: center;
border: 1px solid $color-majorelle-blue;
- border-radius: 2em;
+ border-radius: 3.4rem;
color: $color-majorelle-blue;
- font-size: 18px;
+ font-size: 1.8rem;
font-weight: bold;
- padding: 0.6em 1.5em 0.4em;
+ padding: 1rem 2.55rem 0.7rem;
@include icon('speech');
&::before {
- font-size: 25px;
- padding-right: 0.5em;
+ font-size: 2.5rem;
+ padding-right: 0.85rem;
}
}
}
@@ -159,11 +160,11 @@
> sib-display-div > div,
> sib-display-lookuplist > ul {
margin-bottom: 0;
- margin-top: 1em;
+ margin-top: 1.7rem;
&::before {
color: $color-selective-yellow;
- font-size: 20px;
+ font-size: 2rem;
padding: 0 0.6em 0 1em;
}
}
@@ -176,7 +177,7 @@
}
> sib-display-lookuplist[name$='skills'] > ul {
- margin-left: 1em;
+ margin-left: 1.7rem;
}
[name$='city'] * {
diff --git a/src/styles/menu-left.scss b/src/styles/menu-left.scss
index d4205830..16587bfb 100644
--- a/src/styles/menu-left.scss
+++ b/src/styles/menu-left.scss
@@ -1,26 +1,20 @@
#navbar {
background-color: $color-purple-dark;
color: $color-white;
+ display: block;
+ flex: 0 0 16em;
+ flex-direction: column;
+ overflow: auto;
+ transition: flex-basis 0.5s ease-in-out;
// max-width: 16rem;
// position: relative;
// min-height: 100%;
- transition: flex-basis 0.5s ease-in-out;
- display: block;
- flex-grow: 0;
- flex-shrink: 0;
- flex-basis: 16em;
- overflow: auto;
- flex-direction: column;
- font-size: 16px;
&.open {
transform: translateX(0);
}
- //@include border-shadow(right);
sib-router {
- display: flex;
- flex-direction: column;
.menu-wrapper {
&.is-closed {
@@ -33,40 +27,12 @@
}
}
- .divider {
- height: 1px;
- background-color: $color-gainsboro-a02;
- }
-
- .sub-menu {
- padding-left: 1.8em;
-
- div {
- color: $color-spun-pearl;
- padding-bottom: 0.7em;
- font-size: 15px;
- cursor: pointer;
-
- div[name='project'] {
- display: flex;
-
- sib-display-div[name='dash'] {
- margin: 0 0.4em;
- }
- }
- }
- }
-
.menu {
+ cursor: pointer;
display: flex;
flex-direction: row-reverse;
- padding: 1em;
- // border-top: 1px solid #ddd;
- // &:last-child {
- // border-bottom: 1px solid #ddd;
- // }
- cursor: pointer;
font-weight: bold;
+ padding: 1.6rem;
&[active] {
background-color: $color-mustard;
@@ -81,111 +47,93 @@
.menu-notification > sib-display > div:first-child {
background-color: $color-purple-dark;
color: $color-mustard;
- font-size: 12px;
}
}
.menu-icon {
- //flex-basis: 2em;
- width: 4em;
- flex-shrink: 0;
- flex-grow: 0;
- justify-content: center;
align-items: center;
display: flex;
- flex-direction: column;
- font-size: 11px;
+ justify-content: center;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-size: 1.7rem;
+ width: 3.2em;
&:before {
- width: 1.9em;
+ border-radius: 100%;
height: 1.9em;
line-height: 1.9em;
- font-size: 1.6em;
- border-radius: 100%;
+ width: 1.9em;
// transform: perspective(1000px) translateZ(1px) scale(1);
// will-change: transform;
// transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
}
-
- .menu-chevron {
- width: 2em;
- flex-shrink: 0;
- flex-grow: 0;
+
+ .menu-label {
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
-
- > div {
- color: $color-spun-pearl;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 11px;
- }
- }
-
- .menu-label {
- //flex-basis: 8em;
- width: 8em;
- flex-shrink: 0;
flex-grow: 1;
+ flex-shrink: 0;
+ font-weight: 600;
justify-content: center;
- display: flex;
- flex-direction: column;
+ letter-spacing: 0.017rem;
text-transform: uppercase;
- font-weight: 600;
- letter-spacing: 0.17px;
- font-size: 16px;
+ width: 8em;
}
-
+
/*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
.menu-notification {
- //flex-basis: 3em;
- width: 2em;
- flex-shrink: 0;
- flex-grow: 0;
+ align-self: center;
display: flex;
- flex-direction: column;
+ flex-grow: 0;
+ flex-shrink: 0;
justify-content: center;
- align-items: center;
+ width: 2em;
> sib-display {
- > div:first-of-type {
- color: $color-dark-lava;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 1.7em;
- height: 1.7em;
- border-radius: 100%;
- background-color: $color-mustard;
- font-size: 12px;
- }
+
+ @extend %notification;
}
}
-
- &[id-prefix] {
- display: none;
+
+ .menu-chevron {
+ align-items: center;
+ color: $color-spun-pearl;
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ justify-content: center;
+ width: 2em;
}
> sib-display {
display: block;
- font-size: 0.9em;
- color: #aaa;
+ }
+ }
+
+ .sub-menu {
+ padding-left: 2.88rem;
+
+ div {
+ color: $color-spun-pearl;
+ cursor: pointer;
+ padding-bottom: 1.12rem;
- > div {
- margin-bottom: 1.5em;
+ div[name='project'] {
+ display: flex;
- > sib-display {
- cursor: pointer;
- display: block;
- padding: 0.5em 2em;
+ sib-display-div[name='dash'] {
+ margin: 0 0.4em;
}
}
}
}
+
+ .divider {
+ height: 1px;
+ background-color: $color-gainsboro-a02;
+ }
}
}
diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss
index 271031f8..602d26fa 100644
--- a/src/styles/menu-right.scss
+++ b/src/styles/menu-right.scss
@@ -8,7 +8,6 @@
background-color: $color-link-water;
color: $color-purple-dark;
flex: 0 0 auto;
- font-size: 16px;
font-weight: 600;
> ul {
@@ -24,13 +23,13 @@
margin-bottom: 0;
margin-left: 0;
margin-top: 0;
- padding: 1.5em 1.5em;
+ padding: 2.55rem 2.55rem;
position: relative;
width: 12em;
&::before {
float: left;
- font-size: 40px;
+ font-size: 4rem;
margin-left: 0;
margin-right: 1.5rem;
}
@@ -52,7 +51,7 @@
&[name^='project'] {
> li::before {
- font-size: 40px;
+ font-size: 4rem;
}
}
diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss
index 59d15935..0413bb6f 100644
--- a/src/styles/project-profile.scss
+++ b/src/styles/project-profile.scss
@@ -1,11 +1,11 @@
#project-profile {
[name^='block-']:not([name='block-title']) {
- margin-top: 3em;
+ margin-top: 5.1rem;
[name^='label-'] {
font-weight: bold;
- margin-bottom: 0.8em;
+ margin-bottom: 1.4rem;
text-transform: uppercase;
@extend h2;
}
@@ -13,20 +13,20 @@
sib-display-div:not(:first-of-type),
ul,
[name*='job'] {
- font-size: 15px;
+ font-size: 1.5rem;
}
}
[name='block-title'] {
border-bottom: 1px solid $color-link-water;
display: flex;
- padding-bottom: 2em;
+ padding-bottom: 3.4rem;
> * {
color: $color-dark-lava;
- font-size: 20px;
+ font-size: 2rem;
font-weight: bold;
- padding-right: 0.5em;
+ padding-right: 0.85rem;
text-transform: uppercase;
}
@@ -35,7 +35,7 @@
}
> sib-display-div[name='name'] {
- padding-left: 0.5em;
+ padding-left: 0.85rem;
}
> :not(:nth-last-child(n+4)) {
@@ -44,11 +44,6 @@
text-transform: none;
}
- > :not(:nth-last-child(n+3)) {
- color: $color-text-base;
- font-size: 16px;
- }
-
[name='entitled'] {
margin-left: auto;
}
@@ -74,13 +69,13 @@
[name^='details-'] {
display: flex;
- font-size: 15px;
- margin-bottom: 0.5em;
+ font-size: 1.5rem;
+ margin-bottom: 0.85rem;
[name='cell-name'],
[name='business-contribution'] {
font-weight: bold;
- margin-right: 5px;
+ margin-right: 0.5rem;
}
[name='comma'] {
@@ -93,26 +88,26 @@
display: flex;
margin-left: auto;
margin-right: auto;
- margin-top: 1em;
+ margin-top: 1.7rem;
max-width: 100%;
> * {
border: 1px solid $color-link-water;
flex: 1 1 auto;
justify-content: space-between;
- margin: 0 -1px -1px 0;
+ margin: 0 -0.1rem -0.1rem 0;
min-width: 25vw;
padding: 0;
h5 {
- margin-left: 1.1em;
- margin-top: 1.2em;
+ margin-left: 2rem;
+ margin-top: 2rem;
}
ul {
- font-size: 15px;
+ font-size: 1.5rem;
list-style: none;
- margin: -1.2em 0 2.2em -1.2em;
+ margin: -2.04rem 0 3.74rem -2.04rem;
li {
@@ -140,19 +135,19 @@
}
&:not(:first-child) {
- padding-left: 3em;
+ padding-left: 5.1rem;
li {
- margin-bottom: 1em;
+ margin-bottom: 1.7rem;
&:last-child {
- margin-top: 1.3em;
+ margin-top: 2.2rem;
}
&::before {
color: $color-selective-yellow;
- font-size: 20px;
- padding: 0 0.6em 0 0;
+ font-size: 2rem;
+ padding: 0 1rem 0 0;
}
}
diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss
index 1fe0d30c..8f8ff5b8 100644
--- a/src/styles/right-panel.scss
+++ b/src/styles/right-panel.scss
@@ -1,7 +1,7 @@
.right-link {
- padding: 0.5em;
- margin-bottom: 1em;
- margin-left: 5em;
+ padding: 0.85rem;
+ margin-bottom: 1.7rem;
+ margin-left: 8.5rem;
flex-basis: auto;
border-radius: 2em;
@@ -22,7 +22,7 @@
background-color: $color-mustard;
border-radius: 100%;
justify-content: center;
- margin-right: 0.7em;
+ margin-right: 1.2rem;
//flex-direction: column;
width: 1.8em;
height: 1.8em;
@@ -41,7 +41,7 @@
.icon-plus {
font-size: 20px;
justify-content: center;
- margin: 0.3em 0.3em 0.3em 0;
+ margin: 0.5rem 0.5rem 0.5rem 0;
&:before {
//font-size: 1.3em;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5d7bd69e..f3fd1669 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -26,23 +26,37 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
%button {
display: inline-block;
- padding: 0.5em 1.5em;
+ padding: 0.85rem 2.55rem;
border: none;
border-radius: 100em;
font-weight: normal;
-}
+}
+
+%notification {
+ > div:first-of-type {
+ align-items: center;
+ background-color: $color-mustard;
+ border-radius: 100%;
+ color: $color-dark-lava;
+ display: flex;
+ font-size: 1.3rem;
+ height: 1.7em;
+ justify-content: center;
+ width: 1.7em;
+ }
+}
+
+%shadow {
+ box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
+}
%content-padding {
- padding: 2.6em;
+ padding: 4.4rem;
}
%frame {
@extend %shadow;
background-color: $color-white;
-}
-
-%shadow {
- box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
}
%skill {
@@ -50,10 +64,9 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
border: 1px solid $color-selective-yellow;
border-radius: 2em;
color: $color-white;
- font-size: 16px;
font-weight: bold;
- margin: 0.25em;
- padding: 0.3em 1.2em;
+ margin: 0.4rem;
+ padding: 0.5rem 2rem;
}
%status-open {
@@ -63,7 +76,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
color: $color-white;
display: inline-block;
font-weight: normal;
- padding: 0.5em 1em;
+ padding: 0.85rem 1.7rem;
}
%submit-form {
@@ -72,7 +85,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
float: right;
font-weight: bold;
text-transform: uppercase;
-}
+}
$breakpoints: (
phone: 480px,
diff --git a/src/styles/variables.scss.orig b/src/styles/variables.scss.orig
new file mode 100644
index 00000000..954a6694
--- /dev/null
+++ b/src/styles/variables.scss.orig
@@ -0,0 +1,106 @@
+//Color Variables
+$color-quartz: hsl(0, 0%, 29%);
+$color-timberwolf: hsl(0, 0%, 85%);
+$color-white: hsl(0, 0%,100%);
+
+$color-selective-yellow: hsl(43, 100%, 50%);
+$color-mikado-yellow: hsl(45, 95%, 54%);
+$color-mustard: hsl(46, 100%, 67%);
+
+$color-rolling-stone: hsl(210, 4%, 50%);
+$color-taupe-gray: hsl(210, 5%, 56%);
+$color-platinum: hsl(210, 17%, 91%);
+$color-anti-flash-white: hsl(210, 25%, 95%);
+$color-text-base: hsl(213, 4%, 50%);
+$color-gainsboro: hsl(213, 13%, 86%);
+$color-gainsboro-a02: hsla(213, 13%, 86%, 0.2);
+$color-bombay: hsl(215, 9%, 73%);
+$color-manatee: hsl(215, 6%, 63%);
+$color-dark-lava: hsl(216, 4%, 22%);
+$color-link-water: hsl(221, 51%, 90%);
+$color-glitter: hsl(222, 57%, 95%);
+$color-lavender-gray: hsl(229, 25%, 79%);
+$color-purple-dark: hsl(233, 18%, 29%);
+$color-spun-pearl: hsl(244, 10%, 70%);
+$color-majorelle-blue: hsl(244, 73%, 62%);
+
+%button {
+ display: inline-block;
+ padding: 0.85rem 2.55rem;
+ border: none;
+ border-radius: 100em;
+ font-weight: normal;
+}
+
+%content-padding {
+ padding: 2.6em;
+}
+
+%frame {
+ @extend %shadow;
+ background-color: $color-white;
+}
+
+%notification {
+ > div:first-of-type {
+ align-items: center;
+ background-color: $color-mustard;
+ border-radius: 100%;
+ color: $color-dark-lava;
+ display: flex;
+ font-size: 1.3rem;
+ height: 1.7em;
+ justify-content: center;
+ width: 1.7em;
+ }
+}
+
+%shadow {
+ box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
+}
+
+<<<<<<< HEAD
+=======
+%content-padding {
+ padding: 4.4rem;
+}
+
+%frame {
+ @extend %shadow;
+ background-color: $color-white;
+}
+
+>>>>>>> 7b4f073... variables ok
+%skill {
+ background-color: $color-selective-yellow;
+ border: 1px solid $color-selective-yellow;
+ border-radius: 2em;
+ color: $color-white;
+ font-weight: bold;
+ margin: 0.4rem;
+ padding: 0.5rem 2rem;
+}
+
+%status-open {
+ background-color: $color-majorelle-blue;
+ border: none;
+ border-radius: 100em;
+ color: $color-white;
+ display: inline-block;
+ font-weight: normal;
+ padding: 0.85rem 1.7rem;
+}
+
+%submit-form {
+ background-color: $color-purple-dark;
+ color: $color-white;
+ float: right;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+$breakpoints: (
+ phone: 480px,
+ tablet: 768px,
+ desktop: 1024px,
+);
--
GitLab