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

Header: visual improvement + bug on Chrome resolved. 

Color's names changed.
This commit is contained in:
Gaelle Morin 2019-01-03 16:53:00 +01:00
parent b291527d3e
commit 4961063102
10 changed files with 93 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/styles/content.scss
View File

@ -40,7 +40,7 @@
border: 1px solid; border: 1px solid;
border-radius: 2em; border-radius: 2em;
margin: 0.25em; margin: 0.25em;
background-color: $color-yellow; background-color: $color-selective-yellow;
color: $color-white; color: $color-white;
font-weight: bold; font-weight: bold;
} }
@ -99,7 +99,7 @@
list-style-type: none; list-style-type: none;
} }
>[name$="user"]{ >[name$="user"]{
color: $color-black; color: $color-dark-lava;
} }
>[name$="avatar"]{ >[name$="avatar"]{
grid-column-start: first; grid-column-start: first;
@ -126,7 +126,7 @@ sib-display#member-info {
} }
div[name='header'] { div[name='header'] {
border-bottom: 1px solid $color-grey-light; border-bottom: 1px solid $color-anti-flash-white;
padding-bottom: 1em; padding-bottom: 1em;
padding: 0.5em; padding: 0.5em;
margin-bottom: 1em; margin-bottom: 1em;
@ -181,8 +181,8 @@ sib-display#member-info {
display: flex; display: flex;
border-radius: 25px; border-radius: 25px;
border-style: solid; border-style: solid;
border-color: $color-blue-light; border-color: $color-majorelle-blue;
color: $color-blue-light; color: $color-majorelle-blue;
margin: 1em; margin: 1em;
padding: 1em; padding: 1em;
text-decoration:none; text-decoration:none;
@ -245,8 +245,8 @@ hdapp-available {
display: flex; display: flex;
border-radius: 25px; border-radius: 25px;
border-style: solid; border-style: solid;
border-color: $color-blue-light; border-color: $color-majorelle-blue;
color: $color-blue-light; color: $color-majorelle-blue;
margin: 1em; margin: 1em;
padding: 1em; padding: 1em;
text-decoration:none; text-decoration:none;

2
src/styles/filters.scss
View File

@ -1,5 +1,5 @@
%filters { %filters {
border-bottom: 1px solid $color-grey1; border-bottom: 1px solid $color-gainsboro;
display: grid; display: grid;
grid-gap: 0px 15px; grid-gap: 0px 15px;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;

10
src/styles/form.scss
View File

@ -3,13 +3,13 @@
padding: 0.5em 1em; padding: 0.5em 1em;
border: none; border: none;
border-radius: 100em; border-radius: 100em;
background-color: $color-yellow; background-color: $color-selective-yellow;
color: $color-black; color: $color-dark-lava;
font-weight: normal; font-weight: normal;
} }
%status-open { %status-open {
background-color: $color-blue-light; background-color: $color-majorelle-blue;
border: none; border: none;
border-radius: 100em; border-radius: 100em;
color: $color-white; color: $color-white;
@ -44,7 +44,7 @@ sib-form.block {
} }
input, input,
textarea { textarea {
background-color: $color-grey-light; background-color: $color-anti-flash-white;
box-shadow: none !important; box-shadow: none !important;
border: none; border: none;
padding: 1em 2em; padding: 1em 2em;
@ -102,7 +102,7 @@ sib-form {
button { button {
appearance: none; appearance: none;
background-color: $color-white; background-color: $color-white;
color: $color-yellow; color: $color-selective-yellow;
border: 1px solid; border: 1px solid;
width: 1em; width: 1em;
height: 1em; height: 1em;

30
src/styles/header.scss
View File

@ -1,7 +1,7 @@
#header { #header {
background-color: $color-white; background-color: $color-white;
color: $color-black; color: $color-dark-lava;
//position: relative; //position: relative;
//@include border-shadow(bottom); //@include border-shadow(bottom);
box-shadow: 0 2px 4px rgba(148, 98, 98, 0.09); box-shadow: 0 2px 4px rgba(148, 98, 98, 0.09);
@ -23,7 +23,7 @@
#button-toggle { #button-toggle {
@include icon('menu'); @include icon('menu');
display: none; display: none;
color: $color-black; color: $color-dark-lava;
font-size: 2em; font-size: 2em;
padding: 0.72em; padding: 0.72em;
cursor: pointer; cursor: pointer;
@ -33,6 +33,10 @@
flex: 1 1 0; flex: 1 1 0;
} }
details summary::-webkit-details-marker {
display:none;
}
#notifications-button { #notifications-button {
@include icon(bell); @include icon(bell);
font-size: 2em; font-size: 2em;
@ -66,6 +70,7 @@
div { div {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
> * { > * {
vertical-align: middle; vertical-align: middle;
} }
@ -78,13 +83,22 @@
border-radius: 100%; border-radius: 100%;
margin-right: 1rem; margin-right: 1rem;
} }
sib-display-div[name='first_name'] {
align-items: center;
display: flex;
div[name='first_name'] {
font-size: 16px;
font-weight: 600;
@include icon('arrow-down');
span { &::before {
color: $color-black; color: color-dark-lava;
font-size: 16px; margin-left: 10px;
font-weight: 600; }
letter-spacing: 0.38px;
padding: 0 0.5rem; }
} }
} }
} }

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

@ -23,7 +23,7 @@
margin: 1em 0; margin: 1em 0;
padding: 2em; padding: 2em;
/*&:nth-child(odd) { /*&:nth-child(odd) {
background-color: $color-grey-light; background-color: $color-anti-flash-white;
}*/ }*/
sib-display-div[name='title'] { sib-display-div[name='title'] {
@extend h3; @extend h3;
@ -47,7 +47,7 @@
} }
[name='send'] { [name='send'] {
color: $color-blue-light; color: $color-majorelle-blue;
font-size: 13px; font-size: 13px;
text-align: right; text-align: right;
@ -73,7 +73,7 @@
[name='user-thumb'] { [name='user-thumb'] {
align-items: center; align-items: center;
color: $color-black-light; color: $color-quartz;
display: flex; display: flex;
font-weight: 600; font-weight: 600;
margin: -0.25em; margin: -0.25em;
@ -92,7 +92,7 @@
div[name*='roles'] { div[name*='roles'] {
border: 1px solid yellow; border: 1px solid yellow;
border-radius: 3px; border-radius: 3px;
color: $color-grey2; color: $color-rolling-stone;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
margin-left: 1em; margin-left: 1em;

30
src/styles/main.scss
View File

@ -14,8 +14,8 @@ html {
//box-sizing: border-box; //box-sizing: border-box;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
font-size: 13px; font-size: 13px;
background-color: $color-grey-light; background-color: $color-anti-flash-white;
color: $color-grey; color: $color-taupe-gray;
} }
// body { // body {
// height: 100%; // height: 100%;
@ -29,7 +29,7 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
color: $color-black; color: $color-dark-lava;
font-weight: 600; font-weight: 600;
padding: 0; padding: 0;
/*margin: 0.67em 0;*/ /*margin: 0.67em 0;*/
@ -80,9 +80,9 @@ h4 {
> div { > div {
align-items: center; align-items: center;
background-color: $color-yellow-light; background-color: $color-mustard;
border-radius: 100%; border-radius: 100%;
color: $color-black; color: $color-dark-lava;
display: flex; display: flex;
font-size: 12px; font-size: 12px;
height: 1.7em; height: 1.7em;
@ -131,8 +131,8 @@ h4 {
> sib-router { > sib-router {
font-family: monospace; font-family: monospace;
color: $color-black; color: $color-dark-lava;
background-color: $color-grey-light2; background-color: $color-timberwolf;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -142,17 +142,17 @@ h4 {
> div { > div {
position: relative; position: relative;
padding: 1.5em 3em; padding: 1.5em 3em;
border-bottom: 1px solid $color-grey; border-bottom: 1px solid $color-taupe-gray;
} }
&:hover { &:hover {
background-color: $color-grey; background-color: $color-taupe-gray;
} }
&[active] { &[active] {
font-weight: bold; font-weight: bold;
background-color: $color-black; background-color: $color-dark-lava;
color: $color-yellow; color: $color-selective-yellow;
> div:before { > div:before {
opacity: 1; opacity: 1;
@ -188,8 +188,8 @@ h4 {
} }
#search-icon { #search-icon {
-webkit-text-stroke: 1px $color-grey-light4; -webkit-text-stroke: 1px $color-bombay;
color: $color-grey-light4; color: $color-bombay;
pointer-events: none; pointer-events: none;
} }
@ -208,7 +208,7 @@ h4 {
-webkit-appearance: textfield; -webkit-appearance: textfield;
border-radius: 10em; border-radius: 10em;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
border: 1px solid $color-grey-light4; border: 1px solid $color-bombay;
height: 2.8rem; height: 2.8rem;
width: 22rem; width: 22rem;
@ -312,7 +312,7 @@ sib-display-lookuplist {
border: 1px solid; border: 1px solid;
border-radius: 2em; border-radius: 2em;
margin: 0.25em; margin: 0.25em;
background-color: $color-yellow; background-color: $color-selective-yellow;
color: $color-white; color: $color-white;
font-weight: bold; font-weight: bold;
} }

22
src/styles/members.scss
View File

@ -17,15 +17,14 @@
margin-bottom: 1em; margin-bottom: 1em;
&:first-of-type { &:first-of-type {
color: $color-black2; color: $color-quartz;
font-size: 20px; font-weight: bold;
font-weight: 600;
justify-content: center; justify-content: center;
margin-bottom: 2.2em; margin-bottom: 2.2em;
white-space: nowrap; white-space: nowrap;
&::before, &::after { &::before, &::after {
border-top: 1px solid $color-grey-light2; border-top: 1px solid $color-timberwolf;
content: ''; content: '';
position: relative; position: relative;
top: 0.5em; top: 0.5em;
@ -42,7 +41,7 @@
} }
> sib-display { > sib-display {
color: $color-grey2; color: $color-rolling-stone;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
@ -59,7 +58,7 @@
} }
div[name='header'] { div[name='header'] {
border-bottom: 1px solid $color-grey-light; border-bottom: 1px solid $color-anti-flash-white;
padding: 0.5em 0 2em; padding: 0.5em 0 2em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -91,11 +90,6 @@
} }
} }
div[name='pseudonym'] {
font-size: 15px;
margin-top: 8px;
}
sib-display-div[name$='bio'] { sib-display-div[name$='bio'] {
display: flex; display: flex;
flex-basis: 3.5em; flex-basis: 3.5em;
@ -107,9 +101,9 @@
[next=member-chat] { [next=member-chat] {
align-self: center; align-self: center;
border: 1px solid $color-blue-light; border: 1px solid $color-majorelle-blue;
border-radius: 2em; border-radius: 2em;
color: $color-blue-light; color: $color-majorelle-blue;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
padding: 0.6em 1.5em 0.4em; padding: 0.6em 1.5em 0.4em;
@ -128,7 +122,7 @@
margin-top: 1em; margin-top: 1em;
&::before { &::before {
color: $color-yellow; color: $color-selective-yellow;
font-size: 20px; font-size: 20px;
padding: 0 0.6em 0 1em; padding: 0 0.6em 0 1em;
} }

16
src/styles/menu.scss
View File

@ -54,13 +54,13 @@ sib-router {
.divider { .divider {
height: 1px; height: 1px;
background-color: $color-grey-light3; background-color: $color-gainsboro-a02;
} }
.sub-menu { .sub-menu {
padding-left: 1.8em; padding-left: 1.8em;
div{ div {
color: $color-grey-mid; color: $color-spun-pearl;
padding-bottom: 0.7em; padding-bottom: 0.7em;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
@ -79,7 +79,7 @@ sib-router {
font-weight: bold; font-weight: bold;
&[active] { &[active] {
background-color: $color-yellow-light; background-color: $color-mustard;
color: $color-purple-dark; color: $color-purple-dark;
.menu-icon:before { .menu-icon:before {
@ -90,7 +90,7 @@ sib-router {
.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-yellow-light; color: $color-mustard;
font-size: 12px; font-size: 12px;
} }
} }
@ -128,7 +128,7 @@ sib-router {
align-items: center; align-items: center;
> div { > div {
color: $color-grey-mid; color: $color-spun-pearl;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -163,14 +163,14 @@ sib-router {
> sib-display { > sib-display {
> div:first-of-type { > div:first-of-type {
color: $color-black; color: $color-dark-lava;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 1.7em; width: 1.7em;
height: 1.7em; height: 1.7em;
border-radius: 100%; border-radius: 100%;
background-color: $color-yellow-light; background-color: $color-mustard;
font-size: 12px; font-size: 12px;
} }
} }

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

@ -16,10 +16,10 @@
.how-link { .how-link {
@extend .right-link; @extend .right-link;
background-color: $color-white; background-color: $color-white;
color: $color-black; color: $color-dark-lava;
flex-wrap: nowrap; flex-wrap: nowrap;
.icon-idea { .icon-idea {
background-color: $color-yellow-light; background-color: $color-mustard;
border-radius: 100%; border-radius: 100%;
justify-content: center; justify-content: center;
margin-right: 0.7em; margin-right: 0.7em;
@ -32,7 +32,7 @@
.action-link { .action-link {
@extend .right-link; @extend .right-link;
background-color: $color-yellow; background-color: $color-selective-yellow;
color: $color-white; color: $color-white;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;

40
src/styles/variables.scss
View File

@ -1,25 +1,25 @@
// colors //Color Variables
$color-white: #fff; $color-quartz: hsl(0, 0%, 29%);
$color-black: #36383b; $color-timberwolf: hsl(0, 0%, 85%);
$color-black2: #4a4a4a; $color-white: hsl(0, 0%,100%);
$color-black-light: #4a4a4a;
$color-grey-dark: #36383b; $color-selective-yellow: hsl(43, 100%, 50%);
$color-grey2: #7a7f85; $color-mustard: hsl(46, 100%, 67%);
$color-grey1: #d7dbe0;
$color-grey: #898f95; $color-rolling-stone: hsl(210, 4%, 50%);
$color-grey-mid: #abaaba; $color-taupe-gray: hsl(210, 5%, 56%);
$color-grey-light5: #9ba0a7; $color-anti-flash-white: hsl(210, 25%, 95%);
$color-grey-light4: #b4b9c0; $color-gainsboro: hsl(213, 13%, 86%);
$color-grey-light3: hsla(59, 13%, 86%, 0.2); $color-gainsboro-a02: hsla(213, 13%, 86%, 0.2);
$color-grey-light2: #d8d8d8; $color-bombay: hsl(215, 9%, 73%);
$color-grey-light: #f0f3f6; $color-dark-lava: hsl(216, 4%, 22%);
$color-yellow: #ffb700; $color-purple-dark: hsl(233, 18%, 29%);
$color-yellow-light: #ffd759; $color-spun-pearl: hsl(244, 10%, 70%);
$color-purple-dark: #3C3F57; $color-majorelle-blue: hsl(244, 73%, 62%);
$color-blue-light: #6259E5;
%shadow { %shadow {
box-shadow: 0 0 8px 0 rgba(133, 140, 148, 0.19); box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
} }
%frame { %frame {