mirror of
https://github.com/tabler/tabler.git
synced 2026-07-28 14:04:38 +04:00
new form controls updated to newest bootstrap
This commit is contained in:
codecalm
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Image input
|
||||
columns: 2
|
||||
---
|
||||
|
||||
{% include parts/input-image.html %}
|
||||
@@ -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
|
||||
+24
-127
@@ -52,6 +52,11 @@ title: Form Elements
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Input size
|
||||
|
||||
{% include parts/input-sizes.html %}
|
||||
|
||||
|
||||
### Select
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
@@ -82,150 +87,42 @@ title: Form Elements
|
||||
{% include parts/input-color.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Custom Checkbox examples
|
||||
### Input color picker
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
<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" %}
|
||||
</div>
|
||||
{% include parts/input-colorpicker.html %}
|
||||
{% endexample %}
|
||||
|
||||
<div class="mb-2">
|
||||
<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" %}
|
||||
</div>
|
||||
### Datalists
|
||||
{% example %}
|
||||
{% include parts/input-datalist.html %}
|
||||
{% endexample %}
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Your skills</label>
|
||||
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Size</label>
|
||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<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" %}
|
||||
</div>
|
||||
### Custom selectboxes
|
||||
{% example %}
|
||||
{% include parts/input-selectgroups.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Toggle switches
|
||||
{% example %}
|
||||
{% 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>
|
||||
{% include parts/input-toggle-single.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Radios
|
||||
{% example %}
|
||||
<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>
|
||||
<div class="mb-2">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" class="custom-control-input" name="example-inline-radios"
|
||||
value="option1" checked>
|
||||
<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>
|
||||
{% include parts/input-radios.html %}
|
||||
{% include parts/input-radios-inline.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Checkboxes
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
<div class="form-label">Checkboxes</div>
|
||||
<div class="custom-controls-stacked">
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1"
|
||||
checked>
|
||||
<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 class="mb-2">
|
||||
<div class="form-label">Inline Checkboxes</div>
|
||||
<div>
|
||||
<label class="custom-control custom-checkbox custom-control-inline">
|
||||
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1"
|
||||
value="option1" checked>
|
||||
<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>
|
||||
{% include parts/input-checkboxes.html %}
|
||||
{% include parts/input-checkboxes-inline.html %}
|
||||
{% endexample%}
|
||||
|
||||
### Ratios
|
||||
### Range input
|
||||
{% example %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label">Ratios</label>
|
||||
<input type="range" class="custom-range" step="5" min="0" max="50">
|
||||
</div>
|
||||
{% include parts/input-range.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Sample form
|
||||
@@ -300,8 +197,8 @@ title: Form Elements
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<span class="col-auto">
|
||||
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
|
||||
</span>
|
||||
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>{% endexample %}
|
||||
|
||||
|
||||
@@ -6,10 +6,13 @@
|
||||
<label class="form-label">Text</label>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Disabled</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||
value="Well, she turned me into a newt." disabled>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." disabled>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Readonly</label>
|
||||
@@ -21,9 +24,8 @@
|
||||
<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>
|
||||
|
||||
{% include parts/input-image.html %}
|
||||
|
||||
{% include parts/input-color.html %}
|
||||
{% include parts/select.html %}
|
||||
{% include parts/select.html label="Select multiple" multiple=true %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group</label>
|
||||
|
||||
@@ -1,55 +1,79 @@
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Valid State</label>
|
||||
<input type="text" class="form-control is-valid" name="example-text-input-valid"
|
||||
placeholder="Valid State..">
|
||||
|
||||
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Invalid State</label>
|
||||
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
||||
placeholder="Invalid State..">
|
||||
<div class="invalid-feedback">Invalid feedback</div>
|
||||
|
||||
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option value="">Germany</option>
|
||||
<label class="form-label">Price</label>
|
||||
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Button input</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:void(0)">Action</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags</label>
|
||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Beast</label>
|
||||
<select name="beast" id="select-beast" class="form-select">
|
||||
<option value="1">Chuck Testa</option>
|
||||
<option value="4">Sage Cattabriga-Alosa</option>
|
||||
<option value="3">Nikola Tesla</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Ratios</label>
|
||||
<input type="range" class="form-range" step="5" min="0" max="50">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Size</label>
|
||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<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" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<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" %}
|
||||
<label class="form-label">Users list</label>
|
||||
<select name="user" id="select-users" class="form-select">
|
||||
{% for user in site.data.people limit: 10 %}
|
||||
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
|
||||
{{ user.first_name }} {{ user.last_name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<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" %}
|
||||
<label class="form-label">Countries</label>
|
||||
<select name="country" id="select-countries" class="form-select">
|
||||
<option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
|
||||
<option value="cz" data-data='{"image": "{{ site.base }}/assets/images/flags/cz.svg"}'>Czech Republic
|
||||
</option>
|
||||
<option value="de" data-data='{"image": "{{ site.base }}/assets/images/flags/de.svg"}'>Germany
|
||||
</option>
|
||||
<option value="pl" data-data='{"image": "{{ site.base }}/assets/images/flags/pl.svg"}' selected>Poland
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Your skills</label>
|
||||
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,162 +1,36 @@
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
{% include parts/input-image.html %}
|
||||
{% include parts/input-color.html %}
|
||||
{% include parts/input-colorpicker.html %}
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Checkboxes</div>
|
||||
<div>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Inline Checkboxes</div>
|
||||
<div>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
{% include parts/input-toggle.html %}
|
||||
|
||||
<div class="mb-3">
|
||||
<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-3">
|
||||
<div class="form-label">Bootstrap's Custom File Input</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" name="example-file-input-custom">
|
||||
<label class="custom-file-label">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date of birth</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col-5">
|
||||
<select name="user[month]" class="form-select">
|
||||
<option value="">Month</option>
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option selected="selected" value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<select name="user[day]" class="form-select">
|
||||
<option value="">Day</option>
|
||||
{% for i in (1..31) %}
|
||||
<option value="{{ i }}"{% if i == 20 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<select name="user[year]" class="form-select">
|
||||
<option value="">Year</option>
|
||||
{% for i in (1897..2014) reversed %}
|
||||
<option value="{{ i }}"{% if i == 1989 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||
<label class="form-label">Valid State</label>
|
||||
<input type="text" class="form-control is-valid" name="example-text-input-valid"
|
||||
placeholder="Valid State..">
|
||||
|
||||
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
<label class="form-label">Invalid State</label>
|
||||
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
||||
placeholder="Invalid State..">
|
||||
<div class="invalid-feedback">Invalid feedback</div>
|
||||
|
||||
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Your vanity URL</label>
|
||||
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Price</label>
|
||||
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Button input</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:void(0)">Action</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Tags</label>
|
||||
<input type="text" class="form-control" id="input-tags" value="aa,bb,cc,dd">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Beast</label>
|
||||
<select name="beast" id="select-beast" class="form-select">
|
||||
<option value="1">Chuck Testa</option>
|
||||
<option value="4">Sage Cattabriga-Alosa</option>
|
||||
<option value="3">Nikola Tesla</option>
|
||||
<label class="form-label">Country</label>
|
||||
<select class="form-select">
|
||||
<option value="">Germany</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Users list</label>
|
||||
<select name="user" id="select-users" class="form-select">
|
||||
{% for user in site.data.people limit: 10 %}
|
||||
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
|
||||
{{ user.first_name }} {{ user.last_name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label class="form-label">Size</label>
|
||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Countries</label>
|
||||
<select name="country" id="select-countries" class="form-select">
|
||||
<option value="br" data-data='{"image": "{{ site.base }}/assets/images/flags/br.svg"}'>Brazil</option>
|
||||
<option value="cz" data-data='{"image": "{{ site.base }}/assets/images/flags/cz.svg"}'>Czech Republic
|
||||
</option>
|
||||
<option value="de" data-data='{"image": "{{ site.base }}/assets/images/flags/de.svg"}'>Germany
|
||||
</option>
|
||||
<option value="pl" data-data='{"image": "{{ site.base }}/assets/images/flags/pl.svg"}' selected>Poland
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date of birth</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col-5">
|
||||
<select name="user[month]" class="form-select">
|
||||
<option value="">Month</option>
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option selected="selected" value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<select name="user[day]" class="form-select">
|
||||
<option value="">Day</option>
|
||||
{% for i in (1..31) %}
|
||||
<option value="{{ i }}"{% if i == 20 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<select name="user[year]" class="form-select">
|
||||
<option value="">Year</option>
|
||||
{% for i in (1897..2014) reversed %}
|
||||
<option value="{{ i }}"{% if i == 1989 %} selected{% endif %}>{{ i }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text mask</label>
|
||||
{% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
6
|
||||
{% include parts/input-selectgroups.html %}
|
||||
{% include parts/input-datalist.html %}
|
||||
{% include parts/input-sizes.html %}
|
||||
{% include parts/input-range.html %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Progress</label>
|
||||
{% include ui/progress.html %}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Inline Checkboxes</div>
|
||||
<div>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Checkboxes</div>
|
||||
<div>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Color picker</label>
|
||||
<input type="color" class="form-control form-control-color" value="{{ include.color | default: site.colors.blue.hex }}" title="Choose your color">
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Datalist example</label>
|
||||
<input class="form-control" list="datalistOptions" placeholder="Type to search..." />
|
||||
<datalist id="datalistOptions">
|
||||
{% for country in site.data.countries %}
|
||||
<option value="{{ country | escape }}">
|
||||
{% endfor %}
|
||||
</datalist>
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{ include.label | default: 'Custom File Input' }}</div>
|
||||
<div class="form-file">
|
||||
<input type="file" class="form-file-input" id="customFile">
|
||||
<label class="form-file-label" for="customFile">
|
||||
<span class="form-file-text">Choose file...</span>
|
||||
<span class="form-file-button">Browse</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,14 +1,14 @@
|
||||
{% assign limit = include.limit | default: 6 %}
|
||||
<div class="mb-2">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Image Check</label>
|
||||
<div class="row row-xs">
|
||||
{% for photo in site.data.photos limit: limit offset: 30 %}
|
||||
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
|
||||
<label class="imagecheck mb-2">
|
||||
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %} />
|
||||
<div class="imagecheck-figure">
|
||||
<span class="imagecheck-figure">
|
||||
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Inline Radios</div>
|
||||
<div>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Radios</div>
|
||||
<div>
|
||||
{% 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 %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Range input</label>
|
||||
<input type="range" class="form-range" min="0" max="10" step="1">
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="mb-3">
|
||||
<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" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<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" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<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" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Your skills</label>
|
||||
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input sizing</label>
|
||||
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
|
||||
<input class="form-control mb-2" type="text" placeholder="Default input">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Single switch</div>
|
||||
{% include ui/form/check.html switch=true title="I agree with terms and conditions" %}
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="mb-2">
|
||||
<div class="mb-3">
|
||||
<div class="form-label">Toggle switches</div>
|
||||
{% include ui/form/check.html switch=true title="Option 1" checked=true %}
|
||||
{% include ui/form/check.html switch=true title="Option 2" %}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{ include.label | default: 'Select' }}</div>
|
||||
<select class="form-select"{% if include.multiple %} multiple{% endif %}>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -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 %}
|
||||
<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>
|
||||
<input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
|
||||
{% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
|
||||
</label>
|
||||
|
||||
@@ -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" %}
|
||||
<div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% for value in values %}
|
||||
<label class="selectgroup-item">
|
||||
<input type="{{ type }}" name="{{ name }}" value="{{ value }}" class="selectgroup-input"{% if value == default%}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
|
||||
{% assign s = value | split: "i:" %}
|
||||
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
|
||||
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon %}{% else %}{{ value }}{% endif %}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
|
||||
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
|
||||
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$white}'/></svg>") !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;
|
||||
|
||||
|
||||
+4
-1
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user