refactor(labeledIcons): adjust language labeled icon to figma

eea · Mar 30, 2022 · 5741e3d · 5741e3d
1 parent 904615d
commit 5741e3d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/theme/themes/eea/extras/languageLabeledIcon.less b/theme/themes/eea/extras/languageLabeledIcon.less
@@ -12,14 +12,16 @@
   flex-direction: column;
   align-items: center;
   width: @languageLabeledIconWidth;
+  min-width: @languageLabeledIconMinWidth;
+  text-align: @languageLabeledIconTextAlign;
 
   .icon.wrapper {
-    font-size: @languageLabeledIconIconWrapperFontSize;
-    font-weight: @languageLabeledIconIconWrapperFontWeight;
-    color: @languageLabeledIconIconWrapperColor;
     cursor: pointer;
     display: flex;
     align-items: center;
+    font-size: @languageLabeledIconIconWrapperFontSize;
+    font-weight: @languageLabeledIconIconWrapperFontWeight;
+    color: @languageLabeledIconIconWrapperColor;
 
     i {
       color: @languageLabeledIconIconWrapperIconColor;
@@ -38,10 +40,10 @@
   .dropdown {
 
     .link.wrapper {
-      background-color: @languageLabeledIconDropdownBackgroundColor;
-      display: flex;
-      width: @languageLabeledIconDropdowLinkWrapperWidth;
+      display: flex;  
       position: absolute;
+      width: @languageLabeledIconDropdowLinkWrapperWidth;
+      background-color: @languageLabeledIconDropdownBackgroundColor;
       z-index: 1;
       transform: translate(-50%,0);
 
@@ -56,8 +58,8 @@
         padding: @languageLabeledIconLabelUlPadding;
 
         li {
-          padding: 5px;
           cursor: pointer;
+          padding: @languageLabeledIconLabelUlLiPadding;
         }
 
         li:hover {

diff --git a/theme/themes/eea/extras/languageLabeledIcon.variables b/theme/themes/eea/extras/languageLabeledIcon.variables
@@ -3,40 +3,39 @@
 *******************************/
 
 /* Body  */
-@languageLabeledIconWidth : 110px;
+@languageLabeledIconWidth : min-content;
+@languageLabeledIconMinWidth: 7rem;
+@languageLabeledIconTextAlign: center;
 
 /* Icon Wrapper  */
-@languageLabeledIconIconWrapperFontSize : 14px;
+@languageLabeledIconIconWrapperFontSize : 0.875rem;
 @languageLabeledIconIconWrapperFontWeight : 400;
 @languageLabeledIconIconWrapperColor : @deepBlue;
 
 /* Icon  */
-@languageLabeledIconIconWrapperIconColor : @mediumPersianBlue;
-@languageLabeledIconIconWrapperIconMarginRight : 3px;
-@languageLabeledIconIconWrapperIconFontSize : 1.5rem;
+@languageLabeledIconIconWrapperIconColor: @mediumPersianBlue;
+@languageLabeledIconIconWrapperIconMarginRight: 0.25rem;
+@languageLabeledIconIconWrapperIconFontSize: 1.5rem;
 
 /* Label  */
-@languageLabeledIconLabelColor : @deepBlue;
-@languageLabeledIconLabelFontSize : 14px;
+@languageLabeledIconLabelColor: @deepBlue;
+@languageLabeledIconLabelFontSize: 0.875rem;
 @languageLabeledIconLabelFontWeight: 400;
 
 /* Dropdown  */
-@languageLabeledIconDropdownBackgroundColor : #f9f9f9;
+@languageLabeledIconDropdownBackgroundColor: #f9f9f9;
 
 /* Link  */
-@languageLabeledIconDropdowLinkWrapperWidth : max-content;
+@languageLabeledIconDropdowLinkWrapperWidth: max-content;
 
 
 /* List  */
-@languageLabeledIconLabelUlMargin :0;
-@languageLabeledIconLabelUlColor : @japaneseIndigo;
-@languageLabeledIconLabelUlPaddingTop : 10px; 
-@languageLabeledIconLabelUlPaddingRight : 0;
-@languageLabeledIconLabelUlPaddingBottom : 10px;
-@languageLabeledIconLabelUlPaddingLeft : 0;
-@languageLabeledIconLabelUlPadding : @languageLabeledIconLabelUlPaddingTop @languageLabeledIconLabelUlPaddingRight @languageLabeledIconLabelUlPaddingBottom @languageLabeledIconLabelUlPaddingLeft;
+@languageLabeledIconLabelUlMargin:0;
+@languageLabeledIconLabelUlColor: @japaneseIndigo;
+@languageLabeledIconLabelUlPadding: 0.25rem;
 
 /* List Item  */
-@languageLabeledIconLabelUlLiColor :@white;
-@languageLabeledIconLabelUlLiBackgroundColor :  @japaneseIndigo;
-@languageLabeledIconLabelUlLiSpanFontWeight : 700;
+@languageLabeledIconLabelUlLiPadding: 0.125rem 0.313rem;
+@languageLabeledIconLabelUlLiColor: @white;
+@languageLabeledIconLabelUlLiBackgroundColor: @japaneseIndigo;
+@languageLabeledIconLabelUlLiSpanFontWeight: 700;