archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Replace hardcoded colors with variables and more sane colors.

Browse Source 
Makes it possible to theme the comments by replacing color variables.
This commit is contained in:
Pablo Vazquez 2017-10-14 03:06:08 +02:00
parent 43cb7a5f65
commit d637e322f7
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/styles/_comments.sass
View File

@ -100,7 +100,7 @@ $comments-width-max: 710px
+media-lg +media-lg
max-width: $comments-width-max max-width: $comments-width-max
color: darken($color-text-dark, 10%) color: darken($color-text, 10%)
font: font:
size: 1em size: 1em
weight: normal weight: normal
@ -270,7 +270,7 @@ $comments-width-max: 710px
padding-left: 25px padding-left: 25px
&.is-first &.is-first
border-top: 1px solid lighten($color-text-dark-hint, 15%) border-top: 1px solid $color-background
&.is-team &.is-team
.comment-author .comment-author
@ -326,9 +326,9 @@ $comments-width-max: 710px
width: 100% width: 100%
&-field &-field
background-color: white background-color: $color-background-dark
border-radius: 3px border-radius: 3px
box-shadow: 1px 2px 2px rgba($color-background-dark, .5) box-shadow: inset 0 0 2px 0 rgba(darken($color-background-dark, 20%), .5)
display: flex display: flex
position: relative position: relative
transition: border-color 300ms ease-in-out transition: border-color 300ms ease-in-out
@ -364,9 +364,16 @@ $comments-width-max: 710px
&.error &.error
box-shadow: inset 2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger box-shadow: inset 2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger
&+.comment-reply-meta button.comment-action-submit
box-shadow: inset -2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger
&.filled &.filled
textarea:focus textarea
border-bottom-left-radius: 0 background-color: $color-background-light
border-bottom: thin solid $color-background
&:focus
border-bottom-left-radius: 0
&+.comment-reply-preview &+.comment-reply-preview
display: flex display: flex
@ -395,7 +402,6 @@ $comments-width-max: 710px
border-bottom-left-radius: 3px border-bottom-left-radius: 3px
border-bottom-right-radius: 3px border-bottom-right-radius: 3px
box-shadow: 1px 2px 2px rgba($color-background-dark, .5) box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
color: $color-text-dark-primary
display: none // flex when comment-reply-field has .filled class display: none // flex when comment-reply-field has .filled class
position: relative position: relative
transition: all 150ms ease-in-out transition: all 150ms ease-in-out
@ -456,8 +462,7 @@ $comments-width-max: 710px
width: 100% width: 100%
&:focus &:focus
background-color: white background-color: $color-background-light
&.submitting &.submitting
color: $color-info color: $color-info

2
src/styles/base.sass
View File

@ -527,7 +527,7 @@ nav.sidebar
/* Global, we want all menus to look like this */ /* Global, we want all menus to look like this */
ul.dropdown-menu ul.dropdown-menu
background-color: white background-color: $color-background-light
border: none border: none
box-shadow: 0 10px 25px rgba(black, .1) box-shadow: 0 10px 25px rgba(black, .1)
user-select: none user-select: none