first package, webfonts, bootstrap upgrade

package.json

@@ -79,7 +79,7 @@
   "dependencies": {
     "apexcharts": "3.8.0",
     "autosize": "4.0.2",
-    "bootstrap": "twbs/bootstrap#41fcd13",
+    "bootstrap": "twbs/bootstrap#4b3d263",
     "imask": "5.1.5",
     "selectize": "0.12.6"
   },

pages/_includes/cards/activity.html

@@ -8,7 +8,7 @@
 			</div>
 			<div class="text-muted">
 				<strong class="text-body">Martin</strong> completed the task <a href="#">Set up client chat channel</a>
-				<div class="font-light">Just now</div>
+				<div class="font-weight-light">Just now</div>
 			</div>
 		</div>
 
@@ -18,7 +18,7 @@
 			</div>
 			<div class="text-muted">
 				<strong class="text-body">Pablo</strong> left the project
-				<div class="font-light">Just now</div>
+				<div class="font-weight-light">Just now</div>
 			</div>
 		</div>
 
@@ -28,7 +28,7 @@
 			</div>
 			<div class="text-muted">
 				<strong class="text-body">Kate</strong> added the task <a href="#">Let's make Tabler awesome!</a>
-				<div class="font-light">Just now</div>
+				<div class="font-weight-light">Just now</div>
 			</div>
 		</div>
 	</div>

pages/_includes/cards/profile-2.html

@@ -3,7 +3,7 @@
       <div class="media">
          {% include ui/avatar.html person-id=8 size="xl" %}
          <div class="media-body ml-4">
-            <h3 class="font-medium m-0">{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
+            <h3>{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}</h3>
             <p class="text-muted mb-0">{{ site.data.people[20].job_title }}</p>
 
             <ul class="social-links list-inline mb-0 mt-2">

pages/_includes/cards/user-info.html

@@ -4,7 +4,7 @@
 
 <div class="card">
     <div class="card-body">
-        <div class="card-title font-bold mb-4">Basic info</div>
+        <div class="card-title font-weight-bold mb-4">Basic info</div>
         <div class="mb-3">
             {% include ui/icon.html icon="calendar" class="mr-2" %}
             <span class="mr-2">Went to:</span>

pages/_includes/layout/menu.html

@@ -5,8 +5,10 @@
    {% assign icon = level-1[1].icon %}
    <li class="nav-item">
       <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
-         {% include ui/icon.html icon=icon  %}
-         <span class="nav-link-title">
+         <span class="nav-icon">
+            {% include ui/icon.html icon=icon  %}
+         </span>
+         <span class="nav-text">
             {{ level-1[1].title }}
 
             {% unless include.top %}
@@ -26,7 +28,7 @@
             {% if doc %}
             <li class="nav-item">
                <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
-                  <span class="nav-link-title">
+                  <span class="nav-text">
                      {{ doc.title }}
 
                      {% if doc.new %}
@@ -42,7 +44,7 @@
             {% for level-2 in level-1[1].children %}
             <li class="nav-item">
                <a class="nav-link{% if level-2[0] == current-page[1] %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
-                  <span class="nav-link-title">
+                  <span class="nav-text">
                      {{ level-2[1].title }}
                      {% if level-2[1].label %}
                         <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
@@ -55,7 +57,7 @@
                      {% for level-3 in level-2[1].children %}
                      <li class="nav-item">
                         <a class="nav-link{% if level-3[0] == current-page[2] %} active{% endif %}" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
-                           <span class="nav-link-title">
+                           <span class="nav-text">
                               {{ level-3[1].title }}
                               {% if level-3[1].label %}
                                  <span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
@@ -69,7 +71,7 @@
                               {% for level-4 in level-3[1].children %}
                               <li class="nav-item">
                                  <a class="nav-link{% if level-4[0] == current-page[3] %} active{% endif %}" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
-                                    <span class="nav-link-title">
+                                    <span class="nav-text">
                                        {{ level-4[1].title }}
                                        {% if level-4[1].label %}
                                           <span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>

pages/_includes/layout/sidenav-content.html

 {% assign id = 0 | random_id %}
-<div class="p-3">
+<div class="py-3">
    <a href="{{ site.base }}" class=" navbar-brand text-inherit">
-      <img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-folded navbar-brand-logo">
-      <!--<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-expanded navbar-brand-logo">-->
+      <img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
+      <img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
    </a>
 </div>
 
-<h6 class="navbar-heading">
-   Docs
-</h6>
+<div class="flex-fill">
+   <h6 class="navbar-heading">
+      Docs
+   </h6>
 
-{% include layout/menu.html menu=include.menu class="mb-md-4" %}
+   {% include layout/menu.html menu=include.menu class="mb-md-4" %}
+
+</div>
+
+<div class="border-top">
+   <ul class="nav">
+      <li>
+         <a href="#">
+            <span class="nav-icon">{% include ui/icon.html icon="power" %}</span>
+            <span class="nav-text">Logout</span>
+         </a>
+      </li>
+   </ul>
+</div>

pages/_includes/layout/sidenav.html

 {% assign menu = page.menu | default: layout.menu %}
-<div class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %} navbar-expand-md">
+<div class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if page.nav-position == 'right' %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %}">
    {% include layout/sidenav-content.html menu=menu %}
 </div>

pages/_includes/layout/topnav.html

 <header class="navbar navbar-expand-md{% if include.dark %} navbar-dark{% endif %}">
-   {% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=include.dark %}
+   {% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark %}
 </header>
 
 {% if page.nav-position == "top" or page.nav-position == "all" %}

pages/_layouts/default.html

@@ -4,6 +4,10 @@ layout: base
 
 <div class="d-flex h-auto min-h-screen">
    <div class="d-flex flex-fill">
+      {% if page.nav-position == "all" %}
+      {% include layout/sidenav.html dark=page.sidenav-dark folded=true %}
+      {% endif %}
+
       {% if page.nav-position == "left" or page.nav-position == "right" or page.nav-position == "all"  %}
       {% include layout/sidenav.html dark=page.sidenav-dark  %}
       {% endif %}

scss/_bootstrap.scss

+@import "../node_modules/bootstrap/scss/functions";
+
+@import "variables";
+@import "mixins";
+
+@import "../node_modules/bootstrap/scss/bootstrap";

scss/_variables.scss

@@ -39,7 +39,7 @@ $teal: #2bcbba !default;
 $cyan: #17a2b8 !default;
 
 $light: #f0f2f5 !default;
-$dark: #1C2C41 !default;
+$dark: #1c2c41 !default;
 $black: #000 !default;
 $white: #fff !default;
 
@@ -235,7 +235,8 @@ $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
 //sidenav
-$sidenav-width: 16rem;
+$sidenav-width: 16rem !default;
+$sidenav-folded-width: 4.5rem !default;
 $sidenav-bg: $white !default;
 $sidenav-border-color: $border-color !default;
 $sidenav-dark-bg: $dark !default;
@@ -290,3 +291,28 @@ $flag-sizes: (
   "lg": 3rem,
   "xl": 4rem
 ) !default;
+
+/**
+Utilities
+ */
+$utilities: (
+  "opacity": (
+    property: opacity,
+    class: tracking,
+    values: (
+      tight: -.05em,
+      normal: 0,
+      wide: .05em,
+    )
+  ),
+  "leading": (
+    property: line-height,
+    class: leading,
+    values: (
+      none: 1,
+      tight: 1.25,
+      normal: $line-height-base,
+      loose: 2 !important,
+    )
+  ),
+) !default;

scss/layout/_navbar.scss

-
 .navbar {
   background: #fff;
   color: $body-color;
@@ -21,7 +20,6 @@
 
 .navbar-nav {
   flex-direction: row;
-  margin: 0 (-$navbar-nav-link-padding-x);
 
   .nav-link {
     color: $text-muted;
@@ -124,6 +122,9 @@ Sidebar
   user-select: none;
   flex-direction: column;
   align-items: inherit;
+  margin: 0;
+  pointer-events: inherit;
+  justify-content: start;
 
   .nav {
     flex-direction: column;
@@ -167,7 +168,7 @@ Sidebar
     }
   }
 
-  &:not(.sidenav-folded) {
+  &:not(.hide-navbar-folded) {
     .nav-item .nav-item .nav-link {
       padding-left: 2.5rem;
     }
@@ -181,19 +182,12 @@ Sidebar
     }
   }
 
-  .nav-link-title {
-    display: flex;
-    width: 100%;
-    align-items: center;
-  }
-
   .navbar-brand {
     text-align: center;
   }
 
   .navbar-heading {
     @extend .text-subheader;
-    padding: .5rem $sidenav-link-padding-x;
     margin: 0;
   }
 
@@ -238,17 +232,32 @@ Dark navbar
   }
 }
 
+.navbar-folded {
+  width: $sidenav-folded-width;
+  min-width: $sidenav-folded-width;
+
+  .nav-text {
+    display: none;
+  }
+}
+
+.nav-text {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
 /**
 Utils
  */
-.hide-sidenav-folded {
-  @at-root .sidenav.sidenav-folded & {
+.hide-navbar-folded {
+  @at-root .navbar-side.navbar-folded & {
     display: none;
   }
 }
 
-.hide-sidenav-expanded {
-  @at-root .sidenav:not(.sidenav-folded) & {
+.hide-navbar-expanded {
+  @at-root .navbar-side:not(.navbar-folded) & {
     display: none;
   }
 }

scss/tabler-flags.scss

+@import "bootstrap";
+@import "ui/flags";

scss/tabler.scss

-@import "../node_modules/bootstrap/scss/functions";
-
-@import "variables";
-@import "mixins";
-
-@import "../node_modules/bootstrap/scss/bootstrap";
+@import "bootstrap";
 
 @import "fonts/tabler-webfont";
 
@@ -16,7 +11,6 @@
 @import "ui/typo";
 @import "ui/icons";
 @import "ui/dropdowns";
-@import "ui/flags";
 
 @import "ui/progress";
 @import "ui/modals";
@@ -50,6 +44,7 @@
 @import "vendor/pace";
 @import "vendor/selectize";
 
+@import "utils/api";
 @import "utils/border";
 @import "utils/background";
 @import "utils/colors";

scss/utils/_text.scss

@@ -26,25 +26,11 @@
   text-transform: uppercase;
 }
 
-.tracking-tight		{ letter-spacing: -.05em !important; }
-.tracking-normal	{ letter-spacing: 0 !important; }
-.tracking-wide		{ letter-spacing: .05em !important; }
-
 .leading-none	{ line-height: 1 !important; }
 .leading-tight	{ line-height: 1.25 !important; }
 .leading-normal	{ line-height: $line-height-base !important; }
 .leading-loose	{ line-height: 2 !important; }
 
-.font-hairline	{ font-weight: 100 !important; }
-.font-thin		{ font-weight: 200 !important; }
-.font-light		{ font-weight: 300 !important; }
-.font-normal	{ font-weight: 400 !important; }
-.font-medium	{ font-weight: 500 !important; }
-.font-semibold	{ font-weight: 600 !important; }
-.font-bold		{ font-weight: 700 !important; }
-.font-extrabold	{ font-weight: 800 !important; }
-.font-black		{ font-weight: 900 !important; }
-
 
 /**
 Antialiasing