Browse Source

HUE-322. CSS Modules

Added the first few CSS Modules

* Bar
* Bar.Paginator
* Grid
* Icon
Thomas Aylott 15 years ago
parent
commit
cb59d4783b

+ 129 - 0
apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.Bar.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv=Content-type content="text/html; charset=utf-8">
+	<title>OOCSS Component: ButtonBar </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="../../../../../../desktop/core/static/css/reset.css">
+<link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
+<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Button.css">
+<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Bar.css">
+
+</head>
+<body>
+<div class="oocss-gallery" style="padding:2ex">
+
+<h1>ButtonBar</h1>
+<p>The ButtonBar 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>
+	<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 class=ButtonBar>
+	<a class=Button>Button </a>
+	<a class=Button>Button </a>
+	<a class=Button>Button </a>
+</p>
+
+<hr>
+
+<p>It also forces the whole block to behave as a solid block that cannot break or wrap.</p>
+
+<div class=ButtonBar>
+	<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>
+	<button class="Button">button Button</button>
+	<a class="Button">A Button</a>
+	<button class="Button">button Button</button>
+	<a class="Button">A Button</a>
+	<button class="Button">button Button</button>
+	<a class="Button">A Button</a>
+	<button class="Button">button Button</button>
+</div>
+
+<p>To force breaks you may use a <code>&lt;BR&gt;</code> tag.</p>
+<div class=ButtonBar>
+	<a class=Button>Button </a>
+	<a class=Button>Button </a>
+	<a class=Button>Button </a>
+	<br>
+	<a class=Button>BR tags work as expected</a>
+	<a class=Button>Button </a>
+	<a class=Button>Button </a>
+</div>
+
+<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>&lt;p class=ButtonBar valign=<strong>bottom</strong>&gt;</code> or <code>&lt;p class=ButtonBar valign=<strong>top</strong>&gt;</code></p>
+
+<p class=ButtonBar 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>
+	<button class="Button">button Button</button>
+	<code>&nbsp;valign=<strong>bottom</strong></code>
+</p>
+
+<p class=ButtonBar>
+	<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>
+	<button class="Button">button Button</button>
+	<span><code>&nbsp;valign</code> not set</span>
+</p>
+
+<p class=ButtonBar 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>
+	<button class="Button">button Button</button>
+	<code>&nbsp;valign=<strong>top</strong></code>
+</p>
+
+
+<hr>
+<h2>Font Size</h2>
+<p>The font-size for the contents of a ButtonBar 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 > * {
+	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>
+
+<p>Alternatively you can subclass ButtonBar itself.</p>
+
+<p>CSS: Create your subclass.</p>
+
+<pre><code>.ButtonBar<strong>.MyCustomButtonBar3</strong> > * {
+	font-size:22px;
+}</code></pre>
+
+<p>HTML: Add your new class to a ButtonBar element.</p>
+
+<pre><code>&lt;p class=&quot;ButtonBar MyCustomButtonBar3&quot;&gt;&hellip;</code></pre>
+
+
+</div>
+</body>
+</html>

+ 65 - 0
apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.ButtonBar.Paginator.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv=Content-type content="text/html; charset=utf-8">
+	<title>OOCSS Component: ButtonBar.Paginator </title>
+
+	<link rel=stylesheet href="/static/css/reset.css">
+	<link rel=stylesheet href="/static/css/shared.css">
+	<link rel=stylesheet href="/static/oocss/Icon.css">
+	<link rel=stylesheet href="/static/oocss/Button.css">
+	<link rel=stylesheet href="/static/oocss/ButtonBar.css">
+	<link rel=stylesheet href="/static/oocss/ButtonBar.Paginator.css">
+
+	<link rel=stylesheet href="../../../../../../desktop/core/static/css/reset.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Icon.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Button.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/ButtonBar.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/ButtonBar.Paginator.css">
+
+</head>
+<body>
+<div class="print oocss-gallery" style="padding:2ex">
+
+	<h1>Paginator ButtonBar</h1>
+	<p>ButtonBar subclass. Adds a few special rules for the paginator bar component.</p>
+
+	<div class="ButtonBar Paginator">
+		<a href="" class="Button roundLeft"><i class="Icon iFirst">First</i></a>
+		<a href="" class="Button"><i class="Icon iBack">Back</i></a>
+		<a href="" class="Button"><i class="Icon iRefresh">Refresh</i></a>
+		<form action=""><input class=round size=5 value=page1><input type=submit class=ccs-hidden value=Go /></form>
+		<a href="" class="Button"><i class="Icon iNext">Next</i></a>
+		<a href="" class="Button roundRight"><i class="Icon iLast">Last</i></a>
+	</div>
+
+	<div class="ButtonBar Paginator">
+		<a href="" class="disabled Button roundLeft"><i class="Icon iFirst">First</i></a>
+		<a href="" class="disabled Button"><i class="Icon iBack">Back</i></a>
+		<a href="" class="disabled Button"><i class="Icon iRefresh">Refresh</i></a>
+		<form action=""><input class=round size=5 value=page1><input type=submit class=ccs-hidden value=Go /></form>
+		<a href="" class="disabled Button"><i class="Icon iNext">Next</i></a>
+		<a href="" class="disabled Button roundRight"><i class="Icon iLast">Last</i></a>
+		
+		<em>".Button.disabled"</em>
+	</div>
+
+	<div class="notFocused">
+
+		<div class="ButtonBar Paginator">
+			<a href="" class="Button roundLeft"><i class="Icon iFirst">First</i></a>
+			<a href="" class=Button><i class="Icon iBack">Back</i></a>
+			<a href="" class=Button><i class="Icon iRefresh">Refresh</i></a>
+			<form action=""><input class=round size=5 value=page1><input type=submit class=ccs-hidden value=Go /></form>
+			<a href="" class=Button><i class="Icon iNext">Next</i></a>
+			<a href="" class="Button roundRight"><i class="Icon iLast">Last</i></a>
+			
+			<em>".notFocused .Button"</em>
+		</div>
+
+	</div>
+
+</div>
+</body>
+</html>

+ 195 - 0
apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.Grid.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv=Content-type content="text/html; charset=utf-8">
+	<title>OOCSS Component: Grid </title>
+
+	<link rel=stylesheet href="/static/css/reset.css">
+	<link rel=stylesheet href="/static/css/shared.css">
+	<link rel=stylesheet href="/static/oocss/Grid.css">
+
+	<link rel=stylesheet href="../../../../../../desktop/core/static/css/reset.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Grid.css">
+
+</head>
+<body>
+<div class="print oocss-gallery" style="padding:2ex">
+
+<h1>Grid</h1>
+<p><strong>Requires <code>class=Grid</code></strong></p>
+<p>Semantic flexible grid layouts. Use the grid to impose a strict grid layout.</p>
+<p>A Grid can have many <code>"Row"</code> children.</p>
+
+<p><strong>Grid</strong> is a namespace.</p>
+
+<p>NOTE: Having non Row children of a Grid may give unexpected results.</p>
+<hr>
+
+<h3>Grid > Row</h3>
+<p><strong>Requires <code>class=Row</code></strong></p>
+<p>Split a Grid up into rows</p>
+
+<hr>
+
+<h3>Grid > Row > *</h3>
+<p>Any child of a "Row"</p>
+
+<dl class=Grid style="border:5px solid green">
+
+	<dt class=Row>
+		<b style="border:5px solid blue">Grid > Row > *</b>
+		<u style="border:5px solid purple">Each 'cell' can have its own border and other styles</u>
+	</dt>
+
+	<dd class=Row>
+		<b>Col A</b>
+	</dd>
+
+	<dt class=Row>
+		<b></b>
+		<i>lorem ipsum dolar sit amet</i>
+	</dt>
+
+	<dd class=Row>
+		<b></b>
+		<i></i>
+		<span>Col C</span>
+	</dd>
+
+</dl>
+
+<h2>Form Grid</h2>
+<p>Design complex semantic forms without writing any custom CSS.</p>
+
+<form class=Grid>
+
+	<label class=Row>
+		<span>Foo bar baz bang</span>
+		<input value=foo>
+		<strong>Required</strong>
+	</label>
+
+	<label class=Row>
+		<span>Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit,<br>sed do eiusmod tempor incididunt</span>
+		<input value=bar>
+		<strong>Required</strong>
+	</label>
+
+	<label class=Row>
+		<span>Bang</span>
+		<input value=bang>
+		<strong>Not Required</strong>
+	</label>
+
+	<div class=Row>
+		<label align=right><input type=reset></label>
+		<label><input type=submit></label>
+	</div>
+
+</form>
+
+<h3>Custom Style</h3>
+
+<h4>Inline</h4>
+<p>Supported attributes on Rows and Row direct children:</p>
+<ul>
+	<li><code>&nbsp;align=left</code></li>
+	<li><code>&nbsp;align=right</code></li>
+	<li><code>&nbsp;align=center</code></li>
+	<li><code>valign=top</code></li>
+	<li><code>valign=bottom</code></li>
+	<li><code>valign=middle</code></li>
+</ul>
+<p>Supported inline style:</p>
+<dd>
+	<dt>width</dt>
+	<dd>e.g. <code>style="width:20ex"</code></dd>
+	<dd>If set on a child of the first Row, <br>it will define the width for the entire column.</dd>
+</dd>
+
+<form class=Grid style="width:100%; border:2px solid blue">
+
+	<label class=Row>
+		<span style="width:20%"> style="width:20ex"</span>
+		<input value=foo>
+		<strong style="width:20ex" align=center>Required</strong>
+	</label>
+
+	<h5 class=Row align=center>
+		<span>Row</span>
+		<span>align=</span>
+		<span>center</span>
+	</h5>
+
+	<label class=Row>
+		<span align=right valign=middle>right middle</span>
+		<textarea rows=4>textarea[rows=4]
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
+		<strong align=center>Required</strong>
+	</label>
+
+	<label class=Row>
+		<span>Individual Row children can contain tons and tons of text without breaking the layout even a bit!</span>
+		<span align=center valign=middle><input style="width:60%" value="align=center valign=middle"></span>
+		<strong align=center>Not Required</strong>
+	</label>
+
+	<div class=Row>
+		<i></i>
+		<span align=right><input type=reset></span>
+		<label align=center><input type=submit></label>
+	</div>
+
+</form>
+
+<hr>
+<p><em>NOTE: Using a form element as a direct child of a Row may have unexpected results in some edge cases.</em></p>
+<hr>
+
+
+<h2>Columns</h2>
+
+
+<h3>Auto Widths</h3>
+<div class=Grid>
+	<div class=Row>
+		<h3>left</h3>
+		<h3>center</h3>
+		<h3>right</h3>
+	</div>
+	<div class=Row>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
+	</div>
+	<div class=Row>
+		<strong>left</strong>
+		<strong>center</strong>
+		<strong>right</strong>
+	</div>
+</div>
+
+<hr>
+<h3>Fluid Widths</h3>
+<div class=Grid>
+	<div class=Row>
+		<h3>top left</h3>
+		<h3>top center</h3>
+		<h3>top right</h3>
+	</div>
+	<div class=Row>
+		<p style="width:33.3%">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
+		<p style="width:33.3%">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
+	</div>
+	<div class=Row>
+		<h4>bottom left</h4>
+		<h4>bottom center</h4>
+		<h4>bottom right</h4>
+	</div>
+</div>
+
+</div>
+</body>
+</html>

+ 37 - 0
apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.Icon.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv=Content-type content="text/html; charset=utf-8">
+	<title>OOCSS Component: Icon </title>
+
+	<link rel=stylesheet href="/static/css/reset.css">
+	<link rel=stylesheet href="/static/css/shared.css">
+	<link rel=stylesheet href="/static/oocss/Icon.css">
+
+	<link rel=stylesheet href="../../../../../../desktop/core/static/css/reset.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/css/shared.css">
+	<link rel=stylesheet href="../../../../../../desktop/core/static/oocss/Icon.css">
+
+</head>
+<body>
+<div class="print oocss-gallery">
+
+<h3>Icon</h3>
+
+<p>Replace semantic text with an image.</p>
+
+<p>
+	iFirst   <i class="Icon iFirst">First</i>
+	iBack    <i class="Icon iBack">Back</i>
+	iRefresh <i class="Icon iRefresh">Refresh</i>
+	iNext    <i class="Icon iNext">Next</i>
+	iLast    <i class="Icon iLast">Last</i>
+
+	Custom <i class="Icon" style="background-image:url(/static/art/spinner.gif);height:16px;width:16px">Custom Icon: Spinner</i>
+</p>
+
+<p>Sometimes an <code>IMG</code> would actually be the better option. IMG element <img src="/static/art/spinner.gif"></p>
+
+</div>
+</body>
+</html>

+ 6 - 0
desktop/core/src/desktop/templates/index.mako

@@ -25,6 +25,12 @@
   <link rel="stylesheet" href="/static/css/windows.css" type="text/css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="/static/css/windows.css" type="text/css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="/static/css/desktop.css" type="text/css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="/static/css/desktop.css" type="text/css" media="screen" charset="utf-8">
 
 
+  <link rel="stylesheet" href="/static/oocss/Button.css">
+  <link rel="stylesheet" href="/static/oocss/ButtonBar.css">
+  <link rel="stylesheet" href="/static/oocss/ButtonBar.Paginator.css">
+  <link rel="stylesheet" href="/static/oocss/Grid.css">
+  <link rel="stylesheet" href="/static/oocss/Icon.css">
+
   <script src="/depender/build?client=true&require=dbug,DomReady,Cookie,Element.Dimensions,Element.Style,CCS.Desktop.BackgroundManager,Cookie,Clientcide"></script>
   <script src="/depender/build?client=true&require=dbug,DomReady,Cookie,Element.Dimensions,Element.Style,CCS.Desktop.BackgroundManager,Cookie,Clientcide"></script>
   <!--[if IE 8]>
   <!--[if IE 8]>
       <script>
       <script>

+ 12 - 5
desktop/core/static/css/shared.css

@@ -9,7 +9,8 @@
 	font-size: 12px;
 	font-size: 12px;
 }
 }
 /* all links default styles */
 /* all links default styles */
-.ccs-shared a {
+.ccs-shared a:visited,
+.ccs-shared a:link {
 	color: #3e528c;
 	color: #3e528c;
 	text-decoration: none;
 	text-decoration: none;
 	cursor: pointer;
 	cursor: pointer;
@@ -18,7 +19,8 @@
 .ccs-shared .jframe_ignore a {
 .ccs-shared .jframe_ignore a {
 	text-decoration: none;
 	text-decoration: none;
 }
 }
-.ccs-shared a.disabled {
+.ccs-shared a:visited.disabled,
+.ccs-shared a:link.disabled {
 	text-decoration: none;
 	text-decoration: none;
 	color: #000;
 	color: #000;
 }
 }
@@ -27,7 +29,8 @@
 	color: #999;
 	color: #999;
 	cursor: pointer;
 	cursor: pointer;
 }
 }
-.ccs-shared a:hover {
+.ccs-shared a:visited:hover,
+.ccs-shared a:link:hover {
 	text-decoration: underline;
 	text-decoration: underline;
 }
 }
 /* all imgs default styles */
 /* all imgs default styles */
@@ -719,8 +722,12 @@ OTHER DEALINGS IN THE SOFTWARE.
 .print p {margin:0 0 1.5em;}
 .print p {margin:0 0 1.5em;}
 .print p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
 .print p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
 .print p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
 .print p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
-.print a:focus, .print a:hover {color:#000;}
-.print a {color:#009;text-decoration:underline;}
+.print a:visited:focus,
+.print a:visited:hover,
+.print a:link:focus,
+.print a:link:hover {color:#000;}
+.print a:visited,
+.print a:link {color:#009;text-decoration:underline;}
 .print blockquote {margin:1.5em;color:#666;font-style:italic;}
 .print blockquote {margin:1.5em;color:#666;font-style:italic;}
 .print strong {font-weight:bold;}
 .print strong {font-weight:bold;}
 .print em, .print dfn {font-style:italic;}
 .print em, .print dfn {font-style:italic;}

+ 52 - 0
desktop/core/static/oocss/Bar.Paginator.css

@@ -0,0 +1,52 @@
+/*
+---
+name: Bar.Paginator
+description: OOCSS Bar Paginator is a subclass of the Bar class. It provides special default formatting for .Bar > form
+
+provides: Bar.Paginator
+requires: Bar
+
+license: |
+
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+  
+      http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+authors:
+  - Thomas Aylott <thomas@cloudera.com>
+...
+*/
+
+.Bar.Paginator input {
+	padding: 0;
+	margin: 0;
+	border: none;
+	font-size: 1em;
+	text-align: center;
+	padding: .4ex;
+	border:1px solid #999;
+	margin: 0 1px;
+	
+	-webkit-box-shadow:inset 1px 1px 2px #bbb;
+	-moz-box-shadow:inset 1px 1px 2px #bbb;
+	-o-box-shadow:inset 1px 1px 2px #bbb;
+	box-shadow:inset 1px 1px 2px #bbb;
+
+	width: 5.5ex;
+}
+
+.Bar.Paginator form {
+	padding: 0 1ex;
+}

+ 78 - 0
desktop/core/static/oocss/Bar.css

@@ -0,0 +1,78 @@
+/*
+---
+name: Bar
+description: OOCSS Bar class lays out its children as if they were part of a single unit
+
+provides: Bar
+# requires: 
+
+license: |
+
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+  
+      http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+authors:
+  - Thomas Aylott <thomas@cloudera.com>
+...
+*/
+
+.Bar {
+	font-size: 0px;
+	white-space: nowrap;
+}
+
+.Bar > * {
+	font-size: 12px;
+	vertical-align: middle;
+	white-space: normal;
+}
+
+.Bar[valign=top] > * {
+	vertical-align: top;
+	margin-top: 0;
+}
+
+.Bar[valign=bottom] > * {
+	vertical-align: bottom;
+	margin-bottom: 0;
+}
+
+.Bar > form {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	position: relative;
+	top: 1px;
+}
+
+/*Bar Button*/
+
+.Bar > .Button {
+	display: inline-block;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+/*keeps from having the appearance of a double-width border*/
+.Bar > .Button + .Button {
+	margin-left: -1.2px;
+}
+.Bar + .Bar {
+	margin-top: -1.2px;
+}
+.Bar > br ~ .Button {
+	margin-top: -1.2px;
+}

+ 94 - 0
desktop/core/static/oocss/Grid.css

@@ -0,0 +1,94 @@
+/*
+---
+name: Grid
+description: "OOCSS Grid & Row classes. Uses display:table to provide flexible layout to semantic markup."
+
+provides: Grid
+# requires: 
+
+license: |
+
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+  
+      http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+authors:
+  - Thomas Aylott <thomas@cloudera.com>
+...
+*/
+
+/* Grid */
+
+.Grid{
+	display: table;
+	border-collapse: separate;
+}
+
+/* Row */
+
+.Grid > .Row{
+	display: table-row;
+	text-align: inherit;
+}
+
+/* cells */
+
+.Grid > .Row > *{
+	display: table-cell;
+	vertical-align: top;
+	text-align: inherit;
+
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.Grid > .Row > input,
+.Grid > .Row > textarea{
+	width:100%;
+	height:100%;
+}
+
+/* alignment declarations */
+
+.Grid > .Row[align=right] > *,
+.Grid > .Row > *[align=right]{
+	text-align: right;
+}
+.Grid > .Row[align=left] > *,
+.Grid > .Row > *[align=left]{
+	text-align: left;
+}
+.Grid > .Row[align=middle] > *,
+.Grid > .Row[align=center] > *,
+.Grid > .Row > *[align=middle],
+.Grid > .Row > *[align=center]{
+	text-align: center;
+}
+.Grid > .Row[valign=top] > *,
+.Grid > .Row > *[valign=top]{
+	vertical-align: top;
+}
+.Grid > .Row[valign=bottom] > *,
+.Grid > .Row > *[valign=bottom]{
+	vertical-align: bottom;
+}
+.Grid > .Row[valign=middle] > *,
+.Grid > .Row[valign=center] > *,
+.Grid > .Row > *[valign=middle],
+.Grid > .Row > *[valign=center]{
+	vertical-align: middle;
+}
+

+ 63 - 0
desktop/core/static/oocss/Icon.css

@@ -0,0 +1,63 @@
+/*
+---
+name: Icon
+description: OOCSS Icon class. Replaces the text content of an element with an image that flows with the text.
+
+provides: Icon
+# requires: 
+
+license: |
+
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+  
+      http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+authors:
+  - Thomas Aylott <thomas@cloudera.com>
+...
+*/
+
+.Icon {
+	display:inline-block;
+	overflow:hidden;
+	text-align:left;
+	text-indent:-9999em;
+	color:transparent;
+	background-color: transparent;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	vertical-align: text-bottom;
+}
+.notFocused .Icon,
+.disabled .Icon{
+	/*FIXME: Add support for translucent PNGs for IE8*/
+	-moz-opacity: 0.6;
+	opacity: 0.6;
+}
+
+/*Specific Icons*/
+
+.Icon.iRefresh { background-image: url(Icon/glyph-refresh.png); min-width:10px; min-height:12px; }
+.Icon.iFirst { background-image: url(Icon/glyph-first.png); min-width:9px; min-height:9px; }
+.Icon.iBack { background-image: url(Icon/glyph-back.png); min-width:9px; min-height:9px; }
+.Icon.iNext { background-image: url(Icon/glyph-next.png); min-width:9px; min-height:9px; }
+.Icon.iLast { background-image: url(Icon/glyph-last.png); min-width:9px; min-height:9px; }
+
+/*Special cases*/
+
+.Button > .Icon{
+	display:block;
+	width:1.5ex;
+}

BIN
desktop/core/static/oocss/Icon/glyph-back.png


BIN
desktop/core/static/oocss/Icon/glyph-first.png


BIN
desktop/core/static/oocss/Icon/glyph-last.png


BIN
desktop/core/static/oocss/Icon/glyph-next.png


BIN
desktop/core/static/oocss/Icon/glyph-refresh.png


BIN
desktop/core/static/oocss/Icon/src/Back.opacity


BIN
desktop/core/static/oocss/Icon/src/First.opacity


BIN
desktop/core/static/oocss/Icon/src/Last.opacity


BIN
desktop/core/static/oocss/Icon/src/Refresh.opacity


BIN
desktop/core/static/oocss/Icon/src/Right.opacity