autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui(css styles) : font-size was moved from px to rem.

Browse Source
This commit is contained in:
Gaëlle Morin 2019-02-04 09:48:39 +01:00
parent 6d9c958f34
commit db40b83e5a
15 changed files with 412 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/dependencies.pug
View File

@ -34,9 +34,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- cdn //- cdn
//- don't forget to change version in hd-widgets.js //- 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/router@latest")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1") script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
script(type="module" src="/scripts/hd-widgets.js") script(type="module" src="/scripts/hd-widgets.js")

1
src/header.pug
View File

@ -3,7 +3,6 @@
img(src="/images/logo.png" width=111 height=32) img(src="/images/logo.png" width=111 height=32)
#search-bar #search-bar
div
input#search-input(type='search') input#search-input(type='search')
i#search-icon.icon-magnifier(aria-hidden='true') i#search-icon.icon-magnifier(aria-hidden='true')
i#close-search-icon.icon-close(aria-hidden='true') i#close-search-icon.icon-close(aria-hidden='true')

32
src/styles/content.scss
View File

@ -17,8 +17,8 @@
} }
sib-display-img { sib-display-img {
width: 2.5em; width: 4.25rem;
height: 2.5em; height: 4.25rem;
overflow: hidden; overflow: hidden;
border-radius: 100%; border-radius: 100%;
} }
@ -60,7 +60,7 @@
// chat // chat
.chat-view { .chat-view {
padding: 1em; padding: 1.7rem;
position: relative; position: relative;
z-index: 0; z-index: 0;
@extend %frame; @extend %frame;
@ -126,7 +126,7 @@ sib-display#member-info {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@extend %frame; @extend %frame;
padding: 1em; padding: 1.7rem;
label { label {
display: none; display: none;
@ -134,9 +134,9 @@ sib-display#member-info {
div[name='header'] { div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white; border-bottom: 1px solid $color-anti-flash-white;
padding-bottom: 1em; padding-bottom: 1.7rem;
padding: 0.5em; padding: 0.85rem;
margin-bottom: 1em; margin-bottom: 1.7rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
>*{ >*{
@ -190,8 +190,8 @@ sib-display#member-info {
border-style: solid; border-style: solid;
border-color: $color-majorelle-blue; border-color: $color-majorelle-blue;
color: $color-majorelle-blue; color: $color-majorelle-blue;
margin: 1em; margin: 1.7rem;
padding: 1em; padding: 1.7rem;
text-decoration:none; text-decoration:none;
} }
@ -242,26 +242,26 @@ hdapp-available {
div { div {
display: inline-block; display: inline-block;
margin-right: 0.4em; margin-right: 0.7rem;
} }
} }
sib-link[next='member-chat'] { sib-link[next='member-chat'] {
border-style: solid; border-style: solid;
margin: 1em; margin: 1.7rem;
display: flex; display: flex;
border-radius: 25px; border-radius: 25px;
border-style: solid; border-style: solid;
border-color: $color-majorelle-blue; border-color: $color-majorelle-blue;
color: $color-majorelle-blue; color: $color-majorelle-blue;
margin: 1em; margin: 1.7rem;
padding: 1em; padding: 1.7rem;
text-decoration:none; text-decoration:none;
} }
div[name='pseudonym'] { div[name='pseudonym'] {
margin-top: -1em; margin-top: -1.7rem;
margin-bottom: 1em; margin-bottom: 1.7rem;
} }
#member-info { #member-info {
@ -276,7 +276,7 @@ hdapp-available {
sib-form { sib-form {
form > * { form > * {
margin-top: 0.5em; margin-top: 0.85rem;
} }
// button like // button like

18
src/styles/filters.scss
View File

@ -4,7 +4,7 @@
grid-gap: 0px 15px; grid-gap: 0px 15px;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
grid-template-rows: 3.5em 3.5em; grid-template-rows: 3.5em 3.5em;
padding-bottom: 3em; padding-bottom: 4.8rem;
label { label {
display: block; display: block;
@ -14,10 +14,10 @@
appearance: none; appearance: none;
border-style: none; border-style: none;
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
font-size: 85%; font-size: 1.36rem;
line-height: 1.80; line-height: 1.80;
margin-top: 1em; margin-top: 1.36rem;
padding: 0.7em; padding: 0.9rem;
width: 95%; width: 95%;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@ -35,7 +35,7 @@
background-size: 14px 9px; background-size: 14px 9px;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
padding: 0.5em 12.5em 0.5em 1em; padding: 0.68rem;
} }
sib-form-label-text { sib-form-label-text {
@ -44,10 +44,8 @@
} }
} }
#offers-list > sib-form > form { #offers-list, #profiles-list {
@extend %filters; & > sib-form > form {
}
#profiles-list > sib-form > form {
@extend %filters; @extend %filters;
}
} }

34
src/styles/form.scss
View File

@ -3,34 +3,34 @@
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
padding: 4em 5em 6em; padding: 6.8rem 8.5rem 10.2rem;
@extend %frame; @extend %frame;
.form-view { .form-view {
border-bottom: 1px solid $color-platinum; border-bottom: 1px solid $color-platinum;
padding-bottom: 1.5em; padding-bottom: 2.55rem;
} }
} }
#job-offer-create, #job-offer-create,
#project-create, #project-create,
#project-edit { #project-edit {
font-size: 17px; font-size: 1.7rem;
h1 { h1 {
color: $color-purple-dark; color: $color-purple-dark;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 2rem;
text-align: center; text-align: center;
} }
p.form-goal { p.form-goal {
margin-bottom: 4em; margin-bottom: 6.8rem;
text-align: center; text-align: center;
} }
p[name$='-text'] { p[name$='-text'] {
font-size: 15px; font-size: 1.5rem;
margin-bottom: 2em; margin-bottom: 2em;
} }
@ -54,7 +54,7 @@
> label { > label {
color: $color-spun-pearl; color: $color-spun-pearl;
font-weight: 600; font-weight: 600;
margin-bottom: 0.5em; margin-bottom: 0.85rem;
} }
input, input,
@ -68,12 +68,12 @@
input, input,
textarea { textarea {
padding: 1em; padding: 1.7rem;
} }
select { select {
margin-bottom: 1em; margin-bottom: 1.7rem;
padding: 0.5em; padding: 0.85rem;
} }
} }
@ -91,7 +91,7 @@
padding-left: 0; padding-left: 0;
div.choices__list { div.choices__list {
margin-top: 1em; margin-top: 1.7rem;
div.choices__item { div.choices__item {
@extend %skill; @extend %skill;
@ -105,8 +105,8 @@
} }
input[type='text'].choices__input { input[type='text'].choices__input {
max-width: 16em; max-width: 27.2rem;
min-width: 16em; min-width: 27.2rem;
} }
} }
} }
@ -164,10 +164,10 @@
border-radius: 100%; border-radius: 100%;
color: $color-majorelle-blue; color: $color-majorelle-blue;
cursor: pointer; cursor: pointer;
font-size: 1.5em; font-size: 2.55rem;
height: 1em; height: 1em;
line-height: 0; line-height: 0;
margin: 0.2em; margin: 0.34rem;
padding: 0 0.04em 0.08em; padding: 0 0.04em 0.08em;
vertical-align: middle; vertical-align: middle;
width: 1em; width: 1em;
@ -175,7 +175,7 @@
} }
input[type='submit'] { input[type='submit'] {
margin-top: 3.5em; margin-top: 6rem;
@extend %submit-form; @extend %submit-form;
} }
} }
@ -185,6 +185,6 @@
input, input,
textarea { textarea {
margin-bottom: 2em; margin-bottom: 3.4rem;
} }
} }

123
src/styles/header.scss
View File

@ -1,69 +1,119 @@
#header { #header {
align-items: center;
background-color: $color-white; background-color: $color-white;
color: $color-dark-lava; color: $color-dark-lava;
//position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
//@include border-shadow(bottom);
box-shadow: 0 2px 4px rgba(148, 98, 98, 0.09);
border: solid $color-white;
border-width: 1px 0;
display: flex; display: flex;
//flex-grow: 0;
//flex-basis : 150px;
flex-shrink: 0; flex-shrink: 0;
align-items: center; padding: 1.6rem 0.64rem;
padding: 1em 0.4em;
position: relative; position: relative;
z-index: 1; 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 { #button-toggle {
@include icon('menu');
display: none;
color: $color-dark-lava; color: $color-dark-lava;
font-size: 2em;
padding: 0.72em;
cursor: pointer; cursor: pointer;
display: none;
font-size: 3.2rem;
padding: 2.3rem;
@include icon('menu');
} }
#logo { #logo {
flex: 1 1 0; flex: 1 1 0;
} }
details summary::-webkit-details-marker { #search-bar {
display:none;
}
#notifications-button {
@include icon(bell);
font-size: 2em;
cursor: pointer;
list-style-type: none;
position: relative; position: relative;
.menu-notification { #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; position: absolute;
top: -3px; right: 3.7rem;
left: 3px; 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 { 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; position: absolute;
right: 0; top: -0.3rem;
width: 2em;
@extend %notification;
}
}
#notifications {
bottom: 0; bottom: 0;
height: 0; height: 0;
left: 0; left: 0;
position: absolute;
right: 0;
z-index: 1; z-index: 1;
> div { > div {
position: absolute; position: absolute;
top: 0;
right: 0; right: 0;
top: 0;
}
} }
} }
@ -77,12 +127,12 @@ details summary::-webkit-details-marker {
} }
img { img {
width: 48px; border-radius: 100%;
height: 48px; height: 48px;
margin-right: 2rem;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
border-radius: 100%; width: 48px;
margin-right: 1rem;
} }
sib-display-div[name='first_name'] { sib-display-div[name='first_name'] {
@ -90,16 +140,17 @@ details summary::-webkit-details-marker {
display: flex; display: flex;
div[name='first_name'] { div[name='first_name'] {
font-size: 16px; align-items: flex-end;
display: flex;
font-size: 1.8rem;
font-weight: 600; font-weight: 600;
@include icon('arrow-down'); @include icon('arrow-down');
&::before { &::before {
color: color-dark-lava; margin-left: 1.5rem;
margin-left: 10px;
} }
} }
} }
} }
} }

19
src/styles/job-offers.scss
View File

@ -1,5 +1,6 @@
#offers-list { #offers-list {
@extend .grid-layer; @extend .grid-layer;
> sib-form { > sib-form {
grid-column-start: start; grid-column-start: start;
grid-column-end: middle; grid-column-end: middle;
@ -14,14 +15,14 @@
grid-row-end: end; grid-row-end: end;
&:first-of-type { &:first-of-type {
margin-top: 3em; margin-top: 5rem;
} }
> sib-display { > sib-display {
@extend %frame; @extend %frame;
display: block; display: block;
margin: 1em 0; margin: 1.7rem 0;
padding: 2em; padding: 3.4rem;
/*&:nth-child(odd) { /*&:nth-child(odd) {
background-color: $color-anti-flash-white; background-color: $color-anti-flash-white;
}*/ }*/
@ -39,7 +40,7 @@
} }
[name='creation'] { [name='creation'] {
margin-top: 20px; margin-top: 2rem;
} }
[name='description'] { [name='description'] {
@ -48,7 +49,7 @@
[name='send'] { [name='send'] {
color: $color-majorelle-blue; color: $color-majorelle-blue;
font-size: 13px; font-size: 1.3rem;
text-align: right; text-align: right;
> sib-link { > sib-link {
@ -56,8 +57,8 @@
@include icon('speech'); @include icon('speech');
&::before { &::before {
font-size: 15px; font-size: 1.5rem;
margin-right: 12px; margin-right: 1.2rem;
} }
} }
} }
@ -99,9 +100,9 @@
border: 1px solid yellow; border: 1px solid yellow;
border-radius: 3px; border-radius: 3px;
color: $color-rolling-stone; color: $color-rolling-stone;
font-size: 15px; font-size: 1.5rem;
font-weight: 400; font-weight: 400;
margin-left: 1em; margin-left: 1.7rem;
padding: calc(16px - 0.8em) 0.7em; padding: calc(16px - 0.8em) 0.7em;
} }
} }

107
src/styles/main.scss
View File

@ -10,21 +10,19 @@
// box-sizing: inherit; // box-sizing: inherit;
} }
html { :root {
//box-sizing: border-box; font-size: 62.5%;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
font-size: 13px;
body {
//box-sizing: border-box;
background-color: $color-anti-flash-white; background-color: $color-anti-flash-white;
color: $color-text-base; color: $color-text-base;
} font-size: 1.6rem;
body {
margin: 0 auto; margin: 0 auto;
overflow-wrap: break-word; overflow-wrap: break-word;
// height: 100%;
// display:flex;
// flex-direction: column;
} }
}
h1, h1,
h2, h2,
@ -39,7 +37,7 @@ h6 {
span { span {
font-weight: 400; font-weight: 400;
padding-left: 0.5em; padding-left: 0.85rem;
&:before { &:before {
content: '// '; content: '// ';
@ -48,22 +46,22 @@ h6 {
} }
h1 { h1 {
font-size: 1.24em; font-size: 2.1rem;
} }
h2 { font-size: 20px; h2 { font-size: 2rem;
} }
h3 { h3 {
font-size: 16px; font-size: 1.6rem;
} }
h4 { h4 {
font-size: 0.68em; font-size: 1.2rem;
} }
h5 { h5 {
font-size: 20px; font-size: 2rem;
} }
.debug { .debug {
@ -87,30 +85,7 @@ button {
.frame { .frame {
@extend %frame; @extend %frame;
padding: 3em; padding: 5rem;
}
.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;
}
} }
.layer { .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-route,
sib-trigger, sib-trigger,
sib-link { sib-link {
@ -213,7 +144,7 @@ sib-link {
sib-link.back { sib-link.back {
color: $color-purple-dark; color: $color-purple-dark;
display: block; display: block;
font-size: 20px; font-size: 2rem;
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
@include icon('arrow-left-circle'); @include icon('arrow-left-circle');
@ -298,8 +229,12 @@ li[name*='groups'] {
border: 1px solid $color-mikado-yellow; border: 1px solid $color-mikado-yellow;
border-radius: 3px; border-radius: 3px;
color: $color-rolling-stone; color: $color-rolling-stone;
font-size: 13px; font-size: 1.3rem;
font-weight: 400; font-weight: 400;
margin-left: 1em; margin-left: 1.7rem;
padding: calc(16px - 1em) 0.7em; padding: calc(16px - 1em) 0.7em;
&:first-of-type {
margin-left: 0;
}
} }

39
src/styles/members.scss
View File

@ -4,7 +4,7 @@
nav { nav {
align-items: center; align-items: center;
display: flex; display: flex;
font-size: 24px; font-size: 2.4rem;
justify-content: center; justify-content: center;
button { button {
@ -26,7 +26,7 @@
} }
span { span {
font-size: 26px; font-size: 2.6rem;
} }
} }
@ -43,7 +43,7 @@
flex-wrap: wrap; flex-wrap: wrap;
grid-column-start: start; grid-column-start: start;
grid-column-end: end; grid-column-end: end;
margin-bottom: 1em; margin-bottom: 1.7rem;
} }
& > div { & > div {
@ -53,23 +53,23 @@
color: $color-quartz; color: $color-quartz;
font-weight: bold; font-weight: bold;
justify-content: center; justify-content: center;
margin-bottom: 2.2em; margin-bottom: 3.75rem;
white-space: nowrap; white-space: nowrap;
&::before, &::after { &::before, &::after {
border-top: 1px solid $color-timberwolf; border-top: 1px solid $color-timberwolf;
content: ''; content: '';
position: relative; position: relative;
top: 0.5em; top: 0.85rem;
width: 35.2vw; width: 35.2vw;
} }
&::before { &::before {
right: 3em; right: 5.1rem;
} }
&::after { &::after {
left: 3em; left: 5.1rem;
} }
} }
@ -81,6 +81,7 @@
display: flex; display: flex;
flex-flow: column wrap; flex-flow: column wrap;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
padding-bottom: 10rem;
@media(min-width: 56rem) { @media(min-width: 56rem) {
height: 62rem; height: 62rem;
width: 32%; width: 32%;
@ -94,7 +95,7 @@
border-bottom: 1px solid $color-anti-flash-white; border-bottom: 1px solid $color-anti-flash-white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.5em 0 2em; padding: 0.85rem 0 3.4rem;
> *:not(sib-display-img) { > *:not(sib-display-img) {
display: flex; display: flex;
@ -106,7 +107,7 @@
background-color: white; background-color: white;
border-radius: 50%; border-radius: 50%;
height: 28vh; height: 28vh;
margin: 1em auto; margin: 1.7rem auto;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 28vh; width: 28vh;
@ -132,24 +133,24 @@
display: flex; display: flex;
flex-basis: 3.5em; flex-basis: 3.5em;
line-height: 1.6; line-height: 1.6;
margin: 1.5em 0; margin: 2.5rem 0;
padding: 0 4em; padding: 0 6.8rem;
text-align: center; text-align: center;
} }
[next=member-chat] { [next=member-chat] {
align-self: center; align-self: center;
border: 1px solid $color-majorelle-blue; border: 1px solid $color-majorelle-blue;
border-radius: 2em; border-radius: 3.4rem;
color: $color-majorelle-blue; color: $color-majorelle-blue;
font-size: 18px; font-size: 1.8rem;
font-weight: bold; font-weight: bold;
padding: 0.6em 1.5em 0.4em; padding: 1rem 2.55rem 0.7rem;
@include icon('speech'); @include icon('speech');
&::before { &::before {
font-size: 25px; font-size: 2.5rem;
padding-right: 0.5em; padding-right: 0.85rem;
} }
} }
} }
@ -159,11 +160,11 @@
> sib-display-div > div, > sib-display-div > div,
> sib-display-lookuplist > ul { > sib-display-lookuplist > ul {
margin-bottom: 0; margin-bottom: 0;
margin-top: 1em; margin-top: 1.7rem;
&::before { &::before {
color: $color-selective-yellow; color: $color-selective-yellow;
font-size: 20px; font-size: 2rem;
padding: 0 0.6em 0 1em; padding: 0 0.6em 0 1em;
} }
} }
@ -176,7 +177,7 @@
} }
> sib-display-lookuplist[name$='skills'] > ul { > sib-display-lookuplist[name$='skills'] > ul {
margin-left: 1em; margin-left: 1.7rem;
} }
[name$='city'] * { [name$='city'] * {

156
src/styles/menu-left.scss
View File

@ -1,26 +1,20 @@
#navbar { #navbar {
background-color: $color-purple-dark; background-color: $color-purple-dark;
color: $color-white; 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; // max-width: 16rem;
// position: relative; // position: relative;
// min-height: 100%; // 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 { &.open {
transform: translateX(0); transform: translateX(0);
} }
//@include border-shadow(right);
sib-router { sib-router {
display: flex;
flex-direction: column;
.menu-wrapper { .menu-wrapper {
&.is-closed { &.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 { .menu {
cursor: pointer;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
padding: 1em;
// border-top: 1px solid #ddd;
// &:last-child {
// border-bottom: 1px solid #ddd;
// }
cursor: pointer;
font-weight: bold; font-weight: bold;
padding: 1.6rem;
&[active] { &[active] {
background-color: $color-mustard; background-color: $color-mustard;
@ -81,111 +47,93 @@
.menu-notification > sib-display > div:first-child { .menu-notification > sib-display > div:first-child {
background-color: $color-purple-dark; background-color: $color-purple-dark;
color: $color-mustard; color: $color-mustard;
font-size: 12px;
} }
} }
.menu-icon { .menu-icon {
//flex-basis: 2em;
width: 4em;
flex-shrink: 0;
flex-grow: 0;
justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; justify-content: center;
font-size: 11px; flex-grow: 0;
flex-shrink: 0;
font-size: 1.7rem;
width: 3.2em;
&:before { &:before {
width: 1.9em; border-radius: 100%;
height: 1.9em; height: 1.9em;
line-height: 1.9em; line-height: 1.9em;
font-size: 1.6em; width: 1.9em;
border-radius: 100%;
// transform: perspective(1000px) translateZ(1px) scale(1); // transform: perspective(1000px) translateZ(1px) scale(1);
// will-change: transform; // will-change: transform;
// transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4); // 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;
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 { .menu-label {
//flex-basis: 8em;
width: 8em;
flex-shrink: 0;
flex-grow: 1;
justify-content: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-transform: uppercase; flex-grow: 1;
flex-shrink: 0;
font-weight: 600; font-weight: 600;
letter-spacing: 0.17px; justify-content: center;
font-size: 16px; letter-spacing: 0.017rem;
text-transform: uppercase;
width: 8em;
} }
/*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */ /*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
.menu-notification { .menu-notification {
//flex-basis: 3em; align-self: center;
width: 2em; display: flex;
flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
display: flex; flex-shrink: 0;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; width: 2em;
> sib-display { > sib-display {
> div:first-of-type {
color: $color-dark-lava; @extend %notification;
display: flex;
justify-content: center;
align-items: center;
width: 1.7em;
height: 1.7em;
border-radius: 100%;
background-color: $color-mustard;
font-size: 12px;
}
} }
} }
&[id-prefix] { .menu-chevron {
display: none; align-items: center;
color: $color-spun-pearl;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
width: 2em;
} }
> sib-display { > sib-display {
display: block; display: block;
font-size: 0.9em; }
color: #aaa; }
> div { .sub-menu {
margin-bottom: 1.5em; padding-left: 2.88rem;
> sib-display { div {
color: $color-spun-pearl;
cursor: pointer; cursor: pointer;
display: block; padding-bottom: 1.12rem;
padding: 0.5em 2em;
div[name='project'] {
display: flex;
sib-display-div[name='dash'] {
margin: 0 0.4em;
} }
} }
} }
} }
.divider {
height: 1px;
background-color: $color-gainsboro-a02;
}
} }
} }

7
src/styles/menu-right.scss
View File

@ -8,7 +8,6 @@
background-color: $color-link-water; background-color: $color-link-water;
color: $color-purple-dark; color: $color-purple-dark;
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px;
font-weight: 600; font-weight: 600;
> ul { > ul {
@ -24,13 +23,13 @@
margin-bottom: 0; margin-bottom: 0;
margin-left: 0; margin-left: 0;
margin-top: 0; margin-top: 0;
padding: 1.5em 1.5em; padding: 2.55rem 2.55rem;
position: relative; position: relative;
width: 12em; width: 12em;
&::before { &::before {
float: left; float: left;
font-size: 40px; font-size: 4rem;
margin-left: 0; margin-left: 0;
margin-right: 1.5rem; margin-right: 1.5rem;
} }
@ -52,7 +51,7 @@
&[name^='project'] { &[name^='project'] {
> li::before { > li::before {
font-size: 40px; font-size: 4rem;
} }
} }

47
src/styles/project-profile.scss
View File

@ -1,11 +1,11 @@
#project-profile { #project-profile {
[name^='block-']:not([name='block-title']) { [name^='block-']:not([name='block-title']) {
margin-top: 3em; margin-top: 5.1rem;
[name^='label-'] { [name^='label-'] {
font-weight: bold; font-weight: bold;
margin-bottom: 0.8em; margin-bottom: 1.4rem;
text-transform: uppercase; text-transform: uppercase;
@extend h2; @extend h2;
} }
@ -13,20 +13,20 @@
sib-display-div:not(:first-of-type), sib-display-div:not(:first-of-type),
ul, ul,
[name*='job'] { [name*='job'] {
font-size: 15px; font-size: 1.5rem;
} }
} }
[name='block-title'] { [name='block-title'] {
border-bottom: 1px solid $color-link-water; border-bottom: 1px solid $color-link-water;
display: flex; display: flex;
padding-bottom: 2em; padding-bottom: 3.4rem;
> * { > * {
color: $color-dark-lava; color: $color-dark-lava;
font-size: 20px; font-size: 2rem;
font-weight: bold; font-weight: bold;
padding-right: 0.5em; padding-right: 0.85rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -35,7 +35,7 @@
} }
> sib-display-div[name='name'] { > sib-display-div[name='name'] {
padding-left: 0.5em; padding-left: 0.85rem;
} }
> :not(:nth-last-child(n+4)) { > :not(:nth-last-child(n+4)) {
@ -44,11 +44,6 @@
text-transform: none; text-transform: none;
} }
> :not(:nth-last-child(n+3)) {
color: $color-text-base;
font-size: 16px;
}
[name='entitled'] { [name='entitled'] {
margin-left: auto; margin-left: auto;
} }
@ -74,13 +69,13 @@
[name^='details-'] { [name^='details-'] {
display: flex; display: flex;
font-size: 15px; font-size: 1.5rem;
margin-bottom: 0.5em; margin-bottom: 0.85rem;
[name='cell-name'], [name='cell-name'],
[name='business-contribution'] { [name='business-contribution'] {
font-weight: bold; font-weight: bold;
margin-right: 5px; margin-right: 0.5rem;
} }
[name='comma'] { [name='comma'] {
@ -93,26 +88,26 @@
display: flex; display: flex;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 1em; margin-top: 1.7rem;
max-width: 100%; max-width: 100%;
> * { > * {
border: 1px solid $color-link-water; border: 1px solid $color-link-water;
flex: 1 1 auto; flex: 1 1 auto;
justify-content: space-between; justify-content: space-between;
margin: 0 -1px -1px 0; margin: 0 -0.1rem -0.1rem 0;
min-width: 25vw; min-width: 25vw;
padding: 0; padding: 0;
h5 { h5 {
margin-left: 1.1em; margin-left: 2rem;
margin-top: 1.2em; margin-top: 2rem;
} }
ul { ul {
font-size: 15px; font-size: 1.5rem;
list-style: none; list-style: none;
margin: -1.2em 0 2.2em -1.2em; margin: -2.04rem 0 3.74rem -2.04rem;
li { li {
@ -140,19 +135,19 @@
} }
&:not(:first-child) { &:not(:first-child) {
padding-left: 3em; padding-left: 5.1rem;
li { li {
margin-bottom: 1em; margin-bottom: 1.7rem;
&:last-child { &:last-child {
margin-top: 1.3em; margin-top: 2.2rem;
} }
&::before { &::before {
color: $color-selective-yellow; color: $color-selective-yellow;
font-size: 20px; font-size: 2rem;
padding: 0 0.6em 0 0; padding: 0 1rem 0 0;
} }
} }

10
src/styles/right-panel.scss
View File

@ -1,7 +1,7 @@
.right-link { .right-link {
padding: 0.5em; padding: 0.85rem;
margin-bottom: 1em; margin-bottom: 1.7rem;
margin-left: 5em; margin-left: 8.5rem;
flex-basis: auto; flex-basis: auto;
border-radius: 2em; border-radius: 2em;
@ -22,7 +22,7 @@
background-color: $color-mustard; background-color: $color-mustard;
border-radius: 100%; border-radius: 100%;
justify-content: center; justify-content: center;
margin-right: 0.7em; margin-right: 1.2rem;
//flex-direction: column; //flex-direction: column;
width: 1.8em; width: 1.8em;
height: 1.8em; height: 1.8em;
@ -41,7 +41,7 @@
.icon-plus { .icon-plus {
font-size: 20px; font-size: 20px;
justify-content: center; justify-content: center;
margin: 0.3em 0.3em 0.3em 0; margin: 0.5rem 0.5rem 0.5rem 0;
&:before { &:before {
//font-size: 1.3em; //font-size: 1.3em;

33
src/styles/variables.scss
View File

@ -26,14 +26,32 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
%button { %button {
display: inline-block; display: inline-block;
padding: 0.5em 1.5em; padding: 0.85rem 2.55rem;
border: none; border: none;
border-radius: 100em; border-radius: 100em;
font-weight: normal; 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 { %content-padding {
padding: 2.6em; padding: 4.4rem;
} }
%frame { %frame {
@ -41,19 +59,14 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
background-color: $color-white; background-color: $color-white;
} }
%shadow {
box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
}
%skill { %skill {
background-color: $color-selective-yellow; background-color: $color-selective-yellow;
border: 1px solid $color-selective-yellow; border: 1px solid $color-selective-yellow;
border-radius: 2em; border-radius: 2em;
color: $color-white; color: $color-white;
font-size: 16px;
font-weight: bold; font-weight: bold;
margin: 0.25em; margin: 0.4rem;
padding: 0.3em 1.2em; padding: 0.5rem 2rem;
} }
%status-open { %status-open {
@ -63,7 +76,7 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
color: $color-white; color: $color-white;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
padding: 0.5em 1em; padding: 0.85rem 1.7rem;
} }
%submit-form { %submit-form {

106
src/styles/variables.scss.orig Normal file
View File

@ -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,
);