new components, ribbons, button fixes

package.json

@@ -108,6 +108,22 @@
       "path": "./dist/css/tabler.min.css",
       "maxSize": "45 kB"
     },
+    {
+      "path": "./dist/css/tabler-charts.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-charts.min.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.min.css",
+      "maxSize": "2 kB"
+    },
     {
       "path": "./dist/js/tabler.js",
       "maxSize": "2 kB"

pages/_components/card-ribbon.html

+---
+title: Card with ribbon
+columns: 1
+---
+
+{% include cards/ribbon.html right=true text="-10%" lorem=true color="orange" bookmark=true %}

pages/_includes/cards/ribbon.html

@@ -2,9 +2,12 @@
 {% assign product = site.data.products[product-id] %}
 
 <div class="card">
-	<div class="card-body p-5">
-		<div class="h-10"></div>
+	<div class="card-body{% unless include.lorem %} h-8{% endunless %}">
+      {% if include.lorem %}
+      <h3 class="card-title">Card with ribbon</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
+      {% endif %}
 	</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 %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" %}{% endif %}</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 %}">{% if include.text %}{{ include.text }}{% else %}{% include ui/icon.html icon="star" class="icon-filled" use-svg=true %}{% endif %}</div>
 </div>

pages/_includes/parts/input-selectgroups.html

@@ -14,5 +14,5 @@
 
 <div class="mb-3">
    <label class="form-label">Your skills</label>
-   {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
+   {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
 </div>

pages/_includes/parts/navbar.html

@@ -17,17 +17,8 @@
       {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
    </a>
 
-   {% if include.search %}
-   <div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
-      <div class="input-icon">
-         <span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
-         <input type="text" class="form-control form-control-light" placeholder="Search" tabindex="-1">
-      </div>
-   </div>
-   {% endif %}
-
    {% if include.plus-left %}
-   <a href="javascript:void(0)" class="btn btn-primary">
+   <a href="#" class="btn btn-primary">
       {% include ui/icon.html icon="plus" %}
    </a>
    {% endif %}
@@ -66,7 +57,7 @@
                <div class="flex">
                   <span>6 Notifications</span>
                </div>
-               <a href="javascript:void(0)">See all <i class="fa fa-angle-right text-muted"></i></a>
+               <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
             </div>
          </div>
       </li>
@@ -74,23 +65,20 @@
 
       {% if include.progress %}
       <li class="nav-item">
-         <a href="javascript:void(0)" class="nav-link text-muted">
+         <a href="#" class="nav-link text-muted">
             Profile Completeness: 70%
-            <!--<span class="progress progress-xs">-->
-            <!--<span class="progress-bar" style="width: 70%"></span>-->
-            <!--</span>-->
          </a>
       </li>
       {% endif %}
 
       {% if include.language %}
       <li class="nav-item dropdown">
-         <a href="javascript:void(0)" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+         <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
             <span class="flag flag-gb mr-2"></span>English
          </a>
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
             {% for language in site.data.languages %}
-            <a href="javascript:void(0)" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
+            <a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
                language.name }}</a>
             {% endfor %}
          </div>
@@ -103,7 +91,7 @@
 
       {% if include.user-menu %}
       <li class="nav-item dropdown">
-         <a href="javascript:void(0)" data-toggle="dropdown"
+         <a href="#" data-toggle="dropdown"
             class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
             {% if include.user-menu == 1 %}
             {% include ui/avatar.html src=person.photo %}
@@ -123,24 +111,24 @@
             {% endif %}
          </a>
          <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-            <a class="dropdown-item" href="javascript:void(0)">
+            <a class="dropdown-item" href="#">
                {% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
             </a>
-            <a class="dropdown-item" href="javascript:void(0)">
+            <a class="dropdown-item" href="#">
                {% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
             </a>
-            <a class="dropdown-item" href="javascript:void(0)">
+            <a class="dropdown-item" href="#">
                <span class="float-right"><span class="badge badge-primary">6</span></span>
                {% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
             </a>
-            <a class="dropdown-item" href="javascript:void(0)">
+            <a class="dropdown-item" href="#">
                {% include ui/icon.html icon="send" class="dropdown-icon" %} Message
             </a>
             <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="javascript:void(0)">
+            <a class="dropdown-item" href="#">
                {% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
             </a>
-            <a class="dropdown-item" href="javascript:void(0)">
+            <a class="dropdown-item" href="#">
                {% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
             </a>
          </div>
@@ -149,18 +137,18 @@
 
       {% if include.manage %}
       <li class="nav-item">
-         <a href="javascript:void(0)" class="btn btn-secondary">Manage Widgets</a>
+         <a href="#" class="btn btn-secondary">Manage Widgets</a>
       </li>
       {% endif %}
 
       {% if include.register %}
       <li class="nav-item ">
-         <a href="javascript:void(0)" class="nav-link">
+         <a href="#" class="nav-link">
             Sign in
          </a>
       </li>
       <li class="d-flex align-items-center">
-         <a href="javascript:void(0)" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
+         <a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
             Register
          </a>
       </li>
@@ -168,19 +156,19 @@
 
       {% if include.plus %}
       <li class="nav-item">
-         <a href="javascript:void(0)" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
+         <a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
       </li>
       {% endif %}
 
       {% if include.premium %}
       <li class="nav-item">
-         <a href="javascript:void(0)" class="btn btn-success">Go Premium</a>
+         <a href="#" class="btn btn-success">Go Premium</a>
       </li>
       {% endif %}
 
       {% if include.sync %}
       <li class="nav-item">
-         <a href="javascript:void(0)" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
+         <a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
       </li>
       {% endif %}
    </ul>

pages/_includes/ui/empty.html

@@ -3,7 +3,7 @@
    <div class="empty-icon">
       {% if include.illustration %}
       {% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %}
-      {% include ui/illustration.html image=illustration-src class="h-12 mb-4" %}
+      {% include ui/illustration.html image=illustration-src class="h-8 mb-4" %}
       {% elsif include.icon-text %}
       <div class="display-4">{{ include.icon-text }}</div>
       {% else %}

pages/_includes/ui/icon.html

@@ -5,12 +5,18 @@
    {% include_cached {{ svg-file }} %}
    {% endcapture %}
 
+   {% assign replace-to = "icon" %}
+
    {% if include.right %}
-   {% assign replace-to = 'class="icon icon-right"' %}
-   {% else %}
-   {% assign replace-to = 'class="icon"' %}
+   {% assign replace-to = replace-to | append: " icon-right" %}
+   {% endif %}
+
+   {% if include.class %}
+   {% assign replace-to = replace-to | append: ' ' | append: include.class %}
    {% endif %}
 
+   {% assign replace-to = 'class="' | append: replace-to | append: '"' %}
+
    {{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
 {% else %}
    {% assign provider = include.provider | default: "fe" %}

pages/_layouts/component.html

@@ -10,7 +10,7 @@ og-component: true
 <div class="row">
    <div class="col-lg-3">
       <div class="list-group list-group-transparent mb-0">
-         {% assign components = site.components | sort: title %}
+         {% assign components = site.components | sort: 'title' %}
          {% for component in components %}
          <a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
          {% endfor %}
@@ -18,7 +18,7 @@ og-component: true
    </div>
    <div class="col-lg-9">
       <div class="card">
-         <div class="card-body">
+         <div class="card-body p-6">
             <div class="card-title">{{ page.title }}</div>
             <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
 
@@ -31,13 +31,13 @@ og-component: true
                </div>
             </div>
 
-            <div class="highlight m-0 rounded-0 rounded-bottom">
+            <div class="highlight m-0 rounded-0 rounded-bottom mb-3">
                {{ content | highlight_tidy: 'html' }}
             </div>
 
             <div class="row">
-               <div class="col">{% include ui/button.html text="Copy code" color="secondary" block=true class="mt-4" %}</div>
-               <div class="col">{% include ui/button.html text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
+               <div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
+               <div class="col">{% include ui/button.html icon="codesandbox" text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
             </div>
          </div>
       </div>

pages/ribbons.html

@@ -4,25 +4,27 @@ page-title: Ribbons
 done: true
 ---
 
+{% assign col-class = "col-sm-6 col-lg-4 col-xl-3" %}
+
 <div class="row">
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html top=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html top=true left=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bottom=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html left=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html left=true bottom=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true bottom=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true left=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true left=true bottom=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html color="red" %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html color="green" bottom=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="teal" left=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="purple" top=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
-	<div class="col-md-6 col-lg-3">{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
-</div>
\ No newline at end of file
+	<div class="{{ col-class }}">{% include cards/ribbon.html %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html top=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html top=true left=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bottom=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html left=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html left=true bottom=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true bottom=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true left=true bottom=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html color="red" %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html color="green" bottom=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal" left=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow" left=true bottom=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink" left=true top=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple" top=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="teal-lt" left=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="yellow-lt" left=true bottom=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="pink-lt" left=true top=true %}</div>
+	<div class="{{ col-class }}">{% include cards/ribbon.html bookmark=true color="purple-lt" top=true %}</div>
+</div>

scss/_variables.scss

@@ -137,46 +137,24 @@ $hr-margin-y: 1rem !default;
 //Sizing
 $spacer: 1rem !default;
 $spacers: (
-  0: 0rem,
-  1: .25rem,
-  2: .5rem,
-  3: .75rem,
-  4: 1rem,
-  5: 1.5rem,
-  6: 2rem,
-  7: 2.5rem,
-  8: 3rem,
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.25,
+  5: $spacer * 1.5,
+  6: $spacer * 3,
+  7: $spacer * 6,
+  8: $spacer * 9,
+  9: $spacer * 12,
 ) !default;
 
 $size-spacers: (
-  9: 4rem,
-  10: 5rem,
-  11: 6rem,
-  12: 8rem,
-  13: 10rem,
-  14: 12rem,
-  15: 14rem,
-  16: 16rem,
-  17: 18rem,
-  18: 20rem,
   auto: auto,
   px: 1px,
   full: 100%
 ) !default;
 
-$size-max-spacers: (
-  xs: 20rem,
-  sm: 24rem,
-  md: 28rem,
-  lg: 32rem,
-  xl: 36rem,
-  2 xl: 42rem,
-  3 xl: 48rem,
-  4 xl: 56rem,
-  5 xl: 64rem,
-  6 xl: 72rem,
-  full: 100%
-) !default;
 
 $sizes-percentage: (
   1: 1%,
@@ -187,8 +165,6 @@ $sizes-percentage: (
   auto: auto
 ) !default;
 
-//Ribbons
-$ribbon-margin: .25rem !default;
 
 $loader-size: 2.5rem !default;
 
@@ -299,6 +275,9 @@ $yiq-contrasted-threshold: 200 !default;
 $progress-bg: $gray-100 !default;
 $progress-height: .75rem !default;
 
+//ribbons
+$ribbon-margin: .25rem !default;
+
 
 $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;

scss/mixins/_functions.scss

@@ -2,8 +2,15 @@
   @return ($px / 16px) * 1rem;
 }
 
+@function alpha-attribute($color, $background) {
+  $percent: alpha($color) * 100%;
+  $opaque: opacify($color, 1);
+
+  @return mix($opaque, $background, $percent);
+}
+
 @function theme-color-lighter($color) {
-  @return rgba($color, .2);
+  @return alpha-attribute(rgba($color, .2), #fff);
 }
 
 @function theme-color-lightest($color) {

scss/ui/_buttons.scss

@@ -4,7 +4,7 @@
   justify-content: center;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
 
-  &:not([class^='btn-outline']):not([class*=' btn-outline']) {
+  &:not([class^='btn-outline']):not([class*=' btn-outline']):not(.btn-secondary) {
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
     text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
 

scss/ui/_ribbons.scss

@@ -5,14 +5,15 @@
   top: .75rem;
   right: -($ribbon-margin);
   z-index: 1;
-  padding: .25rem 1rem;
-  font-weight: 600;
+  padding: .25rem .75rem;
+  font-weight: 700;
   color: #fff;
   text-align: center;
   background: $primary;
   border-color: $primary;
-  font-size: 1rem;
-  line-height: 1.5;
+  text-transform: uppercase;
+  font-size: $h6-font-size;
+  line-height: 1.5rem;
 
   &::before {
     position: absolute;
@@ -49,8 +50,8 @@
 .ribbon-top {
   top: -($ribbon-margin);
   right: .75rem;
-  width: 2.25rem;
-  padding: 1rem 0;
+  width: 2rem;
+  padding: .25rem 0;
 
   &::before {
     top: 0;
@@ -93,7 +94,7 @@
 }
 
 .ribbon-bookmark {
-  padding-left: .5rem;
+  padding-left: .25rem;
 
   &::after {
     position: absolute;
@@ -107,26 +108,26 @@
     border-color: inherit;
     border-right-width: 0;
     border-left-color: transparent;
-    border-left-width: .75rem;
+    border-left-width: .5rem;
   }
 
   &.ribbon-left {
     padding-right: .5rem;
-    padding-left: 1rem;
+    padding-left: .5rem;
 
     &::after {
       right: auto;
       left: 100%;
       border-right-color: transparent;
 
-      border-right-width: .75rem;
+      border-right-width: .5rem;
       border-left-width: 0;
     }
   }
 
   &.ribbon-top {
     padding-right: 0;
-    padding-bottom: .5rem;
+    padding-bottom: .25rem;
     padding-left: 0;
 
     &::after {
@@ -137,7 +138,7 @@
       border-width: 1rem;
       border-top-width: 0;
       border-bottom-color: transparent;
-      border-bottom-width: .75rem;
+      border-bottom-width: .5rem;
     }
   }
 }

scss/ui/forms/_input.selectgroup.scss

@@ -12,9 +12,18 @@ Selectgroup
 .selectgroup-item {
   position: relative;
   flex-grow: 1;
+  margin: 0;
 }
 
-.selectgroup:not(.selectgroup-vertical) > .selectgroup-item {
+.selectgroup-separated {
+  margin: 0 -.5rem -.5rem 0;
+
+  .selectgroup-item {
+    margin: 0 .5rem .5rem 0;
+  }
+}
+
+.selectgroup:not(.selectgroup-vertical):not(.selectgroup-separated) > .selectgroup-item {
   & + .selectgroup-item {
     margin-left: -1px;
   }
@@ -30,7 +39,7 @@ Selectgroup
   }
 }
 
-.selectgroup-vertical > .selectgroup-item {
+.selectgroup-vertical:not(.selectgroup-separated) > .selectgroup-item {
   &:not(:last-child) {
     margin-bottom: 0;
   }
@@ -64,7 +73,7 @@ Selectgroup
   display: block;
   min-width: $input-height;
   padding: $input-btn-padding-y 1rem;
-  font-size: $font-size-base;
+  font-size: $input-btn-font-size;
   line-height: $input-line-height;
   color: $text-muted;
   text-align: center;

scss/utils/_sizing.scss

@@ -25,9 +25,3 @@
 
 .h-screen	{ height: 100vh !important; }
 .w-screen	{ width: 100vw !important; }
-
-@each $size-name, $size in $size-max-spacers {
-  .max-w-#{$size-name} { max-width: $size !important; }
-  .max-h-#{$size-name} { max-height: $size !important; }
-}
-