From 31c313873aa71b90ca7f5267a1476059b83a0cf2 Mon Sep 17 00:00:00 2001 From: chomik Date: Tue, 30 Apr 2019 11:10:01 +0200 Subject: [PATCH] avatars, cards, steps, ui fixes --- _config.yml | 9 +++++-- package.json | 2 +- pages/400.html | 6 ----- pages/401.html | 6 ----- pages/403.html | 6 ----- pages/500.html | 6 ----- pages/503.html | 6 ----- pages/_docs/alerts.md | 42 ++++++++++++++++++++++++++++++ pages/_docs/avatars.md | 16 ++++++------ pages/_docs/badges.md | 10 ++++---- pages/_docs/buttons.md | 2 +- pages/_docs/index.md | 6 ++--- pages/_docs/spinners.md | 10 ++++---- pages/_docs/steps.md | 10 ++++---- pages/_docs/tabs.md | 39 ++++++++++++++++++++++++++++ pages/_docs/toasts.md | 2 +- pages/_docs/tooltips.md | 4 +-- pages/_docs/typography.md | 10 ++++---- pages/_includes/cards/tabs.html | 20 ++++++++++----- pages/_includes/ui/alert.html | 3 ++- pages/_layouts/docs.html | 2 +- pages/alerts.html | 13 ---------- pages/forms.html | 45 +++++++++++++++++++++++++++++++++ scss/_variables.scss | 12 ++++++--- scss/ui/_avatars.scss | 2 +- scss/ui/_cards.scss | 3 ++- 26 files changed, 197 insertions(+), 95 deletions(-) delete mode 100644 pages/400.html delete mode 100644 pages/401.html delete mode 100644 pages/403.html delete mode 100644 pages/500.html delete mode 100644 pages/503.html create mode 100644 pages/_docs/alerts.md create mode 100644 pages/_docs/tabs.md delete mode 100644 pages/alerts.html create mode 100644 pages/forms.html diff --git a/_config.yml b/_config.yml index 29a26f4d..e0e577de 100644 --- a/_config.yml +++ b/_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] diff --git a/package.json b/package.json index 11dea040..85914b33 100644 --- a/package.json +++ b/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\"", diff --git a/pages/400.html b/pages/400.html deleted file mode 100644 index 6d925f1c..00000000 --- a/pages/400.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Page 400 -layout: error -error: 400 -done: true ---- diff --git a/pages/401.html b/pages/401.html deleted file mode 100644 index 9b770b48..00000000 --- a/pages/401.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Page 401 -layout: error -error: 401 -done: true ---- diff --git a/pages/403.html b/pages/403.html deleted file mode 100644 index 8c44b797..00000000 --- a/pages/403.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Page 403 -layout: error -error: 403 -done: true ---- diff --git a/pages/500.html b/pages/500.html deleted file mode 100644 index 5dafb102..00000000 --- a/pages/500.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Page 500 -layout: error -error: 500 -done: true ---- diff --git a/pages/503.html b/pages/503.html deleted file mode 100644 index 7aca95c7..00000000 --- a/pages/503.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Page 503 -layout: error -error: 503 -done: true ---- diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md new file mode 100644 index 00000000..98086da3 --- /dev/null +++ b/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 — check it out! + {% 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 %} diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md index 65b46261..e0e5eafe 100644 --- a/pages/_docs/avatars.md +++ b/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 %}
diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md index 71e0287f..4a7b32b4 100644 --- a/pages/_docs/badges.md +++ b/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 %} diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index 953155f2..baf8af04 100644 --- a/pages/_docs/buttons.md +++ b/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" %} diff --git a/pages/_docs/index.md b/pages/_docs/index.md index bbd3d418..3245fb5b 100644 --- a/pages/_docs/index.md +++ b/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). diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md index c9922ff8..6293da16 100644 --- a/pages/_docs/spinners.md +++ b/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" %} diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md index aeddc4a1..bddbf65e 100644 --- a/pages/_docs/steps.md +++ b/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" %} diff --git a/pages/_docs/tabs.md b/pages/_docs/tabs.md new file mode 100644 index 00000000..095209f8 --- /dev/null +++ b/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 %} diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md index 60cc691b..26d397f1 100644 --- a/pages/_docs/toasts.md +++ b/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 %} diff --git a/pages/_docs/tooltips.md b/pages/_docs/tooltips.md index 35fcbcee..17db6bd9 100644 --- a/pages/_docs/tooltips.md +++ b/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 %} {% endexample %} -### Tooltip with HTML +## Tooltip with HTML {% example html wrapper=btn-list %}
- \ No newline at end of file + diff --git a/pages/_includes/ui/alert.html b/pages/_includes/ui/alert.html index 998576ce..ff2d6e60 100644 --- a/pages/_includes/ui/alert.html +++ b/pages/_includes/ui/alert.html @@ -1,3 +1,4 @@ \ No newline at end of file + diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html index e1695528..54d62882 100644 --- a/pages/_layouts/docs.html +++ b/pages/_layouts/docs.html @@ -29,7 +29,7 @@ page-title: Documentation
-

{{ page.title }}

+

{{ page.title }}

{% if page.description %}

{{ page.description }}

diff --git a/pages/alerts.html b/pages/alerts.html deleted file mode 100644 index 48527e47..00000000 --- a/pages/alerts.html +++ /dev/null @@ -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 %} diff --git a/pages/forms.html b/pages/forms.html new file mode 100644 index 00000000..2eaafa37 --- /dev/null +++ b/pages/forms.html @@ -0,0 +1,45 @@ +--- +layout: default +--- + +
+
+ +
+
+

Add a new Credit Card

+ +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + {% include ui/button.html text="Save" color="primary" block=true %} + +
+ {% include ui/icon.html icon="lock" %} + 128-Bit SSL Encryption +
+
+
+ +
+
2
+
3
+
4
+
diff --git a/scss/_variables.scss b/scss/_variables.scss index 18cd0bb1..062a7f8d 100644 --- a/scss/_variables.scss +++ b/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; -$h2-font-size: 1.625rem !default; -$h3-font-size: 1.25rem !default; +$h1-font-size: 2rem !default; +$h2-font-size: 1.5rem !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; diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss index 486ebfbd..60b2e669 100644 --- a/scss/ui/_avatars.scss +++ b/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; } } diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 59dfcc7f..9178de5b 100644 --- a/scss/ui/_cards.scss +++ b/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; -- GitLab