mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-08 06:46:29 +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.
- 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.

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

@@ -352,11 +352,10 @@ $card-style1-back-color: $fore-color; // Background color for card styl
$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-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-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

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

@@ -347,15 +347,14 @@ $card-style1-back-color: $fore-color; // Background color for card styl
$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-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-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-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.

90
src/mini/_card.scss
View File

@@ -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 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 styling
.#{$card-name} {
// Old syntax
display: -webkit-box;
@@ -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
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;
}
}