Styles
This article lists the valid values for the styling
attribute supported by many App Studio markup tags.
Global styles
These styles can be applied to any element.
Flex utilities
-
stretch-content
: Uses flex box to stretch the child content -
stretch-row
: Same as stretch-content but with auto height for use with rows -
center-content
: Center child content vertically and horizontally -
flex-nowrap
: Prevent flex wrapping -
flex-grow
: Flex grow an element
Width utilities
-
width-1
: 100% -
width-2-3
: 66% -
width-1-2
: 50% -
width-1-3
: 33% -
width-1-4
: 25%
Display utilities
-
inline-center
-
block
-
inline
-
inline-block
-
pull-left
: float leftSee the
button
example in the gallery. -
pull-right
: float rightSee the
button
example in the gallery. -
floated left
: float element left -
floated right
: float element right -
border
: Add 1px border to element -
border right
: Add 1px right border to element -
border left
: Add 1px left border to element -
border bottom
: Add 1px bottom border to element -
border top
: Add 1px top border to element -
centercontent
: adds padding that pushes in from page edges. -
centercontent-inner
: adds borders and box-shadows etc. - should be used insidecentercontent
-
centercontent-inner-shadow
: Same as centercontent but with a drop shadow -
fade
: Fades out an element, add the class in to fade back in -
bg-stretch
: Stretch a background image to the full element height and width
Headers
-
header header-fixed
: position fixed header -
header header-shadow
: header with drop shadow -
header header-gradient
: header with gradient -
header header-border
Sizes
-
xs
: Make the font-size the smallest - also works for making most elements smaller -
sm
-
md
-
lg
-
xl
-
break-text-all
: Make text wrap mid word -
break-text-normal
: Text wraps at best fit
Border radius
-
border-radius
: Adds rounded corners -
border-radius-top-left
: Adds rounder corner to top left -
border-radius-top-right
-
border-radius-bottom-left
-
border-radius-bottom-right
Typography
-
text-center
-
text-right
-
text-left
-
capitalize
-
uppercase
-
lowercase
Colors
See these colors in the gallery.
-
bg-lgrey
: Light grey background -
bg-mgrey
-
bg-dgrey
-
bg-charcoal
-
bg-black
-
bg-white
-
text-white
: White text -
bg-lbgrey
-
bg-mbgrey
-
bg-dbgrey
-
bg-blue
-
bg-sblue
-
bg-yellow
-
bg-orange
-
bg-red
-
bg-pink
-
bg-purple
-
bg-green
-
bg-primary
-
bg-primary-light
-
bg-primary-dark
-
bg-primary-contrast
-
text-primary
-
text-primary-contrast
-
bg-secondary
-
bg-secondary-light
-
bg-secondary-dark
-
bg-secondary-contrast
-
text-secondary
-
text-secondary-light
-
text-secondary-dark
-
text-secondary-contrast
-
bg-tertiary
-
bg-tertiary-light
-
bg-tertiary-dark
-
bg-tertiary-contrast
-
text-tertiary
-
text-tertiary-light
-
text-tertiary-dark
-
text-tertiary-contrast
-
bg-raspberry
-
bg-raspberry-light
-
bg-raspberry-dark
-
text-raspberry
-
text-raspberry-light
-
text-raspberry-dark
-
bg-strawberry
-
bg-strawberry-light
-
bg-strawberry-dark
-
text-strawberry
-
text-strawberry-light
-
text-strawberry-dark
-
bg-carrot
-
bg-carrot-light
-
bg-carrot-dark
-
text-carrot
-
text-carrot-light
-
text-carrot-dark
-
bg-pumpkin
-
bg-pumpkin-light
-
bg-pumpkin-dark
-
text-pumpkin
-
text-pumpkin-light
-
text-pumpkin-dark
-
bg-sunflower-light
-
bg-sunflower
-
bg-sunflower-dark
-
text-sunflower
-
text-sunflower-light
-
text-sunflower-dark
-
bg-leaf
-
bg-leaf-light
-
bg-leaf-dark
-
text-leaf
-
text-leaf-light
-
text-leaf-dark
-
bg-grass
-
bg-grass-light
-
bg-grass-dark
-
text-grass
-
text-grass-light
-
text-grass-dark
-
bg-emerald
-
bg-emerald-light
-
bg-emerald-dark
-
text-emerald
-
text-emerald-light
-
text-emerald-dark
-
bg-mint
-
bg-mint-light
-
bg-mint-dark
-
text-mint
-
text-mint-light
-
text-mint-dark
-
bg-aqua
-
bg-aqua-light
-
bg-aqua-dark
-
text-aqua
-
text-aqua-light
-
text-aqua-dark
-
bg-sky
-
bg-sky-light
-
bg-sky-dark
-
text-sky
-
text-sky-light
-
text-sky-dark
-
bg-royal
-
bg-royal-light
-
bg-royal-dark
-
text-royal
-
text-royal-light
-
text-royal-dark
-
bg-lavender
-
bg-lavender-light
-
bg-lavender-dark
-
text-lavender
-
text-lavender-light
-
text-lavender-dark
-
bg-pink
-
bg-pink-light
-
bg-pink-dark
-
text-pink
-
text-pink-light
-
text-pink-dark
-
bg-paper
-
bg-paper-light
-
bg-paper-dark
-
text-paper
-
text-paper-light
-
text-paper-dark
-
bg-concrete
-
bg-concrete-light
-
bg-concrete-dark
-
text-concrete
-
text-concrete-light
-
text-concrete-dark
-
bg-asphalt
-
bg-asphalt-light
-
bg-asphalt-dark
-
text-asphalt
-
text-asphalt-light
-
text-asphalt-dark
-
bg-duckegg
-
bg-duckegg-light
-
bg-duckegg-dark
-
text-duckegg
-
text-duckegg-light
-
text-duckegg-dark
-
bg-depth-dblue
-
text-depth-dblue
-
bg-depth-lblue
-
text-depth-lblue
Switches
Usage:
<input type="checkbox" styling="checkbox-switch">
<label>Switch Label</label>
-
checkbox-switch
: Default switchAdd styles to label:
<input type="checkbox" styling="checkbox-switch"> <label styling="square">Switch Label</label>
-
square
-
flat
Switch colors
Also added to the label
* positive
* negative
* warning
* info
* secondary
* tertiary
Right-hand-side panel
Adds a wikipedia-esque smart panel
* rhspanel
* rhspanel-shadow
Tooltips
-
tooltip
: Adds a tooltip using the aria-label attribute for the tooltip content -
tooltip-top-left
: Position tooltip -
tooltip-top-right
-
tooltip-top
-
tooltip-bottom-left
-
tooltip-bottom-right
-
tooltip-bottom
-
tooltip-left
-
tooltip-right
-
tooltip-top
-
tooltip-small
-
tooltip-medium
-
tooltip-large
-
tooltip-error
-
tooltip-warning
-
tooltip-info
-
tooltip-success
-
tooltip-always
: The tooltip is always shown -
tooltip-rounded
: Rounded corners -
tooltip-no-animate
-
tooltip-bounce
Label
-
label
Buttons
-
button
: Default button -
button-hover
: Hover state always active -
button-secondary
: Secondary color -
button-green
-
button-blue
-
button-white
-
button-disabled
-
button-hidden
-
block
: Full width
Forms
-
checkbox
-
radio
-
input-rounded
: Applies only to inputs -
group
: Form input group -
form-stacked
: Stacked form - should be applied to the form -
form-aligned
-
labelled-input
: Labelled input e.g. an input with a dollar sign attached as a prefix -
labelled-input label-right
: Labelled input e.g. an input with a percentage sign attached as a suffix -
styled-checkbox
: CSS checkbox - should be applied to a checkbox input with a label as the next sibling
Grid utilities
-
hide-xs
: Hide on XS size screens -
show-xs
: Show on XS size screens -
show-sm
-
show-md
-
show-lg
-
show-xl
-
show-xs
-
hide-xs
-
hide-sm
-
show-sm
-
hide-md
-
show-md
-
hide-lg
-
show-lg
-
hide-xl
-
show-xl
Component styles
These styles can be applied to specific tags.
Field styles
Styles for the search:field
tag:
-
title
-
url
-
label-left
-
label-left-always
-
label-inline
-
label-above
-
description
-
image-top
Facet
This style can be applied to the search:facet
tag:
-
switches
: Render switches instead of checkboxes.Unlike the default checkboxes, only one switch can be selected at a time.
Facet list
Styles for search:facet-list
tag:
-
shadow
-
shadow-far
-
recessed
-
step
-
simple
-
wrappedheader
-
hidemetadata
-
indented
Search tabs and nav bars
These styles are for the search:tabs
tag.
-
navbar
: Navbar style -
navbar navbar-shadow
-
navbar navbar-centered
-
navbar navbar-tabs
: Tab style of navbar -
navbar navbar-light
: Light version -
tabs
: Tabs style
Pagination
Styles for search:pagination
tag.
-
pagination-wrapper-left
: Align left -
pagination-wrapper-center
-
pagination-wrapper-right
Alert box
Styles for search:alert
tag.
-
alertbox
: Style element as an alert box -
alertbox-secondary
: Secondary color -
alertbox-positive
-
alertbox-negative
-
alertbox-warning
-
alertbox-info
Interruptors
Apply to any element or use the block:interruptor
tag.
-
interruptor
: Style element as an attention grabberSee the
message
example in the gallery.
Scroll to
Styles for the widget:scroll-to
tag:
-
bottom-left
: Position bottom left of the page -
bottom-right
-
bottom-center
Toggle panes
Styles to be used like:
<toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="pills" styling="pill"></toggle:controls>
<toggle:panes id="pills">
<toggle:pane>
...
See toggle:controls
.
-
tabs-shadow
: Adds shadow to tabs -
collapsible
: Allows tabs to be collapsed by clicking the active tab -
pill
: Pill style -
line
-
simple
-
bordered
Cards
-
basic-card
: Basic card style -
card
: Default card style
Card results
The card widths are auto-generated. By default a maximum of 6 result cards can be shown on one row. By setting @maxCardsPerRow
this can be increased or decreased.
On a search:result-list
add the card styling in the following format:
cards-{size}-{numberPerRow}
For example:
<search:result-list styling="cards-sm-2 cards-lg-4">
This will show 2 cards per row on small screens, 4 on large screens.
Popover
Styles for widget:popover
tag:
-
popover-wrapper
: Popover style -
popover-large
: Large popover -
popover-medium
-
popover-small