bootstrap upgrade, remove btn-block, bootstrap 5 fixes

package.json

@@ -79,7 +79,7 @@
     "@fullcalendar/timegrid": "^5.3.1",
     "apexcharts": "^3.22.1",
     "autosize": "^4.0.2",
-    "bootstrap": "twbs/bootstrap#bb6daab",
+    "bootstrap": "twbs/bootstrap#fb3a57b",
     "countup.js": "^2.0.7",
     "daterangepicker": "^3.1.0",
     "flatpickr": "^4.6.6",

src/pages/_docs/buttons.md

@@ -141,16 +141,6 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 
-You can also add the `.btn-block` class to create block level buttons which span the full width of a parent.
-
-{% capture code %}
-<div>
-  <button type="button" class="btn btn-primary btn-block">Block level button</button>
-  <button type="button" class="btn btn-block">Block level button</button>
-</div>
-{% endcapture %}
-{% include example.html code=code wrapper="btn-list" centered=true %}
-
 
 ## Buttons with icons
 

src/pages/_includes/cards/forgot-password.html

@@ -9,7 +9,7 @@
 			<input type="email" class="form-control" placeholder="Enter email">
 		</div>
 		<div class="form-footer">
-			<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
+			<button type="submit" class="btn btn-primary w-100">Send me new password</button>
 		</div>
 	</div>
 </form>

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

@@ -24,7 +24,7 @@
 		</ul>
 
 		<div class="text-center mt-4">
-			<a href="#" class="btn btn-{{ include.featured-color | default: 'secondary' }} btn-block">Choose plan</a>
+			<a href="#" class="btn btn-{{ include.featured-color | default: 'secondary' }} w-100">Choose plan</a>
 		</div>
 	</div>
 </div>

src/pages/_includes/cards/profile-edit.html

@@ -32,7 +32,7 @@
 			</div>
 
 			<div class="form-footer">
-				<button class="btn btn-primary btn-block">Save</button>
+				<button class="btn btn-primary w-100">Save</button>
 			</div>
 		</form>
 	</div>

src/pages/_includes/cards/sign-in.html

@@ -23,7 +23,7 @@
 		</div>
 
 		<div class="form-footer">
-			<button type="submit" class="btn btn-primary btn-block">Sign in</button>
+			<button type="submit" class="btn btn-primary w-100">Sign in</button>
 		</div>
 	</div>
 

src/pages/_includes/cards/sign-up.html

@@ -22,7 +22,7 @@
 		</div>
 
 		<div class="form-footer">
-			<button type="submit" class="btn btn-primary btn-block">Create new account</button>
+			<button type="submit" class="btn btn-primary w-100">Create new account</button>
 		</div>
 	</div>
 </form>

src/pages/_includes/ui/button.html

@@ -19,7 +19,7 @@
 {% endif %}
 
 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-toggle="modal" data-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-dismiss="modal"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-toggle="modal" data-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-dismiss="modal"{% endif %}>
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}

src/scss/ui/_buttons.scss

@@ -137,11 +137,6 @@
   > * {
     margin: 0 .5rem .5rem 0 !important;
   }
-
-  > .btn-block {
-    flex: 1;
-    white-space: nowrap;
-  }
 }
 
 .btn-options {

src/scss/ui/_icons.scss

@@ -16,6 +16,7 @@
 .icon-inline {
   width: 1.25em;
   height: 1.25em;
+  font-size: 1em;
 }
 
 .icon-filled {