typography, alerts, card actions

pages/_docs/alerts.md

@@ -55,13 +55,12 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endexample %}
 
 ### Alert with avatar
-{% assign person = site.data.people[1] %}
 {% example %}
 {% for variant in site.variants %}
 	{% capture variant-text %}
 		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 	{% endcapture %}
-	{% include ui/alert.html type=variant.name text=variant-text avatar=true person=person %}
+	{% include ui/alert.html type=variant.name text=variant-text person-id=forloop.index %}
 {% endfor %}
 {% endexample %}
 

pages/_includes/ui/alert.html

@@ -1,13 +1,17 @@
-{% assign person = include.person %}
 <div class="alert alert-{{ include.type | default: 'primary'}}{%if include.close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
-   {% if include.avatar %}{% include ui/avatar.html person=person  %}{% endif %}
-   {% if include.icon %}{% include ui/icon.html icon=include.icon class="mr-1" %}{% endif %} {{ include.text | default:
-   "This is a custom alert box!" }}
+   {% if include.person-id %}{% include ui/avatar.html person-id=include.person-id  %}{% endif %}
+   {% if include.icon %}
+   {% include ui/icon.html icon=include.icon class="mr-1" %}
+   {% endif %}
+
+   {{ include.text | default: "This is a custom alert box!" }}
+
    {% if include.buttons %}
    <div class="btn-list">
       <a href="#" class="btn btn-success">Save changes</a>
       <a href="#" class="btn btn-secondary">Cancel</a>
    </div>
    {% endif %}
+
    {% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %}
 </div>

pages/tmp2.html

@@ -0,0 +1,42 @@
+---
+---
+
+<div class="row">
+	<div class="col-4">
+
+		<div class="card">
+			<div class="card-header">
+				<h3 class="card-title">
+					Configuration
+				</h3>
+				<div class="card-actions">
+					<a href="#">
+						Edit configuration{% include ui/icon.html icon="edit" class="ml-1" %}
+					</a>
+				</div>
+			</div>
+			<div class="card-body">
+				<dl class="row">
+					<dt class="col-5">Date:</dt>
+					<dd class="col-7">2020-01-05 16:42:29 UTC</dd>
+
+					<dt class="col-5">Account:</dt>
+					<dd class="col-7">tabler</dd>
+
+					<dt class="col-5">Location:</dt>
+					<dd class="col-7">{% include ui/flag.html flag="pl" %} Poland</dd>
+
+					<dt class="col-5">IP Address:</dt>
+					<dd class="col-7">46.113.11.3</dd>
+
+					<dt class="col-5">Operating system:</dt>
+					<dd class="col-7">OS X 10.15.2 64-bit</dd>
+
+					<dt class="col-5">Browser:</dt>
+					<dd class="col-7">Chrome</dd>
+				</dl>
+			</div>
+		</div>
+
+	</div>
+</div>

scss/_variables.scss

@@ -183,6 +183,9 @@ $container-max-widths: (
 
 //alerts
 $alert-link-font-weight: $font-weight-bold !default;
+$alert-bg-level: -8 !default;
+$alert-border-level: -6 !default;
+$alert-color-level: 8 !default;
 
 //breadcrumb
 $breadcrumb-variants: (

scss/ui/_cards.scss

@@ -118,6 +118,15 @@
   }
 }
 
+.card-actions {
+  margin-left: auto;
+  font-size: $h5-font-size;
+
+  a {
+    text-decoration: none;
+  }
+}
+
 .card-header {
   display: flex;
   align-items: center;

scss/ui/_typo.scss

@@ -51,6 +51,14 @@ blockquote {
   }
 }
 
+dl {
+  dd {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
 code {
   padding: 3px;
   background: rgba($code-color, .03);