joywok-material-components/components/shareAs/style/Index.css

<h1 align="center"> Joywok Material Components </h1>

.jw-dialog .reply {
  width: 100%;
  margin-top: -20px;
  position: relative;
}
.jw-dialog .reply .ant-form-item {
  width: 100%;
}
.jw-dialog .reply .ant-form-item .ant-form-item-control-wrapper {
  width: 100%;
  border: none;
}
.jw-dialog .reply .ant-form-item .ant-form-item-control-wrapper textarea {
  border: none;
}
.jw-dialog .reply .position-div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -999;
  padding: 4px 11px;
  word-wrap: break-word;
}
.jw-dialog .reply .at-list-items {
  height: 336px;
  overflow: auto;
}
.jw-dialog .reply .at-list-items .empty {
  width: 100%;
  margin-top: calc(50% - 8px);
}
.jw-dialog .reply .at-list-items .at-list-item {
  height: 56px;
  width: 100%;
  cursor: pointer;
  padding: 10px 24px;
  overflow: hidden;
}
.jw-dialog .reply .at-list-items .at-list-item .avatar {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  float: left;
}
.jw-dialog .reply .at-list-items .at-list-item .avatar img {
  width: 36px;
  height: 36px;
  border-radius: 3px;
}
.jw-dialog .reply .at-list-items .at-list-item .info {
  float: left;
  width: calc(100% - 36px);
  padding-left: 10px;
}
.jw-dialog .reply .at-list-items .at-list-item .info .name {
  font-size: 13px;
  color: #333333;
  font-weight: 400;
  line-height: 22px;
  height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.jw-dialog .reply .at-list-items .at-list-item .info .dept {
  font-size: 12px;
  color: #999999;
  font-weight: 300;
  line-height: 18px;
}
.jw-dialog .reply .at-list-items .at-list-item:hover {
  background: #f7f7f7;
}

.shareAs-title {
  width: 600px;
  height: 80px;
  padding: 35px 24px 20px 24px;
}
.shareAs-title span {
  color: #3297fc;
}

.shareAs-txt .ant-col {
  width: 552px;
}
.shareAs-txt div:before {
  display: none;
}
.shareAs-txt div:after {
  display: none;
}
.shareAs-txt textarea {
  width: 552px;
  border: 0px;
  resize: none;
  padding: 4px 24px;
}
.shareAs-txt textarea:focus {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.shareAs-txt #standard-multiline-flexible {
  min-height: 150px;
}

.share-files .files-form {
  padding-left: 24px;
}
.share-files .files-form span {
  color: #3297fc;
}
.share-files .file-single {
  background: #f4f4f4;
  margin-left: 24px;
  margin-top: 10px;
  width: 552px;
  text-align: center;
}
.share-files .file-single img {
  margin: 0 auto;
  max-width: 552px;
  max-height: 200px;
}
.share-files .file-multi {
  width: 552px;
  margin-left: 24px;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: none;
}
.share-files .file-multi .file-multi-item {
  background: #f4f4f4;
  width: 200px;
  height: 148px;
  float: left;
  text-align: center;
  margin-right: 8px;
}
.share-files .file-multi .file-multi-item img {
  margin: 0 auto;
  max-width: 200px;
  max-height: 148px;
}

.funcs {
  margin-left: 24px;
  padding-top: 20px;
}
.funcs .emoji-c {
  float: left;
  margin-right: 25px;
}
.funcs .emoji-c .emoji {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.funcs .emoji-c .emoji .emoji-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  bottom: 0;
  z-index: 998;
}
.funcs .emoji-c .emoji .emoji-c {
  width: 440px;
  height: 342px;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  background: #fff;
  z-index: 999;
  padding: 10px;
  -webkit-box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
  top: 0;
}
.funcs .emoji-c .emoji .emoji-c i {
  width: 30px;
  height: 30px;
  float: left;
  display: block;
  padding: 5px;
  cursor: pointer;
}
.funcs .emoji-c .emoji .emoji-c i img {
  height: 20px;
  width: 20px;
}
.funcs .category {
  float: left;
  position: relative;
}
.funcs .category > span {
  display: block;
  margin-top: -27px;
  margin-left: 30px;
}
.funcs .category .category-c {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
}
.funcs .category .category-c .category-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  bottom: 0;
  z-index: 998;
}
.funcs .category .category-c .category-list {
  position: fixed;
  border: 1px solid #ddd;
  min-width: 210px;
  padding: 10px 0;
  z-index: 4500;
  background: #fff;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  max-height: 203px;
  overflow-y: auto;
}
.funcs .category .category-c .category-list .category-item {
  position: relative;
  padding: 0 8px 0 30px;
  height: 31px;
  line-height: 31px;
  cursor: pointer;
}
.funcs .category .category-c .category-list .category-item:hover {
  background: #f0f0f0;
}
.funcs .category .category-c .category-list .category-item.selected .jw-fd-i {
  visibility: visible;
}

.share-obj {
  margin: 0 24px;
  border-top: 1px solid #f7f7f7;
  height: 48px;
  padding: 10px 0;
}
.share-obj .share-obj-c .obj-item {
  padding: 4px 8px;
  background: #f7f7f7;
  border-radius: 13px;
  color: #666666;
  float: left;
  margin-right: 8px;
}
.share-obj .share-obj-c .share-obj-add {
  float: left;
  color: #3297fc;
  font-size: 13px;
  line-height: 28px;
}
.share-obj .share-obj-c .share-obj-input div:before {
  border: none;
  display: none;
}
.share-obj .share-obj-c .share-list {
  position: fixed;
  border: 1px solid #ddd;
  min-width: 210px;
  padding: 10px 0;
  z-index: 4500;
  background: #fff;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  max-height: 203px;
  overflow-y: auto;
}
.share-obj .share-obj-c .share-list .share-list-item {
  position: relative;
  padding: 0 8px 0 30px;
  height: 31px;
  line-height: 31px;
  cursor: pointer;
}
.share-obj .share-obj-c .share-list .share-list-item:hover {
  background: #f0f0f0;
}

.dialog-footer {
  height: 76px;
  border-top: 1px solid #f7f7f7;
}
.dialog-footer .jw-m-common-checkbox-item {
  float: left;
  margin: 26px 0;
}
.dialog-footer .jw-m-common-checkbox-item .jw-checkbox {
  display: inline;
}
.dialog-footer .jw-m-common-checkbox-item .jw-checkbox .jw-m-common-checkbox {
  top: -1px;
}
.dialog-footer button {
  float: right;
  margin-right: 24px;
  margin-top: 26px;
  font-size: 14px;
}
.dialog-footer .sure {
  color: #ffffff;
}

.icon-shareAs-category {
  display: inline-block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABF1JREFUaAXtWU9IVEEcdv9KtVodDApcgi79PUQHZS2oyA7lJQSDqHsX6bAa4smTrKtLiN26BJ3aQ12sRIMgbUXrpmRdXTQK+6sQ4rb2ffJG3s7uzJu3u6LCPhhm5jfffL/vN2/e7MxsVVXlqYxAZQQqI7CdI+Apl/Ourq6DmUzmOviakcLr6+tHkDPxWfR4PIvI55HG/H7/i1gs9pMNpT4lB9DR0XEDYtsh8AJyv4kgYDPAjiMfGhgYeG7SR4UpOoDOzs6mbDYbB3FERW5oT3m93vv9/f3vDPE5MNcBJJNJ39TUVAIs93KYSq8MNjQ0RNva2v65oXIVQE9Pz4GVlZWneP1X3TgxxWJKjYZCoZvw88u4jynQEp+C+BOmfYrBIYg5BBExDcJr4oTTZnl5ObnV4qmFPviW6dNEmxEoHA4/ANktE0IbZgmjOcIRha0Oaa+tzal4bGFhYf/k5OSIE9DxG7BWmwknIql9uKam5o6YBpx+eINPgGmRcNoqVqfzTquT4xSylkqtI6lxCT9Ut4V4trHMgFBckrDaqolvbQD8kYIHt+v8RF9f329ZmRWQ2zcZsTTIdJt1bQD4oNo3kYYFzPmACoq2oKpNZXfSoPwGrL3NNxAYbQ9sAv5UV1cf7+3t/WKzVXV3dx9eXV39BFut3e5URtAZTMlDqr2T8g2sra21FCGeemoh9BkG4KgQxzJtbBM205waqEWFV44uIm9GZ1U/J3sjdqafo9HoDIEon0HmevoIJ9SCMlexvEcZAJD1eWgXBgRPwefYpYSBEB6VWpRTCE7FXl6QbFuu06IMAGp3TAA6LcoAMO+K/gDK/ap0WpQB4LXlLIMFRPFXNV3A7tZEDu0vtE6LMgBEvahQkvb5fJcTiUQdUhjlk8B+UGCVZvZhX3KQi5wAFxwQjZYqZQAgm5e9gygLW2s8Hn8j2lCeCwaDXKd/CJtTDp7v7MO+Amtxtlo+hFnkeVpEgy6AMQGy5bMYrfe2+kYRv7pf4filbNfUX7GP3G5xz8p21Atp2YApA+DVB0RlJLK8TZqt3fgYiD46bI4PaqAWm5+cojIA7j3w8Yzb0aif5R7JbmOZpye0XZLtmvrFQicuctOH1O+tah9EnDIANiL6Iea2J4R9yWNscfcJG7bJ3unp6Rjqp4TNKYfI0+zDvgJLTnKjHhI2K38o1XOqyt2oQGE/w/uanDMBAptH4pz/i0PHFeTc6xTzzODU9Rod9yCoa0hhiSSF76JJsuVUdXuhDSAvnSBywt6LjpDu2m1Fls+AWxk8fTvx+pwAqVQqHYlEOO8bnbBlbh/EteMjJ87NOagD8sYMU2ZUhylnG33RpwmnUQC87uONGYg/mpCWgqEP+jK9YjQKgIJ4KAdx01a+CXLTB32ZDoLjKiQTcf3etZe79mB27fW6PQiWeW+DJXX3/cEhB8JtAG8PMI95AK9HUDzRiVOd+IspDftYIBAY1m0PZO5KvTIClRGojMDOHYH/9Z68IugfTl4AAAAASUVORK5CYII=);
  background-size: cover;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

.icon-shareAs-emoji {
  display: inline-block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABPpJREFUaAXtmV1oXEUUx7O72g22CFq2lYgPfoBipIpbP4gbsbUWFWOVlPiiog9CqZAHLWy+lIBuPkhRGrH64EME8SEPUqs2PtSYhxAKjW4tLRXBJ0nUapGGQrLo7vo7S4Zeb+fMzs2mpMJeGM7M/3yfO3d2Zrahof7UK1CvQL0Ca1mB2Go57+/v31QoFHaVy+UttOZYLHYnNAktQAv4OUv/GHQmkUhM53K5X1bDd00JEHScoJ8hwJcI5gnoVZ5BlZH7moT2Dw0NTXrqWMVWnEBXV1eagD/E6larZX/wBG/ktYGBgW/9VS5KRk5gdHQ0OT8/vx8Te0kgftFUTb0yb+ODxsbG13mrS1EsRUoA4xsWFxcP4eDRKE4iyM7E4/GnBwcHz/nqeCfQ3d29kYpP0O7zNb4SOd7Ej7SMbxJeU2B8fDxRKpUOX+7gJWF83CG+eNuNPgXwSiCfz7+JsRYfg6sk08JUfcfHVtUplM1mMxiaoiV8DK6ijHzYO6otsz5v4L01CF7qEGM6jdKcRXYmwFq/HUP3iDXbQ4Uu0MZon8BftMkomPwqH4R3CFpSZARu7unpaXfwG5wJkP0+h3IRXhuv+GXaC/Sfc8gGWedZKlvReXV4ePhZEsgGmeE+MXSGseBYTaC3t/cmBB8PCof6PxDElMEI5gv6P5uxRgn4CEvkT4afSqXep/+3GYcpCWSI5cYwbsZqAsViUT5e1/w7b4wEqA0LsCvd/8gsLCwUSMo1/WLE0hY2YsZqAgg4l02cPhCsTF9f361gW4xhB905MjKy3vCXlpZ2UOVrzdhG4d9vwwVTK8wHPItiWlNcxk8TdA65q6FvQG+rIl9hIztFO4B8E+0twOtdesjmma732mRc299NNoUQ1kwAnwoGDbH0IbKPSNMlLuHccAmyDLim0DpNaQ3w6zSfagJUKKkpXUm4mgDzTo6BV8rzlxaI6xs4g9Jmi+I3YLK9uBzP8xjdbTH8mwWrQGoCvIHTyod2jh+tzzWDteCsfNvwaTORt4GCqVMIQydtSiQmTtTl16YTAdNOesc1G2oCnE9lo/VPWJHgU1TqqTBe65gfxa3Yvstip8yhX7Yp1kdNgBPRWTQmbFoklrXhtWBsF7ps+viSO6Q5G08wNQFhojwmNPxQqYc4I78Sxlc65tDUhs12Rf+AgldgZwLJZFJuIGZtBji3vsteXT0r2HRsGNPxFvCPbDwKeIqd62c2nsGcCTCNShjZQ7MdOtaTxFGqd7cxFpWyAbyZysuFlm3bUsTvXpp1WTK+qp5zp6enf81kMikUbDvCa3DwYmtr6x/IfW+M+lAq304BvkTWus/h0PM21f+4mi2v5VBu4+bm5r7CmLbMiZ9jOM0x7Y7Im9McM+228cF2w39MkwGfSafTD3d0dBQdMhWWVwIiSVAb2LtP8sqdF1u8EblVO4rcKRL6nT6FLm0Gvx1sJ2NrxcErD3LHWcKfxN+fBnNR7wTEiNzOEcxhus7Djsuhi0fwkwS/i+AvuOSCvEgJiKLc0slFF4n0Mqz6DQWdaX0Clyl3sKmpaV9nZ2ekTWTkBEwQyxdesqmrdSmdJYE9nLi+M7aj0BUnYJywmmxnbsv1i9xgeNkjYNmiTEDH5LeGKaN+9MaPRr0caspBXK5hWF0yYC0k9CDByVZ8Hf3K30z0z4DJDvek7LMIWrYq9adegXoF6hX4n1fgXwRewkX2aUf8AAAAAElFTkSuQmCC);
  background-size: cover;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

.ico-shareAs-del {
  display: inline-block;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAXRJREFUKBVlkctKQlEUhve5pGGREF0nGgUVXagmTRqlUg6jUU+gooj4Gk4ciAi+gmA0r3McFEWBkQX1Bk26kKGiqKdvnzpCteBnrX+t/z9r732UaDRaEkL4LMs6KBaLz9T/IplMTnY6nWMGHyrCMbCtKIoZiURm/6pTqdR0u9020exIrapp2hGiKmSJbMTj8RnHJOtWq2XCV0HN7XYfKnKYTqfHm83mKaYt6JOu67vdblfODLDM9jt6wXw+/2obaNqmRqNxRrkJHoEGFhHfejyeUDabfYOLgUGSn00GmzYkJ6ocOVQoFN6/qRCqU8jM5UYQjzo9vj4MH3K4zAMDL+Tr9XoVegsIr8k1xCvAjMViU3A7bEMikfDDKgznEV+R9+BBYJv6/b7hmBSKORoVhn7Ely6XK5zL5epwwdYJknypdWYPzAIq4hMaUnzh9Xr3HTE9wZ9/IQXAPVvXuGNZRXhDo8RrhDOZzCf1r5Amfpg83jna+hcdXKe4LHrE1wAAAABJRU5ErkJggg==);
  background-size: cover;
  background-repeat: no-repeat;
  width: 6px;
  height: 6px;
  background-position: 100% 100%;
  margin-left: 7px;
}