From 9faf093cc16ad6ee9eafbaf253ff6c31a1f5ee7f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 07:54:12 +0200 Subject: card -> media --- src/_layouts.scss | 2 +- src/layouts/_card.scss | 67 --------------------------------------------- src/layouts/_media.scss | 67 +++++++++++++++++++++++++++++++++++++++++++++ src/objects/_heading.scss | 7 +++-- src/scopes/_headings.scss | 7 +++-- tpl/index.pug | 4 +-- tpl/objects/action-menu.pug | 8 +++--- tpl/objects/bubble.pug | 6 ++-- tpl/objects/dialog.pug | 8 +++--- tpl/objects/menu.pug | 10 +++---- tpl/objects/text-field.pug | 8 +++--- tpl/views/action-menu.pug | 6 ++-- tpl/views/bubble-group.pug | 6 ++-- tpl/views/bubble.pug | 6 ++-- tpl/views/dialog.pug | 4 +-- tpl/views/text-field.pug | 6 ++-- 16 files changed, 114 insertions(+), 108 deletions(-) delete mode 100644 src/layouts/_card.scss create mode 100644 src/layouts/_media.scss diff --git a/src/_layouts.scss b/src/_layouts.scss index 331eb7e..cc8b1c5 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -1,4 +1,4 @@ -@use 'layouts/card'; +@use 'layouts/media'; @use 'layouts/container'; @use 'layouts/button-group'; @use 'layouts/form'; diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss deleted file mode 100644 index 176df06..0000000 --- a/src/layouts/_card.scss +++ /dev/null @@ -1,67 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('card') { - @include iro.props-store(( - --dims: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), - - --75: ( - --pad-x: fn.global-dim(--size --100), - --pad-y: fn.global-dim(--size --50), - ), - - --200: ( - --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --150), - ), - - --300: ( - --pad-x: fn.global-dim(--size --450), - --pad-y: fn.global-dim(--size --225), - ) - ) - ), 'dims'); - - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - align-items: center; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - gap: fn.dim(--pad-x); - line-height: 1.4; - - @include iro.bem-modifier('75') { - padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); - gap: fn.dim(--75 --pad-x); - } - - @include iro.bem-modifier('200') { - padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); - gap: fn.dim(--200 --pad-x); - } - - @include iro.bem-modifier('300') { - padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); - gap: fn.dim(--300 --pad-x); - } - - @include iro.bem-modifier('flush') { - padding: 0; - } - - @include iro.bem-modifier('gapless') { - gap: 0; - } - - @include iro.bem-elem('block') { - flex: 0 0 auto; - - @include iro.bem-modifier('main') { - flex-shrink: 1; - width: 100%; - min-width: 0; - } - } - } -} diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss new file mode 100644 index 0000000..61f3cda --- /dev/null +++ b/src/layouts/_media.scss @@ -0,0 +1,67 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('media') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + + --75: ( + --pad-x: fn.global-dim(--size --100), + --pad-y: fn.global-dim(--size --50), + ), + + --200: ( + --pad-x: fn.global-dim(--size --300), + --pad-y: fn.global-dim(--size --150), + ), + + --300: ( + --pad-x: fn.global-dim(--size --450), + --pad-y: fn.global-dim(--size --225), + ) + ) + ), 'dims'); + + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + align-items: center; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + gap: fn.dim(--pad-x); + line-height: 1.4; + + @include iro.bem-modifier('75') { + padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); + gap: fn.dim(--75 --pad-x); + } + + @include iro.bem-modifier('200') { + padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); + gap: fn.dim(--200 --pad-x); + } + + @include iro.bem-modifier('300') { + padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); + gap: fn.dim(--300 --pad-x); + } + + @include iro.bem-modifier('flush') { + padding: 0; + } + + @include iro.bem-modifier('gapless') { + gap: 0; + } + + @include iro.bem-elem('block') { + flex: 0 0 auto; + + @include iro.bem-modifier('main') { + flex-shrink: 1; + width: 100%; + min-width: 0; + } + } + } +} diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index e73b074..d1f37e0 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -17,6 +17,7 @@ display: block; margin-top: fn.global-dim(--heading --margin-top); + transform: translateX(-.06em); letter-spacing: normal; text-transform: none; @@ -53,7 +54,8 @@ --spacing: 1px )); - color: fn.color(--strong); + transform: none; + color: fn.color(--strong); } @include iro.bem-modifier('xs') { @@ -65,7 +67,8 @@ --spacing: 1px )); - color: fn.color(--light); + transform: none; + color: fn.color(--light); } @include iro.bem-elem('primary') { diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 2e7d88f..58bac7f 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -13,6 +13,7 @@ @include mx.set-font(--headline); display: block; + transform: translateX(-.06em); letter-spacing: normal; text-transform: none; } @@ -47,7 +48,8 @@ --spacing: 1px )); - color: fn.foreign-color(--heading, --strong); + transform: none; + color: fn.foreign-color(--heading, --strong); } h6 { @@ -59,7 +61,8 @@ --spacing: 1px )); - color: fn.foreign-color(--heading, --light); + transform: none; + color: fn.foreign-color(--heading, --light); } @include iro.bem-elem('primary') { diff --git a/tpl/index.pug b/tpl/index.pug index 7bb59a0..f5d2f25 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -44,8 +44,8 @@ mixin user-card(name, hue) - const avaName = name.slice(0, 1) - .l-card.l-card--flush.l-card--75 - +avatar(block=true size='50' class='l-card__block' hue=hue) + .l-media.l-media--flush.l-media--75 + +avatar(block=true size='50' class='l-media__block' hue=hue) = avaName = name diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 751e29d..bb21d9e 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug @@ -7,16 +7,16 @@ mixin action-menu mixin action-menu-item button.o-action-menu__item(disabled=attributes.disabled) - .l-card.l-card--flush - .l-card__block.o-action-menu__icon-slot + .l-media.l-media--flush + .l-media__block.o-action-menu__icon-slot if attributes.icon if attributes.iconIsStatus +status-indicator(attributes.icon)(class='o-action-menu__icon') else +icon(attributes.icon)(class='o-action-menu__icon') - .l-card__block.l-card__block--main + .l-media__block.l-media__block--main block - .l-card__block.o-action-menu__icon-slot + .l-media__block.o-action-menu__icon-slot if attributes.postIcon +icon(attributes.postIcon)(class='o-action-menu__icon') diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug index fad7242..bec6e9e 100644 --- a/tpl/objects/bubble.pug +++ b/tpl/objects/bubble.pug @@ -42,10 +42,10 @@ mixin bubble(user) article(class=classes) if user && attributes.avatar - .l-card.l-card--flush.l-flex--align-start - .l-card__block.u-mt-50.u-sticky-top + .l-media.l-media--flush.l-flex--align-start + .l-media__block.u-mt-50.u-sticky-top +avatar= user.slice(0, 2) - .l-card__block.l-card__block--main + .l-media__block.l-media__block--main +content else +content diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 91b99d9..95aa41c 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -18,7 +18,7 @@ mixin dialog(title) 'o-dialog__header': true, 'u-themed': !attributes.flat, 't-lowered': !attributes.flat, - 'l-card': true, + 'l-media': true, } let sidebarHeaderClass = { @@ -40,7 +40,7 @@ mixin dialog(title) if slots['sidebar-header'] - slots['sidebar-header']() else - +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle + +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle if slots.sidebar .o-dialog__sidebar.l-overflow @@ -51,8 +51,8 @@ mixin dialog(title) - slots.header() else if title - +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block') + +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= title + +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') section(class=bodyClass) if slots.body diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 3cc092a..52cbe5e 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -18,8 +18,8 @@ mixin menu-item - let classes = { 'o-menu__item': true, - 'l-card': true, - 'l-card--75': true, + 'l-media': true, + 'l-media--75': true, 'is-selected': attributes.selected, } if (attributes.class) { @@ -28,15 +28,15 @@ mixin menu-item #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) if attributes.icon - .l-card__block.o-menu__icon-slot + .l-media__block.o-menu__icon-slot if attributes.iconIsStatus +status-indicator(attributes.icon)(class='o-menu__icon') else +icon(attributes.icon)(class='o-menu__icon') - .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) + .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass }) block if attributes.postIcon - .l-card__block.o-menu__icon-slot + .l-media__block.o-menu__icon-slot +icon(attributes.postIcon)(class='o-menu__icon') mixin menu-header diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 53d1362..d5c4444 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -14,9 +14,9 @@ mixin text-field 'o-text-field--extended': !!block, 'is-invalid': attributes.invalid, 'is-disabled': attributes.disabled, - 'l-card': !!block, - 'l-card--flush': !!block, - 'l-card--gapless': !!block, + 'l-media': !!block, + 'l-media--flush': !!block, + 'l-media--gapless': !!block, } if (attributes.class) { classes[attributes.class] = true; @@ -32,7 +32,7 @@ mixin text-field if slots.pre .u-d-contents.t-hi - slots.pre() - input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) + input.o-text-field__native.l-media__block.l-media__block--main&attributes(attr) if slots.post .u-d-contents.t-hi - slots.post() diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug index 4f96934..3357caa 100644 --- a/tpl/views/action-menu.pug +++ b/tpl/views/action-menu.pug @@ -4,9 +4,9 @@ mixin view-action-menu div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) +action-button(quiet=true selected=true)= 'Menu' +action-menu - +action-menu-slot(class='l-card l-card--flush') - +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block') - .l-card__block.l-card__block--main + +action-menu-slot(class='l-media l-media--flush') + +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') + .l-media__block.l-media__block--main strong.u-d-block= 'Volpeon' small.u-d-block= '@volpeon@mk.vulpes.one' +action-menu-separator diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug index 19b06c4..8464bc7 100644 --- a/tpl/views/bubble-group.pug +++ b/tpl/views/bubble-group.pug @@ -22,11 +22,11 @@ mixin view-bubble-group +bubble-group('Volpeon') +bubble()(class='l-bubble-group__bubble') +slot('header') - .l-card.l-card--flush - .l-card__block.l-card__block--main + .l-media.l-media--flush + .l-media__block.l-media__block--main strong= 'Volpeon' small.u-ml-100= '@volpeon@mk.vulpes.one' - small.l-card__block + small.l-media__block = '5 minutes ago' +icon('lock')(class='u-ml-100') +slot('body')= 'Full width bubbles test' diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug index 0e65635..be9cf38 100644 --- a/tpl/views/bubble.pug +++ b/tpl/views/bubble.pug @@ -14,11 +14,11 @@ mixin view-bubble .c-box.l-overflow(style='resize: vertical') +bubble('Volpeon')(avatar=true) +slot('header') - .l-card.l-card--flush - .l-card__block.l-card__block--main + .l-media.l-media--flush + .l-media__block.l-media__block--main strong= 'Volpeon' small.u-ml-100= '@volpeon@mk.vulpes.one' - small.l-card__block + small.l-media__block = '5 minutes ago' +icon('lock')(class='u-ml-100') +slot('body') diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index f90ef21..9d6061d 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug @@ -42,10 +42,10 @@ mixin view-dialog +backdrop +dialog +slot('header') - .l-card__block.l-flex + .l-media__block.l-flex +action-button(quiet=true icon='chevron-left') +action-button(quiet=true icon='chevron-right') - .l-card__block.l-card__block--main + .l-media__block.l-media__block--main +div-heading('sm')= 'Tags' +slot('sidebar') +menu(style={ 'min-width': '10em' }) diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 262195d..9a60741 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug @@ -16,8 +16,8 @@ mixin view-text-field div +text-field(placeholder='Just landed in L.A.' class="u-p-50") +slot('pre') - +action-button(quiet=true class='l-card__block')= 'Volpeon' + +action-button(quiet=true class='l-media__block')= 'Volpeon' +divider('vertical')(class='u-ml-50') +slot('post') - +action-button(quiet=true icon='smile' class='l-card__block') - +action-button(quiet=true icon='send' class='l-card__block') + +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