@eeacms/volto-eea-design-system 0.2.1

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

@@ -0,0 +1,95 @@
+/*******************************
+             Icon
+*******************************/
+
+/*--------------
+   Font Files
+---------------*/
+
+@fontName: 'icons';
+// TODO: We must switch completelly to svg fonts, or find the way to provide
+// the correct .woff2 file for Chrome
+@src:
+  url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
+  url("@{fontPath}/@{fontName}.woff") format('woff'),
+  url("@{fontPath}/@{fontName}.ttf") format('truetype'),
+  url("@{fontPath}/@{fontName}.svg#icons") format('svg')
+;
+@fallbackSRC: url("@{fontPath}/@{fontName}.eot");
+
+/*--------------
+ Optional Files
+---------------*/
+
+/* Outline Icons */
+@importOutlineIcons: true;
+@outlineFontName: 'outline-icons';
+@outlineSrc:
+  url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'),
+  url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'),
+  url("@{fontPath}/@{outlineFontName}.woff") format('woff'),
+  url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'),
+  url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg')
+;
+@outlineFallbackSRC: url("@{fontPath}/@{outlineFontName}.eot");
+
+/* Brand Icons */
+@importBrandIcons: true;
+@brandFontName: 'brand-icons';
+@brandSrc:
+  url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'),
+  url("@{fontPath}/@{brandFontName}.woff2") format('woff2'),
+  url("@{fontPath}/@{brandFontName}.woff") format('woff'),
+  url("@{fontPath}/@{brandFontName}.ttf") format('truetype'),
+  url("@{fontPath}/@{brandFontName}.svg#icons") format('svg')
+;
+@brandFallbackSRC: url("@{fontPath}/@{brandFontName}.eot");
+
+/*--------------
+   Definition
+---------------*/
+
+/* Icon Variables */
+@opacity: 1;
+@width: @iconWidth;
+@height: 1em;
+@distanceFromText: 0.25rem;
+
+
+/* Variations */
+@linkOpacity: 0.8;
+@linkDuration: 0.3s;
+@loadingDuration: 2s;
+
+@circularSize: 2em;
+@circularPadding: 0.5em 0.5em;
+@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+
+@borderedSize: 2em;
+@borderedVerticalPadding: ((@borderedSize - @height) / 2);
+@borderedHorizontalPadding: ((@borderedSize - @width) / 2);
+@borderedShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+
+@cornerIconSize: 0.45em;
+@cornerIconStroke: 1px;
+@cornerIconShadow:
+  -@cornerIconStroke -@cornerIconStroke 0 @white,
+   @cornerIconStroke -@cornerIconStroke 0 @white,
+  -@cornerIconStroke  @cornerIconStroke 0 @white,
+   @cornerIconStroke  @cornerIconStroke 0 @white
+;
+@cornerIconInvertedShadow:
+  -@cornerIconStroke -@cornerIconStroke 0 @black,
+   @cornerIconStroke -@cornerIconStroke 0 @black,
+  -@cornerIconStroke  @cornerIconStroke 0 @black,
+   @cornerIconStroke  @cornerIconStroke 0 @black
+;
+
+@mini: 0.4em;
+@tiny: 0.5em;
+@small: 0.75em;
+@medium: 1em;
+@large: 1.5em;
+@big: 1.8em;
+@huge: 4em;
+@massive: 8em;

package/theme/themes/eea/elements/image.overrides

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

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

@@ -0,0 +1,44 @@
+/*******************************
+            Image
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@placeholderColor: transparent;
+@roundedBorderRadius: 0.3125em;
+
+@imageHorizontalMargin: 0.25rem;
+@imageVerticalMargin: 0.5rem;
+@imageBorder: 1px solid rgba(0, 0, 0, 0.1);
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Avatar */
+@avatarSize: 2em;
+@avatarMargin: 0.25em;
+
+
+/*-------------------
+       Variations
+--------------------*/
+
+/* Spaced */
+@spacedDistance: 0.5em;
+
+/* Floated */
+@floatedHorizontalMargin: 1em;
+@floatedVerticalMargin: 1em;
+
+/* Size */
+@miniWidth: 35px;
+@tinyWidth: 80px;
+@smallWidth: 150px;
+@mediumWidth: 300px;
+@largeWidth: 450px;
+@bigWidth: 600px;
+@hugeWidth: 800px;
+@massiveWidth: 960px;

package/theme/themes/eea/elements/input.overrides

@@ -0,0 +1,83 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+.ui.input {
+  max-width: @inputMaxWidth;
+}
+
+.ui.input.fluid {
+  max-width: 100%;
+}
+
+.ui.input input {
+  border: @border;
+
+  &:active,
+  &:focus {
+    border: @borderWidth solid @secondaryColor;
+    color: @textColor;
+  }
+}
+
+.ui.input.error input {
+  border: @borderWidth solid @negativeBorderColor;
+}
+
+/* Textarea */
+textarea {
+  max-width: @inputMaxWidth;
+
+  &:active,
+  &:focus {
+    border: @borderWidth solid @secondaryColor;
+  }
+}
+
+textarea.fluid {
+  max-width: 100%;
+}
+
+/* Search Input - to be updated */
+.ui.fluid.icon.input.search {
+  input {
+    height: 70px !important;
+    padding: 18.5px;
+    border: none !important;
+    border-bottom: 2px solid !important;
+    background: transparent;
+    color: @white !important;
+    font-size: 18px;
+  }
+
+  i.icon {
+    color: @white;
+    font-size: 18px;
+    opacity: 1;
+  }
+}
+
+.ui.fluid.icon.input.search > input::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.ui.fluid.icon.input.search > input::-moz-placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.ui.fluid.icon.input.search > input::-ms-input-placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.fluid.icon.input.search {
+    input {
+      border-bottom: 3px solid !important;
+      font-size: 40px;
+    }
+
+    i.icon {
+      font-size: 38px;
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+/*******************************
+            Input
+*******************************/
+
+/*-------------------
+      Element
+--------------------*/
+
+// Pastanaga variable
+@inputFontWeight: normal;
+
+@inputFont: @pageFont;
+@verticalPadding: @inputVerticalPadding;
+@horizontalPadding: @inputHorizontalPadding;
+
+@lineHeight: @inputLineHeight;
+@lineHeightOffset: ((@lineHeight - 1em) / 2);
+
+@padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;
+
+@textAlign: left;
+@background: @inputBackground;
+@borderWidth: 1px;
+@border: @borderWidth solid @midGray;
+@boxShadow: none;
+
+@borderRadius: @defaultBorderRadius;
+@transition:
+  box-shadow @defaultDuration @defaultEasing,
+  border-color @defaultDuration @defaultEasing
+;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Icon Input */
+@iconWidth: (@verticalPadding * 2) + @glyphWidth;
+@iconOpacity: 0.5;
+@iconFocusOpacity: 1;
+@iconOffset: -0.5em;
+
+@iconDistance: 0em;
+@iconMargin: @iconWidth + @iconDistance;
+@iconTransition: opacity 0.3s @defaultEasing;
+
+@transparentIconWidth: @glyphWidth;
+@transparentIconMargin: 2em;
+
+/* Circular Icon Input */
+@circularIconVerticalOffset: 0.35em;
+@circularIconHorizontalOffset: 0.5em;
+
+/* Labeled Input */
+@labelCornerTop: @borderWidth;
+@labelCornerRight: @borderWidth;
+@labelCornerSize: @relative9px;
+@labelSize: 1em;
+@labelVerticalPadding: (@verticalPadding - @lineHeightOffset);
+
+@labeledMargin: 2.5em;
+@labeledIconInputMargin: 3.25em;
+@labeledIconMargin: 1.25em;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Placeholder */
+@placeholderColor: @inputPlaceholderColor;
+@placeholderFocusColor: @inputPlaceholderFocusColor;
+
+/* Down */
+@downBorderColor: rgba(0, 0, 0, 0.3);
+@downBackground: #FAFAFA;
+@downColor: @textColor;
+@downBoxShadow: none;
+
+/* Focus */
+@focusBorderColor: @focusedFormBorderColor;
+@focusBackground: @background;
+@focusColor: @hoveredTextColor;
+@focusBoxShadow: none;
+
+/* Error */
+@errorBackground: @negativeBackgroundColor;
+@errorColor: @negativeTextColor;
+@errorBorder: @negativeBorderColor;
+@errorBoxShadow: none;
+
+@placeholderErrorColor: lighten(@errorColor, 40);
+@placeholderErrorFocusColor: lighten(@errorColor, 30);
+
+/* Loader */
+@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Inverted */
+@transparentInvertedPlaceholderColor: @invertedUnselectedTextColor;
+@transparentInvertedColor: @white;
+

package/theme/themes/eea/elements/label.overrides

@@ -0,0 +1,49 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+.ui.label {
+  font-size: @labelFontSize;
+  line-height: @labelLineHeight;
+}
+
+.ui.label.medium {
+  background-color: @mediumImportanceBackground;
+}
+
+.ui.label.high {
+  background-color: @highImportanceBackground;
+}
+
+.ui.label.highlight {
+  background-color: @highlightImportanceBackground;
+}
+
+// Custom variations and combinations in slate
+.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 {
+    background: @labelNoBackground;
+
+    &::after {
+      color: @color;
+    }
+  }
+  .metadata.mention.edit, .metadata.mention.empty {
+    background: @labelNoBackground;
+  }
+}

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

@@ -0,0 +1,267 @@
+/*******************************
+             Label
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@labelFontSize: @fontSize;
+
+@verticalAlign: baseline;
+@verticalMargin: 0em;
+@horizontalMargin: @relative2px;
+@backgroundColor: @lowImportanceBackground;
+@color: @white;
+@backgroundImage: none;
+@verticalPadding: 0.5833em; /* medium is not @emSize custom value required */
+@horizontalPadding: 0.833em;
+@borderRadius: @defaultBorderRadius;
+@textTransform: none;
+@fontWeight: @normal;
+@borderWidth: 0;
+@border: none;
+
+@labelLineHeight: inherit;
+@lineHeightOffset: -(@verticalPadding / 2);
+@labelTextDecoration: underline;
+@labelNoTextDecoration: none;
+@labelNoBackground: transparent;
+@labelOpacity: 1;
+
+@labelTransitionDuration: @defaultDuration;
+@labelTransitionEasing: @defaultEasing;
+@transition: background @labelTransitionDuration @labelTransitionEasing;
+
+/* Group */
+@groupVerticalMargin: 0.5em;
+@groupHorizontalMargin: 0.5em;
+
+/*-------------------
+        Parts
+--------------------*/
+
+/* Link */
+@linkOpacity: 0.5;
+@linkTransition: @labelTransitionDuration opacity @labelTransitionEasing;
+
+/* Icon */
+@iconDistance: 0.75em;
+
+/* Image */
+@imageHeight: (1em + @verticalPadding * 2);
+
+/* Detail */
+@detailFontWeight: @bold;
+@detailOpacity: 0.8;
+@detailIconDistance: 0.25em;
+@detailMargin: 1em;
+
+/* Delete */
+@deleteOpacity: @linkOpacity;
+@deleteSize: @relativeSmall;
+@deleteMargin: 0.5em;
+@deleteTransition: background @labelTransitionDuration @labelTransitionEasing;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Image Label */
+@imageLabelBackground: @backgroundColor;
+@imageLabelVerticalPadding: @verticalPadding;
+@imageLabelHorizontalPadding: @horizontalPadding;
+@imageLabelTextDistance: 0.5em;
+@imageLabelDetailDistance: @imageLabelTextDistance;
+@imageLabelBorderRadius: @borderRadius;
+@imageLabelBoxShadow: none;
+@imageLabelPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding @imageLabelVerticalPadding @imageLabelTextDistance;
+
+@imageLabelImageMargin: -@verticalPadding @imageLabelTextDistance -@verticalPadding -@imageLabelTextDistance;
+@imageLabelImageBorderRadius: @imageLabelBorderRadius 0em 0em @imageLabelBorderRadius;
+@imageLabelImageHeight: @imageHeight;
+
+@imageLabelDetailBackground: @strongTransparentBlack;
+@imageLabelDetailPadding: @imageLabelVerticalPadding @imageLabelHorizontalPadding;
+@imageLabelDetailMargin: -@imageLabelVerticalPadding -@imageLabelHorizontalPadding -@imageLabelVerticalPadding @imageLabelDetailDistance;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Hover */
+@labelHoverBackgroundColor: #E0E0E0;
+@labelHoverBackgroundImage: none;
+@labelHoverTextColor: @hoveredTextColor;
+
+/* Active */
+@labelActiveBackgroundColor: #D0D0D0;
+@labelActiveBackgroundImage: none;
+@labelActiveTextColor: @selectedTextColor;
+
+/* Active Hover */
+@labelActiveHoverBackgroundColor: #C8C8C8;
+@labelActiveHoverBackgroundImage: none;
+@labelActiveHoverTextColor: @selectedTextColor;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Basic */
+@basicBackground: none @white;
+@basicBorderWidth: 1px;
+@basicBorder: @basicBorderWidth solid @borderColor;
+@basicColor: @textColor;
+@basicBoxShadow: none;
+
+@basicHoverBackground: @basicBackground;
+@basicHoverColor: @linkHoverColor;
+@basicHoverBorder: @basicBorder;
+@basicHoverBoxShadow: @basicBoxShadow;
+
+/* Tag */
+@tagCircleColor: @white;
+@tagCircleSize: 0.5em;
+@tagHorizontalPadding: 1.5em;
+@tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
+@tagTriangleRightOffset: 100%;
+@tagTriangleTopOffset: 50%;
+@tagTriangleSize: 1.56em;
+@tagTriangleBackgroundImage: none;
+@tagTransition: none; /* Avoids error with background: inherit; on animation */
+
+/* Ribbon */
+@ribbonTriangleSize: 1.2em;
+@ribbonShadowColor: rgba(0, 0, 0, 0.15);
+
+@ribbonMargin: 1rem;
+@ribbonOffset: calc(-@ribbonMargin - @ribbonTriangleSize);
+@ribbonDistance: calc(@ribbonMargin + @ribbonTriangleSize);
+@rightRibbonOffset:  calc(100% + @ribbonMargin + @ribbonTriangleSize);
+
+@ribbonImageTopDistance: 1rem;
+@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
+@ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);
+@rightRibbonImageOffset:  calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
+
+@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */
+@ribbonTableOffset: calc(-@ribbonTableMargin - @ribbonTriangleSize);
+@rightRibbonTableOffset:  calc(100% + @ribbonTableMargin + @ribbonTriangleSize);
+
+
+/* Colors */
+@globalLabelColor: @white;
+@lowImportanceBackground: @deepBlue;
+@mediumImportanceBackground: #346F83;
+@highImportanceBackground: #005293;
+@highlightImportanceBackground: #009591;
+
+@redTextColor: @white;
+@orangeTextColor: @white;
+@yellowTextColor: @white;
+@oliveTextColor: @white;
+@greenTextColor: @white;
+@tealTextColor: @white;
+@blueTextColor: @white;
+@violetTextColor: @white;
+@purpleTextColor: @white;
+@pinkTextColor: @white;
+@brownTextColor: @white;
+@greyTextColor: @white;
+@blackTextColor: @white;
+
+@redHoverTextColor: @white;
+@orangeHoverTextColor: @white;
+@yellowHoverTextColor: @white;
+@oliveHoverTextColor: @white;
+@greenHoverTextColor: @white;
+@tealHoverTextColor: @white;
+@blueHoverTextColor: @white;
+@violetHoverTextColor: @white;
+@purpleHoverTextColor: @white;
+@pinkHoverTextColor: @white;
+@brownHoverTextColor: @white;
+@greyHoverTextColor: @white;
+@blackHoverTextColor: @white;
+
+@redRibbonShadow: darken(@red, 10);
+@orangeRibbonShadow: darken(@orange, 10);
+@yellowRibbonShadow: darken(@yellow, 10);
+@oliveRibbonShadow: darken(@olive, 10);
+@greenRibbonShadow: darken(@green, 10);
+@tealRibbonShadow: darken(@teal, 10);
+@blueRibbonShadow: darken(@blue, 10);
+@violetRibbonShadow: darken(@violet, 10);
+@purpleRibbonShadow: darken(@purple, 10);
+@pinkRibbonShadow: darken(@pink, 10);
+@brownRibbonShadow: darken(@brown, 10);
+@greyRibbonShadow: darken(@grey, 10);
+@blackRibbonShadow: darken(@black, 10);
+
+/* Attached */
+@attachedSegmentPadding: 2rem;
+@attachedVerticalPadding: 0.75em;
+@attachedHorizontalPadding: 1em;
+
+@attachedCornerBorderRadius: @3px;
+@attachedBorderRadius: @borderRadius;
+
+/* Corner */
+@cornerSizeRatio: 1;
+@cornerTransition: color @labelTransitionDuration @labelTransitionEasing;
+@cornerTriangleSize: 4em;
+@cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing;
+@cornerTriangleZIndex: 1;
+
+@cornerIconSize: @relativeLarge;
+@cornerIconTopOffset: @relative9px;
+@cornerIconLeftOffset: @relative11px;
+
+/* Corner Text */
+@cornerTextWidth: 3em;
+@cornerTextWeight: @bold;
+@cornerTextSize: 1em;
+
+/* Horizontal */
+@horizontalLabelMinWidth: 3em;
+@horizontalLabelMargin: 0.5em;
+@horizontalLabelVerticalPadding: 0.4em;
+
+/* Circular Padding */
+@circularPadding: 0.5em;
+@circularMinSize: 2em;
+@emptyCircleSize: 0.5em;
+
+/* Pointing */
+@pointingBorderColor: inherit;
+@pointingBorderWidth: 0;
+@pointingVerticalDistance: 1em;
+@pointingTriangleSize: 0.6666em;
+@pointingHorizontalDistance: @pointingTriangleSize;
+
+@pointingTriangleTransition: background @labelTransitionDuration @labelTransitionEasing;
+@pointingTriangleZIndex: 2;
+
+/* Basic Pointing */
+@basicPointingTriangleOffset: -@pointingBorderWidth;
+
+/* Floating */
+@floatingTopOffset: -1em;
+@floatingLeftOffset: -1.5em;
+@floatingZIndex: 100;
+
+/*-------------------
+        Group
+--------------------*/
+
+/* Sizing */
+@mini    : @9px;
+@tiny    : @10px;
+@small   : @11px;
+@medium  : @12px;
+@large   : @absoluteMedium;
+@big     : @absoluteBig;
+@huge    : @absoluteHuge;
+@massive : @absoluteMassive;

package/theme/themes/eea/elements/list.overrides

@@ -0,0 +1,28 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+/* All list items must be bold */
+.ui.list > .item:before,
+.ui.list .item {
+  font-weight: @listFontWeight;
+}
+
+/* Description List */
+div.ui.list .list > .item .description,
+div.ui.list > .item .description {
+  margin: @itemDescriptionMarginTop;
+}
+
+/* Unordered list */
+.ui.bulleted.list .list > .item:before,
+.ui.bulleted.list .list > a.item:before,
+.ui.bulleted.list > .item:before,
+.ui.bulleted.list > a.item:before,
+ul.ui.list li:before {
+  font-size: @bulletSize;
+}
+
+.ui.ordered.list .list .list > .item:before {
+  margin-left: @orderedGrandchildCountOffset;
+}