mirror of
https://github.com/OpenBazaar/openbazaar-desktop
synced 2025-10-06 00:22:47 +02:00
282 lines
8.8 KiB
HTML
282 lines
8.8 KiB
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>
|