@eeacms/volto-eea-design-system 1.0.6 → 1.11.0

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

@@ -14,28 +14,35 @@
   min-width: @downloadLabeledIconMinWidth;
   text-align: @downloadLabeledIconTextAlign;
 
-  .label {
-    width: @downloadLabeledIconLabelWidth;
-    font-size: @downloadLabeledIconLabelFontSize;
-    color: @downloadLabeledIconLabelColor;
-    cursor: pointer;
+  button {
+    text-decoration: none;
   }
-  .icon.wrapper {
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    width: @downloadLabeledIconWrapperWidth;
-    padding: @downloadLabeledIconWrapperPadding;
+}
 
-    .icon {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      font-size: @downloadLabeledIconIconFontSize;
-      color: @downloadLabeledIconColor;
-      width: @downloadLabeledIconIconWidth;
-      height: @downloadLabeledIconWrapperIconHeight;
-    }
+.eea.download.labeled.icon .label {
+  width: @downloadLabeledIconLabelWidth;
+  font-size: @downloadLabeledIconLabelFontSize;
+  font-weight: @downloadLabeledIconLabelFontWeight;
+  color: @downloadLabeledIconLabelColor;
+  cursor: pointer;
+}
+
+.eea.download.labeled.icon .icon.wrapper {
+  height: @downloadLabeledIconWrapperMinHeight;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  width: @downloadLabeledIconWrapperWidth;
+  padding-bottom: @downloadLabeledIconWrapperPaddingBottom;
+
+  .icon {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-size: @downloadLabeledIconIconFontSize;
+    color: @downloadLabeledIconColor;
+    width: @downloadLabeledIconIconWidth;
+    height: @downloadLabeledIconWrapperIconHeight;
   }
 }
 
@@ -72,10 +79,12 @@
             line-height: @downloadLabeledIconLinkIconLineHeight;
           }
         }
-        a:hover {
+        a:hover,
+        a:focus-visible {
           color: @downloadLabeledIconALinkColorHover;
         }
-        li:hover {
+        li:hover,
+        li a:focus-visible {
           background-color: @downloadLabeledIconLiHover;
         }
       }

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

@@ -9,37 +9,39 @@
 
 /* Label */
 @downloadLabeledIconLabelWidth: 100%;
-@downloadLabeledIconLabelFontSize: 0.875rem;
-@downloadLabeledIconLabelColor: @deepBlue;
+@downloadLabeledIconLabelFontSize: @font-size-0;
+@downloadLabeledIconLabelFontWeight: @font-weight-4;
+@downloadLabeledIconLabelColor: @tertiaryColor;
 
 /* Wrapper */
+@downloadLabeledIconWrapperMinHeight: @rem-space-8;
 @downloadLabeledIconWrapperWidth: 100%;
-@downloadLabeledIconWrapperPadding: 0.5rem;
+@downloadLabeledIconWrapperPaddingBottom: @rem-space-1;
 
 /* Icon */
 @downloadLabeledIconIconFontSize: 1.563rem;
 @downloadLabeledIconWrapperIconHeight: 1.25rem;
 @downloadLabeledIconIconWidth: 1.25rem;
-@downloadLabeledIconColor: @mediumPersianBlue;
+@downloadLabeledIconColor: @lightPrimaryColor;
 
 /* Link Wrapper */
-@downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9;
-@downloadLabeledIconLinkWrapperZIndex: 1;
+@downloadLabeledIconLinkWrapperBackgroundColor: @grey-1;
+@downloadLabeledIconLinkWrapperZIndex: @z-index-1;
 @downloadLabeledIconLinkWrapperWidth: 100%;
 
 /* Dropdown */
 @downloadLabeledIconDropdownWIdth: 100%;
 
 /* List */
-@downloadLabeledIconUlMargin: 0.25rem 0;
-@downloadLabeledIconUlPaddingInlineStart: 0.25rem 0px;
-@downloadLabeledIconLiHover: @japaneseIndigo;
+@downloadLabeledIconUlMargin: @rem-space-1 0;
+@downloadLabeledIconUlPaddingInlineStart: @rem-space-1 0px;
+@downloadLabeledIconLiHover: @darkTertiaryColor;
 
 /* Link */
 @downloadLabeledIconALinkFontWeight: 700;
-@downloadLabeledIconLinkFontSize: 0.875rem;
-@downloadLabeledIconLinkIconFontSize: 1rem;
-@downloadLabeledIconLinkIconPadding: 0.125rem 0.875rem;
+@downloadLabeledIconLinkFontSize: @font-size-0;
+@downloadLabeledIconLinkIconFontSize: @font-size-1;
+@downloadLabeledIconLinkIconPadding: @rem-space-050 @rem-space-3-5;
 @downloadLabeledIconLinkIconLineHeight: 1.25rem;
-@downloadLabeledIconALinkColor: @japaneseIndigo;
-@downloadLabeledIconALinkColorHover: @white;
+@downloadLabeledIconALinkColor: @darkTertiaryColor;
+@downloadLabeledIconALinkColorHover: @grey-0;

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;
 }
@@ -819,8 +825,6 @@
     padding: @megaMenuAccordionTitlePadding;
     border-bottom: @megaMenuAccordionTitleBorderBottom;
     color: @megaMenuTextColor;
-    color: @megaMenuTextColor;
-    font-size: @megaMenuAccordionTitleFontSize;
     font-size: @megaMenuAccordionTitleFontSize;
     font-weight: @megaMenuAccordionTitleFontWeight;
 
@@ -930,6 +934,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/mixins.less

@@ -14,3 +14,11 @@
 .image-overlay-gradient() {
   .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg)
 }
+
+.useTitleMaxLines(@value: 2) {
+  display: -webkit-box !important;
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--title-max-lines, @value);
+}

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/globals/utilities.less

@@ -37,15 +37,19 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .text-left,
 .has--text--left,
 .has--textAlign--left { text-align: left !important; }
+
 .text-center,
 .has--text--center,
 .has--textAlign--center { text-align: center !important;}
+
 .text-right,
 .has--text--right,
 .has--textAlign--right { text-align: right !important; }
+
 .text-justify,
 .has--text--justify,
 .has--textAlign--justify { text-align: justify !important; }
+
 .bold { font-weight: bold !important; }
 
 .has--text--left {
@@ -57,6 +61,49 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
   --justify-content: space-evenly;
 }
 
+/*******************************
+   Image properties utilities
+*******************************/
+
+// image object fit
+.has--object-fit--contain {
+  --image-object-fit: contain;
+}
+
+.has--object-fit--cover {
+  --image-object-fit: cover;
+}
+
+.has--object-fit--fill {
+  --image-object-fit: fill;
+}
+
+.has--object-fit--scale-down {
+  --image-object-fit: scale-down;
+}
+
+// image object position
+.has--object-position--top {
+  --image-object-position: top;
+}
+
+.has--object-position--bottom {
+  --image-object-position: bottom;
+}
+
+.has--object-position--left {
+  --image-object-position: left;
+}
+
+.has--object-position--right {
+  --image-object-position: right;
+}
+
+.has--object-position--center {
+  --image-object-position: center;
+}
+
+
 // background position utilities
 .has--bg--top {
   background-position: top !important;

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

@@ -158,3 +158,10 @@
 .ui.accordion.tertiary .title:not(.active):focus-visible i {
   color: @tertiaryColorCSSVar;
 }
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .accordion-block h1 * { font-size: @mobileH1; }
+  .accordion-block h2 * { font-size: @mobileH2; }
+  .accordion-block h3 * { font-size: @mobileH3; }
+  .accordion-block h4 * { font-size: @mobileH4; }
+}

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

@@ -32,11 +32,14 @@
   img {
     width: var(--card-image-width, @imageWidth);
     height: var(--card-image-width, @imageHeight);
-    object-fit: @imageObjectFit;
-    object-position: @imageObjectPosition;
   }
 }
 
+.ui.card img, img.ui.image {
+  object-fit: var(--image-object-fit, @imageObjectFit);
+  object-position: var(--image-object-position, @imageObjectPosition);
+}
+
 
 .ui.cards > .card > .content > *:not(:last-child),
 .ui.card > .content > *:not(:last-child) {
@@ -150,6 +153,8 @@
     width: @roundedImageWidth;
     height: @roundedImageHeight;
     border-radius: @roundedImageBorderRadius !important;
+    object-fit: var(--image-object-fit, @imageObjectFit);
+    object-position: var(--image-object-position, @imageObjectPosition);
   }
 
   .content {
@@ -434,15 +439,22 @@
     padding-left: @tabletTeaserCardPaddingInline;
     padding-right: @tabletTeaserCardPaddingInline;
   }
+
   .grid-block-teaser .ui.card {
     min-width: @tabletTeaserCardMinWidth;
   }
 }
 
-// Added from listing-cards.less
-.grid-block-teaser .ui.card.u-card .header {
-  display: -webkit-box !important;
-  overflow: hidden;
-  -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 {
+  .useTitleMaxLines();
+}
+
+// Meta align fix
+.ui.card.u-card .meta:after {
+    content: none;
+}

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;
   }
 }