third_party/polymer/components/paper-radio-button/paper-radio-button.css

   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.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   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.txt
   8 */
   9
  10 :host {
  11   display: inline-block;
  12   white-space: nowrap;
  13 }
  14
  15 :host(:focus) {
  16   outline: none;
  17 }
  18
  19 #radioContainer {
  20   position: relative;
  21   width: 16px;
  22   height: 16px;
  23   cursor: pointer;
  24 }
  25
  26 #radioContainer.labeled {
  27   display: inline-block;
  28   vertical-align: middle;
  29 }
  30
  31 #ink {
  32   position: absolute;
  33   top: -16px;
  34   left: -16px;
  35   width: 48px;
  36   height: 48px;
  37   color: #5a5a5a;
  38 }
  39
  40 #ink[checked] {
  41   color: #0f9d58;
  42 }
  43
  44 #offRadio {
  45   position: absolute;
  46   top: 0px;
  47   left: 0px;
  48   width: 12px;
  49   height: 12px;
  50   border-radius: 50%;
  51   border: solid 2px;
  52   border-color: #5a5a5a;
  53 }
  54
  55 #onRadio {
  56   position: absolute;
  57   top: 0;
  58   left: 0;
  59   width: 16px;
  60   height: 16px;
  61   border-radius: 50%;
  62   background-color: #0f9d58;
  63   -webkit-transform: scale(0);
  64   transform: scale(0);
  65   transition: -webkit-transform ease 0.28s;
  66   transition: transform ease 0.28s;
  67 }
  68
  69 #onRadio.fill {
  70   -webkit-transform: scale(1.1);
  71   transform: scale(1.1);
  72 }
  73
  74 #radioLabel {
  75   position: relative;
  76   display: inline-block;
  77   vertical-align: middle;
  78   margin-left: 10px;
  79   white-space: normal;
  80   pointer-events: none;
  81 }
  82
  83 #radioLabel[hidden] {
  84   display: none;
  85 }
  86
  87 /* disabled state */
  88 :host([disabled]) {
  89   pointer-events: none;
  90 }
  91
  92 :host([disabled]) #onRadio {
  93   display: none;
  94 }
  95
  96 :host([disabled]) #offRadio {
  97   opacity: 0.33;
  98   border-color: #5a5a5a;
  99 }
 100
 101 :host([disabled][checked]) #offRadio {
 102   opacity: 0.33;
 103   background-color: #5a5a5a;
 104 }