📱 - style: improve responsive design of Toolbar component

maykinmedia · Dec 16, 2024 · ee0d465 · ee0d465
1 parent 0e59819
commit ee0d465
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git a/src/components/form/form/form.scss b/src/components/form/form/form.scss
@@ -16,8 +16,4 @@
     flex-direction: row;
     width: auto;
   }
-
-  .mykn-toolbar .mykn-button {
-    justify-content: center !important;
-  }
 }
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
@@ -80,6 +80,7 @@
   }
 
   --typography-color-link: var(--typography-color-body);
+
   &--variant-primary {
     --toolbar-color-text-primary: var(--typography-color-background);
     background-color: var(--page-color-primary);
@@ -227,22 +228,6 @@
       height: 100%;
     }
 
-    &#{$self}--align-start .mykn-a,
-    &#{$self}--align-start .mykn-button,
-    &#{$self}--align-start .mykn-dropdown {
-      display: flex;
-      justify-content: start;
-      text-align: start;
-    }
-
-    &#{$self}--align-end .mykn-a,
-    &#{$self}--align-end .mykn-button,
-    &#{$self}--align-end .mykn-dropdown {
-      display: flex;
-      justify-content: end;
-      text-align: end;
-    }
-
     &#{$self}--align-center .mykn-a,
     &#{$self}--align-center .mykn-button,
     &#{$self}--align-center .mykn-dropdown,
@@ -279,6 +264,22 @@
         justify-content: space-between;
         text-align: center;
       }
+
+      &#{$self}--align-start .mykn-a,
+      &#{$self}--align-start .mykn-button,
+      &#{$self}--align-start .mykn-dropdown {
+        display: flex;
+        justify-content: start;
+        text-align: start;
+      }
+
+      &#{$self}--align-end .mykn-a,
+      &#{$self}--align-end .mykn-button,
+      &#{$self}--align-end .mykn-dropdown {
+        display: flex;
+        justify-content: end;
+        text-align: end;
+      }
     }
   }
 }