Theme Variables
From AgileApps Support Wiki
Accordion
Following variables are available for customization:
Variable Default value Description $ace-lib-accordion-border-on-focus 1px solid #6200ee Sets the border property for accordion in focus mode. $ace-lib-accordion-header-background-color transparent Sets the background color of header of accordion. $ace-lib-accordion-header-background-on-expansion transparent Sets the background color of header of accordionin expanded mode.
Each of the above variable can be assigned with different values as follows:
html $ace-lib-accordion-border-on-focus: 2px dashed red $ace-lib-accordion-header-background-on-expansion: #acacac;
Autocomplete
Following variables are available for customization:
Variable Default value Description $ace-lib-autocomplete-border-color #dee2e6 Sets the border color for autocomplete. $ace-lib-autocomplete-box-shadow 0 0.5rem 1rem rgba($black, 0.15) Sets the box shadow for autocomplete. $ace-lib-autocomplete-background-color #fff Sets the background color for autocomplete. $ace-lib-autocomplete-option-color #6200ee Sets the color of each option in autocomplete. $ace-lib-autocomplete-option-background-color #6200ee Sets the background color of each option in autocomplete. $ace-lib-autocomplete-option-user-image-background #6c757d Sets the user image background of each option for autocomplete. $ace-lib-autocomplete-active-user-image-background transparent Sets the user image background of each option for autocomplete in active mode.
You can assign different values to each of the above variables as follows:
html $ace-lib-autocomplete-background-color : #acacac; $ace-lib-autocomplete-border-color: #fff;
Buttons
It is essential to apply the .ace-btn css class to all buttons that are to be styled using the ace-lib-theme.
Following variables are available for buttons:
Variable Default value Description $ace-lib-btn-padding 0.5rem 0.75rem padding for the button. The value should be valid as per the css standards (`top right bottom left` pattern). $ace-lib-btn-white-space null White space definition for the button. Set to `nowrap` to prevent text wrapping. $ace-lib-btn-line-height 1.5 line-height property value. $ace-lib-btn-border-width 1px Border width property for the button. $ace-lib-btn-disabled-opacity 0.65 Opacity factor applied to the disabled button. $ace-lib-btn-border-radius 0 Allows for customizing the radius of the button independently from global border radius.
Note:
- The button variant classes are available for only those elements which has the `.ace-btn` class attached to it.
- Darker shade of the assigned color variant is used for the hover and focused states.
- The text color is calculated in contrast with the assigned background color.
- If the `$theme-colors` variable contains more number of custom color maps, corresponding utility css classes are generated.
Button variants
Following button variants are available for buttons:
1. Base variants: Creates a simple button.
class Default value Description .ace-primary #6200ee The button base variant with the primary color. .ace-secondary #03dac6 The button base variant with the secondary color. .ace-error #b00020 The button base variant with the error color. .ace-light #f8f9fa The button base variant with the light color.
Note: This variant color is visible only on a dark background..ace-dark #343a40 The button base variant with the dark color.
Note: This variant color is visible only on a light background.
Sample usage
html
<button class="ace-btn ace-primary">click me </button>
<!-- If the '$theme-colors' map contains a color map named, "purple"-->
<button class="ace-btn ace-purple">click me </button>
2. Outline variants: Creates a button with an outline.
class Default value Description .ace-outline-primary #6200ee Outline variant with the primary color. .ace-outline-secondary #03dac6 Outline variant with the secondary color. .ace-outline-error #b00020 Outline variant with the error color. .ace-outline-light #f8f9fa Outline variant with the light color.
Note: This variant color is visible only on a dark background..ace-outline-dark #343a40 Outline variant with the dark color.
Note: This variant color is visible only on a light background.
Sample usage
html
<button class="ace-btn ace-outline-primary">click me </button>
<!-- If the '$theme-colors' map contains a color map named, "purple"-->
<button class="ace-btn ace-outline-purple">click me </button>
Checkbox
Following variables are available for customization:
Variable Default value Description $ace-lib-checkbox-border-width 1px Sets the border thickness for check box. $ace-lib-checkbox-color #03dac6 Sets the color property for the check box. By default the secondary color from the `$theme-colors` variable is used.
You can assign different values to each of the above variables as follows:
html $ace-lib-checkbox-border-width: 2px; $ace-lib-checkbox-color: #fff;
Chip
Following variables are available for customization:
Variable Default value Description $ace-lib-chip-background-color #6200ee Sets the background color of chip. $ace-lib-chip-border-width 0 0 0 0 Sets the border thickness of a chip. $ace-lib-chip-border-color #dee2e6 Sets the border color of a chip. $ace-lib-chip-border-radius 16px Sets the border radius property of a chip. $ace-lib-chip-hover-focus-background-color #6200ee Sets the background color of chip in hover mode. $ace-lib-chip-hover-focus-color #6200ee Sets the color of chip in hover mode.
You can assign different values to each of the above variables as follows:
html $ace-lib-chip-background-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-chip-border-radius: 15%;
Colors
Following color variables are available:
$theme-colors
It is a colormaps. For every color mentioned in this map, corresponding utility css color classes are generated.
The default map contains the following color Map:
html
$theme-colors: (
"primary": #6200ee,
"secondary": #03dac6,
"error": #b00020,
"light": #f8f9fa,
"dark": #343a40
);
The default $theme-colors variable contains only 5 colors, but you can add more number of such colors to this map. See the following example:
html
$theme-colors: (
"primary": #6200ee,
"secondary": #03dac6,
"error": #b00020,
"light": #f8f9fa,
"dark": #343a40,
"blue-gray":#607D8B,
"blue-color":#03A9F4,
"purple":#9C27B0
);
You can access the `$theme-colors` map values as shown here:
html map-get($theme-colors, "purple");
Utility color classes for $theme-colors map
Separate color utility classes are generated for every single color map present in the `$theme-colors` variable.
Following color utility classes are available:
1. Background colors: The background color utility classes are prefixed with ace-bg-. You can use this to style any elements in the page.
Following background utility colors are available by default:
class Default value Description .ace-bg-primary #6200ee Use this to highlight the background of any element with the primary color. .ace-bg-secondary #03dac6 Use this to highlight the background of any element with the secondary color. .ace-bg-error #b00020 Use this to highlight the background of any element with the error color. .ace-bg-light #f8f9fa Use this to highlight the background of any element with the light color. .ace-bg-dark #343a40 Use this to highlight the background of any element with the dark color.
-
Note: Any colors added to the
$theme-colorsvariable have a corresponding background color class.
Sample usage:
html
<div class="ace-bg-primary">.ace-bg-primary</div>
2. Text colors: The text color utility classes are prefixed with ace-text-.
Following text utility colors are available by default:
class Default value Description .ace-text-primary #6200ee Use this to highlight the text content with the primary color. .ace-text-secondary #03dac6 Use this to highlight the text content with the secondary color. .ace-text-error #b00020 Use this to highlight the text content with the error color. .ace-text-light #f8f9fa Use this to highlightthe text content with the light color. .ace-text-dark #343a40 Use this to highlight the text content with the dark color.
-
Note: Any colors you add to the
$theme-colorsvariable will have a corresponding text color class.
Sample usage:
html
<p class="ace-text-primary">.ace-text-primary</p>
Datepicker
Following variables are available for customization:
Variable Default value Description $ace-lib-datepicker-background-color #fff Sets the background color for date-picker. $ace-lib-datepicker-border-width 1px Sets the border thickness for datepicker. $ace-lib-datepicker-border-color #dee2e6 Sets the border color for datepicker. $ace-lib-datepicker-control-btn-background-color #fff Sets the background-color for the datepicker. $ace-lib-datepicker-btn-outline-style 1px auto #6200ee Sets the outline property for the datepicker. $ace-lib-datepicker-control-btn-border-radius 0 Sets the border radius of control button for the datepicker. $ace-lib-datepicker-table-cell-radius 0 Sets the cell radius property for the datepicker. $ace-lib-datepicker-table-header-color #212529 Sets the header color property for the datepicker. $ace-lib-datepicker-table-header-font-weight 400 Sets the font weight property of header for the datepicker. $ace-lib-datepicker-date-focus-background-color #343a40 Sets the focused cell background color for the datepicker. $ace-lib-datepicker-date-selected-background-color #6200ee Sets the selected cell background color for the datepicker.
You can assign different values to each of the above variables as follows:
html $ace-lib-datepicker-date-focus-background-color : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-datepicker-border-width: 2px;
Dialog
Following variables are available for customization:
Variable Default value Description $ace-lib-dialog-title-font-size 1.5rem Sets the font size property for the title in a dialog. $ace-lib-dialog-title-line-height 1.5 Sets the line height for the title in a dialog. $ace-lib-dialog-title-close-button-color #212529 Sets the text color of close button. $ace-lib-dialog-title-close-button-color-focus #6200ee Sets the text color of close button in focus mode. $ace-lib-dialog-actions-border-width 1px Sets the border thickness of dialog action section. $ace-lib-dialog-actions-border-radius 0 Sets the border radius of the dialog action section. $ace-lib-dialog-actions-primary-color #6200ee Sets the primary color property for the action section. $ace-lib-dialog-actions-primary-color-hover #6211ee Sets the primary color property in hover mode for the action section. $ace-lib-dialog-actions-secondary-color #6211ee Sets the secondary color property for the action section. $ace-lib-dialog-actions-cancel-color #343a40 Sets the text color for the cancel button.
You can assign different values to each of the above variables as follows:
html $ace-lib-dialog-title-close-button-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-dialog-actions-border-width: 5px;
Divider
Following variable is available for customization:
Variable Default value Description $ace-lib-divider-color #dee2e6 Sets the color of divider.
You can assign different values to each of the above variables as follows:
html $ace-lib-divider-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map.
Global variables
Following variables are available for customization:
Variable Default value Description $body-bg #fff Sets the background color for the page. $body-color #212529 Sets the text color for the page. $link-color #6200ee Sets the text color for all the links in the page. $link-decoration none Sets the 'text-decorarion' property value for the link. $link-hover-color #6211ee Sets the hover color for all the links in a page. $link-hover-decoration underline Sets the 'text-decoration' value for the links in the hover state.
You can assign different values to each of the above variables as follows:
html $body-bg : #ababab; $body-color: #fff;
Input
Following date picker variables are available for customization:
Variable Default value Description $ace-lib-input-label-font-weight 400 Sets the label font weight for the input field. $ace-lib-input-field-border-width 1px Sets the border thickness for the input field. $ace-lib-input-field-border-color #dee2e6 Sets the border color for the input field. $ace-lib-input-field-background-color #fff Sets the background-color property for the input field. $ace-lib-input-field-text-color #212529 Sets the text-color property for the input field. $ace-lib-input-field-disabled-background-color #f8f9fa Sets the background-color property for the input field in disabled state. $ace-lib-input-field-background-color-focus #f8f9fa Sets the background-color property for the input field in focus state. $ace-lib-input-field-border-color-focus #6200ee Sets the focused border color property for the input field. $ace-lib-input-field-border-radius 0 Sets the border radius property for the input field. $ace-lib-input-field-placeholder-color #212529 Sets the placeholder text color for the input field. $ace-lib-input-field-error-border-color #b00020 Sets the border color for the input field in the error state. $ace-lib-input-field-error-text-color #b00020 Sets the text color for the input field in the error state. $ace-lib-input-field-error-font-size 85% Sets the font size property for the input field in the error state.
You can assign different values to each of the above variables as follows:
html $ace-lib-input-field-border-color : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-input-field-error-font-size: 18px;
Menu
Following variables are available for customization:
Variable Default value Description $ace-lib-menu-border-color #dee2e6 Sets the border color of menu list item. $ace-lib-menu-box-shadow 0 0.5rem 1rem rgba(#000, 0.15) Sets the box shadow property of menu list item. $ace-lib-menu-background-color #fff Sets the background color of menu item. $ace-lib-menu-hover-background-color #6200ee Sets the background color of menu item in the hover mode. $ace-lib-menu-hover-color #6200ee Sets the color of menu item in the hover mode.
You can assign different values to each of the above variables as follows:
html $ace-lib-menu-border-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-menu-hover-color: #00ff00;
Paginator
Following variables are available for customization:
Variable Default value Description $ace-lib-paginator-button-color #6200ee Sets the button color for paginator. $ace-lib-paginator-button-color-hover #6211ee Sets the button color in the hover mode for paginator. $ace-lib-paginator-button-disabled-opacity 0.65 Sets the disabled-opacity property for the paginator.
You can assign different values to each of the above variables as follows:
html $ace-lib-paginator-button-color : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-paginator-button-disabled-opacity: 0.5;
Progressbar
Following variables are available for customization:
Variable Default value Description $ace-lib-progressbar-complete-color #6200ee Sets the color for the completed part of the progressbar. $ace-lib-progressbar-buffer-color #6211ee Sets the color for the buffered part of the progressbar.
You can assign different values to each of the above variables as follows:
html $ace-lib-progressbar-complete-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-progressbar-buffer-color: #00ff00;
Radio Button
Following variables are available for customization:
Variable Default value Description $ace-lib-radio-button-border-width 1px Sets the border thickness for the radio button. $ace-lib-radio-button-color #03dac6 Sets the color property for the radio button.
You can assign different values to each of the above variables as follows:
html $ace-lib-radio-button-border-width : 2px; $ace-lib-radio-button-color: #fff;
Tables
Following variables are available for customization:
Variable Default value Description $ace-lib-table-cell-padding 0.25rem Tabel cell padding. $ace-lib-table-select-cell-width 0 Select column width. This is applicable only for the column with check boxes. $ace-lib-table-color #212529 The text color inside the table. $ace-lib-table-bg null Background color for the table. $ace-lib-table-accent-bg rgba(#000, 0.05) Background color for the stripped rows. Applicable only on `.ace-table-striped` applied table. $ace-lib-table-hover-color #212529 Text color for the hovered row. Applicable only for `.ace-table-hover` applied table. $ace-lib-table-hover-bg rgba(#000, 0.075) Background color for the stripped rows. Applicable only for `.ace-table-hover` applied table. $ace-lib-table-border-width 1px Border width for the table cells. Applicable only for `.ace-table-bordered` applied table. $ace-lib-table-border-color #dee2e6 Border color for the table. Applicable only for `.ace-table-bordered` applied table. $ace-lib-table-head-bg #e9ecef Table header background color. $ace-lib-table-head-color #495057 Table header text color. $ace-lib-table-striped-order odd The row order selector config for `.ace-table-striped` applied table.
You can assign different values to each of the above variables as follows:
html $ace-lib-table-head-bg : map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-table-border-width: 2px;
Table utility classes
Classes Description .ace-table-bordered Adds borders all around the table and between all the columns. .ace-table-borderless Removes borders all around the table and between all the columns. .ace-table-striped Applies Zebra-striping effect. .ace-table-hover Placed here since it has to come after the potential zebra striping.
Tablist
Following variables are available for customization:
Variable Default Value Description $ace-lib-tablist-header-border-width 0 0 1px 0 Defines the border thickness of the tab header. $ace-lib-tablist-header-border-color transparent transparent #dee2e6 transparent Defines the border color tabs header. $ace-lib-tablist-header-tab-foucsed-color #212529 Defines the color of tab header in focused mode. $ace-lib-tablist-header-tab-active-link-bar-color #03dac6 Defines the link bar color of the active tab. $ace-lib-tablist-content-border-width 0 0 0 0 Defines the border thickness of the tab content. $ace-lib-tablist-content-border-color #212529 Defines the border color of the tab content. $ace-lib-tablist-content-padding 0 0 0 0 Defines the padding property of the tab content.
You can assign different values to each of the above variables as follows:
html $ace-lib-tablist-header-border-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-tablist-content-padding: 2px;
Tooltip
Following variables are available for customization:
Variable Default Value Description $ace-lib-tooltip-background-color #343a40 Sets the background color of tooltip. $ace-lib-tooltip-text-color #f8f9fa Sets the text color of tooltip. $ace-lib-tooltip-font-size 80% Sets the font size of tooltip. $ace-lib-tooltip-max-width 100% Sets the max width for tooltip. $ace-lib-tooltip-margin 0 0 0 0 Sets the margin property of tooltip.
You can assign different values to each of the above variables as follows:
html $ace-lib-tooltip-background-color: map-get($theme-colors, "purple"); // This map color must be present in the $theme-colors map. $ace-lib-tooltip-max-width: 5px;
Typography
You can modify the typographic settings using the following variables:
1. $font-family-base Define the base font family for the theme. If you have to import any external web fonts, use the @import statement before this variable. The default base font familiy is "`Arial, Helvetica, sans-serif`"
Following SCSS code imports the "Open Sans" font and specifies the base font as 'Open Sans':
html
//import font
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
// set the base font family
$font-family-base: 'Open Sans';
2. $font-size-base You can assign the base font size to the '$font-size-base' variable as follows. Default value is "1 rem"
html $font-size-base: .62 rem;
3. Heading levels (h1 - h6) The heading levels are configured to be relative to the base font size. See the following table for details. Each of these variables can be overridden:
Levels Default Value $h1-font-size $font-size-base * 2.5 $h2-font-size $font-size-base * 2 $h3-font-size $font-size-base * 1.75 $h4-font-size $font-size-base * 1.5 $h5-font-size $font-size-base * 1.25 $h6-font-size $font-size-base
You can modify cach of these variables as per the requirement:
html $h2-font-size : $font-size-base * 1.8; $h3-font-size : $font-size-base * 1.25;