IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Use CSS custom properties for colors in core plugins

Browse Source
This commit is contained in:
Penar Musaraj
2020-08-04 11:14:33 -04:00
parent b76731d722
commit 14eec43889
5 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/discourse-details/assets/stylesheets/details.scss
View File

@@ -57,16 +57,16 @@ summary::-webkit-details-marker {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $primary-medium; color: var(--primary-medium);
background: $primary-low; background: var(--primary-low);
border: 1px solid $primary-low-mid; border: 1px solid var(--primary-low-mid);
width: 1.5em; width: 1.5em;
line-height: 1; line-height: 1;
} }
summary:hover { summary:hover {
color: $primary; color: var(--primary);
background: $primary-low-mid; background: var(--primary-low-mid);
border-color: currentColor; border-color: currentColor;
} }
} }

46
plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
View File

@@ -1,20 +1,20 @@
.discourse-local-date { .discourse-local-date {
&.cooked-date { &.cooked-date {
color: $primary; color: var(--primary);
cursor: pointer; cursor: pointer;
border-bottom: 1px dashed $primary-medium; border-bottom: 1px dashed var(--primary-medium);
white-space: nowrap; white-space: nowrap;
.d-icon { .d-icon {
color: $primary; color: var(--primary);
} }
&.past { &.past {
border-bottom-color: $primary-low-mid; border-bottom-color: var(--primary-low-mid);
} }
&.past[data-countdown] { &.past[data-countdown] {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }
@@ -32,7 +32,7 @@
} }
&.current { &.current {
background: $tertiary-low; background: var(--tertiary-low);
} }
} }
} }
@@ -70,7 +70,7 @@
.picker-panel { .picker-panel {
padding: 5px; padding: 5px;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
} }
.date-picker { .date-picker {
@@ -106,13 +106,13 @@
&.is-expanded { &.is-expanded {
.select-kit-header { .select-kit-header {
border: 1px solid $primary-medium; border: 1px solid var(--primary-medium);
} }
} }
.select-kit-header { .select-kit-header {
padding: 0.5em 0.5em; padding: 0.5em 0.5em;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
.d-icon { .d-icon {
margin-right: 1em; margin-right: 1em;
@@ -127,17 +127,17 @@
.date-time-control { .date-time-control {
position: relative; position: relative;
display: flex; display: flex;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
&.is-filled, &.is-filled,
&.is-selected { &.is-selected {
.date-time { .date-time {
color: $primary; color: var(--primary);
background: $secondary; background: var(--secondary);
} }
.d-icon { .d-icon {
color: $primary-high; color: var(--primary-high);
} }
} }
@@ -149,7 +149,7 @@
} }
&.is-selected { &.is-selected {
border-color: $tertiary; border-color: var(--tertiary);
} }
} }
@@ -163,13 +163,13 @@
} }
&.is-selected { &.is-selected {
border-color: $tertiary; border-color: var(--tertiary);
} }
} }
.date-time { .date-time {
color: $primary-medium; color: var(--primary-medium);
background: $primary-very-low; background: var(--primary-very-low);
} }
.d-icon { .d-icon {
@@ -179,7 +179,7 @@
left: 0.5em; left: 0.5em;
top: 0; top: 0;
bottom: 0; bottom: 0;
color: $primary-medium; color: var(--primary-medium);
} }
.delete-to-date { .delete-to-date {
@@ -190,7 +190,7 @@
width: 30px; width: 30px;
top: 0; top: 0;
bottom: 0; bottom: 0;
color: $primary-high; color: var(--primary-high);
border-radius: 0 0 5px 0; border-radius: 0 0 5px 0;
} }
@@ -211,7 +211,7 @@
.picker-panel { .picker-panel {
z-index: 1; z-index: 1;
background: $secondary; background: var(--secondary);
width: 200px; width: 200px;
box-sizing: border-box; box-sizing: border-box;
margin-left: 1em; margin-left: 1em;
@@ -224,11 +224,11 @@
margin-top: 1em; margin-top: 1em;
align-items: center; align-items: center;
padding: 0.25em; padding: 0.25em;
border-top: 1px solid $primary-low-mid; border-top: 1px solid var(--primary-low-mid);
box-sizing: border-box; box-sizing: border-box;
.d-icon { .d-icon {
color: $primary-medium; color: var(--primary-medium);
} }
.time-picker { .time-picker {
@@ -284,7 +284,7 @@
margin: 0; margin: 0;
.format { .format {
.previewed-format { .previewed-format {
color: $primary-medium; color: var(--primary-medium);
} }
} }
} }

16
plugins/poll/assets/stylesheets/common/poll.scss
View File

@@ -1,6 +1,6 @@
div.poll { div.poll {
margin: 1em 0; margin: 1em 0;
border: 1px solid $primary-low; border: 1px solid var(--primary-low);
@include unselectable; @include unselectable;
@@ -19,7 +19,7 @@ div.poll {
} }
li[data-poll-option-id] { li[data-poll-option-id] {
color: $primary; color: var(--primary);
padding: 0.5em 0; padding: 0.5em 0;
word-break: break-word; word-break: break-word;
} }
@@ -31,7 +31,7 @@ div.poll {
} }
.poll-info { .poll-info {
color: $primary-medium; color: var(--primary-medium);
vertical-align: middle; vertical-align: middle;
padding: 1em 0; padding: 1em 0;
@@ -58,7 +58,7 @@ div.poll {
.poll-buttons { .poll-buttons {
.info-text { .info-text {
margin: 0.25em 0; margin: 0.25em 0;
color: $primary-medium; color: var(--primary-medium);
} }
.info-text + .info-text, .info-text + .info-text,
button + .info-text { button + .info-text {
@@ -100,21 +100,21 @@ div.poll {
.percentage { .percentage {
float: right; float: right;
color: $primary-medium; color: var(--primary-medium);
margin-left: 0.25em; margin-left: 0.25em;
} }
.bar-back { .bar-back {
background: $primary-low; background: var(--primary-low);
} }
.bar { .bar {
height: 0.75em; height: 0.75em;
background: $primary-medium; background: var(--primary-medium);
} }
.chosen .bar { .chosen .bar {
background: $tertiary; background: var(--tertiary);
} }
} }

6
plugins/poll/assets/stylesheets/desktop/poll.scss
View File

@@ -25,11 +25,11 @@ div.poll {
.poll-container { .poll-container {
display: table-cell; display: table-cell;
width: 100%; width: 100%;
border-right: 1px solid $primary-low; border-right: 1px solid var(--primary-low);
} }
.poll-buttons { .poll-buttons {
border-top: 1px solid $primary-low; border-top: 1px solid var(--primary-low);
padding: 1em; padding: 1em;
.info-text { .info-text {
@@ -71,7 +71,7 @@ div.poll.pie {
li[data-poll-option-id]:before { li[data-poll-option-id]:before {
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
border: 2px solid $primary; border: 2px solid var(--primary);
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
margin-right: 0.5em; margin-right: 0.5em;

2
plugins/poll/assets/stylesheets/mobile/poll.scss
View File

@@ -33,7 +33,7 @@ div.poll {
div.poll.pie { div.poll.pie {
.poll-container { .poll-container {
width: calc(100% - 30px); width: calc(100% - 30px);
border-bottom: 1px solid $primary-low; border-bottom: 1px solid var(--primary-low);
.poll-grouped-pie-container { .poll-grouped-pie-container {
width: 100%; width: 100%;