form fixes

src/pages/_includes/cards/credit-card.html

@@ -14,7 +14,7 @@
 			<div class="col-8">
 				<div class="mb-3">
 					<label class="form-label">Expiration date</label>
-					<div class="row row-sm">
+					<div class="row g-2">
 						<div class="col">
 							<select class="form-select">
 								{% for month in (1..12) %}

src/pages/_includes/cards/music/tracks-list.html

@@ -2,7 +2,7 @@
 	<div class="list-group card-list-group">
 		{% for track in site.data.tracks limit: 12 %}
 		<div class="list-group-item">
-			<div class="row row-sm align-items-center">
+			<div class="row g-2 align-items-center">
 				<div class="col-auto text-h3">
 					{{ forloop.index }}
 				</div>

src/pages/_includes/cards/order-statistics.html

@@ -12,7 +12,7 @@
 
 		<ul class="list-unstyled">
 			{% for item in site.data.orders %}
-			<li class="row row-sm align-items-center mb-2">
+			<li class="row g-2 align-items-center mb-2">
 				<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
 				<div class="col">
 					{{ item.title }}

src/pages/_includes/cards/subscribe.html

@@ -2,7 +2,7 @@
 {% assign person = site.data.people[person-id] %}
 <div class="card">
 	<div class="card-body">
-		<div class="row row-sm align-items-center">
+		<div class="row g-2 align-items-center">
 			<div class="col-auto">
 				{% include ui/avatar.html person=person size="lg" %}
 			</div>

src/pages/_includes/cards/timeline.html

@@ -54,7 +54,7 @@ <h3 class="card-title">{{ include.title | default: 'Timeline' }}</h3>
 					<div class="list-timeline-time">3 days ago</div>
 					<p class="list-timeline-title">+2 New photos</p>
 					<div class="mt-3">
-						<div class="row row-sm">
+						<div class="row g-2">
 							<div class="col-6">
 								<div class="media media-2x1 rounded">
 									<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>

src/pages/_includes/cards/users-list-2.html

@@ -9,7 +9,7 @@ <h3 class="card-title">{{ include.title | default: 'Top users' }}</h3>
 			{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
 			{% for person in site.data.people limit: limit offset: offset %}
 			{% assign color = forloop.index | plus: 5 | random_item: colors %}
-			<div class="col-6 row row-sm mb-3 align-items-center">
+			<div class="col-6 row g-2 mb-3 align-items-center">
 				<a href="#" class="col-auto">
 					{% include ui/avatar.html person=person status=color %}
 				</a>

src/pages/_includes/example/colors-table.html

@@ -4,7 +4,7 @@
 <div class="example">
    <div class="mb-n3">
       {% for color in colors %}
-      <div class="row row-sm mb-3 align-items-center">
+      <div class="row g-2 mb-3 align-items-center">
          <div class="col-auto">
             <div class="avatar bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
          </div>

src/pages/_includes/forms/form-elements-1.html

@@ -54,7 +54,7 @@
 
 <div class="mb-3">
 	<label class="form-label">Input with help icon</label>
-	<div class="row row-sm">
+	<div class="row g-2">
 		<div class="col">
 			<input type="text" class="form-control" placeholder="Search for…">
 		</div>

src/pages/_includes/forms/form-elements-3.html

@@ -1,5 +1,6 @@
 {% include parts/form/input-image.html %}
 {% include parts/form/input-color.html %}
+{% include parts/form/input-color.html name="color-rounded" rounded=true %}
 {% include parts/form/input-colorpicker.html %}
 
 {% include parts/form/validation-states.html %}

src/pages/_includes/forms/form-elements-5.html

@@ -41,7 +41,7 @@
 
 <div class="mb-3">
    <label class="form-label">Date of birth</label>
-   <div class="row row-sm">
+   <div class="row g-2">
       <div class="col-5">
          <select name="user[month]" class="form-select">
             <option value="">Month</option>

src/pages/_includes/layout/layouts-list.html

@@ -1,4 +1,4 @@
-<div class="row row-md {% if include.wide %}mb-n5{% else %}mb-n3 mb-md-n5{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+<div class="row {% if include.wide %}mb-n5{% else %}mb-n3 mb-md-n5{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 	{% for layout in site.data.layouts %}
 	<div class="{% if include.wide %}col-12{% else %}col-lg-6{% endif %} {% if include.wide %}mb-5{% else %}mb-3 mb-md-5{% endif %}{% if layout.soon %} opacity-25{% endif %}">
 		<div class="row">

src/pages/_includes/parts/buttons-table.html

@@ -6,7 +6,7 @@
 
 {% for state in site.button-states %}
    {% if show-states or (state.class != 'active' and state.class != 'disabled') %}
-      <div class="row row-sm align-items-center mb-n3{% unless forloop.first %} mt-3{% endunless %}">
+      <div class="row g-2 align-items-center mb-n3{% unless forloop.first %} mt-3{% endunless %}">
          {% unless hide-labels %}<div class="col-12 col-xl-2 mb-3 font-weight-semibold">{{ state.title }}</div>{% endunless %}
          {% for type in variants %}
             {% if show-link or type[0] != 'link' %}

src/pages/_includes/parts/form/input-color.html

@@ -5,12 +5,12 @@
 
 <div class="mb-3">
 	<label class="form-label">{{ include.label | default: 'Color Input' }}</label>
-	<div class="row row-sm">
+	<div class="row g-2">
 		{% for color in colors %}
 		<div class="col-auto">
 			<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">
-				<input name="color" type="radio" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
-				<span class="form-colorinput-color bg-{{ color }}"></span>
+				<input name="{{ include.name | default: 'color' }}" type="radio" value="{{ color }}" class="form-colorinput-input" {% if forloop.index == 2 %} checked{% endif %}/>
+				<span class="form-colorinput-color bg-{{ color }}{% if include.rounded %} rounded-circle{% endif %}"></span>
 			</label>
 		</div>
 		{% endfor %}

src/pages/_includes/parts/form/input-icon-separated.html

@@ -1,6 +1,6 @@
 <div class="mb-3">
 	<label class="form-label">Separated inputs</label>
-	<div class="row row-sm">
+	<div class="row g-2">
 		<div class="col">
 			<input type="text" class="form-control" placeholder="Search for…">
 		</div>

src/pages/_includes/parts/form/input-image.html

@@ -1,7 +1,7 @@
 {% assign limit = include.limit | default: 9 %}
 <div class="mb-3">
 	<label class="form-label">Image Check</label>
-	<div class="row row-sm">
+	<div class="row g-2">
 		{% assign photos = site.data.photos | where: 'horizontal', true %}
 
 		{% for photo in photos limit: limit %}

src/pages/_includes/parts/nav/nav-aside.html

@@ -34,7 +34,7 @@
 	</div>
 
 	<div class="subheader mb-2">Price</div>
-	<div class="row row-sm align-items-center mb-3">
+	<div class="row g-2 align-items-center mb-3">
 		<div class="col">
 			{% include ui/form/input-group.html prepend="$" placeholder="from" value="3" %}
 		</div>

src/pages/settings-index.html

@@ -2,11 +2,11 @@
 layout: card
 ---
 
-<div class="row g-3">
+<div class="row g-2">
 	{% for item in site.data.settings %}
 	<div class="col-4">
 		<a href="#">
-			<div class="row g-3">
+			<div class="row g-2">
 				<div class="col-auto">
 					<div class="avatar">{% include ui/icon.html icon=item.icon %}</div>
 				</div>

src/pages/users.html

@@ -14,7 +14,7 @@
    <div class="col-md-6 col-lg-4">
       <div class="card">
          <div class="card-body">
-            <div class="row row-sm align-items-center">
+            <div class="row g-2 align-items-center">
                <div class="col-auto">
                   {% include ui/avatar.html person=person size="md" %}
                </div>

src/scss/_variables.scss

@@ -488,6 +488,7 @@ $input-border-radius: $border-radius !default;
 
 
 //Forms
+$form-check-margin-bottom: .5rem !default;
 $form-check-input-width: 1rem !default;
 $form-check-padding-left: $form-check-input-width + .5rem !default;
 $form-check-input-bg: $white !default;

src/scss/ui/_forms.scss

@@ -169,14 +169,12 @@ Form switch
 }
 
 .form-check-label {
-  line-height: $line-height-sm;
-  padding: .125rem 0;
 }
 
 .form-check-description {
   color: $text-muted;
   font-size: $h5-font-size;
-  line-height: $line-height-sm;
+  margin-top: .25rem;
 }
 
 /**

src/scss/ui/forms/_form-colorinput.scss

@@ -20,7 +20,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: #fff;
-  border: 1px solid $border-color;
+  border: 1px solid $border-color-transparent;
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);