fix(DIST-548): Make side tab button reponsive to text (#109)

fix(DIST-548): Make side tab button reponsive to text
Typeform · Nov 30, 2020 · 8c47406 · 8c47406
1 parent 54ffb27
commit 8c47406
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 60 deletions.
diff --git a/demo/popup-api.html b/demo/popup-api.html
@@ -13,9 +13,10 @@
         text-decoration: underline;
       }
 
-      /* CSS for wrapper is required */
+       /* CSS for wrapper is required */
       .side-panel-wrapper {
-        top: calc(50% - 300px); /* needs to be set manually based on popup size */
+        top: calc(50% - 300px);
+        /* needs to be set manually based on popup size */
         right: 0;
         position: fixed;
         transition: width 300ms ease-out;
@@ -24,35 +25,47 @@
 
       .side-panel {
         position: absolute;
-        top: 300px; /* needs to be set manually based on button size */
-        width: 300px; /* needs to be set manually based on button size */
-        height: 40px;
+        top: 0;
+        left: 0;
+        margin: 0 auto;
+        /* needs to be set manually based on button size */
+        top: 300px;
+        max-height: 40px;
         background: #427fed;
         color: white;
-        padding: 0 20px;
+        white-space: nowrap;
+        padding: 8px 16px;
         margin: 0;
         text-decoration: none;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
         cursor: pointer;
         transform: rotate(-90deg);
         transform-origin: bottom left;
       }
 
-      .side-panel > .icon {
+      .side-panel>.icon {
         position: relative;
-        align-items: center;
-        justify-content: center;
-        display: flex;
-        width: 40px;
-        height: 40px;
-        margin-right: 10px;
+        display: block;
+        margin-right: 12px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .side-panel>.icon>svg {
+        width: 100%;
+        height: 100%;
+        transform: rotate(90deg);
+      }
+
+      .side-panel img {
+        position: relative;
+        top: -4px;
       }
 
-      .side-panel > .icon > svg {
-        transform-origin: left;
-        transform: translate(10px,-15px) rotate(90deg)
+      .side-panel>span {
+        flex-grow: 1;
       }
 
       .popover {
@@ -119,7 +132,7 @@
     <div class="side-panel-wrapper">
       <a id="btn-side_panel" class="side-panel">
         <span class="icon">
-          <svg width="24" height="24" fill="none" style="margin-top:7px" viewBox="0 0 84 83">
+          <svg fill="none" viewBox="0 0 84 83">
             <rect width="84" height="56" fill="#fff" rx="8" />
             <path fill="#fff" d="M43 50h41v33L43 50z" opacity=".7" />
           </svg>

diff --git a/demo/popup.html b/demo/popup.html
@@ -10,47 +10,60 @@
         display: block;
       }
 
-      /* CSS for wrapper is required */
-      .side-panel-wrapper {
-        top: calc(50% - 300px); /* needs to be set manually based on popup size */
-        right: 0;
-        position: fixed;
-        transition: width 300ms ease-out;
-        width: 0;
-      }
-
-      .side-panel {
-        position: absolute;
-        top: 300px; /* needs to be set manually based on button size */
-        width: 300px; /* needs to be set manually based on button size */
-        height: 40px;
-        background: #427fed;
-        color: white;
-        padding: 0 20px;
-        margin: 0;
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transform: rotate(-90deg);
-        transform-origin: bottom left;
-      }
-
-      .side-panel > .icon {
-        position: relative;
-        align-items: center;
-        justify-content: center;
-        display: flex;
-        width: 40px;
-        height: 40px;
-        margin-right: 10px;
-      }
-
-      .side-panel > .icon > svg {
-        transform-origin: left;
-        transform: translate(10px,-15px) rotate(90deg)
-      }
+       /* CSS for wrapper is required */
+    .side-panel-wrapper {
+      top: calc(50% - 300px);
+      /* needs to be set manually based on popup size */
+      right: 0;
+      position: fixed;
+      transition: width 300ms ease-out;
+      width: 0;
+    }
+
+    .side-panel {
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0 auto;
+      /* needs to be set manually based on button size */
+      top: 300px;
+      max-height: 40px;
+      background: #427fed;
+      color: white;
+      white-space: nowrap;
+      padding: 8px 16px;
+      margin: 0;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      cursor: pointer;
+      transform: rotate(-90deg);
+      transform-origin: bottom left;
+    }
+
+    .side-panel>.icon {
+      position: relative;
+      display: block;
+      margin-right: 12px;
+      width: 24px;
+      height: 24px;
+    }
+
+    .side-panel>.icon>svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(90deg);
+    }
+
+    .side-panel img {
+      position: relative;
+      top: -4px;
+    }
+
+    .side-panel>span {
+      flex-grow: 1;
+    }
 
       .popover {
         width: 54px;
@@ -189,7 +202,7 @@
         target="_blank"
       >
         <span class="icon">
-          <svg width="24" height="24" fill="none" style="margin-top:7px" viewBox="0 0 84 83">
+          <svg fill="none" viewBox="0 0 84 83">
             <rect width="84" height="56" fill="#fff" rx="8" />
             <path fill="#fff" d="M43 50h41v33L43 50z" opacity=".7" />
           </svg>