From 3861289d21b039e167084e84f3facc2bae2d8f45 Mon Sep 17 00:00:00 2001
From: Benoit Alessandroni <benoit@happy-dev.fr>
Date: Mon, 12 Oct 2020 19:24:26 +0200
Subject: [PATCH] bugfix: revert styles
---
src/index.pug | 2 +-
src/styles/base/main.scss | 1024 ++++++++++++++++++++-----------------
2 files changed, 562 insertions(+), 464 deletions(-)
diff --git a/src/index.pug b/src/index.pug
index dcdbd14b..62d68573 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -90,7 +90,7 @@ html(lang="en")
#admin(hidden).with-sidebar
include page-admin.pug
- #about(hidden).no-sidebar.with-padding
+ #about.no-sidebar.with-padding
include page-about.pug
if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c2e7b3ea..07b0ab84 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -1,91 +1,102 @@
* {
- 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;
+ grid-area: leftmenu;
+
+ @include breakpoint(lg) {
+ height : calc(100vh - 83px);
+ /* 83px = nav height */
+ position : sticky;
+ top : 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+
+ &.jsLeftMenu {
+ display: none;
+
@include breakpoint(lg) {
- height: calc(100vh - 83px);
- /* 83px = nav height */
- position: sticky;
- top: 0;
- overflow-x: hidden;
- overflow-y: auto;
+ display: block;
}
- &.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;
- }
+ }
+
+ &.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;
+ }
}
@@ -94,67 +105,76 @@ solid-dashboard section {
nav,
.views-container,
.table-wrapper {
- overflow: auto;
- height: auto;
- -webkit-overflow-scrolling: touch;
- -ms-overflow-style: none;
+ 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;
+ }
}
@@ -163,17 +183,17 @@ nav {
#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,
@@ -184,92 +204,95 @@ h3,
h4,
h5,
h6 {
- font-weight: bold;
- /*span {
- font-weight: 400;
+ font-weight : bold;
+ /*span {
+ font-weight : 400;
padding-left: 0.85rem;
- &:before {
- content: '// ';
+ & :before {
+ content : '// ';
}
}*/
}
h1,
.h1-like {
- color: var(--color-h1);
- font-size: 2rem;
- text-transform: uppercase;
- &.without-margin {
- margin: 0;
- }
+ 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;
+ 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;
}
.project-edit-logo {
- display: flex;
- height: 8.5vh;
- margin-top: 20px;
+ display : flex;
+ height : 8.5vh;
+ margin-top : 20px;
margin-bottom: 30px;
form {
@@ -293,31 +316,31 @@ h5 {
.form-picture {
form {
- display: block;
- text-align: center;
+ display : block;
+ text-align : center;
margin-bottom: 2.6rem;
- padding-top: 1.8rem;
+ padding-top : 1.8rem;
@include breakpoint(lg) {
display: flex;
- width: 100%;
+ width : 100%;
}
hubl-user-avatar {
- display: inline-block;
- max-width: 100%;
+ display : inline-block;
+ max-width : 100%;
max-height: 16.5vh;
@include breakpoint(lg) {
margin-left: 20px;
- max-height: 8.5vh;
- max-width: none;
- width: calc(35vw - 20px);
+ max-height : 8.5vh;
+ max-width : none;
+ width : calc(35vw - 20px);
}
>object,
>img {
- display: block;
+ display : block;
max-height: 16.5vh !important;
@include breakpoint(lg) {
@@ -333,11 +356,11 @@ h5 {
.button-primary,
.bordered;
margin: 10px 0;
- width: 100%;
+ width : 100%;
@include breakpoint(lg) {
margin: auto 0 auto 2.2rem;
- width: auto;
+ width : auto;
}
}
}
@@ -372,95 +395,110 @@ h5 {
}
.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;
+ 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;
}
- .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;
- }
- @include breakpoint(lg) {
- display: none;
- }
+
+ @include breakpoint(lg) {
+ display: none;
}
- solid-display {
- @include breakpoint(sm) {
- float: left;
- }
+ }
+
+ 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;
- }
+ }
+
+ /* 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;
+ }
}
+ }
}
.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;
+ }
}
@@ -488,53 +526,60 @@ 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) {
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 5rem;
+ margin-top: 0;
}
- 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;
- }
+ }
+
+ 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;
}
.block {
@@ -542,44 +587,48 @@ h5 {
}
.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
@@ -588,6 +637,7 @@ h5 {
@import 'header';
@import 'menu-left';
@import 'user-thumb';
+
// Button global CSS
solid-delete,
solid-route,
@@ -597,178 +647,226 @@ input[type='submit'],
a,
.button {
background: none;
- border: none;
- cursor: pointer;
- display: inline-block;
- padding: 0;
+ border : none;
+ cursor : pointer;
+ display : inline-block;
+ padding : 0;
+
&.button {
- padding: 0.55rem 2.5rem;
+ padding : 0.55rem 2.5rem;
+ border-radius: 100em;
+
+ *,
+ & {
+ 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);
+
*,
& {
- 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;
- }
+ color: var(--color-white);
}
- &.text-bold {
- *,
- & {
- font-weight: bold;
- }
- }
- &.text-uppercase {
- *,
- & {
- text-transform: uppercase;
- }
+ }
+ }
+
+ &.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);
}
- &.rounded {
- border-radius: 50%;
- font-size: 1.8rem;
- padding: 1rem;
+ }
+ }
+
+ &.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);
}
- &.button-link {
- border-radius: 100em;
- *,
- & {
- text-decoration: underline;
- }
- &:hover {
- text-decoration: none;
- }
+
+ &:hover {
+ background-color: var(--color-white);
+ color : var(--color-primary);
+
+ *,
+ & {
+ color: var(--color-primary);
+ }
+
+ &.bordered {
+ border: 1px solid var(--color-primary);
+ }
}
- &.with-icon::before {
- font-size: 1.6rem;
- margin-right: 1rem;
+ }
+
+ &.button-secondary {
+ background-color: var(--color-secondary);
+
+ *,
+ & {
+ color: var(--color-white);
}
- &.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);
- }
- }
+
+ &:hover {
+ background-color: var(--color-white);
+
+ *,
+ & {
+ color: var(--color-secondary);
+ }
+
+ &.bordered {
+ border: 1px solid var(--color-secondary);
+ }
}
- &.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 {
+ background-color: var(--color-complementary);
+
+ *,
+ & {
+ color: var(--color-white);
}
- &.button-complementary {
+
+ &:hover {
+ background-color: var(--color-white);
+
+ *,
+ & {
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);
- }
- &: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);
- }
- }
- }
+ }
+
+ &.bordered {
+ border: 1px solid var(--color-complementary);
+ }
}
+ }
}
+ }
}
\ No newline at end of file
--
GitLab