1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 02:50:26 +02:00

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

File diff suppressed because one or more lines are too long

View File

@@ -813,3 +813,4 @@
## 20170202 ## 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. - 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. // Dependency: This module depends heavily on the grid system module.
// Card styling // Card styling
@@ -60,7 +60,7 @@ $card-normal-width: 320px !default; // Width for normal cards
} }
} }
// Card input and button sections // Card input and button sections
& > button, .#{$button-class-name}, input { & > button, .#{$button-class-name}, [role="button"], input {
&.#{$card-section-name} { &.#{$card-section-name} {
border-radius: 0; // Clean button and input gaps from border-radius 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. // of $card-border-radius.
// - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to // - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
// the value of $card-section-border-style. // 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-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
$card-alt-section-border-style : $card-section-border-style) { $card-alt-section-border-style : $card-section-border-style) {
.#{$card-name}.#{$card-alt-name} { .#{$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-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 // - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
// the value of $card-section-border-style. // 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-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color { @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} { .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding; padding: $card-section-alt-padding;
} }
} }