From f98a5c58c830a283d07d8efad4502281a5e0369e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 28 Jun 2024 14:22:27 +0200 Subject: Update --- package.json | 2 +- src/_base.scss | 2 -- src/_config.scss | 8 +++++ src/_declare-vars.scss | 18 ++++++++-- src/_layouts.scss | 1 + src/_mixins.scss | 3 +- src/_utils.scss | 4 +++ src/layouts/_card-list.scss | 78 ++++++++++++++++++++++++++++++++++++++++ src/objects/_action-button.scss | 4 +-- src/objects/_avatar.scss | 33 ++++++++++++----- src/objects/_badge.scss | 36 ++++++++++++------- src/objects/_card.scss | 72 ++++++++++++++++++++++++++++++++++--- src/objects/_divider.scss | 1 + src/objects/_popover.scss | 9 +++-- static/0000 Cover@0.5x.webp | Bin 0 -> 497976 bytes static/01 Design Cody.png | Bin 0 -> 194313 bytes tpl/objects/button.pug | 2 +- tpl/objects/card.pug | 11 ++++-- tpl/views/card.pug | 45 +++++++++++++++++++---- tpl/views/icon-nav.pug | 2 +- tpl/views/message-group.pug | 4 +-- tpl/views/message.pug | 6 ++-- tpl/views/text-field.pug | 2 +- 23 files changed, 289 insertions(+), 54 deletions(-) create mode 100644 src/layouts/_card-list.scss create mode 100755 static/0000 Cover@0.5x.webp create mode 100755 static/01 Design Cody.png diff --git a/package.json b/package.json index 9855892..81ec80a 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", - "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", diff --git a/src/_base.scss b/src/_base.scss index 4932235..aecf6af 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -67,12 +67,10 @@ p { } strong { - color: fn.color(--heading); font-weight: bold; } small { - color: fn.color(--text-mute); font-size: fn.dim(--font-size --75); } diff --git a/src/_config.scss b/src/_config.scss index 56a74e1..ffba8c9 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -156,6 +156,10 @@ $theme-light: ( --bg-l1: --base --100, --bg-base: --base --200, )), + + --constants: ( + --shadow: rgba(#000, 0.15), + ), ) !default; $theme-dark: ( @@ -212,6 +216,10 @@ $theme-dark: ( --bg-l1: --base --75, --bg-l2: --base --100, )), + + --constants: ( + --shadow: rgba(#000, 0.5), + ), ) !default; $themes: ( diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 23ee4d4..797001c 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -101,6 +101,12 @@ --thin: 1px, ), + --shadow: ( + --x: 0, + --y: 1px, + --blur: 4px, + ), + --rounding: 4px, --key-focus: ( @@ -110,7 +116,7 @@ ), --paragraph: ( - --margin-bs: fn.dim(--size --300, null), + --margin-bs: fn.dim(--size --200, null), ), --heading: ( @@ -230,6 +236,14 @@ ), $tree); } + @each $color, $value in map.get($theme, --constants) { + @include iro.props-store(( + --colors: ( + $color: $value, + ), + ), $tree); + } + @each $color, $ref in map.get($theme, --semantic) { $res: (); @@ -246,7 +260,7 @@ $color: $res, ), ), $tree); - } + } } @each $theme-name, $theme in config.$themes { diff --git a/src/_layouts.scss b/src/_layouts.scss index 26cfe3f..779fd64 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -4,4 +4,5 @@ @use 'layouts/form'; @use 'layouts/flex'; @use 'layouts/overflow'; +@use 'layouts/card-list'; @use 'layouts/message-group'; diff --git a/src/_mixins.scss b/src/_mixins.scss index 29d792b..dca6831 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -20,8 +20,7 @@ @include set-font(--standard, ( --line-height: null, --size: fn.global-dim(list.join(--heading, $size)), - --weight: bold, - --spacing: 1px + --weight: bold )); color: fn.global-color(--heading); diff --git a/src/_utils.scss b/src/_utils.scss index a99d7ec..06afa62 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -119,6 +119,10 @@ $sizes: 0 10 50 75 100 125 200 400 700 800 !default; color: fn.color(--text-mute); } +@include iro.bem-utility('c-mute-more') { + color: fn.color(--text-mute-more); +} + @include iro.bem-utility('mt-neutralize') { &::before { content: ''; diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss new file mode 100644 index 0000000..c27b297 --- /dev/null +++ b/src/layouts/_card-list.scss @@ -0,0 +1,78 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('card-list') { + @include iro.props-store(( + --dims: ( + --row-gap: fn.global-dim(--size --800), + --col-gap: fn.global-dim(--size --400), + + --grid: ( + --row-gap: fn.global-dim(--size --800), + --col-gap: fn.global-dim(--size --400), + --col-width: fn.global-dim(--size --3200), + ), + --masonry: ( + --row-gap: fn.global-dim(--size --800), + --col-gap: fn.global-dim(--size --400), + --col-width: fn.global-dim(--size --3200), + ), + --masonry-h: ( + --row-gap: fn.global-dim(--size --800), + --col-gap: fn.global-dim(--size --400), + --row-height: fn.global-dim(--size --3200), + ) + ), + --colors: ( + --border: fn.global-color(--border), + ), + )); + + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + flex-direction: column; + gap: fn.dim(--row-gap) fn.dim(--col-gap); + + @include iro.bem-modifier('grid') { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); + gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap); + } + + @include iro.bem-modifier('masonry') { + display: block; + columns: auto fn.dim(--masonry --col-width); + column-gap: fn.dim(--masonry --col-gap); + + @include iro.bem-elem('card') { + margin-bottom: fn.dim(--masonry --row-gap); + } + } + + @include iro.bem-modifier('masonry-h') { + flex-flow: row wrap; + gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap); + + @include iro.bem-elem('card') { + flex: 1 0 auto; + max-width: 100%; + } + + @include iro.bem-elem('card-content') { + height: fn.dim(--masonry-h --row-height); + } + + @include iro.bem-elem('dummy') { + flex: 1 0 auto; + width: fn.dim(--masonry-h --row-height); + } + } + + @include iro.bem-modifier('aspect-5\\/4') { + @include iro.bem-elem('card') { + aspect-ratio: 5 / 4; + } + } + } +} diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 7a7ff46..7fe9d44 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -11,8 +11,8 @@ $static-themes: 'black' 'white' !default; color: fn.color(list.join($theme, --disabled --label)); &::after { - outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); + outline-color: fn.color(list.join($theme, --key-focus --border)); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); } &:link, diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index e6fa74e..5a34d19 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; @include iro.props-namespace('avatar') { @include iro.props-store(( --dims: ( - --size: fn.global-dim(--size --500), - --font-size: fn.global-dim(--font-size --100), - --indicator-size: fn.global-dim(--size --150), + --size: fn.global-dim(--size --500), + --font-size: fn.global-dim(--font-size --100), + --indicator-size: fn.global-dim(--size --150), + --indicator-spacing: fn.global-dim(--size --40), + --rounding: 25%, --xxxl: ( --size: fn.global-dim(--size --1600), @@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; --font-size: fn.global-dim(--font-size --50), --indicator-size: fn.global-dim(--size --100), ), - --indicator-spacing: fn.global-dim(--size --40), - --rounding: 25%, --key-focus: ( --border: fn.global-dim(--key-focus --border), @@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; @include iro.bem-object(iro.props-namespace()) { display: inline-block; position: relative; - border: fn.dim(--key-focus --border) solid transparent; border-radius: fn.dim(--rounding); font-size: fn.dim(--font-size); font-style: normal; vertical-align: .05em; + &::after { + content: ''; + display: none; + position: absolute; + z-index: 1; + inset: calc(-1 * fn.dim(--key-focus --border-offset)); + border: fn.dim(--key-focus --border-offset) solid transparent; + border-radius: fn.dim(--rounding); + outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + pointer-events: none; + } + @include iro.bem-elem('status') { position: absolute; inset-inline-end: 0; @@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; @include iro.bem-modifier('circle') { border-radius: 100%; + &::after { + border-radius: 100%; + } + @include iro.bem-elem('content') { border-radius: 100%; } @@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; } &:focus-visible { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + &::after { + display: block; + } } } } diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index cc7e500..06261b8 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default; } @if string.slice($theme, 1, 7) == 'static-' { - &:link, - &:visited, - &:enabled { - &:focus-visible { - outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); - } + &::after { + outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); } } } @@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default; @include iro.bem-object(iro.props-namespace()) { display: inline-block; - margin: calc(-1 * fn.dim(--key-focus --border)); + position: relative; padding-block: fn.dim(--pad-b); padding-inline: fn.dim(--pad-i); - border: fn.dim(--key-focus --border) solid transparent; - border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); + border-radius: fn.dim(--rounding); background-color: fn.color(--bg); background-clip: padding-box; color: fn.color(--label); @@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default; text-align: center; text-decoration: none; + &::after { + content: ''; + display: none; + position: absolute; + z-index: 1; + inset: calc(-1 * fn.dim(--key-focus --border-offset)); + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); + outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + pointer-events: none; + } + &:link, &:visited, &:enabled { @@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default; &:visited, &:enabled { &:focus-visible { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + &::after { + display: block; + } } } @@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default; @include iro.bem-modifier('pill') { padding-inline: fn.dim(--pad-i-pill); border-radius: 10em; + + &::after { + border-radius: 10em; + } } @each $size in sm lg xl { diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 5783ac1..9f84d7a 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -18,18 +18,26 @@ ), ), --colors: ( - --bg: fn.global-color(--bg-l2), - --border: fn.global-color(--border-mute), - --divider: fn.global-color(--border-mute), + --bg: fn.global-color(--bg-l2), + --image-bg: fn.global-color(--border-mute), + --border: fn.global-color(--border-mute), + --divider: fn.global-color(--border-mute), --hover: ( --border: fn.global-color(--border), ), + --key-focus: ( --label: fn.global-color(--focus --text), --border: fn.global-color(--focus --border), --outline: fn.global-color(--focus --outline), ), + + --quiet: ( + --hover: ( + --border: fn.global-color(--text-disabled), + ), + ), ), )); @@ -59,8 +67,20 @@ } @include iro.bem-elem('image') { - position: relative; - width: 100%; + position: relative; + width: 100%; + overflow: hidden; + background-color: fn.color(--image-bg); + + &:first-child { + border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + } + + &:last-child { + border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); + } @include iro.bem-next-elem('avatar') { margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); @@ -102,5 +122,47 @@ background-color: fn.color(--divider); } } + + @include iro.bem-modifier('quiet') { + position: relative; + border: 0; + background-color: transparent; + + @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active { + @include iro.bem-elem('image') { + outline: fn.dim(--border) solid fn.color(--quiet --hover --border); + outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border)); + } + } + + &:focus-visible { + outline: none; + box-shadow: none; + + @include iro.bem-elem('image') { + outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + } + } + } + + @include iro.bem-elem('image') { + margin: calc(-1 * fn.dim(--key-focus --border)); + border: fn.dim(--key-focus --border) solid transparent; + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); + background-clip: padding-box; + } + + @include iro.bem-elem('body') { + padding: 0; + padding-block-start: fn.dim(--spacing); + } + + @include iro.bem-elem('footer') { + padding-inline: 0; + } + } } } diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 84ddf12..d1e2897 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -75,6 +75,7 @@ $static-themes: 'black' 'white' !default; @include iro.bem-object(iro.props-namespace()) { display: flex; + flex: 0 0 auto; flex-direction: row; align-items: center; block-size: 1em; diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 9d4b1c7..5ad58ec 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -14,7 +14,12 @@ --colors: ( --bg: fn.global-color(--bg-l2), --border: fn.global-color(--border), - --shadow: 0 .2em .5em rgba(#000, .1), + --filter: drop-shadow( + fn.global-dim(--shadow --x) + fn.global-dim(--shadow --y) + fn.global-dim(--shadow --blur) + fn.global-color(--shadow) + ), ), )); @@ -29,7 +34,7 @@ border: fn.dim(--border) solid fn.color(--border); border-radius: fn.dim(--rounding); background-color: fn.color(--bg); - box-shadow: fn.color(--shadow); + filter: fn.color(--filter); @include iro.bem-modifier('up-left') { transform: translate(var(--x), calc(var(--y) - 100%)); diff --git a/static/0000 Cover@0.5x.webp b/static/0000 Cover@0.5x.webp new file mode 100755 index 0000000..2ad8155 Binary files /dev/null and b/static/0000 Cover@0.5x.webp differ diff --git a/static/01 Design Cody.png b/static/01 Design Cody.png new file mode 100755 index 0000000..d734a41 Binary files /dev/null and b/static/01 Design Cody.png differ diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index b5fb8da..1fa3347 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -5,7 +5,7 @@ mixin a-button 'o-button--block': attributes.block, 'o-button--primary': attributes.primary, 'o-button--outline': attributes.outline, - 'o-button--round': !!attributes.icon + 'o-button--round': !!attributes.icon && !block } if (attributes.variant) { classes['o-button--' + attributes.variant] = true diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index d61393d..d7595d1 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug @@ -1,7 +1,12 @@ mixin card - let classes = { - 'o-card': true, + 'o-card': true, + 'o-card--quiet': !!attributes.quiet, + } + + if (attributes.class) { + classes[attributes.class] = true; } if attributes.href @@ -13,10 +18,10 @@ mixin card mixin card-image .o-card__image - img.o-card__image-img(src=attributes.src) + img.o-card__image-img(src=attributes.src style=attributes.style) mixin card-body - .o-card__body + .o-card__body(style=attributes.style) block mixin card-title diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 6858867..e466cdc 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -1,23 +1,54 @@ mixin view-card +view('card', 'Card') - .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' }) + .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) +card(href='#') - +card-image(src='Drawing_Half.png') + +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) +card-avatar(src='avatar.png') +card-body +card-title= 'XS Heading' - +card-content= loremIpsum + +card-content + p= loremIpsum + p= loremIpsum +card-footer = 'Footer' - +card(href='#') + +card +card-body .l-media +avatar(class='l-media__block' src='avatar.png') .l-media__block.l-media__block--main strong.u-d-block= 'Volpeon' small.u-d-block= '@volpeon@is-a.wyvern.rip' - +card-content= loremIpsum - +card-image(src='Drawing_Half.png') + +card-content + p= loremIpsum + p= loremIpsum + +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' }) +card-body - = 'Footer' + .l-media + .l-media__block + +badge('positive')(quiet=true icon='repeat' href='#') + +icon('repeat') + strong.u-mis-50= '12' + .l-media__block + +badge('warning')(quiet=true icon='star' href='#') + +icon('star') + strong.u-mis-50= '34' + .l-media__block.u-mis-auto + +a-button(primary=true)= 'Reply' + + +card(quiet=true href='#') + +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) + +card-body + +card-title= 'XS Heading' + +card-content + p= loremIpsum + p= loremIpsum + + +divider('faint') + + .l-card-list.l-card-list--masonry + each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] + +card(href='#' class='l-card-list__card') + +card-image(src=img) + +card-body + +card-title= 'XS Heading' diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug index e71229d..8ba9880 100644 --- a/tpl/views/icon-nav.pug +++ b/tpl/views/icon-nav.pug @@ -5,7 +5,7 @@ mixin view-icon-nav +icon-nav-item('hash') +icon-nav-item('bookmark')(selected=true) +icon-nav-item('tags') - +icon-nav-item('cog')(class='u-ml-auto') + +icon-nav-item('cog')(class='u-mis-auto') +icon-nav-item('logout') .c-box diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug index dc744d9..48cb008 100644 --- a/tpl/views/message-group.pug +++ b/tpl/views/message-group.pug @@ -71,10 +71,10 @@ mixin view-message-group .l-media .l-media__block.l-media__block--main strong= 'Volpeon' - small.u-ml-100= '@volpeon@mk.vulpes.one' + small.u-mis-100= '@volpeon@mk.vulpes.one' small.l-media__block = '5 minutes ago' - +icon('lock')(class='u-ml-100') + +icon('lock')(class='u-mis-100') +slot('body')= 'Full width bubble messages test' +message()(theme='t-up' group=true) +slot('body')= loremIpsum diff --git a/tpl/views/message.pug b/tpl/views/message.pug index 9130537..dc8b289 100644 --- a/tpl/views/message.pug +++ b/tpl/views/message.pug @@ -5,7 +5,7 @@ mixin view-message +slot('body')= loremIpsum +slot('time') = '12:34' - +icon('lock')(class='u-ml-100') + +icon('lock')(class='u-mis-100') .c-box +message('Volpeon')(compact=true highlight=true theme='t-up') @@ -21,10 +21,10 @@ mixin view-message .l-media .l-media__block.l-media__block--main strong= 'Volpeon' - small.u-ml-100= '@volpeon@mk.vulpes.one' + small.u-mis-100= '@volpeon@mk.vulpes.one' small.l-media__block = '5 minutes ago' - +icon('lock')(class='u-ml-100') + +icon('lock')(class='u-mis-100') +slot('body') = loremIpsum = loremIpsum diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 9a60741..165e2ce 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug @@ -17,7 +17,7 @@ mixin view-text-field +text-field(placeholder='Just landed in L.A.' class="u-p-50") +slot('pre') +action-button(quiet=true class='l-media__block')= 'Volpeon' - +divider('vertical')(class='u-ml-50') + +divider('vertical')(class='u-mis-50') +slot('post') +action-button(quiet=true icon='smile' class='l-media__block') +action-button(quiet=true icon='send' class='l-media__block') -- cgit v1.2.3-70-g09d2