Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • applications/etuc/hubl
  • applications/hubl
  • decentral1se/hubl
  • rngadam/hubl
  • jvtrudel/hubl
  • 3wc/hubl
6 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1041 additions and 733 deletions
src/styles/content.scss
View file @ 878f6d1d
......@@ -7,23 +7,6 @@
// //float: right;
// }
[name='user-thumb'] {
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
sib-display-img {
width: 2.5em;
height: 2.5em;
overflow: hidden;
border-radius: 100%;
}
}
// skills
/*#member-profile sib-display-lookuplist {
......@@ -60,7 +43,7 @@
// chat
.chat-view {
padding: 1em;
padding: 1.7rem;
position: relative;
z-index: 0;
@extend %frame;
......@@ -121,99 +104,6 @@
// }
}*/
sib-display#member-info {
display: flex;
flex-direction: column;
position: relative;
@extend %frame;
padding: 1em;
label {
display: none;
}
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
padding-bottom: 1em;
padding: 0.5em;
margin-bottom: 1em;
display: flex;
flex-direction: column;
>*{
display: flex;
justify-content: center;
flex-basis: content;
}
sib-display-img {
flex-basis:150px;
img {
border-radius: 100%;
width:150px;
}
}
}
hdapp-userinfo {
@extend h1;
}
/*
[name=infos] {
//margin: 2em 0;
> * {
// display: block;
margin: 0.5em 0;
}
}
*/
ul[name$='roles'] * {
@include icon('user');
}
ul[name$='cell'] * {
@include icon('location-pin');
}
[name$='user'] {
margin-bottom: 0em;
}
sib-display-div[name$='bio'] {
margin-top: 1em;
flex-basis : 5em;
}
a[href^='mailto'] {
display: flex;
border-radius: 25px;
border-style: solid;
border-color: $color-majorelle-blue;
color: $color-majorelle-blue;
margin: 1em;
padding: 1em;
text-decoration:none;
}
sib-display-tel {
display: block;
@include icon('phone');
}
hdapp-hyperlink {
display: block;
@include icon('link');
}
sib-display-div[name$='foaf:homepage'] * {
@include icon('link');
}
sib-display-div[name$='more']{
display: flex;
flex-direction: row-reverse;
}
}
hdapp-available {
display: block;
text-align: right;
......@@ -242,26 +132,24 @@ hdapp-available {
div {
display: inline-block;
margin-right: 0.4em;
margin-right: 0.7rem;
}
}
sib-link[next='member-chat'] {
border-style: solid;
margin: 1em;
display: flex;
border-radius: 25px;
border-style: solid;
border-color: $color-majorelle-blue;
color: $color-majorelle-blue;
margin: 1em;
padding: 1em;
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 +164,7 @@ hdapp-available {
sib-form {
form > * {
margin-top: 0.5em;
margin-top: 0.85rem;
}
// button like
......
src/styles/filters.scss
View file @ 878f6d1d
......@@ -4,7 +4,6 @@
grid-gap: 0px 15px;
grid-template-columns: 50% 50%;
grid-template-rows: 3.5em 3.5em;
padding-bottom: 3em;
label {
display: block;
......@@ -14,10 +13,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;
......@@ -28,14 +27,20 @@
}
select {
background: white;
background: $color-white;
background-image: url("/images/chevron-down.png");
background-position: 96% 60%;
background-repeat: no-repeat;
background-size: 14px 9px;
box-sizing: border-box;
color: $color-taupe-gray;
display: inline-block;
padding: 0.5em 12.5em 0.5em 1em;
padding: 0.68rem;
width: 100%;
> option:not(:first-child) {
color: black;
}
}
sib-form-label-text {
......@@ -44,10 +49,8 @@
}
}
#offers-list > sib-form > form {
@extend %filters;
}
#profiles-list > sib-form > form {
@extend %filters;
#offers-list, #profiles-list {
& > sib-form {
@extend %filters;
}
}
src/styles/form.scss
View file @ 878f6d1d
.frame-form {
padding: 4em 5em 6em;
display: flex;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
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;
}
}
#circle-create,
#circle-edit,
#job-offer-create,
#project-create,
#project-edit {
font-size: 17px;
flex: 1;
font-size: 1.7rem;
h1 {
color: $color-purple-dark;
font-weight: bold;
font-size: 20px;
font-size: 2rem;
text-align: center;
}
p {
margin-bottom: 4em;
p.form-goal {
margin-bottom: 6.8rem;
text-align: center;
}
[name$='-text'] {
font-size: 1.5rem;
margin-bottom: 2em;
}
div[name^='block-'] {
display: flex;
......@@ -32,18 +45,16 @@
}
}
sib-form-auto-completion,
sib-form-checkbox,
sib-form-label-text,
sib-form-multiple-dropdown,
sib-form-textarea {
align-items: stretch;
display: flex;
flex-direction: column;
> label {
color: $color-spun-pearl;
font-weight: 600;
margin-bottom: 0.5em;
@extend %label;
}
input,
......@@ -53,17 +64,58 @@
border: none;
color: $color-purple-dark;
line-height: 1.5;
width: 95%;
}
input,
textarea {
margin-bottom: 2em;
padding: 1em;
padding: 1.7rem;
}
select {
margin-bottom: 1em;
padding: 0.5em;
margin-bottom: 1.7rem;
padding: 0.85rem;
}
}
sib-form-auto-completion,
sib-form-checkbox,
sib-form-dropdown,
sib-form-multiple-dropdown {
label {
color: $color-dark-lava;
font-weight: 600;
}
}
sib-form-auto-completion {
div.choices__inner {
background-color: inherit;
border: none;
display: flex;
flex-direction: column-reverse;
padding-left: 0;
div.choices__list {
margin-top: 1.7rem;
div.choices__item {
/*@extend %skill;*/
button.choices__button {
border-left: 1px solid $color-selective-yellow;
opacity: 1;
padding-left: 0;
}
}
}
input[type='text'].choices__input {
max-width: 27.2rem;
min-width: 27.2rem;
}
}
}
......@@ -73,6 +125,7 @@
[type='checkbox'] {
cursor: pointer;
position: relative;
margin-top: 2em;
&:before {
border: 2px solid $color-taupe-gray;
......@@ -111,6 +164,19 @@
}
}
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
sib-form-dropdown {
select {
background: $color-glitter;
border: none;
color: $color-purple-dark;
line-height: 1.5;
margin-left: 1rem;
padding: 0.85rem;
}
}
sib-form-multiple-dropdown {
button {
......@@ -120,18 +186,31 @@
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;
}
}
sib-form-textarea {
align-items: stretch;
}
input[type='submit'] {
margin-top: 3.5em;
@extend %button-form;
margin-top: 6rem;
@extend %submit-form;
}
}
#project-create,
#project-edit {
input,
textarea {
margin-bottom: 3.4rem;
}
}
src/styles/group-profile.scss 0 → 100644
View file @ 878f6d1d
#circle-profile {
min-height: 100%;
.block-group > div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
padding: 0;
sib-display > div {
align-items: center;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
display: grid;
font-size: 1.6rem;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
height: auto;
justify-items: center;
margin: 1rem 0.5rem 1rem 0;
position: relative;
padding-right: 1rem;
padding-top: 1rem;
text-align: center;
width: 14em;
&:hover {
cursor: pointer;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
top: -2px;
}
> div[name='teammate-img'] {
background-color: $color-bombay;
border-radius: 50%;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
height: 6vh;
overflow: hidden;
width: 6vh;
img {
height: 100%;
left: 0;
object-fit: cover;
top: 0;
width: 100%;
}
}
> hdapp-userinfo {
> label {
display: none;
}
}
div[name='teammate-name'] {
grid-column: 3 / span 2;
grid-row: 1 / span 1;
sib-display-div[name='first_name'] {
display: inline;
> div {
display: inline;
}
}
sib-display-div[name='last_name'] {
display: inline;
> div {
display: inline;
}
}
}
> div[name='teammate-pseudonym'] {
align-self: start;
font-size: 1.2rem;
grid-column: 3 / span 2;
grid-row: 2 / span 1;
> * > * {
display: inline;
}
}
> sib-display-div[name='teammate-profile'] {
color: $color-dark-lava;
font-size: 1.2rem;
grid-column: 1 / span 2;
grid-row: 3 / span 1;
}
> sib-link {
color: $color-majorelle-blue;
font-size: 1.2rem;
justify-self: stretch;
grid-column: 3 / span 2;
grid-row: 3 / span 1;
}
}
}
}
\ No newline at end of file
src/styles/header.scss
View file @ 878f6d1d
#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;
}
}
}
}
}
src/styles/icons/material-design-icons.scss
View file @ 878f6d1d
......@@ -24,7 +24,9 @@ $mdi-icons: (
account-outline: '\F013',
atom: '\F767',
cellphone-iphone: '\F120',
check: '\F12C'
check: '\F12C',
email-outline: '\F1F0',
link-variant: '\F339'
);
%mdi,
......
src/styles/index.scss
View file @ 878f6d1d
......@@ -14,7 +14,9 @@
@import 'filters';
@import 'right-panel';
@import 'group-profile';
@import 'job-offers';
@import 'member-profile';
@import 'members';
@import 'project-profile';
......
src/styles/job-offers.scss
View file @ 878f6d1d
#offers-list {
@extend .grid-layer;
> sib-form {
grid-column-start: start;
grid-column-end: middle;
......@@ -14,94 +15,108 @@
grid-row-end: end;
&:first-of-type {
margin-top: 3em;
margin-top: 5rem;
}
> sib-display {
@extend %frame;
display: block;
margin: 1em 0;
padding: 2em;
font-size: 1.5rem;
margin: 1.7rem 0;
padding: 3.4rem;
/*&:nth-child(odd) {
background-color: $color-anti-flash-white;
}*/
[name='user-thumb'] {
align-items: center;
display: flex;
margin: -0.25em;
> * {
margin: 0.25em;
}
[name='author.first_name'] {
color: $color-quartz;
font-weight: 600;
}
sib-multiple[name$='groups'] {
display: flex;
> * {
@extend %group;
}
}
sib-display-img {
background-color: $color-white;
border-radius: 50%;
height: 4.25rem;
overflow: hidden;
position: relative;
width: 4.25rem;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
[name='creationDate'] {
margin-bottom: 0.7rem;
margin-top: 2rem;
}
sib-display-div[name='title'] {
@extend h3;
display: block;
font-weight: bold;
line-height: 19px;
}
label {
display: none;
[name='description'] {
line-height: 1.6;
margin-bottom: 1.6rem;
}
[name='send'] {
color: $color-majorelle-blue;
font-size: 1.3rem;
float: right;
> sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 1.5rem;
margin-right: 1.2rem;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
strong {
@extend %status-open;
}
}
}
}
}
[name='creation'] {
margin-top: 20px;
}
[name='description'] {
line-height: 1.6;
}
[name='send'] {
color: $color-majorelle-blue;
font-size: 13px;
text-align: right;
> sib-link {
cursor: pointer;
@include icon('speech');
&::before {
font-size: 15px;
margin-right: 12px;
}
}
}
[name='status'] {
float: right;
display: flex;
align-items: center;
margin: -0.25em;
> * {
margin: 0.25em;
}
strong {
@extend %status-open;
}
}
[name='user-thumb'] {
align-items: center;
color: $color-quartz;
display: flex;
font-weight: 600;
margin: -0.25em;
> * {
margin: 0.25em;
}
sib-display-img {
border-radius: 100%;
height: 2.5em;
overflow: hidden;
width: 2.5em;
}
div[name*='roles'] {
border: 1px solid yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 15px;
font-weight: 400;
margin-left: 1em;
padding: calc(16px - 0.8em) 0.7em;
}
}
src/styles/main.scss
View file @ 878f6d1d
......@@ -10,18 +10,19 @@
// 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 {
// height: 100%;
// display:flex;
// flex-direction: column;
// }
h1,
h2,
......@@ -36,7 +37,7 @@ h6 {
span {
font-weight: 400;
padding-left: 0.5em;
padding-left: 0.85rem;
&:before {
content: '// ';
......@@ -45,28 +46,44 @@ 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 {
outline: 2px dotted red;
}
button {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
-webkit-appearance: none;
}
li {
list-style: none;
margin-right: 0.4rem;
padding-left: 0;
}
#job-offers,
#members {
@extend %content-padding;
......@@ -74,30 +91,7 @@ h5 {
.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 {
......@@ -114,6 +108,7 @@ h5 {
#content {
display: flex;
overflow: hidden;
}
#mainContainer {
......@@ -129,7 +124,8 @@ h5 {
/* sub menu (right menu) */
#mainContainer {
display: flex;
> div {
> div#project,
> div#circle {
flex-grow: 1;
display: flex;
flex-direction: row-reverse;
......@@ -146,50 +142,6 @@ h5 {
}
}
#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 {
......@@ -197,9 +149,11 @@ sib-link {
}
sib-link.back {
color: $color-purple-dark;
display: block;
@include icon('arrow-left');
@extend h1;
font-size: 2rem;
font-weight: bold;
text-align: right;
}
.containerH {
......@@ -232,7 +186,7 @@ sib-link.back {
flex-direction: row-reverse;
}
#project-views-container {
#views-container {
flex: 1 0 0;
overflow-y: auto;
}
......@@ -257,38 +211,21 @@ sib-link.back {
}
/*sib-display-lookuplist[name$="skills"] {
display: flex;
}*/
/* TEMPLATE SKILLS*/
sib-display-lookuplist {
sib-multiple[name*='skills'] {
display: flex;
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
li[name*='skills'] {
padding: 0.3em 1.2em;
border: 1px solid;
border-radius: 2em;
margin: 0.25em;
background-color: $color-selective-yellow;
color: $color-white;
font-weight: bold;
}
flex-wrap: wrap;
}
div[name*='groups'],
li[name*='groups'] {
border: 1px solid $color-mikado-yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 13px;
font-weight: 400;
margin-left: 1em;
padding: calc(16px - 1em) 0.7em;
.skill {
background-color: $color-selective-yellow;
border: 1px solid $color-selective-yellow;
border-radius: 2em;
color: $color-white;
font-size: 1.4rem;
font-weight: bold;
margin: 0.4rem 0.4rem 0.4rem 0;
padding: 0.5rem 2rem;
}
src/styles/member-profile.scss 0 → 100644
View file @ 878f6d1d
#member {
display: flex;
flex-direction: column;
flex-grow: 1;
.backlink {
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
@extend %backlink;
&::before {
font-size: 2rem;
margin-right: 1rem;
}
}
#member-profile {
background-color: $color-white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
margin: 2rem 1rem 5rem 2rem;
min-height: 100vh;
div[name='member-profile__bio'] {
border-bottom: 1px solid $color-link-water;
display: grid;
grid-template-areas: "avatar name name name status"
"avatar pseudo pseudo pseudo status"
"avatar bio bio bio status"
"avatar list list list button"
"avatar list list list button";
padding: 4.5rem;
div[name='member-img'] {
background-color: $color-bombay;
border-radius: 50%;
grid-area: avatar;
height: 34vh;
overflow: hidden;
position: relative;
width: 34vh;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
div[name='member-profile'] {
align-items: flex-start;
align-self: end;
display: flex;
grid-area: name;
> sib-display-div[name^='user.'] {
color: $color-dark-lava;
font-weight: bold;
@extend h1;
}
> sib-multiple[name$='groups'] {
display: flex;
padding-left: 1.4rem;
groups-name {
@extend %group;
}
}
}
sib-display-div[name='user.username'] {
grid-area: pseudo;
div[name='user.username']::before {
content: '@';
}
}
sib-display-div[name='bio'] {
grid-area: bio;
}
div[name='infos'] {
grid-area: list;
@extend %member-info;
}
status-template[name$='available']{
align-self: flex-end;
color: $color-majorelle-blue;
grid-area: status;
justify-self: flex-end;
span {
align-items: center;
align-self: center;
display: flex;
flex-direction: column;
font-weight: 600;
line-height: 2;
}
span.status-one {
@include ci('awareness');
&::before {
border-bottom: 2px solid $color-selective-yellow;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
}
span.status-two {
@include ci('armor');
&::before {
border-bottom: 2px solid $color-selective-yellow;
font-size: 7.3rem;
padding-bottom: 1.5rem;
}
}
}
sib-action[name='send'] {
align-self: flex-end;
grid-area: button;
justify-self: flex-end;
}
[next=member-chat] {
@include icon('speech');
border: 1px solid $color-majorelle-blue;
border-radius: 2em;
color: $color-majorelle-blue;
font-size: 18px;
font-weight: bold;
justify-self: end;
padding: 0.6em 1.5em 0.4em;
&::before {
font-size: 25px;
padding-right: 0.5em;
}
}
}
div[name='member-profile__skills'] {
sib-display-lookuplist {
label {
display: none;
}
}
}
}
}
src/styles/member.scss deleted 100644 → 0
View file @ 17167fbf
src/styles/members.scss
View file @ 878f6d1d
#profiles-list {
@extend .grid-layer;
& > sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
#members {
& > div {
display: flex;
flex-wrap: wrap;
grid-column-start: start;
grid-column-end: end;
justify-content: space-between;
margin-bottom: 1em;
&:first-of-type {
color: $color-quartz;
font-weight: bold;
#profiles-list {
@extend .grid-layer;
nav {
align-items: center;
display: flex;
font-size: 2.4rem;
justify-content: center;
margin-bottom: 2.2em;
white-space: nowrap;
&::before, &::after {
border-top: 1px solid $color-timberwolf;
content: '';
position: relative;
top: 0.5em;
width: 35.2vw;
button {
color: $color-anti-flash-white;
&:before {
color: $color-dark-lava;
@include icon('arrow-left-circle');
}
&:disabled::before {
color: $color-manatee;
}
}
&::before {
right: 3em;
button:nth-of-type(2) {
order: 1;
transform: rotate(180deg);
}
&::after {
left: 3em;
span {
font-size: 2.6rem;
}
}
> sib-display {
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
color: $color-rolling-stone;
cursor: pointer;
& > sib-form {
grid-column-start: start;
grid-column-end: middle;
grid-row-start: start;
grid-row-end: middle;
}
& > div,
& > nav {
display: flex;
flex-flow: column wrap;
margin-bottom: 2.5rem;
@media(min-width: 56rem) {
height: 62rem;
width: 32%;
}
flex-wrap: wrap;
grid-column-start: start;
grid-column-end: end;
margin-bottom: 1.7rem;
}
& > div {
justify-content: space-between;
&:first-of-type {
color: $color-quartz;
font-weight: bold;
justify-content: center;
margin: 3.75rem 0;
position: relative;
z-index: 1;
&::before {
border-top: 1px solid $color-timberwolf;
bottom: 0;
content: '';
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
width: 100%;
z-index: -1;
}
label {
display: none;
span {
background-color: $color-anti-flash-white;
padding: 0 60px;
}
}
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
> sib-display {
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
color: $color-rolling-stone;
cursor: pointer;
display: flex;
flex-direction: column;
padding: 0.5em 0 2em;
> *:not(sib-display-img) {
display: flex;
flex-basis: content;
justify-content: center;
flex-flow: column wrap;
margin-bottom: 2.5rem;
padding-bottom: 10rem;
@media(min-width: 56rem) {
height: 62rem;
width: 32%;
}
sib-display-img {
background-color: white;
border-radius: 50%;
height: 28vh;
margin: 1em auto;
overflow: hidden;
position: relative;
width: 28vh;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
label {
display: none;
}
ul[name='user'] {
font-weight: bold;
margin: 0;
@extend h1;
}
sib-display-div[name$='bio'] {
div[name='header'] {
border-bottom: 1px solid $color-anti-flash-white;
display: flex;
flex-basis: 3.5em;
line-height: 1.6;
margin: 1.5em 0;
padding: 0 4em;
text-align: center;
}
[next=member-chat] {
align-self: center;
border: 1px solid $color-majorelle-blue;
border-radius: 2em;
color: $color-majorelle-blue;
font-size: 18px;
font-weight: bold;
padding: 0.6em 1.5em 0.4em;
@include icon('speech');
&::before {
font-size: 25px;
padding-right: 0.5em;
flex-direction: column;
padding: 0.85rem 0 3.4rem;
> *:not(sib-display-img) {
display: flex;
flex-basis: content;
justify-content: center;
}
}
}
div[name='infos'] {
> sib-display-div > div,
> sib-display-lookuplist > ul {
margin-bottom: 0;
margin-top: 1em;
&::before {
color: $color-selective-yellow;
font-size: 20px;
padding: 0 0.6em 0 1em;
sib-display-img {
background-color: $color-white;
border-radius: 50%;
height: 28vh;
margin: 1.7rem auto;
overflow: hidden;
position: relative;
width: 28vh;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
> sib-display-lookuplist[name$='groups'] > ul > li {
border: none;
font-size: inherit;
margin-left: 0;
padding: 0;
}
[name='user.name'] {
font-weight: bold;
margin: 0;
@extend h1;
}
> sib-display-lookuplist[name$='skills'] > ul {
margin-left: 1em;
}
[name$='city'] * {
@include mdi('atom');
sib-display-div[name$='bio'] {
display: flex;
flex-basis: 3.5em;
line-height: 1.6;
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: 3.4rem;
color: $color-majorelle-blue;
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 2.55rem 0.7rem;
@include icon('speech');
&::before {
font-size: 2.5rem;
padding-right: 0.85rem;
}
}
}
ul[name*='groups'] {
@include mdi('account-outline');
}
div[name='infos'] {
padding: 0 1.7rem;
[name$='email'] * {
@include icon('envelope');
}
@extend %member-info;
[name$='phone'] * {
@include icon('phone');
sib-multiple[name$='groups'] {
display: flex;
> * {
margin-right: 0.4rem;
}
}
}
}
}
......
src/styles/menu-left.scss
View file @ 878f6d1d
#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;
}
}
}
......
src/styles/menu-right.scss
View file @ 878f6d1d
......@@ -5,10 +5,9 @@
nav {
> sib-router {
background-color: $color-link-water;
background-color: $color-222-52-90;
color: $color-purple-dark;
flex: 0 0 auto;
font-size: 16px;
font-weight: 600;
> ul {
......@@ -21,18 +20,16 @@
align-items: center;
border-bottom: 1px solid $color-lavender-gray;
display: flex;
margin-bottom: 0;
margin-left: 0;
margin-top: 0;
padding: 1.5em 1.5em;
margin: 0;
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;
margin-right: 2.55rem;
}
}
......@@ -52,7 +49,7 @@
&[name^='project'] {
> li::before {
font-size: 40px;
font-size: 4rem;
}
}
......@@ -76,15 +73,15 @@
}
&.offsite-is-closed {
transform: translate(12rem);
transform: translate(15.5rem);
& #jsOffsiteToggle::before {
& .jsOffsiteToggle::before {
transform: rotate(180deg);
}
& ~ #project-views-container {
& ~ #views-container {
flex-basis: 95%;
transform: translate(12rem);
transform: translate(15.5rem);
}
}
}
......
src/styles/project-profile.scss
View file @ 878f6d1d
#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,23 +35,25 @@
}
> sib-display-div[name='name'] {
padding-left: 0.5em;
padding-left: 0.85rem;
}
> :not(:nth-last-child(n+4)) {
> :nth-child(5) {
color: $color-purple-dark;
font-weight: normal;
text-transform: none;
}
> :not(:nth-last-child(n+3)) {
color: $color-text-base;
font-size: 16px;
}
[name='entitled'] {
margin-left: auto;
}
> :nth-last-child(-n+2) {
color: $color-text-base;
font-size: 1.6rem;
font-weight: normal;
text-transform: none;
}
}
[name='infos'] {
......@@ -74,13 +76,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 +95,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 +142,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;
}
}
......@@ -181,62 +183,67 @@
[name='block-team'] {
> sib-display > div > sib-display > div {
align-items: center;
display: grid;
grid-template-columns: 5vw 2fr;
grid-template-rows: repeat(2, 5.2vh);
label {
display: none;
}
[name='teammate-profile'],
[name='teammate-img'],
[name='teammate-job'] {
margin: 0;
width: auto;
}
[name='teammate-img'] {
grid-row: 1 / -1;
img {
border: 0;
border-radius: 100%;
display: block;
font-size: 100%;
margin: 0;
padding: 0;
width: 75%;
> sib-multiple {
> team-template[name='members'] {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
> sib-display:first-child {
align-self: center;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
div {
background-color: $color-white;
border-radius: 50%;
height: 7vh;
overflow: hidden;
position: relative;
width: 7vh;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}
}
[name='teammate-profile'] {
align-self: end;
hdapp-userinfo {
display: inline-block;
height: 0;
> ul {
> div:nth-child(2) {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
span {
align-self: center;
font-weight: 600;
padding-inline-start: 0;
}
}
sib-display-lookuplist {
display: inline-block;
> ul {
margin-block-end: 0;
margin-block-start: 0;
span ~ sib-display {
div {
display: flex;
div[name='name'] {
@extend %group;
margin-left: 1rem;
}
}
}
}
}
[name='teammate-job'] {
align-self: start;
> span:nth-child(3) {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
}
}
}
src/styles/right-panel.scss
View file @ 878f6d1d
.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;
......
src/styles/variables.scss
View file @ 878f6d1d
......@@ -15,41 +15,108 @@ $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-222-52-90: hsl(222, 52%, 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%);
%backlink {
color: #3d4057;
@include icon('arrow-left-circle');
}
%button {
display: inline-block;
padding: 0.5em 1.5em;
padding: 0.85rem 2.55rem;
border: none;
border-radius: 100em;
font-weight: normal;
}
%content-padding {
flex: 1;
padding: 4.4rem;
}
%button-form {
background-color: $color-purple-dark;
color: $color-white;
float: right;
font-weight: bold;
text-transform: uppercase;
%frame {
@extend %shadow;
background-color: $color-white;
}
%shadow {
box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
%group {
border: 1px solid $color-mikado-yellow;
border-radius: 3px;
color: $color-rolling-stone;
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.4rem;
padding: calc(1.6rem - 0.8em) 0.7em;
}
%content-padding {
padding: 2.6em;
%member-info {
sib-multiple[name^='user.'],
> sib-display-div > div {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
margin-top: 1.7rem;
&::before {
color: $color-selective-yellow;
padding: 0 0.6em 0 0;
}
}
[name$='city'] * {
@include mdi('atom');
}
sib-multiple[name='user.groups'] {
@include mdi('account-outline');
}
[name$='email'] * {
@include mdi('email-outline');
}
[name$='phone'] * {
@include mdi('cellphone-iphone');
}
[name="foaf:homepage"] * {
@include mdi('link-variant');
}
}
%frame {
@extend %shadow;
background-color: $color-white;
%label {
color: $color-spun-pearl;
font-weight: 600;
margin: 2em 0 0.5em;
}
%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);
}
%status-open {
......@@ -59,7 +126,15 @@ $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 {
background-color: $color-purple-dark;
color: $color-white;
float: right;
font-weight: bold;
text-transform: uppercase;
}
$breakpoints: (
......
src/templates/template-customer.pug 0 → 100644
View file @ 878f6d1d
sib-widget(name='customer-template')
template
div#clientBox
div
h5 Client:
ul
li #[span Business name:]${value.name}
li #[span Company register:]${value.companyRegister}
li
span Address:
br
p ${value.address}
div
h5 Contact:
ul
li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
li(name='email')
a(href='mailto:${value.email}') ${value.email}
li(name='phone') ${value.phone}
src/templates/template-groups.pug 0 → 100644
View file @ 878f6d1d
sib-widget(name='groups-name')
template ${value.name}
src/templates/template-skills.pug 0 → 100644
View file @ 878f6d1d
sib-widget(name='skills-name')
template
li(class='skill') ${value.name}