CSS Modules: Document Card

apps/fabric-examples/src/pages/DocumentCardPage/examples/DocumentCard.Compact.Example.tsx

@@ -48,7 +48,7 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
       <div>
         <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com' accentColor='#ce4b1f'>
           <DocumentCardPreview { ...previewProps } />
-          <div className='ms-DocumentCard-details'>
+          <div className="ms-DocumentCard-details">
             <DocumentCardTitle
               title='4 files were uploaded'
               shouldTruncate={ true } />
@@ -65,7 +65,7 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
         <p />
         <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com' accentColor='#ce4b1f'>
           <DocumentCardPreview previewImages={ [previewProps.previewImages[0]] } />
-          <div className='ms-DocumentCard-details'>
+          <div className="ms-DocumentCard-details">
             <DocumentCardTitle
               title='Revenue stream proposal fiscal year 2016 version02.pptx'
               shouldTruncate={ true } />

packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss

@@ -1,80 +1,288 @@
 @import '../../common/common';
 
-:global {
-  .ms-DocumentCard {
-    -webkit-font-smoothing: antialiased;
-    background-color: $ms-color-white;
-    border: 1px solid $ms-color-neutralLight;
-    box-sizing: border-box;
-    max-width: 320px;
-    min-width: 206px;
-    user-select: none;
-    position: relative;
-  }
+.root {
+  -webkit-font-smoothing: antialiased;
+  background-color: $ms-color-white;
+  border: 1px solid $ms-color-neutralLight;
+  box-sizing: border-box;
+  max-width: 320px;
+  min-width: 206px;
+  user-select: none;
+  position: relative;
+}
 
-  .ms-DocumentCard--actionable:hover {
-    cursor: pointer;
-    border-color: $ms-color-neutralTertiaryAlt;
-
-    // Place a heavier border within the document card
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border: 1px solid $ms-color-neutralTertiaryAlt;
-      pointer-events: none;
-    }
-  }
+.rootIsActionable:hover {
+  cursor: pointer;
+  border-color: $ms-color-neutralTertiaryAlt;
 
-  // When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding
-  .ms-DocumentCardLocation + .ms-DocumentCardTitle {
-    padding-top: 4px;
+  // Place a heavier border within the document card
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid $ms-color-neutralTertiaryAlt;
+    pointer-events: none;
   }
+}
 
-  // Modifier: Compact layout
-  .ms-DocumentCard--compact {
-    border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
+// When a DocumentCardTitle follows a DocumentCardLocation, we want to reduce the padding
+.location + .title {
+  padding-top: 4px;
+}
+
+// Modifier: Compact layout
+.rootIsCompact {
+  border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
+  display: flex;
+  max-width: 480px;
+  height: 109px;
+  :global(.ms-DocumentCard-details) {
     display: flex;
-    max-width: 480px;
-    height: 109px;
-
-    // Remove the usual accent color from the preview
-    .ms-DocumentCardPreview {
-      border-bottom: none;
-      max-height: 106px;
-      max-width: 144px;
-
-      .ms-DocumentCardPreview-icon {
-        .ms-Image-image {
-          max-height: 32px;
-          max-width: 32px;
-        }
+    flex-direction: column;
+    flex: 1;
+    justify-content: space-between;
+  }
+  // Remove the usual accent color from the preview
+  .preview {
+    border-bottom: none;
+    max-height: 106px;
+    max-width: 144px;
+
+    .icon {
+      :global(.ms-Image-image) {
+        max-height: 32px;
+        max-width: 32px;
       }
     }
+  }
 
-    .ms-DocumentCardPreview {
-      @include border-right(1px, solid, $ms-color-neutralLight);
-    }
+  .preview {
+    @include border-right(1px, solid, $ms-color-neutralLight);
+  }
+
+  .title {
+      padding: 12px 16px 8px 16px;
+      @include ms-font-m;
+      line-height: 16px;
+  }
+
+  .activity {
+    padding-bottom: 12px;
+  }
+}
 
-    // Expand the details area to fill the remaining width
-    .ms-DocumentCard-details {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      justify-content: space-between;
-    }
 
-    .ms-DocumentCardTitle {
-        padding: 12px 16px 8px 16px;
-        @include ms-font-m;
-        line-height: 16px;
+/** Actions **/
+$ms-DocumentCardActions-actionSize: 34px;
+$ms-DocumentCardActions-horizontalPadding: 12px;
+$ms-DocumentCardActions-verticalPadding: 4px;
+
+.actions {
+  height: $ms-DocumentCardActions-actionSize;
+  padding: $ms-DocumentCardActions-verticalPadding $ms-DocumentCardActions-horizontalPadding;
+  position: relative;
+}
+
+.action {
+  @include float(left);
+  @include margin-right(4px);
+  color: $ms-color-neutralSecondary;
+  cursor: pointer;
+
+  :global(.ms-Button) {
+    font-size: 16px;
+    height: $ms-DocumentCardActions-actionSize;
+    width: $ms-DocumentCardActions-actionSize;
+  }
+
+  :global(.ms-Button:hover) {
+    :global(.ms-Button-icon) {
+      color: #1174c3;
+      cursor: pointer;
     }
+  }
+}
+
+.views {
+  @include text-align(right);
+  line-height: $ms-DocumentCardActions-actionSize;
+
+  :global(.ms-Icon) {
+    @include margin-right(4px);
+    font-size: $ms-icon-size-m;
+    vertical-align: top;
+  }
+}
+
+
+/** Activity **/
+$ms-DocumentCardActivity-horizontalPadding: 16px;
+$ms-DocumentCardActivity-imageSize: 25px;
+$ms-DocumentCardActivity-verticalPadding: 8px;
+$ms-DocumentCardActivity-personaTextGutter: 8px;
+
+.activity {
+  padding: $ms-DocumentCardActivity-verticalPadding $ms-DocumentCardActivity-horizontalPadding;
+  position: relative;
+}
+
+.activityIsMultiplePeople {
+  .avatar:nth-of-type(2) {
+    @include margin-left(-16px);
+  }
+
+  .activityDetails {
+    @include left($ms-DocumentCardActivity-horizontalPadding + ($ms-DocumentCardActivity-imageSize * 1.5) + $ms-DocumentCardActivity-personaTextGutter);
+  }
+}
+
+.avatars {
+  @include margin-left(-2px); // Avatars sit outside of the usual padding for visual balance
+}
+
+.avatar {
+  border: 2px solid #fafafa; // Match the background of the card
+  border-radius: 50%;
+  height: $ms-DocumentCardActivity-imageSize;
+  width: $ms-DocumentCardActivity-imageSize;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+
+  :global(.ms-Persona-initials) {
+    height: $ms-DocumentCardActivity-imageSize;
+    line-height: $ms-DocumentCardActivity-imageSize;
+    font-size: $ms-font-size-s;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+}
+
+.avatarInitials {
+  background: $ms-color-themePrimary;
+  color: $ms-color-white;
+  font-weight: 100;
+}
 
-    .ms-DocumentCardActivity{
-      padding-bottom: 12px;
+.activityDetails {
+  @include left($ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter);
+  height: $ms-DocumentCardActivity-imageSize;
+  position: absolute;
+  top: $ms-DocumentCardActivity-verticalPadding;
+  width: calc(100% - #{$ms-DocumentCardActivity-horizontalPadding + $ms-DocumentCardActivity-imageSize + $ms-DocumentCardActivity-personaTextGutter + $ms-DocumentCardActivity-horizontalPadding});
+}
+
+.name,
+.activityActivity {
+  display: block;
+  @include ms-font-s;
+  color: $ms-color-neutralSecondaryAlt;
+  line-height: 15px;
+  height: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.name {
+  color: $ms-color-neutralPrimary;
+  @include ms-fontWeight-semibold;
+}
+
+/** Location **/
+.location {
+  @include ms-font-s;
+  color: $ms-color-neutralPrimary;
+  display: block;
+  padding: 8px 16px;
+  position: relative;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:hover {
+    color: $ms-color-themePrimary;
+    cursor: pointer;
+  }
+}
+
+
+/** Preview **/
+.preview {
+  border-bottom: 2px solid $ms-color-neutralTertiary; // Default border color
+  position: relative;
+  background-color: $ms-color-neutralLighterAlt;
+  overflow: hidden;
+
+  &.previewIsFileList {
+    background-color: $ms-color-white;
+  }
+}
+
+.icon {
+  @include left(10px);
+  bottom: 10px;
+  position: absolute;
+}
+
+.fileList {
+  @include padding(16px, 16px, 0, 16px);
+  list-style-type: none;
+  margin: 0;
+
+  li {
+    height: 16px;
+    line-height: 16px; // Vertically center the text
+    margin-bottom: 8px;
+    overflow: hidden;
+    @include padding-left(24px); // Make room for icon
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  a {
+    font-size: $ms-font-size-s;
+    text-decoration: none;
+    color: $ms-color-neutralDark;
+
+    &:hover {
+      color: $ms-color-themePrimary;
     }
   }
 }
+
+.fileListIcon {
+  @include left(0);
+  position: absolute;
+  top: 0;
+}
+
+.fileListMore {
+  @include padding(0px, 16px, 8px, 16px);
+  display: block;
+  font-size: $ms-font-size-s;
+}
+
+
+/** Title **/
+$DocumentCard-title-lineHeight: 21px;
+.title {
+  padding: 8px 16px;
+  display: block;
+  @include ms-font-l;
+  color: $ms-color-neutralPrimary;
+  height: 38px; // Two lines of text, making sure the third line is hidden
+  line-height: $DocumentCard-title-lineHeight;
+  overflow: hidden;
+  word-wrap: break-word;
+}

packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx

@@ -4,7 +4,7 @@ import {
   autobind,
   css
 } from '../../Utilities';
-import './DocumentCard.scss';
+import styles from './DocumentCard.scss';
 
 export class DocumentCard extends React.Component<IDocumentCardProps, any> {
   public static defaultProps: IDocumentCardProps = {
@@ -28,9 +28,10 @@ export class DocumentCard extends React.Component<IDocumentCardProps, any> {
         className={
           css(
             'ms-DocumentCard',
+            styles.root,
             {
-              'ms-DocumentCard--actionable': actionable,
-              'ms-DocumentCard--compact': type === DocumentCardType.compact ? true : false
+              ['ms-DocumentCard--actionable ' + styles.rootIsActionable]: actionable,
+              ['ms-DocumentCard--compact ' + styles.rootIsCompact]: type === DocumentCardType.compact ? true : false
             },
             className
           )