css: refactoring & fixing - day 2
This commit is contained in:
Jean-Baptiste Pasquier
@ -1,17 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../node_modules/include-media/dist/include-media';
|
||||
@import '../../node_modules/normalize.css/normalize';
|
||||
|
||||
@import 'abstracts/variables';
|
||||
@import 'abstracts/mixins';
|
||||
@import 'components/icons/index';
|
||||
@import 'base/main';
|
||||
@import 'components/index';
|
||||
|
||||
main#mainContainer {
|
||||
div#viewport {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow-y: auto;
|
||||
@import 'components/index';
|
||||
@import 'layout/members/index';
|
||||
@import 'layout/job-offers/index';
|
||||
@import 'layout/project-profile/index';
|
||||
@import 'layout/circle-profile/index';
|
||||
@import 'layout/member-chat/index';
|
||||
}
|
||||
|
||||
@ -1,24 +1,4 @@
|
||||
@mixin style-template-fieldset($name: 'default') {
|
||||
template-legend-#{$name} {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
color: $color-233-18-29;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
|
||||
box-shadow: 0 0 8px 0 $shadow;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
%user-role {
|
||||
border: 1px solid $color-45-95-54;
|
||||
border-radius: 3px;
|
||||
color: $color-210-4-50;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
margin-right: 0.4rem;
|
||||
padding: calc(1.6rem - 0.8em) 0.7em;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.grid-layer {
|
||||
%grid-layer {
|
||||
display: grid;
|
||||
font-size: 16px;
|
||||
grid-template-columns: [start]auto[middle]25%[end];
|
||||
@ -11,7 +11,7 @@
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grid-layer-main {
|
||||
%grid-layer-main {
|
||||
@extend %flex-grid-layer;
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
@ -19,7 +19,7 @@
|
||||
grid-row-end: end;
|
||||
}
|
||||
|
||||
.grid-layer-links {
|
||||
%grid-layer-links {
|
||||
@extend %flex-grid-layer;
|
||||
grid-column-start: middle;
|
||||
grid-column-end: end;
|
||||
@ -27,47 +27,8 @@
|
||||
grid-row-end: middle;
|
||||
}
|
||||
|
||||
.containerH {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.containerV {
|
||||
%containerV {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.fix {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.containerCenter {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.col {
|
||||
min-width: 0;
|
||||
}
|
||||
294
src/styles/base/form.scss
Normal file
294
src/styles/base/form.scss
Normal file
@ -0,0 +1,294 @@
|
||||
.content-box {
|
||||
|
||||
&.with-form {
|
||||
|
||||
hd-template-project-title {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
color: $color-233-18-29;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
sib-form {
|
||||
border-bottom: 1px solid $color-210-17-91;
|
||||
padding-bottom: 2.55rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $color-233-18-29;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-bottom: 6.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[name$='-text'] {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
div[name^='block-'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-dropdown,
|
||||
sib-form-label-text,
|
||||
sib-form-multiple-dropdown,
|
||||
sib-form-number,
|
||||
sib-form-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>label {
|
||||
color: $color-244-10-70;
|
||||
font-weight: 600;
|
||||
margin: 2em 0 0.5em;
|
||||
text-transform: uppercase;
|
||||
|
||||
>div {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
padding: 1.7rem;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
label {
|
||||
color: $color-216-4-22;
|
||||
font-weight: 600;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
|
||||
button.choices__button {
|
||||
border-left: 1px solid $color-43-100-50;
|
||||
opacity: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'].choices__input {
|
||||
max-width: 27.2rem;
|
||||
min-width: 27.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-checkbox {
|
||||
flex-direction: row;
|
||||
|
||||
[type='checkbox'] {
|
||||
position: relative;
|
||||
margin-top: 2em;
|
||||
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
color: $color-244-73-62;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
@include mdi('check');
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $color-0-0-100;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-dropdown {
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("/images/chevron-down.png");
|
||||
background-position: right 12px top 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 9px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
|
||||
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-textarea {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
sib-multiple-form {
|
||||
|
||||
>label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
margin-top: 6rem;
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
sib-multiple-form[name='members'] {
|
||||
|
||||
>div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
>div:not(:nth-child(-n + 2)) {
|
||||
|
||||
label {
|
||||
|
||||
>div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
|
||||
&::after {
|
||||
content: Add;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
sib-form {
|
||||
|
||||
form > * {
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
|
||||
// button like
|
||||
input[type='color'],
|
||||
input[type='file'],
|
||||
input[type='reset'],
|
||||
input[type='submit'] {
|
||||
display: inline-block;
|
||||
padding: 0.85rem 2.55rem;
|
||||
border: none;
|
||||
border-radius: 100em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input[type='reset'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
|
||||
#header {
|
||||
max-height: 51px;
|
||||
height: 51px;
|
||||
align-items: center;
|
||||
background-color: $color-0-0-100;
|
||||
color: $color-216-4-22;
|
||||
@ -23,6 +23,14 @@ $breakpoints: (phone: 480px,
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@ -76,39 +84,60 @@ button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
sib-route,
|
||||
sib-link,
|
||||
button,
|
||||
input,
|
||||
a {
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:link,
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
%padding-main {
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
.padded-width {
|
||||
flex: 1;
|
||||
@extend %padding-main;
|
||||
}
|
||||
|
||||
.frame {
|
||||
.content-box {
|
||||
@include window-style-modal();
|
||||
@extend %padding-main;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin: 2rem 1rem 5rem 2rem;
|
||||
|
||||
&.full-width {
|
||||
background: $color-0-0-100;
|
||||
flex: 1;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto;
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dividing into columns */
|
||||
@mixin respond-to($breakpoint) {
|
||||
.backlink {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
@include icon('arrow-left-circle');
|
||||
color: #3d4057;
|
||||
text-decoration: underline;
|
||||
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||
@content;
|
||||
}
|
||||
&::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@else {
|
||||
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
|
||||
+"Available breakpoints are: #{map-keys($breakpoints)}.";
|
||||
&::before {
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Compatibility layer for non-updated components
|
||||
@import 'compat';
|
||||
// Other base components
|
||||
@import 'form';
|
||||
@import 'header';
|
||||
@import 'menu-left';
|
||||
@ -1,4 +1,4 @@
|
||||
#navbar {
|
||||
#main__menu {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
display: block;
|
||||
@ -1,8 +1,6 @@
|
||||
@import 'form';
|
||||
@import 'content';
|
||||
@import 'chat';
|
||||
@import 'filters';
|
||||
@import 'howto';
|
||||
@import 'header';
|
||||
@import 'menu-left';
|
||||
@import 'menu-right';
|
||||
@import 'skills';
|
||||
@import 'sidebar';
|
||||
@import 'skills';
|
||||
@import 'user-role';
|
||||
15
src/styles/components/chat.scss
Normal file
15
src/styles/components/chat.scss
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
// chat
|
||||
|
||||
.chat-view {
|
||||
padding: 1.7rem;
|
||||
height: calc(100vh - 84px);
|
||||
|
||||
> sib-chat {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,114 +0,0 @@
|
||||
.backlink {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
@include icon('arrow-left-circle');
|
||||
color: #3d4057;
|
||||
text-decoration: underline;
|
||||
|
||||
&::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
sib-route,
|
||||
sib-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// group
|
||||
|
||||
#group-profile {
|
||||
sib-display-div[name='name'] div {
|
||||
@extend h1;
|
||||
}
|
||||
|
||||
sib-display-div[name='label-description'] div {
|
||||
@extend h2;
|
||||
}
|
||||
}
|
||||
// chat
|
||||
|
||||
.chat-view {
|
||||
padding: 1.7rem;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
@include window-style-modal();
|
||||
height: calc(100vh - 104px);
|
||||
|
||||
> sib-chat {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#member-profile {
|
||||
@include media('width>tablet') {
|
||||
div[name='header'] {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
div[name='name'] {
|
||||
@extend h1;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
sib-link[next='member-chat'] {
|
||||
border-style: solid;
|
||||
display: flex;
|
||||
border-radius: 25px;
|
||||
border-style: solid;
|
||||
border-color: $color-244-73-62;
|
||||
color: $color-244-73-62;
|
||||
padding: 1.7rem;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
div[name='pseudonym'] {
|
||||
margin-top: -1.7rem;
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
|
||||
#member-info {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form {
|
||||
|
||||
form > * {
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
|
||||
// button like
|
||||
input[type='color'],
|
||||
input[type='file'],
|
||||
input[type='reset'],
|
||||
input[type='submit'] {
|
||||
display: inline-block;
|
||||
padding: 0.85rem 2.55rem;
|
||||
border: none;
|
||||
border-radius: 100em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
input[type='reset'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,297 +0,0 @@
|
||||
@include style-template-fieldset('fee');
|
||||
@include style-template-fieldset('customer');
|
||||
@include style-template-fieldset('team');
|
||||
|
||||
.frame-form {
|
||||
&.full-wide {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: 1.5rem;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
padding: 6.8rem 8.5rem 10.2rem;
|
||||
background: $color-0-0-100;
|
||||
}
|
||||
|
||||
.form-view {
|
||||
border-bottom: 1px solid $color-210-17-91;
|
||||
padding-bottom: 2.55rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $color-233-18-29;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.form-goal {
|
||||
margin-bottom: 6.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[name$='-text'] {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
div[name^='block-'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-dropdown,
|
||||
sib-form-label-text,
|
||||
sib-form-multiple-dropdown,
|
||||
sib-form-number,
|
||||
sib-form-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> label {
|
||||
color: $color-244-10-70;
|
||||
font-weight: 600;
|
||||
margin: 2em 0 0.5em;
|
||||
text-transform: uppercase;
|
||||
|
||||
> div {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
padding: 1.7rem;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
label {
|
||||
color: $color-216-4-22;
|
||||
font-weight: 600;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
|
||||
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-43-100-50;
|
||||
opacity: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'].choices__input {
|
||||
max-width: 27.2rem;
|
||||
min-width: 27.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-checkbox {
|
||||
flex-direction: row;
|
||||
|
||||
[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-top: 2em;
|
||||
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
color: $color-244-73-62;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
@include mdi('check');
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $color-0-0-100;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-dropdown {
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("/images/chevron-down.png");
|
||||
background-position: right 12px top 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 9px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
|
||||
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
cursor: pointer;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-textarea {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
sib-multiple-form {
|
||||
|
||||
> label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
margin-top: 6rem;
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#project-create,
|
||||
#project-edit {
|
||||
|
||||
input,
|
||||
textarea {
|
||||
margin-bottom: 3.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-right: 0.75rem;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.is-expanded {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
sib-multiple-form[name='members'] {
|
||||
|
||||
> div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> div:not(:nth-child(-n + 2)) {
|
||||
|
||||
label {
|
||||
|
||||
> div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
cursor: pointer;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
|
||||
&::after {
|
||||
content: Add;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
#mainContainer {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
>div#project,
|
||||
>div#circle {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: stretch;
|
||||
overflow-x: hidden;
|
||||
|
||||
.views-container {
|
||||
flex: 1 0 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
>div {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
>div {
|
||||
|
||||
nav {
|
||||
transition: all 0.5s;
|
||||
|
||||
>sib-router {
|
||||
background-color: $color-222-52-90;
|
||||
color: $color-233-18-29;
|
||||
flex: 0 0 auto;
|
||||
font-weight: 600;
|
||||
|
||||
>ul {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-229-25-79;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 2.55rem 2.55rem;
|
||||
position: relative;
|
||||
width: 12em;
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
font-size: 4rem;
|
||||
margin-left: 0;
|
||||
margin-right: 2.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
>li {
|
||||
@include icon('arrow-right-circle');
|
||||
}
|
||||
|
||||
>sib-route {
|
||||
|
||||
&[active] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&[name^='circle'],
|
||||
&[name^='project'] {
|
||||
|
||||
>li::before {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[name$='chat']>li {
|
||||
@include ci('chat');
|
||||
}
|
||||
|
||||
&[name$='create']>li {
|
||||
@include ci('offer');
|
||||
}
|
||||
|
||||
&[name$='edit']>li {
|
||||
@include ci('list');
|
||||
}
|
||||
|
||||
&[name$='profile']>li {
|
||||
@include ci('information');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.offsite-is-closed {
|
||||
transform: translate(15.5rem);
|
||||
|
||||
& .jsOffsiteToggle::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&~.views-container {
|
||||
margin-left: -15.5rem;
|
||||
transform: translate(15.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
106
src/styles/components/sidebar.scss
Normal file
106
src/styles/components/sidebar.scss
Normal file
@ -0,0 +1,106 @@
|
||||
.no-sidebar {
|
||||
flex: 1;
|
||||
@extend %padding-main;
|
||||
}
|
||||
|
||||
.with-sidebar {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: stretch;
|
||||
overflow-x: hidden;
|
||||
|
||||
.views-container {
|
||||
flex: 1 0 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
>div {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
nav {
|
||||
transition: all 0.5s;
|
||||
|
||||
>sib-router {
|
||||
background-color: $color-222-52-90;
|
||||
color: $color-233-18-29;
|
||||
flex: 0 0 auto;
|
||||
font-weight: 600;
|
||||
|
||||
>ul {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-229-25-79;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 2.55rem 2.55rem;
|
||||
position: relative;
|
||||
width: 12em;
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
font-size: 4rem;
|
||||
margin-left: 0;
|
||||
margin-right: 2.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
>li {
|
||||
@include icon('arrow-right-circle');
|
||||
}
|
||||
|
||||
>sib-route {
|
||||
|
||||
&[active] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&[name^='circle'],
|
||||
&[name^='project'] {
|
||||
|
||||
>li::before {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[name$='chat']>li {
|
||||
@include ci('chat');
|
||||
}
|
||||
|
||||
&[name$='create']>li {
|
||||
@include ci('offer');
|
||||
}
|
||||
|
||||
&[name$='edit']>li {
|
||||
@include ci('list');
|
||||
}
|
||||
|
||||
&[name$='profile']>li {
|
||||
@include ci('information');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.offsite-is-closed {
|
||||
transform: translate(15.5rem);
|
||||
|
||||
& .jsOffsiteToggle::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&~.views-container {
|
||||
margin-left: -15.5rem;
|
||||
transform: translate(15.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
/* TEMPLATE SKILLS*/
|
||||
|
||||
sib-multiple[name*='skills'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
9
src/styles/components/user-role.scss
Normal file
9
src/styles/components/user-role.scss
Normal file
@ -0,0 +1,9 @@
|
||||
%user-role {
|
||||
border: 1px solid $color-45-95-54;
|
||||
border-radius: 3px;
|
||||
color: $color-210-4-50;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
margin-right: 0.4rem;
|
||||
padding: calc(1.6rem - 0.8em) 0.7em;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
#circle-profile {
|
||||
min-height: 100%;
|
||||
|
||||
.block-group > div {
|
||||
display: flex;
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
.job-offers__main {
|
||||
@extend %grid-layer;
|
||||
}
|
||||
|
||||
.job-offers__content {
|
||||
@extend %grid-layer-main;
|
||||
@extend %containerV;
|
||||
}
|
||||
|
||||
.job-offers__newoffer {
|
||||
@extend %grid-layer-links;
|
||||
@extend %containerV;
|
||||
}
|
||||
|
||||
#job-offers {
|
||||
|
||||
.plus-button {
|
||||
@ -21,7 +35,7 @@
|
||||
}
|
||||
|
||||
#offers-list {
|
||||
@extend .grid-layer;
|
||||
@extend %grid-layer;
|
||||
|
||||
>sib-form {
|
||||
grid-column-start: start;
|
||||
@ -46,9 +60,6 @@
|
||||
font-size: 1.5rem;
|
||||
margin: 1.7rem 0;
|
||||
padding: 3.4rem;
|
||||
/*&:nth-child(odd) {
|
||||
background-color: $color-210-25-95;
|
||||
}*/
|
||||
|
||||
[name='user-thumb'] {
|
||||
align-items: center;
|
||||
|
||||
@ -1 +0,0 @@
|
||||
@import 'member-chat.scss';
|
||||
@ -1,3 +0,0 @@
|
||||
#member-chat {
|
||||
width: 100%;
|
||||
}
|
||||
@ -35,26 +35,11 @@ member-info-groups {
|
||||
@extend %user-role;
|
||||
}
|
||||
|
||||
.how-link {
|
||||
@extend .howto;
|
||||
background-color: $color-0-0-100;
|
||||
color: $color-216-4-22;
|
||||
flex-wrap: nowrap;
|
||||
.icon-idea {
|
||||
background-color: $color-46-100-67;
|
||||
border-radius: 100%;
|
||||
justify-content: center;
|
||||
margin-right: 1.2rem;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
#members-list {
|
||||
@extend .grid-layer;
|
||||
@extend %grid-layer;
|
||||
|
||||
#members-list__content {
|
||||
@extend .grid-layer;
|
||||
@extend %grid-layer;
|
||||
|
||||
nav {
|
||||
align-items: center;
|
||||
@ -194,7 +179,6 @@ member-info-groups {
|
||||
|
||||
[name='user.name'] {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
@extend h1;
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
#project-profile {
|
||||
|
||||
|
||||
[name^='block-']:not([name='block-title']) {
|
||||
margin-top: 5.1rem;
|
||||
|
||||
|
||||
[name^='label-'] {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
@ -10,7 +10,7 @@
|
||||
text-transform: uppercase;
|
||||
@extend h2;
|
||||
}
|
||||
|
||||
|
||||
sib-display-value:not(:first-of-type),
|
||||
ul,
|
||||
[name*='job'] {
|
||||
@ -22,23 +22,23 @@
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
display: flex;
|
||||
padding-bottom: 3.4rem;
|
||||
|
||||
> * {
|
||||
|
||||
>* {
|
||||
color: $color-216-4-22;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
padding-right: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> [name^='const-'] {
|
||||
|
||||
>[name^='const-'] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> sib-display-value[name='name'] {
|
||||
>sib-display-value[name='name'] {
|
||||
padding-left: 0.85rem;
|
||||
}
|
||||
|
||||
|
||||
> :nth-child(5) {
|
||||
color: $color-233-18-29;
|
||||
font-weight: normal;
|
||||
@ -66,7 +66,7 @@
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
||||
[name='block-logo'] {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
@ -78,162 +78,163 @@
|
||||
}
|
||||
|
||||
[name='businessProvider'] {
|
||||
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#clientBox {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 1.7rem;
|
||||
max-width: 100%;
|
||||
#clientBox {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 1.7rem;
|
||||
max-width: 100%;
|
||||
|
||||
> * {
|
||||
border: 1px solid $color-221-51-90;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-between;
|
||||
margin: 0 -0.1rem -0.1rem 0;
|
||||
min-width: 25vw;
|
||||
padding: 0;
|
||||
>* {
|
||||
border: 1px solid $color-221-51-90;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-between;
|
||||
margin: 0 -0.1rem -0.1rem 0;
|
||||
min-width: 25vw;
|
||||
padding: 0;
|
||||
|
||||
h5 {
|
||||
margin-left: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 1.5rem;
|
||||
list-style: none;
|
||||
margin: -2.04rem 0 3.74rem -2.04rem;
|
||||
|
||||
li {
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
h5 {
|
||||
margin-left: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
li {
|
||||
|
||||
span {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
ul {
|
||||
font-size: 1.5rem;
|
||||
list-style: none;
|
||||
margin: -2.04rem 0 3.74rem -2.04rem;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
li {
|
||||
|
||||
&:last-child {
|
||||
margin-top: 2.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-left: 5.1rem;
|
||||
|
||||
li {
|
||||
margin-bottom: 1.7rem;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: $color-43-100-50;
|
||||
font-size: 2.2rem;
|
||||
padding: 0 1rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[name='block-team'] {
|
||||
|
||||
> sib-multiple {
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> 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-0-0-100;
|
||||
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%;
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
align-self: end;
|
||||
display: flex;
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
&:first-child {
|
||||
li {
|
||||
|
||||
span {
|
||||
align-self: center;
|
||||
font-weight: 600;
|
||||
span {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-top: 2.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span ~ sib-display {
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
margin-left: 1rem;
|
||||
|
||||
sib-multiple [name='name'] {
|
||||
@extend %user-role;
|
||||
&:not(:first-child) {
|
||||
padding-left: 5.1rem;
|
||||
|
||||
li {
|
||||
margin-bottom: 1.7rem;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: $color-43-100-50;
|
||||
font-size: 2.2rem;
|
||||
padding: 0 1rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[name='block-team'] {
|
||||
|
||||
>sib-multiple {
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
>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-0-0-100;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span:nth-child(3) {
|
||||
align-self: start;
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
>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;
|
||||
}
|
||||
|
||||
span~sib-display {
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
margin-left: 1rem;
|
||||
|
||||
sib-multiple [name='name'] {
|
||||
@extend %user-role;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>span:nth-child(3) {
|
||||
align-self: start;
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user