<commit_before>/**
 * SwitchProperty
 *
 * A bubble showing a switch.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
'use strict';

const BaseComponent = require('../base-component');

class SwitchProperty extends BaseComponent {
  constructor() {
    const template = document.createElement('template');
    template.innerHTML = `
  <style>
    :host {
      display: inline-block;
      contain: content;
      text-align: center;
      color: white;
      font-size: 1.6rem;
    }

    .webthing-switch-property-container {
      width: 10rem;
      height: 10rem;
      border-radius: 5rem;
      border: 0.2rem solid white;
      background-color: #89b6d6;
      position: relative;
    }

    .webthing-switch-property-contents {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .webthing-switch-property-switch {
      display: none;
    }

    .webthing-switch-property-slider {
      display: block;
      width: 5.5rem;
      height: 2.2rem;
      border-radius: 1.1rem;
      background-color: #5d9bc7;
      transition: 0.1s;
    }

    .webthing-switch-property-slider::after {
      content: "";
      display: block;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background-color: white;
      transform: translate(0.35rem, 0.35rem);
      transition: 0.1s;
    }

    .webthing-switch-property-switch:checked + .webthing-switch-property-slider::after {
      transform: translate(3.65rem, 0.35rem);
    }<commit_msg>Change opacity for read-only OnOffProperty toggles. (#2091)<commit_after>/**
 * SwitchProperty
 *
 * A bubble showing a switch.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
'use strict';

const BaseComponent = require('../base-component');

class SwitchProperty extends BaseComponent {
  constructor() {
    const template = document.createElement('template');
    template.innerHTML = `
  <style>
    :host {
      display: inline-block;
      contain: content;
      text-align: center;
      color: white;
      font-size: 1.6rem;
    }

    .webthing-switch-property-container {
      width: 10rem;
      height: 10rem;
      border-radius: 5rem;
      border: 0.2rem solid white;
      background-color: #89b6d6;
      position: relative;
    }

    .webthing-switch-property-contents {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .webthing-switch-property-switch {
      display: none;
    }

    .webthing-switch-property-slider {
      display: block;
      width: 5.5rem;
      height: 2.2rem;
      border-radius: 1.1rem;
      background-color: #5d9bc7;
      transition: 0.1s;
    }

    .webthing-switch-property-slider::after {
      content: "";
      display: block;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background-color: white;
      transform: translate(0.35rem, 0.35rem);
      transition: 0.1s;
    }

    .webthing-switch-property-switch:checked + .webthing-switch-property-slider::after {
      transform: translate(3.65rem, 0.35rem);
    }

    .webthing-switch-property-switch:disabled + .webthing-switch-property-slider {
      opacity: 0.5;
    }
{'fraction_non_alphanumeric': 0.12599318955732122, 'fraction_numerical': 0.03348467650397276, 'mean_word_length': 2.3829174664107486, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2352291', 'n_tokens_mistral': 1184, 'n_tokens_neox': 1099, 'n_words': 270}