Refactoring sass chill colors variables and badge mixins

This commit is contained in:
2021-10-05 16:20:15 +02:00
parent 84189faae6
commit 52c1a01980
11 changed files with 173 additions and 161 deletions

View File

@@ -1,44 +1,39 @@
// Additionnal colors
$sky-blue: #4bafe8;
// mixins variables
$social-issue-color: $sky-blue;
$social-action-color: $orange;
// Calculate same color then border:groove
// origin: $orange, computed: #965028
$social-action-label-color: shade-color($orange, 34%);
///
/// Social Issue mixin
// define visual badge for all social issues
/// Chill badge mixin
// define chill visual badge
///
@mixin badge_social_issue {
@mixin chill_badge($color) {
//text-transform: capitalize !important;
font-weight: 500 !important;
border-left: 20px groove $social-issue-color;
border-left: 20px groove $color;
&:before {
content: '\f04b';
font-family: ForkAwesome;
color: $social-issue-color;
content: '\f04b';
color: $color;
}
}
///
/// Social badge mixin
// define visual badge for social issues or social action
///
@mixin badge_social($color) {
@include chill_badge($color);
&:before {
margin: 0 0.3em 0 -0.75em;
}
}
///
/// Social Action mixin
// define visual badge for all social actions
/// Generic mixin for titles like badge
// define visual badge used in title area
///
@mixin badge_social_action {
//text-transform: capitalize !important;
font-weight: 500 !important;
border-left: 20px groove $social-action-color;
@mixin badge_title($color) {
@include chill_badge($color);
&:before {
content: '\f04b';
font-family: ForkAwesome;
color: $social-action-color;
margin: 0 0.3em 0 -0.75em;
margin: 0 0.3em 0 -1.05em;
}
}