Home | History | Annotate | Download | only in core-icon-button
      1 /*
      2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
      4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
      5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
      6 Code distributed by Google as part of the polymer project is also
      7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
      8 */
      9 
     10 :host {
     11   display: inline-block;
     12   box-sizing: border-box;
     13   -moz-box-sizing: border-box;
     14   user-select: none;
     15   -moz-user-select: none;
     16   -webkit-user-select: none;
     17   border-radius: 2px;
     18   padding: 7px;
     19   margin: 2px;
     20   vertical-align: middle;
     21   font-size: 1rem;
     22   cursor: pointer;
     23 }
     24 
     25 :host([disabled]) {
     26   opacity: 0.6;
     27   pointer-events: none;
     28 }
     29 
     30 :host(.outline) {
     31   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
     32 }
     33 
     34 :host(:hover:not([disabled])) {
     35   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
     36 }
     37 
     38 :host(.selected:not([disabled])) {
     39   background-color: rgba(0, 0, 0, 0.05);
     40   box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12);
     41 }
     42 
     43 :host(:active:not([disabled]), .selected:active:not([disabled])) {
     44   background-color: rgba(0, 0, 0, 0.05);
     45   box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
     46 }
     47 
     48 :host(.core-dark-theme.outline) {
     49   background-color: rgba(200, 200, 200, 0.05);
     50   box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
     51 }
     52 
     53 :host(.core-dark-theme:hover) {
     54   background-color: rgba(200, 200, 200, 0.05);
     55   box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
     56 }
     57 
     58 :host(.core-dark-theme.selected) {
     59   background-color: rgba(220, 220, 220, 0.05);
     60   box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200, 200, 0.12);
     61 }
     62 
     63 :host(.core-dark-theme:active, .core-dark-theme.selected:active) {
     64   background-color: rgba(200, 200, 200, 0.05);
     65   box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
     66 }
     67 
     68 core-icon {
     69   pointer-events: none;
     70 }
     71 
     72 /* note: this is a polyfill aware selector */
     73 :host ::content > :not(core-icon) {
     74   margin-left: 4px;
     75 }
     76