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