Product Selector

Fusion 5.9
    Fusion 5.9

    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

      See the grid and panel examples in the gallery.

    • stretch-row: Same as stretch-content but with auto height for use with rows

    • center-content: Center child content vertically and horizontally

      See the grid and panel examples in the gallery.

    • 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 left

      See the button example in the gallery.

    • pull-right: float right

      See 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 inside centercontent

    • 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 switch

      Add 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

    Hero banner

    This style is useful for landing pages.

    • hero-banner

    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

    Lists

    These styles can be applied to ordered (ol) or unordered (ul) HTML elements.

    • striped

    • lined

    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

    Image

    Styles for the media:image tag:

    • square-crop

    • circle-crop

    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

    Comment list

    Styles for the collaborate:comment-list tag:

    • hide-avatars: Hides the comment avatars

    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 grabber

      See 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.

    Card styles

    Styles for the search:result tag:

    • card-emphasis

    • card-shadow

    • card-step

    Popover

    Styles for widget:popover tag:

    • popover-wrapper: Popover style

    • popover-large: Large popover

    • popover-medium

    • popover-small