formstone/demo/css/src/includes/demo.less

Library of modular front end components.

/* ==========================================================================
  Demo
============================================================================= */


/* ==========================================================================
  Plugins
============================================================================= */

  @import (inline) "../../../../dist/css/grid.css";
  @import (inline) "../../../../dist/css/background.css";
  @import (inline) "../../../../dist/css/carousel.css";
  @import (inline) "../../../../dist/css/checkbox.css";
  @import (inline) "../../../../dist/css/checkpoint.css";
  @import (inline) "../../../../dist/css/dropdown.css";
  @import (inline) "../../../../dist/css/lightbox.css";
  @import (inline) "../../../../dist/css/navigation.css";
  @import (inline) "../../../../dist/css/number.css";
  @import (inline) "../../../../dist/css/pagination.css";
  @import (inline) "../../../../dist/css/range.css";
  @import (inline) "../../../../dist/css/scrollbar.css";
  @import (inline) "../../../../dist/css/sticky.css";
  @import (inline) "../../../../dist/css/tabs.css";
  @import (inline) "../../../../dist/css/tooltip.css";
  @import (inline) "../../../../dist/css/upload.css";
  @import (inline) "../../../../dist/css/viewer.css";

  @import (inline) "../../../../dist/css/themes/light.css";

  @import "demo-tabs.less";


  .demo_content {
    background: @white;
    padding: 0 0 50px;

    p {
      margin: 20px 0;
    }

    a {
      color: @primary;
    }

    li {
      margin: 5px 0;
    }

    fieldset {
      border: none;
      padding: 0;
      margin: 20px 0;
    }

    label {
      display: block;
      margin: 0 0 5px;
    }

    .fs-checkbox-label {
      display: inline-block;
      margin: 0;
    }

    code {
      color: #222;
      font-size: 14px;
      padding: 5px;
    }

    .form_pre,
    input,
    textarea,
    .form_textarea {
      background: @white;
      border: 1px solid @primary;
      border-radius: 2px;
      color: @primary;
      font-size: 16px;
      margin: 20px 0;
      padding: 20px;

      code {
        background: none;
        border-radius: 0;
        padding: 0;
      }
    }

    :not(pre) > code[class*="language-"],
    pre,
    pre[class*="language-"] {
      background: @primary_lighter;
      border: none;
      margin: 20px 0 0;
      padding: 20px 25px;

      &:last-child {
        margin-bottom: 30px;
      }
    }

    // .demo_code {
    //   margin-bottom: 20px;
    //
    //   pre[class*="language-"] {
    //     margin-bottom: 0;
    //   }
    // }

    pre {

      &[class*="language-"] {
        position: relative;

        &:after {
          position: absolute;
          top: 2px;
          right: 2px;

          background: @primary_medium;
          border-radius: 2px;
          color: @white;
          font-size: 12px;
          letter-spacing: 0.05em;
          line-height: 1;
          padding: 4px 7px 5px;
          text-transform: uppercase;
        }
      }

      &[class*="language-javascript"]:after {
        content: 'JS';
      }

      &[class*="language-css"]:after {
        content: 'CSS';
      }

      &[class*="language-html"]:after {
        content: 'HTML';
      }
    }

    input {
      width: 100%;

      margin: 10px 0;
      padding: 5px 10px;
    }

    textarea,
    .form_textarea {
      width: 100%;
      max-height: 200px;

      overflow: auto;
    }

    // button,
    .button {
      width: auto;

      background: @primary;
      border: none;
      border-radius: 2px;
      display: inline-block;
      font-size: 16px;
      color: @white;
      margin: 0 5px 5px 0;
      padding: 10px 20px;
      text-decoration: none;
    }

    // Tabs

    .demo_tabs {
      border-bottom: 1px solid @primary_lighter;

      &:after {
        width: 100%;

        clear: both;
        content: '';
        display: table;
      }

      .demo_tab.fs-tabs-tab {
        background: @white;
        border: none;
        border-radius: 2px 2px 0 0;
        color: @accent;
        font-size: 14px;
        text-transform: none;

        &.fs-tabs-active,
        .no-touchevents &:hover {
          color: @primary;
          background: @primary_lighter;
        }
      }
    }

    .demo_example {
      margin: 20px 0 30px;
    }

    // Output

    .demo_output {
      height: 100px;

      line-height: 1.8;

      @media @min_md {
        height: 200px;
      }
    }
  }