diff --git a/common/changes/@uifabric/experiments/v-vibr-Fade_2018-06-28-23-30.json b/common/changes/@uifabric/experiments/v-vibr-Fade_2018-06-28-23-30.json new file mode 100644 index 0000000000000..0557c41d583cf --- /dev/null +++ b/common/changes/@uifabric/experiments/v-vibr-Fade_2018-06-28-23-30.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "TileList: Adds a fading out overlay over the Shimmer Tiles.", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "v-vibr@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/TilesList/TilesList.scss b/packages/experiments/src/components/TilesList/TilesList.scss index dc4afa3fca990..82b4f0fd0832e 100644 --- a/packages/experiments/src/components/TilesList/TilesList.scss +++ b/packages/experiments/src/components/TilesList/TilesList.scss @@ -1,4 +1,3 @@ - @import '~office-ui-fabric-react/src/common/common'; .listCell { @@ -43,6 +42,23 @@ align-content: flex-start; } +.shimmeredList { + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-image: linear-gradient( + to bottom, + transparent 30%, + $ms-color-whiteTranslucent40 65%, + $ms-color-white 100% + ); + } +} + .none { display: block; } diff --git a/packages/experiments/src/components/TilesList/TilesList.tsx b/packages/experiments/src/components/TilesList/TilesList.tsx index 79240f9dccbd1..b9d9e1d1c27ce 100644 --- a/packages/experiments/src/components/TilesList/TilesList.tsx +++ b/packages/experiments/src/components/TilesList/TilesList.tsx @@ -279,7 +279,8 @@ export class TilesList extends React.Component, IT