diff --git a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss index b2e36b2bf..10d94f667 100644 --- a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss +++ b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss @@ -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 diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss index 436f764dd..593cd49b4 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss @@ -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'; diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss new file mode 100644 index 000000000..61d975b42 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss @@ -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; diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss index 9b4650087..ef874c274 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/mixins.scss @@ -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) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss index 2b389239e..8f0ae64b2 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss @@ -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%; diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss index 95138bb0b..29267ad75 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/accompanying_period_work.scss @@ -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; diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss new file mode 100644 index 000000000..2c379b5a2 --- /dev/null +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss @@ -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; + } + } + } + } + } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss index 517530197..878ff82e1 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss @@ -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; } } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss index 1aa1c214b..c004af5f9 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss +++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss @@ -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); } } } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue index d2cfe5da0..57d185820 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue @@ -12,9 +12,9 @@ export default {