styleSheet.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>OpenBazaar Stylesheet</title>
  <link rel="stylesheet" href="node_modules/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="./.tmp/styles/main.css">
  <style>
    body {
      overflow: auto;
    }
    main {
      padding: 20px;
    }
    section {
      background: #fff;
      margin-bottom: 30px;
      padding: 20px;
      border: 1px solid hsl(0,0%,89%)
    }
  </style>
</head>
<body class="clrT">

<header class="borderStacked clrBr">
  <nav class="bar clrP">
    <div class="flexRow">
      <div>
        <div class="flexVCent">
          <!-- insert window buttons-->
        </div>
      </div>
      <div>
        <div class="flexVCent">
          <a class="iconBtn ion-chevron-left"></a>
          <a class="iconBtn ion-chevron-right"></a>
          <a class="iconBtn ion-refresh"></a>
        </div>
      </div>
      <div class="rowDivV clrBrBackground"></div>
      <div class="flexVCent">
        <span class="iconBtn">
          <i class="ion-search"></i>
        </span>
      </div>
      <div class="flexExpand">
        <div class="flexVCent">
          <input class="flexExpand" type="text">
        </div>
      </div>
      <div class="rowDivV clrBrBackground"></div>
      <div>
        <div class="flexVCent">
          <a class="iconBtn ion-android-notifications"></a>
          <a class="discSm border clrBr" style="background-image: url('imgs/defaultAvatar.png')"></a>
        </div>
      </div>
    </div>
  </nav>
  <nav class="bar clrP"></nav>

</header>

<main>
  <section>
    <div>
      <h1>Typography (this is a H1)</h1>
      <div>
        <h2>H2</h2>
        <h3>H3</h3>
        <h4>H4</h4>
        <h5>H5</h5>
        <h6>H6</h6>
        <hr>
        <p>This is a paragraph in the primary text color. <a>This is a link.</a> It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. </p>
        <p class="clrT2">This is a paragraph in text color 2. <a>This is a link.</a>It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. </p>
        <p class="clrT3">This is a paragraph in text color 3. <a>This is a link.</a>It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. This is a paragraph. It's full of words, and should only be used for words. </p>
        <p><span class="note">This is a note.</span></p>
        <p>If a paragraph is the last element in a container, it does not have a bottom margin.</p>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h1>Containers</h1>
      <p></p>
      <div>
        <h2>Basic Containers</h2>
        <p>Containers wrap other elements, to provide structure or decoration.</p>
        <div>
          <div class="box pad row clrS">
            This is a box with standard padding and vertical spacing and the secondary background color.
          </div>
          <div class="box border padSm rowLg clrP clrBr">
            This is a box with a border. small padding and big vertical spacing and the primary background color.
          </div>
          <div class="box border borderStacked padKids row clrP clrBr">
            <div class="box">
              borderStacked element 1
            </div>
            <div class="box">
              borderStacked element 2
            </div>
            <div class="box">
              borderStacked element 3
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h1>Grid</h1>
      <p>The grid doesn't have gutters. To add gutters, use a padding class on the column.</p>
      <div class="txCtr">
        <h2>Basic Grid</h2>
        <div class="flexRow row">
          <div class="col12 border clrBr pad">12</div>
        </div>
        <div class="flexRow row">
          <div class="col1 border clrBr pad">1</div>
          <div class="col11 border clrBr pad">11</div>
        </div>
        <div class="flexRow row">
          <div class="col2 border clrBr pad">2</div>
          <div class="col10 border clrBr pad">10</div>
        </div>
        <div class="flexRow row">
          <div class="col3 border clrBr pad">3</div>
          <div class="col9 border clrBr pad">9</div>
        </div>
        <div class="flexRow flexFlushSides row">
          <div class="col3 padSm">
            <div class="box border clrBr pad">
              An example of gutters (3)
            </div>
          </div>
          <div class="col4 padSm">
            <div class="box border clrBr pad">
              An example of gutters (4)
            </div>
          </div>
          <div class="col5 padSm">
            <div class="box border clrBr pad">
              An example of gutters (9)
            </div>
          </div>
        </div>
        <div class="flexRow row">
          <div class="col4 border clrBr pad">4</div>
          <div class="col8 border clrBr pad">
            <div class="flexRow padSm">
              <div class="col6 pad clrBr border">
                Nested column 6
              </div>
              <div class="col6 pad clrBr border">
                Nested column 6
              </div>
            </div>
          </div>
        </div>
        <div class="flexCol padSm border clrBr flexFlushSides">
          <div class="col12 rowSm">
            <div class="box border clrBr pad">
              Vertical Column 12
            </div>
          </div>
          <div class="col12 rowSm">
            <div class="box border clrBr pad">
              Vertical Column 12
            </div>
          </div>
          <div class="col12 rowSm">
            <div class="box border clrBr pad">
              Vertical Column 12
            </div>
          </div>
          <div class="col12 rowSm">
            <div class="box border clrBr pad">
              Vertical Column 12
            </div>
          </div>
          <div class="col12 rowSm">
            <div class="flexVCent border clrBr padSm gutterH">
              <div>Vertically centered flex wrapper with gutter.</div>
              <button>A Button</button>
              <div class="box clrS padSm">Element</div>
            </div>
          </div>
          <div class="col12 rowSm">
            <div class="flexHCent border clrBr padSm gutterH flexNoGrow">
              <div class="box clrS padSm">Horizontally centered flex wrapper with flexNoGrow.</div>
              <div class="box clrS padSm">Element</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h1>Buttons</h1>
      <p></p>
      <div class="rowMd">
        <h2>Basic Buttons</h2>
        <div class="box pad clrS">
          <a class="btn clrP clrBr row">A Basic Button</a>
          <div class="btnStrip row">
            <a class="btn clrP clrBr">Row Button</a>
            <a class="btn clrP clrBr">Row Button</a>
            <a class="btn clrP clrBr">Row Button</a>
          </div>
        </div>
      </div>
      <div class="rowMd">
        <h2>Flex Buttons</h2>
        <div class="box clrSh3">
            <div class="flexRow flexBtnWrapper">
              <a class="flexExpand btnFlx clrP">Flex Button 1</a>
              <a class="flexExpand btnFlx clrP">Flex Button 2</a>
              <a class="flexExpand btnFlx clrP">Flex Button 3</a>
            </div>
          </div>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h1>Forms</h1>
      <p></p>
      <div>
        <h2>Form Fields</h2>
      </div>
      <div>
        <h2>Form Controls</h2>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h1>Modals</h1>
      <p></p>
      <div>
        <h2>Basic Modals</h2>
        <dialog>Modal</dialog>
      </div>
      <div>
        <h2>Special Use Modals</h2>
        <dialog>Modal</dialog>
      </div>
    </div>
  </section>
  <section>
    <div>
      <h1>Lists</h1>
      <p></p>
      <div>
        <h2>Basic Lists</h2>
        <p>Lists with a single piece of content per list item.</p>
      </div>
      <div>
        <h2>Action Lists</h2>
        <p>Lists where each list item is a control, such as navigation lists or a list of options.</p>
      </div>
      <div>
        <h2>Content Lists</h2>
        <p>These lists have multiple sub-elements in them.</p>
      </div>
    </div>
  </section>


</main>

<footer>

</footer>

</body>
</html>