nfp_sites/app/widgets/common.scss

fileupload {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: stretch;

  .showicon,
  .showbordericon,
  .display {
    flex-grow: 2;
  }

  .showbordericon {
    border: 3px solid $title-fg;
    border-style: dashed;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHaSURBVHhe7dfPScRAAIXxFSxAPHjUkrx61DaswCJsw5MdCDYkgs6DDIQlu5l/Sd5Ovh88WDJ7yPCdcgAAAAAAAEDvHofBwFPYzzD9xoaew37D/obpt55hAy9h4xjjKDrDik7FiCPKiuZixBFlBakx4oiyoNwYcURZQGmMOKI0VBsjjigNtIoRR5QKrWPEEaVASoyPiWdx5840omRIifEe9nD0bDyd6T9TZ3FESZAa4yrsfvTseDrTf4hSISeGzAURohTKjSEpQYQomUpiSGoQIUqi0hiSE0SIMqMmhuQGEaKcUBtDSoIIUY60iCGlQYQog1YxpCaI7D5KyxhSG0R2G+U67Cts6sJxOTGkRRBJiaJ31x26chv2HTZ14dwY0iqInIuid9a7d2kqSkkMaRlEpqJ0HSMaRymNIa2DyDjKLmJEuuhrWGkMWSKI6J30bruJ0cpSQVCIIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZggCAACAjd2FfXY+3fFinPtG6GUX9a1DEDMEMUMQMwQxcxP21vl0RwAAAAAAAGCnDod/1p4xx4l+w0cAAAAASUVORK5CYII=');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px;
  }

  .showicon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHaSURBVHhe7dfPScRAAIXxFSxAPHjUkrx61DaswCJsw5MdCDYkgs6DDIQlu5l/Sd5Ovh88WDJ7yPCdcgAAAAAAAEDvHofBwFPYzzD9xoaew37D/obpt55hAy9h4xjjKDrDik7FiCPKiuZixBFlBakx4oiyoNwYcURZQGmMOKI0VBsjjigNtIoRR5QKrWPEEaVASoyPiWdx5840omRIifEe9nD0bDyd6T9TZ3FESZAa4yrsfvTseDrTf4hSISeGzAURohTKjSEpQYQomUpiSGoQIUqi0hiSE0SIMqMmhuQGEaKcUBtDSoIIUY60iCGlQYQog1YxpCaI7D5KyxhSG0R2G+U67Cts6sJxOTGkRRBJiaJ31x26chv2HTZ14dwY0iqInIuid9a7d2kqSkkMaRlEpqJ0HSMaRymNIa2DyDjKLmJEuuhrWGkMWSKI6J30bruJ0cpSQVCIIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZghihiBmCGKGIGYIYoYgZggCAACAjd2FfXY+3fFinPtG6GUX9a1DEDMEMUMQMwQxcxP21vl0RwAAAAAAAGCnDod/1p4xx4l+w0cAAAAASUVORK5CYII=');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px;
  }

  img {
    max-width: 600px;
    width: calc(100% - 80px);
    align-self: center;
  }

  .display {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .loading-spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #33333388;
    width: 100%;
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.01;
    width: 100%;
    cursor: pointer;
    text-indent: -9999px;
    z-index: 2;
  }
}

dialogue {
  background: white;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: calc(100% - 40px);
  max-width: 500px;
}

dialogue h2 {
  background: $secondary-dark-bg;
  color: $secondary-dark-fg;
  font-size: 1.5em;
  padding: 10px;
}

dialogue p {
  padding: 10px;
}

dialogue .buttons {
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

dialogue button {
  border: 1px solid $secondary-dark-bg;
  background: transparent;
  color: $secondary-dark-bg;
  padding: 5px 15px;
  min-width: 150px;
}

dialogue button.alert {
  border-color: red;
  color: red;
}

dialogue button.cancel {
  border-color: #999;
  color: #999;
}

newsentry {
  display: flex;
  color: $meta-fg;
  font-size: 12px;

  a {
    &.cover {
      flex-shrink: 0;
      margin-right: 10px;

      img {
        max-height: 70px;
        width: auto;
      }
    }

    &.nobg {
      height: 70px;
      width: 124px;
      background: #ddd;
    }
  }

  .entrycontent {
    display: flex;
    flex-direction: column;
    flex: 2 1 auto;
    padding: 0 5px 5px;

    h3 {
      margin-bottom: 10px !important;
      font-size: 1.3em;
      font-weight: bold;
    }
  }
}