Skip to content

Commit

Permalink
Merge pull request #86 from bindable-ui/l-box-borders
Browse files Browse the repository at this point in the history 
L box borders
  • Loading branch information
@lukelarsen
lukelarsen authored Dec 14, 2020
2 parents 5dbf1db + c000501 commit 1a9401f
Show file tree
Hide file tree
Showing 18 changed files with 259 additions and 69 deletions.
2 changes: 1 addition & 1 deletion dev-app/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<c-nav-horizontal-item
position="right"
href="https://github.com/bindable-ui/bindable"
title="v1.7.3"
title="v1.7.4"
></c-nav-horizontal-item>
</c-nav-horizontal>
</l-box>
Expand Down
142 changes: 96 additions & 46 deletions dev-app/routes/elements/media-object/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,52 +27,102 @@
<l-stack spacing="var(--s-3)">
<c-h3>Example</c-h3>
<c-code-sample>
<e-media-object
background="var(--c_soot)"
media-width="200px"
media-height="100px"
media-background="var(--c_black)"
left-gutter="var(--s1)"
right-gutter="var(--s1)"
padding-sides="var(--s-4)"
padding-ends="var(--s-4)"
pill-text="Pill Text"
pill-color="var(--c_subTwoMain)"
>
<div slot="media">
<img
src="https://picsum.photos/200/100"
alt="Alt"
>
</div>
<div slot="content">
<l-stack spacing="var(--s-5)">
<c-h3>Some Text</c-h3>
<c-form-checkbox-radio-container>
<c-form-checkbox id="first">First</c-form-checkbox>
</c-form-checkbox-radio-container>
</l-stack>
</div>
<div slot="right">
<c-tip
side="left"
size="large"
icon-tip.bind="true"
>
<div slot="trigger">
<l-icon
icon="cog"
spacing="0"
></l-icon>
</div>
<div slot="content">
<c-p color="var(--c_white)">
Top Tip Content that is really long and it will not wrap.
</c-p>
</div>
</c-tip>
</div>
</e-media-object>
<l-stack>
<e-media-object
background="var(--c_soot)"
border-left="solid 3px var(--c_primaryMain)"
media-width="200px"
media-height="100px"
media-background="var(--c_black)"
left-gutter="var(--s1)"
right-gutter="var(--s1)"
padding-sides="var(--s-4)"
padding-ends="var(--s-4)"
pill-text="Pill Text"
pill-color="var(--c_subTwoMain)"
>
<div slot="media">
<img
src="https://picsum.photos/200/100"
alt="Alt"
>
</div>
<div slot="content">
<l-stack spacing="var(--s-5)">
<c-h3>Some Text</c-h3>
<c-form-checkbox-radio-container>
<c-form-checkbox id="first">First</c-form-checkbox>
</c-form-checkbox-radio-container>
</l-stack>
</div>
<div slot="right">
<c-tip
side="left"
size="large"
icon-tip.bind="true"
>
<div slot="trigger">
<l-icon
icon="cog"
spacing="0"
></l-icon>
</div>
<div slot="content">
<c-p color="var(--c_white)">
Top Tip Content that is really long and it will not wrap.
</c-p>
</div>
</c-tip>
</div>
</e-media-object>
<e-media-object
background="var(--c_soot)"
border="solid 1px var(--c_primaryMain)"
media-width="200px"
media-height="100px"
media-background="var(--c_black)"
left-gutter="var(--s1)"
right-gutter="var(--s1)"
padding-sides="var(--s-4)"
padding-ends="var(--s-4)"
pill-text="Pill Text"
pill-color="var(--c_secondaryMain)"
>
<div slot="media">
<img
src="https://picsum.photos/200/100"
alt="Alt"
>
</div>
<div slot="content">
<l-stack spacing="var(--s-5)">
<c-h3>Some Text</c-h3>
<c-form-checkbox-radio-container>
<c-form-checkbox id="first">First</c-form-checkbox>
</c-form-checkbox-radio-container>
</l-stack>
</div>
<div slot="right">
<c-tip
side="left"
size="large"
icon-tip.bind="true"
>
<div slot="trigger">
<l-icon
icon="cog"
spacing="0"
></l-icon>
</div>
<div slot="content">
<c-p color="var(--c_white)">
Top Tip Content that is really long and it will not wrap.
</c-p>
</div>
</c-tip>
</div>
</e-media-object>
</l-stack>
</c-code-sample>
</l-stack>
</div>
Expand Down
29 changes: 29 additions & 0 deletions dev-app/routes/elements/media-object/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,35 @@ export class MediaObject {
name: 'background',
value: 'CSS color',
},
{
default: 'unset',
description: 'Set if you want a border on the top of the media-object.',
name: 'border-top',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the right of the media-object.',
name: 'border-right',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the bottom of the media-object.',
name: 'border-bottom',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the left of the media-object.',
name: 'border-left',
value: '<border-style> <border-width> <border-color>',
},
{
description: 'Set if you want a border on all sides of the media-object.',
name: 'border',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'true',
description:
Expand Down
7 changes: 5 additions & 2 deletions dev-app/routes/layouts/box-link/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

<div>
<l-stack spacing="var(--s-3)">
<c-h3>background, background-hover, color, &amp; border-top</c-h3>
<c-h3>background, background-hover, color, &amp; border</c-h3>
<c-code-sample>
<l-stack>
<l-box-link background="white" color="black">
Expand All @@ -47,9 +47,12 @@
<l-box-link>
<span>I am in a transparent box</span>
</l-box-link>
<l-box-link background="var(--c_darkGray)" border-top="var(--c_primaryMain)">
<l-box-link background="var(--c_darkGray)" border-top="solid 2px var(--c_primaryMain)">
<span>I am in a top border box</span>
</l-box-link>
<l-box-link background="var(--c_darkGray)" border="solid 2px var(--c_primaryMain)">
<span>I am in a full border box</span>
</l-box-link>
</l-stack>
</c-code-sample>
</l-stack>
Expand Down
34 changes: 29 additions & 5 deletions dev-app/routes/layouts/box-link/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,33 @@ export class BoxLinkProperties {
value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
},
{
default: 'unset',
description: 'Set if you want a border on the top of the box.',
name: 'border-top',
value: 'Any color',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the right of the box.',
name: 'border-right',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the bottom of the box.',
name: 'border-bottom',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the left of the box.',
name: 'border-left',
value: '<border-style> <border-width> <border-color>',
},
{
description: 'Set if you want a border on all sides of the box.',
name: 'border',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
Expand All @@ -69,28 +93,28 @@ export class BoxLinkProperties {
description: 'Set the left and right margin of the box.',
name: 'margin-sides',
value: 'Any length value (1rem, 15px).' +
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
},
{
default: '0px',
description: 'Set the top and bottom margin of the box.',
name: 'margin-ends',
value: 'Any length value (1rem, 15px).' +
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
},
{
default: 'var(--s1)',
description: 'Set the left and right padding of the box.',
name: 'padding-sides',
value: 'Any length value (1rem, 15px).' +
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
},
{
default: 'var(--s0)',
description: 'Set the top and bottom padding of the box. Leave blank for not padding.',
name: 'padding-ends',
value: 'Any length value (1rem, 15px).' +
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
' It is advised that you use the Core Scale Properties. ex: var(--s1).',
},
{
default: 'false',
Expand Down
8 changes: 5 additions & 3 deletions dev-app/routes/layouts/box/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

<div>
<l-stack spacing="var(--s-3)">
<c-h3>background, color, &amp; border-top</c-h3>
<c-h3>background, color, &amp; border</c-h3>
<c-code-sample>
<l-stack>
<l-box background="white" color="black">
Expand All @@ -44,10 +44,12 @@
<l-box>
<span>I am in a transparent box</span>
</l-box>

<l-box background="var(--c_darkGray)" border-top="var(--c_primaryMain)">
<l-box background="var(--c_darkGray)" border-top="solid 2px var(--c_primaryMain)">
<span>I am in a top border box</span>
</l-box>
<l-box background="var(--c_darkGray)" border="solid 2px var(--c_primaryMain)">
<span>I am in a full border box</span>
</l-box>
</l-stack>
</c-code-sample>
</l-stack>
Expand Down
26 changes: 25 additions & 1 deletion dev-app/routes/layouts/box/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,33 @@ export class BoxProperties {
value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
},
{
default: 'unset',
description: 'Set if you want a border on the top of the box.',
name: 'border-top',
value: 'Any color',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the right of the box.',
name: 'border-right',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the bottom of the box.',
name: 'border-bottom',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
description: 'Set if you want a border on the left of the box.',
name: 'border-left',
value: '<border-style> <border-width> <border-color>',
},
{
description: 'Set if you want a border on all sides of the box.',
name: 'border',
value: '<border-style> <border-width> <border-color>',
},
{
default: 'unset',
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@bindable-ui/bindable",
"description": "An Aurelia component library",
"version": "1.7.3",
"version": "1.7.4",
"repository": {
"type": "git",
"url": "https://github.com/bindable-ui/bindable"
Expand Down
5 changes: 5 additions & 0 deletions src/elements/media-object/e-media-object/e-media-object.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
background="${background}"
padding-ends="${paddingEnds}"
padding-sides="${paddingSides}"
border-top="${borderTop}"
border-right="${borderRight}"
border-bottom="${borderBottom}"
border-left="${borderLeft}"
border="${border}"
>
<l-cover
row.bind="true"
Expand Down
10 changes: 10 additions & 0 deletions src/elements/media-object/e-media-object/e-media-object.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@ export class EMediaObject {
@bindable
public background: string = 'var(--c_slate)';
@bindable
public borderTop: string = 'unset';
@bindable
public borderRight: string = 'unset';
@bindable
public borderBottom: string = 'unset';
@bindable
public borderLeft: string = 'unset';
@bindable
public border: string;
@bindable
public center: boolean = true;
@bindable
public mediaWidth: string = 'unset';
Expand Down
Loading

0 comments on commit 1a9401f

Please sign in to comment.