Skip to content

Commit

Permalink
feat(input): remove inline style inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Oct 11, 2022
1 parent 56302bc commit 1d06525
Show file tree
Hide file tree
Showing 21 changed files with 47 additions and 428 deletions.
2 changes: 1 addition & 1 deletion .gitattributes
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
* text=auto
* text=LF
4 changes: 2 additions & 2 deletions kitchen-sink/core/pages/autocomplete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<div class="list no-hairlines-md">
<div class="block-header">Simple Dropdown Autocomplete</div>
<ul>
<li class="item-content item-input inline-label">
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Fruit</div>
<div class="item-input-wrap">
Expand All @@ -46,7 +46,7 @@
<div class="list no-hairlines-md">
<div class="block-header">Dropdown With Input Expand</div>
<ul>
<li class="item-content item-input inline-label">
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Fruit</div>
<div class="item-input-wrap">
Expand Down
140 changes: 2 additions & 138 deletions kitchen-sink/core/pages/inputs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,143 +12,6 @@
</div>
</div>
<div class="page-content">
<div class="block-title">Full Layout / Inline Labels</div>
<div class="list inline-labels no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Name</div>
<div class="item-input-wrap">
<input type="text" placeholder="Your name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" placeholder="Your password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">E-mail</div>
<div class="item-input-wrap">
<input type="email" placeholder="Your e-mail">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">URL</div>
<div class="item-input-wrap">
<input type="url" placeholder="URL">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Phone</div>
<div class="item-input-wrap">
<input type="tel" placeholder="Your phone number">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Gender</div>
<div class="item-input-wrap input-dropdown-wrap">
<select placeholder="Please choose...">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Birthday</div>
<div class="item-input-wrap">
<input type="date" value="2014-04-30" placeholder="Please choose...">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Date time</div>
<div class="item-input-wrap">
<input type="datetime-local" placeholder="Please choose...">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Range</div>
<div class="item-input-wrap">
<div class="range-slider range-slider-init" data-label="true">
<input type="range" value="50" min="0" max="100" step="1">
</div>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Textarea</div>
<div class="item-input-wrap">
<textarea placeholder="Bio"></textarea>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon demo-list-icon"></i>
</div>
<div class="item-inner">
<div class="item-title item-label">Resizable</div>
<div class="item-input-wrap">
<textarea class="resizable" placeholder="Bio"></textarea>
</div>
</div>
</li>
</ul>
</div>

<div class="block-title">Full Layout / Stacked Labels</div>
<div class="list no-hairlines-md">
<ul>
Expand Down Expand Up @@ -504,7 +367,8 @@
<div class="item-inner">
<div class="item-title item-label">Number</div>
<div class="item-input-wrap">
<input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!">
<input type="text" placeholder="Enter number" required validate pattern="[0-9]*"
data-error-message="Only numbers please!">
<span class="input-clear-button"></span>
<div class="item-input-info">With custom error message</div>
</div>
Expand Down
9 changes: 1 addition & 8 deletions kitchen-sink/react/src/pages/autocomplete.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,20 +419,13 @@ export default () => {
</Block>
<List noHairlinesMd>
<BlockHeader>Simple Dropdown Autocomplete</BlockHeader>
<ListInput
label="Fruit"
inlineLabel
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown"
/>
<ListInput label="Fruit" type="text" placeholder="Fruit" inputId="autocomplete-dropdown" />
</List>

<List noHairlinesMd>
<BlockHeader>Dropdown With Input Expand</BlockHeader>
<ListInput
label="Fruit"
inlineLabel
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown-expand"
Expand Down
54 changes: 0 additions & 54 deletions kitchen-sink/react/src/pages/inputs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,60 +4,6 @@ import { Navbar, Page, BlockTitle, List, Icon, ListInput, Range } from 'framewor
export default () => (
<Page>
<Navbar title="Form Inputs" backLink="Back" />
<BlockTitle>Full Layout / Inline Labels</BlockTitle>
<List inlineLabels noHairlinesMd>
<ListInput label="Name" type="text" placeholder="Your name" clearButton>
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="Password" type="password" placeholder="Your password" clearButton>
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="E-mail" type="email" placeholder="Your e-mail" clearButton>
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="URL" type="url" placeholder="URL" clearButton>
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="Phone" type="tel" placeholder="Your phone number" clearButton>
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="Gender" type="select" defaultValue="Male" placeholder="Please choose...">
<Icon icon="demo-list-icon" slot="media" />
<option value="Male">Male</option>
<option value="Female">Female</option>
</ListInput>

<ListInput
label="Birthday"
type="date"
defaultValue="2014-04-30"
placeholder="Please choose..."
>
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="Date time" type="datetime-local" placeholder="Please choose...">
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="Range" input={false}>
<Icon icon="demo-list-icon" slot="media" />
<Range slot="input" value={50} min={0} max={100} step={1} />
</ListInput>

<ListInput label="Textarea" type="textarea" placeholder="Bio">
<Icon icon="demo-list-icon" slot="media" />
</ListInput>

<ListInput label="Resizable" type="textarea" resizable placeholder="Bio">
<Icon icon="demo-list-icon" slot="media" />
</ListInput>
</List>

<BlockTitle>Full Layout / Stacked Labels</BlockTitle>
<List noHairlinesMd>
Expand Down
23 changes: 11 additions & 12 deletions kitchen-sink/svelte/src/pages/autocomplete.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,22 +420,17 @@
</Block>
<List noHairlinesMd>
<div class="block-header" slot="before-list">Simple Dropdown Autocomplete</div>
<ListInput
label="Fruit"
inlineLabel
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown" />
<ListInput label="Fruit" type="text" placeholder="Fruit" inputId="autocomplete-dropdown" />
</List>

<List noHairlinesMd>
<div class="block-header" slot="before-list">Dropdown With Input Expand</div>
<ListInput
label="Fruit"
inlineLabel
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown-expand" />
inputId="autocomplete-dropdown-expand"
/>
</List>
<List noHairlinesMd>
<div class="block-header" slot="before-list">Dropdown With All Values</div>
Expand All @@ -447,31 +442,35 @@
label="Fruit"
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown-placeholder" />
inputId="autocomplete-dropdown-placeholder"
/>
</List>
<List noHairlinesMd>
<div class="block-header" slot="before-list">Dropdown With Typeahead</div>
<ListInput
label="Fruit"
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown-typeahead" />
inputId="autocomplete-dropdown-typeahead"
/>
</List>
<List noHairlinesMd>
<div class="block-header" slot="before-list">Dropdown With Ajax-Data</div>
<ListInput
label="Language"
type="text"
placeholder="Language"
inputId="autocomplete-dropdown-ajax" />
inputId="autocomplete-dropdown-ajax"
/>
</List>
<List noHairlinesMd>
<div class="block-header" slot="before-list">Dropdown With Ajax-Data + Typeahead</div>
<ListInput
label="Language"
type="text"
placeholder="Language"
inputId="autocomplete-dropdown-ajax-typeahead" />
inputId="autocomplete-dropdown-ajax-typeahead"
/>
</List>
<BlockTitle>Standalone Autocomplete</BlockTitle>
<Block>
Expand Down
Loading

0 comments on commit 1d06525

Please sign in to comment.