Browse Source

HUE-343. CSS Button Component

Thomas Aylott 15 years ago
parent
commit
79f224d536

+ 128 - 0
apps/jframegallery/src/jframegallery/templates/gallery/OOCSS.Button.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv=Content-type content="text/html; charset=utf-8">
+	<title>OOCSS Component: Button </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="../../../../../../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">
+
+</head>
+<body>
+<div class="oocss-gallery" style="padding:2ex">
+
+<h1>Button</h1>
+
+<h2>Usage</h2>
+
+<p>Add the class "Button" to an element to declare that it is of the Button class.</p>
+
+<p>e.g. <code>&lt;a class=&quot;Button&quot;&gt;A Button&lt;/a&gt;</code></p>
+
+<a class="Button">A Button</a>
+<button class="Button">button Button</button>
+
+<p>Buttons can contain almost any arbitrary html.</p>
+
+<a class="Button">
+	A Button Block
+	<ol>
+		<li>Howdy</li>
+		<li>Do</li>
+	</ol>
+	<em class="Button">A Button in a Button!</em>
+</a>
+
+<button class="Button">
+	button Button Block
+	<ol>
+		<li>Howdy</li>
+		<li>Do</li>
+	</ol>
+</button>
+
+<hr>
+<h2><code>disabled Button</code></h2>
+
+<p>To declare that the Button is disabled:</p>
+
+<ul>
+	<li>Add the attribute <code>disabled</code> to the element to declare that the Button is disabled</li>
+	<li>OR add the class <code>disabled</code> to the element </li>
+</ul>
+
+<p>e.g. <code>&lt;a class=&quot;Button disabled&quot;&gt;A disabled Button&lt;/a&gt;</code></p>
+
+disabled class:
+<a class="Button disabled">A.Button.disabled</a>
+<button class="Button disabled">button.Button.disabled</button>
+
+disabled attribute:
+<a class="Button" disabled>A.Button[disabled]</a>
+<button class="Button" disabled>button.Button[disabled]</button>
+
+<hr>
+<h2><code>notFocused Button</code></h2>
+
+<p>In order to handle the notFocused state of jBrowser windows, there is a <code>notFocused Button</code> state.</p>
+<p><em>There's nothing you have to do to your Button to get this feature.</em></p>
+
+<div class=notFocused>
+	<a class="Button">A Button</a>
+	<button class="Button">button Button</button>
+	<a disabled class="Button">A disabled Button</a>
+	<button disabled class="Button">button disabled Button</button>
+</div>
+
+<hr>
+
+<h2>round</h2>
+
+<dl>
+
+	<dt><code>class=<strong>roundRight</strong></code></dt>
+	<dd>Round the edge of the top right and bottom right corners.</dd>
+	<dd><p><i class="Button roundRight">Button roundRight</i> </p></dd>
+	<dd></dd>
+
+	<dt><code>class=<strong>roundLeft</strong></code></dt>
+	<dd>Round the edge of the top left and bottom left corners.</dd>
+	<dd><p><i class="Button roundLeft">Button roundLeft</i> </p></dd>
+
+	<dt><code>class=<strong>round</strong></code></dt>
+	<dd>roundLeft + roundRight</dd>
+	<dd><p><i class="Button round">Button round</i> </p></dd>
+
+</dl>
+
+<p><em>NOTE: IE8 gracefully degrades. It does not support rounded edges.</em></p>
+
+<h2>Size</h2>
+
+<p>The size of a Button is determined based on the CSS font-size.</p>
+<p>e.g <code>&lt;a style=&quot;font-size:<strong>1.2em</strong>&quot; class=&quot;round Button&quot;&gt;button&lt;/a&gt;</code></p>
+
+
+<p>
+	<a style="font-size:1.25em" class="round Button">button</a>
+	<a style="font-size:.65em" class="round Button">button</a>
+</p>
+
+<p>e.g <code>&lt;p style=&quot;font-size:<strong>1.2em</strong>&quot;&gt; &lt;a class=&quot;round Button&quot;&gt;button&lt;/a&gt; &lt;/p&gt;</code></p>
+<p style="font-size:1.25em">
+	<a class="round Button">button</a>
+	<a class="round Button">button</a>
+</p>
+<p style="font-size:.65em">
+	<a class="round Button">button</a>
+	<a class="round Button">button</a>
+</p>
+
+</div>
+</body>
+</html>

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

@@ -24,6 +24,7 @@
   <link rel="stylesheet" href="/static/css/reset.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/oocss/Button.css" type="text/css" media="screen" charset="utf-8">
 
   <link rel="stylesheet" href="/static/oocss/Button.css">
   <link rel="stylesheet" href="/static/oocss/Bar.css">

+ 203 - 0
desktop/core/static/oocss/Button.css

@@ -0,0 +1,203 @@
+/*
+---
+name: Button
+description: OOCSS Button class
+
+provides: Button
+# 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>
+...
+*/
+
+.Button:link,
+.Button:hover,
+.Button:focus,
+.Button:active,
+.Button{
+	position: relative;
+	display: inline-block;
+	text-align: center;
+	vertical-align: middle;
+	padding: 2px 1em;
+	cursor: pointer;
+	text-decoration: none;
+	
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	
+	-webkit-user-select:none;
+	-moz-user-select:none;
+	-o-user-select:none;
+	user-select:none;
+	
+	-webkit-user-drag: element;
+	-moz-user-drag: element;
+	-o-user-drag: element;
+	user-drag: element;
+	
+	-webkit-background-clip: border-box;
+	-moz-background-clip: border-box;
+	-o-background-clip: border-box;
+	background-clip: border-box;
+}
+
+/*remove all disabled states by forcing them to the default state*/
+.Button[disabled],
+.Button[disabled]:link,
+.Button[disabled]:hover,
+.Button[disabled]:focus,
+.Button[disabled]:active,
+.Button.disabled,
+.Button.disabled:link,
+.Button.disabled:hover,
+.Button.disabled:focus,
+.Button.disabled:active,
+
+.Button:link,
+.Button:visited,
+.Button{
+	font-family: "Lucida Grande", Lucida, Tahoma, sans-serif;
+	
+	color: #000;
+	border: 1px solid;
+	border-top-color: #666;
+	border-right-color: #333;
+	border-bottom-color: #111;
+	border-left-color: #555;
+	
+	-webkit-box-shadow: inset 0 0 2px #fff;
+	-moz-box-shadow: inset 0 0 2px #fff;
+	-o-box-shadow: inset 0 0 2px #fff;
+	box-shadow: inset 0 0 2px #fff;
+	
+	background: #A4A4A4;
+	background: -moz-linear-gradient(top, #DEDEDE, #A4A4A4);
+	background: -webkit-gradient(linear, left top, left bottom, from(#DEDEDE), to(#A4A4A4));
+	-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DEDEDE, EndColorStr=#A4A4A4)";
+	filter:     progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DEDEDE, EndColorStr=#A4A4A4);
+}
+
+
+/*disabled subclass*/
+
+.Button[disabled],
+.Button[disabled]:link,
+.Button[disabled]:visited,
+.Button[disabled]:hover,
+.Button[disabled]:focus,
+.Button[disabled]:active,
+.Button.disabled,
+.Button.disabled:link,
+.Button.disabled:visited,
+.Button.disabled:hover,
+.Button.disabled:focus,
+.Button.disabled:active{
+	cursor: default;
+	color: #666;
+	border-color: #999;
+}
+
+/*States*/
+
+.Button:hover,
+.Button:focus{
+	border-color: #5074d4;
+	z-index: 1; /*current Button should be above its siblings*/
+
+	-webkit-box-shadow: inset 0 0 2px #fff, 0 0 3px #5074d4;
+	-moz-box-shadow: inset 0 0 2px #fff, 0 0 3px #5074d4;
+	-o-box-shadow: inset 0 0 2px #fff, 0 0 3px #5074d4;
+	box-shadow: inset 0 0 2px #fff, 0 0 3px #5074d4;
+	
+	-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#EEEEEE, EndColorStr=#AAAAAA)";
+	filter:     progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#EEEEEE, EndColorStr=#AAAAAA);
+}
+
+.Button:active{
+	-webkit-box-shadow: inset 0 2px 3px #777;
+	-moz-box-shadow: inset 0 2px 3px #777;
+	-o-box-shadow: inset 0 2px 3px #777;
+	box-shadow: inset 0 2px 3px #777;
+
+	background: #888888;
+	background: -moz-linear-gradient(top, #888888, #A2A2A2);
+	background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#A2A2A2));
+	-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#888888, EndColorStr=#A2A2A2)";
+	filter:     progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#888888, EndColorStr=#A2A2A2);
+}
+
+/*notFocused parent*/
+
+.notFocused .Button,
+.notFocused .Button:link,
+.notFocused .Button:visited,
+.notFocused .Button:hover,
+.notFocused .Button:focus,
+.notFocused .Button:active{
+	border-color: #999;
+	color: #666;
+	
+	background: #E5E5E5;
+	background: -moz-linear-gradient(top, #F6F6F6, #E5E5E5);
+	background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#E5E5E5));
+	-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#F6F6F6, EndColorStr=#E5E5E5)";
+	filter:     progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#F6F6F6, EndColorStr=#E5E5E5);
+}
+.notFocused .Button:active{
+	-webkit-box-shadow: inset 0 2px 3px #ccc;
+	-moz-box-shadow: inset 0 2px 3px #ccc;
+	-o-box-shadow: inset 0 2px 3px #ccc;
+	box-shadow: inset 0 2px 3px #ccc;
+}
+
+/*round*/
+
+input.round,
+input.roundLeft,
+button.round,
+button.roundLeft,
+.Button.round,
+.Button.roundLeft{
+	-webkit-border-top-left-radius: 1ex;
+	-webkit-border-bottom-left-radius: 1ex;
+	-moz-border-radius-topleft: 1ex;
+	-moz-border-radius-bottomleft: 1ex;
+	border-top-left-radius: 1ex;
+	border-bottom-left-radius: 1ex;
+}
+
+input.round,
+input.roundRight,
+button.round,
+button.roundRight,
+.Button.round,
+.Button.roundRight{
+	-webkit-border-top-right-radius: 1ex;
+	-webkit-border-bottom-right-radius: 1ex;
+	-moz-border-radius-topright: 1ex;
+	-moz-border-radius-bottomright: 1ex;
+	border-top-right-radius: 1ex;
+	border-bottom-right-radius: 1ex;
+}