Colors - Orange Palette

Statistics Invoices Schedule
Orange palette colors Includes 1 main and 5 accent colors
orange-800
Orange 800
#EF6C00
orange-700
Orange 700
#F57C00
orange-600
Orange 600
#FB8C00
orange
Orange 500
#FF9800
orange-400
Orange 400
#FFA726
orange-300
Orange 300
#FFB74D
Palette classes

Orange color palette includes 6 colors: 1 main color without suffix and 5 accent colors with 300, 400, 600, 700 and 800 suffixes. 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.

Please note: default Bootstrap contextual classes - primary, danger, success, warning, info - still available and correspond to main colors, so you can use both .bg-danger and .btn-danger as main colors, but if you want to use accent colors, use only .bg-*-*, BS accent classes have been dropped to avoid unnecessary dublicating.
Class Description
.bg-orange
.bg-orange-*		 Classes for background color. You can choose between 1 orange color using .bg-orange class and 5 accent colors using .bg-orange-* class in 300, 400, 600, 700, 800 range
.border-orange
.border-orange-*		 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, wells, buttons and any other block element
.border-top-orange
.border-top-orange-*		 Classes for top border color. Use this class if you need to highlight top border only
.border-bottom-orange
.border-bottom-orange-*		 Classes for bottom border color. Use this class if you need to highlight bottom border only
.border-left-orange
.border-left-orange-*		 Classes for left border color. Use this class if you need to highlight left border only
.border-right-orange
.border-right-orange-*		 Classes for right border color. Use this class if you need to highlight right border only
.text-orange
.text-orange-*		 Classes for text color. These colors can be used with: text, links, icons, lists etc. Base text color doesn't require suffix
.alpha-orange Classes for light accent color. Mainly used in alerts with darker text color from the same palette. Available only in 1 class
Alert options Bordered, styled, solid in both directions
Here you can see how orange palette can be used with different components. By the way, this alert uses it as well
Morning! We're glad to see you again and wish you a nice day.
Form components Inputs, selects, checkboxes, radios, groups etc.
Input field text

Using .text-orange classes

Input border color

Using .border-orange or classes

Input background color

Using .bg-orange classes

Input with feedback

Using .bg-orange classes

Select background color

Using .bg-orange classes

File input color

Styled file input button color

Input group addon

Using .bg-orange classes

Addon and button

Combine text addon and button

Input group button

Using .bg-orange classes

Checkbox colors

Using border and text color classes

Radio classes

Using border color classes

Switchery colors

Using native plugin options

Select2 selects Single and multiple select colors
Select2 single

Custom single select background

Select multiple

Custom multiple select background

Result and menu colors

Combination of CSS class options

Other selects Multiselect, selectboxit and BS select
Bootstrap multiselect

Using plugin buttonClass option

Select box

Using .bg-orange or classes

Result and menu colors

Using data-style attribute

Tabs component color Solid tabs nav and content color
Tabs navigation color
Add custom background color to the tab navigation with .bg-orange palette classes
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet
Solid color tabs
Add custom background color to the tabs navigation and content with .bg-orange palette classes
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid laeggin
DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever
Aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthet
Text options Text, link, labels, badges, icons
Text and link color

Using .text-orange classes

Orange text and orange link
Label color

Using .bg-orange classes

Orange label
Badge color

Using .bg-orange classes

390
Progress bars All colors, all sizes, all options
Basic bar color

Using .bg-orange classes

55% Complete
Striped bar color

Using .bg-orange classes

65% Complete
Animated bar color

Using .bg-orange classes

75% Complete
Table color options header, footer, rows, columns, cells etc
Header and footer
Easily change background color of table header and table footer by adding color class to the table header or footer row
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
# First Name Last Name Username
Table rows
All table layouts support different row color options - highlight and solid fill
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
# First Name Last Name Username
Table columns
Besides table rows, you can also highlight table columns in the same way as rows
# First Name Last Name Username
1 Eugene Kopyov @Kopyov
2 Victoria Baker @Vicky
3 James Alexander @Alex
# First Name Last Name Username
Solid table
Sometimes it may be very handy to highlight the whole table, you just need to add .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 colors
Basic button

Using .bg-orange classes

Labeled button

Using .bg-orange classes

Flat button colors

Using border and text color classes

Panel colors Panel, panel border and heading colors
Orange panel
Orange panel using .bg-orange class added to the panel heading
Orange bordered panel
Bordered orange panel using .bg-orange and .border-orange classes
Orange solid panel
Solid orange panel using .bg-orange class added to the panel container
Notifications & dialogs Notifications, modals, popovers, tooltips
Tooltip color

Change default tooltip color

Popover heading

Using .bg-orange classes

Popover background

Apply custom color to the whole popover

Modal dialog header

Using .bg-orange classes

jGrowl notification

Using .bg-orange color classes

PNotify notification

Using .bg-orange color classes

Dropdown menu colors Panel, panel border and heading colors
Dropdown border color

Using .border-orange color classes

Dropdown background color

Using .bg-orange color classes

Adapted menu components

Labels, badges, checkboxes, radios

© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com