@eeacms/volto-eea-design-system 0.2.1

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

@@ -0,0 +1,471 @@
+/*******************************
+             Menu
+*******************************/
+
+/*-------------------
+      Collection
+--------------------*/
+
+/* Menu */
+@verticalMargin: @medium;
+@horizontalMargin: 0em;
+@margin: @verticalMargin @horizontalMargin;
+@background: #FFFFFF;
+@fontFamily: @pageFont;
+@itemBackground: none;
+@fontWeight: @normal;
+@borderWidth: 1px;
+@border: @borderWidth solid @borderColor;
+@boxShadow: @subtleShadow;
+@borderRadius: @defaultBorderRadius;
+@minHeight: (@itemVerticalPadding * 2) + 1em;
+
+/* Menu Item */
+@itemVerticalPadding: @relativeSmall;
+@itemHorizontalPadding: @relativeLarge;
+@itemTextTransform: none;
+@itemTransition:
+  background @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing
+;
+@itemFontWeight: @normal;
+@itemTextColor: @deepBlue;
+
+/* Divider */
+@dividerSize: 1px;
+@dividerBackground: @internalBorderColor;
+
+/* Sub Menu */
+@subMenuDistance: 0.5em;
+@subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0em;
+@subMenuFontSize: @relativeTiny;
+@subMenuTextColor: rgba(0, 0, 0, 0.5);
+
+@subMenuIndent: 0em;
+@subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
+@subMenuVerticalPadding: 0.5em;
+
+/* Text Item */
+@textLineHeight: 1.3;
+
+/*--------------
+    Elements
+---------------*/
+
+/* Icon */
+@iconFloat: none;
+@iconMargin: 0em @relative5px 0em @relative5px;
+@iconOpacity: 0.9;
+
+/* Dropdown Icon */
+@dropdownIconFloat: right;
+@dropdownIconDistance: 1em;
+
+/* Header */
+@headerBackground: '';
+@headerWeight: @bold;
+@headerTextTransform: @normal;
+
+/* Vertical Icon */
+@verticalIconFloat: none;
+@verticalIconMargin: 0em 0em 0em 0.5em;
+
+/* Vertical Header */
+@verticalHeaderMargin: 0em 0em 0.5em;
+@verticalHeaderFontSize: @relativeMedium;
+@verticalHeaderFontWeight: @bold;
+
+/* Pointing Arrow */
+@arrowSize: @relative8px;
+@arrowBorderWidth: 1px;
+@arrowBorder: @arrowBorderWidth solid @solidBorderColor;
+@arrowTransition: background @defaultDuration @defaultEasing;
+@arrowZIndex: 2;
+
+@arrowHoverColor: #F2F2F2;
+@arrowActiveColor: @arrowHoverColor;
+@arrowActiveHoverColor: @arrowActiveColor;
+
+@arrowVerticalHoverColor: @arrowHoverColor;
+@arrowVerticalActiveColor: @arrowActiveColor;
+@arrowVerticalSubMenuColor: @white;
+
+/*--------------
+    Couplings
+---------------*/
+
+/* Button */
+@buttonSize: @relativeMedium;
+@buttonOffset: 0em;
+@buttonMargin: -0.5em 0em;
+@buttonVerticalPadding: @relativeMini;
+
+/* Input */
+@inputSize: @relativeMedium;
+@inputVerticalMargin: -0.5em;
+@inputOffset: 0em;
+@inputVerticalPadding: @relative8px;
+
+/* Image */
+@imageMargin: -0.3em 0em;
+@imageWidth: 2.5em;
+@verticalImageWidth: auto;
+
+/* Label */
+@labelOffset: -0.15em;
+@labelBackground: #999999;
+@labelTextColor: @white;
+
+@labelTextMargin: 1em;
+@labelVerticalPadding: 0.3em;
+@labelHorizontalPadding: @relativeMini;
+
+@labelAndIconFloat: none;
+@labelAndIconMargin: 0em 0.5em 0em 0em;
+
+/* Dropdown in Menu */
+@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
+
+@dropdownBackground: #FFFFFF;
+@dropdownMenuDistance: 0em;
+@dropdownMenuBorderRadius: @borderRadius;
+
+@dropdownItemFontSize: @relativeMedium;
+@dropdownItemPadding: @relativeMini @relativeLarge;
+@dropdownItemBackground: transparent;
+@dropdownItemColor: @textColor;
+@dropdownItemTextTransform: none;
+@dropdownItemFontWeight: @normal;
+@dropdownItemBoxShadow: none;
+@dropdownItemTransition: none;
+
+@dropdownItemIconFloat: none;
+@dropdownItemIconFontSize: @relativeMedium;
+@dropdownItemIconMargin: 0em 0.75em 0em 0em;
+
+@dropdownHoveredItemBackground: @transparentBlack;
+@dropdownHoveredItemColor: @selectedTextColor;
+
+/* Dropdown Variations */
+@dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
+@secondaryDropdownMenuDistance: @relative5px;
+@pointingDropdownMenuDistance: 0.75em;
+@invertedSelectionDropdownColor: @invertedTextColor;
+
+/*--------------
+     States
+---------------*/
+
+/* Hovered Item */
+@hoverItemBackground: none;
+@hoverItemTextColor: @selectedTextColor;
+
+/* Pressed Item */
+@pressedItemBackground: none;
+@pressedItemTextColor: @hoverItemTextColor;
+
+
+/* Active Item */
+@activeItemBackground: none;
+@activeItemTextColor: @selectedTextColor;
+@activeItemFontWeight: @normal;
+@activeIconOpacity: 1;
+@activeItemBoxShadow: none;
+
+/* Active Hovered Item */
+@activeHoverItemBackground: @transparentBlack;
+@activeHoverItemColor: @selectedTextColor;
+
+/* Selected Dropdown */
+@dropdownSelectedItemBackground: @transparentBlack;
+@dropdownSelectedItemColor: @selectedTextColor;
+
+/* Active Dropdown */
+@dropdownActiveItemBackground: @subtleTransparentBlack;
+@dropdownActiveItemColor: @selectedTextColor;
+@dropdownActiveItemFontWeight: @bold;
+
+/* Active Sub Menu */
+@subMenuActiveBackground: transparent;
+@subMenuActiveTextColor: @activeItemTextColor;
+@subMenuActiveFontWeight: @bold;
+
+
+/*--------------
+     Types
+---------------*/
+
+/* Vertical */
+@verticalBoxShadow: @boxShadow;
+@verticalPointerWidth: 2px;
+@verticalBackground: #FFFFFF;
+@verticalItemBackground: none;
+@verticalDividerBackground: @dividerBackground;
+
+@verticalActiveBoxShadow: none;
+
+
+/* Secondary */
+@secondaryBackground: none;
+@secondaryMargin: 0em -@secondaryItemSpacing;
+@secondaryItemBackground: none;
+@secondaryItemSpacing: @relative5px;
+@secondaryItemMargin: 0em @secondaryItemSpacing;
+@secondaryItemVerticalPadding: @relativeMini;
+@secondaryItemHorizontalPadding: @relativeSmall;
+@secondaryItemPadding: @relativeMini @relativeSmall;
+@secondaryItemBorderRadius: @defaultBorderRadius;
+@secondaryItemTransition: none;
+@secondaryItemColor: @unselectedTextColor;
+
+@secondaryHoverItemBackground: @transparentBlack;
+@secondaryHoverItemColor: @selectedTextColor;
+
+@secondaryActiveItemBackground: @transparentBlack;
+@secondaryActiveItemColor: @selectedTextColor;
+@secondaryActiveHoverItemBackground: @transparentBlack;
+@secondaryActiveHoverItemColor: @selectedTextColor;
+
+@secondaryActiveHoveredItemBackground: @transparentBlack;
+@secondaryActiveHoveredItemColor: @selectedTextColor;
+
+@secondaryHeaderBackground: none transparent;
+@secondaryHeaderBorder: none;
+
+@secondaryItemVerticalSpacing: @secondaryItemSpacing;
+@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
+@secondaryVerticalItemBorderRadius: @defaultBorderRadius;
+
+@secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding;
+@secondaryMenuSubMenuItemMargin: 0em;
+@secondarySubMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
+@secondaryMenuSubMenuItemPadding: @relative7px @secondarySubMenuHorizontalPadding;
+
+/* Pointing */
+@secondaryPointingBorderWidth: @1px;
+@secondaryPointingActiveBorderWidth: @3px;
+@secondaryPointingBorderColor: @midGray;
+@secondaryPointingItemMargin: 0 1.25rem;
+@secondaryPointingItemVerticalPadding: @tinyGap;
+@secondaryPointingItemActiveVerticalPadding: unit((@relativeTiny - @3px), rem);
+@tabSecondaryPointingItemActiveVerticalPadding: unit((@relativeTiny), rem);
+@secondaryPointingItemHorizontalPadding: @largeGap;
+// Pastanaga custom
+@secondaryPointingItemTextTransform: uppercase;
+
+@secondaryPointingHoverTextColor: @textColor;
+
+@secondaryPointingActiveBorderColor: @secondaryColor;
+@secondaryPointingActiveTextColor: @secondaryColor;
+@secondaryPointingActiveFontWeight: @normal;
+
+@secondaryPointingActiveDropdownBorderColor: transparent;
+
+@secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor;
+@secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
+
+@secondaryPointingHeaderColor: @darkTextColor;
+@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
+
+
+@secondaryPointingItemBorderBottom: @1px solid @midGray;
+@secondaryPointingItemMaxWidth: 15.625rem; 
+
+/* Inverted Secondary */
+@secondaryInvertedColor: @invertedLightTextColor;
+
+@secondaryInvertedHoverBackground: @transparentWhite;
+@secondaryInvertedHoverColor: @invertedSelectedTextColor;
+
+@secondaryInvertedActiveBackground: @strongTransparentWhite;
+@secondaryInvertedActiveColor: @invertedSelectedTextColor;
+
+/* Inverted Pointing */
+@secondaryPointingInvertedBorderColor: @whiteBorderColor;
+@secondaryPointingInvertedItemTextColor: @invertedTextColor;
+@secondaryPointingInvertedItemHeaderColor: @white;
+@secondaryPointingInvertedItemHoverTextColor: @selectedTextColor;
+@secondaryPointingInvertedActiveBorderColor: @white;
+@secondaryPointingInvertedActiveColor: @invertedSelectedTextColor;
+
+
+/* Tiered */
+@tieredActiveItemBackground: #FCFCFC;
+@tieredActiveMenuBackground: #FCFCFC;
+
+@tieredSubMenuTextTransform: @normal;
+@tieredSubMenuFontWeight: @normal;
+
+@tieredSubMenuColor: @lightTextColor;
+
+@tieredSubMenuHoverBackground: none transparent;
+@tieredSubMenuHoverColor: @hoveredTextColor;
+
+@tieredSubMenuActiveBackground: none transparent;
+@tieredSubMenuActiveColor: @selectedTextColor;
+
+@tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
+
+
+/* Icon */
+@iconMenuTextAlign: center;
+@iconMenuItemColor: @grey;
+@iconMenuInvertedItemColor: @white;
+
+
+/* Tabular */
+@tabularBorderColor: @solidBorderColor;
+@tabularBackgroundColor: transparent;
+@tabularBackground: none @tabularBackgroundColor;
+@tabularBorderWidth: 1px;
+@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
+@tabularVerticalPadding: @itemVerticalPadding;
+@tabularHorizontalPadding: @relativeHuge;
+@tabularBorderRadius: @defaultBorderRadius;
+@tabularTextColor: @itemTextColor;
+
+@tabularHoveredTextColor: @hoveredTextColor;
+
+@tabularVerticalBackground: none @tabularBackgroundColor;
+
+@tabularFluidOffset: 1px;
+@tabularFluidWidth: calc(100% + (@tabularFluidOffset * 2));
+
+@tabularActiveBackground: none @white;
+@tabularActiveColor: @selectedTextColor;
+@tabularActiveBoxShadow: none;
+@tabularActiveWeight: @bold;
+
+
+
+/* Pagination */
+@paginationFontSize: 0.875rem;
+@paginationWidth: 100%;
+@paginationColor: @deepBlue;
+@paginationMinWidth: 2em;
+@paginationActiveBackground: @transparentBlack;
+@paginationActiveTextColor: @selectedTextColor;
+
+/* Labeled Icon */
+@labeledIconItemHorizontalPadding: @relativeMassive;
+@labeledIconSize: @relativeMassive;
+@labeledIconMinWidth: 6em;
+@labeledIconTextMargin: 0.5rem;
+
+
+/* Text */
+@textMenuItemSpacing: @relative7px;
+@textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
+@textMenuItemColor: @mutedTextColor;
+@textMenuItemFontWeight: @normal;
+@textMenuItemMargin: 0em 0em;
+@textMenuItemPadding: @relative5px @textMenuItemSpacing;
+@textMenuItemTransition: opacity @defaultDuration @defaultEasing;
+
+@textMenuSubMenuMargin: 0em;
+@textMenuSubMenuItemMargin: 0em;
+@textMenuSubMenuItemPadding: @relative7px 0em;
+
+@textMenuActiveItemFontWeight: @normal;
+@textMenuActiveItemColor: @selectedTextColor;
+@secondaryPointingctiveItemMarginBottom: @2px;
+
+@textMenuHeaderSize: @relativeSmall;
+@textMenuHeaderColor: @darkTextColor;
+@textMenuHeaderFontWeight: @bold;
+@textMenuHeaderTextTransform: uppercase;
+
+@textVerticalMenuMargin: @relativeMedium 0em;
+@textVerticalMenuHeaderMargin: @relative8px 0em @relative10px;
+@textVerticalMenuItemMargin: @relative8px 0em;
+
+@textVerticalMenuIconFloat: none;
+@textVerticalMenuIconMargin: @iconMargin;
+
+
+/*--------------
+   Variations
+---------------*/
+
+/* Inverted */
+@invertedBackground: @black;
+@invertedBoxShadow: none;
+@invertedBorder: 0px solid transparent;
+@invertedHeaderBackground: transparent;
+
+@invertedItemBackground: transparent;
+@invertedItemTextColor: @invertedTextColor;
+
+/* Inverted Sub Menu */
+@invertedSubMenuBackground: transparent;
+@invertedSubMenuColor: @invertedUnselectedTextColor;
+
+/* Inverted Hover */
+@invertedHoverBackground: @transparentWhite;
+@invertedHoverColor: @invertedSelectedTextColor;
+
+@invertedSubMenuHoverBackground: transparent;
+@invertedSubMenuHoverColor: @invertedSelectedTextColor;
+
+/* Pressed */
+@invertedMenuPressedBackground: @transparentWhite;
+@invertedMenuPressedColor: @invertedSelectedTextColor;
+
+/* Inverted Active */
+@invertedActiveBackground: @strongTransparentWhite;
+@invertedActiveColor: @invertedSelectedTextColor;
+@invertedArrowActiveColor: #3D3E3F;
+
+/* Inverted Active Hover  */
+@invertedActiveHoverBackground: @invertedActiveBackground;
+@invertedActiveHoverColor: @white;
+@invertedArrowActiveHoverColor: @invertedArrowActiveColor;
+
+@invertedSubMenuActiveBackground: transparent;
+@invertedSubMenuActiveColor: @white;
+
+/* Inverted Menu Divider */
+@invertedDividerBackground: rgba(255, 255, 255, 0.08);
+@invertedVerticalDividerBackground: @invertedDividerBackground;
+
+/* Inverted Colored */
+@invertedColoredDividerBackground: @dividerBackground;
+@invertedColoredActiveBackground: @strongTransparentBlack;
+
+/* Fixed */
+@fixedPrecedingGridMargin: 2.75rem;
+
+/* Floated */
+@floatedDistance: 0.5rem;
+
+/* Attached */
+@attachedTopOffset: 0px;
+@attachedBottomOffset: 0px;
+@attachedHorizontalOffset: -@borderWidth;
+@attachedWidth: calc(100% - (@attachedHorizontalOffset * 2));
+@attachedBoxShadow: none;
+@attachedBorder: @borderWidth solid @solidBorderColor;
+@attachedBottomBoxShadow:
+  @boxShadow,
+  @attachedBoxShadow
+;
+
+/* Resize large sizes */
+@mini: @9px;
+@tiny: @12px;
+@small: @13px;
+@large: @15px;
+@big: @16px;
+@huge: @17px;
+@massive: @18px;
+
+/* Sizes */
+@miniWidth: 6rem;
+@tinyWidth: 11rem;
+@smallWidth: 13rem;
+@mediumWidth: 15rem; // pastanaga wants 6rem as well
+@largeWidth: 18rem;
+@bigWidth: 20rem;
+@hugeWidth: 22rem;
+@massiveWidth: 25rem;

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

@@ -0,0 +1,34 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+/* Text size and weight */
+.ui.message p {
+  font-size: @messageFontSize;
+  font-weight: @messageFontWeight;
+}
+
+/* Text color for non state messages */
+.ui.message:not(.success):not(.error):not(.warning):not(.info):not(.negative):not(.positive) {
+  color: @messageColor;
+}
+
+/* Align icon next to header */
+.ui.icon.message {
+  align-items: @messageItemsAlign;
+}
+
+/* Icon margin to align with header text size */
+div.ui.icon.message > .icon,
+div.ui.icon.message > .icon:not(.close) {
+  margin: @iconMargin;
+}
+
+.ui.success.message,
+.ui.warning.message,
+.ui.error.message,
+.ui.info.message,
+.ui.positive.message,
+.ui.negative.message {
+  background: @background;
+}

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

@@ -0,0 +1,142 @@
+/*******************************
+            Message
+*******************************/
+
+
+/*-------------------
+       Elements
+--------------------*/
+
+@verticalMargin: 1em;
+@verticalPadding: 0.5rem;
+@horizontalPadding: 0;
+@padding: @verticalPadding @horizontalPadding;
+@background: transparent;
+@lineHeightOffset: ((@lineHeight - 1em) / 2);
+@messageItemsAlign: flex-start;
+
+@borderRadius: @defaultBorderRadius;
+@borderWidth: 0;
+@borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset;
+@shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+@boxShadow: none;
+
+@transition:
+  opacity @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  background @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing
+;
+
+/* Header */
+@headerFontSize: 0.875rem;
+@headerFontWeight: @bold;
+@headerDisplay: block;
+@headerDistance: 0rem;
+@headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em;
+@headerParagraphDistance: 0.15em;
+
+/* Paragraph */
+@messageTextOpacity: 1;
+@messageParagraphMargin: 0;
+@messageColor: @black;
+@messageFontSize: 0.875rem;
+@messageFontWeight: @bold;
+
+/* List */
+@listOpacity: 0.85;
+@listStylePosition: inside;
+@listMargin: 0.5em;
+@listItemIndent: 1em;
+@listItemMargin: 0.3em;
+
+/* Icon */
+@iconDistance: 0.3em;
+
+/* Close Icon */
+@closeTopDistance: @verticalPadding - @lineHeightOffset;
+@closeRightDistance: 0.5em;
+@closeOpacity: 0.7;
+@closeTransition: opacity @defaultDuration @defaultEasing;
+
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Icon Message */
+@iconMargin: 0.09rem 0.6rem 0 0;
+@iconSize: 1rem;
+@iconOpacity: 1;
+@iconContentDistance: 0rem;
+@iconVerticalAlign: top;
+
+/* Attached */
+@attachedXOffset: 0;
+@attachedYOffset: 0;
+@attachedBoxShadow: 0em 0em 0em @borderWidth @borderColor inset;
+@attachedBottomBoxShadow:
+  @attachedBoxShadow,
+  @subtleShadow
+;
+
+/* Floating */
+@floatingBoxShadow:
+  @borderShadow,
+  @floatingShadow
+;
+
+/* Colors */
+@redBoxShadow:
+  0px 0px 0px @borderWidth @redBorderColor inset,
+  @shadowShadow
+;
+@orangeBoxShadow:
+  0px 0px 0px @borderWidth @orangeBorderColor inset,
+  @shadowShadow
+;
+@yellowBoxShadow:
+  0px 0px 0px @borderWidth @yellowBorderColor inset,
+  @shadowShadow
+;
+@oliveBoxShadow:
+  0px 0px 0px @borderWidth @oliveBorderColor inset,
+  @shadowShadow
+;
+@greenBoxShadow:
+  0px 0px 0px @borderWidth @greenBorderColor inset,
+  @shadowShadow
+;
+@tealBoxShadow:
+  0px 0px 0px @borderWidth @tealBorderColor inset,
+  @shadowShadow
+;
+@blueBoxShadow:
+  0px 0px 0px @borderWidth @blueBorderColor inset,
+  @shadowShadow
+;
+@violetBoxShadow:
+  0px 0px 0px @borderWidth @violetBorderColor inset,
+  @shadowShadow
+;
+@purpleBoxShadow:
+  0px 0px 0px @borderWidth @purpleBorderColor inset,
+  @shadowShadow
+;
+@pinkBoxShadow:
+  0px 0px 0px @borderWidth @pinkBorderColor inset,
+  @shadowShadow
+;
+@brownBoxShadow:
+  0px 0px 0px @borderWidth @brownBorderColor inset,
+  @shadowShadow
+;
+
+/* Warning / Positive / Negative / Info */
+@positiveBoxShadow: none;
+@negativeBoxShadow: none;
+@infoBoxShadow: none;
+@warningBoxShadow: none;
+@errorBoxShadow: none;
+@successBoxShadow: none;
+

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

@@ -0,0 +1,30 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+.ui.table {
+  thead {
+    tr th {
+      font-size: @headerFontSize;
+    }
+  }
+
+  tbody tr:hover {
+    background-color: @tableHoverBackgroundColor;
+  }
+
+  tr th {
+    padding: @headerVerticalPadding @headerHorizontalPadding;
+    border-bottom: @headerBorder;
+    border-left: @headerDivider;
+    background: @headerBackground;
+    color: @headerColor;
+    cursor: auto;
+    font-size: @headerFontSize;
+    font-style: @headerFontStyle;
+    font-weight: @headerFontWeight;
+    text-align: @headerAlign;
+    text-transform: @headerTextTransform;
+    vertical-align: @headerVerticalAlign;
+  }
+}