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

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;
   }