@eeacms/volto-eea-design-system 0.2.1

package/theme/themes/eea/modules/search.variables

@@ -0,0 +1,163 @@
+/*******************************
+            Search
+*******************************/
+
+/* Search Prompt */
+@promptBackground: @inputBackground;
+@promptVerticalPadding: @inputVerticalPadding;
+@promptHorizontalPadding: @inputHorizontalPadding;
+@promptLineHeight: @inputLineHeight;
+@promptFontSize: @relativeMedium;
+@promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding;
+@promptBorder: 1px solid @borderColor;
+@promptBorderRadius: @circularRadius;
+@promptColor: @textColor;
+@promptTransition:
+  background-color @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+@promptBoxShadow: 0em 0em 0em 0em transparent inset;
+
+/* Mobile */
+@mobileMaxWidth: ~"calc(100vw - 2rem)";
+
+/* Result Box */
+@resultsWidth: 18em;
+@resultsBackground: #FFFFFF;
+@resultsDistance: 0.5em;
+@resultsBorderRadius: @defaultBorderRadius;
+@resultsBorder: 1px solid @solidBorderColor;
+@resultsBoxShadow: @floatingShadow;
+
+/* Result */
+@resultFontSize: 1em;
+@resultVerticalPadding: @relativeTiny;
+@resultHorizontalPadding: @relativeLarge;
+@resultPadding: @resultVerticalPadding @resultHorizontalPadding;
+@resultTextColor: @textColor;
+@resultLineHeight: 1.33;
+@resultDivider: 1px solid @internalBorderColor;
+@resultLastDivider: none;
+
+/* Result Image */
+@resultImageFloat: right;
+@resultImageBackground: none;
+@resultImageWidth: 5em;
+@resultImageHeight: 3em;
+@resultImageBorderRadius: 0.25em;
+@resultImageMargin: 0em 6em 0em 0em;
+
+/* Result Content */
+@resultTitleFont: @headerFont;
+@resultTitleMargin: -@headerLineHeightOffset 0em 0em;
+@resultTitleFontWeight: @bold;
+@resultTitleFontSize: @relativeMedium;
+@resultTitleColor: @darkTextColor;
+
+/* Description */
+@resultDescriptionFontSize: @relativeSmall;
+@resultDescriptionDistance: 0;
+@resultDescriptionColor: @lightTextColor;
+
+/* Price */
+@resultPriceFloat: right;
+@resultPriceColor: @green;
+
+/* Special Message */
+@messageVerticalPadding: 1em;
+@messageHorizontalPadding: 1em;
+@messageHeaderFontSize: @medium;
+@messageHeaderFontWeight: @bold;
+@messageHeaderColor: @textColor;
+@messageDescriptionDistance: 0.25rem;
+@messageDescriptionFontSize: 1em;
+@messageDescriptionColor: @textColor;
+
+/* All Results Link */
+@actionBorder: none;
+@actionBackground: @darkWhite;
+@actionPadding: @relativeSmall @relativeMedium;
+@actionColor: @textColor;
+@actionFontWeight: @bold;
+@actionAlign: center;
+
+
+/*******************************
+            States
+*******************************/
+
+/* Focus */
+@promptFocusBackground: @promptBackground;
+@promptFocusBorderColor: @selectedBorderColor;
+@promptFocusColor: @selectedTextColor;
+
+/* Hover */
+@resultHoverBackground: @offWhite;
+@actionHoverBackground: #E0E0E0;
+
+/* Loading */
+@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
+
+/* Active Category */
+@categoryActiveBackground: @darkWhite;
+@categoryNameActiveColor: @textColor;
+
+/* Active Result */
+@resultActiveBorderLeft: @internalBorderColor;
+@resultActiveBackground: @darkWhite;
+@resultActiveBoxShadow: none;
+@resultActiveTitleColor: @darkTextColor;
+@resultActiveDescriptionColor: @darkTextColor;
+@resultsZIndex: 998;
+
+
+/*******************************
+            Types
+*******************************/
+
+/* Selection */
+@selectionPromptBorderRadius: @defaultBorderRadius;
+
+@selectionCloseTop: 0em;
+@selectionCloseTransition:
+  color @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing
+;
+@selectionCloseRight: 0em;
+@selectionCloseIconOpacity: 0.8;
+@selectionCloseIconColor: '';
+@selectionCloseIconHoverOpacity: 1;
+@selectionCloseIconHoverColor: @red;
+
+@selectionCloseIconInputRight: 1.85714em;
+
+/* Category */
+@categoryBackground: @darkWhite;
+@categoryBoxShadow: none;
+@categoryDivider: 1px solid @internalBorderColor;
+@categoryTransition:
+  background @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+
+@categoryResultsWidth: 28em;
+
+@categoryResultBackground: @white;
+@categoryResultLeftBorder: 1px solid @borderColor;
+@categoryResultDivider: @resultDivider;
+@categoryResultLastDivider: none;
+@categoryResultPadding: @resultPadding;
+@categoryResultTransition: @categoryTransition;
+
+@categoryNameWidth: 100px;
+@categoryNameBackground: transparent;
+@categoryNameFont: @pageFont;
+@categoryNameFontSize: 1em;
+@categoryNameWhitespace: nowrap;
+@categoryNamePadding: 0.4em 1em;
+@categoryNameFontWeight: @bold;
+@categoryNameColor: @lightTextColor;
+// Pastanaga customization
+@categoryNameFloat: left;

package/theme/themes/eea/modules/shape.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

package/theme/themes/eea/modules/shape.variables

@@ -0,0 +1,40 @@
+/*******************************
+             Shape
+*******************************/
+
+@display: inline-block;
+
+/* Animating */
+@perspective: 2000px;
+
+@duration: 0.6s;
+@easing: ease-in-out;
+
+@hiddenSideOpacity: 0.6;
+@animatingZIndex: 100;
+
+@transition:
+  transform @duration @easing,
+  left @duration @easing,
+  width @duration @easing,
+  height @duration @easing
+;
+@sideTransition: opacity @duration @easing;
+@backfaceVisibility: hidden;
+
+/* Side */
+@sideMargin: 0em;
+
+/*--------------
+      Types
+---------------*/
+
+/* Cube */
+@cubeSize: 15em;
+@cubeBackground: #E6E6E6;
+@cubePadding: 2em;
+@cubeTextColor: @textColor;
+@cubeBoxShadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
+
+@cubeTextAlign: center;
+@cubeFontSize: 2em;

package/theme/themes/eea/modules/sidebar.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

package/theme/themes/eea/modules/sidebar.variables

@@ -0,0 +1,45 @@
+/*******************************
+             Sidebar
+*******************************/
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Animation */
+@perspective: 1500px;
+@duration: 500ms;
+@easing: @defaultEasing;
+
+/* Dimmer */
+@dimmerColor: rgba(0, 0, 0, 0.4);
+@dimmerTransition: opacity @duration;
+
+/* Color below page */
+@canvasBackground: @lightBlack;
+
+/* Shadow */
+@boxShadow: 0px 0px 20px @borderColor;
+@horizontalBoxShadow: @boxShadow;
+@verticalBoxShadow: @boxShadow;
+
+/* Layering */
+@bottomLayer: 1;
+@middleLayer: 2;
+@fixedLayer: 101;
+@topLayer: 102;
+@dimmerLayer: 1000;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Width */
+@veryThinWidth: 60px;
+@thinWidth: 150px;
+@width: 260px;
+@wideWidth: 350px;
+@veryWideWidth: 475px;
+
+/* Height */
+@height: 36px;

package/theme/themes/eea/modules/sticky.overrides

@@ -0,0 +1,3 @@
+/*******************************
+         Theme Overrides
+*******************************/

package/theme/themes/eea/modules/sticky.variables

@@ -0,0 +1,7 @@
+/*******************************
+            Sticky
+*******************************/
+
+@transitionDuration: @defaultDuration;
+@transition: none;
+@zIndex: 800;

package/theme/themes/eea/modules/tab.overrides

@@ -0,0 +1,13 @@
+/*******************************
+         Tab Overrides
+*******************************/
+
+.ui.pointing.secondary.menu {
+  a.item {
+    font-size: @headerSize;
+  }
+
+  a.item:hover {
+    color: @tabActiveItemHoverColor;
+  }
+}

package/theme/themes/eea/modules/tab.variables

@@ -0,0 +1,17 @@
+/*******************************
+              Tab
+*******************************/
+
+@tabActiveItemHoverColor: @secondaryColor;
+
+@headerSize: @h4;
+@headerSizeResponsive: @fontSize;
+@contentSize: @fontSize;
+
+/* Loading */
+@loadingMinHeight: 250px;
+@loadingContentPosition: relative;
+@loadingContentOffset: -10000px;
+
+@loaderDistanceFromTop: 100px;
+@loaderSize: 2.5em;