From e18669958b229235798e31e5ad8608d9fd30c8e8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 16:52:52 +0100 Subject: Added button --- src/index.scss | 3 + src/objects/_button.scss | 173 ++++++++++++++++++++++++++++++++++++++++++++++ tpl/index.pug | 47 +++++++++++-- tpl/layouts/container.pug | 6 +- tpl/objects/button.pug | 16 +++++ 5 files changed, 235 insertions(+), 10 deletions(-) create mode 100644 src/objects/_button.scss create mode 100644 tpl/objects/button.pug diff --git a/src/index.scss b/src/index.scss index 292785d..1d21d45 100644 --- a/src/index.scss +++ b/src/index.scss @@ -8,6 +8,7 @@ @import 'objects/heading'; @import 'objects/rule'; +@import 'objects/button'; :root { @include iro.props-assign; @@ -24,6 +25,7 @@ } @include iro.bem-theme('raised') { + @include iro.props-assign($root: --colors, $prefix: --colors); @include iro.props-assign('light-raised'); @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { @@ -39,6 +41,7 @@ } @include iro.bem-theme('raised') { + @include iro.props-assign('dark', $root: --colors, $prefix: --colors); @include iro.props-assign('dark-raised'); @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { diff --git a/src/objects/_button.scss b/src/objects/_button.scss new file mode 100644 index 0000000..5da1fbd --- /dev/null +++ b/src/objects/_button.scss @@ -0,0 +1,173 @@ +@use 'iro-sass/src/index' as iro; +@use '../vars'; +@use '../mixins/typography'; + +@mixin button-variant($variant) { + border-color: iro.props-get((--colors, --#{$variant}, --bg)); + background-color: iro.props-get((--colors, --#{$variant}, --bg)); + box-shadow: iro.props-get((--colors, --#{$variant}, --shadow)); + color: iro.props-get((--colors, --#{$variant}, --label)); + + @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:hover { + border-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); + background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); + box-shadow: iro.props-get((--colors, --#{$variant}, --hover, --shadow)); + color: iro.props-get((--colors, --#{$variant}, --hover, --label)); + } + + &:active { + border-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); + background-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); + box-shadow: iro.props-get((--colors, --#{$variant}, --active, --shadow)); + color: iro.props-get((--colors, --#{$variant}, --active, --label)); + } + } + + @include iro.bem-modifier('outline') { + background-color: transparent; + box-shadow: none; + color: iro.props-get((--colors, --#{$variant}, --outline-label)); + } +} + +@include iro.props-namespace('button') { + @include iro.props-store(( + --dims: ( + --padding-x: 1.2rem, + --padding-y: .5rem, + --rounding: 10em, + ), + --colors: ( + --any: ( + --disabled: ( + --bg: iro.props-get(--colors --obj-hi, $global: true), + --label: iro.props-get(--colors --fg-hi3, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --key-focus: ( + --bg: transparent, + --label: iro.props-get(--colors --accent --primary-lo2, $global: true), + --border: iro.props-get(--colors --focus --fill, $global: true), + --shadow: iro.props-get(--colors --focus --shadow, $global: true), + ), + ), + --accent: ( + --bg: iro.props-get(--colors --accent --primary, $global: true), + --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: iro.props-get(--colors --accent --primary-lo, $global: true), + --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: iro.props-get(--colors --accent --primary-lo2, $global: true), + --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --shadow: 0 0 0 0 transparent, + ), + ), + --primary: ( + --bg: iro.props-get(--colors --fg, $global: true), + --label: iro.props-get(--colors --bg-hi2, $global: true), + --outline-label: iro.props-get(--colors --fg, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: iro.props-get(--colors --fg-lo, $global: true), + --label: iro.props-get(--colors --bg-hi2, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: iro.props-get(--colors --fg-lo, $global: true), + --label: iro.props-get(--colors --bg-hi2, $global: true), + --shadow: 0 0 0 0 transparent, + ), + ), + --secondary: ( + --bg: iro.props-get(--colors --obj-hi, $global: true), + --label: iro.props-get(--colors --fg, $global: true), + --outline-label: iro.props-get(--colors --fg, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --bg: iro.props-get(--colors --obj, $global: true), + --label: iro.props-get(--colors --fg-lo, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --active: ( + --bg: iro.props-get(--colors --obj-lo, $global: true), + --label: iro.props-get(--colors --fg-lo, $global: true), + --shadow: 0 0 0 0 transparent, + ), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + @include typography.set-font(vars.$font--main, (weight: 500)); + + display: inline-block; + padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + border: 2px solid transparent; + border-radius: iro.props-get(--dims --rounding); + line-height: 1; + text-align: center; + text-decoration: none; + + @include iro.bem-modifier('block') { + display: block; + } + + @include iro.bem-modifier('native') { + @include iro.bem-modifier('block') { + box-sizing: border-box; + width: 100%; + } + } + + @include button-variant('secondary'); + + @each $mod in ('accent' 'primary' 'secondary') { + @if $mod != 'secondary' { + @include iro.bem-modifier($mod) { + // sass-lint:disable-block function-name-format + @include button-variant($mod); + } + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + border-color: iro.props-get(--colors --any --key-focus --border); + background-color: iro.props-get(--colors --any --key-focus --bg); + box-shadow: iro.props-get(--colors --any --key-focus --shadow); + color: iro.props-get(--colors --any --key-focus --label); + } + } + + @include iro.bem-is('disabled') { + border-color: iro.props-get(--colors --any --disabled --bg); + background-color: iro.props-get(--colors --any --disabled --bg); + box-shadow: iro.props-get(--colors --any --disabled --shadow); + color: iro.props-get(--colors --any --disabled --label); + + @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:hover, + &:active { + border-color: iro.props-get(--colors --any --disabled --bg); + background-color: iro.props-get(--colors --any --disabled --bg); + box-shadow: iro.props-get(--colors --any --disabled --shadow); + color: iro.props-get(--colors --any --disabled --label); + } + } + + @include iro.bem-modifier('outline') { + background-color: transparent; + box-shadow: none; + } + } + } +} 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