Commit dfa3792d authored by Dominique Feyer's avatar Dominique Feyer

TASK: Fix some polyfil issue and code cleanup

parent 78458976
Pipeline #2041 failed with stage
in 55 seconds
......@@ -7,80 +7,81 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
}
::slotted(neos-icon) {
margin-right: $content-margin-small;
}
button {
background-color: neos-color($colors-dark, 'neutral');
border: 0;
color: neos-color($colors-dark, 'neutral', 'contrast');
padding: 0 $content-padding;
margin: 0;
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
::slotted(neos-icon) {
margin-right: $content-margin-small;
}
&.t-clean {
background-color: neos-color($colors-dark, 'success');
button {
background-color: neos-color($colors-dark, 'neutral');
border: 0;
color: neos-color($colors-dark, 'neutral', 'contrast');
padding: 0 $content-padding;
margin: 0;
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'success', 'shade');
background-color: neos-color($colors-dark, 'primary', 'shade');
}
}
&.t-brand {
background-color: neos-color($colors-dark, 'primary');
&.t-clean {
background-color: neos-color($colors-dark, 'success');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'success', 'shade');
}
}
}
&.t-lighter {
background-color: neos-color($colors-dark, 'secondary');
&.t-brand {
background-color: neos-color($colors-dark, 'primary');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'secondary', 'shade');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
}
}
&.t-transparent {
background-color: transparent;
&.t-lighter {
background-color: neos-color($colors-dark, 'secondary');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'secondary', 'shade');
}
}
}
&.t-warn {
background-color: neos-color($colors-dark, 'warning');
&.t-transparent {
background-color: transparent;
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'warning', 'shade');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
}
}
&.l-squared {
display: flex;
align-items: center;
justify-content: center;
height: $grid-unit;
width: $grid-unit;
}
&.t-warn {
background-color: neos-color($colors-dark, 'warning');
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'warning', 'shade');
}
}
&[disabled] {
cursor: not-allowed;
opacity: .65;
&.l-squared {
display: flex;
align-items: center;
justify-content: center;
height: $grid-unit;
width: $grid-unit;
}
&[disabled] {
cursor: not-allowed;
opacity: .65;
}
}
}
......@@ -7,31 +7,33 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
}
.dropdown-item {
display: flex;
background-color: $background-dark-color;
border: 0;
outline: 1px solid neos-color($colors-dark, 'darker');
box-sizing: content-box;
color: inherit;
padding: 0 0 0 $content-padding;
text-decoration: none;
&:hover {
background-color: neos-color($colors-dark, 'primary');
.dropdown-item {
display: flex;
background-color: $background-dark-color;
border: 0;
outline: 1px solid neos-color($colors-dark, 'darker');
box-sizing: content-box;
color: inherit;
padding: 0 0 0 $content-padding;
text-decoration: none;
&:hover {
background-color: neos-color($colors-dark, 'primary');
}
}
}
.icon {
margin-right: .65em;
}
.icon {
margin-right: .65em;
}
.toggle {
margin-left: auto;
}
.toggle {
margin-left: auto;
}
.selected-value {
.selected-value {
}
}
......@@ -4,14 +4,15 @@
@include font-smoothing();
display: block;
}
.dropdown-item {
flex: 1;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
.dropdown-item {
flex: 1;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
transition: all ease-in 50ms;
}
transition: all ease-in 50ms;
}
......@@ -38,24 +38,25 @@ export class Dropdown {
return (
<div>
<neos-form-input-wrapper label={this.label}>
<slot name="metadata"/>
</neos-form-input-wrapper>
<div class={this.wrapperClassName()}>
<a href="#" class="dropdown" onClick={(e) => this.toggle(e)}>
<div class="icon">
<neos-icon name="file"/>
</div>
<div class="selected-label">{this.activeLabel ? this.activeLabel : this.placeholder}</div>
<div class="toggle">
<neos-button squared theme="transparent">
<neos-icon name="chevron-down" type="solid"></neos-icon>
</neos-button>
<slot name="metadata" slot="metadata"/>
<slot name="before" slot="before"/>
<div className={this.wrapperClassName()}>
<a href="#" className="dropdown" onClick={(e) => this.toggle(e)}>
<div className="icon">
<neos-icon name="file"/>
</div>
<div className="selected-label">{this.activeLabel ? this.activeLabel : this.placeholder}</div>
<div className="toggle">
<neos-button squared theme="transparent">
<neos-icon name="chevron-down" type="solid"></neos-icon>
</neos-button>
</div>
</a>
<div className="dropdown-list">
<slot/>
</div>
</a>
<div class="dropdown-list">
<slot />
</div>
</div>
</neos-form-input-wrapper>
</div>
);
}
......
......@@ -7,52 +7,53 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
}
.dropdown-wrapper {
position: relative;
&--open {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
.dropdown-list {
.dropdown-wrapper {
position: relative;
&--open {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
max-height: 350px;
.dropdown-list {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
max-height: 350px;
}
}
}
}
.dropdown {
display: flex;
background-color: $background-dark-color;
border: 0;
outline: 1px solid neos-color($colors-dark, 'darker');
box-sizing: content-box;
color: inherit;
padding: 0 0 0 $content-padding;
margin: $content-margin-medium 0 $content-margin-small;
text-decoration: none;
}
.dropdown {
display: flex;
background-color: $background-dark-color;
border: 0;
outline: 1px solid neos-color($colors-dark, 'darker');
box-sizing: content-box;
color: inherit;
padding: 0 0 0 $content-padding;
text-decoration: none;
height: $grid-unit;
}
.dropdown-list {
position: absolute;
top: 44px;
left: 0;
right: 0;
z-index: 10;
.dropdown-list {
position: absolute;
top: 44px;
left: 0;
right: 0;
z-index: 10;
transition: max-height 200ms ease-in-out;
max-height: 0;
overflow: hidden;
}
transition: max-height 200ms ease-in-out;
max-height: 0;
overflow: hidden;
}
.icon {
margin-right: .65em;
}
.icon {
margin-right: .65em;
}
.toggle {
margin-left: auto;
}
.toggle {
margin-left: auto;
}
.selected-value {
.selected-value {
}
}
......@@ -4,14 +4,19 @@
@include font-smoothing();
display: block;
}
.dropdown {
flex: 1;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
.dropdown-wrapper {
flex: 1;
}
.dropdown {
flex: 1;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
transition: all ease-in 80ms;
}
transition: all ease-in 80ms;
}
......@@ -22,5 +22,6 @@
display: flex;
align-items: center;
flex: 1 0 100%;
margin-top: $content-margin-medium;
}
}
......@@ -2,9 +2,10 @@
:host {
@include font-smoothing();
}
.label-wrapper {
display: flex;
align-items: flex-end;
.label-wrapper {
display: flex;
align-items: flex-end;
}
}
......@@ -251,7 +251,7 @@ export class FormInput {
<label>
<neos-form-input-wrapper label={this.label}>
<slot name="metadata" slot="metadata"/>
<slot name="before"/>
<slot name="before" slot="before"/>
<input
ref={input => this.nativeInput = input as any}
aria-disabled={this.disabled ? 'true' : false}
......@@ -283,7 +283,7 @@ export class FormInput {
onFocus={this.onFocus.bind(this)}
onKeyDown={this.inputKeydown.bind(this)}
/>
<slot name="after"/>
<slot name="after" slot="after"/>
</neos-form-input-wrapper>
</label>
);
......
......@@ -8,54 +8,54 @@
font-size: $font-size-dark-base;
line-height: 1.1;
margin-bottom: $content-dark-margin;
}
.input ::slotted(neos-icon:first-child) {
margin-right: 4px;
}
.input ::slotted(neos-icon:last-child) {
margin-left: 4px;
}
.input ::slotted(neos-button:first-child) {
margin-right: 4px;
}
.input ::slotted(neos-icon:first-child) {
margin-right: 4px;
}
.input ::slotted(neos-button:last-child) {
margin-left: 4px;
}
.input ::slotted(neos-icon:last-child) {
margin-left: 4px;
}
.metadata ::slotted(neos-badge) {
margin-right: 0;
margin-left: 4px;
}
.input ::slotted(neos-button:first-child) {
margin-right: 4px;
}
input {
background-color: $background-dark-color;
border: 0;
outline: 1px solid transparent;
outline-offset: 0;
box-sizing: content-box;
color: inherit;
padding: 0 $content-padding;
margin: $content-margin-medium 0;
&:focus:enabled,
&:hover:enabled {
outline: 2px solid neos-color($colors-dark, 'primary');
outline-offset: -2px;
.input ::slotted(neos-button:last-child) {
margin-left: 4px;
}
&:focus:enabled {
background-color: neos-color($colors-dark, 'brightest');
color: neos-color($colors-dark, 'brightest', 'contrast');
outline: 2px solid neos-color($colors-dark, 'brightest');
.metadata ::slotted(neos-badge) {
margin-right: 0;
margin-left: 4px;
}
&[disabled] {
cursor: not-allowed;
opacity: .85;
input {
background-color: $background-dark-color;
border: 0;
outline: 1px solid transparent;
outline-offset: 0;
box-sizing: content-box;
color: inherit;
padding: 0 $content-padding;
margin: $content-margin-medium 0;
&:focus:enabled,
&:hover:enabled {
outline: 2px solid neos-color($colors-dark, 'primary');
outline-offset: -2px;
}
&:focus:enabled {
background-color: neos-color($colors-dark, 'brightest');
color: neos-color($colors-dark, 'brightest', 'contrast');
outline: 2px solid neos-color($colors-dark, 'brightest');
}
&[disabled] {
cursor: not-allowed;
opacity: .85;
}
}
}
......@@ -4,20 +4,21 @@
@include font-smoothing();
display: block;
}
input {
flex: 1;
width: 100%;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
input {
flex: 1;
width: 100%;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
margin: 0;
transition: all ease-in 180ms;
}
transition: all ease-in 180ms;
}
.input {
display: flex;
align-items: center;
.input {
display: flex;
align-items: center;
}
}
......@@ -43,8 +43,7 @@
<body style="background-color: #222222; padding: 2rem;">
<p class="disclaimer">This project is experimental and not an official Neos CMS project</p>
<section>
<section role="presentation">
<header>
<h1>neos-form-input</h1>
</header>
......@@ -52,26 +51,44 @@
<neos-form-input label="Canonical title" placeholder="Help editor to fill me..."></neos-form-input>
<neos-form-input label="URI Path Segment" value="nice-title-to-master-your-seo-skills" placeholder="Help editor to fill me..."></neos-form-input>
</section>
<section>
<section role="presentation">
<header>
<h1>neos-form-dropdown</h1>
</header>
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
<section role="presentation">
<header>
<h2>default</h2>
</header>
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
</section>
<section role="presentation">
<header>
<h2>prefixed</h2>
</header>
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-icon squared name="link" type="solid" theme="success" slot="before"></neos-icon>
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
</section>
</section>
<section>
<section role="presentation">
<header>
<h1>neos-badge</h1>
</header>
<section>
<section role="presentation">
<header>
<h2>default</h2>
</header>
......@@ -88,11 +105,11 @@
</section>
</section>
<section>
<section role="presentation">
<header>
<h1>neos-button</h1>
</header>
<section>
<section role="presentation">
<header>
<h2>default</h2>
</header>
......@@ -102,7 +119,7 @@
<neos-button theme="warn">Delete</neos-button>
<neos-button theme="warn" disabled>Delete</neos-button>
</section>
<section>
<section role="presentation">
<header>
<h2>with icon</h2>
</header>
......@@ -127,7 +144,7 @@
Delete
</neos-button>
</section>
<section>
<section role="presentation">
<header>
<h2>squared</h2>
</header>
......@@ -149,7 +166,7 @@
</section>
</section>
<section>
<section role="presentation">
<header>
<h1>neos-icon</h1>
</header>
......@@ -162,7 +179,7 @@
<neos-icon name="edit"></neos-icon>
<neos-icon name="edit" type="solid"></neos-icon>
</section>
<section>
<section role="presentation">
<header>
<h2>squared</h2>
</header>
......@@ -173,11 +190,11 @@
</section>
</section>
<section>
<section role="presentation">
<header>
<h1>neos-toolbar</h1>
</header>
<section>
<section role="presentation">
<header>
<h2>default</h2>
</header>
......@@ -206,7 +223,7 @@
</neos-button>
</neos-toolbar>
</section>
<section>
<section role="presentation">
<header>
<h2>with dark theme</h2>
</header>
......@@ -237,11 +254,11 @@
</section>
</section>
<section>
<section role="presentation">
<header>
<h1>neos-inspector-group</h1>
</header>
<section>
<section role="presentation">
<header>
<h2>default</h2>
</header>
......
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