| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- /*
- ---
- 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;
- }
|