Skip to content

Commit

Permalink
More themeable mixin in action (#2646)
Browse files Browse the repository at this point in the history 
* More themeable mixin in action.

* Missed a CSS var to themeable mixin.
  • Loading branch information
@nickytonline @benhalpern
nickytonline authored and benhalpern committed May 2, 2019
1 parent 7100eab commit 957d188
Show file tree
Hide file tree
Showing 6 changed files with 244 additions and 231 deletions.
99 changes: 52 additions & 47 deletions app/assets/stylesheets/comments.scss
View file
@@ -1,4 +1,5 @@
@import 'variables';
@import 'mixins';
@import 'shared';

$indent-distance: calc(1.1vw + 13px);
Expand All @@ -13,18 +14,15 @@ $indent-distance: calc(1.1vw + 13px);
}

a.header-link {
color: $black;
color: var(--theme-color, $black);
@include themeable(color, theme-color, $black);
display: block;
&:hover {
color: $black;
color: var(--theme-color, $black);
@include themeable(color, theme-color, $black);
}
}

.comments {
background: $light-gray;
background: var(--theme-background, $light-gray);
@include themeable(background, theme-background, $light-gray);
.picture {
height: 180px;
max-width: 900px;
Expand Down Expand Up @@ -54,15 +52,17 @@ a.header-link {
max-width: 100%;
margin: 50px auto 10px;
padding: 0px 0px 90px;
background: white;
background: var(--theme-container-background, white);
@include themeable(background, theme-container-background, #fff);
z-index: 3;
position: relative;
@media screen and (min-width: 820px) {
margin: 72px auto 10px;
border-radius: 5px;
border: 1px solid darken($lightest-gray, 4%);
border: var(--theme-container-border, 1px solid darken($lightest-gray, 4%));
@include themeable(
border,
theme-container-border,
1px solid darken($lightest-gray, 4%)
);
}
h3 {
width: 94%;
Expand All @@ -89,8 +89,7 @@ a.header-link {
margin: auto;
margin-bottom: -35px;
.read-more {
color: $sky-blue;
color: var(--theme-anchor-color, $sky-blue);
@include themeable(color, theme-anchor-color, $sky-blue);
display: inline-block;
&:hover {
opacity: 0.96;
Expand Down Expand Up @@ -223,20 +222,29 @@ a.header-link {
}
form {
width: 104%;
background: $light-gray;
background: var(--theme-container-accent-background, $light-gray);
@include themeable(
background,
theme-container-accent-background,
$light-gray
);
overflow: auto;
position: relative;
margin-bottom: 4px;
z-index: 4;
margin-left: -2%;
border-top: 1px solid $light-medium-gray;
border-top: var(--theme-container-border, 1px solid $light-medium-gray);
@include themeable(
border-top,
theme-container-border,
1px solid $light-medium-gray
);
@media screen and (min-width: 820px) {
width: calc(100% - 2px);
margin-left: 0%;
border: 1px solid $light-medium-gray;
border: var(--theme-container-border, 1px solid $light-medium-gray);
@include themeable(
border,
theme-container-border,
1px solid $light-medium-gray
);
}

.field {
Expand All @@ -254,19 +262,20 @@ a.header-link {
display: block;
resize: vertical;
border-radius: 3px;
border: 1px solid rgb(232, 229, 229);
border: var(--theme-container-background, 1px solid rgb(232, 229, 229));
@include themeable(
border,
theme-container-background,
1px solid rgb(232, 229, 229)
);
height: 125px;
font-size: 16px;
padding: 6px;
cursor: text;
background: white;
background: var(--theme-container-background, white);
color: $black;
color: var(--theme-color, $black);
&::placeholder{
color:#8f949c;
}
@include themeable(background, theme-container-background, #fff);
@include themeable(color, theme-color, $black);
&::placeholder {
color: #8f949c;
}
&.embiggened {
height: calc(2vw + 115px);
}
Expand All @@ -279,8 +288,9 @@ a.header-link {
&.preview-loading {
background: white url(image_path('loading-ellipsis.svg')) no-repeat
center center;
background-color: var(--theme-container-background, white);
color: var(--theme-container-background, white);
@include themeable(background-color, theme-container-background, white);
@include themeable(color, theme-container-background, white);

background-size: 50px;
}
}
Expand All @@ -293,8 +303,11 @@ a.header-link {
text-align: left;
font-size: 19px;
font-family: $helvetica;
background: lighten($yellow, 19%);
background: var(--theme-container-accent-background, lighten($yellow, 19%));
@include themeable(
background,
theme-container-accent-background,
lighten($yellow, 19%)
);
box-shadow: $shadow;
width: calc(100% - 80px);
margin: 19px auto 8px;
Expand Down Expand Up @@ -347,8 +360,7 @@ a.header-link {
text-align: right;
font-size: 0.9em;
font-weight: 500;
color: $dark-gray;
color: var(--theme-secondary-color, $dark-gray);
@include themeable(color, theme-secondary-color, $dark-gray);
&.sub-comment-code-of-conduct {
font-size: 1em;
}
Expand All @@ -358,8 +370,7 @@ a.header-link {
margin: 5px 0px;
}
a {
color: $sky-blue;
color: var(--theme-anchor-color, $sky-blue);
@include themeable(color, theme-anchor-color, $sky-blue);
}
}
input[type='submit'] {
Expand Down Expand Up @@ -617,8 +628,7 @@ a.header-link {
code {
margin: auto;
white-space: nowrap;
background: $lightest-gray;
background: var(--theme-background, $lightest-gray);
@include themeable(background, theme-background, $lightest-gray);
padding: 1px 5px 0px;
border-radius: 2px;
color: #333842;
Expand Down Expand Up @@ -674,8 +684,7 @@ a.header-link {
padding: 0px;
border-top-left-radius: 3px;
border-top-left-radius: 3px;
color: $dark-gray;
color: var(--theme-secondary-color, $dark-gray);
@include themeable(color, theme-secondary-color, $dark-gray);
position: relative;
// background:$light-gray;
.comment-date {
Expand All @@ -686,8 +695,7 @@ a.header-link {
font-size: 12px;
text-align: right;
a {
color: $medium-gray;
color: var(--theme-secondary-color, $dark-gray);
@include themeable(color, theme-secondary-color, $medium-gray);
}
}
.dropbtn {
Expand Down Expand Up @@ -780,8 +788,7 @@ a.header-link {
}
}
a {
color: lighten($dark-gray, 3%);
color: var(--theme-secondary-color, $dark-gray);
@include themeable(color, theme-secondary-color, lighten($dark-gray, 3%));
}
}
.reaction-button,
Expand Down Expand Up @@ -953,8 +960,7 @@ a.header-link {
.inner-comment {
padding: 0px;
border: 1px solid $light-medium-gray;
background: white;
background: var(--theme-container-background, #fff);
@include themeable(background, theme-container-background, #fff);
&.comment-created-via-fetch {
animation: comment-create 1.2s;
.body {
Expand Down Expand Up @@ -996,7 +1002,6 @@ a.header-link {
background-color: $light-green;
}
to {
background-color: white;
background-color: var(--theme-container-background, #fff);
@include themeable(background-color, theme-container-background, #fff);
}
}

0 comments on commit 957d188

Please sign in to comment.