ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html

<link rel="import" href="../../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../shared_vars_css.html">

<!-- Common radio-button styling for Material Design WebUI. -->
<dom-module id="cr-radio-button-style">
  <template>
    <style>
      :host {
        --cr-radio-button-checked-color: var(--google-blue-600);
        --cr-radio-button-checked-ripple-color:
            rgba(var(--google-blue-600-rgb), .2);
        --cr-radio-button-ink-size: 40px;
        --cr-radio-button-size: 16px;
        --cr-radio-button-unchecked-color: var(--google-grey-refresh-700);
        --cr-radio-button-unchecked-ripple-color:
            rgba(var(--google-grey-600-rgb), .15);

        --ink-to-circle: calc((var(--cr-radio-button-ink-size) -
                               var(--cr-radio-button-size)) / 2);
        align-items: center;
        display: flex;
        flex-shrink: 0;
        outline: none;
      }

      :host-context([dark]) {
        --cr-radio-button-checked-color: var(--google-blue-refresh-300);
        --cr-radio-button-checked-ripple-color:
            rgba(var(--google-blue-refresh-300-rgb), .4);
        --cr-radio-button-unchecked-color: var(--google-grey-refresh-500);
        --cr-radio-button-unchecked-ripple-color:
            rgba(var(--google-grey-refresh-300-rgb), .4);
      }

      :host([disabled]) {
        opacity: var(--cr-disabled-opacity);
        /* Disable pointer events for this whole element, as outer on-tap gets
         * triggered when clicking/tapping anywhere in :host. */
        pointer-events: none;
      }

      :host(:not([disabled])) {
        cursor: pointer;
      }

      #labelWrapper {
        flex: 1;
        margin-inline-start: var(--cr-radio-button-label-spacing, 20px);

        @apply --cr-radio-button-label;
      }

      #label {
        color: inherit;
      }

      .disc-border,
      .disc,
      .disc-wrapper,
      paper-ripple {
        border-radius: 50%;
      }

      .disc-wrapper {
        height: var(--cr-radio-button-size);
        position: relative;
        width: var(--cr-radio-button-size);

        @apply --cr-radio-button-disc;
      }

      .disc-border,
      .disc {
        box-sizing: border-box;
        height: var(--cr-radio-button-size);
        width: var(--cr-radio-button-size);
      }

      .disc-border {
        border: 2px solid var(--cr-radio-button-unchecked-color);
      }

      :host([checked]) .disc-border {
        border-color: var(--cr-radio-button-checked-color);
      }

      .disc {
        background-color: transparent;
        position: absolute;
        top: 0;
        transform: scale(0);
        transition: border-color 200ms, transform 200ms;
      }

      :host([checked]) .disc {
        background-color: var(--cr-radio-button-checked-color);
        transform: scale(0.5);
      }

      paper-ripple {
        --paper-ripple-opacity: 1;  /* Opacity in each color's alpha. */
        color: var(--cr-radio-button-unchecked-ripple-color);
        height: var(--cr-radio-button-ink-size);
        left: calc(-1 * var(--ink-to-circle));
        pointer-events: none;
        position: absolute;
        top: calc(-1 * var(--ink-to-circle));
        transition: color linear 80ms;
        width: var(--cr-radio-button-ink-size);
      }

      :host-context([dir=rtl]) paper-ripple {
        left: auto;
        right: calc(-1 * var(--ink-to-circle));
      }

      :host([checked]) paper-ripple {
        color: var(--cr-radio-button-checked-ripple-color);
      }
    </style>
  </template>
</dom-module>