mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-01-18 07:52:23 +01:00
(style) Use of CSS variables for main and secondary colors in react components styles
This commit is contained in:
Sylvain
parent
0e4d2cbdcb
commit
6d1852252b
@ -15,6 +15,7 @@
|
||||
- Updated nodejs version to 16.13.2 for dev environment, to reflect production version
|
||||
- Changed the apparence of the modal dialogs (React): no more logo and the close button appears in full-text in the top right corner.
|
||||
- Use react-hook-form to manage and validate forms
|
||||
- Use of CSS variables for main and secondary colors in react components styles
|
||||
- New text editor
|
||||
- Change font family to "Work Sans"
|
||||
- Updated eslint to v8 and eslint related packages to their latest versions
|
||||
@ -31,6 +32,7 @@
|
||||
- Fix a security issue: updated ruby to 2.6.10 to fix [CVE-2022-28739](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2022-28739)
|
||||
- Fix a security issue: updated rails to 5.2.7.1 to fix [CVE-2022-22577](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2022-22577) and [CVE-2022-27777](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2022-27777)
|
||||
- [TODO DEPLOY] `rails db:seed`
|
||||
- [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet`
|
||||
|
||||
## v5.3.13 2022 May 02
|
||||
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
Application.Controllers.controller('PlansIndexController', ['$scope', '$rootScope', '$state', '$uibModal', 'Auth', 'AuthService', 'dialogs', 'growl', 'groupsPromise', 'Subscription', 'Member', 'subscriptionExplicationsPromise', '_t', 'Wallet', 'helpers', 'settingsPromise', 'Price',
|
||||
function ($scope, $rootScope, $state, $uibModal, Auth, AuthService, dialogs, growl, groupsPromise, Subscription, Member, subscriptionExplicationsPromise, _t, Wallet, helpers, settingsPromise, Price) {
|
||||
Application.Controllers.controller('PlansIndexController', ['$scope', '$rootScope', '$state', '$uibModal', 'Auth', 'AuthService', 'dialogs', 'growl', 'Subscription', 'Member', 'subscriptionExplicationsPromise', '_t', 'Wallet', 'helpers', 'settingsPromise', 'Price',
|
||||
function ($scope, $rootScope, $state, $uibModal, Auth, AuthService, dialogs, growl, Subscription, Member, subscriptionExplicationsPromise, _t, Wallet, helpers, settingsPromise, Price) {
|
||||
/* PUBLIC SCOPE */
|
||||
|
||||
// user to deal with
|
||||
|
||||
@ -103,6 +103,27 @@
|
||||
.modal-btn {
|
||||
&--confirm {
|
||||
margin-left: 0.5em;
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-text-color);
|
||||
border-color: var(--secondary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--secondary-dark);
|
||||
border-color: var(--secondary-dark);
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: var(--secondary-light);
|
||||
color: var(--secondary-lightest);
|
||||
border-color: var(--secondary-lightest);
|
||||
}
|
||||
|
||||
&[disabled]:hover {
|
||||
background-color: var(--secondary-light);
|
||||
color: var(--secondary-lightest);
|
||||
border-color: var(--secondary-lightest);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,6 +121,7 @@
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
border-radius: 4px;
|
||||
color: var(--main);
|
||||
|
||||
& > i {
|
||||
margin-right: 5px;
|
||||
|
||||
@ -25,6 +25,8 @@
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
&.with-addon {
|
||||
border-radius: 4px 0 0 4px;;
|
||||
|
||||
@ -35,6 +35,9 @@
|
||||
}
|
||||
.save-currency {
|
||||
margin: 34px 15px 5px;
|
||||
background-color: var(--secondary);
|
||||
border-color: var(--secondary);
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,4 +27,11 @@
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.add-category,
|
||||
.add-category:hover {
|
||||
background-color: var(--secondary-dark);
|
||||
border-color: var(--secondary-dark);
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,6 +90,11 @@
|
||||
background-color: white;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
border-color: var(--secondary);
|
||||
|
||||
&.selected-card {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
button.subscribe-button:focus, button.subscribe-button:hover {
|
||||
outline: 0;
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
z-index: -1;
|
||||
margin: -$border;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(to left, white, var(--main), white);
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,6 +36,8 @@
|
||||
width: 50%;
|
||||
margin: 2em auto;
|
||||
line-height: 3em;
|
||||
background-color: var(--main);
|
||||
color: var(--main-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -45,4 +45,9 @@
|
||||
--warning: #D6AE47;
|
||||
--warning-dark: #8C6D1F;
|
||||
--warning-darkest: #5C4813;
|
||||
|
||||
--main-text-color: black;
|
||||
--secondary-text-color: black;
|
||||
|
||||
--main-decoration-color: black;
|
||||
}
|
||||
|
||||
@ -13,22 +13,22 @@ $secondary-text-color: <%= Stylesheet.secondary_text_color %> !default;
|
||||
$primary-decoration-color: <%= Stylesheet.primary_decoration_color %> !default;
|
||||
|
||||
:root {
|
||||
--main-lightest: lighten(<%= Stylesheet.primary_light %>, 20%);
|
||||
--main-light: <%= Stylesheet.primary_light %>;
|
||||
--main: <%= Stylesheet.primary %>;
|
||||
--main-dark: <%= Stylesheet.primary_dark %>;
|
||||
--main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%);
|
||||
--main-lightest: lighten(<%= Stylesheet.primary_light %>, 20%) !important;
|
||||
--main-light: <%= Stylesheet.primary_light %> !important;
|
||||
--main: <%= Stylesheet.primary %> !important;
|
||||
--main-dark: <%= Stylesheet.primary_dark %> !important;
|
||||
--main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%) !important;
|
||||
|
||||
--secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%);
|
||||
--secondary-light: <%= Stylesheet.secondary_light %>;
|
||||
--secondary: <%= Stylesheet.secondary %>;
|
||||
--secondary-dark: <%= Stylesheet.secondary_dark %>;
|
||||
--secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%);
|
||||
--secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%) !important;
|
||||
--secondary-light: <%= Stylesheet.secondary_light %> !important;
|
||||
--secondary: <%= Stylesheet.secondary %> !important;
|
||||
--secondary-dark: <%= Stylesheet.secondary_dark %> !important;
|
||||
--secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%) !important;
|
||||
|
||||
--primary-text-color: <%= Stylesheet.primary_text_color %>;
|
||||
--secondary-text-color: <%= Stylesheet.secondary_text_color %>;
|
||||
--main-text-color: <%= Stylesheet.primary_text_color %> !important;
|
||||
--secondary-text-color: <%= Stylesheet.secondary_text_color %> !important;
|
||||
|
||||
--primary-decoration-color: <%= Stylesheet.primary_decoration_color %>;
|
||||
--main-decoration-color: <%= Stylesheet.primary_decoration_color %> !important;
|
||||
}
|
||||
|
||||
.bg-red {
|
||||
@ -297,9 +297,6 @@ a.label:focus,
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.about-picture {
|
||||
}
|
||||
|
||||
.social-icons > div:hover {
|
||||
background-color: $secondary;
|
||||
color: $secondary-text-color;
|
||||
@ -321,102 +318,3 @@ section#cookies-modal div.cookies-consent .cookies-actions button.accept {
|
||||
background-color: $secondary;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
.plans-list {
|
||||
.group-title:before {
|
||||
background: linear-gradient(to left, white, $primary, white);
|
||||
}
|
||||
.category-title {
|
||||
background-color: $primary;
|
||||
color: $primary-text-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
.card-footer {
|
||||
.cta-button {
|
||||
button.subscribe-button {
|
||||
border-color: $secondary;
|
||||
|
||||
&.selected-card {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fab-modal {
|
||||
.fab-modal-footer {
|
||||
.modal-btn--confirm {
|
||||
& {
|
||||
background-color: $secondary;
|
||||
color: $secondary-text-color;
|
||||
border-color: $secondary
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-dark;
|
||||
border-color: $secondary-dark;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: $secondary-light;
|
||||
color: $secondary-lighter;
|
||||
border-color: $secondary-lighter;
|
||||
}
|
||||
|
||||
&[disabled]:hover {
|
||||
background-color: $secondary-light;
|
||||
color: $secondary-lighter;
|
||||
border-color: $secondary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payzen-keys-form {
|
||||
fieldset > legend {
|
||||
background-color: $secondary;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.payzen-settings {
|
||||
.payzen-currency {
|
||||
.payzen-currency-form {
|
||||
.save-currency {
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plan-categories-list {
|
||||
.add-category,
|
||||
.add-category:hover {
|
||||
background-color: $secondary-dark;
|
||||
border-color: $secondary-dark;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.machine-card {
|
||||
.machine-actions {
|
||||
button {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.propose-packs-modal {
|
||||
.list-of-packs {
|
||||
.pack {
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user