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

update: uniformisation events/resources

Browse Source
This commit is contained in:
Marjolaine Le Bon 2020-08-19 18:23:18 +02:00
parent 55b23ee8b2
commit eb07bebdd1
5 changed files with 847 additions and 912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,6 @@
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;
@ -16,20 +15,19 @@
height: -webkit-fill-available; height: -webkit-fill-available;
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
} }
.notLoggedIn { .notLoggedIn {
visibility: hidden; visibility: hidden;
} }
} }
/* Fix for solid-dashboard fixture */ /* Fix for solid-dashboard fixture */
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;
} }
@ -37,15 +35,10 @@ solid-dashboard section {
.wrapper { .wrapper {
display: grid; display: grid;
grid-template-areas: grid-template-areas: "header" "content";
"header"
"content";
@include breakpoint(lg) { @include breakpoint(lg) {
grid-template-columns: 265px auto; grid-template-columns: 265px auto;
grid-template-areas: grid-template-areas: "header header" "leftmenu content";
"header header"
"leftmenu content";
} }
} }
@ -55,23 +48,20 @@ solid-dashboard section {
.left-menu { .left-menu {
grid-area: leftmenu; grid-area: leftmenu;
@include breakpoint(lg) { @include breakpoint(lg) {
height: calc(100vh - 83px); /* 83px = nav height */ height: calc(100vh - 83px);
/* 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;
@ -81,7 +71,6 @@ solid-dashboard section {
right: 0; right: 0;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
@include breakpoint(lg) { @include breakpoint(lg) {
display: none; display: none;
} }
@ -90,7 +79,6 @@ 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;
@ -101,76 +89,77 @@ solid-dashboard section {
} }
/* Add scrollbar to the left and right menu, and to the content */ /* Add scrollbar to the left and right menu, and to the content */
nav, .views-container, .table-wrapper {
nav,
.views-container,
.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);
&::-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;
} }
} }
/* 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);
&::-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;
} }
} }
/* 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 {
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;
} }
} }
/* Quick fix. Will be removed later */ /* Quick fix. Will be removed later */
#admin-circles, #admin-circles,
#admin-projects, #admin-projects,
#admin-users { #admin-users {
@ -196,7 +185,6 @@ 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;
@ -207,17 +195,18 @@ h6 {
}*/ }*/
} }
h1, .h1-like { h1,
.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;
} }
} }
h2, .h2-like { h2,
.h2-like {
color: var(--color-h2); color: var(--color-h2);
font-size: 1.8rem; font-size: 1.8rem;
text-transform: uppercase; text-transform: uppercase;
@ -251,7 +240,6 @@ h5 {
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%;
@ -262,7 +250,6 @@ h5 {
top: 0; top: 0;
width: 100%; width: 100%;
} }
object { object {
height: 45%; height: 45%;
width: 45%; width: 45%;
@ -284,7 +271,6 @@ h5 {
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;
@ -294,53 +280,47 @@ h5 {
} }
} }
/* 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;
} }
@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); /* 94px = width of .mobile-sidebar-button */ width: calc(100% - 94px);
/* 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: ' - ';
@ -348,12 +328,9 @@ h5 {
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;
@ -363,8 +340,8 @@ h5 {
} }
.content-box__height { .content-box__height {
min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */ min-height: calc(100vh - 50px - 56px);
/* 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);
} }
@ -373,16 +350,15 @@ 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;
} }
} }
/*.modal { /*.modal {
color: var(--color-white); color: var(--color-white);
margin: 75px; margin: 75px;
@ -412,28 +388,23 @@ h5 {
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;
} }
@ -446,13 +417,11 @@ h5 {
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;
@ -469,7 +438,6 @@ 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;
@ -478,7 +446,6 @@ h5 {
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
&.with-padding { &.with-padding {
padding-bottom: 1.4rem; padding-bottom: 1.4rem;
} }
@ -486,7 +453,6 @@ 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;
} }
@ -502,7 +468,6 @@ 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;
} }
@ -514,7 +479,6 @@ 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,
@ -528,217 +492,169 @@ a,
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);
} }

66
src/styles/base/menu-left.scss
View File

@ -2,46 +2,37 @@
background-color: var(--color-menu-background); background-color: var(--color-menu-background);
color: var(--color-menu-text); color: var(--color-menu-text);
/*transition: flex-basis 0.5s ease-in-out;*/ /*transition: flex-basis 0.5s ease-in-out;*/
&.open { &.open {
transform: translateX(0); transform: translateX(0);
} }
.unread { .unread {
font-weight: bolder; font-weight: bolder;
} }
solid-router { solid-router {
.menu-wrapper { .menu-wrapper {
&.is-closed { &.is-closed {
.sub-menu { .sub-menu {
display: none; display: none;
} }
.menu-chevron { .menu-chevron {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
solid-link { solid-link {
width: 100%; width: 100%;
} }
.menu { .menu {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
font-weight: bold; font-weight: bold;
padding: 1.2rem; padding: 1.2rem;
&[active] { &[active] {
background-color: var(--color-menu-highlight-primary); background-color: var(--color-menu-highlight-primary);
.menu-icon:before { .menu-icon:before {
background-color: var(--color-menu-icon-background-active); background-color: var(--color-menu-icon-background-active);
} }
.menu-notification>solid-display>div:first-child { .menu-notification>solid-display>div:first-child {
background-color: var(--color-menu-badge-background); background-color: var(--color-menu-badge-background);
} }
@ -51,7 +42,6 @@
&[name="events"][active] .menu-icon:before { &[name="events"][active] .menu-icon:before {
background-color: transparent; background-color: transparent;
} }
.menu-icon { .menu-icon {
align-items: center; align-items: center;
display: flex; display: flex;
@ -60,7 +50,6 @@
flex-shrink: 0; flex-shrink: 0;
font-size: 1.7rem; font-size: 1.7rem;
width: 3.2em; width: 3.2em;
&:before { &:before {
border-radius: 100%; border-radius: 100%;
height: 1.9em; height: 1.9em;
@ -68,7 +57,6 @@
width: 1.9em; width: 1.9em;
} }
} }
.menu-label { .menu-label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -80,7 +68,6 @@
text-transform: uppercase; text-transform: uppercase;
width: 8em; width: 8em;
} }
.menu-chevron { .menu-chevron {
align-items: center; align-items: center;
display: flex; display: flex;
@ -89,40 +76,34 @@
justify-content: center; justify-content: center;
width: 2em; width: 2em;
} }
>solid-display { >solid-display {
display: block; display: block;
} }
&[name="events"], &[name="resources"] { &[name="events"],
&[name="resources"],
&[name="polls"] {
.menu-label { .menu-label {
width: 9.9em; width: 9.9em;
} }
} }
} }
.sub-menu { .sub-menu {
/* Ellipsis for project tab */ /* Ellipsis for project tab */
.project-tab>div>solid-display>div:nth-child(1) { .project-tab>div>solid-display>div:nth-child(1) {
solid-set-default[name='project'] { solid-set-default[name='project'] {
flex: 3; flex: 3;
.project-customer, .project-customer,
.project-name { .project-name {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ width: calc(80vw - 96px);
/*96px = padding of the element + width and margin of counter */
@include breakpoint(lg) { @include breakpoint(lg) {
width: 150px; width: 150px;
} }
} }
.project-customer, .project-customer,
.project-name>div { .project-name>div {
@include breakpoint(lg) { @include breakpoint(lg) {
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -132,19 +113,15 @@
} }
} }
} }
/* Ellipsis for circle tab */ /* Ellipsis for circle tab */
.circle-tab>div>solid-display>div { .circle-tab>div>solid-display>div {
solid-display-div[name='name'] { solid-display-div[name='name'] {
flex: 3; flex: 3;
>div[name='name'] { >div[name='name'] {
box-sizing: border-box; box-sizing: border-box;
padding-left: 0.2em; padding-left: 0.2em;
width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ width: calc(80vw - 96px);
/*96px = padding of the element + width and margin of counter */
@include breakpoint(lg) { @include breakpoint(lg) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -154,18 +131,15 @@
} }
} }
} }
/* Ellipsis for message tab */ /* Ellipsis for message tab */
.message-tab>div>solid-display>div>solid-display-div>div { .message-tab>div>solid-display>div>solid-display-div>div {
box-sizing: border-box; box-sizing: border-box;
width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ width: calc(80vw - 96px);
/*96px = padding of the element + width and margin of counter */
@include breakpoint(lg) { @include breakpoint(lg) {
width: 150px; width: 150px;
} }
} }
solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
margin-left: 30px; margin-left: 30px;
margin-bottom: 10px; margin-bottom: 10px;
@ -176,42 +150,34 @@
border: 1px solid var(--color-grey-4); border: 1px solid var(--color-grey-4);
border-radius: 3px; border-radius: 3px;
padding: 4px; padding: 4px;
@include breakpoint(lg) { @include breakpoint(lg) {
margin: auto; margin: auto;
margin-bottom: 10px; margin-bottom: 10px;
width: auto; width: auto;
} }
} }
solid-display.nosub>nav { solid-display.nosub>nav {
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: auto 50% auto; grid-template-columns: auto 50% auto;
grid-template-areas: "left middle right"; grid-template-areas: "left middle right";
>* { >* {
color: var(--color-grey-6); color: var(--color-grey-6);
} }
>[data-id="prev"] { >[data-id="prev"] {
grid-area: left; grid-area: left;
} }
>[data-id="next"] { >[data-id="next"] {
grid-area: right; grid-area: right;
} }
>span { >span {
grid-area: middle; grid-area: middle;
} }
} }
hubl-menu-publicprivate { hubl-menu-publicprivate {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
div { div {
font-family: simple-line-icons; font-family: simple-line-icons;
width: 20px; width: 20px;
@ -219,38 +185,30 @@
padding-top: 0.1em; padding-top: 0.1em;
} }
} }
>solid-display.nosub>div>solid-display>div { >solid-display.nosub>div>solid-display>div {
padding: 1rem 1rem 1rem 3rem; padding: 1rem 1rem 1rem 3rem;
} }
solid-display>div { solid-display>div {
.create { .create {
color: var(--color-white); color: var(--color-white);
margin: 1rem 1rem 2.2rem 3.2rem; margin: 1rem 1rem 2.2rem 3.2rem;
} }
&>solid-display { &>solid-display {
&:last-child>div { &:last-child>div {
margin-bottom: 2.2rem; margin-bottom: 2.2rem;
} }
>div { >div {
color: var(--color-grey-6); color: var(--color-grey-6);
cursor: pointer; cursor: pointer;
>hubl-menu-fix-url-circle>solid-display>div, >hubl-menu-fix-url-circle>solid-display>div,
>hubl-menu-fix-url-project>solid-display>div { >hubl-menu-fix-url-project>solid-display>div {
padding: 1rem 1rem 1rem 3rem; padding: 1rem 1rem 1rem 3rem;
} }
} }
&[fields="project(customer.name, name), badge"]>div { &[fields="project(customer.name, name), badge"]>div {
padding: 0; padding: 0;
} }
} }
&>solid-display[active]>div, &>solid-display[active]>div,
&>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div,
&>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div {
@ -259,26 +217,21 @@
font-weight: bold; font-weight: bold;
} }
} }
&.menu-notification { &.menu-notification {
>solid-display>div>solid-display>div>hubl-menu-fix-url-circle, >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
>solid-display>div>solid-display>div>hubl-menu-fix-url-project { >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
flex: 1; flex: 1;
} }
>solid-display>div>solid-display>div, >solid-display>div>solid-display>div,
>solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div,
>solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
hubl-counter { hubl-counter {
height: 20px; height: 20px;
width: 20px; width: 20px;
margin-right: 1em; margin-right: 1em;
div.counter:not([data-nb-unread="0"]) { div.counter:not([data-nb-unread="0"]) {
text-align: center; text-align: center;
display: block; display: block;
@ -294,7 +247,6 @@
} }
} }
} }
.divider { .divider {
height: 1px; height: 1px;
background-color: var(--color-grey-11); background-color: var(--color-grey-11);

26
src/styles/layout/events/events.scss
View File

@ -1,4 +1,5 @@
#events, #circle-events { #events,
#circle-events {
width: 100%; width: 100%;
font-family: "Facit"; font-family: "Facit";
font-weight: 400; font-weight: 400;
@ -16,7 +17,8 @@
.event-place-name { .event-place-name {
font-weight: 700; font-weight: 700;
} }
#listevents, #circle-listevents { #listevents,
#circle-listevents {
[name="name"], [name="name"],
solid-display-link-event .mdi::before { solid-display-link-event .mdi::before {
color: #C4262E; color: #C4262E;
@ -39,14 +41,14 @@
} }
#listevents, #listevents,
#circle-listevents { #circle-listevents {
.newtype .button{ .newtype .button {
font-size: 1.2rem; font-size: 1.2rem;
width: max-content; width: max-content;
height: max-content; height: max-content;
padding: 5px 20px; padding: 5px 20px;
color: #063B5C; color: #063B5C;
} }
solid-form solid-form-dropdown{ sib-form sib-form-dropdown {
label div { label div {
height: 2.5rem; height: 2.5rem;
} }
@ -80,15 +82,26 @@
} }
} }
#eventdetail { #eventdetail {
.mdi::before {
margin: 0 5px 0 20px;
}
[name="infotext"] {
text-align: left;
}
[name="name"] { [name="name"] {
font-family: "RefrigeratorDelxW01Bold"; font-family: "RefrigeratorDelxW01Bold";
font-size: 3.2rem; font-size: 3.2rem;
line-height: 3.8rem; line-height: 3.8rem;
color: #063B5C;
} }
color: #063B5C; color: #063B5C;
solid-display div .event-type { .event-type {
width: max-content; width: max-content;
padding: 5px 20px; padding: 5px 20px;
font-size: 1.1rem;
line-height: 1.3rem;
height: 13px;
margin: 10px 20px;
} }
[name="longDescription"] p { [name="longDescription"] p {
font-size: 1.6rem; font-size: 1.6rem;
@ -111,7 +124,8 @@
} }
} }
} }
.with-sidebar nav > solid-router > ul [name="circle-events"]{
.with-sidebar nav>solid-router>ul [name="circle-events"] {
li::before { li::before {
content: ''; content: '';
height: 40px; height: 40px;

42
src/styles/layout/polls/_polls.scss
View File

@ -1,24 +1,30 @@
#polls{ #polls {
h2{ h2 {
text-transform: inherit; text-transform: inherit;
} }
/*style of poll listing*/ /*style of poll listing*/
#pollListing{ #pollListing {
width: 90%; width: 90%;
margin: auto; margin: auto;
.all-polls{ .headline h2 {
font-family: "RefrigeratorDelxW01Bold";
font-size: 2.4rem;
line-height: 3.8rem;
color: #063B5C;
}
.all-polls {
/*make 3 polls per line*/ /*make 3 polls per line*/
div:first-of-type{ div:first-of-type {
solid-display{ solid-display {
width: 330px; width: 330px;
>div:first-of-type{ >div:first-of-type {
*[name="body"]{ *[name="body"] {
/*size of tags of poll card*/ /*size of tags of poll card*/
etuc-display-votetags{ etuc-display-votetags {
>div{ >div {
width: 64px; width: 64px;
height: 24px; height: 24px;
p{ p {
font-size: 11px; font-size: 11px;
} }
} }
@ -30,17 +36,17 @@
} }
} }
/*personnalise css on poll page*/ /*personnalise css on poll page*/
#pollPage{ #pollPage {
width: 85%; width: 85%;
margin: auto; margin: auto;
solid-display.topline{ solid-display.topline {
>div:first-of-type{ >div:first-of-type {
*[name="right"]{ *[name="right"] {
etuc-display-votetags{ etuc-display-votetags {
>div{ >div {
width: 64px; width: 64px;
height: 24px; height: 24px;
p{ p {
font-size: 11px; font-size: 11px;
} }
} }

55
src/styles/layout/resources/resources.scss
View File

@ -1,8 +1,8 @@
#resources{ #resources {
width: 100%; width: 100%;
font-family: "Facit"; font-family: "Facit";
font-weight: 400; font-weight: 400;
color: #3A3A3A; color: #7A7F85;
solid-resource { solid-resource {
background-color: #F0F3F6; background-color: #F0F3F6;
.sib-resource { .sib-resource {
@ -23,9 +23,31 @@
.lnk-newresource { .lnk-newresource {
margin-top: 30px; margin-top: 30px;
margin-right: 70px; margin-right: 70px;
z-index: 1;
position: relative;
} }
.resources sib-form::before { #listresources .lnk-newkeyword {
top: 133px;
left: 220px;
.button.thin-button.mdi {
padding: 5px 20px;
}
}
.resources {
margin-top: -35px;
sib-form {
&::before {
content: "Research a resource";
font-family: "RefrigeratorDelxW01Bold"; font-family: "RefrigeratorDelxW01Bold";
color: #063B5C;
font-size: 2.4rem;
line-height: 3.8rem;
top: -10px;
}
select {
width: 150px;
}
}
} }
#listresources { #listresources {
.lnk-newkeyword .button { .lnk-newkeyword .button {
@ -49,6 +71,30 @@
} }
} }
} }
#resourcedetail {
[name="name"] {
font-family: "RefrigeratorDelxW01Bold";
font-size: 3.2rem;
line-height: 3.8rem;
color: #063B5C;
}
[name="infotext"] {
justify-content: flex-start;
}
.event-type {
width: max-content;
padding: 5px 20px;
font-size: 1.1rem;
line-height: 1.3rem;
height: 13px;
margin: 0 20px 10px;
background-color: #C4262E;
color: white;
font-weight: 700;
text-transform: uppercase;
border-radius: 15px;
}
}
.resource-tag { .resource-tag {
font-family: Facilt; font-family: Facilt;
font-weight: 600; font-weight: 600;
@ -61,7 +107,8 @@
} }
} }
} }
.with-sidebar nav > solid-router > ul [name="circle-resources"]{
.with-sidebar nav>solid-router>ul [name="circle-resources"] {
li::before { li::before {
content: ''; content: '';
height: 40px; height: 40px;