diff --git a/_config.yml b/_config.yml index 29a26f4d89096cb48084a148991089ed79d69411..e0e577de82d798aefe4038a672ada5a2ac367a93 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 11dea040191b242c22921ece3159b8f7e3b42a4c..85914b33b9e8cd7f374ab0ed1f93ebad5dafdec9 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 6d925f1cff293613ea08485e21528751a7ccddad..0000000000000000000000000000000000000000 --- 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 9b770b48aaf35217c988402edcb6ffa63f81ef8c..0000000000000000000000000000000000000000 --- 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 8c44b7978b4b4476f7a0f1d24ee8dff91e100386..0000000000000000000000000000000000000000 --- 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 5dafb102e6088fd3b2b2c0236bb29ded260b91c8..0000000000000000000000000000000000000000 --- 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 7aca95c76c00b76fe515017003d807f8d7efd978..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..98086da32c5d20ad92bf608301644f889bcf6135 --- /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 65b4626186880e8869a01f2599b7c52c37ca7348..e0e5eafe4ddcf4399dfedcdab1443c1a1ac39034 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 71e0287f9a04d14139d1948507684cac1b93bb87..4a7b32b490d45e4889d647f0bf1e2ec6d48f7cd0 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 953155f27541057c9191f4630cf247e12e551546..baf8af04764e65f9b1977bb4c417b37bfe430c45 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 bbd3d41815f2a7af7921aabe526015bcf5d55985..3245fb5bc71ced400b51e37968796fc0c79f1665 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 c9922ff8dc5fe69e45207171c7bc62a1c54a6702..6293da16465b207532994857aac817040dbfd3e6 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 aeddc4a122137973cbb310b6e2dd05ab9c57d052..bddbf65e11f79816035be00c12936d71aebf80fd 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 0000000000000000000000000000000000000000..095209f8ed5775be436c217540446f50306da7a5 --- /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 60cc691bbb7e1a0d01456c73b7af49bf843506c7..26d397f1493e1f96ff58da49171cde247856e03f 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 35fcbcee6b57a063ff869e565b7c6f0d2e443533..17db6bd9d011321127b951b2da64845dbb5c10af 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 998576ce54d934b198cf61c53342281a2729e8d3..ff2d6e60eeee9d2f070be693f660b2afb6db54c6 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 e1695528e181f3b196b310e29fc2afff42c37237..54d6288274c32a59647d3284f50d481b1778143a 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 48527e476a5f0c67a12d778adb53b30227ec7dda..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..2eaafa3710d06d4c601663804cc170533bbef71c --- /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 18cd0bb19f3554c242a1d2b87126c276de1fd0e7..062a7f8d1f173538adb0e3535885904fada9679f 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 486ebfbdbe8a29cb7a40a2e9773e4cf124732512..60b2e6696f067cc9d89eb3967450c32af28dc4a4 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 59dfcc7ff555bde26a114bc2fe5fa8265ddc7e35..9178de5baa4005398e272ab9cb42484451f0f001 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;