mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-08 14:56:28 +02:00
Code Issues Releases Wiki Activity

Housekeeping for card module

Browse Source 
Split card module into main and mixins file
This commit is contained in:
Angelos Chalaris
2017-03-30 16:23:50 +03:00
parent 61f06f209f
commit 95897a62d2
5 changed files with 162 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View File

@@ -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. - *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. - 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. - 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.

65
src/flavors/mini-default.scss
View File

@@ -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 // [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. // $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
// Variables for cards [1] // 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-back-color: #fafafa; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards $card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #9e9e9e; // Border style for cards $card-border-style: 1px solid #9e9e9e; // Border style for cards
$card-border-radius: 0; // Border radius for cards $card-border-radius: 0; // Border radius for cards
$card-margin: 2px 10px 20px; // Margin for cards $card-margin: 2px 10px 20px; // Margin for cards
$card-box-shadow: // Box shadow 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); 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-name: 'section'; // Class name for card sections
$card-section-border-style: 1px solid #bdbdbd; // Border style 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-padding: 6px 8px 6px; // Padding for card sections
$card-section-media-name: 'media'; // Class name for card media sections $card-section-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions $card-section-media-height: 200px; // Height for card media setions
$card-normal-width: 320px; // Width for normal cards $card-normal-width: 320px; // Width for normal cards
$card-size1-name: 'large'; // Class name for large cards $card-size1-name: 'large'; // Class name for large cards
$card-size1-width: 480px; // Width for large cards $card-size1-width: 480px; // Width for large cards
$card-size2-name: 'small'; // Class name for small cards $card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards $card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards $card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards $card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name for card style 1 $card-style1-name: 'inverse'; // Class name for card style 1
$card-style1-back-color: $fore-color; // Background color 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-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-style: 1px solid #424242; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius 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 $card-style1-section-border-style:1px solid #616161;// 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-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-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-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-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-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-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-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-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
// Notes: // Notes:
// [1] - The cards module depends heavily on the grid system module. // [1] - The cards module depends heavily on the grid system module.
// Variables for tabs // Variables for tabs

65
src/flavors/mini-sucroa.scss
View File

@@ -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 // [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. // $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
// Variables for cards [1] // 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-back-color: #f2d7d8; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards $card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #9b898a; // Border style for cards $card-border-style: 1px solid #9b898a; // Border style for cards
$card-border-radius: 2px; // Border radius for cards $card-border-radius: 2px; // Border radius for cards
$card-margin: 4px 10px 22px; // Margin for cards $card-margin: 4px 10px 22px; // Margin for cards
$card-box-shadow: // Box shadow 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); 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-name: 'section'; // Class name for card sections
$card-section-border-style: 1px solid #c7b0b1; // Border style 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-padding: 8px 10px; // Padding for card sections
$card-section-media-name: 'media'; // Class name for card media sections $card-section-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions $card-section-media-height: 200px; // Height for card media setions
$card-normal-width: 320px; // Width for normal cards $card-normal-width: 320px; // Width for normal cards
$card-size1-name: 'large'; // Class name for large cards $card-size1-name: 'large'; // Class name for large cards
$card-size1-width: 480px; // Width for large cards $card-size1-width: 480px; // Width for large cards
$card-size2-name: 'small'; // Class name for small cards $card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards $card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards $card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards $card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name for card style 1 $card-style1-name: 'inverse'; // Class name for card style 1
$card-style1-back-color: $fore-color; // Background color 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-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-style: 1px solid #190f1a; // Border style for card style 1
$card-style1-border-radius: 2px; // Border radius 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 $card-style1-section-border-style:1px solid #493e4b;// 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-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-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-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-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-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-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-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-padding1-padding: 12px 14px; // Padding for card section padding style 1
// Notes: // Notes:
// [1] - The cards module depends heavily on the grid system module. // [1] - The cards module depends heavily on the grid system module.
// Variables for tabs // Variables for tabs

102
src/mini/_card.scss
View File

@@ -1,12 +1,14 @@
/* /*
Definitions for cards and containers. 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. // 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 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} { .#{$card-name} {
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
@@ -17,11 +19,11 @@ $card-normal-width: 320px !default; // Width for normal cards
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
-webkit-align-self: center; -webkit-align-self: center;
align-self: center; align-self: center;
position: relative; position: relative;
width: 100%; width: 100%;
// Actual styling for the cards // Actual styling for the cards
@@ -76,89 +78,3 @@ $card-normal-width: 320px !default; // Width for normal cards
max-width: $card-normal-width; 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
View 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;
}
}