Skip to content

Commit

Permalink
style(chips): update to m3 and better input field
Browse files Browse the repository at this point in the history
  • Loading branch information
@wuda-io
wuda-io committed Oct 9, 2023
1 parent 480a85a commit e8e8c16
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 41 deletions.
2 changes: 1 addition & 1 deletion docs/css/ghpages-materialize.css
View file

Large diffs are not rendered by default.

66 changes: 54 additions & 12 deletions pug/contents/chips_content.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,58 @@
<div class="container">
<div class="row">

<div class="col s12 m8 offset-m1 xl7 offset-xl1">

<div class="s12 m8 offset-m1 xl7 offset-xl1">
<div id="introduction" class="section scrollspy">
<p class="caption">
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
</p>

<div class="chip">
<img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
</div>
<div class="chip">
Tag
<i class="close material-icons">close</i>
</div>
</div>
<div class="chip">
<i class="material-icons">check</i>
Filter
<i class="close material-icons">close</i>
</div>
<div class="chip outlined">Information</div>
<div class="chip outlined">
<i class="material-icons">check</i>
Filter
<i class="close material-icons">close</i>
</div>

<pre style="padding-top: 0px;">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
&lt;div class="chip">
&lt;img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
&lt;/div>
&lt;div class="chip">
Tag
&lt;i class="close material-icons">close&lt;/i>
&lt;/div>
&lt;div class="chip">
&lt;i class="material-icons">check&lt;/i>
Filter
&lt;i class="close material-icons">close&lt;/i>
&lt;/div>
&lt;div class="chip outlined">Information&lt;/div>
&lt;div class="chip outlined">
&lt;i class="material-icons">check&lt;/i>
Filter
&lt;i class="close material-icons">close&lt;/i>
&lt;/div></code>
</pre>

<!-- Update Info -->
<div class="col s12">
<p class="red-text"><strong>ATTENTION:</strong> Data-Format has changed from version 1.X.X to 2.0.0! Please update option 'data'.</p>
</div>

<!-- ### -->

<div id="contact" class="section scrollspy">
<h3 class="header">Contacts</h3>
<p class="caption">
Expand All @@ -29,18 +61,20 @@ <h3 class="header">Contacts</h3>
<img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
</div>
</p>

<pre style="padding-top: 0px;">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
&lt;div class="chip">
&lt;img src="images/yuna.jpg" alt="Contact Person">
Jane Doe
&lt;/div>
</code>
&lt;div class="chip">
&lt;img src="images/yuna.jpg" alt="Contact Person">
Jane Doe
&lt;/div></code>
</pre>
</div>

<!-- ### -->

<div id="tag" class="section scrollspy">
<h3 class="header">Tags</h3>
<p class="caption">
Expand All @@ -63,10 +97,18 @@ <h3 class="header">Tags</h3>
</pre>
</div>

<!-- ### -->

<div id="basic" class="section scrollspy">
<h3 class="header">Javascript Plugin</h4>
<p class="caption">To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by
using your delete button.</p>

<!-- Update Info -->
<div class="s12">
<p class="red-text"><strong>ATTENTION:</strong> Data-Format has changed from version 1.X.X to 2.0.0! Please update option 'data'.</p>
</div>

<div class="chips"></div>

<p class="caption">Set initial tags.</p>
Expand Down
103 changes: 75 additions & 28 deletions sass/components/_chips.scss
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,87 @@
.chip {
--font-size: 14px;
--font-size-icon: 18px;
--padding: 8px;

background-color: $chip-bg-color;

display: inline-flex;
white-space: nowrap;
gap: 8px;

margin: 0;
height: 32px;

padding-left: var(--padding);
padding-right: var(--padding);

font-size: var(--font-size);
font-weight: 500;
color: $chip-font-color;

border-radius: 8px;

align-items: center;
user-select: none;
vertical-align: top;

&:focus {
outline: none;
background-color: $chip-selected-color;
color: $chip-selected-font-color;
}
}

display: inline-block;
height: 32px;
font-size: 13px;
font-weight: 500;
color: $chip-font-color;
line-height: 32px;
padding: 0 12px;
border-radius: 16px;
background-color: $chip-bg-color;
margin-bottom: $chip-margin;
margin-right: $chip-margin;
.chip.outlined {
background-color: transparent;
border-color: var(--md-sys-color-outline);
border-width: 1px;
border-style: solid;
}

> img {
float: left;
margin: 0 8px 0 -12px;
height: 32px;
width: 32px;
border-radius: 50%;
}
.chip > img {
margin: 0;
width: 24px;
height: 24px;
object-fit: cover;
border-radius: 12px;
}

.close {
cursor: pointer;
float: right;
font-size: 16px;
line-height: 32px;
padding-left: 8px;
}
.chip > .material-icons {
font-size: var(--font-size-icon);
@extend .on-surface-variant-text;
}

.chip .close {
border-radius: 50%;
height: 24px;
width: 24px;
padding: 0;
display: grid;
justify-content: center;
align-content: center;
cursor: pointer;
}

.chip .close:hover {
background-color: #8888;
}

//--------------------------

.chips {
display: flex;
gap: 4px;
flex-wrap: wrap;

border: none;
border-bottom: 1px solid $chip-border-color;
box-shadow: none;
margin: $input-margin;
min-height: 45px;

padding: 4px;
// min-height: 45px;

outline: none;
transition: all .3s;

Expand All @@ -58,13 +100,18 @@
color: $input-color;
display: inline-block;
font-size: $input-font-size;
height: $input-height;
line-height: 32px;

// height: 32px;
// height: $input-height;
// line-height: 32px;
height: 32px;

outline: 0;
margin: 0;
padding: 0;
width: 120px;


&:focus {
border: 0;
box-shadow: none;
Expand Down

0 comments on commit e8e8c16

Please sign in to comment.