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

2
src/styles/filters.scss
View File

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

10
src/styles/form.scss
View File

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

30
src/styles/header.scss
View File

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

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

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

30
src/styles/main.scss
View File

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

22
src/styles/members.scss
View File

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

16
src/styles/menu.scss
View File

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

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

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

40
src/styles/variables.scss
View File

@ -1,25 +1,25 @@
// colors
$color-white: #fff;
$color-black: #36383b;
$color-black2: #4a4a4a;
$color-black-light: #4a4a4a;
$color-grey-dark: #36383b;
$color-grey2: #7a7f85;
$color-grey1: #d7dbe0;
$color-grey: #898f95;
$color-grey-mid: #abaaba;
$color-grey-light5: #9ba0a7;
$color-grey-light4: #b4b9c0;
$color-grey-light3: hsla(59, 13%, 86%, 0.2);
$color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6;
$color-yellow: #ffb700;
$color-yellow-light: #ffd759;
$color-purple-dark: #3C3F57;
$color-blue-light: #6259E5;
//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-mustard: hsl(46, 100%, 67%);
$color-rolling-stone: hsl(210, 4%, 50%);
$color-taupe-gray: hsl(210, 5%, 56%);
$color-anti-flash-white: hsl(210, 25%, 95%);
$color-gainsboro: hsl(213, 13%, 86%);
$color-gainsboro-a02: hsla(213, 13%, 86%, 0.2);
$color-bombay: hsl(215, 9%, 73%);
$color-dark-lava: hsl(216, 4%, 22%);
$color-purple-dark: hsl(233, 18%, 29%);
$color-spun-pearl: hsl(244, 10%, 70%);
$color-majorelle-blue: hsl(244, 73%, 62%);
%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 {