Update class names from left, right to start, end (#2402)

shared/includes/cards/card.html

@@ -14,8 +14,8 @@
 			<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
 		{% elsif include.status-bottom %}
 			<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
-		{% elsif include.status-left %}
-			<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
+		{% elsif include.status-start %}
+			<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
 		{% endif %}
 
 		{% if include.header or include.header-title or include.header-tabs or include.header-pills %}

shared/includes/cards/profile-timeline.html

@@ -13,7 +13,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-secondary">4 min</small>
+						<small class="float-end text-secondary">4 min</small>
 						<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
 					</div>
 
@@ -55,7 +55,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-secondary">12 min</small>
+						<small class="float-end text-secondary">12 min</small>
 						<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
 					</div>
 					<div>
@@ -72,7 +72,7 @@
 				</div>
 				<div class="flex-fill">
 					<div>
-						<small class="float-right text-secondary">34 min</small>
+						<small class="float-end text-secondary">34 min</small>
 						<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
 					</div>
 

shared/includes/cards/small-stats-2.html

@@ -13,7 +13,7 @@
 
 <div class="card" data-color={{color}}>
 	<div class="card-body">
-		<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
+		<div class="float-end avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
 			{% include "ui/icon.html" icon=icon %}
 		</div>
 		<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>

shared/includes/cards/small-stats.html

@@ -25,7 +25,7 @@
 						{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
 					{% endif %}
 					{% if include.description-value %}
-					<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
+					<span class="float-end font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
 					{% endif %}
 				</div>
 				<div class="text-secondary">

shared/includes/cards/table-users.html

@@ -30,10 +30,10 @@
 				</td>
 				<td>
 					<div class="clearfix">
-						<div class="float-left">
+						<div class="float-start">
 							<strong>{{ percentage }}%</strong>
 						</div>
-						<div class="float-right">
+						<div class="float-end">
 							<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
 						</div>
 					</div>

shared/includes/layout/sidebar.html

@@ -1,6 +1,6 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
-<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
+<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
 	<div class="container-fluid">
 		{% include "layout/navbar-toggler.html" target="sidebar-menu" %}
 

shared/includes/marketing/sections/cta.html

@@ -4,7 +4,7 @@
 		<p class="text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, ipsa? Voluptates sunt, ipsum esse quis obcaecati atque placeat consectetur beatae, tenetur ducimus iure minima expedita recusandae doloribus nam. Pariatur, facilis?</p>
 		<div class="btn-list justify-content-center mt-6">
 			{% include "ui/button.html" text="Get started" color="primary" %}
-			{% include "ui/button.html" text="Learn more" ghost=true icon-right="chevron-right" %}
+			{% include "ui/button.html" text="Learn more" ghost=true icon-end="chevron-right" %}
 		</div>
 	</div>
 </section>

shared/includes/parts/demo-layout.html

@@ -12,7 +12,7 @@
 			<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
 			{% endif %}
 		</div>
-		{% if config.sidebar-right %}
+		{% if config.sidebar-end %}
 		<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-start bg-white{% endif %}"></div>
 		{% endif %}
 	</div>

shared/includes/ui/button.html

@@ -24,6 +24,6 @@
 {% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
 {% unless include.icon-only %}
 {{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
-{% if include.icon-right %}{% include "ui/icon.html" icon=include.icon-right class="icon-right" %}{% endif %}
+{% if include.icon-end %}{% include "ui/icon.html" icon=include.icon-end class="icon-end" %}{% endif %}
 {% endunless %}
 </{{ e }}>

shared/layouts/default.html

@@ -7,7 +7,7 @@ layout: base
 <div class="page">
 	{% if layout-sidebar %}
 		<!--  BEGIN SIDEBAR  -->
-		{% include "layout/sidebar.html" dark=layout-sidebar-dark right=layout-sidebar-right transparent=layout-navbar-transparent breakpoint="lg" %}
+		{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
 		<!--  END SIDEBAR  -->
 	{% endif %}