Skip to content

Commit

Permalink
chore(list): remove dark theme (#2082)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: renamed divider sass vars

`$mdc-list-divider-color-light` to `$mdc-list-divider-color-on-light-bg`,
`$mdc-list-divider-color-dark` to `$mdc-list-divider-color-on-dark-bg`
  • Loading branch information
Matty Goo authored Jan 30, 2018
1 parent 118364e commit a2c1bd0
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 293 deletions.
244 changes: 0 additions & 244 deletions demos/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,14 +217,6 @@ <h3>Text only (dense)</h3>
<li class="mdc-list-item">Single-line item</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Text Only (dark)</h3>
<ul class="mdc-list demo-list">
<li class="mdc-list-item">Single-line item</li>
<li class="mdc-list-item">Single-line item</li>
<li class="mdc-list-item">Single-line item</li>
</ul>
</section>
<section>
<h3>Graphic</h3>
<aside><p><em>Note: The grey background is styled using demo placeholder styles</em></p></aside>
Expand Down Expand Up @@ -283,29 +275,6 @@ <h3>Graphic Example - Icon with Text</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Graphic Example - Icon with Text (Dark)</h3>
<ul class="mdc-list demo-list">
<li class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
network_wifi
</i>
Wi-Fi
</li>
<li class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
bluetooth
</i>
Bluetooth
</li>
<li class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
data_usage
</i>
Data Usage
</li>
</ul>
</section>
<section>
<h3>Avatar List</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
Expand Down Expand Up @@ -363,29 +332,6 @@ <h3>Example - Avatar with Text</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Example - Avatar with Text (Dark)</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars">
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal1.svg"
width="56" height="56" alt="Panda">
Panda
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal2.svg"
width="56" height="56" alt="Sloth">
Sloth
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal3.svg"
width="56" height="56" alt="Brown Bear">
Brown Bear
</li>
</ul>
</section>
<section>
<h3>Metadata</h3>
<ul class="mdc-list demo-list">
Expand Down Expand Up @@ -498,44 +444,6 @@ <h3>Example - Avatar with Text and Icon</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Example - Avatar with Text and Icon (Dark)</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--avatar-and-meta-icon">
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal3.svg"
width="56" height="56" alt="Brown Bear">
Brown Bear
<a class="mdc-list-item__meta material-icons" href="#"
aria-label="Remove from favorites" title="Remove from favorites"
onclick="event.preventDefault();">
favorite
</a>
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal1.svg"
width="56" height="56" alt="Panda">
Panda
<a class="mdc-list-item__meta material-icons" href="#"
aria-label="Add to favorites" title="Add to favorites"
onclick="event.preventDefault();">
favorite_border
</a>
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal2.svg"
width="56" height="56" alt="Sloth">
Sloth
<a class="mdc-list-item__meta material-icons" href="#"
aria-label="Add to favorites" title="Add to favorites"
onclick="event.preventDefault();">
favorite_border
</a>
</li>
</ul>
</section>
</section>
<section>
<h2>Two-Line List</h2>
Expand Down Expand Up @@ -788,53 +696,6 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Example - Two-line Avatar + Text + Icon (Dark)</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Photos
<span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Recipes
<span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Work
<span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
</ul>
</section>
<section>
<h3>Lists w/ Ellipsis</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
Expand Down Expand Up @@ -1037,88 +898,6 @@ <h3 class="mdc-list-group__subheader">Files</h3>
</ul>
</div>
</section>
<section class="mdc-theme--dark">
<h3>Example - Two-Line Lists, Avatars, Metadata, Inset Dividers (Dark)</h3>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Folders</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Photos
<span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Recipes
<span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Work
<span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
</ul>
<hr class="mdc-list-divider mdc-list-divider--inset mdc-list-divider--padded">
<h3 class="mdc-list-group__subheader">Files</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">insert_drive_file</i>
</span>
<span class="mdc-list-item__text">
Vacation Itinerary
<span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">insert_drive_file</i>
</span>
<span class="mdc-list-item__text">
Kitchen Remodel
<span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
</ul>
</div>
</section>
</section>
<section>
<h2>Interactive Lists (with ink ripple)</h2>
Expand All @@ -1145,29 +924,6 @@ <h3>Example - Interactive List</h3>
</a>
</nav>
</section>
<section class="mdc-theme--dark">
<h3>Example - Interactive List (Dark Theme)</h3>
<nav class="mdc-list demo-list" data-demo-interactive-list>
<a href="#" class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
network_wifi
</i>
Wi-Fi
</a>
<a href="#" class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
bluetooth
</i>
Bluetooth
</a>
<a href="#" class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
data_usage
</i>
Data Usage
</a>
</nav>
</section>
</section>
</div>
</main>
Expand Down
21 changes: 1 addition & 20 deletions demos/list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,14 @@ a.material-icons {
max-width: 600px;
}

.mdc-theme--dark {
background: #303030;
}

.mdc-theme--dark > h3 {
color: white;
}

.demo-list--icon-placeholders,
.demo-list--with-avatars {
@include mdc-list-item-graphic-ink-color(white);
@include mdc-list-item-graphic-fill-color(text-icon-on-background);

@include mdc-theme-dark {
@include mdc-list-item-graphic-ink-color(#303030);
@include mdc-list-item-graphic-fill-color(text-icon-on-dark);
}
}

.demo-list--avatar-and-meta-icon {
@include mdc-list-item-meta-ink-color($material-color-pink-a200);

@include mdc-theme-dark {
@include mdc-list-item-meta-ink-color($material-color-pink-a200);
}
}

.demo-list-group--custom,
Expand Down Expand Up @@ -87,9 +70,7 @@ a.material-icons {
border: 1px solid rgba(0, 0, 0, 0.1);
}

#demo-wrapper .mdc-list-group .mdc-list,
#demo-wrapper .mdc-theme--dark .mdc-list,
#demo-wrapper .mdc-theme--dark .mdc-list-group {
#demo-wrapper .mdc-list-group .mdc-list {
border: none;
}

Expand Down
5 changes: 2 additions & 3 deletions packages/mdc-list/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

$mdc-list-divider-color-light: rgba(0, 0, 0, .12) !default;
$mdc-list-divider-color-dark: rgba(255, 255, 255, .2) !default;

$mdc-list-divider-color-on-light-bg: rgba(0, 0, 0, .12) !default;
$mdc-list-divider-color-on-dark-bg: rgba(255, 255, 255, .2) !default;
$mdc-list-side-padding: 16px;
$mdc-list-text-offset: 72px;
Loading

0 comments on commit a2c1bd0

Please sign in to comment.