WebUI mobile-first CSS

Borders

Border Colors

There are border color classes for most colors in the WebUI color palette. The simplest format used for these is border-[color], which will affect all borders of an element. You can also specify which border to color by using the format border-[side]-[color]. For example: border-top-accent-1.

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="width-md height-md border-md border-info">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-lg border-top-success">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-xl border-top-dark border-left-danger">
    </div>
  </div>
</div>
                                                      
      
HTML

Borders

If the element being styled already has a border with the required width, then there is no need to use a border sizing class.

Border Sizing

The following example demonstrates border sizing.

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="width-md height-md border-xs">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-md">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-xl">
    </div>
  </div>
</div>
                                                      
      
HTML

Border Sizing Classes

Classes available for border sizing.

Class	Width
border-initial	0
border-xs	0.063rem (Framework default)
border-sm	0.125rem
border-md	0.188rem
border-lg	0.25rem
border-xl	0.313rem

Border Color

Using one of the above classes without a border color class will show a border in the default border color defined in the current WebUI theme.

Rounding Example

The following example shows how to use rounding classes.

rounded-sm

rounded-md

rounded-lg

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="container width-md height-md border-md border-accent-1 rounded-sm">
      <span class="place-middle-center">rounded-sm</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md border-md border-accent-1 rounded-md">
      <span class="place-middle-center">rounded-md</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md border-md border-accent-1 rounded-lg">
        <span class="place-middle-center">rounded-lg</span>
    </div>
  </div>
</div>
                                                                          
      
HTML

Rounding Classes

Classes for rounding borders.

Class	Radius
rounded-sm , rounded-top-sm , rounded-left-sm , rounded-bottom-sm , rounded-right-sm	0.188rem
rounded-md , rounded-top-md , rounded-left-md , rounded-bottom-md , rounded-right-md	0.388rem
rounded-lg , rounded-top-lg , rounded-left-lg , rounded-bottom-lg , rounded-right-lg	0.588rem
rounded-pill , rounded-top-pill , rounded-left-pill , rounded-bottom-pill , rounded-right-pill	100vmax
rounded-full , rounded-top-full , rounded-left-full , rounded-bottom-full , rounded-right-full	50%

Behavioural Example

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: border-right-hover-success or border-top-focus-dark.

Hover

Focus

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="container width-md height-md border-md border-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md border-lg border-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md border-xl border-right-focus-info border-left-focus-warning" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>
                                                                
      
HTML

Boundary

Boundary Example

Boundaries are available in only one size and make use of CSS box-shadow to create a boundary inside the element border.

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="width-md height-md border-sm boundary-info">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-sm boundary-top-success">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-sm boundary-top-dark boundary-left-danger">
    </div>
  </div>
</div>
                                                      
      
HTML

Classes

There are boundary classes for most colors in the WebUI color palette. The simplest format used for these is boundary-[color], which will affect all sides of an element. You can also specify which side of the element the boundary will appear using the format boundary-[side]-[color]. For example: boundary-top-accent-1.

Class	Width
boundary-*	0.188rem

Behavioural Example

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: boundary-right-hover-success or boundary-top-focus-dark.

Hover

Focus

    
  

  
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-right-focus-info" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>
                                                                
      
HTML

Boundaries

WebUI only supports hover and focus boundaries on all sides or a single side of an element.

Outline

Outline Example

Outlines are available in only one size and make use of CSS box-shadow to create an outline outside the element border.

    
  

      
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="width-md height-md border-sm outline-info">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-sm outline-top-success">
    </div>
  </div>
  <div class="col">
    <div class="width-md height-md border-sm outline-top-dark outline-left-danger">
    </div>
  </div>
</div>
                                                          
      
HTML

Classes

There are outline classes for most colors in the WebUI color palette. The simplest format used for these is outline-[color], which will affect all sides of an element. You can also specify which side of the element the outline will appear using the format outline-[side]-[color]. For example: outline-top-accent-1.

Class	Width
outline-*	0.188rem

Behavioural Example

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: outline-right-hover-success or outline-top-focus-dark.

Hover

Focus

    
  

  
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="container width-md height-md border-sm outline-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md border-sm outline-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md border-sm outline-right-focus-info" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>
                                                                
      
HTML

Outlines

WebUI only supports hover and focus outlines on all sides or a single side of an element.

Shadow

Shadow Example

This example demonstrates the 3 shadow classes available.

shadow-sm

shadow-md

shadow-lg

    
  

        
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="container width-md height-md info-dark shadow-sm">
      <span class="place-middle-center">shadow-sm</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md info-dark shadow-md">
      <span class="place-middle-center">shadow-md</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-md height-md info-dark shadow-lg">
      <span class="place-middle-center">shadow-lg</span>
    </div>
  </div>
</div>
                                                                                
      
HTML

Shadow Classes

There are 3 shadow classes available in WebUI: shadow-sm, shadow-md and shadow-lg.

Class	Description
shadow-sm	Creates a small raised effect.
shadow-md	Creates a medium raised effect.
shadow-lg	Creates a large raised effect.

User Feedback

Feedback Example

The feedback-* classes generate a short duration shadow effect for 3 event types.

    
  

        
<div class="row text-sm col-padding-md">
  <div class="col">
    <button class="button-lg button-dark feedback-hover">feedback-hover</button>
  </div>
  <div class="col">
    <button class="button-lg button-dark feedback-focus">feedback-focus</button>
  </div>
  <div class="col">
    <button class="button-lg button-dark feedback-active">feedback-active</button>
  </div>
</div>
                                                                                
      
HTML

Feedback Example

Classes for visual feedback effects.

Class	Description
feedback-hover	Creates a short duration shadow effect around an element when the hover event is received.
feedback-focus	Creates a short duration shadow effect around an element when a focus event is received.
feedback-active	Creates a short duration shadow effect around an element when the active event is received.

Transitions

Transitions Example

This example uses some of the transition classes available.

Short border focus transition

Medium boundary focus transition

Long outline focus transition

    
  

        
<div class="row text-sm col-padding-md">
  <div class="col">
    <div class="container width-lg height-lg border-lg border-focus-info border-color-transition-short" tabindex="0">
      <span class="place-middle-center">Short border focus transition</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-lg height-lg border-sm boundary-focus-success boundary-transition-medium" tabindex="0">
      <span class="place-middle-center">Medium boundary focus transition</span>
    </div>
  </div>
  <div class="col">
    <div class="container width-lg height-lg border-sm outline-focus-accent-2 outline-transition-long" tabindex="0">
      <span class="place-middle-center">Long outline focus transition</span>
    </div>
  </div>
</div>
                                                                      
      
HTML

Transitions Classes

Full list of transition classes with description.

Class	Description
transition-short, transition-medium, transition-long	Affects: All properties.
color-transition-short, color-transition-medium, color-transition-long	Affects: color only.
background-color-transition-short, background-color-transition-medium, background-color-transition-long	Affects: background color only.
border-color-transition-short, border-color-transition-medium, border-color-transition-long	Affects: border color only.
boundary-transition-short, boundary-transition-medium, boundary-transition-long	Affects: box-shadow only.
outline-transition-short, outline-transition-medium, outline-transition-long	Affects: box-shadow only.
width-transition-short, width-transition-medium, width-transition-long	Affects: width only.
height-transition-short, height-transition-medium, height-transition-long	Affects: height only.
left-transition-short, left-transition-medium, left-transition-long	Affects: left position only.
top-transition-short, top-transition-medium, top-transition-long	Affects: top position only.

Cursors

Cursors Example

The cursor can be changed for any element and WebUI supports the 6 most commonly used types.

cursor-default

cursor-pointer

cursor-copy

cursor-move

cursor-help

cursor-disabled

    
  

        
<div class="flex-row flex-items-initial gap-sm text-sm text-center">
  <div class="info-dark pad-xs cursor-default">
    cursor-default
  </div>
  <div class="info-dark pad-xs cursor-pointer">
    cursor-pointer
  </div>
  <div class="info-dark pad-xs cursor-copy">
    cursor-copy
  </div>
  <div class="info-dark pad-xs cursor-move">
    cursor-move
  </div>
  <div class="info-dark pad-xs cursor-help">
    cursor-help
  </div>
  <div class="info-dark pad-xs cursor-disabled">
    cursor-disabled
  </div>
</div>
                                                                      
      
HTML

Cursor Classes

Cursor classes available in WebUI.

Class	Description
cursor-default	Sets the cursor property to default.
cursor-pointer	Sets the cursor property to pointer.
cursor-copy	Sets the cursor property to copy.
cursor-move	Sets the cursor property to move.
cursor-help	Sets the cursor property to help.
cursor-disabled	Sets the cursor property to not-allowed.

Visibility

Classes

This is a list of various classes and descriptions related to visibility.

Class	Description
hidden	Sets the display style to none and removes the element from the document layout.
block	Sets the display style to block.
inline-block	Sets the display style to inline-block.
inline	Sets the display style to inline.
invisible	Sets the visibility property to hidden, keeping the element in the document layout.
visible	Sets the visibility property to visible.
screen-reader	Sets the specified element to be accessible to screen readers only.
overflow-hidden	Sets the overflow property to hidden.
overflow-visible	Sets the overflow property to visible.
faded	Sets the opacity property to 0.
opaque	Sets the opacity property to 1.
toggle-parent	Establishes a focus toggle context for a toggle child element.
toggle-parent-hover	Establishes a hover toggle context for a toggle child element.
toggle-child	Defines a child element that will be shown or hidden based on the type of toggle parent.

Media

Classes

This is a list of various classes and descriptions related to media elements.

Class	Description
image	Sets an image element to block level with a maximum width of 100% and auto height.
media-fill	Sets the object-fit property to fill.
media-contain	Sets the object-fit property to contain.
media-cover	Sets the object-fit property to cover.
media-scale-down	Sets the object-fit property to scale-down.
media-none	Sets the object-fit property to none.
media-container-21x9	Defines a container for establishing an aspect ratio of 21x9.
media-container-16x9	Defines a container for establishing an aspect ratio of 16x9.
media-container-4x3	Defines a container for establishing an aspect ratio of 4x3.
.media-container-3x2	Defines a container for establishing an aspect ratio of 3x2.
media-container-1x1	Defines a container for establishing an aspect ratio of 1x1.
media-content	A child element to a media container. (This element contains the actual media).

Miscellaneous

Classes

This is a list of miscellaneous classes including layers and resizing.

Class	Description
layer-initial	Sets the z-index of an element to auto (Default).
layer-top	Sets the z-index of an element to be above all other WebUI component z-index settings.
resize	Allows a resizable control to be resized on the X or Y axis.
resize-x	Allows a resizable control to be resized on the X axis.
resize-y	Allows a resizable control to be resized on the Y axis.