beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats 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.
- 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 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.
// Default styling for mark. Use mixins for alternate styles.
mark {
@if $mark-back-color != $back-color {
background: $mark-back-color;
}
@if $mark-fore-color != $fore-color {
color: $mark-fore-color;
}
@if $mark-font-size != 100% {
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;
}
}
}