improvement style button examles with examle actions

angular-a11y · Oct 23, 2024 · 604d04b · 604d04b
1 parent 98b5aa2
commit 604d04b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 38 deletions.
diff --git a/src/app/example/example.component.scss b/src/app/example/example.component.scss
@@ -1,3 +1,12 @@
+.example-actions {
+  width: 50%;
+  display: flex;
+  gap: 20px;
+  @media (max-width: 800px) {
+    width: 100%;
+  }
+}
+
 .lang-label {
   display: block;
   margin-bottom: 10px;

diff --git a/src/styles.scss b/src/styles.scss
@@ -23,22 +23,10 @@ html {
 body {
   min-height: 100vh;
   color: var(--color-text);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
+  transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Fira Sans",
-    "Droid Sans",
-    "Helvetica Neue",
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   font-size: 15px;
   text-rendering: optimizeLegibility;
@@ -60,9 +48,7 @@ body:after {
   height: 20px;
   background: var(--primary);
   background: linear-gradient(90deg, var(--primary) 50%, var(--secondary) 100%);
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.6),
-    0 0 20px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 20px rgba(0, 0, 0, 0.4);
 }
 
 body.modal-active {
@@ -80,11 +66,7 @@ body.darkmode {
 }
 
 .material-symbols-outlined {
-  font-variation-settings:
-    "FILL" 0,
-    "wght" 400,
-    "GRAD" 0,
-    "opsz" 24;
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
 }
 
 .darkmode-button {
@@ -109,9 +91,7 @@ h2 {
   margin: 1rem;
   border-radius: 10px;
   border: 1px solid var(--vtl-background);
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.2),
-    0 10px 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .content-actions {
@@ -124,7 +104,6 @@ h2 {
 
   @media (max-width: 620px) {
     flex-direction: column;
-    .button-voicecapture-example,
     .language {
       width: 100%;
       margin-top: 0;
@@ -164,18 +143,11 @@ h2 {
   }
 }
 
-.button-voicecapture-example {
-  background: var(--primary);
-  color: #fff;
-  margin-top: 1rem;
-  margin-left: 0;
-  padding: 1rem;
-}
-
 .button-voicecapture-example {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1rem;
+  min-height: 70px;
   white-space: nowrap;
   .material-symbols-outlined {
     margin-right: 0.5rem;
@@ -216,15 +188,13 @@ h2 {
   align-items: center;
 }
 
-
 @media (max-width: 620px) {
   .button-modal {
     margin-left: 0;
     margin-top: 1rem;
   }
 
-  .button-modal,
-  .button-voicecapture-example {
+  .button-modal {
     justify-content: start;
   }
 }