refactor(less variables):change pullquote styles

eea · Mar 16, 2022 · 9ad94bb · 9ad94bb
1 parent 6bce35f
commit 9ad94bb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/theme/themes/eea/extras/pullquote.less b/theme/themes/eea/extras/pullquote.less
@@ -15,16 +15,46 @@
   .content {
     margin: @contentMargin;
     .author {
+      color: @authorTextColor;
       text-align: @authorTextAlign;
+      font-weight: @authorFontWeight;
+      font-size: @authorFontSize;
+      line-height: @authorLineHeight;
+      letter-spacing: @authorLetterSpacing;
+      margin: @authorMargin;
+    }
+
+    .meta {
+      text-align: @metaTextAlign;
+      font-weight: @metaFontWeight;
+      font-size: @metaFontSize;
+      line-height: @metaLineHeight;
+      letter-spacing: @metaLetterSpacing;
     }
   }
   i.icon {
     font-size: @quoteIconSize;
     color: @quoteIconColor;
   }
-  .quote.right {
-    float: @quoteDownIconFloat;
+
+  .quotes.wrapper {
+    display: flex;
+
+    i.icon {
+      display: flex;
+      align-items: flex-end;
+    }
+
+    i.icomn:first-child {
+      align-self:flex-start
+    }
+
+    i.icon:last-child {
+      align-self: flex-end;
+    }
+
   }
+
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {

diff --git a/theme/themes/eea/extras/pullquote.variables b/theme/themes/eea/extras/pullquote.variables
@@ -3,10 +3,10 @@
 *******************************/
 
 /* Body */
-@pullquotePadding       : @relative10px 0 @relative50px;
+@pullquotePadding       : @relative10px  @relative10px;
 @pullquoteMobileMargin  : 0;
-@pullquoteMargin        : 0 2rem;
-@maxWidthOnFloat        : 400px;
+@pullquoteMargin        : 0;
+@maxWidthOnFloat        : 50%;
 @paddingLeftFloat       : 0 1.5rem 1rem 0;
 @paddingRightFloat      : 0 0 1rem 1.5rem;
 @contentWordBreak       : break-word;
@@ -16,7 +16,20 @@
 @contentMargin: 0;
 
 /* Author */
+@authorTextColor: @darkCyan;
 @authorTextAlign: right;
+@authorFontWeight   : 700;
+@authorFontSize     : 20px;
+@authorLineHeight   : 30px;
+@authorLetterSpacing: -0.015em;
+@authorMargin: 0;
+
+/* Metadata */
+@metaTextAlign: right;
+@metaFontWeight: 300;
+@metaFontSize: 16px;
+@metaLineHeight: 24px;
+@metaLetterSpacing: -0.015em;
 
 /* Icon */
 @quoteIconSize      : 2rem;