mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-06 13:56:27 +02:00
Housekeeping for card module
Split card module into main and mixins file
This commit is contained in:
Angelos Chalaris
@@ -902,3 +902,4 @@
|
||||
- *TODO* Make class naming rules more consistent in module defaults - meaning add all class naming defaults to the very top of all modules, saving time and space when simplified flavors kick in.
|
||||
- Updated `table` module's definitions and variables, added **hidden flag** `$include-striped-table` in order to make sure `.striped` `table`s can be turned on and off.
|
||||
- Cleanup of relevant variables and comments in flavor files.
|
||||
- Updated `card` module, splitting into main file and mixins, cleanup in flavor files for the module.
|
||||
|
||||
@@ -327,41 +327,40 @@ $table-striped-alt-body-back-color: #eeeeee; // Alternate background color fo
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal biew will be included in a class defined by
|
||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #9e9e9e; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 2px 10px 20px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #9e9e9e; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 2px 10px 20px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
|
||||
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||
$card-style1-fore-color: #fafafa; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #424242; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style: // Border style for card style 1 sections
|
||||
1px solid #616161;
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color:#e0e0e0; // Background color for card section style 1
|
||||
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||
$card-section-style2-back-color:#bdbdbd; // Background color for card section style 2
|
||||
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
|
||||
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||
$card-style1-fore-color: #fafafa; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #424242; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #616161;// Border style for card style 1 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||
$card-section-style2-back-color:#bdbdbd; // Background color for card section style 2
|
||||
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
|
||||
@@ -322,41 +322,40 @@ $table-striped-alt-body-back-color: #ece4ff; // Alternate background color fo
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #f2d7d8; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #9b898a; // Border style for cards
|
||||
$card-border-radius: 2px; // Border radius for cards
|
||||
$card-margin: 4px 10px 22px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #9b898a; // Border style for cards
|
||||
$card-border-radius: 2px; // Border radius for cards
|
||||
$card-margin: 4px 10px 22px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #c7b0b1; // Border style for card sections
|
||||
$card-section-padding: 8px 10px; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||
$card-style1-fore-color: #fffddc; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #190f1a; // Border style for card style 1
|
||||
$card-style1-border-radius: 2px; // Border radius for card style 1
|
||||
$card-style1-section-border-style: // Border style for card style 1 sections
|
||||
1px solid #493e4b;
|
||||
$card-section-style1-name: 'light'; // Class name for card section style 1
|
||||
$card-section-style1-back-color:#f6e5e6; // Background color for card section style 1
|
||||
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'lighter'; // Class name for card section style 2
|
||||
$card-section-style2-back-color:#fbf4f4; // Background color for card section style 2
|
||||
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 12px 14px; // Padding for card section padding style 1
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #c7b0b1; // Border style for card sections
|
||||
$card-section-padding: 8px 10px; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||
$card-style1-fore-color: #fffddc; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #190f1a; // Border style for card style 1
|
||||
$card-style1-border-radius: 2px; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #493e4b;// Border style for card style 1 sections
|
||||
$card-section-style1-name: 'light'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #f6e5e6; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'lighter'; // Class name for card section style 2
|
||||
$card-section-style2-back-color: #fbf4f4; // Background color for card section style 2
|
||||
$card-section-style2-fore-color: $fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded';// Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 12px 14px; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
/*
|
||||
Definitions for cards and containers.
|
||||
*/
|
||||
// Check the `_card_mixins.scss` file to find this module's mixins.
|
||||
@import 'card_mixins';
|
||||
// Dependency: This module depends heavily on the grid system module.
|
||||
$card-name: 'card' !default; // Class name for the cards
|
||||
$card-section-name: 'section' !default; // Class name for the cards' sections
|
||||
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent)
|
||||
$card-normal-width: 320px !default; // Width for normal cards
|
||||
// Card styling
|
||||
$card-name: 'card' !default; // Class name for the cards
|
||||
$card-section-name: 'section' !default; // Class name for the cards' sections
|
||||
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent)
|
||||
$card-normal-width: 320px !default; // Width for normal cards
|
||||
.#{$card-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
@@ -17,11 +19,11 @@ $card-normal-width: 320px !default; // Width for normal cards
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// Actual styling for the cards
|
||||
@@ -76,89 +78,3 @@ $card-normal-width: 320px !default; // Width for normal cards
|
||||
max-width: $card-normal-width;
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sizes.
|
||||
// Variables:
|
||||
// - $card-alt-size-name : The name of the class used for the alternate size card.
|
||||
// - $card-alt-size-width : The width of the alternate size card.
|
||||
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
|
||||
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media (min-width: #{$card-alt-size-width}) {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate cards (card color variants).
|
||||
// Variables:
|
||||
// - $card-alt-name : The name of the class used for the alternate card.
|
||||
// - $card-alt-back-color : The background color of the alternate card.
|
||||
// - $card-alt-fore-color : The text color of the alternate card.
|
||||
// - $card-alt-border-style : (Optional) The border style of the alternate card. Defaults to the value
|
||||
// of $card-border-style.
|
||||
// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
|
||||
// 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,
|
||||
$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} {
|
||||
@if $card-alt-back-color != $card-back-color {
|
||||
background: $card-alt-back-color;
|
||||
}
|
||||
@if $card-alt-fore-color != $card-fore-color {
|
||||
color: $card-alt-fore-color;
|
||||
}
|
||||
@if $card-alt-border-style != $card-border-style {
|
||||
border: $card-alt-border-style;
|
||||
}
|
||||
@if $card-alt-border-radius != $card-border-radius {
|
||||
border-radius: $card-alt-border-radius;
|
||||
}
|
||||
@if $card-alt-section-border-style != $card-section-border-style{
|
||||
& > .#{$card-section-name} {
|
||||
border-bottom: $card-alt-section-border-style;
|
||||
}
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section color variants).
|
||||
// Variables:
|
||||
// - $card-section-alt-name : The name of the class used for the alternate card section.
|
||||
// - $card-section-alt-back-color : The background 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
|
||||
// the value of $card-section-border-style.
|
||||
@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 {
|
||||
background: $card-section-alt-back-color;
|
||||
}
|
||||
@if $card-section-alt-fore-color != $card-fore-color {
|
||||
color: $card-section-alt-fore-color;
|
||||
}
|
||||
@if $card-section-alt-border-style != $card-section-border-style {
|
||||
border: $card-section-alt-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section padding variants).
|
||||
// Variables:
|
||||
// - $card-section-alt-name : The name of the class used for the alternate card section.
|
||||
// - $card-section-alt-padding : The padding of the alternate card section.
|
||||
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
padding: $card-section-alt-padding;
|
||||
}
|
||||
}
|
||||
|
||||
88
src/mini/_card_mixins.scss
Normal file
88
src/mini/_card_mixins.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
// Card module's mixin definitions are here. For the module itself
|
||||
// check `_card.scss`.
|
||||
// Mixin for alternate card sizes.
|
||||
// Variables:
|
||||
// - $card-alt-size-name : The name of the class used for the alternate size card.
|
||||
// - $card-alt-size-width : The width of the alternate size card.
|
||||
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
|
||||
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media (min-width: #{$card-alt-size-width}) {
|
||||
.#{$card-name}.#{$card-alt-size-name} {
|
||||
max-width: $card-alt-size-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate cards (card color variants).
|
||||
// Variables:
|
||||
// - $card-alt-name : The name of the class used for the alternate card.
|
||||
// - $card-alt-back-color : The background color of the alternate card.
|
||||
// - $card-alt-fore-color : The text color of the alternate card.
|
||||
// - $card-alt-border-style : (Optional) The border style of the alternate card. Defaults to the value
|
||||
// of $card-border-style.
|
||||
// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
|
||||
// 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,
|
||||
$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} {
|
||||
@if $card-alt-back-color != $card-back-color {
|
||||
background: $card-alt-back-color;
|
||||
}
|
||||
@if $card-alt-fore-color != $card-fore-color {
|
||||
color: $card-alt-fore-color;
|
||||
}
|
||||
@if $card-alt-border-style != $card-border-style {
|
||||
border: $card-alt-border-style;
|
||||
}
|
||||
@if $card-alt-border-radius != $card-border-radius {
|
||||
border-radius: $card-alt-border-radius;
|
||||
}
|
||||
@if $card-alt-section-border-style != $card-section-border-style{
|
||||
& > .#{$card-section-name} {
|
||||
border-bottom: $card-alt-section-border-style;
|
||||
}
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section color variants).
|
||||
// Variables:
|
||||
// - $card-section-alt-name : The name of the class used for the alternate card section.
|
||||
// - $card-section-alt-back-color : The background 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
|
||||
// the value of $card-section-border-style.
|
||||
@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 {
|
||||
background: $card-section-alt-back-color;
|
||||
}
|
||||
@if $card-section-alt-fore-color != $card-fore-color {
|
||||
color: $card-section-alt-fore-color;
|
||||
}
|
||||
@if $card-section-alt-border-style != $card-section-border-style {
|
||||
border: $card-section-alt-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section padding variants).
|
||||
// Variables:
|
||||
// - $card-section-alt-name : The name of the class used for the alternate card section.
|
||||
// - $card-section-alt-padding : The padding of the alternate card section.
|
||||
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
padding: $card-section-alt-padding;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user