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

css: refactoring & fixing - day 2

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2019-05-14 17:32:42 +02:00
parent 68a187a06b
commit 2c649c447e
47 changed files with 824 additions and 1115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/styles/components/_index.scss
View File

@ -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
View 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;
}
}

114
src/styles/components/content.scss
View File

@ -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;
}
}

297
src/styles/components/form.scss
View File

@ -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;
}
}
}

206
src/styles/components/header.scss
View File

@ -1,206 +0,0 @@
#header {
align-items: center;
background-color: $color-0-0-100;
color: $color-216-4-22;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
display: flex;
flex-shrink: 0;
padding: 1.6rem 0.64rem;
position: relative;
z-index: 1;
> *:not(sib-widget) {
padding: 0 2.5rem;
}
}
#logo {
flex: 1 1 0;
}
#search-bar {
position: relative;
#search-input {
border-radius: 10em;
padding: 0.64rem 1.28rem;
border: 1px solid $color-215-9-73;
height: 3.8rem;
width: 28rem;
-webkit-appearance: textfield;
& ~ #close-search-icon,
& ~ #search-icon {
color: $color-215-9-73;
display: block;
font-size: 1.7rem;
margin: auto;
position: absolute;
right: 3.7rem;
top: 50%;
transform: translateY(-50%);
-webkit-text-stroke: 1px $color-215-9-73;
}
& ~ #close-search-icon {
opacity: 0;
}
&:focus {
& ~ #close-search-icon {
opacity: 1;
}
& ~ #search-icon {
visibility: hidden;
}
}
}
}
details {
cursor: pointer;
summary {
&::-moz-list-bullet {
list-style-type: none;
}
&::-webkit-details-marker {
display: none;
}
}
}
details {
position: relative;
.sib-notifications__button {
@include icon('bell');
font-size: 3rem;
&::before {
margin-left: 0;
}
img {
display: none;
}
.sib-notifications__counter {
left: 2.1rem;
position: absolute;
top: -3px;
}
}
.sib-notifications__list {
position: absolute;
right: 0;
top: 5.6rem;
}
}
details#user-controls {
summary:focus {
background-color: $color-233-18-29;
color: $color-0-0-100;
outline: none;
}
#user-controls__profile {
div {
display: flex;
flex-direction: row-reverse;
> * {
vertical-align: middle;
}
img {
border-radius: 100%;
height: 4.8rem;
margin-right: 2rem;
object-fit: cover;
object-position: center;
width: 4.8rem;
}
sib-display-value[name='first_name'] {
@include icon('arrow-down');
align-items: center;
display: flex;
flex-direction: row-reverse;
font-size: 1.8rem;
font-weight: 600;
&::before {
margin-left: 1.5rem;
}
}
}
}
#user-controls__panel {
height: 0;
position: absolute;
right: 0;
z-index: 1;
> nav {
background-color: $color-0-0-100;
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
position: absolute;
right: 0;
top: 0;
width: 208px;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
border-bottom: 1px solid $color-213-20-91;
margin-right: 0;
padding: 1.6rem 1.3rem;
a {
color: $color-213-4-50;
text-decoration: none;
}
}
}
button {
color: $color-213-4-50;
padding: 1.6rem 1.3rem;
text-align: left;
width: 100%;
}
}
}
&[open] {
background-color: $color-233-18-29;
color: $color-0-0-100;
#user-controls__profile {
div {
sib-display-value[name='first_name'] {
@include icon('close');
&::before {
margin-left: 1.5rem;
}
}
}
}
}
}

120
src/styles/components/menu-left.scss
View File

@ -1,120 +0,0 @@
#navbar {
background-color: $color-233-18-29;
color: $color-0-0-100;
display: block;
overflow: auto;
flex: 0 0 16em;
transition: flex-basis 0.5s ease-in-out;
&.open {
transform: translateX(0);
}
sib-router {
.menu-wrapper {
&.is-closed {
.sub-menu {
display: none;
}
.menu-chevron {
transform: rotate(180deg);
}
}
}
.menu {
cursor: pointer;
display: flex;
flex-direction: row-reverse;
font-weight: bold;
padding: 1.6rem;
&[active] {
background-color: $color-46-100-67;
color: $color-233-18-29;
.menu-icon:before {
background-color: $color-233-18-29;
color: $color-0-0-100;
}
.menu-notification > sib-display > div:first-child {
background-color: $color-233-18-29;
color: $color-46-100-67;
}
}
.menu-icon {
align-items: center;
display: flex;
justify-content: center;
flex-grow: 0;
flex-shrink: 0;
font-size: 1.7rem;
width: 3.2em;
&:before {
border-radius: 100%;
height: 1.9em;
line-height: 1.9em;
width: 1.9em;
}
}
.menu-label {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
font-weight: 600;
justify-content: center;
letter-spacing: 0.017rem;
text-transform: uppercase;
width: 8em;
}
.menu-chevron {
align-items: center;
color: $color-244-10-70;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
width: 2em;
}
> sib-display {
display: block;
}
}
.sub-menu {
padding-left: 2.88rem;
div {
color: $color-244-10-70;
cursor: pointer;
padding-bottom: 1.12rem;
div[name='project'] {
display: flex;
sib-display-value {
display: block;
}
sib-display-div[name='dash'] {
margin: 0 0.4em;
}
}
}
}
.divider {
height: 1px;
background-color: $color-213-13-86;
}
}
}

113
src/styles/components/menu-right.scss
View File

@ -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
View 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);
}
}
}
}

2
src/styles/components/skills.scss
View File

@ -1,5 +1,3 @@
/* TEMPLATE SKILLS*/
sib-multiple[name*='skills'] {
display: flex;
flex-wrap: wrap;

9
src/styles/components/user-role.scss Normal file
View 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;
}