discourse
/
discourse-calendar
mirror of https://github.com/discourse/discourse-calendar.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Use CSS custom properties for complex color variations

This commit is contained in:
Penar Musaraj 2020-08-06 10:27:25 -04:00
parent c17bbf57d1
commit bf31bb359c
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/stylesheets/colors.scss Normal file
View File

@ -0,0 +1,14 @@
:root {
--calendar-normal: #{dark-light-choose(
lighten($tertiary, 55%),
darken($tertiary, 25%)
)};
--calendar-close-to-working-hours: #{dark-light-choose(
desaturate(lighten($tertiary, 45%), 15%),
darken($tertiary, 15%)
)};
--calendar-in-working-hours: #{dark-light-choose(
desaturate(lighten($tertiary, 40%), 20%),
darken($tertiary, 10%)
)};
}

11
assets/stylesheets/common/discourse-calendar.scss
View File

@ -202,6 +202,7 @@ a.holiday {
font-size: 16px; font-size: 16px;
} }
// TODO: remove fallbacks when colors CSS custom properties are in stable in core
$bg-normal: dark-light-choose(lighten($tertiary, 55%), darken($tertiary, 25%)); $bg-normal: dark-light-choose(lighten($tertiary, 55%), darken($tertiary, 25%));
$bg-close-to-working-hours: dark-light-choose( $bg-close-to-working-hours: dark-light-choose(
desaturate(lighten($tertiary, 45%), 15%), desaturate(lighten($tertiary, 45%), 15%),
@ -283,6 +284,7 @@ $bg-in-working-hours: dark-light-choose(
"<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect fill='#{$tertiary}' x='0' y='0' width='2' height='2'/></svg>" "<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect fill='#{$tertiary}' x='0' y='0' width='2' height='2'/></svg>"
) )
50% 50% repeat-x; 50% 50% repeat-x;
box-sizing: border-box; box-sizing: border-box;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
@ -328,7 +330,7 @@ $bg-in-working-hours: dark-light-choose(
.group-timezone { .group-timezone {
color: var(--primary, $primary); color: var(--primary, $primary);
background-color: $bg-normal; background-color: var(--calendar-normal, $bg-normal);
transition: opacity 0.4s; transition: opacity 0.4s;
opacity: 0.5; opacity: 0.5;
@ -341,12 +343,15 @@ $bg-in-working-hours: dark-light-choose(
} }
&.close-to-working-hours { &.close-to-working-hours {
background-color: $bg-close-to-working-hours; background-color: var(
--calendar-close-to-working-hours,
$bg-close-to-working-hours
);
opacity: 0.7; opacity: 0.7;
} }
&.in-working-hours { &.in-working-hours {
background-color: $bg-in-working-hours; background-color: var(--calendar-in-working-hours, $bg-in-working-hours);
opacity: 1; opacity: 1;
} }

1
plugin.rb
View File

@ -24,6 +24,7 @@ register_asset "stylesheets/common/discourse-post-event-core-ext.scss"
register_asset "stylesheets/mobile/discourse-calendar.scss", :mobile register_asset "stylesheets/mobile/discourse-calendar.scss", :mobile
register_asset "stylesheets/mobile/discourse-post-event.scss", :mobile register_asset "stylesheets/mobile/discourse-post-event.scss", :mobile
register_asset "stylesheets/desktop/discourse-calendar.scss", :desktop register_asset "stylesheets/desktop/discourse-calendar.scss", :desktop
register_asset "stylesheets/colors.scss", :color_definitions
register_svg_icon "fas fa-calendar-day" register_svg_icon "fas fa-calendar-day"
register_svg_icon "fas fa-clock" register_svg_icon "fas fa-clock"
register_svg_icon "fas fa-file-csv" register_svg_icon "fas fa-file-csv"