Skip to content

Commit

Permalink
fix(card): Add bottom margin for 3x media in horizontal blocks (#207)
Browse files Browse the repository at this point in the history
  • Loading branch information
amsheehan committed Jan 26, 2017
1 parent 65b05bf commit 2151bd4
Showing 1 changed file with 30 additions and 29 deletions.
59 changes: 30 additions & 29 deletions packages/mdc-card/mdc-card.scss
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
/**
* Copyright 2016 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
//
// Copyright 2016 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import "@material/elevation/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";

/* postcss-bem-linter: define card */
// postcss-bem-linter: define card
.mdc-card {
@include mdc-elevation(2);

Expand All @@ -31,12 +31,12 @@
&__primary {
padding: 16px;

/* Add extra space before large title. */
// Add extra space before large title.
.mdc-card__title--large {
padding-top: 8px;
}

/* Add extra padding if this is the last block. */
// Add extra padding if this is the last block.
&:last-child {
padding-bottom: 24px;
}
Expand All @@ -53,13 +53,13 @@
@include mdc-theme-prop(color, text-primary-on-dark);
}

/* Remove top padding if immediately preceded by a primary block. */
// Remove top padding if immediately preceded by a primary block.
.mdc-card__primary + & {
margin-top: -8px;
padding-top: 0;
}

/* Add extra padding if this is the last block. */
// Add extra padding if this is the last block.
&:last-child {
padding-bottom: 24px;
}
Expand All @@ -70,12 +70,12 @@
padding: 8px;
box-sizing: border-box;

/* Adjust text color for dark theme. */
// Adjust text color for dark theme.
@include mdc-theme-dark(".mdc-card") {
@include mdc-theme-prop(color, text-primary-on-dark);
}

/* Tweak button paddings and margins when they're used as actions */
// Tweak button paddings and margins when they're used as actions
.mdc-card__action {
margin: 0 8px 0 0;
}
Expand All @@ -84,7 +84,7 @@
margin-right: 0;
}

/* Vertical actions (one per line) */
// Vertical actions (one per line)
&--vertical {
flex-flow: column;
align-items: flex-start;
Expand Down Expand Up @@ -127,12 +127,12 @@
@include mdc-typography(body2);
@include mdc-theme-prop(color, text-primary-on-background);

/* Adjust text color for dark theme. */
// Adjust text color for dark theme.
@include mdc-theme-dark(".mdc-card") {
@include mdc-theme-prop(color, text-primary-on-dark);
}

margin: -.063rem 0; /* -1sp 0 */
margin: -.063rem 0; // -1sp 0
}

&__title--large {
Expand All @@ -145,12 +145,12 @@
@include mdc-typography(body1);
@include mdc-theme-prop(color, text-primary-on-background);

/* Adjust text color for dark theme. */
// Adjust text color for dark theme.
@include mdc-theme-dark(".mdc-card") {
@include mdc-theme-prop(color, text-primary-on-dark);
}

margin: -.063rem 0; /* -1sp 0 */
margin: -.063rem 0; // -1sp 0
}

&__horizontal-block {
Expand All @@ -170,10 +170,11 @@
margin-left: 16px;
}

&:last-child .mdc-card__media-item {
// postcss-bem-linter: ignore
.mdc-card__media-item--3x {
margin-bottom: 16px;
}
}
}

/* postcss-bem-linter: end */
// postcss-bem-linter: end

0 comments on commit 2151bd4

Please sign in to comment.