Merge remote-tracking branch 'origin/dev-v1' into dev-v1

_config.yml

@@ -119,6 +119,6 @@ docs-menu:
     pages: [index]
   components:
     title: Components
-    pages: [alerts, avatars, badges, buttons, cards, carousel, spinners, steps, tabs, toasts, tooltips, typography]
+    pages: [alerts, avatars, badges, buttons, cards, carousel, ribbons, spinners, steps, tabs, toasts, tooltips, typography]
 
 

build/browsersync.js

@@ -5,6 +5,7 @@ bs.init({
   server: {
     routes: {
       '/': 'tmp',
+      '/dist/fonts': 'static/fonts',
       '/dist': 'dist',
       '/libs': 'static/libs',
       '/img': 'static/img',

package.json

@@ -5,12 +5,10 @@
   "scripts": {
     "start": "npm-run-all --parallel browsersync watch html-watch",
     "build": "npm-run-all lint html-build css-compile js-compile",
-
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
     "html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
     "html-build": "JEKYLL_ENV=production bundle exec jekyll build",
-
     "lint": "npm-run-all --parallel js-lint css-lint",
     "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css",
     "css-prefix": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
@@ -22,7 +20,6 @@
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"npm run js-compile-standalone\"",
-
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache js build/",
     "js-compile": "npm-run-all --parallel js-compile-* --sequential js-minify",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
@@ -53,26 +50,31 @@
   "devDependencies": {
     "apexcharts": "3.6.2",
     "bootstrap": "twbs/bootstrap#275cd7f",
+    "browser-sync": "^2.26.5",
     "bundlesize": "0.15.3",
-    "http-server": "0.11.1",
-    "popper.js": "1.15.0",
-    "npm-run-all": "4.1.5",
-    "nodemon": "1.18.11",
+    "clean-css-cli": "4.3.0",
+    "cross-env": "^5.2.0",
     "eslint": "5.16.0",
     "eslint-config-xo": "0.26.0",
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-unicorn": "8.0.2",
-    "stylelint": "9.10.1",
-    "stylelint-config-twbs-bootstrap": "0.3.0",
-    "node-sass": "4.11.0",
-    "shx": "0.3.2",
+    "http-server": "0.11.1",
+    "node-sass": "^4.12.0",
+    "nodemon": "1.18.11",
+    "npm-run-all": "4.1.5",
+    "popper.js": "1.15.0",
     "postcss-cli": "6.1.2",
-    "clean-css-cli": "4.3.0",
     "rollup": "1.9.3",
     "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-node-resolve": "4.2.2",
+    "shx": "0.3.2",
+    "stylelint": "9.10.1",
+    "stylelint-config-twbs-bootstrap": "0.3.0",
     "terser": "3.17.0",
-    "browser-sync": "^2.26.5",
-    "cross-env": "^5.2.0"
+    "icon-font-generator": "2.1.10",
+    "svgo": "1.2.2"
+  },
+  "dependencies": {
+    "outline-stroke-cli": "^1.1.0"
   }
 }

pages/_data/menu.yml

@@ -3,13 +3,24 @@ apps:
   title: Apps
   icon: package
   counter: 8
+level-1:
+  title: Level 1
+  icon: menu
+  children:
+    level-2:
+      title: Level 2
+      icon: menu
+      children:
+        level-3:
+          title: Level 3
+          icon: menu
 docs:
   title: Documentation
   icon: file-text
   docs: components
+
 changelog:
   url: changelog.html
-  active: true
   title: Changelog
   icon: file-plus
   label: v1.0.0

pages/_docs/alerts.md

 ---
 title: Alerts
+menu: docs.alerts
 ---
 
 Bootstrap provides an easy way to create predefined alert messages.

pages/_docs/avatars.md

 ---
 title: Avatars
+menu: docs.avatars
 ---
 
 Create and group avatars of various shapes and sizes with one component.
@@ -34,7 +35,7 @@ Add an online or offline status indicator to show user's availability.
 {% include ui/avatar.html person-id=13 status="success" %}
 {% include ui/avatar.html person-id=14 status="warning" %}
 {% include ui/avatar.html person-id=15 status="info" %}
-{% include ui/avatar.html person-id=16 status="gray" %}
+{% include ui/avatar.html person-id=16 status="gray" status-text="5" %}
 {% endexample %}
 
 ## Avatar shape

pages/_docs/ribbons.md

+---
+title: Ribbons
+---
+
+## Default markup
+
+{% example html columns=1 %}
+{% include cards/ribbon.html %}
+{% endexample %}
+
+## Ribbon position
+
+{% example html columns=1 %}
+{% include cards/ribbon.html top=true left=true %}
+{% endexample %}
+
+## Ribbon color
+
+{% example html columns=1 %}
+{% include cards/ribbon.html color="red" %}
+{% endexample %}
+
+## Ribbon text
+
+{% example html columns=1 %}
+{% include cards/ribbon.html color="green" text="-50%" %}
+{% endexample %}
+
+## Ribbon style
+
+{% example html columns=1 %}
+{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
+{% endexample %}

pages/_includes/cards/login.html

-<form class="card" action="" method="post">
+<form class="card" action="" method="get">
 
-    <div class="card-body p-6">
-        <div class="card-title">Login to your account</div>
+   <div class="card-body p-6">
+      <div class="card-title">Login to your account</div>
 
-        <div class="form-group">
-            <label class="form-label">Email address</label>
-            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-        </div>
-        <div class="form-group">
-            <label class="form-label">
-                Password
-                <a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
-            </label>
-            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-        </div>
-        <div class="form-group">
-            <label class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input"{{ site.base }}/>
-                <span class="custom-control-label">Remember me</span>
-            </label>
-        </div>
+      <div class="form-group">
+         <label class="form-label">Email address</label>
+         <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
+                placeholder="Enter email" autocomplete="off">
+      </div>
+      <div class="form-group">
+         <a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
+         <label class="form-label">
+            Password
+         </label>
+         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="off">
+      </div>
+      <div class="form-group">
+         <label class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" {{ site.base }}/>
+            <span class="custom-control-label">Remember me</span>
+         </label>
+      </div>
 
-        <div class="form-footer">
-            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
-        </div>
-    </div>
+      <div class="form-footer">
+         <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+      </div>
+   </div>
 </form>
 
 <div class="text-center text-muted">
-    Don't have account yet? <a href="{{ site.base }}/register.html">Sign up</a>
-</div>
\ No newline at end of file
+   Don't have account yet? <a href="{{ site.base }}/register.html">Sign up</a>
+</div>

pages/_includes/cards/ribbon.html

@@ -6,5 +6,5 @@
 		<div class="h-16"></div>
 	</div>
 
-	<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% include ui/icon.html icon="star" class="icon-filled icon-thin" %}</div>
-</div>
\ No newline at end of file
+	<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-left{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" %}{% endif %}</div>
+</div>

pages/_includes/layout/css.html

 <link href="{{ site.base }}/dist/css/tabler.css" rel="stylesheet" />
-<link href="{{ site.base }}/dist/libs/jqvmap/jqvmap.css" />
+

pages/_includes/layout/sidebar.html

-<div>
-	<div class="sidebar">
-		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum expedita hic mollitia nemo, quam vero. Ab alias
-		aliquid animi at corporis doloremque exercitationem, laborum mollitia non quisquam, reiciendis rerum, tempora.
-	</div>
-
-	<div class="sidebar-overlay" data-toggle="sidebar"></div>
-	<a href="#" class="sidebar-btn" data-toggle="sidebar">
-		{% include ui/icon.html icon="sidebar" %}
-	</a>
-</div>

pages/_includes/layout/sidenav-content.html

 {% assign id = 0 | random_id %}
-<a href="{{ site.base }}" class="navbar-brand text-inherit">
-   <img src="{{ site.base }}/img/logo{% if include.logo %}-{{ include.logo }}{% endif %}.svg" alt="" class="navbar-brand-logo">
-</a>
+<div class="p-3">
+   <a href="{{ site.base }}" class="navbar-brand text-inherit">
+      <img src="{{ site.base }}/img/logo{% if include.logo %}-{{ include.logo }}{% endif %}.svg" alt="" class="navbar-brand-logo">
+   </a>
+</div>
 
-<hr class="navbar-divider my-3" />
+<div class="container">
+   <h6 class="navbar-heading">
+      Docs
+   </h6>
 
-<h6 class="navbar-heading">
-   Docs
-</h6>
+   <ul class="navbar-nav mb-md-4">
+      {% for item in site.data.menu %}
+      {% assign icon = item[1].icon %}
+      <li class="nav-item">
+         <a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ item[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
+            {% include ui/icon.html icon=icon  %}
+            <span class="nav-link-text">{{ item[1].title }}</span>
+            {% if item[1].label %}
+            <span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
+            {% endif %}
+         </a>
+         {% if item[1].children or item[1].docs %}
+         <div class="collapse navbar-collapse" id="sidebar-{{ item[0] }}">
+            <ul class="nav nav-sm flex-column">
 
-<ul class="navbar-nav mb-md-4">
-   {% for item in site.data.menu %}
-   {% assign icon = item[1].icon %}
-   <li class="nav-item">
-      <a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ id }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
-         {% include ui/icon.html icon=icon  %}
-         <span class="nav-link-text">{{ item[1].title }}</span>
-         {% if item[1].label %}
-         <span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
-         {% endif %}
-      </a>
-      {% if item[1].children or item[1].docs %}
-      <div class="collapse navbar-collapse show" id="sidebar-{{ id }}">
-         <ul class="nav nav-sm flex-column">
+               {% if item[1].docs %}
+               {% assign docs-key = item[1].docs %}
+               {% for p in site.docs-menu[docs-key].pages %}
+               {% assign doc = site.docs | where: "slug", p | first %}
+               <li class="nav-item">
+                  <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
+                     {{ doc.title }}
+                  </a>
+               </li>
+               {% endfor %}
+               {% endif %}
 
-            {% if item[1].docs %}
-            {% assign docs-key = item[1].docs %}
-            {% for p in site.docs-menu[docs-key].pages %}
-            {% assign doc = site.docs | where: "slug", p | first %}
-            <li class="nav-item">
-               <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
-                  {{ doc.title }}
-               </a>
-            </li>
-            {% endfor %}
-            {% endif %}
-         </ul>
-      </div>
-      {% endif %}
-   </li>
-   {% endfor %}
-   <li class="nav-item dropdown">
-      <a class="nav-link" href="#sidebarAuth{{ id }}" >
-         {% include ui/icon.html icon="book-open" %}
-         <span class="nav-link-text">Components</span>
-      </a>
-   </li>
-   <li class="nav-item">
-      <a class="nav-link" href="#">
-         {% include ui/icon.html icon="git-branch" %}
-         <span class="nav-link-text">Changelog</span>
-      </a>
-   </li>
-</ul>
+               {% for p in item[1].children %}
+               <li class="nav-item">
+                  <a href="{% if p[1].url %}{{ p[1].url }}{% else %}#{% endif %}" class="nav-link">
+                     {{ p[1].title }}
+                  </a>
+                  {% if p[1].children %}
+                  <div class="collapse navbar-collapse" id="sidebar-{{ p[0] }}">
+                     <ul class="nav nav-sm flex-column">
+                        {% for r in p[1].children %}
+                        <li class="nav-item">
+                           <a href="{% if r[1].url %}{{ r[1].url }}{% else %}#{% endif %}" class="nav-link">
+                              {{ r[1].title }}
+                           </a>
+                        </li>
+                        {% endfor %}
+                     </ul>
+                  </div>
+                  {% endif %}
+               </li>
+               {% endfor %}
+            </ul>
+         </div>
+         {% endif %}
+      </li>
+      {% endfor %}
+      <li class="nav-item dropdown">
+         <a class="nav-link" href="#" >
+            {% include ui/icon.html icon="book-open" %}
+            <span class="nav-link-text">Components</span>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" href="#">
+            {% include ui/icon.html icon="git-branch" %}
+            <span class="nav-link-text">Changelog</span>
+         </a>
+      </li>
+   </ul>
+</div>

pages/_includes/layout/sidenav.html

-<div class="sidenav sidenav-dark sidenav-expand-md">
-   <div class="container">
-      {% include layout/sidenav-content.html logo="white" %}
-   </div>
+<div class="sidenav sidenav-expand-md">
+   {% include layout/sidenav-content.html logo="white" %}
 </div>
-{% comment %}
-<div class="sidenav sidenav-expand-xl">
-   <div class="container">
-      {% include layout/sidenav-content.html%}
-   </div>
-</div>
-{% endcomment %}

pages/_includes/ui/avatar.html

@@ -15,5 +15,7 @@
 	{% endunless %}
 {% endif %}
 {% assign element = include.element | default: 'span' %}
-<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}<span class="avatar-status bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
+<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}
+  <span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
+{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
 {% endremoveemptylines %}

pages/_includes/ui/icon.html

 {% capture class %}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}{% endcapture %}
 {% assign class = class | strip %}
-{% capture i %}
-{% include icons/{{ include.icon }}.svg %}
-{% endcapture %}
-{{ i | svg_icon: class }}
+<i class="icon fe fe-{{ include.icon }}"></i>

pages/_layouts/base.html

@@ -23,7 +23,7 @@
 	{% include_cached layout/css.html %}
 	{% include_cached layout/js.html %}
 </head>
-<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}">
+<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
 
    {{ content}}
 

pages/_layouts/error.html

 ---
 layout: base
+body-class: border-top-2 border-primary
 ---
 
 {% assign error = site.data.errors[page.error] %}
@@ -13,7 +14,7 @@ layout: base
 		{% else %}
 			<div class="display-3 text-muted mb-3">{{ page.error }}</div>
 
-			<h1 class="h2 mb-3">Oops&hellip; You just found an error page</h1>
+			<h1 class="h2 mb-3 font-weight-bolder">Oops&hellip; You just found an error page 😭</h1>
 			<p class="h4 text-muted font-weight-normal mb-5">{{ error }}</p>
 
 			<a class="btn btn-primary" href="javascript:history.back()">

pages/_layouts/single.html

 ---
 layout: base
+body-class: border-top-2 border-primary
 ---
 
-<div class="d-flex h-auto min-h-screen justify-content-center">
-    <div class="d-flex align-items-center justify-content-center flex-grow">
+<div class="d-flex h-auto min-h-full justify-content-center">
+    <div class="d-flex align-items-center justify-content-center flex-fill">
         <div class="container">
             <div class="row">
                 <div class="col {{ page.col-class | default: 'col-login' }} mx-auto">

scss/layout/_core.scss

@@ -4,6 +4,7 @@ html {
 }
 
 body {
+  height: 100%;
   overflow-y: scroll;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;

scss/layout/_sidenav.scss

@@ -4,7 +4,6 @@ Sidebar
 .sidenav {
   width: 16rem;
   min-width: 16rem;
-  padding: .75rem 1rem;
   background: $sidenav-bg;
   border-right: 1px solid $sidenav-border-color;
 
@@ -12,6 +11,7 @@ Sidebar
     display: flex;
     align-items: center;
     color: $text-muted;
+    border-radius: $border-radius;
 
     &.active,
     &:hover {
@@ -22,11 +22,23 @@ Sidebar
     > .icon {
       min-width: 2rem;
     }
+
+    &[data-toggle="collapse"] {
+      &:after {
+        display: block;
+        font-family: 'Feather' !important;
+        content: $icon-fe-chevron-down;
+        margin-left: auto;
+        transition: transform .3s;
+      }
+
+      &[aria-expanded="true"]:after {
+        transform: rotate(-180deg);
+      }
+    }
   }
 
   .navbar-brand {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
     text-align: center;
   }
 
@@ -39,6 +51,12 @@ Sidebar
     margin: 0;
     @extend .text-subheader;
   }
+
+  .nav {
+    .nav-item {
+      padding-left: 2rem;
+    }
+  }
 }
 
 /**

scss/tabler.scss

@@ -5,6 +5,8 @@
 
 @import "../node_modules/bootstrap/scss/bootstrap";
 
+@import "fonts/feather";
+
 @import "layout/webfonts";
 
 @import "layout/core";
@@ -58,5 +60,6 @@
 @import "utils/opacity";
 @import "utils/shadow";
 
+
 @import "dark";
 @import "rtl";

scss/ui/_avatars.scss

@@ -18,6 +18,14 @@
     font-size: 1.25em;
   }
 
+  .badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px white;
+  }
+
   @at-root a#{&} {
     cursor: pointer;
   }
@@ -32,16 +40,7 @@
   }
 }
 
-.avatar-status {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  width: .75rem;
-  height: .75rem;
-  background: #98a9bc;
-  border: 2px solid #fff;
-  border-radius: 50%;
-}
+
 
 .avatar-list {
   padding: 0;

scss/ui/_badges.scss

@@ -32,3 +32,7 @@
   background-color: transparent;
   border: 1px solid currentColor;
 }
+
+.badge-pill {
+  border-radius: 100px;
+}

scss/ui/_icons.scss

 .icon {
-  width: 1em;
-  height: 1em;
   font-size: 1em;
-  vertical-align: -.2em;
+  vertical-align: -.1em;
 }
 
 .icon-md {
-  width: px2rem(20px);
-  height: px2rem(20px);
   font-size: px2rem(20px);
 }
 
 .icon-lg {
-  width: px2rem(40px);
-  height: px2rem(40px);
   font-size: px2rem(40px);
 }
 
-.icon-thin {
-  stroke-width: 1.5px;
-}
-
-.icon-filled {
-  fill: currentColor;
-}
-
 .icons-list {
   display: flex;
   flex-wrap: wrap;

scss/ui/_inputs.scss

@@ -7,7 +7,7 @@ textarea {
 .form-label {
   display: block;
   margin-bottom: .375rem;
-  font-size: $h6-font-size;
+  font-size: $h5-font-size;
   font-weight: 600;
 }
 

scss/ui/_ribbons.scss

@@ -5,7 +5,7 @@
   top: .75rem;
   right: -($ribbon-margin);
   z-index: 1;
-  padding: .5rem 1rem;
+  padding: .375rem 1rem;
   font-weight: 600;
   color: #fff;
   text-align: center;

scss/ui/_stamps.scss

@@ -12,8 +12,6 @@
   border-radius: 3px;
 
   .icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    vertical-align: middle;
+    font-size: 1.25rem;
   }
 }

scss/utils/_border.scss

 // stylelint-disable declaration-no-important
+$border-sizing: () !default;
+$border-sizing: map-merge((
+  2: 2,
+  4: 4
+), $border-sizing);
 
-.b-dashed{
+@each $size, $value in $border-sizing {
+
+  .border-#{$size} {
+    border-width: $border-width * $value !important;
+  }
+
+  .border-top-#{$size} {
+    border-top-width: $border-width * $value !important;
+    border-top-style: solid;
+  }
+
+  .border-right-#{$size} {
+    border-right-width: $border-width * $value !important;
+    border-right-style: solid;
+  }
+
+  .border-bottom-#{$size} {
+    border-bottom-width: $border-width * $value !important;
+    border-bottom-style: solid;
+  }
+
+  .border-left-#{$size} {
+    border-left-width: $border-width * $value !important;
+    border-left-style: solid;
+  }
+}
+
+.border-dashed {
   border-style: dashed !important;
 }
 
-.b-transparent{
+.border-transparent {
   border-color: transparent !important;
 }