magner/lib/assets/styles/components/generic-form.css

Universal admin panel magnetic to any backend

.generic-form {
  &_block-row, &_block-column {
    & > *.is-guttered:first-child {
      padding-left: 0 !important;
    }
    & > *.is-guttered:last-child {
      padding-right: 0 !important;
    }
    & *.is-guttered:not(.is-always-shadow) {
      @media (--breakpoint-small) {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
  }

  &_block-row {
    position: relative;
    flex-wrap: wrap;
    width: 100%;

    margin-left: 0 !important;
    margin-right: 0 !important;

    & > * {
      flex-shrink: 1;
    }

    &.grow-elements > * {
      flex-grow: 1;
    }

    &.is-justify-space-between {
      justify-content: space-between;
    }
    &.is-justify-space-around {
      justify-content: space-around;
    }
    &.is-justify-center {
      justify-content: center;
    }
    &.is-justify-end {
      justify-content: end;
    }
    &.is-align-center {
      align-items: center;
    }

    &::after, &::before {
      content: none;
    }
  }

  &_block-column {
    position: relative;
    &.el-col-24 {
      width: 100%;
    }
  }

  &_actions {
    display: flex;
    flex-direction: column;

    &_link {
      text-decoration: inherit;
    }

    @media (--breakpoint-md) {
      flex-direction: row;

      & > * {
        max-width: 250px;
        &:not(:last-child) {
          margin-right: 12px;
        }
      }

      &.custom {
        & > * {
          max-width: none;
        }
      }
    }

    @media (--breakpoint-small) {
      & > *:not(:last-child) {
        margin-bottom: 4px;
      }
    }
  }

  &_item {
    &_help {
      cursor: pointer;
      & svg {
        transform: rotate(0deg) translateY(2px) !important;
      }
    }

    &_required {
      color: #F36D6F;
    }

    &_tooltip.el-popper, &_tooltip.el-popper.is-dark {
      color: black;
      background: #FFDB31;
      & .el-popper__arrow:before {
        background: #FFDB31;
      }
    }

    & .el-form-item__label {
      @media (--breakpoint-small) {
        line-height: 18px;
      }
    }

    & .el-form-item__content {
      line-height: 1;
    }

    &-dropzone, &-editor, &-custom, &-button {
      width: 100%;
    }

    &-radio {
      @media (--breakpoint-small) {
        & .el-radio.is-bordered {
          width: 100%;
          & + .el-radio.is-bordered {
            margin-left: 0;
          }
        }
      }
    }

    &-datetime {
      .el-input {
        width: 100%;
      }

      @media (--breakpoint-small) {
        width: 100%;
        & .el-range-editor {
          width: 100%;
        }
      }
    }
  }

  & .readonly-block {
    display: flex;
    align-items: center;
    line-height: 1.5;

    &.gray-block {
      width: 100%;
      height: 32px;
      padding: 5px 12px;
      background-color: #F4F4F5;
      border-radius: 4px;
    }

    &.dropzone {
      align-items: flex-start;

      & > *:not(:first-child) {
        margin-left: 8px;
      }
    }
  }

  & .form-collection {
    display: contents;

    &_more {
      width: 100%;
    }

    &_remove {
      width: 40px;
      height: 40px;
    }
  }

  &_collection {
    width: 100%;
  }

  .field-group-move {
    transition: max-height .2s, height .2s;
  }

  .field-group-enter-active, .field-group-leave-active {
    transition: all .2s;
    max-height: 230px;
  }

  .field-group-enter, .field-group-leave-to {
    opacity: 0;
    max-height: 0px;
  }

  &_debug {
    position: fixed;
    bottom: 0;
    right: 0;
    max-height: 30px;
    min-width: 150px;
    max-width: 300px;
    height: auto;
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 4px 6px;
    font-size: 12px;
    transition: max-height .2s;
    overflow: hidden;

    @media (--breakpoint-small) {
      display: none;
    }

    & pre {
      margin: 0;
    }

    &:hover {
      max-height: 600px;
      overflow: auto;
      &:after {
        opacity: 0;
        pointer-events: none;
        user-select: none;
      }
    }

    &:after {
      content: "Debug";
      position: absolute;
      bottom: 0;
      top: 0;
      right: 0;
      left: 0;
      height: 30px;
      background: #191919;
      padding: 8px 10px;
      pointer-events: all;
      user-select: all;
      opacity: 1;
      transition: opacity .2s;
    }
  }

  &_only-fields {
    display: flex;
    width: 100%;
    @media (--breakpoint-small) {
      flex-direction: column;
    }
  }

  & .el-form-item, &.el-form--label-top .el-form-item {
    &__label {
      padding: 0;
      line-height: 30px;
    }
  }

  & .el-form-item__label.custom-label {
    width: 100%;
  }
  & h2.custom-label {
    width: 100%;
    margin-bottom: 6px;
  }

  & .el-select {
    width: 100%;

    & .el-input__wrapper {
      width: 100%;
    }
  }

  & .el-switch {
    &__label {
      font-weight: 400;
    }
  }

  &_icon {
    padding: 0 6px;
  }

  &_error.el-alert {
    margin-bottom: 8px;
  }

  & .el-card {
    padding: 20px;
    margin-bottom: 12px;

    @media (--breakpoint-small) {
      padding: 12px;
    }
  }

  & .el-tag {
    @media (--breakpoint-small) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 4px;
      margin-left: 0 !important;
    }
  }

  & .el-button+.el-button {
    margin-left: 0;
  }
}

.el-picker__popper {
  @media (--breakpoint-small) {
    & .el-date-range-picker {
      width: 300px;
    }

    & .el-picker-panel__body {
      min-width: unset;
      display: flex;
      flex-direction: column;

      & .el-date-range-picker__content {
        width: 100%;
      }
    }
  }
}