@eeacms/volto-eea-design-system 1.18.3 → 1.20.0

package/theme/themes/eea/collections/menu.variables

@@ -30,7 +30,7 @@
   color @defaultDuration @defaultEasing
 ;
 @itemFontWeight: @normal;
-@itemTextColor: var(--text-color, @deepBlue);
+@itemTextColor: @textColor;
 
 /* Divider */
 @dividerSize: 1px;
@@ -159,7 +159,7 @@
 
 /* Hovered Item */
 @hoverItemBackground: none;
-@hoverItemTextColor: @selectedTextColor;
+@hoverItemTextColor: @activeItemTextColor;
 
 /* Pressed Item */
 @pressedItemBackground: none;
@@ -168,14 +168,14 @@
 
 /* Active Item */
 @activeItemBackground: none;
-@activeItemTextColor: @selectedTextColor;
+@activeItemTextColor: var(--text-color, @textColor);
 @activeItemFontWeight: @normal;
 @activeIconOpacity: 1;
 @activeItemBoxShadow: none;
 
 /* Active Hovered Item */
 @activeHoverItemBackground: @transparentBlack;
-@activeHoverItemColor: @selectedTextColor;
+@activeHoverItemColor: @activeItemTextColor;
 
 /* Selected Dropdown */
 @dropdownSelectedItemBackground: @transparentBlack;
@@ -200,8 +200,22 @@
 @verticalBoxShadow: @boxShadow;
 @verticalPointerWidth: 2px;
 @verticalBackground: #FFFFFF;
-@verticalItemBackground: none;
 @verticalDividerBackground: @dividerBackground;
+@verticalBorderWidth: @1px;
+@verticalMenuBorder: @1px  solid @grey-3;
+@verticalMenuBorderWidth: var(--vertical-menu-border, 0 @verticalBorderWidth 0 0) !important;
+@verticalMenuBorderOnLeftSide: 0 0 0 @verticalBorderWidth;
+@verticalMenuBorderColor: @grey-3;
+@verticalItemBackground: none;
+@verticalItemBorderWidth: @3px;
+@verticalItemBorder: var(--vertical-item-border, 0 @verticalItemBorderWidth 0 0) !important;
+@verticalItemBorderStyle: var(--vertical-item-border-style, none solid none none);
+@verticalItemBorderStyleOnLeft: none none none solid;
+@verticalItemBorderOnLeftSide:  0 0 0 @verticalItemBorderWidth;
+@verticalItemMargin: @secondaryVerticalPointingItemMargin;
+@verticalItemMarginOnLeft: 0 0 0 -@secondaryPointingBorderWidth;
+@verticalItemPadding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
+@verticalItemActiveBorder: @3px solid @activeItemTextColor;
 
 @verticalActiveBoxShadow: none;
 
@@ -219,13 +233,13 @@
 @secondaryItemTransition: none;
 @secondaryItemColor: @unselectedTextColor;
 
-@secondaryHoverItemBackground: @transparentBlack;
-@secondaryHoverItemColor: @selectedTextColor;
+@secondaryHoverItemBackground: transparent;
+@secondaryHoverItemColor: @activeItemTextColor;
 
-@secondaryActiveItemBackground: @transparentBlack;
-@secondaryActiveItemColor: @selectedTextColor;
-@secondaryActiveHoverItemBackground: @transparentBlack;
-@secondaryActiveHoverItemColor: @selectedTextColor;
+@secondaryActiveItemBackground: var(--bg-color, @white);
+@secondaryActiveItemColor: @activeItemTextColor;
+@secondaryActiveHoverItemBackground: @secondaryActiveItemBackground;
+@secondaryActiveHoverItemColor: @secondaryActiveItemColor;
 
 @secondaryActiveHoveredItemBackground: @transparentBlack;
 @secondaryActiveHoveredItemColor: @selectedTextColor;
@@ -234,7 +248,7 @@
 @secondaryHeaderBorder: none;
 
 @secondaryItemVerticalSpacing: @secondaryItemSpacing;
-@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
+@secondaryVerticalItemMargin: @secondaryVerticalPointingItemMargin;
 @secondaryVerticalItemBorderRadius: @defaultBorderRadius;
 
 @secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding;
@@ -245,7 +259,7 @@
 /* Pointing */
 @secondaryPointingBorderWidth: @1px;
 @secondaryPointingActiveBorderWidth: @3px;
-@secondaryPointingBorderColor: @midGray;
+@secondaryPointingBorderColor: transparent;
 @secondaryPointingItemMargin: 0 1.25rem;
 @secondaryPointingItemVerticalPadding: @tinyGap;
 @secondaryPointingItemActiveVerticalPadding: unit((@relativeTiny - @3px), rem);
@@ -256,8 +270,8 @@
 
 @secondaryPointingHoverTextColor: var(--text-color-hover, @textColor);
 
-@secondaryPointingActiveBorderColor: @secondaryColor;
-@secondaryPointingActiveTextColor: @secondaryColor;
+@secondaryPointingActiveBorderColor: var(--text-color, @secondaryColor);
+@secondaryPointingActiveTextColor: var(--text-color, @secondaryColor);
 @secondaryPointingActiveFontWeight: @normal;
 
 @secondaryPointingActiveDropdownBorderColor: transparent;
@@ -266,19 +280,20 @@
 @secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
 
 @secondaryPointingHeaderColor: @darkTextColor;
-@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
+@secondaryVerticalPointingItemMargin: var(--vertical-item-margin, 0em -@secondaryPointingBorderWidth 0em 0em);
 
 
-@secondaryPointingItemBorderBottom: @1px solid @midGray;
-@secondaryPointingItemMaxWidth: 15.625rem; 
+@secondaryPointingItemBorderBottom: @3px solid transparent;
+@secondaryPointingItemMargin: 0 0 -@1px 0;
+@secondaryPointingItemMaxWidth: 15.625rem;
 
 /* Inverted Secondary */
-@secondaryInvertedColor: @invertedLightTextColor;
+@secondaryInvertedColor: @invertedTextColor;
 
-@secondaryInvertedHoverBackground: @transparentWhite;
+@secondaryInvertedHoverBackground: @strongTransparentBlack;
 @secondaryInvertedHoverColor: @invertedSelectedTextColor;
 
-@secondaryInvertedActiveBackground: @strongTransparentWhite;
+@secondaryInvertedActiveBackground: @invertedActiveBackground;
 @secondaryInvertedActiveColor: @invertedSelectedTextColor;
 
 /* Inverted Pointing */
@@ -286,7 +301,7 @@
 @secondaryPointingInvertedItemTextColor: @invertedTextColor;
 @secondaryPointingInvertedItemHeaderColor: @white;
 @secondaryPointingInvertedItemHoverTextColor: @selectedTextColor;
-@secondaryPointingInvertedActiveBorderColor: @white;
+@secondaryPointingInvertedActiveBorderColor: @strongTransparentBlack;
 @secondaryPointingInvertedActiveColor: @invertedSelectedTextColor;
 
 
@@ -369,7 +384,7 @@
 
 @textMenuActiveItemFontWeight: @normal;
 @textMenuActiveItemColor: @selectedTextColor;
-@secondaryPointingctiveItemMarginBottom: @2px;
+@secondaryPointingActiveItemMarginBottom: @1px;
 
 @textMenuHeaderSize: @relativeSmall;
 @textMenuHeaderColor: @darkTextColor;
@@ -389,7 +404,7 @@
 ---------------*/
 
 /* Inverted */
-@invertedBackground: @black;
+@invertedBackground: var(--bg-color, @textColor);
 @invertedBoxShadow: none;
 @invertedBorder: 0px solid transparent;
 @invertedHeaderBackground: transparent;
@@ -402,23 +417,23 @@
 @invertedSubMenuColor: @invertedUnselectedTextColor;
 
 /* Inverted Hover */
-@invertedHoverBackground: @transparentWhite;
+@invertedHoverBackground: @strongTransparentBlack;
 @invertedHoverColor: @invertedSelectedTextColor;
 
 @invertedSubMenuHoverBackground: transparent;
 @invertedSubMenuHoverColor: @invertedSelectedTextColor;
 
 /* Pressed */
-@invertedMenuPressedBackground: @transparentWhite;
+@invertedMenuPressedBackground: transparent;
 @invertedMenuPressedColor: @invertedSelectedTextColor;
 
 /* Inverted Active */
-@invertedActiveBackground: @strongTransparentWhite;
+@invertedActiveBackground: @strongTransparentBlack;
 @invertedActiveColor: @invertedSelectedTextColor;
 @invertedArrowActiveColor: #3D3E3F;
 
 /* Inverted Active Hover  */
-@invertedActiveHoverBackground: @invertedActiveBackground;
+@invertedActiveHoverBackground: @strongTransparentBlack;
 @invertedActiveHoverColor: @white;
 @invertedArrowActiveHoverColor: @invertedArrowActiveColor;
 

package/theme/themes/eea/collections/message.overrides

@@ -30,4 +30,4 @@
 .field-wrapper .ui.negative.message {
   background: transparent;
   box-shadow: none;
-}
+}

package/theme/themes/eea/collections/table.overrides

@@ -27,7 +27,6 @@
     text-transform: @headerTextTransform;
     vertical-align: @headerVerticalAlign;
   }
-
 }
 
 // fix hiding of table header on mobile resolutions, by default whitespace is no wrap from table.less
@@ -36,30 +35,29 @@
 }
 
 @media only screen and (max-width: @tabletBreakpoint) {
-
   .ui.table.responsive {
-
     &:not(.unstackable) td:first-child {
       font-weight: @responsiveMobileCellHeaderFontWeight;
     }
 
     thead {
-      border: none;
-      clip: @responsiveMobileCellHeaderClip;
-      height: @responsiveMobileHeaderHeight;
-      margin: @responsiveMobileHeaderMargin;
-      overflow: hidden;
-      padding: @responsiveMobileHeaderPadding;
       position: absolute;
+      overflow: hidden;
       width: @responsiveMobileHeaderWidth;
+      height: @responsiveMobileHeaderHeight;
+      padding: @responsiveMobileHeaderPadding;
+      border: none;
+      margin: @responsiveMobileHeaderMargin;
+      clip: @responsiveMobileCellHeaderClip;
     }
 
     td {
       display: block;
-      text-align: @responsiveMobileCellTextAlign;
       clear: both;
-  
+      text-align: @responsiveMobileCellTextAlign;
+
       &::before {
+        max-width: @responsiveMobileCellDataLabelMaxSize;
         /*
         * aria-label has no advantage, it won't be read inside a table
         content: attr(aria-label);
@@ -68,11 +66,7 @@
         float: @responsiveMobileCellDataLabelFloat;
         font-weight: @responsiveMobileCellDataLabelFontWeigth;
         text-align: @responsiveMobileCellDataLabelTextAlign;
-        max-width: @responsiveMobileCellDataLabelMaxSize;
       }
-      
     }
-
   }
-
 }

package/theme/themes/eea/elements/button.overrides

@@ -116,10 +116,10 @@ button.ui.button.text,
 button.ui.buttons.text,
 a.ui.button.text,
 p.ui.button {
+  padding: @textButtonPadding;
   background-color: @textButtonBackground;
   color: @primaryColor;
   text-decoration: underline;
-  padding: @textButtonPadding;
 
   &:hover,
   &:active,
@@ -320,4 +320,4 @@ p.ui.button {
 .ui.tertiary.buttons .button:active,
 .ui.tertiary.button:active {
   background-color: @tertiaryColorDown;
-}
+}

package/theme/themes/eea/elements/container.overrides

@@ -45,18 +45,19 @@ body {
     width: auto !important;
     max-width: @containerWidth !important;
   }
-   #page-add .container,
-   #page-edit .container {
-     max-width: unset !important;
-   }
 
-  [class*="block-editor"] {
-    padding-left: @editContainerGutter;
+  #page-add .container,
+  #page-edit .container {
+    max-width: unset !important;
+  }
+
+  [class*='block-editor'] {
     padding-right: @editContainerGutter;
+    padding-left: @editContainerGutter;
 
-    [class*="block-editor"] {
-      padding-left: 0;
+    [class*='block-editor'] {
       padding-right: 0;
+      padding-left: 0;
     }
   }
 }
@@ -66,8 +67,8 @@ body {
 // top of the edit page selector
 .container > .blocks-form > .invisible > div > * {
   max-width: var(--layout-max-width, @containerWidth);
-  margin-left: auto !important;
   margin-right: auto !important;
+  margin-left: auto !important;
 }
 
 .contentWidth(@offset) {
@@ -110,6 +111,7 @@ body {
     [class*='or lower hidden']:not(.computer):not(.tablet):not(.mobile) {
       display: none !important;
     }
+
     #page-document {
       width: unset !important;
       max-width: unset !important;
@@ -134,8 +136,8 @@ body {
 }
 
 /* Hack for escape the blocks container in blocks full width */
-[class~="view-defaultview"] [id="page-document"] > .full-width,
-[class~="view-viewview"] [id="page-document"] > .full-width {
+[class~='view-defaultview'] [id='page-document'] > .full-width,
+[class~='view-viewview'] [id='page-document'] > .full-width {
   max-width: initial !important;
 }
 
@@ -145,58 +147,61 @@ body {
   @sidebarWidthCSS: var(--sidebar-width, 0px);
   @scrollbarWidthCSS: var(--scrollbar-width, @scrollbarWidth);
   position: relative;
-  width: calc(100vw - @toolbarWidthCSS - @sidebarWidthCSS - @scrollbarWidthCSS) !important;
   right: 50%;
   left: 50%;
+  width: calc(
+    100vw - @toolbarWidthCSS - @sidebarWidthCSS - @scrollbarWidthCSS
+  ) !important;
   max-width: initial !important;
-  margin-left: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
-  margin-right: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
+  margin-right: calc(
+    -50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2
+  ) !important;
+  margin-left: calc(
+    -50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2
+  ) !important;
+}
+
+#page-add [class*='block-editor-'].has--size--full,
+#page-edit [class*='block-editor-'].has--size--full {
+  position: initial;
 }
 
 .has--size--full:not(.block-editor-columnsBlock) .ui.grid {
-  margin-left: 0;
   margin-right: 0;
+  margin-left: 0;
 }
-.has--size--full:not(.block-editor-columnsBlock) .ui.grid .column-blocks-wrapper {
-  padding-left: 0;
+
+.has--size--full:not(.block-editor-columnsBlock)
+  .ui.grid
+  .column-blocks-wrapper {
   padding-right: 0;
+  padding-left: 0;
 }
 
 // tweak size of full to take into account toolbar open or collapsed
 @media screen and (min-width: 768px) and (hover: hover) {
-  .has-toolbar .has--size--full:not(.block-editor-columnsBlock) {
-    width: calc(100vw - 96px) !important;
-  }
-
-  #page-add [class*="block-editor-"].has--size--full .block.inner,
-  #page-edit [class*="block-editor-"].has--size--full .column-grid {
-    width: calc(100vw - 471px) !important;
-    left: calc(50% + 240px);
+  #page-add [class*='block-editor-'].has--size--full .block.inner,
+  #page-edit [class*='block-editor-'].has--size--full .column-grid {
     position: relative;
     right: 50%;
+    left: calc(50% + 240px);
+    width: calc(100vw - 471px) !important;
     max-width: initial !important;
     margin-right: -50vw !important;
     margin-left: -50vw !important;
-
-  }
-
-  .has-toolbar-collapsed .has--size--full:not(.block-editor-columnsBlock) {
-    width: calc(100vw - 37px) !important;
   }
-
 }
 
 // when we have no hover we have touch where there is no always visible
 // scrollbar
 @media screen and (min-width: 768px) and (hover: none) {
   .has-toolbar .has--size--full:not(.block-editor-columnsBlock) {
-    width: calc(100vw - 80px) !important;
     left: calc(50% + 40px);
+    width: calc(100vw - 80px) !important;
   }
 
   .has-toolbar-collapsed .has--size--full:not(.block-editor-columnsBlock) {
-    width: calc(100vw - 20px) !important;
     left: calc(50% + 12px);
+    width: calc(100vw - 20px) !important;
   }
-
 }

package/theme/themes/eea/elements/divider.overrides

@@ -7,7 +7,9 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
 }
 
-.ui.horizontal.divider.primary,.ui.horizontal.divider.secondary,.ui.horizontal.divider.tertiary  {
+.ui.horizontal.divider.primary,
+.ui.horizontal.divider.secondary,
+.ui.horizontal.divider.tertiary {
   & > * {
     padding: 0 @space-4;
   }
@@ -15,23 +17,23 @@
 
 .ui.horizontal.divider.primary:before,
 .ui.horizontal.divider.primary:after {
+  border-top: 1px solid @dividerPrimary;
   background-image: none;
-  border-top:1px solid @dividerPrimary;
-  transform:translateY(50%);
+  transform: translateY(50%);
 }
 
 .ui.horizontal.divider.secondary:before,
 .ui.horizontal.divider.secondary:after {
+  border-top: 1px solid @dividerSecondary;
   background-image: none;
-  border-top:1px solid @dividerSecondary;
-  transform:translateY(50%);
+  transform: translateY(50%);
 }
 
 .ui.horizontal.divider.tertiary:before,
 .ui.horizontal.divider.tertiary:after {
+  border-top: 1px solid @dividerTertiary;
   background-image: none;
-  border-top:1px solid @dividerTertiary;
-  transform:translateY(50%);
+  transform: translateY(50%);
 }
 
 @media only screen and (max-width: (@tabletBreakpoint - 1px)) {
@@ -43,7 +45,6 @@
   }
 }
 
-
 .ui.divider.short {
   width: @shortWidth;
   margin-inline: @shortMarginInline;
@@ -54,6 +55,7 @@
   border-top-color: @dividerPrimary;
   color: @dividerPrimary;
 }
+
 .ui.vertical.divider.primary:before,
 .ui.vertical.divider.primary:after {
   border-left-color: @dividerPrimary;
@@ -64,6 +66,7 @@
   border-top-color: @dividerSecondary;
   color: @dividerSecondary;
 }
+
 .ui.vertical.divider.secondary:before,
 .ui.vertical.divider.secondary:after {
   border-left-color: @dividerSecondary;
@@ -74,7 +77,8 @@
   border-top-color: @dividerTertiary;
   color: @dividerTertiary;
 }
+
 .ui.vertical.divider.tertiary:before,
 .ui.vertical.divider.tertiary:after {
   border-left-color: @dividerTertiary;
-}
+}

package/theme/themes/eea/elements/image.overrides

@@ -48,7 +48,6 @@
   width: @massiveWidth;
 }
 
-
 /*--------------
   Image block float changes
 ---------------*/
@@ -67,18 +66,19 @@
 .block.image.align.left {
   img {
     max-width: 100% !important;
-    float: none !important;
     margin: 0 !important;
+    float: none !important;
   }
 }
 
 /* edit page fixes for float issues */
-#page-edit  .image {
+#page-edit .image {
   max-width: 100%;
   min-height: @imageMinHeight;
 }
-#page-edit  .image.left,
-#page-edit  .image.right,
+
+#page-edit .image.left,
+#page-edit .image.right,
 #page-document > .image.left,
 #page-document > .image.right {
   float: none;
@@ -123,4 +123,3 @@
 .image.align:not(.full, .center) .image-block-container.small {
   max-width: @imageAlignSmallMaxWidth;
 }
-

package/theme/themes/eea/elements/label.overrides

@@ -9,51 +9,51 @@
 
 .ui.low.labels .label,
 .ui.low.label {
-  background-color: @lowImportanceBackground;
   border-color: @lowImportanceBackground;
+  background-color: @lowImportanceBackground;
 }
 
 .ui.medium.labels .label,
 .ui.medium.label {
-  background-color: @mediumImportanceBackground;
   border-color: @mediumImportanceBackground;
+  background-color: @mediumImportanceBackground;
 }
 
 .ui.high.labels .label,
 .ui.high.label {
-  background-color: @highImportanceBackground;
   border-color: @highImportanceBackground;
+  background-color: @highImportanceBackground;
 }
 
 .ui.highlight.labels .label,
 .ui.highlight.label {
-  background-color: @highlightImportanceBackground;
   border-color: @highlightImportanceBackground;
+  background-color: @highlightImportanceBackground;
 }
 
 /* Link */
 .ui.low.labels .label:hover,
 .ui.low.label:hover {
-  background-color: @lowImportanceHoverBackground;
   border-color: @lowImportanceHoverBackground;
+  background-color: @lowImportanceHoverBackground;
 }
 
 .ui.medium.labels .label:hover,
 .ui.medium.label:hover {
-  background-color: @mediumImportanceHoverBackground;
   border-color: @mediumImportanceHoverBackground;
+  background-color: @mediumImportanceHoverBackground;
 }
 
 .ui.high.labels .label:hover,
 .ui.high.label:hover {
-  background-color: @highImportanceHoverBackground;
   border-color: @highImportanceHoverBackground;
+  background-color: @highImportanceHoverBackground;
 }
 
 .ui.highlight.labels .label:hover,
 .ui.highlight.label:hover {
-  background-color: @highlightImportanceHoverBackground;
   border-color: @highlightImportanceHoverBackground;
+  background-color: @highlightImportanceHoverBackground;
 }
 
 /* Ribbon */
@@ -79,55 +79,55 @@
 
 /* Basic */
 .ui.basic.low.label {
+  border-color: @lowImportanceBackground;
   background: @white;
   color: @lowImportanceBasicTextColor;
-  border-color: @lowImportanceBackground;
 }
 
 .ui.basic.low.labels a.label:hover,
 .ui.basic.low.label:hover {
+  border-color: @lowImportanceHoverBackground;
   background-color: @white;
   color: @lowImportanceHoverBackground;
-  border-color: @lowImportanceHoverBackground;
 }
 
 .ui.basic.medium.label {
+  border-color: @mediumImportanceBackground;
   background: @white;
   color: @mediumImportanceBasicTextColor;
-  border-color: @mediumImportanceBackground;
 }
 
 .ui.basic.medium.labels a.label:hover,
 .ui.basic.medium.label:hover {
+  border-color: @mediumImportanceHoverBackground;
   background-color: @white;
   color: @mediumImportanceHoverBackground;
-  border-color: @mediumImportanceHoverBackground;
 }
 
 .ui.basic.high.label {
+  border-color: @highImportanceBackground;
   background: @white;
   color: @highImportanceBasicTextColor;
-  border-color: @highImportanceBackground;
 }
 
 .ui.basic.high.labels a.label:hover,
 .ui.basic.high.label:hover {
+  border-color: @highImportanceHoverBackground;
   background-color: @white;
   color: @highImportanceHoverBackground;
-  border-color: @highImportanceHoverBackground;
 }
 
 .ui.basic.highlight.label {
+  border-color: @highlightImportanceBackground;
   background: @white;
   color: @highlightImportanceBasicTextColor;
-  border-color: @highlightImportanceBackground;
 }
 
 .ui.basic.highlight.labels a.label:hover,
 .ui.basic.highlight.label:hover {
+  border-color: @highlightImportanceHoverBackground;
   background-color: @white;
   color: @highlightImportanceHoverBackground;
-  border-color: @highlightImportanceHoverBackground;
 }
 
 // Custom variations and combinations in slate

package/theme/themes/eea/elements/list.overrides

@@ -21,10 +21,12 @@ dl dd {
 /* Unordered list */
 
 // use padding instead
-ul.ui.list, .ui.bulleted.list {
+ul.ui.list,
+.ui.bulleted.list {
   padding-left: @bulletDistance;
   margin-left: 0;
 }
+
 .ui.bulleted.list .list > .item:before,
 .ui.bulleted.list .list > a.item:before,
 .ui.bulleted.list > .item:before,

package/theme/themes/eea/elements/segment.overrides

@@ -10,8 +10,8 @@
 
 @media print {
   .ui.basic.segment.content-area {
-    margin-top: 0;
     padding-top: 0;
+    margin-top: 0;
   }
 }
 
@@ -33,9 +33,9 @@
 // eea add .form class for inline form with booleans, the segment doesn't have form class
 .form .segment,
 .ui.form.segment {
-//  // commented to restore padding to a list of toggle inputs within field-wrapper-hideContentType
-//  padding: 0;
-//
+  //  // commented to restore padding to a list of toggle inputs within field-wrapper-hideContentType
+  //  padding: 0;
+  //
   .ui.grid > .row {
     padding-top: 0;
     padding-bottom: 0;