diff options
-rw-r--r-- | src/_layouts.scss | 2 | ||||
-rw-r--r-- | src/layouts/_media.scss (renamed from src/layouts/_card.scss) | 2 | ||||
-rw-r--r-- | src/objects/_heading.scss | 7 | ||||
-rw-r--r-- | src/scopes/_headings.scss | 7 | ||||
-rw-r--r-- | tpl/index.pug | 4 | ||||
-rw-r--r-- | tpl/objects/action-menu.pug | 8 | ||||
-rw-r--r-- | tpl/objects/bubble.pug | 6 | ||||
-rw-r--r-- | tpl/objects/dialog.pug | 8 | ||||
-rw-r--r-- | tpl/objects/menu.pug | 10 | ||||
-rw-r--r-- | tpl/objects/text-field.pug | 8 | ||||
-rw-r--r-- | tpl/views/action-menu.pug | 6 | ||||
-rw-r--r-- | tpl/views/bubble-group.pug | 6 | ||||
-rw-r--r-- | tpl/views/bubble.pug | 6 | ||||
-rw-r--r-- | tpl/views/dialog.pug | 4 | ||||
-rw-r--r-- | tpl/views/text-field.pug | 6 |
15 files changed, 48 insertions, 42 deletions
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 @@ | |||
1 | @use 'layouts/card'; | 1 | @use 'layouts/media'; |
2 | @use 'layouts/container'; | 2 | @use 'layouts/container'; |
3 | @use 'layouts/button-group'; | 3 | @use 'layouts/button-group'; |
4 | @use 'layouts/form'; | 4 | @use 'layouts/form'; |
diff --git a/src/layouts/_card.scss b/src/layouts/_media.scss index 176df06..61f3cda 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_media.scss | |||
@@ -1,7 +1,7 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | @include iro.props-namespace('card') { | 4 | @include iro.props-namespace('media') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --pad-x: fn.global-dim(--size --150), | 7 | --pad-x: fn.global-dim(--size --150), |
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 @@ | |||
17 | 17 | ||
18 | display: block; | 18 | display: block; |
19 | margin-top: fn.global-dim(--heading --margin-top); | 19 | margin-top: fn.global-dim(--heading --margin-top); |
20 | transform: translateX(-.06em); | ||
20 | letter-spacing: normal; | 21 | letter-spacing: normal; |
21 | text-transform: none; | 22 | text-transform: none; |
22 | 23 | ||
@@ -53,7 +54,8 @@ | |||
53 | --spacing: 1px | 54 | --spacing: 1px |
54 | )); | 55 | )); |
55 | 56 | ||
56 | color: fn.color(--strong); | 57 | transform: none; |
58 | color: fn.color(--strong); | ||
57 | } | 59 | } |
58 | 60 | ||
59 | @include iro.bem-modifier('xs') { | 61 | @include iro.bem-modifier('xs') { |
@@ -65,7 +67,8 @@ | |||
65 | --spacing: 1px | 67 | --spacing: 1px |
66 | )); | 68 | )); |
67 | 69 | ||
68 | color: fn.color(--light); | 70 | transform: none; |
71 | color: fn.color(--light); | ||
69 | } | 72 | } |
70 | 73 | ||
71 | @include iro.bem-elem('primary') { | 74 | @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 @@ | |||
13 | @include mx.set-font(--headline); | 13 | @include mx.set-font(--headline); |
14 | 14 | ||
15 | display: block; | 15 | display: block; |
16 | transform: translateX(-.06em); | ||
16 | letter-spacing: normal; | 17 | letter-spacing: normal; |
17 | text-transform: none; | 18 | text-transform: none; |
18 | } | 19 | } |
@@ -47,7 +48,8 @@ | |||
47 | --spacing: 1px | 48 | --spacing: 1px |
48 | )); | 49 | )); |
49 | 50 | ||
50 | color: fn.foreign-color(--heading, --strong); | 51 | transform: none; |
52 | color: fn.foreign-color(--heading, --strong); | ||
51 | } | 53 | } |
52 | 54 | ||
53 | h6 { | 55 | h6 { |
@@ -59,7 +61,8 @@ | |||
59 | --spacing: 1px | 61 | --spacing: 1px |
60 | )); | 62 | )); |
61 | 63 | ||
62 | color: fn.foreign-color(--heading, --light); | 64 | transform: none; |
65 | color: fn.foreign-color(--heading, --light); | ||
63 | } | 66 | } |
64 | 67 | ||
65 | @include iro.bem-elem('primary') { | 68 | @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) | |||
44 | - | 44 | - |
45 | const avaName = name.slice(0, 1) | 45 | const avaName = name.slice(0, 1) |
46 | 46 | ||
47 | .l-card.l-card--flush.l-card--75 | 47 | .l-media.l-media--flush.l-media--75 |
48 | +avatar(block=true size='50' class='l-card__block' hue=hue) | 48 | +avatar(block=true size='50' class='l-media__block' hue=hue) |
49 | = avaName | 49 | = avaName |
50 | = name | 50 | = name |
51 | 51 | ||
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 | |||
7 | 7 | ||
8 | mixin action-menu-item | 8 | mixin action-menu-item |
9 | button.o-action-menu__item(disabled=attributes.disabled) | 9 | button.o-action-menu__item(disabled=attributes.disabled) |
10 | .l-card.l-card--flush | 10 | .l-media.l-media--flush |
11 | .l-card__block.o-action-menu__icon-slot | 11 | .l-media__block.o-action-menu__icon-slot |
12 | if attributes.icon | 12 | if attributes.icon |
13 | if attributes.iconIsStatus | 13 | if attributes.iconIsStatus |
14 | +status-indicator(attributes.icon)(class='o-action-menu__icon') | 14 | +status-indicator(attributes.icon)(class='o-action-menu__icon') |
15 | else | 15 | else |
16 | +icon(attributes.icon)(class='o-action-menu__icon') | 16 | +icon(attributes.icon)(class='o-action-menu__icon') |
17 | .l-card__block.l-card__block--main | 17 | .l-media__block.l-media__block--main |
18 | block | 18 | block |
19 | .l-card__block.o-action-menu__icon-slot | 19 | .l-media__block.o-action-menu__icon-slot |
20 | if attributes.postIcon | 20 | if attributes.postIcon |
21 | +icon(attributes.postIcon)(class='o-action-menu__icon') | 21 | +icon(attributes.postIcon)(class='o-action-menu__icon') |
22 | 22 | ||
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) | |||
42 | 42 | ||
43 | article(class=classes) | 43 | article(class=classes) |
44 | if user && attributes.avatar | 44 | if user && attributes.avatar |
45 | .l-card.l-card--flush.l-flex--align-start | 45 | .l-media.l-media--flush.l-flex--align-start |
46 | .l-card__block.u-mt-50.u-sticky-top | 46 | .l-media__block.u-mt-50.u-sticky-top |
47 | +avatar= user.slice(0, 2) | 47 | +avatar= user.slice(0, 2) |
48 | .l-card__block.l-card__block--main | 48 | .l-media__block.l-media__block--main |
49 | +content | 49 | +content |
50 | else | 50 | else |
51 | +content | 51 | +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) | |||
18 | 'o-dialog__header': true, | 18 | 'o-dialog__header': true, |
19 | 'u-themed': !attributes.flat, | 19 | 'u-themed': !attributes.flat, |
20 | 't-lowered': !attributes.flat, | 20 | 't-lowered': !attributes.flat, |
21 | 'l-card': true, | 21 | 'l-media': true, |
22 | } | 22 | } |
23 | 23 | ||
24 | let sidebarHeaderClass = { | 24 | let sidebarHeaderClass = { |
@@ -40,7 +40,7 @@ mixin dialog(title) | |||
40 | if slots['sidebar-header'] | 40 | if slots['sidebar-header'] |
41 | - slots['sidebar-header']() | 41 | - slots['sidebar-header']() |
42 | else | 42 | else |
43 | +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle | 43 | +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle |
44 | 44 | ||
45 | if slots.sidebar | 45 | if slots.sidebar |
46 | .o-dialog__sidebar.l-overflow | 46 | .o-dialog__sidebar.l-overflow |
@@ -51,8 +51,8 @@ mixin dialog(title) | |||
51 | - slots.header() | 51 | - slots.header() |
52 | else | 52 | else |
53 | if title | 53 | if title |
54 | +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title | 54 | +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= title |
55 | +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block') | 55 | +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') |
56 | 56 | ||
57 | section(class=bodyClass) | 57 | section(class=bodyClass) |
58 | if slots.body | 58 | 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 | |||
18 | - | 18 | - |
19 | let classes = { | 19 | let classes = { |
20 | 'o-menu__item': true, | 20 | 'o-menu__item': true, |
21 | 'l-card': true, | 21 | 'l-media': true, |
22 | 'l-card--75': true, | 22 | 'l-media--75': true, |
23 | 'is-selected': attributes.selected, | 23 | 'is-selected': attributes.selected, |
24 | } | 24 | } |
25 | if (attributes.class) { | 25 | if (attributes.class) { |
@@ -28,15 +28,15 @@ mixin menu-item | |||
28 | 28 | ||
29 | #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) | 29 | #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) |
30 | if attributes.icon | 30 | if attributes.icon |
31 | .l-card__block.o-menu__icon-slot | 31 | .l-media__block.o-menu__icon-slot |
32 | if attributes.iconIsStatus | 32 | if attributes.iconIsStatus |
33 | +status-indicator(attributes.icon)(class='o-menu__icon') | 33 | +status-indicator(attributes.icon)(class='o-menu__icon') |
34 | else | 34 | else |
35 | +icon(attributes.icon)(class='o-menu__icon') | 35 | +icon(attributes.icon)(class='o-menu__icon') |
36 | .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) | 36 | .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass }) |
37 | block | 37 | block |
38 | if attributes.postIcon | 38 | if attributes.postIcon |
39 | .l-card__block.o-menu__icon-slot | 39 | .l-media__block.o-menu__icon-slot |
40 | +icon(attributes.postIcon)(class='o-menu__icon') | 40 | +icon(attributes.postIcon)(class='o-menu__icon') |
41 | 41 | ||
42 | mixin menu-header | 42 | 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 | |||
14 | 'o-text-field--extended': !!block, | 14 | 'o-text-field--extended': !!block, |
15 | 'is-invalid': attributes.invalid, | 15 | 'is-invalid': attributes.invalid, |
16 | 'is-disabled': attributes.disabled, | 16 | 'is-disabled': attributes.disabled, |
17 | 'l-card': !!block, | 17 | 'l-media': !!block, |
18 | 'l-card--flush': !!block, | 18 | 'l-media--flush': !!block, |
19 | 'l-card--gapless': !!block, | 19 | 'l-media--gapless': !!block, |
20 | } | 20 | } |
21 | if (attributes.class) { | 21 | if (attributes.class) { |
22 | classes[attributes.class] = true; | 22 | classes[attributes.class] = true; |
@@ -32,7 +32,7 @@ mixin text-field | |||
32 | if slots.pre | 32 | if slots.pre |
33 | .u-d-contents.t-hi | 33 | .u-d-contents.t-hi |
34 | - slots.pre() | 34 | - slots.pre() |
35 | input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) | 35 | input.o-text-field__native.l-media__block.l-media__block--main&attributes(attr) |
36 | if slots.post | 36 | if slots.post |
37 | .u-d-contents.t-hi | 37 | .u-d-contents.t-hi |
38 | - slots.post() | 38 | - 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 | |||
4 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) | 4 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) |
5 | +action-button(quiet=true selected=true)= 'Menu' | 5 | +action-button(quiet=true selected=true)= 'Menu' |
6 | +action-menu | 6 | +action-menu |
7 | +action-menu-slot(class='l-card l-card--flush') | 7 | +action-menu-slot(class='l-media l-media--flush') |
8 | +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block') | 8 | +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') |
9 | .l-card__block.l-card__block--main | 9 | .l-media__block.l-media__block--main |
10 | strong.u-d-block= 'Volpeon' | 10 | strong.u-d-block= 'Volpeon' |
11 | small.u-d-block= '@volpeon@mk.vulpes.one' | 11 | small.u-d-block= '@volpeon@mk.vulpes.one' |
12 | +action-menu-separator | 12 | +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 | |||
22 | +bubble-group('Volpeon') | 22 | +bubble-group('Volpeon') |
23 | +bubble()(class='l-bubble-group__bubble') | 23 | +bubble()(class='l-bubble-group__bubble') |
24 | +slot('header') | 24 | +slot('header') |
25 | .l-card.l-card--flush | 25 | .l-media.l-media--flush |
26 | .l-card__block.l-card__block--main | 26 | .l-media__block.l-media__block--main |
27 | strong= 'Volpeon' | 27 | strong= 'Volpeon' |
28 | small.u-ml-100= '@volpeon@mk.vulpes.one' | 28 | small.u-ml-100= '@volpeon@mk.vulpes.one' |
29 | small.l-card__block | 29 | small.l-media__block |
30 | = '5 minutes ago' | 30 | = '5 minutes ago' |
31 | +icon('lock')(class='u-ml-100') | 31 | +icon('lock')(class='u-ml-100') |
32 | +slot('body')= 'Full width bubbles test' | 32 | +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 | |||
14 | .c-box.l-overflow(style='resize: vertical') | 14 | .c-box.l-overflow(style='resize: vertical') |
15 | +bubble('Volpeon')(avatar=true) | 15 | +bubble('Volpeon')(avatar=true) |
16 | +slot('header') | 16 | +slot('header') |
17 | .l-card.l-card--flush | 17 | .l-media.l-media--flush |
18 | .l-card__block.l-card__block--main | 18 | .l-media__block.l-media__block--main |
19 | strong= 'Volpeon' | 19 | strong= 'Volpeon' |
20 | small.u-ml-100= '@volpeon@mk.vulpes.one' | 20 | small.u-ml-100= '@volpeon@mk.vulpes.one' |
21 | small.l-card__block | 21 | small.l-media__block |
22 | = '5 minutes ago' | 22 | = '5 minutes ago' |
23 | +icon('lock')(class='u-ml-100') | 23 | +icon('lock')(class='u-ml-100') |
24 | +slot('body') | 24 | +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 | |||
42 | +backdrop | 42 | +backdrop |
43 | +dialog | 43 | +dialog |
44 | +slot('header') | 44 | +slot('header') |
45 | .l-card__block.l-flex | 45 | .l-media__block.l-flex |
46 | +action-button(quiet=true icon='chevron-left') | 46 | +action-button(quiet=true icon='chevron-left') |
47 | +action-button(quiet=true icon='chevron-right') | 47 | +action-button(quiet=true icon='chevron-right') |
48 | .l-card__block.l-card__block--main | 48 | .l-media__block.l-media__block--main |
49 | +div-heading('sm')= 'Tags' | 49 | +div-heading('sm')= 'Tags' |
50 | +slot('sidebar') | 50 | +slot('sidebar') |
51 | +menu(style={ 'min-width': '10em' }) | 51 | +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 | |||
16 | div | 16 | div |
17 | +text-field(placeholder='Just landed in L.A.' class="u-p-50") | 17 | +text-field(placeholder='Just landed in L.A.' class="u-p-50") |
18 | +slot('pre') | 18 | +slot('pre') |
19 | +action-button(quiet=true class='l-card__block')= 'Volpeon' | 19 | +action-button(quiet=true class='l-media__block')= 'Volpeon' |
20 | +divider('vertical')(class='u-ml-50') | 20 | +divider('vertical')(class='u-ml-50') |
21 | +slot('post') | 21 | +slot('post') |
22 | +action-button(quiet=true icon='smile' class='l-card__block') | 22 | +action-button(quiet=true icon='smile' class='l-media__block') |
23 | +action-button(quiet=true icon='send' class='l-card__block') | 23 | +action-button(quiet=true icon='send' class='l-media__block') |