@eeacms/volto-eea-design-system 0.2.1

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

@@ -0,0 +1,83 @@
+/*******************************
+         Theme Overrides
+*******************************/
+
+.ui.accordion {
+  margin: @itemsMargin;
+  transition: @styledTitleTransition;
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: @titleJustifyContent;
+    border-bottom: @titleBorderBottom;
+
+    &.align-arrow-left {
+      justify-content: flex-start;
+    }
+
+    i {
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      color: @titleColorHover;
+
+      i {
+        color: @iconColorHover;
+      }
+    }
+
+    i {
+      display: flex;
+      width: @iconWidth;
+      height: @iconHeight;
+      align-items: center;
+      order: @iconOrder;
+      margin: @iconMargin;
+      color: @iconColor;
+      font-size: @iconFontSize;
+      line-height: @iconFontSize;
+
+      &:before {
+        content: @iconInactive;
+        font-size: @iconFontSize;
+      }
+    }
+  }
+
+  .active.title {
+    border-bottom: @activeTitleBorderBottom;
+    background-color: @activeTitleBackground;
+    color: @activeTitleColor;
+
+    i {
+      color: @iconColorActive;
+
+      &:before {
+        content: @iconActive;
+      }
+    }
+  }
+
+  .content {
+    background: @contentBackground;
+  }
+}
+
+/* All content padding are equal including last child */
+.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
+  padding-bottom: @contentPaddingBottom;
+}
+
+/*******************************
+            Types
+*******************************/
+
+/*--------------
+     Styled
+---------------*/
+
+.ui.styled.accordion .active.title input {
+  color: @styledActiveTitleColor;
+}

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

@@ -0,0 +1,114 @@
+/*******************************
+           Accordion
+*******************************/
+
+@boxShadow: none;
+@itemsMargin: 0;
+
+/* Title */
+@titleFont: @headerFont;
+@titlePadding: 1rem 1.563rem;
+@titlePadding: @rectangleMedium;
+@titleFontSize: 1.125rem;
+@titleColor: @textColor;
+@titleBorderBottom: @1px solid @silverGray;
+@titleColorHover: @secondaryColor;
+@titleJustifyContent: space-between;
+
+/* Icon */
+@iconColor: @oldSilver;
+@iconColorActive: @white;
+@iconOpacity: 1;
+@iconFontSize: 3rem;
+@iconFloat: none;
+@iconWidth: auto;
+@iconHeight: 1rem;
+@iconDisplay: inline-block;
+@iconMargin: 0em;
+@iconPadding: 0em;
+@iconTransition:
+  transform @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing
+;
+@iconVerticalAlign: baseline;
+@iconTransform: none;
+@iconColorHover: @secondaryColor;
+@iconInactive: "\ea4e"; // Icon of closed accordion
+@iconActive: "\EA78"; // Icon of open accordion
+@iconOrder: 1; // Icon after text of the title
+
+/* Child Accordion */
+@childAccordionMargin: 1em 0em 0em;
+@childAccordionPadding: 0em;
+
+/* Content */
+@contentMargin: 0;
+@contentPaddingBottom: 1.563rem;
+@contentPadding: @squareMedium;
+@contentBackground: #F9F9F9;
+
+/*-------------------
+       Coupling
+--------------------*/
+
+@menuTitlePadding: 0em;
+@menuIconFloat: right;
+@menuIconMargin: @lineHeightOffset 0em 0em 1em;
+@menuIconTransform: rotate(180deg);
+
+
+/*-------------------
+       States
+--------------------*/
+
+@activeIconTransform: none;
+@activeTitleBackground: @secondaryColor;
+@activeTitleColor: @white;
+@activeTitleBorderBottom: 0;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Styled */
+@styledWidth: 600px;
+@styledBackground: @white;
+@styledBorderRadius: 0;
+@styledBoxShadow: none;
+
+/* Content */
+@styledContentMargin: 0em;
+@styledContentPadding: @contentPadding;
+@contentBorder: @relative2px solid @secondaryColor;
+
+/* Child Content */
+@styledChildContentMargin: 0em;
+@styledChildContentPadding: @styledContentPadding;
+
+/* Styled Title */
+@styledTitleMargin: 0em;
+@styledTitlePadding: 0.75em 1em;
+@styledTitleFontWeight: @normal;
+@styledTitleColor: @titleColor;
+@styledTitleTransition: background-color @defaultDuration @defaultEasing;
+@styledTitleBorder: none;
+@styledTitleTransition:
+  background @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing
+;
+
+/* Styled Title States */
+@styledTitleHoverBackground: transparent;
+@styledTitleHoverColor: @teal;
+@styledActiveTitleBackground: @teal;
+@styledActiveTitleColor: @white;
+
+/* Styled Child Title States */
+@styledHoverChildTitleBackground: @styledTitleHoverBackground;
+@styledHoverChildTitleColor: @styledTitleHoverColor;
+@styledActiveChildTitleBackground: @styledActiveTitleBackground;
+@styledActiveChildTitleColor: @styledActiveTitleColor;
+
+/* Inverted */
+@invertedTitleColor: @invertedTextColor;
+

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

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

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

@@ -0,0 +1,3 @@
+/*******************************
+            Chatroom
+*******************************/

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

@@ -0,0 +1,67 @@
+/*******************************
+         Theme Overrides
+*******************************/
+@font-face {
+  font-display: swap;
+  font-family: 'Checkbox';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA)
+    format('truetype');
+}
+
+/* Checkbox */
+.ui.checkbox:not(.toggle) {
+  margin-bottom: @bottomMargin;
+
+  input {
+    &:checked ~ label {
+      &:after {
+        background-color: @primaryColor;
+        font-family: Checkbox;
+      }
+    }
+  }
+}
+
+/* Helper text for disabled element */
+.ui.disabled.checkbox + label,
+.ui.disabled.radio.checkbox + label {
+  opacity: @disabledCheckboxOpacity;
+}
+
+/* Error checkbox must have negative background */
+.error .ui.checkbox {
+  input {
+    &:checked ~ label {
+      &:after {
+        background-color: @negativeColor;
+      }
+    }
+  }
+}
+
+//Radio Button
+.ui.radio.checkbox {
+  input {
+    &:checked ~ label {
+      &:after {
+        background-color: @bulletColor;
+      }
+    }
+  }
+}
+
+.ui.radio.checkbox input:focus:checked ~ .box:after,
+.ui.radio.checkbox input:focus:checked ~ label:after {
+  background-color: @bulletColor;
+}
+
+//Error Radio Button
+.error .ui.radio.checkbox {
+  input {
+    &:checked ~ label {
+      &:after {
+        background-color: @negativeColor;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,194 @@
+/*******************************
+            Checkbox
+*******************************/
+
+@checkboxSize: 20px;
+@checkboxColor: @textColor;
+@checkboxLineHeight: @checkboxSize;
+
+
+/* Label */
+@labelDistance: 1.85714em; /* 26px @ 14/em */
+
+/* Checkbox */
+@bottomMargin: .5rem;
+@checkboxBackground: @white;
+@checkboxBorder: 1px solid @solidBorderColor;
+@checkboxBorderRadius: @3px;
+@checkboxTransition:
+  border @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing,
+  transform @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing
+;
+
+/* Checkmark */
+@checkboxCheckFontSize: 14px;
+@checkboxCheckTop: 0px;
+@checkboxCheckLeft: 0px;
+@checkboxCheckSize: @checkboxSize;
+
+/* Label */
+@labelFontSize: @relativeMedium;
+@labelColor: @textColor;
+@labelTransition: color @defaultDuration @defaultEasing;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Hover */
+@checkboxHoverBackground: @checkboxBackground;
+@checkboxHoverBorderColor: @selectedBorderColor;
+@labelHoverColor: @hoveredTextColor;
+
+/* Pressed */
+@checkboxPressedBackground: @offWhite;
+@checkboxPressedBorderColor: @selectedBorderColor;
+@checkboxPressedColor: @selectedTextColor;
+@labelPressedColor: @selectedTextColor;
+
+/* Focus */
+@checkboxFocusBackground: @white;
+@checkboxFocusBorderColor: @focusedFormMutedBorderColor;
+@checkboxFocusCheckColor: @selectedTextColor;
+@labelFocusColor: @textColor;
+
+/* Active */
+@labelActiveColor: @selectedTextColor;
+@checkboxActiveBackground: @white;
+@checkboxActiveBorderColor: @selectedBorderColor;
+@checkboxActiveCheckColor: @selectedTextColor;
+@checkboxActiveCheckOpacity: 1;
+
+/* Active Focus */
+@checkboxActiveFocusBackground: @white;
+@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor;
+@checkboxActiveFocusCheckColor: @selectedTextColor;
+
+/* Indeterminate */
+@checkboxIndeterminateBackground: @checkboxActiveBackground;
+@checkboxIndeterminateBorderColor: @checkboxActiveBorderColor;
+@checkboxIndeterminateCheckOpacity: 1;
+@checkboxIndeterminateCheckColor: @checkboxActiveCheckColor;
+
+/* Disabled */
+@disabledCheckboxOpacity: 0.5;
+@disabledCheckboxLabelColor: rgba(0, 0, 0, 1);
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Radio */
+/* Uses px to avoid rounding issues with circles */
+
+@radioSize: 20px;
+@radioTop: 0;
+@radioLeft: 0px;
+@radioLabelDistance: @labelDistance;
+
+@bulletTop: 0;
+@bulletLeft: 0px;
+@bulletScale: (0.558);
+@bulletColor: @primaryColor;
+@bulletRadius: @circularRadius;
+
+@radioFocusBackground: @checkboxFocusBackground;
+@radioFocusBulletColor: @checkboxFocusCheckColor;
+
+@radioActiveBackground: @checkboxActiveBackground;
+@radioActiveBulletColor: @checkboxActiveCheckColor;
+
+@radioActiveFocusBackground: @checkboxActiveFocusBackground;
+@radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor;
+
+/* Slider & Toggle Handle */
+@handleBackground: @white @subtleGradient;
+@handleBoxShadow:
+  @subtleShadow,
+  0px 0px 0px 1px @borderColor inset
+;
+
+/* Slider */
+@sliderHandleSize: 1.5rem;
+@sliderLineWidth: 3.5rem;
+@sliderTransitionDuration: 0.3s;
+
+@sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
+@sliderHandleTransition: left @sliderTransitionDuration @defaultEasing;
+
+@sliderWidth: @sliderLineWidth;
+@sliderHeight: (@sliderHandleSize + @sliderHandleOffset);
+
+@sliderLineHeight: @3px;
+@sliderLineVerticalOffset: 0.4rem;
+@sliderLineColor: @transparentBlack;
+@sliderLineRadius: @circularRadius;
+@sliderLineTransition: background @sliderTransitionDuration @defaultEasing;
+
+@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
+
+@sliderLabelDistance: @sliderLineWidth + 1rem;
+@sliderOffLabelColor: @unselectedTextColor;
+
+@sliderLabelLineHeight: 1rem;
+
+/* Slider States */
+@sliderHoverLaneBackground: @veryStrongTransparentBlack;
+@sliderHoverLabelColor: @hoveredTextColor;
+
+@sliderOnLineColor: @lightBlack;
+@sliderOnLabelColor: @selectedTextColor;
+
+@sliderOnFocusLineColor: @lightBlackFocus;
+@sliderOnFocusLabelColor: @sliderOnLabelColor;
+
+
+
+/* Toggle */
+@toggleLaneWidth: 3.5rem;
+@toggleHandleSize: 1.5rem;
+@toggleTransitionDuration: 0.2s;
+
+@toggleWidth: @toggleLaneWidth;
+@toggleHeight: @toggleHandleSize;
+
+@toggleHandleRadius: @circularRadius;
+@toggleHandleOffset: 0rem;
+@toggleHandleTransition:
+  background @sliderTransitionDuration @defaultEasing,
+  left @sliderTransitionDuration @defaultEasing
+;
+
+@toggleLaneBackground: @transparentBlack;
+@toggleLaneHeight: @toggleHandleSize;
+@toggleLaneBoxShadow: none;
+@toggleLaneVerticalOffset: 0rem;
+@toggleOffOffset: -0.05rem;
+@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.15rem;
+
+@toggleLabelDistance: @toggleLaneWidth + 1rem;
+@toggleLabelLineHeight: 1.5rem;
+@toggleLabelOffset: 0.15em;
+
+
+@toggleFocusColor: @veryStrongTransparentBlack;
+@toggleHoverColor: @toggleFocusColor;
+
+@toggleOffLabelColor: @checkboxColor;
+@toggleOffHandleBoxShadow: none;
+
+@toggleOnLabelColor: @selectedTextColor;
+@toggleOnLaneColor: @primaryColor;
+
+@toggleOnHandleBoxShadow: none;
+
+@toggleOnFocusLaneColor: @primaryColorFocus;
+@toggleOnFocusLabelColor: @toggleOnLabelColor;
+
+
+
+/*-------------------
+      Variations
+--------------------*/

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

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

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

@@ -0,0 +1,58 @@
+/*******************************
+            Dimmer
+*******************************/
+
+@dimmablePosition: relative;
+@dimmerPosition: absolute;
+
+@backgroundColor: rgba(130, 150, 166, 0.72);
+@lineHeight: 1;
+@perspective: 2000px;
+@padding: 1em;
+
+@duration: 0.5s;
+@transition:
+  background-color @duration linear
+;
+@zIndex: 1000;
+@textAlign: center;
+@verticalAlign: middle;
+@textColor: @white;
+@overflow: hidden;
+
+@blurredStartFilter: ~"blur(0px) grayscale(0)";
+@blurredEndFilter: ~"blur(5px) grayscale(0.7)";
+@blurredTransition: 800ms filter @defaultEasing;
+
+@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
+@blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6);
+
+/* Hidden (Default) */
+@hiddenOpacity: 0;
+
+/* Visible */
+@visibleOpacity: 1;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Page Dimmer*/
+@transformStyle: '';
+@pageDimmerPosition: fixed;
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Inverted */
+@invertedBackgroundColor: rgba(255, 255, 255, 0.85);
+@invertedTextColor: @textColor;
+
+/* Simple */
+@simpleZIndex: 1;
+@simpleStartBackgroundColor: rgba(0, 0, 0, 0);
+@simpleEndBackgroundColor: @backgroundColor;
+@simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0);
+@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;

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

@@ -0,0 +1,53 @@
+/*******************************
+         Theme Overrides
+*******************************/
+.ui.dropdown {
+  max-width: @inputMaxWidth;
+}
+
+.ui.dropdown.fluid {
+  max-width: 100%;
+}
+
+.ui.selection.dropdown {
+  border: @border;
+
+  &:active,
+  &:focus {
+    border: @borderWidth solid @secondaryColor;
+  }
+}
+
+.ui.dropdown .divider {
+  color: @black;
+}
+
+.ui.dropdown.error {
+  border: @borderWidth solid @negativeBorderColor;
+}
+
+.ui.dropdown.right {
+  float: right;
+}
+
+// This fixes the special height of all Pastanaga inputs in tags widget
+.ui.multiple.search.dropdown > input.search {
+  height: initial;
+}
+
+.ui.selection.dropdown:not(.multiple):not(.search) > .dropdown.icon {
+  position: @selectionIconPosition;
+  padding: @selectionIconPadding;
+  font-size: @selectionIconFontSize;
+}
+
+.ui.selection.dropdown:not(.multiple) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+i.icon.dropdown:before {
+  content: @dropdownIconContent;
+  font-family: 'Icons';
+}