@eeacms/volto-eea-design-system 0.2.1

package/theme/themes/eea/views/item.variables

@@ -0,0 +1,157 @@
+/*******************************
+             Item
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+/* Group */
+@groupMargin: 1.5em 0em;
+
+/* Item */
+@display: flex;
+@background: transparent;
+@borderRadius: 0rem;
+@minHeight: 0px;
+@padding: 0em;
+@width: 100%;
+@boxShadow: none;
+@border: none;
+@zIndex: '';
+@transition: box-shadow @defaultDuration @defaultEasing;
+
+/* Responsive */
+@itemSpacing: 1em;
+@imageWidth: 175px;
+@contentImageDistance: 1.5em;
+
+@tabletItemSpacing: 1em;
+@tabletImageWidth: 150px;
+@tabletContentImageDistance: 1em;
+
+@mobileItemSpacing: 2em;
+@mobileImageWidth: auto;
+@mobileImageMaxHeight: 250px;
+@mobileContentImageDistance: 1.5em;
+
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Image */
+@imageDisplay: block;
+@imageFloat: none;
+@imageMaxHeight: '';
+@imageVerticalAlign: top;
+@imageMargin: 0em;
+@imagePadding: 0em;
+@imageBorder: none;
+@imageBorderRadius: 0.125rem;
+@imageBoxShadow: none;
+@imageBorder: none;
+
+/* Content */
+@contentDisplay: block;
+@contentVerticalAlign: top;
+
+@contentWidth: auto;
+@contentOffset: 0em;
+@contentBackground: none;
+@contentMargin: 0em;
+@contentPadding: 0em;
+@contentFontSize: 1em;
+@contentBorder: none;
+@contentBorderRadius: 0em;
+@contentBoxShadow: none;
+
+/* Header */
+@headerMargin: -@lineHeightOffset 0em 0em;
+@headerFontWeight: @bold;
+@headerFontSize: @relativeBig;
+@headerColor: @darkTextColor;
+
+/* Metadata */
+@metaMargin: 0.5em 0em 0.5em;
+@metaFontSize: 1em;
+@metaLineHeight: 1em;
+@metaSpacing: 0.3em;
+@metaColor: rgba(0, 0, 0, 0.6);
+
+/* Icons */
+@actionOpacity: 0.75;
+@actionHoverOpacity: 1;
+@actionTransition: color @defaultDuration @defaultEasing;
+
+/* Actions */
+@favoriteColor: #FFB70A;
+@favoriteActiveColor: #FFE623;
+@likeColor: #FF2733;
+@likeActiveColor: #FF2733;
+
+/* Links */
+@headerLinkColor: @headerColor;
+@headerLinkHoverColor: @linkHoverColor;
+@metaLinkColor: @lightTextColor;
+@metaLinkHoverColor: @textColor;
+@contentLinkColor: '';
+@contentLinkHoverColor: '';
+@contentLinkTransition: color @defaultDuration @defaultEasing;
+
+
+/* Description */
+@descriptionDistance: 0.6em;
+@descriptionMaxWidth: auto;
+@descriptionFontSize: 1em;
+@descriptionLineHeight: @lineHeight;
+@descriptionColor: @textColor;
+
+/* Content Image */
+@contentImageWidth: '';
+@contentImageVerticalAlign: middle;
+
+/* Avatar Image */
+@avatarSize: @contentImageWidth;
+@avatarBorderRadius: @circularRadius;
+
+/* Paragraph */
+@paragraphDistance: 0.5em;
+
+/* Additional Content */
+@extraDivider: none;
+@extraHorizontalSpacing: 0.5rem;
+@extraRowSpacing: 0.5rem;
+
+@extraBackground: none;
+@extraDisplay: block;
+@extraPosition: relative;
+@extraMargin: (1rem - @extraRowSpacing) 0em 0em;
+@extraTop: 0em;
+@extraLeft: 0em;
+@extraWidth: 100%;
+@extraPadding: 0em 0em 0em;
+@extraBoxShadow: none;
+@extraColor: @black;
+@extraTransition: color @defaultDuration @defaultEasing;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Relaxed */
+@relaxedItemSpacing: 1.5em;
+@veryRelaxedItemSpacing: 2em;
+
+/* Divided */
+@dividedBorder: 1px solid @borderColor;
+@dividedMargin: 0em;
+@dividedPadding: 1em 0em;
+
+@dividedFirstLastMargin: 0em;
+@dividedFirstLastPadding: 0em;
+
+
+/* Unstackable */
+@unstackableMobileImageWidth: 125px;
+

package/theme/themes/eea/views/statistic.overrides

@@ -0,0 +1,19 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+.ui.inverted.statistics,
+.ui.inverted.statistic {
+  background: @statisticInvertedBackground;
+}
+
+/* Full width statistics for mobile */
+.ui.statistic {
+  width: @mobileStatisticWidth;
+}
+
+@media only screen and (min-width: @mobileBreakpoint) {
+  .ui.statistic {
+    width: @tabletStatisticWidth;
+  }
+}

package/theme/themes/eea/views/statistic.variables

@@ -0,0 +1,105 @@
+/*******************************
+           Statistic
+*******************************/
+
+/*-------------------
+         View
+--------------------*/
+
+@mobileStatisticWidth: 100%;
+@tabletStatisticWidth: inherit;
+
+@secondaryValueColor: @secondaryColor;
+@primaryLabelColor: @primaryColor;
+
+@verticalMargin: 1em;
+@margin: @verticalMargin 0em;
+@textAlign: center;
+@maxWidth: auto;
+
+/* Group */
+@horizontalSpacing: 1.5em;
+@rowSpacing: 2em;
+@groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing;
+
+/* Group Element */
+@elementMargin: 0em @horizontalSpacing @rowSpacing;
+@elementMaxWidth: @maxWidth;
+
+/*-------------------
+       Content
+--------------------*/
+
+/* Value */
+@valueFont: @pageFont;
+@valueFontWeight: @normal;
+@valueLineHeight: 1.5em;
+@valueColor: @secondaryColor;
+@valueTextTransform: none;
+
+/* Label */
+@labelSize: @relativeMedium;
+@topLabelDistance: 1rem;
+@bottomLabelDistance: 0rem;
+@labelFont: @headerFont;
+@labelFontWeight: @bold;
+@labelColor: @primaryColor;
+@labelLineHeight: @relativeLarge;
+@labelTextTransform: uppercase;
+
+/* Text */
+@textValueLineHeight: 1em;
+@textValueMinHeight: 2em;
+@textValueFontWeight: @bold;
+
+/* Label Image */
+@imageHeight: 3rem;
+@imageVerticalAlign: baseline;
+
+/*-------------------
+      Types
+--------------------*/
+
+@horizontalGroupElementMargin: 1em 0em;
+@horizontalLabelDistance: 0.75em;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Floated */
+@leftFloatedMargin: 1em;
+@rightFloatedMargin: 1em;
+
+/* Inverted */
+@invertedValueColor: @white;
+@invertedLabelColor: @invertedTextColor;
+
+/* Item Width */
+@itemGroupMargin: 0em 0em -@rowSpacing;
+@itemMargin: 0em 0em @rowSpacing;
+
+/* Size */
+@miniTextValueSize: 1rem;
+@miniValueSize: 1.5rem;
+@miniHorizontalValueSize: 1.5rem;
+
+@tinyTextValueSize: 1rem;
+@tinyValueSize: 2rem;
+@tinyHorizontalValueSize: 2rem;
+
+@smallTextValueSize: 1rem;
+@smallValueSize: 3rem;
+@smallHorizontalValueSize: 2rem;
+
+@textValueSize: 2rem;
+@valueSize: 4rem;
+@horizontalValueSize: 3rem;
+
+@largeTextValueSize: 2.5rem;
+@largeValueSize: 5rem;
+@largeHorizontalValueSize: 4rem;
+
+@hugeTextValueSize: 2.5rem;
+@hugeValueSize: 6rem;
+@hugeHorizontalValueSize: 5rem;