Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(image-list): Add corner radius mixin #2385

Merged
merged 2 commits into from
Mar 13, 2018
Merged

feat(image-list): Add corner radius mixin #2385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7dca51d
feat(image-list): Add corner radius mixin
Mar 12, 2018
318beb6
Merge branch 'master' into feat/image-list/radius
kfranqueiro Mar 13, 2018
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
40 changes: 31 additions & 9 deletions demos/image-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,17 +118,35 @@
</section>

<section class="example">
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
<div dir="ltr">
<div>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
</div>
</div>
<div>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-radius" aria-labelledby="toggle-radius-label" />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="toggle-radius" id="toggle-radius-label">Toggle Rounded Corners</label>
</div>
</div>
<label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
</div>

<h1 class="mdc-typography--headline">Standard Image List</h1>
Expand Down Expand Up @@ -304,6 +322,10 @@ <h1 class="mdc-typography--headline">Standard Image List</h1>
document.body.setAttribute('dir', this.checked ? 'rtl' : 'ltr');
});

document.getElementById('toggle-radius').addEventListener('change', function() {
document.querySelector('.example').classList[this.checked ? 'add' : 'remove']('rounded-corners');
});

var standardImageListEl = document.getElementById('standard-image-list');

document.getElementById('standard-label-below').addEventListener('change', function() {
Expand Down
4 changes: 4 additions & 0 deletions demos/image-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@
display: none;
}

.rounded-corners {
@include mdc-image-list-corner-radius(8px);
}

@media (max-width: 599px) {
.mdc-image-list.standard-image-list {
@include mdc-image-list-standard-columns(3);
Expand Down
1 change: 1 addition & 0 deletions packages/mdc-image-list/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ CSS Class | Description
Mixin | Description
--- | ---
`mdc-image-list-aspect($width-height-ratio)` | Styles the aspect container elements within an Image List to conform to the given ratio, where 1 is 1:1, greater than 1 is wider, and less than 1 is taller.
`mdc-image-list-corner-radius($radius)` | Styles the image and supporting content elements within an Image List to have rounded corners with the given radius.
`mdc-image-list-standard-columns($column-count, $gutter-size)` | Styles a Standard Image List to display the given number of columns. `$gutter-size` is optional and overrides the default amount of space between items.

### Additional Information
Expand Down
10 changes: 10 additions & 0 deletions packages/mdc-image-list/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,16 @@
}
}

@mixin mdc-image-list-corner-radius($radius) {
.mdc-image-list__image {
border-radius: $radius;
}

.mdc-image-list__supporting {
border-radius: 0 0 $radius $radius;
}
}

// Standard Image List

@mixin mdc-image-list-standard-columns($column-count, $gutter-size: $mdc-image-list-standard-gutter-size) {
Expand Down