Media WebUI

Input Classes

Sizes

Classes
Height
input-xs
1.5rem
input-sm
1.75rem
input-md
2.125rem
input-lg
2.375rem
input-xl
2.75rem
input
Un-sized - height expands with content

All input classes can be used without adding the suffix -xs, -sm, -md, -lg, -xl, etc., which means the height of the element will only expand to accomodate its content with a small amount of padding by default.

Textbox sizing

It is recommended that the height of textboxes and dropdowns is not customised, since the height is preset to match other form controls such as buttons and labels.

Styling

The simplest way to style form controls is to use a single class to set the form control type and size. The syntax is [control type]-[control size].

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <input type="text" placeholder="Textbox 1" class="input-sm">
  </div>
  <div class="table-col">
    <input type="text" placeholder="Textbox 2" class="input-md">
  </div>
  <div class="table-col">
    <input type="text" placeholder="Textbox 3" class="input-xl">
  </div>		
</div>
Input Widths

You can change the width of input controls by using any of the utility classes, such as width-full to make the control expand to the width of its container element or width-xl to set a fixed width of extra large for example.

Control Classes

Classes
Description
control
Styles an element to the default form control color and padding style, but does not set any dimensions.
control-success
Styles an element to the theme success style, but does not set any dimensions.
control-info
Styles an element to the theme info style, but does not set any dimensions.
control-warning
Styles an element to the theme warning style, but does not set any dimensions.
control-danger
Styles an element to the theme danger style, but does not set any dimensions.
control-highlight
Styles an element to the theme highlight style, but does not set any dimensions.
control-disabled
Styles an element to the theme disabled style, but does not set any dimensions.

The control classes are useful when form controls such as textareas need to match the appearance of other controls. These classes can also be used to style almost any element.

Example
Markup
<div class="table-row col-padding-lg">
  <div class="table-col">
    <textarea class="control width-lg height-md-lg"></textarea>
  </div>
  <div class="table-col">
    <div class="control width-lg height-md-lg"></div>
  </div>
</div>

Labels

Classes
Line height
control-label
1rem
control-label-xxs
1.25rem
control-label-xs
1.5rem
control-label-sm
1.75rem
control-label-md
2.125rem
control-label-lg
2.375rem
control-label-xl
2.75rem
control-label-xxl
3.125rem

The control label classes are sized to match the standard form control heights.

Example
First name
Markup
<div class="table-row col-padding-sm control-group">
  <div class="table-col control-label-sm">
      First name
  </div>
  <div class="table-col">
    <input id="FirstName" type="text" class="input-sm width-full rounded-sm" />
  </div>
</div>

Control Grouping

Classes
Description
control-block
Groups elements by setting the display property of the immediate child elements to block.
control-group
Groups elements by setting the display property to table, and the immediate child elements to table-cell.
control-group-append
Groups elements by adjusting the word spacing property.
Control Grouping

Controls grouping classes are provided for backwards compatibity. However, it is recommended that flexbox is used in preference going forward.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="control-group">
        <button class="button-sm menu-button-info background-focus-info-dark rounded-left-sm transition-long"><i class="fa fa-angle-double-left"></i></button>
        <button class="button-sm menu-button-info background-focus-info-dark transition-long">1</button>
        <button class="button-sm menu-button-info background-focus-info-dark transition-long">2</button>
        <button class="button-sm menu-button-info background-focus-info-dark transition-long">3</button>
        <button class="button-sm menu-button-info background-focus-info-dark rounded-right-sm transition-long"><i class="fa fa-angle-double-right"></i></button>
      </div>
  </div>
</div>

Group Validation Styling

Styles can be applied to a group of form controls by using one of the following classes. The control-group-* classes must be added to the parent element of the controls that require styling.

Class
Description
control-group-success
Applies success styling to a group of form controls.
control-group-info
Applies info styling to a group of form controls.
control-group-warning
Applies warning styling to a group of form controls.
control-group-danger
Applies danger styling to a group of form controls.
control-group-disabled
Applies disabled styling to a group of form controls.

In addition to changing the colour of the controls, a validation icon will be added inside the control on the right if it is an HTML input or button. You can also force any individual HTML element to have a validation icon by adding the class instrumentation to it, where the element type would not normally be given one, such as a textarea or div.

Example
First name
Markup
<div class="table-row col-padding-sm control-group control-group-success">
  <div class="table-col control-label-sm">
      First name
  </div>
  <div class="table-col">
    <input id="FirstName" type="text" class="input-sm width-full rounded-sm" />
  </div>
</div>

<div class="table-row col-padding-sm">
  <div class="table-col flex-auto">
    <textarea class="control control-warning height-md instrumentation"></textarea>
  </div>
</div>

Textboxes

As shown in the table above, textboxes can be set to one of the sizes provided or be set to un-sized. When un-sized, the height of the control will depend on the font size. In the example below, the first textbox inherits an extra small font-size from the row which has the class text-xs applied.

Example
Markup
<div class="form-row text-xs">
  <div class="form-col-20">
    <input type="text" class="input width-sm">
  </div>
</div>
<div class="form-row">
  <div class="form-col-20">
    <input type="text" class="input-sm width-lg">
  </div>
</div>
<div class="form-row">
  <div class="form-col-20">
    <input type="text" class="input-lg width-full">
  </div>		
</div>

Textareas

Textareas can be styled using the control class. Then any of the width-* and height-* classes can be added to set the size of the control. Most browsers support a resize handle for textareas, but resizing the width is prevented in WebUI to avoid potential form layout distortions.

Example
Markup
<div class="table-row">
  <div class="table-col flex-auto">
    <textarea class="control height-lg">
  </div>
</div>

Checkboxes and Radio Buttons

Checkboxes

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="checkbox border-accent-4">
      <input type="checkbox" value="" id="checkbox3" />
      <label for="checkbox3"></label>
    </div>    
  </div>
  <div class="table-col">
    <div class="checkbox border-info">
      <input type="checkbox" value="" id="checkbox2" />
      <label for="checkbox2"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="checkbox border-accent-3 control-disabled">
      <input type="checkbox" value="" id="checkbox1" disabled />
      <label for="checkbox1"></label>
    </div>   
  </div>
</div>

Checkbox Toggle Switches

Example
Markup
<div class="table-row col-padding-md">
  <div class="table-col">
    <div class="toggle-switch-xs accent-1-light rounded-sm">	
      <input type="checkbox" value="1" id="check-switch-1" />
      <label for="check-switch-1" class="background-accent-1 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-sm onoff accent-2-light rounded-sm">	
      <input type="checkbox" value="2" id="check-switch-2" />
      <label for="check-switch-2" class="background-accent-2 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-md yesno accent-3-light rounded-sm control-disabled">	
      <input type="checkbox" value="3" id="check-switch-3" disabled />
      <label for="check-switch-3" class="background-default left-transition-medium"></label>
    </div>
  </div>
</div>

Checkbox Toggle Buttons

Example
Markup
<div class="content-row">
  <div class="control-group">
    <div class="toggle-button-sm toggle-button-accent-1">			
      <input type="checkbox" id="checkButton1" checked>
      <label for="checkButton1" class="transition-medium">Check 1 (preselected)</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="checkbox" id="checkButton2"> 
      <label for="checkButton2" class="transition-medium">Check 2</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="checkbox" id="checkButton3"> 
      <label for="checkButton3" class="transition-medium">Check 3</label>
    </div>
  </div>				
</div>

Radio Buttons

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="radio border-success">
      <input type="radio" value="" name="radiogroup1" id="radio1" />
      <label for="radio1"></label>
    </div>    
  </div>
  <div class="table-col">
    <div class="radio border-accent-1">
      <input type="radio" value="" name="radiogroup1" id="radio2" />
      <label for="radio2"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="radio border-accent-2 control-disabled">
      <input type="radio" value="" name="radiogroup1" id="radio3" disabled />
      <label for="radio3"></label>
    </div>
  </div>
</div>

Radio Button Toggle Switches

Example
Markup
<div class="table-row col-padding-md">
  <div class="table-col">
    <div class="toggle-switch-xs accent-1-light rounded-sm">	
      <input type="radio" value="1" id="radio-switch-1" name="radio-switch-1" />
      <label for="radio-switch-1" class="background-accent-1 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-sm onoff accent-2-light rounded-sm">	
      <input type="radio" value="2" id="radio-switch-2" name="radio-switch-1" />
      <label for="radio-switch-2" class="background-accent-2 left-transition-medium"></label>
    </div>
  </div>
  <div class="table-col">
    <div class="toggle-switch-md yesyno accent-3-light rounded-sm control-disabled">	
      <input type="radio" value="3" id="radio-switch-3" name="radio-switch-1" disabled />
      <label for="radio-switch-3" class="background-default left-transition-medium"></label>
    </div>
  </div>
</div>

Radio Toggle Buttons

Example
Markup
<div class="content-row">
  <div class="control-group">
    <div class="toggle-button-sm toggle-button-accent-1">			
      <input type="radio" name="radioButton" id="radioButton1" checked>
      <label for="radioButton1" class="transition-medium">Radio 1 (preselected)</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="radio" name="radioButton" id="radioButton2"> 
      <label for="radioButton2" class="transition-medium">Radio 2</label>
    </div>
    <div class="toggle-button-sm toggle-button-accent-1">
      <input type="radio" name="radioButton" id="radioButton3"> 
      <label for="radioButton3" class="transition-medium">Radio 3</label>
    </div>
  </div>				
</div>

Lists

Styling Classes

Class
Description
list
Formats ordered and unordered lists without a list style or padding, and with a small left margin.
list-inline
Formats ordered and unordered lists inline without a list style or padding, and with a small left margin.
list-bullet
Sets the list style type to disc.
list-bullet-square
Sets the list style type to square.
list-alpha
Sets the list style type to lower-alpha.
list-alpha-upper
Sets the list style type to upper-alpha.
list-number
Sets the list style type to decimal.

Spacing Classes

Classes
Spacing
Spacing (inline)
list-spacing-sm
0.313rem
2.313rem
list-spacing-md
0.938rem
2.938rem
list-spacing-lg
1.563rem
3.563rem
Example
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
Markup
<div class="table-row text-sm text-nowrap col-padding-lg">
  <div class="table-col">
    <ul class="list list-spacing-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="table-col">
    <ul class="list list-spacing-md list-number">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="table-col">
    <ul class="list list-spacing-md list-alpha-upper">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="table-col">
    <ul class="list-inline list-spacing-md">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

Range Controls

Range Classes

Class
Description
range
The mandatory class for range control styling.
range-xs, range-sm, range-md, range-lg, range-xl
Specifies the overall height of the range control.
range-[WebUI color suffix]
Specifies the range control color. The color suffix can be one of the standard WebUI colors.
range-disabled
Specifies that the range control should be styled as disabled.
range-rounded
Specifies that the range control thumb should be round instead of a rectangle.
range-series
Used to style a range control series.
Example
0 25 50 75 100
  • 0
  • 25
  • 50
  • 75
  • 100
  • 0
  • 25
  • 50
  • 75
  • 100
Markup
<div class="range-series width-full color-dark">
  <span>0</span>
  <span>25</span>
  <span>50</span>
  <span>75</span>
  <span>100</span>
</div>
<input type="range" value="25" min="0" max="100" class="range width-full" />

<div class="row-spacing-xl"></div>

<div class="content-row">
  <div class="content-col-20">
    <input type="range" value="25" min="0" max="100" class="range range-lg range-success width-full" />
  </div>
</div>
<div class="content-row">
  <div class="content-col-20">
    <ul class="range-series list-inline margin-initial width-full color-success">
      <li>0</li>
      <li>25</li>
      <li>50</li>
      <li>75</li>
      <li>100</li>
    </ul>
  </div>	
</div>
        
<div class="row-spacing-xl"></div>

<div class="content-row">
  <div class="content-col-20">
    <input type="range" value="25" min="0" max="100" class="range range-xs range-info width-full" />
  </div>
</div>
<div class="content-row">
  <div class="content-col-20">
    <ul class="range-series list-inline margin-initial width-full color-accent-5">
      <li>0</li>
      <li>25</li>
      <li>50</li>
      <li>75</li>
      <li>100</li>
    </ul>
  </div>	
</div>

Progress Controls

Progress Classes

Class
Description
progress
The mandatory class for progress control wrapper element.
progress-[WebUI color suffix]
Specifies the progress control color. The color suffix can be one of the standard WebUI colors.
progress-labal
Class for a supplimentary overlay text.
Example
25%
Markup
<div class="progress progress-accent-2 width-full rounded-sm">			
  <progress value="25" max="100" id="progressbar"></progress>
  <div class="progress-label color-dark">25%</div>  
</div>

Badges

Classes

Class
Description
badge-square-xs
Defines an extra small badge with no rounding.
badge-square-sm
Defines a small badge with no rounding.
badge-square-md
Defines a medium size badge with no rounding.
badge-square-lg
Defines a large badge with no rounding.
badge-square-xl
Defines an extra large badge with no rounding.
badge-round-xs
Defines an extra small badge with rounding.
badge-round-sm
Defines a small badge with rounding.
badge-round-md
Defines a medium size badge with rounding.
badge-round-lg
Defines a large badge with rounding.
badge-round-xl
Defines an extra large badge with rounding.
Example
This is a warning
55
A dark badge
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="badge-square-xs warning">
      This is a warning.
    </div>
  </div>
  <div class="table-col">
    <div class="badge-round-sm info">
      55
    </div>
  </div>
  <div class="table-col">
    <div class="badge-round-sm dark">
      A dark badge.
    </div>
  </div>
</div>