+ chip docs for density

djibe · Jan 11, 2020 · 4c51aa2 · 4c51aa2
1 parent e922272
commit 4c51aa2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/assets/scss/variables/_variable-material.scss b/assets/scss/variables/_variable-material.scss
@@ -79,12 +79,11 @@ $card-padding-y:              $card-padding-x !default;
 // Based on https://material.io/components/chips/
 
 $chip-bg:                     $material-color-grey-300 !default;
-$chip-bg-hover:               rgba($black, $overlay-focus-colored-opacity) !default; // cfcfcf
-$chip-bg-active:              rgba($black, $overlay-pressed-colored-opacity) !default; // b3b3b3
+$chip-bg-hover:               rgba($black, $overlay-focus-colored-opacity) !default;
+$chip-bg-active:              rgba($black, $overlay-pressed-colored-opacity) !default;
 $chip-outline-bg-hover:       rgba($black, $overlay-hover-white-opacity) !default;
 $chip-outline-bg-active:      rgba($black, $overlay-pressed-white-opacity) !default;
 $chip-color:                  $black-primary !default;
-//$chip-elevation-shadow-hover: map-get($elevation-shadows, 2) !default;
 $chip-font-size:              0.875rem !default;
 $chip-font-weight:            $font-weight-regular !default;
 $chip-height:                 2rem !default;

diff --git a/docs/4.4/material/chips.md b/docs/4.4/material/chips.md
@@ -12,6 +12,7 @@ Chips can be used for various types of entities, including brief information, fr
 
 <div class="list-group my-lg-5">
     <a href="https://material.io/components/chips/" target="_blank" class="list-group-item list-group-item-action lgi-icon-md">Material Design guidelines: Chips</a>
+    <a href="https://material.io/design/layout/applying-density.html" target="_blank" class="list-group-item list-group-item-action lgi-icon-md">Material Design guidelines: Applying density</a>
     <a href="https://material-components.github.io/material-components-web-catalog/#/component/chips" target="_blank" class="list-group-item list-group-item-action lgi-icon-mdc">Material Components for the web: Chips</a>
 </div>
 
@@ -176,3 +177,19 @@ And in their outline variant.
 <a class="chip chip-action chip-outline disabled" href="#"><i class="material-icons">sync_disabled</i> Disabled</a>
 {% endcapture %}
 {% include example.html content=example %}
+
+## Sizing and density
+
+More dense chips are avilable to reflect the Comfortable and Compact ones from Material design guidelines.
+Use `.chip-sm` for Comfortable chips and `.chip-xs` for Compact ones.
+
+{% capture example %}
+<button class="chip chip-action chip-sm" type="button"><i class='material-icons'>wb_sunny</i> Turn on lights</button>
+
+<button class="chip chip-action chip-outline chip-sm" type="button"><i class="material-icons">alarm</i>Set alarm</button>
+
+<a class="chip chip-action chip-xs" href="#"><i class="material-icons">music_note</i>Play music</a>
+
+<a class="chip chip-action chip-outline chip-xs" href="#"><i class="material-icons">directions</i>Get directions</a>
+{% endcapture %}
+{% include example.html content=example %}