-
.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-label class="oj-focus-highlight">
<!-- Content -->
</oj-label>
-
.oj-label-accesskey
-
Use this in a span around a single text character in the oj-label's text. It styles the character in a way that indicates to the user that this character is the accesskey.
Use this in conjunction with the HTML accesskey attribute on the oj-label element.
Example
<oj-label class="oj-label-accesskey">
<!-- Content -->
</oj-label>
-
.oj-label-inline
-
Place on the oj-label element to inline the label with the sibling DOM element when you don't want to use the responsive design classes (e.g., oj-md-labels-inline).
Example
<oj-label class="oj-label-inline">
<!-- Content -->
</oj-label>
-
.oj-label-inline-top
-
Place on the oj-label element together with oj-label-inline to inline the label with the sibling DOM element and have zero margin-top.
Example
<oj-label class="oj-label-inline-top">
<!-- Content -->
</oj-label>
-
.oj-label-nowrap
-
Place on the oj-label element to have it not wrap when you don't want to use the responsive design classes (e.g., oj-md-labels-nowrap or oj-md-label-nowrap).
Example
<oj-label class="oj-label-nowrap">
<!-- Content -->
</oj-label>
-
CSS Variables
| Name |
Type |
Description |
--oj-label-font-size |
<length>
|
Label font size |
--oj-label-font-weight |
<font_weight>
|
Label font weight |
--oj-label-line-height |
<number>
|
Label line height |
--oj-label-color |
<color>
|
Label font color |
--oj-label-color-disabled |
<color>
|
Disabled label font color |
--oj-label-required-char-font-size |
<length>
|
Label required char font size |
--oj-label-required-icon-color |
<color>
|
Label required icon color |
-
Inside label CSS
| Name |
Type |
Description |
--oj-label-inside-edge-font-size |
<length>
|
Inside label font size |
--oj-label-inside-edge-font-weight |
<font_weight>
|
Inside label font weight |
--oj-label-inside-edge-line-height |
<number>
|
Inside label edge line height |
--oj-label-inside-edge-position-top |
<length>
|
Inside label edge position top |
--oj-label-inside-edge-color |
<color>
|
Inside label edge color |