diff --git a/pages/_components/card-ribbon.html b/pages/_components/card-ribbon.html index e2db82af5..a504d74a0 100644 --- a/pages/_components/card-ribbon.html +++ b/pages/_components/card-ribbon.html @@ -3,4 +3,4 @@ title: Card with ribbon columns: 1 --- -{% include cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %} +{% include_cached cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %} diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index dbb5b2e4a..99a51bf66 100644 --- a/pages/_docs/buttons.md +++ b/pages/_docs/buttons.md @@ -290,13 +290,13 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment. {% example html wrapper=btn-list %} - {% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar + {% include_cached ui/avatar.html person-id="4" %} Avatar - {% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar + {% include_cached ui/avatar.html person-id="5" %} Avatar - {% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar + {% include_cached ui/avatar.html person-id="6" %} Avatar {% endexample %} diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md index b03e391dc..ba61dcca5 100644 --- a/pages/_docs/form-elements.md +++ b/pages/_docs/form-elements.md @@ -174,22 +174,22 @@ bootstrap-link: components/forms/ {% example %}
- {% include ui/input-group.html prepend="@" placeholder="username" %} + {% include ui/form/input-group.html prepend="@" placeholder="username" %}
- {% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %} + {% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
- {% include ui/input-group.html prepend="https://example.com/users/" %} + {% include ui/form/input-group.html prepend="https://example.com/users/" %}
- {% include ui/input-group.html prepend="$" append=".00" %} + {% include ui/form/input-group.html prepend="$" append=".00" %}
{% endexample %} diff --git a/pages/_docs/input-mask.md b/pages/_docs/input-mask.md index b2b5a0e56..27d5f7e36 100644 --- a/pages/_docs/input-mask.md +++ b/pages/_docs/input-mask.md @@ -4,5 +4,5 @@ title: Input mask {% example %} -{% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %} +{% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %} {% endexample %} diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md index ab1b4e68e..502050e37 100644 --- a/pages/_docs/ribbons.md +++ b/pages/_docs/ribbons.md @@ -7,7 +7,7 @@ done: true ### Default markup {% example html columns=1 %} -{% include cards/ribbon.html %} +{% include_cached cards/ribbon.html %} {% endexample %} ### Ribbon position @@ -22,7 +22,7 @@ You can easily change the position of a ribbon by adding a class to the element. You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner. {% example html columns=1 %} -{% include cards/ribbon.html top=true left=true %} +{% include_cached cards/ribbon.html top=true left=true %} {% endexample %} ### Ribbon color @@ -30,7 +30,7 @@ You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbo Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors. {% example html columns=1 %} -{% include cards/ribbon.html color="red" %} +{% include_cached cards/ribbon.html color="red" %} {% endexample %} ### Ribbon text @@ -38,7 +38,7 @@ Customize the ribbon's background color. You can click [here]({% docs_url colors Set your own text in a ribbon. {% example html columns=1 %} -{% include cards/ribbon.html color="green" text="-50%" %} +{% include_cached cards/ribbon.html color="green" text="-50%" %} {% endexample %} ### Ribbon style @@ -46,5 +46,5 @@ Set your own text in a ribbon. Change the style of a ribbon. {% example html columns=1 %} -{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %} +{% include_cached cards/ribbon.html bookmark=true color="orange" text="-50%" %} {% endexample %} diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html index 457bc30a7..1d25ebf49 100644 --- a/pages/_includes/forms/form-elements-2.html +++ b/pages/_includes/forms/form-elements-2.html @@ -1,21 +1,21 @@
- {% include ui/input-group.html prepend="@" placeholder="username" %} + {% include ui/form/input-group.html prepend="@" placeholder="username" %}
- {% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %} + {% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
- {% include ui/input-group.html prepend="https://example.com/users/" %} + {% include ui/form/input-group.html prepend="https://example.com/users/" %}
- {% include ui/input-group.html prepend="$" append=".00" %} + {% include ui/form/input-group.html prepend="$" append=".00" %}
diff --git a/pages/_includes/forms/form-elements-5.html b/pages/_includes/forms/form-elements-5.html index 07a3755ed..25c0f2ebe 100644 --- a/pages/_includes/forms/form-elements-5.html +++ b/pages/_includes/forms/form-elements-5.html @@ -50,11 +50,11 @@
- {% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %} + {% include ui/form/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
- {% include ui/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %} + {% include ui/form/input-mask.html mask="(00) 0000-0000" placeholder="(00) 0000-0000" visible=true %}
diff --git a/pages/_includes/parts/input-icon.html b/pages/_includes/parts/input-icon.html index f04982a35..7c2691760 100644 --- a/pages/_includes/parts/input-icon.html +++ b/pages/_includes/parts/input-icon.html @@ -1,5 +1,5 @@
- {% include ui/input-icon.html class="mb-3" %} - {% include ui/input-icon.html class="mb-3" prepend=true placeholder="Username" %} + {% include ui/form/input-icon.html class="mb-3" %} + {% include ui/form/input-icon.html class="mb-3" prepend=true placeholder="Username" %}
diff --git a/pages/_includes/parts/input-selectgroups.html b/pages/_includes/parts/input-selectgroups.html index f2a87aa1c..802e0f436 100644 --- a/pages/_includes/parts/input-selectgroups.html +++ b/pages/_includes/parts/input-selectgroups.html @@ -1,18 +1,18 @@
- {% include_cached ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %} + {% include_cached ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
- {% include_cached ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %} + {% include_cached ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
- {% include_cached ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %} + {% include_cached ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
- {% include_cached ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %} + {% include_cached ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
diff --git a/pages/_includes/ui/input-group.html b/pages/_includes/ui/form/input-group.html similarity index 100% rename from pages/_includes/ui/input-group.html rename to pages/_includes/ui/form/input-group.html diff --git a/pages/_includes/ui/input-icon.html b/pages/_includes/ui/form/input-icon.html similarity index 100% rename from pages/_includes/ui/input-icon.html rename to pages/_includes/ui/form/input-icon.html diff --git a/pages/_includes/ui/input-mask.html b/pages/_includes/ui/form/input-mask.html similarity index 100% rename from pages/_includes/ui/input-mask.html rename to pages/_includes/ui/form/input-mask.html diff --git a/pages/_includes/ui/input-selectgroup.html b/pages/_includes/ui/form/input-selectgroup.html similarity index 100% rename from pages/_includes/ui/input-selectgroup.html rename to pages/_includes/ui/form/input-selectgroup.html diff --git a/pages/_includes/ui/form/selectize.html b/pages/_includes/ui/form/selectize.html index 374d7ec6d..e933bc134 100644 --- a/pages/_includes/ui/form/selectize.html +++ b/pages/_includes/ui/form/selectize.html @@ -28,52 +28,5 @@ $(document).ready(function(){ $('#select-{{ key }}').selectize({}); }); - - // $('#input-tags').selectize({ - // delimiter: ',', - // persist: false, - // create: function (input) { - // return { - // value: input, - // text: input - // }; - // } - // }); - // - // $('#select-beast').selectize({}); - // - // $('#select-users').selectize({ - // render: { - // option: function (data, escape) { - // return '
' + - // '' + - // '' + escape(data.text) + '' + - // '
'; - // }, - // item: function (data, escape) { - // return '
' + - // '' + - // escape(data.text) + - // '
'; - // } - // } - // }); - // - // $('#select-countries').selectize({ - // render: { - // option: function (data, escape) { - // return '
' + - // '' + - // '' + escape(data.text) + '' + - // '
'; - // }, - // item: function (data, escape) { - // return '
' + - // '' + - // escape(data.text) + - // '
'; - // } - // } - // }); {% endcapture_global %} diff --git a/pages/ribbons.html b/pages/ribbons.html index b4983b9be..99f8e609b 100644 --- a/pages/ribbons.html +++ b/pages/ribbons.html @@ -7,24 +7,24 @@ done: true {% assign col-class = "col-sm-6 col-lg-4 col-xl-3" %}
-
{% include cards/ribbon.html %}
-
{% include cards/ribbon.html top=true %}
-
{% include cards/ribbon.html top=true left=true %}
-
{% include cards/ribbon.html bottom=true %}
-
{% include cards/ribbon.html left=true %}
-
{% include cards/ribbon.html left=true bottom=true %}
-
{% include cards/ribbon.html bookmark=true %}
-
{% include cards/ribbon.html bookmark=true bottom=true %}
-
{% include cards/ribbon.html bookmark=true left=true %}
-
{% include cards/ribbon.html bookmark=true left=true bottom=true %}
-
{% include cards/ribbon.html color="red" %}
-
{% include cards/ribbon.html color="green" bottom=true %}
-
{% include cards/ribbon.html bookmark=true color="teal" left=true %}
-
{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}
-
{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}
-
{% include cards/ribbon.html bookmark=true color="purple" top=true %}
-
{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}
-
{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}
-
{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}
-
{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}
+
{% include_cached cards/ribbon.html %}
+
{% include_cached cards/ribbon.html top=true %}
+
{% include_cached cards/ribbon.html top=true left=true %}
+
{% include_cached cards/ribbon.html bottom=true %}
+
{% include_cached cards/ribbon.html left=true %}
+
{% include_cached cards/ribbon.html left=true bottom=true %}
+
{% include_cached cards/ribbon.html bookmark=true %}
+
{% include_cached cards/ribbon.html bookmark=true bottom=true %}
+
{% include_cached cards/ribbon.html bookmark=true left=true %}
+
{% include_cached cards/ribbon.html bookmark=true left=true bottom=true %}
+
{% include_cached cards/ribbon.html color="red" %}
+
{% include_cached cards/ribbon.html color="green" bottom=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="teal" left=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="pink" left=true top=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="purple" top=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="teal-lt" left=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}
+
{% include_cached cards/ribbon.html bookmark=true color="purple-lt" top=true %}
diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index 0d8552004..6f3bcddbc 100644 --- a/scss/ui/_buttons.scss +++ b/scss/ui/_buttons.scss @@ -21,6 +21,13 @@ vertical-align: sub; } + .avatar { + width: 1.25rem; + height: 1.25rem; + vertical-align: text-top; + margin: 0 .5em 0 -.25em; + } + .icon-right { margin: 0 -.25em 0 .5em; } @@ -36,15 +43,6 @@ font-weight: 400; } -.btn-avatar { - margin: 0 .25rem 0 -.25rem; - - @at-root .btn #{&} { - width: 1.25rem; - height: 1.25rem; - } -} - .btn-pill { padding-right: 1.5em; padding-left: 1.5em;