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

Contextual module cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-10 10:47:15 +02:00
parent 6d68baba7f
commit a8b92f577c
2 changed files with 87 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View File

@@ -388,4 +388,5 @@
- Code cleanup in `checkbox`. Optimizations. - Code cleanup in `checkbox`. Optimizations.
- Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly. - Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly.
- Code cleanup in `progress`. Merged `spinner` into `progress`. Removed `spinner-dot` from the `spinner` module as it was not a great component. - Code cleanup in `progress`. Merged `spinner` into `progress`. Removed `spinner-dot` from the `spinner` module as it was not a great component.
- Code cleanup for `contextual`. Minor `mark` optimizations. Added `alert` mixin `make-alert-alt-style` for alternative `alert` styles.

144
src/mini/_contextual.scss
View File

@@ -2,20 +2,24 @@
// Contextual background elements use the mark element as their base. // Contextual background elements use the mark element as their base.
// Default styling for mark. Use mixins for alternate styles. // Default styling for mark. Use mixins for alternate styles.
mark { mark {
background: $mark-back-color; @if $mark-back-color != $back-color {
color: $mark-fore-color; background: $mark-back-color;
@if $mark-font-size != 100% { }
font-size: $mark-font-size; @if $mark-fore-color != $fore-color {
} color: $mark-fore-color;
@if $mark-line-height != $base-line-height { }
line-height: $mark-line-height; @if $mark-font-size != 100% {
} font-size: $mark-font-size;
@if $mark-padding != 0 { }
padding: $mark-padding; @if $mark-line-height != $base-line-height {
} line-height: $mark-line-height;
@if $mark-margin != 0 { }
margin: $mark-margin; @if $mark-padding != 0 {
} padding: $mark-padding;
}
@if $mark-margin != 0 {
margin: $mark-margin;
}
} }
// Mixin for alternate mark (contextual color variants). // Mixin for alternate mark (contextual color variants).
// Variables: // Variables:
@@ -23,14 +27,14 @@ mark {
// - $mark-alt-back-color : The background color of 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. // - $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) { @mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
mark.#{$mark-alt-name} { mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color { @if $mark-alt-back-color != $mark-back-color {
background: $mark-alt-back-color; background: $mark-alt-back-color;
} }
@if $mark-alt-fore-color != $mark-fore-color { @if $mark-alt-fore-color != $mark-fore-color {
color: $mark-alt-fore-color; color: $mark-alt-fore-color;
} }
} }
} }
// Mixin for alternative mark styles (contextual tags). // Mixin for alternative mark styles (contextual tags).
// Variables: // Variables:
@@ -38,39 +42,39 @@ mark.#{$mark-alt-name} {
// - $mark-alt-border-radius : The border-radius of 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. // - $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) { @mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-radius, $mark-alt-padding: $mark-padding) {
mark.#{$mark-alt-name} { mark.#{$mark-alt-name} {
display: inline-block; display: inline-block;
@if $mark-alt-border-radius != 0 { @if $mark-alt-border-radius != 0 {
border-radius: $mark-alt-border-radius; border-radius: $mark-alt-border-radius;
} }
@if $mark-alt-padding != $mark-padding { @if $mark-alt-padding != $mark-padding {
padding: $mark-alt-padding; padding: $mark-alt-padding;
} }
} }
} }
// Default styling for alerts. Use mixins for alternate styles // Default styling for alerts. Use mixins for alternate styles
$alert-name: 'alert' !default; // Class name for the alerts $alert-name: 'alert' !default; // Class name for the alerts
.#{$alert-name} { .#{$alert-name} {
display: block; display: block;
max-width: 100%; max-width: 100%;
@if $alert-back-color != $back-color { @if $alert-back-color != $back-color {
background: $alert-back-color; background: $alert-back-color;
} }
@if $alert-fore-color != $fore-color { @if $alert-fore-color != $fore-color {
color: $alert-fore-color; color: $alert-fore-color;
} }
@if $alert-border-style != 0 { @if $alert-border-style != 0 {
border: $alert-border-style; border: $alert-border-style;
} }
@if $alert-border-radius != 0 { @if $alert-border-radius != 0 {
border-radius: $alert-border-radius; border-radius: $alert-border-radius;
} }
@if $alert-margin != 0 { @if $alert-margin != 0 {
margin: $alert-margin; margin: $alert-margin;
} }
@if $alert-padding != 0 { @if $alert-padding != 0 {
padding: $alert-padding; padding: $alert-padding;
} }
} }
// Mixin for alternate alert (alert color variants). // Mixin for alternate alert (alert color variants).
// Variables: // Variables:
@@ -78,12 +82,36 @@ $alert-name: 'alert' !default; // Class name for the
// - $alert-alt-back-color : The background color of the alternate alert. // - $alert-alt-back-color : The background color of the alternate alert.
// - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert. // - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert.
@mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) { @mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
.#{$alert-name}.#{$alert-alt-name} { .#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-back-color != $alert-back-color { @if $alert-alt-back-color != $alert-back-color {
background: $alert-alt-back-color; background: $alert-alt-back-color;
} }
@if $alert-alt-fore-color != $alert-fore-color { @if $alert-alt-fore-color != $alert-fore-color {
color: $alert-alt-fore-color; color: $alert-alt-fore-color;
} }
}
} }
// Mixin for alternate alert styles (alert style variants).
// Variables:
// - $alert-alt-name : The name of the class used for the alternate alert style.
// - $alert-alt-border-style : The border style of the alternate alert style.
// - $alert-alt-border-radius : Border radius of the alternate alert style.
// - $alert-alt-padding : Padding of the alternate alert style.
// - $alert-alt-margin : Margin of the alternate alert style.
@mixin make-alert-alt-style ($aert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
$alert-alt-padding, $alert-alt-margin) {
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-border-style != $alert-border-style {
border: $alert-alt-border-style;
}
@if $alert-alt-border-radius != $alert-border-radius {
border-radius: $alert-alt-border-radius;
}
@if $alert-alt-padding != $alert-padding {
padding: $alert-alt-padding;
}
@if $alert-alt-margin != $alert-margin {
margin: $alert-alt-margin;
}
}
} }