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 colors in SCSS 

Prepares the plugin for an upcoming change in core while maintaining
backwards compatiblity.

This doesn't cover all cases, I am working on a fix for the few complex
variables used in discourse-calendar.scss.
This commit is contained in:
Penar Musaraj 2020-08-03 13:27:00 -04:00
parent 5e396de936
commit 5c8b100ccb
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
8 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
.discourse-calendar-wrap { .discourse-calendar-wrap {
margin: 0.5em 0; margin: 0.5em 0;
border: 5px solid $primary-low; border: 5px solid var(--primary-low, $primary-low);
} }
.category-calendar .calendar { .category-calendar .calendar {
@ -44,7 +44,7 @@
} }
.fc-bg td.fc-today { .fc-bg td.fc-today {
background-color: $highlight-medium; background-color: var(--highlight-medium, $highlight-medium);
border-style: solid; border-style: solid;
} }
@ -82,21 +82,21 @@
.fc-button { .fc-button {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
background: $primary-low; background: var(--primary-low, $primary-low);
text-transform: capitalize; text-transform: capitalize;
color: $primary; color: var(--primary, $primary);
text-shadow: none; text-shadow: none;
border: none; border: none;
padding: 6px 12px; padding: 6px 12px;
&:hover { &:hover {
background: $primary-medium; background: var(--primary-medium, $primary-medium);
color: $secondary; color: var(--secondary, $secondary);
} }
&.fc-state-active { &.fc-state-active {
background: $tertiary; background: var(--tertiary, $tertiary);
color: $secondary; color: var(--secondary, $secondary);
} }
} }
@ -111,7 +111,7 @@
.fc-list-empty, .fc-list-empty,
.fc-list-heading td, .fc-list-heading td,
.fc-popover .fc-header { .fc-popover .fc-header {
background: $primary-low; background: var(--primary-low, $primary-low);
} }
.fc-content, .fc-content,
@ -124,13 +124,13 @@
td, td,
th, th,
thead { thead {
border-color: $primary-low; border-color: var(--primary-low, $primary-low);
} }
} }
.fc-event, .fc-event,
.fc-event-dot { .fc-event-dot {
background-color: $tertiary; background-color: var(--tertiary, $tertiary);
border: 1px solid transparent; border: 1px solid transparent;
.fc-time { .fc-time {
@ -138,9 +138,9 @@
} }
&.grouped-event { &.grouped-event {
background-color: $primary-low; background-color: var(--primary-low, $primary-low);
border: 1px solid $primary-low-mid; border: 1px solid var(--primary-low-mid, $primary-low-mid);
color: $primary; color: var(--primary, $primary);
.emoji { .emoji {
margin-right: 0.25em; margin-right: 0.25em;
@ -154,7 +154,7 @@
} }
} }
.fc-list-item-add-to-calendar { .fc-list-item-add-to-calendar {
color: $tertiary; color: var(--tertiary, $tertiary);
font-size: $font-down-1; font-size: $font-down-1;
} }
} }
@ -179,7 +179,7 @@ a.holiday {
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding: 0.5em; padding: 0.5em;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low, $primary-low);
background: $primary-very-low; background: $primary-very-low;
min-height: 60px; min-height: 60px;
@ -327,7 +327,7 @@ $bg-in-working-hours: dark-light-choose(
} }
.group-timezone { .group-timezone {
color: $primary; color: var(--primary, $primary);
background-color: $bg-normal; background-color: $bg-normal;
transition: opacity 0.4s; transition: opacity 0.4s;
opacity: 0.5; opacity: 0.5;

2
assets/stylesheets/common/discourse-post-event-builder.scss
View File

@ -109,7 +109,7 @@
flex-direction: column; flex-direction: column;
.description { .description {
color: $primary-medium; color: var(--primary-medium, $primary-medium);
} }
} }
} }

6
assets/stylesheets/common/discourse-post-event-core-ext.scss
View File

@ -1,7 +1,7 @@
.raw-topic-link { .raw-topic-link {
.event-date { .event-date {
font-size: $font-down-2; font-size: $font-down-2;
background: $primary-low; background: var(--primary-low, $primary-low);
padding: 0.25em; padding: 0.25em;
border-radius: 3px; border-radius: 3px;
vertical-align: middle; vertical-align: middle;
@ -12,8 +12,8 @@
.header-title { .header-title {
.event-date { .event-date {
font-size: $font-down-3; font-size: $font-down-3;
background: $primary-low; background: var(--primary-low, $primary-low);
color: $primary-high; color: var(--primary-high, $primary-high);
padding: 0.25em; padding: 0.25em;
border-radius: 3px; border-radius: 3px;
vertical-align: middle; vertical-align: middle;

6
assets/stylesheets/common/discourse-post-event-invitees.scss
View File

@ -15,7 +15,7 @@
padding: 0.5em; padding: 0.5em;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low, $primary-low);
&:last-child { &:last-child {
border: none; border: none;
@ -31,11 +31,11 @@
margin-left: 1em; margin-left: 1em;
&.going { &.going {
color: $success; color: var(--success, $success);
} }
&.not_going { &.not_going {
color: $danger; color: var(--danger, $danger);
} }
} }
} }

4
assets/stylesheets/common/discourse-post-event-preview.scss
View File

@ -1,9 +1,9 @@
.discourse-post-event-preview { .discourse-post-event-preview {
background: $secondary; background: var(--secondary, $secondary);
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 0.5em; padding: 0.5em;
border: 1px solid $primary-low; border: 1px solid var(--primary-low, $primary-low);
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;

34
assets/stylesheets/common/discourse-post-event.scss
View File

@ -2,9 +2,9 @@
display: flex; display: flex;
.discourse-post-event-widget { .discourse-post-event-widget {
border: 5px solid $primary-low; border: 5px solid var(--primary-low, $primary-low);
display: flex; display: flex;
background: $secondary; background: var(--secondary, $secondary);
margin: 5px 0; margin: 5px 0;
flex-direction: column; flex-direction: column;
flex: 1 0 auto; flex: 1 0 auto;
@ -98,7 +98,7 @@
.status-and-creators { .status-and-creators {
display: flex; display: flex;
align-items: center; align-items: center;
color: $primary-medium; color: var(--primary-medium, $primary-medium);
font-size: $font-down-1; font-size: $font-down-1;
margin: 0.25em 0; margin: 0.25em 0;
@ -122,7 +122,7 @@
.status { .status {
&.expired { &.expired {
color: $danger-medium; color: var(--danger-medium, $danger-medium);
} }
.d-icon { .d-icon {
@ -145,7 +145,7 @@
&.status-going { &.status-going {
.widget-dropdown-header { .widget-dropdown-header {
.d-icon-check { .d-icon-check {
color: $success; color: var(--success, $success);
} }
} }
@ -161,7 +161,7 @@
.widget-dropdown-header { .widget-dropdown-header {
.d-icon-star { .d-icon-star {
color: $tertiary; color: var(--tertiary, $tertiary);
} }
} }
} }
@ -205,7 +205,7 @@
.invited { .invited {
font-weight: 500; font-weight: 500;
color: $primary-medium; color: var(--primary-medium, $primary-medium);
} }
} }
} }
@ -230,15 +230,15 @@
} }
&.status-going .avatar-flair { &.status-going .avatar-flair {
color: $success; color: var(--success, $success);
} }
&.status-not_going .avatar-flair { &.status-not_going .avatar-flair {
color: $danger; color: var(--danger, $danger);
} }
&.status-interested .avatar-flair { &.status-interested .avatar-flair {
color: $tertiary; color: var(--tertiary, $tertiary);
} }
} }
@ -250,15 +250,15 @@
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: $secondary; background: var(--secondary, $secondary);
border-radius: 50%; border-radius: 50%;
height: 16px; height: 16px;
width: 16px; width: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: $primary-medium; color: var(--primary-medium, $primary-medium);
border: 1px solid $primary-low; border: 1px solid var(--primary-low, $primary-low);
.d-icon { .d-icon {
font-size: $font-down-3; font-size: $font-down-3;
@ -281,7 +281,7 @@
flex: 1; flex: 1;
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high, $primary-high);
} }
} }
@ -296,11 +296,11 @@
.event-dates { .event-dates {
.participants { .participants {
margin-left: 0.5em; margin-left: 0.5em;
color: $primary-medium; color: var(--primary-medium, $primary-medium);
} }
.date { .date {
color: $primary-high; color: var(--primary-high, $primary-high);
margin-left: 1em; margin-left: 1em;
.discourse-local-date { .discourse-local-date {
@ -311,7 +311,7 @@
} }
.separator { .separator {
color: $primary-high; color: var(--primary-high, $primary-high);
margin: 0 0.5em; margin: 0 0.5em;
text-align: center; text-align: center;
} }

30
assets/stylesheets/common/upcoming-events-calendar.scss
View File

@ -11,7 +11,7 @@
} }
.fc-bg td.fc-today { .fc-bg td.fc-today {
background-color: $highlight-medium; background-color: var(--highlight-medium, $highlight-medium);
border-style: solid; border-style: solid;
} }
@ -49,22 +49,22 @@
.fc-button { .fc-button {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
background: $primary-low; background: var(--primary-low, $primary-low);
text-transform: capitalize; text-transform: capitalize;
color: $primary; color: var(--primary, $primary);
text-shadow: none; text-shadow: none;
border: none; border: none;
padding: 6px 12px; padding: 6px 12px;
&:hover { &:hover {
background: $primary-medium; background: var(--primary-medium, $primary-medium);
color: $secondary; color: var(--secondary, $secondary);
} }
&.fc-state-active { &.fc-state-active {
background: $tertiary; background: var(--tertiary, $tertiary);
color: $secondary; color: var(--secondary, $secondary);
} }
margin: 0.3em 0 0.3em 0.5em; margin: 0.3em 0 0.3em 0.5em;
} }
@ -81,7 +81,7 @@
.fc-list-empty, .fc-list-empty,
.fc-list-heading td, .fc-list-heading td,
.fc-popover .fc-header { .fc-popover .fc-header {
background: $primary-low; background: var(--primary-low, $primary-low);
} }
.fc-content, .fc-content,
@ -94,14 +94,14 @@
td, td,
th, th,
thead { thead {
border-color: $primary-low; border-color: var(--primary-low, $primary-low);
} }
} }
.fc-event, .fc-event,
.fc-event-dot { .fc-event-dot {
color: $secondary; color: var(--secondary, $secondary);
background-color: $tertiary; background-color: var(--tertiary, $tertiary);
border: 1px solid transparent; border: 1px solid transparent;
.fc-time { .fc-time {
@ -110,9 +110,9 @@
&.grouped-event { &.grouped-event {
background-color: none; background-color: none;
background: $secondary; background: var(--secondary, $secondary);
border: 1px solid $primary-low-mid; border: 1px solid var(--primary-low-mid, $primary-low-mid);
color: $primary; color: var(--primary, $primary);
.emoji { .emoji {
margin-right: 0.25em; margin-right: 0.25em;
@ -126,7 +126,7 @@
} }
} }
.fc-list-item-add-to-calendar { .fc-list-item-add-to-calendar {
color: $tertiary; color: var(--tertiary, $tertiary);
font-size: $font-down-1; font-size: $font-down-1;
} }
} }

2
assets/stylesheets/desktop/discourse-calendar.scss
View File

@ -4,6 +4,6 @@
margin-right: 5px; margin-right: 5px;
} }
.fc-list-item:hover td { .fc-list-item:hover td {
background: $highlight-medium; background: var(--highlight-medium, $highlight-medium);
} }
} }