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

bugfix: revert styles

Browse Source
This commit is contained in:
Benoit Alessandroni 2020-10-12 19:24:26 +02:00
parent 1df8e34ddb
commit 3861289d21
2 changed files with 570 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.pug
View File

@ -90,7 +90,7 @@ html(lang="en")
#admin(hidden).with-sidebar #admin(hidden).with-sidebar
include page-admin.pug include page-admin.pug
#about(hidden).no-sidebar.with-padding #about.no-sidebar.with-padding
include page-about.pug include page-about.pug
if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))

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

@ -3,18 +3,20 @@
} }
: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 {
visibility: hidden; visibility: hidden;
} }
@ -25,20 +27,23 @@
solid-dashboard section { solid-dashboard section {
padding: 1rem !important; padding: 1rem !important;
@include breakpoint(lg) { @include breakpoint(lg) {
padding: 4.2rem !important; padding: 4.2rem !important;
} }
.icon { .icon {
display: inline-block; display: inline-block;
} }
} }
.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";
} }
} }
@ -48,29 +53,34 @@ solid-dashboard section {
.left-menu { .left-menu {
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: auto;
} }
&.jsLeftMenu { &.jsLeftMenu {
display: none; display: none;
@include breakpoint(lg) { @include breakpoint(lg) {
display: block; display: block;
} }
} }
&.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;
} }
@ -79,11 +89,12 @@ solid-dashboard section {
.content { .content {
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;
} }
} }
@ -94,10 +105,10 @@ solid-dashboard section {
nav, nav,
.views-container, .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;
} }
@ -106,14 +117,17 @@ nav,
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);
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: var(--color-scrollbar-left-background); background: var(--color-scrollbar-left-background);
} }
&::-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 {
width: 11px; width: 11px;
} }
@ -125,14 +139,17 @@ nav {
.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);
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: var(--color-scrollbar-right-background); background: var(--color-scrollbar-right-background);
} }
&::-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 {
width: 11px; width: 11px;
} }
@ -144,16 +161,19 @@ nav {
.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 {
height: 5px; height: 5px;
} }
&::-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;
} }
} }
@ -173,7 +193,7 @@ nav {
img { img {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width : 100%;
} }
h1, h1,
@ -184,22 +204,23 @@ 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 {
margin: 0; margin: 0;
} }
@ -207,21 +228,21 @@ 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 {
@ -233,43 +254,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 {
@ -293,31 +316,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) {
@ -333,11 +356,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;
} }
} }
} }
@ -374,13 +397,14 @@ 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%;
} }
} }
@ -390,54 +414,65 @@ h5 {
.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;
} }
@include breakpoint(lg) { @include breakpoint(lg) {
display: none; display: none;
} }
} }
solid-display { solid-display {
@include breakpoint(sm) { @include breakpoint(sm) {
float: left; float: left;
} }
} }
/* 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;
} }
} }
@ -446,6 +481,7 @@ 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);
@ -454,10 +490,12 @@ 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;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -490,26 +528,31 @@ 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;
} }
} }
solid-ac-checker, solid-ac-checker,
solid-link { solid-link {
width: 100%; width: 100%;
@include breakpoint(lg) { @include breakpoint(lg) {
width: auto; width: auto;
} }
@ -518,17 +561,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;
} }
} }
@ -547,14 +592,16 @@ h5 {
.desktop-button__end { .desktop-button__end {
display: block; display: block;
@include breakpoint(lg) { @include breakpoint(lg) {
display: flex; display : flex;
justify-content: flex-end; justify-content: flex-end;
} }
} }
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
&.with-padding { &.with-padding {
padding-bottom: 1.4rem; padding-bottom: 1.4rem;
} }
@ -562,6 +609,7 @@ h5 {
.mobile-vertical-align { .mobile-vertical-align {
flex-direction: column; flex-direction: column;
@include breakpoint(lg) { @include breakpoint(lg) {
flex-direction: row; flex-direction: row;
} }
@ -577,6 +625,7 @@ h5 {
.mobile-margin__bottom { .mobile-margin__bottom {
margin-bottom: 1rem; margin-bottom: 1rem;
@include breakpoint(lg) { @include breakpoint(lg) {
margin-bottom: 0; margin-bottom: 0;
} }
@ -588,6 +637,7 @@ h5 {
@import 'header'; @import 'header';
@import 'menu-left'; @import 'menu-left';
@import 'user-thumb'; @import 'user-thumb';
// Button global CSS // Button global CSS
solid-delete, solid-delete,
solid-route, solid-route,
@ -597,173 +647,221 @@ 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;
*, *,
& { & {
font-size: 1.4rem; font-size: 1.4rem;
} }
&.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 {
margin-left: -2.6rem; margin-left: -2.6rem;
@include breakpoint(lg) { @include breakpoint(lg) {
margin-left: 0; margin-left: 0;
} }
} }
} }
&.desktop-btn-margin__left { &.desktop-btn-margin__left {
margin: 0; margin: 0;
@include breakpoint(lg) { @include breakpoint(lg) {
margin-left: 2.2rem; margin-left: 2.2rem;
} }
} }
&.small { &.small {
*, *,
& { & {
font-size: 1rem; font-size: 1rem;
} }
} }
&.text-bold { &.text-bold {
*, *,
& { & {
font-weight: bold; font-weight: bold;
} }
} }
&.text-uppercase { &.text-uppercase {
*, *,
& { & {
text-transform: uppercase; text-transform: uppercase;
} }
} }
&.rounded { &.rounded {
border-radius: 50%; border-radius: 50%;
font-size: 1.8rem; font-size : 1.8rem;
padding: 1rem; padding : 1rem;
} }
&.button-link { &.button-link {
border-radius: 100em; border-radius: 100em;
*, *,
& { & {
text-decoration: underline; text-decoration: underline;
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
&.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);
*, *,
& { & {
color: var(--color-primary); color: var(--color-primary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
} }
&:hover { &:hover {
background-color: var(--color-primary); background-color: var(--color-primary);
*, *,
& { & {
color: var(--color-white); color: var(--color-white);
} }
} }
} }
&.button-secondary { &.button-secondary {
background-color: var(--color-white); background-color: var(--color-white);
*, *,
& { & {
color: var(--color-secondary); color: var(--color-secondary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
} }
&:hover { &:hover {
background-color: var(--color-secondary); background-color: var(--color-secondary);
*, *,
& { & {
color: var(--color-white); color: var(--color-white);
} }
} }
} }
&.button-complementary { &.button-complementary {
color: var(--color-complementary); color : var(--color-complementary);
background-color: var(--color-white); background-color: var(--color-white);
&.bordered { &.bordered {
border: 1px solid var(--color-complementary); border: 1px solid var(--color-complementary);
} }
&:hover { &:hover {
background-color: var(--color-complementary); background-color: var(--color-complementary);
color: var(--color-white); color : var(--color-white);
} }
} }
&.flex { &.flex {
display: flex; display: flex;
} }
&.reversed { &.reversed {
&.button-primary { &.button-primary {
background-color: var(--color-primary); background-color: var(--color-primary);
*, *,
& { & {
color: var(--color-white); color: var(--color-white);
} }
&:hover { &:hover {
background-color: var(--color-white); background-color: var(--color-white);
color: var(--color-primary); color : var(--color-primary);
*, *,
& { & {
color: var(--color-primary); color: var(--color-primary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
} }
} }
} }
&.button-secondary { &.button-secondary {
background-color: var(--color-secondary); background-color: var(--color-secondary);
*, *,
& { & {
color: var(--color-white); color: var(--color-white);
} }
&:hover { &:hover {
background-color: var(--color-white); background-color: var(--color-white);
*, *,
& { & {
color: var(--color-secondary); color: var(--color-secondary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
} }
} }
} }
&.button-complementary { &.button-complementary {
background-color: var(--color-complementary); background-color: var(--color-complementary);
*, *,
& { & {
color: var(--color-white); color: var(--color-white);
} }
&:hover { &:hover {
background-color: var(--color-white); background-color: var(--color-white);
*, *,
& { & {
color: var(--color-complementary); color: var(--color-complementary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-complementary); border: 1px solid var(--color-complementary);
} }