Skip to content

Input with icons #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thiagothimoteo merged 11 commits into from
Jun 9, 2020
Merged

Input with icons #123

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bd18394
Add is leading icon and is trailing icon mixins
thiagothimoteo May 5, 2020
225e226
Add mixin to input negative variation
thiagothimoteo May 5, 2020
81e0421
Add size variation to input mixin
thiagothimoteo May 5, 2020
5653388
Add icons variation to input
thiagothimoteo May 5, 2020
90a0a56
Improve disabled input style
thiagothimoteo May 5, 2020
cba4a88
Improve icons variation on buttons
thiagothimoteo May 5, 2020
bcba30b
Improve icon variations on menu
thiagothimoteo May 5, 2020
2d858ce
Rename has-icon and has-iconRight classes to has-leadingIcon and has-…
thiagothimoteo May 5, 2020
7a54398
Merge branch 'alpha' of github.com:myfreecomm/chameleon into feature/…
thiagothimoteo May 5, 2020
affe11b
Build dist files
thiagothimoteo May 5, 2020
1950b7a
Merge branch 'alpha' of github.com:myfreecomm/chameleon into feature/…
thiagothimoteo Jun 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
317 changes: 242 additions & 75 deletions dist/chameleon.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/chamleon.min.css
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions examples/components/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,31 +55,31 @@

<br><br>

<a href="#" class="ch-button has-icon">
<a href="#" class="ch-button has-leadingIcon">
<i class="ch-icon fal fa-file"></i>
Action
</a>
<a href="#" class="ch-button has-iconRight">
<a href="#" class="ch-button has-trailingIcon">
Action
<i class="ch-icon fal fa-file"></i>
</a>
<a href="#" class="ch-button has-icon has-iconRight">
<a href="#" class="ch-button has-leadingIcon has-trailingIcon">
<i class="ch-icon fal fa-file"></i>
Action
<i class="ch-icon fal fa-file"></i>
</a>

<br><br>

<a href="#" class="ch-button ch-button--small has-icon">
<a href="#" class="ch-button ch-button--small has-leadingIcon">
<i class="ch-icon fal fa-file"></i>
Action
</a>
<a href="#" class="ch-button ch-button--small has-iconRight">
<a href="#" class="ch-button ch-button--small has-trailingIcon">
Action
<i class="ch-icon fal fa-file"></i>
</a>
<a href="#" class="ch-button ch-button--small has-icon has-iconRight">
<a href="#" class="ch-button ch-button--small has-leadingIcon has-trailingIcon">
<i class="ch-icon fal fa-file"></i>
Action
<i class="ch-icon fal fa-file"></i>
Expand Down
6 changes: 3 additions & 3 deletions examples/components/dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@
<div class="ch-overlay">
<div class="ch-card ch-paddingless">
<ul class="ch-menu">
<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Option 1</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-table"></i>
<span class="ch-menu-item-label">Option 2</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-magic"></i>
<span class="ch-menu-item-label">Option 3</span>
</li>
Expand Down
58 changes: 51 additions & 7 deletions examples/components/input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,57 @@
<div class="ch-template">
<main class="ch-template-content">

<input type="text" placeholder="Inser data" class="ch-input">
<input type="text" placeholder="Inser data" class="ch-input" readonly>
<input type="text" placeholder="Inser data" class="ch-input" disabled>
<input type="text" placeholder="Inser data" class="ch-input ch-input--negative">
<input type="text" placeholder="Inser data" class="ch-input ch-input--negative" disabled>
<input type="text" placeholder="Inser data" class="ch-input ch-input--small">
<input type="text" placeholder="Inser data" class="ch-input ch-input--fluid">
<input type="text" placeholder="Insert data" class="ch-input">
<input type="text" placeholder="Insert data" class="ch-input" readonly>
<input type="text" placeholder="Insert data" class="ch-input" disabled>
<input type="text" placeholder="Insert data" class="ch-input ch-input--negative">
<input type="text" placeholder="Insert data" class="ch-input ch-input--negative" disabled>
<input type="text" placeholder="Insert data" class="ch-input ch-input--small">
<input type="text" placeholder="Insert data" class="ch-input ch-input--fluid">

<br />
<br />

<div class="ch-input has-leadingIcon">
<i class="ch-icon fal fa-search"></i>
<input type="text" placeholder="Insert data">
</div>

<div class="ch-input has-leadingIcon has-trailingIcon">
<i class="ch-icon fal fa-search"></i>
<input type="text" placeholder="Insert data">
<i class="ch-spinner"></i>
</div>

<div class="ch-input ch-input--negative has-trailingIcon">
<input type="text" placeholder="Insert data">
<i class="ch-icon fal fa-exclamation-circle"></i>
</div>

<div class="ch-input has-leadingIcon has-trailingIcon">
<i class="ch-icon fal fa-search"></i>
<input type="text" placeholder="Insert data" readonly>
</div>

<div class="ch-input has-leadingIcon has-trailingIcon is-disabled">
<i class="ch-icon fal fa-search"></i>
<input type="text" placeholder="Insert data" disabled>
</div>

<div class="ch-input ch-input--small has-leadingIcon">
<i class="ch-icon fal fa-file"></i>
<input type="text" placeholder="Insert data">
</div>

<div class="ch-input ch-input--small has-trailingIcon">
<input type="text" placeholder="Insert data">
<i class="ch-spinner"></i>
</div>

<div class="ch-input ch-input--fluid has-leadingIcon">
<i class="ch-icon fal fa-search"></i>
<input type="text" placeholder="Insert data">
</div>

</main>
</div>
Expand Down
8 changes: 4 additions & 4 deletions examples/components/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@
</nav>

<nav class="ch-menu">
<a class="ch-menu-item has-icon is-active" href="#">
<a class="ch-menu-item has-leadingIcon is-active" href="#">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Option 1</span>
</a>

<a class="ch-menu-item has-icon" href="#">
<a class="ch-menu-item has-leadingIcon" href="#">
<i class="ch-icon fal fa-table"></i>
<span class="ch-menu-item-label">Option 2</span>
</a>

<a class="ch-menu-item has-icon" href="#">
<a class="ch-menu-item has-leadingIcon" href="#">
<i class="ch-icon fal fa-magic"></i>
<span class="ch-menu-item-label">Option 3</span>
</a>
Expand All @@ -42,7 +42,7 @@
<a class="ch-menu-item" href="#">Option 2</a>

<div class="ch-menu-submenu is-open">
<button type="button" class="ch-menu-item has-iconRight">
<button type="button" class="ch-menu-item has-trailingIcon">
<span class="ch-menu-item-label">Option 3</span>
<i class="ch-icon ch-menu-item-arrow fal fa-angle-right"></i>
</button>
Expand Down
10 changes: 5 additions & 5 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h1 class="ch-brand-name">Chameleon</h1>
<!-- MENU BEGIN -->
<ul class="ch-menu">
<li class="ch-menu-submenu is-open">
<a href="#" class="ch-menu-item has-icon has-iconRight is-active">
<a href="#" class="ch-menu-item has-leadingIcon has-trailingIcon is-active">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 1</span>
<i class="ch-menu-item-arrow ch-icon fal fa-angle-right"></i>
Expand All @@ -50,22 +50,22 @@ <h1 class="ch-brand-name">Chameleon</h1>
</ul>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-table"></i>
<span class="ch-menu-item-label">Item 3</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-magic"></i>
<span class="ch-menu-item-label">Item 4</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-clipboard"></i>
<span class="ch-menu-item-label">Item 5</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 6</span>
</li>
Expand Down
2 changes: 1 addition & 1 deletion examples/layouts/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ <h4 class="ch-title ch-title--4">Informações tributárias</h4>
</div>

<div class="ch-form-actions">
<button type="button" class="ch-button has-icon ch-button--outline">
<button type="button" class="ch-button has-leadingIcon ch-button--outline">
<i class="ch-icon fal fa-arrow-left"></i>
Voltar
</button>
Expand Down
12 changes: 6 additions & 6 deletions examples/layouts/navigation-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h1 class="ch-brand-name">Chameleon</h1>
<!-- MENU BEGIN -->
<ul class="ch-menu">
<li class="ch-menu-submenu is-open">
<a href="#" class="ch-menu-item has-icon has-iconRight is-active">
<a href="#" class="ch-menu-item has-leadingIcon has-trailingIcon is-active">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 1</span>
<i class="ch-menu-item-arrow ch-icon fal fa-angle-right"></i>
Expand All @@ -50,22 +50,22 @@ <h1 class="ch-brand-name">Chameleon</h1>
</ul>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-table"></i>
<span class="ch-menu-item-label">Item 3</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-magic"></i>
<span class="ch-menu-item-label">Item 4</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-clipboard"></i>
<span class="ch-menu-item-label">Item 5</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 6</span>
</li>
Expand Down Expand Up @@ -259,7 +259,7 @@ <h1 class="ch-brand-name">Chameleon</h1>
<footer class="ch-navigationPage-actions">
<button class="ch-button ch-button--outline">Secondary</button>
<button class="ch-button ch-button--primary ch-button--outline">Secondary</button>
<button class="ch-button ch-button--primary has-iconRight">
<button class="ch-button ch-button--primary has-trailingIcon">
<i class="ch-icon fal fa-angle-right"></i>
Primary
</button>
Expand Down
24 changes: 12 additions & 12 deletions examples/layouts/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h1 class="ch-brand-name">Chameleon</h1>
<!-- MENU BEGIN -->
<ul class="ch-menu">
<li class="ch-menu-submenu is-open">
<a href="#" class="ch-menu-item has-icon has-iconRight is-active">
<a href="#" class="ch-menu-item has-leadingIcon has-trailingIcon is-active">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 1</span>
<i class="ch-menu-item-arrow ch-icon fal fa-angle-right"></i>
Expand All @@ -50,22 +50,22 @@ <h1 class="ch-brand-name">Chameleon</h1>
</ul>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-table"></i>
<span class="ch-menu-item-label">Item 3</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-magic"></i>
<span class="ch-menu-item-label">Item 4</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-clipboard"></i>
<span class="ch-menu-item-label">Item 5</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 6</span>
</li>
Expand Down Expand Up @@ -156,31 +156,31 @@ <h1 class="ch-brand-name">Chameleon</h1>
<button type="button" class="ch-menu-item is-active">
<span class="ch-menu-item-label">Empresa 1</span>
</button>

<button type="button" class="ch-menu-item">
<span class="ch-menu-item-label">Empresa 2</span>
</button>

<button type="button" class="ch-menu-item">
<span class="ch-menu-item-label">Empresa 3</span>
</button>

<button type="button" class="ch-menu-item">
<span class="ch-menu-item-label">Empresa 4</span>
</button>

<button type="button" class="ch-menu-item">
<span class="ch-menu-item-label">Empresa 5</span>
</button>

<button type="button" class="ch-menu-item">
<span class="ch-menu-item-label">Empresa 6</span>
</button>

<button type="button" class="ch-menu-item">
<span class="ch-menu-item-label">Empresa 7</span>
</button>

<button type="button" class="ch-menu-item">
<span class="ch-menu-item-label">Empresa 8</span>
</button>
Expand Down
10 changes: 5 additions & 5 deletions examples/layouts/template/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h1 class="ch-brand-name">Chameleon</h1>
<!-- MENU BEGIN -->
<ul class="ch-menu">
<li class="ch-menu-submenu is-open">
<a href="#" class="ch-menu-item has-icon has-iconRight is-active">
<a href="#" class="ch-menu-item has-leadingIcon has-trailingIcon is-active">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 1</span>
<i class="ch-menu-item-arrow ch-icon fal fa-angle-right"></i>
Expand All @@ -50,22 +50,22 @@ <h1 class="ch-brand-name">Chameleon</h1>
</ul>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-table"></i>
<span class="ch-menu-item-label">Item 3</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-magic"></i>
<span class="ch-menu-item-label">Item 4</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-clipboard"></i>
<span class="ch-menu-item-label">Item 5</span>
</li>

<li class="ch-menu-item has-icon">
<li class="ch-menu-item has-leadingIcon">
<i class="ch-icon fal fa-chart-line"></i>
<span class="ch-menu-item-label">Item 6</span>
</li>
Expand Down
2 changes: 2 additions & 0 deletions scss/abstracts/icon/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
@import './function-get-icon-size';
@import './mixin-has-icon';
@import './mixin-mask-icon';
@import './mixin-is-leading-icon';
@import './mixin-is-trailing-icon';
18 changes: 6 additions & 12 deletions scss/abstracts/icon/mixin-has-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,19 @@
padding-right: #{$padding} !important;

> .ch-icon:last-child,
> .ch-toggle-icon {
position: absolute;
top: 50%;
left: auto;
right: calc((#{$padding}) / 2);
transform: translate(50%, -50%);
> .ch-toggle-icon,
> .ch-spinner:last-child {
@include ch-is-trailing-icon;
}
}

@else if ($type == left) {
padding-left: #{$padding} !important;

> .ch-icon:first-child,
> .ch-toggle-icon {
position: absolute;
top: 50%;
left: calc((#{$padding}) / 2);
right: auto;
transform: translate(-50%, -50%);
> .ch-toggle-icon,
> .ch-spinner:first-child {
@include ch-is-leading-icon;
}
}
}
Loading