Card section button fix

This commit is contained in:
Angelos Chalaris 2017-02-02 19:51:31 +02:00
parent 4b03e32ad5
commit 88b9414d7c
4 changed files with 11 additions and 10 deletions

View file

@ -1205,8 +1205,8 @@ table.striped tr:nth-of-type(2n) > td {
@media (max-width: 767px) {
table.striped:not(.preset) tr:nth-of-type(2n) {
background: #eeeeee; } }
/*
Definitions for cards and containers.
/*
Definitions for cards and containers.
*/
.card {
display: -webkit-box;
@ -1238,7 +1238,7 @@ table.striped tr:nth-of-type(2n) > td {
padding: 0;
-o-object-fit: cover;
object-fit: cover; }
.card > button.section, .card .button.section, .card input.section {
.card > button.section, .card .button.section, .card [role="button"].section, .card input.section {
border-radius: 0; }
.card > .section:last-child {
border-bottom: 0; }

File diff suppressed because one or more lines are too long

View file

@ -813,3 +813,4 @@
## 20170202
- Added `[role="button"]` selector for elements inside `header`, did not remove any other selectors from component as specifity would be too low if changed.
- Updated `.card.section` to work properly with `[role="button"]` elements.

View file

@ -1,5 +1,5 @@
/*
Definitions for cards and containers.
/*
Definitions for cards and containers.
*/
// Dependency: This module depends heavily on the grid system module.
// Card styling
@ -60,7 +60,7 @@ $card-normal-width: 320px !default; // Width for normal cards
}
}
// Card input and button sections
& > button, .#{$button-class-name}, input {
& > button, .#{$button-class-name}, [role="button"], input {
&.#{$card-section-name} {
border-radius: 0; // Clean button and input gaps from border-radius
}
@ -106,7 +106,7 @@ $card-normal-width: 320px !default; // Width for normal cards
// of $card-border-radius.
// - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
// the value of $card-section-border-style.
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
$card-alt-section-border-style : $card-section-border-style) {
.#{$card-name}.#{$card-alt-name} {
@ -139,7 +139,7 @@ $card-normal-width: 320px !default; // Width for normal cards
// - $card-section-alt-fore-color : The text color of the alternate card section.
// - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
// the value of $card-section-border-style.
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
@ -161,4 +161,4 @@ $card-normal-width: 320px !default; // Width for normal cards
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
}
}