input selectgroups fixes

pages/_includes/parts/input-selectgroups.html

 <div class="mb-3">
-   <label class="form-label">Your skills</label>
-   {% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="form-selectgroup-pills" %}
+   <label class="form-label">Simple selectgroup</label>
+   {% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" %}
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Icons input</label>
-   {% include ui/form/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
+   <label class="form-label">Icon input</label>
+   {% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" %}
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Shipping methods</label>
-   {% include ui/form/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="form-selectgroup-vertical" type="radio" name="shipping-method" %}
+   <label class="form-label">Selectgroup with icons and text</label>
+   {% include ui/form/input-selectgroup.html values="i:home,i:users,i:circle,i:square" type="radio" name="icons" with-text=true %}
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Icon input</label>
-   {% include ui/form/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" %}
+	<label class="form-label">Different style</label>
+	{% include ui/form/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="form-selectgroup-pills" %}
 </div>
-

pages/_includes/ui/form/input-selectgroup.html

@@ -3,11 +3,14 @@
 {% assign type = include.type | default: "checkbox" %}
 {% assign name = include.name | default: "name" %}
 <div class="form-selectgroup{% if include.class %} {{ include.class }}{% endif %}">
-   {% for value in values %}
-   <label class="form-selectgroup-item">
-      {% assign s = value | split: "i:" %}
-      <input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="form-selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
-      <span class="form-selectgroup-box">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon use-svg=true %}{% else %}{{ value }}{% endif %}</span>
-   </label>
-   {% endfor %}
+	{% for value in values %}
+	<label class="form-selectgroup-item">
+		{% assign s = value | split: "i:" %}
+		{% if include.with-text %}
+			{% assign icon-class = "mr-1" %}
+		{% endif %}
+		<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="form-selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
+		<span class="form-selectgroup-box">{% if s.size == 2 %}{% assign icon = s[1] %}{% include ui/icon.html icon=icon class=icon-class use-svg=true %}{% if include.with-text %} {{ icon | capitalize }}{% endif %}{% else %}{{ value }}{% endif %}</span>
+	</label>
+	{% endfor %}
 </div>

pages/tmp.html

@@ -7,12 +7,15 @@ menu: a.b.c
 		{% assign person = site.data.people[0] %}
 		<div class="card">
 			<div class="card-img-top embed-responsive embed-responsive-21by9">
-				<div class="embed-responsive-item bg-cover" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></div>
+				<div class="embed-responsive-item bg-cover"
+				     style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></div>
 			</div>
 			{% include ui/avatar.html person=person size="xl" class="mt-n5 mx-auto card-avatar" %}
 			<div class="card-body text-center">
 				<h2 class="mb-3">{{ person.full_name }}</h2>
-				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam atque autem consectetur dignissimos ea error exercitationem id, maxime minus mollitia nulla quasi quia quisquam sed tempora ut voluptas, voluptatem!</p>
+				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam atque autem
+					consectetur dignissimos ea error exercitationem id, maxime minus mollitia nulla quasi quia quisquam sed
+					tempora ut voluptas, voluptatem!</p>
 			</div>
 		</div>
 		{% include cards/user-info.html %}
@@ -46,12 +49,12 @@ menu: a.b.c
 	</div>
 </div>
 <div class="row">
-   <div class="col-10 col-sm-8 col-md-6 col-lg-4">
-      <div class="card">
-         <div class="card-body d-flex justify-content-between table-responsive">
-            <p class="mb-0 mr-3 d-flex align-items-center text-nowrap">Pick date:</p>
-            <input type="text" name="dates" class="form-control text-center ml-4" size="20">
-         </div>
-      </div>
-   </div>
+	<div class="col-10 col-sm-8 col-md-6 col-lg-4">
+		<div class="card">
+			<div class="card-body d-flex justify-content-between table-responsive">
+				<p class="mb-0 mr-3 d-flex align-items-center text-nowrap">Pick date:</p>
+				<input type="text" name="dates" class="form-control text-center ml-4" size="20">
+			</div>
+		</div>
+	</div>
 </div>

pages/tmp2.html

@@ -5,59 +5,7 @@ page-title: Search results
 
 <div class="row">
 	<div class="col-8">
-		<div class="card">
-			<div class="card-body">
-				<div>
-					{% assign items = "HTML,CSS,JavaScript,Ruby,GraphSQL" | split: ',' %}
-					<div class="form-selectgroup">
-						{% for item in items %}
-						<label class="form-selectgroup-item">
-							<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
-							<span class="form-selectgroup-box">
-								{{ item }}
-							</span>
-						</label>
-						{% endfor %}
-					</div>
-				</div>
-
-				<div class="mt-4">
-					{% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %}
-					<div class="form-selectgroup">
-						{% for item in items %}
-						<label class="form-selectgroup-item">
-							<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
-							<div class="form-selectgroup-box">
-								{% include ui/icon.html icon=item class="mr-1" %}
-								<span>{{ item }}</span>
-							</div>
-						</label>
-						{% endfor %}
-					</div>
-				</div>
-
-				<div class="mt-4">
-					{% assign items = "home,check-square,pie-chart,users,circle,square" | split: ',' %}
-					<div class="form-selectgroup">
-						{% for item in items %}
-						<label class="form-selectgroup-item">
-							<input type="checkbox" name="name" value="{{ item | escape }}" class="form-selectgroup-input"{% if forloop.index <= 2 %} checked{% endif %}>
-							<div class="form-selectgroup-box">
-								{% include ui/icon.html icon=item %}
-							</div>
-						</label>
-						{% endfor %}
-					</div>
-				</div>
-
-				<div class="mt-4">
-					<input type="checkbox" class="form-check-input" checked>
-					<input type="radio" class="form-check-input" checked> lorem haha
-				</div>
-
-
-			</div>
-		</div>
+		<input type="text" name="dates" class="form-control text-center ml-4" size="20">
 	</div>
 	<div class="col">
 		{% include cards/configuration.html %}

scss/ui/forms/_form-selectgroup.scss

@@ -4,6 +4,7 @@ Select group
 .form-selectgroup {
   display: inline-flex;
   margin: 0 -.5rem -.5rem 0;
+  flex-wrap: wrap;
 }
 
 .form-selectgroup-vertical {
@@ -13,7 +14,6 @@ Select group
 .form-selectgroup-item {
   display: block;
   position: relative;
-  flex-grow: 1;
   margin: 0 .5rem .5rem 0;
 }