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;
$main-background: white;
$darkened-background: whitesmoke;
@import './_variables.scss';
#app {
background-color: $main-color;
background-size: cover;
@ -225,9 +222,10 @@ status.ng-enter.ng-enter-active {
}
.fa {
color: $main-color;
color: grey;
}
.status-actions {
width: 50%;
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>
<style>
<style lang='scss'>
@import '../../_variables.scss';
.favorite-button {
cursor: pointer
cursor: pointer;
&:hover {
color: $main-color;
}
}
.icon-star {
color: $main-color;
}
</style>

View file

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

View file

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