settings.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <div class="settings">
  2. <a href="#" class="btn btn-icon btn-lg settings-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
  3. {% include "ui/icon.html" icon="settings" %}
  4. </a>
  5. <form class="offcanvas offcanvas-end offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
  6. <div class="offcanvas-header">
  7. <h2 class="offcanvas-title">Theme Builder</h2>
  8. <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  9. </div>
  10. <div class="offcanvas-body">
  11. <div class="mb-4">
  12. <label class="form-label">Color scheme</label>
  13. <p class="form-hint">The perfect color mode for your app.</p>
  14. <div class="row g-2">
  15. {% assign schemes = 'light,mixed,colored,dark,transparent' | split: ',' %}
  16. {% for scheme in schemes %}
  17. <div class="col-6">
  18. <label class="form-selectgroup-item">
  19. <input type="radio" name="settings-theme" value="{{ scheme }}" class="form-selectgroup-input" />
  20. <div class="form-selectgroup-label text-center">
  21. <span class="form-selectgroup-check form-selectgroup-check-floated"></span>
  22. <div class="settings-scheme settings-scheme-{{ scheme }}"></div>
  23. <div>{{ scheme | capitalize }}</div>
  24. </div>
  25. </label>
  26. </div>
  27. {% endfor %}
  28. </div>
  29. </div>
  30. <div class="mb-4">
  31. <div class="form-label">Menu position</div>
  32. <p class="form-hint">Toggle the position of the menu.</p>
  33. <div>
  34. {% assign positions = 'top,top-condensed,top-overlap,combo,left,right' | split: ',' %}
  35. {% for position in positions %}
  36. <label class="form-check">
  37. <input class="form-check-input" name="settings-menu-position" value="{{ position }}" type="radio" />
  38. <span class="form-check-label">{{ position | capitalize }}</span>
  39. </label>
  40. {% endfor %}
  41. </div>
  42. </div>
  43. <div class="mb-4">
  44. <div class="form-label">Menu behavior</div>
  45. <p class="form-hint">Change the behavior of the menu.</p>
  46. <div>
  47. {% assign behaviors = 'sticky,fixed,compact' | split: ',' %}
  48. {% for behavior in behaviors %}
  49. <label class="form-check">
  50. <input class="form-check-input" name="settings-menu-behavior" value="{{ behavior }}" type="radio" />
  51. <span class="form-check-label">{{ behavior | capitalize }}</span>
  52. </label>
  53. {% endfor %}
  54. </div>
  55. </div>
  56. <div class="mb-4">
  57. <div class="form-label">Layout</div>
  58. <p class="form-hint">Toggle container layout system.</p>
  59. <div>
  60. {% assign systems = 'boxed,fluid' | split: ',' %}
  61. {% for system in systems %}
  62. <label class="form-check">
  63. <input class="form-check-input" name="settings-container-layout" value="{{ system }}" type="radio" />
  64. <span class="form-check-label">{{ system | capitalize }}</span>
  65. </label>
  66. {% endfor %}
  67. </div>
  68. </div>
  69. </div>
  70. <div class="offcanvas-footer">
  71. <button type="submit" class="btn btn-primary w-100">
  72. {% include "ui/icon.html" icon="settings" %}
  73. Save settings
  74. </button>
  75. </div>
  76. </form>
  77. </div>