Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

update form controls to newest bootstrap

Browse Source
This commit is contained in:
codecalm
2019-07-29 23:38:59 +02:00
parent 47ea9b24f8
commit 4f954f6996
21 changed files with 143 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
pages/_docs/form-elements.md
View File

@@ -5,22 +5,22 @@ title: Form Elements
### Classic Input ### Classic Input
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Static</label> <label class="form-label">Static</label>
<div class="form-control-plaintext">Username</div> <div class="form-control-plaintext">Username</div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Text</label> <label class="form-label">Text</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Text.."> <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Disabled</label> <label class="form-label">Disabled</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, she turned me into a newt." disabled> value="Well, she turned me into a newt." disabled>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Readonly</label> <label class="form-label">Readonly</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, how'd you become king, then?" readonly> value="Well, how'd you become king, then?" readonly>
@@ -29,12 +29,12 @@ title: Form Elements
### Password and validation ### Password and validation
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Password</label> <label class="form-label">Password</label>
<input type="password" class="form-control" name="example-password-input" placeholder="Password.."> <input type="password" class="form-control" name="example-password-input" placeholder="Password..">
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Valid State</label> <label class="form-label">Valid State</label>
<input type="text" class="form-control is-valid" name="example-text-input-valid" <input type="text" class="form-control is-valid" name="example-text-input-valid"
placeholder="Valid State.."> placeholder="Valid State..">
@@ -42,7 +42,7 @@ title: Form Elements
<input type="text" class="form-control mt-3 state-valid" value="Valid state"> <input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Invalid State</label> <label class="form-label">Invalid State</label>
<input type="text" class="form-control is-invalid" name="example-text-input-invalid" <input type="text" class="form-control is-invalid" name="example-text-input-invalid"
placeholder="Invalid State.."> placeholder="Invalid State..">
@@ -54,7 +54,7 @@ title: Form Elements
### Select ### Select
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Country</label> <label class="form-label">Country</label>
<select class="form-control custom-select"> <select class="form-control custom-select">
<option value="">Germany</option> <option value="">Germany</option>
@@ -66,7 +66,7 @@ title: Form Elements
### Textarea ### Textarea
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label> <label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea> <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div> </div>
@@ -84,27 +84,27 @@ title: Form Elements
### Custom Checkbox examples ### Custom Checkbox examples
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Icons input</label> <label class="form-label">Icons input</label>
{% 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:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Icon input</label> <label class="form-label">Icon input</label>
{% 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="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Your skills</label> <label class="form-label">Your skills</label>
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %} {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Size</label> <label class="form-label">Size</label>
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %} {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Shipping methods</label> <label class="form-label">Shipping methods</label>
{% 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="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
</div> </div>
@@ -114,7 +114,7 @@ title: Form Elements
{% example %} {% example %}
{% include parts/input-toggle.html %} {% include parts/input-toggle.html %}
<div class="form-group"> <div class="mb-2">
<div class="form-label">Toggle switch single</div> <div class="form-label">Toggle switch single</div>
<label class="custom-control custom-switch"> <label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input"> <input type="checkbox" class="custom-control-input">
@@ -125,7 +125,7 @@ title: Form Elements
### Radios ### Radios
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<div class="form-label">Radios</div> <div class="form-label">Radios</div>
<div class="custom-controls-stacked"> <div class="custom-controls-stacked">
<label class="custom-control custom-radio"> <label class="custom-control custom-radio">
@@ -149,7 +149,7 @@ title: Form Elements
</label> </label>
</div> </div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<div class="form-label">Inline Radios</div> <div class="form-label">Inline Radios</div>
<div class="custom-controls-stacked"> <div class="custom-controls-stacked">
<label class="custom-control custom-radio custom-control-inline"> <label class="custom-control custom-radio custom-control-inline">
@@ -173,7 +173,7 @@ title: Form Elements
### Checkboxes ### Checkboxes
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<div class="form-label">Checkboxes</div> <div class="form-label">Checkboxes</div>
<div class="custom-controls-stacked"> <div class="custom-controls-stacked">
<label class="custom-control custom-checkbox"> <label class="custom-control custom-checkbox">
@@ -198,7 +198,7 @@ title: Form Elements
</label> </label>
</div> </div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<div class="form-label">Inline Checkboxes</div> <div class="form-label">Inline Checkboxes</div>
<div> <div>
<label class="custom-control custom-checkbox custom-control-inline"> <label class="custom-control custom-checkbox custom-control-inline">
@@ -222,7 +222,7 @@ title: Form Elements
### Ratios ### Ratios
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Ratios</label> <label class="form-label">Ratios</label>
<input type="range" class="custom-range" step="5" min="0" max="50"> <input type="range" class="custom-range" step="5" min="0" max="50">
</div> </div>
@@ -231,19 +231,19 @@ title: Form Elements
### Sample form ### Sample form
{% example %} {% example %}
<fieldset class="form-fieldset"> <fieldset class="form-fieldset">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Full name<span class="form-required">*</span></label> <label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control"/> <input type="text" class="form-control"/>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Company<span class="form-required">*</span></label> <label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control"/> <input type="text" class="form-control"/>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Email<span class="form-required">*</span></label> <label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control"/> <input type="email" class="form-control"/>
</div> </div>
<div class="form-group mb-0"> <div class="mb-2 mb-0">
<label class="form-label">Phone number</label> <label class="form-label">Phone number</label>
<input type="tel" class="form-control"/> <input type="tel" class="form-control"/>
</div> </div>
@@ -252,7 +252,7 @@ title: Form Elements
### Input group ### Input group
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Input group</label> <label class="form-label">Input group</label>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" placeholder="Search for&hellip;"> <input type="text" class="form-control" placeholder="Search for&hellip;">
@@ -261,7 +261,7 @@ title: Form Elements
</span> </span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Input group buttons</label> <label class="form-label">Input group buttons</label>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control"> <input type="text" class="form-control">
@@ -293,7 +293,7 @@ title: Form Elements
### Separated inputs ### Separated inputs
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Separated inputs</label> <label class="form-label">Separated inputs</label>
<div class="row row-xs"> <div class="row row-xs">
<div class="col"> <div class="col">
@@ -307,22 +307,22 @@ title: Form Elements
### Custom Input examples ### Custom Input examples
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Username</label> <label class="form-label">Username</label>
{% include ui/input-group.html prepend="@" placeholder="username" %} {% include ui/input-group.html prepend="@" placeholder="username" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Subdomain</label> <label class="form-label">Subdomain</label>
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %} {% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Your vanity URL</label> <label class="form-label">Your vanity URL</label>
{% include ui/input-group.html prepend="https://example.com/users/" %} {% include ui/input-group.html prepend="https://example.com/users/" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Price</label> <label class="form-label">Price</label>
{% include ui/input-group.html prepend="$" append=".00" %} {% include ui/input-group.html prepend="$" append=".00" %}
</div> </div>
@@ -330,7 +330,7 @@ title: Form Elements
### Date component ### Date component
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Date of birth</label> <label class="form-label">Date of birth</label>
<div class="row row-xs"> <div class="row row-xs">
<div class="col-5"> <div class="col-5">
@@ -370,7 +370,7 @@ title: Form Elements
### Input with button ### Input with button
{% example %} {% example %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Button input</label> <label class="form-label">Button input</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">

10
pages/_includes/cards/book-hotel.html
View File

@@ -4,7 +4,7 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<form> <form>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Check-in</label> <label class="form-label">Check-in</label>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" placeholder="Pick a date"> <input type="text" class="form-control" placeholder="Pick a date">
@@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Check-out</label> <label class="form-label">Check-out</label>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" placeholder="Pick a date"> <input type="text" class="form-control" placeholder="Pick a date">
@@ -30,7 +30,7 @@
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Adults</label> <label class="form-label">Adults</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
@@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Children</label> <label class="form-label">Children</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
@@ -67,4 +67,4 @@
<button type="submit" class="btn btn-primary btn-block">Book Hotel now</button> <button type="submit" class="btn btn-primary btn-block">Book Hotel now</button>
</form> </form>
</div> </div>
</div> </div>

2
pages/_includes/cards/forgot.html
View File

@@ -4,7 +4,7 @@
<div class="card-title">Forgot password</div> <div class="card-title">Forgot password</div>
<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p> <p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
<div class="form-group"> <div class="mb-2">
<label class="form-label" for="exampleInputEmail1">Email address</label> <label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div> </div>

6
pages/_includes/cards/login.html
View File

@@ -3,19 +3,19 @@
<div class="card-body p-6"> <div class="card-body p-6">
<div class="card-title">Login to your account</div> <div class="card-title">Login to your account</div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Email address</label> <label class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter email" autocomplete="off"> placeholder="Enter email" autocomplete="off">
</div> </div>
<div class="form-group"> <div class="mb-2">
<a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a> <a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
<label class="form-label"> <label class="form-label">
Password Password
</label> </label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="off"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="off">
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="custom-control custom-checkbox"> <label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" {{ site.base }}/> <input type="checkbox" class="custom-control-input" {{ site.base }}/>
<span class="custom-control-label">Remember me</span> <span class="custom-control-label">Remember me</span>

20
pages/_includes/cards/profile-edit-big.html
View File

@@ -4,55 +4,55 @@
<div class="row"> <div class="row">
<div class="col-md-5"> <div class="col-md-5">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Company</label> <label class="form-label">Company</label>
<input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc."> <input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-3"> <div class="col-sm-6 col-md-3">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Username</label> <label class="form-label">Username</label>
<input type="text" class="form-control" placeholder="Username" value="michael23"> <input type="text" class="form-control" placeholder="Username" value="michael23">
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-4"> <div class="col-sm-6 col-md-4">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Email address</label> <label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Email"> <input type="email" class="form-control" placeholder="Email">
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-6"> <div class="col-sm-6 col-md-6">
<div class="form-group"> <div class="mb-2">
<label class="form-label">First Name</label> <label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Company" value="Chet"> <input type="text" class="form-control" placeholder="Company" value="Chet">
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-6"> <div class="col-sm-6 col-md-6">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Last Name</label> <label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" value="Faker"> <input type="text" class="form-control" placeholder="Last Name" value="Faker">
</div> </div>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Address</label> <label class="form-label">Address</label>
<input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia"> <input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-4"> <div class="col-sm-6 col-md-4">
<div class="form-group"> <div class="mb-2">
<label class="form-label">City</label> <label class="form-label">City</label>
<input type="text" class="form-control" placeholder="City" value="Melbourne"> <input type="text" class="form-control" placeholder="City" value="Melbourne">
</div> </div>
</div> </div>
<div class="col-sm-6 col-md-3"> <div class="col-sm-6 col-md-3">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Postal Code</label> <label class="form-label">Postal Code</label>
<input type="number" class="form-control" placeholder="ZIP Code"> <input type="number" class="form-control" placeholder="ZIP Code">
</div> </div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Country</label> <label class="form-label">Country</label>
<select class="form-control custom-select"> <select class="form-control custom-select">
<option value="">Germany</option> <option value="">Germany</option>
@@ -60,7 +60,7 @@
</div> </div>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<div class="form-group mb-0"> <div class="mb-2 mb-0">
<label class="form-label">About Me</label> <label class="form-label">About Me</label>
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme <textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
You doubt I'll bother, reading into it You doubt I'll bother, reading into it

8
pages/_includes/cards/profile-edit.html
View File

@@ -9,24 +9,24 @@
<span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span> <span class="avatar avatar-lg" style="background-image: url({{ site.data.people[11].photo }})"></span>
</div> </div>
<div class="col"> <div class="col">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Email-Address</label> <label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/> <input class="form-control" placeholder="your-email@domain.com"/>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Bio</label> <label class="form-label">Bio</label>
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea> <textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Email-Address</label> <label class="form-label">Email-Address</label>
<input class="form-control" placeholder="your-email@domain.com"/> <input class="form-control" placeholder="your-email@domain.com"/>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Password</label> <label class="form-label">Password</label>
<input type="password" class="form-control" value="password"/> <input type="password" class="form-control" value="password"/>
</div> </div>

10
pages/_includes/cards/register.html
View File

@@ -2,19 +2,19 @@
<div class="card-body p-6"> <div class="card-body p-6">
<div class="card-title">Create new account</div> <div class="card-title">Create new account</div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Name</label> <label class="form-label">Name</label>
<input type="text" class="form-control" placeholder="Enter name"> <input type="text" class="form-control" placeholder="Enter name">
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Email address</label> <label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Enter email"> <input type="email" class="form-control" placeholder="Enter email">
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Password</label> <label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="custom-control custom-checkbox"> <label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"{{ site.base }}/> <input type="checkbox" class="custom-control-input"{{ site.base }}/>
<span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span> <span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
@@ -29,4 +29,4 @@
<div class="text-center text-muted"> <div class="text-center text-muted">
Already have account? <a href="{{ site.base }}/login.html">Sign in</a> Already have account? <a href="{{ site.base }}/login.html">Sign in</a>
</div> </div>

36
pages/_includes/forms/form-elements-2.html
View File

@@ -28,7 +28,7 @@
</div> </div>
<div class="mb-2"> <div class="mb-2">
<label class="form-label">Ratios</label> <label class="form-label">Ratios</label>
<input type="range" class="custom-range" step="5" min="0" max="50"> <input type="range" class="form-range" step="5" min="0" max="50">
</div> </div>
<div class="mb-2"> <div class="mb-2">
<label class="form-label">Size</label> <label class="form-label">Size</label>
@@ -53,37 +53,3 @@
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %} {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
</div> </div>
{% include parts/input-toggle.html %}
<div class="mb-2">
<div class="form-label">Toggle switch single</div>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
<div class="custom-control-label">I agree with terms and conditions</div>
</label>
</div>
<div class="mb-2">
<div class="form-label">Radios</div>
<div class="custom-controls-stacked">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-radios" value="option1"
checked>
<div class="custom-control-label">Option 1</div>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-radios" value="option2">
<div class="custom-control-label">Option 2</div>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-radios" value="option3"
disabled>
<div class="custom-control-label">Option Disabled</div>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-radios2" value="option4"
disabled checked>
<div class="custom-control-label">Option Disabled Checked</div>
</label>
</div>
</div>

78
pages/_includes/forms/form-elements-3.html
View File

@@ -1,68 +1,42 @@
<div class="mb-2">
<div class="form-label">Radios</div>
<div>
{% 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" %}
</div>
</div>
<div class="mb-2"> <div class="mb-2">
<div class="form-label">Inline Radios</div> <div class="form-label">Inline Radios</div>
<div class="custom-controls-stacked"> <div>
<label class="custom-control custom-radio custom-control-inline"> {% include ui/form/check.html title="Option 1" type="radio" inline=true %}
<input type="radio" class="custom-control-input" name="example-inline-radios" {% include ui/form/check.html title="Option 2" type="radio" inline=true %}
value="option1" checked> {% include ui/form/check.html title="Option 3" type="radio" inline=true %}
<span class="custom-control-label">Option 1</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="example-inline-radios"
value="option2">
<span class="custom-control-label">Option 2</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" name="example-inline-radios"
value="option3">
<span class="custom-control-label">Option 3</span>
</label>
</div> </div>
</div> </div>
<div class="mb-2"> <div class="mb-2">
<div class="form-label">Checkboxes</div> <div class="form-label">Checkboxes</div>
<div class="custom-controls-stacked"> <div>
<label class="custom-control custom-checkbox"> {% include ui/form/check.html type="checkbox" %}
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" {% include ui/form/check.html type="checkbox" disabled=true %}
checked> {% include ui/form/check.html type="checkbox" checked=true %}
<span class="custom-control-label">Option 1</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox2"
value="option2">
<span class="custom-control-label">Option 2</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3"
disabled>
<span class="custom-control-label">Option Disabled</span>
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4"
checked disabled>
<span class="custom-control-label">Option Disabled Checked</span>
</label>
</div> </div>
</div> </div>
<div class="mb-2"> <div class="mb-2">
<div class="form-label">Inline Checkboxes</div> <div class="form-label">Inline Checkboxes</div>
<div> <div>
<label class="custom-control custom-checkbox custom-control-inline"> {% include ui/form/check.html inline=true title="Option 1" type="checkbox" %}
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" {% include ui/form/check.html inline=true title="Option 2" type="checkbox" disabled=true %}
value="option1" checked> {% include ui/form/check.html inline=true title="Option 3" type="checkbox" checked=true %}
<span class="custom-control-label">Option 1</span>
</label>
<label class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2"
value="option2">
<span class="custom-control-label">Option 2</span>
</label>
<label class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3"
value="option3">
<span class="custom-control-label">Option 3</span>
</label>
</div> </div>
</div> </div>
{% include parts/input-toggle.html %}
<div class="mb-2">
<div class="form-label">Toggle switch single</div>
{% include ui/form/check.html title="I agree with terms and conditions" switch=true %}
</div>
<div class="mb-2"> <div class="mb-2">
<div class="form-label">Bootstrap's Custom File Input</div> <div class="form-label">Bootstrap's Custom File Input</div>
<div class="custom-file"> <div class="custom-file">

16
pages/_includes/layout/customize.html
View File

@@ -1,33 +1,33 @@
<form action="#" class="js-layout-form"> <form action="#" class="js-layout-form">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Color scheme</label> <label class="form-label">Color scheme</label>
{% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %} {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Nav position</label> <label class="form-label">Nav position</label>
{% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %} {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Header color</label> <label class="form-label">Header color</label>
{% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %} {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
</div> </div>
<!--<div class="form-group">--> <!--<div class="mb-2">-->
<!--<label class="form-label">Header fixed</label>--> <!--<label class="form-label">Header fixed</label>-->
<!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}--> <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
<!--</div>--> <!--</div>-->
<div class="form-group"> <div class="mb-2">
<label class="form-label">Sidebar position</label> <label class="form-label">Sidebar position</label>
{% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %} {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Sidebar size</label> <label class="form-label">Sidebar size</label>
{% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %} {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Sidebar color</label> <label class="form-label">Sidebar color</label>
{% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %} {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Sidebar fixed</label> <label class="form-label">Sidebar fixed</label>
{% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %} {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
</div> </div>

2
pages/_includes/layout/page-title.html
View File

@@ -11,7 +11,7 @@
{% if page.page-right == "date" %} {% if page.page-right == "date" %}
<form class="form-inline"> <form class="form-inline">
<div class="form-group"> <div class="mb-2">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control form-control-light" placeholder="09/10/2018"> <input type="text" class="form-control form-control-light" placeholder="09/10/2018">
<div class="input-group-append"> <div class="input-group-append">

10
pages/_includes/parts/form-fieldset.html
View File

@@ -1,18 +1,18 @@
<fieldset class="form-fieldset"> <fieldset class="form-fieldset">
<div class="form-group"> <div class="mb-2">
<label class="form-label">Full name<span class="form-required">*</span></label> <label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control"{{ site.base }}/> <input type="text" class="form-control"{{ site.base }}/>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Company<span class="form-required">*</span></label> <label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control"{{ site.base }}/> <input type="text" class="form-control"{{ site.base }}/>
</div> </div>
<div class="form-group"> <div class="mb-2">
<label class="form-label">Email<span class="form-required">*</span></label> <label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control"{{ site.base }}/> <input type="email" class="form-control"{{ site.base }}/>
</div> </div>
<div class="form-group mb-0"> <div class="mb-2 mb-0">
<label class="form-label">Phone number</label> <label class="form-label">Phone number</label>
<input type="tel" class="form-control"{{ site.base }}/> <input type="tel" class="form-control"{{ site.base }}/>
</div> </div>
</fieldset> </fieldset>

2
pages/_includes/parts/input-color.html
View File

@@ -1,4 +1,4 @@
<div class="form-group"> <div class="mb-2">
<label class="form-label">Color Input</label> <label class="form-label">Color Input</label>
<div class="row row-xs"> <div class="row row-xs">
{% for color in site.colors limit: 9 offset: 1 %} {% for color in site.colors limit: 9 offset: 1 %}

2
pages/_includes/parts/input-icon.html
View File

@@ -1,4 +1,4 @@
<div class="form-group"> <div class="mb-2">
<label class="form-label">Icon input</label> <label class="form-label">Icon input</label>
<div class="input-icon mb-3"> <div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Search for&hellip;"> <input type="text" class="form-control" placeholder="Search for&hellip;">

2
pages/_includes/parts/input-image.html
View File

@@ -1,5 +1,5 @@
{% assign limit = include.limit | default: 6 %} {% assign limit = include.limit | default: 6 %}
<div class="form-group"> <div class="mb-2">
<label class="form-label">Image Check</label> <label class="form-label">Image Check</label>
<div class="row row-xs"> <div class="row row-xs">
{% for photo in site.data.photos limit: limit offset: 30 %} {% for photo in site.data.photos limit: limit offset: 30 %}

17
pages/_includes/parts/input-toggle.html
View File

@@ -1,15 +1,6 @@
<div class="form-group"> <div class="mb-2">
<div class="form-label">Toggle switches</div> <div class="form-label">Toggle switches</div>
<label class="custom-control custom-switch"> {% include ui/form/check.html switch=true title="Option 1" checked=true %}
<input type="checkbox" class="custom-control-input"> {% include ui/form/check.html switch=true title="Option 2" %}
<div class="custom-control-label">Option 1</div> {% include ui/form/check.html switch=true title="Option 3" %}
</label>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
<div class="custom-control-label">Option 2</div>
</label>
<label class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input">
<div class="custom-control-label">Option 3</div>
</label>
</div> </div>

17
pages/_includes/ui/form/check.html Normal file
View File

@@ -0,0 +1,17 @@
{% assign type = include.type | default: 'checkbox' %}
{% assign checked = include.checked | default: false %}
{% assign disabled = include.disabled | default: false %}
{% assign switch = include.switch | default: false %}
{% assign title = include.title | default: false %}
{% unless title %}
{% assign title = '' %}
{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
{% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
{% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
{% assign title = title | append: ' ' | append: type %}
{% assign title = title | append: ' input' | lstrip | capitalize %}
{% endunless %}
<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}">
<input class="form-check-input" type="{{ type }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
<span class="form-check-label">{{ title }}</span>
</label>

4
pages/email.html
View File

@@ -47,7 +47,7 @@ page-title: Crypto currencies
<div class="card-body"> <div class="card-body">
<form action=""> <form action="">
<div class="form-group"> <div class="mb-2">
<div class="row align-items-center"> <div class="row align-items-center">
<label class="col-sm-2">To:</label> <label class="col-sm-2">To:</label>
<div class="col-sm-10"> <div class="col-sm-10">
@@ -56,7 +56,7 @@ page-title: Crypto currencies
</div> </div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<div class="row align-items-center"> <div class="row align-items-center">
<label class="col-sm-2">Subject:</label> <label class="col-sm-2">Subject:</label>
<div class="col-sm-10"> <div class="col-sm-10">

8
pages/users-list.html
View File

@@ -9,15 +9,15 @@ done: true
<div class="col-lg-4"> <div class="col-lg-4">
<form class="card"> <form class="card">
<div class="card-body"> <div class="card-body">
<div class="form-group"> <div class="mb-2">
<div class="form-label">Filter</div> <div class="form-label">Filter</div>
<input type="text" class="form-control"/> <input type="text" class="form-control"/>
</div> </div>
<div class="form-group"> <div class="mb-2">
<div class="form-label">Calendar</div> <div class="form-label">Calendar</div>
<input type="text" class="form-control"/> <input type="text" class="form-control"/>
</div> </div>
<div class="form-group"> <div class="mb-2">
<div class="form-label">Group</div> <div class="form-label">Group</div>
<div class="selectgroup w-100"> <div class="selectgroup w-100">
<label class="selectgroup-item"> <label class="selectgroup-item">
@@ -39,7 +39,7 @@ done: true
</label> </label>
</div> </div>
</div> </div>
<div class="form-group"> <div class="mb-2">
<div class="form-label">Country</div> <div class="form-label">Country</div>
<select class="custom-select form-control"> <select class="custom-select form-control">
<option value="">United States</option> <option value="">United States</option>

10
scss/_variables.scss
View File

@@ -283,6 +283,16 @@ $dropdown-border-color: $border-color !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$input-border-radius: $border-radius !default; $input-border-radius: $border-radius !default;
//Forms
$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-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default; $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default; $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;

2
scss/ui/_inputs.scss
View File

@@ -11,7 +11,7 @@ textarea {
font-weight: 600; font-weight: 600;
} }
.form-group { .mb-2 {
display: block; display: block;
&.row { &.row {