From 95897a62d2f5b6ab2861aebd636b9a30c4a8cc49 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 30 Mar 2017 16:23:50 +0300 Subject: [PATCH] Housekeeping for card module Split card module into main and mixins file --- docs/v2/DEVLOG.md | 1 + src/flavors/mini-default.scss | 65 +++++++++++----------- src/flavors/mini-sucroa.scss | 65 +++++++++++----------- src/mini/_card.scss | 102 +++------------------------------- src/mini/_card_mixins.scss | 88 +++++++++++++++++++++++++++++ 5 files changed, 162 insertions(+), 159 deletions(-) create mode 100644 src/mini/_card_mixins.scss diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index bae4e63..bdd1b76 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -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. diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index c4d31a7..bf24a63 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -327,41 +327,40 @@ $table-striped-alt-body-back-color: #eeeeee; // Alternate background color fo // [2] - If $include-horizontal-table is `true`, then the 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 diff --git a/src/flavors/mini-sucroa.scss b/src/flavors/mini-sucroa.scss index 41384da..3da1323 100644 --- a/src/flavors/mini-sucroa.scss +++ b/src/flavors/mini-sucroa.scss @@ -322,41 +322,40 @@ $table-striped-alt-body-back-color: #ece4ff; // Alternate background color fo // [2] - If $include-horizontal-table is `true`, then the
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 diff --git a/src/mini/_card.scss b/src/mini/_card.scss index ea90594..752f55c 100644 --- a/src/mini/_card.scss +++ b/src/mini/_card.scss @@ -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; - } -} diff --git a/src/mini/_card_mixins.scss b/src/mini/_card_mixins.scss new file mode 100644 index 0000000..f7a4bb4 --- /dev/null +++ b/src/mini/_card_mixins.scss @@ -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; + } +}