explainegy-nextjs/styles/modules/ArticleEditor.module.scss

@import "../variables.scss";

.adminArticlesCreate {
  & > h1 {
    text-align: center;
  }
  .formControl {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 70px;

    margin: 0px auto;
    max-width: 1800px;
    padding: 0px 24px;
    .articleEditor {
      display: flex;
      flex-direction: column;
      row-gap: 25px;

      & > div {
        display: flex;
        flex-direction: column;

        label {
          padding: 5px;
        }
      }

      .title {
        .titleInputs {
          display: grid;
          grid-template-columns: 1fr 0.5fr;
          gap: 0px 5px;
        }
      }

      .category {
      }

      .introduction {
      }
      .markdown {
        .markdownEditor {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px 10px;
          textarea {
            color: var(--font-color);
            border: 2px solid #3b3b3b80;
            background-color: transparent;
            min-height: 700px;
            max-height: 1500px;
            resize: none;
            display: block;
            border-radius: 0px;
            outline: 0;
            resize: both;
            font-family: inherit;
            font-size: inherit;
          }

          & > div {
            max-width: 1000px;
            max-height: 1500px;
            border: 2px solid #3b3b3b80;
            overflow: auto;
          }
        }
      }

      .contentTable {
        .contentTableEditor {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px 10px;
          & > div {
            border: 2px solid #3b3b3b80;
            overflow: auto;
            max-width: 1000px;
            max-height: 1000px;
          }
        }
      }
    }
  }
}