# Button.yaml
# Built-in layouts for the Button widget.
# This file is part of Reactor. Copyright (c) 2020-2023 Patrick H. Rigney, All Rights Reserved.
---
version: 23023
defaultlayout: default
layouts:
  default:
    content: |
      <div class="ff" style="height: 100%; display: flex; flex-wrap: wrap;">
        <h1 class='widget-title' data-bind='data(&#34;title&#34;);entity.name;#[button]'></h1>
        <h2 class="widget-value">&nbsp;</h2>
      </div>
      <div class="widget-body">
        <i data-bind="<class>{{icon-expr}};data('icon');#bi-bullseye" class="bi"></i>
      </div>
    styles: |
      $ i { font-size: 3rem; }
      $.active i { color: yellow !important; }
      $.update-pending { background-color: var(--color1) !important; color: var(--color1-text); }
      $ h1.widget-title { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; padding-top: 0.33rem; }
      $ h2.widget-value { width: 100%; font-size: 1rem; font-weight: normal; text-align: center; margin-top: auto; padding-bottom: 0.33rem; }
      $ div.widget-body { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
    # active_expression: bool(entity?.primary_value)
    default_action:
      action: button.press
