diff --git a/src/pages/_docs/alerts.md b/src/pages/_docs/alerts.md index a6f7eeeb8..258335488 100644 --- a/src/pages/_docs/alerts.md +++ b/src/pages/_docs/alerts.md @@ -1,6 +1,6 @@ --- title: Alerts -menu: docs.components.alerts +menu: help.docs.components.alerts description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app. bootstrap-link: components/alerts/ --- diff --git a/src/pages/_docs/autosize.md b/src/pages/_docs/autosize.md index 803cfff7c..04233fc0a 100644 --- a/src/pages/_docs/autosize.md +++ b/src/pages/_docs/autosize.md @@ -1,6 +1,6 @@ --- title: Autosize -menu: docs.plugins.autosize +menu: help.docs.plugins.autosize description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type. libs: autosize --- diff --git a/src/pages/_docs/avatars.md b/src/pages/_docs/avatars.md index 419c9bede..a0e3ca647 100644 --- a/src/pages/_docs/avatars.md +++ b/src/pages/_docs/avatars.md @@ -1,6 +1,6 @@ --- title: Avatars -menu: docs.components.avatars +menu: help.docs.components.avatars description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media. --- diff --git a/src/pages/_docs/badges.md b/src/pages/_docs/badges.md index 378211619..6cc292ff6 100644 --- a/src/pages/_docs/badges.md +++ b/src/pages/_docs/badges.md @@ -1,6 +1,6 @@ --- title: Badges -menu: docs.components.badges +menu: help.docs.components.badges description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info. bootstrap-link: components/badge/ --- diff --git a/src/pages/_docs/borders.md b/src/pages/_docs/borders.md index d0f04a958..3a24e841e 100644 --- a/src/pages/_docs/borders.md +++ b/src/pages/_docs/borders.md @@ -1,6 +1,6 @@ --- title: Borders -menu: docs.utils.borders +menu: help.docs.utils.borders description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. --- diff --git a/src/pages/_docs/breadcrumb.md b/src/pages/_docs/breadcrumb.md index a06f28553..ef91752a3 100644 --- a/src/pages/_docs/breadcrumb.md +++ b/src/pages/_docs/breadcrumb.md @@ -1,6 +1,6 @@ --- title: Breadcrumb -menu: docs.components.breadcrumb +menu: help.docs.components.breadcrumb description: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure. bootstrap-link: components/breadcrumb/ --- diff --git a/src/pages/_docs/browser-support.md b/src/pages/_docs/browser-support.md index 260687a7f..4529b0136 100644 --- a/src/pages/_docs/browser-support.md +++ b/src/pages/_docs/browser-support.md @@ -1,6 +1,6 @@ --- title: Browser Support -menu: docs.base.browser-support +menu: help.docs.base.browser-support --- As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones. diff --git a/src/pages/_docs/buttons.md b/src/pages/_docs/buttons.md index a0501b821..582c6992a 100644 --- a/src/pages/_docs/buttons.md +++ b/src/pages/_docs/buttons.md @@ -2,7 +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/ -menu: docs.components.buttons +menu: help.docs.components.buttons --- diff --git a/src/pages/_docs/cards.md b/src/pages/_docs/cards.md index 66251492c..914edfccb 100644 --- a/src/pages/_docs/cards.md +++ b/src/pages/_docs/cards.md @@ -1,6 +1,6 @@ --- title: Cards -menu: docs.components.cards +menu: help.docs.components.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/ --- diff --git a/src/pages/_docs/carousel.md b/src/pages/_docs/carousel.md index 99c30e3bf..b9ece93cb 100644 --- a/src/pages/_docs/carousel.md +++ b/src/pages/_docs/carousel.md @@ -1,6 +1,6 @@ --- title: Carousel -menu: docs.components.carousel +menu: help.docs.components.carousel description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information. bootstrap-link: components/carousel/ --- diff --git a/src/pages/_docs/charts.md b/src/pages/_docs/charts.md index 41e6d2a92..870fc44b8 100644 --- a/src/pages/_docs/charts.md +++ b/src/pages/_docs/charts.md @@ -1,6 +1,6 @@ --- title: Charts -menu: docs.plugins.charts +menu: help.docs.plugins.charts libs: apexcharts description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. --- diff --git a/src/pages/_docs/colors.md b/src/pages/_docs/colors.md index 54360b8e0..67efcb950 100644 --- a/src/pages/_docs/colors.md +++ b/src/pages/_docs/colors.md @@ -1,6 +1,6 @@ --- title: Colors -menu: docs.content.colors +menu: help.docs.content.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/ --- diff --git a/src/pages/_docs/countup.md b/src/pages/_docs/countup.md index ec83bcfb7..3827ced76 100644 --- a/src/pages/_docs/countup.md +++ b/src/pages/_docs/countup.md @@ -1,7 +1,7 @@ --- title: Countup description: A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/) -menu: docs.components.countup +menu: help.docs.components.countup libs: countup --- diff --git a/src/pages/_docs/cursors.md b/src/pages/_docs/cursors.md index 424c2c8c6..d3de38fd8 100644 --- a/src/pages/_docs/cursors.md +++ b/src/pages/_docs/cursors.md @@ -1,7 +1,7 @@ --- title: Cursors description: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed. -menu: docs.utils.cursors +menu: help.docs.utils.cursors --- ## Cursor utilities diff --git a/src/pages/_docs/customize.md b/src/pages/_docs/customize.md index 37e702449..079b8351f 100644 --- a/src/pages/_docs/customize.md +++ b/src/pages/_docs/customize.md @@ -1,5 +1,5 @@ --- -menu: docs.content.customize +menu: help.docs.content.customize title: Customize Tabler description: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it. --- diff --git a/src/pages/_docs/datagrid.md b/src/pages/_docs/datagrid.md index 4b5d858d5..40591410d 100644 --- a/src/pages/_docs/datagrid.md +++ b/src/pages/_docs/datagrid.md @@ -1,6 +1,6 @@ --- title: Data grid -menu: docs.components.datagrid +menu: help.docs.components.datagrid description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content. --- diff --git a/src/pages/_docs/divider.md b/src/pages/_docs/divider.md index 3efacafc8..0f94d58c9 100644 --- a/src/pages/_docs/divider.md +++ b/src/pages/_docs/divider.md @@ -2,7 +2,7 @@ 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 -menu: docs.components.divider +menu: help.docs.components.divider --- diff --git a/src/pages/_docs/download.md b/src/pages/_docs/download.md index 0fc7c6d1f..084481fdd 100644 --- a/src/pages/_docs/download.md +++ b/src/pages/_docs/download.md @@ -1,6 +1,6 @@ --- title: Download -menu: docs.base.download +menu: help.docs.base.download description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more. --- diff --git a/src/pages/_docs/dropdowns.md b/src/pages/_docs/dropdowns.md index 8f7424c37..b3177f505 100644 --- a/src/pages/_docs/dropdowns.md +++ b/src/pages/_docs/dropdowns.md @@ -2,7 +2,7 @@ title: Dropdowns description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear. bootstrap-link: components/dropdowns -menu: docs.components.dropdowns +menu: help.docs.components.dropdowns --- diff --git a/src/pages/_docs/dropzone.md b/src/pages/_docs/dropzone.md index 1899a1a6e..6d8d5416d 100644 --- a/src/pages/_docs/dropzone.md +++ b/src/pages/_docs/dropzone.md @@ -1,6 +1,6 @@ --- title: Dropzone -menu: docs.plugins.dropzone +menu: help.docs.plugins.dropzone libs: dropzone description: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people. --- diff --git a/src/pages/_docs/empty.md b/src/pages/_docs/empty.md index 26e3c7cd8..f66374129 100644 --- a/src/pages/_docs/empty.md +++ b/src/pages/_docs/empty.md @@ -1,7 +1,7 @@ --- title: Empty states description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app. -menu: docs.components.empty +menu: help.docs.components.empty --- diff --git a/src/pages/_docs/flags.md b/src/pages/_docs/flags.md index 44d4c8f37..5b578deae 100644 --- a/src/pages/_docs/flags.md +++ b/src/pages/_docs/flags.md @@ -1,6 +1,6 @@ --- title: Flags -menu: docs.plugins.flags +menu: help.docs.plugins.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 libs: tabler-flags diff --git a/src/pages/_docs/form-color-check.md b/src/pages/_docs/form-color-check.md index b194e846f..ee7b7dc69 100644 --- a/src/pages/_docs/form-color-check.md +++ b/src/pages/_docs/form-color-check.md @@ -1,6 +1,6 @@ --- title: Color check -menu: docs.forms.color-check +menu: help.docs.forms.color-check --- Your input controls can come in a variety of colors, depending on your preferences. Click [here]({% docs_url colors %}) to see the list of available colors. diff --git a/src/pages/_docs/form-elements.md b/src/pages/_docs/form-elements.md index 37c25aa90..e644bc981 100644 --- a/src/pages/_docs/form-elements.md +++ b/src/pages/_docs/form-elements.md @@ -3,7 +3,7 @@ title: Form elements description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly. bootstrap-link: components/forms/ libs: nouislider -menu: docs.forms.form-elements +menu: help.docs.forms.form-elements --- diff --git a/src/pages/_docs/form-fieldset.md b/src/pages/_docs/form-fieldset.md index 8777ca9c6..cfc311b9e 100644 --- a/src/pages/_docs/form-fieldset.md +++ b/src/pages/_docs/form-fieldset.md @@ -1,6 +1,6 @@ --- title: Form fieldset -menu: docs.forms.fieldset +menu: help.docs.forms.fieldset --- Group parts of your form to make it well-structured and clearer for users, using the ``fieldset`` element. diff --git a/src/pages/_docs/form-helpers.md b/src/pages/_docs/form-helpers.md index 050ebaac5..a060a80a2 100644 --- a/src/pages/_docs/form-helpers.md +++ b/src/pages/_docs/form-helpers.md @@ -1,7 +1,7 @@ --- title: Form helpers description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. -menu: docs.forms.form-helpers +menu: help.docs.forms.form-helpers --- diff --git a/src/pages/_docs/form-image-check.md b/src/pages/_docs/form-image-check.md index 21090d97b..9733b68c2 100644 --- a/src/pages/_docs/form-image-check.md +++ b/src/pages/_docs/form-image-check.md @@ -1,6 +1,6 @@ --- title: Image check -menu: docs.forms.image-check +menu: help.docs.forms.image-check --- Add an image check to your form and give users visually attractive options to choose from. diff --git a/src/pages/_docs/form-selectboxes.md b/src/pages/_docs/form-selectboxes.md index 552c346a4..e65d45dd5 100644 --- a/src/pages/_docs/form-selectboxes.md +++ b/src/pages/_docs/form-selectboxes.md @@ -1,6 +1,6 @@ --- title: Form selectboxes -menu: docs.forms.selectboxes +menu: help.docs.forms.selectboxes --- Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design. diff --git a/src/pages/_docs/form-validation.md b/src/pages/_docs/form-validation.md index 3c2248544..c022d893a 100644 --- a/src/pages/_docs/form-validation.md +++ b/src/pages/_docs/form-validation.md @@ -1,6 +1,6 @@ --- title: Validation states -menu: docs.forms.validation-states +menu: help.docs.forms.validation-states description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect. --- diff --git a/src/pages/_docs/getting-started.md b/src/pages/_docs/getting-started.md index aca60db40..094ab7cb7 100644 --- a/src/pages/_docs/getting-started.md +++ b/src/pages/_docs/getting-started.md @@ -1,6 +1,6 @@ --- title: Getting started -menu: docs.base.getting-started +menu: help.docs.base.getting-started --- ## What are the benefits? diff --git a/src/pages/_docs/icons.md b/src/pages/_docs/icons.md index d06cbf9e2..a36a60c38 100644 --- a/src/pages/_docs/icons.md +++ b/src/pages/_docs/icons.md @@ -1,6 +1,6 @@ --- title: Icons -menu: docs.content.icons +menu: help.docs.content.icons description: Use one of over 1500 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects. banner: icons --- diff --git a/src/pages/_docs/index.html b/src/pages/_docs/index.html index 8de775d48..787c833d9 100644 --- a/src/pages/_docs/index.html +++ b/src/pages/_docs/index.html @@ -1,6 +1,6 @@ --- title: Introduction -menu: docs.index +menu: help.docs.index redirect_from: docs.html --- diff --git a/src/pages/_docs/inline-player.md b/src/pages/_docs/inline-player.md index 6186c028c..7e48a4d8f 100644 --- a/src/pages/_docs/inline-player.md +++ b/src/pages/_docs/inline-player.md @@ -1,6 +1,6 @@ --- title: Inline player -menu: docs.plugins.plyr +menu: help.docs.plugins.plyr libs: plyr description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. --- diff --git a/src/pages/_docs/input-mask.md b/src/pages/_docs/input-mask.md index e694af3ea..95ffa8c6b 100644 --- a/src/pages/_docs/input-mask.md +++ b/src/pages/_docs/input-mask.md @@ -1,7 +1,7 @@ --- title: Input mask description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors. -menu: docs.plugins.input-mask +menu: help.docs.plugins.input-mask --- To be able to use the input mask in your application you will need to install the imask dependency with `npm install imask`. diff --git a/src/pages/_docs/interactions.md b/src/pages/_docs/interactions.md index 7da2a82b9..2e5243790 100644 --- a/src/pages/_docs/interactions.md +++ b/src/pages/_docs/interactions.md @@ -1,7 +1,7 @@ --- title: Interactions description: Utility classes that change how users interact with contents of a website. -menu: docs.utils.interactions +menu: help.docs.utils.interactions --- ## Text selection diff --git a/src/pages/_docs/modals.md b/src/pages/_docs/modals.md index f6055dfc0..58a1a0628 100644 --- a/src/pages/_docs/modals.md +++ b/src/pages/_docs/modals.md @@ -1,7 +1,7 @@ --- title: Modals description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. -menu: docs.components.modals +menu: help.docs.components.modals --- ## Default markup diff --git a/src/pages/_docs/page-headers.md b/src/pages/_docs/page-headers.md index e51b27cce..5a322dd14 100644 --- a/src/pages/_docs/page-headers.md +++ b/src/pages/_docs/page-headers.md @@ -1,6 +1,6 @@ --- title: Page headers -menu: docs.layout.headers +menu: help.docs.layout.headers description: Page heading examples for Tabler --- diff --git a/src/pages/_docs/payments.md b/src/pages/_docs/payments.md index ec4dd97fd..d0d580e19 100644 --- a/src/pages/_docs/payments.md +++ b/src/pages/_docs/payments.md @@ -1,6 +1,6 @@ --- title: Payments -menu: docs.plugins.payments +menu: help.docs.plugins.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 --- diff --git a/src/pages/_docs/placeholder.md b/src/pages/_docs/placeholder.md index 9cd7c7854..a5433efa4 100644 --- a/src/pages/_docs/placeholder.md +++ b/src/pages/_docs/placeholder.md @@ -1,6 +1,6 @@ --- title: Placeholder -menu: docs.components.placeholder +menu: help.docs.components.placeholder description: Placeholder is used to reserve space for content that soon will appear in a layout. redirect_from: - /docs/skeleton.html diff --git a/src/pages/_docs/popover.md b/src/pages/_docs/popover.md index d461e8453..e6419d670 100644 --- a/src/pages/_docs/popover.md +++ b/src/pages/_docs/popover.md @@ -2,7 +2,7 @@ title: Popovers description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient. bootstrap-link: components/popovers -menu: docs.components.popover +menu: help.docs.components.popover --- diff --git a/src/pages/_docs/progress.md b/src/pages/_docs/progress.md index 858a2b580..adbda2c77 100644 --- a/src/pages/_docs/progress.md +++ b/src/pages/_docs/progress.md @@ -2,7 +2,7 @@ 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 -menu: docs.components.progress +menu: help.docs.components.progress --- diff --git a/src/pages/_docs/progressbg.md b/src/pages/_docs/progressbg.md index f820a7ede..9c315b364 100644 --- a/src/pages/_docs/progressbg.md +++ b/src/pages/_docs/progressbg.md @@ -1,6 +1,6 @@ --- title: Progressbg -menu: docs.components.progressbg +menu: help.docs.components.progressbg --- {% capture code %} diff --git a/src/pages/_docs/range-slider.md b/src/pages/_docs/range-slider.md index 79a34c322..659f273ce 100644 --- a/src/pages/_docs/range-slider.md +++ b/src/pages/_docs/range-slider.md @@ -1,6 +1,6 @@ --- title: Range slider -menu: docs.components.range-slider +menu: help.docs.components.range-slider libs: nouislider --- diff --git a/src/pages/_docs/ribbons.md b/src/pages/_docs/ribbons.md index ec12ffd58..827c08348 100644 --- a/src/pages/_docs/ribbons.md +++ b/src/pages/_docs/ribbons.md @@ -1,6 +1,6 @@ --- title: Ribbons -menu: docs.components.ribbons +menu: help.docs.components.ribbons description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out. --- diff --git a/src/pages/_docs/spinners.md b/src/pages/_docs/spinners.md index c7badd189..9dbce149e 100644 --- a/src/pages/_docs/spinners.md +++ b/src/pages/_docs/spinners.md @@ -1,6 +1,6 @@ --- title: Spinners -menu: docs.components.spinners +menu: help.docs.components.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/ --- diff --git a/src/pages/_docs/statuses.md b/src/pages/_docs/statuses.md index 4219566d1..fe40cf3c3 100644 --- a/src/pages/_docs/statuses.md +++ b/src/pages/_docs/statuses.md @@ -1,6 +1,6 @@ --- title: Statuses -menu: docs.components.statuses +menu: help.docs.components.statuses description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space. --- diff --git a/src/pages/_docs/steps.md b/src/pages/_docs/steps.md index 929dfce3c..f8f536fe6 100644 --- a/src/pages/_docs/steps.md +++ b/src/pages/_docs/steps.md @@ -1,6 +1,6 @@ --- title: Steps -menu: docs.components.steps +menu: help.docs.components.steps description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully. new: true --- diff --git a/src/pages/_docs/switch-icon.md b/src/pages/_docs/switch-icon.md index 67b06d833..4897113c6 100644 --- a/src/pages/_docs/switch-icon.md +++ b/src/pages/_docs/switch-icon.md @@ -1,6 +1,6 @@ --- title: Switch icon -menu: docs.components.switch-icon +menu: help.docs.components.switch-icon description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version. banner: icons --- diff --git a/src/pages/_docs/tables.md b/src/pages/_docs/tables.md index a3c18954d..8b3537bd2 100644 --- a/src/pages/_docs/tables.md +++ b/src/pages/_docs/tables.md @@ -1,6 +1,6 @@ --- title: Tables -menu: docs.components.tables +menu: help.docs.components.tables description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity. bootstrap-link: content/tables/ --- diff --git a/src/pages/_docs/tabs.md b/src/pages/_docs/tabs.md index ea443363a..a88ba0495 100644 --- a/src/pages/_docs/tabs.md +++ b/src/pages/_docs/tabs.md @@ -1,6 +1,6 @@ --- title: Tabs -menu: docs.components.tabs +menu: help.docs.components.tabs description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate. bootstrap-link: components/navs/ --- diff --git a/src/pages/_docs/timelines.md b/src/pages/_docs/timelines.md index a2cdf29ec..3fc98c0ac 100644 --- a/src/pages/_docs/timelines.md +++ b/src/pages/_docs/timelines.md @@ -1,7 +1,7 @@ --- title: Timelines description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time. -menu: docs.components.timelines +menu: help.docs.components.timelines --- diff --git a/src/pages/_docs/tinymce.md b/src/pages/_docs/tinymce.md index 8666d2b09..5a49f6bba 100644 --- a/src/pages/_docs/tinymce.md +++ b/src/pages/_docs/tinymce.md @@ -1,6 +1,6 @@ --- title: TinyMCE -menu: docs.plugins.tinymce +menu: help.docs.plugins.tinymce libs: tinymce description: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case. --- diff --git a/src/pages/_docs/toasts.md b/src/pages/_docs/toasts.md index 789defc04..5517b5bd6 100644 --- a/src/pages/_docs/toasts.md +++ b/src/pages/_docs/toasts.md @@ -1,6 +1,6 @@ --- title: Toasts -menu: docs.components.toasts +menu: help.docs.components.toasts description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action. bootstrap-link: components/toasts/ --- diff --git a/src/pages/_docs/tooltips.md b/src/pages/_docs/tooltips.md index 34980f842..35385e5e1 100644 --- a/src/pages/_docs/tooltips.md +++ b/src/pages/_docs/tooltips.md @@ -1,6 +1,6 @@ --- title: Tooltips -menu: docs.components.tooltips +menu: help.docs.components.tooltips description: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software. bootstrap-link: components/tooltips/ --- diff --git a/src/pages/_docs/typography.md b/src/pages/_docs/typography.md index d76fc566c..11ad9fb02 100644 --- a/src/pages/_docs/typography.md +++ b/src/pages/_docs/typography.md @@ -1,6 +1,6 @@ --- title: Typography -menu: docs.content.typography +menu: help.docs.content.typography description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website. bootstrap-link: content/typography/ --- diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html index f2bd644df..d1b700e57 100644 --- a/src/pages/_includes/example.html +++ b/src/pages/_includes/example.html @@ -34,8 +34,8 @@ {% assign html = html | replace_regex: "\n\n+", new_line %} {% unless include.show-svg %} -{% assign html = html | replace_regex: ']*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '' %} -{% assign html = html | replace_regex: ']*>.*?<\/svg>', '' %} +{% assign html = html | replace: ' + -
-
- {% include ui/status-indicator.html animated=true color="green" %} -
- -
-

- tabler-icons.io -

-
-
    -
  • Up
    • -
  • Checked every 3 minutes
    • -
+
+
+
+ {% include ui/status-indicator.html animated=true color="green" %}
-
-
-
- {% include ui/button.html text="Configure" icon="settings" %} - {% include ui/button.html color="primary" text="Pause this monitor" icon="player-pause" %} +
+

+ tabler-icons.io +

+
+
    +
  • Up
    • +
  • Checked every 3 minutes
    • +
+
+
+ +
+
+ {% include ui/button.html text="Configure" icon="settings" %} + {% include ui/button.html color="primary" text="Pause this monitor" icon="player-pause" %} +
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html index 10e8d0423..a9d00c705 100644 --- a/src/pages/_layouts/docs.html +++ b/src/pages/_layouts/docs.html @@ -1,6 +1,6 @@ --- layout: default -menu: docs +menu: help.docs title: Documentation page-header: Documentation --- diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index d5f02853d..859d872e6 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -430,7 +430,7 @@ $badge-empty-size: .5rem !default; //buttons $input-btn-line-height: $line-height-base !default; $input-btn-font-size: $font-size-base !default; -$input-btn-font-family: var(--#{$prefix}font-family) !default; +$input-btn-font-family: var(--#{$prefix}font-sans-serif) !default; $input-btn-padding-y: .5rem - .0625rem !default; $input-btn-font-size-sm: $h5-font-size !default; @@ -680,7 +680,7 @@ $toast-border-color: var(--#{$prefix}border-color) !default; $toast-header-color: var(--#{$prefix}muted) !default; //progress -$progress-bg: var(--#{$prefix}gray-200) !default; +$progress-bg: var(--#{$prefix}border-color) !default; $progress-border-radius: var(--#{$prefix}border-radius) !default; $progress-bar-bg: var(--#{$prefix}primary) !default; $progress-height: .5rem !default; @@ -697,7 +697,7 @@ $list-group-active-bg: $active-bg !default; $list-group-active-border-color: $list-group-border-color !default; $list-group-active-color: inherit !default; -$input-bg: $white !default; +$input-bg: var(--#{$prefix}bg-forms) !default; $input-disabled-bg: $disabled-bg !default; $input-border-color: var(--#{$prefix}border-color) !default; $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default; @@ -713,17 +713,17 @@ $input-border-radius: var(--#{$prefix}border-radius) !default; $form-check-margin-bottom: .5rem !default; $form-check-input-width: 1rem !default; $form-check-padding-start: $form-check-input-width + .5rem !default; -$form-check-input-bg: $white !default; +$form-check-input-bg: var(--#{$prefix}bg-forms) !default; $form-check-input-border: var(--#{$prefix}border-width) solid $input-border-color-translucent !default; $form-check-input-border-radius: var(--#{$prefix}border-radius) !default; $form-check-input-checked-bg-size: 1rem !default; $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default; -$form-check-input-checked-color: $white !default; +$form-check-input-checked-color: var(--#{$prefix}bg-forms) !default; $form-check-input-checked-bg-repeat: repeat !default; -$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; -$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,") !default; -$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default; +$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,") !default; +$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default; $form-check-input-checked-border-color: $input-border-color-translucent !default; @@ -738,7 +738,7 @@ $form-switch-bg-image: url("data:image/svg+xml,