@pnp/spfx-controls-react 4.0.0-beta.1344828 → 4.0.0-beta.3809332

package/lib/controls/filePicker/controls/DocumentTile/DocumentTile.module.scss.css

@@ -0,0 +1,1005 @@
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+.filePicker {
+  color: inherit;
+}
+
+.filePicker :global(.ms-Panel-commands) {
+  display: none;
+}
+
+.filePicker :global(.ms-Panel-main) {
+  top: 50px;
+  border: none;
+  overflow-y: hidden;
+}
+
+[dir=ltr] .filePicker :global(.ms-Panel-content) {
+  padding-left: 0;
+}
+
+.filePicker :global(.ms-Panel-contentInner) {
+  padding: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.filePicker :global(.ms-Panel-header) {
+  margin: 0;
+}
+
+.filePicker :global(.ms-Nav-link) {
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  display: block;
+  text-align: center;
+  cursor: pointer;
+  padding-top: 0px;
+  padding-right: 20px;
+  padding-bottom: 0px;
+  padding-left: 15px;
+  height: 36px;
+  color: "[theme:neutralPrimary, default:#323130]";
+  background-color: transparent;
+  width: 100%;
+  line-height: 36px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: transparent;
+  border-width: initial;
+  border-style: none;
+  border-image: initial;
+  text-decoration: none;
+  border-radius: 0px;
+  overflow: hidden;
+  border-color: transparent;
+}
+
+.filePicker :global(.is-selected) :global(.ms-Nav-link) {
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  display: block;
+  text-align: center;
+  cursor: pointer;
+  padding-top: 0px;
+  padding-right: 20px;
+  padding-bottom: 0px;
+  padding-left: 15px;
+  height: 36px;
+  color: "[theme:themePrimary, default:#0078d4]";
+  background-color: "[theme:neutralLighter, default:#f3f2f1]";
+  width: 100%;
+  line-height: 36px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: transparent;
+  border-width: initial;
+  border-style: none;
+  text-decoration: none;
+  border-radius: 0px;
+  overflow: hidden;
+}
+
+.tabsContainer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: auto;
+}
+
+.tabContainer {
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+[dir=ltr] .tabsContainer {
+  left: 212px;
+}
+
+[dir=ltr] .tabsContainer {
+  right: 0;
+}
+
+.nav {
+  position: absolute;
+  height: 100%;
+  color: "[theme:neutralLighter, default:#f3f2f1]";
+}
+
+[dir=ltr] .nav {
+  border-right: 2px solid;
+  width: 210px;
+}
+
+.nav :global(.ms-Nav) {
+  height: 100%;
+  width: 210px;
+  padding-top: 60px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-top-width: 40px;
+  border-top-style: solid;
+  color: "[theme:neutralLighter, default:#f3f2f1]";
+}
+
+.tabHeaderContainer {
+  display: inline-block;
+  width: 100%;
+  color: "[theme:neutralLighter, default:#f3f2f1]";
+  border-top: 40px solid;
+}
+
+.breadcrumbNav {
+  margin-top: 0px;
+  padding: 22px 32px;
+}
+
+.breadcrumbNavItem {
+  color: "[theme:neutralPrimary, default:#323130]";
+  font-size: 24px;
+  font-weight: 600;
+  padding: 22px 8px 20px 0;
+}
+
+.breadcrumbNav :global(.ms-Breadcrumb-listItem:last-child .ms-Breadcrumb-itemLink) {
+  font-weight: 600;
+}
+
+.tab {
+  overflow-y: auto;
+  flex-grow: 2;
+}
+
+.tabOffset {
+  padding: 0 32px;
+}
+
+.tabFiles {
+  overflow-y: hidden;
+  overflow-x: hidden;
+  flex-grow: 2;
+  padding: 0 32px;
+}
+
+.scrollablePaneWrapper {
+  height: 75vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.actionButtonsContainer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  background-color: "[theme:white, default:#ffffff]";
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+.actionButtons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.actionButton {
+  height: 30px;
+  padding-bottom: 3px;
+}
+
+[dir=ltr] .actionButton {
+  padding-left: 16px;
+}
+
+[dir=ltr] .actionButton {
+  margin-left: 0;
+}
+
+[dir=ltr] .actionButton {
+  margin-right: 10px;
+}
+
+[dir=ltr] .actionButtons {
+  padding-left: 20px;
+}
+
+[dir=ltr] .actionButtons {
+  padding-right: 11px;
+}
+
+.tabHeader {
+  color: "[theme:neutralPrimary, default:#323130]";
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  padding: 22px 0 20px 32px;
+}
+
+.tabContainer {
+  height: 100%;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: column;
+}
+
+.filePicker :global(.ms-Panel-main) {
+  top: 50px;
+  border: none;
+  overflow-y: hidden;
+}
+
+.tabsContainer .selectedTab {
+  display: block;
+  height: 100%;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.header {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.xlg, .xxlg, .xxxlg, .xxxxlg {
+  color: inherit;
+}
+
+.itemPickerTopBar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background-color: red;
+}
+
+.itemPickerTopBar :global(.ms-CommandBarItem-link) {
+  border-color: transparent;
+}
+
+.commandBarNoChevron :global(.ms-CommandBarItem-chevronDown) {
+  display: none;
+}
+
+.fileItem {
+  cursor: default;
+}
+
+.folderItem {
+  cursor: pointer;
+}
+
+.folderItem:hover {
+  text-decoration: underline;
+}
+
+.fileTypeIcon {
+  margin: 0 -2px;
+  display: inline-block;
+}
+
+.fileTypeIconIcon {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+}
+
+.detailsListHeaderFileTypeIcon {
+  font-size: 16px;
+  padding: 0;
+}
+
+.iconColumnHeader {
+  width: 40px !important;
+  margin-right: -8px;
+}
+
+.iconColumnHeader i {
+  font-size: 16px;
+}
+
+.fileRow {
+  color: inherit;
+}
+
+.folderRow {
+  color: inherit;
+}
+
+.folderRow :global(.ms-DetailsRow-check) {
+  visibility: hidden;
+}
+
+.emptyFolder {
+  text-align: center;
+}
+.emptyFolder .emptyFolderImage {
+  padding-top: 52px;
+  height: 208px;
+  width: auto;
+  margin: 0 auto;
+}
+.emptyFolder .emptyFolderImage .emptyFolderImageTag {
+  height: 208px;
+  width: auto;
+}
+.emptyFolder .emptyFolderTitle {
+  padding: 16px 16px 0 16px;
+  font-size: 21px;
+  font-weight: 100;
+  max-width: 400px;
+  color: #858585;
+  margin: 0 auto;
+}
+.emptyFolder .emptyFolderSubText {
+  padding: 6px 16px 0 16px;
+  font-size: 14px;
+  font-weight: 400;
+  max-width: 400px;
+  color: #858585;
+  margin: 0 auto;
+}
+.emptyFolder .emptyFolderMobile {
+  display: none;
+}
+.emptyFolder .emptyFolderPc {
+  color: inherit;
+}
+.emptyFolder .emptyFolderIcon {
+  display: inline;
+  font-size: 13px;
+  padding-left: 2px;
+  padding-right: 1px;
+}
+
+.aboveNameplate {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+  margin: 16px 16px 0 16px;
+}
+
+.tileContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.foreground {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  opacity: 1;
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
+}
+.foreground:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  border: 2px solid #ffffff;
+}
+
+.grid {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
+  overflow: hidden;
+}
+
+.cellContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.tile {
+  outline: transparent;
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 0;
+  background-color: #ffffff;
+  -webkit-transition: -webkit-transform 0.1s linear;
+  transition: -webkit-transform 0.1s linear;
+  transition: transform 0.1s linear;
+  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
+  color: #323130;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.tile.invokable .foreground {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.tile.invokable:active {
+  -webkit-transform: scale(0.95);
+  transform: scale(0.95);
+}
+
+.namePlate {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-height: 20px;
+  padding: 4px 8px 8px;
+  background-color: #ffffff;
+  color: #323130;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  opacity: 0.95;
+  min-height: 35px;
+}
+
+.nameplate .name {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+html[dir=ltr] .name {
+  padding-left: 8px;
+}
+
+html[dir=ltr] .name {
+  margin-left: -8px;
+}
+
+.nameplate .name {
+  -webkit-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+}
+
+.name {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-weight: 400;
+  color: #323130;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.name,
+.isLarge .name {
+  font-size: 14px;
+  height: 30px;
+  margin-top: -7px;
+  margin-bottom: -8px;
+}
+
+.tile:hover .name {
+  text-decoration: underline;
+}
+
+html[dir=ltr] .activity {
+  padding-left: 8px;
+}
+
+html[dir=ltr] .activity {
+  margin-left: -8px;
+}
+
+.signalField,
+.signalField.compact {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.signalField {
+  max-width: 100%;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row nowrap;
+  flex-direction: row nowrap;
+}
+
+.signalField > span[class*=signalFieldValue] {
+  -ms-flex: 1 1 auto !important;
+  flex: 1 1 auto !important;
+}
+
+.signalFieldValue {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.activity {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-weight: 400;
+  font-size: 12px;
+  color: #767676;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  height: 24px;
+  margin-bottom: -4px;
+}
+
+.folderList :global(.ms-List-cell) {
+  display: table-cell;
+}
+
+.folderList :global(.ms-List-surface) {
+  position: relative;
+}
+
+.link {
+  outline: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  text-decoration: none;
+  color: inherit;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  text-decoration: none;
+  pointer-events: none;
+}
+
+.cell {
+  padding-top: 140px;
+  position: relative;
+}
+
+.listCell {
+  display: block;
+  margin: 0;
+  border-color: #ffffff;
+  border-top-color: rgb(255, 255, 255);
+  border-right-color: rgb(255, 255, 255);
+  border-bottom-color: rgb(255, 255, 255);
+  border-left-color: rgb(255, 255, 255);
+}
+
+.label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.foreground {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  opacity: 1;
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
+}
+
+.check {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  top: 0;
+  border: none;
+  background: none;
+  background-color: transparent;
+  opacity: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 6px;
+  outline: transparent;
+  position: absolute;
+}
+.check :global .ms-Check .ms-Check-check,
+.check :global .ms-Check .ms-Check-circle {
+  color: #797775;
+}
+.check:hover {
+  color: #797775;
+}
+
+html[dir=ltr] .check {
+  right: 0;
+}
+
+.tile.selectable .check {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.tile.selectable:hover {
+  background-color: #f3f2f1;
+}
+
+.tile:hover .check,
+.tile.showCheck .check {
+  opacity: 1;
+}
+.tile:hover .check :global .ms-Check .ms-Check-check,
+.tile:hover .check :global .ms-Check .ms-Check-circle,
+.tile.showCheck .check :global .ms-Check .ms-Check-check,
+.tile.showCheck .check :global .ms-Check .ms-Check-circle {
+  color: #323130;
+}
+
+.tile.selected .check {
+  opacity: 1;
+}
+.tile.selected .check :global .ms-Check .ms-Check-check,
+.tile.selected .check :global .ms-Check .ms-Check-circle {
+  color: #ffffff;
+}
+
+.dialogMainOverride :global .ms-Dialog-title {
+  color: #0078d4;
+}
+.dialogMainOverride :global .ms-Dialog-subText {
+  font-size: 14px;
+  color: #323130;
+  font-weight: 400;
+}
+
+.itemTileBlankCover {
+  background: #ffffff;
+  display: inline-block;
+}
+
+html[dir=ltr] .metadata {
+  text-align: right;
+}
+
+html[dir=ltr] .metadata {
+  margin-right: 8px;
+}
+
+.isLarge .metadata {
+  font-size: 14px;
+  margin-bottom: 3px;
+}
+
+.metadata,
+.metadata.isSmall {
+  font-size: 12px;
+  margin-bottom: 3px;
+}
+
+.metadata {
+  display: block;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1;
+  flex: 1 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 400;
+  color: #ffffff;
+  position: relative;
+}
+
+.listPage {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.odItemTile2FolderCover {
+  display: inline-block;
+  margin: 3px;
+}
+
+.standaloneListBreadcrumb {
+  font-size: 21px;
+  font-weight: 100;
+  margin-bottom: 1px;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+.odItemTile2Image {
+  display: inline-block;
+}
+
+.odImageFrame2 {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.odImageFrame2Image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.odImageFrame {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.odImageStack {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.odImageStackTile {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.odImageTile {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.odImageTile {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.odImageTileBackground {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.odImageTileImage {
+  display: block;
+  opacity: 1;
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.odImageTileImage, a .odImageTileImage {
+  border: none;
+}
+
+.odImageTile img {
+  display: block;
+}
+
+.odItemTile2SmallIcon {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 6px;
+}
+
+.fileTypeIcon {
+  position: relative;
+  display: inline-block;
+}
+
+.fileTypeIconIcon {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  overflow: hidden;
+}
+/*# sourceMappingURL=DocumentTile.module.scss.css.map */