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

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

@@ -1,3 +1,119 @@
+/*******************************
+     Pastanaga Theme Overrides
+*******************************/
+
+.ui.form .inline.field {
+  margin: 0;
+}
+
+.ui.form .inline.field.help .wrapper {
+  border-bottom: none;
+}
+
+.ui.form .inline.field.help {
+  padding-bottom: @15px;
+}
+
+.ui.form .inline.field .help {
+  padding-top: @10px;
+  padding-bottom: @10px;
+  border-bottom: 1px solid @lightGreyBorderColor;
+}
+
+.ui.form p.help {
+  color: #878f93;
+  font-size: @13px;
+  font-weight: 300;
+  line-height: initial;
+}
+
+.ui.form .ui.input input:not([type]),
+.ui.form .ui.input input[type='date'],
+.ui.form .ui.input input[type='datetime-local'],
+.ui.form .ui.input input[type='email'],
+.ui.form .ui.input input[type='number'],
+.ui.form .ui.input input[type='password'],
+.ui.form .ui.input input[type='search'],
+.ui.form .ui.input input[type='tel'],
+.ui.form .ui.input input[type='time'],
+.ui.form .ui.input input[type='text'],
+.ui.form .ui.input input[type='file'],
+.ui.form .ui.input input[type='url'],
+.ui.form textarea {
+  height: 60px;
+  padding: @inputVerticalPadding 0;
+  border-width: 0 0 @1px 0;
+  border-radius: 0;
+
+  &:focus {
+    border-radius: 0;
+  }
+}
+
+.ui.form .field > .selection.dropdown {
+  height: 60px;
+}
+
+.ui.form .DraftEditor-root {
+  border-bottom: @inputBorder;
+}
+
+// From the original, due to the wrapper around label
+.ui.form .field .wrapper > label {
+  display: block;
+  margin: @labelMargin;
+  color: @labelColor;
+  font-size: @labelFontSize;
+  font-weight: @labelFontWeight;
+  hyphens: auto;
+  text-transform: @labelTextTransform;
+}
+
+.ui.form .toolbar {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  display: flex;
+  height: 60px;
+  align-items: center;
+  margin-right: 1rem;
+
+  .item {
+    cursor: pointer;
+  }
+}
+
+.ui.form .field .ui.basic.button.delete-button {
+  padding: 0;
+  border: none;
+  margin-left: 10px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: #e40166 !important;
+  }
+}
+
+.ui.form .inline.field .link-form-container {
+  .wrapper {
+    display: flex;
+    border-bottom: 1px solid @lightGreyBorderColor;
+
+    .ui.input.input-anchorlink-theme {
+      vertical-align: unset;
+
+      input {
+        height: unset;
+      }
+    }
+  }
+}
+
 /*******************************
          Theme Overrides
 *******************************/

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;
 }
@@ -170,30 +178,81 @@ p.ui.button {
   opacity: @searchButtonIconOpacity;
 }
 
-.searchbox.field > .ui.action.input > .icon.button {
-  padding-top: 0;
-  padding-right: 0;
-  background: none;
-  color: @blue;
-  line-height: 1.6;
+/************* Inverted Buttons *************/
+// Override the light colors with the defaults
 
-  &:hover {
-    background: none;
-  }
+/* Primary - button.less - L:3128 */
+.ui.inverted.primary.buttons .button,
+.ui.inverted.primary.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @primaryColor inset !important;
+  color: @primaryColor;
+}
 
-  .icon {
-    font-weight: bold;
-  }
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover,
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus,
+.ui.inverted.primary.buttons .button.active,
+.ui.inverted.primary.button.active,
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  color: @invertedHoveredTextColor;
 }
 
-.ui.basic.button {
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: initial;
+.ui.inverted.primary.buttons .button:hover,
+.ui.inverted.primary.button:hover {
+  background-color: @primaryColorHover;
+}
 
-  &:focus {
-    outline: none;
-  }
+.ui.inverted.primary.buttons .button:focus,
+.ui.inverted.primary.button:focus {
+  background-color: @primaryColorFocus;
+}
+
+.ui.inverted.primary.buttons .active.button,
+.ui.inverted.primary.active.button {
+  background-color: @primaryColorActive;
+}
+
+.ui.inverted.primary.buttons .button:active,
+.ui.inverted.primary.button:active {
+  background-color: @primaryColorDown;
+}
+
+/* Secondary - button.less - L:3128 */
+.ui.inverted.secondary.buttons .button,
+.ui.inverted.secondary.button {
+  box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColor inset !important;
+  color: @secondaryColor;
+}
+
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover,
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus,
+.ui.inverted.secondary.buttons .button.active,
+.ui.inverted.secondary.button.active,
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  color: @invertedHoveredTextColor;
+}
+
+.ui.inverted.secondary.buttons .button:hover,
+.ui.inverted.secondary.button:hover {
+  background-color: @secondaryColorHover;
+}
+
+.ui.inverted.secondary.buttons .button:focus,
+.ui.inverted.secondary.button:focus {
+  background-color: @secondaryColorFocus;
+}
+
+.ui.inverted.secondary.buttons .active.button,
+.ui.inverted.secondary.active.button {
+  background-color: @secondaryColorActive;
+}
+
+.ui.inverted.secondary.buttons .button:active,
+.ui.inverted.secondary.button:active {
+  background-color: @secondaryColorDown;
 }

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/container.overrides

@@ -4,31 +4,16 @@
 
 /* All Sizes */
 .ui.container {
-  width: 100%;
-  padding-right: @mobilePadding;
-  padding-left: @mobilePadding;
   transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
     margin-left 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
     margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 
-// TODO fix issue of large container padding and then remove this fix
-#toolbar .pastanaga-menu .ui.container {
-  padding: @profileSectionPadding;
-}
 
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  .ui.container {
-    padding-right: @tabletPadding;
-    padding-left: @tabletPadding;
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  .ui.container {
-    padding-right: @computerPadding;
-    padding-left: @computerPadding;
-  }
+// add padding to containers on edit section so that we display add and delete buttons
+.section-edit .container {
+  padding: 0 3rem;
+  width: auto !important;
 }
 
 .contentWidth(@offset) {

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

@@ -13,14 +13,16 @@
 
 /* Minimum Gutter is used to determine  the maximum container width for a given device */
 
-@maxWidth: 1400px;
+@maxWidth: 100%;
+@scrollbarWidth: 16px;
 
 /* Devices */
 @mobileMinimumGutter: 0em;
 @mobileWidth: auto;
-@mobileGutter: 1rem;
+@mobileGutter: 1.25rem;
 
-@tabletMinimumGutter: (@emSize  * 1);
+@tabletEmSize: 14px;
+@tabletMinimumGutter: (@tabletEmSize  * 1);
 @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
 @tabletGutter: auto;
 
@@ -63,4 +65,3 @@
 @textSize: @large;
 
 /* Section */
-@profileSectionPadding: 0px;

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