avatars, cards, steps, ui fixes

_config.yml

@@ -97,7 +97,12 @@ colors:
     hex: '#354051'
     name: Dark
 
-variants: [primary, secondary, success, info, warning, danger, dark]
+variants:
+  success: danger
+  info: danger
+  warning: danger
+  danger: danger
+
 socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]
 
 months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
@@ -108,6 +113,6 @@ docs-menu:
 - title: Getting started
   pages: [index]
 - title: Components
-  pages: [avatars, badges, buttons, carousel, spinners, steps, toasts, tooltips, typography]
+  pages: [alerts, avatars, badges, buttons, carousel, spinners, steps, tabs, toasts, tooltips, typography]
 
 

package.json

@@ -17,7 +17,7 @@
     "css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/tabler.min.css dist/css/tabler.css",
     "css-copy": "cross-env-shell shx mkdir -p site/static/dist/ && cross-env-shell shx cp -r dist/css/ site/static/dist/",
     "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
-    "css-main": "npm-run-all css-compile",
+    "css-main": "npm-run-all css-compile css-prefix",
     "css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",

pages/400.html

@@ -1,6 +0,0 @@
----
-title: Page 400
-layout: error
-error: 400
-done: true
----

pages/401.html

@@ -1,6 +0,0 @@
----
-title: Page 401
-layout: error
-error: 401
-done: true
----

pages/403.html

@@ -1,6 +0,0 @@
----
-title: Page 403
-layout: error
-error: 403
-done: true
----

pages/500.html

@@ -1,6 +0,0 @@
----
-title: Page 500
-layout: error
-error: 500
-done: true
----

pages/503.html

@@ -1,6 +0,0 @@
----
-title: Page 503
-layout: error
-error: 503
-done: true
----

pages/_docs/alerts.md

@@ -0,0 +1,42 @@
+---
+title: Alerts
+---
+
+Bootstrap provides an easy way to create predefined alert messages.
+
+## Default markup
+
+{% example html %}
+{% for variant in site.variants %}
+	{% capture text_with_variant %}
+		This is a {{ variant }} alert — check it out!
+	{% endcapture %}
+	{% include ui/alert.html type=variant text=text_with_variant %}
+{% endfor %}
+{% endexample %}
+
+
+## Alert Links
+
+Add the `alert-link` class to any links inside the alert box to create "matching colored links":
+
+{% example html %}
+{% for variant in site.variants %}
+	{% capture text_with_variant %}
+		This is a {{ variant }} alert — <a href="#">check it out!</a>
+	{% endcapture %}
+	{% include ui/alert.html type=variant text=text_with_variant %}
+{% endfor %}
+{% endexample %}
+
+
+## Closing Alerts
+
+{% example html %}
+{% for variant in site.variants %}
+	{% capture text_with_variant %}
+		This is a {{ variant }} alert — check it out!
+	{% endcapture %}
+	{% include ui/alert.html type=variant text=text_with_variant close=true %}
+{% endfor %}
+{% endexample %}

pages/_docs/avatars.md

@@ -4,7 +4,7 @@ title: Avatars
 
 Create and group avatars of various shapes and sizes with one component.
 
-### Default markup
+## Default markup
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html person-id=1 %}
@@ -12,7 +12,7 @@ Create and group avatars of various shapes and sizes with one component.
 {% include ui/avatar.html person-id=3 %}
 {% endexample %}
 
-### Avatar size
+## Avatar size
 
 Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
 
@@ -24,7 +24,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
 {% include ui/avatar.html person-id=6 size="sm" %}
 {% endexample %}
 
-### Avatar status
+## Avatar status
 
 Add an online or offline status indicator to show user's availability.
 
@@ -37,7 +37,7 @@ Add an online or offline status indicator to show user's availability.
 {% include ui/avatar.html person-id=16 status="gray" %}
 {% endexample %}
 
-### Avatar shape
+## Avatar shape
 
 Change the shape of an avatar with the default Bootstrap image classes.
 
@@ -49,7 +49,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
 {% endexample %}
 
-### Initials
+## Initials
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html placeholder="AB" size="xl" %}
@@ -60,7 +60,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% endexample %}
 
 
-### Avatar initials color
+## Avatar initials color
 
 [See more]({% docs_url colors %})
 
@@ -72,7 +72,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html placeholder="IJ" color="purple" %}
 {% endexample %}
 
-### Avatar initials icons
+## Avatar initials icons
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html icon="user" %}
@@ -80,7 +80,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html icon="user-plus" %}
 {% endexample %}
 
-### Avatars list
+## Avatars list
 
 {% example html %}
 <div class="avatar-list">

pages/_docs/badges.md

@@ -4,7 +4,7 @@ title: Badges
 
 A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% for color in site.colors %}
@@ -12,7 +12,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endfor %}
 {% endexample %}
 
-### Pill badges
+## Pill badges
 
 {% example html %}
 {% for color in site.colors %}
@@ -21,7 +21,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-### Soft badges
+## Soft badges
 
 {% example html %}
 {% for color in site.colors %}
@@ -30,7 +30,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-### Links
+## Links
 
 {% example html %}
 {% for color in site.colors %}
@@ -39,7 +39,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-### Empty badges
+## Empty badges
 
 {% example html %}
 {% for color in site.colors %}

pages/_docs/buttons.md

@@ -2,7 +2,7 @@
 title: Buttons
 ---
 
-### Default markup
+## Default markup
 
 {% example html wrapper=btn-list %}
 {% include ui/button.html color="primary" text="Button" %}

pages/_docs/index.md

@@ -8,7 +8,7 @@ We’ve created this admin panel for everyone who wants to create any templates
 
 
 
-### Setup environment
+## Setup environment
 
 To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
 
@@ -20,13 +20,13 @@ To use our build system and run our documentation locally, you'll need a copy of
   
 When completed, you'll be able to run the various commands provided from the command line.
 
-### Build Tabler locally
+## Build Tabler locally
 
 1. From the root `/tabler` directory, run `npm run serve` in the command line.
 2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
 3. Any change in `/src` directory will build application and refresh the page.
 
 
-### Bugs and feature requests
+## Bugs and feature requests
 
 Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

pages/_docs/spinners.md

@@ -2,14 +2,14 @@
 title: Spinners
 ---
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% include ui/spinner.html %}
 {% endexample %}
 
 
-### Colors
+## Colors
 
 {% example html %}
 {% for color in site.colors %}
@@ -18,14 +18,14 @@ title: Spinners
 {% endfor %}
 {% endexample %}
 
-### Size
+## Size
 
 {% example html %}
 {% include ui/spinner.html %}
 {% include ui/spinner.html size="sm" %}
 {% endexample %}
 
-### Growing spinner
+## Growing spinner
 
 {% example html %}
 {% include ui/spinner.html type="grow" %}
@@ -38,7 +38,7 @@ title: Spinners
 {% endfor %}
 {% endexample %}
 
-### Buttons
+## Buttons
 
 {% example html wrapper=btn-list %}
 {% include ui/button.html spinner=true text="Button" color="primary" %}

pages/_docs/steps.md

@@ -4,32 +4,32 @@ title: Steps
 
 Steps are progress indicators of a sequence of task steps.
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% include ui/steps.html show-title=true %}
 {% endexample %}
 
-### Tooltips
+## Tooltips
 
 {% example html %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
 {% endexample %}
 
-### Color
+## Color
 
 {% example html %}
 {% include ui/steps.html color="green" show-title=true %}
 {% include ui/steps.html color="red" show-title=true %}
 {% endexample %}
 
-### Steps without title
+## Steps without title
 
 {% example html %}
 {% include ui/steps.html show-tooltip=true %}
 {% endexample %}
 
-### Steps with numbers
+## Steps with numbers
 
 {% example html %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}

pages/_docs/tabs.md

@@ -0,0 +1,39 @@
+---
+title: Tabs
+---
+
+## Default markup
+
+{% example html columns=1 %}
+{% include cards/tabs.html id="ex1" %}
+{% endexample %}
+
+## Tabs with icons
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true settings=true id="ex2" %}
+{% endexample %}
+
+## Tabs only with icons
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
+{% endexample %}
+
+## Tabs with dropdown
+
+{% example html columns=1 %}
+{% include cards/tabs.html dropdown=true id="ex4" %}
+{% endexample %}
+
+## Full-width tabs
+
+{% example html columns=1 %}
+{% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
+{% endexample %}
+
+## Alternate style
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
+{% endexample %}

pages/_docs/toasts.md

@@ -4,7 +4,7 @@ title: Toasts
 
 The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% include ui/toast.html %}

pages/_docs/tooltips.md

@@ -5,7 +5,7 @@ title: Tooltips
 The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
 
 
-### Default markup
+## Default markup
 
 {% example html wrapper=btn-list %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
@@ -22,7 +22,7 @@ The Tooltip component is small pop-up box that appears when the user moves the m
 </button>
 {% endexample %}
 
-### Tooltip with HTML
+## Tooltip with HTML
 
 {% example html wrapper=btn-list %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">

pages/_docs/typography.md

@@ -3,7 +3,7 @@ title: Typography
 description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
 ---
 
-### Text alignment
+## Text alignment
 
 Easily realign text to components with text alignment classes.
 
@@ -14,7 +14,7 @@ Easily realign text to components with text alignment classes.
 <p class="text-justify">Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</p>
 {% endexample %}
 
-### Text transform
+## Text transform
 
 Transform text in components with text capitalization classes.
 
@@ -24,7 +24,7 @@ Transform text in components with text capitalization classes.
 <p class="text-capitalize">Capitalized text.</p>
 {% endexample %}
 
-### Letter spacing
+## Letter spacing
 
 Utilities for controlling the tracking (letter spacing) of an element.
 
@@ -34,7 +34,7 @@ Utilities for controlling the tracking (letter spacing) of an element.
 <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
 {% endexample %}
 
-### Line Height
+## Line Height
 
 Utilities for controlling the leading (line height) of an element.
 
@@ -45,7 +45,7 @@ Utilities for controlling the leading (line height) of an element.
 <p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 {% endexample %}
 
-### Basic elements
+## Basic elements
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.text-wrap` as container. It can handle almost any HTML tag.
 

pages/_includes/cards/tabs.html

@@ -1,21 +1,29 @@
 {% assign id = 0 | random_id %}
+{% if include.id %}
+   {% assign id = include.id %}
+{% endif %}
+{% assign icon-class = "mr-2" %}
+{% if include.hide-text %}
+   {% assign icon-class = "" %}
+{% endif %}
 {% assign reverse = include.reverse | default: false %}
+
 <div class="card">
 	<ul class="nav nav-tabs{% if include.alternative %} nav-tabs-alt{% endif %}{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-toggle="tabs">
-		<li class="nav-item ">
+		<li class="nav-item">
-			<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class="mr-2" %}{% endif %}Home</a>
+			<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
 		</li>
 		<li class="nav-item">
-			<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class="mr-2" %}{% endif %}Profile</a>
+			<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
 		</li>
 		{% if include.activity %}
 		<li class="nav-item">
-			<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class="mr-2" %}{% endif %}Activity</a>
+			<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
 		</li>
 		{% endif %}
 		{% if include.disabled %}
 		<li class="nav-item">
-			<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class="mr-2" %}{% endif %}Disabled</a>
+			<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
 		</li>
 		{% endif %}
 		{% if include.dropdown %}

pages/_includes/ui/alert.html

@@ -1,3 +1,4 @@
 <div class="alert alert-{{ include.type | default: 'primary'}}" role="alert">
+   {% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %}
 	{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} {{ include.text | default: "This is a custom alert box!" }}
 </div>

pages/_layouts/docs.html

@@ -29,7 +29,7 @@ page-title: Documentation
 			<div class="card-body p-lg-5">
 
 				<div class="text-wrap">
-					<h2 class="mt-0 mb-4">{{ page.title }}</h2>
+					<h2 class="h1 mt-0 mb-4">{{ page.title }}</h2>
 
 					{% if page.description %}
 					<p>{{ page.description }}</p>

pages/alerts.html

@@ -1,13 +0,0 @@
----
-title: Alerts
-page-title: Alerts
-done: true
----
-
-{% for variant in site.variants %}
-	{% capture text_with_variant %}
-		This is a {{ variant }} alert — check it out!
-	{% endcapture %}
-
-	{% include ui/alert.html type=variant text=text_with_variant %}
-{% endfor %}

pages/forms.html

@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+<div class="row">
+   <div class="col-lg-3">
+
+      <div class="card">
+         <div class="card-body">
+            <h3 class="card-title">Add a new Credit Card</h3>
+
+            <div class="row row-xs">
+               <div class="col-12 form-group">
+                  <input class="form-control" type="text" placeholder="Card Number" />
+                  <!-- todo: input mask -->
+               </div>
+               <div class="col-4 form-group">
+                  <select class="form-control custom-select">
+                     <option>01</option>
+                  </select>
+               </div>
+               <div class="col-4 form-group">
+                  <select class="form-control custom-select">
+                     <option>2020</option>
+                  </select>
+               </div>
+               <div class="col-4 form-group">
+                  <input class="form-control" type="text" placeholder="CVV" />
+               </div>
+            </div>
+
+            {% include ui/button.html text="Save" color="primary" block=true %}
+
+            <div class="small text-muted mt-3">
+               {% include ui/icon.html icon="lock" %}
+               128-Bit SSL Encryption
+            </div>
+         </div>
+      </div>
+
+   </div>
+   <div class="col-3">2</div>
+   <div class="col-3">3</div>
+   <div class="col-3">4</div>
+</div>

scss/_variables.scss

@@ -26,7 +26,7 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 
-$blue: #467fcf !default;
+$blue: #2E7CD9 !default;
 $azure: #45aaf2 !default;
 $indigo: #6574cd !default;
 $purple: #a55eea !default;
@@ -110,9 +110,9 @@ $line-height-base: (24 / 15) !default;
 
 $border-radius: 3px !default;
 
-$h1-font-size: 1.875rem !default;
+$h1-font-size: 2rem !default;
-$h2-font-size: 1.625rem !default;
+$h2-font-size: 1.5rem !default;
-$h3-font-size: 1.25rem !default;
+$h3-font-size: 1.125rem !default;
 $h4-font-size: $font-size-base !default;
 $h5-font-size: .8125rem !default;
 $h6-font-size: .75rem !default;
@@ -154,6 +154,10 @@ $container-max-widths: (
   xl: 1200px
 ) !default;
 
+//close
+$close-font-weight: 400 !default;
+$close-font-size: 1.5rem !default;
+
 //badges
 $badge-font-weight: 600 !default;
 

scss/ui/_avatars.scss

@@ -66,7 +66,7 @@
 
 .avatar-list-stacked {
   .avatar {
-    margin-right: -.5em;
+    margin-right: -.5em !important;
     box-shadow: 0 0 0 2px #fff;
   }
 }

scss/ui/_cards.scss

@@ -89,8 +89,9 @@
 
 .card-title {
   display: block;
-  font-size: $h4-font-size;
+  font-size: $h3-font-size;
   font-weight: 500;
+  margin: 0 0 1.5rem;
   line-height: 1;
   color: inherit;