|
|
@@ -2,12 +2,12 @@
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv=Content-type content="text/html; charset=utf-8">
|
|
|
- <title>OOCSS Component: ButtonBar </title>
|
|
|
+ <title>OOCSS Component: Bar </title>
|
|
|
|
|
|
<link rel=stylesheet href="/static/css/reset.css">
|
|
|
<link rel=stylesheet href="/static/css/shared.css">
|
|
|
<link rel=stylesheet href="/static/oocss/Button.css">
|
|
|
-<link rel=stylesheet href="/static/oocss/ButtonBar.css">
|
|
|
+<link rel=stylesheet href="/static/oocss/Bar.css">
|
|
|
|
|
|
<link rel=stylesheet href="../../../../../../desktop/core/static/css/reset.css">
|
|
|
<link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
|
|
|
@@ -18,20 +18,20 @@
|
|
|
<body>
|
|
|
<div class="oocss-gallery" style="padding:2ex">
|
|
|
|
|
|
-<h1>ButtonBar</h1>
|
|
|
-<p>The ButtonBar component removes all the space between its children<br>
|
|
|
+<h1>Bar</h1>
|
|
|
+<p>The Bar component removes all the space between its children<br>
|
|
|
so that they bump right up against eachother.</p>
|
|
|
|
|
|
-<p><strong>Without</strong> the ButtonBar class</p>
|
|
|
+<p><strong>Without</strong> the Bar class</p>
|
|
|
<p>
|
|
|
<a class=Button>Button </a>
|
|
|
<a class=Button>Button </a>
|
|
|
<a class=Button>Button </a>
|
|
|
</p>
|
|
|
|
|
|
-<p><strong>With</strong> the ButtonBar class</p>
|
|
|
+<p><strong>With</strong> the Bar class</p>
|
|
|
|
|
|
-<p class=ButtonBar>
|
|
|
+<p class=Bar>
|
|
|
<a class=Button>Button </a>
|
|
|
<a class=Button>Button </a>
|
|
|
<a class=Button>Button </a>
|
|
|
@@ -41,7 +41,7 @@
|
|
|
|
|
|
<p>It also forces the whole block to behave as a solid block that cannot break or wrap.</p>
|
|
|
|
|
|
-<div class=ButtonBar>
|
|
|
+<div class=Bar>
|
|
|
<a class="Button">A Button</a>
|
|
|
<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
|
|
|
<a class="Button">A Button</a>
|
|
|
@@ -55,7 +55,7 @@
|
|
|
</div>
|
|
|
|
|
|
<p>To force breaks you may use a <code><BR></code> tag.</p>
|
|
|
-<div class=ButtonBar>
|
|
|
+<div class=Bar>
|
|
|
<a class=Button>Button </a>
|
|
|
<a class=Button>Button </a>
|
|
|
<a class=Button>Button </a>
|
|
|
@@ -67,10 +67,10 @@
|
|
|
|
|
|
<hr>
|
|
|
<h2>Vertically align the buttons</h2>
|
|
|
-<p>To vertically align the buttons in a ButtonBar simply add a valign attribute.</p>
|
|
|
-<p>e.g. <code><p class=ButtonBar valign=<strong>bottom</strong>></code> or <code><p class=ButtonBar valign=<strong>top</strong>></code></p>
|
|
|
+<p>To vertically align the buttons in a Bar simply add a valign attribute.</p>
|
|
|
+<p>e.g. <code><p class=Bar valign=<strong>bottom</strong>></code> or <code><p class=Bar valign=<strong>top</strong>></code></p>
|
|
|
|
|
|
-<p class=ButtonBar valign=bottom>
|
|
|
+<p class=Bar valign=bottom>
|
|
|
<a class="Button">A Button</a>
|
|
|
<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
|
|
|
<a class="Button">A Button</a>
|
|
|
@@ -78,7 +78,7 @@
|
|
|
<code> valign=<strong>bottom</strong></code>
|
|
|
</p>
|
|
|
|
|
|
-<p class=ButtonBar>
|
|
|
+<p class=Bar>
|
|
|
<a class="Button">A Button</a>
|
|
|
<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
|
|
|
<a class="Button">A Button</a>
|
|
|
@@ -86,7 +86,7 @@
|
|
|
<span><code> valign</code> not set</span>
|
|
|
</p>
|
|
|
|
|
|
-<p class=ButtonBar valign=top>
|
|
|
+<p class=Bar valign=top>
|
|
|
<a class="Button">A Button</a>
|
|
|
<button class="Button" style="max-width:30ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt…</button>
|
|
|
<a class="Button">A Button</a>
|
|
|
@@ -97,31 +97,31 @@
|
|
|
|
|
|
<hr>
|
|
|
<h2>Font Size</h2>
|
|
|
-<p>The font-size for the contents of a ButtonBar is hard-coded at 11px.</p>
|
|
|
+<p>The font-size for the contents of a Bar is hard-coded at 11px.</p>
|
|
|
|
|
|
<h3>Custom CSS</h3>
|
|
|
|
|
|
<p>To override this setting, add the following to your app's custom css file:</p>
|
|
|
|
|
|
-<pre><code><strong>.MyApp </strong>.ButtonBar > * {
|
|
|
+<pre><code><strong>.MyApp </strong>.Bar > * {
|
|
|
font-size:22px;
|
|
|
}</code></pre>
|
|
|
|
|
|
<p><em>Note: replace <code>MyApp</code> with the class of your actual app.</em></p>
|
|
|
|
|
|
-<h3>Subclass ButtonBar</h3>
|
|
|
+<h3>Subclass Bar</h3>
|
|
|
|
|
|
-<p>Alternatively you can subclass ButtonBar itself.</p>
|
|
|
+<p>Alternatively you can subclass Bar itself.</p>
|
|
|
|
|
|
<p>CSS: Create your subclass.</p>
|
|
|
|
|
|
-<pre><code>.ButtonBar<strong>.MyCustomButtonBar3</strong> > * {
|
|
|
+<pre><code>.Bar<strong>.MyCustomBar3</strong> > * {
|
|
|
font-size:22px;
|
|
|
}</code></pre>
|
|
|
|
|
|
-<p>HTML: Add your new class to a ButtonBar element.</p>
|
|
|
+<p>HTML: Add your new class to a Bar element.</p>
|
|
|
|
|
|
-<pre><code><p class="ButtonBar MyCustomButtonBar3">…</code></pre>
|
|
|
+<pre><code><p class="Bar MyCustomBar3">…</code></pre>
|
|
|
|
|
|
|
|
|
</div>
|