mirror of
https://github.com/tabler/tabler.git
synced 2026-07-21 04:52:21 +04:00
dark mode improvements (#1287)
This commit is contained in:
Paweł Kuna
GitHub
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Getting started
|
||||
menu: docs.base.getting-started
|
||||
menu: help.docs.base.getting-started
|
||||
---
|
||||
|
||||
## What are the benefits?
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Introduction
|
||||
menu: docs.index
|
||||
menu: help.docs.index
|
||||
redirect_from: docs.html
|
||||
---
|
||||
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
@@ -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`.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Page headers
|
||||
menu: docs.layout.headers
|
||||
menu: help.docs.layout.headers
|
||||
description: Page heading examples for Tabler
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Progressbg
|
||||
menu: docs.components.progressbg
|
||||
menu: help.docs.components.progressbg
|
||||
---
|
||||
|
||||
{% capture code %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Range slider
|
||||
menu: docs.components.range-slider
|
||||
menu: help.docs.components.range-slider
|
||||
libs: nouislider
|
||||
---
|
||||
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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.
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -34,8 +34,8 @@
|
||||
{% assign html = html | replace_regex: "\n\n+", new_line %}
|
||||
|
||||
{% unless include.show-svg %}
|
||||
{% assign html = html | replace_regex: '<svg[^>]*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '<!-- SVG icon code with class="\1" -->' %}
|
||||
{% assign html = html | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
|
||||
{% assign html = html | replace: '<svg', '<!-- SVG icon code -->
|
||||
<svg' %}
|
||||
{% endunless %}
|
||||
|
||||
{% assign html = html | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
|
||||
|
||||
@@ -1,25 +1,27 @@
|
||||
<div class="page-header d-print-none">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/status-indicator.html animated=true color="green" %}
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
tabler-icons.io
|
||||
</h2>
|
||||
<div class="text-muted">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item"><span class="text-green">Up</span></li>
|
||||
<li class="list-inline-item">Checked every 3 minutes</li>
|
||||
</ul>
|
||||
<div class="container">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
{% include ui/status-indicator.html animated=true color="green" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-auto ms-auto d-print-none">
|
||||
<div class="btn-list">
|
||||
{% include ui/button.html text="Configure" icon="settings" %}
|
||||
{% include ui/button.html color="primary" text="Pause this monitor" icon="player-pause" %}
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
tabler-icons.io
|
||||
</h2>
|
||||
<div class="text-muted">
|
||||
<ul class="list-inline list-inline-dots mb-0">
|
||||
<li class="list-inline-item"><span class="text-green">Up</span></li>
|
||||
<li class="list-inline-item">Checked every 3 minutes</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-auto ms-auto d-print-none">
|
||||
<div class="btn-list">
|
||||
{% include ui/button.html text="Configure" icon="settings" %}
|
||||
{% include ui/button.html color="primary" text="Pause this monitor" icon="player-pause" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: default
|
||||
menu: docs
|
||||
menu: help.docs
|
||||
title: Documentation
|
||||
page-header: Documentation
|
||||
---
|
||||
|
||||
+10
-10
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
|
||||
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
|
||||
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$form-check-input-checked-color}' cx='8' cy='8' /></svg>") !default;
|
||||
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
|
||||
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$white}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
|
||||
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle r='3' fill='#{$white}' cx='8' cy='8' /></svg>") !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,<svg xmlns='http://www.w3.org/200
|
||||
$form-switch-bg-size: auto !default;
|
||||
|
||||
$form-range-track-height: .25rem !default;
|
||||
$form-range-track-bg: var(--#{$prefix}gray-200) !default;
|
||||
$form-range-track-bg: var(--#{$prefix}border-color) !default;
|
||||
$form-range-thumb-border: 2px solid $white !default;
|
||||
$form-range-thumb-bg: var(--#{$prefix}primary) !default;
|
||||
$form-range-thumb-height: 1rem !default;
|
||||
@@ -753,7 +753,7 @@ $form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
||||
$caret-width: .36em !default;
|
||||
|
||||
// Legend
|
||||
$legend-bg: var(--#{$prefix}gray-50) !default;
|
||||
$legend-bg: var(--#{$prefix}border-color) !default;
|
||||
$legend-size: .75em !default;
|
||||
$legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.example {
|
||||
padding: 2rem;
|
||||
margin: 1rem 0 2rem;
|
||||
border: var(--#{$prefix}border-width) solid $border-color;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
border-radius: 3px 3px 0 0;
|
||||
position: relative;
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
.example-code {
|
||||
margin: 2rem 0;
|
||||
border: var(--#{$prefix}border-width) solid $border-color;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
border-top: none;
|
||||
|
||||
pre {
|
||||
|
||||
@@ -18,6 +18,9 @@ body:not(.theme-dark) .hide-theme-light {
|
||||
--#{$prefix}body-bg: #{$dark-mode-darken};
|
||||
--#{$prefix}body-bg-rgb: #{to-rgb($dark-mode-darken)};
|
||||
|
||||
--#{$prefix}bg-forms: #{$dark-mode-darken};
|
||||
--#{$prefix}bg-surface: #{$dark};
|
||||
|
||||
--#{$prefix}card-bg: #{$dark-mode-darken};
|
||||
--#{$prefix}card-bg-hover: #{$dark-mode-darken};
|
||||
--#{$prefix}card-bg-rgb: #{to-rgb($dark-mode-darken)};
|
||||
@@ -28,6 +31,9 @@ body:not(.theme-dark) .hide-theme-light {
|
||||
|
||||
--#{$prefix}btn-color: #{$dark-mode-darken};
|
||||
|
||||
--#{$prefix}code-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}code-bg: #{$dark-mode-border-color-light};
|
||||
|
||||
color: $dark-mode-text;
|
||||
background-color: $dark-mode-darken;
|
||||
}
|
||||
@@ -54,10 +60,14 @@ body:not(.theme-dark) .hide-theme-light {
|
||||
.toast,
|
||||
.toast-header,
|
||||
.alert:not(.alert-important) {
|
||||
background-color: $dark;
|
||||
background-color: var(--tblr-bg-surface);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.modal {
|
||||
--#{$prefix}modal-border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: $dark-mode-darken !important;
|
||||
}
|
||||
@@ -119,10 +129,6 @@ body:not(.theme-dark) .hide-theme-light {
|
||||
--#{$prefix}avatar-bg: #{$dark-mode-lighten};
|
||||
}
|
||||
|
||||
.avatar-list-stacked .avatar {
|
||||
box-shadow: 0 0 0 2px $dark;
|
||||
}
|
||||
|
||||
.markdown,
|
||||
.markdown>*,
|
||||
.accordion-button {
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
}
|
||||
|
||||
--#{$prefix}bg-surface: #{$bg-surface};
|
||||
--#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
|
||||
--#{$prefix}bg-surface-dark: #{$bg-surface-dark};
|
||||
|
||||
--#{$prefix}border-color: #{$border-color};
|
||||
@@ -19,6 +20,10 @@
|
||||
--#{$prefix}icon-color: #{$icon-color};
|
||||
--#{$prefix}disabled-bg: #{$disabled-bg};
|
||||
|
||||
--#{$prefix}code-color: #{$code-color};
|
||||
--#{$prefix}code-bg: #{$code-bg};
|
||||
|
||||
|
||||
@each $name, $value in $font-weights {
|
||||
--#{$prefix}font-weight-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: $border-radius-pill;
|
||||
box-shadow: 0 0 0 2px $white;
|
||||
box-shadow: 0 0 0 2px $card-bg;
|
||||
}
|
||||
|
||||
@at-root a#{&} {
|
||||
@@ -82,7 +82,7 @@
|
||||
.avatar-upload {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border: 1px dashed $border-color;
|
||||
border: 1px dashed var(--#{$prefix}border-color);
|
||||
background: $form-check-input-bg;
|
||||
flex-direction: column;
|
||||
@include transition(color $transition-time, background-color $transition-time);
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
vertical-align: bottom;
|
||||
|
||||
@at-root a#{&} {
|
||||
color: $white;
|
||||
color: $card-bg;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.calendar {
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
border: var(--#{$prefix}border-width) solid $border-color;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
}
|
||||
|
||||
@@ -61,13 +61,13 @@
|
||||
color: var(--#{$prefix}primary);
|
||||
text-decoration: none;
|
||||
background: #fefeff;
|
||||
border-color: $border-color;
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.date-today {
|
||||
color: var(--#{$prefix}primary);
|
||||
border-color: $border-color;
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -355,7 +355,7 @@
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: var(--#{$prefix}border-width) solid $border-color;
|
||||
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -493,7 +493,7 @@ Card list group
|
||||
*/
|
||||
.card-list-group {
|
||||
.card-body + & {
|
||||
border-top: var(--#{$prefix}border-width) solid $border-color;
|
||||
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
|
||||
@@ -60,6 +60,6 @@
|
||||
|
||||
|
||||
.empty-bordered {
|
||||
border: var(--#{$prefix}border-width) solid $border-color;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
}
|
||||
|
||||
@@ -207,7 +207,7 @@ Input group
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background: transparent;
|
||||
background: $form-check-input-bg;
|
||||
@include transition($input-transition);
|
||||
|
||||
&:first-child {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.col-separator {
|
||||
border-left: var(--#{$prefix}border-width) solid $border-color;
|
||||
border-left: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
%container-common {
|
||||
|
||||
@@ -4,7 +4,7 @@ Legend
|
||||
.legend {
|
||||
--#{$prefix}legend-size: #{$legend-size};
|
||||
display: inline-block;
|
||||
background: var(--#{$prefix}gray-200);
|
||||
background: $legend-bg;
|
||||
width: var(--#{$prefix}legend-size);
|
||||
height: var(--#{$prefix}legend-size);
|
||||
border-radius: $legend-border-radius;
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
.list-bordered {
|
||||
.list-item {
|
||||
border-top: var(--#{$prefix}border-width) solid $border-color;
|
||||
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
margin-top: -1px;
|
||||
|
||||
&:first-child {
|
||||
@@ -203,7 +203,7 @@ Timeline
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: var(--#{$prefix}border-width) solid $border-color;
|
||||
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
box-sizing: content-box;
|
||||
display: block;
|
||||
content: "";
|
||||
border: 2px solid $white;
|
||||
border: 2px solid $card-bg;
|
||||
border-radius: $border-radius-pill;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@@ -90,7 +90,7 @@
|
||||
font-weight: var(--#{$prefix}font-weight-bold);
|
||||
|
||||
&:before {
|
||||
background: $white;
|
||||
background: $card-bg;
|
||||
}
|
||||
|
||||
& ~ .step-item {
|
||||
|
||||
@@ -64,7 +64,7 @@ b {
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid $border-color;
|
||||
border-left: 2px solid var(--#{$prefix}border-color);
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
@@ -98,13 +98,17 @@ dl {
|
||||
|
||||
pre {
|
||||
padding: $pre-padding;
|
||||
background: $pre-bg;
|
||||
background: var(--#{$prefix}code-bg);
|
||||
color: var(--#{$prefix}code-color);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
|
||||
code {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background: $pre-bg;
|
||||
background: var(--#{$prefix}code-bg);
|
||||
padding: 2px 4px;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
}
|
||||
|
||||
@@ -42,8 +42,8 @@ Image check
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
user-select: none;
|
||||
background: $white;
|
||||
border: var(--#{$prefix}border-width) solid $border-color;
|
||||
background: $form-check-input-bg;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
border-radius: 3px;
|
||||
@include transition(opacity $transition-time);
|
||||
|
||||
|
||||
Vendored
+2
-1
@@ -20,7 +20,7 @@
|
||||
.container__main {
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.container__months {
|
||||
@@ -52,6 +52,7 @@
|
||||
|
||||
.datepicker-inline & .container__months {
|
||||
box-shadow: none;
|
||||
background-color: var(--#{$prefix}bg-forms);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Vendored
+11
@@ -22,4 +22,15 @@
|
||||
|
||||
.tox-statusbar {
|
||||
border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !important;
|
||||
}
|
||||
|
||||
.tox .tox-toolbar,
|
||||
.tox .tox-toolbar__overflow,
|
||||
.tox .tox-toolbar__primary {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.tox .tox-toolbar-overlord,
|
||||
.tox:not(.tox-tinymce-inline) .tox-editor-header {
|
||||
background: transparent !important;
|
||||
}
|
||||
Reference in New Issue
Block a user