refactor(labeledIcons): adjust new tab labeled icon to figma and repl…

…ace px with rems
eea · Mar 30, 2022 · 904615d · 904615d
1 parent 9f9d3cb
commit 904615d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 81 deletions.
diff --git a/theme/themes/eea/extras/newTabLabeledIcon.less b/theme/themes/eea/extras/newTabLabeledIcon.less
@@ -4,72 +4,38 @@
 @import (multiple) '../../theme.config';
 
 /*******************************
-        Download Labeled Icon
+      New Tab Labeled Icon
 *******************************/
 .eea.new.tab.labeled.icon {
-  width: @newTabLabeledIconWidth;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  width: @newTabLabeledIconWidth;
+  min-width: @newTabLabeledIconMinWidth;
+  text-align: @newTabLabeledIconTextAlign;
+
   .label {
     width: @newTabLabeledIconLabelWidth;
     font-size: @newTabLabeledIconLabelFontSize;
     color: @newTabLabeledIconLabelColor;
     cursor: pointer;
   }
+
   .icon.wrapper {
-    width: @newTabLabeledIconIconWrapperWidth;
     text-align: center;
     display: flex;
     justify-content: center;
-    padding: 8px;
+    width: @newTabLabeledIconIconWrapperWidth;
+    padding: @newTabLabeledIconWrapperPadding;
+
     .icon {
       cursor: pointer;
-      font-size: @newTabLabeledIconIconFontSize;
-      color: @mediumPersianBlue;
       display: flex;
+      align-items: center;
+      font-size: @newTabLabeledIconIconFontSize;
+      color: @newTabLabeledIconColor;
       width: @newTabLabeledIconIconWidth;
       height: @newTabLabeledIconWrapperIconHeight;
-      align-items: center;
-    }
-  }
-
-  .dropdown {
-    width: @newTabLabeledIconDropdownWIdth;
-
-    .link.wrapper {
-      position: absolute;
-      cursor: pointer;
-      background-color: @newTabLabeledIconLinkWrapperBackgroundColor;
-      z-index: @newTabLabeledIconLinkWrapperZIndex;
-      margin-right: @newTabLabeledIconLinkWrapperMarginRight;
-      width: @newTabLabeledIconLinkWrapperWidth;
-      padding-left: @newTabLabeledIconLinkWrapperPaddingLeft;
-      padding-top: @newTabLabeledIconLinkWrapperPaddingTop;
-      ul {
-        list-style-type: none;
-        margin-block-start: @newTabLabeledIconUlMarginBlockStart;
-        padding-inline-start: @newTabLabeledIconUlPaddingInlineStart;
-        a {
-          display: flex;
-          justify-content: space-around;
-          font-weight: @newTabLabeledIconALinkFontWeight;
-          font-size: @newTabLabeledIconLinkFontSize;
-          .icon {
-            font-size: @newTabLabeledIconLinkIconFontSize;
-            line-height: @newTabLabeledIconLinkIconLineHeight;
-          }
-        }
-        a:hover {
-          color: @newTabLabeledIconALinkColorHover;
-        }
-        li:hover {
-          background-color: @newTabLabeledIconLiHover;
-        }
-      }
-    }
-    .link.wrapper.hidden {
-      display: none;
     }
   }
 }
diff --git a/theme/themes/eea/extras/newTabLabeledIcon.variables b/theme/themes/eea/extras/newTabLabeledIcon.variables
@@ -1,48 +1,23 @@
 /*******************************
-        Download Labeled Icon
+        New Tab Labeled Icon
 *******************************/
 
 /* Body */
-@newTabLabeledIconWidth: 103px;
+@newTabLabeledIconWidth: min-content;
+@newTabLabeledIconMinWidth: 7rem;
+@newTabLabeledIconTextAlign: center;
 
 /* Label */
 @newTabLabeledIconLabelWidth: 100%;
-@newTabLabeledIconLabelFontSize: 14px;
+@newTabLabeledIconLabelFontSize: 0.875rem;
 @newTabLabeledIconLabelColor: @deepBlue;
-
-/* Extra */
-@newTabLabeledIconWrapperWidth: 100%;
-@newTabLabeledIconWrapperBorderTop: 0px;
-@newTabLabeledIconWrapperColor: @white;
-@newTabLabeledIconWrapperFontSize: 14px;
+@newTabLabeledIconColor: @mediumPersianBlue;
 
 /* Icon Wrapper */
 @newTabLabeledIconIconWrapperWidth: 100%;
+@newTabLabeledIconWrapperPadding: 0.5rem;
 
 /* Icon */
-@newTabLabeledIconIconFontSize: 25px;
-@newTabLabeledIconWrapperIconHeight: 20px;
-@newTabLabeledIconIconWidth: 19px;
-
-/* Link Wrapper */
-@newTabLabeledIconLinkWrapperBackgroundColor: #f9f9f9;
-@newTabLabeledIconLinkWrapperZIndex: 1;
-@newTabLabeledIconLinkWrapperMarginRight: 2.1em;
-@newTabLabeledIconLinkWrapperWidth: 4em;
-@newTabLabeledIconLinkWrapperPaddingLeft: 9px;
-@newTabLabeledIconLinkWrapperPaddingTop: 5px;
-
-/* Dropdown */
-@newTabLabeledIconDropdownWIdth: 100%;
-
-/* List */
-@newTabLabeledIconUlMarginBlockStart: 0;
-@newTabLabeledIconUlPaddingInlineStart: 0px;
-@newTabLabeledIconLiHover: @deepBlue;
-
-/* Link */
-@newTabLabeledIconALinkFontWeight: 700;
-@newTabLabeledIconLinkFontSize: 14px;
-@newTabLabeledIconLinkIconFontSize: 16px;
-@newTabLabeledIconLinkIconLineHeight: 20px;
-@newTabLabeledIconALinkColorHover: @white;
+@newTabLabeledIconIconFontSize: 1.563rem;
+@newTabLabeledIconWrapperIconHeight: 1.25rem;
+@newTabLabeledIconIconWidth: 1.25rem;