aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/fields
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/fields')
-rw-r--r--frontend/src/components/fields/ButtonField.scss3
-rw-r--r--frontend/src/components/fields/CheckField.scss6
-rw-r--r--frontend/src/components/fields/ChoiceField.scss16
-rw-r--r--frontend/src/components/fields/InputField.scss44
-rw-r--r--frontend/src/components/fields/TextField.scss18
-rw-r--r--frontend/src/components/fields/common.scss31
-rw-r--r--frontend/src/components/fields/extensions/ColorField.scss8
-rw-r--r--frontend/src/components/fields/extensions/NumericField.js2
8 files changed, 63 insertions, 65 deletions
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss
index cfd20ff..9e46b9f 100644
--- a/frontend/src/components/fields/ButtonField.scss
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
.button-field {
font-size: 0.9em;
@@ -119,5 +119,4 @@
background-color: $color-green-dark;
}
}
-
}
diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss
index ab932b4..14c547e 100644
--- a/frontend/src/components/fields/CheckField.scss
+++ b/frontend/src/components/fields/CheckField.scss
@@ -1,12 +1,12 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
.check-field {
font-size: 0.9em;
margin: 5px 0;
.field-input {
- border-radius: 5px;
width: fit-content;
+ border-radius: 5px;
background-color: $color-primary-2;
input {
@@ -25,8 +25,8 @@
}
&.field-checked .field-input {
- background-color: $color-primary-4 !important;
color: $color-primary-3;
+ background-color: $color-primary-4 !important;
}
&.field-small {
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index e7683b7..0b5e510 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
.choice-field {
font-size: 0.9em;
@@ -12,29 +12,29 @@
margin-top: 5px;
.field-value {
- background-color: $color-primary-2;
- border: none;
- color: $color-primary-4;
- border-radius: 5px;
padding: 7px 25px 7px 10px;
cursor: pointer;
+ color: $color-primary-4;
+ border: none;
+ border-radius: 5px;
+ background-color: $color-primary-2;
&:after {
- content: "⋎";
position: absolute;
right: 10px;
+ content: "⋎";
}
}
.field-options {
position: absolute;
+ z-index: 20;
top: 35px;
+ display: none;
width: 100%;
- z-index: 20;
border-top: 3px solid $color-primary-0;
border-radius: 5px;
background-color: $color-primary-2;
- display: none;
.field-option {
display: block;
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss
index 79e2b7e..7cc34d9 100644
--- a/frontend/src/components/fields/InputField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
.input-field {
font-size: 0.9em;
@@ -15,13 +15,13 @@
.field-value {
.file-label {
- background-color: $color-primary-2;
- margin: 0;
width: 100%;
- color: $color-primary-4;
- border-radius: 5px;
+ margin: 0;
padding: 7px 10px;
cursor: pointer;
+ color: $color-primary-4;
+ border-radius: 5px;
+ background-color: $color-primary-2;
}
input[type="file"] {
@@ -29,27 +29,27 @@
}
.file-label:after {
- content: "Browse";
position: absolute;
- right: 0;
top: 0;
+ right: 0;
padding: 7px 10px 7px 12px;
- background-color: $color-primary-1;
- border-bottom-right-radius: 5px;
+ content: "Browse";
border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ background-color: $color-primary-1;
}
}
}
&.field-active {
&.field-inline .field-name {
- background-color: $color-primary-4 !important;
color: $color-primary-3 !important;
+ background-color: $color-primary-4 !important;
}
.field-value input, .field-value .file-label {
- background-color: $color-primary-4 !important;
color: $color-primary-3 !important;
+ background-color: $color-primary-4 !important;
}
.file-label:after {
@@ -59,13 +59,13 @@
&.field-invalid {
&.field-inline .field-name {
- background-color: $color-secondary-2 !important;
color: $color-primary-4 !important;
+ background-color: $color-secondary-2 !important;
}
.field-value input, .field-value .file-label {
- background-color: $color-secondary-2 !important;
color: $color-primary-4 !important;
+ background-color: $color-secondary-2 !important;
}
.file-label:after {
@@ -81,19 +81,19 @@
display: flex;
.field-name {
- background-color: $color-primary-2;
padding: 6px 7px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
+ background-color: $color-primary-2;
}
.field-input {
width: 100%;
input, .file-label {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
padding-left: 3px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
}
}
@@ -103,14 +103,14 @@
}
.field-clear {
- position: absolute;
- right: 8px;
- top: 8px;
- z-index: 10;
font-size: 0.9em;
font-weight: 600;
- letter-spacing: -0.5px;
+ position: absolute;
+ z-index: 10;
+ top: 8px;
+ right: 8px;
cursor: pointer;
+ letter-spacing: -0.5px;
}
&.field-active .field-clear {
@@ -118,8 +118,8 @@
}
.field-error {
- padding: 5px 10px;
font-size: 0.9em;
+ padding: 5px 10px;
color: $color-secondary-0;
}
}
diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss
index de831fb..c2d6ef5 100644
--- a/frontend/src/components/fields/TextField.scss
+++ b/frontend/src/components/fields/TextField.scss
@@ -1,4 +1,4 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
.text-field {
font-size: 0.9em;
@@ -15,15 +15,15 @@
&.field-active {
textarea {
- background-color: $color-primary-4 !important;
color: $color-primary-3 !important;
+ background-color: $color-primary-4 !important;
}
}
&.field-invalid {
textarea {
- background-color: $color-secondary-2 !important;
color: $color-primary-4 !important;
+ background-color: $color-secondary-2 !important;
}
}
@@ -32,14 +32,14 @@
}
.field-clear {
- position: absolute;
- right: 8px;
- top: 8px;
- z-index: 10;
font-size: 0.9em;
font-weight: 600;
- letter-spacing: -0.5px;
+ position: absolute;
+ z-index: 10;
+ top: 8px;
+ right: 8px;
cursor: pointer;
+ letter-spacing: -0.5px;
}
&.field-active .field-clear {
@@ -47,8 +47,8 @@
}
.field-error {
- padding: 5px 10px;
font-size: 0.9em;
+ padding: 5px 10px;
color: $color-secondary-0;
}
}
diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss
index f83a988..f37369e 100644
--- a/frontend/src/components/fields/common.scss
+++ b/frontend/src/components/fields/common.scss
@@ -1,48 +1,47 @@
-@import '../../colors.scss';
+@import "../../colors.scss";
.field {
-
input, textarea {
- background-color: $color-primary-2;
width: 100%;
- border: none;
+ padding: 7px 10px;
color: $color-primary-4;
+ border: none;
border-radius: 5px;
- padding: 7px 10px;
+ background-color: $color-primary-2;
&:focus {
- background-color: $color-primary-1;
color: $color-primary-4;
- box-shadow: none;
outline: none;
+ background-color: $color-primary-1;
+ box-shadow: none;
}
&[readonly] {
- background-color: $color-primary-2;
- border: none;
color: $color-primary-4;
+ border: none;
+ background-color: $color-primary-2;
}
&[readonly]:focus {
- background-color: $color-primary-1;
color: $color-primary-4;
+ background-color: $color-primary-1;
box-shadow: none;
}
}
button {
- border-radius: 0;
- background-color: $color-primary-2;
- border: none;
+ font-weight: 500;
+ padding: 5px 12px;
color: $color-primary-4;
+ border: none;
+ border-radius: 0;
outline: none;
- padding: 5px 12px;
- font-weight: 500;
+ background-color: $color-primary-2;
&:hover,
&:active {
- background-color: $color-primary-1;
color: $color-primary-4;
+ background-color: $color-primary-1;
}
&:focus,
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
index 6eabbda..26b21f1 100644
--- a/frontend/src/components/fields/extensions/ColorField.scss
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -1,4 +1,4 @@
-@import '../../../colors.scss';
+@import "../../../colors.scss";
.color-field {
.color-input {
@@ -9,8 +9,8 @@
flex: 1;
input {
- border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
}
}
@@ -20,8 +20,8 @@
.picker-button {
font-size: 0.8em;
padding: 8px 15px;
- border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
background-color: $color-primary-1;
}
}
@@ -29,8 +29,8 @@
.color-error {
font-size: 0.8em;
- color: $color-secondary-0;
margin-left: 10px;
+ color: $color-secondary-0;
}
}
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
index ed81ed7..19a9e46 100644
--- a/frontend/src/components/fields/extensions/NumericField.js
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -21,7 +21,7 @@ class NumericField extends Component {
value = value.toString().replace(/[^\d]/gi, '');
let intValue = 0;
if (value !== "") {
- intValue = parseInt(value);
+ intValue = parseInt(value, 10);
}
const valid =
(!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-26 01:07:18 +0000