Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-22 15:43:51 +00:00
Code Issues Actions Projects Releases Wiki Activity

Refactoring sass chill colors variables and badge mixins

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-10-05 16:20:15 +02:00
parent 84189faae6
commit 52c1a01980
11 changed files with 173 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss
View File

@@ -1,52 +1,6 @@
/// Display Title like a badge (with background-colored label)
h2.badge-title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
a & {
text-decoration: none;
}
span.title_label {
border-radius: 0.35rem 0 0 0.35rem;
color: $white;
font-size: 80%;
padding: 0.5em;
padding-right: 0;
}
span.title_action {
flex-grow: 1;
margin: 0 0 0 auto;
border-radius: 0 0.35rem 0.35rem 0;
background-color: $light;
padding: 0.2em 1em;
ul.small_in_title {
margin-top: 0.5em;
font-size: 70%;
padding-left: 1rem;
}
}
}
/// AccompanyingCourse Work list Page
div.accompanying_course_work-list {
h2.badge-title {
span.title_label {
background-color: $social-action-label-color;
}
span.title_action {
@include badge_social_action;
&:before {
margin: 0 0.3em 0 -1.05em !important;
}
}
}
div.timeline {
width: 100%;
ul {
@@ -146,7 +100,7 @@ div.accompanying_course_work-list {
}
}
&.goal_title li::marker {
color: $sky-blue;
color: $social-issue-color;
}
&.result_list li::marker {
color: $pink;

115
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss Normal file
View File

@@ -0,0 +1,115 @@
/*
* BADGES, MARKS, PINS
* for chill person theme
*/
// chill person badges
span.badge-person,
span.badge-thirdparty {
display: inline-block;
padding: 0 0.5em !important;
background-color: $white;
color: $dark;
border: 1px solid $chill-ll-gray;
border-bottom-width: 2px;
border-bottom-style: solid;
border-radius: 6px;
a {
text-decoration: none;
}
}
span.badge-person {
border-bottom-color: $chill-green;
}
// todo: move in thirdparty
span.badge-thirdparty {
border-bottom-color: shade-color($chill-pink, 10%);
}
/*
* HOUSEHOLD HOLDER MARK
*/
span.fa-holder {
width: 1em;
margin: -10px 0.3em -8px 0;
i:last-child {
font-family: "Open Sans Extrabold";
font-weight: 900;
font-size: 70%;
color: $white;
}
}
/*
* BADGE_TITLE
* Display Title like a badge (with background-colored label)
*/
h2.badge-title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
a & { text-decoration: none; } // ?!? keep it ?
span.title_label {
border-radius: 0.35rem 0 0 0.35rem;
color: $white;
font-size: 80%;
padding: 0.5em;
padding-right: 0;
}
span.title_action {
flex-grow: 1;
margin: 0 0 0 auto;
border-radius: 0 0.35rem 0.35rem 0;
background-color: $light;
padding: 0.2em 1em;
ul.small_in_title {
margin-top: 0.5em;
font-size: 70%;
padding-left: 1rem;
}
}
}
/// AccompanyingCourse Work list Page
div.accompanying_course_work-list {
h2.badge-title {
span.title_label {
// Calculate same color then border:groove
background-color: shade-color($social-action-color, 34%);
}
span.title_action {
@include badge_title($social-action-color);
}
}
}
/// Activities on resume page
div.activity-list {
h2.badge-title {
span.title_label {
// Calculate same color then border:groove
background-color: shade-color($activity-color, 34%);
}
span.title_action {
@include badge_title($activity-color);
}
span.title_label {
div.duration {
font-size: 70%;
font-weight: 500;
p {
margin-bottom: 0;
text-align: right;
}
}
}
}
}

49
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
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;
}
}

4
src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
View File

@@ -13,7 +13,7 @@
margin-right: 0.3em;
font-size: 120%;
span.badge {
@include badge_social_issue;
@include badge_social($social-issue-color);
}
}
@@ -22,7 +22,7 @@
margin-right: 0.3em;
font-size: 120%;
span.badge {
@include badge_social_action;
@include badge_social($social-action-color);
}
}
}