@eeacms/volto-eea-design-system 0.2.1 → 0.2.2

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

@@ -1,142 +1,130 @@
 /*******************************
-         Theme Overrides
+      Pastanaga Theme Overrides
 *******************************/
 
-//Color for button text depends on background
-.text-color(@backColor) when (lightness(@backColor) >= 40%) {
-  color: @primaryButtonColor;
-}
-.text-color(@backColor) when (lightness(@backColor) < 40%) {
-  color: @white;
+.ui.circular.icon.button {
+  padding: @circularButtonPadding;
+
+  .icon {
+    font-size: @circularButtonIconFontSize;
+  }
 }
 
-/* Global Button Styles */
-// 147629 to remove later, basic buttons don't need borders, svg buttons are
-// basic and volto ui has elements that are highlighted because of it
-//.ui.button,
-//.ui.buttons .button,
-//.ui.buttons {
-//  border: @buttonBorder @backgroundColor;
-//
-//  &:hover,
-//  &:active,
-//  &:focus {
-//    border-color: @hoverBackgroundColor;
-//  }
-//}
-
-/* Primary Button Border */
-.ui.button.primary,
-.ui.buttons.primary {
-  border: @buttonBorder @primaryButtonColor;
+.searchbox.field > .ui.action.input > .icon.button {
+  padding-top: 0;
+  padding-right: 0;
+  background: none;
+  color: @blue;
+  line-height: 1.6;
 
-  &:hover,
-  &:focus {
-    border: @buttonBorder @primaryColorHover;
+  &:hover {
+    background: none;
   }
 
-  &:active {
-    border: @buttonBorder @primaryButtonBackgroundActive;
-    background: @primaryButtonBackgroundActive;
+  .icon {
+    font-weight: bold;
   }
 }
 
-.ui.disabled.primary.button,
-.ui.button.primary:disabled {
-  border: @buttonBorder @primaryButtonDisabledBackground;
-  background: @primaryButtonDisabledBackground;
-  opacity: @buttonDisabledOpacity !important;
-}
-
-/* Secondary Button */
-.ui.button.secondary,
-.ui.buttons.secondary {
-  border: @buttonBorder @secondaryButtonColor;
-  background-color: @secondaryButtonBackground;
-  color: @secondaryButtonColor;
+.ui.basic.icon.button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: initial;
 
-  &:hover,
-  &:active,
   &:focus {
-    background-color: @secondaryButtonColor;
-    color: @secondaryButtonColorHover;
+    outline: none;
   }
 }
 
-.ui.disabled.secondary.button,
-.ui.button.secondary:disabled {
-  border: @buttonBorder @secondaryButtonDisabledColor;
-  color: @secondaryButtonDisabledColor;
-  opacity: @buttonDisabledOpacity !important;
+.ui.basic.icon.primary.button,
+.ui.basic.icon.secondary.button {
+  box-shadow: none !important;
+
+  &:hover,
+  &:active {
+    background: transparent !important;
+    box-shadow: none !important;
+  }
 }
 
-/* Secondary Button Inverted */
-.ui.button.inverted.secondary,
-.ui.buttons.inverted.secondary {
-  border: @buttonBorder @secondaryButtonInvertedColor;
-  color: @secondaryButtonInvertedColor;
+.ui.noborder.button {
+  padding: 0 !important;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: initial;
 
-  &:hover,
-  &:active,
   &:focus {
-    background-color: @secondaryButtonInvertedColor;
-    color: @japaneseIndigo;
+    outline: none;
   }
 }
 
-ui.inverted.secondary.buttons .button,
-.ui.inverted.secondary.button {
-  box-shadow: none !important; // to override the important box shadow - button.less:3271
+.ui.noborder.button:not(.icon) > .icon:not(.button):not(.dropdown) {
+  margin: 0;
 }
 
-/* Call to action Button */
-.ui.button.action {
-  border: @buttonBorder @actionButtonBackground;
-  background-color: @actionButtonBackground;
-  color: @actionButtonColor;
+.ui.button.gallery {
+  background-color: transparent;
 
-  &:hover,
-  &:focus {
-    border: @buttonBorder @actionButtonBackgroundHover;
-    background-color: @actionButtonBackgroundHover;
+  .icon.circled {
+    margin: 0;
   }
+}
 
-  &:active {
-    border: @buttonBorder @actionButtonBackgroundActive;
-    background: @actionButtonBackgroundActive;
-  }
+/*******************************
+      EEA Theme Overrides
+*******************************/
+// ensure circular button gets the border color of the current text color
+// and acts as a circular button
+.ui.circular.icon.button {
+  padding: @circularButtonPadding;
+  border-width: @circularButtonBorderWidth;
+  border-color: @circularButtonBorderColor;
+  line-height: @circularButtonLineHeight;
 }
 
-.ui.button.action[class*='right labeled'].icon.button {
-  padding-right: 3em !important; // to apply to theme button paddings - button.less:856
+// toolbar yes and cancel icons go outside the button area with default line
+// height
+#toolbar .toolbar-content button,
+#toolbar .toolbar button {
+  line-height: @toolbarButtonLineHeight;
+}
 
-  i {
-    margin-right: 5px !important; // to apply to theme button paddings - button.less:693
-  }
+// Maps, Video and Image blocks use buttons without
+// icons, fix them in css for now
+#page-edit .basic.button {
+  padding: 0;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+// sidebar.less has original code
+// bump z-index of sidenav btn due to itml
+// .ui.secondary.pointing.menu:not(.vertical) overrides
+.ui.button.full-size-sidenav-btn {
+  z-index: 1;
 }
 
+/* Global Button Styles */
 /* Text Button */
 button.ui.button.text,
 button.ui.buttons.text,
 p.ui.button {
-  border: none;
   background-color: @textButtonBackground;
   color: @primaryColor;
+  text-decoration: underline;
 
   &:hover,
   &:active,
   &:focus {
-    border: none;
     background-color: @textButtonBackground;
     color: @primaryColorHover;
   }
-}
-
-.ui.circular.icon.button {
-  padding: @circularButtonPadding;
 
-  .icon {
-    font-size: @circularButtonIconFontSize;
+  &:focus {
+    box-shadow: @textButtonFocusedBoxShadow;
   }
 }
 
@@ -159,6 +147,26 @@ p.ui.button {
   }
 }
 
+/* Labeled and left and right icons on buttons */
+.ui.button:not(.icon) > .left.icon:not(.button):not(.dropdown),
+.ui.button:not(.icon) > .icon:not(.right) {
+  margin: @iconMargin;
+}
+
+/* Left Labeled */
+.ui.labeled.icon.buttons > .button > .icon,
+.ui.labeled.icon.button > .icon {
+  top: @labeledLeftTop;
+  left: @labeledLeftLeft;
+}
+
+/* Right Labeled */
+.ui[class*='right labeled'].icon.button > .icon {
+  top: @labeledRightTop;
+  right: @labeledRightRight;
+  left: @labeledRightLeft;
+}
+
 .ui.icon.left.labeled.button.search {
   padding-left: 3.375em !important;
 }
@@ -169,31 +177,3 @@ p.ui.button {
   font-size: @searchButtonFontSize;
   opacity: @searchButtonIconOpacity;
 }
-
-.searchbox.field > .ui.action.input > .icon.button {
-  padding-top: 0;
-  padding-right: 0;
-  background: none;
-  color: @blue;
-  line-height: 1.6;
-
-  &:hover {
-    background: none;
-  }
-
-  .icon {
-    font-weight: bold;
-  }
-}
-
-.ui.basic.button {
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: initial;
-
-  &:focus {
-    outline: none;
-  }
-}

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

@@ -38,6 +38,7 @@
 
 /* Text Button */
 @textButtonBackground: transparent;
+@textButtonFocusedBoxShadow: 0 0 0 2px @primaryColorHover inset;
 
 /* Search Button */
 @searchButtonBackground: transparent;
@@ -56,7 +57,7 @@
 
 /* Button defaults to using same height as input globally */
 @verticalPadding: @inputVerticalPadding;
-@horizontalPadding: 1.875em;
+@horizontalPadding: 1.75em;
 
 /* Text */
 @textTransform: none;
@@ -92,8 +93,8 @@
 @iconTransition: opacity @defaultDuration @defaultEasing;
 @iconVerticalAlign: '';
 
-@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2);
-@rightIconMargin: 0em -(@iconDistance / 2) 0em @iconDistance;
+@iconMargin: 0 @iconDistance 0 -(@iconDistance / 2); // 0 means there is no margin between the icon and the button
+@rightIconMargin: 0 -(@iconDistance / 2) 0 @iconDistance;
 
 /* Loader */
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
@@ -213,11 +214,18 @@
 @labeledLabelBorderOffset: -@borderBoxShadowWidth;
 @labeledTagLabelSize: 1.85em; /* hypotenuse of triangle */
 @labeledIconMargin: 0em;
+/* Labeled left */
+@labeledLeftTop: 0;
+@labeledLeftLeft: 0.85em;
+/* Labeled Right */
+@labeledRightTop: 0;
+@labeledRightLeft: auto;
+@labeledRightRight: 0.85em;
 
 /* Labeled Icon */
 @labeledIconWidth: 1em + (@verticalPadding * 2);
 @labeledIconBackgroundColor: none;
-@labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
+@labeledIconPadding: 3em; //(@horizontalPadding + @labeledIconWidth);
 @labeledIconBorder: transparent;
 @labeledIconColor: '';
 
@@ -292,8 +300,11 @@
 @basicGroupBoxShadow: none;
 
 /* Circular */
-@circularButtonPadding: 0.75em 0.25em 0;
-@circularButtonIconFontSize: 2rem;
+@circularButtonBorderWidth: 2px;
+@circularButtonBorderColor: currentColor;
+@circularButtonPadding: 0.25em;
+@circularButtonIconFontSize: 1.375em;
+@circularButtonLineHeight: 1;
 
 /*-------------------
       Variations
@@ -403,3 +414,6 @@
 @animationEasing: ease;
 @fadeScaleHigh: 1.5;
 @fadeScaleLow: 0.75;
+
+/* Pastanaga Toolbar Button */
+@toolbarButtonLineHeight: 0.75;

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

@@ -20,30 +20,39 @@
 }
 
 // Custom variations and combinations in slate
-.ui.label.medium, .ui.label.high, .ui.label.highlight {
+.ui.label.medium,
+.ui.label.high,
+.ui.label.highlight {
   a {
     color: @color;
     opacity: @labelOpacity;
     text-decoration: @labelTextDecoration;
+
     &:hover {
       text-decoration: @labelNoTextDecoration;
     }
   }
+
   .slate-editor-link {
     color: @color;
     text-decoration: @labelTextDecoration;
   }
+
   span[aria-describedby='footnote-label'] {
     color: @color;
   }
-  .footnote-edit-node, .citation-item {
+
+  .footnote-edit-node,
+  .citation-item {
     background: @labelNoBackground;
 
     &::after {
       color: @color;
     }
   }
-  .metadata.mention.edit, .metadata.mention.empty {
+
+  .metadata.mention.edit,
+  .metadata.mention.empty {
     background: @labelNoBackground;
   }
 }

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

@@ -156,7 +156,7 @@
 @lowImportanceBackground: @deepBlue;
 @mediumImportanceBackground: #346F83;
 @highImportanceBackground: #005293;
-@highlightImportanceBackground: #009591;
+@highlightImportanceBackground: @secondaryColor;
 
 @redTextColor: @white;
 @orangeTextColor: @white;

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

@@ -14,6 +14,10 @@ div.ui.list > .item .description {
   margin: @itemDescriptionMarginTop;
 }
 
+dl dd {
+  margin-inline-start: @descriptionMarginInlineStart;
+}
+
 /* Unordered list */
 .ui.bulleted.list .list > .item:before,
 .ui.bulleted.list .list > a.item:before,
@@ -23,6 +27,12 @@ ul.ui.list li:before {
   font-size: @bulletSize;
 }
 
+// Third layer margin fix
 .ui.ordered.list .list .list > .item:before {
   margin-left: @orderedGrandchildCountOffset;
 }
+
+// Fourth layer margin fix
+.ui.ordered.list .list .list .list > .item:before {
+  margin-left: @orderedGreatGrandchildCountOffset;
+}

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

@@ -22,7 +22,7 @@
 @itemLineHeight: @relativeBig;
 
 /* Sub List */
-@childListPadding: 0.75em 0em 0.25em 0.5em;
+@childListPadding: 0.25em 0em 0.25em 0.5em;
 @childListIndent: 1em;
 
 /* Sub List Item */
@@ -63,6 +63,7 @@
 /* Description */
 @itemDescriptionColor: rgba(0, 0, 0, 0.7);
 @itemDescriptionMarginTop: 0.5rem 0;
+@descriptionMarginInlineStart: 0;
 
 /* Link */
 @itemLinkColor: @linkColor;
@@ -190,6 +191,7 @@
 @orderedChildCountDistance: 1em;
 @orderedChildCountOffset: -2em;
 @orderedGrandchildCountOffset: -2.8em;
+@orderedGreatGrandchildCountOffset: -3.8em;
 
 @orderedInvertedCountColor: @invertedLightTextColor;
 

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

@@ -1,3 +1,200 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+.ui.loader.eea-loader:after,
+.ui.loader.eea-loader:before {
+  display: none;
+}
+
+.ui.text.loader.eea-loader {
+  display: flex;
+  min-width: @eeaLoaderMinWidth;
+  max-width: @eeaLoaderMaxWidth;
+  align-items: end;
+  justify-content: center;
+  padding: @eeaLoaderPadding;
+  animation: loaderPulse ease-out 2.5s infinite;
+  background: @eeaLoaderBackground;
+  background-image: linear-gradient(
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    ),
+    url('../assets/images/loaderImage.png');
+  background-position: @eeaLoaderBackgroundPosition;
+  background-repeat: no-repeat;
+  border-radius: @eeaLoaderBorderRadius;
+  color: @eeaLoaderTextColor;
+  font-size: @bigFontSize;
+  font-weight: @eeaLoaderTextFontWeight;
+}
+
+@keyframes loaderPulse {
+  0% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  5% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  10% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  15% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.1),
+        rgba(255, 255, 255, 0.1)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  20% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.2)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  25% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.3),
+        rgba(255, 255, 255, 0.3)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  30% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.4),
+        rgba(255, 255, 255, 0.4)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  35% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.5),
+        rgba(255, 255, 255, 0.5)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  40% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.6),
+        rgba(255, 255, 255, 0.6)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  45% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.7),
+        rgba(255, 255, 255, 0.7)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  50% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.75),
+        rgba(255, 255, 255, 0.8)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  55% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.7),
+        rgba(255, 255, 255, 0.7)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  60% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.6),
+        rgba(255, 255, 255, 0.6)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  65% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.5),
+        rgba(255, 255, 255, 0.5)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  70% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.4),
+        rgba(255, 255, 255, 0.4)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  75% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.3),
+        rgba(255, 255, 255, 0.3)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  80% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.2)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  85% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.1),
+        rgba(255, 255, 255, 0.1)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  90% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  95% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  100% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+}

package/theme/themes/eea/elements/loader.variables

@@ -29,7 +29,6 @@
 @loaderTextColor: @textColor;
 @invertedLoaderTextColor: @invertedTextColor;
 
-
 /*-------------------
         States
 --------------------*/
@@ -44,6 +43,18 @@
 @inlineVerticalAlign: middle;
 @inlineMargin: 0em;
 
+/*-------------------
+      EEA Loader
+--------------------*/
+@eeaLoaderPadding: 8.5rem 2rem 1.5rem 2rem;
+@eeaLoaderMinWidth: 190px;
+@eeaLoaderMaxWidth: 210px;
+@eeaLoaderBackground: @white;
+@eeaLoaderBackgroundPosition: center 1.5rem;
+@eeaLoaderBorderRadius: 4.5rem 2rem 0 2rem;
+@eeaLoaderTextColor: @primaryColor;
+@eeaLoaderTextFontWeight: @bold;
+
 /* Exact Sizes (Avoids Rounding Errors) */
 @mini    : @14px;
 @tiny    : @16px;

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

@@ -127,8 +127,8 @@
 @coloredBorderSize: 2px;
 
 /* Ordinality */
-@secondaryBackground: @deepBlue;
-@secondaryColor: @white;
+@secondaryBackground: @tealBackground;
+@secondaryColor: @textColor;
 
 @tertiaryBackground:  @midWhite;
 @tertiaryColor: @mutedTextColor;