Using tokens to define responsive width

vtex-apps · Mar 21, 2019 · 1177f80 · 1177f80
1 parent 01af34c
commit 1177f80
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/react/components/LoginAsCustomer.tsx b/react/components/LoginAsCustomer.tsx
@@ -55,7 +55,7 @@ const LoginAsCustomer = (props: Props) => {
   )
 
   return (
-    <div className={`${styles.login} ${mobile && 'w-50'}`}>
+    <div className={`${styles.login} w-50 flex flex-row-reverse-ns flex-row-s`}>
       <Popover
         arrowClasses="bg-base--inverted"
         renderHeader={handleHeaderRendering}

diff --git a/react/components/Popover.tsx b/react/components/Popover.tsx
@@ -34,10 +34,10 @@ const Popover = (props: Props) => {
 
   const boxClasses = classnames(
     styles.popoverBox,
-    'absolute top-2 z-max bb b--muted-3',
+    'absolute-ns top-2 z-max bb b--muted-3 fixed-s',
     isBoxOpen ? 'flex' : 'dn',
     {
-      'fixed left-0 right-0': mobile,
+      'left-0 right-0': mobile,
     }
   )