Issues-561: Updated styles for Group attributes

Author: atelomycterus

design/custom.css

@@ -8,31 +8,50 @@
 .Group {
   font-family: $global-body_fontFamily !important;
   .Group-Description {
-      white-space: pre-line;
       color: $global-color_black_light;
       font-size: $global-large_fontSize;
-      margin-bottom: 27px;
+      margin-bottom: 33px;
+     a {
+       color: $global-blue;
+     }
+     > br {
+       line-height: 0px;
+       display: inline-block;
+       content: '';
     }
+  }
+
   .Group-Header {
     .Group-Info {
       padding-left: 0px;
 
       .Table {
-        width:  100%;
+        width:  calc(100% + 46px);
+        display: table;
+        border-collapse: separate;
+        border-spacing: 23px 0px;
+        margin-left: -23px;
+        margin-right: -23px;
+
         .TableRow {
+          border: none;
           .TableCell {
+            width: 50%;
             padding: 10px;
-            border-top: 1px solid #D4D4D4;
             color: $global-color_black_light;
             font-size: $global-medium_fontSize;
-          }
-          .Cell1 {
-            width: 10%;
-          }
-
-          .Cell2 {
-            color: $global-color_grey;
-            width: 90%;
+            display:table-cell;
+            background-clip: padding-box;
+            border-top: 1px solid #D4D4D4;
+            .MLabel {
+              min-width: 90px;
+              white-space: nowrap;
+              display: inline-block;
+            }
+            .MValue {
+              color: $global-color_grey;
+              font-weight: $global-medium_fontWeight;
+            }
           }
         }
         .TableRow.Last {
@@ -45,3 +64,46 @@
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .Group {
+    .Group-Header {
+      .Group-Info {
+        padding-left: 0px;
+        .Table {
+          width:  100%;
+          margin: 0px;
+          border-spacing:0px;
+
+          .TableRow {
+            border: none;
+            .TableCell {
+              width: 100%;
+              display:block;
+              background-clip: padding-box;
+              border-top: 1px solid #D4D4D4;
+              .MLabel {
+                min-width: 90px;
+                white-space: nowrap;
+                display: inline-block;
+              }
+              .MValue {
+                color: $global-color_grey;
+                font-weight: $global-medium_fontWeight;
+              }
+            }
+          }
+          .TableRow.Last {
+            .TableCell {
+              border-bottom: none;
+              &:last-child {
+                border-bottom: 1px solid #D4D4D4;
+              }
+            }
+          }
+
+        }
+      }
+    }
+  }
+}

design/custom.css.map

@@ -45,6 +45,7 @@ $utility-SVGEncoding: 'data:image/svg+xml,';
 \* -------------------------------------------------------------- */
 
 $global-normal_fontWeight: 400 !default;
+$global-medium_fontWeight: 500 !default;
 $global-semibold_fontWeight: 600 !default;
 $global-bold_fontWeight: 700 !default;
 

src/scss/base/_group.scss

@@ -33,12 +33,16 @@ body.Group {
 
   }
 }
+// Over selected on core...
+.Group-Header.Group-Header.Group-Header.NoBanner {
+  margin-bottom: 0px;
+}
 
 .Group-Header.NoBanner {
   min-height: 1px;
   display: flex;
   .Group-Info {
-    margin: 0px 0px 30px 0px;
+    margin: 0px;
     padding-left: 0;
   }
 }