Commit 52e1215d authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add icon slot in button to allow icon position and margin

parent d30d5273
Pipeline #2024 passed with stage
in 1 minute and 6 seconds
......@@ -21,7 +21,7 @@ export class Button {
render() {
return (<button class={this.className()} disabled={this.disabled} type={this.type}>
<slot/>
<slot name="icon" /> <slot/>
</button>);
}
}
......@@ -7,76 +7,80 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
}
button {
background-color: neos-color($colors-dark, 'neutral');
border: 0;
color: neos-color($colors-dark, 'neutral', 'contrast');
::slotted(neos-icon) {
margin-right: $content-margin-small;
}
padding: 0 $content-padding;
margin: 0;
button {
background-color: neos-color($colors-dark, 'neutral');
border: 0;
color: neos-color($colors-dark, 'neutral', 'contrast');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
padding: 0 $content-padding;
margin: 0;
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
&.t-clean {
background-color: neos-color($colors-dark, 'success');
&.t-clean {
background-color: neos-color($colors-dark, 'success');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'success', 'shade');
}
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'success', 'shade');
}
}
&.t-brand {
background-color: neos-color($colors-dark, 'primary');
&.t-brand {
background-color: neos-color($colors-dark, 'primary');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
}
&.t-lighter {
background-color: neos-color($colors-dark, 'secondary');
&.t-lighter {
background-color: neos-color($colors-dark, 'secondary');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'secondary', 'shade');
}
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'secondary', 'shade');
}
}
&.t-transparent {
background-color: transparent;
&.t-transparent {
background-color: transparent;
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
}
&.t-warn {
background-color: neos-color($colors-dark, 'warning');
&.t-warn {
background-color: neos-color($colors-dark, 'warning');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'warning', 'shade');
}
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'warning', 'shade');
}
}
&.l-squared {
display: flex;
align-items: center;
justify-content: center;
height: $grid-unit;
width: $grid-unit;
}
&.l-squared {
display: flex;
align-items: center;
justify-content: center;
height: $grid-unit;
width: $grid-unit;
}
&[disabled] {
cursor: not-allowed;
opacity: .65;
}
&[disabled] {
cursor: not-allowed;
opacity: .65;
}
}
......@@ -93,19 +93,24 @@
<h2>with icon</h2>
</header>
<neos-button>
<neos-icon name="folder"></neos-icon> Confirm
<neos-icon name="folder" slot="icon"></neos-icon>
Confirm
</neos-button>
<neos-button theme="clean">
<neos-icon name="check-circle"></neos-icon> Publish
<neos-icon name="check-circle" slot="icon"></neos-icon>
Publish
</neos-button>
<neos-button theme="brand">
<neos-icon name="calendar"></neos-icon> Did you love Neos?
<neos-icon name="heart" slot="icon"></neos-icon>
Did you love Neos?
</neos-button>
<neos-button theme="warn">
<neos-icon name="folder"></neos-icon> Delete
<neos-icon name="folder" slot="icon"></neos-icon>
Delete
</neos-button>
<neos-button theme="warn" disabled>
<neos-icon name="frown"></neos-icon> Delete
<neos-icon name="frown" slot="icon"></neos-icon>
Delete
</neos-button>
</section>
<section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment