hubl/src/styles/base/main.scss

750 lines
12 KiB
SCSS
Raw Normal View History

2019-05-14 16:19:30 +00:00
* {
outline: none;
}
2019-05-13 16:50:34 +00:00
:root {
font-size: 10px;
font-family: Open Sans, sans-serif;
2020-05-11 18:20:13 +00:00
--sib-notifications-theme: var(--color-primary);
2019-05-13 16:50:34 +00:00
body {
2020-05-11 18:20:13 +00:00
background-color: var(--color-main-background);
2020-06-11 13:20:20 +00:00
box-sizing: border-box;
2020-05-11 18:20:13 +00:00
color: var(--color-main-text);
2019-05-13 16:50:34 +00:00
font-size: 1.6rem;
/* Fix for viewport height bug in webkit for mobile */
height: -webkit-fill-available;
min-height: -webkit-fill-available;
2019-05-14 15:32:42 +00:00
}
.notLoggedIn {
visibility: hidden;
}
2019-05-13 16:50:34 +00:00
}
2020-06-11 13:20:20 +00:00
/* Fix for sib-dashboard fixture */
sib-dashboard section {
padding: 1rem !important;
@include breakpoint(lg) {
padding: 4.2rem !important;
}
.icon {
display: inline-block;
}
}
.wrapper {
display: grid;
grid-template-areas:
"header"
"content";
@include breakpoint(lg) {
grid-template-columns: 265px auto;
grid-template-areas:
"header header"
"leftmenu content";
}
}
.header {
grid-area: header;
}
.left-menu {
grid-area: leftmenu;
@include breakpoint(lg) {
height: calc(100vh - 83px); /* 83px = nav height */
position: sticky;
top: 0;
overflow-x: hidden;
overflow-y: auto;
}
&.jsLeftMenu {
display: none;
@include breakpoint(lg) {
display: block;
}
}
&.jsLeftMenu[open] {
display: block;
bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
width: 80vw;
position: fixed;
right: 0;
top: 0;
2020-06-11 13:20:20 +00:00
z-index: 1000;
@include breakpoint(lg) {
display: none;
}
}
}
.content {
grid-area: content;
@include breakpoint(lg) {
position: sticky;
top: 0;
overflow-y: auto;
height: calc(100vh - 83px);
overflow-x: hidden;
}
}
/* Add scrollbar to the left and right menu, and to the content */
2020-06-10 10:22:22 +00:00
nav, .views-container, .table-wrapper {
overflow: auto;
height: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
2020-01-18 20:43:41 +00:00
/* Custom scrollbar of the left-menu */
nav {
scrollbar-width: thin;
2020-05-11 18:20:13 +00:00
scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
2020-01-18 20:43:41 +00:00
&::-webkit-scrollbar-track {
2020-05-11 18:20:13 +00:00
background: var(--color-scrollbar-left-background);
2020-01-18 20:43:41 +00:00
}
&::-webkit-scrollbar-thumb {
2020-05-11 18:20:13 +00:00
background-color: var(--color-scrollbar-left-track);
2020-01-18 20:43:41 +00:00
border-radius: 6px;
2020-05-11 18:20:13 +00:00
border: 3px solid var(--color-scrollbar-left-background);
2020-01-18 20:43:41 +00:00
}
&::-webkit-scrollbar {
width: 11px;
}
}
/* Custom scrollbar of the content */
.views-container {
scrollbar-width: thin;
2020-05-11 18:20:13 +00:00
scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
2020-01-18 20:43:41 +00:00
&::-webkit-scrollbar-track {
2020-05-11 18:20:13 +00:00
background: var(--color-scrollbar-right-background);
2020-01-18 20:43:41 +00:00
}
&::-webkit-scrollbar-thumb {
2020-05-11 18:20:13 +00:00
background-color: var(--color-scrollbar-right-track);
2020-01-18 20:43:41 +00:00
border-radius: 6px;
2020-05-11 18:20:13 +00:00
border: 3px solid var(--color-scrollbar-right-background);
2020-01-18 20:43:41 +00:00
}
&::-webkit-scrollbar {
width: 11px;
}
}
2020-06-10 10:22:22 +00:00
/* 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;
}
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-table-track);
border-radius: 10px;
}
}
/* Quick fix. Will be removed later */
#admin-circles,
2020-04-08 10:57:05 +00:00
#admin-projects,
#admin-users {
display: contents;
}
2020-04-02 16:09:23 +00:00
[hidden],
.hidden {
display: none !important;
}
2019-05-13 16:50:34 +00:00
img {
max-height: 100%;
max-width: 100%;
}
h1,
.h1-like,
2019-05-13 16:50:34 +00:00
h2,
.h2-like,
2019-05-13 16:50:34 +00:00
h3,
h4,
h5,
h6 {
font-weight: bold;
2019-05-13 16:50:34 +00:00
/*span {
2019-05-13 16:50:34 +00:00
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}*/
2019-05-13 16:50:34 +00:00
}
h1, .h1-like {
2020-05-11 18:20:13 +00:00
color: var(--color-h1);
2019-05-13 16:50:34 +00:00
font-size: 2rem;
text-transform: uppercase;
&.without-margin {
margin: 0;
}
}
h2, .h2-like {
2020-05-11 18:20:13 +00:00
color: var(--color-h2);
font-size: 1.8rem;
text-transform: uppercase;
2019-05-13 16:50:34 +00:00
}
2020-04-02 16:09:23 +00:00
.h2-like {
display: block;
margin: 14.94px 0;
width: 100%;
}
2019-05-13 16:50:34 +00:00
h3 {
2020-05-11 18:20:13 +00:00
color: var(--color-title);
font-size: 1.7rem;
2020-05-13 13:04:54 +00:00
margin: 0;
2019-05-13 16:50:34 +00:00
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
}
.avatar {
align-items: center;
background-color: var(--color-avatar-background);
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%;
}
object {
height: 45%;
width: 45%;
}
}
.customer-logo {
box-sizing: border-box;
display: flex;
height: 8.5vh;
justify-content: flex-end;
margin-top: 20px;
text-align: end;
width: 15vw;
}
2019-05-14 15:32:42 +00:00
.content-box {
2019-05-13 16:50:34 +00:00
@include window-style-modal();
flex-direction: column;
flex-grow: 1;
margin: 2rem 1rem 5rem 2rem;
2019-05-14 15:32:42 +00:00
&.full-width {
2020-05-11 18:20:13 +00:00
background: var(--color-white);
2019-05-14 15:32:42 +00:00
flex: 1;
font-size: 1.6rem;
2019-05-14 15:32:42 +00:00
margin: 0 auto;
min-height: 100%;
2019-05-14 15:32:42 +00:00
}
}
2019-05-13 16:50:34 +00:00
2020-04-02 16:09:23 +00:00
/* Header inside circle, project view */
.content-box__header {
2020-05-11 18:20:13 +00:00
border-bottom: 1px solid var(--color-content-header);
2020-06-05 13:44:15 +00:00
padding: 1.8rem 0 1.4rem;
margin: 0 1.6rem;
2020-06-05 13:44:15 +00:00
@include breakpoint(lg) {
padding: 3rem;
margin: 0;
2020-01-19 12:19:25 +00:00
}
.mobile-sidebar-button {
float: right;
color: var(--color-secondary);
font-size: 1.8rem;
font-weight: bold!important;
2020-01-19 12:19:25 +00:00
&::before {
font-size: 2.2rem;
font-weight: normal;
margin-right: 1.2rem;
2020-01-19 12:19:25 +00:00
}
@include breakpoint(lg) {
2020-01-19 12:19:25 +00:00
display: none;
}
}
2020-06-05 13:44:15 +00:00
sib-display {
@include breakpoint(sm) {
float: left;
}
}
2020-06-05 13:44:15 +00:00
/* For sib-display on project, circle, or private message view */
sib-display {
width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
div {
overflow: hidden;
text-overflow: ellipsis;
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;
font-weight: bold;
}
}
2020-06-05 13:44:15 +00:00
.description {
color: var(--color-grey-4);
2020-06-05 13:44:15 +00:00
}
2020-06-05 13:44:15 +00:00
.name {
color: var(--color-grey-4);
font-weight: normal;
}
}
}
}
.content-box__height {
2020-06-11 13:20:20 +00:00
min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
@include breakpoint(lg) {
2020-06-11 13:20:20 +00:00
min-height: calc(100vh - 83px - 84px);
}
}
2020-04-02 16:09:23 +00:00
.content-box__info {
flex-direction: column;
padding: 1rem;
@include breakpoint(lg) {
padding: 3.2rem;
}
* {
box-sizing: border-box;
}
2020-04-02 16:09:23 +00:00
}
/*.modal {
2020-05-11 18:20:13 +00:00
color: var(--color-white);
margin: 75px;
padding: 40px;
max-height: 85vh;
text-align: center;
2019-06-05 09:45:41 +00:00
img {
max-width: 75%;
}
2019-10-23 11:55:42 +00:00
sib-link {
font-size: 2.7rem;
position: absolute;
right: 32px;
top: 32px;
button {
2020-05-11 18:20:13 +00:00
color: var(--color-secondary);
}
2019-10-23 11:55:42 +00:00
}
}*/
2019-10-23 11:55:42 +00:00
2020-05-13 13:04:54 +00:00
.admin-header {
2020-06-11 13:20:20 +00:00
/* Quick fix for alignment on mobile before admin content rework */
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
/*end */
@include breakpoint(lg) {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 5rem;
}
h3 {
/* Quick fix for alignment on mobile before admin content rework */
margin-bottom: 20px;
/* end */
@include breakpoint(lg) {
margin-top: 0;
}
}
sib-ac-checker,
sib-link {
width: 100%;
@include breakpoint(lg) {
width: auto;
}
}
2020-05-13 13:04:54 +00:00
}
2019-05-14 15:32:42 +00:00
.backlink {
2019-11-08 10:34:30 +00:00
@include icon('arrow-left-circle');
2020-05-11 18:20:13 +00:00
color: var(--color-backlink);
2019-05-14 15:32:42 +00:00
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
text-decoration: underline;
2019-05-13 16:50:34 +00:00
2019-05-14 15:32:42 +00:00
&::before {
font-size: 2rem;
margin-right: 1rem;
2019-11-08 10:34:30 +00:00
text-decoration: none;
2019-05-13 16:50:34 +00:00
}
2020-04-02 16:09:23 +00:00
&.right {
display: block;
text-align: right;
}
2019-05-13 16:50:34 +00:00
}
2020-05-12 17:14:50 +00:00
.centered {
text-align: center;
}
.flex {
display: flex;
}
.desktop-button__end {
display: block;
@include breakpoint(lg) {
display: flex;
justify-content: flex-end;
}
}
2019-11-06 14:44:53 +00:00
.space-between {
justify-content: space-between;
&.with-padding {
padding-bottom: 1.4rem;
}
2019-11-06 14:44:53 +00:00
}
2020-06-11 13:20:20 +00:00
.mobile-vertical-align {
flex-direction: column;
@include breakpoint(lg) {
flex-direction: row;
}
}
2019-12-19 13:10:09 +00:00
.word-spacing-left {
margin-left: 0.60rem;
}
.word-spacing-right {
margin-right: 0.60rem;
}
2020-06-11 13:20:20 +00:00
.mobile-margin__bottom {
margin-bottom: 1rem;
@include breakpoint(lg) {
margin-bottom: 0;
}
}
2019-05-14 15:32:42 +00:00
// Other base components
@import 'form';
2020-01-08 16:29:23 +00:00
@import 'table';
2019-05-14 15:32:42 +00:00
@import 'header';
@import 'menu-left';
2020-04-02 16:09:23 +00:00
@import 'user-thumb';
2019-11-05 16:52:34 +00:00
// Button global CSS
sib-delete,
sib-route,
sib-link,
button,
input[type='submit'],
a,
.button {
background: none;
border: none;
2019-11-08 10:34:30 +00:00
cursor: pointer;
display: inline-block;
2019-11-05 16:52:34 +00:00
padding: 0;
&.button {
padding: 0.55rem 2.5rem;
border-radius: 100em;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
font-size: 1.4rem;
}
2019-11-05 18:58:40 +00:00
&.mobile-full-width {
margin-bottom: 1rem;
padding-left: 5rem;
width: -webkit-fill-available;
width: -moz-available;
@include breakpoint(lg) {
margin-bottom: 0;
padding-left: 2.5rem;
width: auto;
}
&::before {
margin-left: -2.6rem;
@include breakpoint(lg) {
margin-left: 0;
}
}
}
&.desktop-btn-margin__left {
margin: 0;
@include breakpoint(lg) {
margin-left: 2.2rem;
}
}
2019-11-05 16:52:34 +00:00
&.small {
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
font-size: 1rem;
}
}
&.text-bold {
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
font-weight: bold;
}
}
&.text-uppercase {
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
text-transform: uppercase;
}
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.rounded {
border-radius: 50%;
2020-04-08 10:57:05 +00:00
font-size: 1.8rem;
padding: 1rem;
2019-11-05 18:58:40 +00:00
}
2019-11-05 16:52:34 +00:00
&.button-link {
border-radius: 100em;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
text-decoration: underline;
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
text-decoration: none;
}
}
&.with-icon::before {
font-size: 1.6rem;
margin-right: 1rem;
}
2019-11-05 18:58:40 +00:00
2020-05-11 18:20:13 +00:00
&.button-primary{
background-color: var(--color-white);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-primary);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2020-05-11 18:20:13 +00:00
border: 1px solid var(--color-primary);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2020-05-11 18:20:13 +00:00
background-color: var(--color-primary);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-white);
2019-11-05 16:52:34 +00:00
}
}
}
2019-11-05 18:58:40 +00:00
2020-05-11 18:20:13 +00:00
&.button-secondary {
background-color: var(--color-white);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-secondary);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2020-05-11 18:20:13 +00:00
border: 1px solid var(--color-secondary);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2020-05-11 18:20:13 +00:00
background-color: var(--color-secondary);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-white);
2019-11-05 16:52:34 +00:00
}
}
}
2019-11-05 18:58:40 +00:00
2020-05-11 18:20:13 +00:00
&.button-complementary {
color: var(--color-complementary);
background-color: var(--color-white);
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2020-05-11 18:20:13 +00:00
border: 1px solid var(--color-complementary);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2020-05-11 18:20:13 +00:00
background-color: var(--color-complementary);
color: var(--color-white);
2019-11-05 16:52:34 +00:00
}
}
2019-11-05 18:58:40 +00:00
2020-02-24 14:10:02 +00:00
&.flex {
display: flex;
}
2019-11-05 16:52:34 +00:00
&.reversed {
2020-05-11 18:20:13 +00:00
&.button-primary {
background-color: var(--color-primary);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-white);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2020-05-11 18:20:13 +00:00
background-color: var(--color-white);
color: var(--color-primary);
*,
& {
color: var(--color-primary);
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2020-05-11 18:20:13 +00:00
border: 1px solid var(--color-primary);
2019-11-05 16:52:34 +00:00
}
}
}
2020-05-11 18:20:13 +00:00
&.button-secondary {
background-color: var(--color-secondary);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-white);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2020-05-11 18:20:13 +00:00
background-color: var(--color-white);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-secondary);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2020-05-11 18:20:13 +00:00
border: 1px solid var(--color-secondary);
2019-11-05 16:52:34 +00:00
}
}
}
2019-11-05 18:58:40 +00:00
2020-05-11 18:20:13 +00:00
&.button-complementary {
background-color: var(--color-complementary);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-white);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2020-05-11 18:20:13 +00:00
background-color: var(--color-white);
2019-11-05 18:58:40 +00:00
*,
& {
2020-05-11 18:20:13 +00:00
color: var(--color-complementary);
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2020-05-11 18:20:13 +00:00
border: 1px solid var(--color-complementary);
2019-11-05 16:52:34 +00:00
}
}
}
}
}
}