@eeacms/volto-eea-design-system 0.2.1 → 0.2.4

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

@@ -22,7 +22,7 @@
 @itemLineHeight: @relativeBig;
 
 /* Sub List */
-@childListPadding: 0.75em 0em 0.25em 0.5em;
+@childListPadding: 0.25em 0em 0.25em 0.5em;
 @childListIndent: 1em;
 
 /* Sub List Item */
@@ -63,6 +63,7 @@
 /* Description */
 @itemDescriptionColor: rgba(0, 0, 0, 0.7);
 @itemDescriptionMarginTop: 0.5rem 0;
+@descriptionMarginInlineStart: 0;
 
 /* Link */
 @itemLinkColor: @linkColor;
@@ -190,6 +191,7 @@
 @orderedChildCountDistance: 1em;
 @orderedChildCountOffset: -2em;
 @orderedGrandchildCountOffset: -2.8em;
+@orderedGreatGrandchildCountOffset: -3.8em;
 
 @orderedInvertedCountColor: @invertedLightTextColor;
 

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

@@ -1,3 +1,200 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+.ui.loader.eea-loader:after,
+.ui.loader.eea-loader:before {
+  display: none;
+}
+
+.ui.text.loader.eea-loader {
+  display: flex;
+  min-width: @eeaLoaderMinWidth;
+  max-width: @eeaLoaderMaxWidth;
+  align-items: end;
+  justify-content: center;
+  padding: @eeaLoaderPadding;
+  animation: loaderPulse ease-out 2.5s infinite;
+  background: @eeaLoaderBackground;
+  background-image: linear-gradient(
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0)
+    ),
+    url('../assets/images/loaderImage.png');
+  background-position: @eeaLoaderBackgroundPosition;
+  background-repeat: no-repeat;
+  border-radius: @eeaLoaderBorderRadius;
+  color: @eeaLoaderTextColor;
+  font-size: @bigFontSize;
+  font-weight: @eeaLoaderTextFontWeight;
+}
+
+@keyframes loaderPulse {
+  0% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  5% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  10% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  15% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.1),
+        rgba(255, 255, 255, 0.1)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  20% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.2)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  25% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.3),
+        rgba(255, 255, 255, 0.3)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  30% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.4),
+        rgba(255, 255, 255, 0.4)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  35% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.5),
+        rgba(255, 255, 255, 0.5)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  40% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.6),
+        rgba(255, 255, 255, 0.6)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  45% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.7),
+        rgba(255, 255, 255, 0.7)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  50% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.75),
+        rgba(255, 255, 255, 0.8)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  55% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.7),
+        rgba(255, 255, 255, 0.7)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  60% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.6),
+        rgba(255, 255, 255, 0.6)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  65% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.5),
+        rgba(255, 255, 255, 0.5)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  70% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.4),
+        rgba(255, 255, 255, 0.4)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  75% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.3),
+        rgba(255, 255, 255, 0.3)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  80% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.2)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  85% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0.1),
+        rgba(255, 255, 255, 0.1)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  90% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  95% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+
+  100% {
+    background-image: linear-gradient(
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0)
+      ),
+      url('../assets/images/loaderImage.png');
+  }
+}

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

@@ -29,7 +29,6 @@
 @loaderTextColor: @textColor;
 @invertedLoaderTextColor: @invertedTextColor;
 
-
 /*-------------------
         States
 --------------------*/
@@ -44,6 +43,18 @@
 @inlineVerticalAlign: middle;
 @inlineMargin: 0em;
 
+/*-------------------
+      EEA Loader
+--------------------*/
+@eeaLoaderPadding: 8.5rem 2rem 1.5rem 2rem;
+@eeaLoaderMinWidth: 190px;
+@eeaLoaderMaxWidth: 210px;
+@eeaLoaderBackground: @white;
+@eeaLoaderBackgroundPosition: center 1.5rem;
+@eeaLoaderBorderRadius: 4.5rem 2rem 0 2rem;
+@eeaLoaderTextColor: @primaryColor;
+@eeaLoaderTextFontWeight: @bold;
+
 /* Exact Sizes (Avoids Rounding Errors) */
 @mini    : @14px;
 @tiny    : @16px;

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

@@ -1,3 +1,80 @@
+/*******************************
+        Pastanaga Theme Overrides
+*******************************/
+
+.ui.basic.segment.content-area {
+  flex: 1 0 auto; /* IE11 fix, can't barely use  flex: 1; */
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.ui.primary.segment {
+  border-bottom: @4px solid @greyBorderColor;
+  font-size: @16px;
+  font-weight: @headerFontWeight;
+}
+
+.ui.secondary.segment {
+  font-size: @16px;
+}
+
+.ui.discreet.segment {
+  color: @lightGrey;
+  font-size: @14px;
+}
+
+.ui.form.segment {
+  padding: 0;
+
+  .ui.grid > .row {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+.ui.actions.segment {
+  border-top: @1px solid @lightGreyBorderColor;
+}
+
+.inverted.segment a.item {
+  color: @white;
+  text-decoration: underline;
+}
+
+.pusher > .ui.basic.segment {
+  padding-bottom: 0;
+}
+
+.ui.secondary.attached.segment {
+  text-transform: uppercase;
+}
+
+.ui.segment.dashed {
+  border: 3px dashed #ccc;
+  box-shadow: none;
+}
+
+.users-control-panel .ui.clearing.segment.actions {
+  display: inline-block;
+  width: 100%;
+  text-transform: uppercase;
+}
+
+.users-control-panel table div.item::after {
+  display: none;
+}
+
+.ui.segment.imageborder {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.ui.segment.listing-item {
+  display: flex;
+  align-items: center;
+}
+
 /*******************************
          Theme Overrides
 *******************************/

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

@@ -127,8 +127,8 @@
 @coloredBorderSize: 2px;
 
 /* Ordinality */
-@secondaryBackground: @deepBlue;
-@secondaryColor: @white;
+@secondaryBackground: @tealBackground;
+@secondaryColor: @textColor;
 
 @tertiaryBackground:  @midWhite;
 @tertiaryColor: @mutedTextColor;

package/theme/themes/eea/extras/avatarGrid.less

@@ -9,35 +9,33 @@
 
 .eea.avatar-grid {
   width: @avatarGridWidth;
+
   .wrapper {
     width: @avatarGridWrapperWidth;
+
     .content {
-      width: @avatarGridContentWidth;
       display: flex;
       flex-direction: column;
-
-      .grid-title {
-        width: @avatarGridContentTitleWidth;
-        font-weight: @avatarGridContentTitleFontWeight;
-        font-size: @avatarGridContentTitleFontSize;
-        text-align: center;
-      }
-
-      .grid-title.hidden {
-        display: none;
-      }
-
-      .avatar.group {
-        display: flex;
-        justify-content: center;
-        width: @avatarGroupWidth;
-        margin-top: @avatarGroupMarginTop;
-
-        .avatar-wrapper {
-          padding-left: @avatarGroupWrapperPaddingRight;
-          padding-right: @avatarGroupWrapperPaddingRight;
-        }
-      }
+      width: @avatarGridContentWidth;
     }
   }
 }
+
+.eea.avatar-grid {
+  .grid-title {
+    text-align: @avatarGridContentTitleTextAlign;
+    width: @avatarGridContentTitleWidth;
+    margin: @avatarGroupMargin;
+  }
+
+  .grid-title.hidden {
+    display: none;
+  }
+}
+
+.eea.avatar-grid .avatar.group {
+  display: flex;
+  justify-content: center;
+  width: @avatarGroupWidth;
+  margin: @avatarGroupMargin;
+}

package/theme/themes/eea/extras/avatarGrid.variables

@@ -2,19 +2,15 @@
             Avatar Grid
 *******************************/
 
-@avatarGridWidth: 100%;
+@avatarGridWidth                    : 100%;
 @avatarGridWrapperWidth             : 100%;
 @avatarGridContentWidth             : 100%;
 
 /* Grid Title */
+@avatarGridContentTitleTextAlign    : center;
 @avatarGridContentTitleWidth        : 100%;
-@avatarGridContentTitleFontWeight   : 700;
-@avatarGridContentTitleFontSize     : 36px;
-@avatarGridContentTitleLineHeight   : 20px;
-
+@avatarGridContentTitleFontWeight   : @bold;
 
 /* Avatar Group */
 @avatarGroupWidth                   : 100%;
-@avatarGroupMarginTop               : 67.54px;
-@avatarGroupWrapperPaddingLeft      : 32px; 
-@avatarGroupWrapperPaddingRight     : 32px; 
+@avatarGroupMargin                  : @largeGap 0;

package/theme/themes/eea/extras/banner.less

@@ -90,14 +90,12 @@
 
     .gradient {
       background-image: @backgroundGradientWithImage;
-      
+
       .content {
         padding: @mobileContentPaddingWithImage;
       }
     }
   }
-
-
 }
 
 /*Share Popup*/
@@ -107,27 +105,26 @@
   filter: @sharePopupFilter;
 
   p {
-      font-size: @sharePopupFontSize;
-      font-weight: @sharePopupFontWeight;
-      line-height: @sharePopupLineHeight;
+    font-size: @sharePopupFontSize;
+    font-weight: @sharePopupFontWeight;
+    line-height: @sharePopupLineHeight;
   }
 
   .actions {
-      flex-flow: column;
-      i.icon {
-          color: @sharePopupActionsIconColor;
-      }
+    flex-flow: column;
+    i.icon {
+      color: @sharePopupActionsIconColor;
+    }
 
-      .action {
-          display:flex;
-          justify-content:center
-      }
+    .action {
+      display: flex;
+      justify-content: center;
+    }
 
-      .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
-        margin: @sharePopupActionsIconMargin;
-      }
+    .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
+      margin: @sharePopupActionsIconMargin;
+    }
   }
-
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
@@ -135,30 +132,30 @@
     .gradient {
       .content {
         padding: @tabletContentPadding;
-  
+
         .title {
           font-size: @tabletTitleFontSize;
           font-weight: @titleFontWeight;
           margin: @tabletTitleMargin;
           line-height: @tabletTitleLineHeight;
         }
-  
+
         .metadata {
           font-size: @tabletMetadataFontSize;
           line-height: @tabletMetadataLineHeight;
         }
-  
+
         .actions {
           align-items: @tabletActionsAlignItems;
           flex-direction: @tabletActionsFlexDirection;
-  
+
           .action {
-            min-width:@tabletActionsActionMinWidth;
-  
+            min-width: @tabletActionsActionMinWidth;
+
             .ui.basic.inverted.button i.icon {
-                margin: @tabletBannerActionButtonMargin;
-                font-size: @tabletBannerActionButtonIconFontSize;
-                vertical-align: @bannerActionButtonIconVerticalAlign;
+              margin: @tabletBannerActionButtonMargin;
+              font-size: @tabletBannerActionButtonIconFontSize;
+              vertical-align: @bannerActionButtonIconVerticalAlign;
             }
           }
         }
@@ -174,32 +171,28 @@
   .ui.popup.share-popup {
     min-width: @tabletSharePopupMinWidth;
 
-    .actions{
-        flex-flow: row;
-        display: flex;
-        justify-content: space-between;
+    .actions {
+      flex-flow: row;
+      display: flex;
+      justify-content: space-between;
 
-        .action {
-            display:inherit;
-        }
+      .action {
+        display: inherit;
+      }
     }
-
   }
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-
   .eea.banner {
-
     .image {
-
       .gradient .content {
         padding: @computerContentPaddingWithImage;
       }
     }
 
     .gradient .content {
-      padding: @computerContentPadding ;
+      padding: @computerContentPadding;
 
       .title {
         font-size: @computerTitleFontSize;
@@ -207,7 +200,5 @@
         line-height: @computerTitleLineHeight;
       }
     }
-
   }
-
 }

package/theme/themes/eea/extras/blockquote.less

@@ -7,7 +7,8 @@
             Blockquote
 *******************************/
 
-blockquote.callout, p.callout {
+blockquote.callout,
+p.callout {
   border: @calloutBorder;
   box-shadow: @calloutBoxShadow;
   border-radius: @calloutBorderRadius;
@@ -55,7 +56,8 @@ blockquote.callout, p.callout {
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  blockquote.callout, p.callout {
+  blockquote.callout,
+  p.callout {
     border-left: @tabletBlockquoteBorderLeft;
     font-size: @tabletQuoteFontSize;
   }
@@ -73,7 +75,8 @@ blockquote.callout, p.callout {
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
-  blockquote.callout, p.callout {
+  blockquote.callout,
+  p.callout {
     font-size: @computerQuoteFontSize;
   }