AgileApps Support Wiki Pre Release

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.

Notepad.png

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.

Notepad.png

Note: Any colors added to the $theme-colors variable 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.

Notepad.png

Note: Any colors you add to the $theme-colors variable 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;