credit card element, input mask remove jquery, grid fixes

pages/_docs/form-elements.md

@@ -197,7 +197,7 @@ bootstrap-link: components/forms/
 {% example %}
 <div class="mb-2">
    <label class="form-label">Date of birth</label>
-   <div class="row row-xs">
+   <div class="row row-sm">
       <div class="col-5">
          <select name="user[month]" class="form-select">
             <option value="">Month</option>

pages/_includes/cards/credit-card.html

+<div class="card">
+	<div class="card-body">
+		<div class="mb-3">
+			<div class="form-label">Card number</div>
+			{% include ui/form/input-mask.html mask="0000 0000 0000 0000" visible=true %}
+		</div>
+
+		<div class="mb-3">
+			<div class="form-label">Card name</div>
+			<input type="text" class="form-control">
+		</div>
+
+		<div class="row">
+			<div class="col-8">
+				<div class="mb-3">
+					<label class="form-label">Expiration date</label>
+					<div class="row row-sm">
+						<div class="col">
+							<select class="form-select">
+								{% for month in (1..12) %}
+								<option value="{{ month }}">{{ month }}</option>
+								{% endfor %}
+							</select>
+						</div>
+						<div class="col">
+							<select class="form-select">
+								{% for year in (2020..2030) %}
+								<option value="{{ year }}">{{ year }}</option>
+								{% endfor %}
+							</select>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col">
+				<div class="mb-3">
+					<div class="form-label">CVV</div>
+					<input type="number" class="form-control">
+				</div>
+			</div>
+		</div>
+
+		<div class="mt-2">
+			{% include ui/button.html text="Pay now" color="primary" block=true  %}
+		</div>
+	</div>
+</div>
\ No newline at end of file

pages/_includes/cards/feed-card.html

@@ -18,7 +18,7 @@
 		{% endif %}
 
 		{% if include.feed %}
-		<div class="row row-xs">
+		<div class="row row-sm">
 			{% if include.feed == 1 %}
 			<div class="col-6 mb-2">
 				<div class="media media-2x1 rounded">
@@ -61,7 +61,7 @@
 				<div class="media media-2x1 mb-2 rounded">
 					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[7].file }})"></a>
 				</div>
-				<div class="row row-xs">
+				<div class="row row-sm">
 					<div class="col-6">
 						<div class="media rounded">
 							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></a>
@@ -109,7 +109,7 @@
 				</div>
 			</div>
 			<div class="col-6">
-				<div class="row row-xs">
+				<div class="row row-sm">
 					<div class="col-6">
 						<div class="media mb-2 rounded">
 							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file }})"></a>
@@ -140,7 +140,7 @@
 				</div>
 			</div>
 			<div class="col-6">
-				<div class="row row-xs">
+				<div class="row row-sm">
 					<div class="col-6">
 						<div class="media mb-2 rounded">
 							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[21].file }})"></a>

pages/_includes/cards/timeline.html

@@ -54,7 +54,7 @@
 					<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-xs">
+						<div class="row row-sm">
 							<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>

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-xs">
+   <div class="row row-sm">
       <div class="col-5">
          <select name="user[month]" class="form-select">
             <option value="">Month</option>

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

@@ -5,7 +5,7 @@
 
 <div class="mb-3">
 	<label class="form-label">Color Input</label>
-	<div class="row row-xs">
+	<div class="row row-sm">
 		{% for color in colors %}
 		<div class="col-auto">
 			<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">

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

 <div class="mb-3">
 	<label class="form-label">Separated inputs</label>
-	<div class="row row-xs">
+	<div class="row row-sm">
 		<div class="col">
 			<input type="text" class="form-control" placeholder="Search for…">
 		</div>

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

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

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

@@ -4,16 +4,17 @@
 {% capture_once scripts %}
 <script>
 (function () {
-	const $elem = $('[data-mask]');
-
-	if ($elem) {
-		$elem.each(function () {
-			IMask($(this).get(0), {
-				mask: $(this).attr('data-mask'),
-				lazy: $(this).attr('data-mask-visible') === 'true',
-			});
-		});
-	}
+	/**
+	 * Input mask
+	 */
+	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
+	maskElementList.map(function (maskEl) {
+		console.log('maskEl', maskEl);
+		return new IMask(maskEl, {
+			mask: maskEl.dataset.mask,
+			lazy: maskEl.dataset['mask-visible'] === 'true'
+		})
+	});
 })();
 </script>
 {% endcapture_once %}

pages/cards.html

@@ -32,6 +32,7 @@ menu: base.cards
             {% include cards/card.html status-bottom="success" title="Card with bottom status" %}
             {% include cards/card.html status-left="primary" title="Card with side status" %}
             {% include cards/card.html class="card-stacked" title="Stacked card" %}
+	         {% include cards/credit-card.html %}
          </div>
          <div class="col-xl-6">
             {% include cards/card.html title="Card title" subtitle="Card subtitle" %}

scss/ui/_grid.scss

@@ -11,7 +11,7 @@
   }
 }
 
-@each $name, $value in (0: 0, xs: .25rem, sm: .5rem, md: 1.5rem, lg: 3rem) {
+@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
   .row-#{$name} {
     margin-right: (-$value);
     margin-left: -($value);