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

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;

package/theme/themes/eea/extras/custom.overrides

@@ -4,7 +4,7 @@
 
 // hide breadcrumbs on homepage
 .homepage .breadcrumbs {
-    display: none !important;
+  display: none !important;
 }
 
 .homepage #page-document > .hero-block h2 {
@@ -13,16 +13,16 @@
 
 // remove padding from homepage content-area since we have the bg image over the header
 .homepage .content-area {
-    padding-top: 0 !important;
+  padding-top: 0 !important;
 }
 
 // show staging banner on homepage
 .homepage .stagingBanner {
-    display: block !important;
+  display: block !important;
 }
 
 // use homepage text color for color of cards that are within a content-box that has a variant class
-.homepage .content-box[class*="ary"] [class="ui fluid card"] {
+.homepage .content-box[class*='ary'] [class='ui fluid card'] {
   color: @blue-grey-5;
 }
 // set carousel arrow to homepage color
@@ -40,17 +40,21 @@
   .content {
     text-align: center;
   }
+
   svg.default {
     background-color: @grey-1;
   }
+
   svg.primary {
     background-color: @primaryColor;
     fill: @white !important;
   }
+
   svg.secondary {
     background-color: @secondaryColor;
     fill: @white !important;
   }
+
   svg.tertiary {
     background-color: @tertiaryColor;
     fill: @white !important;
@@ -68,7 +72,6 @@
   margin: 0;
 }
 
-
 // inherit font weight of styled headers so that if we set 300 weight it's visible also on
 // the edit page
 #page-edit .slate .styled h1,
@@ -87,31 +90,48 @@
 
 // customize error class from volto-slate to our color of red
 .error {
-    color: @red-5;
+  color: @red-5;
 }
 
 .power-user-menu,
-.blocks-chooser {
+.blocks-chooser,
+.tabs-block {
   --text-color: @textColor;
 }
+
 .blocks-chooser {
   .searchbox {
     height: auto !important;
   }
+
   .input {
     width: auto !important;
   }
+
   .clear-search-button {
     padding: 0.5rem;
   }
+
   .icon {
     margin-right: 0 !important;
   }
+
+  /* fix order and color of block choose title block
+   * which receives accordion title styling */
+  .button.title {
+    --text-color: @brown;
+    --text-color-hover: @brown;
+    --accordion-title-icon-order: 0;
+  }
 }
 
 // remove margin from block headings overriding blocks.less rule
-.block h1:last-child, .block h2:last-child, .block h3:last-child, .block h4:last-child, .block h5:last-child {
-    margin: 0;
+.block h1:last-child,
+.block h2:last-child,
+.block h3:last-child,
+.block h4:last-child,
+.block h5:last-child {
+  margin: 0;
 }
 
 // tweak padding of workflow progress titles now that
@@ -134,19 +154,20 @@
 
 // Tabs block border left/top
 .tabs-block {
-  .border-left {
-    border-right: none !important;
-    border-left: 0.0625rem solid @midGray !important;
+  // we don't want to show the active background color on the eea tabs
+  .tabs-accessibility {
+    --tab-active-bg-color: transparent;
+  }
 
-    .item.active {
-      border-right: none !important;
-      border-left-style: solid !important;
-      margin: 0em 0em 0em -0.2rem !important;
-    }
+  // make accordion transformed from rrt_tabs use same color bg as tabs
+  .tabs-accessibility .RRT__panel {
+    --bg-color: @white;
+  }
 
-    .item:active {
-      border-right: none !important;
-    }
+  // remove border from secondary active item so that when we use color
+  // it doesn't show a different color from the active background
+  .ui.secondary.inverted.menu .active.item {
+    border-color: transparent !important;
   }
 
   .border-top {
@@ -162,9 +183,9 @@
     }
 
     .item.active {
-      border-bottom: none !important;
       border-top-style: solid !important;
-      margin: 0em 0em 0em -0.2rem !important;
+      border-bottom: none !important;
+      margin: 0 0 0 -0.2rem !important;
     }
 
     .item:active {