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