forgeplus/app/assets/stylesheets/admin.scss

@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "select2.min";
@import "select2-bootstrap4.min";
@import "bootstrap-datepicker";
@import "bootstrap-datepicker.standalone";
@import "jquery.mloading";
@import "jquery-confirm.min";
@import "bootstrap-datetimepicker.min";

@import "codemirror/lib/codemirror";
@import "editormd/css/editormd.min";
@import "dragula/dragula";

@import "common";
@import "admins/*";

body {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: stretch;
  font-size: 14px;
  background: #efefef;
  overflow: hidden;
}

.simple_form {
  .form-group {
    .collection_radio_buttons {
      margin-bottom: 0px;
    }

    .form-check-inline {
      height: calc(1.5em + 0.75rem + 2px)
    }
  }
}

input.form-control {
  font-size: 14px;
}

.btn-default{
  color: #666;
  background: #e1e1e1!important;
}
.export-absolute{
  right:20px;
  position: absolute;
}

.export-base-absolute{
  right:100px;
  position: absolute;
}

.logo-item {
  display: flex;

  &-img {
    display: block;
    width: 80px;
    height: 80px;
    background: #e9ecef;
  }

  &-upload {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 80px;
    height: 80px;
    background: #e9ecef;
    border: 1px solid #ced4da;

    &::before {
      content: '';
      position: absolute;
      top: 27px;
      left: 39px;
      width: 2px;
      height: 26px;
      background: #495057;
    }

    &::after {
      content: '';
      position: absolute;
      top: 39px;
      left: 27px;
      width: 26px;
      height: 2px;
      background: #495057;
    }
  }

  &-left {
    position: relative;
    width: 80px;
    height: 80px;

    &.has-img {
      .logo-item-upload {
        display: none;
      }

      &:hover {
        .logo-item-upload {
          display: block;
          background: rgba(145, 145, 145, 0.8);
        }
      }
    }
  }

  &-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #777777;
    font-size: 0.8rem;
  }

  &-title {
    color: #23272B;
    font-size: 1rem;
  }
}

.attachment-item {
  display: flex;

  &-img {
    display: block;
    width: 160px;
    height: 160px;
    background: #e9ecef;
  }

  &-upload {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 160px;
    height: 160px;
    background: #e9ecef;
    border: 1px solid #ced4da;

    &::before {
      content: '';
      position: absolute;
      top: 54px;
      left: 78px;
      width: 2px;
      height: 52px;
      background: #495057;
    }

    &::after {
      content: '';
      position: absolute;
      top: 78px;
      left: 54px;
      width: 52px;
      height: 2px;
      background: #495057;
    }
  }

  &-left {
    position: relative;
    width: 160px;
    height: 160px;

    &.has-img {
      .attachment-item-upload {
        display: none;
      }

      &:hover {
        .attachment-item-upload {
          display: block;
          background: rgba(145, 145, 145, 0.8);
        }
      }
    }
  }

  &-right {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #777777;
    font-size: 0.8rem;
  }

  &-title {
    color: #23272B;
    font-size: 1rem;
  }
}