mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-07 22:36:37 +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.

28
src/mini/_contextual.scss
View File

@@ -2,8 +2,12 @@
// 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 {
@if $mark-back-color != $back-color {
background: $mark-back-color; background: $mark-back-color;
}
@if $mark-fore-color != $fore-color {
color: $mark-fore-color; color: $mark-fore-color;
}
@if $mark-font-size != 100% { @if $mark-font-size != 100% {
font-size: $mark-font-size; font-size: $mark-font-size;
} }
@@ -87,3 +91,27 @@ $alert-name: 'alert' !default; // Class name for the
} }
} }
} }
// 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;
}
}
}