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

fix previous

This commit is contained in:
Benoit Alessandroni 2020-10-12 19:38:01 +02:00
parent 3861289d21
commit 7ecc311893
1 changed files with 155 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

318
src/styles/base/main.scss
View File

@ -3,18 +3,18 @@
} }
:root { :root {
font-size : 10px; font-size: 10px;
font-family : Open Sans, sans-serif; font-family: Open Sans, sans-serif;
--sib-notifications-theme: var(--color-primary); --sib-notifications-theme: var(--color-primary);
body { body {
background-color: var(--color-main-background); background-color: var(--color-main-background);
box-sizing : border-box; box-sizing: border-box;
color : var(--color-main-text); color: var(--color-main-text);
font-size : 1.6rem; font-size: 1.6rem;
/* Fix for viewport height bug in webkit for mobile */ /* Fix for viewport height bug in webkit for mobile */
height : -webkit-fill-available; height: -webkit-fill-available;
min-height : -webkit-fill-available; min-height: -webkit-fill-available;
} }
.notLoggedIn { .notLoggedIn {
@ -22,9 +22,7 @@
} }
} }
/* Fix for solid-dashboard fixture */ /* Fix for solid-dashboard fixture */
solid-dashboard section { solid-dashboard section {
padding: 1rem !important; padding: 1rem !important;
@ -38,12 +36,16 @@ solid-dashboard section {
} }
.wrapper { .wrapper {
display : grid; display: grid;
grid-template-areas: "header""content"; grid-template-areas:
"header"
"content";
@include breakpoint(lg) { @include breakpoint(lg) {
grid-template-columns: 265px auto; grid-template-columns: 265px auto;
grid-template-areas : "header header""leftmenu content"; grid-template-areas:
"header header"
"leftmenu content";
} }
} }
@ -55,12 +57,11 @@ solid-dashboard section {
grid-area: leftmenu; grid-area: leftmenu;
@include breakpoint(lg) { @include breakpoint(lg) {
height : calc(100vh - 83px); height: calc(100vh - 83px); /* 83px = nav height */
/* 83px = nav height */ position: sticky;
position : sticky; top: 0;
top : 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: scroll;
} }
&.jsLeftMenu { &.jsLeftMenu {
@ -72,14 +73,14 @@ solid-dashboard section {
} }
&.jsLeftMenu[open] { &.jsLeftMenu[open] {
display : block; display: block;
bottom : 0; bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
width : 80vw; width: 80vw;
position : fixed; position: fixed;
right : 0; right: 0;
top : 0; top: 0;
z-index : 1000; z-index: 1000;
@include breakpoint(lg) { @include breakpoint(lg) {
display: none; display: none;
@ -91,29 +92,25 @@ solid-dashboard section {
grid-area: content; grid-area: content;
@include breakpoint(lg) { @include breakpoint(lg) {
position : sticky; position: sticky;
top : 0; top: 0;
overflow-y: auto; overflow-y: auto;
height : calc(100vh - 83px); height: calc(100vh - 83px);
overflow-x: hidden; overflow-x: hidden;
} }
} }
/* Add scrollbar to the left and right menu, and to the content */
nav, /* Add scrollbar to the left and right menu, and to the content */
.views-container, nav, .views-container, .table-wrapper {
.table-wrapper { overflow: auto;
overflow : auto; height: auto;
height : auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
-ms-overflow-style : none; -ms-overflow-style: none;
} }
/* Custom scrollbar of the left-menu */ /* Custom scrollbar of the left-menu */
nav { nav {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background); scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
@ -124,8 +121,8 @@ nav {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-left-track); background-color: var(--color-scrollbar-left-track);
border-radius : 6px; border-radius: 6px;
border : 3px solid var(--color-scrollbar-left-background); border: 3px solid var(--color-scrollbar-left-background);
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -133,9 +130,7 @@ nav {
} }
} }
/* Custom scrollbar of the content */ /* Custom scrollbar of the content */
.views-container { .views-container {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background); scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
@ -146,8 +141,8 @@ nav {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-right-track); background-color: var(--color-scrollbar-right-track);
border-radius : 6px; border-radius: 6px;
border : 3px solid var(--color-scrollbar-right-background); border: 3px solid var(--color-scrollbar-right-background);
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -155,16 +150,14 @@ nav {
} }
} }
/* Custom scrollbar of the table */ /* Custom scrollbar of the table */
.table-wrapper { .table-wrapper {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: var(--color-scrollbar-table-background); background-color: var(--color-scrollbar-table-background);
border-radius : 10px; border-radius: 10px;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -173,13 +166,11 @@ nav {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-table-track); background-color: var(--color-scrollbar-table-track);
border-radius : 10px; border-radius: 10px;
} }
} }
/* Quick fix. Will be removed later */ /* Quick fix. Will be removed later */
#admin-circles, #admin-circles,
#admin-projects, #admin-projects,
#admin-users { #admin-users {
@ -193,7 +184,7 @@ nav {
img { img {
max-height: 100%; max-height: 100%;
max-width : 100%; max-width: 100%;
} }
h1, h1,
@ -204,21 +195,21 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight : bold; font-weight: bold;
/*span { /*span {
font-weight : 400; font-weight: 400;
padding-left: 0.85rem; padding-left: 0.85rem;
& :before { &:before {
content : '// '; content: '// ';
} }
}*/ }*/
} }
h1, h1, .h1-like {
.h1-like { color: var(--color-h1);
color : var(--color-h1); font-size: 2rem;
font-size : 2rem;
text-transform: uppercase; text-transform: uppercase;
&.without-margin { &.without-margin {
@ -226,23 +217,22 @@ h1,
} }
} }
h2, h2, .h2-like {
.h2-like { color: var(--color-h2);
color : var(--color-h2); font-size: 1.8rem;
font-size : 1.8rem;
text-transform: uppercase; text-transform: uppercase;
} }
.h2-like { .h2-like {
display: block; display: block;
margin : 14.94px 0; margin: 14.94px 0;
width : 100%; width: 100%;
} }
h3 { h3 {
color : var(--color-title); color: var(--color-title);
font-size: 1.7rem; font-size: 1.7rem;
margin : 0; margin: 0;
} }
h4 { h4 {
@ -254,45 +244,45 @@ h5 {
} }
.avatar { .avatar {
align-items : center; align-items: center;
background-color: var(--color-avatar-background); background-color: var(--color-avatar-background);
border-radius : 50%; border-radius: 50%;
display : flex; display: flex;
justify-content : center; justify-content: center;
overflow : hidden; overflow: hidden;
position : relative; position: relative;
img { img {
background-color: white; background-color: white;
height : 100%; height: 100%;
left : 0; left: 0;
object-fit : cover; object-fit: cover;
object-position : center; object-position: center;
position : absolute; position: absolute;
top : 0; top: 0;
width : 100%; width: 100%;
} }
object { object {
height: 45%; height: 45%;
width : 45%; width: 45%;
} }
} }
.customer-logo { .customer-logo {
box-sizing : border-box; box-sizing: border-box;
display : flex; display: flex;
height : 8.5vh; height: 8.5vh;
justify-content: flex-end; justify-content: flex-end;
margin-top : 20px; margin-top: 20px;
text-align : end; text-align: end;
width : 15vw; width: 15vw;
} }
.project-edit-logo { .project-edit-logo {
display : flex; display: flex;
height : 8.5vh; height: 8.5vh;
margin-top : 20px; margin-top: 20px;
margin-bottom: 30px; margin-bottom: 30px;
form { form {
@ -316,31 +306,31 @@ h5 {
.form-picture { .form-picture {
form { form {
display : block; display: block;
text-align : center; text-align: center;
margin-bottom: 2.6rem; margin-bottom: 2.6rem;
padding-top : 1.8rem; padding-top: 1.8rem;
@include breakpoint(lg) { @include breakpoint(lg) {
display: flex; display: flex;
width : 100%; width: 100%;
} }
hubl-user-avatar { hubl-user-avatar {
display : inline-block; display: inline-block;
max-width : 100%; max-width: 100%;
max-height: 16.5vh; max-height: 16.5vh;
@include breakpoint(lg) { @include breakpoint(lg) {
margin-left: 20px; margin-left: 20px;
max-height : 8.5vh; max-height: 8.5vh;
max-width : none; max-width: none;
width : calc(35vw - 20px); width: calc(35vw - 20px);
} }
>object, >object,
>img { >img {
display : block; display: block;
max-height: 16.5vh !important; max-height: 16.5vh !important;
@include breakpoint(lg) { @include breakpoint(lg) {
@ -356,11 +346,11 @@ h5 {
.button-primary, .button-primary,
.bordered; .bordered;
margin: 10px 0; margin: 10px 0;
width : 100%; width: 100%;
@include breakpoint(lg) { @include breakpoint(lg) {
margin: auto 0 auto 2.2rem; margin: auto 0 auto 2.2rem;
width : auto; width: auto;
} }
} }
} }
@ -397,40 +387,38 @@ h5 {
.content-box { .content-box {
@include window-style-modal(); @include window-style-modal();
flex-direction: column; flex-direction: column;
flex-grow : 1; flex-grow: 1;
margin : 2rem 1rem 5rem 2rem; margin: 2rem 1rem 5rem 2rem;
&.full-width { &.full-width {
background: var(--color-white); background: var(--color-white);
flex : 1; flex: 1;
font-size : 1.6rem; font-size: 1.6rem;
margin : 0 auto; margin: 0 auto;
min-height: 100%; min-height: 100%;
} }
} }
/* Header inside circle, project view */ /* Header inside circle, project view */
.content-box__header { .content-box__header {
border-bottom: 1px solid var(--color-content-header); border-bottom: 1px solid var(--color-content-header);
padding : 1.8rem 0 1.4rem; padding: 1.8rem 0 1.4rem;
margin : 0 1.6rem; margin: 0 1.6rem;
@include breakpoint(lg) { @include breakpoint(lg) {
padding: 3rem; padding: 3rem;
margin : 0; margin: 0;
} }
.mobile-sidebar-button { .mobile-sidebar-button {
float : right; float: right;
color : var(--color-secondary); color: var(--color-secondary);
font-size : 1.8rem; font-size: 1.8rem;
font-weight: bold !important; font-weight: bold!important;
&::before { &::before {
font-size : 2.2rem; font-size: 2.2rem;
font-weight : normal; font-weight: normal;
margin-right: 1.2rem; margin-right: 1.2rem;
} }
@ -447,32 +435,32 @@ h5 {
/* For solid-display on project, circle, or private message view */ /* For solid-display on project, circle, or private message view */
solid-display { solid-display {
width: calc(100% - 94px); width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
/* 94px = width of .mobile-sidebar-button */
div { div {
overflow : hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space : nowrap; white-space: nowrap;
width : calc(100% - 20px); width: calc(100% - 20px);
.h1-aside { .h1-aside {
font-size: 1.8rem; font-size: 1.8rem;
&:not(:empty)::before { &:not(:empty)::before {
color : var(--color-grey-4); color: var(--color-grey-4);
content : ' - '; content: ' - ';
font-size : 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
} }
} }
.description { .description {
color: var(--color-grey-4); color: var(--color-grey-4);
} }
.name { .name {
color : var(--color-grey-4); color: var(--color-grey-4);
font-weight: normal; font-weight: normal;
} }
} }
@ -480,9 +468,8 @@ h5 {
} }
.content-box__height { .content-box__height {
min-height: calc(100vh - 50px - 56px); min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
/* Heights of main header and sub-header */
@include breakpoint(lg) { @include breakpoint(lg) {
min-height: calc(100vh - 83px - 84px); min-height: calc(100vh - 83px - 84px);
} }
@ -490,7 +477,7 @@ h5 {
.content-box__info { .content-box__info {
flex-direction: column; flex-direction: column;
padding : 1rem; padding: 1rem;
@include breakpoint(lg) { @include breakpoint(lg) {
padding: 3.2rem; padding: 3.2rem;
@ -501,7 +488,6 @@ h5 {
} }
} }
/*.modal { /*.modal {
color: var(--color-white); color: var(--color-white);
margin: 75px; margin: 75px;
@ -528,22 +514,22 @@ h5 {
.admin-header { .admin-header {
/* Quick fix for alignment on mobile before admin content rework */ /* Quick fix for alignment on mobile before admin content rework */
flex-direction: column; flex-direction: column;
align-items : flex-start; align-items: flex-start;
margin-bottom : 20px; margin-bottom: 20px;
/*end */ /*end */
@include breakpoint(lg) { @include breakpoint(lg) {
flex-direction : row; flex-direction: row;
align-items : center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom : 5rem; margin-bottom: 5rem;
} }
h3 { h3 {
/* Quick fix for alignment on mobile before admin content rework */ /* Quick fix for alignment on mobile before admin content rework */
margin-bottom: 20px; margin-bottom: 20px;
/* end */ /* end */
@include breakpoint(lg) { @include breakpoint(lg) {
margin-top: 0; margin-top: 0;
} }
@ -561,19 +547,19 @@ h5 {
.backlink { .backlink {
@include icon('arrow-left-circle'); @include icon('arrow-left-circle');
color : var(--color-backlink); color: var(--color-backlink);
font-size : 1.5rem; font-size: 1.5rem;
margin : 2rem 0 0 2rem; margin: 2rem 0 0 2rem;
text-decoration: underline; text-decoration: underline;
&::before { &::before {
font-size : 2rem; font-size: 2rem;
margin-right : 1rem; margin-right: 1rem;
text-decoration: none; text-decoration: none;
} }
&.right { &.right {
display : block; display: block;
text-align: right; text-align: right;
} }
} }
@ -594,7 +580,7 @@ h5 {
display: block; display: block;
@include breakpoint(lg) { @include breakpoint(lg) {
display : flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
} }
@ -647,13 +633,13 @@ input[type='submit'],
a, a,
.button { .button {
background: none; background: none;
border : none; border: none;
cursor : pointer; cursor: pointer;
display : inline-block; display: inline-block;
padding : 0; padding: 0;
&.button { &.button {
padding : 0.55rem 2.5rem; padding: 0.55rem 2.5rem;
border-radius: 100em; border-radius: 100em;
*, *,
@ -663,14 +649,14 @@ a,
&.mobile-full-width { &.mobile-full-width {
margin-bottom: 1rem; margin-bottom: 1rem;
padding-left : 5rem; padding-left: 5rem;
width : -webkit-fill-available; width: -webkit-fill-available;
width : -moz-available; width: -moz-available;
@include breakpoint(lg) { @include breakpoint(lg) {
margin-bottom: 0; margin-bottom: 0;
padding-left : 2.5rem; padding-left: 2.5rem;
width : auto; width: auto;
} }
&::before { &::before {
@ -716,8 +702,14 @@ a,
&.rounded { &.rounded {
border-radius: 50%; border-radius: 50%;
font-size : 1.8rem; font-size: 1.8rem;
padding : 1rem; padding: 1rem;
height: 42px;
width: 42px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
} }
&.button-link { &.button-link {
@ -734,11 +726,11 @@ a,
} }
&.with-icon::before { &.with-icon::before {
font-size : 1.6rem; font-size: 1.6rem;
margin-right: 1rem; margin-right: 1rem;
} }
&.button-primary { &.button-primary{
background-color: var(--color-white); background-color: var(--color-white);
*, *,
@ -783,7 +775,7 @@ a,
} }
&.button-complementary { &.button-complementary {
color : var(--color-complementary); color: var(--color-complementary);
background-color: var(--color-white); background-color: var(--color-white);
&.bordered { &.bordered {
@ -792,7 +784,7 @@ a,
&:hover { &:hover {
background-color: var(--color-complementary); background-color: var(--color-complementary);
color : var(--color-white); color: var(--color-white);
} }
} }
@ -811,7 +803,7 @@ a,
&:hover { &:hover {
background-color: var(--color-white); background-color: var(--color-white);
color : var(--color-primary); color: var(--color-primary);
*, *,
& { & {
@ -869,4 +861,4 @@ a,
} }
} }
} }
} }