From 6ca4337ecd7109f8008908ebdade05dae42bdd42 Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 25 Sep 2019 20:55:11 +0200 Subject: [PATCH] new form controls updated to newest bootstrap --- .../{card-comments.html => card-comments.md} | 0 pages/_components/{empty.html => empty.md} | 0 .../{input-colors.html => input-colors.md} | 0 pages/_components/input-image.md | 6 + .../{simple-avatar.html => simple-avatar.md} | 0 .../{simple-card.html => simple-card.md} | 0 ...{widget-revenue.html => widget-revenue.md} | 0 .../{widget-sales.html => widget-sales.md} | 0 pages/_data/countries.yml | 229 ++++++++++++++ pages/_docs/form-elements.md | 151 ++------- pages/_includes/forms/form-elements-1.html | 12 +- pages/_includes/forms/form-elements-2.html | 100 +++--- pages/_includes/forms/form-elements-3.html | 168 ++-------- pages/_includes/forms/form-elements-5.html | 50 +++ pages/_includes/forms/form-elements-6.html | 10 +- .../parts/input-checkboxes-inline.html | 8 + pages/_includes/parts/input-checkboxes.html | 8 + pages/_includes/parts/input-colorpicker.html | 4 + pages/_includes/parts/input-datalist.html | 9 + pages/_includes/parts/input-file.html | 10 + pages/_includes/parts/input-image.html | 6 +- .../_includes/parts/input-radios-inline.html | 8 + pages/_includes/parts/input-radios.html | 9 + pages/_includes/parts/input-range.html | 4 + pages/_includes/parts/input-selectgroups.html | 18 ++ pages/_includes/parts/input-sizes.html | 6 + .../_includes/parts/input-toggle-single.html | 4 + pages/_includes/parts/input-toggle.html | 2 +- pages/_includes/parts/select.html | 8 + pages/_includes/ui/form/check.html | 5 +- pages/_includes/ui/input-selectgroup.html | 4 +- scss/_variables.scss | 5 +- scss/tabler.scss | 5 +- scss/ui/_inputs.custom.scss | 289 ------------------ scss/ui/forms/_input.colorinput.scss | 51 ++++ scss/ui/forms/_input.custom.scss | 37 +++ scss/ui/forms/_input.imagecheck.scss | 95 ++++++ scss/ui/forms/_input.selectgroup.scss | 103 +++++++ 38 files changed, 807 insertions(+), 617 deletions(-) rename pages/_components/{card-comments.html => card-comments.md} (100%) rename pages/_components/{empty.html => empty.md} (100%) rename pages/_components/{input-colors.html => input-colors.md} (100%) create mode 100644 pages/_components/input-image.md rename pages/_components/{simple-avatar.html => simple-avatar.md} (100%) rename pages/_components/{simple-card.html => simple-card.md} (100%) rename pages/_components/{widget-revenue.html => widget-revenue.md} (100%) rename pages/_components/{widget-sales.html => widget-sales.md} (100%) create mode 100644 pages/_data/countries.yml create mode 100644 pages/_includes/parts/input-checkboxes-inline.html create mode 100644 pages/_includes/parts/input-checkboxes.html create mode 100644 pages/_includes/parts/input-colorpicker.html create mode 100644 pages/_includes/parts/input-datalist.html create mode 100644 pages/_includes/parts/input-file.html create mode 100644 pages/_includes/parts/input-radios-inline.html create mode 100644 pages/_includes/parts/input-radios.html create mode 100644 pages/_includes/parts/input-range.html create mode 100644 pages/_includes/parts/input-selectgroups.html create mode 100644 pages/_includes/parts/input-sizes.html create mode 100644 pages/_includes/parts/input-toggle-single.html create mode 100644 pages/_includes/parts/select.html delete mode 100644 scss/ui/_inputs.custom.scss create mode 100644 scss/ui/forms/_input.colorinput.scss create mode 100644 scss/ui/forms/_input.custom.scss create mode 100644 scss/ui/forms/_input.imagecheck.scss create mode 100644 scss/ui/forms/_input.selectgroup.scss diff --git a/pages/_components/card-comments.html b/pages/_components/card-comments.md similarity index 100% rename from pages/_components/card-comments.html rename to pages/_components/card-comments.md diff --git a/pages/_components/empty.html b/pages/_components/empty.md similarity index 100% rename from pages/_components/empty.html rename to pages/_components/empty.md diff --git a/pages/_components/input-colors.html b/pages/_components/input-colors.md similarity index 100% rename from pages/_components/input-colors.html rename to pages/_components/input-colors.md diff --git a/pages/_components/input-image.md b/pages/_components/input-image.md new file mode 100644 index 000000000..2bfc2fee9 --- /dev/null +++ b/pages/_components/input-image.md @@ -0,0 +1,6 @@ +--- +title: Image input +columns: 2 +--- + +{% include parts/input-image.html %} diff --git a/pages/_components/simple-avatar.html b/pages/_components/simple-avatar.md similarity index 100% rename from pages/_components/simple-avatar.html rename to pages/_components/simple-avatar.md diff --git a/pages/_components/simple-card.html b/pages/_components/simple-card.md similarity index 100% rename from pages/_components/simple-card.html rename to pages/_components/simple-card.md diff --git a/pages/_components/widget-revenue.html b/pages/_components/widget-revenue.md similarity index 100% rename from pages/_components/widget-revenue.html rename to pages/_components/widget-revenue.md diff --git a/pages/_components/widget-sales.html b/pages/_components/widget-sales.md similarity index 100% rename from pages/_components/widget-sales.html rename to pages/_components/widget-sales.md diff --git a/pages/_data/countries.yml b/pages/_data/countries.yml new file mode 100644 index 000000000..6dc1dfbe9 --- /dev/null +++ b/pages/_data/countries.yml @@ -0,0 +1,229 @@ +- Aruba +- Afghanistan +- Angola +- Anguilla +- Albania +- Andorra +- United Arab Emirates +- Argentina +- Armenia +- American Samoa +- Antarctica +- Antigua and Barbuda +- Australia +- Austria +- Azerbaijan +- Burundi +- Belgium +- Benin +- Burkina Faso +- Bangladesh +- Bulgaria +- Bahrain +- Bahamas +- Bosnia and Herzegovina +- Saint Barthélemy +- Belarus +- Belize +- Bermuda +- Bolivia +- Brazil +- Barbados +- Brunei +- Bhutan +- Botswana +- Central African Republic +- Canada +- Switzerland +- Chile +- China +- Cote d'Ivoire +- Cameroon +- Democratic Republic of Congo +- Congo +- Colombia +- Comoros +- Cape Verde +- Costa Rica +- Cuba +- Christmas Island +- Cayman Islands +- Cyprus +- Czech Republic +- Germany +- Djibouti +- Dominica +- Denmark +- Dominican Republic +- Algeria +- Ecuador +- Egypt +- Eritrea +- Spain +- Estonia +- Ethiopia +- Finland +- Fiji +- Falkland Islands +- France +- Faeroe Islands +- Micronesia (country) +- Gabon +- United Kingdom +- Georgia +- Ghana +- Gibraltar +- Guinea +- Gambia +- Guinea-Bissau +- Equatorial Guinea +- Greece +- Grenada +- Greenland +- Guatemala +- French Guiana +- Guam +- Guyana +- Hong Kong +- Honduras +- Croatia +- Haiti +- Hungary +- Indonesia +- Isle of Man +- India +- Ireland +- Iran +- Iraq +- Iceland +- Israel +- Italy +- Jamaica +- Jersey +- Jordan +- Japan +- Kazakhstan +- Kenya +- Kyrgyzstan +- Cambodia +- Kiribati +- Saint Kitts and Nevis +- South Korea +- Kuwait +- Laos +- Lebanon +- Liberia +- Libya +- Saint Lucia +- Liechtenstein +- Sri Lanka +- Lesotho +- Lithuania +- Luxembourg +- Latvia +- Macao +- Morocco +- Monaco +- Moldova +- Madagascar +- Maldives +- Mexico +- Marshall Islands +- Macedonia +- Mali +- Malta +- Myanmar +- Montenegro +- Mongolia +- Northern Mariana Islands +- Mozambique +- Mauritania +- Martinique +- Mauritius +- Malawi +- Malaysia +- Mayotte +- Namibia +- New Caledonia +- Niger +- Norfolk Island +- Nigeria +- Nicaragua +- Niue +- Netherlands +- Norway +- Nepal +- Nauru +- New Zealand +- Oman +- Pakistan +- Panama +- Pitcairn +- Peru +- Philippines +- Palau +- Papua New Guinea +- Poland +- Puerto Rico +- North Korea +- Portugal +- Paraguay +- Palestine +- French Polynesia +- Qatar +- Reunion +- Romania +- Russia +- Rwanda +- Saudi Arabia +- Sudan +- Senegal +- Singapore +- Solomon Islands +- Sierra Leone +- El Salvador +- San Marino +- Somalia +- Saint Pierre and Miquelon +- Serbia +- South Sudan +- Sao Tome and Principe +- Suriname +- Slovakia +- Slovenia +- Sweden +- Swaziland +- Seychelles +- Syria +- Turks and Caicos Islands +- Chad +- Togo +- Thailand +- Tajikistan +- Tokelau +- Turkmenistan +- Timor +- Tonga +- Trinidad and Tobago +- Tunisia +- Turkey +- Tuvalu +- Taiwan +- Tanzania +- Uganda +- Ukraine +- Uruguay +- United States +- Uzbekistan +- Vatican +- Saint Vincent and the Grenadines +- Venezuela +- British Virgin Islands +- United States Virgin Islands +- Vietnam +- Vanuatu +- Samoa +- Yemen +- South Africa +- Zambia +- Zimbabwe diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md index 4e6214806..86786c424 100644 --- a/pages/_docs/form-elements.md +++ b/pages/_docs/form-elements.md @@ -52,6 +52,11 @@ title: Form Elements {% endexample %} +### Input size + +{% include parts/input-sizes.html %} + + ### Select {% example %}
@@ -82,150 +87,42 @@ title: Form Elements {% include parts/input-color.html %} {% endexample %} -### Custom Checkbox examples +### Input color picker {% example %} -
- - {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %} -
+{% include parts/input-colorpicker.html %} +{% endexample %} -
- - {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %} -
+### Datalists +{% example %} +{% include parts/input-datalist.html %} +{% endexample %} -
- - {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %} -
- -
- - {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %} -
- -
- - {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %} -
+### Custom selectboxes +{% example %} +{% include parts/input-selectgroups.html %} {% endexample %} ### Toggle switches {% example %} {% include parts/input-toggle.html %} - -
-
Toggle switch single
- -
+{% include parts/input-toggle-single.html %} {% endexample %} ### Radios {% example %} -
-
Radios
-
- - - - -
-
-
-
Inline Radios
-
- - - -
-
+{% include parts/input-radios.html %} +{% include parts/input-radios-inline.html %} {% endexample %} ### Checkboxes {% example %} -
-
Checkboxes
-
- - - - -
-
-
-
Inline Checkboxes
-
- - - -
-
+{% include parts/input-checkboxes.html %} +{% include parts/input-checkboxes-inline.html %} {% endexample%} -### Ratios +### Range input {% example %} -
- - -
+{% include parts/input-range.html %} {% endexample %} ### Sample form @@ -300,8 +197,8 @@ title: Form Elements
- - + + {% endexample %} diff --git a/pages/_includes/forms/form-elements-1.html b/pages/_includes/forms/form-elements-1.html index bf205e7ba..c254b10ea 100644 --- a/pages/_includes/forms/form-elements-1.html +++ b/pages/_includes/forms/form-elements-1.html @@ -6,10 +6,13 @@ +
+ + +
- +
@@ -21,9 +24,8 @@
-{% include parts/input-image.html %} - -{% include parts/input-color.html %} +{% include parts/select.html %} +{% include parts/select.html label="Select multiple" multiple=true %}
diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html index 6d5e18947..d83500471 100644 --- a/pages/_includes/forms/form-elements-2.html +++ b/pages/_includes/forms/form-elements-2.html @@ -1,55 +1,79 @@ + +
- - + + {% include ui/input-group.html prepend="@" placeholder="username" %}
- - - - + + {% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
- - -
Invalid feedback
- - + + {% include ui/input-group.html prepend="https://example.com/users/" %}
- - +
+
+ +
+ + +
+ +
+ +
+
- - -
-
- - {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %} -
-
- - {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %} -
-
- - {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %} + +
- - {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %} + +
- -
- - {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %} -
- diff --git a/pages/_includes/forms/form-elements-3.html b/pages/_includes/forms/form-elements-3.html index 4b94a41cc..75cb92369 100644 --- a/pages/_includes/forms/form-elements-3.html +++ b/pages/_includes/forms/form-elements-3.html @@ -1,162 +1,36 @@ -
-
Radios
-
- {% include ui/form/check.html title="Option 1" type="radio" %} - {% include ui/form/check.html title="Option 2" type="radio" %} - {% include ui/form/check.html title="Option 3" type="radio" %} -
-
+{% include parts/input-image.html %} +{% include parts/input-color.html %} +{% include parts/input-colorpicker.html %} -
-
Inline Radios
-
- {% include ui/form/check.html title="Option 1" type="radio" inline=true %} - {% include ui/form/check.html title="Option 2" type="radio" inline=true %} - {% include ui/form/check.html title="Option 3" type="radio" inline=true %} -
-
-
-
Checkboxes
-
- {% include ui/form/check.html type="checkbox" %} - {% include ui/form/check.html type="checkbox" disabled=true %} - {% include ui/form/check.html type="checkbox" checked=true %} -
-
-
-
Inline Checkboxes
-
- {% include ui/form/check.html inline=true title="Option 1" type="checkbox" %} - {% include ui/form/check.html inline=true title="Option 2" type="checkbox" disabled=true %} - {% include ui/form/check.html inline=true title="Option 3" type="checkbox" checked=true %} -
-
-{% include parts/input-toggle.html %} - -
-
Toggle switch single
- {% include ui/form/check.html title="I agree with terms and conditions" switch=true %} -
-
-
Bootstrap's Custom File Input
-
- - -
-
- -
- -
-
- -
-
- -
-
- -
-
-
- - {% include ui/input-group.html prepend="@" placeholder="username" %} + + + +
- - {% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %} + + +
Invalid feedback
+ +
- - {% include ui/input-group.html prepend="https://example.com/users/" %} -
- -
- - {% include ui/input-group.html prepend="$" append=".00" %} -
- -
- -
-
- -
- Action - Another action - Something else here - - Separated link -
-
- -
-
- -
- - -
- -
- - +
-
- - + + {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
-
- - -
+ + diff --git a/pages/_includes/forms/form-elements-5.html b/pages/_includes/forms/form-elements-5.html index 250868982..07a3755ed 100644 --- a/pages/_includes/forms/form-elements-5.html +++ b/pages/_includes/forms/form-elements-5.html @@ -1,3 +1,53 @@ +{% include parts/input-radios.html %} +{% include parts/input-radios-inline.html %} + +{% include parts/input-checkboxes.html %} +{% include parts/input-checkboxes-inline.html %} + +{% include parts/input-toggle.html %} +{% include parts/input-toggle-single.html %} + +{% include parts/input-file.html %} + + +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
{% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %} diff --git a/pages/_includes/forms/form-elements-6.html b/pages/_includes/forms/form-elements-6.html index 1e8b31496..c68aef6d7 100644 --- a/pages/_includes/forms/form-elements-6.html +++ b/pages/_includes/forms/form-elements-6.html @@ -1 +1,9 @@ -6 +{% include parts/input-selectgroups.html %} +{% include parts/input-datalist.html %} +{% include parts/input-sizes.html %} +{% include parts/input-range.html %} + +
+ + {% include ui/progress.html %} +
diff --git a/pages/_includes/parts/input-checkboxes-inline.html b/pages/_includes/parts/input-checkboxes-inline.html new file mode 100644 index 000000000..e97e6d1ae --- /dev/null +++ b/pages/_includes/parts/input-checkboxes-inline.html @@ -0,0 +1,8 @@ +
+
Inline Checkboxes
+
+ {% include ui/form/check.html inline=true title="Option 1" type="checkbox" %} + {% include ui/form/check.html inline=true title="Option 2" type="checkbox" disabled=true %} + {% include ui/form/check.html inline=true title="Option 3" type="checkbox" checked=true %} +
+
diff --git a/pages/_includes/parts/input-checkboxes.html b/pages/_includes/parts/input-checkboxes.html new file mode 100644 index 000000000..d3f030e9a --- /dev/null +++ b/pages/_includes/parts/input-checkboxes.html @@ -0,0 +1,8 @@ +
+
Checkboxes
+
+ {% include ui/form/check.html type="checkbox" %} + {% include ui/form/check.html type="checkbox" disabled=true %} + {% include ui/form/check.html type="checkbox" checked=true %} +
+
diff --git a/pages/_includes/parts/input-colorpicker.html b/pages/_includes/parts/input-colorpicker.html new file mode 100644 index 000000000..7fd77bd5b --- /dev/null +++ b/pages/_includes/parts/input-colorpicker.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/pages/_includes/parts/input-datalist.html b/pages/_includes/parts/input-datalist.html new file mode 100644 index 000000000..b5631727e --- /dev/null +++ b/pages/_includes/parts/input-datalist.html @@ -0,0 +1,9 @@ +
+ + + + {% for country in site.data.countries %} + +
diff --git a/pages/_includes/parts/input-file.html b/pages/_includes/parts/input-file.html new file mode 100644 index 000000000..9aa7d85a5 --- /dev/null +++ b/pages/_includes/parts/input-file.html @@ -0,0 +1,10 @@ +
+
{{ include.label | default: 'Custom File Input' }}
+
+ + +
+
diff --git a/pages/_includes/parts/input-image.html b/pages/_includes/parts/input-image.html index f91500287..2f1973379 100644 --- a/pages/_includes/parts/input-image.html +++ b/pages/_includes/parts/input-image.html @@ -1,14 +1,14 @@ {% assign limit = include.limit | default: 6 %} -
+
{% for photo in site.data.photos limit: limit offset: 30 %}
{% endfor %} diff --git a/pages/_includes/parts/input-radios-inline.html b/pages/_includes/parts/input-radios-inline.html new file mode 100644 index 000000000..d8acb608e --- /dev/null +++ b/pages/_includes/parts/input-radios-inline.html @@ -0,0 +1,8 @@ +
+
Inline Radios
+
+ {% include ui/form/check.html title="Option 1" type="radio" inline=true checked=true %} + {% include ui/form/check.html title="Option 2" type="radio" inline=true %} + {% include ui/form/check.html title="Option 3" type="radio" inline=true disabled=true %} +
+
diff --git a/pages/_includes/parts/input-radios.html b/pages/_includes/parts/input-radios.html new file mode 100644 index 000000000..8c32407ac --- /dev/null +++ b/pages/_includes/parts/input-radios.html @@ -0,0 +1,9 @@ +
+
Radios
+
+ {% include ui/form/check.html title="Option 1" type="radio" checked=true %} + {% include ui/form/check.html title="Option 2" type="radio" %} + {% include ui/form/check.html title="Option 3" type="radio" disabled=true %} + {% include ui/form/check.html title="Option 4" type="radio" disabled=true checked=true %} +
+
diff --git a/pages/_includes/parts/input-range.html b/pages/_includes/parts/input-range.html new file mode 100644 index 000000000..2c4040783 --- /dev/null +++ b/pages/_includes/parts/input-range.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/pages/_includes/parts/input-selectgroups.html b/pages/_includes/parts/input-selectgroups.html new file mode 100644 index 000000000..575d7b2a4 --- /dev/null +++ b/pages/_includes/parts/input-selectgroups.html @@ -0,0 +1,18 @@ +
+ + {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %} +
+
+ + {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %} +
+ +
+ + {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %} +
+ +
+ + {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %} +
diff --git a/pages/_includes/parts/input-sizes.html b/pages/_includes/parts/input-sizes.html new file mode 100644 index 000000000..4509c2dea --- /dev/null +++ b/pages/_includes/parts/input-sizes.html @@ -0,0 +1,6 @@ +
+ + + + +
diff --git a/pages/_includes/parts/input-toggle-single.html b/pages/_includes/parts/input-toggle-single.html new file mode 100644 index 000000000..054277dd7 --- /dev/null +++ b/pages/_includes/parts/input-toggle-single.html @@ -0,0 +1,4 @@ +
+
Single switch
+ {% include ui/form/check.html switch=true title="I agree with terms and conditions" %} +
diff --git a/pages/_includes/parts/input-toggle.html b/pages/_includes/parts/input-toggle.html index 9950b5594..49f823462 100644 --- a/pages/_includes/parts/input-toggle.html +++ b/pages/_includes/parts/input-toggle.html @@ -1,4 +1,4 @@ -
+
Toggle switches
{% include ui/form/check.html switch=true title="Option 1" checked=true %} {% include ui/form/check.html switch=true title="Option 2" %} diff --git a/pages/_includes/parts/select.html b/pages/_includes/parts/select.html new file mode 100644 index 000000000..6be4d7fae --- /dev/null +++ b/pages/_includes/parts/select.html @@ -0,0 +1,8 @@ +
+
{{ include.label | default: 'Select' }}
+ +
diff --git a/pages/_includes/ui/form/check.html b/pages/_includes/ui/form/check.html index 37e3728b5..e384c294b 100644 --- a/pages/_includes/ui/form/check.html +++ b/pages/_includes/ui/form/check.html @@ -3,6 +3,7 @@ {% assign disabled = include.disabled | default: false %} {% assign switch = include.switch | default: false %} {% assign title = include.title | default: false %} +{% assign is_empty = include['empty'] | default: false %} {% unless title %} {% assign title = '' %} {% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %} @@ -12,6 +13,6 @@ {% assign title = title | append: ' input' | lstrip | capitalize %} {% endunless %} diff --git a/pages/_includes/ui/input-selectgroup.html b/pages/_includes/ui/input-selectgroup.html index ece36f4a8..c64a80fbf 100644 --- a/pages/_includes/ui/input-selectgroup.html +++ b/pages/_includes/ui/input-selectgroup.html @@ -1,12 +1,12 @@ {% assign values = include.values | default: "One,Two,Three" | split: ',' %} -{% assign default = include.default | default: '' %} +{% assign default = include.default | default: values[0] %} {% assign type = include.type | default: "checkbox" %} {% assign name = include.name | default: "name" %}
{% for value in values %} {% endfor %} diff --git a/scss/_variables.scss b/scss/_variables.scss index 8ff750bf1..64e1494ab 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -290,10 +290,13 @@ $form-check-input-width: 1em; $form-check-input-border: 1px solid $border-color; $form-check-input-border-radius: $border-radius; $form-check-input-checked-bg-size: .75rem; -$form-check-input-checked-border-color: currentColor; $form-range-track-height: .25rem; +$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; + + $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; diff --git a/scss/tabler.scss b/scss/tabler.scss index cdadd67dd..346054698 100644 --- a/scss/tabler.scss +++ b/scss/tabler.scss @@ -28,7 +28,10 @@ @import "ui/highlight"; @import "ui/icons"; @import "ui/inputs"; -@import "ui/inputs.custom"; +@import "ui/forms/input.colorinput"; +@import "ui/forms/input.imagecheck"; +@import "ui/forms/input.selectgroup"; +@import "ui/forms/input.custom"; @import "ui/lists"; @import "ui/loaders"; @import "ui/login"; diff --git a/scss/ui/_inputs.custom.scss b/scss/ui/_inputs.custom.scss deleted file mode 100644 index f7d7aa606..000000000 --- a/scss/ui/_inputs.custom.scss +++ /dev/null @@ -1,289 +0,0 @@ -.custom-switch, -.custom-radio, -.custom-checkbox { - margin-bottom: 0; - user-select: none; - - &:not(:first-child) { - margin-top: .25rem; - } -} - -/** -Icon input - */ -.input-icon { - position: relative; - - .form-control:not(:last-child) { - padding-right: 2.5rem; - } - - .form-control:not(:first-child) { - padding-left: 2.5rem; - } -} - -.input-icon-addon { - position: absolute; - top: 0; - bottom: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - min-width: 2.5rem; - color: $text-muted; - pointer-events: none; - - svg { - width: 1rem; - height: 1rem; - } - - &:last-child { - right: 0; - left: auto; - } -} - - -/* -Color Input - */ -.colorinput { - position: relative; - margin: 0; - cursor: pointer; -} - -.colorinput-input { - position: absolute; - z-index: -1; - opacity: 0; -} - -.colorinput-color { - display: inline-block; - width: 1.75rem; - height: 1.75rem; - color: #fff; - border: 1px solid $border-color; - border-radius: 3px; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); - - &::before { - position: absolute; - top: .25rem; - left: .25rem; - width: 1.25rem; - height: 1.25rem; - content: ""; - background: $form-switch-checked-bg-image no-repeat center center/50% 50%; - opacity: 0; - transition: .3s opacity; - - .colorinput-input:checked ~ & { - opacity: 1; - } - } - - .colorinput-input:focus ~ & { - border-color: $primary; - box-shadow: $input-btn-focus-box-shadow; - } -} - -/* -Selectgroup - */ -.selectgroup { - display: inline-flex; -} - -.selectgroup-vertical { - flex-direction: column; -} - -.selectgroup-item { - position: relative; - flex-grow: 1; -} - -.selectgroup:not(.selectgroup-vertical) > .selectgroup-item { - & + .selectgroup-item { - margin-left: -1px; - } - - &:not(:first-child) .selectgroup-button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - &:not(:last-child) .selectgroup-button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } -} - -.selectgroup-vertical > .selectgroup-item { - &:not(:last-child) { - margin-bottom: 0; - } - - & + .selectgroup-item { - margin-top: -1px; - margin-left: 0; - } - - &:not(:first-child) .selectgroup-button { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - - &:not(:last-child) .selectgroup-button { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } -} - -.selectgroup-input { - position: absolute; - top: 0; - left: 0; - z-index: -1; - opacity: 0; -} - -.selectgroup-button { - position: relative; - display: block; - min-width: $input-height; - padding: $input-btn-padding-y 1rem; - font-size: $font-size-base; - line-height: $input-line-height; - color: $text-muted; - text-align: center; - cursor: pointer; - user-select: none; - border: 1px solid $input-border-color; - border-radius: 3px; - background: rgba(#fff, .064); -} - -.selectgroup-input:checked + .selectgroup-button { - z-index: 1; - color: $primary; - background: rgba($primary, .08); - border-color: $primary; -} - -.selectgroup-input:focus + .selectgroup-button { - z-index: 2; - color: $primary; - border-color: $primary; - box-shadow: $input-btn-focus-box-shadow; -} - -.selectgroup-pills { - flex-wrap: wrap; - align-items: flex-start; - - .selectgroup-item { - flex-grow: 0; - } - - .selectgroup-button { - border-radius: 50px; - } -} - - -/** -Image check - */ -.imagecheck { - position: relative; - margin: 0; - cursor: pointer; -} - -.imagecheck-input { - position: absolute; - z-index: -1; - opacity: 0; -} - -.imagecheck-figure { - position: relative; - margin: 0; - border: 1px solid $border-color; - border-radius: 3px; - - .imagecheck-input:focus ~ & { - border-color: $primary; - box-shadow: $input-btn-focus-box-shadow; - } - - .imagecheck-input:checked ~ & { - border-color: $border-color; - } - - &::before { - position: absolute; - top: .25rem; - left: .25rem; - z-index: 1; - display: block; - width: 1rem; - height: 1rem; - color: #fff; - pointer-events: none; - content: ""; - user-select: none; - background: $primary $form-switch-checked-bg-image no-repeat center center/50% 50%; - border-radius: 3px; - opacity: 0; - transition: .3s opacity; - - .imagecheck-input:checked ~ & { - opacity: 1; - } - } -} - -.imagecheck-image { - max-width: 100%; - opacity: .64; - transition: .3s opacity; - - &:first-child { - border-top-left-radius: 2px; - border-top-right-radius: 2px; - } - - &:last-child { - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; - } - - .imagecheck:hover &, - .imagecheck-input:focus ~ .imagecheck-figure &, - .imagecheck-input:checked ~ .imagecheck-figure & { - opacity: 1; - } -} - -.imagecheck-caption { - padding: .25rem; - font-size: $font-size-sm; - color: $text-muted; - text-align: center; - transition: .3s color; - - .imagecheck:hover &, - .imagecheck-input:focus ~ .imagecheck-figure &, - .imagecheck-input:checked ~ .imagecheck-figure & { - color: $body-color; - } -} diff --git a/scss/ui/forms/_input.colorinput.scss b/scss/ui/forms/_input.colorinput.scss new file mode 100644 index 000000000..56af9fd34 --- /dev/null +++ b/scss/ui/forms/_input.colorinput.scss @@ -0,0 +1,51 @@ +/* +Color Input + */ +.colorinput { + position: relative; + margin: 0; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.colorinput-input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.colorinput-color { + display: block; + width: 1.5rem; + height: 1.5rem; + color: #fff; + border: 1px solid $border-color; + border-radius: 3px; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); + + &::before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ""; + background: no-repeat center center/$form-check-input-checked-bg-size; + background-image: escape-svg($form-check-input-checked-bg-image); + opacity: 0; + transition: .3s opacity; + + .colorinput-input:checked ~ & { + opacity: 1; + } + } + + .colorinput-input:focus ~ & { + border-color: $primary; + box-shadow: $input-btn-focus-box-shadow; + } +} + + + diff --git a/scss/ui/forms/_input.custom.scss b/scss/ui/forms/_input.custom.scss new file mode 100644 index 000000000..f09c2eaaf --- /dev/null +++ b/scss/ui/forms/_input.custom.scss @@ -0,0 +1,37 @@ +/** +Icon input + */ +.input-icon { + position: relative; + + .form-control:not(:last-child) { + padding-right: 2.5rem; + } + + .form-control:not(:first-child) { + padding-left: 2.5rem; + } +} + +.input-icon-addon { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + min-width: 2.5rem; + color: $text-muted; + pointer-events: none; + + svg { + width: 1rem; + height: 1rem; + } + + &:last-child { + right: 0; + left: auto; + } +} diff --git a/scss/ui/forms/_input.imagecheck.scss b/scss/ui/forms/_input.imagecheck.scss new file mode 100644 index 000000000..bd11ffe1a --- /dev/null +++ b/scss/ui/forms/_input.imagecheck.scss @@ -0,0 +1,95 @@ +/** +Image check + */ +.imagecheck { + position: relative; + margin: 0; + cursor: pointer; +} + +.imagecheck-input { + position: absolute; + z-index: -1; + opacity: 0; +} + +.imagecheck-figure { + position: relative; + margin: 0; + border: 1px solid $border-color; + border-radius: 3px; + display: flex; + user-select: none; + + .imagecheck-input:focus ~ & { + border-color: $primary; + box-shadow: $input-btn-focus-box-shadow; + } + + .imagecheck-input:checked ~ & { + border-color: $border-color; + } + + &::before { + position: absolute; + top: .25rem; + left: .25rem; + z-index: 1; + display: block; + width: $form-check-input-width; + height: $form-check-input-width; + color: #fff; + pointer-events: none; + content: ""; + background: $white; + border: 1px solid $border-color; + user-select: none; + border-radius: 3px; + transition: .3s opacity; + + .imagecheck-input:checked ~ & { + background-color: $form-check-input-checked-bg-color; + background-repeat: $form-check-input-checked-bg-repeat; + background-position: $form-check-input-checked-bg-position; + background-size: $form-check-input-checked-bg-size; + background-image: escape-svg($form-check-input-checked-bg-image); + border-color: $form-check-input-checked-border-color; + } + } +} + +.imagecheck-image { + max-width: 100%; + opacity: .64; + transition: .3s opacity; + + &:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + &:last-child { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; + } + + .imagecheck:hover &, + .imagecheck-input:focus ~ .imagecheck-figure &, + .imagecheck-input:checked ~ .imagecheck-figure & { + opacity: 1; + } +} + +.imagecheck-caption { + padding: .25rem; + font-size: $font-size-sm; + color: $text-muted; + text-align: center; + transition: .3s color; + + .imagecheck:hover &, + .imagecheck-input:focus ~ .imagecheck-figure &, + .imagecheck-input:checked ~ .imagecheck-figure & { + color: $body-color; + } +} diff --git a/scss/ui/forms/_input.selectgroup.scss b/scss/ui/forms/_input.selectgroup.scss new file mode 100644 index 000000000..1c5f1d832 --- /dev/null +++ b/scss/ui/forms/_input.selectgroup.scss @@ -0,0 +1,103 @@ +/* +Selectgroup + */ +.selectgroup { + display: inline-flex; +} + +.selectgroup-vertical { + flex-direction: column; +} + +.selectgroup-item { + position: relative; + flex-grow: 1; +} + +.selectgroup:not(.selectgroup-vertical) > .selectgroup-item { + & + .selectgroup-item { + margin-left: -1px; + } + + &:not(:first-child) .selectgroup-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &:not(:last-child) .selectgroup-button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +.selectgroup-vertical > .selectgroup-item { + &:not(:last-child) { + margin-bottom: 0; + } + + & + .selectgroup-item { + margin-top: -1px; + margin-left: 0; + } + + &:not(:first-child) .selectgroup-button { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + &:not(:last-child) .selectgroup-button { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} + +.selectgroup-input { + position: absolute; + top: 0; + left: 0; + z-index: -1; + opacity: 0; +} + +.selectgroup-button { + position: relative; + display: block; + min-width: $input-height; + padding: $input-btn-padding-y 1rem; + font-size: $font-size-base; + line-height: $input-line-height; + color: $text-muted; + text-align: center; + cursor: pointer; + user-select: none; + border: 1px solid $input-border-color; + border-radius: 3px; + background: rgba(#fff, .064); +} + +.selectgroup-input:checked + .selectgroup-button { + z-index: 1; + color: $primary; + background: rgba($primary, .08); + border-color: $primary; +} + +.selectgroup-input:focus + .selectgroup-button { + z-index: 2; + color: $primary; + border-color: $primary; + box-shadow: $input-btn-focus-box-shadow; +} + +.selectgroup-pills { + flex-wrap: wrap; + align-items: flex-start; + + .selectgroup-item { + flex-grow: 0; + } + + .selectgroup-button { + border-radius: 50px; + } +}