+
@@ -20,8 +21,17 @@ const props = defineProps
()
.button-group {
display: flex;
- justify-content: center;
flex-wrap: wrap;
+ margin: {
+ left: -$button-margin;
+ right: -$button-margin;
+ }
+
+ @each $align in (left, center, right) {
+ &.#{$align} {
+ justify-content: $align;
+ }
+ }
button {
margin: $button-margin;
@@ -32,15 +42,22 @@ const props = defineProps()
.button-group {
flex-direction: column;
+ margin: {
+ left: 0;
+ right: 0;
+ }
+
button {
margin: $button-margin 0;
width: 100%;
}
}
}
+
@include page-breakpoint(smaller) {
.button-group {
align-items: center;
+
button {
flex-grow: 1;
max-width: 80%;
diff --git a/frontend/src/scss/_variables.scss b/frontend/src/scss/_variables.scss
index 559b1db..18b82a2 100644
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@@ -11,6 +11,7 @@ $white: #ffffff;
// Colors
$variant-colors: (
primary: #e5287a,
+ secondary: $gray-light,
success: #4ba74b,
warning: #fdbc41,
danger: #ef5652,
@@ -18,6 +19,7 @@ $variant-colors: (
);
$variant-text-colors: (
primary: $black,
+ secondary: $black,
success: $black,
warning: $black,
danger: $black,
@@ -25,6 +27,7 @@ $variant-text-colors: (
);
$variant-color-primary: map-get($variant-colors, primary);
+$variant-color-secondary: map-get($variant-colors, secondary);
$variant-color-success: map-get($variant-colors, success);
$variant-color-warning: map-get($variant-colors, warning);
$variant-color-danger: map-get($variant-colors, danger);
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 7c8c93e..27c38fc 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -6,8 +6,15 @@ export enum ButtonSize {
LARGE = "large",
}
+export enum ComponentAlignment {
+ LEFT = "left",
+ CENTER = "center",
+ RIGHT = "right",
+}
+
export enum ComponentVariant {
PRIMARY = "primary",
+ SECONDARY = "secondary",
SUCCESS = "success",
WARNING = "warning",
DANGER = "danger",
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 2bb8a21..d5c0d35 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -2,7 +2,8 @@
import ActionButton from "@/components/form/ActionButton.vue";
import ButtonGroup from "@/components/form/ButtonGroup.vue";
import PageContainer from "@/components/page/PageContainer.vue";
-import {ButtonSize, ComponentVariant} from "@/types";
+import {ButtonSize, ComponentAlignment, ComponentVariant} from "@/types";
+
@@ -12,7 +13,7 @@ import {ButtonSize, ComponentVariant} from "@/types";
Knoten in Betrieb und möchtest seine Daten ändern? Oder Du möchtest einen Knoten, der nicht mehr in Betrieb
ist löschen? Dann bist Du hier richtig!
-
+