-
.oj-focus-highlight
-
Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.
The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.
The application-level behavior for this component is controlled in the theme by the$focusHighlightPolicy
SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:
nonPointer:
oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all:
oj-focus-highlight is applied regardless of the focus mechanism.
none:
oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.
To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
Example
<oj-slider class="oj-focus-highlight"> <!-- Content --> </oj-slider>
-
.oj-form-control-full-width
-
Changes the max-width to 100% so that form components will occupy all the available horizontal space.
Example
<oj-slider class="oj-form-control-full-width"> </oj-slider>
-
Category: Max Width
-
Note: This category of style classes is not supported in the following themes:
Alta
In the Redwood theme the default max width of a text field is 100%. These max width convenience classes are available to create a medium or small field.
The class is applied to the root element.Classes:
-
.oj-form-control-max-width-sm
-
.oj-form-control-max-width-md
Example
<oj-slider class="oj-form-control-max-width-md"></oj-slider>
-
-
Category: Width
-
Note: This category of style classes is not supported in the following themes:
Alta
In the Redwood theme the default width of a text field is 100%. These width convenience classes are available to create a medium or small field.
The class is applied to the root element.Classes:
-
.oj-form-control-width-sm
-
.oj-form-control-width-md
Example
<oj-slider class="oj-form-control-width-md"></oj-slider>
-
-
CSS Variables
-
Enabled
-
Hovered
-
Active
-
Disabled
See JET CSS Variables for additional details.
Name | Type | Description |
---|---|---|
--oj-slider-thumb-width |
<length> | Slider thumb width |
--oj-slider-thumb-height |
<length> | Slider thumb height |
--oj-slider-thumb-border-radius |
<length> | <percentage> | Slider thumb border radius |
--oj-slider-thumb-border-width |
<length> | Slider thumb border width |
--oj-slider-track-thickness |
<length> | Slider track thickness |
CSS variables used by oj-slider when enabled
Name | Type | Description |
---|---|---|
--oj-slider-thumb-bg-color |
<color> | Slider thumb background color when enabled |
--oj-slider-thumb-border-color |
<color> | Slider thumb border color when enabled |
--oj-slider-thumb-box-shadow |
Slider thumb box shadow when enabled | |
--oj-slider-track-bg-color |
<color> | Slider track background color when enabled |
--oj-slider-value-bg-color |
<color> | Slider value background color when enabled |
CSS variables used by oj-slider when hovered
Name | Type | Description |
---|---|---|
--oj-slider-thumb-bg-color-hover |
<color> | Slider thumb background color when hovered |
--oj-slider-thumb-box-shadow-hover |
Slider thumb box shadow when hovered |
CSS variables used by oj-slider when active
Name | Type | Description |
---|---|---|
--oj-slider-thumb-bg-color-active |
<color> | Slider thumb background color when active |
--oj-slider-thumb-border-color-active |
<color> | Slider thumb border color when active |
--oj-slider-thumb-box-shadow-active |
Slider thumb box shadow when active | |
--oj-slider-thumb-scale-active |
<number> | Slider thumb scale when active |
CSS variables used by oj-slider when disabled
Name | Type | Description |
---|---|---|
--oj-slider-thumb-bg-color-disabled |
<color> | Slider thumb background color when disabled |
--oj-slider-thumb-border-color-disabled |
<color> | Slider thumb border color when disabled |
--oj-slider-track-bg-color-disabled |
<color> | Slider track background color when disabled |
--oj-slider-value-bg-color-disabled |
<color> | Slider value background color when disabled |