leading -> lh

build/browsersync.js

@@ -13,13 +13,12 @@ bs.init({
     routes: {
       '/': 'tmp',
       '/dist': 'tmp-dist',
-      '/dist/fonts': 'fonts',
       '/libs': 'static/libs',
       '/img': 'static/img',
       '/node_modules': 'node_modules',
     },
   },
-  files: ['tmp/**/*', 'dist/css/*.css', 'dist/js/*.js'],
+  files: ['tmp/**/*', 'tmp-dist/css/*.css', 'tmp-dist/js/*.js'],
   watchOptions: {
     ignoreInitial: true,
   },

pages/_docs/typography.md

@@ -133,10 +133,10 @@ Utilities for controlling the tracking (letter spacing) of an element.
 Utilities for controlling the leading (line height) of an element.
 
 {% example %}
-<p class="leading-none">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
-<p class="leading-tight">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
-<p class="leading-normal">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
-<p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+<p class="lh-1">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+<p class="lh-sm">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+<p class="lh-base">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+<p class="lh-lg">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 {% endexample %}
 
 ### Antialiasing

pages/_includes/cards/gallery.html

@@ -3,7 +3,7 @@
     <a href="#" class="mb-3 d-block"><img src="{{ site.base }}/img/photos/{{ photo.file }}" class="rounded"></a>
     <div class="d-flex align-items-center">
       {% include ui/avatar.html person=include.person class="mr-3 rounded" %}
-      <div class="leading-tight">
+      <div class="lh-sm">
         <div>{{ include.person.full_name }}</div>
         <div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
       </div>

pages/_includes/cards/order-statistics.html

@@ -12,7 +12,7 @@
 
       <ul class="list-unstyled">
          {% for item in site.data.orders %}
-         <li class="row row-sm leading-tight align-items-center mb-2">
+         <li class="row row-sm lh-sm align-items-center mb-2">
             <div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
             <div class="col">
                {{ item.title }}

pages/_includes/cards/pricing-card.html

@@ -9,7 +9,7 @@
 		<div class="text-uppercase text-muted">{{ include.category | default: 'Enterprise' }}</div>
 		<div class="h1 my-4">${{ include.price | default: '79' }}</div>
 
-		<ul class="list-unstyled leading-loose">
+		<ul class="list-unstyled lh-lg">
 			<li><strong>{{ include.users | default: 10 }}</strong> Users</li>
 			{% for feature in features %}
 			<li>

pages/_includes/cards/small-stats.html

@@ -14,7 +14,7 @@
     </div>
     {% endif %}
 
-    <div class="mr-3 leading-tight">
+    <div class="mr-3 lh-sm">
       <div class="strong">
         {{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
         {% if include.small-icon %}

pages/_includes/cards/user-card.html

@@ -5,7 +5,7 @@
     <div class="float-{% if include.right %}right{% else %}left mr-3{% endif %}">
       {% include ui/avatar.html person=person class="rounded" %}
     </div>
-    <div class="leading-tight">
+    <div class="lh-sm">
       <div class="strong">{{ person.full_name }}</div>
       <div class="text-muted">{{ person.job_title }}</div>
     </div>

pages/_includes/layout/menu-aside.html

@@ -18,11 +18,11 @@
 			{% assign badge-color = level-1[1].badge-color | default: 'green' %}
 			{% include ui/badge.html text=badge color=badge-color %}
 			{% endif %}
-		</a>
 
-		{% comment %}
-		<div class="sidebar-nav-title">{{ level-1[1].title }}</div>
-		{% endcomment %}
+        {% if level-1[1].children %}
+        <span class="sidebar-nav-arrow"></span>
+        {% endif %}
+		</a>
 
 		{% if level-1[1].children %}
 		<ul class="sidebar-subnav">

pages/_includes/layout/navbar.html

@@ -16,7 +16,7 @@
       <a href="#" data-toggle="dropdown"
          class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
          {% include ui/avatar.html src=person.photo size="sm" %}
-         <span class="ml-2 d-none d-lg-block leading-none">
+         <span class="ml-2 d-none d-lg-block lh-1">
             {{ person.full_name }}
             <span class="text-muted d-block mt-1 text-h6">Administrator</span>
          </span>

pages/_includes/ui/progress-description.html

@@ -2,7 +2,7 @@
 {% assign color = include.color | default: 'blue' %}
 
 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
-   <div class="d-flex mb-1 align-items-center leading-none">
+   <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>
       {% if include.description %}
          <div class="text-h6 text-muted ml-2">{{ include.description }}</div>

pages/_includes/ui/trending.html

@@ -10,6 +10,6 @@
    {% assign icon = 'trending-down' %}
 {% endif %}
 
-<span class="text-{{ color }} d-inline-flex align-items-center leading-none{% if include.class %} {{ include.class }}{% endif %}">
+<span class="text-{{ color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
    {{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" class="ml-1" %}
 </span>

pages/tmp2.html

@@ -13,7 +13,7 @@ page-title: Tabler licence
 					</div>
 					<div>
 						<small class="text-muted">tabler/tabler is licensed under the</small>
-						<h3 class="leading-none">MIT License</h3>
+						<h3 class="lh-1">MIT License</h3>
 					</div>
 				</div>
 

pages/users.html

@@ -25,11 +25,11 @@ menu: users
                </div>
 
                {% if online_counter > 7 %}
-                  <div class="col-auto leading-none align-self-start">
+                  <div class="col-auto lh-1 align-self-start">
                      {% include ui/badge.html text="online" color="green-lt" %}
                   </div>
                {% elsif online_counter > 5 %}
-               <div class="col-auto leading-none align-self-start">
+               <div class="col-auto lh-1 align-self-start">
                   {% include ui/badge.html text="offline" color="gray-lt" %}
                </div>
                {% endif %}

scss/_utilities.scss

@@ -20,16 +20,6 @@ $utilities: (
       wide: .05em,
     )
   ),
-  "leading": (
-    property: line-height,
-    class: leading,
-    values: (
-      none: 1,
-      tight: 1.3333334,
-      normal: $line-height-base,
-      loose: 2 !important,
-    )
-  ),
   "cursor": (
     property: cursor,
     class: cursor,

scss/_variables.scss

@@ -113,9 +113,12 @@ $avatar-sizes: (
 //Fonts
 $font-size-base: .9375rem !default;
 $font-weight-bold: 600 !default;
-$line-height-base: 1.6 !default;
 $body-letter-spacing: null !default;
 
+$line-height-base: 1.6 !default;
+$line-height-sm: 1.3333334 !default;
+$line-height-lg: 2 !default;
+
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
 $border-radius: 3px !default;

scss/layout/_layout.scss

@@ -355,6 +355,21 @@ Sidebar menu
   }
 }
 
+.sidebar-nav-arrow {
+  outline: 1px solid green;
+  display: block;
+  margin-left: auto;
+  @include caret(right);
+}
+
+.sidebar-subnav {
+  display: none;
+
+  .sidebar-nav-item.active & {
+    display: block;
+  }
+}
+
 .sidebar-nav-title {
   @include subheader(false);
   color: inherit;