You are reading a single comment by @barbiani and its replies. Click here to read the full conversation.
  • Here is a new css button class.

    .td_button {
      margin-top: 10px;
      margin-left: auto;
      margin-right: 10px; /* centered */
      display: inline-block;
      padding: 6px 16px;
      font-size: 24px;
      font-weight: bolder;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      outline: none;
      color: [#fff](https://forum.espruino.com/search­/?q=%23fff);
      background-color: [#4CAF50](https://forum.espruino.com/sea­rch/?q=%234CAF50);
      border: none;
      border-radius: 15px;
      box-shadow: 0 4px #888;
      -webkit-transition-duration: 0.2s; /* Safari */
      transition-duration: 0.2s;
      overflow: hidden;
      cursor: pointer;
    }
    .td_button:active {
      background-color: [#4CAF50](https://forum.espruino.com/sea­rch/?q=%234CAF50);
      box-shadow: 0 0px #888;
      transform: translateY(4px);
    }
    .td_button:hover {
      background-color: [#06B](https://forum.espruino.com/search­/?q=%2306B);
    }
    
       /* {label, glyph, value, toggle}*/
        TD.button = function(opts) {
            var pressed = opts.value ? 1 : 0;
            opts.glyph = opts.glyph || "💡";
            var el = setup("button", opts, toElement(`<div align="right" class="td td_btn" pressed="${pressed}"><span>${opts.label}­</span><div class="td_button">${opts.glyph}</div></d­iv>`));
            el.getElementsByClassName("td_button")[0­].onclick = function() {
                togglePressed(el);
            };
            el.setValue = function(v) {
                el.pressed = v ? 1 : 0;
                el.setAttribute("pressed", el.pressed);
            };
            return el;
        };
    

    1 Attachment

    • Clipboard02.jpg
About

Avatar for barbiani @barbiani started