From 5247347c250611cfbcc04b88251d40fcb7fe9cbf Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <lsanfilippo@techfak.uni-bielefeld.de>
Date: Thu, 14 Nov 2024 16:42:29 +0100
Subject: [PATCH] buttons entkompliziert
---
src/App/App.css | 94 +++++++++++++-------------------------
src/components/Buttons.tsx | 17 ++-----
2 files changed, 34 insertions(+), 77 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 7779d881..78e76412 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -63,6 +63,12 @@
--node-size: 60px;
--simple-margin: 20px;
+ --small-margin: 10px;
+ --simple-padding: 20px;
+ --small-padding: 10px;
+ --button-padding: 5px;
+ --border-radius: 10px;
+
}
html{
scroll-behavior: smooth;
@@ -620,28 +626,8 @@ footer a:hover {
}
-/* * * * * * * * */
-/* * *BUTTONS* * */
-/* * * * * * * * */
-
-button:hover{
- filter: brightness(0.5);
-}
-button {
- margin-top: 20px;
-}
- .btn1{
-
- padding: 5px;
- border-radius: 10px;
- padding-left: 10px;
- padding-right: 10px;
- margin-left: 5px;
- margin-right: 5px;
-}
-
/* * * * * * * * */
/*VILLAGE BUTTONS*/
/* * * * * * * * */
@@ -3080,52 +3066,38 @@ span{
}
-div[class*="boxy"] {
- height: 33.33%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- margin: auto;
-}
-.boxy-1 {
- background: var(--ourgradient);
- max-width: fit-content;
-}
-.boxy-2 {
- background-color: var(--text-primary);
- max-width: fit-content;
-}
-.boxy-3 {
- background-color: var(--text-primary);
- max-width: fit-content;
-}
-
-.btn-new {
- line-height: 50px;
- height: 50px;
- text-align: center;
- width: 250px;
- cursor: pointer;
-}
/*
========================
- BUTTON ONE
+ BUTTONS
========================
*/
+button {
+ margin-top: var(--simple-margin) !important;
+ margin-bottom: var(--simple-margin) !important;
+ border-radius: var(--border-radius) !important;
+ cursor: pointer;
+ text-align: center;
+}
+ .btn1{
+ padding: var(--button-padding) var(--small-padding) !important;
+}
+.btn1:hover{
+ filter: brightness(0.5);
+}
.boxy-1{
border-radius: 10px;
}
.btn-one {
+ border-style: none;
+ padding: var(--small-padding) var(--simple-padding) !important;
+ background: var(--ourgradient);
color: var(--ourbeige);
transition: all 0.3s;
position: relative;
}
-.btn-one span {
- transition: all 0.3s;
-}
+
.btn-one::before {
content: "";
position: absolute;
@@ -3144,13 +3116,7 @@ div[class*="boxy"] {
border-bottom-color: rgba(255, 255, 255, 0.5);
transform: scale(0.1, 1);
}
-.btn-one:hover span {
- letter-spacing: 2px;
-}
-.btn-one:hover::before {
- opacity: 1;
- transform: scale(1, 1);
-}
+
.btn-one::after {
content: "";
position: absolute;
@@ -3187,7 +3153,13 @@ div[class*="boxy"] {
transition: all 0.1s linear;
}
+.svg-button:hover{
+ cursor: pointer;
+}
+/*
+=======================================================
+*/
.cls-1{fill:#c8d5ea;}
.cls-2{fill:#e8f1f9;opacity:0.43;}
@@ -3204,10 +3176,6 @@ div[class*="boxy"] {
.cls-12{stroke:#7913e5;}.cls-13{fill:#7913e5;}
-.svg-button:hover{
- cursor: pointer;
-}
-
.rotate-linear-infinite{
animation: rotation 20s;
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index 482f1125..f9f03103 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -180,11 +180,7 @@ export function ButtonOne({text, open, openclass}: {text:string, open:string, op
if (openclass) {
return(
<div className="boxy-1">
- <a onClick={() => goToPagesAndOpenTab(open, "")}>
- <div className="btn-new btn-one">
- {text}
- </div>
- </a>
+
</div>
)
@@ -192,10 +188,7 @@ export function ButtonOne({text, open, openclass}: {text:string, open:string, op
else{
return(
<div className="boxy-1">
- <span typeof="button" onClick={openFromOtherPage(open)}>
- <div className="btn-new btn-one">
- {text}
- </div></span>
+ <button className="btn-one" onClick={() => openFromOtherPage(open)}>{text}</button>
</div>
)
}
@@ -206,11 +199,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
if (openclass) {
return(
<div className="boxy-1">
- <a onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>
- <div className="btn-new btn-one">
- {text}
- </div>
- </a>
+ <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>{text}</button>
</div>
)
}
--
GitLab