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 | 534 +++++-----
src/styles/layout/events/events.scss | 40 +-
src/styles/layout/polls/_polls.scss | 96 +-
src/styles/layout/resources/resources.scss | 59 +-
5 files changed, 844 insertions(+), 909 deletions(-)
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 23a12a6b..61fb44be 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;
- }
+/* Fix for solid-dashboard fixture */
- .icon {
- display: inline-block;
- }
+solid-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";
- }
+ 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;
-}
-/* Custom scrollbar of the left-menu */
-nav {
- scrollbar-width: thin;
- scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
+nav,
+.views-container,
+.table-wrapper {
+ overflow: auto;
+ height: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: none;
+}
- &::-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);
- }
+/* Custom scrollbar of the left-menu */
- &::-webkit-scrollbar {
- width: 11px;
- }
+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;
+ }
}
-/* 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);
- }
+/* Custom scrollbar of the content */
- &::-webkit-scrollbar {
- width: 11px;
- }
+.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;
+ }
}
-/* 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;
- }
+/* Custom scrollbar of the table */
- &::-webkit-scrollbar-thumb {
- background-color: var(--color-scrollbar-table-track);
- border-radius: 10px;
- }
+.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,
#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;
- }
+/* 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) {
- display: none;
- }
- }
-
- solid-display {
- @include breakpoint(sm) {
- float: left;
+ padding: 3rem;
+ margin: 0;
}
- }
-
- /* 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 d97d858a..5e1fcd39 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;
+ solid-router {
+ .menu-wrapper {
+ &.is-closed {
+ .sub-menu {
+ display: none;
+ }
+ .menu-chevron {
+ transform: rotate(180deg);
+ }
+ }
}
- }
-
- .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;
+ solid-link {
+ width: 100%;
}
- }
- }
-
- .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;
+ .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);
+ }
}
- }
-
- .project-customer,
- .project-name>div {
-
- @include breakpoint(lg) {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ &[name="resources"][active] .menu-icon:before,
+ &[name="polls"][active] .menu-icon:before,
+ &[name="events"][active] .menu-icon:before {
+ background-color: transparent;
}
- }
- }
- }
-
- /* 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;
+ .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;
+ }
}
- }
- }
- }
-
- /* 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;
+ .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;
- }
- }
-
- &.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;
+ .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);
+ }
+ }
+ }
}
-
- 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;
}
- }
- }
-
- .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 aca9d36a..1c3511d5 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 5a19b0cd..c30cc40e 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 373b2123..e6659491 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;
--
GitLab