(feat): bs5 offcanvas variables added

themeselection · Jun 22, 2021 · aea1c25 · aea1c25
1 parent b715b59
commit aea1c25
Show file tree

Hide file tree

Showing 2 changed files with 164 additions and 0 deletions.
diff --git a/src/template-builder/contents/variables/offcanvas.html b/src/template-builder/contents/variables/offcanvas.html
@@ -0,0 +1,163 @@
+<div class="col-md-6 col-lg-4 category">
+  <div class="card">
+    <div
+      class="card-header"
+      data-bs-toggle="collapse"
+      href="#categoryOffcanvas"
+      role="button"
+      aria-expanded="false"
+      aria-controls="categoryOffcanvas"
+    >
+      <span class="item-filter-text">Offcanvas</span>
+    </div>
+    <div class="card-body collapse show" id="categoryOffcanvas">
+      <ul class="list-items">
+        <li
+          class="list-item"
+          data-id="offcanvas-padding-y"
+          data-clipboard-text="$offcanvas-padding-y"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-padding-y" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-padding-y</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-padding-y</div>
+          <div class="code-snippet-full">$modal-inner-padding !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-padding-x"
+          data-clipboard-text="$offcanvas-padding-x"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-padding-x" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-padding-x</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-padding-x</div>
+          <div class="code-snippet-full">$modal-inner-padding !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-horizontal-width"
+          data-clipboard-text="$offcanvas-horizontal-width"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-horizontal-width" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-horizontal-width</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-horizontal-width</div>
+          <div class="code-snippet-full">400px !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-vertical-height"
+          data-clipboard-text="$offcanvas-vertical-height"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-vertical-height" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-vertical-height</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-vertical-height</div>
+          <div class="code-snippet-full">30vh !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-transition-duration"
+          data-clipboard-text="$offcanvas-transition-duration"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-transition-duration" class="list-item-text">
+              <span class="item-filter-text"
+                >$offcanvas-transition-duration</span
+              >
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-transition-duration</div>
+          <div class="code-snippet-full">.3s !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-border-color"
+          data-clipboard-text="$offcanvas-border-color"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-border-color" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-border-color</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-border-color</div>
+          <div class="code-snippet-full">$modal-content-border-color !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-border-width"
+          data-clipboard-text="$offcanvas-border-width"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-border-width" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-border-width</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-border-width</div>
+          <div class="code-snippet-full">$modal-content-border-width !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-title-line-height"
+          data-clipboard-text="$offcanvas-title-line-height"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-title-line-height" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-title-line-height</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-title-line-height</div>
+          <div class="code-snippet-full">$modal-title-line-height !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-bg-color"
+          data-clipboard-text="$offcanvas-bg-color"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-bg-color" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-bg-color</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-bg-color</div>
+          <div class="code-snippet-full">$modal-content-bg !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-color"
+          data-clipboard-text="$offcanvas-color"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-color" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-color</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-color</div>
+          <div class="code-snippet-full">$modal-content-color !default;</div>
+        </li>
+        <li
+          class="list-item"
+          data-id="offcanvas-box-shadow"
+          data-clipboard-text="$offcanvas-box-shadow"
+        >
+          <div class="list-item-content">
+            <a href="#offcanvas-box-shadow" class="list-item-text">
+              <span class="item-filter-text">$offcanvas-box-shadow</span>
+            </a>
+          </div>
+          <div class="code-snippet">$offcanvas-box-shadow</div>
+          <div class="code-snippet-full">$modal-content-box-shadow-xs;</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/src/template-builder/pages/variables.pug b/src/template-builder/pages/variables.pug
@@ -43,6 +43,7 @@ block content
   include ../contents/variables/badges.html
   include ../contents/variables/modals.html
   include ../contents/variables/alerts.html
+  include ../contents/variables/offcanvas.html
   include ../contents/variables/progress-bars.html
   include ../contents/variables/list-group.html
   include ../contents/variables/image-thumbnails.html