|
@@ -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;
|
|
|
|
|
+}
|