From e18669958b229235798e31e5ad8608d9fd30c8e8 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 5 Feb 2022 16:52:52 +0100
Subject: Added button
---
tpl/index.pug | 47 ++++++++++++++++++++++++++++++++++++++++-------
tpl/layouts/container.pug | 6 +++---
tpl/objects/button.pug | 16 ++++++++++++++++
3 files changed, 59 insertions(+), 10 deletions(-)
create mode 100644 tpl/objects/button.pug
(limited to 'tpl')
diff --git a/tpl/index.pug b/tpl/index.pug
index c63e9f1..47dbc55 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -2,13 +2,14 @@
let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat'
include layouts/container.pug
+
include objects/heading.pug
include objects/rule.pug
+include objects/button.pug
-mixin box
- .t-raised
- +container(padH=true padV=true inPage=true themed=true)
- block
+mixin box
+ +container(padX=true padY=true inPage=true theme="raised")
+ block
doctype html
@@ -17,11 +18,11 @@ html
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1')
title iro-design
- link(rel="stylesheet", href="style.css")
- script(src="script.js")
+ link(rel="stylesheet" href="style.css")
+ script(src="script.js")
body(class='t-lighter')
- +container(padH=true padV=true narrow=true)
+ +container(padX=true padY=true narrow=true)
+h1-heading(level='xl')= 'Heading'
+rule(level='medium')
@@ -58,3 +59,35 @@ html
+rule(level='strong')= 'Strong'
+rule(level='medium')= 'Medium'
+rule(level='faint')= 'Faint'
+
+ //-----------------------------------------
+
+ +h1-heading(level='xl')= 'Button'
+ +rule(level='medium')
+
+ +box
+ +a-button(variant='accent')= 'Button'
+ = ' '
+ +a-button(variant='accent' disabled=true)= 'Button'
+ = ' '
+ +a-button(variant='accent' outline=true)= 'Button'
+ = ' '
+ +a-button(variant='accent' outline=true disabled=true)= 'Button'
+ br
+ br
+ +a-button(variant='primary')= 'Button'
+ = ' '
+ +a-button(variant='primary' disabled=true)= 'Button'
+ = ' '
+ +a-button(variant='primary' outline=true)= 'Button'
+ = ' '
+ +a-button(variant='primary' outline=true disabled=true)= 'Button'
+ br
+ br
+ +a-button(variant='secondary')= 'Button'
+ = ' '
+ +a-button(variant='secondary' disabled=true)= 'Button'
+ = ' '
+ +a-button(variant='secondary' outline=true)= 'Button'
+ = ' '
+ +a-button(variant='secondary' outline=true disabled=true)= 'Button'
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 9dde2d6..c64de11 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -2,12 +2,12 @@ mixin container
-
let classes = {
'l-container': true,
- 'l-container--pad-h': attributes.padH,
- 'l-container--pad-v': attributes.padV,
+ 'l-container--pad-x': attributes.padX,
+ 'l-container--pad-y': attributes.padY,
'l-container--narrow': attributes.narrow,
'l-container--sm-narrow': attributes.smNarrow,
'l-container--in-page': attributes.inPage,
- 'l-container--themed': attributes.themed
+ 'l-container--themed': !!attributes.theme
}
if (!!attributes.theme) {
classes['t-' + attributes.theme] = true
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
new file mode 100644
index 0000000..243ff58
--- /dev/null
+++ b/tpl/objects/button.pug
@@ -0,0 +1,16 @@
+mixin a-button
+ -
+ let classes = {
+ 'o-button': true,
+ 'o-button--block': attributes.block,
+ 'o-button--outline': attributes.outline,
+ 'is-disabled': attributes.disabled
+ }
+ if (attributes.variant) {
+ classes['o-button--' + attributes.variant] = true
+ }
+
+ let href = attributes.disabled ? null : '#';
+
+ a(class=classes href=href)
+ block
--
cgit v1.2.3-70-g09d2