bug #973 `fw-...`, `.fs-...` is missed (#987)

src/pages/_docs/avatars.md

@@ -108,7 +108,7 @@ Change the shape of an avatar with the default Bootstrap image classes. You can
 {% include ui/avatar.html person-id=18 shape="rounded" %}
 {% include ui/avatar.html person-id=19 shape="rounded-circle" %}
 {% include ui/avatar.html person-id=20 shape="rounded-0" %}
-{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
+{% include ui/avatar.html person-id=21 shape="rounded-3" %}
 {% endcapture %}
 {% include example.html code=code centered=true %}
 

src/pages/_docs/badges.md

@@ -12,7 +12,7 @@ The default badges are square and come in the basic set of colors.
 
 {% capture code %}
 {% for color in site.colors %}
-<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
+<span class="badge bg-{{ color[0] }}">{{ color[1].title }}</span>
 {% endfor %}
 {% endcapture %}
 {% include example.html code=code centered=true %}
@@ -47,7 +47,7 @@ You can create a soft colour variant of a corresponding contextual badge variati
 
 {% capture code %}
 {% for color in site.colors %}
-<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
+<span class="badge bg-{{ color[0] }}-lt">{{ color[1].title }}</span>
 {% endfor %}
 {% endcapture %}
 {% include example.html code=code centered=true %}
@@ -59,7 +59,7 @@ Place the badge within an `<a>` element if you want it to perform the function o
 
 {% capture code %}
 {% for color in site.colors %}
-<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
+<a href="#" class="badge bg-{{ color[0] }}">{{ color[1].title }}</a>
 {% endfor %}
 {% endcapture %}
 {% include example.html code=code centered=true %}
@@ -77,19 +77,6 @@ Leave the HTML element empty if you want to create badges without any text. Empt
 {% include example.html code=code centered=true %}
 
 
-## Badge avatars
-
-Create the `.badge-avatar` class to add an avatar that will make a badge more personalized.
-
-{% capture code %}
-{% include ui/badge.html person-id=1 %}
-{% include ui/badge.html person-id=2 %}
-{% include ui/badge.html person-id=3 %}
-{% include ui/badge.html person-id=4 %}
-{% include ui/badge.html person-id=5 %}
-{% endcapture %}
-{% include example.html code=code %}
-
 ## Button with badge
 
 Badges can be used as part of links or buttons to provide a counter.

src/pages/_includes/cards/company-lookup.html

@@ -6,7 +6,7 @@
                  style="background-image: url(https://logo.clearbit.com/amazon.com?size=100)"></div>
          </div>
          <div class="col">
-            <div class="h3 m-0 font-weight-normal">amazon.com</div>
+            <div class="h3 m-0 fw-normal">amazon.com</div>
          </div>
       </div>
 

src/pages/_includes/cards/icons.html

@@ -29,7 +29,7 @@
 						{% for icon in icons limit: limit %}
 						<a href="#" class="demo-icons-list-item" data-toggle-icon="{{ icon }}" title="{{ icon }}" data-icon-svg="{% capture svg %}{% highlight html %}{% include ui/icon.html icon=icon %}{% endhighlight %}{% endcapture %}{{ svg | escape }}">
 							{% include ui/icon.html icon=icon %}
-							<div class="mt-1 text-muted text-h5">{{ icon }}</div>
+							<div class="mt-1 text-muted fs-5">{{ icon }}</div>
 						</a>
 						{% endfor %}
 						{% for icon in (0..20) %}

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

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

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

@@ -16,7 +16,7 @@
 				<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
 				<div class="col">
 					{{ item.title }}
-					<div class="text-h6 text-muted">{{ item.subtitle }}</div>
+					<div class="fs-6 text-muted">{{ item.subtitle }}</div>
 				</div>
 				<div class="col-auto small text-muted"><strong class="text-body">{{ forloop.index | random_number: 500, 2000
 					| intcomma }}</strong> orders

src/pages/_includes/cards/small-stats-2.html

@@ -16,7 +16,7 @@
 		<div class="float-right 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-muted font-weight-normal mt-0">{{ include.title | default: 'Customers' }}</div>
+		<div class="text-muted fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>
 		<h3 class="h2 mt-2 mb-3">{{ include.count | default: "1,850" }}</h3>
 		<p class="mb-0 text-muted">
 			{% include ui/trending.html value=include.growth %}

src/pages/_includes/ui/progress-description.html

@@ -3,11 +3,11 @@
 
 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
    <div class="d-flex mb-1 align-items-center lh-1">
-      <div class="text-h5 font-weight-bolder m-0">{{ include.label | default: 'Label' }}</div>
+      <div class="fs-5 font-weight-bolder m-0">{{ include.label | default: 'Label' }}</div>
       {% if include.description %}
-         <div class="text-h6 text-muted ms-2">{{ include.description }}</div>
+         <div class="fs-6 text-muted ms-2">{{ include.description }}</div>
       {% endif %}
-      <span class="ms-auto text-h6 strong">{{ include.value }}%</span>
+      <span class="ms-auto fs-6 strong">{{ include.value }}%</span>
    </div>
    {% include ui/progress.html size=size value=include.value color=color %}
 </div>

src/scss/_utilities.scss

@@ -49,27 +49,6 @@ $utilities: (
       grabbing: grabbing,
     )
   ),
-  "font-size": (
-    property: font-size,
-    class: text,
-    values: (
-      h1: $h1-font-size,
-      h2: $h2-font-size,
-      h3: $h3-font-size,
-      h4: $h4-font-size,
-      h5: $h5-font-size,
-      h6: $h6-font-size,
-    )
-  ),
-  "font-weight": (
-    property: font-weight,
-    values: (
-      light: $font-weight-light,
-      normal: $font-weight-normal,
-      medium: $font-weight-medium,
-      bold: $font-weight-bold,
-    )
-  ),
   "border": (
     property: border,
     values: $border-values

src/scss/ui/_badges.scss

@@ -9,7 +9,6 @@
   min-width: ($badge-padding-y * 2 ) + ($badge-font-size / 100% * 1em);
   font-weight: $headings-font-weight;
   letter-spacing: .04em;
-  text-transform: uppercase;
 
   @at-root a#{&} {
     color: $white;
@@ -25,13 +24,6 @@
     border-radius: $border-radius-pill;
   }
 
-  .avatar {
-    box-sizing: content-box;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin: 0 .5rem 0 -.5rem;
-  }
-
   .icon {
     width: 1em;
     height: 1em;
@@ -47,6 +39,5 @@
 }
 
 .badge-pill {
-  border-radius: 100px;
-  min-width: 1.75em;
+  border-radius: $border-radius-pill;
 }
\ No newline at end of file