refactor(card): Rename variables from avatar to rounded

eea · Apr 18, 2022 · be01316 · be01316
1 parent 68c91a9
commit be01316
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 105 deletions.
diff --git a/src/ui/Card/RoundedCard.stories.js b/src/ui/Card/RoundedCard.stories.js
@@ -67,7 +67,7 @@ export default {
 
 const AvatarTemplate = (args) => (
   <Container>
-    <Card className={`eea avatar ${args.avatarVariant}`} fluid={args.fluid}>
+    <Card className={`eea rounded ${args.avatarVariant}`} fluid={args.fluid}>
       <Image src={args.src} wrapped ui={false} alt="card image" />
       <Card.Content>
         <Card.Header>{args.title}</Card.Header>

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -47,80 +47,6 @@
   margin-left: auto;
 }
 
-/*******************************
-            Avatar
-*******************************/
-
-.eea.card.avatar {
-  width: @avatarWidth;
-  border: none;
-
-  .content {
-    justify-content: center;
-    border-top: none;
-
-    .image {
-      display: flex;
-      justify-content: center;
-      background-color: @white;
-    }
-
-    .header {
-      margin-bottom: @avatarContentTitleMarginBottom;
-      font-size: @avatarContentTitleFontSize;
-      font-weight: @avatarContentTitleFontWeight;
-      text-align: center;
-    }
-
-    .description {
-      text-align: center;
-    }
-  }
-}
-
-.eea.card.avatar.big {
-  .image {
-    display: flex;
-    justify-content: center;
-    background-color: @white;
-
-    img {
-      width: @avatarBigImageWidth;
-      height: @avatarBigImageHeight;
-      border-radius: 50%;
-    }
-  }
-
-  .description {
-    font-size: @avatarBigMetadataFontSize;
-    font-weight: @avatarBigMetadataFontWeight;
-  }
-}
-
-.eea.avatar.small {
-  .image {
-    display: flex;
-    justify-content: center;
-    background-color: @white;
-
-    img {
-      display: flex;
-      width: @avatarSmallImageWidth;
-      height: @avatarSmallImageHeight;
-      border-radius: @avatarImageBorderRadius;
-    }
-  }
-
-  .header {
-    color: @avatarSmallTitleColor;
-  }
-
-  .description {
-    font-size: @avatarSmallMetadataFontSize;
-    font-weight: @avatarSmallMetadataFontWeight;
-  }
-}
-
 /*******************************
             Primary
 *******************************/
@@ -180,6 +106,7 @@
 /*******************************
             Tertiary
 *******************************/
+
 .ui.card.tertiary {
   background: @tertiaryBackground;
 }
@@ -204,6 +131,89 @@
   color: @tertiaryMetaColor;
 }
 
+/*******************************
+          Rounded Card
+*******************************/
+
+.ui.cards > .ui.card.rounded > .image,
+.ui.card.rounded  > .image {
+  height: auto;
+}
+
+.ui.card.rounded {
+  width: @roundedWidth;
+  border: none;
+
+  .content {
+    justify-content: center;
+    border-top: none;
+
+    .image {
+      display: flex;
+      justify-content: center;
+      background-color: @white;
+    }
+
+    .header {
+      margin-bottom: @roundedContentTitleMarginBottom;
+      font-size: @roundedContentTitleFontSize;
+      font-weight: @roundedContentTitleFontWeight;
+      text-align: center;
+    }
+
+    .description {
+      text-align: center;
+    }
+  }
+}
+
+.ui.card.rounded.big {
+  .image {
+    display: flex;
+    justify-content: center;
+    background-color: @white;
+
+    img {
+      width: @roundedBigImageWidth;
+      height: @roundedBigImageHeight;
+      border-radius: 50%;
+    }
+  }
+
+  .description {
+    font-size: @roundedBigMetadataFontSize;
+    font-weight: @roundedBigMetadataFontWeight;
+  }
+}
+
+.ui.rounded.small {
+  .image {
+    display: flex;
+    justify-content: center;
+    background-color: @white;
+
+    img {
+      display: flex;
+      width: @roundedSmallImageWidth;
+      height: @roundedSmallImageHeight;
+      border-radius: @roundedImageBorderRadius;
+    }
+  }
+
+  .header {
+    color: @roundedSmallTitleColor;
+  }
+
+  .description {
+    font-size: @roundedSmallMetadataFontSize;
+    font-weight: @roundedSmallMetadataFontWeight;
+  }
+}
+
+/*******************************
+        Publication Card
+*******************************/
+
 .ui.card.publication {
   width: @mobilePublicationCardWidth;
   border: none;

diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -229,35 +229,6 @@
 @coloredShadowDistance: 2px;
 
 
-/*******************************
-            Avatar
-*******************************/
-/* Global */
-@avatarWidth                    : 100%;
-@avatarWrapperWidth             : 100%;
-@avatarWrapperGap               : @largeGap;
-@avatarContentWrapperWidth      : 100%;
-@avatarImageBorderRadius        : 50%;
-@avatarContentTitleMarginBottom : 0;
-@avatarImageWrapperWidth        : 100%;
-@avatarImageBackgroundSize      : cover;
-@avatarContentTitleFontWeight   : @bold;
-@avatarContentTitleFontSize     : 1.25rem;
-
-/* Big */
-@avatarBigImageHeight           : 173px;
-@avatarBigImageWidth            : 173px;
-@avatarBigMetadataFontSize      : 1.25rem;
-@avatarBigMetadataFontWeight    : @normal;
-
-/* Small */
-@avatarSmallImageHeight         : 150px;
-@avatarSmallImageWidth          : 150px;
-@avatarSmallTitleColor          : @secondaryColor;
-@avatarSmallMetadataFontSize    : 1rem;
-@avatarSmallMetadataFontWeight  : 300;
-
-
 /*******************************
             Primary
 *******************************/
@@ -288,9 +259,36 @@
 @tertiaryExtraLinkHoverColor: @white;
 @tertiaryMetaColor: @white;
 
+/*******************************
+          Rounded Card
+*******************************/
+/* Global */
+@roundedWidth                    : 100%;
+@roundedWrapperWidth             : 100%;
+@roundedWrapperGap               : @largeGap;
+@roundedContentWrapperWidth      : 100%;
+@roundedImageBorderRadius        : @circularRadius;
+@roundedContentTitleMarginBottom : 0;
+@roundedImageWrapperWidth        : 100%;
+@roundedImageBackgroundSize      : cover;
+@roundedContentTitleFontWeight   : @bold;
+@roundedContentTitleFontSize     : 1.25rem;
+
+/* Big */
+@roundedBigImageHeight           : 173px;
+@roundedBigImageWidth            : 173px;
+@roundedBigMetadataFontSize      : 1.25rem;
+@roundedBigMetadataFontWeight    : @normal;
+
+/* Small */
+@roundedSmallImageHeight         : 150px;
+@roundedSmallImageWidth          : 150px;
+@roundedSmallTitleColor          : @secondaryColor;
+@roundedSmallMetadataFontSize    : 1rem;
+@roundedSmallMetadataFontWeight  : 300;
 
 /*******************************
-            Publication
+        Publication Card
 *******************************/
 @mobilePublicationCardWidth: 300px;
 @tabletPublicationCardWidth: 660px;