Styling: AppShellWebPadding

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Description

Application Shell: Web Padding


.oj-web-padding
Place on an element to add web padding to all sides at all display widths.
Example
<div class="oj-web-padding oj-web-applayout-content-nopad">
<div>

Category: AppShell Web Padding by screen size

Place on an element to add responsive padding.

Examples:
  • oj-md-down-web-padding-end: add padding on the end (right side in left to right languages) on screen widths in the small and medium range
  • oj-lg-web-padding-horizontal: add padding on the right and left sides when the screen width is in the large range or wider
  • oj-lg-only-web-padding-horizontal: add padding on the right and left sides when the screen width is in the large range only

Class template:

.oj-[size](-[only|down])-web-padding(-edge)

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [size]

Value (required) Name Description
sm Small Small screen size range
md Medium Medium screen size range
lg Large Large screen size range
xl X-Large Extra large screen size and up

Values for (-[only|down])

Value (optional) Name Description
-only only Applied to only specified screen size.
-down down Applied to all less than specified screen size.

Values for (-edge)

Value (optional) Name Description
-start Start Applies to start edge (left edge in ltr mode, right edge in rtl mode)
-end End Applies to end edge (right edge in ltr mode, left edge in rtl mode)
-top Top Applies to top edge
-bottom Bottom Applies to bottom edge
-horizontal Horizontal Applies to start and end edges
-vertical Vertical Applies to top and and bottom edges

Example
<div class="oj-web-applayout-content-nopad">
   <div class="oj-md-web-padding-start oj-sm-web-padding-vertical" style="border-right: 1px solid gray">
</div>
   <div class="oj-md-web-padding-end oj-sm-web-padding-vertical">
   </div>
</div>