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

   1 /*
   2 Copyright (c) 2015 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   display: inline-block;
  21   position: relative;
  22   width: 16px;
  23   height: 16px;
  24   cursor: pointer;
  25   vertical-align: middle;
  26 }
  27
  28 :host #ink {
  29   position: absolute;
  30   top: -16px;
  31   left: -16px;
  32   width: 48px;
  33   height: 48px;
  34   color: var(--paper-radio-button-unchecked-ink-color, --primary-text-color);
  35   opacity: 0.6;
  36   pointer-events: none;
  37 }
  38
  39 :host #ink[checked] {
  40   color: var(--paper-radio-button-checked-ink-color, --default-primary-color);
  41 }
  42
  43 :host #offRadio {
  44   position: absolute;
  45   top: 0px;
  46   left: 0px;
  47   width: 12px;
  48   height: 12px;
  49   border-radius: 50%;
  50   border: solid 2px;
  51   background-color: var(--paper-radio-button-unchecked-background-color, transparent);
  52   border-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
  53   transition: border-color 0.28s;
  54 }
  55
  56 :host #onRadio {
  57   position: absolute;
  58   top: 4px;
  59   left: 4px;
  60   width: 8px;
  61   height: 8px;
  62   border-radius: 50%;
  63   background-color: var(--paper-radio-button-checked-color, --default-primary-color);
  64   -webkit-transform: scale(0);
  65   transform: scale(0);
  66   transition: -webkit-transform ease 0.28s;
  67   transition: transform ease 0.28s;
  68 }
  69
  70 :host([checked]) #offRadio {
  71   border-color: var(--paper-radio-button-checked-color, --default-primary-color);
  72 }
  73
  74 :host([checked]) #onRadio {
  75   -webkit-transform: scale(1);
  76   transform: scale(1);
  77 }
  78
  79 #radioLabel {
  80   position: relative;
  81   display: inline-block;
  82   vertical-align: middle;
  83   margin-left: 10px;
  84   white-space: normal;
  85   pointer-events: none;
  86   color: var(--paper-radio-button-label-color, --primary-text-color);
  87 }
  88
  89 #radioLabel[hidden] {
  90   display: none;
  91 }
  92
  93 /* disabled state */
  94 :host([disabled]) {
  95   pointer-events: none;
  96 }
  97
  98 :host([disabled]) #offRadio {
  99   border-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
 100   opacity: 0.5;
 101 }
 102
 103 :host([disabled][checked]) #onRadio {
 104   background-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
 105   opacity: 0.5;
 106 }
 107
 108 :host([disabled]) #radioLabel {
 109   /* slightly darker than the button, so that it's readable */
 110   opacity: 0.65;
 111 }