Refactor css

Apply different styles to reply, retweet and favorite buttons
This commit is contained in:
Jiayi Zheng 2016-11-13 17:52:20 +01:00
parent 11125abeeb
commit 53fed694df
5 changed files with 40 additions and 20 deletions

View file

@ -1,7 +1,4 @@
$main-color: #f58d2c; @import './_variables.scss';
$main-background: white;
$darkened-background: whitesmoke;
#app { #app {
background-color: $main-color; background-color: $main-color;
background-size: cover; background-size: cover;
@ -225,9 +222,10 @@ status.ng-enter.ng-enter-active {
} }
.fa { .fa {
color: $main-color; color: grey;
} }
.status-actions { .status-actions {
width: 50%; width: 50%;
display: flex; display: flex;

6
src/_variables.scss Normal file
View file

@ -0,0 +1,6 @@
$main-color: #f58d2c;
$main-background: white;
$darkened-background: whitesmoke;
$green: #0fa00f;
$blue: #0095ff;

View file

@ -7,8 +7,15 @@
<script src="./favorite_button.js" ></script> <script src="./favorite_button.js" ></script>
<style> <style lang='scss'>
.favorite-button { @import '../../_variables.scss';
cursor: pointer .favorite-button {
} cursor: pointer;
&:hover {
color: $main-color;
}
}
.icon-star {
color: $main-color;
}
</style> </style>

View file

@ -7,12 +7,16 @@
<script src="./retweet_button.js" ></script> <script src="./retweet_button.js" ></script>
<style> <style lang='scss'>
.icon-retweet { @import '../../_variables.scss';
cursor: pointer .icon-retweet {
} cursor: pointer;
.retweeted { &:hover {
color: $green;
}
}
.retweeted {
cursor: auto; cursor: auto;
color: green; color: $green;
} }
</style> </style>

View file

@ -51,7 +51,8 @@
<script src="./status.js" ></script> <script src="./status.js" ></script>
<style lang="scss"> <style lang="scss">
.status-el { @import '../../_variables.scss';
.status-el {
hyphens: auto; hyphens: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
@ -66,9 +67,13 @@
margin-top: 3px; margin-top: 3px;
margin-bottom: 3px; margin-bottom: 3px;
} }
} }
.status-actions { .status-actions {
padding-top: 5px; padding-top: 5px;
} }
.icon-reply:hover {
color: $blue;
}
</style> </style>