@eeacms/volto-eea-design-system 1.0.5 → 1.0.7

package/theme/themes/eea/extras/header.less

@@ -785,6 +785,12 @@
   }
 }
 
+// add negative margin to the first column subtitle from nested grid
+// so that the subtitle lines up with the subtitle from the left column
+#mega-menu .nested-grid > .column:first-of-type .sub-title {
+  margin-top: @megaMenuSubTitleCountriesNestedGridMarginTop;
+}
+
 #topics-right-column {
   padding-left: @topicsRightColumnPaddingLeft;
 }
@@ -930,6 +936,8 @@
     color: @megaMenuTextColor;
     font-size: @computerMegaMenuSubTitleFontSize;
     font-weight: @megaMenuSubTitleFontWeight;
+    padding: @megaMenuSubTitlePadding;
+    display: @megaMenuSubTitleDisplay;
 
     &:hover,
     &:focus-visible {

package/theme/themes/eea/extras/header.variables

@@ -178,6 +178,9 @@
 @mobileMegaMenuSubTitleFontSize: @font-size-2;
 @computerMegaMenuSubTitleFontSize: @font-size-3;
 @megaMenuSubTitleFontWeight: @font-weight-7;
+@megaMenuSubTitlePadding: 0.5rem 0;
+@megaMenuSubTitleDisplay: block;
+@megaMenuSubTitleCountriesNestedGridMarginTop: -1rem;
 
 /* List Item */
 @megaMenuListItemFontSize: @font-size-1;
@@ -193,7 +196,7 @@
 @megaMenuGlanceListItemFontSize: @font-size-1;
 @megaMenuGlanceListItemFontWeight: @font-weight-4;
 @megaMenuGlanceListItemMargin: 0;
-@megaMenuGlanceMenuListMarginTop: @rem-space-4;
+@megaMenuGlanceMenuListMarginTop: 0;
 
 /* Accordion */
 @megaMenuAccordionTitleFontSize: @font-size-3;

package/theme/themes/eea/extras/inpageNavigation.less

@@ -22,6 +22,8 @@
   color: @navColor;
   font-weight: @navFontWeight;
   z-index: @z-index-important;
+  line-height: @navLineHeight;
+  padding: @navPadding;
 
   /* Icon align fix */
   > div > i.icon,

package/theme/themes/eea/extras/inpageNavigation.variables

@@ -13,6 +13,8 @@
 @tabletNavHeight      : 2.25rem;
 @computerNavWidth     : 3.125rem;
 @computerNavHeight    : 3.125rem;
+@navLineHeight        : @font-lineheight-3;
+@navPadding           : 0;
 
 /* Desktop Icon */
 @inpageNavigationIconWidth : 100%;

package/theme/themes/eea/extras/labeledIconGroup.variables

@@ -4,7 +4,7 @@
 *******************************/
 
 @labeledIconGroupWidth : 100%;
-@labeledIconGroupPadding : 0 2rem;
+@labeledIconGroupPadding : 0 @rem-space-8;
 
-@labeledIconGroupWrapperMarginLeft: 0.25rem;
-@labeledIconGroupWrapperMarginRight: 0.25rem;
+@labeledIconGroupWrapperMarginLeft: @rem-space-1;
+@labeledIconGroupWrapperMarginRight: @rem-space-1;

package/theme/themes/eea/extras/languageLabeledIcon.less

@@ -15,30 +15,37 @@
   min-width: @languageLabeledIconMinWidth;
   text-align: @languageLabeledIconTextAlign;
 
-  .icon.wrapper {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: @languageLabeledIconIconWrapperFontSize;
-    font-weight: @languageLabeledIconIconWrapperFontWeight;
-    color: @languageLabeledIconIconWrapperColor;
-
-    i {
-      color: @languageLabeledIconIconWrapperIconColor;
-      margin-right: @languageLabeledIconIconWrapperIconMarginRight;
-      font-size: @languageLabeledIconIconWrapperIconFontSize;
-    }
+  button {
+    text-decoration: none;
   }
+}
+
+.eea.language.labeled.icon .icon.wrapper {
+  height: @languageLabeledIconIconWrapperMinHeight;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: @languageLabeledIconIconWrapperFontSize;
+  font-weight: @languageLabeledIconIconWrapperFontWeight;
+  color: @languageLabeledIconIconWrapperColor;
+  padding-bottom: @languageLabeledIconIconWrapperPaddingBottom;
 
-  .label {
-    color: @languageLabeledIconLabelColor;
-    font-size: @languageLabeledIconLabelFontSize;
-    font-weight: @languageLabeledIconLabelFontWeight;
-    cursor: pointer;
+  i {
+    opacity: 1;
+    color: @languageLabeledIconIconWrapperIconColor;
+    margin-right: @languageLabeledIconIconWrapperIconMarginRight;
+    font-size: @languageLabeledIconIconWrapperIconFontSize;
   }
 }
 
+.eea.language.labeled.icon .label {
+  color: @languageLabeledIconLabelColor;
+  font-size: @languageLabeledIconLabelFontSize;
+  font-weight: @languageLabeledIconLabelFontWeight;
+  cursor: pointer;
+}
+
 .ui.popup.language-popup {
   margin: 0;
   padding: 0;
@@ -67,7 +74,8 @@
           padding: @languageLabeledIconLabelUlLiPadding;
         }
 
-        li:hover {
+        li:hover,
+        li div:focus-visible {
           color: @languageLabeledIconLabelUlLiColor;
           background-color: @languageLabeledIconLabelUlLiBackgroundColor;
         }

package/theme/themes/eea/extras/languageLabeledIcon.variables

@@ -8,34 +8,36 @@
 @languageLabeledIconTextAlign: center;
 
 /* Icon Wrapper  */
-@languageLabeledIconIconWrapperFontSize : 0.875rem;
-@languageLabeledIconIconWrapperFontWeight : 400;
-@languageLabeledIconIconWrapperColor : @deepBlue;
+@languageLabeledIconIconWrapperMinHeight: @rem-space-8;
+@languageLabeledIconIconWrapperFontSize : @font-size-0;
+@languageLabeledIconIconWrapperFontWeight : @font-weight-4;
+@languageLabeledIconIconWrapperColor : @tertiaryColor;
+@languageLabeledIconIconWrapperPaddingBottom : @rem-space-1;
 
 /* Icon  */
-@languageLabeledIconIconWrapperIconColor: @mediumPersianBlue;
-@languageLabeledIconIconWrapperIconMarginRight: 0.25rem;
-@languageLabeledIconIconWrapperIconFontSize: 1.5rem;
+@languageLabeledIconIconWrapperIconColor: @lightPrimaryColor;
+@languageLabeledIconIconWrapperIconMarginRight: @rem-space-1;
+@languageLabeledIconIconWrapperIconFontSize: @font-size-4;
 
 /* Label  */
-@languageLabeledIconLabelColor: @deepBlue;
-@languageLabeledIconLabelFontSize: 0.875rem;
-@languageLabeledIconLabelFontWeight: 400;
+@languageLabeledIconLabelColor: @tertiaryColor;
+@languageLabeledIconLabelFontSize: @font-size-0;
+@languageLabeledIconLabelFontWeight: @font-weight-4;
 
 /* Dropdown  */
-@languageLabeledIconDropdownBackgroundColor: #f9f9f9;
+@languageLabeledIconDropdownBackgroundColor: @grey-1;
 
 /* Link  */
 @languageLabeledIconDropdowLinkWrapperWidth: max-content;
 
 
 /* List  */
-@languageLabeledIconLabelUlMargin:0;
-@languageLabeledIconLabelUlColor: @japaneseIndigo;
-@languageLabeledIconLabelUlPadding: 0.25rem;
+@languageLabeledIconLabelUlMargin: 0;
+@languageLabeledIconLabelUlColor: @darkTertiaryColor;
+@languageLabeledIconLabelUlPadding: @rem-space-1;
 
 /* List Item  */
 @languageLabeledIconLabelUlLiPadding: 0.125rem 0.313rem;
-@languageLabeledIconLabelUlLiColor: @white;
-@languageLabeledIconLabelUlLiBackgroundColor: @japaneseIndigo;
-@languageLabeledIconLabelUlLiSpanFontWeight: 700;
+@languageLabeledIconLabelUlLiColor: @grey-0;
+@languageLabeledIconLabelUlLiBackgroundColor: @darkTertiaryColor;
+@languageLabeledIconLabelUlLiSpanFontWeight: @font-weight-7;

package/theme/themes/eea/extras/newTabLabeledIcon.less

@@ -14,29 +14,35 @@
   min-width: @newTabLabeledIconMinWidth;
   text-align: @newTabLabeledIconTextAlign;
 
+  a {
+    text-decoration: none;
+  }
+
   .label {
     width: @newTabLabeledIconLabelWidth;
     font-size: @newTabLabeledIconLabelFontSize;
+    font-weight: @newTabLabeledIconLabelFontWeight;
     color: @newTabLabeledIconLabelColor;
     cursor: pointer;
   }
+}
 
-  .icon.wrapper {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    width: @newTabLabeledIconIconWrapperWidth;
-    padding: @newTabLabeledIconWrapperPadding;
+.eea.new.tab.labeled.icon .icon.wrapper {
+  min-height: @newTabLabeledIconIconWrapperMinHeight;
+  width: @newTabLabeledIconIconWrapperWidth;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding-bottom: @newTabLabeledIconWrapperPaddingBottom;
 
-    .icon {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      font-size: @newTabLabeledIconIconFontSize;
-      color: @newTabLabeledIconColor;
-      width: @newTabLabeledIconIconWidth;
-      height: @newTabLabeledIconWrapperIconHeight;
-    }
+  .icon {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: @newTabLabeledIconIconFontSize;
+    color: @newTabLabeledIconColor;
+    width: @newTabLabeledIconIconWidth;
+    height: @newTabLabeledIconWrapperIconHeight;
   }
 }
 

package/theme/themes/eea/extras/newTabLabeledIcon.variables

@@ -4,18 +4,20 @@
 
 /* Body */
 @newTabLabeledIconWidth: min-content;
-@newTabLabeledIconMinWidth: 7rem;
+@newTabLabeledIconMinWidth: 8.5rem;
 @newTabLabeledIconTextAlign: center;
 
 /* Label */
 @newTabLabeledIconLabelWidth: 100%;
-@newTabLabeledIconLabelFontSize: 0.875rem;
-@newTabLabeledIconLabelColor: @deepBlue;
-@newTabLabeledIconColor: @mediumPersianBlue;
+@newTabLabeledIconLabelFontSize: @font-size-0;
+@newTabLabeledIconLabelFontWeight: @font-weight-4;
+@newTabLabeledIconLabelColor: @tertiaryColor;
+@newTabLabeledIconColor: @lightPrimaryColor;
 
 /* Icon Wrapper */
+@newTabLabeledIconIconWrapperMinHeight: @rem-space-8;
 @newTabLabeledIconIconWrapperWidth: 100%;
-@newTabLabeledIconWrapperPadding: 0.5rem;
+@newTabLabeledIconWrapperPaddingBottom: @rem-space-1;
 
 /* Icon */
 @newTabLabeledIconIconFontSize: 1.563rem;

package/theme/themes/eea/globals/site.overrides

@@ -9,7 +9,10 @@
   outline: @focusVisibleOutline;
 }
 
-button:focus-visible {
+button:focus-visible,
+a.button:focus-visible,
+.ui.checkbox input[type="checkbox"]:focus-visible,
+.ui.checkbox input[type="radio"]:focus-visible {
   outline: @focusVisibleOutline !important;
 }
 

package/theme/themes/eea/modules/checkbox.overrides

@@ -8,6 +8,12 @@
     format('truetype');
 }
 
+// To display focus state
+.ui.checkbox input[type="checkbox"],
+.ui.checkbox input[type="radio"] {
+  opacity: 1 !important;
+}
+
 /* Checkbox */
 .ui.checkbox:not(.toggle) {
   margin-bottom: @bottomMargin;

package/theme/themes/eea/modules/checkbox.variables

@@ -162,7 +162,7 @@
   left @sliderTransitionDuration @defaultEasing
 ;
 
-@toggleLaneBackground: @transparentBlack;
+@toggleLaneBackground: @grey-2;
 @toggleLaneHeight: @toggleHandleSize;
 @toggleLaneBoxShadow: none;
 @toggleLaneVerticalOffset: 0rem;
@@ -174,8 +174,8 @@
 @toggleLabelOffset: 0.15em;
 
 
-@toggleFocusColor: @veryStrongTransparentBlack;
-@toggleHoverColor: @toggleFocusColor;
+@toggleFocusColor: @grey-3;
+@toggleHoverColor: @grey-3;
 
 @toggleOffLabelColor: @checkboxColor;
 @toggleOffHandleBoxShadow: none;

package/theme/themes/eea/modules/modal.overrides

@@ -5,3 +5,16 @@
 .ui.modal > :last-child {
   overflow: hidden; // clear floats from modal
 }
+
+.ui.modal .ui.button.close {
+  background: @closeButtonBackground;
+  padding: @closeButtonPadding;
+
+  i {
+    color: @closeColor;
+  }
+}
+
+.ui.modal .ui.button.close:focus-visible {
+  outline: @focusVisibleOutline;
+}

package/theme/themes/eea/modules/modal.variables

@@ -15,7 +15,11 @@
 /* Close Icon */
 @closeOpacity: 0.8;
 @closeSize: 1.25em;
-@closeColor: @black;
+@closeColor: @grey-6;
+
+/* Close Button */
+@closeButtonBackground: transparent;
+@closeButtonPadding: 0;
 
 @closeHitbox: 2.25rem;
 @closeDistance: 0.25rem;

package/theme/themes/eea/views/card.overrides

@@ -446,3 +446,12 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--title-max-lines, 3);
 }
+
+// Spacing adjustment to display outline with overflow hidden
+.ui.card .header {
+  padding: @headerPadding;
+}
+.ui.card .header > a {
+  display: @headerLinkDisplay;
+}
+

package/theme/themes/eea/views/card.variables

@@ -81,11 +81,15 @@
 
 
 /* Header */
-@headerMargin: '';
+@headerMargin: -@em-space-2 -@em-space-1 -@em-space-1 -@em-space-1;
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
-@headerLineHeightOffset: -(@lineHeight - 1em) / 2;
+
 @headerColor: inherit;
+@headerLinkDisplay: block;
+
+@headerPadding: @em-space-1;
+@headerLineHeightOffset: -(@headerPadding * 2);
 
 /* Metadata */
 @metaJustifyContent: space-between;

package/theme/themes/eea/views/item.overrides

@@ -208,7 +208,7 @@
   }
 
   // Flex wrapper for list of items
-  .ui.items.flex-items-wrapper .item {
+  .ui.items.flex-items-wrapper > .item {
     width: @tabletFlexItemWidth;
   }
 }
@@ -237,7 +237,7 @@
   }
 
   // Flex wrapper for list of items
-  .ui.items.flex-items-wrapper .item {
+  .ui.items.flex-items-wrapper > .item {
     width: @desktopFlexItemWidth;
   }
 }