Merge pull request #364 from ably/meganav-fix-and-spacing-utilities

Add basic spacing utilities and fix meganav/slider alignments
ably · Jun 10, 2024 · ae71438 · ae71438
2 parents 745e302 + b9e64f8
commit ae71438
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.0.3",
+  "version": "14.0.3-dev.7b5c832",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/src/core/MeganavItemsMobile.tsx b/src/core/MeganavItemsMobile.tsx
@@ -37,7 +37,7 @@ const MeganavItemsMobile = ({
   const classNames = `ui-meganav-link ${theme.textColor}`;
 
   return (
-    <ul className="flex md:hidden" data-id="meganav-items-mobile">
+    <ul className="flex md:hidden items-center" data-id="meganav-items-mobile">
       <li>
         {sessionState?.signedIn && sessionState?.logOut ? (
           <SignOutLink absUrl={absUrl} {...sessionState.logOut}>

diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx
@@ -183,7 +183,7 @@ const Slider = ({ children, options }: SliderProps) => {
           } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}
           onClick={prev}
         >
-          <div className="ui-icon-cta-holder flex gap-4">
+          <div className="ui-icon-cta-holder flex w-48">
             <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
               <Icon name="icon-gui-arrow-left" size="1.5rem" />
             </div>
@@ -207,7 +207,7 @@ const Slider = ({ children, options }: SliderProps) => {
           } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}
           onClick={next}
         >
-          <div className="ui-icon-cta-holder flex gap-4">
+          <div className="ui-icon-cta-holder flex w-48">
             <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
               <Icon name="icon-gui-arrow-right" size="1.5rem" />
             </div>

diff --git a/src/core/Slider/component.css b/src/core/Slider/component.css
@@ -23,10 +23,10 @@
 
   @screen sm {
     .ui-icon-cta-left:hover .ui-icon-cta-holder {
-      transform: translateX(-120%);
+      transform: translateX(-100%);
     }
     .ui-icon-cta-right .ui-icon-cta-holder {
-      transform: translateX(-120%);
+      transform: translateX(-100%);
     }
     .ui-icon-cta-right:hover .ui-icon-cta-holder {
       transform: translateX(0%);

diff --git a/src/core/styles.components.css b/src/core/styles.components.css
@@ -32,4 +32,12 @@
     margin-left: 3px;
     font-size: 8px;
   }
+
+  .ui-section-spacing {
+    @apply py-80 sm:py-96 md:py-128;
+  }
+
+  .ui-divider-spacing {
+    @apply my-20 sm:my-24 md:my-32;
+  }
 }