lib.ftd

-- import: fastnui.trizwit.com/assets
-- import: fastnui.trizwit.com/common
-- import: fastn-community.github.io/opensans-typography
-- import: shaheen-senpai.github.io/fastn-cs-tail
-- import: fastn/processors as pr

-- boolean $color-mode: false

-- boolean $code-open: false

-- component page:
children c:

-- ftd.column:
width: fill-container
colors: $fastn-cs-tail.main
types: $opensans-typography.types


-- ftd.row:
width: fill-container
background.image if { !color-mode }: $assets.files.images.wallpaper-light.jpg
background.image if { color-mode }: $assets.files.images.wallpaper-dark.jpg


-- selector:

-- button: Alerts
url: UI-Components/Alert/alert

-- button: Labels
url: UI-Components/Label/label

-- button: Progress Bar Tiny
url: UI-Components/ProgressBar/progress-bar-tiny

-- button: Progress Bar Small
url: UI-Components/ProgressBar/progress-bar-small

-- button: Progress Bar Medium
url: UI-Components/ProgressBar/progress-bar-medium

-- button: Progress Bar Large
url: UI-Components/ProgressBar/progress-bar-large

-- button: Gallery-1
url: UI-Components/Gallery/gallery-1

-- button: Blog-1
url: UI-Components/Blog/blog-1

-- button: Blog-2
url: UI-Components/Blog/blog-2

-- button: Blog-3
url: UI-Components/Blog/blog-3

-- button: Blog-4
url: UI-Components/Blog/blog-4

-- button: Blog-5
url: UI-Components/Blog/blog-5

-- button: Blog-6
url: UI-Components/Blog/blog-6

-- button: Blog-7
url: UI-Components/Blog/blog-7

-- button: Blog-8
url: UI-Components/Blog/blog-8

-- button: Blog-9
url: UI-Components/Blog/blog-9

-- button: Header-1
url: UI-Components/Header/header-1

-- button: Header-2
url: UI-Components/Header/header-2

-- button: Header-3
url: UI-Components/Header/header-3

-- button: Header-4
url: UI-Components/Header/header-4

-- button: Hero-1
url: UI-Components/Hero/hero-1

-- button: Hero-2
url: UI-Components/Hero/hero-2

-- button: Hero-3
url: UI-Components/Hero/hero-3

-- button: Hero-4
url: UI-Components/Hero/hero-4

-- button: Hero-5
url: UI-Components/Hero/hero-5

-- button: Hero-6
url: UI-Components/Hero/hero-6

-- button: Footer-1
url: UI-Components/Footer/footer-1

-- button: Footer-2
url: UI-Components/Footer/footer-2

-- button: Footer-3
url: UI-Components/Footer/footer-3

-- button: Contact-1
url: UI-Components/Contact/contact-1

-- button: Contact-2
url: UI-Components/Contact/contact-2

-- button: Contact-3
url: UI-Components/Contact/contact-3

-- button: Modal
url: UI-Components/Modal/modal

-- button: Pagination
url: UI-Components/Pagination/pagination

-- button: Login-1
url: UI-Components/Login/login-1

-- end: selector

-- ftd.column:
width: fill-container

-- navbar: Component Library
text-1: <> View Code
text-2: Preview
heading: Components
menu: $assets.files.images.menu.png
toggle: $assets.files.images.dark-mode.png
toggle-2: $assets.files.images.light-mode.png

-- ftd.row:
width: fill-container
children: $page.c

-- end: ftd.row

-- end: ftd.column

-- end: ftd.row

-- ftd.row:
width: fill-container
align-content: right

-- github-button:

-- end: ftd.row

-- ftd.row:
width: fill-container
align-content: center

-- footer: Trizwit
icon: $assets.files.images.love.png
text-1: Made with
text-2: by
text-3: for FASTN Community

-- end: ftd.row

-- end: ftd.column

-- end: page










-- component navbar:
caption title:
string text-1:
string text-2:
string heading:
ftd.image-src menu:
ftd.image-src toggle:
ftd.image-src toggle-2:
boolean $mode: false

-- ftd.row:
width: fill-container
height: hug-content
spacing: space-between
padding.px: 20
background.solid: $inherited.colors.background.base

-- ftd.row:
margin-vertical.px: 3

-- ftd.image:
if: { !$push-left }
src: $assets.files.images.push-left.png
width.fixed.px: 24
height.fixed.px: 24
$on-click$: $ftd.set-bool($a = $push-left, v = true)

-- ftd.image:
if: { $push-left }
src: $assets.files.images.menu.png
width.fixed.px: 24
height.fixed.px: 24
$on-click$: $ftd.set-bool($a = $push-left, v = false)

-- ftd.text: $navbar.heading
if: { !$push-left }
role: $inherited.types.copy-regular
style: bold
color: $inherited.colors.cta-primary.text
margin-left.px: 8
$on-click$: $ftd.set-bool($a = $push-left, v = true)

-- ftd.text: $navbar.heading
if: { $push-left }
role: $inherited.types.copy-regular
style: bold
color: $inherited.colors.cta-primary.text
margin-left.px: 8
$on-click$: $ftd.set-bool($a = $push-left, v = false)

-- end: ftd.row

-- ftd.text: $navbar.title
role: $inherited.types.heading-small
style: bold
color: $inherited.colors.cta-primary.text
link: index.html

-- ftd.row:
align-self: center
align-content: center

-- ftd.text: $navbar.text-1
if: { !code-open }
role: $inherited.types.copy-regular
style: semi-bold
color: $inherited.colors.cta-primary.text
margin-right.px: 15
width.fixed.px: 120
align-self: center
text-align: center
border-width.px: 1
border-radius.px: 35
padding-horizontal.px: 8
padding-vertical.px: 4
$on-click$: $ftd.set-bool($a = $code-open, v = true)

-- ftd.text: $navbar.text-2
if: { code-open }
role: $inherited.types.copy-regular
style: semi-bold
color: $inherited.colors.cta-primary.text
margin-right.px: 15
width.fixed.px: 120
align-self: center
text-align: center
border-width.px: 1
border-radius.px: 35
padding-horizontal.px: 8
padding-vertical.px: 4
$on-click$: $ftd.set-bool($a = $code-open, v = false)

-- ftd.image:
if: { !navbar.mode }
src: $navbar.toggle
height.fixed.px: 32
width.fixed.px: 32
align-self: center
$on-click$: $ftd.set-bool($a = $navbar.mode, v = true)
$on-click$: $ftd.set-bool($a = $color-mode, v = true)
$on-click$: $ftd.enable-dark-mode()

-- ftd.image:
if: { navbar.mode }
src: $navbar.toggle-2
height.fixed.px: 32
width.fixed.px: 32
align-self: center
$on-click$: $ftd.set-bool($a = $navbar.mode, v = false)
$on-click$: $ftd.set-bool($a = $color-mode, v = false)
$on-click$: $ftd.enable-light-mode()

-- end: ftd.row

-- end: ftd.row

-- end: navbar










-- component footer:
ftd.image-src icon:
caption heading:
string text-1:
string text-2:
string text-3:

-- ftd.row:
width: fill-container
height: hug-content
align-content: center
padding.px: 16
background.solid: #EEEEEE

-- ftd.text: $footer.text-1
role: $inherited.types.copy-regular
color: $inherited.colors.cta-tertiary.text
margin-right.px: 5

-- ftd.image:
src: $footer.icon
height.fixed.px: 24
margin-right.px: 5

-- ftd.text: $footer.text-2
role: $inherited.types.copy-regular
color: $inherited.colors.cta-tertiary.text
margin-right.px: 5

-- ftd.text: $footer.heading
role: $inherited.types.copy-regular
color: $inherited.colors.cta-tertiary.text
margin-right.px: 5

-- ftd.text: $footer.text-3
role: $inherited.types.copy-regular
color: $inherited.colors.cta-tertiary.text

-- end: ftd.row

-- end: footer










-- component container-wrapper:
children c:

-- ftd.row:
width: fill-container
margin-vertical.px: 64
margin-horizontal.px: 32
align-self: center
align-content: center
spacing: space-evenly
children: $container-wrapper.c
wrap: true

-- end: ftd.row

-- end: container-wrapper








-- boolean $push-left: false

-- component selector:
children c:

-- ftd.column:
min-width.fixed.percent if { !$push-left }: 20
min-height.fixed.calc: 100vh - 0px
height.fixed.vh: 100
width.fixed.percent if { !$push-left }: 20
width.fixed.percent if { $push-left }: 0
align-content: top-center
background.solid: $inherited.colors.cta-primary.base
padding-top.px: 36
padding-bottom.px: 32
spacing.fixed.px: 10
children: $selector.c
css: [ $assets.files.scroll.css ]
classes: body

-- end: ftd.column

-- end: selector













-- component button:
caption name:
boolean $is-active: false
string url:

-- ftd.text: $button.name
width.fixed.percent: 85
role: $inherited.types.label-large
text-align: center
padding-vertical.px: 12
padding-horizontal.px: 32
border-width.px: 0
border-radius.px: 4
background.solid: $inherited.colors.cta-secondary.base
border-color: $inherited.colors.background.step-1
background.solid if {button.is-active}: $inherited.colors.background.base
border-color if {button.is-active}: $inherited.colors.accent.primary
$on-mouse-enter$: $ftd.set-bool($a = $button.is-active, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-active, v = false)
color: $inherited.colors.text
link: $button.url

-- end: button










-- component github-button:
ftd.image-src icon: $assets.files.images.github.png

-- ftd.row:
anchor: parent
padding-horizontal.px: 4
padding-vertical.px: 6
margin.px: 8
align-self: center
align-content: center
border-width.px: 1
border-radius.px: 20
background.solid: #FFFFFF
z-index: 9999999
link: https://github.com/Trizwit/FastnUI

-- ftd.image:
src: $assets.files.images.github-dark.png
height.fixed.px: 32
margin-right.px: 4

-- ftd.text: Github
role: $inherited.types.label-large

-- end: ftd.row

-- end: github-button










-- ftd.linear-gradient lg:
direction: right
colors: $color-values-2

-- ftd.linear-gradient-color list color-values-2:

-- ftd.linear-gradient-color: #007bff

-- ftd.linear-gradient-color: #9b59b6

-- end: color-values-2










-- component blog-1:
caption title:
string head:
ftd.image-src pic:
string cta-text:
optional string cta-link:
body body:


-- ftd.column:
background.solid: $inherited.colors.cta-secondary.base
max-width.fixed.percent: 25

-- ftd.image:
src: $blog-1.pic
width: fill-container

-- ftd.column:
padding.px: 24

-- ftd.text: $blog-1.head
role: $inherited.types.label-small
color: $inherited.colors.background.base
margin-bottom.px: 4

-- ftd.text: $blog-1.title
role: $inherited.types.copy-regular
color: $inherited.colors.text
margin-bottom.px: 12

-- ftd.text: $blog-1.body
role: $inherited.types.label-large
color: $inherited.colors.text

-- ftd.text: $blog-1.cta-text
role: $inherited.types.copy-regular
color: $inherited.colors.text
link: $blog-1.cta-link

-- end: ftd.column

-- end: ftd.column

-- end: blog-1