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
|
||||||
+22
-125
@@ -52,6 +52,11 @@ title: Form Elements
|
|||||||
</div>
|
</div>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
|
### Input size
|
||||||
|
|
||||||
|
{% include parts/input-sizes.html %}
|
||||||
|
|
||||||
|
|
||||||
### Select
|
### Select
|
||||||
{% example %}
|
{% example %}
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
@@ -82,150 +87,42 @@ title: Form Elements
|
|||||||
{% include parts/input-color.html %}
|
{% include parts/input-color.html %}
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Custom Checkbox examples
|
### Input color picker
|
||||||
{% example %}
|
{% example %}
|
||||||
<div class="mb-2">
|
{% include parts/input-colorpicker.html %}
|
||||||
<label class="form-label">Icons input</label>
|
{% endexample %}
|
||||||
{% 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-2">
|
### Datalists
|
||||||
<label class="form-label">Icon input</label>
|
{% example %}
|
||||||
{% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
|
{% include parts/input-datalist.html %}
|
||||||
</div>
|
{% endexample %}
|
||||||
|
|
||||||
<div class="mb-2">
|
### Custom selectboxes
|
||||||
<label class="form-label">Your skills</label>
|
{% example %}
|
||||||
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
{% include parts/input-selectgroups.html %}
|
||||||
</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>
|
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Toggle switches
|
### Toggle switches
|
||||||
{% example %}
|
{% example %}
|
||||||
{% include parts/input-toggle.html %}
|
{% include parts/input-toggle.html %}
|
||||||
|
{% include parts/input-toggle-single.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>
|
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Radios
|
### Radios
|
||||||
{% example %}
|
{% example %}
|
||||||
<div class="mb-2">
|
{% include parts/input-radios.html %}
|
||||||
<div class="form-label">Radios</div>
|
{% include parts/input-radios-inline.html %}
|
||||||
<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>
|
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Checkboxes
|
### Checkboxes
|
||||||
{% example %}
|
{% example %}
|
||||||
<div class="mb-2">
|
{% include parts/input-checkboxes.html %}
|
||||||
<div class="form-label">Checkboxes</div>
|
{% include parts/input-checkboxes-inline.html %}
|
||||||
<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>
|
|
||||||
{% endexample%}
|
{% endexample%}
|
||||||
|
|
||||||
### Ratios
|
### Range input
|
||||||
{% example %}
|
{% example %}
|
||||||
<div class="mb-2">
|
{% include parts/input-range.html %}
|
||||||
<label class="form-label">Ratios</label>
|
|
||||||
<input type="range" class="custom-range" step="5" min="0" max="50">
|
|
||||||
</div>
|
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
### Sample form
|
### Sample form
|
||||||
|
|||||||
@@ -6,10 +6,13 @@
|
|||||||
<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="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">
|
<div class="mb-3">
|
||||||
<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="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Readonly</label>
|
<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>
|
<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>
|
||||||
|
|
||||||
{% include parts/input-image.html %}
|
{% include parts/select.html %}
|
||||||
|
{% include parts/select.html label="Select multiple" multiple=true %}
|
||||||
{% include parts/input-color.html %}
|
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Input group</label>
|
<label class="form-label">Input group</label>
|
||||||
|
|||||||
@@ -1,55 +1,79 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Password</label>
|
<label class="form-label">Username</label>
|
||||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Valid State</label>
|
<label class="form-label">Subdomain</label>
|
||||||
<input type="text" class="form-control is-valid" name="example-text-input-valid"
|
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||||
placeholder="Valid State..">
|
|
||||||
|
|
||||||
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Invalid State</label>
|
<label class="form-label">Your vanity URL</label>
|
||||||
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
{% include ui/input-group.html prepend="https://example.com/users/" %}
|
||||||
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>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Country</label>
|
<label class="form-label">Price</label>
|
||||||
<select class="form-select">
|
{% include ui/input-group.html prepend="$" append=".00" %}
|
||||||
<option value="">Germany</option>
|
</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>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Ratios</label>
|
<label class="form-label">Users list</label>
|
||||||
<input type="range" class="form-range" step="5" min="0" max="50">
|
<select name="user" id="select-users" class="form-select">
|
||||||
</div>
|
{% for user in site.data.people limit: 10 %}
|
||||||
<div class="mb-3">
|
<option value="{{ forloop.index }}" data-data='{"image": "{{ user.photo }}"}'>
|
||||||
<label class="form-label">Size</label>
|
{{ user.first_name }} {{ user.last_name }}
|
||||||
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
</option>
|
||||||
</div>
|
{% endfor %}
|
||||||
<div class="mb-3">
|
</select>
|
||||||
<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>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Icon input</label>
|
<label class="form-label">Countries</label>
|
||||||
{% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
|
<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>
|
||||||
|
|
||||||
<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 @@
|
|||||||
|
{% include parts/input-image.html %}
|
||||||
|
{% include parts/input-color.html %}
|
||||||
|
{% include parts/input-colorpicker.html %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<div class="form-label">Radios</div>
|
<label class="form-label">Valid State</label>
|
||||||
<div>
|
<input type="text" class="form-control is-valid" name="example-text-input-valid"
|
||||||
{% include ui/form/check.html title="Option 1" type="radio" %}
|
placeholder="Valid State..">
|
||||||
{% include ui/form/check.html title="Option 2" type="radio" %}
|
|
||||||
{% include ui/form/check.html title="Option 3" type="radio" %}
|
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<div class="form-label">Inline Radios</div>
|
<label class="form-label">Invalid State</label>
|
||||||
<div>
|
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
||||||
{% include ui/form/check.html title="Option 1" type="radio" inline=true %}
|
placeholder="Invalid State..">
|
||||||
{% include ui/form/check.html title="Option 2" type="radio" inline=true %}
|
<div class="invalid-feedback">Invalid feedback</div>
|
||||||
{% 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">
|
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
||||||
<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>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label class="form-label">Date of birth</label>
|
<label class="form-label">Country</label>
|
||||||
<div class="row row-xs">
|
<select class="form-select">
|
||||||
<div class="col-5">
|
<option value="">Germany</option>
|
||||||
<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>
|
</select>
|
||||||
</div>
|
</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">
|
<div class="mb-3">
|
||||||
<label class="form-label">Username</label>
|
<label class="form-label">Size</label>
|
||||||
{% include ui/input-group.html prepend="@" placeholder="username" %}
|
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb-3">
|
|
||||||
<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">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>
|
|
||||||
</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>
|
|
||||||
</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">
|
<div class="mb-3">
|
||||||
<label class="form-label">Text mask</label>
|
<label class="form-label">Text mask</label>
|
||||||
{% include ui/input-mask.html mask="00/00/0000" placeholder="00/00/0000" visible=true %}
|
{% 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 %}
|
{% assign limit = include.limit | default: 6 %}
|
||||||
<div class="mb-2">
|
<div class="mb-3">
|
||||||
<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 %}
|
||||||
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
|
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
|
||||||
<label class="imagecheck mb-2">
|
<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 %} />
|
<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">
|
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
|
||||||
</div>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% 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>
|
<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 1" checked=true %}
|
||||||
{% include ui/form/check.html switch=true title="Option 2" %}
|
{% 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 disabled = include.disabled | default: false %}
|
||||||
{% assign switch = include.switch | default: false %}
|
{% assign switch = include.switch | default: false %}
|
||||||
{% assign title = include.title | default: false %}
|
{% assign title = include.title | default: false %}
|
||||||
|
{% assign is_empty = include['empty'] | default: false %}
|
||||||
{% unless title %}
|
{% unless title %}
|
||||||
{% assign title = '' %}
|
{% assign title = '' %}
|
||||||
{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
|
{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
|
||||||
@@ -12,6 +13,6 @@
|
|||||||
{% assign title = title | append: ' input' | lstrip | capitalize %}
|
{% assign title = title | append: ' input' | lstrip | capitalize %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% endif %}">
|
<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 %}>
|
<input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
|
||||||
<span class="form-check-label">{{ title }}</span>
|
{% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
{% assign values = include.values | default: "One,Two,Three" | split: ',' %}
|
{% 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 type = include.type | default: "checkbox" %}
|
||||||
{% assign name = include.name | default: "name" %}
|
{% assign name = include.name | default: "name" %}
|
||||||
<div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
|
<div class="selectgroup{% if include.class %} {{ include.class }}{% endif %}">
|
||||||
{% for value in values %}
|
{% for value in values %}
|
||||||
<label class="selectgroup-item">
|
<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:" %}
|
{% 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>
|
<span class="selectgroup-button">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon %}{% else %}{{ value }}{% endif %}</span>
|
||||||
</label>
|
</label>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|||||||
@@ -290,10 +290,13 @@ $form-check-input-width: 1em;
|
|||||||
$form-check-input-border: 1px solid $border-color;
|
$form-check-input-border: 1px solid $border-color;
|
||||||
$form-check-input-border-radius: $border-radius;
|
$form-check-input-border-radius: $border-radius;
|
||||||
$form-check-input-checked-bg-size: .75rem;
|
$form-check-input-checked-bg-size: .75rem;
|
||||||
$form-check-input-checked-border-color: currentColor;
|
|
||||||
|
|
||||||
$form-range-track-height: .25rem;
|
$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-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;
|
||||||
|
|
||||||
|
|||||||
+4
-1
@@ -28,7 +28,10 @@
|
|||||||
@import "ui/highlight";
|
@import "ui/highlight";
|
||||||
@import "ui/icons";
|
@import "ui/icons";
|
||||||
@import "ui/inputs";
|
@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/lists";
|
||||||
@import "ui/loaders";
|
@import "ui/loaders";
|
||||||
@import "ui/login";
|
@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