com.phloxui/styles/tutorial/tutorials.less

PhloxUI Ng2+ Framework

.tutorial-page {
  padding: 20px;

  pre {
    margin: 0;
  }

  > .header {
    margin-top: 0;
    margin-bottom: 45pt;
  }

  > .tutorial-section {
    margin-bottom: 35pt;

    > .header {
      margin-bottom: 15pt;
    }

    > .content {
      text-indent: 2em;
    }

    &.model {
      > .content {
        text-indent: 0;
        padding: 0 2em;

        .form-section {
          margin-top: 20pt;

          > .form-header {
            margin-bottom: 20pt;
          }

          > .form-content {
            padding-left: 1em;
            color: #636363;

            > table {
              width: 100%;
            }

            .form-field {
              text-indent: 0;
              vertical-align: top;
              width: 35%;

              code {
                background: none;
                color: red;
              }
            }

            .form-input {
              padding-left: 5pt;
              vertical-align: top;
              padding-bottom: 8pt;
              text-indent: 0;

              * {
                width: 100%;
              }
            }

            .form-field-description {
              margin-top: 5pt;
              font-size: 85%;
            }

            tr {
              .form-field-description {
                margin-top: 0;

                &:after {
                  content: ",";
                }
              }

              &:last-child {
                .form-field-description {
                  &:after {
                    content: "";
                  }
                }
              }
            }
          }
        }
      }

      &.see {
        > .content {
          font-style: italic;
        }
      }
    }
  }

  .tutorial-code-content {
    > table {
      width: 100%;
    }

    .tutorial-code-form {
      width: 50%;

      > .form-section {
        margin-bottom: 15pt;

        > .form-header {
          margin-bottom: 15pt;
        }

        > .form-content {
          padding-left: 1em;
          color: #636363;

          > table {
            width: 100%;
          }

          .form-field {
            text-indent: 0;
            padding-left: 2em;
            vertical-align: top;
            width: 40%;

            code {
              background: none;
              color: red;
            }
          }

          .form-input {
            padding-left: 5pt;
            vertical-align: top;
            text-indent: 0;

            * {
              width: 100%;

              &:first-child {
                margin-bottom: 5pt;
              }
            }

            code,
            pre {
              color: #636363;
              background: none;
            }
          }

          .form-field-description {
            margin-bottom: 8pt;
            font-size: 85%;
          }
        }

        &.i18n,
        &.option {
          .form-content {
            tr {
              .form-field-description {
                margin-top: 0;

                &:after {
                  content: ",";
                }
              }

              &:last-child {
                .form-field-description {
                  &:after {
                    content: "";
                  }
                }
              }
            }
          }
        }
      }
    }

    .tutorial-code-display {
      position: relative;
      padding-left: 15pt;
      text-indent: 0;
      vertical-align: top;

      > .wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0 2em 0 0;

        > .header {
          padding: 10pt;
          margin: 0;
          background-color: black;
          color: white;
        }

        > .content {
          height: 100%;
          padding: 10pt;
          background-color: #f9f9f9;
        }
      }
    }
  }

  .form-vertical {
    display: block;
    margin-bottom: 5pt;

    > .form-horizontal {
      margin-bottom: 0;
    }

    label {
      display: block;
    }

    input[type="text"] {
      display: block;
      width: 100%;
    }

    input[type="checkbox"],
    input[type="radio"] {
      display: inline-block;

      & + label {
        display: inline-block;
        margin-left: 2pt;
      }
    }
  }

  .form-horizontal {
    display: inline-block;
    margin-bottom: 5pt;
    margin-left: 3pt;

    &:first-child {
      margin-left: 0;
    }

    label {
      display: inline-block;

      & + input[type="text"] {
        display: inline-block;
        margin-left: 2pt;
      }
    }

    input[type="checkbox"],
    input[type="radio"] {
      display: inline-block;

      & + label {
        display: inline-block;
        margin-left: 2pt;
      }
    }
  }
}