mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-09 15:26:29 +02:00
Code Issues Releases Wiki Activity

Module restructure - part 2

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-19 20:38:11 +03:00
parent 82e8c17c38
commit 2f2716f82b
4 changed files with 59 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/v2/DEVLOG.md
View File

@@ -101,3 +101,9 @@
- Added flag for `a` `text-decoration:underline` (`$apply-link-underline`) and checks/optimizations for `font-weight`.
- Removed fixes from Normalize about `a` elements, as they were opinionated and unnecessary.
- Added flag for `a` using fancy `:hover` and other focused effects instead of `color` (`$apply-link-hover-fade`).
- Opened issue for module restructure (#14).
- Module restructure based on issue #14 (partial for whatever work was already done):
- Renamed `_base.scss` to `_core.scss` and created folder for submodules (`mini-core`).
- Created `_contextual.scss` for `mark` styling.
- Comments and sections for core.
- Changed import in flavor, imported contextual in core.

2
flavors/v2/mini-default.scss
View File

@@ -100,7 +100,7 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state
// color (`true`/`false`) [8]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
// Enable base
@import '../../scss/v2/base';
@import '../../scss/v2/core';
// Use mixins frm base
@include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color);
@include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color);

50
scss/v2/_base.scss → scss/v2/_core.scss
View File

@@ -314,54 +314,8 @@ a{
//===================================================
// SECTION: External files.
//===================================================
// Default styling for mark. Use mixins for alternate styles.
mark {
background: $mark-back-color;
color: $mark-fore-color;
@if $mark-font-size != 100% {
font-size: $mark-font-size;
}
@if $mark-line-height != $base-line-height {
line-height: $mark-line-height;
}
@if $mark-padding != 0 {
padding: $mark-padding;
}
@if $mark-margin != 0 {
margin: $mark-margin;
}
}
// Mixin for alternate mark (contextual color variants).
// Variables:
// - $mark-alt-name : The name of the class used for the alternate mark.
// - $mark-alt-back-color : The background color of the alternate mark.
// - $mark-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the mark.
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
background: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color {
color: $mark-alt-fore-color;
}
}
}
// Mixin for alternative mark styles (contextual tags).
// Variables:
// - $mark-alt-name : The name of the class used for the alternate mark style.
// - $mark-alt-border-radius : The border-radius of the alternate mark style.
// - $mark-alt-padding : (Optional) The padding of the alternate mark style. Defaults to the padding of the mark.
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-radius, $mark-alt-padding: $mark-padding) {
mark.#{$mark-alt-name} {
display: inline-block;
@if $mark-alt-border-radius != 0 {
border-radius: $mark-alt-border-radius;
}
@if $mark-alt-padding != $mark-padding {
padding: $mark-alt-padding;
}
}
}
// Contextual background elements.
@import 'mini-core/contextual';

50
scss/v2/mini-core/_contextual.scss Normal file
View File

@@ -0,0 +1,50 @@
// Definitions for contextual background elements.
// Contextual background elements use the mark element as their base.
// Default styling for mark. Use mixins for alternate styles.
mark {
background: $mark-back-color;
color: $mark-fore-color;
@if $mark-font-size != 100% {
font-size: $mark-font-size;
}
@if $mark-line-height != $base-line-height {
line-height: $mark-line-height;
}
@if $mark-padding != 0 {
padding: $mark-padding;
}
@if $mark-margin != 0 {
margin: $mark-margin;
}
}
// Mixin for alternate mark (contextual color variants).
// Variables:
// - $mark-alt-name : The name of the class used for the alternate mark.
// - $mark-alt-back-color : The background color of the alternate mark.
// - $mark-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the mark.
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
background: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color {
color: $mark-alt-fore-color;
}
}
}
// Mixin for alternative mark styles (contextual tags).
// Variables:
// - $mark-alt-name : The name of the class used for the alternate mark style.
// - $mark-alt-border-radius : The border-radius of the alternate mark style.
// - $mark-alt-padding : (Optional) The padding of the alternate mark style. Defaults to the padding of the mark.
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-radius, $mark-alt-padding: $mark-padding) {
mark.#{$mark-alt-name} {
display: inline-block;
@if $mark-alt-border-radius != 0 {
border-radius: $mark-alt-border-radius;
}
@if $mark-alt-padding != $mark-padding {
padding: $mark-alt-padding;
}
}
}