switches.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <section bs-panel="switch" ng-class="{'disabled': !active}">
  2. <div bs-panel-content>
  3. <div bs-panel-icon>
  4. <div class="switch">
  5. <input id="switch-1"
  6. ng-model="item[prop]"
  7. ng-change="toggle(item)"
  8. class="cmn-toggle cmn-toggle-round"
  9. type="checkbox"
  10. checked="">
  11. <label for="switch-1"></label>
  12. </div>
  13. </div>
  14. <div>
  15. <p bs-text="lede">Css Grid Overlay</p>
  16. <p>Some other content</p>
  17. </div>
  18. </div>
  19. <div bs-panel-content>
  20. <div bs-inputs bs-grid="wide-4 desk-2">
  21. <div bs-grid-item>
  22. <div bs-input="text">
  23. <label for="grid-size" bs-input-label>Grid Size</label>
  24. <input id="grid-size" type="text" size="16px" value="16px" placeholder=""/>
  25. </div>
  26. </div>
  27. <div bs-grid-item>
  28. <div bs-input="text">
  29. <label for="grid-colour" bs-input-label>Grid Colour</label>
  30. <input id="grid-colour" type="text" size="rgba(0, 0, 0, 0.2)" value="rgba(0, 0, 0, 0.2)" placeholder=""/>
  31. </div>
  32. </div>
  33. <div bs-grid-item>
  34. <div bs-input="text">
  35. <label for="grid-selector" bs-input-label>Grid Selector</label>
  36. <input id="grid-selector" type="text" size="body" value="body" placeholder=""/>
  37. </div>
  38. </div>
  39. </div>
  40. <div bs-inputs bs-grid="wide-4 desk-2">
  41. <div bs-grid-item>
  42. <div bs-input="text">
  43. <label for="offset-top" bs-input-label>Offset Top</label>
  44. <input id="offset-top" type="text" size="0" value="0" placeholder=""/>
  45. </div>
  46. </div>
  47. <div bs-grid-item>
  48. <div bs-input="text">
  49. <label for="offset-bottom" bs-input-label>Offset Bottom</label>
  50. <input id="offset-bottom" type="text" size="0" value="0" placeholder=""/>
  51. </div>
  52. </div>
  53. </div>
  54. <div bs-inputs bs-grid="wide-4 desk-2">
  55. <div bs-grid-item>
  56. <div bs-input="inline">
  57. <input type="checkbox" id="vertical-axis" checked>
  58. <label for="vertical-axis" bs-input-label>Vertical Axis</label>
  59. </div>
  60. </div>
  61. <div bs-grid-item>
  62. <div bs-input="inline">
  63. <input type="checkbox" id="horizontal-axis" checked>
  64. <label for="horizontal-axis" bs-input-label>Horizontal Axis</label>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </section>