@eeacms/volto-eea-design-system 0.2.1

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

@@ -0,0 +1,211 @@
+/*******************************
+             Form
+*******************************/
+
+/*-------------------
+       Elements
+--------------------*/
+
+/* Form */
+@gutterWidth: 1em;
+@rowDistance: 1em;
+
+/* Text */
+@paragraphMargin: @rowDistance 0em;
+
+/* Field */
+@fieldMargin: 0em 0em @rowDistance;
+
+/* Fields */
+@fieldsMargin: 0em -(@gutterWidth / 2) @rowDistance;
+
+/* Form Label */
+@labelDistance: @4px;
+@labelMargin: 0em 0em @labelDistance 0em;
+@labelFontSize: @14px;
+@labelFontWeight: normal;
+@labelTextTransform: none;
+@labelColor: @textColor;
+@formErrorLabelColor: @white;
+
+/* Input */
+@inputFont: @pageFont;
+@inputWidth: 100%;
+@inputFontSize: 1em;
+@inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
+@inputBorderColor : rgba(0, 0, 0, 0.32);
+@inputBorder: 1px solid @inputBorderColor;
+@inputBorderRadius: @absoluteBorderRadius;
+@inputColor: @textColor;
+@inputTransition:
+  color @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+@inputBoxShadow: 0em 0em 0em 0em transparent inset;
+
+/* Select */
+@selectBackground: @white;
+@selectBorderRadius: @inputBorderRadius;
+@selectBorder: @inputBorder;
+@selectPadding: 0.62em @inputHorizontalPadding;
+@selectBoxShadow: @inputBoxShadow;
+@selectTransition: @inputTransition;
+@selectColor: @inputColor;
+
+/* Text Area */
+@textAreaPadding: @inputVerticalPadding @inputHorizontalPadding;
+@textAreaHeight: 12em;
+@textAreaResize: vertical;
+@textAreaLineHeight: 1.2857;
+@textAreaMinHeight: 8em;
+@textAreaMaxHeight: 24em;
+@textAreaBackground: @inputBackground;
+@textAreaBorder: @inputBorder;
+@textAreaFontSize: @inputFontSize;
+@textAreaTransition: @inputTransition;
+
+/* Checkbox */
+@checkboxVerticalAlign: top;
+@checkboxLabelFontSize: 1em;
+@checkboxLabelTextTransform: @labelTextTransform;
+
+/* Inline Validation Prompt */
+@promptBackground: @white;
+@promptBorderColor: @formErrorBorder;
+@promptBorder: 1px solid @promptBorderColor;
+@promptTextColor: @formErrorColor;
+@inlinePromptMargin: -0.25em 0em -0.5em 0.5em;
+@inlinePromptBorderWidth: 1px;
+
+/* Message */
+@formMessageMargin: 0;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Focus */
+@inputFocusPointerSize: 0px;
+
+/* Input Focus */
+@inputFocusBackground: @inputBackground;
+@inputFocusBorderColor: @focusedFormBorderColor;
+@inputFocusColor: @textColor;
+@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset;
+@inputFocusBorderRadius: @inputBorderRadius;
+
+/* Text Area Focus */
+@textAreaFocusBackground: @inputFocusBackground;
+@textAreaFocusBorderColor: @inputFocusBorderColor;
+@textAreaFocusColor: @inputFocusColor;
+@textAreaFocusBoxShadow: @inputFocusBoxShadow;
+@textAreaFocusBorderRadius: @inputFocusBorderRadius;
+
+/* Disabled */
+@disabledLabelOpacity: @disabledOpacity;
+
+/* Errored Input */
+@formErrorColor: @negativeTextColor;
+@formErrorBorder: @negativeBorderColor;
+@formErrorBackground: @negativeBackgroundColor;
+
+/* AutoFill */
+@inputAutoFillBackground: #FFFFF0;
+@inputAutoFillBorder: #E5DFA1;
+@inputAutoFillFocusBackground: @inputAutoFillBackground;
+@inputAutoFillFocusBorder: #D5C315;
+@inputAutoFillErrorBackground: #FFFAF0;
+@inputAutoFillErrorBorder: #E0B4B4;
+
+
+/* Input Error */
+@inputErrorBorderRadius: '';
+@inputErrorBoxShadow: none;
+
+/* Dropdown Error */
+@dropdownErrorHoverBackground: @white;
+@dropdownErrorSelectedBackground: @dropdownErrorHoverBackground;
+@dropdownErrorActiveBackground: @white;
+@dropdownErrorLabelBackground: #EACBCB;
+@dropdownErrorLabelColor: @errorTextColor;
+
+/* Focused Error */
+@inputErrorFocusBackground: @negativeBackgroundColor;
+@inputErrorFocusColor: @negativeTextColor;
+@inputErrorFocusBorder: @negativeBorderColor;
+@inputErrorFocusBoxShadow: none;
+
+/* Placeholder Error */
+@inputErrorPlaceholderColor: lighten(@formErrorColor, 40);
+@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30);
+
+/* Loading Dimmer */
+@loaderDimmerColor: rgba(255, 255, 255, 0.8);
+@loaderDimmerZIndex: 100;
+
+/* Loading Spinner */
+@loaderSize: 3em;
+@loaderLineZIndex: 101;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Required */
+@requiredContent: '*';
+@requiredColor: rgba(0, 0, 0, 0.32);
+@requiredVerticalOffset: -0.2em;
+@requiredDistance: 0.2em;
+@requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance;
+@requiredMarginLeft: 0.25rem;
+
+/* Inverted */
+@invertedInputBackground: @inputBackground;
+@invertedInputBorderColor: @whiteBorderColor;
+@invertedInputBoxShadow: @inputBoxShadow;
+@invertedInputColor: @inputColor;
+@invertedLabelColor: @invertedTextColor;
+@invertedInputBoxShadow: none;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Grouped Fields */
+@groupedMargin: @fieldMargin;
+@groupedFieldMargin: 0.5em 0em;
+
+@groupedLabelDistance: @labelDistance;
+@groupedLabelColor: @labelColor;
+@groupedLabelMargin: @labelMargin;
+@groupedLabelFontSize: @labelFontSize;
+@groupedLabelFontWeight: @labelFontWeight;
+@groupedLabelTextTransform: @labelTextTransform;
+
+
+/* Inline */
+@inlineInputSize: @relativeMedium;
+
+@inlineLabelDistance: @relativeTiny;
+@inlineLabelColor: @labelColor;
+@inlineLabelFontSize: @labelFontSize;
+@inlineLabelFontWeight: @labelFontWeight;
+@inlineLabelTextTransform: @labelTextTransform;
+
+@groupedInlineLabelMargin: 0.035714em 1em 0em 0em;
+
+/*-------------------
+       Groups
+--------------------*/
+
+@inlineFieldsMargin: 0em 1em 0em 0em;
+
+/*-------------------
+    Field Wrapper
+--------------------*/
+
+@fieldWrapperLabelBackground: transparent;
+@fieldWrapperLabelColor: @textColor;
+@fieldWrapperLabelPadding: unit((@inputVerticalPadding + @1px), rem) 0;
+
+

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

@@ -0,0 +1,17 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+/* Storybook example */
+.col-example {
+  padding: 10px;
+  margin-bottom: 12px;
+  background: @primaryColor;
+  color: @white;
+}
+
+.ui[class*='any reversed'].grid,
+.ui[class*='any reversed'].grid > .row,
+.ui.grid > [class*='any reversed'].row {
+  flex-direction: row-reverse;
+}

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

@@ -0,0 +1,103 @@
+/*******************************
+             Grid
+*******************************/
+
+/* Inherited From Site */
+
+// @mobileBreakpoint
+// @tabletBreakpoint
+// @computerBreakpoint
+// @largeMonitorBreakpoint
+// @widescreenMonitorBreakpoint
+
+/*******************************
+            Grid
+*******************************/
+
+@minWidth: 320px;
+
+@gutterWidth: 1.25rem;
+@rowSpacing: 2rem;
+
+@tableWidth: ~"calc(100% + "@gutterWidth~")";
+@columnMaxImageWidth: 100%;
+
+@consecutiveGridDistance: (@rowSpacing / 2);
+
+/*******************************
+           Variations
+*******************************/
+
+/*--------------
+     Relaxed
+---------------*/
+
+@relaxedGutterWidth: 3rem;
+@veryRelaxedGutterWidth: 5rem;
+
+/*--------------
+     Divided
+---------------*/
+
+@dividedBorder: -1px 0px 0px 0px @borderColor;
+@verticallyDividedBorder: 0px -1px 0px 0px @borderColor;
+
+@dividedInvertedBorder: -1px 0px 0px 0px @whiteBorderColor;
+@verticallyDividedInvertedBorder: 0px -1px 0px 0px @whiteBorderColor;
+
+/*--------------
+    Celled
+---------------*/
+
+@celledMargin: 1em 0em;
+@celledWidth: 1px;
+@celledBorderColor: @solidBorderColor;
+
+@celledPadding: 1em;
+@celledRelaxedPadding: 1.5em;
+@celledVeryRelaxedPadding: 2em;
+
+@celledGridDivider: 0px 0px 0px @celledWidth @celledBorderColor;
+@celledRowDivider: 0px (-@celledWidth) 0px 0px @celledBorderColor;
+@celledColumnDivider: (-@celledWidth) 0px 0px 0px @celledBorderColor;
+
+
+/*--------------
+    Stackable
+---------------*/
+
+@stackableRowSpacing: @rowSpacing;
+@stackableGutter: @gutterWidth;
+@stackableMobileBorder: 1px solid @borderColor;
+@stackableInvertedMobileBorder: 1px solid @whiteBorderColor;
+
+
+/*******************************
+             Legacy
+*******************************/
+
+/*--------------
+     Page
+---------------*/
+
+/* Legacy (DO NOT USE)
+ */
+@mobileWidth: auto;
+@mobileMargin: 0em;
+@mobileGutter: 0em;
+
+@tabletWidth: auto;
+@tabletMargin: 0em;
+@tabletGutter: 2em;
+
+@computerWidth: auto;
+@computerMargin: 0em;
+@computerGutter: 3%;
+
+@largeMonitorWidth: auto;
+@largeMonitorMargin: 0em;
+@largeMonitorGutter: 15%;
+
+@widescreenMonitorWidth: auto;
+@widescreenMargin: 0em;
+@widescreenMonitorGutter: 23%;

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

@@ -0,0 +1,84 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+/* Pagination and Tabs */
+.ui.pagination.pointing.secondary {
+  display: flex;
+  width: @paginationWidth;
+  justify-content: start;
+
+  @media only screen and (min-width: @tabletBreakpoint) {
+    justify-content: center;
+  }
+}
+
+.ui.pagination.pointing.secondary.menu .item {
+  justify-content: center;
+  padding: @squareTiny;
+  font-size: @paginationFontSize;
+}
+
+/* Pagination active item custom border design */
+.ui.pagination.pointing.secondary.menu a.active.item {
+  padding: (@tinyGap - @1px) @tinyGap;
+  border-bottom: @secondaryPointingActiveBorderWidth solid @secondaryColor;
+  margin-bottom: -@secondaryPointingctiveItemMarginBottom;
+  color: @secondaryPointingActiveTextColor;
+
+  &:hover {
+    color: @secondaryPointingActiveTextColor;
+  }
+}
+
+/* Hover item pagination */
+.ui.pagination.pointing.secondary.menu a.item:hover {
+  padding: (@tinyGap - @1px) @tinyGap;
+  border-bottom: @secondaryPointingActiveBorderWidth solid @secondaryColor;
+  margin-bottom: -@secondaryPointingctiveItemMarginBottom;
+  color: @paginationColor;
+}
+
+/* Hover ellipsis item pagination */
+.ui.pagination.pointing.secondary.menu a.item[type='ellipsisItem']:hover {
+  padding: @squareTiny;
+  border-bottom: none; // Not clickable so no border
+  margin: 0.031rem 0; // Adjust to no border
+}
+
+/* Tab active item custom border design */
+.ui.secondary.pointing.menu:not(.vertical):not(.pagination) a.active.item,
+.ui.secondary.pointing.menu:not(.vertical):not(.pagination) a.item:active {
+  padding: (@secondaryPointingItemVerticalPadding - @1px)
+    @secondaryPointingItemHorizontalPadding;
+  border-bottom: @secondaryPointingActiveBorderWidth solid @secondaryColor;
+  margin-bottom: -@secondaryPointingctiveItemMarginBottom;
+  color: @secondaryPointingActiveTextColor;
+}
+
+/* Menu items custom border for responsive issues */
+.ui.secondary.pointing.menu:not(.vertical) {
+  position: relative;
+  overflow: auto; // Horizontal scolling of links
+  height: auto; //  height ensures that scrollable region has keyboard access
+  padding-bottom: @2px; // Leave room for the active border item
+  border-bottom: none; // Border comes from before pseudo-element
+  margin-right: 0em;
+  margin-left: 0em;
+
+  a.item {
+    max-width: @secondaryPointingItemMaxWidth;
+    border-bottom: @secondaryPointingItemBorderBottom;
+  }
+}
+
+.ui.pointing.secondary.menu:not(.vertical):before {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  bottom: @1px;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  border-top: 1px solid @midGray;
+  content: ' ';
+}