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%;