diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 07b0ab84f9ec4ffbf163d1d7d10a2e7989791d06..8daeb97f25e5986cfd155b3885c499b79bdff9ba 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -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,
}
}
}
-}
\ No newline at end of file
+}