badge.ftd

-- import: fifthtry.github.io/bling/assets
-- import: fifthtry.github.io/package-doc/doc as pd

-- bling.page: `badge` and it's Usage

Badges can be used as part of any component and are available in below formats:

-- pd.package: `badge`
name: fifthtry.github.io/bling

To use these badges on your web package, add below lines into `FASTN.ftd` file:

-- ft.code:
lang: ftd

\-- fastn.dependency: fifthtry.github.io/bling as bling
\-- fastn.auto-import: bling/badge as badge

-- ft.markdown:

Once you add above lines into your web package, add `badge` into your `.ftd`
files:

-- all-badges: All `badge` examples:

-- badge-output: Light Badge:
light: true

-- ft.code: Example code for `badge` `light` is by default true:
lang: ftd

\-- badge.badge: Light

-- badge-output: Dark Badge:
dark: true
light: false

-- ft.code: Example code for dark `badge`:
lang: ftd

\-- badge.badge: Dark
dark: true

-- badge-output: Primary Badge:
primary: true
light: false

-- ft.code: Example code for primary `badge`:
lang: ftd

\-- badge.badge: Primary
primary: true

-- badge-output: Secondary Badge:
secondary: true
light: false

-- ft.code: Example code for secondary `badge`:
lang: ftd

\-- badge.badge: Secondary
secondary: true

-- badge-output: Success Badge:
success: true
light: false

-- ft.code: Example code for success `badge`:
lang: ftd

\-- badge.badge: Success
success: true

-- badge-output: Danger Badge:
danger: true
light: false

-- ft.code: Example code for danger `badge`:
lang: ftd

\-- badge.badge: Danger
danger: true

-- badge-output: Warning Badge:
warning: true
light: false

-- ft.code: Example code for warning `badge`:
lang: ftd

\-- badge.badge: Warning
warning: true

-- badge-output: Info Badge:
info: true
light: false

-- ft.code: Example code for info `badge`:
lang: ftd

\-- badge.badge: Info
info: true

-- end: bling.page










-- component all-badges:
caption title:

-- ftd.column:
width: fill-container
margin-bottom.px: 24

-- ftd.column:
if: { ftd.device == "mobile" }
width: fill-container

-- tf.h3: $all-badges.title

-- ftd.column:
width: fill-container
overflow-x: auto

-- ftd.row:
width: fill-container
margin-left.px: -16

-- badge: Light
light: true

-- badge: Dark
dark: true

-- badge: Primary
primary: true

-- badge: Secondary
secondary: true

-- badge: Info
info: true

-- badge: Warning
warning: true

-- badge: Success
success: true

-- badge: Danger
danger: true

-- end: ftd.row

-- end: ftd.column

-- end: ftd.column

-- ftd.column:
if: { ftd.device != "mobile" }
width: fill-container

-- tf.h3: $all-badges.title

-- ftd.row:
width: fill-container
margin-left.px: -16

-- badge: Light
light: true

-- badge: Dark
dark: true

-- badge: Primary
primary: true

-- badge: Secondary
secondary: true

-- badge: Info
info: true

-- badge: Warning
warning: true

-- badge: Success
success: true

-- badge: Danger
danger: true

-- end: ftd.row

-- end: ftd.column

-- end: ftd.column

-- end: all-badges










-- component badge-output:
caption title:
optional body body:
boolean light: true
boolean dark: false
boolean primary: false
boolean secondary: false
boolean success: false
boolean danger: false
boolean warning: false
boolean info: false

-- ftd.column:
width: fill-container

-- ftd.row:

-- tf.h3: $badge-output.title

-- badge: Light 
if: { $badge-output.light }
light: true

-- badge: Dark 
if: { $badge-output.dark }
dark: true

-- badge: Primary
if: { $badge-output.primary }
primary: true

-- badge: Secondary
if: { $badge-output.secondary }
secondary: true

-- badge: Success
if: { $badge-output.success }
success: true

-- badge: Danger
if: { $badge-output.danger }
danger: true

-- badge: Warning
if: { $badge-output.warning }
warning: true

-- badge: Info
if: { $badge-output.info }
info: true

-- end: ftd.row

-- end: ftd.column

-- end: badge-output










-- component badge:
caption title:
boolean light: false
boolean dark: false
boolean primary: false
boolean secondary: false
boolean success: false
boolean danger: false
boolean warning: false
boolean info: false

-- ftd.text: $badge.title
role: $inherited.types.fine-print
color: $inherited.colors.background.base
color if { $badge.dark }: $inherited.colors.text-strong
color if { $badge.primary }: $inherited.colors.text-strong
color if { $badge.secondary }: $inherited.colors.text-strong
color if { $badge.danger }: $inherited.colors.text-strong
background.solid if { $badge.light }: $inherited.colors.text
background.solid if { $badge.dark }: $inherited.colors.background.step-2
background.solid if { $badge.primary }: $inherited.colors.cta-primary.base
background.solid if { $badge.secondary }: $inherited.colors.cta-secondary.base
background.solid if { $badge.success }: $inherited.colors.success.base
background.solid if { $badge.danger }: $inherited.colors.error.base
background.solid if { $badge.warning }: $inherited.colors.warning.base
background.solid if { $badge.info }: $inherited.colors.info.base
padding-vertical.px: 8
padding-horizontal.px: 12
border-radius.px: 10
white-space: nowrap
align-self: center
margin-left.px: 16

-- end: badge