taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Unify styles between comments and activity.

stable
Andrey Antukh 2014-09-09 10:29:42 +02:00
parent e4881749b7
commit 7246c049c2
5 changed files with 140 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/styles/layout/us-detail.scss
View File

@ -114,34 +114,6 @@
}
}
.us-activity-tabs {
@extend %title;
border-bottom: 3px solid $gray-light;
padding: .5rem 0;
li {
@extend %large;
display: inline-block;
&:first-child {
border-right: 1px solid $gray-light;
}
}
a {
@include transition(color .2s ease-in);
color: $gray-light;
padding: 0 2rem;
&.active {
color: $grayer;
}
&:hover {
@include transition(color .2s ease-in);
color: $green-taiga;
}
}
.icon {
margin-right: .5rem;
}
}
.comment-list {
padding: 1rem;
}

4
app/styles/main.scss
View File

@ -60,10 +60,8 @@ $prefix-for-spec: true;
@import 'modules/common/colors-table';
@import 'modules/common/category-config';
@import 'modules/common/attachments';
@import 'modules/common/comments';
@import 'modules/common/comment-activity';
@import 'modules/common/activity';
@import 'modules/common/related-tasks';
@import 'modules/common/history';
//Project modules
@import 'modules/home-projects-list';

51
app/styles/modules/common/activity.scss
View File

@ -1,51 +0,0 @@
.activity-single {
@include table-flex;
border-bottom: 2px solid $gray-light;
padding: 2rem 0;
position: relative;
&:first-child {
margin-top: 0;
}
.username {
color: $green-taiga;
margin-bottom: 1rem;
}
.activity-user {
@include table-flex-child(1, 50px, 0);
img {
max-width: 70px;
width: 100%;
}
}
.activity-username {
border-bottom: 1px dotted $gray-light;
color: $green-taiga;
margin-bottom: 1rem;
}
.activity-content {
@include table-flex-child(20, 150px, 0);
}
.us-activity {
background: $whitish;
.activity-inner {
display: none;
}
}
.date {
@extend %small;
color: $gray-light;
margin-left: 1rem;
}
}
.more-activity {
@extend %small;
border-bottom: 1px solid $gray-light;
color: $gray-light;
display: block;
padding: 1rem;
.prev-activity-num {
color: $green-taiga;
margin-left: .5rem;
}
}

41
app/styles/modules/common/comment-activity.scss
View File

@ -1,41 +0,0 @@
.us-activity {
margin-bottom: 1rem;
padding: 0 1rem;
}
.activity-title {
display: block;
padding: .5rem;
&:hover {
.icon {
@include transform(rotate(180deg));
@include transition(all.2s linear);
color: $green-taiga;
}
}
.icon {
@include transform(rotate(0));
@include transition(all.2s linear);
color: $grayer;
float: right;
}
}
.activity-inner {
@include table-flex;
border-bottom: 1px solid $gray-light;
padding: 1rem 0;
&:last-child {
border-bottom: 0;
}
.activity-changed,
.activity-fromto {
@include table-flex-child(1, 50px, 0);
}
.activity-changed {
@extend %bold;
}
.activity-fromto {
@extend %small;
}
}

199
app/styles/modules/common/comments.scss → app/styles/modules/common/history.scss
View File

@ -1,3 +1,74 @@
.history {
margin-bottom: 1rem;
padding: 0 1rem;
}
.changes-title {
display: block;
padding: .5rem;
&:hover {
.icon {
@include transform(rotate(180deg));
@include transition(all.2s linear);
color: $green-taiga;
}
}
.icon {
@include transform(rotate(0));
@include transition(all.2s linear);
color: $grayer;
float: right;
}
}
.change-entry {
@include table-flex;
border-bottom: 1px solid $gray-light;
padding: .5rem;
&:last-child {
border-bottom: 0;
}
.activity-changed,
.activity-fromto {
@include table-flex-child(1, 50px, 0);
}
.activity-changed {
@extend %bold;
}
.activity-fromto {
@extend %small;
}
}
.history-tabs {
@extend %title;
border-bottom: 3px solid $gray-light;
padding: .5rem 0;
li {
@extend %large;
display: inline-block;
&:first-child {
border-right: 1px solid $gray-light;
}
}
a {
@include transition(color .2s ease-in);
color: $gray-light;
padding: 0 2rem;
&.active {
color: $grayer;
}
&:hover {
@include transition(color .2s ease-in);
color: $green-taiga;
}
}
.icon {
margin-right: .5rem;
}
}
.add-comment {
@include clearfix;
textarea {
@ -37,66 +108,6 @@ a.show-more-comments {
}
}
.comment-single {
@include table-flex;
border-bottom: 2px solid $gray-light;
padding: 1rem 0;
position: relative;
&:hover {
.delete-comment {
opacity: 1;
@include transition(opacity .2s linear);
}
}
&:first-child {
margin-top: 0;
}
&:last-child {
border: 0;
}
.username {
color: $green-taiga;
display: block;
margin-bottom: 1rem;
}
.comment-user {
@include table-flex-child(1, 50px, 0);
img {
max-width: 70px;
width: 100%;
}
}
.comment-content {
@include table-flex-child(20, 150px, 0);
}
.us-activity {
background: $whitish;
.activity-inner {
display: none;
&.active {
display: flex;
}
}
}
.date {
@extend %small;
color: $gray-light;
}
.delete-comment {
@include transition(all .2s linear);
bottom: 2rem;
color: $grayer;
opacity: 0;
position: absolute;
right: 1.5rem;
&:hover {
@include transition(color .2s linear);
color: $red;
}
}
}
.more-comments {
@extend %small;
border-bottom: 1px solid $gray-light;
@ -108,6 +119,7 @@ a.show-more-comments {
margin-left: .5rem;
}
}
.comment-list {
&.activeanimation {
.comment-single.ng-enter:last-child,
@ -124,3 +136,70 @@ a.show-more-comments {
}
}
}
.activity-single {
@include table-flex;
border-bottom: 2px solid $gray-light;
padding: 2rem 0;
position: relative;
&:first-child {
margin-top: 0;
}
.username {
color: $green-taiga;
margin-bottom: 0.5rem;
}
.activity-user {
@include table-flex-child(1, 50px, 0);
img {
max-width: 70px;
width: 100%;
}
}
.activity-username {
color: $green-taiga;
margin-bottom: 1rem;
}
.activity-content {
@include table-flex-child(20, 150px, 0);
}
.changes {
background: $whitish;
.change-entry {
display: none;
&.active {
display: flex;
}
}
}
.date {
@extend %small;
color: $gray-light;
margin-left: 1rem;
}
.wysiwyg {
margin-bottom: 0px;
}
&.activity {
.change-entry {
display: flex;
}
}
}
.more-activity {
@extend %small;
border-bottom: 1px solid $gray-light;
color: $gray-light;
display: block;
padding: 1rem;
.prev-activity-num {
color: $green-taiga;
margin-left: .5rem;
}
}