Palette classes
Indigo color palette includes 2 colors: 1 main color without suffix (.bg-indigo) and 1 accent color with 100 suffix. Majority of components and layout parts are coded with maximum flexibility and support of different color options that can be changed on-the-fly just by adding or replacing proper color class. Also works perfectly in combination with other helpers, that makes Limitless very flexible and configurable.
SASS files include 10 different shades and tints of each color, but class names include only 2 of them. You can easy add new shades or tints of any color if you need to just by adding color variable to theme color map and re-compile your SASS files. That will generate all necessary color classes for all components and automatically add all states to them.
Please note: default Bootstrap contextual classes - primary, danger, success, warning, info - still available and correspond to main colors, so you can use both.bg-indigo and .[btn|badge|table|btn-outline|alert]-indigo as main color classes. For light semi-transparent indigo background color, add *-100 suffix and optionally .text-indigo class.
| Class | Description |
|---|---|
.bg-indigo.bg-indigo-100 |
Classes for background color. You can choose between 1 indigo color using .bg-indigo class and 1 accent (light) color using .bg-indigo-100 class |
.button-indigo.button-indigo-100 |
Classes for solid buttons. Include hover, active and open states |
.button-outline-indigo.button-outline-indigo-100 |
Classes for outline buttons. Include hover, active and open states |
.badge-indigo.badge-indigo-100 |
Classes for solid badges. Include hover, active and open states for links |
.alert-indigo |
Classes for light alerts. You can use .bg-indigo in combination with .text-white for solid background color |
.table-indigo |
Classes for light table rows or cells. You can use .bg-indigo in combination with .text-white for solid background color |
.list-group-item-indigo |
Classes for inline and clickable list group items. Include hover, and active states |
.border-indigo.border-indigo-100 |
Classes for border color. Useful when only border needs to have different colors - validation, highlights, custom buttons etc. Can be used with form controls, selects, cards, buttons and any other block element |
.border-top-indigo.border-top-indigo-100 |
Classes for top border color. Use this class if you need to highlight top border only |
.border-bottom-indigo.border-bottom-indigo-100 |
Classes for bottom border color. Use this class if you need to highlight bottom border only |
.border-left-indigo.border-left-indigo-100 |
Classes for left border color. Use this class if you need to highlight left border only |
.border-right-indigo.border-right-indigo-100 |
Classes for right border color. Use this class if you need to highlight right border only |
.text-indigo.text-indigo-100 |
Classes for text color. These colors can be used with: text, links, icons, lists etc. Base text color doesn't require suffix |
Alert options
Bordered, styled, solid in both directionsForm components
Inputs, selects, input groups etc.Input field text
Using .text-indigo class
Input border color
Using .border-indigo class
Input with feedback
Using .text-indigo class
Input group text addon - text
Using .text-indigo class
Input group addon - background
Using .bg-indigo-100 class
Input group addon - border
Using .border-indigo class
Input group icon addon - text
Using .text-indigo class
Input group icon addon - background
Using .bg-indigo-100 class
Input group icon addon - border
Using .border-indigo class
Input group button - solid background
Using .btn-indigo class
Input group button - solid border
Using .border-indigo class
Input group button - outline
Using .btn-outline-indigo class
Input group button - outline border
Using .border-indigo class
Select2 single - text
Using .text-indigo class
Select2 single - border
Using .border-indigo class
Multiselect - text
Using color class in buttonClass option
Multiselect - border
Using color class in buttonClass option
Custom select - text
Using .text-indigo class
Custom select - border
Using .border-indigo class
Custom file input - text
Using .text-indigo class
Custom file input - border
Using .border-indigo class
Tabs component color
Solid tabs nav and content colorTabs navigation color
Solid color tabs
custom background color to the tabs navigation and content with .bg-indigo palette classes
Text options
Text, link, badges, badge pills, iconsText
Using .text-indigo class in inline element
Badge pill
Using .badge-indigo class
Badge
Using .badge-indigo class
Progress bars
All colors, all sizes, all optionsBasic bar color
Using .bg-indigo classes
Striped bar color
Using .bg-indigo classes
Animated bar color
Using .bg-indigo classes
Table color options
Header, footer, rows, columns, cells etc.Header and footer
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @@Kopyov |
| 2 | Victoria | Baker | @@Vicky |
| 3 | James | Alexander | @@Alex |
| # | First Name | Last Name | Username |
Table rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @@Kopyov |
| 2 | Victoria | Baker | @@Vicky |
| 3 | James | Alexander | @@Alex |
| # | First Name | Last Name | Username |
Table columns
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @@Kopyov |
| 2 | Victoria | Baker | @@Vicky |
| 3 | James | Alexander | @@Alex |
| # | First Name | Last Name | Username |
Solid table
.bg-* classes to the table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @@Kopyov |
| 2 | Victoria | Baker | @@Vicky |
| 3 | James | Alexander | @@Alex |
| # | First Name | Last Name | Username |
Button colors
Button text, border and background colorsBasic button
Using .bg-indigo classes
Labeled button
Using .bg-indigo classes
Outline button colors
Using border and text color classes
Card colors
Card, card border and heading colorsIndigo card
.bg-indigo class added to the card header
Indigo bordered card
.bg-indigo and .border-indigo classes
Indigo solid card
.bg-indigo class added to the card container
Notifications & dialogs
Notifications, modals, popovers, tooltipsTooltip color
Change default tooltip color
Popover header
Using .bg-indigo classes
Popover background
Apply custom color to the entire popover
Modal dialog header
Using .bg-indigo classes
Modal background
Using .bg-indigo classes
Modal dialog footer
Using .bg-indigo classes
Noty notification
Using .bg-indigo color classes
jGrowl notification
Using plugin's theme option
PNotify notification
Using plugin's addclass option
Dropdown menu colors
Dropdown and menu elements colorDropdown border color
Using .border-indigo color classes
Dropdown background color
Using .bg-indigo color classes
Adapted menu components
Badges, badge pills, checkboxes, radios