From 667327a0d9850a4c47b141d06fd8fc93434a7c43 Mon Sep 17 00:00:00 2001 From: codecalm Date: Mon, 2 Nov 2020 00:43:03 +0100 Subject: [PATCH] tabler v1 --- _config.yml | 1 - src/js/autosize.js | 10 + src/js/tabler.js | 3 +- src/pages/_data/charts.yml | 1 - src/pages/_data/menu.yml | 3 + src/pages/_docs/autosize.md | 1 - src/pages/_docs/avatars.md | 1 + src/pages/_docs/badges.md | 38 ++-- src/pages/_docs/buttons.md | 22 +- src/pages/_docs/cards.md | 1 - src/pages/_docs/colors.md | 1 - src/pages/_docs/divider.md | 1 - src/pages/_docs/flags.md | 1 - src/pages/_docs/payments.md | 1 - src/pages/_docs/progress.md | 1 - src/pages/_docs/ribbons.md | 1 - src/pages/_docs/spinners.md | 1 - .../_includes/cards/development-activity.html | 7 +- src/pages/_includes/cards/gallery-photo.html | 8 +- src/pages/_includes/cards/icons.html | 2 +- .../_includes/cards/most-visited-pages.html | 2 +- .../_includes/cards/project-summary.html | 2 +- src/pages/_includes/cards/small-stats.html | 4 +- src/pages/_includes/cards/tasks.html | 2 +- src/pages/_includes/cards/user-card.html | 4 +- .../_includes/forms/form-elements-6.html | 6 +- src/pages/_includes/layout/navbar-side.html | 3 +- .../form/selectgroup-project-manager.html | 2 +- src/pages/_includes/parts/modals/info.html | 2 +- src/pages/_includes/ui/badge.html | 4 +- .../_includes/ui/form/textarea-autosize.html | 16 +- src/pages/_includes/ui/sparkline.html | 2 +- src/pages/_includes/ui/table.html | 2 +- src/pages/_layouts/docs.html | 4 +- src/pages/blank.html | 1 - src/pages/buttons.html | 2 - src/pages/cards-masonry.html | 1 - src/pages/cards.html | 1 - src/pages/carousel.html | 1 - src/pages/changelog.html | 1 - src/pages/charts-heatmap.html | 1 - src/pages/charts.html | 1 - src/pages/crypto-currencies.html | 1 - src/pages/docs.html | 1 - src/pages/dropdowns.html | 1 - src/pages/empty.html | 1 - src/pages/error-404.html | 1 - src/pages/error-500.html | 1 - src/pages/error-maintenance.html | 1 - src/pages/flags.html | 14 -- src/pages/gallery.html | 12 +- src/pages/icons.html | 1 - src/pages/invoice.html | 1 - src/pages/layout-rtl.html | 11 + src/pages/lists.html | 1 - src/pages/maps-vector.html | 1 - src/pages/markdown.md | 8 +- src/pages/modals.html | 1 - src/pages/navigation.html | 1 - src/pages/pagination.html | 1 - src/pages/pricing.html | 1 - src/pages/search-results.html | 18 +- src/pages/settings-index.html | 21 ++ src/pages/social.html | 1 - src/pages/tables.html | 1 - src/pages/tabs.html | 1 - src/pages/typo-demo.html | 192 ++++++++++++++++++ src/pages/typography.html | 1 - src/pages/users.html | 1 - src/pages/wizard.html | 1 - src/scss/_mixins-override.scss | 6 +- src/scss/_variables.scss | 40 ++-- src/scss/demo.scss | 4 - src/scss/layout/_navbar.scss | 7 +- src/scss/ui/_avatars.scss | 16 +- src/scss/ui/_badges.scss | 45 ++-- src/scss/ui/_breadcrumbs.scss | 4 + src/scss/ui/_buttons.scss | 6 +- src/scss/ui/_cards.scss | 7 +- src/scss/ui/_dropdowns.scss | 9 +- src/scss/ui/_forms.scss | 3 - src/scss/ui/_grid.scss | 18 +- src/scss/ui/_icons.scss | 30 +-- src/scss/ui/_lists.scss | 8 +- src/scss/ui/_markdown.scss | 21 ++ src/scss/ui/_nav.scss | 11 +- src/scss/ui/_type.scss | 6 + 87 files changed, 431 insertions(+), 276 deletions(-) create mode 100644 src/js/autosize.js delete mode 100644 src/pages/flags.html create mode 100644 src/pages/layout-rtl.html create mode 100644 src/pages/settings-index.html create mode 100644 src/pages/typo-demo.html diff --git a/_config.yml b/_config.yml index 14259dbd9..2bfd45825 100644 --- a/_config.yml +++ b/_config.yml @@ -30,7 +30,6 @@ plugins: tabler-plugins: - tabler-flags - tabler-payments - - tabler-buttons exclude: - .jekyll-cache diff --git a/src/js/autosize.js b/src/js/autosize.js new file mode 100644 index 000000000..6bb5ed207 --- /dev/null +++ b/src/js/autosize.js @@ -0,0 +1,10 @@ +// Autosize plugin + +import autosize from 'autosize'; + +const elements = document.querySelectorAll('[data-toggle="autosize"]'); +if (elements.length) { + elements.forEach(function (element) { + autosize(element); + }); +} \ No newline at end of file diff --git a/src/js/tabler.js b/src/js/tabler.js index c1458e366..aff52ba3f 100644 --- a/src/js/tabler.js +++ b/src/js/tabler.js @@ -1,5 +1,6 @@ //Vendor -// import 'bootstrap'; + +import './autosize'; (function() { /** diff --git a/src/pages/_data/charts.yml b/src/pages/_data/charts.yml index 5c80eac97..088aad604 100644 --- a/src/pages/_data/charts.yml +++ b/src/pages/_data/charts.yml @@ -168,7 +168,6 @@ development-activity: legend-position: 'top' sparkline: true datetime: true - title: Development Activity series: - name: 'Purchases' color: blue diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index d591a47b7..6eeff4d57 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -169,6 +169,9 @@ layout: dark-mode: url: layout-dark.html title: Dark mode + rtl-mode: + url: layout-rtl.html + title: RTL mode fluid: url: layout-fluid.html title: Fluid diff --git a/src/pages/_docs/autosize.md b/src/pages/_docs/autosize.md index 58ab4a487..bca00fb21 100644 --- a/src/pages/_docs/autosize.md +++ b/src/pages/_docs/autosize.md @@ -2,7 +2,6 @@ title: Autosize menu: docs.autosize description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type. -done: true libs: autosize --- diff --git a/src/pages/_docs/avatars.md b/src/pages/_docs/avatars.md index c0a7f9e9c..56f6e1900 100644 --- a/src/pages/_docs/avatars.md +++ b/src/pages/_docs/avatars.md @@ -79,6 +79,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o {% include ui/avatar.html person-id=8 size="md" %} {% include ui/avatar.html person-id=7 %} {% include ui/avatar.html person-id=6 size="sm" %} +{% include ui/avatar.html person-id=5 size="xs" %} {% endcapture %} {% include example.html code=code centered=true %} diff --git a/src/pages/_docs/badges.md b/src/pages/_docs/badges.md index 748b3cc29..6fd879a9d 100644 --- a/src/pages/_docs/badges.md +++ b/src/pages/_docs/badges.md @@ -66,27 +66,29 @@ Leave the HTML element empty if you want to create badges without any text. Empt {% include example.html code=code centered=true %} -### Badge add-ons - -Add the `.badge-addon` class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit. - -{% capture code %} -{% include ui/badge.html text="task" color="green" addon="finished" %} -{% include ui/badge.html text="bundle" color="purple" addon="passing" %} -{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %} -{% endcapture %} -{% include example.html code=code %} - - -### Badge avatars +## Badge avatars Create the `.badge-avatar` class to add an avatar that will make a badge more personalized. {% capture code %} -{% include ui/badge.html person-id=1 color="blue" %} -{% include ui/badge.html person-id=2 color="blue" %} -{% include ui/badge.html person-id=3 color="blue" %} -{% include ui/badge.html person-id=4 color="blue" %} -{% include ui/badge.html person-id=5 color="blue" %} +{% include ui/badge.html person-id=1 %} +{% include ui/badge.html person-id=2 %} +{% include ui/badge.html person-id=3 %} +{% include ui/badge.html person-id=4 %} +{% include ui/badge.html person-id=5 %} {% endcapture %} {% include example.html code=code %} + +## Button with badge + +Badges can be used as part of links or buttons to provide a counter. + +{% capture code %} + + +{% endcapture %} +{% include example.html code=code wrapper="btn-list" %} \ No newline at end of file diff --git a/src/pages/_docs/buttons.md b/src/pages/_docs/buttons.md index b140ec778..9a2595dd0 100644 --- a/src/pages/_docs/buttons.md +++ b/src/pages/_docs/buttons.md @@ -2,8 +2,7 @@ title: Buttons description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more. bootstrap-link: components/buttons/ -done: true -libs: tabler-buttons +menu: docs.buttons --- @@ -12,15 +11,24 @@ libs: tabler-buttons As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the ` - - - +Link + + + + {% endcapture %} {% include example.html code=code wrapper="btn-list" centered=true %} +## Default button + +The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page. + +{% capture code %} +Link +{% endcapture %} +{% include example.html code=code wrapper="btn-list" centered=true %} + ## Button variations Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot. diff --git a/src/pages/_docs/cards.md b/src/pages/_docs/cards.md index 9ecd28465..38ae1c331 100644 --- a/src/pages/_docs/cards.md +++ b/src/pages/_docs/cards.md @@ -3,7 +3,6 @@ title: Cards menu: docs.cards description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content. bootstrap-link: components/card/ -done: true --- diff --git a/src/pages/_docs/colors.md b/src/pages/_docs/colors.md index 27a9b2e59..51fdfc8c6 100644 --- a/src/pages/_docs/colors.md +++ b/src/pages/_docs/colors.md @@ -3,7 +3,6 @@ title: Colors menu: docs.colors description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out. bootstrap-link: utilities/colors/ -done: true --- diff --git a/src/pages/_docs/divider.md b/src/pages/_docs/divider.md index a3f357be2..84044337a 100644 --- a/src/pages/_docs/divider.md +++ b/src/pages/_docs/divider.md @@ -2,7 +2,6 @@ title: Divider description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app. bootstrap-link: components/dropdowns/#dividers -done: true --- diff --git a/src/pages/_docs/flags.md b/src/pages/_docs/flags.md index e642341eb..b793e6392 100644 --- a/src/pages/_docs/flags.md +++ b/src/pages/_docs/flags.md @@ -3,7 +3,6 @@ title: Flags menu: docs.flags description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. plugin: flags -done: true libs: tabler-flags --- diff --git a/src/pages/_docs/payments.md b/src/pages/_docs/payments.md index d31749daf..f8497ec12 100644 --- a/src/pages/_docs/payments.md +++ b/src/pages/_docs/payments.md @@ -3,7 +3,6 @@ title: Payments menu: docs.payments description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly. plugin: payments -done: true --- diff --git a/src/pages/_docs/progress.md b/src/pages/_docs/progress.md index 46358727f..eaac59dc5 100644 --- a/src/pages/_docs/progress.md +++ b/src/pages/_docs/progress.md @@ -2,7 +2,6 @@ title: Progress bars description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated. bootstrap-link: components/progress -done: true --- diff --git a/src/pages/_docs/ribbons.md b/src/pages/_docs/ribbons.md index 70d0a43ba..ee34f3ae0 100644 --- a/src/pages/_docs/ribbons.md +++ b/src/pages/_docs/ribbons.md @@ -2,7 +2,6 @@ title: Ribbons menu: docs.ribbons description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out. -done: true --- diff --git a/src/pages/_docs/spinners.md b/src/pages/_docs/spinners.md index bdc2af2be..ba61d63e7 100644 --- a/src/pages/_docs/spinners.md +++ b/src/pages/_docs/spinners.md @@ -3,7 +3,6 @@ title: Spinners menu: docs.spinners description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete. bootstrap-link: components/spinners/ -done: true --- diff --git a/src/pages/_includes/cards/development-activity.html b/src/pages/_includes/cards/development-activity.html index dc11ea929..01db51504 100644 --- a/src/pages/_includes/cards/development-activity.html +++ b/src/pages/_includes/cards/development-activity.html @@ -1,5 +1,8 @@
- {% include ui/chart.html chart-id="development-activity" height=10 class="mt-4" %} +
+
Development activity
+
+ {% include ui/chart.html chart-id="development-activity" height=12 %}
@@ -14,7 +17,7 @@ {% for commit in site.data.commits limit: 5 %} diff --git a/src/pages/_includes/cards/project-summary.html b/src/pages/_includes/cards/project-summary.html index 7d2d1a564..42724b55c 100644 --- a/src/pages/_includes/cards/project-summary.html +++ b/src/pages/_includes/cards/project-summary.html @@ -1,6 +1,6 @@
- {% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color %} + {% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color rounded=true %}

{{ include.title | default: "New website" }}

Due to: {{ include.date | default: '28 Aug 2019' }}

diff --git a/src/pages/_includes/cards/small-stats.html b/src/pages/_includes/cards/small-stats.html index b087b6d3b..9c529404d 100644 --- a/src/pages/_includes/cards/small-stats.html +++ b/src/pages/_includes/cards/small-stats.html @@ -14,8 +14,8 @@

{% endif %} -
-
+
+
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }} {% if include.small-icon %} {% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %} diff --git a/src/pages/_includes/cards/tasks.html b/src/pages/_includes/cards/tasks.html index 28e5f9c37..6dbe08ec0 100644 --- a/src/pages/_includes/cards/tasks.html +++ b/src/pages/_includes/cards/tasks.html @@ -30,7 +30,7 @@ {% include ui/icon.html icon="message" %} {{ forloop.index | random_number: 0, 12 }}
{% endfor %} diff --git a/src/pages/_includes/cards/user-card.html b/src/pages/_includes/cards/user-card.html index 8185a3dc2..f235b865e 100644 --- a/src/pages/_includes/cards/user-card.html +++ b/src/pages/_includes/cards/user-card.html @@ -5,8 +5,8 @@
{% include ui/avatar.html person=person class="rounded" %}
-
-
{{ person.full_name }}
+
+
{{ person.full_name }}
{{ person.job_title }}
diff --git a/src/pages/_includes/forms/form-elements-6.html b/src/pages/_includes/forms/form-elements-6.html index ca9227b3f..0953e1aa4 100644 --- a/src/pages/_includes/forms/form-elements-6.html +++ b/src/pages/_includes/forms/form-elements-6.html @@ -20,10 +20,8 @@
-
- {% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %} - {% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %} -
+ {% include ui/button.html color="white" block=true icon="brand/github" icon-color="github" text="Login with Github" %} + {% include ui/button.html color="white" block=true icon="brand/twitter" icon-color="twitter" text="Login with Twitter" %}
diff --git a/src/pages/_includes/layout/navbar-side.html b/src/pages/_includes/layout/navbar-side.html index 47c89a86d..6a8ef38ac 100644 --- a/src/pages/_includes/layout/navbar-side.html +++ b/src/pages/_includes/layout/navbar-side.html @@ -13,7 +13,8 @@
- {% include ui/avatar.html person-id=person-id %} + {% include ui/avatar.html person-id=person-id size="sm" %} + {% unless include.hide-username %}
{{ person.full_name }}
diff --git a/src/pages/_includes/parts/form/selectgroup-project-manager.html b/src/pages/_includes/parts/form/selectgroup-project-manager.html index 15294e711..269fb73cb 100644 --- a/src/pages/_includes/parts/form/selectgroup-project-manager.html +++ b/src/pages/_includes/parts/form/selectgroup-project-manager.html @@ -13,7 +13,7 @@
{% include ui/avatar.html person=person class="mr-3" %}
-
{{ person.full_name }}
+
{{ person.full_name }}
{{ person.job_title }}
diff --git a/src/pages/_includes/parts/modals/info.html b/src/pages/_includes/parts/modals/info.html index b00083e38..0e07471af 100644 --- a/src/pages/_includes/parts/modals/info.html +++ b/src/pages/_includes/parts/modals/info.html @@ -1,7 +1,7 @@ {% include ui/modal/close.html %}
- {% include ui/icon.html icon="circle-check" color="green" class="icon-xl mb-4" %} + {% include ui/icon.html icon="circle-check" color="green" class="mb-4" %}

Payment succedeed

Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
diff --git a/src/pages/_includes/ui/badge.html b/src/pages/_includes/ui/badge.html index beb5a5a9c..69eaf8c30 100644 --- a/src/pages/_includes/ui/badge.html +++ b/src/pages/_includes/ui/badge.html @@ -1,5 +1,5 @@ {% assign el = 'span' %} -<{{ el }} class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}"> +<{{ el }} class="badge{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"> {% if include.person-id %} {% assign person-id = include.person-id | minus: 1 %} {% assign person = site.data.people[person-id] %} @@ -7,7 +7,7 @@ {% unless src %} {% assign placeholder = person.full_name | first_letters %} {% endunless %} - <{{ el }} class="badge-avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %} + <{{ el }} class="avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %} {% endif %} {% if include.text %} {{ include.text }} diff --git a/src/pages/_includes/ui/form/textarea-autosize.html b/src/pages/_includes/ui/form/textarea-autosize.html index f56f39073..c25017a75 100644 --- a/src/pages/_includes/ui/form/textarea-autosize.html +++ b/src/pages/_includes/ui/form/textarea-autosize.html @@ -1,15 +1 @@ - - -{% capture_once scripts %} - -{% endcapture_once %} + diff --git a/src/pages/_includes/ui/sparkline.html b/src/pages/_includes/ui/sparkline.html index 46b445010..c189d2bda 100644 --- a/src/pages/_includes/ui/sparkline.html +++ b/src/pages/_includes/ui/sparkline.html @@ -19,7 +19,7 @@ strokeWidth: 2, fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'line' %}["{{ color | append: '-100' | tabler_color }}"]{% else %}"transparent"{% endif %}, padding: .2, - {% if type == 'pie' %}innerRadius: 17,{% endif %} + {% if type == 'pie' %}innerRadius: 16,{% endif %} }); }); diff --git a/src/pages/_includes/ui/table.html b/src/pages/_includes/ui/table.html index 308264e3c..d7d86fe0a 100644 --- a/src/pages/_includes/ui/table.html +++ b/src/pages/_includes/ui/table.html @@ -28,7 +28,7 @@
{% include ui/avatar.html person-id=person.id class="mr-2" %}
-
{{ person.full_name }}
+
{{ person.full_name }}
{{ person.email }}
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html index a8627fea0..5b3c25bf0 100644 --- a/src/pages/_layouts/docs.html +++ b/src/pages/_layouts/docs.html @@ -13,7 +13,7 @@ page-header: Documentation {% assign toc = content | toc_only %} -
+
{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" color="white" external=true block=true class="mb-6" %} {% if toc != '' %} @@ -47,7 +47,7 @@ page-header: Documentation
-

{{ page.title }}

+

{{ page.title }}

{% if page.bootstrap-link %}

diff --git a/src/pages/blank.html b/src/pages/blank.html index a1115ffb6..b0b94d59c 100644 --- a/src/pages/blank.html +++ b/src/pages/blank.html @@ -1,7 +1,6 @@ --- title: Blank page blank: true -done: true menu: base.blank container-centered: true --- diff --git a/src/pages/buttons.html b/src/pages/buttons.html index 0fd7eac90..7cc496bfe 100644 --- a/src/pages/buttons.html +++ b/src/pages/buttons.html @@ -1,9 +1,7 @@ --- title: Buttons page-header: Buttons -done: true menu: base.buttons -libs: tabler-buttons ---

diff --git a/src/pages/cards-masonry.html b/src/pages/cards-masonry.html index f009a1bcf..57e9d83eb 100644 --- a/src/pages/cards-masonry.html +++ b/src/pages/cards-masonry.html @@ -3,7 +3,6 @@ title: Cards Masonry page-header: Cards Masonry menu: base.cards-masonry libs: masonry -done: true ---
diff --git a/src/pages/cards.html b/src/pages/cards.html index 1b68d1027..74072841e 100644 --- a/src/pages/cards.html +++ b/src/pages/cards.html @@ -3,7 +3,6 @@ title: Cards page-header: Cards menu: base.cards libs: imask -done: true ---
diff --git a/src/pages/carousel.html b/src/pages/carousel.html index ad58453b7..727b79a08 100644 --- a/src/pages/carousel.html +++ b/src/pages/carousel.html @@ -2,7 +2,6 @@ title: Carousel page-header: Carousel layout: default -done: true menu: base.carousel --- diff --git a/src/pages/changelog.html b/src/pages/changelog.html index 7bec69b8f..1ad518c23 100644 --- a/src/pages/changelog.html +++ b/src/pages/changelog.html @@ -2,7 +2,6 @@ title: Changelog page-header: Changelog menu: changelog -done: true ---
diff --git a/src/pages/charts-heatmap.html b/src/pages/charts-heatmap.html index cd7353dfe..27eff406a 100644 --- a/src/pages/charts-heatmap.html +++ b/src/pages/charts-heatmap.html @@ -1,7 +1,6 @@ --- title: Heatmap Charts page-header: Heatmap Charts -done: true ---
diff --git a/src/pages/charts.html b/src/pages/charts.html index a3230446b..8cd6c34c3 100644 --- a/src/pages/charts.html +++ b/src/pages/charts.html @@ -3,7 +3,6 @@ title: Charts page-header: Charts menu: base.charts libs: apexcharts -done: true ---
diff --git a/src/pages/crypto-currencies.html b/src/pages/crypto-currencies.html index bc00060a0..a76a0f698 100644 --- a/src/pages/crypto-currencies.html +++ b/src/pages/crypto-currencies.html @@ -1,7 +1,6 @@ --- title: Crypto currencies page-header: Crypto currencies -done: true ---
diff --git a/src/pages/docs.html b/src/pages/docs.html index 9df0b0b86..705587b12 100644 --- a/src/pages/docs.html +++ b/src/pages/docs.html @@ -1,6 +1,5 @@ --- redirect_to: ./docs/index.html layout: redirect -done: true title: Documentation --- diff --git a/src/pages/dropdowns.html b/src/pages/dropdowns.html index 163880499..dc1eed275 100644 --- a/src/pages/dropdowns.html +++ b/src/pages/dropdowns.html @@ -2,7 +2,6 @@ title: Dropdowns page-header: Dropdowns menu: base.dropdowns -done: true ---
diff --git a/src/pages/empty.html b/src/pages/empty.html index d4b50100b..cd0f40ca8 100644 --- a/src/pages/empty.html +++ b/src/pages/empty.html @@ -1,6 +1,5 @@ --- title: Empty page -done: true menu: base.empty page-header: Empty page --- diff --git a/src/pages/error-404.html b/src/pages/error-404.html index 1196e276e..7bcae45dc 100644 --- a/src/pages/error-404.html +++ b/src/pages/error-404.html @@ -2,5 +2,4 @@ title: Page 404 layout: error error: 404 -done: true --- diff --git a/src/pages/error-500.html b/src/pages/error-500.html index 5dafb102e..4d8d1df5b 100644 --- a/src/pages/error-500.html +++ b/src/pages/error-500.html @@ -2,5 +2,4 @@ title: Page 500 layout: error error: 500 -done: true --- diff --git a/src/pages/error-maintenance.html b/src/pages/error-maintenance.html index 8f6cc8583..3c529f634 100644 --- a/src/pages/error-maintenance.html +++ b/src/pages/error-maintenance.html @@ -2,5 +2,4 @@ title: Maintenance mode layout: error error: maintenance -done: true --- diff --git a/src/pages/flags.html b/src/pages/flags.html deleted file mode 100644 index 1549d1864..000000000 --- a/src/pages/flags.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Flags -page-header: Flags -done: true ---- -
- {% for flag in site.data.flags %} -
-

{{flag.name}}

- {% include ui/flag.html flag=flag.flag class="my-3 mx-auto" %} - .flag .flag-{{flag.flag}} -
- {% endfor %} -
diff --git a/src/pages/gallery.html b/src/pages/gallery.html index 8324e3f8b..7178e4411 100644 --- a/src/pages/gallery.html +++ b/src/pages/gallery.html @@ -3,24 +3,18 @@ title: Gallery page-header: Gallery page-header-description: 1-12 of 241 photos page-header-actions: photos -done: true menu: extra.gallery --- {% assign horizontal = 0 %}
- {% for photo in site.data.photos %} - {% if photo.horizontal %} + {% assign photos = site.data.photos | where: "horizontal", true %} + + {% for photo in photos limit: 12 %} {% assign person = site.data.people[forloop.index0] %}
{% include cards/gallery-photo.html person=person %}
- {% assign horizontal = horizontal | plus: 1 %} - {% endif %} - - {% if horizontal == 12 %} - {% break %} - {% endif %} {% endfor %}
diff --git a/src/pages/icons.html b/src/pages/icons.html index 7a37798c6..4dae96bfa 100644 --- a/src/pages/icons.html +++ b/src/pages/icons.html @@ -2,7 +2,6 @@ title: Icons page-header: Icons menu: base.icons -done: true ---
diff --git a/src/pages/invoice.html b/src/pages/invoice.html index a89f4bc99..343a0b838 100644 --- a/src/pages/invoice.html +++ b/src/pages/invoice.html @@ -2,7 +2,6 @@ title: Invoice layout: default menu: extra.invoice -done: true --- {% include cards/invoice.html %} diff --git a/src/pages/layout-rtl.html b/src/pages/layout-rtl.html new file mode 100644 index 000000000..daf2bd577 --- /dev/null +++ b/src/pages/layout-rtl.html @@ -0,0 +1,11 @@ +--- +title: Dashboard +page-header: Dashboard +page-header-pretitle: Overview +page-header-actions: buttons +rtl: true +menu: home +libs: jquery, apexcharts, peity, jqvmap, jqvmap-world +--- + +{% include layout/homepage.html %} diff --git a/src/pages/lists.html b/src/pages/lists.html index 27b62879d..58333142d 100644 --- a/src/pages/lists.html +++ b/src/pages/lists.html @@ -3,7 +3,6 @@ menu: base.lists title: Lists page-header: Lists menu: base.lists -done: true ---
diff --git a/src/pages/maps-vector.html b/src/pages/maps-vector.html index f5e820851..e4f5ebf0a 100644 --- a/src/pages/maps-vector.html +++ b/src/pages/maps-vector.html @@ -3,7 +3,6 @@ title: Vector Maps page-header: Vector Maps menu: base.maps-vector libs: jquery, jqvmap, jqvmap-world, jqvmap-europe, jqvmap-usa -done: true ---
diff --git a/src/pages/markdown.md b/src/pages/markdown.md index 539c6e3fe..cb97965f7 100644 --- a/src/pages/markdown.md +++ b/src/pages/markdown.md @@ -1,5 +1,4 @@ --- -done: true title: Markdown page-header: Markdown --- @@ -93,9 +92,4 @@ Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate ##### Heading 5 -Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! - - -###### Heading 6 - -Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! +Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone! \ No newline at end of file diff --git a/src/pages/modals.html b/src/pages/modals.html index a7b7ab2fa..505014de3 100644 --- a/src/pages/modals.html +++ b/src/pages/modals.html @@ -2,7 +2,6 @@ title: Modals page-header: Modals menu: base.modals -done: true ---
diff --git a/src/pages/navigation.html b/src/pages/navigation.html index e4ce7c2f0..527de2083 100644 --- a/src/pages/navigation.html +++ b/src/pages/navigation.html @@ -2,7 +2,6 @@ menu: base.navigation title: Navigation page-header: Navigation -done: true --- diff --git a/src/pages/pagination.html b/src/pages/pagination.html index fdf866d3b..8ab10de7d 100644 --- a/src/pages/pagination.html +++ b/src/pages/pagination.html @@ -2,7 +2,6 @@ title: Pagination page-header: Pagination menu: base.pagination -done: true --- {% card %} diff --git a/src/pages/pricing.html b/src/pages/pricing.html index d2e6228a5..becb3df89 100644 --- a/src/pages/pricing.html +++ b/src/pages/pricing.html @@ -1,7 +1,6 @@ --- title: Pricing cards page-header: Pricing cards -done: true menu: extra.pricing --- diff --git a/src/pages/search-results.html b/src/pages/search-results.html index 16d58a787..967052006 100644 --- a/src/pages/search-results.html +++ b/src/pages/search-results.html @@ -1,5 +1,4 @@ --- -done: true page-header: Search results page-header-description: About 2,410 result (0.19 seconds) menu: extra.search-results @@ -11,18 +10,13 @@ menu: extra.search-results
- {% for photo in site.data.photos %} - {% if photo.horizontal %} - {% assign person = site.data.people[forloop.index0] %} -
- {% include cards/gallery-photo.html person=person hide-likes=true %} -
- {% assign horizontal = horizontal | plus: 1 %} - {% endif %} + {% assign photos = site.data.photos | where: "horizontal", true %} - {% if horizontal == 12 %} - {% break %} - {% endif %} + {% for photo in photos %} + {% assign person = site.data.people[forloop.index0] %} +
+ {% include cards/gallery-photo.html person=person hide-likes=true %} +
{% endfor %}
diff --git a/src/pages/settings-index.html b/src/pages/settings-index.html new file mode 100644 index 000000000..7606f1052 --- /dev/null +++ b/src/pages/settings-index.html @@ -0,0 +1,21 @@ +--- +layout: card +--- + +
+ {% for item in site.data.settings %} +
+ +
+
+
{% include ui/icon.html icon=item.icon %}
+
+
+

{{ item.title }}

+
{{ item.description }}
+
+
+ +
+ {% endfor %} +
\ No newline at end of file diff --git a/src/pages/social.html b/src/pages/social.html index 8a3953488..8ada64c82 100644 --- a/src/pages/social.html +++ b/src/pages/social.html @@ -1,6 +1,5 @@ --- title: Social elements -done: true container-size: narrow --- diff --git a/src/pages/tables.html b/src/pages/tables.html index 2910e47cd..d5fe204d6 100644 --- a/src/pages/tables.html +++ b/src/pages/tables.html @@ -1,5 +1,4 @@ --- -done: true page-header: Tables menu: base.tables --- diff --git a/src/pages/tabs.html b/src/pages/tabs.html index d3f55d44e..7d5ceffb5 100644 --- a/src/pages/tabs.html +++ b/src/pages/tabs.html @@ -1,7 +1,6 @@ --- title: Tabs page-header: Tabs -done: true ---
diff --git a/src/pages/typo-demo.html b/src/pages/typo-demo.html new file mode 100644 index 000000000..6d27b4449 --- /dev/null +++ b/src/pages/typo-demo.html @@ -0,0 +1,192 @@ +--- +layout: default +page-header: Settings +page-header-description: Etiam ullamcorper massa viverra consequat, consectetur id nulla tempus. Fringilla egestas justo massa purus sagittis malesuada. +page-header-actions: buttons +--- + +
+
+ +
+
+
+
+
+ {% include ui/avatar.html person-id=3 size="sm" %} +
+
+ Lorem ipsum dolor sit amet. +
+
+
+
+
+
+ {% include ui/avatar.html person-id=3 %} +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
+
+
+
+
+
+ {% include ui/avatar.html person-id=3 size="md" %} +
+
+ Lorem ipsum dolor sit amet.
+ Aliquid amet atque blanditiis,
+ mollitia perferendis quas. +
+
+
+
+
+
+ {% include ui/avatar.html person-id=3 size="lg" %} +
+
+ Lorem ipsum dolor sit amet.
+ Aliquid amet atque blanditiis,
+ mollitia perferendis quas.
+ Aspernatur, corporis culpa, deleniti +
+
+
+
+ {% include ui/avatar.html person-id=3 size="xl" rounded=true %} +
+
+
+ + + + +

header h1 - small 28px

+

header h2 - small 20px

+

header h3 - small 16px

+

header h4 - small 14px

+
header h5 - small 12px
+
header h6 - small 10px
+ +
+ +
+ +
+ {% include ui/button.html text="Show modal" modal-id="deactivate" %} + {% include ui/button.html text="Show modal" modal-id="success" %} + {% include ui/modal.html modal-id="deactivate" %} + {% include ui/modal.html modal-id="success" %} +
+ + +
+
- {% include ui/avatar.html person-id=forloop.index %} + {% include ui/avatar.html person-id=forloop.index size="sm" %}
diff --git a/src/pages/_includes/cards/gallery-photo.html b/src/pages/_includes/cards/gallery-photo.html index 570540188..9f08e737f 100644 --- a/src/pages/_includes/cards/gallery-photo.html +++ b/src/pages/_includes/cards/gallery-photo.html @@ -3,7 +3,7 @@
{% include ui/avatar.html person=include.person class="mr-3 rounded" %} -
+
{{ include.person.full_name }}
{{ forloop.index | random_date_ago: 10 | timeago }}
@@ -14,7 +14,11 @@ {{ forloop.index | random_number: 300, 600 }} - {% include ui/icon.html icon="heart" %} + {% assign class = false %} + {% if forloop.index > 2 and forloop.index < 9 or forloop.index == 10 %} + {% assign class = "icon-filled text-red" %} + {% endif %} + {% include ui/icon.html icon="heart" class=class %} {{ forloop.index | random_number: 20, 100 }}
diff --git a/src/pages/_includes/cards/icons.html b/src/pages/_includes/cards/icons.html index a01d086b3..bb6422d6d 100644 --- a/src/pages/_includes/cards/icons.html +++ b/src/pages/_includes/cards/icons.html @@ -25,7 +25,7 @@
  • {% assign svg-icon = icon[1] %} - {% include ui/icon.html svg-icon=svg-icon class="icon-md" %} + {% include ui/icon.html svg-icon=svg-icon %}
    • {% endfor %} diff --git a/src/pages/_includes/cards/most-visited-pages.html b/src/pages/_includes/cards/most-visited-pages.html index 9095601d4..25d6a6689 100644 --- a/src/pages/_includes/cards/most-visited-pages.html +++ b/src/pages/_includes/cards/most-visited-pages.html @@ -19,7 +19,7 @@
    {{ page.uri }} - {% include ui/icon.html icon="link" %} + {% include ui/icon.html icon="link" %} {{ page.visitors | format_number }} {{ page.unique | format_number }} - {% include ui/avatar.html person-id=forloop.index %} + {% include ui/avatar.html size="sm" person-id=forloop.index %}
    + + + + + + + + + + + + + {% for color in site.button-variants %} + + + + + + + + + + {% endfor %} + {% for color in site.colors %} + + + + + + + + + + {% endfor %} + {% for color in site.socials %} + {% assign icon = color[1].icon %} + + + + + + + + + + {% endfor %} +
    whitewhitewhite
    linklinklink
    {{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}
    {{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}{{ color[0] }}
    {{ color[0] }}{% include ui/icon.html icon=icon %} {{ color[0] }}{% include ui/icon.html icon=icon %} {{ color[0] }}{% include ui/icon.html icon=icon %} {{ color[0] }}{% include ui/icon.html icon=icon %} {{ color[0] }}{% include ui/icon.html icon=icon %} {{ color[0] }}{% include ui/icon.html icon=icon %} {{ color[0] }}
    +
    + +

    Offer local delivery at checkout for customers near you. Manage local orders + in your Shopify admin or on Shopify POS, and get optimized delivery routes with the Shopify Local Delivery + app when it’s time to deliver.

    + +

    What a strange person. I dunno. Must be a king. Burn her anyway! And this isn't my nose. This is a + false one. I have to push the pram a lot. Now, look here, my good man.

    +

    Well, I got better.

    +

    No, no, no! Yes, yes. A bit. But she's got a wart. Well, how'd you become king, then? How do you know she is + a witch? We want a shrubbery!! Be quiet!

    +
      +
    1. Well, I didn't vote for you.
      2. +
    2. Burn her anyway!
      3. +
    3. And the hat. She's a witch!
      4. +
    + +

    A newt?

    +

    I dunno. Must be a king. Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! …Are you + suggesting that coconuts migrate? On second thoughts, let's not go there. It is a silly place.

    + + +

    Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! Be quiet! Why? How do you know she + is a witch?

    +

    Well, I got better. Well, she turned me into a newt. Well, how'd you become king, then? Burn her anyway! + Well, I didn't vote for you.

    +

    Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme + executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. But you are + dressed as one…

    +

    Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme + executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Found them? + In Mercia?! The coconut's tropical!

    +

    Who's that then? How do you know she is a witch? Did you dress her up like this? Oh! Come and see the + violence inherent in the system! Help, help, I'm being repressed! Shut up! Be quiet!

    +

    Oh, ow! The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in + winter, yet these are not strangers to our land. How do you know she is a witch? Where'd you get the + coconuts?

    +

    Found them? In Mercia?! The coconut's tropical! Why do you think that she is a witch? Why? Look, my + liege!

    +

    Why? What do you mean? Well, how'd you become king, then? I don't want to talk to you no more, you + empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your + father smelt of elderberries! Now leave before I am forced to taunt you a second time!

    +

    Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! He hasn't got shit + all over him. Now, look here, my good man. Ah, now we see the violence inherent in the system! I'm not a + witch.

    +

    I have to push the pram a lot. Where'd you get the coconuts? Listen. Strange women lying in ponds + distributing swords is no basis for a system of government. Supreme executive power derives from a mandate + from the masses, not from some farcical aquatic ceremony.

    +

    No, no, no! Yes, yes. A bit. But she's got a wart. Why? Shh! Knights, I bid you welcome to your new home. + Let us ride to Camelot! Now, look here, my good man.

    +
    + \ No newline at end of file diff --git a/src/pages/typography.html b/src/pages/typography.html index 757aeeed2..ac5747826 100644 --- a/src/pages/typography.html +++ b/src/pages/typography.html @@ -1,7 +1,6 @@ --- title: Typography page-header: Typography -done: true ---
    diff --git a/src/pages/users.html b/src/pages/users.html index 3bb94daf9..e0c60cead 100644 --- a/src/pages/users.html +++ b/src/pages/users.html @@ -4,7 +4,6 @@ title: Users list page-header: Users page-header-actions: users page-header-description: 1-18 of 413 people -done: true menu: extra.users --- diff --git a/src/pages/wizard.html b/src/pages/wizard.html index 95c47d0d4..0a7ae5c38 100644 --- a/src/pages/wizard.html +++ b/src/pages/wizard.html @@ -1,6 +1,5 @@ --- title: Wizard -done: true layout: single menu: extra.welcome --- diff --git a/src/scss/_mixins-override.scss b/src/scss/_mixins-override.scss index 64e163778..217c27826 100644 --- a/src/scss/_mixins-override.scss +++ b/src/scss/_mixins-override.scss @@ -13,12 +13,12 @@ height: $caret-width; border-bottom: 1px solid; border-left: 1px solid; - margin-right: .1em; + margin-inline-end: .1em; @if $direction != 'left' { - margin-left: $caret-spacing; + margin-inline-start: $caret-spacing; } @else { - margin-right: $caret-spacing; + margin-inline-end: $caret-spacing; } @if $direction == down { diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 35106cb4b..26ac367ad 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -70,11 +70,14 @@ $min-contrast-ratio: 1.5 !default; $text-muted-opacity: .68 !default; $text-muted-light-opacity: .4 !default; -$border-opacity: .18 !default; -$border-dark-opacity: .32 !default; +$border-opacity: .16 !default; +$border-dark-opacity: .24 !default; $light: #f5f7fb !default; -$dark: #252f3f !default; +$dark: #354052 !default; + +$body-bg: $light !default; +$body-color: #252f3f !default; $color-contrast-dark: $dark !default; $color-contrast-light: $light !default; @@ -106,15 +109,12 @@ $red: #e53e3e !default; $orange: #ed8936 !default; $yellow: #fab005 !default; $lime: #74b816 !default; -$green: #48bb78 !default; +$green: #40c057 !default; $teal: #2bcbba !default; $cyan: #17a2b8 !default; $black: #000000 !default; $white: #ffffff !default; -$body-bg: $light !default; -$body-color: $dark !default; - $text-muted: mix($body-color, #fff, percentage($text-muted-opacity)) !default; $text-muted-light: mix($body-color, #fff, percentage($text-muted-light-opacity)) !default; @@ -183,10 +183,11 @@ $border-radius-full: 50% !default; // Avatars $avatar-size: 2.5rem !default; $avatar-sizes: ( - "sm": 1.25rem, + "xs": 1.25rem, + "sm": 2rem, "md": 3.75rem, "lg": 5rem, - "xl": 8rem + "xl": 7rem ) !default; $avatar-border-radius: $border-radius !default; $avatar-font-size: $h4-font-size; @@ -194,7 +195,7 @@ $avatar-font-size: $h4-font-size; $link-decoration: none !default; //Typography -$headings-font-weight: $font-weight-bold !default; +$headings-font-weight: $font-weight-medium !default; $hr-opacity: .1 !default; $hr-margin-y: 2rem !default; @@ -265,6 +266,8 @@ $breadcrumb-variants: ( ) !default; //badges +$badge-font-size: $code-font-size !default; +$badge-line-height: $code-line-height !default; $badge-empty-size: .5rem !default; //buttons @@ -308,8 +311,8 @@ $card-group-margin: 1.5rem !default; $card-shadow: rgba($dark, .04) 0 2px 4px 0 !default; $card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default; -$cards-grid-gap: 1.25rem !default; -$cards-grid-gap-sm: .75rem !default; +$cards-grid-gap: 1rem !default; +$cards-grid-gap-sm: .5rem !default; $cards-grid-breakpoint: lg !default; //carousel @@ -324,10 +327,12 @@ $btn-close-color: inherit !default; $btn-close-width: .75rem !default; //dropdown -$dropdown-item-padding-x: 1rem !default; +$dropdown-item-padding-x: .75rem !default; +$dropdown-item-padding-y: .5rem !default; $dropdown-font-size: $font-size-base !default; $dropdown-divider-bg: $border-color !default; -$dropdown-padding-y: .5rem !default; +$dropdown-padding-y: .25rem !default; +$dropdown-link-color: inherit !default; $dropdown-link-hover-bg: $hover-bg !default; $dropdown-link-hover-color: inherit !default; $dropdown-spacer: 1px !default; @@ -486,7 +491,7 @@ $input-border-radius: $border-radius !default; $form-check-input-width: 1rem !default; $form-check-padding-left: $form-check-input-width + .5rem !default; $form-check-input-bg: $white !default; -$form-check-input-border: 1px solid $border-color !default; +$form-check-input-border: 1px solid $border-color-transparent !default; $form-check-input-border-radius: $border-radius !default; $form-check-input-checked-bg-size: 1rem !default; @@ -496,7 +501,7 @@ $form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; $form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; -$form-check-input-checked-border-color: $border-color !default; +$form-check-input-checked-border-color: $border-color-transparent !default; $form-select-indicator-color: opacify($border-color, .24) !default; @@ -514,6 +519,9 @@ $form-range-thumb-focus-box-shadow-width: .125rem !default; $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; $form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,"), "#", "%23") !default; +$form-label-font-size: $h4-font-size !default; +$form-label-font-weight: $font-weight-medium !default; + $caret-width: .36em !default; //Flags diff --git a/src/scss/demo.scss b/src/scss/demo.scss index 12da093b5..fe7723961 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -24,10 +24,6 @@ body.no-transitions * { list-style: none; padding-left: 1rem; } - - a { - color: $text-muted; - } } .dropdown-menu-demo { diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss index 24dac19b3..e5ac652f6 100644 --- a/src/scss/layout/_navbar.scss +++ b/src/scss/layout/_navbar.scss @@ -112,7 +112,7 @@ } .dropdown-toggle:after { - margin-left: auto; + margin-inline-start: auto; } .nav-item.active:after { @@ -171,6 +171,11 @@ Navbar } } +.navbar-nav { + margin: 0; + padding: 0; +} + .navbar-expand { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss index d555e5145..41eaf42a6 100644 --- a/src/scss/ui/_avatars.scss +++ b/src/scss/ui/_avatars.scss @@ -1,10 +1,10 @@ .avatar { --#{$variable-prefix}avatar-size: #{$avatar-size}; position: relative; - width: $avatar-size; - height: $avatar-size; - font-size: $avatar-font-size; - font-weight: $font-weight-bold; + width: var(--#{$variable-prefix}avatar-size); + height: var(--#{$variable-prefix}avatar-size); + font-size: calc(var(--#{$variable-prefix}avatar-size) / #{$line-height-base * 2}); + font-weight: $font-weight-normal; display: inline-flex; align-items: center; justify-content: center; @@ -41,10 +41,10 @@ @each $avatar-size, $size in $avatar-sizes { .avatar-#{$avatar-size} { --#{$variable-prefix}avatar-size: #{$size}; - width: $size; - height: $size; - font-size: $size / 2; - line-height: $size; + //width: $size; + //height: $size; + //font-size: $size / 2; + //line-height: $size; } } diff --git a/src/scss/ui/_badges.scss b/src/scss/ui/_badges.scss index 059afa97e..f237652ed 100644 --- a/src/scss/ui/_badges.scss +++ b/src/scss/ui/_badges.scss @@ -1,10 +1,15 @@ .badge { display: inline-flex; justify-content: center; + align-items: center; background: $gray-500; overflow: hidden; vertical-align: text-bottom; user-select: none; + padding: calc(.25rem - 1px) .25rem; + height: 1.25rem; + border: 1px solid transparent; + min-width: 1.25rem; @at-root a#{&} { color: $white; @@ -19,21 +24,16 @@ padding: 0; border-radius: $border-radius-full; } + + .avatar { + box-sizing: content-box; + width: 1.25rem; + height: 1.25rem; + margin: 0 .5rem 0 -.5rem; + } } -.badge-up { - position: absolute; - top: 25%; - right: 0; - min-width: 1.75em; - min-height: 1.75em; - padding: 0 .25rem; - line-height: 1rem; - background-clip: padding-box; - transform: translate(0%, -50%); -} - -//bordered +// bordered .badge-outline { background-color: transparent; border: 1px solid currentColor; @@ -42,23 +42,4 @@ .badge-pill { border-radius: 100px; min-width: 1.75em; -} - -.badge-avatar { - box-sizing: content-box; - width: 1.75em; - margin: 0 .5em 0 -.5em; - color: $light-white; - background: $light-black no-repeat center/cover; - vertical-align: text-bottom; -} - -.badge-addon { - padding: 0 .5rem; - margin: 0 -.5em 0 .5em; - min-width: 1.75em; - background: $light-black; - text-align: center; - color: $white; - text-decoration: none; } \ No newline at end of file diff --git a/src/scss/ui/_breadcrumbs.scss b/src/scss/ui/_breadcrumbs.scss index 4a67daa94..09beacf75 100644 --- a/src/scss/ui/_breadcrumbs.scss +++ b/src/scss/ui/_breadcrumbs.scss @@ -24,6 +24,10 @@ .breadcrumb-alternate { a { color: $text-muted; + + &:hover { + text-decoration: underline; + } } .breadcrumb-item.active { diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss index 069298d75..b85a3b729 100644 --- a/src/scss/ui/_buttons.scss +++ b/src/scss/ui/_buttons.scss @@ -4,7 +4,7 @@ justify-content: center; color: inherit; background-color: $white; - border-color: $border-color-transparent; + border-color: $border-color-dark-transparent; &:hover { color: inherit; @@ -38,6 +38,10 @@ .icon-right { margin: 0 -.25rem 0 .5rem; } + + .badge { + top: auto; + } } %btn-color { diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss index a77ce1e7e..b683adada 100644 --- a/src/scss/ui/_cards.scss +++ b/src/scss/ui/_cards.scss @@ -1,11 +1,6 @@ .card { - margin-bottom: $cards-grid-gap; box-shadow: $card-shadow; - @include media-breakpoint-down($cards-grid-breakpoint) { - margin-bottom: $cards-grid-gap-sm; - } - @media print { border: none; box-shadow: none; @@ -164,7 +159,7 @@ display: block; margin: 0 0 1rem; font-size: $h3-font-size; - font-weight: $headings-font-weight; + font-weight: $font-weight-medium; color: $headings-color; line-height: 1.5rem; diff --git a/src/scss/ui/_dropdowns.scss b/src/scss/ui/_dropdowns.scss index 5103e9904..2adab8828 100644 --- a/src/scss/ui/_dropdowns.scss +++ b/src/scss/ui/_dropdowns.scss @@ -16,7 +16,6 @@ .dropdown-item { min-width: $dropdown-min-width; - color: inherit; display: flex; align-items: center; margin: 0; @@ -24,12 +23,12 @@ } .dropdown-item-icon { - width: 1rem !important; - font-size: 1rem !important; + width: 1.25rem !important; + font-size: 1.25rem !important; margin-right: .5rem; - opacity: .64; + color: $text-muted; + opacity: $text-muted-opacity; text-align: center; - stroke-width: 2px; } .dropdown-header { diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss index 0ae1cd0a0..d0af0e00a 100644 --- a/src/scss/ui/_forms.scss +++ b/src/scss/ui/_forms.scss @@ -8,10 +8,7 @@ textarea { Form label */ .form-label { - font-size: $h4-font-size; - font-weight: $font-weight-bold; display: block; - margin-bottom: .5rem; &.required { &:after { diff --git a/src/scss/ui/_grid.scss b/src/scss/ui/_grid.scss index 4bf533924..6631eb493 100644 --- a/src/scss/ui/_grid.scss +++ b/src/scss/ui/_grid.scss @@ -41,25 +41,15 @@ } .row-cards { - margin-left: -($cards-grid-gap / 2); - margin-right: -($cards-grid-gap / 2); + --#{$variable-prefix}gutter-x: #{$cards-grid-gap}; + --#{$variable-prefix}gutter-y: #{$cards-grid-gap}; .row-cards { flex: 1; } - >* { - padding-left: $cards-grid-gap / 2; - padding-right: $cards-grid-gap / 2; - } - @include media-breakpoint-down($cards-grid-breakpoint) { - margin-left: -($cards-grid-gap-sm / 2); - margin-right: -($cards-grid-gap-sm / 2); - - >* { - padding-left: $cards-grid-gap-sm / 2; - padding-right: $cards-grid-gap-sm / 2; - } + --#{$variable-prefix}gutter-x: #{$cards-grid-gap-sm} / 2; + --#{$variable-prefix}gutter-y: #{$cards-grid-gap-sm} / 2; } } \ No newline at end of file diff --git a/src/scss/ui/_icons.scss b/src/scss/ui/_icons.scss index 71c5481d2..dd515e1ec 100644 --- a/src/scss/ui/_icons.scss +++ b/src/scss/ui/_icons.scss @@ -1,8 +1,7 @@ .icon { - width: 1rem; - height: 1rem; - font-size: 1rem; - vertical-align: text-bottom; + width: $font-size-base * $line-height-base; + height: $font-size-base * $line-height-base; + vertical-align: sub; @if $icon-stroke-width { stroke-width: $icon-stroke-width; @@ -13,27 +12,8 @@ } } -.icon-thin { - stroke-width: 1.5; -} - -.icon-md { - width: 1.5rem; - height: 1.5rem; -} - -.icon-lg { - width: 2rem; - height: 2rem; -} - -.icon-xl { - width: 4rem; - height: 4rem; - - &.icon-thin { - stroke-width: 1; - } +.icon-filled { + fill: currentColor; } .icons-list { diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss index d86743a2b..d3685ed76 100644 --- a/src/scss/ui/_lists.scss +++ b/src/scss/ui/_lists.scss @@ -186,10 +186,14 @@ /** Inline list */ +.list-inline-item:not(:last-child) { + margin-right: auto; + margin-inline-end: $list-inline-padding; +} .list-inline-dots { .list-inline-item + .list-inline-item:before { - content: '· '; - margin-right: $list-inline-padding; + content: ' · '; + margin-inline-end: $list-inline-padding; } } \ No newline at end of file diff --git a/src/scss/ui/_markdown.scss b/src/scss/ui/_markdown.scss index 3eb18de68..9894c0317 100644 --- a/src/scss/ui/_markdown.scss +++ b/src/scss/ui/_markdown.scss @@ -16,6 +16,27 @@ Markdown > { h1, h2, h3, h4, h5, h6 { margin-top: 2rem; + margin-bottom: .25rem; + } + + h1 { + font-size: $h2-font-size; + line-height: $h2-line-height; + } + + h2 { + font-size: $h3-font-size; + line-height: $h3-line-height; + } + + h3 { + font-size: $h4-font-size; + line-height: $h4-line-height; + } + + h4 { + font-size: $h5-font-size; + line-height: $h5-line-height; } } diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss index be2e4f552..9a6355f49 100644 --- a/src/scss/ui/_nav.scss +++ b/src/scss/ui/_nav.scss @@ -53,19 +53,16 @@ display: flex; transition: .3s color; align-items: center; - - .icon { - display: inline-block; - font-size: 1rem; - } } .nav-link-icon { width: 1.25rem; - height: 1rem; - font-size: 1rem; + height: 1.25rem; + margin-inline-end: .5rem; .icon { display: block; + width: 100%; + height: 100%; } } \ No newline at end of file diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss index 475cb175e..26e40ebee 100644 --- a/src/scss/ui/_type.scss +++ b/src/scss/ui/_type.scss @@ -8,6 +8,12 @@ a { text-decoration-skip-ink: auto; } +ul, +ol { + margin: 0 0 1rem 1rem; + padding: 0 0 0 1rem; +} + h1, h2, h3,