ui(css styles) : font-size was moved from px to rem.
This commit is contained in:
Gaëlle Morin
parent
6d9c958f34
commit
db40b83e5a
@ -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")
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
> div {
|
||||
#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;
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'] * {
|
||||
|
||||
@ -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;
|
||||
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;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-transform: uppercase;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.17px;
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
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 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
|
||||
106
src/styles/variables.scss.orig
Normal file
106
src/styles/variables.scss.orig
Normal 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,
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user