AgileApps Support Wiki Pre Release

Theme Variables

From AgileApps Support Wiki
Revision as of 07:08, 19 October 2023 by Wikidevuser (talk | contribs) (Created page with "==Accordion== Following variables are available for customization: :{| border="1" cellpadding="5" cellspacing="1"| |- align="center" ! Variable !! | Default value !! | Descrip...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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>