From eb07bebdd1960c129ff7aa7661d119d1fd7998bc Mon Sep 17 00:00:00 2001
From: Marjolaine Le Bon <marjolaine@happy-dev.fr>
Date: Wed, 19 Aug 2020 18:23:18 +0200
Subject: [PATCH] update: uniformisation events/resources

---
 src/styles/base/main.scss                  | 1024 +++++++++-----------
 src/styles/base/menu-left.scss             |  536 +++++-----
 src/styles/layout/events/events.scss       |   40 +-
 src/styles/layout/polls/_polls.scss        |  100 +-
 src/styles/layout/resources/resources.scss |   59 +-
 5 files changed, 847 insertions(+), 912 deletions(-)

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 23a12a6..61fb44b 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -1,190 +1,179 @@
 * {
-  outline: none;
+    outline: none;
 }
 
 :root {
-  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;
-    /* Fix for viewport height bug in webkit for mobile */
-    height: -webkit-fill-available;
-    min-height: -webkit-fill-available;
-  }
-
-  .notLoggedIn {
-    visibility: hidden;
-  }
+    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;
+        /* Fix for viewport height bug in webkit for mobile */
+        height: -webkit-fill-available;
+        min-height: -webkit-fill-available;
+    }
+    .notLoggedIn {
+        visibility: hidden;
+    }
 }
 
+
 /* Fix for solid-dashboard fixture */
+
 solid-dashboard section {
-  padding: 1rem !important;
-
-  @include breakpoint(lg) {
-    padding: 4.2rem !important;
-  }
-
-  .icon {
-    display: inline-block;
-  }
+    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";
-  }
+    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;
+    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;
-
+    grid-area: leftmenu;
     @include breakpoint(lg) {
-      display: block;
+        height: calc(100vh - 83px);
+        /* 83px = nav height */
+        position: sticky;
+        top: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
     }
-  }
-
-  &.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;
-    z-index: 1000;
-
-    @include breakpoint(lg) {
-      display: none;
+    &.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;
+        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;
-  }
+    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 */
-nav, .views-container, .table-wrapper {
-  overflow: auto;
-  height: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: none;
+
+nav,
+.views-container,
+.table-wrapper {
+    overflow: auto;
+    height: auto;
+    -webkit-overflow-scrolling: touch;
+    -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);
-
-  &::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-left-background);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar-left-track);
-    border-radius: 6px;
-    border: 3px solid var(--color-scrollbar-left-background);
-  }
-
-  &::-webkit-scrollbar {
-    width: 11px;
-  }
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
+    &::-webkit-scrollbar-track {
+        background: var(--color-scrollbar-left-background);
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-left-track);
+        border-radius: 6px;
+        border: 3px solid var(--color-scrollbar-left-background);
+    }
+    &::-webkit-scrollbar {
+        width: 11px;
+    }
 }
 
+
 /* Custom scrollbar of the content */
+
 .views-container {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
-
-  &::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-right-background);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar-right-track);
-    border-radius: 6px;
-    border: 3px solid var(--color-scrollbar-right-background);
-  }
-
-  &::-webkit-scrollbar {
-    width: 11px;
-  }
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
+    &::-webkit-scrollbar-track {
+        background: var(--color-scrollbar-right-background);
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-right-track);
+        border-radius: 6px;
+        border: 3px solid var(--color-scrollbar-right-background);
+    }
+    &::-webkit-scrollbar {
+        width: 11px;
+    }
 }
 
+
 /* 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;
-  }
+    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,
 #admin-projects,
 #admin-users {
-  display: contents;
+    display: contents;
 }
 
 [hidden],
 .hidden {
-  display: none !important;
+    display: none !important;
 }
 
 img {
-  max-height: 100%;
-  max-width: 100%;
+    max-height: 100%;
+    max-width: 100%;
 }
 
 h1,
@@ -195,9 +184,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: bold;
-
-  /*span {
+    font-weight: bold;
+    /*span {
     font-weight: 400;
     padding-left: 0.85rem;
 
@@ -207,182 +195,170 @@ h6 {
   }*/
 }
 
-h1, .h1-like {
-  color: var(--color-h1);
-  font-size: 2rem;
-  text-transform: uppercase;
-
-  &.without-margin {
-    margin: 0;
-  }
+h1,
+.h1-like {
+    color: var(--color-h1);
+    font-size: 2rem;
+    text-transform: uppercase;
+    &.without-margin {
+        margin: 0;
+    }
 }
 
-h2, .h2-like {
-  color: var(--color-h2);
-  font-size: 1.8rem;
-  text-transform: uppercase;
+h2,
+.h2-like {
+    color: var(--color-h2);
+    font-size: 1.8rem;
+    text-transform: uppercase;
 }
 
 .h2-like {
-  display: block;
-  margin: 14.94px 0;
-  width: 100%;
+    display: block;
+    margin: 14.94px 0;
+    width: 100%;
 }
 
 h3 {
-  color: var(--color-title);
-  font-size: 1.7rem;
-  margin: 0;
+    color: var(--color-title);
+    font-size: 1.7rem;
+    margin: 0;
 }
 
 h4 {
-  font-size: 1.2rem;
+    font-size: 1.2rem;
 }
 
 h5 {
-  font-size: 2rem;
+    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%;
-  }
+    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;
+    box-sizing: border-box;
+    display: flex;
+    height: 8.5vh;
+    justify-content: flex-end;
+    margin-top: 20px;
+    text-align: end;
+    width: 15vw;
 }
 
 .content-box {
-  @include window-style-modal();
-  flex-direction: column;
-  flex-grow: 1;
-  margin: 2rem 1rem 5rem 2rem;
-
-  &.full-width {
-    background: var(--color-white);
-    flex: 1;
-    font-size: 1.6rem;
-    margin: 0 auto;
-    min-height: 100%;
-  }
+    @include window-style-modal();
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 2rem 1rem 5rem 2rem;
+    &.full-width {
+        background: var(--color-white);
+        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;
-
-  @include breakpoint(lg) {
-  padding: 3rem;
-  margin: 0;
-  }
-
-  .mobile-sidebar-button {
-    float: right;
-    color: var(--color-secondary);
-    font-size: 1.8rem;
-    font-weight: bold!important;
-
-    &::before {
-      font-size: 2.2rem;
-      font-weight: normal;
-      margin-right: 1.2rem;
-    }
-
+    border-bottom: 1px solid var(--color-content-header);
+    padding: 1.8rem 0 1.4rem;
+    margin: 0 1.6rem;
     @include breakpoint(lg) {
-      display: none;
+        padding: 3rem;
+        margin: 0;
     }
-  }
-
-  solid-display {
-    @include breakpoint(sm) {
-      float: left;
-    }
-  }
-
-  /* For solid-display on project, circle, or private message view */
-  solid-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 {
+    .mobile-sidebar-button {
+        float: right;
+        color: var(--color-secondary);
         font-size: 1.8rem;
-
-        &:not(:empty)::before {
-          color: var(--color-grey-4);
-          content: ' - ';
-          font-size: 2rem;
-          font-weight: bold;
+        font-weight: bold!important;
+        &::before {
+            font-size: 2.2rem;
+            font-weight: normal;
+            margin-right: 1.2rem;
+        }
+        @include breakpoint(lg) {
+            display: none;
+        }
+    }
+    solid-display {
+        @include breakpoint(sm) {
+            float: left;
+        }
+    }
+    /* For solid-display on project, circle, or private message view */
+    solid-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;
+                }
+            }
+            .description {
+                color: var(--color-grey-4);
+            }
+            .name {
+                color: var(--color-grey-4);
+                font-weight: normal;
+            }
         }
-      }
-
-      .description {
-        color: var(--color-grey-4);
-
-      }
-
-      .name {
-        color: var(--color-grey-4);
-        font-weight: normal;
-      }
     }
-  }
 }
 
 .content-box__height {
-  min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
-
-  @include breakpoint(lg) {
-    min-height: calc(100vh - 83px - 84px);
-  }
+    min-height: calc(100vh - 50px - 56px);
+    /* Heights of main header and sub-header */
+    @include breakpoint(lg) {
+        min-height: calc(100vh - 83px - 84px);
+    }
 }
 
 .content-box__info {
-  flex-direction: column;
-  padding: 1rem;
-
-  @include breakpoint(lg) {
-    padding: 3.2rem;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
+    flex-direction: column;
+    padding: 1rem;
+    @include breakpoint(lg) {
+        padding: 3.2rem;
+    }
+    * {
+        box-sizing: border-box;
+    }
 }
 
+
 /*.modal {
   color: var(--color-white);
   margin: 75px;
@@ -407,105 +383,94 @@ h5 {
 }*/
 
 .admin-header {
-  /* 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 */
+    flex-direction: column;
+    align-items: flex-start;
     margin-bottom: 20px;
-    /* end */
-
+    /*end */
     @include breakpoint(lg) {
-      margin-top: 0;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 5rem;
     }
-  }
-
-  solid-ac-checker,
-  solid-link {
-    width: 100%;
-
-    @include breakpoint(lg) {
-      width: auto;
+    h3 {
+        /* Quick fix for alignment on mobile before admin content rework */
+        margin-bottom: 20px;
+        /* end */
+        @include breakpoint(lg) {
+            margin-top: 0;
+        }
+    }
+    solid-ac-checker,
+    solid-link {
+        width: 100%;
+        @include breakpoint(lg) {
+            width: auto;
+        }
     }
-  }
 }
 
 .backlink {
-  @include icon('arrow-left-circle');
-  color: var(--color-backlink);
-  font-size: 1.5rem;
-  margin: 2rem 0 0 2rem;
-  text-decoration: underline;
-
-  &::before {
-    font-size: 2rem;
-    margin-right: 1rem;
-    text-decoration: none;
-  }
-
-  &.right {
-    display: block;
-    text-align: right;
-  }
+    @include icon('arrow-left-circle');
+    color: var(--color-backlink);
+    font-size: 1.5rem;
+    margin: 2rem 0 0 2rem;
+    text-decoration: underline;
+    &::before {
+        font-size: 2rem;
+        margin-right: 1rem;
+        text-decoration: none;
+    }
+    &.right {
+        display: block;
+        text-align: right;
+    }
 }
 
 .centered {
-  text-align: center;
+    text-align: center;
 }
 
 .flex {
-  display: flex;
+    display: flex;
 }
 
 .desktop-button__end {
-  display: block;
-
-  @include breakpoint(lg) {
-    display: flex;
-    justify-content: flex-end;
-  }
+    display: block;
+    @include breakpoint(lg) {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
 
 .space-between {
-  justify-content: space-between;
-
-  &.with-padding {
-    padding-bottom: 1.4rem;
-  }
+    justify-content: space-between;
+    &.with-padding {
+        padding-bottom: 1.4rem;
+    }
 }
 
 .mobile-vertical-align {
-  flex-direction: column;
-
-  @include breakpoint(lg) {
-    flex-direction: row;
-  }
+    flex-direction: column;
+    @include breakpoint(lg) {
+        flex-direction: row;
+    }
 }
 
 .word-spacing-left {
-  margin-left: 0.60rem;
+    margin-left: 0.60rem;
 }
 
 .word-spacing-right {
-  margin-right: 0.60rem;
+    margin-right: 0.60rem;
 }
 
 .mobile-margin__bottom {
-  margin-bottom: 1rem;
-
-  @include breakpoint(lg) {
-    margin-bottom: 0;
-  }
+    margin-bottom: 1rem;
+    @include breakpoint(lg) {
+        margin-bottom: 0;
+    }
 }
 
 // Other base components
@@ -514,7 +479,6 @@ h5 {
 @import 'header';
 @import 'menu-left';
 @import 'user-thumb';
-
 // Button global CSS
 solid-delete,
 solid-route,
@@ -523,227 +487,179 @@ button,
 input[type='submit'],
 a,
 .button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0;
-
-  &.button {
-    padding: 0.55rem 2.5rem;
-    border-radius: 100em;
-
-    *,
-    & {
-      font-size: 1.4rem;
-    }
-
-    &.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;
-      }
-    }
-
-    &.small {
-
-      *,
-      & {
-        font-size: 1rem;
-      }
-    }
-
-    &.text-bold {
-
-      *,
-      & {
-        font-weight: bold;
-      }
-    }
-
-    &.text-uppercase {
-
-      *,
-      & {
-        text-transform: uppercase;
-      }
-    }
-
-    &.rounded {
-      border-radius: 50%;
-      font-size: 1.8rem;
-      padding: 1rem;
-    }
-
-    &.button-link {
-      border-radius: 100em;
-
-      *,
-      & {
-        text-decoration: underline;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    &.with-icon::before {
-      font-size: 1.6rem;
-      margin-right: 1rem;
-    }
-
-    &.button-primary{
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-primary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-primary);
-      }
-
-      &:hover {
-        background-color: var(--color-primary);
-
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0;
+    &.button {
+        padding: 0.55rem 2.5rem;
+        border-radius: 100em;
         *,
         & {
-          color: var(--color-white);
+            font-size: 1.4rem;
         }
-      }
-    }
-
-    &.button-secondary {
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-secondary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-secondary);
-      }
-
-      &:hover {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
+        &.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;
+                }
+            }
         }
-      }
-    }
-
-    &.button-complementary {
-      color: var(--color-complementary);
-      background-color: var(--color-white);
-
-      &.bordered {
-        border: 1px solid var(--color-complementary);
-      }
-
-      &:hover {
-        background-color: var(--color-complementary);
-        color: var(--color-white);
-      }
-    }
-
-    &.flex {
-      display: flex;
-    }
-
-    &.reversed {
-      &.button-primary {
-        background-color: var(--color-primary);
-
-        *,
-        & {
-          color: var(--color-white);
+        &.desktop-btn-margin__left {
+            margin: 0;
+            @include breakpoint(lg) {
+                margin-left: 2.2rem;
+            }
         }
-
-        &:hover {
-          background-color: var(--color-white);
-          color: var(--color-primary);
-
-          *,
-          & {
-            color: var(--color-primary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-primary);
-          }
+        &.small {
+            *,
+            & {
+                font-size: 1rem;
+            }
         }
-      }
-
-      &.button-secondary {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
+        &.text-bold {
+            *,
+            & {
+                font-weight: bold;
+            }
         }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
-            color: var(--color-secondary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-secondary);
-          }
+        &.text-uppercase {
+            *,
+            & {
+                text-transform: uppercase;
+            }
         }
-      }
-
-      &.button-complementary {
-        background-color: var(--color-complementary);
-
-        *,
-        & {
-          color: var(--color-white);
+        &.rounded {
+            border-radius: 50%;
+            font-size: 1.8rem;
+            padding: 1rem;
         }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
+        &.button-link {
+            border-radius: 100em;
+            *,
+            & {
+                text-decoration: underline;
+            }
+            &:hover {
+                text-decoration: none;
+            }
+        }
+        &.with-icon::before {
+            font-size: 1.6rem;
+            margin-right: 1rem;
+        }
+        &.button-primary {
+            background-color: var(--color-white);
+            *,
+            & {
+                color: var(--color-primary);
+            }
+            &.bordered {
+                border: 1px solid var(--color-primary);
+            }
+            &:hover {
+                background-color: var(--color-primary);
+                *,
+                & {
+                    color: var(--color-white);
+                }
+            }
+        }
+        &.button-secondary {
+            background-color: var(--color-white);
+            *,
+            & {
+                color: var(--color-secondary);
+            }
+            &.bordered {
+                border: 1px solid var(--color-secondary);
+            }
+            &:hover {
+                background-color: var(--color-secondary);
+                *,
+                & {
+                    color: var(--color-white);
+                }
+            }
+        }
+        &.button-complementary {
             color: var(--color-complementary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-complementary);
-          }
+            background-color: var(--color-white);
+            &.bordered {
+                border: 1px solid var(--color-complementary);
+            }
+            &:hover {
+                background-color: var(--color-complementary);
+                color: var(--color-white);
+            }
+        }
+        &.flex {
+            display: flex;
+        }
+        &.reversed {
+            &.button-primary {
+                background-color: var(--color-primary);
+                *,
+                & {
+                    color: var(--color-white);
+                }
+                &:hover {
+                    background-color: var(--color-white);
+                    color: var(--color-primary);
+                    *,
+                    & {
+                        color: var(--color-primary);
+                    }
+                    &.bordered {
+                        border: 1px solid var(--color-primary);
+                    }
+                }
+            }
+            &.button-secondary {
+                background-color: var(--color-secondary);
+                *,
+                & {
+                    color: var(--color-white);
+                }
+                &:hover {
+                    background-color: var(--color-white);
+                    *,
+                    & {
+                        color: var(--color-secondary);
+                    }
+                    &.bordered {
+                        border: 1px solid var(--color-secondary);
+                    }
+                }
+            }
+            &.button-complementary {
+                background-color: var(--color-complementary);
+                *,
+                & {
+                    color: var(--color-white);
+                }
+                &:hover {
+                    background-color: var(--color-white);
+                    *,
+                    & {
+                        color: var(--color-complementary);
+                    }
+                    &.bordered {
+                        border: 1px solid var(--color-complementary);
+                    }
+                }
+            }
         }
-      }
     }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index d97d858..5e1fcd3 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -1,304 +1,256 @@
 #main__menu {
-  background-color: var(--color-menu-background);
-  color: var(--color-menu-text);
-  /*transition: flex-basis 0.5s ease-in-out;*/
-
-  &.open {
-    transform: translateX(0);
-  }
-
-  .unread {
-    font-weight: bolder;
-  }
-
-  solid-router {
-    .menu-wrapper {
-      &.is-closed {
-        .sub-menu {
-          display: none;
-        }
-
-        .menu-chevron {
-          transform: rotate(180deg);
-        }
-      }
+    background-color: var(--color-menu-background);
+    color: var(--color-menu-text);
+    /*transition: flex-basis 0.5s ease-in-out;*/
+    &.open {
+        transform: translateX(0);
     }
-
-    solid-link {
-      width: 100%;
+    .unread {
+        font-weight: bolder;
     }
-
-    .menu {
-      cursor: pointer;
-      display: flex;
-      flex-direction: row-reverse;
-      font-weight: bold;
-      padding: 1.2rem;
-
-      &[active] {
-        background-color: var(--color-menu-highlight-primary);
-
-        .menu-icon:before {
-          background-color: var(--color-menu-icon-background-active);
-        }
-
-        .menu-notification>solid-display>div:first-child {
-          background-color: var(--color-menu-badge-background);
-        }
-      }
-      &[name="resources"][active] .menu-icon:before,
-      &[name="polls"][active] .menu-icon:before,
-      &[name="events"][active] .menu-icon:before {
-        background-color: transparent;
-      } 
-
-      .menu-icon {
-        align-items: center;
-        display: flex;
-        justify-content: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        font-size: 1.7rem;
-        width: 3.2em;
-
-        &:before {
-          border-radius: 100%;
-          height: 1.9em;
-          line-height: 1.9em;
-          width: 1.9em;
-        }
-      }
-
-      .menu-label {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        flex-shrink: 0;
-        font-weight: 600;
-        justify-content: center;
-        letter-spacing: 0.017rem;
-        text-transform: uppercase;
-        width: 8em;
-      }
-
-      .menu-chevron {
-        align-items: center;
-        display: flex;
-        flex-grow: 0;
-        flex-shrink: 0;
-        justify-content: center;
-        width: 2em;
-      }
-
-      >solid-display {
-        display: block;
-      }
-      &[name="events"], &[name="resources"] {
-        .menu-label {
-          width: 9.9em;
-        }
-      }
-    }
-
-    .sub-menu {
-
-      /* Ellipsis for project tab */
-
-      .project-tab>div>solid-display>div:nth-child(1) {
-
-        solid-set-default[name='project'] {
-          flex: 3;
-          
-          .project-customer,
-          .project-name {
-            box-sizing: border-box;
-            display: block;
-            width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
-
-            @include breakpoint(lg) {
-              width: 150px;
+    solid-router {
+        .menu-wrapper {
+            &.is-closed {
+                .sub-menu {
+                    display: none;
+                }
+                .menu-chevron {
+                    transform: rotate(180deg);
+                }
             }
-          }
-
-          .project-customer,
-          .project-name>div {
-
-            @include breakpoint(lg) {
-              display: block;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-          }
         }
-      }
-
-      /* Ellipsis for circle tab */
-
-      .circle-tab>div>solid-display>div {
-
-        solid-display-div[name='name'] {
-          flex: 3;
-
-          >div[name='name'] {
-            box-sizing: border-box;
-            padding-left: 0.2em;
-            width: calc(80vw - 96px);  /*96px = padding of the element + width and margin of counter */
-
-            @include breakpoint(lg) {
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              width: 150px;
-            }
-          }
+        solid-link {
+            width: 100%;
         }
-      }
-
-      /* Ellipsis for message tab */
-
-      .message-tab>div>solid-display>div>solid-display-div>div {
-        box-sizing: border-box;
-        width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
-        
-        @include breakpoint(lg) {
-          width: 150px;
-        }
-      }
-
-      solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
-        margin-left: 30px;
-        margin-bottom: 10px;
-        width: calc(80vw - 71px);
-        display: block;
-        background-color: var(--color-secondary);
-        color: var(--color-grey-6);
-        border: 1px solid var(--color-grey-4);
-        border-radius: 3px;
-        padding: 4px;
-
-        @include breakpoint(lg) {
-          margin: auto;
-          margin-bottom: 10px;
-          width: auto;
-        }
-      }
-
-      solid-display.nosub>nav {
-        text-align: center;
-        overflow: hidden;
-        display: grid;
-        grid-template-columns: auto 50% auto;
-        grid-template-areas: "left middle right";
-
-        >* {
-          color: var(--color-grey-6);
-        }
-
-        >[data-id="prev"] {
-          grid-area: left;
-        }
-
-        >[data-id="next"] {
-          grid-area: right;
-        }
-
-        >span {
-          grid-area: middle;
-        }
-      }
-
-      hubl-menu-publicprivate {
-        display: inline-block;
-        text-align: center;
-
-        div {
-          font-family: simple-line-icons;
-          width: 20px;
-          font-size: 0.8em;
-          padding-top: 0.1em;
-        }
-      }
-
-      >solid-display.nosub>div>solid-display>div {
-        padding: 1rem 1rem 1rem 3rem;
-      }
-
-      solid-display>div {
-
-        .create {
-          color: var(--color-white);
-          margin: 1rem 1rem 2.2rem 3.2rem;
-        }
-
-        &>solid-display {
-          &:last-child>div {
-            margin-bottom: 2.2rem;
-          }
-
-          >div {
-            color: var(--color-grey-6);
+        .menu {
             cursor: pointer;
-
-            >hubl-menu-fix-url-circle>solid-display>div,
-            >hubl-menu-fix-url-project>solid-display>div {
-              padding: 1rem 1rem 1rem 3rem;
+            display: flex;
+            flex-direction: row-reverse;
+            font-weight: bold;
+            padding: 1.2rem;
+            &[active] {
+                background-color: var(--color-menu-highlight-primary);
+                .menu-icon:before {
+                    background-color: var(--color-menu-icon-background-active);
+                }
+                .menu-notification>solid-display>div:first-child {
+                    background-color: var(--color-menu-badge-background);
+                }
+            }
+            &[name="resources"][active] .menu-icon:before,
+            &[name="polls"][active] .menu-icon:before,
+            &[name="events"][active] .menu-icon:before {
+                background-color: transparent;
+            }
+            .menu-icon {
+                align-items: center;
+                display: flex;
+                justify-content: center;
+                flex-grow: 0;
+                flex-shrink: 0;
+                font-size: 1.7rem;
+                width: 3.2em;
+                &:before {
+                    border-radius: 100%;
+                    height: 1.9em;
+                    line-height: 1.9em;
+                    width: 1.9em;
+                }
+            }
+            .menu-label {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                flex-shrink: 0;
+                font-weight: 600;
+                justify-content: center;
+                letter-spacing: 0.017rem;
+                text-transform: uppercase;
+                width: 8em;
+            }
+            .menu-chevron {
+                align-items: center;
+                display: flex;
+                flex-grow: 0;
+                flex-shrink: 0;
+                justify-content: center;
+                width: 2em;
+            }
+            >solid-display {
+                display: block;
+            }
+            &[name="events"],
+            &[name="resources"],
+            &[name="polls"] {
+                .menu-label {
+                    width: 9.9em;
+                }
             }
-          }
-
-          &[fields="project(customer.name, name), badge"]>div {
-            padding: 0;
-          }
         }
-
-        &>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 {
-          background-color: var(--color-menu-highlight-primary);
-          color: var(--color-menu-text-active);
-          font-weight: bold;
+        .sub-menu {
+            /* Ellipsis for project tab */
+            .project-tab>div>solid-display>div:nth-child(1) {
+                solid-set-default[name='project'] {
+                    flex: 3;
+                    .project-customer,
+                    .project-name {
+                        box-sizing: border-box;
+                        display: block;
+                        width: calc(80vw - 96px);
+                        /*96px = padding of the element + width and margin of counter */
+                        @include breakpoint(lg) {
+                            width: 150px;
+                        }
+                    }
+                    .project-customer,
+                    .project-name>div {
+                        @include breakpoint(lg) {
+                            display: block;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+                    }
+                }
+            }
+            /* Ellipsis for circle tab */
+            .circle-tab>div>solid-display>div {
+                solid-display-div[name='name'] {
+                    flex: 3;
+                    >div[name='name'] {
+                        box-sizing: border-box;
+                        padding-left: 0.2em;
+                        width: calc(80vw - 96px);
+                        /*96px = padding of the element + width and margin of counter */
+                        @include breakpoint(lg) {
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            width: 150px;
+                        }
+                    }
+                }
+            }
+            /* Ellipsis for message tab */
+            .message-tab>div>solid-display>div>solid-display-div>div {
+                box-sizing: border-box;
+                width: calc(80vw - 96px);
+                /*96px = padding of the element + width and margin of counter */
+                @include breakpoint(lg) {
+                    width: 150px;
+                }
+            }
+            solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
+                margin-left: 30px;
+                margin-bottom: 10px;
+                width: calc(80vw - 71px);
+                display: block;
+                background-color: var(--color-secondary);
+                color: var(--color-grey-6);
+                border: 1px solid var(--color-grey-4);
+                border-radius: 3px;
+                padding: 4px;
+                @include breakpoint(lg) {
+                    margin: auto;
+                    margin-bottom: 10px;
+                    width: auto;
+                }
+            }
+            solid-display.nosub>nav {
+                text-align: center;
+                overflow: hidden;
+                display: grid;
+                grid-template-columns: auto 50% auto;
+                grid-template-areas: "left middle right";
+                >* {
+                    color: var(--color-grey-6);
+                }
+                >[data-id="prev"] {
+                    grid-area: left;
+                }
+                >[data-id="next"] {
+                    grid-area: right;
+                }
+                >span {
+                    grid-area: middle;
+                }
+            }
+            hubl-menu-publicprivate {
+                display: inline-block;
+                text-align: center;
+                div {
+                    font-family: simple-line-icons;
+                    width: 20px;
+                    font-size: 0.8em;
+                    padding-top: 0.1em;
+                }
+            }
+            >solid-display.nosub>div>solid-display>div {
+                padding: 1rem 1rem 1rem 3rem;
+            }
+            solid-display>div {
+                .create {
+                    color: var(--color-white);
+                    margin: 1rem 1rem 2.2rem 3.2rem;
+                }
+                &>solid-display {
+                    &:last-child>div {
+                        margin-bottom: 2.2rem;
+                    }
+                    >div {
+                        color: var(--color-grey-6);
+                        cursor: pointer;
+                        >hubl-menu-fix-url-circle>solid-display>div,
+                        >hubl-menu-fix-url-project>solid-display>div {
+                            padding: 1rem 1rem 1rem 3rem;
+                        }
+                    }
+                    &[fields="project(customer.name, name), badge"]>div {
+                        padding: 0;
+                    }
+                }
+                &>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 {
+                    background-color: var(--color-menu-highlight-primary);
+                    color: var(--color-menu-text-active);
+                    font-weight: bold;
+                }
+            }
+            &.menu-notification {
+                >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
+                >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
+                    flex: 1;
+                }
+                >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-project>solid-display>div {
+                    display: flex;
+                    justify-content: space-between;
+                }
+                hubl-counter {
+                    height: 20px;
+                    width: 20px;
+                    margin-right: 1em;
+                    div.counter:not([data-nb-unread="0"]) {
+                        text-align: center;
+                        display: block;
+                        background-color: var(--sib-notifications-theme, gray);
+                        border-radius: 50%;
+                        font-size: 12px;
+                        line-height: 20px;
+                        width: 20px;
+                        height: 20px;
+                        padding-bottom: 0;
+                        color: var(--color-secondary);
+                    }
+                }
+            }
         }
-      }
-
-      &.menu-notification {
-
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
-          flex: 1;
+        .divider {
+            height: 1px;
+            background-color: var(--color-grey-11);
+            opacity: 0.2;
         }
-
-        >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-project>solid-display>div {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        hubl-counter {
-          height: 20px;
-          width: 20px;
-          margin-right: 1em;
-
-          div.counter:not([data-nb-unread="0"]) {
-            text-align: center;
-            display: block;
-            background-color: var(--sib-notifications-theme, gray);
-            border-radius: 50%;
-            font-size: 12px;
-            line-height: 20px;
-            width: 20px;
-            height: 20px;
-            padding-bottom: 0;
-            color: var(--color-secondary);
-          }
-        }
-      }
     }
-
-    .divider {
-      height: 1px;
-      background-color: var(--color-grey-11);
-      opacity: 0.2;
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss
index aca9d36..1c3511d 100644
--- a/src/styles/layout/events/events.scss
+++ b/src/styles/layout/events/events.scss
@@ -1,4 +1,5 @@
-#events, #circle-events {
+#events,
+#circle-events {
     width: 100%;
     font-family: "Facit";
     font-weight: 400;
@@ -16,12 +17,13 @@
         .event-place-name {
             font-weight: 700;
         }
-        #listevents, #circle-listevents {
+        #listevents,
+        #circle-listevents {
             [name="name"],
-        solid-display-link-event .mdi::before {
-            color:  #C4262E;
+            solid-display-link-event .mdi::before {
+                color: #C4262E;
+            }
         }
-    }
         .event-place-name,
         .nextevent-startdate,
         solid-display-link-event {
@@ -39,14 +41,14 @@
         }
         #listevents,
         #circle-listevents {
-            .newtype .button{
+            .newtype .button {
                 font-size: 1.2rem;
                 width: max-content;
                 height: max-content;
                 padding: 5px 20px;
                 color: #063B5C;
             }
-            solid-form solid-form-dropdown{
+            sib-form sib-form-dropdown {
                 label div {
                     height: 2.5rem;
                 }
@@ -80,15 +82,26 @@
             }
         }
         #eventdetail {
+            .mdi::before {
+                margin: 0 5px 0 20px;
+            }
+            [name="infotext"] {
+                text-align: left;
+            }
             [name="name"] {
                 font-family: "RefrigeratorDelxW01Bold";
                 font-size: 3.2rem;
                 line-height: 3.8rem;
-            }
                 color: #063B5C;
-            solid-display div .event-type {
+            }
+            color: #063B5C;
+            .event-type {
                 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 {
                 font-size: 1.6rem;
@@ -98,11 +111,11 @@
                 font-size: 1.6rem;
             }
         }
-        #newevent input[type="submit"], 
+        #newevent input[type="submit"],
         #newtype input[type="submit"],
         button {
             width: max-content;
-            padding: 5px 20px; 
+            padding: 5px 20px;
         }
     }
     @media (max-width: 991px) {
@@ -111,7 +124,8 @@
         }
     }
 }
-.with-sidebar nav > solid-router > ul [name="circle-events"]{
+
+.with-sidebar nav>solid-router>ul [name="circle-events"] {
     li::before {
         content: '';
         height: 40px;
diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss
index 5a19b0c..c30cc40 100644
--- a/src/styles/layout/polls/_polls.scss
+++ b/src/styles/layout/polls/_polls.scss
@@ -1,52 +1,58 @@
-#polls{
-  h2{
-    text-transform: inherit;
-  }
-  /*style of poll listing*/
-  #pollListing{
-    width: 90%;
-    margin: auto;
-    .all-polls{
-      /*make 3 polls per line*/
-      div:first-of-type{
-        solid-display{
-          width: 330px;
-          >div:first-of-type{
-            *[name="body"]{
-              /*size of tags of poll card*/ 
-              etuc-display-votetags{
-                >div{
-                  width: 64px;
-                  height: 24px;
-                  p{
-                    font-size: 11px;
-                  }
+#polls {
+    h2 {
+        text-transform: inherit;
+    }
+    /*style of poll listing*/
+    #pollListing {
+        width: 90%;
+        margin: auto;
+        .headline h2 {
+            font-family: "RefrigeratorDelxW01Bold";
+            font-size: 2.4rem;
+            line-height: 3.8rem;
+            color: #063B5C;
+        }
+        .all-polls {
+            /*make 3 polls per line*/
+            div:first-of-type {
+                solid-display {
+                    width: 330px;
+                    >div:first-of-type {
+                        *[name="body"] {
+                            /*size of tags of poll card*/
+                            etuc-display-votetags {
+                                >div {
+                                    width: 64px;
+                                    height: 24px;
+                                    p {
+                                        font-size: 11px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /*personnalise css on poll page*/
+    #pollPage {
+        width: 85%;
+        margin: auto;
+        solid-display.topline {
+            >div:first-of-type {
+                *[name="right"] {
+                    etuc-display-votetags {
+                        >div {
+                            width: 64px;
+                            height: 24px;
+                            p {
+                                font-size: 11px;
+                            }
+                        }
+                    }
                 }
-              }
-            }          
-          }
-        }
-      }
-    }
-  }
-  /*personnalise css on poll page*/
-  #pollPage{
-    width: 85%;
-    margin: auto;
-    solid-display.topline{
-      >div:first-of-type{
-        *[name="right"]{
-          etuc-display-votetags{
-            >div{
-              width: 64px;
-              height: 24px;
-              p{
-                font-size: 11px;
-              }
             }
-          }
         }
-      }
     }
-  }
 }
\ No newline at end of file
diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss
index 373b212..e665949 100644
--- a/src/styles/layout/resources/resources.scss
+++ b/src/styles/layout/resources/resources.scss
@@ -1,12 +1,12 @@
-#resources{
+#resources {
     width: 100%;
     font-family: "Facit";
     font-weight: 400;
-    color: #3A3A3A;
+    color: #7A7F85;
     solid-resource {
         background-color: #F0F3F6;
         .sib-resource {
-            font-family: "Facit";            
+            font-family: "Facit";
             .page-title {
                 font-family: "RefrigeratorDelxW01Bold";
                 font-size: 3.2rem;
@@ -23,9 +23,31 @@
             .lnk-newresource {
                 margin-top: 30px;
                 margin-right: 70px;
+                z-index: 1;
+                position: relative;
             }
-            .resources sib-form::before {
-                font-family: "RefrigeratorDelxW01Bold";
+            #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";
+                        color: #063B5C;
+                        font-size: 2.4rem;
+                        line-height: 3.8rem;
+                        top: -10px;
+                    }
+                    select {
+                        width: 150px;
+                    }
+                }
             }
             #listresources {
                 .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 {
                 font-family: Facilt;
                 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 {
         content: '';
         height: 40px;