mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Refactoring sass chill colors variables and badge mixins
This commit is contained in:
parent
84189faae6
commit
52c1a01980
@ -102,32 +102,6 @@ div.activity-list {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/// Activities on resume page
|
||||
h2.badge-title {
|
||||
span.title_label {
|
||||
background-color: #668821;
|
||||
div.duration {
|
||||
font-size: 70%;
|
||||
font-weight: 500;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
span.title_action {
|
||||
//text-transform: capitalize !important;
|
||||
font-weight: 500 !important;
|
||||
border-left: 20px groove yellowgreen;
|
||||
&:before {
|
||||
content: '\f04b';
|
||||
font-family: ForkAwesome;
|
||||
color: yellowgreen;
|
||||
margin: 0 0 0 -1.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// exceptions for flex-bloc in concerned-groups
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
// Access to Bootstrap variables and mixins
|
||||
@import '~ChillMainAssets/module/bootstrap/shared';
|
||||
|
||||
// Chill variables
|
||||
@import './scss/chill_variables';
|
||||
|
||||
// Chill mixins
|
||||
@import './scss/mixins';
|
||||
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
/*
|
||||
* ADDITIONNAL COLORS VARIABLES
|
||||
*/
|
||||
|
||||
// Contexts banners
|
||||
$chill-person-context: $chill-green;
|
||||
$chill-accourse-context: #718596;
|
||||
$chill-household-context: #929d69;
|
||||
|
||||
// Badges colors
|
||||
$social-issue-color: #4bafe8;
|
||||
$social-action-color: $orange;
|
||||
$activity-color: yellowgreen;
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
//
|
||||
// Titles in forms
|
||||
//
|
||||
@ -12,7 +11,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// We use box-shadow instead of border
|
||||
// to avoid to manage border double-width
|
||||
// Then we can simulate border-collapse: collapse (table)
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
// Access to Bootstrap variables and mixins
|
||||
@import '~ChillMainAssets/module/bootstrap/shared';
|
||||
|
||||
@import 'ChillMainAssets/chill/scss/chill_variables';
|
||||
|
||||
// Complete/override Main generic assets
|
||||
@import './scss/mixins';
|
||||
@import './scss/render_box.scss';
|
||||
@import './scss/flex_table.scss';
|
||||
@import './scss/badge.scss';
|
||||
|
||||
// Specific templates styles
|
||||
@import './scss/accompanying_period_work.scss';
|
||||
@ -19,13 +22,13 @@
|
||||
|
||||
div.banner {
|
||||
div#header-person-name {
|
||||
background: none repeat scroll 0 0 $chill-green-dark;
|
||||
background: none repeat scroll 0 0 shade-color($chill-person-context, 20%);
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
div#header-person-details {
|
||||
background: none repeat scroll 0 0 $chill-green;
|
||||
background: none repeat scroll 0 0 $chill-person-context;
|
||||
color: $white;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
@ -92,7 +95,6 @@ div.person-view {
|
||||
* Header custom for Accompanying Course
|
||||
*/
|
||||
|
||||
$chill-accourse-context: #718596;
|
||||
|
||||
div.banner {
|
||||
div#header-accompanying_course-name {
|
||||
@ -104,9 +106,9 @@ div.banner {
|
||||
span {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -118,7 +120,7 @@ div.banner {
|
||||
}
|
||||
}
|
||||
|
||||
abbr.referrer {
|
||||
abbr.referrer { // still used ?
|
||||
font-size: 70%;
|
||||
padding-right: 0.4em;
|
||||
align-self: center; // in flex context
|
||||
@ -129,8 +131,6 @@ abbr.referrer {
|
||||
* Header custom for Household
|
||||
*/
|
||||
|
||||
$chill-household-context: #929d69;
|
||||
|
||||
div.banner {
|
||||
div#header-household-name {
|
||||
background: none repeat scroll 0 0 $chill-household-context;
|
||||
@ -142,9 +142,9 @@ div.banner {
|
||||
span {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.household-members {
|
||||
@ -208,47 +208,7 @@ div.household-resume {
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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-weight: 900;
|
||||
color: white;
|
||||
font-size: 70%;
|
||||
font-family: "Open Sans Extrabold";
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Horizontal list of persons (Accourse resume page)
|
||||
div.accompanyingcourse-resume {
|
||||
div.associated-persons {
|
||||
font-size: 110%;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,9 +12,9 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import 'ChillMainAssets/module/bootstrap/shared';
|
||||
@import 'ChillPersonAssets/chill/scss/mixins';
|
||||
|
||||
@import 'ChillMainAssets/chill/scss/chill_variables';
|
||||
span.badge {
|
||||
@include badge_social_issue;
|
||||
@include badge_social($social-issue-color);
|
||||
font-size: 95%;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 1em;
|
||||
|
||||
@ -84,10 +84,10 @@ export default {
|
||||
<style lang="scss">
|
||||
@import 'ChillMainAssets/module/bootstrap/shared';
|
||||
@import 'ChillPersonAssets/chill/scss/mixins';
|
||||
|
||||
@import 'ChillMainAssets/chill/scss/chill_variables';
|
||||
div#accompanying-course {
|
||||
span.multiselect__tag {
|
||||
@include badge_social_issue;
|
||||
@include badge_social($social-issue-color);
|
||||
background: $chill-l-gray;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user